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

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

代码样式:

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

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

2、具体代码

html 复制代码
<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">

方法:

javascript 复制代码
		methods:{
			goAddress(){
				uni.navigateTo({
					url:"/pagesub/pageshop/address/addrlist"
				})
			}
		}

3.3 如果没有地址,呈现的是添加地址:

html 复制代码
<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>
相关推荐
摸鱼一级选手2 小时前
uni-app 常用钩子函数:从场景到实战,掌握开发核心
前端·vue.js·uni-app
2501_9151063211 小时前
移动端网页调试实战,iOS WebKit Debug Proxy 的应用与替代方案
android·前端·ios·小程序·uni-app·iphone·webkit
用户69903048487520 小时前
uniapp 构建本地txt跨平台小程序、h5、app通用
微信小程序·uni-app
胡八一1 天前
使用qianjkun uniapp 主应用 集成 vue微应用
前端·vue.js·uni-app
游戏开发爱好者81 天前
基于uni-app的iOS应用上架,从打包到分发的全流程
android·ios·小程序·https·uni-app·iphone·webview
ᥬ 小月亮1 天前
Uniapp中自定义导航栏
javascript·css·uni-app
vayy2 天前
uniapp中 ios端 scroll-view 组件内部子元素z-index失效问题
前端·ios·微信小程序·uni-app
FAIRY_STARS2 天前
记录uni-app好用的select组件
uni-app
FAIRY_STARS2 天前
关于uni-app pages.json配置详解
uni-app
FliPPeDround2 天前
🚀 定义即路由:definePage宏如何让uni-app路由配置原地起飞?
前端·vue.js·uni-app