zhishifufei_uniapp/pages/my/address.vue

<template>
  
  <BaseContainer class="address-list">
    <NavBar title="地址管理" />
    <view class="list" v-if="address && address.length">
      <view class="list-item flex flex-center-x" v-for="(item, index) in address" :key="index">
        <view class="head">
          <view>{{ item.real_name }} {{ item.phone }} <view v-if="item.is_default">默认</view> </view>
          <view>
            {{ item.province }} {{ item.city }} {{ item.district }}{{ item.detail }}
          </view>
        </view>
				<image src="@/static/images/my/edit.png" mode="aspectFill" @click="editAddress(item.id)"></image>
        <!-- <view class="foot flex flex-center-x">
          <view class="label">
            <view
              class="checked-icon"
              @click="setDefault(item.id)"
              :class="{ active: item.is_default }"
              >设为默认</view
            >
          </view>
          <view class="flex-auto flex flex-right">
            <navigator :url="`/pages/my/edit_address?id=${item.id}`" class="edit-btn">
              <image
                :src="getImgPath('/wap/first/zsff/images/editor.png')"
                mode="aspectFit"
              />编辑
            </navigator>
            <view @click="remove(item.id)" class="del-btn">
              <image :src="getImgPath('/wap/first/zsff/images/trash.png')" />删除
            </view>
          </view>
        </view> -->
      </view>
    </view>
    <image
      v-else
      class="nothing"
      :src="getImgPath('/wap/first/zsff/images/no_address.png')"
    />
    <view class="footer">
      <navigator url="/pages/my/edit_address">
        <text>添加地址</text>
      </navigator>
      <!-- #ifdef MP -->
      <!-- <view v-if="isWechat" @click="getWxAddress">
        <image :src="getImgPath('/wap/first/zsff/images/weixin.png')" />
        <text>导入微信地址</text>
      </view> -->
      <!-- #endif -->
    </view>
  </BaseContainer>
</template>

<script>
import { getAddress, removeUserAddress, setDefaultAddress } from "@/api/user";
export default {
  data() {
    return {
      address: [],
      isWechat: false,
    };
  },
  onShow() {
    this.getAddress();
  },
  methods: {
    getAddress() {
      getAddress().then(({ data }) => {
        this.address = data.address;
      });
    },
    setDefault(id) {
      setDefaultAddress(id).then((res) => {
        this.$util.showMsg("设为默认成功");
        for (let item of this.address) {
          item.is_default = item.id === id;
        }
      });
    },
		editAddress(id) {
			uni.navigateTo({
				url: `/pages/my/edit_address?id=${id}`,
			});
		},
    remove(id) {
      uni.showModal({
        title: "提示",
        content: "是否删除该地址?",
        success: async ({ confirm }) => {
          if (!confirm) return;
          uni.showModal({ mask: true });
          try {
            await removeUserAddress(id);
            uni.hideLoading();
            uni.showMsg("删除成功!");
            this.address = this.address.filter((value) => value.id !== id);
          } catch (err) {
            uni.hideLoading();
            this.$util.showMsg(err.msg);
          }
        },
      });
    },
    // #ifdef MP
    getWxAddress: function () {
      mapleWx($jssdk(), function () {
        this.openAddress(
          function (res) {
            $h.loadFFF();
            api.basePost(
              $h.U({ c: "auth_api", a: "edit_user_address" }),
              {
                id: "",
                real_name: res.userName,
                phone: res.telNumber,
                address: {
                  province: res.provinceName,
                  city: res.cityName,
                  district: res.countryName,
                },
                detail: res.detailInfo,
                is_default: false,
              },
              function () {
                location.reload();
              }.bind(this),
              function (err) {
                $h.loadClear();
              }
            );
          },
          function (err) {
            $h.pushMsg("导入微信地址失败");
          }
        );
      });
    },
    // #endif
  },
};
</script>

<style>
page {
  padding-bottom: 118rpx;
  background-color: #f5f5f5;
}
</style>

<style scoped lang="scss">
.nothing {
  position: absolute;
  top: 30%;
  left: 50%;
  width: 414rpx;
  height: 336rpx;
  transform: translate(-50%, -50%);
}

