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 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>
</template>

<script>
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) || []
		}
	}
};
</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 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>