diff --git a/components/search/index.vue b/components/search/index.vue
index eda02a5..d9ee9b1 100644
--- a/components/search/index.vue
+++ b/components/search/index.vue
@@ -15,7 +15,7 @@
     props: {
       tips: {
         type: String,
-        default: '搜索商品'
+        default: 'iPhone15'
       }
     },
     data() {
@@ -53,12 +53,16 @@
       font-size: 28rpx;
       background: #f7f7f7;
       display: flex;
-      justify-content: center;
-      align-items: center;
+	  align-items:center;
+	  height: 64rpx;
+	  background: #F7F8FA;
+	  border-radius: 68rpx 68rpx 68rpx 68rpx;
+	  opacity: 1;
     }
 
     .index-cont-search .search-icon {
       font-size: 28rpx;
+	  margin-left: 26rpx;
     }
 
     .index-cont-search .search-text {
diff --git a/pages.json b/pages.json
index 6d2783b..a5b91c9 100644
--- a/pages.json
+++ b/pages.json
@@ -134,7 +134,8 @@
     {
       "path": "pages/goods/detail",
       "style": {
-        "navigationBarTitleText": "商品详情页"
+		"navigationStyle": "custom"
+        // "navigationBarTitleText": "商品详情页"
       }
     },
     {
diff --git a/pages/goods/detail - 副本.vue b/pages/goods/detail - 副本.vue
new file mode 100644
index 0000000..ec85d52
--- /dev/null
+++ b/pages/goods/detail - 副本.vue	
@@ -0,0 +1,339 @@
+<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>
+
+    <!-- 商品推荐 -->
+    <recommended />
+
+    <!-- 底部选项卡 -->
+    <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">
+            <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="120rpx" /> -->
+
+    <!-- 分享菜单 -->
+    <share-sheet v-model="showShareSheet" :shareTitle="goods.goods_name" :shareImageUrl="goods.goods_image" :posterApiCall="posterApiCall"
+      :posterApiParam="{ goodsId }" />
+
+  </view>
+</template>
+
+<script>
+  import WxofficialMixin from '@/core/mixins/wxofficial'
+  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 Recommended from '@/components/recommended'
+  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: {
+      Recommended,
+      ShareSheet,
+      CustomerBtn,
+      SlideImage,
+      SkuPopup,
+      Comment,
+      Service
+    },
+    mixins: [WxofficialMixin],
+    data() {
+      return {
+        // 正在加载
+        isLoading: true,
+        // 当前商品ID
+        goodsId: null,
+        // 商品详情
+        goods: {},
+        // 购物车总数量
+        cartTotal: 0,
+        // 显示/隐藏SKU弹窗
+        showSkuPopup: false,
+        // 模式 1:都显示 2:只显示购物车 3:只显示立即购买
+        skuMode: 1,
+        // 显示/隐藏分享菜单
+        showShareSheet: false,
+        // 获取商品海报图api方法
+        posterApiCall: GoodsApi.poster,
+        // 是否支持加入购物车
+        isEnableCart: false,
+        // 是否显示在线客服按钮
+        isShowCustomerBtn: false,
+      }
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    async onLoad(options) {
+      // 记录query参数
+      this.onRecordQuery(options)
+      // 加载页面数据
+      this.onRefreshPage()
+      // 是否显示在线客服按钮
+      this.isShowCustomerBtn = await SettingModel.isShowCustomerBtn()
+    },
+
+    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()])
+          .then(() => app.setWxofficialShareData())
+          .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')
+      },
+
+      // 设置微信公众号链接分享卡片内容
+      setWxofficialShareData() {
+        const { goods } = this
+        this.updateShareCardData({
+          title: goods.goods_name,
+          desc: goods.selling_point,
+          imgUrl: goods.goods_image
+        })
+      },
+
+    },
+
+    /**
+     * 分享当前页面
+     */
+    onShareAppMessage() {
+      const app = this
+      // 构建页面参数
+      const params = app.$getShareUrlParams({
+        goodsId: app.goodsId,
+      })
+      return {
+        title: app.goods.goods_name,
+        path: `/pages/goods/detail?${params}`
+      }
+    },
+
+    /**
+     * 分享到朋友圈
+     * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
+     * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
+     */
+    onShareTimeline() {
+      const app = this
+      // 构建页面参数
+      const params = app.$getShareUrlParams({
+        goodsId: app.goodsId,
+      })
+      return {
+        title: app.goods.goods_name,
+        path: `/pages/goods/detail?${params}`
+      }
+    }
+  }
+</script>
+
+<style>
+  page {
+    background: #fafafa;
+  }
+</style>
+<style lang="scss" scoped>
+  @import "./detail.scss";
+</style>
\ No newline at end of file
diff --git a/pages/goods/detail.vue b/pages/goods/detail.vue
index ec85d52..a6b6ff3 100644
--- a/pages/goods/detail.vue
+++ b/pages/goods/detail.vue
@@ -1,339 +1,783 @@
 <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>
