index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483
  1. <template>
  2. <view :style="colorStyle">
  3. <view class='address-management' :class='addressList.length < 1 && page > 1 ? "fff":""'>
  4. <view class='line'>
  5. <image src='../../../static/images/line.jpg' v-if="addressList.length"></image>
  6. </view>
  7. <radio-group class="radio-group" @change="radioChange" v-if="addressList.length">
  8. <view class='item' v-for="(item,index) in addressList" :key="index">
  9. <view class='address' @click='goOrder(item.id)'>
  10. <view class='consignee'>{{$t(`收货人`)}}:{{item.real_name}}<text
  11. class='phone'>{{item.phone}}</text></view>
  12. <view>{{$t(`收货地址`)}}:{{item.province}}{{item.city}}{{item.district}}{{item.detail}}</view>
  13. </view>
  14. <view class='operation acea-row row-between-wrapper'>
  15. <!-- #ifndef MP -->
  16. <radio class="radio" :value="index.toString()" :checked="item.is_default ? true : false">
  17. <text>{{$t(`设为默认`)}}</text>
  18. </radio>
  19. <!-- #endif -->
  20. <!-- #ifdef MP -->
  21. <radio class="radio" :value="index" :checked="item.is_default ? true : false">
  22. <text>{{$t(`设为默认`)}}</text>
  23. </radio>
  24. <!-- #endif -->
  25. <view class='acea-row row-middle'>
  26. <view @click='editAddress(item.id)'><text class='iconfont icon-bianji'></text>{{$t(`编辑`)}}
  27. </view>
  28. <view @click='delAddress(index)'><text class='iconfont icon-shanchu'></text>{{$t(`删除`)}}
  29. </view>
  30. </view>
  31. </view>
  32. </view>
  33. </radio-group>
  34. <view class='loadingicon acea-row row-center-wrapper' v-if="addressList.length">
  35. <text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
  36. </view>
  37. <view class='noCommodity' v-if="addressList.length < 1 && page > 1">
  38. <view class='pictrue'>
  39. <image :src="imgHost + '/statics/images/noAddress.png'"></image>
  40. </view>
  41. </view>
  42. <view style='height:120rpx;'></view>
  43. <view class='footer acea-row row-between-wrapper'>
  44. <!-- #ifdef APP-PLUS -->
  45. <view class='addressBnt on' @click='addAddress'><text
  46. class='iconfont icon-tianjiadizhi'></text>{{$t(`添加新地址`)}}</view>
  47. <!-- #endif -->
  48. <!-- #ifdef MP-->
  49. <view class='addressBnt wxbnt' @click='addAddress'><text
  50. class='iconfont icon-tianjiadizhi'></text>{{$t(`添加新地址`)}}</view>
  51. <view class='addressBnt' @click='getWxAddress'><text
  52. class='iconfont icon-weixin2'></text>{{$t(`导入微信地址`)}}
  53. </view>
  54. <!-- #endif -->
  55. <!-- #ifdef H5-->
  56. <view class='addressBnt' :class="this.$wechat.isWeixin()?'wxbnt':'on'" @click='addAddress'><text
  57. class='iconfont icon-tianjiadizhi'></text>{{$t(`添加新地址`)}}</view>
  58. <view class=""></view>
  59. <view class='addressBnt' @click='getAddress' v-if="this.$wechat.isWeixin()"><text
  60. class='iconfont icon-weixin2'></text>{{$t(`导入微信地址`)}}</view>
  61. <!-- #endif -->
  62. </view>
  63. </view>
  64. <!-- #ifdef MP -->
  65. <!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
  66. <!-- #endif -->
  67. <!-- #ifndef MP -->
  68. <home></home>
  69. <!-- #endif -->
  70. </view>
  71. </template>
  72. <script>
  73. import {
  74. getAddressList,
  75. setAddressDefault,
  76. delAddress,
  77. editAddress,
  78. postAddress
  79. } from '@/api/user.js';
  80. import {
  81. toLogin
  82. } from '@/libs/login.js';
  83. import {
  84. mapGetters
  85. } from "vuex";
  86. // #ifdef MP
  87. import authorize from '@/components/Authorize';
  88. // #endif
  89. import home from '@/components/home';
  90. import colors from '@/mixins/color.js';
  91. import {
  92. HTTP_REQUEST_URL
  93. } from '@/config/app';
  94. export default {
  95. components: {
  96. // #ifdef MP
  97. authorize,
  98. // #endif
  99. home
  100. },
  101. mixins: [colors],
  102. data() {
  103. return {
  104. imgHost: HTTP_REQUEST_URL,
  105. addressList: [],
  106. cartId: '',
  107. pinkId: 0,
  108. couponId: 0,
  109. loading: false,
  110. loadend: false,
  111. loadTitle: this.$t(`加载更多`),
  112. page: 1,
  113. limit: 20,
  114. isAuto: false, //没有授权的不会自动授权
  115. isShowAuth: false, //是否隐藏授权
  116. news: '',
  117. noCoupon: 0
  118. };
  119. },
  120. computed: mapGetters(['isLogin']),
  121. onLoad(options) {
  122. if (this.isLogin) {
  123. this.cartId = options.cartId || '';
  124. this.noCoupon = options.noCoupon || 0;
  125. this.pinkId = options.pinkId || 0;
  126. this.couponId = options.couponId || 0;
  127. this.news = options.news || 0;
  128. this.getAddressList(true);
  129. } else {
  130. toLogin();
  131. }
  132. },
  133. onShow: function() {
  134. let that = this;
  135. that.getAddressList(true);
  136. },
  137. methods: {
  138. onLoadFun: function() {
  139. this.getAddressList();
  140. },
  141. // 授权关闭
  142. authColse: function(e) {
  143. this.isShowAuth = e
  144. },
  145. /*
  146. * 导入微信地址(小程序)
  147. */
  148. getWxAddress: function() {
  149. let that = this;
  150. uni.authorize({
  151. scope: 'scope.address',
  152. success: function(res) {
  153. uni.chooseAddress({
  154. success: function(res) {
  155. let addressP = {};
  156. addressP.province = res.provinceName;
  157. addressP.city = res.cityName;
  158. addressP.district = res.countyName;
  159. editAddress({
  160. address: addressP,
  161. is_default: 1,
  162. real_name: res.userName,
  163. post_code: res.postalCode,
  164. phone: res.telNumber,
  165. detail: res.detailInfo,
  166. id: 0,
  167. type: 1
  168. }).then(res => {
  169. that.$util.Tips({
  170. title: that.$t(`添加成功`),
  171. icon: 'success'
  172. }, function() {
  173. that.getAddressList(true);
  174. });
  175. }).catch(err => {
  176. return that.$util.Tips({
  177. title: err
  178. });
  179. });
  180. },
  181. fail: function(err) {
  182. if (err.errMsg == 'chooseAddress:cancel') return that.$util
  183. .Tips({
  184. title: that.$t(`取消选择`)
  185. });
  186. },
  187. })
  188. },
  189. fail: function(res) {
  190. uni.showModal({
  191. title: that.$t(`您已拒绝导入微信地址权限`),
  192. content: that.$t(`是否进入权限管理,调整授权?`),
  193. success(res) {
  194. if (res.confirm) {
  195. uni.openSetting({
  196. success: function(res) {}
  197. });
  198. } else if (res.cancel) {
  199. return that.$util.Tips({
  200. title: that.$t(`已取消!`)
  201. });
  202. }
  203. }
  204. })
  205. }
  206. })
  207. },
  208. /*
  209. * 导入微信地址(公众号)
  210. */
  211. getAddress() {
  212. let that = this;
  213. that.$wechat.openAddress().then(userInfo => {
  214. // open();
  215. editAddress({
  216. real_name: userInfo.userName,
  217. phone: userInfo.telNumber,
  218. address: {
  219. province: userInfo.provinceName,
  220. city: userInfo.cityName,
  221. district: userInfo.countryName
  222. },
  223. detail: userInfo.detailInfo,
  224. post_code: userInfo.postalCode,
  225. is_default: 1,
  226. type: 1
  227. })
  228. .then(() => {
  229. that.$util.Tips({
  230. title: that.$t(`添加成功`),
  231. icon: 'success'
  232. }, function() {
  233. // close();
  234. that.getAddressList(true);
  235. });
  236. })
  237. .catch(err => {
  238. // close();
  239. return that.$util.Tips({
  240. title: err || that.$t(`添加失败`)
  241. });
  242. });
  243. });
  244. },
  245. /**
  246. * 获取地址列表
  247. *
  248. */
  249. getAddressList: function(isPage) {
  250. let that = this;
  251. if (isPage) {
  252. that.loadend = false;
  253. that.page = 1;
  254. that.$set(that, 'addressList', []);
  255. };
  256. if (that.loading) return;
  257. if (that.loadend) return;
  258. that.loading = true;
  259. that.loadTitle = '';
  260. getAddressList({
  261. page: that.page,
  262. limit: that.limit
  263. }).then(res => {
  264. let list = res.data;
  265. let loadend = list.length < that.limit;
  266. that.addressList = that.$util.SplitArray(list, that.addressList);
  267. that.$set(that, 'addressList', that.addressList);
  268. that.loadend = loadend;
  269. that.loadTitle = loadend ? that.$t(`我也是有底线的`) : that.$t(`加载更多`);
  270. that.page = that.page + 1;
  271. that.loading = false;
  272. }).catch(err => {
  273. that.loading = false;
  274. that.loadTitle = that.$t(`加载更多`);
  275. });
  276. },
  277. /**
  278. * 设置默认地址
  279. */
  280. radioChange: function(e) {
  281. let index = parseInt(e.detail.value),
  282. that = this;
  283. let address = this.addressList[index];
  284. if (address == undefined) return that.$util.Tips({
  285. title: that.$t(`您设置的默认地址不存在!`)
  286. });
  287. setAddressDefault(address.id).then(res => {
  288. for (let i = 0, len = that.addressList.length; i < len; i++) {
  289. if (i == index) that.addressList[i].is_default = true;
  290. else that.addressList[i].is_default = false;
  291. }
  292. that.$util.Tips({
  293. title: that.$t(`设置成功`),
  294. icon: 'success'
  295. }, function() {
  296. that.$set(that, 'addressList', that.addressList);
  297. });
  298. }).catch(err => {
  299. return that.$util.Tips({
  300. title: err
  301. });
  302. });
  303. },
  304. /**
  305. * 编辑地址
  306. */
  307. editAddress: function(id) {
  308. let cartId = this.cartId,
  309. pinkId = this.pinkId,
  310. couponId = this.couponId;
  311. this.cartId = '';
  312. this.pinkId = '';
  313. this.couponId = '';
  314. uni.navigateTo({
  315. url: '/pages/users/user_address/index?id=' + id + '&cartId=' + cartId + '&pinkId=' +
  316. pinkId + '&couponId=' +
  317. couponId + '&new=' + this.news
  318. })
  319. },
  320. /**
  321. * 删除地址
  322. */
  323. delAddress: function(index) {
  324. let that = this,
  325. address = this.addressList[index];
  326. if (address == undefined) return that.$util.Tips({
  327. title: that.$t(`您删除的地址不存在!`)
  328. });
  329. delAddress(address.id).then(res => {
  330. that.$util.Tips({
  331. title: that.$t(`删除成功`),
  332. icon: 'success'
  333. }, function() {
  334. that.addressList.splice(index, 1);
  335. that.$set(that, 'addressList', that.addressList);
  336. });
  337. }).catch(err => {
  338. return that.$util.Tips({
  339. title: err
  340. });
  341. });
  342. },
  343. /**
  344. * 新增地址
  345. */
  346. addAddress: function() {
  347. let cartId = this.cartId,
  348. pinkId = this.pinkId,
  349. couponId = this.couponId;
  350. this.cartId = '';
  351. this.pinkId = '';
  352. this.couponId = '';
  353. uni.navigateTo({
  354. url: '/pages/users/user_address/index?cartId=' + cartId + '&pinkId=' + pinkId +
  355. '&couponId=' + couponId + '&new=' + this.news
  356. })
  357. },
  358. goOrder: function(id) {
  359. let cartId = '';
  360. let pinkId = '';
  361. let couponId = '';
  362. if (this.cartId && id) {
  363. cartId = this.cartId;
  364. pinkId = this.pinkId;
  365. couponId = this.couponId;
  366. this.cartId = '';
  367. this.pinkId = '';
  368. this.couponId = '';
  369. uni.redirectTo({
  370. url: '/pages/goods/order_confirm/index?is_address=1&new=' + this.news + '&cartId=' +
  371. cartId + '&addressId=' + id + '&pinkId=' +
  372. pinkId + '&couponId=' + couponId + '&noCoupon=' + this.noCoupon
  373. })
  374. }
  375. }
  376. },
  377. onReachBottom: function() {
  378. this.getAddressList();
  379. }
  380. }
  381. </script>
  382. <style>
  383. .address-management.fff {
  384. background-color: #fff;
  385. height: 1300rpx
  386. }
  387. .address-management .line {
  388. width: 100%;
  389. height: 3rpx;
  390. }
  391. .address-management .line image {
  392. width: 100%;
  393. height: 100%;
  394. display: block;
  395. }
  396. .address-management .item {
  397. background-color: #fff;
  398. padding: 0 30rpx;
  399. margin-bottom: 12rpx;
  400. }
  401. .address-management .item .address {
  402. padding: 30rpx 0;
  403. border-bottom: 1rpx solid #eee;
  404. font-size: 28rpx;
  405. color: #282828;
  406. }
  407. .address-management .item .address .consignee {
  408. font-size: 28rpx;
  409. font-weight: bold;
  410. margin-bottom: 8rpx;
  411. }
  412. .address-management .item .address .consignee .phone {
  413. margin-left: 25rpx;
  414. }
  415. .address-management .item .operation {
  416. height: 83rpx;
  417. font-size: 28rpx;
  418. color: #282828;
  419. }
  420. .address-management .item .operation .radio text {
  421. margin-left: 13rpx;
  422. }
  423. .address-management .item .operation .iconfont {
  424. color: #2c2c2c;
  425. font-size: 35rpx;
  426. vertical-align: -2rpx;
  427. margin-right: 10rpx;
  428. }
  429. .address-management .item .operation .iconfont.icon-shanchu {
  430. margin-left: 40rpx;
  431. font-size: 38rpx;
  432. }
  433. .address-management .footer {
  434. position: fixed;
  435. width: 100%;
  436. background-color: #fff;
  437. bottom: 0;
  438. height: 106rpx;
  439. padding: 0 30rpx;
  440. box-sizing: border-box;
  441. }
  442. .address-management .footer .addressBnt {
  443. width: 330rpx;
  444. height: 76rpx;
  445. border-radius: 50rpx;
  446. text-align: center;
  447. line-height: 76rpx;
  448. font-size: 30rpx;
  449. color: #fff;
  450. background-color: var(--view-theme);
  451. }
  452. .address-management .footer .addressBnt.on {
  453. width: 690rpx;
  454. margin: 0 auto;
  455. }
  456. .address-management .footer .addressBnt .iconfont {
  457. font-size: 35rpx;
  458. margin-right: 8rpx;
  459. vertical-align: -1rpx;
  460. }
  461. .address-management .footer .addressBnt.wxbnt {
  462. background-color: #FE960F;
  463. }
  464. </style>