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

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

    <view class="content">
      <image class="avatar" :src="detail.avatarUrl"></image>
      <text class="nick-name">{{ detail.nickName }}</text>

      <template v-if="isLocked">
        <button class="btn" type="success" @click="openPopup">添加</button>
      </template>
      <template v-else>
        <image class="qr" :src="detail.qrCode" :show-menu-by-longpress="true"></image>
      </template>
    </view>

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

  </view>
</template>

<script>
  import popupUnlock from '../components/popupUnlock.vue'

	export default {
    components: {
      popupUnlock,
    },
		data() {
			return {
        detail: {
          id: null,
          avatarUrl: null,
          nickName: null,
          imageUrl: null,
          times: 10,
          qrCode: null,
          description: null,
        },
        isLocked: true,
      }
    },
    onLoad(option) {
      console.log('--option', option)
      const { id } = option
      
      this.fetchSharingDetail(id)
    },
    onShareAppMessage(res) {
      const {
        description,
        imageUrl,
      } = this.detail

      // todo: check
      let o = {
        title : description,
        imageUrl: imageUrl,
        // path: `/pages_order/sharing/personal?id=${this.detail.id}`
        query: `id=${this.detail.id}`,
      }

      // todo: check callback? settimeout?

      // todo: get times and check is unlocked

      this.isLocked = false

      return o
    },
    methods: {
      async fetchSharingDetail(id) {
        // todo: init data by id

        this.detail = {
          id: '001',
          avatarUrl: '../static/temp-avator.png',
          nickName: '裂变星官方指导客服',
          imageUrl: 'http://gips3.baidu.com/it/u=70459541,3412285454&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280',
          times: 10,
          qrCode: '../static/temp-qrcode.png',
          // title: '裂变星轻松获客',
          description: '如此好用的赚钱项目，赶快加入吧！',
          auditStatus: 2,
          createTime: '2025年2月1日',
          state: -1,
        }
      },
      openPopup() {
        this.$refs.popupUnlock.open();
      },
    },
  }
</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;
}

.btn, .qr {
  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;
}

.qr {
  width: 350rpx;
  height: 350rpx;
  bottom: 269rpx;
}
</style>