From 25347a0061960dc547dfc13cf976d8c38e5b2f22 Mon Sep 17 00:00:00 2001
From: mullins <476823686@qq.com>
Date: Sat, 6 Jun 2020 19:41:01 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages.json                                   |   8 +-
 src/pages/details/details.vue                    | 145 +++++++++++++++++++++++
 src/pages/frameDetail/components/BottomSheet.vue |   2 +-
 src/pages/frameDetail/frameDetail.vue            |  58 +--------
 src/store/modules/read.js                        |  46 +++----
 5 files changed, 177 insertions(+), 82 deletions(-)
 create mode 100644 src/pages/details/details.vue

diff --git a/src/pages.json b/src/pages.json
index 5b6074c..bde8e4b 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -37,6 +37,12 @@
             }
         },
         {
+            "path": "pages/details/details",
+            "style": {
+                "navigationBarTitleText": "产品详情"
+            }
+        },
+        {
             "path": "pages/myOrderPaying/myOrderPaying",
             "style": {
                 "navigationBarTitleText": "我的订单"
@@ -169,7 +175,7 @@
             },
             {
                 "name": "产品详情",
-                "path": "pages/frameDetail/frameDetail",
+                "path": "pages/details/details",
                 "query": ""
             },
             {
diff --git a/src/pages/details/details.vue b/src/pages/details/details.vue
new file mode 100644
index 0000000..fbc9c9c
--- /dev/null
+++ b/src/pages/details/details.vue
@@ -0,0 +1,145 @@
+<template>
+  <view class="container">
+    <view class="info">
+      <!-- 轮播图 -->
+      <swiper
+        class="swiperImage"
+        :indicator-dots="true"
+        :autoplay="true"
+        :interval="4000"
+        :duration="500"
+      >
+        <swiper-item
+          v-for="(item, index) in goodInfo.pics"
+          :key="index"
+        >
+          <image
+            :src="item"
+            mode="scaleToFill"
+          ></image>
+        </swiper-item>
+      </swiper>
+      <!-- 产品价格及购买人数 -->
+      <view class="info_pay">
+        ￥{{goodInfo.priceArea.Min_Price || '暂无'}}
+        <span class="info_pay_number">{{goodInfo.trade_num || '暂无'}}人购买过</span>
+      </view>
+      <!-- 产品名称 -->
+      <view class="info_name">
+        <span>{{goodInfo.p_name || '暂无'}}</span>
+      </view>
+      <!-- 产品售后信息 -->
+      <view class="info_after">
+        <span>支持7天无理由退货</span>
+        <span>顺丰发货</span>
+        <span>30天质量保证</span>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import store from '@/store'
+// import BottomSheet from '@/components/BottomSheet.vue'
+
+export default {
+  components: {},
+  data () {
+    return {
+      pid: 7, // 产品ID
+    }
+  },
+  onLoad({ pid = this.pid, sk_id: skId }) {
+    this.pid = pid
+
+    // 获取产品详情
+    this.getDetails({ pid, skId })
+  },
+  computed: {
+
+  },
+  methods: {
+    // 获取产品详情
+    getDetails({ pid, skId }) {
+      store.dispatch('read/fetch', {
+        pid,
+        sk_id: skId,
+      }).then((res) => {
+        // 储存规格参数
+        this.saveGlassInfo([
+          res.goodInfo.frame_width,
+          res.goodInfo.glass_heig,
+          res.goodInfo.glass_height,
+          res.goodInfo.nose_width,
+          res.goodInfo.leg_long,
+          res.goodInfo.weight,
+        ],
+        )
+      })
+    },
+    saveGlassInfo(infoArray) {
+
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.container {
+  background-color: #f8f8f8;
+  font-family: "PingFangSC-Regular";
+  // 板块样式
+  > view {
+    background: #ffffff;
+    margin-bottom: 10px;
+    padding: 8px 20px 8px 20px;
+    box-sizing: border-box;
+  }
+  // 信息板块
+  .info {
+    // 轮播图
+    .swiperImage {
+      width: 684rpx;
+      height: 480rpx;
+      image {
+        max-width: 100%;
+        max-height: 100%;
+        border-radius: 16rpx;
+      }
+    }
+    // 产品价格及购买人数
+    .info_pay {
+      color: #eb5d3b;
+      font-size: 18px;
+      margin-top: 5px;
+      font-family: "PingFangSC-Semibold";
+      display: flex;
+      justify-content: space-between;
+      .info_pay_number {
+        color: #999;
+        font-size: 14px;
+      }
+    }
+    // 产品名称
+    .info_name {
+      font-size: 16px;
+      font-family: "PingFangSC-Semibold";
+      margin-top: 5px;
+      > span {
+        height: 14px;
+        margin-right: 10px;
+      }
+    }
+    // 售后服务
+    .info_after {
+      font-size: 10px;
+      color: #999;
+      margin-top: 5px;
+      > span {
+        height: 14px;
+        margin-right: 10px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/frameDetail/components/BottomSheet.vue b/src/pages/frameDetail/components/BottomSheet.vue
index b214ec9..2a281dd 100644
--- a/src/pages/frameDetail/components/BottomSheet.vue
+++ b/src/pages/frameDetail/components/BottomSheet.vue
@@ -20,7 +20,7 @@
                 mode="aspectFill"
                 style="width: 188rpx;height: 168rpx;"
               ></image>
-            </view>
+            </view>∂
             <view class="infoRight">
               <text class="goodName">{{goodInfo.p_name}}</text>
               <text class="remarks">支持7天无理由退货 顺丰发货</text>
diff --git a/src/pages/frameDetail/frameDetail.vue b/src/pages/frameDetail/frameDetail.vue
index f57749d..a8eae62 100644
--- a/src/pages/frameDetail/frameDetail.vue
+++ b/src/pages/frameDetail/frameDetail.vue
@@ -23,29 +23,13 @@
       <view class="D1_name"><span class="D1_name1">{{goodInfo.p_name || '暂无'}}</span></view>
       <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
     </view>
-    <view
+    <!-- <view
       class="D2"
       v-if="updateGoodType == 2 || updateGoodType == 4"
     >
       <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
       <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view>
       <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
-    </view>
-    <!-- <view
-      class="D2"
-      v-if="updateGoodType == 1"
-    >
-      <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
-      <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view>
-      <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view>
-    </view>
-    <view
-      class="D2"
-      v-if="updateGoodType == 3"
-    >
-      <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
-      <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view>
-      <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
     </view> -->
     <view class="D3">
       <view class="screenBar">
@@ -490,47 +474,7 @@ export default {
         fail: (error) => { console.log('跳转参数选择失败======>', error) },
         complete: () => { console.log('goPerchase') },
       })
-      // break
-      // case '2':
-      //   uni.navigateTo({
-      //     url: '../detailStandard/detailStandard_k',
-      //     success: res => {},
-      //     fail: () => {},
-      //     complete: () => {}
-      //   })
-      //   break
-      // case '3':
-      //   uni.navigateTo({
-      //     url: '../purchaseLenses/purchaseLenses',
-      //     success: res => {},
-      //     fail: () => {},
-      //     complete: () => {}
-      //   })
-      //   break
-      // case '4':
-      //   uni.navigateTo({
-      //     url: '../detailStandard/detailStandard_sun',
-      //     success: res => {},
-      //     fail: () => {},
-      //     complete: () => {}
-      //   })
-      //   break
-      // default :
-      //   break
-      // }
     },
-    // 加入购物车
-    // addCart () {
-    //   store.dispatch('cart/addCart', {
-    //     uid: this.$store.state.user.userInfo.uid,
-    //     openid: this.$store.state.user.userInfo.openid,
-    //     pid: this.pid,
-    //     checkedSKU: {},
-    //   })
-    //   store.dispatch('cart/getCartList', {
-    //     uid: this.$store.state.user.userInfo.uid, // 用户id
-    //   })
-    // },
     tabChange (e) {
       if (this.current !== e) {
         this.current = e
diff --git a/src/store/modules/read.js b/src/store/modules/read.js
index 72d1382..a2a7e85 100644
--- a/src/store/modules/read.js
+++ b/src/store/modules/read.js
@@ -2,57 +2,57 @@ import urlAlias from '../url'
 import request from '../request'
 
 const {
-  read
+  read,
 } = urlAlias
 
 const state = {
-  goodInfo: {}
+  goodInfo: {},
 }
 
 const mutations = {
   INIT: (state, goodInfo) => {
     state.goodInfo = goodInfo
-  }
+  },
 }
 
 const actions = {
   fetch({ commit }, param) {
-	  // 由于购物车和用户推荐的价格要根据sk_id来获取
-	  const arg=Object.assign({},param)
-	  delete param.sk_id
+    // 由于购物车和用户推荐的价格要根据sk_id来获取
+    const arg = Object.assign({}, param)
+    delete param.sk_id
     return new Promise((resolve, reject) => request({
       url: read,
       data: param,
       success: (res) => {
-		console.log('readParm====>',arg)  
-		console.log('read====>',res.data.data)
-		// 用一个新的对象来接收sk_id找的值
-		const Res=Object.assign({},res.data.data)
-		if(arg.sk_id!=undefined){
-			for (let i = 0; i < res.data.data.skuList.length; i++) {
-				if(res.data.data.skuList[i].sk_id==arg.sk_id){
-					Res.p_sale_price= res.data.data.skuList[i].real_price
-					console.log('陈工了')
-				}
-			}
-		}
-		console.log(Res)
+        console.log('readParm====>', arg)
+        console.log('read====>', res.data.data)
+        // 用一个新的对象来接收sk_id找的值
+        const Res = Object.assign({}, res.data.data)
+        if (arg.sk_id !== undefined) {
+          for (let i = 0; i < res.data.data.skuList.length; i++) {
+            if (res.data.data.skuList[i].sk_id === arg.sk_id) {
+              Res.p_sale_price = res.data.data.skuList[i].real_price
+              console.log('陈工了')
+            }
+          }
+        }
+        console.log(Res)
         commit('INIT', Res)
-        resolve()
+        resolve(res)
       },
       fail: (res) => {
         console.log('fail status === > ', res)
       },
       complete: (res) => {
         console.log('complete status === > ', res)
-      }
+      },
     }))
-  }
+  },
 }
 
 export default {
   namespaced: true,
   state,
   mutations,
-  actions
+  actions,
 }
-- 
2.0.0