jiaoyi-uni2/奥莱优品/pages/order/done.vue

<template>
	<view class="content">
		<template v-if="loading">
			<view class="skeleton">
				<view class="skeleton-line max animate" style="height: 200upx;"></view>
				<view class="skeleton-line animate"></view>
				<view class="skeleton-line min animate"></view>
				<view class="skeleton-line min animate"></view>
				<view class="skeleton-line max animate" style="height: 200upx;"></view>
				<view class="skeleton-line max animate" style="height: 200upx;"></view>
			</view>
		</template>
		<template v-else>
			<scroll-view class="goods-body" scroll-y scroll-with-animation>
				<view class="order-body" v-if="orderData">
					<view class="item-goods">
						<view class="item-goods-body">
							<view class="image">
								<image :src="orderData.img"></image>
							</view>
							<view class="info">
								<view class="title">
									<view class="name" v-if="orderData.product.is_new==1">
										{{orderData.product.price}}元代{{orderData.product.line_price}}元商场权益券{{orderData.product.product_name}}
									</view>
									<view class="name" v-else>{{ orderData.product.product_name }}</view>
									<view class="num">x{{ orderData.number }}</view>
								</view>
								<view class="tags">
									{{orderData.sku_name?orderData.sku_name:'默认'}}
									<view class="price">{{ $dialog.formatMoney(orderData.price,true) }}</view>
								</view>
								<view class="price-right">实付 <text>{{ $dialog.formatMoney(orderData.pay_money,true) }}</text></view>
							</view>
						</view>
					</view>
					<view class="order-info">
						<view class="title-h">意向商品<text>(可选{{orderData.number}}份)</text></view>
						<view class="goods-item" v-for="(item,indx) in doneGoods" :key="indx">
							<view class="item-goods" style="padding: 10rpx;background-color: #f8f8f8;">
								<view class="item-goods-body">
									<view class="image">
										<image :src="item.image"></image>
									</view>
									<view class="info">
										<view class="title">
											<view class="name">{{ item.title }}</view>
										</view>
										<view class="tags">
											<view></view>
											<view class="price">x{{ item.number }}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="goods-item-check" @click="chooseGoods">{{doneGoods.length == 0 ? '请选择': '更换其他'}}</view>
					</view>
					<view class="order-info">
						<view class="title-h">会员信息</view>
						<view class="form-feedbak">
							<view class="title"><text>*</text>姓名</view>
							<view class="form-textarea">
								<input v-model="addressForm.nickname" data-field="nickname"  placeholder="请输入" class="u-input" />
							</view>
						</view>
						<view class="form-feedbak">
							<view class="title"><text>*</text>手机号码</view>
							<view class="form-textarea">
								<input v-model="addressForm.mobile" data-field="mobile" placeholder="请输入" class="u-input" />
							</view>
						</view>
						<view class="form-feedbak">
							<view class="title"><text>*</text>所属地区</view>
							<view class="form-textarea" @click="showAddress">
								{{addressData.name}}
							</view>
						</view>
						<view class="form-feedbak">
							<view class="title"><text>*</text>详细地址</view>
							<view class="form-textarea">
								<input v-model="addressForm.address" data-field="address"  placeholder="请输入" class="u-textarea" />
							</view>
						</view>
					</view>
				</view>
				<view class="line-height"></view>
			</scroll-view>
			<view class="footer">
				<view class="footer-op">
					<view class="footer-right">
						<button :loading="isSubmit" :disabled="isSubmit" class="btn full" @click="submitOrder">提交</button>
					</view>
				</view>
				<view class="footer-safe"></view>
			</view>
		</template>

		<uni-popup ref="addressPop" type="bottom" border-radius="10px 10px 0 0" background-color="#ffffff" :mask-click="false">
			<view class="address-pop">
				<view class="address-check">
					<view class="check-name" @click="addTop(1,fristData.index)">{{fristData.name}}</view>
					<view class="check-name" @click="addTop(2,fristData.index)">{{secondData.name}}</view>
					<view class="check-name" @click="addTop(3,secondData.index)">{{threeData.name}}</view>
				</view>
				<view class="address-scroll">
					<template v-if="fristData.list.length > 0">
						<view :class="fristData.index==indx?'item-name active':'item-name'" v-for="(item,indx) in fristData.list" :key="indx" @click="addClick(indx,1)">
							{{ item.text }}
							<view class="icon"><image src="/static/image/gou.svg"></image></view>
						</view>
					</template>
					<template v-if="secondData.list.length > 0">
						<view :class="secondData.index==indx?'item-name active':'item-name'" v-for="(item,indx) in secondData.list" :key="indx" @click="addClick(indx,2)">
							{{ item.text }}
							<view class="icon"><image src="/static/image/gou.svg"></image></view>
						</view>
					</template>
					<template v-if="threeData.list.length > 0">
						<view :class="threeData.index==indx?'item-name active':'item-name'" v-for="(item,indx) in threeData.list" :key="indx" @click="addClick(indx,3)">
							{{ item.text }}
							<view class="icon"><image src="/static/image/gou.svg"></image></view>
						</view>
					</template>
				</view>
				<view class="address-footer">
					<view class="footer-btn" @click="closeOrder">取消</view>
					<view class="footer-btn full" @click="checkAddress">确定</view>
				</view>
			</view>
		</uni-popup>

		<goodsDialog ref="goodsDialog" @send="sendGoods"></goodsDialog>
	</view>
