yihuo/pages/weal/wish.vue

<template>
    <view class="blessingsPage">
        <scroll-view
            class="p-scroll-wrapper"
            :style="{ top: top + 'px' }"
            scroll-y
            refresher-enabled
            refresher-default-style="white"
            @refresherrefresh="pullRefresh"
            :refresher-triggered="refreshing"
        >
            <view>
                <view class="blessingsTitle">
                    <image
                        :src="ossurl.welfare.blessings.blessingsTitle"
                        class="blessingsTitleImage"
                        mode="aspectFit"
                    />
                </view>
                <view class="relative swiperBox">
                    <swiper
                        class="cardSwiper"
                        :indicator-dots="false"
                        @change="changeSwiper"
                        :current="active"
                    >
                        <swiper-item
                            v-for="(item, index) in tableData"
                            :key="item.id"
                            :class="[active == index ? 'cur' : '']"
                        >
                            <view class="swiper-item" @click="showGoodsDetail(item.spu)">
                                <view
                                    class="imgBox"
                                    :style="
                                        'background-image:url(' +
                                        ossurl.welfare.blessings.cardBg +
                                        ')'
                                    "
                                >
                                    <image
                                        :src="item.spu.cover"
                                        class="spu-image"
                                        mode="aspectFit"
                                    />
                                </view>

                                <view class="numBox">
                                    仅剩
                                    <span class="num">
                                        {{ item.quantity - item.completeQuantity }}
                                    </span>
                                </view>
                            </view>
                        </swiper-item>
                    </swiper>
                    <view class="prev" @click="active -= 1" v-if="active > 0">
                        <image
                            :src="ossurl.welfare.blessings.prev"
                            class="image"
                            mode="aspectFit"
                        />
                    </view>
                    <view class="next" @click="active += 1" v-if="active < tableData.length - 1">
                        <image
                            :src="ossurl.welfare.blessings.next"
                            class="image"
                            mode="aspectFit"
                        />
                    </view>
                    <view class="rule-btn" @click="$refs.rule.show()">
                        <image
                            :src="ossurl.welfare.blessings.rule"
                            class="image"
                            mode="aspectFit"
                        />
                    </view>
                </view>

                <view class="goods-wrapper">
                    <view class="">
                        <view class="blessingsPrograss">
                            <image
                                :src="ossurl.welfare.blessings.blessingsPrograss"
                                class="blessingsPrograssImg"
                                mode="aspectFit"
                            />
                        </view>
                    </view>
                    <view class="progress">
                        <view class="progressNum" :style="{ left: progress + '%' }">
                            {{ progress > 0 ? progress.toFixed(1) : progress }}%
                        </view>
                        <view class="bar" :style="{ width: progress + '%' }"></view>
                    </view>
                    <view class="processBox">
                        <view class="addItem" @click="showStoreChoose">
                            <image :src="ossurl.welfare.blessings.add" class="add" />
                        </view>
                        <view class="goodListBox">
                            <view v-for="(item, index) in goodsList" :key="item.id" class="item">
                                <image
                                    :src="item.spu.cover"
                                    class="goods radius6"
                                    mode="aspectFit"
                                />
                                <span class="cuIcon-close close" @click="minus(item)"></span>
                            </view>
                        </view>
                    </view>
                </view>
                <view style="height: 130rpx"></view>
            </view>
            <empty v-if="isEmpty" :top="180" />
        </scroll-view>
        <view class="bottom paddingB20 paddingT5 flex-align-center">
            <view class="collect bottomBtn" v-if="!progress || progress < 100" @click="toAward">
                还差一点点，去收集
            </view>
            <view class="submit bottomBtn" v-else @click="submit">点亮心愿</view>
        </view>
        <goods-detail ref="goodsDetailRef" @close="goodsDetailColse" />
        <rule ref="rule" />
    </view>
</template>

