|  |  | 
 |  |  | <template> | 
 |  |  |   <!-- 改动的默认地址通过全局变量来控制吧 --> | 
 |  |  |   <view class="flex location-select" @click="goToAddress"> | 
 |  |  |     <uni-icons type="location" size="24" style="padding-top: 16rpx;margin-right: 8rpx;"></uni-icons> | 
 |  |  |     <view class="info"> | 
 |  |  |       <view class="name" v-if="!address.id">请前往设置地址信息</span> | 
 |  |  |       </view> | 
 |  |  |       <view class="name">{{ address.name || '-' }}<span class="tel">{{ address.tel || '-' }}</span> | 
 |  |  |       </view> | 
 |  |  |       <view class="address">{{ address.schoolAreaStr || '' }} {{ address.blockStr || '' }} {{ address.room || '' }} | 
 |  |  |         {{ address.address || '' }} | 
 |  |  |       </view> | 
 |  |  |     </view> | 
 |  |  |     <view class="right-icon" style="padding-top: 16rpx;"> | 
 |  |  |       <uni-icons type="right" size="18" color="#B3B3B3"></uni-icons> | 
 |  |  |     </view> | 
 |  |  |     <!-- 改动的默认地址通过全局变量来控制吧 --> | 
 |  |  |     <view class="flex location-select" @click="goToAddress"> | 
 |  |  |         <uni-icons type="location" size="24" style="padding-top: 16rpx;margin-right: 8rpx;"></uni-icons> | 
 |  |  |         <view class="info"> | 
 |  |  |             <view class="name" v-if="!address.id">请前往设置地址信息</span> | 
 |  |  |             </view> | 
 |  |  |             <view class="name">{{ address.name || '-' }}<span class="tel">{{ address.tel || '-' }}</span> | 
 |  |  |             </view> | 
 |  |  |             <view class="address"> | 
 |  |  |                 {{ address['province'] || '' }}{{ address['city'] && ('/' + address['city']) || '' }}{{ | 
 |  |  |         address['region'] && ('/' + address['region']) || '' | 
 |  |  |       }} | 
 |  |  |                 {{ address.address || '' }} | 
 |  |  |             </view> | 
 |  |  |         </view> | 
 |  |  |         <view class="right-icon" style="padding-top: 16rpx;"> | 
 |  |  |             <uni-icons type="right" size="18" color="#B3B3B3"></uni-icons> | 
 |  |  |         </view> | 
 |  |  |  | 
 |  |  |  | 
 |  |  |   </view> | 
 |  |  |     </view> | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | <script> | 
 |  |  | import { | 
 |  |  |   mapState | 
 |  |  | } from 'vuex' | 
 |  |  |     import { | 
 |  |  |         mapState | 
 |  |  |     } from 'vuex' | 
 |  |  |  | 
 |  |  | export default { | 
 |  |  |   computed: { | 
 |  |  |     ...mapState({ | 
 |  |  |       address: state => { | 
 |  |  |         return state.defaultaddress || {} | 
 |  |  |       }, | 
 |  |  |       currentInfo: state => { | 
 |  |  |         return state.currentInfo || {} | 
 |  |  |       }, | 
 |  |  |     }), | 
 |  |  |   }, | 
 |  |  |   name: "common-address-select", | 
 |  |  |   data() { | 
 |  |  |     return {}; | 
 |  |  |   }, | 
 |  |  |   async mounted() { | 
 |  |  |     await this.init() | 
 |  |  |   }, | 
 |  |  |   methods: { | 
 |  |  |     async init() { | 
 |  |  |       //获取默认地址并且填充 | 
 |  |  |       if (!this.address.id && this.currentInfo.id) { | 
 |  |  |         this.$message.showLoading() | 
 |  |  |         const {data} = await this.$http.request('get', '/api/address/default/detail') | 
 |  |  |         this.$message.hideLoading() | 
 |  |  |         if (data) { | 
 |  |  |           //提交更新默认地址 | 
 |  |  |           this.$store.commit('setDefaultAddress', {...data}) | 
 |  |  |         } | 
 |  |  |       } | 
 |  |  |     export default { | 
 |  |  |         computed: { | 
 |  |  |             ...mapState({ | 
 |  |  |                 address: state => { | 
 |  |  |                     return state.defaultaddress || {} | 
 |  |  |                 }, | 
 |  |  |                 currentInfo: state => { | 
 |  |  |                     return state.currentInfo || {} | 
 |  |  |                 }, | 
 |  |  |             }), | 
 |  |  |         }, | 
 |  |  |         name: "common-address-select", | 
 |  |  |         data() { | 
 |  |  |             return {}; | 
 |  |  |         }, | 
 |  |  |         async mounted() { | 
 |  |  |             await this.init() | 
 |  |  |         }, | 
 |  |  |         methods: { | 
 |  |  |             async init() { | 
 |  |  |                 //获取默认地址并且填充 | 
 |  |  |                 if (!this.address.id && this.currentInfo.id) { | 
 |  |  |                     this.$message.showLoading() | 
 |  |  |                     const { | 
 |  |  |                         data | 
 |  |  |                     } = await this.$http.request('get', '/api/address/default/detail') | 
 |  |  |                     this.$message.hideLoading() | 
 |  |  |                     if (data) { | 
 |  |  |                         //提交更新默认地址 | 
 |  |  |                         this.$store.commit('setDefaultAddress', { | 
 |  |  |                             ...data | 
 |  |  |                         }) | 
 |  |  |                     } | 
 |  |  |                 } | 
 |  |  |  | 
 |  |  |     }, | 
 |  |  |     goToAddress() { | 
 |  |  |       if (!this.currentInfo.id) { | 
 |  |  |         this.$message.showToast('请先前往登录') | 
 |  |  |         return | 
 |  |  |       } | 
 |  |  |       uni.navigateTo({ | 
 |  |  |         url: '/pages/user/address/address?source=select' | 
 |  |  |       }) | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   props: { | 
 |  |  |     // address:{ | 
 |  |  |     //     type:Object, | 
 |  |  |     //     default(){ | 
 |  |  |     //         return {} | 
 |  |  |     //     } | 
 |  |  |     // } | 
 |  |  |   } | 
 |  |  | } | 
 |  |  |             }, | 
 |  |  |             goToAddress() { | 
 |  |  |                 if (!this.currentInfo.id) { | 
 |  |  |                     this.$message.showToast('请先前往登录') | 
 |  |  |                     return | 
 |  |  |                 } | 
 |  |  |                 uni.navigateTo({ | 
 |  |  |                     url: '/pages/user/address/address?source=select' | 
 |  |  |                 }) | 
 |  |  |             } | 
 |  |  |         }, | 
 |  |  |         props: { | 
 |  |  |             // address:{ | 
 |  |  |             //     type:Object, | 
 |  |  |             //     default(){ | 
 |  |  |             //         return {} | 
 |  |  |             //     } | 
 |  |  |             // } | 
 |  |  |         } | 
 |  |  |     } | 
 |  |  | </script> | 
 |  |  |  | 
 |  |  | <style lang="scss"> | 
 |  |  |     .location-select { | 
 |  |  |         .info { | 
 |  |  |  | 
 |  |  | .location-select { | 
 |  |  |   .info { | 
 |  |  |     // margin-bottom: 16rpx; | 
 |  |  |     .name { | 
 |  |  |       font-weight: 400; | 
 |  |  |       font-size: 32rpx; | 
 |  |  |       color: #000000; | 
 |  |  |       margin-left: 6rpx; | 
 |  |  |             // margin-bottom: 16rpx; | 
 |  |  |             .name { | 
 |  |  |                 font-weight: 400; | 
 |  |  |                 font-size: 32rpx; | 
 |  |  |                 color: #000000; | 
 |  |  |                 margin-left: 6rpx; | 
 |  |  |  | 
 |  |  |       .tel { | 
 |  |  |         margin-left: 6rpx; | 
 |  |  |         font-size: 28rpx; | 
 |  |  |         color: #666666; | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |                 .tel { | 
 |  |  |                     margin-left: 6rpx; | 
 |  |  |                     font-size: 28rpx; | 
 |  |  |                     color: #666666; | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |  | 
 |  |  |     .address { | 
 |  |  |       font-size: 24rpx; | 
 |  |  |       color: #666666; | 
 |  |  |       line-height: 28rpx; | 
 |  |  |       margin-top: 6rpx; | 
 |  |  |       max-width: 580rpx; | 
 |  |  |       margin-left: 6rpx; | 
 |  |  |       word-wrap: break-word; | 
 |  |  |     } | 
 |  |  |             .address { | 
 |  |  |                 font-size: 24rpx; | 
 |  |  |                 color: #666666; | 
 |  |  |                 line-height: 28rpx; | 
 |  |  |                 margin-top: 6rpx; | 
 |  |  |                 max-width: 580rpx; | 
 |  |  |                 margin-left: 6rpx; | 
 |  |  |                 word-wrap: break-word; | 
 |  |  |             } | 
 |  |  |  | 
 |  |  |   } | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |   .right-icon { | 
 |  |  |     margin-left: auto; | 
 |  |  |     margin-right: 0rpx; | 
 |  |  |   } | 
 |  |  | } | 
 |  |  |         .right-icon { | 
 |  |  |             margin-left: auto; | 
 |  |  |             margin-right: 0rpx; | 
 |  |  |         } | 
 |  |  |     } | 
 |  |  | </style> |