|
@@ -1,56 +1,33 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <view class="coupon_page">
|
|
|
|
|
- <view class="coupon_box">
|
|
|
|
|
- <view class="none" v-if="couponList.length == 0">
|
|
|
|
|
- 暂无优惠券
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="coupon" v-if="couponList.length === 0">
|
|
|
|
|
- <view class="item" v-for="(item, index) in 10" :key="item.id">
|
|
|
|
|
- <view class="left">
|
|
|
|
|
- <!-- <text v-if="item.discountType==2">折扣</text>
|
|
|
|
|
- <text v-else> 满减</text> -->
|
|
|
|
|
- <!-- ¥{{item.discountValue}} <br /> -->
|
|
|
|
|
- <text v-if="item.discountType == 3">¥{{item.discountValue}}<br/></text>
|
|
|
|
|
- <text v-else>{{item.rebValue}}折</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="right" v-if="item.discountType == 3">
|
|
|
|
|
- 满{{item.thresholdAmount}}减{{item.discountValue}} <br/>
|
|
|
|
|
- 有效期至{{item.expirationTimeString}}
|
|
|
|
|
|
|
+ <view class="coupon-page">
|
|
|
|
|
+ <view class="list-container">
|
|
|
|
|
+ <view v-for="(item, index) in couponList" :key="index"
|
|
|
|
|
+ :class="['coupon-card']">
|
|
|
|
|
+ <view class="left-content">
|
|
|
|
|
+ <view class="coupon-title">
|
|
|
|
|
+ <view v-if="item.discountType == 3">满{{ item.thresholdAmount }}减{{ item.discountValue }}</view>
|
|
|
|
|
+ <view v-else>满{{ item.thresholdAmount }}可用</view>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="right" v-else>
|
|
|
|
|
- 满{{item.thresholdAmount}}可用 <br/>
|
|
|
|
|
- 有效期至{{item.expirationTimeString}}
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="one_btn" @click.stop="goIdentify(item)">
|
|
|
|
|
- <!-- <image src="/static/index/one.png" mode=""></image> -->
|
|
|
|
|
- 立即使用
|
|
|
|
|
|
|
+ <view class="coupon-time">
|
|
|
|
|
+ <view>有效期至{{ item.expirationTimeString }}</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
- </view>
|
|
|
|
|
|
|
|
|
|
- <!-- <view class="coupon" v-for="(item,index) in couponList" :key="index" v-else>
|
|
|
|
|
- <view class="top">
|
|
|
|
|
- <view class="left">
|
|
|
|
|
- ¥<text>{{item.discountValue}}</text>
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
- <view class="center" v-if="item.discountType === 1">
|
|
|
|
|
- 无门槛
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="center" v-if="item.discountType ===2">
|
|
|
|
|
- 折扣
|
|
|
|
|
|
|
+ <view class="right-action">
|
|
|
|
|
+ <view class="amount-box" v-if="item.discountType == 3">
|
|
|
|
|
+ <text class="unit">¥</text>
|
|
|
|
|
+ <text class="val">{{ item.discountValue }}</text>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="center" v-if="item.discountType === 3">
|
|
|
|
|
- 满减
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="right">
|
|
|
|
|
- <view class="btn" @click="goIdentify(item)">
|
|
|
|
|
- 使用
|
|
|
|
|
- </view>
|
|
|
|
|
- 有效期至{{item.expirationTimeString}}
|
|
|
|
|
|
|
+ <view class="amount-box" v-else>
|
|
|
|
|
+ <text class="val">{{ item.rebValue }}</text>
|
|
|
|
|
+ <text class="unit">折</text>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="action-btn active" @click.stop="goIdentify(item)">立即使用</view>
|
|
|
</view>
|
|
</view>
|
|
|
- </view> -->
|
|
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <u-empty v-if="couponList.length === 0" mode="coupon" marginTop="100"></u-empty>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</template>
|
|
</template>
|
|
@@ -62,41 +39,35 @@
|
|
|
export default {
|
|
export default {
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
|
|
+ query: {},
|
|
|
couponList: [],
|
|
couponList: [],
|
|
|
- expirationTime: 0,
|
|
|
|
|
- title: ''
|
|
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
- onLoad(options) {
|
|
|
|
|
- if (options) {
|
|
|
|
|
- this.title = options.title
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ onLoad(query) {
|
|
|
|
|
+ this.query = query;
|
|
|
},
|
|
},
|
|
|
onShow() {
|
|
onShow() {
|
|
|
- this.getCouponList()
|
|
|
|
|
|
|
+ this.getData();
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
- getCouponList() {
|
|
|
|
|
- var openid = {
|
|
|
|
|
|
|
+ getData() {
|
|
|
|
|
+ let params = {
|
|
|
openid: uni.getStorageSync('wx_copenid')
|
|
openid: uni.getStorageSync('wx_copenid')
|
|
|
}
|
|
}
|
|
|
- getCoupon(openid).then(res => {
|
|
|
|
|
|
|
+ getCoupon(params).then(res => {
|
|
|
if (res.data.code == 200) {
|
|
if (res.data.code == 200) {
|
|
|
- this.couponList = res.data.data
|
|
|
|
|
|
|
+ this.couponList = res.data.data;
|
|
|
}
|
|
}
|
|
|
- })
|
|
|
|
|
|
|
+ });
|
|
|
},
|
|
},
|
|
|
goIdentify(item) {
|
|
goIdentify(item) {
|
|
|
- if (this.title == 'select') {
|
|
|
|
|
|
|
+ if (this.query.title == 'select') {
|
|
|
uni.setStorageSync('couponData', item);
|
|
uni.setStorageSync('couponData', item);
|
|
|
uni.navigateBack();
|
|
uni.navigateBack();
|
|
|
// uni.navigateTo({
|
|
// uni.navigateTo({
|
|
|
// url: `/pages/identify/pay_order?couponId=${item.id}&couponMoney=${item.discountValue}`
|
|
// url: `/pages/identify/pay_order?couponId=${item.id}&couponMoney=${item.discountValue}`
|
|
|
// })
|
|
// })
|
|
|
// uni.$emit('returnData', item)
|
|
// uni.$emit('returnData', item)
|
|
|
- // uni.navigateBack({
|
|
|
|
|
- // delta: 1
|
|
|
|
|
- // })
|
|
|
|
|
} else {
|
|
} else {
|
|
|
uni.switchTab({
|
|
uni.switchTab({
|
|
|
url: '/pages/identify/identify'
|
|
url: '/pages/identify/identify'
|
|
@@ -108,141 +79,88 @@
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
- .coupon_page {
|
|
|
|
|
- width: 100vw;
|
|
|
|
|
- height: 100vh;
|
|
|
|
|
- background: linear-gradient(to bottom, #d7f3f9, #f3f3f3);
|
|
|
|
|
-
|
|
|
|
|
- .coupon_box {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- // overflow-y: auto;
|
|
|
|
|
- padding: 20rpx;
|
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
- .none {
|
|
|
|
|
- // width: 100%;
|
|
|
|
|
- // height: 100%;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- padding-top: 300rpx;
|
|
|
|
|
|
|
+.coupon-page {
|
|
|
|
|
+ min-height: 100vh;
|
|
|
|
|
+ background: linear-gradient(to bottom, #d7f3f9, #f3f3f3);
|
|
|
|
|
+
|
|
|
|
|
+ .list-container {
|
|
|
|
|
+ padding: 20rpx 24rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .coupon-card {
|
|
|
|
|
+ margin-bottom: 24rpx;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ border-radius: 16rpx;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ transition: opacity 0.3s;
|
|
|
|
|
+
|
|
|
|
|
+ .left-content {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ padding: 30rpx;
|
|
|
|
|
+ border-right: 2rpx dashed #eee;
|
|
|
|
|
+
|
|
|
|
|
+ .coupon-title {
|
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ margin-bottom: 10rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .coupon-time {
|
|
|
|
|
+ font-size: 22rpx;
|
|
|
|
|
+ color: #999;
|
|
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .coupon {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- // position: absolute;
|
|
|
|
|
- padding: 10rpx;
|
|
|
|
|
- // top: 50%;
|
|
|
|
|
- // left: 50%;
|
|
|
|
|
- // transform: translate(-50%, -50%);
|
|
|
|
|
- overflow-y: auto;
|
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
-
|
|
|
|
|
- .item {
|
|
|
|
|
- width: 92%;
|
|
|
|
|
- height: 120px;
|
|
|
|
|
- background-image: url(../../static/index/item.png);
|
|
|
|
|
- // background-repeat: no-repeat;
|
|
|
|
|
- background-size: cover;
|
|
|
|
|
- /* 背景图宽度自适应 */
|
|
|
|
|
- background-position: center;
|
|
|
|
|
- /* 背景图居中 */
|
|
|
|
|
- padding: 10rpx 25rpx;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- // justify-content: space-around;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- margin-bottom: 10rpx;
|
|
|
|
|
|
|
+ .right-action {
|
|
|
|
|
+ width: 220rpx;
|
|
|
|
|
+ padding: 20rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ background-color: #E8FBFA;
|
|
|
|
|
+
|
|
|
|
|
+ .amount-box {
|
|
|
|
|
+ color: #03C8BE;
|
|
|
|
|
+ margin-bottom: 16rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .unit {
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ margin-right: 4rpx;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- .left {
|
|
|
|
|
- color: #ff0000;
|
|
|
|
|
- margin-left: 20px;
|
|
|
|
|
- font-size: 35rpx;
|
|
|
|
|
|
|
+ .val {
|
|
|
|
|
+ font-size: 50rpx;
|
|
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
}
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .action-btn {
|
|
|
|
|
+ width: 140rpx;
|
|
|
|
|
+ height: 54rpx;
|
|
|
|
|
+ border-radius: 40rpx;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
|
|
|
- .right {
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- margin-left: 100rpx;
|
|
|
|
|
- padding-top: 120rpx;
|
|
|
|
|
- font-size: 28rpx;
|
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
|
|
+ &.active {
|
|
|
|
|
+ background-color: #03C8BE;
|
|
|
|
|
+ color: #fff;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .one_btn {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- top: 10%;
|
|
|
|
|
- right: 2%;
|
|
|
|
|
- width: 100rpx;
|
|
|
|
|
- height: 210rpx;
|
|
|
|
|
- border-radius: 20rpx;
|
|
|
|
|
- background-color: #fff9cb;
|
|
|
|
|
- font-size: 46rpx;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- writing-mode: vertical-rl; /* 文字从上到下竖排,从右到左 */
|
|
|
|
|
- image {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ &.disabled {
|
|
|
|
|
+ background-color: transparent;
|
|
|
|
|
+ border: 2rpx solid #03C8BE;
|
|
|
|
|
+ color: #03C8BE;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
- // .coupon {
|
|
|
|
|
- // width: 95%;
|
|
|
|
|
- // height: 200rpx;
|
|
|
|
|
- // box-sizing: border-box;
|
|
|
|
|
- // background-color: #2cb8d4;
|
|
|
|
|
- // border-radius: 10rpx;
|
|
|
|
|
- // padding: 20rpx;
|
|
|
|
|
-
|
|
|
|
|
- // .top {
|
|
|
|
|
- // display: flex;
|
|
|
|
|
- // width: 100%;
|
|
|
|
|
- // height: 100%;
|
|
|
|
|
- // align-items: center;
|
|
|
|
|
-
|
|
|
|
|
- // .left {
|
|
|
|
|
- // width: 20%;
|
|
|
|
|
- // height: 100rpx;
|
|
|
|
|
- // font-size: 40rpx;
|
|
|
|
|
- // color: #ffffff;
|
|
|
|
|
- // margin-right: 30rpx;
|
|
|
|
|
- // display: flex;
|
|
|
|
|
- // align-items: center;
|
|
|
|
|
-
|
|
|
|
|
- // text {
|
|
|
|
|
- // font-size: 80rpx;
|
|
|
|
|
- // }
|
|
|
|
|
- // }
|
|
|
|
|
-
|
|
|
|
|
- // .center {
|
|
|
|
|
- // width: 30%;
|
|
|
|
|
- // height: 100rpx;
|
|
|
|
|
- // font-size: 50rpx;
|
|
|
|
|
- // color: #ffffff;
|
|
|
|
|
- // display: flex;
|
|
|
|
|
- // align-items: center;
|
|
|
|
|
- // }
|
|
|
|
|
-
|
|
|
|
|
- // .right {
|
|
|
|
|
- // height: 100%;
|
|
|
|
|
- // color: #666;
|
|
|
|
|
- // padding-top: 120rpx;
|
|
|
|
|
-
|
|
|
|
|
- // .btn {
|
|
|
|
|
- // width: 100px;
|
|
|
|
|
- // height: 30px;
|
|
|
|
|
- // text-align: center;
|
|
|
|
|
- // align-items: center;
|
|
|
|
|
- // border-radius: 10px;
|
|
|
|
|
- // background: linear-gradient(to bottom, #ead3ba, #ddbe96);
|
|
|
|
|
- // line-height: 30px;
|
|
|
|
|
- // margin: 0px auto 10px;
|
|
|
|
|
- // }
|
|
|
|
|
- // }
|
|
|
|
|
- // }
|
|
|
|
|
- // }
|
|
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|