feat：detail-comment/swiper/overview/section

src/components/CommentItem/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="comment-item-component">
+    <div class="title">
+      <div class="title__left">
+        <image-pic
+          round
+          fit="contain"
+          :src="require('@/assets/logo.png')"
+          width="25"
+          height="25"
+          style="margin-right:6px"
+        />
+        <van-rate
+          v-model="value"
+          :size="15"
+          :color="variables.red"
+          void-icon="star"
+          void-color="#eee"
+        />
+      </div>
+      <div class="title__right">2019-10-10</div>
+    </div>
+
+    <div class="desc">
+      <p class="desc__text">收到货就赶紧打开看起来了，之前看过电子版的看完之后感到意犹未尽，前两天突然想再看一遍于是决定买实体书认真读一遍。</p>
+      <div class="desc_img">
+        <image-pic
+          v-for="(item,idx) in imgs"
+          :key="idx"
+          :src="item"
+          fit="cover"
+          width="60"
+          height="70"
+          style="margin-right:8px"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import variables from '@/styles/variables.scss'
+
+export default {
+  data() {
+    return {
+      value: 2,
+      imgs: [
+        'http://img30.360buyimg.com/shaidan/s128x96_jfs/t1/91400/14/15534/116833/5e723705E6e97e5a3/012d7444f8ccbcea.jpg',
+        'http://img30.360buyimg.com/shaidan/s128x96_jfs/t1/91314/13/15486/245367/5e723706E663c43aa/abb31350cdadf56d.jpg',
+        'http://img30.360buyimg.com/shaidan/s128x96_jfs/t1/103902/15/15108/267864/5e703d09E6603898f/4d91ad6fab4f76e0.jpg'
+      ]
+    }
+  },
+  computed: {
+    variables() {
+      return variables
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/variables.scss";
+
+.comment-item-component {
+  .title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .title__left {
+      display: flex;
+      align-items: center;
+    }
+    .title__right {
+      color: $gray;
+      font-size: $mini;
+    }
+  }
+  .desc {
+    .desc__text {
+      font-size: $mini;
+      color: $black;
+      line-height: 38px;
+    }
+    .desc_img {
+      display: flex;
+      flex-direction: row;
+      margin-top: 8px;
+    }
+  }
+}
+</style>

src/components/Vant/index.js

@@ -26,7 +26,8 @@ import {
   TreeSelect,
   Icon,
   Progress,
-  ImagePreview
+  ImagePreview,
+  Rate
 } from 'vant'
 
 Vue.use(Toast)
@@ -54,3 +55,4 @@ Vue.use(Toast)
   .use(Icon)
   .use(Progress)
   .use(ImagePreview)
+  .use(Rate)

src/icons/svg/good.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1585298080705" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2813" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M459.755102 637.387755c-5.22449 0-10.44898-2.089796-14.628571-6.269388l-104.489796-104.489796c-8.359184-8.359184-8.359184-21.420408 0-29.779591 8.359184-8.359184 21.420408-8.359184 29.779592 0l104.489795 104.489796c8.359184 8.359184 8.359184 21.420408 0 29.779591-4.702041 4.179592-9.926531 6.269388-15.15102 6.269388z" p-id="2814" fill="#ea625b"></path><path d="M459.755102 637.387755c-5.22449 0-10.44898-2.089796-14.628571-6.269388-8.359184-8.359184-8.359184-21.420408 0-29.779591l208.979591-208.979592c8.359184-8.359184 21.420408-8.359184 29.779592 0 8.359184 8.359184 8.359184 21.420408 0 29.779592l-208.979592 208.979591c-4.702041 4.179592-9.926531 6.269388-15.15102 6.269388z" p-id="2815" fill="#ea625b"></path><path d="M512 929.959184c-230.4 0-417.959184-187.559184-417.959184-417.959184s187.559184-417.959184 417.959184-417.959184 417.959184 187.559184 417.959184 417.959184-187.559184 417.959184-417.959184 417.959184z m0-794.122449c-207.412245 0-376.163265 168.75102-376.163265 376.163265s168.75102 376.163265 376.163265 376.163265 376.163265-168.75102 376.163265-376.163265-168.75102-376.163265-376.163265-376.163265z" p-id="2816" fill="#ea625b"></path></svg>

src/views/detail/index.vue

@@ -8,18 +8,29 @@
 
     <Swiper :banner="banner" />
 
+    <Overview />
+
+    <Section />
+
+    <Comment />
   </div>
 </template>
 
 <script>
 import NavBar from '@/components/NavBar'
 import Swiper from './modules/Swiper'
+import Overview from './modules/Overview'
+import Section from './modules/Section'
+import Comment from './modules/Comment'
 
 export default {
   name: 'Detail',
   components: {
+    NavBar,
     Swiper,
-    NavBar
+    Overview,
+    Section,
+    Comment
   },
   data() {
     return {
@@ -35,5 +46,7 @@ export default {
 
 <style lang="scss" scoped>
 .detail {
+  min-height: 100vh;
+  background: #f5f5f5;
 }
 </style>

src/views/detail/modules/Comment.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="comment">
+    <div class="title">
+      <van-button block>
+        <div class="comment__item">
+          <div class="comment__item__left">
+            <span class="title">评价</span>
+            <span class="content">好评率99%</span>
+          </div>
+          <div class="comment__item__right">
+            <span class="text">共10万+评论</span>
+            <van-icon name="arrow" />
+          </div>
+        </div>
+      </van-button>
+      <div class="comment__line"></div>
+    </div>
+
+    <div class="tags">
+      <van-tag
+        class="tags__item"
+        :color="variables.red"
+        plain
+        v-for="(item,idx) in 6"
+        :key="idx"
+      >签案发时代发</van-tag>
+    </div>
+
+    <div class="main">
+      <comment-item v-for="(item,idx) in 2" :key="idx" style="margin-top:12px" />
+    </div>
+  </div>
+</template>
+
+<script>
+import CommentItem from '@/components/CommentItem'
+import variables from '@/styles/variables.scss'
+
+export default {
+  components: {
+    CommentItem
+  },
+  computed: {
+    variables() {
+      return variables
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/variables.scss";
+
+.comment {
+  margin-top: 24px;
+  background: #fff;
+  .title {
+    .comment__item {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      .comment__item__left {
+        .title {
+          color: $black;
+          margin-right: 16px;
+        }
+        .content {
+          color: $red;
+        }
+      }
+      .comment__item__right {
+        display: flex;
+        align-items: center;
+        color: $gray;
+        font-size: $mini;
+      }
+    }
+    .comment__line {
+      width: 700px;
+      height: 1px;
+      background: #f5f5f5;
+      margin: 0 auto;
+    }
+  }
+
+  .tags {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 10px 24px;
+    .tags__item {
+      margin: 14px 8px 0 0;
+    }
+  }
+
+  .main {
+    padding: 0 24px;
+  }
+}
+</style>

src/views/detail/modules/Overview.vue

@@ -0,0 +1,49 @@
+
+<template>
+  <div class="overview">
+    <h3 class="title">中国科幻基石丛书：三体（套装1-3册）</h3>
+    <p class="desc">《三体》获第73届世界科幻大会颁发的雨果奖*佳长篇小说奖，银河奖特别奖，刘慈欣被授予2018年度克拉克想象力服务社会奖，亚洲首位雨果奖得主十届银河奖得主。</p>
+
+    <div class="price">
+      <span class="price__new">¥1231</span>
+      <span class="price__old">¥123123</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/variables.scss";
+
+.overview {
+  padding: 24px;
+  background: #fff;
+  .title {
+    font-size: $normal;
+    color: $black;
+    font-weight: bolder;
+  }
+  .desc {
+    font-size: $small;
+    color: $gray;
+    margin-top: 12px;
+  }
+  .price {
+    margin-top: 12px;
+    .price__new {
+      font-size: $normal;
+      color: $red;
+      font-weight: bolder;
+      margin-right: 12px;
+    }
+    .price__old {
+      font-size: $small;
+      color: $gray;
+      text-decoration: line-through;
+    }
+  }
+}
+</style>

src/views/detail/modules/Section.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="section">
+    <van-button block>
+      <div class="section__item">
+        <div class="section__item__left">
+          <span class="title">已选</span>
+          <span class="content">三体（套装1-3册），1个</span>
+        </div>
+        <div class="section__item__right">
+          <van-icon name="arrow" />
+        </div>
+      </div>
+    </van-button>
+
+    <div class="section__line"></div>
+    <van-button block>
+      <div class="section__item">
+        <div class="section__item__left">
+          <span class="title">送至</span>
+          <span class="content">北京市 东城区</span>
+        </div>
+        <div class="section__item__right">
+          <van-icon name="arrow" />
+        </div>
+      </div>
+    </van-button>
+
+    <div class="section__line"></div>
+    <van-button block>
+      <div class="section__item section__item--icon">
+        <div class="section__item__left">
+          <p class="icon--wrapper" v-for="(item,idx) in ['panda自营','panda发货','七天无理由退款']" :key="idx">
+            <svg-icon icon-class="good" :width="18" :height="18" />
+            <span>{{item}}</span>
+          </p>
+        </div>
+        <div class="section__item__right">
+          <van-icon name="arrow" />
+        </div>
+      </div>
+    </van-button>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss">
+.section {
+  .van-button--default {
+    border: none;
+    border-radius: 0px;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+@import "@/styles/variables.scss";
+
+.section {
+  //  width:700px;
+  //  margin: 0 auto;
+  // border-radius: 6px;
+  margin-top: 24px;
+  background: #fff;
+  .section__item {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    .section__item__left {
+      .title {
+        color: $gray;
+        margin-right: 16px;
+      }
+      .content {
+        color: $black;
+      }
+    }
+    .section__item__right {
+      color: $gray;
+    }
+  }
+  .section__item--icon {
+    .section__item__left {
+      display: flex;
+      .icon--wrapper {
+        display: flex;
+        align-items: center;
+        color: $gray;
+        font-size: $small;
+        margin-right: 14px;
+        span {
+          margin-left: 6px;
+        }
+      }
+    }
+  }
+  .section__line {
+    width: 700px;
+    height: 1px;
+    background: #f5f5f5;
+    margin: 0 auto;
+  }
+}
+</style>

src/views/detail/modules/Swiper.vue

@@ -1,10 +1,12 @@
 <template>
-  <div>
+  <div style="background:#fff">
     <van-swipe :autoplay="3000" :indicator-color="variables.red">
-      <van-swipe-item v-for="(image, index) in banner" :key="index">
+      <van-swipe-item v-for="(image, index) in banner" :key="index" @click="onSwipeClick(index)">
         <image-pic width="100%" height="400" :src="image" />
       </van-swipe-item>
     </van-swipe>
+
+    <van-image-preview v-model="show" :images="banner" :start-position="previewIdx" />
   </div>
 </template>
 
@@ -17,6 +19,18 @@ export default {
     variables() {
       return variables
     }
+  },
+  data() {
+    return {
+      show: false,
+      previewIdx: 0
+    }
+  },
+  methods: {
+    onSwipeClick(index) {
+      this.previewIdx = index
+      this.show = true
+    }
   }
 }
 </script>