yicangzongtai_app_240321/pages/couponCenter/index.vue

<template>
	<view class="main">
		<navbar :config="config" backColor="#666"></navbar>
		<view class="list">
			<view class="item"  @click="checkCoupon(item,index)" v-for="(item,index) in listData" :key="index">
				<view class="item_tig">
					{{modeList[item.mode].text}}
				</view>
				<view class="item_c">
					<view class="item_c_l">
						<view>￥
						<text>{{item.face_value}}</text>
						</view>
					</view>
					<view class="item_c_img">
						<image src="/static/czd/line2.png" mode=""></image>
					</view>
					<view class="item_c_r">
						<view class="item_c_r_t">{{item.name}}</view>
						<view class="item_c_r_b">
							<text class="item_c_r_b_date">
								<text v-if="item.threshold&&item.has_threshold" class="condition">满￥{{item.threshold}}可用</text>
								<text v-if="!item.has_threshold" class="condition">无门槛</text>
								<view v-if="isMyCoupon || isCheck" class="tip2">{{item.expire_time}}到期</view>
								<view v-else class="tip2">{{item.end_time}}到期</view>
							</text>
							<view class="item_c_r_b_btn" v-if="isMyCoupon" @click="useTickets()">去使用</view>
							<view class="item_c_r_b_btn" v-else-if="isCheck" v-show="checkIndex===index">已选择</view>
							<view class="item_c_r_b_btn"  v-else @click="grabTickets(item.id)">立即抢</view>
							<!-- <button v-if="isMyCoupon" @click="useTickets()">去使用</button>
							<button v-else-if="isCheck" v-show="checkIndex===index" class="no-have">已选择</button>
							<button v-else @click="grabTickets(item.id)" class="no-have">立即抢</button> -->
						</view>
					</view>
				</view>
				<view class="item_line">
					<image src="/static/czd/line.png" mode=""></image>
				</view>
				<!-- <view class="item_b" @click="$set(item,'isOpen',!item.isOpen)">
					<view>仅产业园内食堂有效</view>
					<image :class="item.isOpen?'open':''" src="/static/czd/down.png" mode=""></image>
				</view> -->
				<view class="item_b" @click="$set(item,'isOpen',!item.isOpen)">
				  <text class="time">领券后{{item.expired_day}}天有效，记得及时使用噢</text>
				 <image :class="item.isOpen?'open':''" src="/static/czd/down.png" mode=""></image>
				 </view> 
				<view class="item_b" v-if="item.isOpen" >
				  <text>{{item.content}}</text>
				</view>
			</view>
			<!-- <view @click="checkCoupon(item,index)" v-for="(item,index) in listData" :key="index" class="item"
        :class="checkIndex===index?'checked':''">
        <view class="top">
          <view class="left">
            <view class="tag">{{modeList[item.mode].text}}</view>
            <text class="face-price">￥<text class="num">{{item.face_value}}</text></text>
          </view>
          <view class="right">
            <view class="tip">{{item.name}}</view>
            <view class="flex-box">
              <view>
                <text v-if="item.threshold" class="condition">满￥{{item.threshold}}可用</text>
                <text v-else class="condition">无门槛</text>
                <view v-if="isMyCoupon || isCheck" class="tip2">{{item.expire_time}}到期</view>
                <view v-else class="tip2">{{item.end_time}}到期</view>
              </view>
              <button v-if="isMyCoupon" @click="useTickets()">去使用</button>
              <button v-else-if="isCheck" v-show="checkIndex===index" class="no-have">已选择</button>
              <button v-else @click="grabTickets(item.id)" class="no-have">立即抢</button>
            </view>
          </view>
        </view>
        <view class="bottom" @click="$set(item,'isOpen',!item.isOpen)">
          <text class="time">领券后{{item.expired_day}}天有效，记得及时使用噢</text>
          <text class="iconfont2" :class="item.isOpen?'open':''">&#xe6cc;</text>
        </view>
        <view v-if="item.isOpen" class="desc">
          <text>{{item.content}}</text>
        </view>
      </view> -->
			<view>
				<noData v-if="listData.length<=0"></noData>
			</view>
		</view>
		<view v-if="isMyCoupon && loadStatus=='nomore'" class="go-center">没有更多券了！<text class="light"
				@click="goCouponCenter()">去领券中心领取＞</text></view>
		<u-loadmore v-else :status="loadStatus" />
	</view>
</template>

