studytour-front/pages_order/coupon/couponSelect/index.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"
        @change="onRadioChange"
      >
        <view class="list-item" v-for="item in list" :key="item.id">
          <couponCard 
            :data="item" 
            @select="onSelect"
          ></couponCard>
        </view>
      </uv-radio-group>
    </view>

  </view>
  
</template>

<script>
	import { mapState } from 'vuex'

	import mixinsList from '@/mixins/list.js'

  import couponCard from './couponCard.vue'

  export default {
		mixins: [mixinsList],
    components: {
      couponCard,
    },
    data() {
      return {
        // todo: check key
				mixinsListApi: '',
        queryParams: {
          pageNo: 1,
          pageSize: 10,
        },
        selectedId: null,
      }
    },
    computed: {
			...mapState(['couponInfo']),
    },
    onLoad(arg) {
      if (this.couponInfo?.id) {
        this.selectedId = this.couponInfo.id
      }

      this.getData()
    },
    onUnload() {
      if (!this.selectedId) {
        this.$store.commit('setCouponInfo', null)
        return
      }

      const target = this.list.find(item => item.id === this.selectedId)
      this.$store.commit('setCouponInfo', target)
    },
    methods: {
      // todo: delete
      getData() {
        this.list = [
          {
            id: '001',
            label: '专属福利】20元红包',
            price: 20,
            validTime: '2026-04-28',
          },
          {
            id: '002',
            label: '专属福利】400元红包',
            price: 400,
            validTime: '2026-04-28',
          },
          {
            id: '003',
            label: '专属福利】400元红包',
            price: 400,
            validTime: '2026-04-28',
          },
          {
            id: '004',
            label: '专属福利】400元红包',
            price: 400,
            validTime: '2026-04-28',
          },
          {
            id: '005',
            label: '专属福利】400元红包',
            price: 400,
            validTime: '2026-04-28',
          },
        ]

      },
      onSelect(id) {
        console.log('onSelect', id)
        this.selectedId = id
      },
      onRadioChange(e) {
        console.log('onRadioChange', e)
      },
    },
  }
</script>

<style scoped lang="scss">
  .page__view {
		width: 100vw;
		min-height: 100vh;
		background-color: $uni-bg-color;
		position: relative;
  }

  .list {
    padding: 32rpx 40rpx;

    &-item {

      & + & {
        margin-top: 24rpx;
      }

    }
  }

</style>