forked from angelo/web-retail-h5
440 lines
10 KiB
Vue
440 lines
10 KiB
Vue
|
|
<template>
|
|
<div>
|
|
<u-popup class="notice"
|
|
:show="showSpace"
|
|
width="70%"
|
|
@close="handleClose"
|
|
round="10"
|
|
mode="center">
|
|
<view class="disFlex">
|
|
<div class="flex">
|
|
<picker @change="bindPickerChange1"
|
|
:value="shengIndex"
|
|
:range="shengList"
|
|
range-key="name">
|
|
<view v-if="shengList.length>0&&shengList[shengIndex]!=undefined&&shengList[shengIndex].name"
|
|
class="kuang">
|
|
<view> {{shengList[shengIndex].name | suo}}</view>
|
|
<u-icon name="arrow-down"
|
|
color="#ccc"
|
|
size="14"></u-icon>
|
|
</view>
|
|
<view v-else
|
|
class="kuang">
|
|
<view>省</view>
|
|
<u-icon name="arrow-down"
|
|
color="#ccc"
|
|
size="14"></u-icon>
|
|
</view>
|
|
</picker>
|
|
</div>
|
|
<div class="flex">
|
|
<picker @change="bindPickerChange2"
|
|
:value="shiIndex"
|
|
:range="shiList"
|
|
range-key="name">
|
|
<view v-if="shiList.length>0&&shiList[shiIndex]!=undefined&&shiList[shiIndex].name"
|
|
class="kuang">
|
|
<view> {{shiList[shiIndex].name | suo}}</view>
|
|
<u-icon name="arrow-down"
|
|
color="#ccc"
|
|
size="14"></u-icon>
|
|
</view>
|
|
<view v-else
|
|
class="kuang">
|
|
<view>市</view>
|
|
<u-icon name="arrow-down"
|
|
color="#ccc"
|
|
size="14"></u-icon>
|
|
</view>
|
|
</picker>
|
|
</div>
|
|
<div class="flex">
|
|
<picker @change="bindPickerChange3"
|
|
:value="quIndex"
|
|
:range="quList"
|
|
range-key="name">
|
|
<view v-if="quList.length>0&&quList[quIndex]!=undefined&&quList[quIndex].name"
|
|
class="kuang">
|
|
<view> {{quList[quIndex].name | suo}}</view>
|
|
<u-icon name="arrow-down"
|
|
color="#ccc"
|
|
size="14"></u-icon>
|
|
</view>
|
|
<view v-else
|
|
class="kuang">
|
|
<view>区</view>
|
|
<u-icon name="arrow-down"
|
|
color="#ccc"
|
|
size="14"></u-icon>
|
|
</view>
|
|
</picker>
|
|
</div>
|
|
</view>
|
|
<u-list @scrolltolower="setDizhi">
|
|
<view class="disFlex1">
|
|
<view></view>
|
|
<view class="tit1">店铺名称</view>
|
|
<view class="tit1">店铺编号</view>
|
|
<view class="tit1">店铺地址</view>
|
|
</view>
|
|
<u-radio-group v-model="pkMakerSpace"
|
|
placement="column">
|
|
<u-list-item v-show="tableData.length>0"
|
|
v-for="item in tableData">
|
|
<view class="disFlex hang">
|
|
<u-radio :name="item.pkId"
|
|
class="width1"
|
|
activeColor="red"></u-radio>
|
|
<view class="disFlex flex width2">
|
|
<view>{{ item.storeName }}</view>
|
|
<view>{{ item.storeCode }}</view>
|
|
<view>{{ item.storeAddress }}</view>
|
|
</view>
|
|
</view>
|
|
</u-list-item>
|
|
<view class="kong"
|
|
v-show="tableData.length==0">暂无数据</view>
|
|
</u-radio-group>
|
|
</u-list>
|
|
<!-- <span slot="footer"
|
|
class="dialog-footer">
|
|
<el-button @click="showSpace = false">取 消</el-button>
|
|
<el-button type="primary"
|
|
@click="addCar"
|
|
class="delBtn">确 定</el-button>
|
|
</span> -->
|
|
<view class="shareImg">
|
|
<view class="btn1"
|
|
@click="handleClose">取消</view>
|
|
<view class="btn2"
|
|
@click="addCar">确定</view>
|
|
</view>
|
|
</u-popup>
|
|
<!-- <v-address ref="address"
|
|
:defaultCode="defaultCode"
|
|
@addressData="addressData"></v-address> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as api from '@/config/regiest.js'
|
|
import * as goods from '@/config/goods.js'
|
|
import address from '@/components/address.vue'
|
|
|
|
export default {
|
|
components: {
|
|
'v-address': address,
|
|
},
|
|
filters:{
|
|
//处理函数
|
|
suo(value){
|
|
let str
|
|
if(value.length > 4){
|
|
str=value.substring(0,4)
|
|
return str + '...'
|
|
}else{
|
|
return value
|
|
}
|
|
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
defaultCode: [],
|
|
address: '',
|
|
addressForm: {},
|
|
showSpace: false,
|
|
dizhi: [],
|
|
regionParams: {
|
|
label: 'name',
|
|
value: 'id',
|
|
children: 'children',
|
|
expandTrigger: 'hover',
|
|
},
|
|
tableData: [],
|
|
total: 10,
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 50,
|
|
},
|
|
selSpace: [],
|
|
carList: '',
|
|
pkMakerSpace: '',
|
|
shengList: [],
|
|
shiList: [],
|
|
quList: [],
|
|
shengIndex: '',
|
|
shiIndex: '',
|
|
quIndex: '',
|
|
}
|
|
},
|
|
methods: {
|
|
bindPickerChange1: function (e) {
|
|
this.shengIndex = e.detail.value
|
|
this.addressForm.licenseProvince = this.shengList[e.detail.value].pkId
|
|
this.getShi(this.shengList[e.detail.value].pkId)
|
|
this.tableData = []
|
|
this.queryParams.pageNum = 1
|
|
this.setDizhi()
|
|
},
|
|
bindPickerChange2: function (e) {
|
|
this.shiIndex = e.detail.value
|
|
this.addressForm.licenseCity = this.shiList[e.detail.value].pkId
|
|
this.getQu(this.shiList[e.detail.value].pkId)
|
|
this.tableData = []
|
|
this.queryParams.pageNum = 1
|
|
this.setDizhi()
|
|
},
|
|
bindPickerChange3: function (e) {
|
|
this.quIndex = e.detail.value
|
|
this.addressForm.licenseCounty =this.quList[this.quIndex].pkId
|
|
this.tableData = []
|
|
this.queryParams.pageNum = 1
|
|
this.setDizhi()
|
|
// this.getArea(this.shengList[this.shengIndex].pkId)
|
|
},
|
|
addressData(diqu, obj) {
|
|
this.address = diqu
|
|
this.addressForm.licenseProvince = obj.province
|
|
this.addressForm.licenseCity = obj.city
|
|
this.addressForm.licenseCounty = obj.county
|
|
this.$forceUpdate()
|
|
this.setDizhi()
|
|
},
|
|
getData(carList) {
|
|
this.carList = carList
|
|
this.showSpace = true
|
|
this.tableData = []
|
|
this.queryParams.pageNum = 1
|
|
this.address = ''
|
|
this.getSheng()
|
|
this.setDizhi()
|
|
},
|
|
getSheng() {
|
|
api
|
|
.areaList({
|
|
parent: 0,
|
|
})
|
|
.then((res) => {
|
|
this.shengList = res.data
|
|
})
|
|
},
|
|
getShi(id) {
|
|
api
|
|
.areaList({
|
|
parent:id,
|
|
})
|
|
.then((res) => {
|
|
this.shiList = res.data
|
|
})
|
|
},
|
|
getQu(id) {
|
|
api
|
|
.areaList({
|
|
parent: id,
|
|
})
|
|
.then((res) => {
|
|
this.quList = res.data
|
|
})
|
|
},
|
|
getDiqu() {
|
|
this.$refs.address.setShow()
|
|
},
|
|
setDizhi() {
|
|
if (this.tableData.length < this.total) {
|
|
api
|
|
.list_maker(
|
|
Object.assign(
|
|
{
|
|
licenseProvince: this.addressForm.licenseProvince,
|
|
licenseCity: this.addressForm.licenseCity||'',
|
|
licenseCounty: this.addressForm.licenseCounty || '',
|
|
},
|
|
this.queryParams
|
|
)
|
|
)
|
|
.then((res) => {
|
|
this.total = res.total
|
|
this.tableData = this.tableData.concat(res.rows)
|
|
this.queryParams.pageNum++
|
|
})
|
|
} else {
|
|
return false
|
|
}
|
|
|
|
// this.queryParams.pageNum++
|
|
},
|
|
handleSelectionChange(val) {
|
|
this.selSpace = val
|
|
},
|
|
handleSelect(selection, val) {
|
|
//只能选择一行，选择其他，清除上一行
|
|
if (selection.length > 1) {
|
|
let del_row = selection.shift()
|
|
this.$refs.table.toggleRowSelection(del_row, false) //设置这一行取消选中
|
|
}
|
|
},
|
|
|
|
handleClose() {
|
|
this.showSpace = false
|
|
},
|
|
addCar() {
|
|
if (!this.pkMakerSpace) {
|
|
uni.showToast({
|
|
title: '请选择店铺',
|
|
icon: 'none',
|
|
mask: true,
|
|
})
|
|
return
|
|
} else {
|
|
this.carList.pkMakerSpace = this.pkMakerSpace
|
|
goods.addShopping(this.carList).then((res) => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: '购物车添加成功',
|
|
icon: 'success',
|
|
mask: true,
|
|
})
|
|
this.showSpace = false
|
|
this.$emit('getCar')
|
|
}
|
|
})
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep .el-cascader {
|
|
width: 100%;
|
|
}
|
|
|
|
::v-deep .pagination-container {
|
|
padding: 10px;
|
|
}
|
|
|
|
::v-deep .order .el-table__header-wrapper .el-checkbox {
|
|
display: none;
|
|
}
|
|
|
|
// 删除按钮
|
|
.delBtn {
|
|
background: #005BAC;
|
|
color: #fff;
|
|
border-color: #005BAC;
|
|
}
|
|
|
|
.delBtn:hover {
|
|
background: #005BAC;
|
|
color: #fff;
|
|
border-color: #005BAC;
|
|
}
|
|
|
|
.view-class {
|
|
border: 1rpx solid #eee;
|
|
// margin: 0 30rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.drop {
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
position: absolute;
|
|
right: 10rpx;
|
|
top: 20rpx;
|
|
}
|
|
}
|
|
|
|
.notice ::v-deep .u-popup__content {
|
|
height: 900rpx;
|
|
width: 610rpx;
|
|
padding: 80rpx 40rpx 200rpx 40rpx;
|
|
overflow-y: auto;
|
|
}
|
|
.disFlex {
|
|
display: flex;
|
|
font-size: 26rpx;
|
|
}
|
|
.disFlex1 {
|
|
display: flex;
|
|
font-size: 26rpx;
|
|
background: #eeeeee;
|
|
padding: 20rpx 0;
|
|
margin-top: 10rpx;
|
|
view {
|
|
width: 6%;
|
|
}
|
|
.tit1 {
|
|
width: 31%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
// .flex {
|
|
// flex: 1;
|
|
// }
|
|
.width1 {
|
|
width: 6%;
|
|
}
|
|
.width2 {
|
|
flex: 1;
|
|
view {
|
|
width: 50%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.hang {
|
|
padding: 10rpx 0;
|
|
}
|
|
.shareImg {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
margin: 0 auto;
|
|
bottom: 17%;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
display: flex;
|
|
// justify-content: space-between;
|
|
justify-content: center;
|
|
font-size: 28rpx;
|
|
.btn1 {
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 10px;
|
|
background: #eee;
|
|
margin-right: 80rpx;
|
|
}
|
|
.btn2 {
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 10px;
|
|
background: #ed1d25;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.kong {
|
|
margin-top: 200rpx;
|
|
text-align: center;
|
|
color: #aaa;
|
|
}
|
|
.disFlex {
|
|
display: flex;
|
|
align-items: center;
|
|
.flex {
|
|
flex: 1;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
.kuang {
|
|
border: 2rpx solid #ccc;
|
|
padding: 10rpx 20rpx;
|
|
font-size: 12px;
|
|
color: #ccc;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-radius: 10rpx;
|
|
}
|
|
</style> |