<script>
	import noData from "@/components/noData/nodata.vue"
	export default {
		components: {
			noData
		},
		data() {
			return {
				config: {
					back: true,
					title: '',
					color: '#1a1a1a',
					backgroundColor: [1, '#fff'],
					statusBarFontColor: 'black'
				},
				// 优惠券类型
				modeList: [{
					text: '平台券'
				}, {
					text: '店铺券'
				}],
				// “我的优惠券”参数
				pageParams1: {
					page: 1,
					limit: 10,
					status: 0 // 0可以使用，1已使用，2，未使用已过期
				},
				// “领券中心”参数
				pageParams2: {
					page: 1,
					limit: 10,
					trait: 0
				},
				// “选择可使用的优惠券”参数
				pageParams3: {
					marketing_type: 0,
					total_amount_dec_shop_coupon: 0, // 支付总金额
					shop_order_list: [{
							total_amount_dec_shop_coupon: 0, //不含运费，扣出首单，扣除店铺优惠券的费用
							shop_id: '' // 店铺id
						},
						{
							total_amount_dec_shop_coupon: 0,
							shop_id: '',
						}
					]
				},
				listData: [],
				loadStatus: 'loadmore', //loading / nomore
				isMyCoupon: false, // 是否为“我的优惠券”
				isCheck: false, // 是否为“选择可使用的优惠券”
				checkIndex: '',
				couponId: '' // 当前选择的优惠卷
			}
		},
		onLoad(option) {
			if (option.isMyCoupon) {
				this.isMyCoupon = true;
				this.config.title = '我的优惠券';
				this.getMyList(true);
			} else if (option.isCheck) {
				this.isCheck = true;
				this.couponId = option.couponId;
				this.config.title = '选择优惠券';
				this.pageParams3 = {
					...this.pageParams3,
					...JSON.parse(option.checkParams)
				}
				this.getMyCanUseList();
			} else {
				this.config.title = '领券中心'
				this.getList(true);
			}
		},
		onPullDownRefresh() {
			if (this.isMyCoupon) {
				this.getMyList(true);
			} else if (this.isCheck) {
				this.getMyCanUseList();
			} else {
				this.getList(true);
			}
			uni.stopPullDownRefresh();
		},
		methods: {
			// 我的优惠券列表
			getMyList(isRefresh, needLoading = false) {
				let that = this;
				if (!isRefresh && this.loadStatus == 'nomore') {
					return false;
				}
				this.pageParams1.page = isRefresh ? 1 : this.pageParams1.page + 1;
				this.listData = isRefresh ? [] : this.listData;
				if (needLoading) {
					uni.showLoading({
						title: '努力加载中...',
						mask: true
					});
				}
				this.loadStatus = 'loading';
				this.$http.get('/couponreceiverecord/page', this.pageParams1)
					.then(res => {
						if (res.code == 200) {
							let listData = that.listData;
							listData.push(...res.page.list);
							that.listData = listData;
							that.loadStatus = that.listData.length >= res.page.totalCount ? 'nomore' : 'loadmore';
						}
					})
					.finally(() => {
						if (needLoading) {
							uni.hideLoading();
						}
					})
			},
			// 领券中心列表
			getList(isRefresh, needLoading = false) {
				let that = this;
				if (!isRefresh && this.loadStatus == 'nomore') {
					return false;
				}
				this.pageParams2.page = isRefresh ? 1 : this.pageParams2.page + 1;
				this.listData = isRefresh ? [] : this.listData;
				if (needLoading) {
					uni.showLoading({
						title: '努力加载中...',
						mask: true
					});
				}
				this.loadStatus = 'loading';
				this.$http.get('/coupon/page', this.pageParams2)
					.then(res => {
						if (res.code == 200) {
							let listData = that.listData;
							listData.push(...res.page.list);
							that.listData = listData;
							that.loadStatus = that.listData.length >= res.page.totalCount ? 'nomore' : 'loadmore';
						}
					})
					.finally(() => {
						if (needLoading) {
							uni.hideLoading();
						}
					})
			},
			// 我可以使用的优惠券列表
			getMyCanUseList() {
				this.loadStatus = 'loading';
				this.$http.post('/select/platcoupon', this.pageParams3)
					.then(res => {
						if (res.code == 200) {
							this.listData = res.list;
							this.loadStatus = 'nomore';
							//显示默认使用的优惠券
							for (let i in res.list) {
								if (res.list[i].id == this.couponId) {
									this.checkIndex = i * 1;
									break;
								}
							}
						}
					})
			},
			//领券
			grabTickets(id) {
				uni.showLoading({
					title: '正在提交中...',
					mask: true
				});
				this.$http.post(`/couponreceiverecord/receive/${id}`, {})
					.then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'success',
								title: '领券成功'
							})
							//获取上一个页面
							var pages = getCurrentPages();
							if (pages.length > 1) {
								var beforePage = pages[pages.length - 2];
								if (beforePage.$vm.isMyCoupon) {
									beforePage.$vm.getMyList(true);
								}
							}
						}
					})
					.finally(() => {
						uni.hideLoading();
					})
			},
			goCouponCenter() {
				uni.navigateTo({
					url: '/pages/couponCenter/index'
				})
			},
			useTickets() {
				uni.redirectTo({
					url: '/pages/index/lidaPage'
				})
			},
			// 选择优惠券
			checkCoupon(item, index) {
				if (this.isCheck) {
					if (this.checkIndex === index) {
						this.checkIndex = '';
					} else {
						this.checkIndex = index;
					}
				}
				let params = {
					couponId: 0,
				}
				if (this.checkIndex !== '') {
					params = {
						my_coupon_id: item.id
					}
				}
				//获取上一个页面
				var pages = getCurrentPages();
				if (pages.length > 1) {
					var beforePage = pages[pages.length - 2];
					if (beforePage.$vm.changeCoupon) {
						beforePage.$vm.changeCoupon(params);
					}
				}
			}
		},
		onReachBottom() {
			if (this.isMyCoupon) {
				this.getMyList();
			} else if (this.isCheck) {

			} else {
				this.getList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		min-height: 100vh;
		background-color: rgba(253, 253, 253, 1);
		padding: 0 0 50rpx 0;

		.go-center {
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: center;
			color: #808080;
			// margin-top: 60rpx;

			.light {
				color: #00A7E6;
			}
		}

		.list {
			padding: 30rpx 30rpx 0;

			.item {
				width: 100%;
				min-height: 300rpx;
				background: url("./../../static/ZW/BG_02.png") no-repeat center center;
				background-size: 100% 100%;
				position: relative;
				padding:40rpx 30rpx;
				margin-bottom: 30rpx;
				.item_tig {
					width: 129rpx;
					height: 44rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #fa6037;
					border-radius: 18rpx 0rpx 18rpx 0rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					position: absolute;
					top: 0;
					left: 0;
				}

				.item_c {
					display: flex;
					justify-content: space-between;

					.item_c_l {
						width: 160rpx;
						color: #E2403E;
						font-weight: 700;
						// line-height: 136rpx;
						flex-shrink: 0;
						display: flex;
						align-items: center;
						text {
							font-size: 54rpx;
						}
						>view{
							font-size: 42rpx;
						}
					}

					.item_c_img {
						image {
							width: 2rpx;
							height: 136rpx;
						}
					}

					.item_c_r {
						.item_c_r_t {
							font-size: 28rpx;
							color: #333333;
							font-weight: 700;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							padding:0rpx 0rpx 10rpx 30rpx;
						}

						.item_c_r_b {
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding-left: 30rpx;

							.item_c_r_b_date {
								font-size: 24rpx;
								color: #808080;
								.condition {
								  vertical-align: middle;
								  font-size: 24rpx;
								  font-family: PingFang SC, PingFang SC-Regular;
								  font-weight: 400;
								  text-align: left;
								  color: #808080;
								  line-height: 28rpx;
								}
								
								.tip {
								  font-size: 28rpx;
								  font-family: PingFang SC, PingFang SC-Regular;
								  font-weight: 400;
								  text-align: left;
								  color: #333333;
								  line-height: 28rpx;
								  margin-top: 5rpx;
								}
								
								.tip2 {
								  font-size: 24rpx;
								  font-family: PingFang SC, PingFang SC-Regular;
								  font-weight: 400;
								  text-align: left;
								  line-height: 28rpx;
								  color: #666666;
								  margin-top: 5rpx;
								}
							}

							.item_c_r_b_btn {
								width: 141rpx;
								height: 56rpx;
								border: 1rpx solid #fa6037;
								border-radius: 29rpx;
								font-size: 24rpx;
								color: #FA6037;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
					}
				}
				.item_line{
					image{
						width: 100%;
						height: 2rpx;
					}
				}
				.item_b{
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 24rpx;
					color: #666666;
					margin-top: 10rpx;
					image{
						width: 26rpx;
						height: 14rpx;
					}
					.open {
					  transform: rotate(180deg);
					}
				}
			}

			// .item {
			//   position: relative;
			//   width: 690rpx;
			//   background: #ffffff;
			//   border-radius: 16rpx;
			//   margin: 40rpx auto 0 auto;
			//   box-sizing: border-box;
			//   // background-image: url('/static/couponCenter/card.png');
			//   // background-size: 100% 100%;
			//   // background-position: top;
			//   // background-repeat: no-repeat;
			//   padding-bottom: 19rpx;
			//   filter: drop-shadow(1px 2px 4px rgba(26, 58, 70, 0.1));

			//   &.checked {
			//     background: #fff8e1;

			//     button {
			//       background: #ffb74d !important;
			//       border-color: #ffb74d !important;
			//     }
			//   }

			//   .top {
			//     display: flex;
			//     align-items: center;
			//     justify-content: space-between;
			//     border-bottom: 1px dashed #cccccc;
			//     ;
			//     padding: 63rpx 0 19rpx 0;
			//     width: calc(100% - 60rpx);
			//     margin: 0 30rpx;
			//   }

			//   .tag {
			//     position: absolute;
			//     top: 0;
			//     left: 0;
			//     height: 45rpx;
			//     line-height: 45rpx;
			//     padding: 0 30rpx;
			//     background: #d9f9dd;
			//     border-radius: 16rpx 0px 16rpx 0px;
			//     font-size: 24rpx;
			//     font-family: PingFang SC, PingFang SC-Regular;
			//     font-weight: 400;
			//     text-align: left;
			//     color: #139145;
			//   }

			//   .left {
			//     margin-right: 26rpx;

			//     .face-price {
			//       font-size: 42rpx;
			//       font-family: PingFang SC, PingFang SC-Bold;
			//       font-weight: 700;
			//       text-align: left;
			//       color: #0f8849;

			//       .num {
			//         font-size: 54rpx;
			//       }
			//     }
			//   }

			//   .right {
			//     flex: 1;

			//     .flex-box {
			//       display: flex;
			//       align-items: self-end;
			//       justify-content: space-between;

			//       button {
			//         display: flex;
			//         align-items: center;
			//         width: fit-content;
			//         height: 56rpx;
			//         line-height: 56rpx;
			//         padding: 0 28rpx;
			//         border-radius: 28rpx;
			//         font-size: 30rpx;
			//         font-family: PingFang SC, PingFang SC-Regular;
			//         font-weight: 400;
			//         text-align: center;
			//         color: #ffffff;
			//         border: 1px solid #0f8849;
			//         color: #0F8849;
			//         white-space: nowrap;

			//         &.no-have {
			//           background: #0B844A;
			//           color: white;
			//           border: 1px solid #0B844A;
			//         }
			//       }

			//       .condition {
			//         vertical-align: middle;
			//         font-size: 24rpx;
			//         font-family: PingFang SC, PingFang SC-Regular;
			//         font-weight: 400;
			//         text-align: left;
			//         color: #808080;
			//         line-height: 28rpx;
			//       }

			//       .tip {
			//         font-size: 28rpx;
			//         font-family: PingFang SC, PingFang SC-Regular;
			//         font-weight: 400;
			//         text-align: left;
			//         color: #333333;
			//         line-height: 28rpx;
			//         margin-top: 5rpx;
			//       }

			//       .tip2 {
			//         font-size: 24rpx;
			//         font-family: PingFang SC, PingFang SC-Regular;
			//         font-weight: 400;
			//         text-align: left;
			//         line-height: 28rpx;
			//         color: #666666;
			//         margin-top: 5rpx;
			//       }
			//     }
			//   }

			//   .bottom {
			//     padding: 17rpx 30rpx 0 30rpx;
			//     display: flex;
			//     align-items: center;
			//     justify-content: space-between;

			//     .time {
			//       font-size: 24rpx;
			//       font-family: PingFang SC, PingFang SC-Regular;
			//       font-weight: 400;
			//       text-align: left;
			//       color: #666666;
			//     }

			//     .iconfont2 {
			//       transition: all 0.3s;

			//       &.open {
			//         transform: rotate(180deg);
			//       }
			//     }
			//   }

			//   .desc {
			//     padding: 10rpx 30rpx 0 30rpx;
			//     font-size: 24rpx;
			//     font-family: PingFang SC, PingFang SC-Regular;
			//     font-weight: 400;
			//     text-align: left;
			//     color: #666666;
			//   }
			// }
		}
	}
</style>