index.vue
2.48 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-20 18:20:37
* @FilePath: /meihuaApp/src/pages/myInfo/index.vue
* @Description: 我的信息页面
-->
<template>
<view class="my-info-page">
<view class="avatar" @tap="uploadImg">
<nut-avatar size="100">
<img :src="imageUrl" style="border-radius: 50%;"/>
</nut-avatar>
<view class="edit">编辑</view>
</view>
<view class="info-name">
<nut-row type="flex" justify="center" align="center">
<nut-col span="4">姓名</nut-col>
<nut-col span="20">
<view class="wrapper">
<nut-input v-model="username" placeholder="请输入姓名" :border="false" />
</view>
</nut-col>
</nut-row>
</view>
<view class="info-tel">
<nut-row type="flex" justify="center" align="center">
<nut-col span="4">电话</nut-col>
<nut-col span="20">
<view class="wrapper">
<nut-input v-model="tel" placeholder="请输入电话" :border="false" type="number" max-length="11" />
</view>
</nut-col>
</nut-row>
</view>
<view class="save-btn">
<nut-button @tap="save" block color="#6A4925" size="large">
<text>保 存</text>
</nut-button>
</view>
</view>
</template>
<script setup>
import Taro from '@tarojs/taro'
import { ref } from "vue";
const username = ref('');
const tel = ref('');
const imageUrl = ref(
'https://img.yzcdn.cn/vant/cat.jpeg'
);
const cutImage = (url) => {
console.warn(url);
imageUrl.value = url;
};
const uploadImg = () => {
Taro.chooseImage({
count: 1,
success: (res) => {
console.warn(res);
const tempFilePaths = res.tempFilePaths[0];
console.warn(tempFilePaths);
imageUrl.value = tempFilePaths;
}
})
}
const isValidTel = (tel) => {
return /^1\d{10}$/.test(tel);
}
const save = () => {
console.warn(username.value, tel.value);
if (!isValidTel(tel.value) ||!username.value) {
Taro.showToast({
title: '请检查输入项',
icon: 'error',
duration: 2000
});
return;
} else {
Taro.showToast({
title: '保存成功',
icon: 'success',
duration: 1000,
success: () => {
setTimeout(() => {
Taro.reLaunch({
url: '/pages/my/index'
})
}, 1000);
}
});
}
}
</script>
<script>
import "./index.less";
export default {
name: "myInfoPage",
};
</script>