|
|
@@ -1,641 +1,352 @@
|
|
|
<template>
|
|
|
- <view class="invoice">
|
|
|
- <nav-bar title="发票申请"></nav-bar>
|
|
|
- <view class="invoice__tabs">
|
|
|
- <u-tabs
|
|
|
- :list="list"
|
|
|
- sticky
|
|
|
- :current="current"
|
|
|
- @change="change"
|
|
|
- active-color="#007AFF"
|
|
|
- ></u-tabs>
|
|
|
- </view>
|
|
|
- <view class="invoice__content">
|
|
|
- <view class="open" v-if="current == 0">
|
|
|
- <view class="form">
|
|
|
- <u-form :model="form" ref="uForm">
|
|
|
- <u-form-item
|
|
|
- label="发票类型"
|
|
|
- label-width="150"
|
|
|
- required
|
|
|
- prop="type"
|
|
|
- >
|
|
|
- <u-radio-group v-model="form.type" @change="formTypeChange">
|
|
|
- <u-radio
|
|
|
- name="1"
|
|
|
- >
|
|
|
- 普通发票
|
|
|
- </u-radio>
|
|
|
- <u-radio
|
|
|
- v-if="other.invoiceH5 == 1"
|
|
|
- name="2"
|
|
|
- >
|
|
|
- 增值税专用发票
|
|
|
- </u-radio>
|
|
|
- </u-radio-group>
|
|
|
- </u-form-item>
|
|
|
-
|
|
|
- <!-- 增值税发票 -->
|
|
|
- <template v-if="form.type == 2">
|
|
|
- <u-form-item
|
|
|
- label="申请主体"
|
|
|
- label-width="150"
|
|
|
- required
|
|
|
- prop="subject"
|
|
|
- >
|
|
|
- <u-radio-group v-model="form.subject">
|
|
|
- <u-radio :key="index" name="2"> 企业 </u-radio>
|
|
|
- </u-radio-group>
|
|
|
- </u-form-item>
|
|
|
-
|
|
|
- <u-form-item
|
|
|
- label="发票抬头"
|
|
|
- label-width="150"
|
|
|
- required
|
|
|
- prop="invoiceTitle"
|
|
|
- >
|
|
|
- <u-input
|
|
|
- placeholder="请输入发票抬头"
|
|
|
- v-model="form.invoiceTitle"
|
|
|
- />
|
|
|
- </u-form-item>
|
|
|
- <u-form-item label="发票备注" label-width="150">
|
|
|
- <u-input
|
|
|
- placeholder="请输入发票备注"
|
|
|
- v-model="form.invoiceRemark"
|
|
|
- />
|
|
|
- </u-form-item>
|
|
|
- <u-form-item label="邮箱" label-width="150" required prop="email">
|
|
|
- <u-input placeholder="请输入邮箱" v-model="form.email" />
|
|
|
- </u-form-item>
|
|
|
- <u-form-item
|
|
|
- label="纳税登记号"
|
|
|
- label-width="150"
|
|
|
- required
|
|
|
- prop="taxRegistryNumber"
|
|
|
- >
|
|
|
- <u-input
|
|
|
- placeholder="请输入纳税登记号"
|
|
|
- v-model="form.taxRegistryNumber"
|
|
|
- />
|
|
|
- </u-form-item>
|
|
|
- <u-form-item
|
|
|
- label="单位地址"
|
|
|
- label-width="150"
|
|
|
- required
|
|
|
- prop="companyAddress"
|
|
|
- >
|
|
|
- <u-input
|
|
|
- placeholder="请输入单位地址"
|
|
|
- v-model="form.companyAddress"
|
|
|
- />
|
|
|
- </u-form-item>
|
|
|
- <u-form-item
|
|
|
- label="电话号码"
|
|
|
- label-width="150"
|
|
|
- required
|
|
|
- prop="phone"
|
|
|
- >
|
|
|
- <u-input
|
|
|
- placeholder="请输入电话号码"
|
|
|
- type="number"
|
|
|
- v-model="form.phone"
|
|
|
- />
|
|
|
- </u-form-item>
|
|
|
- <u-form-item
|
|
|
- label="开户银行"
|
|
|
- label-width="150"
|
|
|
- required
|
|
|
- prop="bankName"
|
|
|
- >
|
|
|
- <u-input placeholder="请输入开户银行" v-model="form.bankName" />
|
|
|
- </u-form-item>
|
|
|
- <u-form-item
|
|
|
- label="银行账号"
|
|
|
- label-width="150"
|
|
|
- required
|
|
|
- prop="bankAccount"
|
|
|
- >
|
|
|
- <u-input
|
|
|
- placeholder="请输入银行账号"
|
|
|
- type="number"
|
|
|
- v-model="form.bankAccount"
|
|
|
- />
|
|
|
- </u-form-item>
|
|
|
- <u-form-item
|
|
|
- label="收件地址"
|
|
|
- label-width="150"
|
|
|
- required
|
|
|
- prop="receivingAddress"
|
|
|
- >
|
|
|
- <u-input
|
|
|
- placeholder="请输入收件地址"
|
|
|
- v-model="form.receivingAddress"
|
|
|
- />
|
|
|
- </u-form-item>
|
|
|
- <u-form-item
|
|
|
- label="收件人"
|
|
|
- label-width="150"
|
|
|
- required
|
|
|
- prop="receivingName"
|
|
|
- >
|
|
|
- <u-input
|
|
|
- placeholder="请输入收件人"
|
|
|
- v-model="form.receivingName"
|
|
|
- />
|
|
|
- </u-form-item>
|
|
|
- <u-form-item
|
|
|
- label="收件手机"
|
|
|
- label-width="150"
|
|
|
- required
|
|
|
- prop="receivingTel"
|
|
|
- >
|
|
|
- <u-input
|
|
|
- placeholder="请输入收件手机"
|
|
|
- v-model="form.receivingTel"
|
|
|
- />
|
|
|
- </u-form-item>
|
|
|
- </template>
|
|
|
- <!-- 增值税发票 -->
|
|
|
-
|
|
|
- <!-- 普通发票 -->
|
|
|
- <template v-else>
|
|
|
- <u-form-item
|
|
|
- label="申请主体"
|
|
|
- label-width="150"
|
|
|
- required
|
|
|
- prop="subject"
|
|
|
- >
|
|
|
- <u-radio-group v-model="form.subject">
|
|
|
- <u-radio
|
|
|
- v-for="(item, index) in mainList"
|
|
|
- :key="index"
|
|
|
- :name="item.value"
|
|
|
- >
|
|
|
- {{ item.name }}
|
|
|
- </u-radio>
|
|
|
- </u-radio-group>
|
|
|
- </u-form-item>
|
|
|
-
|
|
|
- <u-form-item
|
|
|
- label="发票抬头"
|
|
|
- label-width="150"
|
|
|
- required
|
|
|
- prop="invoiceTitle"
|
|
|
- >
|
|
|
- <u-input
|
|
|
- placeholder="请输入发票抬头"
|
|
|
- v-model="form.invoiceTitle"
|
|
|
- />
|
|
|
- </u-form-item>
|
|
|
- <u-form-item label="发票备注" label-width="150">
|
|
|
- <u-input
|
|
|
- placeholder="请输入发票备注"
|
|
|
- v-model="form.invoiceRemark"
|
|
|
- />
|
|
|
- </u-form-item>
|
|
|
- <u-form-item label="邮箱" label-width="150" required prop="email">
|
|
|
- <u-input placeholder="请输入邮箱" v-model="form.email" />
|
|
|
- </u-form-item>
|
|
|
- <u-form-item
|
|
|
- v-if="form.subject == '2'"
|
|
|
- label="纳税登记号"
|
|
|
- label-width="150"
|
|
|
- required
|
|
|
- prop="taxRegistryNumber"
|
|
|
- >
|
|
|
- <u-input
|
|
|
- placeholder="请输入纳税登记号"
|
|
|
- v-model="form.taxRegistryNumber"
|
|
|
- />
|
|
|
- </u-form-item>
|
|
|
- </template>
|
|
|
- <!-- 普通发票 -->
|
|
|
-
|
|
|
- <u-form-item
|
|
|
- label="选择订单"
|
|
|
- label-width="150"
|
|
|
- required
|
|
|
- prop="orderGoodsIds"
|
|
|
- right-icon="arrow-right"
|
|
|
- ref="orderGoodsIds"
|
|
|
- >
|
|
|
- <view class="form-item" @click="selectOrderModal = true">
|
|
|
- <u-input
|
|
|
- placeholder="请点击选择订单"
|
|
|
- disabled
|
|
|
- @click="selectOrderModal = true"
|
|
|
- />
|
|
|
- </view>
|
|
|
- </u-form-item>
|
|
|
- <view>
|
|
|
- <view
|
|
|
- class="check-order"
|
|
|
- v-for="(item, index) in filterOrderList"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
- <view class="close" @click="deleteOrder(index)">
|
|
|
- <u-icon
|
|
|
- name="close-circle-fill"
|
|
|
- color="#FF2D55"
|
|
|
- size="40"
|
|
|
- ></u-icon>
|
|
|
- </view>
|
|
|
- <view class="title">商品名称：{{ item.goodsName }}</view>
|
|
|
- <view class="number">订单编号：{{ item.orderSn }}</view>
|
|
|
- <view class="price">价格：¥ {{ item.goodsPrice }}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </u-form>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="order-text">
|
|
|
- <view class="order-text__label">本次申请开票金额：</view>
|
|
|
- <view class="order-text__price">¥ {{ toFixed(invoicePirce) }}</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="submit" @click="formSubmit"> 提交申请 </view>
|
|
|
- </view>
|
|
|
- <view class="record" v-if="current == 1">
|
|
|
- <view class="nodata" v-if="!recordList.length">
|
|
|
- 您暂无相关发票记录哦~
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="record__list">
|
|
|
- <view
|
|
|
- class="record-item"
|
|
|
- @click="showDetailModal(record)"
|
|
|
- v-for="(record, index) in recordList"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
- <view class="item__time">{{
|
|
|
+ <view class="invoice">
|
|
|
+ <nav-bar title="发票申请"></nav-bar>
|
|
|
+ <view class="invoice__tabs">
|
|
|
+ <u-tabs :list="list" sticky :current="current" @change="change" active-color="#007AFF"></u-tabs>
|
|
|
+ </view>
|
|
|
+ <view class="invoice__content">
|
|
|
+ <view class="open" v-if="current == 0">
|
|
|
+ <view class="form">
|
|
|
+ <u-form :model="form" ref="uForm">
|
|
|
+ <u-form-item label="发票类型" label-width="150" required prop="type">
|
|
|
+ <u-radio-group v-model="form.type" @change="formTypeChange">
|
|
|
+ <u-radio name="1">
|
|
|
+ 普通发票
|
|
|
+ </u-radio>
|
|
|
+ <u-radio v-if="other.invoiceH5 == 1" name="2">
|
|
|
+ 增值税专用发票
|
|
|
+ </u-radio>
|
|
|
+ </u-radio-group>
|
|
|
+ </u-form-item>
|
|
|
+
|
|
|
+ <!-- 增值税发票 -->
|
|
|
+ <template v-if="form.type == 2">
|
|
|
+ <u-form-item label="申请主体" label-width="150" required prop="subject">
|
|
|
+ <u-radio-group v-model="form.subject">
|
|
|
+ <u-radio :key="index" name="2"> 企业 </u-radio>
|
|
|
+ </u-radio-group>
|
|
|
+ </u-form-item>
|
|
|
+
|
|
|
+ <u-form-item label="发票抬头" label-width="150" required prop="invoiceTitle">
|
|
|
+ <u-input placeholder="请输入发票抬头" v-model="form.invoiceTitle" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="发票备注" label-width="150">
|
|
|
+ <u-input placeholder="请输入发票备注" v-model="form.invoiceRemark" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="邮箱" label-width="150" required prop="email">
|
|
|
+ <u-input placeholder="请输入邮箱" v-model="form.email" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="纳税登记号" label-width="150" required prop="taxRegistryNumber">
|
|
|
+ <u-input placeholder="请输入纳税登记号" v-model="form.taxRegistryNumber" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="单位地址" label-width="150" required prop="companyAddress">
|
|
|
+ <u-input placeholder="请输入单位地址" v-model="form.companyAddress" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="电话号码" label-width="150" required prop="phone">
|
|
|
+ <u-input placeholder="请输入电话号码" type="number" v-model="form.phone" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="开户银行" label-width="150" required prop="bankName">
|
|
|
+ <u-input placeholder="请输入开户银行" v-model="form.bankName" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="银行账号" label-width="150" required prop="bankAccount">
|
|
|
+ <u-input placeholder="请输入银行账号" type="number" v-model="form.bankAccount" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="收件地址" label-width="150" required prop="receivingAddress">
|
|
|
+ <u-input placeholder="请输入收件地址" v-model="form.receivingAddress" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="收件人" label-width="150" required prop="receivingName">
|
|
|
+ <u-input placeholder="请输入收件人" v-model="form.receivingName" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="收件手机" label-width="150" required prop="receivingTel">
|
|
|
+ <u-input placeholder="请输入收件手机" v-model="form.receivingTel" />
|
|
|
+ </u-form-item>
|
|
|
+ </template>
|
|
|
+ <!-- 增值税发票 -->
|
|
|
+
|
|
|
+ <!-- 普通发票 -->
|
|
|
+ <template v-else>
|
|
|
+ <u-form-item label="申请主体" label-width="150" required prop="subject">
|
|
|
+ <u-radio-group v-model="form.subject">
|
|
|
+ <u-radio v-for="(item, index) in mainList" :key="index" :name="item.value">
|
|
|
+ {{ item.name }}
|
|
|
+ </u-radio>
|
|
|
+ </u-radio-group>
|
|
|
+ </u-form-item>
|
|
|
+
|
|
|
+ <u-form-item label="发票抬头" label-width="150" required prop="invoiceTitle">
|
|
|
+ <u-input placeholder="请输入发票抬头" v-model="form.invoiceTitle" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="发票备注" label-width="150">
|
|
|
+ <u-input placeholder="请输入发票备注" v-model="form.invoiceRemark" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="邮箱" label-width="150" required prop="email">
|
|
|
+ <u-input placeholder="请输入邮箱" v-model="form.email" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item v-if="form.subject == '2'" label="纳税登记号" label-width="150" required
|
|
|
+ prop="taxRegistryNumber">
|
|
|
+ <u-input placeholder="请输入纳税登记号" v-model="form.taxRegistryNumber" />
|
|
|
+ </u-form-item>
|
|
|
+ </template>
|
|
|
+ <!-- 普通发票 -->
|
|
|
+
|
|
|
+ <u-form-item label="选择订单" label-width="150" required prop="orderGoodsIds"
|
|
|
+ right-icon="arrow-right" ref="orderGoodsIds">
|
|
|
+ <view class="form-item" @click="selectOrderModal = true">
|
|
|
+ <u-input placeholder="请点击选择订单" disabled @click="selectOrderModal = true" />
|
|
|
+ </view>
|
|
|
+ </u-form-item>
|
|
|
+ <view>
|
|
|
+ <view class="check-order" v-for="(item, index) in filterOrderList" :key="index">
|
|
|
+ <view class="close" @click="deleteOrder(index)">
|
|
|
+ <u-icon name="close-circle-fill" color="#FF2D55" size="40"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="title">商品名称：{{ item.goodsName }}</view>
|
|
|
+ <view class="number">订单编号：{{ item.orderSn }}</view>
|
|
|
+ <view class="price">价格：¥ {{ item.goodsPrice }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-form>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="order-text">
|
|
|
+ <view class="order-text__label">本次申请开票金额：</view>
|
|
|
+ <view class="order-text__price">¥ {{ toFixed(invoicePirce) }}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="submit" @click="formSubmit"> 提交申请 </view>
|
|
|
+ </view>
|
|
|
+ <view class="record" v-if="current == 1">
|
|
|
+ <view class="nodata" v-if="!recordList.length">
|
|
|
+ 您暂无相关发票记录哦~
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="record__list">
|
|
|
+ <view class="record-item" @click="showDetailModal(record)" v-for="(record, index) in recordList"
|
|
|
+ :key="index">
|
|
|
+ <view class="item__time">{{
|
|
|
$method.timestampToTime(record.applyTime, false, false)
|
|
|
}}</view>
|
|
|
- <view class="item__content">
|
|
|
- <view class="top">
|
|
|
- <view
|
|
|
- class="state"
|
|
|
- :class="{
|
|
|
+ <view class="item__content">
|
|
|
+ <view class="top">
|
|
|
+ <view class="state" :class="{
|
|
|
wait: record.periodStatus == 1,
|
|
|
refuse: record.periodStatus == 2,
|
|
|
agree: record.periodStatus == 3,
|
|
|
- }"
|
|
|
- >
|
|
|
- <text v-if="record.periodStatus == 1">待审核</text>
|
|
|
- <text v-if="record.periodStatus == 2">驳回</text>
|
|
|
- <text v-if="record.periodStatus == 3">通过</text>
|
|
|
- <u-icon
|
|
|
- class="arrow"
|
|
|
- name="arrow-right"
|
|
|
- color="#ffffff"
|
|
|
- size="28"
|
|
|
- ></u-icon>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="bottom">
|
|
|
- <view class="flex">
|
|
|
- <view class="text">发票类型</view>
|
|
|
- <view class="flex__auto">
|
|
|
- <text v-if="record.type == 1">普通发票</text>
|
|
|
- <text v-if="record.type == 2">增值税专用发票</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="flex">
|
|
|
- <view class="text">申请主体</view>
|
|
|
- <view class="flex__auto">
|
|
|
- <text v-if="record.subject == 1">个人</text>
|
|
|
- <text v-if="record.subject == 2">企业</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="flex">
|
|
|
- <view class="text">发票状态</view>
|
|
|
- <view class="flex__auto">
|
|
|
- <text class="red" v-if="record.invoiceStatus == 1"
|
|
|
- >未开票</text
|
|
|
- >
|
|
|
- <text class="red" v-if="record.invoiceStatus == 3"
|
|
|
- >开票中</text
|
|
|
- >
|
|
|
- <text class="green" v-if="record.invoiceStatus == 2"
|
|
|
- >已开票</text
|
|
|
- >
|
|
|
- <text class="red" v-if="record.invoiceStatus == -1"
|
|
|
- >已退票</text
|
|
|
- >
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view @click.stop="showOrder(record.checked, index)">
|
|
|
- <view class="flex noborder">
|
|
|
- <view class="text">开票订单</view>
|
|
|
- <view class="flex__auto">
|
|
|
- <text style="margin-right: 10rpx">{{
|
|
|
+ }">
|
|
|
+ <text v-if="record.periodStatus == 1">待审核</text>
|
|
|
+ <text v-if="record.periodStatus == 2">驳回</text>
|
|
|
+ <text v-if="record.periodStatus == 3">通过</text>
|
|
|
+ <u-icon class="arrow" name="arrow-right" color="#ffffff" size="28"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="bottom">
|
|
|
+ <view class="flex">
|
|
|
+ <view class="text">发票类型</view>
|
|
|
+ <view class="flex__auto">
|
|
|
+ <text v-if="record.type == 1">普通发票</text>
|
|
|
+ <text v-if="record.type == 2">增值税专用发票</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex">
|
|
|
+ <view class="text">申请主体</view>
|
|
|
+ <view class="flex__auto">
|
|
|
+ <text v-if="record.subject == 1">个人</text>
|
|
|
+ <text v-if="record.subject == 2">企业</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex">
|
|
|
+ <view class="text">发票状态</view>
|
|
|
+ <view class="flex__auto">
|
|
|
+ <text class="red" v-if="record.invoiceStatus == 1">未开票</text>
|
|
|
+ <text class="red" v-if="record.invoiceStatus == 3">开票中</text>
|
|
|
+ <text class="green" v-if="record.invoiceStatus == 2">已开票</text>
|
|
|
+ <text class="red" v-if="record.invoiceStatus == -1">已退票</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view @click.stop="showOrder(record.checked, index)">
|
|
|
+ <view class="flex noborder">
|
|
|
+ <view class="text">开票订单</view>
|
|
|
+ <view class="flex__auto">
|
|
|
+ <text style="margin-right: 10rpx">{{
|
|
|
record.orderList.length
|
|
|
}}</text>
|
|
|
- <u-icon
|
|
|
- v-if="!record.checked"
|
|
|
- name="arrow-down"
|
|
|
- color="#ccc"
|
|
|
- size="28"
|
|
|
- ></u-icon>
|
|
|
- <u-icon
|
|
|
- v-if="record.checked"
|
|
|
- name="arrow-up"
|
|
|
- color="#ccc"
|
|
|
- size="28"
|
|
|
- ></u-icon>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="order-list" v-if="record.checked">
|
|
|
- <view
|
|
|
- class="order-item"
|
|
|
- :key="orderIndex"
|
|
|
- v-for="(orderItem, orderIndex) in record.orderList"
|
|
|
- >{{ orderIndex + 1 }}.{{ orderItem.goodsName }}</view
|
|
|
- >
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <u-popup
|
|
|
- class="modal"
|
|
|
- v-model="selectOrderModal"
|
|
|
- mode="bottom"
|
|
|
- border-radius="24"
|
|
|
- >
|
|
|
- <view class="select-order">
|
|
|
- <view class="line"></view>
|
|
|
- <view class="title">选择订单</view>
|
|
|
- <u-line color="#D6D6DB" />
|
|
|
- <view>
|
|
|
- <scroll-view scroll-y="true" style="height: 500rpx">
|
|
|
- <view v-if="orderList.length">
|
|
|
- <u-checkbox-group>
|
|
|
- <view v-for="(item, index) in orderList" :key="index">
|
|
|
- <view class="order-item">
|
|
|
- <view>
|
|
|
- <u-checkbox
|
|
|
- :disabled="item.disabled"
|
|
|
- shape="circle"
|
|
|
- :name="item.name"
|
|
|
- v-model="item.checked"
|
|
|
- >
|
|
|
- <view
|
|
|
- class="order-item__bg"
|
|
|
- :class="item.checked ? 'active' : ''"
|
|
|
- >
|
|
|
- <view>
|
|
|
- <view class="order-title">{{
|
|
|
+ <u-icon v-if="!record.checked" name="arrow-down" color="#ccc"
|
|
|
+ size="28"></u-icon>
|
|
|
+ <u-icon v-if="record.checked" name="arrow-up" color="#ccc"
|
|
|
+ size="28"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="order-list" v-if="record.checked">
|
|
|
+ <view class="order-item" :key="orderIndex"
|
|
|
+ v-for="(orderItem, orderIndex) in record.orderList">
|
|
|
+ {{ orderIndex + 1 }}.{{ orderItem.goodsName }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <u-popup class="modal" v-model="selectOrderModal" mode="bottom" border-radius="24">
|
|
|
+ <view class="select-order">
|
|
|
+ <view class="line"></view>
|
|
|
+ <view class="title">选择订单</view>
|
|
|
+ <u-line color="#D6D6DB" />
|
|
|
+ <view>
|
|
|
+ <scroll-view scroll-y="true" style="height: 500rpx">
|
|
|
+ <view v-if="orderList.length">
|
|
|
+ <u-checkbox-group>
|
|
|
+ <view v-for="(item, index) in orderList" :key="index">
|
|
|
+ <view class="order-item">
|
|
|
+ <view>
|
|
|
+ <u-checkbox :disabled="item.disabled" shape="circle" :name="item.name"
|
|
|
+ v-model="item.checked">
|
|
|
+ <view class="order-item__bg" :class="item.checked ? 'active' : ''">
|
|
|
+ <view>
|
|
|
+ <view class="order-title">{{
|
|
|
item.goodsName
|
|
|
}}</view>
|
|
|
- <view class="order-number">{{ item.orderSn }}</view>
|
|
|
- <view class="order-price"
|
|
|
- >¥ {{ item.goodsPrice }}元</view
|
|
|
- >
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </u-checkbox>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </u-checkbox-group>
|
|
|
- </view>
|
|
|
- <view v-else class="no_data">
|
|
|
- <text>暂无可开发票的订单</text>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
- <view class="confrim-btn">
|
|
|
- <view class="okBtn" @click="okPopup()">确定</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </u-popup>
|
|
|
-
|
|
|
- <u-popup
|
|
|
- class="modal"
|
|
|
- v-model="orderDetailModal"
|
|
|
- mode="center"
|
|
|
- border-radius="40"
|
|
|
- >
|
|
|
- <view class="order-detail">
|
|
|
- <view class="order-detail__content">
|
|
|
- <scroll-view scroll-y="true" style="height: 860rpx">
|
|
|
- <view class="content">
|
|
|
- <view class="header">{{
|
|
|
+ <view class="order-number">{{ item.orderSn }}</view>
|
|
|
+ <view class="order-price">¥ {{ item.goodsPrice }}元</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-checkbox>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-checkbox-group>
|
|
|
+ </view>
|
|
|
+ <view v-else class="no_data">
|
|
|
+ <text>暂无可开发票的订单</text>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ <view class="confrim-btn">
|
|
|
+ <view class="okBtn" @click="okPopup()">确定</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+
|
|
|
+ <u-popup class="modal" v-model="orderDetailModal" mode="center" border-radius="40">
|
|
|
+ <view class="order-detail">
|
|
|
+ <view class="order-detail__content">
|
|
|
+ <scroll-view scroll-y="true" style="height: 860rpx">
|
|
|
+ <view class="content">
|
|
|
+ <view class="header">{{
|
|
|
$method.timestampToTime(invoiceDetail.applyTime, false, false)
|
|
|
}}</view>
|
|
|
- <view class="body">
|
|
|
- <view class="body__item">
|
|
|
- <view class="title">发票申请信息</view>
|
|
|
- <view class="content">
|
|
|
- <u-cell-item
|
|
|
- :border-bottom="false"
|
|
|
- hover-class="none"
|
|
|
- :arrow="false"
|
|
|
- >
|
|
|
- <view slot="title">发票类型：</view>
|
|
|
- <text v-if="invoiceDetail.type == 1">普通发票</text>
|
|
|
- <text v-if="invoiceDetail.type == 2">增值税专用发票</text>
|
|
|
- </u-cell-item>
|
|
|
- <u-cell-item
|
|
|
- :border-bottom="false"
|
|
|
- hover-class="none"
|
|
|
- :arrow="false"
|
|
|
- >
|
|
|
- <view slot="title">申请主体：</view>
|
|
|
- <text v-if="invoiceDetail.subject == 1">个人</text>
|
|
|
- <text v-if="invoiceDetail.subject == 2">企业</text>
|
|
|
- </u-cell-item>
|
|
|
- <u-cell-item
|
|
|
- :border-bottom="false"
|
|
|
- hover-class="none"
|
|
|
- :arrow="false"
|
|
|
- >
|
|
|
- <view slot="title">发票抬头：</view>
|
|
|
- <text>{{ invoiceDetail.invoiceTitle }}</text>
|
|
|
- </u-cell-item>
|
|
|
- <template v-if="invoiceDetail.subject == 2">
|
|
|
- <u-cell-item
|
|
|
- :border-bottom="false"
|
|
|
- hover-class="none"
|
|
|
- :arrow="false"
|
|
|
- >
|
|
|
- <view slot="title">纳税登记号：</view>
|
|
|
- <text>{{ invoiceDetail.taxRegistryNumber || "" }}</text>
|
|
|
- </u-cell-item>
|
|
|
- </template>
|
|
|
- <template v-if="invoiceDetail.type == 2">
|
|
|
- <u-cell-item
|
|
|
- :border-bottom="false"
|
|
|
- hover-class="none"
|
|
|
- :arrow="false"
|
|
|
- >
|
|
|
- <view slot="title">单位地址：</view>
|
|
|
- <text>{{ invoiceDetail.companyAddress || "" }}</text>
|
|
|
- </u-cell-item>
|
|
|
- <u-cell-item
|
|
|
- :border-bottom="false"
|
|
|
- hover-class="none"
|
|
|
- :arrow="false"
|
|
|
- >
|
|
|
- <view slot="title">电话号码：</view>
|
|
|
- <text>{{ invoiceDetail.phone || "" }}</text>
|
|
|
- </u-cell-item>
|
|
|
- <u-cell-item
|
|
|
- :border-bottom="false"
|
|
|
- hover-class="none"
|
|
|
- :arrow="false"
|
|
|
- >
|
|
|
- <view slot="title">开户银行：</view>
|
|
|
- <text>{{ invoiceDetail.bankName || "" }}</text>
|
|
|
- </u-cell-item>
|
|
|
- <u-cell-item
|
|
|
- :border-bottom="false"
|
|
|
- hover-class="none"
|
|
|
- :arrow="false"
|
|
|
- >
|
|
|
- <view slot="title">银行账号：</view>
|
|
|
- <text>{{ invoiceDetail.bankAccount || "" }}</text>
|
|
|
- </u-cell-item>
|
|
|
- <u-cell-item
|
|
|
- :border-bottom="false"
|
|
|
- hover-class="none"
|
|
|
- :arrow="false"
|
|
|
- >
|
|
|
- <view slot="title">收件地址：</view>
|
|
|
- <text>{{ invoiceDetail.receivingAddress || "" }}</text>
|
|
|
- </u-cell-item>
|
|
|
- <u-cell-item
|
|
|
- :border-bottom="false"
|
|
|
- hover-class="none"
|
|
|
- :arrow="false"
|
|
|
- >
|
|
|
- <view slot="title">收件人：</view>
|
|
|
- <text>{{ invoiceDetail.receivingName || "" }}</text>
|
|
|
- </u-cell-item>
|
|
|
- <u-cell-item
|
|
|
- :border-bottom="false"
|
|
|
- hover-class="none"
|
|
|
- :arrow="false"
|
|
|
- >
|
|
|
- <view slot="title">收件手机：</view>
|
|
|
- <text>{{ invoiceDetail.receivingTel || "" }}</text>
|
|
|
- </u-cell-item>
|
|
|
- <u-cell-item
|
|
|
- :border-bottom="false"
|
|
|
- hover-class="none"
|
|
|
- :arrow="false"
|
|
|
- >
|
|
|
- <view slot="title">开票订单：</view>
|
|
|
- </u-cell-item>
|
|
|
- </template>
|
|
|
-
|
|
|
- <view class="order-list">
|
|
|
- <view
|
|
|
- class="order-item"
|
|
|
- :key="orderIndex"
|
|
|
- v-for="(
|
|
|
+ <view class="body">
|
|
|
+ <view class="body__item">
|
|
|
+ <view class="title">发票申请信息</view>
|
|
|
+ <view class="content">
|
|
|
+ <u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
|
|
|
+ <view slot="title">发票类型：</view>
|
|
|
+ <text v-if="invoiceDetail.type == 1">普通发票</text>
|
|
|
+ <text v-if="invoiceDetail.type == 2">增值税专用发票</text>
|
|
|
+ </u-cell-item>
|
|
|
+ <u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
|
|
|
+ <view slot="title">申请主体：</view>
|
|
|
+ <text v-if="invoiceDetail.subject == 1">个人</text>
|
|
|
+ <text v-if="invoiceDetail.subject == 2">企业</text>
|
|
|
+ </u-cell-item>
|
|
|
+ <u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
|
|
|
+ <view slot="title">发票抬头：</view>
|
|
|
+ <text>{{ invoiceDetail.invoiceTitle }}</text>
|
|
|
+ </u-cell-item>
|
|
|
+ <template v-if="invoiceDetail.subject == 2">
|
|
|
+ <u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
|
|
|
+ <view slot="title">纳税登记号：</view>
|
|
|
+ <text>{{ invoiceDetail.taxRegistryNumber || "" }}</text>
|
|
|
+ </u-cell-item>
|
|
|
+ </template>
|
|
|
+ <template v-if="invoiceDetail.type == 2">
|
|
|
+ <u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
|
|
|
+ <view slot="title">单位地址：</view>
|
|
|
+ <text>{{ invoiceDetail.companyAddress || "" }}</text>
|
|
|
+ </u-cell-item>
|
|
|
+ <u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
|
|
|
+ <view slot="title">电话号码：</view>
|
|
|
+ <text>{{ invoiceDetail.phone || "" }}</text>
|
|
|
+ </u-cell-item>
|
|
|
+ <u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
|
|
|
+ <view slot="title">开户银行：</view>
|
|
|
+ <text>{{ invoiceDetail.bankName || "" }}</text>
|
|
|
+ </u-cell-item>
|
|
|
+ <u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
|
|
|
+ <view slot="title">银行账号：</view>
|
|
|
+ <text>{{ invoiceDetail.bankAccount || "" }}</text>
|
|
|
+ </u-cell-item>
|
|
|
+ <u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
|
|
|
+ <view slot="title">收件地址：</view>
|
|
|
+ <text>{{ invoiceDetail.receivingAddress || "" }}</text>
|
|
|
+ </u-cell-item>
|
|
|
+ <u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
|
|
|
+ <view slot="title">收件人：</view>
|
|
|
+ <text>{{ invoiceDetail.receivingName || "" }}</text>
|
|
|
+ </u-cell-item>
|
|
|
+ <u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
|
|
|
+ <view slot="title">收件手机：</view>
|
|
|
+ <text>{{ invoiceDetail.receivingTel || "" }}</text>
|
|
|
+ </u-cell-item>
|
|
|
+ <u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
|
|
|
+ <view slot="title">开票订单：</view>
|
|
|
+ </u-cell-item>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <view class="order-list">
|
|
|
+ <view class="order-item" :key="orderIndex" v-for="(
|
|
|
orderItem, orderIndex
|
|
|
- ) in invoiceDetail.orderList"
|
|
|
- >
|
|
|
- <view class="order-title">{{
|
|
|
+ ) in invoiceDetail.orderList">
|
|
|
+ <view class="order-title">{{
|
|
|
orderItem.goodsName
|
|
|
}}</view>
|
|
|
- <view class="order-number">{{
|
|
|
+ <view class="order-number">{{
|
|
|
orderItem.orderSn
|
|
|
}}</view>
|
|
|
- <view class="order-price"
|
|
|
- >¥ {{ orderItem.goodsRealPrice }}元</view
|
|
|
- >
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="order-text">
|
|
|
- <view class="order-text__label">本次申请开票金额：</view>
|
|
|
- <view class="order-text__price"
|
|
|
- >¥ {{ toFixed(invoiceDetail.amount) }}</view
|
|
|
- >
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="body__item">
|
|
|
- <view class="title">发票申请结果</view>
|
|
|
- <view class="content">
|
|
|
- <u-cell-item
|
|
|
- :border-bottom="false"
|
|
|
- hover-class="none"
|
|
|
- :arrow="false"
|
|
|
- >
|
|
|
- <view slot="title">审核结果：</view>
|
|
|
- <text
|
|
|
- class="text wait"
|
|
|
- v-if="invoiceDetail.periodStatus == 1"
|
|
|
- >待审核</text
|
|
|
- >
|
|
|
- <text
|
|
|
- class="text agree"
|
|
|
- v-if="invoiceDetail.periodStatus == 3"
|
|
|
- >通过</text
|
|
|
- >
|
|
|
- <text
|
|
|
- class="text refuse"
|
|
|
- v-if="invoiceDetail.periodStatus == 2"
|
|
|
- >驳回</text
|
|
|
- >
|
|
|
- </u-cell-item>
|
|
|
- <u-cell-item
|
|
|
- :border-bottom="false"
|
|
|
- hover-class="none"
|
|
|
- :arrow="false"
|
|
|
- v-if="invoiceDetail.periodReason"
|
|
|
- >
|
|
|
- <view slot="title">审核反馈：</view>
|
|
|
- <text class="text">{{
|
|
|
+ <view class="order-price">¥ {{ orderItem.goodsRealPrice }}元</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="order-text">
|
|
|
+ <view class="order-text__label">本次申请开票金额：</view>
|
|
|
+ <view class="order-text__price">¥ {{ toFixed(invoiceDetail.amount) }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="body__item">
|
|
|
+ <view class="title">发票申请结果</view>
|
|
|
+ <view class="content">
|
|
|
+ <u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
|
|
|
+ <view slot="title">审核结果：</view>
|
|
|
+ <text class="text wait" v-if="invoiceDetail.periodStatus == 1">待审核</text>
|
|
|
+ <text class="text agree" v-if="invoiceDetail.periodStatus == 3">通过</text>
|
|
|
+ <text class="text refuse" v-if="invoiceDetail.periodStatus == 2">驳回</text>
|
|
|
+ </u-cell-item>
|
|
|
+ <u-cell-item :border-bottom="false" hover-class="none" :arrow="false"
|
|
|
+ v-if="invoiceDetail.periodReason">
|
|
|
+ <view slot="title">审核反馈：</view>
|
|
|
+ <text class="text">{{
|
|
|
invoiceDetail.periodReason || ""
|
|
|
}}</text>
|
|
|
- </u-cell-item>
|
|
|
- <u-cell-item
|
|
|
- :border-bottom="false"
|
|
|
- hover-class="none"
|
|
|
- :arrow="false"
|
|
|
- >
|
|
|
- <view slot="title">发票状态：</view>
|
|
|
- <text
|
|
|
- class="text refuse"
|
|
|
- v-if="invoiceDetail.invoiceStatus == 1"
|
|
|
- >未开票</text
|
|
|
- >
|
|
|
- <text class="red" v-if="invoiceDetail.invoiceStatus == 3"
|
|
|
- >开票中</text
|
|
|
- >
|
|
|
- <text
|
|
|
- class="text agree"
|
|
|
- v-if="invoiceDetail.invoiceStatus == 2"
|
|
|
- >已开票</text
|
|
|
- >
|
|
|
- <text
|
|
|
- class="text refuse"
|
|
|
- v-if="invoiceDetail.invoiceStatus == -1"
|
|
|
- >已退票</text
|
|
|
- >
|
|
|
- </u-cell-item>
|
|
|
-
|
|
|
- <u-cell-item
|
|
|
- :border-bottom="false"
|
|
|
- hover-class="none"
|
|
|
- :arrow="false"
|
|
|
- v-if="
|
|
|
+ </u-cell-item>
|
|
|
+ <u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
|
|
|
+ <view slot="title">发票状态：</view>
|
|
|
+ <text class="text refuse" v-if="invoiceDetail.invoiceStatus == 1">未开票</text>
|
|
|
+ <text class="red" v-if="invoiceDetail.invoiceStatus == 3">开票中</text>
|
|
|
+ <text class="text agree" v-if="invoiceDetail.invoiceStatus == 2">已开票</text>
|
|
|
+ <text class="text refuse"
|
|
|
+ v-if="invoiceDetail.invoiceStatus == -1">已退票</text>
|
|
|
+ </u-cell-item>
|
|
|
+
|
|
|
+ <u-cell-item :border-bottom="false" hover-class="none" :arrow="false" v-if="
|
|
|
invoiceDetail.periodStatus == 3 &&
|
|
|
(invoiceDetail.invoiceStatus == 2 ||
|
|
|
invoiceDetail.invoiceStatus == -1) &&
|
|
|
invoiceDetail.invoiceImg
|
|
|
- "
|
|
|
- >
|
|
|
- <!-- <view slot="title">发票预览：</view>
|
|
|
+ ">
|
|
|
+ <!-- <view slot="title">发票预览：</view>
|
|
|
<view>
|
|
|
<image
|
|
|
class="preview"
|
|
|
@@ -648,1098 +359,1061 @@
|
|
|
>下载电子发票</view
|
|
|
>
|
|
|
</view> -->
|
|
|
- <view class="download-btn" @click="preview(invoiceDetail)"
|
|
|
- >预览电子发票</view
|
|
|
- >
|
|
|
- <view
|
|
|
- class="download-btn"
|
|
|
- @click="download(invoiceDetail)"
|
|
|
- >下载电子发票</view
|
|
|
- >
|
|
|
- </u-cell-item>
|
|
|
-
|
|
|
- <u-cell-item
|
|
|
- :border-bottom="false"
|
|
|
- hover-class="none"
|
|
|
- :arrow="false"
|
|
|
- v-if="
|
|
|
+ <view class="download-btn" @click="preview(invoiceDetail)">预览电子发票</view>
|
|
|
+ <view class="download-btn" @click="download(invoiceDetail)">下载电子发票</view>
|
|
|
+ </u-cell-item>
|
|
|
+
|
|
|
+ <u-cell-item :border-bottom="false" hover-class="none" :arrow="false" v-if="
|
|
|
invoiceDetail.periodStatus == 3 &&
|
|
|
(invoiceDetail.invoiceStatus == 2 ||
|
|
|
invoiceDetail.invoiceStatus == -1) &&
|
|
|
invoiceDetail.type == 2 &&
|
|
|
invoiceDetail.subject == 2
|
|
|
- "
|
|
|
- >
|
|
|
- <view slot="title">机构发票邮寄状态：</view>
|
|
|
- <text class="text" v-if="invoiceDetail.sendInvoice == 1"
|
|
|
- >是</text
|
|
|
- >
|
|
|
- <text class="text" v-else>否</text>
|
|
|
- </u-cell-item>
|
|
|
-
|
|
|
- <u-cell-item
|
|
|
- v-if="
|
|
|
+ ">
|
|
|
+ <view slot="title">机构发票邮寄状态：</view>
|
|
|
+ <text class="text" v-if="invoiceDetail.sendInvoice == 1">是</text>
|
|
|
+ <text class="text" v-else>否</text>
|
|
|
+ </u-cell-item>
|
|
|
+
|
|
|
+ <u-cell-item v-if="
|
|
|
invoiceDetail.periodStatus == 3 &&
|
|
|
(invoiceDetail.invoiceStatus == 2 ||
|
|
|
invoiceDetail.invoiceStatus == -1) &&
|
|
|
invoiceDetail.sendInvoice == 1 &&
|
|
|
invoiceDetail.type == 2 &&
|
|
|
invoiceDetail.subject == 2
|
|
|
- "
|
|
|
- @click.stop="copy(invoiceDetail.trackingNum)"
|
|
|
- :border-bottom="false"
|
|
|
- hover-class="none"
|
|
|
- :arrow="false"
|
|
|
- >
|
|
|
- <view slot="title">发票邮寄快递单号：(点击可复制)</view>
|
|
|
- <text class="text">{{
|
|
|
+ " @click.stop="copy(invoiceDetail.trackingNum)" :border-bottom="false" hover-class="none"
|
|
|
+ :arrow="false">
|
|
|
+ <view slot="title">发票邮寄快递单号：(点击可复制)</view>
|
|
|
+ <text class="text">{{
|
|
|
invoiceDetail.trackingNum || ""
|
|
|
}}</text>
|
|
|
- </u-cell-item>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
- <view class="order-detail__btns" v-if="invoiceDetail.periodStatus == 1">
|
|
|
- <view class="btn" @click="orderDetailModal = false">知道了</view>
|
|
|
- <view class="btn warm" @click="orderCancelModal = true"
|
|
|
- >撤销申请</view
|
|
|
- >
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="order-detail__btns" v-else>
|
|
|
- <view class="btn ok" @click="orderDetailModal = false">知道了</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </u-popup>
|
|
|
-
|
|
|
- <u-popup
|
|
|
- class="modal"
|
|
|
- v-model="orderCancelModal"
|
|
|
- mode="center"
|
|
|
- border-radius="24"
|
|
|
- >
|
|
|
- <view class="order-cancel">
|
|
|
- <view class="header"> 温馨提示 </view>
|
|
|
- <view class="body">
|
|
|
- <view>撤销申请后，</view>
|
|
|
- <view>本次的发票申请内容将不存在。</view>
|
|
|
- <view>请慎重考虑。 </view>
|
|
|
- <view>您确定要取消本次发票申请吗？</view>
|
|
|
- </view>
|
|
|
- <view class="footer">
|
|
|
- <view class="btn cancel" @click="orderCancelModal = false">取消</view>
|
|
|
- <view class="btn ok" @click="orderCancel()">确定</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </u-popup>
|
|
|
- </view>
|
|
|
+ </u-cell-item>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ <view class="order-detail__btns" v-if="invoiceDetail.periodStatus == 1">
|
|
|
+ <view class="btn" @click="orderDetailModal = false">知道了</view>
|
|
|
+ <view class="btn warm" @click="orderCancelModal = true">撤销申请</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="order-detail__btns" v-else>
|
|
|
+ <view class="btn ok" @click="orderDetailModal = false">知道了</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+
|
|
|
+ <u-popup class="modal" v-model="orderCancelModal" mode="center" border-radius="24">
|
|
|
+ <view class="order-cancel">
|
|
|
+ <view class="header"> 温馨提示 </view>
|
|
|
+ <view class="body">
|
|
|
+ <view>撤销申请后，</view>
|
|
|
+ <view>本次的发票申请内容将不存在。</view>
|
|
|
+ <view>请慎重考虑。 </view>
|
|
|
+ <view>您确定要取消本次发票申请吗？</view>
|
|
|
+ </view>
|
|
|
+ <view class="footer">
|
|
|
+ <view class="btn cancel" @click="orderCancelModal = false">取消</view>
|
|
|
+ <view class="btn ok" @click="orderCancel()">确定</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { mapGetters } from "vuex";
|
|
|
-import { download, preview } from "../../common/util";
|
|
|
-export default {
|
|
|
- components: {},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- checkOrderList: [],
|
|
|
- recordList: [],
|
|
|
- list: [
|
|
|
- {
|
|
|
- name: "发票申请",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "发票记录",
|
|
|
- },
|
|
|
- ],
|
|
|
- invoiceDetail: {
|
|
|
- amount: 0,
|
|
|
- },
|
|
|
- form: {
|
|
|
- type: "1",
|
|
|
- subject: "1",
|
|
|
- invoiceTitle: "",
|
|
|
- orderGoodsIds: "",
|
|
|
- taxRegistryNumber: "",
|
|
|
- companyAddress: "",
|
|
|
- email: "",
|
|
|
- invoiceRemark: "",
|
|
|
- phone: "",
|
|
|
- bankName: "",
|
|
|
- bankAccount: "",
|
|
|
- receivingAddress: "",
|
|
|
- receivingName: "",
|
|
|
- receivingTel: "",
|
|
|
- },
|
|
|
- rules: {
|
|
|
- receivingTel: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请输入收件手机",
|
|
|
- // 可以单个或者同时写两个触发验证方式
|
|
|
- trigger: ["change"],
|
|
|
- },
|
|
|
- {
|
|
|
- validator: (rule, value, callback) => {
|
|
|
- // 上面有说，返回true表示校验通过，返回false表示不通过
|
|
|
- // this.$u.test.mobile()就是返回true或者false的
|
|
|
- return this.$u.test.mobile(value);
|
|
|
- },
|
|
|
- message: "手机号码格式不正确",
|
|
|
- // 触发器可以同时用blur和change
|
|
|
- trigger: ["change"],
|
|
|
- },
|
|
|
- ],
|
|
|
- type: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请选择发票类型",
|
|
|
- // 可以单个或者同时写两个触发验证方式
|
|
|
- trigger: ["change"],
|
|
|
- },
|
|
|
- ],
|
|
|
- subject: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请选择申请主体",
|
|
|
- // 可以单个或者同时写两个触发验证方式
|
|
|
- trigger: ["change"],
|
|
|
- },
|
|
|
- ],
|
|
|
- invoiceTitle: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请输入发票抬头",
|
|
|
- // 可以单个或者同时写两个触发验证方式
|
|
|
- trigger: ["change"],
|
|
|
- },
|
|
|
- ],
|
|
|
- taxRegistryNumber: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请输入纳税登记号",
|
|
|
- // 可以单个或者同时写两个触发验证方式
|
|
|
- trigger: ["change"],
|
|
|
- },
|
|
|
- {
|
|
|
- validator: (rule, value, callback) => {
|
|
|
- // 上面有说，返回true表示校验通过，返回false表示不通过
|
|
|
- var reg = /(^[0-9A-Z]{15,20}$)/;
|
|
|
- return reg.test(value);
|
|
|
- },
|
|
|
- message: "纳税登记号格式不正确",
|
|
|
- // 触发器可以同时用blur和change
|
|
|
- trigger: ["change"],
|
|
|
- },
|
|
|
- ],
|
|
|
- email: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请输入邮箱",
|
|
|
- // 可以单个或者同时写两个触发验证方式
|
|
|
- trigger: ["change"],
|
|
|
- },
|
|
|
- {
|
|
|
- validator: (rule, value, callback) => {
|
|
|
- // 上面有说，返回true表示校验通过，返回false表示不通过
|
|
|
- var reg =
|
|
|
- /^([a-zA-Z\d][\w-]{2,})@(\w{2,})\.([a-z]{2,})(\.[a-z]{2,})?$/;
|
|
|
- return reg.test(value);
|
|
|
- },
|
|
|
- message: "邮箱格式不正确",
|
|
|
- // 触发器可以同时用blur和change
|
|
|
- trigger: ["change"],
|
|
|
- },
|
|
|
- ],
|
|
|
- companyAddress: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请输入单位地址",
|
|
|
- // 可以单个或者同时写两个触发验证方式
|
|
|
- trigger: ["change"],
|
|
|
- },
|
|
|
- ],
|
|
|
- phone: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请输入电话号码",
|
|
|
- // 可以单个或者同时写两个触发验证方式
|
|
|
- trigger: ["change"],
|
|
|
- },
|
|
|
- {
|
|
|
- validator: (rule, value, callback) => {
|
|
|
- var vartest = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
|
|
|
- var vartest1 = /^([0-9]{3,4})?[0-9]{7,8}$/;
|
|
|
- if (
|
|
|
- this.$u.test.mobile(value) ||
|
|
|
- vartest.test(value) ||
|
|
|
- vartest1.test(value)
|
|
|
- ) {
|
|
|
- return true;
|
|
|
- } else {
|
|
|
- return false;
|
|
|
- }
|
|
|
- },
|
|
|
- message: "电话号码不正确",
|
|
|
- trigger: ["change", "blur"],
|
|
|
- },
|
|
|
- ],
|
|
|
- bankName: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请输入开户银行",
|
|
|
- // 可以单个或者同时写两个触发验证方式
|
|
|
- trigger: ["change"],
|
|
|
- },
|
|
|
- {
|
|
|
- validator: (rule, value, callback) => {
|
|
|
- var reg = /[\u4E00-\u9FA5]+/;
|
|
|
- return reg.test(value);
|
|
|
- },
|
|
|
- message: "开户银行名称不正确",
|
|
|
- trigger: ["change", "blur"],
|
|
|
- },
|
|
|
- ],
|
|
|
-
|
|
|
- bankAccount: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请输入银行账号",
|
|
|
- // 可以单个或者同时写两个触发验证方式
|
|
|
- trigger: ["change"],
|
|
|
- },
|
|
|
- {
|
|
|
- validator: (rule, value, callback) => {
|
|
|
- // 上面有说，返回true表示校验通过，返回false表示不通过
|
|
|
- var reg = /^[1-9]{1}(\d{15}|\d{18})$/;
|
|
|
- return reg.test(value);
|
|
|
- },
|
|
|
- message: "银行卡号格式不正确",
|
|
|
- // 触发器可以同时用blur和change
|
|
|
- trigger: ["change"],
|
|
|
- },
|
|
|
- ],
|
|
|
- receivingAddress: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请输入收件地址",
|
|
|
- // 可以单个或者同时写两个触发验证方式
|
|
|
- trigger: ["change"],
|
|
|
- },
|
|
|
- ],
|
|
|
- receivingName: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请输入收件人",
|
|
|
- // 可以单个或者同时写两个触发验证方式
|
|
|
- trigger: ["change"],
|
|
|
- },
|
|
|
- ],
|
|
|
- orderGoodsIds: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请选择订单",
|
|
|
- // 可以单个或者同时写两个触发验证方式
|
|
|
- trigger: ["change"],
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- orderValue: "",
|
|
|
- orderList: [],
|
|
|
- selectOrderModal: false,
|
|
|
- orderDetailModal: false,
|
|
|
- orderCancelModal: false,
|
|
|
- current: 0,
|
|
|
- invoicePirce: 0,
|
|
|
- order: [],
|
|
|
- typeList: [
|
|
|
- {
|
|
|
- name: "普通发票",
|
|
|
- value: "1",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "增值税专用发票",
|
|
|
- value: "2",
|
|
|
- },
|
|
|
- ],
|
|
|
- mainList: [
|
|
|
- {
|
|
|
- name: "个人",
|
|
|
- value: "1",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "企业",
|
|
|
- value: "2",
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- },
|
|
|
- // onPullDownRefresh() {},
|
|
|
- onLoad(option) {
|
|
|
- this.orderInvoiceCanInvoiceList();
|
|
|
- },
|
|
|
- onReady() {
|
|
|
- this.$refs.uForm.setRules(this.rules);
|
|
|
- },
|
|
|
- methods: {
|
|
|
- orderCancel() {
|
|
|
- let invoiceDetail = JSON.parse(JSON.stringify(this.invoiceDetail));
|
|
|
- invoiceDetail.status = -1;
|
|
|
- this.$api.orderInvoiceCancel(invoiceDetail).then((res) => {
|
|
|
- if (res.data.code == 200) {
|
|
|
- this.orderInvoiceList();
|
|
|
- this.orderInvoiceCanInvoiceList();
|
|
|
- this.orderDetailModal = false;
|
|
|
- this.orderCancelModal = false;
|
|
|
- uni.showToast({
|
|
|
- title: "撤销成功",
|
|
|
- icon: "none",
|
|
|
- });
|
|
|
- } else {
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- showDetailModal(item) {
|
|
|
- this.orderDetailModal = true;
|
|
|
- this.invoiceDetail = item;
|
|
|
- },
|
|
|
- toFixed(number) {
|
|
|
- return number.toFixed(2);
|
|
|
- },
|
|
|
- /**
|
|
|
- * 获取可开发票的订单,/order/invoice/canInvoiceList
|
|
|
- */
|
|
|
- orderInvoiceCanInvoiceList() {
|
|
|
- this.$api.orderInvoiceCanInvoiceList().then((res) => {
|
|
|
- if (res.data.code == 200) {
|
|
|
- res.data.rows.forEach((item) => {
|
|
|
- item.checked = false;
|
|
|
- });
|
|
|
- this.orderList = res.data.rows;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- /**
|
|
|
- * @param {Object} checkedState 显示状态
|
|
|
- * @param {Object} index 索引值
|
|
|
- * 修改开票订单列表显示状态
|
|
|
- */
|
|
|
- showOrder(showState, index) {
|
|
|
- this.$set(this.recordList[index], "checked", !showState);
|
|
|
- },
|
|
|
- /**
|
|
|
- * 发票申请提交
|
|
|
- */
|
|
|
- formSubmit() {
|
|
|
- this.$refs.uForm.validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- if (this.invoicePirce > 10000) {
|
|
|
- uni.showModal({
|
|
|
- title: "提示",
|
|
|
- content:
|
|
|
- "您所选的订单总开票金额，大于10000元，超出单张发票的开票额度，请修改开票订单",
|
|
|
- showCancel: false,
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
- let data = JSON.parse(JSON.stringify(this.form));
|
|
|
- data.orderGoodsIds = data.orderGoodsIds.split(",");
|
|
|
- data.amount = this.invoicePirce;
|
|
|
- if (data.subject == "1") {
|
|
|
- data.taxRegistryNumber = "";
|
|
|
- data.companyAddress = "";
|
|
|
- data.phone = "";
|
|
|
- data.bankName = "";
|
|
|
- data.bankAccount = "";
|
|
|
- data.receivingAddress = "";
|
|
|
- data.receivingName = "";
|
|
|
- data.receivingTel = "";
|
|
|
- }
|
|
|
- this.$api.orderInvoice(data).then((res) => {
|
|
|
- if (res.data.code == 200) {
|
|
|
- this.orderInvoiceCanInvoiceList();
|
|
|
- this.form = {
|
|
|
- type: "1",
|
|
|
- subject: "1",
|
|
|
- invoiceTitle: "",
|
|
|
- orderGoodsIds: "",
|
|
|
- taxRegistryNumber: "",
|
|
|
- companyAddress: "",
|
|
|
- phone: "",
|
|
|
- bankName: "",
|
|
|
- bankAccount: "",
|
|
|
- receivingAddress: "",
|
|
|
- receivingName: "",
|
|
|
- receivingTel: "",
|
|
|
- };
|
|
|
- this.invoicePirce = 0;
|
|
|
- uni.showModal({
|
|
|
- title: "操作提示",
|
|
|
- content: `您本次的发票申请已经提交成功！\n请稍后留意邮箱。`,
|
|
|
- showCancel: false,
|
|
|
- confirmText: "知道了",
|
|
|
- });
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- icon: "none",
|
|
|
- title: res.data.msg,
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- /**
|
|
|
- * @param {Object} e value
|
|
|
- * 发票类型修改
|
|
|
- */
|
|
|
- formTypeChange(e) {
|
|
|
- if (e == "2") {
|
|
|
- this.$set(this.form, "subject", "2");
|
|
|
- } else {
|
|
|
- }
|
|
|
- },
|
|
|
- /**
|
|
|
- * @param {Object} e
|
|
|
- * tabs 切换
|
|
|
- */
|
|
|
- change(e) {
|
|
|
- this.current = e;
|
|
|
- if (this.current == 1) {
|
|
|
- this.orderInvoiceList();
|
|
|
- } else {
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.uForm.setRules(this.rules);
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- orderInvoiceList() {
|
|
|
- this.$api.orderInvoiceList().then((res) => {
|
|
|
- if (res.data.code == 200) {
|
|
|
- this.recordList = res.data.rows;
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- icon: "none",
|
|
|
- title: res.data.msg,
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- radioGroupChange(e) {
|
|
|
- console.log(e);
|
|
|
- },
|
|
|
- copy(str) {
|
|
|
- if (!str) {
|
|
|
- uni.showToast({
|
|
|
- icon: "none",
|
|
|
- title: "暂时没有可以复制的快递号",
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
- let newStr = String(str);
|
|
|
- uni.setClipboardData({
|
|
|
- data: newStr,
|
|
|
- success: function () {
|
|
|
- console.log("success");
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- okPopup() {
|
|
|
- this.selectOrderModal = false;
|
|
|
- let strArr = [];
|
|
|
- this.invoicePirce = 0;
|
|
|
- this.orderList.forEach((item, index) => {
|
|
|
- if (item.checked) {
|
|
|
- this.$set(this.orderList[index], "disabled", true);
|
|
|
- strArr.push(item.orderGoodsId);
|
|
|
- this.invoicePirce += item.goodsPrice;
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- this.form.orderGoodsIds = strArr.join(",");
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.orderGoodsIds.onFieldChange();
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- deleteOrder(index) {
|
|
|
- this.$set(this.orderList[index], "disabled", false);
|
|
|
- this.$set(this.orderList[index], "checked", false);
|
|
|
- let strArr = [];
|
|
|
- this.invoicePirce = 0;
|
|
|
- this.orderList.forEach((item, index) => {
|
|
|
- if (item.checked) {
|
|
|
- strArr.push(item.orderGoodsId);
|
|
|
- this.invoicePirce += item.goodsPrice;
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- this.form.orderGoodsIds = strArr.join(",");
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.orderGoodsIds.onFieldChange();
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- previewImg(item) {
|
|
|
- // 预览图片
|
|
|
- uni.previewImage({
|
|
|
- urls: [this.$method.splitImgHost(item.invoiceImg, true, 1000)],
|
|
|
- longPressActions: {
|
|
|
- itemList: ["发送给朋友", "保存图片", "收藏"],
|
|
|
- success: function (data) {},
|
|
|
- fail: function (err) {
|
|
|
- console.log(err.errMsg);
|
|
|
- },
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- download(item) {
|
|
|
- download(item.invoiceImg);
|
|
|
- },
|
|
|
- preview(item) {
|
|
|
- preview(item.invoiceImg);
|
|
|
- },
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters(["userInfo","other"]),
|
|
|
- filterOrderList() {
|
|
|
- return this.orderList.filter((i) => i.disabled) || [];
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
+ import {
|
|
|
+ mapGetters
|
|
|
+ } from "vuex";
|
|
|
+ import {
|
|
|
+ download,
|
|
|
+ preview
|
|
|
+ } from "../../common/util";
|
|
|
+ export default {
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ checkOrderList: [],
|
|
|
+ recordList: [],
|
|
|
+ list: [{
|
|
|
+ name: "发票申请",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "发票记录",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ invoiceDetail: {
|
|
|
+ amount: 0,
|
|
|
+ },
|
|
|
+ form: {
|
|
|
+ type: "1",
|
|
|
+ subject: "1",
|
|
|
+ invoiceTitle: "",
|
|
|
+ orderGoodsIds: "",
|
|
|
+ taxRegistryNumber: "",
|
|
|
+ companyAddress: "",
|
|
|
+ email: "",
|
|
|
+ invoiceRemark: "",
|
|
|
+ phone: "",
|
|
|
+ bankName: "",
|
|
|
+ bankAccount: "",
|
|
|
+ receivingAddress: "",
|
|
|
+ receivingName: "",
|
|
|
+ receivingTel: "",
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ receivingTel: [{
|
|
|
+ required: true,
|
|
|
+ message: "请输入收件手机",
|
|
|
+ // 可以单个或者同时写两个触发验证方式
|
|
|
+ trigger: ["change"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ // 上面有说，返回true表示校验通过，返回false表示不通过
|
|
|
+ // this.$u.test.mobile()就是返回true或者false的
|
|
|
+ return this.$u.test.mobile(value);
|
|
|
+ },
|
|
|
+ message: "手机号码格式不正确",
|
|
|
+ // 触发器可以同时用blur和change
|
|
|
+ trigger: ["change"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ type: [{
|
|
|
+ required: true,
|
|
|
+ message: "请选择发票类型",
|
|
|
+ // 可以单个或者同时写两个触发验证方式
|
|
|
+ trigger: ["change"],
|
|
|
+ }, ],
|
|
|
+ subject: [{
|
|
|
+ required: true,
|
|
|
+ message: "请选择申请主体",
|
|
|
+ // 可以单个或者同时写两个触发验证方式
|
|
|
+ trigger: ["change"],
|
|
|
+ }, ],
|
|
|
+ invoiceTitle: [{
|
|
|
+ required: true,
|
|
|
+ message: "请输入发票抬头",
|
|
|
+ // 可以单个或者同时写两个触发验证方式
|
|
|
+ trigger: ["change"],
|
|
|
+ }, ],
|
|
|
+ taxRegistryNumber: [{
|
|
|
+ required: true,
|
|
|
+ message: "请输入纳税登记号",
|
|
|
+ // 可以单个或者同时写两个触发验证方式
|
|
|
+ trigger: ["change"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ // 上面有说，返回true表示校验通过，返回false表示不通过
|
|
|
+ var reg = /(^[0-9A-Z]{15,20}$)/;
|
|
|
+ return reg.test(value);
|
|
|
+ },
|
|
|
+ message: "纳税登记号格式不正确",
|
|
|
+ // 触发器可以同时用blur和change
|
|
|
+ trigger: ["change"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ email: [{
|
|
|
+ required: true,
|
|
|
+ message: "请输入邮箱",
|
|
|
+ // 可以单个或者同时写两个触发验证方式
|
|
|
+ trigger: ["change"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ // 上面有说，返回true表示校验通过，返回false表示不通过
|
|
|
+ var reg =
|
|
|
+ /^([a-zA-Z\d][\w-]{2,})@(\w{2,})\.([a-z]{2,})(\.[a-z]{2,})?$/;
|
|
|
+ return reg.test(value);
|
|
|
+ },
|
|
|
+ message: "邮箱格式不正确",
|
|
|
+ // 触发器可以同时用blur和change
|
|
|
+ trigger: ["change"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ companyAddress: [{
|
|
|
+ required: true,
|
|
|
+ message: "请输入单位地址",
|
|
|
+ // 可以单个或者同时写两个触发验证方式
|
|
|
+ trigger: ["change"],
|
|
|
+ }, ],
|
|
|
+ phone: [{
|
|
|
+ required: true,
|
|
|
+ message: "请输入电话号码",
|
|
|
+ // 可以单个或者同时写两个触发验证方式
|
|
|
+ trigger: ["change"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ var vartest = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
|
|
|
+ var vartest1 = /^([0-9]{3,4})?[0-9]{7,8}$/;
|
|
|
+ if (
|
|
|
+ this.$u.test.mobile(value) ||
|
|
|
+ vartest.test(value) ||
|
|
|
+ vartest1.test(value)
|
|
|
+ ) {
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ message: "电话号码不正确",
|
|
|
+ trigger: ["change", "blur"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ bankName: [{
|
|
|
+ required: true,
|
|
|
+ message: "请输入开户银行",
|
|
|
+ // 可以单个或者同时写两个触发验证方式
|
|
|
+ trigger: ["change"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ var reg = /[\u4E00-\u9FA5]+/;
|
|
|
+ return reg.test(value);
|
|
|
+ },
|
|
|
+ message: "开户银行名称不正确",
|
|
|
+ trigger: ["change", "blur"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+
|
|
|
+ bankAccount: [{
|
|
|
+ required: true,
|
|
|
+ message: "请输入银行账号",
|
|
|
+ // 可以单个或者同时写两个触发验证方式
|
|
|
+ trigger: ["change"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ // 上面有说，返回true表示校验通过，返回false表示不通过
|
|
|
+ // var reg = /^[1-9]{1}(\d{15}|\d{18})$/;
|
|
|
+ var reg = /^[1-9]\d{7,20}$/
|
|
|
+ return reg.test(value);
|
|
|
+ },
|
|
|
+ message: "银行卡号格式不正确",
|
|
|
+ // 触发器可以同时用blur和change
|
|
|
+ trigger: ["change"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ receivingAddress: [{
|
|
|
+ required: true,
|
|
|
+ message: "请输入收件地址",
|
|
|
+ // 可以单个或者同时写两个触发验证方式
|
|
|
+ trigger: ["change"],
|
|
|
+ }, ],
|
|
|
+ receivingName: [{
|
|
|
+ required: true,
|
|
|
+ message: "请输入收件人",
|
|
|
+ // 可以单个或者同时写两个触发验证方式
|
|
|
+ trigger: ["change"],
|
|
|
+ }, ],
|
|
|
+ orderGoodsIds: [{
|
|
|
+ required: true,
|
|
|
+ message: "请选择订单",
|
|
|
+ // 可以单个或者同时写两个触发验证方式
|
|
|
+ trigger: ["change"],
|
|
|
+ }, ],
|
|
|
+ },
|
|
|
+ orderValue: "",
|
|
|
+ orderList: [],
|
|
|
+ selectOrderModal: false,
|
|
|
+ orderDetailModal: false,
|
|
|
+ orderCancelModal: false,
|
|
|
+ current: 0,
|
|
|
+ invoicePirce: 0,
|
|
|
+ order: [],
|
|
|
+ typeList: [{
|
|
|
+ name: "普通发票",
|
|
|
+ value: "1",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "增值税专用发票",
|
|
|
+ value: "2",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ mainList: [{
|
|
|
+ name: "个人",
|
|
|
+ value: "1",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "企业",
|
|
|
+ value: "2",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // onPullDownRefresh() {},
|
|
|
+ onLoad(option) {
|
|
|
+ this.orderInvoiceCanInvoiceList();
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ this.$refs.uForm.setRules(this.rules);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ orderCancel() {
|
|
|
+ let invoiceDetail = JSON.parse(JSON.stringify(this.invoiceDetail));
|
|
|
+ invoiceDetail.status = -1;
|
|
|
+ this.$api.orderInvoiceCancel(invoiceDetail).then((res) => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ this.orderInvoiceList();
|
|
|
+ this.orderInvoiceCanInvoiceList();
|
|
|
+ this.orderDetailModal = false;
|
|
|
+ this.orderCancelModal = false;
|
|
|
+ uni.showToast({
|
|
|
+ title: "撤销成功",
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ } else {}
|
|
|
+ });
|
|
|
+ },
|
|
|
+ showDetailModal(item) {
|
|
|
+ this.orderDetailModal = true;
|
|
|
+ this.invoiceDetail = item;
|
|
|
+ },
|
|
|
+ toFixed(number) {
|
|
|
+ return number.toFixed(2);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取可开发票的订单,/order/invoice/canInvoiceList
|
|
|
+ */
|
|
|
+ orderInvoiceCanInvoiceList() {
|
|
|
+ this.$api.orderInvoiceCanInvoiceList().then((res) => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ res.data.rows.forEach((item) => {
|
|
|
+ item.checked = false;
|
|
|
+ });
|
|
|
+ this.orderList = res.data.rows;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @param {Object} checkedState 显示状态
|
|
|
+ * @param {Object} index 索引值
|
|
|
+ * 修改开票订单列表显示状态
|
|
|
+ */
|
|
|
+ showOrder(showState, index) {
|
|
|
+ this.$set(this.recordList[index], "checked", !showState);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 发票申请提交
|
|
|
+ */
|
|
|
+ formSubmit() {
|
|
|
+ this.$refs.uForm.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ if (this.invoicePirce > 10000) {
|
|
|
+ uni.showModal({
|
|
|
+ title: "提示",
|
|
|
+ content: "您所选的订单总开票金额，大于10000元，超出单张发票的开票额度，请修改开票订单",
|
|
|
+ showCancel: false,
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let data = JSON.parse(JSON.stringify(this.form));
|
|
|
+ data.orderGoodsIds = data.orderGoodsIds.split(",");
|
|
|
+ data.amount = this.invoicePirce;
|
|
|
+ if (data.subject == "1") {
|
|
|
+ data.taxRegistryNumber = "";
|
|
|
+ data.companyAddress = "";
|
|
|
+ data.phone = "";
|
|
|
+ data.bankName = "";
|
|
|
+ data.bankAccount = "";
|
|
|
+ data.receivingAddress = "";
|
|
|
+ data.receivingName = "";
|
|
|
+ data.receivingTel = "";
|
|
|
+ }
|
|
|
+ this.$api.orderInvoice(data).then((res) => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ this.orderInvoiceCanInvoiceList();
|
|
|
+ this.form = {
|
|
|
+ type: "1",
|
|
|
+ subject: "1",
|
|
|
+ invoiceTitle: "",
|
|
|
+ orderGoodsIds: "",
|
|
|
+ taxRegistryNumber: "",
|
|
|
+ companyAddress: "",
|
|
|
+ phone: "",
|
|
|
+ bankName: "",
|
|
|
+ bankAccount: "",
|
|
|
+ receivingAddress: "",
|
|
|
+ receivingName: "",
|
|
|
+ receivingTel: "",
|
|
|
+ };
|
|
|
+ this.invoicePirce = 0;
|
|
|
+ uni.showModal({
|
|
|
+ title: "操作提示",
|
|
|
+ content: `您本次的发票申请已经提交成功！\n请稍后留意邮箱。`,
|
|
|
+ showCancel: false,
|
|
|
+ confirmText: "知道了",
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ icon: "none",
|
|
|
+ title: res.data.msg,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @param {Object} e value
|
|
|
+ * 发票类型修改
|
|
|
+ */
|
|
|
+ formTypeChange(e) {
|
|
|
+ if (e == "2") {
|
|
|
+ this.$set(this.form, "subject", "2");
|
|
|
+ } else {}
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @param {Object} e
|
|
|
+ * tabs 切换
|
|
|
+ */
|
|
|
+ change(e) {
|
|
|
+ this.current = e;
|
|
|
+ if (this.current == 1) {
|
|
|
+ this.orderInvoiceList();
|
|
|
+ } else {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.uForm.setRules(this.rules);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ orderInvoiceList() {
|
|
|
+ this.$api.orderInvoiceList().then((res) => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ this.recordList = res.data.rows;
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ icon: "none",
|
|
|
+ title: res.data.msg,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ radioGroupChange(e) {
|
|
|
+ console.log(e);
|
|
|
+ },
|
|
|
+ copy(str) {
|
|
|
+ if (!str) {
|
|
|
+ uni.showToast({
|
|
|
+ icon: "none",
|
|
|
+ title: "暂时没有可以复制的快递号",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let newStr = String(str);
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: newStr,
|
|
|
+ success: function() {
|
|
|
+ console.log("success");
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ okPopup() {
|
|
|
+ this.selectOrderModal = false;
|
|
|
+ let strArr = [];
|
|
|
+ this.invoicePirce = 0;
|
|
|
+ this.orderList.forEach((item, index) => {
|
|
|
+ if (item.checked) {
|
|
|
+ this.$set(this.orderList[index], "disabled", true);
|
|
|
+ strArr.push(item.orderGoodsId);
|
|
|
+ this.invoicePirce += item.goodsPrice;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ this.form.orderGoodsIds = strArr.join(",");
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.orderGoodsIds.onFieldChange();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ deleteOrder(index) {
|
|
|
+ this.$set(this.orderList[index], "disabled", false);
|
|
|
+ this.$set(this.orderList[index], "checked", false);
|
|
|
+ let strArr = [];
|
|
|
+ this.invoicePirce = 0;
|
|
|
+ this.orderList.forEach((item, index) => {
|
|
|
+ if (item.checked) {
|
|
|
+ strArr.push(item.orderGoodsId);
|
|
|
+ this.invoicePirce += item.goodsPrice;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ this.form.orderGoodsIds = strArr.join(",");
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.orderGoodsIds.onFieldChange();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ previewImg(item) {
|
|
|
+ // 预览图片
|
|
|
+ uni.previewImage({
|
|
|
+ urls: [this.$method.splitImgHost(item.invoiceImg, true, 1000)],
|
|
|
+ longPressActions: {
|
|
|
+ itemList: ["发送给朋友", "保存图片", "收藏"],
|
|
|
+ success: function(data) {},
|
|
|
+ fail: function(err) {
|
|
|
+ console.log(err.errMsg);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ download(item) {
|
|
|
+ download(item.invoiceImg);
|
|
|
+ },
|
|
|
+ preview(item) {
|
|
|
+ preview(item.invoiceImg);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(["userInfo", "other"]),
|
|
|
+ filterOrderList() {
|
|
|
+ return this.orderList.filter((i) => i.disabled) || [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
</script>
|
|
|
<style>
|
|
|
-page {
|
|
|
- background: #eaeef1;
|
|
|
-}
|
|
|
+ page {
|
|
|
+ background: #eaeef1;
|
|
|
+ }
|
|
|
</style>
|
|
|
<style scoped lang="scss">
|
|
|
-.invoice {
|
|
|
- &__tabs {
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- position: fixed;
|
|
|
- height: 96rpx;
|
|
|
- z-index: 999;
|
|
|
- }
|
|
|
-
|
|
|
- &__content {
|
|
|
- padding-top: 96rpx;
|
|
|
-
|
|
|
- .open {
|
|
|
- padding-bottom: 150rpx;
|
|
|
- margin: 8rpx 24rpx 0;
|
|
|
-
|
|
|
- .form {
|
|
|
- padding: 24rpx;
|
|
|
- width: 702rpx;
|
|
|
- background: #ffffff;
|
|
|
- border-radius: 24rpx;
|
|
|
-
|
|
|
- // /deep/ .u-input__input {
|
|
|
- // text-align: right;
|
|
|
- // }
|
|
|
-
|
|
|
- .form-item {
|
|
|
- height: 78rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .text {
|
|
|
- font-size: 28rpx;
|
|
|
- width: 120rpx;
|
|
|
- // color: #999999;
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- flex: 1;
|
|
|
- text-align: left;
|
|
|
- color: #bbb;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .check-order {
|
|
|
- margin-top: 20rpx;
|
|
|
- width: 654rpx;
|
|
|
- height: 168rpx;
|
|
|
- background: #f5f5f5;
|
|
|
- border: 2px solid #f5f5f5;
|
|
|
- padding: 20rpx;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .close {
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .title,
|
|
|
- .number,
|
|
|
- .price {
|
|
|
- color: #333333;
|
|
|
- margin-top: 10rpx;
|
|
|
- line-height: 30rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .number {
|
|
|
- color: #999;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .order-text {
|
|
|
- margin-top: 16rpx;
|
|
|
- padding: 0 30rpx;
|
|
|
- width: 702rpx;
|
|
|
- height: 80rpx;
|
|
|
- background: #ffffff;
|
|
|
- border-radius: 24rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- &__label {
|
|
|
- font-size: 24rpx;
|
|
|
- }
|
|
|
-
|
|
|
- &__price {
|
|
|
- font-size: 30rpx;
|
|
|
- margin-left: 20rpx;
|
|
|
- color: #ff2d55;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .submit {
|
|
|
- text-align: center;
|
|
|
- line-height: 80rpx;
|
|
|
- color: #fff;
|
|
|
- font-size: 30rpx;
|
|
|
- width: 526rpx;
|
|
|
- height: 80rpx;
|
|
|
- background: #007aff;
|
|
|
- box-shadow: 0rpx 8rpx 7rpx 1rpx rgba(0, 122, 255, 0.1);
|
|
|
- border-radius: 40rpx;
|
|
|
- position: fixed;
|
|
|
- left: 50%;
|
|
|
- bottom: 40rpx;
|
|
|
- z-index: 999;
|
|
|
- transform: translateX(-50%);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .record {
|
|
|
- .nodata {
|
|
|
- padding-top: 160rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- text-align: center;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
-
|
|
|
- &__list {
|
|
|
- .record-item {
|
|
|
- margin: 0 8rpx 10rpx;
|
|
|
- .item__time {
|
|
|
- padding: 20rpx 0;
|
|
|
- text-align: center;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
-
|
|
|
- .item__content {
|
|
|
- background: #fff;
|
|
|
- border-radius: 16rpx;
|
|
|
-
|
|
|
- .top {
|
|
|
- padding: 12rpx 0;
|
|
|
- border-bottom: 1px solid #eeeeee;
|
|
|
- .state {
|
|
|
- position: relative;
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
- font-size: 30rpx;
|
|
|
- margin: 0 auto;
|
|
|
- width: 240rpx;
|
|
|
- height: 56rpx;
|
|
|
- line-height: 56rpx;
|
|
|
- background: #007aff;
|
|
|
- border-radius: 28rpx;
|
|
|
-
|
|
|
- &.wait {
|
|
|
- background: #007aff;
|
|
|
- }
|
|
|
- &.refuse {
|
|
|
- background: #ff3b30;
|
|
|
- }
|
|
|
- &.agree {
|
|
|
- background: #34c759;
|
|
|
- }
|
|
|
-
|
|
|
- .arrow {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- right: 18rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .bottom {
|
|
|
- padding: 0 32rpx;
|
|
|
- .flex {
|
|
|
- height: 80rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- border-bottom: 1px solid #eeeeee;
|
|
|
-
|
|
|
- &.noborder {
|
|
|
- border: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .text {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
-
|
|
|
- &__auto {
|
|
|
- text-align: right;
|
|
|
- flex: 1;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #666666;
|
|
|
-
|
|
|
- .red {
|
|
|
- color: #ff3b30;
|
|
|
- }
|
|
|
-
|
|
|
- .green {
|
|
|
- color: #34c759;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .order-list {
|
|
|
- padding-bottom: 30rpx;
|
|
|
- .order-item {
|
|
|
- border-radius: 16rpx;
|
|
|
- padding: 14rpx;
|
|
|
- background: #f5f5f5;
|
|
|
- font-size: 30rpx;
|
|
|
- color: #333;
|
|
|
- margin-top: 16rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .modal {
|
|
|
- .select-order {
|
|
|
- .line {
|
|
|
- width: 80rpx;
|
|
|
- height: 8rpx;
|
|
|
- background: #999999;
|
|
|
- border-radius: 4rpx;
|
|
|
- margin: 8rpx auto 0;
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
- margin: 20rpx 0 15rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
-
|
|
|
- .order-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 20rpx;
|
|
|
-
|
|
|
- &__bg {
|
|
|
- width: 654rpx;
|
|
|
- height: 168rpx;
|
|
|
- background: #f5f5f5;
|
|
|
- border: 2px solid #f5f5f5;
|
|
|
- border-radius: 16rpx;
|
|
|
- padding: 20rpx;
|
|
|
-
|
|
|
- &.active {
|
|
|
- background: #ebf5ff;
|
|
|
- border: 2px solid #007aff;
|
|
|
- }
|
|
|
-
|
|
|
- .order-title,
|
|
|
- .order-number,
|
|
|
- .order-price {
|
|
|
- color: #333333;
|
|
|
- margin-top: 10rpx;
|
|
|
- line-height: 30rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .order-number {
|
|
|
- color: #999;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .confrim-btn {
|
|
|
- width: 750rpx;
|
|
|
- height: 98rpx;
|
|
|
- background: rgba(255, 255, 255, 0.98);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .okBtn {
|
|
|
- text-align: center;
|
|
|
- line-height: 64rpx;
|
|
|
- color: #fff;
|
|
|
- font-size: 30rpx;
|
|
|
- width: 200rpx;
|
|
|
- height: 64rpx;
|
|
|
- background: linear-gradient(0deg, #015eea, #00c0fa);
|
|
|
- border-radius: 32rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .no_data {
|
|
|
- text-align: center;
|
|
|
- margin-top: 40rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .order-detail {
|
|
|
- width: 640rpx;
|
|
|
- height: 1000rpx;
|
|
|
- background: #ffffff;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- &__content {
|
|
|
- flex: 1;
|
|
|
-
|
|
|
- .content {
|
|
|
- padding: 24rpx 24rpx 0;
|
|
|
-
|
|
|
- /deep/ .u-cell {
|
|
|
- padding: 10rpx;
|
|
|
-
|
|
|
- &_title {
|
|
|
- color: #999;
|
|
|
- }
|
|
|
-
|
|
|
- &__value {
|
|
|
- color: #333;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
-
|
|
|
- .text {
|
|
|
- &.wait {
|
|
|
- color: #007aff;
|
|
|
- }
|
|
|
-
|
|
|
- &.agree {
|
|
|
- color: #34c759;
|
|
|
- }
|
|
|
-
|
|
|
- &.refuse {
|
|
|
- color: #ff3b30;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .preview {
|
|
|
- width: 240rpx;
|
|
|
- height: 160rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .download-btn {
|
|
|
- margin: 10rpx 0 20rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 56rpx;
|
|
|
- color: #fff;
|
|
|
- font-size: 30rpx;
|
|
|
- width: 224rpx;
|
|
|
- height: 56rpx;
|
|
|
- background: #007aff;
|
|
|
- border-radius: 16rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .header {
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #333333;
|
|
|
- line-height: 48rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .body {
|
|
|
- &__item {
|
|
|
- border-bottom: 1px solid #eeeeee;
|
|
|
- padding-bottom: 30rpx;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- border: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
- margin-top: 30rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #007aff;
|
|
|
- line-height: 48rpx;
|
|
|
-
|
|
|
- &::before {
|
|
|
- content: "";
|
|
|
- width: 4rpx;
|
|
|
- height: 24rpx;
|
|
|
- background: #007aff;
|
|
|
- border-radius: 2rpx;
|
|
|
- display: inline-block;
|
|
|
- margin-right: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .order-list {
|
|
|
- .order-item {
|
|
|
- overflow: hidden;
|
|
|
- border-radius: 16rpx;
|
|
|
- padding: 0 14rpx 14rpx;
|
|
|
- background: #f5f5f5;
|
|
|
- font-size: 30rpx;
|
|
|
- color: #333;
|
|
|
- margin-top: 16rpx;
|
|
|
-
|
|
|
- .order-title,
|
|
|
- .order-number,
|
|
|
- .order-price {
|
|
|
- color: #333333;
|
|
|
- margin-top: 20rpx;
|
|
|
- line-height: 26rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .order-number {
|
|
|
- color: #999;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .order-text {
|
|
|
- margin-top: 16rpx;
|
|
|
- padding: 0 30rpx;
|
|
|
- height: 80rpx;
|
|
|
- background: #f5f5f5;
|
|
|
- border-radius: 16rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- &__label {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
-
|
|
|
- &__price {
|
|
|
- font-size: 30rpx;
|
|
|
- margin-left: 20rpx;
|
|
|
- color: #ff2d55;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &__btns {
|
|
|
- border-top: 1px solid #eeeeee;
|
|
|
- padding: 0 24rpx;
|
|
|
- width: 100%;
|
|
|
- height: 140rpx;
|
|
|
- background: #ffffff;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .btn {
|
|
|
- text-align: center;
|
|
|
- width: 200rpx;
|
|
|
- height: 80rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- background: #f5f5f5;
|
|
|
- border-radius: 40rpx;
|
|
|
- color: #007aff;
|
|
|
- font-size: 30rpx;
|
|
|
- margin: 0 10rpx;
|
|
|
-
|
|
|
- &.warm {
|
|
|
- background: #ff3b30;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- &.ok {
|
|
|
- color: #fff;
|
|
|
- width: 526rpx;
|
|
|
- height: 80rpx;
|
|
|
- background: #007aff;
|
|
|
- border-radius: 40rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .order-cancel {
|
|
|
- width: 640rpx;
|
|
|
- height: 439rpx;
|
|
|
- background: #ffffff;
|
|
|
- padding: 40rpx;
|
|
|
- .header {
|
|
|
- text-align: center;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #333333;
|
|
|
- line-height: 48rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .body {
|
|
|
- margin-top: 40rpx;
|
|
|
-
|
|
|
- view {
|
|
|
- font-size: 30rpx;
|
|
|
- color: #666666;
|
|
|
- line-height: 48rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .footer {
|
|
|
- margin-top: 40rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .btn {
|
|
|
- text-align: center;
|
|
|
- line-height: 80rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- color: #007aff;
|
|
|
- width: 200rpx;
|
|
|
- height: 80rpx;
|
|
|
- background: #f5f5f5;
|
|
|
- border-radius: 40rpx;
|
|
|
- margin: 0 10rpx;
|
|
|
-
|
|
|
- &.ok {
|
|
|
- color: #fff;
|
|
|
- background: #007aff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
+ .invoice {
|
|
|
+ &__tabs {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ position: fixed;
|
|
|
+ height: 96rpx;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__content {
|
|
|
+ padding-top: 96rpx;
|
|
|
+
|
|
|
+ .open {
|
|
|
+ padding-bottom: 150rpx;
|
|
|
+ margin: 8rpx 24rpx 0;
|
|
|
+
|
|
|
+ .form {
|
|
|
+ padding: 24rpx;
|
|
|
+ width: 702rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 24rpx;
|
|
|
+
|
|
|
+ // /deep/ .u-input__input {
|
|
|
+ // text-align: right;
|
|
|
+ // }
|
|
|
+
|
|
|
+ .form-item {
|
|
|
+ height: 78rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ width: 120rpx;
|
|
|
+ // color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ flex: 1;
|
|
|
+ text-align: left;
|
|
|
+ color: #bbb;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .check-order {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ width: 654rpx;
|
|
|
+ height: 168rpx;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border: 2px solid #f5f5f5;
|
|
|
+ padding: 20rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .close {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title,
|
|
|
+ .number,
|
|
|
+ .price {
|
|
|
+ color: #333333;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ line-height: 30rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .number {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-text {
|
|
|
+ margin-top: 16rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ width: 702rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ &__label {
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__price {
|
|
|
+ font-size: 30rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ color: #ff2d55;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .submit {
|
|
|
+ text-align: center;
|
|
|
+ line-height: 80rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 30rpx;
|
|
|
+ width: 526rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ background: #007aff;
|
|
|
+ box-shadow: 0rpx 8rpx 7rpx 1rpx rgba(0, 122, 255, 0.1);
|
|
|
+ border-radius: 40rpx;
|
|
|
+ position: fixed;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 40rpx;
|
|
|
+ z-index: 999;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .record {
|
|
|
+ .nodata {
|
|
|
+ padding-top: 160rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__list {
|
|
|
+ .record-item {
|
|
|
+ margin: 0 8rpx 10rpx;
|
|
|
+
|
|
|
+ .item__time {
|
|
|
+ padding: 20rpx 0;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item__content {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+
|
|
|
+ .top {
|
|
|
+ padding: 12rpx 0;
|
|
|
+ border-bottom: 1px solid #eeeeee;
|
|
|
+
|
|
|
+ .state {
|
|
|
+ position: relative;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 30rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 240rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ line-height: 56rpx;
|
|
|
+ background: #007aff;
|
|
|
+ border-radius: 28rpx;
|
|
|
+
|
|
|
+ &.wait {
|
|
|
+ background: #007aff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.refuse {
|
|
|
+ background: #ff3b30;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.agree {
|
|
|
+ background: #34c759;
|
|
|
+ }
|
|
|
+
|
|
|
+ .arrow {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ right: 18rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ padding: 0 32rpx;
|
|
|
+
|
|
|
+ .flex {
|
|
|
+ height: 80rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid #eeeeee;
|
|
|
+
|
|
|
+ &.noborder {
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__auto {
|
|
|
+ text-align: right;
|
|
|
+ flex: 1;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #666666;
|
|
|
+
|
|
|
+ .red {
|
|
|
+ color: #ff3b30;
|
|
|
+ }
|
|
|
+
|
|
|
+ .green {
|
|
|
+ color: #34c759;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-list {
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+
|
|
|
+ .order-item {
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 14rpx;
|
|
|
+ background: #f5f5f5;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #333;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal {
|
|
|
+ .select-order {
|
|
|
+ .line {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 8rpx;
|
|
|
+ background: #999999;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ margin: 8rpx auto 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ margin: 20rpx 0 15rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20rpx;
|
|
|
+
|
|
|
+ &__bg {
|
|
|
+ width: 654rpx;
|
|
|
+ height: 168rpx;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border: 2px solid #f5f5f5;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: #ebf5ff;
|
|
|
+ border: 2px solid #007aff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-title,
|
|
|
+ .order-number,
|
|
|
+ .order-price {
|
|
|
+ color: #333333;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ line-height: 30rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-number {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .confrim-btn {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 98rpx;
|
|
|
+ background: rgba(255, 255, 255, 0.98);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .okBtn {
|
|
|
+ text-align: center;
|
|
|
+ line-height: 64rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 30rpx;
|
|
|
+ width: 200rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ background: linear-gradient(0deg, #015eea, #00c0fa);
|
|
|
+ border-radius: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .no_data {
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-detail {
|
|
|
+ width: 640rpx;
|
|
|
+ height: 1000rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ &__content {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .content {
|
|
|
+ padding: 24rpx 24rpx 0;
|
|
|
+
|
|
|
+ /deep/ .u-cell {
|
|
|
+ padding: 10rpx;
|
|
|
+
|
|
|
+ &_title {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__value {
|
|
|
+ color: #333;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ &.wait {
|
|
|
+ color: #007aff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.agree {
|
|
|
+ color: #34c759;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.refuse {
|
|
|
+ color: #ff3b30;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview {
|
|
|
+ width: 240rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .download-btn {
|
|
|
+ margin: 10rpx 0 20rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 56rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 30rpx;
|
|
|
+ width: 224rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ background: #007aff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .header {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 48rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .body {
|
|
|
+ &__item {
|
|
|
+ border-bottom: 1px solid #eeeeee;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ margin-top: 30rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #007aff;
|
|
|
+ line-height: 48rpx;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ width: 4rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ background: #007aff;
|
|
|
+ border-radius: 2rpx;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-list {
|
|
|
+ .order-item {
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 0 14rpx 14rpx;
|
|
|
+ background: #f5f5f5;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #333;
|
|
|
+ margin-top: 16rpx;
|
|
|
+
|
|
|
+ .order-title,
|
|
|
+ .order-number,
|
|
|
+ .order-price {
|
|
|
+ color: #333333;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ line-height: 26rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-number {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-text {
|
|
|
+ margin-top: 16rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ &__label {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__price {
|
|
|
+ font-size: 30rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ color: #ff2d55;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__btns {
|
|
|
+ border-top: 1px solid #eeeeee;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ width: 100%;
|
|
|
+ height: 140rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ text-align: center;
|
|
|
+ width: 200rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ color: #007aff;
|
|
|
+ font-size: 30rpx;
|
|
|
+ margin: 0 10rpx;
|
|
|
+
|
|
|
+ &.warm {
|
|
|
+ background: #ff3b30;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.ok {
|
|
|
+ color: #fff;
|
|
|
+ width: 526rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ background: #007aff;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-cancel {
|
|
|
+ width: 640rpx;
|
|
|
+ height: 439rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 40rpx;
|
|
|
+
|
|
|
+ .header {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 48rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .body {
|
|
|
+ margin-top: 40rpx;
|
|
|
+
|
|
|
+ view {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer {
|
|
|
+ margin-top: 40rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ text-align: center;
|
|
|
+ line-height: 80rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #007aff;
|
|
|
+ width: 200rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ margin: 0 10rpx;
|
|
|
+
|
|
|
+ &.ok {
|
|
|
+ color: #fff;
|
|
|
+ background: #007aff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
En route