<template>
	<view class="cart-pages">
		<view class="cart-bar">
			<view>
				<u-image height="40rpx" width="40rpx" src="/static/position.png"></u-image>
			</view>
			<view class="position">
				 <view class="address">陕西省西安市未央区华帝金座A座6楼</view>
				 <view>王明 1456465455</view>
			</view>
			<view @click="editAddress">
				<u-image height="50rpx" width="50rpx" src="/static/edit.png"></u-image>
			</view>
		</view>
		<view class="goods-list">
			<!-- 商品列表 -->
			<view class="goods-item" v-for="(item,index) in 6" :key="index">
				<view class="goods-imgs">
					<u-image border-radius="12" width="158rpx" height="140rpx" src="/static/goods.png"></u-image>
				</view>
				<view class="goods-info">
					<view class="good-name">拉就是两地分居拉进来就是两地分居拉进来就是两地分居拉进来进来</view>
					<view class="goods-price">
						<view>
							<text>50</text>
							<u-image mode="scaleToFill" width="35rpx" height="35rpx" src="/static/ledou.png"></u-image>
						</view>
						<view>×2</view>
					</view>
				</view>
			</view>
			<!-- 总计 -->
			<view class="goods-heji">
				<view>
					<view>商品合计：</view>
					<view class="heji">
						<text>250</text>
						<u-image mode="scaleToFill" width="35rpx" height="35rpx" src="/static/ledou.png"></u-image>
					</view>
				</view>
				<view>
					<view>运费：</view>
					<view>免运费</view>
				</view>
			</view>
		</view>
		<view class="cart-submit">
			<view>
			  <view>总计：<text>450</text></view>
			  <u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
			</view>
			<view>
				<u-button size="mini" :custom-style="toOrderButton" type="error" @click="toPay">确认支付</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				toOrderButton: {
					borderRadius:'100rpx',
					fontSize:'30rpx',
					width: '180rpx',
					height: '60rpx'
				}
			};
		},
		onLoad() {
			this.getLocation()
		},
		methods: {
			// 获取用户位置
			getLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log(res, 'location success')
					},
					// 定位失败默认展示青海西宁位置地图
					fail: (err) => {
						 console.log(err,'location error')
					}
				});
			},
			//立即下单
			toPay(){
				
			},
			//修改收货地址信息
			editAddress(){
				uni.navigateTo({
					url:"/pages/toOrder/editAddress"
				})
			}
		},
	}
</script>

<style lang="scss">
page{
	height: 100%;
}
.cart-pages{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	.cart-bar{
		background: #FFFFFF;
		border-bottom: 1px solid #F8F8F8;
		border-top: 10upx solid #F8F8F8;
		display: flex;
		align-items: center;
		padding:15upx 20upx;
		.position{
			flex-grow: 1;
		}
		> view{
			padding: 10upx;
			.address{
				padding: 5upx 0;
			}
			&:last-child{
				padding: 0 20upx;
			}
		}
	}
	.goods-list{
		padding: 20upx 0;
		flex-grow: 1;
		overflow: auto;
		.goods-class-box{
			background: #FFFFFF;
			box-shadow: 1px 1px 3px #eee;
			margin-bottom: 20upx;
		}
		
		.goods-item{
			padding: 20upx 40upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #F8F8F8;
			background: #fff;
			&:last-child{
				border: 0;
			}
			.goods-imgs{
				position: relative;
			}
			.goods-info{
				padding-left: 20upx;
				.good-name{
					font-weight: bold;
				}
			}
			.goods-price{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 20upx;
				>view{
					&:first-child{
						display: flex;
						align-items: center;
						text{
							color: red;
							font-size: 35upx;
							margin-right: 6upx;
							font-weight: bold;
						}
					}
				}
			}
		}
	}
	.goods-heji{
		padding: 20upx 40upx;
		background: #FFFFFF;
		box-shadow: 1px 1px 3px #eee;
		margin-top: 20upx;
		>view{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10upx 0;
			.heji{
				display: flex;
				align-items: center;
				text{
					color: red;
					margin-right: 6upx;
					font-size: 35upx;
					font-weight: bold;
				}
			}
		}
	}
	.cart-submit{
		padding: 20upx 30upx;
		background: #FFFFFF;
		box-shadow: 1px 1px 3px #eee;
		border-top: 1px solid #eee;
		display: flex;
		align-items: center;
		justify-content: space-between;
		> view{
			&:first-child{
				display: flex;
				align-items: center;
				text{
					color: red;
					font-size: 40upx;
					margin-right: 6upx;
					font-weight: bold;
				}
			}
		}
	}
}
</style>
