shicai/pages/order/orderDetail.vue

<template>
	<view class="content">
		<view class="row b-b b-t">
			<text class="order-status">{{ item._status ? item._status._msg : '' }}</text>
		</view>
		<view class="address-box position-relative">
			<view class="address-top flex">
				<view class="title" v-if="type == 0">{{ item.real_name}}</view>
				<view class="title" v-if="type == 1">{{ real_name }}</view>
				<view class="phone" v-if="type == 0">{{ item.user_phone }}</view>
				<view class="phone" v-if="type == 1">{{ user_phone}}</view>
			</view>
			<view class="addrdss-detail" v-if="type == 1">{{ user_address }}</view>
			<view class="addrdss-detail" v-if="type == 0">{{ item.user_address }}</view>
			<image class="a-bg" :src="addressImg"></image>
		</view>
		<view class="order-item">
			<view class="order-title flex" v-if="type == 1">
				<view class="name">商品信息</view>
				<view class="ToHome" @click="ToHome">去首页</view>
			</view>
			<view class="goods-box-single" v-for="(goodsItem, goodsIndex) in item.cartInfo" :key="goodsIndex">
				<image class="goods-img" :src="goodsItem.productInfo.image" mode="aspectFill"></image>
				<view class="right position-relative">
					<text class="title">{{ goodsItem.productInfo.store_name }}</text>
				</view>
				<view class="title-right">
					<view class="price">{{ goodsItem.productInfo.price }}</view>
					<view class="attr-box">{{ goodsItem.attrInfo ? goodsItem.attrInfo.suk : '' }} x {{ goodsItem.cart_num }}</view>
					<view v-if="type == 0">
						<view v-if="status._type ==  3">
							<view @click="evaluate(goodsItem)" class="yesevaluate" v-if="goodsItem.is_reply > 0"><text>已评价</text></view>
							<view @click="evaluate(goodsItem)" class="evaluate" v-if="goodsItem.is_reply < 1"><text>去评价</text></view>
						</view>
					</view>
				</view>
			</view>
			<view class="goods-box-single" v-if="gift_info != ''">
				<image class="goods-img" :src="gift_info.image" mode="aspectFill"></image>
				<view class="right position-relative">
					<text class="title">{{ gift_info.store_name }}</text>
				</view>
				<view class="title-right">
					<view class="evaluate"><text>赠品</text></view>
				</view>
			</view>
			<view class="goods-box-single" v-if="activityProductInfo != ''">
				<image class="goods-img" :src="activityProductInfo.image" mode="aspectFill"></image>
				<view class="right position-relative">
					<text class="title">{{ activityProductInfo.store_name }}</text>
				</view>
				<view class="title-right">
					<view class="evaluate"><text>活动赠品</text></view>
				</view>
			</view>
			<view class="goods-box-single" v-if="productCouponInfo != ''">
				<image class="goods-img" :src="productCouponInfo.image" mode="aspectFill"></image>
				<view class="right position-relative">
					<text class="title">{{ productCouponInfo.store_name }}</text>
				</view>
				<view class="title-right">
					<view class="evaluate"><text>商品券</text></view>
				</view>
			</view>
		</view>
		<view class="row b-b flex">
			<text class="tit">订单总价</text>
			<view class="input">￥{{ item.total_price }}</view>
		</view>
		<view class="row b-b flex">
			<text class="tit">邮费</text>
			<view class="input">{{ item.pay_postage > 0 ? '￥' + item.pay_postage : '免邮费' }}</view>
		</view>
		<view class="row b-b flex" v-if="item.isBuyVip == 1">
			<text class="tit">开通会员</text>
			<view class="input">{{item.vipBuyPrice}}</view>
		</view>
		<view class="row b-b flex" v-if="item.coupon_id > 0">
			<text class="tit">优惠券</text>
			<view class="input">-￥{{ item.coupon_price }}</view>
		</view>
		<view class="row b-b flex" v-if="item.use_integral > 0">
			<text class="tit">积分抵扣</text>
			<view class="input">-￥{{ item.use_integral }}</view>
		</view>
		<view class="row b-b flex">
			<text class="tit ">实付</text>
			<view class="input payColor">￥{{ item.pay_price }}</view>
		</view>

		<view class="orderDetialBox">
			<view class="f-header m-t">
				<view class="f-left-icon"></view>
				<view class="tit-box"><text class="tit">订单信息</text></view>
			</view>
			<view class="item flex">
				<view class="title-left flex">
					<text class="title">订单编号:</text>
					<view class="text">{{ item.order_id }}</view>
				</view>
				<view class="buttom-right" @click="copyOrderId(item.order_id)">复制单号</view>
			</view>
			<view class="item flex">
				<view class="title-left flex">
					<text class="title">送达时间:</text>
					<view class="text">{{ item.estimated_time }}</view>
				</view>
			</view>
			<view class="item flex">
				<view class="title-left flex">
					<text class="title">下单时间:</text>
					<view class="text">{{ item._add_time }}</view>
				</view>
			</view>
			<view class="item flex">
				<view class="title-left flex">
					<text class="title">订单类型:</text>
					<view class="text">{{ item | orderType }}</view>
				</view>
			</view>
			<view class="item flex">
				<view class="title-left flex">
					<text class="title">订单状态:</text>
					<view class="text">{{ status._title }}</view>
				</view>
			</view>
			<view class="item flex">
				<view class="title-left flex">
					<text class="title">支付方式:</text>
					<view class="text">{{ status._payType }}</view>
				</view>
			</view>
		</view>
		<view class="orderDetialBox" v-if="item.delivery_id">
			<view class="item flex">
				<view class="title-left flex">
					<text class="title">配送方式:</text>
					<view class="text">{{ item.delivery_type=='express'?'发货':item.delivery_type=='send'?'送货':'' }}</view>
				</view>
			</view>
			<view class="item flex">
				<view class="title-left flex">
					<text class="title" v-if="item.delivery_type=='express'">快递公司:</text>
					<text class="title" v-if="item.delivery_type=='send'">送货人员:</text>
					<view class="text">{{ item.delivery_name }}</view>
				</view>
			</view>
			<view class="item flex">
				<view class="title-left flex">
					<text class="title" v-if="item.delivery_type=='express'">快递单号:</text>
					<text class="title" v-if="item.delivery_type=='send'">联系方式:</text>
					<view class="text">{{ item.delivery_id }}</view>
				</view>
			</view>
		</view>
		<view v-if="type==0">
			<button open-type="share" class="shareDate"><image src="/static/img/share.png"></image></button>
		</view>
	</view>
