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