apply-assistant-v3/root/person/marge.vue

<template>
	<view class="p-person-marge g_w_all g_h_all g_bg_f_5 g_kuaishou">
		<view class="g_bg_f sticky" :style="{ boxShadow: '0px 4px 4px 0px rgba(218, 218, 218, 0.5)' }">
			<u-tabs bg-color="transparent" 
							:list="menuList" 
							:is-scroll="false" 
							:current="menuActive" 
							:active-color="globalData.themeColor" 
							bar-width="64" 
							bar-height="6" 
							@change="handleUpdateMenu" 
							font-size="32" 
							duration="0.05" 
							height="76"
			></u-tabs>
		</view>
		
		<!-- 收到的 -->
		<div class="m-recives-obj" v-if="menuActive == 0">
			<view v-if="recivesRecord && recivesRecord.length == 0"
					  class="g_flex_column_center" style="padding-top: 130px;"
			>
				<g-empty />
			</view>
			<view v-if="recivesRecord && recivesRecord.length > 0"
					  class="g_flex_column_center m-rlist"
			>
				<view class="" style="height: 10px;">
					
				</view>
				<view class="g_flex_row_between m-item g_h_60"
							v-for="(item,index) in recivesRecord" :key="index"
				>
					<view class="avatar-obj g_flex_none g_flex_column_center" style="height: 60px;overflow: hidden;border-radius: 50%;">
						<image src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/dailibaoming/APP/default.svg" alt=""
							mode="widthFix" style="width: 40px;border-radius: 50%;"
						/>
					</view>
					<view class="info-obj g_flex_1 g_flex_column_center" style="margin: 0 10px;">
						<view class="g_ell_1 g_fs_16 g_fw_600">
							{{item.sourceAgency.agencyName}}
						</view>
						<view class="g_ell_1 g_fs_14" style="color: #666;margin-top: 8px;">
							{{item.desp || '-'}}
						</view>
					</view>
					<view class="status-obj g_flex_none g_flex_column_center" >
						<view class="g_flex_row_end">
							<g-button type='primary' size='mini' btnText='通过' @clickBtn='handleSet(item,1)'></g-button>
							<g-button type='delete' size='mini' btnText='拒绝' style="margin-left: 12px;" @clickBtn='handleSet(item,0)'></g-button>
						</view>
					</view>
				</view>
			</view>
		</div>
		<!-- 申请/发起 -->
		<view class="m-applys-obj" v-if="menuActive == 1">
			<view class="m-aform g_flex_row_start g_h_60"
					  @click="openApply"
			>
				<view class="g_flex_none g_flex_c label">
					<i class="iconfont icon-jia1 icon"></i>
				</view>
				<view class="g_flex_1 g_flex_column_center value">申请合并</view>
			</view>
			<div class="m-alist">
				<view v-if="applysRecord && applysRecord.length == 0"
						  class="g_flex_column_center" style="padding-top: 130px;"
				>
					<g-empty />
				</view>
				<view v-if="applysRecord && applysRecord.length > 0"
						  class="g_flex_column_center as"
				>
					<view class="g_flex_row_between m-item g_h_60"
								v-for="(item,index) in applysRecord" :key="index"
					>
						<view class="avatar-obj g_flex_none g_flex_column_center" style="height: 60px;overflow: hidden;border-radius: 50%;">
							<image src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/dailibaoming/APP/default.svg" alt=""
								mode="widthFix" style="width: 40px;border-radius: 50%;"
							/>
						</view>
						<view class="info-obj g_flex_1 g_flex_column_center" style="margin: 0 10px;">
							<view class="g_ell_1 g_fs_16 g_fw_600">
								{{item.targetAgency.agencyName}}
							</view>
							<view class="g_ell_1 g_fs_14" style="color: #666;margin-top: 8px;">
								{{item.desp || '-'}}
							</view>
						</view>
						<view class="status-obj g_flex_none g_flex_column_center" >
							<view v-if="item.state == 0" style="color: orange;font-size: 16px;">审核中</view>
							<view v-if="item.state == 1" style="color: green;font-size: 16px;">已通过</view>
							<view v-if="item.state == 2" style="color: red;font-size: 16px;">已驳回</view>
						</view>
					</view>
				</view>
			</div>
		</view>
		
		
		<u-popup v-model="modalApplyData.isShow" mode="bottom" border-radius="14" width="80%" :closeable='true'>
			<view style="max-height: calc(100vh - 200px);overflow-y: auto;">
				<view class="g_flex_c g_h_40 g_fs_16">申请合并</view>
				<view>
					<view>
						<view class="g_pb_8 g_pl_20 g_c_6">手机号</view>
						<view class="g_flex_row_start">
							<view class="g_flex_1 g_flex_column_center">
								<u-input v-model="modalApplyData.tel"
											   placeholder="请输入"
												 type="number"
												 maxlength="11"
												 style="width: calc(100% - 64px); z-index: 0;background-color: #ededed;border-radius: 6px;margin: 0 auto;padding: 0 16px;"
								></u-input>
							</view>
							<view class="g_flex_none g_flex_column_center g_mr_16">
								<g-button type='primary' size='mini' btnText='查询' @clickBtn='handleSearch'></g-button>
							</view>
						</view>
					</view>
					<view class="result-obj" style="padding: 12px 0 0 16px;" v-if="modalApplyData.resultList && modalApplyData.resultList.length > 0">
						<u-radio-group v-model="modalApplyData.selectResult" 
													 @change="radioGroupChange"
													 :wrap='true'
													 :active-color='themeColor'
						>
							<u-radio 
								@change="handleSelect" 
								v-for="(item, index) in modalApplyData.resultList" :key="index" 
								:name="item.agencyId"
							>
								{{item.agencyName || '-'}}
							</u-radio>
						</u-radio-group>
					</view>
					<view>
						<view class="g_pt_12 g_pb_8 g_pl_20 g_c_6">备注</view>
						<textarea class="weui-input g_flex_1 g_fs_16"
											placeholder="请输入备注" 
											v-model="modalApplyData.desp" 
											placeholder-style="color:#999" 
											auto-height 
											style="min-height: 137px; width: calc(100% - 64px); z-index: 0;background-color: #ededed;border-radius: 6px;padding: 16px;margin: 0 auto;"
						></textarea>
					</view>
					<view class="g_flex_row_center g_p_16">
						<view class="g_flex_row_center" style="width: 50%;">
							<g-button type='default' class="g_w_all" size='small' btnText='取消' @clickBtn='modalApplyData.isShow = false'></g-button>
						</view>
						<view class="g_flex_row_center" style="width: 50%;">
							<g-button type='primary' size='small' btnText='提交' @clickBtn='submitApply'></g-button>
						</view>
					</view>
					<view class="g_h_20"></view>
				</view>
			</view>
		</u-popup>
		
		<u-popup v-model="createData.isShow" mode="center" border-radius="14" width="80%" :closeable='true'>
			<view style="max-height: calc(100vh - 200px);overflow-y: auto;">
				<view class="g_flex_c g_h_60 g_fs_16">安全验证</view>
				<view>
					<view>
						<view class="g_fs_14 g_mb_12" style="padding: 0 12px;">
							<text class="g_fw_600">[申请合并]</text>属于高敏感权限，基于账户安全考虑，请验证创建人手机号:{{createData.telEncrypt}}
						</view>
						<g-panel-form-slot
							:list="[
								{
									icon: '',
									label: '验证码',
									result: '',
									path: '',
									tip: 'slot-code',
									value: createData.code,
									tel: createData.tel,
									type: 'slot',
									placeholder: '输入验证码',
									pColumn: 12,
								},
							]"
							@changeCode="getCode"
						>
						</g-panel-form-slot>
					</view>
					<view class="g_flex_row_center g_p_16" style="padding-bottom: 0;">
						<view class="g_flex_row_center" style="width: 50%;">
							<g-button type='default' class="g_w_all" size='small' btnText='取消' @clickBtn='createData.isShow = false'></g-button>
						</view>
						<view class="g_flex_row_center" style="width: 50%;">
							<g-button type='primary' size='small' btnText='确定' @clickBtn='submitValidate'></g-button>
						</view>
					</view>
					<view class="g_h_20"></view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
