hx-mini-uni/pages/order/confirm.vue

<template>
	<view>
		<view class="order-type">
			<view :class="service_type==2?'type-item active':'type-item'" @click="service_type=2">代提</view>
			<view :class="service_type==1?'type-item active':'type-item'" @click="service_type=1">自提</view>
		</view>
		<view class="order-content" v-if="goodsInfo">
			<view class="address" v-if="storeInfo && service_type==2">
				<view class="addressInfo" v-if="addressInfo" @click="toAddress">
					<view class="empty-data">
						<view class="icon"><image src="/static/image/location.png"></image></view>
						<view class="left">
							<view class="region">{{addressInfo.region}}</view>
							<view class="address">{{addressInfo.address}}</view>
							<view class="contact-name">{{addressInfo.username}} <view class="mobile">{{addressInfo.mobile}}</view></view>
						</view>
						<view class="right"><image src="/static/image/right.png"></image></view>
					</view>
				</view>
				<view class="empty-address" @click="toAddress" v-else>
					<view class="name">完善会员信息</view>
					<view class="desc">请先完善会员信息后再进行确认兑换</view>
					<view class="btn-group"><button class="btn">去完善</button></view>
				</view>
			</view>
			
			<view class="order-time" v-if="storeInfo && service_type==1" @click="selectTime(1)">
				<view class="time-icon"><image src="/static/image/time.png"></image></view>
				<view class="title">
					<view class="p">预约到店时间</view>
					<view class="desc" v-if="!timeStr">请选择预计到店服务的时间</view>
				</view>
				<view class="msg">
					{{timeStr?timeStr:'请选择'}}
					<view class="right"><image src="/static/image/right.png"></image></view>
				</view>
			</view>
			
			<view class="goods">
				<view class="goods-info">
					<view class="image"><image :src="goodsInfo.goods.product_img"></image></view>
					<view class="info">
						<view class="name">{{ goodsInfo.product_name }}</view>
						<view class="desc">x {{goodsInfo.count}}</view>
						<view class="desc">有效期至{{goodsInfo.expire_at}}</view>
					</view>
					<view class="price">￥{{goodsInfo.order_amount}}</view>
				</view>
				<!-- <view class="goods-item">
					<view class="left">商品总额</view>
					<view class="right">￥{{goodsInfo.order_amount}}</view>
				</view>
				<view class="goods-item">
					<view class="left">商品优惠</view>
					<view class="right red">￥{{goodsInfo.order_amount}}</view>
				</view> -->
			</view>
			<view class="goods_skus" v-if="goodsSku.length > 0">
				<view class="sku_box" v-for="(item,indx) in goodsSku" :key="indx">
					<view class="sku_name">
						{{item.name}}（{{item.list.length}}选{{item.num}}）<text>点击图片可放大查看</text>
						<view class="right" @click="clearSku(indx)">清除</view> 
					</view>
					<view class="sku_list">
						<view :class="itm.check?'sku_item':'sku_item active'" v-for="(itm,iddx) in item.list" :key="iddx">
							<view class="img" v-if="itm.img" @click="skuCheck(item.name,item.num,indx,iddx)"><image :src="itm.img"></image></view>
							<view :class="itm.img?'name':'name ac'" @click="skuCheck(item.name,item.num,indx,iddx)">{{itm.name}}</view>
							<view class="pre" @click="viewImg(itm.img)" v-if="itm.img"><image src="/static/image/open.png"></image></view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="location" @click="toDetail">
				<view class="left">
					<view class="name">{{poi_name}}</view>
					<view class="desc"><image src="/static/image/location.png"></image>距您{{juli}}公里</view>
				</view>
				<view class="right"><image src="/static/image/right.png"></image></view>
			</view>
			
			<view class="order-msg">
				<view class="title">订单备注</view>
				<view class="msg"><textarea class="textarea" placeholder="请输入" v-model="msg" :rows="5"></textarea></view>
			</view>
		</view>
		
		<view class="goods-info" v-else>
			<u-skeleton
				rows="3"
				title
				loading
			></u-skeleton>
		</view>
		
		<view class="line"></view>
		<view class="flx-footer">
			<view class="footer-btn" v-if="goodsInfo">
				<view class="price"><text class="desc">已优惠:￥{{goodsInfo.order_amount}}，</text>合计<text class="money">￥0.00</text></view>
				<view class="btn-group"><button :disabled="disabled" @click="submitOrder" class="btn">{{disabled?'处理中...':'确认兑换'}}</button></view>
			</view>
			<view class="footer-safe"></view>
		</view>
		
		<uni-popup ref="timepopup" type="bottom" borderRadius="10px 10px 0 0" backgroundColor="#F8F8F8">
			<view class="time-select">
				<view class="title">选择时间<view class="close" @click="selectTime(2)"><image src="/static/image/round_close.png"></image></view> </view>
			</view>
			<view class="time-body">
				<view class="time-left">
					<view :class="timeIndex==index?'time-left-item active':'time-left-item'" @click="timeCheck(index)" v-for="(item,index) in timeData">
						<view class="name">{{item.day}}</view>
						<view class="desc">{{item.week}}</view>
					</view>
				</view>
				<view class="time-right">
					<view  :class="childIndex==index?'time-right-item active':'time-right-item'" @click="childCheck(index)" v-for="(item,index) in timeChildren">
						<view class="name">{{item.display}}</view>
					</view>
				</view>
			</view>
			<view class="time-btn">
				<button class="btn" @click="checkTimeEnd">确认选择</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
