adress.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  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" 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. name: '刘晓晓',
  28. mobile: '18666666666',
  29. addressName: '贵族皇仕牛排(东城店)',
  30. address: '北京市东城区',
  31. area: 'B区',
  32. default: true
  33. },{
  34. name: '刘大大',
  35. mobile: '18667766666',
  36. addressName: '龙回1区12号楼',
  37. address: '山东省济南市历城区',
  38. area: '西单元302',
  39. default: false,
  40. }
  41. ]
  42. }
  43. },
  44. onLoad(option){
  45. console.log("kkkkk")
  46. console.log(option.source);
  47. this.source = option.source;
  48. this.getlist();
  49. uni.$on("refeshadress",(adress)=>{
  50. this.getlist();
  51. })
  52. },
  53. methods: {
  54. // 获取地址列表
  55. getlist() {
  56. this.request({
  57. url: '/v2/address/index',
  58. method: 'get',
  59. success: (res) => {
  60. this.addressList = res.data.data.address_list;
  61. }
  62. })
  63. },
  64. //选择地址
  65. checkAddress(item){
  66. console.log(item);
  67. uni.$emit('getadress', item)
  68. uni.navigateBack();
  69. // if(this.source == 1){
  70. // //this.$api.prePage()获取上一页实例,在App.vue定义
  71. // }
  72. // let items = JSON.stringify(item);
  73. // uni.redirectTo({
  74. // url: `/pages/index/sureBuy?item=${items}`
  75. // });
  76. },
  77. addAddress(type, item){
  78. console.log(type)
  79. console.log(item)
  80. uni.navigateTo({
  81. url: `/pages/myOrder/adressManger?type=${type}&data=${JSON.stringify(item)}`
  82. })
  83. },
  84. //添加或修改成功之后回调
  85. refreshList(data, type){
  86. //添加或修改后事件,这里直接在最前面添加了一条数据,实际应用中直接刷新地址列表即可
  87. this.addressList.unshift(data);
  88. console.log(data, type);
  89. }
  90. }
  91. }
  92. </script>
  93. <style lang='scss'>
  94. page{
  95. padding-bottom: 120upx;
  96. }
  97. .content{
  98. position: relative;
  99. }
  100. .list{
  101. display: flex;
  102. align-items: center;
  103. padding: 20upx 30upx;;
  104. background: #fff;
  105. position: relative;
  106. }
  107. .wrapper{
  108. display: flex;
  109. flex-direction: column;
  110. flex: 1;
  111. }
  112. .address-box{
  113. display: flex;
  114. align-items: center;
  115. .tag{
  116. font-size: 35upx;
  117. color: $base-color;
  118. margin-right: 10upx;
  119. background: #fffafb;
  120. border-radius: 4upx;
  121. padding: 4upx 10upx;
  122. line-height: 1;
  123. }
  124. .address{
  125. font-size: 30upx;
  126. color: $font-color-dark;
  127. }
  128. }
  129. .u-box{
  130. font-size: 28upx;
  131. color: $font-color-light;
  132. margin-top: 16upx;
  133. .name{
  134. margin-right: 30upx;
  135. }
  136. }
  137. .icon-bianji{
  138. display: flex;
  139. align-items: center;
  140. height: 80upx;
  141. font-size: 40upx;
  142. color: $font-color-light;
  143. padding-left: 30upx;
  144. }
  145. .add-btn{
  146. position: fixed;
  147. left: 30upx;
  148. right: 30upx;
  149. bottom: 16upx;
  150. z-index: 95;
  151. display: flex;
  152. align-items: center;
  153. justify-content: center;
  154. width: 690upx;
  155. height: 80upx;
  156. font-size: 32upx;
  157. color: #fff;
  158. background-color: #D9332E;
  159. border-radius: 10upx;
  160. box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
  161. }
  162. </style>