export default {
	onReady() {
		this.G.setNavStyle();
	},
	onShareAppMessage() {
		return this.G.shareFun();
	},
	data() {
		return {
			themeColor: getApp().globalData.themeColor,
			globalData: getApp().globalData,
			cdnBaseImg: this.G.store().cdnBaseImg,
			localBaseImg: this.G.store().localBaseImg,
			svgBaseImg: this.G.store().svgBaseImg,
			menuList: [
				{
					name: "我收到的",
					tip: "0",
				},
				{
					name: "我发起的",
					tip: "1",
				},
			],
			menuActive: 0,
			modalApplyData:{
				isShow:false,
				tel:'',
				desp:'',
				resultList:[],
				selectResult:''
			},
			applysRecord:[],
			recivesRecord:[],
			createData:{
				isShow:false,
				code:'',
				tel: "",
				telEncrypt: ""
			}
		};
	},
	onShow() {
		let that = this;
		that.getList();
	},
	methods: {
		getList(){
			let that = this,
					params = {
						
					}
			that.G.Get(that.api.person_getMargeRecord,params,(res)=>{
				console.log('合并记录：',res);
				that.applysRecord = res.applys;
				that.recivesRecord = res.recives;
			})
		},
		handleUpdateMenu(e){
			console.log(e)
			let that = this;
			that.menuActive = e;
		},
		openApply(){
			let that = this;
			if(that.applysRecord && that.applysRecord.length < 1){
				that.G.Get(that.api.person_getCreatorTel,{},(createRes)=>{
					console.log('创建人手机号：',createRes)
					that.createData = {
						isShow:true,
						code:'',
						tel: createRes.tel,
						telEncrypt: createRes.telEncrypt
					};
				})
			}else{
				uni.showToast({
					icon:'none',
					title:'只能有一个审核中的合并申请'
				})
			}
		},
		handleSearch(){
			let that = this;
			if(!that.modalApplyData.tel){
				uni.showToast({
					icon:'none',
					title:'请输入手机号'
				})
				return false;
			}
			that.G.Get(that.api.person_getGroup,{
				tel:that.modalApplyData.tel
			},(res)=>{
				console.log('团队res',res)
				that.modalApplyData.resultList = res;
				that.modalApplyData.selectResult = '';
			})
		},
		handleSelect(e){
			console.log('选择团队',e)
			this.modalApplyData.selectResult = e;
		},
		submitApply(){
			let that = this;
			if(!that.modalApplyData.selectResult){
				uni.showToast({
					icon:'none',
					title:'请选择要合并的团队'
				})
				return false;
			}
			if(!that.modalApplyData.desp){
				uni.showToast({
					icon:'none',
					title:'请输入备注'
				})
				return false;
			}
			that.G.Post(that.api.person_addApply,{
				sourceAgencyId:uni.getStorageSync("apply-userinfo").agencyId,
				targetAgencyId:that.modalApplyData.selectResult,
				desp:that.modalApplyData.desp
			},(res)=>{
				uni.showToast({
					icon:'success',
					title:'申请成功'
				})
				that.modalApplyData.isShow = false;
				uni.navigateBack();
			})
		},
		handleSet($data,$type){
			let that = this;
			if($type == 1){
				// 通过
				uni.showModal({
					content:'确认通过吗?',
					success(res) {
						if(res.confirm){
							that.G.Get(that.api.person_applyTrue + '/' + $data.id,{},()=>{
								uni.showToast({
									icon:'success',
									title:'已通过'
								});
								that.getList();
							})
						}
					}
				})
			}else{
				// 拒绝
				uni.showModal({
					content:'确认拒绝吗?',
					success(res) {
						if(res.confirm){
							that.G.Get(that.api.person_applyFalse + '/' + $data.id,{},()=>{
								uni.showToast({
									icon:'success',
									title:'已拒绝'
								});
								that.getList();
							})
						}
					}
				})
			}
		},
		getCode(e) {
			this.createData.code = e;
			console.log(e);
		},
		submitValidate(){
			let that = this;
			if(!that.createData.code){
				uni.showToast({
					icon:'none',
					title:'请输入验证码'
				})
				return false;
			}
			that.G.Post(that.api.person_validateMsgCode,{
				tel: that.createData.tel,
				code: that.createData.code,
			},(res)=>{
				console.log('res',res)
				that.createData = {
					isShow:false,
					code:'',
					tel: '',
					telEncrypt: ''
				};
				that.modalApplyData = {
					isShow:true,
					tel:'',
					desp:'',
					resultList:[],
					selectResult:''
				}
			},(err)=>{
				console.log('err',err)
			})
		}
	},
};
</script>

<style lang="less">
	.p-person-marge{
		.m-applys-obj{
			.m-aform{
				width: calc(100% - 52px);
				margin: 10px auto;
				background-color: #fff;
				padding: 0 16px;
				border-radius: 8px;
				.label{
					.icon{
						font-size: 20px;
					}
				}
				.value{
					margin-left: 10px;
					font-size: 16px;
				}
			}
		}
		.m-alist{
			.m-item{
				&:first-child{
					margin-top: 0 !important;
				}
			}
		}
		.m-item{
			width: calc(100% - 52px);
			margin: 0px auto 10px;
			background-color: #fff;
			padding: 0 16px;
			border-radius: 8px;
		}
	}
</style>