消费金电商增加二级页面

src/pages.json

@@ -536,6 +536,12 @@
 					"style": {
 						"navigationBarTitleText": "修改信息"
 					}
+				},
+				{
+					"path": "consumerGold/index",
+					"style": {
+						"navigationBarTitleText": "消费金电商"
+					}
 				}
 			]
 		}

src/pages/index/index.vue

@@ -40,7 +40,7 @@
             <!-- 专区-end -->
             <!-- 活动 -->
             <view class="activity" v-if="homeImg.length">
-                <image class="act_img act_one_img" :src="homeImg[0].image" @click="setPageUrl({ type: 4 })" mode=""></image>
+                <image class="act_img act_one_img" :src="homeImg[0].image" @click="goto('/pagesC/consumerGold/index')" mode=""></image>
                 <view class="act_other">
                     <image class="act_img act_two_img" :src="homeImg[1].image" @click="goto('/pages/product/productTeaBaby?type=5')" mode=""></image>
                     <image class="act_img act_two_img" :src="homeImg[2].image" mode="" @click="goVipGift"></image>

src/pagesC/consumerGold/index.vue

@@ -0,0 +1,594 @@
+<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">
+            <image
+              class="single_product_img"
+              mode="widthFix"
+              :src="homeImg[0]"
+            ></image>
+          </view>
+          <view class="activity" v-if="homeImg.length">
+            <image
+              class="act_img act_one_img"
+              :src="homeImg[1]"
+              mode=""
+            ></image>
+            <view class="act_other">
+              <image
+                class="act_img act_two_img"
+                :src="homeImg[2]"
+                mode=""
+              ></image>
+              <image
+                class="act_img act_two_img"
+                :src="homeImg[3]"
+                mode=""
+              ></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_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>{{ textStr ? textStr : "暂无商品信息" }}</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) {
+    this.getCategory();
+    // uni.Luserfun()
+  },
+  onShow() {
+    this.page = 1;
+    this.productList = [];
+    this.loadData();
+    this.gethomeImg(); //活动列表
+  },
+  onHide() {},
+  methods: {
+    loadData() {
+      let that = this;
+      uni.showLoading({ mask: true });
+      let params = {
+        page: this.page,
+        row: 20,
+        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.img;
+        }
+      });
+    },
+    // 金刚区跳转
+    setPageUrl(item) {
+      // if ([1, 3, 4, 6].includes(item.type)) {
+      //   this.goto("/pages/product/productRetail", { type: item.type });
+      // } else if (item.type == 2) {
+      //   this.goto("/pages/product/productWholesale", { type: 2 });
+      // } else if (item.type == 5) {
+      //   this.goto("/pages/product/productTeaBaby", { type: item.type });
+      // } else {
+      //   appEv.errTips("此功能暂未开放！");
+      //   return false;
+      // }
+    },
+    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;
+  }
+}
+.not_goods {
+  width: 600rpx;
+  height: 600rpx;
+  padding: 80rpx 30rpx;
+}
+.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>