346 lines
9.6 KiB
Vue
346 lines
9.6 KiB
Vue
<template>
|
|
<view class="page-wrapper store jeepay-edit-form">
|
|
<uni-forms ref="formRef" :rules="rules" :model="vdata.formData" :label-width="140">
|
|
<uni-forms-item required label="选择商户" name="mchApplyId">
|
|
<view class="selected-sex" :style="{ color: vdata.formData.mchApplyId ? '#000' : '' }" @tap="showShopList">
|
|
{{ shopName || '请选择商户' }}
|
|
<image class="left-image" src="/static/iconImg/icon-arrow-small.svg" mode="scaleToFill" />
|
|
</view>
|
|
</uni-forms-item>
|
|
<uni-forms-item required label="门店名称" name="storeName">
|
|
<uni-easyinput v-model="vdata.formData.storeName" placeholder="请输入门店名称" :inputBorder="false"></uni-easyinput>
|
|
</uni-forms-item>
|
|
<uni-forms-item required label="联系人电话" name="contactPhone">
|
|
<uni-easyinput v-model="vdata.formData.contactPhone" placeholder="联系人电话" :inputBorder="false"></uni-easyinput>
|
|
</uni-forms-item>
|
|
<uni-forms-item required label="备注" name="remark" class="line">
|
|
<uni-easyinput v-model="vdata.formData.remark" placeholder="备注" :inputBorder="false"></uni-easyinput>
|
|
</uni-forms-item>
|
|
<uni-forms-item required label="门店地址" name="address">
|
|
<view class="selected-sex" :style="{ alignItems: vdata.formData.address ? 'flex-end' : '', color: vdata.formData.lng ? '#000' : '' }" @tap="showMap">
|
|
{{ vdata.formData.address || '选择地址后自动回显' }}
|
|
<image class="left-image" src="/static/iconImg/icon-arrow-small.svg" mode="scaleToFill" />
|
|
</view>
|
|
</uni-forms-item>
|
|
<uni-forms-item required label="省市区/县" name="areaCode">
|
|
<JeepayAreacodeSelect ref="jeepayAreacodeSelect" v-model:areacodeList="vdata.formData.areaCode" />
|
|
</uni-forms-item>
|
|
<uni-forms-item required label="经纬度" name="lngAndLat" class="line">
|
|
<view class="selected-sex" :style="{ color: vdata.formData.lng ? '#000' : '' }">{{ vdata.formData.lng }}/{{ vdata.formData.lat }}</view>
|
|
</uni-forms-item>
|
|
<uni-forms-item required label="门店类目" name="shopCategory" v-if="vdata.type">
|
|
<JeepayAreacodeSelect ref="jeepayAreacodeSelect" type="mccAli" v-model:areacodeList="vdata.formData.shopCategory" />
|
|
</uni-forms-item>
|
|
<uni-forms-item required label="经营类型" name="shopType" v-if="vdata.type && !['99', '031'].includes(vdata.aliStatus)">
|
|
<JeepayRadioPopupView
|
|
label="请选门店经营类型"
|
|
v-model:value="vdata.formData.shopType"
|
|
:list="[
|
|
{ label: '直营', value: '01' },
|
|
{ label: '加盟', value: '02' }
|
|
]"
|
|
></JeepayRadioPopupView>
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item required label="门店Logo" name="storeLogo" v-if="!vdata.type">
|
|
<view class="selected-sex">
|
|
<JeepayUploadImg v-model:src="vdata.formData.storeLogo" bizType="applyment" />
|
|
</view>
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item required label="门头照" name="storeOuterImg" v-if="!vdata.type">
|
|
<view class="selected-sex">
|
|
<JeepayUploadImg v-model:src="vdata.formData.storeOuterImg" bizType="applyment" />
|
|
</view>
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item required label="门店内景照" name="storeInnerImg" v-if="!vdata.type">
|
|
<view class="selected-sex">
|
|
<JeepayUploadImg v-model:src="vdata.formData.storeInnerImg" bizType="applyment" />
|
|
</view>
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
|
|
<view class="confirm-wrapper" v-if="vdata.aliStatus">
|
|
<view class="confirm-button flex-center" hover-class="touch-button" @tap="confirmFunc">保存</view>
|
|
</view>
|
|
|
|
<view class="confirm-wrapper" v-else>
|
|
<view class="confirm-button flex-center" hover-class="touch-button" @tap="confirmFunc">
|
|
{{ vdata.storeId ? '确认修改' : '确认创建' }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<JeepayPopupListSelect
|
|
ref="selectIncomingRef"
|
|
title="请选择商户"
|
|
searchInputName="appName"
|
|
:reqTableDataFunc="reqTableDataFunc"
|
|
:fields="{ key: 'applyId', left: 'mchApplyName', right: 'isvNo' }"
|
|
@confirm="confirmIncoming"
|
|
></JeepayPopupListSelect>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref } from 'vue';
|
|
import { onLoad } from '@dcloudio/uni-app';
|
|
import { $location2areacode, reqLoad, API_URL_MCH_STORE_LIST, API_URI_DEV_RUYI, API_URL_MCH_APPLYMENT_LIST } from '@/http/apiManager.js';
|
|
import infoBox from '@/commons/utils/infoBox.js';
|
|
import go from '@/commons/utils/go.js';
|
|
import formUtil from '@/commons/utils/formUtil.js';
|
|
import emit from '@/commons/utils/emit.js';
|
|
import cal from '@/commons/utils/cal.js';
|
|
|
|
const jeepayAreacodeSelect = ref();
|
|
const formRef = ref();
|
|
|
|
const selectIncomingRef = ref(null);
|
|
const shopList = ref([]);
|
|
const shopName = ref('');
|
|
|
|
function showShopList() {
|
|
selectIncomingRef.value.open();
|
|
}
|
|
|
|
function confirmIncoming(selected) {
|
|
// console.log(selected.applyId);
|
|
selectIncomingRef.value.close();
|
|
vdata.formData.mchApplyId = selected.applyId;
|
|
shopName.value = selected.mchShortName;
|
|
}
|
|
|
|
function reqTableDataFunc(params) {
|
|
// if(!params.state){
|
|
// params.state = 99
|
|
// }
|
|
return reqLoad.list(API_URL_MCH_APPLYMENT_LIST, params);
|
|
}
|
|
|
|
onLoad((options) => {
|
|
if (options.type == 'aliStore' && options.aliStatus == '0') {
|
|
uni.setNavigationBarTitle({
|
|
title: '同步蚂蚁店铺'
|
|
});
|
|
} else if (options.type) {
|
|
uni.setNavigationBarTitle({
|
|
title: '修改蚂蚁店铺'
|
|
});
|
|
}
|
|
// 修改页面
|
|
if (options.storeId) {
|
|
vdata.storeId = options.storeId;
|
|
vdata.type = options.type;
|
|
vdata.aliStatus = options.aliStatus;
|
|
reqLoad.getById(options.type == 'aliStore' && ['99', '031'].includes(vdata.aliStatus) ? API_URI_DEV_RUYI : API_URL_MCH_STORE_LIST, vdata.storeId).then(({ bizData }) => {
|
|
vdata.formData = bizData;
|
|
});
|
|
}
|
|
reqTableDataFunc();
|
|
});
|
|
|
|
const rules = {
|
|
mchApplyId: {
|
|
rules: [formUtil.rules.requiredSelect('请选择商户')]
|
|
},
|
|
storeName: {
|
|
rules: [formUtil.rules.requiredInput('')]
|
|
},
|
|
contactPhone: {
|
|
rules: [formUtil.rules.requiredInput(''), formUtil.rules.patternRule('联系人电话', formUtil.regexp.mobile)]
|
|
},
|
|
address: {
|
|
rules: [formUtil.rules.requiredSelect('门店地址')]
|
|
},
|
|
areaCode: {
|
|
rules: [formUtil.rules.requiredInput('省市县')]
|
|
},
|
|
storeLogo: {
|
|
rules: [formUtil.rules.requiredUpload('门店Logo')]
|
|
},
|
|
storeOuterImg: {
|
|
rules: [formUtil.rules.requiredUpload('门头照')]
|
|
},
|
|
storeInnerImg: {
|
|
rules: [formUtil.rules.requiredUpload('门店内景照')]
|
|
},
|
|
shopCategory: {
|
|
rules: [formUtil.rules.requiredInput('门店类型')]
|
|
},
|
|
shopType: {
|
|
rules: [formUtil.rules.requiredInput('经营类型')]
|
|
}
|
|
};
|
|
|
|
const vdata = reactive({
|
|
storeId: null, // 新建 or 修改
|
|
|
|
formData: {} // 表单数据
|
|
});
|
|
|
|
// 选择地图
|
|
function showMap() {
|
|
// 本地 测试选择
|
|
// return test();
|
|
|
|
// 打开地图 && 获取省市县
|
|
uni.chooseLocation().then((res) => {
|
|
console.log(res);
|
|
vdata.formData.lng = res.longitude.toFixed(6); // IOS 小程序中： 经纬度12位。
|
|
vdata.formData.lat = res.latitude.toFixed(6);
|
|
vdata.formData.address = res.name;
|
|
|
|
// 经纬度 --》 获取到省市县编码
|
|
$location2areacode(vdata.formData.lng + ',' + vdata.formData.lat).then(({ bizData }) => {
|
|
if (bizData && bizData.areacode) {
|
|
jeepayAreacodeSelect.value.resetBySingleAreacode(bizData.areacode);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function test() {
|
|
vdata.formData.lng = '116.099';
|
|
vdata.formData.lat = '39.84548';
|
|
vdata.formData.address = '测试地址';
|
|
// 经纬度 --》 获取到省市县编码
|
|
$location2areacode(vdata.formData.lng + ',' + vdata.formData.lat).then(({ bizData }) => {
|
|
if (bizData && bizData.areacode) {
|
|
jeepayAreacodeSelect.value.resetBySingleAreacode(bizData.areacode);
|
|
}
|
|
});
|
|
}
|
|
|
|
function confirmFunc() {
|
|
const goBack = () => {
|
|
emit.pageEmit(emit.ENAME_REF_STORE_LIST); // 更新列表
|
|
go.back(1, emit.ENAME_REF_STORE_DETAIL); // 返回详情 && 更新详情
|
|
};
|
|
|
|
// 修改或更新店铺信息
|
|
if (!vdata.type) {
|
|
formUtil
|
|
.validate(formRef.value)
|
|
.then(() => {
|
|
return reqLoad.addOrUpdate(vdata.storeId, API_URL_MCH_STORE_LIST, vdata.formData);
|
|
})
|
|
.then(({ bizData }) => {
|
|
goBack();
|
|
});
|
|
} else {
|
|
// 同步蚂蚁店铺
|
|
formUtil.validate(formRef.value).then(() => {
|
|
vdata.formData.shopCategory = vdata.formData.shopCategory.join('_');
|
|
if (['99', '031'].includes(vdata.aliStatus)) {
|
|
reqLoad.updateById(API_URI_DEV_RUYI, vdata.storeId, vdata.formData).then((res) => {
|
|
goBack();
|
|
});
|
|
} else {
|
|
reqLoad.add(`${API_URI_DEV_RUYI}/${vdata.storeId}`, vdata.formData).then((res) => {
|
|
goBack();
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.store {
|
|
/* #ifdef MP-WEIXIN */
|
|
jeepay-upload-img[is='components/JeepayUploadImg/JeepayUploadImg'] {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
/* #endif */
|
|
|
|
.upload-wrapper-store {
|
|
padding-top: 40rpx;
|
|
}
|
|
|
|
.upload-wrapper-store-last {
|
|
padding-bottom: 40rpx;
|
|
}
|
|
}
|
|
|
|
input {
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.selected-sex {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 32rpx;
|
|
color: #b3b3b3;
|
|
|
|
image {
|
|
flex-shrink: 0;
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
}
|
|
}
|
|
|
|
.selected-sex :nth-child(2) {
|
|
margin: 30rpx 0;
|
|
}
|
|
|
|
.line {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.confirm-wrapper {
|
|
padding: 50rpx 30rpx;
|
|
|
|
.confirm-button {
|
|
height: 110rpx;
|
|
color: #fff;
|
|
border-radius: 20rpx;
|
|
background: $jeepay-bg-primary;
|
|
}
|
|
}
|
|
|
|
.align-top {
|
|
align-items: flex-start;
|
|
padding: 40rpx 0;
|
|
height: auto;
|
|
min-height: auto;
|
|
|
|
image {
|
|
width: 120rpx;
|
|
height: 40rpx;
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
|
|
.border-tb {
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
width: 90vw;
|
|
height: 1rpx;
|
|
background-color: #ededed;
|
|
}
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
width: 90vw;
|
|
height: 1rpx;
|
|
background-color: #ededed;
|
|
}
|
|
}
|
|
|
|
.left-image {
|
|
width: 120rpx;
|
|
height: 40rpx;
|
|
}
|
|
</style>
|