252 lines
6.2 KiB
Vue
252 lines
6.2 KiB
Vue
|
<script setup>
|
||
|
|
/**
|
||
|
|
* 商家入驻
|
||
|
|
*/
|
||
|
|
import {
|
||
|
|
reactive
|
||
|
|
} from 'vue';
|
||
|
|
import durianapi from '@/api/durian.js';
|
||
|
|
// 工具裤脚
|
||
|
|
import util from '@/common/js/util.js'
|
||
|
|
// 表单
|
||
|
|
const form = reactive({
|
||
|
|
shopHeader: '',
|
||
|
|
shopName: '',
|
||
|
|
contact: '',
|
||
|
|
productLocation: '',
|
||
|
|
productCategory: '',
|
||
|
|
customer: '',
|
||
|
|
idcard: '',
|
||
|
|
idcard2: '',
|
||
|
|
businessLicense: [],
|
||
|
|
status: 3
|
||
|
|
})
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 上传图片
|
||
|
|
* @param {String} key 键值
|
||
|
|
* @param {String} type 类型 1单 2多
|
||
|
|
*/
|
||
|
|
function uploadImg(key, type) {
|
||
|
|
util.upload_image({
|
||
|
|
value: form[key],
|
||
|
|
type: type || 1,
|
||
|
|
success: rs => {
|
||
|
|
// 根据条件追加
|
||
|
|
if (type != 2) form[key] = rs.value
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 移除文件
|
||
|
|
* @param {Number} index 下标
|
||
|
|
* @param {String} key 键
|
||
|
|
*/
|
||
|
|
function removeMedia(index, key) {
|
||
|
|
util.alert({
|
||
|
|
content: '确认删除？',
|
||
|
|
}).then(rs => {
|
||
|
|
if (rs.confirm) form[key].splice(index, 1)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
// 提交
|
||
|
|
function handleSubmit() {
|
||
|
|
const data = {
|
||
|
|
...form
|
||
|
|
}
|
||
|
|
|
||
|
|
// 验证必填项
|
||
|
|
if (!data.shopHeader) {
|
||
|
|
util.alert('商家头像不能为空')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if (!data.shopName) {
|
||
|
|
util.alert('商家名称不能为空')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if (!data.contact) {
|
||
|
|
util.alert('联系方式不能为空')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if (!data.productLocation) {
|
||
|
|
util.alert('产品所在地不能为空')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if (!data.productCategory) {
|
||
|
|
util.alert('产品类别不能为空')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if (!data.customer) {
|
||
|
|
util.alert('客服电话不能为空')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if (!data.businessLicense[0]) {
|
||
|
|
util.alert('营业执照不能为空')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if (!data.idcard) {
|
||
|
|
util.alert('身份证正面不能为空')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if (!data.idcard2) {
|
||
|
|
util.alert('身份证反面不能为空')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
// 格式化
|
||
|
|
data.shopHeader = util.replace_url(data.shopHeader)
|
||
|
|
data.businessLicense = data.businessLicense.map(node => {
|
||
|
|
return util.replace_url(node)
|
||
|
|
}).join(',')
|
||
|
|
data.idcard = util.replace_url(data.idcard)
|
||
|
|
data.idcard2 = util.replace_url(data.idcard2)
|
||
|
|
|
||
|
|
durianapi.shopApply({
|
||
|
|
data: {
|
||
|
|
shopHeader: data.shopHeader,
|
||
|
|
shopName: data.shopName,
|
||
|
|
contact: data.contact,
|
||
|
|
productLocation: data.productLocation,
|
||
|
|
productCategory: data.productCategory,
|
||
|
|
customer: data.customer,
|
||
|
|
idcard: data.idcard,
|
||
|
|
idcard2: data.idcard2,
|
||
|
|
businessLicense: data.businessLicense,
|
||
|
|
status: 3
|
||
|
|
}
|
||
|
|
}).then(rs => {
|
||
|
|
if (rs.code === 200) {
|
||
|
|
util.alert({
|
||
|
|
content: '资料已申请，请等待后台审核',
|
||
|
|
showCancel: false,
|
||
|
|
}).then(rs => {
|
||
|
|
uni.navigateBack()
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
util.alert({
|
||
|
|
content: rs.msg,
|
||
|
|
showCancel: false,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<view class="appbw plr30">
|
||
|
|
<!-- 头像 -->
|
||
|
|
<view class="avatarBox ver mt50">
|
||
|
|
<view class="avatar oh pr wh220 cir" @click="uploadImg('shopHeader')">
|
||
|
|
<image class="cir" :src="form.shopHeader" mode="aspectFill" v-if="form.shopHeader" />
|
||
|
|
<view class="pfull fmid" v-else>
|
||
|
|
<uni-icons type="plusempty" color="#999" size="80rpx" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="name mt20 c666 f24">店铺头像</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 表单 -->
|
||
|
|
<view class="form mt60 c333 f32">
|
||
|
|
<view class="title f36">我的资料</view>
|
||
|
|
|
||
|
|
<view class="item rows ptb20">
|
||
|
|
<view class="key c666">店铺名称</view>
|
||
|
|
<view class="value f1 ml20 tar">
|
||
|
|
<input v-model="form.shopName" type="text" placeholder="请输入店铺名称" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="item rows ptb20">
|
||
|
|
<view class="key c666">联系方式</view>
|
||
|
|
<view class="value f1 ml20 tar">
|
||
|
|
<input v-model="form.contact" type="text" placeholder="请输入联系方式" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="item rows ptb20">
|
||
|
|
<view class="key c666">产品所在地</view>
|
||
|
|
<view class="value f1 ml20 tar">
|
||
|
|
<input v-model="form.productLocation" type="text" placeholder="请选择产品所在地" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="item rows ptb20">
|
||
|
|
<view class="key c666">产品类别</view>
|
||
|
|
<view class="value f1 ml20 tar">
|
||
|
|
<input v-model="form.productCategory" type="text" placeholder="请选择产品类别" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="item rows ptb20">
|
||
|
|
<view class="key c666">客服联系电话</view>
|
||
|
|
<view class="value f1 ml20 tar">
|
||
|
|
<input v-model="form.customer" type="text" placeholder="请输入客服联系电话" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="item ptb20">
|
||
|
|
<view class="key c666">营业执照</view>
|
||
|
|
<view class="value imgList f1 mt20 tar">
|
||
|
|
<view class="imgs wh200" v-for="(item, index) in form.businessLicense" :key="index">
|
||
|
|
<image class="br10" :src="item" mode="aspectFill" />
|
||
|
|
<view class="close" @click="removeMedia(index,'businessLicense')">
|
||
|
|
<uni-icons type="clear" size="50rpx" color="#f00" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="upload imgs fmid wh200 br10" @click="uploadImg('businessLicense',2)">
|
||
|
|
<uni-icons type="plusempty" color="#E8E8E8" size="80rpx" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="item ptb20">
|
||
|
|
<view class="key c666">身份证正面</view>
|
||
|
|
<view class="value imgList f1 mt20 tar">
|
||
|
|
<view class="imgs wh200" v-if="form.idcard" @click="uploadImg('idcard',1)">
|
||
|
|
<image class="br10" :src="form.idcard" mode="aspectFill" />
|
||
|
|
</view>
|
||
|
|
<view class="upload imgs fmid wh200 br10" v-else @click="uploadImg('idcard',1)">
|
||
|
|
<uni-icons type="plusempty" color="#E8E8E8" size="80rpx" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="item ptb20">
|
||
|
|
<view class="key c666">身份证反面</view>
|
||
|
|
<view class="value imgList f1 mt20 tar">
|
||
|
|
<view class="imgs wh200" v-if="form.idcard2" @click="uploadImg('idcard2')">
|
||
|
|
<image class="br10" :src="form.idcard2" mode="aspectFill" />
|
||
|
|
</view>
|
||
|
|
<view class="upload imgs fmid wh200 br10" v-else @click="uploadImg('idcard2')">
|
||
|
|
<uni-icons type="plusempty" color="#E8E8E8" size="80rpx" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
<view class="fill" style="height: 120rpx;"></view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="footer plr60 bfff shadow">
|
||
|
|
<view class="btn lg colourful bar" @click="handleSubmit">提交</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
image {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 头像
|
||
|
|
.avatar {
|
||
|
|
background-color: #F6F8FE;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 上传
|
||
|
|
.upload {
|
||
|
|
background-color: #f4f4ff;
|
||
|
|
}
|
||
|
|
</style>
|