xingmingyi_applet/pagesA/mall/orderInfo.vue

<template>
	<view class="content">
		<view class="address dfsb">
			<image src="/static/img/pro/malladdress.png" mode=""></image>
			<view class="addInfo">
				<view class="addInfo-title">
					<text>{{ newsInfo.shou_name || '姓名' }}</text>
					<text class="textgrey">{{ newsInfo.shou_phone || '手机号' }}</text>
				</view>
				<view class="addInfo-bot">{{ newsInfo.shou_address || '地址' }}</view>
			</view>
		</view>
		<!-- 订单列表 -->
		<view class="order-item">
			<block v-if="tabcur == 0">
				<view v-for="(ite, ind) in newsInfo.comments" class="shopshead dfsb">
					<image :src="ite.goods_img" mode=""></image>
					<view class="shopsInfo dffd">
						<view class="oneelli">{{ ite.goods_name }}</view>
						<view class="attr textgrey">{{ ite.sku_val }}</view>
						<view class="price dfsb prosecond">
							{{ ite.goods_price || 0.0 }}
							<text class="textgrey fontsm">x{{ ite.goods_num }}</text>
						</view>
					</view>
				</view>
			</block>
			<block v-if="tabcur != 0">
				<view class="shopshead dfsb">
					<image :src="newsInfo.goods_img" mode=""></image>
					<view class="shopsInfo dffd">
						<view class="oneelli">{{ newsInfo.goods_name }}</view>
						<view class="attr textgrey">{{ newsInfo.sku_val }}</view>
						<view class="price dfsb prosecond">
							{{ newsInfo.goods_price || 0.0 }}
							<text class="textgrey fontsm">x{{ newsInfo.goods_num }}</text>
						</view>
					</view>
				</view>
			</block>
			<view class="allInfo dfsb">
				<text class="">备注</text>
				<text>{{ newsInfo.content || '无' }}</text>
			</view>
			<view class="allInfo dfsb">
				<text class="textgrey">运费</text>
				<text class="promain">￥{{ newsInfo.exp_fee || 0.0 }}</text>
			</view>
			<view class="allInfo dfsb">
				<text class="textgrey">优惠价格</text>
				<text class="promain">￥{{ newsInfo.coupon_price || 0.0 }}</text>
			</view>
			<view class="allInfo dfsb">
				<text class="textgrey">商品折扣</text>
				<text class="promain">{{ newsInfo.discount || 0 }}折</text>
			</view>
			<view class="allInfo dfsb">
				<text class="textgrey">商品总价</text>
				<text class="prosecond">￥{{ newsInfo.total_price || newsInfo.total }}</text>
			</view>

			<view class="allInfo spec dfsb">
				<text class="textmain">实付款</text>
				<text class="prosecond">￥{{ newsInfo.payment_price }}</text>
			</view>
		</view>
		<view class="order-item list">
			<view class="ordtitle">订单信息</view>
			<view class="allInfo dfsb">
				<text class="">订单编号</text>
				<text>{{ newsInfo.order_sn }}</text>
				<text @click="copy(newsInfo.order_sn)" class="prosecond">复制</text>
			</view>
			<view class="allInfo dfsb">
				<text class="">创建时间</text>
				<text>{{ newsInfo.create_time }}</text>
			</view>
			<view v-if="newsInfo.status > 1 && newsInfo.status < 5" class="allInfo dfsb">
				<text class="">运单号</text>
				<text>{{ newsInfo.exp_list.exp_no }}</text>
			</view>
			<view v-if="newsInfo.status > 1 && newsInfo.status < 5" class="allInfo dfsb">
				<text class="">快递公司</text>
				<text>{{ newsInfo.exp_list.exp_name }}</text>
			</view>
			<view v-if="newsInfo.status != 0" class="allInfo dfsb">
				<text class="">付款时间</text>
				<text>{{ newsInfo.pay_time }}</text>
			</view>
			<view v-if="newsInfo.status > 2" class="allInfo dfsb">
				<text class="">发货时间</text>
				<text>{{ newsInfo.deliver_time }}</text>
			</view>
			<view v-if="newsInfo.status > 3" class="allInfo dfsb">
				<text class="">完成时间</text>
				<text>{{ newsInfo.receiving_time }}</text>
			</view>
			<view class="fixBox dffs">
				<view v-if="newsInfo.status == 1" @tap.stop="sureOrd(newsInfo, 0)" class="cancle">取消</view>
				<view v-if="newsInfo.status > 1 && newsInfo.status < 5 && tabcur == 0" @tap.stop="sureOrd(newsInfo, 3)" class="cancle">售后</view>
				<view v-if="newsInfo.status == 1" @tap.stop="sureOrd(newsInfo, 1)" class="clickbtn">去付款</view>
				<view v-if="newsInfo.status == 3" @tap.stop="sureOrd(newsInfo, 2)" class="clickbtn">确认收货</view>
				<view v-if="newsInfo.status > 2 && newsInfo.status < 5" @tap.stop="sureOrd(newsInfo, 4)" class="clickbtn">查看物流</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mixin } from './mixin.js';
