qd_81fang/pages/intergalShop/orderDetail.vue

<template>
	<block>
		<!-- <login @onLoginBack="onLoginBack"></login> -->

		<view class="content">
			<view class="orderStatus">
				<image :src="
                        info.state == 2
                            ? 'https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/74354f7d56ad4043e279760e09307bef.png'
                            : info.state == 3
                            ? 'https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/cb6d9cec19387616fa955f95d8470bc5.png'
                            : info.state == 5
                            ? 'https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/f05de1ad262ae8a303f5b38ca2419eae.png'                           
                            : ''
                    "></image>
				<view>
					{{
                        info.state == 2
                            ? '待发货'
                            : info.state == 3
                            ? '待收货'
                            : info.state == 5
                            ? '已完成'
                            : ''
                    }}
				</view>
			</view>



			<view class="p-common">
				<view class="p-list icenterY">
					<text>手机号码</text>
					<text class="cPhone">{{ info.delivery.username }}{{ info.delivery.mobile }}</text>
				</view>
				<view class="p-list">
					<text>收货地址</text>
					<text class="cArea">{{ info.delivery.address }}</text>
					<view class="cDetailAddress">{{ info.receiver_address }}</view>
				</view>
			</view>

			<!--           <view class="p-common iflexC" v-if="info.receive_type == 2">
                <text>物流信息</text>
                <text class="p-con">快递单号：{{ info.deliver_no || '暂无物流信息' }}</text>
                <view class="p-con">
                    <text>快递名称：{{ info.send_comp || '暂无物流信息' }}</text>
                </view>
            </view> -->



			<view class="p-common iflex radiuBot">
				<image class="p-goodsImg" :src="info.products[0].image"></image>
				<view class="p-goods">
					<text class="p-goodsName bold">{{ info.products[0].title }}</text>
					<!-- <text class="p-goodsTips">{{ info.good_info ? info.good_info : '' }}</text> -->
					<view class="p-sku ibetween">
						<!-- <text class="p-red"><text wx:if="{{info.pay_money}}">￥{{info.pay_money}} +</text> {{info.integral}}{{unit}}</text> -->
						<text class="p-con">×{{ info.products[0].number }}</text>
					</view>
				</view>
			</view>

			<view class="p-common radiuTop">
				<view class="ibetween p-list icenterY">
					<text>商品价格：</text>
					<text class="p-con">￥{{ info.products[0].price }}</text>
				</view>
				<view class="ibetween p-list">
					<text>商品积分：</text>
					<text class="p-con">{{ info.products[0].price }}积分</text>
				</view>
				<view class="ibetween p-list">
					<text>运费：</text>
					<text class="p-con">￥{{ info.delivery_price  }}</text>
				</view>
				<view class="ibetween p-list icenterY">
					<text>支付方式：</text>
					<text class="p-con">
						{{ info.remark }}
					</text>
				</view>
				<view class="ibetween p-list">
					<text>实际支付：</text>
					<text class="p-con colorActive">
						<text class="p-red">
							<text v-if="info.delivery_price!='0.00'">￥{{ info.delivery_price }}+</text>
							{{ info.products[0].price}}
						</text>
						积分
					</text>
				</view>
			</view>

			<!-- 			<view class="p-common iflex">
				<text class="message">买家留言：</text>
				<text>{{ info.user_mark ? info.user_mark : '暂无留言' }}</text>
			</view>

			<view class="p-common" v-if="info.is_comment == 1">
				<view class="p-list icenterY">
					<text>买家评价：</text>
					<text class="p-con">{{ info.inorder_comment ? info.inorder_comment.content : '暂无评价' }}</text>
				</view> -->
			<!-- <view class="p-list icenterY">
    <text>商家回复：</text>
    <text class="p-con">{{info.reply ? info.reply : '暂无回复'}}</text>
  </view> -->
  
  
  <view class="orderInfo">
  	<view class="orderInfoTip">订单信息</view>
  
  	<view class="orderItem">
  		<view>下单编号:</view>
  		<view>{{ info.out_trade_no }}</view>
  		<view @tap="copy" :data-on="info.out_trade_no">复制</view>
  	</view>
  
  	<view class="orderItem">
  		<view>下单时间:</view>
  		<view>{{ info.createtime }}</view>
  	</view>
  </view>
		</view>

	



		<view class="p-footer iflex isFixed icenterY"
			v-if="info.state == 3 || info.state == 5">
			<!-- <button wx:if="{{info.integral_money}}" bindtap="backMoney">申请退款</button> -->
			
			

			<button @tap="confirm(id)" v-if="info.state == 3" class="activeBtn1">确认收货</button>

			<button @click.stop="buyNext(info.products[0].id)" v-if="info.state == 5" class="activeBtn2">再次购买</button>






		</view>


	</block>
</template>

