@ -0,0 +1,97 @@ | |||||
<template> | |||||
<view class="flex card"> | |||||
<view class="flex price"> | |||||
¥<view class="highlight">{{ data.price }}</view> | |||||
</view> | |||||
<view class="flex flex-column info"> | |||||
<view class="title">{{ data.label }}</view> | |||||
<view class="desc">{{ `有效期至 ${data.validTime}` }}</view> | |||||
<button class="btn" @click="jumpToCategory">去使用</button> | |||||
</view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
props: { | |||||
data: { | |||||
type: Object, | |||||
default() { | |||||
return {} | |||||
} | |||||
}, | |||||
value: { | |||||
type: String, | |||||
default: null, | |||||
} | |||||
}, | |||||
data() { | |||||
return { | |||||
} | |||||
}, | |||||
methods: { | |||||
jumpToCategory() { | |||||
this.$utils.navigateTo(`/pages/index/category`) | |||||
}, | |||||
}, | |||||
} | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
.card { | |||||
column-gap: 24rpx; | |||||
padding: 8rpx; | |||||
font-family: PingFang SC; | |||||
font-weight: 400; | |||||
line-height: 1.4; | |||||
background: #FFFFFF; | |||||
border-radius: 24rpx; | |||||
} | |||||
.price { | |||||
width: 164rpx; | |||||
height: 224rpx; | |||||
font-size: 24rpx; | |||||
font-weight: 500; | |||||
color: #FF4800; | |||||
background: #FFF2F2; | |||||
border-radius: 16rpx; | |||||
.highlight { | |||||
font-size: 48rpx; | |||||
} | |||||
} | |||||
.info { | |||||
flex: 1; | |||||
align-items: flex-start; | |||||
row-gap: 16rpx; | |||||
height: 224rpx; | |||||
padding-left: 24rpx; | |||||
border-left: 2rpx dashed #DADADA; | |||||
.title { | |||||
font-size: 32rpx; | |||||
font-weight: 500; | |||||
color: #181818; | |||||
} | |||||
.desc { | |||||
font-size: 28rpx; | |||||
color: #9B9B9B; | |||||
} | |||||
.btn { | |||||
padding: 6rpx 34rpx; | |||||
font-family: PingFang SC; | |||||
font-size: 30rpx; | |||||
font-weight: 500; | |||||
line-height: 1.4; | |||||
background: linear-gradient(to right, #21FEEC, #019AF9); | |||||
border: 2rpx solid #00A9FF; | |||||
border-radius: 28rpx; | |||||
} | |||||
} | |||||
</style> |
@ -0,0 +1,108 @@ | |||||
<template> | |||||
<view class="page__view"> | |||||
<navbar title="我的优惠券" leftClick @leftClick="$utils.navigateBack" /> | |||||
<view class="list"> | |||||
<view class="list-item" v-for="item in list" :key="item.id"> | |||||
<couponCard | |||||
:data="item" | |||||
@select="onSelect" | |||||
></couponCard> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
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, | |||||
} | |||||
}, | |||||
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> |