Browse Source

feat: page-coupon;

pull/2/head
Fox-33 2 weeks ago
parent
commit
cd931a046e
6 changed files with 210 additions and 2 deletions
  1. +4
    -1
      pages.json
  2. +97
    -0
      pages_order/coupon/couponList/couponCard.vue
  3. +108
    -0
      pages_order/coupon/couponList/index.vue
  4. +0
    -0
      pages_order/coupon/couponSelect/couponCard.vue
  5. +0
    -0
      pages_order/coupon/couponSelect/index.vue
  6. +1
    -1
      pages_order/order/orderConfirm/index.vue

+ 4
- 1
pages.json View File

@ -86,7 +86,10 @@
"path": "traveler/travelerList"
},
{
"path": "coupon/index"
"path": "coupon/couponSelect/index"
},
{
"path": "coupon/couponList/index"
},
{
"path": "growing/activity/search"


+ 97
- 0
pages_order/coupon/couponList/couponCard.vue View File

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

+ 108
- 0
pages_order/coupon/couponList/index.vue View File

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

pages_order/coupon/couponCard.vue → pages_order/coupon/couponSelect/couponCard.vue View File


pages_order/coupon/index.vue → pages_order/coupon/couponSelect/index.vue View File


+ 1
- 1
pages_order/order/orderConfirm/index.vue View File

@ -284,7 +284,7 @@
},
jumpToSelectCoupon() {
uni.navigateTo({
url: `/pages_order/coupon/index`
url: `/pages_order/coupon/couponSelect/index`
})
},
getCouponDesc() {


Loading…
Cancel
Save