address.vue 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
  1. <template>
  2. <view class="content b-t">
  3. <view class="list" v-for="(item, index) in addressList" :key="index" @click="checkAddress(item)">
  4. <view class="wrapper">
  5. <view class="address-box">
  6. <text class="name">{{ item.real_name }}</text>
  7. <text class="mobile">{{ item.phone }}</text>
  8. </view>
  9. <view class="u-box">
  10. <text class="address">{{ item.province + item.city + item.district }} {{ item.detail }}</text>
  11. </view>
  12. </view>
  13. <view class="buttom">
  14. <view class="default-buttom" @click.stop="defaultUp(item, index)">
  15. <view class="iconfont iconroundcheckfill checkbox" :class="{ checked: item.is_default == 1 }"></view>
  16. <text class="text">设为默认地址</text>
  17. </view>
  18. <view class="operation">
  19. <view @click.stop="addAddress('edit', item)">
  20. <text class="iconfont iconedit"></text>
  21. <text class="text">编辑</text>
  22. </view>
  23. <view class="blank"></view>
  24. <view @click.stop="delAddress(item)">
  25. <text class="iconfont icondelete"></text>
  26. <text class="text">删除</text>
  27. </view>
  28. </view>
  29. </view>
  30. </view>
  31. <view class="flex add-btn">
  32. <button class="btn" @click="addAddress('add')">新增地址</button>
  33. <!-- #ifdef H5 -->
  34. <!-- <button v-show="isShow" class="btn" @click="getAddress">获取微信地址</button> -->
  35. <!-- #endif -->
  36. </view>
  37. </view>
  38. </template>
  39. <script>
  40. import { getAddressList, addressEdit, addressDel } from '@/api/address.js';
  41. import { mapState } from 'vuex';
  42. import { wechatConfig } from '@/api/wx';
  43. export default {
  44. data() {
  45. return {
  46. source: 0,
  47. addressList: [],
  48. isShow:false
  49. };
  50. },
  51. onShow(){
  52. this.loadAddress();
  53. },
  54. onLoad(option) {
  55. this.source = option.source || 0;
  56. this.loadAddress();
  57. },
  58. computed: {
  59. // #ifdef H5
  60. ...mapState(['weichatObj', 'userInfo'])
  61. // #endif
  62. },
  63. methods: {
  64. // 加载地址
  65. loadAddress() {
  66. getAddressList({
  67. page: 1,
  68. limit: 100
  69. }).then(({ data }) => {
  70. this.addressList = data;
  71. // #ifdef H5
  72. // 判断是否为微信浏览器
  73. if (uni.getStorageSync('weichatBrowser')) {
  74. // 加载微信注册信息
  75. this.isShow = true;
  76. }
  77. // #endif
  78. });
  79. },
  80. // #ifdef H5
  81. //获取微信地址
  82. // getAddress() {
  83. // let weixinObj = require('jweixin-module');
  84. // let obj = this;
  85. // wechatConfig({
  86. // url: window.location.href
  87. // }).then(({ data }) => {
  88. // // 微信信息配置
  89. // weixinObj.config({
  90. // debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  91. // appId: data.appId, // 必填,企业号的唯一标识,此处填写企业号corpid
  92. // timestamp: data.timestamp, // 必填,生成签名的时间戳
  93. // nonceStr: data.nonceStr, // 必填,生成签名的随机串
  94. // signature: data.signature, // 必填,签名,见附录1
  95. // jsApiList: data.jsApiList // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
  96. // });
  97. // weixinObj.ready((e) => {
  98. // weixinObj.openAddress({
  99. // success: function (res) {
  100. // let userName = res.userName; // 收货人姓名
  101. // let postalCode = res.postalCode; // 邮编
  102. // let provinceName = res.provinceName; // 国标收货地址第一级地址(省)
  103. // let cityName = res.cityName; // 国标收货地址第二级地址(市)
  104. // let countryName = res.countryName; // 国标收货地址第三级地址(国家)
  105. // let detailInfo = res.detailInfo; // 详细收货地址信息
  106. // let nationalCode = res.nationalCode; // 收货地址国家码
  107. // let telNumber = res.telNumber; // 收货人手机号码
  108. // addressEdit({
  109. // real_name: userName,
  110. // phone: telNumber,
  111. // address: {
  112. // province: provinceName,
  113. // city: cityName,
  114. // district: countryName
  115. // },
  116. // detail: detailInfo,
  117. // type:1
  118. // })
  119. // .then(({ data }) => {
  120. // obj.loadAddress();
  121. // })
  122. // .catch(e => {
  123. // console.log(e);
  124. // });
  125. // },
  126. // fail: function (res) {
  127. // // 支付成功后的回调函数
  128. // }
  129. // });
  130. // })
  131. // }).catch(e => {
  132. // console.log(e);
  133. // });
  134. // },
  135. // #endif
  136. // 设为默认地址
  137. defaultUp(data, ind) {
  138. this.addressList = this.addressList.map(e => {
  139. e.is_default = 0;
  140. return e;
  141. });
  142. this.addressList[ind].is_default = 1;
  143. addressEdit({
  144. real_name: data.real_name,
  145. phone: data.phone,
  146. address: {
  147. province: data.province,
  148. city: data.city,
  149. district: data.district
  150. },
  151. detail: data.detail,
  152. is_default: 1,
  153. id: data.id,
  154. type:1
  155. })
  156. .then(({ data }) => {
  157. this.loadAddress();
  158. })
  159. .catch(e => {
  160. console.log(e);
  161. });
  162. },
  163. //删除地址
  164. delAddress(item) {
  165. uni.showModal({
  166. content: '确定要删除该地址?',
  167. success: (confirmRes)=> {
  168. addressDel({
  169. id: item.id
  170. }).then(({ data }) => {
  171. this.$api.msg('删除成功');
  172. });
  173. let s = this.addressList.indexOf(item);
  174. this.addressList.splice(s, 1);
  175. }
  176. });
  177. },
  178. //选择地址
  179. checkAddress(item) {
  180. if (this.source == 1) {
  181. //this.$api.prePage()获取上一页实例,在App.vue定义
  182. this.$api.prePage().addressData = item;
  183. uni.navigateBack();
  184. }
  185. },
  186. // 添加地址
  187. addAddress(type, item) {
  188. uni.navigateTo({
  189. url: `/pages/address/addressManage?type=${type}&data=${JSON.stringify(item)}`
  190. });
  191. },
  192. //添加或修改成功之后回调
  193. refreshList() {
  194. // 重新加载地址
  195. this.loadAddress();
  196. }
  197. }
  198. };
  199. </script>
  200. <style lang="scss">
  201. page {
  202. padding-bottom: 120rpx;
  203. padding-top: 20rpx;
  204. }
  205. .content {
  206. position: relative;
  207. }
  208. .list {
  209. align-items: center;
  210. padding: 20rpx 30rpx;
  211. background: #fff;
  212. margin: 20rpx;
  213. margin-top: 0;
  214. .buttom {
  215. display: flex;
  216. align-items: center;
  217. justify-content: space-between;
  218. padding-top: 10rpx;
  219. .checkbox {
  220. font-size: 44rpx;
  221. line-height: 1;
  222. padding: 4rpx;
  223. color: $font-color-disabled;
  224. background: #fff;
  225. border-radius: 50px;
  226. }
  227. .checkbox.checked {
  228. color: #45B1EB !important;
  229. }
  230. .default-buttom {
  231. display: flex;
  232. align-items: center;
  233. }
  234. .operation {
  235. display: flex;
  236. align-items: center;
  237. .blank {
  238. width: 30rpx;
  239. }
  240. }
  241. .text {
  242. padding-left: 10rpx;
  243. font-size: 24rpx;
  244. color: #666666;
  245. }
  246. }
  247. }
  248. .wrapper {
  249. display: flex;
  250. flex-direction: column;
  251. flex: 1;
  252. border-bottom: 1px solid #f0f0f0;
  253. padding-bottom: 20rpx;
  254. }
  255. .address-box {
  256. display: flex;
  257. align-items: center;
  258. justify-content: space-between;
  259. .address {
  260. font-size: $font-base + 2rpx;
  261. color: $font-color-dark;
  262. }
  263. .mobile {
  264. font-size: $font-base;
  265. color: rgba(51, 51, 51, 1);
  266. }
  267. }
  268. .u-box {
  269. font-size: $font-base;
  270. color: $font-color-light;
  271. margin-top: 16rpx;
  272. .name {
  273. margin-right: 30rpx;
  274. }
  275. }
  276. .icon-bianji {
  277. display: flex;
  278. align-items: center;
  279. height: 80rpx;
  280. font-size: 40rpx;
  281. color: $font-color-light;
  282. padding-left: 30rpx;
  283. }
  284. .add-btn {
  285. position: fixed;
  286. left: 30rpx;
  287. right: 30rpx;
  288. bottom: 50rpx;
  289. z-index: 95;
  290. display: flex;
  291. align-items: center;
  292. justify-content: center;
  293. width: 690rpx;
  294. }
  295. .btn {
  296. text-align: center;
  297. margin: 134rpx auto;
  298. width: 670rpx;
  299. height: 88rpx;
  300. background: linear-gradient(0deg, #2E58FF, #32C6FF);
  301. border-radius: 10px;
  302. text-align: center;
  303. line-height: 88rpx;
  304. font-size: 32rpx;
  305. font-family: SourceHanSansCN;
  306. font-weight: 500;
  307. color: #FEFEFE;
  308. }
  309. </style>