|
|
@@ -1,46 +1,45 @@
|
|
|
<template>
|
|
|
- <div class="coupon-sel">
|
|
|
- <block>
|
|
|
- <div class="coupon-wrap">
|
|
|
- <div
|
|
|
- class="coupon-list"
|
|
|
- v-for="(item, index) in usableList"
|
|
|
- :key="index"
|
|
|
- @click="couponChange(item, index + 1)"
|
|
|
- >
|
|
|
- <div class="list-img">
|
|
|
- <template v-if="couponSelInx && couponSelInx == (index + 1)">
|
|
|
- <img :src="`${constant.imgUrl}/retail/coupon/is-check.png`" alt mode="widthFix" />
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <img :src="`${constant.imgUrl}/retail/coupon/no-check.png`" alt mode="widthFix" />
|
|
|
- </template>
|
|
|
+ <scroll-view class="coupon-sel" scroll-y>
|
|
|
+ <div class="coupon-wrap">
|
|
|
+ <div
|
|
|
+ class="coupon-list"
|
|
|
+ v-for="(item, index) in usableList"
|
|
|
+ :key="index"
|
|
|
+ @click="couponChange(item, index + 1)"
|
|
|
+ >
|
|
|
+ <!-- <div class="list-img">
|
|
|
+ <template v-if="couponSelInx && couponSelInx == (index + 1)">
|
|
|
+ <img :src="`${constant.imgUrl}/retail/coupon/is-check.png`" alt mode="widthFix" class="bg_img" />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <img :src="`${constant.imgUrl}/retail/coupon/no-check.png`" alt mode="widthFix" class="bg_img" />
|
|
|
+ </template>
|
|
|
+ </div> -->
|
|
|
+ <div class="list-det">
|
|
|
+ <img :src="couponSelInx && couponSelInx == (index + 1) ? `${constant.imgUrl}/retail/coupon/is-check.png` : `${constant.imgUrl}/retail/coupon/no-check.png`" alt mode="widthFix" class="bg_img" />
|
|
|
+ <div class="list-det-left">
|
|
|
+ <div class="price-wrap">
|
|
|
+ <span>¥</span>
|
|
|
+ <span class="price">{{ item.amount }}</span>
|
|
|
</div>
|
|
|
- <div class="list-det">
|
|
|
- <div class="list-det-left">
|
|
|
- <div class="price-wrap">
|
|
|
- <span>¥</span>
|
|
|
- <span class="price">{{ item.amount }}</span>
|
|
|
- </div>
|
|
|
- <div class="full-reduc app-size-28">满{{ item.miniCost }}可使用</div>
|
|
|
- </div>
|
|
|
- <div class="list-det-right">
|
|
|
- <div class="coupon-message">
|
|
|
- <div class="app-color-2">优惠券</div>
|
|
|
- <div>适用:全品类</div>
|
|
|
- <div>有效至:{{ item.endTime.substr(0, 10) }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="full-reduc app-size-28">满{{ item.miniCost }}可使用</div>
|
|
|
+ </div>
|
|
|
+ <div class="list-det-right">
|
|
|
+ <div class="coupon-message">
|
|
|
+ <div class="app-color-2">优惠券</div>
|
|
|
+ <div>适用:全品类</div>
|
|
|
+ <div>有效至:{{ item.endTime.substr(0, 10) }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <selectCouponItem v-for="(item, index) in unusableList" :key="index" :item="item"></selectCouponItem>
|
|
|
</div>
|
|
|
- <view class="footer_bar">
|
|
|
- <text>已优惠¥{{couponSum}}</text>
|
|
|
- <button class="admin-button-com middle blue" @click="ConfirmReachFn">确认</button>
|
|
|
- </view>
|
|
|
- </block>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <selectCouponItem v-for="(item, index) in unusableList" :key="index" :item="item"></selectCouponItem>
|
|
|
+ </div>
|
|
|
+ <view class="footer_bar">
|
|
|
+ <text>已优惠¥{{couponSum}}</text>
|
|
|
+ <button class="admin-button-com middle blue" @click="ConfirmReachFn">确认</button>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -65,10 +64,10 @@ export default {
|
|
|
computed: {
|
|
|
...mapGetters({ shopUser: "getShopUser" }),
|
|
|
usableList() {
|
|
|
- return this.list.filter(item => {return Number(item.miniCost) <= Number(this.option.price)})
|
|
|
+ return this.list.filter(item => {return Number(item.miniCost) <= Number(this.option.price) && item.take != 2})
|
|
|
},
|
|
|
unusableList() {
|
|
|
- return this.list.filter(item => {return Number(item.miniCost) > Number(this.option.price)})
|
|
|
+ return this.list.filter(item => {return Number(item.miniCost) > Number(this.option.price) || item.take == 2})
|
|
|
}
|
|
|
},
|
|
|
mounted() {},
|
|
|
@@ -142,15 +141,19 @@ export default {
|
|
|
.coupon-wrap {
|
|
|
margin: 0 20upx;
|
|
|
padding-top: 20px;
|
|
|
- .coupon-list {
|
|
|
- position: relative;
|
|
|
- margin-bottom: 6px;
|
|
|
.list-det {
|
|
|
width: 100%;
|
|
|
@include disFlex(center, space-between);
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 30upx;
|
|
|
+ &>.bg_img{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 94upx;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
.list-det-left {
|
|
|
padding: 20px 0 20px 36px;
|
|
|
width: 210px;
|
|
|
@@ -178,7 +181,6 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
.footer_bar{
|
|
|
width: 100%;
|
|
|
@@ -199,6 +201,9 @@ export default {
|
|
|
width: 120upx;
|
|
|
}
|
|
|
}
|
|
|
+.bg_img{
|
|
|
+ height: 94upx;
|
|
|
+}
|
|
|
// 修改uni-app组件
|
|
|
/deep/.uni-radio-input-checked {
|
|
|
background-color: $mainColor !important;
|