caimei-applets-mcare/pages/goods/good-activity.vue

<template>
    <view
        class="common_contant"
        :style="{
            padding: active.activeType == '2' ? '' : '24rpx',
            backgroundColor: active.activeType == '1' ? '#F7F7F7' : '#fff'
        }"
    >
        <tui-skeleton
           	v-if="skeletonShow"
            backgroundColor="#fafafa"
            borderRadius="10rpx"
            :isLoading="true"
            :loadingType="5"
        ></tui-skeleton>
        <view v-else>
            <view class="img_big" v-if="active.activeType == '2'" @click="activeProducts">
                <image style="width: 100%;height: 100%;" :src="active.activeImageVos[0].image" mode="aspectFill"></image>
            </view>
            <view class="special_all" v-if="active.activeType == '3'">
                <SpecialItem v-for="(item, index) in active.activeImageVos" :key="index" :activeImage="item" />
            </view>
            <view class="product_all" v-if="active.activeType == '1'">
                <ProGood v-for="item in active.products" :key="item" :storeInfo="item" />
            </view>
        </view>
    </view>
</template>

<script>
import jumpMixins from '@/mixins/jumpMixins.js'
import SpecialItem from './components/cm-special.vue'
import ProGood from './components/procurement_good.vue'
export default {
    components: {
        SpecialItem,
        ProGood
    },
    mixins: [jumpMixins],
    data() {
        return {
            skeletonShow: true,
            active: {}, // 活动数据
            refleshdata: {} // 刷新数据
        }
    },
    mounted() {},
    onLoad(options) {
        this.refleshdata = options
        this.specialInfo(options)
    },
    onPullDownRefresh() {
        this.skeletonShow = true
        this.specialInfo(this.refleshdata)
        uni.stopPullDownRefresh()
    },
    methods: {
        // 活动数据
        async specialInfo(options) {
            try {
                const { data } = await this.SpecialService.specialInfo({ organizeId: options.organizeId, activeId: options.jumpActiveId })
                this.active = data.active
                uni.setNavigationBarTitle({
                    title: data.active.topic
                })
                this.skeletonShow = false
            } catch (error) {
                console.log('error', error)
            }
        },
        // 跳转活动商品列表
        activeProducts() {
            uni.navigateTo({
                url: '/pages/goods/active-product?activeImageId=' + this.active.activeImageVos[0].id
            })
        },
    }
}
</script>

<style scoped lang="scss">
.common_contant {
    height: 100%;
    box-sizing: border-box;
}
.img_big {
    width: 100vw;
    height: 100vh;
}
.product_all {
    background: #f7f7f7;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}
</style>