uniapp-商城-38-shop 购物车 选好了 进行订单确认4 配送方式1

配送方式在订单确认页面最上方，可以进行选中配送还是自提，这里先看看配送。

代码样式：

可以看出来是通过组件来实现的。组件名字是：delivery-layout

1、建立组件文件夹和页面，delivery-layout这里就只有配送

2、具体代码

<template>
	<view class="delivery">
		<view class="headNav">外送</view>
		<view class="body">
			<view class="box" @click="goAddress">
				<view class="left">收货地址</view>
				<view class="center">
					<view v-if="deliveryInfo.address">
						<view class="detail">{{deliveryInfo.address}}</view>
						<view class="userinfo">{{deliveryInfo.username + "-" + deliveryInfo.mobile}}</view>
					</view>
					
					<view class="addressTxt" v-else>请添加收货地址</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#999" size="18"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"delivery-layout",
		data() {
			return {
				deliveryInfo:{
					address:"北京市海定区颐和园路",
					username:"李晓峰",
					mobile:null
				}
			}
		},
		methods:{
			goAddress(){
				uni.navigateTo({
					url:"/pagesub/pageshop/address/addrlist"
				})
			}
		}
	}
</script>

<style lang="scss">
.delivery{
	.headNav{
		width: 100%;
		height: 78rpx;
		background: #fff;
		@include flex-box-set();
		color:$brand-theme-color;
		border-radius: 15rpx 15rpx 0 0;
	}
	.body{
		background: #fff;
		padding:25rpx;
		.box{
			padding:40rpx 20rpx;
			background: $page-bg-color;
			border-radius: 10rpx;
			font-size: 30rpx;
			@include flex-box();
			.center{
				flex:1;
				padding:0 30rpx;
				font-size: 30rpx;
				.userinfo{
					padding-top:10rpx;
				}
			}
		}
	}
}
</style>

3、解析样式

一共就两部分

头部表示送货方式 要不自提 要不配送

下面就是地址信息（收货地址   地址姓名电话  后面有一个箭头）

具体代码：

3.1 点击切换配送方式 后面做

3.2 点击地址或者箭头，选地址

<view class="box" @click="goAddress">

方法：

		methods:{
			goAddress(){
				uni.navigateTo({
					url:"/pagesub/pageshop/address/addrlist"
				})
			}
		}

3.3 如果没有地址，呈现的是添加地址：

<view class="box" @click="goAddress">
				<view class="left">收货地址</view>
				<view class="center">
					<view v-if="deliveryInfo.address">
						<view class="detail">{{deliveryInfo.address}}</view>
						<view class="userinfo">{{deliveryInfo.username + "-" + deliveryInfo.mobile}}</view>
					</view>
					
					<view class="addressTxt" v-else>请添加收货地址</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#999" size="18"></u-icon>
				</view>
			</view>