申请开票功能

center/invoice.vue

@@ -5,107 +5,89 @@
 			<u-navbar title="开具发票" :safeAreaInsetTop="true" @leftClick="leftClick" :titleStyle="{color:'#fff'}" leftIconColor="#fff" bgColor="#EF1818"></u-navbar>
 		</view>
 		<view class="page-wrap">
-			<mescroll-body class="" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
-				<!-- :down="downOption" :up="upOption" -->
-				<view class="list">
-					<u-checkbox-group placement="column" @change="checkboxChange" >
-					<view v-for="(item,index) in dataList" class="list-item u-flex" :key="item.id">
-						<view class="left">
-							<u-checkbox shape="circle" :disabled="item.quantity>item.stock" activeColor="#ED0000" :key="index" :name="item.name" :checked="item.checked" @change="toggleCheck(index)" class="checkbox" />
-						</view>
-						<view class="right">
-							<view class="order-number">订单号：360123456789079797</view>
-							<view class="info u-flex">
-								<image class="img" :src="item.showImg||staticUrl+'/img/newsdetails-banner.png'"></image>
-								<view class="text">
-									<view class="name">《伟大转折》-【成人票】</view>
-									<view class="time">2023-11–03 14:00-16:00</view>
-									<view class="position">5排6座</view>
-									<view class="statistics">
-										<text>共1张</text>
-										<text class="label">合计：</text>
-										<text class="price">¥120.00</text>
-									</view>
-								</view>
-							</view>
-						</view>
+			<u-tabs
+			:list="tabsList" 
+			lineColor="#EE0D0D" 
+			:current="tabsCurrent"
+			:activeStyle="{color:'#EE0D0D','font-weight': '600','font-size':'30rpx'}"
+			:inactiveStyle="{color:'#7F7F7F'}"
+			itemStyle="width:50%;box-sizing:border-box;padding:24rpx;"
+			@click="tabsClick"></u-tabs>
+			<view class="block-wrap" style="margin-top: 32rpx;">
+				<view class="form-item">
+					<view class="til">
+						<text>*</text>抬头名称 
 					</view>
-					</u-checkbox-group>
+					<u--input placeholder="请输入名称" border="surround" v-model="formData.name" ></u--input>
 				</view>
-			</mescroll-body>
-		</view>
-		<view class="page-bottom">
-			<view class="inner u-flex u-row-between">
-				<view class="left">
-					<u-checkbox-group @change="allCheckboxChange">
-						<u-checkbox shape="circle" :checked="allChecked" activeColor="#ED0000" :name="allCheckbox.name" label="全选"></u-checkbox>
-					</u-checkbox-group>
+				<view class="form-item" v-if="tabsCurrent===0">
+					<view class="til">
+						<text>*</text>税号 
+					</view>
+					<u--input placeholder="请输入税号 " border="surround" v-model="formData.creditCode" ></u--input>
 				</view>
-				<view class="right u-flex">
-					<view class="total-price u-flex">
-						<text>合计：</text>
-						<text class="num">{{totalPrice}}</text>
+			</view>
+			<view class="block-wrap amount u-flex u-row-between">
+				<view class="til">发票金额</view>
+				<view class="con">¥{{invoiceInfo.invoiceAmount}}</view>
+			</view>
+			<view class="block-wrap">
+				<view class="form-item">
+					<view class="til">
+						<text>*</text>电子邮箱  
 					</view>
-					<view class="btn active" v-if="totalPrice>0&&cansubmit" @click="submitorder">申请开票</view>
-					<view class="btn" v-else>申请开票</view>
+					<u--input placeholder="请输入电子邮箱" border="surround" v-model="formData.email" ></u--input>
 				</view>
 			</view>
 		</view>
+		<view class="page-bottom">
+			<view class="inner">
+				<view class="btn active" v-if="cansubmit" @click="submitorder">提交</view>
+				<view class="btn" @click="$u.toast('请完整填写表单')" v-else>提交</view>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
 	import { systemInfo } from "@/mixin.js";
