178 lines
3.5 KiB
Vue
178 lines
3.5 KiB
Vue
<template>
|
|
<view>
|
|
<view class="u-font-32 font-bold u-m-32 text-center">门店信息</view>
|
|
<view class="container">
|
|
<view class="form-item required">
|
|
<view class="title"> 归属地</view>
|
|
<view class="input-box u-flex u-row-between u-col-center" @click="showCitySelect=true">
|
|
<text class="color-999" v-if="!pro_city_area">请选择</text>
|
|
<text class="color-333" v-else>{{pro_city_area}}</text>
|
|
<up-icon name="arrow-down"></up-icon>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
<view class="form-item required">
|
|
<view class="title"> 营业地址</view>
|
|
|
|
<up-input placeholder="营业地址" :placeholder-class="placeholderClass"
|
|
v-model="form.businessAddress"></up-input>
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<view class="form-item required">
|
|
<view class="title"> 经营场所内设照片</view>
|
|
<my-upload-img v-model="form.insidePic.url" :size="200"></my-upload-img>
|
|
</view>
|
|
<view class="form-item required">
|
|
<view class="title"> 门头照</view>
|
|
<my-upload-img v-model="form.doorPic.url" :size="200"></my-upload-img>
|
|
</view>
|
|
<view class="form-item required">
|
|
<view class="title"> 收银台照片</view>
|
|
<my-upload-img v-model="form.cashierDeskPic.url" :size="200"></my-upload-img>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
<citySelect v-model="showCitySelect" @city-change="cityChange"></citySelect>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
computed,
|
|
reactive,
|
|
ref,watch
|
|
} from 'vue';
|
|
import shopSelect from './shop-select.vue'
|
|
import citySelect from '../../components/u-city-select.vue'
|
|
import {
|
|
userTypes,
|
|
sexs,
|
|
contactPersonTypes,
|
|
companyChildTypes,
|
|
certTypes
|
|
} from '@/entryManager/data.js'
|
|
const showCitySelect = ref(false)
|
|
|
|
function cityChange(e) {
|
|
console.log('cityChange', e);
|
|
form.mercProv = e.province.regionName;
|
|
form.mercCity = e.city.regionName;
|
|
form.mercArea = e.area.regionName;
|
|
|
|
form.mercProvCode = e.province.regionId;
|
|
form.mercCityCode = e.city.regionId;
|
|
form.mercAreaCode = e.area.regionId;
|
|
console.log('form', form);
|
|
}
|
|
|
|
const pro_city_area = computed(() => {
|
|
if (form.mercProv && form.mercCity && form.mercArea) {
|
|
const text = form.mercProv + '-' + form.mercCity + '-' + form.mercArea
|
|
console.log('text', text);
|
|
return text
|
|
}
|
|
return ''
|
|
})
|
|
const form = reactive({
|
|
"mercProvCode": "",
|
|
"mercCityCode": "",
|
|
"mercAreaCode": "",
|
|
"mercProv": "",
|
|
"mercCity": "",
|
|
"mercArea": "",
|
|
"businessAddress": "",
|
|
"insidePic": {
|
|
"url": "",
|
|
"wechatId": "",
|
|
"alipayId": ""
|
|
},
|
|
"doorPic": {
|
|
"url": "",
|
|
"wechatId": "",
|
|
"alipayId": ""
|
|
},
|
|
"cashierDeskPic": {
|
|
"url": "",
|
|
"wechatId": "",
|
|
"alipayId": ""
|
|
}
|
|
})
|
|
|
|
const placeholderClass = ref('u-font-28')
|
|
|
|
const isRequired = ref('required')
|
|
|
|
|
|
|
|
const props=defineProps({
|
|
data:{
|
|
type:Object,
|
|
default:()=>{
|
|
|
|
}
|
|
}
|
|
})
|
|
|
|
|
|
watch(()=>props.data,(newval)=>{
|
|
for(let key in form){
|
|
if(props.data.hasOwnProperty(key)){
|
|
form[key]=props.data[key]
|
|
}
|
|
}
|
|
},{
|
|
deep:true,immediate:true
|
|
})
|
|
|
|
const emits=defineEmits(['update'])
|
|
watch(()=>form,(newval)=>{
|
|
emits('update',newval)
|
|
},{
|
|
deep:true
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.container {
|
|
padding: 32rpx 28rpx;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 32rpx;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.form-item {
|
|
margin-bottom: 32rpx;
|
|
|
|
.title {
|
|
font-weight: 700;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
&.required {
|
|
.title::before {
|
|
content: '*';
|
|
color: red;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.input-box {
|
|
padding: 10px 10px;
|
|
border-radius: 4px;
|
|
border: 1px solid #dadbde;
|
|
}
|
|
</style> |