Client-Teapay/src/pages/consumerGold/index.vue

<template>
  <div class="Appindex">
    <div class="container_box">
      <!-- 顶部 -->
      <view class="head">
        <!-- 专区入口 -->
        <div class="search_box flex_r flex_jb">
          <div class="search-box flex_r flex_jb flex_ac">
            <div class="district">
              <image
                src="/static/img/consumer_logo.png"
                alt="logo"
                class="logo"
              />
            </div>
            <div class="search flex_r flex_jb flex_ac">
              <span class="iconfont">&#xe661;</span>
              <input
                v-model="searchKey"
                @confirm="toSearch"
                class="inp"
                placeholder="搜索你要的内容"
              />
              <span class="search_btn" @click="toSearch">搜索</span>
            </div>
          </div>
        </div>
        <div class="l_tabBar flex_r flex_jb">
          <div
            class="item flex_c flex_ac"
            v-for="(i, s) in tabs"
            :key="s"
            @click="categoryClick(i)"
          >
            <img :src="i.image" alt="" class="ico" />
            <span class="tit">{{ i.name }}</span>
          </div>
        </div>
        <!-- 专区-end -->
        <!-- 活动 -->
        <view v-if="activeShow">
          <view class="single_product" v-if="homeImg.length">
            <image
              class="single_product_img"
              mode="widthFix"
              :src="homeImg[0].image"
              @click="setPageUrl(homeImg[0])"
            ></image>
          </view>
          <view class="activity" v-if="homeImg.length">
            <image
              class="act_img act_one_img"
              :src="homeImg[1].image"
              mode=""
              @click="setPageUrl(homeImg[1])"
            ></image>
            <view class="act_other">
              <image
                class="act_img act_two_img"
                :src="homeImg[2].image"
                mode=""
                @click="setPageUrl(homeImg[2])"
              ></image>
              <image
                class="act_img act_two_img"
                :src="homeImg[3].image"
                mode=""
                @click="setPageUrl(homeImg[3])"
              ></image>
            </view>
          </view>
        </view>
        <!-- 活动-end -->
      </view>
      <view class="bou_head flex_r flex_ac flex_jc">
        <image class="bou_img" src="/static/img/splite.png" mode=""></image>
        <view class="bou_title">{{ categoryTitle }}</view>
        <image class="bou_img" src="/static/img/splite.png" mode=""></image>
      </view>
      <view class="list_bar">
        <view class="product-list">
          <view
            class="product"
            v-for="(i, s) in productList"
            :key="s"
            @click="NavToGoodsDetail(i.id, 4)"
          >
            <view class="image-view">
              <image class="product-image" :src="i.goods.original_img"></image>
            </view>
            <view class="content-view">
              <view :class="['product-title', 'ellipsis']">{{
                i.goods.goods_name
              }}</view>
              <view class="product-price">
                <text class="product-price-original">{{ i.cost_price }}</text>
                <text class="product-text"
                  >赠<text class="corFE2C15">{{ i.give_cha_bao }}</text
                  >茶宝</text
                >
              </view>
              <view class="product-txt">
                <text class="product-price-favour">￥{{ i.market_price }}</text>
                <text class="product-text">消费金抵</text>
                <span class="corFE2C15">￥{{ Number(i.consume) }}</span>
              </view>
              <!-- <view class="product-txt" v-if="i.type == 1">赠送{{ i.give_integral + "批发券" }}</view> -->
              <view class="product-txt"
                >限时赠送<text class="corFE2C15">{{ i.teac }}</text
                >TeaC</view
              >
              <view class="product-txt fenxiang">
                <text class="iconfont red">&#xe62b;</text>
                <text class="red">分享约获得 {{ i.first_teac }} 现金</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="con_nothing" v-if="haveGoods">
        <image
          mode="widthFix"
          class="image"
          src="/static/img/con_nothing.png"
        ></image>
        <text>{{ "暂无商品信息" }}</text>
      </view>
      <view class="fz_w_text">让数字经济赋能美好生活！</view>
    </div>
  </div>
