【Add】订单回执提审功能

pages.json

@@ -167,6 +167,13 @@
 			{
 				"navigationBarTitleText" : "下单抽奖"
 			}
+		},
+		{
+			"path" : "pages/orders/receipt",
+			"style" : 
+			{
+				"navigationBarTitleText" : "订单回执"
+			}
 		}
 	],
 	"globalStyle": {

pages/orders/index.vue

@@ -9,7 +9,7 @@
 		<view class="to_bottom" v-if="!orderList.length"> -----还没有订单-----</view>
 		<view class="order_list">
 			<view class="order_item" v-for="(item,index) in orderList" :key="index" >
-				<view class="order_title" @click="item.product_list.length > 1">
+				<view class="order_title">
 					<view class="business_name">{{item.business_name}}</view>
 					<view class="order_status">{{item.state}}</view>
 				</view>
@@ -30,12 +30,15 @@
 					</view>
 				</view>
 				<view class="show_more" v-if="item.product_list.length > 1" @click.stop="changeHeight(index)">
-					<uni-icons :type="item.contents_class?'up':'down'" size="20" ></uni-icons>
+					<uni-icons :type="item.contents_class?'up':'down'" ></uni-icons>
 				</view>
 				<view class="order_price">
-					<button class="order_cancel" v-if="item.status == 1" @click="cancelOrder(index)">取消订单</button>
 					<view class="pay_total">￥{{item.pay_total}}</view>
 				</view>
+				<view class="order_btn"v-if="item.status == 1">
+					<button class="order_cancel" @click="cancelOrder(index)">取消订单</button>
+					<button class="order_share" @click="toReceipt(item)">我已收货</button>
+				</view>
 			</view>
 		</view>
 		<view class="to_bottom" v-if="isLast"> -----到底啦-----</view>
@@ -194,6 +197,11 @@
 						url:"/pages/product/index?product_id="+id
 					})
 				}
+			},
+			toReceipt(item){
+				uni.navigateTo({
+					url:"/pages/orders/receipt?order_id="+item.id
+				})
 			}
 		}
 	}
@@ -302,32 +310,58 @@
 				height: 60rpx;
 				overflow: hidden;
 				line-height: 60rpx;
+				.pay_total{
+					float: right;
+					height: 60rpx;
+					color: #E03519;
+					font-size: 28rpx;
+					line-height: 60rpx;
+				}
+			}
+			.show_more{
+				width: 100%;
+				height: 30rpx;
+				display: block;
+				font-size: 20rpx !important;
+				margin-top: -30rpx;
+				text-align: center;
+				position: relative;
+				background-color: rgba(0, 0, 0, 0.05);
+			}
+			.order_btn{
+				display: block;
+				height: 60rpx;
+				overflow: hidden;
 				.order_cancel{
 					float: left;
+					height: 50rpx;
 					color: #999999;
-					height: 60rpx;
 					font-size: 24rpx;
-					padding: 0rpx 0rpx;
-					line-height: 60rpx;
+					padding: 0rpx 10rpx;
+					line-height: 50rpx;
 					margin-left: 10rpx;
+					border-radius: 25rpx;
+					border: 2rpx solid #999999;
 					background-color: transparent;
 				}
 				.order_cancel::after{
 					border: none;
 				}
-				.pay_total{
+				.order_share{
 					float: right;
-					height: 60rpx;
+					height: 50rpx;
 					color: #E03519;
-					font-size: 28rpx;
-					line-height: 60rpx;
+					font-size: 24rpx;
+					padding: 0rpx 10rpx;
+					line-height: 50rpx;
+					margin-left: 10rpx;
+					border-radius: 25rpx;
+					border: 2rpx solid #E03519;
+					background-color: transparent;
+				}
+				.order_share::after{
+					border: none;
 				}
-			}
-			.show_more{
-				display: block;
-				font-size: 20rpx;
-				text-align: center;
-				padding: 20rpx 0rpx;
 			}
 		}
 	}

pages/orders/receipt.vue

