caimei-applets-crm/pages/login/login-share.vue

<template>
	<view class="container">
		<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading	="true" :loadingType="7"></tui-skeleton>
		<template v-else>
			<view
				class="tui-header-box first"
				:style="{ height: isCmcustomClass == 'fiexd' ? CustomBar + 6 + 'px' : CustomBar + 6 + 'px' }"
				:class="isCmcustomClass"
			>
				<view class="header-top" :style="{ paddingTop: top + 'px', lineHeight: CustomBar + 20 + 'px' }"></view>
				<view class="header-sit">
					<text v-if="isNoAuthority"
						  class="iconfont icon-shouye1" 
						  :style="{ top: CustomBar/2 + 'px',left:'24rpx'}"
						  @click.stop="this.$api.navigateLinkJump()"
						  >
					</text>
					<text class="header-sit-text"></text>
				</view>
			</view>
			<view class="share-empty">
				<view class="icon"><image :src="StaticUrl + '/image/icon-noaccess@2x.png'" mode="widthFix"></image></view>
				<view class="text">暂无权限查看</view>
			</view>
		</template>
        <!-- 弹窗 -->
        <tui-modal
        	:show="modal"
        	@click="handleClick"
        	@cancel="hideMobel"
        	:content="contentModalText"
            :button="modalButton"
        	color="#333"
        	:size="32"
        	shape="circle"
        	:maskClosable="false"
        />
	</view>
</template>

<script>
import { mapMutations } from 'vuex'
import authorize from '@/common/config/authorize.js' 
export default {
	computed: {
		
	},
	data() {
		return {
			StaticUrl: this.$Static,
			CustomBar:this.CustomBar,// 顶部导航栏高度
			isIphoneX: this.$store.state.isIphoneX,
			CustomBar: this.CustomBar, // 顶部导航栏高度
			height: 64, //header高度
			top: 0, //标题图标距离顶部距离
			scrollH: 0, //滚动总高度
			opcity: 1,
			isCmcustomClass: 'left',
			isNoAuthority:false,
			skeletonShow:true,
            userType:'',
			receiptId:0,
			receiptType:1,// 收款款项类型：1订单款，2非订单款，3返佣款 4订单款或者非订单款（因财务阶段无法区分订单非订单）, 5供应商退款
            contentModalText: '', //操作文字提示语句
            modal: false,
            modalButton: [
            	{
            		text: '知道了',
            		customStyle: {
            			color: '#fff',
            		},
            		plain: false
            	}
            ],
		} 
	},
	onLoad(option) {
		this.receiptId = option.id
        console.log('分享收款ID====>',option.id)
		let obj = {}
		// #ifdef MP-WEIXIN
		obj = wx.getMenuButtonBoundingClientRect()
		// #endif
		// #ifdef MP-BAIDU
		obj = swan.getMenuButtonBoundingClientRect()
		// #endif
		// #ifdef MP-ALIPAY
		my.hideAddToDesktopMenu()
		// #endif
		uni.getSystemInfo({
			success: res => {
				this.width = obj.left || res.windowWidth
				this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44
				this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6
				this.scrollH = res.windowWidth * 0.6
			}
		})
	},
	methods: {
		...mapMutations(['login', 'logout']),
		async getWxAuthorize(){// 初始化授权登录
			const WxCode = await authorize.getCode('weixin')
			const Wx = await authorize.getUserInfo('weixin')
			this.UserService.UserLoginAuthApplets({ 
				code:WxCode,
				encryptedData:Wx.encryptedData,
				iv:Wx.iv ,
			})
			.then(response =>{
				let data  = response.data
                this.userType = data.userType
				this.login(response.data)
				this.$store.commit('updateStatus',response.data)
				setTimeout(()=>{
					this.getOrderReceiptDetailType(this.receiptId)
				},1000)
			}).catch(error =>{
				this.logout()
				this.skeletonShow = false
				this.isNoAuthority = true
				this.$store.commit('updateStatus',error.data)
			})
		},
		getOrderReceiptDetailType(id) {
			// 无权限查询收款详情，防止收款账号被更改
			this.OrderService.orderReceiptDetailType({ id: id })
				.then(response => {
					/**
					 * 用户类型(userType) 1协销人员,2客服,3财务,4超级管理员
					 * 1. 协销人员跳转到收款列表页面
					 * 2. 客服跳转到收款列表页面
					 * 3. 财务人员跳转到款项识别页面
					 * 4. 超级管理员跳转到款项识别页面
					 * */
					 // switch(data.userType){
					 // 	 case 1:// 协销
					 // 		this.navigateLinkJump(receipt)
					 // 		break
					 // 	 case 2:// 客服
					 // 		this.navigateLinkJump(receipt)
					 // 		break
					 // 	 case 3:// 财务
					 // 		this.navigateLinkJump(receipt)
					 // 		break
					 // 	 case 4:// 超级管理员
					 // 		this.navigateLinkJump(receipt)
					 // 		break
					 // }
					const receipt = response.data
					this.checkedReceiptAdministration(receipt)

				})
				.catch(err => {
					console.log('分享查询收款详情异常====>',err)
				})
		},
		checkedReceiptAdministration(receipt){
			// 根据收款账号调用不同收款详情查看权限
            if(receipt.receiptType){
                if(receipt.receiptType == 1 || receipt.receiptType == 2 || receipt.receiptType == 4){// 订单非订单
                	this.getOrderReceiptDetail(receipt)
                }else if(receipt.receiptType == 3){
                	this.getOrderReceiptRebateDetail(receipt)
                }else if(receipt.receiptType == 5){
                	this.getOrderReceiptRefundDetail(receipt)
                }
            }else{
                this.modal = true
                this.contentModalText ='该款项已作废，请重新收款!'
            }
		},
        handleClick(){// 作废款项弹窗跳转
            this.modal = false
            this.navigateLink()
        },
        navigateLink(){// 根据用户权限跳转对应页面
        	/**
        	 * 用户类型 1协销人员,2客服,3财务,4超级管理员
        	 * 1. 协销人员跳转到收款列表页面
        	 * 2. 客服跳转到收款列表页面
        	 * 3. 财务人员跳转到款项识别页面
        	 * 4. 超级管理员跳转到款项识别页面
        	 * */
        	 switch(this.userType){
        		 case 1:
        			this.$api.navigateTo('/pages/collection/list')
        			break
        		 case 2:
        			this.$api.navigateTo('/pages/collection/list')
        			break
        		 case 3:
        			this.$api.navigateTo('/pages/collection/sms')	
        			break
        		 case 4:
        			this.$api.navigateTo('/pages/collection/sms')
        			break
        	 }
        },
		getOrderReceiptDetail(receipt) {// 
			// 订单&&非订单收款详情
			this.OrderService.orderReceiptDetail({ id: receipt.id })
				.then(response => {
					this.navigateLinkJump(receipt)
				})
				.catch(err => {
					setTimeout(()=>{
						this.isNoAuthority = true
						this.skeletonShow = false
					},500)
				})
		},
		getOrderReceiptRebateDetail(receipt) {
			// 返佣收款详情
			this.OrderService.orderReceiptRebateDetails({ id: receipt.id })
				.then(response => {
					this.navigateLinkJump(receipt)
				})
				.catch(err => {
					setTimeout(()=>{
						this.isNoAuthority = true
						this.skeletonShow = false
					},500)
				})
		},
		getOrderReceiptRefundDetail(receipt) {
			// 供应商退款收款详情
			this.OrderService.orderReceiptRefundDetail({ id: receipt.id })
				.then(response => {
					this.navigateLinkJump(receipt)
				})
				.catch(err => {
					setTimeout(()=>{
						this.isNoAuthority = true
						this.skeletonShow = false
					},500)
				})
		},
		navigateLinkJump(receipt){
			// 收款详情查询跳转URL 收款款项类型：1订单款，2非订单款，3返佣款 4订单款或者非订单款（因财务阶段无法区分订单非订单）, 5供应商退款
			switch(receipt.receiptType){
				case 1:// 1:订单 1待确认、2已确认(待审核)、3审核通过、4审核未通过、5收款撤销【线上支付成功为审核通过】
					if(receipt.receiptStatus == 1 || receipt.receiptStatus == 4 || receipt.receiptStatus == 5){// 订单待确认
						console.log('订单待确认')
						this.$api.navigateTo(`/pages/relation/ordinary/index?type=share&id=${receipt.id}`)
					}else if(receipt.receiptStatus == 2){// 待审核
						console.log('待审核')
						this.$api.navigateTo(`/pages/relation/ordinary/examine-detail?type=share&id=${receipt.id}`)
					}else if(receipt.receiptStatus == 3){// 审核通过
						console.log('审核通过')
						this.$api.navigateTo(`/pages/relation/ordinary/detail?type=share&id=${receipt.id}`)
					}
					break
				case 2:// 2：非订单 
					this.$api.navigateTo(`/pages/relation/nonorder/detail?type=share&id=${receipt.id}`)
					break
				case 3:// 3：返佣 
					if(receipt.receiptStatus == 1 || receipt.receiptStatus == 4 || receipt.receiptStatus == 5){// 返佣待确认
						this.$api.navigateTo(`/pages/relation/return/index?type=share&id=${receipt.id}`)
					}else if(receipt.receiptStatus == 2){
						this.$api.navigateTo(`/pages/relation/return/detail?type=share&id=${receipt.id}`)
					}
					break
				case 5:// 4：供应商退款
					if(receipt.receiptStatus == 1 || receipt.receiptStatus == 4 || receipt.receiptStatus == 5){// 返佣待确认
						this.$api.navigateTo(`/pages/relation/refund/index?type=share&id=${receipt.id}`)
					}else if(receipt.receiptStatus == 2){
						this.$api.navigateTo(`/pages/relation/refund/detail?type=share&id=${receipt.id}`)
					}
					break
			}
		}
	},
	onShow() {
		this.getWxAuthorize()
	}
}
</script>

