Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
5cd25246 1 parent e55477f6

新增陪伴的用户页面

Inline Side-by-side
Showing 5 changed files with 309 additions and 5 deletions
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-27 15:57:59
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-10-08 11:56:16
* @LastEditTime: 2022-10-08 14:04:37
* @FilePath: /swx/src/app.config.js
* @Description:
*/
......@@ -35,6 +35,7 @@ export default {
'pages/editInfo/index',
'pages/myActivityList/index',
'pages/myCreateActivity/index',
'pages/myFollowUser/index',
],
subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去
{
......
<!--
* @Date: 2022-09-21 14:51:44
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-09-30 17:17:49
* @LastEditTime: 2022-10-08 11:58:10
* @FilePath: /swx/src/pages/my/index.vue
* @Description: 文件描述
-->
......@@ -26,7 +26,7 @@
</view>
<view style="background-color: white; margin: 1rem; padding: 1rem; border-radius: 1rem;">
<view style="display: flex; text-align: center;">
<view style="flex: 1; line-height: 60rpx;">
<view @tap="joinActivity" style="flex: 1; line-height: 60rpx;">
<view>
<van-icon :name="icon_join" size="3rem" color="" style="vertical-align: sub;" />
</view>
......@@ -34,7 +34,7 @@
<text style="font-size: 1rem; color: #222;">参加的活动</text>
</view>
</view>
<view style="flex: 1; line-height: 60rpx;">
<view @tap="createActivity" style="flex: 1; line-height: 60rpx;">
<view>
<van-icon :name="icon_create" size="3rem" color="" style="vertical-align: sub;" />
</view>
......@@ -42,7 +42,7 @@
<text style="font-size: 1rem; color: #222;">创建的活动</text>
</view>
</view>
<view style="flex: 1; line-height: 60rpx;">
<view @tap="followUser" style="flex: 1; line-height: 60rpx;">
<view>
<van-icon :name="icon_user" size="3rem" color="" style="vertical-align: sub;" />
</view>
......@@ -98,6 +98,25 @@ const activity_list = ref([{
title: '八段锦',
address: '',
}]);
// 参加的活动
const joinActivity = () => {
Taro.navigateTo({
url: '../myActivityList/index'
})
}
// 创建的活动
const createActivity = () => {
Taro.navigateTo({
url: '../myCreateActivity/index'
})
}
// 陪伴的用户
const followUser = () => {
Taro.navigateTo({
url: '../myFollowUser/index'
})
}
</script>
<script>
......
/*
* @Date: 2022-10-08 11:04:11
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-10-08 14:04:54
* @FilePath: /swx/src/pages/myFollowUser/index.config.js
* @Description: 文件描述
*/
export default {
navigationBarTitleText: '陪伴的用户',
usingComponents: {
},
}
.my-create-activity-header {
background-color: white;
margin: 1rem;
padding: 0.5rem;
border-radius: 1rem;
.header-info {
display: flex;
text-align: center;
padding-bottom: 1rem;
margin-top: 0.5rem;
.activity {
flex: 1;
height: 50rpx;
line-height: 50rpx;
}
.job {
flex: 1;
border-right: 1px solid #F5F5F5;
border-left: 1px solid #F5F5F5;
height: 100rpx;
line-height: 50rpx;
}
.sign {
flex: 1;
height: 50rpx;
line-height: 50rpx;
}
}
}
.activity-title {
background-color: #FFFFFF;
.box {
padding: 1rem 1rem 0.5rem 1rem;
}
}
.bg-gradient {
background: linear-gradient(#B3DDC9, #B3DDC9) no-repeat;
/*调整下划线的宽度占百分之百 高度是3px */
background-size: 100% 1vw;
/* 调整下划线的起始位置 左侧是0 上边是1.15em */
background-position: 0 1.1rem;
}
.inactivate {
font-size: 1rem;
color: #999999;
}
.list-item {
background-color: white;
padding: 0.75rem;
border-radius: 0.65rem;
position: relative;
margin-bottom: 1rem;
.avatar {
width: 100%;
height: 5rem;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-radius: 0.5rem;
}
.content {
padding: 0.5rem 1rem;
.title {
font-size: 1.25rem;
}
.phone {
color: #199A74;
margin-top: 0.5rem;
}
}
}
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-10-08 15:21:37
* @FilePath: /swx/src/pages/myFollowUser/index.vue
* @Description: 文件描述
-->
<template>
<div class="my-create-activity-page">
<view style="width: 100%; background-image: url(http://gyzs.onwall.cn/userinfo_bg-top%402x.png); background-size: contain; background-repeat: no-repeat;">
<view style="height: 4rem; padding: 1rem;">
<van-row>
<van-col span="18">
<view style="position: relative;">
<AtAvatar circle size="large" image='https://jdc.jd.com/img/200' style="display: inline-block;"></AtAvatar>
<view style="display: inline-block; position: absolute; top: 30%; left: 28%;">
<text style="font-size: 1.05rem;">周三读书会（主办方）</text>
<van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" />
</view>
</view>
</van-col>
<van-col span="6">
<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>
</van-col>
</van-row>
</view>
<view class="my-create-activity-header">
<view class="activity-title">
<view class="box">
<text class="bg-gradient" style="font-size: 1.15rem;">用户统计</text>
</view>
</view>
<view class="header-info">
<view class="activity">
<view><text style="font-size: 1.25rem;">5</text>人</view>
<view>
<text style="font-size: 0.9rem; color: #999999;">新用户</text>
</view>
</view>
<view class="job">
<text style="font-size: 1.25rem;">24</text>人
<view>
<text style="font-size: 0.9rem; color: #999999;">待陪伴</text>
</view>
</view>
<view class="job">
<text style="font-size: 1.25rem;">24</text>人
<view>
<text style="font-size: 0.9rem; color: #999999;">用户总数</text>
</view>
</view>
<view class="sign">
<view><text style="font-size: 1.25rem;">233</text>次</view>
<view>
<text style="font-size: 0.9rem; color: #999999;">跟踪总数</text>
</view>
</view>
</view>
</view>
</view>
<view class="list-wrapper" style="margin: 1rem;">
<view style="background-color: white; border-radius: 0.65rem; padding: 1rem;overflow: auto; margin-bottom: 1px;">
<view style="display: inline-block; margin-right: 1rem; line-height: 60rpx;">
<view @tap="toggleColum('activity')" :class="[activated === 1 ? 'bg-gradient' : 'inactivate']" style="font-size: 1rem;">全部用户</view>
</view>
<view style="display: inline-block; line-height: 60rpx; position: relative;">
<view @tap="toggleColum('join')" :class="[activated === 2 ? 'bg-gradient' : 'inactivate']">待陪伴</view>
<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>
</view>
</view>
<view>
<view v-for="(item, index) in activityList" :key="index" class="list-item">
<van-row>
<van-col span="6">
<view @tap="goToUserInfo()" class="avatar" :style="{ backgroundImage: `url(${item.avatar})`, position: 'relative' }">
<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>
</view>
</van-col>
<van-col span="18">
<view class="content">
<view class="title">{{ item.name }}</view>
<!-- <view class="phone" @tap="onPhoneClick(item.phone)">
<van-icon :name="icon_tel" color="" size="1.25rem" style="vertical-align: sub;" />
{{ item.phone }}
</view> -->
<view style="color: #999999;">时间描述</view>
<view style="color: #999999;" class="van-ellipsis">对比上次净妙这次参与活动明显的能够融入进</view>
</view>
</van-col>
</van-row>
</view>
</view>
</view>
<view style="height: 2rem;"></view>
</div>
</template>
<script setup>
import { ref } from "vue";
import icon_vip from '@/images/icon/vip@2x.png'
import Taro from '@tarojs/taro'
import { AtAvatar } from 'taro-ui-vue3'
import "taro-ui-vue3/dist/style/components/avatar.scss"
import icon_tel from '@/images/icon/tel@2x.png'
const activityList = ref([{
avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
name: '净妙',
phone: '18789800786',
status: '1',
}, {
avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
name: '人在路途',
phone: '18789800786',
status: '2',
}, {
avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
name: '寒潭秋月心如洗',
phone: '18789800786',
status: '3',
}, {
avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
name: '净妙',
phone: '18789800786',
status: '1',
}, {
avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
name: '人在路途',
phone: '18789800786',
status: '2',
}, {
avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
name: '寒潭秋月心如洗',
phone: '18789800786',
status: '3',
}])
const onPhoneClick = (number) => {
Taro.makePhoneCall({
phoneNumber: number
})
}
const activated = ref(1);
const toggleColum = (type) => {
if (type === 'activity') {
activityList.value = [{
avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
name: '净妙',
phone: '18789800786',
status: '1',
}, {
avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
name: '人在路途',
phone: '18789800786',
status: '2',
}, {
avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
name: '寒潭秋月心如洗',
phone: '18789800786',
status: '3',
}, {
avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
name: '净妙',
phone: '18789800786',
status: '1',
}, {
avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
name: '人在路途',
phone: '18789800786',
status: '2',
}, {
avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
name: '寒潭秋月心如洗',
phone: '18789800786',
status: '3',
}];
activated.value = 1
} else {
activityList.value = [];
activated.value = 2
}
}
const goToUserInfo = () => {
Taro.navigateTo({
url: '../userInfo/index'
})
}
</script>
<script>
import "./index.less";
export default {
name: "demoPage",
};
</script>