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