index.vue
2.55 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
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-19 10:29:32
* @FilePath: /meihuaApp/src/pages/myInfo/index.vue
* @Description: 文件描述
-->
<template>
<view>
<view style="display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 50rpx; margin-bottom: 50rpx; position: relative;">
<nut-avatar size="100">
<img :src="imageUrl" style="border-radius: 50%;" @tap="uploadImg"/>
</nut-avatar>
<view style="position: absolute; right: calc(50% - 50rpx); bottom: 10rpx; width: 100rpx; height: 40rpx; color: #FFF; display: flex; align-items: center; justify-content: center;font-size: 28rpx;">编辑</view>
</view>
<view style="margin: 30rpx 40rpx;">
<nut-row type="flex" justify="center" align="center">
<nut-col span="4">姓名</nut-col>
<nut-col span="20">
<view style="border: 1px solid #F1EBDF; width: 90%; border-radius: 50rpx; padding: 5rpx 0;">
<nut-input v-model="username" placeholder="请输入姓名" :border="false" />
</view>
</nut-col>
</nut-row>
</view>
<view style="margin: 30rpx 40rpx;">
<nut-row type="flex" justify="center" align="center">
<nut-col span="4">电话</nut-col>
<nut-col span="20">
<view style="border: 1px solid #F1EBDF; width: 90%; border-radius: 50rpx; padding: 5rpx 0;">
<nut-input v-model="tel" placeholder="请输入电话" :border="false" type="number" />
</view>
</nut-col>
</nut-row>
</view>
<view style="margin: 50rpx 40rpx;">
<nut-button @tap="save" block color="#6A4925" size="large"><text style="font-size: 33rpx; font-weight: bold;">保 存</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 save = () => {
console.warn(username.value, tel.value);
Taro.showToast({
title: '保存成功',
icon:'success',
duration: 2000
});
}
</script>
<script>
import "./index.less";
export default {
name: "myInfoPage",
};
</script>