zhywpt-sp/personal-center/setting/addressManager.vue

<template>
  <view class="address-line">
    <view
      v-for="(item, index) in state.addressArray"
      :key="index"
      @click="addressSelected(item)"
      style="margin-bottom: 60rpx"
      class="flex-bettwen"
    >
      <view class="flex">
        <view class="xing">
          {{ item.consignee.charAt(0) }}
        </view>
        <view class="content">
          <view class="flex">
            <view class="name">
              {{ item.consignee }}
            </view>
            <view class="phone">
              {{ item.consigneeTel }}
            </view>
          </view>
          <view class="address">
            {{ item.region + item.address }}
          </view>
        </view>
      </view>
      <view
        @click.stop="editAddress(item)"
        style="margin-left: 80rpx"
        class="picture"
      >
        <image
          :showLoading="true"
          :src="`${$imgUrl}applyCard/edit.png`"
          style="width: 48rpx; height: 48rpx"
        >
        </image>
      </view>
    </view>

    <view
      :style="state.addressArray.length > 0 ? 'margin-top: 60rpx;' : ''"
      class="action-bottom"
    >
      <button type="default" class="button" @click="goToAddAddress()">
        添加收货地址
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import navBgCar from "./components/nav-bg-car1";
import carNumberInput from "@/components/car-number-input/car-number-input.vue";
import numberplateColor from "./components/layout-numberplate-color";

import { getItem, StorageKeys } from "../../utils/storage";
import { stringToJson } from "@/utils/network/encryption";
import navBar from "../../components/nav-bar/nav-bar2.vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import {
  addressQuery,
  etcCreatOrder,
  etcVehiclePlateVer,
} from "@/utils/network/api.js";
import { request } from "@/utils/network/request.js";
import { reactive } from "vue";

const state = reactive({
  addressArray: [],
  fromOrder: false, //是否来自订单
});

const goToAddAddress = () => {
  uni.navigateTo({
    url: "/applyCard/addAddress",
  });
};
const editAddress = (val) => {
  uni.navigateTo({
    url: `/applyCard/editAddress?content=` + JSON.stringify(val),
  });
};

const addressSelected = (val: any) => {
  if (state.fromOrder) {
    //来自订单-直接返回选中数据
    uni.$emit("selectAddressSuccess", val);
    uni.navigateBack({ delta: 1 });
  }
  // state.data = {
  // 	...state.data,
  // 	...val
  // }
  // state.show = false;
};

onShow(() => {
  var data = {
    openId: getItem(StorageKeys.OpenId),
  };
  const options = {
    type: 2,
    data: data,
    method: "POST",
    showLoading: true,
  };
  request(addressQuery, options).then((res) => {
    const data = stringToJson(res.bizContent);
    state.addressArray = data.data;
  });
});
onLoad((option: any) => {
  state.fromOrder = option.fromOrder;
});
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  align-items: center;
}

.content-wrap {
  position: relative;
  margin-top: -50rpx;
  padding: 0rpx 30rpx;

  .title {
    font-size: 30rpx;
    font-family: Noto Sans S Chinese;
    font-weight: 400;
    color: #000000;
    line-height: 30rpx;
    margin-bottom: 30rpx;
  }

  .car-input {
  }

  .chepai-lane {
    margin-top: 60rpx;
    margin-bottom: 20rpx;
  }

  .address-lane {
    margin-bottom: 30rpx;

    .title {
      font-size: 30rpx;
      font-weight: 400;
      color: #000000;
      line-height: 30rpx;
    }
  }
}

.address-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 30rpx;
  border-bottom: 1rpx solid #dcdcdc;

  .name {
    font-size: 26rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
    font-size: 26rpx;
  }

  .phone {
    font-size: 26rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
    line-height: 26rpx;
    margin-left: 20rpx;
  }

  .arror {
    width: 16rpx;
    height: 30rpx;
    color: rgba(153, 153, 153, 1);
  }

  .address {
    font-size: 32rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 32rpx;
  }
}

.address-line {
  padding: 20px;

  .flex-bettwen {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .xing {
    width: 68rpx;
    height: 68rpx;
    background: rgba(0, 179, 139, 0.2);
    border-radius: 50%;
    font-size: 26rpx;
    font-weight: 400;
    color: #00b38b;
    line-height: 68rpx;
    text-align: center;
  }

  .content {
    margin-left: 20px;

    .name {
      font-size: 30rpx;
      font-family: Microsoft YaHei;
      font-weight: 500;
      color: #333333;
    }

    .phone {
      margin-left: 10rpx;
      font-size: 24rpx;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #999999;
      line-height: 36rpx;
    }

    .address {
      margin-top: 10rpx;
      font-size: 26rpx;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      line-height: 36rpx;
    }

    .picture {
      width: 48rpx;
      height: 48rpx;
    }

    .editIcon {
      width: 48rpx;
      height: 48rpx;
    }
  }
}

.action {
  padding-bottom: 100rpx;

  .button {
    height: 80rpx;
    background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
    border-radius: 40rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 80rpx;
  }
}

.action-bottom {
  padding-bottom: 30rpx;

  .button {
    height: 80rpx;
    background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
    border-radius: 40rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 80rpx;
  }
}
</style>