Commit 2361549e by jscat

nyx weapp, 主流程

1. 添加竞答创建流程
2. 在竞答活动里添加clone功能
parent a7f26c3b
{
{
{
"pages": [
"pages/member/activity-post/activity-submit/activity-submit",
"pages/member/activity-post/activity-edit/activity-edit",
"pages/activity/activity",
"pages/activity/activity",
"pages/my/my-members/my-members",
"pages/member/activity-post/activity-submit/activity-submit",
"pages/member/activity-post/activity-edit/activity-edit",
"pages/member/quiz-post/quiz-edit/quiz-edit",
"pages/mall/order/order",
"pages/key/key",
"pages/member/schedule/schedule",
"pages/member/activity-post/activity-post",
"pages/activity/quiz-result/quiz-result",
"pages/activity/quiz-info/quiz-info",
"pages/activity/activity-info/activity-info",
"pages/activity/act-address/act-address",
"pages/activity/act-writer/act-writer",
"pages/my/my",
"pages/key/matchTest/matchTest",
"pages/my/my-members/my-members",
"pages/my/my-points/my-points",
"pages/my/my-orders/my-orders",
"pages/my/user/user",
"pages/logs/logs",
"pages/post/post",
"pages/post/edit/edit",
"pages/post/submit/submit"
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
......
// pages/index/note-info/note-info.js
// pages/index/note-info/note-info.js
......@@ -182,5 +182,15 @@ Page({
});
},
//点击clone后跳转至竞答创建页面
onClickClone: function (e) {
var _this = this;
var url = "/pages/member/quiz-post/quiz-post?"
+ "&activity_id=" + "aid_123"
wx.navigateTo({
url: url
});
},
})
\ No newline at end of file
<view class="page">
<view class="page">
......@@ -15,7 +15,7 @@
<view class="clone">
<view class="clone-left">{{quiz.member_name}} {{quiz.title}}</view>
<view class="clone-right" bindtap="onClickPoints" data-id='{{index}}'>
<view class="clone-right" bindtap="onClickClone" data-id='{{index}}'>
<view class="note-column" style="font-size: 24rpx;font-weight:normal;">
<image src="../../../icon/activity/clone.png"></image>
克隆
......
// pages/member/quiz-post/quiz-edit/quiz-edit.js
// pages/member/quiz-post/quiz-edit/quiz-edit.js
var config = wx.getStorageSync("config");
var app = getApp();
var log = require('./../../../../utils/log.js')
var util = require('./../../../../utils/util.js')
Page({
data: {
quizInfo : {
questionId : "qid_001",
questionName : "今天一起去看流星雨",
answer : "2",
choiceString : [
"仙女座",
"英仙座",
"猎户座",
"狮子座",
]
},
//阿里云 OSS相关参数
accessid: "",
policy: "",
signature: "",
host: "",
dir: "",
expire: "",
securityToken: "",
},
onLoad: function () {
var that = this;
wx.getSystemInfo({
success: function (res) {
var a = res.windowHeight;
that.setData({
scrollTop: a-200
})
}
})
},
onReady: function (e) {
var _this = this;
//进入页面就自动获取oss参数
_this.oss();
},
// Page Flow
navigateToSubmit() {
let promise = app.onCheckText(app.globalData.postData.photoTag)
//在本轮event loop(事件循环)运行完成之前,回调函数是不会被调用的
//then后的括号里应该是参数param
//https://www.cnblogs.com/qlongbg/p/11603328.html
promise.then(function (value) {
console.log("===enter promise then_pass_" + value)
wx.navigateTo({ url: './../quiz-submit/quiz-submit' })
},
function (value) {
console.log("===enter promise then_failed_" + value)
},);
},
// Date Flow
// 输入该组图片的标签
bindKeyInput(e) {
var _this = this;
_this.setData({
inputValue: e.detail.value
})
//全局赋值
app.globalData.postData.photoTag = e.detail.value
},
addList: function(){
var _this = this;
var quizInfo = _this.data.quizInfo;
var newData = "白羊座";
quizInfo.choiceString.push(newData);//实质是添加lists数组内容,使for循环多一次
this.setData({
quizInfo: quizInfo,
})
},
delList: function (e) {
var _this = this;
var dataId = e.currentTarget.dataset.id
var quizInfo = _this.data.quizInfo;
quizInfo.choiceString.splice( dataId,1);
this.setData({
quizInfo: quizInfo,
})
},
switchTab() {
//跳转到/activity.wxml页面
app.globalData.switchId = 0
wx.switchTab({
url: '/pages/activity/activity'
});
},
// start of aliyun oss
// Date Flow
// 提交oss和数据库
onSubmitPost: function (e) {
var _this = this;
var title = e.detail.value.inputTitle;//获取title
var content = e.detail.value.inputContent;//获取content
app.globalData.postData.title = title
app.globalData.postData.content = content
if (content != undefined && content != "") {
//step1, 上传至oss-获取token,在onReady()提前准备
//_this.oss();
//step2, 判断文本是否合规
let promise = app.onCheckText(title+content)
//在本轮event loop(事件循环)运行完成之前,回调函数是不会被调用的
//then后的括号里应该是参数param
//https://www.cnblogs.com/qlongbg/p/11603328.html
promise.then(function (value) {
console.log("===enter promise then_pass_" + value)
//step3, 上传至oss-上传图片
//_this.releaseOss(title, content);
_this.switchTab()
},
function (value) {
console.log("===enter promise then_failed_" + value)
});
//step4, 上传信息到数据库
//上传数据库在oss sdk的callback函数里设置
//需要java后台支持
}
},
oss: function () {
var _this = this;
console.log("===this is oss");
//token信息
var strUrl = config.oss_token_url + "?tokenName=ios&userName=1234"
wx.request({
url: strUrl,
method: 'GET',
header: {
'content-type': 'application/json'
},
success: res => {
if (res.statusCode == 200) {
console.log("=== oss getToken 返回值_", res.data)
_this.setData({
accessid: res.data.data.accessid,
policy: res.data.data.policy,
signature: res.data.data.signature,
host: res.data.data.host,
dir: res.data.data.dir,
expire: res.data.data.expire,
securityToken: res.data.data.securityToken,
})
}
}
})
},
//上传照片(阿里云)
uploadAli: function (tag, title, content, photoArr) {
var _this = this;
console.log("===uploadAli_data_tag: ",tag)
console.log("===uploadAli_data_title: ",title)
console.log("===uploadAli_data_content: ",content)
console.log("===uploadAli_data_photoArr: ",photoArr)
var promise = Promise.all(photoArr.map((pic, index) => {
//pic是多图上传模式中的单张图片 index => 0 : length-1
console.log(pic)
//传给阿里云的参数
var policy = this.data.policy;
var accessid = this.data.accessid;
var securityToken = this.data.securityToken;
var signature = this.data.signature;
var path = this.data.host + "/" + this.data.dir;
console.log("policy: " + policy);
console.log("signature: " + signature);
console.log("accessid: " + accessid);
console.log("path: " + path)
var babyData = {
'Filename': '${filename}',
'name': pic.replace('http://tmp/', "").replace('wxfile://', ""),
'key': this.data.dir + '${filename}',
'policy': policy,
'OSSAccessKeyId': accessid,
'success_action_status': '200', //让服务端返回200,不然,默认会返回204
'signature': signature,
'x-oss-security-token': securityToken
}
// 多图n上传流程,通过promise.all实现异步控制
// n-1图直接上传
// 第n图上传+设置callback,在java后台提交参数到数据库
if (index == photoArr.length - 1)
{
var photoArrsm = [];
//由于微信小程序生成的临时路径在上传阿里云的时候不需要上传.所以需要对路径进行处理,但是在手机端上传和PC端上传,图片临时路径的前缀不同,所以需要进行分别的处理
// pc: http://tmp/
// wx: wxfile://
for (let i = 0; i < photoArr.length; i++) {
photoArrsm.push(path + photoArr[i].replace('http://tmp/', "").replace('wxfile://', ""));
}
//生成最终的文件字符串 file1.jpg::file2.png (数据库解析格式)
var image = photoArrsm.join("::")
var userId = wx.getStorageSync('nyxCode')
var strUrl = config.oss_callback_url
var callback_param = {
'callbackUrl': strUrl,
'callbackBody': 'filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}&tag=' + encodeURI(encodeURI(tag)) + '&title=' + encodeURI(encodeURI(title)) + '&content=' + encodeURI(encodeURI(content)) + '&image=' + image + '&userId=' + userId,
'callbackBodyType': "application/x-www-form-urlencoded",
}
var base64_callback_body = base64.encode(JSON.stringify(callback_param));
babyData['callback'] = base64_callback_body
}
return new Promise(function (resolve, reject) {
var host = _this.data.host;
wx.uploadFile({
url: host,
formData: babyData,
name: 'file',
filePath: pic,
header: {
'content-type': 'multipart/form-data'
},
success: function (res) {
console.log("=== index_"+index)
console.log(res)
resolve(res.data);
},
fail: function (err) {
reject(new Error('failed to upload file'));
console.log("fail to upload file")
},
complete: function () {
console.log("complete to upload file");
}
});
});
})).then(_this.switchTab());
},
//发布按钮
releaseOss: function (title, content) {
var _this = this;
console.log("===this is releaseOss");
//获取照片数组
var photoArr = app.globalData.postData.photoArray;
//时间搓
var expire = this.data.expire;
//获取当前时间搓
var expireNow = Date.parse(new Date()) / 1000;
//如果当前时间大于获取的时间 则重新获取oss;
if (expire == undefined || expireNow > expire) {
//重新获取oss
_this.oss();
expire = this.data.expire;
}
var tag = app.globalData.postData.photoTag
this.uploadAli(tag, title, content, photoArr)
},
// end of aliyun oss
})
{
{
"navigationBarTitleText": "添加详情"
}
\ No newline at end of file
<!-- /page/member/quiz-post/quiz-edit/quiz-edit 添加分类的标签,以及自定义标签 -->
<!-- /page/member/quiz-post/quiz-edit/quiz-edit 添加分类的标签,以及自定义标签 -->
<wxs module="tutil" src="./../../../../utils/date.wxs"></wxs>
<view class="page" style="height:100%;width:100%">
<block>
<button type="default" bindtap="switchTab">竞答发布</button>
</block>
<view class="weui-cells__title">#添加标题</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell ">
<view class="weui-cell__bd">
<input class="weui-input" bindinput="bindKeyInput" placeholder="请输入标题" />
</view>
</view>
</view>
<view class="weui-cells__title">#添加积分</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell ">
<view class="weui-cell__bd">
<input class="weui-input" bindinput="bindKeyInput" placeholder="请输入积分" />
</view>
</view>
</view>
<view class="weui-cells__title">#添加题目</view>
<view class='table'>
<!-- 题目所在行 -->
<view class='table_header'>
<view class="th" style='width:15%;background-color:white'>
<view class='centerclass cell_label'>问题</view>
</view>
<view class='th' style='width:70%;'>
<view class="cell_label centerclass">{{quizInfo.questionName}}</view>
</view>
<view class="th" style='width:15%;background-color:white'>
<view class='centerclass cell_label'>
</view>
</view>
</view>
<!-- 选项列表 -->
<block wx:for="{{quizInfo.choiceString}}" wx:for-item="item" wx:key="{{index}}">
<view class='table_main'>
<!--类别 -->
<view class='td' style='width:15%;background-color:white;'>
<view class="cell_label centerclass">{{tutil.formatAnswer(index+1)}}</view>
</view>
<!-- 描述 -->
<view class='td'>
<view class='table_Text_last_class'>
{{item}}
</view>
</view>
<!-- start 删除新行按钮 -->
<view class="th" style='width:15%;background-color:white'>
<view class='centerclass cell_label' bindtap='delList' data-id="{{index}}">
<image src="../../../../icon/del.png" style="width: 50rpx;height: 50rpx;"></image>
</view>
</view>
<!-- end 删除新行按钮 -->
</view>
</block>
<!-- start 添加新行按钮 -->
<view class='table_header'>
<view class="th" style='width:15%;background-color:white'>
<view class='centerclass cell_label' bindtap='addList'>
<image src="../../../../icon/add.png" style="width: 50rpx;height: 50rpx;"></image>
</view>
</view>
</view>
<!-- end 添加新行按钮 -->
<!-- 答案所在行 -->
<view class='table_header'>
<view class="th" style='width:15%;background-color:white'>
<view class='centerclass cell_label'>答案</view>
</view>
<view class='th' style='width:70%;'>
<view class="cell_label centerclass">{{quizInfo.answer}}</view>
</view>
<view class="th" style='width:15%;background-color:white'>
<view class='centerclass cell_label'>
</view>
</view>
</view>
</view>
</view>
\ No newline at end of file
page{
page{
height: 100%;
background-color:#f5f8fa;
}
.post{
position: absolute;
bottom: 0;
right:0px;
}
/* 表格 */
.table{
display: inline-flex;
flex-direction: column;
border: 1rpx solid rgba(218, 217, 217, 1);
border-bottom: 0;
width: 100%;
}
.scrollClass {
display: flex;
width: 100%;
white-space: nowrap;
margin-top: 23px;
height: 100%;
background-color: white;
}
.table_header {
display: inline-flex;
}
.th {
display: flex;
flex-direction: column;
width: 70%;
height: 90rpx;
background: rgba(241, 252, 255, 1);
border-right: 1rpx solid rgba(218, 217, 217, 1);
border-bottom: 1rpx solid rgba(218, 217, 217, 1);
justify-content: center;
align-items: center;
overflow-x: auto;
}
.cell_label{
font-size: 26rpx;
color: rgba(74, 74, 74, 1);
}
.cell_date_label{
font-size: 20rpx;
color: rgba(74, 74, 74, 1);
}
.table_main {
display: inline-flex;
flex-direction: row;
}
.right-item{
display: flex;
flex-direction: row;
}
.td {
display: flex;
flex-direction: column;
width: 70%;
/* height: 90rpx; */
background: white;
justify-content: center;
align-items: center;
border: 1rpx solid rgba(218, 217, 217, 1);
border-top: 0;
border-left:0;
}
.table_Text_class {
display: flex;
justify-content: center;
align-items: center;
height: 60rpx;
font-size: 30rpx;
color: rgba(55, 134, 244, 1);
width: 100%;
word-break: normal;
border-bottom: 1rpx solid rgba(218, 217, 217, 1);
}
.table_Text_last_class{
display: flex;
justify-content: center;
align-items: center;
height: 60rpx;
font-size: 30rpx;
color: rgba(55, 134, 244, 1);
width: 100%;
word-break: normal;
}
\ No newline at end of file
// pages/member/quiz-post/quiz-post.js
// pages/member/quiz-post/quiz-post.js
var config = wx.getStorageSync("config");
var app = getApp();
var log = require('./../../../utils/log.js')
var util = require('./../../../utils/util.js')
/*
提交流程
1. post.js 生成图片的临时路径
2. edit.js 编辑标签
3. submit.js 上传阿里云oss, 将内容上传到数据库
- 获取token
- 上传oss
- 上传数据库
*/
const base64 = require('./../../../utils/base64.js');//Base64,hmac,sha1,crypto相关算法
Page({
onLoad: function () {
var that = this;
wx.getSystemInfo({
success: function (res) {
var a = res.windowHeight;
that.setData({
scrollTop: a-200
})
}
})
wx.setNavigationBarTitle({
title: '竞答创建',
})
},
data: {
photoArray: [],
sourceTypeIndex: 2,
sourceType: ['拍照', '相册', '拍照或相册'],
sizeTypeIndex: 2,
sizeType: ['压缩', '原图', '压缩或原图'],
countIndex: 8,
count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
//定义图片尺寸
imageSize: '',
},
sourceTypeChange(e) {
this.setData({
sourceTypeIndex: e.detail.value
})
},
sizeTypeChange(e) {
this.setData({
sizeTypeIndex: e.detail.value
})
},
countChange(e) {
this.setData({
countIndex: e.detail.value
})
},
//在进入页面时就执行,用于初始化
onReady: function (e) {
},
// Page Flow
navigateToEdit() {
var _this = this;
var newFilePaths = _this.data.photoArray
// let promise = app.onCheckPic(newFilePaths)
// //在本轮event loop(事件循环)运行完成之前,回调函数是不会被调用的
// //then后的括号里应该是参数param
// //https://www.cnblogs.com/qlongbg/p/11603328.html
// promise.then(function (value) {
// console.log("===checkPic_enter promise then_" + value)
// //同步更新全局变量
// app.globalData.postData.photoArray = newFilePaths
// wx.navigateTo({ url: './edit/edit' })
// });
app.globalData.postData.photoArray = newFilePaths
wx.navigateTo({ url: './quiz-edit/quiz-edit' })
},
// Date Flow
/*
step1: 选定图片,可以预览
step2: 添加描述文字,选择tag
step3: 上传
1. chooseImage
2. 进行图片编辑
3. 点击下一步验证图片是否合法合规 navigateToEdit
通过size或其他方式判断是否进行图片处理(裁切,填满,留白,充满)
1) > 2M会出现 45002, content size out of limit 错误
2) 自动裁剪成4:3 或 1:1
*/
addPhoto: function (res) {
var _this = this;
_this.setData({
photoArray: []
})
console.log("===this is addPhoto");
wx.chooseImage({
sizeType: ['original, compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
var canvasId = "photoCanvasId";
console.log("===addPhoto_上传图片参数", res)
_this.onEditPic(res, canvasId)
}
})
},
previewImage(e) {
const current = e.target.dataset.src
wx.previewImage({
current,
urls: this.data.photoArray
})
},
//保存图形的tmp地址
saveData(newFilePaths){
var _this = this;
console.log("===saveData", newFilePaths)
_this.setData({
photoArray: newFilePaths
})
app.globalData.postData.photoArray = newFilePaths;
},
//小程序图片处理主函数
editPic(tempFilePaths, index, canvasId) {
var _this = this;
var photoArray = _this.data.photoArray
if (index < tempFilePaths.length){
var pic = tempFilePaths[index]
wx.getImageInfo({
src: pic, //图片的路径,可以是相对路径,临时文件路径,存储文件路径,网络图片路径,
success: function (res) {
// util.imageUtil 用于计算长宽比
var i = index + 1
console.log("第"+i+"张上传图片参数", res)
var imageSize = util.imageUtil(res);
console.log("success on getImageInfo_"+index);
console.log(imageSize)
_this.setData({
imageSize: imageSize
})
const ctx = wx.createCanvasContext(canvasId);
//ctx.drawImage(pic, 0, 0, imageSize.swidth, imageSize.sheight);
ctx.drawImage(pic, imageSize.sx, imageSize.sy, imageSize.swidth, imageSize.sheight,
imageSize.x, imageSize.y, imageSize.width, imageSize.height);
// 需要注意的是 draw 方法是异步的,如果图片还没加载成功,有可能画出来的是空的
// 所以 draw 方法通常都会带有定时器这样的回调
ctx.draw(false, setTimeout(function () {
//ctx.draw(false, function () {
var i = index + 1
console.log("==enter draw_"+i);
wx.canvasToTempFilePath({
canvasId: canvasId,
fileType:"jpg",
success: function (res) {
console.log("===success_", res)
console.log("===第"+i+"图处理成功")
photoArray.push(res.tempFilePath)
_this.setData({
photoArray: photoArray
})
index = index + 1
_this.editPic(tempFilePaths, index, canvasId); // 用于多个图片压缩
},
fail: function (e) {
var i = index + 1
console.log("===第"+i+"图处理失败")
}
});
},1000));
//});
},
fail: function(e) {
console.log("failed", e);
},
complete: function(e) {
var i = index + 1
console.log("complete on getImageInfo_"+i, e);
}
})
}
},
// 通过size或其他方式判断是否进行图片处理(裁切,填满,留白,充满)
// 1) > 2M会出现45002, content size out of limit错误
// 2) 自动裁剪成4:3(高/宽 1080) 或 1:1 有品默认1:1
// refer1 微信小程序图片压缩 https://www.jianshu.com/p/1b8a1e96a6d5
// refer2 小程序压缩图片(canvas) https://www.jianshu.com/p/ec1f95008dce
onEditPic(res, canvasId) {
var _this = this;
var tempFilePaths = res.tempFilePaths;
var index = 0;
_this.editPic(tempFilePaths, index, canvasId)
}
})
{
{
"navigationBarTitleText": "竞答创建"
}
\ No newline at end of file
<!-- /pages/member/quiz-post/quiz-post.wxml -->
<!-- /pages/member/quiz-post/quiz-post.wxml -->
<view class="page" style="height:100%;width:100%">
<block>
<button type="default" bindtap="navigateToEdit">下一步</button>
</block>
<form>
<view class="weui-cells">
<view class="weui-cell">
<view class="weui-cell__bd">
<view class="weui-uploader">
<view class="weui-uploader__hd">
<view class="weui-uploader__title">图片上传</view>
<view class="weui-uploader__info">{{photoArray.length}}/{{count[countIndex]}}</view>
</view>
<view class="weui-uploader__bd">
<view class="weui-uploader__files">
<block wx:for="{{photoArray}}" wx:for-item="image">
<view class="weui-uploader__file">
<image class="weui-uploader__img" src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image>
</view>
</block>
</view>
<view class="weui-uploader__input-box">
<view class="weui-uploader__input" bindtap="addPhoto"></view>
</view>
</view>
</view>
</view>
</view>
</view>
</form>
<canvas canvas-id='photoCanvasId' class='myCanvas' style='width:{{imageSize.width}}px;height:{{imageSize.height}}px'>
</canvas>
</view>
\ No newline at end of file
page{
page{
height: 100vh;
background-color:#f5f8fa;
}
.banner{
position: relative;
}
.banner image{
height: 200px;
width:100%;
}
.post{
position: absolute;
bottom: 0;
right:0px;
}
.banner .play{
width: 40px;
height: 40px;
position: absolute;
bottom: 10px;
right:10px;
z-index: 10;
}
.mdetail{
overflow: hidden;
height:55px;
padding:5px 10px;
border-bottom:1px solid #dbdbdb;
}
.mdetail image{
float:left;
width:55px;
height:55px;
}
.minfo{
float:left;
margin-left:10px;
padding:10px 0;
}
.detailLeft{
float:left;
}
.detailRight{
float:right;
}
.mname{
font-size: 14px;
margin-bottom:10px;
}
.mauthor{
font-size: 12px;
color:#dbdbdb;
}
/*
隐藏 canvas,避免显示错误
*/
.myCanvas {
position: absolute;
top: -9999px;
left: -9999px;
}
<!--pages/my/my-members/my-members.wxml-->
<!--pages/my/my-members/my-members.wxml-->
......@@ -13,7 +13,7 @@
<text>活动创建</text>
</view>
<view class="items">
<navigator url="matchStudyDetail/matchStudyDetail?studyType=wset2">
<navigator url="/pages/member/quiz-post/quiz-post">
<image src="/icon/member/quiz.png"></image>
</navigator>
<text>竞答创建</text>
......
var formatTime = function (date) {
var formatTime = function (date) {
......@@ -56,6 +56,7 @@ var toFix = function (value) {
//jscat 2020/03/03 将数字1234转为ABCD
var formatAnswer = function (n) {
answer = ""
n = n.toString()
switch (n) {
case "1":
answer = "A"
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论