9.9

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

@@ -30,15 +30,28 @@
           <div class="three_box">合计:￥0.00</div>
         </div>
         <div class="d-top">
+
+
           <div class="d-b">
-            <div class="d-s">
+
-              <div class="checkbox" @click="changeBox" :class="{ 'active' : boxShow == true }">
+            <el-checkbox v-model="checkAll">活动优惠 <i class="el-icon-arrow-down"></i></el-checkbox>
-                <i class="el-icon-check" size="15" v-if="boxShow == true"></i>
-              </div>
-              <div class="d_text">活动优惠 <i class="el-icon-arrow-down"></i> </div>
-            </div>
             <div class="or_num">-￥0.00</div>
           </div>
+          <!-- 下拉列表插入-->
+          <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">
             <div class="d-s">
               <div class="checkbox" @click="changeBox1" :class="{ 'active' : boxShow1 == true }"><i
@@ -55,6 +68,7 @@
             </div>
             <div class="or_num">-￥220.00</div>
           </div>
+
         </div>
         <div class="three-top">
           <div class="addbor">
@@ -180,16 +194,170 @@
         </div>
       </div>
     </div>
+    <!--    弹窗-->
+    <el-dialog
+      title="新增会员"
+      :visible.sync="newMember"
+      width="439px"
+      center
+    >
+      <div class="tc-box">
+        <div>请顾客扫码领取会员卡</div>
+        <img src="./imgs/ewm.png" style="width: 180px;height: 180px;">
+        <div class="red-size">微信/支付宝扫一扫</div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+    <el-button type="primary" @click="newMember = false">打印二维码</el-button>
+  </span>
+    </el-dialog>
+
+    <el-dialog
+      title="扫码支付"
+      :visible.sync="ScanCodePayment"
+      width="439px"
+      center
+    >
+      <div class="tc-box">
+        <div class="title_">收款： <span style="color: #F44522">¥0.00</span></div>
+        <img src="./imgs/smzf.png" style="width: 171px;height: 122px;">
+        <div>请顾客出示付款码，或者刷脸支付</div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+    <el-button type="primary" @click="ScanCodePayment = false">关闭</el-button>
+  </span>
+    </el-dialog>
+    <el-dialog
+      title="现金支付"
+      :visible.sync="cashPayment"
+      width="439px"
+      center
+    >
+      <div class="tc-box">
+        <div class="title_">应收款： <span style="color: #F44522">¥98.00</span></div>
+        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+          <el-form-item label="收款金额" prop="name">
+            <el-input v-model="ruleForm.name">
+              <template slot="append">元</template>
+            </el-input>
+          </el-form-item>
+          <div class="t-size">
+            应找零：<span style="color: #F44522">¥20.00</span>
+          </div>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+    <el-button type="primary" @click="cashPayment = false">确定收款</el-button>
+  </span>
+    </el-dialog>
+    <el-dialog
+      title="挂单"
+      :visible.sync="hangingAnOrder"
+      width="542px"
+      center
+    >
+      <div class="tc-box">
+
+        <el-form :model="ruleForms" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+          <el-form-item label="挂单名称" prop="name">
+            <el-input v-model="ruleForms.name">
+              <template slot="append">元</template>
+            </el-input>
+          </el-form-item>
+          <div class="h-size">
+            挂单只可将非油商品进行挂单,挂单成功后可在取单页面进行取单操作、取单
+            时，可根据挂单名称取单
+          </div>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+         <el-button @click="hangingAnOrder = false">取 消</el-button>
+    <el-button type="primary" @click="hangingAnOrder = false">确 定</el-button>
+  </span>
+    </el-dialog>
+    <el-dialog
+      title="支付结果"
+      :visible.sync="paymentResults"
+      width="439px"
+      center
+    >
+      <div class="tc-box">
+
+        <div class="hui-box">
+          <div class="hui-box-bt">
+            <div>支付方式</div>
+            <div>现金</div>
+          </div>
+          <div class="hui-box-bt">
+            <div>实付金额</div>
+            <div>¥0.00</div>
+          </div>
+          <div class="hui-box-bt">
+            <div>订单金额</div>
+            <div>¥10.00</div>
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+    <el-button type="primary" @click="paymentResults = false">关闭（3s)</el-button>
+  </span>
+    </el-dialog>
+    <el-dialog
+      title="取单"
+      :visible.sync="pickUpTheOrder"
+      width="910px"
+      center
+    >
+      <pickUp></pickUp>
+      <span slot="footer" class="dialog-footer">
+         <el-button type="primary" @click="pickUpTheOrder = false">取消</el-button>
+         <el-button type="primary" @click="pickUpTheOrder = false">作废</el-button>
+        <el-button type="primary" @click="pickUpTheOrder = false">取单</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog
+      title="挂账"
+      :visible.sync="accountPending"
+      width="542px"
+      center
+    >
+      <accountPending></accountPending>
+      <span slot="footer" class="dialog-footer">
+             <el-button @click="accountPending = false">取 消</el-button>
+    <el-button type="primary" @click="accountPending = false">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog
+      title="会员充值"
+      :visible.sync="memberRecharge"
+      width="910px"
+      center
+    >
+      <memberRecharge></memberRecharge>
+      <span slot="footer" class="dialog-footer">
+             <el-button @click="memberRecharge = false">取 消</el-button>
+             <el-button type="primary" @click="memberRecharge = false">确认充值</el-button>
+      </span>
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
+import pickUp from './newHomeComponents/pickUpTheOrder.vue'
+import accountPending from './newHomeComponents/accountPending.vue'
+import memberRecharge from './newHomeComponents/memberRecharge.vue'
 export default {
   data() {
     return {
       boxShow: true,
       boxShow1: true,
       boxShow2: true,
+      checkList: [],
+      checkAll: true,
+      checkAll1: false,
+      checkAll2: false,
+      checkAll3: false,
+      isIndeterminate: true,
       cardList: [
         {
           name: '储值卡',
@@ -246,9 +414,35 @@ export default {
           id: '4'
         },
       ],
-      tabIndex: 0
+      tabIndex: 0,
+      newMember: false,
+      ScanCodePayment: false,
+      cashPayment: false,
+      ruleForm: {
+        name: '',
+      },
+      ruleForms: {
+        name: '',
+      },
+      rules: {
+        name: [
+          {required: true, message: '请输入活动名称', trigger: 'blur'},
+          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
+        ],
+      },
+      hangingAnOrder: false,
+      paymentResults: false,
+      pickUpTheOrder: false,
+      accountPending: false,
+      memberRecharge: true,
+
     }
   },
+  components:{
+    pickUp,
+    accountPending,
+    memberRecharge
+  },
   methods: {
     changeBox() {
       this.boxShow = !this.boxShow
@@ -278,6 +472,7 @@ input {
   font-size: inherit;
   color: inherit;
 }
+
 .new-contoner {
   width: 100%;
   box-sizing: border-box;
@@ -325,7 +520,9 @@ input {
   z-index: 9;
   box-sizing: border-box;
   padding: 15px;
-  display: flex;align-items: center;justify-content: space-between
+  display: flex;
+  align-items: center;
+  justify-content: space-between
 }
 
 .o-top {
@@ -388,6 +585,15 @@ input {
   margin: 15px 0px;
 }
 
+.x-d-b {
+  width: 90%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 15px 0px;
+  margin-left: 10%;
+}
+
 .d-top {
   width: 100%;
   box-sizing: border-box;
@@ -510,6 +716,7 @@ input {
   padding: 0px 20px;
   padding-top: 25px;
 }
+
 .r-top {
   width: 100%;
   display: flex;
@@ -521,6 +728,7 @@ input {
   font-size: 16px;
   color: #555555;
 }
+
 .input-box {
   width: 90%;
   height: 40px;
@@ -533,6 +741,7 @@ input {
   padding: 0px 15px;
   margin: 15px auto;
 }
+
 .gang {
   width: 24px;
   height: 3px;
@@ -646,6 +855,7 @@ input {
   align-items: center;
   justify-content: space-between;
 }
+
 .c-bottom {
   font-size: 14px;
   color: #333333;
@@ -654,6 +864,7 @@ input {
   padding: 10px 20px;
 
 }
+
 .bottom-b-d {
   position: absolute;
   bottom: 0px;
@@ -666,6 +877,7 @@ input {
   font-size: 16px;
   color: #777777;
 }
+
 .anniu-c {
   width: 80px;
   height: 36px;
@@ -677,6 +889,7 @@ input {
   justify-content: center;
   color: #777777;
 }
+
 .anniu-lv {
   width: 80px;
   height: 36px;
@@ -688,6 +901,7 @@ cursor: pointer;
   justify-content: center;
   color: #fff;
 }
+
 .anniu-lan {
   cursor: pointer;
   width: 80px;
@@ -700,6 +914,7 @@ cursor: pointer;
   justify-content: center;
   color: #fff;
 }
+
 .taber-top {
   width: 100%;
   box-sizing: border-box;
@@ -708,6 +923,7 @@ cursor: pointer;
   display: flex;
   align-items: center;
 }
+
 .taber-box {
   width: 100%;
   box-sizing: border-box;
@@ -716,26 +932,81 @@ cursor: pointer;
   display: flex;
   align-items: center;
 }
+
 .goods_name {
   width: 35%;
 
 
 }
+
 .stock_name {
   width: 15%;
   text-align: center;
 
 }
+
 .u-price_name {
   width: 15%;
   text-align: center;
 }
+
 .num_name {
   width: 15%;
   text-align: center;
 }
+
 .orerate_name {
   width: 20%;
   text-align: center;
 }
+
+.tc-box {
+  text-align: center;
+}
+
+.red-size {
+  font-size: 18px;
+  color: #F44522;
+}
+
+.title_ {
+  font-size: 28px;
+  color: #333333;
+  margin-bottom: 10px;
+}
+
+.r-size {
+  font-size: 16px;
+}
+
+.t-size {
+  width: 100%;
+  text-align: right;
+  font-size: 12px;
+  color: #333333;
+}
+
+.h-size {
+  font-size: 12px;
+  color: #999999;
+  margin-left: 100px;
+  text-align: left;
+}
+
+.hui-box {
+  width: 282px;
+
+  background: #FAFAFA;
+  margin: 15px auto;
+  box-sizing: border-box;
+  padding: 15px;
+}
+
+.hui-box-bt {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 15px auto;
+}
 </style>

fuintCashierWeb/src/views/cashier/NewComponents/newHomeComponents/accountPending.vue

@@ -0,0 +1,96 @@
+<script >
+export default {
+  data() {
+    return {
+      ruleForm: {
+        name: '',
+        region: '',
+        date1: '',
+        date2: '',
+        delivery: false,
+        type: [],
+        resource: '',
+        desc: ''
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入活动名称', trigger: 'blur' },
+          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+        ],
+        region: [
+          { required: true, message: '请选择活动区域', trigger: 'change' }
+        ],
+        date1: [
+          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
+        ],
+        date2: [
+          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
+        ],
+        type: [
+          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
+        ],
+        resource: [
+          { required: true, message: '请选择活动资源', trigger: 'change' }
+        ],
+        desc: [
+          { required: true, message: '请填写活动形式', trigger: 'blur' }
+        ]
+      }
+    };
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert('submit!');
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    }
+  }
+}
+</script>
+
+<template>
+<div>
+  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+    <el-form-item label="挂账单位" prop="region" style="width: 396px">
+      <el-select v-model="ruleForm.region" placeholder="请选择挂账单位">
+        <el-option label="挂账单位一" value="shanghai"></el-option>
+        <el-option label="挂账单位二" value="beijing"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="可用额度" prop="name" style="width: 396px">
+      <el-input v-model="ruleForm.name">
+        <template slot="append">元</template>
+      </el-input>
+      <div class="hui-size">可用额度为挂账人的最大可用额度,如挂账金额大于可用额度,将无法进行挂账</div>
+    </el-form-item>
+    <el-form-item label="挂帐金额" prop="name" style="width: 396px">
+      <el-input v-model="ruleForm.name">
+        <template slot="append">元</template>
+      </el-input>
+    </el-form-item>
+
+
+    <el-form-item label="备注" prop="desc" style="width: 396px">
+      <el-input type="textarea" v-model="ruleForm.desc"></el-input>
+    </el-form-item>
+    <el-form-item>
+
+    </el-form-item>
+  </el-form>
+</div>
+</template>
+
+<style scoped lang="scss">
+.hui-size{
+  font-size: 12px;
+  color: #999999;
+}
+</style>

fuintCashierWeb/src/views/cashier/NewComponents/newHomeComponents/memberRecharge.vue

@@ -0,0 +1,55 @@
+<script >
+export default {
+  data() {
+    return {
+      tabList:[
+        {
+          name:'电子储值卡',
+          num:0
+        },
+        {
+          name:'电子囤油卡',
+          num:1
+        },
+        {
+          name:'礼品卡兑换',
+          num:2
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<template>
+<div>
+  <div class="top-dd">
+    <div class="tab-dv" v-for="(item,index) in  tabList" :key="index">
+      {{item.name}}
+    </div>
+    <div v-if=""></div>
+  </div>
+</div>
+</template>
+
+<style scoped lang="scss">
+.top-dd{
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+.tab-dv{
+  width: 200px;
+  height: 36px;
+  background: #FFFFFF;
+  border-radius: 10px;
+  border: 1px solid #FF9655;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  color: #333333;
+  margin-right:10px ;
+  cursor: pointer;
+}
+</style>

fuintCashierWeb/src/views/cashier/NewComponents/newHomeComponents/pickUpTheOrder.vue

@@ -0,0 +1,76 @@
+<script >
+export default {
+  data() {
+    return {
+      input:'',
+      tableData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1517 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1519 弄'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1516 弄'
+      }]
+    }
+  }
+}
+</script>
+
+<template>
+<div class="s-">
+<div>
+  <el-input v-model="input" placeholder="请输入挂单名称备份"></el-input>
+  <div class="xz_">挂单1</div>
+  <div class="xz_">挂单2</div>
+</div>
+  <el-table
+    :data="tableData"
+    border
+    style="width: 100%;margin-left: 20px">
+    <el-table-column
+      prop="date"
+      label="商品名称"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="零售价"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="数量">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="金额">
+    </el-table-column>
+  </el-table>
+</div>
+</template>
+
+<style scoped lang="scss">
+.s-{
+  width: 100%;
+  display: flex;
+  margin-right: 20px;
+
+}
+.xz_{
+  font-weight: 400;
+  font-size: 16px;
+  color: #333333;
+  text-align: center;
+  margin: 15px;
+  cursor: pointer;
+}
+</style>