|
|
@@ -0,0 +1,465 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <image class="topImg" :src="dataInfo.image" mode="aspectFill"></image>
|
|
|
+ <view class="sectionA">
|
|
|
+ <view class="topSection">
|
|
|
+ <view class="title">{{dataInfo.name}}</view>
|
|
|
+ <view class="tags">
|
|
|
+ <view class="item" v-for="(item, idx) in dataInfo.categoryList" :key="idx"
|
|
|
+ :style="`color: ${color2}; background-color: ${color6};`">{{item.categoryName}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="shareBtn" :style="`background-color: ${color1};`" @click="toShareCard(dataInfo)">
|
|
|
+ <image class="icon" src="https://dm.static.elab-plus.com/yezhu/h5/icon_share.png" mode="aspectFit"></image>
|
|
|
+ <text>分享项目</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bottomSection">
|
|
|
+ <image class="icon" src="https://dm.static.elab-plus.com/yezhu/h5/icon_dingweiY.png" mode=""></image>
|
|
|
+ <view class="name">{{dataInfo.province + dataInfo.city + dataInfo.district + dataInfo.address}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="sectionB">
|
|
|
+ <view class="item" v-for="(item, idx) in categoryList" :key="idx">
|
|
|
+ <view class="name">{{item.categoryName}}收益</view>
|
|
|
+ <view class="value">{{item.value}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="sectionC">
|
|
|
+ <view class="title">基本信息</view>
|
|
|
+ <view class="line"></view>
|
|
|
+ <view class="infos">
|
|
|
+ <view class="item" v-for="(item, idx) in infos" :key="idx">
|
|
|
+ <view class="name">{{item.title}}</view>
|
|
|
+ <view class="value">{{item.value}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="sectionD">
|
|
|
+ <image class="icon" src="https://dm.static.elab-plus.com/yezhu/icon_hongbao.png" mode="aspectFit"></image>
|
|
|
+ <view class="midSection">
|
|
|
+ <view class="name">邀请好友注册</view>
|
|
|
+ <view class="value">完成邀请，可获得￥{{dataInfo.registAmount}}/人</view>
|
|
|
+ </view>
|
|
|
+ <view class="invitationBtn">邀请好友</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="homeBtn"
|
|
|
+ :style="`position: fixed; z-index: 1000; right: 0; bottom: 25%; width: 96rpx; height: 110rpx; display: flex; flex-direction: column; align-items: center;border-radius: 20rpx 0rpx 0px 20rpx;box-shadow: 0rpx 10rpx 20rpx 0px rgba(119,55,12,0.20); background-color: ${color2};`"
|
|
|
+ @click="backAction">
|
|
|
+ <image class="icon" style="margin-top: 8rpx;width: 30rpx; height: 28rpx;" src="https://dm.static.elab-plus.com/yezhu/h5/icon_homeBtn.png" mode="aspectFit"></image>
|
|
|
+ <view class="text" style="margin-top: 6rpx;font-size: 12rpx;font-family: PingFang SC, PingFang SC-Semibold;font-weight: 400;text-align: center;color: #ffffff;">返回</view>
|
|
|
+ <view class="text" style="margin-top: -2rpx;;font-size: 12rpx;font-family: PingFang SC, PingFang SC-Semibold;font-weight: 400;text-align: center;color: #ffffff;">任务大厅</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import moment from '../../static/moment.min.js'
|
|
|
+ import {
|
|
|
+ displayDateFormatChi
|
|
|
+ } from '../../static/format.js'
|
|
|
+
|
|
|
+ let app = getApp();
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ color1: '',
|
|
|
+ color2: '',
|
|
|
+ color3: '',
|
|
|
+ color6: '',
|
|
|
+ infos: [{
|
|
|
+ title: '开盘时间',
|
|
|
+ value: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '项目业态',
|
|
|
+ value: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '均价',
|
|
|
+ value: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '总价',
|
|
|
+ value: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '主力户型',
|
|
|
+ value: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '目标人群',
|
|
|
+ value: ''
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ projectId: '',
|
|
|
+ dataInfo: {
|
|
|
+ "address": "",
|
|
|
+ "availableIncome": "",
|
|
|
+ "bizFormat": "",
|
|
|
+ "categoryList": [],
|
|
|
+ "city": "",
|
|
|
+ "cusGroup": "",
|
|
|
+ "district": "",
|
|
|
+ "id": 0,
|
|
|
+ "image": "",
|
|
|
+ "mainHouseType": "",
|
|
|
+ "maxPrice": 0,
|
|
|
+ "maxTotalPrice": 0,
|
|
|
+ "minPrice": 0,
|
|
|
+ "minTotalPrice": 0,
|
|
|
+ "name": "",
|
|
|
+ "onlineStatus": 0,
|
|
|
+ "openTime": 0,
|
|
|
+ "otherPage": "",
|
|
|
+ "projectFocusImage": "",
|
|
|
+ "projectId": "",
|
|
|
+ "province": "",
|
|
|
+ "registAmount": "",
|
|
|
+ "revision": "",
|
|
|
+ "shareImg": "",
|
|
|
+ "shareRemark": "",
|
|
|
+ "xcxPage": ""
|
|
|
+ },
|
|
|
+
|
|
|
+ categoryList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.color1 = app.globalData.color1;
|
|
|
+ this.color2 = app.globalData.color2;
|
|
|
+ this.color3 = app.globalData.color3;
|
|
|
+ this.color6 = app.globalData.color6;
|
|
|
+ this.projectId = uni.getStorageSync('projectId')
|
|
|
+ if (this.projectId) {
|
|
|
+ this.detailDatahandle()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async detailDatahandle() {
|
|
|
+ var parmas = {
|
|
|
+ projectId: this.projectId
|
|
|
+ }
|
|
|
+ let res = await this.$myRequest({
|
|
|
+ url: '/project/queryProjectByH5',
|
|
|
+ data: parmas
|
|
|
+ })
|
|
|
+ if (res && res.data.success) {
|
|
|
+ console.log('详情res：', res)
|
|
|
+ this.dataInfo = res.data.single
|
|
|
+ this.reloadCategoryList()
|
|
|
+ this.reloadInfos()
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ reloadCategoryList() {
|
|
|
+ var tempList = JSON.parse(JSON.stringify(this.dataInfo.categoryList || []))
|
|
|
+ tempList.forEach((item, idx) => {
|
|
|
+ item.value = '￥' + (parseFloat(item.amount || 0.00).toFixed(2)) + '/个'
|
|
|
+ })
|
|
|
+ this.categoryList = tempList
|
|
|
+ this.categoryList.push({categoryName: '可获收益', value: this.dataInfo.availableIncome + '元'})
|
|
|
+ },
|
|
|
+
|
|
|
+ reloadInfos() {
|
|
|
+ this.infos[0].value = this.timeFilterAction(this.dataInfo.openTime)
|
|
|
+ this.infos[1].value = this.dataInfo.bizFormat
|
|
|
+ if (this.dataInfo.maxPrice > 0) {
|
|
|
+ this.infos[2].value = this.priceReload(this.dataInfo.minPrice) + '~' + this.priceReload(this.dataInfo.maxPrice) + '/m²'
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.infos[2].value = this.priceReload(this.dataInfo.minPrice) + '/m²'
|
|
|
+ }
|
|
|
+ if (this.dataInfo.maxTotalPrice > 0) {
|
|
|
+ this.infos[3].value = this.priceReload(this.dataInfo.minTotalPrice) + '~' + this.priceReload(this.dataInfo.maxTotalPrice) + '/套'
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.infos[3].value = this.priceReload(this.dataInfo.minTotalPrice) + '/套'
|
|
|
+ }
|
|
|
+ this.infos[4].value = this.dataInfo.mainHouseType
|
|
|
+ this.infos[5].value = this.dataInfo.cusGroup
|
|
|
+
|
|
|
+ this.infos.forEach((item, idx) => {
|
|
|
+ if (!item.value) {
|
|
|
+ item.value = '暂无'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ timeFilterAction(val) {
|
|
|
+ return displayDateFormatChi(val)
|
|
|
+ },
|
|
|
+ priceReload(val) {
|
|
|
+ return parseFloat(val / 10000).toFixed(2) + '万'
|
|
|
+ },
|
|
|
+
|
|
|
+ toShareCard(item,type=2){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'../shareCardPage/shareCardPage?page='+item.xcxPage+"&projectId="+item.projectId+"&type="+type
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ backAction() {
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ page {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .topImg {
|
|
|
+ width: 100%;
|
|
|
+ height: 480rpx;
|
|
|
+ background-color: rgba($color: #000000, $alpha: 0.5);
|
|
|
+ // 滤镜效果
|
|
|
+ // -webkit-filter: grayscale(30%); /* Chrome, Safari, Opera */
|
|
|
+ // filter: grayscale(30%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .sectionA {
|
|
|
+ padding: 0 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 50rpx;
|
|
|
+
|
|
|
+ .topSection {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding-left: 6rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 44rpx;
|
|
|
+ font-family: Verdana, Verdana-Bold;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: left;
|
|
|
+ color: #262626;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tags {
|
|
|
+ margin-left: 8rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ flex-grow: 1;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ padding: 0 18rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ line-height: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ margin-left: 12rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .shareBtn {
|
|
|
+ width: 140rpx;
|
|
|
+ height: 52rpx;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: left;
|
|
|
+ color: #ffffff;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottomSection {
|
|
|
+ margin-top: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ height: 80rpx;
|
|
|
+ background: #f8f8f8;
|
|
|
+ border-radius: 8rpx;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 20rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ margin-right: 14rpx;
|
|
|
+ margin-left: 25rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: left;
|
|
|
+ color: #b1b1b1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .sectionB {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 40rpx 36rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: calc((100% - 12rpx) / 3);
|
|
|
+ .name {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: left;
|
|
|
+ color: #b1b1b1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: DIN Alternate, DIN Alternate-Bold;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: left;
|
|
|
+ color: #fd8f3c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .sectionC {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 36rpx 76rpx 36rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: Verdana, Verdana-Bold;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: left;
|
|
|
+ color: #171717;
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 26rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .line {
|
|
|
+ width: 6rpx;
|
|
|
+ height: 268rpx;
|
|
|
+ background: linear-gradient(180deg, #ffd7b9, rgba(255, 215, 185, 0.00));
|
|
|
+ border-radius: 4rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .infos {
|
|
|
+ margin-left: 30rpx;
|
|
|
+ width: calc(100% - 36rpx);
|
|
|
+ margin-top: -20rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 50%;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: left;
|
|
|
+ color: #b1b1b1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: left;
|
|
|
+ color: #262626;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .sectionD {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 30rpx;
|
|
|
+ width: calc(100% - 60rpx);
|
|
|
+ height: 140rpx;
|
|
|
+ background: linear-gradient(108deg, #ffb55f 9%, #f87523 96%);
|
|
|
+ border-radius: 16rpx;
|
|
|
+
|
|
|
+ padding: 0 20rpx 0 26rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .midSection {
|
|
|
+ flex-grow: 1;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: Verdana, Verdana-Bold;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: left;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: left;
|
|
|
+ color: #ffead8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .invitationBtn {
|
|
|
+ width: 140rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: Verdana, Verdana-Bold;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
+ color: #f07423;
|
|
|
+ line-height: 56rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