</template>
<script>
// import tabs from "@/static/js/tabs"; //专区入口
import { post } from "@/request/api.js";
export default {
  name: "consumerGoldIndex",
  data() {
    return {
      not_list: [], // 公告列表
      homeImg: [], //活动列表
      productList: [], //商品数据
      searchKey: "", //搜索关键词
      // tabs,
      tabs: [],
      haveGoods: false, // 是否有商品
      activeShow: true,
      categoryId: 1, // 分类id
      categoryTitle: "今日推荐",
      page: 1,
    };
  },
  onLoad(option) {
    // uni.Luserfun()
  },
  onShow() {
    this.page = 1;
    this.activeShow = true;
    this.categoryId = 1;
    this.categoryTitle = "今日推荐"
    this.productList = [];
    this.loadData();
    this.getCategory();
    this.gethomeImg(); //活动列表
  },
  onHide() {},
  methods: {
    loadData() {
      let that = this;
      uni.showLoading({ mask: true });
      let params = {
        page: this.page,
        category_id: this.categoryId,
      };
      post("v1/goods/categoryInfo", params).then((res) => {
        uni.hideLoading();
        if (res.code === 0) {
          let obj = res.data.data.data;
          if (this.page == 1) {
            that.productList = [];
          }
          if (this.page == 1 && obj.length <= 0) {
            that.haveGoods = true;
          } else {
            that.haveGoods = false;
          }

          if (obj.length > 0) {
            obj.forEach((e) => {
              that.productList.push(e);
            });
          } else {
            // console.log("这里");
            that.page = -1;
            // this.$toast("暂无更多");
          }
        } else {
          this.page = -1;
          this.haveGoods = true;
          this.$toast("暂无更多");
        }
      });
    },
    categoryClick(item) {
      this.page = 1;
      this.categoryId = item.id;
      this.categoryTitle = item.name;
      this.activeShow = false;
      this.productList = [];
      this.loadData();
    },
    // 跳转到商品详情页
    NavToGoodsDetail(id, type) {
      this.goto("/pages/product/p_details", { id, type });
    },
    // 分类列表
    getCategory() {
      post("v1/goods/category").then((res) => {
        if (res.code === 0) {
          this.tabs = res.data.data;
        }
      });
    },
    // 活动列表
    gethomeImg() {
      post("v1/goods/worthImg").then((res) => {
        if (res.code === 0) {
          this.homeImg = res.data.data;
        }
      });
    },
    // 金刚区跳转
    setPageUrl(item) {
      this.goto(
        "/pages/consumerGold/specialCategory?name=" +
          item.name +
          "&id=" +
          item.id +
          "&type=4"
      );
    },
    goVipGift() {
      this.goto("/pages/product/productRetail", { type: 4, is_vip: 1 });
    },
    // 搜索
    toSearch() {
      this.goto("/pagesC/settledMerchant/index", { key: this.searchKey });
    },
  },
  //页面上拉触底事件的处理函数
  onReachBottom: function () {
    // console.log(this.page, "page");
    if (this.page != -1) {
      var that = this;
      setTimeout(function () {
        that.page = that.page + 1;
        that.loadData();
      }, 800);
    }
  },
  computed: {},
  watch: {},
};
</script>
<style scoped lang='scss'>
.Appindex {
  width: 100%;
  height: auto;
  overflow: auto;
  background-color: #de9f4b;
}
.container_box {
  border-radius: 60rpx 60rpx 0 0;
  margin-top: 60rpx;
  background-color: #f5f6f8;
}
.head {
  padding: 12rpx 28rpx;
}

.head_search {
  width: 100%;
  height: 64rpx;
  line-height: 64rpx;
  background: #f3f5f7;
  border-radius: 32rpx;
  text-align: center;
  font-size: 28rpx;
  color: #bbbbbb;
  margin-bottom: 26rpx;

  .search_text {
    margin-left: 14rpx;
  }
}

.head_notice {
  margin: 30rpx 0;

  .notice_title {
    width: 130rpx;
    height: 40rpx;
    float: left;

    .gg_img {
      width: 100%;
      height: 40rpx;
    }
  }

  .notice_swiper {
    height: 40rpx;
    padding-left: 20rpx;
    font-size: 28rpx;
    float: left;
    box-sizing: border-box;
    width: calc(100% - 130rpx);

    .not_list {
      width: calc(100% - 50rpx);
    }

    .not_ico {
      width: 30rpx;
      font-size: 28rpx;
      color: #999;
    }

    .not_list,
    .not_ico {
      display: inline-block;
      vertical-align: middle;
      height: 40rpx;
      line-height: 40rpx;
    }
  }
}
.search-box {
  width: 100%;
  padding: 10rpx;
  // margin-bottom: 12rpx;

  .district {
    .logo {
      width: 92rpx;
      height: 67rpx;
    }
  }

  .search {
    border: 1px solid #d78c2e;
    height: 60rpx;
    line-height: 60rpx;
    padding-left: 20rpx;
    border-radius: 31rpx;

    .iconfont {
      font-size: 30rpx;
    }

    .inp {
      font-size: 25rpx;
      padding: 0 8rpx;
      width: 360rpx;
    }

    .search_btn {
      background-color: #d78c2e;
      height: 100%;
      color: #fff;
      border-radius: 31rpx;
      font-size: 28rpx;
      padding: 0 28rpx;
    }
  }

  .scan-ico {
    font-size: 55rpx;
  }
}
.l_tabBar {
  margin: 32rpx 0;
  background-color: #fff;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
  box-shadow: 4rpx 4rpx 8rpx 4rpx rgba(0, 0, 0, 0.12);
  flex-wrap: wrap;

  .item {
    width: 105rpx;
    margin: 10rpx 10rpx;
  }

  .ico {
    width: 80rpx;
    height: 80rpx;
    padding: 20rpx 0;
  }

  .tit {
    font-size: 24rpx;
    text-align: center;
  }
}

