代客下单增加折扣

src/assets/styles/util.scss

@@ -7,7 +7,9 @@
 .u-abso {
 	position: absolute;
 }
-.u-fixed,.u-fix{
+
+.u-fixed,
+.u-fix {
 	position: fixed;
 }
 
@@ -22,6 +24,7 @@ view,
 text {
 	box-sizing: border-box;
 }
+
 /* #endif */
 
 .u-font-xs {
@@ -130,39 +133,44 @@ text {
 
 // 定义内外边距，历遍1-80
 @for $i from 0 through 80 {
+
 	// 只要双数和能被5除尽的数
-	@if $i % 2 == 0 or $i % 5 == 0 {
+	@if $i % 2==0 or $i % 5==0 {
+
 		// 得出：u-margin-30或者u-m-30
-		.u-margin-#{$i}, .u-m-#{$i} {
+		.u-margin-#{$i},
-			margin: $i + px!important;
+		.u-m-#{$i} {
+			margin: $i + px !important;
 		}
 
 		// 得出：u-padding-30或者u-p-30
-		.u-padding-#{$i}, .u-p-#{$i} {
+		.u-padding-#{$i},
-			padding: $i + px!important;
+		.u-p-#{$i} {
+			padding: $i + px !important;
 		}
 
 		@each $short, $long in l left, t top, r right, b bottom {
+
 			// 缩写版，结果如： u-m-l-30
 			// 定义外边距
 			.u-m-#{$short}-#{$i} {
-				margin-#{$long}: $i + px!important;
+				margin-#{$long}: $i + px !important;
 			}
 
 			// 定义内边距
 			.u-p-#{$short}-#{$i} {
-				padding-#{$long}: $i + px!important;
+				padding-#{$long}: $i + px !important;
 			}
 
 			// 完整版，结果如：u-margin-left-30
 			// 定义外边距
 			.u-margin-#{$long}-#{$i} {
-				margin-#{$long}: $i + px!important;
+				margin-#{$long}: $i + px !important;
 			}
 
 			// 定义内边距
 			.u-padding-#{$long}-#{$i} {
-				padding-#{$long}: $i + px!important;
+				padding-#{$long}: $i + px !important;
 			}
 		}
 	}
