1

components/AlertUnlock/AlertUnlock.vue

 <template>
-	<view>
-		
+	<view class="container">
+		<view class="content">
+			<image class="close" src="../../static/close-gray.png" mode="" @click="close()"></image>
+			<view class="title">卡券解锁</view>
+			<view class="sub-title">是否确定解锁该卡券？</view>
+			<view class="tips">*为了您的资金安全，请勿将卡券信息泄露他人</view>
+			<view @click="$emit('certain')" class="buy-bottom" :style="{'background-color':'#FF0520'}">确定</view>
+		</view>
 	</view>
 </template>
 
@@ -11,10 +17,77 @@
 			return {
 
 			};
+		},
+		props: {
+			closeName: {
+				type: String
+			}
+		},
+		methods: {
+			close() {
+				this.$parent[this.closeName] = false
+			}
 		}
 	}
 </script>
 
-<style lang="scss">
-
+<style lang="scss" scoped>
+.container {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba($color: #000000, $alpha: 0.7);
+	z-index: 99999;
+	.content {
+		margin: 50% 55rpx;
+		border-radius: 16rpx;
+		background-color: #FFFFFF;
+		padding: 48rpx 40rpx;
+		// width: 640rpx;
+		position: relative;
+		.close {
+			position: absolute;
+			top: 24rpx;
+			right: 24rpx;
+			height: 36rpx;
+			width: 36rpx;
+		}
+		.title {
+			font-size: 32rpx;
+			font-weight: bolder;
+			color: #333333;
+			line-height: 44rpx;
+			text-align: center;
+		}
+		.sub-title {
+			margin-top: 48rpx;
+			font-size: 32rpx;
+			color: #333333;
+			line-height: 44rpx;
+			text-align: center;
+		}
+		.tips {
+			margin-top: 32rpx;
+			font-size: 24rpx;
+			line-height: 32rpx;
+			color: #666666;
+			text-align: center;
+		}
+		.buy-bottom {
+			margin-top: 70rpx;
+			border-radius: 40rpx;
+			height: 80rpx;
+			width: 560rpx;
+			background-color: rgba($color: #FF0520, $alpha: 0.5);
+			line-height: 82rpx;
+			text-align: center;
+			color: #FFFFFF;
+			font-size: 32rpx;
+			z-index: 99999;
+			margin-bottom: 32rpx;
+		}
+	}
+}
 </style>
\ No newline at end of file

pagesA/coupon/coupon.vue

@@ -14,7 +14,7 @@
 			<view class="money"><text>价值</text>￥{{couponData.cardCostTotal}}</view>
 			<view class="tab">
 				<view @click="clickSelectBtn()" class="btn" :style="{'opacity': type===100?'':'0.4'}">
-					<image class="img" src="../../static/coupon-select-btn.png" mode=""></image>
+					<image class="img" :src="selectBtn?'../../static/coupon-select-close.png':'../../static/coupon-select-btn.png'" mode=""></image>
 					<view class="text">批量管理</view>
 				</view>
 				<view @click="clickType(100)" class="item" :class="[type==100?'active':'']">
@@ -61,7 +61,17 @@
 			</view>
 		</view>
 		<uni-load-more :status="loadingType" v-if="list.length>0"></uni-load-more>
+		<view class="bottom" v-if="selectBtn" :style="{'height':safeAreaBottom+60+'px'}">
+			<view class="left">
+				<image @click="addAllItem()" class="img" :src="isSelectAll?'../../static/select-h.png':'../../static/select-n.png'" mode=""></image>
+				<view class="text">全选</view>
+			</view>
+			<view class="right" @click="unLockCard()">
+				批量解锁({{selectCouponArray.length}})
+			</view>
+		</view>
 		<AlertSelectStatus v-show="showChangeStatusAlert" closeName="showChangeStatusAlert" :useState="changeStatusItem.useState" @change="changeStatus"></AlertSelectStatus>
+		<AlertUnlock v-show="showUnlockAlert" closeName="showUnlockAlert" @certain="unLockCard"></AlertUnlock>
 	</view>
 </template>
 
@@ -81,7 +91,8 @@
 				selectBtn: false,
 				selectCouponArray: [],
 				changeStatusItem: {},
-				showChangeStatusAlert: false
+				showChangeStatusAlert: false,
+				showUnlockAlert: false
 			}
 		},
 		onLoad(options) {
@@ -92,6 +103,11 @@
 		onReachBottom () {
 			this.getList()
 		},
+		computed: {
+			isSelectAll() {
+				return this.selectCouponArray.length === this.list.length
+			}
+		},
 		methods: {
 			getCouponData() {
 				this.$net.post('/cards/summary', {'orderSn':this.orderId}).then(res => {
@@ -173,16 +189,25 @@
 				}
 				if (this.type === 100) {
 					this.selectCouponArray.push(item.cardId)
-					this.unLockCard()
+					this.showUnlockAlert = true
 				} else {
 					this.changeStatusItem = item
 					this.showChangeStatusAlert = true
 				}
 			},
 			unLockCard() {
+				if (this.selectCouponArray.length <= 0) {
+					this.toast('请至少选择一张卡券解锁')
+					return
+				}
+				this.selectBtn = false
 				this.$net.post('/cards/unlock', {'cardIds':this.selectCouponArray}).then(res=>{
+					this.selectCouponArray = []
 					if (res.code === 200) {
 						this.clickType(200)
+						this.showUnlockAlert = false
+					} else {
+						this.toast(res.message)
 					}
 				})
 			},
@@ -191,9 +216,21 @@
 					if (res.code == 200) {
 						this.refreshList()
 						this.showChangeStatusAlert = false
+					} else {
+						this.toast(res.message)
 					}
 				})
 			},
+			addAllItem() {
+				if (this.isSelectAll) {
+					this.selectCouponArray = []
+				} else {
+					this.selectCouponArray = []
+					for (let item of this.list) {
+						this.selectCouponArray.push(item.cardId)
+					}
+				}
+			},
 			refreshList() {
 				this.list = []
 				this.page = 1
@@ -323,6 +360,7 @@
 	}
 	.list {
 		margin-top: 24rpx;
+		margin-bottom: 210rpx;
 		padding: 24rpx 40rpx;
 		.coupon-content {
 			height: 300rpx;
@@ -432,5 +470,42 @@
 			}
 		}
 	}
+	.bottom {
+		// height: 120rpx;
+		bottom: 0;
+		background-color: #FFFFFF;
+		display: flex;
+		padding: 0 24rpx 0 40rpx;
+		// align-items: center;
+		justify-content: space-between;
+		position: fixed;
+		left: 0;
+		right: 0;
+		.left {
+			margin-top: 40rpx;
+			display: flex;
+			.img {
+				height: 32rpx;
+				width: 32rpx;
+				margin-top: 4rpx;
+			}
+			.text {
+				margin-left: 8rpx;
+				font-size: 28rpx;
+				color: #999999;
+			}
+		}
+		.right {
+			margin-top: 20rpx;
+			height: 80rpx;
+			border-radius: 40rpx;
+			width: 256rpx;
+			background-color: #FF0520;
+			font-size: 32rpx;
+			color: #FFFFFF;
+			text-align: center;
+			line-height: 82rpx;
+		}
+	}
 }
 </style>