adress.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <template>
  2. <view class="content b-t">
  3. <view class="list b-b" v-for="(item, index) in addressList" :key="index">
  4. <view @click="checkAddress(item)" class="wrapper">
  5. <view class="u-box">
  6. <text v-if="item.address_is_default == 1" class="tag">↑</text>
  7. <text class="name">{{item.address_realname}}</text>
  8. <text class="mobile">{{item.address_mob_phone}}</text>
  9. </view>
  10. <view class="address-box">
  11. <text class="address">{{item.area_info}} {{item.address_detail}}</text>
  12. </view>
  13. </view>
  14. <van-icon size="30" name="edit" @click="addAddress('edit', item)" color="#D9332E" />
  15. <!-- <text class="yticon icon-bianji" @click.stop="addAddress('edit', item)"></text> -->
  16. </view>
  17. <button class="add-btn" @click="addAddress('add', {})">新增地址</button>
  18. </view>
  19. </template>
  20. <script>
  21. export default {
  22. data() {
  23. return {
  24. source: 0,
  25. addressList: [
  26. ]
  27. }
  28. },
  29. onLoad(option){
  30. this.source = option.source;
  31. this.getlist();
  32. uni.$on("refeshadress",(adress)=>{
  33. this.getlist();
  34. })
  35. },
  36. methods: {
  37. // 获取地址列表
  38. getlist() {
  39. this.request({
  40. url: '/v2/address/index',
  41. method: 'get',
  42. success: (res) => {
  43. this.addressList = res.data.data.address_list;
  44. }
  45. })
  46. },
  47. //选择地址
  48. checkAddress(item){
  49. uni.$emit('getadress', item)
  50. uni.navigateBack();
  51. // if(this.source == 1){
  52. // //this.$api.prePage()获取上一页实例,在App.vue定义
  53. // }
  54. // let items = JSON.stringify(item);
  55. // uni.redirectTo({
  56. // url: `/pages/index/sureBuy?item=${items}`
  57. // });
  58. },
  59. addAddress(type, item){
  60. uni.navigateTo({
  61. url: `/pages/myOrder/adressManger?type=${type}&data=${JSON.stringify(item)}`
  62. })
  63. },
  64. //添加或修改成功之后回调
  65. refreshList(data, type){
  66. //添加或修改后事件,这里直接在最前面添加了一条数据,实际应用中直接刷新地址列表即可
  67. this.addressList.unshift(data);
  68. console.log(data, type);
  69. }
  70. }
  71. }
  72. </script>
  73. <style lang='scss'>
  74. page{
  75. padding-bottom: 120upx;
  76. }
  77. .content{
  78. position: relative;
  79. }
  80. .list{
  81. display: flex;
  82. align-items: center;
  83. padding: 20upx 30upx;;
  84. background: #fff;
  85. position: relative;
  86. }
  87. .wrapper{
  88. display: flex;
  89. flex-direction: column;
  90. flex: 1;
  91. }
  92. .address-box{
  93. display: flex;
  94. align-items: center;
  95. .tag{
  96. font-size: 35upx;
  97. color: $base-color;
  98. margin-right: 10upx;
  99. background: #fffafb;
  100. border-radius: 4upx;
  101. padding: 4upx 10upx;
  102. line-height: 1;
  103. }
  104. .address{
  105. font-size: 30upx;
  106. color: $font-color-dark;
  107. }
  108. }
  109. .u-box{
  110. font-size: 28upx;
  111. color: $font-color-light;
  112. margin-top: 16upx;
  113. .name{
  114. margin-right: 30upx;
  115. }
  116. }
  117. .icon-bianji{
  118. display: flex;
  119. align-items: center;
  120. height: 80upx;
  121. font-size: 40upx;
  122. color: $font-color-light;
  123. padding-left: 30upx;
  124. }
  125. .add-btn{
  126. position: fixed;
  127. left: 30upx;
  128. right: 30upx;
  129. bottom: 16upx;
  130. z-index: 95;
  131. display: flex;
  132. align-items: center;
  133. justify-content: center;
  134. width: 690upx;
  135. height: 80upx;
  136. font-size: 32upx;
  137. color: #fff;
  138. background-color: #D9332E;
  139. border-radius: 10upx;
  140. box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
  141. }
  142. </style>