2020-10-10

最新推荐文章于 2024-08-06 11:41:18 发布

风语者嘉

最新推荐文章于 2024-08-06 11:41:18 发布

阅读量851

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_36678495/article/details/108992704

版权

今天工作
查看小程序代码
学习vue,js,c#

{
“resource”: “/c:/Users/1/Downloads/mpview/mpview/src/components/buildCol5.vue”,
“owner”: “generated_diagnostic_collection_name#0”,
“severity”: 8,
“message”: “[vue/no-parsing-error]\nParsing error: unexpected-character-in-attribute-name.”,
“source”: “eslint-plugin-vue”,
“startLineNumber”: 44,
“startColumn”: 27,
“endLineNumber”: 44,
“endColumn”: 27
}

{
“resource”: “/c:/Users/1/Downloads/mpview/mpview/src/components/buildCol5.vue”,
“owner”: “generated_diagnostic_collection_name#0”,
“code”: “1128”,
“severity”: 8,
“message”: “Declaration or statement expected.”,
“source”: “Vetur”,
“startLineNumber”: 277,
“startColumn”: 3,
“endLineNumber”: 277,
“endColumn”: 4
}

<template>
  <div id="j_page">
    <div class="tables" v-if="showLoad && priceObj.name">
      <div class="t_center" :style="{'width':'710rpx','margin-left': '20rpx'}">
        <div class="center">
          <div class="t_title">
            <div><span style="margin: 0 60rpx">{{priceObj.name}}</span></div>
          </div>
          <div class="c_bottom">
            <div v-for="(part,partKey) in priceObj.data" :key="partKey">
              <div class="unitTop">
                <div class="left-top" v-if="partKey+1 == priceObj.data.length">
                  <span class="left-top-unit">单元</span>
                  <span class="left-top-floor">楼层</span>
                </div>
                <div class="centerNameBlank" v-if="partKey+1 == priceObj.data.length"></div>
                <div class="centerName">{{partKey+1}}单元</div>
              </div>
              <div class="table">
                <div class="trs">
                  <div class="table-tr" v-for="(num,numKey) in part" :key="numKey">
                    <div class="floor">
                      <div class="table-tb1" v-if="priceObj.data.length - partKey === 1 && numKey === part.length -1">
                      </div>
                      <div class="table-tb">{{numKey+1}}室</div>
                    </div>
                    <div class="tds">
                      <div class="floor" v-for="(floor,floorKey) in num" :key="floorKey">
                        <div :class="{'table-tds':true,'border-bottom': floorKey == 0}" style="width: 80rpx;text-align: center;"
                          v-if="part.length == numKey+1 && partKey+1 == priceObj.data.length" :style="{'height': showYueGon?'185rpx':'150rpx'}">
                          {{floorKey+1}}层</div>
                        <div class="table-td" :style="{'height': showYueGon?'185rpx':'150rpx','background': '#fdfce7'}"
                          v-if="floor">
                          <div>噪声值：{{floor['noise']}}</div> 
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import loans3 from '@/components/loans3'
  import saleMan from '@/components/saleMan'
  export default {
    props: ['real_estate_id', 'bright_name', 'showR', 's_id'],
    components: {
      loans3,
      saleMan
    },
    data() {
      return {
        severUrl: this.globalData.severUrl,
        priceObj: '',
        real_estate_name: '',
        showLoad: false,
        salesman: '',
        b_height: 0,
        showYueGon: false,
      }
    },
    onLoad() {
      console.log('1')
      let that = this
      that.reLoad()
      that.queryInfo()
    },

    onUnload() {
      let that = this
      that.reLoad()
    },
    methods: {
      // 清空
      reLoad() {
        let that = this
        that.priceObj = ''
        that.real_estate_name = ''
        that.showLoad = false
        that.salesman = ''
        that.b_height = 0
        that.showYueGon = false
      },
      // 楼盘
      toRealPage() {
        let that = this
        that.$gateTo('qwa','R='+that.real_estate_id + '&from=' + '首页')
      },
      // 加载页面
      queryInfo() {
        let that = this
        let temp = {
          real_estate_id: that.real_estate_id,
          page: 'buildCol5',
          build_name: that.bright_name,
        }
        if (that.s_id) {
          temp['user_id'] = that.s_id
        }
        that.$get('api/queryRealEstateInfo2', temp).then(function (res) {
          if (res.msg === '身份验证失败') {
            that.$session(that.queryInfo)
            return
          }
          console.log('resdata', res.data)
          that.real_estate_name = res.data.real_estate_name
          that.$emit('realName',that.real_estate_name)
          let building = res.data.building || []
          let topList = []
          for (let i = 0; i < building.length; i++) {
            let temp = {
              name: building[i].name,
              color: '',
            }
            if (!building[i].hasPrice) {
              temp.color = '#e3e3df'
            }
            topList.push(temp)
          }
          if (topList.length>0) {
            that.$emit('showTop',JSON.stringify(topList))
          }
          that.priceObj = res.data.oneBuild || ''
          if (that.priceObj) {
            that.showLoad = true
          } else {
            that.showLoad = false
          }
          console.log('priceObj', that.priceObj)
          that.salesman = res.data.consultant || ''
          that.$nextTick(function () {
            that.getBottomHeight()
          })
        })
      },
      getBottomHeight() {
        let that = this
        let timerA = setTimeout(function () {
          wx.createSelectorQuery().select('#saleBottom').boundingClientRect(function (rect) {
            if (rect) {
              that.b_height = rect.height
            }
            clearTimeout(timerA)
          }).exec()
        }, 200)
      },
      result(temp, price, shoufu) {
        let that = this
        let yuelilv = temp.lilv / 1200
        let yuelilv_g = temp.lilv_g / 1200
        if (temp.price_g) {
          let list = []
          if (price * shoufu - temp.price_g > 0) {
            list = that.submit(price * shoufu - temp.price_g, temp.year, yuelilv, temp.choose)
          }
          let list2 = that.submit(temp.price_g, temp.year_g, yuelilv_g, temp.choose)
          let list_all = []
          if (list.length > 0) {
            for (let i = 0; i < list.length; i++) {
              let yuegong
              if (list2[i]) {
                yuegong = ((Number(list[i].yuegong) * 100 + Number(list2[i].yuegong) * 100) / 100).toFixed(2)
              } else {
                yuegong = list[i].yuegong
              }
              let temp = {
                index: list[i].index,
                yuegong: yuegong
              }
              list_all.push(temp)
            }
          } else {
            list_all = list2
          }
          return parseInt(list_all[0].yuegong)
        } else {
          let list = that.submit(price * shoufu, temp.year, yuelilv, temp.choose)
          return parseInt(list[0].yuegong)
        }
      },
      submit(price, year, yuelilv, choose) {
        let that = this
        let qishu = year * 12
        if (choose === 1) {
          let benjin = price / qishu
          let list = new Array(qishu)
          for (let i = 0; i < list.length; i++) {
            let obj = {}
            let lixi = (price - i * benjin) * yuelilv
            obj.index = i + 1
            obj.benjin = benjin.toFixed(2)
            obj.lixi = lixi.toFixed(2)
            obj.yuegong = (benjin + lixi).toFixed(2)
            list[i] = obj
          }
          return list
        } else {
          let list = new Array(qishu)
          let yuegong = price * yuelilv * (1 + yuelilv) ** qishu / ((1 + yuelilv) ** qishu - 1)
          for (let i = 0; i < list.length; i++) {
            let obj = {}
            let benjin = price * yuelilv * (1 + yuelilv) ** i / ((1 + yuelilv) ** qishu - 1)
            let lixi = (price - i * benjin) * yuelilv
            obj.index = i + 1
            obj.benjin = benjin.toFixed(2)
            obj.yuegong = yuegong.toFixed(2)
            obj.lixi = (obj.yuegong - obj.benjin).toFixed(2)
            list[i] = obj
          }
          return list
        }
      },

      // 图片
      createImg() {
        let that = this
        let temp = {
          real_estate_name: that.real_estate_name,
          build: that.priceObj,
        }
        let option = {
          api: 'drawPriceTable',
          temp: temp,
        }
        that.$buildCol(option)
      },
    }
  }

