kailin_mp/pages/orders/receipt.vue

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