.address-list .list-item {
	padding: 34rpx 42rpx 38rpx 30rpx;
  background-color: #ffffff;
	width: 690rpx;
	margin: 20rpx auto 0 ;
	border-radius: 10rpx;
	image {
		height: 34rpx;
		width: 34rpx;
		margin-left: auto;
	}
}

.address-list .head {
	width: 410rpx;
  font-size: 28rpx;
  color: #666;
}

.address-list .head>view:first-child {
  margin-bottom: 8rpx;
  font-size: 34rpx;
  color: #333;
	display: flex;
	align-items: center;
	view {
		height: 38rpx;
		background: #FEE1E1;
		font-size: 20rpx;
		color: #FF5C6B;
		text-align: center;
		line-height: 38rpx;
		border-radius: 6rpx;
		margin-left: 20rpx;
		padding: 0 14rpx;
	}
}

.address-list .foot {
  height: 82rpx;
  border-top: 1px solid #eee;
  font-size: 28rpx;
  color: #282828;
}

.address-list .foot navigator {
  color: #282828;
}

.address-list .foot .label view {
  padding-left: 48rpx;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAADLUlEQVRYR92ZPWhUQRDHd/ZI8MrED/BC4LKz72oRQRCt/CApNIVoY2GjsbBQiUVEkCCIKQxqYWG0sUijWCQWCZpUiiAEsb7b3RwcOcGPpLyQcDuycO+4fN3He694zwdX3cz8fzdvZ3d2DlhCHkgIJwsFury8vM9ae4YxdpKIBAAIxpj7uMcQkQEAwxj7wjlfGBgYWA+amECgWuvbjLHTjDEHuWStXeScF6rVqkqn0wUHU6lUvFQqJa21Hufc2R5jjC0Q0ayU8lWnwB2BKqWuAsAoAJQZY9MuS9ls9mc7osVi8XAt+1eIKENEk1LKN+34Opu2QZVSbwHgSE3gZbsCu9kppW64H0xEP6SUl9uJ1RaoMWaWiH5Za+95nve7ncCtbAqFwkHO+WMAOCSEuNDKviWoMWaFiJ4g4tNWwYJ8r7W+AwB3hRB9zfybgmqt1xCxJwhApz6ttPYEVUp955yPCSE+dioaxN4Yc85aOyGlPLqb/66gWuv3jLEiIo4GEQ3qo7WeZIxlEfHi9hg7QI0xl4joUTqdPpHJZP4EFQ3iVy6XD1Qqla8AcF8I8a4xxg5QrfUSAEwJIaaCiIX1McaMENEIIroDov5sAdVa3wKAISHEYFjBMP7GmHkimkPE536c7aAfAGBGCPE6jFBYX2PMNSIaalyrddBag7HW3d0t+/v7V8KKhfEvlUp9m5ubeQDY7zcydVCl1KBbxIh4KoxIVL5a688A8FAI8cnFrINqrSesteue541HJRYmTqFQGOec70PEsS2gtaZjBhGnwwhE5au1dl3WsN+0NGZ0qVqt3szlct+iEgsTJ5/PH0+lUi/8baoRdLVWSKthBKLyLZVKvRsbGwoRe7ev0cSAJuPVJ6mYkrE9GWPOEtGDOG34rouTUs5vKSZ3hBLR366urlwcjlBX8Zzznh1HqKN2DTMAzMWkKRlGxPN7dU/JaPNqWY1/4+xAE3MV8ddq7C93/uJNxHXZh201FIiqAam9xabDjv9jpONnLBFDsoY1G/+xYwNs/Ae5jYWjlLoOAG6m2fFonDG2iIjPOi3ElsXULGDs/2zoNBtR2IfKaBQA7cb4B6fgEUkgxdzKAAAAAElFTkSuQmCC")
    left center/38rpx 38rpx no-repeat;
}

