qd_81fang/pages/writeoff/index.vue

<template>
	<view>
		<view class="address" v-if="order.delivery">
			<view class="icon">
				<text class="cell-icon yticon icon-dizhi" style="color: #ffffff"></text>
			</view>
			<view class="info">
				<view class="name">{{order.delivery.username}}<text class="mobile">{{order.delivery.mobile}}</text></view>
				<view class="address">{{order.delivery.address}}</view>
			</view>
		</view>
		<view class="product" v-if="order.products">
			<view class="goods-box-single" v-for="(goodsItem, goodsIndex) in order.products" :key="goodsIndex" @click="navTo('/pages/product/product?id='+goodsItem.id+'&flash=0')">
				<image class="goods-img" :src="goodsItem.image" mode="aspectFill"></image>
				<view class="right">
					<text class="title clamp">{{goodsItem.title}}</text>
					<text class="attr-box">{{goodsItem.spec}} x {{goodsItem.number}}</text>
					<text class="price">{{goodsItem.price}}</text>
					<button class="action-btn" v-if="order.have_received != 0 && goodsItem.evaluate == false" @click.stop="button('evaluate', goodsItem)">评价</button>
				</view>
			</view>

			<view class="price">
				<view>商品总价 <text>￥ {{order.order_price}}</text></view>
				<view>运费 <text>￥ {{order.delivery_price}}</text></view>
				<view>优惠 <text>￥ {{order.discount_price}}</text></view>
				<view class="total">实付款（含运费） <text>￥ {{order.total_price}}</text></view>
			</view>
		</view>
		<view class="order" v-if="order.createtime">
			<view class="title">订单信息</view>
			<view>订单编号：{{order.out_trade_no}}</view>
			<view>创建时间：{{order.createtime}}</view>
			<view>付款时间：{{order.have_paid ? order.paidtime : '未付款'}}</view>
			<view>发货时间：{{order.have_delivered ? order.deliveredtime : '未发货'}}</view>
			<view v-if="order.have_received">成交时间：{{order.receivedtime}}</view>
			<view v-if="order.have_refunded">退货时间：{{order.refundedtime}}</view>
		</view>
		<view style="height: 10rpx;">
			<!--兼容苹果系统下margin-bottom不生效-->
		</view>
		<view class="bottom" v-if="order.state != 9">
			<button class="action-btn" v-if="order.have_paid != 0 && order.have_received == 0" @click.stop="recerved()">确认核销该订单</button>
			<span class="success" v-else>已经核销成功</span>
		</view>
	</view>
</template>
<script>
	// pages/tabbar/index/index.js
	import {
		mapMutations,
	} from 'vuex';
	var app = getApp();

	export default {
		data() {
			return {
				uid: "",
				order_id: "",
				token: "",
				order: {}
			};
		},
		onLoad: function(options) {
			this.uid = options.uid;
			this.order_id = options.order_id;
			this.token = options.token;
			//this.puid = options.puid||'';
			this.bind();
		},
		onShareAppMessage: function() {},
		methods: {
			...mapMutations(['login']),
			async bind() {
				let [error, loginRes] = await uni.login({
					provider: 'weixin'
				});
				let res = await this.$api.request('/order/detail', 'GET', {
					order_id: this.order_id
				});
				this.order = res;
			},
			async recerved() {
				let res = await this.$api.request('/order/writeOffIpl', 'POST', {
					order_id: this.order_id,
					user_id: this.uid,
					token: this.token
				});
				this.bind();
			}
		}
	};
</script>
<style>
	page {
		background: #F5F5F5;
		padding: 20rpx;
		box-sizing: border-box;
	}
