| @ -1,232 +1,233 @@ | |||||
| <template> | <template> | ||||
| <scroll-view scroll-y="true" :style="{height: height}" @scrolltolower="moreAddress"> | |||||
| <uv-radio-group v-model="selectAddress" @change="editDefault" v-if="addressList.length > 0"> | |||||
| <view v-for="item in addressList" :key="item.id" class="address-item"> | |||||
| <view class="address-item-top" @click="select(item)"> | |||||
| <view class="img-box"> | |||||
| <image src="/static/image/address/icon.png" mode="aspectFill"></image> | |||||
| </view> | |||||
| <view class="address-info"> | |||||
| <view class="user-info"> | |||||
| <text class="user-name">{{ item.name }}</text> | |||||
| <text class="user-phone">{{ item.phone }}</text> | |||||
| <text v-if="item.id == selectAddress" class="is-default">默认</text> | |||||
| </view> | |||||
| <view class="address-detail"> | |||||
| {{ item.address + " " + item.addressDetail }} | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <view class="controls" v-if="controls"> | |||||
| <view class="default-checkbox"> | |||||
| <uv-radio :name="item.id" label-disabled size="30rpx" icon-size="30rpx"> | |||||
| 默认地址 | |||||
| </uv-radio> | |||||
| </view> | |||||
| <view class="edit-btn"> | |||||
| <uv-icon name="edit-pen"></uv-icon> | |||||
| <text @click="editAddress(item)" class="control-title">编辑</text> | |||||
| </view> | |||||
| <view class="del-btn" @click="deleteAddress(item.id)"> | |||||
| <uv-icon name="trash"></uv-icon> | |||||
| <text class="control-title">删除</text> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </uv-radio-group> | |||||
| <view style="padding: 100rpx 0;" v-else> | |||||
| <uv-empty mode="history" textSize="28rpx" iconSize="100rpx" /> | |||||
| </view> | |||||
| </scroll-view> | |||||
| <scroll-view :style="{height: height}" scroll-y="true" @scrolltolower="moreAddress"> | |||||
| <uv-radio-group v-if="addressList.length > 0" v-model="selectAddress" @change="editDefault"> | |||||
| <view v-for="item in addressList" :key="item.id" class="address-item"> | |||||
| <view class="address-item-top" @click="select(item)"> | |||||
| <view class="img-box"> | |||||
| <image mode="aspectFill" src="/static/image/address/icon.png"></image> | |||||
| </view> | |||||
| <view class="address-info"> | |||||
| <view class="user-info"> | |||||
| <text class="user-name">{{ item.name }}</text> | |||||
| <text class="user-phone">{{ item.phone }}</text> | |||||
| <text v-if="item.id == selectAddress" class="is-default">默认</text> | |||||
| </view> | |||||
| <view class="address-detail"> | |||||
| {{ item.address + " " + item.addressDetail }} | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <view v-if="item.defaultFlag=1" class="controls"> | |||||
| <view class="default-checkbox" @click="editDefault(item.id)"> | |||||
| <uv-radio :name="item.id" icon-size="30rpx" label-disabled size="30rpx"> | |||||
| 默认地址 | |||||
| </uv-radio> | |||||
| </view> | |||||
| <view class="edit-btn"> | |||||
| <uv-icon name="edit-pen"></uv-icon> | |||||
| <text class="control-title" @click="editAddress(item)">编辑</text> | |||||
| </view> | |||||
| <view class="del-btn" @click="deleteAddress(item.id)"> | |||||
| <uv-icon name="trash"></uv-icon> | |||||
| <text class="control-title">删除</text> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </uv-radio-group> | |||||
| <view v-else style="padding: 100rpx 0;"> | |||||
| <uv-empty iconSize="100rpx" mode="history" textSize="28rpx"/> | |||||
| </view> | |||||
| </scroll-view> | |||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| export default { | |||||
| props: { | |||||
| controls: { | |||||
| default: false, | |||||
| type: Boolean, | |||||
| }, | |||||
| height: { | |||||
| default: 'calc(90vh - 180rpx)' | |||||
| } | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| selectAddress: 0, | |||||
| queryParams: { | |||||
| pageNo: 1, | |||||
| pageSize: 10, | |||||
| }, | |||||
| addressList: [], | |||||
| total: 0, | |||||
| } | |||||
| }, | |||||
| created() { | |||||
| }, | |||||
| methods: { | |||||
| //获取地址列表 | |||||
| getAddressList() { | |||||
| return new Promise((success, fail) => { | |||||
| this.$api('addressList', this.queryParams, res => { | |||||
| if (res.code == 200) { | |||||
| console.log("res.result.records", res.result.records) | |||||
| this.addressList = res.result.records || []; | |||||
| this.total = res.result.total || 0; | |||||
| this.addressList.forEach(n => { //筛选默认地址 | |||||
| if (n.defaultFlag == 1) { | |||||
| this.selectAddress = n.id | |||||
| } | |||||
| }) | |||||
| success(res.result) | |||||
| } | |||||
| }) | |||||
| }) | |||||
| }, | |||||
| // 加载更多 | |||||
| moreAddress() { | |||||
| if (this.queryParams.pageSize > this.total) { | |||||
| return | |||||
| } | |||||
| this.queryParams.pageSize += 10 | |||||
| this.getAddressList() | |||||
| }, | |||||
| // 删除地址 | |||||
| deleteAddress(e) { | |||||
| this.$emit('deleteAddress', e) | |||||
| }, | |||||
| // 修改地址 | |||||
| editAddress(e) { | |||||
| this.$emit('editAddress', e) | |||||
| }, | |||||
| // 切换默认地址 | |||||
| editDefault(e) { | |||||
| this.$emit('editDefault', e) | |||||
| }, | |||||
| // 选择了地址 | |||||
| select(e) { | |||||
| this.$emit('select', e) | |||||
| }, | |||||
| } | |||||
| } | |||||
| export default { | |||||
| props: { | |||||
| controls: { | |||||
| default: false, | |||||
| type: Boolean, | |||||
| }, | |||||
| height: { | |||||
| default: 'calc(90vh - 180rpx)' | |||||
| } | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| selectAddress: 0, | |||||
| queryParams: { | |||||
| pageNo: 1, | |||||
| pageSize: 10, | |||||
| }, | |||||
| addressList: [], | |||||
| total: 0, | |||||
| } | |||||
| }, | |||||
| created() { | |||||
| }, | |||||
| methods: { | |||||
| //获取地址列表 | |||||
| getAddressList() { | |||||
| return new Promise((success, fail) => { | |||||
| this.$api('addressList', this.queryParams, res => { | |||||
| if (res.code == 200) { | |||||
| console.log("res.result.records", res.result.records) | |||||
| this.addressList = res.result.records || []; | |||||
| this.total = res.result.total || 0; | |||||
| this.addressList.forEach(n => { //筛选默认地址 | |||||
| if (n.defaultFlag == 1) { | |||||
| this.selectAddress = n.id | |||||
| } | |||||
| }) | |||||
| success(res.result) | |||||
| } | |||||
| }) | |||||
| }) | |||||
| }, | |||||
| // 加载更多 | |||||
| moreAddress() { | |||||
| if (this.queryParams.pageSize > this.total) { | |||||
| return | |||||
| } | |||||
| this.queryParams.pageSize += 10 | |||||
| this.getAddressList() | |||||
| }, | |||||
| // 删除地址 | |||||
| deleteAddress(e) { | |||||
| this.$emit('deleteAddress', e) | |||||
| }, | |||||
| // 修改地址 | |||||
| editAddress(e) { | |||||
| this.$emit('editAddress', e) | |||||
| }, | |||||
| // 切换默认地址 | |||||
| editDefault(e) { | |||||
| this.$emit('editDefault', e) | |||||
| }, | |||||
| // 选择了地址 | |||||
| select(e) { | |||||
| this.$emit('select', e) | |||||
| }, | |||||
| } | |||||
| } | |||||
| </script> | </script> | ||||
| <style scoped lang="scss"> | <style scoped lang="scss"> | ||||
| .address-item { | |||||
| background: white; | |||||
| border-radius: 20rpx; | |||||
| overflow: hidden; | |||||
| margin-bottom: 20rpx; | |||||
| padding: 15rpx 15rpx 0rpx 15rpx; | |||||
| width: 680rpx; | |||||
| .address-item-top { | |||||
| border-bottom: 1px dashed #D3D1D1; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| padding: 0rpx 0rpx 15rpx 0rpx; | |||||
| .img-box { | |||||
| width: 120rpx; | |||||
| height: 120rpx; | |||||
| image { | |||||
| width: 75%; | |||||
| height: 75%; | |||||
| display: block; | |||||
| margin: 12.5% auto; | |||||
| } | |||||
| } | |||||
| .address-info { | |||||
| width: calc(100% - 120rpx); | |||||
| height: 100%; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: space-between; | |||||
| .user-info { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| text { | |||||
| display: block; | |||||
| line-height: 40rpx; | |||||
| margin-right: 20rpx; | |||||
| } | |||||
| .user-name, | |||||
| .user-phone { | |||||
| font-size: 30rpx; | |||||
| } | |||||
| .is-default { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| background: #FEB773; | |||||
| color: white; | |||||
| width: 80rpx; | |||||
| height: 35rpx; | |||||
| border-radius: 20rpx; | |||||
| font-size: 22rpx; | |||||
| } | |||||
| } | |||||
| .address-detail { | |||||
| color: #4a4a4a; | |||||
| font-size: 26rpx; | |||||
| overflow: hidden; | |||||
| display: -webkit-box; | |||||
| -webkit-box-orient: vertical; | |||||
| -webkit-line-clamp: 2; | |||||
| text-overflow: ellipsis; | |||||
| } | |||||
| } | |||||
| } | |||||
| .controls { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| font-size: 26rpx; | |||||
| padding: 15rpx 15rpx 25rpx 15rpx; | |||||
| .default-checkbox { | |||||
| display: flex; | |||||
| text { | |||||
| margin-left: 8rpx; | |||||
| } | |||||
| } | |||||
| .control-title { | |||||
| height: 30rpx; | |||||
| line-height: 30rpx; | |||||
| color: #666666; | |||||
| } | |||||
| view { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| } | |||||
| image { | |||||
| width: 23rpx; | |||||
| height: 23rpx; | |||||
| vertical-align: middle; | |||||
| margin-right: 8rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| .address-item { | |||||
| background: white; | |||||
| border-radius: 20rpx; | |||||
| overflow: hidden; | |||||
| margin-bottom: 20rpx; | |||||
| padding: 15rpx 15rpx 0rpx 15rpx; | |||||
| width: 680rpx; | |||||
| .address-item-top { | |||||
| border-bottom: 1px dashed #D3D1D1; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| padding: 0rpx 0rpx 15rpx 0rpx; | |||||
| .img-box { | |||||
| width: 120rpx; | |||||
| height: 120rpx; | |||||
| image { | |||||
| width: 75%; | |||||
| height: 75%; | |||||
| display: block; | |||||
| margin: 12.5% auto; | |||||
| } | |||||
| } | |||||
| .address-info { | |||||
| width: calc(100% - 120rpx); | |||||
| height: 100%; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: space-between; | |||||
| .user-info { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| text { | |||||
| display: block; | |||||
| line-height: 40rpx; | |||||
| margin-right: 20rpx; | |||||
| } | |||||
| .user-name, | |||||
| .user-phone { | |||||
| font-size: 30rpx; | |||||
| } | |||||
| .is-default { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| background: #FEB773; | |||||
| color: white; | |||||
| width: 80rpx; | |||||
| height: 35rpx; | |||||
| border-radius: 20rpx; | |||||
| font-size: 22rpx; | |||||
| } | |||||
| } | |||||
| .address-detail { | |||||
| color: #4a4a4a; | |||||
| font-size: 26rpx; | |||||
| overflow: hidden; | |||||
| display: -webkit-box; | |||||
| -webkit-box-orient: vertical; | |||||
| -webkit-line-clamp: 2; | |||||
| text-overflow: ellipsis; | |||||
| } | |||||
| } | |||||
| } | |||||
| .controls { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| font-size: 26rpx; | |||||
| padding: 15rpx 15rpx 25rpx 15rpx; | |||||
| .default-checkbox { | |||||
| display: flex; | |||||
| text { | |||||
| margin-left: 8rpx; | |||||
| } | |||||
| } | |||||
| .control-title { | |||||
| height: 30rpx; | |||||
| line-height: 30rpx; | |||||
| color: #666666; | |||||
| } | |||||
| view { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| } | |||||
| image { | |||||
| width: 23rpx; | |||||
| height: 23rpx; | |||||
| vertical-align: middle; | |||||
| margin-right: 8rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | </style> | ||||