aboutLida.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642
  1. <template>
  2. <view class="about-lida">
  3. <view class="title">
  4. <navbar :config="config">
  5. <!-- <view
  6. slot="right"
  7. class="iconfont"
  8. style="
  9. font-size: 36rpx;
  10. font-weight: 500;
  11. color: #999999;
  12. margin-right: 30rpx;
  13. "
  14. >
  15. &#xe6b1;
  16. </view> -->
  17. </navbar>
  18. </view>
  19. <!-- <view class="image-one" @click="
  20. imgLink(advertisement.model_type, advertisement.model_id, advertisement.url)
  21. ">
  22. <image :src="advertisement.cover" mode="" ></image>
  23. </view> -->
  24. <view class="image-one">
  25. <view class="swiper">
  26. <view class="uni-margin-wrap">
  27. <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
  28. circular="ture">
  29. <swiper-item v-for="item in advertisement" :key="item.id">
  30. <view class="swiper-item" @click="imgLink(item.model_type, item.model_id, item.url, item.shop_id)">
  31. <image class="bannersize" :src="item.cover" mode="aspectFill"></image>
  32. </view>
  33. </swiper-item>
  34. </swiper>
  35. </view>
  36. </view>
  37. </view>
  38. <view v-for="(item, index) in weList" :key="index">
  39. <view v-if="index % 2 == 0" @click="goDetail(item)">
  40. <view class="image-two">
  41. <!-- <view class="iconfont item-left">&#xe66e;</view> -->
  42. <image class="item-left" :src="imgUrl+'/index/green.png'" mode=""></image>
  43. <view class="item-right">
  44. <view class="title-top">{{ item.title }}</view>
  45. <view class="title-bottom">{{ item.intro }}</view>
  46. </view>
  47. </view>
  48. </view>
  49. <view v-if="index % 2 != 0" @click="goDetail(item)">
  50. <view class="image-three">
  51. <view class="item-left">
  52. <view class="item-top">{{ item.title }}</view>
  53. <view class="item-bottom">{{ item.intro }}</view>
  54. </view>
  55. <!-- <view class="iconfont item-right">&#xe66e;</view> -->
  56. <image class="item-right" :src="imgUrl+'/index/white.png'" mode=""></image>
  57. </view>
  58. </view>
  59. <!-- <view class="image-two">
  60. <view class="iconfont item-left">&#xe66e;</view>
  61. <view class="item-right">
  62. <view class="title-top"> 简单方便 </view>
  63. <view class="title-bottom">
  64. 从数据出发,仅需几行代码可以 轻松获得想要的图表展示效果。
  65. </view>
  66. </view>
  67. </view> -->
  68. </view>
  69. <!-- <view class="image-five">
  70. <image src="../../../static/delImg/banenr.png" mode=""></image>
  71. </view> -->
  72. <!-- 这一块有问题 -->
  73. <!-- <view class="image-six">
  74. <image src="../../../static/delImg/banenr.png" mode=""></image>
  75. </view> -->
  76. <view v-if="formVisible">
  77. <view class="middle">
  78. <view class="middle-top">您的联系方式</view>
  79. <view class="username">
  80. <view class="name">姓名</view>
  81. <input type="text" value="" @input="youName" maxlength="6" placeholder="请输入您的姓名" />
  82. </view>
  83. <view class="telephone">
  84. <view class="phone">电话</view>
  85. <input type="number" value="" @input="onPhone" maxlength="11" placeholder="请输入您的电话" />
  86. </view>
  87. <view class="remind">24小时内会有客服联系你,请保持电话畅通</view>
  88. <view class="button" @click="submit">提交</view>
  89. <!-- <image
  90. class="delete"
  91. src="../../../static/index/del.png"
  92. mode=""
  93. @click="closemsg"
  94. ></image> -->
  95. </view>
  96. </view>
  97. <view class="image-seven" @click="toMap">
  98. <MapCom :list="addresss" @click="toMap"></MapCom>
  99. <!-- <image src="../../../static/delImg/banenr.png" mode=""></image> -->
  100. </view>
  101. <view class="buttom">
  102. <view class="bottom-left-one" @click="goPhone">
  103. <view class="iconfont phone">&#xe60d;</view>
  104. </view>
  105. <view class="bottom-right" @click="obtainData()">获取资料</view>
  106. </view>
  107. <uni-popup ref="popup" type="center"></uni-popup>
  108. </view>
  109. </template>
  110. <script>
  111. import MapCom from './map';
  112. export default {
  113. components: {
  114. MapCom
  115. },
  116. data() {
  117. return {
  118. config: {
  119. back: true, //false是tolbar页面 是则不写
  120. title: '加入我们',
  121. color: '#1A1A1A',
  122. //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
  123. backgroundColor: [1, '#ffffff'],
  124. statusBarFontColor: '#FFFFFF',
  125. rightSlot: true
  126. },
  127. name: '',
  128. phone: '',
  129. customerPhone: '',
  130. city: '深圳市',
  131. addresss: [],
  132. formVisible: false,
  133. weList: [],
  134. advertisement: [],
  135. imgUrl: this.$mConfig.staticUrl,
  136. };
  137. },
  138. onLoad() {
  139. // this.getMsg();
  140. this.getPhone();
  141. this.getShop(this.city);
  142. this.getList();
  143. this.getadvertisement();
  144. },
  145. methods: {
  146. toMap() {
  147. uni.navigateTo({
  148. url: "/pages/research/homepage/mapToPage?list=" + JSON.stringify(this.addresss)
  149. })
  150. },
  151. imgLink(type, id, url, shopid) {
  152. if (type == 'goods') {
  153. uni.navigateTo({
  154. url: '/pages/product/goods/goods?id=' + id + '&shopid=' + shopid
  155. });
  156. } else if (type == 'service') {
  157. // uni.navigateTo({
  158. // url: '/pages/product/goods/serviceGood?id=' + id
  159. // });
  160. } else if (type == "point_goods") {
  161. // uni.navigateTo({
  162. // url: "/pages/product/goods/IntegralGood?id=" + id
  163. // });
  164. } else if (type == 'url') {
  165. uni.navigateTo({
  166. url: '/pages/index/webView?linkUrl=' + url
  167. });
  168. }
  169. },
  170. goDetail(item) {
  171. uni.navigateTo({
  172. url: 'about-us-detail?id=' + item.id
  173. });
  174. },
  175. //广告
  176. getadvertisement() {
  177. this.$http.get('/ad/ad/getShopAdByAdL/0/pt-join-us').then(res => {
  178. if (res && res.code == 200) {
  179. this.advertisement = res.list;
  180. }
  181. });
  182. },
  183. //获取关于我们的数据
  184. getList() {
  185. this.$http.get('/about/us/list').then(res => {
  186. if (res && res.code == 200) {
  187. this.weList = res.list;
  188. }
  189. });
  190. },
  191. getShop(city) {
  192. this.$http.get(`/yxt/shop/all-shop`).then(res => {
  193. if (res && res.code == 200) {
  194. this.addresss = res.list;
  195. }
  196. });
  197. },
  198. //获取手机号
  199. getPhone() {
  200. this.$http.get('/system/info/info').then(res => {
  201. if (res && res.code == 200) {
  202. this.customerPhone = res.data.hotline;
  203. }
  204. });
  205. },
  206. //唤起电话
  207. goPhone() {
  208. let that = this;
  209. uni.showModal({
  210. title: '是否需要联系客服',
  211. success(res) {
  212. if (res.confirm) {
  213. uni.makePhoneCall({
  214. phoneNumber: that.customerPhone,
  215. success(res) {
  216. console.log('调用成功');
  217. },
  218. fail(res) {
  219. console.log('调用失败');
  220. }
  221. });
  222. } else if (res.cancel) {}
  223. }
  224. });
  225. },
  226. //提交信息
  227. submit() {
  228. if (this.name == '') {
  229. this.$mUtil.toast('请输入您的姓名');
  230. return false;
  231. }
  232. if (this.phone == '') {
  233. this.$mUtil.toast('请输入您的手机号');
  234. return false;
  235. }
  236. if (!this.phone.match(this.$mConfig.telRegex)) {
  237. this.$mUtil.toast('请输入正确的手机号');
  238. return false;
  239. }
  240. this.$http
  241. .post('/personal/data/save', {
  242. name: this.name,
  243. mobile: this.phone
  244. })
  245. .then(res => {
  246. if (res && res.code == 200) {
  247. this.formVisible = false;
  248. this.name = null;
  249. this.phone = null;
  250. this.$mUtil.toast('提交成功');
  251. // setTimeout(()=>{
  252. // },1000)
  253. }
  254. });
  255. },
  256. //用户名字
  257. youName(e) {
  258. this.name = e.detail.value;
  259. },
  260. //用户手机号
  261. onPhone(e) {
  262. this.phone = e.detail.value;
  263. },
  264. //请求数据
  265. // getMsg() {
  266. // this.$http.get("/about/us/info").then((res) => {
  267. // if (res && res.code == 200) {
  268. // }
  269. // });
  270. // },
  271. //弹出框的开启和关闭
  272. obtainData() {
  273. this.formVisible = true;
  274. // setTimeout(() => {
  275. // uni.pageScrollTo({
  276. // scrollTop: 999999
  277. // })
  278. // }, 100)
  279. // this.$refs.popup.open();
  280. },
  281. closemsg() {
  282. this.$refs.popup.close();
  283. }
  284. }
  285. };
  286. </script>
  287. <style lang="scss" scoped>
  288. .button {
  289. // margin: 0 48rpx;
  290. padding: 18rpx 202rpx;
  291. margin-top: 72rpx;
  292. font-size: 36rpx;
  293. font-weight: Regular;
  294. text-align: center;
  295. color: #dccda4;
  296. background-color: #0B844A;
  297. border-radius: 42rpx;
  298. }
  299. .phone {
  300. font-size: 70rpx;
  301. }
  302. .swiper-item {
  303. display: block;
  304. height: 450rpx;
  305. line-height: 450rpx;
  306. text-align: center;
  307. }
  308. .uni-margin-wrap {
  309. width: 100%;
  310. }
  311. .bannersize {
  312. display: block;
  313. overflow: hidden;
  314. width: 100%;
  315. height: 340rpx;
  316. }
  317. .swiper {
  318. height: 450rpx;
  319. }
  320. // .swiper {
  321. // /deep/ .uni-swiper-dot {
  322. // width: 40rpx !important;
  323. // height: 8rpx;
  324. // border-radius: 5rpx !important;
  325. // background-color: #ffffff !important;
  326. // opacity: 0.5;
  327. // }
  328. // /deep/ .uni-swiper-dot-active {
  329. // background-color: #ffffff !important;
  330. // opacity: 1;
  331. // }
  332. // }
  333. .about-lida {
  334. background-color: #f5f5f5;
  335. }
  336. .middle {
  337. margin: 30rpx;
  338. background-color: #ffffff;
  339. padding: 48rpx 47rpx 48rpx 58rpx;
  340. border-radius: 20rpx;
  341. position: relative;
  342. // z-index: 9999;
  343. .delete {
  344. width: 40rpx;
  345. height: 40rpx;
  346. position: absolute;
  347. right: 0;
  348. top: -68rpx;
  349. }
  350. .remind {
  351. // height: 500rpx;
  352. font-size: 22rpx;
  353. color: #999999;
  354. font-weight: Medium;
  355. line-height: 28rpx;
  356. margin-top: 20rpx;
  357. }
  358. .username,
  359. .telephone {
  360. display: flex;
  361. padding: 52rpx 0 32rpx 0;
  362. border-bottom: 1rpx solid #e6e6e6;
  363. .name,
  364. .phone {
  365. font-size: 28rpx;
  366. color: #333333;
  367. font-weight: Medium;
  368. margin-right: 68rpx;
  369. }
  370. }
  371. .middle-top {
  372. text-align: center;
  373. font-size: 36rpx;
  374. font-weight: 700;
  375. color: #1a1a1a;
  376. }
  377. }
  378. .buttom {
  379. padding: 30rpx;
  380. display: flex;
  381. align-items: center;
  382. .bottom-left-one {
  383. text-align: center;
  384. line-height: 70rpx;
  385. border-radius: 50%;
  386. .iconfont {
  387. font-size: 70rpx;
  388. color: #ffffff !important;
  389. }
  390. }
  391. .bottom-right {
  392. flex: 1;
  393. padding: 18rpx 222rpx;
  394. background-color: #ffffff;
  395. margin-left: 30rpx;
  396. border-radius: 43rpx;
  397. color: #0B844A;
  398. font-size: 36rpx;
  399. font-weight: 400;
  400. }
  401. }
  402. .image-seven {
  403. height: 630rpx;
  404. margin: 0 30rpx 30rpx 30rpx;
  405. image {
  406. height: 100%;
  407. }
  408. }
  409. .image-six {
  410. height: 494rpx;
  411. margin: 0 30rpx 30rpx 30rpx;
  412. image {
  413. height: 100%;
  414. }
  415. }
  416. .image-five {
  417. margin: 30rpx;
  418. height: 472rpx;
  419. border-radius: 16rpx;
  420. image {
  421. height: 100%;
  422. }
  423. }
  424. .image-two:nth-child(odd) {
  425. background-color: #ffffff;
  426. display: flex;
  427. .item-left {
  428. width: 121rpx;
  429. height: 121rpx;
  430. // background: #0B844A;
  431. border-radius: 50%;
  432. margin: 64rpx 60rpx;
  433. }
  434. .item-right {
  435. flex: 1;
  436. margin-top: 50rpx;
  437. margin-right: 60rpx;
  438. .title-top {
  439. font-size: 38rpx;
  440. color: #1a1a1a;
  441. font-weight: 700;
  442. margin-bottom: 16rpx;
  443. }
  444. .title-bottom {
  445. font-size: 28rpx;
  446. color: #999999;
  447. font-weight: 400;
  448. overflow: hidden;
  449. text-overflow: ellipsis;
  450. whitewhite-space: nowrap;
  451. display: -webkit-box;
  452. -webkit-line-clamp: 2;
  453. -webkit-box-orient: vertical;
  454. word-wrap: break-word;
  455. word-break: break-all;
  456. white-space: normal !important;
  457. }
  458. }
  459. }
  460. .image-three {
  461. background-color: #0B844A;
  462. display: flex;
  463. .item-left {
  464. margin: 50rpx 60rpx;
  465. flex: 1;
  466. .item-top {
  467. color: #ffffff;
  468. font-size: 38rpx;
  469. font-weight: 700;
  470. margin-bottom: 16rpx;
  471. }
  472. .item-bottom {
  473. color: #ffffff;
  474. font-weight: 400;
  475. font-size: 28rpx;
  476. overflow: hidden;
  477. text-overflow: ellipsis;
  478. whitewhite-space: nowrap;
  479. display: -webkit-box;
  480. -webkit-line-clamp: 2;
  481. -webkit-box-orient: vertical;
  482. word-wrap: break-word;
  483. word-break: break-all;
  484. white-space: normal !important;
  485. }
  486. }
  487. .item-right {
  488. width: 121rpx;
  489. height: 121rpx;
  490. margin: 64rpx 58rpx 0 0;
  491. border-radius: 50%;
  492. text-align: center;
  493. line-height: 60px;
  494. font-size: 40rpx;
  495. }
  496. }
  497. .image-three,
  498. .image-four,
  499. .image-two {
  500. margin: 0 30rpx;
  501. height: 250rpx;
  502. border-radius: 16rpx;
  503. image {
  504. height: 100%;
  505. }
  506. }
  507. .middle-top {
  508. text-align: center;
  509. font-size: 36rpx;
  510. font-weight: 700;
  511. color: #1a1a1a;
  512. }
  513. .buttom {
  514. padding: 30rpx;
  515. background-color: #0B844A;
  516. display: flex;
  517. align-items: center;
  518. .bottom-left {
  519. width: 70rpx;
  520. height: 70rpx;
  521. background-color: #cb894d;
  522. text-align: center;
  523. line-height: 70rpx;
  524. border-radius: 50%;
  525. .iconfont {
  526. color: #0B844A;
  527. }
  528. }
  529. .bottom-right {
  530. padding: 18rpx 222rpx;
  531. background-color: #ffffff;
  532. margin-left: 30rpx;
  533. border-radius: 43rpx;
  534. color: #0B844A;
  535. font-size: 36rpx;
  536. font-weight: 400;
  537. }
  538. }
  539. .image-seven {
  540. height: 630rpx;
  541. margin: 0 30rpx 30rpx 30rpx;
  542. image {
  543. height: 100%;
  544. }
  545. }
  546. .image-six {
  547. height: 494rpx;
  548. margin: 0 30rpx 30rpx 30rpx;
  549. image {
  550. height: 100%;
  551. }
  552. }
  553. .image-five {
  554. margin: 30rpx;
  555. height: 472rpx;
  556. border-radius: 16rpx;
  557. image {
  558. height: 100%;
  559. }
  560. }
  561. .image-three,
  562. .image-four,
  563. .image-two {
  564. margin: 0 30rpx;
  565. height: 250rpx;
  566. border-radius: 16rpx;
  567. image {
  568. height: 100%;
  569. }
  570. }
  571. .image-one {
  572. width: 100%;
  573. height: 450rpx;
  574. margin-bottom: 30rpx;
  575. border-radius: 16rpx;
  576. image {
  577. width: 100%;
  578. height: 100%;
  579. }
  580. }
  581. </style>