sailun-tbr-web/pages/home/integral-mall/integral_mall_confirmorder.vue

<template>
	<view>
		<!-- 确认订单 -->
		<view class="content-top">
			<view class="addressInfo" >
				<view class="top">
					<view class="name">{{ addressInfo.name }}</view>
					<view class="phone">{{ addressInfo.phone }}</view>
				<!-- 	<view class="tag">
						<text v-for="(item, index) in addressInfo.tag" :key="index" :class="{red:item.tagText=='默认'}">{{ item.tagText }}</text>
					</view> -->
				</view>
				<view class="bottom">
					{{addressInfo.site}}
					<u-icon name="edit-pen" :size="40" color="#999999" @click="handleSelecAddress"></u-icon>
				</view>
			</view>
		</view>
		<view class="content-center">
			<view class="order">
				<view class="item" v-for="(item, index) in list" :key="index">
					<view class="left"><image :src="item.image" mode="aspectFill"></image></view>
					<view class="content">
						<view class="title u-line-2">{{ item.title }}</view>
						<view class="type">{{ item.type }}</view>
						<!-- <view class="delivery-time">发货时间 {{ item.deliveryTime }}</view> -->
						<view class="price-row">
							<view class="count-text">
								数量
							</view>
							<view class="count">
								×{{ item.count }}
							</view>
						</view>
						<view class="price">
							{{ item.price }}积分
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<view class="navigation">
			<view class="left">
				<view class="item">
					<view class="total">合计：<text style="color: #ff7900;">2条</text></view>
				</view>
			</view>
			<view class="right">
				<view class="buy btn u-line-1" @click="handleSubmit">立即兑换</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressInfo: {
					id: 1,
					name: '游学中华',
					phone: '18323455233',
					tag: [
						{
							tagText: '默认'
						},
						{
							tagText: '家'
						}
					],
					site: '广东省深圳市宝安区 自由路66号'
				},
				list: [{
						price: 35,
						title: '175/70R14 88T XL SH08 BGSL',
						count: '100',
						image: 'https://img12.360buyimg.com/n7/jfs/t16642/126/2693663818/450163/6879e8ce/5b06d93bN6305bd94.png',
					},
					{
						price: 75,
						title: '175/70R14 88T XL SH08 BGSL',
						count: '100',
						image: 'https://img12.360buyimg.com/n7/jfs/t1/47645/22/6120/140457/5d3d17deEec9f8e8d/3687ff03ca89b48c.jpg',
					},
					{
						price: 385,
						title: '175/70R14 88T XL SH08 BGSL',
						count: '100',
						image: 'https://img11.360buyimg.com/n7/jfs/t1/88990/24/4208/105799/5de4c6e9E24bc09d0/f810effb14c9c13a.jpg',
					},
					{
						price: 784,
						title: '175/70R14 88T XL SH08 BGSL',
						count: '100',
						image: 'https://img12.360buyimg.com/n7/jfs/t1/93698/23/4500/114562/5de713dfEfc997085/e8deaa979909851d.jpg',
					},
					{
						price: 7891,
						title: '175/70R14 88T XL SH08 BGSL',
						count: '100',
						image: 'https://img11.360buyimg.com/n7/jfs/t16642/126/2693663818/450163/6879e8ce/5b06d93bN6305bd94.png',
					},
					{
						price: 2341,
						count: '100',
						title: '175/70R14 88T XL SH08 BGSL',
						image: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
					},
					{
						price: 661,
						count: '100',
						title: '175/70R14 88T XL SH08 BGSL',
						image: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
					},
					{
						price: 1654,
						title: '175/70R14 88T XL SH08 BGSL',
						count: '100',
						image: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
					},
					{
						price: 1678,
						title: '175/70R14 88T XL SH08 BGSL',
						count: '100',
						image: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
					},
					{
						price: 924,
						title: '175/70R14 88T XL SH08 BGSL',
						count: '100',
						image: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
					},
					{
						price: 8243,
						title: '175/70R14 88T XL SH08 BGSL',
						count: '100',
						image: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
					},
				]
			}
		},
		methods: {
			handleSubmit: function(){
				
			},
			handleSelecAddress: function(){
				uni.navigateTo({
					url: "/pages/me/address"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-top{
		background-color: #0094FE;
		padding-bottom: 119rpx;
		.addressInfo {
			padding: 40rpx 20rpx;
			background-color: #FFFFFF;
			width: 712rpx;
			margin: 0 auto;
			border-radius: 20rpx;
			.top {
				display: flex;
				font-weight: bold;
				font-size: 34rpx;
				.phone {
					margin-left: 60rpx;
				}
				.tag {
					display: flex;
					font-weight: normal;
					align-items: center;
					text {
						display: block;
						width: 60rpx;
						height: 34rpx;
						line-height: 34rpx;
						color: #ffffff;
						font-size: 20rpx;
						border-radius: 6rpx;
						text-align: center;
						margin-left: 30rpx;
						background-color:rgb(49, 145, 253);
					}
					.red{
						background-color:red
					}
				}
			}
			.bottom {
				display: flex;
				margin-top: 20rpx;
				font-size: 28rpx;
				justify-content: space-between;
				color: #999999;
			}
		}
	}
	.content-center{
		width: 712rpx;
		margin: -106rpx auto 0 auto;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 26rpx;
		.order {
			background-color: #ffffff;
			// margin: 20rpx auto;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 20rpx;
			font-size: 28rpx;
			.top {
				display: flex;
				justify-content: space-between;
				.left {
					display: flex;
					align-items: center;
					.store {
						margin: 0 10rpx;
						font-size: 32rpx;
						font-weight: bold;
					}
				}
				.right {
					color: $u-type-warning-dark;
				}
			}
			.item {
				display: flex;
				margin: 20rpx 0 0;
				.left {
					margin-right: 20rpx;
					image {
						width: 200rpx;
						height: 200rpx;
						border-radius: 10rpx;
					}
				}
				.content {
					.title {
						font-size: 28rpx;
						line-height: 50rpx;
					}
					.type {
						margin: 10rpx 0;
						font-size: 24rpx;
						color: $u-tips-color;
					}
					.delivery-time {
						color: #e5d001;
						font-size: 24rpx;
					}
					.price-row{
						display: flex;
						justify-content: space-between;
						margin: 10rpx 0;
						font-size: 26rpx;
						.price{
							color: #FF0000;
						}
						.exchange{
							background: #0094FE;
							color: #FFFFFF;
							padding: 4rpx 16rpx;
							line-height: 1.5;
						},
						.count-text{
							color: #999999;
							font-size: 18rpx;
						}
						.count{
							color: #999999;
							font-size: 18rpx;
						}
					}
				}
				.right {
					margin-left: 10rpx;
					padding-top: 20rpx;
					text-align: right;
					.decimal {
						font-size: 24rpx;
						margin-top: 4rpx;
					}
					.number {
						color: $u-tips-color;
						font-size: 24rpx;
					}
				}
			}
			.total {
				margin-top: 20rpx;
				text-align: right;
				font-size: 24rpx;
				.total-price {
					font-size: 32rpx;
				}
			}
			.bottom {
				display: flex;
				margin-top: 40rpx;
				padding: 0 10rpx;
				justify-content: space-between;
				align-items: center;
				.btn {
					line-height: 52rpx;
					width: 160rpx;
					border-radius: 26rpx;
					border: 2rpx solid $u-border-color;
					font-size: 26rpx;
					text-align: center;
					color: $u-type-info-dark;
				}
				.evaluate {
					color: $u-type-warning-dark;
					border-color: $u-type-warning-dark;
				}
			}
		}
	}
.navigation {
		display: flex;
		width: 100%;
		justify-content: space-between;
		margin-top: 100rpx;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx 0;
		position: fixed;
		bottom: 0;
		z-index: 100;
		.left {
			display: flex;
			// font-size: 20rpx;

			.item {
				margin: 0 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.total{
					font: 34rpx;
				}	
				&.car {
					text-align: center;
					position: relative;

					.car-num {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
					}
				}
			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;

			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
			}

			.cart {
				background-color: #ed3f14;
				margin-right: 30rpx;
			}

			.buy {
				margin: 0 16rpx;
				background-color: #ff7900;
			}
		}
	}
</style>