hongze_yb_xcx/pages/chart/component/noAuth.vue

<template>
  <view class="chart-no-auth">
        <image class="img" :src="globalImgUrls.activityNoAuth" mode="widthFix" v-if="authType!=4"></image>
        <image class="img-wait" :src="globalImgUrls.chartWait" mode="widthFix" v-else></image>
        <block v-if="authType==1">
            <view style="margin-bottom:15px">您暂无权限查看图库</view>
            <view>若想查看请联系对口销售</view>
            <!-- <view>{{info.name}}:{{info.mobile}}</view> -->
            <view class="global-btn-yellow-change btn" style="margin-top:30px" @click="handleCall">联系销售</view>
        </block>

        <block v-if="authType==2">
            <view style="margin-bottom:15px">您的权限已到期，暂时无法查看图库</view>
            <view>若想继续查看请联系对口销售</view>
            <!-- <view>{{info.name}}:{{info.mobile}}</view> -->
            <view class="global-btn-yellow-change btn" style="margin-top:30px" @click="handleCall">联系销售</view>
        </block>

        <block v-if="authType==3">
            <view style="margin-bottom:15px">您暂无权限查看图库</view>
            <view>若想查看可以申请开通</view>
            <view class="global-btn-yellow-change btn" style="margin-top:30px" @click="handleApply">立即申请</view>
        </block>

        <block v-if="authType==4">
            <view style="margin-bottom:15px">您已提交申请</view>
            <view>请等待销售人员与您联系</view>
        </block>
  </view>
</template>

<script>
import {apiApplyPermission} from '@/api/user'
export default {    
    props: {
        info:null
    },
    computed: {
        authType(){
            if(!this.info) return
            // 该客户为冻结、试用暂停状态;该客户为正式、试用、永续状态，但联系人图表权限未开启或禁用
            if(this.info.type==='contact'){
                this.handleAutoApply()
                return 1
            }
            if(this.info.type==='expired'){
                return 2
            }
            if(this.info.type==='apply'&&!this.info.customer_info.has_apply){
                return 3
            }
            if(this.info.type==='apply'&&this.info.customer_info.has_apply){
                return 4
            }
        }
    },
    methods: {
        handleCall(){
            uni.makePhoneCall({
                phoneNumber: this.info.mobile,
                success: (result) => {},
                fail: (error) => {}
            })
        },

        handleAutoApply(){
            if(!this.info.customer_info.has_apply){
                if(this.info.customer_info.status=='冻结'||(this.info.customer_info.status=='试用'&&this.info.customer_info.is_suspend==1)){
                    apiApplyPermission({
                        company_name:this.info.customer_info.company_name,
                        real_name:this.info.customer_info.name,
                        source:3,
                        from_page:'图库列表'
                    }).then(res=>{
                        if(res.code===200){
                            console.log('主动申请成功');
                        }
                    }) 
                }
            }
        },

        handleApply(){
            if(this.info.customer_info.status=='流失'){
                apiApplyPermission({
                    company_name:this.info.customer_info.company_name,
                    real_name:this.info.customer_info.name,
                    source:3,
                    from_page:'图库列表'
                }).then(res=>{
                    uni.navigateTo({url:'/pages-applyPermission/applyResult'})
                })
                return
            }
            uni.navigateTo({ url: '/pages-applyPermission/applyPermission?source=3&from_page=图库列表' })
        }
    }
}
</script>

<style lang="scss" scoped>
.chart-no-auth{
    padding: 34rpx;
    text-align: center;
    font-size: $global-font-size-lg;
    .img{
        width: 100%;
        margin-bottom: 50rpx;
    }
    .img-wait{
        margin-top: 200rpx;
        width: 186rpx;
        margin-bottom: 50rpx;
    }
    .btn{
        width: 380rpx;
        line-height: 70rpx;
        margin-left: auto;
        margin-right: auto;
        margin-top: 40rpx;
    }
}
</style>