mylocation.vue 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444
  1. <template>
  2. <view style="position: relative;">
  3. <!-- 胶囊 -->
  4. <mvBar :mysNavConfig="mysNavConfig"></mvBar>
  5. <view :style="{marginTop:navH}"></view>
  6. <view>
  7. <!-- 收货地址 -->
  8. <view class="card" style="margin-top: 6%;" v-for="item in list">
  9. <view class="">
  10. <view class="" style="display: flex;justify-content:space-around;align-items: center;">
  11. <view class="">
  12. <image class="head-img" :src="picture.icon_loc" mode="">
  13. </image>
  14. </view>
  15. <view class="" style="padding-left: 3%;padding-right: 3%;width: 80%;">
  16. <view style="display: flex;">
  17. <p class='ipon' style="padding-right: 200rpx;">{{item.receiver_name}}</p>
  18. <p class='ipon'>{{item.phone_number}}</p>
  19. </view>
  20. <p class='ipon'>{{item.full_detail_addr}}</p>
  21. </view>
  22. </view>
  23. <view class="" style="border-bottom: 2rpx solid #C0C0C0;margin-top: 3%;margin-bottom: 3%;"> </view>
  24. <view class="func">
  25. <view class="func-left">
  26. <label style="font-size: 28rpx;vertical-align: middle;">
  27. <radio color="#F0D232" :value="item.default_tag" :checked="item.default_tag" style="transform:scale(0.6);
  28. font-size: 24rpx;" @click="setdefault(item)" name="radio" />
  29. </label>
  30. <span>默认地址</span>
  31. </view>
  32. <view class="func-right">
  33. <view class="func-btn" @click="edit(item)">
  34. <image :src="picture.icon_edit" mode="">
  35. </image>
  36. <span>编辑</span>
  37. </view>
  38. <view class="func-btn" @click="del(item)">
  39. <image :src="picture.icon_del" mode="" style="width: 33rpx;height: 33rpx;">
  40. </image>
  41. <span>删除</span>
  42. </view>
  43. </view>
  44. </view>
  45. </view>
  46. </view>
  47. </view>
  48. <view class="" style="width: 100%;height: 150rpx;">
  49. </view>
  50. <view class="signup">
  51. <view class="signupbtn">
  52. <button type="default" class="btn1" @click="addreceipt()">手动添加</button>
  53. </view>
  54. <view class="signupbtn">
  55. <button type="default" class="btn1" @click="chooseAddr()">
  56. <image class="weixinlogo" :src="weixinimage">
  57. </image>
  58. <p class="auto-text">
  59. 自动获取</p>
  60. </button>
  61. </view>
  62. </view>
  63. </view>
  64. </template>
  65. <script>
  66. import region from '@/components/pca-code.json';
  67. import mvBar from "@/components/mys_navBar/mysNavBar";
  68. export default {
  69. components: {
  70. mvBar,
  71. },
  72. data() {
  73. return {
  74. navH: getApp().globalData.navHeight,
  75. weixinimage: "../../../static/img/icon-weixin.png",
  76. picture: getApp().globalData.picture,
  77. list: [],
  78. mysNavConfig: {
  79. /* 开启单页显示首页图标 */
  80. isHome: true,
  81. /* 固定导航 */
  82. navFixed: true,
  83. /* 标题 (屏幕中心居中 两边图标中心居中使用slot center1) */
  84. navTitle: {
  85. text: "收货地址管理",
  86. color: "",
  87. fontSize: "32rpx", // px upx rpx
  88. fontWeight: "normal", // 100 - 700
  89. },
  90. btnType: "type2",
  91. onLeftClick: "",
  92. /* type2 按钮 */
  93. type2Config: {
  94. // 左图标
  95. leftPath: "/static/img/png2.png",
  96. // 右图标
  97. rightPath: "/static/img/png4.png",
  98. // 圆角
  99. radius: "40rpx",
  100. },
  101. },
  102. };
  103. },
  104. onShow() {
  105. this.getlist()
  106. },
  107. onLoad() {},
  108. methods: {
  109. // 列表
  110. getlist() {
  111. return this.$https.get('/youngee/c/t/g/get-talent-address')
  112. .then(res => {
  113. console.log(res)
  114. this.list = res.data.data
  115. for (let k = 0; k < this.list.length; ++k) {
  116. let a = this.list[k].region_code.toString().slice(0, 2)
  117. let b = this.list[k].region_code.toString().slice(0, 4)
  118. let c = 0
  119. for (var i = 0; i < region.length; i++) {
  120. if (region[i].code == a) {
  121. a = region[i].name
  122. for (var j = 0; j < region[i].children.length; j++) {
  123. if (region[i].children[j].code == b) {
  124. b = region[i].children[j].name
  125. for (var o = 0; o < region[i].children[j].children.length; o++) {
  126. if (region[i].children[j].children[o].code == this.list[k]
  127. .region_code) {
  128. c = region[i].children[j].children[o].name
  129. }
  130. }
  131. }
  132. }
  133. }
  134. }
  135. this.list[k].full_detail_addr = a + b + c + this.list[k].detail_addr
  136. }
  137. })
  138. },
  139. // 进入添加收货地址
  140. addreceipt() {
  141. uni.navigateTo({
  142. url: '/page_mycenter/myinformation/addlocation?ismodify=0'
  143. });
  144. },
  145. async chooseAddr() {
  146. const that = this
  147. uni.chooseAddress({
  148. async success(res) {
  149. await that.$https.post('/youngee/c/t/p/add-talent-address', {
  150. region_code: res.nationalCode,
  151. detail_addr: res.provinceName + res.cityName + res.countyName + res
  152. .detailInfo,
  153. phone_number: res.telNumber,
  154. receiver_name: res.userName,
  155. mail_code: res.postalCode,
  156. default_tag: 1
  157. })
  158. .then(res => {
  159. console.log(res)
  160. })
  161. },
  162. fail: (res) => {
  163. console.log(res)
  164. }
  165. })
  166. },
  167. // 改变默认地址
  168. setdefault(item) {
  169. console.log(item.default_tag)
  170. if (item.default_tag === 1)
  171. return
  172. this.$https.post('/youngee/c/t/p/change-default-delivery-addr', {
  173. address_id: item.address_id,
  174. })
  175. .then(res => {
  176. console.log(res)
  177. this.getlist()
  178. uni.showToast({
  179. title: '修改成功'
  180. })
  181. })
  182. },
  183. // 编辑地址
  184. edit(item) {
  185. console.log(item.receiver_name)
  186. uni.navigateTo({
  187. url: '/page_mycenter/myinformation/addlocation?address_id=' + item.address_id + '&ismodify=1'
  188. });
  189. },
  190. // 删除地址
  191. del(item) {
  192. let that = this
  193. uni.showModal({
  194. title: '提示',
  195. content: '确认删除',
  196. success: function(res) {
  197. if (res.confirm) {
  198. console.log(item)
  199. that.$https.post('/youngee/c/t/p/delete-talent-address', {
  200. address_id: item.address_id,
  201. default_tag: item.default_tag,
  202. })
  203. .then(res => {
  204. console.log(res)
  205. that.getlist()
  206. uni.showToast({
  207. title: '删除成功'
  208. })
  209. })
  210. } else if (res.cancel) {
  211. console.log('用户点击取消');
  212. }
  213. },
  214. })
  215. },
  216. }
  217. };
  218. </script>
  219. <style>
  220. </style>
  221. <style lang="scss" scoped>
  222. view {
  223. font-size: 28rpx;
  224. // line-height: inherit;
  225. }
  226. .menu {
  227. position: fixed;
  228. top: 180rpx;
  229. border-bottom: #FCCF41;
  230. background-color: #FFFFFF;
  231. justify-content: space-around;
  232. height: 5%;
  233. width: 100%;
  234. display: flex;
  235. z-index: 10;
  236. }
  237. .menu-item p {
  238. font-weight: 600;
  239. &.lor {
  240. border-bottom: 5rpx solid #F0D232;
  241. color: #F0D232;
  242. padding-bottom: 15rpx;
  243. }
  244. }
  245. .signup {
  246. display: flex;
  247. align-items: center;
  248. justify-content: space-around;
  249. width: 100%;
  250. position: fixed;
  251. padding-bottom: 10rpx;
  252. bottom: 0rpx;
  253. display: flex;
  254. height: 100rpx;
  255. padding-top: 2%;
  256. box-shadow: 0rpx 5rpx 40rpx #ccc;
  257. // width: 100%;
  258. // position: fixed;
  259. // bottom: 0rpx;
  260. // display: flex;
  261. // height: 90rpx;
  262. // background-color: #FFFFFF;
  263. // justify-content: space-around;
  264. // ;
  265. // /* 垂直居中 */
  266. // align-items: center;
  267. }
  268. .signupbtn p {
  269. font-size: 32rpx;
  270. }
  271. .btn1 {
  272. // width: 60%;
  273. background-color: #f2d22d;
  274. color: #000;
  275. border-color: #ffffff;
  276. border-radius: 10rpx;
  277. font-size: 32rpx;
  278. line-height: 200%;
  279. letter-spacing: 10rpx;
  280. font-weight: 500;
  281. height: 100%;
  282. width: 280rpx;
  283. display: flex;
  284. align-items: center;
  285. justify-content: center;
  286. }
  287. .auto-btn {
  288. width: 300rpx;
  289. text-align: center;
  290. background-color: #FCCF41;
  291. border-radius: 10rpx;
  292. color: #FFFFFF;
  293. font-size: 28rpx;
  294. line-height: 180%;
  295. margin-right: 10%;
  296. display: flex;
  297. justify-content: center;
  298. align-items: center;
  299. }
  300. .auto-text {
  301. display: inline-block;
  302. // font-size:32rpx;
  303. }
  304. .weixinlogo {
  305. display: inline-block;
  306. padding-right: 5rpx;
  307. width: 35rpx;
  308. height: 35rpx;
  309. }
  310. .radio {
  311. color: #F0D232;
  312. }
  313. .func {
  314. display: flex;
  315. justify-content: space-between;
  316. }
  317. .func-left {
  318. display: flex;
  319. align-items: center;
  320. }
  321. .func-right {
  322. display: flex;
  323. justify-content: center;
  324. padding: 0 0 0 1%;
  325. }
  326. .func-btn {
  327. display: flex;
  328. align-items: center;
  329. padding-left: 20rpx;
  330. }
  331. .func-btn span {
  332. color: #333333;
  333. font-size: 30rpx;
  334. font-weight: 500;
  335. }
  336. .func-btn image {
  337. vertical-align: middle;
  338. width: 30rpx;
  339. height: 30rpx;
  340. display: inline-block;
  341. padding-right: 14rpx;
  342. }
  343. .head-img {
  344. vertical-align: middle;
  345. width: 50rpx;
  346. height: 50rpx;
  347. display: inline-block;
  348. padding-right: 30rpx;
  349. }
  350. .ipon {
  351. color: #333333;
  352. font-size: 30rpx;
  353. font-weight: 500;
  354. margin-bottom: 10rpx;
  355. }
  356. .card {
  357. width: 88%;
  358. padding: 24rpx;
  359. margin-top: 30rpx;
  360. border-radius: 10rpx;
  361. background-color: #ffffff;
  362. margin: 0 auto;
  363. box-shadow: 0px 0px 10rpx 2rpx #CCCCCC;
  364. }
  365. .butto {
  366. text-align: center;
  367. }
  368. .option {
  369. padding: 20rpx;
  370. }
  371. .uni-margin-wrap {
  372. width: 690rpx;
  373. width: 100%;
  374. ;
  375. }
  376. .swiper {
  377. height: 300rpx;
  378. }
  379. .swiper-item {
  380. display: block;
  381. height: 300rpx;
  382. line-height: 300rpx;
  383. text-align: center;
  384. }
  385. .swiper-list {
  386. margin-top: 40rpx;
  387. margin-bottom: 0;
  388. }
  389. .uni-common-mt {
  390. margin-top: 60rpx;
  391. position: relative;
  392. }
  393. .info {
  394. position: absolute;
  395. right: 20rpx;
  396. }
  397. .uni-padding-wrap {
  398. width: 550rpx;
  399. padding: 0 100rpx;
  400. }
  401. </style>