389 lines
12 KiB
Vue
389 lines
12 KiB
Vue
<script setup>
|
|
/**
|
|
* 商家入驻
|
|
* 进入页面获取最新的数据 如果发生变化 同步用户信息
|
|
* 1 待申请 显示入驻须知 是否缴纳押金
|
|
* 2 已申请/待审核 已缴纳押金并且提交表单
|
|
* 3 审核驳回 可选择取消押金 或 修改表单内容继续提交审核
|
|
* 4 审核成功 已成为商家 可选择取消商家身份 拿回押金 修改店铺信息重新提交审核
|
|
*/
|
|
import {
|
|
ref,
|
|
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
|
|
})
|
|
// 当前模式 notice入驻须知 wait审核中 fail驳回 form表单 success成功
|
|
const mode = ref('notice')
|
|
// 测试文本
|
|
const text = ref(
|
|
`<p>会员可选择从九亿平台入驻申请成为商家</p><br><p>1. 押金，在成为商家前需要先缴纳押金才可以申请成为商家，如果不想成为商家，可以选择退回押金取消商家分身，如果作为商家并且有进行中的订单，则需要等待订单完成才可以进行退回押金。</p><br><p>2. 申请，填写商家身份信息，商家头像，名称，联系方式，发货地点，商品分类，负责人身份信息作为材料申请，需经过九亿平台审核，才可以选择成为商家。</p><br><p>3. 审核，为保护平台公平性竞争，创造美好合作共赢的平台，九亿有权对您提交的店铺信息，发布的商品信息做审核，驳回，下架等行为，并且会及时通知到会员。</p><p>会员通过审核成为商家后，仍可以对自己的店铺信息做修改，并且平台会重新审核您的店铺信息，不得允许虚假等不良行为出现。</p><br><p>4. 商品，成为商家后，会员可以选在在平台发布自己的商品，可以发布视频对自己的商品做链接并进行投流推广，别人浏览到您的视频，可以选择点赞，评论等行为，增加您的视频热度，也可以通过收藏您的视频，对您的视频进行投流推广，让您的商品和视频可以受到更多人的关注，请会员尽情发挥想法，让自己的视频内容更受欢迎</p><br><p>5. 钱包，商家的商品产生订单后，其他会员付款会产生待入账的资金和榴莲果到您的钱包，当订单取消或平台申诉退款等行为，您的待入账的资产会原路退回到该订单用户中，当您的订单结束，已完成且无售后问题，您订单对应的待入账的信息将会进入到进的钱包中</p><br><p>6. 客服，您可以选择联系九亿平台咨询您想了解的任何问题，也可以通过消息联系用户通过店铺发起的订单咨询，以便于您更好的了解平台以及和其他会员的联系。</p><br><p>7. 运营，为保证平台公平、公正、公开，平台会不定期的复查，审核您的商户信息，请会员完善正确的信息，不得出现虚假，欺骗，等不良行为对平台或其他会员造成损失，否则平台有权对您的行为做出对应的行为。</p><p>平台会不定期更新商户的规则，请会员及时阅读。</p><br><p>平台祝每一位会员生活美满~</p>`
|
|
)
|
|
|
|
/**
|
|
* 上传图片
|
|
* @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>
|
|
<!-- 须知 -->
|
|
<template v-if="mode == 'notice'">
|
|
<view class="app">
|
|
<view class="notice oh mtb30 mlr30 plr30 ptb20 bfff br20">
|
|
<view class="title tac f34 c333 b">商家入驻须知</view>
|
|
<view class="content mtb50">
|
|
<rich-text :nodes="text"></rich-text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="tac c666 f28">继续即代表同意《商家入驻须知》</view>
|
|
|
|
<view class="fill" style="height: 160rpx;"></view>
|
|
|
|
<view class="footer plr30 bfff shadow">
|
|
<!-- 未缴纳押金 -->
|
|
<template v-if="0">
|
|
<view class="btn black">缴纳押金</view>
|
|
</template>
|
|
<template v-else>
|
|
<view class="rows">
|
|
<view class="btn cancel plr30">退回押金</view>
|
|
<view class="btn colourful f1" @click="mode = 'form'">申请入驻</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<!-- 审核中 -->
|
|
<template v-else-if="mode == 'wait'">
|
|
<view class="app">
|
|
<view class="result ver">
|
|
<uni-icons type="checkbox-filled" color="#20D200" size="160rpx" />
|
|
<view class="title mtb30 f34">申请中</view>
|
|
<view class="value f30">
|
|
<text class="c333">提交成功，请等待后台审核</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="fill" style="height: 160rpx;"></view>
|
|
|
|
<view class="footer rows plr30 bfff shadow">
|
|
<view class="btn cancel f1">取消申请并退回押金</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<!-- 审核驳回 -->
|
|
<template v-else-if="mode == 'fail'">
|
|
<view class="app">
|
|
<view class="result ver">
|
|
<uni-icons type="clear" color="#ff0000" size="160rpx" />
|
|
<view class="title mtb30 f34">审核驳回</view>
|
|
<view class="value f30">
|
|
<text class="c666">驳回原因：</text>
|
|
<text class="c333">身份证照片不清晰</text>
|
|
</view>
|
|
<view class="reject mtb30 c666 f28">
|
|
<view>驳回结果异议？ 可在个人中心-设置里面联系我们</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="fill" style="height: 160rpx;"></view>
|
|
|
|
<view class="footer rows plr30 bfff shadow">
|
|
<view class="btn cancel plr30">退回押金</view>
|
|
<view class="btn colourful f1" @click="mode = 'form'">修改信息</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<!-- 申请成功 -->
|
|
<template v-else-if="mode == 'success'">
|
|
<view class="app">
|
|
<view class="result ver">
|
|
<uni-icons type="checkbox-filled" color="#20D200" size="160rpx" />
|
|
<view class="title mtb30 f34">恭喜您，您已成为商家</view>
|
|
</view>
|
|
|
|
<!-- <view class="menu oh mtb30 mlr30 plr20 c333 f30 bfff br10">
|
|
<view class="line rows">
|
|
<view class="key">商家主页</view>
|
|
<uni-icons type="right"></uni-icons>
|
|
</view>
|
|
|
|
<view class="line rows">
|
|
<view class="key">发布产品</view>
|
|
<uni-icons type="right"></uni-icons>
|
|
</view>
|
|
|
|
<view class="line rows">
|
|
<view class="key">修改信息</view>
|
|
<uni-icons type="right"></uni-icons>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
</template>
|
|
|
|
<!-- 表单申请 -->
|
|
<template v-else-if="mode == 'form'">
|
|
<view class="appbw plr30">
|
|
<!-- 头像 -->
|
|
<view class="avatarBox ver mt50">
|
|
<view class="avatar oh pr wh220 br20" @click="uploadImg('shopHeader')">
|
|
<image class="img br20" :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="img 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="img 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="img 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: 150rpx;"></view>
|
|
</view>
|
|
|
|
<view class="footer plr30 bfff shadow">
|
|
<view class="rows">
|
|
<view class="btn cancel plr30">退回押金</view>
|
|
<view class="btn colourful f1" @click="handleSubmit">申请入驻</view>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
// 头像
|
|
.avatar {
|
|
background-color: #F6F8FE;
|
|
}
|
|
|
|
// 上传
|
|
.upload {
|
|
background-color: #f4f4ff;
|
|
}
|
|
|
|
// 审核结果
|
|
.result {
|
|
margin-top: 30rpx;
|
|
padding: 50rpx 0;
|
|
background-color: #fff;
|
|
}
|
|
|
|
// 发布
|
|
.menu {
|
|
.line {
|
|
padding: 20rpx 10rpx;
|
|
|
|
&+.line {
|
|
border-top: 2rpx solid #eee;
|
|
}
|
|
}
|
|
}
|
|
</style> |