Commit 0409cb11 by jscat

nyx: quiz 比赛结果, 比赛详情页面

1)完成查看积分
2)完成查看barcode
parent 359d8c6d
{
{
{
"pages": [
"pages/my/points/points",
"pages/activity/quiz-result/quiz-result",
"pages/activity/activity",
"pages/key/key",
"pages/activity/act-info/act-info",
"pages/activity/act-detail/act-detail",
"pages/activity/act-address/act-address",
"pages/activity/act-writer/act-writer",
"pages/activity/act-searchbar/act-searchbar",
......@@ -12,6 +13,7 @@
"pages/key/matchDaily/matchDaily",
"pages/key/matchStudy/matchStudy",
"pages/key/matchStudy/matchStudyDetail/matchStudyDetail",
"pages/my/points/points",
"pages/my/rank/rank",
"pages/my/user/user",
"pages/my/myposts/myposts",
......
// 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
<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>
<!-- 文字内容 -->
<view class="note">
<view class="note-title" style="font-weight: bold">
Renaissance Bar知识竞答
</view>
<view class="note-content">
共10题
</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>
</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/points.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/share.png"></image>
<text>分享战绩</text>
</view>
</view>
</view></view>
</view>
</view>
<!-- end bottom-->
</view>
.scroll-view_H{
.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; */
}
.note{
width: 100%;
/* position: fixed; */
background: #fff;
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 {
color: white;
text-align: center;
font-size: 40rpx;
height: 2.6em;
line-height: 2.6em;
}
.placeholder{
margin: 0px;
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;
}
.align{
align-items: center;
}
.list .items{
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
}
.items image{
width: 50rpx;
height: 50rpx;
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;
}
\ No newline at end of file
page{background-color:#EDEDED;}
page{background-color:#EDEDED;}
......@@ -165,7 +165,7 @@ page{background-color:#EDEDED;}
vertical-align: middle;
}
/* 小程序自定义弹框 */
/* start - 小程序自定义弹框css */
/* 遮罩层 */
.mask{
width: 100%;
......@@ -221,7 +221,6 @@ page{background-color:#EDEDED;}
/* 图片+文字 */
.weui-width{
width: 80%;
}
.placeholder-modal{
......@@ -231,6 +230,7 @@ page{background-color:#EDEDED;}
line-height: 2.3em;
background-color: #fff;
}
/* end - 小程序自定义弹框css */
.items{
width: 100%;
......
// pages/my/rank/rank.js
// pages/my/rank/rank.js
......@@ -26,6 +26,10 @@ Page({
rankList : [],
isHideLoadMore: false,
/* 模态框 */
showModalPoints: false,
showModalBarcode : false,
},
/**
......@@ -99,8 +103,29 @@ Page({
// 用户自定义函数
/*
* 更新match rank list
*/
/* 点击好友助力 */
onClickPoints: function(){
    this.setData({
      showModalPoints: true
    })
},
/* 点击barcode */
onClickBarcode: function(){
    this.setData({
      showModalBarcode: true
    })
},
  // 弹出层里面的弹窗
  ok: function () {
    this.setData({
      showModalPoints: false,
showModalBarcode: false
    })
  },
......
<view class="page">
<view class="page">
......@@ -22,11 +22,15 @@
<view class="t t2">有效期至:2020/07/31 23:59</view>
<view class="t3">
<view class="t3-left">好友助力:助力10人,共4积分</view>
<view class="t3-right"><image src="../../../icon/my/points-detail.png"></image></view>
<view class="t3-right" bindtap="onClickPoints">
<image src="../../../icon/my/points-detail.png"></image>
</view>
</view>
<view class="t4">
<view class="t4-left">优惠券码:264669616164</view>
<view class="t4-right"><image src="../../../icon/my/barcode.png"></image></view>
<view class="t4-right" bindtap="onClickBarcode">
<image src="../../../icon/my/logo-barcode.png"></image>
</view>
</view>
</view>
</view>
......@@ -42,6 +46,54 @@
</view>
</view>
<!-- 查看好友助力-->
<!-- 微信小程序自定义弹框 https://blog.csdn.net/qq_39702981/article/details/85104827 -->
<!-- 微信小程序自定义弹框 https://blog.csdn.net/qq_39702981/article/details/85320926 -->
<!-- start 遮罩层 -->
<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModalPoints}}"></view>
<!-- 弹出层 -->
<view class="modalDlg" wx:if="{{showModalPoints}}">
<!-- 二维码或其他图片 -->
<view class="title">
<text style="color:#666666">助力清单</text>
</view>
<view class="title-right" bindtap="ok">
<image src="../../../icon/close.png"></image>
</view>
<view class="list-point">
<view class="text">Jerry Su助力2积分</view>
<view class="text">小屋助力2积分</view>
<view class="text">zsy助力1.2积分</view>
</view>
</view>
<!-- end 遮罩层 -->
<!-- 查看优惠券码-->
<!-- 微信小程序自定义弹框 https://blog.csdn.net/qq_39702981/article/details/85104827 -->
<!-- 微信小程序自定义弹框 https://blog.csdn.net/qq_39702981/article/details/85320926 -->
<!-- start 遮罩层 -->
<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModalBarcode}}"></view>
<!-- 弹出层 -->
<view class="modalDlg" style="height: 420rpx;" wx:if="{{showModalBarcode}}">
<!-- 二维码或其他图片 -->
<view class="title">
<text style="color:#666666">请扫描以下券码验券 </text>
</view>
<view class="title-right" bindtap="ok">
<image src="../../../icon/close.png"></image>
</view>
<view class="list-barcode">
<view class="text">券码:0425 5158 3573</view>
<image src="../../../icon/my/barcode.png"></image>
</view>
<view class="list-barcode-image">
</view>
</view>
<!-- end 遮罩层 -->
</view>
\ No newline at end of file
.page{
.page{
......@@ -57,7 +57,7 @@
width: 40rpx;
height: 40rpx;
font-size: 0;
}
}
.coupon-right .t{text-align: center}
.coupon-right .t1{font-size: 40rpx; padding: 30rpx 0 10rpx 0;}
......@@ -77,3 +77,134 @@
.stamp04{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 30rpx, #D24161 30rpx);background-size:10rpx 10rpx;background-position:9rpx 3rpx; background: #50ADD3 }
.stamp05{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 30rpx, #D24161 30rpx);background-size:10rpx 10rpx;background-position:9rpx 3rpx; background: #f0229b}
.stamp05{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 30rpx, #D24161 30rpx);background-size:10rpx 10rpx;background-position:9rpx 3rpx; background: #f0229b}
/* start - 小程序自定义弹框css */
/* 遮罩层 */
.mask{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
z-index: 9000;
opacity: 0.5;
}
/* 弹出层 */
.modalDlg{
width: 80%;
height: 360rpx;
position: relative;
top: 0px;
left: 0;
right: 0;
z-index: 9999;
margin: 0 auto;
background-color: #fff;
border-radius:5px;
display: flex;
flex-direction: column;
align-items: center;
}
/* 弹出层里面的图片 */
/* 弹出层里面的文字 */
.title{
display: flex;
font-size: 38rpx;
color: #cccccc;
width: 80%;
height: 80rpx;
padding: 20rpx;
align-items: center;
justify-content: center;
}
.title-right{
display: flex;
height: 80rpx;
position: absolute;
align-items: center;
text-align: right;
font-size: 38rpx;
color: #cccccc;
padding: 20rpx;
right: 20rpx;
}
.title-right image{
width: 50rpx;
height: 50rpx;
font-size: 0;
}
/* 图片+文字 */
.weui-width{
width: 80%;
}
.placeholder-modal{
margin: 0px;
text-align: center;
vertical-align: middle;
line-height: 2.3em;
background-color: #fff;
}
/* 好友助力积分列表 */
.list-point{
width: 100%;
height: 2rpx;
background: #ccc;
font-size: 32rpx;
display: flex;
flex-direction: column;
/* align-items: center; */
left: 40rpx;
}
.list-point .text{
margin-left: 160rpx;
}
.title-right image{
width: 50rpx;
height: 50rpx;
font-size: 0;
}
/* barcode券码查看 */
.list-barcode{
width: 100%;
height: 2rpx;
background: #ccc;
font-size: 32rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.list-barcode .text{
align-items: center;
}
.list-barcode image{
overflow: visible;
width: 240rpx;
height: 240rpx;
}
/* 弹出层里面的按钮 */
.ok{
width: 100%;
height: 2rpx;
background: #ccc;
text-align: center;
font-size: 38rpx;
color: #666666;
}
/* end - 小程序自定义弹框css */
{
{
......@@ -18,7 +18,7 @@
"disablePlugins": [],
"outputPath": ""
},
"useCompilerModule": true,
"useCompilerModule": false,
"userConfirmedUseCompilerModuleSwitch": false
},
"compileType": "miniprogram",
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论