Browse Source

添加二级界面特殊小分类(中间模块)页面

2662043119@qq.com 1 year ago
parent
commit
2f9907d993
3 changed files with 337 additions and 22 deletions
  1. 6 0
      src/pages.json
  2. 18 22
      src/pagesC/consumerGold/index.vue
  3. 313 0
      src/pagesC/consumerGold/specialCategory.vue

+ 6 - 0
src/pages.json

@@ -542,6 +542,12 @@
 					"style": {
 						"navigationBarTitleText": "消费金电商"
 					}
+				},
+				{
+					"path": "consumerGold/specialCategory",
+					"style": {
+						"navigationBarTitleText": "消费金电商"
+					}
 				}
 			]
 		}

+ 18 - 22
src/pagesC/consumerGold/index.vue

@@ -43,25 +43,29 @@
             <image
               class="single_product_img"
               mode="widthFix"
-              :src="homeImg[0]"
+              :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]"
+              :src="homeImg[1].image"
               mode=""
+              @click="setPageUrl(homeImg[1])"
             ></image>
             <view class="act_other">
               <image
                 class="act_img act_two_img"
-                :src="homeImg[2]"
+                :src="homeImg[2].image"
                 mode=""
+                @click="setPageUrl(homeImg[2])"
               ></image>
               <image
                 class="act_img act_two_img"
-                :src="homeImg[3]"
+                :src="homeImg[3].image"
                 mode=""
+                @click="setPageUrl(homeImg[3])"
               ></image>
             </view>
           </view>
@@ -119,7 +123,7 @@
           class="image"
           src="/static/img/con_nothing.png"
         ></image>
-        <text>{{ textStr ? textStr : "暂无商品信息" }}</text>
+        <text>{{ "暂无商品信息" }}</text>
       </view>
       <view class="fz_w_text">让数字经济赋能美好生活!</view>
     </div>
