Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
dadaaece 1 parent 51a24a73

✨ feat: 陪伴用户页面API联调

Inline Side-by-side
Showing 2 changed files with 215 additions and 123 deletions
1 <!-- 1 <!--
2 * @Date: 2022-09-21 14:51:44 2 * @Date: 2022-09-21 14:51:44
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-10-25 18:29:15 4 + * @LastEditTime: 2022-10-26 15:52:42
5 * @FilePath: /swx/src/pages/my/index.vue 5 * @FilePath: /swx/src/pages/my/index.vue
6 * @Description: 我的页面 6 * @Description: 我的页面
7 --> 7 -->
...@@ -84,13 +84,17 @@ import { hostListAPI } from '@/api/Host/index' ...@@ -84,13 +84,17 @@ import { hostListAPI } from '@/api/Host/index'
84 import Toast from '@/components/vant-weapp/toast/toast'; 84 import Toast from '@/components/vant-weapp/toast/toast';
85 85
86 const host_id = ref(''); 86 const host_id = ref('');
87 +const join_hosts = ref([])
87 onMounted(async () => { 88 onMounted(async () => {
88 // 获取主办方列表信息 89 // 获取主办方列表信息
89 - const { code, data } = await hostListAPI(); 90 + const { code, data } = await hostListAPI({ is_join: 1 });
90 if (code) { 91 if (code) {
91 if (data.my_hosts.length) { 92 if (data.my_hosts.length) {
92 host_id.value = data.my_hosts[0]?.id 93 host_id.value = data.my_hosts[0]?.id
93 } 94 }
95 + if (data.join_hosts.length) {
96 + join_hosts.value = data.join_hosts
97 + }
94 } 98 }
95 }) 99 })
96 100
...@@ -111,11 +115,16 @@ const createActivity = () => { ...@@ -111,11 +115,16 @@ const createActivity = () => {
111 }) 115 })
112 } 116 }
113 // 陪伴的用户 117 // 陪伴的用户
114 -const followUser = () => { 118 +const followUser = async () => {
115 - Taro.navigateTo({ 119 + if (join_hosts.value.length) {
116 - url: '../myFollowUser/index' 120 + Taro.navigateTo({
117 - }) 121 + url: '../myFollowUser/index?host_id=' + join_hosts.value[0]['id']
122 + })
123 + } else {
124 + Toast('您还加入过义工')
125 + }
118 } 126 }
127 +
119 // 我的主办方 128 // 我的主办方
120 const myProject = () => { 129 const myProject = () => {
121 Taro.navigateTo({ 130 Taro.navigateTo({
...@@ -154,13 +163,13 @@ export default { ...@@ -154,13 +163,13 @@ export default {
154 }) 163 })
155 this.activity_list = data.activity_list; 164 this.activity_list = data.activity_list;
156 this.nickname = data.user.nickname; 165 this.nickname = data.user.nickname;
157 - this.avatar = data.user.avatar ? data.user.avatar : 'https://jdc.jd.com/img/200'; 166 + this.avatar = data.user.avatar ? data.user.avatar : 'http://gyzs.onwall.cn/tou%402x.png';
158 } 167 }
159 }, 168 },
160 methods: { 169 methods: {
161 formatDate (date) { 170 formatDate (date) {
162 return dayjs(date).format('YYYY-MM-DD HH:mm') 171 return dayjs(date).format('YYYY-MM-DD HH:mm')
163 - } 172 + },
164 } 173 }
165 }; 174 };
166 </script> 175 </script>
......
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-10-08 15:21:37 4 + * @LastEditTime: 2022-10-26 15:49:57
5 * @FilePath: /swx/src/pages/myFollowUser/index.vue 5 * @FilePath: /swx/src/pages/myFollowUser/index.vue
6 - * @Description: 文件描述 6 + * @Description: 陪伴的用户页面
7 --> 7 -->
8 <template> 8 <template>
9 <div class="my-create-activity-page"> 9 <div class="my-create-activity-page">
10 - <view style="width: 100%; background-image: url(http://gyzs.onwall.cn/userinfo_bg-top%402x.png); background-size: contain; background-repeat: no-repeat;"> 10 + <view id="page-header" style="width: 100%; background-image: url(http://gyzs.onwall.cn/userinfo_bg-top%402x.png); background-size: contain; background-repeat: no-repeat;">
11 <view style="height: 4rem; padding: 1rem;"> 11 <view style="height: 4rem; padding: 1rem;">
12 <van-row> 12 <van-row>
13 <van-col span="18"> 13 <van-col span="18">
14 <view style="position: relative;"> 14 <view style="position: relative;">
15 - <AtAvatar circle size="large" image='https://jdc.jd.com/img/200' style="display: inline-block;"></AtAvatar> 15 + <AtAvatar circle size="large" :image='icon_company' style="display: inline-block;"></AtAvatar>
16 <view style="display: inline-block; position: absolute; top: 30%; left: 28%;"> 16 <view style="display: inline-block; position: absolute; top: 30%; left: 28%;">
17 - <text style="font-size: 1.05rem;">周三读书会（主办方）</text> 17 + <text style="font-size: 1.05rem;">{{ host_name }}</text>
18 - <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" /> 18 + <!-- <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" /> -->
19 </view> 19 </view>
20 </view> 20 </view>
21 </van-col> 21 </van-col>
22 <van-col span="6"> 22 <van-col span="6">
23 - <view @tap="editInfo()" style="background-color: #DABE73; color: white; padding: 0.5rem 0; border-radius: 1rem; text-align: center; font-size: 0.85rem;margin-top: 1rem;">切换主办方</view> 23 + <view @tap="show_host_popup=true" style="background-color: #DABE73; color: white; padding: 0.5rem 0; border-radius: 1rem; text-align: center; font-size: 0.85rem;margin-top: 1rem;">切换主办方</view>
24 </van-col> 24 </van-col>
25 </van-row> 25 </van-row>
26 </view> 26 </view>
...@@ -32,25 +32,25 @@ ...@@ -32,25 +32,25 @@
32 </view> 32 </view>
33 <view class="header-info"> 33 <view class="header-info">
34 <view class="activity"> 34 <view class="activity">
35 - <view><text style="font-size: 1.25rem;">5</text>人</view> 35 + <view><text style="font-size: 1.25rem;">{{ new_count }}</text>人</view>
36 <view> 36 <view>
37 <text style="font-size: 0.9rem; color: #999999;">新用户</text> 37 <text style="font-size: 0.9rem; color: #999999;">新用户</text>
38 </view> 38 </view>
39 </view> 39 </view>
40 <view class="job"> 40 <view class="job">
41 - <text style="font-size: 1.25rem;">24</text>人 41 + <text style="font-size: 1.25rem;">{{ no_partner_note_count }}</text>人
42 <view> 42 <view>
43 <text style="font-size: 0.9rem; color: #999999;">待陪伴</text> 43 <text style="font-size: 0.9rem; color: #999999;">待陪伴</text>
44 </view> 44 </view>
45 </view> 45 </view>
46 <view class="job"> 46 <view class="job">
47 - <text style="font-size: 1.25rem;">24</text>人 47 + <text style="font-size: 1.25rem;">{{ member_count }}</text>人
48 <view> 48 <view>
49 <text style="font-size: 0.9rem; color: #999999;">用户总数</text> 49 <text style="font-size: 0.9rem; color: #999999;">用户总数</text>
50 </view> 50 </view>
51 </view> 51 </view>
52 <view class="sign"> 52 <view class="sign">
53 - <view><text style="font-size: 1.25rem;">233</text>次</view> 53 + <view><text style="font-size: 1.25rem;">{{ note_count }}</text>次</view>
54 <view> 54 <view>
55 <text style="font-size: 0.9rem; color: #999999;">跟踪总数</text> 55 <text style="font-size: 0.9rem; color: #999999;">跟踪总数</text>
56 </view> 56 </view>
...@@ -59,82 +59,72 @@ ...@@ -59,82 +59,72 @@
59 </view> 59 </view>
60 </view> 60 </view>
61 <view class="list-wrapper" style="margin: 1rem;"> 61 <view class="list-wrapper" style="margin: 1rem;">
62 - <view style="background-color: white; border-radius: 0.65rem; padding: 1rem;overflow: auto; margin-bottom: 1px;"> 62 + <view id="navbar-page" style="background-color: white; border-radius: 0.65rem; padding: 1rem;overflow: auto; margin-bottom: 1px;">
63 <view style="display: inline-block; margin-right: 1rem; line-height: 60rpx;"> 63 <view style="display: inline-block; margin-right: 1rem; line-height: 60rpx;">
64 <view @tap="toggleColum('activity')" :class="[activated === 1 ? 'bg-gradient' : 'inactivate']" style="font-size: 1rem;">全部用户</view> 64 <view @tap="toggleColum('activity')" :class="[activated === 1 ? 'bg-gradient' : 'inactivate']" style="font-size: 1rem;">全部用户</view>
65 </view> 65 </view>
66 <view style="display: inline-block; line-height: 60rpx; position: relative;"> 66 <view style="display: inline-block; line-height: 60rpx; position: relative;">
67 <view @tap="toggleColum('join')" :class="[activated === 2 ? 'bg-gradient' : 'inactivate']">待陪伴</view> 67 <view @tap="toggleColum('join')" :class="[activated === 2 ? 'bg-gradient' : 'inactivate']">待陪伴</view>
68 - <view style="position: absolute; right: -1rem; top: 0; color: white; background-color: red; border-radius: 0.58rem; width: 1rem; height: 1rem; font-size: 0.8rem; line-height: 1rem; text-align: center;">2</view> 68 + <view v-if="no_partner_note_count" style="position: absolute; right: -1rem; top: 0; color: white; background-color: red; border-radius: 0.58rem; width: 1rem; height: 1rem; font-size: 0.8rem; line-height: 1rem; text-align: center;">{{ no_partner_note_count }}</view>
69 </view> 69 </view>
70 </view> 70 </view>
71 - <view> 71 + <scroll-view :scroll-y="true" :style="scrollStyle" @scrolltolower="onScrollToLower">
72 - <view v-for="(item, index) in activityList" :key="index" class="list-item"> 72 + <view>
73 - <van-row> 73 + <view v-for="(item, index) in member_list" :key="index" class="list-item">
74 - <van-col span="6"> 74 + <van-row>
75 - <view @tap="goToUserInfo()" class="avatar" :style="{ backgroundImage: `url(${item.avatar})`, position: 'relative' }"> 75 + <van-col span="6">
76 - <view style="position: absolute; right: -0.5rem; top: -0.5rem; background-color: #FCEAE7; border-radius: 0.58rem; width: 1.2rem; height: 1.2rem; font-size: 0.7rem; line-height: 1.2rem; text-align: center; color: #E21A1A;">新</view> 76 + <view @tap="goToUserInfo(item.id)" class="avatar" :style="{ backgroundImage: `url(${item.avatar ? item.avatar : 'http://gyzs.onwall.cn/tou%402x.png'})`, position: 'relative' }">
77 - </view> 77 + <view v-if="item.is_new" style="position: absolute; right: -0.5rem; top: -0.5rem; background-color: #FCEAE7; border-radius: 0.58rem; width: 1.2rem; height: 1.2rem; font-size: 0.7rem; line-height: 1.2rem; text-align: center; color: #E21A1A;">新</view>
78 - </van-col> 78 + </view>
79 - <van-col span="18"> 79 + </van-col>
80 - <view class="content"> 80 + <van-col span="18">
81 - <view class="title">{{ item.name }}</view> 81 + <view class="content">
82 - <!-- <view class="phone" @tap="onPhoneClick(item.phone)"> 82 + <view class="title">{{ item.name }}</view>
83 - <van-icon :name="icon_tel" color="" size="1.25rem" style="vertical-align: sub;" /> 83 + <view v-if="activated === 2" class="phone" @tap="onPhoneClick(item.phone)">
84 - {{ item.phone }} 84 + <van-icon :name="icon_tel" color="" size="1.25rem" style="vertical-align: sub;" />
85 - </view> --> 85 + {{ item.phone }}
86 - <view style="color: #999999;">时间描述</view> 86 + </view>
87 - <view style="color: #999999;" class="van-ellipsis">对比上次净妙这次参与活动明显的能够融入进</view> 87 + <view v-if="activated === 1 && item.last_partner_note">
88 - </view> 88 + <view style="color: #999999;">{{ formatDate(item.last_partner_note.created_time) }}</view>
89 - </van-col> 89 + <view style="color: #999999;" class="van-ellipsis">{{ item.last_partner_note.note }}</view>
90 - </van-row> 90 + </view>
91 + </view>
92 + </van-col>
93 + </van-row>
94 + </view>
91 </view> 95 </view>
92 - </view> 96 + </scroll-view>
93 </view> 97 </view>
94 <view style="height: 2rem;"></view> 98 <view style="height: 2rem;"></view>
95 </div> 99 </div>
96 100
101 + <!-- 切换主办方弹出框 -->
102 + <van-popup :show="show_host_popup" position="bottom" custom-style="height: 50%;" :lock-scroll="true">
103 + <van-picker :show-toolbar="true" title="" confirm-button-text="确定" :columns="host_columns"
104 + toolbar-class="picker-toolbar" @confirm="onHostConfirm" @cancel="onHostCancel" />
105 + </van-popup>
106 +
107 + <van-toast id="van-toast" />
108 +
97 </template> 109 </template>
98 110
99 <script setup> 111 <script setup>
100 import { ref } from "vue"; 112 import { ref } from "vue";
101 -import icon_vip from '@/images/icon/vip@2x.png' 113 +import icon_vip from '@/images/icon/vip@2x.png';
102 -import Taro from '@tarojs/taro' 114 +import Taro from '@tarojs/taro';
103 -import { AtAvatar } from 'taro-ui-vue3' 115 +import { AtAvatar } from 'taro-ui-vue3';
104 -import "taro-ui-vue3/dist/style/components/avatar.scss" 116 +import "taro-ui-vue3/dist/style/components/avatar.scss";
105 -import icon_tel from '@/images/icon/tel@2x.png' 117 +import icon_tel from '@/images/icon/tel@2x.png';
106 - 118 +import icon_company from '@/images/icon/zhubanfang@2x.png';
107 -const activityList = ref([{ 119 +import Toast from '@/components/vant-weapp/toast/toast';
108 - avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', 120 +import { $ } from '@tarojs/extend'
109 - name: '净妙', 121 +import mixin from '@/utils/mixin';
110 - phone: '18789800786', 122 +import { getCurrentPageParam } from "@/utils/weapp";
111 - status: '1', 123 +import { hostListAPI } from '@/api/Host/index'
112 -}, { 124 +import * as dayjs from 'dayjs'
113 - avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', 125 +const formatDate = (date) => {
114 - name: '人在路途', 126 + return dayjs(date).format('YYYY-MM-DD HH:mm')
115 - phone: '18789800786', 127 +}
116 - status: '2',
117 -}, {
118 - avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
119 - name: '寒潭秋月心如洗',
120 - phone: '18789800786',
121 - status: '3',
122 -}, {
123 - avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
124 - name: '净妙',
125 - phone: '18789800786',
126 - status: '1',
127 -}, {
128 - avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
129 - name: '人在路途',
130 - phone: '18789800786',
131 - status: '2',
132 -}, {
133 - avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
134 - name: '寒潭秋月心如洗',
135 - phone: '18789800786',
136 - status: '3',
137 -}])
138 128
139 const onPhoneClick = (number) => { 129 const onPhoneClick = (number) => {
140 Taro.makePhoneCall({ 130 Taro.makePhoneCall({
...@@ -142,57 +132,150 @@ const onPhoneClick = (number) => { ...@@ -142,57 +132,150 @@ const onPhoneClick = (number) => {
142 }) 132 })
143 } 133 }
144 134
145 -const activated = ref(1); 135 +const goToUserInfo = (member_id) => {
146 -const toggleColum = (type) => {
147 - if (type === 'activity') {
148 - activityList.value = [{
149 - avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
150 - name: '净妙',
151 - phone: '18789800786',
152 - status: '1',
153 - }, {
154 - avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
155 - name: '人在路途',
156 - phone: '18789800786',
157 - status: '2',
158 - }, {
159 - avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
160 - name: '寒潭秋月心如洗',
161 - phone: '18789800786',
162 - status: '3',
163 - }, {
164 - avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
165 - name: '净妙',
166 - phone: '18789800786',
167 - status: '1',
168 - }, {
169 - avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
170 - name: '人在路途',
171 - phone: '18789800786',
172 - status: '2',
173 - }, {
174 - avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
175 - name: '寒潭秋月心如洗',
176 - phone: '18789800786',
177 - status: '3',
178 - }];
179 - activated.value = 1
180 - } else {
181 - activityList.value = [];
182 - activated.value = 2
183 - }
184 -}
185 -
186 -const goToUserInfo = () => {
187 Taro.navigateTo({ 136 Taro.navigateTo({
188 - url: '../userInfo/index' 137 + url: '../userInfo/index?member_id=' + member_id
189 }) 138 })
190 } 139 }
191 </script> 140 </script>
192 141
193 <script> 142 <script>
194 import "./index.less"; 143 import "./index.less";
144 +import { traceMemberAPI } from '@/api/Member/index'
145 +
195 export default { 146 export default {
196 - name: "demoPage", 147 + name: "myFollowUserPage",
148 + mixins: [mixin.init],
149 + async onShow () {
150 + // 获取主办方列表信息
151 + const host = await hostListAPI({ is_join: 1 });
152 + if (host.code) {
153 + host.data.join_hosts.forEach(item => {
154 + if (item.id == getCurrentPageParam().host_id) {
155 + this.host_id = item.id;
156 + this.host_name = item.name;
157 + }
158 + item.text = item.name;
159 + item.key = item.id;
160 + });
161 + this.host_columns = host.data.join_hosts;
162 + }
163 + // 获取我陪伴的用户列表
164 + const params = {
165 + host_id: getCurrentPageParam().host_id,
166 + is_partner_note: this.activated === 1 ? '' : 0,
167 + search: this.search,
168 + page: this.page,
169 + limit: this.limit
170 + }
171 + const { code, data } = await traceMemberAPI(params);
172 + if (code) {
173 + this.member_list = data.member_list;
174 + this.new_count = data.new_count;
175 + this.no_partner_note_count = data.no_partner_note_count;
176 + this.member_count = data.member_count;
177 + this.note_count = data.note_count;
178 + this.page = this.page + 1;
179 + this.flag = true;
180 + }
181 + },
182 + onHide () { // 离开当前页面
183 + this.page = 0;
184 + this.flag = true;
185 + },
186 + mounted () {
187 + // 设置滚动列表可视高度
188 + const windowHeight = wx.getSystemInfoSync().windowHeight;
189 + setTimeout(async () => {
190 + const headerHeight = await $('#page-header').height();
191 + const navHeight = await $('#navbar-page').height();
192 + this.scrollStyle = {
193 + height: windowHeight - headerHeight - navHeight - 50 + 'px'
194 + }
195 + }, 500);
196 + },
197 + data() {
198 + return {
199 + member_list: [],
200 + activated: 1,
201 + flag: true,
202 + page: 0,
203 + limit: 10,
204 + scrollStyle: { height: '1000rpx' },
205 + search: '',
206 + new_count: 0,
207 + no_partner_note_count: 0,
208 + member_count: 0,
209 + note_count: 0,
210 + show_host_popup: false,
211 + host_columns: [],
212 + host_id: '',
213 + host_name: '',
214 + };
215 + },
216 + methods: {
217 + formatDate (date) {
218 + return dayjs(date).format('YYYY-MM-DD HH:mm')
219 + },
220 + onScrollToLower () {
221 + if(!this.flag){
222 + return
223 + }
224 + this.flag = false;
225 + this.getList();
226 + },
227 + async getList () {
228 + // 获取我陪伴的用户列表
229 + const params = {
230 + host_id: this.host_id,
231 + is_partner_note: this.activated === 1 ? '' : 0,
232 + search: this.search,
233 + page: this.page,
234 + limit: this.limit
235 + }
236 + const { code, data } = await traceMemberAPI(params);
237 + if (code) {
238 + if (data.member_list.length) {
239 + this.member_list = this.member_list.concat(data.member_list);
240 + this.new_count = data.new_count;
241 + this.no_partner_note_count = data.no_partner_note_count;
242 + this.member_count = data.member_count;
243 + this.note_count = data.note_count;
244 + this.page = this.page + 1;
245 + this.flag = true;
246 + } else {
247 + Toast('没有数据')
248 + }
249 + }
250 + },
251 + onHostConfirm (event) {
252 + const { picker, value, index } = event.detail;
253 + this.show_host_popup = false;
254 + this.host_id = value.key;
255 + this.host_name = value.text;
256 + // 缓存主办方ID
257 + // wx.setStorageSync('chang_host_id', value.key);
258 + // 查询数据
259 + this.member_list = [];
260 + this.flag = true;
261 + this.page = 0;
262 + this.getList();
263 + },
264 + onHostCancel (event) {
265 + this.show_host_popup = false;
266 + },
267 + toggleColum (type) {
268 + if (type === 'activity') { // 全部用户
269 + this.activated = 1;
270 + } else { // 待陪伴
271 + this.activated = 2;
272 + }
273 + // 重置条件
274 + this.page = 0;
275 + this.member_list = [];
276 + this.flag = false;
277 + this.getList();
278 + },
279 + },
197 }; 280 };
198 </script> 281 </script>
......