鸿宇研学生前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

129 lines
2.6 KiB

<template>
<view class="page__view">
<navbar title="切换档案" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="#FFFFFF" />
<view class="list">
<uv-radio-group
v-model="selectedId"
placement="column"
shape="circle"
size="36rpx"
iconSize="36rpx"
activeColor="#00A9FF"
>
<view class="list-item" v-for="item in list" :key="item.id">
<memberCard
:data="item"
:showRadio="true"
></memberCard>
</view>
</uv-radio-group>
</view>
<view class="bottom">
<button class="btn" @click="onConfirm">确定切换</button>
</view>
</view>
</template>
<script>
import { mapState } from 'vuex'
import mixinsList from '@/mixins/list.js'
import memberCard from './memberCard.vue'
export default {
mixins: [mixinsList],
components: {
memberCard,
},
data() {
return {
queryParams: {
pageNo: 1,
pageSize: 10,
status: 1, // 绑定状态(status):0-确认中 1-已绑定 2-已拒绝
},
mixinsListApi: 'queryBindList',
selectedId: null,
}
},
computed: {
...mapState(['userInfo', 'memberInfo']),
},
onLoad(arg) {
this.selectedId = this.memberInfo?.id || this.userInfo?.id
this.getData()
},
methods: {
getDataThen(records) {
this.list = [{
...this.userInfo,
user: this.userInfo,
}].concat(records)
},
onConfirm() {
const target = this.list.find(item => item.user.id === this.selectedId)?.user
this.$store.commit('setMemberInfo', target)
this.$utils.navigateBack()
},
},
}
</script>
<style scoped lang="scss">
.page__view {
width: 100vw;
min-height: 100vh;
background: $uni-bg-color;
position: relative;
}
.list {
padding: 32rpx 40rpx;
padding-bottom: calc(env(safe-area-inset-bottom) + 198rpx);
&-item {
& + & {
margin-top: 24rpx;
}
}
}
.bottom {
position: fixed;
left: 0;
bottom: 0;
width: 100vw;
// height: 200rpx;
padding: 32rpx 40rpx;
padding-bottom: calc(env(safe-area-inset-bottom) + 32rpx);
background: #FFFFFF;
box-sizing: border-box;
.btn {
width: 100%;
padding: 14rpx 0;
box-sizing: border-box;
font-family: PingFang SC;
font-weight: 500;
font-size: 36rpx;
line-height: 1.4;
color: #FFFFFF;
background: linear-gradient(to right, #21FEEC, #019AF9);
border: 2rpx solid #00A9FF;
border-radius: 41rpx;
}
}
</style>