fission-star-applet-250304/pages_order/sharing/group.vue

<template>
  <view class="page">
		<navbar leftClick @leftClick="$utils.navigateBack" />

    <view class="content">
      <image class="avatar" :src="detail.headImage"></image>
      <text class="nick-name">{{ detail.headTitle || '' }}</text>
      <text class="desc">{{ `群人数：${detail.memberNum || 0}` }}</text>

      <template v-if="isLocked">
        <button class="btn" type="success" @click="onAdd">加入</button>
      </template>
      <view v-else class="group-info flex">
        <text>扫一扫，加群主审核进群</text>
        <image class="qr" :src="detail.wxCodeImage" :show-menu-by-longpress="true"></image>
      </view>
    </view>

    <popupUnlock ref="popupUnlock" src="../static/sharing/unlock-group.png"></popupUnlock>

  </view>
</template>

<script>
  import { mapState } from 'vuex'
  import popupUnlock from '../components/popupUnlock.vue'

	export default {
    components: {
      popupUnlock,
    },
		data() {
			return {
        id: null,
        detail: {
          id: null,
          avatarUrl: null,
          nickName: null,
          imageUrl: null,
          times: 0,
          qrCode: null,
          description: null,
        },
        isLocked: true,
      }
    },
		computed: {
			...mapState(['userInfo']),
		},
    onShow() {
      if (this.id && uni.getStorageSync('token')) {
        this.fetchDetails()
      }
    },
    onLoad(option) {
      const { id, state, shareId } = option

			if (shareId) {
				uni.setStorageSync('shareId', shareId)
			}
      
			if (state) {
				uni.setStorageSync('state', state)
			}
      
			if (id) {
				uni.setStorageSync('id', id)
			}

      this.id = id

      if (uni.getStorageSync('token')) {
        this.fetchDetails()
      } else {
        uni.navigateTo({
          url: '/pages_order/auth/wxLogin'
        })
      }
    },
    onShareAppMessage(res) {
      const {
        headTitle,
        indexImage,
      } = this.detail

      let o = {
        title : headTitle,
        imageUrl: indexImage,
        query: `id=${this.id}&state=2&shareId=${this.userInfo.id}`,
      }

      this.refreshLockStatus()

      return o
    },
    methods: {
      async fetchDetails() {
        try {
          this.detail = await this.$fetch('getGroupShareInfo', { id: this.id })
        } catch (err) {
          
        }
      },
      async fetchCheckShare() {
        try {
          return await this.$fetch('checkGroupShare', { id: this.id })
        } catch (err) {
          return {}
        }
      },
      async refreshLockStatus() {
        const result = await this.fetchCheckShare()
        const { title, open } = result

        console.log('--open', open)

        this.$refs.popupUnlock.close();

        if (open) {
          this.isLocked = false
          return
        }

        title && uni.showToast({
          title,
          icon: 'none',
          duration: 3000
        })
      },
      openPopup() {
        this.$refs.popupUnlock.open();
      },
      async onAdd() {
        
        const result = await this.fetchCheckShare()
        const { open, need_num, num } = result

        console.log('--open', open)

        if (open) { // 转发已达标
          this.isLocked = false
          return
        }

        uni.showToast({
          title: `还需转发${need_num - num}次`,
          icon: 'none',
        })

        this.openPopup()
      }
    },
  }
</script>

<style scoped lang="scss">
.page {
  position: relative;
  height: 100vh;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar {
  width: 180rpx;
  height: 180rpx;
  margin-top: 127rpx;
}

.nick-name {
  color: #1B1B1B;
  font-size: 32rpx;
  margin-top: 30rpx;
}

.desc {
  margin-top: 30rpx;
}

.btn, .group-info {
  position: absolute;
}

.btn {
  width: calc(100% - 60rpx*2);
  height: auto;
  left: 60rpx;
  bottom: 292rpx;

  background-color: #07C160;
  border: none;
  color: #FFFFFF;
  font-size: 28rpx;
  line-height: 1;
  border-radius: 45rpx;
  padding: 25rpx 0;
  box-sizing: border-box;
}

.group-info {
  bottom: 269rpx;

  flex-direction: column;

  color: #1B1B1B;
  font-size: 32rpx;
}

.qr {
  margin-top: 40rpx;

  width: 350rpx;
  height: 350rpx;
}
</style>