.bou_head {
  width: 100%;
  height: 114rpx;
  // margin-top: 50rpx;

  .bou_img {
    width: 92rpx;
    height: 30rpx;
  }

  .bou_title {
    height: 30rpx;
    line-height: 30rpx;
    font-size: 36rpx;
    color: #121212;
    font-weight: bold;
    margin: 0 36rpx;
  }
}
.single_product {
  margin-bottom: 16rpx;
  &_img {
    width: 100%;
  }
}
// 活动
.activity {
  .act_one_img {
    display: inline-block;
    width: 340rpx;
    height: 424rpx;
    margin-right: 10rpx;
  }

  .act_other {
    display: inline-block;
    width: calc(100% - 340rpx - 10rpx);
  }

  .act_two_img {
    width: 100%;
    height: 208rpx;
  }

  .act_img {
    border-radius: 10rpx;
  }
}

// 活动-end

// 商品列表
.list_bar {
  .tit {
    text-align: center;
    font-size: 36rpx;
    color: #121212;
    padding: 40rpx 0 20rpx;
    font-weight: bold;
  }
}

.product-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 0 30rpx;

  .product {
    width: 48.5%;
    margin-bottom: 20rpx;
    padding-bottom: 12rpx;
    border-radius: 10rpx;
    box-shadow: 4rpx 4rpx 8rpx 4rpx rgba(0, 0, 0, 0.12);

    &:nth-child(2n) {
      margin-left: 3%;
    }
  }

  .product-image {
    border-radius: 10rpx 10rpx 0 0;
    width: 100%;
    height: 42.3vw;
    object-fit: cover;
  }

  .content-view {
    padding: 0 16rpx;
  }

  .product-title {
    width: 100%;
    overflow: hidden;
    line-height: 1.5;
    font-size: 28rpx;
    color: #121212;
  }

  .product-price {
    color: #121212;
    font-size: 28rpx;
    position: relative;
  }

  .product-price-original {
    color: #18bb88;
    font-size: 32rpx;
    font-weight: bold;

    &:before {
      content: "￥";
      font-size: 20rpx;
    }
  }

  .product-price-favour {
    color: #888888;
    text-decoration: line-through;
    margin-left: 20rpx;
  }

  .product-tip {
    position: absolute;
    right: 20rpx;
    background-color: #ff3333;
    color: #ffffff;
    padding: 0 20rpx;
    border-radius: 10rpx;
  }

  .product-unit {
    font-size: 24rpx;
    color: #18bb88;
  }

  .product-txt,
  .product-text {
    font-size: 22rpx;
    color: #787878;

    .iconfont {
      margin-right: 6rpx;
    }
  }

  .product-price-msg {
    font-size: 20rpx;
    color: #ff6d44;
  }

  .product-text {
    margin-left: 16rpx;
  }

  .red {
    color: #fa2e18;
  }

  .fenxiang {
    font-size: 20rpx;
    background: rgba(250, 46, 24, 0.08);
    display: inline-block;
    border-radius: 6rpx;
    padding: 0 16rpx;
  }
}

.con_nothing {
  padding: 80rpx 30rpx;
  overflow: hidden;
  text-align: center;
}
.con_nothing .image {
  width: 200rpx;
  height: 200rpx;
  display: block;
  margin: 0 auto 20rpx;
}
.con_nothing text {
  font-size: 32rpx;
  color: #aaa;
  line-height: 1.5;
  padding: 20rpx 0;
  width: 100%;
  overflow: hidden;
}
</style>