new-mshop-view/pages/agent/invite/index.vue

387 lines
10 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="main-content">
<!--标题-->
<view class="title">{{ page_title }}</view>
<!--表单-->
<view class="form-content">
<view class="line">
<view class="line-content">
<view class="title">邀请人</view>
<view class="right">
<view class="user-content" v-if="invite_agent_info.uid > 0">
<image class="image-img-image" :src="invite_agent_info.user.avatar" mode="widthFix"></image>
<view class="user-info">
<view class="nickname">{{ invite_agent_info.user.nickname}}</view>
<view class="uid">UID{{ invite_agent_info.user.uid}}</view>
</view>
</view>
</view>
</view>
</view>
<view class="line">
<view class="line-content">
<view class="title">联系人姓名</view>
<input type="text" v-model="apply_info.contact_name" maxlength="15" placeholder="请输入联系人姓名" />
</view>
</view>
<view class="line">
<view class="line-content">
<view class="title">联系人电话</view>
<input type="text" v-model="apply_info.contact_phone" maxlength="20" placeholder="请输入联系人电话" />
</view>
</view>
<!-- 地区选择仅【2=省公司,3=省合伙人(外勤),4=省合伙人(内勤),5=区县运营商,6=区县合伙人,7=餐厅】显示 -->
<!-- 市、区县 仅【5=区县运营商,6=区县合伙人,7=餐厅】显示 -->
<!-- 镇/街道 仅【7=餐厅】显示 -->
<block v-if="['2','3','4','5','6','7'].includes(String(agent_type))">
<view class="line">
<view class="line-content">
<view class="title">地区选择</view>
<input type="text" placeholder="点击选择地区信息" readonly disabled @click="areaPopupChange" />
</view>
</view>
</block>
<!-- 仅餐厅 显示详细地址、定位 商户名称、商户分类、商户类型、营业执照及行业相关资质证明图片 -->
<block v-if="agent_type == 7">
</block>
<!--提交按钮-->
<view class="group-btn">
<view class="add-btn">提交</view>
</view>
</view>
<!-- 地区选择器 -->
<areaSelect
:isShow="area_status"
:is_show_province="['2','3','4','5','6','7'].includes(String(agent_type))"
:is_show_city="['5','6','7'].includes(String(agent_type))"
:is_show_area="['5','6','7'].includes(String(agent_type))"
:is_show_street="['7'].includes(String(agent_type))"
@close="areaPopupChange(false)"
@changeArea="areaChange"
></areaSelect>
<!--授权登录-->
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>
</view>
</template>
<script>
import {mapGetters} from "vuex";
import authorize from '@/components/Authorize';
import areaSelect from '@/components/areaSelect';
import {getSingleAgentInfo,getAgentConfig} from "@/api/agent";
export default {
name: 'business',
components: {
authorize,
areaSelect
},
computed: {
...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor'])
},
data() {
return {
page_title: '修改申请信息',
config: {},
// 登录相关
isAuto: false, //没有授权的不会自动授权
isShowAuth: false,//是否隐藏授权
// 邀请信息
invite_agent_info: {},
agent_type: 0,// 申请入驻类型 类型2=省公司,3=省合伙人(外勤),4=省合伙人(内勤),5=区县运营商,6=区县合伙人,7=餐厅,8=配送商
agent_id: 0,// 邀请人代理id
apply_info_id: 0,// 申请信息id
apply_info:{
pid: 0,
},
// 地区选择器
area_status: false,
}
},
onLoad(options) {
let _this = this;
if(options.scene){
console.log('转换前参数:',options.scene)
let scene = _this.$util.getUrlParams(decodeURIComponent(options.scene));
console.log("接收参数",scene)
_this.agent_id = scene.aid || 0;
_this.agent_type = scene.lv || 0;
}
// 判断agent_id <= 0 || agent_type <= 1 抛出错误,返回个人中心
if(Number(_this.agent_id) <= 0 && Number(_this.agent_type) <= 1){
_this.$util.Tips({
title: '非法访问,无邀请人!',
},{tab:1,url:'/pages/user/index'});
}
// 判断:是否登录
if (!this.isLogin) {
// 未登录 授权登录
this.isAuto = true;
this.isShowAuth = true
}else{
// 已登录 获取信息
this.init();
}
},
methods: {
// 授权回调
onLoadFun() {
if(this.isLogin){
this.isShowAuth = false;
this.init();
}
},
// 授权关闭
authClose(e) {
this.isShowAuth = e
},
// 授权成功 初始化
init () {
this.getInviteAgentInfo()
this.generatePageTitle();
this.getConfig();
},
// 获取邀请人信息
getInviteAgentInfo(){
let _this = this;
getSingleAgentInfo(_this.agent_id).then(res => {
if (res.status == 200) {
let data = res.data || {};
if(Number(data.id) <= 0){
_this.$util.Tips({
title: '非法访问,无有效邀请人!'
},{tab:1,url:'/pages/user/index'});
return false;
}else{
_this.invite_agent_info = data || {};
}
}
}).catch(err => {
this.$util.Tips({title: err});
});
},
// 生成页面标题
generatePageTitle(){
let _this = this;
let title = '修改申请信息';
// 不是修改信息 生成对应标题
if(Number(_this.apply_info_id) <= 0){
title = '申请成为';
switch (Number(_this.agent_type)) {
case 2: title += '省公司';break;
case 3: title += '外勤';break;
case 4: title += '内勤';break;
case 5: title += '运营商';break;
case 6: title += '合伙人';break;
case 7: title += '餐厅';break;
case 8: title += '配送商';break;
}
}
// 设置页面标题
uni.setNavigationBarTitle({
title: title
});
_this.page_title = title;
},
// 获取配置信息
getConfig(){
let _this = this;
getAgentConfig().then(res => {
if (res.status == 200) {
_this.config = res.data || {};
}
}).catch(err => {
this.$util.Tips({title: err});
});
},
// 地区选择器 - 显示/关闭 弹框
areaPopupChange(status = true){
this.area_status = status;
},
// 地区选择器 - 地区改变
areaChange(data){
console.log("地区改变", data)
}
}
}
</script>
<style scoped lang="scss">
.main-content{
width: 100vw!important;
min-height: 100vh!important;
background: orange;
padding: 0 20rpx 100rpx 20rpx;
.title{
height: 100rpx;
line-height: 100rpx;
font-size: 32rpx;
width: 100%;
text-align: center;
font-weight: bold;
}
.form-content{
background: #FFFFFF;
border-radius: 20rpx!important;
padding: 20rpx!important;
.line{
width: 100%;
.line-content{
width: 100%;
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
.title{
font-size: 28rpx;
width: 150rpx;
text-align: right;
}
input{
width: calc(100% - 165rpx) !important;
}
.right{
width: calc(100% - 165rpx) !important;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
.right-btn{
color: #fff;
background-color: #409eff;
border-color: #409eff;
width: 150rpx;
text-align: center;
height: 50rpx;
line-height: 50rpx;
border-radius: 10rpx;
}
.box-value{
width: calc(100% - var(--box-width-));
.image-size-set{
width: 210rpx;
height: 210rpx;
border: 2rpx solid #dddddd;
border-radius: 8rpx;
display: inline-flex;
flex-direction: row;
justify-content: center;
flex-wrap: nowrap;
align-items: center;
image{
max-width: 100% !important;
max-height: 100% !important;
}
}
.upload-btn-box{
font-size: 24rpx;
color: #999999;
display: inline-flex;
flex-direction: column!important;
justify-content: center;
flex-wrap: nowrap;
align-items: center;
.upload-btn-icon{
width: 45rpx !important;
}
}
}
}
}
.user-content{
width: 100%;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
.image-img-image{
width: 80rpx!important;
height: 80rpx!important;
border-radius: 50% !important;
margin-right: 15rpx!important;
}
.user-info{
width: calc(100% - 100rpx);
.nickname{
height: 40rpx;
line-height: 40rpx;
font-size: 28rpx;
font-weight: bold;
}
.uid{
height: 40rpx;
line-height: 40rpx;
font-size: 26rpx;
}
}
}
}
.group-btn{
margin-top: 80rpx!important;
width: 100%;
display: inline-flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
flex-direction: row;
.add-btn{
height: 80rpx;
line-height: 80rpx;
width: 100%;
text-align: center;
font-size: 30rpx;
color: #fff;
background-color: #409eff;
border-color: #409eff;
border-radius: 15rpx;
}
}
}
}
.picker-box{
width: 100% !important;
text-align: left!important;
height: 43rpx;
}
</style>