front-end/hdAppBack/src/admin/official/callback.vue

<template>
  <!-- 官网各种回调页面 -->
  <div class="app-content">
    <div class="callback-wrap">
      <div class="callback-blo" :class="{ 'paddingTop' : pageStatus == 7 }">
        <block v-if="pageStatus == 7">
          <div class="module-wrap">
            <div class="module-tit">提示</div>
            <div class="module-det">
              <div class="module-list" v-for="(item, index) in promptData" :key="index">
                <span class="dot-wrap"></span>
                <span>{{ item }}</span>
              </div>
            </div>
          </div>
        </block>
        <block v-else>
          <!-- 使用icon -->
          <!-- 成功 icon -->
          <block v-if="pageStatus == 1">
            <div class="status-img">
              <img :src="`${constant.imgUrl}/retail/callback/success.png`" alt mode="widthFix" />
            </div>
          </block>
          <!-- 使用图片 -->
          <!-- 支付成功 -->
          <block v-else>
            <div class="icon">
              <i class="iconfont icondaizhifu"></i>
            </div>
          </block>
          <!-- prompt-wrap -->
          <div class="prompt-wrap">
            <block v-if="pageStatus == 1">
              <div class="prompt-tit" style="color: #09bb07">恭喜您, 续订成功!</div>
              <div>
                <span class="app-color-2">你的帐号有效期已延长至:</span>
                <span>{{ data.deadline | formatTime('YYYY-MM-DD hh:mm:ss') }}</span>
              </div>
            </block>
            <block v-if="pageStatus == 2 || pageStatus == 3">
              <div class="prompt-tit">申请已提交</div>
              <div>
                <span class="app-color-2">审核大约需要一个工作日，请耐心等候</span>
              </div>
            </block>
          </div>
          <!-- qr-code -->
          <!-- <div class="qr-code-wrap" v-if="option.focus == 0"> -->
          <block v-if="pageStatus == 2">
            <div class="qr-code-wrap">
              <div class="qr-code-img">
                <!-- <img :src="`${constant.imgUrl}/retail/common/qr-code.png`" alt /> -->
                <img :src="officialApply.qrCode" alt />
              </div>
              <div>识别二维码关注花卉宝</div>
              <div>审核结果将通过微信通知您</div>
            </div>
          </block>

          <block v-if="pageStatus == 3">
            <div class="qr-code-wrap" style="margin-top:100rpx;">
              <div style="font-size:30rpx;">搜索并关注下方公众号</div>
              <div style="color:red;font-size:35rpx;font-weight:bold;margin:18rpx 0 18rpx 0">{{officialApply.wxAliasName}}</div>
              <div style="font-size:30rpx;">审核结果第一时间通知您</div>
            </div>
          </block>
        </block>
        <!-- button -->
        <div class="button-wrap">
          <block v-if="pageStatus == 1 || pageStatus == 7">
            <button class="admin-button-com big blue" @click="jumpPage">{{ btnText }}</button>
          </block>
          <block v-else-if="pageStatus == 3">
            <button
              class="admin-button-com big blue"
              style="width:230rpx;"
              @click="pasteWxAccount()"
            >复制</button>
          </block>
          <block v-else>
            <button class="admin-button-com big default" @click="jumpPage">{{ btnText }}</button>
          </block>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/** *
 * 页面状态
 * @parmas pageStatus 进入页面的状态
 * @parmas 1 续订成功
 * @parmas 2 申请已提交
 * @parmas 3 申请已提交 - 返回二维码 -- successPay
 * @parmas 4 审核未通过 -- successEval
 * @parmas 5 审核通过 - 扫码支付 -- successPayCode
 * @parmas 6 授权成功 - 扫码支付 -- successPayCode
 * @parmas 7 授权提示 - 扫码支付 -- successPayCode
 */
