jje_uniapp/orderPages/receiveCoupons/index.vue

<template>
  <view class="order-content-wrap">


		  <view class="custom-line"></view>
		  <!-- 当前订单-->
		  <view class="service-order">


			  <!-- 门店列表 -->
			  <view v-for="(item,index) in countsList" :class="computedStyle(item)" class="store-wrap  bg-img">
				 <view  class="row-list" >
					<view  class="store-content">
						<view class="h-left-content">
							<view class="h-text">
								<view class="money">￥{{item.discountsPrice}}</view>
								<view class="desc">{{item.name}}</view>
							</view>
						</view>
						<view class="h-center-content">
							<view class="title">
								<text class="h-value">门店通用</text>
							</view>
							<view class="title">
								使用平台：<text v-if="item.strategyType == '0'">全平台</text>
								<text v-else-if="item.strategyType == '1'">个人优惠卷</text>
							</view>
							<view class="title">
								有效时间：{{this.dateFormat(item.startTime)}}~{{this.dateFormat(item.endTime)}}
							</view>
						</view>
						<view class="h-right-content">
							<view class="h-btn">
								<view @click="gotoReceiveCoupon(item)"  class="h-btn-value-receive">立即领取</view>
							</view>
						</view>
					</view>
				 </view>
			  </view>


		  <view v-if="countsList.length == 0"  class="footer">
			<view class="">---暂无数据---</view>
		  </view>
		  <view v-if="countsList.length > 0"  class="footer">
		  	<view class="">---到底了---</view>
		  </view>
    </view>

  </view>
</template>
 <script>
export default {
  data() {
    return {
	  currentServiceTab: 'orderTab1', // 当前选中的 Tab
	  list: [1, 2, 3, 4],
	  reqParm: {
		  auth: true,
		  id: null
	  },
	  countsList: []
    };
  },
  onLoad() {
	// 查询可领取的优惠劵
	this.getUserDiscountsList();
  },
  computed: {

  },
  methods: {
	// 日期格式化
	dateFormat(date){
	  let time = Date.parse(date);
	  return uni.$u.date(time, 'yyyy-mm-dd');
	},
	// 查询可领取的优惠劵
	getUserDiscountsList(){
		let that = this;
		// 用户绑定门店
		this.$api.getUserDiscountsList(this.reqParm).then((res)=>{
			console.log(res.data.data)
			this.countsList = res.data.data;
		}).catch(() =>{
			uni.showToast({
				title: "操作失败"
			})
		})
	},
	computedStyle(item) {
	   return 'bg-img';
	},
	// 切换菜单
	changeServiceTab(tab){
	  this.currentServiceTab = tab;
	},
	// 领取优惠劵
	gotoReceiveCoupon(item){
		let that = this;
		that.reqParm.id = item.id;
		// 用户绑定门店
		this.$api.claimCoupon(this.reqParm).then((res)=>{
			uni.showToast({
				title: "领取成功"
			})
			// 查询可领取的优惠劵
			that.getUserDiscountsList();
			// uni.$u.route({
			// 	url: '/pages/coupon/coupon',
			// 	params: {}
			// })
		}).catch(() =>{
			uni.showToast({
				title: "操作失败"
			})
		})
	},
	// 去使用优惠劵
	gotoUseCoupon(){
		uni.$u.route({
			url: '/pages/index/tabbar',
			params: {
				PageCur: 'goods'
			}
		})
	},
  },
};
</script>
 <style lang="scss" scoped>

 /* 服务订单内容*/
.service-order-tab-bar{
	background: #fff;
	display: flex;
	justify-content: space-around;
	height: 50px;
	background-color: #f5f5f5;
	.service-order-tab-item{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		color: #333;
		line-height: 26px;
	}
	.service-order-tab-item.active {
	  // color: #ff0000;
	}

	.underline {
	  border-bottom: 2px solid #FFE05C ;
	}
}

.bg-img{
	background-image: url('/static/coupon/u210.png');
	background-repeat: repeat;
	height: 94px;
	margin: 12px;
}
.bg-img1{
	background-image: url('/static/coupon/u211.png');
	background-repeat: repeat;
	height: 94px;
	margin: 12px;
}

.service-order{
	// background: #fff;
}

/* 门店列表 */
.store-wrap{
	border-radius: 2px;
	padding-bottom: 12px;
	padding-left: 12px;
	padding-right: 12px;
	.row-list{
		.store-content{
			display: flex;
			align-items: center;
			height: 94px;
			color: #333333;
			.h-left-content{
				width: 26%;
				text-align: center;
				.h-text{
					width: 100%;
					font-weight: 400;
					line-height: 18px;
					font-size: 12px;
					.money{
						font-size: 18px;
						font-weight: bold;
						line-height: 26px;
					}
				}
			}
			.h-center-content{
				width: 50%;
				padding-left: 12px;
				.title{
					width: 100%;
					color: #999999;
					font-size: 12px;
					.h-value{
						font-size: 14px;
						line-height: 42px;
						color: #333333;
					}
				}
			}
			.h-right-content{
				width: 24%;
				display: flex;
				justify-content: center;
				align-items: center;
				background-image: url('/static/coupon/u2102.png');
				height: 94px;
				font-size: 12px;
				.h-btn-value-use{
					background: #FFE05C;
					color: #333333;
					height: 30px;
					width: 80px;
					text-align: center;
					line-height: 30px;
					border-radius: 15px;
				}
				.h-btn-value-receive{
					background: #93D21A;
					color: #fff;
					height: 30px;
					width: 80px;
					text-align: center;
					line-height: 30px;
					border-radius: 15px;
				}
				.h-btn-img{
					display: flex;
					align-items: center;
					image{
						height: 68px;
						width: 68px;
					}
				}
			}
		}

	}

}

/* 产品订单 */
.product-order{
	margin-top: 12px;
}

/* 底部 */
.footer{
	margin-top: 30px;
	height: 120px;
	font-size: 12px;
	text-align: center;
	color: #666;
}

</style>