Client-Teapay/src/pages/product/productTeaBaby.vue

<template>
    <view class="container">
        <!-- 批发专区 -->
        <view class="who_list flex_r" v-for="(item, index) in who_list" :key="index" @tap="NavToGoodsDetail(item.id)">
            <image class="list_img" :src="item.original_img"></image>
            <view class="list_info flex_c flex_jb">
                <view class="info_name">{{ item.goods_name }}</view>
                <view class="info_msg">
                    <view></view>
                    <span v-if="Number(item.price) != 0">{{ item.price }}元</span>
                    <span v-if="Number(item.cha_bao_price) != 0 && Number(item.price) != 0">+</span>
                    <span v-if="Number(item.cha_bao_price) != 0">{{ item.cha_bao_price }}茶宝</span>
                </view>
                <view class="info_btn_con flex_r flex_je">
                    <view class="info_btn flex_r flex_ac flex_jc">兑换</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
let page = 1;
import { post } from "@/request/api.js";
export default {
    data() {
        return {
            who_list: [], // 茶宝兑换商品列表
            type: "",
        };
    },
    onLoad(e) {
        this.type = e.type;
    },
    onShow() {
        page = 1;
        this.who_list = [];
        this.loadData();
    },
    methods: {
        loadData() {
            let that = this;
            uni.showLoading({ mask: true });
            let data = {
                page: page,
                type: this.type,
            };
            post("v1/goods/goodsList", data).then((res) => {
                uni.hideLoading();
                if (res.code === 0) {
                    let obj = res.data.data;
                    if (page == 1) that.who_list = [];
                    if (obj.length > 0) {
                        obj.forEach((e) => {
                            that.who_list.push(e);
                        });
                    } else {
                        page = -1;
                        this.$toast("暂无更多");
                    }
                } else {
                    page = -1;
                    this.$toast("暂无更多");
                }
            });
        },
        // 跳转到商品详情页
        NavToGoodsDetail: function(id) {
            uni.navigateTo({
                url: "/pages/product/p_details?id=" + id + "&type=" + this.type,
            });
        },
    },

    onShareAppMessage() {
        let userinfo = uni.getStorageSync("userinfo");
        var path = "/pages/product/productWholesale";
        if (userinfo.invite) path = "/pages/product/productWholesale?invite=" + userinfo.invite;
        var title = `好生活，茶付宝！`;
        return {
            title: title,
            path: path,
        };
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {
        if (page != -1) {
            var that = this;
            setTimeout(function() {
                ++page;
                that.loadData();
            }, 800);
        }
    },
};
</script>
<style lang="scss">
// 页面配置
page {
    background: #f5f5f5;
}

.container {
    padding: 18rpx 30rpx 0;
    box-sizing: border-box;
}

// 页面配置-end

// 批发商品列表
.info_btn_con {
    width: 100%;
    overflow: hidden;
}

.list_info {
    width: calc(100% - 200rpx);
    overflow: hidden;
}

.list_img {
    width: 200rpx;
    height: 180rpx;
    margin-right: 35rpx;
    border-radius: 12rpx;
}

.info_btn {
    width: 134rpx;
    height: 50rpx;
    background: #2db48a;
    font-size: 30rpx;
    color: #fff;
    border-radius: 12rpx;
}

.info_msg {
    width: 100%;
    overflow: hidden;
    font-size: 28rpx;
    color: #18bb88;
    font-family: "SourceHanSansCN-Medium";
    font-weight: 500;
}

.info_name {
    width: 100%;
    overflow: hidden;
    font-size: 34rpx;
    color: #1b1b1b;
    font-family: "SourceHanSansCN-Bold";
    font-weight: bold;
}

.who_list {
    width: 100%;
    overflow: hidden;
    background: #fff;
    padding: 20rpx 16rpx;
    box-sizing: border-box;
    border-radius: 12rpx;
    margin-bottom: 18rpx;
    align-items: initial;
}

// 批发商品列表-end
</style>