xusfood_client/shopping/orderdetails.vue

<template>
    <view class="">
		<u-navbar
			:title="title"
			@leftClick="leftClick"
			:autoBack="true"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
        <view class="addr page-wrap u-flex u-row-between">
        	<view class="left">
        		<view class="top">
        			<text class="label" v-if="isDefaultAddr">默认</text>{{theAddr.address}}
        		</view>
				<view class="center">{{theAddr.receiveAdress}}</view>
				<view class="bottom">{{theAddr.receiveName}} {{theAddr.receivePhone}}</view>
        	</view>
			<!-- <u-icon name="arrow-right" color="#676767" size="20" @click="selectAddr"></u-icon> -->
        </view>
		<!-- <view class="payway page-wrap u-flex u-row-between">
			<view class="left">支付方式</view>
			<view class="u-flex">
				微信支付
				<u-icon name="arrow-right" color="#676767" size="20"></u-icon>
			</view>
		</view> -->
		<view class="order-product page-wrap">
			<view class="product u-flex" v-for="(item,index) in dataList" :key="item.id">
				<u--image :showLoading="true" :src="item.mainImg" width="180rpx" height="180rpx"></u--image>
				<view class="text">
					<view class="up">
						<view class="name ellipsis-2">{{item.goodsName}}</view>
						<view class="info">
							{{item.specification}}
							{{item.unit}}
						</view>
					</view>
					<view class="down u-flex u-row-between">
						<view class="left">
							<view class="" v-if="vuex_member_info.levelType>1">
								<text class="price">¥ <text class="price-num">{{item.vipPrice}}</text></text>
								<text class="vip-icon">VIP</text>
								<text class="original-price gray line-through">¥ {{item.salePrice}}</text>
							</view>
							<view class="" v-else>
								<text class="price">¥ <text class="price-num">{{item.salePrice}}</text></text>
							</view>
						</view>
						<u-number-box v-model="item.quantity" @change="changeQuantity(index, $event)" integer></u-number-box>
					</view>
				</view>
			</view>
		</view>
		<view class="page-wrap order-reduced">
			<view class="reduced-item u-flex u-row-between u-border-bottom">
				<view class="left">
					<text>优惠券</text>
					<text class="label">已选一张</text>
				</view>
				<view class="right u-flex">
					<text class="price red">-¥ <text class="price-num">1000</text></text>
					<!-- <u-icon name="arrow-right" color="#676767" size="20"></u-icon> -->
				</view>
			</view>
			<view class="reduced-item integral u-flex u-row-between">
				<view class="left">
					<text>积分</text>
					<text class="num">3676</text>
					<text class="tip">满1000可用</text>
				</view>
				<view class="right u-flex">
					<text class="price red" v-if="useIntegral">-¥ <text class="price-num">1000</text></text>
					<u-checkbox-group @change="integralCheckboxChange">
						<u-checkbox shape="circle" activeColor="#02AB35" name="integral" ></u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
		</view>
		<view class="page-wrap total">
			<view class="total-item u-flex u-row-between u-border-bottom">
				<view class="left">
					商品金额
				</view>
				<view class="right">
					¥2399.00
				</view>
			</view>
			<view class="total-item u-flex u-row-between">
				<view class="left">
					运费
					<text class="gray">总重：40kg</text>
				</view>
				<view class="right">
					+ ¥2399.00
				</view>
			</view>
		</view>
		<view class="cart-bottom">
			<view class="inner u-flex u-row-between">
				<view class="left u-flex">
					<view class="total-price">
						待支付：<text class="red">¥4322.00</text>
					</view>
				</view>
				<view class="btn">去结算</view>
			</view>
		</view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
				id:'',
				title:'订单详情',
				fromPage:'',
				useIntegral:false,
				dataList:[],
				theAddr:{},
				isDefaultAddr:false,
            }
        },
		onLoad(page) {
			// console.log('page',page);
			this.id = page.id;
		},
		onShow() {
		},
        methods: {
			leftClick(e){
				console.log('leftClick',e);
			},
        }
    }
</script>
<style>
	page{
		background-color: #F5F5F5;
		/* padding-top: 50px; */
	}
</style>
<style lang="scss" scoped>
.page-wrap{
	background-color: #fff;
	margin-bottom: 20rpx;
}
.addr{
	.top{
		margin-bottom: 16rpx;
		font-size: 26rpx;
		color: #999;
		.label{
			background-color: #FFEBEB;
			border: 1px solid #FF5F62;
			color: #FF5F62;
			padding: 5rpx 20rpx;
			border-radius: 30rpx;
			margin-right: 10rpx;
		}
	}
	.center{
		margin-bottom: 10rpx;
		font-size: 30rpx;
		color: #333;
		line-height: 50rpx;
		font-weight: 600;
	}
	.bottom{
		font-size: 30rpx;
		color: #666;
	}
}
.order-reduced{
	.reduced-item{
		padding-bottom: 30rpx;
		&:not(:last-child){
			margin-bottom: 30rpx;
		}
		.label{
			border-radius: 2px;
			border: 1px solid #FF3C3F;
			margin-left: 20rpx;
			font-size: 20rpx;
			color: #FF3C3F;
			padding: 0 10rpx;
		}
	}
	.integral{
		.num{
			font-size: 30rpx;
			color: #02AB35;
			font-weight: 600;
			margin-left: 30rpx;
			margin-right: 16rpx;
		}
		.tip{
			font-size: 24rpx;
			color: #999;
		}
		.price{
			margin-right: 10rpx;
		}
	}
}
.total{
	.total-item{
		padding-bottom: 30rpx;
		&:not(:last-child){
			margin-bottom: 30rpx;
		}
		.right{
			font-weight: 600;
		}
	}
	.gray{
		font-size: 24rpx;
		margin-left: 15rpx;
	}
}
.cart-bottom{
	height: 98rpx;
	.inner{
		position: fixed;
		background-color: #fff;
		height: 98rpx;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0 20rpx;
		.total-price{
			font-size: 30rpx;
			color: #333;
			font-weight: 600;
			margin-left: 30rpx;
		}
		.btn{
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50rpx;
			padding: 0 50rpx;
			background-color: #FF3C3F;
			color: #fff;
			text-align: center;
		}
	}
}
.product{
	.text{
		.name{
			height: auto;
		}
		.info{
			font-size: 24rpx;
			font-weight: 400;
			color: #666666;
		}
	}
}
</style>