wanma-benteng
/
new-mshop-view
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加：供应商申请入驻

This commit is contained in:
wuhui_zzw 2024-01-30 14:50:28 +08:00
parent 1b252f13e7
commit ea8fda7412
6 changed files with 410 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api/agent.js
View File

@ -4,7 +4,7 @@ import request from "@/utils/request.js";
export function myAgentList(data) {
return request.get('agent/agent_list',data);
}
// 商户中心 - 供应商入驻邀请二维码
// 代理中心 - 供应商入驻邀请二维码
export function inviteSupplierJoinQrCode(data) {
return request.get('agent/qr_code_invite_supplier',data);
}
@ -12,6 +12,10 @@ export function inviteSupplierJoinQrCode(data) {
// 获取单条代理人员信息
export function getSingleAgentInfo(id) {
return request.get(`agent/single_agent_info/${id}`);
}

12
api/supplier.js Normal file
View File

@ -0,0 +1,12 @@
import request from "@/utils/request.js";
// 入驻申请
export function supplierApplyJoin(data) {
return request.post(`supplier/apply`, data);
}

659
pages/supplier/apply_join.vue
View File

@ -1,107 +1,211 @@
<template>
<view class="main-content">
<!-- 顶部信息 -->
<view class="header">
<view class="header-box" @click="changeAgentPopupShow">
<span class='font line1'>{{ getAgentTypeText(agent_info, '暂无代理身份') }}</span>
<template v-if="Object.values(agent_list).length > 1">
<text class="iconfont icon-xiala1 spin"></text>
</template>
</view>
</view>
<!--操作内容-->
<view v-if="Object.values(menu_list).length > 0" class="menu-list">
<view @click="clickMenu(item)" class="listBox" v-for="(item,index) in menu_list">
<text :class="item.icon" class="businessIcon"></text>
<view>{{item.title}}</view>
<view class="main-content" :style="viewColor">
<!--申请表单-->
<view class="form-content">
<!--背景图片-->
<image mode="widthFix" class="bg-img" src="@/static/images/supplier/supplier_apply_bg.png" />
<!--表单内容-->
<view class='form-main'>
<!--申请记录查看按钮-->
<!--<view class="apply-record">-->
<!-- 申请记录 <text class="iconfont icon-xiangyou"></text>-->
<!--</view>-->
<!--申请表单-->
<view class="list">
<view class="list-item list-input-item">
<text class="item-name">邀请人</text>
<view v-if="invite_agent_info.uid > 0" class="manage-info">
<view class="left">
<image class="left-image" :src="invite_agent_info.user.avatar" />
</view>
<view class="right">
<view class="nickname">{{ invite_agent_info.user.nickname || invite_agent_info.user.real_name || invite_agent_info.user.uid }}</view>
<view class="uid">UID：{{ invite_agent_info.user.uid }}</view>
</view>
</view>
</view>
<view class="list-item list-input-item">
<text class="item-name">酒厂名称</text>
<input class="item-input" type="text" placeholder="请输入酒厂名称" v-model="apply_info.winery_name"/>
</view>
<view class="list-item list-input-item">
<text class="item-name">生产规模(年/吨)</text>
<input class="item-input" type="text" placeholder="请输入每年产量多少吨" v-model="apply_info.scale"/>
</view>
<view class="list-item list-input-item">
<text class="item-name">窖池大小(m³)</text>
<input class="item-input" type="text" placeholder="请输入窖池大小为多少立方米" v-model="apply_info.cellar_size"/>
</view>
<view class="list-item list-input-item">
<text class="item-name">法人姓名</text>
<input class="item-input" type="text" placeholder="请输入法人姓名" v-model="apply_info.corporation_name"/>
</view>
<view class="list-item list-input-item">
<text class="item-name">法人电话</text>
<input class="item-input" type="text" placeholder="请输入法人电话" v-model="apply_info.corporation_phone"/>
</view>
<view class="list-item list-img-item">
<view class="item-title">请上传法人身份证正反面图片</view>
<view class="item-desc">(身份证正面和反面图片各一张,图片格式支持JPG、PNG、JPEG)</view>
<view class="upload">
<view class='pictrue' v-for="(item,index) in apply_info.corporation_id_card" :key="index" :data-index="index">
<image :src='item'></image>
<text class='iconfont icon-guanbi1' @click="delPic(index,'corporation_id_card')"></text>
</view>
<view class='pictrue acea-row row-center-wrapper row-column'
@click="uploadPic('corporation_id_card')"
v-if="Object.values(apply_info.corporation_id_card).length < 2">
<text class='iconfont icon-icon25201'></text>
<view>上传图片</view>
</view>
</view>
</view>
<view class="list-item list-input-item">
<text class="item-name">董事长姓名</text>
<input class="item-input" type="text" placeholder="请输入董事长姓名" v-model="apply_info.chairman_name" />
</view>
<view class="list-item list-input-item">
<text class="item-name">董事长电话</text>
<input class="item-input" type="text" placeholder="请输入董事长电话" v-model="apply_info.chairman_phone" />
</view>
<view class="list-item list-img-item">
<view class="item-title">请上传董事长身份证正反面图片</view>
<view class="item-desc">(身份证正面和反面图片各一张,图片格式支持JPG、PNG、JPEG)</view>
<view class="upload">
<view class='pictrue' v-for="(item,index) in apply_info.chairman_id_card" :key="index" :data-index="index">
<image :src='item'></image>
<text class='iconfont icon-guanbi1' @click="delPic(index,'chairman_id_card')"></text>
</view>
<view class='pictrue acea-row row-center-wrapper row-column'
@click="uploadPic('chairman_id_card')"
v-if="Object.values(apply_info.chairman_id_card).length < 2">
<text class='iconfont icon-icon25201'></text>
<view>上传图片</view>
</view>
</view>
</view>
<view class="list-item list-input-item">
<text class="item-name">联系人姓名</text>
<input class="item-input" type="text" placeholder="请输入联系人姓名" v-model="apply_info.contacts_name"/>
</view>
<view class="list-item list-input-item">
<text class="item-name">联系人电话</text>
<input class="item-input" type="text" placeholder="请输入联系人电话" v-model="apply_info.contacts_phone"/>
</view>
<view class="list-item list-img-item">
<view class="item-title">请上传营业执照</view>
<view class="item-desc">(图片格式支持JPG、PNG、JPEG)</view>
<view class="upload">
<view class='pictrue' v-if="apply_info.business_license">
<image :src='apply_info.business_license'></image>
<text class='iconfont icon-guanbi1' @click="delPic('','business_license')"></text>
</view>
<view v-else class='pictrue acea-row row-center-wrapper row-column' @click="uploadPic('business_license')">
<text class='iconfont icon-icon25201'></text>
<view>上传图片</view>
</view>
</view>
</view>
<view class="list-item list-img-item">
<view class="item-title">请上传生产许可证</view>
<view class="item-desc">(图片格式支持JPG、PNG、JPEG)</view>
<view class="upload">
<view class='pictrue' v-if="apply_info.production_icense">
<image :src='apply_info.production_icense'></image>
<text class='iconfont icon-guanbi1' @click="delPic('','production_icense')"></text>
</view>
<view v-else class='pictrue acea-row row-center-wrapper row-column' @click="uploadPic('production_icense')">
<text class='iconfont icon-icon25201'></text>
<view>上传图片</view>
</view>
</view>
</view>
<view class="list-item list-img-item">
<view class="item-title">请上传流通许可证</view>
<view class="item-desc">(图片格式支持JPG、PNG、JPEG)</view>
<view class="upload">
<view class='pictrue' v-if="apply_info.circulative_license">
<image :src='apply_info.circulative_license'></image>
<text class='iconfont icon-guanbi1' @click="delPic('','circulative_license')"></text>
</view>
<view v-else class='pictrue acea-row row-center-wrapper row-column' @click="uploadPic('circulative_license')">
<text class='iconfont icon-icon25201'></text>
<view>上传图片</view>
</view>
</view>
</view>
<!--提交按钮-->
<view class="submit-btn" @click="submitInfo">提交申请</view>
</view>
</view>
</view>
<emptyPage v-else title="暂无任何操作权限~"></emptyPage>
<!--授权登录-->
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>
<!--切换代理身份-->
<uni-popup ref="changeAgent" type="bottom">
<view class="change-agent-content">
<scroll-view scroll-y="true">
<radio-group name="store_name" @change="changeAgent">
<template v-for="(item,index) in agent_list">
<div class="store-list">
<label :key="item.id" class="store-list-item">
<view class="text">{{ getAgentTypeText(item) }}</view>
<radio class="radio" :value="index" :checked="agent_info.id == item.id ? true : false" />
</label>
</div>
</template>
</radio-group>
</scroll-view>
</view>
</uni-popup>
<!--二维码-->
<uni-popup ref="qrCodePopup" type="center">
<view class="qr-code-content">
<image class="image" :src="qrCode"></image>
<view class="close-qr-code" @click="closeQrCode()">关闭</view>
</view>
</uni-popup>
</view>
</template>
<script>
import emptyPage from '@/components/emptyPage.vue'
import {mapGetters} from "vuex";
import authorize from '@/components/Authorize';
import { myAgentList,inviteSupplierJoinQrCode } from "@/api/agent";
import {getSingleAgentInfo} from "@/api/agent";
import {supplierApplyJoin} from "@/api/supplier";
export default {
name: 'business',
components: {
authorize,
emptyPage,
},
computed: {
...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor'])
},
data() {
return {
apply_info:{
invite_agent_id: 0,
winery_name: '',
scale: '',
cellar_size: '',
corporation_name: '',
corporation_phone: '',
corporation_id_card: {},
chairman_name: '',
chairman_phone: '',
chairman_id_card: {},
contacts_name: '',
contacts_phone: '',
business_license: '',
production_icense: '',
circulative_license: ''
},
// 登录相关
isAuto: false, //没有授权的不会自动授权
isShowAuth: false,//是否隐藏授权
// 代理信息
agent_list: {},
agent_info: {},
// 操作菜单
menu_list: [
{
title: '推广二维码',
type: 'supplier_qr_code',
url: '',
icon: 'iconfont icon-erweima1'
},
{
title: '客服记录',
type: 'customer',
url: '/pages/chat/customer_list/index?type=1&mer_id=',
icon: 'iconfont icon-kefujilu'
},
],
// 二维码
qrCode: '',
// 邀请信息
invite_agent_info: {},
}
},
onLoad(options) {
let _this = this;
if(options.scene){
console.log('转换前参数：',options.scene)
let scene = _this.$util.getUrlParams(decodeURIComponent(options.scene));
console.log("接收参数",scene)
this.apply_info.invite_agent_id = scene.agent_id || 0;
}
// 判断：是否存在邀请人
if(Number(_this.apply_info.invite_agent_id) <= 0){
_this.$util.Tips({
title: '非法访问，无邀请人！',
},{tab:1,url:'/pages/user/index'});
}
// 判断：是否登录
if (!this.isLogin) {
if (!_this.isLogin) {
// 未登录 授权登录
this.isAuto = true;
this.isShowAuth = true
_this.isAuto = true;
_this.isShowAuth = true
}else{
// 已登录 获取信息
this.init();
_this.init();
}
},
methods: {
@ -118,228 +222,251 @@ export default {
},
// 授权成功 初始化
init () {
this.getMyAgentList();
this.getInviteAgentInfo()
},
// 代理身份操作 - 获取当前登录用户的代理身份列表
getMyAgentList(){
// 获取邀请人信息
getInviteAgentInfo(){
let _this = this;
let params = {
is_get_self: 1,
not_page: 1
};
myAgentList(params).then(res => {
getSingleAgentInfo(_this.apply_info.invite_agent_id).then(res => {
if (res.status == 200) {
let data = res.data || {};
if(Object.values(data).length <= 0){
this.$util.Tips({
title: '无有效的代理身份！',
if(Number(data.id) <= 0){
_this.$util.Tips({
title: '非法访问，无有效邀请人！'
},{tab:1,url:'/pages/user/index'});
return false;
}else{
_this.agent_list = res.data;
_this.agent_info = res.data[0] || {};
_this.invite_agent_info = data || {};
}
}
}).catch(err => {
this.$util.Tips({title: err});
});
},
// 代理身份操作 - 切换弹框显示
changeAgentPopupShow(){
if(Object.values(this.agent_list).length <= 1) return false;
this.$refs.changeAgent.open('bottom')
// 图片上传 - 点击上传图片
uploadPic(field) {
let _this = this;
_this.$util.uploadImageOne('upload/image', function(res) {
if(res.status == 200){
let data = res.data || {};
let pics = data.path || '';
if(field === 'corporation_id_card' || field === 'chairman_id_card'){
pics = Object.values(_this.apply_info[field]);
pics[Object.values(pics).length] = data.path || '';
}
_this.$set(_this.apply_info, field, pics);
}
});
},
// 代理身份操作 - 切换弹框关闭
changeAgentPopupClose(){
this.$refs.changeAgent.close();
},
// 代理身份操作 - 切换代理
changeAgent(e){
let index = e.detail.value || e.target.value;
this.agent_info = this.agent_list[index] || {};
this.changeAgentPopupClose();
},
// 渲染类型信息
getAgentTypeText(info, title = '') {
switch (Number(info.agent_type)) {
case 1:
title = '发起人';
break;
case 2:
title = '省公司';
if(info.province_name) title += `(${info.province_name})`;
break;
case 3:
title = '外勤';
if(info.province_name) title += `(${info.province_name})`;
break;
case 4:
title = '内勤';
if(info.province_name) title += `(${info.province_name})`;
break;
case 5:
title = '运营商';
if(info.province_name || info.area_name || info.area_name) title += `(${info.province_name}${info.city_name}${info.area_name})`;
break;
case 6:
title = '合伙人';
if(info.province_name || info.area_name || info.area_name) title += `(${info.province_name}${info.city_name}${info.area_name})`;
break;
case 7:
title = '餐厅';
if(info.mer && info.mer.mer_name) title += `(${info.mer.mer_name})`;
break;
case 8:
title = '配送商';
break;
// 图片生成 - 删除图片
delPic(index, field){
let _this = this;
let pics = '';
if(field === 'corporation_id_card' || field === 'chairman_id_card'){
pics = Object.values(_this.apply_info[field]);
pics.splice(index, 1);
}
return title;
_this.$set(_this.apply_info, field, pics);
},
// 点击菜单 进行对应的操作
clickMenu(menu){
// 提交信息
submitInfo(){
let _this = this;
switch (menu.type) {
// 邀请供应商入驻
case 'supplier_qr_code':
inviteSupplierJoinQrCode({agent_id: _this.agent_info.id}).then(res => {
if (res.status == 200) {
_this.qrCode = res.data.qr_code || '';
_this.$refs.qrCodePopup.open('center');
}
}).catch(err => {
this.$util.Tips({title: err});
supplierApplyJoin(_this.apply_info).then(res => {
console.log("提交结果",res)
if (res.status == 200) {
_this.$util.Tips({
title: '操作成功！',
});
break;
}
},
// 关闭二维码弹框
closeQrCode() {
this.$refs.qrCodePopup.close();
}
}).catch(err => {
this.$util.Tips({title: err});
});
},
}
}
</script>
<style scoped lang="scss">
.main-content{
// 顶部信息
.header {
height: 305rpx;
background: linear-gradient(180deg, #2291F8 0%, rgba(34,145,248,0) 100%);
position: fixed;
width: 100%;
text-align: center;
top: 0;
left: 0;
.header-box {
width: max-content;
margin: 33rpx auto 0 auto;
position: relative;
padding: 10rpx;
background-color: rgba(0, 0, 0, .25);
border-radius: 30rpx;
color: #FFFFFF;
.font {
display: inline-block;
margin-left: 10rpx;
line-height: 28rpx;
}
.spin {
display: inline-block;
transform: rotate(180deg);
font-size: 36rpx;
}
}
}
// 操作菜单列表
.menu-list {
width: 100%;
padding: 0 calc((100% - (345rpx * 2)) / 3);
margin-top: 151rpx;
display: inline-flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
.listBox {
width: 345rpx;
height: 270rpx;
background: #FFFFFF;
box-shadow: 0rpx 5rpx 15rpx rgba(142, 82, 77, 0.1);
border-radius: 20rpx;
z-index: 1;
margin-bottom: 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
image {
width: 66rpx;
height: 66rpx;
background: #F34C20;
}
}
.businessIcon {
color: #2291F8;
font-size: 80rpx;
display: inline-block;
margin-bottom: 29rpx;
}
}
// 切换代理
.change-agent-content{
width: 100vw!important;
min-height: 65vh!important;
background-color: #fff;
border-top-left-radius: 30rpx!important;
border-top-right-radius: 30rpx!important;
padding: 30rpx!important;
.store-list{
width: 100% !important;
height: 120rpx;
line-height: 120rpx;
.store-list-item{
width: 100%;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.store-list-item:not(:last-child){
border-bottom: 2rpx solid #f6f6f6;
}
.title{
width: calc(100% - 80rpx) !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
width: 100vw;
min-height: 100vh!important;
/deep/ radio .wx-radio-input.wx-radio-input-checked, /deep/radio .uni-radio-input.uni-radio-input-checked {
border: 1px solid #2291F8 !important;
background-color: #2291F8 !important
}
}
// 二维码弹框
.qr-code-content{
width: 80vw;
.image{
width: 80vw;
height: 80vw;
}
.close-qr-code{
position: fixed;
top: 35rpx;
right: 70rpx;
color: #FFFFFF;
border: 2rpx solid #FFFFFF;
height: 40rpx;
line-height: 36rpx;
padding: 0 20rpx;
border-radius: 50rpx;
.form-content{
position: relative;
.bg-img{
width: 100vw !important;
height: 2800rpx !important;
}
.form-main{
position: absolute;
top: 270rpx;
left: 0;
width: 100vw;
padding: 60rpx 30rpx 30rpx 30rpx;
.apply-record{
position: absolute;
display: flex;
align-items: center;
top: 0;
right: 0;
color: #fff;
font-size: 22rpx;
background-color: rgba(0, 0, 0, 0.3);
padding: 8rpx 18rpx;
border-radius: 20px 0px 0px 20px;
.icon-xiangyou{
font-size: 22rpx!important;
}
}
.list{
width: 100%;
padding: 30rpx;
background: #FFFFFF;
border-top-right-radius: 30rpx;
border-top-left-radius: 30rpx;
.list-input-item{
width: 100%;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
.item-name{
width: 230rpx;
height: 40rpx;
line-height: 40rpx;
text-align: left;
font-size: 28rpx;
}
.item-input{
width: calc(100% - 230rpx) !important;
font-size: 30rpx;
}
}
.list-img-item{
width: 100%;
display: inline-flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: center;
.item-title{
color: #666666;
font-size: 28rpx;
display: block;
}
.item-desc{
color: #B2B2B2;
font-size: 22rpx;
display: block;
margin-top: 8rpx;
line-height: 36rpx;
}
.upload{
margin-top: 20rpx;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
.pictrue {
width: 130rpx;
height: 130rpx;
position: relative;
font-size: 11px;
color: #bbb;
margin-right: 15rpx;
margin-bottom: 15rpx;
&:nth-child(4n) {
margin-right: 0;
}
&:nth-last-child(1) {
border: 0.5px solid #ddd;
box-sizing: border-box;
}
uni-image, image {
width: 100%;
height: 100%;
border-radius: 1px;
img {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
display: block;
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
}
}
.icon-guanbi1 {
font-size: 33rpx;
position: absolute;
top: -10px;
right: -10px;
}
}
}
}
.list-item:not(:last-child){
padding-bottom: 35rpx;
border-bottom: 1px solid #eee;
}
.submit-btn{
width: 100%;
margin: 50rpx auto auto auto;
height: 90rpx;
line-height: 90rpx;
border-radius: 50rpx;
text-align: center;
font-size: 15px;
color: #fff;
background: #409eff;
}
.manage-info {
width: calc(100% - 230rpx) !important;
margin-top: 20rpx;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
.left {
width: 100rpx;
text-align: left;
.left-image {
width: 90rpx;
height: 90rpx;
border-radius: 50%;
}
}
.right {
width: calc(100% - 100rpx);
.nickname {
width: 100%;
font-size: 30rpx;
font-weight: bold;
}
.uid {
width: 100%;
}
}
}
}
}
}
}
</style>

BIN
static/images/supplier/supplier_apply_bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 277 KiB

BIN
static/images/supplier/supplier_apply_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 215 KiB

BIN
static/images/supplier/supplier_spply_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB