Commit c516ea051091a013183eda01f9db92171d3ad4e5
1 parent
16749c922a
Exists in
master
删除地址修改
Showing
1 changed file
with
4 additions
and
1 deletions
Show diff stats
src/pages/address/addressList.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="content"> | 2 | <view class="content"> |
| 3 | <view | 3 | <view |
| 4 | v-if="addressList.length !== 0" | 4 | v-if="addressList.length !== 0" |
| 5 | class="list" | 5 | class="list" |
| 6 | > | 6 | > |
| 7 | <view | 7 | <view |
| 8 | v-for="(item, index) in addressList" | 8 | v-for="(item, index) in addressList" |
| 9 | :key="index" | 9 | :key="index" |
| 10 | class="order-user" | 10 | class="order-user" |
| 11 | @tap="toOrder(item.add_id)" | 11 | @tap="toOrder(item.add_id)" |
| 12 | @longpress="delAddress(item.add_id)" | 12 | @longpress="delAddress(item.add_id)" |
| 13 | > | 13 | > |
| 14 | <view class="order-user-head"> | 14 | <view class="order-user-head"> |
| 15 | <view class="name"> | 15 | <view class="name"> |
| 16 | <view | 16 | <view |
| 17 | v-if="item.default === '1'" | 17 | v-if="item.default === '1'" |
| 18 | class="default" | 18 | class="default" |
| 19 | ><text>默认</text></view>{{item.name}} | 19 | ><text>默认</text></view>{{item.name}} |
| 20 | </view> | 20 | </view> |
| 21 | <text class="mobile">{{item.mobile}}</text> | 21 | <text class="mobile">{{item.mobile}}</text> |
| 22 | </view> | 22 | </view> |
| 23 | <view class="order-user-body"> | 23 | <view class="order-user-body"> |
| 24 | <image src="../../static/myorder-paying-location.png"></image> | 24 | <image src="../../static/myorder-paying-location.png"></image> |
| 25 | <text class="address">{{item.address.replace(/[-]/g,' ')}}\n{{item.add_detail}}</text> | 25 | <text class="address">{{item.address.replace(/[-]/g,' ')}}\n{{item.add_detail}}</text> |
| 26 | </view> | 26 | </view> |
| 27 | <image | 27 | <image |
| 28 | @click.stop="toEditAddress(item.add_id)" | 28 | @click.stop="toEditAddress(item.add_id)" |
| 29 | v-if="item.default === '1'" | 29 | v-if="item.default === '1'" |
| 30 | class="arrow" | 30 | class="arrow" |
| 31 | src="../../static/right.png" | 31 | src="../../static/right.png" |
| 32 | ></image> | 32 | ></image> |
| 33 | <image | 33 | <image |
| 34 | @click.stop="toEditAddress(item.add_id)" | 34 | @click.stop="toEditAddress(item.add_id)" |
| 35 | v-else | 35 | v-else |
| 36 | class="arrow pen" | 36 | class="arrow pen" |
| 37 | src="../../static/icon-pen.png" | 37 | src="../../static/icon-pen.png" |
| 38 | ></image> | 38 | ></image> |
| 39 | </view> | 39 | </view> |
| 40 | </view> | 40 | </view> |
| 41 | <view | 41 | <view |
| 42 | v-else | 42 | v-else |
| 43 | class="empty" | 43 | class="empty" |
| 44 | > | 44 | > |
| 45 | 暂无收货地址 | 45 | 暂无收货地址 |
| 46 | </view> | 46 | </view> |
| 47 | <button | 47 | <button |
| 48 | @tap="toAddAddress" | 48 | @tap="toAddAddress" |
| 49 | class="add" | 49 | class="add" |
| 50 | >新建收货地址</button> | 50 | >新建收货地址</button> |
| 51 | </view> | 51 | </view> |
| 52 | </template> | 52 | </template> |
| 53 | 53 | ||
| 54 | <script> | 54 | <script> |
| 55 | import store from '@/store' | 55 | import store from '@/store' |
| 56 | export default { | 56 | export default { |
| 57 | data () { | 57 | data () { |
| 58 | return {} | 58 | return {} |
| 59 | }, | 59 | }, |
| 60 | computed: { | 60 | computed: { |
| 61 | addressList () { | 61 | addressList () { |
| 62 | return this.$store.state.address.list | 62 | return this.$store.state.address.list |
| 63 | }, | 63 | }, |
| 64 | }, | 64 | }, |
| 65 | onLoad ({ edit }) { | 65 | onLoad ({ edit }) { |
| 66 | if (edit) { | 66 | if (edit) { |
| 67 | this.edit = true | 67 | this.edit = true |
| 68 | } | 68 | } |
| 69 | // store.dispatch('address/list') | 69 | // store.dispatch('address/list') |
| 70 | }, | 70 | }, |
| 71 | onShow() { | 71 | onShow() { |
| 72 | store.dispatch('address/list') | 72 | store.dispatch('address/list') |
| 73 | }, | 73 | }, |
| 74 | methods: { | 74 | methods: { |
| 75 | toAddAddress() { | 75 | toAddAddress() { |
| 76 | console.log('aaaaa-a') | 76 | console.log('aaaaa-a') |
| 77 | uni.navigateTo({ | 77 | uni.navigateTo({ |
| 78 | url: 'addAddress', | 78 | url: 'addAddress', |
| 79 | fail: (error) => { | 79 | fail: (error) => { |
| 80 | console.error('跳转出现错误', error) | 80 | console.error('跳转出现错误', error) |
| 81 | }, | 81 | }, |
| 82 | }) | 82 | }) |
| 83 | }, | 83 | }, |
| 84 | toEditAddress(addId) { | 84 | toEditAddress(addId) { |
| 85 | console.log('addId', addId) | 85 | console.log('addId', addId) |
| 86 | uni.navigateTo({ | 86 | uni.navigateTo({ |
| 87 | url: `addAddress?addId=${addId}`, | 87 | url: `addAddress?addId=${addId}`, |
| 88 | fail: (error) => { | 88 | fail: (error) => { |
| 89 | console.error('跳转出现错误', error) | 89 | console.error('跳转出现错误', error) |
| 90 | }, | 90 | }, |
| 91 | }) | 91 | }) |
| 92 | }, | 92 | }, |
| 93 | toOrder(addId) { | 93 | toOrder(addId) { |
| 94 | if (this.edit) { | 94 | if (this.edit) { |
| 95 | const pages = getCurrentPages() | 95 | const pages = getCurrentPages() |
| 96 | const prevPage = pages[pages.length - 2] // 上一个页面 | 96 | const prevPage = pages[pages.length - 2] // 上一个页面 |
| 97 | const addressId = addId | 97 | const addressId = addId |
| 98 | // console.log(addressId) | 98 | // console.log(addressId) |
| 99 | prevPage.onShow(addressId) | 99 | prevPage.onShow(addressId) |
| 100 | uni.navigateBack() | 100 | uni.navigateBack() |
| 101 | // uni.navigateTo({ | 101 | // uni.navigateTo({ |
| 102 | // url: `../confirmOrder/confirmOrder?addressId=${addId}`, | 102 | // url: `../confirmOrder/confirmOrder?addressId=${addId}`, |
| 103 | // fail: (error) => { | 103 | // fail: (error) => { |
| 104 | // console.error('跳转出现错误', error) | 104 | // console.error('跳转出现错误', error) |
| 105 | // } | 105 | // } |
| 106 | // }) | 106 | // }) |
| 107 | } | 107 | } |
| 108 | }, | 108 | }, |
| 109 | delAddress(addId) { | 109 | delAddress(addId) { |
| 110 | const that = this | ||
| 110 | uni.showModal({ | 111 | uni.showModal({ |
| 111 | title: '提示', | 112 | title: '提示', |
| 112 | content: '是否删除该条地址', | 113 | content: '是否删除该条地址', |
| 113 | success: function (res) { | 114 | success: function (res) { |
| 114 | if (res.confirm) { | 115 | if (res.confirm) { |
| 115 | if (this.addressList.length > 1) { | 116 | if (that.addressList.length > 1) { |
| 116 | store.dispatch('address/delete', { | 117 | store.dispatch('address/delete', { |
| 117 | add_id: addId, | 118 | add_id: addId, |
| 118 | }).then(() => { | 119 | }).then(() => { |
| 119 | store.dispatch('address/list') | 120 | store.dispatch('address/list') |
| 120 | uni.showToast({ | 121 | uni.showToast({ |
| 121 | title: '删除成功', | 122 | title: '删除成功', |
| 122 | duration: 1000, | 123 | duration: 1000, |
| 123 | }) | 124 | }) |
| 124 | }) | 125 | }) |
| 125 | } else { | 126 | } else { |
| 126 | uni.showToast({ | 127 | uni.showToast({ |
| 127 | title: '请保留至少一条地址信息', | 128 | title: '请保留至少一条地址信息', |
| 129 | icon: 'none', | ||
| 128 | duration: 1000, | 130 | duration: 1000, |
| 129 | }) | 131 | }) |
| 130 | } | 132 | } |
| 131 | } | 133 | } |
| 132 | }, | 134 | }, |
| 133 | }) | 135 | }) |
| 134 | }, | 136 | }, |
| 135 | }, | 137 | }, |
| 136 | } | 138 | } |
| 137 | </script> | 139 | </script> |
| 138 | 140 | ||
| 139 | <style lang="scss"> | 141 | <style lang="scss"> |
| 140 | .content { | 142 | .content { |
| 141 | min-height: 100vh; | 143 | min-height: 100vh; |
| 142 | background-color: #f2f2f2; | 144 | background-color: #f2f2f2; |
| 143 | padding-top: 20rpx; | 145 | padding-top: 20rpx; |
| 144 | padding-bottom: 112rpx; | 146 | padding-bottom: 112rpx; |
| 145 | .order-user { | 147 | .order-user { |
| 146 | width: 670rpx; | 148 | width: 670rpx; |
| 147 | height: 228rpx; | 149 | height: 228rpx; |
| 148 | background: #ffffff; | 150 | background: #ffffff; |
| 149 | border-radius: 14rpx; | 151 | border-radius: 14rpx; |
| 150 | margin: 0 auto; | 152 | margin: 0 auto; |
| 151 | margin-bottom: 20rpx; | 153 | margin-bottom: 20rpx; |
| 152 | position: relative; | 154 | position: relative; |
| 153 | .order-user-head { | 155 | .order-user-head { |
| 154 | display: flex; | 156 | display: flex; |
| 155 | height: 108rpx; | 157 | height: 108rpx; |
| 156 | width: 100%; | 158 | width: 100%; |
| 157 | align-items: center; | 159 | align-items: center; |
| 158 | padding-left: 126rpx; | 160 | padding-left: 126rpx; |
| 159 | box-sizing: border-box; | 161 | box-sizing: border-box; |
| 160 | .name { | 162 | .name { |
| 161 | display: flex; | 163 | display: flex; |
| 162 | justify-content: space-between; | 164 | justify-content: space-between; |
| 163 | font-size: 14px; | 165 | font-size: 14px; |
| 164 | color: #333333; | 166 | color: #333333; |
| 165 | letter-spacing: -0.26px; | 167 | letter-spacing: -0.26px; |
| 166 | margin-right: 20rpx; | 168 | margin-right: 20rpx; |
| 167 | .default { | 169 | .default { |
| 168 | height: 40rpx; | 170 | height: 40rpx; |
| 169 | width: 80rpx; | 171 | width: 80rpx; |
| 170 | background-color: #4a90e2; | 172 | background-color: #4a90e2; |
| 171 | border-radius: 13px; | 173 | border-radius: 13px; |
| 172 | border-radius: 13px; | 174 | border-radius: 13px; |
| 173 | text-align: center; | 175 | text-align: center; |
| 174 | margin-right: 20rpx; | 176 | margin-right: 20rpx; |
| 175 | text { | 177 | text { |
| 176 | display: flex; | 178 | display: flex; |
| 177 | justify-content: center; | 179 | justify-content: center; |
| 178 | align-items: center; | 180 | align-items: center; |
| 179 | font-size: 12px; | 181 | font-size: 12px; |
| 180 | color: #ffffff; | 182 | color: #ffffff; |
| 181 | letter-spacing: -0.23px; | 183 | letter-spacing: -0.23px; |
| 184 | line-height: 40rpx; | ||
| 182 | } | 185 | } |
| 183 | } | 186 | } |
| 184 | } | 187 | } |
| 185 | .mobile { | 188 | .mobile { |
| 186 | font-size: 14px; | 189 | font-size: 14px; |
| 187 | color: #999999; | 190 | color: #999999; |
| 188 | letter-spacing: -0.26px; | 191 | letter-spacing: -0.26px; |
| 189 | } | 192 | } |
| 190 | } | 193 | } |
| 191 | .order-user-body { | 194 | .order-user-body { |
| 192 | display: flex; | 195 | display: flex; |
| 193 | width: 100%; | 196 | width: 100%; |
| 194 | image { | 197 | image { |
| 195 | width: 24px; | 198 | width: 24px; |
| 196 | height: 26px; | 199 | height: 26px; |
| 197 | margin: 12rpx 32rpx 0 40rpx; | 200 | margin: 12rpx 32rpx 0 40rpx; |
| 198 | } | 201 | } |
| 199 | .address { | 202 | .address { |
| 200 | font-weight: bold; | 203 | font-weight: bold; |
| 201 | font-size: 14px; | 204 | font-size: 14px; |
| 202 | color: #333333; | 205 | color: #333333; |
| 203 | letter-spacing: -0.26px; | 206 | letter-spacing: -0.26px; |
| 204 | } | 207 | } |
| 205 | } | 208 | } |
| 206 | .arrow { | 209 | .arrow { |
| 207 | width: 12px; | 210 | width: 12px; |
| 208 | height: 12px; | 211 | height: 12px; |
| 209 | position: absolute; | 212 | position: absolute; |
| 210 | right: 40rpx; | 213 | right: 40rpx; |
| 211 | bottom: 104rpx; | 214 | bottom: 104rpx; |
| 212 | } | 215 | } |
| 213 | } | 216 | } |
| 214 | .empty { | 217 | .empty { |
| 215 | color: #666; | 218 | color: #666; |
| 216 | font-size: 16px; | 219 | font-size: 16px; |
| 217 | text-align: center; | 220 | text-align: center; |
| 218 | padding-top: 30vh; | 221 | padding-top: 30vh; |
| 219 | } | 222 | } |
| 220 | .add { | 223 | .add { |
| 221 | position: fixed; | 224 | position: fixed; |
| 222 | bottom: 0; | 225 | bottom: 0; |
| 223 | left: 0; | 226 | left: 0; |
| 224 | height: 112rpx; | 227 | height: 112rpx; |
| 225 | width: 100%; | 228 | width: 100%; |
| 226 | background-color: #ff6b4a; | 229 | background-color: #ff6b4a; |
| 227 | display: flex; | 230 | display: flex; |
| 228 | justify-content: center; | 231 | justify-content: center; |
| 229 | align-items: center; | 232 | align-items: center; |
| 230 | font-size: 16px; | 233 | font-size: 16px; |
| 231 | color: #ffffff; | 234 | color: #ffffff; |
| 232 | letter-spacing: -0.3px; | 235 | letter-spacing: -0.3px; |
| 233 | } | 236 | } |
| 234 | } | 237 | } |
| 235 | </style> | 238 | </style> |
| 236 | 239 |