|
|
@@ -1,45 +1,210 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
- <uni-section title="量表测试" type="line" padding>
|
|
|
- <uni-grid :column="2" :highlight="true" @change="changeHandle">
|
|
|
- <uni-grid-item v-for="(item, index) in menuList" :index="index" :key="index">
|
|
|
- <view class="grid-item-box">
|
|
|
- <image :src="item.imageUrl" class="image" mode="aspectFill" />
|
|
|
- <text class="text">{{ item.name }}</text>
|
|
|
+ <view class="bg">
|
|
|
+ <view class="search_bar">
|
|
|
+ <image class="search_icon"
|
|
|
+ src="https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/search_icon.png"
|
|
|
+ mode="widthFix"></image> <input type="text" :value="searchKey" @input="searchHandle">
|
|
|
+ </view>
|
|
|
+ <view class="banner1">
|
|
|
+ <image src="https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/banner1.png"
|
|
|
+ mode="widthFix">
|
|
|
+ </image>
|
|
|
+ <text>客服电话：18513669826</text>
|
|
|
+ </view>
|
|
|
+ <view class="menu_bar">
|
|
|
+ <view class="menu_item" v-for="item in menuList" @click="goDetail(item)">
|
|
|
+ <image :src="item.imageUrl" class="menu_icon" mode="widthFix" />
|
|
|
+ <view class="menu_name">{{ item.name }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list_title">
|
|
|
+ <image src="https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/edit_icon.png"
|
|
|
+ mode="widthFix"></image>
|
|
|
+ <text>推荐测试</text>
|
|
|
+ </view>
|
|
|
+ <view class="list_wrap">
|
|
|
+ <view class="list_item" v-for="item in searchList" @click="goDetail(item)">
|
|
|
+ <view class="list_item_head">
|
|
|
+ <image :src="item.imageUrl" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ <view class="list_item_body">
|
|
|
+ <view class="item_top">
|
|
|
+ <view class="list_item_title">{{item.name}}</view>
|
|
|
+ <view class="list_item_flag">
|
|
|
+ <image v-if="item.zybg"
|
|
|
+ src="https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/zybg.png"
|
|
|
+ mode="widthFix"></image>
|
|
|
+ <image v-if="item.qltj"
|
|
|
+ src="https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/qltj.png"
|
|
|
+ mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ <view class="list_item_desc">{{getDesc(item.desc)}}</view>
|
|
|
</view>
|
|
|
- </uni-grid-item>
|
|
|
- </uni-grid>
|
|
|
- </uni-section>
|
|
|
+ <view class="list_item_operate">
|
|
|
+ <view class="item_price"><text class="zkj">{{item.zkj}}</text><text
|
|
|
+ class="yj">{{item.yj}}</text></view>
|
|
|
+ <view class="btn_test">去测一测</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ //防抖
|
|
|
+ let timer_debounce = null
|
|
|
+ const debounce = function(func, wait) {
|
|
|
+ if (timer_debounce) {
|
|
|
+ clearTimeout(timer_debounce)
|
|
|
+ timer_debounce = null;
|
|
|
+ }
|
|
|
+ timer_debounce = setTimeout(() => {
|
|
|
+ func.apply(this, arguments)
|
|
|
+ }, wait)
|
|
|
+ }
|
|
|
+
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
menuList: [{
|
|
|
- name: '情商测试',
|
|
|
- imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/pay_scale_info.png',
|
|
|
+ name: '标准情商测试',
|
|
|
+ imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/menu_item1.png',
|
|
|
pageUrl: '/newScale/EQtest/index'
|
|
|
},
|
|
|
{
|
|
|
- name: '异性吸引指数测试',
|
|
|
- imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/paymentPage/pay_scale_info.png',
|
|
|
- pageUrl: '/newScale/Charm/index'
|
|
|
+ name: 'MBTI人格测试',
|
|
|
+ imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/menu_item2.png',
|
|
|
+ pageUrl: '/newScale/Mbti/index'
|
|
|
+ }, {
|
|
|
+ name: '家庭关系测试',
|
|
|
+ imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/menu_item3.png',
|
|
|
+ pageUrl: '/newScale/Family/index'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '睡眠质量测试',
|
|
|
+ imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/menu_item4.png',
|
|
|
+ pageUrl: '/newScale/Sleep/index'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+
|
|
|
+ scaleList: [{
|
|
|
+ name: 'MBTI十六型人格测试',
|
|
|
+ desc: '对同一事物，不同的人有不同的角度和感受。想知道你的情商有多高吗？为了不影响测试结果，请您如实回答以下问题，选择最符合自己的选项',
|
|
|
+ qltj: true,
|
|
|
+ zybg: true,
|
|
|
+ zkj: '￥19.9',
|
|
|
+ yj: '￥29.9',
|
|
|
+ imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/list_item1.png',
|
|
|
+ pageUrl: '/newScale/EQtest/index',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '在婚姻里，你有安全感吗？',
|
|
|
+ desc: '有很多人觉得单身的日子孤独寂寞，看到身边结了婚的朋友很和睦幸福的样子，就会很羡慕，寄希望于婚姻，希望婚姻能够帮助自己赶走孤独寂寞的滋味，能够带给自己足够的安全感。婚姻是一份爱和责任，能够带给每个人的感受不同，至于安全感，当然也是不一样的。',
|
|
|
+ qltj: true,
|
|
|
+ zybg: true,
|
|
|
+ zkj: '￥0.01',
|
|
|
+ yj: '￥9.9',
|
|
|
+ imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/list_item2.png',
|
|
|
+ pageUrl: '/newScale/Marriage/index'
|
|
|
+ }, {
|
|
|
+ name: '看一下自己的“神经”是否正常',
|
|
|
+ desc: '本量表含有20道关于一般焦虑症状的问题，请仔细阅读每一道题及其选项，选出您认为最...',
|
|
|
+ qltj: true,
|
|
|
+ zybg: true,
|
|
|
+ zkj: '￥0.01',
|
|
|
+ yj: '￥9.9',
|
|
|
+ imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/list_item3.png',
|
|
|
+ pageUrl: '/newScale/Mental/index'
|
|
|
},
|
|
|
{
|
|
|
- name: '你是否在逐渐老化',
|
|
|
- imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/Senile/paymentPage/pay_scale_info.png',
|
|
|
+ name: '标准情商测试',
|
|
|
+ desc: '对同一事物，不同的人有不同的角度和感受。想知道你的情商有多高吗？为了不影响测试结果，请您如实回答以下问题，选择最符合自己的选项',
|
|
|
+ qltj: true,
|
|
|
+ zybg: true,
|
|
|
+ zkj: '￥9.9',
|
|
|
+ yj: '￥19.9',
|
|
|
+ imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/list_item4.png',
|
|
|
+ pageUrl: '/newScale/EQtest/index'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '你让异性的心动指数有多高',
|
|
|
+ desc: '爱情是一件很美好的事情，也是一件很奇妙的事情。社交心理学讲，一段关系的产生，往往从人的第一印象开始。如果你给对方的印象还不错，将来无论你发生什么错误，都会认为是意外，但是如果你给对方留下的是坏印象，那么对方就会觉得你就是这种常犯错误的人。测试下你让异性的心动指数有多高吧～',
|
|
|
+ qltj: true,
|
|
|
+ zybg: true,
|
|
|
+ zkj: '￥0.01',
|
|
|
+ yj: '￥9.9',
|
|
|
+ imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/list_item5.png',
|
|
|
+ pageUrl: '/newScale/Charm/index',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '你是否正在逐渐老化',
|
|
|
+ desc: '老化是指：“到达成熟期之后，身心各方面的技能减缓、衰退的现象。”',
|
|
|
+ qltj: true,
|
|
|
+ zybg: true,
|
|
|
+ zkj: '￥0.01',
|
|
|
+ yj: '￥9.9',
|
|
|
+ imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/list_item6.png',
|
|
|
pageUrl: '/newScale/Senile/index'
|
|
|
+ }, {
|
|
|
+ name: '职业心理年龄测试',
|
|
|
+ desc: '打拼职场心态很关键，心态好，才能更好地工作。成熟的职业心理是事业成功的有力保障。相比起你的生理年龄，你的职场心理年龄多大了？是否已经足够成熟？',
|
|
|
+ qltj: true,
|
|
|
+ zybg: true,
|
|
|
+ zkj: '￥0.01',
|
|
|
+ yj: '￥9.9',
|
|
|
+ imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/list_item7.png',
|
|
|
+ pageUrl: '/newScale/Career/index'
|
|
|
},
|
|
|
{
|
|
|
- name: 'MBTI 16型人格测试',
|
|
|
- imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/paymentPage/pay_scale_info.png',
|
|
|
- pageUrl: '/newScale/Mbti/index'
|
|
|
+ name: '睡眠质量测试',
|
|
|
+ desc: '指导语决定睡眠是否充足，除了量的要求外，更重要的还有质的要求。睡眠质的含义主要是睡眠深度，与慢波睡眠和快波睡眠两者比例相关，特别是深慢波睡眠对改善大脑疲劳有重要作用。睡眠的质量一般可用以下标准来衡量：（1）、入睡快，上床后10-30分钟左右入睡；（2）、睡眠深，呼吸深长不易惊醒；（3）、无起夜或很少起夜，无惊梦现象，醒后能很快忘记梦境；（4）、早晨醒后，精神好，起床快；（5）、白天神清脑爽，不困倦，工作效率高。',
|
|
|
+ qltj: true,
|
|
|
+ zybg: true,
|
|
|
+ zkj: '￥9.9',
|
|
|
+ yj: '￥19.9',
|
|
|
+ imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/list_item8.png',
|
|
|
+ pageUrl: '/newScale/Sleep/index'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '工作倦怠量表(MBI-GS)',
|
|
|
+ desc: '请仔细阅读下面的每一条陈述，选择合适的选项。',
|
|
|
+ qltj: true,
|
|
|
+ zybg: true,
|
|
|
+ zkj: '￥19.9',
|
|
|
+ yj: '￥29.9',
|
|
|
+ imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/list_item9.png',
|
|
|
+ pageUrl: '/newScale/Burnout/index',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '你的家庭关系健康吗？',
|
|
|
+ desc: '下面是一些对家庭的描述，请仔细阅读每一项，并根据近2月您对您家庭的看法，在四个可能的答案中选出形容您家庭最接近的答案。要求年龄在12岁以上的家庭成员都要完成FAD问卷。1非常同意（或很像我家）2同意（或像我家） 3不同意（或不像我家）4完全不同意（或完全不像我家）',
|
|
|
+ qltj: true,
|
|
|
+ zybg: true,
|
|
|
+ zkj: '￥19.9',
|
|
|
+ yj: '￥29.9',
|
|
|
+ imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/list_item10.png',
|
|
|
+ pageUrl: '/newScale/Family/index'
|
|
|
+ }, {
|
|
|
+ name: '你的婚姻质量有多高？',
|
|
|
+ desc: '下面是对婚姻状况的描述，请根据您的实际情况选择相应的答案。',
|
|
|
+ qltj: true,
|
|
|
+ zybg: true,
|
|
|
+ zkj: '￥19.9',
|
|
|
+ yj: '￥29.9',
|
|
|
+ imageUrl: 'https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/list_item11.png',
|
|
|
+ pageUrl: '/newScale/MarriageQuality/index'
|
|
|
}
|
|
|
- ]
|
|
|
+ ],
|
|
|
+ searchKey: '',
|
|
|
+ searchList: [],
|
|
|
+ os: ''
|
|
|
}
|
|
|
},
|
|
|
+ onReady() {
|
|
|
+ this.searchList = this.scaleList;
|
|
|
+ this.os = uni.getSystemInfoSync().osName;
|
|
|
+ },
|
|
|
methods: {
|
|
|
changeHandle(e) {
|
|
|
let {
|
|
|
@@ -48,6 +213,35 @@
|
|
|
uni.navigateTo({
|
|
|
url: this.menuList[index].pageUrl
|
|
|
})
|
|
|
+ },
|
|
|
+ goDetail(item) {
|
|
|
+ console.log(this.os);
|
|
|
+ if (this.os == 'ios') {
|
|
|
+ uni.showToast({
|
|
|
+ title: 'iOS暂不支持购买'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ uni.navigateTo({
|
|
|
+ url: item.pageUrl
|
|
|
+ })
|
|
|
+ },
|
|
|
+ searchHandle(e) {
|
|
|
+ this.searchKey = e.detail.value;
|
|
|
+ debounce(this.searchFnc, 500);
|
|
|
+ },
|
|
|
+ searchFnc() {
|
|
|
+ debugger
|
|
|
+ let temp = [];
|
|
|
+ this.scaleList.forEach(item => {
|
|
|
+ if (item.name.indexOf(this.searchKey) >= 0) {
|
|
|
+ temp.push(item);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.searchList = temp;
|
|
|
+ },
|
|
|
+ getDesc(res) {
|
|
|
+ return res.length > 45 ? `${res.slice(0, 45)}...` : res;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -67,13 +261,194 @@
|
|
|
width: 340rpx;
|
|
|
}
|
|
|
|
|
|
- .image {
|
|
|
+ .menu_icon {
|
|
|
+ width: 66rpx;
|
|
|
+ height: 66rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg {
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ padding-top: 40rpx;
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #FFFFFF url(https://test.jue-ming.com:8849/api/show?filePath=./webo/toutiao/index/index_bg.png) no-repeat;
|
|
|
+ background-size: 100% auto;
|
|
|
+ padding-bottom: 100rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search_bar {
|
|
|
+ width: 703rpx;
|
|
|
+ height: 63rpx;
|
|
|
+ background: rgba(255, 255, 255, 0.6);
|
|
|
+ border-radius: 31rpx;
|
|
|
+ border: 1px solid #FFFFFF;
|
|
|
+ margin: 0 auto 21rpx;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search_icon {
|
|
|
+ width: 31rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 23rpx;
|
|
|
+ top: 17rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search_bar input {
|
|
|
+ width: 80%;
|
|
|
+ height: 63rpx;
|
|
|
+ margin-left: 80rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .banner1 {
|
|
|
+ width: 703rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .banner1 image {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .banner1 text {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 14rpx;
|
|
|
+ left: 173rpx;
|
|
|
+ font-family: 'Alibaba PuHuiTi 2.0';
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-style: italic;
|
|
|
+ color: #FFAE00;
|
|
|
+ letter-spacing: 4rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu_bar {
|
|
|
+ width: 702rpx;
|
|
|
+ height: 190rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu_item {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu_name {
|
|
|
+ font-family: 'Alibaba PuHuiTi 2.0';
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_title {
|
|
|
+ margin: 31rpx 0 0 31rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_title text {
|
|
|
+ font-family: 'Alibaba PuHuiTi 2.0';
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333333;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_title image {
|
|
|
+ width: 31rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_item {
|
|
|
+ width: 702rpx;
|
|
|
+ min-height: 226rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 14rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_item_head {
|
|
|
width: 200rpx;
|
|
|
- height: 200rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
|
|
|
- .text {
|
|
|
+ .list_item_head image {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_item_body {
|
|
|
+ flex: 1;
|
|
|
+ min-height: 226rpx;
|
|
|
+ margin-left: 30rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_item_title {
|
|
|
+ font-family: 'Alibaba PuHuiTi 2.0';
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_item_flag image {
|
|
|
+ width: 105rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_item_desc {
|
|
|
+ font-family: 'Alibaba PuHuiTi 2.0';
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 18rpx;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_item_operate {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn_test {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ line-height: 44rpx;
|
|
|
+ background: #004AFF;
|
|
|
+ border-radius: 22rpx;
|
|
|
+ font-family: 'Alibaba PuHuiTi 2.0';
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item_price .zkj {
|
|
|
+ font-family: 'Alibaba PuHuiTi 2.0';
|
|
|
+ font-weight: 400;
|
|
|
font-size: 32rpx;
|
|
|
- margin-top: 5px;
|
|
|
+ color: #FF6600;
|
|
|
+ line-height: 57rpx;
|
|
|
}
|
|
|
+
|
|
|
+ .item_price .yj {
|
|
|
+ font-family: 'Alibaba PuHuiTi 2.0';
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 57rpx;
|
|
|
+ text-decoration-line: line-through;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .banner1 text {}
|
|
|
</style>
|
root