dvcp_v2_wxcp_app/src/apps/AppMyGrid/AppMyGrid.vue

<template>
  <section class="AppMyGrid">
    <div class="content" v-if="isGridMember">
      <div class="user-info">
        <img src="https://cdn.cunwuyun.cn/dvcp/AppMyGrid//my-bg-user.png" alt="" class="bg-img">
        <div class="top">
          <div v-text="user.name"/>
          <img :src="user.avatar" alt="" v-if="user.avatar">
          <img src="https://cdn.cunwuyun.cn/dvcp/user-icon.png" alt="" v-else>
        </div>
        <div class="bottom" flex>
          <div class="fill" v-text="user.girdName"/>
          <div class="signBtn" :class="{signIn}" v-text="signBtn" @click="$u.debounce(handleSignIn,500)"/>
        </div>
      </div>
      <div class="link" v-for="(item, index) in linkList" :key="index" @click="linkTo(item.linkUrl)">
        <div class="left" flex>
          <img :src="item.img" alt="">
          <div v-text="item.title"/>
        </div>
        <u-icon name="arrow-right" color="#ddd" size="40"/>
      </div>
    </div>
    <AiEmpty class="mar-t32" v-else no-permit :description="`<p>您不是网格员<br/>无法使用网格员相关功能哦~</p>`"/>
  </section>
</template>

<script>
import {mapState, mapActions} from "vuex"
import qs from "query-string"

export default {
  name: "AppMyGrid",
  appName: "网格员主页",
  computed: {
    ...mapState(['user']),
    isGridMember: v => v.user.girdCheckType > 0,
    signIn: v => v.user.gridExtra.isSign == 1,
    signBtn: v => v.signIn ? '已签到' : '签到'
  },
  data() {
    return {
      linkList: [
        {title: '我的积分', img: require('./assets/wdjf.png'), linkUrl: '../AppCreditPoints/AppGridIntegral'},
        {title: '积分兑换', img: require('./assets/jfdh.png'), linkUrl: '../AppCreditPoints/AppGridIntegral'},
        {title: '我收到的评价', img: require('./assets/wsddpj.png'), linkUrl: '../AppCreditPoints/AppGridIntegral'},
      ]
    }
  },
  methods: {
    ...mapActions(['getGridInfo']),
    linkTo(url) {
      uni.navigateTo({url})
    },
    handleSignIn() {
      !this.signIn && wx.getLocation({
        success: res => {
          const {latitude: lat, longitude: lng} = res
          if (!!lat && !!lng) {
            this.$http.post('/app/appdvcpconfig/apiForward', null, {
              params: {
                url: qs.stringifyUrl({
                  url: "https://apis.map.qq.com/ws/geocoder/v1/?get_poi=1",
                  query: {
                    location: [lat, lng].toString(),
                    key: "3RZBZ-LZUCF-CT6J5-NWKZH-FCWOQ-UUFKY",
                  }
                })
              },
              withoutToken: true
            })
            .then(({data: {result: {address}}}) => this.$http.post("/app/appwxsigninfo/sign", {lat, lng, address}))
            .then(res => {
              if (res?.code == 0) {
                this.linkTo("./signResult?id=" + res?.data.id)
              }
            }).catch(err => this.$u.toast(err))
          } else this.$u.toast("无法获取到定位!")
        }
      })
    }
  },
  created() {
    this.getGridInfo()
  }
}
</script>

<style lang="scss" scoped>
.AppMyGrid {
  .content {
    padding: 32px 32px 0;

    .user-info {
      width: 100%;
      height: 248px;
      border-radius: 8px;
      background-color: #fff;
      position: relative;
      margin-bottom: 32px;

      .bg-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
      }

      .top {
        display: flex;
        justify-content: space-between;
        padding: 28px 32px 36px;
        border-bottom: 1px solid #eee;

        div {
          font-size: 40px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333;
          line-height: 96px;
        }

        img {
          width: 96px;
          height: 96px;
          border-radius: 50%;
          border: 1px solid #eee;
        }
      }

      .bottom {
        padding: 16px 32px;
        font-size: 28px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999;
        height: 88px;
        box-sizing: border-box;
      }
    }

    .link {
      display: flex;
      justify-content: space-between;
      padding: 32px;
      background-color: #fff;
      border-radius: 8px;
      margin-bottom: 24px;

      .left {
        font-size: 30px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #333;
        line-height: 42px;

        img {
          width: 48px;
          height: 48px;
          margin-right: 16px;
          vertical-align: middle;
        }
      }

      .right-icon {
        width: 40px;
        height: 40px;
      }
    }
  }

  .signBtn {
    min-width: 144px;
    text-align: center;
    border: 1px solid #1365DD;
    color: #1365DD;
    line-height: 52px;
    border-radius: 4px;

    &.signIn {
      border-color: #ccc;
      color: #666;
      background: #eee;
    }
  }
}
</style>