index.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714
  1. +<template>
  2. <view class="content">
  3. <view class="header">
  4. <image src="../../static/images/skm_fn_bg.png" mode="aspectFill" class="bg-img"></image>
  5. <view class="info-block">
  6. <view class="box-pack-between ft32 item flex-y-center flex-grow-1" style="margin: 0;">
  7. <text>{{info.nick_name}}</text>
  8. <view class="ft24 item-off flex">
  9. <view class="flex-grow-1 flex-center" @click="bindcheck" :data-index="index" v-for="(item,index) of switch_list"
  10. :key="index" :class="index==act_index?'act':''">{{item.name}}</view>
  11. </view>
  12. </view>
  13. <view class="flex-center item-content">
  14. <view class="flex-grow-1 ">
  15. <view class="ft38 mab-24">
  16. {{!info.scanned?0:info.scanned}} <text class="ft24">次</text>
  17. </view>
  18. <view class="ft24">
  19. 剩余换量次数
  20. <!-- <image class="wen" src="../../static/images/wen.png" mode=""></image> -->
  21. </view>
  22. </view>
  23. <view class="line"></view>
  24. <view class="flex-grow-1">
  25. <view class="ft38 mab-24">
  26. {{!info.success?0:info.success}} <text class="ft24">次</text>
  27. </view>
  28. <view class="ft24">
  29. 成功换量次数
  30. <!-- <image class="wen" src="../../static/images/wen.png" mode=""></image> -->
  31. </view>
  32. </view>
  33. </view>
  34. </view>
  35. </view>
  36. <view class="main">
  37. <view class="main-home">
  38. <!-- <form @submit="Submit"> -->
  39. <view class="">
  40. <view class="box-pack-between ft32 main-item">
  41. <view>换量规则
  42. <!-- <image class="wen" src="../../static/images/wen1.png" mode=""></image> -->
  43. </view>
  44. <view @click="rule" class="flex-center add-home ft24">
  45. 设置
  46. </view>
  47. </view>
  48. <view class="item-bg" v-if="open_time.length>0">
  49. <view v-for="(item,index) of open_time" :key="index" class="item-bg-time">
  50. <view class="flex-center">
  51. {{item}}
  52. </view>
  53. </view>
  54. </view>
  55. </view>
  56. <view class="">
  57. <view class="box-pack-between ft32 main-item">
  58. <view>换量记录池</view>
  59. <view class="flex-center add-home ft24" @click="addEnable">
  60. 添加
  61. </view>
  62. </view>
  63. </view>
  64. <no-none v-if='list_add.length<=0'></no-none>
  65. <view class="item-bg" v-for="(item,index) in list_add" :data-index='index' :key="item.id" v-if="list_add.length>0">
  66. <view class="item flex-row box-pack-between">
  67. <view class="flex-grow-1 flex-y-center">
  68. <image src="../../static/images/icon_game.png" mode="aspectFit" class="type-img" v-if="item.type == 7"></image>
  69. <image src="../../static/images/icon_6.png" mode="aspectFit" class="type-img" v-if="item.type == 4"></image>
  70. <image src="../../static/images/icon_5.png" mode="aspectFit" class="type-img" v-if="item.type == 3"></image>
  71. <image src="../../static/images/icon_2.png" mode="aspectFit" class="type-img" v-if="item.type == 2"></image>
  72. <image src="../../static/images/icon_4.png" mode="aspectFit" class="type-img" v-if="item.type == 1"></image>
  73. <image src="../../static/images/icon_7.png" mode="aspectFit" class="type-img" v-if="item.type == 6"></image>
  74. <view class="info">
  75. <view class="title text-1" v-if="item.mid_title">{{item.mid_title}}</view>
  76. <view class="title text-1" v-if="item.description">{{item.description}}</view>
  77. <view class="title text-1" v-if="item.create_time">{{item.create_time}}</view>
  78. </view>
  79. </view>
  80. <image class="del" :data-index="index" :data-id="item.id" @click="del" src="../../static/images/del.png" mode=""></image>
  81. </view>
  82. </view>
  83. <view class="box-pack-between">
  84. <view class="box-pack-between ft32 main-item">
  85. <view>加入区域换量</view>
  86. </view>
  87. <view class="flex-center ft24">
  88. <switch :checked="is_area_exchange=='Y'?true:false" @change="switch1" style="transform:scale(0.7)" />
  89. </view>
  90. </view>
  91. <view @click="chooseLocation" class="item-bg box-pack-between" v-if="is_area_exchange=='Y'?true:false">
  92. <view class="flex-center">
  93. <image class="maps" src="../../static/images/map.png" mode=""></image>
  94. <text>{{address_data}}</text>
  95. </view>
  96. <view class="flex-center coh ft28 item-bg-right" >
  97. <view class="iconfont iconzhongxindingwei" :class="route?'rotate':''"></view>
  98. 重新定位
  99. </view>
  100. </view>
  101. </view>
  102. </view>
  103. <!-- </form> -->
  104. <block v-if="is_auth">
  105. <view class="model"></view>
  106. <view class="model flex-center">
  107. <view class="model_cotent">
  108. <view class="model_cotent_title">提示</view>
  109. <view class="model_cotent_qd">需要您授权打开地理位置</view>
  110. <button class="model_cotent_shezhi" @click="openSetting">去设置</button>
  111. </view>
  112. </view>
  113. </block>
  114. </view>
  115. <!--</view>
  116. </view> -->
  117. </template>
  118. <script>
  119. // #ifdef H5
  120. import getWXSign from "@/static/js/config.js";
  121. // #endif
  122. export default {
  123. data() {
  124. return {
  125. info: {},
  126. switch_list: [{
  127. name: "开启换量"
  128. }, {
  129. name: "关闭换量"
  130. }, ],
  131. act_index: 0,
  132. open_time: [],
  133. list_add: [],
  134. // address_map: {
  135. // province:"",
  136. // city:"",
  137. // district:"",
  138. // },
  139. address_data: "",
  140. latitude: "",
  141. longitude: "",
  142. is_area_exchange: "",
  143. route: false,
  144. is_auth: false,
  145. // longitude: "113.269043",
  146. // latitude: "23.110049",
  147. }
  148. },
  149. onLoad(e) {
  150. },
  151. onShow() {
  152. this.ExchangePool();
  153. this.getExchange();
  154. },
  155. methods: {
  156. nav(e) {
  157. uni.navigateTo({
  158. url: "form"
  159. })
  160. },
  161. chooseLocation(e) {
  162. // #ifdef MP-WEIXIN
  163. uni.chooseLocation({
  164. success: (res) => {
  165. console.log('位置名称:' + res.name);
  166. console.log('详细地址:' + res.address);
  167. console.log('纬度:' + res.latitude);
  168. console.log('经度:' + res.longitude);
  169. this.longitude = res.longitude;
  170. this.latitude = res.latitude;
  171. this.address_data = res.address;
  172. this.ExchangeJoinArea();
  173. }
  174. });
  175. // #endif
  176. // #ifdef H5
  177. uni.navigateTo({
  178. url:"./iframe"
  179. })
  180. // #endif
  181. },
  182. getLocation(e) {
  183. this.route = true;
  184. setTimeout(() => {
  185. this.route = false;
  186. }, 1500)
  187. // #ifdef H5
  188. getWXSign().then(res => {
  189. console.log('wx_getLocation');
  190. this.$wx.getLocation({
  191. type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
  192. success: (res) => {
  193. console.log('wx_getLocation', res);
  194. this.location(res.latitude, res.longitude);
  195. this.latitude = res.latitude;
  196. this.longitude = res.longitude;
  197. this.is_auth = false;
  198. },
  199. fail: (err) => {
  200. console.log(err, "err")
  201. // this.getauth(err);
  202. if (err.errMsg === "getLocation:fail auth deny" ||
  203. err.errMsg === "getLocation:fail auth deny" || err.errMsg ===
  204. "getLocation:fail authorize no response") {
  205. // 这边微信做过调整,必须要在按钮中触发,因此需要在弹框回调中进行调用
  206. this.is_auth = true;
  207. }
  208. }
  209. });
  210. })
  211. // #endif
  212. // #ifdef MP-WEIXIN
  213. uni.getLocation({
  214. type: 'gcj02 ',
  215. success: (res) => {
  216. console.log('getLocation', res);
  217. this.location(res.latitude, res.longitude);
  218. this.latitude = res.latitude;
  219. this.longitude = res.longitude;
  220. this.is_auth = false;
  221. },
  222. fail: (err) => {
  223. console.log(err, "err")
  224. // this.getauth(err);
  225. if (err.errMsg === "getLocation:fail auth deny" ||
  226. err.errMsg === "getLocation:fail auth deny" || err.errMsg ===
  227. "getLocation:fail authorize no response") {
  228. // 这边微信做过调整,必须要在按钮中触发,因此需要在弹框回调中进行调用
  229. this.is_auth = true;
  230. }
  231. }
  232. });
  233. // #endif
  234. },
  235. openSetting(e) {
  236. uni.openSetting({
  237. success(settingdata) {
  238. console.log("settingdata", settingdata)
  239. if (settingdata.authSetting['scope.userLocation']) {} else {
  240. uni.showModal({
  241. title: '提示',
  242. content: '获取权限失败,将无法进定位哦~',
  243. showCancel: false,
  244. })
  245. }
  246. },
  247. fail(failData) {
  248. console.log("failData", failData)
  249. },
  250. complete(finishData) {
  251. console.log("finishData", finishData)
  252. }
  253. })
  254. },
  255. switch1(e) {
  256. this.is_area_exchange = e.detail.value ? 'Y' : 'N',
  257. this.ExchangeJoinArea();
  258. },
  259. ExchangeJoinArea(e) {
  260. this.request({
  261. url: "exchange/ExchangeJoinArea",
  262. data: {
  263. token: uni.getStorageSync("token"),
  264. is_area_exchange: this.is_area_exchange,
  265. longitude: this.longitude,
  266. latitude: this.latitude,
  267. address:this.address_data,
  268. },
  269. }).then(res => {
  270. if (res.code === '200' && res.message == '加入成功') {
  271. // if(this.is_area_exchange=="Y"x){
  272. this.is_area_exchange = "Y";
  273. uni.showToast({
  274. title: res.message,
  275. icon: 'none'
  276. })
  277. // }
  278. } else {
  279. uni.showToast({
  280. title: res.message,
  281. icon: 'none'
  282. })
  283. this.is_area_exchange = "N";
  284. }
  285. }).catch((res) => {
  286. console.log(res, "res")
  287. uni.showToast({
  288. title: res.message,
  289. icon: 'none'
  290. })
  291. this.is_area_exchange = "N";
  292. })
  293. },
  294. // 坐标解析
  295. location(latitude, longitude) {
  296. let appkey = 'SOUBZ-3EQWO-FVRWG-SFXV2-O3WYO-VJBMP';
  297. // #ifdef H5
  298. console.log('location_locationObj');
  299. let locationObj = latitude + "," + longitude;
  300. let url = 'https://apis.map.qq.com/ws/geocoder/v1?get_poi=1&output=jsonp';
  301. this.$jsonp(url, {
  302. key: appkey,
  303. location: locationObj
  304. }).then(res => {
  305. // let address_component = res.result.address;
  306. this.address_data =res.result.address;
  307. // address_component.province + address_component.city + address_component.district;
  308. }).catch(err => {
  309. console.log(err, "appkey")
  310. })
  311. // #endif
  312. // #ifdef APP-PLUS||MP-WEIXIN
  313. uni.request({
  314. url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + latitude + ',' + longitude + '&key=' + appkey,
  315. data: {},
  316. header: {
  317. 'Content-Type': 'application/json'
  318. },
  319. success: (res) => {
  320. this.address_data = res.data.result.address;
  321. // this.address_data = address_component.province + address_component.city + address_component.district;
  322. },
  323. })
  324. // #endif
  325. },
  326. addEnable(e) {
  327. this.request({
  328. url: "user/funeng_list",
  329. data: {
  330. page: this.page,
  331. token: uni.getStorageSync("token"),
  332. type:1,
  333. },
  334. showLoading: true,
  335. }).then(res => {
  336. if (res.code === '200' && res.data.length > 0) {
  337. uni.navigateTo({
  338. url: "./record?type=1"
  339. })
  340. } else {
  341. uni.showToast({
  342. title: "没有记录",
  343. icon: 'none'
  344. })
  345. }
  346. })
  347. },
  348. rule(e) {
  349. var arr = JSON.stringify(this.arr)
  350. uni.navigateTo({
  351. url: "./rule?arr=" + arr + "&id=" + this.info.id
  352. })
  353. },
  354. getExchange() {
  355. this.request({
  356. url: "funeng/getExchange",
  357. data: {
  358. token: uni.getStorageSync("token"),
  359. },
  360. }).then(res => {
  361. console.log(res, "res")
  362. if (res.code === '200') {
  363. this.info = res.data;
  364. this.arr = res.data.open_time;
  365. this.open_time = res.data.open_time;
  366. this.is_area_exchange = res.data.is_area_exchange;
  367. this.act_index = res.data.is_exchange == "Y" ? 0 : 1;
  368. this.latitude=res.data.latitude;
  369. this.longitude= res.data.longitude;
  370. this.address_data=res.data.address;
  371. if(!res.data.latitude&&!res.data.longitude&&!res.data.address){
  372. this.getLocation();
  373. }
  374. }
  375. }).catch((res) => {
  376. uni.showToast({
  377. title: res.message,
  378. icon: 'none'
  379. })
  380. });
  381. },
  382. ExchangePool() {
  383. this.request({
  384. url: "funeng/ExchangePool",
  385. data: {
  386. token: uni.getStorageSync("token"),
  387. },
  388. }).then(res => {
  389. console.log(res, "res")
  390. if (res.code === '200') {
  391. this.list_add = res.data
  392. }
  393. }).catch((res) => {
  394. });
  395. },
  396. bindcheck(e) {
  397. var index = e.currentTarget.dataset.index;
  398. this.act_index = index;
  399. this.request({
  400. url: "funeng/trunExchange",
  401. data: {
  402. status: index == 1 ? 'N' : 'Y',
  403. token: uni.getStorageSync("token"),
  404. },
  405. }).then(res => {
  406. console.log(res, "res")
  407. if (res.code === '200') {
  408. uni.showToast({
  409. title: res.message,
  410. icon: 'none'
  411. })
  412. }
  413. }).catch((res) => {
  414. uni.showToast({
  415. title: res.message,
  416. icon: 'none'
  417. })
  418. });
  419. },
  420. del(e) {
  421. let id = e.currentTarget.dataset.id,
  422. index = e.currentTarget.dataset.index;
  423. uni.showModal({
  424. title: '提示',
  425. content: '确定要删除此记录吗?',
  426. showCancel: true,
  427. cancelText: '取消',
  428. confirmText: '删除',
  429. success: res => {
  430. if (res.confirm) {
  431. this.request({
  432. url: "funeng/delExchangePool",
  433. data: {
  434. token: uni.getStorageSync("token"),
  435. power_id: id,
  436. },
  437. }).then(res => {
  438. console.log(res, "res")
  439. if (res.code === '200') {
  440. this.list_add.splice(index, 1)
  441. uni.showToast({
  442. title: "删除成功",
  443. icon: 'none'
  444. })
  445. }
  446. }).catch((res) => {
  447. uni.showToast({
  448. title: res.message,
  449. icon: 'none'
  450. })
  451. });
  452. }
  453. },
  454. fail: () => {},
  455. complete: () => {}
  456. });
  457. },
  458. },
  459. }
  460. </script>
  461. <style>
  462. .item-bg-right {
  463. min-width: 207rpx;
  464. }
  465. .coh .rotate {
  466. transition: all 1.2s ease-out 0s;
  467. transform: rotate(360deg);
  468. }
  469. .info-block {
  470. width: 670rpx;
  471. margin: 0 auto;
  472. }
  473. .info-block .item {
  474. padding: 30rpx 0 70rpx 0;
  475. }
  476. .item-off {
  477. width: 252rpx;
  478. height: 54rpx;
  479. border-radius: 8rpx;
  480. color: #ffff;
  481. border: 2rpx solid #3387ff;
  482. background: rgba(255, 255, 255, 0.2);
  483. }
  484. .item-off .act {
  485. background: #fff;
  486. color: #3387ff;
  487. border-radius: 8rpx;
  488. }
  489. .item-content {
  490. text-align: center;
  491. }
  492. .header {
  493. width: 100%;
  494. height: 324rpx;
  495. position: relative;
  496. }
  497. .header .bg-img {
  498. display: block;
  499. position: absolute;
  500. left: 0;
  501. top: 0;
  502. z-index: -1;
  503. width: 100%;
  504. height: 324rpx;
  505. }
  506. .header .info-block {
  507. /* padding: 0 40rpx 0 48rpx; */
  508. height: 198rpx;
  509. color: #FFFFFF;
  510. }
  511. .header .info-block .title {
  512. font-size: 36rpx;
  513. color: #fff;
  514. font-weight: 500;
  515. line-height: 50rpx;
  516. }
  517. .header .info-block .desc {
  518. font-size: 28rpx;
  519. font-weight: 500;
  520. color: #fff;
  521. line-height: 40rpx;
  522. margin-top: 8rpx;
  523. }
  524. .line {
  525. width: 2rpx;
  526. height: 46rpx;
  527. opacity: 0.5;
  528. background: #ffffff;
  529. }
  530. .mab-24 {
  531. margin-bottom: 24rpx;
  532. }
  533. .wen {
  534. width: 22rpx;
  535. height: 22rpx;
  536. margin-left: 8rpx;
  537. }
  538. .main-home {
  539. width: 670rpx;
  540. margin: 0 auto;
  541. }
  542. .main-item {
  543. margin: 20rpx 0 32rpx 0;
  544. }
  545. .add-home {
  546. color: #FFFFFF;
  547. width: 126rpx;
  548. height: 54rpx;
  549. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  550. border-radius: 8rpx;
  551. box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
  552. }
  553. .item-bg .mar64:last-child {
  554. margin-bottom: 0rpx;
  555. }
  556. .item-bg {
  557. width: 670rpx;
  558. background: #f6f8fe;
  559. border-radius: 12rpx;
  560. margin: 0 auto;
  561. font-size: 28rpx;
  562. font-family: PingFang SC, PingFang SC-Regular;
  563. font-weight: 400;
  564. color: #333333;
  565. padding: 36rpx 32rpx;
  566. margin-bottom: 20rpx;
  567. }
  568. .item-bg-time {
  569. width: 180rpx;
  570. height: 66rpx;
  571. background: #ffffff;
  572. border-radius: 8rpx;
  573. display: inline-block;
  574. margin-right: 30rpx;
  575. margin-bottom: 30rpx;
  576. }
  577. .item {
  578. margin: 20rpx 0;
  579. }
  580. .info {
  581. width: 501rpx;
  582. }
  583. .item-bg .item-bg-time:nth-child(3n) {
  584. margin-right: 0rpx;
  585. }
  586. .item-bg-time .flex-center {
  587. height: 100%;
  588. }
  589. .type-img {
  590. display: block;
  591. flex: none;
  592. width: 40rpx;
  593. height: 40rpx;
  594. margin-right: 26rpx;
  595. }
  596. .del {
  597. width: 32rpx;
  598. height: 32rpx;
  599. }
  600. .maps {
  601. min-width: 31rpx;
  602. width: 31rpx;
  603. height: 31rpx;
  604. margin-right: 10rpx;
  605. }
  606. .iconzhongxindingwei {
  607. margin-right: 10rpx;
  608. }
  609. .model {
  610. position: fixed;
  611. top: 0;
  612. width: 100%;
  613. height: 100%;
  614. background: rgba(0, 0, 0, 0.5);
  615. }
  616. .model_cotent {
  617. width: 600rpx;
  618. /* height: 300rpx; */
  619. text-align: center;
  620. border-radius: 16rpx;
  621. background: #fff;
  622. }
  623. .model_cotent_title {
  624. font-size: 34rpx;
  625. font-weight: 700;
  626. margin: 40rpx 0 40rpx 0;
  627. }
  628. .model_cotent_qd {
  629. font-size: 30rpx;
  630. padding-bottom: 65rpx;
  631. border-bottom: 1rpx solid #f1f1f1;
  632. }
  633. .model_cotent_shezhi {
  634. margin: 0;
  635. font-weight: 700;
  636. font-size: 30rpx;
  637. color: #4e6ef2;
  638. padding: 15rpx 0;
  639. background-color: #fff;
  640. border-radius: none;
  641. border: none;
  642. }
  643. </style>