增加激活码列表页面,修复进件部分问题
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>
|
||||
Reference in New Issue
Block a user