优化

2024-03-18 21:52:10 +08:00
parent 7f0f11cf14
commit 8d7f82b07c
13 changed files with 187 additions and 108 deletions
--- a/src/pages/mall/index.vue
+++ b/src/pages/mall/index.vue
@@ -7,7 +7,6 @@
      </view>
    </view>

-
    <view class='container'>
      <scroll-view class='category-list' :scroll-y='true'>
        <view v-for='(item,index) in categoryList' :key='index' class='category-item'
@@ -24,7 +23,7 @@
            <image class='goods-image' :src='item.images' />
            <text class='goods-name'>{{ item.goodsName }}</text>
            <text class='goods-price'>¥{{ item.price }}</text>
-            <image class='add-image' :src='assetsUrl("ic_add_goods.png")' />
+            <image class='add-image' :src='assetsUrl("ic_add_goods.png")' @click.stop='addShoppingCart' />
          </view>
        </grid-view>
      </scroll-view>
@@ -32,7 +31,7 @@

    <view class='shopping-cart' @click.stop='goPath("/pages/mall/subs/shoppingcart/index")'>
      <image :src='assetsUrl("ic_shopping_cart.png")' />
-      <text>10</text>
+      <text v-if='shoppingCartCount>0'>{{ shoppingCartCount }}</text>
    </view>
  </view>
 </template>
@@ -46,31 +45,37 @@ import { CategoryBean, GoodsBean } from '@/api/goods/types';
 const categoryList = ref<CategoryBean[]>([]);
 const categorySelectedIndex = ref<number>(0);
 const goodsList = ref<GoodsBean[]>([]);
-
-const companyId = '1140269023306428417';
+const shoppingCartCount = ref<number>(0);

 onLoad(() => {
  fetchCategoryList();
 });

 const fetchCategoryList = async () => {
-  categoryList.value = await getCategoryList(companyId);
+  categoryList.value = await getCategoryList();
  await changeCategory(0);
 };

 const changeCategory = async (index: number) => {
  categorySelectedIndex.value = index;
+  await fetchGoodsList();
+};
+
+const fetchGoodsList = async () => {
  const data = await getGoodsList({
    pageNum: 1,
-    pageSize: 2,
+    pageSize: 20,
    bean: {
-      companyId: companyId,
      keyword: '',
-      typeIds: [categoryList.value[index].typeId]
+      typeIds: [categoryList.value[categorySelectedIndex.value].typeId]
    }
  });
  goodsList.value = data.rows;
 };
+
+const addShoppingCart = () => {
+
+};
 </script>

 <style lang='scss' scoped>
