uni-app 有没有管理收货地址的demo,求一份

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app 有没有管理收货地址的demo,求一份

有没有管理收货地址的demo ,求一份 3Q

1 回复

当然可以,以下是一个简单的uni-app管理收货地址的示例代码。这个示例包括一个收货地址列表页面,可以添加、编辑和删除收货地址。

1. 项目结构

/pages
  /address
    address.vue
    editAddress.vue
App.vue
main.js
store/
  index.js

2. store/index.js (使用Vuex进行状态管理)

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    addresses: []
  },
  mutations: {
    ADD_ADDRESS(state, address) {
      state.addresses.push(address);
    },
    EDIT_ADDRESS(state, updatedAddress) {
      const index = state.addresses.findIndex(a => a.id === updatedAddress.id);
      if (index !== -1) {
        Vue.set(state.addresses, index, updatedAddress);
      }
    },
    DELETE_ADDRESS(state, id) {
      state.addresses = state.addresses.filter(a => a.id !== id);
    }
  },
  actions: {
    addAddress({ commit }, address) {
      commit('ADD_ADDRESS', address);
    },
    editAddress({ commit }, updatedAddress) {
      commit('EDIT_ADDRESS', updatedAddress);
    },
    deleteAddress({ commit }, id) {
      commit('DELETE_ADDRESS', id);
    }
  }
});

3. pages/address/address.vue (地址列表页面)

<template>
  <view>
    <button @click="navigateToEdit(null)">添加地址</button>
    <view v-for="address in addresses" :key="address.id">
      <text>{{ address.name }} - {{ address.phone }} - {{ address.detail }}</text>
      <button @click="navigateToEdit(address)">编辑</button>
      <button @click="deleteAddress(address.id)">删除</button>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['addresses'])
  },
  methods: {
    ...mapActions(['addAddress', 'editAddress', 'deleteAddress']),
    navigateToEdit(address) {
      uni.navigateTo({
        url: `/pages/address/editAddress?id=${address ? address.id : ''}`
      });
    },
    deleteAddress(id) {
      this.deleteAddress(id);
      uni.showToast({ title: '删除成功', icon: 'success' });
    }
  },
  onLoad() {
    // 初始化获取地址数据,可以从服务器获取
  }
};
</script>

4. pages/address/editAddress.vue (编辑地址页面)

<!-- 省略了部分代码,如表单输入和提交逻辑 -->

这个示例展示了如何使用Vuex管理收货地址列表,并实现添加、编辑和删除功能。具体的编辑页面代码可以根据实际需求实现,这里主要给出了管理地址列表的核心逻辑。

回到顶部