|
|
@@ -2,66 +2,32 @@
|
|
|
<view class="ip-mask" v-if="show" @click="onMaskTap">
|
|
|
<view class="ip-panel" @click.stop>
|
|
|
<view class="ip-header">
|
|
|
- <text class="ip-title">告诉我,你想怎么开始?</text>
|
|
|
- <text class="ip-sub">浠艾福为你定制专属家庭成长方案</text>
|
|
|
+ <text class="ip-title">花一分钟,做个小测试</text>
|
|
|
+ <text class="ip-sub">回答几个问题,系统为你推荐最适合的开始维度</text>
|
|
|
</view>
|
|
|
|
|
|
- <!-- A 随便看看 -->
|
|
|
- <view class="ip-card" @click="emitSelect('A')">
|
|
|
- <view class="ip-card-icon" style="background: rgba(249,115,22,0.12);"><text class="ip-card-emoji">🎯</text></view>
|
|
|
- <view class="ip-card-body">
|
|
|
- <text class="ip-card-title">随便看看</text>
|
|
|
- <text class="ip-card-desc">先到处逛逛,了解浠艾福和各式服务</text>
|
|
|
+ <!-- 开始测试 -->
|
|
|
+ <view class="ip-card" @click="onStart">
|
|
|
+ <view class="ip-card-icon" style="background:rgba(249,115,22,0.12)">
|
|
|
+ <text class="ip-card-emoji">✨</text>
|
|
|
</view>
|
|
|
- <text class="ip-card-arrow">›</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- B 问卷 -->
|
|
|
- <view class="ip-card" @click="emitSelect('B')">
|
|
|
- <view class="ip-card-icon" style="background: rgba(14,165,233,0.12);"><text class="ip-card-emoji">📋</text></view>
|
|
|
- <view class="ip-card-body">
|
|
|
- <text class="ip-card-title">智能问卷</text>
|
|
|
- <text class="ip-card-desc">先答几道题,系统为你匹配推荐方案</text>
|
|
|
- </view>
|
|
|
- <text class="ip-card-arrow">›</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- C 问题域 -->
|
|
|
- <view class="ip-card" @click="onDomainTap">
|
|
|
- <view class="ip-card-icon" style="background: rgba(16,185,129,0.12);"><text class="ip-card-emoji">🔍</text></view>
|
|
|
<view class="ip-card-body">
|
|
|
- <text class="ip-card-title">解决问题</text>
|
|
|
- <text class="ip-card-desc">选择你关心的问题,获得完整解决方案</text>
|
|
|
+ <text class="ip-card-title">开始测试</text>
|
|
|
+ <text class="ip-card-desc">3分钟了解你的家庭健康需求,生成专属成长方案</text>
|
|
|
</view>
|
|
|
<text class="ip-card-arrow">›</text>
|
|
|
</view>
|
|
|
|
|
|
- <!-- C 子级:问题域列表 -->
|
|
|
- <view class="ip-domain-wrap" v-if="showDomains">
|
|
|
- <view
|
|
|
- v-for="d in domains"
|
|
|
- :key="getKey(d)"
|
|
|
- class="ip-domain-item"
|
|
|
- :class="{ 'ip-domain-item-active': d.code === selectedCode }"
|
|
|
- @click="selectDomain(d)">
|
|
|
- <text class="ip-domain-icon">{{ d.icon || '🧭' }}</text>
|
|
|
- <text class="ip-domain-name">{{ d.name }}</text>
|
|
|
- <text class="ip-domain-check" v-if="d.code === selectedCode">✓</text>
|
|
|
- </view>
|
|
|
- <view class="ip-domain-confirm" @click="confirmDomain">
|
|
|
- <text class="ip-domain-confirm-text">开始我的方案</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
+ <!-- 以后再说 -->
|
|
|
<view class="ip-skip" @click="onSkip">
|
|
|
- <text class="ip-skip-text">暂时跳过</text>
|
|
|
+ <text class="ip-skip-text">{{ skipHint }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getProblemDomainList, skipUserIntent } from '../utils/api.js'
|
|
|
+import { skipUserIntent } from '../utils/api.js'
|
|
|
|
|
|
export default {
|
|
|
name: 'IntentPicker',
|
|
|
@@ -73,65 +39,21 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- showDomains: false,
|
|
|
- domains: [],
|
|
|
- selectedCode: '',
|
|
|
- selectedName: '',
|
|
|
- loading: false,
|
|
|
skipping: false
|
|
|
}
|
|
|
},
|
|
|
- watch: {
|
|
|
- show(val) {
|
|
|
- if (val) {
|
|
|
- this.showDomains = false
|
|
|
- this.selectedCode = ''
|
|
|
- this.selectedName = ''
|
|
|
- this.loadDomains()
|
|
|
- }
|
|
|
+ computed: {
|
|
|
+ skipHint() {
|
|
|
+ var count = parseInt(uni.getStorageSync('intent_skip_count') || '0')
|
|
|
+ if (count >= 3) return ''
|
|
|
+ if (count > 0) return '以后再说(' + (3 - count) + '次机会)'
|
|
|
+ return '以后再说'
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- getKey(d) {
|
|
|
- return d.id || d.code
|
|
|
- },
|
|
|
- loadDomains() {
|
|
|
- if (this.domains.length > 0 || this.loading) return
|
|
|
- this.loading = true
|
|
|
- var self = this
|
|
|
- getProblemDomainList().then(function(res) {
|
|
|
- self.loading = false
|
|
|
- var list = res && res.data
|
|
|
- self.domains = Array.isArray(list) ? list : []
|
|
|
- }).catch(function() {
|
|
|
- self.loading = false
|
|
|
- self.domains = []
|
|
|
- })
|
|
|
- },
|
|
|
- onMaskTap() {
|
|
|
- // 点击遮罩不关闭,防止误触跳过
|
|
|
- },
|
|
|
- onDomainTap() {
|
|
|
- this.showDomains = !this.showDomains
|
|
|
- this.loadDomains()
|
|
|
- },
|
|
|
- selectDomain(d) {
|
|
|
- this.selectedCode = d.code
|
|
|
- this.selectedName = d.name
|
|
|
- },
|
|
|
- confirmDomain() {
|
|
|
- if (!this.selectedCode) {
|
|
|
- uni.showToast({ title: '请先选择一个关注的问题', icon: 'none' })
|
|
|
- return
|
|
|
- }
|
|
|
- this.$emit('select', {
|
|
|
- intentType: 'C',
|
|
|
- problemDomainCode: this.selectedCode,
|
|
|
- problemDomainName: this.selectedName
|
|
|
- })
|
|
|
- },
|
|
|
- emitSelect(intentType) {
|
|
|
- this.$emit('select', { intentType: intentType })
|
|
|
+ onMaskTap() {},
|
|
|
+ onStart() {
|
|
|
+ this.$emit('select', { intentType: 'B' })
|
|
|
},
|
|
|
onSkip() {
|
|
|
var self = this
|
|
|
@@ -140,13 +62,13 @@ export default {
|
|
|
skipUserIntent().then(function(res) {
|
|
|
self.skipping = false
|
|
|
if (res.code === 200 && res.data) {
|
|
|
- var skipCount = res.data.skipCount || 0
|
|
|
- if (skipCount >= 3) {
|
|
|
+ var count = (res.data.skipCount || 0) + 1
|
|
|
+ uni.setStorageSync('intent_skip_count', count)
|
|
|
+ if (count >= 3) {
|
|
|
uni.setStorageSync('intent_skip_max', '1')
|
|
|
}
|
|
|
- uni.setStorageSync('intent_skipped_at', Date.now())
|
|
|
- uni.showToast({ title: '好的,下次再来', icon: 'none' })
|
|
|
- setTimeout(function() { self.$emit('close') }, 600)
|
|
|
+ uni.showToast({ title: '好的,随时可以回来测', icon: 'none' })
|
|
|
+ setTimeout(function() { self.$emit('close') }, 500)
|
|
|
} else {
|
|
|
self.$emit('close')
|
|
|
}
|
|
|
@@ -162,170 +84,57 @@ export default {
|
|
|
<style scoped>
|
|
|
.ip-mask {
|
|
|
position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
+ top: 0; left: 0; right: 0; bottom: 0;
|
|
|
background: rgba(0, 0, 0, 0.55);
|
|
|
display: flex;
|
|
|
align-items: flex-end;
|
|
|
justify-content: center;
|
|
|
z-index: 9999;
|
|
|
}
|
|
|
-
|
|
|
.ip-panel {
|
|
|
width: 100%;
|
|
|
background: #FFF7ED;
|
|
|
border-radius: 32rpx 32rpx 0 0;
|
|
|
- padding: 48rpx 40rpx 60rpx;
|
|
|
+ padding: 56rpx 40rpx 64rpx;
|
|
|
box-sizing: border-box;
|
|
|
- max-height: 88vh;
|
|
|
- overflow-y: auto;
|
|
|
-}
|
|
|
-
|
|
|
-.ip-header {
|
|
|
- margin-bottom: 32rpx;
|
|
|
}
|
|
|
-
|
|
|
+.ip-header { margin-bottom: 36rpx; }
|
|
|
.ip-title {
|
|
|
display: block;
|
|
|
- font-size: 38rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
- text-align: center;
|
|
|
+ font-size: 40rpx; font-weight: bold; color: #333;
|
|
|
+ text-align: center; line-height: 1.3;
|
|
|
}
|
|
|
-
|
|
|
.ip-sub {
|
|
|
display: block;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #999;
|
|
|
- text-align: center;
|
|
|
- margin-top: 12rpx;
|
|
|
+ font-size: 26rpx; color: #888;
|
|
|
+ text-align: center; margin-top: 12rpx; line-height: 1.5;
|
|
|
}
|
|
|
-
|
|
|
.ip-card {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- background: #fff;
|
|
|
- border-radius: 20rpx;
|
|
|
- padding: 28rpx 30rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
|
|
-}
|
|
|
-
|
|
|
-.ip-card:active {
|
|
|
- transform: scale(0.98);
|
|
|
+ display: flex; align-items: center;
|
|
|
+ background: #fff; border-radius: 24rpx;
|
|
|
+ padding: 32rpx 28rpx;
|
|
|
+ box-shadow: 0 4rpx 20rpx rgba(249,115,22,0.1);
|
|
|
+ border: 2rpx solid rgba(249,115,22,0.15);
|
|
|
}
|
|
|
-
|
|
|
+.ip-card:active { opacity: 0.88; }
|
|
|
.ip-card-icon {
|
|
|
- width: 88rpx;
|
|
|
- height: 88rpx;
|
|
|
+ width: 88rpx; height: 88rpx;
|
|
|
border-radius: 22rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-right: 24rpx;
|
|
|
- flex-shrink: 0;
|
|
|
+ display: flex; align-items: center; justify-content: center;
|
|
|
+ margin-right: 24rpx; flex-shrink: 0;
|
|
|
}
|
|
|
-
|
|
|
-.ip-card-emoji {
|
|
|
- font-size: 44rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.ip-card-body {
|
|
|
- flex: 1;
|
|
|
-}
|
|
|
-
|
|
|
+.ip-card-emoji { font-size: 44rpx; }
|
|
|
+.ip-card-body { flex: 1; min-width: 0; }
|
|
|
.ip-card-title {
|
|
|
display: block;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
+ font-size: 30rpx; font-weight: 600; color: #333;
|
|
|
}
|
|
|
-
|
|
|
.ip-card-desc {
|
|
|
display: block;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999;
|
|
|
- margin-top: 6rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.ip-card-arrow {
|
|
|
- font-size: 44rpx;
|
|
|
- color: #CCC;
|
|
|
- margin-left: 12rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.ip-domain-wrap {
|
|
|
- background: #fff;
|
|
|
- border-radius: 20rpx;
|
|
|
- padding: 24rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
|
|
-}
|
|
|
-
|
|
|
-.ip-domain-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 20rpx 16rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
- border: 2rpx solid transparent;
|
|
|
- margin-bottom: 12rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.ip-domain-item:last-child {
|
|
|
- margin-bottom: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.ip-domain-item-active {
|
|
|
- border-color: #F97316;
|
|
|
- background: #FFF7ED;
|
|
|
-}
|
|
|
-
|
|
|
-.ip-domain-icon {
|
|
|
- font-size: 36rpx;
|
|
|
- margin-right: 16rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.ip-domain-name {
|
|
|
- flex: 1;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #333;
|
|
|
-}
|
|
|
-
|
|
|
-.ip-domain-check {
|
|
|
- color: #F97316;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-
|
|
|
-.ip-domain-confirm {
|
|
|
- margin-top: 16rpx;
|
|
|
- background: linear-gradient(135deg, #F97316, #FB923C);
|
|
|
- border-radius: 40rpx;
|
|
|
- padding: 22rpx 0;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-
|
|
|
-.ip-domain-confirm:active {
|
|
|
- opacity: 0.9;
|
|
|
-}
|
|
|
-
|
|
|
-.ip-domain-confirm-text {
|
|
|
- color: #fff;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: 600;
|
|
|
-}
|
|
|
-
|
|
|
-.ip-skip {
|
|
|
- text-align: center;
|
|
|
- margin-top: 20rpx;
|
|
|
- padding: 16rpx 0;
|
|
|
-}
|
|
|
-
|
|
|
-.ip-skip-text {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #999;
|
|
|
- text-decoration: underline;
|
|
|
+ font-size: 24rpx; color: #999;
|
|
|
+ margin-top: 6rpx; line-height: 1.4;
|
|
|
}
|
|
|
+.ip-card-arrow { font-size: 36rpx; color: #F97316; flex-shrink: 0; }
|
|
|
+.ip-skip { text-align: center; margin-top: 28rpx; padding: 12rpx 0; }
|
|
|
+.ip-skip-text { font-size: 26rpx; color: #bbb; }
|
|
|
</style>
|