@@ -112,6 +117,7 @@ const changeCategory = async (index: number) => {
    display: flex;
    flex-direction: column;
    width: 210rpx;
+    height: 100vh;

    .category-item {
      display: flex;
@@ -123,9 +129,11 @@ const changeCategory = async (index: number) => {
      white-space: nowrap;

      text {
-        width: 100%;
+        width: 60%;
        text-align: center;
        font-size: 30rpx;
+        text-overflow: ellipsis;
+        overflow: hidden;
      }
    }

@@ -149,6 +157,7 @@ const changeCategory = async (index: number) => {
    display: flex;
    background: white;
    padding: 38rpx 20rpx 0 20rpx;
+    height: 100vh;

    .goods-item {
      display: flex;
--- a/src/pages/mall/subs/goods/detail.vue
+++ b/src/pages/mall/subs/goods/detail.vue
@@ -2,11 +2,11 @@
  <view class='content'>
    <view class='swiper-container'>
      <swiper class='swiper' :interval='1500' :duration='1000' @change='swiperChange'>
-        <swiper-item v-for='(item,index) in bannerList' :key='index'>
-          <image src='/static/images/test_bg.png' />
+        <swiper-item v-for='(item,index) in [goodsBean?.images]' :key='index'>
+          <image :src='item' />
        </swiper-item>
      </swiper>
-      <view class='indicator'>
+      <view class='indicator' style='display: none'>
        <text>{{ swiperIndex + 1 }}</text>
        <text>/{{ bannerList.length }}</text>
      </view>
@@ -14,12 +14,12 @@

    <view class='goods-info-view c-flex-column'>
      <view class='c-flex-row'>
-        <text class='goods-price accent-text-color'>39.89</text>
+        <text class='goods-price accent-text-color'>{{ goodsBean?.price || 0 }}</text>
        <text>销量2653</text>
      </view>

      <view class='c-flex-row'>
-        <text>女童夏装套装洋气装短袖阔腿裤子夏装夏装套装</text>
+        <text style='flex: 1'>{{ goodsBean?.name }}</text>
        <view class='share-button c-flex-column'>
          <image :src='assetsUrl("ic_share.png")'></image>
          <button class='btn' plain open-type='share'>分享</button>
@@ -34,8 +34,8 @@
        <image :src='assetsUrl("ic_arrow_right_gray.png")' />
        <text>共1种颜色可选</text>
      </view>
-      <view class='divider' style='width:auto;height: 0.5rpx;margin-left: 100rpx' />
-      <view class='c-flex-row' @click.stop='showSkuDialog'>
+      <view class='divider' style='width:auto;height: 0.5rpx;margin-left: 100rpx;display: none' />
+      <view class='c-flex-row' style='display: none' @click.stop='showSkuDialog'>
        <text>参数</text>
        <text>品牌 风格 季节 款号</text>
        <image :src='assetsUrl("ic_arrow_right_gray.png")' />
@@ -45,22 +45,22 @@
    <view class='recommend-view c-flex-column'>
      <text>浏览此商品的客户还浏览了</text>
      <scroll-view scroll-x>
-        <view style='display: inline-block' v-for='(item, index) in [1, 2, 3, 4]'
+        <view style='display: inline-block' v-for='(item, index) in recommendList'
              :key='index'>
          <view class='recommend-item c-flex-column'>
-            <image :src='assetsUrl("test_bg.png")' />
-            <text>女童夏装套装…</text>
-            <text class='goods-price'>22</text>
+            <image :src='item.images' />
+            <text>{{ item.goodsName }}</text>
+            <text class='goods-price'>{{ item.price }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

-    <view class='goods-detail c-flex-column'>
+    <view class='goods-detail c-flex-column' style='display: none'>
      <text>商品详情</text>
-      <image :src='assetsUrl("test_bg.png")' mode='aspectFill'/>
-      <image :src='assetsUrl("test_bg.png")' mode='aspectFill'/>
-      <image :src='assetsUrl("test_bg.png")' mode='aspectFill'/>
+      <image :src='assetsUrl("test_bg.png")' mode='aspectFill' />
+      <image :src='assetsUrl("test_bg.png")' mode='aspectFill' />
+      <image :src='assetsUrl("test_bg.png")' mode='aspectFill' />
    </view>

    <view class='bottom-view c-flex-row'>
@@ -78,7 +78,7 @@
        <view class='small-button-item'>
          <view class='shoppingcart-count' @click.stop='goPath("/pages/mall/subs/shoppingcart/index")'>
            <image :src='assetsUrl("ic_goods_shoppingcart.png")' />
-            <text>12</text>
+            <text>0</text>
          </view>
          <text>购物车</text>
        </view>
@@ -90,19 +90,37 @@
      </view>
    </view>
  </view>
-  <sku-dialog ref='skuDialogRef' />
+  <sku-dialog ref='skuDialogRef' @bean='goodsBean' />
 </template>

 <script lang='ts' setup>
 import { assetsUrl } from '@/utils/assets';
-import { goPath } from '@/utils';
 import SkuDialog from '@/components/sku-dialog.vue';
+import { goPath } from '@/utils';
+import { getGoodsDetail, getGoodsList } from '@/api/goods';
+import { GoodsBean } from '@/api/goods/types';
+
+const goodsBean = ref<GoodsBean>();
+const recommendList = ref<GoodsBean[]>();

 const skuDialogRef = ref();

-const bannerList = ref([1, 2, 3, 4]);
+const bannerList = ref([]);
 const swiperIndex = ref(0);

+onLoad(async (e: any) => {
+  goodsBean.value = await getGoodsDetail(e.goodsId);
+  const { rows } = await getGoodsList({
+    page: 1,
+    pageSize: 10,
+    bean: {
+      keyword: '',
+      typeIds: ['519334122586648576']
+    }
+  });
+  recommendList.value = rows;
+});
+
 const swiperChange = (e: any) => {
  swiperIndex.value = e.detail.current;
 };
@@ -263,7 +281,7 @@ const placeOrder = () => {

  view:nth-of-type(1) {
    align-items: flex-start;
-    padding-top: 40rpx;
+    padding-top: 20rpx;
  }
 }

@@ -401,6 +419,7 @@ const placeOrder = () => {
 .goods-detail {
  background: #FFFFFF;
  margin-top: 20rpx;
+
  text {
    margin: 20rpx 30rpx;
    font-weight: bold;