diff --git a/pages.json b/pages.json
index e211c04..6d3bc34 100644
--- a/pages.json
+++ b/pages.json
@@ -126,6 +126,19 @@
         "navigationBarTitleText": "商品详情页"
       }
     },
+    {
+      "path": "pages/goods2/list",
+      "style": {
+        "navigationBarTitleText": "商品列表",
+        "enablePullDownRefresh": true
+      }
+    },
+    {
+      "path": "pages/goods2/detail",
+      "style": {
+        "navigationBarTitleText": "商品详情页"
+      }
+    },
     {
       "path": "pages/comment/index",
       "style": {
diff --git a/pages/goods2/components/Comment.vue b/pages/goods2/components/Comment.vue
new file mode 100644
index 0000000..cae86a0
--- /dev/null
+++ b/pages/goods2/components/Comment.vue
@@ -0,0 +1,161 @@
+<template>
+  <!-- 商品评价 -->
+  <view v-if="!isLoading && list.length" class="goods-comment m-top20">
+    <view class="item-title dis-flex">
+      <view class="block-left flex-box">
+        商品评价 (<text class="total">{{ total }}条</text>)
+      </view>
+      <view class="block-right">
+        <text @click="onTargetToComment" class="show-more col-9">查看更多</text>
+        <text class="iconfont icon-arrow-right col-9"></text>
+      </view>
+    </view>
+    <!-- 评论列表 -->
+    <view class="comment-list">
+      <view class="comment-item" v-for="(item, index) in list" :key="index">
+        <view class="comment-item_row dis-flex flex-y-center">
+          <view class="user-info dis-flex flex-y-center">
+            <view class="user-avatar">
+              <avatar-image :url="item.user.avatar_url" :width="50" />
+            </view>
+            <text class="user-name">{{ item.user.nick_name }}</text>
+          </view>
+          <!-- 评星 -->
+          <view class="star-rating">
+            <u-rate active-color="#f4a213" :current="rates[item.score]" :disabled="true" />
+          </view>
+        </view>
+        <view class="item-content m-top20">
+          <text class="f-26 twoline-hide">{{ item.content }}</text>
+        </view>
+        <view class="comment-time">{{ item.create_time }}</view>
+      </view>
+    </view>
+  </view>
+
+</template>
+
+<script>
+  import AvatarImage from '@/components/avatar-image'
+  import * as CommentApi from '@/api/comment'
+
+  export default {
+    components: {
+      AvatarImage
+    },
+    props: {
+      // 商品ID
+      goodsId: {
+        type: Number,
+        default: null
+      },
+      // 加载多少条记录 默认2条
+      limit: {
+        type: Number,
+        default: 2
+      }
+    },
+    data() {
+      return {
+        // 正在加载
+        isLoading: true,
+        // 评星数据转换
+        rates: { 10: 5, 20: 3, 30: 1 },
+        // 评价列表数据
+        list: [],
+        // 评价总数量
+        total: 0
+      }
+    },
+
+    created() {
+      // 加载评价列表数据
+      this.getCommentList()
+    },
+
+    methods: {
+
+      // 加载评价列表数据
+      getCommentList() {
+        const app = this
+        app.isLoading = true
+        CommentApi.listRows(app.goodsId, app.limit)
+          .then(result => {
+            app.list = result.data.list
+            app.total = result.data.total
+          })
+          .catch(err => err)
+          .finally(() => app.isLoading = false)
+      },
+
+      // 跳转到评论列表页
+      onTargetToComment() {
+        const app = this
+        app.$navTo('pages/comment/index', { goodsId: app.goodsId })
+      }
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .goods-comment {
+    padding: 20rpx 30rpx;
+    background-color: #fff;
+  }
+
+  .item-title {
+    font-size: 28rpx;
+    margin-bottom: 25rpx;
+
+    .total {
+      margin: 0 4rpx;
+    }
+
+    .show-more {
+      margin-right: 8rpx;
+      font-size: 24rpx;
+    }
+  }
+
+  .comment-item {
+    padding: 15rpx 5rpx;
+    margin-bottom: 10rpx;
+    border-bottom: 1rpx solid #f5f5f5;
+
+    &:last-child {
+      margin-bottom: 0;
+      border-bottom: none;
+    }
+
+    .comment-item_row {
+      margin-bottom: 10rpx;
+    }
+  }
+
+  .user-info {
+    margin-right: 15rpx;
+
+    .user-avatar {
+      margin-right: 10rpx;
+    }
+
+    .user-name {
+      font-size: 24rpx;
+    }
+
+  }
+
+  .item-content {
+    color: #333;
+    margin: 16rpx 0;
+    max-height: 76rpx;
+    line-height: 38rpx;
+  }
+
+  .comment-time {
+    font-size: 24rpx;
+    color: #999;
+    margin-top: 10rpx;
+  }
+</style>
\ No newline at end of file
diff --git a/pages/goods2/components/Service.vue b/pages/goods2/components/Service.vue
new file mode 100644
index 0000000..e242fa6
--- /dev/null
+++ b/pages/goods2/components/Service.vue
@@ -0,0 +1,161 @@
+<template>
+  <view v-if="list.length" class="service-wrapper" :style="appThemeStyle">
+    <!-- 服务简述 -->
+    <view class="service-simple" @click="handlePopup">
+      <view class="s-list">
+        <view class="s-item" v-for="(item, index) in list" :key="index">
+          <text class="item-icon iconfont icon-fuwu"></text>
+          <text class="item-val">{{ item.name }}</text>
+        </view>
+      </view>
+      <!-- 扩展箭头 -->
+      <view class="s-arrow f-26 col-9 t-r">
+        <text class="iconfont icon-arrow-right"></text>
+      </view>
+    </view>
+    <!-- 详情内容弹窗 -->
+    <u-popup v-model="showPopup" mode="bottom" :closeable="true" :border-radius="26">
+      <view class="service-content">
+        <view class="title">服务</view>
+        <scroll-view class="content-scroll" :scroll-y="true">
+          <view class="s-list clearfix">
+            <view class="s-item" v-for="(item, index) in list" :key="index">
+              <text class="item-icon iconfont icon-fuwu"></text>
+              <view class="item-val">{{ item.name }}</view>
+              <view class="item-summary">{{ item.summary }}</view>
+            </view>
+          </view>
+        </scroll-view>
+      </view>
+    </u-popup>
+  </view>
+</template>
+
+<script>
+  import * as ServiceApi from '@/api/goods/service'
+
+  export default {
+    props: {
+      // 商品ID
+      goodsId: {
+        type: Number,
+        default: null
+      }
+    },
+    data() {
+      return {
+        // 正在加载
+        isLoading: true,
+        // 显示详情内容弹窗
+        showPopup: false,
+        // 服务列表数据
+        list: []
+      }
+    },
+
+    created() {
+      // 获取商品服务列表
+      this.getServiceList()
+    },
+
+    methods: {
+
+      // 获取商品服务列表
+      getServiceList() {
+        const app = this
+        app.isLoading = true
+        ServiceApi.list(app.goodsId)
+          .then(result => app.list = result.data.list)
+          .finally(() => app.isLoading = false)
+      },
+
+      // 显示弹窗
+      handlePopup() {
+        this.showPopup = !this.showPopup
+      }
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .service-wrapper {
+    min-height: 24rpx;
+    margin-bottom: -24rpx;
+  }
+
+  // 服务简述
+  .service-simple {
+    padding: 24rpx 30rpx;
+    display: flex;
+    align-items: center;
+
+    .s-list {
+      flex: 1;
+      margin-left: -15rpx;
+    }
+
+    .s-item {
+      float: left;
+      font-size: 26rpx;
+      margin: 8rpx 15rpx;
+
+      .item-icon {
+        color: $main-bg;
+      }
+
+      .item-val {
+        margin-left: 12rpx;
+      }
+    }
+
+
+  }
+
+  // 服务详细内容
+  .service-content {
+    padding: 24rpx;
+    // 设置ios刘海屏底部横线安全区域
+    padding-bottom: calc(constant(safe-area-inset-bottom) + 24rpx);
+    padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
+
+    .title {
+      font-size: 30rpx;
+      margin-bottom: 50rpx;
+      font-weight: bold;
+      text-align: center;
+    }
+
+    .content-scroll {
+      min-height: 400rpx;
+      max-height: 760rpx;
+    }
+
+    .s-list {
+      padding: 0 30rpx 0 80rpx;
+    }
+
+    .s-item {
+      position: relative;
+      margin-bottom: 60rpx;
+
+      .item-icon {
+        position: absolute;
+        top: 6rpx;
+        left: -50rpx;
+        color: $main-bg;
+      }
+
+      .item-val {
+        font-size: 28rpx;
+      }
+
+      .item-summary {
+        font-size: 26rpx;
+        margin-top: 20rpx;
+        color: #6d6d6d;
+      }
+    }
+
+  }
+</style>
\ No newline at end of file
diff --git a/pages/goods2/components/SkuPopup.vue b/pages/goods2/components/SkuPopup.vue
new file mode 100644
index 0000000..e8796ab
--- /dev/null
+++ b/pages/goods2/components/SkuPopup.vue
@@ -0,0 +1,187 @@
+<template>
+  <goods-sku-popup :modelValue="modelValue" @input="onChangeValue" border-radius="20" :localdata="goodsInfo" :mode="skuMode"
+    :maskCloseAble="true" :priceColor="appTheme.mainBg" :buyNowBackgroundColor="appTheme.mainBg" :addCartColor="appTheme.viceText"
+    :addCartBackgroundColor="appTheme.viceBg"
+    :activedStyle="{ color: appTheme.mainBg, borderColor: appTheme.mainBg, backgroundColor: activedBtnBackgroundColor }"
+    @open="openSkuPopup" @close="closeSkuPopup" @add-cart="addCart" @buy-now="buyNow" buyNowText="立即购买" :maxBuyNum="maxBuyNum" />
+</template>
+
+<script>
+  import { setCartTotalNum } from '@/core/app'
+  import { hex2rgba } from '@/utils/color'
+  import * as CartApi from '@/api/cart'
+  import GoodsSkuPopup from '@/components/goods-sku-popup'
+
+  export default {
+    components: {
+      GoodsSkuPopup
+    },
+    emits: ['update:modelValue', 'addCart'],
+    props: {
+      // 控制组件显示隐藏
+      modelValue: {
+        Type: Boolean,
+        default: false
+      },
+      // 模式 1:都显示 2:只显示购物车 3:只显示立即购买 4:显示缺货按钮 5:禁用 默认 1
+      skuMode: {
+        type: Number,
+        default: 1
+      },
+      // 商品详情信息
+      goods: {
+        type: Object,
+        default: {}
+      }
+    },
+    data() {
+      return {
+        // 商品信息
+        goodsInfo: {},
+        // 限购数量
+        maxBuyNum: null
+      }
+    },
+    computed: {
+      // 规格按钮选中时的背景色
+      activedBtnBackgroundColor() {
+        return hex2rgba(this.appTheme.mainBg, 0.1)
+      }
+    },
+    created() {
+      const app = this
+      const { goods } = app
+      app.goodsInfo = {
+        _id: goods.goods_id,
+        name: goods.goods_name,
+        goods_thumb: goods.goods_image,
+        sku_list: app.getSkuList(),
+        spec_list: app.getSpecList()
+      }
+      app.maxBuyNum = app.getMaxBuyNum()
+    },
+
+    methods: {
+
+      // 监听组件显示隐藏
+      onChangeValue(val) {
+        this.$emit('update:modelValue', val)
+      },
+
+      // 整理商品SKU列表
+      getSkuList() {
+        const app = this
+        const { goods: { goods_name, goods_image, skuList } } = app
+        const skuData = []
+        skuList.forEach(item => {
+          skuData.push({
+            _id: item.id,
+            goods_sku_id: item.goods_sku_id,
+            goods_id: item.goods_id,
+            goods_name: goods_name,
+            image: item.image_url ? item.image_url : goods_image,
+            price: item.goods_price * 100,
+            stock: item.stock_num,
+            spec_value_ids: item.spec_value_ids,
+            sku_name_arr: app.getSkuNameArr(item.spec_value_ids)
+          })
+        })
+        return skuData
+      },
+
+      // 获取sku记录的规格值列表
+      getSkuNameArr(specValueIds) {
+        const app = this
+        const defaultData = ['默认']
+        const skuNameArr = []
+        if (specValueIds) {
+          specValueIds.forEach((valueId, groupIndex) => {
+            const specValueName = app.getSpecValueName(valueId, groupIndex)
+            skuNameArr.push(specValueName)
+          })
+        }
+        return skuNameArr.length ? skuNameArr : defaultData
+      },
+
+      // 获取指定的规格值名称
+      getSpecValueName(valueId, groupIndex) {
+        const app = this
+        const { goods: { specList } } = app
+        const res = specList[groupIndex].valueList.find(specValue => {
+          return specValue.spec_value_id == valueId
+        })
+        return res.spec_value
+      },
+
+      // 整理规格数据
+      getSpecList() {
+        const { goods: { specList } } = this
+        const defaultData = [{ name: '默认', list: [{ name: '默认' }] }]
+        const specData = []
+        specList.forEach(group => {
+          const children = []
+          group.valueList.forEach(specValue => {
+            children.push({ name: specValue.spec_value })
+          })
+          specData.push({
+            name: group.spec_name,
+            list: children
+          })
+        })
+        return specData.length ? specData : defaultData
+      },
+
+      // 限购数量
+      getMaxBuyNum() {
+        const { goods } = this
+        return goods.is_restrict ? goods.restrict_single : null
+      },
+
+      // sku组件 开始-----------------------------------------------------------
+      openSkuPopup() {
+        // console.log("监听 - 打开sku组件")
+      },
+
+      closeSkuPopup() {
+        // console.log("监听 - 关闭sku组件")
+      },
+
+      // 加入购物车按钮
+      addCart(selectShop) {
+        const app = this
+        const { goods_id, goods_sku_id, buy_num } = selectShop
+        CartApi.add(goods_id, goods_sku_id, buy_num)
+          .then(result => {
+            // 显示成功
+            app.$toast(result.message)
+            // 隐藏当前弹窗
+            app.onChangeValue(false)
+            // 购物车商品总数量
+            const cartTotal = result.data.cartTotal
+            // 缓存购物车数量
+            setCartTotalNum(cartTotal)
+            // 传递给父级
+            app.$emit('addCart', cartTotal)
+          })
+      },
+
+      // 立即购买
+      buyNow(selectShop) {
+        // 跳转到订单结算页
+        this.$navTo('pages/checkout/index', {
+          mode: 'buyNow',
+          goodsId: selectShop.goods_id,
+          goodsSkuId: selectShop.goods_sku_id,
+          goodsNum: selectShop.buy_num
+        })
+        // 隐藏当前弹窗
+        this.onChangeValue(false)
+      }
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/pages/goods2/components/SlideImage.vue b/pages/goods2/components/SlideImage.vue
new file mode 100644
index 0000000..af56794
--- /dev/null
+++ b/pages/goods2/components/SlideImage.vue
@@ -0,0 +1,139 @@
+<template>
+  <!-- 商品图片 -->
+  <view class="images-swiper">
+    <swiper class="swiper-box" :autoplay="autoplay" :duration="duration" :indicator-dots="indicatorDots" :interval="interval"
+      :circular="true" @change="setCurrent">
+      <!-- 主图视频 -->
+      <swiper-item v-if="video">
+        <view class="slide-video">
+          <video id="myVideo" class="video" :poster="videoCover ? videoCover.preview_url : ''" :src="video.external_url" controls
+            x5-playsinline playsinline x5-video-player-type="h5" x5-video-player-fullscreen x5-video-orientation="portrait"
+            :enable-progress-gesture="false" @play="onVideoPlay"></video>
+        </view>
+      </swiper-item>
+      <!-- 轮播图片 -->
+      <swiper-item v-for="(item, index) in images" :key="index" @click="onPreviewImages(index)">
+        <view class="slide-image">
+          <image class="image" :draggable="false" :src="item.preview_url"></image>
+        </view>
+      </swiper-item>
+    </swiper>
+    <view class="swiper-count">
+      <text>{{ currentIndex }}</text>
+      <text>/</text>
+      <text>{{ images.length + (video ? 1 : 0) }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    props: {
+      // 主图视频
+      video: {
+        type: Object,
+        default () {
+          return null
+        }
+      },
+      // 主图视频封面
+      videoCover: {
+        type: Object,
+        default () {
+          return null
+        }
+      },
+      // 图片轮播
+      images: {
+        type: Array,
+        default: []
+      }
+    },
+    data() {
+      return {
+        indicatorDots: false, // 是否显示面板指示点
+        autoplay: true, // 是否自动切换
+        interval: 4000, // 自动切换时间间隔
+        duration: 800, // 滑动动画时长
+        currentIndex: 1, // 轮播图指针
+      }
+    },
+
+    methods: {
+
+      // 事件：视频开始播放
+      onVideoPlay(e) {
+        this.autoplay = false
+      },
+
+      // 设置轮播图当前指针 数字
+      setCurrent({ detail }) {
+        const app = this
+        app.currentIndex = detail.current + 1
+      },
+
+      // 浏览商品图片
+      onPreviewImages(index) {
+        const app = this
+        const imageUrls = []
+        app.images.forEach(item => {
+          imageUrls.push(item.preview_url);
+        });
+        uni.previewImage({
+          current: imageUrls[index],
+          urls: imageUrls
+        })
+      }
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  // swiper组件
+  .images-swiper {
+    position: relative;
+  }
+
+  .swiper-box {
+    width: 750rpx;
+    height: 750rpx;
+
+    // 主图视频
+    .slide-video {
+      width: 100%;
+      height: 100%;
+
+      .video {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    // 图片轮播
+    .slide-image {
+      position: relative;
+      width: 100%;
+      height: 100%;
+
+      .image {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  // swiper计数
+  .swiper-count {
+    position: absolute;
+    right: 36rpx;
+    bottom: 72rpx;
+    padding: 2rpx 18rpx;
+    background: rgba(0, 0, 0, 0.363);
+    border-radius: 50rpx;
+    color: #fff;
+    font-size: 26rpx;
+  }
+</style>
\ No newline at end of file
diff --git a/pages/goods2/detail.scss b/pages/goods2/detail.scss
new file mode 100644
index 0000000..7bc0b9d
--- /dev/null
+++ b/pages/goods2/detail.scss
@@ -0,0 +1,231 @@
+.container {
+  // 设置ios刘海屏底部横线安全区域
+  // 110 - 18 + 4
+  padding-bottom: calc(constant(safe-area-inset-bottom) + 106rpx + 6rpx);
+  padding-bottom: calc(env(safe-area-inset-bottom) + 106rpx + 6rpx);
+}
+
+// 商品信息
+.goods-info {
+  background: #fff;
+  padding: 25rpx 30rpx;
+}
+
+.info-item__top {
+  min-height: 40rpx;
+  margin-bottom: 20rpx;
+  line-height: 1;
+}
+
+.floor-price__samll {
+  font-size: 26rpx;
+  line-height: 1;
+  color: $main-bg;
+  margin-bottom: -10rpx;
+}
+
+// 商品价
+.floor-price {
+  color: $main-bg;
+  margin-right: 15rpx;
+  font-size: 42rpx;
+}
+
+.original-price {
+  font-size: 26rpx;
+  text-decoration: line-through;
+  color: #959595;
+  margin-right: 15rpx;
+  margin-bottom: -6rpx;
+}
+
+// 会员价标签
+.user-grade {
+  background: #3c3c3c;
+  border-radius: 6rpx;
+  padding: 8rpx 14rpx;
+  margin-right: 15rpx;
+  font-size: 24rpx;
+  color: #eee0c3;
+}
+
+.goods-sales {
+  font-size: 24rpx;
+  color: #959595;
+}
+
+.info-item__name .goods-name {
+  font-size: 30rpx;
+}
+
+/* 商品分享 */
+
+.goods-share__line {
+  border-left: 1rpx solid #f4f4f4;
+  height: 60rpx;
+  margin: 0 30rpx;
+}
+
+.goods-share .share-btn {
+  line-height: normal;
+  padding: 0;
+  background: none;
+  border-radius: 0;
+  box-shadow: none;
+  font-size: 8pt;
+  border: none;
+  color: #191919;
+}
+
+.goods-share .share-btn::after {
+  border: none;
+}
+
+.goods-share .share__icon {
+  font-size: 40rpx;
+  margin-bottom: 5rpx;
+}
+
+// 商品卖点
+.info-item_selling-point {
+  margin-top: 8rpx;
+  font-size: 24rpx;
+  color: #808080;
+}
+
+// 选择商品规格
+.goods-choice {
+  padding: 26rpx 30rpx;
+  font-size: 26rpx;
+
+  .spec-list {
+    display: flex;
+    align-items: center;
+
+    .spec-name {
+      margin-right: 10rpx;
+    }
+  }
+}
+
+// 商品详情
+.goods-content .item-title {
+  padding: 26rpx 30rpx;
+  font-size: 26rpx;
+}
+
+// 底部操作栏
+.footer-fixed {
+  position: fixed;
+  bottom: var(--window-bottom);
+  left: var(--window-left);
+  right: var(--window-right);
+  display: flex;
+  z-index: 11;
+  box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
+  background: #fff;
+
+  // 设置ios刘海屏底部横线安全区域
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.footer-container {
+  width: 100%;
+  display: flex;
+  height: 106rpx;
+}
+
+// 快捷菜单
+.foo-item-fast {
+  box-sizing: border-box;
+  min-width: 214rpx;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  margin-right: 12rpx;
+
+  .fast-item {
+    position: relative;
+    padding: 4rpx 0;
+    line-height: 1;
+    text-align: center;
+    width: 84rpx;
+
+    &--cart {
+      margin-left: 6rpx;
+      .fast-icon {
+        margin-left: -12rpx;
+      }
+    }
+
+    // 角标
+    .fast-badge {
+      display: inline-block;
+      box-sizing: border-box;
+      min-width: 16px;
+      padding: 0 3px;
+      color: #fff;
+      font-weight: 500;
+      font-size: 12px;
+      font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
+      line-height: 1.2;
+      text-align: center;
+      background-color: #ee0a24;
+      border: 1px solid #fff;
+      border-radius: 999px;
+    }
+
+    .fast-badge--fixed {
+      position: absolute;
+      top: 0;
+      right: 0;
+      transform-origin: 100%;
+    }
+
+    .fast-icon {
+      font-size: 44rpx;
+      margin-bottom: 8rpx;
+    }
+
+    .fast-text {
+      font-size: 22rpx;
+    }
+  }
+}
+
+// 操作按钮
+.foo-item-btn {
+  flex: 1;
+
+  .btn-wrapper {
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  .btn-item {
+    flex: 1;
+    font-size: 28rpx;
+    height: 72rpx;
+    margin-right: 16rpx;
+    color: #fff;
+    border-radius: 50rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  // 立即购买按钮
+  .btn-item-main {
+    background: linear-gradient(to right, $main-bg, $main-bg2);
+    color: $main-text;
+  }
+
+  // 购物车按钮
+  .btn-item-deputy {
+    background: linear-gradient(to right, $vice-bg, $vice-bg2);
+    color: $vice-text;
+  }
+}
diff --git a/pages/goods2/detail.vue b/pages/goods2/detail.vue
new file mode 100644
index 0000000..7b21948
--- /dev/null
+++ b/pages/goods2/detail.vue
@@ -0,0 +1,313 @@
+<template>
+  <view v-show="!isLoading" class="container" :style="appThemeStyle">
+    <!-- 商品图片轮播 -->
+    <SlideImage v-if="!isLoading" :video="goods.video" :videoCover="goods.videoCover" :images="goods.goods_images" />
+
+    <!-- 商品信息 -->
+    <view v-if="!isLoading" class="goods-info m-top20">
+      <!-- 价格、销量 -->
+      <view class="info-item info-item__top dis-flex flex-x-between flex-y-end">
+        <view class="block-left dis-flex flex-y-center">
+          <!-- 商品售价 -->
+          <text class="floor-price__samll">￥</text>
+          <text class="floor-price">{{ goods.goods_price_min }}</text>
+          <!-- 会员价标签 -->
+          <view v-if="goods.is_user_grade" class="user-grade">
+            <text>会员价</text>
+          </view>
+          <!-- 划线价 -->
+          <text v-if="goods.line_price_min > 0" class="original-price">￥{{ goods.line_price_min }}</text>
+        </view>
+        <view class="block-right dis-flex">
+          <!-- 销量 -->
+          <view class="goods-sales">
+            <text>已售{{ goods.goods_sales }}件</text>
+          </view>
+        </view>
+      </view>
+      <!-- 标题、分享 -->
+      <view class="info-item info-item__name dis-flex flex-y-center">
+        <view class="goods-name flex-box">
+          <text class="twoline-hide">{{ goods.goods_name }}</text>
+        </view>
+        <view class="goods-share__line"></view>
+        <view class="goods-share">
+          <button class="share-btn dis-flex flex-dir-column" @click="onShowShareSheet()">
+            <text class="share__icon iconfont icon-fenxiang"></text>
+            <text class="f-24">分享</text>
+          </button>
+        </view>
+      </view>
+      <!-- 商品卖点 -->
+      <view v-if="goods.selling_point" class="info-item info-item_selling-point">
+        <text>{{ goods.selling_point }}</text>
+      </view>
+    </view>
+
+    <!-- 选择商品规格 -->
+    <view v-if="goods.spec_type == 20" class="goods-choice m-top20 b-f" @click="onShowSkuPopup(1)">
+      <view class="spec-list">
+        <view class="flex-box">
+          <text class="col-8">选择：</text>
+          <text class="spec-name" v-for="(item, index) in goods.specList" :key="index">{{ item.spec_name }}</text>
+        </view>
+        <view class="f-26 col-9 t-r">
+          <text class="iconfont icon-arrow-right"></text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 商品服务 -->
+    <Service v-if="!isLoading" :goods-id="goodsId" />
+
+    <!-- 商品SKU弹窗 -->
+    <SkuPopup v-if="!isLoading" v-model="showSkuPopup" :skuMode="skuMode" :goods="goods" @addCart="onAddCart" />
+
+    <!-- 商品评价 -->
+    <Comment v-if="!isLoading" :goods-id="goodsId" :limit="2" />
+
+    <!-- 商品描述 -->
+    <view v-if="!isLoading" class="goods-content m-top20">
+      <view class="item-title b-f">
+        <text>商品描述</text>
+      </view>
+      <view v-if="goods.content != ''" class="goods-content__detail b-f">
+        <mp-html :content="goods.content" />
+      </view>
+    </view>
+
+    <!-- 底部选项卡 -->
+    <view class="footer-fixed">
+      <view class="footer-container">
+        <!-- 导航图标 -->
+        <view class="foo-item-fast">
+          <!-- 首页 -->
+          <view class="fast-item fast-item--home" @click="onTargetHome">
+            <view class="fast-icon">
+              <text class="iconfont icon-shouye"></text>
+            </view>
+            <view class="fast-text">
+              <text>首页</text>
+            </view>
+          </view>
+          <!-- 客服 -->
+          <customer-btn v-if="isShowCustomerBtn" :showCard="true" :cardTitle="goods.goods_name" :cardImage="goods.goods_image"
+            :cardPath="pagePath">
+            <view class="fast-item">
+              <view class="fast-icon">
+                <text class="iconfont icon-kefu1"></text>
+              </view>
+              <view class="fast-text">
+                <text>客服</text>
+              </view>
+            </view>
+          </customer-btn>
+          <!-- 购物车 -->
+          <view class="fast-item fast-item--cart" @click="onTargetCart">
+            <view v-if="cartTotal > 0" class="fast-badge fast-badge--fixed">{{ cartTotal > 99 ? '99+' : cartTotal }}
+            </view>
+            <view class="fast-icon">
+              <text class="iconfont icon-gouwuche"></text>
+            </view>
+            <view class="fast-text">
+              <text>购物车</text>
+            </view>
+          </view>
+        </view>
+        <!-- 操作按钮 -->
+        <view class="foo-item-btn">
+          <view class="btn-wrapper">
+            <view v-if="isEnableCart" class="btn-item btn-item-deputy" @click="onShowSkuPopup(2)">
+              <text>加入购物车</text>
+            </view>
+            <view class="btn-item btn-item-main" @click="onShowSkuPopup(3)">
+              <text>立即购买</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 快捷导航 -->
+    <!-- <shortcut bottom="120" /> -->
+
+    <!-- 分享菜单 -->
+    <share-sheet v-model="showShareSheet" :shareTitle="goods.goods_name" :shareImageUrl="goods.goods_image" />
+
+  </view>
+</template>
+
+<script>
+  import { getSceneData } from '@/core/app'
+  import * as GoodsApi from '@/api/goods'
+  import * as CartApi from '@/api/cart'
+  import SettingModel from '@/common/model/Setting'
+  import { GoodsTypeEnum } from '@/common/enum/goods'
+  import ShareSheet from '@/components/share-sheet'
+  import CustomerBtn from '@/components/customer-btn'
+  import SlideImage from './components/SlideImage'
+  import SkuPopup from './components/SkuPopup'
+  import Comment from './components/Comment'
+  import Service from './components/Service'
+
+  export default {
+    components: {
+      ShareSheet,
+      CustomerBtn,
+      SlideImage,
+      SkuPopup,
+      Comment,
+      Service
+    },
+    data() {
+      return {
+        // 正在加载
+        isLoading: true,
+        // 当前商品ID
+        goodsId: null,
+        // 商品详情
+        goods: {},
+        // 购物车总数量
+        cartTotal: 0,
+        // 显示/隐藏SKU弹窗
+        showSkuPopup: false,
+        // 模式 1:都显示 2:只显示购物车 3:只显示立即购买 4:显示缺货按钮 5:禁用 默认 1
+        skuMode: 1,
+        // 显示/隐藏分享菜单
+        showShareSheet: false,
+        // 是否支持加入购物车
+        isEnableCart: false,
+        // 是否显示在线客服按钮
+        isShowCustomerBtn: true,
+      }
+    },
+    computed: {
+      // 当前页面链接
+      pagePath() {
+        const params = this.$getShareUrlParams({ goodsId: this.goodsId })
+        return `/pages/goods/detail?${params}`
+      }
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    async onLoad(options) {
+      // 记录query参数
+      this.onRecordQuery(options)
+      // 加载页面数据
+      this.onRefreshPage()
+    },
+
+    methods: {
+      // 记录query参数
+      onRecordQuery(query) {
+        const scene = getSceneData(query)
+        this.goodsId = query.goodsId ? parseInt(query.goodsId) : parseInt(scene.gid)
+      },
+
+      // 刷新页面数据
+      onRefreshPage() {
+        const app = this
+        app.isLoading = true
+        Promise.all([app.getGoodsDetail(), app.getCartTotal()])
+          .finally(() => app.isLoading = false)
+      },
+
+      // 获取商品信息
+      getGoodsDetail() {
+        const app = this
+        return new Promise((resolve, reject) => {
+          GoodsApi.detail(app.goodsId)
+            .then(result => {
+              app.goods = result.data.detail
+              if (app.goods.goods_type == GoodsTypeEnum.PHYSICAL.value) {
+                app.isEnableCart = true
+              }
+              resolve(result)
+            })
+            .catch(reject)
+        })
+      },
+
+      // 获取购物车总数量
+      getCartTotal() {
+        const app = this
+        return new Promise((resolve, reject) => {
+          CartApi.total()
+            .then(result => {
+              app.cartTotal = result.data.cartTotal
+              resolve(result)
+            })
+            .catch(reject)
+        })
+      },
+
+      // 更新购物车数量
+      onAddCart(total) {
+        this.cartTotal = total
+      },
+
+      /**
+       * 显示/隐藏SKU弹窗
+       * @param {skuMode} 模式 1:都显示 2:只显示购物车 3:只显示立即购买
+       */
+      onShowSkuPopup(skuMode = 1) {
+        const app = this
+        if (app.isEnableCart) {
+          app.skuMode = skuMode
+        } else {
+          app.skuMode = 3
+        }
+        app.showSkuPopup = !app.showSkuPopup
+      },
+
+      // 显示隐藏分享菜单
+      onShowShareSheet() {
+        this.showShareSheet = !this.showShareSheet
+      },
+
+      // 跳转到首页
+      onTargetHome(e) {
+        this.$navTo('pages/index/index')
+      },
+
+      // 跳转到购物车页
+      onTargetCart() {
+        this.$navTo('pages/cart/index')
+      },
+
+    },
+
+    /**
+     * 分享当前页面
+     */
+    onShareAppMessage() {
+      return {
+        title: this.goods.goods_name,
+        path: this.pagePath
+      }
+    },
+
+    /**
+     * 分享到朋友圈
+     * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
+     * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
+     */
+    onShareTimeline() {
+      return {
+        title: this.goods.goods_name,
+        path: this.pagePath
+      }
+    }
+  }
+</script>
+
+<style>
+  page {
+    background: #fafafa;
+  }
+</style>
+<style lang="scss" scoped>
+  @import "./detail.scss";
+</style>
\ No newline at end of file
diff --git a/pages/goods2/list.vue b/pages/goods2/list.vue
new file mode 100644
index 0000000..5082d49
--- /dev/null
+++ b/pages/goods2/list.vue
@@ -0,0 +1,464 @@
+<template>
+  <view class="container" :style="appThemeStyle">
+    <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption"
+      @up="upCallback">
+      <!-- 页面头部 -->
+      <view class="header">
+        <view class="search">
+          <search :tips="options.search ? options.search : '搜索商品'" @event="handleSearch" />
+        </view>
+        <!-- 切换列表显示方式 -->
+        <view class="show-view" @click="handleShowView">
+          <text class="iconfont icon-view-tile" v-if="showView"></text>
+          <text class="iconfont icon-view-list" v-else></text>
+        </view>
+      </view>
+      <!-- 排序标签 -->
+      <view class="store-sort">
+        <view class="sort-item" :class="{ active: sortType === 'all' }" @click="handleSortType('all')">
+          <text>综合</text>
+        </view>
+        <view class="sort-item" :class="{ active: sortType === 'sales' }" @click="handleSortType('sales')">
+          <text>销量</text>
+        </view>
+        <view class="sort-item sort-item-price" :class="{ active: sortType === 'price' }" @click="handleSortType('price')">
+          <text>价格</text>
+          <view class="price-arrow">
+            <view class="icon up" :class="{ active: sortType === 'price' && !sortPrice }">
+              <text class="iconfont icon-arrow-up"></text>
+            </view>
+            <view class="icon down" :class="{ active: sortType === 'price' && sortPrice }">
+              <text class="iconfont icon-arrow-down"></text>
+            </view>
+          </view>
+        </view>
+      </view>
+      <!-- 商品列表 -->
+      <view class="goods-list clearfix" :class="['column-' + (showView ? '1' : '2')]">
+        <view class="goods-item" v-for="(item, index) in list.data" :key="index" @click="onTargetDetail(item.goods_id)">
+          <!-- 单列显示 -->
+          <view v-if="showView" class="dis-flex">
+            <!-- 商品图片 -->
+            <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-selling-point dis-flex">
+                  <text class="oneline-hide">{{ item.selling_point }}</text>
+                </view>
+                <!-- 商品销量 -->
+                <view class="desc-goods-sales dis-flex">
+                  <text>已售{{ item.goods_sales }}件</text>
+                </view>
+                <!-- 商品价格 -->
+                <view class="desc-footer">
+                  <text class="price-x">¥{{ item.goods_price_min }}</text>
+                  <text class="price-y col-9" v-if="item.line_price_min > 0">¥{{ item.line_price_min }}</text>
+                </view>
+              </view>
+            </view>
+          </view>
+          <!-- 多列显示 -->
+          <view v-else class="">
+            <!-- 商品图片 -->
+            <view class="goods-image">
+              <image class="image" mode="aspectFill" :src="item.goods_image"></image>
+            </view>
+            <view class="detail">
+              <!-- 商品名称 -->
+              <view class="goods-name">
+                <text class="twoline-hide">{{ item.goods_name }}</text>
+              </view>
+              <!-- 商品价格 -->
+              <view class="detail-price oneline-hide">
+                <text class="goods-price f-30 col-m">￥{{ item.goods_price_min }}</text>
+                <text v-if="item.line_price_min > 0" class="line-price col-9 f-24">￥{{ item.line_price_min }}</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </mescroll-body>
+  </view>
+</template>
+
+<script>
+  import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
+  import * as GoodsApi from '@/api/goods'
+  import { getEmptyPaginateObj, getMoreListData } from '@/core/app'
+  import Search from '@/components/search'
+
+  const pageSize = 15
+  const showViewKey = 'GoodsList-ShowView';
+
+  export default {
+    components: {
+      Search
+    },
+    mixins: [MescrollMixin],
+    data() {
+      return {
+        showView: false, // 列表显示方式 (true列表、false平铺)
+        sortType: 'all', // 排序类型
+        sortPrice: false, // 价格排序 (true高到低 false低到高)
+        options: {}, // 当前页面参数
+        list: getEmptyPaginateObj(), // 商品列表数据
+
+        // 上拉加载配置
+        upOption: {
+          // 首次自动执行
+          auto: true,
+          // 每页数据的数量; 默认10
+          page: { size: pageSize },
+          // 数量要大于4条才显示无更多数据
+          noMoreSize: 4,
+        }
+      }
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+      // 记录options
+      this.options = options
+      // 设置默认列表显示方式
+      this.setShowView()
+    },
+
+    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.total
+            app.mescroll.endBySize(curPageLen, totalSize)
+          })
+          .catch(() => app.mescroll.endErr())
+      },
+
+      // 设置默认列表显示方式
+      setShowView() {
+        this.showView = uni.getStorageSync(showViewKey) || false
+      },
+
+      /**
+       * 获取商品列表
+       * @param {number} pageNo 页码
+       */
+      getGoodsList(pageNo = 1) {
+        const app = this
+        console.log(app.options)
+        const param = {
+          sortType: app.sortType,
+          sortPrice: Number(app.sortPrice),
+          categoryId: app.options.categoryId || 0,
+          goodsName: app.options.search || '',
+          page: pageNo
+        }
+        return new Promise((resolve, reject) => {
+          GoodsApi.list(param)
+            .then(result => {
+              // 合并新数据
+              const newList = result.data.list
+              app.list.data = getMoreListData(newList, app.list, pageNo)
+              resolve(newList)
+            })
+            .catch(reject)
+        })
+      },
+
+      // 切换排序方式
+      handleSortType(newSortType) {
+        const app = this
+        const newSortPrice = newSortType === 'price' ? !app.sortPrice : true
+        app.sortType = newSortType
+        app.sortPrice = newSortPrice
+        // 刷新列表数据
+        app.list = getEmptyPaginateObj()
+        app.mescroll.resetUpScroll()
+      },
+
+      // 切换列表显示方式
+      handleShowView() {
+        const app = this
+        app.showView = !app.showView
+        uni.setStorageSync(showViewKey, app.showView)
+      },
+
+      // 跳转商品详情页
+      onTargetDetail(goodsId) {
+        this.$navTo('pages/goods/detail', { goodsId })
+      },
+
+      /**
+       * 商品搜索
+       */
+      handleSearch() {
+        const searchPageUrl = 'pages/search/index'
+        // 判断来源页面
+        let pages = getCurrentPages()
+        if (pages.length > 1 &&
+          pages[pages.length - 2].route === searchPageUrl) {
+          uni.navigateBack()
+          return
+        }
+        // 跳转到商品搜索页
+        this.$navTo(searchPageUrl)
+      },
+
+    },
+
+    /**
+     * 设置分享内容
+     */
+    onShareAppMessage() {
+      // 构建分享参数
+      const app = this
+      return {
+        title: "商品列表",
+        path: "/pages/goods/list?" + this.$getShareUrlParams(app.options)
+      }
+    },
+
+    /**
+     * 分享到朋友圈
+     * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
+     * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
+     */
+    onShareTimeline() {
+      // 构建分享参数
+      const app = this
+      return {
+        title: "商品列表",
+        path: "/pages/goods/list?" + this.$getShareUrlParams(app.options)
+      }
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  // 页面头部
+  .header {
+    display: flex;
+    align-items: center;
+    background-color: #fff;
+
+    // 搜索框
+    .search {
+      flex: 1;
+    }
+
+    // 切换显示方式
+    .show-view {
+      width: 60rpx;
+      height: 60rpx;
+      font-size: 36rpx;
+      color: #505050;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  // 排序组件
+  .store-sort {
+    position: sticky;
+    top: var(--window-top);
+    display: flex;
+    padding: 20rpx 0;
+    font-size: 28rpx;
+    background: #fff;
+    color: #000;
+    z-index: 99;
+
+    .sort-item {
+      flex-basis: 33.3333%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 50rpx;
+
+      &.active {
+        color: $main-bg;
+      }
+    }
+
+    .sort-item-price .price-arrow {
+      margin-left: 20rpx;
+      font-size: 24rpx;
+      color: #000;
+
+      .icon {
+        &.active {
+          color: $main-bg;
+        }
+
+        &.up {
+          margin-bottom: -16rpx;
+        }
+
+        &.down {
+          margin-top: -16rpx;
+        }
+      }
+
+    }
+
+  }
+
+  // 商品列表
+  .goods-list {
+    padding: 4rpx;
+    box-sizing: border-box;
+  }
+
+  // 单列显示
+  .goods-list.column-1 {
+    .goods-item {
+      width: 100%;
+      height: 280rpx;
+      margin-bottom: 12rpx;
+      padding: 20rpx;
+      box-sizing: border-box;
+      background: #fff;
+      line-height: 1.6;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .goods-item-left {
+      display: flex;
+      width: 300rpx;
+      background: #fff;
+      align-items: center;
+
+      .image {
+        display: block;
+        width: 240rpx;
+        height: 240rpx;
+      }
+    }
+
+    .goods-item-right {
+      position: relative;
+      flex: 1;
+
+      .goods-name {
+        margin-top: 10rpx;
+        white-space: normal;
+        color: #484848;
+        font-size: 27rpx;
+        // min-height: 68rpx;
+        // line-height: 1.3;
+      }
+    }
+
+    .goods-item-desc {
+      margin-top: 8rpx;
+    }
+
+    .desc-selling-point {
+      width: 400rpx;
+      font-size: 24rpx;
+      color: #e49a3d;
+    }
+
+    .desc-goods-sales {
+      color: #999;
+      font-size: 24rpx;
+    }
+
+    .desc-footer {
+      font-size: 24rpx;
+
+      .price-x {
+        margin-right: 16rpx;
+        color: $main-bg;
+        font-size: 30rpx;
+      }
+
+      .price-y {
+        text-decoration: line-through;
+      }
+    }
+  }
+
+  // 平铺显示
+  .goods-list.column-2 {
+    .goods-item {
+      width: 50%;
+    }
+  }
+
+  .goods-item {
+    float: left;
+    box-sizing: border-box;
+    padding: 6rpx;
+
+    .goods-image {
+      position: relative;
+      width: 100%;
+      height: 0;
+      padding-bottom: 100%;
+      overflow: hidden;
+      background: #fff;
+
+      &:after {
+        content: '';
+        display: block;
+        margin-top: 100%;
+      }
+
+      .image {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        -o-object-fit: cover;
+        object-fit: cover;
+      }
+    }
+
+    .detail {
+      padding: 8rpx;
+      background: #fff;
+
+      .goods-name {
+        white-space: normal;
+        color: #484848;
+        font-size: 27rpx;
+        margin-bottom: 4rpx;
+        // min-height: 68rpx;
+        // line-height: 1.3;
+      }
+
+      .detail-price {
+        .goods-price {
+          margin-right: 8rpx;
+        }
+
+        .line-price {
+          text-decoration: line-through;
+        }
+      }
+    }
+  }
+</style>
\ No newline at end of file