uniapp 学习笔记三十结算页面结构搭建地址列表页面结构搭建_uni-app中编写一个订单结算静态页面-CSDN博客

本文链接：https://blog.csdn.net/gixome/article/details/126808510

本文档展示了如何使用uniapp框架构建订单结算页面和地址列表页面。在order.vue中，详细地呈现了结算页面的UI结构，包括客户信息、配送时间和商品详情。同时，address.vue文件则演示了地址列表的布局，包含地址编辑和删除功能，并提供了一个新增地址的按钮。这两个组件是电商应用中关键的交互元素。

摘要由CSDN通过智能技术生成

uniapp 学习笔记三十结算页面结构搭建地址列表页面结构搭建

order.vue

<template>
    <view>
        <view class="padding flex align-center justify-between">
            <view class="">
                曹国舅,13901099102
                <view class="">
                    北京市 朝阳区 朝阳路周家井
                </view>
            </view>
            <text class="cuIcon-right"></text>
        </view>
        <view class="padding">
            配送时间
        </view>
        <view class="padding flex justify-between">
            <view class="">
                选择配送日期
            </view>
            <view class="">
                选择配送时间
            </view>
        </view>
        <view class="flex padding" v-for="(item,index) in 1">
        	<view class="flex align-center">
        		<!-- <text :class="['iconfont','icon-youxiajiaogouxuan','margin-right',{'yellow':item.isCheck}]"></text> -->
        		<image class="poster margin-right" :src="item.img" mode=""></image>
        	</view>
        	<view class="flex justify-between info">
        		<view class="">
        			<!-- {{item.name}} -->蛋糕
        			<view class="margin-tb-xs">	Fraction	</view>
        			<!-- Y{{item.list[item.idx].price}} -->
        		</view>
        		<view class="flex flex-direction align-end">
        			<view class="edit margin-bottom-xs">
        				<text class="iconfont icon-bianjishuru"></text>
        			</view>
                    <!-- {{item.list[item.idx].spec}} -->
                    X 
                    <!-- {{item.num}} -->
        		</view>
        	</view>
        </view>
        <view class="fixed padding flex justify-between align-center">
            总计
            <view class="">
                199
            </view>
            <button class="cu-btn bg-brown">立即支付</button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            };
        }
    }
</script>

<style lang="scss">
.poster{
    width: 180upx;
    height: 180upx;
    background-color: #d8d8d8;
}
.info{
    width: 60%;
    .edit{
        width: 80upx;
        height: 80upx;
        text-align: center;
        line-height: 80upx;
        background-color: #e6e6e6;
        border-radius: 50%;
    }
}
.flex.align-end{
    min-width: 210upx;
}
.icon-youxiajiaogouxuan{
    color: #e7e7e7;
}
.cu-btn.lg{
    width: 50%;
}
.fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 0 10upx 2upx rgba(0, 0, 0, 0.2);
}
</style>

address.vue

<template>
    <view>
        <view v-for="(item,index) in 3" class="margin-sm u-border padding default">
            <view class="default-cont">默</view>
            <view class="flex justify-between">
                <view class="flex align-center">
                    <text class="iconfont icon-youxiajiaogouxuan margin-right"></text>
                    <view class="">
                       曹国舅,13910199012
                        <view class="">
                            北京市朝阳区朝阳路周家井
                        </view>
                    </view>
                </view>
                <view class="edit margin-bottom-sm">
                    <text class="iconfont icon-bianjishuru"></text>
                </view>
            </view>
            <view class="flex justify-around align-center margin-top">
                <view class="">
                    设为默认
                </view>
                <u-line length="15" direction="col"></u-line>
                <view class="">
                    删除地址
                </view>
            </view>
        </view>
        <view class="text-center">
            <button class="cu-btn bg-brown">新增地址</button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            };
        }
    }
</script>

<style lang="scss">
.edit{
    width: 80upx;
    height: 80upx;
    text-align: center;
    line-height: 80upx;
    background-color: #e6e6e6;
    border-radius: 50%;
}
.icon-youxiajiaogouxuan{
    color: #e7e7e7;
}
.cu-btn.lg{
    width: 50%;
}
.fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 0 10upx 2upx rgba(0, 0, 0, 0.2);
}
.icon-youxiajiaogouxuan{
	width: 50upx;
	height: 50upx;
	text-align: center;
	line-height: 50upx;
	background-color: #e6e6e6;
	border-radius: 20%;
}
.default{
    position: relative;
    overflow: hidden;
}
.default-cont{
    padding: 20upx 10upx 10upx;
    width: 100upx;
    background-color: #fae456;
    font-size: 12upx;
    text-align: center;
    position: absolute;
    top: -20upx;
    right: -40upx;
    transform: rotate(45deg);
}
</style>