-
-    <!-- 商品推荐 -->
-    <recommended />
-
-    <!-- 底部选项卡 -->
-    <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">
-            <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="120rpx" /> -->
-
-    <!-- 分享菜单 -->
-    <share-sheet v-model="showShareSheet" :shareTitle="goods.goods_name" :shareImageUrl="goods.goods_image" :posterApiCall="posterApiCall"
-      :posterApiParam="{ goodsId }" />
-
-  </view>
-</template>
+	<view class="detail">
+		<view class="head">
+			<view class="search">
+				<image src="/static/tabbar/home.png" mode="" class="icon"></image>
+				<view class="searInput">
+					<image src="/static/home/search.png" mode="" class="seaIcon"></image>
+					<input v-model="searchValue" class="input" focus="true" placeholder="iPhone15" type="text" />
+				</view>
+			</view>
+			<view class="share">
+				<view class="sp"></view>
+				<image src="/static/detail/share.png" mode="" class="shareIcon"></image>
+			</view>
+			<view class="swiper">
+				<scroll-view class="goods" scroll-x="true" @scroll="scroll">
+					<view class="goodsItem" v-for="(item,index) in 4" :key="index">
+						<image src="/static/detail/tv.png" mode="" class="goodsImg"></image>
+						<view class="num">
+							<view class="numSp">
+
+							</view>
+							<view class="numInfo">
+								{{index+1}}/4
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+		</view>
+
+		<view class="goodsInfo">
+			<view class="goodsPrice">
+				<view class="left">
+					<view class="leftPrice">
+						<text>￥</text>4980
+					</view>
+					<view class="sellPrice">
+						<text class="sellLeft">分销价</text>￥3999
+					</view>
+				</view>
+				<view class="right">
+					<view class="rightPrice">
+						￥4980
+					</view>
+					<view class="rightInfo">
+						降价通知
+					</view>
+				</view>
+			</view>
+			<view class="pro">
+				<view class="proMem">
+					PRO会员
+				</view>
+				<view class="proInfo">
+					开通PRO会员 预计再省
+				</view>
+				<view class="proBtn">
+					立即开通
+				</view>
+			</view>
+			<view class="goodsDetail">
+				<view class="goodsName">
+					夏普4T-M70H7DA 70英寸 4K 高清进口屏智能语音
+					平板液晶电视机6575
+				</view>
+				<view class="goodsOpera">
+					<view class="goodsNum">
+						<text>100999080000</text>
+						<image src="/static/detail/copy.png" mode=""></image>
+					</view>
+					<view class="operaImg">
+						<image src="/static/detail/tip.png" mode="" class="tips"></image>
+						<image src="/static/detail/ys.png" mode="" class="ys"></image>
+					</view>
+				</view>
+				<view class="rank">
+					<text>排行榜 手机热搜榜第3名</text>
+					<image src="/static/detail/rightIcon.png" mode=""></image>
+				</view>
+			</view>
+		</view>
+		<view class="orderInfo">
+			<view class="chosed">
+				<view class="title">已选</view>
+				<view class="info">枪色 1件</view>
+			</view>
+			<view class="chosed">
+				<view class="title">送至</view>
+				<view class="info">
+					<view class="infoLeft">
+						现货
+						<image src="../../static/detail/rightIcon.png" mode=""></image>
+					</view>
+					<view class="address">
+						河北省秦皇岛市某某区
+					</view>
+				</view>
+			</view>
+			<view class="chosed">
+				<view class="serve">
+					<view class="serveInfo">
+						服务
+					</view>
+					<view class="span">
 
