mkm
/
shop-applet
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add

This commit is contained in:
zmj 2024-04-20 08:40:27 +08:00
parent 336c7078bb
commit 56921854dd
5 changed files with 469 additions and 314 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
pages/product/addGood/addGood.vue
View File

@ -38,16 +38,16 @@
</view> </view>
</u-form-item> </u-form-item>
<u-form-item label="零售价格" prop="userInfo.name" ref="item1" border-bottom> <u-form-item label="零售价格" prop="userInfo.name" ref="item1" border-bottom>
<u--input placeholderStyle="color:#777777" style="width: 220rpx;" placeholder="请输入零售价" <u--input inputAlign='right' placeholderStyle="color:#777777" style="width: 220rpx;"
v-model="formData.attrValue[0].price" slot='right'></u--input> placeholder="请输入零售价" v-model="formData.attrValue[0].price" slot='right'></u--input>
</u-form-item> </u-form-item>
<u-form-item v-if='isWholeSale' label="批发价格" prop="userInfo.name" ref="item1" border-bottom> <u-form-item v-if='isWholeSale' label="批发价格" prop="userInfo.name" ref="item1" border-bottom>
<u--input placeholderStyle="color:#777777" style="width: 250rpx;" placeholder="请输入批发价格" <u--input inputAlign='right' placeholderStyle="color:#777777" style="width: 250rpx;"
v-model="formData.attrValue[0].wholesale_price" slot='right'></u--input> placeholder="请输入批发价格" v-model="formData.attrValue[0].wholesale_price" slot='right'></u--input>
</u-form-item> </u-form-item>
<u-form-item label="商品库存" prop="userInfo.name" ref="item1"> <u-form-item label="商品库存" prop="userInfo.name" ref="item1">
<u--input placeholderStyle="color:#777777" style="width: 220rpx;" placeholder="请输入零售价" <u--input inputAlign='right' placeholderStyle="color:#777777" style="width: 220rpx;"
v-model="formData.attrValue[0].stock" slot='right'></u--input> placeholder="请输入零售价" v-model="formData.attrValue[0].stock" slot='right'></u--input>
</u-form-item> </u-form-item>
</view> </view>
<view class="footer"> <view class="footer">
@ -264,8 +264,7 @@
}) })
}, },
async submit() { async submit() {
this.formData.imageList = this.formData.imageList.map(item => item.url) // this.formData.imageList = this.formData.imageList.map(item => item.url)
console.log(this.formData)
// await this.$refs.formData.validate() // await this.$refs.formData.validate()
productCreate(this.mer_id, this.formData) productCreate(this.mer_id, this.formData)
.then(res => { .then(res => {
@ -282,7 +281,7 @@
}) })
}) })
.catch(rej => { .catch(rej => {
Toast(rej); // Toast(rej);
}); });
console.log(this.formData) console.log(this.formData)
} }

18
pages/product/addGood/addGoodOld.vue
View File