</template>
<script>
import { orderDetail } from '@/api/order.js';
import { saveUrl } from '@/utils/loginUtils.js';
export default {
	filters: {
		orderType: function(item) {
			if (item.combination_id > 0) {
				return '拼团订单';
			} else if (item.seckill_id > 0) {
				return '秒杀订单';
			} else if (item.bargain_id > 0) {
				return '砍价订单';
			} else if (item.jl_id > 0) {
				return '接龙订单';
			} else {
				return '普通订单';
			}
		}
	},
	data() {
		return {
			refund: '', //退款理由
			reason: '', //备注
			value: ['1', '2', '3', '4', '5', '6', '7', '8', 9, 10, 11, 12, 13],
			orderId: '',
			item: {},
			status:'',
			gift_info:'',
			addressImg:'/static/img/img35.png',
			real_name:'',
			user_phone:'',
			user_address:'',
			type:0,//判断是否是分享订单
			activityProductInfo:'',
			productCouponInfo:''
		};
	},
	onLoad(option) {
		this.orderId = option.id;
		// 判断有无邀请人
		if (option.spread) {
			uni.setStorageSync('spread', option.spread);
		}
		// 判断是否是分享订单
		if (option.type) {
			this.type = option.type;
			console.log(this.type,"type")
		}
		saveUrl();
		this.loadOrder();
	},
	methods: {
		// 载入订单详细
		loadOrder() {
			orderDetail({}, this.orderId).then(e => {
				this.item = e.data;
				if(e.data.gift_info){
					this.gift_info = JSON.parse(e.data.gift_info);
				}
				if(e.data.productCouponInfo){
					this.productCouponInfo = JSON.parse(e.data.productCouponInfo);
				}
				if(e.data.activityProductInfo){
					this.activityProductInfo = JSON.parse(e.data.activityProductInfo);
				}
				this.real_name = this.item.real_name;
				this.user_phone= this.item.user_phone.replace(/(\d{3})(\d{4})(\d{4})/,"$1****$3");
				this.real_name = this.formatName(this.item.real_name);
				this.user_address = this.formataddress(this.item.user_address);
				this.status = e.data._status;
			});
		},
		myTrim(x) {
		    return x.replace(/^\s+|\s+$/gm,'');
		},
		formatName(name){
			let newStr = '';
			if (name.length === 2) {
				newStr = name.substr(0, 1) + '*';
			} else if (name.length > 2) {
				var char = '';
				for (let i = 0, len = name.length - 2; i < len; i++) {
					char += '*';
				}
				newStr = name.substr(0, 1) + char + name.substr(-1, 1);
			} else {
				newStr = name;
			}
			return newStr;
		},
		formataddress(address){
			let newStr = '';
			if (address.length === 2) {
				newStr = address.substr(0, 1) + '*';
			} else if (address.length > 2) {
				var char = '';
				for (let i = 0, len = address.length - 2; i < len; i++) {
					char += '*';
				}
				newStr = address.substr(0, 10) + char + address.substr(-1, 0);
			} else {
				newStr = address;
			}
			return newStr;
		},
		//分享
		// #ifdef MP
		onShareAppMessage(option){
			let GetInfo = uni.getStorageSync('GetInfo');
			let userInfo = uni.getStorageSync('userInfo');
			// 来自页面内分享按钮
			let pages = getCurrentPages();
			// 获取当前页面
			let page = pages[pages.length - 1];
			let path = page.route+'?id='+this.orderId +'&type=1';
			// 保存邀请人
			let shareObj = {
				path: path,
				imageUrl: 'http://shicai.liuniu946.com/static/img/share-img.jpg',
				title: '我是'+userInfo.nickname+'，刚在美天选菜里下单了！',
				success: function(res) {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {
					}
				},
				fail: function() {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				}
			};
			console.log(shareObj)
			return shareObj;
		},
		// #endif
		//跳转到评价页面
		evaluate(e){
			let unique = e.unique;
			let is_reply = e.is_reply;
			if(is_reply == 0){
				uni.navigateTo({
					url: '/pages/order/evaluate?unique=' + unique
				});
			}else{
				uni.showToast({
					title: '已评价！',
					duration: 1500,
					icon:"none"
				});
			}
			
		},
		ToHome(){
			uni.switchTab({
				url:"/pages/index/index"
			})
		},
		// 复制订单编号
		copyOrderId(text) {
			// #ifndef H5
			uni.setClipboardData({
				data: text,
				success: e => {
					uni.showToast({
						title: '复制成功',
						duration: 1500
					});
				}
			});
			// #endif
			// #ifdef H5
			let inputH = document.querySelector('#copyOrder input');
			// 获取需要复制的文字
			const copyStr = text;
			// 创建input标签存放需要复制的文字
			const oInput = document.createElement('input');
			// 把文字放进input中，供复制
			oInput.value = copyStr;
			// 添加文
			document.body.appendChild(oInput);
			// 选中创建的input
			oInput.select();
			// 执行复制方法， 该方法返回bool类型的结果，告诉我们是否复制成功
			const copyResult = document.execCommand('copy');
			// 操作中完成后 从Dom中删除创建的input
			document.body.removeChild(oInput);
			// 根据返回的复制结果 给用户不同的提示
			if (copyResult) {
				uni.showToast({
					title: '已复制到粘贴板',
					duration: 2000,
					icon:'none'
				});
			} else {
				this.$api.msg('复制失败');
			}
			// #endif
		}
	}
};
</script>

