VAVABUY/pages/address/index.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar title="收货地址" fixed />
      <view class="content">
        <view class="address">
          <view class="address_list" v-for="item, index in addressList" :key="index">
            <view class="top">
              <view class="top_title">
                <view class="name">{{ item.firstName }} {{ item.lastName }}</view>
                <view class="phone">{{ item.phoneNo }}</view>
              </view>
              <view class="top_address">
                {{ item.country }}&nbsp;{{ item.province }}&nbsp;{{ item.city }}&nbsp;{{ item.address
                }}
              </view>
            </view>
            <view class="bottom">
              <up-radio-group v-model="radioModel" placement="column" @change="groupChange(item)"
                activeColor="var(--black)" inactiveColor="var(--text-01)" size="16">
                <up-radio :name="item.id">
                  <template #label>
                    <trans class="radio_text" _t="默认" />
                  </template>
                </up-radio>
              </up-radio-group>
              <view class="btns">
                <view class="del" @click="deleteClick(item.id)">
                  <view class="_icon">
                    <image src="../../static/shop/del.png" class="img"></image>
                  </view>
                  <trans class="label" _t="删除" />
                </view>
                <view class="del" @click="editAddress(item)">
                  <view class="_icon">
                    <image src="../../static/shop/edit.png" class="img"></image>
                  </view>
                  <trans class="label" _t="编辑" />
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="btn" @click="addressOpen">
        <trans _t="新增收货地址" />
      </view>
    </view>
    <Address ref="addressRef" />
    <popup title="提醒" isClose ref="popRef">
      <template #content>
        <trans class="pop_cont" _t="您确认删除吗" />
      </template>
      <template #footer>
        <view class="footer_btn">
          <view class="btn" @click="() => popRef.close()">
            <trans _t="取消" />
          </view>
          <view class="btn submit_btn" @click="submitClick">
            <trans _t="确认" />
          </view>
        </view>
      </template>
    </popup>
  </Theme>
</template>

<script setup>
import Navbar from '@/components/navbar';
import { computed, onMounted, nextTick, ref } from 'vue'
import { useShopStore } from "@/store"
import Address from "@/components/address";
import { SHOP_ADDRESS_ADD, SHOP_ADDRESS_DEL } from "@/api"
import { Toast } from "@/utils";
import popup from '@/components/popup';

const useShop = useShopStore();
const addressRef = ref(null);
const popRef = ref(null);
const radioModel = ref('');
const selectId = ref('');

const addressList = computed(() => {
  let list = useShop.getAddressList;
  let obj = list.find(item => item.default == 1);
  radioModel.value = obj && obj.id
  return list
});

const groupChange = (item) => {
  addressAdd({ ...item, default: item.default === 1 ? 0 : 1 })
}

const editAddress = (item) => {
  addressRef.value && addressRef.value.open(item);
}
const addressOpen = () => {
  addressRef.value && addressRef.value.open();
}

const addressAdd = async (params) => {
  try {
    await SHOP_ADDRESS_ADD(params);
    nextTick(() => {
      useShop.setAddressList();
    })
  } catch (error) {
    Toast(error.msg);
  }
}
const deleteClick = (id) => {
  popRef.value && popRef.value.open();
  selectId.value = id;
}
const submitClick = async () => {
  try {
    await SHOP_ADDRESS_DEL(selectId.value);
    popRef.value && popRef.value.close();
    nextTick(() => {
      useShop.setAddressList();
    })
  } catch (error) {
    popRef.value && popRef.value.close();
    Toast(error.msg);
  }
}


onMounted(() => {
  nextTick(() => {
    useShop.setAddressList();
  })
})
</script>

<style lang="less" scoped>
@import url('@/style.less');

.wrap {
  background: var(--bg);
  min-height: 100vh;

  .content {
    padding: 0 28rpx;
    padding-bottom: 128rpx;

    .address {
      .address_list {
        background-color: var(--inputBg);
        border-radius: 10px;
        margin-top: 28rpx;

        .top {
          border-bottom: 1px solid #F3F3F3;
          padding: 24rpx 20rpx;

          &_title {
            .flex_position(space-between);

            .name,
            .phone {
              .size();
              line-height: 44rpx;
              color: var(--black);
            }
          }

          &_address {
            word-wrap: break-word;
            overflow-wrap: break-word;
            white-space: pre-wrap;
            padding-top: 16rpx;
            color: var(--text-02);
            line-height: 44rpx;
            .size(28rpx);
          }
        }

        .bottom {
          padding: 20rpx;
          .flex_position(space-between);

          :deep(.u-radio) {
            margin: 0;
            align-items: baseline;

            .u-radio__label-wrap {
              .flex();
            }
          }

          .radio_text {
            .size(24rpx);
            line-height: 24rpx;
          }

          .btns {
            .ver();

            .del {
              .ver(flex-start);
              margin-left: 24rpx;

              ._icon {
                width: 32rpx;
                height: 32rpx;

                .img {
                  width: inherit;
                  height: inherit;
                }
              }

              .label {
                color: var(--text-02);
                .size(20rpx);
                line-height: 44rpx;
                margin-left: 6rpx;
              }
            }
          }
        }
      }
    }
  }

  .btn {
    height: 100rpx;
    position: fixed;
    left: 28rpx;
    right: 28rpx;
    bottom: 28rpx;
    background-color: var(--black);
    padding: 28rpx;
    .size();
    color: var(--light);
    font-weight: bold;
    text-align: center;
    border-radius: 20rpx;
  }
}

.pop_cont {
  color: var(--text-01);
  .size(28rpx);
  line-height: 60rpx;
}

.footer_btn {
  .ver();
  column-gap: 24rpx;

  .btn {
    flex: 1;
    height: 38px;
    padding: 16rpx 30rpx;
    border: 1px solid var(--black);
    border-radius: 16rpx;
    .size(24rpx);
    color: var(--black);
    text-align: center;
  }

  .submit_btn {
    background-color: var(--black);
    color: var(--light);
  }
}
</style>