Skip to content

J
jiedao-app-customer-new-master
Commit 0aa317a6 authored by lizhan's avatar lizhan
Browse files
Options

📝 【TASK-20240808-03】TASK:地址页面增删改逻辑完善

parent 3a078783
Hide whitespace changes
Inline Side-by-side
Showing with 234 additions and 81 deletions
src/pages/address/address.vue
View file @ 0aa317a6
......@@ -7,13 +7,13 @@
></dHeader>
<view class="container">
<view class="address-list">
<view class="address-item" v-for="item in 3" :key="item">
<view class="address-item" v-for="item in addressList" :key="item.id">
<view class="item-header">
<view class="item-name">张三</view>
<view class="item-phone">+86 18888888888</view>
<view class="item-name">{{ item.name }}</view>
<view class="item-phone">+{{ item.areaCode }}&ensp;{{ item.phone }}</view>
</view>
<view class="item-content">
辽宁省大连市甘井子区广贤路56号星光大道甘井子区广贤路56号星光大道
{{ item.address }}
</view>
<view class="item-footer">
<view
......@@ -25,18 +25,17 @@
><radio
class="radio"
color="#ff4d4f"
value="r1"
:value="item + ''"
:checked="check == item"
:checked="check == item.id"
:value="item.name"
/>设为默认地址</label
>
</view>
<view class="item-footer-right">
<view class="right-box" @click="toEditAddress">
<view class="right-box" @click="toEditAddress(item.id)">
<image class="item-img" src="../../static/img/edit.png"></image>
编辑</view
>
<view class="right-box">
<view class="right-box" @click="deleteAddress(item.id)">
<image class="item-img" src="../../static/img/delete_pail.png"></image>
删除</view
>
......@@ -56,23 +55,68 @@ export default {
},
data() {
return {
check: 1
check: null,
addressList: []
}
},
onShow() {
this.getAddressList()
},
methods: {
toAddressAdd() {
uni.navigateTo({
url: '/pages/address_add/address_add'
})
},
toEditAddress() {
toEditAddress(id) {
uni.navigateTo({
url: '/pages/address_edit/address_edit'
url: '/pages/address_edit/address_edit?id=' + id
})
},
// 切换默认地址
bindCheck(e, item) {
this.check = item
async bindCheck(e, item) {
this.check = item.id
try {
await this.$request.post('/app-api/member/user-address/update', {
...item,
isDefault: 0
})
} catch (err) {}
},
// 获取地址列表
async getAddressList() {
try {
const id = this.$store.getters.id
const { code, data } = await this.$request.get('/app-api/member/user-address/member/list', {
id
})
if (code == 0 && data) {
// console.log(data)
this.addressList = data
const i = this.addressList.findIndex((item) => item.isDefault === 0)
if (i >= 0) this.check = this.addressList[i].id
}
} catch (err) {}
},
// 删除地址
async deleteAddress(id) {
const that = this
uni.showModal({
title: that.$lang.lang.notices.notice,
content: that.$lang.lang.notices.delAddress,
success: async (res) => {
if (res.confirm) {
try {
const { code } = await that.$request.post(
`/app-api/member/user-address/delete?id=${id}`
)
if (code == 0) {
that.getAddressList()
}
} catch (err) {}
}
}
})
}
}
}
......
src/pages/address_add/address_add.vue
View file @ 0aa317a6
......@@ -3,18 +3,23 @@
<dHeader :title="$lang.lang.addressInfo.addInfo"></dHeader>
<view class="container">
<uni-forms ref="form" :model="form" :label-width="80" :rules="rules">
<uni-forms-item :label="$lang.lang.addressInfo.consignee" required name="consignee">
<uni-forms-item :label="$lang.lang.addressInfo.consignee" required name="name">
<uni-easyinput
class="input"
:trim="true"
:inputBorder="false"
v-model="form.consignee"
v-model="form.name"
:placeholder="$lang.lang.notices.consignee"
/>
</uni-forms-item>
<uni-forms-item :label="$lang.lang.addressInfo.phone" required name="phone">
<view class="phone-box">
<view class="phone-code">+86</view>
<picker :value="areaIndex" :range="areaName" @change="areaChange">
<view class="phone-code">
+{{ areaCode }}
<uni-icons type="down" class="code-icon" size="10"></uni-icons>
</view>
</picker>
<uni-easyinput
class="input"
:trim="true"
......@@ -28,7 +33,7 @@
class="item"
:label="$lang.lang.addressInfo.fullAddress"
required
name="fullAddress"
name="address"
>
<view class="textarea-box">
<uni-easyinput
......@@ -38,7 +43,7 @@
autoHeight
:inputBorder="false"
:maxlength="100"
v-model.trim="form.fullAddress"
v-model.trim="form.address"
:placeholder="$lang.lang.notices.fullAddress"
>
</uni-easyinput>
......@@ -60,22 +65,31 @@ export default {
data() {
return {
form: {
consignee: '',
name: '',
phone: '',
fullAddress: ''
}
address: ''
},
areaCode: this.$store.getters.areaCode,
areaIndex: 0,
areaName: []
}
},
computed: {
rules() {
return {
consignee: {
name: {
rules: [{ required: true, errorMessage: this.$lang.lang.notices.consignee }]
},
phone: {
rules: [{ required: true, errorMessage: this.$lang.lang.notices.phone }]
rules: [
{ required: true, errorMessage: this.$lang.lang.notices.phone },
{
validateFunction: (rule, value) => /^\d+$/.test(value),
errorMessage: this.$lang.lang.notices.nophone
}
]
},
fullAddress: {
address: {
rules: [
{ required: true, errorMessage: this.$lang.lang.notices.fullAddress },
{ maxLength: 100, errorMessage: this.$lang.lang.notices.fullAddressLength }
......@@ -84,12 +98,55 @@ export default {
}
}
},
created() {
this.getCountry()
},
methods: {
saveAddress() {
// console.log(this.form)
this.$refs.form.validate().then((res) => {
console.log(res)
this.$refs.form.validate().then(async (valid) => {
if (valid) {
try {
const params = {
...this.form,
areaCode: this.areaCode,
memberId: this.$store.getters.id
}
const { code, data } = await this.$request.post(
'/app-api/member/user-address/create',
params
)
if (code == 0) {
this.$router.back()
}
} catch (error) {}
}
})
},
// 获取国家区号
async getCountry() {
try {
const { code, data } = await this.$request.get('/app-api/ecw/country/list-all')
if (code == 0 && data.length > 0) {
// 查询用户区号下标
const i = data.findIndex((item) => {
return item.tel == this.areaCode
})
if (i >= 0) this.areaIndex = i
data.forEach((item) => {
const str = item.tel + ' ' + item.nameZh
if (this.$lang.locale == 'zh') {
this.areaName.push(str)
} else {
this.areaName.push(str)
}
})
}
} catch (error) {}
},
// 区号选择切换
areaChange(e) {
this.areaIndex = e.detail.value
this.areaCode = this.areaName[this.areaIndex].split(' ')[0]
}
}
}
......@@ -134,12 +191,17 @@ page {
align-items: center;
}
.phone-code {
display: flex;
align-items: center;
margin-right: 10upx;
padding-right: 10upx;
border-right: 1px solid #e6e6e6;
font-size: 24upx;
color: #000;
}
.code-icon {
margin-left: 6upx;
}
.btn {
width: 100%;
height: 80upx;
......
src/pages/address_edit/address_edit.vue
View file @ 0aa317a6
......@@ -3,12 +3,12 @@
<dHeader :title="$lang.lang.addressInfo.editInfo"></dHeader>
<view class="container">
<uni-forms ref="form" :model="form" :label-width="80" :rules="rules">
<uni-forms-item :label="$lang.lang.addressInfo.consignee" required name="consignee">
<uni-forms-item :label="$lang.lang.addressInfo.consignee" required name="name">
<uni-easyinput
class="input"
:trim="true"
:inputBorder="false"
v-model="form.consignee"
v-model="form.name"
:placeholder="$lang.lang.notices.consignee"
/>
</uni-forms-item>
......@@ -28,7 +28,7 @@
class="item"
:label="$lang.lang.addressInfo.fullAddress"
required
name="fullAddress"
name="address"
>
<view class="textarea-box">
<uni-easyinput
......@@ -38,7 +38,7 @@
autoHeight
:inputBorder="false"
:maxlength="100"
v-model.trim="form.fullAddress"
v-model.trim="form.address"
:placeholder="$lang.lang.notices.fullAddress"
>
</uni-easyinput>
......@@ -60,22 +60,31 @@ export default {
data() {
return {
form: {
consignee: '',
name: '',
phone: '',
fullAddress: ''
address: ''
}
}
},
onLoad(route) {
this.getAddress(route.id)
},
computed: {
rules() {
return {
consignee: {
name: {
rules: [{ required: true, errorMessage: this.$lang.lang.notices.consignee }]
},
phone: {
rules: [{ required: true, errorMessage: this.$lang.lang.notices.phone }]
rules: [
{ required: true, errorMessage: this.$lang.lang.notices.phone },
{
validateFunction: (rule, value) => /^\d+$/.test(value),
errorMessage: this.$lang.lang.notices.nophone
}
]
},
fullAddress: {
address: {
rules: [
{ required: true, errorMessage: this.$lang.lang.notices.fullAddress },
{ maxLength: 100, errorMessage: this.$lang.lang.notices.fullAddressLength }
......@@ -87,9 +96,28 @@ export default {
methods: {
saveAddress() {
// console.log(this.form)
this.$refs.form.validate().then((res) => {
console.log(res)
this.$refs.form.validate().then(async (res) => {
if (res) {
try {
const { code } = await this.$request.post(
'/app-api/member/user-address/update',
this.form
)
if (code == 0) {
this.$router.back()
}
} catch (err) {}
}
})
},
// 获取地址信息 回显
async getAddress(id) {
try {
const { code, data } = await this.$request.get('/app-api/member/user-address/get', { id })
if (code == 0 && data) {
this.form = data
}
} catch (err) {}
}
}
}
......
src/pages/index/index.vue
View file @ 0aa317a6
......@@ -381,6 +381,10 @@ export default {
// #endif
}
that.userInfo = res.data
// 存储信息节点
const { id, areaCode } = res.data
that.$store.commit('SET_ID', id)
that.$store.commit('SET_AREACODE', areaCode)
}
})
},
......
src/pages/site/site.vue
View file @ 0aa317a6
......@@ -233,6 +233,7 @@
</template>
<script>
import storage from '../../utils/storage'
export default {
data() {
return {
......@@ -445,6 +446,7 @@ export default {
},
loginOut() {
uni.removeStorageSync('Authorization')
storage.clean()
uni.navigateTo({
url: '../login/login'
})
......@@ -564,6 +566,7 @@ export default {
if (res.confirm) {
that.$request.deleted('/app-api/member/member/cancellation').then((res) => {
if (res.code == 0 && res.data) {
storage.clean()
uni.showToast({
title: that.$lang.lang.site.offSuccess,
icon: 'none'
......
src/static/lang/en.js
View file @ 0aa317a6
......@@ -134,7 +134,8 @@ export default {
country: 'Please select a country',
city: 'Please select a city',
fullAddress: 'Please enter the detailed address',
fullAddressLength: 'Enter up to 100 words'
fullAddressLength: 'Enter up to 100 words',
delAddress: 'Are you sure you want to delete the address?'
},
auth: {
auth: 'Real-name certification',
......
src/static/lang/zh.js
View file @ 0aa317a6
......@@ -133,7 +133,8 @@ export default {
country: '请选择国家',
city: '请选择城市',
fullAddress: '请输入详细地址',
fullAddressLength: '最多输入100字'
fullAddressLength: '最多输入100字',
delAddress: '确定删除地址吗?'
},
auth: {
auth: '实名认证',
......
src/store/index.js
View file @ 0aa317a6
import Vue from 'vue'
import Vuex from 'vuex'
import http from '@/utils/request'
import user from './modules/user'
import storage from '../utils/storage'
Vue.use(Vuex)
let userInfo = null
try {
if (uni.getStorageSync('userInfo')) {
userInfo = JSON.parse(userInfo)
}
if (uni.getStorageSync('userInfo')) {
userInfo = JSON.parse(userInfo)
}
} catch (e) {
uni.setStorageSync('userInfo', null)
uni.setStorageSync('userInfo', null)
}
const store = new Vuex.Store({
state: {
userInfo: userInfo || null,
config: null,
},
mutations: {
logout(state) {
state.userInfo = null
uni.removeStorageSync('userInfo');
uni.removeStorageSync('token');
// uni.switchTab({
// url: '/pages/tabbar/user/user.vue'
// })
},
setUser(state, userInfo) {
state.userInfo = userInfo
console.log('userInfo.data', userInfo)
uni.setStorageSync('userInfo', JSON.stringify(userInfo))
uni.setStorageSync('token', userInfo.api_token)
},
setConfig(state, config) {
state.config = config
}
},
actions: {
updateUserInfo({
commit
}) {
http.get("/profile").then(res => {
console.log('更新用户信息', res)
commit('setUser', res.data)
}).catch(res => {
console.log("更新用户信息error", res)
})
}
}
state: {
userInfo: userInfo || null,
config: null
},
mutations: {
logout(state) {
state.userInfo = null
uni.removeStorageSync('userInfo')
uni.removeStorageSync('token')
storage.clean()
// uni.switchTab({
// url: '/pages/tabbar/user/user.vue'
// })
},
setUser(state, userInfo) {
state.userInfo = userInfo
console.log('userInfo.data', userInfo)
uni.setStorageSync('userInfo', JSON.stringify(userInfo))
uni.setStorageSync('token', userInfo.api_token)
},
setConfig(state, config) {
state.config = config
}
},
actions: {
updateUserInfo({ commit }) {
http
.get('/profile')
.then((res) => {
console.log('更新用户信息', res)
commit('setUser', res.data)
})
.catch((res) => {
console.log('更新用户信息error', res)
})
}
},
getters: {
id: (state) => state.user.id,
areaCode: (state) => state.user.areaCode
},
modules: {
user
}
})
export default store
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment