上传修改
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user