odd_job_applet/pages/mall/order.vue

<template>
	<view>

		


		<view class="cu-card article no-card margin-tb">
			<view class="cu-item shadow">
				<view class="title">
					<view class="text-cut">订单号：{{order.ordersn}}</view>
				</view>
				<view class="content">
					<image :src="order.tilpic" mode="aspectFill"></image>
					<view class="desc">
						<view class="text-content">{{order.title}}</view>
						<view>
							<view class="cu-tag bg-red light sm round">{{order.gintegral}}积分 + ￥{{order.gpaymoney}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="cu-list menu sm-border margin-bottom">
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-tag text-grey"></text>
					<text class="text-grey">兑购量</text>
				</view>
				<view class="action">
					<text class="text-lg">{{order.buynumber}} 件</text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-choiceness text-grey"></text>
					<text class="text-grey">订单积分</text>
				</view>
				<view class="action">
					<text class="text-lg" v-if="order.status==2">已扣除</text> <text class="text-lg"> {{order.integral}}积分</text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-moneybag text-grey"></text>
					<text class="text-grey">订单金额</text>
				</view>
				<view class="action">
					<text class="text-lg">￥ {{order.paymoney}}</text>
				</view>
			</view>
		</view>

		<radio-group class="block margin-bottom" v-if="order.status==2">
			<view class="cu-form-group">
				<view class="title padding-left-xs">微信支付</view>
				<radio class="checked" checked="true"></radio>
			</view>
		</radio-group>
		<view class="cu-list menu sm-border margin-bottom" v-if="order.status>=3">
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-pay text-grey"></text>
					<text class="text-grey">支付方式</text>
				</view>
				<view class="action">
					<text class="text-lg">微信支付</text>
				</view>
			</view>
		</view>
		
		<view class="cu-list menu sm-border margin-bottom">
			<view class="cu-item arrow">
				<view class="content">
					<text class="cuIcon-location text-grey"></text>
					<text class="text-grey">收件信息</text>
				</view>
				<view class="action" @tap="selAddress" v-if="order.status==2">
					<text class="text-lg">点击选择</text>
				</view>
			</view>
			<view class="padding-lr padding-tb-sm bg-white" v-if="order.username!=''">
				<view class="text-bold margin-bottom-sm">
					<text>{{order.username}}</text>
					<text class="margin-left">{{order.usermobile}}</text>
				</view>
				<view>
					<text>{{order.province}} {{order.city}} {{order.county}} {{order.detailinfo}}</text>
				</view>
			</view>
		</view>
			
		<view class="padding-tb padding-lr solid-bottom bg-white text-red" v-if="order.mallGoods.oremark!=''">{{order.mallGoods.oremark}}</view>
		<view class="cu-form-group" v-if="order.status==2">
			<textarea maxlength="-1" @input="remarkInput" placeholder="请输入备注信息..." :value="order.remark"></textarea>
		</view>
		<view class="cu-form-group padding-tb" v-else>
			<text>{{order.remark}}</text>
		</view>

		<view class="padding-sm"></view>
		<view class="padding-xl"></view>
		<view class="cu-bar bg-white tabbar border shop foot" v-if="order.status==2">
			<view class="bg-white submit flex align-end">
				<text class="text-sm">需支付金额：</text>
				<text class="text-lg text-red">￥{{order.paymoney}}元</text>
			</view>
			<view class="bg-red submit" @click="payOrder">立即支付</view>
		</view>
		<view class="cu-bar bg-white tabbar border shop foot" v-else>
			<view class="bg-white submit flex align-end">
				<text class="text-sm">订单金额：</text>
				<text class="text-lg text-red">￥{{order.paymoney}}元</text>
			</view>
			<view class="bg-red submit" v-if="order.status==1">订单已取消</view>
			<view class="bg-red submit" v-if="order.status==3">订单已支付</view>
			<view class="bg-red submit" v-if="order.status==4">订单已完成</view>
			<view class="bg-red submit" v-if="order.status==5">订单已退单</view>
		</view>

	</view>
</template>


<script>
	var _this;
	export default {
		data() {
			return {
				isRotate: false,
				userinfo: false,
				order: {}
			};
		},
		onLoad: function(option) {
			_this = this;
			var userinfo = uni.getStorageSync('userinfo') || false;
			if (userinfo == false) {
				uni.redirectTo({
					url: '/pages/login/login'
				});
				return false;
			}
			_this.userinfo = userinfo;
			var orderid = option.orderid || 0;
			_this.$req.ajax({
				path: "mall/getorder",
				data: {
					orderid: orderid,
					userid: userinfo.id
				}
			}).then((data) => {
				_this.order = data.order;
			}).catch((err) => {
				uni.showModal({
					title: '信息提示',
					content: err,
					showCancel: false,
					success: function(res) {
						uni.redirectTo({
							url: '/pages/mall/myorder'
						});
					}
				});
			});

		},
		methods: {
			payOrder: function(e) {
				if (_this.isRotate) {
					return false;
				}
				_this.isRotate = true;
				_this.$req.ajax({
					path: "mall/payorder",
					title: "支付处理中",
					data: {
						orderid: _this.order.id,
						userid: _this.userinfo.id,
						remark: _this.order.remark
					}
				}).then((data) => {
					console.log("data: " + JSON.stringify(data));
					if (data.ostatus == 3) {
						uni.showModal({
							title: '信息提示',
							content: '支付成功。',
							showCancel: false,
							success: function(res) {
								uni.redirectTo({
									url: '/pages/mall/myorder'
								});
							}
						});
					} else if (data.ostatus == 2) {
						var payinfo = data.payinfo;
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: payinfo.timeStamp.toString(),
							nonceStr: payinfo.nonceStr,
							package: payinfo.package,
							signType: payinfo.signType,
							paySign: payinfo.paySign,
							success: function(res) {
								uni.showModal({
									title: '信息提示',
									content: '支付成功。',
									showCancel: false,
									success: function(res) {
										uni.redirectTo({
											url: '/pages/mall/myorder'
										});
									}
								});
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					}
					_this.isRotate = false;
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
					_this.isRotate = false;
				});
			},
			selAddress: function(e) {
				wx.chooseAddress({
					success(res) {
						_this.$req.ajax({
							path: "mall/setorderaddress",
							data: {
								orderid: _this.order.id,
								userid: _this.userinfo.id,
								username: res.userName,
								usermobile: res.telNumber,
								province: res.provinceName,
								city: res.cityName,
								county: res.countyName,
								detailinfo: res.detailInfo,
							}
						}).then((data) => {
							_this.order = data.order;
						}).catch((err) => {
							uni.showModal({
								title: '信息提示',
								content: err,
								showCancel: false,
								success: function(res) {
									uni.redirectTo({
										url: '/pages/mall/myorder'
									});
								}
							});
						});
					}
				});
			},
			remarkInput: function(e) {
				_this.order.remark = e.detail.value
			},
		},
	}
</script>

<style>
</style>