raex_front/src/components/PayMethodPick.vue

<template>
    <div>
        <template v-for="(item, index) in payConfig" :key="index">
            <div
                class="pay-item"
                @click="pick(item)"
                v-if="item.show && (item.key === 'BALANCE' ? showBalance : true)"
                :key="index"
            >
                <div class="img-icon">
                    <img class="icon" :src="item.icon" alt="" />
                </div>
                <span>{{ item.name }}</span>
                <img
                    class="choose-icon"
                    :src="item.enabled ? (checked === item.key ? icons[1] : icons[0]) : icons[2]"
                    alt=""
                />
            </div>
        </template>
    </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
    props: {
        modelValue: {},
        showBalance: {
            type: Boolean,
            default: true
        }
    },
    computed: {
        ...mapState(['userInfo'])
    },
    created() {
        if (this.value) {
            this.checked = this.value;
        }
        if (
            (this.$store.state.review && window.cordova && window.cordova.platformId === 'ios') ||
            navigator.userAgent.includes('#review#')
        ) {
            this.payConfig = [
                {
                    name: '绿洲石',
                    key: 'BALANCE',
                    icon: 'https://cdn.raex.vip/image/2022-05-18-17-46-19eDglIIAy.png',
                    show: true,
                    enabled: true
                }
            ];
            this.checked = 'BALANCE';
        } else {
            this.$http.get('/sysConfig/get/pay_config').then(res => {
                let configs = JSON.parse(res.value).filter(item => {
                    if (item.key === 'BALANCE') {
                        return this.userInfo && this.userInfo.walletEnabled;
                    }
                    return true;
                });
                if (this.inWeixin) {
                    configs.forEach(item => {
                        if (item.key === 'ALIPAY') {
                            item.key = 'ALIPAY_BRIDGE';
                        }
                    });
                }
                this.payConfig = configs.sort((a, b) => a.sort - b.sort);
                this.checked = (configs.find(i => i.show && i.enabled) || {}).key;
            });
        }
    },
    data() {
        return {
            checked: null,
            payConfig: [],
            icons: [
                require('@assets/svgs/icon_gouxuan_huise.svg'),
                require('@assets/icon_gouxuan_pre.png'),
                require('@assets/icon_gouxuan_huise1.png')
            ],
            inWeixin: /micromessenger/i.test(navigator.userAgent),
            inApp: /#cordova#/i.test(navigator.userAgent),
            inIos: /iPhone|iPad|iPod/i.test(navigator.userAgent)
        };
    },
    methods: {
        pick(item) {
            if (item.show && item.enabled) {
                this.checked = item.key;
            } else {
                this.$toast('敬请期待');
            }
        }
    },
    watch: {
        value(val) {
            this.checked = val;
        },
        checked(val) {
            this.$emit('update:modelValue', val);
        }
    }
};
</script>
<style lang="less" scoped>
.pay-item {
    display: flex;
    align-items: center;
    height: 60px;
    border-bottom: 1px solid @tabBorder;
    .icon {
        height: 24px;
        width: 24px;
        object-fit: contain;
        display: block;
    }
    .img-icon {
        width: 45px;
        .flex();
        justify-content: center;
    }
    span {
        font-size: 14px;
        font-weight: bold;
        color: @text0;
        line-height: 24px;
        flex-grow: 1;
        padding: 0 10px;
    }
    .choose-icon {
        width: 24px;
        height: 24px;
    }

    &.not {
        span {
            color: @text3;
        }
    }
}
</style>