InventoryOrderingxcx/pages/goods/goodDetail/goodDetail.vue

<template>
	<view class="good__detail">
		<!-- 轮播图 -->
		<view class="good__detail-swiper">
			<!-- <u-swiper :list="list6" @change="e => currentNum = e.current" :autoplay="false" indicatorStyle="right: 20px"
				:height='400'>
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
				</view>
			</u-swiper> -->
			<swiper class="swiper" @change="swiperChange" style="height:400px">
				<swiper-item v-for="item in list1" :key="item">
					<image :src="item" class="swiper-img" mode="aspectFit" @click="preview(item)"></image>
				</swiper-item>
			</swiper>
			<view class="indicator">
				<text class="indicator__text">{{ currentIndex + 1 }}/{{ list1.length }}</text>
			</view>
		</view>
		<!-- 商品信息区域 -->
		<view class="good__detail-info-box">
			<!-- 商品名称 -->
			<view class="good__detail-name">{{detailData.productName}}</view>
			<!-- 商品信息 -->
			<view class="good__detail-info-body">
				<view class="info-item" @click="showSpec = true">
					<view class="item__label">规格</view>
					<view class="item-1">
						<view class="item-1-1">
							<view class="item-1-1-placeholder" v-if="!businessInfo.spec.length">请选择规格</view>
							<view class="item-1-1-name" v-else v-for="item in getSpecName(businessInfo.spec)"
								:key="item.tagKey">
								{{ item}}
							</view>
						</view>
						<u-icon name="arrow-right" color="#606266" size="16"></u-icon>
					</view>
				</view>
				<view class="info-item">
					<view class="item__label">数量</view>
					<u-number-box v-model="businessInfo.tradeCount">
						<view slot="minus" class="minus">
							<u-icon name="minus" size="12"></u-icon>
						</view>
						<text slot="input" style="text-align: center;" class="input">{{businessInfo.tradeCount}}</text>
						<view slot="plus" class="plus">
							<u-icon name="plus" size="12"></u-icon>
						</view>
					</u-number-box>
				</view>
				<view class="info-item">
					<view class="item__label">交易</view>
					<view>
						<u-radio-group v-model="businessInfo.tradeType">
							<u-radio label="购买" name="0" :size='16' :customStyle="{marginRight: '40px'}"></u-radio>
							<u-radio label="借用" name="1" :size='16'></u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="info-item">
					<view class="item__label">物流</view>
					<view>
						<u-radio-group v-model="businessInfo.expressType">
							<u-radio label="到付" :size='16' name="0" :customStyle="{marginRight: '40px'}"></u-radio>
							<u-radio label="寄付" :size='16' name="1"></u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="info-item" @click="showAddress = true">
					<view class="item__label ">送至</view>
					<view class="item__label-address">
						<view class="item__label-placeholder"
							v-if="!form.contactsName && !form.contactsPhone && !form.address && !form.fullAddress">
							请选择收货地址
						</view>
						<view class="item__label-text" v-else>
							<view class="item__label-text1">
								{{form.address}}{{form.fullAddress}}
							</view>
							<view class="item__label-text2">
								<text class="label-text2-name">{{form.contactsName}}</text>
								<text class="label-text2-phone">{{form.contactsPhone}}</text>
							</view>
						</view>
						<u-icon name="arrow-right" color="#606266" size="16"></u-icon>
					</view>
				</view>
			</view>
			<!-- 商品介绍 -->
			<view class="good__detail-intro">
				<view class="intro-title">商品介绍</view>
				<view class="intro-info">
					<text class="intro-info-text">{{detailData.productDesc}}</text>
				</view>
			</view>
		</view>
		<!-- 去下单 -->
		<view class="go-order-btn">
			<u-button type="primary" text="去下单" @click="goOrderOk(id)"></u-button>
		</view>

		<!-- 规格选择 -->
		<view class="popupOverflow">
			<u-popup :show="showSpec" @close="closeSpec" closeable>
				<view class="popup-content">
					<view class="spec-select-top">
						<text class="select-top-text">规格选择</text>
					</view>
					<view class="scroll-container">
						<SpecSelect @changeSelect='changeSelect' :list="list" />
					</view>
				</view>
			</u-popup>
		</view>

		<!-- 送至 -->
		<u-popup :show="showAddress" @close="closeAddress" @open="openAddress" closeable>
			<view class="popup-content">
				<view class="spec-select-top">
					<text class="select-top-text">配送至</text>
				</view>
				<u--form :model="form" :rules="rules" ref="uForm" labelWidth='100' :labelStyle="{color:'#868990'}">
					<u-form-item label="收货人" prop="name" borderBottom>
						<u--input v-model="form.contactsName" placeholder="请输入收货人"></u--input>
					</u-form-item>
					<u-form-item label="收货人手机号" prop="contactsPhone" borderBottom>
						<u--input v-model="form.contactsPhone" placeholder="请输入收货人手机号"></u--input>
					</u-form-item>
					<!-- <u-form-item label="收货地址" prop="address" borderBottom @click='show = !show'> -->
					<u-form-item label="收货地址" prop="address" borderBottom>
						<picker :value="valueIndex" class="spec-select-bottom" mode="multiSelector" :range="addressList"
							range-key="name" @change="changeValue" @columnchange="changeColumn">
							<view v-if="!result_show" class="select-address">
								<view style="color:#c0c4cc;font-size:15px;">
									请选择省/市/区</view>
								<view><u-icon name="arrow-right" color="#c0c4cc"></u-icon></view>
							</view>
							<view v-else>
								{{result_show}}
							</view>
						</picker>
					</u-form-item>
					<u-form-item label="详细地址" prop="fullAddress" borderBottom>
						<u--input v-model="form.fullAddress" placeholder="请输入详细地址"></u--input>
					</u-form-item>
				</u--form>
				<view class="btn">
					<u-button type="primary" text="确定" @click="submit"></u-button>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import SpecSelect from '../../../components/specSelect.vue'
	import {
		getGoodsDetail,
	} from '@/api/goods.js'
	import {
		getUserInfo,
		updateUserInfo,
		getProvince,
		getCity,
		getArea
	} from '@/api/login.js'
	export default {
		components: {
			SpecSelect,
		},
		onLoad(option) {
			this.id = option.id;
			this.fetchData(option.id)
			let value = this.result_show;
			value = value ? value : ''
			this.getAddressList(-1, 0, value)
			getUserInfo().then(res => {
				this.form.companyName = res.data.companyName
				this.form.provinceId = res.data.provinceId //省
				this.form.cityId = res.data.cityId //市
				this.form.areaId = res.data.areaId //区
				this.result_show = res.data.provinceName + ' ' + res.data.cityName + ' ' + res.data.areaName
				this.form.address = res.data.provinceName + ' ' + res.data.cityName + ' ' + res.data.areaName
				this.form.fullAddress = res.data.companyAddress
				this.form.contactsName = res.data.contactsName
				this.form.contactsPhone = res.data.contactsPhone
			}).catch(err => {});
		},
		data() {
			return {
				id: '',
				detailData: {},
				list1: [], //轮播图
				list: [], //规格数据
				currentIndex: 0, //轮播图
				addressList: [],
				valueIndex: [],
				result: [],
				result_show: '',
				areaCodeId: [], //省市区的id
				showSpec: false,
				showAddress: false,
				businessInfo: {
					spec: [],
					tradeCount: 1,
					tradeType: '1', //交易方式
					expressType: '1', //物流方式
					fullAddress: '' //收货地址
				},
				rules: {},
				form: {
					contactsName: '',
					contactsPhone: '',
					address: '', //省市区
					provinceId: '', //省
					cityId: '', //市
					areaId: '', //区
					fullAddress: '' //收货地址
				},
				showLocation: false,
			};
		},
		methods: {
			// 获取详情数据
			async fetchData(id) {
				const res = {
					productId: id
				}
				this.list = []
				const result = await getGoodsDetail(res)
				console.log(result, 'result');
				this.detailData = result.data
				this.list1 = result.data.productImages
				const list = JSON.parse(result.data.productAttr)
				const arr = list.map(item => {
					return {
						...item,
						inputValue: item.featureType == 1 ? "" : []
					}
				})
				this.list.push(...arr)
				// console.log(this.list, 'this.list');
			},
			// 轮播图
			swiperChange(event) {
				this.currentIndex = event.detail.current;
			},
			// 预览图片
			preview() {
				uni.previewImage({
					current: this.list1,
					urls: this.list1,

				});
			},
			// 规格选择
			changeSelect(value) {
				if (!value.length) {
					this.$refs.uToast.show({
						type: 'default',
						title: '默认主题',
						message: "请选择规格",
						//duration: 20000
					})
					console.log(value, '接收到的数据')
					return
				}
				console.log(value, 'valuevalue')
				this.businessInfo.spec = value
				this.closeSpec()
			},
			getSpecName(arr) {
				const values = []
				arr.forEach(v => {
					v.selectData.forEach(j => {
						values.push(j.name)
					})
				})
				return values
			},
			closeSpec() {
				this.showSpec = false
			},
			closeAddress() {
				this.showAddress = false
			},
			openAddress() {
				this.showAddress = true
				let value = this.result_show;
				value = value ? value : ''
				this.getAddressList(-1, 0, value)
			},
			// 送至确定
			submit() {
				if (!this.form.contactsName) {
					wx.showToast({
						title: '收货人不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.form.contactsPhone) {
					wx.showToast({
						title: '收货人手机号不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.form.address) {
					wx.showToast({
						title: '收货地址不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.form.fullAddress) {
					wx.showToast({
						title: '详细地址不能为空',
						icon: 'none'
					})
					return
				}
				this.closeAddress()
			},
			// 去下单
			goOrderOk(id) {
				if (!this.businessInfo.spec.length) {
					wx.showToast({
						title: '请选择规格',
						icon: 'none'
					})
					return
				}
				if (!this.form.address) {
					wx.showToast({
						title: '收货地址不能为空',
						icon: 'none'
					})
					return
				}
				console.log(this.businessInfo, this.form);
				this.confirmSelection()
				uni.navigateTo({
					url: `/pages/goods/orderOK/orderOK?id=${id}`
				})
			},
			// 存储信息
			confirmSelection() {
				const app = getApp();
				app.globalData.selectedInfo = {
					productImages: this.detailData.productImages[0],
					productName: this.detailData.productName,
					productDesc: this.detailData.productDesc,
					productAttr: this.businessInfo.spec,
					tradeCount: this.businessInfo.tradeCount,
					tradeType: this.businessInfo.tradeType,
					expressType: this.businessInfo.expressType,
					contactsName: this.form.contactsName,
					contactsPhone: this.form.contactsPhone,
					provinceId: this.form.provinceId,
					cityId: this.form.cityId,
					areaId: this.form.areaId,
					receiveAddress: this.form.fullAddress,
					address: this.form.address
				};
			},

			//获取省市区列表并赋值
			async getAddressList(column = -1, index = 0, value) {
				let {
					addressList,
					valueIndex,
					result,
					result_show,
					areaCodeId
				} = this;
				let oneList = []
				let twoList = []
				let threeList = []
				if (column <= -1) {
					await getProvince().then(provinceList => {
						oneList = provinceList.data;
						if (value) {
							index = provinceList.data.findIndex((item) => {
								return item.name == value[0]
							});
							index = (index > -1) ? index : 0
						} else {
							index = 0
						}
					});
					this.$set(addressList, 0, oneList)
				};
				if (column <= 0) {
					valueIndex[0] = index;
					result[0] = addressList[0][index].name
					areaCodeId[0] = addressList[0][index].areaCodeId
					await getCity(addressList[0][(index || 0)].areaCodeId).then(cityList => {
						twoList = cityList.data;
						if (value) {
							index = cityList.data.findIndex((item) => {
								return item.name == value[1]
							});
							index = (index > -1) ? index : 0
						} else {
							index = 0
						}
					})
					this.$set(addressList, 1, twoList)
					this.$set(valueIndex, 1, index)
					result[1] = addressList[1][index].name; // 更新result数组的第二个元素
					areaCodeId[1] = addressList[1][index].areaCodeId; // 更新result数组的第二个元素
				}

				if (column <= 1) {
					valueIndex[1] = index;
					result[1] = addressList[1][index].name
					areaCodeId[1] = addressList[1][index].areaCodeId;
					await getArea(addressList[1][(index || 0)].areaCodeId).then(areaList => {
						threeList = areaList.data;
						if (value) {
							index = areaList.data.findIndex((item) => {
								return item.name == value[2]
							});
							index = (index > -1) ? index : 0
						} else {
							index = 0
						}
					})
					this.$set(addressList, 2, threeList)
					this.$set(valueIndex, 2, index)
					result[2] = addressList[2][index].name; // 更新result数组的第3个元素
					areaCodeId[2] = addressList[2][index].areaCodeId;
				}
				if (column <= -1 && !value) {
					result = [];
					result_show = ''
				}
				this.valueIndex = valueIndex;
			},
			//改变列时
			changeColumn(e) {
				// console.log(e);
				let column = e.detail.column;
				let index = e.detail.value;
				this.getAddressList(column, index)
			},
			// 点击确定时
			changeValue(e) {
				let {
					valueIndex,
					result,
					result_show,
					areaCodeId,
				} = this;
				valueIndex = e.detail.value;
				valueIndex.forEach((item, index) => {
					if (this.addressList[index][item]) {
						result[index] = this.addressList[index][item].name
						areaCodeId[index] = this.addressList[index][item].areaCodeId;
					}
				});
				result_show = result.join(' ');
				this.result_show = result_show
				this.form.address = result_show
				this.areaCodeId = areaCodeId
				this.form.provinceId = this.areaCodeId[0]
				this.form.cityId = this.areaCodeId[1]
				this.form.areaId = this.areaCodeId[2]
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popupOverflow {
		height: 100vh;
		overflow: auto;
	}

	.scroll-container {
		max-height: 600px;
		/* 设置滚动容器的最大高度，超出时将出现滚动条 */
		overflow-y: auto;
		/* 设置滚动容器的纵向overflow属性为auto，以便出现纵向滚动条 */
	}

	.good__detail {
		width: 100%;
		position: relative;
	}

	// 轮播图
	.good__detail-swiper {
		position: relative;
		background-color: #FFFFFF;

		.swiper-img {
			width: 100%;
			height: 400px;
		}

		.indicator {
			position: absolute;
			margin-top: -55px;
			margin-left: 630rpx;
			padding: 5px 12px;
			background-color: rgba(0, 0, 0, 0.35);
			border-radius: 100px;
			@include flex;
			justify-content: center;
			z-index: 1;

			&__text {
				color: #FFFFFF;
				font-size: 12px;
			}
		}
	}

	// 商品信息区域
	.good__detail-info-box {
		position: absolute;
		top: 385px;
		//height: 907px;
		width: 100%;
		border-radius: 15px;
		background-color: #fff;

		// 商品名称
		.good__detail-name {
			padding: 24px 16px 16px;
			color: #333;
			font-size: 20px;
			font-weight: 700;
			line-height: 30px;
		}

		// 商品信息
		.good__detail-info-body {
			padding: 0 16px;
			box-sizing: border-box;

			.info-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20px 0;
				border-bottom: 1px solid #f3f4f6;

				// 左边lable
				.item__label {
					color: #606266;
					font-size: 15px;
					width: 30px;
					font-weight: 400;
				}

				.item__label-address {
					display: flex;
					max-width: 298px;

					.item__label-placeholder {
						color: #B1B4BA;
						margin-right: 8px;
						font-size: 15px;
						font-weight: 500;
						text-align: right;
						width: 100%;

					}

					.item__label-text {
						margin-right: 8px;

						.item__label-text1 {
							color: #333;
							text-align: right;
							font-size: 15px;
							font-weight: 500;
							// overflow: hidden;
							// white-space: nowrap;
							// text-overflow: ellipsis;
						}

						.item__label-text2 {
							color: #333;
							text-align: right;
							font-size: 15px;
							font-weight: 500;

							.label-text2-name {
								margin-right: 10px;
							}
						}
					}

				}

				.minus {
					width: 31px;
					height: 31px;
					background: #F2F3F5;
					border-radius: 4px 0px 0px 4px;
					@include flex;
					// display: flex;
					justify-content: center;
					align-items: center;
				}

				.input {
					width: 78px;
					height: 31px;
					line-height: 31px;
					margin: 0 2px;
					background: #F2F3F5;
				}

				.plus {
					width: 31px;
					height: 31px;
					border-radius: 0px 4px 4px 0px;
					background: #F2F3F5;
					@include flex;
					justify-content: center;
					align-items: center;
				}

				// 请选择规格
				.item-1 {
					// flex: 1;
					display: flex;
					// justify-content: end;
					// flex-wrap: nowrap;
					// margin-left: 10px;
					max-width: 298px;


					.item-1-1 {
						// width: 300px;
						// max-width: 270px;
						white-space: nowrap;
						overflow: auto;
						// text-overflow: ellipsis;
						text-align: right;
						display: flex;
						align-items: center;
						margin-right: 8px;

						.item-1-1-placeholder {
							color: #B1B4BA;
							// margin-right: 8px;
							font-size: 15px;
							font-weight: 500;
							text-align: right;
							width: 100%;
						}

						.item-1-1-name {
							color: #000;
							text-align: right;
							font-size: 15px;
							font-weight: 500;
							display: flex;
							padding: 4px 12px;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							border-radius: 8px;
							background: #F2F3F5;
							margin-right: 8px;

							&:last-child {
								margin-right: 0;
							}
						}

					}
				}
			}
		}

		// 商品介绍
		.good__detail-intro {
			margin-top: 40px;
			padding: 0 16px;
			// margin-bottom: 48px;
			margin-bottom: 116px;

			.intro-title {
				color: #333;
				font-size: 17px;
				font-weight: 500;
			}

			.intro-info {
				border-radius: 8px;
				background: #F1F7FF;
				padding: 20px 17px 20px 18px;
				margin-top: 10px;

				.intro-info-text {
					color: #4A5562;
					font-size: 16px;
					font-weight: 400;
					text-indent: 2em;
					display: inline-block;
					text-align: justify;
					line-height: 22px;

				}
			}
		}
	}

	.popup-content {
		padding: 16px;
		box-sizing: border-box;

		.spec-select-top {
			margin-bottom: 12px;

			.select-top-text {
				color: #333;
				font-size: 18px;
				font-weight: 400;
			}
		}

		.select-address {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.spec-select-bottom {
			padding: 8px 9px;
			font-size: 15px;
		}

		.btn {
			background-color: #fff;
			margin-top: 248px;
			// height: 112px;
			width: 100%;
			text-align: center;
			padding: 10px 14px 50px 14px;
			box-sizing: border-box;
			// background-color: red;
		}
	}

	.go-order-btn {
		background-color: #fff;
		position: fixed;
		bottom: 0;
		// height: 112px;
		width: 100%;
		text-align: center;
		padding: 10px 30px 50px 30px;
		box-sizing: border-box;
	}

	::v-deep .u-fade-enter-active {
		z-index: 10075 !important;
	}

	::v-deep .u-button {
		height: 50px !important;
	}

	// 省市区
	::v-deep .u-transition .u-slide-up-enter-active {
		height: 380px;
	}

	::v-deep .u-picker__view__column {
		padding-top: 80px;
		/* margin-top: 50px; */
	}
</style>