houseDetail.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608
  1. <template>
  2. <view class="content">
  3. <image class="topImg" :src="dataInfo.image" mode="aspectFill"></image>
  4. <view class="sectionA">
  5. <view class="topSection">
  6. <view class="title">{{dataInfo.name}}</view>
  7. <view class="tags">
  8. <view class="item" v-for="(item, idx) in dataInfo.categoryList" :key="idx"
  9. :style="`color: ${color2}; background-color: ${color6};`">{{item.categoryName}}</view>
  10. </view>
  11. <view class="shareBtn" :style="`background-color: ${color1};`" @click="toShareCard(2)">
  12. <image class="icon" src="https://dm.static.elab-plus.com/yezhu/h5/icon_share.png" mode="aspectFit">
  13. </image>
  14. <text>分享项目</text>
  15. </view>
  16. </view>
  17. <view class="bottomSection">
  18. <image class="icon" src="https://dm.static.elab-plus.com/yezhu/h5/icon_dingweiY.png" mode=""></image>
  19. <view class="name">{{dataInfo.province + dataInfo.city + dataInfo.district + dataInfo.address}}</view>
  20. </view>
  21. </view>
  22. <view class="sectionB">
  23. <view class="item" v-for="(item, idx) in categoryList" :key="idx">
  24. <view class="name">
  25. <text>{{item.categoryName}}</text><text v-if="idx != categoryList.length - 1">收益</text>
  26. </view>
  27. <view class="value">{{item.value}}</view>
  28. </view>
  29. </view>
  30. <view class="sectionC">
  31. <view class="title">基本信息</view>
  32. <view class="line"></view>
  33. <view class="infos">
  34. <view class="item" v-for="(item, idx) in infos" :key="idx">
  35. <view class="name">{{item.title}}</view>
  36. <view class="value">{{item.value}}</view>
  37. </view>
  38. </view>
  39. </view>
  40. <view class="sectionD" v-if="registAmount">
  41. <image class="icon" src="https://dm.static.elab-plus.com/yezhu/icon_hongbao.png" mode="aspectFit"></image>
  42. <view class="midSection">
  43. <view class="name">邀请好友注册</view>
  44. <view class="value">完成邀请,可获得¥{{registAmount}}/人</view>
  45. </view>
  46. <view class="invitationBtn" @click="toShareCard(1)">邀请好友</view>
  47. </view>
  48. <backHome></backHome>
  49. <login-notice></login-notice>
  50. <login></login>
  51. </view>
  52. </template>
  53. <script>
  54. import moment from '../../static/moment.min.js'
  55. import {
  56. displayDateFormatChi
  57. } from '../../static/format.js'
  58. let app = getApp();
  59. const config = require('@/static/config.js');
  60. import backHome from "@/components/backHome/backHome.vue";
  61. const wx = require('weixin-js-sdk');
  62. export default {
  63. data() {
  64. return {
  65. color1: '',
  66. color2: '',
  67. color3: '',
  68. color6: '',
  69. infos: [{
  70. title: '开盘时间',
  71. value: ''
  72. },
  73. {
  74. title: '项目业态',
  75. value: ''
  76. },
  77. {
  78. title: '均价',
  79. value: ''
  80. },
  81. {
  82. title: '总价',
  83. value: ''
  84. },
  85. {
  86. title: '主力户型',
  87. value: ''
  88. }
  89. // {
  90. // title: '目标人群',
  91. // value: ''
  92. // }
  93. ],
  94. projectId: '',
  95. dataInfo: {
  96. "address": "",
  97. "availableIncome": "",
  98. "bizFormat": "",
  99. "categoryList": [],
  100. "city": "",
  101. "cusGroup": "",
  102. "district": "",
  103. "id": 0,
  104. "image": "",
  105. "mainHouseType": "",
  106. "maxPrice": 0,
  107. "maxTotalPrice": 0,
  108. "minPrice": 0,
  109. "minTotalPrice": 0,
  110. "name": "",
  111. "onlineStatus": 0,
  112. "openTime": 0,
  113. "otherPage": "",
  114. "projectFocusImage": "",
  115. "projectId": "",
  116. "province": "",
  117. "registAmount": "",
  118. "revision": "",
  119. "shareImg": "",
  120. "shareRemark": "",
  121. "xcxPage": ""
  122. },
  123. categoryList: [],
  124. registAmount: null,
  125. shareToken:"",
  126. }
  127. },
  128. onLoad(param) {
  129. this.projectId = param.projectId;
  130. },
  131. onShow() {
  132. },
  133. components: {
  134. backHome
  135. },
  136. mounted() {
  137. this.color1 = app.globalData.color1;
  138. this.color2 = app.globalData.color2;
  139. this.color3 = app.globalData.color3;
  140. this.color6 = app.globalData.color6;
  141. this.detailDatahandle()
  142. uni.$on("request", () => {
  143. this.detailDatahandle()
  144. })
  145. },
  146. methods: {
  147. async getSingle(){
  148. let params = {
  149. "projectId": this.projectId,
  150. "userId": getApp().globalData.userId
  151. }
  152. let res = await this.$myRequest({
  153. url: '/share_token/generate',
  154. data: params
  155. });
  156. if(res.data.success){
  157. this.shareToken = res.data.single;
  158. }
  159. },
  160. async signJsapiTicket(){
  161. let url = location.href.split('#')[0]
  162. let parmas = {
  163. url: url,
  164. }
  165. let self = this;
  166. let res = await this.$myRequest({
  167. url: '/wechat/signJsapiTicket',
  168. data: parmas,
  169. method:"GET",
  170. });
  171. if(res.data.success){
  172. let single = res.data.single;
  173. wx.config({
  174. debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  175. appId: config.appid, // 必填,公众号的唯一标识
  176. timestamp: single.timestamp, // 必填,生成签名的时间戳
  177. nonceStr: single.nonceStr, // 必填,生成签名的随机串
  178. signature: single.signature, // 必填,签名
  179. jsApiList: ["updateAppMessageShareData","updateTimelineShareData",'showMenuItems'] // 必填,需要使用的JS接口列表
  180. });
  181. wx.ready(function() {
  182. // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
  183. wx.updateAppMessageShareData({ //分享给朋友
  184. title: self.dataInfo.name, // 分享标题
  185. desc: self.dataInfo.shareRemark, // 分享描述
  186. link: location.origin+location.pathname + "?projectId="+self.projectId+"&shareToken="+self.shareToken, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  187. imgUrl: self.dataInfo.shareImg, // 分享图标
  188. success: function() {
  189. // 设置成功
  190. }
  191. });
  192. wx.updateTimelineShareData({ //分享到朋友圈
  193. title: self.dataInfo.name, // 分享标题
  194. link: location.origin+location.pathname + "?projectId="+self.projectId+"&shareToken="+self.shareToken, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  195. imgUrl: self.dataInfo.shareImg, // 分享图标
  196. success: function() {
  197. // 设置成功
  198. }
  199. });
  200. wx.showMenuItems({
  201. menuList: [ "menuItem:share:appMessage","menuItem:share:timeline"] // 要显示的菜单项,所有menu项见附录3
  202. });
  203. });
  204. wx.error(function(res) {
  205. // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
  206. });
  207. }
  208. },
  209. async detailDatahandle() {
  210. if (getApp().globalData.userId) {
  211. var parmas = {
  212. projectId: this.projectId,
  213. userId: getApp().globalData.userId
  214. }
  215. this.getSingle();
  216. this.createUserProjectRlat();
  217. this.getRegistTask();
  218. let res = await this.$myRequest({
  219. url: '/project/queryProjectByH5',
  220. data: parmas
  221. })
  222. if (res && res.data.success) {
  223. console.log('详情res:', res)
  224. this.dataInfo = res.data.single
  225. this.reloadCategoryList()
  226. this.reloadInfos();
  227. this.signJsapiTicket();
  228. }
  229. }
  230. },
  231. async getRegistTask() {
  232. if (app.globalData.userId) {
  233. let res = await this.$myRequest({
  234. url: "/task/registTask",
  235. method: "GET",
  236. data: {
  237. userId: getApp().globalData.userId
  238. }
  239. })
  240. if (res.data.success) {
  241. this.registAmount = res.data.single.amount || null
  242. } else {
  243. this.registAmount = null;
  244. }
  245. }
  246. },
  247. async createUserProjectRlat() {
  248. if (getApp().globalData.userId) {
  249. var parmas = {
  250. projectId: this.projectId,
  251. shareToken: getApp().globalData.shareToken
  252. }
  253. let res = await this.$myRequest({
  254. url: '/user/createUserProjectRlat',
  255. data: parmas
  256. })
  257. if (res && res.data.success) {
  258. }
  259. }
  260. },
  261. reloadCategoryList() {
  262. var tempList = JSON.parse(JSON.stringify(this.dataInfo.categoryList || []))
  263. tempList.forEach((item, idx) => {
  264. item.value = '¥' + (parseFloat(item.amount || 0.00).toFixed(2)) + '/个'
  265. })
  266. this.categoryList = tempList
  267. this.categoryList.push({
  268. categoryName: '可获收益/总活动金额',
  269. value: this.dataInfo.availableIncome + '元'
  270. })
  271. },
  272. reloadInfos() {
  273. this.infos[0].value = this.timeFilterAction(this.dataInfo.openTime)
  274. this.infos[1].value = this.dataInfo.bizFormat
  275. if (this.dataInfo.maxPrice > 0) {
  276. this.infos[2].value = this.priceReload(this.dataInfo.minPrice) + '~' + this.priceReload(this.dataInfo
  277. .maxPrice) + '/m²'
  278. } else {
  279. this.infos[2].value = this.priceReload(this.dataInfo.minPrice) + '/m²'
  280. }
  281. if (this.dataInfo.maxTotalPrice > 0) {
  282. this.infos[3].value = this.priceReload(this.dataInfo.minTotalPrice) + '~' + this.priceReload(this
  283. .dataInfo.maxTotalPrice) + '/套'
  284. } else {
  285. this.infos[3].value = this.priceReload(this.dataInfo.minTotalPrice) + '/套'
  286. }
  287. this.infos[4].value = this.dataInfo.mainHouseType
  288. // this.infos[5].value = this.dataInfo.cusGroup
  289. this.infos.forEach((item, idx) => {
  290. if (!item.value) {
  291. item.value = '暂无'
  292. }
  293. })
  294. },
  295. timeFilterAction(val) {
  296. if (val) {
  297. return displayDateFormatChi(val * 1000)
  298. } else {
  299. return ''
  300. }
  301. },
  302. priceReload(val) {
  303. return parseFloat(val / 10000).toFixed(2) + '万'
  304. },
  305. toShareCard(type) {
  306. if (getApp().globalData.userId) {
  307. let href = location.origin + location.pathname;
  308. uni.navigateTo({
  309. url: '../shareCardPage/shareCardPage?page=' + href + "&projectId=" + this.projectId +
  310. "&type=" + type
  311. })
  312. } else {
  313. uni.$emit('unLogin')
  314. }
  315. },
  316. backAction() {
  317. uni.navigateBack({
  318. delta: 1
  319. })
  320. }
  321. },
  322. watch: {
  323. },
  324. onPullDownRefresh() {
  325. this.detailDatahandle();
  326. }
  327. }
  328. </script>
  329. <style lang="scss" scoped>
  330. page {
  331. width: 100vw;
  332. height: 100vh;
  333. background-color: #FFFFFF;
  334. }
  335. .content {
  336. width: 100%;
  337. height: 100%;
  338. overflow-y: scroll;
  339. position: relative;
  340. padding-bottom: 60rpx;
  341. box-sizing: border-box;
  342. .topImg {
  343. width: 100%;
  344. height: 480rpx;
  345. background-color: rgba($color: #000000, $alpha: 0.5);
  346. // 滤镜效果
  347. // -webkit-filter: grayscale(30%); /* Chrome, Safari, Opera */
  348. // filter: grayscale(30%);
  349. }
  350. .sectionA {
  351. padding: 0 30rpx;
  352. box-sizing: border-box;
  353. width: 100%;
  354. margin-top: 50rpx;
  355. .topSection {
  356. display: flex;
  357. justify-content: space-between;
  358. align-items: center;
  359. padding-left: 6rpx;
  360. box-sizing: border-box;
  361. .title {
  362. font-size: 44rpx;
  363. font-family: Verdana, Verdana-Bold;
  364. font-weight: 700;
  365. text-align: left;
  366. color: #262626;
  367. white-space: pre-wrap;
  368. max-width: 50%;
  369. }
  370. .tags {
  371. margin-left: 8rpx;
  372. display: flex;
  373. justify-content: flex-start;
  374. align-items: center;
  375. flex-wrap: wrap;
  376. flex-grow: 1;
  377. .item {
  378. padding: 0 18rpx;
  379. box-sizing: border-box;
  380. line-height: 40rpx;
  381. height: 40rpx;
  382. text-align: center;
  383. font-size: 20rpx;
  384. font-family: Verdana, Verdana-Regular;
  385. font-weight: 400;
  386. margin-left: 12rpx;
  387. }
  388. }
  389. .shareBtn {
  390. width: 142rpx;
  391. min-width: 142rpx;
  392. height: 52rpx;
  393. border-radius: 8px;
  394. box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10);
  395. display: flex;
  396. align-items: center;
  397. font-size: 22rpx;
  398. font-family: Verdana, Verdana-Regular;
  399. font-weight: 400;
  400. text-align: left;
  401. color: #ffffff;
  402. white-space: nowrap;
  403. .icon {
  404. width: 32rpx;
  405. height: 32rpx;
  406. margin-left: 10rpx;
  407. }
  408. }
  409. }
  410. .bottomSection {
  411. margin-top: 16rpx;
  412. display: flex;
  413. justify-content: flex-start;
  414. align-items: center;
  415. height: 80rpx;
  416. background: #f8f8f8;
  417. border-radius: 8rpx;
  418. .icon {
  419. width: 20rpx;
  420. height: 28rpx;
  421. margin-right: 14rpx;
  422. margin-left: 25rpx;
  423. }
  424. .name {
  425. font-size: 24rpx;
  426. font-family: Verdana, Verdana-Regular;
  427. font-weight: 400;
  428. text-align: left;
  429. color: #b1b1b1;
  430. }
  431. }
  432. }
  433. .sectionB {
  434. width: 100%;
  435. display: flex;
  436. align-items: center;
  437. padding: 40rpx 36rpx;
  438. box-sizing: border-box;
  439. flex-wrap: wrap;
  440. .item {
  441. width: calc((100% - 12rpx) / 3);
  442. min-width: calc((100% - 12rpx) / 3);
  443. max-width: calc((100% - 12rpx) / 3);
  444. .name {
  445. font-size: 24rpx;
  446. font-family: Verdana, Verdana-Regular;
  447. font-weight: 400;
  448. text-align: left;
  449. color: #b1b1b1;
  450. }
  451. .value {
  452. font-size: 32rpx;
  453. font-family: DIN Alternate, DIN Alternate-Bold;
  454. font-weight: 700;
  455. text-align: left;
  456. white-space: nowrap;
  457. color: #fd8f3c;
  458. }
  459. }
  460. }
  461. .sectionC {
  462. width: 100%;
  463. padding: 0 36rpx 76rpx 36rpx;
  464. box-sizing: border-box;
  465. display: flex;
  466. flex-wrap: wrap;
  467. .title {
  468. font-size: 28rpx;
  469. font-family: Verdana, Verdana-Bold;
  470. font-weight: 700;
  471. text-align: left;
  472. color: #171717;
  473. width: 100%;
  474. margin-bottom: 26rpx;
  475. }
  476. .line {
  477. width: 6rpx;
  478. height: 268rpx;
  479. background: linear-gradient(180deg, #ffd7b9, rgba(255, 215, 185, 0.00));
  480. border-radius: 4rpx;
  481. }
  482. .infos {
  483. margin-left: 30rpx;
  484. width: calc(100% - 36rpx);
  485. margin-top: -20rpx;
  486. display: flex;
  487. flex-wrap: wrap;
  488. align-items: center;
  489. justify-content: space-between;
  490. .item {
  491. width: 50%;
  492. .name {
  493. font-size: 24rpx;
  494. font-family: Verdana, Verdana-Regular;
  495. font-weight: 400;
  496. text-align: left;
  497. color: #b1b1b1;
  498. }
  499. .value {
  500. font-size: 24rpx;
  501. font-family: Verdana, Verdana-Regular;
  502. font-weight: 400;
  503. text-align: left;
  504. color: #262626;
  505. }
  506. }
  507. }
  508. }
  509. .sectionD {
  510. display: flex;
  511. justify-content: space-between;
  512. align-items: center;
  513. margin-left: 30rpx;
  514. width: calc(100% - 60rpx);
  515. height: 140rpx;
  516. background: linear-gradient(108deg, #ffb55f 9%, #f87523 96%);
  517. border-radius: 16rpx;
  518. padding: 0 20rpx 0 26rpx;
  519. box-sizing: border-box;
  520. .icon {
  521. width: 60rpx;
  522. height: 80rpx;
  523. margin-right: 20rpx;
  524. }
  525. .midSection {
  526. flex-grow: 1;
  527. .name {
  528. font-size: 30rpx;
  529. font-family: Verdana, Verdana-Bold;
  530. font-weight: 700;
  531. text-align: left;
  532. color: #ffffff;
  533. }
  534. .value {
  535. font-size: 24rpx;
  536. font-family: Verdana, Verdana-Regular;
  537. font-weight: 400;
  538. text-align: left;
  539. color: #ffead8;
  540. }
  541. }
  542. .invitationBtn {
  543. width: 140rpx;
  544. height: 56rpx;
  545. border-radius: 12rpx;
  546. background-color: #FFFFFF;
  547. font-size: 24rpx;
  548. font-family: Verdana, Verdana-Bold;
  549. font-weight: 700;
  550. text-align: center;
  551. color: #f07423;
  552. line-height: 56rpx;
  553. }
  554. }
  555. }
  556. </style>