var app;
import * as Api from "@/static/api/order.js";
export default {
	data() {
		return {
			disabled:false,
			timeIndex:0,
			childIndex:0,
			order:"",
			poi_name:"",
			poi_id:"",
			juli:"",
			goodsInfo:null,
			storeInfo:null,
			timeStr:null,
			timeState:false,
			timeData:[],
			timeChildren:[],
			addressInfo:null,
			msg:"",
			totalData:[],
			goodsSku:[],
			service_type:2
		}
	},
	onLoad({order,poi_id,poi_name,juli}) {
		app = this;
		app.order = order;
		app.poi_id = poi_id;
		app.poi_name = poi_name;
		app.juli = juli;
		app.getOrder();
	},
	methods: {
		viewImg(img){
			uni.previewImage({
				urls:[img]
			})
		},
		submitOrder(){
			var formData = {};
			formData.order = app.order;
			formData.poi_id = app.poi_id;
			if (app.service_type==2 && app.addressInfo == null) {
				return app.$dialog.showSuccess("请先完善会员信息");
			}
			if (app.service_type==1 && app.timeStr == null) {
				return app.$dialog.showSuccess("请选择预约时间");
			}
			formData.service_type = app.service_type;
			var skuInfo = "",skuState = true;
			if (app.goodsSku.length > 0) {
				app.goodsSku.forEach((item,index)=>{
					var skuCheck = [],skuI = 0;
					skuInfo += item.name+":";
					item.list.forEach((itm,idx)=>{
						if (itm.check==false){
							skuInfo += itm.name+',';
							skuCheck[skuI] = itm.name;
							skuI ++;
						}
					});
					skuInfo = skuInfo.slice(0, -1);
					skuInfo += ";";
					if (item.num > skuCheck.length) {
						app.$dialog.showSuccess("请完善【"+item.name+"】选项");
						skuState = false;
						return false;
					}
				});
				if (!skuState) return ;
			}
			formData.sku = skuInfo;
			formData.address = JSON.stringify(app.addressInfo);
			formData.time = app.timeStr;
			formData.remark = app.msg;
			app.disabled = true;
			Api.submit(formData).then((res)=>{
				app.disabled = false;
				if (res.code == 0) {
					return app.$dialog.showSuccess(res.msg);
				}
				app.$dialog.showSuccess(res.msg,"none",function(){
					uni.switchTab({
						url:"/pages/order/order"
					})
				});
			})
		},
		clearSku(parent){
			app.totalData = [];
			var goodsSku = app.goodsSku;
			goodsSku[parent].list.forEach((item,index) => {
				if (!item.check) {
					item.check = true;
				}
			})
		},
		skuCheck(name,length,parent,select){
			var goodsSku = app.goodsSku;
			if (length == '1') { // 单选
				goodsSku[parent].list.forEach((item,index) => {
					item.check = true;
					if (index == select) {
						item.check = false;
						app.skuInfo = goodsSku[parent].name+":"+item.name;
					}
				})
			} else { // 多选
				var data = [];
				var checkData = app.skuDataCheck(parent,length);
				goodsSku[parent].list.forEach((item,index) => {
					if (checkData >= length) {
						app.$dialog.showSuccess("清除后可重选~");
						return ;
					}
					if (index == select) {
						if (item.check) {
							data[parent+'_'+index] = item;
						}
						item.check = item.check?false:true;
						app.totalData.push(data)
					}
				});
			}
			app.goodsSku = goodsSku;
		},
		skuDataCheck(parent,length){
			var dataLen = 0;
			for (let key in app.totalData) {
				if (typeof app.totalData[key] == 'object' || typeof app.totalData[key] == 'array')
				{
					for (let indx in app.totalData[key]) {
						if (indx.includes(parent+"_")) {
							dataLen ++;
						}
					}
				}
			}
			return dataLen;
		},
		checkTimeEnd(){
			app.$refs.timepopup.close()
			var day = app.timeData[app.timeIndex];
			var fullday = day.full;
			var time = day.children[app.childIndex].display;
			app.timeStr = fullday+" "+time;
		},
		timeCheck(index){
			app.timeIndex = index;
			app.timeChildren = app.timeData[index].children
		},
		childCheck(index){
			app.childIndex = index;
		},
		getBackInfo(data){
			app.addressInfo = data;
		},
		toAddress(){
			uni.navigateTo({
				url:"/pages/user/address?type=2"
			})
		},
		selectTime(type){
			if (type == 1) {
				app.$refs.timepopup.open()
			}
			if (type == 2) {
				app.$refs.timepopup.close()
			}
		},
		getOrder(){
			Api.detail({"order":app.order}).then((res)=>{
				if (res.code == 0) {
					return app.$dialog.showSuccess(res.msg,"none",function(){
						uni.navigateBack()
					});
				}
				app.goodsInfo = res.data.order;
				app.storeInfo = res.data.store;
				app.timeData = res.data.time
				app.timeChildren = app.timeData[0].children
				app.goodsSku = res.data.specs;
			});
		},
		toDetail(){
			uni.navigateTo({
				url:"/pages/order/store?type=1&order="+app.order
			})
		},
	}
}
</script>

