feat:订单列表和订单详情使用亲情卡支付

common/css/common.css

@@ -75,6 +75,10 @@
 	top: 0rpx;
 	z-index: 99;
 }
+
+.flex-grow{
+	flex-grow: 1;
+}
 .bord{
 	border:  1px  solid  red;
 }

orderPages/orderDetail/index.rpx.scss

@@ -353,3 +353,11 @@
 .jishi{
   padding-right: 62rpx;
 }
+.loveCard{
+  flex-grow: 1;
+  max-height: 300rpx;
+}
+.loveCardItem{
+  margin-top: 15rpx;
+  background: #FFFFFF;
+}

orderPages/orderDetail/index.vue

@@ -188,24 +188,29 @@
 					<text class="payType">请选择支付方式</text>
 					<image class="x" src="/static/common/ox.png" @click="closePayPopup"></image>
 				</view>
-				<view class="payTitle">
-					<text>选择微信支付或余额支付</text>
-				</view>
-<!--				<view v-if="loveCard.totalBalance" class="payItem  flex-row justify-between" @click="payItem(0)">-->
-<!--					<view class="flex-row">-->
-<!--						<u-icon name="/static/me/familyCard_icon.png" color="#38db38" size="36"></u-icon>-->
-<!--						<view class="payName flex-col justify-center">-->
-<!--							<text>亲情卡支付</text>-->
-<!--							<text class="balance">{{loveCard.presentUserName + loveCard.presentUserNo}}赠送的亲情卡</text>-->
-<!--							<text class="balance">余额{{loveCard.totalBalance}}</text>-->
-<!--						</view>-->
-<!--					</view>-->
-<!--					<view class="flex-col justify-center">-->
-<!--						<u-icon v-if="curServiceTab === 0" 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="payTitle">-->
+<!--					<text>选择微信支付或余额支付</text>-->
 <!--				</view>-->
+				<view v-if="loveCardList.length>0" class="payItem flex-row" >
+					<u-icon name="/static/me/familyCard_icon.png" color="#38db38" size="36"></u-icon>
+					<view class="payName flex-col justify-center  flex-grow">
+						<text>亲情卡支付</text>
+						<scroll-view scroll-y class="loveCard">
+							<view class="flex-row justify-between loveCardItem " v-for="(item,index) in loveCardList" :key="index" @click="payLoveItem(0,index,item)">
+								<view class="select flex-col" >
+									<text>{{item.presentUserName}}({{item.presentUserNo}})</text>
+									<text class="balance">可用余额：{{item.totalBalance}}</text>
+								</view>
+								<view class="flex-col justify-center">
+									<u-icon v-if="curServiceTab === 0 && item.select" 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="payItem flex-row justify-between" @click="payItem(1)">
 					<view class="flex-row">
@@ -279,7 +284,6 @@
 		},
 		data() {
 			return {
-				loveCard:{},
 				title: 'Hello',
 				tabIndex: 3,
 				order:{},
@@ -292,7 +296,9 @@
 				userInfo:{},
 				tradeNo:'',
 				password:'',
-				requestStatus : false
+				requestStatus : false,
+				loveCardId:'',
+				loveCardList:[],
 			}
 		},
 		onLoad(e) {
@@ -301,13 +307,13 @@
 		},
 		onShow(){
 			this.getOrderDetailByOrderId(this.orderId )
-			// this.getMyReceiveList()
+			this.getMyReceiveList()
 		},
 		methods: {
 
 			getMyReceiveList(){
 				this.$api.getMyReceiveList().then(res=>{
-					this.loveCard = res.data.data[0]
+					this.loveCardList = res.data.data
 				})
 			},
 
@@ -322,7 +328,7 @@
 				let that = this;
 				this.$api.familyCardTradePay({
 					tradeNo:this.tradeNo,
-					loveCardId:this.loveCard.id
+					loveCardId:this.loveCardId
 				}).then(res=>{
 					this.requestStatus=false
 					uni.hideLoading();
@@ -544,14 +550,22 @@
 					// this.calculatePrice()
 				})
 			},