+					</view>
+				</view>
+				<view class="business">
+					<view class="busSour">
+						<text>商家来源：平台认证商户</text>
+					</view>
+					<view class="busName">
+						<text>商家名称：北京伊莫电子科技有限公司</text>
+					</view>
+				</view>
+			</view>
+			<view class="chosed">
+				<view class="title">服务</view>
+				<image src="/static/detail/buy.png" mode="" class="buy"></image>
+				<view class="info">枪色 1件</view>
+			</view>
+		</view>
+		<view class="about">
+			<view class="aboutHead">
+				<view class="aboutSuggest">
+					相关推荐
+				</view>
+				<view class="more">
+					查看更多
+				</view>
+			</view>
+			<view class="goodsList">
+				<view class="goodsItem" v-for="(item,index) in 6" :key="index">
+					<view class="img">
+						<image src="/static/detail/tv.png" mode="" class="goodsImg"></image>
+					</view>
+					<view class="goodsName">
+						夏普4T-M70H7DA 70
+					</view>
+					<view class="price">
+						￥2220
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="vacancy">
+			
+		</view>
+		<view class="footer">
+			<view class="footerCus firstBtn">
+				<view class="cusIcon">
+					<image src="/static/detail/customer.png" mode=""></image>
+				</view>
+				<view class="customer">
+					客服
+				</view>
+			</view>
+			<view class="footerCus">
+				<view class="cusIcon">
+					<image src="/static/detail/collect.png" mode=""></image>
+				</view>
+				<view class="customer">
+					收藏
+				</view>
+			</view>
+			<view class="footerCus ">
+				<view class="cusIcon">
+					<image src="/static/detail/car.png" mode=""></image>
+				</view>
+				<view class="customer car">
+					购物车
+				</view>
+			</view>
+			<view class="addCar">
+				加入购物车
+			</view>
+			<view class="buyNow">
+				立即购买
+			</view>
+		</view>
+	</view>
+</template>
 <script>
-  import WxofficialMixin from '@/core/mixins/wxofficial'
-  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 Recommended from '@/components/recommended'
-  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: {
-      Recommended,
-      ShareSheet,
-      CustomerBtn,
-      SlideImage,
-      SkuPopup,
-      Comment,
-      Service
-    },
-    mixins: [WxofficialMixin],
-    data() {
-      return {
-        // 正在加载
-        isLoading: true,
-        // 当前商品ID
-        goodsId: null,
-        // 商品详情
-        goods: {},
-        // 购物车总数量
-        cartTotal: 0,
-        // 显示/隐藏SKU弹窗
-        showSkuPopup: false,
-        // 模式 1:都显示 2:只显示购物车 3:只显示立即购买
-        skuMode: 1,
-        // 显示/隐藏分享菜单
-        showShareSheet: false,
-        // 获取商品海报图api方法
-        posterApiCall: GoodsApi.poster,
-        // 是否支持加入购物车
-        isEnableCart: false,
-        // 是否显示在线客服按钮
-        isShowCustomerBtn: false,
-      }
-    },
-
-    /**
-     * 生命周期函数--监听页面加载
-     */
-    async onLoad(options) {
-      // 记录query参数
-      this.onRecordQuery(options)
-      // 加载页面数据
-      this.onRefreshPage()
-      // 是否显示在线客服按钮
-      this.isShowCustomerBtn = await SettingModel.isShowCustomerBtn()
-    },
-
-    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()])
-          .then(() => app.setWxofficialShareData())
-          .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')
-      },
-
-      // 设置微信公众号链接分享卡片内容
-      setWxofficialShareData() {
-        const { goods } = this
-        this.updateShareCardData({
-          title: goods.goods_name,
-          desc: goods.selling_point,
-          imgUrl: goods.goods_image
-        })
-      },
-
-    },
-
-    /**
-     * 分享当前页面
-     */
-    onShareAppMessage() {
-      const app = this
-      // 构建页面参数
-      const params = app.$getShareUrlParams({
-        goodsId: app.goodsId,
-      })
-      return {
-        title: app.goods.goods_name,
-        path: `/pages/goods/detail?${params}`
-      }
-    },
-
-    /**
-     * 分享到朋友圈
-     * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
-     * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
-     */
-    onShareTimeline() {
-      const app = this
-      // 构建页面参数
-      const params = app.$getShareUrlParams({
-        goodsId: app.goodsId,
-      })
-      return {
-        title: app.goods.goods_name,
-        path: `/pages/goods/detail?${params}`
-      }
-    }
-  }
+	export default {
+		data() {
+			return {
+				searchValue: '',
+			}
+		}
+	}
 </script>
-
-<style>
-  page {
-    background: #fafafa;
-  }
-</style>
 <style lang="scss" scoped>
