锶源昆仑会员+体验官
This commit is contained in:
275
pages/sign/index.js
Normal file
275
pages/sign/index.js
Normal file
@@ -0,0 +1,275 @@
|
||||
/*
|
||||
* 手太欠
|
||||
* 愿这世界都如故事里一样 美好而动人~
|
||||
*/
|
||||
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
base : '', //时间
|
||||
calendar: [], //日历
|
||||
userInfo: '', //用户名
|
||||
userHead: '', //用户名头像
|
||||
userCode: '', //二维码
|
||||
qrcode : '', //小程序码
|
||||
waterText: '', //获得水滴数
|
||||
posterState: false //海报弹出
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
// 获取日历信息
|
||||
this.signInfo();
|
||||
|
||||
// 获取打卡背景
|
||||
this.posterInfo();
|
||||
|
||||
// 获取小程序码
|
||||
this.ShareInfo();
|
||||
},
|
||||
|
||||
/**
|
||||
* 小程序码
|
||||
*/
|
||||
ShareInfo() {
|
||||
wx.$api.user.miniShare({
|
||||
url: '/pages/login/index'
|
||||
}).then(res => {
|
||||
this.setData({
|
||||
qrcode: res.data.qrcode
|
||||
})
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
/**
|
||||
* 打卡背景
|
||||
*/
|
||||
posterInfo() {
|
||||
wx.$api.index.poster().then(res => {
|
||||
this.setData({
|
||||
userInfo: res.data
|
||||
})
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
/**
|
||||
* 日历信息
|
||||
*/
|
||||
signInfo (){
|
||||
wx.$api.index.calendar().then(res => {
|
||||
this.setData({
|
||||
base : res.data.base,
|
||||
calendar: res.data.calendar
|
||||
})
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户签到
|
||||
*/
|
||||
signClick (){
|
||||
wx.$api.index.sign().then(res => {
|
||||
this.setData({
|
||||
waterText: res.data,
|
||||
posterState: true
|
||||
})
|
||||
// 获取日历信息
|
||||
this.signInfo();
|
||||
// 获取打卡背景
|
||||
this.posterInfo();
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户补签
|
||||
*/
|
||||
replenishClick (val){
|
||||
wx.$api.index.replenish({date:val.currentTarget.dataset.today}).then(res => {
|
||||
wx.showToast({
|
||||
title: '补签成功',
|
||||
icon: "none"
|
||||
})
|
||||
setTimeout(()=>{
|
||||
this.setData({
|
||||
waterText: res.data,
|
||||
posterState: true
|
||||
})
|
||||
// 获取日历信息
|
||||
this.signInfo();
|
||||
// 获取打卡背景
|
||||
this.posterInfo();
|
||||
},3000)
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
/**
|
||||
* 海报样式 保存图片到本地
|
||||
*/
|
||||
saveImg(){
|
||||
this.dowImg();
|
||||
this.setData({
|
||||
posterState: false
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 海报样式
|
||||
*/
|
||||
dowImg(){
|
||||
wx.showLoading({
|
||||
title: '生成中',
|
||||
mask : true
|
||||
})
|
||||
|
||||
// 下载背景
|
||||
let downImg = new Promise(success=>{
|
||||
wx.getImageInfo({
|
||||
src : this.data.userInfo.banner.cover,
|
||||
success : res => {
|
||||
success(res.path)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// 下载头像
|
||||
let codeImg = new Promise(success=>{
|
||||
wx.getImageInfo({
|
||||
src : this.data.userInfo.user.avatar,
|
||||
success : res => {
|
||||
success(res.path)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// 下载小程序码
|
||||
let qrcodeImg = new Promise(success=>{
|
||||
wx.getImageInfo({
|
||||
src : this.data.qrcode,
|
||||
success : res => {
|
||||
success(res.path)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
Promise.all([downImg, codeImg, qrcodeImg]).then(res => {
|
||||
// 绘制海报
|
||||
const ctx = wx.createCanvasContext('qrcodeCard')
|
||||
ctx.save()
|
||||
|
||||
// 白色底
|
||||
ctx.setFillStyle('#ffffff')
|
||||
ctx.fillRect(0, 0, 340, 600)
|
||||
|
||||
// 绘制打卡背景
|
||||
ctx.drawImage(res[0], 0, 0, 340, 450)
|
||||
|
||||
// 头像
|
||||
ctx.drawImage(res[1], 20, 20, 60, 60)
|
||||
|
||||
// 日期
|
||||
ctx.setFontSize(24)
|
||||
ctx.setFillStyle("#ffffff")
|
||||
ctx.fillText(this.data.userInfo.time.day, 280, 48 , 150)
|
||||
|
||||
// 月份
|
||||
ctx.setFontSize(16)
|
||||
ctx.setFillStyle("#ffffff")
|
||||
ctx.fillText(this.data.userInfo.time.yearMonth, 260, 70 , 150)
|
||||
|
||||
// 时间
|
||||
ctx.setFontSize(28)
|
||||
ctx.setFillStyle("#ffffff")
|
||||
ctx.fillText(this.data.userInfo.time.time, 20, 430 , 150)
|
||||
|
||||
// 农历
|
||||
ctx.setFontSize(18)
|
||||
ctx.setFillStyle("#ffffff")
|
||||
ctx.setTextAlign('left')
|
||||
ctx.fillText(this.data.userInfo.time.lunar, 210, 425 , 380)
|
||||
|
||||
// 用户名
|
||||
ctx.setFontSize(20)
|
||||
ctx.setFillStyle("#000000")
|
||||
ctx.fillText(this.data.userInfo.user.nickname, 20, 490 , 340)
|
||||
|
||||
// 打卡天数
|
||||
ctx.setFontSize(13)
|
||||
ctx.setFillStyle("#000000")
|
||||
ctx.fillText(this.data.waterText, 20, 515 , 340)
|
||||
|
||||
// 上善若水
|
||||
ctx.setFontSize(16)
|
||||
ctx.setFillStyle("#ba9963")
|
||||
ctx.fillText("上善若水", 20, 555 , 340)
|
||||
|
||||
// 利万物而不争
|
||||
ctx.setFontSize(16)
|
||||
ctx.setFillStyle("#ba9963")
|
||||
ctx.fillText("利万物而不争", 20, 580 , 340)
|
||||
|
||||
// 二维码
|
||||
ctx.drawImage(res[2], 215, 465, 110, 110)
|
||||
|
||||
// 保存图片
|
||||
ctx.draw(true, () => {
|
||||
wx.hideLoading()
|
||||
wx.canvasToTempFilePath({
|
||||
canvasId: 'qrcodeCard',
|
||||
x: 0,
|
||||
y: 0,
|
||||
success: res => {
|
||||
wx.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success : res=>{
|
||||
wx.showToast({
|
||||
title: '分享海报已保存至相册',
|
||||
icon : 'none'
|
||||
})
|
||||
},
|
||||
fail : err=>{
|
||||
wx.showModal({
|
||||
title : '提示',
|
||||
content : '暂未授权小程序写入您的相册，无法存储二维码海报',
|
||||
confirmColor: '#d82526',
|
||||
confirmText : '去设置',
|
||||
success : info=>{
|
||||
if (info.confirm){
|
||||
wx.openSetting()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
complete: e => {}
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
}).catch(err=>{
|
||||
wx.showToast({
|
||||
title: '海报下载，请检查网络',
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭海报
|
||||
*/
|
||||
posterHide() {
|
||||
this.setData({
|
||||
posterState: false
|
||||
})
|
||||
}
|
||||
})
|
||||
4
pages/sign/index.json
Normal file
4
pages/sign/index.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "喝水打卡"
|
||||
}
|
||||
107
pages/sign/index.wxml
Normal file
107
pages/sign/index.wxml
Normal file
@@ -0,0 +1,107 @@
|
||||
<view class="sign-top">
|
||||
<image class="sign-head" src="{{userInfo.user.avatar ? userInfo.user.avatar : '../../static/imgs/default_myHead.png'}}" mode="aspectFill"></image>
|
||||
<view class="sign-text">
|
||||
<view class="sign-tilte">
|
||||
已连续打卡<text>{{base.continue}}</text>天
|
||||
</view>
|
||||
<view class="sign-tips">
|
||||
养成每天喝水打卡好习惯~
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="sign-calendar">
|
||||
<view class="calendar-cont">
|
||||
<view class="calendar-title">
|
||||
<image src="/static/icons/sign_tips.png" mode="widthFix"></image>连续打卡30天，可上传报告
|
||||
</view>
|
||||
<view class="signDate">
|
||||
<view class="date">
|
||||
{{base.month}}
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="week">
|
||||
<view class="week-label">
|
||||
日
|
||||
</view>
|
||||
<view class="week-label">
|
||||
一
|
||||
</view>
|
||||
<view class="week-label">
|
||||
二
|
||||
</view>
|
||||
<view class="week-label">
|
||||
三
|
||||
</view>
|
||||
<view class="week-label">
|
||||
四
|
||||
</view>
|
||||
<view class="week-label">
|
||||
五
|
||||
</view>
|
||||
<view class="week-label">
|
||||
六
|
||||
</view>
|
||||
</view>
|
||||
<view class="day" wx:for="{{calendar}}" wx:key="calendar">
|
||||
<view class="day-label" wx:for="{{item}}" wx:key="items" wx:for-item="items">
|
||||
<view class="label-block repair" wx:if="{{items.canReSign}}" bindtap="replenishClick" data-today="{{items.today}}">补</view>
|
||||
<view class="label-block success" wx:elif="{{items.canSign}}">打</view>
|
||||
<view class="label-block {{items.isSign ? 'active' : ''}}" wx:else>{{items.day}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="signBtn">
|
||||
<view class="btn active" wx:if="{{base.isSign}}">
|
||||
今日已打卡
|
||||
</view>
|
||||
<view class="btn" bindtap="signClick" wx:else>
|
||||
今日打卡
|
||||
</view>
|
||||
<view class="tips">
|
||||
{{ base.isSign ? '今日已打卡' : '今日还未打卡'}} - 打卡天数累计 {{base.total}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 海报canvas -->
|
||||
<canvas class="canvasImg" canvas-id="qrcodeCard"></canvas>
|
||||
|
||||
<!-- 海报弹出 -->
|
||||
<view class="posterPop {{posterState ? 'active' : ''}}"></view>
|
||||
<view class="posterCont {{posterState ? 'active' : ''}}">
|
||||
<image class="posterCont-back" src="{{userInfo.banner.cover}}" mode="aspectFill"></image>
|
||||
<view class="posterCont-user">
|
||||
<image class="posterCont-avatar" src="{{userInfo.user.avatar ? userInfo.user.avatar : '../../static/imgs/default_myHead.png'}}"></image>
|
||||
<view class="date">
|
||||
<view class="date-day">{{userInfo.time.day}}</view>
|
||||
<view class="date-year">{{userInfo.time.yearMonth}}</view>
|
||||
</view>
|
||||
<view class="date-time">
|
||||
<text>{{userInfo.time.time}}</text>
|
||||
<view class="date-lunar">{{userInfo.time.lunar}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="other">
|
||||
<view class="other-top">
|
||||
<view class="other-name">{{userInfo.user.nickname}}</view>
|
||||
<view class="other-text">{{waterText}}</view>
|
||||
</view>
|
||||
<view class="other-tips">
|
||||
<text>上善若水</text>
|
||||
<text>利万物而不争</text>
|
||||
</view>
|
||||
<image class="code-img" src="{{qrcode}}"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="sign-img-block {{posterState ? 'active' : ''}}">
|
||||
<view class="sign-img-btn">
|
||||
<view class="sign-img-go" bindtap="posterHide">关闭打卡海报</view>
|
||||
<navigator hover-class="none" url="./write/index" class="sign-img-go">填写效果反馈</navigator>
|
||||
</view>
|
||||
<view class="sign-img-down" bindtap="saveImg">
|
||||
下载海报
|
||||
</view>
|
||||
</view>
|
||||
510
pages/sign/index.wxss
Normal file
510
pages/sign/index.wxss
Normal file
@@ -0,0 +1,510 @@
|
||||
page {
|
||||
background-color: #f5f6fa;
|
||||
}
|
||||
|
||||
.sign-top {
|
||||
background-color: #393f58;
|
||||
height: 240rpx;
|
||||
padding: 40rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0 0 150rpx 150rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sign-head {
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid #FFFFFF;
|
||||
}
|
||||
|
||||
.sign-text {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
padding: 50rpx 40rpx 40rpx 190rpx;
|
||||
box-sizing: border-box;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.sign-tilte {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.sign-tilte text {
|
||||
color: #f9d093;
|
||||
padding: 0 5rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sign-tips {
|
||||
color: #b3b8c9;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.sign-day {
|
||||
padding-top: 20rpx;
|
||||
display: flex;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.sign-day-label {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
line-height: 42rpx;
|
||||
color: #b3b8c9;
|
||||
border: 2rpx solid #b3b8c9;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.sign-calendar {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
top: -80rpx;
|
||||
left: 0;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.calendar-cont {
|
||||
padding: 40rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
}
|
||||
|
||||
.calendar-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 40rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.calendar-title image {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.date {
|
||||
text-align: center;
|
||||
font-size: 38rpx;
|
||||
margin-bottom: 30rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.week {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.week-label {
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
width: 14.28%;
|
||||
margin: 15rpx 0;
|
||||
color: #878b97;
|
||||
border-bottom: 2rpx solid #ebecf4;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.day {
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.day-label {
|
||||
width: 14.28%;
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.label-block {
|
||||
display: inline-block;
|
||||
background-color: transparent;
|
||||
border-radius: 50%;
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
text-align: center;
|
||||
border: 2rpx solid transparent;
|
||||
}
|
||||
|
||||
.label-block.active {
|
||||
border: 2rpx solid transparent;
|
||||
background-color: #1d37e2;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.label-block.repair {
|
||||
color: #9d9d9d;
|
||||
font-size: 30rpx;
|
||||
border: 2rpx solid #9d9d9d;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.label-block.success {
|
||||
color: #1d37e2;
|
||||
font-size: 30rpx;
|
||||
border: 2rpx solid #1d37e2;
|
||||
}
|
||||
|
||||
.signBtn {
|
||||
padding: 60rpx 30rpx 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color: #1d37e2;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
border-radius: 10rpx;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
|
||||
.btn.active {
|
||||
background-color: #ededed;
|
||||
color: #878b97;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin-top: 20rpx;
|
||||
text-align: center;
|
||||
color: #878b97;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.tips text {
|
||||
color: #eb504c;
|
||||
padding-left: 5rpx;
|
||||
}
|
||||
|
||||
.postertBack {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
background-color: rgba(0, 0, 0, .6);
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 90;
|
||||
}
|
||||
|
||||
.postert {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.sign-btn {
|
||||
position: absolute;
|
||||
top: 80vh;
|
||||
width: 80%;
|
||||
left: 10%;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
width: 100%;
|
||||
line-height: 90rpx;
|
||||
background-color: #bf9960;
|
||||
color: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
margin-top: 20rpx;
|
||||
text-align: center;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.poster-Cont {
|
||||
width: 80vw;
|
||||
height: 74vh;
|
||||
top: 5vh;
|
||||
left: 10vw;
|
||||
position: absolute;
|
||||
background-color: #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.poster-Cont-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.poster-Back {
|
||||
width: 100%;
|
||||
height: 68%;
|
||||
}
|
||||
|
||||
.poster-head {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
top: 55rpx;
|
||||
left: 55rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.poster-time {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: 40rpx;
|
||||
right: 50rpx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.poster-time-month {
|
||||
font-size: 52rpx;
|
||||
font-weight: 600;
|
||||
text-shadow: 0 2rpx 3rpx rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.poster-time-year {
|
||||
font-size: 30rpx;
|
||||
text-shadow: 0 2rpx 3rpx rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.poster-hour {
|
||||
width: calc(100% - 100rpx);
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: 55%;
|
||||
left: 50rpx;
|
||||
line-height: 100rpx;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.poster-time-branch {
|
||||
flex: 1;
|
||||
font-size: 58rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.poster-text {
|
||||
padding: 20rpx 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: 600;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.day {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.day text {
|
||||
color: #bf9960;
|
||||
padding: 0 5rpx;
|
||||
}
|
||||
|
||||
.poster-tips {
|
||||
font-size: 36rpx;
|
||||
color: #bf9960;
|
||||
}
|
||||
|
||||
.poster-tips-text {
|
||||
position: relative;
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
|
||||
.poster-tips-text::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
background-color: #bf9960;
|
||||
transform: rotate(45deg);
|
||||
left: 0;
|
||||
top: calc(50% - 6rpx);
|
||||
}
|
||||
|
||||
.poster-code {
|
||||
position: absolute;
|
||||
bottom: 30rpx;
|
||||
right: 30rpx;
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/* canvas */
|
||||
.canvasImg {
|
||||
position: absolute;
|
||||
left: -1000%;
|
||||
height: 600px;
|
||||
width: 340px;
|
||||
}
|
||||
.posterPop {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, .4);
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.posterPop.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.posterCont {
|
||||
width: 80vw;
|
||||
height: 60vh;
|
||||
top: 10vh;
|
||||
left: 10vw;
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
padding: 30rpx;
|
||||
background-color: #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.posterCont.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.posterCont-back {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.posterCont-user {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.posterCont-avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.date {
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 30rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.date-day {
|
||||
font-weight: 600;
|
||||
font-size: 42rpx;
|
||||
}
|
||||
|
||||
.date-year {
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.date-time {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
padding: 20rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.date-time text {
|
||||
flex: 1;
|
||||
display: block;
|
||||
font-size: 42rpx;
|
||||
}
|
||||
|
||||
.other {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 70%;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.other-top {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.other-name {
|
||||
font-weight: 600;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.other-text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.other-tips text {
|
||||
display: block;
|
||||
color: #ba9963;
|
||||
font-size: 30rpx;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.code-img {
|
||||
position: absolute;
|
||||
right: 10rpx;
|
||||
bottom: 30rpx;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
|
||||
/* 海报弹出 */
|
||||
.sign-img-block {
|
||||
position: fixed;
|
||||
top: 72vh;
|
||||
left: calc(10vw - 10rpx);
|
||||
z-index: 1000;
|
||||
width: calc(80vw + 20rpx);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sign-img-block.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sign-img-btn {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sign-img-go {
|
||||
background-color: #FFFFFF;
|
||||
flex: 2;
|
||||
margin: 0 10rpx;
|
||||
border-radius: 10rpx;
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sign-img-down {
|
||||
background-color: #ba9963;
|
||||
margin: 30rpx 10rpx 0;
|
||||
text-align: center;
|
||||
border-radius: 10rpx;
|
||||
line-height: 90rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
28
pages/sign/write/index.js
Normal file
28
pages/sign/write/index.js
Normal file
@@ -0,0 +1,28 @@
|
||||
/*
|
||||
* 手太欠
|
||||
* 愿这世界都如故事里一样 美好而动人~
|
||||
*/
|
||||
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
},
|
||||
})
|
||||
3
pages/sign/write/index.json
Normal file
3
pages/sign/write/index.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
40
pages/sign/write/index.wxml
Normal file
40
pages/sign/write/index.wxml
Normal file
@@ -0,0 +1,40 @@
|
||||
<form bindsubmit="writeform" class="site-form">
|
||||
<view class="issue-block">
|
||||
<view class="issue-textarea">
|
||||
<textarea placeholder="请输入您要发布的内容~" name="content"></textarea>
|
||||
</view>
|
||||
<view class="album-list">
|
||||
<view class="album-list-li" wx:for="{{albumArr}}" key:key="albumArr">
|
||||
<image class="album-list-img" src="{{item.showpath}}" mode="aspectFill" bindtap="openImg" data-index="{{index}}"></image>
|
||||
<view class="album-remove" bindtap="removeImg" data-index="{{index}}">删除</view>
|
||||
</view>
|
||||
<view class="album-list-li">
|
||||
<view class="album-list-li-add" bindtap="addAlbum">
|
||||
<image class="album-list-add-icon" src="/static/icons/circle_add.png"></image>
|
||||
<view>添加</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="site-btn">
|
||||
<button form-type="submit" size="mini" disabled="{{disabled}}">立即发布</button>
|
||||
</view>
|
||||
</form>
|
||||
|
||||
<!-- 提示弹出框 start -->
|
||||
<view class="publicBack {{popStatus ? 'active' : ''}}"></view>
|
||||
<view class="publicPop {{popStatus ? 'active' : ''}}">
|
||||
<view class="publicPop-cont">
|
||||
<image class="publicPop-img" src="/static/imgs/Water_drop.png" mode="widthFix"></image>
|
||||
<view class="publicPop-text">
|
||||
<view class="number">+5</view>
|
||||
<text>水滴</text>
|
||||
</view>
|
||||
<image class="publicPop-left publicPop-right" src="/static/imgs/Water_img.png" mode="widthFix"></image>
|
||||
<view class="publicPop-tips">
|
||||
<image src="/static/imgs/Water_icon.png" mode="widthFix"></image>水滴已发放!
|
||||
</view>
|
||||
<image class="publicPop-left" src="/static/imgs/Water_img.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<image src="/static/icons/waterPop_close.png" mode="widthFix" class="publicPop-close" bindtap="knowClick"></image>
|
||||
</view>
|
||||
182
pages/sign/write/index.wxss
Normal file
182
pages/sign/write/index.wxss
Normal file
@@ -0,0 +1,182 @@
|
||||
page {
|
||||
background-color: #f5f5f5;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.issue-block {
|
||||
background: white;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.issue-textarea textarea {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
.album-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.album-list-li {
|
||||
margin-right: 10rpx;
|
||||
position: relative;
|
||||
width: calc(25% - 10rpx);
|
||||
padding-top: calc(25% - 10rpx);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.album-list-li:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.album-list-img,
|
||||
.album-list-li-add {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f5f5f5;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.album-list-li-add {
|
||||
text-align: center;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-pack: center;
|
||||
color: #666;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.album-list-add-icon {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
}
|
||||
|
||||
.album-remove {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
color: white;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
line-height: 50rpx;
|
||||
width: 100%;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.site-btn {
|
||||
margin-top: 120rpx;
|
||||
}
|
||||
|
||||
.site-btn button[size="mini"] {
|
||||
width: 100%;
|
||||
background: #1d37e2;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
font-size: 30rpx;
|
||||
color: white;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.site-btn button[disabled] {
|
||||
background: #7789ff !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* 获得水滴弹出层提示 */
|
||||
.publicBack {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.publicPop {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 440rpx;
|
||||
height: 300rpx;
|
||||
margin-left: -220rpx;
|
||||
margin-top: -200rpx;
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
background-color: #ffffff;
|
||||
border-radius: 30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.publicPop-close {
|
||||
position: absolute;
|
||||
top: -20rpx;
|
||||
right: -20rpx;
|
||||
z-index: 102;
|
||||
width: 54rpx;
|
||||
height: 54rpx;
|
||||
}
|
||||
|
||||
.publicPop-img {
|
||||
width: 70%;
|
||||
margin: -30rpx auto 0;
|
||||
}
|
||||
|
||||
.publicPop-text {
|
||||
padding-bottom: 20rpx;
|
||||
box-sizing: border-box;
|
||||
font-weight: 600;
|
||||
color: #e56653;
|
||||
padding-top: 40rpx;
|
||||
}
|
||||
|
||||
.number {
|
||||
font-size: 72rpx;
|
||||
display: inline-block;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
|
||||
.publicPop-text text {
|
||||
font-size: 36rpx;
|
||||
display: inline-block;
|
||||
line-height: 86rpx;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.publicPop-tips {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #fdfae7;
|
||||
color: #e6a950;
|
||||
line-height: 80rpx;
|
||||
font-weight: 600;
|
||||
border-top: 2rpx solid #f6ede6;
|
||||
border-radius: 0 0 30rpx 30rpx;
|
||||
}
|
||||
|
||||
.publicPop-tips image {
|
||||
width: 54rpx;
|
||||
height: 54rpx;
|
||||
vertical-align: -14rpx;
|
||||
}
|
||||
|
||||
.publicPop-left {
|
||||
width: 90rpx;
|
||||
position: absolute;
|
||||
top: 46%;
|
||||
right: 2rpx;
|
||||
}
|
||||
|
||||
.publicPop-right {
|
||||
transform: rotate(180deg);
|
||||
left: 2rpx;
|
||||
}
|
||||
Reference in New Issue
Block a user