H5-点单

htmldev/dashboard/src/router/index.js

@@ -101,7 +101,6 @@ const routes = [
   },
   {
     path: '/orderList',
-    name: 'OrderList',
     component: _import('views/orderList/index'),
     children: [
       {

htmldev/dashboard/src/views/sell/food/food.vue

@@ -3,9 +3,9 @@
     <div v-show="showFlag" class="food" ref="food">
       <div class="food-content">
         <div class="image-header">
-          <img :src="food.image">
+          <img :src="food.image" alt="">
           <div class="back" @click="hide">
-            <i class="icon-arrow_lift"></i>
+            <van-icon name="close" size="30px" color="#fff"/>
           </div>
         </div>
         <div class="content">
@@ -26,35 +26,6 @@
             </div>
           </transition>
         </div>
-        <split v-show="food.info"></split>
-        <div class="info" v-show="food.info">
-          <h1 class="title">商品信息</h1>
-          <p class="text">{{food.info}}</p>
-        </div>
-        <split></split>
-        <div class="rating">
-          <h1 class="title">商品评价</h1>
-          <ratingselect @select="selectRating" @toggle="toggleContent" :selectType="selectType"
-                        :onlyContent="onlyContent" :desc="desc"
-                        :ratings="food.ratings"></ratingselect>
-          <div class="rating-wrapper">
-            <ul v-show="food.ratings && food.ratings.length">
-              <li v-show="needShow(rating.rateType,rating.text)" v-for="rating in food.ratings"
-                  class="rating-item border-1px">
-                <div class="user">
-                  <span class="name">{{rating.username}}</span>
-                  <img class="avatar" width="12" height="12" :src="rating.avatar">
-                </div>
-                <div class="time">{{rating.rateTime | formatDate}}</div>
-                <p class="text">
-                  <span
-                    :class="{'icon-thumb_up':rating.rateType===0,'icon-thumb_down':rating.rateType===1}"></span>{{rating.text}}
-                </p>
-              </li>
-            </ul>
-            <div class="no-rating" v-show="!food.ratings || !food.ratings.length">暂无评价</div>
-          </div>
-        </div>
       </div>
     </div>
   </transition>
@@ -63,10 +34,8 @@
 <script type="text/ecmascript-6">
 import BScroll from 'better-scroll'
 import Vue from 'vue'
-import { formatDate } from '../../../assets/js/date'
 import cartcontrol from '../cartcontrol/cartcontrol'
-import ratingselect from '../ratingselect/ratingselect'
-import split from '../split/split'
+import { Icon } from 'vant'
 
 const ALL = 2
 
@@ -139,28 +108,23 @@ export default {
       })
     }
   },
-  filters: {
-    formatDate (time) {
-      let date = new Date(time)
-      return formatDate(date, 'yyyy-MM-dd hh:mm')
-    }
-  },
   components: {
     cartcontrol,
-    ratingselect,
-    split
+    'van-icon': Icon
   }
 }
 </script>
