<template>
<div class="information">
<el-tabs v-if="tabList.length > 0" v-model="infoType">
<el-tab-pane v-for="(item,index) in tabList" :key="index" :name="item.value" :label="item.title " />
</el-tabs>
<div v-if="merModel" class="business-msg" style="min-height: 600px;">
<div v-if="infoType == '1'" class="user-msg">
<div class="basic-information">
<span class="basic-label">商户名称：</span>
{{ merData.mer_name }}
</div>
<div class="basic-information">
<span class="basic-label">商户负责人手机号：</span>
{{ merData.mer_phone }}
</div>
<div v-if="merData.merchantCategory.category_name" class="basic-information">
<span class="basic-label">商户分类：</span>
{{ merData.merchantCategory.category_name || "" }}
</div>
<div v-if="merData.merchantType" class="basic-information">
<span class="basic-label"> 商户类型：</span>
{{ merData.merchantType.type_name }}
</div>
<div v-if="merData.merchantCategory.category_name" class="basic-information">
<span class="basic-label"> 商户类别：</span>
{{ merData.is_trader ? "自营" : "非自营" }}
</div>
<div class="basic-information">
<span class="basic-label"> 商户负责人姓名：</span>
{{ merData.real_name }}
</div>
<div class="basic-information">
<span class="basic-label"> 商户入驻时间：</span>
{{ merData.create_time }}
</div>
<div v-if="merData.sub_mchid" class="basic-information">
<span class="basic-label"> 商户入驻时间：</span>
{{ merData.create_time }}
</div>
<div v-if="merData.sub_mchid && merData.merchantType" class="basic-information">
<span class="basic-label"> 店铺类型：</span>
{{ merData.merchantType.type_name }}
</div>
<div class="basic-information">
<div>
<span class="basic-label">是否开启商户：</span>
<el-tooltip v-if="merData.is_margin == 1 && merData.mer_state == 0" class="item" effect="dark" content="请先支付店铺保证金！" placement="top-start">
<el-switch v-model="merData.mer_state" disabled :width="55" active-text="开启" inactive-text="关闭" :active-value="1" :inactive-value="0" />
</el-tooltip>
<el-switch v-else v-model="merData.mer_state" active-text="开启" inactive-text="关闭" :active-value="1" :inactive-value="0" :width="55" />
<span class="trip">开启，店铺即可展示在移动端</span>
</div>
</div>
<div class="basic-information">
<div v-if="merData.is_margin != 0">
<!--未支付-->
<div v-if="merData.is_margin == 1">
<span class="basic-label">店铺保证金：</span>
<span class="font_red">{{ merData.margin }}元</span>
<div class="margin_count" @mouseenter="getCode('all')">
<el-button type="text" size="small" class="mr10 pay_btn">去支付保证金</el-button>
<!--支付二维码-->
<div class="erweima">
<div class="pay_title">支付保证金</div>
<div>
<vue-qr class="bicode" :text="goodsQrcode" :size="310" />
<div class="pay_type">请使用微信扫码支付</div>
<div class="pay_price">￥{{ marginPrice }}元</div>
<div class="pay_time">支付码过期时间： {{ qrEndTime }}</div>
</div>
</div>
</div>
</div>
<!--产品服务费-->
<div v-if="merData.is_service == 1">
<span class="basic-label">产品服务费：</span>
<span class="font_red">{{ merData.service_cost }}元</span>
<div class="margin_count" @mouseenter="getCode('service')">
<el-button type="text" size="small" class="mr10 pay_btn">去支付产品服务费</el-button>
<!--支付二维码-->
<div class="erweima">
<div class="pay_title">支付保证金</div>
<div>
<vue-qr class="bicode" :text="serviceQrCode" :size="310" />
<div class="pay_type">请使用微信扫码支付</div>
<div class="pay_price">￥{{ servicePrice }}元</div>
<div class="pay_time">支付码过期时间： {{ serviceQrEndTime }}</div>
</div>
</div>
</div>
</div>
<!--商品上架费-->
<div v-if="merData.is_goods == 1">
<span class="basic-label">上架费：</span>
<span class="font_red">{{ merData.goods_cost }}元</span>
<div class="margin_count" @mouseenter="getCode('goods')">
<el-button type="text" size="small" class="mr10 pay_btn">去支付上架费</el-button>
<!--支付二维码-->
<div class="erweima">
<div class="pay_title">支付保证金</div>
<div>
<vue-qr class="bicode" :text="qrCode" :size="310" />
<div class="pay_type">请使用微信扫码支付</div>
<div class="pay_price">￥{{ goodsPrice }}元</div>
<div class="pay_time">支付码过期时间： {{ goodsQrEndTime }}</div>
</div>
</div>
</div>
</div>
<!--已支付-->
<div v-if="merData.is_margin == 10 " class="margin_main">
<span class="basic-label">店铺保证金：</span>
<span class="margin_price">{{ merData.margin }}元</span>
<div class="margin_count">
<span class="mr10 spanBtn" @click="viewRecords">查看保证金记录</span>
<!--保证金弹窗-->
<div class="margin_modal" @mouseleave="supplyPay=false">
<div>
<img src="@/assets/images/margin03.png">
<div class="alic">
<span class="text_g">剩余保证金￥{{ merData.margin }}元</span>
<el-button v-if="merData.margin>0" type="primary" size="small" @click="applyReturn">申请退回保证金</el-button>
</div>
</div>
</div>
</div>
<div v-if="merData.marginStatus" style="display: inline-block;">
<div class="margin_count" @mouseenter="getCode('all')">
<el-button type="text" size="small" class="mr10 pay_btn">去补缴保证金</el-button>
<!--支付二维码-->
<div class="erweima">
<div class="pay_title">支付保证金</div>
<div>
<vue-qr class="bicode" :text="qrCode" :size="310" />
<div class="pay_type">请使用微信扫码支付</div>
<div class="pay_price">￥{{ marginPrice }}元</div>
<div class="pay_time">支付码过期时间： {{ qrEndTime }}</div>
</div>
</div>
</div>
</div>
</div>
<div v-if="merData.is_margin == -10 || merData.is_margin == -1" class="margin_main">
<span class="basic-label">店铺保证金：</span>
<span class="margin_price">{{ merData.margin }}元</span>
<div class="margin_count">
<span class="mr10 spanBtn" @click="viewRecords">查看保证金记录</span>
<!--保证金弹窗-->
<div class="margin_modal" @mouseleave="goPay=false">
<div>
<img v-if="merData.is_margin == -10" src="@/assets/images/margin01.png">
<img v-if="merData.is_margin == -1" src="@/assets/images/margin02.png">
<img v-if="merData.is_margin == 10" src="@/assets/images/margin03.png">
<div v-if="merData.is_margin == 10" class="alic">
<span class="text_g">剩余保证金￥{{ merData.margin }}元</span>
<el-button v-if="merData.margin>0" type="primary" size="small" @click="applyReturn">申请退回保证金</el-button>
</div>
<div v-if="merData.is_margin == -1" class="alic">
<span class="text_b b01"> 审核中</span>
<div class="margin_refused">您申请退回保证金，正在审核中…</div>
</div>
<div v-if="merData.is_margin == -10" class="alic">
<span class="text_b b02">审核未通过</span>
<div class="margin_refused">未通过原因：<span>{{ merData.refundMarginOrder.refusal }}</span></div>
<el-button type="primary" size="small" @click="applyReturn">再次申请</el-button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--申请退回保障金银行信息弹窗-->
<el-dialog
v-if="modalBank"
v-model="modalBank"
:visible.sync="modalBank"
title="申请退回保证金"
width="600px"
close-on-click-modal
custom-class="dialog-scustom"
>
<div class="bank-container">
<div class="item">说明： <span class="red">申请退回保证金则视为关闭店铺，请谨慎操作！</span></div>
<div class="item">
<div v-if="online > 0">线上支付的保证金 <span class="red">{{ online }}元</span>会原路返回</div>
<div v-if="offline > 0">
线下支付的保证金<span class="red">{{ offline }}元，</span>会通过下方账号信息返回，请务必确认下方您的收款信息真实有效，以确保资金可顺利退回，感谢配合！
</div>
</div>
<div class="title">账号信息：</div>
<el-form ref="bankValidate" :model="bankValidate" :rules="bankRules" label-width="100px" @submit.native.prevent>
<el-form-item label="真实姓名：" prop="name">
<el-input v-model="bankValidate.name" type="text" placeholder="请输入真实姓名" />
</el-form-item>
<el-form-item label="开户银行：" prop="code">
<el-input v-model="bankValidate.code" type="text" placeholder="请输入开户银行" />
</el-form-item>
<el-form-item v-if="bankValidate.type == 1" label="银行卡号：" prop="pic">
<el-input v-model="bankValidate.pic" type="number" placeholder="请输入银行卡号" />
</el-form-item>
<el-form-item v-if="bankValidate.type == 2" label="收款二维码：">
<img v-if="bankValidate.pic" :src="bankValidate.pic" style="width: 120px;height: 120px;">
<div v-else class="red">
请前往财务-收款方式页面填写收款信息
</div>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="bankConfirm('bankValidate')">确定</el-button>
</span>
</el-dialog>
<div v-if="infoType == '2'" class="business-msg">
<div class="form-data">
<el-form ref="ruleForm" :model="merData" :rules="rules" label-width="150px" class="demo-ruleForm">
<el-form-item class="form-item" label="店铺背景图：" prop="mer_banner">
<div class="upLoadPicBox" @click="modalPicTap('1')">
<div v-if="merData.mer_banner" class="pictrue">
<img :src="merData.mer_banner">
</div>
<div v-else class="upLoad">
<i class="el-icon-camera cameraIconfont" />
</div>
<div class="trip">建议尺寸：710*200px</div>
</div>
</el-form-item>
<el-form-item class="form-item" label="店铺头像：" prop="mer_avatar">
<div class="upLoadPicBox" @click="modalPicTap('2')">
<div v-if="merData.mer_avatar" class="pictrue">
<img :src="merData.mer_avatar">
</div>
<div v-else class="upLoad">
<i class="el-icon-camera cameraIconfont" />
</div>
<div class="trip">建议尺寸：120*120px</div>
</div>
</el-form-item>
<el-form-item class="form-item" label="店铺街背景图：">
<div class="upLoadPicBox" @click="modalPicTap('3')">
<div v-if="merData.mini_banner" class="pictrue">
<img :src="merData.mini_banner">
</div>
<div v-else class="upLoad">
<i class="el-icon-camera cameraIconfont" />
</div>
<div class="trip">建议尺寸：710*134px或710*460px(请根据平台要求选择尺寸，此图如未上传默认展示店铺背景图)</div>
</div>
</el-form-item>
<el-form-item class="form-item" label="店铺资质：" :prop="merData.sys_bases_status == 1 ? 'uploadedqualifications' : ''">
<div class="upLoadPicBox_qualification">
<div v-for="(item, index) in uploadedQualifications" :key="index" class="uploadpicBox_list">
<div class="uploadpicBox_list_image">
<el-image ref="elImage" :src="item.url" :preview-src-list="[item.url]" />
</div>
<div class="uploadpicBox_list_method">
<i class="el-icon-delete" @click="deldetQualificationsList(index)" />
<i class="el-icon-view" @click="viewImage(item, index)" />
</div>
</div>
<el-upload :action="fileUrl" :show-file-list="false" list-type="picture-card" multiple :headers="myHeaders" :on-success="setQualificationsList" :before-upload="beforeUploadQualification">
<i class="el-icon-plus" />
</el-upload>
</div>
</el-form-item>
<el-form-item label="配送方式:" prop="delivery_way">
<el-checkbox-group v-model="merData.delivery_way">
<el-checkbox v-for="item in deliveryList" :key="item.value" :label="item.value">
{{ item.name }}
</el-checkbox>
</el-checkbox-group> <span class="trip">只选择一种配送方式时,会自动修改店铺所有商品的配送方式</span>
</el-form-item>
<el-row v-if="(merData.delivery_way.length == 1 && merData.delivery_way[0] == '1') || (merData.delivery_way.length == 2)" :gutter="24">
<el-col :span="24">
<el-form-item label="提货点名称：" prop="mer_take_name">
<el-input v-model="merData.mer_take_name" maxlength="30" placeholder="请输入提货点名称" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="提货点电话：" prop="mer_take_phone">
<el-input
v-model="merData.mer_take_phone"
placeholder="请输入提货点电话"
/>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="(merData.delivery_way.length == 1 && merData.delivery_way[0] == '1') || (merData.delivery_way.length == 2)">
<el-col :span="24">
<el-form-item label="详细地址：" prop="mer_take_address">
<el-input v-model="merData.mer_take_address" placeholder="请输入详细地址" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="经纬度：" prop="mer_take_location">
<el-input
v-model="merData.mer_take_location"
enter-button="查找位置"
placeholder="请查找位置"
readonly
>
<el-button
slot="append"
type="primary"
@click="onSearchs"
>查找位置</el-button>
</el-input>
<div slot="content">请点击查找位置选择位置</div>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="(merData.delivery_way.length == 1 && merData.delivery_way[0] == '1') || (merData.delivery_way.length == 2)">
<el-col :span="24">
<el-form-item label="提货点营业日期：" prop="mer_take_day">
<el-select
v-model="merData.mer_take_day"
filterable
multiple
placeholder="请选择营业时间"
>
<el-option
v-for="item in date"
:key="item.date_id"
:label="item.date_name"
:value="item.date_id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="提货点营业时间：" required>
<el-time-picker
v-model="value1"
placeholder="开始时间"
value-format="HH:mm"
@change="onchangeTime1"
/>
<el-time-picker
v-model="value2"
placeholder="结束时间"
value-format="HH:mm"
@change="onchangeTime2"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="商户简介：" prop="mer_info">
<el-input v-model="merData.mer_info" type="textarea" placeholder="文字简介，200字以内" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="商户关键字：" prop="mer_keyword">
<div class="tip-form">
<el-input v-model="merData.mer_keyword" class="pageWidth" placeholder="用户在搜索该关键字时，可搜索到本店铺" />
</div>
</el-form-item>
<el-form-item label="联系客服方式：">
<el-radio-group
v-model="merData.services_type"
>
<el-radio :label="0" class="radio">线上客服</el-radio>
<el-radio :label="1">拨打电话</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="客服电话：">
<el-input v-model="merData.service_phone" type="number" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="商户地址：" prop="mer_address">
<el-input v-model="merData.mer_address" enter-button="查找位置" placeholder="请输入商户地址（地址中请包含城市名称，否则会影响搜索精度）">
<el-button slot="append" type="primary" @click="onSearch">查找位置</el-button>
</el-input>
</el-form-item>
</el-col>
</el-row>
<div style="width: 460px;margin-left: 150px;">
<Maps v-if="mapKey" ref="mapChild" class="map-sty" :map-key="mapKey" :lat="Number(merData.lat || 34.34127)" :lon="Number(merData.long || 108.93984)" :address="merData.mer_address" @getCoordinates="getCoordinates" />
</div>
<el-form-item />
</el-form>
</div>
</div>
<div v-if="infoType == '3'" class="user-msg">
<div class="basic-information">
<span class="basic-label"> 商户手续费：</span>
{{ Number(merData.commission_rate) > 0 ? (parseFloat(merData.commission_rate)).toFixed(2) : (parseFloat(merData.merchantCategory.commission_rate * 100)).toFixed(2) }}%
</div>
<div class="basic-information">
<span class="basic-label"> 添加商品：</span>
{{ merData.is_audit ? "需平台审核" : "平台免审核" }}
</div>
<div class="basic-information">
<span class="basic-label"> 开启直播间：</span>
{{ merData.is_bro_room ? "需平台审核" : "平台免审核" }}
</div>
<div class="basic-information">
<span class="basic-label"> 添加直播商品：</span>
{{ merData.is_bro_goods ? "需平台审核" : "平台免审核" }}
</div>
<div class="basic-information">
<span class="basic-label"> 平台首页推荐商户：</span>
{{ merData.is_best ? "是" : "否" }}
</div>
</div>
<div v-if="infoType != 3" class="submit-button">
<el-button type="primary" :loading="submitLoading" @click="submitForm('ruleForm')">提交</el-button>
</div>
</div>
<el-dialog
v-if="modalMap"
v-model="modalMap"
:visible.sync="modalMap"
title="选择位置"
close-on-click-modal
class="mapBox"
custom-class="dialog-scustom"
>
<iframe id="mapPage" width="100%" height="500px" frameborder="0" :src="keyUrl" />
</el-dialog>
<!--保证金记录-->
<el-dialog
v-if="modalRecord"
:visible.sync="modalRecord"
title="操作记录"
width="800px"
close-on-click-modal
class="mapBox"
custom-class="dialog-scustom"
>
<el-table :data="tableData.data" :loading="loading" size="small">
<el-table-column label="序号" min-width="50">
<template scope="scope">
<span>{{ scope.$index+(tableFrom.page - 1) * tableFrom.limit + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="标题" min-width="90" prop="title" />
<el-table-column prop="number" label="金额" min-width="60">
<template scope="scope">
<span v-if="scope.row.pm == 1" style="color:#13ce66">+{{ scope.row.number }}</span>
<span v-else style="color:rgb(237, 64, 20)">-{{ scope.row.number }}</span>
</template>
</el-table-column>
<el-table-column prop="balance" label="保证金结余" min-width="100" />
<el-table-column label="备注" min-width="150" prop="mark" />
<el-table-column prop="create_time" label="操作时间" min-width="120" />
</el-table>
<div class="acea-row row-right page">
<el-pagination
:page-size="tableFrom.limit"
:current-page="tableFrom.page"
layout="prev, pager, next, jumper"
:total="tableData.total"
@size-change="handleSizeChange"
@current-change="pageChange"
/>
</div>
</el-dialog>
</div>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import { serviceCodeApi,goodsCodeApi,storeGetInfoApi, marginCode, marginMakeCode, marginRecordLst, marginRefund, marginRefundApply } from '@/api/setting'
import { getBaseInfo, merchantUpdate } from '@/api/user.js'
import Maps from '@/components/map/map.vue'
import { mapState } from 'vuex'
import { getToken } from '@/utils/auth'
import SettingMer from '@/libs/settingMer'
import { roterPre } from '@/settings'
// 二维码组件
import VueQr from 'vue-qr'
export default {
name: 'Information',
components: { Maps, VueQr },
data() {
var checkPhone = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入客服电话'))
} else {
let regPone = null
const mobile = /^1(3|4|5|6|7|8|9)\d{9}$/ // 最新16手机正则
const tel = /^(0[0-9]{2,3}\-)([2-9][0-9]{4,7})+(\-[0-9]{1,4})?$/ // 座机
const tels = /^400-[016789]\d{2}-\d{4}$/
if (value.charAt(0) == 0) {
// charAt查找第一个字符方法，用来判断输入的是座机还是手机号
regPone = tel
} else if (value.charAt(0) == 4) {
regPone = tels
} else {
regPone = mobile
}
if (!regPone.test(value)) {
return callback(new Error("请填写客服电话(座机格式'区号-座机号码'),400格式：400-XXX-XXXX"))
}
callback()
}
}
// const checkPhone= (rule, value, callback) =>{
// const phoneExp = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
// setTimeout(()=>{
// if(value !== undefined && value !==''){
// if ((!phoneExp.test(value)) && value !== '') {
// callback(new Error('请输入正确的格式！'));
// } else {
// callback();
// }
// }else{
// callback()
// }
// },100)
// }
// var checkPhone = (rule, value, callback) => {
// if (value === '') {
// callback(new Error('请输入电话号码'))
// }
// if (value.length !== 11) {
// callback(new Error('请输入正确电话号码'))
// }
// if (value.length !== 11) {
// callback(new Error('请输入正确电话号码'))
// }
// // 验证电话号码手机号码，包含至今所有号段? ?
// var ab = /^[1][3,4,5,7,8][0-9]{9}$/
// if (ab.test(value) === false) {
// callback(new Error('请输入正确电话号码'))
// }
// callback()
// }
const validatePhone = (rule, value, callback) => {
if (!value) {
return callback(new Error('请填写手机号'))
} else if (!/^1[3456789]\d{9}$/.test(value)) {
callback(new Error('手机号格式不正确!'))
} else {
callback()
}
}
return {
merModel: false,
modalMap: false,
modalBank: false,
modalRecord: false,
loading: false,
roterPre: roterPre,
qrCode: '',
serviceQrCode:'',
goodsQrcode:'',
qrEndTime: '',
serviceQrEndTime: '',
goodsQrEndTime: '',
supplyPay: false,
goPay: false,
tableFrom: {
page: 1,
limit: 20
},
tableData: {
total: 0,
data: []
},
value1: '',
value2: '',
marginPrice: 0,
servicePrice:0,
goodsPrice:0,
merData: {
delivery_way: [],
mer_take_name: '',
mer_take_phone: '',
mer_take_address: '',
mer_take_time: ['', ''],
mer_take_day: [],
mer_take_location: '',
id: 0,
mer_take_status: 0 }, // 默认数据
myHeaders: { 'X-Token': getToken() },
uploadedQualifications: [], // 资质图片列表
mapKey: '', // 地图key
address: '',
key: '',
date: [
{ date_name: '周一', date_id: 1 },
{ date_name: '周二', date_id: 2 },
{ date_name: '周三', date_id: 3 },
{ date_name: '周四', date_id: 4 },
{ date_name: '周五', date_id: 5 },
{ date_name: '周六', date_id: 6 },
{ date_name: '周日', date_id: 7 }
],
submitLoading: false, // 提交loading
deliveryList: [
// { value: '1', name: '到店自提' },
{ value: '2', name: '快递配送' }
],
rules: {
mer_banner: [{ required: true, message: '请上传店铺banner' }],
mer_avatar: [{ required: true, message: '请上传店铺头像' }],
mer_info: [{ required: true, message: '请输入商户简介', trigger: 'blur' },
{ min: 3, max: 200, message: '长度在 3 到 200 个字符', trigger: 'blur' }
],
mer_keyword: [{ required: false, message: '请输入商户关键字', trigger: 'blur' }],
mer_address: [{ required: true, message: '请输入商户地址', trigger: 'blur' }],
uploadedqualifications: [{ required: true, message: '请上传商户资质', trigger: 'blur' }],
delivery_way: [{ required: true, message: '请选择送货方式', trigger: 'change' }],
mer_take_name: [{ required: true, message: '请输入提货点名称', trigger: 'blur' }],
mer_take_day: [{ required: true, type: 'array', message: '请选择提货点营业日期', trigger: 'change' }],
mer_take_time: [{ required: true, message: '请选择提货点营业时间', trigger: 'change' }],
mer_take_phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
mer_take_address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
mer_take_location: [{ required: true, message: '请选择经纬度', trigger: 'blur' }]
},
bankValidate: {
code: '',
name: '',
type: 1,
pic: ''
},
bankRules: {
code: [{ required: true, message: '请输入开户银行', trigger: 'blur' }],
pic: [
{ required: true, message: '请输入银行卡号', trigger: 'blur' },
{ pattern: /\d{10,19}/, message: '请输入正确的银行账号', trigger: 'blur' }
],
name: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }]
},
offline: '',
online: '',
keyUrl: '',
infoType: '1',
tabList: [
{ value: '1', title: '基本信息' },
{ value: '2', title: '店铺信息' },
{ value: '3', title: '功能信息' }
]
}
},
computed: {
fileUrl() {
return SettingMer.https + `/upload/certificate`
}
},
watch: {
uploadedQualifications(val) {
// 由于 uploadedqualifications 字段未被添加到 merData 对象中，因此，使用 1 或 '' 作为符号表示 merData 中的 uploadedqualifications 图片列表是否添加完毕
if (val.length) {
this.merData.uploadedqualifications = 1
} else {
this.merData.uploadedqualifications = ''
}
}
},
created() {
this.getMapInfo()
},
mounted: function() {
window.addEventListener(
'message',
function(event) {
// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
var loc = event.data
if (loc && loc.module === 'locationPicker') {
// 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
window.parent.selectAdderss(loc)
}
},
false
)
window.selectAdderss = this.selectAdderss
this.getInfo()
},
methods: {
// 营业时间
onchangeTime1(e) {
this.value1 = e
this.merData.mer_take_time[0] = e
},
onchangeTime2(e) {
this.value2 = e
this.merData.mer_take_time[1] = e
},
// 选择经纬度
selectAdderss(data) {
this.merData.mer_take_location = data.latlng.lat + ',' + data.latlng.lng
this.modalMap = false
},
onSearchs() {
if (!this.key || this.key == '') { this.$message.error('平台未配置腾讯地图KEY') } else this.modalMap = true
},
// 地图信息获取
getCoordinates(data) {
// this.merData.mer_address = data.address;
this.merData.lat = data.location.lat || 34.34127
this.merData.long = data.location.lng || 108.93984
console.log(data)
},
// 获取历史信息
getInfo() {
const that = this
that.merModel = false
getBaseInfo().then((res) => {
that.merData = res.data
that.$set(that.merData, 'uploadedqualifications', '') // 资质图片列表
that.$set(that.merData, 'delivery_way', res.data.delivery_way && res.data.delivery_way.length ? res.data.delivery_way.map(String) : [])
that.key = res.data.tx_map_key
const keys = res.data.tx_map_key
that.keyUrl = `https://apis.map.qq.com/tools/locpicker?type=1&key=${keys}&referer=myapp`
const info = res.data || null
that.value1 = info.mer_take_time[0] || ''
that.value2 = info.mer_take_time[1] || ''
that.merData.mer_take_time = info.mer_take_time || ['', '']
that.merData.mer_take_day = info.mer_take_day || []
that.merData.mer_take_phone = info.mer_take_phone
that.merData.mer_take_name = info.mer_take_name
that.merData.mer_take_address = info.mer_take_address
that.marginPrice = info.is_margin
that.merData.margin = info.margin
that.merData.mer_take_location =
info.mer_take_location && info.mer_take_location.length
? info.mer_take_location[0] + ',' + info.mer_take_location[1]
: ''
that.merData.mer_take_status = info.mer_take_status || 0
that.merData.refundMarginOrder = info.refundMarginOrder
that.merData.marginStatus = info.ot_margin > info.margin
this.merModel = true
if (res.data.mer_certificate instanceof Array) {
res.data.mer_certificate.forEach((item) => {
that.uploadedQualifications.push({ url: item })
})
} else {
that.uploadedQualifications = []
}
if (that.merData.is_margin == 1)(this.getCode('all'))
})
},
// 提交线下转账信息
bankConfirm(name) {
this.$refs[name].validate(valid => {
if (valid) {
marginRefundApply(this.bankValidate)
.then((res) => {
this.$message.success(res.message)
this.modalBank = false
this.getInfo()
})
.catch((res) => {
this.$message.error(res.message)
})
} else {
this.$message.error('请完善信息后再进行提交')
return false
}
})
},
// 提交/修改
submitForm(formName) {
if (this.infoType == 2) {
this.$refs[formName].validate(valid => {
if (valid) {
const dataKey = Object.keys(this.rules)
const reqData = {};
[...dataKey, 'mer_state', 'long', 'lat', 'mini_banner', 'services_type', 'service_phone'].map(item => {
reqData[item] = this.merData[item]
})
reqData.type = this.infoType
reqData.mer_certificate = this.uploadedQualifications.map(item => item.response ? item.response.data.src : item.url)
const location = this.merData.mer_take_location
? [
this.merData.mer_take_location.split(',')[0],
this.merData.mer_take_location.split(',')[1]
] : []
reqData.mer_take_location = location
this.submitLoading = true
merchantUpdate(reqData)
.then((res) => {
console.log(res)
this.submitLoading = false
this.$message.success('提交成功')
})
.catch((rej) => {
this.submitLoading = false
this.$message.error(rej.data.message)
})
} else {
this.$message.error('请完善信息后再进行提交')
this.submitLoading = false
return false
}
})
} else {
const data = {
mer_state: this.merData.mer_state,
type: this.infoType
}
merchantUpdate(data)
.then((res) => {
console.log(res)
this.submitLoading = false
this.$message.success('提交成功')
})
.catch((rej) => {
this.submitLoading = false
this.$message.error(rej.data.message)
})
}
},
// 获取支付二维码
getCode(type) {
const that = this
// 产品服务费
if(type == 'service' && this.merData.is_service){
return serviceCodeApi().then((res) => {
console.log(res);
that.serviceQrCode = res.data.config
that.serviceQrEndTime = res.data.endtime
that.servicePrice = res.data.price
}).catch(function(res) {
that.$message.error(res.message)
})
}
// 上架费
if(type == 'goods' && this.merData.is_goods){
return goodsCodeApi().then((res) => {
console.log(res);
that.goodsQrCode = res.data.config
that.goodsQrEndTime = res.data.endtime
that.goodsPrice = res.data.price
}).catch(function(res) {
that.$message.error(res.message)
})
}
if (type =='all' && this.merData.marginStatus) {
return marginMakeCode()
.then((res) => {
that.qrCode = res.data.config
that.qrEndTime = res.data.endtime
that.marginPrice = res.data.price
})
.catch(function(res) {
that.$message.error(res.message)
})
} else {
return marginCode()
.then((res) => {
that.qrCode = res.data.config
that.qrEndTime = res.data.endtime
that.marginPrice = res.data.price
})
.catch(function(res) {
that.$message.error(res.message)
})
}
},
// 查看保证金记录
viewRecords() {
this.tableFrom.page = 1
this.modalRecord = true
this.getRecordList()
},
// 保证金记录列表
getRecordList() {
const that = this
that.loading = true
marginRecordLst(that.tableFrom).then(async(res) => {
that.tableData.data = res.data.list
that.tableData.total = res.data.count
that.loading = false
}).catch((res) => {
that.loading = false
that.$message.error(res.message)
})
},
pageChange(page) {
this.tableFrom.page = page
this.getRecordList()
},
handleSizeChange(val) {
this.tableFrom.limit = val
this.getRecordList()
},
// 申请退回保证金
applyReturn() {
const that = this
that.$confirm('申请退回保证金则视为关闭店铺，请谨慎操作！您是否确定继续操作？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
marginRefund()
.then((res) => {
that.bankValidate = res.data.info
that.offline = res.data.offline
that.online = res.data.online
if (Number(res.data.offline) <= 0) {
marginRefundApply(this.bankValidate)
.then((res) => {
this.$message.success(res.message)
this.getInfo()
})
.catch((res) => {
this.$message.error(res.message)
})
} else {
that.modalBank = true
}
})
.catch(function(res) {
that.$message.error(res.message)
})
})
},
// 查找位置
onSearch() {
console.log(this.$refs)
this.$refs.mapChild.searchKeyword(this.merData.mer_address)
},
// 获取 map key
getMapInfo() {
const that = this
storeGetInfoApi()
.then((res) => {
console.log(res)
this.mapKey = res.data.tx_map_key
})
.catch(function(res) {
that.$message.error(res.message)
})
},
// 上传图片
modalPicTap(tit, num, i) {
const _this = this
this.$modalUpload((img) => {
if (tit === '1' && !num) {
_this.merData.mer_banner = img[0]
}
if (tit === '2' && !num) {
_this.merData.mer_avatar = img[0]
}
if (tit === '3' && !num) {
_this.merData.mini_banner = img[0]
}
}, tit)
},
// 资质图片删除
deldetQualificationsList(index) {
this.uploadedQualifications.splice(index, 1)
},
// 上传文件之前的钩子函数
beforeUploadQualification() {
if (this.uploadedQualifications.length >= 5) {
this.$message.error('上传文件最大数量为5张, 上传失败!')
return false
} else {
return true
}
},
// 上传成功
setQualificationsList(response) {
if (response.status === 200) {
this.uploadedQualifications.push({ url: response.data.src })
} else {
this.$message.error(response.message)
}
},
// 查看资质图片
viewImage(item, index) {
this.$refs.elImage[index].clickHandler()
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-textarea__inner{
height: 90px;
}
.information {
width: 100%;
padding: 10px 20px 80px 20px;
background: #ffffff;
h2 {
text-align: center;
color: #303133;
font-weight: bold;
font-size: 20px;
}
.lab-title {
width: max-content;
font-size: 14px;
font-weight: bold;
color: #303133;
margin: 10px 10%;
&::before{
content: "";
display: inline-block;
width: 3px;
height: 13px;
background-color: var(--prev-color-primary);
margin-right: 6px;
position: relative;
top: 1px;
}
}
.user-msg {
padding: 0 20px;
margin-top: 20px;
}
.basic-information {
padding: 0 100px;
margin-bottom: 20px;
font-size: 13px;
text-rendering: optimizeLegibility;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
color: #606266;
.basic-label{
display: inline-block;
text-align: right;
width: 150px;
margin-right: 10px;
}
}
.trip {
color: #999999;
font-weight: normal;
font-size: 12px;
}
.demo-ruleForm{
overflow: hidden;
}
.form-data {
padding: 30px 8%;
.map-sty {
width: 100%;
}
.pictrue img {
border-radius: 4px;
object-fit: cover;
}
.tip-form {
display: flex;
align-items: center;
span {
white-space: nowrap;
padding-left: 10px;
line-height: 20px;
}
}
}
.submit-button {
display: flex;
justify-content: center;
// position: fixed;
bottom: 20px;
// left: 50%;
width: 80%;
padding: 10px 0;
background-color: rgba(255, 255, 255, 0.7);
}
}
.information ::v-deep .el-form-item__label{
color: #303133;
}
.bank-container{
padding: 0 20px;
.item{
margin-top: 10px;
color: #282828;
font-size: 13px;
line-height: 26px;
}
.red{
color:rgb(237, 64, 20);;
}
.title{
color:#303133;
margin: 15px 0;
font-weight: bold;
}
}
.font_red {
color: red;
margin-right: 5px;
}
.spanBtn{
color:var(--prev-color-primary);
font-size:12px;
cursor: pointer;
}
.margin_main{
position: relative;
.margin_price{
cursor: pointer;
}
}
.margin_modal{
position: absolute;
left: -20px;
top: 20px;
border-radius: 8px;
background: #fff;
align-items: center;
justify-content: center;
z-index: 9;
width: 250px;
padding-bottom: 30px;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
display: none;
.alic{
text-align: center;
}
img{
display: block;
width: 150px;
height: 116px;
margin: 20px auto 50px;
}
span{
margin-bottom: 10px;
display: block;
font-weight: normal;
text-align: center;
}
.text_g{
font-size: 16px;
color: #303133;
}
.text_b{
color: #606266;
font-size: 18px;
font-weight: bold;
margin-bottom: 14px;
&.b02{
color: #EF9B6F;
}
&.b01{
color: #57D1A0;
}
}
.el-button{
margin-top: 25px;
}
}
.margin_refused{
display: block;
margin-bottom: 10px;
text-align: center;
color: #606266;
span{
display: inline;
// color: red;
}
}
.margin_count {
position: relative;
display: inline-block;
padding-bottom: 10px;
.pay_btn:hover + .erweima {
display: block;
}
&:hover{
.margin_modal{
display: block;
}
}
.erweima {
position: absolute;
left: 0;
top: 30px;
z-index: 9;
display: none;
width: 250px;
height: 320px;
text-align: center;
background: #fff;
border-radius: 8px;
padding: 10px;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
img{
width: 160px;
height: 160px;
margin-top: 20px;
}
.pay_type{
font-size: 16px;
color: #303133;
font-weight: normal;
}
.pay_price{
font-size: 18px;
color: #E57272;
margin: 10px 0;
}
.pay_title{
font-size: 16px;
color: #303133;
margin-top: 20px;
}
.pay_time{
font-size: 12px;
color: #6D7278;
}
}
}
::v-deep .el-upload--picture-card {
width: 58px;
height: 58px;
line-height: 70px;
}
::v-deep .el-upload-list__item {
width: 58px;
height: 58px;
}
.upLoadPicBox_qualification {
display: flex;
flex-wrap: wrap;
.uploadpicBox_list {
position: relative;
height: 58px;
width: 58px;
margin: 0 20px 20px 0;
.uploadpicBox_list_image {
position: absolute;
top: 0;
left: 0;
width: 58px;
height: 58px;
border-radius: 4px;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
.uploadpicBox_list_method {
position: absolute;
top: 0;
left: 0;
font-size: 18px;
font-weight: bold;
color: #fff;
display: flex;
align-items: center;
justify-content: space-around;
background: rgba(0, 0, 0, 0.4);
border-radius: 4px;
opacity: 0;
width: 100%;
height: 100%;
transition: 0.3s;
}
}
}
.uploadpicBox_list:hover .uploadpicBox_list_method {
z-index: 11;
opacity: 1;
}
</style>