@@ -162,7 +166,6 @@ export default {
       uni.showLoading({ mask: true });
       let params = {
         page: this.page,
-        row: 20,
         category_id: this.categoryId,
       };
       post("v1/goods/categoryInfo", params).then((res) => {
@@ -218,22 +221,19 @@ export default {
     gethomeImg() {
       post("v1/goods/worthImg").then((res) => {
         if (res.code === 0) {
-          this.homeImg = res.data.data.img;
+          this.homeImg = res.data.data;
         }
       });
     },
     // 金刚区跳转
     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;
-      // }
+      this.goto(
+        "/pagesC/consumerGold/specialCategory?name=" +
+          item.name +
+          "&id=" +
+          item.id +
+          "&type=4"
+      );
     },
     goVipGift() {
       this.goto("/pages/product/productRetail", { type: 4, is_vip: 1 });
@@ -567,11 +567,7 @@ export default {
     padding: 0 16rpx;
   }
 }
-.not_goods {
-  width: 600rpx;
-  height: 600rpx;
-  padding: 80rpx 30rpx;
-}
+
 .con_nothing {
   padding: 80rpx 30rpx;
   overflow: hidden;

+ 313 - 0
src/pagesC/consumerGold/specialCategory.vue

@@ -0,0 +1,313 @@
+<template>
+  <view class="container">
+    <view class="product-list">
+      <view
+        class="product"
+        v-for="(i, s) in goods"
+        :key="s"
+        @click="NavToGoodsDetail(i.id)"
+      >
+        <view class="image-view">
+          <image class="product-image" :src="i.goods.original_img"></image>
+        </view>
+        <view class="content-view">
+          <view :class="['product-title', 'ellipsis2']">{{
+            i.goods_name
+          }}</view>
+          <view class="product-price">
+            <text class="product-price-original">{{ i.cost_price }}</text>
+            <text class="product-text" v-if="['3', '4'].includes(type)"
+              >赠<text class="corFE2C15">{{ i.give_cha_bao }}</text
+              >茶宝</text
+            >
+          </view>
+          <view class="product-txt" v-if="type == 4">
+            <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="type == 1">赠送{{ i.give_integral + "批发券" }}</view> -->
+          <view class="product-txt" v-if="type == 6"
+            >每<text class="green">{{ i.interval_time }}</text> 分钟降价
+            <text class="green">{{ i.drop_range * 100 }}%</text>
+          </view>
+          <view class="product-txt" v-if="['3', '4'].includes(type)"
+            >限时赠送<text class="corFE2C15">{{ i.teac }}</text
+            >TeaC</view
+          >
+          <view class="product-txt fenxiang" v-if="['3', '4'].includes(type)">
+            <text class="iconfont red">&#xe62b;</text>
+            <text class="red"
+              >分享约获得{{ i.first_teac
+              }}{{ type == 3 ? "TeaC" : "现金" }}</text
+            >
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- <not-goods v-if="haveGoods" textStr="暂无商品信息"></not-goods> -->
+    <view class="con_nothing" v-if="haveGoods">
+      <image
+        mode="widthFix"
+        class="image"
+        src="/static/img/con_nothing.png"
+      ></image>
+      <text>{{ "暂无商品信息" }}</text>
+    </view>
+  </view>
+</template>
+<script>
+let page = 1;
+import { post } from "@/request/api.js";
+import notGoods from "@/components/not-goods/index.vue";
+export default {
+  components: { notGoods },
+  data() {
+    return {
+      title: "",
+      type: "",
+      goods: [], // 商品列表
+      haveGoods: false, // 是否有商品
+      is_vip: undefined, //是否筛选“链接大使礼包”专区
+      categoryId: "",
+      titleName: "",
+    };
+  },
+  onLoad(e) {
+    console.log(e);
+    this.type = e.type;
+    this.categoryId = e.id;
+    this.titleName = e.name;
+    uni.setNavigationBarTitle({
+      title: e.name,
+    });
+  },
+  onShow() {
+    page = 1;
+    this.goods = [];
+    this.loadData();
+  },
+  methods: {
+    loadData() {
+      let that = this;
+      uni.showLoading({ mask: true });
+      let data = {
+        page: page,
+        type: this.type,
+        category_id: this.categoryId,
+      };
+      post("v1/goods/categoryInfo", data).then((res) => {
+        uni.hideLoading();
+        if (res.code === 0) {
+          let obj = res.data.data.data;
+          if (page == 1) that.goods = [];
+          if (page == 1 && obj.length <= 0) {
+            that.haveGoods = true;
+          } else {
+            that.haveGoods = false;
+          }
+          if (obj.length > 0) {
+            obj.forEach((e) => {
+              that.goods.push(e);
+            });
+          } else {
+            // console.log("这里");
+            page = -1;
+            this.$toast("暂无更多");
+          }
+        } else {
+          page = -1;
+          this.haveGoods = true;
+          this.$toast("暂无更多");
+        }
+      });
+    },
+    // 跳转到商品详情页
+    NavToGoodsDetail(id, type) {
+      uni.navigateTo({
+        url: "/pages/product/p_details?id=" + id + "&type=" + this.type,
+      });
+    },
+    // 点击关闭弹窗
+    closeBtn: function () {
+      this.$refs.shopping.close();
+    },
+  },
+  onShareAppMessage() {
+    let userinfo = uni.getStorageSync("userinfo");
+    var path =
+      "/pagesC/consumerGold/specialCategory?name=" +
+      this.titleName +
+      "&id=" +
+      this.categoryId +
+      "&type=4";
+    if (userinfo.invite)
+      path =
+        "/pagesC/consumerGold/specialCategory?invite=" +
+        userinfo.invite +
+        "&name=" +
+        this.titleName +
+        "&id=" +
+        this.categoryId +
+        "&type=4";
+    var title = `让数字经济赋能美好生活!`;
+    return {
+      title: title,
+      path: path,
+    };
+  },
+  //页面上拉触底事件的处理函数
+  onReachBottom: function () {
+    if (page != -1) {
+      var that = this;
+      setTimeout(function () {
+        page = page + 1;
+        that.loadData();
+      }, 800);
+    }
+  },
+};
+</script>
+<style lang="scss">
+// 页面配置
+page {
+  background: #f4f4f4;
+}
+
+.container {
+  padding: 30rpx 0;
+}
+
+// 页面配置-end
+
+// 商品列表
+.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: #888;
+    text-decoration: line-through;
+    font-size: 22rpx;
+    margin-right: 10rpx;
+
+    &:before {
+      content: "¥";
+    }
+  }
+
+  .product-tip {
+    position: absolute;
+    right: 20rpx;
+    background-color: #ff3333;
+    color: #ffffff;
+    padding: 0 20rpx;
+    border-radius: 10rpx;
+  }
+
+  .product-unit {
+    font-size: 24rpx;
+  }
+
+  .green {
+    color: #18bb88;
+  }
+
+  .product-txt,
+  .product-text {
+    font-size: 22rpx;
+    color: #787878;
+
+    .iconfont {
+      margin-right: 6rpx;
+    }
+  }
+
+  .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>