mbti_uniapp/pages/career70/career70.vue

<template>
  <view class="page-wrap">
    <view class="share-wrap">
      <button open-type="share">
        <view class="share-btn">邀请好友测试</view>
      </button>
    </view>
    <!-- 跑马灯 -->
    <view class="box">
      <text class="title"
        >温馨提示：请在心态平和的情况下开始答题，每题考虑时间不宜超过10秒钟，选项之间无对错好坏之分，请选择与你实际做法相符的，而不是你认为怎样做是对的！</text
      >
    </view>

    <view class="progress-wrap box-shadow">
      <view>进度</view>
      <view class="bar-wrap">
        <u-line-progress
          active-color="#f0865e"
          :percent="((option.currentIdx + 1) / option.choices.length) * 100"
          height="40"
          striped
          striped-active
          :show-percent="false"
        />
      </view>
      <view class="tips"
        >{{ option.currentIdx + 1 }}/{{ option.choices.length }}</view
      >
    </view>

    <form class="section section_gap" @submit="onSubmit" @reset="onReset">
      <!-- 第一部分 -->
      <view class="group1">
        <block v-for="(item, index) in 10" :key="index">
          <view v-show="option.currentIdx === index" class="group-wrap box-shadow">
            <view :class="['section__title', 'num' + index]">
              <text>{{ option.title[index] }}</text>
            </view>
            <view class="two">
              <radio-group
                name="radio-group"
                @change="onRadioChange"
                :data-index="index"
              >
                <label>
                  <view class="first">
                    <radio value="radio1" />
                    <text>{{ option.toptext[index] }}</text>
                  </view>
                </label>

                <label>
                  <view class="first">
                    <radio value="radio2" />
                    <text>{{ option.bottext[index] }}</text>
                  </view>
                </label>
              </radio-group>
            </view>
          </view>
        </block>
      </view>
      <!-- 分割线 -->
      <!-- <view class="fgx"></view> -->

      <!-- 第二部分 -->
      <view class="group2">
        <block v-for="(item, index) in 20" :key="index">
          <view v-show="option.currentIdx === 10 + index" class="group-wrap box-shadow">
            <view :class="['section__title', 'num' + (10 + index)]">
              <text>{{ option.title2[index] }}</text>
            </view>
            <view class="two">
              <radio-group
                name="radio-group"
                @change="onRadioChange"
                :data-index="10 + index"
              >
                <label>
                  <view class="first">
                    <radio value="radio1" />
                    <text>{{ option.toptext2[index] }}</text>
                  </view>
                </label>
                <label>
                  <view class="first">
                    <radio value="radio2" />
                    <text>{{ option.bottext2[index] }}</text>
                  </view>
                </label>
              </radio-group>
            </view>
          </view>
        </block>
      </view>
      <!-- 分割线 -->
      <!-- <view class="fgx"></view> -->

      <!-- 第三部分 -->
      <view class="group3">
        <block v-for="(item, index) in 20" :key="index">
          <view v-show="option.currentIdx === 30 + index" class="group-wrap box-shadow">
            <view :class="['section__title', 'num' + (30 + index)]">
              <text>{{ option.title3[index] }}</text>
            </view>
            <view class="two">
              <radio-group
                name="radio-group"
                @change="onRadioChange"
                :data-index="30 + index"
              >
                <label>
                  <view class="first">
                    <radio value="radio1" />
                    <text>{{ option.toptext3[index] }}</text>
                  </view>
                </label>

                <label>
                  <view class="first">
                    <radio value="radio2" />
                    <text>{{ option.bottext3[index] }}</text>
                  </view>
                </label>
              </radio-group>
            </view>
          </view>
        </block>
      </view>
      <!-- 分割线 -->
      <!-- <view class="fgx"></view> -->

      <!-- 第四部分 -->
      <view class="group4">
        <block v-for="(item, index) in 20" :key="index">
          <view v-show="option.currentIdx === 50 + index" class="group-wrap box-shadow">
            <view :class="['section__title', 'num' + (50 + index)]">
              <text>{{ option.title4[index] }}</text>
            </view>
            <view class="two">
              <radio-group
                name="radio-group"
                @change="onRadioChange"
                :data-index="50 + index"
              >
                <label>
                  <view class="first">
                    <radio value="radio1" />
                    <text>{{ option.toptext4[index] }}</text>
                  </view>
                </label>
                <label>
                  <view class="first">
                    <radio value="radio2" />
                    <text>{{ option.bottext4[index] }}</text>
                  </view>
                </label>
              </radio-group>
            </view>
          </view>
        </block>
      </view>
      <!-- 分割线 -->
      <!-- <view class="fgx"></view> -->

      <!-- 按钮 -->
      <view class="btn">
        <!-- bindtap 事件是在手指触摸屏幕后立即触发，响应速度更快，适用于交互频繁的场景。-->
        <!-- bindclick 事件是在手指触摸屏幕后、手指离开屏幕后 300ms 内触发，响应速度较慢，适用于一些需要判断手势的场景。-->
        <!-- <button class="btn1" formType="submit">提交</button> -->
        <view class="btn-wrap" @click="onClickChangePage('pre')">上一题</view>
        <view class="btn-wrap m-30" @click="onClickChangePage('next')"
          >下一题</view
        >
        <button class="btn2" formType="reset" @click="MoveToTop">
          重新测试
        </button>
      </view>
    </form>
  </view>