@@ -0,0 +1,353 @@
+<template>
+	<view>
+		<view class="order_info"  >
+			<view class="order_title" >
+				<view class="business_name">{{orderInfo.business_name}}</view>
+			</view>
+			<view  class="product_list" >
+				<view class="product_item" v-for="(product_info,k) in orderInfo.product_list" :key="k" >
+					<image class="product_img" :src="product_info.product_thumb" mode=""></image>
+					<view class="product_info">
+						<view class="product_name">
+						  <text v-if="product_info.is_rebate">【赠】</text>	{{product_info.product_name}}
+						</view>
+						<view  class="product_spec">
+							{{product_info.product_spec}}
+						</view>
+					</view>
+					<view class="buy_num">
+						x{{product_info.buy_num}}
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="upload_box">
+			<view class="image_box" @click="chooseImage()">
+				<image class="upload_image" :src="localImage" v-if="localImage"></image>
+				<text  class="upload_text" v-if="!localImage" >请点此处上传图片</text>
+			</view>
+		</view>
+		<view class="info_alter">
+			<view class="">
+				请谨慎上传回执，上传后无法修改
+			</view>
+			<view class="">
+				上传后有机会获得积分
+			</view>
+		</view>
+		<view class="btn_box">
+			<button class="upload_btn" v-if="localImage" @click="toApply()">提交</button>
+			<button class="upload_btn disable" v-if="!localImage">提交</button>
+		</view>
+		<uni-popup ref="sharePopup" type="center" :mask-click="false">
+			<view class="share_info">
+				<view class="state_icon">
+					<uni-icons type="checkbox" color="#07C160"></uni-icons>
+				</view>
+				<view class="state_text">图片上传成功</view>
+				<button class="share_btn" open-type="share">
+					<uni-icons type="weixin" color="#FFFFFF"></uni-icons>
+					<text>立即分享到微信群</text>
+				</button>
+				<view class="info_text">工作人员审核通过后将发放积分</view>
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				order_id:0,
+				localImage:"",
+				orderInfo:{},
+				shareInfo:{
+					title: "我已经完成一笔订单，你也快来吧",
+					path: '/pages/index/index',
+					imageUrl:"",
+				}
+			}
+		},
+		onLoad(param){
+			this.order_id = param.order_id;
+		},
+		onShow() {
+			// 登录提示
+			if( !this.$checkAccess.alterLogin() )	return ;
+			// 判断订单ID
+			if( this.order_id <= 0 ) {
+				uni.showModal({
+					content:"未知的活动ID",
+					showCancel:false,
+				})
+				return ;
+			}
+			// 没有数据的话，或者请求中，不允许刷新
+			if( this.isReqing ) 	return ;
+			// 设置请求中
+			this.isReqing			= true;
+			// 请求列表
+			this.$http.request('api/orders/get_item',{id:this.order_id}).then((re)=>{
+				// 设置非请求中
+				this.isReqing		= false;
+				// 成功结果
+				if( re.code == 'success' ){
+					this.orderInfo = re.data;
+				}else{
+					if( re.code != 'no_login' ){
+						uni.showModal({
+							content:re.msg,
+							showCancel:false,
+						})
+					}
+				}
+			});
+		},
+		onShareAppMessage(obj) {
+			return this.shareInfo;
+		},
+		methods: {
+			chooseImage(){
+				uni.chooseImage({
+					count: 1, // 默认9，设置图片的数量
+					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
+					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
+					success: (chooseImageRes) => {
+						let tempFilePaths = chooseImageRes.tempFilePaths;
+						this.localImage = tempFilePaths[0];
+					},
+				})
+			},
+			toApply(){
+				// 判断订单ID
+				if( this.order_id <= 0 ) {
+					uni.showModal({
+						content:"未知的活动ID",
+						showCancel:false,
+					})
+					return ;
+				}
+				// 判断订单ID
+				if( !this.localImage ) {
+					uni.showModal({
+						content:"请上传图片",
+						showCancel:false,
+					})
+					return ;
+				}
+				// 没有数据的话，或者请求中，不允许刷新
+				if( this.isReqing ) 	return ;
+				// 请求中
+				uni.showLoading();
+				// 设置请求中
+				this.isReqing			= true;
+				// 请求列表
+				this.$http.fileupload('api/orders_receipt/apply',this.localImage,{order_id:this.order_id}).then((re)=>{
+					// 设置非请求中
+					uni.hideLoading();
+					// 成功结果
+					if( re.code == 'success' ){
+						// 赋值
+						this.shareInfo		= re.data.share_info;
+						// 弹出提示
+						this.$refs.sharePopup.open('center');
+					}else{
+						if( re.code != 'no_login' ){
+							// 设置请求中
+							this.isReqing	= false;
+							// 允许请求
+							uni.showModal({
+								content:re.msg,
+								showCancel:false,
+							})
+						}
+					}
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="less">
+	.order_info{
+		display: block;
+		background: #FFFFFF;
+		margin: 0rpx auto;
+		padding: 0rpx 35rpx;
+		margin-bottom: 10rpx;
+		.order_title{
+			width: 100%;
+			height: 60rpx;
+			display: block;
+			overflow: hidden;
+			line-height: 60rpx;
+			.business_name{
+				float: left;
+				font-size: 32rpx;
+			}
+			.order_status{
+				float: right;
+				color: #999999;
+				font-size: 24rpx;
+			}
+		}
+		.product_list{
+			display: block;
+			overflow: hidden;
+			margin: 15rpx auto;
+			.product_item{
+				display: block;
+				height: 100rpx;
+				overflow: hidden;
+				.product_img{
+					float: left;
+					width: 80rpx;
+					height: 80rpx;
+					display: block;
+					margin-top: 10rpx;
+					margin-right: 30rpx;
+				}
+				.product_info{
+					float: left;
+					width: 480rpx;
+					height: 100rpx;
+					display: block;
+					overflow: hidden;
+					.product_name{
+						display: block;
+						height: 60rpx;
+						display: block;
+						font-size: 28rpx;
+						line-height: 60rpx;
+						overflow: hidden;
+					}
+					.product_spec{
+						color: #999999;
+						height: 40rpx;
+						display: block;
+						font-size: 24rpx;
+						line-height: 40rpx;
+						overflow: hidden;
+					}
+				}
+				.buy_num{
+					float: right;
+					height: 100rpx;
+					color: #999999;
+					font-size: 26rpx;
+					text-align: right;
+					position: relative;
+					line-height: 100rpx;
+				}
+			}
+		}
+		.product_list.active{
+			height: auto !important;
+		}
+	}
+	.upload_box{
+		display: block;
+		width: 750rpx;
+		height: 410rpx;
+		margin-top: 20rpx;
+		text-align: center;
+		padding: 20rpx 0rpx;
+		background-color: #FFFFFF;
+		.image_box{
+			width: 400rpx;
+			height: 400rpx;
+			display: block;
+			color: #999999;
+			font-size: 28rpx;
+			margin: 0rpx auto;
+			line-height: 400rpx;
+			border: 2rpx solid #999999;
+			.upload_image{
+				width: 400rpx;
+				height: 400rpx;
+			}
+		}
+	}
+	.info_alter{
+		// color: #E03519;
+		display: block;
+		font-size: 26rpx;
+		overflow: hidden;
+		line-height: 60rpx;
+		text-align: center;
+		margin: 0rpx auto;
+		background-color: #FFFFFF;
+	}
+	.btn_box{
+		display: block;
+		overflow: hidden;
+		margin: 20rpx auto;
+		.upload_btn{
+			color: #FFFFFF;
+			display: block;
+			width: 680rpx;
+			height: 80rpx;
+			margin: 0 auto;
+			font-size: 28rpx;
+			line-height: 80rpx;
+			padding: 0rpx 0rpx;
+			border-radius: 10rpx;
+			background-color: #07C160;
+		}
+		.upload_btn.disable{
+			background-color: #999999;
+		}
+		.upload_btn::after{
+			border: none;
+		}
+	}
+	.share_info{
+		width: 600rpx;
+		height: 600rpx;
+		background-color: #FFFFFF;
+		.state_icon{
+			width: 240rpx;
+			height: 240rpx;
+			display: block;
+			margin: 20rpx auto;
+			text-align: center;
+			font-size: 240rpx !important;
+			.uni-icons{
+				font-size: 240rpx !important;
+			}
+		}
+		.state_text{
+			height: 80rpx;
+			display: block;
+			font-size: 32rpx;
+			margin: 20rpx auto;
+			line-height: 80rpx;
+			text-align: center;
+		}
+		.share_btn{
+			color: #FFFFFF;
+			display: block;
+			width: 560rpx;
+			height: 80rpx;
+			font-size: 30rpx;
+			margin: 20rpx auto;
+			line-height: 80rpx;
+			padding: 0rpx 0rpx;
+			border-radius: 10rpx;
+			background-color: #07C160;
+			.uni-icons{
+				margin-right: 20rpx;
+				font-size: 36rpx !important;
+			}
+		}
+		.info_text{
+			height: 60rpx;
+			display: block;
+			font-size: 26rpx;
+			margin-top: 20rpx;
+			line-height: 60rpx;
+			text-align: center;
+		}
+	}
+</style>