mall-address-detail.html 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  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. </head>
  17. <body class="bgc-back">
  18. <div id="app" v-cloak>
  19. <van-nav-bar class="user_rank_explan_title user_title_normal f16 rightbtn" :title="addresstype == 1? '新增收货地址':'修改收货地址'" v-if="toptitleisshow" @click-left="back" right-text="保存" @click-right="saveclick" left-arrow v-cloak>
  20. <template #left><img src="./static/images/icon-comback@2x.png" alt=""></template>
  21. </van-nav-bar>
  22. <div class="address-list" v-cloak>
  23. <van-address-edit class="itemaddress" :area-list="areaList" :address-info="addressinfo" show-delete show-set-default show-search-result :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave"></van-address-edit>
  24. </div>
  25. <van-popup v-model="show">内容</van-popup>
  26. </div>
  27. <script src="./static/js/arealist.js"></script>
  28. <script src="./static/js/klm-vv.min.js"></script>
  29. <script src="./static/js/appfunc.min.js"></script>
  30. <script src="./static/js/klm-axios-config.js"></script>
  31. <script src="./static/js/publicfn.js"></script>
  32. <script>
  33. // 通过 CDN 引入时不会自动注册 Lazyload 组件
  34. // 可以通过下面的方式手动注册
  35. Vue.use(vant.Lazyload);
  36. // 在 #app 标签下渲染一个按钮组件
  37. let app = new Vue({
  38. el: '#app',
  39. data() {
  40. return {
  41. toptitleisshow:false,
  42. areaList:areaList,
  43. //- searchResult: [],
  44. show: false,
  45. addresstype:1,
  46. areainfo:{
  47. //- 详细地址
  48. Address:'',
  49. //- 姓名
  50. RealName:'',
  51. //- 手机
  52. Mobile:'',
  53. //- 用户ID
  54. UserId:'',
  55. //- 地区
  56. Areas:'',
  57. //- 是否默认地址
  58. IsDefault:'',
  59. },
  60. addressinfo:{
  61. name:'', // 姓名
  62. tel:'', // 电话号码
  63. addressDetail:'', // 地址详情
  64. isDefault:'', // 是否为默认地址
  65. areaCode:'', // 地区编码
  66. },
  67. addressId:'',
  68. };
  69. },
  70. created() {
  71. this.toptitleisshow = toptitleisshow;
  72. this.addresstype = PublicLib.getCookieInfo('addresstype');
  73. if(this.addresstype !== '1') {
  74. this.getaddressdetail();
  75. };
  76. },
  77. methods: {
  78. saveclick(){
  79. document.querySelector(".van-button--danger").click();
  80. },
  81. async getaddressdetail(){
  82. this.addressId = PublicLib.getCookieInfo('editaddressId');
  83. const UserId = PublicLib.getCookieInfo('userId');
  84. const res = await getRequest('api/v1/useraddress/detail?t='+Math.random(6),JSON.stringify({Id:this.addressId,UserId}));
  85. if(res.status !== '1') return tips('获取收货地址详情失败,请重试!','middle');
  86. this.addressinfo.name = res.data.RealName;
  87. this.addressinfo.tel = res.data.Mobile;
  88. this.addressinfo.addressDetail = res.data.Address;
  89. this.addressinfo.isDefault = res.data.IsDefault === 1? true : false;
  90. this.getareaCode(res.data.Areas);
  91. },
  92. //- 识别当前用户地区函数
  93. getareaCode(str){
  94. const addresscounty = str.split(',')[str.split(',').length -1]
  95. const addresscity = str.split(',')[str.split(',').length -2]
  96. for(const key in areaList.county_list){
  97. if(addresscounty === areaList.county_list[key]){
  98. this.addressinfo.areaCode = key;
  99. return;
  100. };
  101. };
  102. for(const key in areaList.city_list){
  103. if(addresscity === areaList.city_list[key]){
  104. this.addressinfo.areaCode = key;
  105. };
  106. };
  107. },
  108. onSave(content) {
  109. this.areainfo.Address = content.addressDetail;
  110. this.areainfo.RealName = content.name;
  111. this.areainfo.Mobile = content.tel;
  112. this.areainfo.UserId = PublicLib.getCookieInfo('userId');
  113. this.areainfo.Areas = content.province + "," + content.city + "," + content.county;
  114. this.areainfo.IsDefault = content.isDefault ? 1 : 0;
  115. if(this.addresstype === '1') {
  116. this.saveaddress();
  117. }else{
  118. this.editaddress();
  119. };
  120. },
  121. //- 新增收货地址
  122. async saveaddress(){
  123. const res = await postRequest('api/v1/useraddress/add?t='+Math.random(6),JSON.stringify(this.areainfo));
  124. if(res.status !== '1') return tips('收货地址保存失败!','middle');
  125. tips('收货地址保存成功','middle')
  126. PublicLib.putCookieInfo('addaddressId', res.data.Id);
  127. setTimeout(()=>{
  128. this.back();
  129. },1000);
  130. },
  131. //- 修改收货地址
  132. async editaddress(){
  133. const res = await postRequest('api/v1/useraddress/update?t='+Math.random(6),JSON.stringify({...this.areainfo,Id:this.addressId}));
  134. if(res.status !== '1') return tips('收货地址修改失败!','middle');
  135. tips('收货地址修改成功','middle');
  136. PublicLib.putCookieInfo('addaddressId', res.data.Id);
  137. setTimeout(()=>{
  138. this.back();
  139. },1000);
  140. },
  141. //- 联想搜索保留
  142. //- onChangeDetail(val) {
  143. //- if (val=== "黄") {
  144. //- this.searchResult = [
  145. //- {
  146. //- name: '黄龙万科中心',
  147. //- address: '杭州市西湖区',
  148. //- },
  149. //- ];
  150. //- } else {
  151. //- this.searchResult = [];
  152. //- }
  153. //- },
  154. back(){
  155. PublicLib.GoBack({Level:1});
  156. }
  157. },
  158. });
  159. </script>
  160. </body>
  161. </html>