362 lines
8.7 KiB
Vue
362 lines
8.7 KiB
Vue
<template>
|
|
<div class="page p-result">
|
|
<div class="main">
|
|
<!-- 详情卡片 -->
|
|
<div class="sec-1">
|
|
<div class="wrap">
|
|
<div class="title">
|
|
<span class="color-white">测试</span>
|
|
<span>结果</span>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-hd">{{title}}</div>
|
|
<div class="card-bd">
|
|
<div class="card-cont">
|
|
<div :key="index" v-for="(item, index) in result">{{item}}</div>
|
|
</div>
|
|
<button @click="saveResult" class="card-btn">
|
|
<image
|
|
class="icon icon-download"
|
|
lazy-load="false"
|
|
mode="scaleToFill"
|
|
src="/static/images/icon-download.png"
|
|
style="width:16px;height:16px;"
|
|
/>保存结果
|
|
</button>
|
|
<button class="card-btn" data-id="shareBtn" open-type="share">
|
|
<image
|
|
@click="share"
|
|
class="icon icon-share"
|
|
lazy-load="false"
|
|
mode="scaleToFill"
|
|
src="/static/images/icon-share.png"
|
|
style="width:16px;height:16px;"
|
|
/>分享结果
|
|
</button>
|
|
<button @click="replay" class="card-btn">
|
|
<image
|
|
class="icon icon-reload"
|
|
lazy-load="false"
|
|
mode="scaleToFill"
|
|
src="/static/images/icon-reload.png"
|
|
style="width:16px;height:16px;"
|
|
/>再来一次
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 列表、热门 -->
|
|
<div class="sec-2">
|
|
<div class="list">
|
|
<div class="list-hd">
|
|
<div class="l">大家都在测</div>
|
|
<div @click="goList" class="r">更多>></div>
|
|
</div>
|
|
<div class="list-bd">
|
|
<list-item :data="item" :key="index" v-for="(item, index) in hotList"></list-item>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- canvas -->
|
|
<painter
|
|
:palette="template"
|
|
@imgOK="onImgOk"
|
|
customStyle="position: absolute; left: -9999rpx;"
|
|
v-if="paint"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import card from '@/components/card'
|
|
import search from '@/components/search'
|
|
import listItem from '@/components/list-item'
|
|
import tag from '@/components/tag'
|
|
import requestUtil from '@/utils/request'
|
|
import sdkManage from '@/utils/jcfw/SDKManage'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
hotList: [],
|
|
result: '',
|
|
title: '',
|
|
template: {},
|
|
imgPath: '',
|
|
paint: false,
|
|
_id: ''
|
|
}
|
|
},
|
|
|
|
components: {
|
|
search,
|
|
listItem,
|
|
tag
|
|
},
|
|
async onLoad(options) {
|
|
this.users = options.users
|
|
this._id = options._id
|
|
sdkManage.init(options)
|
|
},
|
|
async mounted() {
|
|
await this.getResult()
|
|
await this.getHot()
|
|
const palette = {
|
|
background: '#eee',
|
|
width: '750rpx',
|
|
height: '1334rpx',
|
|
views: [
|
|
{
|
|
type: 'image',
|
|
url: '/static/images/bg-result.png',
|
|
css: {
|
|
top: '0rpx',
|
|
left: '0rpx',
|
|
width: '750rpx',
|
|
height: '1334rpx'
|
|
}
|
|
},
|
|
{
|
|
type: 'text',
|
|
text: this.title,
|
|
css: {
|
|
top: '100rpx',
|
|
left: '0rpx',
|
|
width: '750rpx',
|
|
color: '#000000',
|
|
textAlign: 'center',
|
|
fontSize: '52rpx',
|
|
fontWeight: 'bold',
|
|
lineHeight: '64rpx'
|
|
}
|
|
},
|
|
{
|
|
type: 'text',
|
|
text: this.result.join('\n'),
|
|
css: {
|
|
top: '220rpx',
|
|
left: '100rpx',
|
|
width: '550rpx',
|
|
color: '#000000',
|
|
lineHeight: '72rpx',
|
|
fontSize: '48rpx'
|
|
}
|
|
},
|
|
{
|
|
type: 'image',
|
|
url: '/static/images/qr-code.jpg',
|
|
css: {
|
|
bottom: '128rpx',
|
|
right: '60rpx',
|
|
width: '120rpx',
|
|
height: '120rpx'
|
|
}
|
|
},
|
|
{
|
|
type: 'text',
|
|
text: '小程序',
|
|
css: {
|
|
bottom: '64rpx',
|
|
right: '64rpx',
|
|
height: '120rpx',
|
|
color: '#999999',
|
|
lineHeight: '48rpx',
|
|
fontSize: '28rpx'
|
|
}
|
|
},
|
|
{
|
|
type: 'text',
|
|
text: '奇妙测试机',
|
|
css: {
|
|
bottom: '32rpx',
|
|
right: '64rpx',
|
|
height: '120rpx',
|
|
color: '#999999',
|
|
lineHeight: '48rpx',
|
|
fontSize: '28rpx'
|
|
}
|
|
}
|
|
]
|
|
}
|
|
|
|
this.template = palette
|
|
this.paint = true
|
|
},
|
|
onShareAppMessage(res) {
|
|
// if (res.from === 'button') {
|
|
// // 来自页面内转发按钮
|
|
// }
|
|
return {
|
|
title: this.title,
|
|
path: `/pages/details/main?_id=${this._id}`
|
|
}
|
|
},
|
|
methods: {
|
|
async getHot() {
|
|
try {
|
|
const data = await requestUtil.getData('/list', { type: 'hot' })
|
|
this.hotList = data.result
|
|
} catch (err) {
|
|
console.log(err)
|
|
}
|
|
},
|
|
async getResult() {
|
|
try {
|
|
const data = await requestUtil.getData('/result', {
|
|
_id: this._id,
|
|
users: this.users
|
|
})
|
|
this.result = data.result
|
|
this.title = data.title
|
|
} catch (err) {
|
|
console.log(err)
|
|
}
|
|
},
|
|
replay() {
|
|
wx.navigateBack({
|
|
delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
|
|
})
|
|
},
|
|
share() {
|
|
setTimeout(() => {
|
|
sdkManage.uploadLog('click_share', { id: this._id, title: this.title })
|
|
}, 0)
|
|
},
|
|
paint() {},
|
|
onImgOk(e) {
|
|
this.imgPath = e.mp.detail.path
|
|
console.log(this.imgPath)
|
|
},
|
|
saveResult() {
|
|
setTimeout(() => {
|
|
sdkManage.uploadLog('click_save', { id: this._id, title: this.title })
|
|
}, 0)
|
|
|
|
wx.showToast({
|
|
title: '正在保存', //提示的内容,
|
|
icon: 'loading', //图标,
|
|
duration: 2000, //延迟时间,
|
|
mask: true //显示透明蒙层，防止触摸穿透,
|
|
})
|
|
const self = this
|
|
setTimeout(() => {
|
|
wx.saveImageToPhotosAlbum({
|
|
filePath: self.imgPath,
|
|
success: function() {
|
|
wx.showToast({
|
|
title: '保存成功', //提示的内容,
|
|
icon: 'success', //图标,
|
|
duration: 2000, //延迟时间,
|
|
mask: true //显示透明蒙层，防止触摸穿透,
|
|
})
|
|
},
|
|
fail: function(err) {
|
|
wx.showToast({
|
|
title: '保存失败！请重试！', //提示的内容,
|
|
icon: 'none', //图标,
|
|
duration: 2000, //延迟时间,
|
|
mask: true //显示透明蒙层，防止触摸穿透,
|
|
})
|
|
console.log(err)
|
|
}
|
|
})
|
|
}, 1000)
|
|
},
|
|
goList() {
|
|
wx.switchTab({
|
|
url: `/pages/list/main`
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.p-result {
|
|
.main {
|
|
padding: 40rpx 20rpx 60rpx;
|
|
}
|
|
.sec-1 {
|
|
.wrap {
|
|
position: relative;
|
|
margin: 0 auto;
|
|
padding: 60rpx 32rpx;
|
|
background-color: #fffdf5;
|
|
border: 4px solid #ffdc34;
|
|
}
|
|
.title {
|
|
position: absolute;
|
|
transform: translateX(0%);
|
|
top: -2rpx;
|
|
left: -2rpx;
|
|
height: 64rpx;
|
|
padding: 0 32rpx;
|
|
font-size: 32rpx;
|
|
line-height: 64rpx;
|
|
font-weight: 700;
|
|
background-color: #ffdc34;
|
|
}
|
|
|
|
.card {
|
|
.card-hd {
|
|
margin-bottom: 0rpx;
|
|
text-align: center;
|
|
font-size: 48rpx;
|
|
font-weight: 700;
|
|
}
|
|
.card-bd {
|
|
line-height: 1.5;
|
|
font-size: 32rpx;
|
|
|
|
.card-cont {
|
|
margin: 12rpx 0;
|
|
text-indent: 1em;
|
|
font-size: 42rpx;
|
|
}
|
|
|
|
.card-btn {
|
|
margin: 32rpx auto;
|
|
border: none;
|
|
background-color: #ffdc34;
|
|
color: #fff;
|
|
border-radius: 0;
|
|
width: 100%;
|
|
letter-spacing: 4rpx;
|
|
.icon {
|
|
margin-right: 16rpx;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sec-2 {
|
|
margin-top: 30rpx;
|
|
.list {
|
|
background-color: #fff;
|
|
border: 4rpx solid #ffdc34;
|
|
.list-hd {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 80rpx;
|
|
padding: 0 32rpx;
|
|
line-height: 80rpx;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
.l {
|
|
font-weight: 700;
|
|
color: #ffdc34;
|
|
}
|
|
.r {
|
|
font-size: 28rpx;
|
|
color: #ffdc34;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|