517 lines
13 KiB
Vue
517 lines
13 KiB
Vue
<template>
|
|
<view class="content">
|
|
<u--form :model="model1" 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',getLocation()">
|
|
<view style="margin-right: 10rpx;line-height: 25rpx;">
|
|
{{formData.product_attribute.address||'请选择'}}
|
|
</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.product_attribute.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.product_attribute.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="formData.product_attribute.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 formData.product_attribute.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="formData.product_attribute.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="保存" @click="submit"></u-button>
|
|
</view>
|
|
|
|
|
|
<u-popup :show="showPouple" @close="showPouple=false,positionType=0" @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,positionType=0">取消</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;" @click="confirm">
|
|
<u-icon name="map" style='margin-right: 8rpx;'></u-icon>
|
|
<text>{{(address.province+address.city+address.district )||errMag}} </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='choseCity'
|
|
:style="{color:positionType==1?'#20B128':'#707070'} ">
|
|
{{address.city ||'请选择'}}
|
|
</view>
|
|
<view class="province-li" @click='choseArea'
|
|
: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[wacthType()]==item.name}"
|
|
v-for="item in positionList" @click="chosePosition(item)">
|
|
<text>
|
|
{{item.name}}
|
|
</text>
|
|
<u-icon v-if='address[wacthType()]==item.name' 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.product_attribute.leval==item}"
|
|
v-for='item in levalList'
|
|
@click="formData.product_attribute.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.product_attribute.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';
|
|
import {
|
|
getProvince,
|
|
getCity,
|
|
getArea
|
|
} from "@/api/common.js"
|
|
import {
|
|
formatDate
|
|
} from '../../../libs/uniApi';
|
|
export default {
|
|
|
|
data() {
|
|
return {
|
|
errMag: "",
|
|
provinceList: [],
|
|
cityList: [],
|
|
districtList: [],
|
|
positionList: [],
|
|
areaList: [],
|
|
districtList: [],
|
|
posType: {
|
|
|
|
},
|
|
selfLeval: "",
|
|
levalList: [
|
|
"优等品",
|
|
"一等品",
|
|
"合格品",
|
|
],
|
|
selfPack: "",
|
|
packList: [
|
|
"盒装",
|
|
"箱装",
|
|
"袋装",
|
|
"盆装",
|
|
"泡沫箱"
|
|
],
|
|
address: {
|
|
province: '',
|
|
province_code: '',
|
|
city: "",
|
|
city_code: "",
|
|
district: "",
|
|
district_code: ""
|
|
},
|
|
|
|
show: false,
|
|
popType: 'leval',
|
|
showPouple: false,
|
|
showSex: false,
|
|
positionType: 0,
|
|
data: {},
|
|
formData: {
|
|
// address: "",
|
|
// leval: "",
|
|
// pack: "",
|
|
// attr: [{
|
|
// label: "",
|
|
// value: ''
|
|
// }]
|
|
},
|
|
|
|
model1: {
|
|
userInfo: {
|
|
name: '',
|
|
sex: '',
|
|
},
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
};
|
|
},
|
|
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') {
|
|
this.formData.product_attribute.address = this.address.province + this.address.city + this.address
|
|
.district
|
|
} else if (this.popType == 'leval') {
|
|
this.levalList.push(this.selfLeval)
|
|
this.formData.product_attribute.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) {
|
|
if (this.positionType == 0) {
|
|
this.address.province = item.name
|
|
this.address.province_code = item.code
|
|
this.address.city = ''
|
|
this.address.district = ''
|
|
|
|
} else if (this.positionType == 1) {
|
|
this.address.city = item.name
|
|
this.address.city_code = item.code
|
|
this.address.district = ''
|
|
console.log(this.address)
|
|
} else {
|
|
this.address.district = item.name
|
|
this.address.district_code = item.code
|
|
}
|
|
|
|
},
|
|
wacthType() {
|
|
if (this.positionType == 0) return "province";
|
|
else if (this.positionType == 1) return "city";
|
|
else if (this.positionType == 2) return "district";
|
|
},
|
|
choseCity() {
|
|
this.positionType = 1;
|
|
getCity({
|
|
code: this.address.province_code
|
|
}).then(res => {
|
|
this.cityList = res.data
|
|
this.positionList = this.cityList
|
|
this.cityList.forEach(item => {
|
|
if (this.address.city == item.name) {
|
|
this.address.city_code = item.code
|
|
}
|
|
})
|
|
})
|
|
},
|
|
choseArea() {
|
|
this.positionType = 2;
|
|
console.log(this.address)
|
|
getArea({
|
|
city_code: this.address.city_code
|
|
}).then(res => {
|
|
this.areaList = res.data
|
|
this.positionList = this.areaList
|
|
|
|
})
|
|
},
|
|
getLocation() {
|
|
let that = this
|
|
uni.getLocation({
|
|
type: 'wgs84',
|
|
success: function(res) {
|
|
console.log(res, 'res')
|
|
getGeocoder({
|
|
lat: res.latitude,
|
|
long: res.longitude
|
|
}).then(res1 => {
|
|
that.address = res1.data.address_component
|
|
that.positionList = that.provinceList
|
|
that.provinceList.forEach(item => {
|
|
if (that.address.province == item.name) {
|
|
that.address.province_code = item.code
|
|
}
|
|
})
|
|
}).catch(err => {
|
|
console.log("获取位置失败")
|
|
uni.showToast({
|
|
title: err,
|
|
icon: 'none'
|
|
})
|
|
})
|
|
|
|
|
|
},
|
|
fail: function(err) {
|
|
that.errMag = "获取位置失败，请手动先择"
|
|
console.log('sad', err)
|
|
}
|
|
});
|
|
},
|
|
submit() {
|
|
let that = this
|
|
uni.reLaunch({
|
|
url: `/pages/product/addGoodDetail/addGoodDetail?mer_id=${that.mer_id}&&formData=${JSON.stringify(that.formData) }`
|
|
})
|
|
|
|
}
|
|
},
|
|
|
|
onLoad(option) {
|
|
getProvince().then(res => {
|
|
this.provinceList = res.data
|
|
this.positionList = res.data
|
|
})
|
|
this.formData = JSON.parse(option.formData)
|
|
if (option.mer_id) {
|
|
this.mer_id = option.mer_id
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
</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> |