代客下单增加商品称重弹窗

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

@@ -1,119 +1,125 @@
 <template>
   <div class="select_desk">
-    <el-dialog width="410px" title="套餐" :visible.sync="show">
+    <el-dialog width="410px" title="套餐" v-model="show">
       <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 class="">
-              <div>单价</div>
-              <div class="u-m-t-10">
-                <el-tag type="primary" size="medium">￥{{ price }}/{{ item.unitName }}</el-tag>
+          <template #clear>
+            <div>.</div>
+          </template>
+          <template #input>
+            <div 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">￥{{ price }}/{{ 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 #append>
+                      {{ item.unitName }}
+                    </template>
+                  </el-input>
+                </div>
               </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">{{ item.unitName }}</template>
-                </el-input>
-              </div>
-            </div>
-          </div>
+          </template>
         </key-board>
         <div class="price u-text-left w-full">￥ {{ allPrice }}</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>
-
   </div>
 </template>
 
-<script>
+<script setup>
 import keyBoard from "./keyboard.vue";
-export default {
-  components: { keyBoard },
-  props: {
-    payMoney: {
-      type: [Number, String],
-      default: 0,
-    },
-    isShowVipPrice:{
-      type:Boolean,
-      default:false
-    }
+const props = defineProps({
+  payMoney: {
+    type: [Number, String],
+    default: 0,
   },
-  data() {
-    return {
-      guazhangRen: "",
-      number: "",
-      show: false,
-      hasOpen: false,
-      loading: false,
-      tips: "",
-      focus: false,
-      data: {},
-      item: ""
-    };
+  isShowVipPrice: {
+    type: Boolean,
+    default: false,
   },
-  watch: {
-    number(newval) {
-    },
-  },
-  computed:{
-    allPrice(){
-      return (this.price*this.number).toFixed(2);
-    },
-    price(){
-      if(!this.item){
-        return 0
-      }
-      return this.item.lowPrice;
-    }
-  },
-  methods: {
-    inputFocus() {
-      this.focus = true;
-    },
-    inputBlur() {
-      this.focus = false;
-    },
-    inputNumber(e) {
-      console.log(e);
-      
-    },
-    inputChange(e) {
-      console.log(e);
-    },
-    clear(e) {
-      console.log(e);
-      this.number = "";
-      this.item=""
-    },
-    confirm() {
-      if(this.number*1<=0){
-        return this.$message("请输入重量");
-      }
-      this.$emit("confirm", this.item, (this.number*1).toFixed(2));
-      this.close();
-    },
-    open(item) {
-      console.log(item);
-      this.item = item
-      this.show = true;
-    },
-    close() {
-      this.show = false;
-      this.number = "";
-      this.item=""
-    },
-  },
-  mounted() { },
-};
+});
+
+const state = reactive({
+  guazhangRen: "",
+  number: "",
+  show: false,
+  hasOpen: false,
+  loading: false,
+  tips: "",
+  focus: false,
+  data: {},
+  item: "",
+});
+const { guazhangRen, number, show, hasOpen, loading, tips, focus, data, item } = toRefs(state);
+const price = computed(() => {
+  if (!item.value) {
+    return 0;
+  }
+  return item.value.lowPrice;
+});
+const allPrice = computed(() => {
+  return (price.value * number.value).toFixed(2);
+});
+function inputFocus() {
+  focus.value = true;
+}
+function inputBlur() {
+  focus.value = false;
+}
+function inputNumber(e) {
+  console.log(e);
+}
+function inputChange(e) {
+  console.log(e);
+}
+function clear(e) {
+  console.log(e);
+  number.value = "";
+  item.value = "";
+}
+const emits = defineEmits(["confirm"]);
+function confirm() {
+  if (number.value * 1 <= 0) {
+    return ElMessage.error("请输入重量");
+  }
+  emits("confirm", item.value, (number.value * 1).toFixed(2));
+  close();
+}
+function open(item) {
+  console.log(item);
+  item.value = item;
+  show.value = true;
+}
+function close() {
+  show.valuie = false;
+  number.value = "";
+  item.value = "";
+}
+defineExpose({
+  open,
+  close,
+});
 </script>
 
 <style lang="scss" scoped>