</template>

<script>
var app;
import goodsDialog from '@/components/chat/goods';
import form from "@/static/js/form.js";
export default {
	components: {
		goodsDialog
	},
	data() {
		return {
			optionData:null,
			orderData:null,
			loading:false,
			cityData:[],
			addressForm:{},
			isSubmit:false,
			addressData:{
				name:"请选择",
				hide:null,
				list:[]
			},
			fristData:{
				index:null,
				name:"",
				list:[]
			},
			secondData:{
				index:null,
				name:"",
				list:[]
			},
			threeData:{
				index:null,
				name:"",
				list:[]
			},
			doneGoods:[]
		}
	},
	onLoad(options) {
		app = this;
		app.optionData = options;
		const eventChannel = this.getOpenerEventChannel();
		this.getOrder();
	},
	methods: {
		async submitOrder(){
			if (app.doneGoods.length == 0) return app.$dialog.showSuccess("请选择意向商品");
			var formData = this.addressForm;
			var validation = form.validation(formData,[
				{name:"nickname",rule:["required"],msg:["请输入姓名"]},
				{name:"mobile",rule:["required","isMobile"],msg:["请填写手机号码","手机号码格式错误"]},
				{name:"address",rule:["required"],msg:["请输入"]},
			]);
			if(validation){
				this.$dialog.showSuccess(validation);
				return false;
			}
			if (!app.addressData.hide) return app.$dialog.showSuccess("请选择地区");
			formData.goods = JSON.stringify(app.doneGoods);
			formData.city = JSON.stringify(app.addressData)
			formData.order = app.optionData.order
			app.isSubmit = true;
			var resp = await app.$api.order.address.post(formData);
			app.isSubmit = false;
			if (resp.code !== 1) return app.$dialog.showSuccess(resp.msg);
			app.$dialog.showSuccess(resp.msg);
			setTimeout(function(){
				const eventChannel = app.getOpenerEventChannel();
				eventChannel.emit('acceptKeepData', { msg: '会员信息已完善' });
				uni.navigateBack();
			},900)
		},
		chooseGoods(){
			this.$nextTick(()=>{
				this.$refs.goodsDialog.open().setData({"order":app.optionData.order,"num":app.orderData.number});
			})
		},
		sendGoods(data){
			app.doneGoods = data;
		},
		checkAddress(){
			if (!app.fristData.index) return this.$dialog.showSuccess("请完善地区信息！");
			if (!app.secondData.index) return this.$dialog.showSuccess("请完善地区信息～");
			if (!app.threeData.index) return this.$dialog.showSuccess("请完善地区信息");
			var fristData = app.cityData[app.fristData.index];
			var secondData = fristData.children[app.secondData.index];
			var threeData = secondData.children[app.threeData.index];
			app.addressData.name = fristData.text+"/"+secondData.text+"/"+threeData.text
			app.addressData.hide = fristData.text+secondData.text+threeData.text
			app.addressData.list = [fristData.value,secondData.value,threeData.value]
			app.$refs.addressPop.close()
		},
		addClick(indx,type) {
			if (type == 1) {
				app.fristData.index = indx;
				app.fristData.list = [];
				app.secondData.list = app.cityData[indx].children;
				app.fristData.name = app.cityData[indx].text;
			}
			if (type == 2) {
				app.secondData.index = indx;
				app.secondData.name = app.secondData.list[indx].text;
				app.threeData.list = app.secondData.list[indx].children;
				app.secondData.list = [];
			}
			if (type == 3) {
				app.threeData.index = indx;
				app.threeData.name = app.threeData.list[indx].text;
			}
		},
		addTop(type,index){
			if (type == 1) {
				app.fristData.list = app.cityData;
				app.secondData.list = [];
				app.secondData.index = null;
				app.secondData.name = null;
				app.threeData.list = [];
				app.threeData.index = null;
				app.threeData.name = null;
			}
			if (type == 2) {
				app.secondData.list = app.cityData[index].children;
				app.threeData.list = [];
				app.threeData.index = null;
				app.threeData.name = null;
			}
		},
		showAddress(){
			this.$refs.addressPop.open();
		},
		closeOrder(){
			this.$refs.addressPop.close();
		},
		addressChange(data){
			if (data.detail) {
				this.addressForm.city = JSON.stringify(data.detail.value);
			}
		},
		async getOrder(){
			app.loading = true;
			var res = await app.$api.order.detail.get({"order":app.optionData.order});
			app.loading = false;
			if (res.code && res.code == 0) {
				app.$dialog.showSuccess(res.msg);
				uni.navigateBack()
				return ;
			}
			app.orderData = res.data;
			app.getCity()
		},
		async getCity(){
			var resp = await app.$api.home.city.get();
			if (resp.code !== 1) return ;
			app.cityData = resp.data;
			app.fristData.index = 0;
			app.fristData.name = resp.data[0].text;
			app.fristData.list = resp.data
		}
	}
}
</script>