</script>

<style scoped>
  #saleBottom {
    position: fixed;
    left: 0;
    bottom: 0;
  }
  .noBright {
    text-align: center;
    margin-top: 140rpx;
    font-size: 16px;
    color: #ccc;
  }

  .tips {
    margin: 30rpx 20rpx 10rpx 20rpx;
    font-size: 12px;
    color: #ccc;
    text-align: left;
  }
  
  .tables {
    margin-top: 40rpx;
    text-align: center;
  }

  .t_center {
    display: flex;
    text-align: center;
    margin-top: 40rpx;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .t_title {
    text-align: center;
    font-size: 14px;
    border-right: 1rpx solid #ddd;
    border-bottom: 1rpx solid #ddd;
  }

  .t_title div {
    height: 80rpx;
    line-height: 80rpx;
  }

  .center {
    margin: 0 auto;
    border-top: 1rpx solid #ddd;
    border-left: 1rpx solid #ddd;
    box-sizing: border-box;
  }

  .c_bottom {
    display: flex;
    flex-direction: row-reverse;
  }

  .centerName {
    font-size: 24rpx;
    border-right: 1rpx solid #ddd;
    height: 50rpx;
    line-height: 50rpx;
    box-sizing: border-box;
    flex-grow: 1;
  }

  .centerNameBlank {
    width: 80rpx;
    height: 50rpx;
    box-sizing: border-box;
    border-right: 1rpx solid #ddd;
  }

  .table {
    display: flex;
    font-size: 24rpx;
  }

  .trs {
    display: flex;
    flex-direction: row-reverse;
    box-sizing: border-box;
  }

  .table-tr {
    display: flex;
    flex-direction: column;
  }

  .tds {
    display: flex;
    flex-direction: column-reverse;
  }

  .table-tb {
    border-right: 1rpx solid #ddd;
    border-top: 1rpx solid #ddd;
    border-bottom: 1rpx solid #ddd;
    text-align: center;
    width: 210rpx;
    height: 40rpx;
    line-height: 40rpx;
    white-space: nowrap;
    box-sizing: border-box;
  }

  .table-tb1 {
    width: 80rpx;
    height: 40rpx;
    border-right: 1rpx solid #ddd;
    border-bottom: 1rpx solid #ddd;
    box-sizing: border-box;
  }

  .table-tds,
  .table-td {
    border-right: 1rpx solid #ddd;
    border-bottom: 1rpx solid #ddd;
    text-align: left;
    width: 210rpx;
    height: 255rpx;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    box-sizing: border-box;
  }
  .table-td div {
    margin: 0 5rpx;
  }

  .floor {
    display: flex;
  }

  .unitTop {
    display: flex;
    position: relative;
  }

  .left-top {
    font-size: 24rpx;
    position: absolute;
    top: 0;
    left: 0;
    width: 80rpx;
    height: 90rpx;
    background:
      linear-gradient(49deg, transparent 49.5%, #ddd 49.5%, #ddd 50.5%, transparent 50.5%);
  }

  .left-top-unit {
    position: absolute;
    top: 5rpx;
    right: 5rpx;
  }

  .left-top-floor {
    position: absolute;
    left: 5rpx;
    bottom: 5rpx;
  }
  .WXCode {
    text-align: left;
    margin: 40rpx 30rpx;
    color: #ff842e;
    font-size: 14px;
  }

  .whiteDiv {
    height: 140rpx;
  }

  .bottom_R {
    background: white;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 750rpx;
    height: 110rpx;
    font-size: 20px;
    text-align: center;
    padding: 0px;
    border-top: 1px solid #e9eaec;
    z-index: 2;
    display: flex;
    align-items: center;
  }

  .bottom_R div {
    width: 230rpx;
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 10px;
  }

  .bottom_R .share {
    width: 230rpx;
    height: 90rpx;
    font-size: 20px;
    padding: 0;
    border: none;
    border-radius: 10px;
  }

</style>

<template>
  <div>
    <div class="tabs">
      <div class="topDiv">
        <div class="bright_houe">
          <div v-for="(bright,index) in topList" :key="index" @click.stop="toApart(bright.name,index)" :class="{cur2:bright.color}" :style="{'color': bright.name === bright_name ? '#ff842e' : '','background': bright.name === bright_name?'white':''}">
            <span>{{bright.name}}</span>
          </div>
        </div>
        <img :src="severUrl+'longdong_you.png'" v-if="severUrl" />
      </div>
      <div class="hds">
        <div class="hddiv" :class="{cur:lanmu==='col1'}" @click="changeLanmu('col1')" v-if="!secHouse">
          选房顺序
        </div>
        <div class="hddiv" :class="{cur:lanmu==='col2'}" @click="changeLanmu('col2')">
          日照选房
        </div>
        <div class="hddiv" :class="{cur:lanmu==='col4'}" @click="changeLanmu('col4')">
          楼栋分析
        </div>
        <div class="hddiv" :class="{cur:lanmu==='col3'}" @click="changeLanmu('col3')" v-if="!secHouse">
          一房一价
        </div>
        <div class="hddiv" :class="{cur:lanmu==='col5'}" @click="changeLanmu('col5')" >
          噪音
        </div>
      </div>
    </div>
    <div :style="{'padding-top': '90px','margin-top': '10px'}">
      <div v-if="lanmu==='col1' && realId1">
        <buildCol1 :real_estate_id="realId1" :s_id="s_id" :bright_name="bright_name" @showTop="showTop_c" :showR="showR" @realName="realName_c"></buildCol1>
      </div>
      <div v-if="lanmu==='col2' && realId2">
        <buildCol2 :real_estate_id="realId2" :s_id="s_id" :bright_name="bright_name" @showTop="showTop_c" :showR="showR" @realName="realName_c"></buildCol2>
      </div>
      <div v-if="lanmu==='col3' && realId3">
        <buildCol3 :real_estate_id="realId3" :s_id="s_id" :bright_name="bright_name" @showTop="showTop_c" :showR="showR" @realName="realName_c"></buildCol3>
      </div>
      <div v-if="lanmu==='col4' && realId4">
        <buildCol4 :real_estate_id="realId4" :s_id="s_id" :bright_name="bright_name" @showTop="showTop_c" @realName="realName_c"></buildCol4>
      </div>
      <div v-if="lanmu==='col5' && realId5">
        <buildCol5 :real_estate_id="realId5" :s_id="s_id" :bright_name="bright_name" @showTop="showTop_c" :showR="showR" @realName="realName_c"></buildCol5>
      </div>
    </div>
  </div>
</template>

<script>
  import buildCol1 from '@/components/buildCol1'
  import buildCol2 from '@/components/buildCol2'
  import buildCol3 from '@/components/buildCol3'
  import buildCol4 from '@/components/buildCol4'
  import buildCol5 from '@/components/buildCol5'
  export default {
    components: {
      buildCol1,
      buildCol2,
      buildCol3,
      buildCol4,
      buildCol5,
    },
    data() {
      return {
        severUrl: this.globalData.severUrl,
        real_estate_id: '',
        real_estate_name: '',
        user_id: '',
        topList: [],
        bright_name: '',
        lanmu: 'col4', // 切换栏目
        realId1: '',
        realId2: '',
        realId3: '',
        realId4: '',
        realId5: '',
        showR: false,
        showFirst: true,
        s_id: '',
        secHouse: false,
      }
    },
    computed: {
      RefreshComputed() {
        let that = this
        if (that.showFirst && that.real_estate_id) {
          that.changeName()
        }
      },
    },
    onLoad(option) {
      let that = this
      that.clear()
      let build = JSON.parse(decodeURIComponent(option.build))
      that.real_estate_id = build.id
      that.s_id = option.U
      if (build.name) {
        that.bright_name = build.name
      }
      if (build.LM) {
        that.lanmu = build.LM
      }
      if (build.from) {
        that.showR = true
      }
      if (build.type) {
        that.secHouse = true
      }
      that.changeName()
      wx.getStorage({
        key: 'user',
        success(res) {
          that.user_id = res.data.id
        }
      })
    },

    onShareAppMessage() {
      let that = this
      that.$clickShare()
      if (that.lanmu === 'col2') {
        let build = {
          id: that.real_estate_id,
          name: that.bright_name,
          LM: 'col2'
        }
        let path = '/pages/qwa/main?build=' + JSON.stringify(build) + '&U=' + that.user_id + '&R=' + that.real_estate_id + '&L=' + 'col'
        return {
          title: that.real_estate_name + that.bright_name + '专业日照选房顺序~',
          imageUrl: '',
          path: path,
        }
      } else {
        let str = ''
        if (that.lanmu === 'col1') {
          str = '选哪层好?小鸡选房推出重磅选房顺序!'
        } else if (that.lanmu === 'col3') {
          str = '选哪层好?快来小鸡选房看一房一价!'
        } else if (that.lanmu === 'col4') {
          str = '专业楼栋评测~'
        } else if (that.lanmu === 'col5') {
          str = '噪音评估'
        }
        let build = {
          id: that.real_estate_id,
          name: that.bright_name,
          LM: that.lanmu
        }
        return {
          title: that.real_estate_name + str,
          imageUrl: '',
          path: '/pages/qwa/main?build=' + JSON.stringify(build) + '&U=' + that.user_id + '&R=' + that.real_estate_id + '&L=' + 'col',
        }
      } 
    },

    onPullDownRefresh () {
      let that = this
      that.changeName()
    },

    onUnload() {
      let that = this
      that.clear()
      let pdList_rommPrice2 = that.globalData.pdList_rommPrice2
      if (pdList_rommPrice2.length) {
        pdList_rommPrice2.splice(pdList_rommPrice2.length - 1, 1)
        if (pdList_rommPrice2.length > 0) {
          Object.assign(that.$data, pdList_rommPrice2[pdList_rommPrice2.length - 1])
        }
      }
    },

    methods: {
      clear() {
        let that = this
        that.real_estate_id = ''
        that.real_estate_name = ''
        that.user_id = ''
        that.topList = []
        that.bright_name = ''
        that.lanmu = 'col4'
        that.realId1 = ''
        that.realId2 = ''
        that.realId3 = ''
        that.realId4 = ''
        that.realId5 = ''
        that.imgName2 = ''
        that.showR = false
        that.showFirst = true
        that.s_id = ''
        that.secHouse = false
      },
      changeName() {
        let that = this
        if (that.lanmu === 'col1') {
          that.realId1 = ''
          let timer = setTimeout(function () {
            that.realId1 = that.real_estate_id
            clearTimeout(timer)
          }, 10)
        } else if (that.lanmu === 'col2') {
          that.realId2 = ''
          let timer = setTimeout(function () {
            that.realId2 = that.real_estate_id
            clearTimeout(timer)
          }, 10)
        } else if (that.lanmu === 'col3') {
          that.realId3 = ''
          let timer = setTimeout(function () {
            that.realId3 = that.real_estate_id
            clearTimeout(timer)
          }, 10)
        } else if (that.lanmu === 'col4') {
          that.realId4 = ''
          let timer = setTimeout(function () {
            that.realId4 = that.real_estate_id
            clearTimeout(timer)
          }, 10)
        } else if (that.lanmu === 'col5') {
          that.realId5 = ''
          let timer = setTimeout(function(){
            that.realId5 = that.real_estate_id
            clearTimeout(timer)
          }, 10)
        }
        wx.stopPullDownRefresh()
        if (that.showFirst) {
          let pdList_rommPrice2 = that.globalData.pdList_rommPrice2
          pdList_rommPrice2.push({
            ...that.$data
          })
          that.showFirst = false
        }
      },
      // 切换栏目
      changeLanmu (str) {
        let that = this
        that.lanmu = str
        that.changeName()
      },
      realName_c(e) {
        let that = this
        if (!that.real_estate_name) {
          that.real_estate_name = e
          wx.setNavigationBarTitle({title: that.real_estate_name})
        }
      },
      showTop_c(e) {
        let that = this
        if (that.topList.length === 0) {
          that.topList = JSON.parse(e)
          if (!that.bright_name) {
            that.bright_name = that.topList[0].name
          }
        }
      },
      // 切换
      toApart (name, index) {
        let that = this
        that.bright_name = name
        that.changeName()
      },
    }
  }

</script>

<style scoped>
  .tabs {
    position: fixed;
    top: 0;
    background: white;
    z-index: 20;
  }
  .topDiv {
    display: flex;
    align-items: center;
    width: 750rpx;
    background: #01fd6a;
  }
  .topDiv img {
    width: 20px;
    height: 40rpx;
    margin: 0 10rpx; 
  }
  .bright_houe {
    width: 690rpx;
    font-size: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-wrap: nowrap;
    height: 30px;
    line-height: 30px;
    padding: 10px 0;
  }
  .bright_houe div {
    margin: 0 20rpx;
    border-radius: 10rpx;
  }
  .bright_houe span {
    display: block;
    padding: 0 30rpx;
    white-space: nowrap;
  }
  .tabs .hds {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    justify-content: space-around;
    width: 750rpx;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-bottom: 1rpx solid #e9eaec;
  }
  .tabs .hds .hddiv {
    width: 160rpx;
    position: relative;
  }
  .cur {
    color: #ff842e;
  }
  .cur2 {
    color: #ccc;
  }

</style>