<style lang="scss">
page {
	background: #ffffff;
	height: 100%;
}
button::after{ border: none;} 
.shareDate{
	position: fixed;
	bottom: 7%;
	right: 10rpx;
	line-height:150rpx;
	height: 150rpx;
	background-color: #ffffff;
	image{
		width: 150rpx;
		height: 150rpx;
	}
}
// 订单详细
.orderDetialBox {
	margin-top: 20rpx;
	padding: 0 30rpx;
	background-color: #ffffff;
	font-size: $font-base;
	color: $font-color-base;
	.item {
		height: 80rpx;
		.text {
			padding-left: 10rpx;
		}
		.buttom-right {
			width: 180rpx;
			border-radius: 99rpx;
			padding: 10rpx;
			text-align: center;
			border: 1px solid $border-color-light;
		}
	}
}
// 地址信息
.address-box {
	margin-top: 20rpx;
	padding: 30rpx;
	padding-bottom: 35rpx;
	background-color: #ffffff;
	line-height: 1;
	.address-top {
		margin-bottom: 30rpx;
		.title {
			font-size: $font-lg;
			color: $font-color-dark;
		}
		.phone {
			font-size: $font-base;
			color: $font-color-light;
		}
	}
	.addrdss-detail {
		font-size: $font-base;
		color: $font-color-base;
	}
	.a-bg {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 5rpx;
	}
}

