|
@@ -18,17 +18,19 @@
|
|
|
|
|
|
<view>
|
|
|
<view style="padding: 20rpx">店铺优惠</view>
|
|
|
- <view class="coupon" v-for="(item, index) in coupons" :key="index">
|
|
|
- <view class="coupon-left">
|
|
|
- <text class="coupon-text">¥</text>
|
|
|
- <text class="coupon-price">5</text>
|
|
|
- </view>
|
|
|
- <view class="coupon-center">
|
|
|
- <view class="coupon-center-user">{{ item.name }}</view>
|
|
|
- <view class="coupon-center-type">{{ item.description }}</view>
|
|
|
- </view>
|
|
|
- <view class="coupon-right">
|
|
|
- <view class="claimable" v-show="true" @click="handlerGetCoupon(item, index)">可领取</view>
|
|
|
+ <view class="coupon-box">
|
|
|
+ <view class="coupon" v-for="(item, index) in coupons" :key="index">
|
|
|
+ <view class="coupon-left">
|
|
|
+ <text class="coupon-text">¥</text>
|
|
|
+ <text class="coupon-price">5</text>
|
|
|
+ </view>
|
|
|
+ <view class="coupon-center">
|
|
|
+ <view class="coupon-center-user">{{ item.name }}</view>
|
|
|
+ <view class="coupon-center-type">{{ item.description }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="coupon-right">
|
|
|
+ <view class="claimable" v-show="true" @click="handlerGetCoupon(item, index)">可领取</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -36,224 +38,262 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-export default {
|
|
|
- props: {
|
|
|
- coupons: {
|
|
|
- type: Array,
|
|
|
- default: [],
|
|
|
+ import {
|
|
|
+ acceptConpons
|
|
|
+ } from "@/api/client/mine.js"
|
|
|
+ export default {
|
|
|
+ props: {
|
|
|
+ coupons: {
|
|
|
+ type: Array,
|
|
|
+ default: [],
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- list: [
|
|
|
- {
|
|
|
- id: 0,
|
|
|
- title: '30天低价',
|
|
|
- text: '当前商品价格为30天低价,比平时低48%',
|
|
|
- },
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- title: '店铺新客立减',
|
|
|
- text: '店铺新客购买该商品立减10元%',
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- title: '多件优惠',
|
|
|
- text: '该商品满2件享9.5折%',
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- close() {
|
|
|
- this.$emit('close', false);
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: [{
|
|
|
+ id: 0,
|
|
|
+ title: '30天低价',
|
|
|
+ text: '当前商品价格为30天低价,比平时低48%',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ title: '店铺新客立减',
|
|
|
+ text: '店铺新客购买该商品立减10元%',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ title: '多件优惠',
|
|
|
+ text: '该商品满2件享9.5折%',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
},
|
|
|
+ methods: {
|
|
|
+ close() {
|
|
|
+ this.$emit('close', false);
|
|
|
+ },
|
|
|
|
|
|
- // 点击领取优惠卷
|
|
|
- handlerGetCoupon() {
|
|
|
- uni.showToast({
|
|
|
- title: '没有',
|
|
|
- icon: 'none',
|
|
|
- });
|
|
|
+ // 点击领取优惠卷
|
|
|
+ handlerGetCoupon(item, index) {
|
|
|
+ console.log('@@@@item', item);
|
|
|
+ acceptConpons(item.id).then(res => {
|
|
|
+ console.log('@@@@res',res);
|
|
|
+ if (res.code == 200) {
|
|
|
+ uni.showToast({
|
|
|
+ title:'领取成功',
|
|
|
+ icon:'none'
|
|
|
+ })
|
|
|
+ this.close()
|
|
|
+ }else{
|
|
|
+ uni.showToast({
|
|
|
+ title:res.message,
|
|
|
+ icon:'none'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
-};
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.container {
|
|
|
- height: 900rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- .chelvc-flex {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- .detail {
|
|
|
- height: 100rpx;
|
|
|
- position: relative;
|
|
|
- border-bottom: 1rpx solid #f4f4f4;
|
|
|
- .closeIcon {
|
|
|
- position: absolute;
|
|
|
- top: 40rpx;
|
|
|
- right: 30rpx;
|
|
|
+ .container {
|
|
|
+ height: 900rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .chelvc-flex {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .content {
|
|
|
- padding: 10rpx 20rpx;
|
|
|
- .itemList {
|
|
|
- margin: 20rpx 0;
|
|
|
- .title {
|
|
|
- font-size: 30rpx;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 8rpx;
|
|
|
+ .detail {
|
|
|
+ height: 100rpx;
|
|
|
+ position: relative;
|
|
|
+ border-bottom: 1rpx solid #f4f4f4;
|
|
|
+
|
|
|
+ .closeIcon {
|
|
|
+ position: absolute;
|
|
|
+ top: 40rpx;
|
|
|
+ right: 30rpx;
|
|
|
}
|
|
|
- .text {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+
|
|
|
+ .itemList {
|
|
|
+ margin: 20rpx 0;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .placeholder {
|
|
|
- height: 30rpx;
|
|
|
- background-color: #f4f4f4;
|
|
|
- margin: 0 20rpx;
|
|
|
- }
|
|
|
- .coupon {
|
|
|
- height: 150rpx;
|
|
|
- margin: 10rpx 20rpx;
|
|
|
- background-color: #faeaea;
|
|
|
- border: 2rpx solid #eb8f8f;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .coupon-text {
|
|
|
- color: #e53f3f;
|
|
|
- font-size: 30rpx;
|
|
|
+
|
|
|
+ .placeholder {
|
|
|
+ height: 30rpx;
|
|
|
+ background-color: #f4f4f4;
|
|
|
+ margin: 0 20rpx;
|
|
|
}
|
|
|
- .coupon-left {
|
|
|
- flex: 1;
|
|
|
- text-align: center;
|
|
|
- .coupon-price {
|
|
|
- font-size: 60rpx;
|
|
|
- color: #ee1310;
|
|
|
- }
|
|
|
+
|
|
|
+ .coupon-box {
|
|
|
+ height: 400rpx;
|
|
|
+ overflow-y: auto;
|
|
|
}
|
|
|
- .coupon-center {
|
|
|
- flex: 4;
|
|
|
- color: #ee1310;
|
|
|
- .coupon-center-user {
|
|
|
+
|
|
|
+ .coupon {
|
|
|
+ height: 150rpx;
|
|
|
+ margin: 10rpx 20rpx;
|
|
|
+ background-color: #faeaea;
|
|
|
+ border: 2rpx solid #eb8f8f;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .coupon-text {
|
|
|
+ color: #e53f3f;
|
|
|
font-size: 30rpx;
|
|
|
- font-weight: 600;
|
|
|
}
|
|
|
- .coupon-center-type {
|
|
|
- font-size: 28rpx;
|
|
|
- margin-top: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .coupon-right {
|
|
|
- flex: 1.5;
|
|
|
- .claimable {
|
|
|
- width: 110rpx;
|
|
|
- height: 55rpx;
|
|
|
- background: #f39818;
|
|
|
- border-radius: 10rpx;
|
|
|
- color: #fff;
|
|
|
- font-size: 26rpx;
|
|
|
- line-height: 55rpx;
|
|
|
+
|
|
|
+ .coupon-left {
|
|
|
+ flex: 1;
|
|
|
text-align: center;
|
|
|
+
|
|
|
+ .coupon-price {
|
|
|
+ font-size: 60rpx;
|
|
|
+ color: #ee1310;
|
|
|
+ }
|
|
|
}
|
|
|
- .claimable-content {
|
|
|
- width: 160rpx;
|
|
|
- height: 80rpx;
|
|
|
- background-color: #de2d23;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #fff;
|
|
|
- border-radius: 10rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- margin-right: 10rpx;
|
|
|
+
|
|
|
+ .coupon-center {
|
|
|
+ flex: 4;
|
|
|
+ color: #ee1310;
|
|
|
+
|
|
|
+ .coupon-center-user {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .coupon-center-type {
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .coupon-right {
|
|
|
+ flex: 1.5;
|
|
|
+
|
|
|
+ .claimable {
|
|
|
+ width: 110rpx;
|
|
|
+ height: 55rpx;
|
|
|
+ background: #f39818;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 26rpx;
|
|
|
+ line-height: 55rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .claimable-content {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ background-color: #de2d23;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-// .coupon {
|
|
|
-// height: 300rpx;
|
|
|
-// display: flex;
|
|
|
-// font-size: 32rpx;
|
|
|
-// color: #f2110d;
|
|
|
-// border-radius: 10rpx;
|
|
|
-// margin-bottom: 25rpx;
|
|
|
-// padding: 20rpx 25rpx;
|
|
|
-// box-sizing: border-box;
|
|
|
-// background-color: #faeaea;
|
|
|
-// border: 2rpx solid #eb8b8b;
|
|
|
-
|
|
|
-// .coupon-left {
|
|
|
-// width: 10%;
|
|
|
-// height: 100%;
|
|
|
-
|
|
|
-// .coupon-left-price {
|
|
|
-// font-size: 65rpx;
|
|
|
-// }
|
|
|
-// }
|
|
|
-
|
|
|
-// .coupon-middle {
|
|
|
-// flex-direction: column;
|
|
|
-// justify-content: space-between;
|
|
|
-// align-items: flex-start;
|
|
|
-// width: 60%;
|
|
|
-// height: 100%;
|
|
|
-
|
|
|
-// .coupon-middle-user {
|
|
|
-// width: 100%;
|
|
|
-// font-size: 30rpx;
|
|
|
-// font-weight: 600;
|
|
|
-// }
|
|
|
-
|
|
|
-// .coupon-middle-type {
|
|
|
-// width: 100%;
|
|
|
-// font-size: 24rpx;
|
|
|
-// font-weight: 600;
|
|
|
-// opacity: 0.8;
|
|
|
-// }
|
|
|
-// }
|
|
|
-
|
|
|
-// .coupon-right {
|
|
|
-// flex-direction: column;
|
|
|
-// justify-content: space-between;
|
|
|
-// align-items: flex-start;
|
|
|
-// width: 25%;
|
|
|
-// height: 100%;
|
|
|
-
|
|
|
-// .coupon-right-time {
|
|
|
-// height: 100%;
|
|
|
-// flex-direction: column;
|
|
|
-// justify-content: space-between;
|
|
|
-// align-items: center;
|
|
|
-
|
|
|
-// .tip {
|
|
|
-// font-size: 30rpx;
|
|
|
-// font-weight: 600;
|
|
|
-// }
|
|
|
-
|
|
|
-// .time {
|
|
|
-// font-size: 24rpx;
|
|
|
-// font-weight: 600;
|
|
|
-// opacity: 0.8;
|
|
|
-// }
|
|
|
-// }
|
|
|
-
|
|
|
-// .coupon-right-get {
|
|
|
-// width: 80%;
|
|
|
-// background-color: #e8a87c;
|
|
|
-// height: 55rpx;
|
|
|
-// text-align: center;
|
|
|
-// line-height: 55rpx;
|
|
|
-// margin-top: 15rpx;
|
|
|
-// }
|
|
|
-// }
|
|
|
-// }
|
|
|
-</style>
|
|
|
+
|
|
|
+ // .coupon {
|
|
|
+ // height: 300rpx;
|
|
|
+ // display: flex;
|
|
|
+ // font-size: 32rpx;
|
|
|
+ // color: #f2110d;
|
|
|
+ // border-radius: 10rpx;
|
|
|
+ // margin-bottom: 25rpx;
|
|
|
+ // padding: 20rpx 25rpx;
|
|
|
+ // box-sizing: border-box;
|
|
|
+ // background-color: #faeaea;
|
|
|
+ // border: 2rpx solid #eb8b8b;
|
|
|
+
|
|
|
+ // .coupon-left {
|
|
|
+ // width: 10%;
|
|
|
+ // height: 100%;
|
|
|
+
|
|
|
+ // .coupon-left-price {
|
|
|
+ // font-size: 65rpx;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .coupon-middle {
|
|
|
+ // flex-direction: column;
|
|
|
+ // justify-content: space-between;
|
|
|
+ // align-items: flex-start;
|
|
|
+ // width: 60%;
|
|
|
+ // height: 100%;
|
|
|
+
|
|
|
+ // .coupon-middle-user {
|
|
|
+ // width: 100%;
|
|
|
+ // font-size: 30rpx;
|
|
|
+ // font-weight: 600;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .coupon-middle-type {
|
|
|
+ // width: 100%;
|
|
|
+ // font-size: 24rpx;
|
|
|
+ // font-weight: 600;
|
|
|
+ // opacity: 0.8;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .coupon-right {
|
|
|
+ // flex-direction: column;
|
|
|
+ // justify-content: space-between;
|
|
|
+ // align-items: flex-start;
|
|
|
+ // width: 25%;
|
|
|
+ // height: 100%;
|
|
|
+
|
|
|
+ // .coupon-right-time {
|
|
|
+ // height: 100%;
|
|
|
+ // flex-direction: column;
|
|
|
+ // justify-content: space-between;
|
|
|
+ // align-items: center;
|
|
|
+
|
|
|
+ // .tip {
|
|
|
+ // font-size: 30rpx;
|
|
|
+ // font-weight: 600;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .time {
|
|
|
+ // font-size: 24rpx;
|
|
|
+ // font-weight: 600;
|
|
|
+ // opacity: 0.8;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .coupon-right-get {
|
|
|
+ // width: 80%;
|
|
|
+ // background-color: #e8a87c;
|
|
|
+ // height: 55rpx;
|
|
|
+ // text-align: center;
|
|
|
+ // line-height: 55rpx;
|
|
|
+ // margin-top: 15rpx;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+</style>
|