Commit fd5e7bde by xueyang

欧欧视力测视小程序一期文件

parents
//app.js
App({
onLaunch: function () {
// 展示本地存储能力
//var logs = wx.getStorageSync('logs') || []
//logs.unshift(Date.now())
//wx.setStorageSync('logs', logs)
var baidu_token = wx.getStorageSync('baidu_token') || {}
if (baidu_token) {
if (baidu_token.time - Date.now() <= 300000) {
this.sysBaiduOpenApiToken();
}
}
var _this = this;
setTimeout(function () {
console.log('baidu_token start ........')
wx.setStorageSync('baidu_token', baidu_token)
_this.sysBaiduOpenApiToken();
}, 5)
var userId = wx.getStorageSync('userId') || ''
console.log(userId);
if(!userId){
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
console.log(res.code);
wx.request({
url: _this.server + 'SmallProgram/WechatSight/getUserInfo',
data: {
code: res.code
},
success: function (event) {
console.log(event.data)
//用户信息已经存在
if (event.data.code == '10000') {
//var pid = wx.getStorageSync('pid') || ''
var userId = event.data.data.userId
wx.setStorageSync('userId', userId)
} else if (event.data.code == '20000') {
} else {
console.log("接口用户信息获取失败")
}
}
})
}
})
}
},
/*getUserInfo: function (cb) {
var that = this
if (this.globalData.userInfo) {
typeof cb == "function" && cb(this.globalData.userInfo)
} else {
//调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},*/
globalData: {
userInfo: null
},
sysBaiduOpenApiToken: function () {
var currentTimeIn = Date.now();
var baidu_token = wx.getStorageSync('baidu_token') || {}
if (baidu_token.time) {
if (baidu_token.time - Date.now() <= 300000) {
console.log("baidu_token request ...")
this.getBaiduOpenApiToken(function (baidu_token) {
console.log(baidu_token);
baidu_token.time = Date.now() + 7200000
wx.setStorageSync('baidu_token', baidu_token)
});
} else {
console.log("baidu_token have ...")
}
}else{
console.log("else baidu_token request ...")
this.getBaiduOpenApiToken(function (baidu_token) {
//console.log(baidu_token);
baidu_token.time = Date.now() + 7200000
wx.setStorageSync('baidu_token', baidu_token)
});
}
},
getBaiduOpenApiToken: function (cb) {
console.log('getBaiduOpenApiToken');
var url = 'https://openapi.baidu.com/oauth/2.0/token';
wx.request({
url: url,
data: {
grant_type: 'client_credentials',
client_id: 'lagZdrinq7W8AAec6NDmcq18BSPC7ZUg',
client_secret: 'eY2vLcfI5yu1YhGnxwlimu7kojLLtGVz'
},
header: {
'Content-Type': 'application/json'
},
success: function (res) {
//console.log(res)
typeof cb == "function" && cb(res.data);
}, fail: function (e) {
console.log(e);
}
})
},
server: 'https://seex.dev.iouou.cn/',
})
\ No newline at end of file
{
"pages":[
"pages/index/index",
"pages/about/about",
"pages/result/result",
"pages/testing/testing"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#3EC0ED",
"navigationBarTitleText": "欧欧视力检查工具",
"navigationBarTextStyle":"white",
"backgroundColor": "#3EC0ED",
"enablePullDownRefresh": false
}
}
/**app.wxss**/
.container {
height: 100%;
width: 100%;
background-image: url('http://onkfpiopi.bkt.clouddn.com/bg_all.png');
background-size:100% 100%;
position:fixed;
color: #585E60;
}
function getRandomColor() {
let rgb = []
for (let i = 0; i < 3; ++i) {
let color = Math.floor(Math.random() * 256).toString(16)
color = color.length == 1 ? '0' + color : color
rgb.push(color)
}
return '#' + rgb.join('')
}
Page({
data: {
status: 'none'
},
onReady: function (res) {
this.videoContext = wx.createVideoContext('myVideo')
},
inputValue: '',
bindInputBlur: function (e) {
this.inputValue = e.detail.value
},
bindSendDanmu: function () {
this.videoContext.sendDanmu({
text: this.inputValue,
color: getRandomColor()
})
},
playVideo: function () {
this.videoContext.play()
this.videoContext.requestFullScreen()
this.setData({
status: true
})
},
fullscreenchange: function (e) {
console.log(e)
this.inputValue = e.detail.value
},
})
\ No newline at end of file
{
"navigationBarTitleText": "使用说明"
}
\ No newline at end of file
<view class="container">
<!-- 使用说明背景 开始-->
<view class='aboutBg'>
<view class='content'>
<view>1. 保持手机在眼前60厘米处,选择E的朝向通过手势滑动屏幕。</view>
<view>2. 由于视力测试对手机屏幕有较高的要求,目前建议用户手机的分辨率至少1080*480,屏幕至少3.5寸。</view>
</view>
<view class='desc'>
<view>通过大量的用户验证</view>
<view class='descUse'>(正确使用该软件)</view>
</view>
<view class='deviation'>
视力值误差0.1以内
</view>
<view class='opertion'>
<image src='../../public/img/pic_use.png' class='picUse'></image>
</view>
<view class='videoButton' bindtap='playVideo'>
观看教学视频 ﹥
</view>
</view>
<!-- 使用说明背景 结束-->
<!-- 教学视频 开始-->
<view style='display: {{status}}' bindtap='playVideo'>
<video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" controls bindfullscreenchange></video>
</view>
<!-- 教学视频 结束-->
</view>
.aboutBg{
width: 690rpx;
height: 1146rpx;
background: #FFFFFF;
border-radius: 8px;
margin: 20rpx 30rpx 0rpx 30rpx;
}
.content{
padding: 60rpx 40rpx 40rpx 40rpx;
font-size: 15px;
color: #585E60;
line-height: 52rpx;
}
.desc{
font-size: 14px;
color: #585E60;
line-height: 42rpx;
text-align: center;
}
.descUse{
font-size: 12px;
}
.deviation{
font-size: 14px;
color: #FFFFFF;
line-height: 84rpx;
background-image: url('http://onkfpiopi.bkt.clouddn.com/bg_word.png');
background-position: center center;
background-repeat: no-repeat;
background-size:426rpx 100%;
text-align: center;
margin-top: 18rpx;
}
.opertion{
margin-top: 90rpx;
text-align: center;
}
.picUse{
width: 212rpx;
height: 324rpx;
}
.videoButton{
margin: 70rpx 60rpx 0rpx 60rpx;
width: 570rpx;
height: 80rpx;
background: #39B9EC;
border-radius: 8px;
font-size: 20px;
color: #FFFFFF;
text-align: center;
line-height: 80rpx;
}
//index.js
//获取应用实例
const app = getApp()
var util = require('../../utils/util.js')
Page({
data: {
userInfo: {},//微信用户信息
directionData: ['up', 'right', 'down', 'left'],//E的方向
},
onLoad: function () {
var that = this
},
//事件处理函数
goTesting: function () {
wx.navigateTo({
url: '../testing/testing'
})
},
goNearby: function () {
wx.navigateTo({
url: '../about/about'
})
},
goAbout: function () {
wx.navigateTo({
url: '../about/about'
})
},
})
<view class="container" >
<!-- logo 开始-->
<view class='header'>
<image src="../../public/img/logo.png" class='logo'></image>
</view>
<!-- logo 结束-->
<!-- 开始测视 开始-->
<view class='goTesting button' bindtap = "goTesting">
开始测视
</view>
<!-- 开始测视 结束-->
<!--<view class='goNearby button' bindtap = "goNearby">
周边服务
</view>-->
<!-- 周边服务 开始-->
<view class='goNearby button'>
周边服务
</view>
<!-- 周边服务 结束-->
<!-- 说明 开始-->
<view class='about' bindtap = "goAbout">
说明
</view>
<!-- 说明 结束-->
</view>
\ No newline at end of file
.header {
margin-top: 196rpx;
text-align: center;
}
.logo {
width: 190rpx;
height: 200rpx;
}
.button {
margin: 0rpx 40rpx;
background: #FFFFFF;
height: 140rpx;
border-radius:16rpx;
text-align: center;
line-height: 140rpx;
font-size: 40rpx;
color: "#585E60";
}
.goTesting {
margin-top: 200rpx;
}
.goNearby {
margin-top: 40rpx;
}
.about {
margin-top: 100rpx;
text-align: center;
font-size: 32rpx;
color: "#585E60";
}
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
//userInfo: {},//微信用户信息
leftEye: '',//左眼视力
rightEye: '',//右眼视力
resultStatus: false,//是否已经测视过
results: []//历史视力记录
},
onLoad: function (event) {
var that = this
var results = wx.getStorageSync('results') || []
if (results.length > 1) {
results.pop();
}
//当记录数大于4个,去掉最后一条记录
if (results.length >= 4){
that.setData({
resultStatus: true
})
}
results.unshift(event)
wx.setStorageSync('results', results)
that.setData({
leftEye: event.leftEye,
rightEye: event.rightEye,
results: results
})
//调用应用实例的方法获取全局数据
/*app.getUserInfo(function (userInfo) {
//更新数据
})*/
},
goTesting: function () {
wx.navigateTo({
url: '../index/index'
})
}
})
{}
\ No newline at end of file
<view class="container">
<!-- 蒙层 开始-->
<view class='layerBg'></view>
<!-- 蒙层 结束-->
<!-- 结果小票背景 开始-->
<view class='resultBg'>
<view class='title'>本次测试结果</view>
<view class='eyeSight'>
<view class='scale smallScale'>左眼</view>
<view class='scale bigScale'>{{leftEye}}</view>
<view class='scale bigScale'>|</view>
<view class='scale smallScale'>右眼</view>
<view class='scale bigScale'>{{rightEye}}</view>
</view>
<block wx:if="{{resultStatus}}">
<view class='line'></view>
<view class='lastResultTitle'>最近测试</view>
<view class='lastResultContent lastResultBg'>
<view class='resultScale'>时间</view>
<view class='resultScale'>左眼</view>
<view class='resultScale'>右眼</view>
</view>
<block wx:for="{{results}}">
<block wx:if="{{index > 0}}">
<view class='lastResultContent'>
<view class='resultScale'>{{item.time}}</view>
<view class='resultScale'>{{item.leftEye}}</view>
<view class='resultScale'>{{item.rightEye}}</view>
</view>
</block>
</block>
</block>
<view class='button' bindtap = "goTesting">确定</view>
</view>
<!-- 结果小票背景 结束-->
</view>
<!-- 倒计时蒙层 结束-->
<!--<view class="container" id="id" bindtap = "handletap" bindtouchstart = "handletouchtart" bindtouchend="handletouchend">
<view class="userinfo">
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
</view>-->
\ No newline at end of file
.layerBg{
position: absolute;
width: 100%;
height: 100%;
background-color: #000000;
opacity:.50;
}
.resultBg{
width: 690rpx;
height: 828rpx;
background-image: url('http://onkfpiopi.bkt.clouddn.com/bg_result.png');
background-size:100% 100%;
margin: 280rpx 30rpx 0rpx 30rpx;
z-index: 1111;
position:relative;
}
.title{
padding-top: 60rpx;
text-align: center;
font-size: 15px;
color: #585E60;
}
.eyeSight{
padding-top: 54rpx;
font-size: 10.5px;
color: #585E60;
text-align: center;
}
.smallScale{
padding-right: 40rpx;
font-size: 36rpx;
}
.bigScale{
padding-right: 82rpx;
font-size: 40rpx;
}
.scale{
display: inline;
}
.line{
border-bottom:dotted 2rpx #000000;
padding-top: 68rpx;
margin: 0 34rpx;
}
.lastResultTitle{
padding-top: 40rpx;
text-align: center;
font-size: 15px;
color: #585E60;
}
.lastResultContent{
text-align: center;
font-size: 28rpx;
color: #585E60;
margin: 20rpx 40rpx 0 40rpx;
height: 50rpx;
line-height: 50rpx;
}
.lastResultBg{
background: #EBEBEB;
border-radius:40px;
}
.resultScale{
width: 33%;
display: inline-block;
}
.contentScale{
padding-right: 84rpx;
}
.button{
margin: 60rpx 60rpx 0 60rpx;
background: #39B9EC;
border-radius: 8px;
height: 80rpx;
line-height: 80rpx;
font-size: 14px;
text-align: center;
color: #FFFFFF;
}
{}
\ No newline at end of file
<!-- 倒计时蒙层 开始-->
<view class='countDown' style='display: {{countDownStatus}}'>
<view wx:if="{{testNumber == 1}}" class='testingTitle'> 请遮住您的左眼 </view>
<view wx:else class='testingTitle'> 请遮住您的右眼 </view>
<view class='testingDesc'>通过滑动屏幕选择E标开口方向</view>
<view class='time'>{{time}}</view>
</view>
<!-- 倒计时蒙层 结束-->
<view class="container">
<!--<block wx:if="{{totalScore}}">
<view id="notice" wx:for="{{ notice }}"><image src="{{ item }}" class='notice'></image> </view>
</block>-->
<!-- 测视距离 开始-->
<view class='distance'>{{distance}}</view>
<!-- 测视距离 结束-->
<!-- E 测视滑动面板 开始-->
<view class="ePanel" bindtap = "handletap" bindtouchstart = "handletouchtart" bindtouchend="handletouchend">
<view class="{{ direction }}-e row-testing" id="show-e" style='font-size:{{size}}rpx;'>E</view>
</view>
<!-- E 测视滑动面板 结束-->
<!-- E 标尺 开始-->
<view class="ruler" id="show-e">
<block wx:for="{{ruler}}">
<block wx:if="{{item == eValue}}">
<view class='scale nowScale'>{{item}}</view>
</block>
<block wx:else>
<block wx:if="{{item == 0}}">
<view class='scale'></view>
</block>
<block wx:else>
<view class='scale'>{{item}}</view>
</block>
</block>
</block>
</view>
<!-- E 标尺 结束-->
<!-- 测视距离和记录形式 开始-->
<view class="bottomMenu" >
<view class='menu menuMargin' bindtap='editDistance'>测视距离</view>
<view class='menu' bindtap='editRuler'>记录形式</view>
</view>
<!-- 测视距离和记录形式 结束-->
</view>
<!--<view class="usermotto">
<button id="up-button" data-choice-direction='up' bindtap="choseDirection">上</button>
<button id="right-button" data-choice-direction='right' bindtap="choseDirection">右</button>
<button id="down-button" data-choice-direction='down' bindtap="choseDirection">下</button>
<button id="left-button" data-choice-direction='left' bindtap="choseDirection">左</button>
</view>-->
.right-e {
transform: rotate(0deg);
}
.down-e {
transform: rotate(90deg);
}
.left-e {
transform: rotate(180deg);
}
.up-e {
transform: rotate(270deg);
}
.notice{
width: 48rpx;
height: 48rpx;
}
.countDown{
background-image: url('http://onkfpiopi.bkt.clouddn.com/bg_all.png');
background-size:100% 100%;
position:absolute;
width:100%;
height:100%;
color:#FFFFFF;
z-index: 999;
}
.testingTitle {
text-align: center;
margin-top: 80rpx;
font-size: 40rpx;
line-height: 30rpx;
}
.testingDesc {
text-align: center;
margin: 30rpx 0 180rpx 0;
font-size: 40rpx;
line-height: 30rpx;
}
.time {
text-align: center;
font-size: 96rpx;
color: #585E60;
background: #FFFFFF;
border-radius:100px;
width: 256rpx;
height: 256rpx;
line-height: 256rpx;
margin:0 auto;
}
.ePanel{
width: 690rpx;
height: 690rpx;
margin:0 auto;
background: #FFFFFF;
text-align: center;
line-height: 690rpx;
border-radius:32rpx;
color: #000000;
}
.distance{
margin-top: 74rpx;
margin-bottom: 20rpx;
text-align: center;
font-size: 40rpx;
color: #FFFFFF;
}
.ruler{
margin-top: 60rpx;
width: 100%;
height: 70rpx;
background-image: url('http://onkfpiopi.bkt.clouddn.com/bg_word2.png');
background-size:100% 100%;
position:absolute;
color: #FFFFFF;
font-size: 30rpx;
text-align: center;
line-height: 70rpx;
}
.scale{
display: inline;
padding: 0rpx 45rpx;
font-size: 30rpx;
}
.nowScale{
font-size: 34rpx;
}
.bottomMenu{
margin-top: 180rpx;
padding-bottom: 52rpx;
}
.menu{
width: 290rpx;
height: 100rpx;
background: #FFFFFF;
border-radius:32rpx;
text-align: center;
line-height: 100rpx;
color: #585E60;
display:inline-block;
}
.menuMargin{
margin-left: 60rpx;
margin-right: 30rpx;
}
{
"description": "项目配置文件。",
"setting": {
"urlCheck": true,
"es6": true,
"postcss": true,
"minified": true
},
"compileType": "weapp",
"libVersion": "1.6.0",
"appid": "wxebed6f51ad5b613f",
"projectname": "欧欧视力测视工具",
"condition": {
"weapp": {
"current": -1,
"list": []
},
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
}
}
}
\ No newline at end of file
const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
//const hour = date.getHours()
//const minute = date.getMinutes()
//const second = date.getSeconds()
//return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
return [year, month, day].map(formatNumber).join('.')
}
const formatNumber = n => {
n = n.toString()
return n[1] ? n : '0' + n
}
function getSmallEyeData() {
var smallEyeData = {
1: '0.1',
2: '0.12',
3: '0.15',
4: '0.2',
5: '0.25',
6: '0.3',
7: '0.4',
8: '0.5',
9: '0.6',
10: '0.8',
11: '1.0',
12: '1.2',
13: '1.5',
14: '2.0'
};
return smallEyeData;
}
function getBigEyeData() {
var bigEyeData = {
1: '4.0',
2: '4.1',
3: '4.2',
4: '4.3',
5: '4.4',
6: '4.5',
7: '4.6',
8: '4.7',
9: '4.8',
10: '4.9',
11: '5.0',
12: '5.1',
13: '5.2',
14: '5.3'
};
return bigEyeData;
}
function getE60SizeData() {
var e60SizeData = {
1: '160',
2: '126',
3: '100',
4: '80',
5: '64',
6: '50',
7: '40',
8: '32',
9: '26',
10: '20',
11: '16',
12: '12',
13: '10',
14: '8'
};
return e60SizeData;
}
function getE30SizeData() {
var e30SizeData = {
1: '80',
2: '63',
3: '50',
4: '40',
5: '32',
6: '25',
7: '20',
8: '16',
9: '13',
10: '10',
11: '8',
12: '6',
13: '5',
14: '4'
};
return e30SizeData;
}
function getRowNumberData() {
var rowNumberData = {
1: '1',
2: '2',
3: '2',
4: '3',
5: '3',
6: '4',
7: '4',
8: '5',
9: '6',
10: '7',
11: '8',
12: '8',
13: '8',
14: '8'
};
return rowNumberData;
}
module.exports = {
formatTime: formatTime,
getSmallEyeData: getSmallEyeData,
getBigEyeData: getBigEyeData,
getE60SizeData: getE60SizeData,
getE30SizeData: getE30SizeData,
getRowNumberData: getRowNumberData
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment