From 530bb7e836a6337c7d71e8248779fb48a55b10a0 Mon Sep 17 00:00:00 2001
From: mullins <476823686@qq.com>
Date: Sun, 7 Jun 2020 21:40:53 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E8=AF=A6=E6=83=85=E9=A1=B5-?=
 =?UTF-8?q?=E5=95=86=E5=93=81=E4=BB=8B=E7=BB=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages.json                                 |  53 +++--
 src/pages/details/components/Introduce.vue     | 148 ++++++++++++
 src/pages/details/components/Specification.vue |  14 ++
 src/pages/details/details.vue                  | 303 ++++++++++++++++++++++++-
 src/store/modules/details.js                   |  81 ++++++-
 5 files changed, 564 insertions(+), 35 deletions(-)
 create mode 100644 src/pages/details/components/Introduce.vue
 create mode 100644 src/pages/details/components/Specification.vue

diff --git a/src/pages.json b/src/pages.json
index b786336..29ebbc9 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -132,25 +132,25 @@
                 "navigationBarTitleText": "验光数据"
             }
         }
-   ],
-  "subpackages": [
-	 {
-	   "root": "pages/refundment",
-	   "pages": [
-		 "pages/refundment/refundWays",
-		 "pages/refundment/refundment",
-		 "pages/refundProgress/refundProgress"
-	   ]
-	 },
-	 {
-	   "root": "pages/address",
-	   "name": "pack2",
-	   "pages": [
-	 		 "pages/address/addAddress",
-	 		 "pages/address/addressList"
-	   ]
-	 }
-   ],
+    ],
+    "subpackages": [
+        {
+            "root": "pages/refundment",
+            "pages": [
+                "pages/refundment/refundWays",
+                "pages/refundment/refundment",
+                "pages/refundProgress/refundProgress"
+            ]
+        },
+        {
+            "root": "pages/address",
+            "name": "pack2",
+            "pages": [
+                "pages/address/addAddress",
+                "pages/address/addressList"
+            ]
+        }
+    ],
     "globalStyle": {
         "navigationBarTextStyle": "black",
         "navigationBarTitleText": "uni-app",
@@ -186,11 +186,11 @@
     "condition": {
         "current": 0,
         "list": [
-			// {
-			//     "name": "首页",
-			//     "path": "pages/test/index",
-			//     "query": ""
-			// },
+            // {
+            //     "name": "首页",
+            //     "path": "pages/test/index",
+            //     "query": ""
+            // },
             {
                 "name": "首页",
                 "path": "pages/index/index",
@@ -202,6 +202,11 @@
                 "query": ""
             },
             {
+                "name": "旧版产品详情",
+                "path": "pages/frameDetail/frameDetail",
+                "query": ""
+            },
+            {
                 "name": "镜片、美瞳参数选择",
                 "path": "pages/purchaseLenses/purchaseLenses",
                 "query": ""
diff --git a/src/pages/details/components/Introduce.vue b/src/pages/details/components/Introduce.vue
new file mode 100644
index 0000000..6529807
--- /dev/null
+++ b/src/pages/details/components/Introduce.vue
@@ -0,0 +1,148 @@
+<template>
+  <view class="introduce">
+    <!-- 迭代时建议配合接口修改 为数组 -->
+    <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0">
+      <view>
+        年龄：<view
+          v-for="(item,index) in tag.prod_tag_age"
+          :key="index"
+        >
+          {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text>
+        </view>
+      </view>
+    </view>
+    <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0">
+      <view>
+        颜色：<view
+          v-for="(item,index) in tag.prod_tag_color"
+          :key="index"
+        >
+          {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text>
+        </view>
+      </view>
+    </view>
+    <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0">
+      <view>
+        脸型：<view
+          v-for="(item,index) in tag.prod_tag_face"
+          :key="index"
+        >
+          {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text>
+        </view>
+      </view>
+    </view>
+    <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0">
+      <view>
+        赠品：<view
+          v-for="(item,index) in tag.prod_tag_freesend"
+          :key="index"
+        >
+          {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text>
+        </view>
+      </view>
+    </view>
+    <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0">
+      <view>
+        保险：<view
+          v-for="(item,index) in tag.prod_tag_insurance"
+          :key="index"
+        >
+          {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text>
+        </view>
+      </view>
+    </view>
+    <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0">
+      <view>
+        材质：<view
+          v-for="(item,index) in tag.prod_tag_metal"
+          :key="index"
+        >
+          {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text>
+        </view>
+      </view>
+    </view>
+    <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0">
+      <view>
+        个性：<view
+          v-for="(item,index) in tag.prod_tag_personal"
+          :key="index"
+        >
+          {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text>
+        </view>
+      </view>
+    </view>
+    <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0">
+      <view>
+        场景：<view
+          v-for="(item,index) in tag.prod_tag_sense"
+          :key="index"
+        >
+          {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text>
+        </view>
+      </view>
+    </view>
+    <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0">
+      <view>
+        性别：<view
+          v-for="(item,index) in tag.prod_tag_sex"
+          :key="index"
+        >
+          {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text>
+        </view>
+      </view>
+    </view>
+    <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0">
+      <view>
+        风格：<view
+          v-for="(item,index) in tag.prod_tag_style"
+          :key="index"
+        >
+          {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text>
+        </view>
+      </view>
+    </view>
+    <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0">
+      <view>
+        重量：<view
+          v-for="(item,index) in tag.prod_tag_weight"
+          :key="index"
+        >
+          {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    tag: Object,
+  },
+  created() {
+    console.log('lalal')
+    console.log('tag', this)
+  },
+  updated() {
+    console.log('lalal-2')
+    console.log('tag-2', this.tag)
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.introduce {
+  margin-bottom: 4px;
+  view {
+    display: flex;
+    align-content: center;
+    font-size: 14px;
+    color: #333333;
+  }
+  span {
+    margin-left: 6px;
+    margin-right: 5px;
+    font-family: "PingFangSC-Regular";
+  }
+}
+</style>
diff --git a/src/pages/details/components/Specification.vue b/src/pages/details/components/Specification.vue
new file mode 100644
index 0000000..f6ac997
--- /dev/null
+++ b/src/pages/details/components/Specification.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/pages/details/details.vue b/src/pages/details/details.vue
index 094f660..726f27f 100644
--- a/src/pages/details/details.vue
+++ b/src/pages/details/details.vue
@@ -1,5 +1,6 @@
 <template>
   <view class="container">
+    <!-- 基础信息 -->
     <view class="basic_info">
       <!-- 轮播图 -->
       <swiper
@@ -42,18 +43,46 @@
         <span>30天质量保证</span>
       </view>
     </view>
+    <!-- 详细信息 -->
     <view class="detail_info">
       <!-- 详细信息菜单 -->
       <view class="screen_bar">
         <view
-          v-for="item in screenItems"
-          :key="item.current"
-          @click="tabChange(item.current)"
+          v-for="(item, index) in screenItems"
+          :key="index"
+          @click="tabChange(index)"
         >
           <view
             class="screen_item"
-            v-bind:class="{ item_active: item_current === item.current }"
-          >{{ item.text || '暂无' }}</view>
+            v-bind:class="{ item_active: item_current === index }"
+          >{{ screenItems[index] || '暂无' }}</view>
+        </view>
+      </view>
+      <!-- 商品介绍 -->
+      <view
+        class="screen_item"
+        v-if="item_current === 0"
+      >
+        <Introduce :tag="tag" />
+      </view>
+      <!-- 规格参数 -->
+      <view
+        class="screen_item"
+        v-if="item_current === 1"
+      >
+        <view class="specification">
+          <view
+            class="spe_item"
+            v-for="(item, index) in specification"
+            :key="index"
+          >
+            <image
+              class="spe_image"
+              v-bind:src="item.img"
+            ></image>
+            <span>{{item.standard || '暂无'}}</span>
+            <span>{{item.slength || '暂无'}}</span>
+          </view>
         </view>
       </view>
       <!-- 售后保障 -->
@@ -64,16 +93,89 @@
         <AfterSails />
       </view>
     </view>
+    <!-- 评价 -->
+    <template v-if="item_current !== 2">
+      <view class="evaluate">
+        <!-- 标题 -->
+        <view class="evaluate_title">
+          <view><span>宝贝好评率</span><span class="title_rate">{{evaluate.rate}}</span></view>
+          <!-- 星星 -->
+          <view class="evaluate_star">
+            <view
+              class="star"
+              v-for="(item, index) in evaluate.star"
+              :key="index"
+            >
+              <image
+                src="../../static/img/detail/d_star.png"
+                mode="aspectFill"
+                style="height: 26rpx; width: 28rpx;"
+              ></image>
+            </view>
+          </view>
+        </view>
+        <!-- 标签 -->
+        <view class="evaluate_tag">
+          <view
+            v-for="(item, index) in evaluate.tag"
+            :key="index"
+          >{{item.name}}</view>
+        </view>
+      </view>
+    </template>
+    <!-- 商品详情页 -->
+    <template v-if="current !==2">
+      <view class="more_info">
+        <view
+          class="more_fixed1"
+          @click="consolg(goodInfo.prodIntro1)"
+        >
+          <image src="/static/img/detail/hr.png"></image>
+          <view>商品详情</view>
+          <image src="/static/img/detail/hr.png"></image>
+        </view>
+        <view
+          class="more_all"
+          v-html="more"
+        >
+        </view>
+      </view>
+    </template>
+    <!-- 底部菜单 -->
+    <view class="menu">
+      <view
+        @tap="toCart()"
+        class="menu_1"
+      >
+        <view class="cart_icon">
+          <image src="/static/tab-cart.png" />
+          <text>{{cartNumber}}</text>
+        </view>
+        <view class="menu_image">购物车</view>
+      </view>
+      <view class="menu_2">
+        <view
+          class="menu_input"
+          @tap="showBottom(1)"
+        >加入购物车</view>
+        <view
+          class="menu_now"
+          @click="showBottom(2)"
+        >立即购买</view>
+      </view>
+    </view>
   </view>
 </template>
 
 <script>
 import store from '@/store'
-import AfterSails from './components/AfterSails'
+import Introduce from './components/Introduce' // 商品介绍基本信息
+import AfterSails from './components/AfterSails' // 售后保障组件
 // import BottomSheet from '@/components/BottomSheet.vue'
 
 export default {
   components: {
+    Introduce,
     AfterSails,
   },
   data () {
@@ -83,18 +185,21 @@ export default {
       // 详细信息菜单
       item_current: 0,
       screenItems: [
-        { current: 0, text: '商品介绍' },
-        { current: 1, text: '规格参数' },
-        { current: 2, text: '售后保障' },
+        '商品介绍',
+        '规格参数',
+        '售后保障',
       ],
     }
   },
   onLoad({ pid = this.pid, sk_id: skId }) {
+    // 根据页面传参请求页面数据
     this.pid = pid
     this.skId = skId
 
     // 获取产品详情
     this.getDetails({ pid, skId })
+    // 获取购物车数据
+    this.getCartNum()
   },
   computed: {
     // 获取轮播图数据
@@ -105,6 +210,26 @@ export default {
     goodsInfo() {
       return this.$store.state.details.goodsInfo
     },
+    // 商品介绍商品标签
+    tag() {
+      return this.$store.state.details.tag
+    },
+    // 规格参数
+    specification() {
+      return this.$store.state.details.specification
+    },
+    // 评价
+    evaluate() {
+      return this.$store.state.details.evaluate
+    },
+    // 商品详情
+    more() {
+      return this.$store.state.details.more
+    },
+    // 购物车数目
+    cartNumber() {
+      return this.$store.state.details.cartNumber
+    },
   },
   methods: {
     // 获取产品详情
@@ -114,6 +239,10 @@ export default {
         sk_id: skId,
       })
     },
+    // 获取购物车数目
+    getCartNum() {
+      store.dispatch('details/getCartNumber')
+    },
     // 切换详细信息菜单
     tabChange (e) {
       if (this.current !== e) {
@@ -208,6 +337,7 @@ export default {
   }
   // 详细信息
   .detail_info {
+    margin-bottom: 20rpx;
     .screen_bar {
       width: 670rpx;
       margin-top: 20rpx;
@@ -228,6 +358,161 @@ export default {
       color: #333333;
       display: flex;
       transition: all 0.2s;
+      // 规格参数
+      .specification {
+        margin-bottom: 4px;
+        .spe_item {
+          image {
+            width: 50px;
+            height: 25px;
+            margin-right: 6px;
+            vertical-align: middle;
+          }
+          span {
+            margin-left: 24rpx;
+          }
+        }
+      }
+    }
+    //
+  }
+  // 宝贝好评率
+  .evaluate {
+    .evaluate_title {
+      font-size: 14px;
+      color: #333333;
+      display: flex;
+      justify-content: space-between;
+      .title_rate {
+        margin-left: 10rpx;
+      }
+      .evaluate_star {
+        width: 90px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      view {
+        font-size: 14px;
+        color: #333333;
+        font-weight: bold;
+      }
+    }
+    .evaluate_tag {
+      view {
+        display: inline-block;
+        margin-right: 20rpx;
+        min-width: 180rpx;
+        margin-top: 10px;
+        height: 48rpx;
+        background: #f2f2f2;
+        border-radius: 2px;
+        font-family: PingFangSC-Regular;
+        font-size: 12px;
+        color: #666666;
+        letter-spacing: -0.23px;
+        text-align: center;
+        padding: 0 48rpx;
+        line-height: 48rpx;
+      }
+    }
+  }
+  // 商品详情
+  .more_info {
+    .more_fixed1 {
+      display: flex;
+      justify-content: space-between;
+      align-content: center;
+      margin-bottom: 12px;
+      view {
+        font-size: 14px;
+        color: #333333;
+        font-weight: bold;
+        font-family: "PingFangSC-Medium";
+        line-height: 24px;
+      }
+      image {
+        width: 240rpx;
+        height: 3px;
+        margin-top: 10px;
+      }
+    }
+    .more_all {
+      width: 100%;
+      margin-top: 30rpx;
+      margin-right: 30rpx;
+      margin-bottom: 180rpx;
+      font-family: "PingFangSC-Regular";
+    }
+  }
+  // 菜单
+  .menu {
+    position: fixed;
+    bottom: 0;
+    height: 74px;
+    width: 100%;
+    background: #ffffff;
+    padding: 20px 20px 8px 20px;
+    font-family: "PingFangSC-Regular";
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    align-content: center;
+    margin: 0;
+    .menu_1 {
+      width: 20%;
+      height: 100%;
+      text-align: center;
+      color: #989898;
+      .cart_icon {
+        position: relative;
+        text {
+          position: absolute;
+          color: white;
+          font-size: 17px;
+          background-color: red;
+          min-height: 24px;
+          min-width: 24px;
+          line-height: 24px;
+          right: -12%;
+          top: -12px;
+          text-align: center;
+          border-radius: 24px;
+          padding: 2px;
+        }
+      }
+    }
+    image {
+      width: 42%;
+      height: 26px;
+    }
+    .menu_image {
+      font-size: 12px;
+      text-align: center;
+    }
+    .menu_2 {
+      width: 74%;
+      height: 86%;
+      display: grid;
+      grid-template-columns: 50% 50%;
+    }
+    .menu_input {
+      display: inline-flex;
+      align-items: center;
+      justify-content: space-around;
+      background: #fff0ec;
+      font-size: 16px;
+      color: #ff6b4a;
+      border-radius: 20px 0 0 20px;
+    }
+    .menu_now {
+      display: inline-flex;
+      align-items: center;
+      justify-content: space-around;
+      background: #ff6b4a;
+      font-size: 16px;
+      color: #ffffff;
+      border-radius: 0 20px 20px 0;
     }
   }
 }
diff --git a/src/store/modules/details.js b/src/store/modules/details.js
index 22365ad..46d0d18 100644
--- a/src/store/modules/details.js
+++ b/src/store/modules/details.js
@@ -3,6 +3,7 @@ import request from '../request'
 
 const {
   read,
+  cartList,
 } = urlAlias
 
 const state = {
@@ -17,21 +18,74 @@ const state = {
     discountPrice: undefined,
     tradeNumber: undefined,
   },
+  // 商品介绍
+  tag: {
+    prod_tag_style: [{
+      label: '青春学子风',
+      value: '54',
+    }],
+  },
+  // 规格参数
+  specification: [
+    { key: 'frame_width', img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' },
+    { key: 'glass_width', img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' },
+    { key: 'glass_height', img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' },
+    { key: 'nose_width', img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' },
+    { key: 'leg_long', img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' },
+    { key: 'weight', img: '/static/img/detail/d7.png', standard: '框架重', slength: '19克（grams）' },
+  ],
+  // 评价
+  evaluate: {
+    rate: '100%',
+    star: 5,
+    tag: [{ name: '价格实惠' }],
+  },
+  // 商品详情
+  more: '',
+  // 购物车数目
+  cartNumber: 0,
 }
 
 const mutations = {
-  INIT: (state, { carousel, goodsInfo }) => {
+  INIT: (state, { carousel, goodsInfo, tag, specification, evaluate, more }) => {
     state.carousel = carousel
     state.goodsInfo = goodsInfo
+    state.tag = tag
+    state.specification = specification
+    state.evaluate = evaluate
+    state.more = more
+  },
+  CART: (state, number) => {
+    state.cartNumber = number
   },
 }
 
 const actions = {
-  details({ commit }, param) {
+  // 获取详情
+  details({ commit, rootState }, param) {
     return new Promise((resolve, reject) => request({
       url: read,
       data: param,
       success: ({ data: { data } }) => {
+        console.log('data.tag', data.tag)
+        // 规格参数设置
+        const specification = rootState.details.specification
+        const parameter = {
+          frame_width: data.frame_width,
+          glass_width: data.glass_width,
+          glass_height: data.glass_height,
+          nose_width: data.nose_width,
+          leg_long: data.leg_long,
+          weight: data.weight,
+        }
+        for (let index = 0; index < specification.length; index++) {
+          if (specification[index].key !== 'weight') {
+            specification[index].slength = `${parameter[specification[index].key]}mm`
+          } else {
+            specification[index].slength = `${parameter[specification[index].key]}克（grams）`
+          }
+        }
+
         commit('INIT', {
           carousel: data.pics,
           goodsInfo: {
@@ -40,6 +94,14 @@ const actions = {
             discountPrice: data.priceArea.Min_Price - Number(data.priceArea.discount),
             tradeNumber: data.trade_num,
           },
+          tag: data.tag,
+          specification,
+          evaluate: {
+            rate: data.judgeInfo.good,
+            tag: data.judge_tag,
+            star: parseInt(5 * Number(data.judgeInfo.good.slice(0, -1)) / 100),
+          },
+          more: data.prodIntro1.replace(/\<img/gi, '<img style="max-width:100%;height:auto"'),
         })
         resolve(data)
       },
@@ -48,6 +110,21 @@ const actions = {
       },
     }))
   },
+  // 获取购物车列表
+  getCartNumber({ commit }, param) {
+    return new Promise((resolve) => request({
+      url: cartList,
+      data: param,
+      success: ({ data: { data } }) => {
+        console.log('cartData', data)
+        let number = 0
+        for (let index = 0; index < data.length; index++) {
+          number += Number(data[index].num)
+        }
+        commit('CART', number)
+      },
+    }))
+  },
 }
 
 export default {
-- 
2.0.0