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-title">请选择地区</view>
				<view class="address-scroll">
					<picker-view :indicator-style="indicatorStyle" :value="pickerValue"  @change="bindChange" :range="columns" class="picker-view">
						<picker-view-column v-for="(col, colIndex) in columns" :key="colIndex">
						  <view class="item" v-for="(item, itemIndex) in col" :key="itemIndex">
							{{ item.text }}
						  </view>
						</picker-view-column>
					</picker-view>
				</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 {
			indicatorStyle: `height: 50px;backgroud-color:#f1f1f1`,
			columns: [
			  [], // 省列表
			  [], // 市列表
			  []  // 区列表
			],
			pickerValue: [0, 0, 0],
			optionData:null,
			orderData:null,
			loading:false,
			cityData:[],
			secondData:[],
			dayData:[],
			addressForm:{},
			isSubmit:false,
			addressData:{
				name:"请选择",
				hide:null,
				list:[]
			},
			doneGoods:[],
			selectedProvince: null,
			selectedCity: null,
			selectedArea: null
		}
	},
	onLoad(options) {
		app = this;
		app.optionData = options;
		const eventChannel = this.getOpenerEventChannel();
		this.getOrder();
	},
	methods: {
		checkAddress(){
			app.addressData.hide = app.selectedProvince.text+app.selectedCity.text+app.selectedArea.text;
			app.addressData.name = app.selectedProvince.text+"/"+app.selectedCity.text+"/"+app.selectedArea.text;
			app.addressData.list = [app.selectedProvince.value,app.selectedCity.value,app.selectedArea.value];
			this.$refs.addressPop.close();
		},
		bindChange(e){
			const val = e.detail.value; // 例如 [2, 1, 0]
			let [provinceIdx, cityIdx, areaIdx] = val;
			// ---------- 第一步：根据省索引，更新市列表 ----------
			const province = this.cityData[provinceIdx];
			const newCityCol = province?.children || [];

			// 【关键】如果当前城市索引超出新列表范围，强制置为 0
			if (cityIdx >= newCityCol.length) {
			  cityIdx = 0;
			}
			// 如果新列表为空（没有市），cityIdx 只能为 0，且后续区列表为空
			const city = newCityCol[cityIdx] || null;

			// ---------- 第二步：根据市索引，更新区列表 ----------
			const newAreaCol = city?.children || [];

			// 【关键】如果当前区索引超出新区列表范围，强制置为 0
			if (areaIdx >= newAreaCol.length) {
			  areaIdx = 0;
			}
			const area = newAreaCol[areaIdx] || null;

			// ---------- 第三步：同时更新 columns 和 pickerValue ----------
			// 注意：必须将修正后的 [provinceIdx, cityIdx, areaIdx] 重新赋值给 pickerValue
			app.columns = [
			  app.cityData,      // 省列不变
			  newCityCol,         // 更新后的市列
			  newAreaCol          // 更新后的区列
			];
			app.pickerValue = [provinceIdx, cityIdx, areaIdx];

			// ---------- 第四步：保存选中的完整数据（用于提交） ----------
			app.selectedProvince = province;
			app.selectedCity = city;
			app.selectedArea = area;
		},
		async submitOrder(){
			// if (app.doneGoods.length == 0) return app.$dialog.showSuccess("请选择意向商品");
			var formData = app.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;
		},
		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;
			const provinceCol = app.cityData;
			// 2. 第二列：第一个省的 children（市）
			const firstProvince = provinceCol[0];
			const cityCol = firstProvince?.children || [];
			// 3. 第三列：第一个市的 children（区）
			const firstCity = cityCol[0];
			const areaCol = firstCity?.children || [];
			app.columns = [provinceCol, cityCol, areaCol];
			app.pickerValue = [0, 0, 0];
			app.selectedProvince = firstProvince;
			app.selectedCity = firstCity;
			app.selectedArea = areaCol[0] || null;
		}
	}
}
</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-title{
		font-size: 32rpx;
		font-weight: bold;
		padding: 20rpx;
	}
	.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: hidden;
		padding: 20rpx;
		.picker-view{
			height: 50vh;
			.item{
				line-height: 100rpx;
				text-align: center;
			}
		}
		.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>