shop-applet/pages/product/addGoodDetail/goodsAttr.vue

<template>
	<view class="content">
		<u--form :model="model1" :rules="rules" ref="uForm" labelPosition="left"
			:labelStyle="{fontSize:'32rpx',color:'#444444'}" labelWidth='120' borderBottom>

			<view class="description">
				产品属性
			</view>
			<view class="label-cls">
				<u-form-item label="产地" prop="userInfo.name" ref="item1">
					<view style="display: flex;align-items: center;font-size: 28rpx;color:#777777 ;" slot="right"
						@click="showPouple=true,popType='place'">
						<view style="margin-right: 10rpx;line-height: 25rpx;">请选择</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</u-form-item>

				<u-form-item label="商品等级" prop="userInfo.name" ref="item1">
					<view style="display: flex;align-items: center;font-size: 28rpx;color:#777777 ;" slot="right"
						@click="showPouple=true,popType='leval'">
						<view style="margin-right: 10rpx;line-height: 25rpx;">{{formData.leval||'请选择'}}</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="货品包装" prop="userInfo.name" ref="item1">
					<view style="display: flex;align-items: center;font-size: 28rpx;color:#777777 ;" slot="right"
						@click="showPouple=true,popType='packing'">
						<view style="margin-right: 10rpx;line-height: 25rpx;">{{formData.pack||'请选择'}}</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</u-form-item>
			</view>
			<view class="description" style="display: flex;justify-content: space-between;align-items: center">
				<text>产品属性</text>
				<view class="attr-custom" @click="attr.push({label:'',value:''})">
					<u-icon name="plus" color='#20B128' style="margin-right: 8rpx;font-weight: bold;"></u-icon> 自定义
				</view>
			</view>
			<view class="label-cls"
				style="display: flex;padding: 20rpx 20rpx 20rpx 2rpx;justify-content: space-between;margin-bottom: 30rpx;"
				v-for="(item,index) in attr">
				<view class="" style="display: flex;width: 70%;align-items: center;">
					<u--input placeholder="请填写属性名称" border="surround" v-model="item.label"></u--input>
					<u-line direction="col" length="40rpx" color="#CECECE"></u-line>
					<u--input placeholder="请填写属性值" border="surround" v-model="item.value"></u--input>
					<u-line direction="col" length="40rpx" color="#CECECE"></u-line>
				</view>
				<view style="color: #777777;display: flex; align-items: center;" @click="attr.splice(index, 1);">
					<u-icon name="trash" style='margin-right: 8rpx;'></u-icon> 删除
				</view>
			</view>
		</u--form>
		<view class="submit-btn">
			<u-button type="primary" shape="circle" text="保存"></u-button>
		</view>


		<u-popup :show="showPouple" @close="showPouple=false" @open="showPouple=true" :round="10">
			<view class="RegularFont" style="padding: 42rpx 40rpx">
				<view class="pop-head">
					<text v-if="popType=='place' || !show " @click="showPouple=false">取消</text>
					<text v-else @click="show=false"><u-icon name="arrow-left" size="20"></u-icon></text>
					<text
						style="font-size:32rpx ;color:#333333 ;">{{popType=='place'?'商品产地': popType=='leval'?'商品等级':'商品包装'  }}
					</text>
					<text @click="confirm">确定</text>
				</view>
				<!-- 地区 -->
				<view v-if="popType=='place'">
					<view class="Positioning " style="color: #989898;margin-bottom: 30rpx;">
						<view class="" style="display: flex;">
							<u-icon name="map" style='margin-right: 8rpx;'></u-icon>
							<text>{{address.province}}{{address.city}}{{address.district}}</text>
						</view>
						<view class="" @click="getLocation">
							刷新定位
						</view>
					</view>
					<u-line color="#CECECE"></u-line>
					<view class="province">
						<view class="province-li" @click='positionType=0,positionList=provinceList'
							:style="{color:positionType==0?'#20B128':'#707070'} ">
							{{address.province||'请选择' }}
						</view>
						<view class="province-li" @click='positionType=1,positionList=cityList'
							:style="{color:positionType==1?'#20B128':'#707070'} ">
							{{address.city ||'请选择'}}
						</view>
						<view class="province-li" @click='positionType=2,positionList=districtList'
							:style="{color:positionType==2?'#20B128':'#707070'} ">
							{{address.district ||'请选择'}}
						</view>
						<view class="province-line" :style="{left:positionType*130+30+'rpx'}" />
					</view>
					<u-line color="#CECECE"></u-line>
					<view class="" style="color:#989898;font-size:24rpx ;margin-top: 40rpx;">
						请选择
					</view>
					<view class="position-content">
						<view class="position-li" :class="{act:address['province']==item}" v-for="item in positionList"
							@click="chosePosition(item)">
							<text>
								{{item}}
							</text>
							<u-icon v-if='address.province==item' name="checkbox-mark" color="#38BE41"
								style='margin-left: 8rpx;'></u-icon>
						</view>

					</view>

				</view>
				<!-- 地区结束 -->

				<!-- 商品等级 -->
				<view v-if="popType=='leval'" style="height: 500rpx;">
					<u-transition :show="!show" mode="slide-right">
						<view class="goods-leval">
							<view class="goods-leval-li" :class="{act:formData.leval==item}" v-for='item in levalList'
								@click="formData.leval=item,showPouple=false">
								{{item}}
							</view>
							<view class="goods-leval-li " style="display: flex;color:#38BE41;" @click="show=true">
								<u-icon name="plus" color="#38BE41" style='margin-right: 8rpx;'></u-icon> 自定义
							</view>
						</view>
					</u-transition>
					<u-transition :show="show" mode="slide-left">
						<view class="transition">
							<u--textarea v-model="selfLeval" placeholder="请输入商品等级"></u--textarea>
						</view>
					</u-transition>
				</view>
				<!-- 商品等级结束 -->

				<!-- 商品包装 -->
				<view v-if="popType=='packing'" style="height: 500rpx;">
					<u-transition :show="!show" mode="slide-right">
						<view class="goods-leval">
							<view class="goods-leval-li" :class="{act:formData.pack==item}" v-for='item in packList'
								@click="formData.pack=item,showPouple=false">
								{{item}}
							</view>

							<view class="goods-leval-li " style="display: flex;color:#38BE41 ;" @click="show=true">
								<u-icon name="plus" color="#38BE41" style='margin-right: 8rpx;'></u-icon> 自定义
							</view>
						</view>
					</u-transition>
					<u-transition :show="show" mode="slide-left">
						<view class="transition">
							<u--textarea v-model="selfPack" placeholder="请输入商品等级"></u--textarea>
						</view>
					</u-transition>
				</view>
			</view>
		</u-popup>



	</view>