-	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
 	export default {
-		mixins: [MescrollMixin,systemInfo], // 使用mixin
+		mixins: [systemInfo], // 使用mixin
 		data() {
 			return {
 				staticUrl:this.$commonConfig.staticUrl,
-				allCheckbox:{name: '全选'},
-				dataList:[
-					{name:'路线推荐',checked:false,pic:`${this.$commonConfig.staticUrl}/img/indexnav-luxian.png`,id:1},
-					{name:'路线推荐',checked:false,pic:`${this.$commonConfig.staticUrl}/img/indexnav-luxian.png`,id:2},
+				orderId:'',
+				tabsCurrent:0,
+				tabsList:[
+					{name:'企业',status:'0'},
+					{name:'个人',status:'1'}
 				],
+				invoiceInfo:{},
+				handlerList:[],
+				formData:{
+					name:'',
+					creditCode :'',
+					email:''
+				}
 			}
 		},
 		onShow() {
 		},
-		onLoad() {
+		onLoad(page) {
+			this.orderId = page.id;
 			this.getSystemInfo();
+			this.getInvoiceInfo();
 
 		},
 		computed: {
 		    // 是否全选
-		    allChecked() {
-		        return this.dataList.every(item => item.checked)
-		    },
-		    // 商品合计价格
-		    selectGoods() {
-				let selectGoods = [];
-		        this.dataList.forEach(item => {
-		            if (item.checked) {
-		               selectGoods.push(item)
-		            }
-		        })
-		        return selectGoods
-		    },
-			totalPrice() {
-			  let that = this;
-			  return this.dataList.reduce((total, item) => {
-				if (item.checked) {
-					let price = null;
-					// if(that.vuex_member_info.priceType>1){
-					// 	price = item.vipPrice
-					// }else{
-					// 	price = item.salePrice
-					// }
-					price = item.levelPrice
-				  total += price * item.quantity;
+		    cansubmit() {
+				if(this.tabsCurrent===0){
+					return this.formData.name && this.formData.creditCode && uni.$u.test.email(this.formData.email);
+				}else{
+					return this.formData.name && uni.$u.test.email(this.formData.email);
 				}
-				return total;
-			  }, 0).toFixed(2);
-			}
+		    },
 		},
 		methods: {
 			leftClick(e){
@@ -116,97 +98,61 @@
 					uni.navigateBack()
 				};
 			},
-			/*下拉刷新的回调, 重置列表为第一页 (此处可删,mixins已默认)
-			downCallback(){
-				this.mescroll.resetUpScroll();
-			},
-			/*上拉加载的回调*/
-			upCallback(page) {
-				// 此处可以继续请求其他接口
-				// if(page.num == 1){
-				// 	// 请求其他接口...
-				// }
-			
-				// 如果希望先请求其他接口,再触发upCallback,可参考以下写法
-				// if(!this.hasTypeId){
-				// 	this.mescroll.endErr();//没有接口暂时不调用
-				// 	return // 此处return,先获取xx
-				// }
-			
-				let pageNum = page.num; // 页码, 默认从1开始
-				let pageSize = page.size; // 页长, 默认每页10条
-			
-				let params = {
-					pageNum : page.num,
-					pageSize :  page.size,
-					status:this.status
-				}
-				// console.log('this.params',params);
-				this.$u.api.orderList(params).then(data => {
-					this.hasfetch = true;
-					console.log('data',JSON.parse(JSON.stringify(data)));
-					// 接口返回的当前页数据列表 (数组)
-					let curPageData = data.data.rows;
-					curPageData = curPageData.map( item =>{
-						item.checked = false
-						return  item
-					})
-					// console.log('curPageData',JSON.parse(JSON.stringify(curPageData)));
-					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
-					let curPageLen = curPageData.length; 
-					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
-					// let totalPage =  data.data.data.totalPage; 
-					// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
-					let totalSize = data.data.total; 
-					// 接口返回的是否有下一页 (true/false)
-					// let hasNext = data.xxx; 
-					// console.log('totalPage',totalPage,'curPageLen',curPageLen);
-					//设置列表数据
-					if(page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
-					this.dataList = this.dataList.concat(curPageData); //追加新数据
-					// 请求成功,隐藏加载状态
-					//方法一(推荐): 后台接口有返回列表的总页数 totalPage
-					// this.mescroll.endByPage(curPageLen, totalPage); 
-					//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
-					this.mescroll.endBySize(curPageLen, totalSize); 
-				}).catch(err => {
-					this.mescroll.endErr()
-					console.log(err)
-				});	
-			
-			},
-			/*若希望重新加载列表,只需调用此方法即可(内部会自动page.num=1,再主动触发up.callback)*/
-			reloadList() {
-				this.mescroll.resetUpScroll();
+			tabsClick(item){
+				this.tabsCurrent = item.index;
+				// console.log('item',item);
+				this.setDefault();
 			},
-			search(e){
-				this.reloadList();
-			},
-			checkboxChange(n){
-				// console.log('checkboxChange',n);
+			getInvoiceInfo(){
+				this.$u.api.getInvoiceInfo({orderId:this.orderId}).then(res=>{
+					// console.log('res',res);
+					this.invoiceInfo = res.data;
+					this.handlerList = res.data.handlerList||[];
+					this.setDefault();
+				}).catch(err=>{
+					console.log('getInvoiceInfo',err);
+				})
 			},
-			toggleCheck(index) {
-				console.log('toggleCheck',index);
-			    this.dataList[index].checked = !this.dataList[index].checked
+			setDefault(){
+				if(this.handlerList.length>0){
+					let handlerType1 = this.handlerList.find(handler => handler.handlerType === 1) || {};//个人
+					let handlerType2 = this.handlerList.find(handler => handler.handlerType === 2) || {};//企业
+					if(this.tabsCurrent===0){//企业
+						this.formData.name = handlerType2.name||null;
+						this.formData.creditCode = handlerType2.creditCode||null;
+						this.formData.email = handlerType2.email||null;
+					}else{
+						this.formData.name = handlerType1.name||null;
+						this.formData.email = handlerType1.email||null;
+					}
+				}
 			},
-			checkboxClick(){
-				console.log('checkboxClick',this.allChecked);
-				this.dataList.forEach(item => {
-					if(item.quantity<=item.stock){
-						item.checked = !this.allChecked
+			submitorder(){
+				let params = {
+					orderId:this.orderId,
+					invoiceAmount:this.invoiceInfo.invoiceAmount,
+					invoiceHandler:{
+						handlerType:this.tabsCurrent===0?2:1,
+						name:this.formData.name,
+						email:this.formData.email,
+						// mobile:this.formData.mobile
 					}
+				};
+				if(this.tabsCurrent===0){//企业
+					params.invoiceHandler.creditCode = this.formData.creditCode
+				}
+				this.$u.api.submitInvoice(params).then(res=>{
+					uni.$u.toast(res.msg)
+					// uni.navigateBack()
+					setTimeout(()=>{
+						uni.redirectTo({
+							url: `/center/orderdetails?id=${this.orderId}`
+						})
+					},1500)
+				}).catch(err=>{
+					console.log('submitorder',err);
 				})
-			},
-			// 切换全选状态
-			allCheckboxChange(n){
-				// console.log('allCheckboxChange',n[0]);
-				// console.log('allCheckboxChange',n);
-				let selectAll = n[0]?true:false;
-				this.dataList.forEach(item => {
-					item.checked = selectAll
-				});
-				 console.log('selectGoods',this.selectGoods);
-			},
+			}
 
 		}
 	}
@@ -215,91 +161,56 @@
 	page{background-color: #F7F7F9;}
 </style>
 <style lang="scss" scoped>
-.list-item{
-	background: #FFFFFF;
-	box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(221,221,221,0.5);
-	border-radius: 20rpx;
+.block-wrap{
+	background-color: #fff;
+	border-radius: 16rpx;
+	padding: 22rpx 32rpx 30rpx;
 	margin-bottom: 24rpx;
-	padding: 34rpx 32rpx 50rpx 20rpx;
-	.right{
-		flex: 1;
-		padding-left: 24rpx;
-		.order-number{
-			font-size: 24rpx;
+	.form-item{
+		margin-bottom: 22rpx;
+		.til{
+			font-size: 28rpx;
+			font-family: PingFangSC, PingFang SC;
 			font-weight: 400;
-			color: #7F7F7F;
-			line-height: 36rpx;
-			margin-bottom: 36rpx;
-		}
-		.info{
-			.img{
-				width: 180rpx;
-				height: 160rpx;
-			}
-			.text{
-				font-size: 24rpx;
-				font-weight: 400;
-				color: #7F7F7F;
-				padding-left: 26rpx;
-				.name{
-					font-size: 28rpx;
-					font-weight: bold;
-					color: #363636;
-					margin-bottom: 20rpx;
-				}
-				.time{
-					margin-bottom: 20rpx;
-				}
-				.position{
-					margin-bottom: 20rpx;
-				}
-				.statistics{
-					text-align: right;
-				}
-				.label{
-					font-size: 24rpx;
-					font-weight: 400;
-					color: #363636;
-					margin-left: 10rpx;
-				}
-				.price{
-					font-size: 32rpx;
-					font-weight: bold;
-					color: #ED0000;
-				}
+			color: #333;
+			margin-bottom: 12rpx;
+			text{
+				color: #EF0E0E;
 			}
 		}
 	}
+	&.amount{
+		padding: 26rpx 32rpx;
+		.til{
+			margin-bottom: 0;
+		}
+		.con{
+			font-size: 28rpx;
+			font-family: SourceHanSansCN, SourceHanSansCN;
+			font-weight: bold;
+			color: #EF0E0E;
+		}
+	}
 }
 .page-bottom{
+	$height:98rpx;
 	position: relative;
 	z-index: 1001;
-	height: 98rpx;
-	padding: 24rpx 20rpx 50rpx;
+	height: $height;
+	padding: 24rpx 20rpx;
 	.inner{
 		position: fixed;
-		background-color: #fff;
-		height: 98rpx;
+		background-color: transparent;
+		height: $height;
 		left: 0;
 		right: 0;
 		bottom: 0;
-		padding: 24rpx 20rpx 50rpx;
-		box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(215,215,215,0.5);
-		.total-price{
-			font-size: 28rpx;
-			font-weight: 400;
-			color: #313131;
-			margin-right: 32rpx;
-			.num{
-				font-size: 40rpx;
-				font-weight: bold;
-				color: #ED0000;
-			}
-		}
+		padding: 24rpx 20rpx;
+		// box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(215,215,215,0.5);
 		.btn{
 			font-size: 28rpx;
-			height: 80rpx;
-			line-height: 80rpx;
+			height: 100%;
+			line-height: $height;
 			border-radius: 50rpx;
 			padding: 0 50rpx;
 			background-color: #eee;

center/invoicedetails.vue

@@ -0,0 +1,119 @@
+<template>
+	<view class="pages">
+		<view class="" :style="{height: navHeight+'px' }"></view>
+		<view class="navbar-box">
+			<u-navbar title="开票详情" :safeAreaInsetTop="true" @leftClick="leftClick" :titleStyle="{color:'#fff'}" leftIconColor="#fff" bgColor="#EF1818"></u-navbar>
+		</view>
+		<view class="page-wrap">
+			<view class="block-wrap">
+				<view class="title">开票详情</view>
+				<!-- <view class="item u-flex">
+					<view class="left">抬头类型 </view>
+					<view class="right">{{抬头类型 }}</view>
+				</view> -->
+				<view class="item u-flex" v-for="(item,index) in detailsInfo[details.handlerType]" :key="index">
+					<view class="left">{{item.name}}</view>
+					<view class="con">
+						<text v-if="item.key=='handlerType'">{{details[item.key]|filterHandlerType}}</text>
+						<text :style="{color:details.status>2?'#EF0E0E':'#6CC079'}" class="status" v-else-if="item.key=='status'">{{details[item.key]|filterInvoiceState}}</text>
+						<text v-else-if="item.key=='invoiceAmount'">￥ {{details[item.key]}}</text>
+						<text v-else>{{details[item.key]}}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { systemInfo } from "@/mixin.js";
+	export default {
+		mixins: [systemInfo], // 使用mixin
+		data() {
+			return {
+				staticUrl:this.$commonConfig.staticUrl,
+				orderId:'',
+				details:{},
+				detailsInfo:{//1:个人,2:企业
+					1:[
+						{name:'抬头类型',key:'handlerType'},
+						{name:'抬头名称',key:'name'},
+						// {name:'税    号',key:'creditCode'},
+						{name:'开票金额 ',key:'invoiceAmount'},
+						{name:'电子邮箱 ',key:'email'},
+						{name:'开具状态 ',key:'status'},
+					],
+					2:[
+						{name:'抬头类型',key:'handlerType'},
+						{name:'抬头名称',key:'name'},
+						{name:'税    号',key:'creditCode'},
+						{name:'开票金额 ',key:'invoiceAmount'},
+						{name:'电子邮箱 ',key:'email'},
+						{name:'开具状态 ',key:'status'},
+						// {name:'失败原因 ',key:'errReason'}
+					],
+				}
+			}
+		},
+		onShow() {
+			if(this.orderId){
+				this.getInvoiceDetail();
+			}
+		},
+		onLoad(page) {
+			this.orderId = page.id;
+			this.getSystemInfo();
+		},
+		methods: {
+			leftClick(e){
+				let pages = getCurrentPages();
+				if(pages.length==1){
+					uni.$u.route('/pages/index/index')
+				}else{
+					uni.navigateBack()
+				};
+			},
+			getInvoiceDetail(){
+				this.$u.api.getInvoiceDetail({orderId:this.orderId}).then(res=>{
+					// console.log('res',res);
+					this.details = res.data;
+					if(res.data.status>2){
+						this.detailsInfo[1].push({name:'失败原因 ',key:'errReason'});
+						this.detailsInfo[2].push({name:'失败原因 ',key:'errReason'});
+					}
+				}).catch(err=>{
+					console.log('getInvoiceInfo',err);
+				})
+			}
+
+		}
+	}
+</script>
+<style>
+	page{background-color: #F7F7F9;}
+</style>
+<style lang="scss" scoped>
+.block-wrap{
+	background-color: #fff;
+	border-radius: 16rpx;
+	padding: 30rpx 32rpx 30rpx;
+	margin-bottom: 24rpx;
+	.title{
+		font-size: 28rpx;
+		font-weight: 500;
+		color: #363636;
+		margin-bottom: 28rpx;
+	}
+	.item{
+		margin-bottom: 12rpx;
+		font-size: 28rpx;
+		font-weight: 400;
+		color: #363636;
+		line-height: 40rpx;
+		.left{
+			color: #999999;
+			width: 184rpx;
+		}
+	}
+}
+</style>

center/orderdetails.vue

@@ -73,6 +73,7 @@
 				<view class="title u-flex u-row-between">
 					订单信息
 					<text class="btn" v-if="orderDetails.status==3" @click="refund">申请退款</text>
+					<text class="btn" v-if="orderDetails.status==7" @click="invoice">申请发票</text>
 				</view>
 				<view class="order-info-item" v-for="(item,index) in orderInfo[orderDetails.status]" :key="index">
 					<text class="til">{{item.name}}</text>
@@ -296,7 +297,7 @@
 			},
 			singleQR(item,index){
 				let that = this;
-				console.log('singleQR',item);
+				// console.log('singleQR',item);
 				this.showSingleQR = true;
 				this.singleInfo = item;
 				if(item.qrcodeStatus!==0){
@@ -313,7 +314,7 @@
 				this.singleQrContent = item.qrcodeNo
 			},
 			openSingleQR(){
-				console.log('this.singleInfo',this.singleInfo);
+				// console.log('this.singleInfo',this.singleInfo);
 			},
 			closeSingleQR(){
 				this.showSingleQR = false;
@@ -599,6 +600,18 @@
 					})
 				})
 				// #endif
+			},
+			invoice(){
+				console.log('orderDetails',this.orderDetails);
+				if(this.orderDetails.ifInvoice===0){
+					uni.$u.route('/center/invoice', {
+						id: this.orderDetails.id
+					});
+				}else{
+					uni.$u.route('/center/invoicedetails', {
+						id: this.orderDetails.id
+					});
+				}
 			}
 
 		}

common/apiurl.js

@@ -187,6 +187,21 @@ const apiurl = {
 		url: '/member/marketPersons/apply',
 		type: 'post'
 	},
+	// 获取开票信息
+	getInvoiceInfo: {
+		url: '/order/orderInvoice/getInvoiceInfo',
+		type: 'get'
+	},
+	// 提交开票
+	submitInvoice: {
+		url: '/order/orderInvoice/submit',
+		type: 'post'
+	},
+	// 查询开票详情
+	getInvoiceDetail: {
+		url: '/order/orderInvoice/getInvoiceDetail',
+		type: 'get'
+	},
 	
 	
 	/**

pages.json

@@ -131,6 +131,13 @@
 						"navigationStyle": "custom"
 					}
 				},
+				{
+					"path": "invoicedetails",
+					"style": {
+						"navigationBarTitleText": "发票详情",
+						"navigationStyle": "custom"
+					}
+				},
 				{
 					"path": "order",
 					"style": {

utils/filter.js

@@ -171,6 +171,16 @@ Vue.filter('checkWeekDate', function(date) {
 	}
 });
 
+// 开票状态
+Vue.filter("filterHandlerType", function(val) {	
+	let dataList = ['','个人', '单位']
+	return dataList[val]
+});
+// 开票状态
+Vue.filter("filterInvoiceState", function(val) {	
+	let dataList = ['申请中', '开票成功','开票中', '开票失败', '作废']
+	return dataList[val]
+});