caimei-applets-caimei/pages/goods/goods-file-preview.vue

<template>
    <view class="file-preview">
        <view class="file" v-html="fileInfo"></view>
        <view class="more" @click="checkPermission">查看更多</view>
        <view
            class="cm-login"
            :class="{ maxBottom: !bottom && isIphoneX }"
            :style="{ bottom: bottom }"
            v-if="TipStatus && tipStatus"
        >
            <text>{{ TipStatus.text }}</text>
            <view class="cm-btn" @click="nextAction(TipStatus.redirect)">{{ TipStatus.btn }}</view>
        </view>
        
        <tui-modal
            :show="showModal"
            :content="TipStatus.text"
            shape="circle"
            :button="modalButton"
            :fadeIn="true"
            @click="handleModalClick"
        ></tui-modal>
    </view>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        data() {
            return {
                modalButton: [
                    {
                        text: '取消',
                        type: 'gray',
                        plain: true //是否空心
                    },
                    {
                        text: '确认',
                        customStyle: {
                            color: '#fff',
                            bgColor: 'linear-gradient(90deg, #F28F31 0%, #FF5B00 100%)'
                        },
                        plain: false
                    }
                ],
                showModal: false,
                //用户信息相关
                permission: 5, //用户权限  0可查看，1未登录，2需升级会员机构，3需升级医美会员机构，4需要抵扣采美豆，5无权限查看
                userId: -1,
                archiveId: -1,
                fileInfo: '', // 文章预览
                fileName: '', // 文章标题
            }
        },
        computed: {
            ...mapState(['isIphoneX']),
            //资料查看状态提示
            TipStatus() {
                // 资料权限
                const statusText = [
                    false, // 正常访问
                    { text: '请登录后查看！', btn: '去登录', redirect: '/pages/login/login' },
                    { text: '请升级成为会员机构后方可查看！', btn: '去升级', redirect: '/pages/login/apply' },
                    { text: '请升级成为医美会员机构后方可查看！', btn: '去升级', redirect: '/pages/login/apply' },
                    { text: '需抵扣100采美豆方可查看！', btn: '去查看', redirect: 10 },
                    { text: '无权限查看！', btn: '确认' }
                ]
                // 0可查看，1未登录，2需升级会员机构，3需升级医美会员机构，4需要抵扣采美豆，5无权限查看
                return statusText[this.permission]
            }
        },
        watch: {
            TipStatus(val) {
                if(this.TipStatus) {
                    this.timer = setTimeout(()=>{
                        this.tipStatus = false
                        clearTimeout(this.timer)
                    }, 10000)
                }
                this.$emit('tipStatus', this.TipStatus)
            }
        },
        mounted() {
            this.fileInfo = uni.getStorageSync('fileInfo')
        },
        onLoad(options) {
            this.userId = options.userId
            this.archiveId = options.archiveId
            this.permission = options.permission
            this.fileName = options.fileName
            uni.setNavigationBarTitle({
                title: this.fileName
            })
        },
        methods: {
            //用户权限校验拦截
            checkPermission() {
                //permission:查看权限:0可查看，1未登录，2需升级会员机构，3需升级医美会员机构，4需要抵扣采美豆，5无权限查看
                const _self = this
                // 如果 TipStatus 返回false 就放行
                if (!_self.TipStatus) return 0
                this.modalButton[1].text = this.TipStatus.btn
                this.showModal = true
                return -1
            },
            // 点击按钮后要做的事
            nextAction(redirect) {
                const _self = this
                if (typeof redirect == 'string') {
                    // 跳转链接
                    this.$api.navigateTo(redirect)
                }
                if (redirect === 10) {
                    this.searchArchiveByBean()
                }
            },
            // modal 按钮点击
            handleModalClick(e) {
                // 点击确认按钮
                if (e.index === 1) {
                    this.showModal = false
                    this.nextAction(this.TipStatus.redirect) //执行下一步
                } else {
                    this.showModal = false
                }
            },
            //采美豆抵扣
            searchArchiveByBean() {
                this.BeautyArchive.SearchArchiveByBeans({
                    userId: this.userId,
                    archiveId: this.archiveId
                })
                    .then(res => {
                        uni.showToast({
                            duration: 1500,
                            title: res.msg
                        })
                        setTimeout(() => {
                            //刷新资料列表
                            this.getDetail()
                        }, 1500)
                    })
                    .catch(err => {
                        uni.showToast({
                            icon: 'none',
                            duration: 1500,
                            title: err.msg
                        })
                    })
            },
        }
    }
</script>

<style lang="scss">
    page {
        background-color: #ccc;
    }
    .file-preview {
        position: relative;
        padding-bottom: 5%;
        .file {
            width: 90%;
            min-height: 600rpx;
            margin: 5% auto 0 auto;
            background: #fff;
            position: relative;
        }
        .file::after {
            content: ' ';
            position: absolute;
            left: 0;
            bottom: 0;
            box-shadow: 0 -8px 15px red;
            width: 100%;
            height: 6rpx;
        }
        .more {
            color: red;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%, -100%);
            background: rgba(255, 255, 255, 0.8);
            width: 90%;
            text-align: center;
        }
    }
    .cm-login {
        position: fixed;
        left: 24rpx;
        bottom: 115rpx; // 包含商品导航
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 32rpx;
        width: 702rpx;
        height: 90rpx;
        background: #ffe6dc;
        border-radius: 16px;
        box-sizing: border-box;
        z-index: 9;
        &.maxBottom {
            bottom: -100rpx;
            z-index: 999;
            animation: permiMove .3s ease-in-out;
            animation-fill-mode: forwards;
        }
        text {
            font-size: 26rpx;
            color: #FF5B00;
        }
        .cm-btn {
            width: 136rpx;
            height: 48rpx;
            background: #FF5B00;
            border-radius: 28px;
            font-size: 26rpx;
            text-align: center;
            line-height: 48rpx;
            color: #ffffff;
        }
    }
</style>