huangzhe 3 年之前
父節點
當前提交
f21bdc1152

+ 167 - 2
src/components/page-component/goods/bd-coupon.vue

xqd xqd xqd
@@ -23,7 +23,7 @@
                 </view>
                 <scroll-view :scroll-y="true" class="f-scroll">
                     <view class="f-scroll-content">
-                        <view class="f-item dir-top-nowrap" v-for="(item, index) in coupons" :key="index">
+                        <!-- <view class="f-item dir-top-nowrap" v-for="(item, index) in coupons" :key="index">
                             <view class="f-item-top">
                                 <image :src="couponImg[item.is_receive == 0 ? 'coupon_enabled' : 'coupon_disabled']"></image>
                                 <view class="dir-left-nowrap main-between cross-center">
@@ -63,7 +63,56 @@
                                     </block>
                                 </text>
                             </view>
-                        </view>
+                        </view> -->
+						<view class="list">
+							<view v-for="(item,index) in coupons" :key="index">
+								<view class="item">
+									<!-- <image src="https://t17.9026.com/web/statics/image/index/img-coupon-bg-0.png" ></image> -->
+									<view class="list-item">
+										<view class="item-left dir-top-nowrap main-center">
+											<view class="coupon-price t-omit" v-if="item.type == 2">
+												¥{{item.sub_price}}</view>
+											<view class="coupon-price t-omit" v-else>{{item.discount}}折</view>
+											<view style="font-size: 10px" class="t-omit" v-if="item.coupon_min_price > 0">
+												满{{item.coupon_min_price}}可用</view>
+											<view style="font-size: 10px" v-else>无门槛使用</view>
+											<view style="font-size: 10px" v-if="item.discount_limit">
+												优惠上限:¥{{item.discount_limit}}</view>
+										</view>
+										<view class="item-right">
+											<view class="item-name t-omit hjx-tc-222 hjx-tw-600">{{item.name}}</view>
+											<view v-if="item.appoint_type == 3">全场通用</view>
+											<view v-else-if="item.appoint_type == 4">仅限当面付活动使用</view>
+											<view v-else-if="item.appoint_type == 5">仅限礼品卡使用</view>
+											<view v-else>限品类</view>
+											<view class="t-omit t-small-color time-area hjx-tc-B19D60">{{item.begin_time.split(' ')[0]}} - {{item.end_time.split(' ')[0]}}</view>
+										</view>
+										<view class="item-right-btn cross-center" v-if="item.is_receive == `0`">
+											<view class="btn" @click="receive(item.id, index)">{{item.is_receive == 0 ? '立即领取' : '已领取'}}</view>
+										</view>
+									</view>
+									<view class="coupon-info" @click="toDetail(item.id)">
+										<view v-if="item.expire_type == `1`">领取后{{item.expire_day}}天过期</view>
+										<view v-if="item.expire_type == `2`">有效日期: {{item.begin_time}} - {{item.end_time}}</view>
+										<view class="t-omit" v-if="item.appoint_type == `3`">适用范围:全场通用</view>
+										<view class="t-omit" v-else-if="item.appoint_type == `4`">适用范围:仅限当面付活动使用</view>
+										<view class="t-omit" v-else-if="item.appoint_type == `5`">适用范围:仅限礼品卡使用</view>
+										<view class="t-omit" v-else-if="item.appoint_type == `2`">
+									  <text>适用商品:</text>
+											<text v-for="(goods,index) in item.goods" :key="goods.id">
+												<text>{{index != 0 ? '、' : ''}}{{goods.name}}</text>
+											</text>
+									 </view>
+										<view class="t-omit" v-else-if="item.appoint_type == `1`">
+											<text>适用分类:</text>
+											<text v-for="(cat,index) in item.cat" :key="cat.id">
+												<text>{{index != 0 ? '、' : ''}}{{cat.name}}</text>
+											</text>
+										</view>
+									</view>
+								</view>
+							</view>
+						</view>
                     </view>
                 </scroll-view>
             </view>
@@ -334,4 +383,120 @@ export default {
     }
 }
 
