Commit 4e9d88ff79d23d6d1fae728ea41a112ca15bcc89
1 parent
53e23d4958
Exists in
master
新建地址修改
Showing
3 changed files
with
24 additions
and
5 deletions
Show diff stats
src/pages/address/addAddress.vue
| 1 | <template> | 1 | <template> |
| 2 | <form | 2 | <form |
| 3 | class="wrap" | 3 | class="wrap" |
| 4 | @submit="formSubmit" | 4 | @submit="formSubmit" |
| 5 | @reset="formReset" | 5 | @reset="formReset" |
| 6 | > | 6 | > |
| 7 | <view class="content"> | 7 | <view class="content"> |
| 8 | <view class="item,name"> | 8 | <view class="item,name"> |
| 9 | <text class="itemText">姓名</text> | 9 | <text class="itemText">姓名</text> |
| 10 | <input | 10 | <input |
| 11 | placeholder="收货人姓名(真实姓名)" | 11 | placeholder="收货人姓名(真实姓名)" |
| 12 | placeholder-style="color:#B8B8B8" | 12 | placeholder-style="color:#B8B8B8" |
| 13 | name="name" | 13 | name="name" |
| 14 | :value="name" | 14 | :value="name" |
| 15 | /> | 15 | /> |
| 16 | </view> | 16 | </view> |
| 17 | <view class="item,phone"> | 17 | <view class="item,phone"> |
| 18 | <text class="itemText">电话</text> | 18 | <text class="itemText">电话</text> |
| 19 | <input | 19 | <input |
| 20 | placeholder="手机号" | 20 | placeholder="手机号" |
| 21 | type="digit" | 21 | type="digit" |
| 22 | placeholder-style="color:#B8B8B8" | 22 | placeholder-style="color:#B8B8B8" |
| 23 | name="mobile" | 23 | name="mobile" |
| 24 | v-model="mobile" | 24 | v-model="mobile" |
| 25 | /> | 25 | /> |
| 26 | </view> | 26 | </view> |
| 27 | <view class="item,phone"> | 27 | <view class="item,phone"> |
| 28 | <text class="itemText">性别</text> | 28 | <text class="itemText">性别</text> |
| 29 | <picker | 29 | <picker |
| 30 | @change="bindPickerChange" | 30 | @change="bindPickerChange" |
| 31 | :value="index" | 31 | :value="index" |
| 32 | :range="sexArray" | 32 | :range="sexArray" |
| 33 | name="sex" | 33 | name="sex" |
| 34 | > | 34 | > |
| 35 | <view class="uni-input">{{sexArray[sexIndex]}}</view> | 35 | <view class="uni-input">{{sexArray[sexIndex]}}</view> |
| 36 | </picker> | 36 | </picker> |
| 37 | </view> | 37 | </view> |
| 38 | <view class="item,area"> | 38 | <view class="item,area"> |
| 39 | <text class="itemText">地区</text> | 39 | <text class="itemText">地区</text> |
| 40 | <view | 40 | <view |
| 41 | class="btn" | 41 | class="btn" |
| 42 | v-if="pickerText===''" | 42 | v-if="pickerText===''" |
| 43 | @tap="openAddres" | 43 | @tap="openAddres" |
| 44 | >选择省/市/区</view> | 44 | >选择省/市/区</view> |
| 45 | <view | 45 | <view |
| 46 | class="btn" | 46 | class="btn" |
| 47 | v-else | 47 | v-else |
| 48 | @tap="openAddres" | 48 | @tap="openAddres" |
| 49 | >{{pickerText}}</view> | 49 | >{{pickerText}}</view> |
| 50 | <simple-address | 50 | <simple-address |
| 51 | ref="SimpleAddress" | 51 | ref="SimpleAddress" |
| 52 | :pickerValueDefault="cityPickerValueDefault" | 52 | :pickerValueDefault="cityPickerValueDefault" |
| 53 | @onConfirm="onConfirm" | 53 | @onConfirm="onConfirm" |
| 54 | themeColor="#007AFF" | 54 | themeColor="#007AFF" |
| 55 | name="address" | 55 | name="address" |
| 56 | ></simple-address> | 56 | ></simple-address> |
| 57 | </view> | 57 | </view> |
| 58 | <view class="item,address"> | 58 | <view class="item,address"> |
| 59 | <text class="itemText">详细地址</text> | 59 | <text class="itemText">详细地址</text> |
| 60 | <input | 60 | <input |
| 61 | placeholder="街道、小区门牌等详细地址" | 61 | placeholder="街道、小区门牌等详细地址" |
| 62 | name="addDetail" | 62 | name="addDetail" |
| 63 | :value="addDetial" | 63 | :value="addDetial" |
| 64 | /> | 64 | /> |
| 65 | </view> | 65 | </view> |
| 66 | <view class="item,check"> | 66 | <view class="item,check"> |
| 67 | <text class="itemText">设为默认地址</text> | 67 | <text class="itemText">设为默认地址</text> |
| 68 | <switch | 68 | <switch |
| 69 | :checked="isDefalutAddress" | 69 | :checked="isDefalutAddress" |
| 70 | color="#FF6B4A" | 70 | color="#FF6B4A" |
| 71 | style="transform:scale(0.6)" | 71 | style="transform:scale(0.6)" |
| 72 | @change="changeDefalutAddress" | 72 | @change="changeDefalutAddress" |
| 73 | name="isDefault" | 73 | name="isDefault" |
| 74 | /> | 74 | /> |
| 75 | </view> | 75 | </view> |
| 76 | <input /> | 76 | <input /> |
| 77 | </view> | 77 | </view> |
| 78 | <button | 78 | <button |
| 79 | form-type="submit" | 79 | form-type="submit" |
| 80 | class="button" v-if="addId">编辑</button> | ||
| 81 | <button | ||
| 82 | form-type="submit" | ||
| 80 | class="button" | 83 | class="button" |
| 84 | v-else | ||
| 81 | >保存并使用</button> | 85 | >保存并使用</button> |
| 82 | </form> | 86 | </form> |
| 83 | </template> | 87 | </template> |
| 84 | 88 | ||
| 85 | <script> | 89 | <script> |
| 86 | import SimpleAddress from '@/components/SimpleAddress/SimpleAddress.vue' | 90 | import SimpleAddress from '@/components/SimpleAddress/SimpleAddress.vue' |
| 87 | import store from '@/store' | 91 | import store from '@/store' |
| 88 | 92 | ||
| 89 | export default { | 93 | export default { |
| 90 | data () { | 94 | data () { |
| 91 | return { | 95 | return { |
| 92 | cityPickerValueDefault: [0, 0, 1], | 96 | cityPickerValueDefault: [0, 0, 1], |
| 93 | pickerText: '', | 97 | pickerText: '', |
| 94 | isDefalutAddress: true, | 98 | isDefalutAddress: true, |
| 95 | sexArray: ['男', '女'], | 99 | sexArray: ['男', '女'], |
| 96 | sexIndex: 0, | 100 | sexIndex: 0, |
| 97 | flag: 0, | 101 | flag: 0, |
| 98 | addId: undefined, | 102 | addId: undefined, |
| 99 | name: '', | 103 | name: '', |
| 100 | mobile: '', | 104 | mobile: '', |
| 101 | addDetial: '', | 105 | addDetial: '', |
| 102 | isDefault: 0 | 106 | isDefault: 0 |
| 103 | } | 107 | } |
| 104 | }, | 108 | }, |
| 105 | onLoad (option) { | 109 | onLoad (option) { |
| 106 | const { addId } = option | 110 | const { addId } = option |
| 107 | if (addId) { | 111 | if (addId) { |
| 108 | this.addId = addId | 112 | this.addId = addId |
| 109 | store.dispatch('address/details', { | 113 | store.dispatch('address/details', { |
| 110 | add_id: addId | 114 | add_id: addId |
| 111 | }).then(() => { | 115 | }).then(() => { |
| 112 | uni.setNavigationBarTitle({ | 116 | uni.setNavigationBarTitle({ |
| 113 | title: '编辑地址' | 117 | title: '编辑地址' |
| 114 | }) | 118 | }) |
| 115 | const { name, mobile, sex, add_detail: addDetial, default: isDefault } = this.$store.state.address.details | 119 | const { name, mobile, sex, add_detail: addDetial, default: isDefault } = this.$store.state.address.details |
| 116 | console.log('---', this.$store.state.address.details) | 120 | console.log('---', this.$store.state.address.details) |
| 117 | const index = this.$refs.SimpleAddress.queryIndex(this.$store.state.address.details.address.split('-'), 'label') | 121 | const index = this.$refs.SimpleAddress.queryIndex(this.$store.state.address.details.address.split('-'), 'label') |
| 118 | this.cityPickerValueDefault = index.index | 122 | this.cityPickerValueDefault = index.index |
| 119 | this.name = name | 123 | this.name = name |
| 120 | this.mobile = Number(mobile) | 124 | this.mobile = Number(mobile) |
| 121 | this.sexIndex = sex | 125 | this.sexIndex = sex |
| 122 | this.addDetial = addDetial | 126 | this.addDetial = addDetial |
| 123 | this.isDefalutAddress = !!Number(isDefault) | 127 | this.isDefalutAddress = !!Number(isDefault) |
| 124 | }) | 128 | }) |
| 125 | } | 129 | } |
| 126 | }, | 130 | }, |
| 127 | components: { | 131 | components: { |
| 128 | SimpleAddress | 132 | SimpleAddress |
| 129 | }, | 133 | }, |
| 130 | methods: { | 134 | methods: { |
| 131 | openAddres () { | 135 | openAddres () { |
| 132 | this.cityPickerValueDefault = [0, 0, 1] | 136 | this.cityPickerValueDefault = [0, 0, 1] |
| 133 | this.$refs.SimpleAddress.open() | 137 | this.$refs.SimpleAddress.open() |
| 134 | }, | 138 | }, |
| 135 | onConfirm (e) { | 139 | onConfirm (e) { |
| 136 | this.pickerText = e.label | 140 | this.pickerText = e.label |
| 137 | console.log('lll', e, this.pickerText) | 141 | console.log('lll', e, this.pickerText) |
| 138 | }, | 142 | }, |
| 139 | changeDefalutAddress (e) { | 143 | changeDefalutAddress (e) { |
| 140 | this.isDefalutAddress = e.target.value | 144 | this.isDefalutAddress = e.target.value |
| 141 | }, | 145 | }, |
| 142 | bindPickerChange (e) { | 146 | bindPickerChange (e) { |
| 143 | console.log('picker发送选择改变，携带值为', e.target.value) | 147 | console.log('picker发送选择改变，携带值为', e.target.value) |
| 144 | this.sexIndex = e.target.value | 148 | this.sexIndex = e.target.value |
| 145 | }, | 149 | }, |
| 146 | formValidation (formdata) { | 150 | formValidation (formdata) { |
| 147 | const { name, mobile, addDetail } = formdata | 151 | const { name, mobile, addDetail } = formdata |
| 148 | this.flag = false | 152 | this.flag = false |
| 149 | if (name === '') { | 153 | if (name === '') { |
| 150 | uni.showModal({ | 154 | uni.showModal({ |
| 151 | content: '请输入姓名', | 155 | content: '请输入姓名', |
| 152 | showCancel: false | 156 | showCancel: false |
| 153 | }) | 157 | }) |
| 154 | return 0 | 158 | return 0 |
| 155 | } | 159 | } |
| 156 | if (!(/^1[3456789]\d{9}$/.test(mobile))) { | 160 | if (!(/^1[3456789]\d{9}$/.test(mobile))) { |
| 157 | uni.showModal({ | 161 | uni.showModal({ |
| 158 | content: '请输入正确的手机号', | 162 | content: '请输入正确的手机号', |
| 159 | showCancel: false | 163 | showCancel: false |
| 160 | }) | 164 | }) |
| 161 | return 0 | 165 | return 0 |
| 162 | } | 166 | } |
| 163 | if (this.pickerText === '') { | 167 | if (this.pickerText === '') { |
| 164 | uni.showModal({ | 168 | uni.showModal({ |
| 165 | content: '请选择收货地区', | 169 | content: '请选择收货地区', |
| 166 | showCancel: false | 170 | showCancel: false |
| 167 | }) | 171 | }) |
| 168 | return 0 | 172 | return 0 |
| 169 | } | 173 | } |
| 170 | if (addDetail === '') { | 174 | if (addDetail === '') { |
| 171 | uni.showModal({ | 175 | uni.showModal({ |
| 172 | content: '请输入收货详细地址', | 176 | content: '请输入收货详细地址', |
| 173 | showCancel: false | 177 | showCancel: false |
| 174 | }) | 178 | }) |
| 175 | return 0 | 179 | return 0 |
| 176 | } | 180 | } |
| 177 | this.flag = true | 181 | this.flag = true |
| 178 | }, | 182 | }, |
| 179 | formSubmit (e) { | 183 | formSubmit (e) { |
| 180 | const formdata = e.detail.value | 184 | const formdata = e.detail.value |
| 181 | this.formValidation(formdata) | 185 | this.formValidation(formdata) |
| 182 | 186 | ||
| 183 | const { name, mobile, addDetail, isDefault } = formdata | 187 | const { name, mobile, addDetail, isDefault } = formdata |
| 184 | if (this.flag === true) { | 188 | if (this.flag === true) { |
| 185 | const params = { | 189 | const params = { |
| 186 | sex: this.sexIndex, | 190 | sex: this.sexIndex, |
| 187 | name, | 191 | name, |
| 188 | address: this.pickerText, | 192 | address: this.pickerText, |
| 189 | mobile, | 193 | mobile, |
| 190 | default: isDefault ? 1 : 0, | 194 | default: isDefault ? 1 : 0, |
| 191 | add_detail: addDetail, | 195 | add_detail: addDetail, |
| 192 | longitude: 1, | 196 | longitude: 1, |
| 193 | latitude: 1 | 197 | latitude: 1 |
| 194 | } | 198 | } |
| 195 | if (this.addId) { | 199 | if (this.addId) { |
| 196 | params.add_id = this.addId | 200 | params.add_id = this.addId |
| 197 | } | 201 | } |
| 198 | store.dispatch('address/edit', params) | 202 | store.dispatch('address/edit', params).then(() => { |
| 203 | uni.navigateBack({ | ||
| 204 | delta: 1 | ||
| 205 | }) | ||
| 206 | }) | ||
| 199 | } | 207 | } |
| 200 | } | 208 | } |
| 201 | } | 209 | } |
| 202 | } | 210 | } |
| 203 | </script> | 211 | </script> |
| 204 | 212 | ||
| 205 | <style lang="scss"> | 213 | <style lang="scss"> |
| 206 | .wrap { | 214 | .wrap { |
| 207 | height: 100vh; | 215 | height: 100vh; |
| 208 | background-color: #f2f2f2; | 216 | background-color: #f2f2f2; |
| 209 | font-family: PingFangSC-Regular; | 217 | font-family: PingFangSC-Regular; |
| 210 | letter-spacing: -0.23px; | 218 | letter-spacing: -0.23px; |
| 211 | padding-top: 19rpx; | 219 | padding-top: 19rpx; |
| 212 | } | 220 | } |
| 213 | .content { | 221 | .content { |
| 214 | background-color: #ffffff; | 222 | background-color: #ffffff; |
| 215 | border-radius: 8px; | 223 | border-radius: 8px; |
| 216 | border-radius: 8px; | 224 | border-radius: 8px; |
| 217 | padding: 40rpx 56rpx; | 225 | padding: 40rpx 56rpx; |
| 218 | margin-left: 40rpx; | 226 | margin-left: 40rpx; |
| 219 | width: 670rpx; | 227 | width: 670rpx; |
| 220 | box-sizing: border-box; | 228 | box-sizing: border-box; |
| 221 | .item { | 229 | .item { |
| 222 | display: flex; | 230 | display: flex; |
| 223 | justify-content: flex-start; | 231 | justify-content: flex-start; |
| 224 | font-size: 14px; | 232 | font-size: 14px; |
| 225 | align-items: center; | 233 | align-items: center; |
| 226 | height: 112rpx; | 234 | height: 112rpx; |
| 227 | border-bottom: 1rpx solid #e9e9e9; | 235 | border-bottom: 1rpx solid #e9e9e9; |
| 228 | .itemText { | 236 | .itemText { |
| 229 | width: 162rpx; | 237 | width: 162rpx; |
| 230 | font-family: PingFangSC-Regular; | 238 | font-family: PingFangSC-Regular; |
| 231 | letter-spacing: -0.26px; | 239 | letter-spacing: -0.26px; |
| 232 | } | 240 | } |
| 233 | .btn { | 241 | .btn { |
| 234 | color: #333333 !important; | 242 | color: #333333 !important; |
| 235 | } | 243 | } |
| 236 | } | 244 | } |
| 237 | .check { | 245 | .check { |
| 238 | justify-content: space-between; | 246 | justify-content: space-between; |
| 239 | } | 247 | } |
| 240 | } | 248 | } |
| 241 | .button { | 249 | .button { |
| 242 | position: fixed; | 250 | position: fixed; |
| 243 | bottom: 0; | 251 | bottom: 0; |
| 244 | left: 0; | 252 | left: 0; |
| 245 | height: 112rpx; | 253 | height: 112rpx; |
| 246 | width: 100%; | 254 | width: 100%; |
| 247 | background: #ff6b4a; | 255 | background: #ff6b4a; |
| 248 | display: flex; | 256 | display: flex; |
| 249 | justify-content: center; | 257 | justify-content: center; |
| 250 | align-items: center; | 258 | align-items: center; |
| 251 | font-size: 16px; | 259 | font-size: 16px; |
| 252 | color: #ffffff; | 260 | color: #ffffff; |
| 253 | letter-spacing: -0.3px; | 261 | letter-spacing: -0.3px; |
| 254 | } | 262 | } |
| 255 | </style> | 263 | </style> |
| 256 | 264 |
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 | > | 12 | > |
| 13 | <view class="order-user-head"> | 13 | <view class="order-user-head"> |
| 14 | <view class="name"> | 14 | <view class="name"> |
| 15 | <view | 15 | <view |
| 16 | v-if="item.default === '1'" | 16 | v-if="item.default === '1'" |
| 17 | class="default" | 17 | class="default" |
| 18 | ><text>默认</text></view>{{item.name}} | 18 | ><text>默认</text></view>{{item.name}} |
| 19 | </view> | 19 | </view> |
| 20 | <text class="mobile">{{item.mobile}}</text> | 20 | <text class="mobile">{{item.mobile}}</text> |
| 21 | </view> | 21 | </view> |
| 22 | <view class="order-user-body"> | 22 | <view class="order-user-body"> |
| 23 | <image src="../../static/myorder-paying-location.png"></image> | 23 | <image src="../../static/myorder-paying-location.png"></image> |
| 24 | <text class="address">{{item.address.replace(/[-]/g,' ')}}\n{{item.add_detail}}</text> | 24 | <text class="address">{{item.address.replace(/[-]/g,' ')}}\n{{item.add_detail}}</text> |
| 25 | </view> | 25 | </view> |
| 26 | <image | 26 | <image |
| 27 | @tap="toEditAddress(item.add_id)" | 27 | @tap="toEditAddress(item.add_id)" |
| 28 | v-if="item.default === '1'" | 28 | v-if="item.default === '1'" |
| 29 | class="arrow" | 29 | class="arrow" |
| 30 | src="../../static/right.png" | 30 | src="../../static/right.png" |
| 31 | ></image> | 31 | ></image> |
| 32 | <image | 32 | <image |
| 33 | @tap="toEditAddress(item.add_id)" | 33 | @tap="toEditAddress(item.add_id)" |
| 34 | v-else | 34 | v-else |
| 35 | class="arrow pen" | 35 | class="arrow pen" |
| 36 | src="../../static/icon-pen.png" | 36 | src="../../static/icon-pen.png" |
| 37 | ></image> | 37 | ></image> |
| 38 | </view> | 38 | </view> |
| 39 | </view> | 39 | </view> |
| 40 | <view | 40 | <view |
| 41 | v-else | 41 | v-else |
| 42 | class="empty" | 42 | class="empty" |
| 43 | > | 43 | > |
| 44 | 暂无收货地址 | 44 | 暂无收货地址 |
| 45 | </view> | 45 | </view> |
| 46 | <button class="add">新建收货地址</button> | 46 | <button @tap="toAddAddress" class="add">新建收货地址</button> |
| 47 | </view> | 47 | </view> |
| 48 | </template> | 48 | </template> |
| 49 | 49 | ||
| 50 | <script> | 50 | <script> |
| 51 | import store from '@/store' | 51 | import store from '@/store' |
| 52 | export default { | 52 | export default { |
| 53 | data () { | 53 | data () { |
| 54 | return {} | 54 | return {} |
| 55 | }, | 55 | }, |
| 56 | computed: { | 56 | computed: { |
| 57 | addressList () { | 57 | addressList () { |
| 58 | return this.$store.state.address.list | 58 | return this.$store.state.address.list |
| 59 | } | 59 | } |
| 60 | }, | 60 | }, |
| 61 | onLoad ({ edit }) { | 61 | onLoad ({ edit }) { |
| 62 | if (edit) { | 62 | if (edit) { |
| 63 | this.edit = true | 63 | this.edit = true |
| 64 | } | 64 | } |
| 65 | store.dispatch('address/list') | 65 | store.dispatch('address/list') |
| 66 | }, | 66 | }, |
| 67 | methods: { | 67 | methods: { |
| 68 | toAddAddress() { | ||
| 69 | console.log('aaaaa-a') | ||
| 70 | uni.navigateTo({ | ||
| 71 | url: 'addAddress', | ||
| 72 | fail: (error) => { | ||
| 73 | console.error('跳转出现错误', error) | ||
| 74 | } | ||
| 75 | }) | ||
| 76 | }, | ||
| 68 | toEditAddress (addId) { | 77 | toEditAddress (addId) { |
| 69 | console.log('addId', addId) | 78 | console.log('addId', addId) |
| 70 | uni.navigateTo({ | 79 | uni.navigateTo({ |
| 71 | url: `addAddress?addId=${addId}`, | 80 | url: `addAddress?addId=${addId}`, |
| 72 | fail: (error) => { | 81 | fail: (error) => { |
| 73 | console.error('跳转出现错误', error) | 82 | console.error('跳转出现错误', error) |
| 74 | } | 83 | } |
| 75 | }) | 84 | }) |
| 76 | }, | 85 | }, |
| 77 | toOrder (addId) { | 86 | toOrder (addId) { |
| 78 | if (this.edit) { | 87 | if (this.edit) { |
| 79 | uni.navigateTo({ | 88 | uni.navigateTo({ |
| 80 | url: `../confirmOrder/confirmOrder?addressId=${addId}`, | 89 | url: `../confirmOrder/confirmOrder?addressId=${addId}`, |
| 81 | fail: (error) => { | 90 | fail: (error) => { |
| 82 | console.error('跳转出现错误', error) | 91 | console.error('跳转出现错误', error) |
| 83 | } | 92 | } |
| 84 | }) | 93 | }) |
| 85 | } | 94 | } |
| 86 | } | 95 | } |
| 87 | } | 96 | } |
| 88 | } | 97 | } |
| 89 | </script> | 98 | </script> |
| 90 | 99 | ||
| 91 | <style lang="scss"> | 100 | <style lang="scss"> |
| 92 | .content { | 101 | .content { |
| 93 | min-height: 100vh; | 102 | min-height: 100vh; |
| 94 | background-color: #f2f2f2; | 103 | background-color: #f2f2f2; |
| 95 | padding-top: 20rpx; | 104 | padding-top: 20rpx; |
| 96 | padding-bottom: 112rpx; | 105 | padding-bottom: 112rpx; |
| 97 | .order-user { | 106 | .order-user { |
| 98 | width: 670rpx; | 107 | width: 670rpx; |
| 99 | height: 228rpx; | 108 | height: 228rpx; |
| 100 | background: #ffffff; | 109 | background: #ffffff; |
| 101 | border-radius: 14rpx; | 110 | border-radius: 14rpx; |
| 102 | margin: 0 auto; | 111 | margin: 0 auto; |
| 103 | margin-bottom: 20rpx; | 112 | margin-bottom: 20rpx; |
| 104 | position: relative; | 113 | position: relative; |
| 105 | .order-user-head { | 114 | .order-user-head { |
| 106 | display: flex; | 115 | display: flex; |
| 107 | height: 108rpx; | 116 | height: 108rpx; |
| 108 | width: 100%; | 117 | width: 100%; |
| 109 | align-items: center; | 118 | align-items: center; |
| 110 | margin-left: 126rpx; | 119 | margin-left: 126rpx; |
| 111 | .name { | 120 | .name { |
| 112 | display: flex; | 121 | display: flex; |
| 113 | justify-content: space-between; | 122 | justify-content: space-between; |
| 114 | font-size: 14px; | 123 | font-size: 14px; |
| 115 | color: #333333; | 124 | color: #333333; |
| 116 | letter-spacing: -0.26px; | 125 | letter-spacing: -0.26px; |
| 117 | margin-right: 20rpx; | 126 | margin-right: 20rpx; |
| 118 | .default { | 127 | .default { |
| 119 | height: 40rpx; | 128 | height: 40rpx; |
| 120 | width: 80rpx; | 129 | width: 80rpx; |
| 121 | background-color: #4a90e2; | 130 | background-color: #4a90e2; |
| 122 | border-radius: 13px; | 131 | border-radius: 13px; |
| 123 | border-radius: 13px; | 132 | border-radius: 13px; |
| 124 | text-align: center; | 133 | text-align: center; |
| 125 | margin-right: 20rpx; | 134 | margin-right: 20rpx; |
| 126 | text { | 135 | text { |
| 127 | font-size: 12px; | 136 | font-size: 12px; |
| 128 | color: #ffffff; | 137 | color: #ffffff; |
| 129 | letter-spacing: -0.23px; | 138 | letter-spacing: -0.23px; |
| 130 | } | 139 | } |
| 131 | } | 140 | } |
| 132 | } | 141 | } |
| 133 | .mobile { | 142 | .mobile { |
| 134 | font-size: 14px; | 143 | font-size: 14px; |
| 135 | color: #999999; | 144 | color: #999999; |
| 136 | letter-spacing: -0.26px; | 145 | letter-spacing: -0.26px; |
| 137 | } | 146 | } |
| 138 | } | 147 | } |
| 139 | .order-user-body { | 148 | .order-user-body { |
| 140 | display: flex; | 149 | display: flex; |
| 141 | width: 100%; | 150 | width: 100%; |
| 142 | image { | 151 | image { |
| 143 | width: 24px; | 152 | width: 24px; |
| 144 | height: 26px; | 153 | height: 26px; |
| 145 | margin: 12rpx 32rpx 0 40rpx; | 154 | margin: 12rpx 32rpx 0 40rpx; |
| 146 | } | 155 | } |
| 147 | .address { | 156 | .address { |
| 148 | font-weight: bold; | 157 | font-weight: bold; |
| 149 | font-size: 14px; | 158 | font-size: 14px; |
| 150 | color: #333333; | 159 | color: #333333; |
| 151 | letter-spacing: -0.26px; | 160 | letter-spacing: -0.26px; |
| 152 | } | 161 | } |
| 153 | } | 162 | } |
| 154 | .arrow { | 163 | .arrow { |
| 155 | width: 6px; | 164 | width: 6px; |
| 156 | height: 12px; | 165 | height: 12px; |
| 157 | position: absolute; | 166 | position: absolute; |
| 158 | right: 40rpx; | 167 | right: 40rpx; |
| 159 | bottom: 104rpx; | 168 | bottom: 104rpx; |
| 160 | } | 169 | } |
| 161 | } | 170 | } |
| 162 | .empty { | 171 | .empty { |
| 163 | color: #666; | 172 | color: #666; |
| 164 | font-size: 16px; | 173 | font-size: 16px; |
| 165 | text-align: center; | 174 | text-align: center; |
| 166 | padding-top: 30vh; | 175 | padding-top: 30vh; |
| 167 | } | 176 | } |
| 168 | .add { | 177 | .add { |
| 169 | position: fixed; | 178 | position: fixed; |
| 170 | bottom: 0; | 179 | bottom: 0; |
| 171 | left: 0; | 180 | left: 0; |
| 172 | height: 112rpx; | 181 | height: 112rpx; |
| 173 | width: 100%; | 182 | width: 100%; |
| 174 | background-color: #ff6b4a; | 183 | background-color: #ff6b4a; |
| 175 | display: flex; | 184 | display: flex; |
| 176 | justify-content: center; | 185 | justify-content: center; |
| 177 | align-items: center; | 186 | align-items: center; |
| 178 | font-size: 16px; | 187 | font-size: 16px; |
| 179 | color: #ffffff; | 188 | color: #ffffff; |
| 180 | letter-spacing: -0.3px; | 189 | letter-spacing: -0.3px; |
| 181 | } | 190 | } |
| 182 | } | 191 | } |
| 183 | </style> | 192 | </style> |
| 184 | 193 |
src/store/modules/address.js
| 1 | import urlAlias from '../url' | 1 | import urlAlias from '../url' |
| 2 | import request from '../request' | 2 | import request from '../request' |
| 3 | 3 | ||
| 4 | const { editAddress, addressList, getAddress, getDefaultAddress } = urlAlias | 4 | const { editAddress, addressList, getAddress, getDefaultAddress } = urlAlias |
| 5 | 5 | ||
| 6 | const state = { list: [], detail: {}, defaultInfo: {} } | 6 | const state = { list: [], detail: {}, defaultInfo: {} } |
| 7 | 7 | ||
| 8 | const mutations = { | 8 | const mutations = { |
| 9 | LIST: (state, list) => { | 9 | LIST: (state, list) => { |
| 10 | state.list = list | 10 | state.list = list |
| 11 | }, | 11 | }, |
| 12 | DETAILS: (state, details) => { | 12 | DETAILS: (state, details) => { |
| 13 | state.details = details | 13 | state.details = details |
| 14 | }, | 14 | }, |
| 15 | DEFAULT: (state, data) => { | 15 | DEFAULT: (state, data) => { |
| 16 | state.defaultInfo = data | 16 | state.defaultInfo = data |
| 17 | } | 17 | } |
| 18 | } | 18 | } |
| 19 | 19 | ||
| 20 | const actions = { | 20 | const actions = { |
| 21 | edit(mutations, param, success) { | 21 | edit(mutations, param, success) { |
| 22 | request({ | 22 | return new Promise((resolve) => request({ |
| 23 | url: editAddress, | 23 | url: editAddress, |
| 24 | data: param, | 24 | data: param, |
| 25 | success, | 25 | success: () => { |
| 26 | resolve() | ||
| 27 | }, | ||
| 26 | fail: () => { | 28 | fail: () => { |
| 27 | uni.showModal({ | 29 | uni.showModal({ |
| 28 | content: '编辑失败', | 30 | content: '编辑失败', |
| 29 | showCancel: false | 31 | showCancel: false |
| 30 | }) | 32 | }) |
| 31 | }, | 33 | }, |
| 32 | complete: (res) => { | 34 | complete: (res) => { |
| 33 | console.log('complete status === > ', res) | 35 | console.log('complete status === > ', res) |
| 34 | } | 36 | } |
| 35 | }) | 37 | })) |
| 36 | }, | 38 | }, |
| 37 | list({ commit }) { | 39 | list({ commit }) { |
| 38 | request({ | 40 | request({ |
| 39 | url: addressList, | 41 | url: addressList, |
| 40 | success: (res) => { | 42 | success: (res) => { |
| 41 | commit('LIST', res.data.data) | 43 | commit('LIST', res.data.data) |
| 42 | }, | 44 | }, |
| 43 | fail: () => { | 45 | fail: () => { |
| 44 | uni.showModal({ | 46 | uni.showModal({ |
| 45 | content: '获取地址列表失败', | 47 | content: '获取地址列表失败', |
| 46 | showCancel: false | 48 | showCancel: false |
| 47 | }) | 49 | }) |
| 48 | } | 50 | } |
| 49 | }) | 51 | }) |
| 50 | }, | 52 | }, |
| 51 | details({ commit }, param) { | 53 | details({ commit }, param) { |
| 52 | return new Promise((resolve, reject) => request({ | 54 | return new Promise((resolve, reject) => request({ |
| 53 | url: getAddress, | 55 | url: getAddress, |
| 54 | data: param, | 56 | data: param, |
| 55 | success: (res) => { | 57 | success: (res) => { |
| 56 | commit('DETAILS', res.data.data) | 58 | commit('DETAILS', res.data.data) |
| 57 | resolve({ | 59 | resolve({ |
| 58 | code: res.data.code, | 60 | code: res.data.code, |
| 59 | data: res.data.data | 61 | data: res.data.data |
| 60 | }) | 62 | }) |
| 61 | }, | 63 | }, |
| 62 | fail: () => { | 64 | fail: () => { |
| 63 | uni.showModal({ | 65 | uni.showModal({ |
| 64 | content: '获取地址信息失败', | 66 | content: '获取地址信息失败', |
| 65 | showCancel: false | 67 | showCancel: false |
| 66 | }) | 68 | }) |
| 67 | } | 69 | } |
| 68 | })) | 70 | })) |
| 69 | }, | 71 | }, |
| 70 | default({ commit }, param) { | 72 | default({ commit }, param) { |
| 71 | return new Promise((resolve, reject) => request({ | 73 | return new Promise((resolve, reject) => request({ |
| 72 | url: getDefaultAddress, | 74 | url: getDefaultAddress, |
| 73 | data: param, | 75 | data: param, |
| 74 | success: (res) => { | 76 | success: (res) => { |
| 75 | resolve({ | 77 | resolve({ |
| 76 | code: res.data.code, | 78 | code: res.data.code, |
| 77 | data: res.data.data | 79 | data: res.data.data |
| 78 | }) | 80 | }) |
| 79 | }, | 81 | }, |
| 80 | fail: () => { | 82 | fail: () => { |
| 81 | uni.showModal({ | 83 | uni.showModal({ |
| 82 | content: '获取默认地址信息失败', | 84 | content: '获取默认地址信息失败', |
| 83 | showCancel: false | 85 | showCancel: false |
| 84 | }) | 86 | }) |
| 85 | } | 87 | } |
| 86 | })) | 88 | })) |
| 87 | } | 89 | } |
| 88 | } | 90 | } |
| 89 | 91 | ||
| 90 | export default { | 92 | export default { |
| 91 | namespaced: true, | 93 | namespaced: true, |
| 92 | state, | 94 | state, |
| 93 | mutations, | 95 | mutations, |
| 94 | actions | 96 | actions |
| 95 | } | 97 | } |
| 96 | 98 |