Task：礼品赠送/送礼、分享。收礼

2025-02-22 19:20:33 +08:00
parent f0a4a0edf9
commit aedc2fd768
9 changed files with 543 additions and 90 deletions
@@ -0,0 +1,146 @@
+<template>
+  <!-- 使用u-popup包裹整个地址列表 -->
+  <u-popup 
+    :show="showPopup" 
+    :safeAreaInsetBottom="false" 
+    mode="center" 
+    round="16" 
+    closeable 
+    @close="close"
+    @open="open"
+  >
+    <view class="v12-text-center v12-font-bold v12-mt-3">收货地址</view>
+    <view class="address-list">
+      <!-- 地址列表 -->
+      <view 
+        class="address-item"
+      >
+        <view class="address-wrap" @click="handleSelect(addressList)">
+          <view class="v12-font-28 v12-font-bold">
+            收货地址：
+          </view>
+          <view>
+            <view class="info">
+              <text class="v12-font-28 v12-font-bold v12-dark-text">{{ addressList.realName }}</text>
+              <text class="v12-font-28 v12-font-bold v12-dark-text v12-ml-1">{{ addressList.phone }}</text>
+            </view>
+            <view class="address v12-font-bold v12-font-28 v12-dark-text  v12-mt-3 v12-mb-4">
+              {{ addressList.province + addressList.city  + addressList.district + addressList.detail }}
+              <view @click.stop="editAddress">
+                <u-icon :name="webUrl+'/orderIcon/edit02.png'" color="#C52733"></u-icon>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <!-- 添加新地址按钮 -->
+      <view class="add-btn v12-primary v12-white-text" @click="addNewAddress">
+        <text>添加新地址</text>
+      </view>
+    </view>
+  </u-popup>
+</template>
+
+<script>
+export default {
+  props: {
+    addressList: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      showPopup: false, // 新增控制弹窗显示的状态
+    }
+  },
+  methods: {
+    editAddress() {
+      this.$yrouter.push({
+        path: "/pages/user/address/AddressManagement/index",
+        query: {
+          choosMode: 3
+        }
+      });
+    },
+    // 选择地址
+    handleSelect(item) {
+      uni.showModal({
+        title: '提示',
+        content: '确认选择这个收货地址吗？',
+        success: (res) => {
+          if (res.confirm) {
+            this.$emit('save', item.id)
+          }
+        }
+      })
+    },
+    // 添加新地址
+    addNewAddress() {
+      this.$yrouter.push({
+        path: "/pages/user/address/AddAddress/index",
+        query: {
+          choosMode: 3
+        }
+      });
+    },
+    // 新增打开弹窗方法
+    open() {
+      this.showPopup = true
+    },
+    // 新增关闭弹窗方法
+    close() {
+      this.showPopup = false
+    },
+  }
+}
+</script>
+
+<style scoped>
+.address-wrap{
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20rpx;
+}
+.address-list {
+  padding: 20rpx;
+  width: 640rpx;
+}
+
+.address-item {
+  padding: 20rpx;
+}
+
+.info {
+  display: flex;
+  justify-content: flex-start;
+  margin-bottom: 10rpx;
+}
+
+.name {
+  font-size: 28rpx;
+  font-weight: bold;
+}
+
+.phone {
+  font-size: 28rpx;
+  color: #666;
+}
+
+.address {
+  font-size: 26rpx;
+  color: #888;
+  display: flex;
+}
+
+.add-btn {
+  margin-top: 30rpx;
+  padding: 20rpx;
+  text-align: center;
+  background-color: #fff;
+  border: 1rpx solid #ddd;
+  border-radius: 100rpx;
+  
+}
+</style>