当然可以,以下是一个简单的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管理收货地址列表,并实现添加、编辑和删除功能。具体的编辑页面代码可以根据实际需求实现,这里主要给出了管理地址列表的核心逻辑。