fission-star-applet-250304/components/center/popupActivate.vue

<template>
  <uv-popup 
    ref="popup"
    :overlayOpacity="0.8"
    :customStyle="{
      backgroundColor: 'transparent',
    }"
  >
    <view class="flex content">
      <template v-if="mode === 'activate'">
        <image class="popup-bg" src="@/static/image/center/activate-code.png"></image>

        <view class="flex popup-btns">
          <button plain class="btn-simple" @click="close">
            <image class="popup-btn" src="@/static/image/center/cancel.png"></image>
          </button>
          <button plain class="btn-simple" @click="onConfirm">
            <image class="popup-btn" src="@/static/image/center/confirm.png"></image>
          </button>
        </view>

        <uv-input 
          v-model="activateCode"
          :focus="true"
          inputAlign="center"
          color="#3DFEE0"
          fontSize="45rpx"
          border="none"
          :customStyle="{
            backgroundColor: 'transparent',
            width: '250rpx',
            height: '63rpx',
            position: 'absolute',
            top: '216rpx',
            left: '160rpx',
          }"
        ></uv-input>
      </template>
      <template v-else>
        <!-- todo: 切换切图 "你还不是代理商" -->
        <image class="popup-bg" src="@/static/image/center/activate-code.png"></image>
        <view class="flex popup-btns">
          <button plain class="btn-simple" @click="close">
            <image class="popup-btn" src="@/static/image/center/cancel.png"></image>
          </button>
          <button plain class="btn-simple" @click="mode = 'activate'" >
            <image class="popup-btn" src="@/static/image/center/activate.png"></image>
          </button>
        </view>
      </template>
    </view>
  </uv-popup>
</template>

<script>
	export default {
    props: {
      isAgent: {
        type: String,
        default: null
      }
    },
		data() {
			return {
        mode: '',
        activateCode: '',
      }
    },
    methods: {
      open(isAgent) {
        this.mode = isAgent ? 'activate' : ''
        this.$refs.popup.open();
      },
      close() {
        this.$refs.popup.close();
      },
      onConfirm() {
        // todo

        // submit activateCode and update userInfo

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

<style scoped lang="scss">
.content {
  position: relative;
  flex-direction: column;
  width: 570rpx;
}

.popup {
  &-bg {
    width: 514rpx; height: 355rpx;
  }

  &-btns {
    justify-content: space-between; 
    margin-top: 56rpx;
    width: 100%;
  }

  &-btn {
    width: 265rpx; 
    height: 84rpx;
  }
}
</style>