| <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"> | |
|           <couponCard  | |
|             :data="item"  | |
|           ></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 { | |
| 				mixinsListApi: 'queryCouponList', | |
|         queryParams: { | |
|           pageNo: 1, | |
|           pageSize: 10, | |
|           status: 0, | |
|         }, | |
|         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: { | |
|     }, | |
|   } | |
| </script> | |
|  | |
| <style scoped lang="scss"> | |
|   .page__view { | |
| 		width: 100vw; | |
| 		min-height: 100vh; | |
| 		background: $uni-bg-color; | |
| 		position: relative; | |
|   } | |
| 
 | |
|   .list { | |
|     padding: 32rpx 40rpx; | |
| 
 | |
|     &-item { | |
| 
 | |
|       & + & { | |
|         margin-top: 24rpx; | |
|       } | |
| 
 | |
|     } | |
|   } | |
| 
 | |
| </style> |