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 1737 additions and 1628 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>
<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>
<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>
<uni-forms-item label="证件照" required v-show="current === 1">
<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'">
</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>
<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>
<uni-forms-item label="证件号码" required name="idcCode" v-show="current === 1">
<text>{{baseFormData.idcCode}}</text>
</uni-forms-item>
<uni-forms-item label="性别" required name="sex">
<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-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-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>
<uni-forms-item label="会员有效期" name="validityDate" v-if="baseFormData.validityDate">
<uni-easyinput :styles="inputstyle" :placeholderStyle="placeholderStyle"
v-model="baseFormData.validityDate" placeholder="请输入会员有效期" />
</uni-forms-item>
<!-- <uni-forms-item label="所在地区">
<uni-data-picker class="fixUniFormItemStyle" v-model="baseFormData.cityId"
:localdata="regionsList" popup-title="请选择所在地区"></uni-data-picker>
</uni-forms-item>
<uni-forms-item label="详细地址"><uni-easyinput :styles="inputstyle"
:placeholderStyle="placeholderStyle" v-model="baseFormData.address"
placeholder="请输入详细地址" /></uni-forms-item>
<uni-forms-item label="头像" required>
<uni-file-picker v-model="photoArr" @delete="delPhoto" return-type="object" limit="1"
@select="upPhoto" :del-ico="false" :image-styles="imageStylesTx"></uni-file-picker>
<image mode="aspectFill" v-if="baseFormData.photo2" style="height:200rpx;width:200rpx;" :src="config.baseUrl_api + baseFormData.photo2"/>
</uni-forms-item> -->
</view>
</uni-forms>
</view>
</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>
<view>我已阅读<text @click="openpopup">《入会须知》</text></view>
</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">
<view class="tt">入会须知</view>
<view class="popBody">
_{{baseFormData.name}}_欢迎您申请成为中国跆拳道协会（以下简称中国跆协）会员，请确保本次申请是经过您本人或监护人授权同意后的自愿行为，请您务必仔细阅读本入会须知。
<br />
一、中国跆协会员分为个人会员和单位会员。
<br />
二、成为本协会会员条件：遵守中国跆协章程和协会各项规章制度及相关决议，按期交纳会费，积极支持和参与中国跆拳道事业发展的社会各届人士或地方跆拳道协会、俱乐部、培训机构等，均可自愿申请成为中国跆协会员。<br />
三、个人会员为在中国工作和生活的跆拳道爱好者，16 周岁以下应有监护人协助申请，会员须为中国公民。<br />
四、会员入会需向所在区域内中国跆协单位会员提出入会申请，并按程序报中国跆协批准，按规定交纳会费。<br />
五、会员享有《中国跆拳道协会会员管理办法》规定的会员权利。
<br />
六、会员应履行《中国跆拳道协会会员管理办法》规定的会员义务。
<br />
七、凡中国跆协会员，须按照《中国跆拳道协会会员会费标准（2021 版）》按时交纳年度会费。<br />
八、会员行为违反《中国跆拳道协会会员管理办法》中规定的，按照相关处罚规定进行处理。<br />
九、其它会员相关内容请查看《中国跆拳道协会章程》《中国跆拳道协会会员管理办法》。<br />
<button @click="closepopup" class="btn-red">我已阅读</button>
</view>
</uni-popup>
<uni-popup ref="infoConfirm" type="center" :disable-scroll="true" :mask-click="false">
<view class="tt">确认信息</view>
<view class="popBody">
<view>
</view>
<button @click="closepopup" class="btn-red">已确认</button>
</view>
</uni-popup>
</view>
<view>
<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 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="证件类型" 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 v-show="current === 1" label="证件照" required>
<view class="upCard">
<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 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 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 v-show="current === 1" label="证件号码" name="idcCode" required>
<text>{{ baseFormData.idcCode }}</text>
</uni-forms-item>
<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="出生日期" 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 v-model="baseFormData.phone" :placeholderStyle="placeholderStyle"
:styles="inputstyle" placeholder="请输入联系方式"/>
</uni-forms-item>
<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 v-if="baseFormData.validityDate" label="会员有效期" name="validityDate">
<uni-easyinput v-model="baseFormData.validityDate" :placeholderStyle="placeholderStyle"
:styles="inputstyle" placeholder="请输入会员有效期"/>
</uni-forms-item>
<!-- <uni-forms-item label="所在地区">
<uni-data-picker class="fixUniFormItemStyle" v-model="baseFormData.cityId"
:localdata="regionsList" popup-title="请选择所在地区"></uni-data-picker>
</uni-forms-item>
<uni-forms-item label="详细地址"><uni-easyinput :styles="inputstyle"
:placeholderStyle="placeholderStyle" v-model="baseFormData.address"
placeholder="请输入详细地址" /></uni-forms-item>
<uni-forms-item label="头像" required>
<uni-file-picker v-model="photoArr" @delete="delPhoto" return-type="object" limit="1"
@select="upPhoto" :del-ico="false" :image-styles="imageStylesTx"></uni-file-picker>
<image mode="aspectFill" v-if="baseFormData.photo2" style="height:200rpx;width:200rpx;" :src="config.baseUrl_api + baseFormData.photo2"/>
</uni-forms-item> -->
</view>
</uni-forms>
</view>
</view>
<view class="fixed-agreeline">
<view class="agreeline">
<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>
</view>
<view class="fixedBottom">
<button class="btn-red" @click="goSubmit">确 定</button>
</view>
<!-- 会员须知 -->
<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/>
一、中国跆协会员分为个人会员和单位会员。
<br/>
二、成为本协会会员条件：遵守中国跆协章程和协会各项规章制度及相关决议，按期交纳会费，积极支持和参与中国跆拳道事业发展的社会各届人士或地方跆拳道协会、俱乐部、培训机构等，均可自愿申请成为中国跆协会员。<br/>
三、个人会员为在中国工作和生活的跆拳道爱好者，16 周岁以下应有监护人协助申请，会员须为中国公民。<br/>
四、会员入会需向所在区域内中国跆协单位会员提出入会申请，并按程序报中国跆协批准，按规定交纳会费。<br/>
五、会员享有《中国跆拳道协会会员管理办法》规定的会员权利。
<br/>
六、会员应履行《中国跆拳道协会会员管理办法》规定的会员义务。
<br/>
七、凡中国跆协会员，须按照《中国跆拳道协会会员会费标准（2021 版）》按时交纳年度会费。<br/>
八、会员行为违反《中国跆拳道协会会员管理办法》中规定的，按照相关处罚规定进行处理。<br/>
九、其它会员相关内容请查看《中国跆拳道协会章程》《中国跆拳道协会会员管理办法》。<br/>
<button class="btn-red" @click="closepopup">我已阅读</button>
</view>
</uni-popup>
<uni-popup ref="infoConfirm" :disable-scroll="true" :mask-click="false" type="center">
<view class="tt">确认信息</view>
<view class="popBody">
<view>
</view>
<button class="btn-red" @click="closepopup">已确认</button>
</view>
</uni-popup>
</view>
</template>
<script setup>
import {
onMounted,
ref
} from 'vue'
import * as api from '@/common/api.js'
import {
onLoad
} 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({
photo: '',
sex: '',
idcType: '0',
perType: '1', // （1：个人会员；2：教练；3：考官；4：裁判；5：临时会员；）
perCode:'',
validityDate:'',
// multiDeptFlag: 1,
// isBlack: '1'
})
const items = ref(['身份证添加', '证件照录入'])
const idcTypeList = ref([{
value: '0',
text: "身份证"
},
{
value: '1',
text: "来往大陆(内地)通行证"
},
// {
// value: '3',
// text: "护照"
// },
{
value: '4',
text: '户口本'
},
{
value: '5',
text: '香港身份证'
}
])
const sexs = ref([{
text: '女',
value: '1'
}, {
text: '男',
value: '0'
}])
const placeholderStyle = ref('text-align: right;font-size:30rpx')
const inputstyle = ref({
borderColor: '#fff',
fontSize: '30rpx'
})
const imageStylesTx = ref({
width: '210rpx',
height: '280rpx',
background: {
color: '#F4F6FA'
},
border: {
radius: '2px'
}
});
const imageStylesZJ = ref({
width: '500rpx',
height: '316rpx'
});
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 {
disabledName.value = true
}
}
// 如果传入了 perId，预填会员信息
if (option.perId) {
perId.value = option.perId
await fetchMemberInfo(option.perId)
}
})
onMounted(() => {
let openId = uni.getStorageSync('openId')
if (!openId) {
wxLogin()
}
})
function getRegionsList() {
api.regionsList().then(res => {
regionsList.value = res.data
})
}
// 根据 perId 获取会员信息预填表单
async function fetchMemberInfo(id) {
if (!id) return
uni.showLoading({ title: '加载中...' })
try {
const res = await api.getInfo(id)
const data = res.data || {}
baseFormData.value.name = data.name || ''
baseFormData.value.idcCode = data.idcCode || ''
baseFormData.value.idcType = data.idcType || '0'
baseFormData.value.sex = data.sex || ''
baseFormData.value.birth = data.birth || ''
baseFormData.value.phone = data.phone || ''
baseFormData.value.perCode = data.perCode || ''
baseFormData.value.validityDate = data.validityDate ? data.validityDate.slice(0, 10) : ''
// 照片处理
if (data.photo2) {
const photoUrl = data.photo2.indexOf('http') === -1 ? config.baseUrl_api + data.photo2 : data.photo2
photoArr.value = {
url: photoUrl,
name: '头像',
extname: 'jpg'
}
baseFormData.value.photo = data.photo
baseFormData.value.photo2 = data.photo2
}
disabledName.value = true
} catch (e) {
console.error('获取会员信息失败', e)
} finally {
uni.hideLoading()
}
}
function onClickItem(e) {
if (current.value != e.currentIndex) {
current.value = e.currentIndex
}
cardObj.value = {}
photoArr.value = {}
if (current.value == 0) {
baseFormData.value = {
photo: '',
idcType: '0',
perType: '1'
}
} else {
baseFormData.value = {
photo: '',
idcType: '0',
perType: '1',
sourceFlag: 1
}
}
}
function changeAgree(item) {
agree.value = !item
}
//身份证识别
function upIdCardImgFront(e) {
let file = e.tempFiles[0]
if (!file) {
return
}
uni.showLoading({
title: '加载中'
});
baseFormData.value.card = e.tempFiles;
// console.log(e)
// const formData = new FormData()
// formData.append('pic', e.tempFiles[0].file)
api.carUrl(e.tempFilePaths[0], baseFormData.value.idcType).then(res => {
uni.hideLoading()
if (res.data) {
baseFormData.value.sex = res.data.sex
baseFormData.value.birth = res.data.birth
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.cityId = res.data.cityId
// baseFormData.value.address = res.data.address
} else {
uni.showToast({
title: res.msg,
duration: 2000,
icon: 'none'
})
}
})
}
function upPhoto(e) {
const tempFilePaths = e.tempFilePaths;
const imgUrl = tempFilePaths[0]
if (!imgUrl) {
return
}
wx.cropImage({
src: imgUrl,
cropScale: '4:5',
success: function(resp) {
uni.showLoading({
title: '加载中'
});
api.uploadImgCorpPhoto(resp.tempFilePath).then(data => {
console.log(data)
baseFormData.value.photo = data.data.fang;
baseFormData.value.photo2 = data.data.yuan;
photoArr.value = {
url: config.baseUrl_api + baseFormData.value.photo,
name: '头像',
extname: 'jpg'
}
});
},
fail: function(err) {
photoArr.value = {}
}
})
}
function delimgFont(n) {
photoArr.value = {}
cardObj.value = {}
baseFormData.value = {
photo: '',
idcType: baseFormData.value.idcType,
perType: '1',
sourceFlag: 1
};
}
function delPhoto(n) {
photoArr.value = {};
baseFormData.value.photo = '';
baseFormData.value.photo2 = '';
}
function getExtractInfo(obj) {
photoArr.value = {}
// baseFormData.value = {
// photo: '',
// idcType: baseFormData.value.idcType,
// idcCode: baseFormData.value.idcCode,
// perType: '1'
// };
uni.showLoading({
title: '加载中'
})
api.extractInfoFromChinaIdCard(obj).then(res => {
if (res.data.perCode) {
// if(baseFormData.value.idcType != 3){
disabledName.value = true
// }
perId.value = res.data.perId
baseFormData.value.sex = res.data.sex
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.cityId = res.data.cityId
// baseFormData.value.address = res.data.address
if (res.data.photo) {
console.log(res.data.photo)
if (res.data.photo.indexOf('http') == -1) {
baseFormData.value.photo = res.data.photo
let obj = {
url: config.baseUrl_api + res.data.photo,
name: '头像',
extname: 'jpg'
}
photoArr.value = obj
} else {
baseFormData.value.photo = res.data.photo
let obj = {
url: res.data.photo,
name: '头像',
extname: 'jpg'
}
photoArr.value = obj
}
}
// baseFormData.value.name = res.data.name
baseFormData.value.perId = res.data.perId
console.log(res.data.photo, baseFormData.value.photo)
uni.hideLoading()
} else {
uni.hideLoading()
// 新会员
if (res.data.sex) {
baseFormData.value.sex = res.data.sex
baseFormData.value.birth = res.data.birth
}
if (baseFormData.value.idcType != 3 && current.value == 1) {
disabledName.value = true
} else {
disabledName.value = false
}
return
}
})
}
function giveBirthDay() {
if (!baseFormData.value.idcCode) {
return
}
// 判断身份证正确性/赋值生日
if (baseFormData.value.idcType == 0) {
if (!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(baseFormData.value.idcCode))) {
uni.showToast({
title: '请输入正确的身份证号码',
duration: 2000,
icon: 'none'
})
} else {
getExtractInfo({
idcCode: baseFormData.value.idcCode,
idcType: baseFormData.value.idcType,
perType: baseFormData.value.perType || 1
})
}
}
// if (baseFormData.value.idcType == 1 || baseFormData.value.idcType == 3) {
// //转换为大写并判断位数12
// baseFormData.value.idcCode = baseFormData.value.idcCode.toUpperCase()
// // var regex = /^[a-zA-Z]/
// if (baseFormData.value.idcCode.length > 12) {
// uni.showToast({
// icon: 'none',
// title: '请输入正确的证件号',
// duration: 2000
// })
// return
// }
// }
}
function openpopup() {
popup.value.open()
}
function closepopup() {
agree.value = true
popup.value.close()
}
function changeIdcType(e) {
// 切换证件照类型把当前页面数据清空
cardObj.value = {}
photoArr.value = {}
baseFormData.value = {
photo: '',
idcType: e,
perType: '1',
sourceFlag: 1
}
}
function goSubmit() {
if (!agree.value) {
uni.showToast({
icon: 'none',
title: '请阅知入会须知',
duration: 2000
});
return
}
// 验证必填项
if (!baseFormData.value.name) {
uni.showToast({
title: `请输入姓名`,
icon: 'none'
})
return
}
if (!baseFormData.value.idcCode) {
uni.showToast({
title: `请输入证件号码`,
icon: 'none'
})
return
}
if (baseFormData.value.phone) {
const phoneReg = /^1[3-9]\d{9}$/
if (!phoneReg.test(baseFormData.value.phone)) {
uni.showToast({
title: '请输入正确的联系方式',
icon: 'none'
})
return
}
}
// if (baseFormData.value.photo == '' || baseFormData.value.photo == undefined || !baseFormData.value.photo) {
// uni.showToast({
// title: `请上传头像`,
// icon: 'none'
// })
// return
// }
//信息确认弹出
uni.showModal({
content: '请确认信息正确',
success: function(res) {
if (res.confirm) {
if (baseFormData.value.idcType == '4') {
baseFormData.value.idcType = '0'
}
delete baseFormData.value.card
const time = new Date().valueOf() + ''
baseFormData.value.t = time + Math.floor(Math.random() * 10)
baseFormData.value.signT = aes2.AESEncrypt(baseFormData.value.idcType + time)
const baseFormDataJson = encodeURIComponent(JSON.stringify(baseFormData.value))
uni.navigateTo({
url: `/personal/goPay_per?baseFormData=${baseFormDataJson}`
})
// uni.showModal({
// content: '保存成功',
// title: '提示',
// confirmText:'去支付',
// cancelColor:'个人中心',
// success: function(res) {
// },
// fail:function(){
// uni.reLaunch({
// url:`/personal/home`
// })
// }
// })
// api.addPersonToMyDept(baseFormData.value).then(Response => {
// if (Response.data == 0) {
// let msg = '该成员，实名认证未通过，注册失败！'
// uni.showModal({
// content: msg,
// title: '提示',
// success: function() {}
// })
// return
// }
// if (Response.data * 1 < 0) {
// // 会员调入弹出
// uni.showModal({
// content: '该会员已存在其他道馆，如需添加，请发起会员调动',
// title: '提示',
// success: function() {}
// })
// return
// }
// // let msg = '保存成功'
// })
}
}
});
}
function getUserInfo() {
api.getInfo(perId.value).then(res => {
baseFormData.value = res.data
if (baseFormData.areaAssName) baseFormData.ancestorNameList = baseFormData.value.ancestorNameList.join(
',').replaceAll(',', '/')
})
}
import {
onMounted,
ref
} from 'vue'
import * as api from '@/common/api.js'
import {
onLoad
} 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({
photo: '',
sex: '',
idcType: '0',
perType: '1', // （1：个人会员；2：教练；3：考官；4：裁判；5：临时会员；）
perCode: '',
validityDate: '',
// multiDeptFlag: 1,
// isBlack: '1'
})
const items = ref(['身份证添加', '证件照录入'])
const idcTypeList = ref([{
value: '0',
text: "身份证"
},
{
value: '1',
text: "来往大陆(内地)通行证"
},
// {
// value: '3',
// text: "护照"
// },
{
value: '4',
text: '户口本'
},
{
value: '5',
text: '香港身份证'
}
])
const sexs = ref([{
text: '女',
value: '1'
}, {
text: '男',
value: '0'
}])
const placeholderStyle = ref('text-align: right;font-size:30rpx')
const inputstyle = ref({
borderColor: '#fff',
fontSize: '30rpx'
})
const imageStylesTx = ref({
width: '210rpx',
height: '280rpx',
background: {
color: '#F4F6FA'
},
border: {
radius: '2px'
}
});
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()
}
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 {
disabledName.value = true
}
}
// 如果传入了 perId，预填会员信息
if (option.perId) {
perId.value = option.perId
await fetchMemberInfo(option.perId)
}
})
onMounted(() => {
let openId = uni.getStorageSync('openId')
if (!openId) {
wxLogin()
}
})
function getRegionsList() {
api.regionsList().then(res => {
regionsList.value = res.data
})
}
// 根据 perId 获取会员信息预填表单
async function fetchMemberInfo(id) {
if (!id) return
uni.showLoading({title: '加载中...'})
try {
const res = await api.getInfo(id)
const data = res.data || {}
baseFormData.value.name = data.name || ''
baseFormData.value.idcCode = data.idcCode || ''
baseFormData.value.idcType = data.idcType || '0'
baseFormData.value.sex = data.sex || ''
baseFormData.value.birth = data.birth || ''
baseFormData.value.phone = data.phone || ''
baseFormData.value.perCode = data.perCode || ''
baseFormData.value.validityDate = data.validityDate ? data.validityDate.slice(0, 10) : ''
// 照片处理
if (data.photo2) {
const photoUrl = data.photo2.indexOf('http') === -1 ? config.baseUrl_api + data.photo2 : data.photo2
photoArr.value = {
url: photoUrl,
name: '头像',
extname: 'jpg'
}
baseFormData.value.photo = data.photo
baseFormData.value.photo2 = data.photo2
}
disabledName.value = true
} catch (e) {
console.error('获取会员信息失败', e)
} finally {
uni.hideLoading()
}
}
function onClickItem(e) {
if (current.value != e.currentIndex) {
current.value = e.currentIndex
}
cardObj.value = {}
photoArr.value = {}
if (current.value == 0) {
baseFormData.value = {
photo: '',
idcType: '0',
perType: '1'
}
} else {
baseFormData.value = {
photo: '',
idcType: '0',
perType: '1',
sourceFlag: 1
}
}
}
function changeAgree(item) {
agree.value = !item
}
//身份证识别
function upIdCardImgFront(e) {
let file = e.tempFiles[0]
if (!file) {
return
}
uni.showLoading({
title: '加载中'
});
baseFormData.value.card = e.tempFiles;
// console.log(e)
// const formData = new FormData()
// formData.append('pic', e.tempFiles[0].file)
api.carUrl(e.tempFilePaths[0], baseFormData.value.idcType).then(res => {
uni.hideLoading()
if (res.data) {
baseFormData.value.sex = res.data.sex
baseFormData.value.birth = res.data.birth
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.cityId = res.data.cityId
// baseFormData.value.address = res.data.address
} else {
uni.showToast({
title: res.msg,
duration: 2000,
icon: 'none'
})
}
})
}
function upPhoto(e) {
const tempFilePaths = e.tempFilePaths;
const imgUrl = tempFilePaths[0]
if (!imgUrl) {
return
}
wx.cropImage({
src: imgUrl,
cropScale: '4:5',
success: function (resp) {
uni.showLoading({
title: '加载中'
});
api.uploadImgCorpPhoto(resp.tempFilePath).then(data => {
console.log(data)
baseFormData.value.photo = data.data.fang;
baseFormData.value.photo2 = data.data.yuan;
photoArr.value = {
url: config.baseUrl_api + baseFormData.value.photo,
name: '头像',
extname: 'jpg'
}
});
},
fail: function (err) {
photoArr.value = {}
}
})
}
function delimgFont(n) {
photoArr.value = {}
cardObj.value = {}
baseFormData.value = {
photo: '',
idcType: baseFormData.value.idcType,
perType: '1',
sourceFlag: 1
};
}
function delPhoto(n) {
photoArr.value = {};
baseFormData.value.photo = '';
baseFormData.value.photo2 = '';
}
function getExtractInfo(obj) {
photoArr.value = {}
// baseFormData.value = {
// photo: '',
// idcType: baseFormData.value.idcType,
// idcCode: baseFormData.value.idcCode,
// perType: '1'
// };
uni.showLoading({
title: '加载中'
})
api.extractInfoFromChinaIdCard(obj).then(res => {
if (res.data.perCode) {
// if(baseFormData.value.idcType != 3){
disabledName.value = true
// }
perId.value = res.data.perId
baseFormData.value.sex = res.data.sex
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.cityId = res.data.cityId
// baseFormData.value.address = res.data.address
if (res.data.photo) {
console.log(res.data.photo)
if (res.data.photo.indexOf('http') == -1) {
baseFormData.value.photo = res.data.photo
let obj = {
url: config.baseUrl_api + res.data.photo,
name: '头像',
extname: 'jpg'
}
photoArr.value = obj
} else {
baseFormData.value.photo = res.data.photo
let obj = {
url: res.data.photo,
name: '头像',
extname: 'jpg'
}
photoArr.value = obj
}
}
// baseFormData.value.name = res.data.name
baseFormData.value.perId = res.data.perId
console.log(res.data.photo, baseFormData.value.photo)
uni.hideLoading()
} else {
uni.hideLoading()
// 新会员
if (res.data.sex) {
baseFormData.value.sex = res.data.sex
baseFormData.value.birth = res.data.birth
}
if (baseFormData.value.idcType != 3 && current.value == 1) {
disabledName.value = true
} else {
disabledName.value = false
}
return
}
})
}
function giveBirthDay() {
if (!baseFormData.value.idcCode) {
return
}
// 判断身份证正确性/赋值生日
if (baseFormData.value.idcType == 0) {
if (!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(baseFormData.value.idcCode))) {
uni.showToast({
title: '请输入正确的身份证号码',
duration: 2000,
icon: 'none'
})
} else {
getExtractInfo({
idcCode: baseFormData.value.idcCode,
idcType: baseFormData.value.idcType,
perType: baseFormData.value.perType || 1
})
}
}
// if (baseFormData.value.idcType == 1 || baseFormData.value.idcType == 3) {
// //转换为大写并判断位数12
// baseFormData.value.idcCode = baseFormData.value.idcCode.toUpperCase()
// // var regex = /^[a-zA-Z]/
// if (baseFormData.value.idcCode.length > 12) {
// uni.showToast({
// icon: 'none',
// title: '请输入正确的证件号',
// duration: 2000
// })
// return
// }
// }
}
function openpopup() {
popup.value.open()
}
function closepopup() {
agree.value = true
popup.value.close()
}
function changeIdcType(e) {
// 切换证件照类型把当前页面数据清空
cardObj.value = {}
photoArr.value = {}
baseFormData.value = {
photo: '',
idcType: e,
perType: '1',
sourceFlag: 1
}
}
function goSubmit() {
if (!agree.value) {
uni.showToast({
icon: 'none',
title: '请阅知入会须知',
duration: 2000
});
return
}
// 验证必填项
if (!baseFormData.value.name) {
uni.showToast({
title: `请输入姓名`,
icon: 'none'
})
return
}
if (!baseFormData.value.idcCode) {
uni.showToast({
title: `请输入证件号码`,
icon: 'none'
})
return
}
if (baseFormData.value.phone) {
const phoneReg = /^1[3-9]\d{9}$/
if (!phoneReg.test(baseFormData.value.phone)) {
uni.showToast({
title: '请输入正确的联系方式',
icon: 'none'
})
return
}
}
// if (baseFormData.value.photo == '' || baseFormData.value.photo == undefined || !baseFormData.value.photo) {
// uni.showToast({
// title: `请上传头像`,
// icon: 'none'
// })
// return
// }
//信息确认弹出
uni.showModal({
content: '请确认信息正确',
success: function (res) {
if (res.confirm) {
if (baseFormData.value.idcType == '4') {
baseFormData.value.idcType = '0'
}
delete baseFormData.value.card
const time = new Date().valueOf() + ''
baseFormData.value.t = time + Math.floor(Math.random() * 10)
baseFormData.value.signT = aes2.AESEncrypt(baseFormData.value.idcType + time)
const baseFormDataJson = encodeURIComponent(JSON.stringify(baseFormData.value))
uni.navigateTo({
url: `/personal/goPay_per?baseFormData=${baseFormDataJson}`
})
// uni.showModal({
// content: '保存成功',
// title: '提示',
// confirmText:'去支付',
// cancelColor:'个人中心',
// success: function(res) {
// },
// fail:function(){
// uni.reLaunch({
// url:`/personal/home`
// })
// }
// })
// api.addPersonToMyDept(baseFormData.value).then(Response => {
// if (Response.data == 0) {
// let msg = '该成员，实名认证未通过，注册失败！'
// uni.showModal({
// content: msg,
// title: '提示',
// success: function() {}
// })
// return
// }
// if (Response.data * 1 < 0) {
// // 会员调入弹出
// uni.showModal({
// content: '该会员已存在其他道馆，如需添加，请发起会员调动',
// title: '提示',
// success: function() {}
// })
// return
// }
// // let msg = '保存成功'
// })
}
}
});
}
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 {
text-align: left !important;
justify-content: flex-start !important;
padding-left: 0 !important;
width: auto !important;
}
/* 内容右对齐 */
.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 {
text-align: right !important;
}
/* 文本内容右对齐 */
.uni-forms-item .uni-forms-item__content text,
.uni-forms-item .uni-forms-item__content>text {
display: inline-block !important;
white-space: nowrap !important;
}
/* 字段名左对齐 */
.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 {
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 {
text-align: right !important;
}
/* 文本内容右对齐 */
.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) {
overflow: hidden !important;
position: fixed !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
:deep(.uni-popup) {
overflow: hidden !important;
}
:deep(.segmented-control) {
height: 100rpx;
}
:deep(.segmented-control__text) {
line-height: 2;
font-size: 30rpx;
}
.tt {
text-align: center;
font-size: 30rpx;
padding: 40rpx 0 0;
}
.popBody {
font-size: 28rpx;
line-height: 1.5;
height: 70vh;
overflow-y: auto;
font-family: 华文仿宋;
height: 80vh;
overflow: auto;
padding: 30rpx;
.btn-red {
margin: 50rpx 0 30rpx;
}
}
.hasfixedbottom {
padding-bottom: 200rpx;
}
.fixed-agreeline {
position: fixed;
bottom: 150rpx;
left: 0;
right: 0;
z-index: 1;
}
.agreeline {
padding: 20rpx 40rpx;
box-sizing: border-box;
display: flex;
font-size: 30rpx;
text {
color: #014A9F;
}
image {
width: 40rpx;
height: 40rpx;
margin-right: 20rpx;
}
}
.upCard {
position: relative;
width: 500rpx;
height: 316rpx;
.uni-file-picker {
position: absolute;
z-index: 1;
}
.sfz {
width: 476rpx;
position: absolute;
top: 0;
left: 0;
height: 293rpx;
}
}
.op0 {
opacity: 0;
}
:deep(.item-text-overflow) {
text-align: left;
}
:deep(.fixUniFormItemStyle .uni-data-picker__input-box) {
justify-content: flex-start !important;
text-align: left !important;
}
/* 让地区选择器的文本左对齐 */
:deep(.fixUniFormItemStyle .uni-data-picker__text) {
text-align: left !important;
}
</style>
\ No newline at end of file
:deep(.uni-popup__mask) {
overflow: hidden !important;
position: fixed !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
:deep(.uni-popup) {
overflow: hidden !important;
}
:deep(.segmented-control) {
height: 100rpx;
}
:deep(.segmented-control__text) {
line-height: 2;
font-size: 30rpx;
}
.tt {
text-align: center;
font-size: 30rpx;
padding: 40rpx 0 0;
}
.popBody {
font-size: 28rpx;
line-height: 1.5;
height: 70vh;
overflow-y: auto;
font-family: 华文仿宋;
height: 80vh;
overflow: auto;
padding: 30rpx;
.btn-red {
margin: 50rpx 0 30rpx;
}
}
.hasfixedbottom {
padding-bottom: 200rpx;
}
.fixed-agreeline {
position: fixed;
bottom: 150rpx;
left: 0;
right: 0;
z-index: 1;
}
.agreeline {
padding: 20rpx 40rpx;
box-sizing: border-box;
display: flex;
font-size: 30rpx;
text {
color: #014A9F;
}
image {
width: 40rpx;
height: 40rpx;
margin-right: 20rpx;
}
}
.upCard {
position: relative;
width: 500rpx;
height: 316rpx;
.uni-file-picker {
position: absolute;
z-index: 1;
}
.sfz {
width: 476rpx;
position: absolute;
top: 0;
left: 0;
height: 293rpx;
}
}
.op0 {
opacity: 0;
}
:deep(.item-text-overflow) {
text-align: left;
}
:deep(.fixUniFormItemStyle .uni-data-picker__input-box) {
justify-content: flex-start !important;
text-align: left !important;
}
/* 让地区选择器的文本左对齐 */
:deep(.fixUniFormItemStyle .uni-data-picker__text) {
text-align: left !important;
}
</style>
......
personal/home.vue
<template>
<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>
<!-- 绑定/解绑学员 -->
<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="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'"
mode="aspectFill">
</image>
</view>
<view class="member-id">{{ userInfo?.userName }}</view>
</view>
<view class="user-bottom">
<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>
</view>
</view>
<!-- 已过期印章 -->
<image v-if="perInfo?.perValidDateFlag == 0" class="expired-stamp"
:src="config.baseUrl_api + '/fs/static/end@2x.png'" mode="aspectFit">
</image>
<!-- 卡片右下角按钮 -->
<view class="card-btns">
<view class="card-btn" @click="goToPay">
<text>缴费</text>
</view>
<view class="card-btn" @click="downCert">
<text>电子会员证</text>
</view>
</view>
</view>
<!-- 功能按钮卡片 -->
<view class="func-card">
<view class="func-list">
<view class="func-item" @click="goToAuth">
<view class="func-icon">
<image :src="config.baseUrl_api + '/fs/static/btn01@2x.png'"></image>
<!-- <uni-icons type="contact" size="40" color="#1E88E5"></uni-icons> -->
</view>
<text class="func-text">人员信息</text>
</view>
<view class="func-item" @click="goToScore">
<view class="func-icon">
<image :src="config.baseUrl_api + '/fs/static/btn02@2x.png'"></image>
<!-- <uni-icons type="person" size="40" color="#1E88E5"></uni-icons> -->
</view>
<text class="func-text">个人会员</text>
</view>
<view class="func-item" @click="goToRecord(0)">
<view class="func-icon">
<image :src="config.baseUrl_api + '/fs/static/btn03@2x.png'"></image>
<!-- <uni-icons type="list" size="40" color="#1E88E5"></uni-icons> -->
</view>
<text class="func-text">级位记录</text>
</view>
</view>
</view>
<!-- 查询功能区域 -->
<view class="query-section">
<view class="query-item" @click="goToOrder">
<view class="query-item-left">
<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>
</view>
<!-- <view class="query-item" @click="goToWebView(1)">
<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>
</view>
<view class="query-item" @click="goToWebView(2)">
<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>
</view>
<view class="query-item" @click="goToWebView(3)">
<view class="query-item-left">
<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>
</view> -->
<!-- <view class="query-item" @click="goToWebView(4)">
<view class="query-item-left">
<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>
</view> -->
<!-- <view class="query-item" @click="goToWebView(5)">
<view class="query-item-left">
<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>
</view> -->
<!-- <view class="query-item" @click="goToWebView(6)">
<view class="query-item-left">
<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>
</view> -->
<view class="query-item" @click="goToRecord(1)">
<view class="query-item-left">
<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>
</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>
</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>
</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>
</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>
</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>
</view>
</view>
<!-- 绑定学员弹框 -->
<uni-popup ref="bindPopup" type="center" :mask-click="false">
<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" />
</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" />
</view>
</view>
</view>
<view class="popup-btns">
<view class="popup-btn cancel" @click="closeBindPopup">取消</view>
<view class="popup-btn confirm" @click="confirmBind">确定</view>
</view>
</view>
</uni-popup>
<!-- 退出登录确认框 -->
<view v-if="showConfirm" class="confirm-mask" @click.stop="cancelLogout">
<view class="confirm-box" @click.stop>
<view class="confirm-content">
<view class="confirm-title">退出登录</view>
<view class="confirm-text">确定要退出登录吗？</view>
</view>
<view class="confirm-buttons">
<view class="confirm-btn cancel" @click="cancelLogout">取消</view>
<view class="confirm-btn confirm" @click="confirmLogout">确定</view>
</view>
</view>
</view>
</view>
<view class="page-container">
<!-- 会员卡区域 -->
<view class="member-card">
<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-top">
<view class="avatar-wrap" @click="showLogoutConfirm">
<!-- <image class="avatar" v-if="perInfo.photo" :src="config.baseUrl_api + perInfo.photo"
mode="aspectFill">
</image> -->
<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="user-name">{{ perInfo?.perName }}</view>
</view>
<view class="user-bottom">
<!-- <view class="user-name">{{ perInfo?.perName }}</view>-->
<view class="card-info">
<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" :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>
</view>
<view class="card-btn" @click="downCert">
<text>电子会员证</text>
</view>
</view>
</view>
<!-- 功能按钮卡片 -->
<view class="func-card">
<view class="func-list">
<view class="func-item" @click="goToAuth">
<view class="func-icon">
<image :src="config.baseUrl_api + '/fs/static/btn01@2x.png'"></image>
<!-- <uni-icons type="contact" size="40" color="#1E88E5"></uni-icons> -->
</view>
<text class="func-text">人员信息</text>
</view>
<view class="func-item" @click="goToScore">
<view class="func-icon">
<image :src="config.baseUrl_api + '/fs/static/btn02@2x.png'"></image>
<!-- <uni-icons type="person" size="40" color="#1E88E5"></uni-icons> -->
</view>
<text class="func-text">个人会员</text>
</view>
<view class="func-item" @click="goToRecord(0)">
<view class="func-icon">
<image :src="config.baseUrl_api + '/fs/static/btn03@2x.png'"></image>
<!-- <uni-icons type="list" size="40" color="#1E88E5"></uni-icons> -->
</view>
<text class="func-text">级位记录</text>
</view>
</view>
</view>
<!-- 查询功能区域 -->
<view class="query-section">
<view class="query-item" @click="goToOrder">
<view class="query-item-left">
<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 color="#999" size="20" type="arrowright"></uni-icons>
</view>
<!-- <view class="query-item" @click="goToWebView(1)">
<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>
</view>
<view class="query-item" @click="goToWebView(2)">
<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>
</view>
<view class="query-item" @click="goToWebView(3)">
<view class="query-item-left">
<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>
</view> -->
<!-- <view class="query-item" @click="goToWebView(4)">
<view class="query-item-left">
<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>
</view> -->
<!-- <view class="query-item" @click="goToWebView(5)">
<view class="query-item-left">
<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>
</view> -->
<!-- <view class="query-item" @click="goToWebView(6)">
<view class="query-item-left">
<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>
</view> -->
<view class="query-item" @click="goToRecord(1)">
<view class="query-item-left">
<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 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 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 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 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 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 color="#999" size="20" type="arrowright"></uni-icons>
</view>
</view>
<!-- 退出-->
<view class="logOut">
<view class="logOutBtn" @click="showLogoutConfirm">退出登录</view>
</view>
<!-- 绑定学员弹框 -->
<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"/>
</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"/>
</view>
</view>
</view>
<view class="popup-btns">
<view class="popup-btn cancel" @click="closeBindPopup">取消</view>
<view class="popup-btn confirm" @click="confirmBind">确定</view>
</view>
</view>
</uni-popup>
<!-- 退出登录确认框 -->
<view v-if="showConfirm" class="confirm-mask" @click.stop="cancelLogout">
<view class="confirm-box" @click.stop>
<view class="confirm-content">
<view class="confirm-title">退出登录</view>
<view class="confirm-text">确定要退出登录吗？</view>
</view>
<view class="confirm-buttons">
<view class="confirm-btn cancel" @click="cancelLogout">取消</view>
<view class="confirm-btn confirm" @click="confirmLogout">确定</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import {
computed,
onMounted,
ref,
watch,
nextTick
} 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 {
bindUser,
unbindUser,
downStuCertSingle
} 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 isBound = computed(() => {
const perCode = perInfo.value?.perCode
return perCode !== undefined && perCode !== null && perCode !== ''
})
const bindPopup = ref(null)
import {
computed,
onMounted,
ref,
watch,
nextTick
} from "vue";
import config from "/config.js";
import {
wxLogin,
logout,
getWebInfo
} 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'
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 perCode = perInfo.value?.perCode
return perCode !== undefined && perCode !== null && perCode !== ''
})
const bindPopup = ref(null)
const bindForm = ref({
name: '',
idcCode: ''
name: '',
idcCode: ''
})
const showConfirm = ref(false)
onMounted(() => {
let webUserName = uni.getStorageSync('webUserName')
if (!webUserName) {
wxLogin().then(getWebInfo)
}
})
// 标记是否已经弹出过绑定框（避免重复弹出）
let hasOpenedBindPopup = false
watch(() => perInfo.value, (newVal, oldVal) => {
console.log(444, newVal?.perCode)
// 只有当 perInfo 数据存在且 perCode 为空时才弹出
if (newVal && !newVal.perCode && !hasOpenedBindPopup) {
hasOpenedBindPopup = true
nextTick(() => {
openBindPopup()
})
}
}, {
immediate: true
})
// 打开绑定弹框
const openBindPopup = () => {
if (bindPopup.value) {
bindForm.value = {
name: '',
idcCode: ''
}
bindPopup.value.open()
} else {
nextTick(() => {
openBindPopup()
})
}
}
// 关闭绑定弹框
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 {
// 未绑定，打开绑定弹框
openBindPopup()
}
}
// 确认绑定
const confirmBind = async () => {
if (!bindForm.value.name) {
uni.showToast({
title: '请输入姓名',
icon: 'none'
})
return
}
if (!bindForm.value.idcCode) {
uni.showToast({
title: '请输入证件号',
icon: 'none'
})
return
}
uni.showLoading({
title: '绑定中...',
mask: true
})
const [err, res] = await to(bindUser({
name: bindForm.value.name,
idcCode: bindForm.value.idcCode
}))
uni.hideLoading()
if (err) {
uni.showToast({
title: err?.data?.msg || err?.message || '绑定失败，请稍后重试',
icon: 'none',
duration: 3000
})
return
}else{
uni.showToast({
title: '绑定成功',
icon: 'success'
})
closeBindPopup()
getWebInfo()
}
// uni.showToast({
// title: '绑定成功',
// icon: 'success'
// })
}
// 返回上一页
const goBack = () => {
uni.navigateBack()
}
const goToAuth = () => {
if (!isBound.value) {
uni.showToast({ title: '请先绑定学员', icon: 'none' })
return
}
uni.navigateTo({
url: '/personal/personInfo'
});
};
const goToScore = () => {
if (!isBound.value) {
uni.showToast({ title: '请先绑定学员', icon: 'none' })
return
}
uni.navigateTo({
url: '/personal/memberInfo'
});
};
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)
});
};
onMounted(() => {
let webUserName = uni.getStorageSync('webUserName')
if (!webUserName) {
wxLogin().then(getWebInfo)
}
})
// 标记是否已经弹出过绑定框（避免重复弹出）
let hasOpenedBindPopup = false
watch(() => perInfo.value, (newVal, oldVal) => {
console.log(444, newVal?.perCode)
// 只有当 perInfo 数据存在且 perCode 为空时才弹出
if (newVal && !newVal.perCode && !hasOpenedBindPopup) {
hasOpenedBindPopup = true
nextTick(() => {
openBindPopup()
})
}
}, {
immediate: true
})
// 打开绑定弹框
const openBindPopup = () => {
if (bindPopup.value) {
bindForm.value = {
name: '',
idcCode: ''
}
bindPopup.value.open()
} else {
nextTick(() => {
openBindPopup()
})
}
}
// 关闭绑定弹框
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 {
// // 未绑定，打开绑定弹框
// openBindPopup()
// }
openBindPopup()
}
// 确认绑定
const confirmBind = async () => {
if (!bindForm.value.name) {
uni.showToast({
title: '请输入姓名',
icon: 'none'
})
return
}
if (!bindForm.value.idcCode) {
uni.showToast({
title: '请输入证件号',
icon: 'none'
})
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
})
const [err, res] = await to(bindUser({
name: bindForm.value.name,
idcCode: bindForm.value.idcCode
}))
uni.hideLoading()
if (err) {
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()
await getWebInfo()
}
// uni.showToast({
// title: '绑定成功',
// 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 = () => {
uni.navigateBack()
}
const goToAuth = () => {
if (!isBound.value) {
uni.showToast({title: '请先绑定学员', icon: 'none'})
return
}
uni.navigateTo({
url: '/personal/personInfo'
});
};
const goToScore = () => {
if (!isBound.value) {
uni.showToast({title: '请先绑定学员', icon: 'none'})
return
}
uni.navigateTo({
url: '/personal/memberInfo'
});
};
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) => {
if (!isBound.value) {
uni.showToast({ title: '请先绑定学员', icon: 'none' })
return
}
uni.navigateTo({
url: '/personal/levelRecord?type=' + type
});
};
// 导航到我的订单
const goToOrder = () => {
if (!isBound.value) {
uni.showToast({ title: '请先绑定学员', icon: 'none' })
return
}
uni.navigateTo({
url: '/personal/order'
});
};
// 导航到缴费
const goToPay = () => {
const perId = userInfo.value?.perId
uni.navigateTo({
url: `/personal/addVip_per?perId=${perId}`
});
};
// 下载电子会员证
const downCert = async () => {
if (!isBound.value) {
uni.showToast({ title: '请先绑定学员', icon: 'none' })
return
}
const perId = userInfo.value?.perId
if (!perId) return
uni.showLoading({ title: '加载中...', mask: true })
const [err, res] = await to(downStuCertSingle(perId))
uni.hideLoading()
if (err) {
uni.showToast({ title: err?.data?.msg || '获取会员证失败', icon: 'none' })
return
}
const pdfUrl = res?.data
if (pdfUrl) {
uni.navigateTo({
url: `/personal/certPreview?url=${encodeURIComponent(pdfUrl)}`
})
}
};
// 显示退出登录确认框
const showLogoutConfirm = () => {
showConfirm.value = true;
};
// 取消退出登录
const cancelLogout = () => {
showConfirm.value = false;
};
// 确认退出登录
const confirmLogout = () => {
// 调用退出登录接口
logout().then(() => {
// 跳转到登录页
uni.reLaunch({
url: '/login/login'
})
});
};
const goToRecord = (type) => {
if (!isBound.value) {
uni.showToast({title: '请先绑定学员', icon: 'none'})
return
}
uni.navigateTo({
url: '/personal/levelRecord?type=' + type
});
};
// 导航到我的订单
const goToOrder = () => {
if (!isBound.value) {
uni.showToast({title: '请先绑定学员', icon: 'none'})
return
}
uni.navigateTo({
url: '/personal/order'
});
};
// 导航到缴费
const goToPay = () => {
const perId = userInfo.value.perId ?? ''
uni.navigateTo({
url: `/personal/addVip_per?perId=${perId}`
});
};
// 下载电子会员证
const downCert = async () => {
if (!isBound.value) {
uni.showToast({title: '请先绑定学员', icon: 'none'})
return
}
const perId = userInfo.value?.perId
if (!perId) return
uni.showLoading({title: '加载中...', mask: true})
const [err, res] = await to(downStuCertSingle(perId))
uni.hideLoading()
if (err) {
uni.showToast({title: err?.data?.msg || '获取会员证失败', icon: 'none'})
return
}
const pdfUrl = res?.data
if (pdfUrl) {
uni.navigateTo({
url: `/personal/certPreview?url=${encodeURIComponent(pdfUrl)}`
})
}
};
// 显示退出登录确认框
const showLogoutConfirm = () => {
showConfirm.value = true;
};
// 取消退出登录
const cancelLogout = () => {
showConfirm.value = false;
};
// 确认退出登录
const confirmLogout = () => {
// 调用退出登录接口
logout().then(() => {
// 跳转到登录页
uni.reLaunch({
url: '/login/login'
})
});
};
</script>
<style lang="scss" scoped>
.page-container {
min-height: 100vh;
background: #f5f5f5;
}
/* 导航栏 */
.nav-bar {
display: flex;
align-items: center;
justify-content: space-between;
height: 88rpx;
background: #ffffff;
padding: 0 30rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
position: sticky;
top: 0;
z-index: 100;
}
.nav-left {
width: 44rpx;
height: 44rpx;
display: flex;
align-items: center;
justify-content: center;
}
.nav-title {
font-size: 32rpx;
font-weight: 500;
color: #333;
}
.nav-right {
width: 44rpx;
}
/* 会员卡 */
.member-card {
position: relative;
height: 450rpx;
border-radius: 0;
overflow: hidden;
}
.card-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.bind-student {
position: absolute;
top: 30rpx;
right: 30rpx;
display: flex;
align-items: center;
gap: 8rpx;
z-index: 10;
padding: 10rpx 16rpx;
// background: rgba(255, 255, 255, 0.5);
border-radius: 30rpx;
}
.bind-student text {
font-size: 26rpx;
color: #5c4b37;
}
.bind-icon {
width: 45rpx;
height: 45rpx;
}
.user-section {
position: relative;
z-index: 1;
padding: 50rpx 30rpx 0;
}
.user-top {
display: flex;
align-items: center;
gap: 20rpx;
margin-bottom: 20rpx;
}
.avatar-wrap {
flex-shrink: 0;
}
.avatar {
width: 110rpx;
height: 110rpx;
border-radius: 50%;
border: 3rpx solid rgba(255, 255, 255, 0.6);
}
.member-id {
font-size: 26rpx;
color: #503000;
}
.user-bottom {
padding-left: 0;
}
.user-name {
font-size: 44rpx;
font-weight: bold;
color: #5c4b37;
margin-bottom: 16rpx;
}
.card-info {
display: flex;
flex-direction: column;
gap: 10rpx;
}
.info-row {
font-size: 28rpx;
color: #503000;
}
/* 已过期印章 */
.expired-stamp {
position: absolute;
right: 30rpx;
bottom: 150rpx;
width: 150rpx;
height: 150rpx;
z-index: 1;
}
/* 卡片右下角按钮 */
.card-btns {
position: absolute;
right: 30rpx;
bottom: 80rpx;
z-index: 10;
display: flex;
gap: 16rpx;
}
.card-btn {
background: rgba(255, 255, 255, 0.9);
border-radius: 30rpx;
padding: 0rpx 20rpx;
padding-bottom: 5rpx;
}
.card-btn text {
height: 24rpx;
line-height: 24rpx;
font-size: 24rpx;
color: #C40F18;
}
/* 功能按钮卡片 */
.func-card {
margin: -70rpx 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 {
display: flex;
justify-content: space-around;
padding: 0 20rpx;
}
.func-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 12rpx;
}
.func-icon {
width: 72rpx;
height: 72rpx;
display: flex;
align-items: center;
justify-content: center;
// background: #f0f7ff;
// border-radius: 16rpx;
image{
width: 72rpx;
height: 72rpx;
}
}
.func-text {
font-size: 24rpx;
color: #333;
}
/* 查询功能区域 */
.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 {
display: flex;
align-items: center;
justify-content: space-between;
padding: 32rpx 30rpx;
border-bottom: 1rpx solid #f5f5f5;
}
.query-item:last-child {
border-bottom: none;
}
.query-item-left {
display: flex;
align-items: center;
gap: 16rpx;
}
.query-item-icon {
width: 44rpx;
height: 48rpx;
}
.query-item-text {
font-size: 28rpx;
color: #333;
}
/* 绑定学员弹框 */
.bind-popup {
width: 600rpx;
background: #ffffff;
border-radius: 24rpx;
overflow: hidden;
}
.popup-title {
font-size: 32rpx;
font-weight: 500;
color: #333;
text-align: center;
padding: 40rpx 30rpx 20rpx;
}
.popup-content {
padding: 20rpx 30rpx 40rpx;
}
.form-item {
display: flex;
align-items: center;
margin-bottom: 24rpx;
}
.form-item:last-child {
margin-bottom: 0;
}
.form-label {
width: 120rpx;
font-size: 28rpx;
color: #333;
flex-shrink: 0;
}
.form-input {
flex: 1;
background: #f5f5f5;
border-radius: 12rpx;
padding: 20rpx 24rpx;
}
.form-input input {
font-size: 28rpx;
color: #333;
width: 100%;
}
.placeholder-class {
color: #999;
}
.popup-btns {
display: flex;
border-top: 1rpx solid #eee;
}
.popup-btn {
flex: 1;
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 30rpx;
}
.popup-btn.cancel {
color: #666;
border-right: 1rpx solid #eee;
}
.popup-btn.confirm {
color: #C40F18;
font-weight: 500;
}
/* 退出登录确认框 */
.confirm-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.confirm-box {
width: 600rpx;
background: #ffffff;
border-radius: 20rpx;
overflow: hidden;
}
.confirm-content {
padding: 40rpx;
text-align: center;
}
.confirm-title {
font-size: 32rpx;
font-weight: 500;
color: #333;
margin-bottom: 20rpx;
}
.confirm-text {
font-size: 28rpx;
color: #666;
margin-top: 30rpx;
color: #C40F18;
}
.confirm-buttons {
display: flex;
border-top: 1rpx solid #eee;
}
.confirm-btn {
flex: 1;
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 30rpx;
}
.confirm-btn.cancel {
color: #666;
border-right: 1rpx solid #eee;
}
.confirm-btn.confirm {
color: #C40F18;
font-weight: 500;
}
</style>
\ No newline at end of file
.page-container {
min-height: 100vh;
background: #f5f5f5;
}
/* 导航栏 */
.nav-bar {
display: flex;
align-items: center;
justify-content: space-between;
height: 88rpx;
background: #ffffff;
padding: 0 30rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
position: sticky;
top: 0;
z-index: 100;
}
.nav-left {
width: 44rpx;
height: 44rpx;
display: flex;
align-items: center;
justify-content: center;
}
.nav-title {
font-size: 32rpx;
font-weight: 500;
color: #333;
}
.nav-right {
width: 44rpx;
}
/* 会员卡 */
.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 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.bind-student {
//position: absolute;
//top: 30rpx;
//right: 30rpx;
display: flex;
align-items: center;
//gap: 8rpx;
z-index: 10;
padding: 5rpx 16rpx;
border-radius: 30rpx;
//border: 1px solid #fff;
background: #dbbf79;
}
.bind-student text {
font-size: 26rpx;
color: #5c4b37;
}
.bind-icon {
width: 45rpx;
height: 45rpx;
}
.user-section {
position: relative;
z-index: 1;
padding: 30rpx 30rpx 0;
}
.user-top {
display: flex;
align-items: center;
gap: 20rpx;
margin-bottom: 10rpx;
}
.avatar-wrap {
flex-shrink: 0;
}
.avatar {
width: 110rpx;
height: 110rpx;
border-radius: 50%;
border: 3rpx solid rgba(255, 255, 255, 0.6);
}
.member-id {
font-size: 26rpx;
color: #503000;
}
.user-bottom {
//padding-left: 0;
padding: 0 30rpx;
}
.user-name {
font-size: 50rpx;
font-weight: bold;
color: #5c4b37;
margin-bottom: 16rpx;
margin-left: 16rpx;
}
.card-info {
display: flex;
flex-direction: column;
gap: 10rpx;
}
.info-row {
font-size: 30rpx;
color: #503000;
display: flex;
justify-content: space-between;
}
/* 已过期印章 */
.expired-stamp {
position: absolute;
right: 30rpx;
bottom: 150rpx;
width: 150rpx;
height: 150rpx;
z-index: 1;
}
/* 卡片右下角按钮 */
.card-btns {
position: absolute;
left: 50rpx;
bottom: 37rpx;
z-index: 10;
display: flex;
gap: 16rpx;
}
.card-btn {
background: rgba(255, 255, 255, 0.9);
border-radius: 30rpx;
padding: 0 30rpx 5rpx 30rpx;
border: 1px solid #e0c36c;
}
.card-btn text {
height: 24rpx;
line-height: 24rpx;
font-size: 24rpx;
color: #c7990f;
}
/* 功能按钮卡片 */
.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 {
display: flex;
justify-content: space-around;
padding: 0 20rpx;
}
.func-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 12rpx;
}
.func-icon {
width: 72rpx;
height: 72rpx;
display: flex;
align-items: center;
justify-content: center;
// background: #f0f7ff;
// border-radius: 16rpx;
image {
width: 72rpx;
height: 72rpx;
}
}
.func-text {
font-size: 24rpx;
color: #333;
}
/* 查询功能区域 */
.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 {
display: flex;
align-items: center;
justify-content: space-between;
padding: 32rpx 30rpx;
border-bottom: 1rpx solid #f5f5f5;
}
.query-item:last-child {
border-bottom: none;
}
.query-item-left {
display: flex;
align-items: center;
gap: 16rpx;
}
.query-item-icon {
width: 44rpx;
height: 48rpx;
}
.query-item-text {
font-size: 28rpx;
color: #333;
}
/* 绑定学员弹框 */
.bind-popup {
width: 600rpx;
background: #ffffff;
border-radius: 24rpx;
overflow: hidden;
}
.popup-title {
font-size: 32rpx;
font-weight: 500;
color: #333;
text-align: center;
padding: 40rpx 30rpx 20rpx;
}
.popup-content {
padding: 20rpx 30rpx 40rpx;
}
.form-item {
display: flex;
align-items: center;
margin-bottom: 24rpx;
}
.form-item:last-child {
margin-bottom: 0;
}
.form-label {
width: 120rpx;
font-size: 28rpx;
color: #333;
flex-shrink: 0;
}
.form-input {
flex: 1;
background: #f5f5f5;
border-radius: 12rpx;
padding: 20rpx 24rpx;
}
.form-input input {
font-size: 28rpx;
color: #333;
width: 100%;
}
.placeholder-class {
color: #999;
}
.popup-btns {
display: flex;
border-top: 1rpx solid #eee;
}
.popup-btn {
flex: 1;
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 30rpx;
}
.popup-btn.cancel {
color: #666;
border-right: 1rpx solid #eee;
}
.popup-btn.confirm {
color: #C40F18;
font-weight: 500;
}
/* 退出登录确认框 */
.confirm-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.confirm-box {
width: 600rpx;
background: #ffffff;
border-radius: 20rpx;
overflow: hidden;
}
.confirm-content {
padding: 40rpx;
text-align: center;
}
.confirm-title {
font-size: 32rpx;
font-weight: 500;
color: #333;
margin-bottom: 20rpx;
}
.confirm-text {
font-size: 28rpx;
color: #666;
margin-top: 30rpx;
color: #C40F18;
color: #dbbb69;
}
.confirm-buttons {
display: flex;
border-top: 1rpx solid #eee;
}
.confirm-btn {
flex: 1;
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 30rpx;
}
.confirm-btn.cancel {
color: #666;
border-right: 1rpx solid #eee;
}
.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!