</style>
<style lang="scss">
	.header {
		height: 200rpx;
		background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);

		.left {
			color: #ffffff;
			line-height: 200rpx;
			padding-left: 100rpx;
		}
	}

	.delivery {
		color: #545454;
		background: #ffffff;
		border-bottom: 1px solid #e9e9e9;

		.icon {
			background: #00a7c8;
			height: 60rpx;
			width: 60rpx;
			display: inline-block;
			border-radius: 100rpx;
			margin: 50rpx 30rpx;
			text-align: center;
			line-height: 60rpx;
		}

		.info {
			display: inline-flex;
			flex-direction: column;
			justify-content: center;
			width: 600rpx;
			vertical-align: middle;
			margin: 30rpx 0;
			position: relative;

			.right {
				position: absolute;
				right: 0;
			}
		}

	}

	.address {
		color: #545454;
		background: #ffffff;

		.icon {
			background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);
			height: 60rpx;
			width: 60rpx;
			display: inline-block;
			border-radius: 100rpx;
			margin: 50rpx 30rpx;
			text-align: center;
			line-height: 60rpx;
		}

		.info {
			display: inline-flex;
			flex-direction: column;
			justify-content: center;
			width: 600rpx;
			vertical-align: middle;
			margin: 30rpx 0;

			.mobile {
				color: #9b9b9b;
				margin-left: 30rpx;
			}
		}
	}

	.product {
		background: #ffffff;
		margin-top: 20rpx;
		padding: 30rpx;
		line-height: 60rpx;

		/* 单条商品 */
		.goods-box-single {
			display: flex;
			padding: 20upx 0;
			border-bottom: 1rpx solid #eaeaea;

			.goods-img {
				display: block;
				width: 120upx;
				height: 120upx;
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30upx 0 24upx;
				overflow: hidden;
				position: relative;

				.title {
					font-size: $font-base + 2upx;
					color: $font-color-dark;
					line-height: 1;
				}

				.attr-box {
					font-size: $font-sm + 2upx;
					color: $font-color-light;
					padding: 10upx 12upx;
				}

				.price {
					font-size: $font-base + 2upx;
					color: $font-color-dark;
					margin-top: 0;

					&:before {
						content: '￥';
						font-size: $font-sm;
						margin: 0 2upx 0 8upx;
					}
				}

				.action-btn {
					width: 160rpx;
					height: 60rpx;
					padding: 0;
					text-align: center;
					line-height: 60rpx;
					font-size: 26rpx;
					color: #303133;
					background: #fff;
					border-radius: 100px;
					float: right;
					position: absolute;
					right: 0;
					bottom: 0;
				}
			}
		}

		.price {
			color: #9b9b9b;
			font-size: 26rpx;
			margin-top: 30rpx;

			text {
				float: right;
			}

			.total {
				font-size: 35rpx;

				text {
					color: #F56C6C;
				}
			}
		}
	}

	.order {
		background: #ffffff;
		margin-top: 20rpx;
		padding: 30rpx;

		.title {
			border-left: 4rpx solid #F56C6C;
			padding-left: 17rpx;
			color: #898989;
			font-size: 35rpx;
			margin-bottom: 20rpx;
		}

		font-size: 26rpx;
		color: #9b9b9b;
		line-height: 60rpx;
		margin-bottom: 120rpx;
	}

	.bottom {
		position: fixed;
		width: 100%;
		height: 100rpx;
		background: #ffffff;
		bottom: 0;
		border-top: 1px solid #e9e9e9;

		.action-btn {
			width: 280rpx;
			height: 60rpx;
			margin: 20rpx 50rpx 20rpx 20rpx;
			padding: 0;
			text-align: center;
			line-height: 60rpx;
			font-size: 26rpx;
			color: #303133;
			background: #fff;
			border-radius: 100px;
			float: right;

			&:after {
				border-radius: 100px;
			}

			&.recom {
				background: #fff9f9;
				color: $base-color;

				&:after {
					border-color: #f7bcc8;
				}
			}
		}
		
		.success {
			float: right;
			width: 8em;
			line-height: 2.4em;
		}
	}
</style>