// api
import { accountDet, applyStatus, getAuthUrl } from "@/api/official";
// import { getShopUser } from '@/utils/auth'
export default {
  name: "callback",
  data() {
    return {
      constant: this.$constant,
      data: {},
      pageStatus: "3",
      promptData: [
        "确认你已经有公众号（服务号），并且已认证和申请微 信支付",
        "满足以上条件，可以点下方按钮开始授权。",
        "点击之后会跳到新页面，页面有个二维码，识别后按确 认授权即可。"
      ],
	  officialApply: {
		  wxAliasName:""
	  },
	  wxAccount:''
    };
  },
  computed: {
    btnText() {
      let text = "";
      switch (this.pageStatus) {
        case "1":
          text = "返回管理中心";
          break;
        case "2":
          text = "返回首页";
          break;
        case "3":
          text = "返回首页";
          break;
        case "4":
          text = "返回首页";
          break;
        case "5":
          text = "开始授权";
          break;
        case "6":
          text = "管理中心";
          break;
        case "7":
          text = "开始授权";
          break;
        default:
          text = "返回管理中心";
          break;
      }
      return text;
    }
  },
  onLoad() {
    // if (!this.$util.isLogin()) {
    // 	getShopUser()
    // 	return false
    // }
  },
  mounted() {
    // this.pageStatus = this.option.pageStatus
    // this.init()
  },
  methods: {
    init() {
      let officialApply = uni.getStorageSync("officialApply");
      if (!this.$util.isEmpty(officialApply)) {
        this.officialApply = officialApply;
      }
      if (this.option.pagestatus == 1) {
        this.pageStatus = 1;
      }
      this.$util.getCheckLogin().then(res => {
        if (res) {
          // this._getStatus()
          if (this.pageStatus == 1 || this.pageStatus == 5) {
            this._accountDet();
          }
        }
      });
    },
    // 获取状态
    _getStatus() {
      applyStatus().then(res => {
        let status = res.data.status;
        if (status == 1) {
          this.pageStatus = 2;
        }
      });
    },
    // 获取用户信息
    _accountDet() {
      accountDet().then(res => {
        this.data = res.data;
      });
    },
    jumpPage() {
      if (this.btnText == "返回首页") {
        this.$util.pageTo({
          url: "/official/index",
          query: {
            id: this.option.id
          }
        });
      } else if (this.btnText == "返回管理中心") {
        // this.$util.pageTo({
        // 	url: '/official/index',
        // 	query: {
        // 		id: this.option.id
        // 	}
        // })
        // #ifdef H5
        location.href = `${window.location.protocol}//b.${this.$constant.firstHost}.com/#/`;
        // #endif
      } else if (this.btnText == "开始授权") {
        getAuthUrl().then(res => {
          // #ifdef H5
          location.href = res.data.url;
          // #endif
        });
        // this.$msg('功能待对接！')
      }
    },
    pasteWxAccount() {
      uni.setClipboardData({
        data: this.officialApply.wxAliasName,
        success: function(res) {
          uni.getClipboardData({
            success: function(res) {
              uni.showToast({
                title: "已复制"
              });
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.callback-wrap {
  padding-top: 30px;
  .callback-blo {
    width: calc(100% - 60px);
    margin: 0 30px;
    padding: 70px 0;
    background-color: #fff;
    box-shadow: 2px 2px 16px 0px rgba(181, 181, 181, 0.29);
    border-radius: 10px;
    text-align: center;
    &.paddingTop {
      padding-top: 40px;
    }
    // 使用icon
    .icon {
      .iconfont {
        font-size: 170px;
      }
      .icondaizhifu {
        color: #ffa92e;
      }
    }
    // 使用状态图片
    .status-img {
      width: 294px;
      margin: 0 auto;
    }
  }
  // module
  .module-wrap {
    padding: 0 32px;
    text-align: left;
    .module-tit {
      font-size: 38px;
      // margin-bottom: 20px;
    }
    .module-det {
      .module-list {
        @include disFlex(flex-start, flex-start);
        margin-top: 30px;
        .dot-wrap {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: $mainColor;
          margin-top: 12px;
          margin-right: 24px;
        }
      }
    }
  }
  // prompt
  .prompt-wrap {
    margin-top: 60px;
    .prompt-tit {
      font-size: 36px;
      margin-bottom: 10px;
    }
  }
  // qr-code
  .qr-code-wrap {
    color: $fontColor2;
    text-align: center;
    & > div {
      margin-top: 10px;
    }
    .qr-code-img {
      width: 226px;
      margin: 60px auto 40px;
    }
  }
  // button
  .button-wrap {
    margin-top: 80px;
  }
}
</style>