+
 <style lang="scss" scoped>
 .food {
   position: fixed;
   left: 0;
-  top: 0;
-  bottom: 48px;
-  z-index: 30;
+  top: 20px;
+  bottom: 0;
+  z-index: 60;
   width: 100%;
   background: #fff;
+  border-radius: 16px 16px 0 0;
   transform: translate3d(0, 0, 0);
 
   &.move-enter-active, &.move-leave-active {
@@ -168,7 +132,7 @@ export default {
   }
 
   &.move-enter, &.move-leave-active {
-    transform: translate3d(100%, 0, 0);
+    transform: translate3d(0, 100%, 0);
   }
 
   .image-header {
@@ -176,6 +140,10 @@ export default {
     width: 100%;
     height: 0;
     padding-top: 100%;
+    background: #FFFFFF;
+    border-radius: 16px 16px 0 0;
+    box-shadow: 0 -2px 4px 0 rgba(13, 13, 13, 0.37);
+    overflow: hidden;
 
     img {
       position: absolute;
@@ -187,17 +155,11 @@ export default {
 
     .back {
       position: absolute;
-      top: 10px;
-      left: 0;
-
-      .icon-arrow_lift {
-        display: block;
-        padding: 10px;
-        font-size: 20px;
-        color: #fff;
-      }
+      right: 5px;
+      top: 5px;
+      display: flex;
+      align-items: center;
     }
-
   }
 
   .content {
@@ -294,79 +256,28 @@ export default {
       color: rgb(77, 85, 93);
     }
   }
+}
 
-  .rating {
-    padding-top: 18px;
-
-    .title {
-      line-height: 14px;
-      margin-left: 18px;
-      font-size: 14px;
-      color: rgb(7, 17, 27);
-    }
-
-    .rating-wrapper {
-      padding: 0 18px;
-
-      .rating-item {
-        position: relative;
-        padding: 16px 0;
-        @include border-1px(rgba(7, 17, 27, 0.1));
-
-        .user {
-          position: absolute;
-          right: 0;
-          top: 16px;
-          line-height: 12px;
-          font-size: 0;
-        }
-
-        .name {
-          display: inline-block;
-          margin-right: 6px;
-          vertical-align: top;
-          font-size: 10px;
-          color: rgb(147, 153, 159);
-        }
-
-        .avatar {
-          border-radius: 50%;
-        }
-
-        .time {
-          margin-bottom: 6px;
-          line-height: 12px;
-          font-size: 10px;
-          color: rgb(147, 153, 159);
-        }
-
-        .text {
-          line-height: 16px;
-          font-size: 12px;
-          color: rgb(7, 17, 27);
-        }
-
-        .icon-thumb_up, .icon-thumb_down {
-          margin-right: 4px;
-          line-height: 16px;
-          font-size: 12px;
-        }
-
-        .icon-thumb_up {
-          color: rgb(0, 160, 220);
-        }
-
-        .icon-thumb_down {
-          color: rgb(147, 153, 159);
-        }
-      }
-    }
-
-    .no-rating {
-      padding: 16px 0;
-      font-size: 12px;
-      color: rgb(147, 153, 159);
-    }
+.footer {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 68px;
+  padding: 0 20px;
+  background: #FFFFFF;
+  box-shadow: 0px -2px 4px 0px rgba(13, 13, 13, 0.03);
+
+  .price {
+    font-size: 21px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #D32323;
+    line-height: 29px;
   }
 }
 </style>

htmldev/dashboard/src/views/sell/ratingselect/ratingselect.vue

@@ -1,149 +0,0 @@
-<template>
-  <div class="ratingselect">
-    <div class="rating-type border-1px">
-      <span @click="select(2,$event)" class="block positive" :class="{'active':selectType===2}">{{desc.all}}<span
-        class="count">{{ratings.length}}</span></span>
-      <span @click="select(0,$event)" class="block positive" :class="{'active':selectType===0}">{{desc.positive}}<span
-        class="count">{{positives.length}}</span></span>
-      <span @click="select(1,$event)" class="block negative" :class="{'active':selectType===1}">{{desc.negative}}<span
-        class="count">{{negatives.length}}</span></span>
-    </div>
-    <div @click="toggleContent" class="switch" :class="{'on':onlyContent}">
-      <span class="icon-check_circle"></span>
-      <span class="text">只看有内容的评价</span>
-    </div>
-  </div>
-</template>
-
-<script type="text/ecmascript-6">
-const POSITIVE = 0
-const NEGATIVE = 1
-const ALL = 2
-
-export default {
-  props: {
-    ratings: {
-      type: Array,
-      default () {
-        return []
-      }
-    },
-    selectType: {
-      type: Number,
-      default: ALL
-    },
-    onlyContent: {
-      type: Boolean,
-      default: false
-    },
-    desc: {
-      type: Object,
-      default () {
-        return {
-          all: '全部',
-          positive: '满意',
-          negative: '不满意'
-        }
-      }
-    }
-  },
-  computed: {
-    positives () {
-      return this.ratings.filter((rating) => {
-        return rating.rateType === POSITIVE
-      })
-    },
-    negatives () {
-      return this.ratings.filter((rating) => {
-        return rating.rateType === NEGATIVE
-      })
-    }
-  },
-  methods: {
-    select (type, event) {
-      if (!event._constructed) {
-        return
-      }
-      this.$emit('select', type)
-    },
-    toggleContent (event) {
-      if (!event._constructed) {
-        return
-      }
-      this.$emit('toggle')
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.ratingselect {
-  .rating-type {
-    padding: 18px 0;
-    margin: 0 18px;
-    @include border-1px(rgba(7, 17, 27, 0.1));
-    font-size: 0;
-
-    .block {
-      display: inline-block;
-      padding: 8px 12px;
-      margin-right: 8px;
-      line-height: 16px;
-      border-radius: 1px;
-      font-size: 12px;
-      color: rgb(77, 85, 93);
-
-      &.active {
-        color: #fff;
-      }
-
-      .count {
-        margin-left: 2px;
-        font-size: 8px;
-      }
-
-      &.positive {
-        background: rgba(0, 160, 220, 0.2);
-      }
-
-      &.active {
-        background: rgb(0, 160, 220);
-      }
-
-      &.negative {
-        background: rgba(77, 85, 93, 0.2);
-      }
-
-      &.active {
-        background: rgb(77, 85, 93);
-      }
-    }
-  }
-
-  .switch {
-    padding: 12px 18px;
-    line-height: 24px;
-    border-bottom: 1px solid rgba(7, 17, 27, 0.1);
-    color: rgb(147, 153, 159);
-    font-size: 0;
-
-    &.on {
-      .icon-check_circle {
-        color: #00c850;
-      }
-    }
-
-    .icon-check_circle {
-      display: inline-block;
-      vertical-align: top;
-      margin-right: 4px;
-      font-size: 24px;
-    }
-
-    .text {
-      display: inline-block;
-      vertical-align: top;
-      font-size: 12px;
-    }
-  }
-}
-</style>

htmldev/dashboard/src/views/sell/split/split.vue

@@ -1,17 +0,0 @@
-<template>
-  <div class="split"></div>
-</template>
-
-<script type="text/ecmascript-6">
-export default {}
-</script>
-
-<style lang="scss" scoped>
-.split {
-  width: 100%;
-  height: 16px;
-  border-top: 1px solid rgba(7, 17, 27, 0.1);
-  border-bottom: 1px solid rgba(7, 17, 27, 0.1);
-  background: #f3f5f7;
-}
-</style>