Hooke / meihua-island-book

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
c512ecdc 1 parent d1adc55a

完善我的信息页面

Inline Side-by-side
Showing 4 changed files with 71 additions and 8 deletions
...@@ -14,6 +14,7 @@ declare module '@vue/runtime-core' { ...@@ -14,6 +14,7 @@ declare module '@vue/runtime-core' {
14 NavBar: typeof import('./src/components/navBar.vue')['default'] 14 NavBar: typeof import('./src/components/navBar.vue')['default']
15 NutActionSheet: typeof import('@nutui/nutui-taro')['ActionSheet'] 15 NutActionSheet: typeof import('@nutui/nutui-taro')['ActionSheet']
16 NutAvatar: typeof import('@nutui/nutui-taro')['Avatar'] 16 NutAvatar: typeof import('@nutui/nutui-taro')['Avatar']
17 + NutAvatarCropper: typeof import('@nutui/nutui-taro')['AvatarCropper']
17 NutButton: typeof import('@nutui/nutui-taro')['Button'] 18 NutButton: typeof import('@nutui/nutui-taro')['Button']
18 NutCalendar: typeof import('@nutui/nutui-taro')['Calendar'] 19 NutCalendar: typeof import('@nutui/nutui-taro')['Calendar']
19 NutCol: typeof import('@nutui/nutui-taro')['Col'] 20 NutCol: typeof import('@nutui/nutui-taro')['Col']
......
1 <!-- 1 <!--
2 * @Date: 2023-12-13 11:13:13 2 * @Date: 2023-12-13 11:13:13
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-12-18 16:20:57 4 + * @LastEditTime: 2023-12-19 10:12:17
5 * @FilePath: /meihuaApp/src/pages/my/index.vue 5 * @FilePath: /meihuaApp/src/pages/my/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
10 <view id="avator" style="position: relative; display: flex; align-items: center; background-color: #3A2013; color: #FFF; padding: 40rpx 0 40rpx 25rpx;"> 10 <view id="avator" style="position: relative; display: flex; align-items: center; background-color: #3A2013; color: #FFF; padding: 40rpx 0 40rpx 25rpx;">
11 <view style="flex: 6; display: flex; align-items: center;"> 11 <view style="flex: 6; display: flex; align-items: center;">
12 <nut-avatar size="60" style="border: 1px solid #fff;"> 12 <nut-avatar size="60" style="border: 1px solid #fff;">
13 - <img src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" /> 13 + <img style="border-radius: 50%;" src="https://img.yzcdn.cn/vant/cat.jpeg" />
14 </nut-avatar> 14 </nut-avatar>
15 <text style="margin-left: 30rpx;">阿忆妞妞</text> 15 <text style="margin-left: 30rpx;">阿忆妞妞</text>
16 </view> 16 </view>
......
1 -.red { 1 +.nut-input {
2 - color: red; 2 + border-radius: 50rpx;
3 } 3 }
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-30 10:00:57 4 + * @LastEditTime: 2023-12-19 10:29:32
5 - * @FilePath: /swx/src/pages/demo/index.vue 5 + * @FilePath: /meihuaApp/src/pages/myInfo/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 - <div class="red">{{ str }}</div> 9 + <view>
10 + <view style="display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 50rpx; margin-bottom: 50rpx; position: relative;">
11 + <nut-avatar size="100">
12 + <img :src="imageUrl" style="border-radius: 50%;" @tap="uploadImg"/>
13 + </nut-avatar>
14 + <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>
15 + </view>
16 + <view style="margin: 30rpx 40rpx;">
17 + <nut-row type="flex" justify="center" align="center">
18 + <nut-col span="4">姓名</nut-col>
19 + <nut-col span="20">
20 + <view style="border: 1px solid #F1EBDF; width: 90%; border-radius: 50rpx; padding: 5rpx 0;">
21 + <nut-input v-model="username" placeholder="请输入姓名" :border="false" />
22 + </view>
23 + </nut-col>
24 + </nut-row>
25 + </view>
26 + <view style="margin: 30rpx 40rpx;">
27 + <nut-row type="flex" justify="center" align="center">
28 + <nut-col span="4">电话</nut-col>
29 + <nut-col span="20">
30 + <view style="border: 1px solid #F1EBDF; width: 90%; border-radius: 50rpx; padding: 5rpx 0;">
31 + <nut-input v-model="tel" placeholder="请输入电话" :border="false" type="number" />
32 + </view>
33 + </nut-col>
34 + </nut-row>
35 + </view>
36 + <view style="margin: 50rpx 40rpx;">
37 + <nut-button @tap="save" block color="#6A4925" size="large"><text style="font-size: 33rpx; font-weight: bold;">保&nbsp;存</text></nut-button>
38 + </view>
39 + </view>
10 </template> 40 </template>
11 41
12 <script setup> 42 <script setup>
13 import Taro from '@tarojs/taro' 43 import Taro from '@tarojs/taro'
14 import { ref } from "vue"; 44 import { ref } from "vue";
45 +
46 +const username = ref('');
47 +const tel = ref('');
48 +
49 +const imageUrl = ref(
50 + 'https://img.yzcdn.cn/vant/cat.jpeg'
51 +);
52 +const cutImage = (url) => {
53 + console.warn(url);
54 + imageUrl.value = url;
55 +};
56 +
57 +const uploadImg = () => {
58 + Taro.chooseImage({
59 + count: 1,
60 + success: (res) => {
61 + console.warn(res);
62 + const tempFilePaths = res.tempFilePaths[0];
63 + console.warn(tempFilePaths);
64 + imageUrl.value = tempFilePaths;
65 + }
66 + })
67 +}
68 +
69 +const save = () => {
70 + console.warn(username.value, tel.value);
71 + Taro.showToast({
72 + title: '保存成功',
73 + icon:'success',
74 + duration: 2000
75 + });
76 +}
15 </script> 77 </script>
16 78
17 <script> 79 <script>
18 import "./index.less"; 80 import "./index.less";
19 export default { 81 export default {
20 - name: "demoPage", 82 + name: "myInfoPage",
21 }; 83 };
22 </script> 84 </script>
......