<script>
	var app = getApp();


	export default {
		data() {
			return {
				info: {

				},
				id: '',
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {

			this.id = options.id;

			this.getInfo()

		},

		onShow: function() {},

		onPullDownRefresh: function() {
			this.getInfo();
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {

			async confirm(id) {
				// 确认收货
				
				let that = this;
				let [error, res] = await uni.showModal({
					title: '确认收货?'
				});
				if (res.confirm == true) {
					let res = await that.$api.request('/order/received', 'GET', {
						order_id: id,
						type:1
					});
					if (res) {
						that.getInfo()
						
					}
					return true;
				}
				this.$api.msg('收货失败');
				return false;
				
				
				

	
			},
			

			buyNext(id) {

				uni.navigateTo({
					url: `/pages/intergalShop/goodsDetail?id=${id}`
				});
			},



			copy(e) {
				uni.setClipboardData({
					data: e.currentTarget.dataset.on,
					success: function(res) {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					}
				});
			},

			lookOrder() {
				uni.navigateTo({
					url: `/pages/other/logistics/logistics?phone=${this.info.receiver_mobile}&no=${this.info.deliver_no}`
				});
			},






			async getInfo() {



				let data = await this.$api.request('/order/detail', 'GET', {
					type: 1,
					order_id: this.id
				});


				console.log(data)

				this.info = data;


			},


			toPage(e) {
				app.globalData.toPage(e);
			}
		}
	};
</script>
<style>
	/* yidu_tc/pages/jifen/integral/orderDetail/orderDetail.wxss */
	page {
		background: #f4f4f4;
	}

	.content {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 20rpx 120rpx;
	}

	.p-common {
		border-radius: 20rpx;
		padding: 26rpx 30rpx;
		margin-bottom: 20rpx;
		background: white;
		/* width: calc(100% - 132rpx); */
		position: relative;
	}

	.p-common input {
		width: 74%;
	}

	.p-img {
		height: 44rpx;
		width: 44rpx;
		margin-right: 8rpx;
		color: #333;
		vertical-align: top;
	}

	.shareicon {
		position: absolute;
		right: 30rpx;
		top: calc(50% - 8px);
	}

	.p-goods {
		width: 72%;
	}

	.p-goodsImg {
		height: 128rpx;
		width: 128rpx;
		margin-right: 18rpx;
		flex-shrink: 0;
	}

	.p-goodsName {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		display: block;
		font-size: 32rpx;
	}

	.p-goodsTips {
		color: #666;
		font-size: 24rpx;
	}

	.p-con {
		font-size: 24rpx;
		color: #666;
	}

	.p-list {
		border-bottom: 1px solid #f2f2f2;
		padding: 26rpx 0;
	}

	.p-list:first-child {
		padding-top: 0;
	}

	.p-list:last-child {
		border: none;
		padding-bottom: 0;
	}

	.p-red {
		color: #fe6000;
		font-size: 28rpx;
		font-weight: 700;
	}

	.isFixed {
		position: fixed;
		bottom: 32rpx;
	}

	.p-total {
		width: 50%;
		text-align: center;
	}

	.p-btn {
		border: none;
		background: #f62e2e;
		color: white;
		height: 100%;
		border-radius: 0 20rpx 20rpx 0;
		width: 50%;
	}

	.p-common:last-child {
		padding: 0;
		/* width: calc(100% - 72rpx); */
		margin-bottom: 0;
	}

	.bold {
		font-weight: bold;
	}

	input {
		margin-top: -4rpx;
	}

	.p-icon {
		height: 30rpx;
		width: 30rpx;
		margin-right: 8rpx;
		vertical-align: center;
	}

	.p-sku {
		position: absolute;
		bottom: 20rpx;
		width: calc(72% - 30rpx);
	}

	.message {
		flex-shrink: 0;
	}

	.p-footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		background: white;
		height: 100rpx;
		display: flex;
		flex-direction: row-reverse !important;
	}

	button {
		width: 188rpx;
		border-radius: 40rpx;
		border: 1px solid #999;
		background: none;
		color: #666;
		font-size: 28rpx;
		margin-right: 22rpx;
		margin-left: 0;
	}

	button::after {
		border: none;
	}

	.p-common:last-child {
		padding: 26rpx 30rpx !important;
		/* width: calc(100% - 60rpx); */
		margin-bottom: 0;
	}

	.orderStatus {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 12rpx 0 30rpx;
	}

	.orderStatus>image {
		width: 46rpx;
		height: 46rpx;
		margin-top: 8rpx;
	}

	.orderStatus>view {
		font-size: 35rpx;
		font-weight: 700;
		color: #333333;
		margin-left: 16rpx;
	}

	.hxCode {
		display: flex;
		align-items: center;
	}

	.hxCode>view {
		color: #fe6b05;
		font-size: 28rpx;
	}

	.hxCode>image {
		width: 28rpx;
		margin-right: 10rpx;
		margin-top: 4rpx;
	}

	.cPhone {
		font-size: 28rpx;
		color: #333333;
		margin-left: 30rpx;
	}

	.cArea {
		font-size: 28rpx;
		color: #333333;
		margin-left: 30rpx;
	}

	.cDetailAddress {
		color: #666666;
		margin-top: 12rpx;
	}

	.shopInfo {
		padding: 24rpx 24rpx 30rpx 24rpx;
		margin: 18rpx 0rpx;
		border-radius: 20rpx;
	}

	.shopTop-name {
		font-size: 28rpx;
		width: 500rpx;
		color: #000;
	}

	.shopTop-btn {
		width: 83rpx;
		height: 35rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fd6000;
		border: 1px solid #fd6000;
		border-radius: 30rpx;
		font-size: 25rpx;
	}

	.shopBot {
		margin-top: 30rpx;
	}

	.shopTD {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.l-shopTime,
	.l-shopAddress {
		font-size: 25rpx;
		color: #666;
		line-height: 1;
	}

	.l-shopAddress {
		width: 410rpx;
		margin-top: 18rpx;
	}

	.shoploc:first-of-type {
		max-width: 104rpx;
	}

	.shoploc {
		font-size: 20rpx;
		color: #999;
		line-height: 1;
	}

	.shoploc image {
		width: 42rpx;
		height: 42rpx;
		margin-bottom: 12rpx;
	}

	.shopSu {
		height: 48rpx;
		width: 1rpx;
		background: #999999;
		margin: 0 38rpx;
	}

	.radiuBot {
		border-radius: 20rpx 20rpx 0 0 !important;
		margin-bottom: 0;
	}

	.radiuTop {
		border-radius: 0 0 20rpx 20rpx !important;
	}

	.colorActive {
		color: #fe6000;
	}

	.orderInfo {
		margin-top: 20rpx;
		background: #fff;
		border-radius: 20rpx;
		padding-bottom: 20rpx;
	}

	.iflexC {
		display: flex;
		flex-direction: column
	}

	.orderInfoTip {
		padding: 30rpx 30rpx 26rpx 30rpx;
		box-sizing: border-box;
		font-weight: 700;
		font-size: 28rpx;
		color: #333333;
		border-bottom: 1px solid #dcdcdc;
		margin-bottom: 30rpx;
	}

	.orderItem {
		padding: 0rpx 0 0rpx 30rpx;
		display: flex;
		align-items: center;
		margin: 20rpx 0;
	}

	.orderItem>view:nth-child(1) {
		font-size: 26rpx;
		color: #999999;
	}

	.orderItem>view:nth-child(2) {
		font-size: 26rpx;
		color: #333;
		margin-left: 8rpx;
	}

	.orderItem>view:nth-child(3) {
		width: 72rpx;
		height: 34rpx;
		line-height: 34rpx;
		text-align: center;
		border-radius: 12rpx;
		font-size: 25rpx;
		color: #000;
		border: 1px solid #898989;
		margin-left: 22rpx;
	}

	.activeBtn1 {
		background:#FB4C6F;
		color: #fff !important;
		border: none;
	}

	.activeBtn2 {
background:#FB4C6F;
		color: #fff !important;
		border: none;
	}

	.boxWrap {
		width: 524rpx;
		border-radius: 30rpx;
		background: #fff;
	}

	.codeInfo {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background: linear-gradient(to right, #fda401, #fe6b05);
		padding: 35rpx 53rpx 27rpx 17rpx;
		border-radius: 12rpx 12rpx 0 0;
	}

	.codeInfo>image {
		width: 86rpx;
		height: 86rpx;
		border-radius: 12rpx;
	}

	.goodBoxInfo {
		color: #fff;
		margin-left: 18rpx;
	}

	.goodBoxInfo>view:nth-child(1) {
		font-size: 28rpx;
		color: #ffffff;
		font-weight: 700;
	}

	.goodBoxInfo>view:nth-child(2) {
		font-size: 28rpx;
		color: #ffffff;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.codeWrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 33rpx 0;
	}

	.code1 {
		display: flex;
		align-items: center;
	}

	.code1>view:nth-child(1),
	.code1>view:nth-child(3) {
		width: 74rpx;
		height: 1px;
		background: #333333;
	}

	.code1>view:nth-child(2) {
		font-size: 24rpx;
		color: #333;
		font-weight: 700;
		margin: 0 20rpx;
	}

	.hxcodeImg {
		width: 340rpx;
		height: 340rpx;
		margin: 20rpx 0;
	}

	.codeTip {
		font-size: 24rpx;
		color: #333;
	}

	.download {
		width: 351rpx;
		height: 82rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(to right, #fda401, #fe6b05);
		border-radius: 40rpx;
		margin-top: 20rpx;
	}

	.download>view {
		font-size: 31rpx;
		color: #fff;
	}

	.download>image {
		width: 30rpx;
		height: 30rpx;
		margin-left: 24rpx;
	}

	.allBox {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.closeBox {
		width: 50rpx;
		height: 50rpx;
		margin-top: 30rpx;
	}

	.iflex {
		display: flex;
	}

	.icentery,
	.icenterY {
		display: flex;
		align-items: center;
		flex-direction: row;
	}

	.ibetween {
		display: flex;
		justify-content: space-between
	}

	.mengban {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.7);
	}
</style>