index.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. <template>
  2. <view>
  3. <view class="address-window" :class="address.address==true?'on':''">
  4. <view class='title'>选择地址<text class='iconfont icon-guanbi' @tap='close'></text></view>
  5. <view class='list'>
  6. <view class='item acea-row row-between-wrapper' :class='active==index?"font-color":""' v-for="(item,index) in addressList"
  7. @tap='tapAddress(index,item.id)' :key='index'>
  8. <text class='iconfont icon-ditu' :class='active==index?"font-color":""'></text>
  9. <view class='address'>
  10. <view class='name' :class='active==index?"font-color":""'>{{item.real_name}}<text class='phone'>{{item.phone}}</text></view>
  11. <view class='line1'>{{item.province}}{{item.city}}{{item.district}}{{item.detail}}</view>
  12. </view>
  13. <text class='iconfont icon-complete' :class='active==index?"font-color":""'></text>
  14. </view>
  15. </view>
  16. <!-- 无地址 -->
  17. <view class='pictrue' v-if="!is_loading && !addressList.length">
  18. <image src='../../static/images/noAddress.png'></image>
  19. </view>
  20. <view class='addressBnt bg-color' @tap='goAddressPages'>选择其地址</view>
  21. </view>
  22. <view class='mask' catchtouchmove="true" :hidden='address.address==false' @tap='close'></view>
  23. </view>
  24. </template>
  25. <script>
  26. import {
  27. getAddressList
  28. } from '@/api/user.js';
  29. export default {
  30. props: {
  31. pagesUrl: {
  32. type: String,
  33. default: '',
  34. },
  35. address: {
  36. type: Object,
  37. default: function() {
  38. return {
  39. address: true,
  40. addressId: 0,
  41. };
  42. }
  43. },
  44. isLog: {
  45. type: Boolean,
  46. default: false,
  47. },
  48. },
  49. data() {
  50. return {
  51. active: 0,
  52. //地址列表
  53. addressList: [],
  54. is_loading: true
  55. };
  56. },
  57. methods: {
  58. tapAddress: function(e, addressid) {
  59. this.active = e;
  60. this.$emit('OnChangeAddress', addressid);
  61. },
  62. close: function() {
  63. this.$emit('changeClose');
  64. this.$emit('changeTextareaStatus');
  65. },
  66. goAddressPages: function() {
  67. this.$emit('changeClose');
  68. this.$emit('changeTextareaStatus');
  69. uni.navigateTo({
  70. url: this.pagesUrl
  71. });
  72. },
  73. getAddressList: function() {
  74. let that = this;
  75. getAddressList({
  76. page: 1,
  77. limit: 5
  78. }).then(res => {
  79. let addressList = res.data;
  80. //处理默认选中项
  81. for (let i = 0, leng = addressList.length; i < leng; i++) {
  82. if (addressList[i].id == that.address.addressId) {
  83. that.active = i;
  84. }
  85. }
  86. that.$set(that, 'addressList', addressList);
  87. that.is_loading = false;
  88. })
  89. }
  90. }
  91. }
  92. </script>
  93. <style scoped lang="scss">
  94. .address-window {
  95. background-color: #fff;
  96. position: fixed;
  97. bottom: 0;
  98. left: 0;
  99. width: 100%;
  100. z-index: 101;
  101. transform: translate3d(0, 100%, 0);
  102. transition: all .3s cubic-bezier(.25, .5, .5, .9);
  103. }
  104. .address-window.on {
  105. transform: translate3d(0, 0, 0);
  106. }
  107. .address-window .title {
  108. font-size: 32rpx;
  109. font-weight: bold;
  110. text-align: center;
  111. height: 123rpx;
  112. line-height: 123rpx;
  113. position: relative;
  114. }
  115. .address-window .title .iconfont {
  116. position: absolute;
  117. right: 30rpx;
  118. color: #8a8a8a;
  119. font-size: 35rpx;
  120. }
  121. .address-window .list .item {
  122. margin-left: 30rpx;
  123. padding-right: 30rpx;
  124. border-bottom: 1px solid #eee;
  125. height: 129rpx;
  126. font-size: 25rpx;
  127. color: #333;
  128. }
  129. .address-window .list .item .iconfont {
  130. font-size: 37rpx;
  131. color: #2c2c2c;
  132. }
  133. .address-window .list .item .iconfont.icon-complete {
  134. font-size: 30rpx;
  135. color: #fff;
  136. }
  137. .address-window .list .item .address {
  138. width: 560rpx;
  139. }
  140. .address-window .list .item .address .name {
  141. font-size: 28rpx;
  142. font-weight: bold;
  143. color: #282828;
  144. margin-bottom: 4rpx;
  145. }
  146. .address-window .list .item .address .name .phone {
  147. margin-left: 18rpx;
  148. }
  149. .address-window .addressBnt {
  150. font-size: 30rpx;
  151. font-weight: bold;
  152. color: #fff;
  153. width: 690rpx;
  154. height: 86rpx;
  155. border-radius: 43rpx;
  156. text-align: center;
  157. line-height: 86rpx;
  158. margin: 85rpx auto;
  159. }
  160. .address-window .pictrue {
  161. width: 414rpx;
  162. height: 336rpx;
  163. margin: 0 auto;
  164. }
  165. .address-window .pictrue image {
  166. width: 100%;
  167. height: 100%;
  168. }
  169. </style>