</template>

<script>
	import {
		getGeocoder,
	} from '@/api/store.js';
	export default {

		data() {
			return {

				provinceList: [
					"北京市",
					"天津市",
					"河北省",
					"山西省",
					"内蒙古自治区",
					"辽宁省",
					"吉林省",
					"黑龙江省",
					"上海市",
					"江苏省",
					"浙江省",
					"安徽省",
					"福建省",
					"江西省",
					"山东省",
					"河南省",
					"湖北省",
					"湖南省",
					"广东省",
					"广西壮族自治区",
					"海南省",
					"重庆市",
					"四川省",
					"贵州省",
					"云南省",
					"西藏自治区",
					"陕西省",
					"甘肃省",
					"青海省",
					"宁夏回族自治区",
					"新疆维吾尔自治区",
					"台湾省",
					"香港特别行政区",
					"澳门特别行政区"
				],
				cityList: [
					"成都市",
					"自贡市",
					"攀枝花市",
					"泸州市",
					"德阳市",
					"绵阳市",
					"广元市",
					"遂宁市",
					"内江市",
					"乐山市",
					"南充市",
					"眉山市",
					"宜宾市",
					"广安市",
					"达州市",
					"雅安市",
					"巴中市",
					"资阳市",
					"阿坝藏族羌族自治州",
					"甘孜藏族自治州",
					"凉山彝族自治州"
				],
				districtList: ['江阳区', '牛马塔努', '需用唉', '泸县'],
				positionList: [],
				areaList: [],
				districtList: [],
				posType: {

				},
				selfLeval: "",
				levalList: [
					"撒旦",
					"撒旦",
					"撒旦",
					"撒旦",

				],
				selfPack: "",
				packList: [
					"纸箱子",
					"纸箱子",
					"纸箱子",
				],
				address: {
					province: '',
					city: "",
					district: ""
				},
				attr: [{
					label: "",
					value: ''
				}],
				show: false,
				popType: 'leval',
				showPouple: false,
				showSex: false,
				positionType: 0,

				formData: {
					leval: "",
					pack: "",
				},

				model1: {
					userInfo: {
						name: '',
						sex: '',
					},
				},
				value1: "",
				value: '',

				text: "",
				text1: "",
				value1: "",
				checkboxValue1: [],
				checkboxList1: [{
						name: '到店核销',
					},
					{
						name: '快递配送',
					},

				],
				rules: {
					// 'userInfo.name': {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请填写姓名',
					// 	trigger: ['blur', 'change']
					// },
					// 'userInfo.sex': {
					// 	type: 'string',
					// 	max: 1,
					// 	required: true,
					// 	message: '请选择男或女',
					// 	trigger: ['blur', 'change']
					// },
				},
				radio: '',
				switchVal: false
			};
		},
		methods: {
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.uForm.validateField('userInfo.sex')
			},
			navgo(url) {
				uni.navigateTo({
					url
				})
			},
			confirm() {
				if (this.popType == 'place') {
					console.log('')
				} else if (this.popType == 'leval') {
					this.levalList.push(this.selfLeval)
					this.formData.leval = this.levalList[this.levalList.length - 1]
					this.selfLeval = ''

				} else if (this.popType == 'packing') {
					this.packList.push(this.selfPack)
					this.formData.pack = this.packList[this.packList.length - 1]
					this.selfPack = ''
				}
				this.show = false
				this.showPouple = false
			},
			chosePosition(item) {
				this.address.province = item
				this.address.city = ''
				this.address.district = ''

			},
			getLocation() {
				let that = this
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						getGeocoder({
							lat: res.latitude,
							long: res.longitude
						}).then(res1 => {
							that.address = res1.data.address_component
							that.positionList = that.provinceList
							// this.$store.commit('setLocation', res.data)
							// this.street = res.data.address_component.street
							console.log(that.address, 'res')
						}).catch(err => {
							uni.showToast({
								title: err,
								icon: 'none'
							})
						})


					}
				});
			}

		},
		onLoad() {
			this.getLocation()
		}

	};
