zc_saas_h5/pages2/invoice/index.vue

<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="请点击选择订单" style="pointer-events: none;" readonly @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> -->
											<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="
                        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 {
		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;
	}
</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>