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;
let app = getApp();
var appEv = app.$vm.$options;
// let reqApi = new ReqApi();
// import { ReqApi } from "@/utils/reqTools.js";
import { get, post, u_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("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;
            appEv.errTips("暂无更多");
          }
        } else {
          page = -1;
          appEv.errTips("暂无更多");
        }
      });
    },
    // 跳转到商品详情页
    NavToGoodsDetail: function (id) {
      uni.navigateTo({
        url: "/pages/product/p_details?id=" + id + "&type=" + this.type,
      });
    },
  },

  onShareAppMessage: function () {
    let userinfo = uni.getStorageSync("userinfo");
    var path = "/pages/product/productWholesale?agentId=1";
    if (userinfo.user_id) {
      path = "/pages/product/productWholesale?agentId=" + userinfo.user_id;
    }
    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:216rpx;
  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>