文件
mashangyoujiu/Application/Retail/View/Store/editstore.html

837 行
36 KiB
HTML
可执行文件

此文件含有模棱两可的 Unicode 字符

此文件含有可能会与其他字符混淆的 Unicode 字符。 如果您是想特意这样的,可以安全地忽略该警告。 使用 Escape 按钮显示他们。

<!DOCTYPE html>
<html>
<!--[1.6.48]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" href="__PUBLIC__/css/common-upload.css">
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key={$cache['tencent_key']}"></script>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.css">
<link rel="stylesheet" href="__PUBLIC__/css/system-gallery.css">
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/element-ui.js"></script>
<script charset="utf-8" src="__PUBLIC__/js/system-gallery.js"></script>
<style>
.map_inner {
border: 1px solid gainsboro;
width: 280px;
height: 280px;
}
.tips {
margin-left: 180px;
font-size: 12px;
color: #999;
}
.center {
text-align: center;
}
.list {
display: flex;
flex-direction: row;
align-items: center;
margin: 0;
}
.title {
font-size: 14px;
color: #333;
padding-bottom: 20px;
font-weight: bold;
}
.el-select {
width: 200px;
}
.flex, .flex > div {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex span {
white-space: nowrap;
padding-right: 10px;
color: #666;
}
</style>
</head>
<body>
<div style="padding: 15px 30px 30px;width: 745px;" id="app" v-cloak>
<el-form label-width="136px" id="form">
<input type="hidden" name="id" value="{$info['id']}">
<el-form-item label="门店类型">
<el-input size="small" v-model="store_class" readonly></el-input>
</el-form-item>
<el-form-item label="供货商">
<el-input size="small" v-model="supplier_type_name" readonly></el-input>
</el-form-item>
<el-form-item label="门店名称" required>
<el-input name="storetag" type="text" size="small" v-model="storetag" auto-complete="off"
placeholder="请输入门店名称"></el-input>
</el-form-item>
<el-form-item label="门头照片" required>
<div class="list">
<label class="file_label" style="height: 100px;">
<input type="hidden" name="shopimg_id" value="{$info['shopimg_id']}">
<input type="file" name="shopimg"
placeholder="选择图片" accept="image/png,image/jpeg"/>
<img src="{$info['shopimg']}"
onerror="this.onerror=null,this.src='__PUBLIC__/paper/images/wx_add.png'">
</label>
<el-button plain size="small" @click="selectImage('shopimg')"
icon="el-icon-upload el-icon--right">选择图库图片
</el-button>
</div>
</el-form-item>
<el-form-item label="地址" required>
<el-select name="pro" v-model="selProvince" size="small" placeholder="省" filterable
@change="selectProvince(1)">
<el-option
v-for="item in province"
:key="item.cityid"
:label="item.city_name"
:value="item.cityid">
</el-option>
</el-select>
<el-select name="city" v-model="selCity" size="small" placeholder="市" filterable
@change="selectProvince(2)">
<el-option
v-for="item in city"
:key="item.cityid"
:label="item.city_name"
:value="item.cityid">
</el-option>
</el-select>
<el-select name="area" v-model="selRegion" size="small" placeholder="区" filterable>
<el-option
v-for="item in region"
:key="item.cityid"
:label="item.city_name"
:value="item.cityid">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="门店地址1" required>
<div class="flex">
<div>
<span>经度</span>
<el-input type="text" size="small" readonly v-model="longitude" name="longitude" placeholder="经度"
autocomplete="off"></el-input>
</div>
<div>
<span>纬度</span>
<el-input type="text" size="small" readonly v-model="latitude" name="latitude" placeholder="纬度"
autocomplete="off"></el-input>
</div>
</div>
<div id="r-result" style="display: flex;align-items: center;">
<el-input type="text" id="suggestId" size="small" v-model="address" name="address"
placeholder="搜索地址"
@keyword.enter.exact.native.prevent="searchAddress"
autocomplete="off"></el-input>
<el-button style="margin-left: 10px" type="primary" size="small" @click="searchAddress">搜索</el-button>
</div>
<div class="map_inner" style="height: auto;">
<div id="TencentMap" style="width: 608px;height: 380px"></div>
</div>
</el-form-item>
<el-form-item label="详细地址" size="small" required>
<el-input name="detail_address" type="text" v-model="detail_address" auto-complete="off"
placeholder="请输入详细地址"></el-input>
</el-form-item>
<el-form-item label="达达配送">
<el-switch name="skip"
v-model="skip"
active-text="开启"
inactive-text="关闭"
active-value="2" inactive-value="1">
</el-switch>
</el-form-item>
<div class="title">以下是达达配送所需提交项可选填</div>
<el-form-item label="门店类型">
<input type="hidden" name="attribute" v-model="attribute">
<el-select v-model="attribute" @change="changeAttribute" size="small" placeholder="请选择门店类型" filterable
@change="selectStoreType">
<el-option
v-for="item in storeType"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="门店编码" size="small">
<el-input name="origin_shop_id" type="text" v-model="origin_shop_id" auto-complete="off"
placeholder="门店编码必须唯一"></el-input>
</el-form-item>
<el-form-item label="达达商家app账号" size="small">
<el-input name="username" type="text" v-model="username" auto-complete="off"
placeholder="达达商家app账号(若不需要登陆app,则不用设置)"></el-input>
</el-form-item>
<el-form-item label="达达商家app密码" size="small">
<el-input name="password" type="text" v-model="password" auto-complete="off"
placeholder="达达商家app密码(英文与数字两种拼接若不需要登陆app,则不用设置)"></el-input>
</el-form-item>
<div v-show="store_class=='加盟店'">
<legend>加盟信息设置</legend>
<div style="padding: 15px 30px 30px;width: 745px;">
<el-form-item label="结算账户:" size="small" required>
<el-radio name="bank_radio" v-model="clearing_form" label="1">银行卡</el-radio>
<el-radio name="bank_radio" v-model="clearing_form" label="2">支付宝</el-radio>
</el-form-item>
<!-- 选择银行卡-->
<div v-show="clearing_form==1">
<el-form-item label="开户行信息:" prop="wc_lbnk_name">
<el-select
style="width: 100%;"
name="bank_names"
v-model="bank_names"
:value="bankInfoForm.wc_lbnk_name"
filterable
remote
clearable
v-load-more="getMoreWcLbnkNo"
reserve-keyword
placeholder="请输入开户行关键词"
:remote-method="getWcLbnkNo"
@change="selectWcLbnkNo">
<el-option
v-for="item in WcLbnkList"
:key="item.lbnk_no"
:label="item.lbnk_nm"
:value="item">
</el-option>
</el-select>
</el-form-item>
</div>
<!--选择支付宝-->
<el-form-item label="账号" size="small">
<el-input name="bank_number" type="text" v-model="account_number"
placeholder="请输入账号" maxlength="19"
onkeyup="this.value=this.value.replace(/\D/g,'')"></el-input>
</el-form-item>
<el-form-item label="姓名" size="small">
<el-input style="width: 200px" name="account_holder" type="text" v-model="name"
maxlength="8"></el-input>
</el-form-item>
<el-form-item label="计算周期" size="small" required>
<el-radio name="period_radio" v-model="typeLabel" label="1">日结</el-radio>
<el-radio name="period_radio" v-model="typeLabel" label="2">周结</el-radio>
<el-radio name="period_radio" v-model="typeLabel" label="3">月结</el-radio>
</el-form-item>
<el-form-item label="结算费率" size="small">
<el-input style="width: 100px" name="rate" type="text" v-model="rate"></el-input>
%
</el-form-item>
</div>
</div>
</el-form>
<div class="center">
<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 src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
Vue.directive('load-more', {
bind(el, binding) {
// 获取element-ui定义好的scroll盒子
const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
SELECTWRAP_DOM.addEventListener('scroll', function () {
const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight;
if (CONDITION) {
binding.value();
}
})
}
});
var markersArray = [];
var geocoder, map, marker = null;
var TMap = null; // 腾讯地图GL实例
// JSONP回调函数 - 正向地理编码(地址搜索)
window.geocodeCallback = function(result) {
if (window.vueApp && window.vueApp.handleGeocodeResult) {
window.vueApp.handleGeocodeResult(result);
}
};
// JSONP回调函数 - 反向地理编码(坐标转地址)
window.reverseGeocodeCallback = function(result) {
if (window.vueApp && window.vueApp.handleReverseGeocodeResult) {
window.vueApp.handleReverseGeocodeResult(result);
}
};
var app = new Vue({
el: '#app',
data: function () {
return {
showSelectImage: false,
actFileName: '',
province: {$prov},
city: {$city},
region: {$area},
bank_radio: "1",
opening_bank: '',
b_loading: false, // 银行卡
bank_info: [], // 银行信息
bankInfoForm: {
bank_name: '',
wc_lbnk_name: '',
wc_lbnk_no: '',
},
bank_keyword: '',//开户行搜索关键词
WcLbnkList: [],//联行号列表
zfb_number: '',
zfb_name: '',
bank_name: [
{value: 1, label: '中国建设银行'},
{value: 2, label: '中国农业银行'},
{value: 3, label: '中国招商银行'}
],
storetag: "{$info['storetag']}",
selProvince: "{$info['province']}",
selCity: "{$info['city']}",
selRegion: "{$info['area']}",
address: "{$info['address']}",
attribute: "{$info['attribute']}" != 0 ? parseInt("{$info['attribute']}") : '',
detail_address: "{$info['detail_address']}",
skip: "{$info['dadastatus']}",
origin_shop_id: "{$info['origin_shop_id']}",
longitude: "{$info['longitude']}",
latitude: "{$info['latitude']}",
username: "{$info['username']}",
password: "{$info['password']}",
store_class: parseInt("{$info['store_class']}") == 1 ? "直营店" : "加盟店",
supplier_type_name: "{$info['supplier_type_name']}",
clearing_form: "{$franchisee['clearing_form']}",
account_number: "{$franchisee['account_number']}",
bank_names: "{$franchisee['opening_bank']}",
name: "{$franchisee['name']}",
typeLabel: "{$franchisee['type']}",
rate: "{$franchisee['rate']}",
id: "{$info['id']}",
storeType: [
{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: '其他'},
],
store_class_list: [
{id: 1, name: '直营店'},
{id: 2, name: '加盟店'},
]
}
},
methods: {
//查询银行信息
getWcLbnkNo: function (keyword) {
// console.log(keyword);
this.bank_keyword = keyword;
this.bank_page = 0;
this.getMoreWcLbnkNo();
},
getMoreWcLbnkNo: function () {
var that = this;
console.log(this.wc_lbnk_loading);
if (this.wc_lbnk_loading) {
return;
}
this.wc_lbnk_loading = true;
var page = that.bank_page + 1;
console.log(that.bank_page);
$.ajax({
url: "{:U('Payset/getWcLbnkNo')}",
type: 'post',
data: {
keyword: that.bank_keyword,
page: page,
},
success: function (res) {
if (page == 1) {
that.WcLbnkList = res.data;
} else {
that.WcLbnkList.push.apply(that.WcLbnkList, res.data);
}
that.bank_page = page;
that.$nextTick(function () {
that.wc_lbnk_loading = false;
})
},
error: function () {
that.wc_lbnk_loading = false;
that.$message({
message: '请求发生错误',
type: 'warning'
});
}
})
},
//选择开户行信息
selectWcLbnkNo: function (item) {
// console.log(item);
this.bankInfoForm.wc_lbnk_no = item.lbnk_no;
this.bankInfoForm.wc_lbnk_name = item.lbnk_nm;
},
changeAttribute: function (val) {
console.log(val, this.attribute)
},
selectStoreType: function () {
},
selectFile: function (item) {
console.log(item);
this.showSelectImage = false;
if (item.length) {
$("input[name='" + this.actFileName + "']").val('');
$("input[name='" + this.actFileName + "_id']").val(item[0].id);
$("input[name='" + this.actFileName + "']").next('img').attr('src', item[0].path);
}
},
selectImage: function (actName) {
this.actFileName = actName;
this.showSelectImage = true;
},
save: function () {
console.log(this.account_holder)
if (!this.storetag || !this.address || !this.selProvince || !this.selCity || !this.selRegion || !this.address || !this.longitude || !this.latitude) {
this.$message({
type: 'error',
message: '请先完善您的门店信息',
duration: 1000
});
return false;
}
if (!$("input[name='shopimg']").val() && !parseFloat($("input[name='shopimg_id']").val())) {
this.$message({
type: 'warning',
message: '请上传门头照',
duration: 1000
});
return false;
}
if (this.skip === 2) {
if (!this.attribute || !this.origin_shop_id) {
this.$message({
type: 'error',
message: '开启达达配送,请完善门店类型与门店编码',
duration: 3000
});
return false;
}
}
var that = this;
var fd = new FormData(document.getElementById('form'));
$.ajax({
url: "{:U('doEditStore')}",
type: 'post',
data: fd,
// dataType: 'json', // jQuery不要去设置Content-Type请求头
processData: false, // jQuery不要去处理发送的数据
contentType: false, // jQuery不要去设置Content-Type请求头
success: function (res) {
console.log(res)
if (res.status == 1) {
that.$message({
type: 'success',
message: res.msg,
duration: 1000,
onClose: function () {
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
},
});
} else {
that.$message({
type: 'error',
message: res.msg,
duration: 1500
});
// window.location.href = 'store.html'
// location.reload();
// location.href = ("{:U('/Retail/Store/store')}");
}
},
error: function (error) {
console.log(error);
}
})
},
selectProvince: function (type) {
var that = this;
console.log(type)
$.post("{:U('getCity')}", {
pid: type == 1 ? this.selProvince : this.selCity
}, function (res) {
if (res.status == 1) {
if (type == 1) {
console.log(11)
that.selCity = '';
that.selRegion = '';
that.city = res.data;
that.region = [];
} else {
console.log(22)
that.region = res.data;
that.selRegion = '';
}
} else {
that.$message({
type: 'error',
massage: res.msg,
duration: 1000
})
}
})
},
//搜索地址 - 使用JSONP方式调用WebService API
searchAddress: function () {
if (!this.address || this.address.trim() === '') {
this.$message({
type: 'warning',
message: '请输入要搜索的地址',
duration: 2000
});
return;
}
if (!map) {
this.$message({
type: 'error',
message: '地图未初始化,请稍后再试',
duration: 2000
});
return;
}
// 显示搜索中的提示
this.$message({
type: 'info',
message: '正在搜索地址...',
duration: 1000
});
// 保存当前搜索的地址和Vue实例引用
window.currentSearchAddress = this.address;
window.vueApp = this;
// 使用JSONP方式调用腾讯地图WebService API
const apiKey = '{$cache["tencent_key"]}'; // 使用模板变量
const geocodeUrl = `https://apis.map.qq.com/ws/geocoder/v1/?address=${encodeURIComponent(this.address)}&key=${apiKey}&output=jsonp&callback=geocodeCallback`;
// 创建script标签进行JSONP请求
const script = document.createElement('script');
script.src = geocodeUrl;
script.onerror = () => {
this.$message({
type: 'error',
message: '地址搜索失败,请检查网络连接',
duration: 3000
});
console.error('JSONP请求失败');
};
document.head.appendChild(script);
// 清理script标签
setTimeout(() => {
if (script.parentNode) {
document.head.removeChild(script);
}
}, 5000);
},
// 处理地址搜索结果
handleGeocodeResult: function(result) {
console.log("地址搜索结果: ", result);
if (result.status === 0 && result.result && result.result.location) {
const location = result.result.location;
const lat = location.lat;
const lng = location.lng;
const address = window.currentSearchAddress;
// 设置地图中心点
map.setCenter(new TMap.LatLng(lat, lng));
// 更新标记点
this.updateMapMaker({
lat: lat,
lng: lng
});
this.$message({
type: 'success',
message: `搜索成功!找到地址: ${address}`,
duration: 2000
});
} else {
this.$message({
type: 'error',
message: '未找到该地址,请检查地址是否正确',
duration: 2000
});
console.error('地址搜索失败:', result);
}
},
//反向地理编码 - 使用JSONP方式调用WebService API
reverseGeocode: function(lat, lng) {
if (!map) {
console.error('地图未初始化');
return;
}
// 保存当前坐标和Vue实例引用
window.currentReverseLat = lat;
window.currentReverseLng = lng;
window.vueApp = this;
// 使用JSONP方式调用腾讯地图WebService API
const apiKey = '{$cache["tencent_key"]}'; // 使用模板变量
const reverseGeocodeUrl = `https://apis.map.qq.com/ws/geocoder/v1/?location=${lat},${lng}&key=${apiKey}&output=jsonp&callback=reverseGeocodeCallback`;
// 创建script标签进行JSONP请求
const script = document.createElement('script');
script.src = reverseGeocodeUrl;
script.onerror = () => {
console.error('反向地理编码JSONP请求失败');
};
document.head.appendChild(script);
// 清理script标签
setTimeout(() => {
if (script.parentNode) {
document.head.removeChild(script);
}
}, 5000);
},
// 处理反向地理编码结果
handleReverseGeocodeResult: function(result) {
const lat = window.currentReverseLat;
const lng = window.currentReverseLng;
console.log("反向地理编码结果: ", result);
if (result.status === 0 && result.result && result.result.address) {
this.address = result.result.address;
this.$message({
type: 'success',
message: '已获取位置地址',
duration: 1500
});
} else {
console.error('反向地理编码失败:', result);
}
},
//等待腾讯地图API GL加载完成
waitForTMapLoad: function() {
return new Promise((resolve, reject) => {
if (typeof TMap !== 'undefined' && TMap) {
resolve();
return;
}
let attempts = 0;
const maxAttempts = 50; // 最多等待5秒
const checkInterval = setInterval(() => {
attempts++;
if (typeof TMap !== 'undefined' && TMap) {
clearInterval(checkInterval);
resolve();
} else if (attempts >= maxAttempts) {
clearInterval(checkInterval);
reject(new Error('腾讯地图API GL加载超时'));
}
}, 100);
});
},
//初始化地图 - 使用JavaScript API GL
async initMap() {
try {
// 等待腾讯地图API GL加载完成
await this.waitForTMapLoad();
// 设置默认坐标(如果没有坐标,使用北京天安门)
const defaultLat = parseFloat(this.latitude) || 39.908823;
const defaultLng = parseFloat(this.longitude) || 116.39747;
// 创建地图实例 - 使用新的API GL语法
map = new TMap.Map(document.getElementById('TencentMap'), {
center: new TMap.LatLng(defaultLat, defaultLng),
zoom: 15,
viewMode: '2D', // 2D视图模式
mapStyleId: 'style1' // 使用默认样式
});
// 保存this引用
const self = this;
// 注意:腾讯地图JavaScript API GL版本不支持TMap.service.Geocoder
// 地理编码功能通过WebService API的JSONP方式实现
// 创建初始标记点
this.updateMapMaker({
lat: defaultLat,
lng: defaultLng
});
// 地图点击事件
map.on('click', function(evt) {
const latLng = evt.latLng;
self.updateMapMaker({
lat: latLng.lat,
lng: latLng.lng
});
// 反向地理编码,获取点击位置的地址
self.reverseGeocode(latLng.lat, latLng.lng);
});
console.log("地图初始化成功 - JavaScript API GL");
} catch (error) {
console.error("地图初始化失败: ", error);
this.$message({
type: 'error',
message: '地图加载失败,请刷新页面重试',
duration: 3000
});
}
},
//更新地图标记点
updateMapMaker(item) {
try {
// 清除之前的标记点
if (markersArray && markersArray.length > 0) {
for (let i in markersArray) {
markersArray[i].setMap(null);
}
markersArray = [];
}
// 更新坐标
this.longitude = parseFloat(item.lng).toFixed(6);
this.latitude = parseFloat(item.lat).toFixed(6);
// 创建新的标记点 - 使用JavaScript API GL
marker = new TMap.MultiMarker({
map: map,
styles: {
'marker-style': new TMap.MarkerStyle({
width: 25,
height: 35,
anchor: { x: 12, y: 35 },
src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker.png'
})
},
geometries: [{
id: 'store-marker',
styleId: 'marker-style',
position: new TMap.LatLng(item.lat, item.lng),
properties: {
title: '门店位置(可拖拽调整)'
}
}]
});
// 保存this引用
const self = this;
// 添加标记点点击事件
marker.on('click', function(evt) {
self.$message({
type: 'info',
message: `当前坐标:${self.latitude}, ${self.longitude}`,
duration: 2000
});
});
// 设置地图中心
map.setCenter(new TMap.LatLng(item.lat, item.lng));
markersArray.push(marker);
} catch (error) {
console.error("更新地图标记点失败: ", error);
this.$message({
type: 'error',
message: '更新地图标记点失败',
duration: 2000
});
}
}
},
mounted: function () {
$("input[type='file']").on('change', function () {
console.log(this.files)
if (this.files.length) {
var that = this;
var imgObj = this.files[0];
var imgType = ['image/jpeg', 'image/jpg', 'image/png'];
if (jQuery.inArray(imgObj.type, imgType) != -1) {
//是图片
var reader = new FileReader();
reader.readAsDataURL(imgObj);
reader.onload = function () {
$(that).next('img').attr('src', this.result);
}
}
}
})
this.getWcLbnkNo();
// 确保DOM完全加载后再初始化地图
this.$nextTick(() => {
// 检查地图容器是否存在
const mapContainer = document.getElementById('TencentMap');
if (mapContainer) {
this.initMap();
} else {
console.error('地图容器未找到');
this.$message({
type: 'error',
message: '地图容器加载失败',
duration: 3000
});
}
});
},
created: function () {
}
});
</script>
</body>
</html>