-  @import "./detail.scss";
+	.detail {
+		width: 100%;
+		height: 100%;
+		padding-top: 100rpx;
+	}
+
+	.head {
+		background-color: #FFF;
+		width: 100%;
+		height: 640rpx;
+	}
+
+	.search {
+		display: flex;
+		align-items: center;
+
+		.icon {
+			width: 34rpx;
+			height: 38rpx;
+			margin: 0 22rpx 0 76rpx;
+		}
+
+		.searInput {
+			width: 428rpx;
+			height: 58rpx;
+			background: #F3F3F3;
+			border-radius: 60rpx 60rpx 60rpx 60rpx;
+			opacity: 1;
+			display: flex;
+			align-items: center;
+
+			.seaIcon {
+				width: 28rpx;
+				height: 28rpx;
+				margin: 0 0 0 26rpx;
+			}
+
+			.input {
+				flex: 1;
+				padding-left: 20rpx;
+			}
+		}
+	}
+
+	.share {
+		display: flex;
+		justify-content: space-between;
+		margin-top: 28rpx;
+
+		.sp {
+			width: 54rpx;
+			height: 54rpx;
+		}
+
+		.shareIcon {
+			width: 54rpx;
+			height: 54rpx;
+			margin-right: 28rpx;
+		}
+	}
+
+	.swiper {
+		width: 726rpx;
+		height: 458rpx;
+		border-radius: 0rpx 0rpx 0rpx 0rpx;
+		opacity: 1;
+		left: 0;
+		right: 0;
+		margin: auto;
+
+		.goods {
+			width: 100%;
+			height: 100%;
+			white-space: nowrap;
+
+			.goodsItem {
+				width: 100%;
+				height: 100%;
+
+				display: inline-block;
+				position: relative;
+
+				.goodsImg {
+					margin-left: 30rpx;
+					width: 666rpx;
+					height: 398rpx;
+				}
+
+				.num {
+
+					text-align: center;
+					display: flex;
+					justify-content: space-between;
+
+					.numSp {
+						width: 82rpx;
+						height: 56rpx;
+					}
+
+					.numInfo {
+						width: 82rpx;
+						height: 56rpx;
+						background: #262626;
+						border-radius: 50% 0 0 50%;
+						font-size: 28rpx;
+						font-family: PingFang SC, PingFang SC;
+						font-weight: 400;
+						color: #FFFFFF;
+						line-height: 56rpx;
+					}
+				}
+			}
+
+		}
+	}
+
+	.goodsInfo {
+		width: 720rpx;
+		height: 484rpx;
+		background: #FFFFFF;
+		border-radius: 6rpx 6rpx 6rpx 6rpx;
+		opacity: 1;
+		margin: 30rpx 0 0 16rpx;
+
+		.goodsPrice {
+			background-image: url('/static/detail/priceback.png');
+			width: 720rpx;
+			height: 136rpx;
+			background-size: 100% 100%;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.left {
+				margin: 18rpx 0 0 28rpx;
+
+				.leftPrice {
+					width: 140rpx;
+					height: 64rpx;
+					font-size: 46rpx;
+					font-family: PingFang SC, PingFang SC;
+					font-weight: 400;
+					color: #FFFFFF;
+					line-height: 64rpx;
+
+					text {
+						width: 20rpx;
+						height: 64rpx;
+						font-size: 32rpx;
+						font-family: PingFang SC, PingFang SC;
+						font-weight: 400;
+						color: #FFFFFF;
+						line-height: 64rpx;
+						margin-right: 8rpx;
+					}
+				}
+
+				.sellPrice {
+					height: 34rpx;
+					font-size: 24rpx;
+					font-family: PingFang SC, PingFang SC;
+					font-weight: 400;
+					color: #FFFFFF;
+					line-height: 34rpx;
+
+					.sellLeft {
+						width: 72rpx;
+						margin-right: 8rpx;
+					}
+				}
+			}
+
+			.right {
+				margin-right: 50rpx;
+
+				.rightPrice {
+					width: 102rpx;
+					height: 48rpx;
+					font-size: 34rpx;
+					font-family: PingFang SC, PingFang SC;
+					font-weight: 400;
+					color: #FFFFFF;
+					line-height: 48rpx;
+				}
+
+				.rightInfo {
+					width: 136rpx;
+					height: 44rpx;
+					font-size: 34rpx;
+					font-family: YouSheBiaoTiHei;
+					font-weight: 400;
+					color: #FFFFFF;
+					line-height: 34rpx;
+				}
+			}
+		}
+
+		.pro {
+			background-image: url('/static/detail/pro.png');
+			background-size: 100% 100%;
+			width: 690rpx;
+			height: 82rpx;
+			display: flex;
+			align-items: center;
+			margin: 20rpx 0 0 10rpx;
+
+			.proMem {
+				width: 142rpx;
+				height: 40rpx;
+				font-size: 28rpx;
+				font-family: PingFang SC, PingFang SC;
+				font-weight: 500;
+				color: #966542;
+				line-height: 33rpx;
+				margin-left: 18rpx;
+				padding-right: 24rpx;
+				border-right: 2rpx solid #EFD4B4;
+			}
+
+			.proInfo {
+				width: 304rpx;
+				height: 34rpx;
+				font-size: 24rpx;
+				font-family: PingFang SC, PingFang SC;
+				font-weight: 500;
+				color: #966542;
+				line-height: 34rpx;
+				margin: 0 38rpx 0 26rpx;
+			}
+
+			.proBtn {
+				width: 126rpx;
+				height: 50rpx;
+				background: #9F744D;
+				border-radius: 82rpx 82rpx 82rpx 82rpx;
+				opacity: 1;
+				text-align: center;
+				line-height: 50rpx;
+				font-size: 24rpx;
+				font-family: PingFang SC, PingFang SC;
+				font-weight: 500;
+				color: #FFFFFF;
+			}
+
+		}
+
+		.goodsDetail {
+			.goodsName {
+				width: 672rpx;
+				height: 80rpx;
+				font-size: 28rpx;
+				font-family: PingFang SC, PingFang SC;
+				font-weight: 400;
+				color: #000000;
+				line-height: 33rpx;
+				margin: 28rpx 0 0 28rpx;
+			}
+
+			.goodsOpera {
+				margin-left: 28rpx;
+				display: flex;
+				justify-content: space-between;
+
+				.goodsNum {
+					text {
+						display: inline-block;
+						width: 168rpx;
+						height: 34rpx;
+						font-size: 24rpx;
+						font-family: PingFang SC, PingFang SC;
+						font-weight: 400;
+						color: #8A8A8A;
+						line-height: 34rpx;
+						margin-right: 4rpx;
+					}
+
+					image {
+						width: 28rpx;
+						height: 28rpx;
+					}
+				}
+
+				.operaImg {
+					image {
+						width: 49rpx;
+						height: 49rpx;
+					}
+
+					.tips {
+						margin-right: 6rpx;
+					}
+				}
+			}
+
+			.rank {
+				margin: 22rpx 0 18rpx 28rpx;
+				width: 670rpx;
+				height: 58rpx;
+				background: #FFF3EE;
+				border-radius: 8rpx 8rpx 8rpx 8rpx;
+				opacity: 1;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				padding: 0 28rpx;
+
+				text {
+					font-size: 24rpx;
+					font-family: PingFang SC, PingFang SC;
+					font-weight: 400;
+					color: #FF1130;
+					line-height: 58rpx;
+				}
+
+				image {
+					width: 14rpx;
+					height: 14rpx;
+				}
+			}
+		}
+	}
+
+	.orderInfo {
+		width: 720rpx;
+		height: 256rpx;
+		background: #FFFFFF;
+		border-radius: 6rpx 6rpx 6rpx 6rpx;
+		opacity: 1;
+		margin: 16rpx 0 0 20rpx;
+		padding: 24rpx 22rpx 12rpx 32rpx;
+
+		.chosed {
+			margin-bottom: 18rpx;
+			display: flex;
+			align-items: center;
+
+			.buy {
+				width: 112rpx;
+				height: 22rpx;
+				margin-right: 10rpx;
+			}
+
+			.title {
+				width: 48rpx;
+				height: 34rpx;
+				font-size: 24rpx;
+				font-family: PingFang SC, PingFang SC;
+				font-weight: 400;
+				color: #C4C4C4;
+				line-height: 34rpx;
+				margin-right: 38rpx;
+			}
+
+			.info {
+				height: 34rpx;
+				font-size: 24rpx;
+				font-family: PingFang SC, PingFang SC;
+				font-weight: 400;
+				color: #3D3D3D;
+				line-height: 34rpx;
+				display: flex;
+				align-items: center;
+
+				.infoLeft {
+					height: 34rpx;
+					font-size: 24rpx;
+					font-family: PingFang SC, PingFang SC;
+					font-weight: 400;
+					color: #FE3636;
+					line-height: 34rpx;
+
+					image {
+						width: 14rpx;
+						height: 14rpx;
+						margin: 0 10rpx 0 8rpx;
+					}
+				}
+
+				.address {
+					height: 34rpx;
+					font-size: 24rpx;
+					font-family: PingFang SC, PingFang SC;
+					font-weight: 400;
+					color: #3D3D3D;
+					line-height: 34rpx;
+
+				}
+			}
+
+			.serve {
+				.serveInfo {
+					width: 48rpx;
+					height: 34rpx;
+					font-size: 24rpx;
+					font-family: PingFang SC, PingFang SC;
+					font-weight: 400;
+					color: #C4C4C4;
+					line-height: 34rpx;
+					margin-right: 38rpx;
+				}
+
+				.span {
+					width: 48rpx;
+					height: 34rpx;
+				}
+			}
+
+			.business {
+				.busSour {
+					height: 34rpx;
+					font-size: 24rpx;
+					font-family: PingFang SC, PingFang SC;
+					font-weight: 400;
+					color: #3D3D3D;
+					line-height: 34rpx;
+				}
+
+				.busName {
+					height: 34rpx;
+					font-size: 24rpx;
+					font-family: PingFang SC, PingFang SC;
+					font-weight: 400;
+					color: #3D3D3D;
+					line-height: 34rpx;
+				}
+			}
+
+		}
+	}
+
+	.about {
+		width: 720rpx;
+		height: 730rpx;
+		background: #FFFFFF;
+		border-radius: 6rpx 6rpx 6rpx 6rpx;
+		opacity: 1;
+		margin: 14rpx 0 0rpx 20rpx;
+		padding: 24rpx 0 0 36rpx;
+
+		.aboutHead {
+			display: flex;
+			justify-content: space-between;
+
+			.aboutSuggest {
+				width: 112rpx;
+				height: 40rpx;
+				font-size: 28rpx;
+				font-family: PingFang SC, PingFang SC;
+				font-weight: 400;
+				color: #000000;
+				line-height: 40rpx;
+			}
+
+			.more {
+				width: 96rpx;
+				height: 34rpx;
+				font-size: 24rpx;
+				font-family: PingFang SC, PingFang SC;
+				font-weight: 400;
+				color: #909090;
+				line-height: 34rpx;
+				margin-right: 20rpx;
+
+			}
+		}
+
+		.goodsList {
+			display: flex;
+			flex-wrap: wrap;
+			margin-top: 30rpx;
+
+			.goodsItem {
+				margin-right: 18rpx;
+
+				.img {
+					width: 204rpx;
+					height: 168rpx;
+					background: #FBFBFB;
+					border-radius: 6rpx 6rpx 6rpx 6rpx;
+					opacity: 1;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+
+					.goodsImg {
+						width: 190rpx;
+						height: 144rpx;
+						border-radius: 0rpx 0rpx 0rpx 0rpx;
+						opacity: 1;
+					}
+				}
+
+				.goodsName {
+					width: 184rpx;
+					height: 80rpx;
+					font-size: 28rpx;
+					font-family: PingFang SC, PingFang SC;
+					font-weight: 400;
+					color: #000000;
+					line-height: 33rpx;
+
+				}
+
+				.price {
+					width: 66rpx;
+					height: 44rpx;
+					font-size: 32rpx;
+					font-family: PingFang SC, PingFang SC;
+					font-weight: 500;
+					color: #ED2B00;
+					line-height: 38rpx;
+				}
+			}
+		}
+	}
+	.vacancy{
+		width: 100%;
+		height: 150rpx;
+	}
+	.footer {
+		position: fixed;
+		bottom: 0;
+		width: 100%;
+		height: 130rpx;
+		background: #FFFFFF;
+		box-shadow: -6rpx 14rpx 48rpx 0rpx rgba(0, 0, 0, 0.25);
+		border-radius: 0rpx 0rpx 0rpx 0rpx;
+		opacity: 1;
+		display: flex;
+		align-items: center;
+		text-align: center;
+		.firstBtn {
+			margin-left: 60rpx;
+		}
+
+		.footerCus {
+			margin-right: 44rpx;
+
+			.cusIcon {
+				width: 38rpx;
+				height: 38rpx;
+
+				image {
+					width: 100%;
+					height: 100%;
+				}
+			}
+
+			.customer {
+				width: 40rpx;
+				height: 28rpx;
+				font-size: 20rpx;
+				font-family: PingFang SC, PingFang SC;
+				font-weight: 400;
+				color: #3D3D3D;
+				line-height: 28rpx;
+			}
+			.car{
+				width: 60rpx;
+			}
+		}
+		.addCar{
+			width: 196rpx;
+			height: 78rpx;
+			background: #FF9E2B;
+			border-radius: 42rpx 42rpx 42rpx 42rpx;
+			opacity: 1;
+			font-size: 24rpx;
+			font-family: PingFang SC;
+			font-weight: 600;
+			color: #FFFFFF;
+			line-height: 78rpx;
+			text-align: center;
+		}
+		.buyNow{
+			width: 212rpx;
+			height: 78rpx;
+			background: linear-gradient(102deg, #FE5E06 0%, #F3221A 100%);
+			border-radius: 42rpx 42rpx 42rpx 42rpx;
+			opacity: 1;
+			font-size: 24rpx;
+			font-family: PingFang SC, PingFang SC;
+			font-weight: 600;
+			color: #FFFFFF;
+			line-height: 78rpx;
+			text-align: center;
+			margin-left: 8rpx;
+		}
+	}
 </style>
\ No newline at end of file
diff --git a/pages/goods/list.vue b/pages/goods/list.vue
index 50f4e46..e92208e 100644
--- a/pages/goods/list.vue
+++ b/pages/goods/list.vue
@@ -1,472 +1,624 @@
 <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>
+	<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 class="sort-item" :class="{ active: sortType === 'city' }" @click="handleSortType('city')">
+					<text>同城达</text>
+				</view>
+				<view class="show-view btnOpera" @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="goodsType">
+				<scroll-view class="typeList" scroll-x="true" @scroll="scroll" scroll-left="120">
+					<view v-for="(item,index) in goodsType" :key="index" class="typeItem"
+						:style="{'color':item.isActive?'#F43B21':'#5A5A5A','background':item.isActive?'#FEF6F6':'#F7F8FA','border':item.isActive?'2rpx solid #F22029':'none'}">
+						{{item.name}}
+					</view>
+				</scroll-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="shipping">
+								包邮
+							</view>
+							<view class="goodsInfo">
+								<view class="oneTip tip">
+									85英寸
+								</view>
+								<view class="twoTip tip">
+									量子电视
+								</view>
+								<view class="threeTip tip">
+									4K电视
+								</view>
+							</view>
+							<!-- 商品价格 -->
+							<view class="detail-price oneline-hide">
+								<text class="goods-price f-30 col-m">￥{{ item.goods_price_min }} <text
+										class="delPrice">到手价</text></text>
+								<text v-if="item.line_price_min > 0"
+									class="line-price col-9 f-24">￥{{ item.line_price_min }}</text>
+							</view>
+							<view class="evaluate">
+								200+条评论 99%好评率
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</mescroll-body>
+	</view>
 </template>
 
 <script>
-  import WxofficialMixin from '@/core/mixins/wxofficial'
-  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, WxofficialMixin],
-    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()
-      // 设置微信公众号链接分享卡片内容
-      this.setWxofficialShareData()
-    },
-
-    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())
-      },
-
-      // 设置默认列表显示方式
-      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)
-      },
-
-      // 设置微信公众号链接分享卡片内容
-      setWxofficialShareData() {
-        this.updateShareCardData({ title: '商品列表' })
-      },
-
-    },
-
-    /**
-     * 设置分享内容
-     */
-    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)
-      }
-    }
-
-  }
+	import WxofficialMixin from '@/core/mixins/wxofficial'
+	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, WxofficialMixin],
+		data() {
+			return {
+				goodsType: [{
+					name: '80英寸',
+					isActive: true,
+				}, {
+					name: '75英寸',
+					isActive: false,
+				}, {
+					name: '70英寸',
+					isActive: false,
+				}, {
+					name: '65英寸',
+					isActive: false,
+				}, {
+					name: '60英寸',
+					isActive: false,
+				}, ],
+				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()
+			// 设置微信公众号链接分享卡片内容
+			this.setWxofficialShareData()
+		},
+
+		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())
+			},
+
+			// 设置默认列表显示方式
+			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)
+			},
+
+			// 设置微信公众号链接分享卡片内容
+			setWxofficialShareData() {
+				this.updateShareCardData({
+					title: '商品列表'
+				})
+			},
+
+		},
+
+		/**
+		 * 设置分享内容
+		 */
+		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;
-        min-height: 68rpx;
-        line-height: 1.3;
-        white-space: normal;
-        color: #484848;
-        font-size: 26rpx;
-      }
-    }
-
-    .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 {
-        min-height: 68rpx;
-        line-height: 1.3;
-        white-space: normal;
-        color: #484848;
-        font-size: 26rpx;
-        margin-bottom: 4rpx;
-      }
-
-      .detail-price {
-        .goods-price {
-          margin-right: 8rpx;
-        }
-
-        .line-price {
-          text-decoration: line-through;
-        }
-      }
-    }
-  }
+	// 页面头部
+	.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: 22%;
+			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;
+				min-height: 68rpx;
+				line-height: 1.3;
+				white-space: normal;
+				color: #484848;
+				font-size: 26rpx;
+			}
+		}
+
+		.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 {
+				min-height: 68rpx;
+				line-height: 1.3;
+				white-space: normal;
+				color: #484848;
+				font-size: 26rpx;
+				margin-bottom: 4rpx;
+			}
+
+			.detail-price {
+				.goods-price {
+					margin-right: 8rpx;
+				}
+
+				.line-price {
+					text-decoration: line-through;
+				}
+			}
+		}
+	}
+
+	.btnOpera {
+		width: 33rpx;
+		height: 33rpx;
+		position: relative;
+		top: 6rpx;
+	}
+
+	.shipping {
+		width: 44rpx;
+		height: 24rpx;
+		background: #FFFFFF;
+		border-radius: 4rpx 4rpx 4rpx 4rpx;
+		opacity: 1;
+		border: 1rpx solid #F21A1C;
+		font-size: 16rpx;
+		font-family: PingFang SC, PingFang SC;
+		font-weight: 400;
+		color: #F21A1C;
+		line-height: 24rpx;
+		text-align: center;
+		margin: 6rpx 0 12rpx 0;
+	}
+
+	.goodsInfo {
+		display: flex;
+		align-items: center;
+		margin-bottom: 10rpx;
+
+		.tip {
+			height: 28rpx;
+			font-size: 20rpx;
+			font-family: PingFang SC, PingFang SC;
+			font-weight: 400;
+			color: #494949;
+			line-height: 28rpx;
+			padding: 0 10rpx;
+		}
+
+		.oneTip {
+			border-right: 1rpx solid #C9C9C9;
+		}
+
+		.twoTip {
+			border-right: 1rpx solid #C9C9C9;
+		}
+	}
+
+	.delPrice {
+		font-size: 20rpx;
+		font-weight: 500;
+		color: #F21A1C;
+	}
+
+	.evaluate {
+		height: 28rpx;
+		font-size: 20rpx;
+		font-family: PingFang SC, PingFang SC;
+		font-weight: 400;
+		color: #949494;
+		line-height: 28rpx;
+		margin-bottom: 20rpx;
+	}
+
+	.goodsType {
+		background-color: #fff;
+		width: 100%;
+		height: 76rpx;
+
+		.typeList {
+			margin: 0rpx 0 12rpx 36rpx;
+			white-space: nowrap;
+
+			.typeItem {
+				margin-left: 8rpx;
+				display: inline-block;
+				width: 124rpx;
+				height: 54rpx;
+				border-radius: 82rpx 82rpx 82rpx 82rpx;
+				opacity: 1;
+				// border: 2rpx solid #F22029;
+				font-size: 24rpx;
+				font-family: PingFang SC, PingFang SC;
+				font-weight: 400;
+				line-height: 54rpx;
+				text-align: center;
+			}
+		}
+	}
 </style>
