first
This commit is contained in:
329
pageDevice/storePage/components/list.vue
Normal file
329
pageDevice/storePage/components/list.vue
Normal file
@@ -0,0 +1,329 @@
|
||||
<!--
|
||||
|
||||
订单列表页面， 数据渲染
|
||||
业务： 进件
|
||||
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/11/29 09:17
|
||||
-->
|
||||
<template>
|
||||
<!-- 草稿 灰色 失败红色 审核中 黄色 -->
|
||||
<!-- 列表卡片 -->
|
||||
<view class="apply-card">
|
||||
<view class="apply-title" @tap="toViewPage">
|
||||
<view class="pay-img-wrapper flex-center" :style="{ backgroundColor: record.bgColor }">
|
||||
<image :src="props.record.icon" mode="scaleToFill" />
|
||||
</view>
|
||||
<view class="apply-title-wrapper">
|
||||
<view class="apply-title-info">
|
||||
<text class="single-text-beyond" style="width: 340rpx">{{ props.record.mchFullName }}</text>
|
||||
<view class="apply-state">
|
||||
<text>{{ stateList[record.state]?.text }}</text>
|
||||
<view class="apply-dot" :style="{ backgroundColor: stateList[record.state]?.bgColor }"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="apply-time">{{ props.record.createdAt }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="apply-info-title" @tap="toViewPage">
|
||||
<view class="title">进件渠道</view>
|
||||
<view class="info">{{ props.record.ifName }}</view>
|
||||
</view>
|
||||
<view class="apply-info-title" @tap="toViewPage">
|
||||
<view class="title">进件单号</view>
|
||||
<view class="info">{{ props.record.applyId }}</view>
|
||||
</view>
|
||||
<view class="apply-button">
|
||||
<view
|
||||
v-if="
|
||||
ent.has('ENT_MCH_APPLYMENT_SIGN') &&
|
||||
(props.record.state == 1 || props.record.state == 2 || props.record.state == 4 || props.record.state == 5 || props.record.state == 6)
|
||||
"
|
||||
class="sign flex-center"
|
||||
hover-class="touch-hover"
|
||||
@tap="toSignPage"
|
||||
>
|
||||
签约开通
|
||||
</view>
|
||||
<view
|
||||
v-if="ent.has('ENT_MCH_APPLYMENT_GET_INFO') && (props.record.state == 1 || props.record.state == 4 || props.record.state == 5)"
|
||||
class="new-state flex-center"
|
||||
hover-class="touch-button"
|
||||
>
|
||||
获取最新状态
|
||||
</view>
|
||||
|
||||
<view v-if="ent.has('ENT_MCH_APPLYMENT_ADD')" class="new-state flex-center" hover-class="touch-button" @tap="toShowSelectIfCode()">复用信息</view>
|
||||
</view>
|
||||
|
||||
<!-- 选择支付 接口 -->
|
||||
<JeepayPopupListSelect
|
||||
ref="selectIfcodeRef"
|
||||
title="请选择渠道"
|
||||
:reqTableDataFunc="reqTableDataByIfcodeFunc"
|
||||
:fields="{ key: 'ifCode', left: 'ifName', right: 'ifCode' }"
|
||||
@confirm="confirmIfCode"
|
||||
>
|
||||
<!-- 小程序， 插槽不生效， 待排查！ TODO -->
|
||||
<!-- 详见： https://ask.dcloud.net.cn/question/158765 -->
|
||||
<!-- JeepayPopupListSelect.js 修改 "content-" + i0, 改为： content 即可。 -->
|
||||
|
||||
<!-- #ifdef APP-PLUS || H5 -->
|
||||
<template #content="{ record }">
|
||||
<view class="pay-wrapper">
|
||||
<view class="pay-info">
|
||||
<view class="pay-logo flex-center" :style="{ backgroundColor: record.bgColor }">
|
||||
<image :src="record.icon" mode="scaleToFill" />
|
||||
</view>
|
||||
<view>
|
||||
<view class="pay-title">{{ record.ifName }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</JeepayPopupListSelect>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import cal from '@/commons/utils/cal.js';
|
||||
import go from '@/commons/utils/go.js';
|
||||
import datamap from '@/commons/utils/datamap.js';
|
||||
import ent from '@/commons/utils/ent.js';
|
||||
import ak from '@/commons/utils/ak.js';
|
||||
import { $getAllAllowApplymentIfCodeList } from '@/http/apiManager.js';
|
||||
|
||||
const selectIfcodeRef = ref();
|
||||
|
||||
const vdata = reactive({
|
||||
addIfCodeList: [] // 可以选择的接口集合
|
||||
});
|
||||
|
||||
function toH5ApplyOptionPage(applyId, configPage) {
|
||||
uni.navigateTo({ url: `/pageApply/applyDetailH5ApplyOption?applyId=${applyId}&configPage=${configPage}` });
|
||||
}
|
||||
|
||||
// 去进件详情 / 修改页
|
||||
function toViewPage() {
|
||||
let isView = 1;
|
||||
|
||||
if ([0, 3, 8].indexOf(props.record.state) >= 0) {
|
||||
isView = 0;
|
||||
}
|
||||
go.to('PAGES_APPLYMENT_H5_DETAIL', { autoConfigMchAppId: props.record.autoConfigMchAppId, isvNo: props.record.isvNo, applyId: props.record.applyId, isView: isView });
|
||||
}
|
||||
|
||||
// 签约开通
|
||||
function toSignPage() {
|
||||
go.to('PAGES_APPLYMENT_H5_OPTION', { applyId: props.record.applyId, configPage: 'NEXT_BIZS' });
|
||||
}
|
||||
|
||||
// 定义传入属性
|
||||
const props = defineProps({
|
||||
record: { type: Object, default: () => {} } // 渲染对象
|
||||
});
|
||||
const stateList = reactive([
|
||||
{
|
||||
text: '草稿', //0
|
||||
bgColor: '#D9D9D9'
|
||||
},
|
||||
{
|
||||
text: '审核中', //1
|
||||
bgColor: '#FFCC66'
|
||||
},
|
||||
{
|
||||
text: '已开通', //2
|
||||
bgColor: '#18BC73'
|
||||
},
|
||||
{
|
||||
text: '申请被驳回', //3
|
||||
bgColor: '#FF4D5B'
|
||||
},
|
||||
{
|
||||
text: '待验证', //4
|
||||
bgColor: '#FFCC66'
|
||||
},
|
||||
{
|
||||
text: '待签约', //5
|
||||
bgColor: '#2980FD'
|
||||
},
|
||||
{
|
||||
text: '', //6 占位
|
||||
bgColor: ''
|
||||
},
|
||||
{
|
||||
text: '等待预审', //7
|
||||
bgColor: '#FFCC66'
|
||||
},
|
||||
{
|
||||
text: '预审拒绝', //8
|
||||
bgColor: '#FF4D5B'
|
||||
}
|
||||
]);
|
||||
|
||||
// 打开选择渠道页面
|
||||
function toShowSelectIfCode() {
|
||||
ak.go.to('PAGES_APPLYMENT_SELECETDPAY', { applyId: props.record.applyId, ifCode: props.record.ifCode, range: props.record.range });
|
||||
return;
|
||||
$getAllAllowApplymentIfCodeList().then(({ bizData }) => {
|
||||
vdata.addIfCodeList = bizData;
|
||||
selectIfcodeRef.value.open();
|
||||
});
|
||||
}
|
||||
|
||||
// 请求可以选择的支付渠道
|
||||
function reqTableDataByIfcodeFunc() {
|
||||
// 模拟请求数据
|
||||
return Promise.resolve({ bizData: { records: vdata.addIfCodeList, hasNext: false } });
|
||||
}
|
||||
|
||||
function confirmIfCode(selected) {
|
||||
if (!selected) {
|
||||
ak.infoBox.showToast('请选择进件渠道');
|
||||
return false;
|
||||
}
|
||||
selectIfcodeRef.value.close();
|
||||
ak.go.to('PAGES_APPLYMENT_H5_DETAIL', { isView: 0, ifCode: selected.ifCode, copyInfoSourceApplyId: props.record.applyId });
|
||||
}
|
||||
|
||||
function toCopyPage() {}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 列表卡片样式
|
||||
.apply-card {
|
||||
padding: 0.1rpx 30rpx;
|
||||
padding-bottom: 10rpx;
|
||||
margin: 20rpx;
|
||||
|
||||
background-color: #fff;
|
||||
border-radius: $J-b-r32;
|
||||
.apply-title {
|
||||
display: flex;
|
||||
margin-top: 30rpx;
|
||||
margin-bottom: 40rpx;
|
||||
font-size: 30rpx;
|
||||
.pay-img-wrapper {
|
||||
margin-right: 20rpx;
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 20rpx;
|
||||
image {
|
||||
width: 65%;
|
||||
height: 65%;
|
||||
}
|
||||
}
|
||||
.apply-title-wrapper {
|
||||
flex: 1;
|
||||
.apply-title-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 40rpx;
|
||||
.apply-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
white-space: nowrap;
|
||||
text {
|
||||
transform: translateX(-10rpx);
|
||||
}
|
||||
.apply-dot {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #2980fd;
|
||||
}
|
||||
}
|
||||
}
|
||||
.apply-time {
|
||||
color: #999;
|
||||
margin-top: 10rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.apply-info-title {
|
||||
margin: 20rpx 0;
|
||||
display: flex;
|
||||
font-size: 26rpx;
|
||||
.title {
|
||||
color: #808080;
|
||||
}
|
||||
.info {
|
||||
text-indent: 56rpx;
|
||||
}
|
||||
}
|
||||
.apply-button {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 20rpx;
|
||||
view {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
height: 62rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
.sign {
|
||||
width: 164rpx;
|
||||
border: 1rpx solid #d3d3d4;
|
||||
}
|
||||
.new-state {
|
||||
margin-left: 20rpx;
|
||||
width: 216rpx;
|
||||
color: #fff;
|
||||
background: $jeepay-bg-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 170rpx;
|
||||
.dot {
|
||||
position: relative;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #d7d8d9;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
.dot-active {
|
||||
background-color: #2980fd;
|
||||
}
|
||||
.pay-info {
|
||||
display: flex;
|
||||
|
||||
.pay-logo {
|
||||
margin: 0 20rpx 0 0rpx;
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: $v-b-r20;
|
||||
background-color: #07112d;
|
||||
image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
.pay-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
345
pageDevice/storePage/edit.vue
Normal file
345
pageDevice/storePage/edit.vue
Normal 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>
|
||||
216
pageDevice/storePage/storeDetails.vue
Normal file
216
pageDevice/storePage/storeDetails.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<JeepayBackground :bgColorStyle="{ height: '776rpx' }" class="store-wrapper">
|
||||
<JeepayCustomNavbar
|
||||
textColor="#fff"
|
||||
bgDefaultColor="linear-gradient(270deg, rgba(72, 192, 255, 1) 0%, rgba(51, 157, 255, 1) 100%)"
|
||||
title="门店详情"
|
||||
backCtrl="back"
|
||||
/>
|
||||
|
||||
<!-- 通用渲染组件 -->
|
||||
<JeepayTableListItem viewClass="list-item-by-detail"
|
||||
:title="vdata.record.storeName" :subtitle="vdata.record.storeId" :logo="vdata.record.storeLogo || '/static/indexImg/icon-store.svg'" :moreBtnList="moreBtnList" ref="refTabel"/>
|
||||
|
||||
<view class="create-time">
|
||||
<view class="time-title">创建时间</view>
|
||||
<view class="time-info">{{ vdata.record.createdAt }}</view>
|
||||
</view>
|
||||
|
||||
<JeepayCard :editText="ak.ent.has('ENT_MCH_STORE_EDIT') ? '修改门店' : null" @editTap="go.to('PAGES_APP_STORE_EDIT', {storeId: vdata.record.storeId})">
|
||||
<JeepayDescview>
|
||||
<JeepayDescviewItem title="门店名称" :desc="vdata.record.storeName"/>
|
||||
<JeepayDescviewItem title="联系人电话" :desc="vdata.record.contactPhone" />
|
||||
<JeepayDescviewItem title="门店地址" :desc="vdata.record.address" />
|
||||
<JeepayDescviewItem title="蚂蚁店铺">
|
||||
<template #desc>
|
||||
<JeepayTag type="blue">{{ calcAliStatusText() }}</JeepayTag>
|
||||
</template>
|
||||
</JeepayDescviewItem>
|
||||
<JeepayDescviewItem title="备注" :desc="vdata.record.remark || '未填写'" :bottomBorder="true" />
|
||||
<JeepayDescviewItem title="门店Logo" :desc="vdata.record.storeLogo" :descIsImg="true" />
|
||||
<JeepayDescviewItem title="门店内景照" :desc="vdata.record.storeInnerImg" :descIsImg="true" />
|
||||
<JeepayDescviewItem title="门头照" :desc="vdata.record.storeOuterImg" :descIsImg="true" />
|
||||
</JeepayDescview>
|
||||
</JeepayCard>
|
||||
|
||||
<!-- <JeepayCard title="其他设置" viewStyle="margin-top: 30rpx">
|
||||
<JeepayTableListItem title="是否默认" subtitle="设为默认后，该门店将成为当前商户的默认下单门店">
|
||||
<template #titleRight> -->
|
||||
<!-- 显示条件： 1. 权限支持， 2. 仅支持 非默认 调整为 默认， 反向不支持 -->
|
||||
<!-- <JeepayStateSwitch v-model:state="vdata.record.defaultFlag" :showSwitchType="ent.has('ENT_MCH_STORE_EDIT') && vdata.record.defaultFlag == 0" :updateStateFunc="updateDefaultFlagFunc"/>
|
||||
</template>
|
||||
</JeepayTableListItem>
|
||||
</JeepayCard> -->
|
||||
|
||||
</JeepayBackground>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import { onLoad, onUnload } from '@dcloudio/uni-app'
|
||||
import { $location2areacode, reqLoad, API_URL_MCH_STORE_LIST,$queryAliStore,API_URI_DEV_RUYI } from '@/http/apiManager.js'
|
||||
import ak from '@/commons/utils/ak.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 ent from '@/commons/utils/ent.js'
|
||||
|
||||
const moreBtnList = reactive([
|
||||
{ label: '删除门店', value: 'delete', color: 'red', entId: "ENT_MCH_STORE_DELETE", confirmText: '确认删除门店？', fun: deleteFunc},
|
||||
{ label: '同步蚂蚁店铺', value: 'aliStore', entId: "ENT_MCH_ALIPAY_SHOP_ADD", fun: ()=>{ go.to('PAGES_APP_STORE_EDIT', {storeId: vdata.record.storeId,type:'aliStore',aliStatus:vdata.record.alipayShopStatus}) }},
|
||||
{ label: '解除蚂蚁店铺', value: 'delAliStore', confirmText: '是否确认解除该蚂蚁店铺同步?', entId: "ENT_MCH_ALIPAY_SHOP_DELETE", fun: ()=>{ closeAliStore()}},
|
||||
{ label: '刷新蚂蚁店铺状态', value: 'queryAliStore', entId: "ENT_MCH_ALIPAY_SHOP_STATUS", fun: ()=>{ queryAliStoreStatus()}},
|
||||
])
|
||||
|
||||
onLoad((options) => {
|
||||
refData(options.storeId)
|
||||
})
|
||||
|
||||
const vdata = reactive({
|
||||
record : { }
|
||||
})
|
||||
const refTabel = ref(null)
|
||||
|
||||
// 监听 更新事件
|
||||
onUnload(() => uni.$off(emit.ENAME_REF_STORE_DETAIL))
|
||||
uni.$on(emit.ENAME_REF_STORE_DETAIL, function(data){
|
||||
refData(vdata.record.storeId)
|
||||
})
|
||||
function refData (storeId) {
|
||||
reqLoad.getById(API_URL_MCH_STORE_LIST, storeId).then(({ bizData }) => {
|
||||
vdata.record = bizData
|
||||
if(bizData.alipayShopStatus !=0){
|
||||
queryAliStoreStatus(true)
|
||||
}else{
|
||||
calcTabelList(bizData.alipayShopStatus)
|
||||
}
|
||||
})
|
||||
}
|
||||
// 针对 列表按钮 处理
|
||||
const orgTabelArray = []
|
||||
function calcTabelList (key) {
|
||||
const orgTabelArrayIncludesData = (index)=>{
|
||||
if (orgTabelArray.findIndex(ite => ite.value == moreBtnList[index].value) == '-1') {
|
||||
orgTabelArray.push(moreBtnList[index]) // 存储 列表数据 以便状态更新 时 恢复列表
|
||||
}
|
||||
}
|
||||
const delValue = ['delAliStore', 'queryAliStore']
|
||||
const i = moreBtnList.findIndex(v => v.value == 'aliStore')
|
||||
if(i !='-1'){
|
||||
moreBtnList[i].label = '同步蚂蚁店铺'
|
||||
}
|
||||
if (['0', '-1'].includes(key)) {
|
||||
const index = delValue.map((v) => moreBtnList.findIndex(ite => ite.value == v)) //筛选出 需要删除的下标
|
||||
if (index.length) {
|
||||
index.sort((a, b) => b - a) //排序 从大到小
|
||||
index.forEach(v => {
|
||||
orgTabelArrayIncludesData(v)
|
||||
moreBtnList.splice(v, 1)
|
||||
})
|
||||
}
|
||||
} else if(key !='031') {
|
||||
const queryIndex = moreBtnList.findIndex(v=>v.value=='queryAliStore')
|
||||
if(queryIndex != '-1' && orgTabelArray.findIndex(v=>v.value =='queryAliStore') !='-1'){
|
||||
moreBtnList.splice(queryIndex,1)
|
||||
}
|
||||
moreBtnList.push(...orgTabelArray)
|
||||
const i = moreBtnList.findIndex(v => v.value == 'aliStore')
|
||||
if (i != '-1') {
|
||||
moreBtnList[i].label = '修改蚂蚁店铺'
|
||||
moreBtnList.sort((a, b) => a.label.length - b.label.length) //对列表进行排序
|
||||
}
|
||||
}
|
||||
const delIndex = moreBtnList.findIndex(v => v.value == 'delAliStore')
|
||||
if (key == '031') {
|
||||
if(moreBtnList.findIndex(v=>v.value=='queryAliStore')=='-1'){
|
||||
moreBtnList.push(orgTabelArray.find(v=>v.value == 'queryAliStore'))
|
||||
}
|
||||
if (delIndex != '-1') {
|
||||
moreBtnList.splice(delIndex, 1)
|
||||
}
|
||||
if(i !='-1'){
|
||||
orgTabelArrayIncludesData(i)
|
||||
moreBtnList.splice(i, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
function updateDefaultFlagFunc(isDefault){
|
||||
return reqLoad.updateById(API_URL_MCH_STORE_LIST, vdata.record.storeId, { defaultFlag: isDefault }).then(() => {
|
||||
emit.pageEmit(emit.ENAME_REF_STORE_LIST)
|
||||
infoBox.showSuccessToast("修改成功");
|
||||
})
|
||||
}
|
||||
function deleteFunc(){
|
||||
return reqLoad.delById(API_URL_MCH_STORE_LIST, vdata.record.storeId).then(() => {
|
||||
infoBox.showSuccessToast("删除成功");
|
||||
go.back(1, emit.ENAME_REF_STORE_LIST) // 返回页面 && 更新
|
||||
})
|
||||
}
|
||||
const closeAliStore = ()=>{
|
||||
reqLoad.delById(API_URI_DEV_RUYI,vdata.record.storeId).then(res=>{
|
||||
infoBox.showSuccessToast("解除成功");
|
||||
refData(vdata.record.storeId)
|
||||
})
|
||||
}
|
||||
const queryAliStoreStatus =(tooast) =>{
|
||||
$queryAliStore(vdata.record.storeId).then(({bizData})=>{
|
||||
if(bizData){
|
||||
vdata.record.alipayShopStatus = bizData.alipayShopStatus
|
||||
calcTabelList(bizData.alipayShopStatus)
|
||||
if(!tooast){
|
||||
infoBox.showToast('刷新蚂蚁店铺状态成功。')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
// 计算 蚂蚁店铺 状态 文字
|
||||
const calcAliStatusText =()=>{
|
||||
let text = ''
|
||||
switch (vdata.record.alipayShopStatus){
|
||||
case '0' :
|
||||
text = '未同步'
|
||||
break
|
||||
case '-1':
|
||||
text = '同步失败'
|
||||
break
|
||||
case '031':
|
||||
text = '已提交审核'
|
||||
break
|
||||
case '99':
|
||||
text = '已同步'
|
||||
break
|
||||
}
|
||||
return text
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.create-time {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 75rpx;
|
||||
padding: 50rpx 0;
|
||||
font-size: 30rpx;
|
||||
border-top: 1rpx solid rgba(255, 255, 255, 0.2);
|
||||
.time-title {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.time-info {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.store-info {
|
||||
padding: 0.1rpx;
|
||||
margin: 0 35rpx;
|
||||
background-color: #fff;
|
||||
border-radius: $J-b-r32;
|
||||
}
|
||||
.default-img {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
.store-wrapper {
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
</style>
|
||||
153
pageDevice/storePage/storeList.vue
Normal file
153
pageDevice/storePage/storeList.vue
Normal file
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<view class="page-wrapper">
|
||||
<!-- 搜索栏头部 -->
|
||||
<view class="search-title">
|
||||
<view class="search-input">
|
||||
<!-- <view class="search-input" @tap="go.toSearchPage('mchApplyment')"> -->
|
||||
<image src="/static/iconImg/icon-search.svg" mode="scaleToFill" class="search-img" />
|
||||
<input placeholder="搜索门店名称、编号" v-model="searchValue" placeholder-class="input-placeholder" @confirm="searchHandle" />
|
||||
<view class="close" v-if="searchValue" @click="clearHandle">
|
||||
<image src="/static/iconImg/icon-x.svg" mode="scaleToFill" class="del-img" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="search-state" @click="searchHandle">
|
||||
<div class="btn-wrap">
|
||||
<view class="s-wrap flex-center">搜索</view>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <JSearchTitle place="搜索门店名称、编号" @tap="ak.go.toSearchPage('mchStore')" /> -->
|
||||
<JeepayTableList ref="jeepayTableListRef" :reqTableDataFunc="reqTableDataFunc" :searchData="vdata.searchData">
|
||||
<template #tableBody="{ record }">
|
||||
<!-- <MchStoreRender :record="record" /> -->
|
||||
<MchStoreListRender :record="record" />
|
||||
</template>
|
||||
</JeepayTableList>
|
||||
<view v-if="ak.ent.has('ENT_MCH_STORE_ADD')" class="list-footer">
|
||||
<view class="button-wrapper">
|
||||
<Button @tap="createStore">创建门店</Button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { nextTick, reactive, ref } from 'vue';
|
||||
import { onReachBottom, onShow, onUnload } from '@dcloudio/uni-app';
|
||||
import ak from '@/commons/utils/ak.js';
|
||||
import { reqLoad, API_URL_MCH_STORE_LIST } from '@/http/apiManager.js';
|
||||
import MchStoreRender from '@/pages/list/render/MchStoreRender.vue';
|
||||
import MchStoreListRender from '@/pages/list/render/MchStoreListRender.vue';
|
||||
|
||||
const jeepayTableListRef = ref();
|
||||
const searchValue = ref('');
|
||||
const vdata = reactive({
|
||||
searchData: {
|
||||
mchApplyName: ''
|
||||
}
|
||||
});
|
||||
|
||||
// 清空搜索
|
||||
function clearHandle() {
|
||||
searchValue.value = '';
|
||||
vdata.searchData.mchApplyName = searchValue.value;
|
||||
jeepayTableListRef.value.refTable(true);
|
||||
}
|
||||
|
||||
// 搜索
|
||||
function searchHandle() {
|
||||
// reqTableDataFunc({ mchApplyName: searchValue });
|
||||
vdata.searchData.mchApplyName = searchValue.value;
|
||||
jeepayTableListRef.value.refTable(true);
|
||||
}
|
||||
|
||||
onReachBottom(() => {});
|
||||
|
||||
// 监听 更新事件
|
||||
onUnload(() => uni.$off(ak.emit.ENAME_REF_STORE_LIST));
|
||||
uni.$on(ak.emit.ENAME_REF_STORE_LIST, function (data) {
|
||||
jeepayTableListRef.value.refTable(true);
|
||||
});
|
||||
|
||||
// 请求
|
||||
function reqTableDataFunc(params) {
|
||||
return reqLoad.list(API_URL_MCH_STORE_LIST, params);
|
||||
}
|
||||
|
||||
const createStore = () => ak.go.to('PAGES_APP_STORE_EDIT');
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-wrapper {
|
||||
min-height: calc(100vh - 80rpx);
|
||||
// 搜索栏样式
|
||||
.search-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
background-color: #fff;
|
||||
|
||||
height: 110rpx;
|
||||
.search-input {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 70rpx;
|
||||
background-color: #efefef;
|
||||
border-radius: 12rpx;
|
||||
position: relative;
|
||||
padding-right: 70upx;
|
||||
.search-img {
|
||||
padding: 22rpx;
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
.close {
|
||||
$closeSize: 70upx;
|
||||
width: $closeSize;
|
||||
height: $closeSize;
|
||||
position: absolute;
|
||||
top: 50;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.del-img {
|
||||
$size: 34upx;
|
||||
width: $size;
|
||||
height: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search-state {
|
||||
$height: 40upx;
|
||||
width: 80upx;
|
||||
height: $height;
|
||||
margin-left: 30rpx;
|
||||
font-size: 30rpx;
|
||||
color: #222425;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.1s ease-in-out;
|
||||
&.active {
|
||||
width: 80upx;
|
||||
}
|
||||
.arrow {
|
||||
margin-left: 10rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.btn-wrap {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: all 0.1s ease-in-out;
|
||||
.s-wrap {
|
||||
height: $height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user