czg_team/cashier_admin_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
YeMingfei666
2024-09-10 10:49:08 +08:00
parent b5fd06b800
commit dd4f5938da
6391 changed files with 722800 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

345
pageDevice/storePage/edit.vue Normal file
View File

@@ -0,0 +1,345 @@
<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>