<style lang="scss">
.container {
	width: 100%;
	height:100%;
	background: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content:center;
	.share-empty{
		width: 260rpx;
		height: 412rpx;
		.icon{
			width: 150rpx;
			height: 150rpx;
			margin: 0 auto;
			image{
				width: 100%;
				height: 100%;
				display: block;
			}
		}
		.text{
			font-size: $font-size-28;
			line-height: 60rpx;
			color: rgba(70,136,250,0.7);
			text-align: center;
		}
	}
}
.tui-header-box {
	width: 100%;
	background: #ffffff;
	z-index: 999;
	position: fixed;
	top: 0;
	left: 0;
	background-size: cover;
	background-image: url(https://static.caimei365.com/app/crm/image/statistic_bg2.png);

	&.fiexd {
	}

	&.first {
	}
}
.header-top {
	width: 100%;
	font-size: 16px;
	font-weight: 500;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 0 40rpx;
}

.header-sit {
	width: 100%;
	box-sizing: border-box;
	height: 80rpx;
	line-height: 80rpx;
	box-sizing: border-box;
	color: #ffffff;
	.header-sit-text {
		text-align: left;
		font-size: $font-size-40;
		font-weight: 600;
		font-family: '正楷';
	}
	.icon-shouye1{
		display: block;
		width: 80rpx;
		height: 80rpx;
		float: left;
		text-align: center;
		line-height: 80rpx;
		font-size: 48rpx;
	}
}
</style>