style: 发票申请ui调整

postcss.config.js

@@ -6,9 +6,12 @@ module.exports = {
             viewportHeight: 1334,    // (Number) The height of the viewport.
             unitPrecision: 3,       // (Number) The decimal numbers to allow the REM units to grow to.
             viewportUnit: 'vw',     // (String) Expected units.
-            selectorBlackList: ['.ignore', '.hairlines'],  // (Array) The selectors to ignore and leave as px.
+            selectorBlackList: ['.ignore', '.hairlines', 'wrap'],  // (Array) The selectors to ignore and leave as px.
             minPixelValue: 1,       // (Number) Set the minimum pixel value to replace.
-            mediaQuery: false       // (Boolean) Allow px to be converted in media queries.
+            mediaQuery: false,       // (Boolean) Allow px to be converted in media queries.
+            exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
+            landscape: false, // 是否处理横屏情况
+            propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
         },
     }
 

src/components/install.js

@@ -6,6 +6,7 @@ import uniPopup from './uni-popup/uni-popup.vue'
 import checkboxGroup from './checkbox-group/checkbox-group'
 import uniCountdown from './uni-countdown/uni-countdown'
 import UniNumberBox from './uni-number-box/uni-number-box'
+import uniLoadMore from './uni-load-more/uni-load-more'
 function plugins(Vue) {
     // console.log(33333, Vue)
     // Vue.component("View", View);
@@ -18,6 +19,7 @@ function plugins(Vue) {
     Vue.component("checkbox-group", checkboxGroup);
     Vue.component("uni-countdown", uniCountdown);
     Vue.component("uni-number-box", UniNumberBox);
+    Vue.component("uni-load-more", uniLoadMore);
 }
 
 export default plugins;

src/main.js

@@ -6,7 +6,7 @@ import App from './App';
 import sensors from 'sa-sdk-javascript';
 import store from './store/index.js';
 import VueRouter from 'vue-router';
-import { Icon } from 'vant';
+import { Icon, Checkbox, CheckboxGroup, RadioGroup, Radio, Field } from 'vant';
 import router from './routes/index.js';
 
 // import authorize from 'components/authorize/authorize.vue'
@@ -32,7 +32,7 @@ Vue.prototype.$sensors = sensors;
 Vue.config.productionTip = false;
 App.mpType = 'app';
 Vue.use(VueRouter);
-Vue.use(Icon);
+Vue.use(Icon).use(Checkbox).use(CheckboxGroup).use(RadioGroup).use(Radio).use(Field);
 
 const app = new Vue({
   store,

src/pages/parkingFee/list.js

@@ -0,0 +1,516 @@
+export const data = {
+  code: 0,
+  msg: 'success',
+  data: [
+    {
+      id: 'f3c4c26817704a828f7577818aa2099b',
+      parkServiceFee: null,
+      noCarNo: null,
+      parkPayFee: null,
+      addFee: null,
+      outTradeNo: '_1_3d7a93cd_1665282731885',
+      isUseFree: null,
+      type: 0,
+      openTime: null,
+      parkname: '杭州停车场',
+      parkcode: '989607',
+      parksign: 'hzpark01',
+      channel: null,
+      orderno: 'HZ202210091032120520',
+      tradeId: '3d7a93cd63f1485398b53335f8da49cc',
+      accountId: null,
+      merchantAccount: null,
+      status: 2,
+      remark: null,
+      carno: '浙C13011',
+      mobile: '15267617473',
+      vipcode: 'KERRY100302467',
+      vipName: '洪海涛',
+      memberGrade: '1',
+      entertime: '2022-10-08 17:50:00',
+      outtime: '2022-10-09 10:32:11',
+      serviceMin: 1002.0,
+      servicehour: 16.7,
+      servicefee: 10000,
+      bonusfee: 0,
+      bonus: 0,
+      newMemberBonus: null,
+      newMemberBonusMin: 0,
+      bonusFeeMin: 0,
+      couponfee: 0,
+      couponfeeMin: 0,
+      otherfee: null,
+      consumeFee: 0,
+      consumeFeeHour: 0,
+      consumeFeeMin: 0,
+      consumeTicket: null,
+      useConsumeFee: 0.0,
+      memberGradeFee: 0,
+      memberGradeFeeHour: 0,
+      memberGradeFeeMin: 0,
+      paperCouponFee: 0,
+      paperCouponFeeMin: 0,
+      paperCoupons: null,
+      paperCouponCode: null,
+      firstParkFee: 0,
+      firstParkFeeMin: 0,
+      payfee: 10000,
+      doflag: null,
+      totalfee: 0,
+      usetotalfee: 0,
+      paytype: 3,
+      paykind: '微信',
+      paychannel: null,
+      integraladjustid: null,
+      refundIntegralAdjustId: null,
+      couponcode: null,
+      mallid: '8a84853b7c91ac5b017c961a9b2a030d',
+      createuser: 'sys_miniprogram',
+      updateuser: 'sys_miniprogram',
+      deptId: null,
+      groupId: '8a84853b7c91ac5b017c962dab55030e',
+      creator: null,
+      createDate: '2022-10-09 10:32:12',
+      updater: null,
+      updateDate: '2022-10-09 10:32:14',
+      openId: 'oudWQ5SCDElfn-IQH6eBR5JesOz4',
+      refundNo: null,
+      wxState: null,
+      isInvoice: 0,
+      invoiceId: null,
+      payStatus: 2,
+      notifyStatus: null,
+      timeoutStatus: null,
+      refundStatus: 0,
+      parkMallCode: null,
+      projectId: null,
+      pspName: null,
+      newMemeberBonusFee: null,
+      kipUserId: null,
+    },
+    {
+      id: '19e44e4cd6e342b197d15e7698551302',
+      parkServiceFee: null,
+      noCarNo: null,
+      parkPayFee: 1,
+      addFee: null,
+      outTradeNo: '_1_3a0a8f22_1665282646069',
+      isUseFree: null,
+      type: 0,
+      openTime: '2022-10-09 10:31:07',
+      parkname: '杭州停车场',
+      parkcode: '989607',
+      parksign: 'hzpark01',
+      channel: null,
+      orderno: 'HZ2022100910304623625',
+      tradeId: '3a0a8f2235e943d2bf078f991b622145',
+      accountId: '4200001548202210091883107855',
+      merchantAccount: '1614666071',
+      status: 6,
+      remark: 'null-微信回调时，处理停车缴费业务成功~',
+      carno: '浙C13010',
+      mobile: '15267617473',
+      vipcode: 'KERRY100302467',
+      vipName: '洪海涛',
+      memberGrade: '1',
+      entertime: '2022-10-08 17:49:29',
+      outtime: '2022-10-09 10:31:08',
+      serviceMin: 1001.0,
+      servicehour: 16.68,
+      servicefee: 9000,
+      bonusfee: 0,
+      bonus: 0,
+      newMemberBonus: null,
+      newMemberBonusMin: 0,
+      bonusFeeMin: 0,
+      couponfee: 0,
+      couponfeeMin: 0,
+      otherfee: null,
+      consumeFee: 0,
+      consumeFeeHour: 0,
+      consumeFeeMin: 0,
+      consumeTicket: null,
+      useConsumeFee: 0.0,
+      memberGradeFee: 1000,
+      memberGradeFeeHour: 1,
+      memberGradeFeeMin: 60,
+      paperCouponFee: 0,
+      paperCouponFeeMin: 0,
+      paperCoupons: null,
+      paperCouponCode: null,
+      firstParkFee: 0,
+      firstParkFeeMin: 0,
+      payfee: 9000,
+      doflag: null,
+      totalfee: 1000,
+      usetotalfee: 1000,
+      paytype: 3,
+      paykind: '微信',
+      paychannel: null,
+      integraladjustid: null,
+      refundIntegralAdjustId: null,
+      couponcode: null,
+      mallid: '8a84853b7c91ac5b017c961a9b2a030d',
+      createuser: 'sys_miniprogram',
+      updateuser: 'sys_miniprogram',
+      deptId: null,
+      groupId: '8a84853b7c91ac5b017c962dab55030e',
+      creator: null,
+      createDate: '2022-10-09 10:30:46',
+      updater: null,
+      updateDate: '2022-10-09 10:31:08',
+      openId: 'oudWQ5SCDElfn-IQH6eBR5JesOz4',
+      refundNo: null,
+      wxState: 'SUCCESS',
+      isInvoice: 0,
+      invoiceId: null,
+      payStatus: 1,
+      notifyStatus: 0,
+      timeoutStatus: null,
+      refundStatus: 0,
+      parkMallCode: null,
+      projectId: null,
+      pspName: 'wechatpay',
+      newMemeberBonusFee: null,
+      kipUserId: null,
+    },
+  ],
+};
+
+export const detail = {
+  code: 0,
+  msg: 'success',
+  data: {
+    id: 'f3c4c26817704a828f7577818aa2099b',
+    parkServiceFee: null,
+    noCarNo: null,
+    parkPayFee: null,
+    addFee: null,
+    outTradeNo: '_1_3d7a93cd_1665282731885',
+    isUseFree: null,
+    type: 0,
+    openTime: null,
+    parkname: '杭州停车场',
+    parkcode: '989607',
+    parksign: 'hzpark01',
+    channel: null,
+    orderno: 'HZ202210091032120520',
+    tradeId: '3d7a93cd63f1485398b53335f8da49cc',
+    accountId: null,
+    merchantAccount: null,
+    status: 2,
+    remark: null,
+    carno: '浙C13011',
+    mobile: '15267617473',
+    vipcode: 'KERRY100302467',
+    vipName: '洪海涛',
+    memberGrade: '1',
+    entertime: '2022-10-08 17:50:00',
+    outtime: '2022-10-09 10:32:11',
+    serviceMin: 1002.0,
+    servicehour: 16.7,
+    servicefee: 10000,
+    bonusfee: 0,
+    bonus: 0,
+    newMemberBonus: null,
+    newMemberBonusMin: 0,
+    bonusFeeMin: 0,
+    couponfee: 0,
+    couponfeeMin: 0,
+    otherfee: null,
+    consumeFee: 0,
+    consumeFeeHour: 0,
+    consumeFeeMin: 0,
+    consumeTicket: null,
+    useConsumeFee: 0.0,
+    memberGradeFee: 0,
+    memberGradeFeeHour: 0,
+    memberGradeFeeMin: 0,
+    paperCouponFee: 0,
+    paperCouponFeeMin: 0,
+    paperCoupons: null,
+    paperCouponCode: null,
+    firstParkFee: 0,
+    firstParkFeeMin: 0,
+    payfee: 10000,
+    doflag: null,
+    totalfee: 0,
+    usetotalfee: 0,
+    paytype: 3,
+    paykind: '微信',
+    paychannel: null,
+    integraladjustid: null,
+    refundIntegralAdjustId: null,
+    couponcode: null,
+    mallid: '8a84853b7c91ac5b017c961a9b2a030d',
+    createuser: 'sys_miniprogram',
+    updateuser: 'sys_miniprogram',
+    deptId: null,
+    groupId: '8a84853b7c91ac5b017c962dab55030e',
+    creator: null,
+    createDate: '2022-10-09 10:32:12',
+    updater: null,
+    updateDate: '2022-10-09 10:32:14',
+    openId: 'oudWQ5SCDElfn-IQH6eBR5JesOz4',
+    refundNo: null,
+    wxState: null,
+    isInvoice: 0,
+    invoiceId: null,
+    payStatus: 2,
+    notifyStatus: null,
+    timeoutStatus: null,
+    refundStatus: 0,
+    parkMallCode: null,
+    projectId: null,
+    pspName: null,
+    newMemeberBonusFee: null,
+    kipUserId: null,
+  },
+};
+
+export const detailError = {
+  code: 0,
+  msg: 'success',
+  data: {
+    id: '19e44e4cd6e342b197d15e7698551302',
+    parkServiceFee: null,
+    noCarNo: null,
+    parkPayFee: 1,
+    addFee: null,
+    outTradeNo: '_1_3a0a8f22_1665282646069',
+    isUseFree: null,
+    type: 0,
+    openTime: '2022-10-09 10:31:07',
+    parkname: '杭州停车场',
+    parkcode: '989607',
+    parksign: 'hzpark01',
+    channel: null,
+    orderno: 'HZ2022100910304623625',
+    tradeId: '3a0a8f2235e943d2bf078f991b622145',
+    accountId: '4200001548202210091883107855',
+    merchantAccount: '1614666071',
+    status: 6,
+    remark: 'null-微信回调时，处理停车缴费业务成功~',
+    carno: '浙C13010',
+    mobile: '15267617473',
+    vipcode: 'KERRY100302467',
+    vipName: '洪海涛',
+    memberGrade: '1',
+    entertime: '2022-10-08 17:49:29',
+    outtime: '2022-10-09 10:31:08',
+    serviceMin: 1001.0,
+    servicehour: 16.68,
+    servicefee: 10000,
+    bonusfee: 0,
+    bonus: 0,
+    newMemberBonus: null,
+    newMemberBonusMin: 0,
+    bonusFeeMin: 0,
+    couponfee: 0,
+    couponfeeMin: 0,
+    otherfee: null,
+    consumeFee: 0,
+    consumeFeeHour: 0,
+    consumeFeeMin: 0,
+    consumeTicket: null,
+    useConsumeFee: 0.0,
+    memberGradeFee: 1000,
+    memberGradeFeeHour: 1,
+    memberGradeFeeMin: 60,
+    paperCouponFee: 0,
+    paperCouponFeeMin: 0,
+    paperCoupons: null,
+    paperCouponCode: null,
+    firstParkFee: 0,
+    firstParkFeeMin: 0,
+    payfee: 9000,
+    doflag: null,
+    totalfee: 1000,
+    usetotalfee: 1000,
+    paytype: 3,
+    paykind: '微信',
+    paychannel: null,
+    integraladjustid: null,
+    refundIntegralAdjustId: null,
+    couponcode: null,
+    mallid: '8a84853b7c91ac5b017c961a9b2a030d',
+    createuser: 'sys_miniprogram',
+    updateuser: 'sys_miniprogram',
+    deptId: null,
+    groupId: '8a84853b7c91ac5b017c962dab55030e',
+    creator: null,
+    createDate: '2022-10-09 10:30:46',
+    updater: null,
+    updateDate: '2022-10-09 10:31:08',
+    openId: 'oudWQ5SCDElfn-IQH6eBR5JesOz4',
+    refundNo: null,
+    wxState: 'SUCCESS',
+    isInvoice: 0,
+    invoiceId: null,
+    payStatus: 1,
+    notifyStatus: 0,
+    timeoutStatus: null,
+    refundStatus: 0,
+    parkMallCode: null,
+    projectId: null,
+    pspName: 'wechatpay',
+    newMemeberBonusFee: null,
+    kipUserId: null,
+  },
+};
+
+export const myNotInvoicedList = {
+  code: 0,
+  msg: 'success',
+  data: [
+    {
+      id: '19e44e4cd6e342b197d15e7698551302',
+      parkServiceFee: null,
+      noCarNo: null,
+      parkPayFee: 1,
+      addFee: null,
+      outTradeNo: '_1_3a0a8f22_1665282646069',
+      isUseFree: null,
+      type: 0,
+      openTime: '2022-10-09 10:31:07',
+      parkname: '杭州停车场',
+      parkcode: '989607',
+      parksign: 'hzpark01',
+      channel: null,
+      orderno: 'HZ2022100910304623625',
+      tradeId: '3a0a8f2235e943d2bf078f991b622145',
+      accountId: '4200001548202210091883107855',
+      merchantAccount: '1614666071',
+      status: 6,
+      remark: 'null-微信回调时，处理停车缴费业务成功~',
+      carno: '浙C13010',
+      mobile: '15267617473',
+      vipcode: 'KERRY100302467',
+      vipName: '洪海涛',
+      memberGrade: '1',
+      entertime: '2022-10-08 17:49:29',
+      outtime: '2022-10-09 10:31:08',
+      serviceMin: 1001.0,
+      servicehour: 16.68,
+      servicefee: 10000,
+      bonusfee: 0,
+      bonus: 0,
+      newMemberBonus: null,
+      newMemberBonusMin: 0,
+      bonusFeeMin: 0,
+      couponfee: 0,
+      couponfeeMin: 0,
+      otherfee: null,
+      consumeFee: 0,
+      consumeFeeHour: 0,
+      consumeFeeMin: 0,
+      consumeTicket: null,
+      useConsumeFee: 0.0,
+      memberGradeFee: 1000,
+      memberGradeFeeHour: 1,
+      memberGradeFeeMin: 60,
+      paperCouponFee: 0,
+      paperCouponFeeMin: 0,
+      paperCoupons: null,
+      paperCouponCode: null,
+      firstParkFee: 0,
+      firstParkFeeMin: 0,
+      payfee: 9000,
+      doflag: null,
+      totalfee: 1000,
+      usetotalfee: 1000,
+      paytype: 3,
+      paykind: '微信',
+      paychannel: null,
+      integraladjustid: null,
+      refundIntegralAdjustId: null,
+      couponcode: null,
+      mallid: '8a84853b7c91ac5b017c961a9b2a030d',
+      createuser: 'sys_miniprogram',
+      updateuser: 'sys_miniprogram',
+      deptId: null,
+      groupId: '8a84853b7c91ac5b017c962dab55030e',
+      creator: null,
+      createDate: '2022-10-09 10:30:46',
+      updater: null,
+      updateDate: '2022-10-09 10:31:08',
+      openId: 'oudWQ5SCDElfn-IQH6eBR5JesOz4',
+      refundNo: null,
+      wxState: 'SUCCESS',
+      isInvoice: 0,
+      invoiceId: null,
+      payStatus: 1,
+      notifyStatus: 0,
+      timeoutStatus: null,
+      refundStatus: 0,
+      parkMallCode: null,
+      projectId: null,
+      pspName: 'wechatpay',
+      newMemeberBonusFee: null,
+      kipUserId: null,
+    },
+  ],
+};
+
+export const myParkOrderListByInvoiceId = {
+  code: 0,
+  msg: 'success',
+  data: {
+    invoiceAmount: '9000',
+    payNumber: 1,
+    list: [
+      {
+        participationTime: null,
+        batchName: null,
+        orderNo: 'HZ2022100910304623625',
+        parkName: '杭州停车场',
+        exchangeTime: null,
+        exchangeNum: null,
+        invoiceAmount: 9000,
+        invoiceCategory: 0,
+        signUp: null,
+        serviceHour: 16.68,
+        carNo: '浙C13010',
+        invoiceId: '1579366923340320769',
+        id: '1579366923365486593',
+        applyTime: null,
+        enterTime: '2022-10-08 17:49:29',
+        outTime: '2022-10-09 10:31:08',
+      },
+    ],
+  },
+};
+export const myParkOrderListByIds = {
+  code: 0,
+  msg: 'success',
+  data: {
+    invoiceAmount: '9000',
+    payNumber: 1,
+    list: [
+      {
+        serviceHour: 16.68,
+        serviceFee: 9000,
+        orderNo: 'HZ2022100910304623625',
+        parkName: '杭州停车场',
+        carNo: '浙C13010',
+        mallid: '8a84853b7c91ac5b017c961a9b2a030d',
+        id: '19e44e4cd6e342b197d15e7698551302',
+        is_invoice: 0,
+        enterTime: '2022-10-08 17:49:29',
+        outTime: '2022-10-09 10:31:08',
+      },
+      {
+        serviceHour: 16.68,
+        serviceFee: 9000,
+        orderNo: 'HZ2022100910304623625',
+        parkName: '杭州停车场',
+        carNo: '浙C13010',
+        mallid: '8a84853b7c91ac5b017c961a9b2a030d',
+        id: '19e44e4cd6e342b197d15e7698551302',
+        is_invoice: 0,
+        enterTime: '2022-10-08 17:49:29',
+        outTime: '2022-10-09 10:31:08',
+      },
+    ],
+  },
+};

src/pages/parkingFee/parkingReceipt/parkingReceipt.vue

@@ -1,193 +1,93 @@
 <template>
-  <scroll-view
-    class="scroll-Y"
-    id="slideview"
-    scroll-y
-    lower-threshold="50"
-    scroll-top="0"
-    scroll-left="0"
-    enable-flex="true"
-    scroll-with-animation="false"
-    enable-back-to-top="false"
-    @scrolltolower="scrollLower"
-  >
+  <div class="scroll-Y" id="slideview" scroll-y lower-threshold="50" scroll-top="0" scroll-left="0" enable-flex="true"
+    scroll-with-animation="false" enable-back-to-top="false" @scrolltolower="scrollLower">
     <!--    <authorize ref="authorize"></authorize>-->
     <div class="choice" v-if="custTypeId === 0">
-      <div
-        v-for="(item, index) in invoiceList"
-        :key="index"
-        :class="index + 1 === tabIndex ? 'actived' : ''"
-        @click="invoice(index + 1)"
-      >{{ item }}
-      </div
-      >
+      <div v-for="(item, index) in invoiceList" :key="index" :class="index + 1 === tabIndex ? 'actived' : ''"
+        @click="invoice(index + 1)">{{ item }}
+      </div>
     </div>
-    <div
-      class="shanghaiClassify"
-      :class="{
-        blueClassify: custTypeId === 1,
-        greenClassify: custTypeId === 2,
-      }"
-      v-else
-    >
-      <div
-        :class="{ classifyItem: true, isChecked: tabIndex === index + 1 }"
-        v-for="(item, index) in invoiceList"
-        :key="index"
-      >
+    <div class="shanghaiClassify" :class="{
+      blueClassify: custTypeId === 1,
+      greenClassify: custTypeId === 2,
+    }" v-else>
+      <div :class="{ classifyItem: true, isChecked: tabIndex === index + 1 }" v-for="(item, index) in invoiceList"
+        :key="index">
         <div @click="invoice(index + 1)">{{ item }}</div>
       </div>
     </div>
-    <div class="choice_select" v-if="custTypeId === 0"
-    >
-      <div :class="tabIndex == 1 ? 'choice_select_ews' : 'choice_select_ew'"
-      />
+    <div class="choice_select" v-if="custTypeId === 0">
+      <div :class="tabIndex == 1 ? 'choice_select_ews' : 'choice_select_ew'" />
     </div>
     <!-- 开票列表 -->
     <scroll-view class="choice_card" :style="{ height: height }">
       <div class="suggestion-list">
-        <checkbox-group @change="checkboxChange" style="background-color: #f2f2f2">
-          <label
-            class="uni-list-cell uni-list-cell-pd"
-            @click="goToDeatil(item)"
-            v-for="(item, index) in list"
-            :key="index"
-            :index="item.id"
-            :activity="total - 1"
-          >
+        <van-checkbox-group v-model="ids" @change="checkboxChange">
+          <label class="uni-list-cell uni-list-cell-pd" @click.stop="goToDeatil(item)" v-for="(item, index) in list"
+            :key="index" :index="item.id" :activity="total - 1">
             <div class="choice_card_item">
-              <div class="choice_card_index choice_card_index1">
-                <div v-if="tabIndex == 1"
-                >{{ item.orderno }}-{{ item.carno }}
-                </div
-                >
-                <div v-else>{{ item.invoiceTitleName }}的停车发票</div>
-                <div v-if="tabIndex == 1" style="color: #ed1c24"
-                >￥{{ (item.payfee / 100).toFixed(2) }}
-                </div
-                >
-                <div v-else style="color: #ed1c24"
-                >￥{{ (item.invoiceAmount / 100).toFixed(2) }}
-                </div
-                >
-              </div>
-              <div
-                class="choice_card_index choice_card_index2"
-                v-if="tabIndex == 1"
-              >{{ item.parkname }}
-              </div
-              >
-              <div
-                class="choice_card_index choice_card_index3"
-                v-if="tabIndex == 1"
-              >
-                <div>入场时间: {{ item.entertime }}</div>
-                <div
-                >
-                  <checkbox
-                    color="#ED1C24"
-                    :value="item.id"
-                    :checked="item.checkted"
-                  />
+              <div class="carno-box">
+                <div :class="['carno', ids.indexOf(item.id) > -1 && 'active']" v-if="tabIndex == 1">
+                  <span>{{ item.carno }}</span>
+                </div>
+                <div class="invoiceTitleName" v-else>
+                  {{ item.invoiceTitleName }}的停车发票&nbsp;<van-icon name="arrow" color="#D8DAE0"/>
+                </div>
+                <div :class="['payfee', (ids.indexOf(item.id) > -1 || tabIndex == 2) && 'active']">
+                  ￥{{ (item.payfee / 100).toFixed(2) }}
                 </div>
               </div>
-              <div
-                class="choice_card_index choice_card_index2"
-                v-if="tabIndex == 1"
-              >
-                停车时长: {{ item.serviceMin | parkingTime }}
-              </div>
-              <div
-                class="choice_card_index choice_card_index2"
-                v-if="tabIndex == 2"
-              >税号: {{ item.corporationTax }}
-              </div
-              >
-              <div
-                class="choice_card_index choice_card_index3"
-                v-if="tabIndex == 2"
-                style="padding-bottom: 20px"
-              >
-                <div
-                >开票时间:
-                  {{ item.paperDrewDate ? item.paperDrewDate : '-' }}
-                </div
-                >
-                <!-- 0：已提交申请(待开票) 1:开票中  2：开票完成 3：开票失败 -->
-                <div
-                  class="choice_card_status"
-                  v-if="item.status === 2"
-                  style="color: #8cc63f"
-                >
-                  开票完成
-                  <img
-                    class="arrow"
-                    :src="arrowIcon"
-                    mode="heightFix"
-                    style="height: 40px"
-                  ></img>
+              <div class="line"></div>
+              <!-- 未开票 -->
+              <div class="my-not-invoiced-list" v-if="tabIndex == 1">
+                <div class="left">
+                  <div class="choice_card_index">{{ item.parkname }}</div>
+                  <div class="choice_card_index">订单号: {{ item.orderno }}</div>
+                  <div class="choice_card_index">入场时间: {{ item.entertime }}</div>                
+                  <div class="choice_card_index mb0">停车时长: {{ item.serviceMin | parkingTime }}</div>
+                </div>
+                <div class="right" @click.stop>
+                  <van-checkbox color="#ED1C24" :name="item.id" icon-size="20"   checked-color="#064C8A"/>
                 </div>
-                <div
-                  class="choice_card_status"
-                  v-else-if="item.status === 3"
-                  style="color: #ed1c24"
-                >
-                  开票失败
-                  <img
-                    class="arrow"
-                    :src="arrowIcon"
-                    mode="heightFix"
-                    style="height: 40px"
-                  ></img>
+              </div>
+              <!-- 已开票 -->
+              <div class="my-not-invoiced-list my-invoiced-list" v-if="tabIndex == 2">
+                <div class="left">
+                  <div class="choice_card_index">税号: {{ item.corporationTax }}</div>
+                  <div class="choice_card_index">开票时间: {{ item.paperDrewDate ? item.paperDrewDate : '-' }}</div>                
+                  <div class="choice_card_index mb0">停车时长: {{ item.serviceMin | parkingTime }}</div>
                 </div>
-                <div class="choice_card_status" v-else style="color: #f7931e">
-                  开票中
-                  <img
-                    class="arrow"
-                    :src="arrowIcon"
-                    mode="heightFix"
-                    style="height: 40px"
-                  ></img>
+                <div class="right">
+                  <!-- 0：已提交申请(待开票) 1:开票中  2：开票完成 3：开票失败 -->
+                  <div class="choice_card_status">
+                    {{['开票中','开票完成','开票失败'][item.status ? item.status : 1]}}
+                  </div>
                 </div>
               </div>
             </div>
           </label>
-        </checkbox-group>
+        </van-checkbox-group>
         <div v-show="isLoadMore" :class="{ noData: !list.length }">
-          <img :src="noData" v-if="!list.length" mode="widthFix"></img>
+          <img :src="noData" v-if="!list.length" mode="widthFix" />
           <span v-if="!list.length">暂无数据</span>
-          <uni-load-more :status="loadStatus" v-else></uni-load-more>
+          <div v-else class="no-more-data">没有更多了</div>
         </div>
-        <!-- <div class="noData" v-if="!list.length">
-                        <span>暂无数据</span>
-                    </div> -->
       </div>
     </scroll-view>
     <div class="flewx" v-if="tabIndex == 1">
-      <!-- <radio-group class="checkAll" @click="isCheckAll = !isCheckAll">
-				<label>
-					<radio style="transform: scale(0.7);position: relative;top: -2px;"
-						color='#1FBB81' value="all" :checked="isCheckAll" /> 本页全选
-				</label>
-			</radio-group> -->
       <div class="priceBtn">
-        <div
-        >开票金额
-          <span class="price">{{ (totalNum / 100).toFixed(2) }} 元</span></div
-        >
-        <div
-          :class="{
-            flewx_index3: true,
-            blue_flewx_index3: custTypeId === 1,
-            green_flewx_index3: custTypeId === 2,
-          }"
-          @click="goToInvoicing"
-        >去开票
-        </div
-        >
+        <div>开票金额
+          <span class="price">{{ (totalNum / 100).toFixed(2) }} 元</span>
+        </div>
+        <div :class="{
+          flewx_index3: true,
+          blue_flewx_index3: custTypeId === 1,
+          green_flewx_index3: custTypeId === 2,
+        }" @click="goToInvoicing">去开票
+        </div>
       </div>
     </div>
