card-wechat/src/components/CardCase.vue

<template>
    <div class="case">
        <van-cell :border="false" class="bottom-show" @click="init" is-link>
            <div slot="title">
                <div class="text1" v-if="chooseIds.length > 0">
                    已选<span>{{ chooseIds.length }}</span
                    >包，共<span>{{ money }}</span
                    >元，邮费{{ cardCaseInfo.postage || 0 }}元
                </div>
                <div v-else>请选择卡包</div>
            </div>
        </van-cell>
        <van-popup :show="show" round position="bottom" @close="show = false">
            <div class="box">
                <div class="top">
                    <span>选择卡包</span>
                    <div class="right">
                        <div class="tool-item">
                            可选
                        </div>
                        <div class="tool-item used">
                            已售
                        </div>
                    </div>
                </div>

                <div class="content">
                    <div class="card" v-for="(card, index) in cardList" :key="index">
                        <div class="card-title">第{{ index + 1 }}组</div>
                        <div class="card-list">
                            <div
                                v-for="(item, itemIndex) in card"
                                :key="item.id"
                                class="card-item"
                                :class="{
                                    used: !canChoose(item),
                                    active: nowChoose.includes(item.id)
                                }"
                                @click="choose(item.id, !canChoose(item))"
                            >
                                {{ itemIndex + 1 }}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bottom">
                    <span class="text"
                        >已选{{ nowChoose.length }}包，共{{ money }}元，邮费{{ cardCaseInfo.postage || 0 }}元</span
                    >
                    <van-button size="medium" @click="submit" class="submit" :radius="0" type="primary"
                        >确认购买</van-button
                    >
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
export default {
    name: 'CardCase',
    props: {
        detailsList: {
            type: Object,
            default: () => {
                return {};
            }
        },
        cardCaseInfo: {
            type: Object,
            default: () => {
                return {};
            }
        },
        chooseIds: {
            type: Array,
            default: () => {
                return [];
            }
        }
    },
    computed: {
        cardList() {
            let boxMap = { ...this.detailsList };
            return Object.keys(boxMap).map(item => {
                return boxMap[item];
            });
        },
        allCards() {
            return [...this.cardList].flat();
        },
        money() {
            let choose = this.show ? this.nowChoose : this.chooseIds;
            let list = [...this.allCards].filter(item => {
                return [...choose].includes(item.id);
            });
            return list.reduce((prev, cur) => {
                var r1, r2, m;
                try {
                    r1 = prev.toString().split('.')[1].length;
                } catch (e) {
                    r1 = 0;
                }
                try {
                    r2 = cur.money.toString().split('.')[1].length;
                } catch (e) {
                    r2 = 0;
                }
                m = Math.pow(10, Math.max(r1, r2));
                return (prev * m + cur.money * m) / m;
            }, 0);
        }
    },
    data() {
        return {
            show: false,
            nowChoose: [],
            buy: false
        };
    },
    methods: {
        canChoose(info) {
            let status = ['WAIT', 'PROGRESS'];
            return status.includes(info.caseStatus) && !info.sold;
        },
        init(type) {
            this.nowChoose = [...this.chooseIds];
            this.show = true;
            this.buy = type === 'buy';
        },
        choose(id, used = false) {
            if (used) {
                return;
            }
            let list = [...this.nowChoose];
            if (list.includes(id)) {
                list.splice(list.indexOf(id), 1);
            } else {
                list.push(id);
            }
            this.nowChoose = list;
        },
        submit() {
            console.log(this.cardCaseInfo);
            // console.log(this.cardList);
            if (this.nowChoose.length === 0) {
                this.toast('请选择卡牌');
                return;
            }
            let caseId = this.cardCaseInfo.cardCaseId;
            let boxIds = this.nowChoose.join(',');
            this.$http
                .get('/orderInfo/checkBox', {
                    caseId,
                    boxIds
                })
                .then(res => {
                    let checkResult = false;
                    checkResult = res;
                    if (!checkResult) {
                        wx.showToast({
                            icon: 'none',
                            title: '该卡箱需要两个卡包组选择数量一样',
                            duration: 4000
                        });
                        return Promise.reject('提示');
                    } else {
                        return Promise.resolve();
                    }
                })
                .then(res => {
                    this.$emit('update:chooseIds', this.nowChoose);
                    this.show = false;
                    if (this.buy) {
                        this.$emit('buy');
                    }
                })
                .catch(e => {
                    if (e.error) {
                        wx.showToast({
                            icon: 'none',
                            title: e.error
                        });
                    }
                });
        }
    }
};
</script>

<style lang="less" scoped>
/deep/ .van-cell {
    --cell-horizontal-padding: 0px;
    --cell-vertical-padding: 20px;

    .van-cell__title {
        font-size: 16px;
        font-weight: bold;
        color: #000000;
        line-height: 28px;

        span {
            color: @prim;
        }
    }
}
.box {
    max-height: 70vh;
    min-height: 50vh;

    padding: 0 20px 0;
    .flex-col();
    padding-bottom: 6px;
}

.content {
    flex-grow: 1;
    overflow: auto;
    padding: 0 0 12px;
}

.top {
    .flex();
    justify-content: space-between;
    padding: 20px 0;
    flex-shrink: 0;

    span {
        font-size: 16px;
        font-weight: bold;
        color: #000000;
        line-height: 26px;
    }

    .right {
        .flex();
        .tool-item {
            font-size: 14px;
            color: #000000;
            line-height: 24px;
            .flex();
            margin-left: 30px;

            &::before {
                content: '';
                flex-shrink: 0;
                width: 16px;
                height: 16px;
                background: #ffffff;
                border-radius: 4px;
                border: 1px solid #f5f7fa;
                margin-right: 4px;
            }

            &.used {
                &::before {
                    background-color: #939599;
                }
            }
        }
    }
}
.card + .card {
    margin-top: 12px;
}

.card-title {
    font-size: 14px;
    color: #939599;
    line-height: 24px;
}
.card {
    background-color: @bg;
    padding: 12px 16px;
    border-radius: 8px;
    .card-list {
        .flex();
        flex-wrap: wrap;
        .card-item {
            width: 42px;
            height: 42px;
            background: #ffffff;
            border-radius: 8px;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            color: #000000;
            line-height: 42px;
            margin-top: 10px;
            &.used {
                background-color: #939599;
                color: #ffffff;
            }

            &.active {
                background-color: @prim;
                color: #ffffff;
            }

            &:active {
                opacity: 0.8;
            }

            &:nth-child(6n + 1) {
                margin-left: 0 !important;
            }
        }

        .card-item + .card-item {
            margin-left: 10px;
        }
    }
}

.bottom {
    margin-top: 6px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    .flex();
    .text {
        padding: 0 16px;
        flex-grow: 1;
        font-size: 13px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 48px;
        height: 48px;
        background-color: lighten(@prim, 10);
    }
}

/deep/ .submit {
    .van-button {
        height: 48px;
        border-radius: 0px;
        min-width: 98px;
        max-width: 98px;
    }
}
</style>