studytour-front/pages_order/member/switch.vue

<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>