mall-address-list.html 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>列表-收货地址-创业帮</title>
  6. <meta name="keywords" content="列表-收货地址-创业帮">
  7. <meta name="description" content="列表-收货地址-创业帮">
  8. <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,shrink-to-fit=no,user-scalable=no" name="viewport" viewport="cover">
  9. <meta name="apple-mobile-web-app-capable" content="yes">
  10. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  11. <meta content="telephone=no" name="format-detection">
  12. <meta content="email=no" name="format-detection">
  13. <meta name="apple-mobile-web-app-title" content="列表-收货地址-创业帮">
  14. <meta http-equiv="Cache-Control" content="no-siteapp">
  15. <link rel="stylesheet" href="./static/css/main.css">
  16. <style>
  17. .mall-bottom{padding:0 .3733rem;height:54px;}
  18. .mall-bottom button{border-radius:999px !important; height:80% !important;}
  19. </style>
  20. </head>
  21. <body class="bgc-back pt0 ovh" style="padding-top:0;">
  22. <div id="app">
  23. <van-nav-bar class="user_rank_explan_title user_title_normal f16 rightbtn" title="收货地址" @click-left="back" v-if="toptitleisshow" left-arrow v-cloak>
  24. <template #left><img src="./static/images/icon-comback@2x.png" alt=""></template>
  25. </van-nav-bar>
  26. <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :class="list.length === 0 ? 'isnodata':''">
  27. <div class="address-list" style="height:calc(100vh - 20px);" v-cloak>
  28. <div class="address_list_add_addressbtn bgcfff df" @click="onAdd">
  29. <div class="add df"><img src="./static/images/address-add.png" alt=""><span class="f14 c333">新增收货地址</span></div>
  30. <van-icon name="arrow"></van-icon>
  31. </div>
  32. <van-list v-model="loading" :finished="finished" @load="onLoad" :immediate-check="false">
  33. <van-empty class="custom-image" image="./static/images/empty-img.png" description="暂无数据" v-if="isnodata"></van-empty>
  34. <van-address-list v-model="chosenAddressId" :list="list" @select="onSelected">
  35. <template #item-bottom="item">
  36. <div class="bottombox df">
  37. <div>
  38. <button class="c999" v-if="item.isDefault">默认地址</button>
  39. </div>
  40. <div class="option df">
  41. <div class="edit df" @click="onEdit(event,item.id)"><img src="./static/images/address-edit.png" alt=""><span class="f12 c666">编辑</span></div>
  42. <div class="delete df" @click="onDel(event,item.id)"><img src="./static/images/address-delete.png" alt=""><span class="f12 c666">删除</span></div>
  43. </div>
  44. </div>
  45. </template>
  46. </van-address-list>
  47. </van-list>
  48. </div>
  49. </van-pull-refresh>
  50. <van-goods-action class="mall-bottom" v-if="!iscenter">
  51. <van-goods-action-button type="default" color="#FFD500" style="color:#333;" text="确认" @click="onClickButton"></van-goods-action-button>
  52. </van-goods-action>
  53. </div>
  54. <script src="./static/js/klm-vv.min.js"></script>
  55. <script src="./static/js/appfunc.min.js"></script>
  56. <script src="./static/js/klm-axios-config.js"></script>
  57. <script src="./static/js/publicfn.js"></script>
  58. <script>
  59. function OnStart(){
  60. app.gettwoaddresslist();
  61. };
  62. // 通过 CDN 引入时不会自动注册 Lazyload 组件
  63. // 可以通过下面的方式手动注册
  64. Vue.use(vant.Lazyload);
  65. // 在 #app 标签下渲染一个按钮组件
  66. let app = new Vue({
  67. el: '#app',
  68. data() {
  69. return {
  70. isnodata:false,
  71. toptitleisshow:false,
  72. active: 0,
  73. chosenAddressId: 0,
  74. list: [
  75. ],
  76. checkaddressId:'',
  77. pageinfo:{
  78. PageSize:10,
  79. PageNum:1
  80. },
  81. loading: false,
  82. finished: false,
  83. refreshing: false,
  84. iscenter:false,
  85. };
  86. },
  87. created() {
  88. this.toptitleisshow = toptitleisshow;
  89. this.getaddresslist('refresh');
  90. if(PublicLib.getCookieInfo('iscentergoing') === 'true'){
  91. this.iscenter = true;
  92. PublicLib.putCookieInfo('iscentergoing','');
  93. };
  94. },
  95. methods: {
  96. onLoad() {
  97. if (this.refreshing) {
  98. this.refreshing = false;
  99. }
  100. this.pageinfo.PageNum++;
  101. this.getaddresslist();
  102. },
  103. onRefresh() {
  104. this.pageinfo.PageNum = 1;
  105. // 清空列表数据
  106. this.finished = false;
  107. // 重新加载数据
  108. // 将 loading 设置为 true,表示处于加载状态
  109. this.loading = true;
  110. if (this.refreshing) {
  111. this.refreshing = false;
  112. }
  113. this.getaddresslist('refresh');
  114. //- this.onLoad();
  115. },
  116. giveToast(str){
  117. vant.Toast(str);
  118. },
  119. onAdd() {
  120. PublicLib.putCookieInfo('addresstype', 1);
  121. PublicLib.Goto({Url:'mall-address-detail'});
  122. },
  123. onEdit(e,id) {
  124. e.stopPropagation()
  125. PublicLib.putCookieInfo('addresstype', 0);
  126. PublicLib.putCookieInfo('editaddressId', id);
  127. PublicLib.Goto({Url:'mall-address-detail'});
  128. },
  129. async onDel(e,Id) {
  130. e.stopPropagation();
  131. const UserId = PublicLib.getCookieInfo('userId');
  132. const res = await postRequest('api/v1/useraddress/delete?t='+Math.random(6),JSON.stringify({Id,UserId}));
  133. if(res.status !== '1'){
  134. return tips(res.info);
  135. }else{
  136. tips('删除地址成功');
  137. this.list.forEach((item,index)=>{
  138. if(item.Id === Id){
  139. this.list.splice(index,1);
  140. };
  141. });
  142. };
  143. },
  144. onSelected(item) {
  145. this.checkaddressId = item.Id;
  146. },
  147. back(){
  148. PublicLib.GoBack({Level:1});
  149. },
  150. //- 点击确定按钮
  151. onClickButton(){
  152. if(this.checkaddressId === '') return tips('请选择收货地址');
  153. PublicLib.putCookieInfo('addressId', this.checkaddressId);
  154. this.back();
  155. },
  156. async getaddresslist(type='onload'){
  157. const UserId = PublicLib.getCookieInfo('userId');
  158. const res = await getRequest('api/v1/useraddress/list?t='+Math.random(6),JSON.stringify({UserId,...this.pageinfo}));
  159. if(res.status !== '1') return tips('获取收货地址列表失败,请重试!');
  160. if(res.data.length<this.pageinfo.PageSize) {
  161. this.finished = true;
  162. };
  163. if(type==='refresh'){
  164. this.list =this.addressfn(res.data);
  165. this.refreshing = false;
  166. }
  167. if(type==='onload'){
  168. this.list.push(...this.addressfn(res.data));
  169. }
  170. //- this.list.push(...this.addressfn(res.data));
  171. this.loading = false;
  172. if(this.list.length === 0) {this.isnodata = true}else{this.isnodata = false};
  173. },
  174. async gettwoaddresslist(){
  175. this.pageinfo.PageNum = 1;
  176. const UserId = PublicLib.getCookieInfo('userId');
  177. const res = await getRequest('api/v1/useraddress/list?t='+Math.random(6),JSON.stringify({UserId,...this.pageinfo}));
  178. if(res.status !== '1') return tips('获取收货地址列表失败,请重试!');
  179. if(res.data.length<this.pageinfo.PageSize) {
  180. this.finished = true;
  181. };
  182. this.list = this.addressfn(res.data);
  183. this.loading = false;
  184. if(this.list.length === 0) {this.isnodata = true}else{this.isnodata = false};
  185. },
  186. //- 地址列表处理函数
  187. addressfn(data){
  188. data.forEach((item,index)=>{
  189. item.name = item.RealName;
  190. item.address = item.Areas.split(',').join('') + item.Address;
  191. item.tel = item.Mobile;
  192. item.id = item.Id;
  193. item.isDefault = item.IsDefault;
  194. if(item.IsDefault) {
  195. this.chosenAddressId = item.Id;
  196. this.checkaddressId = item.Id;
  197. };
  198. });
  199. return data;
  200. },
  201. }
  202. });
  203. </script>
  204. </body>
  205. </html>