jje_uniapp/orderPages/useCoupons/index.vue

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

<!--		  &lt;!&ndash; 当前订单&ndash;&gt;-->
<!--		  <view class="service-order">-->

<!--			  <view @click="noUseCoupon()" class="h-no-use-coupons">-->
<!--				  <u-icon name="share-square" color="#333" size="25"></u-icon>-->
<!--				  <view class="">-->
<!--					  <text>不使用优惠券</text>-->
<!--				  </view>-->
<!--			  </view>-->

<!--			  <view v-for="(item,index) in countsList" :class="computedStyle(item)" class="store-wrap  bg-img">-->
<!--				 <view  class="row-list" >-->
<!--					<view @click="useCoupon(item)"  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">-->
<!--								使用平台：全平台-->
<!--							</view>-->
<!--							<view class="title">-->
<!--								有效时间：{{this.dateFormat(item.startTime)}}~{{this.dateFormat(item.endTime)}}-->
<!--							</view>-->
<!--						</view>-->
<!--						<view class="h-right-content">-->
<!--							<u-icon v-if="item.id == couponIds" name="checkmark-circle" color="#333" size="25"></u-icon>-->
<!--							<view v-else class="no-checked"></view>-->
<!--							<view class="h-btn">-->
<!--								&lt;!&ndash; <view @click="useCoupon(item)"  class="h-btn-value-receive">选择使用</view> &ndash;&gt;-->
<!--							</view>-->
<!--						</view>-->
<!--					</view>-->
<!--				 </view>-->
<!--			  </view>-->

<!--		  <view v-if="countsList.length == 0"  class="footer">-->
<!--		  	 <view class="">-&#45;&#45;暂无数据-&#45;&#45;</view>-->
<!--		  </view>-->

<!--		  <view v-if="countsList.length > 0"  class="footer">-->
<!--		  	<view class="">-&#45;&#45;到底了-&#45;&#45;</view>-->
<!--		  </view>-->
<!--    </view>-->

  </view>
</template>
 <script>
export default {
  data() {
    return {
		  checkboxList1:[
		  {
		    name: '苹果',
		    disabled: false,
		  },
		  {
		    name: '香蕉',
		    disabled: false,
		  },
		  {
		    name: '橙子',
		    disabled: false,
		  },
		],
	  checkboxValue1: '',
	  isChecked: false,
	  couponIds: null ,
	  currentServiceTab: 'orderTab1', // 当前选中的 Tab
	  list: [1, 2, 3, 4],
	  reqParm: {
		  auth: true,
		  type: 0
	  },
	  countsList: []
    };
  },
  onLoad(option) {
  	// 选择的优惠券
	this.couponIds = option.couponIds;
	console.log(option.couponIds)
	// 查询可领取的优惠劵
	this.getUserDiscountsList();
  },
  computed: {

  },
  methods: {
	// 日期格式化
	dateFormat(date){
	  let time = Date.parse(date);
	  return uni.$u.date(time, 'yyyy-mm-dd');
	},
	// 查询可领取的优惠劵
	getUserDiscountsList(){
		let that = this;
		// 用户绑定门店
		getMyCouponList({data:this.reqParm}).then((res)=>{
			console.log(res)
			this.countsList = res.rows;
		}).catch(() =>{
			uni.showToast({
				title: "操作失败"
			})
		})
	},


	computedStyle(item) {
	   return 'bg-img';
	},
	// 切换菜单
	changeServiceTab(tab){
	  this.currentServiceTab = tab;
	},
	// 领取优惠劵
	gotoReceiveCoupon(){
		uni.showToast({
			title: "领取成功"
		})
	},
	// 去使用优惠劵
	useCoupon(item){
		// 选择完成后返回上一页
		uni.navigateBack({
		  delta: 1,
		  success: function(res) {
		    console.log('返回成功');
		    // 在这里可以处理选择结果
			// 可以将选择的内容保存到本地或通过事件传递给上一个页面
			uni.$emit('selectedDataCouponChild', item);
		  }
		});
	},
	// 不使用优惠券
	noUseCoupon(){
		let data = {
			id: null,
			discountsPrice: 0
		}
		// 选择完成后返回上一页
		uni.navigateBack({
		  delta: 1,
		  success: function(res) {
		    console.log('返回成功');
		    // 在这里可以处理选择结果
			// 可以将选择的内容保存到本地或通过事件传递给上一个页面
			uni.$emit('selectedDataCouponChild', data);
		  }
		});
	}
  },
};
</script>
 <style lang="scss" scoped>

.h-no-use-coupons{
	display: flex;
	padding-top: 12px;
	padding-left: 12px;
	padding-right: 12px;
}

 /* 服务订单内容*/
.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: 60%;
				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: 14%;
				display: flex;
				justify-content: flex-end;;
				align-items: center;
				background-image: url('/static/coupon/u2102.png');
				height: 94px;
				font-size: 12px;
				padding-right: 12px;
				.no-checked{
					height: 22px;width: 22px;
					border-radius: 11px;
					border: 2px solid #999;
				}
				.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: #FFE05C;
					color: #333;
					height: 30px;
					width: 80px;
					text-align: center;
					line-height: 30px;
					border-radius: 15px;
					font-size: 14px;
				}
				.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>