+.coupon-info {
+		margin: 0 auto;
+		width: 656rpx;
+		height: #{115rpx};
+		border-top: 1px solid #EAEAEA;
+		padding: #{20rpx} #{25rpx};
+		font-size: #{22rpx};
+		color: #777;
+	}
+
+.list {
+		background-color: #f7f7f7;
+	}
+
+	.item {
+		height: auto;
+		width: 100%;
+		background-image: url(https://t17.9026.com/web/statics/image/index/img-coupon-bg-0.png);
+		background-size: 100% 100%;
+		margin-bottom: 20rpx;
+	}
+
+	.item image {
+		width: 100%;
+		height: 100%;
+	}
+
+	.list-item {
+		height: #{181rpx};
+		width: 100%;
+		position: relative;
+	}
+
+	.item-left {
+		position: absolute;
+		left: 0;
+		top: 0;
+		height: 100%;
+		width: #{190rpx};
+		text-align: center;
+		font-size: #{24rpx};
+		color: #B19D60;
+		padding-top: #{8rpx};
+	}
+
+	.coupon-price {
+		font-size: #{36rpx};
+		padding-bottom: #{16rpx};
+		font-weight: 600;
+	}
+
+	.item-right {
+		position: absolute;
+		left: #{220rpx};
+		top: #{30rpx};
+		width: 45%;
+		color: #666666;
+		font-size: #{24rpx};
+	}
+
+	.item-name {
+		font-size: #{32rpx};
+	}
+
+	.item-right view {
+		margin-bottom: #{4rpx};
+	}
+
+	.item-right-btn {
+		position: absolute;
+		right: 0;
+		top: 0;
+		width: 20%;
+		height: 100%;
+
+		.btn {
+			width: 118rpx;
+			height: 52rpx;
+			border: 1rpx solid #B19D60;
+			border-radius: 26rpx;
+			font-size: 22rpx;
+			font-weight: 500;
+			color: #B19D60;
+			text-align: center;
+			line-height: 52rpx;
+			box-sizing: border-box;
+		}
+	}
+
+	.coupon-footer {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		width: 100%;
+		height: #{100rpx};
+		line-height: #{100rpx};
+		text-align: center;
+		background-color: #fff;
+		z-index: 2;
+	}
+
+	.coupon-footer.iphone_x {
+		height: #{150rpx};
+		padding-bottom: #{50rpx};
+	}
+
+	.list-item .status {
+		position: absolute;
+		top: 0;
+		right: 0;
+		height: #{98rpx};
+		width: #{140rpx};
+		z-index: 2;
+	}
+
 </style>

+ 0 - 5
src/pages/coupon/index/index.vue

xqd
@@ -5,11 +5,6 @@
         <view v-else class="list">
 	        <view @click="toDetail(item.id)" v-for="item in list" :key="item.id">
 	            <view class="list-item">
-					<!-- <image src="https://shop.9026.com/web/statics/img/mall/coupon/img-coupon-bg-0.png" v-if="activeTab == 1"></image>
-					<image src="https://shop.9026.com/web/statics/img/mall/coupon/img-coupon-bg-1.png" v-else></image>
-	                <image class="status" src="https://shop.9026.com/web/statics/img/mall/coupon/img-coupon-status-icon-1.png" v-if="activeTab == 2"></image>
-	                <image class="status" src="https://shop.9026.com/web/statics/img/mall/coupon/img-coupon-status-icon-2.png" v-if="activeTab == 3"></image> -->
-					
 					<image src="https://t17.9026.com/web/statics/image/index/img-coupon-bg-0.png" v-if="activeTab == 1"></image>
 					<image src="https://t17.9026.com/web/statics/image/index/img-coupon-bg-0.png" v-else></image>
 					<image class="status" src="https://shop.9026.com/web/statics/img/mall/coupon/img-coupon-status-icon-1.png" v-if="activeTab == 2"></image>

+ 371 - 329
src/pages/coupon/list/list.vue

xqd
@@ -1,355 +1,397 @@
 <template>
-    <app-layout>
-        <view class="page">
-            <view class="coupon-item" v-for="item in list" :key="item.id">
-                <!-- <image class="coupon-bg" :src="couponImg[item.is_receive == '0' ? 'coupon_enabled' : 'coupon_disabled']" ></image> -->
-				<image class="coupon-bg" src="https://t17.9026.com/web/statics/image/index/img-coupon-bg-0.png" ></image>
-                <view class="coupon-left dir-left-nowrap" @click="toDetail(item.id)">
-                    <view class="coupon-price t-omit box-grow-0">
-                        <template v-if="item.type == 2">
-                            <text>{{item.sub_price | keepNumbers}}</text>
-                        </template>
-                        <template v-else>
-                            <text>{{item.discount | keepNumbers}}</text>
+	<app-layout>
+		<view class="page">
+			<view class="list">
+				<view v-for="item in list" :key="item.id">
+					<view class="item">
+						<!-- <image src="https://t17.9026.com/web/statics/image/index/img-coupon-bg-0.png" ></image> -->
+						<view class="list-item">
+							<view class="item-left dir-top-nowrap main-center">
+								<view class="coupon-price t-omit" v-if="item.type == 2">
+									¥{{item.sub_price | keepNumbers}}</view>
+								<view class="coupon-price t-omit" v-else>{{item.discount | keepNumbers}}折</view>
+								<view style="font-size: 10px" class="t-omit" v-if="item.coupon_min_price > 0">
+									满{{item.coupon_min_price | keepNumbers}}可用</view>
+								<view style="font-size: 10px" v-else>无门槛使用</view>
+								<view style="font-size: 10px" v-if="item.discount_limit">
+									优惠上限:¥{{item.discount_limit | keepNumbers}}</view>
+							</view>
+							<view class="item-right">
+								<view class="item-name t-omit hjx-tc-222 hjx-tw-600">{{item.name}}</view>
+								<view v-if="item.appoint_type == 3">全场通用</view>
+								<view v-else-if="item.appoint_type == 4">仅限当面付活动使用</view>
+								<view v-else-if="item.appoint_type == 5">仅限礼品卡使用</view>
+								<view v-else>限品类</view>
+								<!-- <view class="t-omit t-small-color time-area hjx-tc-B19D60">{{item.start_time.split(' ')[0]}} - {{item.end_time.split(' ')[0]}}</view> -->
+							</view>
+							<view class="item-right-btn cross-center" v-if="item.is_receive == `0`">
+								<view class="btn">立即领取</view>
+							</view>
+						</view>
+						<view class="coupon-info" @click="toDetail(item.id)">
+							<view v-if="item.expire_type == `1`">领取后{{item.expire_day}}天过期</view>
+							<view v-if="item.expire_type == `2`">有效日期: {{item.begin_time}} - {{item.end_time}}</view>
+							<view class="t-omit" v-if="item.appoint_type == `3`">适用范围:全场通用</view>
+							<view class="t-omit" v-else-if="item.appoint_type == `4`">适用范围:仅限当面付活动使用</view>
+							<view class="t-omit" v-else-if="item.appoint_type == `5`">适用范围:仅限礼品卡使用</view>
+							<view class="t-omit" v-else-if="item.appoint_type == `2`">
+						  <text>适用商品:</text>
+								<text v-for="(goods,index) in item.goods" :key="goods.id">
+									<text>{{index != 0 ? '、' : ''}}{{goods.name}}</text>
+								</text>
+						 </view>
+							<view class="t-omit" v-else-if="item.appoint_type == `1`">
+								<text>适用分类:</text>
+								<text v-for="(cat,index) in item.cat" :key="cat.id">
+									<text>{{index != 0 ? '、' : ''}}{{cat.name}}</text>
+								</text>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
 
-                            折
-                        </template>
-                    </view>
-                    <view class="box-grow-1 dir-top-nowrap main-center coupon-content">
-                        <view class="t-omit" style="width:auto;display:block;">{{item.name}}</view>
-                        <view class="min_price t-omit" v-if="item.min_price > 0">满{{item.min_price | keepNumbers}}可用</view>
-                        <view v-else>无门槛使用</view>
-                        <view v-if="item.discount_limit">优惠上限:¥{{item.discount_limit | keepNumbers}}</view>
-                    </view>
-                </view>
-                <view class="use-btn" @click="receive(item)" v-if="item.is_receive == `0`">
-                    <view class="use" style="text-align: center">立即领取</view>
-                </view>
-                <button class="use use-btn" style="color:#b4b4b4;" v-else-if="item.is_receive == `1`">已领取</button>
-                <view class="coupon-info" @click="toDetail(item.id)">
-                    <view v-if="item.expire_type == `1`">领取后{{item.expire_day}}天过期</view>
-                    <view v-if="item.expire_type == `2`">有效日期: {{item.begin_time}} - {{item.end_time}}</view>
-                    <view class="t-omit" v-if="item.appoint_type == `3`">适用范围:全场通用</view>
-                    <view class="t-omit" v-else-if="item.appoint_type == `4`">适用范围:仅限当面付活动使用</view>
-                    <view class="t-omit" v-else-if="item.appoint_type == `5`">适用范围:仅限礼品卡使用</view>
-                    <view class="t-omit" v-else-if="item.appoint_type == `2`">
-                        <text>适用商品:</text>
-                        <text v-for="(goods,index) in item.goods" :key="goods.id">
-                            <text>{{index != 0 ? '、' : ''}}{{goods.name}}</text>
-                        </text>
-                    </view>
-                    <view class="t-omit" v-else-if="item.appoint_type == `1`">
-                        <text>适用分类:</text>
-                        <text v-for="(cat,index) in item.cat" :key="cat.id">
-                            <text>{{index != 0 ? '、' : ''}}{{cat.name}}</text>
-                        </text>
-                    </view>
-                </view>
-            </view>
-			
 			<app-no-goods v-if="list.length === 0" :title="'暂无可领取优惠券'" background="#f7f7f7"></app-no-goods>
-        </view>
-    </app-layout>
+		</view>
+	</app-layout>
 </template>
 
 <script>
-import {mapGetters, mapState} from "vuex";
-import appNoGoods from '@/components/page-component/app-no-goods/app-no-goods.vue';
-    export default {
-        data() {
-            return {
-                list: [
-					   {
-					      "app_share_pic": "https://swdzshopv4.oss-cn-chengdu.aliyuncs.com/uploads/mall10000/20211129/12b320e83a7b82333ed46041acd3a4d2.jpg",
-					      "app_share_title": "分享",
-					      "appoint_type": "3",
-					      "begin_time": "",
-					      "can_receive_count": "-1",
-					      "cat": [],
-					      "couponGoods": [],
-					      "created_at": "2021-11-30 15:31:16",
-					      "deleted_at": "0000-00-00 00:00:00",
-					      "desc": "",
-					      "discount": "10.0",
-					      "discount_limit": null,
-					      "end_time": "",
-					      "expire_day": "1",
-					      "expire_type": "1",
-					      "goods": [],
-					      "id": "3",
-					      "is_delete": "0",
-					      "is_member": "0",
-					      "is_receive": "0",
-					      "mall_id": "10000",
-					      "min_price": "20000.00",
-					      "name": "满减",
-					      "page_url": "/pages/goods/list?coupon_id=3",
-					      "pic_url": "10",
-					      "rule": "",
-					      "share_type": 4,
-					      "sort": "3",
-					      "sub_price": "200.00",
-					      "total_count": "0",
-					      "type": "2",
-					      "updated_at": "2021-11-30 19:55:45",
-					      "use_obtain": "1"
-					    },
-					    {
-					      "app_share_pic": "",
-					      "app_share_title": "",
-					      "appoint_type": "3",
-					      "begin_time": "",
-					      "can_receive_count": "-1",
-					      "cat": [],
-					      "couponGoods": [],
-					      "created_at": "2021-11-30 14:22:26",
-					      "deleted_at": "0000-00-00 00:00:00",
-					      "desc": "",
-					      "discount": "10.0",
-					      "discount_limit": null,
-					      "end_time": "",
-					      "expire_day": "1",
-					      "expire_type": "1",
-					      "goods": [],
-					      "id": "1",
-					      "is_delete": "0",
-					      "is_member": "0",
-					      "is_receive": "0",
-					      "mall_id": "10000",
-					      "min_price": "131.00",
-					      "name": "优惠卷",
-					      "page_url": "/pages/goods/list?coupon_id=1",
-					      "pic_url": "10",
-					      "rule": "",
-					      "share_type": 4,
-					      "sort": "100",
-					      "sub_price": "11.00",
-					      "total_count": "-1",
-					      "type": "2",
-					      "updated_at": "2021-12-06 16:00:04",
-					      "use_obtain": "0"
-					    }
+	import {
+		mapGetters,
+		mapState
+	} from "vuex";
+	import appNoGoods from '@/components/page-component/app-no-goods/app-no-goods.vue';
+	export default {
+		data() {
+			return {
+				list: [{
+						"app_share_pic": "https://swdzshopv4.oss-cn-chengdu.aliyuncs.com/uploads/mall10000/20211129/12b320e83a7b82333ed46041acd3a4d2.jpg",
+						"app_share_title": "分享",
+						"appoint_type": "3",
+						"begin_time": "",
+						"can_receive_count": "-1",
+						"cat": [],
+						"couponGoods": [],
+						"created_at": "2021-11-30 15:31:16",
+						"deleted_at": "0000-00-00 00:00:00",
+						"desc": "",
+						"discount": "10.0",
+						"discount_limit": null,
+						"end_time": "",
+						"expire_day": "1",
+						"expire_type": "1",
+						"goods": [],
+					 "id": "3",
+						"is_delete": "0",
+						"is_member": "0",
+						"is_receive": "0",
+						"mall_id": "10000",
+						"min_price": "20000.00",
+						"name": "满减",
+						"page_url": "/pages/goods/list?coupon_id=3",
+						"pic_url": "10",
+						"rule": "",
+						"share_type": 4,
+						"sort": "3",
+						"sub_price": "200.00",
+						"total_count": "0",
+						"type": "2",
+						"updated_at": "2021-11-30 19:55:45",
+						"use_obtain": "1"
+					},
+					{
+						"app_share_pic": "",
+						"app_share_title": "",
+						"appoint_type": "3",
+						"begin_time": "",
+						"can_receive_count": "-1",
+						"cat": [],
+						"couponGoods": [],
+						"created_at": "2021-11-30 14:22:26",
+						"deleted_at": "0000-00-00 00:00:00",
+						"desc": "",
+						"discount": "10.0",
+						"discount_limit": null,
+						"end_time": "",
+						"expire_day": "1",
+					 "expire_type": "1",
+						"goods": [],
+						"id": "1",
+						"is_delete": "0",
+						"is_member": "0",
+						"is_receive": "0",
+						"mall_id": "10000",
+						"min_price": "131.00",
+						"name": "优惠卷",
+						"page_url": "/pages/goods/list?coupon_id=1",
+						"pic_url": "10",
+						"rule": "",
+						"share_type": 4,
+						"sort": "100",
+						"sub_price": "11.00",
+						"total_count": "-1",
+						"type": "2",
+						"updated_at": "2021-12-06 16:00:04",
+						"use_obtain": "0"
+					}
 				],
-                loading: false,
-                page: 2,
-            }
-        },
-		components:{
+				loading: false,
+				page: 2,
+			}
+		},
+		components: {
 			appNoGoods
 		},
-        computed: {
-            ...mapState({
-                couponImg: state => state.mallConfig.__wxapp_img.coupon,
-            }),
-            ...mapGetters({
-                userInfo: 'user/info',
-            })
-        },
-        methods: {
-            getList() {
-                let that = this;
-                that.$request({
-                    url: that.$api.coupon.list,
-                    method: 'get',
-                }).then(response => {
-                    uni.hideLoading();
-                    that.$hideLoading();
-                    if (response.code === 0) {
-                        that.list = response.data.list;
-                    } else {
-                        uni.showToast({
-                            title: response.msg,
-                            icon: 'none',
-                            duration: 1000
-                        });
-                    }
-                }).catch(() => {
-                    uni.hideLoading();
-                    that.$hideLoading();
-                });
-            },
-            getMore() {
-                let that = this;
-                uni.showLoading({
-                    title: '加载中...'
-                });
-                that.$request({
-                    url: that.$api.coupon.list,
-                    data: {
-                        page: that.page
-                    },
-                }).then(e => {
-                    uni.hideLoading();
-                    if (e.code == 0) {
-                        if (e.data.list.length > 0) {
-                            that.list = that.list.concat(e.data.list);
-                            that.page++;
-                        }
-                    } else {
-                        uni.showToast({
-                            title: e.msg,
-                            icon: 'none',
-                            duration: 1000
-                        });
-                    }
-                }).catch(e => {
-                    uni.hideLoading();
-                });
-            },
-            toDetail(id) {
-                uni.navigateTo({
-                    url: '/pages/coupon/details/details?id=' + id
-                });
-            },
-            receive(coupon) {
+		computed: {
+			...mapState({
+				couponImg: state => state.mallConfig.__wxapp_img.coupon,
+			}),
+			...mapGetters({
+				userInfo: 'user/info',
+			})
+		},
+		methods: {
+			getList() {
+				let that = this;
+				that.$request({
+					url: that.$api.coupon.list,
+					method: 'get',
+				}).then(response => {
+					uni.hideLoading();
+					that.$hideLoading();
+					if (response.code === 0) {
+						that.list = response.data.list;
+					} else {
+						uni.showToast({
+							title: response.msg,
+							icon: 'none',
+							duration: 1000
+						});
+					}
+				}).catch(() => {
+					uni.hideLoading();
+					that.$hideLoading();
+				});
+			},
+			getMore() {
+				let that = this;
+				uni.showLoading({
+					title: '加载中...'
+				});
+				that.$request({
+					url: that.$api.coupon.list,
+					data: {
+						page: that.page
+					},
+				}).then(e => {
+					uni.hideLoading();
+					if (e.code == 0) {
+						if (e.data.list.length > 0) {
+							that.list = that.list.concat(e.data.list);
+							that.page++;
+						}
+					} else {
+						uni.showToast({
+							title: e.msg,
+							icon: 'none',
+							duration: 1000
+						});
+					}
+				}).catch(e => {
+					uni.hideLoading();
+				});
+			},
+			toDetail(id) {
+				uni.navigateTo({
+					url: '/pages/coupon/details/details?id=' + id
+				});
+			},
+			receive(coupon) {
 
-                let that = this;
-                if(that.loading) {
-                    return false
-                }
-                that.loading = true;
-                uni.showLoading({
-                    title: '领取中...'
-                });
-                that.$request({
-                    url: that.$api.coupon.receive,
-                    data: {
-                        coupon_id: coupon.id
-                    },
-                }).then(response => {
-                    that.loading = false;
-                    uni.hideLoading();
-                    if (response.code === 0) {
-                        setTimeout(function (row) {
-                            that.$store.dispatch('page/actionSetCoupon', {
-                                list: [Object.assign(coupon, response.data)],
-                                type: 'receive'
-                            });
-                            that.getList();
-                        }, 200)
-                    } else {
-                        uni.showToast({
-                            title: response.msg,
-                            icon: 'none',
-                            duration: 1000
-                        });
-                        that.getList();
-                    }
-                }).catch(() => {
-                    uni.hideLoading();
-                    that.$event.on(that.$const.EVENT_USER_LOGIN).then(() => {
-                        that.receive(coupon);
-                    });
-                });
-            },
-        },
-        onLoad() { this.$commonLoad.onload();
+				let that = this;
+				if (that.loading) {
+					return false
+				}
+				that.loading = true;
+				uni.showLoading({
+					title: '领取中...'
+				});
+				that.$request({
+					url: that.$api.coupon.receive,
+					data: {
+						coupon_id: coupon.id
+					},
+				}).then(response => {
+					that.loading = false;
+					uni.hideLoading();
+					if (response.code === 0) {
+						setTimeout(function(row) {
+							that.$store.dispatch('page/actionSetCoupon', {
+								list: [Object.assign(coupon, response.data)],
+								type: 'receive'
+							});
+							that.getList();
+						}, 200)
+					} else {
+						uni.showToast({
+							title: response.msg,
+							icon: 'none',
+							duration: 1000
+						});
+						that.getList();
+					}
+				}).catch(() => {
+					uni.hideLoading();
+					that.$event.on(that.$const.EVENT_USER_LOGIN).then(() => {
+						that.receive(coupon);
+					});
+				});
+			},
+		},
+		onLoad() {
+			this.$commonLoad.onload();
 
-        },
-        onShow() {
-            this.$showLoading({
-                text: '加载中...'
-            });
-            this.getList();
-        },
-        filters: {
-            keepNumbers(n) {
-                return Number(n);
-            }
-        },
-        onReachBottom() {
-            this.getMore();
-        },
-    }
+		},
+		onShow() {
+			// this.$showLoading({
+			//     text: '加载中...'
+			// });
+			// this.getList();
+		},
+		filters: {
+			keepNumbers(n) {
+				return Number(n);
+			}
+		},
+		onReachBottom() {
+			this.getMore();
+		},
+	}
 </script>
 
 <style scoped lang="scss">
-    .page {
-        padding: #{20rpx} #{25rpx};
-        width: 100%;
-    }
+	.page {
+		padding: #{20rpx} #{25rpx};
+		width: 100%;
+	}
 
-    .coupon-item {
-        height: #{275rpx};
-        position: relative;
-        margin-bottom: #{20rpx};
-    }
+	
 
-    .coupon-bg {
-        height: #{275rpx};
-        width: 100%;
-    }
+	.coupon-info {
+		margin: 0 auto;
+		width: 656rpx;
+		height: #{115rpx};
+		border-top: 1px solid #EAEAEA;
+		padding: #{20rpx} #{25rpx};
+		font-size: #{22rpx};
+		color: #777;
+	}
 
-    .coupon-left {
-        position: absolute;
-        left: #{20rpx};
-        top: #{30rpx};
-        color: #282828;
-        width: 70%;
-    }
 
-    .coupon-left .coupon-price {
-        float: left;
-        max-width: 55%;
-        width: auto;
-        height: #{92rpx};
-        line-height: #{92rpx};
-        margin-right: #{20rpx};
-    }
+	.list {
+		background-color: #f7f7f7;
+	}
 
-    .coupon-left .min_price {
-        width: auto;
-    }
+	.item {
+		height: auto;
+		width: 100%;
+		background-image: url(https://t17.9026.com/web/statics/image/index/img-coupon-bg-0.png);
+		background-size: 100% 100%;
+		margin-bottom: 20rpx;
+	}
 
-    .coupon-price text {
-        font-size: #{60rpx};
-    }
+	.item image {
+		width: 100%;
+		height: 100%;
+	}
 
-    .use {
-        height: #{56rpx};
-        line-height: #{58rpx};
-        background-color: #fff;
-        width: #{160rpx};
-        border-radius: #{28rpx};
-        font-size: #{24rpx};
-        color: #caa76e;
-    }
+	.list-item {
+		height: #{181rpx};
+		width: 100%;
+		position: relative;
+	}
 
-    .use-btn {
-        height: #{55rpx};
-        width: #{160rpx};
-        border-radius: #{27.5rpx};
-        position: absolute;
-        right: #{20rpx};
-        border: 0;
-        top: #{48rpx};
-    }
+	.item-left {
+		position: absolute;
+		left: 0;
+		top: 0;
+		height: 100%;
+		width: #{190rpx};
+		text-align: center;
+		font-size: #{24rpx};
+		color: #B19D60;
+		padding-top: #{8rpx};
+	}
 
-    .coupon-info {
-        position: absolute;
-        top: #{160rpx};
-        left: 0;
-        right: 0;
-        height: #{115rpx};
-        background-color: #fff;
-        border: #{2rpx} solid #cfcfcf;
-        border-top: 0;
-        padding: #{20rpx} #{25rpx};
-        font-size: #{26rpx};
-        color: #666;
-        border-bottom-left-radius: #{15rpx};
-        border-bottom-right-radius: #{15rpx};
-    }
+	.coupon-price {
+		font-size: #{36rpx};
+		padding-bottom: #{16rpx};
+		font-weight: 600;
+	}
 
-    .discount_limit {
-        width: #{286rpx};
-        text-align: center;
-        color: #ffffff;
-    }
+	.item-right {
+		position: absolute;
+		left: #{220rpx};
+		top: #{30rpx};
+		width: 45%;
+		color: #666666;
+		font-size: #{24rpx};
+	}
 
-    .coupon-content {
-        font-size: $uni-font-size-general-one;
-        line-height: 1.1;
-    }
-	
+	.item-name {
+		font-size: #{32rpx};
+	}
+
+	.item-right view {
+		margin-bottom: #{4rpx};
+	}
+
+	.item-right-btn {
+		position: absolute;
+		right: 0;
+		top: 0;
+		width: 20%;
+		height: 100%;
+
+		.btn {
+			width: 118rpx;
+			height: 52rpx;
+			border: 1rpx solid #B19D60;
+			border-radius: 26rpx;
+			font-size: 22rpx;
+			font-weight: 500;
+			color: #B19D60;
+			text-align: center;
+			line-height: 52rpx;
+			box-sizing: border-box;
+		}
+	}
+
+	.coupon-footer {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		width: 100%;
+		height: #{100rpx};
+		line-height: #{100rpx};
+		text-align: center;
+		background-color: #fff;
+		z-index: 2;
+	}
+
+	.coupon-footer.iphone_x {
+		height: #{150rpx};
+		padding-bottom: #{50rpx};
+	}
+
+	.list-item .status {
+		position: absolute;
+		top: 0;
+		right: 0;
+		height: #{98rpx};
+		width: #{140rpx};
+		z-index: 2;
+	}
 </style>

+ 184 - 4
src/pages/order-submit/app-coupon-pick.vue

xqd xqd xqd xqd xqd xqd
@@ -31,7 +31,7 @@
                         <view style="color: #999999;">暂无可用优惠券</view>
                     </view>
                     <template v-else>
-                        <view v-for="(item,index) in list"
+                        <!-- <view v-for="(item,index) in list"
                               :key="index"
                               class="item">
                             <view class="dir-left-nowrap cross-center top"
@@ -67,7 +67,38 @@
                                 <view style="margin-bottom: 12rpx;">有效日期:{{item.start_time}}-{{item.end_time}}</view>
                                 <view>适用范围:{{item.coupon_data.appoint_type == 3 ? '全场通用' : item.coupon_data.appoint_type == 5?'礼品卡' : '限品类'}}</view>
                             </view>
-                        </view>
+                        </view> -->
+						<view  v-for="(item,index) in list" :key="index">
+						    <view class="list-item">
+								<image src="https://t17.9026.com/web/statics/image/index/img-coupon-bg-0.png" ></image>
+						        <view class="item-left dir-top-nowrap main-center">
+						            <view class="coupon-price t-omit" v-if="item.type == 2">¥{{item.sub_price}}</view>
+						            <view class="coupon-price t-omit" v-else>{{item.discount}}折</view>
+						            <view style="font-size: 10px" class="t-omit" v-if="item.coupon_min_price > 0">满{{item.coupon_min_price}}可用</view>
+						            <view style="font-size: 10px" v-else>无门槛使用</view>
+						            <view style="font-size: 10px" v-if="item.discount_limit">优惠上限:¥{{item.discount_limit}}</view>
+						        </view>
+						        <view class="item-right">
+						            <view class="item-name t-omit hjx-tc-222 hjx-tw-600" style="margin-bottom: 20rpx;">{{item.coupon_data.name}}</view>
+									<view v-if="item.coupon_data.appoint_type == 3">全场通用</view>
+									<view v-else-if="item.coupon_data.appoint_type == 4">仅限当面付活动使用</view>
+									<view v-else-if="item.coupon_data.appoint_type == 5">仅限礼品卡使用</view>
+									<view v-else>限品类</view>
+						            <view class="t-omit t-small-color time-area hjx-tc-B19D60" style="margin-top: 5rpx;">{{item.start_time.split(' ')[0]}} - {{item.end_time.split(' ')[0]}}</view>
+						        </view>
+								<view class="item-right-btn cross-center" >
+									<app-submit-checkbox
+									        :round="true"
+									        v-model="item.checked"
+											:value="item.checked"
+									        :theme="theme"
+									        border-color="#999999"
+									        @input="handleCouponChange"
+									        :sign="index">
+									</app-submit-checkbox>
+								</view>
+						    </view>
+						</view>
                     </template>
                 </template>
             </view>
@@ -80,7 +111,7 @@
                         <view style="color: #999999;">暂无不可用优惠券</view>
                     </view>
                     <template v-else>
-                        <view v-for="(item,index) in cantUseList"
+                        <!-- <view v-for="(item,index) in cantUseList"
                               :key="index"
                               class="item">
                             <view class="dir-left-nowrap cross-center top"
@@ -109,7 +140,27 @@
                                 <view style="margin-bottom: 12rpx;">有效日期:{{item.start_time}}-{{item.end_time}}</view>
                                 <view>适用范围:{{item.coupon_data.appoint_type == 3 ? '全场通用' : '限品类'}}</view>
                             </view>
-                        </view>
+                        </view> -->
+						<view  v-for="(item,index) in cantUseList" :key="index">
+						    <view class="list-item no-use" style="background-color: rgba(0,0,0,0.4);">
+								<image src="https://t17.9026.com/web/statics/image/index/img-coupon-bg-0.png" ></image>
+						        <view class="item-left dir-top-nowrap main-center">
+						            <view class="coupon-price t-omit" v-if="item.type == 2">¥{{item.sub_price}}</view>
+						            <view class="coupon-price t-omit" v-else>{{item.discount}}折</view>
+						            <view style="font-size: 10px" class="t-omit" v-if="item.coupon_min_price > 0">满{{item.coupon_min_price}}可用</view>
+						            <view style="font-size: 10px" v-else>无门槛使用</view>
+						            <view style="font-size: 10px" v-if="item.discount_limit">优惠上限:¥{{item.discount_limit}}</view>
+						        </view>
+						        <view class="item-right">
+						            <view class="item-name t-omit hjx-tc-222 hjx-tw-600" style="margin-bottom: 20rpx;">{{item.coupon_data.name}}</view>
+									<view v-if="item.coupon_data.appoint_type == 3">全场通用</view>
+									<view v-else-if="item.coupon_data.appoint_type == 4">仅限当面付活动使用</view>
+									<view v-else-if="item.coupon_data.appoint_type == 5">仅限礼品卡使用</view>
+									<view v-else>限品类</view>
+						            <view class="t-omit t-small-color time-area hjx-tc-B19D60" style="margin-top: 5rpx;">{{item.start_time.split(' ')[0]}} - {{item.end_time.split(' ')[0]}}</view>
+						        </view>
+						    </view>
+						</view>
                     </template>
                 </template>
             </view>
@@ -216,6 +267,7 @@
                         this.list[i].checked = parseInt(index) === parseInt(i);
                     }
                 }
+				console.log('this.list',this.list)
                 const formData = this.$store.state.orderSubmit.formData;
                 formData.list[this.mchIndex].user_coupon_id = data;
                 this.$store.commit('orderSubmit/mutSetFormData', formData);
@@ -328,4 +380,132 @@
             }
         }
     }
