yihuo/pages/store_detail/index.vue

<template>
    <view class="pageWrapper">
        <!-- <tabbar2 custom-class=" " :tabs="tabs" @change="clickTab" /> -->
        <view class="content" v-if="item">
            <view class="paddingT14 detailInfo">
                <image class="icon flex-shrink0" :src="item.spu.cover" mode="aspectFit" />
                <view><image class="icon-title" :src="LEVEL_MAP[item.level].titleText" /></view>

                <view class="flex1 marginL12">
                    <view
                        class="font4 bold paddingB13"
                        style="-webkit-line-clamp: 2;word-break: break-all;text-overflow：ellipsis"
                    >
                        {{ item.spu.name }}
                    </view>
                    <view class="">
                        <view class="font3 formBox" style="opacity: 0.8">
                            从
                            <text v-if="item.fromRelationType === 'LUCK'">宝箱</text>
                            <text v-else-if="item.fromRelationType === 'TRADE'">魔换</text>
                            <text v-else-if="item.fromRelationType === 'LUCK_ROOM'">福利房</text>
                            <text v-else-if="item.fromRelationType === 'LUCK_KING'">魔王战</text>
                            <text v-else-if="item.fromRelationType === 'LUCK_WHEEL'">魔天轮</text>
                            <text v-else-if="item.fromRelationType === 'SUBSTITUTE'">置换</text>
                            <text v-else-if="item.fromRelationType === 'ACTIVITY'">活动</text>
                            <text v-else-if="item.fromRelationType === 'DOLL_MACHINE'">娃娃机</text>
                            <text v-else>其他</text>
                            获得
                        </view>
                        <view v-if="hide" class="flex-align-between"></view>
                    </view>
                </view>
            </view>
        </view>
        <view v-if="hide&&item" class="relative btnBox2" @click="showConvertConfirm">
            <view>兑换源石</view>
            <view class="text" style="font-size: 20rpx; color: #735200">
                <view class="font4 radius2" v-if="item.magicAmount > 0">
                    可兑换
                    <text>
                        {{ item.magicAmount }}
                    </text>
                    源石
                </view>
                <view v-else class="font4 radius2">不可兑换</view>
            </view>
        </view>
        <convert-confirm ref="convertConfirmRef" @convert-success="onConvertSuccess" />
    </view>
</template>
<script>
    import pageMixin from './../../mixin/page'
    import { LEVEL_MAP } from '@/utils/config'
    import ossurl from '@/utils/ossurl'
    import convertConfirm from './convert_confirm'
    
    export default {
        mixins: [pageMixin],
        components: {
            convertConfirm
        },

        data() {
            return {
                ossurl,
                LEVEL_MAP,
                refreshing: false,
                checkMap: {},
                total: 0,
                id: '',
                item: null
            }
        },
        computed: {
            top() {
                let height = this.$store.state.systemInfo.statusBarHeight + 36 + 50 + 10 + 40
                return height
            },
            itemWidth() {
                let width = this.$store.state.systemInfo.screenWidth
                width = (width - 8 - 40) / 3
                let height = (165 / 109) * width
                return { width, height }
            },
            hide() {
                return !this.$store.state.hide
            }
        },
        onLoad(e) {
            if (e.id) {
                this.id = e.id
                this.getLuckDetail()
            }
        },
        methods: {
            pullRefresh() {
                this.refreshing = true
                this.refresh()
            },
            clickTab(item) {
                this.tab = item
                this.refresh(true)
            },
            async getLuckDetail() {
                const res = await this.$service.award.getLuckDetail(this.id)
                this.item = res
            },

            async showConvertConfirm() {
                if (this.item.magicAmount > 0) {
                    this.$service.award.convertPreview([this.item.id]).then((res) => {
                        if (res) {
                            this.$refs.convertConfirmRef.show([this.item], res.totalMagicAmount)
                        }
                    })
                } else {
                    this.$message.warn('不可兑换')
                }
            },
            onConvertSuccess() {
                let self = this
                this.$message.success('兑换成功')
                setTimeout(function () {
                    self.$router.back()
                }, 1000)
            }
        }
    }
</script>
<style lang="scss" scoped>
    .pageWrapper {
        padding: 24rpx;
    }
    .icon {
        width: 180rpx;
        height: 180rpx;
        border-radius: 10rpx;
    }
    .icon-title {
        width: 90rpx;
        height: 32rpx;
        // margin-left: -18rpx;
    }

    .btn-bx {
        width: 180rpx;
        height: 40rpx;
        background: linear-gradient(90deg, #2affff 0%, #4d70f2 100%);
        border-radius: 20rpx;
    }
    .safe-flag {
        width: 192rpx;
        height: 120rpx;
        position: absolute;
        right: 32rpx;
    }
    .btnBox2 {
        padding-top: 8rpx;
        width: 326rpx;
        height: 80rpx;
        background: #fec433;
        border-radius: 40rpx;
        text-align: center;
        margin: auto;
    }
    .content {
        background-color: #fff;
    }
    .detailInfo {
        padding: 24rpx;
        margin-bottom: 20rpx;
        text-align: center;
    }
    .formBox {
        display: inline-block;
        background: #f8f8f8;
        border-radius: 884rpx 884rpx 884rpx 884rpx;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 350;
        font-size: 24rpx;
        color: #666666;
        line-height: 44rpx;
        padding: 4rpx 24rpx;
    }
</style>