add
This commit is contained in:
parent
336c7078bb
commit
56921854dd
|
|
@ -38,16 +38,16 @@
|
|||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item label="零售价格" prop="userInfo.name" ref="item1" border-bottom>
|
||||
<u--input placeholderStyle="color:#777777" style="width: 220rpx;" placeholder="请输入零售价"
|
||||
v-model="formData.attrValue[0].price" slot='right'></u--input>
|
||||
<u--input inputAlign='right' placeholderStyle="color:#777777" style="width: 220rpx;"
|
||||
placeholder="请输入零售价" v-model="formData.attrValue[0].price" slot='right'></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item v-if='isWholeSale' label="批发价格" prop="userInfo.name" ref="item1" border-bottom>
|
||||
<u--input placeholderStyle="color:#777777" style="width: 250rpx;" placeholder="请输入批发价格"
|
||||
v-model="formData.attrValue[0].wholesale_price" slot='right'></u--input>
|
||||
<u--input inputAlign='right' placeholderStyle="color:#777777" style="width: 250rpx;"
|
||||
placeholder="请输入批发价格" v-model="formData.attrValue[0].wholesale_price" slot='right'></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="商品库存" prop="userInfo.name" ref="item1">
|
||||
<u--input placeholderStyle="color:#777777" style="width: 220rpx;" placeholder="请输入零售价"
|
||||
v-model="formData.attrValue[0].stock" slot='right'></u--input>
|
||||
<u--input inputAlign='right' placeholderStyle="color:#777777" style="width: 220rpx;"
|
||||
placeholder="请输入零售价" v-model="formData.attrValue[0].stock" slot='right'></u--input>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<view class="footer">
|
||||
|
|
@ -264,8 +264,7 @@
|
|||
})
|
||||
},
|
||||
async submit() {
|
||||
this.formData.imageList = this.formData.imageList.map(item => item.url)
|
||||
console.log(this.formData)
|
||||
// this.formData.imageList = this.formData.imageList.map(item => item.url)
|
||||
// await this.$refs.formData.validate()
|
||||
productCreate(this.mer_id, this.formData)
|
||||
.then(res => {
|
||||
|
|
@ -282,7 +281,7 @@
|
|||
})
|
||||
})
|
||||
.catch(rej => {
|
||||
Toast(rej);
|
||||
// Toast(rej);
|
||||
});
|
||||
console.log(this.formData)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -495,15 +495,15 @@
|
|||
// selHeight: '350upx',
|
||||
// inner: true
|
||||
// });
|
||||
this.$util.uploadImageOne({
|
||||
url: 'upload/image',
|
||||
crop: {
|
||||
width: 2000,
|
||||
height: 2000,
|
||||
}
|
||||
},(res)=> {
|
||||
this.setFormData.imageList.push(res.data.path);
|
||||
});
|
||||
this.$util.uploadImageOne({
|
||||
url: 'upload/image',
|
||||
crop: {
|
||||
width: 2000,
|
||||
height: 2000,
|
||||
}
|
||||
}, (res) => {
|
||||
this.setFormData.imageList.push(res.data.path);
|
||||
});
|
||||
},
|
||||
doUpload(rsp) {
|
||||
let that = this
|
||||
|
|
|
|||
|
|
@ -16,8 +16,8 @@
|
|||
<text style="color: #E18C34;font-size: 24rpx">上传时应注重真实性、清晰度</text>
|
||||
</u-form-item>
|
||||
<u-form-item prop="userInfo.name" ref="item1">
|
||||
<u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple
|
||||
:maxCount="5">
|
||||
<u-upload :fileList="formData.imageList" @afterRead="afterRead1" @delete="deletePic1" name="6"
|
||||
multiple :maxCount="5">
|
||||
<view class='uploadimg'>
|
||||
<u-icon name="plus" color="#777777"></u-icon>
|
||||
<view class="" style="color: #777777;font-size: 24rpx;">
|
||||
|
|
@ -30,8 +30,8 @@
|
|||
<text style="color: #E18C34;font-size: 24rpx">上传时应注重真实性、清晰度</text>
|
||||
</u-form-item>
|
||||
<u-form-item prop="userInfo.name" ref="item1">
|
||||
<u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple
|
||||
:maxCount="5">
|
||||
<u-upload :fileList="formData.content.image" @afterRead="afterRead" @delete="deletePic" name="6"
|
||||
multiple :maxCount="5">
|
||||
<view class='uploadimg'>
|
||||
<u-icon name="plus" color="#777777"></u-icon>
|
||||
<view class="" style="color: #777777;font-size: 24rpx;">
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
<u-form-item label="商品分类" prop="userInfo.name" ref="item1" labelPosition="left" required>
|
||||
<view style="display: flex;align-items: center;font-size: 28rpx;color:#777777 ;" slot="right"
|
||||
@click="navgo(`/pages/product/addGoodDetail/goodsType?mer_id=${mer_id}`)">
|
||||
<view style="margin-right: 10rpx;line-height: 25rpx;">请选择</view>
|
||||
<view style="margin-right: 10rpx;line-height: 25rpx;">{{ formData.cate_name|| '请选择'}}</view>
|
||||
<u-icon name="arrow-right"></u-icon>
|
||||
</view>
|
||||
</u-form-item>
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
</view>
|
||||
</u--form>
|
||||
<view class="submit-btn">
|
||||
<u-button text="确认发布" color="#33BB3C" class="custom-style"></u-button>
|
||||
<u-button text="确认发布" @click="submit" color="#33BB3C" class="custom-style"></u-button>
|
||||
</view>
|
||||
|
||||
<view class="overlay">
|
||||
|
|
@ -143,6 +143,10 @@
|
|||
import {
|
||||
HTTP_REQUEST_URL
|
||||
} from '@/config/app.js';
|
||||
import {
|
||||
formatDate
|
||||
} from '../../../libs/uniApi';
|
||||
|
||||
import uploadImgVideo from "../addGood/components/uploadImgVideo.vue"
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -153,8 +157,7 @@
|
|||
formData: {
|
||||
"store_name": "测试商品",
|
||||
"imageList": [
|
||||
"https://crmeb-test.shop.lihaink.cn/uploads/def/20240419/a09b7188e9ef408a3f96d82b2b178082.jpeg",
|
||||
"https://crmeb-test.shop.lihaink.cn/uploads/def/20240419/7a6d14dc327f6b0936e479891c0d253a.jpg"
|
||||
|
||||
],
|
||||
"attrValue": [{
|
||||
"price": "100",
|
||||
|
|
@ -191,7 +194,7 @@
|
|||
"once_min_count": "",
|
||||
"image": "https://crmeb-test.shop.lihaink.cn/uploads/def/20240419/a09b7188e9ef408a3f96d82b2b178082.jpeg",
|
||||
"slider_image": [
|
||||
"https://crmeb-test.shop.lihaink.cn/uploads/def/20240419/7a6d14dc327f6b0936e479891c0d253a.jpg"
|
||||
|
||||
],
|
||||
"is_good": 0,
|
||||
"is_gift_bag": 0,
|
||||
|
|
@ -200,9 +203,7 @@
|
|||
"video_link": "",
|
||||
"content": {
|
||||
"title": "",
|
||||
"image": [
|
||||
"https://crmeb-test.shop.lihaink.cn/uploads/def/20240419/6f96b50e17bbf9a1289f82f620747b73.jpeg"
|
||||
]
|
||||
"image": []
|
||||
},
|
||||
"stock": "20"
|
||||
},
|
||||
|
|
@ -252,17 +253,59 @@
|
|||
},
|
||||
methods: {
|
||||
|
||||
// 删除图片
|
||||
deletePic1(event) {
|
||||
this.formData[`imageList`].splice(event.index, 1)
|
||||
},
|
||||
// 新增图片
|
||||
async afterRead1(event) {
|
||||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||||
let lists = [].concat(event.file)
|
||||
let fileListLen = this.formData[`imageList`].length
|
||||
lists.map((item) => {
|
||||
this.formData[`imageList`].push({
|
||||
...item,
|
||||
status: 'uploading',
|
||||
message: '上传中'
|
||||
})
|
||||
})
|
||||
for (let i = 0; i < lists.length; i++) {
|
||||
const result = await this.uploadFilePromise1(lists[i].url)
|
||||
let item = this.formData[`imageList`][fileListLen]
|
||||
this.formData[`imageList`].splice(fileListLen, 1, Object.assign(item, {
|
||||
status: 'success',
|
||||
message: '',
|
||||
url: result
|
||||
}))
|
||||
fileListLen++
|
||||
}
|
||||
},
|
||||
uploadFilePromise1(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let a = uni.uploadFile({
|
||||
url: HTTP_REQUEST_URL + '/api/upload/image/field',
|
||||
filePath: url,
|
||||
name: 'field',
|
||||
success: (res) => {
|
||||
console.log(res.data)
|
||||
resolve(JSON.parse(res.data).data.path)
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
// 删除图片
|
||||
deletePic(event) {
|
||||
this[`fileList${event.name}`].splice(event.index, 1)
|
||||
this.formData.content.image.splice(event.index, 1)
|
||||
},
|
||||
// 新增图片
|
||||
async afterRead(event) {
|
||||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||||
let lists = [].concat(event.file)
|
||||
let fileListLen = this[`fileList${event.name}`].length
|
||||
let fileListLen = this.formData.content.image.length
|
||||
lists.map((item) => {
|
||||
this[`fileList${event.name}`].push({
|
||||
this.formData.content.image.push({
|
||||
...item,
|
||||
status: 'uploading',
|
||||
message: '上传中'
|
||||
|
|
@ -270,8 +313,8 @@
|
|||
})
|
||||
for (let i = 0; i < lists.length; i++) {
|
||||
const result = await this.uploadFilePromise(lists[i].url)
|
||||
let item = this[`fileList${event.name}`][fileListLen]
|
||||
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
||||
let item = this.formData.content.image[fileListLen]
|
||||
this.formData.content.image.splice(fileListLen, 1, Object.assign(item, {
|
||||
status: 'success',
|
||||
message: '',
|
||||
url: result
|
||||
|
|
@ -310,13 +353,21 @@
|
|||
},
|
||||
showlayFn() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
submit() {
|
||||
console.log(this.formData)
|
||||
}
|
||||
|
||||
},
|
||||
onLoad(option) {
|
||||
this.mer_id = option.mer_id
|
||||
if (option.typeData) {
|
||||
console.log(option, 'option')
|
||||
this.formData.cate_name = JSON.parse(option.typeData).label
|
||||
this.formData.cate_id = JSON.parse(option.typeData).value
|
||||
console.log(this.formData, 'option')
|
||||
}
|
||||
if (option.formData) {
|
||||
Object.assign(this.formData, JSON.parse(option.formData), {})
|
||||
}
|
||||
|
||||
},
|
||||
|
|
|
|||
|
|
@ -18,33 +18,34 @@
|
|||
<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;">请选择</view>
|
||||
<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;">请选择</view>
|
||||
<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">
|
||||
<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;">
|
||||
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="value"></u--input>
|
||||
<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="value"></u--input>
|
||||
<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;">
|
||||
<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>
|
||||
|
|
@ -57,46 +58,52 @@
|
|||
<u-popup :show="showPouple" @close="showPouple=false" @open="showPouple=true" :round="10">
|
||||
<view class="RegularFont" style="padding: 42rpx 40rpx">
|
||||
<view class="pop-head">
|
||||
<text>取消</text>
|
||||
<text style="font-size:32rpx ;color:#333333 ;">商品产地</text>
|
||||
<text>确定</text>
|
||||
<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>四川得分手段解决客户</text>
|
||||
<text>{{address.province}}{{address.city}}{{address.district}}</text>
|
||||
</view>
|
||||
<view class="">
|
||||
<view class="" @click="getLocation">
|
||||
刷新定位
|
||||
</view>
|
||||
</view>
|
||||
<u-line color="#CECECE"></u-line>
|
||||
<view class="province">
|
||||
<view class="province-li" @click='positionType=0'
|
||||
<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'
|
||||
<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'
|
||||
<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" v-for="item in 20">
|
||||
<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>
|
||||
|
|
@ -106,24 +113,20 @@
|
|||
|
||||
<!-- 商品等级 -->
|
||||
<view v-if="popType=='leval'" style="height: 500rpx;">
|
||||
<u-transition :show="show" mode="slide-right">
|
||||
<view class="goods-leval" v-show="show">
|
||||
<view class="goods-leval-li" v-for='item in 10'>
|
||||
一等平
|
||||
<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 act">
|
||||
二等平
|
||||
</view>
|
||||
<view class="goods-leval-li " style="display: flex;color:#38BE41 ;">
|
||||
<u-icon name="plus" color="#38BE41" style='margin-right: 8rpx;'
|
||||
@click="show=!show"></u-icon> 自定义
|
||||
<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" @click="show=!show">
|
||||
<!-- 大师傅士大夫士大夫撒旦 -->
|
||||
<u--textarea v-model="value1" placeholder="请输入商品等级"></u--textarea>
|
||||
<u-transition :show="show" mode="slide-left">
|
||||
<view class="transition">
|
||||
<u--textarea v-model="selfLeval" placeholder="请输入商品等级"></u--textarea>
|
||||
</view>
|
||||
</u-transition>
|
||||
</view>
|
||||
|
|
@ -131,22 +134,21 @@
|
|||
|
||||
<!-- 商品包装 -->
|
||||
<view v-if="popType=='packing'" style="height: 500rpx;">
|
||||
<u-transition :show="show" mode="slide-right">
|
||||
<u-transition :show="!show" mode="slide-right">
|
||||
<view class="goods-leval">
|
||||
<view class="goods-leval-li" v-for='item in 10'>
|
||||
纸箱子
|
||||
<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 act">
|
||||
木箱子
|
||||
</view>
|
||||
<view class="goods-leval-li " style="display: flex;color:#38BE41 ;" @click="show=!show">
|
||||
|
||||
<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" @click="show=!show">
|
||||
<u--textarea v-model="value1" placeholder="请输入商品等级"></u--textarea>
|
||||
<u-transition :show="show" mode="slide-left">
|
||||
<view class="transition">
|
||||
<u--textarea v-model="selfPack" placeholder="请输入商品等级"></u--textarea>
|
||||
</view>
|
||||
</u-transition>
|
||||
</view>
|
||||
|
|
@ -159,15 +161,114 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getGeocoder,
|
||||
} from '@/api/store.js';
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
show: true,
|
||||
|
||||
provinceList: [
|
||||
"北京市",
|
||||
"天津市",
|
||||
"河北省",
|
||||
"山西省",
|
||||
"内蒙古自治区",
|
||||
"辽宁省",
|
||||
"吉林省",
|
||||
"黑龙江省",
|
||||
"上海市",
|
||||
"江苏省",
|
||||
"浙江省",
|
||||
"安徽省",
|
||||
"福建省",
|
||||
"江西省",
|
||||
"山东省",
|
||||
"河南省",
|
||||
"湖北省",
|
||||
"湖南省",
|
||||
"广东省",
|
||||
"广西壮族自治区",
|
||||
"海南省",
|
||||
"重庆市",
|
||||
"四川省",
|
||||
"贵州省",
|
||||
"云南省",
|
||||
"西藏自治区",
|
||||
"陕西省",
|
||||
"甘肃省",
|
||||
"青海省",
|
||||
"宁夏回族自治区",
|
||||
"新疆维吾尔自治区",
|
||||
"台湾省",
|
||||
"香港特别行政区",
|
||||
"澳门特别行政区"
|
||||
],
|
||||
cityList: [
|
||||
"成都市",
|
||||
"自贡市",
|
||||
"攀枝花市",
|
||||
"泸州市",
|
||||
"德阳市",
|
||||
"绵阳市",
|
||||
"广元市",
|
||||
"遂宁市",
|
||||
"内江市",
|
||||
"乐山市",
|
||||
"南充市",
|
||||
"眉山市",
|
||||
"宜宾市",
|
||||
"广安市",
|
||||
"达州市",
|
||||
"雅安市",
|
||||
"巴中市",
|
||||
"资阳市",
|
||||
"阿坝藏族羌族自治州",
|
||||
"甘孜藏族自治州",
|
||||
"凉山彝族自治州"
|
||||
],
|
||||
districtList: ['江阳区', '牛马塔努', '需用唉', '泸县'],
|
||||
positionList: [],
|
||||
areaList: [],
|
||||
districtList: [],
|
||||
posType: {
|
||||
|
||||
},
|
||||
selfLeval: "",
|
||||
levalList: [
|
||||
"撒旦",
|
||||
"撒旦",
|
||||
"撒旦",
|
||||
"撒旦",
|
||||
|
||||
],
|
||||
selfPack: "",
|
||||
packList: [
|
||||
"纸箱子",
|
||||
"纸箱子",
|
||||
"纸箱子",
|
||||
],
|
||||
address: {
|
||||
province: '',
|
||||
city: "",
|
||||
district: ""
|
||||
},
|
||||
attr: [{
|
||||
label: "",
|
||||
value: ''
|
||||
}],
|
||||
show: false,
|
||||
popType: 'leval',
|
||||
showPouple: true,
|
||||
showPouple: false,
|
||||
showSex: false,
|
||||
positionType: 0,
|
||||
|
||||
formData: {
|
||||
leval: "",
|
||||
pack: "",
|
||||
},
|
||||
|
||||
model1: {
|
||||
userInfo: {
|
||||
name: '',
|
||||
|
|
@ -176,19 +277,7 @@
|
|||
},
|
||||
value1: "",
|
||||
value: '',
|
||||
range: [{
|
||||
value: 0,
|
||||
text: "篮球"
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
text: "足球"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
text: "游泳"
|
||||
},
|
||||
],
|
||||
|
||||
text: "",
|
||||
text1: "",
|
||||
value1: "",
|
||||
|
|
@ -230,19 +319,57 @@
|
|||
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: 'wgs84',
|
||||
type: 'gcj02',
|
||||
success: function(res) {
|
||||
console.log(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'
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
mounted() {
|
||||
// this.getLocation()
|
||||
onLoad() {
|
||||
this.getLocation()
|
||||
}
|
||||
|
||||
};
|
||||
|
|
@ -342,14 +469,20 @@
|
|||
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;
|
||||
justify-content: space-around;
|
||||
overflow-y: auto;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.goods-leval-li {
|
||||
margin-right: 20rpx;
|
||||
|
|
|
|||
|
|
@ -1,51 +1,23 @@
|
|||
<template>
|
||||
<u-popup
|
||||
:show="show"
|
||||
@close="closeHandler"
|
||||
>
|
||||
<u-popup :show="show" @close="closeHandler">
|
||||
<view class="u-picker">
|
||||
<u-toolbar
|
||||
v-if="showToolbar"
|
||||
:cancelColor="cancelColor"
|
||||
:confirmColor="confirmColor"
|
||||
:cancelText="cancelText"
|
||||
:confirmText="confirmText"
|
||||
:title="title"
|
||||
@cancel="cancel"
|
||||
@confirm="confirm"
|
||||
></u-toolbar>
|
||||
<picker-view
|
||||
class="u-picker__view"
|
||||
:indicatorStyle="`height: ${$u.addUnit(itemHeight)}`"
|
||||
:value="innerIndex"
|
||||
:immediateChange="immediateChange"
|
||||
:style="{
|
||||
<u-toolbar v-if="showToolbar" :cancelColor="cancelColor" :confirmColor="confirmColor"
|
||||
:cancelText="cancelText" :confirmText="confirmText" :title="title" @cancel="cancel"
|
||||
@confirm="confirm"></u-toolbar>
|
||||
<picker-view class="u-picker__view" :indicatorStyle="`height: ${$u.addUnit(itemHeight)}`"
|
||||
:value="innerIndex" :immediateChange="immediateChange" :style="{
|
||||
height: `${$u.addUnit(visibleItemCount * itemHeight)}`
|
||||
}"
|
||||
@change="changeHandler"
|
||||
>
|
||||
<picker-view-column
|
||||
v-for="(item, index) in innerColumns"
|
||||
:key="index"
|
||||
class="u-picker__view__column"
|
||||
>
|
||||
<text
|
||||
v-if="$u.test.array(item)"
|
||||
class="u-picker__view__column__item u-line-1"
|
||||
v-for="(item1, index1) in item"
|
||||
:key="index1"
|
||||
:style="{
|
||||
}" @change="changeHandler">
|
||||
<picker-view-column v-for="(item, index) in innerColumns" :key="index" class="u-picker__view__column">
|
||||
<text v-if="$u.test.array(item)" class="u-picker__view__column__item u-line-1"
|
||||
v-for="(item1, index1) in item" :key="index1" :style="{
|
||||
height: $u.addUnit(itemHeight),
|
||||
lineHeight: $u.addUnit(itemHeight),
|
||||
fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal'
|
||||
}"
|
||||
>{{ getItemText(item1) }}</text>
|
||||
}">{{ getItemText(item1) }}</text>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
<view
|
||||
v-if="loading"
|
||||
class="u-picker--loading"
|
||||
>
|
||||
<view v-if="loading" class="u-picker--loading">
|
||||
<u-loading-icon mode="circle"></u-loading-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -53,184 +25,184 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* u-picker
|
||||
* @description 选择器
|
||||
* @property {Boolean} show 是否显示picker弹窗（默认 false ）
|
||||
* @property {Boolean} showToolbar 是否显示顶部的操作栏（默认 true ）
|
||||
* @property {String} title 顶部标题
|
||||
* @property {Array} columns 对象数组，设置每一列的数据
|
||||
* @property {Boolean} loading 是否显示加载中状态（默认 false ）
|
||||
* @property {String | Number} itemHeight 各列中，单个选项的高度（默认 44 ）
|
||||
* @property {String} cancelText 取消按钮的文字（默认 '取消' ）
|
||||
* @property {String} confirmText 确认按钮的文字（默认 '确定' ）
|
||||
* @property {String} cancelColor 取消按钮的颜色（默认 '#909193' ）
|
||||
* @property {String} confirmColor 确认按钮的颜色（默认 '#3c9cff' ）
|
||||
* @property {String | Number} visibleItemCount 每列中可见选项的数量（默认 5 ）
|
||||
* @property {String} keyName 选项对象中，需要展示的属性键名（默认 'text' ）
|
||||
* @property {Boolean} closeOnClickOverlay 是否允许点击遮罩关闭选择器（默认 false ）
|
||||
* @property {Array} defaultIndex 各列的默认索引
|
||||
* @property {Boolean} immediateChange 是否在手指松开时立即触发change事件（默认 false ）
|
||||
* @event {Function} close 关闭选择器时触发
|
||||
* @event {Function} cancel 点击取消按钮触发
|
||||
* @event {Function} change 当选择值变化时触发
|
||||
* @event {Function} confirm 点击确定按钮，返回当前选择的值
|
||||
*/
|
||||
import props from './props.js';
|
||||
export default {
|
||||
name: 'u-picker',
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
|
||||
data() {
|
||||
return {
|
||||
// 上一次选择的列索引
|
||||
lastIndex: [],
|
||||
// 索引值 ，对应picker-view的value
|
||||
innerIndex: [],
|
||||
// 各列的值
|
||||
innerColumns: [],
|
||||
// 上一次的变化列索引
|
||||
columnIndex: 0,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 监听默认索引的变化，重新设置对应的值
|
||||
defaultIndex: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
this.setIndexs(n, true)
|
||||
/**
|
||||
* u-picker
|
||||
* @description 选择器
|
||||
* @property {Boolean} show 是否显示picker弹窗（默认 false ）
|
||||
* @property {Boolean} showToolbar 是否显示顶部的操作栏（默认 true ）
|
||||
* @property {String} title 顶部标题
|
||||
* @property {Array} columns 对象数组，设置每一列的数据
|
||||
* @property {Boolean} loading 是否显示加载中状态（默认 false ）
|
||||
* @property {String | Number} itemHeight 各列中，单个选项的高度（默认 44 ）
|
||||
* @property {String} cancelText 取消按钮的文字（默认 '取消' ）
|
||||
* @property {String} confirmText 确认按钮的文字（默认 '确定' ）
|
||||
* @property {String} cancelColor 取消按钮的颜色（默认 '#909193' ）
|
||||
* @property {String} confirmColor 确认按钮的颜色（默认 '#3c9cff' ）
|
||||
* @property {String | Number} visibleItemCount 每列中可见选项的数量（默认 5 ）
|
||||
* @property {String} keyName 选项对象中，需要展示的属性键名（默认 'text' ）
|
||||
* @property {Boolean} closeOnClickOverlay 是否允许点击遮罩关闭选择器（默认 false ）
|
||||
* @property {Array} defaultIndex 各列的默认索引
|
||||
* @property {Boolean} immediateChange 是否在手指松开时立即触发change事件（默认 false ）
|
||||
* @event {Function} close 关闭选择器时触发
|
||||
* @event {Function} cancel 点击取消按钮触发
|
||||
* @event {Function} change 当选择值变化时触发
|
||||
* @event {Function} confirm 点击确定按钮，返回当前选择的值
|
||||
*/
|
||||
import props from './props.js';
|
||||
export default {
|
||||
name: 'u-picker',
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
|
||||
data() {
|
||||
return {
|
||||
// 上一次选择的列索引
|
||||
lastIndex: [],
|
||||
// 索引值 ，对应picker-view的value
|
||||
innerIndex: [],
|
||||
// 各列的值
|
||||
innerColumns: [],
|
||||
// 上一次的变化列索引
|
||||
columnIndex: 0,
|
||||
}
|
||||
},
|
||||
// 监听columns参数的变化
|
||||
columns: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
this.setColumns(n)
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 获取item需要显示的文字，判别为对象还是文本
|
||||
getItemText(item) {
|
||||
if (uni.$u.test.object(item)) {
|
||||
return item[this.keyName]
|
||||
} else {
|
||||
return item
|
||||
}
|
||||
},
|
||||
// 关闭选择器
|
||||
closeHandler() {
|
||||
if (this.closeOnClickOverlay) {
|
||||
this.$emit('close')
|
||||
}
|
||||
},
|
||||
// 点击工具栏的取消按钮
|
||||
cancel() {
|
||||
this.$emit('cancel')
|
||||
},
|
||||
// 点击工具栏的确定按钮
|
||||
confirm() {
|
||||
this.$emit('confirm', {
|
||||
indexs: this.innerIndex,
|
||||
value: this.innerColumns.map((item, index) => item[this.innerIndex[index]]),
|
||||
values: this.innerColumns
|
||||
})
|
||||
},
|
||||
// 选择器某一列的数据发生变化时触发
|
||||
changeHandler(e) {
|
||||
const {
|
||||
value
|
||||
} = e.detail
|
||||
let index = 0,
|
||||
columnIndex = 0
|
||||
// 通过对比前后两次的列索引，得出当前变化的是哪一列
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
let item = value[i]
|
||||
if (item !== (this.lastIndex[i] || 0)) { // 把undefined转为合法假值0
|
||||
// 设置columnIndex为当前变化列的索引
|
||||
columnIndex = i
|
||||
// index则为变化列中的变化项的索引
|
||||
index = item
|
||||
break // 终止循环，即使少一次循环，也是性能的提升
|
||||
watch: {
|
||||
// 监听默认索引的变化，重新设置对应的值
|
||||
defaultIndex: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
this.setIndexs(n, true)
|
||||
}
|
||||
}
|
||||
this.columnIndex = columnIndex
|
||||
const values = this.innerColumns
|
||||
// 将当前的各项变化索引，设置为"上一次"的索引变化值
|
||||
this.setLastIndex(value)
|
||||
this.setIndexs(value)
|
||||
},
|
||||
// 监听columns参数的变化
|
||||
columns: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
this.setColumns(n)
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 获取item需要显示的文字，判别为对象还是文本
|
||||
getItemText(item) {
|
||||
if (uni.$u.test.object(item)) {
|
||||
return item[this.keyName]
|
||||
} else {
|
||||
return item
|
||||
}
|
||||
},
|
||||
// 关闭选择器
|
||||
closeHandler() {
|
||||
if (this.closeOnClickOverlay) {
|
||||
this.$emit('close')
|
||||
}
|
||||
},
|
||||
// 点击工具栏的取消按钮
|
||||
cancel() {
|
||||
this.$emit('cancel')
|
||||
},
|
||||
// 点击工具栏的确定按钮
|
||||
confirm() {
|
||||
this.$emit('confirm', {
|
||||
indexs: this.innerIndex,
|
||||
value: this.innerColumns.map((item, index) => item[this.innerIndex[index]]),
|
||||
values: this.innerColumns
|
||||
})
|
||||
},
|
||||
// 选择器某一列的数据发生变化时触发
|
||||
changeHandler(e) {
|
||||
const {
|
||||
value
|
||||
} = e.detail
|
||||
let index = 0,
|
||||
columnIndex = 0
|
||||
// 通过对比前后两次的列索引，得出当前变化的是哪一列
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
let item = value[i]
|
||||
if (item !== (this.lastIndex[i] || 0)) { // 把undefined转为合法假值0
|
||||
// 设置columnIndex为当前变化列的索引
|
||||
columnIndex = i
|
||||
// index则为变化列中的变化项的索引
|
||||
index = item
|
||||
break // 终止循环，即使少一次循环，也是性能的提升
|
||||
}
|
||||
}
|
||||
this.columnIndex = columnIndex
|
||||
const values = this.innerColumns
|
||||
// 将当前的各项变化索引，设置为"上一次"的索引变化值
|
||||
this.setLastIndex(value)
|
||||
this.setIndexs(value)
|
||||
|
||||
this.$emit('change', {
|
||||
// #ifndef MP-WEIXIN || MP-LARK
|
||||
// 微信小程序不能传递this，会因为循环引用而报错
|
||||
picker: this,
|
||||
// #endif
|
||||
value: this.innerColumns.map((item, index) => item[value[index]]),
|
||||
index,
|
||||
indexs: value,
|
||||
// values为当前变化列的数组内容
|
||||
values,
|
||||
columnIndex
|
||||
})
|
||||
},
|
||||
// 设置index索引，此方法可被外部调用设置
|
||||
setIndexs(index, setLastIndex) {
|
||||
this.innerIndex = uni.$u.deepClone(index)
|
||||
if (setLastIndex) {
|
||||
this.setLastIndex(index)
|
||||
}
|
||||
},
|
||||
// 记录上一次的各列索引位置
|
||||
setLastIndex(index) {
|
||||
// 当能进入此方法，意味着当前设置的各列默认索引，即为“上一次”的选中值，需要记录，是因为changeHandler中
|
||||
// 需要拿前后的变化值进行对比，得出当前发生改变的是哪一列
|
||||
this.lastIndex = uni.$u.deepClone(index)
|
||||
},
|
||||
// 设置对应列选项的所有值
|
||||
setColumnValues(columnIndex, values) {
|
||||
// 替换innerColumns数组中columnIndex索引的值为values，使用的是数组的splice方法
|
||||
this.innerColumns.splice(columnIndex, 1, values)
|
||||
// 拷贝一份原有的innerIndex做临时变量，将大于当前变化列的所有的列的默认索引设置为0
|
||||
let tmpIndex = uni.$u.deepClone(this.innerIndex)
|
||||
for (let i = 0; i < this.innerColumns.length; i++) {
|
||||
if (i > this.columnIndex) {
|
||||
tmpIndex[i] = 0
|
||||
this.$emit('change', {
|
||||
// #ifndef MP-WEIXIN || MP-LARK
|
||||
// 微信小程序不能传递this，会因为循环引用而报错
|
||||
picker: this,
|
||||
// #endif
|
||||
value: this.innerColumns.map((item, index) => item[value[index]]),
|
||||
index,
|
||||
indexs: value,
|
||||
// values为当前变化列的数组内容
|
||||
values,
|
||||
columnIndex
|
||||
})
|
||||
},
|
||||
// 设置index索引，此方法可被外部调用设置
|
||||
setIndexs(index, setLastIndex) {
|
||||
this.innerIndex = uni.$u.deepClone(index)
|
||||
if (setLastIndex) {
|
||||
this.setLastIndex(index)
|
||||
}
|
||||
}
|
||||
// 一次性赋值，不能单个修改，否则无效
|
||||
this.setIndexs(tmpIndex)
|
||||
},
|
||||
// 获取对应列的所有选项
|
||||
getColumnValues(columnIndex) {
|
||||
// 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值
|
||||
// 索引如果在外部change的回调中调用getColumnValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性
|
||||
(async () => {
|
||||
await uni.$u.sleep()
|
||||
})()
|
||||
return this.innerColumns[columnIndex]
|
||||
},
|
||||
// 设置整体各列的columns的值
|
||||
setColumns(columns) {
|
||||
this.innerColumns = uni.$u.deepClone(columns)
|
||||
// 如果在设置各列数据时，没有被设置默认的各列索引defaultIndex，那么用0去填充它，数组长度为列的数量
|
||||
if (this.innerIndex.length === 0) {
|
||||
this.innerIndex = new Array(columns.length).fill(0)
|
||||
},
|
||||
// 记录上一次的各列索引位置
|
||||
setLastIndex(index) {
|
||||
// 当能进入此方法，意味着当前设置的各列默认索引，即为“上一次”的选中值，需要记录，是因为changeHandler中
|
||||
// 需要拿前后的变化值进行对比，得出当前发生改变的是哪一列
|
||||
this.lastIndex = uni.$u.deepClone(index)
|
||||
},
|
||||
// 设置对应列选项的所有值
|
||||
setColumnValues(columnIndex, values) {
|
||||
// 替换innerColumns数组中columnIndex索引的值为values，使用的是数组的splice方法
|
||||
this.innerColumns.splice(columnIndex, 1, values)
|
||||
// 拷贝一份原有的innerIndex做临时变量，将大于当前变化列的所有的列的默认索引设置为0
|
||||
let tmpIndex = uni.$u.deepClone(this.innerIndex)
|
||||
for (let i = 0; i < this.innerColumns.length; i++) {
|
||||
if (i > this.columnIndex) {
|
||||
tmpIndex[i] = 0
|
||||
}
|
||||
}
|
||||
// 一次性赋值，不能单个修改，否则无效
|
||||
this.setIndexs(tmpIndex)
|
||||
},
|
||||
// 获取对应列的所有选项
|
||||
getColumnValues(columnIndex) {
|
||||
// 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值
|
||||
// 索引如果在外部change的回调中调用getColumnValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性
|
||||
(async () => {
|
||||
await uni.$u.sleep()
|
||||
})()
|
||||
return this.innerColumns[columnIndex]
|
||||
},
|
||||
// 设置整体各列的columns的值
|
||||
setColumns(columns) {
|
||||
this.innerColumns = uni.$u.deepClone(columns)
|
||||
// 如果在设置各列数据时，没有被设置默认的各列索引defaultIndex，那么用0去填充它，数组长度为列的数量
|
||||
if (this.innerIndex.length === 0) {
|
||||
this.innerIndex = new Array(columns.length).fill(0)
|
||||
}
|
||||
},
|
||||
// 获取各列选中值对应的索引
|
||||
getIndexs() {
|
||||
return this.innerIndex
|
||||
},
|
||||
// 获取各列选中的值
|
||||
getValues() {
|
||||
// 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值
|
||||
// 索引如果在外部change的回调中调用getValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性
|
||||
(async () => {
|
||||
await uni.$u.sleep()
|
||||
})()
|
||||
return this.innerColumns.map((item, index) => item[this.innerIndex[index]])
|
||||
}
|
||||
},
|
||||
// 获取各列选中值对应的索引
|
||||
getIndexs() {
|
||||
return this.innerIndex
|
||||
},
|
||||
// 获取各列选中的值
|
||||
getValues() {
|
||||
// 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值
|
||||
// 索引如果在外部change的回调中调用getValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性
|
||||
(async () => {
|
||||
await uni.$u.sleep()
|
||||
})()
|
||||
return this.innerColumns.map((item, index) => item[this.innerIndex[index]])
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -280,4 +252,4 @@ export default {
|
|||
z-index: 1000;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Loading…
Reference in New Issue