544 行
25 KiB
HTML
可执行文件
544 行
25 KiB
HTML
可执行文件
<!DOCTYPE html>
|
|
<html>
|
|
<!--[1.9.20]-->
|
|
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<title></title>
|
|
<link rel="stylesheet" type="text/css" href="/Public/layui/css/layui.css"/>
|
|
<link rel="stylesheet" type="text/css" href="/Public/Retail/css/myscroll.css"/>
|
|
<link rel="stylesheet" type="text/css" href="/Public/vue/element-ui.css">
|
|
<link rel="stylesheet" type="text/css" href="/Public/css/system-gallery.css">
|
|
<script charset="utf-8" type="text/javascript" src="/Public/vue/js/vue2.5.16.js"></script>
|
|
<script charset="utf-8" type="text/javascript" src="/Public/vue/element-ui.js"></script>
|
|
<script charset="utf-8" type="text/javascript" src="/Public/jquery/js/jquery-3.2.1.min.js"></script>
|
|
<script charset="utf-8" type="text/javascript" src="/Public/js/system-gallery.js?v=1.0.2"></script>
|
|
<script charset="utf-8" type="text/javascript" src="/Public/js/select-pro-and-city.js"></script>
|
|
<script charset="utf-8" type="text/javascript" src="/Public/js/load-more-directive.js"></script>
|
|
<script charset="utf-8" type="text/javascript" src="/Public/Retail/common/js/select-industry.js"></script>
|
|
<script charset="utf-8" type="text/javascript" src="/Public/js/get-position-map-tencent.js?v=1.0.2"></script>
|
|
<script charset="utf-8" type="text/javascript" src="/Public/js/select-bank.js"></script>
|
|
<script charset="utf-8" type="text/javascript" src="/Public/js/common.js"></script>
|
|
<style>
|
|
#editStoreApp {
|
|
padding: 15px 30px 100px;
|
|
width: 748px;
|
|
}
|
|
|
|
.center-btn {
|
|
position: fixed;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: #f8f8f8;
|
|
z-index: 1000;
|
|
width: 100%;
|
|
height: 60px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 10px 0 10px #ddd;
|
|
}
|
|
|
|
.title {
|
|
font-size: 14px;
|
|
color: #333;
|
|
padding-bottom: 20px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.small-input {
|
|
width: 200px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="editStoreApp" v-cloak>
|
|
<div class="title" v-if="!ruleForm.id&&pageLoading">可创建门店数量：{{canAddNum}} 剩余数量：{{canUseNum}}</div>
|
|
<el-form label-width="136px" ref="ruleForm" :rules="rules" :model="ruleForm" size="small">
|
|
<el-form-item label="门店行业" prop="industry_id">
|
|
<select-industry :industry-id.sync="ruleForm.industry_id"></select-industry>
|
|
</el-form-item>
|
|
<el-form-item label="经营类型" prop="store_class">
|
|
<el-radio-group v-model="ruleForm.store_class" :disabled="ruleForm.id>0?true:false" border>
|
|
<el-radio-button label="1">直营店</el-radio-button>
|
|
<el-radio-button label="2">加盟店</el-radio-button>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item v-if="platform_type == 1" label="供货商类型" prop="supplier_type">
|
|
<el-radio-group v-model="ruleForm.supplier_type" :disabled="ruleForm.id>0?true:false">
|
|
<el-radio-button label="1">常规供货商</el-radio-button>
|
|
<el-radio-button label="2">寄售供货商</el-radio-button>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-divider content-position="left">门店详细信息</el-divider>
|
|
<el-form-item label="门店名称" prop="storetag" v-if="!moral_education_coin">
|
|
<el-input class="small-input" v-model="ruleForm.storetag" placeholder="请输入门店名称"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="门店名称" prop="storetag" v-else>
|
|
<el-select :value="moral_education.title" placeholder="请选择门店"
|
|
style="width: 360px"
|
|
value-key="title"
|
|
:disabled="ruleForm.id?true:false"
|
|
clearable filterable
|
|
@change="changeMECStore"
|
|
v-load-more="getMECStoreList"
|
|
remote reserve-keyword
|
|
:remote-method="searchStore">
|
|
<el-option v-for="item in moralEducationStoreList"
|
|
:value-key="item.id"
|
|
:key="item.id"
|
|
:label="item.title"
|
|
:value="item">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="门头照片" prop="shopimg_id">
|
|
<choose-image :image-url="ruleForm.shopimg_url" :image-id="ruleForm.shopimg_id" @choose="selectImage">
|
|
</choose-image>
|
|
</el-form-item>
|
|
<el-form-item label="省市区" prop="province_id">
|
|
<select-pro-and-city :province-id.sync="ruleForm.province_id" :city-id.sync="ruleForm.city_id"
|
|
:area-id.sync="ruleForm.area_id"></select-pro-and-city>
|
|
</el-form-item>
|
|
<el-form-item label="经纬度">
|
|
<div class="flex">
|
|
<el-form-item label="经度" prop="longitude" label-width="50px" style="margin-bottom: 0">
|
|
<el-input class="small-input" readonly v-model="ruleForm.longitude" placeholder="经度"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="纬度" prop="longitude" label-width="50px" style="margin-bottom: 0">
|
|
<el-input class="small-input" readonly v-model="ruleForm.latitude" placeholder="经度"></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="门店地址" prop="address">
|
|
<get-position-map-tencent v-if="pageLoading" :longitude.sync="ruleForm.longitude"
|
|
:latitude.sync="ruleForm.latitude" :address.sync="ruleForm.address">
|
|
</get-position-map-tencent>
|
|
</el-form-item>
|
|
<el-form-item label="详细地址" prop="detail_address">
|
|
<el-input v-model="ruleForm.detail_address" placeholder="请输入详细地址"></el-input>
|
|
</el-form-item>
|
|
<el-form-item v-if="platform_type == 2" label="门店编码" prop="third_code">
|
|
<el-input v-model="ruleForm.third_code" placeholder="请输入第三方门店编码"
|
|
:disabled="ruleForm.id?true:false"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-divider content-position="left">达达设置</el-divider>
|
|
<el-form-item label="达达配送" prop="dadastatus">
|
|
<el-switch v-model="ruleForm.dadastatus" active-text="开启" inactive-text="关闭" active-value="2"
|
|
inactive-value="1">
|
|
</el-switch>
|
|
</el-form-item>
|
|
|
|
<template v-if="ruleForm.dadastatus==2">
|
|
<el-form-item label="门店类型" prop="attribute">
|
|
<el-select v-model="ruleForm.attribute" placeholder="请选择门店类型" clearable filterable>
|
|
<el-option v-for="item in storeTypeList" :value-key="item.id" :key="item.id" :label="item.name"
|
|
:value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="门店编码" prop="origin_shop_id">
|
|
<el-input class="small-input" v-model="ruleForm.origin_shop_id" placeholder="门店编码必须唯一"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="达达商家app账号" prop="username">
|
|
<el-input class="small-input" v-model="ruleForm.username" placeholder="请输入达达商家app账号"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="达达商家app密码" prop="password">
|
|
<el-input class="small-input" type="password" show-password v-model="ruleForm.password"
|
|
placeholder="请输入达达商家app密码"></el-input>
|
|
</el-form-item>
|
|
</template>
|
|
|
|
<template v-if="ruleForm.store_class==2">
|
|
<el-divider content-position="left">加盟信息设置</el-divider>
|
|
<el-form-item label="结算账户:" prop="clearing_form">
|
|
<el-radio v-model="ruleForm.clearing_form" label="1">银行卡</el-radio>
|
|
<el-radio v-model="ruleForm.clearing_form" label="2">支付宝</el-radio>
|
|
<el-radio v-model="ruleForm.clearing_form" label="3">微信</el-radio>
|
|
</el-form-item>
|
|
<!-- 选择银行卡-->
|
|
<div v-if="ruleForm.clearing_form==1">
|
|
<el-form-item label="开户行信息:" prop="opening_bank">
|
|
<select-bank-xdl :bank-name.sync="ruleForm.opening_bank"></select-bank-xdl>
|
|
</el-form-item>
|
|
</div>
|
|
|
|
<el-form-item :label="clearingAccountNumberLabel" prop="account_number" v-if="ruleForm.clearing_form">
|
|
<el-input class="small-input" v-model="ruleForm.account_number"
|
|
:placeholder="'请输入'+clearingAccountNumberLabel"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="结算人姓名" prop="name">
|
|
<el-input class="small-input" v-model="ruleForm.name" placeholder="请输入结算人姓名" maxlength="8">
|
|
</el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="结算周期" prop="period_radio">
|
|
<el-radio v-model="ruleForm.period_radio" label="1">日结</el-radio>
|
|
<el-radio v-model="ruleForm.period_radio" label="2">周结</el-radio>
|
|
<el-radio v-model="ruleForm.period_radio" label="3">月结</el-radio>
|
|
</el-form-item>
|
|
<el-form-item label="结算服务费率" prop="rate">
|
|
<el-input class="small-input" v-model="ruleForm.rate" placeholder="0.00 ~ 99.99">
|
|
<template slot="append">%</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</template>
|
|
|
|
</el-form>
|
|
<div class="center-btn">
|
|
<el-button type="primary" size="medium" @click="save">保存</el-button>
|
|
</div>
|
|
<el-dialog title="选择图片" :modal-append-to-body="false" :visible.sync="showSelectImage"
|
|
custom-class="select-image-el-dialog" :top="'10px'">
|
|
<template-select-image :can-select-num="1" @selectfile="selectFile"></template-select-image>
|
|
</el-dialog>
|
|
</div>
|
|
<script type="text/javascript">
|
|
var editStoreApp = new Vue({
|
|
el: '#editStoreApp',
|
|
data() {
|
|
let _t = this;
|
|
return {
|
|
platform_type: 1,
|
|
moral_education_coin: false,
|
|
moral_education: {},
|
|
moralEducationStoreList: [],
|
|
canAddNum: '',
|
|
canUseNum: '',
|
|
pageLoading: false,
|
|
ruleForm: {
|
|
id: '',
|
|
industry_id: '',//门店行业ID
|
|
store_class: '1', //默认单选为直营店
|
|
supplier_type: '1', //供货商类型
|
|
storetag: '',//门店名称
|
|
shopimg_id: '',//门头照ID
|
|
shopimg_url: '',//门头照地址
|
|
province_id: '',//省
|
|
city_id: '',//市
|
|
area_id: '',//区
|
|
address: '',//地址
|
|
longitude: null,//经度
|
|
latitude: null,//纬度
|
|
detail_address: '',//详细地址
|
|
third_code: '',//第三方门店编码
|
|
|
|
dadastatus: '1',//是否开启达达
|
|
attribute: '',//达达门店行业
|
|
origin_shop_id: '',//达达门店编码
|
|
username: '',//达达账号
|
|
password: '',//达达密码
|
|
|
|
clearing_form: '1', //加盟店结算类型 默认为银行卡
|
|
account_number: '',//加盟店结算人支付宝账号
|
|
name: '',//加盟店结算人姓名
|
|
period_radio: '1', //加盟店结算周期
|
|
opening_bank: '',//加盟店结算开户行
|
|
rate: '',//加盟店结算抽取佣金比
|
|
},
|
|
rules: {
|
|
industry_id: [{message: '请选择所属行业', required: false, trigger: 'change'}],
|
|
store_class: [{message: '请选择经营类型', required: true, trigger: 'change'}],
|
|
supplier_type: [{message: '请选择供货商类型', required: true, trigger: 'change'}],
|
|
storetag: [{message: '请输入门店名称', required: true, trigger: 'change'}, {
|
|
min: 1,
|
|
max: 50,
|
|
message: '限制长度 1 到 50',
|
|
}],
|
|
shopimg_id: [{message: '请设置门头照片', required: true, trigger: 'change'}],
|
|
province_id: [{message: '请选择省', required: true, trigger: 'change'}, {
|
|
validator: function (rule, value, callback) {
|
|
if (!value || value == '') {
|
|
callback(new Error("请选择省"));
|
|
} else if (!_t.ruleForm.city_id) {
|
|
callback(new Error("请选择市"));
|
|
} else if (!_t.ruleForm.area_id) {
|
|
callback(new Error("请选择区"));
|
|
} else {
|
|
callback();
|
|
}
|
|
}, trigger: 'change'
|
|
}],
|
|
address: [{message: '请填写正确的搜索栏的地址', required: true, trigger: ['change', 'blur']}, {
|
|
validator: function (rule, value, callback) {
|
|
if (!value || value == '') {
|
|
callback(new Error("请设置门店地址"));
|
|
} else if (!_t.ruleForm.longitude || !_t.ruleForm.latitude) {
|
|
callback(new Error("地址无效"));
|
|
} else {
|
|
callback();
|
|
}
|
|
}, trigger: ['change', 'blur']
|
|
}],
|
|
detail_address: [{message: '请设置门头详细地址', required: true, trigger: 'change'}],
|
|
third_code: [{message: '请设置第三方门店编码', required: true, trigger: 'change'}],
|
|
dadastatus: [{message: '请设置是否开启达达', required: true, trigger: 'change'}],
|
|
attribute: [{message: '请设置达达门店类型', required: false, trigger: 'change'}],
|
|
origin_shop_id: [{message: '请设置达达门店编码', required: false, trigger: 'change'}],
|
|
username: [{message: '请设置达达商家账号', required: false, trigger: 'change'}],
|
|
password: [{message: '请设置达达商家密码', required: false, trigger: 'change'}],
|
|
|
|
clearing_form: [{message: '请设置加盟店结算类型', required: false, trigger: 'change'}],
|
|
account_number: [{message: '请设置加盟店结算人收款账号', required: false, trigger: 'change'}],
|
|
name: [{message: '请设置加盟店结算人姓名', required: false, trigger: 'change'}],
|
|
period_radio: [{message: '请设置加盟店结算周期', required: false, trigger: 'change'}],
|
|
opening_bank: [{message: '请设置加盟店结算开户行', required: false, trigger: 'change'}],
|
|
rate: [{message: '请设置加盟店结算商户抽取的佣金比', required: false, trigger: 'change'}],
|
|
},
|
|
showSelectImage: false,//是否显示选择图片
|
|
storeTypeList: [
|
|
{id: 1, name: '食品小吃'},
|
|
{id: 2, name: '饮料'},
|
|
{id: 3, name: '鲜花'},
|
|
{id: 8, name: '文印票务'},
|
|
{id: 9, name: '便利店'},
|
|
{id: 13, name: '水果生鲜'},
|
|
{id: 19, name: '同城电商'},
|
|
{id: 20, name: '医药'},
|
|
{id: 21, name: '蛋糕'},
|
|
{id: 24, name: '酒品'},
|
|
{id: 25, name: '小商品市场'},
|
|
{id: 26, name: '服装'},
|
|
{id: 27, name: '汽修配件'},
|
|
{id: 28, name: '数码'},
|
|
{id: 29, name: '小龙虾'},
|
|
{id: 5, name: '其他'},
|
|
],
|
|
submitLoading: false,
|
|
moralObj: {
|
|
keyword: '',
|
|
page: 1,
|
|
limit: 10,
|
|
},
|
|
moralIsLoading: false,
|
|
moralCanLoad: true,
|
|
}
|
|
},
|
|
methods: {
|
|
//获取德育币门店
|
|
getMECStoreList() {
|
|
if (this.moralIsLoading || !this.moralCanLoad) return;
|
|
this.moralIsLoading = true;
|
|
this.sendRequest('MoralEducationCoin/Merchant/getStoreList', {
|
|
data: this.moralObj,
|
|
success: (res) => {
|
|
if (res.status == 1) {
|
|
if (this.moralObj.page == 1) {
|
|
this.moralEducationStoreList = res.data.list;
|
|
} else {
|
|
this.moralEducationStoreList.push.apply(this.moralEducationStoreList, res.data.list);
|
|
}
|
|
if (res.data.list.length == this.moralObj.limit) {
|
|
this.moralObj.page++;
|
|
} else {
|
|
this.moralCanLoad = false;
|
|
}
|
|
} else {
|
|
this.$message.error(res.message);
|
|
}
|
|
this.moralIsLoading = false;
|
|
}
|
|
})
|
|
},
|
|
//搜索德育币门店
|
|
searchStore(keyword) {
|
|
this.moralCanLoad = true;
|
|
this.moralObj.keyword = keyword;
|
|
this.moralObj.page = 1;
|
|
this.getMECStoreList();
|
|
},
|
|
//选择德育币门店
|
|
changeMECStore(item) {
|
|
if (item) {
|
|
this.moral_education = {...item};
|
|
} else {
|
|
this.moral_education = {};
|
|
this.searchStore('');
|
|
}
|
|
this.ruleForm.third_code = item.id;
|
|
this.ruleForm.storetag = item.title;
|
|
},
|
|
//商户平台类型 1默认系统 2微礼平台
|
|
//德育币插件 true使用 false不使用
|
|
getPlatformType() {
|
|
$.ajax({
|
|
url: '/index.php/Retail/Mgoods/getPlatformType',
|
|
type: "post",
|
|
data: {},
|
|
success: (res) => {
|
|
this.platform_type = res.platform_type;
|
|
this.moral_education_coin = res.moral_education_coin;
|
|
if (this.moral_education_coin) {
|
|
this.moralObj.keyword = this.ruleForm.storetag;
|
|
this.getMECStoreList();
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
//选择图片完成
|
|
selectFile(item) {
|
|
this.showSelectImage = false;
|
|
this.ruleForm.shopimg_id = item[0].id;
|
|
this.ruleForm.shopimg_url = item[0].path;
|
|
this.$nextTick(() => {
|
|
this.$refs.ruleForm.validateField('shopimg_id');
|
|
})
|
|
},
|
|
|
|
//显示选择图片
|
|
selectImage() {
|
|
this.showSelectImage = true;
|
|
},
|
|
//保存
|
|
save() {
|
|
this.$refs.ruleForm.validate((valid) => {
|
|
if (!valid) {
|
|
return this.$message.warning('请检查必填项');
|
|
}
|
|
this.submitLoading = true;
|
|
$.ajax({
|
|
url: '/index.php/Retail/Store/operateStoreInfo',
|
|
type: 'post',
|
|
data: this.ruleForm,
|
|
success: (res) => {
|
|
if (res.status == 1) {
|
|
this.$message({
|
|
type: 'success',
|
|
message: res.msg,
|
|
duration: 1000,
|
|
onClose: () => {
|
|
parent.layer.close(parent.layer.getFrameIndex(window.name)); //再执行关闭
|
|
}
|
|
});
|
|
} else {
|
|
this.submitLoading = false;
|
|
this.$message.error(res.msg);
|
|
}
|
|
},
|
|
error: (error) => {
|
|
this.submitLoading = false;
|
|
this.$message.error('请求发生错误');
|
|
console.log(error);
|
|
}
|
|
})
|
|
})
|
|
},
|
|
//修改表单验证类型
|
|
changeRequired(key, bol) {
|
|
key.forEach((item) => {
|
|
this.rules[item][0].required = bol;
|
|
})
|
|
},
|
|
//验证省市区
|
|
verifyProvince() {
|
|
setTimeout(() => {
|
|
this.$refs.ruleForm.validateField('province_id')
|
|
}, 100)
|
|
},
|
|
getStoreDetails(id) {
|
|
$.ajax({
|
|
url: '/index.php/Retail/Store/getStoreInfo',
|
|
type: 'post',
|
|
data: {
|
|
id: id,
|
|
},
|
|
success: res => {
|
|
if (res.status == 1) {
|
|
this.changeRequired(['industry_id'], false);
|
|
this.ruleForm = res.data;
|
|
this.pageLoading = true;
|
|
this.moral_education = {
|
|
id: res.data.third_code,
|
|
title: res.data.storetag,
|
|
};
|
|
this.getPlatformType();
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//获取创建门店限制
|
|
getCreatedStoreLimit() {
|
|
$.ajax({
|
|
url: '/index.php/Retail/Store/getUseStoreNum',
|
|
type: 'post',
|
|
success: res => {
|
|
if (res.status == 1) {
|
|
this.canAddNum = res.data.canAddNum;
|
|
this.canUseNum = res.data.canUseNum;
|
|
this.pageLoading = true;
|
|
}
|
|
}
|
|
})
|
|
}
|
|
},
|
|
mounted() {
|
|
let id = decodeURIComponent((new RegExp('[?|&]' + 'id' + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
|
|
if (id) {
|
|
this.getStoreDetails(id);
|
|
} else {
|
|
this.getCreatedStoreLimit();
|
|
this.getPlatformType();
|
|
}
|
|
},
|
|
computed: {
|
|
clearingAccountNumberLabel() {
|
|
let label = ''
|
|
switch (this.ruleForm.clearing_form) {
|
|
case "1":
|
|
label = '银行卡号'
|
|
break
|
|
case "2":
|
|
label = '支付宝账号'
|
|
break
|
|
case "3":
|
|
label = '微信手机号'
|
|
break
|
|
}
|
|
return label
|
|
}
|
|
},
|
|
watch: {
|
|
"ruleForm.dadastatus"(n, o) {
|
|
this.changeRequired(['attribute', 'origin_shop_id', 'username', 'password'], n == 2 ? true : false);
|
|
},
|
|
"ruleForm.store_class"(n) {
|
|
let arr = ['clearing_form', 'account_number', 'name', 'period_radio', 'rate'];
|
|
if (n == 1 || (n == 2 && this.ruleForm.clearing_form == 1)) {
|
|
arr.push('opening_bank');
|
|
}
|
|
this.changeRequired(arr, n == 2 ? true : false);
|
|
},
|
|
"ruleForm.clearing_form"(value) {
|
|
if (value == 1) {
|
|
this.changeRequired(['opening_bank'], true);
|
|
} else {
|
|
this.changeRequired(['opening_bank'], false);
|
|
}
|
|
},
|
|
"ruleForm.province_id"() {
|
|
this.verifyProvince();
|
|
},
|
|
"ruleForm.city_id"() {
|
|
this.verifyProvince();
|
|
},
|
|
"ruleForm.area_id"() {
|
|
this.verifyProvince();
|
|
},
|
|
}
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |