增加激活码列表页面,修复进件部分问题
This commit is contained in:
351
pagesShops/add/add.vue
Normal file
351
pagesShops/add/add.vue
Normal file
@@ -0,0 +1,351 @@
|
||||
<template>
|
||||
<view class="min-page u-font-28 color-333 bg-f7">
|
||||
<view class="container">
|
||||
<up-form labelPosition="top" :model="form" :rules="rules" ref="refForm" label-width="700rpx"
|
||||
errorType="toast" :label-style="labelStyle">
|
||||
<up-form-item prop="shopName" label="店铺名称" :required="returnIsRequired('shopName')">
|
||||
<up-input v-model="form.shopName" placeholder="请输入店铺名称"></up-input>
|
||||
</up-form-item>
|
||||
<up-form-item prop="shopType" label="店铺类型" :required="returnIsRequired('shopType')">
|
||||
<up-radio-group v-model="form.shopType" :disabled="isDisabledEdit()">
|
||||
<up-radio v-for="(value,key) in shopTypes" :label="value" :name="key"></up-radio>
|
||||
</up-radio-group>
|
||||
</up-form-item>
|
||||
<up-form-item prop="isHeadShop" label="是否为主店" :required="returnIsRequired('isHeadShop')"
|
||||
v-if="form.shopType != 'only'">
|
||||
<up-switch v-model="form.isHeadShop" :size="20" :disabled="isDisabledEdit()" :inactive-value="0"
|
||||
:active-value="1"></up-switch>
|
||||
|
||||
</up-form-item>
|
||||
<template v-if="form.isHeadShop == 0 && form.shopType != 'only'">
|
||||
<up-form-item label="选择主店" prop="mainId" :required="returnIsRequired('mainId')">
|
||||
<headShopSelect v-model="form.mainId" :disabled="isDisabledEdit('mainId')"></headShopSelect>
|
||||
</up-form-item>
|
||||
</template>
|
||||
|
||||
<up-form-item prop="chainName" label="连锁店扩展店名" :required="returnIsRequired('chainName')">
|
||||
<up-input v-model="form.chainName" placeholder="连锁店扩展店名"></up-input>
|
||||
</up-form-item>
|
||||
<up-form-item prop="logo" label="门店logo" :required="returnIsRequired('logo')">
|
||||
<my-upload-img v-model="form.logo" :size="200"></my-upload-img>
|
||||
</up-form-item>
|
||||
<up-form-item prop="frontImg" label="门店照片" :required="returnIsRequired('frontImg')">
|
||||
<my-upload-img v-model="form.frontImg" :size="200"></my-upload-img>
|
||||
</up-form-item>
|
||||
<up-form-item prop="registerType" label="经营模式" :required="returnIsRequired('registerType')">
|
||||
<up-radio-group v-model="form.registerType">
|
||||
<up-radio v-for="(value,key) in registerTypes" :label="value" :name="key"></up-radio>
|
||||
</up-radio-group>
|
||||
<up-alert description="请谨慎修改" type="warning" :show-icon="true"></up-alert>
|
||||
</up-form-item>
|
||||
<up-form-item prop="tubeType" label="管理方式" :required="returnIsRequired('tubeType')"
|
||||
v-if="form.shopType != 'only'">
|
||||
<up-radio-group v-model="form.tubeType">
|
||||
<up-radio v-for="(value,key) in tubeTypes" :label="value" :name="key*1"></up-radio>
|
||||
</up-radio-group>
|
||||
<up-alert description="请谨慎修改" type="warning" :show-icon="true"></up-alert>
|
||||
</up-form-item>
|
||||
<up-form-item prop="profiles" label="试用/正式" :required="returnIsRequired('profiles')">
|
||||
<up-radio-group v-model="form.profiles">
|
||||
<up-radio v-for="(value,key) in profiless" :label="value" :name="key"></up-radio>
|
||||
</up-radio-group>
|
||||
</up-form-item>
|
||||
<up-form-item prop="activateCode" label="激活码" :required="returnIsRequired('activateCode')">
|
||||
<view>
|
||||
<up-input v-model="form.activateCode" placeholder="激活码"></up-input>
|
||||
<view class="u-font-24 u-m-t-14 color-666">
|
||||
注：输入有效激活码表示添加的同时直接激活该店铺。
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</up-form-item>
|
||||
|
||||
<up-form-item prop="accountName" label="登录账号" :required="returnIsRequired('accountName')">
|
||||
<up-input v-model="form.accountName" placeholder="登录账号"></up-input>
|
||||
</up-form-item>
|
||||
|
||||
<up-form-item prop="accountPwd" label="登录密码" :required="returnIsRequired('accountPwd')">
|
||||
<up-input v-model="form.accountPwd" placeholder="登录密码"></up-input>
|
||||
</up-form-item>
|
||||
|
||||
<up-form-item prop="phone" label="联系电话" :required="returnIsRequired('phone')">
|
||||
<up-input v-model="form.phone" placeholder="联系电话"></up-input>
|
||||
</up-form-item>
|
||||
|
||||
<up-form-item prop="supportDeviceNumber" label="设备数量"
|
||||
:required="returnIsRequired('supportDeviceNumber')">
|
||||
<up-number-box v-model="form.supportDeviceNumber" input-width="100"></up-number-box>
|
||||
</up-form-item>
|
||||
|
||||
<up-form-item prop="districts" label="店铺地址" :required="returnIsRequired('districts')">
|
||||
<view class="u-relative w-full">
|
||||
<up-input :modelValue="address" placeholder="店铺地址"></up-input>
|
||||
<view class="u-absolute position-all" style="z-index: 10;" @click="showAddressSelect=true">
|
||||
</view>
|
||||
</view>
|
||||
</up-form-item>
|
||||
<up-form-item prop="lng" label="店铺经度" :required="returnIsRequired('lng')">
|
||||
<view class="u-flex u-col-center gap-20">
|
||||
<up-input v-model="form.lng" placeholder="经度" disabled></up-input>
|
||||
<up-input v-model="form.lat" placeholder="维度" disabled></up-input>
|
||||
<my-button @click="chooseLng">选择坐标</my-button>
|
||||
</view>
|
||||
</up-form-item>
|
||||
|
||||
<up-form-item prop="address" label="店铺详细地址" :required="returnIsRequired('address')">
|
||||
<up-input v-model="form.address" placeholder="店铺详细地址"></up-input>
|
||||
</up-form-item>
|
||||
<up-form-item prop="detail" label="店铺简介" :required="returnIsRequired('detail')">
|
||||
<up-textarea v-model="form.detail" placeholder="店铺简介"></up-textarea>
|
||||
</up-form-item>
|
||||
|
||||
<up-form-item prop="status" label="状态" :required="returnIsRequired('status')">
|
||||
<up-radio-group v-model="form.status">
|
||||
<up-radio v-for="(value,key) in statuss" :label="value" :name="key*1"></up-radio>
|
||||
</up-radio-group>
|
||||
</up-form-item>
|
||||
|
||||
</up-form>
|
||||
</view>
|
||||
|
||||
<my-address-select v-model="showAddressSelect" @city-change="cityChange"></my-address-select>
|
||||
<my-bottom-btn-group @cancel="uni.navigateBack()" @save="submit"></my-bottom-btn-group>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app'
|
||||
import {
|
||||
computed,
|
||||
reactive,
|
||||
ref,
|
||||
watch,
|
||||
watchEffect
|
||||
} from 'vue';
|
||||
import {
|
||||
statuss,
|
||||
shopTypes,
|
||||
profiless,
|
||||
registerTypes,
|
||||
tubeTypes
|
||||
} from '../data.js'
|
||||
import headShopSelect from './components/head-shop-select.vue'
|
||||
import * as shopInfoApi from '@/http/api/account/shopInfo.js'
|
||||
|
||||
function chooseLng() {
|
||||
uni.chooseLocation({
|
||||
keyword: address.value,
|
||||
success(res) {
|
||||
console.log('res', res);
|
||||
form.lat = '' + res.latitude
|
||||
form.lng = '' + res.longitude
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function cityChange(e) {
|
||||
console.log(e);
|
||||
form.provinces = e.province.regionName
|
||||
form.cities = e.city.regionName
|
||||
form.districts = e.area.regionName
|
||||
}
|
||||
|
||||
|
||||
|
||||
const showAddressSelect = ref(false)
|
||||
|
||||
const labelStyle = {
|
||||
fontWeight: "700"
|
||||
}
|
||||
const refForm = ref(null)
|
||||
const form = reactive({
|
||||
id: null,
|
||||
shopName: "",
|
||||
mainId: "",
|
||||
shopType: "only",
|
||||
tubeType: 0,
|
||||
registerType: "before",
|
||||
profiles: "release",
|
||||
activateCode: "",
|
||||
accountName: "",
|
||||
accountPwd: "",
|
||||
phone: "",
|
||||
supportDeviceNumber: 1,
|
||||
lat: "",
|
||||
lng: "",
|
||||
address: "",
|
||||
detail: "",
|
||||
status: 1,
|
||||
logo: "",
|
||||
frontImg: "",
|
||||
provinces: "",
|
||||
cities: "",
|
||||
districts: "",
|
||||
chainName: "",
|
||||
isHeadShop: 0,
|
||||
})
|
||||
watch(() => form.isHeadShop, (newval) => {
|
||||
form.mainId = ''
|
||||
})
|
||||
|
||||
function isDisabledEdit(key) {
|
||||
if(options.type==='addBranch'){
|
||||
return true
|
||||
}
|
||||
if (form.id) {
|
||||
return true
|
||||
} else {
|
||||
false
|
||||
}
|
||||
}
|
||||
const address = computed(() => {
|
||||
if (form.provinces && form.cities && form.districts) {
|
||||
return form.provinces + '-' + form.cities + '-' + form.districts
|
||||
}
|
||||
})
|
||||
const rules = reactive({
|
||||
'shopName': {
|
||||
type: 'string',
|
||||
max: 30,
|
||||
required: true,
|
||||
message: '请输入店铺名称',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
'logo': {
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请上传门店logo',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
accountName: {
|
||||
max: 30,
|
||||
required: true,
|
||||
message: '请输入登录账号',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
phone: {
|
||||
max: 30,
|
||||
required: true,
|
||||
message: '请输入联系电话',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
districts: {
|
||||
max: 30,
|
||||
required: true,
|
||||
message: '请选择店铺地址',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
lng: {
|
||||
max: 30,
|
||||
required: true,
|
||||
message: '请选择店铺坐标',
|
||||
trigger: ['blur', 'change'],
|
||||
// 自定义验证函数，见上说明
|
||||
// validator: (rule, value, callback) => {
|
||||
// return !form.lng?false:true;
|
||||
// },
|
||||
},
|
||||
tubeType: {
|
||||
type: 'number',
|
||||
max: 30,
|
||||
required: true,
|
||||
message: '请选择管理方式',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
mainId: {
|
||||
max: 30,
|
||||
required: true,
|
||||
message: '请选择主店铺',
|
||||
trigger: ['blur', 'change'],
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
function returnIsRequired(key) {
|
||||
if (rules[key] && rules[key].required) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
function submit() {
|
||||
refForm.value.validate().then(valid => {
|
||||
console.log('valid', valid);
|
||||
if (valid) {
|
||||
// uni.$u.toast('校验通过')
|
||||
save()
|
||||
} else {}
|
||||
}).catch(() => {
|
||||
// 处理验证错误
|
||||
});
|
||||
}
|
||||
async function save() {
|
||||
const res = (form.id) ? await shopInfoApi.editShop(form) : await shopInfoApi.addShop(form)
|
||||
if (res) {
|
||||
uni.$u.toast(form.id ? '修改成功' : '添加成功')
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
const options=reactive({})
|
||||
onLoad(async (opt) => {
|
||||
Object.assign(options,opt)
|
||||
if(opt.type=='addBranch'){
|
||||
// 添加分店
|
||||
const res = await await shopInfoApi.getShopDetail({
|
||||
id: opt.id
|
||||
})
|
||||
form.isHeadShop=0
|
||||
form.mainId=res.id
|
||||
form.shopType=res.shopType
|
||||
uni.setNavigationBarTitle({
|
||||
title: '添加店铺'
|
||||
})
|
||||
return
|
||||
}else{
|
||||
if (opt.id) {
|
||||
rules.accountName.required = false
|
||||
const res = await await shopInfoApi.getShopDetail({
|
||||
id: opt.id
|
||||
})
|
||||
for (let key in form) {
|
||||
form[key] = res[key]
|
||||
}
|
||||
uni.setNavigationBarTitle({
|
||||
title: '编辑店铺'
|
||||
})
|
||||
} else {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '添加店铺'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
watchEffect(()=>{
|
||||
console.log(form.shopType)
|
||||
if(form.shopType!='only'&&!form.isHeadShop){
|
||||
rules.mainId.required=true
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.min-page {
|
||||
padding: 32rpx 28rpx;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: #fff;
|
||||
padding: 12rpx 28rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
:deep(.input-placeholder) {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
73
pagesShops/add/components/head-shop-select.vue
Normal file
73
pagesShops/add/components/head-shop-select.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<view class="w-full">
|
||||
<view class="box u-flex u-row-between" @click="showPop" :class="{disabled:disabled}">
|
||||
<text class="color-999 " v-if="!modelValue">请选择</text>
|
||||
<text v-else class="u-m-r-30">{{shopName}}</text>
|
||||
<up-icon name="arrow-down"></up-icon>
|
||||
</view>
|
||||
|
||||
<popupHeadShop v-model="show" @confirm="confirm"></popupHeadShop>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
computed,
|
||||
onMounted,
|
||||
ref
|
||||
} from 'vue';
|
||||
import popupHeadShop from './popup-head-shop.vue'
|
||||
import * as shopInfoApi from '@/http/api/account/shopInfo.js'
|
||||
|
||||
const props = defineProps({
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
const show = ref(false)
|
||||
|
||||
function showPop() {
|
||||
if (props.disabled) {
|
||||
return
|
||||
}
|
||||
show.value = true
|
||||
}
|
||||
const modelValue = defineModel()
|
||||
|
||||
function confirm(e) {
|
||||
console.log(e);
|
||||
modelValue.value = e.shopId
|
||||
selShopInfo.value = e
|
||||
}
|
||||
const selShopInfo = ref(null)
|
||||
const shopName = computed(() => {
|
||||
if (selShopInfo.value) {
|
||||
return selShopInfo.value.shopName
|
||||
}
|
||||
return ''
|
||||
})
|
||||
onMounted(async () => {
|
||||
if (modelValue.value) {
|
||||
const res = await shopInfoApi.getShopDetail({
|
||||
id: modelValue.value
|
||||
})
|
||||
if (res) {
|
||||
selShopInfo.value = res
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
padding: 9px 9px;
|
||||
border: 1px solid #dadbde;
|
||||
display: flex;
|
||||
border-radius: 4px;
|
||||
|
||||
&.disabled {
|
||||
background-color: rgb(245, 247, 250);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
209
pagesShops/add/components/popup-head-shop.vue
Normal file
209
pagesShops/add/components/popup-head-shop.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
<up-popup :show="show" placement="bottom" round="18rpx" closeOnClickOverlay @close="close">
|
||||
<view class="u-p-30">
|
||||
<view class="font-bold color-333 u-font-32">选择门店</view>
|
||||
<view class="u-m-t-24">
|
||||
<up-search v-model="query.shopName" @search="search" @clear="search" @custom="search"></up-search>
|
||||
</view>
|
||||
<scroll-view @scrolltolower="scrolltolower" scroll-with-animation :scroll-into-view="selShopId"
|
||||
class="scroll-view u-m-t-30" scroll-y="true" style="max-height :60vh;">
|
||||
<view class="u-m-b-10 u-flex item" v-for="item in list" :key="item.shopId" @click="itemClick(item)"
|
||||
:id="'shop_'+item.shopId" :class="{active:selShop==item.shopId}">
|
||||
<view class="checkbox">
|
||||
<up-icon name="checkbox-mark" color="#fff"></up-icon>
|
||||
</view>
|
||||
<view class="u-flex-1">{{item.shopName}}</view>
|
||||
</view>
|
||||
<template v-if="query.shopName!==''">
|
||||
<up-empty v-if="list.length==0" text="未搜索到相关店铺"></up-empty>
|
||||
<up-loadmore v-else :status="isEnd?'nomor':'loading'"></up-loadmore>
|
||||
</template>
|
||||
<template v-else>
|
||||
<up-loadmore :status="isEnd?'nomor':'loading'"></up-loadmore>
|
||||
</template>
|
||||
</scroll-view>
|
||||
<view class="u-flex gap-20 u-m-t-30">
|
||||
<view class="u-flex-1">
|
||||
<my-button type="default" @click="close">取消</my-button>
|
||||
</view>
|
||||
<view class="u-flex-1">
|
||||
<my-button type="primary" @click="submit">确定</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
computed,
|
||||
onMounted,
|
||||
reactive,
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
import {
|
||||
adminShopList
|
||||
} from '@/http/api/shop.js';
|
||||
|
||||
const customStyle = ref({
|
||||
marginRight: '20px'
|
||||
});
|
||||
|
||||
const show = defineModel(false)
|
||||
let selShop = defineModel('selShop', {
|
||||
default: '',
|
||||
});
|
||||
watch(() => show.value, (newval) => {
|
||||
if (newval) {
|
||||
init()
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const selShopId = ref('')
|
||||
|
||||
function returnLabel() {
|
||||
const findShop = list.value.find(v => v.shopId == selShop.value)
|
||||
return findShop ? findShop.shopName : ''
|
||||
}
|
||||
|
||||
function itemClick(shop) {
|
||||
selShop.value = shop.shopId
|
||||
}
|
||||
|
||||
function returnShopName(shopId) {
|
||||
const item = list.value.find((v) => v.shopId == shopId);
|
||||
return item?.shopName || '';
|
||||
}
|
||||
|
||||
function close() {
|
||||
show.value = false;
|
||||
}
|
||||
|
||||
const emits = defineEmits(['confirm'])
|
||||
|
||||
function submit() {
|
||||
show.value = false;
|
||||
if (!selShop.value) {
|
||||
return uni.showToast({
|
||||
title: '请选择门店',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
const findShop = list.value.find(v => v.shopId == selShop.value)
|
||||
emits('confirm', findShop)
|
||||
}
|
||||
|
||||
|
||||
const list = ref([]);
|
||||
|
||||
function openPopup() {
|
||||
selShopId.value = 'shop_' + selShop.value
|
||||
show.value = true;
|
||||
|
||||
}
|
||||
|
||||
const query = reactive({
|
||||
page: 1,
|
||||
size: 10,
|
||||
shopName: '',
|
||||
type: 'only',
|
||||
isHeadShop: 1
|
||||
})
|
||||
const isEnd = ref(false)
|
||||
|
||||
function scrolltolower() {
|
||||
if (!isEnd.value) {
|
||||
query.page++
|
||||
init()
|
||||
}
|
||||
}
|
||||
|
||||
function search() {
|
||||
selShop.value = '';
|
||||
query.page = 1;
|
||||
isEnd.value = false
|
||||
init()
|
||||
}
|
||||
async function init() {
|
||||
const res = await adminShopList(query);
|
||||
if (res) {
|
||||
const arr = res.records.map((item) => ({
|
||||
shopId: item.id,
|
||||
shopName: item.shopName,
|
||||
}));
|
||||
isEnd.value = query.page >= res.totalPage * 1
|
||||
if (query.page == 1) {
|
||||
list.value = arr
|
||||
} else {
|
||||
list.value.push(...arr)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.box {
|
||||
border-radius: 8upx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: top;
|
||||
flex-wrap: wrap;
|
||||
padding: 10rpx 24rpx;
|
||||
border: 2rpx solid #e5e5e5;
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 24rpx;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.shop-item {
|
||||
padding: 4rpx 8rpx 4rpx 16rpx;
|
||||
border-radius: 4rpx;
|
||||
border: 2rpx solid #f0f0f0;
|
||||
background-color: #f5f5f5;
|
||||
margin-bottom: 16rpx;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.scroll-view {
|
||||
.item {
|
||||
border: 1px solid #eee;
|
||||
padding: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
&.active {
|
||||
border-color: $my-main-color;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
margin-right: 10rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 6rpx;
|
||||
border: 1px solid #999;
|
||||
|
||||
}
|
||||
|
||||
.item {
|
||||
&.active {
|
||||
.checkbox {
|
||||
background-color: $my-main-color;
|
||||
border-color: $my-main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
302
pagesShops/components/mcc-category.vue
Normal file
302
pagesShops/components/mcc-category.vue
Normal file
@@ -0,0 +1,302 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
<view class="box" @click.stop="openPopup">
|
||||
<text class="u-font-28 color-999 u-p-r-16" v-if="selArr[0]===null||selArr[1]===null">请选择</text>
|
||||
<text class="u-font-28 color-333 u-p-r-16" v-else>{{returnLabel()}}</text>
|
||||
<view class="icon">
|
||||
<up-icon name="arrow-down" size="14" color="#999"></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
<up-popup :show="show" placement="bottom" round="18rpx" closeOnClickOverlay @close="close">
|
||||
<view class="u-p-30">
|
||||
<view class="font-bold color-333 u-font-32">选择行业类目</view>
|
||||
<view class="u-m-t-24">
|
||||
<up-search v-model="query.bankName" @search="search" @change="bankNameChange" @custom="search"
|
||||
@clear="search"></up-search>
|
||||
</view>
|
||||
<view class="u-flex u-m-t-30 gap-20 u-col-top">
|
||||
<view class="u-flex-1">
|
||||
<view class="u-p-b-24 font-bold text-center">一级类目</view>
|
||||
<scroll-view @scrolltolower="scrolltolower" scroll-with-animation :scroll-into-view="oneSelId"
|
||||
class="scroll-view " scroll-y="true" style="max-height :60vh;">
|
||||
<view class="u-m-b-10 u-flex item" v-for="(item,index) in list" :key="item.id"
|
||||
@click="oneCategoryClick(index)" :id="'cateOne_'+index"
|
||||
:class="{active:selArr[0]===index}">
|
||||
<view class="checkbox">
|
||||
<up-icon name="checkbox-mark" color="#fff"></up-icon>
|
||||
</view>
|
||||
<view class="u-flex-1">{{item.firstCategory}}</view>
|
||||
</view>
|
||||
<up-empty v-if="list.length==0" text="暂无相关分类"></up-empty>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="u-flex-1">
|
||||
<view class="u-p-b-24 font-bold text-center">二级类目</view>
|
||||
<scroll-view @scrolltolower="scrolltolower" scroll-with-animation :scroll-into-view="twoSelId"
|
||||
class="scroll-view " scroll-y="true" style="max-height :60vh;">
|
||||
<view class="u-m-b-10 u-flex item" v-for="(item,index) in sendList" :key="item.id"
|
||||
@click="selArr[1]=index" :id="'cateTwo_'+index" :class="{active:selArr[1]==index}">
|
||||
<view class="checkbox">
|
||||
<up-icon name="checkbox-mark" color="#fff"></up-icon>
|
||||
</view>
|
||||
<view class="u-flex-1">{{item.secondCategory}}</view>
|
||||
</view>
|
||||
<up-empty v-if="list.length==0" text="暂无相关分类"></up-empty>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<view class="u-flex gap-20 u-m-t-30">
|
||||
<view class="u-flex-1">
|
||||
<my-button type="default" @click="close">取消</my-button>
|
||||
</view>
|
||||
<view class="u-flex-1">
|
||||
<my-button type="primary" @click="submit">确定</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
computed,
|
||||
nextTick,
|
||||
onMounted,
|
||||
reactive,
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
import {
|
||||
mccCategory
|
||||
} from '@/http/api/system/common.js';
|
||||
const customStyle = ref({
|
||||
marginRight: '20px'
|
||||
});
|
||||
|
||||
const show = ref(false);
|
||||
const modelValue = defineModel();
|
||||
|
||||
|
||||
|
||||
|
||||
const oneSelId = ref('')
|
||||
const twoSelId = ref('')
|
||||
|
||||
const allCategoryArr = computed(() => {
|
||||
return list.value.reduce((prve, cur) => {
|
||||
prve.push(...cur.child)
|
||||
return prve
|
||||
}, [])
|
||||
})
|
||||
|
||||
function returnLabel() {
|
||||
const [index1, index2] = selArr.value
|
||||
console.log('selArr', selArr.value);
|
||||
if (index1 !== null && index2 !== null) {
|
||||
return list.value[index1].firstCategory + '/' + list.value[index1].child[index2].secondCategory
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
function oneCategoryClick(index) {
|
||||
selArr.value[0] = index
|
||||
selArr.value[1] = null
|
||||
}
|
||||
|
||||
const selItem = ref(null)
|
||||
|
||||
function itemClick(bank) {
|
||||
selItem.value = bank;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function close() {
|
||||
show.value = false;
|
||||
}
|
||||
|
||||
function submit() {
|
||||
if (selArr.value[0] === null || selArr.value[1] === null) {
|
||||
return uni.showToast({
|
||||
title: '请选择行业类目',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
const [oneIndex, twoIndex] = selArr.value
|
||||
const item = list.value[oneIndex].child[twoIndex]
|
||||
modelValue.value = item.firstCategoryCode + '_' + item.secondCategoryCode
|
||||
show.value = false;
|
||||
|
||||
}
|
||||
|
||||
function search() {
|
||||
init()
|
||||
}
|
||||
|
||||
const list = ref([]);
|
||||
|
||||
|
||||
function openPopup() {
|
||||
|
||||
show.value = true;
|
||||
|
||||
}
|
||||
|
||||
// --------------- 核心新增：节流函数实现 ---------------
|
||||
/**
|
||||
* 节流函数：限制函数在指定时间内只触发一次
|
||||
* @param {Function} fn - 要节流的函数
|
||||
* @param {number} delay - 节流延迟时间（毫秒）
|
||||
* @returns {Function} 节流后的函数
|
||||
*/
|
||||
function throttle(fn, delay = 300) {
|
||||
let timer = null; // 定时器标识
|
||||
return function(...args) {
|
||||
// 如果已有定时器，直接返回（未到触发时间）
|
||||
if (timer) return;
|
||||
// 执行函数并设置新定时器
|
||||
fn.apply(this, args);
|
||||
timer = setTimeout(() => {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}, delay);
|
||||
};
|
||||
}
|
||||
|
||||
// --------------- 核心修改：创建节流后的search方法 ---------------
|
||||
// 300ms内只触发一次search，可根据需求调整delay值（如500ms）
|
||||
const throttledSearch = throttle(search, 300);
|
||||
|
||||
// --------------- 改造bankNameChange：调用节流后的搜索 ---------------
|
||||
function bankNameChange() {
|
||||
// 输入变化时，调用节流后的搜索方法
|
||||
throttledSearch();
|
||||
}
|
||||
|
||||
const query = reactive({
|
||||
bankName: ''
|
||||
})
|
||||
const isEnd = ref(false)
|
||||
|
||||
function scrolltolower() {
|
||||
|
||||
}
|
||||
|
||||
|
||||
async function init() {
|
||||
const res = await mccCategory(query);
|
||||
if (res) {
|
||||
list.value = res.map(v => {
|
||||
return {
|
||||
...v,
|
||||
firstCategoryCode: v.child[0].firstCategoryCode
|
||||
}
|
||||
})
|
||||
startWatch()
|
||||
}
|
||||
}
|
||||
|
||||
const selArr = ref([null, null])
|
||||
const sendList = computed(() => {
|
||||
if (selArr.value[0] !== null) {
|
||||
return list.value[selArr.value[0]].child
|
||||
}
|
||||
})
|
||||
|
||||
function startWatch() {
|
||||
watch(() => modelValue.value, (newval) => {
|
||||
if (newval) {
|
||||
const arr = modelValue.value.split('_')
|
||||
const [oneCode, twoCode] = arr
|
||||
console.log('oneCode',oneCode);
|
||||
console.log('twoCode',twoCode);
|
||||
const oneIndex = list.value.findIndex(v => v.firstCategoryCode == oneCode)
|
||||
if (oneIndex != -1) {
|
||||
selArr.value[0] = oneIndex
|
||||
oneSelId.value = 'cateOne_' + oneIndex
|
||||
const twoIndex = list.value[oneIndex].child.findIndex(v => v.secondCategoryCode==twoCode)
|
||||
if (twoIndex != -1) {
|
||||
selArr.value[1] = twoIndex
|
||||
twoSelId.value = 'cateTwo_' + twoIndex
|
||||
}
|
||||
}
|
||||
console.log('watch selArr',selArr.value);
|
||||
} else {
|
||||
selArr.value = [null, null]
|
||||
}
|
||||
}, {
|
||||
immediate: true
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
onMounted(init);
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.box {
|
||||
border-radius: 8upx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: top;
|
||||
flex-wrap: wrap;
|
||||
padding: 20rpx 24rpx;
|
||||
border: 2rpx solid #e5e5e5;
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 24rpx;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.shop-item {
|
||||
padding: 4rpx 8rpx 4rpx 16rpx;
|
||||
border-radius: 4rpx;
|
||||
border: 2rpx solid #f0f0f0;
|
||||
background-color: #f5f5f5;
|
||||
margin-bottom: 16rpx;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.scroll-view {
|
||||
.item {
|
||||
border: 1px solid #eee;
|
||||
padding: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
&.active {
|
||||
border-color: $my-main-color;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
margin-right: 10rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 6rpx;
|
||||
border: 1px solid #999;
|
||||
|
||||
}
|
||||
|
||||
.item {
|
||||
&.active {
|
||||
.checkbox {
|
||||
background-color: $my-main-color;
|
||||
border-color: $my-main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
203
pagesShops/components/shop-select.vue
Normal file
203
pagesShops/components/shop-select.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
<up-popup :show="show" placement="bottom" round="18rpx" closeOnClickOverlay @close="close">
|
||||
<view class="u-p-30">
|
||||
<view class="font-bold color-333 u-font-32">选择门店</view>
|
||||
<view class="u-m-t-24">
|
||||
<up-search v-model="query.shopName" @search="search" @clear="search" @custom="search"></up-search>
|
||||
</view>
|
||||
<scroll-view @scrolltolower="scrolltolower" scroll-with-animation :scroll-into-view="selShopId"
|
||||
class="scroll-view u-m-t-30" scroll-y="true" style="max-height :60vh;">
|
||||
<view class="u-m-b-10 u-flex item" v-for="item in list" :key="item.shopId" @click="itemClick(item)"
|
||||
:id="'shop_'+item.shopId" :class="{active:selShop==item.shopId}">
|
||||
<view class="checkbox">
|
||||
<up-icon name="checkbox-mark" color="#fff"></up-icon>
|
||||
</view>
|
||||
<view class="u-flex-1">{{item.shopName}}</view>
|
||||
</view>
|
||||
<template v-if="query.shopName!==''">
|
||||
<up-empty v-if="list.length==0" text="未搜索到相关店铺"></up-empty>
|
||||
<up-loadmore v-else :status="isEnd?'nomor':'loading'"></up-loadmore>
|
||||
</template>
|
||||
<template v-else>
|
||||
<up-loadmore :status="isEnd?'nomor':'loading'"></up-loadmore>
|
||||
</template>
|
||||
</scroll-view>
|
||||
<view class="u-flex gap-20 u-m-t-30">
|
||||
<view class="u-flex-1">
|
||||
<my-button type="default" @click="close">取消</my-button>
|
||||
</view>
|
||||
<view class="u-flex-1">
|
||||
<my-button type="primary" @click="submit">确定</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
computed,
|
||||
onMounted,
|
||||
reactive,
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
import {
|
||||
adminShopList
|
||||
} from '@/http/api/shop.js';
|
||||
|
||||
const customStyle = ref({
|
||||
marginRight: '20px'
|
||||
});
|
||||
|
||||
const show = defineModel(false)
|
||||
let selShop = defineModel('selShop', {
|
||||
default: '',
|
||||
});
|
||||
|
||||
|
||||
|
||||
const selShopId = ref('')
|
||||
|
||||
function returnLabel() {
|
||||
const findShop = list.value.find(v => v.shopId == selShop.value)
|
||||
return findShop ? findShop.shopName : ''
|
||||
}
|
||||
|
||||
function itemClick(shop) {
|
||||
selShop.value = shop.shopId
|
||||
}
|
||||
|
||||
function returnShopName(shopId) {
|
||||
const item = list.value.find((v) => v.shopId == shopId);
|
||||
return item?.shopName || '';
|
||||
}
|
||||
|
||||
function close() {
|
||||
show.value = false;
|
||||
}
|
||||
|
||||
const emits=defineEmits(['confirm'])
|
||||
function submit() {
|
||||
show.value = false;
|
||||
if(!selShop.value){
|
||||
return uni.showToast({
|
||||
title:'请选择门店',
|
||||
icon:'none'
|
||||
})
|
||||
}
|
||||
const findShop = list.value.find(v => v.shopId == selShop.value)
|
||||
emits('confirm',findShop)
|
||||
}
|
||||
|
||||
|
||||
const list = ref([]);
|
||||
|
||||
function openPopup() {
|
||||
selShopId.value = 'shop_' + selShop.value
|
||||
show.value = true;
|
||||
|
||||
}
|
||||
|
||||
const query = reactive({
|
||||
page: 1,
|
||||
size: 10,
|
||||
shopName: '',
|
||||
})
|
||||
const isEnd = ref(false)
|
||||
|
||||
function scrolltolower() {
|
||||
if (!isEnd.value) {
|
||||
query.page++
|
||||
init()
|
||||
}
|
||||
}
|
||||
|
||||
function search() {
|
||||
selShop.value = '';
|
||||
query.page = 1;
|
||||
isEnd.value = false
|
||||
init()
|
||||
}
|
||||
async function init() {
|
||||
const res = await adminShopList(query);
|
||||
if (res) {
|
||||
const arr = res.records.map((item) => ({
|
||||
shopId: item.id,
|
||||
shopName: item.shopName,
|
||||
}));
|
||||
isEnd.value = query.page >= res.totalPage * 1
|
||||
if (query.page == 1) {
|
||||
list.value = arr
|
||||
} else {
|
||||
list.value.push(...arr)
|
||||
}
|
||||
}
|
||||
}
|
||||
onMounted(init);
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.box {
|
||||
border-radius: 8upx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: top;
|
||||
flex-wrap: wrap;
|
||||
padding: 10rpx 24rpx;
|
||||
border: 2rpx solid #e5e5e5;
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 24rpx;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.shop-item {
|
||||
padding: 4rpx 8rpx 4rpx 16rpx;
|
||||
border-radius: 4rpx;
|
||||
border: 2rpx solid #f0f0f0;
|
||||
background-color: #f5f5f5;
|
||||
margin-bottom: 16rpx;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.scroll-view {
|
||||
.item {
|
||||
border: 1px solid #eee;
|
||||
padding: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
&.active {
|
||||
border-color: $my-main-color;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
margin-right: 10rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 6rpx;
|
||||
border: 1px solid #999;
|
||||
|
||||
}
|
||||
|
||||
.item {
|
||||
&.active {
|
||||
.checkbox {
|
||||
background-color: $my-main-color;
|
||||
border-color: $my-main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
257
pagesShops/components/u-city-select.vue
Normal file
257
pagesShops/components/u-city-select.vue
Normal file
@@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<up-popup :show="modelValue" mode="bottom" :popup="false"
|
||||
:mask="true" :closeable="true" :safe-area-inset-bottom="true"
|
||||
close-icon-color="#ffffff" :z-index="uZIndex"
|
||||
:maskCloseAble="maskCloseAble" @close="close">
|
||||
<up-tabs v-if="modelValue" :list="genTabsList"
|
||||
:scrollable="true" :current="tabsIndex" @change="tabsChange" ref="tabs"></up-tabs>
|
||||
<view class="area-box">
|
||||
<view class="u-flex" :class="{ 'change':isChange }">
|
||||
<view class="area-item">
|
||||
<view class="u-padding-10 u-bg-gray" style="height: 100%;">
|
||||
<scroll-view :scroll-y="true" style="height: 100%">
|
||||
<up-cell-group>
|
||||
<up-cell v-for="(item,index) in provinces"
|
||||
:title="item.regionName" :arrow="false"
|
||||
:index="index" :key="index"
|
||||
@click="provinceChange(index)">
|
||||
<template v-slot:right-icon>
|
||||
<up-icon v-if="isChooseP&&province===index"
|
||||
size="17" name="checkbox-mark"></up-icon>
|
||||
</template>
|
||||
</up-cell>
|
||||
</up-cell-group>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="area-item">
|
||||
<view class="u-padding-10 u-bg-gray" style="height: 100%;">
|
||||
<scroll-view :scroll-y="true" style="height: 100%">
|
||||
<up-cell-group v-if="isChooseP">
|
||||
<up-cell v-for="(item,index) in citys"
|
||||
:title="item.regionName" :arrow="false"
|
||||
:index="index" :key="index"
|
||||
@click="cityChange(index)">
|
||||
<template v-slot:right-icon>
|
||||
<up-icon v-if="isChooseC&&city===index"
|
||||
size="17" name="checkbox-mark"></up-icon>
|
||||
</template>
|
||||
</up-cell>
|
||||
</up-cell-group>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="area-item">
|
||||
<view class="u-padding-10 u-bg-gray" style="height: 100%;">
|
||||
<scroll-view :scroll-y="true" style="height: 100%">
|
||||
<up-cell-group v-if="isChooseC">
|
||||
<up-cell v-for="(item,index) in areas"
|
||||
:title="item.regionName" :arrow="false"
|
||||
:index="index" :key="index"
|
||||
@click="areaChange(index)">
|
||||
<template v-slot:right-icon>
|
||||
<up-icon v-if="isChooseA&&area===index"
|
||||
size="17" name="checkbox-mark"></up-icon>
|
||||
</template>
|
||||
</up-cell>
|
||||
</up-cell-group>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {region} from '@/http/api/system/region.js'
|
||||
import provinces from "../common/province.js";
|
||||
import citys from "../common/city.js";
|
||||
import areas from "../common/area.js";
|
||||
/**
|
||||
* city-select 省市区级联选择器
|
||||
* @property {String Number} z-index 弹出时的z-index值（默认1075）
|
||||
* @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true）
|
||||
* @property {String} default-region 默认选中的地区，中文形式
|
||||
* @property {String} default-code 默认选中的地区，编号形式
|
||||
*/
|
||||
export default {
|
||||
name: 'u-city-select',
|
||||
props: {
|
||||
// 通过双向绑定控制组件的弹出与收起
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 默认显示的地区，可传类似["河北省", "秦皇岛市", "北戴河区"]
|
||||
defaultRegion: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 默认显示地区的编码，defaultRegion和areaCode同时存在，areaCode优先，可传类似["13", "1303", "130304"]
|
||||
areaCode: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 是否允许通过点击遮罩关闭Picker
|
||||
maskCloseAble: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 弹出的z-index值
|
||||
zIndex: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cityValue: "",
|
||||
isChooseP: false, //是否已经选择了省
|
||||
province: 0, //省级下标
|
||||
provinces: [],
|
||||
isChooseC: false, //是否已经选择了市
|
||||
city: 0, //市级下标
|
||||
citys: citys[0],
|
||||
isChooseA: false, //是否已经选择了区
|
||||
area: 0, //区级下标
|
||||
areas: areas[0][0],
|
||||
tabsIndex: 0,
|
||||
list:[]
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
await this.getRegon()
|
||||
this.init();
|
||||
},
|
||||
computed: {
|
||||
isChange() {
|
||||
return this.tabsIndex > 1;
|
||||
},
|
||||
genTabsList() {
|
||||
let tabsList = [{
|
||||
name: "请选择"
|
||||
}];
|
||||
if (this.isChooseP) {
|
||||
console.log(this.province)
|
||||
tabsList[0]['name'] = this.provinces[this.province]['regionName'];
|
||||
tabsList[1] = {
|
||||
name: "请选择"
|
||||
};
|
||||
}
|
||||
if (this.isChooseC) {
|
||||
tabsList[1]['name'] = this.citys[this.city]['regionName'];
|
||||
tabsList[2] = {
|
||||
name: "请选择"
|
||||
};
|
||||
}
|
||||
if (this.isChooseA) {
|
||||
tabsList[2]['name'] = this.areas[this.area]['regionName'];
|
||||
}
|
||||
return tabsList;
|
||||
},
|
||||
uZIndex() {
|
||||
// 如果用户有传递z-index值，优先使用
|
||||
return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
|
||||
}
|
||||
},
|
||||
emits: ['city-change'],
|
||||
methods: {
|
||||
async getRegon(){
|
||||
const res=await region()
|
||||
this.provinces=res||[]
|
||||
},
|
||||
init() {
|
||||
if (this.areaCode.length == 3) {
|
||||
this.setProvince("", this.areaCode[0]);
|
||||
this.setCity("", this.areaCode[1]);
|
||||
this.setArea("", this.areaCode[2]);
|
||||
} else if (this.defaultRegion.length == 3) {
|
||||
this.setProvince(this.defaultRegion[0], "");
|
||||
this.setCity(this.defaultRegion[1], "");
|
||||
this.setArea(this.defaultRegion[2], "");
|
||||
};
|
||||
},
|
||||
setProvince(regionName = "", value = "") {
|
||||
this.provinces.map((v, k) => {
|
||||
if (value ? v.value == value : v.regionName == regionName) {
|
||||
this.provinceChange(k);
|
||||
}
|
||||
})
|
||||
},
|
||||
setCity(regionName = "", value = "") {
|
||||
this.citys.map((v, k) => {
|
||||
if (value ? v.value == value : v.regionName == regionName) {
|
||||
this.cityChange(k);
|
||||
}
|
||||
})
|
||||
},
|
||||
setArea(regionName = "", value = "") {
|
||||
this.areas.map((v, k) => {
|
||||
if (value ? v.value == value : v.regionName == regionName) {
|
||||
this.isChooseA = true;
|
||||
this.area = k;
|
||||
}
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.$emit('update:modelValue', false);
|
||||
},
|
||||
tabsChange(index) {
|
||||
this.tabsIndex = index;
|
||||
},
|
||||
provinceChange(index) {
|
||||
this.isChooseP = true;
|
||||
this.isChooseC = false;
|
||||
this.isChooseA = false;
|
||||
this.province = index;
|
||||
this.citys =this.provinces[index].children
|
||||
this.tabsIndex = 1;
|
||||
},
|
||||
cityChange(index) {
|
||||
this.isChooseC = true;
|
||||
this.isChooseA = false;
|
||||
this.city = index;
|
||||
this.areas =this.provinces[this.province].children[index].children
|
||||
this.tabsIndex = 2;
|
||||
},
|
||||
areaChange(index) {
|
||||
this.isChooseA = true;
|
||||
this.area = index;
|
||||
let result = {};
|
||||
result.province = this.provinces[this.province];
|
||||
result.city = this.citys[this.city];
|
||||
result.area = this.areas[this.area];
|
||||
this.$emit('city-change', result);
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.area-box {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: 800rpx;
|
||||
|
||||
>view {
|
||||
width: 150%;
|
||||
transition: transform 0.3s ease-in-out 0s;
|
||||
transform: translateX(0);
|
||||
|
||||
&.change {
|
||||
transform: translateX(-33.3333333%);
|
||||
}
|
||||
}
|
||||
|
||||
.area-item {
|
||||
width: 33.3333333%;
|
||||
height: 800rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
28
pagesShops/data.js
Normal file
28
pagesShops/data.js
Normal file
@@ -0,0 +1,28 @@
|
||||
export const shopTypes = {
|
||||
'only': '单店',
|
||||
'chain': '连锁店',
|
||||
'join': '加盟店',
|
||||
}
|
||||
|
||||
export const registerTypes = {
|
||||
'before': '快餐版',
|
||||
'after': '餐饮版',
|
||||
}
|
||||
|
||||
export const profiless = {
|
||||
probation: '试用',
|
||||
release: '正式',
|
||||
}
|
||||
export const statuss = {
|
||||
1: '开启',
|
||||
0: '关闭'
|
||||
}
|
||||
export const tubeTypes = {
|
||||
1: '直接管理',
|
||||
0: '不可直接管理'
|
||||
}
|
||||
|
||||
export const channels = {
|
||||
'poly': '聚合支付',
|
||||
'native': '支付进件',
|
||||
}
|
||||
415
pagesShops/index/index.vue
Normal file
415
pagesShops/index/index.vue
Normal file
@@ -0,0 +1,415 @@
|
||||
<template>
|
||||
<view class="min-page bg-f7 u-font-28 color-333">
|
||||
<up-sticky>
|
||||
<view class="top u-flex">
|
||||
<up-select :options="statusList" @select="statusListSelect">
|
||||
<template #text>
|
||||
<text v-if="query.status">{{returnStatusLabel(query.status)}}</text>
|
||||
<text v-else>状态</text>
|
||||
</template>
|
||||
</up-select>
|
||||
<view class="u-flex-1 u-p-l-32">
|
||||
<up-search placeholder="店铺名称" v-model="query.shopName" @search="search" @clear="search"
|
||||
@custom="search"></up-search>
|
||||
</view>
|
||||
</view>
|
||||
</up-sticky>
|
||||
<view class="box">
|
||||
<view class="container" v-for="(item,index) in list" :key="index">
|
||||
<view class="u-flex u-row-between">
|
||||
<view>
|
||||
<text class="color-666">到期时间：</text>
|
||||
<text class="font-bold">{{item.expireTime}}</text>
|
||||
</view>
|
||||
<view class="status" :class="returnStatusClass(item.status)">{{item.status?'正式':'试用'}}</view>
|
||||
</view>
|
||||
<view class="u-flex u-m-t-10">
|
||||
<up-avatar :src="item.logo" size="120rpx" shape="square"></up-avatar>
|
||||
<view class="u-flex-1 u-p-l-32">
|
||||
<view class="font-bold u-line-1">{{item.shopName}}</view>
|
||||
<view class="u-m-t-10">{{item.provinces}}-{{item.cities}}-{{item.districts}} {{item.address}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-32">
|
||||
<view class="">
|
||||
<text class="color-666">经营模式：</text>
|
||||
<text class="font-bold">{{returnRegisterType(item.registerType) }}</text>
|
||||
</view>
|
||||
<view class="u-m-t-24">
|
||||
<text class="color-666">店铺类型：</text>
|
||||
<text class="font-bold">{{returnShopType(item.shopType) }}</text>
|
||||
<text class="font-bold"
|
||||
v-if="item.shopType!='only'&&item.isHeadShop==0">(主店：{{item.headShopName}})</text>
|
||||
</view>
|
||||
<view class="u-m-t-24 u-flex">
|
||||
<text class="color-666">店铺状态：</text>
|
||||
<up-switch disabled v-model="item.status" :active-value="1" :inactive-value="0"
|
||||
size="20"></up-switch>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-24 u-flex u-col-center">
|
||||
<text class="color-666">创建时间：</text>
|
||||
<view class=" font-bold">{{item.createTime}}</view>
|
||||
</view>
|
||||
|
||||
<view class="u-flex u-m-t-32 u-row-right gap-20">
|
||||
<view style="min-width: 160rpx;">
|
||||
<my-button @click="toEdit(item)">编辑</my-button>
|
||||
</view>
|
||||
<view style="min-width: 160rpx;">
|
||||
<my-button @click="showaAtivationCode(item)">激活</my-button>
|
||||
</view>
|
||||
<view style="min-width: 160rpx;">
|
||||
<my-button @click="showMore(item)">
|
||||
<text class="u-m-r-10">更多</text>
|
||||
<up-icon name="arrow-down" color="#fff"></up-icon>
|
||||
</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<template v-if="query.shopName">
|
||||
<up-empty v-if="list.length<=0" text="未搜索到相关信息"></up-empty>
|
||||
<up-loadmore :status="isEnd?'nomore':'loading'" v-else></up-loadmore>
|
||||
</template>
|
||||
<template v-else>
|
||||
<up-empty v-if="list.length<=0" text="未搜索到相关信息"></up-empty>
|
||||
<up-loadmore v-else :status="isEnd?'nomore':'loading'"></up-loadmore>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<view style="height: 140rpx;"></view>
|
||||
<view class="bottom">
|
||||
<my-button @click="toAdd()">添加店铺</my-button>
|
||||
</view>
|
||||
|
||||
<shopSelect v-model="showShopSelect" @confirm="toAdd"></shopSelect>
|
||||
<up-popup :show="codeShow" mode="center" @close="codeShow=false" round="16rpx" :close-on-click-overlay="true">
|
||||
<view style="border-radius: 16rpx;overflow: hidden;" class="u-p-b-30">
|
||||
<up-image width="200" height="200" :src="code"></up-image>
|
||||
<view class="u-m-t-0 text-center" v-if="codeType=='wx'">请打开微信扫码</view>
|
||||
<view class="u-m-t-0 text-center" v-if="codeType=='aliPay'">请打开支付宝扫码</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
|
||||
<up-popup :show="activationCode.show" mode="center" @close="activationCode.show=false" round="16rpx"
|
||||
:close-on-click-overlay="true">
|
||||
<view class="popup-box">
|
||||
<view class="font-bold u-font-32 text-center">生成激活码</view>
|
||||
<view class="u-p-l-20 u-p-r-20 u-m-r-32">
|
||||
<up-form label-width="auto">
|
||||
<up-form-item label="激活码" required>
|
||||
<up-input v-model="activationCode.form.activateCode"></up-input>
|
||||
</up-form-item>
|
||||
</up-form>
|
||||
|
||||
</view>
|
||||
<view class="u-flex gap-20 u-m-t-42">
|
||||
<view class="u-flex-1">
|
||||
<my-button type="default" @click="activationCode.show=false">取消</my-button>
|
||||
</view>
|
||||
<view class="u-flex-1">
|
||||
<my-button @click="activationCodeSubmit">确认</my-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</up-popup>
|
||||
|
||||
<up-action-sheet :actions="moreMenus.list" round="16rpx" @select="moreMenusSelect" @close="moreMenus.show=false"
|
||||
cancelText="取消" :show="moreMenus.show"></up-action-sheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
shopTypes,
|
||||
registerTypes
|
||||
} from '../data.js'
|
||||
|
||||
|
||||
const code = ref('')
|
||||
const codeShow = ref(false)
|
||||
const codeType = ref('')
|
||||
|
||||
|
||||
import {
|
||||
reactive,
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
import shopSelect from '../components/shop-select.vue'
|
||||
import {
|
||||
onReachBottom,
|
||||
onShow
|
||||
} from '@dcloudio/uni-app'
|
||||
import * as shopInfoApi from '@/http/api/account/shopInfo.js'
|
||||
|
||||
const activationCode = reactive({
|
||||
show: false,
|
||||
form: {
|
||||
activateCode: '',
|
||||
id: '',
|
||||
},
|
||||
})
|
||||
|
||||
async function activationCodeSubmit(){
|
||||
if (!activationCode.form.activateCode) {
|
||||
return uni.$u.toast('请填写激活码')
|
||||
}
|
||||
const res = await shopInfoApi.editShop(activationCode.form)
|
||||
if (res) {
|
||||
uni.$u.toast('激活成功')
|
||||
search()
|
||||
}
|
||||
}
|
||||
|
||||
function showaAtivationCode(item) {
|
||||
activationCode.form.id = item.id
|
||||
activationCode.show=true
|
||||
}
|
||||
|
||||
const statusList = [{
|
||||
value: 1,
|
||||
name: '开启',
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
name: '关闭',
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
const moreMenusList = [{
|
||||
name: '添加分店',
|
||||
},
|
||||
{
|
||||
name: '支付配置',
|
||||
},
|
||||
// {
|
||||
// name: '续费记录',
|
||||
// },
|
||||
// {
|
||||
// name: '重置密码',
|
||||
// },
|
||||
// {
|
||||
// name: '删除',
|
||||
// color: '#FF1C1C'
|
||||
// },
|
||||
]
|
||||
const moreMenus = reactive({
|
||||
list: moreMenusList,
|
||||
selItem: null,
|
||||
show: false
|
||||
})
|
||||
|
||||
function moreMenusSelect(e) {
|
||||
console.log(e);
|
||||
if (e.name == '支付配置') {
|
||||
uni.navigateTo({
|
||||
url: '/pagesShops/pay-config/pay-config?shopId=' + moreMenus.selItem.id + '&licenceNo=' + moreMenus
|
||||
.selItem.licenceNo
|
||||
})
|
||||
}
|
||||
if (e.name == '添加分店') {
|
||||
uni.navigateTo({
|
||||
url: '/pagesShops/add/add?id=' + moreMenus.selItem.id + '&type=addBranch'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function showMore(item) {
|
||||
if (item.shopType != 'only' && item.isHeadShop) {
|
||||
moreMenus.list = moreMenusList
|
||||
} else {
|
||||
moreMenus.list = moreMenusList.filter(v => v.name != '添加分店')
|
||||
}
|
||||
moreMenus.selItem = item
|
||||
moreMenus.show = true
|
||||
}
|
||||
|
||||
function returnRegisterType(registerTyp) {
|
||||
return registerTypes[registerTyp] ? registerTypes[registerTyp] : ''
|
||||
}
|
||||
|
||||
|
||||
function returnShopType(shopType) {
|
||||
return shopTypes[shopType] ? shopTypes[shopType] : ''
|
||||
}
|
||||
|
||||
function statusListSelect(e) {
|
||||
query.status = e.value
|
||||
}
|
||||
const statusLabelJson = {
|
||||
'REJECTED': '已拒绝'
|
||||
}
|
||||
const statusClassJson = {
|
||||
'REJECTED': 'error'
|
||||
}
|
||||
|
||||
function returnStatusLabel(state) {
|
||||
const item = statusList.find(v => v.value == state)
|
||||
if (item) {
|
||||
return item.name
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
function returnStatusClass(state) {
|
||||
if (state == 1) {
|
||||
return 'success'
|
||||
}
|
||||
return 'warning'
|
||||
}
|
||||
|
||||
function showCode(item, type) {
|
||||
if (type == 'wx') {
|
||||
code.value = item.wechatSignUrl
|
||||
}
|
||||
if (type == 'aliPay') {
|
||||
code.value = item.alipaySignUrl
|
||||
}
|
||||
codeType.value = type
|
||||
codeShow.value = true
|
||||
|
||||
}
|
||||
|
||||
const showShopSelect = ref(false)
|
||||
|
||||
const query = reactive({
|
||||
page: 1,
|
||||
size: 10,
|
||||
shopName: '',
|
||||
status: ''
|
||||
})
|
||||
watch(() => query.status, (newval) => {
|
||||
search()
|
||||
})
|
||||
const isEnd = ref(false)
|
||||
const list = ref([])
|
||||
|
||||
function search() {
|
||||
isEnd.value = false
|
||||
query.page = 1
|
||||
getData()
|
||||
}
|
||||
|
||||
function toAdd(shop) {
|
||||
console.log(shop)
|
||||
uni.navigateTo({
|
||||
url: '/pagesShops/add/add'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function toEdit(shop) {
|
||||
console.log(shop)
|
||||
uni.navigateTo({
|
||||
url: '/pagesShops/add/add?id=' + shop.id
|
||||
})
|
||||
}
|
||||
|
||||
function getData() {
|
||||
shopInfoApi.allShopList(query).then(res => {
|
||||
isEnd.value = query.page >= res.totalPage * 1
|
||||
if (query.page == 1) {
|
||||
list.value = res.records
|
||||
} else {
|
||||
list.value.push(...res.records)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function queryStatus(item) {
|
||||
queryEntry({
|
||||
licenceNo: item.licenceNo,
|
||||
shopId: item.shopId
|
||||
}).then(res => {
|
||||
isEnd.value = false
|
||||
query.page = 1;
|
||||
getData()
|
||||
})
|
||||
}
|
||||
onReachBottom(() => {
|
||||
if (!isEnd.value) {
|
||||
query.page++
|
||||
getData()
|
||||
}
|
||||
|
||||
})
|
||||
onShow(getData)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.min-page {
|
||||
.box {
|
||||
padding: 32rpx 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 32rpx 28rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 32rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
z-index: 100;
|
||||
padding: 32rpx 28rpx;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.types {}
|
||||
|
||||
.status {
|
||||
padding: 8rpx 18rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #333;
|
||||
|
||||
&.success {
|
||||
border-color: rgba(123, 209, 54, 1);
|
||||
color: rgba(123, 209, 54, 1);
|
||||
background: rgba(123, 209, 54, 0.12);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
border-color: rgba(255, 141, 40, 1);
|
||||
color: rgba(255, 141, 40, 1);
|
||||
background: rgba(255, 141, 40, 0.12);
|
||||
}
|
||||
|
||||
&.error {
|
||||
border-color: #FF1C1C;
|
||||
color: #FF1C1C;
|
||||
background: rgba(255, 28, 28, 0.18);
|
||||
}
|
||||
|
||||
&.gray {
|
||||
color: #bbb;
|
||||
background-color: #f7f7f7;
|
||||
border-color: #bbb;
|
||||
}
|
||||
}
|
||||
|
||||
.top {
|
||||
padding: 32rpx 28rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.popup-box {
|
||||
background-color: #fff;
|
||||
width: 690rpx;
|
||||
background-color: #fff;
|
||||
padding: 32rpx 28rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
</style>
|
||||
615
pagesShops/pay-config/pay-config.vue
Normal file
615
pagesShops/pay-config/pay-config.vue
Normal file
@@ -0,0 +1,615 @@
|
||||
<template>
|
||||
<view class="min-page bg-f7 u-font-28">
|
||||
<template v-if="loadingFinish">
|
||||
<up-form :model="form" :rules="rules" ref="refForm" label-width="auto" label-position="top"
|
||||
errorType="toast" :label-style="labelStyle">
|
||||
<view class="container">
|
||||
<up-form-item label="当前模式">
|
||||
<up-radio-group v-model="form.channel">
|
||||
<up-radio v-for="(value,key) in channels" :key="key" :name="key" :label="value"></up-radio>
|
||||
</up-radio-group>
|
||||
</up-form-item>
|
||||
<template v-if="form.channel=='native'">
|
||||
<up-form-item label="使用信息"
|
||||
v-if="shopInfo.shopType!='only'&& !shopInfo.isHeadShop && mainEntryManagerRes">
|
||||
<up-radio-group v-model="useInfo">
|
||||
<up-radio v-for="(value,key) in useInfos" :key="key" :name="key*1"
|
||||
:label="value"></up-radio>
|
||||
</up-radio-group>
|
||||
</up-form-item>
|
||||
</template>
|
||||
|
||||
</view>
|
||||
<template v-if="form.channel=='poly'">
|
||||
<view class="container">
|
||||
<up-form-item label="店铺id" prop="polyMerchantDTO.storeId"
|
||||
:required="returnIsRequired('polyMerchantDTO.storeId')">
|
||||
<up-input v-model="form.polyMerchantDTO.storeId"></up-input>
|
||||
</up-form-item>
|
||||
<up-form-item label="商户名称" prop="polyMerchantDTO.merchantName"
|
||||
:required="returnIsRequired('polyMerchantDTO.merchantName')">
|
||||
<up-input v-model="form.polyMerchantDTO.merchantName"></up-input>
|
||||
</up-form-item>
|
||||
<up-form-item label="商户应用id" prop="polyMerchantDTO.appId"
|
||||
:required="returnIsRequired('polyMerchantDTO.appId')">
|
||||
<up-input v-model="form.polyMerchantDTO.appId"></up-input>
|
||||
</up-form-item>
|
||||
<up-form-item label="商户密钥" prop="polyMerchantDTO.appSecret"
|
||||
:required="returnIsRequired('polyMerchantDTO.appSecret')">
|
||||
<up-input v-model="form.polyMerchantDTO.appSecret"></up-input>
|
||||
</up-form-item>
|
||||
<!-- <up-form-item label="支付密码" prop="polyMerchantDTO.payPassword"
|
||||
:required="returnIsRequired('polyMerchantDTO.payPassword')">
|
||||
<up-input v-model="form.polyMerchantDTO.payPassword"></up-input>
|
||||
</up-form-item> -->
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-if="useInfo==0">
|
||||
<template v-if="entryManagerRes">
|
||||
<view class="container container1">
|
||||
<view class="u-flex u-row-between">
|
||||
<text class="font-bold">商户号</text>
|
||||
<text class="">{{entryManagerRes.merchantCode}}</text>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-m-t-24">
|
||||
<text class="font-bold">商户类型</text>
|
||||
<text class="">{{returnType(entryManagerRes.userType)}}</text>
|
||||
</view>
|
||||
<view class="status">
|
||||
<view class="u-flex u-row-between ">
|
||||
<text class="font-bold">支付宝进件状态</text>
|
||||
<view class="state" :class="returnStatusClass(entryManagerRes.alipayStatus)">
|
||||
{{returnStatusLabel(entryManagerRes.alipayStatus)}}
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="entryManagerRes.alipayStatus==='SIGN'" class="u-m-t-16">
|
||||
<my-button @click="showCode(entryManagerRes,'aliPay')">查看签约码</my-button>
|
||||
</view>
|
||||
<view class="u-m-t-14" v-if="entryManagerRes.alipayErrorMsg">
|
||||
<up-alert title="拒绝原因" type="error"
|
||||
:description="entryManagerRes.alipayErrorMsg"></up-alert>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="status">
|
||||
<view class="">
|
||||
<view class="u-flex u-row-between">
|
||||
<text class="font-bold">微信进件状态</text>
|
||||
<view class="state"
|
||||
:class="returnStatusClass(entryManagerRes.wechatStatus)">
|
||||
{{returnStatusLabel(entryManagerRes.wechatStatus)}}
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="entryManagerRes.wechatStatus==='SIGN'" class="u-m-t-16">
|
||||
<my-button @click="showCode(entryManagerRes,'wx')">查看签约码</my-button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="u-m-t-14" v-if="entryManagerRes.wechatErrorMsg">
|
||||
<up-alert title="拒绝原因" type="error"
|
||||
:description="entryManagerRes.wechatErrorMsg"></up-alert>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-m-t-24">
|
||||
<text class="font-bold">最后提交时间</text>
|
||||
<text class="">{{entryManagerRes.updateTime}}</text>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-m-t-24">
|
||||
<text class="font-bold">创建时间</text>
|
||||
<text class="">{{entryManagerRes.createTime}}</text>
|
||||
</view>
|
||||
|
||||
<view class="u-flex u-row-right gap-20 u-m-t-32">
|
||||
<my-button @click="toEdit(entryManagerRes)">查看详情</my-button>
|
||||
<my-button @click="toEdit(entryManagerRes)">修改</my-button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<view class="container container1" v-if="!entryManagerRes">
|
||||
<view class="color-red font-bold text-center">您还未申请进件</view>
|
||||
<view class="u-m-t-32">
|
||||
<my-button @click="toEdit()">去申请</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="useInfo==1">
|
||||
<view class="container container1">
|
||||
<view class="u-flex u-row-between u-m-b-24">
|
||||
<text class="font-bold">复用信息</text>
|
||||
<up-tag type="primary" plain text="复用主店信息"></up-tag>
|
||||
</view>
|
||||
<view class="u-flex u-row-between">
|
||||
<text class="font-bold">商户号</text>
|
||||
<text class="">{{form.shopDirectMerchant.merchantCode}}</text>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-m-t-24">
|
||||
<text class="font-bold">商户类型</text>
|
||||
<text class="">{{returnType(form.shopDirectMerchant.userType)}}</text>
|
||||
</view>
|
||||
<view class="status">
|
||||
<view class="u-flex u-row-between ">
|
||||
<text class="font-bold">支付宝进件状态</text>
|
||||
<view class="state"
|
||||
:class="returnStatusClass(form.shopDirectMerchant.alipayStatus)">
|
||||
{{returnStatusLabel(form.shopDirectMerchant.alipayStatus)}}
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="form.shopDirectMerchant.alipayStatus==='SIGN'" class="u-m-t-16">
|
||||
<my-button @click="showCode(form.shopDirectMerchant,'aliPay')">查看签约码</my-button>
|
||||
</view>
|
||||
<view class="u-m-t-14" v-if="form.shopDirectMerchant.alipayErrorMsg">
|
||||
<up-alert title="拒绝原因" type="error"
|
||||
:description="form.shopDirectMerchant.alipayErrorMsg"></up-alert>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="status">
|
||||
<view class="">
|
||||
<view class="u-flex u-row-between">
|
||||
<text class="font-bold">微信进件状态</text>
|
||||
<view class="state"
|
||||
:class="returnStatusClass(form.shopDirectMerchant.wechatStatus)">
|
||||
{{returnStatusLabel(form.shopDirectMerchant.wechatStatus)}}
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="form.shopDirectMerchant.wechatStatus==='SIGN'" class="u-m-t-16">
|
||||
<my-button @click="showCode(form.shopDirectMerchant,'wx')">查看签约码</my-button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="u-m-t-14" v-if="form.shopDirectMerchant.wechatErrorMsg">
|
||||
<up-alert title="拒绝原因" type="error"
|
||||
:description="form.shopDirectMerchant.wechatErrorMsg"></up-alert>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-m-t-24">
|
||||
<text class="font-bold">最后提交时间</text>
|
||||
<text class="">{{form.shopDirectMerchant.updateTime}}</text>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-m-t-24">
|
||||
<text class="font-bold">创建时间</text>
|
||||
<text class="">{{form.shopDirectMerchant.createTime}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- <up-form-item label="微信appid" prop="polyMerchantDTO.wechatSmallAppid"
|
||||
:required="returnIsRequired('polyMerchantDTO.wechatSmallAppid')">
|
||||
<up-input v-model="form.polyMerchantDTO.wechatSmallAppid"></up-input>
|
||||
</up-form-item>
|
||||
<up-form-item label="微信支付宝appid" prop="polyMerchantDTO.alipaySmallAppid"
|
||||
:required="returnIsRequired('polyMerchantDTO.alipaySmallAppid')">
|
||||
<up-input v-model="form.polyMerchantDTO.alipaySmallAppid"></up-input>
|
||||
</up-form-item> -->
|
||||
|
||||
</up-form>
|
||||
<up-popup :show="codeShow" mode="center" @close="codeShow=false" round="16rpx"
|
||||
:close-on-click-overlay="true">
|
||||
<view style="border-radius: 16rpx;overflow: hidden;" class="u-p-b-30">
|
||||
<up-image width="200" height="200" :src="code"></up-image>
|
||||
<view class="u-m-t-0 text-center" v-if="codeType=='wx'">请打开微信扫码</view>
|
||||
<view class="u-m-t-0 text-center" v-if="codeType=='aliPay'">请打开支付宝扫码</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
<my-bottom-btn-group @cancel="uni.navigateBack()" @save="submit"></my-bottom-btn-group>
|
||||
</template>
|
||||
<my-page-loading v-else></my-page-loading>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
reactive,
|
||||
ref,
|
||||
watch
|
||||
} from 'vue'
|
||||
import {
|
||||
companyChildTypes,
|
||||
userTypes,
|
||||
statusList
|
||||
} from '@/commons/data/entryManager.js'
|
||||
import * as shopMerchantApi from '@/http/api/order/shopMerchant.js'
|
||||
import {
|
||||
getEntryManager
|
||||
} from '@/http/api/order/entryManager.js'
|
||||
import {
|
||||
channels
|
||||
} from '../data.js'
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app'
|
||||
|
||||
import * as shopInfoApi from '@/http/api/account/shopInfo.js'
|
||||
|
||||
const useInfo = ref(0)
|
||||
|
||||
const useInfos = {
|
||||
0: '当前店铺',
|
||||
1: '主店'
|
||||
}
|
||||
|
||||
function toEdit(shop) {
|
||||
console.log(shop)
|
||||
if (shop) {
|
||||
uni.navigateTo({
|
||||
url: '/entryManager/add/add?shopId=' + shop.shopId + '&licenceNo=' + shop.businessLicenceInfo
|
||||
.licenceNo
|
||||
})
|
||||
} else {
|
||||
return uni.navigateTo({
|
||||
url: '/entryManager/add/add?shopId=' + query.shopId
|
||||
})
|
||||
// if (mainEntryManagerRes.value) {
|
||||
// uni.showModal({
|
||||
// title: '提示',
|
||||
// content: '是否复用主店信息',
|
||||
// showCancel: true,
|
||||
// cancelText: '复用主店信息',
|
||||
// confirmText: '继续进件',
|
||||
// success(res) {
|
||||
// if (res.confirm) {
|
||||
// uni.navigateTo({
|
||||
// url: '/entryManager/add/add?shopId=' + query.shopId
|
||||
// })
|
||||
// } else {
|
||||
// form.shopDirectMerchant = mainEntryManagerRes.value
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
// return
|
||||
// } else {
|
||||
// uni.navigateTo({
|
||||
// url: '/entryManager/add/add?shopId=' + query.shopId
|
||||
// })
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
const code = ref('')
|
||||
const codeShow = ref(false)
|
||||
const codeType = ref('')
|
||||
|
||||
function returnStatusLabel(state) {
|
||||
const item = statusList.find(v => v.value == state)
|
||||
if (item) {
|
||||
return item.name
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
function returnIsRequired(key) {
|
||||
if (rules[key] && rules[key].required) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
|
||||
function returnType(type) {
|
||||
if (userTypes[type]) {
|
||||
return userTypes[type]
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
function showCode(item, type) {
|
||||
if (type == 'wx') {
|
||||
code.value = item.wechatSignUrl
|
||||
}
|
||||
if (type == 'aliPay') {
|
||||
code.value = item.alipaySignUrl
|
||||
}
|
||||
codeType.value = type
|
||||
codeShow.value = true
|
||||
|
||||
}
|
||||
|
||||
function returnStatusClass(state) {
|
||||
const item = statusList.find(v => v.value == state)
|
||||
if (item) {
|
||||
return item.class
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
const labelStyle = {
|
||||
fontWeight: "700"
|
||||
}
|
||||
const query = reactive({
|
||||
shopId: ''
|
||||
})
|
||||
const rules = reactive({
|
||||
"polyMerchantDTO.merchantName": {
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请输入商户名称',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
"polyMerchantDTO.storeId": {
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请输入店铺id',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
"polyMerchantDTO.appId": {
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请输入商户应用id',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
"polyMerchantDTO.appSecret": {
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请输入商户密钥',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
// "polyMerchantDTO.payPassword": {
|
||||
// type: 'string',
|
||||
// required: true,
|
||||
// message: '请输入支付密钥',
|
||||
// trigger: ['blur', 'change'],
|
||||
// },
|
||||
// "polyMerchantDTO.wechatSmallAppid": {
|
||||
// type: 'string',
|
||||
// required: true,
|
||||
// message: '请输入微信小程序appid',
|
||||
// trigger: ['blur', 'change'],
|
||||
// },
|
||||
// "polyMerchantDTO.alipaySmallAppid": {
|
||||
// type: 'string',
|
||||
// required: true,
|
||||
// message: '请输入支付宝小程序appid',
|
||||
// trigger: ['blur', 'change'],
|
||||
// }
|
||||
|
||||
})
|
||||
const form = reactive({
|
||||
shopId: 0,
|
||||
channel: "native",
|
||||
relatedLicenceNo: "",
|
||||
nativeMerchantDTO: {
|
||||
wechatMerchantId: "",
|
||||
alipayMerchantId: "",
|
||||
alipayAuthInfo: {
|
||||
user_id: "",
|
||||
open_id: "",
|
||||
auth_app_id: "",
|
||||
app_auth_token: "",
|
||||
expires_in: "",
|
||||
app_refresh_token: "",
|
||||
re_expires_in: "",
|
||||
order_no: "",
|
||||
},
|
||||
},
|
||||
polyMerchantDTO: {
|
||||
storeId: "",
|
||||
merchantName: "",
|
||||
appId: "",
|
||||
appSecret: "",
|
||||
payPassword: "",
|
||||
wechatSmallAppid: "",
|
||||
alipaySmallAppid: "",
|
||||
},
|
||||
shopDirectMerchant: {
|
||||
shopId: 0,
|
||||
shopName: "",
|
||||
licenceNo: "",
|
||||
alipayAccount: "",
|
||||
merchantCode: "",
|
||||
userType: "",
|
||||
shortName: "",
|
||||
merchantBaseInfo: "",
|
||||
legalPersonInfo: "",
|
||||
businessLicenceInfo: "",
|
||||
storeInfo: "",
|
||||
settlementInfo: "",
|
||||
createTime: "",
|
||||
updateTime: "",
|
||||
errorMsg: "",
|
||||
wechatApplyId: "",
|
||||
wechatStatus: "",
|
||||
wechatErrorMsg: "",
|
||||
wechatSignUrl: "",
|
||||
alipayOrderId: "",
|
||||
alipayStatus: "",
|
||||
alipayErrorMsg: "",
|
||||
alipaySignUrl: "",
|
||||
alipayAuthInfo: "",
|
||||
wechatMerchantId: "",
|
||||
alipayMerchantId: "",
|
||||
},
|
||||
});
|
||||
const refForm = ref(null)
|
||||
|
||||
const entryManagerRes = ref(null)
|
||||
|
||||
|
||||
const mainEntryManagerRes = ref(null)
|
||||
|
||||
const shopInfo = ref(null)
|
||||
|
||||
const shopMerchant=ref(null)
|
||||
async function init() {
|
||||
const shopInfoRes = await shopInfoApi.getShopDetail({
|
||||
id: query.shopId
|
||||
})
|
||||
shopInfo.value = shopInfoRes
|
||||
//不是单店且不是主店
|
||||
if (shopInfoRes && shopInfo.shopType != 'only' && !shopInfoRes.isHeadShop) {
|
||||
const res = await shopMerchantApi.getMainMerchant({
|
||||
shopId: query.shopId
|
||||
})
|
||||
mainEntryManagerRes.value = res
|
||||
|
||||
}
|
||||
const res = await getEntryManager({
|
||||
shopId: query.shopId
|
||||
})
|
||||
entryManagerRes.value = res
|
||||
shopMerchantApi.shopMerchant({
|
||||
shopId: query.shopId
|
||||
}).then(res => {
|
||||
if(res){
|
||||
if (res.shopDirectMerchant) {
|
||||
useInfo.value = 1
|
||||
} else {
|
||||
useInfo.value = 0
|
||||
}
|
||||
shopMerchant.value=res
|
||||
Object.assign(form, res)
|
||||
}
|
||||
loadingFinish.value=true
|
||||
})
|
||||
}
|
||||
|
||||
const loadingFinish=ref(false)
|
||||
onLoad((opt) => {
|
||||
query.shopId = opt.shopId
|
||||
form.shopId = opt.shopId
|
||||
init()
|
||||
})
|
||||
|
||||
async function save() {
|
||||
let res = null
|
||||
if (form.channel == 'poly') {
|
||||
res = await shopMerchantApi.editShopMerchant({
|
||||
shopId: form.shopId,
|
||||
channel: form.channel,
|
||||
polyMerchantDTO: {
|
||||
storeId: form.polyMerchantDTO.storeId,
|
||||
merchantName: form.polyMerchantDTO.merchantName,
|
||||
appId: form.polyMerchantDTO.appId,
|
||||
appSecret: form.polyMerchantDTO.appSecret,
|
||||
}
|
||||
})
|
||||
} else {
|
||||
res = await shopMerchantApi.editShopMerchant({
|
||||
shopId: form.shopId,
|
||||
channel: form.channel,
|
||||
relatedLicenceNo: form.relatedLicenceNo,
|
||||
nativeMerchantDTO: {
|
||||
wechatMerchantId: form.nativeMerchantDTO.wechatMerchantId,
|
||||
alipayMerchantId: form.nativeMerchantDTO.alipayMerchantId,
|
||||
alipayAuthInfo: {
|
||||
user_id: form.nativeMerchantDTO.alipayAuthInfo.user_id,
|
||||
open_id: form.nativeMerchantDTO.alipayAuthInfo.open_id,
|
||||
auth_app_id: form.nativeMerchantDTO.alipayAuthInfo.auth_app_id,
|
||||
app_auth_token: form.nativeMerchantDTO.alipayAuthInfo.app_auth_token,
|
||||
expires_in: form.nativeMerchantDTO.alipayAuthInfo.expires_in,
|
||||
app_refresh_token: form.nativeMerchantDTO.alipayAuthInfo.app_refresh_token,
|
||||
re_expires_in: form.nativeMerchantDTO.alipayAuthInfo.re_expires_in,
|
||||
order_no: form.nativeMerchantDTO.alipayAuthInfo.order_no,
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (res) {
|
||||
uni.$u.toast('保存成功')
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function submit() {
|
||||
if (form.channel == 'native' && !entryManagerRes.value) {
|
||||
return uni.$u.toast('您还未申请进件，清先申请进件')
|
||||
}
|
||||
refForm.value.validate().then(valid => {
|
||||
console.log('valid', valid);
|
||||
if (valid) {
|
||||
// uni.$u.toast('校验通过')
|
||||
|
||||
save()
|
||||
} else {}
|
||||
}).catch(() => {
|
||||
// 处理验证错误
|
||||
});
|
||||
}
|
||||
|
||||
watch(() => form.channel, (newval) => {
|
||||
for (let key in rules) {
|
||||
console.log('key', key)
|
||||
rules[key].required = newval == 'poly' ? true : false;
|
||||
}
|
||||
|
||||
})
|
||||
watch(() => useInfo.value, (newval) => {
|
||||
console.log('newval',newval);
|
||||
if (newval) {
|
||||
form.shopDirectMerchant = mainEntryManagerRes.value||(shopMerchant.value?(shopMerchant.value.shopDirectMerchant):null )
|
||||
form.nativeMerchantDTO = null
|
||||
} else {
|
||||
form.shopDirectMerchant = null
|
||||
form.nativeMerchantDTO = entryManagerRes.value
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.min-page {
|
||||
padding: 32rpx 28rpx;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: #fff;
|
||||
padding: 12rpx 28rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
&.container1 {
|
||||
padding: 32rpx 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.input-placeholder) {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
:deep(.u-form-item__body) {
|
||||
padding: 10px 0 0 0;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-top: 24rpx;
|
||||
background-color: #f7f7f7;
|
||||
padding: 24rpx 28rpx;
|
||||
border-radius: 4rpx;
|
||||
|
||||
.state {
|
||||
padding: 8rpx 18rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #333;
|
||||
|
||||
&.success {
|
||||
border-color: rgba(123, 209, 54, 1);
|
||||
color: rgba(123, 209, 54, 1);
|
||||
background: rgba(123, 209, 54, 0.12);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
border-color: rgba(255, 141, 40, 1);
|
||||
color: rgba(255, 141, 40, 1);
|
||||
background: rgba(255, 141, 40, 0.12);
|
||||
}
|
||||
|
||||
&.error {
|
||||
border-color: #FF1C1C;
|
||||
color: #FF1C1C;
|
||||
background: rgba(255, 28, 28, 0.18);
|
||||
}
|
||||
|
||||
&.gray {
|
||||
color: #bbb;
|
||||
background-color: #f7f7f7;
|
||||
border-color: #bbb;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user