+	
+	
+	
+	.list {
+	    padding: #{32rpx} #{35rpx};
+	    background-color: #f7f7f7;
+	}
+	
+	.list-item {
+	    height: #{181rpx};
+	    width: 100%;
+	    position: relative;
+	    margin-bottom: #{20rpx};
+		border-radius: 8rpx;
+		overflow: hidden;
+	}
+	.no-use{
+		opacity: 0.4;
+		background-color: rgba(0,0,0,0.4);
+	}
+	
+	.list-item image {
+	    width: 100%;
+	    height: 100%;
+	}
+	
+	.item-left {
+	    position: absolute;
+	    left: 0;
+	    top: 0;
+	    height:100%;
+	    width: #{190rpx};
+	    text-align: center;
+	    font-size: #{24rpx};
+	    color: #B19D60;
+	    padding-top: #{8rpx};
+	}
+	
+	.coupon-price {
+	    font-size: #{36rpx};
+	    padding-bottom: #{16rpx};
+		font-weight: 600;
+	}
+	
+	.item-right {
+	    position: absolute;
+	    left: #{220rpx};
+	    top: #{30rpx};
+	    width: 45%;
+	    color: #666666;
+	    font-size: #{24rpx};
+	}
+	
+	.item-name {
+	    font-size: #{32rpx};
+	}
+	
+	.item-right view {
+	    margin-bottom: #{4rpx};
+	}
+	.item-right-btn{
+		position: absolute;
+		right: 0;
+		top: 0;
+		width: 11%;
+		height: 100%;
+		.btn{
+			width: 118rpx;
+			height: 52rpx;
+			border: 1rpx solid #B19D60;
+			border-radius: 26rpx;
+			font-size: 22rpx;
+			font-weight: 500;
+			color: #B19D60;
+			text-align: center;
+			line-height: 52rpx;
+			box-sizing: border-box;
+		}
+	}
+	.coupon-footer {
+	    position: fixed;
+	    bottom: 0;
+	    left: 0;
+	    right: 0;
+	    width: 100%;
+	    height: #{100rpx};
+	    line-height: #{100rpx};
+	    text-align: center;
+	    background-color: #fff;
+	    z-index: 2;
+	}
+	
+	.coupon-footer.iphone_x {
+	    height: #{150rpx};
+	    padding-bottom: #{50rpx};
+	}
+	
+	.list-item .status {
+	    position: absolute;
+	    top: 0;
+	    right: 0;
+	    height: #{98rpx};
+	    width: #{140rpx};
+	    z-index: 2;
+	}
+	
+	.tip {
+		margin-top: 20%;
+	    text-align: center;
+	    color: #686868;
+	}
+	
+	.t-omit {
+	    display: inline-block;
+	    white-space: nowrap;
+	    width: 100%;
+	    overflow: hidden;
+	    text-overflow: ellipsis;
+	}
+	
+	.t-omit-two {
+	    word-break: break-all;
+	    text-overflow: ellipsis;
+	    display: -webkit-box;
+	    -webkit-box-orient: vertical;
+	    -webkit-line-clamp: 2;
+	    overflow: hidden;
+	}
 </style>

+ 7 - 0
src/static/css/hxj.scss

xqd xqd
@@ -29,6 +29,10 @@
 	color: #AE8445;
 }
 
+.hjx-ts-18{
+	font-size: 18rpx;
+}
+
 .hjx-ts-21{
 	font-size: 21rpx;
 }
@@ -47,6 +51,9 @@
 .hjx-ts-30{
 	font-size: 30rpx;
 }
+.hjx-ts-32{
+	font-size: 32rpx;
+}
 .hjx-ts-34{
 	font-size: 34rpx;
 }