Skip to content

N
nyx
Commit e31b6423 by jscat
Options

nyx weapp: 模块更新 

1. 新增直播发布模块
parent 8d728f61
正在显示 包含 906 行增加 和 4 行删除
app/nyx-dev/app.json
{
"pages": [
"pages": [
"pages/live/live",
"pages/live/live-info/live-info",
"pages/live/live-info/live-info",
"pages/live/live-post/live-post",
"pages/live/live-post/live-submit/live-submit",
"pages/activity/activity",
"pages/share/share",
"pages/mall/order/order",
......@@ -49,7 +51,7 @@
"selectedIconPath": "./icon/fair/fair.png"
},
{
"pagePath": "pages/member/activity-post/activity-post",
"pagePath": "pages/live/live-post/live-post",
"text": "添加",
"iconPath": "./icon/add.png",
"selectedIconPath": "./icon/add.png"
......
app/nyx-dev/pages/live/live-post/live-post.js 0 → 100644
// pages/live/live-post/live-post.js
var config = wx.getStorageSync("config");
var app = getApp();
var log = require('./../../../utils/log.js')
var util = require('./../../../utils/util.js')
/*
提交流程
数据通过app.globalData
app.globalData.postData
photoTag: "",
photoTitle: "",
photoContent: "",
photoProduct: [],
startDatetime: "",
endDatetime: "",
1. post.js 生成图片的临时路径
2. edit.js 编辑标签
3. submit.js 上传阿里云oss， 将内容上传到数据库
- 获取token
- 上传oss
- 上传数据库
*/
const base64 = require('./../../../utils/base64.js');//Base64,hmac,sha1,crypto相关算法
Page({
data: {
photoArray: [],
sourceTypeIndex: 2,
sourceType: ['拍照', '相册', '拍照或相册'],
sizeTypeIndex: 2,
sizeType: ['压缩', '原图', '压缩或原图'],
countIndex: 8,
count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
//定义图片尺寸
imageSize: '',
//下一次被选中的记号
nextSign: 0,
// 下一步按钮可用状态
canClick: true,
},
onLoad: function () {
var _this = this;
wx.getSystemInfo({
success: function (res) {
var a = res.windowHeight;
_this.setData({
scrollTop: a-200
})
}
})
// 通过全局变量来同步本地变量local variable
// 否则本地变量会有脏数据
var photoArray = app.globalData.postData.photoArray
_this.setData({ photoArray })
},
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) {
var _this = this;
var canClick = true;
_this.setData({ canClick })
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
var _this = this;
// 通过全局变量来同步本地变量local variable
// 否则本地变量会有脏数据
var photoArray = app.globalData.postData.photoArray
_this.setData({ photoArray })
},
// Page Flow
onNavigateToEdit() {
var _this = this;
var photoArray = _this.data.photoArray
var nextSign = 1
_this.setData({ nextSign })
//先设置支付按钮不可点击
var canClick = false;
_this.setData({ canClick })
if(photoArray.length == 0) // 添加照片
{
_this.addPhoto()
}
else
{
_this.navigateToEdit()
}
},
navigateToEdit() {
var _this = this;
var newFilePaths = _this.data.photoArray
let promise_checkPic = app.onCheckPic(newFilePaths)
//在本轮event loop（事件循环）运行完成之前，回调函数是不会被调用的
//then后的括号里应该是参数param
//https://www.cnblogs.com/qlongbg/p/11603328.html
promise_checkPic.then(function (value) {
console.log("===checkPic_enter promise passed_" + value)
console.log("图片合规校验成功")
//先设置支付按钮为可点击
var canClick = true;
_this.setData({ canClick })
//离开的时候再赋值全局变量
app.globalData.postData.photoArray = newFilePaths
wx.navigateTo({ url: './live-submit/live-submit' })
},
function (value) {
console.log("===checkPic_enter promise failed_" + value)
console.log("图片合规校验失败")
});
},
// 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 () {
var _this = this;
//先设置支付按钮不可点击
var canClick = false;
var photoArray = []
_this.setData({
photoArray,
canClick
})
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)
},
fail: function(err)
{
console.log("===addPhoto failed", err.errMsg)
},
complete: function(e)
{
//无论成功与否，设置按钮可点击
var canClick = true;
_this.setData({ canClick })
}
})
},
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);
}
})
}
else //图片处理完毕
{
var nextSign = _this.data.nextSign
var photoArray = _this.data.photoArray
//设置支付按钮可点击
var canClick = true;
_this.setData({ canClick })
if(nextSign == 1)
{
_this.navigateToEdit()
}
}
},
// 通过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.setData({photoArray:[]})
_this.editPic(tempFilePaths, index, canvasId)
}
})
\ No newline at end of file
app/nyx-dev/pages/live/live-post/live-post.json 0 → 100644
{
"navigationBarTitleText": "现场创建"
}
\ No newline at end of file
app/nyx-dev/pages/live/live-post/live-post.wxml 0 → 100644
<!-- /pages/member/live-post/live-post.wxml -->
<view class="page" style="height:100%;width:100%">
<block>
<button class="weui-btn" type="warn" disabled="{{!canClick}}" bindtap="onNavigateToEdit">下一步</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
app/nyx-dev/pages/live/live-post/live-post.wxss 0 → 100644
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;
}
app/nyx-dev/pages/live/live-post/live-submit/live-submit.js 0 → 100644
// pages/live/live-post/live-edit/live-edit.js
var config = wx.getStorageSync("config");
var app = getApp();
var log = require('./../../../../utils/log.js')
var util = require('./../../../../utils/util.js')
Page({
data: {
title: "",
defaultCity: '上海',
address: "",
// 消息提示框的遮罩层
showToast: false,
// 支付按钮可用状态
canClick: true,
// 操作按钮
submitString: "",
},
onLoad: function () {
var _this = this;
wx.getSystemInfo({
success: function (res) {
var a = res.windowHeight;
_this.setData({
scrollTop: a-200
})
}
})
//step1: 初始化数据
if (wx.getStorageSync('nyxCode')) {
_this.setData({
nyxCode: wx.getStorageSync('nyxCode'),
userInfo: wx.getStorageSync('userInfo'),
authStatus: wx.getStorageSync('authStatus'),
members : wx.getStorageSync('members') || [],
member : wx.getStorageSync('member') || {},
})
}
//step2: 初始化发布字串
var submitString = ""
if(wx.getStorageSync('authStatus') == '01')
{
submitString = "现场发布"
}
else
{
submitString = "授权发布"
}
_this.setData({ submitString })
//step3: 初始化所在城市
var defaultCity = app.globalData.defaultCity
_this.setData({ defaultCity })
},
onReady: function (e) {
},
// Date Flow
// 输入该组图片的标题
bindKeyTitle(e) {
var _this = this;
_this.setData({
title: e.detail.value
})
},
// jscat 20201126,
bindCity(e) {
var _this = this;
var defaultCity = e.detail.value
_this.setData({ defaultCity })
},
// 为member添加地址
bindAddress(e) {
var _this = this;
var address = e.detail.value
_this.setData({ address })
},
// 授权入口: 获取用户授权信息
// authStatus=='00'
onGetUserInfo: function(e)
{
var _this = this;
if(_this.checkField())
{
//step2, 判断文本是否合规
var strCheck = _this.data.title + _this.data.defaultCity + _this.data.address
let promise = app.onCheckText(strCheck)
//在本轮event loop（事件循环）运行完成之前，回调函数是不会被调用的
//then后的括号里应该是参数param
//https://www.cnblogs.com/qlongbg/p/11603328.html
promise.then(function (value) {
console.log("===enter promise then_pass_" + value)
console.log("字段合规校验成功")
_this.getUserInfo()
},
function (value) {
console.log("===enter promise then_failed_" + value)
console.log("字段合规校验失败")
});
}
},
getUserInfo() {
let _this = this;
//先设置点击按钮不可点击
var canClick = false;
_this.setData({ canClick })
config.debug==1?console.log("===getUserInfo"):""
// 获取用户信息
wx.getSetting({
success(res) {
config.debug == 1 ? console.log("===getUserInfo_res_" + res) : ""
if (res.authSetting['scope.userInfo']) { // 判断获取用户信息是否授权
config.debug == 1 ? console.log("已授权=====") : ""
var submitString = "现场发布"
_this.setData({ submitString })
// 已经授权, 可以直接调用 getUserInfo 获取用户信息
let promise_login = new Promise(function (resolve, reject) {
app.login(resolve, reject)
})
promise_login.then(
function (value) {
console.log("===enter promise_login then_pass_" + value)
_this.submitLive()
},
function (value) {
console.log("===enter promise_login then_failed_" + value)
});
} else {
config.debug == 1 ? console.log("未授权=====") : ""
// 无法重新进行授权; jscat 20200901
// 因为 openSetting:fail can only be invoked by user TAP gesture.
wx.showModal({
title: '授权提示',
content: '微现场发布需要您的授权哦'
})
}
}
})
},
// 现场发布提交入口
onSubmit: function(e) {
var _this = this;
if(_this.checkField())
{
//step2, 判断文本是否合规
var strCheck = _this.data.title + _this.data.defaultCity + _this.data.address
let promise = app.onCheckText(strCheck)
//在本轮event loop（事件循环）运行完成之前，回调函数是不会被调用的
//then后的括号里应该是参数param
//https://www.cnblogs.com/qlongbg/p/11603328.html
promise.then(function (value) {
console.log("===enter promise then_pass_" + value)
console.log("字段合规校验成功")
_this.submitLive()
},
function (value) {
console.log("===enter promise then_failed_" + value)
console.log("字段合规校验失败")
});
}
},
submitLive: function () {
var _this = this;
var title = app.globalData.postData.photoTitle
var content = app.globalData.postData.photoContent; //获取content
var logoArray = _this.__data__.logoArray
//先设置按钮不可点击
var canClick = false;
_this.setData({ canClick })
var submitString = "活动发布中"
_this.setData({ submitString })
// 如果是"推荐"和"搜索"，需要单独处理
// '搜索'tab的时候, 需要转换为搜索的关键词(_this.__data__.strSearch)
var query_url = '&title=' + "上"
var strUrl = config.activity_query_url + "?pageCount=" + 4
+ "&pageNum=" + 1 + query_url
config.debug == 1 ? console.log("===strUrl is: \"" + strUrl + "\"") : ""
wx.request({
url: strUrl,
method: 'GET',
header: {
'Cookie': wx.getStorageSync('cookieKey'),
},
success: function (res) {
if (res.data.resultCode == 200) {
_this.switchTab()
}
}
})
},
checkField: function(){
var _this = this;
var title = _this.data.title;
var defaultCity = _this.data.defaultCity;
var address = _this.data.address;
var info = ""
//step1: 检查活动标题
if(title.length == 0)
{
info = "请输入现场标题"
wx.showModal({
content: info,
showCancel: false,
confirmText: '确认'
})
return false;
}
else if(defaultCity.length == 0)
{
info = "请完善所在城市"
wx.showModal({
content: info,
showCancel: false,
confirmText: '确认'
})
return false;
}
else if(address.length == 0)
{
info = "请完善现场地址"
wx.showModal({
content: info,
showCancel: false,
confirmText: '确认'
})
return false;
}
console.log("字段校验成功")
return true;
},
switchTab() {
var _this = this;
//跳转到/live.wxml页面
// 重置数据
app.globalData.postData = {
photoArray: [],
}
// jscat 20200913 消息提示框
/*
需求:
1, 消息提示
2, 延迟3000ms
3, 遮罩层
*/
var showToast = true
_this.setData({ showToast })
wx.showToast({
icon: 'none',
title: '发布成功',
duration: 2000,
success: function(){
setTimeout(function(){
wx.switchTab({
url: '/pages/live/live',
success: function (e) {
var page = getCurrentPages().pop();
if (page == undefined || page == null) return;
// 更新首页的数据
console.log("===switchTab page", page)
page.onUpdateData();
}
});
}, 2000)
}
})
},
})
app/nyx-dev/pages/live/live-post/live-submit/live-submit.json 0 → 100644
{
"navigationBarTitleText": "现场详情"
}
\ No newline at end of file
app/nyx-dev/pages/live/live-post/live-submit/live-submit.wxml 0 → 100644
<!-- /page/live/live-post/live-submit/live-submit 添加分类的特点，以及自定义特点 -->
<view class="page">
<!-- 定义遮罩层 -->
<view class="mask" wx:if="{{showToast}}"></view>
<!-- <form > -->
<view class="btn-area">
<block wx:if="{{authStatus=='00'}}">
<button class="weui-btn" type="warn" open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">{{submitString}}</button>
</block>
<block wx:else>
<button class="weui-btn" type="warn" disabled="{{!canClick}}" bindtap="onSubmit">{{submitString}}</button>
</block>
</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="bindKeyTitle" placeholder="请输入现场标题" value="{{title}}"/>
</view>
</view>
</view>
<view class="weui-cells__title">#添加现场地址</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell ">
<view class="weui-cells weui-cells_after-title" style="height: 96rpx;width:30%">
<view class="weui-cell__bd">
<input class="weui-input" bindinput="bindCity" value="{{defaultCity}}" placeholder="请输入城市">
</input>
</view>
</view>
<view class="weui-cells weui-cells_after-title" style="height: 96rpx">
<view class="weui-cell__bd">
<input class="weui-input" bindinput="bindAddress" placeholder="请输入现场地址" value="{{address}}"/>
</view>
</view>
</view>
</view>
</view>
\ No newline at end of file
app/nyx-dev/pages/live/live-post/live-submit/live-submit.wxss 0 → 100644
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;
}
.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: 200rpx;
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: 32rpx;
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: 200rpx;
/* 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;
}
.check-box-off {
color:rgba(0,0,0,0.6);
}
/* 消息提示框的遮罩层 */
.mask{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
z-index: 9000;
opacity: 0.5;
}
app/nyx-dev/pages/live/live.js
......@@ -256,7 +256,7 @@ Page({
})
wx.setNavigationBarTitle({
title: '酒肆活动',
title: '活动现场',
})
},
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论