template-parking-h5/src/components/wx-points-auth/wx-points-auth.vue

<template>
    <div class="box" v-if="show && source !== 'KIP' && source !== 'ALIPAY' " :style="{ bottom: bottom, }" @touchmove.stop.prevent>
        <div class="box-text">
            <div class="box-text-left">
                开通支付快速积分，积分秒到账！
            </div>
            <div class="box-text-right">
                <div class="box-text-right-btn" :style="{ background: background ? background : backgroundList[custTypeId] }" @click="toWxPointsAuth('handle')">
                    立即开通
                    <k-icon name="arrows-right" :size="5" class="box-text-right-icon" color="#fff"></k-icon>
                </div>

                <k-icon name="close" :size="7" class="box-text-right-icon-close" @click="close()" color="#999"></k-icon>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex"
import {
    kipGetPointsConfig
} from '@/utils/api-kip.js'
import uni from '@/utils/uniHooks';
const app = {}
export default {
    props: {
        bottom: {
            type: String,
            default: '54px',
        },
        background: {
            type: String,
            default: '',
        },
        visibility: {
            type: String,
            default: 'hidden',
        }
    },
    created() {
        // this.handleGetPointsConfig()
    },
    watch: {

    },
    data() {
        return {
            pointsConfig: null,
            show: false,
            clickToWxPointsAuth: false,
            backgroundList:['#644A79','#143793','#2E663F']
        };
    },
    computed: {
        // custTypeId: 0 默认版本，1 上海静安 2 上海浦东
        ...mapState({
            // custTypeId: 0
            custTypeId: state => state.custTypeId,
            source: (state) => state.source,
        }),
        pointsModalFlag() {
            return this.$store.state.pointsModalFlag
        }
    },
    mounted() {
        // this.checkShowFlag() 
        this.handleGetPointsConfig('init')
    },
    methods: {
        checkoutLogin() {
            this.toWxPointsAuth()
        },
        close() {
            this.show = false
            const arr_lbs_end_time = []
            if (uni.getStorageSync('lbs_end_time')) {
                arr_lbs_end_time = JSON.parse(uni.getStorageSync('lbs_end_time'))
                arr_lbs_end_time.push({
                    lbsId: this.$store.state?.lbsId,
                    time: new Date().getTime()
                })
                uni.setStorageSync("lbs_end_time", arr_lbs_end_time)
                uni.setStorageSync("ceshi", 4534534534534534534)
            } else {
                arr_lbs_end_time.push({
                    lbsId: this.$store.state?.lbsId,
                    time: new Date().getTime()
                })
                uni.setStorageSync("ceshi", 4534534534534534534)
                uni.setStorageSync("lbs_end_time", arr_lbs_end_time)
            }
        },
        checkShowFlag() {
            const nowTime = new Date()
            const nowTime00 = new Date(new Date().setHours(0, 0, 0, 0)).getTime()
            var arr_lbs_end_time = [];
            if (uni.getStorageSync('lbs_end_time')) {
                console.log(555)
                arr_lbs_end_time = uni.getStorageSync('lbs_end_time')
                console.log(666)
                console.log('arr_lbs_end_time::', uni.getStorageSync('lbs_end_time'))
                arr_lbs_end_time.forEach(element => {
                   if (element.lbsId === this.$store.state?.lbsId) {
                       console.log(777)
                       if (element.time < nowTime00) {
                           this.show = true
                           console.log(333)
                       } else {
                           console.log(444)
                           this.show = false
                       }
                   }
                });
            } else {
                this.show = true
            }
        },
        handleGetPointsConfig(type) {
            kipGetPointsConfig().then(resp => {
                const result = resp;
                // codes,wxAuth,aliAuth
                console.log(111222, resp)
                this.pointsConfig = result
                if (result) {
                    if (result && result.codes) {
                        // codes,wxAuth,aliAuth
                        this.pointsConfig = result
                        console.log(111)
                        if (!this.pointsConfig.wxAuth && this.pointsConfig.codes.indexOf('wxpay') != -1) {
                            console.log(222)
                            this.checkShowFlag()
                        }
                    } else {
                        // this.$store.commit('setPointsModalFlag', false);
                        if (result.code && result.code === '300000') {
                            // this.checkoutLogin()
                        } else {
                            uni.showToast({
                                icon: 'none',
                                mask: true,
                                duration: 2000,
                                title: result.errorMessage || result.message || '出错了，请稍后再试'
                            })
                        }
                    }
                } else {
                    // this.$store.commit('setPointsModalFlag', false);
                    if (resp.code && resp.code === '300000') {
                        // this.checkoutLogin()
                    } else {
                        uni.showToast({
                            icon: 'none',
                            mask: true,
                            duration: 2000,
                            title: resp.message
                        })
                    }
                }

            }).catch(e => {
                // this.$store.commit('setPointsModalFlag', false);
            })
        },
        async toWxPointsAuth(type) {
            if (!type) {
                return
            }
            if (window.__wxjs_environment === 'miniprogram') {
                wx.miniProgram.navigateTo({
                 "url": "/pages/accumulatePoints/selfServicePoints?redirect=1" // 去 login 页面 1 去登录
                })
            }
            if (isAlipayClient) {
                my?.navigateTo({
                    "url": "/pages/accumulatePoints/selfServicePoints?redirect=1" // 去 login 页面 1 去登录
                })
            }
            // // mini 跳转
            // wx.miniProgram.redirectTo({
            //     "url": "/pages/accumulatePoints/selfServicePoints?redirect=1" // 去 login 页面 1 去登录
            // })
        },
    }
}
</script>
<style>
.box {
    position: absolute;
    z-index: 10000;
    width: calc(100vw - 84px);
    padding: 8px 20px;
    height: 80px;
    left: 24px;
    border-radius: 4px;
    background: #000;
}

.box-text {
    color: #fff;
    display: flex;
    height: 100%;
    line-height: 80px;
    width: 100%;
    justify-content: space-between;
}

.box-text-left {
    font-size: 28px;
    line-height: 80px;
    height: 24px;
}

.box-text-right {
    display: flex;
    justify-content: center;
    font-size: 26px;
    line-height: 80px;
    height: 24px;
}

.box-text-right-icon {
    display: inline-block;
    margin-left: 5px;
    position: relative;
    top: -1px;
}

.box-text-right-icon-close {
    margin-left: 5px;

}

.box-text-right-btn {
    height: 46px;
    line-height: 46px;
    border-radius: 22px;
    padding: 0 18px;
    margin-top:17px;
    margin-right:10px;
}
</style>