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>
相关推荐
LoveEate19 小时前
uniapp 运行/发版微信小程序
微信小程序·小程序·uni-app
fakaifa1 天前
【高级版】沃德政务招商系统源码+uniapp小程序
小程序·uni-app·源码下载·沃德政务招商系统·招商系统源码
weixin_446938871 天前
uniapp vue-i18n如何使用
前端·vue.js·uni-app
有来技术1 天前
UniApp 自定义导航栏适配指南:微信小程序胶囊遮挡、H5 与 App 全端通用方案
微信小程序·uni-app
卷Java2 天前
违规通知功能修改说明
java·数据库·微信小程序·uni-app
卷Java2 天前
用户权限控制功能实现说明
java·服务器·开发语言·数据库·servlet·微信小程序·uni-app
王佳斌3 天前
sass变量默认
uni-app
二饭3 天前
uniapp与webview通信
uni-app
2501_915909063 天前
iOS 抓包工具有哪些?实战对比、场景分工与开发者排查流程
android·开发语言·ios·小程序·uni-app·php·iphone
2501_915918414 天前
iOS 框架全解析,原生框架与跨平台框架对比、开发应用打包与 App Store 上架实战经验
android·ios·小程序·https·uni-app·iphone·webview