wechat/src/pages/user/majorProjectsList/index.vue

<template>
  <div class="mainPage" v-if="showPage">
    <div class="flex-h">
      <div class="flex-item">
        <div>
          <ul>
            <router-link
              v-for="(item, index) in project"
              :key="index"
              class="flex-h"
              tag="li"
              :to="{ name:'majorProjects', query:{ id: item.CmsCaseId } }"
            >
              <a class="img">
                <img :src="getImg(item.CmsCaseImgs)" class="cover" alt>
              </a>
              <router-link
                tag="div"
                class="flex-item"
                :to="{ name:'majorProjects', query:{ id: item.CmsCaseId } }"
              >
                <div>
                  <span>{{item.Name}}</span>
                  <span>{{item.CaseAddress}}</span>
                </div>
              </router-link>
            </router-link>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: mapIndexActions } = createNamespacedHelpers('index')
const wx = require('weixin-js-sdk')
import wxsdk from '@/util/share'
export default {
  name: '',
  data () {
    return {
      showPage: false
    }
  },
  computed: {
    ...mapState({
      project: x => x.index.project,
      orgid: x => x.app.orgId
    })
  },
  created () {
    let that = this
    wxsdk({ url: encodeURIComponent(window.location.href.split('#')[0]) }, {
      title: '城的空间',
      desc: '城的空间',
      link: `${window.location.origin}${window.location.pathname}#/mainPage/indexPage`,
      thu_image: `https://spaceofcheng.oss-cn-beijing.aliyuncs.com/indexlogo.jpg?x-oss-process=style/wxicon`
    }).then(() => {
      wx.getLocation({
        type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
        success: function (res) {
          that.setLocation({ latitude1: res.latitude, longitude1: res.longitude })
          that.showPage = true
          that.init()
        },
        cancel: function () {
          that.showPage = true
          that.init()
        },
        fail: function () {
          that.showPage = true
          that.init()
        }
      })
    })
  },
  methods: {
    ...mapIndexActions(['getProjectList', 'setLocation']),
    getImg (list) {
      return list.filter(item => item.ImageType === 'cover')[0].CaseImageUrl
    },
    init () {
      this.getProjectList({ orgid: this.orgid, locationid: 'index' }).then(() => {
        this.showPage = true
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import 'page.scss';
</style>