</script>

<style lang='scss'>
	.MediumFont {
		font-family: PingFangFamily;
	}

	.RegularFont {
		font-family: PingFangRegular;
	}

	.content {
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #F1F1F1;
		min-height: 100vh;
		position: relative;
		font-size: 28rpx;
		font-family: PingFangFamily;
	}

	.label-cls {
		background-color: white;
		padding: 8rpx 30rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.description {
		background-color: #F1F1F1;
		padding: 30rpx 0rpx;
		font-size: 28rpx;
		color: #777777;
		width: 690rpx;
	}

	.attr-custom {
		display: flex;
		align-items: center;
		border: 1px solid #38BE41;
		background-color: #E0EFE1;
		border-radius: 36rpx 36rpx 36rpx 36rpx;
		padding: 7rpx 10rpx;
		color: #20B128;

	}

	.submit-btn {
		position: fixed;
		bottom: 50rpx;
		width: 670rpx;
	}

	.pop-head {
		display: flex;
		justify-content: space-between;
		color: #20B128;
		margin-bottom: 42rpx;
	}

	.Positioning {
		display: flex;
		justify-content: space-between;
	}

	.province {
		display: flex;
		position: relative;

		.province-li {
			color: #707070;
			font-size: 32rpx;
			margin: 30rpx 40rpx 30rpx 0;
		}

		.province-line {
			position: absolute;
			height: 2px;
			width: 40rpx;
			background-color: #20B128;
			bottom: 20rpx;
			left: 30rpx;
			transition: 500ms;

		}


	}

	.position-content {
		height: 600rpx;
		overflow-y: auto;

		.position-li {
			font-size: 28rpx;
			color: #707070;
			margin-top: 30rpx;
			display: flex;
			align-items: center;
		}

		.act {
			color: #20B128;
		}
	}

	.goods-leval {
		overflow-y: auto;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;

		.goods-leval-li {
			margin-right: 20rpx;
			padding: 10rpx 40rpx;
			height: 60rpx;
			margin-bottom: 20rpx;
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			background-color: #F1F1F1;
		}

		.act {
			color: #20B128;
			background-color: #E8F7E9;
			border: 1px solid #20B128;


		}
	}

	/* 	.toast {
		position: absolute;
		color: white;
		background-color: #20B128;
		display: flex;
		align-items: center;
		padding: 20rpx;


	} */
</style>