<script>
    import ossurl from '@/utils/ossurl'
    import empty from '@/components/empty.vue'
    import store from '@/store'
    import { throttle } from '@/utils'
    import goodsDetail from './../store/goods_detail'
    import rule from './wish_rule.vue'

    export default {
        components: { empty, goodsDetail, rule },
        props: {
            statusBarHeight: Number
        },
        data() {
            return {
                ossurl,
                refreshing: false,
                requesting: false,
                active: 0,
                tableData: [],
                goodsList: [],
                goodsMap: {},
                progress: 0
            }
        },
        computed: {
            top() {
                return this.statusBarHeight + uni.upx2px(72) + 45
            },
            left() {
                return (store.state.systemInfo.screenWidth - uni.upx2px(466)) / 2
            }
        },
        mounted() {
            this.loadData()
            this.$event.on(this.$event.key.STORE_CHOOSE, (map) => {
                this.goodsMap = map
                this.goodsList = Object.values(map)
                this.wishPreview()
            })
        },
        destroyed() {
            this.$event.off(this.$event.key.STORE_CHOOSE)
        },
        methods: {
            pullRefresh() {
                this.refreshing = true
                this.loadData()
            },
            async loadData() {
                this.requesting = true
                const res = await this.$service.weal.wishList()
                if (res && res.length > 0) {
                    this.tableData = res
                }
                setTimeout(() => {
                    this.refreshing = false
                    this.requesting = false
                }, 1000)
                return res
            },
            changeSwiper(e) {
                this.changeActive(e.detail.current)
                this.wishPreview()
            },
            changeActive(index) {
                this.active = index
            },
            showStoreChoose() {
                if (!this.$common.checkLogin()) return
                this.$cache.set(this.$cache.key.STORE_CHOOSE, this.goodsMap)
                this.$router.push('store-choose', { type: 1 })
            },
            minus(item) {
                delete this.goodsMap[item.id]
                this.goodsList = Object.values(this.goodsMap)
                this.wishPreview()
            },
            async wishPreview() {
                if (!this.goodsList || this.goodsList.length === 0) {
                    this.progress = 0
                    return
                }
                let inventoryIds = this.goodsList.map((item) => item.id)
                let id = this.tableData[this.active].id
                const res = await this.$service.weal.wishPreview(id, inventoryIds)
                if (res) {
                    let progressNum = res.progress * 100
                    let progressStr = progressNum.toFixed(4)
                    let array = progressStr.split('.')
                    let str = array[0] + '.' + array[1].substr(0, 2)
                    this.progress = Number(str)<100?Number(str):100
                }
            },
            async submit() {
                throttle.call(this.realSubmit)
            },
            realSubmit() {
                if (!this.goodsList || this.goodsList.length === 0 || this.progress < 100) {
                    return
                }
                let inventoryIds = this.goodsList.map((item) => item.id)
                let id = this.tableData[this.active].id
                this.$message.confirm('确定点亮吗?', async () => {
                    const res = await this.$service.weal.wishSubmit(id, inventoryIds)
                    if (res) {
                        this.goodsList = []
                        this.goodsMap = {}
                        this.progress = 0
                        this.$message.success('置换成功')
                    }
                })
            },
            toAward() {
                this.$router.switchTab('award')
            },
            showGoodsDetail(spu) {
                this.$parent.$parent.lock = true
                this.$refs.goodsDetailRef.show(spu)
            },
            goodsDetailColse() {
                this.$parent.$parent.lock = false
            }
        }
    }
