Skip to content

N
nyx
Commit c66763d3 by jscat
Options

nyx更新 

1. 添加quiz-result和quiz-detail页面。
parent e2cf9300
正在显示 包含 526 行增加 和 80 行删除
增值产品-小程序及app/nyx-master/app.json
{
{
{
"pages": [
"pages/activity/quiz-detail/quiz-detail",
"pages/activity/activity",
"pages/activity/quiz-result/quiz-result",
"pages/activity/quiz-info/quiz-info",
"pages/activity/activity",
"pages/key/key",
"pages/activity/act-address/act-address",
"pages/activity/act-writer/act-writer",
......
增值产品-小程序及app/nyx-master/pages/activity/activity.wxml
<view class="page">
<view class="page">
......@@ -62,7 +62,7 @@
<!-- 文章封面内容 -->
<view class="notes-block" wx:for="{{notes}}" wx:for-item="item" wx:key="{{index}}">
<view class="note-info">
<navigator url="../activity/act-info/act-info?title={{item.title}}&content={{item.content}}&like={{item.like}}&note_image={{item.note_image}}&writer_name={{item.writer_name}}&writer_image={{item.writer_image}}" >
<navigator url="../activity/quiz-info/quiz-info?title={{item.title}}&content={{item.content}}&like={{item.like}}&note_image={{item.note_image}}&writer_name={{item.writer_name}}&writer_image={{item.writer_image}}" >
<view class="note-img">
<image src="{{item.note_image[0]}}"/>
</view>
......
增值产品-小程序及app/nyx-master/pages/activity/quiz-detail/quiz-detail.js 0 → 100644
// pages/index/note-info/note-info.js
// pages/index/note-info/note-info.js
Page({
/**
* 页面的初始数据
*/
data: {
windowHeight: "",
windowWidth: "",
contentHeight: "",
scrollLeft: 0, //切换栏的滚动条位置
curIndex : 0,
notes: {},
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var _this = this;
var windowHeight = wx.getSystemInfoSync().windowHeight;//获取设备高度，小程序自带的方法
var windowWidth = wx.getSystemInfoSync().windowWidth;//获取设备高度，小程序自带的方法
this.setData({
windowHeight: windowHeight,
windowWidth: windowWidth,
contentHeight : windowHeight * 0.675,
})
wx.setNavigationBarTitle({
title: '活动结果',
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function (options) {
var shareObj = {
　　　　title: "好友推荐: "+"Renaissance Bar知识竞答", // 默认是小程序的名称(可以写slogan等)
　　　　path: '/pages/share/share', // 默认是当前页面，必须是以'/'开头的完整路径
　　　　imageUrl: ''
}
　　// 来自页面内的按钮的转发
　　if( options.from == 'button' ){
　　　　// var eData = options.target.dataset;
　　　　// console.log( eData.id); // shareBtn
　　　　// 此处可以修改 shareObj 中的内容
　　　　shareObj.path = '/pages/goods/goods?goodId=123';
　　}
return shareObj;
},
/**
*
* 用户自定义函数
*/
//跳转到知识竞答页面
toGame: function (e) {
wx.navigateTo({
url: "/pages/key/matchDaily/matchDaily"
});
},
})
\ No newline at end of file
增值产品-小程序及app/nyx-master/pages/activity/quiz-detail/quiz-detail.wxml 0 → 100644
<view class="page">
<view class="page">
<!-- Tab: 酒肆风云 + 头像 -->
<view class="result-list">
<view class="item bg bg01 ">
<!-- 左侧 -->
<view class="float-li t1">
<view class="result-left">
<view class="t1 justify align">
<view class="t1-left">酒肆风云</view>
<view class="t1-right">
<image class="avatar" src="../../../icon/icon_avatar3.png"></image>
</view>
</view>
<view class="t3 justify align">
<view class="t3-left">2020年7月27日 星期一</view>
<view class="t3-right" bindtap="onClickPoints">
<view style="line-height:1; font-size:14px">张三丰</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 文字内容 -->
<view class="note">
<view class="note-title" style="font-weight: bold">
Renaissance Bar知识竞答
</view>
<view class="note-content">
张三丰 10题答对9题 喜提4.5积分
</view>
<view class="note-content">
战胜99%玩家
</view>
</view>
<!-- start bottom-->
<!-- refer to https://www.jb51.net/article/129438.htm -->
<view class="bottom_total">
<view class="bottom_line"></view>
<view class="weui-flex" style="height: 180rpx;">
<view class="weui-flex__item weui-flex justify align"><view class="placeholder">
<view class="list">
<view class="items">
<image src="../../../icon/activity/invite.png"></image>
<text>好友助力</text>
</view>
</view>
</view></view>
<view class="weui-flex__item weui-flex justify align"><view class="placeholder">
<view class="list">
<view class="items">
<image src="../../../icon/activity/play.png"></image>
<text>我也要答题</text>
</view>
</view>
</view></view>
</view>
</view>
<!-- end bottom-->
</view>
增值产品-小程序及app/nyx-master/pages/activity/quiz-detail/quiz-detail.wxss 0 → 100644
.page{
.page{
height:100vh; /* 相对于视口（Layout Viewport）的高度; 视口被均分为100单位的vh */
background-color:#f4f8fb;
}
.note{
width: 100%;
/* position: fixed; */
border-radius: 5rpx;
float: left;
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.note-title{
font-size: 16px;
/* 后期用于 '展开' 功能 */
/* overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical; */
margin-left: 5%;
margin-right: 5%;
margin-top: 0;
text-align:justify;
}
.note-content{
font-size: 16px;
/* 后期用于 '展开' 功能 */
/* overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical; */
margin-left: 5%;
margin-right: 4%;
margin-top: 20rpx;
text-align:justify;
}
.note-row{
width: 100%;
display: flex;
flex-direction: row;
margin-bottom: 30rpx;
margin-top: 30rpx;
}
.note-column{
display: flex;
flex-direction: column;
margin-left: 30rpx;
}
.writer-image{
width: 120rpx;
height: 120rpx;
margin-left: 10%;
}
/* start bottom style */
.column {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
align-items: center;
}
.bottom_line {
width: 100%;
height: 2rpx;
background: lightgray;
}
.bottom_total {
position: fixed;
display: flex;
flex-direction: column;
bottom: 0;
width: 100%;
height: 180rpx;
line-height: 10rpx;
background: white;
}
.button-red {
background-color: #f44336; /* 红色 */
}
.button-brown {
background-color: #D1A96E; /* 红色 */
}
.button-brown image{
width: 60rpx;
height: 60rpx;
}
button {
text-align: center;
font-size: 40rpx;
height: 2.6em;
line-height: 2.6em;
color: #fff;
}
.frame{
height: 480rpx;
}
.placeholder{
margin: 5px;
padding: 0 10px;
text-align: center;
line-height: 2.3em;
}
/* justify-content: center;(水平居中) align-items: center;(垂直居中) */
.justify{
justify-content: center;
}
.align{
align-items: center;
}
.border{
border: 3rpx solid #ccc;
border-radius: 0rpx;
padding: 10rpx;
}
/* 好友助力积分列表 */
.list-title{
display: flex;
flex-direction: column;
/* align-items: center; */
}
.list-title .title{
font-size: 80rpx;
font-weight: bold;
margin-top: 40rpx;
margin-bottom: 40rpx;
}
.list .items{
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
}
.items image{
width: 80rpx;
height: 80rpx;
margin-top: 20rpx;
font-size: 0;
}
.items text{
/* display: block; */
text-align: center;
margin-top: 0rpx;
margin-bottom: 20rpx;
padding: 0rpx;
font-size: 28rpx;
}
.list{
display: flex;
flex-direction: row;
justify-content: space-between;
margin-left: 30rpx;
margin-right: 30rpx;
margin-top: 20rpx;
}
/* end bottom style */
/* 分享按钮 */
.share {
position: absolute;
background-size: 50rpx 50rpx;
opacity: 0;
border:none;
}
.avatar{
width: 100rpx;
height: 100rpx;
overflow:visible;
border-radius: 50%;
}
/* result css */
.result-list{width: 100%; margin: 0 auto}
.result-list .item{width: 100%; height: 280rpx; margin-bottom: 20rpx;}
.result-list .item .float-li{width: 100%; height: 100%; border-right: 2rpx dashed rgba(255,255,255,.3)}
.result-list .item .float-li-right{width: 220rpx; padding-right: 20rpx; height:100%; color: #fff}
.result-left{position: relative}
.result-left .t{position: absolute; color: #fff}
.result-left .t1{width: 100%; display: flex; margin-left: 20rpx; margin-top: 20rpx; height: 160rpx; color: #fff}
.result-left .t1-left{display:flex; align-items: center;width: 60%; font-size: 70rpx; font-weight: bold;}
.result-left .t1-right{width: 40%; font-size: 50rpx; display:flex; align-items: center;}
.result-left .t2{left: 20rpx; top:160rpx}
.result-left .t3{width: 100%; display: flex; margin-left: 20rpx; margin-top: 10rpx; height: 50rpx; color: #fff}
.result-left .t3-left{width: 60%; display:flex; align-items: center;}
.result-left .t3-right{width: 40%; display:flex; align-items: center;}
.result-left .t3-right image{
width: 40rpx;
height: 40rpx;
font-size: 0;
}
.bg{width:700rpx; height: 250rpx;margin-bottom:50rpx;position:relative;overflow:hidden}
.bg i{position: absolute;left: 20%;top: 90rpx;height: 500rpx;width: 700rpx;background-color: rgba(255,255,255,.15);transform: rotate(-30deg);
}
.bg01{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 30rpx, #F39B00 30rpx);background-size:10rpx 10rpx;background-position:9rpx 3rpx; background: #F39B00}
\ No newline at end of file
增值产品-小程序及app/nyx-master/pages/activity/quiz-result/quiz-result.wxml
<view class="page">
<view class="page">
<view class="page">
<!-- 图片 -->
<scroll-view class="scroll-view_H" scroll-x scroll-with-animation style="width: 100%;height: 90%;" bindscroll="getSelectItem" scroll-left="{{scrollLeft}}">
<block wx:for="{{notes.note_image}}" wx:key="unique" wx:for-index="id" wx:for-item="item">
<view class="scroll_item {{item.selected ? 'selected' : ''}}" data-index='{{item.index}}' bindtap='selectProItem'>
<image src="{{item}}" mode="widthFix"/>
</view>
</block>
</scroll-view>
<!-- Tab: 酒肆风云 + 头像 -->
<view class="result-list">
<view class="item bg bg01 ">
<!-- 左侧 -->
<view class="float-li t1">
<view class="result-left">
<view class="t1 justify align">
<view class="t1-left">酒肆风云</view>
<view class="t1-right">
<image class="avatar" src="../../../icon/icon_avatar3.png"></image>
</view>
</view>
<view class="t3 justify align">
<view class="t3-left">2020年7月27日 星期一</view>
<view class="t3-right" bindtap="onClickPoints">
<view style="line-height:1; font-size:14px">张三丰</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 文字内容 -->
<view class="note">
<view class="note-title" style="font-weight: bold">
Renaissance Bar知识竞答
</view>
<view class="note-content">
共10题
张三丰 10题答对9题 喜提4.5积分
</view>
<view class="note-content">
可获得5积分
</view>
</view>
<!-- 企业信息 -->
<view class="note-row">
<image class="writer-image" src="{{notes.writer_image}}"/>
<view class="note-column">
<span class="name">Renaissance Bar</span>
<span class="name">充满爱与温度，自由放松的bar</span>
战胜99%玩家
</view>
</view>
<!-- start bottom-->
<!-- start bottom simple button-->
<!-- refer to https://www.jb51.net/article/129438.htm -->
<view class="bottom_total">
<view class="bottom_line"></view>
<view class="weui-flex" style="height: 180rpx;">
<view class="weui-flex__item weui-flex justify align"><view class="placeholder">
<view class="list">
......@@ -58,4 +61,19 @@
</view>
<!-- end bottom-->
<!-- start bottom-->
<!-- refer to https://www.jb51.net/article/129438.htm -->
<!-- <view class="bottom_total">
<view class="bottom_line"></view>
<view class="weui-flex" style="height: 180rpx;">
<view class="weui-flex__item weui-flex justify align"><view class="placeholder">
<button class="button-brown" bindtap="toBuy" formType="submit">查看积分</button>
</view></view>
<view class="weui-flex__item weui-flex justify align"><view class="placeholder">
<button class="button-red" bindtap="toGame">分享战绩</button>
</view></view>
</view>
</view> -->
<!-- end bottom-->
</view>
增值产品-小程序及app/nyx-master/pages/activity/quiz-result/quiz-result.wxss
.scroll-view_H{
.page{
.scroll-view_H{
position: relative;
width: 100%;
text-align: center;
transform: scale(0.9);
white-space: nowrap;
}
.scroll_item {
position: relative;
width: 100%;
height: 90%;
margin: 0;
transform-origin: 50% 0;
left: 0%;
display: inline-block;
/* border-radius: 20rpx !important ; */
overflow: hidden;
/* transform: scale(0.9); */
vertical-align: middle;
/* top: 0%; */
/* height: 72%; */
background-color: #fff;
}
.scroll_item:first-child{
margin-left: 0%;
left: 0;
}
.scroll_item:last-child{
margin-right: 10%;
left: 0;
}
.scroll_item.selected{
/* transform: scale(0.9); */
border: solid 1px #ffcd54;
}
.scroll_item image {
width: 100%;
float: left;
margin-top: 0;
/* border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx; */
.page{
height:100vh; /* 相对于视口（Layout Viewport）的高度; 视口被均分为100单位的vh */
background-color:#f4f8fb;
}
.note{
width: 100%;
/* position: fixed; */
background: #fff;
border-radius: 5rpx;
float: left;
margin-top: 20rpx;
......@@ -129,20 +91,24 @@
background-color: #D1A96E; /* 红色 */
}
button {
color: white;
text-align: center;
font-size: 40rpx;
height: 2.6em;
line-height: 2.6em;
color: #fff;
}
.frame{
height: 480rpx;
}
.placeholder{
margin: 0px;
margin: 5px;
padding: 0 10px;
text-align: center;
vertical-align: middle;
line-height: 2.3em;
color: rgba(0,0,0);
}
/* justify-content: center;(水平居中) align-items: center;(垂直居中) */
.justify{
justify-content: center;
......@@ -151,6 +117,26 @@
align-items: center;
}
.border{
border: 3rpx solid #ccc;
border-radius: 0rpx;
padding: 10rpx;
}
/* 好友助力积分列表 */
.list-title{
display: flex;
flex-direction: column;
/* align-items: center; */
}
.list-title .title{
font-size: 80rpx;
font-weight: bold;
margin-top: 40rpx;
margin-bottom: 40rpx;
}
.list .items{
display: flex;
flex-direction: column;
......@@ -158,8 +144,8 @@
align-items: center;
}
.items image{
width: 50rpx;
height: 50rpx;
width: 80rpx;
height: 80rpx;
margin-top: 20rpx;
font-size: 0;
}
......@@ -189,3 +175,38 @@
opacity: 0;
border:none;
}
.avatar{
width: 100rpx;
height: 100rpx;
overflow:visible;
border-radius: 50%;
}
/* result css */
.result-list{width: 100%; margin: 0 auto}
.result-list .item{width: 100%; height: 280rpx; margin-bottom: 20rpx;}
.result-list .item .float-li{width: 100%; height: 100%; border-right: 2rpx dashed rgba(255,255,255,.3)}
.result-list .item .float-li-right{width: 220rpx; padding-right: 20rpx; height:100%; color: #fff}
.result-left{position: relative}
.result-left .t{position: absolute; color: #fff}
.result-left .t1{width: 100%; display: flex; margin-left: 20rpx; margin-top: 20rpx; height: 160rpx; color: #fff}
.result-left .t1-left{display:flex; align-items: center;width: 60%; font-size: 70rpx; font-weight: bold;}
.result-left .t1-right{width: 40%; font-size: 50rpx; display:flex; align-items: center;}
.result-left .t2{left: 20rpx; top:160rpx}
.result-left .t3{width: 100%; display: flex; margin-left: 20rpx; margin-top: 10rpx; height: 50rpx; color: #fff}
.result-left .t3-left{width: 60%; display:flex; align-items: center;}
.result-left .t3-right{width: 40%; display:flex; align-items: center;}
.result-left .t3-right image{
width: 40rpx;
height: 40rpx;
font-size: 0;
}
.bg{width:700rpx; height: 250rpx;margin-bottom:50rpx;position:relative;overflow:hidden}
.bg i{position: absolute;left: 20%;top: 90rpx;height: 500rpx;width: 700rpx;background-color: rgba(255,255,255,.15);transform: rotate(-30deg);
}
.bg01{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 30rpx, #F39B00 30rpx);background-size:10rpx 10rpx;background-position:9rpx 3rpx; background: #F39B00}
\ No newline at end of file
增值产品-小程序及app/nyx-master/pages/key/matchDaily/matchDaily.js
// pages/key/matchDaily/matchDaily.js
// pages/key/matchDaily/matchDaily.js
......@@ -355,9 +355,12 @@ Page({
// 如果完成了10道题
doneDaily: function (res) {
var _this = this
    this.setData({
      showModal: true
    })
wx.navigateTo({
url: "/pages/activity/quiz-result/quiz-result"
})
//     this.setData({
//       showModal: true
//     })
// wx.showModal({
// title: '恭喜你完成本次活动',
// content: '获得'+_this.__data__.score + '积分，打败80%的玩家',
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论