mbti_uniapp/pages/career/career.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 7" :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 7" :key="index">
          <view v-show="option.currentIdx === 7 + index" class="group-wrap box-shadow">
            <view :class="['section__title', 'num' + (7 + index)]">
              <text>{{ option.title2[index] }}</text>
            </view>
            <view class="two">
              <radio-group
                name="radio-group"
                @change="onRadioChange"
                :data-index="7 + 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 7" :key="index">
          <view v-show="option.currentIdx === 14 + index" class="group-wrap box-shadow">
            <view :class="['section__title', 'num' + (14 + index)]">
              <text>{{ option.title3[index] }}</text>
            </view>
            <view class="two">
              <radio-group
                name="radio-group"
                @change="onRadioChange"
                :data-index="14 + 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 7" :key="index">
          <view v-show="option.currentIdx === 21 + index" class="group-wrap box-shadow">
            <view :class="['section__title', 'num' + (21 + index)]">
              <text>{{ option.title4[index] }}</text>
            </view>
            <view class="two">
              <radio-group
                name="radio-group"
                @change="onRadioChange"
                :data-index="21 + 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.过去，你的朋友和同事倾向对你说：",
        ],
        toptext: [
          "别人",
          "在夜色很深时，一旦你开始投入，也许就是最晚离开的那一个",
          "与情人到有很多人且社交活动频繁的地方",
          "整体来说很健谈",
          "在宴会中、夜总会、工作上、休闲活动中、会议上或当朋友介绍我给他们的朋友时",
          "很多认识的人和很亲密的朋友",
          "你难道不可以安静一会儿吗？",
        ],
        bottext: [
          "自己的想法",
          "在夜晚刚开始的时候，我就疲倦了并且想回家",
          "待在家中与情人做一些特别的事情，例如说观赏一部有趣的录影带并享用你最喜欢的外卖食物",
          "较安静并保留，直到你觉得舒服",
          "通过私人的方式，例如个人广告、录影约会，或是由亲密的朋友和家人介绍",
          "一些很亲密的朋友和一些认识的人",
          "可以请你从你的世界中出来一下吗",
        ],
        title2: [
          "8.你倾向通过以下哪种方式收集信息：",
          "9.你倾向相信：",
          "10.当你置身于一段关系中时，你倾向相信：",
          "11.当你对一个约会觉得放心时，你偏向谈论：",
          "12.你是这种人：",
          "13.你是这类型的人：",
          "14.你通常：",
        ],
        toptext2: [
          "你对有可能发生之事的想像和期望",
          "你的直觉",
          "永远有进步的空间",
          "未来，关于改进或发明事物和生活的种种可能性。例如，你也许会谈论一个新的科学发明，或一个更好的方法来表达你的感受",
          "喜欢先纵观全局",
          "与其活在现实中，不如活在想像里",
          "偏向于去想像一大堆关于即将来临的约会的事情",
        ],
        bottext2: [
          "你对目前状况的实际认知",
          "你直接的观察和现成的经验",
          "若它没有被破坏，不予修补",
          "实际的、具体的、关于“此时此地”的事物。例如，你也许会谈论品酒的好方法，或你即将要参加的新奇旅程",
          "喜欢先掌握细节",
          "与其活在想像里，不如活在现实中",
          "偏向于拘谨地想像即将来临的约会，只期待让它自然地发生",
        ],
        title3: [
          "15.你倾向如此做决定：",
          "16.你倾向比较能够察觉到：",
          "17.当和某人分手时：",
          "18.当与一个人交往时，你倾向于看重：",
          "19.当你不同意情人的想法时：",
          "20.认识你的人倾向形容你为：",
          "21.你把大部分和别人的相遇视为：",
        ],
        toptext3: [
          "首先依你的心意，然后依你的逻辑",
          "当人们需要情感上的支持时",
          "你通常让自己的情绪深陷其中，很难抽身出来",
          "情感上的相容性：表达爱意和对另一半的需求很敏感",
          "你尽可能地避免伤害对方的感情；若是会对对方造成伤害的话，你就不会说",
          "热情和敏感",
          "友善及重要的",
        ],
        bottext3: [
          "首先依你的逻辑，然后依你的心意",
          "当人们不合逻辑时",
          "虽然你觉得受伤，但一旦下定决心，你会直截了当地将过去恋人的影子甩开",
          "智慧上的相容性：沟通重要的想法；客观地讨论和辩论事情",
          "你通常毫无保留地说话，并且对情人直言不讳，因为对的就是对的",
          "逻辑和明确",
          "另有目的",
        ],
        title4: [
          "22.若你有时间和金钱，你的朋友邀请你到国外度假，并且在前一天才通知，你会：",
          "23.在第一次约会中：",
          "24.你偏好：",
          "25.你选择的生活充满着：",
          "26.哪一项较常见：",
          "27.你是这种喜欢……的人：",
          "28.你是此类型的人：",
        ],
        toptext4: [
          "必须先检查你的时间表",
          "若你所约的人来迟了，你会很不高兴",
          "事先知道约会的行程：要去哪里、有谁参加、你会在那里多久、该如何打扮",
          "日程表和组织",
          "你准时出席而其他人都迟到",
          "下定决心并且做出最后肯定的结论",
          "喜欢在一段时间里专心于一件事情直到完成",
        ],
        bottext4: [
          "立刻收拾行装",
          "一点儿都不在乎，因为你自己常常迟到",
          "让约会自然地发生，不做太多事先的计划",
          "自然发生和弹性",
          "其他人都准时出席而你迟到",
          "放宽你的选择面并且持续收集信息",
          "享受同时进行好几件事情",
        ],
        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,
        ],
        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 < 7) {
            if (choices[i] == "radio1") E++;
            else I++;
            continue;
          }

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

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

          if (i < 28) {
            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-top: 100rpx;
  margin-bottom: 40rpx;
}

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 .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>