代客下单计算器

src/views/tool/Instead/components/popup-weight-goods.vue

@@ -4,52 +4,37 @@
       <div class="select_desk_dialog u-p-b-20">
         <key-board isCanEmpty v-model="number" isFloat @clear="clear">
           <div slot="clear">.</div>
-          <div
-            slot="input"
-            class="u-font-14 u-row-between u-flex w-full u-text-left"
-          >
+          <div slot="input" class="u-font-14 u-row-between u-flex w-full u-text-left">
             <div class="">
               <div>单价</div>
               <div class="u-m-t-10">
-                <el-tag type="primary" size="medium">￥1/克</el-tag>
+                <el-tag type="primary" size="medium">￥{{ item.lowPrice }}/{{ item.unitName }}</el-tag>
               </div>
             </div>
             <div>
               <div class="u-font-14">重量</div>
               <div class="u-m-t-10">
-                <el-input
-                  placeholder="请输入挂账金额"
-                  v-model="number"
-                  @input="inputNumber"
-                  @change="inputChange"
-                  @focus="inputFocus"
-                  @blur="inputBlur"
-                  :type="focus ? 'number' : 'text'"
-                >
-                  <template slot="append">克</template>
+                <el-input placeholder="请输入挂账金额" v-model="number" @input="inputNumber" @change="inputChange"
+                  @focus="inputFocus" @blur="inputBlur" :type="focus ? 'number' : 'text'">
+                  <template slot="append">{{ item.unitName }}</template>
                 </el-input>
               </div>
             </div>
           </div>
         </key-board>
-        <div class="price u-text-left w-full">￥ {{ 11 }}</div>
+        <div class="price u-text-left w-full">￥ {{ item.lowPrice * number }}</div>
 
         <div class="confirm_btns u-flex u-m-t-20">
-          <el-button style="width: 100%;" type="primary" size="medium" @click="confirm"
-            >确定</el-button
-          >
+          <el-button style="width: 100%;" type="primary" size="medium" @click="confirm">确定</el-button>
         </div>
       </div>
     </el-dialog>
 
-    <choose-guazhang
-      ref="refChooseGuazhang"
-      @confirm="chooseGuazhangConfirm"
-    ></choose-guazhang>
+    <choose-guazhang ref="refChooseGuazhang" @confirm="chooseGuazhangConfirm"></choose-guazhang>
   </div>
 </template>
-      
-      <script>
+
+<script>
 import keyBoard from "./keyboard.vue";
 import chooseGuazhang from "./choose-guazhang.vue";
 export default {
@@ -69,12 +54,16 @@ export default {
       loading: false,
       tips: "",
       focus: false,
-      data:{}
+      data: {},
+      item: ""
     };
   },
   watch: {
     number(newval) {
-      console.log(newval);
+      // 处理小数点
+      // if (newval == '.' || newval == '0.') {
+      //   this.number = newval;
+      // } else {
       if (newval * 1 > this.payMoney * 1) {
         this.number = this.payMoney;
         this.number = newval;
@@ -87,6 +76,7 @@ export default {
         this.tips =
           shengyu > 0 ? "还需额外支付" + shengyu.toFixed(2) + "元" : "";
       }
+      // }
     },
   },
   methods: {
@@ -120,19 +110,20 @@ export default {
       this.number = "";
     },
     confirm() {
-      if (this.number * 1 > this.payMoney * 1) {
-        return this.$message("已超出未结账金额");
-      }
-      if (this.number * 1 <= 0) {
-        return this.$message("支付金额不正确");
-      }
-      if (!this.guazhangRen) {
-        return this.$message("请选择挂账人");
-      }
-      this.$emit("confirm", this.guazhangRen, this.number);
+      // if (this.number * 1 > this.payMoney * 1) {
+      //   return this.$message("已超出未结账金额");
+      // }
+      // if (this.number * 1 <= 0) {
+      //   return this.$message("支付金额不正确");
+      // }
+      // if (!this.guazhangRen) {
+      //   return this.$message("请选择挂账人");
+      // }
+      this.$emit("confirm", this.item, this.number);
       this.close();
     },
-    open(number) {
+    open(item) {
+      this.item = item
       this.number = this.payMoney * 1;
       this.show = true;
       this.tips = "还需额外支付" + this.payMoney + "元";
@@ -142,57 +133,70 @@ export default {
       this.number = "";
     },
   },
-  mounted() {},
+  mounted() { },
 };
 </script>
-      
-      <style lang="scss" scoped>
+
+<style lang="scss" scoped>
 ::v-deep.el-button {
   padding: 12px 20px;
 }
+
 ::v-deep .carts .box_status {
   border: none;
 }
+
 ::v-deep .select_desk_dialog .el-input__inner {
   // border: none;
 }
+
 ::v-deep .el-input__inner::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
+
 ::v-deep .el-input__inner::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
+
 ::v-deep .el-button--success {
   border-color: #22bf64;
   background-color: #22bf64;
 }
+
 .select_desk .btn {
   height: 34px;
 }
+
 .tags {
   font-size: 16px;
+
   &.using {
     color: rgb(234, 64, 37);
   }
+
   &.wait {
     color: rgb(252, 236, 79);
   }
+
   &.idle {
     color: rgb(137, 234, 71);
   }
+
   &.closed {
     color: rgb(221, 221, 221);
     filter: grayscale(1);
   }
 }
+
 ::v-deep .inputs .el-input__inner {
   border-color: transparent !important;
   color: rgba(0, 0, 0, 0.8);
   letter-spacing: 1.25px;
   font-size: 20px;
 }
+
 .select_desk .select_desk_dialog {
   display: flex;
 
@@ -248,12 +252,14 @@ export default {
   font-size: 20px;
   position: relative;
 }
+
 .price {
   font-size: 18px;
   text-align: left;
   color: rgb(255, 81, 82);
   font-weight: 600;
 }
+
 .select_desk .select_desk_dialog .inputs .close {
   color: #aaa;
   position: absolute;
@@ -265,6 +271,7 @@ export default {
   margin-top: -15px;
   cursor: pointer;
 }
+
 .guazhangren {
   padding: 12px 10px;
   border: 1px solid #dcdfe6;
@@ -273,6 +280,7 @@ export default {
   min-height: 58px;
   color: #999;
   cursor: pointer;
+
   .name {
     color: #3f9eff;
   }