.address-list .foot .checked-icon.active {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAD3UlEQVRYR9WZX2xTdRTHv98220CIsCXwoD4Q2MsuhMTJC4kBE6ZCIgTuYO8mGB4gZL0S8HF700Rb0/CkJr47kZSZzOAgsBgfQCAx7a9icAESiD64OTIHjq6H/Nq19pbb29+9vZuuL33o+fP5/Tnnd84psUI+XCGcaAm0Oy0dbfPYhTj2ULAZwGaw9A0IJgFMCjGJBVx62o6JOyf5T9iNCQW6NSVHRbAXxD4IXjByTsxBMEbiu1yCXxjp1AgFArU+kSOI4QQEu4I6cskTEyjirHqfI6Z2jEF7knKOgG1q2EROgG/yDvtNZI1AraTcBPCqicEQMreUw95mek1BraRMA1jfzFCLv/+lHHb62fAFtVLyAIKXWoQwUyceqgRfbiTcENRKygUA+828RCY1qhwe8LLmCWol5SsARyJzH8zQiHI4UK/yHGgpBREa9L/7CAbqU9fzoCm52nKebHWJxIRKcHetGRfo4ovzeat+DPR1ove9WiTeq33BXKDLEUAEzucc2gZx4AqsKuimL2XVmmlMCbDaYEfCioxufAT7yhAL2oAfLIHHf3ei6+67fKJlq6DbPpV3ikWMhiUw0BubewT77lDZscGOIhbD/uwgv3WB9qTkQwrOGDgMLELgosygXw1z1hRSywnxUT7BD1ygJitcJGwaCHUrubx6DewbxzgTBLLiq5JTq0dvJeUnAK812a7PlMNjVkoyEHi+IC59YqLYBvuXE/wzBKRWuaEc7nDvaEqmIGhcGBDZGDCQTTCvK/v2BWjYtxstTIAf4zHY2UH+ERJSR9C0SrArGGiZ6BaBgZzDO91pebGtgAyBNzxgrxUA+1eHD0JDluk8QM2OXvdC1xHHYTXI+91p2dBeQAbAzhrYm1KEnT/Fey1Blg16HH2AQkQfKzvQr47z9+1peaVQhu0V4Od4AXb2NH+LAFKbqBYo1WAKkZ6u6tYk53BqW1q2FAvILMTQf3uQtyOC9E5PPR/Lm4zhYsAkOY4OHFLHObs1LVbuJFVUkKU8WsRb+VP83hVMi5GsI9+s/f13RWOYwUE1zPkoIUHMzcfRVZkF1BclXwMw6grrdj6jHB4M8GiYHNw55fBwRTDKMi/oi+UL61vmlY5uJRTOJdCV0opo2KWYiphcylKkN5ie+LXLSzkdacTdcGriP4BYnilJBdp3WtJ8pLMc05ImUxJXwve7Q0vc9DWcjtQyNd3RinDEybxi1nMq4rVpxqDV1PV/H+TWrnJxUHGAQJ9pe63bXwHGSVxY8tF4/ZHoWcDaGfQtCF73+7MhTvwwuw7jlR7dNKeGuqNhjEepE+iORuk4qK1nmV6XOhLYKXkAAAAASUVORK5CYII=");
}

.address-list .foot .del-btn {
  margin-left: 50rpx;
}

.address-list .foot {
  .edit-btn,
  .del-btn {
    image {
      width: 38rpx;
      height: 38rpx;
      vertical-align: middle;

      object-fit: cover;
      pointer-events: none;
    }
  }
}

.address-list .footer {
  position: fixed;
  bottom: 44rpx;
  left: 30rpx;
  z-index: 9;

  display: flex;
	width: 690rpx;
  align-items: center;
}

.address-list .footer navigator {
  flex: 1;
  height: 76rpx;
  border-radius: 38rpx;
  background: linear-gradient(0deg, #0F74BB 0%, #3293FF 100%);;
  vertical-align: middle;
  font-size: 30rpx;
  line-height: 76rpx;
  text-align: center;
  color: #ffffff;
}

.address-list .footer a:nth-child(2) {
  margin-left: 30rpx;
  background-color: #feb720;
}

.address-list .footer image {
  width: 36rpx;
  height: 36rpx;
  margin-right: 10rpx;
  vertical-align: middle;

  object-fit: cover;
  pointer-events: none;
}

.address-list .footer a:nth-child(2) image {
  width: auto;
}

.address-list .footer text {
  vertical-align: middle;
}

.address-list .nothing {
  display: block;
  width: 414rpx;
  margin: 30rpx auto;
  pointer-events: none;
  -webkit-touch-callout: none;
}
</style>