yihuo/pages/exchange/materal.vue

<template>
    <view>
        <view class="change-container">
            <view class="relative width100 height100">
                <image
                    class="width100 height100"
                    :src="resource.ex_material_bg"
                    mode="aspectFill"
                />
                <view class="contain">
                    <view class="con_item" v-for="data in materialList" :key="data.id">
                        <view class="item_img">
                            <image class="width100 height100" :src="data.cover" mode="aspectFill" />
                            <view class="item_intro flex-align-between">
                                <view class="">
                                    {{ data.name }}
                                </view>
                                <view class="flex" style="font-size: 28rpx">
                                    <view style="color: #0694fe">
                                        {{ data.inventoryQuantity - data.soldQuantity }}
                                    </view>
                                    <view style="color: #fff">/{{ data.inventoryQuantity }}</view>
                                </view>
                            </view>
                        </view>
                        <view
                            class="item_btn"
                            :style="{
                                backgroundColor: data.userSynthesisNum == 0 ? '#EFE8C0' : '#FBFAF0'
                            }"
                        >
                            <view
                                v-if="data.userSynthesisNum == 0"
                                class="flex-align-between"
                                style="color: #558dfe; height: 98%"
                                @click.stop="preGetCake(data)"
                            >
                                <image
                                    style="width: 32rpx; height: 32rpx"
                                    :src="resource.m_molibi"
                                    mode="aspectFill"
                                />
                                <view class="">{{ data.price }}</view>
                                <view class="">购买</view>
                            </view>
                            <view
                                v-else
                                class=""
                                style="
                                    color: #bfc9f2;
                                    height: 98%;
                                    text-align: center;
                                    line-height: 46rpx;
                                "
                            >
                                已购买
                            </view>
                        </view>
                    </view>
                </view>
                <view class="molibi">
                    <image :src="resource.molibi" class="molibi_img" />
                    {{ ownMolib }}
                </view>
                <view class="footer flex-align-between">
                    <image
                        class="height100"
                        style="width: 240rpx"
                        :src="resource.ex_to_getMlib"
                        mode="aspectFill"
                        @click.stop="$router.switchTab('award')"
                    />
                    <image
                        v-if="synthesisFlag"
                        class="height100"
                        style="width: 240rpx"
                        :src="resource.ex_cake"
                        mode="aspectFill"
                        @click="preGetCake(0)"
                    />
                    <image
                        v-else
                        class="height100"
                        style="width: 240rpx"
                        :src="resource.ex_uncake"
                        mode="aspectFill"
                    />
                </view>
            </view>
        </view>
        <confirm ref="confirmRef" @submit="getCake" />
        <lack-molib ref="lackMolibRef" />
    </view>
</template>

<script>
import resource from '@/utils/resource'
import { throttle } from '@/utils'
import confirm from './buy_confirm.vue'
import lackMolib from '../weal/lackMolib.vue'

export default {
    components: { confirm, lackMolib },
    props: {
        caketType: {
            type: Number,
            default: 1
        }
    },
    data() {
        return {
            resource,
            materialList: [],
            synthesisFlag: false,
            ownMolib: 0
        }
    },
    mounted() {
        this.init()
        this.getMolibi()
    },
    methods: {
        async init() {
            if (this.caketType === 0) return
            await this.$service.weal.materialList().then((res) => {
                if (res.code === '0') {
                    this.materialList = res.data
                } else {
                    // this.$message.error(res.msg)
                }
                this.synthesisFlag = res.data && res.data.every((res) => res.userSynthesisNum === 1)
            })
        },
        async getMolibi() {
            const res = await this.$service.wallet.info('MAGIC_POWER_COIN')
            res && (this.ownMolib = res.balance)
        },
        refresh() {
            throttle.call(this.realRefresh)
        },
        realRefresh() {
            this.$emit('refresh')
        },
        preGetCake(data) {
            if (data !== 0 && data.price > this.ownMolib) {
                this.$refs.lackMolibRef.show()
            } else {
                this.$refs.confirmRef.show(data)
            }
        },
        async getCake(id) {
            await this.$service.weal.materialSubmit(id).then((res) => {
                if (res.code === '0') {
                    this.init()
                    this.getMolibi()
                    if (id === 0) this.$emit('open')
                } else {
                    this.$message.error(res.msg)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.change-container {
    position: fixed;
    bottom: 48rpx;
    left: 30rpx;
    width: 694rpx;
    height: 734rpx;

    .contain {
        position: absolute;
        left: 37rpx;
        bottom: 171rpx;
        width: 618rpx;
        height: 481rpx;

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        .con_item {
            width: 164rpx;
            height: 222rpx;
            margin-right: 63rpx;
            margin-top: 37rpx;
            .item_img {
                position: relative;
                width: 100%;
                height: 164rpx;
                border-radius: 10rpx;
                overflow: hidden;
                background-color: #fff;
                .item_intro {
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    height: 36rpx;
                    background-color: rgba(0, 0, 0, 0.3);
                    padding: 0 10rpx;
                    color: #fff;
                }
            }
            .item_btn {
                width: 100%;
                height: 46rpx;
                margin-top: 12rpx;
                border-radius: 23rpx;
                padding: 0 13rpx;
            }
        }
        .con_item:nth-child(3) {
            margin-right: 0;
        }
        .con_item:last-child {
            margin-right: 0;
        }
    }
    .molibi {
        position: absolute;
        top: 32rpx;
        right: 37rpx;
        padding-left: 50rpx;
        padding-right: 20rpx;
        height: 50rpx;
        border-radius: 25rpx;
        background-color: rgba(0, 0, 0, 0.4);
        color: #fff;
        font-size: 30rpx;
        text-align: center;
        line-height: 50rpx;
        z-index: 5;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .molibi_img {
            position: absolute;
            left: -10%;
            width: 50rpx;
            height: 50rpx;
        }
    }
    .footer {
        position: absolute;
        left: 90rpx;
        bottom: 33rpx;
        width: 514rpx;
        height: 76rpx;
    }
}
</style>