<style lang="scss" scoped>
.goods-item-check{
	margin: 20rpx;
	border: 2rpx solid $main-text-color;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 28rpx;
	color: $main-text-color;
	border-radius: 10rpx;
}
.address-pop{
	.address-check{
		display: flex;
		align-items: center;
		justify-content: space-around;
		color: $main-text-color;
		background-color: #f1f1f1;
		.check-name{
			flex: 1;
			text-align: center;
			padding: 30rpx 0;
		}
	}
	.address-scroll{
		height: 50vh;
		overflow: auto;
		padding: 20rpx;
		.item-name{
			padding: 20rpx;
			border-bottom: 2rpx solid #f1f1f1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.icon{
				display: none;
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
			&.active{
				color: $main-color;
				.icon{
					display: block;
				}
			}
		}
	}
	.address-footer{
		display: flex;
		align-items: center;
		justify-content: space-around;
		gap: 20rpx;
		padding: 20rpx;
		.footer-btn{
			background-color: #fff;
			border: 2rpx solid $main-text-color;
			border-radius: 10rpx;
			color: $main-text-color;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			flex: 1;
			&.full{
				border: 2rpx solid $main-color;
				background-color: $main-color;
				color: #fff;
			}
		}
	}
}
.content{
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #f1f1f1;
	display: flex;
	flex-direction: column;
	.line-height{
		height: 40rpx;
		width: 100%;
	}
}

.form-feedbak{
	background-color: #fff;
	border-radius: 20upx;
}
.form-feedbak .title{
	line-height: 80upx;
	font-size: 28upx;
}
.form-feedbak .title text{
	color: #f00;
	margin-right: 10upx;
}
.form-feedbak .form-textarea{
	background-color: #f8f8f8;
	padding: 20upx;
}
.order-body {
	width: 95%;
	margin: 20rpx auto;
	.order-info{
		border-radius: 20rpx;
		background-color: #fff;padding: 20upx;margin-top: 20upx;
		.title-h{
			font-size: 32upx;color: #333;font-weight: bold;margin-bottom: 20rpx;
			text {
				font-size: 28rpx;
				color: #666;
				font-weight: normal;
				margin-left: 20rpx;
			}
		}

	}
	.item-goods{
		background-color: #fff;
		margin-top: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;
		.item-goods-body{
			display: flex;
			align-items: center;
			gap: 20rpx;
		}
		.stock{
			text-align: right;
		}
		.image {
			height: 140rpx;
			overflow: hidden;display: flex;align-items: center;min-width: 140rpx;
			position: relative;
			image {
				width: 140rpx;
				border-radius: 10upx;
				height: 100%;
			}
		}
		.info{
			flex: 1 1 0%;
			overflow: hidden;
			.title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.name {
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 32rpx;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					 -webkit-box-orient: vertical;
					color: #333;
					font-weight: 900;
				}
			}
			.price-right{
				text-align: right;
				color: $main-color;
				margin-top: 20rpx;
				font-size: 28rpx;
				text {
					font-size: 30rpx;
					font-weight: 800;
				}
			}
			.tags {
				color: #94a3b8;
				font-size: 24rpx;
				margin: 10rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.price {
					font-size: 28rpx;
					color: $main-text-color;
					font-weight: 600;
				}
			}
		}
	}
}
.goods-body{
	height: 0;
	flex: 1;
}
.footer{
	background-color: #fff;
	padding: 20upx 20upx 0 20upx;border-top: 2upx solid #f8f8f8;
	.footer-safe {
		height: env(safe-area-inset-bottom);width: 100%;
	}
	.footer-op{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.footer-right{
			display: flex;
			align-items: center;
			gap: 20rpx;
			flex: 1;
			.btn{
				width: 100%;
				font-size: 28rpx;
				height: 80upx;
				border-radius: 10upx;
				line-height: 80upx;
				text-align: center;
				min-width: 200rpx;
				color: #333;
				border: 2rpx solid #ccc;
				&.full{
					background-color: $main-color;
					color: #fff;
					border: 2rpx solid $main-color;
				}
			}
		}
	}
}
</style>