</script>
<style lang="scss" scoped>
    .blessingsPage {
        padding-top: 160rpx;
    }
    .cardSwiper {
        height: 630rpx;
        position: relative;
        .swiper-item {
            padding: 0;
            position: relative;
            .imgBox {
                height: 630rpx;
                background-size: 474rpx 626rpx;
                background-position: center;
                background-repeat: no-repeat;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                padding-top: 40rpx;
            }
            .spu-image {
                width: 400rpx;
                height: 550rpx;
            }
            .numBox {
                position: absolute;
                left: 118rpx;
                z-index: 100;
                bottom: 50rpx;

                background: #000000;
                color: #f0cd49;
                font-size: 20rpx;
                border-radius: 0 28rpx 28rpx 0;
                line-height: 38rpx;
                padding: 4rpx;
                display: flex;
                align-items: center;
                .num {
                    display: inline-block;
                    text-align: center;
                    margin-left: 8rpx;
                    width: 30rpx;
                    height: 30rpx;
                    background: #f0cd49;
                    color: #000;
                    border-radius: 50%;
                    line-height: 30rpx;
                    font-size: 24rpx;
                }
            }
        }
    }
    .swiperBox {
        position: relative;
        height: 41vh;
        .prev,
        .next {
            position: absolute;
            z-index: 100;
            .image {
                width: 72rpx;
                height: 72rpx;
            }
        }
        .prev {
            left: 20rpx;
            top: 45%;
        }
        .next {
            right: 20rpx;
            top: 45%;
        }
    }

    .goods-wrapper {
        height: 20vh;

        margin: 0 28rpx;
        margin-top: 2.5vh;
        padding: 32rpx 30rpx;
        border-radius: 20rpx;
        min-height: 200rpx;
        .progress {
            margin-top: 20rpx;
            margin-bottom: 16rpx;
            height: 36rpx;
            width: 100%;
            border-radius: 18rpx;
            background: #c20009;
            border: 8rpx solid rgb(231, 86, 88);
            position: relative;
            .bar {
                height: 100%;
                border-radius: 10rpx;
                background: linear-gradient(90deg, #000000 0%, #460008 100%);
                width: 0%;
                position: absolute;
                left: 0;
                height: 18rpx;
                bottom: 0;
            }
            .progressNum {
                position: absolute;
                width: 84rpx;
                height: 38rpx;
                border: 4rpx solid #fde3ac;
                text-align: center;
                line-height: 30rpx;
                font-size: 24rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 400;
                color: #fde3ac;
                border-radius: 20rpx;
                z-index: 10;
                background: #000000;
                bottom: -8rpx;
                margin-left: -42rpx;
            }
        }
        .item {
            position: relative;
            margin: 14rpx 16rpx;
            width: 72rpx;
            height: 94rpx;

            background: #930007;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            .goods {
                width: 60rpx;
                height: 80rpx;
            }
            .add {
                width: 116rpx;
                height: 116rpx;
            }
            .close {
                position: absolute;
                right: -10rpx;
                top: -10rpx;
                width: 32rpx;
                height: 32rpx;
                background-color: #000;
                color: #fde3ac;

                border: 3rpx solid #fde3ac;
                border-radius: 50%;
                font-size: 20rpx;
                text-align: center;
                line-height: 28rpx;
            }
        }
    }
    .bottom {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .rule-btn {
        position: absolute;
        right: 0rpx;
        top: -100rpx;
        .image {
            width: 42rpx;
            height: 74rpx;
        }
    }
    .blessingsTitle {
        text-align: center;
        height: 10vh;
        line-height: 10vh;
        .blessingsTitleImage {
            height: 130rpx;
            width: 474rpx;
        }
    }
    .blessingsPrograss {
        text-align: center;
        .blessingsPrograssImg {
            width: 204rpx;
            height: 48rpx;
        }
    }
    .bottomBtn {
        border-radius: 40rpx;
        background: #f0cd49;
        border: 8rpx solid rgb(213, 87, 69);
        line-height: 60rpx;
        padding: 0 80rpx;
    }
    .processBox {
        padding: 16rpx 6rpx;
        border-radius: 10rpx;
        background: rgba(105, 0, 0, 0.23);
        display: flex;
        .goodListBox {
            overflow: auto;
            flex: 1;
            width: 0;
            word-break: keep-all;
            white-space: nowrap;
            .item {
                display: inline-block;
                padding: 12rpx 14rpx;
            }
        }
        .addItem {
            position: relative;
            padding-right: 15rpx;
            &::after {
                position: absolute;
                right: 0rpx;
                width: 4rpx;
                height: 100%;
                background: linear-gradient(
                    180deg,
                    rgba(253, 227, 172, 0) 0%,
                    #fde3ac 54%,
                    rgba(253, 227, 172, 0) 100%
                );
                content: '';
                display: inline-block;
            }
            .add {
                width: 112rpx;
                height: 112rpx;
            }
        }
    }
</style>