<style>
page{background-color: #f2f2f2;}
.empty-address{text-align: center;box-shadow: 8px 8px 20px 0 rgba(55, 99, 170, .1);background-color: #fff;width: calc(95% - 40upx);margin: 20upx auto;padding: 20upx;border-radius: 20upx;}
.empty-address .name{font-size: 36upx;font-weight: bold;color: #333;}
.empty-address .desc{font-size: 26upx;color: #666;margin: 20upx 0;}
.empty-address .btn-group{text-align: center;display: flex;align-items: center;justify-content: center;}
.empty-address .btn-group .btn{font-size: 28upx;color: #fff;background-color: #fe2c56;width: 50%;}
.order-content{overflow: auto;}
.line{height: 200upx;width: 100%;}
.order-type{height: 80upx;display: flex;align-items: center;line-height: 80upx;background-color: #fff;gap: 20upx;border-bottom: 2upx solid #f8f8f8;}
.order-type .type-item{text-align: center;width: 50%;font-size: 32upx;color: #333;position: relative;border-left: 2upx solid #f8f8f8;}
.order-type .type-item.active{color: #fe2c56;font-weight: bold;}
.order-type .type-item.active::after{content: "";position: absolute;left: 40%;width: 20%;bottom: -5upx;height: 10upx;background-color: #fe2c56;}
.addressInfo{}
.addressInfo .empty-data{display: flex;align-items: center;font-size: 28upx;width: 100%;}
.addressInfo .empty-data .icon{margin-right: 20upx;}
.addressInfo .empty-data .icon image{width: 40upx;height: 40upx;}
.addressInfo .empty-data .region{color: #666;font-size: 28upx;}
.addressInfo .empty-data .address{color: #333;font-size: 32upx;margin: 10upx 0;}
.addressInfo .empty-data .contact-name{display: flex;align-items: center;font-size: 28upx;color: #666;margin-bottom: 20upx;}
.addressInfo .empty-data .contact-name .mobile{margin-left: 20upx;}
.addressInfo .empty-data .desc{font-size: 26upx;color: #666;}
.addressInfo .empty-data .left image{width: 40upx;height: 40upx;margin-right: 20upx;vertical-align: middle;}
.addressInfo .empty-data .right image{width: 40upx;height: 40upx;vertical-align: middle;}
.addressInfo .empty-data .right{margin-left: auto;margin-right: 0;}
.time-body{height: 30vh;display: flex;align-items: center;}
.time-body .time-left{width: 30%;background-color: #F5FAFD;height: 100%;overflow-y: auto;}

.time-body .time-left .time-left-item{padding: 10upx;text-align: center;}
.time-body .time-left .time-left-item.active{background-color: #fff;color: #fe2c56;}
.time-body .time-left .time-left-item.active .name{color: #fe2c56;}
.time-body .time-left .time-left-item.active .desc{color: #fe2c56;}
.time-body .time-left .time-left-item .name{font-size: 28upx;color: #333;}
.time-body .time-left .time-left-item .desc{font-size: 24upx;color: #666;}

.time-body .time-right{width: calc(70% - 80upx);padding:0 40upx;background-color: #fff;height: 100%;overflow-y: auto;}
.time-body .time-right .time-right-item{background-color: #F6FAFD;border: 2upx solid #ccc;height: 66upx;line-height: 66upx;text-align: center;font-size: 28upx;color: #333;margin-top: 20upx;border-radius: 10upx;}
.time-body .time-right .time-right-item.active{color: #fe2c56;border: 2upx solid #fe2c56;}

.time-select .title{height: 100upx;line-height: 100upx;display: flex;align-items: center;justify-content: space-between;font-size: 28upx;padding: 0 20upx;font-weight: bold;}
.time-select image{width: 40upx;height: 40upx;vertical-align: middle;}
.time-btn{padding: 20upx;}	

.location{background-color: #fff;padding: 20upx;width: calc(95% - 40upx);margin: 20upx auto;display: flex;align-items: center;justify-content: space-between;border-radius: 20upx;}
.location .right image{width: 40upx;height: 40upx;vertical-align: middle;}
.location .name{font-size: 32upx;color: #333;font-weight: bold;margin-bottom: 20upx;}
.location .desc{color: #666;font-size: 28upx;display: flex;align-items: center;}
.location .desc image{width: 40upx;height: 40upx;margin-right: 20upx;}
.goods,.order-msg,.addressInfo{background-color: #fff;padding: 20upx;width: calc(95% - 40upx);margin: 20upx auto;border-radius: 20upx;}
.goods .goods-info{display: flex;align-items: center;position: relative;}
.goods .goods-info .price{color: #fe2c56;font-size: 32upx;font-weight: bold;position: absolute;bottom: 20upx;right: 20upx;}
.goods .goods-info .info{flex: 1;margin-left: 20upx;}
.goods .goods-info .image image{width: 160upx;height: 160upx;border-radius: 10upx;}
.goods .goods-info .name{font-size: 32upx;color: #333;line-height: 46upx;margin-bottom: 15upx;}
.goods .goods-info .desc{color: #666;font-size: 28upx;line-height: 48upx;}
.goods .goods-item{display: flex;align-items: center;line-height: 80upx;justify-content: space-between;font-size: 28upx;color: #333;}
.goods .goods-item .right.red{color: #fe2c56;}

.order-time{background-color: #fff;padding: 20upx;width: calc(95% - 40upx);margin: 20upx auto;display: flex;align-items: center;border-radius: 20upx;}
.order-time .title{font-size: 28upx;margin-left: 20upx;}
.order-time .title .p{font-size: 28upx;color: #333;font-weight: bold;}
.order-time .title .desc{font-size: 24upx;color: #666;margin-top: 10upx;}
.order-time .time-icon image{width: 40upx;height: 40upx;}
.order-time .right image{width: 40upx;height: 40upx;vertical-align: middle;}
.order-time .msg{display: flex;align-items: center;font-size: 28upx;color: #333;margin-left: auto;margin-right: 0;}

.order-msg .title{color: #333;font-size: 32upx;border-bottom: 2upx solid #f8f8f8;margin-bottom: 20upx;padding-bottom: 20upx;font-weight: bold;}
.order-msg .textarea{width: 100%;height: 100upx;font-size: 28upx;}

.flx-footer{position: fixed;bottom: 0;background-color: #fff;padding: 20upx;border-top: 2upx solid #f8f8f8;left: 0;right: 0;z-index: 99;}
.flx-footer .footer-safe {height: env(safe-area-inset-bottom);width: 100%;}
.flx-footer .btn,.time-btn .btn{font-size: 32rpx;height: 80upx;border-radius: 10upx;line-height: 80upx;text-align: center;width: 100%;color: #333;background-color: #fe2c56;color: #fff;border:2upx solid #fe2c56;}
.flx-footer .btn[disabled],.flx-footer .btn.disabled{background-color: rgba(34, 77, 122, 0.3);}
.flx-footer .footer-btn{display: flex;align-items: center;justify-content: space-between;}
.flx-footer .footer-btn text.desc{color: #666;font-size: 28upx;}
.flx-footer .footer-btn text.money{color: #fe2c56;font-size: 32upx;font-weight: bold;}
.flx-footer .footer-btn .price{color: #333;font-size: 28upx;}

.goods_skus{
	padding: 20upx 20upx 0 20upx;
	background-color: #fff;width: calc(95% - 40upx);margin: 0 auto;
	border-radius: 20upx;
}
.goods_skus .sku_name{
	font-size: 28upx;
	color: #000;
	line-height: 60upx;
	display: flex;
	align-items: center;
}
.goods_skus .sku_name text{margin-left: 20upx;color: #666;font-size: 24upx;}
.goods_skus .sku_name .right{
	margin-left: auto;
	margin-right: 0;
	font-size: 26upx;
	color: #666;
	display: flex;
	align-items: center;
}
.goods_skus .sku_name .right image{
	width: 30upx;
	height: 30upx;
	margin-right: 10upx;
}
.goods_skus .sku_list{
	display: flex;
	align-items: center;
	margin: 10upx 0;
	flex-wrap: wrap;
}
.goods_skus .sku_list .sku_item.active{
	/* background: linear-gradient(90deg, rgba(254, 44, 86, 1) 0%, rgba(228, 100, 126, 1) 100%); */
	color: #fe2c56;
	border: 2upx solid #fe2c56;
	background-color: #ccc;
}
.goods_skus .sku_list .sku_item{
	background-color: #f8f8f8;
	border: 2upx solid #f8f8f8;
	margin-right: 20upx;
	margin-bottom: 20upx;
	border-radius: 5upx;
	font-size: 28upx;
	display: flex;
	align-items: center;
	flex-direction: column;
	position: relative;
}
.goods_skus .sku_list .sku_item .pre{position: absolute;top: 0;left: 0;width: 40upx;height: 40upx;background-color: rgba(0, 0, 0, 0.5);border-radius: 0 0 20upx 0;z-index: 99;display: flex;align-items: center;justify-content: center;}
.goods_skus .sku_list .sku_item .pre image{width: 25upx;height: 25upx;}
.goods_skus .sku_list .sku_item .img{width: 100upx;}
.goods_skus .sku_list .sku_item .img image{width: 100%;height: 100upx;vertical-align: middle;margin-right: 10upx;}
.goods_skus .sku_list .sku_item .name{height: 40upx;line-height: 40upx;flex: 1;width: 100%;text-align: center;font-size: 26upx;}
.goods_skus .sku_list .sku_item .name.ac{padding: 10upx 20upx;height: 40upx;line-height: 40upx;}
</style>