-  </scroll-view>
+  </div>
 </template>
 
 <script>
@@ -196,11 +96,12 @@ const app = {}
 import moment from 'moment'
 import arrowIcon from '../static/images/arrows.png'
 import noData from '@/static/images/parkingReceipt-noData.png'
-import {mapState} from 'vuex'
+import { mapState } from 'vuex'
 import authorize from '@/components/authorize/authorize.vue'
 import MemberCacheTool from '@/utils/member-cache-tool.js'
-import {REG_SOURCE} from '@/constants.js'
-import uni from '../../../utils/uniHooks'
+import { REG_SOURCE } from '@/constants.js'
+import uni from '@/utils/uniHooks'
+import { myNotInvoicedList } from '../list'
 
 export default {
   data() {
@@ -236,11 +137,14 @@ export default {
     },
     ...mapState({
       custTypeId: (state) => state.custTypeId,
+      mallId: (state) => state.mallId,
+      openId: (state) => state.openid,
+      member: (state) => state.member,
     }),
   },
-  onLoad(options) {
+  created() {
     // this.getInvoiceList();
-    this.options = options
+    // this.options = options
     // 埋点本地化
     this.preUrl = uni.getStorageSync('previousUrl')
     uni.setStorageSync(
@@ -248,22 +152,15 @@ export default {
       '/pages/parkingFee/parkingReceipt/parkingReceipt.vue'
     )
   },
-  onShow() {
-    const member = uni.getStorageSync('member')
-    if (member) {
-      this.invoice(1)
-    } else {
-      const regSource = REG_SOURCE.PARKING
-      app.globalData.regSource = regSource
-      if (this.options?.regSource) {
-        app.globalData.regSource = REG_SOURCE[this.options?.regSource]
-      }
-      if (this.options?.tpName) {
-        app.globalData.tpName = this.options?.tpName
-      }
-      this.$refs.authorize.login('/pages/parkingFee/parkingFee', () => {
-        this.invoice(1)
+  mounted() {
+    // const member = uni.getStorageSync('member')
+    setTimeout(() => {
+      uni.setNavigationBarTitle({
+        title: "停车发票"
       })
+    }, 300)
+    if (this.member) {
+      this.invoice(1)
     }
   },
   watch: {},
@@ -301,26 +198,26 @@ export default {
     sensorsClick(eventName, params) {
       let optionsQuery = uni.getStorageSync('options_query')
       let fixedParams = {
-          cta_itemno: '',
-          cta_name: '',
-          previous_url: this.preUrl || '',
-          $brand_id: uni.getStorageSync('groupId'),
-          $location: uni.getStorageSync('mallid'),
-          $channel: optionsQuery.channel || '',
-          // $utm_lbs: this.optionsQuery.utm_lbs || '',
-          $utm_channel: optionsQuery.utm_channel || '',
-          $utm_method: optionsQuery.utm_method || '',
-          $utm_source: optionsQuery.utm_source || '',
-          $utm_function: optionsQuery.utm_function || '',
-          $utm_user: optionsQuery.utm_user || '',
-        },
+        cta_itemno: '',
+        cta_name: '',
+        previous_url: this.preUrl || '',
+        $brand_id: uni.getStorageSync('groupId'),
+        $location: uni.getStorageSync('mallid'),
+        $channel: optionsQuery.channel || '',
+        // $utm_lbs: this.optionsQuery.utm_lbs || '',
+        $utm_channel: optionsQuery.utm_channel || '',
+        $utm_method: optionsQuery.utm_method || '',
+        $utm_source: optionsQuery.utm_source || '',
+        $utm_function: optionsQuery.utm_function || '',
+        $utm_user: optionsQuery.utm_user || '',
+      },
         finalParams = Object.assign(fixedParams, params)
       this.$sensors.track(eventName, finalParams)
     },
     goToDeatil(item) {
-      if (this.tabIndex === 2 && item.status === 2) {
+      if (this.tabIndex === 2 && item.status === 2 || true) {
         this.$router.push({
-          path: '/pages/parkingFee/parkingReceipt/parkingInvoice?id=' + item.id,
+          path: '/parkingInvoice?id=' + item.id,
         })
       }
     },
@@ -341,7 +238,7 @@ export default {
       }
       this.$router.push({
         path:
-          '/pages/parkingFee/parkingReceipt/parkingApplication?ids=' +
+          '/parkingApplication?ids=' +
           this.ids,
       })
     },
@@ -383,7 +280,11 @@ export default {
         method: 'POST',
         data: data,
         header: JSON.parse(uni.getStorageSync('handleUser')),
-        success: (res) => {
+        success: (res1) => {
+          console.log(379);
+          const res = {
+            data: myNotInvoicedList
+          }
           if (res.data.code === 0) {
             if (res.data.data) {
               this.total = res.data.data.length
@@ -423,7 +324,10 @@ export default {
         },
       })
     },
-    checkboxChange(e) {
+    checkboxChange(ids) {
+      console.log(423, ids);
+      this.calculatePrice(ids);
+      return
       const itemId = e.detail.value;
       let list = this.list;
       for (let i = 0; i < list.length; i++) {
@@ -437,6 +341,19 @@ export default {
       this.calculatePrice(list);
     },
     calculatePrice(list) {
+      if (list && list.length > 0) {
+        this.totalNum = this.list.reduce((total, item) => {
+          if (list.indexOf(item.id) > -1) {
+            console.log(442, item.payfee);
+            total = total + item.payfee
+          }
+          return total
+        }, 0);
+      } else {
+        this.totalNum = 0
+      }
+      /* console.log(439, this.list)
+      return
       if (list && list.length > 0) {
         let totalNum = 0;
         let ids = [];
@@ -449,7 +366,7 @@ export default {
         });
         this.ids = ids;
         this.totalNum = totalNum;
-      }
+      } */
     },
   },
 }
@@ -462,16 +379,16 @@ export default {
   flex-direction: column;
   height: 100vh;
   // padding-bottom: 100px;
-  background: #f2f2f2;
+  background: #F4F7FF;
 
   .choice {
     width: 750px;
-    background-color: #fff;
+    background-color: #FAFBFF;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 30px;
-    height: 78px;
+    height: 88px;
     position: fixed;
     top: 0;
     left: 0;
@@ -484,23 +401,23 @@ export default {
     }
 
     .actived {
-      color: #000000;
+      color: #064C8A;
     }
   }
 
   .choice_select {
     width: 750px;
     height: 10px;
-    background-color: #fff;
+    background-color: #FAFBFF;
     position: fixed;
-    top: 78px;
+    top: 74px;
     left: 0;
 
     div {
-      width: 70px;
+      width: 64px;
       height: 4px;
-      border-radius: 25%;
-      background-color: #000000;
+      border-radius: 2px;
+      background-color: #064C8A;
     }
 
     .choice_select_ews {
@@ -529,21 +446,82 @@ export default {
   }
 
   .choice_card {
-    margin: 98px 20px 0px;
+    margin: 112px 20px 0px;
     width: 710px;
+
     // background-color: #fff;
     .choice_card_item {
       // border: 2px solid #ddd;
-      padding: 10px 20px;
-      margin: 20px 0;
-      border-radius: 20px;
-      background-color: #fff;
+      background: #FAFBFF;
+      border-radius: 4px;
+      border: 1px solid #D8DAE0;
+      padding: 36px 30px 30px 30px;
+      // margin: 20px 0;
+      // border-radius: 20px;
+      // background-color: #fff;
+
+      .carno-box {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 18px;
 
-      .choice_card_index {
-        // padding-top: 6px;
-        padding-bottom: 10px;
-        font-size: 24px;
+        .carno {
+          font-size: 36px;
+          font-weight: 600;
+          color: #999999;
+          line-height: 50px;
+        }
 
+        .payfee {
+          font-size: 30px;
+          font-weight: 600;
+          color: #999999;
+          line-height: 42px;
+        }
+        .active {
+          color: #333333;
+        }
+      }
+
+      .line {
+        width: 100%;
+        border-bottom: 1px solid #D8DAE0;
+        margin-bottom: 20px;
+      }
+
+      .my-not-invoiced-list {
+        display: flex;
+        justify-content: space-between;
+        .left {
+          flex: 1;
+        }
+        .right {
+          flex: 0 0 40px;
+          font-size: 40px;
+          align-items: center;
+          display: flex;
+        }
+      }
+      .my-invoiced-list {
+        align-items: flex-end;
+        .right {
+          flex: 0 0 120px;
+          font-size: 30px;
+          font-weight: 400;
+          color: #064C8A;
+          line-height: 42px;
+        }
+      }
+
+      .choice_card_index {
+        font-size: 28px;
+        font-weight: 400;
+        color: #999999;
+        line-height: 40px;
+        margin-bottom: 12px;
+        &.mb0{
+          margin-bottom: 0;
+        }
         .choice_card_status {
           display: flex;
           align-items: center;
@@ -584,22 +562,23 @@ export default {
 .suggestion-list {
   display: flex;
   flex-direction: column;
-  background: #fff;
+  // background: #fff;
   border-radius: 15px;
 }
 
 .flewx {
   width: 100%;
-  height: 100px;
-  background-color: #fff;
+  height: 150px;
+  background-color: #FAFBFF;
   position: fixed;
   bottom: 0;
   display: flex;
   align-items: center;
-  justify-content: flex-end;
-  // padding-bottom: constant(safe-area-inset-bottom);
-  // padding-bottom: env(safe-area-inset-bottom);
+  // justify-content: space-between;
   padding-bottom: 20px;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+
   // .checkAll {
   // 	.checkboxItem {
   // 		position: relative;
@@ -607,15 +586,21 @@ export default {
   // 	}
   // }
   .priceBtn {
+    width: 100%;
+    padding: 0 30px;
     display: flex;
     align-items: center;
     margin-right: 20px;
-    justify-content: space-around;
+    justify-content: space-between;
+    font-size: 28px;
+    font-weight: 400;
+    color: #333333;
 
     .price {
-      color: #ed1c24;
       font-size: 36px;
-      margin: 0 10px;
+      font-weight: 600;
+      color: #333333;
+      line-height: 50px;
     }
 
     .flewx_index3 {
@@ -626,9 +611,11 @@ export default {
       font-size: 28px;
       line-height: 70px;
       color: #fff;
-      background-image: linear-gradient(to right, #7e50a3, #433c7f);
-      margin-left: 50px;
-      margin-right: 30px;
+      background: #064C8A;
+      border-radius: 45px;
+      font-size: 34px;
+      font-weight: 400;
+      color: #FFFFFF;
     }
 
     .blue_flewx_index3 {
@@ -658,7 +645,7 @@ export default {
   width: 100%;
   padding-top: 15%;
   text-align: center;
-  background: #f2f2f2;
+  // background: #f2f2f2;
   margin: 0 auto;
 
   img {
@@ -671,6 +658,15 @@ export default {
     display: block;
   }
 }
+
+.no-more-data {
+  margin-top: 40px;
+  text-align: center;
+  font-size: 29px;
+  font-weight: 400;
+  color: #999999;
+  line-height: 41px;
+}
 </style>
 
 

src/routes/index.js

@@ -51,6 +51,34 @@ const routes = [
     path: '/parkingFeePaperCoupon',
     component: () => import('@/pages/parkingFee/parkingFeePaperCoupon.vue'),
   },
+  {
+    path: '/parkingInvoice',
+    component: () => import('@/pages/parkingFee/parkingReceipt/parkingInvoice.vue'),
+  },
+  {
+    path: '/parkingHeaderDetail',
+    component: () => import('@/pages/parkingFee/parkingReceipt/parkingHeaderDetail.vue'),
+  },
+  {
+    path: '/parkingInvoiceImage',
+    component: () => import('@/pages/parkingFee/parkingReceipt/parkingInvoiceImage.vue'),
+  },
+  {
+    path: '/parkingOrderDetail',
+    component: () => import('@/pages/parkingFee/parkingReceipt/parkingOrderDetail.vue'),
+  },
+  {
+    path: '/parkingApplication',
+    component: () => import('@/pages/parkingFee/parkingReceipt/parkingApplication.vue'),
+  },
+  {
+    path: '/parkingChooseHeader',
+    component: () => import('@/pages/parkingFee/parkingReceipt/parkingChooseHeader.vue'),
+  },
+  {
+    path: '/parkingChangeHeader',
+    component: () => import('@/pages/parkingFee/parkingReceipt/parkingChangeHeader.vue'),
+  },
   // { path: '/bar', component: 'Bar' }
 ];