export default {
	mixins: [mixin],
	data() {
		return {
			tabcur: '',
			id: '',
			// 付款
			showPaytype: false, //展示付款方式
			showPayexp: false, //展示邮费付款方式
			payexp: 1, //标志着支付邮费
			paytype: '', // 获取付款方式  1 zhigubao  2 weixin
			showPass: false, //密码

			newsInfo: { comments: [{}], status: 0 }
		};
	},

	onLoad(options) {
		this.id = options.id || '';
		this.tabcur = options.tabcur || 0;
		this.loadData();
	},
	onShow() {},
	methods: {
		loadData() {
			this.$api
				.request('orders/info', {
					type: Number(this.tabcur) + 1,
					id: this.id
				})
				.then(data => {
					if (data.code == 200) {
						this.newsInfo = data.data;
					} else {
						this.$api.toast(data.msg);
					}
				})
				.catch(function(error) {
					console.log(error);
				});
		},
		copy(val) {
			let content = val; //需要复制的内容
			content = typeof content === 'string' ? content : content.toString(); // 复制内容，必须字符串，数字需要转换为字符串
			const result = uniCopy(content);
			if (result === false) {
				uni.showToast({
					title: '不支持'
				});
			} else {
				uni.showToast({
					title: '复制成功，快分享给好友吧',
					icon: 'none'
				});
			}
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	background-color: #f5f5f5;
	min-height: 100vh;
	.groupInfo {
		padding: 32rpx;
		margin-bottom: 20rpx;
		background: linear-gradient(270deg, #e04f36 0%, #e02828 100%);
		image {
			width: 108rpx;
			height: 108rpx;
			margin-right: 32rpx;
		}
		.gpLeft {
			flex: 1;
			text {
				color: #fff;
				line-height: 42rpx;
				font-size: 30rpx;
				&:first-of-type {
					font-size: 36rpx;
					line-height: 50rpx;
					margin-bottom: 10rpx;
				}
			}
		}
	}
	.storeInfo {
		background: linear-gradient(90deg, #1f96f6 0%, #1388e7 100%);
		image {
			padding: 20rpx;
		}
	}
}
.address {
	padding: 30rpx;
	background-color: #fff;
	margin: 1rpx 0 22rpx;
	image {
		width: 30rpx;
		height: 40rpx;
		margin-right: 30rpx;
	}
	.addInfo {
		flex: 1;
		&-title {
			text {
				font-size: 32rpx;
			}
			text:nth-of-type(2) {
				font-size: 28rpx;
				margin-left: 12rpx;
			}
		}
		&-bot {
			margin-top: 10rpx;
			font-size: 28rpx;
			line-height: 40rpx;
		}
	}
}
.order-item {
	display: flex;
	flex-direction: column;
	background: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	.ordtitle {
	}
	.shopshead {
		height: 146rpx;
		margin: 32rpx 0 32rpx;
		image {
			width: 146rpx;
			height: 146rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}

		.shopsInfo {
			flex: 1;
			height: 100%;
			align-items: flex-start;
			justify-content: space-between;
			.elli {
				// height: 80rpx;
				line-height: 40rpx;
			}
			.price {
				width: 100%;
			}
		}
	}
	.attrBox {
		margin: 30rpx 0 20rpx;
	}
	.allInfo {
		width: 100%;
		margin-top: 30rpx;
		text-align: right;
		input,
		text {
			font-size: 28rpx;
			// color: $textgrey;
			&:nth-of-type(2) {
				flex: 1;
				text-align: right;
			}
		}
	}
	.spec {
		margin: 40rpx 0 0;
		text {
			font-size: 32rpx;
			color: $textcom;
			&:nth-of-type(2) {
				color: $promain;
			}
		}
	}

	.fixBox {
		justify-content: flex-end;
		.clickbtn,
		.cancle {
			width: 220rpx;
			font-size: 28rpx;
			border-radius: 0rpx;
			margin: 0;
			background: $red;
			box-shadow: 0 0 0 0;
			color: #fff;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
			border-left: 1rpx solid #fff;
		}
		.cancle {
			background: #fff;
			color: #333;
		}
	}
}
.list {
	.allInfo {
		width: 100%;
		text {
			font-size: 28rpx;
			color: $textgrey;
			&:nth-of-type(2) {
				flex: 1;
				text-align: right;
			}
		}

		.prosecond {
			color: #fe4f00;
		}
	}
}
.tuiBox {
	margin: 30rpx;
	border: 1rpx solid #f5f5f5;
	height: 60rpx;
	padding: 10rpx;
	line-height: 60rpx;
}
</style>