|
@@ -1,225 +1,229 @@
|
|
- <template>
|
|
|
|
- <view class="box">
|
|
|
|
- <view class="address-list">
|
|
|
|
- <up-radio-group v-model="radioValue" @change="handleChane">
|
|
|
|
- <view v-for="(item, index) in dataList" :key="index" class="address-item">
|
|
|
|
- <!-- 左侧单选框 -->
|
|
|
|
- <view class="radio-group">
|
|
|
|
- <up-radio shape="circle" activeColor="red" :name="item.addressId"></up-radio>
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
- <!-- 中间内容区(自动伸缩) -->
|
|
|
|
- <view class="content-wrapper">
|
|
|
|
- <view class="address-line">
|
|
|
|
- <text class="address-text">
|
|
|
|
- {{ item.provinceName }}{{ item.cityName }}{{ item.districtName }}
|
|
|
|
- </text>
|
|
|
|
- </view>
|
|
|
|
- <view class="contact-info">
|
|
|
|
- <text class="name">{{ item.name }}</text>
|
|
|
|
- <text class="phone">{{ item.telephone }}</text>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
- <!-- 右侧编辑图标(固定宽度) -->
|
|
|
|
- <view class="edit-icon" @click="hadlClickTo(item)">
|
|
|
|
- <up-icon name="edit-pen" size="16"></up-icon>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- </up-radio-group>
|
|
|
|
- </view>
|
|
|
|
- <!-- 底部新增按钮 -->
|
|
|
|
- <view class="add-bottom-btn" @click="handlHeader">
|
|
|
|
- <view class="add-bottom-btn-inner">
|
|
|
|
- <text class="plus">+</text>
|
|
|
|
- <text>新增收货地址</text>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- </template>
|
|
|
|
-
|
|
|
|
- <script setup>
|
|
|
|
- import {
|
|
|
|
- onMounted,
|
|
|
|
- ref
|
|
|
|
- } from 'vue'
|
|
|
|
- import {
|
|
|
|
- addressList
|
|
|
|
- } from "@/api/userSettings.js"
|
|
|
|
-
|
|
|
|
- const radioValue = ref(null)
|
|
|
|
- const dataList = ref([])
|
|
|
|
- const total = ref(0)
|
|
|
|
- const addressId = ref('')
|
|
|
|
- const onLoadOptions = ref({})
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- const handlHeader = () => {
|
|
|
|
- uni.navigateTo({
|
|
|
|
- url: `/pages_home/pages/setupUser/Address`
|
|
|
|
- });
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- const props = defineProps({
|
|
|
|
- modelValue: {
|
|
|
|
- type: Boolean,
|
|
|
|
- default: false
|
|
|
|
- },
|
|
|
|
- addressInfo: {
|
|
|
|
- type: Object,
|
|
|
|
- default: () => {}
|
|
|
|
- },
|
|
|
|
- })
|
|
|
|
- const emits = defineEmits([
|
|
|
|
- 'update:modelValue',
|
|
|
|
- 'update:addressInfo'
|
|
|
|
- ])
|
|
|
|
-
|
|
|
|
- function handleChane(addressId, item) {
|
|
|
|
- const selectedItem = dataList.value.find(item => item.addressId === addressId);
|
|
|
|
- emits('update:modelValue', false)
|
|
|
|
- emits('update:addressInfo',selectedItem)
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- onMounted(() => {
|
|
|
|
- getListData()
|
|
|
|
- })
|
|
|
|
-
|
|
|
|
- const getListData = async () => {
|
|
|
|
- const res = await addressList()
|
|
|
|
- dataList.value = res.rows
|
|
|
|
- total.value = res.total
|
|
|
|
- }
|
|
|
|
- </script>
|
|
|
|
-
|
|
|
|
- <style lang="scss">
|
|
|
|
- .box {
|
|
|
|
- height: 100vh;
|
|
|
|
- width: 100vw;
|
|
|
|
- position: fixed;
|
|
|
|
- top: 0;
|
|
|
|
- left: 0;
|
|
|
|
- z-index: 999999;
|
|
|
|
- background: #f0f0f0;
|
|
|
|
- display: flex;
|
|
|
|
- flex-direction: column;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .address-list {
|
|
|
|
- flex: 1;
|
|
|
|
- overflow-y: auto;
|
|
|
|
- padding: 0 0 120rpx 0;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .footer {
|
|
|
|
- position: fixed;
|
|
|
|
- left: 0;
|
|
|
|
- right: 0;
|
|
|
|
- bottom: 0;
|
|
|
|
- background: transparent;
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: center;
|
|
|
|
- align-items: center;
|
|
|
|
- padding-bottom: env(safe-area-inset-bottom);
|
|
|
|
- z-index: 1000;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .add-item {
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- justify-content: center;
|
|
|
|
- gap: 10rpx;
|
|
|
|
- background: #fff;
|
|
|
|
- border-radius: 40rpx;
|
|
|
|
- box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.06);
|
|
|
|
- padding: 0 40rpx;
|
|
|
|
- height: 80rpx;
|
|
|
|
- margin: 20rpx 0 30rpx 0;
|
|
|
|
- font-size: 30rpx;
|
|
|
|
- color: #222;
|
|
|
|
- font-weight: 500;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .add-item text {
|
|
|
|
- font-size: 30rpx;
|
|
|
|
- color: #222;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .address-item {
|
|
|
|
- display: flex;
|
|
|
|
- align-items: flex-start;
|
|
|
|
- padding: 24rpx 0;
|
|
|
|
- border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
- background: transparent;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .radio-group {
|
|
|
|
- flex-shrink: 0;
|
|
|
|
- /* 禁止压缩 */
|
|
|
|
- margin-right: 20rpx;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .content-wrapper {
|
|
|
|
- flex: 1;
|
|
|
|
- min-width: 0;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .edit-icon {
|
|
|
|
- flex-shrink: 0;
|
|
|
|
- margin-left: 330rpx;
|
|
|
|
- padding: 8rpx;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .address-text {
|
|
|
|
- display: inline-block;
|
|
|
|
- max-width: 100%;
|
|
|
|
- font-size: 32rpx;
|
|
|
|
- font-weight: 500;
|
|
|
|
- white-space: nowrap;
|
|
|
|
- overflow: hidden;
|
|
|
|
- text-overflow: ellipsis;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .contact-info {
|
|
|
|
- display: flex;
|
|
|
|
- gap: 20rpx;
|
|
|
|
- margin-top: 8rpx;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .name,
|
|
|
|
- .phone {
|
|
|
|
- font-size: 28rpx;
|
|
|
|
- color: #666;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .add-bottom-btn {
|
|
|
|
- position: fixed;
|
|
|
|
- left: 0;
|
|
|
|
- bottom: 0;
|
|
|
|
- width: 100vw;
|
|
|
|
- background: #fff;
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: center;
|
|
|
|
- align-items: center;
|
|
|
|
- padding: 24rpx 0 32rpx 0;
|
|
|
|
- z-index: 10;
|
|
|
|
- box-shadow: 0 -2rpx 8rpx rgba(0,0,0,0.03);
|
|
|
|
- }
|
|
|
|
- .add-bottom-btn-inner {
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- font-size: 30rpx;
|
|
|
|
- color: #222;
|
|
|
|
- font-weight: 500;
|
|
|
|
- background: #fff;
|
|
|
|
- border-radius: 40rpx;
|
|
|
|
- padding: 8rpx 32rpx;
|
|
|
|
- box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
|
|
|
|
- }
|
|
|
|
- .add-bottom-btn-inner .plus {
|
|
|
|
- font-size: 38rpx;
|
|
|
|
- color: #f5b400;
|
|
|
|
- margin-right: 12rpx;
|
|
|
|
- }
|
|
|
|
- </style>
|
|
|
|
|
|
+<template>
|
|
|
|
+ <view class="box">
|
|
|
|
+ <view class="address-list">
|
|
|
|
+ <up-radio-group v-model="radioValue" @change="handleChane">
|
|
|
|
+ <view
|
|
|
|
+ v-for="(item, index) in dataList"
|
|
|
|
+ :key="index"
|
|
|
|
+ class="address-item"
|
|
|
|
+ >
|
|
|
|
+ <!-- 左侧单选框 -->
|
|
|
|
+ <view class="radio-group">
|
|
|
|
+ <up-radio
|
|
|
|
+ shape="circle"
|
|
|
|
+ activeColor="red"
|
|
|
|
+ :name="item.addressId"
|
|
|
|
+ ></up-radio>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <!-- 中间内容区(自动伸缩) -->
|
|
|
|
+ <view class="content-wrapper">
|
|
|
|
+ <view class="address-line">
|
|
|
|
+ <text class="address-text">
|
|
|
|
+ {{ item.provinceName }}{{ item.cityName
|
|
|
|
+ }}{{ item.districtName }}
|
|
|
|
+ </text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="contact-info">
|
|
|
|
+ <text class="name">{{ item.name }}</text>
|
|
|
|
+ <text class="phone">{{ item.telephone }}</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <!-- 右侧编辑图标(固定宽度) -->
|
|
|
|
+ <view class="edit-icon" @click="hadlClickTo(item)">
|
|
|
|
+ <up-icon name="edit-pen" size="16"></up-icon>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </up-radio-group>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 底部新增按钮 -->
|
|
|
|
+ <view class="add-bottom-btn" @click="handlHeader">
|
|
|
|
+ <view class="add-bottom-btn-inner">
|
|
|
|
+ <text class="plus">+</text>
|
|
|
|
+ <text>新增收货地址</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script setup>
|
|
|
|
+import { ref ,onMounted} from 'vue'
|
|
|
|
+ import {
|
|
|
|
+ onShow
|
|
|
|
+ } from "@dcloudio/uni-app";
|
|
|
|
+import { addressList } from '@/api/userSettings.js'
|
|
|
|
+const radioValue = ref(null)
|
|
|
|
+const dataList = ref([])
|
|
|
|
+const total = ref(0)
|
|
|
|
+
|
|
|
|
+const handlHeader = () => {
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url: `/pages_home/pages/setupUser/Address`,
|
|
|
|
+ })
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+const props = defineProps({
|
|
|
|
+ modelValue: {
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: false,
|
|
|
|
+ },
|
|
|
|
+ addressInfo: {
|
|
|
|
+ type: Object,
|
|
|
|
+ default: () => {},
|
|
|
|
+ },
|
|
|
|
+})
|
|
|
|
+const emits = defineEmits(['update:modelValue', 'update:addressInfo'])
|
|
|
|
+
|
|
|
|
+function handleChane(addressId, item) {
|
|
|
|
+ const selectedItem = dataList.value.find(
|
|
|
|
+ (item) => item.addressId === addressId
|
|
|
|
+ )
|
|
|
|
+ emits('update:modelValue', false)
|
|
|
|
+ emits('update:addressInfo', selectedItem)
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+const getListData = async () => {
|
|
|
|
+ const res = await addressList()
|
|
|
|
+ dataList.value = res.rows
|
|
|
|
+ total.value = res.total
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+onShow(() => {
|
|
|
|
+ getListData()
|
|
|
|
+})
|
|
|
|
+onMounted(() => {
|
|
|
|
+ getListData()
|
|
|
|
+})
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss">
|
|
|
|
+.box {
|
|
|
|
+ height: 100vh;
|
|
|
|
+ width: 100vw;
|
|
|
|
+ position: fixed;
|
|
|
|
+ top: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+ z-index: 999999;
|
|
|
|
+ background: #f0f0f0;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.address-list {
|
|
|
|
+ flex: 1;
|
|
|
|
+ overflow-y: auto;
|
|
|
|
+ padding: 0 0 120rpx 0;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.footer {
|
|
|
|
+ position: fixed;
|
|
|
|
+ left: 0;
|
|
|
|
+ right: 0;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ background: transparent;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ padding-bottom: env(safe-area-inset-bottom);
|
|
|
|
+ z-index: 1000;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.add-item {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ gap: 10rpx;
|
|
|
|
+ background: #fff;
|
|
|
|
+ border-radius: 40rpx;
|
|
|
|
+ box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
|
|
|
|
+ padding: 0 40rpx;
|
|
|
|
+ height: 80rpx;
|
|
|
|
+ margin: 20rpx 0 30rpx 0;
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
+ color: #222;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.add-item text {
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
+ color: #222;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.address-item {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: flex-start;
|
|
|
|
+ padding: 24rpx 0;
|
|
|
|
+ border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
+ background: transparent;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.radio-group {
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
+ /* 禁止压缩 */
|
|
|
|
+ margin-right: 20rpx;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.content-wrapper {
|
|
|
|
+ flex: 1;
|
|
|
|
+ min-width: 0;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.edit-icon {
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
+ margin-left: 330rpx;
|
|
|
|
+ padding: 8rpx;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.address-text {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ max-width: 100%;
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.contact-info {
|
|
|
|
+ display: flex;
|
|
|
|
+ gap: 20rpx;
|
|
|
|
+ margin-top: 8rpx;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.name,
|
|
|
|
+.phone {
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ color: #666;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.add-bottom-btn {
|
|
|
|
+ position: fixed;
|
|
|
|
+ left: 0;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ width: 100vw;
|
|
|
|
+ background: #fff;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ padding: 24rpx 0 32rpx 0;
|
|
|
|
+ z-index: 10;
|
|
|
|
+ box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.03);
|
|
|
|
+}
|
|
|
|
+.add-bottom-btn-inner {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
+ color: #222;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ background: #fff;
|
|
|
|
+ border-radius: 40rpx;
|
|
|
|
+ padding: 8rpx 32rpx;
|
|
|
|
+ box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
|
|
|
+}
|
|
|
|
+.add-bottom-btn-inner .plus {
|
|
|
|
+ font-size: 38rpx;
|
|
|
|
+ color: #f5b400;
|
|
|
|
+ margin-right: 12rpx;
|
|
|
|
+}
|
|
|
|
+</style>
|