货品详情

src/components/iphFixedBottom.vue

@@ -0,0 +1,43 @@
+<!--
+ * @Descripttion: 固定底部组件
+ * @version: 1.0.0
+ * @Author: dream
+ * @Date: 2021-03-29 18:07:15
+ * @LastEditors: dream
+ * @LastEditTime: 2021-03-29 19:51:03
+-->
+<template>
+	<view class="iph-fixed-bottom-main">
+    <slot />
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'iphFixedBottom',
+  mounted () {
+    this.getHeight()
+  },
+  methods: {
+    getHeight () {
+      const view = uni.createSelectorQuery().in(this).select('.iph-fixed-bottom-main')
+      view.fields({
+        size: true
+      }, data => {
+        console.log(data.height)
+        this.$emit('getHeight', data.height)
+      }).exec()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.iph-fixed-bottom-main {
+  position: fixed;
+  bottom: 0;
+  padding-bottom: env(safe-area-inset-bottom);
+  width: 100%;
+  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
+}
+</style>

src/pageSubs/goods/detail.vue

@@ -4,29 +4,184 @@
  * @Author: dream
  * @Date: 2021-03-26 13:48:37
  * @LastEditors: dream
- * @LastEditTime: 2021-03-26 14:00:26
+ * @LastEditTime: 2021-03-29 19:55:19
 -->
 <template>
-	<view>Goods Detail</view>
+	<view class="good-detail-main" :style="{ paddingBottom: `${pagePaddingBottom}px`}">
+    <view class="good-overview iph-bg-fff">
+      <image class="good-img" :src="detail.img" mode="widthFix" />
+      <view class="good-info">
+        <view class="u-font-32 u-line-44 bold">趣包1300纸杯+165盖子</view>
+        <view class="good-info-spec u-m-t-16 u-line-36 u-flex">
+          <view class="u-flex-1">规格：1箱/1000套</view>
+          <view>库存：30</view>
+        </view>
+        <view class="u-flex u-m-t-24 u-col-bottom">
+          <view class="good-price bold">
+            <text class="u-font-32 u-m-b-4">¥</text>
+            <text class="u-font-44 u-line-60">468</text>
+          </view>
+          <view class="good-orgin-price u-m-b-8 u-m-l-8 u-font-22 text-through">¥979</view>
+        </view>
+      </view>
+    </view>
+    <view class="good-block u-m-t-16 iph-bg-fff">
+      <view class="block-title">商品详情</view>
+      <view class="block-line">
+        <view class="block-label">商品编码：</view>
+        <view class="block-content">暂无</view>
+      </view>
+      <view class="block-line">
+        <view class="block-label">订货规则：</view>
+        <view class="block-content">1件起订</view>
+      </view>
+      <view class="block-line">
+        <view class="block-label">商品描述：</view>
+        <view class="block-content">描述内容描述内容描述内容描述内容描述内容描述内容</view>
+      </view>
+    </view>
+    <view class="good-block u-m-t-16 iph-bg-fff">
+      <view class="block-title">仓库信息</view>
+      <view class="block-line">
+        <view class="block-label">仓库名称：</view>
+        <view class="block-content">云东仓</view>
+      </view>
+      <view class="block-line">
+        <view class="block-label">仓库地址：</view>
+        <view class="block-content">浙江省杭州市滨江区伟业路8号楼3</view>
+      </view>
+    </view>
+    <view class="good-block u-m-t-16 iph-bg-fff">
+      <view class="u-flex u-row-between">
+        <view class="block-title">商家信息</view>
+        <view class="block-more">查看更多</view>
+      </view>
+      <view class="block-line">
+        <view class="block-label">商家名称：</view>
+        <view class="block-content">LCW旗舰店</view>
+      </view>
+      <view class="block-line">
+        <view class="block-label">商家描述：</view>
+        <view class="block-content">暂无</view>
+      </view>
+    </view>
+    <view class="good-block u-m-t-16 iph-bg-fff">
+      <view class="block-title">说明</view>
+      <view class="block-line">
+        <view class="block-label">商品图片说明：</view>
+        <view class="block-content">因拍摄过程中的灯光，相机等器材原因，可能造成图片和产品实际颜色存在差异，颜色请以实物为准！</view>
+      </view>
+      <view class="block-line">
+        <view class="block-label">滑线价格：</view>
+        <view class="block-content">商品划线价格为该商品曾经展示过的销售价，并非原价，仅供参考。</view>
+      </view>
+      <view class="block-line">
+        <view class="block-label">未滑线价格：</view>
+        <view class="block-content">商品的实际标价，即商家能给出的优惠价会因折扣的变动而发生变化，最终以订货确认支付页的价格为准。</view>
+      </view>
+      <view class="block-tip">注：此说明仅出现价格比较时有效，最终解释权由趣订所有</view>
+    </view>
+    <iph-fixed-bottom @getHeight="getFooterHeight">
+      <view class="good-detail-footer u-flex iph-bg-fff">
+        <view class="icon iph-icon-shopcat"></view>
+        <view class="footer-price u-m-l-24 u-flex u-flex-1">
+          <view class="u-font-22 u-m-r-4 u-line-32">¥</view>
+          <view class="u-font-36 u-ling-50">0</view>
+        </view>
+        <button class="add-shop-btn">加入购物车</button>
+      </view>
+    </iph-fixed-bottom>
+  </view>
 </template>
 
 <script>
+import iphFixedBottom from '@/components/iphFixedBottom.vue'
 export default {
+  components: { iphFixedBottom },
   name: 'goodsDetail',
   data () {
     return {
-
+      pagePaddingBottom: 0,
+      detail: {
+        img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=288400877,2749955263&fm=26&gp=0.jpg'
+      }
     }
   },
-  onLoad () {
-
-  },
   methods: {
-
+    getFooterHeight (val) {
+      this.pagePaddingBottom = val + 8
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
+.good-detail-main {
+  .good-overview {
+    .good-img {
+      width: 100%;
+      height: 640px;
+    }
+    .good-info {
+      padding: 32px 32px 24px 32px;
+      .good-info-spec {
+        color: $iph-desc-text;
+      }
+      .good-price {
+        color: $iph-main-price-text;
+      }
+      .good-orgin-price {
+        color: $iph-disable-price-text;
+      }
+    }
+  }
+  .good-block {
+    padding: 32px 32px 40px 32px;
+    .block-title {
+      margin-bottom: 8px;
+      line-height: 44px;
+      font-size: 32px;
+      font-weight: 500;
+    }
+    .block-more {
+      color: $u-type-primary;
+    }
+    .block-line {
+      display: flex;
+      align-items: flex-start;
+      margin-top: 16px;
+      .block-label {
+        width: 182px;
+        color: $iph-desc-text;
+      }
+      .block-content {
+        flex: 1;
+      }
+    }
+    .block-tip {
+      margin-top: 40px;
+      color: $u-type-primary;
+    }
+  }
+  .good-detail-footer {
+    padding: 24px 32px;
+    .icon {
+      width: 72px;
+      height: 72px;
+    }
+    .footer-price {
+      font-weight: 500;
+    }
+    .add-shop-btn {
+      padding: 14px 32px;
+      width: 226px;
+      height: 72px;
+      border-radius: 38px;
+      font-size: 32px;
+      line-height: 44px;
+      color: $iph-standby-text;
+      background-color: $u-type-primary;
+    }
+  }
+}
 </style>

src/pages.json

@@ -170,7 +170,7 @@
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "趣订",
-		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8"
+		"navigationBarBackgroundColor": "#FFFFFF",
+		"backgroundColor": "#F5F5F5"
 	}
 }

src/pages/goods/goods.vue

@@ -4,7 +4,7 @@
  * @Author: dream
  * @Date: 2021-03-25 15:55:15
  * @LastEditors: dream
- * @LastEditTime: 2021-03-28 15:42:14
+ * @LastEditTime: 2021-03-29 14:51:43
 -->
 <template>
 	<view class="goods-main">
@@ -29,6 +29,7 @@
             <iph-good-card
               :value="item"
               :isShowEmpty="!item.stock"
+              @cardClick="toGoodDetail"
             />
           </view>
         </block>
@@ -87,7 +88,13 @@ export default {
       return height
     }
   },
-  methods: {}
+  methods: {
+    toGoodDetail () {
+      uni.navigateTo({
+        url: '/pageSubs/goods/detail'
+      })
+    }
+  }
 }
 </script>
 

src/uni.scss

@@ -25,12 +25,25 @@ $iph-black-bg: #000000;
   text-decoration: line-through;
 }
 
+.u-font-44 {
+  font-size: 44px;
+}
+
+.u-line-36 {
+  line-height: 36px;
+}
 .u-line-40 {
   line-height: 40px;
 }
+.u-line-44 {
+  line-height: 44px;
+}
 .u-line-50 {
   line-height: 50px;
 }
+.u-line-60 {
+  line-height: 60px;
+}
 
 .primary-color {
   color: $u-type-primary;
@@ -45,3 +58,8 @@ $iph-black-bg: #000000;
   background: url('~@/static/common/icon_dc_jia.png') no-repeat center center;
   background-size: contain;
 }
+
+.iph-icon-shopcat {
+  background: url('~@/static/common/icon_gwc_bz.png') no-repeat center center;
+  background-size: contain;
+}