-			payItem(num){
-				console.log('this.userInfo.balance',this.userInfo.balance*1)
-				console.log('this.price',this.order.totalAmount*1)
 
-				// if (this.loveCard.totalBalance*1 < this.order.totalAmount*1 && num == 0){
-				// 	uni.$u.toast('余额不足')
-				// 	return
-				// }
+			payLoveItem(num,index,loveCard){
+				if (loveCard.totalBalance*1 < this.order.payAmount*1 && num == 0){
+					uni.$u.toast('余额不足')
+					return
+				}
+				this.curServiceTab = num
+				this.loveCardList.forEach(item=>{
+					item.select = false
+				})
+				loveCard.select=true
+				this.loveCardId = loveCard.id
+				this.$set(this.loveCardList,index,loveCard)
+			},
+
+			payItem(num){
 				if (this.userInfo.balance*1 < this.order.payAmount*1 && num == 1){
 					uni.$u.toast('余额不足')
 					return
@@ -568,4 +582,5 @@
 
 <style>
 	@import '/common/css/common.css';
-	@import './index.rpx.scss';</style>
+	@import './index.rpx.scss';
+</style>

pages/order/index.rpx.scss

@@ -473,3 +473,11 @@
   text-align: center;
   margin-top: 80rpx;
 }
+.loveCard{
+  flex-grow: 1;
+  max-height: 300rpx;
+}
+.loveCardItem{
+  margin-top: 15rpx;
+  background: #FFFFFF;
+}

pages/order/index.vue

@@ -70,28 +70,28 @@
 					<text class="payType">请选择支付方式</text>
 					<image class="x" src="/static/common/ox.png" @click="closePayPopup"></image>
 				</view>
-				<view class="payTitle">
-					<text>选择微信支付或余额支付</text>
-				</view>
-
-
+<!--				<view class="payTitle">-->
+<!--					<text>选择微信支付或余额支付</text>-->
+<!--				</view>-->
 				<view :style="{'min-height':'380rpx'}">
-
-<!--					<view v-if="loveCard.totalBalance" class="payItem  flex-row justify-between" @click="payItem(0)">-->
-<!--						<view class="flex-row">-->
-<!--							<u-icon name="/static/me/familyCard_icon.png" color="#38db38" size="36"></u-icon>-->
-<!--							<view class="payName flex-col justify-center">-->
-<!--								<text>亲情卡支付</text>-->
-<!--								<text class="balance">{{loveCard.presentUserName + loveCard.presentUserNo}}赠送的亲情卡</text>-->
-<!--								<text class="balance">余额{{loveCard.totalBalance}}</text>-->
-<!--							</view>-->
-<!--						</view>-->
-<!--						<view class="flex-col justify-center">-->
-<!--							<u-icon v-if="curServiceTab === 0" 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>-->
+					<view v-if="loveCardList.length>0" class="payItem flex-row" >
+						<u-icon name="/static/me/familyCard_icon.png" color="#38db38" size="36"></u-icon>
+						<view class="payName flex-col justify-center  flex-grow">
+							<text>亲情卡支付</text>
+							<scroll-view scroll-y class="loveCard">
+								<view class="flex-row justify-between loveCardItem " v-for="(item,index) in loveCardList" :key="index" @click="payLoveItem(0,index,item)">
+									<view class="select flex-col" >
+										<text>{{item.presentUserName}}({{item.presentUserNo}})</text>
+										<text class="balance">可用余额：{{item.totalBalance}}</text>
+									</view>
+									<view class="flex-col justify-center">
+										<u-icon v-if="curServiceTab === 0 && item.select" 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="payItem flex-row justify-between"  @click="payItem(1)">
 						<view class="flex-row">
@@ -131,9 +131,6 @@
 						</view>
 					</view>
 				</view>
-
-
-
 				<view class="commitBtn" @click="commonGeneralOrder">
 					<text>确定</text>
 				</view>
@@ -171,7 +168,6 @@
 		},
 		data() {
 			return {
-				loveCard:{},
 				orderNumberData:{},
 				num: 0,
 				payAmount:'',//调用支付组件时需要支付的金额
@@ -198,8 +194,9 @@
 				password:'',
 				openType:0,//开启的支付类型：1一键支付子订单费用，2：支付预约费用
 				appointmentOrder:{},
-				requestStatus : false
-
+				requestStatus : false,
+				loveCardId:'',
+				loveCardList:[]
 			}
 		},
 		onLoad() {
@@ -223,7 +220,7 @@
 			uni.removeStorageSync('orderListIndex');
 
 			this.$refs.MescrollItem[this.tabIndex].downCallback()
-			// this.getMyReceiveList()
+			this.getMyReceiveList()
 		},
 
 		methods: {
@@ -301,7 +298,7 @@
 				if (this.openType == 2){
 					this.$api.familyCardPay({
 						orderNo: this.appointmentOrder.subOrderNo,
-						loveCardId: this.loveCard.id
+						loveCardId: this.loveCardId
 					}).then(res=>{
 						this.requestStatus=false
 						uni.hideLoading();
@@ -325,7 +322,7 @@
 				}else{
 					this.$api.familyCardTradePay({
 						tradeNo:this.tradeNo,
-						loveCardId:this.loveCard.id
+						loveCardId:this.loveCardId
 					}).then(res=>{
 						this.requestStatus=false
 						uni.hideLoading();
@@ -420,15 +417,25 @@
 
 			},
 
+			payLoveItem(num,index,loveCard){
+				console.log(loveCard.totalBalance*1, this.totalAmount*1)
+				if (loveCard.totalBalance*1 < this.totalAmount*1 && num == 0){
+					console.log(this.totalAmount)
+					uni.$u.toast('余额不足')
+					return
+				}
+				this.curServiceTab = num
+				this.loveCardList.forEach(item=>{
+					item.select = false
+				})
+				loveCard.select=true
+				this.loveCardId = loveCard.id
+				this.$set(this.loveCardList,index,loveCard)
+			},
+
 			payItem(num){
 
 				console.log(this.userInfo.balance*1,this.appointmentOrder.totalAmount*1)
-
-				// if (this.loveCard.totalBalance*1 < this.appointmentOrder.totalAmount*1 && num == 0){
-				// 	uni.$u.toast('余额不足')
-				// 	return
-				// }
-
 				if (this.userInfo.balance*1 < this.payAmount*1){
 					uni.$u.toast('余额不足')
 					return
@@ -541,7 +548,7 @@
 
 			getMyReceiveList(){
 				this.$api.getMyReceiveList().then(res=>{
-					this.loveCard = res.data.data[0]
+					this.loveCardList = res.data.data
 				})
 			}