address.html 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
  7. <title>菩提阁</title>
  8. <link rel="icon" href="../images/favico.ico">
  9. <!--不同屏幕尺寸根字体设置-->
  10. <script src="../js/base.js"></script>
  11. <!--element-ui的样式-->
  12. <link rel="stylesheet" href="../../backend/plugins/element-ui/index.css" />
  13. <!--引入vant样式-->
  14. <link rel="stylesheet" href="../styles/vant.min.css"/>
  15. <!-- 引入样式 -->
  16. <link rel="stylesheet" href="../styles/index.css" />
  17. <!--本页面内容的样式-->
  18. <link rel="stylesheet" href="../styles/address.css" />
  19. </head>
  20. <body>
  21. <div id="address" class="app">
  22. <div class="divHead">
  23. <div class="divTitle">
  24. <i class="el-icon-arrow-left" @click="goBack"></i>地址管理
  25. </div>
  26. </div>
  27. <div class="divContent">
  28. <div class="divItem" v-for="(item,index) in addressList" :key="index" @click.capture="itemClick(item)">
  29. <div class="divAddress">
  30. <span :class="{spanCompany:item.label === '公司',spanHome:item.label === '家',spanSchool:item.label === '学校'}">{{item.label}}</span>
  31. {{item.detail}}
  32. </div>
  33. <div class="divUserPhone">
  34. <span>{{item.consignee}}</span>
  35. <span>{{item.sex === '0' ? '女士' : '先生'}}</span>
  36. <span>{{item.phone}}</span>
  37. </div>
  38. <img src="../images/edit.png" @click.stop.prevent="toAddressEditPage(item)"/>
  39. <div class="divSplit"></div>
  40. <div class="divDefault" >
  41. <img src="../images/checked_true.png" v-if="item.isDefault === 1">
  42. <img src="../images/checked_false.png" @click.stop.prevent="setDefaultAddress(item)" v-else>设为默认地址
  43. </div>
  44. </div>
  45. </div>
  46. <div class="divBottom" @click="toAddressCreatePage">+ 添加收货地址</div>
  47. </div>
  48. <!-- 开发环境版本,包含了有帮助的命令行警告 -->
  49. <script src="../../backend/plugins/vue/vue.js"></script>
  50. <!-- 引入组件库 -->
  51. <script src="../../backend/plugins/element-ui/index.js"></script>
  52. <!-- 引入vant样式 -->
  53. <script src="../js/vant.min.js"></script>
  54. <script src="../api/address.js"></script>
  55. <!-- 引入axios -->
  56. <script src="../../backend/plugins/axios/axios.min.js"></script>
  57. <script src="../js/request.js"></script>
  58. <script>
  59. new Vue({
  60. el:"#address",
  61. data(){
  62. return {
  63. addressList:[
  64. // {
  65. // label:'公司',
  66. // detail:'金燕龙写字楼 4层电梯口fsdfdsfsdfsdfsssssssssssss(电梯可…)',
  67. // consignee:'周先生',//姓名
  68. // phone:18544445566,//手机号
  69. // isDefault:0,//是否是默认
  70. // },
  71. // {
  72. // label:'家',
  73. // detail:'金燕龙写字楼 4层电梯口(电梯可…)',
  74. // consignee:'周先生',//姓名
  75. // phone:18544445566,//手机号
  76. // isDefault:0,//是否是默认
  77. // },
  78. // {
  79. // label:'学校',
  80. // detail:'金燕龙写字楼 4层电梯口(电梯可…)',
  81. // consignee:'周先生',//姓名
  82. // phone:18544445566,//手机号
  83. // isDefault:0,//是否是默认
  84. // },
  85. // {
  86. // label:'公司',
  87. // detail:'金燕龙写字楼 4层电梯口(电梯可…)',
  88. // consignee:'周先生',//姓名
  89. // phone:18544445566,//手机号
  90. // isDefault:0,//是否是默认
  91. // },
  92. // {
  93. // label:'公司',
  94. // detail:'金燕龙写字楼 4层电梯口(电梯可…)',
  95. // consignee:'周先生',//姓名
  96. // phone:18544445566,//手机号
  97. // isDefault:0,//是否是默认
  98. // },
  99. // {
  100. // label:'公司',
  101. // detail:'金燕龙写字楼 4层电梯口(电梯可…)',
  102. // consignee:'周先生',//姓名
  103. // phone:18544445566,//手机号
  104. // isDefault:1,//是否是默认
  105. // }
  106. ],
  107. }
  108. },
  109. computed:{},
  110. created(){
  111. this.initData()
  112. },
  113. mounted(){},
  114. methods:{
  115. goBack(){
  116. history.go(-1)
  117. },
  118. toAddressEditPage(item){
  119. window.requestAnimationFrame(()=>{
  120. window.location.href= `/front/page/address-edit.html?id=${item.id}`
  121. })
  122. },
  123. toAddressCreatePage(){
  124. window.requestAnimationFrame(()=>{
  125. window.location.href= '/front/page/address-edit.html'
  126. })
  127. },
  128. async initData(){
  129. const res = await addressListApi()
  130. if(res.code === 1){
  131. this.addressList = res.data
  132. }else{
  133. this.$message.error(res.msg)
  134. }
  135. },
  136. async setDefaultAddress(item){
  137. if(item.id){
  138. const res = await setDefaultAddressApi({id:item.id})
  139. if(res.code === 1){
  140. this.initData()
  141. }else{
  142. this.$message.error(res.msg)
  143. }
  144. }
  145. },
  146. itemClick(item){
  147. const url = document.referrer
  148. //表示是从订单页面跳转过来的
  149. if(url.includes('order')){
  150. this.setDefaultAddress(item)
  151. history.go(-1)
  152. }
  153. }
  154. }
  155. })
  156. </script>
  157. </body>
  158. </html>