30 changed files with 4020 additions and 96 deletions
@ -0,0 +1,143 @@ |
|||||||
|
<template> |
||||||
|
<el-form :inline="true"> |
||||||
|
<el-row :gutter="20"> |
||||||
|
<el-col :span="8" > |
||||||
|
<el-select |
||||||
|
v-model="tipInput" |
||||||
|
class="tipInput" |
||||||
|
filterable |
||||||
|
remote |
||||||
|
reserve-keyword |
||||||
|
clearable |
||||||
|
placeholder="搜地点" |
||||||
|
:remote-method="remoteMethod" |
||||||
|
:loading="loading" |
||||||
|
@change="tipChange"> |
||||||
|
<el-option |
||||||
|
v-for="(item,index) in tips" |
||||||
|
:key="index" |
||||||
|
:label="item.name" |
||||||
|
:value="item.id"> |
||||||
|
<span style="float: left">{{ item.name }}</span> |
||||||
|
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.district }}</span> |
||||||
|
</el-option> |
||||||
|
</el-select> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<!-- 高德地图自带的，是获取id的值不是获取class --> |
||||||
|
<div id="a-map" style="height: 750px;width: 100%"> |
||||||
|
</div> |
||||||
|
</el-form> |
||||||
|
|
||||||
|
</template> |
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'Map', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
tipInput : '', |
||||||
|
loading: false, |
||||||
|
map: undefined, |
||||||
|
tips: [], |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
this.initMap() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
initMap() { |
||||||
|
this.map = new AMap.Map("a-map", { |
||||||
|
resizeEnable: true, |
||||||
|
zoom: 13,//地图显示的缩放级别 |
||||||
|
keyboardEnable: false |
||||||
|
}); |
||||||
|
this.mapClick() |
||||||
|
}, |
||||||
|
tipChange(value) { |
||||||
|
for (const tip of this.tips) { |
||||||
|
|
||||||
|
if (value === tip.id) { |
||||||
|
this.map.setZoom(13) |
||||||
|
this.map.setCenter(tip.location) |
||||||
|
//标记地图的点 |
||||||
|
this.makerLocation(tip.location) |
||||||
|
//传递出参数 |
||||||
|
let currentLocation = { |
||||||
|
address: tip.district + tip.name + tip.address, |
||||||
|
location: tip.location |
||||||
|
} |
||||||
|
this.$emit('currentLocation', currentLocation) |
||||||
|
break |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
remoteMethod(query) { |
||||||
|
if (query !== '') { |
||||||
|
this.loading = true; |
||||||
|
const that = this |
||||||
|
AMap.plugin('AMap.Autocomplete', function(){ |
||||||
|
// 实例化Autocomplete |
||||||
|
const autoOptions = { |
||||||
|
city: '全国' |
||||||
|
} |
||||||
|
const autoComplete = new AMap.Autocomplete(autoOptions); |
||||||
|
autoComplete.search(query, function(status, result) { |
||||||
|
// 搜索成功时，result即是对应的匹配数据 |
||||||
|
that.tips = result.tips || [] |
||||||
|
that.loading = false; |
||||||
|
}) |
||||||
|
}) |
||||||
|
} else { |
||||||
|
this.tips = []; |
||||||
|
} |
||||||
|
}, |
||||||
|
makerLocation({lng,lat}) { |
||||||
|
// 创建一个 Marker 实例：（标记点） |
||||||
|
var marker = new AMap.Marker({ |
||||||
|
position: new AMap.LngLat(lng, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] |
||||||
|
title: "位置标题", |
||||||
|
}); |
||||||
|
console.log(this.map.getAllOverlays('marker'),"this.map.getAllOverlays('marker')") |
||||||
|
//移除之前标记的点 |
||||||
|
this.map.remove(this.map.getAllOverlays('marker')); |
||||||
|
// 将创建的点标记添加到已有的地图实例： |
||||||
|
this.map.add(marker); |
||||||
|
}, |
||||||
|
mapClick() { |
||||||
|
let _this = this |
||||||
|
_this.map.on('click',function(e) { |
||||||
|
console.log(e.lnglat,"eee") |
||||||
|
//根据经纬度查询地址 |
||||||
|
let geocoder = new AMap.Geocoder({}); |
||||||
|
geocoder.getAddress(e.lnglat, function(status, result) { |
||||||
|
if (status === "complete" && result.regeocode) { |
||||||
|
// console.log( result.regeocode.formattedAddress," result.regeocode.formattedAddress") |
||||||
|
_this.tipInput = result.regeocode.formattedAddress; |
||||||
|
//标记位置 |
||||||
|
_this.makerLocation(e.lnglat) |
||||||
|
let currentLocation = { |
||||||
|
address: _this.tipInput, |
||||||
|
location: e.lnglat |
||||||
|
} |
||||||
|
//传递参数 |
||||||
|
_this.$emit('currentLocation', currentLocation) |
||||||
|
|
||||||
|
} else { |
||||||
|
console.log("根据经纬度查询地址失败"); |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
.tipInput { |
||||||
|
position: fixed; |
||||||
|
z-index: 999; |
||||||
|
margin-top: 20px; |
||||||
|
margin-left: 20px; |
||||||
|
width: 300px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,205 @@ |
|||||||
|
<template> |
||||||
|
<el-dialog |
||||||
|
:close-on-click-modal="false" |
||||||
|
:title="title" |
||||||
|
:type="type" |
||||||
|
:visible.sync="isVisible" |
||||||
|
width="45%" |
||||||
|
top="50px" |
||||||
|
class="product-dialog" |
||||||
|
> |
||||||
|
<el-form |
||||||
|
:model="sizeForm" |
||||||
|
size="mini" |
||||||
|
> |
||||||
|
<el-form-item |
||||||
|
label="分组封面" |
||||||
|
prop="fileLength" |
||||||
|
/> |
||||||
|
<div class="upload-wrap"> |
||||||
|
<div class="image-wrap"> |
||||||
|
<img |
||||||
|
v-if="params.productImg" |
||||||
|
:src="params.productImg" |
||||||
|
alt="" |
||||||
|
/> |
||||||
|
<i |
||||||
|
v-else |
||||||
|
class="el-icon-plus" |
||||||
|
></i> |
||||||
|
</div> |
||||||
|
<el-upload |
||||||
|
:headers="headers" |
||||||
|
:data="dataObj" |
||||||
|
:multiple="false" |
||||||
|
:show-file-list="false" |
||||||
|
:on-success="handleImageSuccess" |
||||||
|
:action="action" |
||||||
|
> |
||||||
|
<el-button |
||||||
|
slot="trigger" |
||||||
|
type="text" |
||||||
|
> |
||||||
|
{{ params.productImg ? '更换' : '添加图片' }} |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
v-if="params.productImg" |
||||||
|
type="text" |
||||||
|
@click="delectProductImg" |
||||||
|
> |
||||||
|
删除 |
||||||
|
</el-button> |
||||||
|
</el-upload> |
||||||
|
</div> |
||||||
|
|
||||||
|
<el-form-item label="分组名称"> |
||||||
|
<el-input |
||||||
|
v-model="params.productName" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item |
||||||
|
size="large" |
||||||
|
class="btn-wrap" |
||||||
|
> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
@click="onSubmit" |
||||||
|
> |
||||||
|
确定 |
||||||
|
</el-button> |
||||||
|
<el-button @click="isVisible = false"> |
||||||
|
取消 |
||||||
|
</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import db from '@/utils/localstorage' |
||||||
|
import Goods from '@/api/Goods' |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
dialogVisible: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
type: { |
||||||
|
type: String, |
||||||
|
default: 'add' |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
sizeForm: {}, |
||||||
|
headers: { |
||||||
|
Authorization: '' |
||||||
|
}, |
||||||
|
action: `${process.env.VUE_APP_DEV_REQUEST_DOMAIN_PREFIX}/file/upload`, |
||||||
|
dataObj: { |
||||||
|
folderId: 1 |
||||||
|
}, |
||||||
|
params: { |
||||||
|
productImg: '' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
isVisible: { |
||||||
|
get() { |
||||||
|
return this.dialogVisible |
||||||
|
}, |
||||||
|
set() { |
||||||
|
this.close() |
||||||
|
this.reset() |
||||||
|
} |
||||||
|
}, |
||||||
|
title() { |
||||||
|
return this.type === 'add' ? '新建分组' : '查看分组' |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.headers.token = 'Bearer ' + db.get('TOKEN', '') |
||||||
|
this.headers.tenant = '0000' |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
close() { |
||||||
|
this.$emit('close') |
||||||
|
}, |
||||||
|
reset() { |
||||||
|
this.params = {} |
||||||
|
}, |
||||||
|
async onSubmit() { |
||||||
|
if (this.type === 'add') { |
||||||
|
this.addProduct() |
||||||
|
} else { |
||||||
|
this.updateProduct() |
||||||
|
} |
||||||
|
}, |
||||||
|
async addProduct() { |
||||||
|
const res = await Goods.addProduct(this.params) |
||||||
|
const resData = res.data |
||||||
|
const { code } = resData |
||||||
|
if (code === 0) { |
||||||
|
this.isVisible = false |
||||||
|
this.$message({ |
||||||
|
message: this.$t('tips.createSuccess'), |
||||||
|
type: 'success' |
||||||
|
}) |
||||||
|
this.$emit('success') |
||||||
|
} |
||||||
|
}, |
||||||
|
async updateProduct() { |
||||||
|
const res = await Goods.eidtProduct(this.params) |
||||||
|
const resData = res.data |
||||||
|
const { code } = resData |
||||||
|
if (code === 0) { |
||||||
|
this.isVisible = false |
||||||
|
this.$message({ |
||||||
|
message: this.$t('tips.updateSuccess'), |
||||||
|
type: 'success' |
||||||
|
}) |
||||||
|
this.$emit('success') |
||||||
|
} |
||||||
|
}, |
||||||
|
handleImageSuccess(response) { |
||||||
|
const { url } = response.data |
||||||
|
this.params.productImg = url |
||||||
|
}, |
||||||
|
delectProductImg() { |
||||||
|
this.params.productImg = '' |
||||||
|
}, |
||||||
|
setParams(val = {}) { |
||||||
|
const vm = this |
||||||
|
if (val['params']) { |
||||||
|
vm.params = val['params'] |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="less" scoped> |
||||||
|
.product-dialog { |
||||||
|
.btn-wrap { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.upload-wrap { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: flex-end; |
||||||
|
.image-wrap { |
||||||
|
width: 120px; |
||||||
|
height: 120px; |
||||||
|
line-height: 120px; |
||||||
|
margin-right: 15px; |
||||||
|
margin-bottom: 15px; |
||||||
|
text-align: center; |
||||||
|
border: 1px dashed #d9d9d9; |
||||||
|
img { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,327 @@ |
|||||||
|
<template> |
||||||
|
<div class="product-page"> |
||||||
|
<div class="toolbar"> |
||||||
|
<el-form |
||||||
|
:inline="true" |
||||||
|
:model="formParams" |
||||||
|
> |
||||||
|
<el-form-item label="订单编号"> |
||||||
|
<el-input |
||||||
|
v-model="formParams.model.orderCode" |
||||||
|
size="mini" |
||||||
|
placeholder="订单编号" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="订单状态"> |
||||||
|
<el-select |
||||||
|
v-model="formParams.model.orderStatus" |
||||||
|
size="mini" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="(item, index) in orderStatus" |
||||||
|
:key="index" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="售后状态"> |
||||||
|
<el-select |
||||||
|
v-model="formParams.model.returnGoodsStatus" |
||||||
|
size="mini" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="(item, index) in returnGoodsStatus" |
||||||
|
:key="index" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="下单时间"> |
||||||
|
<el-date-picker |
||||||
|
v-model="formParams.code" |
||||||
|
size="mini" |
||||||
|
align="right" |
||||||
|
type="date" |
||||||
|
placeholder="选择日期" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
size="mini" |
||||||
|
@click="query" |
||||||
|
> |
||||||
|
查询 |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
type="text" |
||||||
|
size="mini" |
||||||
|
> |
||||||
|
批量导入 |
||||||
|
</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
<div class="product-content"> |
||||||
|
<el-table |
||||||
|
:data="tableData.records" |
||||||
|
style="width: 100%" |
||||||
|
> |
||||||
|
<el-table-column |
||||||
|
prop="ProductName" |
||||||
|
label="分组名称" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="createTime" |
||||||
|
label="创建时间" |
||||||
|
/> |
||||||
|
<el-table-column label="操作"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button |
||||||
|
type="text" |
||||||
|
size="small" |
||||||
|
@click.native.prevent="editProduct(scope.row)" |
||||||
|
> |
||||||
|
编辑 |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
type="text" |
||||||
|
size="small" |
||||||
|
@click.native.prevent="deleteProduct(scope.row)" |
||||||
|
> |
||||||
|
删除 |
||||||
|
</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
<pagination |
||||||
|
v-show="tableData.total > 0" |
||||||
|
:limit.sync="formParams.size" |
||||||
|
:page.sync="formParams.current" |
||||||
|
:total="Number(tableData.total)" |
||||||
|
@pagination="fetch" |
||||||
|
/> |
||||||
|
<grope-edit |
||||||
|
ref="edit" |
||||||
|
:dialog-visible="dialog.isVisible" |
||||||
|
:type="dialog.type" |
||||||
|
@close="editClose" |
||||||
|
@success="getProductList" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import Order from '@/api/Order' |
||||||
|
import GropeEdit from './Edit' |
||||||
|
import Pagination from '@/components/Pagination' |
||||||
|
export default { |
||||||
|
components: { |
||||||
|
GropeEdit, |
||||||
|
Pagination |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
formParams: { |
||||||
|
current: 1, |
||||||
|
map: {}, |
||||||
|
model: { |
||||||
|
address: '', |
||||||
|
city: '', |
||||||
|
cityId: 0, |
||||||
|
confirmTime: '', |
||||||
|
country: '', |
||||||
|
countryId: 0, |
||||||
|
district: '', |
||||||
|
districtId: 0, |
||||||
|
isDelete: 0, |
||||||
|
logisticsId: 0, |
||||||
|
logisticsName: '', |
||||||
|
logisticsNum: '', |
||||||
|
notes: '', |
||||||
|
orderCode: '', |
||||||
|
orderStatus: '', |
||||||
|
orderSum: 0, |
||||||
|
parentCode: '', |
||||||
|
parentId: 0, |
||||||
|
payStatus: 0, |
||||||
|
paySum: 0, |
||||||
|
payTime: '', |
||||||
|
postFee: 0, |
||||||
|
province: '', |
||||||
|
provinceId: 0, |
||||||
|
recMobile: '', |
||||||
|
recName: '', |
||||||
|
returnGoodsStatus: 0, |
||||||
|
returnMoneyStatus: 0, |
||||||
|
returnMoneyTime: '', |
||||||
|
sendTime: '' |
||||||
|
}, |
||||||
|
order: 'descending', |
||||||
|
size: 10, |
||||||
|
sort: 'id' |
||||||
|
}, |
||||||
|
// 1-待付款 2-待发货，无退款流程 3-待发货，有退款流程 |
||||||
|
// 4-待收货，无退货流程 5-待收货，有退货流程 6-已完成 7-已取消 |
||||||
|
orderStatus: [ |
||||||
|
{ |
||||||
|
label: '全部', |
||||||
|
value: '' |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '待付款', |
||||||
|
value: 1 |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '待发货，无退款流程', |
||||||
|
value: 2 |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '待发货，有退款流程', |
||||||
|
value: 3 |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '待收货，无退货流程', |
||||||
|
value: 4 |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '待收货，有退货流程', |
||||||
|
value: 5 |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '已完成', |
||||||
|
value: 6 |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '已取消', |
||||||
|
value: 7 |
||||||
|
} |
||||||
|
], |
||||||
|
// 退货状态：-1-无退货 0-退货审核中 1-审核不通过 2-审核通过,待用户填写物流 |
||||||
|
// 3-退货中 4-退货完成，待退款 5-已退矿 6-退款中 7-退款失败 |
||||||
|
returnGoodsStatus: [ |
||||||
|
{ |
||||||
|
label: '全部', |
||||||
|
value: '' |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '无退货', |
||||||
|
value: -1 |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '退货审核中', |
||||||
|
value: 0 |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '审核不通过', |
||||||
|
value: 1 |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '审核通过,待用户填写物流', |
||||||
|
value: 2 |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '退货中', |
||||||
|
value: 3 |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '退货完成，待退款 ', |
||||||
|
value: 4 |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '已退款', |
||||||
|
value: 5 |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '退款中', |
||||||
|
value: 6 |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '退款失败', |
||||||
|
value: 7 |
||||||
|
} |
||||||
|
], |
||||||
|
dialog: { |
||||||
|
type: 'add', |
||||||
|
isVisible: false |
||||||
|
}, |
||||||
|
tableData: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.getProductList() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
async getProductList() { |
||||||
|
const res = await Order.getPendingList(this.formParams) |
||||||
|
const resData = res.data |
||||||
|
const { code } = resData |
||||||
|
if (code === 0) { |
||||||
|
this.tableData = resData.data |
||||||
|
} |
||||||
|
}, |
||||||
|
fetch() { |
||||||
|
this.getProductList() |
||||||
|
}, |
||||||
|
addProduct() { |
||||||
|
this.dialog = { |
||||||
|
type: 'add', |
||||||
|
isVisible: true |
||||||
|
} |
||||||
|
this.$refs.edit.setParams({ params: {} }) |
||||||
|
}, |
||||||
|
editClose() { |
||||||
|
this.dialog.isVisible = false |
||||||
|
}, |
||||||
|
editProduct(row) { |
||||||
|
const { ProductImg, ProductName, id } = row |
||||||
|
this.dialog = { |
||||||
|
type: 'edit', |
||||||
|
isVisible: true |
||||||
|
} |
||||||
|
this.$refs.edit.setParams({ |
||||||
|
params: { ProductImg, ProductName, id, isDelete: 0 } |
||||||
|
}) |
||||||
|
}, |
||||||
|
async delete(params) { |
||||||
|
const res = await Order.deleteProduct(params) |
||||||
|
const resData = res.data |
||||||
|
const { code } = resData |
||||||
|
if (code === 0) { |
||||||
|
this.$message({ |
||||||
|
message: this.$t('tips.deleteSuccess'), |
||||||
|
type: 'success' |
||||||
|
}) |
||||||
|
this.getProductList() |
||||||
|
} |
||||||
|
}, |
||||||
|
deleteProduct(row) { |
||||||
|
const { id } = row |
||||||
|
this.$confirm(this.$t('tips.confirmDelete'), this.$t('common.tips'), { |
||||||
|
confirmButtonText: this.$t('common.confirm'), |
||||||
|
cancelButtonText: this.$t('common.cancel'), |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.delete({ |
||||||
|
id |
||||||
|
}) |
||||||
|
}) |
||||||
|
.catch(() => {}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="less" scoped> |
||||||
|
.product-page { |
||||||
|
padding: 15px 20px; |
||||||
|
.toolbar { |
||||||
|
margin-bottom: 25px; |
||||||
|
.product-name { |
||||||
|
width: 180px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,608 @@ |
|||||||
|
<template> |
||||||
|
<el-dialog |
||||||
|
:close-on-click-modal="false" |
||||||
|
:title="title" |
||||||
|
:type="type" |
||||||
|
:visible.sync="isVisible" |
||||||
|
:modal-append-to-body="false" |
||||||
|
:center="true" |
||||||
|
width="80%" |
||||||
|
top="50px" |
||||||
|
class="dialog-wrap" |
||||||
|
> |
||||||
|
<el-form |
||||||
|
class="dialog-from" |
||||||
|
:model="params" |
||||||
|
label-width="120px" |
||||||
|
> |
||||||
|
<el-form-item label="分组名称"> |
||||||
|
<el-input |
||||||
|
v-model="params.name" |
||||||
|
:readonly="isDisabled" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="计费方式"> |
||||||
|
<el-radio-group v-model="params.chargingWay"> |
||||||
|
<el-radio |
||||||
|
:disabled="isDisabled" |
||||||
|
:label="0" |
||||||
|
> |
||||||
|
按件数 |
||||||
|
</el-radio> |
||||||
|
<el-radio |
||||||
|
:disabled="isDisabled" |
||||||
|
:label="1" |
||||||
|
> |
||||||
|
按重量 |
||||||
|
</el-radio> |
||||||
|
<el-radio |
||||||
|
:disabled="isDisabled" |
||||||
|
:label="2" |
||||||
|
> |
||||||
|
包邮 |
||||||
|
</el-radio> |
||||||
|
</el-radio-group> |
||||||
|
</el-form-item> |
||||||
|
<div |
||||||
|
v-for="(logisticsDetail, index) in params.logisticsDetailDTOList" |
||||||
|
:key="index" |
||||||
|
class="delivery-area-item" |
||||||
|
> |
||||||
|
<i |
||||||
|
v-if="!isDisabled" |
||||||
|
class="delect-area el-icon-delete" |
||||||
|
@click="deleteLogistics(index)" |
||||||
|
/> |
||||||
|
<el-form-item |
||||||
|
class="margin-bottom-0" |
||||||
|
label="可配送区域" |
||||||
|
> |
||||||
|
<div |
||||||
|
class="add-area-btn text-overflow" |
||||||
|
:class="isDisabled?'disabled':''" |
||||||
|
:title="logisticsDetail.regionList&&logisticsDetail.regionList.toString()" |
||||||
|
@click="openAreaDialog(index)" |
||||||
|
> |
||||||
|
{{ |
||||||
|
(logisticsDetail.regionList&& |
||||||
|
logisticsDetail.regionList.length && |
||||||
|
logisticsDetail.regionList.toString()) || |
||||||
|
'请选择' |
||||||
|
}} |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="计费明细"> |
||||||
|
<div class="form-item-row"> |
||||||
|
<div class="el-row"> |
||||||
|
首重/件费用 |
||||||
|
<el-input |
||||||
|
v-model="logisticsDetail.chargeDetailDTO.firstChargeForUnit" |
||||||
|
type="text" |
||||||
|
:readonly="isDisabled" |
||||||
|
placeholder="请输入内容" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
KG/件 |
||||||
|
<el-input |
||||||
|
v-model="logisticsDetail.chargeDetailDTO.firstChargeCost" |
||||||
|
type="text" |
||||||
|
:readonly="isDisabled" |
||||||
|
placeholder="请输入内容" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
元 |
||||||
|
</div> |
||||||
|
<div class="el-row"> |
||||||
|
续重/件费用 每 |
||||||
|
<el-input |
||||||
|
v-model="logisticsDetail.chargeDetailDTO.continueChargeForUnit" |
||||||
|
type="text" |
||||||
|
:readonly="isDisabled" |
||||||
|
placeholder="请输入内容" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
KG/件 |
||||||
|
<el-input |
||||||
|
v-model="logisticsDetail.chargeDetailDTO.continueChargeCost" |
||||||
|
type="text" |
||||||
|
:readonly="isDisabled" |
||||||
|
placeholder="请输入内容" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
元 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
</el-form> |
||||||
|
<div class="delivery-area-btn"> |
||||||
|
<el-button |
||||||
|
v-if="!isDisabled" |
||||||
|
type="primary" |
||||||
|
@click="addArea" |
||||||
|
> |
||||||
|
继续添加区域 |
||||||
|
</el-button> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
slot="footer" |
||||||
|
class="btn-wrap" |
||||||
|
> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
@click="onSubmit" |
||||||
|
> |
||||||
|
确定 |
||||||
|
</el-button> |
||||||
|
<el-button @click="isVisible = false"> |
||||||
|
取消 |
||||||
|
</el-button> |
||||||
|
</div> |
||||||
|
<el-dialog |
||||||
|
width="60%" |
||||||
|
title="选择配送区域" |
||||||
|
class="address-dialog" |
||||||
|
:visible.sync="areaVisible" |
||||||
|
append-to-body |
||||||
|
> |
||||||
|
<div class="area-dialog"> |
||||||
|
<el-row> |
||||||
|
<template v-for="(province, index) in areaList"> |
||||||
|
<el-col |
||||||
|
v-if="province.list.length > 0" |
||||||
|
:key="index" |
||||||
|
class="province-wrap" |
||||||
|
:span="8" |
||||||
|
> |
||||||
|
<el-checkbox-group |
||||||
|
v-model="province.selected" |
||||||
|
@change="checkboxChange(province.keyId, province.selected)" |
||||||
|
> |
||||||
|
<el-checkbox> |
||||||
|
{{ province.provinceName }} |
||||||
|
</el-checkbox> |
||||||
|
</el-checkbox-group> |
||||||
|
<el-cascader |
||||||
|
v-model="province.selectCity" |
||||||
|
:options="province.list" |
||||||
|
:props="{ |
||||||
|
multiple: true, |
||||||
|
children: 'list', |
||||||
|
label: 'city', |
||||||
|
value: 'city', |
||||||
|
checkStrictly: true |
||||||
|
}" |
||||||
|
size="mini" |
||||||
|
collapse-tags |
||||||
|
filterable |
||||||
|
/> |
||||||
|
</el-col> |
||||||
|
</template> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
slot="footer" |
||||||
|
class="dialog-footer" |
||||||
|
> |
||||||
|
<el-button @click="areaVisible = false"> |
||||||
|
取 消 |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
@click="getSelectData" |
||||||
|
> |
||||||
|
确 定 |
||||||
|
</el-button> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import db from '@/utils/localstorage' |
||||||
|
import Setting from '@/api/Setting' |
||||||
|
import areaJSON from '@/assets/area' |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
dialogVisible: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
type: { |
||||||
|
type: String, |
||||||
|
default: 'add' |
||||||
|
} |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
sizeForm: {}, |
||||||
|
headers: { |
||||||
|
Authorization: '' |
||||||
|
}, |
||||||
|
dataObj: { |
||||||
|
folderId: 1 |
||||||
|
}, |
||||||
|
params: { |
||||||
|
logisticsDetailDTOList: [ |
||||||
|
{ |
||||||
|
chargeDetailDTO: {}, |
||||||
|
regionList: [] |
||||||
|
} |
||||||
|
], |
||||||
|
}, |
||||||
|
selectArea: [], |
||||||
|
areaVisible: false, |
||||||
|
areaList: [], |
||||||
|
areaFilter: [], |
||||||
|
currentSelectCity: [], |
||||||
|
currentAreaIndex: 0, |
||||||
|
checkId: null |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
isVisible: { |
||||||
|
get () { |
||||||
|
return this.dialogVisible |
||||||
|
}, |
||||||
|
set () { |
||||||
|
this.close() |
||||||
|
this.reset() |
||||||
|
} |
||||||
|
}, |
||||||
|
isDisabled () { |
||||||
|
return this.type === 'check' |
||||||
|
}, |
||||||
|
title () { |
||||||
|
const titleMap = { |
||||||
|
'add': '新建方案', |
||||||
|
'check': '查看方案', |
||||||
|
'edit': '修改方案' |
||||||
|
} |
||||||
|
return titleMap[this.type] |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
areaList: { |
||||||
|
handler () { |
||||||
|
// this.areaList.map(item => { |
||||||
|
// const { selected, list } = item |
||||||
|
// const allCity = list.map(cityItem => { |
||||||
|
// const { city } = cityItem |
||||||
|
// return city |
||||||
|
// }) |
||||||
|
// if (selected) { |
||||||
|
// this.selectArea = this.selectArea.concat(allCity) |
||||||
|
// } |
||||||
|
// }) |
||||||
|
}, |
||||||
|
deep: true |
||||||
|
} |
||||||
|
}, |
||||||
|
created () { |
||||||
|
this.headers.token = 'Bearer ' + db.get('TOKEN', '') |
||||||
|
this.headers.tenant = '0000' |
||||||
|
// if (this.type !== 'add') { |
||||||
|
// } |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 初始化地区 |
||||||
|
initArea () { |
||||||
|
const { province_list, city_list } = areaJSON |
||||||
|
const provinceKeys = Object.keys(province_list) |
||||||
|
const cityKeys = Object.keys(city_list) |
||||||
|
this.areaList = provinceKeys.map(provinceKey => { |
||||||
|
provinceKey += '' |
||||||
|
let provinceList = [] |
||||||
|
const provinceKeyId = provinceKey.slice(0, 2) |
||||||
|
const provinceName = province_list[provinceKey] |
||||||
|
let provinceSelected = false |
||||||
|
cityKeys.map(cityKey => { |
||||||
|
const cityKeyId = cityKey.slice(0, 2) |
||||||
|
const cityName = city_list[cityKey] |
||||||
|
if ( |
||||||
|
provinceKeyId === cityKeyId && |
||||||
|
this.areaFilter.indexOf(cityName) === -1 |
||||||
|
) { |
||||||
|
provinceList.push({ |
||||||
|
id: cityKey, |
||||||
|
selected: false, |
||||||
|
city: cityName |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
// 回显 |
||||||
|
let currentSelectCity = [] |
||||||
|
if (this.currentSelectCity.indexOf(provinceName) > -1) { |
||||||
|
currentSelectCity = provinceList.map(cityItem => { |
||||||
|
return [cityItem.city] |
||||||
|
}) |
||||||
|
provinceSelected = true |
||||||
|
} else { |
||||||
|
provinceList.map(cityItem => { |
||||||
|
if (this.currentSelectCity.indexOf(cityItem.city) > -1) { |
||||||
|
currentSelectCity.push([cityItem.city]) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
if (this.areaFilter.indexOf(provinceName) > -1) { |
||||||
|
provinceList = [] |
||||||
|
} |
||||||
|
return { |
||||||
|
selectCity: currentSelectCity, |
||||||
|
keyId: provinceKeyId, |
||||||
|
selected: provinceSelected, |
||||||
|
provinceName: provinceName, |
||||||
|
list: provinceList |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
}, |
||||||
|
// 全选省级 |
||||||
|
checkboxChange (provincekeyId, selected) { |
||||||
|
this.areaList.map(item => { |
||||||
|
const { keyId, list } = item |
||||||
|
const allCity = list.map(cityItem => { |
||||||
|
const { city } = cityItem |
||||||
|
return [city] |
||||||
|
}) |
||||||
|
if (keyId === provincekeyId && selected) { |
||||||
|
item.selectCity = allCity |
||||||
|
} |
||||||
|
if (keyId === provincekeyId && !selected) { |
||||||
|
item.selectCity = [] |
||||||
|
} |
||||||
|
return item |
||||||
|
}) |
||||||
|
}, |
||||||
|
close () { |
||||||
|
this.$emit('close') |
||||||
|
}, |
||||||
|
reset () { |
||||||
|
this.params = { |
||||||
|
chargingWay: 0, |
||||||
|
logisticsDetailDTOList: [ |
||||||
|
{ |
||||||
|
chargeDetailDTO: {}, |
||||||
|
regionList: [] |
||||||
|
} |
||||||
|
], |
||||||
|
} |
||||||
|
}, |
||||||
|
// 添加地区 |
||||||
|
addArea () { |
||||||
|
this.params.logisticsDetailDTOList.push({ |
||||||
|
chargeDetailDTO: {}, |
||||||
|
regionList: [] |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 删除地区 |
||||||
|
deleteLogistics (index) { |
||||||
|
// console.log(this.params.logisticsDetailDTOList) |
||||||
|
this.params.logisticsDetailDTOList.splice(index, 1) |
||||||
|
}, |
||||||
|
// 打开选择地区弹框 |
||||||
|
openAreaDialog (index) { |
||||||
|
if (this.type === 'check') { |
||||||
|
return false |
||||||
|
} |
||||||
|
this.areaVisible = true |
||||||
|
this.currentAreaIndex = index |
||||||
|
// 获取已选择的城市 |
||||||
|
this.areaFilter = [] |
||||||
|
this.currentSelectCity = [] |
||||||
|
this.params.logisticsDetailDTOList.map( |
||||||
|
(logisticsDetail, logisticsDetailIndex) => { |
||||||
|
// 获取其他可配送区域已选的城市 |
||||||
|
const { regionList } = logisticsDetail || '' |
||||||
|
|
||||||
|
if (index !== logisticsDetailIndex) { |
||||||
|
regionList.map(region => { |
||||||
|
if (region.indexOf(':') > -1) { |
||||||
|
const regionSplit = region.split(':') |
||||||
|
const province = regionSplit[0] |
||||||
|
const citys = regionSplit[1] && regionSplit[1].split(',') |
||||||
|
if (province) { |
||||||
|
if (citys) { |
||||||
|
this.areaFilter = this.areaFilter.concat(citys) |
||||||
|
} |
||||||
|
} |
||||||
|
} else { |
||||||
|
this.areaFilter.push(region) |
||||||
|
} |
||||||
|
}) |
||||||
|
} else { |
||||||
|
regionList.map(region => { |
||||||
|
if (region.indexOf(':') > -1) { |
||||||
|
const regionSplit = region.split(':') |
||||||
|
const province = regionSplit[0] |
||||||
|
const citys = regionSplit[1] && regionSplit[1].split(',') |
||||||
|
if (province) { |
||||||
|
if (citys) { |
||||||
|
this.currentSelectCity = this.currentSelectCity.concat(citys) |
||||||
|
} |
||||||
|
} |
||||||
|
} else { |
||||||
|
this.currentSelectCity.push(region) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
) |
||||||
|
this.initArea() |
||||||
|
}, |
||||||
|
// 获取选择的地区 |
||||||
|
getSelectedArea () { |
||||||
|
const selectAddressList = [] |
||||||
|
this.areaList.map(areaItem => { |
||||||
|
const { selectCity, provinceName, list } = areaItem |
||||||
|
const citys = selectCity.map(city => { |
||||||
|
return city[0] |
||||||
|
}) |
||||||
|
if (selectCity.length) { |
||||||
|
// 判断是否全选，全选就直接获取省级 |
||||||
|
if (selectCity.length === list.length) { |
||||||
|
selectAddressList.push(provinceName) |
||||||
|
} else { |
||||||
|
const addressStr = provinceName + ':' + citys.toString() |
||||||
|
selectAddressList.push(addressStr) |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
return selectAddressList |
||||||
|
}, |
||||||
|
getSelectData () { |
||||||
|
const selectedArea = this.getSelectedArea() |
||||||
|
this.params.logisticsDetailDTOList[ |
||||||
|
this.currentAreaIndex |
||||||
|
].regionList = selectedArea |
||||||
|
this.areaVisible = false |
||||||
|
}, |
||||||
|
// 查看详情 |
||||||
|
async getDetails () { |
||||||
|
const res = await Setting.checkLogistics(this.checkId) |
||||||
|
const resData = res.data |
||||||
|
const { code, data } = resData |
||||||
|
if (code === 0) { |
||||||
|
this.params = data |
||||||
|
// this.isVisible = false |
||||||
|
// this.$message({ |
||||||
|
// message: this.$t('tips.createSuccess'), |
||||||
|
// type: 'success' |
||||||
|
// }) |
||||||
|
// this.$emit('success') |
||||||
|
} |
||||||
|
}, |
||||||
|
async onSubmit () { |
||||||
|
if (this.type === 'add') { |
||||||
|
this.add() |
||||||
|
} else if (this.type === 'edit') { |
||||||
|
this.update() |
||||||
|
} else { |
||||||
|
this.isVisible = false |
||||||
|
} |
||||||
|
}, |
||||||
|
async add () { |
||||||
|
const res = await Setting.addLogistics(this.params) |
||||||
|
const resData = res.data |
||||||
|
const { code } = resData |
||||||
|
if (code === 0) { |
||||||
|
this.isVisible = false |
||||||
|
this.$message({ |
||||||
|
message: this.$t('tips.createSuccess'), |
||||||
|
type: 'success' |
||||||
|
}) |
||||||
|
this.$emit('success') |
||||||
|
} |
||||||
|
}, |
||||||
|
async update () { |
||||||
|
const res = await Setting.updateLogistics(this.params) |
||||||
|
const resData = res.data |
||||||
|
const { code } = resData |
||||||
|
if (code === 0) { |
||||||
|
this.isVisible = false |
||||||
|
this.$message({ |
||||||
|
message: this.$t('tips.updateSuccess'), |
||||||
|
type: 'success' |
||||||
|
}) |
||||||
|
this.$emit('success') |
||||||
|
} |
||||||
|
}, |
||||||
|
handleImageSuccess (response) { |
||||||
|
const { url } = response.data |
||||||
|
this.params.productImg = url |
||||||
|
}, |
||||||
|
delectProductImg () { |
||||||
|
this.params.productImg = '' |
||||||
|
}, |
||||||
|
setParams (val = {}) { |
||||||
|
if (val['params']) { |
||||||
|
this.params = val['params'] |
||||||
|
} |
||||||
|
if (val['checkId']) { |
||||||
|
this.checkId = val['checkId'] |
||||||
|
this.getDetails() |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="less" scoped> |
||||||
|
.dialog-wrap { |
||||||
|
::v-deep .el-dialog { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
max-height: 80vh; |
||||||
|
max-width: 900px; |
||||||
|
overflow: hidden; |
||||||
|
.el-dialog__body { |
||||||
|
flex: 1; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
.dialog-from { |
||||||
|
width: 80%; |
||||||
|
margin: auto; |
||||||
|
} |
||||||
|
.btn-wrap { |
||||||
|
margin: 45px auto 0; |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
.form-item-row { |
||||||
|
padding-top: 40px; |
||||||
|
::v-deep .el-input { |
||||||
|
width: 100px; |
||||||
|
margin: 0 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.delivery-area-item { |
||||||
|
position: relative; |
||||||
|
padding: 10px 25px 10px 0; |
||||||
|
background-color: #f7f8fa; |
||||||
|
border-bottom: 2px solid #fff; |
||||||
|
.margin-bottom-0 { |
||||||
|
margin-bottom: 0px; |
||||||
|
} |
||||||
|
.delect-area { |
||||||
|
position: absolute; |
||||||
|
top: 10px; |
||||||
|
right: 10px; |
||||||
|
font-size: 20px; |
||||||
|
z-index: 999; |
||||||
|
} |
||||||
|
.add-area-btn { |
||||||
|
overflow: hidden; |
||||||
|
color: #409eff; |
||||||
|
&.disabled { |
||||||
|
color: #c0c4cc; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.delivery-area-btn { |
||||||
|
margin: 15px auto; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.address-dialog { |
||||||
|
.province-wrap { |
||||||
|
position: relative; |
||||||
|
margin-bottom: 15px; |
||||||
|
// 重写el-cascader样式 |
||||||
|
::v-deep .el-cascader { |
||||||
|
position: absolute !important; |
||||||
|
top: 0 !important; |
||||||
|
width: 100% !important; |
||||||
|
height: 20px !important; |
||||||
|
.el-input { |
||||||
|
cursor: pointer; |
||||||
|
width: 100% !important; |
||||||
|
height: 28px !important; |
||||||
|
} |
||||||
|
input, |
||||||
|
.el-cascader__tags { |
||||||
|
display: none !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,237 @@ |
|||||||
|
<template> |
||||||
|
<div class="logistics-page"> |
||||||
|
<div class="toolbar"> |
||||||
|
<el-input |
||||||
|
v-model="formParams.model.name" |
||||||
|
class="group-name" |
||||||
|
size="mini" |
||||||
|
placeholder="方案名称" |
||||||
|
/> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
size="mini" |
||||||
|
@click="getList" |
||||||
|
> |
||||||
|
查询 |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
plain |
||||||
|
size="mini" |
||||||
|
@click="reset" |
||||||
|
> |
||||||
|
重置 |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
type="success" |
||||||
|
size="mini" |
||||||
|
@click="addClick" |
||||||
|
> |
||||||
|
新建方案 |
||||||
|
</el-button> |
||||||
|
</div> |
||||||
|
<div class="logistics-content"> |
||||||
|
<el-table |
||||||
|
:data="tableData.records" |
||||||
|
style="width: 100%" |
||||||
|
> |
||||||
|
<el-table-column |
||||||
|
prop="name" |
||||||
|
label="方案名称" |
||||||
|
align="center" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="dispatchingRegion" |
||||||
|
label="可配送范围" |
||||||
|
align="center" |
||||||
|
> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{ scope.row.regionList | regionFilter }} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
label="计费方式" |
||||||
|
|
||||||
|
align="center" |
||||||
|
> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{ scope.row.chargingWay | chargingWayFilter }} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button |
||||||
|
type="text" |
||||||
|
size="small" |
||||||
|
@click.native.prevent="checkDetails(scope.row)" |
||||||
|
> |
||||||
|
查看 |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
type="text" |
||||||
|
size="small" |
||||||
|
@click.native.prevent="editDetails(scope.row)" |
||||||
|
> |
||||||
|
编辑 |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
type="text" |
||||||
|
size="small" |
||||||
|
@click.native.prevent="deleteItem(scope.row)" |
||||||
|
> |
||||||
|
删除 |
||||||
|
</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
<pagination |
||||||
|
v-show="tableData.total > 0" |
||||||
|
:limit.sync="formParams.size" |
||||||
|
:page.sync="formParams.current" |
||||||
|
:total="Number(tableData.total)" |
||||||
|
@pagination="fetch" |
||||||
|
/> |
||||||
|
<grope-edit |
||||||
|
ref="edit" |
||||||
|
:dialog-visible="dialog.isVisible" |
||||||
|
:type="dialog.type" |
||||||
|
@close="editClose" |
||||||
|
@success="getList" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import getLogistics from '@/api/Setting' |
||||||
|
import GropeEdit from './Edit' |
||||||
|
import Pagination from '@/components/Pagination' |
||||||
|
export default { |
||||||
|
components: { |
||||||
|
GropeEdit, |
||||||
|
Pagination |
||||||
|
}, |
||||||
|
filters: { |
||||||
|
chargingWayFilter (way) { |
||||||
|
way = +'' |
||||||
|
const chargingWayMap = { |
||||||
|
'0': '按件', |
||||||
|
'1': '按重量', |
||||||
|
'2': '包邮' |
||||||
|
} |
||||||
|
return chargingWayMap[way] |
||||||
|
}, |
||||||
|
regionFilter (list) { |
||||||
|
let addressStr = '' |
||||||
|
list && list.map(address => { |
||||||
|
addressStr = addressStr + (addressStr ? ',' : '') + JSON.parse(address).toString() |
||||||
|
}) |
||||||
|
return addressStr |
||||||
|
} |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
formParams: { |
||||||
|
"current": 1, |
||||||
|
"map": {}, |
||||||
|
"model": { |
||||||
|
"isDelete": 0, |
||||||
|
"name": "" |
||||||
|
}, |
||||||
|
"order": "descending", |
||||||
|
"size": 10, |
||||||
|
"sort": "id" |
||||||
|
}, |
||||||
|
dialog: { |
||||||
|
type: 'add', |
||||||
|
isVisible: false |
||||||
|
}, |
||||||
|
tableData: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
created () { |
||||||
|
this.getList() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
async getList () { |
||||||
|
const res = await getLogistics.getLogistics(this.formParams) |
||||||
|
const resData = res.data |
||||||
|
const { code } = resData |
||||||
|
if (code === 0) { |
||||||
|
this.tableData = resData.data |
||||||
|
} |
||||||
|
}, |
||||||
|
fetch () { |
||||||
|
this.getList() |
||||||
|
}, |
||||||
|
reset() { |
||||||
|
this.formParams.model.name = '' |
||||||
|
}, |
||||||
|
addClick () { |
||||||
|
this.dialog = { |
||||||
|
type: 'add', |
||||||
|
isVisible: true |
||||||
|
} |
||||||
|
}, |
||||||
|
editClose () { |
||||||
|
this.dialog.isVisible = false |
||||||
|
}, |
||||||
|
checkDetails (row) { |
||||||
|
const { id } = row |
||||||
|
this.dialog = { |
||||||
|
type: 'check', |
||||||
|
isVisible: true |
||||||
|
} |
||||||
|
this.$refs.edit.setParams({ |
||||||
|
checkId: id |
||||||
|
}) |
||||||
|
}, |
||||||
|
editDetails (row) { |
||||||
|
const { id } = row |
||||||
|
this.dialog = { |
||||||
|
type: 'edit', |
||||||
|
isVisible: true |
||||||
|
} |
||||||
|
this.$refs.edit.setParams({ |
||||||
|
checkId: id |
||||||
|
}) |
||||||
|
}, |
||||||
|
async delete (params) { |
||||||
|
const res = await getLogistics.deleteLogistics(params) |
||||||
|
const resData = res.data |
||||||
|
const { code } = resData |
||||||
|
if (code === 0) { |
||||||
|
this.$message({ |
||||||
|
message: this.$t('tips.deleteSuccess'), |
||||||
|
type: 'success' |
||||||
|
}) |
||||||
|
this.getList() |
||||||
|
} |
||||||
|
}, |
||||||
|
deleteItem (row) { |
||||||
|
const { id } = row |
||||||
|
this.$confirm(this.$t('tips.confirmDelete'), this.$t('common.tips'), { |
||||||
|
confirmButtonText: this.$t('common.confirm'), |
||||||
|
cancelButtonText: this.$t('common.cancel'), |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.delete({ |
||||||
|
ids: [id] |
||||||
|
}) |
||||||
|
}) |
||||||
|
.catch(() => { }) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="less" scoped> |
||||||
|
.logistics-page { |
||||||
|
padding: 15px 20px; |
||||||
|
.toolbar { |
||||||
|
margin-bottom: 20px; |
||||||
|
text-align: left; |
||||||
|
.group-name { |
||||||
|
width: 180px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,545 @@ |
|||||||
|
<template> |
||||||
|
<el-dialog |
||||||
|
:close-on-click-modal="false" |
||||||
|
:title="title" |
||||||
|
:type="type" |
||||||
|
:visible.sync="isVisible" |
||||||
|
width="70%" |
||||||
|
top="50px" |
||||||
|
class="group-dialog" |
||||||
|
> |
||||||
|
<el-form ref="form" :model="form" label-width="100px"> |
||||||
|
<el-button @click="kaitongDa" style="margin-bottom:20px" type="primary" v-if="!form.dadaStatus">开通达达配送</el-button> |
||||||
|
<el-row> |
||||||
|
<el-col :span="10" style="margin-right:200px"> |
||||||
|
<div class="shop-details"> |
||||||
|
<el-form-item label="店铺logo"> |
||||||
|
<el-upload |
||||||
|
:class="[{ 'avatar-uploader': !form.logo }]" |
||||||
|
:headers="headers" |
||||||
|
:data="dataObj" |
||||||
|
:action="action" |
||||||
|
:show-file-list="false" |
||||||
|
:on-success="handleAvatarSuccess" |
||||||
|
:disabled="disabled1" |
||||||
|
> |
||||||
|
<img |
||||||
|
v-if="form.logo" |
||||||
|
:src="form.logo" |
||||||
|
class="avatar" |
||||||
|
width="80" |
||||||
|
height="80" |
||||||
|
/> |
||||||
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
||||||
|
</el-upload> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="店铺别名"> |
||||||
|
<el-input |
||||||
|
v-model="form.nickName" |
||||||
|
:disabled="disabled1" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="店铺名称"> |
||||||
|
<el-input |
||||||
|
v-model="form.storeName" |
||||||
|
:disabled="disabled1" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="发货地址"> |
||||||
|
<el-input |
||||||
|
v-model="form.shipAddress" |
||||||
|
:disabled="disabled1" |
||||||
|
:resize="`${disabled1 ? 'none' : ''}`" |
||||||
|
type="textarea" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="店铺简介"> |
||||||
|
<el-input |
||||||
|
v-model="form.remark" |
||||||
|
:disabled="disabled1" |
||||||
|
:resize="`${disabled1 ? 'none' : ''}`" |
||||||
|
type="textarea" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="收单类型"> |
||||||
|
<el-select v-model="form.posType" size="mini"> |
||||||
|
<el-option :label="item.desc" :value="item.code" v-for="item in optionList" :key="item.value"/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="营业服务"> |
||||||
|
<el-input |
||||||
|
v-model="form.businessService" |
||||||
|
:disabled="disabled1" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="业务类型"> |
||||||
|
<el-input |
||||||
|
v-model="form.businessType" |
||||||
|
:disabled="disabled1" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="注册手机号"> |
||||||
|
<el-input |
||||||
|
v-model="form.mobile" |
||||||
|
:disabled="disabled1" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="店铺营业时间"> |
||||||
|
<el-time-picker |
||||||
|
is-range |
||||||
|
v-model="openTime" |
||||||
|
range-separator="至" |
||||||
|
start-placeholder="开始时间" |
||||||
|
end-placeholder="结束时间" |
||||||
|
placeholder="选择时间范围"> |
||||||
|
</el-time-picker> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="启用仓库管理"> |
||||||
|
<el-radio-group v-model="form.useErp" :disabled="disabled1"> |
||||||
|
<el-radio :label="false">不启用</el-radio> |
||||||
|
<el-radio :label="true">启用</el-radio> |
||||||
|
</el-radio-group> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
<el-col :span="10"> |
||||||
|
<div class="h5"> |
||||||
|
<div class="title">门店地址信息</div> |
||||||
|
</div> |
||||||
|
<div class="shop-details"> |
||||||
|
<!-- province --> |
||||||
|
<el-form-item label="省份"> |
||||||
|
<el-input |
||||||
|
v-model="form.province" |
||||||
|
:disabled="disabled1" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="城市"> |
||||||
|
<el-input v-model="form.city" :disabled="disabled1" size="mini" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="地区"> |
||||||
|
<el-input |
||||||
|
v-model="form.district" |
||||||
|
:disabled="disabled1" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="详细地址"> |
||||||
|
<el-input |
||||||
|
v-model="form.address" |
||||||
|
:disabled="disabled1" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="店铺经度(lng)"> |
||||||
|
<el-input |
||||||
|
v-model="form.longitude" |
||||||
|
:disabled="disabled1" |
||||||
|
size="mini" |
||||||
|
> |
||||||
|
</el-input> |
||||||
|
<el-button type="primary" size="mini" @click="openMap" |
||||||
|
>打开地图</el-button |
||||||
|
> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="店铺纬度(lat)"> |
||||||
|
<el-input |
||||||
|
v-model="form.latitude" |
||||||
|
:disabled="disabled1" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="负责人名称"> |
||||||
|
<el-input |
||||||
|
v-model="form.headName" |
||||||
|
:disabled="disabled1" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="负责人电话"> |
||||||
|
<el-input |
||||||
|
v-model="form.headMobile" |
||||||
|
:disabled="disabled1" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
<!-- <div class="h5"> |
||||||
|
<div class="title"> |
||||||
|
店铺认证 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="shop-details" style="overflow: hidden;line-height:40px;"> |
||||||
|
微信支付-商户认证 |
||||||
|
<el-button type="primary" style="float:right" @click="approve">立即认证</el-button> |
||||||
|
</div> --> |
||||||
|
<el-col :span="16"> |
||||||
|
<div class="h5"> |
||||||
|
<div class="title">退货地址</div> |
||||||
|
</div> |
||||||
|
<div class="shop-details"> |
||||||
|
<el-form-item label="地址"> |
||||||
|
<el-input |
||||||
|
v-model="form.refundAddress" |
||||||
|
:disabled="disabled1" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="联系人"> |
||||||
|
<el-input |
||||||
|
v-model="form.refundContact" |
||||||
|
:disabled="disabled1" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="联系电话"> |
||||||
|
<el-input |
||||||
|
v-model="form.refundTel" |
||||||
|
:disabled="disabled1" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<el-form-item size="large" class="btn-wrap"> |
||||||
|
<el-button type="primary" @click="onSubmit"> 确定 </el-button> |
||||||
|
<el-button @click="isVisible = false"> 取消 </el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
|
||||||
|
<el-drawer |
||||||
|
title="" |
||||||
|
:visible.sync="drawer" |
||||||
|
:append-to-body="true" |
||||||
|
:with-header="false" |
||||||
|
size="60%" |
||||||
|
:before-close="handleClose" |
||||||
|
> |
||||||
|
<!-- <div style="width: 100%; height: 100%"> |
||||||
|
<el-row style="margin-bottom: 10px"> |
||||||
|
<el-col :span="8"> |
||||||
|
<el-input |
||||||
|
v-model="searchAddress" |
||||||
|
placeholder="请输入地址" |
||||||
|
></el-input> |
||||||
|
</el-col> |
||||||
|
<el-col :span="3"> |
||||||
|
<el-button type="primary">搜索</el-button> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<div id="map" style="width: 100%; height: calc(100% - 90px)"></div> |
||||||
|
</div> --> |
||||||
|
<search-input-amap |
||||||
|
v-if="drawer" |
||||||
|
@currentLocation="currentLocation" |
||||||
|
/> |
||||||
|
<div class="demo-drawer__footer" style="margin-top:15px"> |
||||||
|
<el-button @click="cancelForm">取 消</el-button> |
||||||
|
<el-button type="primary" @click="confirmDrawer" > 确 定</el-button> |
||||||
|
</div> |
||||||
|
</el-drawer> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import db from '@/utils/localstorage' |
||||||
|
import Setting from '@/api/Setting' |
||||||
|
import moment from 'moment' |
||||||
|
import SearchInputAmap from '@/components/Amap' |
||||||
|
export default { |
||||||
|
components: { |
||||||
|
SearchInputAmap |
||||||
|
}, |
||||||
|
props: { |
||||||
|
dialogVisible: { |
||||||
|
type: Boolean, |
||||||
|
default: false, |
||||||
|
}, |
||||||
|
type: { |
||||||
|
type: String, |
||||||
|
default: 'add', |
||||||
|
}, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
form: {}, |
||||||
|
default: { |
||||||
|
logo: '', |
||||||
|
storeName: '', |
||||||
|
shipAddress: '', |
||||||
|
remark: '', |
||||||
|
mobile: '', |
||||||
|
useErp: false, |
||||||
|
refundAddress: '', |
||||||
|
refundContact: '', |
||||||
|
refundTel: '', |
||||||
|
province: '', |
||||||
|
city: '', |
||||||
|
district: '', |
||||||
|
address: '', |
||||||
|
longitude: '', |
||||||
|
latitude: '', |
||||||
|
headName: '', |
||||||
|
headMobile: '', |
||||||
|
openStartTime: '', |
||||||
|
openEndTime: '', |
||||||
|
isAutoSendRefundAddress: 1, |
||||||
|
posType: '', |
||||||
|
businessService: '', |
||||||
|
nickName: '', |
||||||
|
businessType: '' |
||||||
|
}, |
||||||
|
openTime: [], |
||||||
|
payChannelChooses: [], |
||||||
|
headers: { |
||||||
|
Authorization: '', |
||||||
|
}, |
||||||
|
action: `${process.env.VUE_APP_DEV_REQUEST_DOMAIN_PREFIX}/file/upload`, |
||||||
|
dataObj: { |
||||||
|
folderId: 1, |
||||||
|
}, |
||||||
|
disabled1: false, |
||||||
|
storeDetails: { longitude: '', latitude: '' }, |
||||||
|
drawer: false, |
||||||
|
searchAddress: '', |
||||||
|
optionList: [ |
||||||
|
{ |
||||||
|
desc: '普通餐饮', |
||||||
|
code: 'NORMALSTORE' |
||||||
|
}, |
||||||
|
{ |
||||||
|
desc: '快消餐饮', |
||||||
|
code: 'FASTSTORE' |
||||||
|
}, |
||||||
|
{ |
||||||
|
desc: '零售店', |
||||||
|
code: 'RETAILSTORE' |
||||||
|
} |
||||||
|
], |
||||||
|
currentSide: {longitude: '', latitude: '',address: ''} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
isVisible: { |
||||||
|
get() { |
||||||
|
return this.dialogVisible |
||||||
|
}, |
||||||
|
set() { |
||||||
|
this.close() |
||||||
|
this.reset() |
||||||
|
}, |
||||||
|
}, |
||||||
|
title() { |
||||||
|
return this.type === 'add' ? '新增店铺信息' : '编辑店铺信息' |
||||||
|
}, |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.headers.token = 'Bearer ' + db.get('TOKEN', '') |
||||||
|
this.headers.tenant = '0000' |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
kaitongDa() { |
||||||
|
let data = { |
||||||
|
deliveryName : 'DADA', |
||||||
|
storeId: this.form.id |
||||||
|
} |
||||||
|
Setting.openDadaDelivery(data).then(res => { |
||||||
|
console.log(res.data) |
||||||
|
}) |
||||||
|
}, |
||||||
|
setParams(data) { |
||||||
|
console.log(data,'data') |
||||||
|
this.openTime = [] |
||||||
|
if(data) { |
||||||
|
this.form = JSON.parse(JSON.stringify(data)) |
||||||
|
this.form.posType = this.form.posType.code |
||||||
|
if(!this.form.openStartTime || !this.form.openEndTime) { |
||||||
|
this.openTime = [new Date(2021, 6, 28, 0, 0), new Date(2021, 6, 28, 23, 59)] |
||||||
|
}else{ |
||||||
|
this.openTime.push(new Date(2021,6,10,this.form.openStartTime.split(':')[0],this.form.openStartTime.split(':')[1],this.form.openStartTime.split(':')[2]), new Date(2021,6,10,this.form.openEndTime.split(':')[0],this.form.openEndTime.split(':')[1])) |
||||||
|
} |
||||||
|
}else{ |
||||||
|
this.form = JSON.parse(JSON.stringify(this.default)) |
||||||
|
this.openTime = [new Date(2016, 9, 10, 8, 0), new Date(2016, 9, 10, 23, 40)] |
||||||
|
} |
||||||
|
}, |
||||||
|
close() { |
||||||
|
this.$emit('close') |
||||||
|
}, |
||||||
|
reset() { |
||||||
|
this.form = {} |
||||||
|
}, |
||||||
|
getMap() { |
||||||
|
let _this = this |
||||||
|
//创建地图 |
||||||
|
let map = new AMap.Map('map', { |
||||||
|
//mapStyle: 'amap://styles/grey', |
||||||
|
zoom: 13, |
||||||
|
center: [114.31667, 30.51667], |
||||||
|
}) |
||||||
|
//地图点击事件 |
||||||
|
map.on('click', showInfoClick) |
||||||
|
function showInfoClick(e) { |
||||||
|
console.log(e) |
||||||
|
map.clearMap() //清理地图 |
||||||
|
let lng = e.lnglat.getLng() //获取经度 |
||||||
|
let lat = e.lnglat.getLat() //获取纬度 |
||||||
|
//marker点 |
||||||
|
let marker = new AMap.Marker({ |
||||||
|
position: [lng, lat], |
||||||
|
offset: new AMap.Pixel(-13, -30), |
||||||
|
}) |
||||||
|
_this.lnglat = lng + ',' + lat //将经纬度绑定至input输入框 |
||||||
|
map.add(marker) //加载点 |
||||||
|
map.setFitView() //缩放至地图 |
||||||
|
console.log(_this.lnglat.split(','), '经纬度') |
||||||
|
_this.form.longitude = lng |
||||||
|
_this.form.latitude = lat |
||||||
|
} |
||||||
|
}, |
||||||
|
openMap() { |
||||||
|
if (this.disabled1) { |
||||||
|
this.$message({ |
||||||
|
message: '请先点击编辑按钮', |
||||||
|
type: 'error', |
||||||
|
}) |
||||||
|
return |
||||||
|
} |
||||||
|
this.drawer = true |
||||||
|
setTimeout(() => { |
||||||
|
//调用方法创建地图 |
||||||
|
this.getMap() |
||||||
|
}, 0) |
||||||
|
}, |
||||||
|
// 获取经纬度 |
||||||
|
currentLocation(data) { |
||||||
|
this.currentSide = {} |
||||||
|
this.currentSide.address = data.address |
||||||
|
this.currentSide.longitude = data.location.lng |
||||||
|
this.currentSide.latitude = data.location.lat |
||||||
|
}, |
||||||
|
cancelForm() { |
||||||
|
this.drawer = false |
||||||
|
}, |
||||||
|
confirmDrawer() { |
||||||
|
this.drawer = false |
||||||
|
this.form.address = this.currentSide.address |
||||||
|
this.form.longitude = this.currentSide.longitude |
||||||
|
this.form.latitude = this.currentSide.latitude |
||||||
|
}, |
||||||
|
handleClose(done) { |
||||||
|
done() |
||||||
|
}, |
||||||
|
handleCheckedCitiesChange(value) { |
||||||
|
let checkedCount = value.length |
||||||
|
// this.checkAll = checkedCount === this.cities.length; |
||||||
|
// this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length; |
||||||
|
}, |
||||||
|
|
||||||
|
async getStoreDetails() { |
||||||
|
const res = await Setting.findDefaultStore() |
||||||
|
const resData = res.data.data |
||||||
|
this.form = resData |
||||||
|
// this.storeDetails.payChannelChooses = [] |
||||||
|
this.$set(this.form, 'openTime', [ |
||||||
|
this.storeDetails.openStartTime, |
||||||
|
this.storeDetails.openEndTime, |
||||||
|
]) |
||||||
|
}, |
||||||
|
async onSubmit() { |
||||||
|
if (this.type === 'add') { |
||||||
|
this.addStore() |
||||||
|
} else { |
||||||
|
this.updateStore() |
||||||
|
} |
||||||
|
}, |
||||||
|
async addStore() { |
||||||
|
console.log(this.form,"this.form") |
||||||
|
this.optionList.forEach(element => { |
||||||
|
if(this.form.posType == element.code){ |
||||||
|
this.form.posType = element |
||||||
|
} |
||||||
|
}); |
||||||
|
const res = await Setting.addStoreList(this.form) |
||||||
|
const resData = res.data |
||||||
|
const { code } = resData |
||||||
|
if (code === 0) { |
||||||
|
this.isVisible = false |
||||||
|
this.$message({ |
||||||
|
message: this.$t('tips.createSuccess'), |
||||||
|
type: 'success', |
||||||
|
}) |
||||||
|
this.$emit('success') |
||||||
|
} |
||||||
|
}, |
||||||
|
editDisabled1() { |
||||||
|
this.disabled1 = !this.disabled1 |
||||||
|
}, |
||||||
|
async updateStore() { |
||||||
|
if(this.openTime) { |
||||||
|
this.form.openStartTime = moment(this.openTime[0]).format('HH:mm:ss') |
||||||
|
this.form.openEndTime = moment(this.openTime[1]).format('HH:mm:ss') |
||||||
|
}else{ |
||||||
|
this.form.openStartTime = '' |
||||||
|
this.form.openEndTime = '' |
||||||
|
} |
||||||
|
this.optionList.forEach(element => { |
||||||
|
if(this.form.posType == element.code){ |
||||||
|
this.form.posType = element |
||||||
|
} |
||||||
|
}); |
||||||
|
this.form.payChannelChooses = this.payChannelChooses |
||||||
|
// console.log(this.storeDetails) |
||||||
|
const res = await Setting.updateStore(this.form) |
||||||
|
const resData = res.data |
||||||
|
const { code } = resData |
||||||
|
if (code === 0) { |
||||||
|
this.isVisible = false |
||||||
|
this.$message({ |
||||||
|
message: this.$t('tips.updateSuccess'), |
||||||
|
type: 'success', |
||||||
|
}) |
||||||
|
this.$emit('success') |
||||||
|
} |
||||||
|
}, |
||||||
|
handleAvatarSuccess(response) { |
||||||
|
const { url } = response.data |
||||||
|
this.form.logo = url |
||||||
|
|
||||||
|
}, |
||||||
|
approve() { |
||||||
|
this.$router.push({ path: '/setting/shop/wechat-approve' }) |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="less" scoped> |
||||||
|
.group-dialog { |
||||||
|
.upload-wrap { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: flex-end; |
||||||
|
.image-wrap { |
||||||
|
width: 120px; |
||||||
|
height: 120px; |
||||||
|
line-height: 120px; |
||||||
|
margin-right: 15px; |
||||||
|
margin-bottom: 15px; |
||||||
|
text-align: center; |
||||||
|
border: 1px dashed #d9d9d9; |
||||||
|
img { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,370 @@ |
|||||||
|
<template> |
||||||
|
<div class="group-page"> |
||||||
|
<div class="toolbar"> |
||||||
|
<!-- <el-input |
||||||
|
v-model="formParams.model.groupName" |
||||||
|
class="group-name" |
||||||
|
size="mini" |
||||||
|
placeholder="分组名称" |
||||||
|
/> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
size="mini" |
||||||
|
|
||||||
|
@click="getGroupList" |
||||||
|
icon="el-icon-zoom-in" |
||||||
|
> |
||||||
|
查询 |
||||||
|
</el-button> |
||||||
|
<el-button type="warning" size="mini" @click="reset" icon="el-icon-refresh-right"> |
||||||
|
重置 |
||||||
|
</el-button> --> |
||||||
|
<el-button |
||||||
|
type="goon" |
||||||
|
size="mini" |
||||||
|
@click="addGroup" |
||||||
|
icon="el-icon-circle-plus-outline" |
||||||
|
> |
||||||
|
新增 |
||||||
|
</el-button> |
||||||
|
</div> |
||||||
|
<div class="group-content"> |
||||||
|
<el-table |
||||||
|
id="tables" |
||||||
|
:data="storeDetails" |
||||||
|
style="width: 100%" |
||||||
|
v-loading="loading" |
||||||
|
row-key="id" |
||||||
|
> |
||||||
|
<!-- <el-table-column |
||||||
|
prop="sort" |
||||||
|
label="排序" |
||||||
|
align="center" |
||||||
|
width="200" |
||||||
|
></el-table-column> --> |
||||||
|
<el-table-column label="店铺信息"> |
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
prop="logo" |
||||||
|
label="店铺logo" |
||||||
|
> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<img :src="scope.row.logo" style="width:100%;height:100px"> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
prop="storeName" |
||||||
|
label="店铺名称" |
||||||
|
> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
prop="nickName" |
||||||
|
label="店铺别名" |
||||||
|
> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
prop="shipAddress" |
||||||
|
label="发货地址" |
||||||
|
> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
prop="remark" |
||||||
|
label="店铺简介" |
||||||
|
> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
prop="mobile" |
||||||
|
label="注册手机号" |
||||||
|
> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
prop="openStartTime" |
||||||
|
label="店铺营业时间开始" |
||||||
|
> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
prop="openEndTime" |
||||||
|
label="店铺营业时间结束" |
||||||
|
> |
||||||
|
</el-table-column> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="退货地址"> |
||||||
|
<el-table-column |
||||||
|
v-for="(item, index) in returnAddress" |
||||||
|
align="center" |
||||||
|
:key="index" |
||||||
|
:prop="returnAddress[index].prop" |
||||||
|
:label="item.label" |
||||||
|
> |
||||||
|
</el-table-column> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="门店地址信息"> |
||||||
|
<el-table-column |
||||||
|
v-for="(item, index) in storeAddress" |
||||||
|
align="center" |
||||||
|
:key="index" |
||||||
|
:prop="storeAddress[index].prop" |
||||||
|
:label="item.label" |
||||||
|
> |
||||||
|
</el-table-column> |
||||||
|
</el-table-column> |
||||||
|
<!-- <el-table-column |
||||||
|
prop="createTime" |
||||||
|
label="创建时间" |
||||||
|
align="center" |
||||||
|
width="100" |
||||||
|
/> --> |
||||||
|
<el-table-column label="操作" > |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button |
||||||
|
type="text" |
||||||
|
size="small" |
||||||
|
@click.native.prevent="editGroup(scope.row)" |
||||||
|
> |
||||||
|
编辑 |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
type="text" |
||||||
|
size="small" |
||||||
|
@click.native.prevent="editWX(scope.row)" |
||||||
|
> |
||||||
|
微信配置 |
||||||
|
</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
<!-- <pagination |
||||||
|
v-show="tableData.total > 0" |
||||||
|
:limit.sync="formParams.size" |
||||||
|
:page.sync="formParams.current" |
||||||
|
:total="Number(tableData.total)" |
||||||
|
@pagination="fetch" |
||||||
|
/> --> |
||||||
|
<grope-edit |
||||||
|
ref="edit" |
||||||
|
:dialog-visible="dialog.isVisible" |
||||||
|
:type="dialog.type" |
||||||
|
@close="editClose" |
||||||
|
@success="getStoreDetails" |
||||||
|
/> |
||||||
|
<wx-edit |
||||||
|
ref="wxEdit" |
||||||
|
:dialog-visible="dialogWx.isVisible" |
||||||
|
:type="dialogWx.type" |
||||||
|
@close="editWxClose" |
||||||
|
@success="getStoreDetails" |
||||||
|
></wx-edit> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import GropeEdit from './Edit' |
||||||
|
import wxEdit from './wxEdit' |
||||||
|
import Setting from '@/api/Setting' |
||||||
|
export default { |
||||||
|
components: { |
||||||
|
GropeEdit, |
||||||
|
wxEdit |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
loading: true, |
||||||
|
formParams: { |
||||||
|
current: 1, |
||||||
|
map: {}, |
||||||
|
model: { |
||||||
|
groupImg: '', |
||||||
|
groupName: '', |
||||||
|
isDelete: 0, |
||||||
|
}, |
||||||
|
order: 'ascending', |
||||||
|
size: 10, |
||||||
|
sort: 'sort', |
||||||
|
}, |
||||||
|
dialog: { |
||||||
|
type: 'add', |
||||||
|
isVisible: false, |
||||||
|
}, |
||||||
|
dialogWx: { |
||||||
|
type: 'edit', |
||||||
|
isVisible: false, |
||||||
|
}, |
||||||
|
shopInformation: [ |
||||||
|
{ |
||||||
|
label: '店铺logo', |
||||||
|
prop: 'logo', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '店铺名称', |
||||||
|
prop: 'storeName', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '发货地址', |
||||||
|
prop: 'shipAddress', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '店铺简介', |
||||||
|
prop: 'remark', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '注册手机号', |
||||||
|
prop: 'mobile', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '店铺营业时间开始', |
||||||
|
prop: 'openStartTime', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '店铺营业时间结束', |
||||||
|
prop: 'openEndTime', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '启用仓库管理', |
||||||
|
prop: 'useErp', |
||||||
|
}, |
||||||
|
], |
||||||
|
returnAddress: [ |
||||||
|
{ |
||||||
|
label: '地址', |
||||||
|
prop: 'refundAddress', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '联系人', |
||||||
|
prop: 'refundContact', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '联系电话', |
||||||
|
prop: 'refundTel', |
||||||
|
}, |
||||||
|
], |
||||||
|
storeAddress: [ |
||||||
|
{ |
||||||
|
label: '省份', |
||||||
|
prop: 'province', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '城市', |
||||||
|
prop: 'city', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '地区', |
||||||
|
prop: 'district', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '详细地址', |
||||||
|
prop: 'address', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '店铺经度', |
||||||
|
prop: 'longitude', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '店铺纬度', |
||||||
|
prop: 'latitude', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '负责人名称', |
||||||
|
prop: 'headName', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '负责人电话', |
||||||
|
prop: 'headMobile', |
||||||
|
}, |
||||||
|
], |
||||||
|
storeDetails: [], |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.getStoreDetails() |
||||||
|
}, |
||||||
|
|
||||||
|
methods: { |
||||||
|
async getStoreDetails() { |
||||||
|
this.loading = true |
||||||
|
const res = await Setting.searchStoreList() |
||||||
|
const resData = res.data |
||||||
|
const { code } = resData |
||||||
|
if (code === 0) { |
||||||
|
this.storeDetails = resData.data |
||||||
|
this.loading = false |
||||||
|
} |
||||||
|
}, |
||||||
|
editClose() { |
||||||
|
this.dialog.isVisible = false |
||||||
|
}, |
||||||
|
editGroup(row) { |
||||||
|
const { groupImg, groupName, id, printerId, sort, kitchenGroup } = row |
||||||
|
this.dialog = { |
||||||
|
type: 'edit', |
||||||
|
isVisible: true, |
||||||
|
} |
||||||
|
this.$refs.edit.setParams(row) |
||||||
|
}, |
||||||
|
addGroup() { |
||||||
|
this.dialog = { |
||||||
|
type: 'add', |
||||||
|
isVisible: true, |
||||||
|
} |
||||||
|
this.$refs.edit.setParams() |
||||||
|
}, |
||||||
|
editWX(row) { |
||||||
|
this.dialogWx = { |
||||||
|
type: 'edit', |
||||||
|
isVisible: true, |
||||||
|
} |
||||||
|
this.$refs.wxEdit.setParams(row) |
||||||
|
}, |
||||||
|
editWxClose() { |
||||||
|
this.dialogWx.isVisible = false |
||||||
|
}, |
||||||
|
async delete(params) { |
||||||
|
const res = await Goods.deleteGroup(params) |
||||||
|
const resData = res.data |
||||||
|
const { code } = resData |
||||||
|
if (code === 0) { |
||||||
|
this.$message({ |
||||||
|
message: this.$t('tips.deleteSuccess'), |
||||||
|
type: 'success', |
||||||
|
}) |
||||||
|
this.getGroupList() |
||||||
|
} |
||||||
|
}, |
||||||
|
deleteGroup(row) { |
||||||
|
const { id } = row |
||||||
|
this.$confirm(this.$t('tips.confirmDelete'), this.$t('common.tips'), { |
||||||
|
confirmButtonText: this.$t('common.confirm'), |
||||||
|
cancelButtonText: this.$t('common.cancel'), |
||||||
|
type: 'warning', |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.delete({ |
||||||
|
id, |
||||||
|
}) |
||||||
|
}) |
||||||
|
.catch(() => {}) |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="less" scoped> |
||||||
|
.group-page { |
||||||
|
padding: 15px 20px; |
||||||
|
.toolbar { |
||||||
|
margin-bottom: 20px; |
||||||
|
text-align: left; |
||||||
|
.el-input { |
||||||
|
margin-right: 10px !important; |
||||||
|
} |
||||||
|
.group-name { |
||||||
|
width: 180px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,405 @@ |
|||||||
|
<template> |
||||||
|
<div class="setting-shop-page"> |
||||||
|
|
||||||
|
<el-form ref="form" :model="form" label-width="100px"> |
||||||
|
<el-row> |
||||||
|
<el-col :span="24"> |
||||||
|
<div class="h5"> |
||||||
|
<div class="title">店铺信息</div> |
||||||
|
<el-button @click="editDisabled1" type="primary"> 编辑 </el-button> |
||||||
|
<el-button v-if="!disabled1" type="info" @click="editDisabled1"> |
||||||
|
取消 |
||||||
|
</el-button> |
||||||
|
<el-button v-if="!disabled1" type="warning" @click="updateStore"> |
||||||
|
保存 |
||||||
|
</el-button> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
<el-col :span="12"> |
||||||
|
<div class="shop-details"> |
||||||
|
<el-form-item label="店铺logo"> |
||||||
|
<el-upload |
||||||
|
:class="[{ 'avatar-uploader': !storeDetails.logo }]" |
||||||
|
:headers="headers" |
||||||
|
:data="dataObj" |
||||||
|
:action="action" |
||||||
|
:show-file-list="false" |
||||||
|
:on-success="handleAvatarSuccess" |
||||||
|
:disabled="disabled1" |
||||||
|
> |
||||||
|
<img |
||||||
|
v-if="storeDetails.logo" |
||||||
|
:src="storeDetails.logo" |
||||||
|
class="avatar" |
||||||
|
width="80" |
||||||
|
height="80" |
||||||
|
/> |
||||||
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
||||||
|
</el-upload> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="店铺名称"> |
||||||
|
<el-input |
||||||
|
v-model="storeDetails.storeName" |
||||||
|
:disabled="disabled1" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="发货地址"> |
||||||
|
<el-input |
||||||
|
v-model="storeDetails.shipAddress" |
||||||
|
:disabled="disabled1" |
||||||
|
:resize="`${disabled1 ? 'none' : ''}`" |
||||||
|
type="textarea" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="店铺简介"> |
||||||
|
<el-input |
||||||
|
v-model="storeDetails.remark" |
||||||
|
:disabled="disabled1" |
||||||
|
:resize="`${disabled1 ? 'none' : ''}`" |
||||||
|
type="textarea" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="注册手机号"> |
||||||
|
<el-input |
||||||
|
v-model="storeDetails.mobile" |
||||||
|
:disabled="disabled1" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="店铺营业时间"> |
||||||
|
<!-- <el-time-picker |
||||||
|
:disabled="disabled1" |
||||||
|
is-range |
||||||
|
value-format="HH:mm:ss" |
||||||
|
v-model="storeDetails.openTime" |
||||||
|
range-separator="至" |
||||||
|
start-placeholder="开始时间" |
||||||
|
end-placeholder="结束时间" |
||||||
|
placeholder="选择时间范围"> |
||||||
|
</el-time-picker> --> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="启用仓库管理"> |
||||||
|
<el-radio-group v-model="storeDetails.useErp" :disabled="disabled1"> |
||||||
|
<el-radio :label="0">不启用</el-radio> |
||||||
|
<el-radio :label="1">启用</el-radio> |
||||||
|
</el-radio-group> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
<el-col :span="12"> |
||||||
|
<div class="h5"> |
||||||
|
<div class="title">门店地址信息</div> |
||||||
|
</div> |
||||||
|
<div class="shop-details"> |
||||||
|
<!-- province --> |
||||||
|
<el-form-item label="省份"> |
||||||
|
<el-input |
||||||
|
v-model="storeDetails.province" |
||||||
|
:disabled="disabled1" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="城市"> |
||||||
|
<el-input |
||||||
|
v-model="storeDetails.city" |
||||||
|
:disabled="disabled1" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="地区"> |
||||||
|
<el-input |
||||||
|
v-model="storeDetails.district" |
||||||
|
:disabled="disabled1" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="详细地址"> |
||||||
|
<el-input |
||||||
|
v-model="storeDetails.address" |
||||||
|
:disabled="disabled1" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="店铺经度(lng)"> |
||||||
|
<el-input |
||||||
|
v-model="storeDetails.longitude" |
||||||
|
:disabled="disabled1" |
||||||
|
size="mini"> |
||||||
|
</el-input> |
||||||
|
<el-button type="primary" size="mini" @click="openMap">打开地图</el-button> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="店铺纬度(lat)"> |
||||||
|
<el-input |
||||||
|
v-model="storeDetails.latitude" |
||||||
|
:disabled="disabled1" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="负责人名称"> |
||||||
|
<el-input |
||||||
|
v-model="storeDetails.headName" |
||||||
|
:disabled="disabled1" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="负责人电话"> |
||||||
|
<el-input |
||||||
|
v-model="storeDetails.headMobile" |
||||||
|
:disabled="disabled1" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
<!-- <div class="h5"> |
||||||
|
<div class="title"> |
||||||
|
店铺认证 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="shop-details" style="overflow: hidden;line-height:40px;"> |
||||||
|
微信支付-商户认证 |
||||||
|
<el-button type="primary" style="float:right" @click="approve">立即认证</el-button> |
||||||
|
</div> --> |
||||||
|
<el-col :span="24"> |
||||||
|
<div class="h5"> |
||||||
|
<div class="title">退货地址</div> |
||||||
|
</div> |
||||||
|
<div class="shop-details"> |
||||||
|
<el-form-item label="地址"> |
||||||
|
<el-input |
||||||
|
v-model="storeDetails.refundAddress" |
||||||
|
:disabled="disabled1" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="联系人"> |
||||||
|
<el-input |
||||||
|
v-model="storeDetails.refundContact" |
||||||
|
:disabled="disabled1" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="联系电话"> |
||||||
|
<el-input |
||||||
|
v-model="storeDetails.refundTel" |
||||||
|
:disabled="disabled1" |
||||||
|
size="mini" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</el-form> |
||||||
|
<el-drawer |
||||||
|
title="" |
||||||
|
:visible.sync="drawer" |
||||||
|
:append-to-body="true" |
||||||
|
:with-header="false" |
||||||
|
size="60%" |
||||||
|
:before-close="handleClose"> |
||||||
|
<div style="width:100%;height:100%"> |
||||||
|
<el-row gutter="20" style="margin-bottom:10px;"> |
||||||
|
<el-col :span="8"> |
||||||
|
<el-input v-model="searchAddress" placeholder="请输入地址"></el-input> |
||||||
|
</el-col> |
||||||
|
<el-col :span="3"> |
||||||
|
<el-button type="primary">搜索</el-button> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<div id="map" style="width: 100%; height: calc(100% - 90px);"></div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</el-drawer> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
/* eslint-disable */ |
||||||
|
import Setting from '@/api/Setting' |
||||||
|
import db from '@/utils/localstorage' |
||||||
|
let map = null; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
form: { |
||||||
|
name: '', |
||||||
|
region: '', |
||||||
|
date1: '', |
||||||
|
date2: '', |
||||||
|
delivery: false, |
||||||
|
type: [], |
||||||
|
resource: '', |
||||||
|
desc: '', |
||||||
|
logo: '', |
||||||
|
}, |
||||||
|
payChannelChooses:[], |
||||||
|
headers: { |
||||||
|
Authorization: '', |
||||||
|
}, |
||||||
|
action: `${process.env.VUE_APP_DEV_REQUEST_DOMAIN_PREFIX}/file/upload`, |
||||||
|
dataObj: { |
||||||
|
folderId: 1, |
||||||
|
}, |
||||||
|
disabled1: true, |
||||||
|
storeDetails: {longitude:'',latitude:'',}, |
||||||
|
drawer:false, |
||||||
|
searchAddress:'' |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.getStoreDetails() |
||||||
|
this.headers.token = 'Bearer ' + db.get('TOKEN', '') |
||||||
|
this.headers.tenant = '0000' |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
// this.initMap(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getMap() { |
||||||
|
let _this = this; |
||||||
|
//创建地图 |
||||||
|
map = new AMap.Map("map", { |
||||||
|
//mapStyle: 'amap://styles/grey', |
||||||
|
zoom: 13, |
||||||
|
center: [114.31667, 30.51667], |
||||||
|
}); |
||||||
|
//地图点击事件 |
||||||
|
map.on("click", showInfoClick); |
||||||
|
function showInfoClick(e) { |
||||||
|
console.log(e) |
||||||
|
map.clearMap(); //清理地图 |
||||||
|
let lng = e.lnglat.getLng(); //获取经度 |
||||||
|
let lat = e.lnglat.getLat(); //获取纬度 |
||||||
|
//marker点 |
||||||
|
let marker = new AMap.Marker({ |
||||||
|
position: [lng, lat], |
||||||
|
offset: new AMap.Pixel(-13, -30), |
||||||
|
}); |
||||||
|
_this.lnglat = lng + "," + lat; //将经纬度绑定至input输入框 |
||||||
|
map.add(marker); //加载点 |
||||||
|
map.setFitView(); //缩放至地图 |
||||||
|
console.log(_this.lnglat.split(","), "经纬度"); |
||||||
|
_this.storeDetails.longitude = lng; |
||||||
|
_this.storeDetails.latitude = lat; |
||||||
|
} |
||||||
|
}, |
||||||
|
openMap(){ |
||||||
|
if(this.disabled1){ |
||||||
|
this.$message({ |
||||||
|
message:'请先点击编辑按钮', |
||||||
|
type:'error' |
||||||
|
}) |
||||||
|
return |
||||||
|
} |
||||||
|
this.drawer = true |
||||||
|
setTimeout(() => { |
||||||
|
//调用方法创建地图 |
||||||
|
this.getMap(); |
||||||
|
}, 0); |
||||||
|
}, |
||||||
|
handleClose(done) { |
||||||
|
done(); |
||||||
|
}, |
||||||
|
handleCheckedCitiesChange(value) { |
||||||
|
let checkedCount = value.length; |
||||||
|
// this.checkAll = checkedCount === this.cities.length; |
||||||
|
// this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length; |
||||||
|
}, |
||||||
|
|
||||||
|
async getStoreDetails() { |
||||||
|
const res = await Setting.findDefaultStore() |
||||||
|
const resData = res.data.data |
||||||
|
this.storeDetails = resData |
||||||
|
// this.storeDetails.payChannelChooses = [] |
||||||
|
this.$set(this.storeDetails,'openTime',[this.storeDetails.openStartTime,this.storeDetails.openEndTime]); |
||||||
|
}, |
||||||
|
onSubmit() { |
||||||
|
// console.log('submit!') |
||||||
|
}, |
||||||
|
editDisabled1() { |
||||||
|
this.disabled1 = !this.disabled1 |
||||||
|
}, |
||||||
|
async updateStore() { |
||||||
|
this.storeDetails.openStartTime = this.storeDetails.openTime[0] |
||||||
|
this.storeDetails.openEndTime = this.storeDetails.openTime[1] |
||||||
|
this.storeDetails.payChannelChooses = this.payChannelChooses |
||||||
|
// console.log(this.storeDetails) |
||||||
|
const res = await Setting.updateStore(this.storeDetails) |
||||||
|
const resData = res.data |
||||||
|
const { code } = resData |
||||||
|
if (code === 0) { |
||||||
|
this.disabled1 = true |
||||||
|
this.$message({ |
||||||
|
message: this.$t('tips.updateSuccess'), |
||||||
|
type: 'success', |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
handleAvatarSuccess(response) { |
||||||
|
const { url } = response.data |
||||||
|
this.storeDetails.logo = url |
||||||
|
}, |
||||||
|
approve() { |
||||||
|
this.$router.push({ path: '/setting/shop/wechat-approve' }) |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="less" scoped> |
||||||
|
.setting-shop-page { |
||||||
|
margin-top: 20px; |
||||||
|
min-height: calc(100% - 20px); |
||||||
|
background-color: #ffffff; |
||||||
|
padding: 15px 20px; |
||||||
|
.h5 { |
||||||
|
max-width: 1000px; |
||||||
|
display: flex; |
||||||
|
font-size: 20px; |
||||||
|
margin: 20px; |
||||||
|
padding-left: 10px; |
||||||
|
padding-right: 300px; |
||||||
|
flex-wrap: 800; |
||||||
|
.title { |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
.shop-details { |
||||||
|
max-width: 800px; |
||||||
|
margin: 20px; |
||||||
|
::v-deep .el-input, |
||||||
|
::v-deep .el-textarea { |
||||||
|
width: 380px; |
||||||
|
} |
||||||
|
// 不能编辑样式 |
||||||
|
::v-deep .el-input.is-disabled .el-input__inner, |
||||||
|
::v-deep .el-textarea.is-disabled .el-textarea__inner { |
||||||
|
cursor: inherit; |
||||||
|
background-color: #f8f8f8; |
||||||
|
border: 1px solid #f8f8f8; |
||||||
|
color: #606266; |
||||||
|
} |
||||||
|
} |
||||||
|
::v-deep.avatar-uploader { |
||||||
|
width: 80px; |
||||||
|
height: 80px; |
||||||
|
border-radius: 6px; |
||||||
|
line-height: 80px; |
||||||
|
text-align: center; |
||||||
|
.el-upload { |
||||||
|
border: 1px dashed #d9d9d9; |
||||||
|
border-radius: 6px; |
||||||
|
cursor: pointer; |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
.avatar-uploader-icon { |
||||||
|
font-size: 28px; |
||||||
|
color: #8c939d; |
||||||
|
width: 80px; |
||||||
|
height: 80px; |
||||||
|
line-height: 80px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<h1>账户认证</h1> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
|
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang='less' scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,250 @@ |
|||||||
|
<template> |
||||||
|
<div class="approve_content"> |
||||||
|
<div class="main_type"> |
||||||
|
<h2>主体类型</h2> |
||||||
|
个人 |
||||||
|
</div> |
||||||
|
<div v-if="type===1" class="person_main_info"> |
||||||
|
<h2>主体信息</h2> |
||||||
|
<p> |
||||||
|
<span><i>*</i>姓名</span> |
||||||
|
test |
||||||
|
</p> |
||||||
|
<p> |
||||||
|
<span><i>*</i>证件类型</span>test |
||||||
|
</p> |
||||||
|
<p> |
||||||
|
<span><i>*</i>证件号码</span>test |
||||||
|
</p> |
||||||
|
<p class="detail_img"> |
||||||
|
<span><i>*</i>证件图片</span> |
||||||
|
<img |
||||||
|
v-for="(src,index) in imgSrc" :key="index" :src="src" |
||||||
|
:preview="1" |
||||||
|
/> |
||||||
|
<img |
||||||
|
v-for="(src,index) in imgSrc" :key="index" :src="src" |
||||||
|
:preview="1" |
||||||
|
/> |
||||||
|
</p> |
||||||
|
<p class="detail_img"> |
||||||
|
<span><i>*</i>手持证件图</span> |
||||||
|
<img |
||||||
|
v-for="(src,index) in imgSrc" :key="index" :src="src" |
||||||
|
:preview="1" |
||||||
|
/> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
<div v-else class="main_info"> |
||||||
|
<h2>主体信息</h2> |
||||||
|
<p> |
||||||
|
<span><i>*</i>{{ getName(type) }}</span>test |
||||||
|
</p> |
||||||
|
<p> |
||||||
|
<span><i>*</i>{{ type === 4 ? '组织结构代码' : '统一社会信用代码' }}</span>test |
||||||
|
</p> |
||||||
|
<p> |
||||||
|
<span><i>*</i>注册地址</span>test |
||||||
|
</p> |
||||||
|
<p> |
||||||
|
<span><i>*</i>营业期限</span>test |
||||||
|
</p> |
||||||
|
<p class="detail_img"> |
||||||
|
<span><i>*</i>{{ type === 4 ? '机构证明或其他证明材料' : '营业执照' }}</span> |
||||||
|
<img |
||||||
|
v-for="(src,index) in imgSrc" :key="index" :src="src" |
||||||
|
:preview="1" |
||||||
|
/> |
||||||
|
</p> |
||||||
|
<p> |
||||||
|
<span><i>*</i>{{ getType(type) }}姓名</span>test |
||||||
|
</p> |
||||||
|
<p> |
||||||
|
<span><i>*</i>证件类型</span>test |
||||||
|
</p> |
||||||
|
<p> |
||||||
|
<span><i>*</i>{{ getType(type) }}身份证号码</span>test |
||||||
|
</p> |
||||||
|
<p> |
||||||
|
<span><i>*</i>{{ getType(type) }}身份证有效期</span>test |
||||||
|
</p> |
||||||
|
<p class="detail_img"> |
||||||
|
<span><i>*</i>{{ getType(type) }}身份证照片</span> |
||||||
|
<img |
||||||
|
v-for="(src,index) in imgSrc" :key="index" :src="src" |
||||||
|
:preview="1" |
||||||
|
/> |
||||||
|
<img |
||||||
|
v-for="(src,index) in imgSrc" :key="index" :src="src" |
||||||
|
:preview="1" |
||||||
|
/> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
<el-form label-width="120px"> |
||||||
|
<div class="manager_approve"> |
||||||
|
<h2>管理员身份验证</h2> |
||||||
|
<el-form-item label="管理员手机号码"> |
||||||
|
<el-input placeholder="请输入管理员手机号码" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="手机验证码"> |
||||||
|
<el-col :span="18"> |
||||||
|
<el-input placeholder="请输入手机验证码" /> |
||||||
|
</el-col> |
||||||
|
<el-col :span="4"> |
||||||
|
<el-button class="code_btn">获取验证码</el-button> |
||||||
|
</el-col> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="管理员邮箱"> |
||||||
|
<el-input placeholder="请输入管理员邮箱" /> |
||||||
|
<p class="tips">用于接收微信支付的开户邮件及日常业务通知</p> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
<div class="account_info"> |
||||||
|
<h2>账户信息</h2> |
||||||
|
<el-form-item label="账户类型"> |
||||||
|
<el-radio-group v-model="formParams.account"> |
||||||
|
<el-radio :label="1">对公账户</el-radio> |
||||||
|
<el-radio :label="2">对私账户</el-radio> |
||||||
|
</el-radio-group> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="开户银行"> |
||||||
|
<el-input placeholder="请输入开户银行" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="开户银行地区"> |
||||||
|
<el-input placeholder="请输入开户银行地区" /> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
<div class="shop_info"> |
||||||
|
<h2>店铺信息</h2> |
||||||
|
<p> |
||||||
|
<span><i>*</i>店铺简称</span> |
||||||
|
</p> |
||||||
|
<p> |
||||||
|
<span><i>*</i>客服电话</span> |
||||||
|
</p> |
||||||
|
<el-form-item label="提供服务"> |
||||||
|
<el-input placeholder="请选择服务" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="店铺图片"> |
||||||
|
<el-input placeholder="请上传店铺图片" /> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
<div v-if="type===1" class="shop_approve"> |
||||||
|
<h2>店铺认证</h2> |
||||||
|
<el-form-item> |
||||||
|
<el-checkbox label="将以上主体信息用于小额通店铺认证" name="type" /> |
||||||
|
<p class="tips">微信二级商户认证信息与小额通店铺认证信息一致，勾选后默认将以上作为店铺认证信息</p> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
<el-button type="primary" class="submit_btn">提交</el-button> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
type: 2, |
||||||
|
imgSrc: ['http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/06/3844f86d-8dfe-4917-9bb7-07f5641f36a6.jpg'], |
||||||
|
mainType: [ |
||||||
|
{ name: '个人', type: 1 }, |
||||||
|
{ name: '个体工商户', type: 2 }, |
||||||
|
{ name: '企业', type: 3 }, |
||||||
|
{ name: '其他组织', type: 4 } |
||||||
|
], |
||||||
|
formParams: { |
||||||
|
account: 2 |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getName (index) { |
||||||
|
const ob = { |
||||||
|
2: '商户名称', |
||||||
|
3: '企业名称', |
||||||
|
4: '组织名称' |
||||||
|
} |
||||||
|
return ob[index] |
||||||
|
}, |
||||||
|
getType (index) { |
||||||
|
const ob = { |
||||||
|
2: '经营者', |
||||||
|
3: '法人', |
||||||
|
4: '负责人' |
||||||
|
} |
||||||
|
return ob[index] |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang='less' scoped> |
||||||
|
h2 { |
||||||
|
font-size: 20px; |
||||||
|
font-weight: 500; |
||||||
|
position: relative; |
||||||
|
&::before { |
||||||
|
content: ''; |
||||||
|
height: 24px; |
||||||
|
width: 4px; |
||||||
|
background-color: #3A68F2; |
||||||
|
position: absolute; |
||||||
|
left: -10px; |
||||||
|
top: 2px; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.approve_content { |
||||||
|
padding: 20px 100px; |
||||||
|
font-size: 16px; |
||||||
|
.main_type, .person_main_info, .main_info,.manager_approve,.account_info,.shop_info,.shop_approve { |
||||||
|
margin-bottom: 45px; |
||||||
|
p { |
||||||
|
font-size: 16px; |
||||||
|
margin: 20px 0; |
||||||
|
color: #666666; |
||||||
|
span { |
||||||
|
color:#333333; |
||||||
|
display: inline-block; |
||||||
|
margin-right: 10px; |
||||||
|
width: 120px; |
||||||
|
// text-align: right; |
||||||
|
i { |
||||||
|
color:red; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.detail_img { |
||||||
|
position: relative; |
||||||
|
span { |
||||||
|
position: absolute; |
||||||
|
top:0; |
||||||
|
} |
||||||
|
img { |
||||||
|
display: inline-block; |
||||||
|
width: calc((100% - 150px) / 2); |
||||||
|
height: 180px; |
||||||
|
border-radius:4px; |
||||||
|
&:nth-of-type(1) { |
||||||
|
margin: 0 10px 0 130px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.tips { |
||||||
|
font-size: 12px; |
||||||
|
color: #666666; |
||||||
|
} |
||||||
|
} |
||||||
|
.code_btn { |
||||||
|
margin-left: 10px !important; |
||||||
|
} |
||||||
|
.submit_btn { |
||||||
|
width: 250px; |
||||||
|
margin: 0 auto !important; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<h1>签约</h1> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
|
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang='less' scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<h1>开通成功</h1> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
|
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang='less' scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,65 @@ |
|||||||
|
<template> |
||||||
|
<div class="wechat_approve_page"> |
||||||
|
<div class="title">支付认证</div> |
||||||
|
<div class="process"> |
||||||
|
<el-steps :active="active" align-center> |
||||||
|
<el-step title="填写申请信息" /> |
||||||
|
<el-step title="账户认证" /> |
||||||
|
<el-step title="签约" /> |
||||||
|
<el-step title="开通成功" /> |
||||||
|
</el-steps> |
||||||
|
</div> |
||||||
|
<component |
||||||
|
:is="components[active]" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import info from './component/info' |
||||||
|
import approve from './component/approve' |
||||||
|
import sign from './component/sign' |
||||||
|
import success from './component/success' |
||||||
|
export default { |
||||||
|
components: { |
||||||
|
info, |
||||||
|
approve, |
||||||
|
sign, |
||||||
|
success |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
active: 0 |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
components() { |
||||||
|
return ['info', 'approve', 'sign', 'success'] |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang='less' scoped> |
||||||
|
.wechat_approve_page { |
||||||
|
width: 60%; |
||||||
|
margin: 20px auto; |
||||||
|
border-radius:10px; |
||||||
|
min-height: calc(100% - 20px); |
||||||
|
background-color: #ffffff; |
||||||
|
.title { |
||||||
|
height:70px; |
||||||
|
line-height: 70px; |
||||||
|
text-align: center; |
||||||
|
background:rgba(58,104,242,1); |
||||||
|
border-radius:4px 4px 0px 0px; |
||||||
|
font-size:24px; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
.process { |
||||||
|
height: 160px; |
||||||
|
background:rgba(238,243,255,.3); |
||||||
|
padding-top: 50px; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,414 @@ |
|||||||
|
<template> |
||||||
|
<el-dialog |
||||||
|
:close-on-click-modal="false" |
||||||
|
:title="title" |
||||||
|
:type="type" |
||||||
|
:visible.sync="isVisible" |
||||||
|
width="800px" |
||||||
|
class="dialog-wrap" |
||||||
|
> |
||||||
|
<el-form |
||||||
|
ref="form" |
||||||
|
:model="sizeForm" |
||||||
|
:rules="rules" |
||||||
|
label-width="100px" |
||||||
|
size="mini" |
||||||
|
> |
||||||
|
<el-button type="primary" style="margin:0 0 10px 50px" @click="clickMoren">使用默认微信配置</el-button> |
||||||
|
<el-form-item label="小程序appid:"> |
||||||
|
<el-input v-model="params.mini_program_app_id"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="小程序secret:"> |
||||||
|
<el-input v-model="params.mini_program_secret"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="商户id:"> |
||||||
|
<el-input v-model="params.mini_mch_id"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="商户密钥:"> |
||||||
|
<el-input v-model="params.mini_mch_key"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="p12证书文件:"> |
||||||
|
<el-input v-model="params.mini_key_path" style="margin-bottom:5px"></el-input> |
||||||
|
<el-upload |
||||||
|
class="upload-demo" |
||||||
|
:action="actions" |
||||||
|
:before-remove="beforeRemovezs" |
||||||
|
:on-success="handleImageSuccesszs" |
||||||
|
:on-change="handleChangezs" |
||||||
|
:clearFiles="clearFileszs" |
||||||
|
:on-remove="onRemovezs" |
||||||
|
multiple |
||||||
|
:headers="headers" |
||||||
|
:data="dataObj" |
||||||
|
:file-list="fileListzs" |
||||||
|
style="width: 130%" |
||||||
|
> |
||||||
|
<el-button size="small" type="primary" icon="el-icon-upload" |
||||||
|
>点击上传</el-button |
||||||
|
> |
||||||
|
<span>请上传正确的p12证书文件</span> |
||||||
|
</el-upload> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="p12文件编码:"> |
||||||
|
<el-input |
||||||
|
type="password" |
||||||
|
v-model="params.mini_key_sn_no" |
||||||
|
></el-input> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="cert证书文件:"> |
||||||
|
<el-input v-model="params.mini_key_cert_path" style="margin-bottom:5px"></el-input> |
||||||
|
<el-upload |
||||||
|
class="upload-demo" |
||||||
|
:action="actions" |
||||||
|
:before-remove="beforeCertificate" |
||||||
|
:on-success="handleImageCertificate" |
||||||
|
:on-change="handleChangeCertificate" |
||||||
|
:on-remove="onRemoveCertificate" |
||||||
|
multiple |
||||||
|
:headers="headers" |
||||||
|
:data="dataObj" |
||||||
|
:file-list="fileListdz" |
||||||
|
style="width: 130%" |
||||||
|
> |
||||||
|
<el-button size="small" type="primary" icon="el-icon-upload" |
||||||
|
>点击上传</el-button |
||||||
|
> |
||||||
|
<span style="font-size: 12px; color: " |
||||||
|
>请上传cert证书文件地址(p12导出,v3接口使用)</span |
||||||
|
> |
||||||
|
</el-upload> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="key文件:"> |
||||||
|
<el-input v-model="params.mini_key_key_path" style="margin-bottom:5px"></el-input> |
||||||
|
<el-upload |
||||||
|
class="upload-demo" |
||||||
|
:action="actions" |
||||||
|
:before-remove="beforeCerSecretkey" |
||||||
|
:on-success="handleImageSecretkey" |
||||||
|
:on-change="handleChangeSecretkey" |
||||||
|
:on-remove="onRemoveSecretkey" |
||||||
|
multiple |
||||||
|
:headers="headers" |
||||||
|
:data="dataObj" |
||||||
|
:file-list="fileListmy" |
||||||
|
style="width: 130%" |
||||||
|
> |
||||||
|
<el-button size="small" type="primary" icon="el-icon-upload" |
||||||
|
>点击上传</el-button |
||||||
|
> |
||||||
|
<span style="font-size: 12px; color: " |
||||||
|
>请上传key文件(p12导出,v3接口使用)</span |
||||||
|
> |
||||||
|
</el-upload> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<div slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="close"> 取 消 </el-button> |
||||||
|
<el-button type="primary" @click="onSubmit">确定</el-button> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import db from '@/utils/localstorage' |
||||||
|
import Setting from '@/api/Setting' |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
list: { |
||||||
|
type: Array, |
||||||
|
default() { |
||||||
|
return [] |
||||||
|
}, |
||||||
|
}, |
||||||
|
dialogVisible: { |
||||||
|
type: Boolean, |
||||||
|
default: false, |
||||||
|
}, |
||||||
|
type: { |
||||||
|
type: String, |
||||||
|
default: 'add', |
||||||
|
}, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
attachment: this.initAttachment(), |
||||||
|
currentIndex: '', |
||||||
|
sizeForm: {}, |
||||||
|
headers: { |
||||||
|
Authorization: '', |
||||||
|
}, |
||||||
|
actions: `${process.env.VUE_APP_DEV_REQUEST_DOMAIN_PREFIX}/file/upload`, |
||||||
|
dataObj: { |
||||||
|
folderId: 1, |
||||||
|
}, |
||||||
|
id: '', |
||||||
|
params: { |
||||||
|
mini_key_cert_path: "", |
||||||
|
mini_key_key_path: "", |
||||||
|
mini_key_path: "", |
||||||
|
mini_key_sn_no: "", |
||||||
|
mini_mch_id: "", |
||||||
|
mini_mch_key: "", |
||||||
|
mini_program_app_id: "", |
||||||
|
mini_program_secret: "" |
||||||
|
}, |
||||||
|
disabled: false, |
||||||
|
rules: { |
||||||
|
|
||||||
|
}, |
||||||
|
fileListzs: [{ name: '' }], |
||||||
|
fileListdz: [{ name: '' }], |
||||||
|
fileListmy: [{ name: '' }], |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
isVisible: { |
||||||
|
get() { |
||||||
|
return this.dialogVisible |
||||||
|
}, |
||||||
|
set() { |
||||||
|
this.close() |
||||||
|
this.reset() |
||||||
|
}, |
||||||
|
}, |
||||||
|
title() { |
||||||
|
const stateMap = { |
||||||
|
edit: '微信配置', |
||||||
|
} |
||||||
|
return stateMap[this.type] |
||||||
|
}, |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.headers.token = 'Bearer ' + db.get('TOKEN', '') |
||||||
|
this.headers.tenant = '0000' |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
clickMoren() { |
||||||
|
for(let key in this.params){ |
||||||
|
this.params[key] = 'null' |
||||||
|
} |
||||||
|
this.fileListzs[0].name = '' |
||||||
|
this.fileListdz[0].name = '' |
||||||
|
this.fileListmy[0].name = '' |
||||||
|
}, |
||||||
|
// 小程序证书地址 |
||||||
|
handleImageSuccesszs(file) { |
||||||
|
// console.log(file, '就是这个') |
||||||
|
this.params.mini_key_path = file.data.url |
||||||
|
}, |
||||||
|
beforeRemovezs(file, fileList) { |
||||||
|
return this.$confirm(`确定移除 ${file.name}？`) |
||||||
|
}, |
||||||
|
handleChangezs(file,fileList){ |
||||||
|
if (fileList.length>0) { |
||||||
|
this.fileListzs=[fileList[fileList.length-1]] |
||||||
|
} |
||||||
|
}, |
||||||
|
clearFileszs() { |
||||||
|
console.log('clearFileszs') |
||||||
|
}, |
||||||
|
onRemovezs() { |
||||||
|
this.params.mini_key_path = '' |
||||||
|
}, |
||||||
|
// 证书地址 |
||||||
|
handleImageCertificate(file) { |
||||||
|
// console.log(file, '就是这个证书地址的') |
||||||
|
this.params.mini_key_cert_path = file.data.url |
||||||
|
}, |
||||||
|
handleChangeCertificate(file,fileList){ |
||||||
|
if (fileList.length>0) { |
||||||
|
this.fileListdz=[fileList[fileList.length-1]] |
||||||
|
} |
||||||
|
}, |
||||||
|
onRemoveCertificate() { |
||||||
|
this.params.mini_key_cert_path = '' |
||||||
|
}, |
||||||
|
beforeCertificate(file, fileList) { |
||||||
|
return this.$confirm(`确定移除 ${file.name}？`) |
||||||
|
}, |
||||||
|
// 秘钥地址 |
||||||
|
handleImageSecretkey(file) { |
||||||
|
// console.log(file, '就是这个证书地址的') |
||||||
|
this.params.mini_key_key_path = file.data.url |
||||||
|
}, |
||||||
|
handleChangeSecretkey(file,fileList){ |
||||||
|
if (fileList.length>0) { |
||||||
|
this.fileListmy=[fileList[fileList.length-1]] |
||||||
|
} |
||||||
|
}, |
||||||
|
onRemoveSecretkey() { |
||||||
|
this.params.mini_key_key_path = '' |
||||||
|
}, |
||||||
|
beforeCerSecretkey(file, fileList) { |
||||||
|
return this.$confirm(`确定移除 ${file.name}？`) |
||||||
|
}, |
||||||
|
initAttachment() { |
||||||
|
return { |
||||||
|
id: '', |
||||||
|
mini_key_cert_path: "", |
||||||
|
mini_key_key_path: "", |
||||||
|
mini_key_path: "", |
||||||
|
mini_key_sn_no: "", |
||||||
|
mini_mch_id: "", |
||||||
|
mini_mch_key: "", |
||||||
|
mini_program_app_id: "", |
||||||
|
mini_program_secret: "" |
||||||
|
} |
||||||
|
}, |
||||||
|
clickIndex(index, id) { |
||||||
|
this.currentIndex = index |
||||||
|
this.params.tagId = id |
||||||
|
}, |
||||||
|
close() { |
||||||
|
this.$emit('close') |
||||||
|
}, |
||||||
|
extractUrl() {}, |
||||||
|
handleRemove(file, fileList) { |
||||||
|
// console.log(file, fileList) |
||||||
|
}, |
||||||
|
reset() { |
||||||
|
this.params = {} |
||||||
|
this.$refs.form.clearValidate() |
||||||
|
this.$refs.form.resetFields() |
||||||
|
this.attachment = this.initAttachment() |
||||||
|
}, |
||||||
|
async onSubmit() { |
||||||
|
if (this.type === 'add') { |
||||||
|
this.addGroup() |
||||||
|
} else { |
||||||
|
this.updateGroup() |
||||||
|
} |
||||||
|
}, |
||||||
|
async addGroup() { |
||||||
|
// const res = await Material.attachmentTagUpload(this.params) |
||||||
|
// const resData = res.data |
||||||
|
// const { code } = resData |
||||||
|
// if (code === 0) { |
||||||
|
// this.isVisible = false |
||||||
|
// this.$message({ |
||||||
|
// message: this.$t('tips.createSuccess'), |
||||||
|
// type: 'success' |
||||||
|
// }) |
||||||
|
// this.$emit('success') |
||||||
|
// } |
||||||
|
const vm = this |
||||||
|
vm.disabled = true |
||||||
|
}, |
||||||
|
async updateGroup() { |
||||||
|
// const res = await Material.eidtGroup(this.params) |
||||||
|
// const resData = res.data |
||||||
|
// const { code } = resData |
||||||
|
// if (code === 0) { |
||||||
|
// this.isVisible = false |
||||||
|
// this.$message({ |
||||||
|
// message: this.$t('tips.updateSuccess'), |
||||||
|
// type: 'success' |
||||||
|
// }) |
||||||
|
// this.$emit('success') |
||||||
|
// } |
||||||
|
|
||||||
|
const vm = this |
||||||
|
|
||||||
|
const res = await Setting.updateWxStore(this.params, this.id) |
||||||
|
const resData = res.data |
||||||
|
const { code } = resData |
||||||
|
if (code === 0) { |
||||||
|
this.isVisible = false |
||||||
|
this.$message({ |
||||||
|
message: this.$t('tips.updateSuccess'), |
||||||
|
type: 'success', |
||||||
|
}) |
||||||
|
this.$emit('success') |
||||||
|
} |
||||||
|
}, |
||||||
|
delectGroupImg() { |
||||||
|
this.params.groupImg = '' |
||||||
|
}, |
||||||
|
setParams(val = {}) { |
||||||
|
if(val.miniParam) { |
||||||
|
this.params = val.miniParam |
||||||
|
} |
||||||
|
this.id = val.id |
||||||
|
this.fileListzs[0].name = this.params.mini_key_path |
||||||
|
this.fileListdz[0].name = this.params.mini_key_cert_path |
||||||
|
this.fileListmy[0].name = this.params.mini_key_key_path |
||||||
|
}, |
||||||
|
setIdAndSubmit(isUploadCompleted) { |
||||||
|
const vm = this |
||||||
|
if (isUploadCompleted) { |
||||||
|
vm.disabled = false |
||||||
|
vm.isVisible = false |
||||||
|
vm.$message({ |
||||||
|
message: vm.$t('tips.createSuccess'), |
||||||
|
type: 'success', |
||||||
|
}) |
||||||
|
vm.$emit('success') |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="less" scoped> |
||||||
|
.dialog-wrap { |
||||||
|
.margin-5 { |
||||||
|
margin-right: 5px; |
||||||
|
cursor: pointer; |
||||||
|
&.active { |
||||||
|
background-color: #4d96d8; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
.btn-wrap { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
::v-deep .el-input { |
||||||
|
margin-right: 10px; |
||||||
|
width: 400px; |
||||||
|
vertical-align: top; |
||||||
|
} |
||||||
|
.upload-wrap { |
||||||
|
margin-bottom: 25px; |
||||||
|
::v-deep .el-upload, |
||||||
|
::v-deep .el-upload-list__item { |
||||||
|
width: 80px; |
||||||
|
height: 80px; |
||||||
|
line-height: 80px; |
||||||
|
} |
||||||
|
::v-deep .el-progress, |
||||||
|
::v-deep .el-progress-circle { |
||||||
|
width: 60px !important; |
||||||
|
height: 60px !important; |
||||||
|
} |
||||||
|
} |
||||||
|
.upload-wrap { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: flex-end; |
||||||
|
::v-deep .el-upload { |
||||||
|
border: 1px dashed #d9d9d9; |
||||||
|
border-radius: 6px; |
||||||
|
cursor: pointer; |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
img { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
.image-wrap { |
||||||
|
width: 120px; |
||||||
|
height: 120px; |
||||||
|
line-height: 120px; |
||||||
|
margin-right: 15px; |
||||||
|
margin-bottom: 15px; |
||||||
|
text-align: center; |
||||||
|
border: 1px dashed #d9d9d9; |
||||||
|
img { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue