H5-商品

htmldev/dashboard/src/views/sell/editTableNum/index.vue

@@ -0,0 +1,164 @@
+<template>
+  <transition name="move">
+    <van-form
+      v-show="showFlag"
+      class="edit-table-num"
+      @submit="onsubmit">
+      <van-icon
+        class="af-van-icon-back"
+        color="#fff"
+        name="arrow-left"
+        size="30px"
+        @click="showFlag = false"/>
+      <div class="input-type">
+        <van-button type="default">扫码桌号</van-button>
+        <van-button class="active" type="default">手动输入</van-button>
+      </div>
+      <van-field
+        v-model.trim="place_num"
+        :border="false"
+        input-align="center"
+        name="用户名"
+        placeholder="请输入桌号"/>
+      <van-button
+        block
+        class="af-submit"
+        native-type="submit"
+        type="info">提交
+      </van-button>
+    </van-form>
+  </transition>
+</template>
+
+<script>
+import { Form, Button, Field, Icon } from 'vant'
+
+export default {
+  name: 'index',
+  components: {
+    'van-form': Form,
+    'van-button': Button,
+    'van-field': Field,
+    'van-icon': Icon
+  },
+  data () {
+    return {
+      showFlag: false,
+      place_num: ''
+    }
+  },
+  methods: {
+    init () {
+      this.showFlag = true
+    },
+    onsubmit () {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.edit-table-num {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 70;
+  width: 100%;
+  min-height: 100vh;
+  padding-top: 94px;
+  background: rgba(0, 0, 0, 0.8);
+  transform: translate3d(0, 0, 0);
+
+  &.move-enter-active, &.move-leave-active {
+    transition: all 0.2s linear;
+  }
+
+  &.move-enter, &.move-leave-active {
+    transform: translate3d(100%, 0, 0);
+  }
+
+  .af-van-icon-back {
+    position: absolute;
+    left: 20px;
+    top: 20px;
+    z-index: 1;
+  }
+
+  ::v-deep .van-cell {
+    display: block;
+    width: 275px;
+    border-radius: 8px;
+    padding: 14px 0;
+    margin: 29px auto 23px;
+
+    input,
+    textarea {
+      width: 100%;
+      height: 22px;
+      font-size: 16px;
+      color: #222;
+      word-break: break-all;
+      resize: none;
+      outline: 0 none;
+      overflow: hidden;
+      background: transparent;
+      -webkit-text-fill-color: #222;
+      opacity: 1;
+
+      &::-webkit-input-placeholder {
+        color: #736F6F;
+        -webkit-text-fill-color: #736F6F;
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.input-type {
+  display: flex;
+  justify-content: center;
+  align-items: center;;
+
+  ::v-deep .van-button {
+    width: 120px;
+    height: 36px;
+    border-radius: 18px;
+    border: none;
+    background: rgba(0, 0, 0, 0.2);
+
+    &:nth-of-type(2) {
+      margin-left: 16px;
+    }
+
+    &.active {
+      background: linear-gradient(90deg, #000000 0%, #525050 100%);
+    }
+
+    .van-button__text {
+      font-size: 16px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #FFFFFF;
+      line-height: 36px;
+    }
+  }
+}
+
+.af-submit {
+  width: 124px;
+  height: 40px;
+  background: #D32323;
+  border-radius: 25px;
+  border: none;
+  margin: 0 auto;
+
+  ::v-deep .van-button__text {
+    font-size: 16px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #FFFFFF;
+  }
+}
+</style>

htmldev/dashboard/src/views/sell/goods/index.vue

@@ -38,10 +38,15 @@
           </li>
         </ul>
       </div>
-      <shopcart ref="shopcart" :selectFoods="selectFoods" :deliveryPrice="seller.deliveryPrice"
-                :minPrice="seller.minPrice"></shopcart>
+      <shopcart
+        ref="shopcart"
+        :deliveryPrice="seller.deliveryPrice"
+        :minPrice="seller.minPrice"
+        :selectFoods="selectFoods"
+        @handleJumpPay="handleJumpPay"/>
     </div>
     <food @add="addFood" :food="selectedFood" ref="food"></food>
+    <editTableNum ref="editTableNum"/>
   </div>
 </template>
 
@@ -51,6 +56,7 @@ import aflogo from '../aflogo/index'
 import shopcart from '../shopcart/shopcart'
 import cartcontrol from '../cartcontrol/cartcontrol'
 import food from '../food/food'
+import editTableNum from '../editTableNum/index'
 
 const mockDataJson = require('../../../mock/data.json')
 
@@ -153,13 +159,17 @@ export default {
       let menuList = this.$refs.menuList
       let el = menuList[index]
       this.meunScroll.scrollToElement(el, 300, 0, -100)
+    },
+    handleJumpPay () {
+      this.$refs.editTableNum.init()
     }
   },
   components: {
     aflogo,
     shopcart,
     cartcontrol,
-    food
+    food,
+    editTableNum
   }
 }
 </script>

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

@@ -130,16 +130,6 @@ export default {
       })
       return count
     },
-    payDesc () {
-      if (this.totalPrice === 0) {
-        return `￥${this.minPrice}元起送`
-      } else if (this.totalPrice < this.minPrice) {
-        let diff = this.minPrice - this.totalPrice
-        return `还差￥${diff}元起送`
-      } else {
-        return '去结算'
-      }
-    },
     payClass () {
       if (this.totalPrice < this.minPrice) {
         return 'not-enough'
@@ -197,7 +187,7 @@ export default {
       if (this.totalPrice < this.minPrice) {
         return
       }
-      window.alert(`支付${this.totalPrice}元`)
+      this.$emit('handleJumpPay')
     },
     addFood (target) {
       this.drop(target)