9.19

fuintCashierWeb/src/views/cashier/NewComponents/newHome.vue

@@ -3,6 +3,7 @@
     <div class="left-box">
       <div class="box-top">
         <div class="o-top" v-if="userInfo">
+          <div>
             <div class="d-s">
               <img src="./imgs/new_user.png" style="width: 28px;height: 28px;margin-right: 10px">
               <div>
@@ -14,10 +15,16 @@
                 </div>
               </div>
             </div>
+            <div class="d-s">
+              <div style="font-size: 12px;margin-right: 5px">储值卡：￥1000.000 </div>
+              <div style="font-size: 12px">囤油卡：￥1000.000</div>
+            </div>
+          </div>
+
           <div class="d-s">
             <div class="an_bor" @click="addMemberRecharge()">会员充值</div>
             <div class="an_bor">重置会员</div>
-            <div class="an_bor">赠送优惠券</div>
+            <div class="an_bor" @click="addFreeTicket()" >赠送优惠券</div>
           </div>
         </div>
         <div class="o-top" v-if="!userInfo">
@@ -58,15 +65,35 @@
             </div>
           </div>
           <div class="d-b">
-            <el-checkbox v-model="boxShow1">储值卡（账户余额:0元)</el-checkbox>
 
-            <div class="or_num">￥0.00</div>
+            <el-checkbox v-model="checkAll">优惠券 <i class="el-icon-arrow-down"></i></el-checkbox>
+            <div class="or_num">-￥0.00</div>
           </div>
-          <div class="d-b">
+          <!-- 下拉列表插入-->
-            <el-checkbox v-model="boxShow2">囤油卡（账户余额:1000元)</el-checkbox>
+          <div v-if="checkAll == true">
+            <div class="x-d-b">
+              <el-checkbox v-model="checkAll1">优惠券1</el-checkbox>
+              <div class="or_num">-￥0.00</div>
+            </div>
+            <div class="x-d-b">
+              <el-checkbox v-model="checkAll2">优惠券2</el-checkbox>
+              <div class="or_num">-￥0.00</div>
+            </div>
+            <div class="x-d-b">
+              <el-checkbox v-model="checkAll3">优惠券3</el-checkbox>
+              <div class="or_num">-￥0.00</div>
+            </div>
+          </div>
+<!--          <div class="d-b">-->
+<!--            <el-checkbox v-model="boxShow1">储值卡（账户余额:0元)</el-checkbox>-->
 
-            <div class="or_num">-￥220.00</div>
+<!--            <div class="or_num">￥0.00</div>-->
-          </div>
+<!--          </div>-->
+<!--          <div class="d-b">-->
+<!--            <el-checkbox v-model="boxShow2">囤油卡（账户余额:1000元)</el-checkbox>-->
+
+<!--            <div class="or_num">-￥220.00</div>-->
+<!--          </div>-->
 
         </div>
         <div class="three-top">
@@ -211,6 +238,41 @@
       </div>
     </div>
     <!--    弹窗-->
+    <el-dialog
+      title="送券"
+      :visible.sync="freeTicket"
+      width="800px"
+
+    >
+      <div class="ds-tc">
+        <div class="left_tc">
+          <div class="t-tc">
+            <div style="font-size: 18px;font-weight: bold">所有卡券</div>
+            <div style="font-size: 16px;color: #ff9655">打印所有二维码</div>
+          </div>
+          <div class="wrap-tc">
+            <div class="tc_wa" :class="{'tc-active' : freeIndex == index }" @click="setFreeIndex(index)"  v-for="(item,index) in freeTicketList">{{item.name}}</div>
+          </div>
+        </div>
+        <div class="right_tc">
+          <div style="font-weight: 600;font-size: 16px;color: #333333;text-align: center;margin-bottom: 15px">优惠价格固定1元</div>
+          <div style="font-weight: 600;font-size: 16px;color: #333333;margin-bottom: 10px" >油品立减券</div>
+          <div style="margin-bottom: 10px">可用时间：周一至周日 全天</div>
+          <div style="display: flex">
+            <div style="width: 70px">可用日期：</div>
+            <div style="width: 150px">2024-09-01 12:00:00至2024-09-01 12:00:00</div>
+          </div>
+          <div style="text-align: center;margin: 15px auto ">
+            <img src="./imgs/ewm.png" style="width: 200px;height: 200px">
+            <div>请顾客使用微信扫码领取</div>
+          </div>
+          <div style="font-weight: 600;font-size: 16px;color: #333333;margin-bottom: 5px">使用规则</div>
+          <div>优惠说明：价值10元代金券一张消费满100可用</div>
+        </div>
+      </div>
+
+
+    </el-dialog>
     <el-dialog
       title="新增会员"
       :visible.sync="newMember"
@@ -407,6 +469,34 @@ export default {
       checkAll2: false,
       checkAll3: false,
       isIndeterminate: true,
+      freeTicket:false,
+      freeIndex:0,
+      freeTicketList:[
+        {
+          name: '油品券',
+          num: '0'
+        },
+        {
+          name: '储值卡券',
+          num: '0'
+        },
+        {
+          name: '会员卡券',
+          num: '0'
+        },
+        {
+          name: '油品券',
+          num: '0'
+        },
+        {
+          name: '储值卡券',
+          num: '0'
+        },
+        {
+          name: '会员卡券',
+          num: '0'
+        },
+      ],
       cardList: [
         {
           name: '储值卡',
@@ -659,6 +749,12 @@ export default {
     addVip() {
       this.newMember = true
     },
+    setFreeIndex(index){
+      this.freeIndex = index
+    },
+    addFreeTicket(){
+      this.freeTicket = true
+    },
     addMemberRecharge() {
       this.memberRecharge = true
     },
@@ -970,7 +1066,7 @@ input {
 
 .an_bor {
   box-sizing: border-box;
-  padding: 10px;
+  padding: 5px;
   border: 1px solid #fff;
   border-radius: 50px;
   display: flex;
@@ -1390,7 +1486,27 @@ input {
 .tc-box {
   text-align: center;
 }
+.ds-tc{
+  width: 100%;
+  display: flex;
+}
+.left_tc{
+  width: 500px;
 
+}
+.right_tc{
+  width: 300px;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0px 15px;
+
+}
+.t-tc{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 .red-size {
   font-size: 18px;
   color: #F44522;
@@ -1448,4 +1564,26 @@ input {
   padding: 10px 5px;
   border-radius: 8px;
 }
+.wrap-tc{
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 15px;
+}
+.tc_wa{
+  width: 32%;
+  margin-bottom: 4%;
+  margin-right: 1%;
+  box-sizing: border-box;
+  padding: 10px;
+  background: url("./imgs/dx.png") no-repeat;
+  height: 65px;
+  background-size: 100% 100%;
+  cursor: pointer;
+}
+.tc-active{
+  background: url("./imgs/zxz.png") no-repeat !important;
+  background-size: 100% 100% !important;
+  color: #fff !important;
+}
 </style>