\ No newline at end of file
diff --git a/static/detail/buy.png b/static/detail/buy.png
new file mode 100644
index 0000000..029b60a
Binary files /dev/null and b/static/detail/buy.png differ
diff --git a/static/detail/car.png b/static/detail/car.png
new file mode 100644
index 0000000..557805c
Binary files /dev/null and b/static/detail/car.png differ
diff --git a/static/detail/collect.png b/static/detail/collect.png
new file mode 100644
index 0000000..e01499c
Binary files /dev/null and b/static/detail/collect.png differ
diff --git a/static/detail/copy.png b/static/detail/copy.png
new file mode 100644
index 0000000..887168d
Binary files /dev/null and b/static/detail/copy.png differ
diff --git a/static/detail/customer.png b/static/detail/customer.png
new file mode 100644
index 0000000..c4a0ef9
Binary files /dev/null and b/static/detail/customer.png differ
diff --git a/static/detail/priceback.png b/static/detail/priceback.png
new file mode 100644
index 0000000..d2353dd
Binary files /dev/null and b/static/detail/priceback.png differ
diff --git a/static/detail/pro.png b/static/detail/pro.png
new file mode 100644
index 0000000..813cfa1
Binary files /dev/null and b/static/detail/pro.png differ
diff --git a/static/detail/rightIcon.png b/static/detail/rightIcon.png
new file mode 100644
index 0000000..8120b1f
Binary files /dev/null and b/static/detail/rightIcon.png differ
diff --git a/static/detail/share.png b/static/detail/share.png
new file mode 100644
index 0000000..19e2aca
Binary files /dev/null and b/static/detail/share.png differ
diff --git a/static/detail/tip.png b/static/detail/tip.png
new file mode 100644
index 0000000..45fce69
Binary files /dev/null and b/static/detail/tip.png differ
diff --git a/static/detail/tv.png b/static/detail/tv.png
new file mode 100644
index 0000000..7a601d5
Binary files /dev/null and b/static/detail/tv.png differ
diff --git a/static/detail/ys.png b/static/detail/ys.png
new file mode 100644
index 0000000..2d90aa3
Binary files /dev/null and b/static/detail/ys.png differ