@ -495,15 +495,15 @@
// selHeight: '350upx', // selHeight: '350upx',
// inner: true // inner: true
// }); // });
this.$util.uploadImageOne({ this.$util.uploadImageOne({
url: 'upload/image', url: 'upload/image',
crop: { crop: {
width: 2000, width: 2000,
height: 2000, height: 2000,
} }
},(res)=> { }, (res) => {
this.setFormData.imageList.push(res.data.path); this.setFormData.imageList.push(res.data.path);
}); });
}, },
doUpload(rsp) { doUpload(rsp) {
let that = this let that = this

87
pages/product/addGoodDetail/addGoodDetail.vue
View File

@ -16,8 +16,8 @@
<text style="color: #E18C34;font-size: 24rpx">上传时应注重真实性、清晰度</text> <text style="color: #E18C34;font-size: 24rpx">上传时应注重真实性、清晰度</text>
</u-form-item> </u-form-item>
<u-form-item prop="userInfo.name" ref="item1"> <u-form-item prop="userInfo.name" ref="item1">
<u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple <u-upload :fileList="formData.imageList" @afterRead="afterRead1" @delete="deletePic1" name="6"
:maxCount="5"> multiple :maxCount="5">
<view class='uploadimg'> <view class='uploadimg'>
<u-icon name="plus" color="#777777"></u-icon> <u-icon name="plus" color="#777777"></u-icon>
<view class="" style="color: #777777;font-size: 24rpx;"> <view class="" style="color: #777777;font-size: 24rpx;">
@ -30,8 +30,8 @@
<text style="color: #E18C34;font-size: 24rpx">上传时应注重真实性、清晰度</text> <text style="color: #E18C34;font-size: 24rpx">上传时应注重真实性、清晰度</text>
</u-form-item> </u-form-item>
<u-form-item prop="userInfo.name" ref="item1"> <u-form-item prop="userInfo.name" ref="item1">
<u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple <u-upload :fileList="formData.content.image" @afterRead="afterRead" @delete="deletePic" name="6"
:maxCount="5"> multiple :maxCount="5">
<view class='uploadimg'> <view class='uploadimg'>
<u-icon name="plus" color="#777777"></u-icon> <u-icon name="plus" color="#777777"></u-icon>
<view class="" style="color: #777777;font-size: 24rpx;"> <view class="" style="color: #777777;font-size: 24rpx;">
@ -48,7 +48,7 @@
<u-form-item label="商品分类" prop="userInfo.name" ref="item1" labelPosition="left" required> <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" <view style="display: flex;align-items: center;font-size: 28rpx;color:#777777 ;" slot="right"
@click="navgo(`/pages/product/addGoodDetail/goodsType?mer_id=${mer_id}`)"> @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> <u-icon name="arrow-right"></u-icon>
</view> </view>
</u-form-item> </u-form-item>
@ -96,7 +96,7 @@
</view> </view>
</u--form> </u--form>
<view class="submit-btn"> <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>
<view class="overlay"> <view class="overlay">
@ -143,6 +143,10 @@
import { import {
HTTP_REQUEST_URL HTTP_REQUEST_URL
} from '@/config/app.js'; } from '@/config/app.js';
import {
formatDate
} from '../../../libs/uniApi';
import uploadImgVideo from "../addGood/components/uploadImgVideo.vue" import uploadImgVideo from "../addGood/components/uploadImgVideo.vue"
export default { export default {
components: { components: {
@ -153,8 +157,7 @@
formData: { formData: {
"store_name": "测试商品", "store_name": "测试商品",
"imageList": [ "imageList": [
"https://crmeb-test.shop.lihaink.cn/uploads/def/20240419/a09b7188e9ef408a3f96d82b2b178082.jpeg",
"https://crmeb-test.shop.lihaink.cn/uploads/def/20240419/7a6d14dc327f6b0936e479891c0d253a.jpg"
], ],
"attrValue": [{ "attrValue": [{
"price": "100", "price": "100",
@ -191,7 +194,7 @@
"once_min_count": "", "once_min_count": "",
"image": "https://crmeb-test.shop.lihaink.cn/uploads/def/20240419/a09b7188e9ef408a3f96d82b2b178082.jpeg", "image": "https://crmeb-test.shop.lihaink.cn/uploads/def/20240419/a09b7188e9ef408a3f96d82b2b178082.jpeg",
"slider_image": [ "slider_image": [
"https://crmeb-test.shop.lihaink.cn/uploads/def/20240419/7a6d14dc327f6b0936e479891c0d253a.jpg"
], ],
"is_good": 0, "is_good": 0,
"is_gift_bag": 0, "is_gift_bag": 0,
@ -200,9 +203,7 @@
"video_link": "", "video_link": "",
"content": { "content": {
"title": "", "title": "",
"image": [ "image": []
"https://crmeb-test.shop.lihaink.cn/uploads/def/20240419/6f96b50e17bbf9a1289f82f620747b73.jpeg"
]
}, },
"stock": "20" "stock": "20"
}, },
@ -252,17 +253,59 @@
}, },
methods: { 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) { deletePic(event) {
this[`fileList${event.name}`].splice(event.index, 1) this.formData.content.image.splice(event.index, 1)
}, },
// 新增图片 // 新增图片
async afterRead(event) { async afterRead(event) {
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式 // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
let lists = [].concat(event.file) let lists = [].concat(event.file)
let fileListLen = this[`fileList${event.name}`].length let fileListLen = this.formData.content.image.length
lists.map((item) => { lists.map((item) => {
this[`fileList${event.name}`].push({ this.formData.content.image.push({
...item, ...item,
status: 'uploading', status: 'uploading',
message: '上传中' message: '上传中'
@ -270,8 +313,8 @@
}) })
for (let i = 0; i < lists.length; i++) { for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url) const result = await this.uploadFilePromise(lists[i].url)
let item = this[`fileList${event.name}`][fileListLen] let item = this.formData.content.image[fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, { this.formData.content.image.splice(fileListLen, 1, Object.assign(item, {
status: 'success', status: 'success',
message: '', message: '',
url: result url: result
@ -310,13 +353,21 @@
}, },
showlayFn() { showlayFn() {
uni.navigateBack() uni.navigateBack()
},
submit() {
console.log(this.formData)
} }
}, },
onLoad(option) { onLoad(option) {
this.mer_id = option.mer_id this.mer_id = option.mer_id
if (option.typeData) { 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), {})
} }
}, },

265
pages/product/addGoodDetail/goodsAttr.vue
View File

@ -18,33 +18,34 @@
<u-form-item label="商品等级" prop="userInfo.name" ref="item1"> <u-form-item label="商品等级" prop="userInfo.name" ref="item1">
<view style="display: flex;align-items: center;font-size: 28rpx;color:#777777 ;" slot="right" <view style="display: flex;align-items: center;font-size: 28rpx;color:#777777 ;" slot="right"
@click="showPouple=true,popType='leval'"> @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> <u-icon name="arrow-right"></u-icon>
</view> </view>
</u-form-item> </u-form-item>
<u-form-item label="货品包装" prop="userInfo.name" ref="item1"> <u-form-item label="货品包装" prop="userInfo.name" ref="item1">
<view style="display: flex;align-items: center;font-size: 28rpx;color:#777777 ;" slot="right" <view style="display: flex;align-items: center;font-size: 28rpx;color:#777777 ;" slot="right"
@click="showPouple=true,popType='packing'"> @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> <u-icon name="arrow-right"></u-icon>
</view> </view>
</u-form-item> </u-form-item>
</view> </view>
<view class="description" style="display: flex;justify-content: space-between;align-items: center"> <view class="description" style="display: flex;justify-content: space-between;align-items: center">
<text>产品属性</text> <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> 自定义 <u-icon name="plus" color='#20B128' style="margin-right: 8rpx;font-weight: bold;"></u-icon> 自定义
</view> </view>
</view> </view>
<view class="label-cls" <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;"> <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-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> <u-line direction="col" length="40rpx" color="#CECECE"></u-line>
</view> </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> 删除 <u-icon name="trash" style='margin-right: 8rpx;'></u-icon> 删除
</view> </view>
</view> </view>
@ -57,46 +58,52 @@
<u-popup :show="showPouple" @close="showPouple=false" @open="showPouple=true" :round="10"> <u-popup :show="showPouple" @close="showPouple=false" @open="showPouple=true" :round="10">
<view class="RegularFont" style="padding: 42rpx 40rpx"> <view class="RegularFont" style="padding: 42rpx 40rpx">
<view class="pop-head"> <view class="pop-head">
<text>取消</text> <text v-if="popType=='place' || !show " @click="showPouple=false">取消</text>
<text style="font-size:32rpx ;color:#333333 ;">商品产地</text> <text v-else @click="show=false"><u-icon name="arrow-left" size="20"></u-icon></text>
<text>确定</text> <text
style="font-size:32rpx ;color:#333333 ;">{{popType=='place'?'商品产地': popType=='leval'?'商品等级':'商品包装' }}
</text>
<text @click="confirm">确定</text>
</view> </view>
<!-- 地区 --> <!-- 地区 -->
<view v-if="popType=='place'"> <view v-if="popType=='place'">
<view class="Positioning " style="color: #989898;margin-bottom: 30rpx;"> <view class="Positioning " style="color: #989898;margin-bottom: 30rpx;">
<view class="" style="display: flex;"> <view class="" style="display: flex;">
<u-icon name="map" style='margin-right: 8rpx;'></u-icon> <u-icon name="map" style='margin-right: 8rpx;'></u-icon>
<text>四川得分手段解决客户</text> <text>{{address.province}}{{address.city}}{{address.district}}</text>
</view> </view>
<view class=""> <view class="" @click="getLocation">
刷新定位 刷新定位
</view> </view>
</view> </view>
<u-line color="#CECECE"></u-line> <u-line color="#CECECE"></u-line>
<view class="province"> <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'} "> :style="{color:positionType==0?'#20B128':'#707070'} ">
四川省 {{address.province||'请选择' }}
</view> </view>
<view class="province-li" @click='positionType=1' <view class="province-li" @click='positionType=1,positionList=cityList'
:style="{color:positionType==1?'#20B128':'#707070'} "> :style="{color:positionType==1?'#20B128':'#707070'} ">
泸州市 {{address.city ||'请选择'}}
</view> </view>
<view class="province-li" @click='positionType=2' <view class="province-li" @click='positionType=2,positionList=districtList'
:style="{color:positionType==2?'#20B128':'#707070'} "> :style="{color:positionType==2?'#20B128':'#707070'} ">
牛马谭 {{address.district ||'请选择'}}
</view> </view>
<view class="province-line" :style="{left:positionType*130+30+'rpx'}" /> <view class="province-line" :style="{left:positionType*130+30+'rpx'}" />
</view> </view>
<u-line color="#CECECE"></u-line> <u-line color="#CECECE"></u-line>
<view class="" style="color:#989898;font-size:24rpx ;margin-top: 40rpx;"> <view class="" style="color:#989898;font-size:24rpx ;margin-top: 40rpx;">
请选择省份 请选择
</view> </view>
<view class="position-content"> <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> <text>
四川省 {{item}}
</text> </text>
<u-icon v-if='address.province==item' name="checkbox-mark" color="#38BE41"
style='margin-left: 8rpx;'></u-icon>
</view> </view>
</view> </view>
@ -106,24 +113,20 @@
<!-- 商品等级 --> <!-- 商品等级 -->
<view v-if="popType=='leval'" style="height: 500rpx;"> <view v-if="popType=='leval'" style="height: 500rpx;">
<u-transition :show="show" mode="slide-right"> <u-transition :show="!show" mode="slide-right">
<view class="goods-leval" v-show="show"> <view class="goods-leval">
<view class="goods-leval-li" v-for='item in 10'> <view class="goods-leval-li" :class="{act:formData.leval==item}" v-for='item in levalList'
一等平 @click="formData.leval=item,showPouple=false">
{{item}}
</view> </view>
<view class="goods-leval-li act"> <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 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> </view>
</view> </view>
</u-transition> </u-transition>
<u-transition :show="!show" mode="slide-left"> <u-transition :show="show" mode="slide-left">
<view class="transition" @click="show=!show"> <view class="transition">
<!-- 大师傅士大夫士大夫撒旦 --> <u--textarea v-model="selfLeval" placeholder="请输入商品等级"></u--textarea>
<u--textarea v-model="value1" placeholder="请输入商品等级"></u--textarea>
</view> </view>
</u-transition> </u-transition>
</view> </view>
@ -131,22 +134,21 @@
<!-- 商品包装 --> <!-- 商品包装 -->
<view v-if="popType=='packing'" style="height: 500rpx;"> <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">
<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>
<view class="goods-leval-li act">
木箱子 <view class="goods-leval-li " style="display: flex;color:#38BE41 ;" @click="show=true">
</view>
<view class="goods-leval-li " style="display: flex;color:#38BE41 ;" @click="show=!show">
<u-icon name="plus" color="#38BE41" style='margin-right: 8rpx;'></u-icon> 自定义 <u-icon name="plus" color="#38BE41" style='margin-right: 8rpx;'></u-icon> 自定义
</view> </view>
</view> </view>
</u-transition> </u-transition>
<u-transition :show="!show" mode="slide-left"> <u-transition :show="show" mode="slide-left">
<view class="transition" @click="show=!show"> <view class="transition">
<u--textarea v-model="value1" placeholder="请输入商品等级"></u--textarea> <u--textarea v-model="selfPack" placeholder="请输入商品等级"></u--textarea>
</view> </view>
</u-transition> </u-transition>
</view> </view>
@ -159,15 +161,114 @@
</template> </template>
<script> <script>
import {
getGeocoder,
} from '@/api/store.js';
export default { export default {
data() { data() {
return { 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', popType: 'leval',
showPouple: true, showPouple: false,
showSex: false, showSex: false,
positionType: 0, positionType: 0,
formData: {
leval: "",
pack: "",
},
model1: { model1: {
userInfo: { userInfo: {
name: '', name: '',
@ -176,19 +277,7 @@
}, },
value1: "", value1: "",
value: '', value: '',
range: [{
value: 0,
text: "篮球"
},
{
value: 1,
text: "足球"
},
{
value: 2,
text: "游泳"
},
],
text: "", text: "",
text1: "", text1: "",
value1: "", value1: "",
@ -230,19 +319,57 @@
url 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() { getLocation() {
let that = this
uni.getLocation({ uni.getLocation({
type: 'wgs84', type: 'gcj02',
success: function(res) { 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() { onLoad() {
// this.getLocation() this.getLocation()
} }
}; };
@ -342,14 +469,20 @@
font-size: 28rpx; font-size: 28rpx;
color: #707070; color: #707070;
margin-top: 30rpx; margin-top: 30rpx;
display: flex;
align-items: center;
}
.act {
color: #20B128;
} }
} }
.goods-leval { .goods-leval {
overflow-y: auto;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; margin-bottom: 20rpx;
overflow-y: auto;
.goods-leval-li { .goods-leval-li {
margin-right: 20rpx; margin-right: 20rpx;

396
uni_modules/uview-ui/components/u-picker/u-picker.vue
View File

@ -1,51 +1,23 @@
<template> <template>
<u-popup <u-popup :show="show" @close="closeHandler">
:show="show"
@close="closeHandler"
>
<view class="u-picker"> <view class="u-picker">
<u-toolbar <u-toolbar v-if="showToolbar" :cancelColor="cancelColor" :confirmColor="confirmColor"
v-if="showToolbar" :cancelText="cancelText" :confirmText="confirmText" :title="title" @cancel="cancel"
:cancelColor="cancelColor" @confirm="confirm"></u-toolbar>
:confirmColor="confirmColor" <picker-view class="u-picker__view" :indicatorStyle="`height: ${$u.addUnit(itemHeight)}`"
:cancelText="cancelText" :value="innerIndex" :immediateChange="immediateChange" :style="{
: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)}` height: `${$u.addUnit(visibleItemCount * itemHeight)}`
}" }" @change="changeHandler">
@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"
<picker-view-column v-for="(item1, index1) in item" :key="index1" :style="{
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), height: $u.addUnit(itemHeight),
lineHeight: $u.addUnit(itemHeight), lineHeight: $u.addUnit(itemHeight),
fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal' fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal'
}" }">{{ getItemText(item1) }}</text>
>{{ getItemText(item1) }}</text>
</picker-view-column> </picker-view-column>
</picker-view> </picker-view>
<view <view v-if="loading" class="u-picker--loading">
v-if="loading"
class="u-picker--loading"
>
<u-loading-icon mode="circle"></u-loading-icon> <u-loading-icon mode="circle"></u-loading-icon>
</view> </view>
</view> </view>
@ -53,184 +25,184 @@
</template> </template>
<script> <script>
/** /**
* u-picker * u-picker
* @description 选择器 * @description 选择器
* @property {Boolean} show 是否显示picker弹窗（默认 false ） * @property {Boolean} show 是否显示picker弹窗（默认 false ）
* @property {Boolean} showToolbar 是否显示顶部的操作栏（默认 true ） * @property {Boolean} showToolbar 是否显示顶部的操作栏（默认 true ）
* @property {String} title 顶部标题 * @property {String} title 顶部标题
* @property {Array} columns 对象数组，设置每一列的数据 * @property {Array} columns 对象数组，设置每一列的数据
* @property {Boolean} loading 是否显示加载中状态（默认 false ） * @property {Boolean} loading 是否显示加载中状态（默认 false ）
* @property {String | Number} itemHeight 各列中，单个选项的高度（默认 44 ） * @property {String | Number} itemHeight 各列中，单个选项的高度（默认 44 ）
* @property {String} cancelText 取消按钮的文字（默认 '取消' ） * @property {String} cancelText 取消按钮的文字（默认 '取消' ）
* @property {String} confirmText 确认按钮的文字（默认 '确定' ） * @property {String} confirmText 确认按钮的文字（默认 '确定' ）
* @property {String} cancelColor 取消按钮的颜色（默认 '#909193' ） * @property {String} cancelColor 取消按钮的颜色（默认 '#909193' ）
* @property {String} confirmColor 确认按钮的颜色（默认 '#3c9cff' ） * @property {String} confirmColor 确认按钮的颜色（默认 '#3c9cff' ）
* @property {String | Number} visibleItemCount 每列中可见选项的数量（默认 5 ） * @property {String | Number} visibleItemCount 每列中可见选项的数量（默认 5 ）
* @property {String} keyName 选项对象中，需要展示的属性键名（默认 'text' ） * @property {String} keyName 选项对象中，需要展示的属性键名（默认 'text' ）
* @property {Boolean} closeOnClickOverlay 是否允许点击遮罩关闭选择器（默认 false ） * @property {Boolean} closeOnClickOverlay 是否允许点击遮罩关闭选择器（默认 false ）
* @property {Array} defaultIndex 各列的默认索引 * @property {Array} defaultIndex 各列的默认索引
* @property {Boolean} immediateChange 是否在手指松开时立即触发change事件（默认 false ） * @property {Boolean} immediateChange 是否在手指松开时立即触发change事件（默认 false ）
* @event {Function} close 关闭选择器时触发 * @event {Function} close 关闭选择器时触发
* @event {Function} cancel 点击取消按钮触发 * @event {Function} cancel 点击取消按钮触发
* @event {Function} change 当选择值变化时触发 * @event {Function} change 当选择值变化时触发
* @event {Function} confirm 点击确定按钮，返回当前选择的值 * @event {Function} confirm 点击确定按钮，返回当前选择的值
*/ */
import props from './props.js'; import props from './props.js';
export default { export default {
name: 'u-picker', name: 'u-picker',
mixins: [uni.$u.mpMixin, uni.$u.mixin, props], mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
data() { data() {
return { return {
// 上一次选择的列索引 // 上一次选择的列索引
lastIndex: [], lastIndex: [],
// 索引值 ，对应picker-view的value // 索引值 ，对应picker-view的value
innerIndex: [], innerIndex: [],
// 各列的值 // 各列的值
innerColumns: [], innerColumns: [],
// 上一次的变化列索引 // 上一次的变化列索引
columnIndex: 0, columnIndex: 0,
}
},
watch: {
// 监听默认索引的变化，重新设置对应的值
defaultIndex: {
immediate: true,
handler(n) {
this.setIndexs(n, true)
} }
}, },
// 监听columns参数的变化 watch: {
columns: { // 监听默认索引的变化，重新设置对应的值
immediate: true, defaultIndex: {
handler(n) { immediate: true,
this.setColumns(n) handler(n) {
} this.setIndexs(n, true)
},
},
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 // 监听columns参数的变化
const values = this.innerColumns columns: {
// 将当前的各项变化索引，设置为"上一次"的索引变化值 immediate: true,
this.setLastIndex(value) handler(n) {
this.setIndexs(value) 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', { this.$emit('change', {
// #ifndef MP-WEIXIN || MP-LARK // #ifndef MP-WEIXIN || MP-LARK
// 微信小程序不能传递this，会因为循环引用而报错 // 微信小程序不能传递this，会因为循环引用而报错
picker: this, picker: this,
// #endif // #endif
value: this.innerColumns.map((item, index) => item[value[index]]), value: this.innerColumns.map((item, index) => item[value[index]]),
index, index,
indexs: value, indexs: value,
// values为当前变化列的数组内容 // values为当前变化列的数组内容
values, values,
columnIndex columnIndex
}) })
}, },
// 设置index索引，此方法可被外部调用设置 // 设置index索引，此方法可被外部调用设置
setIndexs(index, setLastIndex) { setIndexs(index, setLastIndex) {
this.innerIndex = uni.$u.deepClone(index) this.innerIndex = uni.$u.deepClone(index)
if (setLastIndex) { if (setLastIndex) {
this.setLastIndex(index) 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.setIndexs(tmpIndex) setLastIndex(index) {
}, // 当能进入此方法，意味着当前设置的各列默认索引，即为“上一次”的选中值，需要记录，是因为changeHandler中
// 获取对应列的所有选项 // 需要拿前后的变化值进行对比，得出当前发生改变的是哪一列
getColumnValues(columnIndex) { this.lastIndex = uni.$u.deepClone(index)
// 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值 },
// 索引如果在外部change的回调中调用getColumnValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性 // 设置对应列选项的所有值
(async () => { setColumnValues(columnIndex, values) {
await uni.$u.sleep() // 替换innerColumns数组中columnIndex索引的值为values，使用的是数组的splice方法
})() this.innerColumns.splice(columnIndex, 1, values)
return this.innerColumns[columnIndex] // 拷贝一份原有的innerIndex做临时变量，将大于当前变化列的所有的列的默认索引设置为0
}, let tmpIndex = uni.$u.deepClone(this.innerIndex)
// 设置整体各列的columns的值 for (let i = 0; i < this.innerColumns.length; i++) {
setColumns(columns) { if (i > this.columnIndex) {
this.innerColumns = uni.$u.deepClone(columns) tmpIndex[i] = 0
// 如果在设置各列数据时，没有被设置默认的各列索引defaultIndex，那么用0去填充它，数组长度为列的数量 }
if (this.innerIndex.length === 0) { }
this.innerIndex = new Array(columns.length).fill(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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -280,4 +252,4 @@ export default {
z-index: 1000; z-index: 1000;
} }
} }
</style> </style>