@@ -176,116 +184,146 @@ text {
 
 /* start--文本行数限制--start */
 .u-line-1 {
-    overflow: hidden;
+	overflow: hidden;
-    white-space: nowrap;
+	white-space: nowrap;
-    text-overflow: ellipsis;
+	text-overflow: ellipsis;
 }
 
 .u-line-2 {
-    -webkit-line-clamp: 2;
+	-webkit-line-clamp: 2;
 }
 
 .u-line-3 {
-    -webkit-line-clamp: 3;
+	-webkit-line-clamp: 3;
 }
 
 .u-line-4 {
-    -webkit-line-clamp: 4;
+	-webkit-line-clamp: 4;
 }
 
 .u-line-5 {
-    -webkit-line-clamp: 5;
+	-webkit-line-clamp: 5;
 }
 
-.u-line-2, .u-line-3, .u-line-4, .u-line-5 {
+.u-line-2,
-    overflow: hidden;
+.u-line-3,
+.u-line-4,
+.u-line-5 {
+	overflow: hidden;
 	word-break: break-all;
-    text-overflow: ellipsis; 
+	text-overflow: ellipsis;
-    display: -webkit-box; // 弹性伸缩盒
+	display: -webkit-box; // 弹性伸缩盒
-    -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
+	-webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
 }
 
 /* end--文本行数限制--end */
 
 
 /* start--不同颜色文字--start */
-.color-333{
+.color-333 {
 	color: #333;
 }
-.color-666{
+
+.color-666 {
 	color: #666;
 }
-.color-999{
+
+.color-999 {
 	color: #999;
 }
 
+.color-red {
+	color: rgb(250, 85, 85);
+}
+
+
 /* end--不同颜色文字--end */
 
-
+.tranistion {
-.tranistion{
 	transition: all .3s ease-in-out;
 }
-.tranistion-1{
+
+.tranistion-1 {
 	transition: all .1s ease-in-out;
 }
-.tranistion-2{
+
+.tranistion-2 {
 	transition: all .2s ease-in-out;
 }
-.font-bold{
+
+.font-bold {
 	font-weight: 700;
 }
 
+.font-600 {
+	font-weight: 600;
+}
 
-.bg-gray{
+.bg-gray {
 	background-color: #F9F9F9;
 }
-.w-full{
+
+.w-full {
 	width: 100%;
 }
-.gap-10{
+
+.gap-10 {
 	gap: 10px;
 }
-.gap-20{
+
+.gap-20 {
 	gap: 20px;
 }
-.color-aaa{
+
+.color-aaa {
 	color: #aaa;
 }
-.color-000{
+
+.color-000 {
 	color: #000;
 }
-.color-fff{
+
+.color-fff {
 	color: #fff;
 }
-.bg-fff{
+
+.bg-fff {
 	background-color: #fff;
 }
-.bg-gray{
+
+.bg-gray {
 	background-color: #F9F9F9;
 }
-.overflow-hide{
+
+.overflow-hide {
 	overflow: hidden;
 }
-.no-wrap{
+
+.no-wrap {
 	white-space: nowrap;
 }
-.border-r-12{
+
+.border-r-12 {
 	border-radius: 12px;
 }
-.border-r-18{
+
+.border-r-18 {
 	border-radius: 18px;
 }
-.border-top{
+
+.border-top {
 	border-top: 1px solid #E5E5E5;
 }
-.border-bottom{
+
+.border-bottom {
 	border-bottom: 1px solid #E5E5E5;
 }
-.scale7{
+
+.scale7 {
 	transform: scale(0.7);
 }
 
-.position-all{
+.position-all {
 	left: 0;
 	right: 0;
 	top: 0;
@@ -295,18 +333,20 @@ text {
 .lh16 {
 	line-height: 16px;
 }
-.default-box-padding{
+
+.default-box-padding {
 	padding: 16px 14px;
 }
 
-.zIndex-999{
+.zIndex-999 {
 	z-index: 999;
 }
-.icon-default-size{
+
+.icon-default-size {
 	width: 14px;
 	height: 14px;
 }
 
-.filter-gray{
+.filter-gray {
 	filter: grayscale(1);
 }

src/views/table/components/choose-user.vue

@@ -128,9 +128,7 @@ export default {
     },
   },
   mounted() {
-    cacheData = { ...this.query };
+    // this.getTableData();
-    this.getTableData();
-    this.getShopInfo();
   },
   methods: {
     cellClick(user){
@@ -155,6 +153,7 @@ export default {
         this.show = false;
     },
     open() {
+      this.getTableData();
       this.show = true;
     },
     toPage(type) {

src/views/table/components/table-diancan-components/discount.vue

@@ -0,0 +1,197 @@
+<template>
+  <el-dialog width="400px" :title="title" :visible.sync="show">
+    <div class="u-p-15">
+      <div class="u-m-t-20">
+        <el-form label-width="90px" label-position="left">
+          <el-form-item label="应付金额">
+            <div class="color-red u-font-18 font-600">￥{{ form.money }}</div>
+            <!-- <el-input :value="form.money" disabled> </el-input> -->
+          </el-form-item>
+          <el-form-item label="减免金额">
+            <el-input
+              v-model="form.reduceMoney"
+              clearable
+              autofocus
+              type="number"
+              @keyup.enter.native="init('reduceMoney')"
+              @blur="init('reduceMoney')"
+            >
+              <template slot="append">元</template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="优惠折扣">
+            <el-input
+              v-model="form.discount"
+              type="number"
+              @keyup.enter.native="init('discount')"
+              @blur="init('discount')"
+            >
+              <template slot="append">%</template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="实收金额">
+            <el-input
+              v-model="form.curretnMoney"
+              type="number"
+              clearable
+              @keyup.enter.native="init('curretnMoney')"
+              @blur="init('curretnMoney')"
+            >
+              <template slot="append">元</template>
+            </el-input>
+          </el-form-item>
+          <div class="u-flex u-row-center u-m-t-50">
+            <el-button size="medium" @click="close">取消</el-button>
+            <el-button size="medium" type="success" @click="confirm"
+              >确定</el-button
+            >
+          </div>
+        </el-form>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+    <script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "优惠金额",
+    },
+    value: {
+      type: [String, Number],
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      form: {
+        money: 0,
+        discount: 100,
+        reduceMoney: 0,
+        curretnMoney: 0,
+      },
+      number: "0",
+      show: false,
+    };
+  },
+  watch: {},
+  methods: {
+    // init(key) {
+    //   const { money, reduceMoney, discount, curretnMoney } = this.form;
+    //   if (key == "reduceMoney") {
+    //     this.form.curretnMoney = (money - reduceMoney).toFixed(2);
+    //     this.form.discount = ((this.form.curretnMoney / money) * 100).toFixed(
+    //       2
+    //     );
+    //     return;
+    //   }
+    //   if (key == "discount") {
+    //     this.form.curretnMoney = ((money * discount) / 100).toFixed(2);
+    //     this.form.reduceMoney = (money - this.form.curretnMoney).toFixed(2);
+    //     return;
+    //   }
+    //   if (key == "curretnMoney") {
+    //     this.form.reduceMoney = (money - curretnMoney).toFixed(2);
+    //     this.form.discount = ((this.form.curretnMoney / money) * 100).toFixed(
+    //       2
+    //     );
+    //     return;
+    //   }
+    //   this.form.curretnMoney = ((money * discount) / 100).toFixed(2);
+    //   this.form.reduceMoney = (money - this.form.curretnMoney).toFixed(2);
+    // },
+    init(key) {
+      const { money, reduceMoney, discount, curretnMoney } = this.form;
+      if (key == "reduceMoney") {
+        if (reduceMoney < 0) {
+          this.$message.error("减免金额不能小于0");
+          this.form.reduceMoney = 0;
+        }
+        if (reduceMoney > money) {
+          this.$message.error("减免金额不能大于总金额");
+          this.form.reduceMoney = money;
+        }
+        this.form.curretnMoney = (money - this.form.reduceMoney).toFixed(2);
+        this.form.discount = ((this.form.curretnMoney / money) * 100).toFixed(
+          2
+        );
+        return;
+      }
+      if (key == "discount") {
+        if (discount < 0) {
+          this.$message.error("折扣不能小于0");
+          this.form.discount = 0;
+        }
+        if (discount > 100) {
+          this.$message.error("折扣不能大于100");
+          this.form.discount = 100;
+        }
+        this.form.curretnMoney = ((money * this.form.discount) / 100).toFixed(
+          2
+        );
+        this.form.reduceMoney = (
+          (money * (100 - this.form.discount)) /
+          100
+        ).toFixed(2);
+        return;
+      }
+      if (key == "curretnMoney") {
+        if (curretnMoney < 0) {
+          this.$message.error("实收金额不能小于0");
+          this.form.curretnMoney = 0;
+        }
+        if (curretnMoney > money) {
+          this.$message.error("实收金额不能大于总金额");
+          this.form.curretnMoney = 0;
+        }
+        this.form.reduceMoney = (money - this.form.curretnMoney).toFixed(2);
+        this.form.discount = ((this.form.curretnMoney / money) * 100).toFixed(
+          2
+        );
+        return;
+      }
+      this.form.curretnMoney = ((money * discount) / 100).toFixed(2);
+      this.form.reduceMoney = (money - this.form.curretnMoney).toFixed(2);
+    },
+    changeKey(key, val) {
+      this[key] = val;
+    },
+
+    confirm() {
+      this.$emit("confirm", (this.form.discount / 100));
+      this.close();
+    },
+    open(data) {
+      console.log(data);
+      this.form.money = data.amount;
+      this.form.discount = data.discount||100;
+      this.show = true;
+      this.init();
+    },
+    close() {
+      this.show = false;
+    },
+  },
+  mounted() {
+    this.number = `${this.value}`;
+  },
+};
+</script>
+    
+  <style  lang="scss" scoped>
+.codeImg {
+  width: 160px;
+  border: 1px solid rgb(220, 223, 230);
+  height: 160px;
+}
+::v-deep .el-input .el-input__inner::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+::v-deep .el-input .el-input__inner::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+</style>

src/views/table/components/table-diancan.vue

@@ -162,7 +162,7 @@
                       alt=""
                     />
                     <div v-else class="headimg flex flex-x-y-center">
-                      <i-icon class="el-icon-user"></i-icon>
+                      <i class="el-icon-user"></i>
                     </div>
                     <div>
                       <div class="ft-13 color-000">{{ vipUser.nickName }}</div>
@@ -592,14 +592,6 @@
                 </div>
               </div>
             </div>
-            <!-- <el-pagination :total="goods.total" :current-page="goods.query.page + 1" :page-size="goods.query.size"
-            layout="total, sizes, prev, pager, next, jumper" @current-change="paginationChangeinformation" @size-change="
-              (e) => {
-                goods.query.size = e;
-                goods.query.page = 0;
-                getGoods();
-              }
-            " /> -->
           </template>
 
           <template v-else>
@@ -646,10 +638,12 @@
                     </el-form>
                   </div> -->
                 </div>
-                <!-- <div class="btn_group">
+                <div class="btn_group">
-                  <el-button size="medium"> 整单打折/减免 </el-button>
+                  <el-button size="medium" @click="disCountShow">
-                  <el-button size="medium "> 免单 </el-button>
+                    整单打折/减免
-                </div> -->
+                  </el-button>
+                  <!-- <el-button size="medium "> 免单 </el-button> -->
+                </div>
 
                 <pay-type ref="refPayType" v-model="order.payType"> </pay-type>
                 <div style="margin-top: 20px">
@@ -698,7 +692,12 @@
                   </div>
                   <div class="detail_form_item">
                     <div class="left">整单改价</div>
-                    <div class="right">-￥0.00</div>
+                    <div class="right">
+                      -￥{{
+                        ((1 - createOrder.discount) * createOrder.data.amount)
+                          | to2
+                      }}
+                    </div>
                   </div>
                   <!---->
                   <div class="detail_form_item">
@@ -719,7 +718,9 @@
                   <div class="detail_form_item">
                     <div class="left">应付金额</div>
                     <div class="right redfont">
-                      ￥{{ createOrder.data.amount | to2 }}
+                      ￥{{
+                        (createOrder.data.amount * createOrder.discount) | to2
+                      }}
                     </div>
                   </div>
                   <div class="line"></div>
@@ -981,6 +982,9 @@
 
     <!-- 扫码支付 -->
     <scan-pay ref="refScanCode"></scan-pay>
+    <!-- 打折 -->
+    <money-discount ref="refDiscount" @confirm="ChangeDiscount">
+    </money-discount>
   </div>
 </template>
 
@@ -989,6 +993,7 @@ import chooseUser from "./choose-user.vue";
 import payType from "./pay-type.vue";
 import chooseTable from "./table-diancan-components/choose-table-master.vue";
 import scanPay from "./table-diancan-components/scan-pay.vue";
+import moneyDiscount from "./table-diancan-components/discount.vue";
 import orderNote from "./table-diancan-components/note.vue";
 import moneyKeyboard from "./money-keyboard.vue";
 import dayjs from "dayjs";
@@ -1009,7 +1014,12 @@ import {
   $payOrder,
 } from "@/api/table";
 import { tbShopCategoryGet } from "@/api/shop";
-import { isCanBuy,arrayContainsAll,generateCombinations,returnReverseVal } from "./util.js";
+import {
+  isCanBuy,
+  arrayContainsAll,
+  generateCombinations,
+  returnReverseVal,
+} from "./util.js";
 
 export default {
   components: {
@@ -1019,6 +1029,7 @@ export default {
     orderNote,
     moneyKeyboard,
     scanPay,
+    moneyDiscount,
   },
   data() {
     return {
@@ -1143,6 +1154,7 @@ export default {
       canUpdate: true,
       //下单
       createOrder: {
+        discount: 1,
         form: {},
         data: {},
         quan: {
@@ -1243,6 +1255,11 @@ export default {
     masterId: function (val) {
       console.log(val);
     },
+    isCreateOrder: function (val) {
+      if (!val) {
+        this.createOrder.discount = 1;
+      }
+    },
     "vipUser.id": async function (val) {
       let masterId = this.order.masterId;
       if (!masterId) {
@@ -1378,15 +1395,25 @@ export default {
   mounted() {
     // this.getGoods();
     // this.getCategory();
-    
     // this.refToggle('refScanCode',true)
+    // this.refToggle("refDiscount", true);
   },
   methods: {
-    refToggle(key,isShow){
+    ChangeDiscount(discount) {
-      if(!this.$refs[key]){
+      this.createOrder.discount = discount;
-        return
+    },
+    disCountShow() {
+      const { amount } = this.createOrder.data;
+      this.refToggle("refDiscount", true, {
+        amount,
+        discount: this.createOrder.discount * 100,
+      });
+    },
+    refToggle(key, isShow, data) {
+      if (!this.$refs[key]) {
+        return;
       }
-      isShow?this.$refs[key].open():this.$refs[key].close()
+      isShow ? this.$refs[key].open(data) : this.$refs[key].close(data);
     },
     //购物车商品输入框数量输入
     cartGoodsNumberInput(newval, item) {
@@ -1486,6 +1513,7 @@ export default {
         orderId: this.createOrder.data.id,
         payType: this.order.payType,
         vipUserId: this.vipUser.id,
+        discount: this.createOrder.discount.toFixed(2),
       });
       this.payOrderSuccess();
     },
@@ -2114,6 +2142,7 @@ export default {
       this.allPack = false;
       this.note.content = "";
       this.isPrverOrder = false;
+      this.createOrder.discount = 1;
     },
     //获取购物车数据
     async getCart() {
@@ -2456,10 +2485,6 @@ input[type="number"]::-webkit-outer-spin-button {
   text-align: center;
 }
 
-::v-deep .number-box .el-input__inner::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
 ::v-deep .el-button--success:not(.is-disabled) {
   background: #22bf64;
   color: #fff;
@@ -2490,6 +2515,10 @@ input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
+::v-deep .number-box .el-input__inner::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
 .carts_list_title {
   padding: 16px 0 12px 0;
   display: flex;