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">{{ 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">完善信息</view>
						<view class="form-feedbak">
							<view class="title"><text>*</text>姓名</view>
							<view class="form-textarea">
								<input :value="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 :value="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 :value="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-left"></view>
					<view class="footer-right">
						<view class="btn">再次购买</view>
					</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">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
var app;
export default {
	data() {
		return {
			optionData:null,
			orderData:null,
			loading:false,
			cityData:[],
			addressForm:{},
			addressData:{
				index:0,
				name:"请选择"
			},
			fristData:{
				index:null,
				name:"",
				list:[]
			},
			secondData:{
				index:null,
				name:"",
				list:[]
			},
			threeData:{
				index:null,
				name:"",
				list:[]
			},
		}
	},
	onLoad(options) {
		app = this;
		app.optionData = options;
		this.getOrder();
	},
	methods: {
		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>
.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;}

	}
	.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;
			.btn{
				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>