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

Bertha 。 2024-04-05 05:42 77阅读 0赞

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

![9e64bb22343841698371e4ff2597ba36.png][]![2f9a8f9e06ed484a9417da0bfc2018f9.png][]

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">
            		
            		<image class="poster margin-right" :src="item.img" mode=""></image>
            	</view>
            	<view class="flex justify-between info">
            		<view class="">
            			蛋糕
            			<view class="margin-tb-xs">	Fraction	</view>
            			
            		</view>
            		<view class="flex flex-direction align-end">
            			<view class="edit margin-bottom-xs">
            				<text class="iconfont icon-bianjishuru"></text>
            			</view>
                        
                        X 
                        
            		</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>

[9e64bb22343841698371e4ff2597ba36.png]: https://img-blog.csdnimg.cn/9e64bb22343841698371e4ff2597ba36.png
[2f9a8f9e06ed484a9417da0bfc2018f9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/16a2ddb6c40b4c6c838ce5a8e4c4765a.png