v1.0

pages/address/address.vue

@@ -0,0 +1,249 @@
+<template>
+  <layout>
+    <uv-navbar
+      :fixed="false"
+      :title="title"
+      left-arrow
+      @leftClick="$onClickLeft"
+    />
+
+    <view class="addressList">
+      <uv-swipe-action>
+        <uv-swipe-action-item
+          v-for="(item, index) in main.address"
+          :key="index"
+          :options="options"
+          @click="handleAddressClick($event, item)"
+        >
+          <view
+            :class="{ address: true, noBorder: index == 0 }"
+            @tap="handleClick(item)"
+          >
+            <view class="address-main">
+              <view class="address-header">
+                <view class="address-name">{{ item.realName }}</view>
+                <view class="address-phone">{{ item.phone }}</view>
+              </view>
+              <view class="address-content">
+                <view
+                  class="address-default"
+                  v-if="item.isDefault"
+                >
+                  <uv-tags
+                    text="默认"
+                    plain
+                    size="mini"
+                  ></uv-tags>
+                </view>
+                <view class="address-desc">{{ item.detail }}</view>
+              </view>
+            </view>
+            <view class="address-actions">
+              <view
+                class="address-actions-edit"
+                @tap="goEditorAddress(item)"
+              >
+                <image
+                  class="image"
+                  src="@/static/images/icon-edit.png"
+                  alt=""
+                ></image>
+              </view>
+            </view>
+          </view>
+        </uv-swipe-action-item>
+      </uv-swipe-action>
+    </view>
+    <div class="form-buttons">
+      <uv-button
+        round
+        block
+        type="primary"
+        @tap="goCreateAddress"
+      >
+        新增地址
+      </uv-button>
+    </div>
+
+  </layout>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { navigateTo, back } from '@/utils/router'
+import { onLoad } from '@dcloudio/uni-app'
+import { useMainStore } from '@/store/store'
+
+import {
+  getAddressDel,
+  getAddressDefault,
+  getAddressAddAndEdit,
+  getAddressList,
+  getAddressCityList,
+} from '@/api/address'
+
+const title = ref('')
+
+const main = useMainStore()
+
+const actionType = ref('')
+
+const options = ref([{
+  text: '删除',
+  style: {
+    backgroundColor: '#f56c6c'
+  }
+}])
+
+const goCreateAddress = () => {
+  navigateTo({
+    url: "/pages/createAddress/createAddress"
+  });
+}
+
+const goEditorAddress = (address) => {
+  navigateTo({
+    url: "/pages/createAddress/createAddress",
+    query: {
+      id: address.id
+    }
+  });
+}
+
+const handleClick = (item) => {
+  if (actionType.value == 'select') {
+    main.setSelectAddress(item.id)
+    back()
+  }
+
+}
+
+onLoad((option) => {
+  if (option.type) {
+    actionType.value = option.type
+    title.value = '选择地址'
+  } else {
+    title.value = '地址管理'
+  }
+  main.getAddressList()
+})
+
+
+const handleAddressClick = async ({ index }, data) => {
+  if (index == 0) {
+    uni.showLoading({
+      title: '删除中',
+      mask: true,
+    })
+
+    await getAddressDel(data)
+    uni.showToast({
+      title: "删除成功",
+      icon: "none",
+      duration: 2000
+    });
+    uni.hideLoading()
+    main.getAddressList()
+  }
+
+}
+
+
+
+
+</script>
+
+<style lang="less">
+.addressList {
+  .address {
+    &:last-child {
+      //   &::after {
+      //     display: none;
+      //   }
+    }
+  }
+}
+
+
+.address {
+  padding: 25rpx 35rpx;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &-main {}
+
+  &-actions {
+    &-edit {
+      width: 33rpx;
+      height: 33rpx;
+
+      .image {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+    }
+
+  }
+
+
+  &.noBorder {
+    &::after {
+      display: none;
+    }
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 35rpx;
+    top: 0;
+    right: 0;
+    height: 1rpx;
+    background: #E6E6E6;
+
+  }
+
+
+
+  background: #fff;
+
+  &-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8rpx;
+  }
+
+  &-name {
+    line-height: 40rpx;
+    font-size: 28rpx;
+    color: #333333;
+    margin-right: 30rpx;
+
+  }
+
+  &-phone {
+    line-height: 40rpx;
+    font-size: 28rpx;
+    color: #333333;
+  }
+
+  &-content {
+    height: 52rpx;
+    display: flex;
+    align-items: center;
+  }
+
+  &-default {
+    margin-right: 82rpx;
+  }
+
+  &-desc {
+    line-height: 33rpx;
+    font-size: 24rpx;
+    color: #999999;
+  }
+}
+</style>