Skip to content

杨炀 / ztx_wx_gzt

Go to a project
Toggle navigation
Toggle navigation pinning
49d94eb2 by 张猛
Options

个人中心

1 parent 59468e57
Inline Side-by-side
Showing 2 changed files with 549 additions and 440 deletions
personal/addVip_per.vue
<template>
<view>
<uni-segmented-control class="whitebg" :current="current" :values="items" @clickItem="onClickItem"
styleType="text" activeColor="#C40F18"></uni-segmented-control>
<uni-segmented-control :current="current" :values="items" activeColor="#C40F18" class="whitebg"
styleType="text" @clickItem="onClickItem"></uni-segmented-control>
<view class="hasfixedbottom">
<view>
<uni-forms ref="baseForm" :border="true" :modelValue="baseFormData" label-width="80">
<view class="nolineform">
<uni-forms-item label="姓名" required name="name" v-show="current === 0">
<uni-easyinput :styles="inputstyle" :clearable='false' :placeholderStyle="placeholderStyle"
v-model="baseFormData.name" placeholder="请输入姓名" />
<uni-forms-item v-show="current === 0" label="姓名" name="name" required>
<uni-easyinput v-model="baseFormData.name" :clearable='false' :placeholderStyle="placeholderStyle"
:styles="inputstyle" placeholder="请输入姓名"/>
</uni-forms-item>
<uni-forms-item label="证件类型" required name="idcType">
<uni-data-select v-model="baseFormData.idcType" style="width: 360rpx;"
@change="changeIdcType" :clear="false" :disabled="current === 0"
:localdata="idcTypeList"></uni-data-select>
<uni-forms-item label="证件类型" name="idcType" required>
<uni-data-select v-model="baseFormData.idcType" :clear="false"
:disabled="current === 0" :localdata="idcTypeList" style="width: 360rpx;"
@change="changeIdcType"></uni-data-select>
</uni-forms-item>
<uni-forms-item label="证件照" required v-show="current === 1">
<uni-forms-item v-show="current === 1" label="证件照" required>
<view class="upCard">
<uni-file-picker v-model="cardObj" @delete="delimgFont" return-type="object" limit="1"
@select="upIdCardImgFront" :image-styles="imageStylesZJ">
<image v-if="!baseFormData.card" class="sfz"
:src="config.baseUrl_api+'/fs/static/login/sfz.png'">
<uni-file-picker v-model="cardObj" :image-styles="imageStylesZJ" limit="1" return-type="object"
@delete="delimgFont" @select="upIdCardImgFront">
<image v-if="!baseFormData.card" :src="config.baseUrl_api+'/fs/static/login/sfz.png'"
class="sfz">
</image>
</uni-file-picker>
</view>
</uni-forms-item>
<uni-forms-item label="姓名" required name="name" v-show="current === 1">
<text v-if="disabledName">{{baseFormData.name}}</text>
<uni-easyinput :styles="inputstyle" :clearable='false' :placeholderStyle="placeholderStyle"
v-model="baseFormData.name" v-else placeholder="请输入姓名" />
<uni-forms-item v-show="current === 1" label="姓名" name="name" required>
<text v-if="disabledName">{{ baseFormData.name }}</text>
<uni-easyinput v-else v-model="baseFormData.name" :clearable='false'
:placeholderStyle="placeholderStyle" :styles="inputstyle" placeholder="请输入姓名"/>
</uni-forms-item>
<uni-forms-item label="证件号码" required name="idcCode" v-show="current === 0">
<uni-easyinput :styles="inputstyle" :clearable='false' :placeholderStyle="placeholderStyle"
v-model="baseFormData.idcCode" @blur="giveBirthDay" placeholder="请输入证件号码" />
<uni-forms-item v-show="current === 0" label="证件号码" name="idcCode" required>
<uni-easyinput v-model="baseFormData.idcCode" :clearable='false' :placeholderStyle="placeholderStyle"
:styles="inputstyle" placeholder="请输入证件号码" @blur="giveBirthDay"/>
</uni-forms-item>
<uni-forms-item label="证件号码" required name="idcCode" v-show="current === 1">
<text>{{baseFormData.idcCode}}</text>
<uni-forms-item v-show="current === 1" label="证件号码" name="idcCode" required>
<text>{{ baseFormData.idcCode }}</text>
</uni-forms-item>
<uni-forms-item label="性别" required name="sex">
<uni-forms-item label="性别" name="sex" required>
<text v-if="baseFormData.sex=='0'">男</text>
<text v-else-if="baseFormData.sex=='1'">女</text>
<!-- <uni-data-checkbox v-model="baseFormData.sex" @change="changeSex" :localdata="sexs" /> -->
</uni-forms-item>
<uni-forms-item label="出生日期" required name="birth">
{{baseFormData.birth?.slice(0,10)}}
<uni-forms-item label="出生日期" name="birth" required>
{{ baseFormData.birth?.slice(0, 10) }}
<!-- <uni-datetime-picker type="date" placeholder="YYYY-MM-DD" :border='false'
:clear-icon="false" v-model="baseFormData.birth" /> -->
</uni-forms-item>
<uni-forms-item label="联系方式" name="phone">
<uni-easyinput :styles="inputstyle" :placeholderStyle="placeholderStyle"
v-model="baseFormData.phone" placeholder="请输入联系方式" />
<uni-easyinput v-model="baseFormData.phone" :placeholderStyle="placeholderStyle"
:styles="inputstyle" placeholder="请输入联系方式"/>
</uni-forms-item>
<uni-forms-item label="会员编号" name="perCode" v-if="baseFormData.perCode">
<uni-easyinput :styles="inputstyle" :placeholderStyle="placeholderStyle"
v-model="baseFormData.perCode" placeholder="请输入会员编号" />
<uni-forms-item v-if="baseFormData.perCode" label="会员编号" name="perCode">
<uni-easyinput v-model="baseFormData.perCode" :placeholderStyle="placeholderStyle"
:styles="inputstyle" placeholder="请输入会员编号"/>
</uni-forms-item>
<uni-forms-item label="会员有效期" name="validityDate" v-if="baseFormData.validityDate">
<uni-easyinput :styles="inputstyle" :placeholderStyle="placeholderStyle"
v-model="baseFormData.validityDate" placeholder="请输入会员有效期" />
<uni-forms-item v-if="baseFormData.validityDate" label="会员有效期" name="validityDate">
<uni-easyinput v-model="baseFormData.validityDate" :placeholderStyle="placeholderStyle"
:styles="inputstyle" placeholder="请输入会员有效期"/>
</uni-forms-item>
......@@ -80,47 +80,51 @@
</view>
<view class="fixed-agreeline">
<view class="agreeline">
<image @click="changeAgree(agree)" v-if="agree"
:src="config.baseUrl_api+'/fs/static/login/xz_dwn@2x.png'"></image>
<image @click="changeAgree(agree)" v-else :src="config.baseUrl_api+'/fs/static/login/xz@2x.png'">
<image v-if="agree" :src="config.baseUrl_api+'/fs/static/login/xz_dwn@2x.png'"
@click="changeAgree(agree)"></image>
<image v-else :src="config.baseUrl_api+'/fs/static/login/xz@2x.png'" @click="changeAgree(agree)">
</image>
<view>我已阅读<text @click="openpopup">《入会须知》</text></view>
<view>我已阅读
<text @click="openpopup">《入会须知》</text>
</view>
</view>
<view class="fixedBottom"><button class="btn-red" @click="goSubmit">确 定</button></view>
</view>
<view class="fixedBottom">
<button class="btn-red" @click="goSubmit">确 定</button>
</view>
<!-- 会员须知 -->
<uni-popup ref="popup" type="bottom" background-color="#fff" animation :disable-scroll="true"
:mask-click="false">
<uni-popup ref="popup" :disable-scroll="true" :mask-click="false" animation background-color="#fff"
type="bottom">
<view class="tt">入会须知</view>
<view class="popBody">
_{{baseFormData.name}}_欢迎您申请成为中国跆拳道协会（以下简称中国跆协）会员，请确保本次申请是经过您本人或监护人授权同意后的自愿行为，请您务必仔细阅读本入会须知。
<br />
_{{ baseFormData.name }}_欢迎您申请成为中国跆拳道协会（以下简称中国跆协）会员，请确保本次申请是经过您本人或监护人授权同意后的自愿行为，请您务必仔细阅读本入会须知。
<br/>
一、中国跆协会员分为个人会员和单位会员。
<br />
二、成为本协会会员条件：遵守中国跆协章程和协会各项规章制度及相关决议，按期交纳会费，积极支持和参与中国跆拳道事业发展的社会各届人士或地方跆拳道协会、俱乐部、培训机构等，均可自愿申请成为中国跆协会员。<br />
三、个人会员为在中国工作和生活的跆拳道爱好者，16 周岁以下应有监护人协助申请，会员须为中国公民。<br />
四、会员入会需向所在区域内中国跆协单位会员提出入会申请，并按程序报中国跆协批准，按规定交纳会费。<br />
<br/>
二、成为本协会会员条件：遵守中国跆协章程和协会各项规章制度及相关决议，按期交纳会费，积极支持和参与中国跆拳道事业发展的社会各届人士或地方跆拳道协会、俱乐部、培训机构等，均可自愿申请成为中国跆协会员。<br/>
三、个人会员为在中国工作和生活的跆拳道爱好者，16 周岁以下应有监护人协助申请，会员须为中国公民。<br/>
四、会员入会需向所在区域内中国跆协单位会员提出入会申请，并按程序报中国跆协批准，按规定交纳会费。<br/>
五、会员享有《中国跆拳道协会会员管理办法》规定的会员权利。
<br />
<br/>
六、会员应履行《中国跆拳道协会会员管理办法》规定的会员义务。
<br />
七、凡中国跆协会员，须按照《中国跆拳道协会会员会费标准（2021 版）》按时交纳年度会费。<br />
八、会员行为违反《中国跆拳道协会会员管理办法》中规定的，按照相关处罚规定进行处理。<br />
九、其它会员相关内容请查看《中国跆拳道协会章程》《中国跆拳道协会会员管理办法》。<br />
<br/>
七、凡中国跆协会员，须按照《中国跆拳道协会会员会费标准（2021 版）》按时交纳年度会费。<br/>
八、会员行为违反《中国跆拳道协会会员管理办法》中规定的，按照相关处罚规定进行处理。<br/>
九、其它会员相关内容请查看《中国跆拳道协会章程》《中国跆拳道协会会员管理办法》。<br/>
<button @click="closepopup" class="btn-red">我已阅读</button>
<button class="btn-red" @click="closepopup">我已阅读</button>
</view>
</uni-popup>
<uni-popup ref="infoConfirm" type="center" :disable-scroll="true" :mask-click="false">
<uni-popup ref="infoConfirm" :disable-scroll="true" :mask-click="false" type="center">
<view class="tt">确认信息</view>
<view class="popBody">
<view>
</view>
<button @click="closepopup" class="btn-red">已确认</button>
<button class="btn-red" @click="closepopup">已确认</button>
</view>
</uni-popup>
......@@ -128,44 +132,44 @@
</template>
<script setup>
import {
import {
onMounted,
ref
} from 'vue'
import * as api from '@/common/api.js'
import {
} from 'vue'
import * as api from '@/common/api.js'
import {
onLoad
} from '@dcloudio/uni-app'
import config from '@/config.js'
import {
} from '@dcloudio/uni-app'
import config from '@/config.js'
import {
wxLogin
} from '@/common/login.js';
import * as aes2 from '@/common/utils.js'
const current = ref(0)
const popup = ref(null)
const infoConfirm = ref(null)
const agree = ref(false)
const perId = ref()
const photoArr = ref({})
const regionsList = ref([])
const cardObj = ref({})
const disabledName = ref(true)
const baseFormData = ref({
} from '@/common/login.js';
import * as aes2 from '@/common/utils.js'
const current = ref(0)
const popup = ref(null)
const infoConfirm = ref(null)
const agree = ref(false)
const perId = ref()
const photoArr = ref({})
const regionsList = ref([])
const cardObj = ref({})
const disabledName = ref(true)
const baseFormData = ref({
photo: '',
sex: '',
idcType: '0',
perType: '1', // （1：个人会员；2：教练；3：考官；4：裁判；5：临时会员；）
perCode:'',
validityDate:'',
perCode: '',
validityDate: '',
// multiDeptFlag: 1,
// isBlack: '1'
})
const items = ref(['身份证添加', '证件照录入'])
const idcTypeList = ref([{
})
const items = ref(['身份证添加', '证件照录入'])
const idcTypeList = ref([{
value: '0',
text: "身份证"
},
},
{
value: '1',
text: "来往大陆(内地)通行证"
......@@ -182,20 +186,20 @@
value: '5',
text: '香港身份证'
}
])
const sexs = ref([{
])
const sexs = ref([{
text: '女',
value: '1'
}, {
}, {
text: '男',
value: '0'
}])
const placeholderStyle = ref('text-align: right;font-size:30rpx')
const inputstyle = ref({
}])
const placeholderStyle = ref('text-align: right;font-size:30rpx')
const inputstyle = ref({
borderColor: '#fff',
fontSize: '30rpx'
})
const imageStylesTx = ref({
})
const imageStylesTx = ref({
width: '210rpx',
height: '280rpx',
background: {
......@@ -204,18 +208,25 @@
border: {
radius: '2px'
}
});
});
const imageStylesZJ = ref({
const imageStylesZJ = ref({
width: '500rpx',
height: '316rpx'
});
});
onLoad(async (option) => {
if (option.name && option.idcCode) {
baseFormData.value.name = option.name
baseFormData.value.idcCode = option.idcCode
giveBirthDay()
}
onLoad(async (option) => {
if (option.tab == '1') {
current.value = 1
baseFormData.value.sourceFlag = 1
baseFormData.value.idcType = option.idcType || 0
if (baseFormData.value.idcType == '3') {
disabledName.value = false
} else {
......@@ -227,25 +238,25 @@
perId.value = option.perId
await fetchMemberInfo(option.perId)
}
})
})
onMounted(() => {
onMounted(() => {
let openId = uni.getStorageSync('openId')
if (!openId) {
wxLogin()
}
})
})
function getRegionsList() {
function getRegionsList() {
api.regionsList().then(res => {
regionsList.value = res.data
})
}
}
// 根据 perId 获取会员信息预填表单
async function fetchMemberInfo(id) {
// 根据 perId 获取会员信息预填表单
async function fetchMemberInfo(id) {
if (!id) return
uni.showLoading({ title: '加载中...' })
uni.showLoading({title: '加载中...'})
try {
const res = await api.getInfo(id)
const data = res.data || {}
......@@ -274,9 +285,9 @@
} finally {
uni.hideLoading()
}
}
}
function onClickItem(e) {
function onClickItem(e) {
if (current.value != e.currentIndex) {
current.value = e.currentIndex
}
......@@ -296,15 +307,15 @@
sourceFlag: 1
}
}
}
}
function changeAgree(item) {
function changeAgree(item) {
agree.value = !item
}
}
//身份证识别
function upIdCardImgFront(e) {
//身份证识别
function upIdCardImgFront(e) {
let file = e.tempFiles[0]
if (!file) {
return
......@@ -326,8 +337,8 @@
baseFormData.value.idcCode = res.data.code
baseFormData.value.name = res.data.name
baseFormData.value.uuid = res.data.uuid
baseFormData.value.perCode = res.data.perCode ||''
baseFormData.value.validityDate = res.data.validityDate?.slice(0,10) //去掉时分秒
baseFormData.value.perCode = res.data.perCode || ''
baseFormData.value.validityDate = res.data.validityDate?.slice(0, 10) //去掉时分秒
// baseFormData.value.cityId = res.data.cityId
// baseFormData.value.address = res.data.address
} else {
......@@ -339,9 +350,9 @@
}
})
}
}
function upPhoto(e) {
function upPhoto(e) {
const tempFilePaths = e.tempFilePaths;
const imgUrl = tempFilePaths[0]
if (!imgUrl) {
......@@ -350,7 +361,7 @@
wx.cropImage({
src: imgUrl,
cropScale: '4:5',
success: function(resp) {
success: function (resp) {
uni.showLoading({
title: '加载中'
});
......@@ -365,16 +376,16 @@
}
});
},
fail: function(err) {
fail: function (err) {
photoArr.value = {}
}
})
}
}
function delimgFont(n) {
function delimgFont(n) {
photoArr.value = {}
cardObj.value = {}
baseFormData.value = {
......@@ -383,17 +394,17 @@
perType: '1',
sourceFlag: 1
};
}
}
function delPhoto(n) {
function delPhoto(n) {
photoArr.value = {};
baseFormData.value.photo = '';
baseFormData.value.photo2 = '';
}
}
function getExtractInfo(obj) {
function getExtractInfo(obj) {
photoArr.value = {}
// baseFormData.value = {
// photo: '',
......@@ -414,8 +425,8 @@
baseFormData.value.birth = res.data.birth
baseFormData.value.name = res.data.name
baseFormData.value.phone = res.data.phone
baseFormData.value.perCode = res.data.perCode ||''
baseFormData.value.validityDate = res.data.validityDate?.slice(0,10) //去掉时分秒
baseFormData.value.perCode = res.data.perCode || ''
baseFormData.value.validityDate = res.data.validityDate?.slice(0, 10) //去掉时分秒
// baseFormData.value.cityId = res.data.cityId
// baseFormData.value.address = res.data.address
if (res.data.photo) {
......@@ -458,10 +469,10 @@
return
}
})
}
}
function giveBirthDay() {
function giveBirthDay() {
if (!baseFormData.value.idcCode) {
return
}
......@@ -495,21 +506,21 @@
// return
// }
// }
}
}
function openpopup() {
function openpopup() {
popup.value.open()
}
}
function closepopup() {
function closepopup() {
agree.value = true
popup.value.close()
}
}
function changeIdcType(e) {
function changeIdcType(e) {
// 切换证件照类型把当前页面数据清空
cardObj.value = {}
photoArr.value = {}
......@@ -519,10 +530,10 @@
perType: '1',
sourceFlag: 1
}
}
}
function goSubmit() {
function goSubmit() {
if (!agree.value) {
uni.showToast({
......@@ -570,7 +581,7 @@
//信息确认弹出
uni.showModal({
content: '请确认信息正确',
success: function(res) {
success: function (res) {
if (res.confirm) {
if (baseFormData.value.idcType == '4') {
baseFormData.value.idcType = '0'
......@@ -625,82 +636,82 @@
}
}
});
}
}
function getUserInfo() {
function getUserInfo() {
api.getInfo(perId.value).then(res => {
baseFormData.value = res.data
if (baseFormData.areaAssName) baseFormData.ancestorNameList = baseFormData.value.ancestorNameList.join(
',').replaceAll(',', '/')
})
}
}
</script>
<style lang="scss">
/* 字段名左对齐 */
.uni-forms-item .uni-forms-item__label {
/* 字段名左对齐 */
.uni-forms-item .uni-forms-item__label {
text-align: left !important;
justify-content: flex-start !important;
padding-left: 0 !important;
width: auto !important;
}
}
/* 内容右对齐 */
.uni-forms-item .uni-forms-item__content {
/* 内容右对齐 */
.uni-forms-item .uni-forms-item__content {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
text-align: right !important;
flex-wrap: nowrap !important;
}
/* 输入框内容右对齐 */
.uni-forms-item .uni-easyinput .uni-easyinput__content-input,
.uni-forms-item .uni-easyinput input,
.uni-forms-item input,
.uni-forms-item .uni-data-select .uni-select__input-box,
.uni-forms-item .uni-data-picker .uni-data-picker__input-box {
}
/* 输入框内容右对齐 */
.uni-forms-item .uni-easyinput .uni-easyinput__content-input,
.uni-forms-item .uni-easyinput input,
.uni-forms-item input,
.uni-forms-item .uni-data-select .uni-select__input-box,
.uni-forms-item .uni-data-picker .uni-data-picker__input-box {
text-align: right !important;
}
}
/* 文本内容右对齐 */
.uni-forms-item .uni-forms-item__content text,
.uni-forms-item .uni-forms-item__content>text {
/* 文本内容右对齐 */
.uni-forms-item .uni-forms-item__content text,
.uni-forms-item .uni-forms-item__content > text {
display: inline-block !important;
white-space: nowrap !important;
}
}
</style>
<style lang="scss" scoped>
:deep(.uni-popup__mask) {
:deep(.uni-popup__mask) {
overflow: hidden !important;
position: fixed !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
:deep(.uni-popup) {
:deep(.uni-popup) {
overflow: hidden !important;
}
}
:deep(.segmented-control) {
:deep(.segmented-control) {
height: 100rpx;
}
}
:deep(.segmented-control__text) {
:deep(.segmented-control__text) {
line-height: 2;
font-size: 30rpx;
}
}
.tt {
.tt {
text-align: center;
font-size: 30rpx;
padding: 40rpx 0 0;
}
}
.popBody {
.popBody {
font-size: 28rpx;
line-height: 1.5;
height: 70vh;
......@@ -713,21 +724,21 @@
.btn-red {
margin: 50rpx 0 30rpx;
}
}
}
.hasfixedbottom {
.hasfixedbottom {
padding-bottom: 200rpx;
}
}
.fixed-agreeline {
.fixed-agreeline {
position: fixed;
bottom: 150rpx;
left: 0;
right: 0;
z-index: 1;
}
}
.agreeline {
.agreeline {
padding: 20rpx 40rpx;
box-sizing: border-box;
display: flex;
......@@ -742,9 +753,9 @@
height: 40rpx;
margin-right: 20rpx;
}
}
}
.upCard {
.upCard {
position: relative;
width: 500rpx;
height: 316rpx;
......@@ -761,24 +772,24 @@
left: 0;
height: 293rpx;
}
}
}
.op0 {
.op0 {
opacity: 0;
}
}
:deep(.item-text-overflow) {
:deep(.item-text-overflow) {
text-align: left;
}
}
:deep(.fixUniFormItemStyle .uni-data-picker__input-box) {
:deep(.fixUniFormItemStyle .uni-data-picker__input-box) {
justify-content: flex-start !important;
text-align: left !important;
}
}
/* 让地区选择器的文本左对齐 */
:deep(.fixUniFormItemStyle .uni-data-picker__text) {
/* 让地区选择器的文本左对齐 */
:deep(.fixUniFormItemStyle .uni-data-picker__text) {
text-align: left !important;
}
}
</style>
......
personal/home.vue
......@@ -2,46 +2,63 @@
<view class="page-container">
<!-- 会员卡区域 -->
<view class="member-card">
<image class="card-bg" :src="config.baseUrl_api + '/fs/static/user_01@2x.png'" mode="aspectFill">
<image :src="config.baseUrl_api + '/fs/static/user_01@2x.png'" class="card-bg" mode="aspectFill">
</image>
<!-- 绑定/解绑学员 -->
<!-- &lt;!&ndash; 绑定/解绑学员 &ndash;&gt;-->
<!-- <view class="bind-student" @click="handleBindAction">-->
<!-- <text>{{ isBound ? '切换学员' : '绑定学员' }}</text>-->
<!-- <image :src="config.baseUrl_api + '/fs/static/bd@2x.png'" class="bind-icon" mode="aspectFit"></image>-->
<!-- </view>-->
<!-- 用户信息 -->
<view class="user-section">
<view class="member-title">
<view class="member-id">{{ userInfo?.userName }}</view>
<view class="bind-student" @click="handleBindAction">
<text>{{ isBound ? '切换学员' : '绑定学员' }}</text>
<image :src="config.baseUrl_api + '/fs/static/bd@2x.png'" class="bind-icon" mode="aspectFit"></image>
</view>
</view>
<!-- 用户信息 -->
<view class="user-section">
<view class="user-top">
<view class="avatar-wrap" @click="showLogoutConfirm">
<!-- <image class="avatar" v-if="perInfo.photo" :src="config.baseUrl_api + perInfo.photo"
mode="aspectFill">
</image> -->
<image class="avatar" :src="config.baseUrl_api + '/fs/static/tx@2x.png'"
<image :src="config.baseUrl_api + '/fs/static/tx@2x.png'" class="avatar"
mode="aspectFill">
</image>
</view>
<view class="member-id">{{ userInfo?.userName }}</view>
<!-- <view class="member-id">{{ userInfo?.userName }}</view>-->
<view class="user-name">{{ perInfo?.perName }}</view>
</view>
<view class="user-bottom">
<view class="user-name">{{ perInfo?.perName }}</view>
<!-- <view class="user-name">{{ perInfo?.perName }}</view>-->
<view class="card-info">
<view class="info-row">会员卡号：{{ perInfo?.perCode }}</view>
<view class="info-row">会员有效期：{{ perInfo?.perValidDate }}</view>
<view class="info-row">
<text>会员卡号</text>
<text>{{ perInfo?.perCode }}</text>
</view>
<view class="info-row">
<text>会员有效期</text>
<text>{{ perInfo?.perValidDate }}</text>
</view>
</view>
</view>
</view>
<!-- 已过期印章 -->
<image v-if="perInfo?.perValidDateFlag == 0" class="expired-stamp"
:src="config.baseUrl_api + '/fs/static/end@2x.png'" mode="aspectFit">
<image v-if="perInfo?.perValidDateFlag == 0" :src="config.baseUrl_api + '/fs/static/end@2x.png'"
class="expired-stamp" mode="aspectFit">
</image>
<!-- 卡片右下角按钮 -->
<view class="card-btns">
<view class="card-btn" @click="goToPay">
<text>缴费</text>
<text>认证缴费</text>
</view>
<view class="card-btn" @click="downCert">
<text>电子会员证</text>
......@@ -83,7 +100,7 @@
<image :src="config.baseUrl_api + '/fs/static/user_icon01@2x.png'" class="query-item-icon"></image>
<text class="query-item-text">我的订单</text>
</view>
<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
<uni-icons color="#999" size="20" type="arrowright"></uni-icons>
</view>
<!-- <view class="query-item" @click="goToWebView(1)">
<view class="query-item-left">
......@@ -132,61 +149,66 @@
<image :src="config.baseUrl_api + '/fs/static/user_icon02@2x.png'" class="query-item-icon"></image>
<text class="query-item-text">我的段位</text>
</view>
<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
<uni-icons color="#999" size="20" type="arrowright"></uni-icons>
</view>
<view class="query-item" @click="goToWebView(8)">
<view class="query-item-left">
<image :src="config.baseUrl_api + '/fs/static/user_icon03@2x.png'" class="query-item-icon"></image>
<text class="query-item-text">级位考官</text>
</view>
<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
<uni-icons color="#999" size="20" type="arrowright"></uni-icons>
</view>
<view class="query-item" @click="goToWebView(9)">
<view class="query-item-left">
<image :src="config.baseUrl_api + '/fs/static/user_icon03@2x.png'" class="query-item-icon"></image>
<text class="query-item-text">段位考官</text>
</view>
<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
<uni-icons color="#999" size="20" type="arrowright"></uni-icons>
</view>
<view class="query-item" @click="goToWebView(10)">
<view class="query-item-left">
<image :src="config.baseUrl_api + '/fs/static/user_icon03@2x.png'" class="query-item-icon"></image>
<text class="query-item-text">大众教练员</text>
</view>
<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
<uni-icons color="#999" size="20" type="arrowright"></uni-icons>
</view>
<view class="query-item" @click="goToWebView(11)">
<view class="query-item-left">
<image :src="config.baseUrl_api + '/fs/static/user_icon03@2x.png'" class="query-item-icon"></image>
<text class="query-item-text">大众裁判员</text>
</view>
<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
<uni-icons color="#999" size="20" type="arrowright"></uni-icons>
</view>
<view class="query-item" @click="goToWebView(12)">
<view class="query-item-left">
<image :src="config.baseUrl_api + '/fs/static/user_icon03@2x.png'" class="query-item-icon"></image>
<text class="query-item-text">培训讲师</text>
</view>
<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
<uni-icons color="#999" size="20" type="arrowright"></uni-icons>
</view>
</view>
<!-- 退出-->
<view class="logOut">
<view class="logOutBtn" @click="showLogoutConfirm">退出登录</view>
</view>
<!-- 绑定学员弹框 -->
<uni-popup ref="bindPopup" type="center" :mask-click="false">
<uni-popup ref="bindPopup" :mask-click="false" type="center">
<view class="bind-popup">
<view class="popup-title">绑定学员</view>
<view class="popup-content">
<view class="form-item">
<view class="form-label">姓名</view>
<view class="form-input">
<input v-model="bindForm.name" placeholder="请输入姓名" placeholder-class="placeholder-class" />
<input v-model="bindForm.name" placeholder="请输入姓名" placeholder-class="placeholder-class"/>
</view>
</view>
<view class="form-item">
<view class="form-label">证件号</view>
<view class="form-input">
<input v-model="bindForm.idcCode" placeholder="请输入证件号"
placeholder-class="placeholder-class" />
placeholder-class="placeholder-class"/>
</view>
</view>
</view>
......@@ -214,59 +236,57 @@
</template>
<script setup>
import {
import {
computed,
onMounted,
ref,
watch,
nextTick
} from "vue";
import config from "/config.js";
import {
} from "vue";
import config from "/config.js";
import {
wxLogin,
logout,
getWebInfo
} from '@/common/login.js';
import {
useUserStore
} from "../store/modules/user";
import to from 'await-to-js'
import {
} from '@/common/login.js';
import {useUserStore} from "@/store/modules/user.js";
import to from 'await-to-js'
import {
bindUser,
unbindUser,
downStuCertSingle
} from '@/common/api.js'
} from '@/common/api.js'
const userStore = useUserStore()
const userInfo = computed(() => userStore.user)
const perInfo = computed(() => userStore.perInfo)
console.log(222,userInfo.value)
console.log(333,perInfo.value)
const userStore = useUserStore()
const userInfo = computed(() => userStore.user ?? {})
const perInfo = computed(() => userStore.perInfo ?? {})
console.log(222, userInfo.value)
console.log(333, perInfo.value)
// 是否已绑定学员（根据会员卡号判断）
const isBound = computed(() => {
// 是否已绑定学员（根据会员卡号判断）
const isBound = computed(() => {
const perCode = perInfo.value?.perCode
return perCode !== undefined && perCode !== null && perCode !== ''
})
})
const bindPopup = ref(null)
const bindPopup = ref(null)
const bindForm = ref({
name: '',
idcCode: ''
})
const showConfirm = ref(false)
onMounted(() => {
onMounted(() => {
let webUserName = uni.getStorageSync('webUserName')
if (!webUserName) {
wxLogin().then(getWebInfo)
}
})
})
// 标记是否已经弹出过绑定框（避免重复弹出）
let hasOpenedBindPopup = false
// 标记是否已经弹出过绑定框（避免重复弹出）
let hasOpenedBindPopup = false
watch(() => perInfo.value, (newVal, oldVal) => {
watch(() => perInfo.value, (newVal, oldVal) => {
console.log(444, newVal?.perCode)
// 只有当 perInfo 数据存在且 perCode 为空时才弹出
......@@ -276,12 +296,12 @@ const showConfirm = ref(false)
openBindPopup()
})
}
}, {
}, {
immediate: true
})
})
// 打开绑定弹框
const openBindPopup = () => {
// 打开绑定弹框
const openBindPopup = () => {
if (bindPopup.value) {
bindForm.value = {
name: '',
......@@ -293,34 +313,35 @@ const showConfirm = ref(false)
openBindPopup()
})
}
}
}
// 关闭绑定弹框
const closeBindPopup = () => {
// 关闭绑定弹框
const closeBindPopup = () => {
bindPopup.value?.close()
}
// 处理绑定/切换操作
const handleBindAction = async () => {
if (isBound.value) {
// 已绑定，先解绑再打开绑定弹框
uni.showLoading({
title: '解绑中...',
mask: true
})
const [err] = await to(unbindUser())
uni.hideLoading()
if (err) return
getWebInfo()
openBindPopup()
} else {
// 未绑定，打开绑定弹框
}
// 处理绑定/切换操作
const handleBindAction = async () => {
// if (isBound.value) {
// // 已绑定，先解绑再打开绑定弹框
// uni.showLoading({
// title: '解绑中...',
// mask: true
// })
// const [err] = await to(unbindUser())
// uni.hideLoading()
// if (err) return
// getWebInfo()
// openBindPopup()
// } else {
// // 未绑定，打开绑定弹框
// openBindPopup()
// }
openBindPopup()
}
}
}
// 确认绑定
const confirmBind = async () => {
// 确认绑定
const confirmBind = async () => {
if (!bindForm.value.name) {
uni.showToast({
title: '请输入姓名',
......@@ -336,6 +357,18 @@ const showConfirm = ref(false)
return
}
if (isBound.value) {
// 已绑定，先解绑再打开绑定弹框
uni.showLoading({
title: '解绑中...',
mask: true
})
const [err] = await to(unbindUser())
uni.hideLoading()
if (err) return
await getWebInfo()
}
uni.showLoading({
title: '绑定中...',
mask: true
......@@ -348,19 +381,22 @@ const showConfirm = ref(false)
uni.hideLoading()
if (err) {
uni.showToast({
title: err?.data?.msg || err?.message || '绑定失败，请稍后重试',
icon: 'none',
duration: 3000
})
return
}else{
console.log(err)
// uni.showToast({
// title: err?.data?.msg || err?.message || '绑定失败，请稍后重试',
// icon: 'none',
// duration: 3000
// })
// return
handelGo()
closeBindPopup()
} else {
uni.showToast({
title: '绑定成功',
icon: 'success'
})
closeBindPopup()
getWebInfo()
await getWebInfo()
}
// uni.showToast({
......@@ -368,86 +404,105 @@ const showConfirm = ref(false)
// icon: 'success'
// })
}
const handelGo = () => {
uni.showModal({
title: "提示",
content: "当前账号非中国跆拳道协会有效会员。请先完成认证缴费，即可正常登录使用。",
success: function (res) {
if (res.confirm) {
// closeBindPopup()
uni.navigateTo({
url: `/personal/addVip_per?name=${bindForm.value.name}&idcCode=${bindForm.value.idcCode}`
});
} else if (res.cancel) {
// closeBindPopup()
}
// 返回上一页
const goBack = () => {
},
})
}
// 返回上一页
const goBack = () => {
uni.navigateBack()
}
}
const goToAuth = () => {
const goToAuth = () => {
if (!isBound.value) {
uni.showToast({ title: '请先绑定学员', icon: 'none' })
uni.showToast({title: '请先绑定学员', icon: 'none'})
return
}
uni.navigateTo({
url: '/personal/personInfo'
});
};
};
const goToScore = () => {
const goToScore = () => {
if (!isBound.value) {
uni.showToast({ title: '请先绑定学员', icon: 'none' })
uni.showToast({title: '请先绑定学员', icon: 'none'})
return
}
uni.navigateTo({
url: '/personal/memberInfo'
});
};
};
const goToWebView = (type) => {
const goToWebView = (type) => {
// const url = "https://member.taekwondo.org.cn/#/authAccurate?type=" + type
const url = "https://tk001.wxjylt.com/pc.html#/authAccurate?type=" + type
uni.navigateTo({
url: "/pages/webview/webview?url=" + encodeURIComponent(url)
});
};
};
// 导航到级位记录
const goToRecord = (type) => {
const goToRecord = (type) => {
if (!isBound.value) {
uni.showToast({ title: '请先绑定学员', icon: 'none' })
uni.showToast({title: '请先绑定学员', icon: 'none'})
return
}
uni.navigateTo({
url: '/personal/levelRecord?type=' + type
});
};
};
// 导航到我的订单
const goToOrder = () => {
// 导航到我的订单
const goToOrder = () => {
if (!isBound.value) {
uni.showToast({ title: '请先绑定学员', icon: 'none' })
uni.showToast({title: '请先绑定学员', icon: 'none'})
return
}
uni.navigateTo({
url: '/personal/order'
});
};
};
// 导航到缴费
const goToPay = () => {
const perId = userInfo.value?.perId
// 导航到缴费
const goToPay = () => {
const perId = userInfo.value.perId ?? ''
uni.navigateTo({
url: `/personal/addVip_per?perId=${perId}`
});
};
};
// 下载电子会员证
const downCert = async () => {
// 下载电子会员证
const downCert = async () => {
if (!isBound.value) {
uni.showToast({ title: '请先绑定学员', icon: 'none' })
uni.showToast({title: '请先绑定学员', icon: 'none'})
return
}
const perId = userInfo.value?.perId
if (!perId) return
uni.showLoading({ title: '加载中...', mask: true })
uni.showLoading({title: '加载中...', mask: true})
const [err, res] = await to(downStuCertSingle(perId))
uni.hideLoading()
if (err) {
uni.showToast({ title: err?.data?.msg || '获取会员证失败', icon: 'none' })
uni.showToast({title: err?.data?.msg || '获取会员证失败', icon: 'none'})
return
}
const pdfUrl = res?.data
......@@ -456,22 +511,21 @@ const showConfirm = ref(false)
url: `/personal/certPreview?url=${encodeURIComponent(pdfUrl)}`
})
}
};
};
// 显示退出登录确认框
const showLogoutConfirm = () => {
// 显示退出登录确认框
const showLogoutConfirm = () => {
showConfirm.value = true;
};
};
// 取消退出登录
const cancelLogout = () => {
// 取消退出登录
const cancelLogout = () => {
showConfirm.value = false;
};
};
// 确认退出登录
const confirmLogout = () => {
// 确认退出登录
const confirmLogout = () => {
// 调用退出登录接口
logout().then(() => {
// 跳转到登录页
......@@ -479,17 +533,17 @@ const showConfirm = ref(false)
url: '/login/login'
})
});
};
};
</script>
<style lang="scss" scoped>
.page-container {
.page-container {
min-height: 100vh;
background: #f5f5f5;
}
}
/* 导航栏 */
.nav-bar {
/* 导航栏 */
.nav-bar {
display: flex;
align-items: center;
justify-content: space-between;
......@@ -500,176 +554,196 @@ const showConfirm = ref(false)
position: sticky;
top: 0;
z-index: 100;
}
}
.nav-left {
.nav-left {
width: 44rpx;
height: 44rpx;
display: flex;
align-items: center;
justify-content: center;
}
}
.nav-title {
.nav-title {
font-size: 32rpx;
font-weight: 500;
color: #333;
}
}
.nav-right {
.nav-right {
width: 44rpx;
}
}
/* 会员卡 */
.member-card {
/* 会员卡 */
.member-card {
position: relative;
height: 450rpx;
border-radius: 0;
overflow: hidden;
}
.member-title {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #eff2f8;
padding-bottom: 20rpx;
margin-bottom: 20rpx;
.member-id {
font-size: 30rpx;
}
}
.card-bg {
.card-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
}
.bind-student {
position: absolute;
top: 30rpx;
right: 30rpx;
.bind-student {
//position: absolute;
//top: 30rpx;
//right: 30rpx;
display: flex;
align-items: center;
gap: 8rpx;
//gap: 8rpx;
z-index: 10;
padding: 10rpx 16rpx;
// background: rgba(255, 255, 255, 0.5);
padding: 5rpx 16rpx;
border-radius: 30rpx;
}
//border: 1px solid #fff;
background: #dbbf79;
}
.bind-student text {
.bind-student text {
font-size: 26rpx;
color: #5c4b37;
}
}
.bind-icon {
.bind-icon {
width: 45rpx;
height: 45rpx;
}
}
.user-section {
.user-section {
position: relative;
z-index: 1;
padding: 50rpx 30rpx 0;
}
padding: 30rpx 30rpx 0;
}
.user-top {
.user-top {
display: flex;
align-items: center;
gap: 20rpx;
margin-bottom: 20rpx;
}
margin-bottom: 10rpx;
}
.avatar-wrap {
.avatar-wrap {
flex-shrink: 0;
}
}
.avatar {
.avatar {
width: 110rpx;
height: 110rpx;
border-radius: 50%;
border: 3rpx solid rgba(255, 255, 255, 0.6);
}
}
.member-id {
.member-id {
font-size: 26rpx;
color: #503000;
}
}
.user-bottom {
padding-left: 0;
}
.user-bottom {
//padding-left: 0;
padding: 0 30rpx;
}
.user-name {
font-size: 44rpx;
.user-name {
font-size: 50rpx;
font-weight: bold;
color: #5c4b37;
margin-bottom: 16rpx;
}
margin-left: 16rpx;
}
.card-info {
.card-info {
display: flex;
flex-direction: column;
gap: 10rpx;
}
}
.info-row {
font-size: 28rpx;
.info-row {
font-size: 30rpx;
color: #503000;
}
display: flex;
justify-content: space-between;
}
/* 已过期印章 */
.expired-stamp {
/* 已过期印章 */
.expired-stamp {
position: absolute;
right: 30rpx;
bottom: 150rpx;
width: 150rpx;
height: 150rpx;
z-index: 1;
}
}
/* 卡片右下角按钮 */
.card-btns {
/* 卡片右下角按钮 */
.card-btns {
position: absolute;
right: 30rpx;
bottom: 80rpx;
left: 50rpx;
bottom: 37rpx;
z-index: 10;
display: flex;
gap: 16rpx;
}
}
.card-btn {
.card-btn {
background: rgba(255, 255, 255, 0.9);
border-radius: 30rpx;
padding: 0rpx 20rpx;
padding-bottom: 5rpx;
}
padding: 0 30rpx 5rpx 30rpx;
border: 1px solid #e0c36c;
}
.card-btn text {
.card-btn text {
height: 24rpx;
line-height: 24rpx;
font-size: 24rpx;
color: #C40F18;
}
color: #c7990f;
}
/* 功能按钮卡片 */
.func-card {
margin: -70rpx 30rpx 30rpx;
/* 功能按钮卡片 */
.func-card {
margin: -23rpx 30rpx 30rpx;
background: #ffffff;
border-radius: 20rpx;
padding: 36rpx 0;
box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);
position: relative;
z-index: 2;
}
}
.func-list {
.func-list {
display: flex;
justify-content: space-around;
padding: 0 20rpx;
}
}
.func-item {
.func-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 12rpx;
}
}
.func-icon {
.func-icon {
width: 72rpx;
height: 72rpx;
display: flex;
......@@ -677,133 +751,133 @@ const showConfirm = ref(false)
justify-content: center;
// background: #f0f7ff;
// border-radius: 16rpx;
image{
image {
width: 72rpx;
height: 72rpx;
}
}
}
.func-text {
.func-text {
font-size: 24rpx;
color: #333;
}
}
/* 查询功能区域 */
.query-section {
/* 查询功能区域 */
.query-section {
margin: 0 30rpx;
background: #ffffff;
border-radius: 20rpx;
box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);
overflow: hidden;
}
}
.query-item {
.query-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 32rpx 30rpx;
border-bottom: 1rpx solid #f5f5f5;
}
}
.query-item:last-child {
.query-item:last-child {
border-bottom: none;
}
}
.query-item-left {
.query-item-left {
display: flex;
align-items: center;
gap: 16rpx;
}
}
.query-item-icon {
.query-item-icon {
width: 44rpx;
height: 48rpx;
}
}
.query-item-text {
.query-item-text {
font-size: 28rpx;
color: #333;
}
}
/* 绑定学员弹框 */
.bind-popup {
/* 绑定学员弹框 */
.bind-popup {
width: 600rpx;
background: #ffffff;
border-radius: 24rpx;
overflow: hidden;
}
}
.popup-title {
.popup-title {
font-size: 32rpx;
font-weight: 500;
color: #333;
text-align: center;
padding: 40rpx 30rpx 20rpx;
}
}
.popup-content {
.popup-content {
padding: 20rpx 30rpx 40rpx;
}
}
.form-item {
.form-item {
display: flex;
align-items: center;
margin-bottom: 24rpx;
}
}
.form-item:last-child {
.form-item:last-child {
margin-bottom: 0;
}
}
.form-label {
.form-label {
width: 120rpx;
font-size: 28rpx;
color: #333;
flex-shrink: 0;
}
}
.form-input {
.form-input {
flex: 1;
background: #f5f5f5;
border-radius: 12rpx;
padding: 20rpx 24rpx;
}
}
.form-input input {
.form-input input {
font-size: 28rpx;
color: #333;
width: 100%;
}
}
.placeholder-class {
.placeholder-class {
color: #999;
}
}
.popup-btns {
.popup-btns {
display: flex;
border-top: 1rpx solid #eee;
}
}
.popup-btn {
.popup-btn {
flex: 1;
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 30rpx;
}
}
.popup-btn.cancel {
.popup-btn.cancel {
color: #666;
border-right: 1rpx solid #eee;
}
}
.popup-btn.confirm {
.popup-btn.confirm {
color: #C40F18;
font-weight: 500;
}
}
/* 退出登录确认框 */
.confirm-mask {
/* 退出登录确认框 */
.confirm-mask {
position: fixed;
top: 0;
left: 0;
......@@ -814,54 +888,78 @@ const showConfirm = ref(false)
align-items: center;
justify-content: center;
z-index: 1000;
}
}
.confirm-box {
.confirm-box {
width: 600rpx;
background: #ffffff;
border-radius: 20rpx;
overflow: hidden;
}
}
.confirm-content {
.confirm-content {
padding: 40rpx;
text-align: center;
}
}
.confirm-title {
.confirm-title {
font-size: 32rpx;
font-weight: 500;
color: #333;
margin-bottom: 20rpx;
}
}
.confirm-text {
.confirm-text {
font-size: 28rpx;
color: #666;
margin-top: 30rpx;
color: #C40F18;
}
color: #dbbb69;
.confirm-buttons {
}
.confirm-buttons {
display: flex;
border-top: 1rpx solid #eee;
}
}
.confirm-btn {
.confirm-btn {
flex: 1;
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 30rpx;
}
}
.confirm-btn.cancel {
.confirm-btn.cancel {
color: #666;
border-right: 1rpx solid #eee;
}
}
.confirm-btn.confirm {
.confirm-btn.confirm {
color: #C40F18;
font-weight: 500;
color: #dbbb69;
}
.logOut {
display: flex;
justify-content: center;
margin-top: 16px;
padding-bottom: 20rpx;
.logOutBtn {
background-image: linear-gradient(135deg, #dbbb69 10%, #f0deb0 100%);;
backdrop-filter: blur(4px);
width: 80%;
border: 1px solid #dadada;
padding: 20rpx 50rpx;
border-radius: 50rpx;
font-weight: 600;
font-size: 30rpx;
color: #fff;
text-align: center;
cursor: pointer;
}
}
</style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!