jiuyiUniapp/jiuyi/pages/shop/settle.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>