.row {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 30rpx;
	height: 80rpx;
	background: #fff;
	.order-status {
		font-size: $font-lg;
		color: $color-red;
		font-weight: 500;
	}
	.refund {
		font-size: 30rpx;
		color: $font-color-dark;
	}
	.noRefund {
		font-size: 30rpx;
		color: $font-color-light;
	}
	.tit {
		flex-shrink: 0;
		width: 120rpx;
		font-size: 30rpx;
		color: $font-color-dark;
	}
	.input {
		text-align: right;
		flex: 1;
		font-size: 30rpx;
		color: $font-color-dark;
		&.payColor {
			color: $color-red;
		}
	}
	.iconlocation {
		font-size: 36rpx;
		color: $font-color-light;
	}
}
.add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690rpx;
	height: 80rpx;
	margin: 60rpx auto;
	font-size: $font-lg;
	color: #fff;
	background-color: $base-color;
	border-radius: 10rpx;
	// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}

/* 多条商品 */
.order-item {
	display: flex;
	flex-direction: column;
	padding:0rpx 30rpx;
	background: #fff;
	margin-top: 20rpx;
	.order-title{
		font-size: 26rpx;
		padding: 25rpx 0rpx;
		border-bottom: 2rpx solid #f0f0f0;
		.name{
			font-size: 32rpx;
		}
		.ToHome{
			background-color: #FA2740;
			color: #FFFFFF;
			padding: 12rpx 25rpx;
			border-radius: 12rpx;
		}
	}
	/* 单条商品 */
	.goods-box-single {
		display: flex;
		padding: 20rpx 0;
		.goods-img {
			display: block;
			width: 120rpx;
			height: 120rpx;
		}
		.title-right {
			flex-shrink: 0;
			text-align: right;
			align-self: flex-start;
			.attr-box {
				font-size: $font-sm + 2rpx;
				color: $font-color-light;
			}
			.price {
				font-size: $font-base + 2rpx;
				color: $font-color-dark;
				&:before {
					content: '￥';
					font-size: $font-sm;
					margin: 0 2rpx 0 8rpx;
				}
			}
			.evaluate{
					color:#FFFFFF;
					font-size: 24rpx;
					display: inline-block;
					text-align: right;
					text{
						background:#FA2740;
						padding: 5rpx 15rpx;
						
					}
			}
			.yesevaluate{
				color:#333333;
				font-size: 24rpx;
				display: inline-block;
				text-align: right;
				text{
					border: 2rpx solid #333333;
					padding: 5rpx 15rpx;
					
				}
			}
		}
		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding:0rpx 15rpx;
			overflow: hidden;
			height: 100%;
			.title {
				font-size: 26rpx;
				color: $font-color-dark;
				width: 100%;
				height: 70rpx;
				overflow:hidden; 
				text-overflow:ellipsis;
				display:-webkit-box; 
				-webkit-box-orient:vertical;
				-webkit-line-clamp:2; 
			}
		}
	}
}
// 标题头
.f-header {
	display: flex;
	align-items: center;
	height: 80rpx;
	.tit-box {
		@extend %font-title-box;
	}
	.tit {
		@extend %font-title;
	}
	.f-left-icon {
		@extend %f-left-icon;
	}
}
</style>