</template>

<script>
const app = getApp();
export default {
  components: {},
  data() {
    return {
      appName: app.globalData.$appInfo.appName,
      pageContentTop: app.globalData.pageContentTop,
      option: {
        title: [
          "1．在聚会时，你通常",
          "2．与陌生人交流，让你觉得：",
          "3．你认为你自己是：",
          "4．你更象是哪种人：",
          "5．你更倾向于哪种：",
          "6．你认为自己是哪种人：",
          "7．你是哪种人：",
          "8．在排队等候时，你经常",
          "9．在工作中你更倾向于：",
          "10．当电话铃声响起时，你：",
        ],
        toptext: [
          "A.与许多人交流，其中包括陌生人",
          "A. 兴奋，有活力",
          "A. 一个好的善谈者",
          "A. 容易接近的",
          "A. 随心所欲地直接说出自己的想法",
          "A. 外向的人",
          "A. 相当健谈的人",
          "A. 主动与别人聊天",
          "A. 好与同事们一起交往",
          "A. 很快去接听",
        ],
        bottext: [
          "B. 只与一些朋友交流",
          "B. 费劲，是负担",
          "B. 一个好的倾听者",
          "B. 有点矜持的",
          "B. 经常是多听少说",
          "B. 内向的人",
          "B. 比较缄默的人",
          "B. 只是站在那儿等着",
          "B. 不太与别人交流",
          "B. 希望别人去接听",
        ],
        title2: [
          "11．一般来说，儿童：",
          "12．哪种方式更能使你了解意义：",
          "13．哪种情况更糟：",
          "14．你认为幻想家和理论家",
          "15．哪种更吸引你：",
          "16．你更象是哪种人：",
          "17．你更愿意感觉：",
          "18．在多数情况下，你是",
          "19．你更可能相信你的",
          "20．你更象哪种情况：",
          "21．你认为自己更象是",
          "22．事实",
          "23．你更经常看见",
          "24．你对哪种更感兴趣",
          "25．常识",
          "26．你喜欢的作家是哪种：",
          "27．你喜欢的故事是哪种类型的：",
          "28．你的说话更象哪种情形：",
          "29．对你来说哪种情况更容易：",
          "30．你更象哪种人：",
        ],
        toptext2: [
          "A. 经常没有发挥他们的用处",
          "A. 直白性的说明",
          "A. 想入非非",
          "A. 有些让人烦",
          "A. 基本规则",
          "A. 观察力胜过内省力",
          "A. 现实",
          "A. 实际的人",
          "A. 经验",
          "A. 实际的多于观念的",
          "A. 有强烈的现实感的人",
          "A. 就是事实本身",
          "A. 眼前的现实",
          "A. 实际是什么",
          "A. 通常是可信的",
          "A. 平铺直叙的",
          "A. 动作和冒险的",
          "A. 具体细节多于一般性的概括",
          "A. 更好地利用别人",
          "A. 事实性多于思辩性",
        ],
        bottext2: [
          "B. 常常没有运用他们的幻想",
          "B. 比喻性的说明",
          "B. 墨守成规",
          "B. 相当有吸引力",
          "B. 含义，言外之意",
          "B. 内省力胜过观察力",
          "B. 有些飘忽、不太现实",
          "B. 富于想象的人",
          "B. 想象",
          "B. 观念的多于实际的",
          "B. 有生动的想象力的人",
          "B. 是原则、规律的例证",
          "B. 只能通过想象的事情",
          "B. 可能是什么",
          "B. 时常可疑的",
          "B. 使用比喻和象征的",
          "B. 幻想和英雄主义的",
          "B. 一般性的概括多于具体细节",
          "B. 认同别人",
          "B. 思辩性多于事实性",
        ],
        title3: [
          "31．对于工作场所的杂乱无章,你通常",
          "32．在做选择时，你一般是：",
          "33．哪种方式更象你：",
          "34．在工作中，你希望你的任务是：",
          "35．你更愿意说你是哪种人：",
          "36．你更倾向于：",
          "37．大多数情况下，你更愿意：",
          "38．哪种情况你更为满意：",
          "39．哪种情形更象你：",
          "40．在做一件工作时，你更喜欢",
          "41．在工作中，对你来说哪种情况更为自然：",
          "42．你更愿意工作到",
          "43．在大多数场合中，你",
          "44．你更喜欢协议是",
          "45．你通常希望事情是",
          "46．你通常更喜欢",
          "47．你更容易注意到",
          "48．哪种情况你更感舒适：",
          "49．哪种情况你感觉更好：",
          "50．你更象哪种人：",
        ],
        toptext3: [
          "A. 看不顺眼，花时间将它们归置整齐",
          "A. 非常小心的",
          "A. 很快下定决心",
          "A. 事先安排定的",
          "A. 严肃而果断的人",
          "A. 把事情确定下来",
          "A. 确信事情安排妥当",
          "A. 一件完成的产品",
          "A. 匆忙多于悠闲",
          "A. 专心于这件事，直到结束",
          "A. 指出错误",
          "A. 期限的最后一刻",
          "A. 审慎多于自发（言行谨慎多于信口随心）",
          "A. 正式签署、存档的",
          "A. 确定并安排好的",
          "A. 最终的、不可更改的决议",
          "A. 不合规范、无序之处",
          "A. 作出决定之后",
          "A. 事情逐渐接近结束时",
          "A. 例行常规多于一时兴起",
        ],
        bottext3: [
          "B. 无所谓，很能容忍",
          "B. 有点冲动的",
          "B. 反复权衡好一会儿",
          "B. 没有安排定的",
          "B. 随和而宽容的人",
          "B. 探索不同的可能性",
          "B. 任由事情发生",
          "B. 正在进行中的工作",
          "B. 悠闲多于匆忙",
          "B. 注意力又转移到其它事情上",
          "B. 试图取悦他人",
          "B. 随便什么时候结束为止",
          "B. 自发多于审慎（信口随心多于言行谨慎）",
          "B. 只是口头协议",
          "B. 暂时定下来的",
          "B. 暂时的、初步的说明",
          "B. 变化的机会",
          "B. 作出决定之前",
          "B. 继续保持再选择的可能",
          "B. 一时兴起多于例行常规",
        ],
        title4: [
          "51．你更象下面的哪种人：",
          "52．如果你不得不让某人失望，你通常会采取：",
          "53．在做决定时，你更可能依据哪种而定：",
          "54．哪种更好些：",
          "55．你更容易受哪种影响：",
          "56．当你负责管理别人时，你更可能采取：",
          "57．在评价别人的时候，你更象哪种：",
          "58．哪种更是对人的赞扬：",
          "59．在热烈的讨论中，你",
          "60．你希望自己更多一些",
          "61．你更看重自己身上的哪种特点",
          "62．你认为自己基本上是个",
          "63．与别人在一起时，你更经常是",
          "64．在工作环境中，有时你",
          "65．哪种东西更吸引你",
          "66．哪种情形你更感舒适：",
          "67．哪种东西更多地支配着你：",
          "68．做哪种人更糟",
          "69．哪种是更大的错误：",
          "70．你认为自己是：",
        ],
        toptext4: [
          "A. 头脑冷静的人",
          "A. 坦白而直接的方式",
          "A. 事实、资料",
          "A. 公正的",
          "A. 有说服力的证据",
          "A. 强硬而坚定不移的方式",
          "A. 客观，不带个人感情色彩",
          "A. “这是一个有逻辑的人”",
          "A. 坚持自己的立场",
          "A. 意志力",
          "A. 理智的",
          "A. 脸皮厚、不敏感的人",
          "A. 强硬多于温柔",
          "A. 太缺乏同情心",
          "A. 思想的一致性",
          "A. 做批评、分析性判断时",
          "A. 你的思想",
          "A. 软弱的人",
          "A. 太有同情心",
          "A. 硬心肠的人",
        ],
        bottext4: [
          "B. 热心肠的人",
          "B. 温暖而周到的方式",
          "B. 欲望、情感",
          "B. 仁慈的",
          "B. 令人同情的恳求",
          "B. 宽容不严厉的方式",
          "B. 友善，有主观色彩",
          "B. “这是一个情感丰富的人”",
          "B. 寻求共同的谈论背景",
          "B. 情感",
          "B. 热忱的",
          "B. 脸皮薄、敏感的人",
          "B. 温柔多于强硬",
          "B. 太过有同情心",
          "B. 人际关系的和谐",
          "B. 做价值判断时",
          "B. 你的感情",
          "B. 强硬的人",
          "B. 过于公平",
          "B. 温柔的人",
        ],
        choices: [
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
        ],
        currentIdx: 0,
      },
    };
  },
  onLoad() {
    app.handleSetNavTitle();
  },
  onShow() {},
  onPullDownRefresh() {},
  onReachBottom() {},
  onShareAppMessage(res) {
    // 如果要自定义分享内容，可以设置shareTicket和query参数
    return {
        title: '免费MBTI人格测试bot，快来试试吧～',
        path: '/pages/home/home',
        desc:'免费MBTI人格测试bot，快来试试吧～',
        imageUrl: '/static/imgs/mbti1.jpg',
        success(res){
            uni.showToast({
                title:'分享成功'
            })
        },
        fail(res){
            uni.showToast({
                title:'分享失败',
                icon:'none'
            })
        }
    }
  },
  methods: {
    onRadioChange(e) {
      let index = e.currentTarget.dataset.index;
      let value = e.detail.value;
      let choices = this.option.choices;
      choices[index] = value;
      // console.log(choices);
      this.option.choices = choices;

      if (this.option.currentIdx !== this.option.choices.length - 1) {
        this.option.currentIdx = index + 1;
      } else {
        this.onSubmit();
      }
    },
    onSubmit(e) {
      let choices = this.option.choices;
      console.log("choices => ", choices);
      for (let i = 0; i < choices.length; i++) {
        if (choices[i] === null) {
          // 如果有未做完题目，使用 `uni.pageScrollTo` 方法滚动页面到未做完题目所在的位置
          uni.showToast({
            title: "请完成所有题目",
            icon: "none",
            duration: 2000,
          });

          let jump = ".num" + i;
          uni.pageScrollTo({
            selector: jump,
            duration: 300,
            /*success: data => {
                        console.log('scroll success', data);
                    },
                    fail: data => {
                        console.log('scroll fail', data);
                    },
                    complete: data => {
                        console.log('scroll complete', data);
                    }*/
          });
          this.option.currentIdx = i;
          return;
        }
      }

      /* function CountAnswer */
      {
        let E = 0,
          I = 0,
          N = 0,
          S = 0,
          F = 0,
          T = 0,
          J = 0,
          P = 0;
        let choices = this.option.choices;
        let testResult;
        for (let i = 0; i < choices.length; i++) {
          if (i < 10) {
            if (choices[i] == "radio1") E++;
            else I++;
            continue;
          }

          if (i < 30) {
            if (choices[i] == "radio1") N++;
            else S++;
            continue;
          }

          if (i < 50) {
            if (choices[i] == "radio1") F++;
            else T++;
            continue;
          }

          if (i < 70) {
            if (choices[i] == "radio1") J++;
            else P++;
          }
        }

        if (E > I) testResult = "E";
        else testResult = "I";

        if (N > S) testResult += "N";
        else testResult += "S";

        if (F > T) testResult += "F";
        else testResult += "T";

        if (J > P) testResult += "J";
        else testResult += "P";

        console.log(testResult);
        app.globalData.testResult = testResult; // 保存到全局
        uni.navigateTo({
          url: "/pages/result/result",
        });
      }
    },
    onReset() {
      this.option.choices = this.option.choices.map(() => null);
      this.option.currentIdx = 0;
    },
    onClickChangePage(type) {
      if (type === "pre") {
        if (this.option.currentIdx === 0) {
          return false;
        } else {
          this.option.currentIdx--;
        }
      } else if (type === "next") {
        if (this.option.currentIdx === this.option.choices.length - 1) {
          return false;
        } else if (!this.option.choices[this.option.currentIdx]) {
          uni.showToast({
            title: "请完成当前题目",
            icon: "none",
            duration: 2000,
          });
        } else {
          this.option.currentIdx++;
        }
      }
    },
    MoveToTop: function () {
      uni.showToast({
        title: "重置成功",
        icon: "none",
        duration: 2000,
      });

      // 最好是先显示提示后滚动；否则就会先回去之后再提示（感觉那样有些奇怪）

      uni.pageScrollTo({
        scrollTop: 0, // 回到顶端
        duration: 300,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-wrap {
  min-height: 100vh;
  width: 750rpx;
  background-color: #ECF0F3;
}
/* pages/career/career.wxss */
/* 跑马灯 */
.box {
  width: 750rpx;
  margin: 10rpx auto;
  background: #feece7;
  border-radius: 10rpx;
  padding: 10rpx;
  box-sizing: border-box;
  overflow: hidden;
}

.title {
  white-space: nowrap;
  animation: 25s loop linear infinite normal;
  display: inline-block;
  vertical-align: top;
  font-size: 26rpx;
  color: #ec6e40;
  opacity: 0.8;
}

@keyframes loop {
  0% {
    transform: translateX(700rpx);
    -webkit-transform: translateX(700rpx);
  }

  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}

@-webkit-keyframes loop {
  0% {
    transform: translateX(600rpx);
    -webkit-transform: translateX(600rpx);
  }

  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}

/* 选择题 */
.section {
  background-color: rgb(255, 247, 240);
  border-radius: 10rpx;
  width: 710rpx;
  margin: 10rpx auto;
}

.section .group1,
.group2,
.group3,
.group4 {
  /* border: deepskyblue solid 1px; */
  width: 700rpx;
  margin: 40rpx auto;
}
.group-wrap {
  background-color: #fff;
  // border: 2rpx solid #f0865e;
  padding: 20rpx 40rpx;
  border-radius: 40rpx;
}

.section__title {
  /* border: rgb(0, 255, 34) solid 1px; */
  margin-top: 20rpx;
}

.two {
  /* border: rgb(255, 0, 221) solid 1px; */
  margin-bottom: 40rpx;
  margin-top: 100rpx;
}

radio-group {
  margin-left: 10rpx;
}

radio {
  transform: scale(0.9);
}

text {
  font-size: 30rpx;
  color: #666666;
  margin-top: 2rpx;
}

.section__title text {
  color: #f0865e;
  font-size: 34rpx;
  font-weight: bold;
}

.two .first {
  margin: 50rpx 0;
  display: flex;
}

/* 分割线 */
.fgx {
  border: rgb(224, 224, 224) solid;
  margin-top: 30rpx;
}

/* 按钮 */
.btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 100rpx;
}
.btn-wrap {
  background: linear-gradient(90deg, #FF9048 0%, #fd6a68 100%);

  color: rgb(255, 255, 255);
  font-size: 28rpx;
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80rpx;
  border-radius: 10rpx;
}
.m-30 {
  margin: 0 40rpx;
}

.btn button {
  /* border: tomato solid 1px; */
  background-color: limegreen;
  color: rgb(255, 255, 255);
  font-size: 28rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  margin: 0;
  width: 25%;
}

.btn .btn1 {
  margin-right: 20rpx;
}

.btn .btn2 {
  background: linear-gradient(90deg, #FF9048 0%, #fd6a68 100%);

}

.progress-wrap {
  margin: 40rpx 20rpx 0;
  // border: 2rpx solid #f0865e;
  display: flex;
  justify-content: center;
  padding: 40rpx 100rpx;
  border-radius: 40rpx;
  background-color: #fff;
  .bar-wrap {
    margin: 0 30rpx;
    width: 300rpx;
  }
  .tips {
    width: 80rpx;
  }
}

.share-wrap {
    button::after {
      border: none;
    }
    button {
      position: relative;
      display: block;
      margin-left: auto;
      margin-right: auto;
      padding-left: 0px;
      padding-right: 0px;
      box-sizing: border-box;
      text-align: center;
      text-decoration: none;
      line-height: 1.35;
      -webkit-tap-highlight-color: transparent;
      overflow: hidden;
      color: #000;
      font-size: 32rpx;
      background-color: #fff;
      width: 100%;
      height: 100%;
    }
    .share-btn {
      padding: 15rpx 10rpx;
      background: linear-gradient(90deg, #FF9048 0%, #fd6a68 100%);
      color: #fff;
      font-weight: 600;
      font-size: 26rpx;
      position: fixed;
      right: 0;
      bottom: 20%;
      border-radius: 40rpx 0 0 40rpx;
    }
  }

  .box-shadow {
    background-color: #fff;
    border-radius: 20px;
    box-shadow:
      inset rgba(0, 0, 0, 0.1) 0 5rpx 12rpx,
      inset rgba(252, 255, 255, 0.5) 0 5rpx 12rpx,
      rgba(0, 0, 0, 0.2) 0 5rpx 12rpx -5rpx;
  }
</style>