新增页面

src/pages/mine/subs/address/add-address.vue

@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script lang='ts' setup>
+
+</script>
+
+<style lang='scss' scoped>
+
+</style>

src/pages/mine/subs/address/address-list.vue

@@ -0,0 +1,35 @@
+<template>
+  <view class='content'>
+    <scroll-view :scroll-y='true'>
+      <address-item v-for='(item,index) in addressList' :key='index' :item='item' />
+    </scroll-view>
+
+    <view class='bottom-button-view'>
+      <button class='primary-button' @click.stop='goPath("add-address")'>+新增地址</button>
+    </view>
+  </view>
+</template>
+
+<script lang='ts' setup>
+
+import AddressItem from './components/address-item.vue';
+import { goPath } from '@/utils';
+
+const addressList = ref<{
+  name: string,
+  mobile: string,
+  address: string,
+  status: number
+}[]>([{
+  name: '黄先生',
+  mobile: '13xxxxxx8900',
+  status: 1
+}, {
+  name: '李先生',
+  mobile: '13xxxxxx8900',
+  status: 0
+}]);
+</script>
+
+<style lang='scss' scoped>
+</style>

src/pages/mine/subs/address/components/address-item.vue

@@ -0,0 +1,92 @@
+<template>
+  <view class='card-view'>
+    <view class='c-flex-row'>
+      <text>默认</text>
+      <text>
+        黄先生
+        <!--        {{ item.name }}-->
+      </text>
+      <text>
+        13xxxxxx8900
+        <!--        {{ item.mobile }}-->
+      </text>
+    </view>
+    <text class='address'>
+      湖南省 长沙市 雨花区 地址地址地址
+            {{ item.address }}
+    </text>
+
+    <view class='btn-view c-flex-row'>
+      <text>编辑</text>
+      <text>删除</text>
+    </view>
+  </view>
+</template>
+
+<script lang='ts' setup>
+
+defineProps({
+  item: <any>[]
+});
+</script>
+
+<style lang='scss' scoped>
+.card-view {
+  margin: 20rpx 30rpx;
+  padding: 38rpx 30rpx 30rpx 34rpx;
+
+  view:nth-of-type(1) {
+    text:nth-of-type(1) {
+      border-radius: 5rpx;
+      border: 1rpx solid #F32B2B;
+      color: #F32B2B;
+      font-size: 24prx;
+      padding: 1rpx 8rpx;
+    }
+
+    text:nth-of-type(2) {
+      font-size: 32rpx;
+      font-weight: bold;
+      margin-left: 10rpx;
+      color: #333333;
+    }
+
+    text:nth-of-type(3) {
+      font-size: 32rpx;
+      font-weight: bold;
+      margin-left: 20rpx;
+      color: #333333;
+    }
+  }
+
+  .address {
+    font-size: 26rpx;
+    font-weight: 400;
+    margin-top: 10rpx;
+    color: #999999;
+  }
+
+  .btn-view {
+    display: flex;
+    align-self: flex-end;
+    align-items: center;
+
+    text:nth-of-type(n+1) {
+      display: flex;
+      width: 84rpx;
+      height: 48rpx;
+      border-radius: 24rpx;
+      border: 1rpx solid #F32B2B;
+      align-items: center;
+      justify-content: center;
+      color: #F32B2B;
+      margin-left: 20rpx;
+    }
+
+    text:nth-of-type(2) {
+      border: 1rpx solid #DDDDDD;
+      color: #666666;
+    }
+  }
+}
+</style>