|
|
@@ -1,1425 +1,1787 @@
|
|
|
<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 v-for="(item, index) in typeList" :key="index" :name="item.value">
|
|
|
- {{ item.name }}
|
|
|
- </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" 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 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="{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="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">{{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">{{$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="(orderItem,orderIndex) in invoiceDetail.orderList">
|
|
|
- <view class="order-title">{{orderItem.goodsName}}</view>
|
|
|
- <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">{{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="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>
|
|
|
- <image class="preview" @click="previewImg(invoiceDetail)" :src="$method.splitImgHost(invoiceDetail.invoiceImg)"></image>
|
|
|
- <view class="download-btn" @click="download(invoiceDetail)">下载电子发票</view>
|
|
|
- </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="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">{{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>
|
|
|
+ <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
|
|
|
+ v-for="(item, index) in typeList"
|
|
|
+ :key="index"
|
|
|
+ :name="item.value"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </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" 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" 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="{
|
|
|
+ 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">{{
|
|
|
+ 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">{{
|
|
|
+ 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">{{
|
|
|
+ $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="(
|
|
|
+ orderItem, orderIndex
|
|
|
+ ) in invoiceDetail.orderList"
|
|
|
+ >
|
|
|
+ <view class="order-title">{{
|
|
|
+ orderItem.goodsName
|
|
|
+ }}</view>
|
|
|
+ <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">{{
|
|
|
+ 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="
|
|
|
+ invoiceDetail.periodStatus == 3 &&
|
|
|
+ (invoiceDetail.invoiceStatus == 2 ||
|
|
|
+ invoiceDetail.invoiceStatus == -1) &&
|
|
|
+ invoiceDetail.invoiceImg
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <view slot="title">发票预览：</view>
|
|
|
+ <view>
|
|
|
+ <image
|
|
|
+ class="preview"
|
|
|
+ @click="previewImg(invoiceDetail)"
|
|
|
+ :src="$method.splitImgHost(invoiceDetail.invoiceImg)"
|
|
|
+ ></image>
|
|
|
+ <view
|
|
|
+ class="download-btn"
|
|
|
+ @click="download(invoiceDetail)"
|
|
|
+ >下载电子发票</view
|
|
|
+ >
|
|
|
+ </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="
|
|
|
+ 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">{{
|
|
|
+ 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>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { mapGetters } from 'vuex';
|
|
|
+import { mapGetters } from "vuex";
|
|
|
export default {
|
|
|
- components: {},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- checkOrderList:[],
|
|
|
- recordList:[],
|
|
|
- list: [
|
|
|
- {
|
|
|
- name: '发票申请'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '发票记录'
|
|
|
- }
|
|
|
- ],
|
|
|
- invoiceDetail:{
|
|
|
- amount:0
|
|
|
- },
|
|
|
- form:{
|
|
|
- type:'1',
|
|
|
- subject:'1',
|
|
|
- invoiceTitle:'',
|
|
|
- orderGoodsIds:'',
|
|
|
- taxRegistryNumber:'',
|
|
|
- companyAddress:'',
|
|
|
- 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的
|
|
|
- console.log(this.$u.test.mobile(value),'this.$u.test.mobile(value)')
|
|
|
- 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}$)/;
|
|
|
- console.log( reg.test(value),' reg.test(value)')
|
|
|
- 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})$/;
|
|
|
- console.log( reg.test(value),' reg.test(value)')
|
|
|
- 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) {
|
|
|
- console.log(number.toFixed(2))
|
|
|
- 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 => {
|
|
|
- console.log(valid,'valid')
|
|
|
- console.log(this.form,'this.form')
|
|
|
- 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机构将在3-7个工作日内进行处理，处理结果会在【发票记录】显示，请留意进度。`,
|
|
|
- showCancel:false,
|
|
|
- confirmText:'知道了'
|
|
|
- })
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- icon:'none',
|
|
|
- title:res.data.msg
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- /**
|
|
|
- * @param {Object} e value
|
|
|
- * 发票类型修改
|
|
|
- */
|
|
|
- formTypeChange(e) {
|
|
|
- console.log(e)
|
|
|
- if(e == '2') {
|
|
|
- this.$set(this.form,'subject','2')
|
|
|
- } else {
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- /**
|
|
|
- * @param {Object} e
|
|
|
- * tabs 切换
|
|
|
- */
|
|
|
- change(e) {
|
|
|
- console.log(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()
|
|
|
- })
|
|
|
- console.log(this.$refs.orderGoodsIds)
|
|
|
- },
|
|
|
-
|
|
|
- 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) {
|
|
|
- console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
|
|
|
- },
|
|
|
- fail: function(err) {
|
|
|
- console.log(err.errMsg);
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- download(item) {
|
|
|
- //获取相册授权
|
|
|
- uni.getSetting({
|
|
|
- success:(res) => {
|
|
|
- if (!res.authSetting['scope.writePhotosAlbum']) {
|
|
|
- uni.authorize({
|
|
|
- scope: 'scope.writePhotosAlbum',
|
|
|
- success() {
|
|
|
- //这里是用户同意授权后的回调
|
|
|
- this.saveImgToLocal(item);
|
|
|
- },
|
|
|
- fail() {//这里是用户拒绝授权后的回调
|
|
|
-
|
|
|
- }
|
|
|
- })
|
|
|
- } else {//用户已经授权过了
|
|
|
- this.saveImgToLocal(item);
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- saveImgToLocal(item){
|
|
|
-
|
|
|
- uni.showModal({
|
|
|
- title: '提示',
|
|
|
- content: '确定保存到相册吗',
|
|
|
- success: (res) => {
|
|
|
- if (res.confirm) {
|
|
|
-
|
|
|
- uni.downloadFile({
|
|
|
- url: this.$method.splitImgHost(item.invoiceImg,true,1000),//图片地址
|
|
|
- success: (res) =>{
|
|
|
- if (res.statusCode === 200){
|
|
|
- uni.saveImageToPhotosAlbum({
|
|
|
- filePath: res.tempFilePath,
|
|
|
- success: function() {
|
|
|
- uni.showToast({
|
|
|
- title: "保存成功",
|
|
|
- icon: "none"
|
|
|
- });
|
|
|
- },
|
|
|
- fail: function() {
|
|
|
- uni.showToast({
|
|
|
- title: "保存失败",
|
|
|
- icon: "none"
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
-
|
|
|
- } else if (res.cancel) {
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters(['userInfo']),
|
|
|
- filterOrderList() {
|
|
|
- return this.orderList.filter(i => i.disabled) || []
|
|
|
- }
|
|
|
- }
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ checkOrderList: [],
|
|
|
+ recordList: [],
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ name: "发票申请",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "发票记录",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ invoiceDetail: {
|
|
|
+ amount: 0,
|
|
|
+ },
|
|
|
+ form: {
|
|
|
+ type: "1",
|
|
|
+ subject: "1",
|
|
|
+ invoiceTitle: "",
|
|
|
+ orderGoodsIds: "",
|
|
|
+ taxRegistryNumber: "",
|
|
|
+ companyAddress: "",
|
|
|
+ email: "",
|
|
|
+ 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的
|
|
|
+ console.log(
|
|
|
+ this.$u.test.mobile(value),
|
|
|
+ "this.$u.test.mobile(value)"
|
|
|
+ );
|
|
|
+ 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) {
|
|
|
+ console.log(number.toFixed(2));
|
|
|
+ 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) => {
|
|
|
+ console.log(valid, "valid");
|
|
|
+ console.log(this.form, "this.form");
|
|
|
+ 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) {
|
|
|
+ console.log(e);
|
|
|
+ if (e == "2") {
|
|
|
+ this.$set(this.form, "subject", "2");
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @param {Object} e
|
|
|
+ * tabs 切换
|
|
|
+ */
|
|
|
+ change(e) {
|
|
|
+ console.log(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();
|
|
|
+ });
|
|
|
+ console.log(this.$refs.orderGoodsIds);
|
|
|
+ },
|
|
|
+
|
|
|
+ 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) {
|
|
|
+ console.log(
|
|
|
+ "选中了第" +
|
|
|
+ (data.tapIndex + 1) +
|
|
|
+ "个按钮,第" +
|
|
|
+ (data.index + 1) +
|
|
|
+ "张图片"
|
|
|
+ );
|
|
|
+ },
|
|
|
+ fail: function (err) {
|
|
|
+ console.log(err.errMsg);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ download(item) {
|
|
|
+ //获取相册授权
|
|
|
+ uni.getSetting({
|
|
|
+ success: (res) => {
|
|
|
+ if (!res.authSetting["scope.writePhotosAlbum"]) {
|
|
|
+ uni.authorize({
|
|
|
+ scope: "scope.writePhotosAlbum",
|
|
|
+ success() {
|
|
|
+ //这里是用户同意授权后的回调
|
|
|
+ this.saveImgToLocal(item);
|
|
|
+ },
|
|
|
+ fail() {
|
|
|
+ //这里是用户拒绝授权后的回调
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ //用户已经授权过了
|
|
|
+ this.saveImgToLocal(item);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ saveImgToLocal(item) {
|
|
|
+ uni.showModal({
|
|
|
+ title: "提示",
|
|
|
+ content: "确定保存到相册吗",
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ uni.downloadFile({
|
|
|
+ url: this.$method.splitImgHost(item.invoiceImg, true, 1000), //图片地址
|
|
|
+ success: (res) => {
|
|
|
+ if (res.statusCode === 200) {
|
|
|
+ uni.saveImageToPhotosAlbum({
|
|
|
+ filePath: res.tempFilePath,
|
|
|
+ success: function () {
|
|
|
+ uni.showToast({
|
|
|
+ title: "保存成功",
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fail: function () {
|
|
|
+ uni.showToast({
|
|
|
+ title: "保存失败",
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else if (res.cancel) {
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(["userInfo"]),
|
|
|
+ filterOrderList() {
|
|
|
+ return this.orderList.filter((i) => i.disabled) || [];
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
<style>
|
|
|
page {
|
|
|
- background: #eaeef1;
|
|
|
+ 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 0;
|
|
|
- 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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ &__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 0;
|
|
|
+ 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>
|
谢杰标