第一次提交

2023-08-04 13:04:21 +08:00
commit 7a73b38bd5
764 changed files with 166417 additions and 0 deletions
--- a/pages/category/components/commodity.vue
+++ b/pages/category/components/commodity.vue
@@ -0,0 +1,297 @@
+<template>
+  <view class="container" :style="appThemeStyle">
+    <!-- 一级分类 -->
+    <scroll-view class="cate-left" :scroll-y="true" :style="{ height: `${scrollHeight}px` }">
+      <text class="type-nav" :class="{ selected: curIndex == -1 }" @click="handleSelectNav(-1)">全部</text>
+      <text class="type-nav" :class="{ selected: curIndex == index }" v-for="(item, index) in list" :key="index"
+        @click="handleSelectNav(index)">{{ item.name }}</text>
+    </scroll-view>
+
+    <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ use: false }" :up="upOption" :bottombar="false" @up="upCallback">
+      <view class="cate-content">
+        <!-- 商品列表 -->
+        <view class="goods-list">
+          <view class="goods-item--container" v-for="(item, index) in goodsList.data" :key="index">
+            <view class="goods-item" @click="onTargetGoods(item.goods_id)">
+              <!-- 商品图片 -->
+              <view class="goods-item_left">
+                <image class="image" :src="item.goods_image"></image>
+              </view>
+              <view class="goods-item_right">
+                <!-- 商品标题 -->
+                <view class="goods-name">
+                  <text class="twoline-hide">{{ item.goods_name }}</text>
+                </view>
+                <!-- 商品信息 -->
+                <view class="goods-item_desc">
+                  <view class="desc_footer">
+                    <view class="item-prices oneline-hide">
+                      <text class="price_x">¥{{ item.goods_price_min }}</text>
+                      <text v-if="item.line_price_min > 0" class="price_y">¥{{ item.line_price_min }}</text>
+                    </view>
+                    <add-cart-btn v-if="setting.showAddCart" :btnStyle="setting.cartStyle" @click="handleAddCart(item)" />
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <!-- 加入购物车组件 -->
+        <AddCartPopup ref="AddCartPopup" @addCart="onUpdateCartTabBadge" />
+      </view>
+    </mescroll-body>
+  </view>
+</template>
+
+<script>
+  import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
+  import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
+  import { getEmptyPaginateObj, getMoreListData, setCartTabBadge } from '@/core/app'
+  import { PageCategoryStyleEnum } from '@/common/enum/store/page/category'
+  import Empty from '@/components/empty'
+  import AddCartBtn from '@/components/add-cart-btn'
+  import AddCartPopup from '@/components/add-cart-popup'
+  import { rpx2px } from '@/utils/util'
+  import * as GoodsApi from '@/api/goods'
+
+  const pageSize = 15
+
+  export default {
+    components: {
+      MescrollBody,
+      Empty,
+      AddCartBtn,
+      AddCartPopup
+    },
+    mixins: [MescrollMixin],
+    props: {
+      // 分类列表
+      list: {
+        type: Array,
+        default: []
+      },
+      // 分类设置
+      setting: {
+        type: Object,
+        default: () => {}
+      },
+    },
+    data() {
+      return {
+        // 枚举类
+        PageCategoryStyleEnum,
+        // 列表高度
+        scrollHeight: 0,
+        // 一级分类：指针
+        curIndex: -1,
+        // 商品列表
+        goodsList: getEmptyPaginateObj(),
+        // 上拉加载配置
+        upOption: {
+          // 首次自动执行
+          auto: true,
+          // 每页数据的数量; 默认10
+          page: { size: pageSize },
+          // 数量要大于3条才显示无更多数据
+          noMoreSize: 3,
+          // 返回顶部
+          toTop: { right: 30, bottom: 48, zIndex: 9 }
+        }
+      }
+    },
+    created() {
+      // 设置分类列表高度
+      this.setListHeight()
+    },
+    methods: {
+
+      /**
+       * 上拉加载的回调 (页面初始化时也会执行一次)
+       * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
+       * @param {Object} page
+       */
+      upCallback(page) {
+        const app = this
+        // 设置列表数据
+        app.getGoodsList(page.num)
+          .then(list => {
+            const curPageLen = list.data.length
+            const totalSize = list.data.total
+            app.mescroll.endBySize(curPageLen, totalSize)
+          })
+          .catch(() => app.mescroll.endErr())
+      },
+
+      /**
+       * 获取商品列表
+       * @param {Number} pageNo 页码
+       */
+      getGoodsList(pageNo = 1) {
+        const app = this
+        const categoryId = app.curIndex > -1 ? app.list[app.curIndex].category_id : 0
+        return new Promise((resolve, reject) => {
+          GoodsApi.list({ categoryId, page: pageNo }, { load: false })
+            .then(result => {
+              const newList = result.data.list
+              app.goodsList.data = getMoreListData(newList, app.goodsList, pageNo)
+              app.goodsList.last_page = newList.last_page
+              resolve(newList)
+            })
+            .catch(reject)
+        })
+      },
+
+      // 设置列表内容的高度
+      setListHeight() {
+        const { windowHeight } = uni.getSystemInfoSync()
+        this.scrollHeight = windowHeight - rpx2px(96)
+      },
+
+      // 一级分类：选中分类
+      handleSelectNav(index) {
+        this.curIndex = index
+        this.onRefreshList()
+      },
+
+      // 刷新列表数据
+      onRefreshList() {
+        this.goodsList = getEmptyPaginateObj()
+        setTimeout(() => this.mescroll.resetUpScroll(), 120)
+      },
+
+      // 跳转至商品列表页
+      onTargetGoods(goodsId) {
+        this.$navTo('pages/goods/detail', { goodsId })
+      },
+
+      // 点击加入购物车
+      handleAddCart(item) {
+        this.$refs.AddCartPopup.handle(item)
+      },
+
+      // 更新购物车角标
+      onUpdateCartTabBadge() {
+        console.log('onUpdateCartTabBadge')
+        setCartTabBadge()
+      },
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .container {
+    padding-left: 173rpx;
+  }
+
+  // 分类内容
+  .cate-content {
+    z-index: 1;
+    background: #fff;
+    padding-top: 96rpx;
+  }
+
+  // 一级分类+二级分类 20
+  .cate-left {
+    width: 173rpx;
+    height: 100%;
+    background: #f8f8f8;
+    color: #444;
+
+    position: fixed;
+    top: calc(96rpx + var(--window-top));
+    left: var(--window-left);
+    bottom: var(--window-bottom);
+  }
+
+  // 左侧一级分类
+  .type-nav {
+    position: relative;
+    height: 90rpx;
+    z-index: 10;
+    display: block;
+    font-size: 26rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.selected {
+      background: #fff;
+      border-right: none;
+      font-size: 28rpx;
+      color: $main-bg
+    }
+  }
+
+  // 商品列表
+  .goods-list {
+    background: #fff;
+  }
+
+  .goods-item {
+    padding: 28rpx 22rpx;
+    display: flex;
+  }
+
+  .goods-item_left {
+    position: relative;
+    background: #fff;
+    margin-right: 20rpx;
+
+    .image {
+      display: block;
+      width: 180rpx;
+      height: 180rpx;
+    }
+  }
+
+  .goods-item_right {
+    position: relative;
+    flex: 1;
+
+    .goods-name {
+      display: block;
+      width: 100%;
+      min-height: 68rpx;
+      font-size: 28rpx;
+      line-height: 1.3;
+      color: #333;
+    }
+  }
+
+  .goods-item_desc {
+    margin-top: 20rpx;
+
+    .people {
+      margin-right: 14rpx;
+    }
+
+    .desc_footer {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: absolute;
+      right: 0rpx;
+      bottom: 0rpx;
+      min-height: 44rpx;
+
+      .item-prices {
+        padding-right: 6rpx;
+
+        .price_x {
+          margin-right: 14rpx;
+          color: $main-bg;
+          font-size: 28rpx;
+        }
+
+        .price_y {
+          color: #999;
+          text-decoration: line-through;
+          font-size: 24rpx;
+        }
+      }
+
+    }
+  }
+</style>
--- a/pages/category/components/primary.vue
+++ b/pages/category/components/primary.vue
@@ -0,0 +1,110 @@
+<template>
+  <view class="primary">
+    <!-- 一级分类(大图) 10 -->
+    <view v-if="list.length > 0 && display == PageCategoryStyleEnum.ONE_LEVEL_BIG.value" class="cate-content">
+      <view class="cate-wrapper cate_style__10">
+        <view class="cate-item" v-for="(item, index) in list" :key="index" @click="onTargetGoodsList(item.category_id)">
+          <image v-if="item.image" class="image" mode="widthFix" :src="item.image.preview_url"></image>
+        </view>
+      </view>
+    </view>
+    <!-- 一级分类(小图) 11 -->
+    <view v-if="list.length > 0 && display == PageCategoryStyleEnum.ONE_LEVEL_SMALL.value" class="cate-content">
+      <view class="cate-wrapper cate_style__11">
+        <view class="cate-item" v-for="(item, index) in list" :key="index" @click="onTargetGoodsList(item.category_id)">
+          <image v-if="item.image" class="image" mode="widthFix" :src="item.image.preview_url"></image>
+          <view class="cate-name">{{ item.name }}</view>
+        </view>
+      </view>
+    </view>
+    <empty v-if="!list.length" :tips="'亲，暂无商品分类' + display" />
+  </view>
+</template>
+
+<script>
+  import { PageCategoryStyleEnum } from '@/common/enum/store/page/category'
+  import Empty from '@/components/empty'
+
+  export default {
+    components: {
+      Empty
+    },
+    props: {
+      // 分类页样式
+      display: {
+        type: Number,
+        default: 10
+      },
+      // 分类列表
+      list: {
+        type: Array,
+        default: []
+      }
+    },
+    data() {
+      return {
+        // 枚举类
+        PageCategoryStyleEnum,
+      }
+    },
+
+    methods: {
+
+      // 跳转至商品列表页
+      onTargetGoodsList(categoryId) {
+        this.$navTo('pages/goods/list', { categoryId })
+      }
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  // 分类内容
+  .cate-content {
+    z-index: 1;
+    background: #fff;
+    padding-top: 96rpx;
+
+    .cate-wrapper {
+      padding: 0 20rpx 20rpx 20rpx;
+      box-sizing: border-box;
+    }
+  }
+
+  // 一级分类(大图) 10
+  .cate_style__10 .cate-item {
+    margin-bottom: 20rpx;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .image {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+  }
+
+  // 一级分类(小图) 11
+  .cate_style__11 .cate-item {
+    float: left;
+    padding: 25rpx;
+    width: 33.3333%;
+    text-align: center;
+    box-sizing: border-box;
+
+    .image {
+      display: block;
+      width: 100%;
+      height: 33vw;
+      margin-bottom: 12rpx;
+    }
+
+    .cate-name {
+      font-size: 28rpx;
+      color: #555;
+    }
+  }
+</style>
--- a/pages/category/components/secondary.vue
+++ b/pages/category/components/secondary.vue
@@ -0,0 +1,180 @@
+<template>
+  <view v-if="list.length > 0" class="secondary" :style="appThemeStyle">
+    <!-- 二级分类 20 -->
+    <view class="cate-content">
+      <!-- 左侧 一级分类 -->
+      <scroll-view class="cate-left" :scroll-y="true" :style="{ height: `${scrollHeight}px` }">
+        <text class="type-nav" :class="{ selected: curIndex == index }" v-for="(item, index) in list" :key="index"
+          @click="handleSelectNav(index)">{{ item.name }}</text>
+      </scroll-view>
+      <!-- 右侧 二级分类 -->
+      <scroll-view class="cate-right" :scroll-top="scrollTop" :scroll-y="true" :style="{ height: `${scrollHeight}px` }">
+        <view v-if="list[curIndex]" class="cate-right-cont">
+          <view class="cate-two-box">
+            <view class="cate-cont-box">
+              <view class="flex-three" v-for="(item, idx) in list[curIndex].children" :key="idx" @click="onTargetGoodsList(item.category_id)">
+                <view class="cate-img-padding">
+                  <view v-if="item.image" class="cate-img">
+                    <image class="image" mode="scaleToFill" :src="item.image.preview_url"></image>
+                  </view>
+                </view>
+                <text class="name oneline-hide">{{ item.name }}</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+    <empty v-if="!list.length" />
+  </view>
+</template>
+
+<script>
+  import { PageCategoryStyleEnum } from '@/common/enum/store/page/category'
+  import Empty from '@/components/empty'
+  import { rpx2px } from '@/utils/util'
+
+  export default {
+    components: {
+      Empty
+    },
+    props: {
+      // 分类列表
+      list: {
+        type: Array,
+        default: []
+      },
+    },
+    data() {
+      return {
+        // 枚举类
+        PageCategoryStyleEnum,
+        // 列表高度
+        scrollHeight: 0,
+        // 一级分类：指针
+        curIndex: 0,
+        // 内容区竖向滚动条位置
+        scrollTop: 0,
+      }
+    },
+    created() {
+      // 设置分类列表高度
+      this.setListHeight()
+    },
+    methods: {
+
+      // 设置列表内容的高度
+      setListHeight() {
+        const { windowHeight } = uni.getSystemInfoSync()
+        this.scrollHeight = windowHeight - rpx2px(96)
+      },
+
+      // 一级分类：选中分类
+      handleSelectNav(index) {
+        this.curIndex = index
+        this.scrollTop = 0
+      },
+
+      // 跳转至商品列表页
+      onTargetGoodsList(categoryId) {
+        this.$navTo('pages/goods/list', { categoryId })
+      }
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  // 分类内容
+  .cate-content {
+    display: flex;
+    z-index: 1;
+    background: #fff;
+    padding-top: 96rpx;
+  }
+
+  // 一级分类+二级分类 20
+  .cate-left {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    flex: 0 0 23%;
+    background: #f8f8f8;
+    color: #444;
+  }
+
+  .cate-right {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+
+    .cate-right-cont {
+      width: 100%;
+      display: flex;
+      flex-flow: row wrap;
+      align-content: flex-start;
+      padding-top: 15rpx;
+
+      .cate-two-box {
+        width: 100%;
+        padding: 0 10px;
+      }
+    }
+  }
+
+  // 左侧一级分类
+  .type-nav {
+    position: relative;
+    height: 90rpx;
+    z-index: 10;
+    display: block;
+    font-size: 26rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.selected {
+      background: #fff;
+      color: $main-bg;
+      border-right: none;
+      font-size: 28rpx;
+    }
+  }
+
+  // 右侧二级分类
+  .cate-cont-box {
+    margin-bottom: 30rpx;
+    padding-bottom: 10rpx;
+    background: #fff;
+    overflow: hidden;
+
+    .name {
+      display: block;
+      padding-bottom: 30rpx;
+      text-align: center;
+      font-size: 26rpx;
+      color: #444444;
+    }
+
+    .cate-img-padding {
+      padding: 16rpx 16rpx 4rpx 16rpx;
+    }
+
+    .cate-img {
+      position: relative;
+      width: 100%;
+      padding-top: 100%;
+
+      .image {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border-radius: 10rpx;
+      }
+    }
+
+  }
+</style>