Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
028d939e 1 parent 88cc145b

✨ feat: 新增用户资料页面

Inline Side-by-side
Showing 7 changed files with 202 additions and 3 deletions
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-05-27 15:57:59 3 * @Date: 2022-05-27 15:57:59
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2022-09-29 09:46:03 5 + * @LastEditTime: 2022-09-29 16:32:47
6 * @FilePath: /swx/src/app.config.js 6 * @FilePath: /swx/src/app.config.js
7 * @Description: 7 * @Description:
8 */ 8 */
...@@ -30,6 +30,7 @@ export default { ...@@ -30,6 +30,7 @@ export default {
30 'pages/joinVolunteer/index', 30 'pages/joinVolunteer/index',
31 'pages/joinInfo/index', 31 'pages/joinInfo/index',
32 'pages/joinList/index', 32 'pages/joinList/index',
33 + 'pages/userInfo/index',
33 ], 34 ],
34 subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去 35 subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去
35 { 36 {
......
1 <!-- 1 <!--
2 * @Date: 2022-09-27 17:13:05 2 * @Date: 2022-09-27 17:13:05
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-28 11:59:17 4 + * @LastEditTime: 2022-09-29 18:14:39
5 * @FilePath: /swx/src/pages/joinActivity/index.vue 5 * @FilePath: /swx/src/pages/joinActivity/index.vue
6 * @Description: 活动报名 6 * @Description: 活动报名
7 --> 7 -->
......
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
47 <view v-for="(item, index) in activityList" :key="index" class="list-item"> 47 <view v-for="(item, index) in activityList" :key="index" class="list-item">
48 <van-row> 48 <van-row>
49 <van-col span="6"> 49 <van-col span="6">
50 - <view class="avatar" :style="{ backgroundImage: `url(${item.avatar})` }"></view> 50 + <view @tap="goToUserInfo()" class="avatar" :style="{ backgroundImage: `url(${item.avatar})` }"></view>
51 </van-col> 51 </van-col>
52 <van-col span="14"> 52 <van-col span="14">
53 <view class="content"> 53 <view class="content">
...@@ -180,6 +180,12 @@ const toggleColum = (type) => { ...@@ -180,6 +180,12 @@ const toggleColum = (type) => {
180 activated.value = 2 180 activated.value = 2
181 } 181 }
182 } 182 }
183 +
184 +const goToUserInfo = () => {
185 + Taro.navigateTo({
186 + url: '../userInfo/index'
187 + })
188 +}
183 </script> 189 </script>
184 190
185 <script> 191 <script>
......
1 +export default {
2 + navigationBarTitleText: '用户资料',
3 + usingComponents: {
4 + },
5 +}
1 +.user-info-page {
2 + .bg-header {
3 + height: 12rem;
4 + width: 100%;
5 + background-image: url(http://gyzs.onwall.cn/userinfo_bg-top%402x.png);
6 + background-size: contain;
7 + background-repeat: no-repeat;
8 + }
9 + .header-info {
10 + display: flex;
11 + text-align: center;
12 + .activity {
13 + flex: 1;
14 + height: 50rpx;
15 + line-height: 50rpx;
16 + }
17 + .job {
18 + flex: 1;
19 + border-right: 1px solid #F5F5F5;
20 + border-left: 1px solid #F5F5F5;
21 + height: 100rpx;
22 + line-height: 50rpx;
23 + }
24 + .sign {
25 + flex: 1;
26 + height: 50rpx;
27 + line-height: 50rpx;
28 + }
29 + }
30 +
31 + .activity-title {
32 + background-color: #FFFFFF;
33 + .box {
34 + padding: 1rem 1rem 0.5rem 1rem;
35 + }
36 + }
37 + .bg-gradient {
38 + background: linear-gradient(#B3DDC9, #B3DDC9) no-repeat;
39 + /*调整下划线的宽度占百分之百 高度是3px */
40 + background-size: 100% 1vw;
41 + /* 调整下划线的起始位置 左侧是0 上边是1.15em */
42 + background-position: 0 1.1rem;
43 + }
44 +}
1 +<!--
2 + * @Date: 2022-09-29 16:32:03
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2022-09-29 18:16:25
5 + * @FilePath: /swx/src/pages/userInfo/index.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <view class="user-info-page">
10 + <view class="bg-header">
11 + <view style="height: 4rem; padding: 1rem;">
12 + <van-row>
13 + <van-col span="17">
14 + <view style="position: relative;">
15 + <AtAvatar circle size="large" image='https://jdc.jd.com/img/200' style="display: inline-block;"></AtAvatar>
16 + <view style="display: inline-block; position: absolute; top: 30%; left: 30%;">
17 + <text style="font-size: 1.15rem;">净妙</text>
18 + <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" />
19 + </view>
20 + </view>
21 + </van-col>
22 + <van-col span="7">
23 + <view style="background-color: #DABE73; color: white; padding: 0.5rem 0; border-radius: 1rem; text-align: center; font-size: 0.9rem;margin-top: 1rem;">修改资料</view>
24 + </van-col>
25 + </van-row>
26 + </view>
27 + <view style="background-color: white; margin: 1rem; padding: 1rem; border-radius: 1rem;">
28 + <view class="header-info">
29 + <view class="activity">
30 + <view><text style="font-size: 1.25rem;">20</text>次</view>
31 + <view>
32 + <van-icon :name="icon_join" size="1.5rem" color="" style="vertical-align: sub;" />
33 + <text style="font-size: 0.9rem; color: #999999;">参加活动</text>
34 + </view>
35 + </view>
36 + <view class="job">
37 + <text style="font-size: 1.25rem;">30-40</text>岁
38 + <view>
39 + <text style="font-size: 0.9rem; color: #999999;">年龄</text>
40 + </view>
41 + </view>
42 + <view class="sign">
43 + <view><text style="font-size: 1.25rem;">男士</text></view>
44 + <view>
45 + <text style="font-size: 0.9rem; color: #999999;">性别</text>
46 + </view>
47 + </view>
48 + </view>
49 + </view>
50 + </view>
51 + <view class="list-wrapper" style="margin: 1rem;">
52 + <view style="background-color: white; border-radius: 0.65rem; padding: 1rem;overflow: auto; margin-bottom: 1px;">
53 + <view style="display: inline-block; margin-right: 1rem; line-height: 60rpx;">
54 + <view class="bg-gradient" style="font-size: 1.15rem;">陪伴记录</view>
55 + </view>
56 + <view @tap="show_status_popup=true" style="float: right; color: #FFFFFF; font-size: 0.9rem; border-radius: 1rem; padding: 0.3rem 1rem 0.3rem 1rem; background-color: #199A74;">
57 + &nbsp;{{ status_type === '' ? '全部' : status_type }}&nbsp;&nbsp;
58 + <van-icon :name="icon_sel3" size="0.8rem" color="" style="vertical-align: middle;" />
59 + </view>
60 + <view style="float: right; margin-top: 0.25rem;">
61 + 陪伴者：
62 + </view>
63 + </view>
64 + <view>
65 + <view style="background-color: white; padding: 1rem; border-radius: 1rem; margin-bottom: 1rem;">
66 + <view style="overflow: auto;">
67 + <view style="float: left; font-size: 1.15rem;">
68 + <text style="color: #999999;">状态：</text><text style="color: #199A74;">跟进</text>
69 + </view>
70 + <view style="float: right; margin-top: 0.2rem; font-size: 0.9rem; color: #222222;">
71 + 净弘 2022-08-11 14:22
72 + </view>
73 + </view>
74 + <view style="margin-top: 1rem;">
75 + 对比上次净妙这次参与活动明显的能够融入进去了，与其他学员间的交流也比较多了，期待越来越好！
76 + </view>
77 + </view>
78 + <view style="background-color: white; padding: 1rem; border-radius: 1rem; margin-bottom: 1rem;">
79 + <view style="overflow: auto;">
80 + <view style="float: left; font-size: 1.15rem;">
81 + <text style="color: #999999;">状态：</text><text style="color: #199A74;">跟进</text>
82 + </view>
83 + <view style="float: right; margin-top: 0.2rem; font-size: 0.9rem; color: #222222;">
84 + 净弘 2022-08-11 14:22
85 + </view>
86 + </view>
87 + <view style="margin-top: 1rem;">
88 + 对比上次净妙这次参与活动明显的能够融入进去了，与其他学员间的交流也比较多了，期待越来越好！
89 + </view>
90 + </view>
91 + </view>
92 + </view>
93 + <view style="height: 2rem;"></view>
94 + <bottom-button @on-submit="onSubmit">添加记录</bottom-button>
95 +
96 + </view>
97 +
98 + <!-- 切换状态弹出框 -->
99 + <van-popup :show="show_status_popup" position="bottom" custom-style="height: 40%;" :lock-scroll="true">
100 + <van-picker :show-toolbar="true" title="" confirm-button-text="确定" :columns="status_type_columns"
101 + toolbar-class="picker-toolbar" @confirm="onStatusTypeConfirm" @cancel="onStatusTypeCancel" @change="onStatusTypeChange" />
102 + </van-popup>
103 +</template>
104 +
105 +<script setup>
106 +import { ref } from "vue";
107 +import icon_vip from '@/images/icon/vip@2x.png'
108 +import { AtAvatar } from 'taro-ui-vue3'
109 +import "taro-ui-vue3/dist/style/components/avatar.scss"
110 +import icon_join from '@/images/icon/baoming@2x.png'
111 +import icon_sel3 from '@/images/icon/sel03@2x.png'
112 +import bottomButton from "@/components/bottom-button";
113 +
114 +const show_status_popup = ref(false);
115 +const status_type = ref('');
116 +const status_type_columns = ref(['净弘']);
117 +const onStatusTypeChange = (event) => {
118 + const { picker, value, index } = event.detail;
119 +}
120 +const onStatusTypeConfirm = (event) => {
121 + const { picker, value, index } = event.detail;
122 + show_status_popup.value = false;
123 + status_type.value = value;
124 + console.warn('查询新数据');
125 +}
126 +const onStatusTypeCancel = (event) => {
127 + show_status_popup.value = false;
128 +}
129 +
130 +const onSubmit = (val) => {
131 + Taro.navigateTo({
132 + url: '../addRecord/index'
133 + })
134 +}
135 +</script>
136 +
137 +<script>
138 +import "./index.less";
139 +
140 +export default {
141 + name: "userInfoPage",
142 +};
143 +</script>