address.vue 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320
  1. <template>
  2. <view class="content">
  3. <view class="inner">
  4. <!-- <view class="top">
  5. <view class="del" @click="delAllAddress">清空地址</view>
  6. </view> -->
  7. <view v-for="(item,index) in address" :key="index" class="address-item">
  8. <view class="info" @click="selectAddress(item)">
  9. <view class="title">
  10. <view v-if="item.isDefault == 1" class="tag">默认</view>
  11. {{item.province}}{{item.city}}{{item.district}}{{item.detail}}
  12. </view>
  13. <view class="name-phone">
  14. <text class="text">{{item.realName}}</text>
  15. <text class="text">{{$parsePhone(item.phone)}}</text>
  16. </view>
  17. </view>
  18. <view class="operat-box">
  19. <image src="/static/images/del1.png" mode="" @click="delAddress(item)"></image>
  20. <image src="/static/images/edit.png" mode="" @click="editAddress(item)"></image>
  21. </view>
  22. </view>
  23. <view v-if="address.length == 0" class="no-data-box" @click="getAddressList()">
  24. <image src="/static/images/no_data.png" mode="aspectFit"></image>
  25. <view class="empty-title">暂无数据</view>
  26. </view>
  27. </view>
  28. <view class="btn-box">
  29. <view class="sub-btn" @click="addAdress">新建收货地址</view>
  30. </view>
  31. </view>
  32. </template>
  33. <script>
  34. import {
  35. userAddr, // 获取用户收货地址
  36. delAddress ,// 删除地址
  37. } from "@/api/order.js"
  38. // import {getAddressList,delAddress,delAllAddress} from '@/api/address'
  39. export default {
  40. data() {
  41. return {
  42. address: [],
  43. }
  44. },
  45. onLoad() {
  46. this.getUserAddr()
  47. uni.$on('refreshAddress', () => {
  48. this.getUserAddr()
  49. })
  50. },
  51. methods: {
  52. // 获取用户收货地址
  53. getUserAddr() {
  54. this.userInfo = JSON.parse(uni.getStorageSync("userInfo"))
  55. userAddr(this.userInfo.userId).then(res => {
  56. if (res.code == 200) {
  57. console.log("用户收货地址>>>>", res.data)
  58. // this.userAddrLiat = res
  59. this.address = res.data;
  60. } else {
  61. uni.showToast({
  62. title: res.msg,
  63. icon: 'none'
  64. });
  65. }
  66. },
  67. rej => {}
  68. );
  69. },
  70. // 选地址
  71. selectAddress(item) {
  72. uni.$emit('updateAddress', item);
  73. uni.navigateBack({
  74. delta: 1
  75. });
  76. },
  77. // 编辑地址
  78. editAddress(item) {
  79. uni.navigateTo({
  80. url: './addAddress?type=edit&addressId=' + item.addressId
  81. })
  82. },
  83. // 删除所有地址(暂无)
  84. // delAllAddress(item) {
  85. // uni.showModal({
  86. // title: "提示",
  87. // content: "确认删除所有地址吗?",
  88. // showCancel: true,
  89. // cancelText: '取消',
  90. // confirmText: '确定',
  91. // success: res => {
  92. // if (res.confirm) {
  93. // var data = {}
  94. // delAllAddress(data).then(
  95. // res => {
  96. // if (res.code == 200) {
  97. // uni.showToast({
  98. // icon: 'success',
  99. // title: "操作成功",
  100. // });
  101. // this.getAddressList()
  102. // } else {
  103. // uni.showToast({
  104. // icon: 'none',
  105. // title: "请求失败",
  106. // });
  107. // }
  108. // },
  109. // rej => {}
  110. // );
  111. // } else {
  112. // // 否则点击了取消
  113. // }
  114. // }
  115. // })
  116. // },
  117. // 删除地址
  118. delAddress(item) {
  119. uni.showModal({
  120. title: "提示",
  121. content: "确认删除此地址吗?",
  122. showCancel: true,
  123. cancelText: '取消',
  124. confirmText: '确定',
  125. success: res => {
  126. if (res.confirm) {
  127. // 用户点击确定
  128. var data = {
  129. addressId: item.addressId
  130. }
  131. delAddress(data).then(
  132. res => {
  133. if (res.code == 200) {
  134. uni.showToast({
  135. icon: 'success',
  136. title: "操作成功",
  137. });
  138. this.getUserAddr()
  139. } else {
  140. uni.showToast({
  141. icon: 'none',
  142. title: "请求失败",
  143. });
  144. }
  145. },
  146. rej => {}
  147. );
  148. } else {
  149. // 否则点击了取消
  150. }
  151. }
  152. })
  153. },
  154. // getAddressList(){
  155. // uni.showLoading({
  156. // title:"正在加载中"
  157. // })
  158. // getAddressList().then(
  159. // res => {
  160. // uni.hideLoading()
  161. // if(res.code==200){
  162. // this.address=res.data;
  163. // }else{
  164. // uni.showToast({
  165. // icon:'none',
  166. // title: "请求失败",
  167. // });
  168. // }
  169. // },
  170. // rej => {}
  171. // );
  172. // },
  173. // 新建收货地址
  174. addAdress() {
  175. uni.navigateTo({
  176. url: './addAddress?type=add'
  177. })
  178. }
  179. }
  180. }
  181. </script>
  182. <style lang="scss">
  183. page {
  184. height: 100%;
  185. }
  186. .content {
  187. height: 100%;
  188. display: flex;
  189. flex-direction: column;
  190. justify-content: space-between;
  191. .inner {
  192. flex: 1;
  193. padding: 20upx 20upx 160upx;
  194. .top {
  195. padding: 0upx 20upx 20upx;
  196. text-align: right;
  197. .del {
  198. font-size: 28upx;
  199. font-family: PingFang SC;
  200. color: #999999;
  201. }
  202. }
  203. .address-item {
  204. background: #FFFFFF;
  205. border-radius: 16upx;
  206. padding: 46upx 40upx 50upx 24upx;
  207. display: flex;
  208. align-items: center;
  209. justify-content: space-between;
  210. margin-bottom: 20upx;
  211. .info {
  212. width: 75%;
  213. .title {
  214. font-size: 30upx;
  215. font-family: PingFang SC;
  216. font-weight: bold;
  217. color: #111111;
  218. line-height: 42upx;
  219. word-break: break-all;
  220. .tag {
  221. padding: 0 6upx;
  222. height: 32upx;
  223. line-height: 32upx;
  224. font-size: 22upx;
  225. font-family: PingFang SC;
  226. font-weight: 500;
  227. color: #FFFFFF;
  228. background: #0bb3f2;
  229. border-radius: 4upx;
  230. float: left;
  231. margin-right: 10upx;
  232. margin-top: 5upx;
  233. }
  234. }
  235. .name-phone {
  236. margin-top: 30upx;
  237. display: flex;
  238. align-items: center;
  239. .text {
  240. font-size: 26upx;
  241. font-family: PingFang SC;
  242. font-weight: 500;
  243. color: #999999;
  244. margin-right: 22upx;
  245. &:last-child {
  246. margin-right: 0;
  247. }
  248. }
  249. }
  250. }
  251. .operat-box {
  252. display: flex;
  253. align-items: center;
  254. image {
  255. width: 30upx;
  256. height: 30upx;
  257. margin-left: 38upx;
  258. &:first-child {
  259. margin-left: 0;
  260. }
  261. }
  262. }
  263. }
  264. }
  265. .no-data-box {
  266. display: flex;
  267. flex-direction: column;
  268. align-items: center;
  269. }
  270. .btn-box {
  271. z-index: 9999;
  272. width: 100%;
  273. padding: 30upx;
  274. position: fixed;
  275. bottom: 0;
  276. left: 0;
  277. box-sizing: border-box;
  278. background: #FFFFFF;
  279. .sub-btn {
  280. height: 88upx;
  281. line-height: 88upx;
  282. text-align: center;
  283. font-size: 30upx;
  284. font-family: PingFang SC;
  285. font-weight: bold;
  286. color: #FFFFFF;
  287. background: #0bb3f2;
  288. border-radius: 44upx;
  289. }
  290. }
  291. }
  292. </style>