saas_miniprogram/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="130" 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="130" required  prop="main">
								<u-radio-group v-model="form.main">
									<u-radio :key="index" name="2">
										企业
									</u-radio>
								</u-radio-group>
							</u-form-item>
							
							<u-form-item label="发票抬头" label-width="130" required prop="header" >
								<u-input placeholder="请输入" v-model="form.header" />
							</u-form-item>
							<u-form-item label="单位税号" label-width="130" required prop="tax" >
								<u-input placeholder="请输入" v-model="form.tax" />
							</u-form-item>
							<u-form-item label="单位地址" label-width="130" required prop="address" >
								<u-input placeholder="请输入" v-model="form.address" />
							</u-form-item>
							<u-form-item label="电话号码" label-width="130" required prop="tel" >
								<u-input placeholder="请输入" v-model="form.tel" />
							</u-form-item>
							<u-form-item label="开户银行" label-width="130" required prop="bank" >
								<u-input placeholder="请输入" v-model="form.bank" />
							</u-form-item>
							<u-form-item label="银行账号" label-width="130" required prop="bankNo" >
								<u-input placeholder="请输入" v-model="form.bankNo" />
							</u-form-item>
							<u-form-item label="收件地址" label-width="130" required prop="recieveAddress" >
								<u-input placeholder="请输入" v-model="form.recieveAddress" />
							</u-form-item>
							<u-form-item label="收件人" label-width="130" required prop="name" >
								<u-input placeholder="请输入" v-model="form.name" />
							</u-form-item>
							<u-form-item label="收件手机" label-width="130" required prop="phone" >
								<u-input placeholder="请输入" v-model="form.phone" />
							</u-form-item>
							
						</template>
						<!-- 增值税发票 -->
						
						<!-- 普通发票 -->
						<template v-else>
							<u-form-item label="申请主体" label-width="130" required prop="main">
								<u-radio-group v-model="form.main">
									<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="130" required prop="header" >
								<u-input placeholder="请输入" v-model="form.header" />
							</u-form-item>
						</template>
						<!-- 普通发票 -->
						
						
						<u-form-item label="选择订单" label-width="130" required prop="orderIds" right-icon="arrow-right" ref="orderIds">
							<view class="form-item" @click="selectOrderModal = true">
								<u-input placeholder="请选择" disabled  @click="selectOrderModal = true" v-model="form.orderIds" />
							</view>
						</u-form-item>
						<view>
							<view class="check-order" v-for="(item,index) in orderList" :key="index" v-if="item.disabled">
									<view class="close" @click="deleteOrder(index)">
										<u-icon name="close-circle-fill" color="#FF2D55" size="40"></u-icon>
									</view>
									<view class="title">商品名称</view>
									<view class="number">订单编号</view>
									<view class="price">¥ 100元</view>
							</view>
						</view>
						
					</u-form>
				</view>
				
				<view class="order-text">
					<view class="order-text__label">本次申请开票金额：</view>
					<view class="order-text__price">¥ 999.00</view>
				</view>
				
				<view class="submit" @click="formSubmit">
					提交申请
				</view>
			</view>
			<view class="." v-if="current == 1">
				<view class="nodata" v-if="!recordList.length">
					您暂无相关发票记录哦~
				</view>
				
				<view class="record__list">
					<view class="record-item"  @click="orderDetailModal = true;" v-for="(record,index) in recordList" :key="index">
						<view class="item__time">2021/10/29 09:30:00</view>
						<view class="item__content">
							<view class="top">
								<view class="state" :class="{wait:record.state == 1,refuse:record.state == 2,agree:record.state == 3}">
									<text v-if="record.state == 1">待审核</text>
									<text v-if="record.state == 2">驳回</text>
									<text v-if="record.state == 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>普通发票</text>
									</view>
								</view>
								<view class="flex">
									<view class="text">申请主体</view>
									<view class="flex__auto">
										<text>个人</text>
									</view>
								</view>
								<view class="flex">
									<view class="text">发票状态</view>
									<view class="flex__auto">
										<text class="red" :class="{red:record.state != 2 ,green:record.state == 2}">未开票</text>
									</view>
								</view>
								<view @click.stop="showOrder(record.checked,index)">
									<view class="flex noborder" >
										<view class="text">开票订单</view>
										<view class="flex__auto">
											<text class="red">3</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">1.2021七大员新考施工专业人员岗提高班</view>
										<view class="order-item">2.2021七大员新考施工专业人员岗提高班订单名称过长换行</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>
							<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">商品名称</view>
														<view class="order-number">订单编号</view>
														<view class="order-price">¥ 100元</view>
													</view>
												</view>
											</u-checkbox >
										</view>
										
									</view>
								</view>
							</u-checkbox-group>
						</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: 972rpx;">
						<view class="content">
							<view class="header">2021年10月29日 09:30:00</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>普通发票</text>
										</u-cell-item>
										<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
											<view slot="title">申请主体：</view>
											<text>个人</text>
										</u-cell-item>
										<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
											<view slot="title">发票抬头：</view>
											<text>广东中正科技教育科技有限公司</text>
										</u-cell-item>
										<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
											<view slot="title">单位税号：</view>
											<text>SH123456789</text>
										</u-cell-item>
										<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
											<view slot="title">单位地址：</view>
											<text>广州市天河区燕岭路123号建设大厦F座 16楼过长换行</text>
										</u-cell-item>
										<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
											<view slot="title">电话号码：</view>
											<text>企业 拷贝</text>
										</u-cell-item>
										<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
											<view slot="title">开户银行：</view>
											<text>中国工商银行星星支行</text>
										</u-cell-item>
										<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
											<view slot="title">银行账号：</view>
											<text>SH123456789 拷贝</text>
										</u-cell-item>
										<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
											<view slot="title">收件地址：</view>
											<text>广州市天河区燕岭路123号</text>
										</u-cell-item>
										<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
											<view slot="title">收件人：</view>
											<text>李大米</text>
										</u-cell-item>
										<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
											<view slot="title">发票抬头：</view>
											<text>广东中正科技教育科技有限公司</text>
										</u-cell-item>
										<u-cell-item :border-bottom="false" hover-class="none" :arrow="false" >
											<view slot="title">收件手机：</view>
											<text>13800138000</text>
										</u-cell-item>
										<u-cell-item :border-bottom="false" hover-class="none" :arrow="false" >
											<view slot="title">开票订单：</view>
										</u-cell-item>
										<view class="order-list">
											<view class="order-item">
												<view class="order-title">2021七大员新考施工专业人员岗提高班</view>
												<view class="order-number">GDXY1234567890</view>
												<view class="order-price">¥ 100元</view>
											</view>
											<view class="order-item">
												<view class="order-title">2021七大员新考施工专业人员岗提高班</view>
												<view class="order-number">GDXY1234567890</view>
												<view class="order-price">¥ 100元</view>
											</view>
											<view class="order-item">
												<view class="order-title">2021七大员新考施工专业人员岗提高班</view>
												<view class="order-number">GDXY1234567890</view>
												<view class="order-price">¥ 100元</view>
											</view>
										</view>
										<view class="order-text">
											<view class="order-text__label">本次申请开票金额：</view>
											<view class="order-text__price">¥ 999.00</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">待审核</text>
											<text class="text agree">通过</text>
											<text class="text refuse">驳回</text>
										</u-cell-item>
										<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
											<view slot="title">发票状态：</view>
											<text class="text refuse">未开票</text>
											<text class="text agree">已开票</text>
											<text class="text refuse">已退票</text>
										</u-cell-item>
										
										<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
											<view slot="title">发票预览：</view>
											<view>
												<image class="preview" src="/static/info_3.png"></image>
												<view class="download-btn" @click="download">下载电子发票</view>
											</view>
										</u-cell-item>
										
										
										<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
											<view slot="title">机构发票邮寄状态：</view>
											<text class="text">是</text>
										</u-cell-item>
										
										<u-cell-item :border-bottom="false" hover-class="none" :arrow="false">
											<view slot="title">发票邮寄快递单号：</view>
											<text class="text">153666689456</text>
										</u-cell-item>
									</view>
								</view>
							</view>
						</view>
						
					</scroll-view>
				</view>
				<view class="order-detail__btns">
					<view class="btn" @click="orderDetailModal = false;">知道了</view>
					<view class="btn warm" @click="orderCancelModal = true;">撤销申请</view>
				</view>
				
				<view class="order-detail__btns">
					<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:[{
				checked:false,
				state:'1'
			},{
				checked:false,
				state:'2'
			},{
				checked:false,
				state:'3'
			}],
			list: [
				{
					name: '发票申请'
				},
				{
					name: '发票记录'
				}
			],
			form:{
				type:'',
				main:'',
				header:'',
				orderIds:'',
			},
			rules: {
				phone: [
					{ 
						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'],
					}
				],
				main: [
					{ 
						required: true, 
						message: '请选择申请主体', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}
				],
				header: [
					{ 
						required: true, 
						message: '请输入发票抬头', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}
				],
				tax: [
					{ 
						required: true, 
						message: '请输入单位税号', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}
				],
				address: [
					{ 
						required: true, 
						message: '请输入单位地址', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}
				],
				tel: [
					{ 
						required: true, 
						message: '请输入电话号码', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}
				],
				bank: [
					{ 
						required: true, 
						message: '请输入开户银行', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}
				],
				bankNo: [
					{ 
						required: true, 
						message: '请输入银行账号', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}
				],
				recieveAddress: [
					{ 
						required: true, 
						message: '请输入收件地址', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}
				],
				name: [
					{ 
						required: true, 
						message: '请输入收件人', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}
				],
				orderIds: [
					{ 
						required: true, 
						message: '请选择订单', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}
				],
			},
			orderValue:'',
			orderList:[{checked:false,name:'1'},{checked:false,name:'2'},{checked:false,name:'3'},{checked:false,name:'4'}],
			selectOrderModal:false,
			orderDetailModal:false,
			orderCancelModal:false,
			current: 1,
			order: [],
			typeList:[{
				name:'普通发票',
				value:'1'
			},{
				name:'增值税专用发票',
				value:'2'
			}],
			mainList:[{
				name:'个人',
				value:'1'
			},{
				name:'企业',
				value:'2'
			}]
		};
	},
	// onPullDownRefresh() {},
	onLoad(option) {
		// this.$refs.uForm.setRules(this.rules)
	},
	onShow() {
		
	},
	methods: {
		/**
		 * @param {Object} checkedState 显示状态
		 * @param {Object} index 索引值
		 * 修改开票订单列表显示状态
		 */
		showOrder(showState,index) {
			this.$set(this.recordList[index],'checked',!showState)
		},
		/**
		 * 发票申请提交
		 */
		formSubmit() {
			this.$refs.uForm.validate(valid => {
				if(valid) {
					uni.showToast({
						title:'申请成功'
					})
				}
			})
		},
		/**
		 * @param {Object} e value
		 * 发票类型修改
		 */
		formTypeChange(e) {
			console.log(e)
			if(e == '2') {
				this.$set(this.form,'main','2')
			} else {
				this.$set(this.form,'main','')
			}
		},
		/**
		 * @param {Object} e
		 * tabs 切换
		 */
		change(e) {
			console.log(e)
			this.current = e;
		},
		
		radioGroupChange(e) {
			console.log(e)
		},
		okPopup() {
			this.selectOrderModal = false;
			let strArr = [];
			this.orderList.forEach((item,index) => {
				if(item.checked) {
					this.$set(this.orderList[index],'disabled',true)
					strArr.push(item.name)
				}
			})
			
			this.form.orderIds = strArr.join(',')
			this.$nextTick(() => {
				this.$refs.orderIds.onFieldChange()
			})
			console.log(this.$refs.orderIds)
		},
		
		deleteOrder(index) { 
			this.$set(this.orderList[index],'disabled',false)
			this.$set(this.orderList[index],'checked',false)
			let strArr = [];
			this.orderList.forEach((item,index) => {
				if(item.checked) {
					strArr.push(item.name)
				}
			})
			
			this.form.orderIds = strArr.join(',')
			this.$nextTick(() => {
				this.$refs.orderIds.onFieldChange()
			})
		},
		
		download() {
			uni.downloadFile({
			  url: 'https://gw.alipayobjects.com/os/bmw-prod/c134022a-1088-47e2-bb76-a33ec0519101.pdf?spm=a2c4g.11186623.0.0.cf863d1fUcFiPN&file=c134022a-1088-47e2-bb76-a33ec0519101.pdf',
			  success: function (res) {
				  console.log(999)
			    var filePath = res.tempFilePath;
			    uni.openDocument({
			      filePath: filePath,
			      showMenu: true,
			      success: function (res) {
			        console.log(res,'打开文档成功');
			      },
				  fail:function(err) {
					  console.log(err)
				  }
			    });
			  }
			});
		},
		
		orderCancel() {
			this.orderDetailModal = false;
			this.orderCancelModal = false;
			uni.showToast({
				title:'撤销成功',
				icon:'none'
			})
		}
	},
	computed: { ...mapGetters(['userInfo']) }
};
</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;
				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;
								}
								&.wait {
									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;
				}
			}
		}
		
		.order-detail {
			width: 640rpx;
			height: 1112rpx;
			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>