address-picker.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  1. <template>
  2. <view class="content">
  3. <view class="address-list">
  4. <view style="margin-bottom: 32rpx">
  5. <view class="ft28" v-if="list.length<=0" style="color: #888;text-align: center;padding: 32rpx 0;">暂无地址
  6. </view>
  7. <block v-else>
  8. <view v-for="(item,index) of list" :key='index' style="margin-bottom: 20rpx;background: #fff;">
  9. <view @click="pickAddress" :data-id="item.id" :data-index="index" class="address-item ft28">
  10. <view class="userinfo flex-row ft28">
  11. <view class="flex-grow-1">收货人:{{item.user_name}}</view>
  12. <view class="flex-grow-0">{{item.tel}}</view>
  13. </view>
  14. <view class="address-detail">收货地址:{{item.address}}</view>
  15. </view>
  16. <view class="box-pack-between" style="padding: 20rpx;">
  17. <!-- <view class="flex-grow-1">
  18. </view> -->
  19. <view class="flex-grow-1">
  20. <block v-if="item.is_default == 1">
  21. <view style="display: inline-block">
  22. <view class="default-address active flex-row flex-y-center">
  23. <image src="/static/icon-checked.png"
  24. style="width: 40rpx;height: 40rpx;margin-right: 12rpx"></image>
  25. <text>默认地址</text>
  26. </view>
  27. </view>
  28. </block>
  29. <block v-else>
  30. <view style="display: inline-block">
  31. <view @tap="setDefaultAddress" class="default-address flex-row flex-y-center"
  32. :data-id='item.id' :data-index="index">
  33. <image src="/static/icon-uncheck.png"
  34. style="width: 40rpx;height: 40rpx;margin-right: 12rpx"></image>
  35. <text>设为默认</text>
  36. </view>
  37. </view>
  38. </block>
  39. </view>
  40. <view class="flex-grow-0 flex-row">
  41. <navigator class="address-option flex-y-center"
  42. :url="'../address-edit/address-edit?id='+item.id">
  43. <image src="/static/icon-edit.png" />
  44. <text>编辑</text>
  45. </navigator>
  46. <view @click="delItem" class="address-option flex-y-center" :data-index="index"
  47. :data-id="item.id">
  48. <image src="/static/icon-delete.png" />
  49. <text>删除</text>
  50. </view>
  51. </view>
  52. </view>
  53. </view>
  54. </block>
  55. </view>
  56. </view>
  57. <view class="bottom-bar ft28">
  58. <navigator url="../address-edit/address-edit" :style="{background:setColor}">添加新地址</navigator>
  59. </view>
  60. </view>
  61. </template>
  62. <script>
  63. export default {
  64. data() {
  65. return {
  66. list: [],
  67. setColor: "",
  68. teen_index: 0,
  69. }
  70. },
  71. onLoad(e) {
  72. this.teen_index = e.teen_index || 0;
  73. uni.setNavigationBarColor({
  74. frontColor: '#ffffff',
  75. backgroundColor: this.$store.state.color,
  76. })
  77. this.setColor = this.$store.state.color;
  78. uni.removeStorageSync('address')
  79. },
  80. onShow(e) {
  81. this.http()
  82. },
  83. methods: {
  84. http() {
  85. this.$http.request('Xcx/MyAddress', {
  86. user_id: uni.getStorageSync('user_id'),
  87. }, "", "", true).then(res => {
  88. this.list = res.data;
  89. })
  90. // this.request({
  91. // url: "Mall/getUserAddressList",
  92. // data: {
  93. // token: uni.getStorageSync("token"),
  94. // },
  95. // }).then(res => {
  96. // console.log(res, "res")
  97. // if (res.code === '200') {
  98. // this.address_list = res.data;
  99. // }
  100. // }).catch((res) => {
  101. // });
  102. },
  103. pickAddress(e) {
  104. var page = this;
  105. var index = e.currentTarget.dataset.index;
  106. var address = this.list[index];
  107. uni.setStorageSync("address", address);
  108. if (this.teen_index == 1) {
  109. uni.redirectTo({
  110. url: "../index/index?teen_index=1"
  111. })
  112. } else {
  113. uni.navigateBack();
  114. }
  115. },
  116. delItem(e) {
  117. var id = e.currentTarget.dataset.id,
  118. index = e.currentTarget.dataset.index;
  119. //当前索引
  120. wx.showModal({
  121. title: '删除提示',
  122. content: '你确定要删除此地址吗?',
  123. showCancel: true,
  124. cancelText: '取消',
  125. confirmText: '删除',
  126. confirmColor: '#ff4544',
  127. success: (res) => {
  128. if (res.confirm)
  129. this.$http.request('Xcx/DelAdd', {
  130. id: id,
  131. }, "", "", "").then(res => {
  132. if (res.code === '200') {
  133. this.list.splice(index, 1)
  134. uni.showToast({
  135. title: "删除成功",
  136. icon: 'none',
  137. duration: 1000
  138. })
  139. uni.removeStorageSync("address")
  140. }
  141. }).catch((res) => {
  142. uni.showToast({
  143. title: res.message,
  144. icon: 'none',
  145. duration: 1000
  146. })
  147. });
  148. }
  149. })
  150. },
  151. //设置默认地址
  152. setDefaultAddress(e) {
  153. var id = e.currentTarget.dataset.id,
  154. index = e.currentTarget.dataset.index;
  155. this.$http.request('Xcx/AddDefault', {
  156. id: id,
  157. }).then(res => {
  158. let list = this.list;
  159. for (var i in list)
  160. list[i].is_default = i == index ? 1 : 2;
  161. this.list = list;
  162. })
  163. },
  164. }
  165. }
  166. </script>
  167. <style lang="scss">
  168. page {
  169. background: #F1F1F1;
  170. }
  171. .bottom-bar {
  172. position: fixed;
  173. bottom: 13px;
  174. left: 0;
  175. width: 100%;
  176. z-index: 1000;
  177. }
  178. .bottom-bar navigator {
  179. width: 686rpx;
  180. margin: 0 auto;
  181. background: #C9271B;
  182. text-align: center;
  183. height: 100rpx;
  184. line-height: 100rpx;
  185. color: #fff;
  186. border-radius: 100px;
  187. }
  188. .address-list {
  189. padding-bottom: 100rpx;
  190. }
  191. .address-item {
  192. background: #fff;
  193. padding: 32rpx 24rpx;
  194. border-bottom: 1rpx solid #e3e3e3;
  195. }
  196. .userinfo {
  197. margin-bottom: 24rpx;
  198. }
  199. .address-detail {}
  200. .address-option {
  201. margin-left: 48rpx;
  202. }
  203. .address-option image {
  204. width: 32rpx;
  205. height: 32rpx;
  206. margin-right: 16rpx;
  207. }
  208. .btn {
  209. display: block;
  210. border: 1rpx solid #ddd;
  211. font-size: 11pt;
  212. color: #555;
  213. padding: 16rpx;
  214. line-height: normal;
  215. background: #fff;
  216. border-radius: 10rpx;
  217. text-align: center;
  218. }
  219. .btn:active {
  220. background: #fff;
  221. opacity: 0.65;
  222. }
  223. .btn:after {
  224. display: none;
  225. }
  226. .btn.btn-green {
  227. background: #C9271B;
  228. color: #fff;
  229. border-color: #C9271B;
  230. }
  231. .btn.btn-red {
  232. background: #ff4544;
  233. color: #fff;
  234. border-color: #ff4544;
  235. }
  236. </style>