添加中间页面

zhangxiaoxu123

2023-01-03 4b5b989a31cbbd9f7738450516eed2f146bf1f1e

添加中间页面

 src/components/page/invoice/invoiceForm.vue

@@ -1,71 +1,77 @@
<template>
    <div class="invoiceForm-wrap">
        <div class="title">订单发票</div>
        <div class="invoiceForm-main">
            <div class="invoiceForm-main-inside">
                <div class="invoice-date-box">
                    <el-date-picker
                            :editable="false"
                            format="yyyy-MM"
                            value-format="yyyy-MM"
                            v-model="date"
                            type="month"
                            @change="changeDate"
                            placeholder="选择日期">
                    </el-date-picker>
                </div>
                <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        :offset="50"
                        :immediate-check="false"
                        @load="onLoad"
                >

                    <div v-for="(item,index) in invoiceData" :key="index">
                        <el-checkbox
                                v-model="item.isShow"
                                class="invoiceForm-block"
                                @change="handleCheckedCitiesChange(invoiceData)">
                            <div>
                                <div class="invoiceForm-content">

                                    <svg class="iconSvg" style="font-size: 12px" aria-hidden="true">
                                        <use xlink:href="#icon-shijian3"></use>
                                    </svg>
                                    {{item.enterTime}}
                                </div>
                                <div class="invoiceForm-content">

                                    <svg class="iconSvg" style="font-size: 12px" aria-hidden="true">
                                        <use xlink:href="#icon-shijian3"></use>
                                    </svg>
                                    {{item.outTime}}
                                </div>
                                <div class="invoiceForm-content">
                                    <svg class="iconSvg" style="font-size: 12px" aria-hidden="true">
                                        <use xlink:href="#icon-dizhi1"></use>
                                    </svg>
                                    {{item.address}}
                                </div>
                            </div>
                            <div class="money-main">
                                <h1 class="money-box">{{item.money}}<font class="money-small">元</font></h1>
                            </div>
                        </el-checkbox>
        <div v-if="isWeiXin ">
            <div class="title">订单发票</div>
            <div class="invoiceForm-main">
                <div class="invoiceForm-main-inside">
                    <div class="invoice-date-box">
                        <el-date-picker
                                :editable="false"
                                format="yyyy-MM"
                                value-format="yyyy-MM"
                                v-model="date"
                                type="month"
                                @change="changeDate"
                                placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </van-list>
                <div class="fapiao-btn">
                    <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                    <div class="fapiao-right">
                        <span class="money">金额：<font class="big">{{countMoney}}</font>元</span>
                        <el-button size="mini" @click="seeInvoice">下载发票</el-button>
                    <van-list
                            v-model="loading"
                            :finished="finished"
                            finished-text="没有更多了"
                            :offset="50"
                            :immediate-check="false"
                            @load="onLoad"
                    >

                        <div v-for="(item,index) in invoiceData" :key="index">
                            <el-checkbox
                                    v-model="item.isShow"
                                    class="invoiceForm-block"
                                    @change="handleCheckedCitiesChange(invoiceData)">
                                <div>
                                    <div class="invoiceForm-content">

                                        <svg class="iconSvg" style="font-size: 12px" aria-hidden="true">
                                            <use xlink:href="#icon-shijian3"></use>
                                        </svg>
                                        {{item.enterTime}}
                                    </div>
                                    <div class="invoiceForm-content">

                                        <svg class="iconSvg" style="font-size: 12px" aria-hidden="true">
                                            <use xlink:href="#icon-shijian3"></use>
                                        </svg>
                                        {{item.outTime}}
                                    </div>
                                    <div class="invoiceForm-content">
                                        <svg class="iconSvg" style="font-size: 12px" aria-hidden="true">
                                            <use xlink:href="#icon-dizhi1"></use>
                                        </svg>
                                        {{item.address}}
                                    </div>
                                </div>
                                <div class="money-main">
                                    <h1 class="money-box">{{item.money}}<font class="money-small">元</font></h1>
                                </div>
                            </el-checkbox>
                        </div>
                    </van-list>
                    <div class="fapiao-btn">
                        <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                        <div class="fapiao-right">
                            <span class="money">金额：<font class="big">{{countMoney}}</font>元</span>
                            <el-button size="mini" @click="seeInvoice">下载发票</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="middlePge-wrap" v-else>
            <div class="middlePge-main">
                <img src="../../../assets/images/middlePage.png" alt="">
            </div>
        </div>
    </div>
</template>

@@ -78,6 +84,7 @@
        },
        data() {
            return {
                isWeiXin: false,
                date:'',
                checkedInvoices: [1,2],
                invoiceData:[],
@@ -92,12 +99,22 @@
            }
        },
        created() {
            this.checkWeiXin()
            this.date = this.$byutil.dateFormat(new Date(), "yyyy-MM");
        },
        mounted() {
            this.getByCarNo()
        },
        methods: {
            checkWeiXin() {
                let userAgent = navigator.userAgent;
                console.log(userAgent)
                if (userAgent.includes("MicroMessenger")) {
                    this.isWeiXin = true
                } else {
                    this.isWeiXin = false
                }
            },
            onLoad() {
                this.loading = true
                this.current += 1
@@ -270,6 +287,18 @@
            top: 2px;
        }
    }
    .middlePge-wrap{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.7);
        .middlePge-main{
            width: 100%;
            height: 100%;
            img{
                width: 100%;
            }
        }
    }
    .iconSvg{
        width: 3.2vw  /* 24/7.5 */;
        height: 3.2vw  /* 24/7.5 */;

 src/components/page/invoice/middlePge.vue

@@ -1,21 +1,7 @@
<template>
   <div class="middlePge-wrap">
       <div class="middlePge-main">
           <div class="middlePge-block">
               <div class="num">1</div>
               <div class="wenzi-box">
                   <h1>点击右上角的</h1>
                   <div>...</div>
                   <h1>按钮</h1>
               </div>
           </div>
           <div class="middlePge-block">
               <div class="num">2</div>
               <div class="wenzi-box">
                   <h1>选择</h1>
                   <div>在浏览器中打开</div>
               </div>
           </div>
           <img src="../../../assets/images/middlePage.png" alt="">
       </div>
   </div>
</template>
@@ -38,40 +24,8 @@
      .middlePge-main{
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          padding: 18.67vw  /* 140/7.5 */ 5.33vw  /* 40/7.5 */;
          box-sizing: border-box;
          .middlePge-block{
              display: flex;
              margin-top: 6.67vw  /* 50/7.5 */;
              .num{
                  width: 5.33vw  /* 40/7.5 */;
                  height: 5.33vw  /* 40/7.5 */;
                  background: #f84e01;
                  border-radius: 50%;
                  line-height: 5.33vw;
                  text-align: center;
                  color: #fff;
              }
              .wenzi-box{
                  display: flex;
                  h1{
                      font-size: 3.73vw  /* 28/7.5 */;
                      color: #fff;
                      font-weight: normal;
                      letter-spacing: 2px;
                  }
                  div{
                      display: block;
                      border-radius: 1.33vw  /* 10/7.5 */;
                      box-shadow: 0 0 10px rgba(0,0,0,1);
                      padding: 0 2.67vw  /* 20/7.5 */;
                      color: #fff;
                      background-image: linear-gradient(to bottom,#49545a,#202227);
                      margin: 0 2px;
                  }
              }
          img{
              width: 100%;
          }
      }
  }