refactor：使用优惠券页面

orderPages/receiveCoupons/index.rpx.scss

@@ -0,0 +1,3 @@
+.page{
+  background: #F7F7F7;
+}

orderPages/receiveCoupons/index.vue

@@ -1,51 +1,7 @@
 <template>
-	<view class="order-content-wrap">
+	<view class="page">
 
 
-<!--		<view class="custom-line"></view>-->
-		<!-- 当前订单-->
-<!--		<view class="service-order">-->
-
-
-<!--			&lt;!&ndash; 门店列表 &ndash;&gt;-->
-<!--			<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="">-&#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>
@@ -53,232 +9,21 @@
 	export default {
 		data() {
 			return {
-				currentServiceTab: 'orderTab1', // 当前选中的 Tab
-				list: [1, 2, 3, 4],
-				reqParm: {
-					auth: true,
-					id: null
-				},
-				countsList: []
+
 			};
 		},
-		onLoad() {
-			// 查询可领取的优惠劵
-			this.getUserDiscountsList();
+		onLoad(option) {
+
 		},
 		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>

orderPages/serviceItems/index.vue

@@ -40,7 +40,7 @@
             <view class="tabBarLineHeight"></view>
 
             <view class="bottomView ">
-                <view class="flex-row justify-center">
+                <view class="flex-row justify-center" @click="goUseCoupons">
                     <view class="block_3 ">
                         <text lines="1" class="text_15">优惠券</text>
                         <view class="image-text_4">
@@ -80,6 +80,13 @@ export default {
     },
     methods: {
 
+        goUseCoupons(){
+            uni.navigateTo({
+                url: 'orderPages/useCoupons/index'
+            })
+
+        },
+
         clickItem(id){
             this.serviceProjectId = id
         },

orderPages/useCoupons/index.rpx.scss

@@ -0,0 +1,105 @@
+.page{
+  background: #F7F7F7;
+  padding: 0 32rpx;
+  border-top: 1px solid #F7F7F7 ;
+}
+.btn{
+  height: 84rpx;
+  background: #FFE05C;
+  border-radius: 54rpx;
+  margin: 32rpx 0;
+
+  font-size: 28rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #333333;
+  line-height: 84rpx;
+  text-align: center;
+}
+.noUse{
+  margin: 32rpx 0;
+  font-size: 28rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #333333;
+  line-height: 40rpx;
+}
+
+
+.row-list{
+  width: 686rpx;
+  height: 188rpx;
+  margin-top: 24rpx;
+  background-image: url('/static/coupon/u210.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+
+.h-text{
+  width: 200rpx;
+  height: 188rpx;
+}
+.h-center-content{
+  width: 398rpx;
+  height: 188rpx;
+}
+.h-right-content{
+  width: 88rpx;
+  height: 188rpx;
+}
+.money{
+  height: 52rpx;
+  font-size: 36rpx;
+  font-family: DINAlternate-Bold, DINAlternate;
+  font-weight: bold;
+  color: #333333;
+  line-height: 52rpx;
+  text-align: center;
+}
+.desc{
+  height: 36rpx;
+  font-size: 20rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #333333;
+  line-height: 36rpx;
+  text-align: center;
+}
+.h-value{
+  font-size: 28rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: bold;
+  color: #333333;
+  line-height: 44rpx;
+  margin-top: 24rpx;
+  margin-left: 24rpx;
+}
+.title{
+  font-size: 20rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #999999;
+  line-height: 36rpx;
+  margin-left: 24rpx;
+}
+.h-btn-value-use{
+  width: 156rpx;
+  height: 64rpx;
+  background: #93D21A;
+  border-radius: 32rpx;
+
+  font-size: 24rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #FFFFFF;
+  line-height: 64rpx;
+  text-align: center;
+}
+.h-btn-img{
+  width: 136rpx;
+  height: 136rpx;
+}
+.row-list:first-child{
+  margin-top: 0;
+}

orderPages/useCoupons/index.vue

@@ -1,55 +1,57 @@
 <template>
-  <view class="order-content-wrap">
+  <view class="page" :style="{'height':windowHeight}">
+
+        <view class="flex-row">
+            <view class="flex-col justify-center" @click="noUseChange">
+                <u-icon v-if="noUse" name="checkmark-circle-fill" color="#38db38" size="25" ></u-icon>
+                <u-icon v-else name="/static/order/ud9.png" color="green" size="25"></u-icon>
+            </view>
+            <view class="noUse">
+                <text>不使用优惠券</text>
+            </view>
+        </view>
+        <view  :style="{'height':scrollViewHeight}">
+            <scroll-view class="scroll " :style="{'height':scrollViewHeight}" scroll-y>
+                <view  class="row-list flex-row justify-start" v-for="(it,i) in 10" @click="useCoupons(i)">
+                    <view class="h-text flex-col justify-center ">
+                        <view class="money">
+                            <text>￥{{item.discountsPrice || '100'}}</text>
+                        </view>
+                        <view class="desc">
+                            <text>{{item.name || '优惠券名字'}}</text>
+                        </view>
+                    </view>
+
+                    <view class="h-center-content flex-col ">
+                        <view class="h-value">
+                            <text>门店通用</text>
+                        </view>
+                        <view class="title">
+                            使用平台：<text v-if="item.strategyType == '0'">全平台</text>
+                            <text v-else-if="item.strategyType == '1'">个人优惠卷</text>
+                        </view>
+                        <view class="title">
+                            使用次数：{{item.degree}}
+                        </view>
+                        <view class="title">
+                            到期时间：{{item.endTime.substring(0,10)}}
+                        </view>
+                    </view>
+
+                    <view class="h-right-content flex-col justify-center ">
+                            <u-icon v-if="index == i " name="checkmark-circle-fill" color="#38db38" size="25"></u-icon>
+                            <u-icon v-else name="/static/order/ud9.png" color="green" size="25"></u-icon>
+                    </view>
+
+                </view>
+            </scroll-view>
+        </view>
+        <view>
+            <view class="btn">
+                <text>确定</text>
+            </view>
+        </view>
 
-<!--		  &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>
@@ -57,261 +59,36 @@
 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: []
+        index:-1,
+        noUse:true,
+        windowHeight:'',
+        scrollViewHeight:''
     };
   },
   onLoad(option) {
-  	// 选择的优惠券
-	this.couponIds = option.couponIds;
-	console.log(option.couponIds)
-	// 查询可领取的优惠劵
-	this.getUserDiscountsList();
+      let sysInfo = uni.getSystemInfoSync()
+      this.windowHeight =sysInfo.windowHeight +'px'
+      this.scrollViewHeight =sysInfo.windowHeight -(sysInfo.windowWidth/750)*252 +'px'
   },
   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: "操作失败"
-			})
-		})
-	},
+      noUseChange(){
+          this.noUse = !this.noUse
+          if (this.noUse){
+              this.index = -1
+          }
+      },
+      useCoupons(i){
+          this.noUse = false
+          this.index = i
+      }
 
-
-	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;
-}
-
+     @import '/common/css/common.css';
+     @import './index.rpx.scss';
 </style>