From 0d17d9e049b4750a03ca7c8eb7b435b823446def Mon Sep 17 00:00:00 2001
From: Liuyi <candymxq888@outlook.com>
Date: 星期四, 26 九月 2024 18:33:31 +0800
Subject: [PATCH] 添加地址管理，新增地址页，导入tree树形组件
---
pages/address/index.vue | 147 +++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 142 insertions(+), 5 deletions(-)
diff --git a/pages/address/index.vue b/pages/address/index.vue
index ce84ea2..cc4fbc5 100644
--- a/pages/address/index.vue
+++ b/pages/address/index.vue
@@ -1,11 +1,57 @@
<script setup>
-
+ import { ref ,onMounted } from 'vue'
+ const addressList = ref([
+ {name:'张大左',phone:'13512334002',address:'重庆 重庆市 北碚区 互联网产业生态园 2-5-1',checked:true,id:'12'},
+ {name:'张大左',phone:'13512334002',address:'重庆 重庆市 北碚区 互联网产业生态园 2-5-1',checked:true,id:'12'},
+ {name:'张大左',phone:'13512334002',address:'重庆 重庆市 北碚区 互联网产业生态园 2-5-1',checked:true,id:'12'},
+ {name:'张大左',phone:'13512334002',address:'重庆 重庆市 北碚区 互联网产业生态园 2-5-1',checked:true,id:'12'},
+ {name:'张大左',phone:'13512334002',address:'重庆 重庆市 北碚区 互联网产业生态园 2-5-1',checked:true,id:'12'},
+ {name:'张大左',phone:'13512334002',address:'重庆 重庆市 北碚区 互联网产业生态园 2-5-1',checked:true,id:'12'},
+ {name:'',phone:'',address:'',checked:false,id:''},
+ {name:'',phone:'',address:'',checked:false,id:''},
+ {name:'',phone:'',address:'',checked:false,id:''},
+ ])
+ function navTo(){
+ let title = '新增地址'
+ let id = 0
+ uni.navigateTo({
+ url:'/pages/addressAdd/index'
+ })
+ }
</script>
<template>
<view class="container">
<navbar title = '地址管理'></navbar>
<view class="content">
- <view class="main"></view>
+ <view class="main">
+ <block v-for="(item,index) in addressList">
+ <view class="address-item">
+ <view class="user-info">
+ <text>{{item.name}}</text>
+ <text>{{item.phone}}</text>
+ </view>
+ <view class="address-info">{{item.address}}</view>
+ <view class="address-divide"></view>
+ <view class="handel">
+ <view class="handel-left">
+ <radio color = "#4996E3" :value="item.id" :checked="item.checked"></radio>
+ <text>设为默认</text>
+ </view>
+ <view class="handel-right">
+ <view>
+ <image src="../../static/images/address/edit.png" alt=""></image>
+ <text>编辑</text>
+ </view>
+ <view>
+ <image src="../../static/images/address/delete.png" alt=""></image>
+ <text>删除</text>
+ </view>
+ </view>
+ </view>
+ </view>
+ </block>
+ </view>
+ <view class="subBtn" @click="navTo()">新增收货地址</view>
</view>
</view>
</template>
@@ -16,15 +62,106 @@
height: 100vh;
.content{
width: 100%;
- height:calc(100vh - 176rpx);
+ height:calc(100vh - 176rpx - 20rpx);
background:linear-gradient(to top,#FFFFFF,#E8EFFF);
padding-top:20rpx;
.main{
width: 686rpx;
- height:1262rpx;
- background: #ffaaff;
+ height:1162rpx;
margin:0 auto;
+ overflow-y: scroll;
+ // background-color: #a6ffd3;
+ .address-item{
+ width:100%;
+ height:254rpx;
+ padding:20rpx 0 26rpx;
+ box-sizing: border-box;
+ margin-bottom:20rpx;
+ background: #FFFFFF;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items:flex-start;
+ .user-info{
+ width:100%;
+ padding: 0 65rpx;
+ box-sizing: border-box;
+ display: flex;
+ justify-content: space-between;
+ font-weight: 300;
+ font-size: 32rpx;
+ color: #000000;
+ }
+ .address-info{
+ padding: 0 65rpx;
+ box-sizing: border-box;
+ font-weight: 300;
+ font-size: 28rpx;
+ color: #646464;
+ }
+ .address-divide{
+ width: 100%;
+ height: 1rpx;
+ border-bottom:2rpx dashed #D5DDE0;
+ }
+ .handel{
+ width: 100%;
+ padding: 0 65rpx;
+ box-sizing: border-box;
+ display: flex;
+ justify-content: space-between;
+ align-items:flex-start;
+ .handel-left{
+ radio{
+ color: #000000;
+ }
+ text{
+ font-weight: 300;
+ font-size: 32rpx;
+ color: #0088FF;
+ line-height:28rpx;
+ }
+ }
+ .handel-right{
+ width:35%;
+ height:48rpx;
+ display: flex;
+ justify-content:space-between;
+ align-items:center;
+ view{
+ display: flex;
+ align-items:center;
+ image{
+ width:28rpx;
+ height:28rpx;
+ margin-right:10rpx;
+ }
+ text{
+ font-weight: 300;
+ font-size: 24rpx;
+ color: #373737;
+ }
+ }
+ }
+ }
+ }
}
+ .subBtn{
+ width:686rpx;
+ height: 98rpx;
+ // margin-top:100rpx;
+ padding:0 26rpx;
+ box-sizing:border-box;
+ background-color:#5EA1FA;
+ border-radius:50rpx;
+ font-weight: 300;
+ font-size: 36rpx;
+ color: #FFFFFF;
+ line-height:98rpx;
+ text-align: center;
+ letter-spacing: 2rpx;
+ margin: 100rpx auto 0;
+ }
}
}
</style>
--
Gitblit v1.9.3