xusfood_client/shopping/submitorder.vue

<template>
    <view class="">
		<u-navbar
			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">默认</text>广东省广州市越秀区
        		</view>
				<view class="center">顶峰路334号腾讯大厦32楼3002号</view>
				<view class="bottom">张小娴 185 4568 8877</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>
		<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">
						待支付：¥4322.00
					</view>
				</view>
				<view class="btn">去结算</view>
			</view>
		</view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
				useIntegral:false,
            }
        },
		onLoad(page) {
			console.log('page',page);
		},
        methods: {
			leftClick(e){
				console.log('leftClick',e);
			},
			integralCheckboxChange(e){
				this.useIntegral = e[0] && e[0] === 'integral' ? true : false;
			},
			selectAddr(){
				uni.$u.route('/pages/center/addrlist', {
					from: 'submitorder'
				});
			}
        }
    }
</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: 16rpx;
		font-size: 36rpx;
		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;
		}
	}
}
</style>