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 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-27 15:57:59
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-09-29 09:46:03
* @LastEditTime: 2022-09-29 16:32:47
* @FilePath: /swx/src/app.config.js
* @Description:
*/
......@@ -30,6 +30,7 @@ export default {
'pages/joinVolunteer/index',
'pages/joinInfo/index',
'pages/joinList/index',
'pages/userInfo/index',
],
subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去
{
......
<!--
* @Date: 2022-09-27 17:13:05
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-09-28 11:59:17
* @LastEditTime: 2022-09-29 18:14:39
* @FilePath: /swx/src/pages/joinActivity/index.vue
* @Description: 活动报名
-->
......
......@@ -47,7 +47,7 @@
<view v-for="(item, index) in activityList" :key="index" class="list-item">
<van-row>
<van-col span="6">
<view class="avatar" :style="{ backgroundImage: `url(${item.avatar})` }"></view>
<view @tap="goToUserInfo()" class="avatar" :style="{ backgroundImage: `url(${item.avatar})` }"></view>
</van-col>
<van-col span="14">
<view class="content">
......@@ -180,6 +180,12 @@ const toggleColum = (type) => {
activated.value = 2
}
}
const goToUserInfo = () => {
Taro.navigateTo({
url: '../userInfo/index'
})
}
</script>
<script>
......
export default {
navigationBarTitleText: '用户资料',
usingComponents: {
},
}
.user-info-page {
.bg-header {
height: 12rem;
width: 100%;
background-image: url(http://gyzs.onwall.cn/userinfo_bg-top%402x.png);
background-size: contain;
background-repeat: no-repeat;
}
.header-info {
display: flex;
text-align: center;
.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;
}
}
<!--
* @Date: 2022-09-29 16:32:03
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-09-29 18:16:25
* @FilePath: /swx/src/pages/userInfo/index.vue
* @Description: 文件描述
-->
<template>
<view class="user-info-page">
<view class="bg-header">
<view style="height: 4rem; padding: 1rem;">
<van-row>
<van-col span="17">
<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: 30%;">
<text style="font-size: 1.15rem;">净妙</text>
<van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" />
</view>
</view>
</van-col>
<van-col span="7">
<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>
</van-col>
</van-row>
</view>
<view style="background-color: white; margin: 1rem; padding: 1rem; border-radius: 1rem;">
<view class="header-info">
<view class="activity">
<view><text style="font-size: 1.25rem;">20</text>次</view>
<view>
<van-icon :name="icon_join" size="1.5rem" color="" style="vertical-align: sub;" />
<text style="font-size: 0.9rem; color: #999999;">参加活动</text>
</view>
</view>
<view class="job">
<text style="font-size: 1.25rem;">30-40</text>岁
<view>
<text style="font-size: 0.9rem; color: #999999;">年龄</text>
</view>
</view>
<view class="sign">
<view><text style="font-size: 1.25rem;">男士</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 class="bg-gradient" style="font-size: 1.15rem;">陪伴记录</view>
</view>
<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;">
&nbsp;{{ status_type === '' ? '全部' : status_type }}&nbsp;&nbsp;
<van-icon :name="icon_sel3" size="0.8rem" color="" style="vertical-align: middle;" />
</view>
<view style="float: right; margin-top: 0.25rem;">
陪伴者：
</view>
</view>
<view>
<view style="background-color: white; padding: 1rem; border-radius: 1rem; margin-bottom: 1rem;">
<view style="overflow: auto;">
<view style="float: left; font-size: 1.15rem;">
<text style="color: #999999;">状态：</text><text style="color: #199A74;">跟进</text>
</view>
<view style="float: right; margin-top: 0.2rem; font-size: 0.9rem; color: #222222;">
净弘 2022-08-11 14:22
</view>
</view>
<view style="margin-top: 1rem;">
对比上次净妙这次参与活动明显的能够融入进去了，与其他学员间的交流也比较多了，期待越来越好！
</view>
</view>
<view style="background-color: white; padding: 1rem; border-radius: 1rem; margin-bottom: 1rem;">
<view style="overflow: auto;">
<view style="float: left; font-size: 1.15rem;">
<text style="color: #999999;">状态：</text><text style="color: #199A74;">跟进</text>
</view>
<view style="float: right; margin-top: 0.2rem; font-size: 0.9rem; color: #222222;">
净弘 2022-08-11 14:22
</view>
</view>
<view style="margin-top: 1rem;">
对比上次净妙这次参与活动明显的能够融入进去了，与其他学员间的交流也比较多了，期待越来越好！
</view>
</view>
</view>
</view>
<view style="height: 2rem;"></view>
<bottom-button @on-submit="onSubmit">添加记录</bottom-button>
</view>
<!-- 切换状态弹出框 -->
<van-popup :show="show_status_popup" position="bottom" custom-style="height: 40%;" :lock-scroll="true">
<van-picker :show-toolbar="true" title="" confirm-button-text="确定" :columns="status_type_columns"
toolbar-class="picker-toolbar" @confirm="onStatusTypeConfirm" @cancel="onStatusTypeCancel" @change="onStatusTypeChange" />
</van-popup>
</template>
<script setup>
import { ref } from "vue";
import icon_vip from '@/images/icon/vip@2x.png'
import { AtAvatar } from 'taro-ui-vue3'
import "taro-ui-vue3/dist/style/components/avatar.scss"
import icon_join from '@/images/icon/baoming@2x.png'
import icon_sel3 from '@/images/icon/sel03@2x.png'
import bottomButton from "@/components/bottom-button";
const show_status_popup = ref(false);
const status_type = ref('');
const status_type_columns = ref(['净弘']);
const onStatusTypeChange = (event) => {
const { picker, value, index } = event.detail;
}
const onStatusTypeConfirm = (event) => {
const { picker, value, index } = event.detail;
show_status_popup.value = false;
status_type.value = value;
console.warn('查询新数据');
}
const onStatusTypeCancel = (event) => {
show_status_popup.value = false;
}
const onSubmit = (val) => {
Taro.navigateTo({
url: '../addRecord/index'
})
}
</script>
<script>
import "./index.less";
export default {
name: "userInfoPage",
};
</script>