作者 lihongjuan

1

要显示太多修改。

为保证性能只显示 12 of 12+ 个文件。

... ... @@ -29,11 +29,14 @@
//返回取得的数据
if (res.data.code == '1') {
resolve(res.data.data);
} else {
uni.showToast({
title: res.data.msg,
icon: 'none'
});
}else {
// uni.showToast({
// title: res.data.msg,
// icon: 'none'
// });
reject(res.data);
}
},
... ... @@ -45,6 +48,9 @@
});
return promise;
},
globalData: {
userInfo: null,
baseUrl: 'http://fnsxcx.w.brotop.cn'
... ... @@ -58,10 +64,13 @@
title: '上传中',
})
let url = 'http://fnsxcx.w.brotop.cn/api/common/upload';
let head = {
'token': wx.getStorageSync('token'),
'token':uni.getStorageSync('token'),
'XX-Device-Type': ''
}
console.log(head)
let typename = {
filetype: filetype
}
... ... @@ -95,47 +104,8 @@
});
return promise;
},
// 上传图片
// upload(file) {
// var promise = new Promise((resolve, reject) => {
// let url = 'http://fnsxcx.w.brotop.cn/api/common/upload';
// let head = {
// 'token': uni.getStorageSync('token'),
// };
// // let typename = {
// // filetype: filetype //其他参数
// // };
// uni.uploadFile({
// url: url, //仅为示例,非真实的接口地址
// filePath: file,
// name: 'file',
// header: head,
// // formData: typename,
// success: function(res) {
// let temdata = JSON.parse(res.data);
// let urlobj = {
// url: temdata.data.url,
// };
// resolve(urlobj);
// uni.hideNavigationBarLoading();
// uni.hideLoading();
// },
// fail: function(res) {
// console.log(res)
// reject('网络出错');
// uni.hideNavigationBarLoading();
// uni.hideLoading();
// },
// complete: () => {
// uni.hideNavigationBarLoading();
// uni.hideLoading();
// }
// });
// });
// return promise;
// }
}
</script>
... ... @@ -147,6 +117,26 @@
height: 100%;
display: block;
}
.viewimg{
width:560rpx;
height:890rpx;
font-size: 0;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.huifu{
color:#333!important;
margin-left:10rpx;
}
.nodata{
color:#999;
font-size: 32rpx;
text-align: center;
margin-top:40rpx;
}
/* 布局 */
.layout_row{
display: flex;
... ... @@ -308,10 +298,20 @@
transform: translate(-50%,-50%);
z-index: 100;
}
.register {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
}
/* 海报 */
.canvas_dialog{
width: 590upx;
position: fixed;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
... ...
... ... @@ -57,16 +57,12 @@
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "wx1f51f42105b63343",
"appid" : "wx46ceeab70244266f",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true,
"permission" : {
"scope.userLocation" : {
"desc" : ""
}
}
"permission" : {}
},
"mp-alipay" : {
"usingComponents" : true
... ...
... ... @@ -3,6 +3,7 @@
//pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
// 发现
// 授权
{
"path": "pages/index/index",
"style": {
... ... @@ -12,6 +13,15 @@
}
},
{
"path": "pages/course/indexvue",
"style": {
"navigationBarTitleText": "赋能师成长数据化",
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black"
}
},
{
"path": "pages/start/start",
"style": {
"navigationBarTitleText": "赋能师成长数据化",
... ... @@ -19,9 +29,8 @@
"navigationBarTextStyle": "black"
}
},
// 个人中心
{
"path": "pages/mine/circlepic",
... ... @@ -90,7 +99,7 @@
{
"path": "pages/course/courseDetail",
"style": {
"navigationBarTitleText": "课程详情",
"navigationBarTitleText": "关卡详情",
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black"
}
... ... @@ -124,6 +133,11 @@
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"permission": {
"scope.userLocation": {
"desc": "需要记录打卡时的位置信息"
}
},
"tabBar": {
"color": "#BDC4CE",
"selectedColor": "#EE8B27",
... ...
<template>
<view class="content">
<view class="nodatabox" v-if="courselist.length==0">
<view class="nodatabox" v-if="courselist.length!=0&&time==true">
<view class="noimg">
<image src="../../static/nodata.png" mode=""></image>
</view>
<view class="zanwushu">暂无内容</view>
<view class="gocourse" @click="goindex">快前往首页解锁课程添加内容吧</view>
</view>
<view class="courselist" v-else>
<view class='courseitem' v-for="(item,index) in courselist" :key="index">
<view class='courseitem' v-for="(item,index) in courselist" :key="index" @click=toCourseIntro(item)>
<view class="itemtopname flexone">
<text class="itemtitle">{{item.title}}</text>
</view>
<view class="textcontent flexone">
<view class="textcontentk textcontentleft flexone">
总课时 <text class='kejie'>{{item.lesson}}</text> 课
总课时 <text class='kejie'>{{item.customs_num}}</text> 课
</view>
<view class="textcontentk textcontentleft youtext flexone">
已完成 <text class='kejie'>{{item.user_lesson}}</text> 课
已完成 <text class='kejie'>{{item.customs_user_num}}</text> 课
</view>
<view class="finishimg" v-if="item.state==2">
<view class="finishimg" v-if="item.state==3">
<image src="../../static/finish.png" mode=""></image>
</view>
</view>
</view>
</view>
</view>
</template>
... ... @@ -49,7 +41,8 @@
return {
courselist: [],
page:1,
pageNum:10
pageNum:10,
time:false
}
},
methods: {
... ... @@ -58,6 +51,52 @@
url: '../registerone/registerone'
})
},
// 获取用户信息
getuserinfo() {
let that = this;
var url = '/api/index/user_info';
var params = {
}
app.post(url, params, "post").then((res) => {
console.log(res);
}).catch((err) => {
console.log(err)
if (err.msg == '您已被拉黑') {
wx.showToast({
title: err.msg,
icon: "none"
})
setTimeout(function() {
wx.navigateTo({
url: '/pages/start/start'
})
}, 1500)
} else if (err.msg == '用户未登录') {
wx.showToast({
title: '请重新登录',
icon: 'none'
})
wx.setStorageSync("token", "")
setTimeout(function(){
uni.navigateTo({
url:'/pages/start/start'
})
},1500)
}
})
},
// 获取课程列表
getcourselist(){
let that=this;
... ... @@ -66,22 +105,12 @@
let param = {
page: that.page,
pageNum: that.pageNum
pageNum: 10
};
app.post(url, param, 'get').then(r => {
console.log(r)
that.courselist=r.list
console.log('课程列表',r)
that.courselist=that.courselist.concat(r)
}).catch(err => {
console.log(err)
... ... @@ -89,6 +118,35 @@
})
},
// 课程介绍
toCourseIntro(item){
// var item=JSON.stringify(item)
// console.log(item)
// wx.setStorageSync("item",JSON.stringify(item))
// wx.setStorageSync("item", item)
let token=uni.getStorageSync("token")
if(token==''){
uni.showToast({
title:'请先登录',
icon:'none'
})
setTimeout(function(){
uni.navigateTo({
url:"/pages/start/start"
})
},1500)
}else{
uni.navigateTo({
url:"/pages/course/courseIntro?id="+item.id
})
}
},
// 前往首页
goindex(){
uni.switchTab({
... ... @@ -97,14 +155,21 @@
},
},
onLaunch: function() {
console.log('App Launch,app启动')
},
onShow: function() {
this.page=1;
this.courselist=[];
console.log('App Show,app展现在前台')
this.getcourselist();
this.getuserinfo();
setTimeout(function(){
this.time=true
},1000)
},
onHide: function() {
console.log('App Hide,app不再展现在前台')
... ... @@ -113,6 +178,14 @@
},
onReachBottom() {
var newpage = this.page;
newpage++;
this.page = newpage
this.getcourselist()
},
}
</script>
... ...
... ... @@ -15,10 +15,19 @@
</view>
<view class="picbox" v-else>
<view class="picbox flexone" v-else>
<!-- 上传的图片 -->
<view class="flexone">
<view class="upload_pic" v-for="(item,index) in image" :key="index">
<image :src="item" mode=""></image>
<view class="closeimg" @click="deleteimg(item)">
<image src="../../static/close.png" mode=""></image>
</view>
</view>
</view>
<view class="upload_pic" @click="uploadImg()">
<image :src="image==''?img:image" mode="widthFix"></image>
<image :src="img" mode="widthFix"></image>
</view>
</view>
</view>
... ... @@ -30,6 +39,15 @@
<view class="send_box">发送</view>
</view>
<view class="register" v-if="sendtrue">
<view class="sendwrap">
<view class="sendimg">
<image src="/static/img_01.png"></image>
</view>
<view class="sendsuccess">发送成功</view>
</view>
</view>
</view>
</template>
... ... @@ -41,13 +59,19 @@
content:"",
img:"../../static/addpic.png",
addpic:true,
image:'',
image:[],
cimage:'',
// 打卡记录id
clock_log_id:'',
//评论父级id
comments_id:'',
courseid:''
courseid:'',
user_id:'',
commenttype:'',
customs_id:'',
sendtrue:false
}
},
methods: {
... ... @@ -70,7 +94,8 @@
console.log(res.tempFilePaths[0])
app.upload('image', res.tempFilePaths[0],"post").then((res) => {
console.log('上传文件', res);
that.image=res.url
that.image.push(res.url);
that.image=that.image
that.cimage=res.kurl
... ... @@ -82,28 +107,68 @@
fail: function (res) { }
})
},
deleteimg(item){
// console.log(e)
// var url=e.currentTarget.dataset.url;
for(var i=0;i<this.image.length;i++){
if(item==this.image[i]){
this.image.splice(i,1);
}
}
this.image=this.image;
},
//发送
send(){
let that = this;
if(that.content==''){
uni.showToast({
title:'请输入评价内容',
icon:'none'
})
return false
}
var url = '/api/comments/commit';
var params = {
clock_log_id:that.clock_log_id,
comments_id: that.comments_id,
content:that.content,
images:that.image
images:that.image.join(",")
}
console.log(this.clock_log_id)
console.log(params)
console.log(this.comments_id)
app.post(url, params).then((res) => {
console.log(res);
uni.showToast({
title:'提交成功',
icon:'none'
})
// uni.showToast({
// title:'提交成功',
// icon:'none'
// })
that.sendtrue=true
console.log(typeof(this.commenttype))
console.log(this.commenttype)
setTimeout(function(){
uni.navigateTo({
url:'/pages/course/courseDetail?id='+that.courseid
})
})
if(that.commenttype==1){
console.log(988765,that.courseid)
uni.redirectTo({
url:'/pages/course/courseDetail?id='+that.customs_id+'&courseid='+that.courseid
})
}else if(that.commenttype==2){
console.log(9887)
uni.redirectTo({
url:'/pages/course/recordClock?customs_id='+that.customs_id+'&user_id='+that.user_id+'&courseid='+that.courseid
})
}else if(that.commenttype==3){
console.log(9887)
uni.switchTab({
url:'/pages/mine/mine'
})
}
},1500)
}).catch((err) => {
})
... ... @@ -112,8 +177,32 @@
onLoad(options) {
console.log(options)
this.clock_log_id=options.id,
this.courseid=options.courseid
this.commenttype=options.commenttype
if(options.commenttype==2){
this.courseid=options.courseid;
this.user_id=options.user_id;
this.clock_log_id=options.clock_log_id;
this.customs_id=options.customs_id
if(options.comments_id!=undefined){
this.comments_id=options.comments_id;
}
}else if(options.commenttype==1){
this.clock_log_id=options.clock_log_id;
this.courseid=options.courseid
this.customs_id=options.customs_id
if(options.comments_id!=undefined){
this.comments_id=options.comments_id;
}
}else{
this.clock_log_id=options.clock_log_id;
this.customs_id=options.customs_id
if(options.comments_id!=undefined){
this.comments_id=options.comments_id;
}
}
}
}
</script>
... ... @@ -122,6 +211,33 @@
page{
background-color: #fafbfd;
}
.sendimg{
width:100rpx;
height:100rpx;
font-size: 0;
}
.sendsuccess{
color:#06121E;
font-size:30rpx;
margin-top:30rpx;
}
.sendwrap{
width:446rpx;
height:256rpx;
background:rgba(255,255,255,1);
box-shadow:0rpx 0rpx 6rpx rgba(0,0,0,0.08);
opacity:1;
border-radius:8rpx;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.picbox{
margin-top:85rpx;
}
... ... @@ -170,8 +286,19 @@
width:200upx;
height:200upx;
font-size:0;
position: relative;
margin-right:32rpx;
}
.closeimg{
width:36rpx;
height:36rpx;
font-size: 0;
position: absolute;
right:-20rpx;
top:0
}
// 按钮
.send_wrap{
... ...
... ... @@ -3,10 +3,10 @@
<view class="course_detail">
<!-- 关卡 -->
<view class="checkpoint_wrap layer_between">
<view class="prev_point" v-if="pre!=''" @click="prestep">上一关</view>
<view class="point_num">第 {{number}} 关</view>
<view class="prev_point" v-if="last_customs!=''" @click="prestep">上一关</view>
<view class="point_num">{{coursedetail.title}}</view>
<view class="prev_point" @click="nextstep" wx:if="next!=''">下一关</view>
<view class="prev_point" v-if="next_customs!=''" @click="nextstep" wx:if="next!=''">下一关</view>
</view>
<!-- 主题 -->
<view class="theme_wrap">
... ... @@ -16,77 +16,81 @@
<view class="">{{coursedetail.title}}</view>
</view>
<!-- 图片 -->
<view class="theme_pic" @click="enlargeImg()">
<!-- <view class="theme_pic" @click="enlargeImg()">
<image :src="coursedetail.image" mode="widthFix"></image>
</view>
</view> -->
<!-- 内容 -->
<view class="theme_content" v-html="coursedetail.content">
<view class="theme_content">
<!-- v-html="coursedetail.content" -->
<!-- 基值支义们京候么眼革下使叫。南石很样好清少去准连究志议构。调研而手开求况做体式达高心置过。装切此报列明子马世志再部增心。
般于须子展新五复通可南成群置接。为技经再议制选时据派断这队片全府好。况感速记中上相组低拉素道北始论与。属书研置约适商才联太的七情力类。
你理边率他次与关好期起金志单马切红。主严拉青民解格速七取学复才太马。前属口质次意指有研叫后先按此。
省每前称非美事起也半专我料叫此没。学想象这志究反规空家很便老。位转信由江空能手立和级各素面亲。认安应活按开重细强说标将研力。生机除打万复办开不场始先值标清。 -->
<u-parse :content="customcontent" @preview="preview" @navigate="navigate"></u-parse>
</view>
<!-- 图片 -->
<!-- <view class="theme_pic" @click="enlargeImg()">
<image src="../../static/theme_01.png" mode="widthFix"></image>
</view> -->
<!-- 按钮 -->
<view class="point_btn" @click="toSubmit()">我要打卡</view>
<!-- 放大图片 -->
<!-- <view class="tx_mask" v-if="isShowImg" @click="closeTheme"></view>
<view class="mask_img" v-if="isShowImg">
<image :src="img" mode="widthFix"></image>
</view> -->
<view class="point_btn" v-if="coursedetail.is_clock==1">已打卡</view>
<view class="point_btn" @click="toSubmit()" v-else>{{coursedetail.course_is_clock==1?'已打卡':'我要打卡'}}</view>
</view>
<!-- 评论 -->
<view class="theme_comment">
<view class="comment_single" v-for="(item,index) in courselist" :key="index">
<view class="comment_single" v-for="(item,index) in courselist" :key="index" v-if="item.is_privacy==2||item.user==true">
<!-- 人员信息 -->
<view class="single_people layer_between">
<!-- 左侧 -->
<view class="people_l layer_nostar">
<!-- 头像 -->
<image :src="item.avatar" mode="" @click="toRecord()"></image>
<view class="touxiang">
<image :src="item.user.avatar" mode="" @click="toRecord(item)"></image>
</view>
<view class="">
<!-- 姓名 -->
<view class="people_name">{{item.nickname}}</view>
<view class="people_name">{{item.user.nickname}}</view>
<!-- 课程进度 -->
<view class="people_progress">已解锁2课时</view>
<view class="people_progress">已解锁{{item.unlock_customs_num}}课时</view>
</view>
</view>
<!-- 右侧 -->
<view class="people_r" @click="toSubmit()">修改</view>
<view class="people_r" @click="changeclock(item)" :data-item="item" v-if="item.isuser==true">修改</view>
</view>
<!-- 课程信息 -->
<view class="single_course">
<!-- 课程名称 -->
<view class="layer_star course_name course_single">
<image class="course_icon" src="../../static/icon_01.png" mode=""></image>
<view class="">【深潜挑战】 21天专注力挑战</view>
<view class="">{{item.course_title}}</view>
</view>
<view class="layer_star course_single">
<image class="course_icon" src="../../static/icon_02.png" mode=""></image>
<view class="">第2课</view>
<view class="">{{item.customs_title}}</view>
</view>
<view class="layer_star no_icon_single">
<view class="">学习时间:2019年12月26日</view>
<view class="">学习时间:{{item.createtime}}</view>
</view>
<view class="layer_star no_icon_single">
<view class="">感悟:{{item.content}}</view>
<view class=" no_icon_single ganwu">
<view>
感悟:
</view>
<text class="">{{item.content}}</text>
</view>
<view class="layer_star no_icon_single">
完成事件打分:
<view class="score_picker layer_between">{{item.score[0].score}}</view>
<!-- <picker mode="selector" :range="completeList" @change="changeComplete">
<view class="score_picker layer_between">
<view>{{ completeList[complete] ? completeList[complete] : '请打分' }}</view>
<image src="../../static/start_01.png" mode="widthFix"></image>
<view class=" no_icon_single ganwu" v-if="item.images!=null">
<view style="width:100rpx;">
</view>
<view class="imagebox flexone">
<view class="iamgeitem" v-for="(item,indexk) in item.images" :key="indexk" :data-url="item" :data-index="index" :data-indexk="indexk" @click="preivewimg">
<image :src="item"></image>
</view>
</picker> -->
</view>
</view>
<view class="layer_star no_icon_single">
情绪状态打分:
<view class="score_picker layer_between">{{item.score[1].score}}</view>
<view class="layer_star no_icon_single" v-for="(itemsec,index) in item.clock_score" :key="index">
{{itemsec.title}}:
<view class="score_picker layer_between">{{itemsec.score}}</view>
<!-- <picker mode="selector" :range="completeList" @change="changeComplete">
<view class="score_picker layer_between">
<view>{{ completeList[complete] ? completeList[complete] : '请打分' }}</view>
... ... @@ -94,47 +98,79 @@
</view>
</picker> -->
</view>
<!-- 评论、点赞按钮 -->
<view class="layer_noend" @click="comment" :data-id="item.id">
<view class="course_btn justify_between">
<view class="layer_noend">
<view class="course_btn justify_between" @click="comment(item)" :data-id="item.id">
<image src="../../static/pinglun_icon@2x.png" mode="widthFix"></image>
评论
</view>
<view class="course_btn justify_between" :class="{active:isPoint}" @click="changePoint()" :data-id="item.id">
<image :src="isPoint?pointImg2:pointImg1" mode="widthFix"></image>
点赞
<view class="course_btn justify_between" :class="{active:item.is_praise==1}" @click="changePoint(item,index)"
:data-id="item.id" :data-customsid='item.customs_id'>
<image :src="item.is_praise==1?pointImg2:pointImg1" mode="widthFix"></image>
<text v-if="item.is_praise==1">已赞</text>
<text v-else>点赞</text>
</view>
</view>
</view>
<!-- 评论、点赞信息 -->
<view class="comment_msg">
<!-- 点赞人员 -->
<view class="point_people layer_nostar">
<image src="../../static/dianzan_icon@2x.png" mode="widthFix"></image>
<view class="point_detail flex_wrap_no">
<view class="" v-for="(itemone, index) in item.praise_user" :key="index">{{itemone.nickname }},</view>
<!-- 评论、点赞信息 -->
<view class="comment_msg">
<!-- 点赞人员 -->
<view class="point_people layer_nostar">
<image src="../../static/dianzan_icon@2x.png" mode="widthFix" v-if="item.praise_user.length!=0"></image>
<view class="point_detail flex_wrap_no">
<view class="namedianzan" v-for="(itemone, index) in item.praise_user" :key="index">{{itemone.user.nickname}}</view>
</view>
</view>
</view>
<view class="seemore" @click="seemore" :data-id="item.id">查看所有评论</view>
<!-- 评论信息 -->
<view class="msg_detail" v-if="showcomment">
<view class="detail_single " v-for="(item,index) in commentlist" :key="index" @longtap="del" :data-id="item.id">
<text v-if="index==0">{item.user_nickname}:</text>
<text v-else>{item.user_nickname}回复{{item.re_user_nickname}}</text>
{{item.content}}
<view class="seemore" @click="seemore(item.id,index)" :data-id="item.id" v-if="item.is_comment==1">查看所有评论</view>
<!-- 评论信息 -->
<view class="msg_detail" v-if="item.showcomment">
<view class="detail_single " v-for="(itemone,indexk) in commentlist" :key="indexk" @longtap="dele(itemone,indexk)"
:data-id="itemone.id">
<view v-if="itemone.user2" @click="replay(item,itemnone)"> <text>{{itemone.user1.nickname}} <text class="huifu">回复</text> {{itemone.user2.nickname}}</text> {{itemone.content}}
<view class="flexone">
<view class="addimg" v-for="(itemimg,index) in itemone.images" :key="index" @click.stop="viewimg(itemimg)">
<image class="add_img" :src="itemimg" mode=""></image>
</view>
</view>
</view>
<view v-else @click="replay(item,itemone)">
<text>{{itemone.user1.nickname}}:</text>{{itemone.content}}
<view class="flexone">
<view class="addimg" v-for="(itemimg,index) in itemone.images" :key="index" @click.stop="viewimg(itemimg)">
<image class="add_img" :src="itemimg" mode=""></image>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 遮罩层 -->
<view class="register" v-if="showimg" @click="hideshowimg">
<view class="viewimg">
<image :src="imgurl" mode="aspectFit"></image>
</view>
</view>
</view>
</template>
<script>
import uParse from '@/components/u-parse/u-parse.vue'
import app from "../../App.vue";
export default {
components: {
uParse
},
data() {
return {
isShowImg: false,
... ... @@ -148,104 +184,182 @@
pointImg2: require("../../static/img_03.png"),
// 点赞人员
pointList: ['关心', '思想是根基', '陈cc', '莫妮卡', '莫妮卡', '大鹏', '思想是根基', '陈cc', '思想是根基', '陈cc', '莫妮卡'],
courseid: '',
customs_id: '',
coursedetail: '',
next: '',
pre: '',
number: 1,
//是否显示评论
showcomment:false,
//所有用户课程列表
courselist: [],
// 自己课程列表,
//评论列表,
commentlist: [],
last_customs: '',
next_customs: '',
courseid: '',
page: 1,
customcontent: '',
imgurl:'',
showimg:false
};
},
methods: {
//获取课程详情
getcoursedetail() {
let that = this;
var url = '/api/course/customs_detail';
var params = {
course_id: that.courseid,
preview(src, e) {
// do something
},
navigate(href, e) {
// do something
},
// 预览图片
viewimg(item){
this.imgurl=item;
this.showimg=true
},
hideshowimg(){
this.showimg=false
},
text(details) {
var texts = ''; //待拼接的内容
while (details.indexOf('<img') != -1) { //寻找img 循环
texts += details.substring('0', details.indexOf('<img') + 4); //截取到<img前面的内容
details = details.substring(details.indexOf('<img') + 4); //<img 后面的内容
if (details.indexOf('style=') != -1 && details.indexOf('style=') < details.indexOf('>')) {
texts += details.substring(0, details.indexOf('style="') + 7) + "max-width:100%;height:auto;margin:0 auto;"; //从 <img 后面的内容 截取到style= 加上自己要加的内容
details = details.substring(details.indexOf('style="') + 7); //style后面的内容拼接
} else {
texts += ' style="max-width:100%;height:auto;margin:0 auto;" ';
}
}
app.post(url, params).then((res) => {
console.log(res);
that.coursedetail = res
that.getcordlist()
that.getallcordlist()
texts += details; //最后拼接的内容
}).catch((err) => {
return texts
})
},
// 获取自己打卡记录
getcordlist() {
//获关卡详情
getcustomdetail() {
let that = this;
console.log(77889900)
var url = '/api/clock/clock_log';
var url = '/api/course/customs_detail';
var params = {
course_id: that.coursedetail.course_id,
customs_id: that.coursedetail.id
customs_id: that.customs_id,
}
app.post(url, params).then((res) => {
console.log(res);
that.courselist = res.list
console.log('8909876654', res);
that.coursedetail = res.present_customs;
that.number = res.num;
that.last_customs = res.last_customs;
that.next_customs = res.next_customs;
var text = this.text(res.present_customs.content);
this.customcontent = text;
console.log(this.customcontent)
// that.getcordlist()
that.page = 1;
that.courselist = []
that.getallcordlist()
}).catch((err) => {
})
},
//获取所有打卡记录
getallcordlist() {
let that = this;
console.log(77889900)
var url = '/api/course/user_clock_list';
var params = {
course_id: that.coursedetail.course_id,
customs_id: that.coursedetail.id
customs_id: that.coursedetail.id,
page: that.page
}
app.post(url, params).then((res) => {
console.log(res);
that.courselist = that.courselist.concat(res.list)
var userid = uni.getStorageSync("userid");
console.log('999887', userid)
for (var obj of res) {
obj.showcomment = false;
obj.content=obj.content.split('&hc').join('\n');
// obj.praise=false;
if (obj.user_id == userid) {
obj.isuser = true
} else {
obj.isuser = false
}
}
that.courselist = that.courselist.concat(res);
that.courselist = that.courselist;
console.log(that.courselist, '90908080')
}).catch((err) => {
})
},
preivewimg(e){
let that=this;
console.log(e)
let index=e.currentTarget.dataset.index;
let indexk=e.currentTarget.dataset.indexk;
console.log(index);
console.log(indexk)
console.log(that.courselist[index].images)
uni.previewImage({
current:that.courselist[index].images[indexk],
urls: that.courselist[index].images,
success: function (res) { },
fail: function (res) { },
complete: function (res) { },
})
},
// 上一关
prestep() {
var that = this;
that.number++;
var url = '/api/course/customs_choose';
var url = '/api/course/customs_detail';
var params = {
// course_id: that.courseid,
// customs_id:that.coursedetail.id
course_id: 1,
customs_id: 1
customs_id: that.last_customs.id
}
app.post(url, params).then((res) => {
console.log(res);
that.next = res.next;
that.per = res.pre
if (res.next != '') {
that.coursedetail = res.next;
} else(
uni.showToast({
title: '没有下一关了',
icon: "none"
})
)
that.last_customs = res.last_customs;
that.next_customs = res.next_customs;
that.coursedetail = res.present_customs;
that.last_customs = res.last_customs;
that.next_customs = res.next_customs
that.number = that.number - 1;
var text = that.text(res.present_customs.content);
that.customcontent = text;
console.log(this.customcontent)
that.courselist = [];
that.page = 1;
that.getallcordlist();
... ... @@ -256,27 +370,43 @@
// 下一关
nextstep() {
var that = this;
that.number++;
var url = '/api/course/customs_choose';
var params = {
// course_id: that.courseid,
// customs_id:that.coursedetail.id
course_id: 1,
customs_id: 1
if (that.coursedetail.is_clock == 0) {
uni.showToast({
title: '您还没有在这一关打卡,无法解锁下一关',
icon: "none"
})
return false
}
if (that.next_customs == '') {
uni.showToast({
title: '没有下一关了',
icon: "none"
})
return false
}
var url = '/api/course/customs_detail';
var params = {
customs_id: that.next_customs.id
}
app.post(url, params).then((res) => {
console.log(res);
that.next = res.next;
that.per = res.pre
if (res.next != '') {
that.coursedetail = res.next;
} else(
uni.showToast({
title: '没有下一关了',
icon: "none"
})
)
// that.next = res.next;
// that.per = res.pre
that.coursedetail = res.present_customs;
that.last_customs = res.last_customs;
that.next_customs = res.next_customs
that.number++;
var text = that.text(res.present_customs.content);
that.customcontent = text;
console.log(this.customcontent)
that.courselist = [];
that.page = 1;
that.getallcordlist()
... ... @@ -286,18 +416,37 @@
},
// 去打卡记录页
toRecord() {
toRecord(item) {
console.log('888', this.courseid)
var item = item
uni.navigateTo({
url: "/pages/course/recordClock"
url: "/pages/course/recordClock?courseid=" + this.courseid + '&user_id=' + item.user_id + '&customs_id=' + this.customs_id
})
},
// 去提交打卡页
toSubmit() {
if(this.coursedetail.course_is_clock==1){
wx.showToast({
title:'您今天已经打过卡了',
icon:'none'
})
}else{
uni.navigateTo({
url: '/pages/course/submitClock?courseid=' + this.courseid + '&custom_id=' + this.coursedetail.id
})
}
},
// 修改打卡
changeclock(item) {
// var item=JSON.stringify(item)
uni.navigateTo({
url: '/pages/course/submitClock?courseid=' + this.courseid + '&custom_id=' + this.coursedetail.id
url: '/pages/course/submitClock?clock_log_id=' + item.id + '&change=' + 1 + '&courseid=' + this.courseid +
'&custom_id=' + this.coursedetail.id + "&changetype=" + 1
})
},
// 完成事件打分
... ... @@ -314,81 +463,201 @@
this.isShowImg = false;
},
// 评论
comment(e) {
console.log(e)
let id = e.currentTarget.dataset.id;
console.log(id)
comment(item) {
// console.log(e)
let clock_log_id = item.id;
uni.navigateTo({
url: '/pages/course/courseComment?clock_log_id=' + clock_log_id + '&customs_id=' + item.customs_id +
'&commenttype=' + 1
})
},
// 回复评论
replay(item, itemone) {
console.log('0000', itemone,this.courseid)
let clock_log_id = item.id;
uni.navigateTo({
url: '/pages/course/courseComment?id=' + id + '&courseid=' + this.courseid
url: '/pages/course/courseComment?clock_log_id=' + clock_log_id + '&customs_id=' + item.customs_id +
'&commenttype=' + 1 + '&comments_id=' + itemone.id+'&courseid='+this.courseid
})
},
//查看所有评论
seemore(e){
let id = e.currentTarget.dataset.id;
let that = this;
var url = '/api/comments/get_news_comment';
var params = {
clock_log_id: id,
}
app.post(url, params).then((res) => {
console.log(res);
that.commentlsit=res.list;
that.showcomment=true
}).catch((err) => {
})
seemore(id, index) {
let that = this;
var url = '/api/comments/comments';
var params = {
clock_log_id: id,
}
app.post(url, params).then((res) => {
console.log(res);
that.commentlist = res;
if (res.length == 0) {
uni.showToast({
title: '暂无评论',
icon: "none"
})
} else {
that.showcomment = true
that.courselist.forEach(function(value,indexk,array){
if(index==indexk){
that.courselist[index].showcomment = !that.courselist[index].showcomment;
}else{
that.courselist[indexk].showcomment=false
}
})
that.courselist = that.courselist;
}
}).catch((err) => {
})
},
// 长按删除评论
del(e){
let id = e.currentTarget.dataset.id;
dele(item, index) {
let that = this;
uni.showModal({
title: '提示',
content: '删除此条评论',
success: function (res) {
if (res.confirm) {
let that = this;
var url = '/api/comments/del';
var params = {
id:id
}
app.post(url, params).then((res) => {
console.log(res);
uni.showToast({
title:'删除成功',
icon:'none'
})
}).catch((err) => {
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
title: '提示',
content: '删除此条评论',
success: function(res) {
if (res.confirm) {
var url = '/api/comments/del';
var params = {
id: item.id
}
app.post(url, params).then((res) => {
console.log(res);
uni.showToast({
title: '删除成功',
icon: 'none'
})
setTimeout(function() {
that.commentlist.splice(index, 1)
that.commentlist = that.commentlist;
}, 1500)
}).catch((err) => {
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
// 点赞
changePoint(e) {
let id = e.currentTarget.dataset.id;
this.isPoint = !this.isPoint
changePoint(item, index) {
console.log(item)
let that = this;
that.customs_id = item.customs_id;
var nickname = uni.getStorageSync("nickname");
console.log(nickname)
var url = '/api/praise/praise';
var params = {
clock_log_id: item.id,
}
app.post(url, params).then((res) => {
console.log(res);
that.courselist[index].is_praise = !that.courselist[index].is_praise
if (that.courselist[index].is_praise == 1) {
uni.showToast({
title: '点赞成功',
icon: 'none'
})
var obj = {
user: {
nickname: nickname
}
}
that.courselist[index].praise_user.push(obj);
that.courselist = that.courselist;
console.log('998877',that.courselist)
// that.getcustomdetail()
} else {
uni.showToast({
title: '取消点赞成功',
icon: 'none'
})
console.log(that.courselist)
that.courselist[index].praise_user.forEach(function(value, indexk, array) {
console.log(that.courselist[index].praise_user[indexk].user.nickname)
if (that.courselist[index].praise_user[indexk].user.nickname == nickname) {
that.courselist[index].praise_user.splice(indexk, 1)
}
})
that.courselist = that.courselist;
console.log('998877',that.courselist)
}
}).catch((err) => {
})
},
},
onShow() {
this.getcustomdetail();
},
onShow() {},
onLoad(options) {
console.log(options)
this.courseid = options.id;
this.getcoursedetail()
}
this.customs_id = options.id;
this.courseid = options.courseid;
},
onReachBottom() {
var newpage = this.page;
newpage++;
this.page = newpage
this.getallcordlist()
},
onShareAppMessage(res) {
let that=this;
if (res.from === 'button') {// 来自页面内分享按钮
console.log(res.target)
}
return {
title: '关卡详情',
path:'/pages/course/courseIntro?id='+that.courseid
}
}
};
</script>
... ... @@ -396,12 +665,56 @@
page {
background-color: #fafbfd;
}
.imagebox{
flex-wrap: wrap;
width:479rpx;
}
.iamgeitem{
width:140rpx;
height:140rpx;
font-size: 0;
margin-right:20rpx;
margin-bottom:20rpx;
}
.ganwu{
display:flex;
}
.addimg {
width: 100rpx;
height: 100rpx;
font-size: 0;
margin-right: 20rpx;
margin-top: 20rpx;
}
.namedianzan {
margin-right: 10rpx;
}
.layer_noend {
padding-bottom: 32rpx;
box-sizing: border-box;
}
.touxiang {
width: 92rpx;
height: 92rpx;
border-radius: 50%;
font-size: 0;
margin-right: 0.32rem;
}
.touxiang image {
border-radius: 50%;
}
.seemore {
color: #ee8b27;
font-weight: 600;
font-size:30rpx;
margin-top:10rpx;
font-size: 30rpx;
margin-top: 10rpx;
margin-bottom: 20rpx;
}
... ... @@ -460,6 +773,7 @@
color: #06121e;
font-size: 24upx;
text-align: left;
margin-top:30rpx;
}
// 按钮
... ... @@ -474,6 +788,7 @@
color: #fff;
font-size: 28upx;
margin: 0 auto;
margin-top:46rpx;
}
}
... ... @@ -486,7 +801,7 @@
background: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.04);
border-radius: 8upx;
padding: 56upx 32upx;
padding: 56upx 32upx 0 32upx;
margin-bottom: 32upx;
// 人员信息
... ... @@ -533,7 +848,7 @@
// 课程信息
.single_course {
padding: 42upx 0;
padding: 42upx 0 0;
font-size: 28upx;
color: #06121e;
... ... @@ -607,12 +922,13 @@
// 评论信息
.comment_msg {
border-top: 1px solid #eee;
padding-top: 30upx;
// padding-top: 30upx;
padding-bottom: 20upx;
// 点赞人员
.point_people {
margin-bottom: 28upx;
margin-bottom: 20upx;
image {
width: 32upx;
... ... @@ -644,6 +960,8 @@
}
}
}
}
}
... ...
<template>
<!-- 课程介绍 -->
<view class="course_intro">
<!-- 课程名称 -->
<view class="intro_title">{{ title }}</view>
<view class="intro_title">{{item.title}}</view>
<!-- banner -->
<view class="intro_banner">
<view class="banner_box">
<image :src="item.image" mode=""></image>
<!-- 分享 -->
<view class="intro_share layout_row" >
<view class="intro_share layout_row">
<image src="../../static/fenxiang_icon@2x.png" mode="widthFix"></image>
分享
<button open-type="share"></button>
<button class="lj_share" open-type='share'>分享</button>
<!-- <button open-type="share"></button> -->
</view>
</view>
</view>
<!-- 课程介绍 -->
<view class="course_des">
<!-- 标题 -->
<view class="descrip_title">课程介绍</view>
<!-- 介绍内容 -->
<view class="intro" v-html="item.content">
<view class="intro" id="editorDetail" >
<!-- v-html="content" -->
<u-parse :content="content" @preview="preview" @navigate="navigate" ></u-parse>
</view>
<view class="contentimg">
... ... @@ -45,23 +48,37 @@
</template>
<script>
import uParse from '@/components/u-parse/u-parse.vue'
import app from "../../App.vue";
export default {
components: {
uParse
},
data() {
return {
title: '【深潜挑战】 21天',
title: '',
content:"",
courseid:'',
item:'',
present_customs:'',
next_customs:''
};
},
methods: {
preview(src, e) {
// do something
},
navigate(href, e) {
// do something
},
// 介绍内容 后台的富文本数据
onEditorReady() {
let t = this;
uni.createSelectorQuery()
.select('#editorDetail')
.context(res => {
console.log(res)
this.editorCtx = res.context;
let content = {
html: t.content
... ... @@ -71,6 +88,61 @@ export default {
.exec();
},
text(details) {
var texts = '';//待拼接的内容
while (details.indexOf('<img') != -1) {//寻找img 循环
texts += details.substring('0', details.indexOf('<img') + 4);//截取到<img前面的内容
details = details.substring(details.indexOf('<img') + 4);//<img 后面的内容
if (details.indexOf('style=') != -1 && details.indexOf('style=') < details.indexOf('>')) {
texts += details.substring(0, details.indexOf('style="') + 7) + "max-width:100%;height:auto;margin:0 auto;";//从 <img 后面的内容 截取到style= 加上自己要加的内容
details = details.substring(details.indexOf('style="') + 7); //style后面的内容拼接
} else {
texts += ' style="max-width:100%;height:auto;margin:0 auto;" ';
}
}
texts += details;//最后拼接的内容
return texts
},
// 获取课程详情
getcoursedetail(){
let that = this;
console.log('00001112222',that.courseid)
var url = '/api/course/course_detail';
var params = {
course_id: that.courseid,
}
app.post(url, params,"post").then((res) => {
console.log('876655',res);
that.present_customs=res.present_customs;
that.next_customs=res.next_customs;
// 把富文本图片给加一个最大宽度
this.item = res.data;
var text=this.text(res.data.content)
this.content=text;
}).catch((err) => {
console.log(err)
})
},
// 进入课程
toDetail(){
let token=uni.getStorageSync("token")
... ... @@ -81,14 +153,37 @@ export default {
})
setTimeout(function(){
console.log(9999)
uni.navigateTo({
url:'/pages/index/index'
url:'/pages/start/start'
})
},1500)
}else{
uni.navigateTo({
url:"/pages/course/courseDetail?id="+this.item.id
})
if(this.present_customs==''){
uni.showToast({
title:'此课程没有关卡',
icon:'none'
})
} else if(this.item.is_auth==2){
uni.showToast({
title:"您没有权限看此课程",
icon:"none"
})
setTimeout(function(){
uni.navigateTo({
// url:'/pages/start/start?id='+that.courseid+'&type='+1
url:'/pages/index/index'
})
},1500)
}else{
uni.navigateTo({
url:"/pages/course/courseDetail?id="+this.present_customs.id+'&courseid='+this.courseid
})
}
}
},
... ... @@ -99,55 +194,73 @@ export default {
})
},
},
onShareAppMessage(res) {
if (res.from === 'button') {
// 来自页面内分享按钮
console.log(res.target);
}
return {
title: '自定义分享标题',
path: '/pages/test/test?id=123'
};
share(){
},
onLoad(options){
var item=wx.getStorageSync("item");
// item=JSON.parse(item);
console.log(item)
let that=this;
console.log('99999999',options)
this.courseid=options.id;
console.log('222558774411')
// var itemname=JSON.parse(options.item);
// console.log(item)
this.item=item
this.getcoursedetail()
let token=uni.getStorageSync("token");
if(token==''){
uni.showToast({
title:"请先登陆",
icon:'none'
})
setTimeout(function(){
uni.navigateTo({
url:'../start/start?id='+that.courseid+'&type='+1
})
},1500)
}
},
onShareAppMessage: function (res) {
var that = this;
// 来自页面内转发按钮
return {
title: '分享',
path: "/pages/course/courseIntro?id="+that.item.id
}
onUnload: function () {
uni.reLaunch({
url:'/pages/index/index'
})
},
onShareAppMessage(res) {
let that=this;
if (res.from === 'button') {// 来自页面内分享按钮
console.log(res.target)
}
return {
title: this.item.title,
path:'/pages/course/courseIntro?id='+that.courseid
}
}
};
</script>
<style>
</style>
<style lang="scss">
image{
display:block;
width:100%;
}
.intro{
width:686rpx;
color:#06121E;
font-size: 24rpx;
margin:28rpx auto 0;
padding-bottom: 150rpx;
box-sizing: border-box;
}
.course_intro {
.intro_title {
... ...
... ... @@ -5,217 +5,610 @@
<view class="record_people layer_nostar">
<view class="people_l layer_nostar">
<!-- 头像 -->
<image src="../../static/header.png" mode="" @click="toRecord()"></image>
<view class="touxiang">
<image :src="user.avatar" mode="" @click="toRecord()"></image>
</view>
<view class="">
<!-- 姓名 -->
<view class="people_name">张三</view>
<view class="people_name">{{user.nickname}}</view>
<!-- 课程进度 -->
<view class="people_progress">已解锁2课时</view>
<view class="people_progress">已解锁{{unlock_customs_num}}课时</view>
</view>
</view>
</view>
<!-- 本次打卡记录 -->
<view class="record_msg">
<!-- 课程信息 -->
<view class="record_course">
<view class="record_course" v-for="(item,index) in courselist" :key="index">
<!-- 右侧 -->
<view class="people_r" @click="toSubmit()">修改</view>
<!-- <view class="people_r" @click="toSubmit()">修改</view> -->
<!-- 课程名称 -->
<view class="layer_star course_name course_single">
<image class="course_icon" src="../../static/icon_01.png" mode=""></image>
<view class="">【深潜挑战】 21天专注力挑战</view>
<view class="coursetitle">{{item.course_title}}</view>
</view>
<view class="layer_star course_single">
<image class="course_icon" src="../../static/icon_02.png" mode=""></image>
<view class="">第2课</view>
<view class="coursetitle">{{item.customs_title}}</view>
</view>
<view class="layer_star no_icon_single"><view class="">学习时间:2019年12月26日</view></view>
<view class="layer_star no_icon_single"><view class="">感悟:好</view></view>
<view class="layer_star no_icon_single">
完成事件打分:
<picker mode="selector" :range="completeList" @change="changeComplete">
<view class="score_picker layer_between">
<view>{{ completeList[complete] ? completeList[complete] : '请打分' }}</view>
<image src="../../static/start_01.png" mode="widthFix"></image>
</view>
</picker>
<view class="">学习时间:{{item.createtime}}</view>
</view>
<view class="layer_star no_icon_single">
情绪状态打分:
<picker mode="selector" :range="completeList" @change="changeComplete">
<view class="score_picker layer_between">
<view>{{ completeList[complete] ? completeList[complete] : '请打分' }}</view>
<image src="../../static/start_01.png" mode="widthFix"></image>
<view class="ganwu"><view>感悟:</view><text>{{item.content}}</text> </view>
</view>
<view class=" no_icon_single ganwu" v-if="item.images!=null">
<view style="width:100rpx;">
</view>
<view class="imagebox flexone">
<view class="iamgeitem" v-for="(item,indexk) in item.images" :key="indexk" :data-url="item" :data-index="index" :data-indexk="indexk" @click="preivewimg">
<image :src="item"></image>
</view>
</picker>
</view>
</view>
<view class="layer_star no_icon_single" v-for="(itemsec,index) in item.clock_score" :key="index">
{{itemsec.title}}:
<view class="score_picker layer_between">{{itemsec.score}}</view>
</view>
<!-- 评论、点赞按钮 -->
<view class="layer_noend">
<view class="course_btn justify_between" @click="toComment()">
<view class="course_btn justify_between" @click="comment" :data-id="item.id">
<image src="../../static/pinglun_icon@2x.png" mode="widthFix"></image>
评论
</view>
<view class="course_btn justify_between" :class="{ active: isPoint }" @click="changePoint()">
<image :src="isPoint ? pointImg2 : pointImg1" mode="widthFix"></image>
点赞
<view class="course_btn justify_between" :class="{active:item.is_praise==1}" @click="changePoint(item,index)"
:data-id="item.id">
<image :src="item.is_praise==1?pointImg2:pointImg1" mode="widthFix"></image>
<text v-if="item.is_praise==1">已赞</text>
<text v-else>点赞</text>
</view>
</view>
<!-- 评论、点赞信息 -->
<view class="comment_msg">
<!-- 点赞人员 -->
<view class="point_people layer_nostar">
<image src="../../static/dianzan_icon@2x.png" mode="widthFix" v-if="item.praise_user.length!=0"></image>
<view class="point_detail flex_wrap_no">
<view class="namedianzan" v-for="(itemone, index) in item.praise_user" :key="index">{{itemone.user.nickname }}</view>
</view>
</view>
<view class="seemore" @click="seemore(item.id,index)" :data-id="item.id" v-if="item.is_comment==1">查看所有评论</view>
<!-- 评论信息 -->
<view class="msg_detail" v-if="item.showcomment==true">
<view class="detail_single " v-for="(itemone,indexk) in commentlist" :key="indexk" @longtap="del(itemone,indexk)"
:data-id="itemone.id">
<view v-if="itemone.user2" @click="replay(item,itemnone)">
<text>{{itemone.user1.nickname}} <text class="huifu">回复</text> {{itemone.user2.nickname}}</text>
{{itemone.content}}
<view class="flexone">
<view class="addimg" v-for="(itemimg,index) in itemone.images" :key="index" @click.stop="viewimg(itemimg)">
<image class="add_img" :src="itemimg" mode=""></image>
</view>
</view>
</view>
<view v-else @click="replay(item,itemone)">
<text>{{itemone.user1.nickname}}:</text>{{itemone.content}}
<view class="flexone">
<view class="addimg" v-for="(itemimg,index) in itemone.images" :key="index" @click.stop="viewimg(itemimg)">
<image class="add_img" :src="itemimg" mode=""></image>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 遮罩层 -->
<view class="register" v-if="showimg" @click="hideshowimg">
<view class="viewimg">
<image :src="imgurl" mode="aspectFit"></image>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
completeList: ['1', '2', '3'],
complete: '',
// 点赞
isPoint:false,
pointImg1:require("../../static/zan_icon@2x.png"),
pointImg2:require("../../static/img_03.png"),
};
},
methods: {
// 去提交打卡页
toSubmit(){
uni.navigateTo({
url:"/pages/course/submitClock"
})
import app from "../../App.vue";
export default {
data() {
return {
completeList: ['1', '2', '3'],
complete: '',
// 点赞
isPoint: false,
pointImg1: require("../../static/zan_icon@2x.png"),
pointImg2: require("../../static/img_03.png"),
page: 1,
courseid: '',
user_id: '',
courselist: [],
unlock_customs_num: '',
user: '',
customs_id: '',
commentlist: [],
imgurl:'',
showimg:false
};
},
// 去评论页
toComment(){
uni.navigateTo({
url:"/pages/course/courseComment"
})
methods: {
// 获取打卡列表
getcordlist() {
let that = this;
console.log(77889900)
var url = '/api/course/course_clock_list';
var params = {
user_id: that.user_id,
course_id: that.courseid,
page: that.page
}
app.post(url, params).then((res) => {
console.log(res);
// let userid = uni.getStorageSync("userid")
for (var obj of res.data) {
obj.showcomment = false;
}
that.courselist = that.courselist.concat(res.data);
that.user = res.user;
that.unlock_customs_num = res.unlock_customs_num
that.courselist = that.courselist;
console.log(that.courselist, '90908080')
}).catch((err) => {
})
},
preivewimg(e){
let that=this;
console.log(e)
let index=e.currentTarget.dataset.index;
let indexk=e.currentTarget.dataset.indexk;
console.log(index);
console.log(indexk)
console.log(that.courselist[index].images)
uni.previewImage({
current:that.courselist[index].images[indexk],
urls: that.courselist[index].images,
success: function (res) { },
fail: function (res) { },
complete: function (res) { },
})
},
// 预览图片
viewimg(item){
this.imgurl=item;
this.showimg=true
},
hideshowimg(){
this.showimg=false
},
// 评论
comment(e) {
console.log(e)
let clock_log_id = e.currentTarget.dataset.id;
uni.navigateTo({
url: '/pages/course/courseComment?clock_log_id=' + clock_log_id + '&customs_id=' + this.customs_id +
'&commenttype=' + 2 + '&courseid=' + this.courseid + "&user_id=" + this.user_id
})
},
// 回复评论
replay(item, itemone) {
console.log('0000', itemone)
let clock_log_id = item.id;
uni.navigateTo({
url: '/pages/course/courseComment?clock_log_id=' + clock_log_id + '&customs_id=' + item.customs_id +
'&commenttype=' + 2 + '&comments_id=' + itemone.id + '&courseid=' + this.courseid + "&user_id=" + this.user_id
})
},
seemore(id, index) {
let that = this;
var url = '/api/comments/comments';
var params = {
clock_log_id: id,
}
app.post(url, params).then((res) => {
console.log(res);
that.commentlist = res;
if (res.length == 0) {
uni.showToast({
title: '暂无评论',
icon: "none"
})
} else {
that.courselist.forEach(function(value, indexk, array) {
if (index == indexk) {
that.courselist[index].showcomment = !that.courselist[index].showcomment;
} else {
that.courselist[indexk].showcomment = false
}
})
that.courselist = that.courselist;
console.log(that.courselist)
}
}).catch((err) => {
})
},
// 长按删除评论
del(item, index) {
let that = this;
console.log('87665', index)
uni.showModal({
title: '提示',
content: '删除此条评论',
success: function(res) {
if (res.confirm) {
var url = '/api/comments/del';
var params = {
id: item.id
}
app.post(url, params).then((res) => {
console.log(res);
uni.showToast({
title: '删除成功',
icon: 'none'
})
that.commentlist.splice(index, 1)
that.commentlist = that.commentlist;
}).catch((err) => {
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
// 点赞
changePoint(item, index) {
let that = this;
var nickname = uni.getStorageSync("nickname");
console.log('99887', that.user)
var url = '/api/praise/praise';
var params = {
clock_log_id: item.id,
}
app.post(url, params).then((res) => {
console.log(res);
that.courselist[index].is_praise = !that.courselist[index].is_praise
if (that.courselist[index].is_praise == 1) {
uni.showToast({
title: '点赞成功',
icon: 'none'
})
var obj = {
user: {
nickname: nickname
}
}
that.courselist[index].praise_user.push(obj);
that.courselist = that.courselist;
// that.getcoursedetail
} else {
uni.showToast({
title: '取消点赞成功',
icon: 'none'
})
that.courselist[index].praise_user.forEach(function(value, indexk, array) {
if (that.courselist[index].praise_user[indexk].user.nickname == nickname) {
that.courselist[index].praise_user.splice(indexk, 1)
}
})
that.courselist = that.courselist;
}
}).catch((err) => {
})
},
},
// 完成事件打分
changeComplete(e) {
this.complete = e.detail.value;
onLoad(options) {
console.log(options)
this.courseid = options.courseid;
this.user_id = options.user_id;
this.customs_id = options.customs_id
this.getcordlist()
},
// 点赞
changePoint(){
this.isPoint = !this.isPoint
onReachBottom() {
var newpage = this.page;
newpage++;
this.page = newpage
this.getcordlist()
},
},
};
};
</script>
<style lang="scss">
page{
page {
background-color: #fafbfd;
}
.record_clock {
// 打卡人信息
.record_people {
padding: 62upx 32upx;
height: 254upx;
background-color: #ee8b27;
// 左侧
.people_l {
color: #fff;
// 头像
image {
width: 92upx;
height: 92upx;
margin-right: 32upx;
}
// 姓名
.people_name {
font-size: 32upx;
margin-bottom: 12upx;
}
// 课程进度
.people_progress {
font-size: 24upx;
}
}
.imagebox{
flex-wrap: wrap;
width:479rpx;
}
// 本次打卡记录
.record_msg {
padding: 0 32upx;
.record_course {
position: relative;
margin-top: -172upx;
background-color: #fff;
box-shadow: 0 0 12upx rgba(0, 0, 0, 0.04);
border-radius: 8upx;
padding: 56upx 32upx;
// 修改按钮
.people_r {
width: 112upx;
height: 56upx;
position: absolute;
top: 56upx;
right: 32upx;
border: 1px solid rgba(238, 139, 39, 1);
border-radius: 8upx;
color: #ee8b27;
font-size: 24upx;
text-align: center;
line-height: 56upx;
}
.course_icon {
width: 32upx;
height: 32upx;
}
.course_name {
color: #ee8b27;
}
.course_single {
margin-bottom: 14upx;
.iamgeitem{
width:140rpx;
height:140rpx;
font-size: 0;
margin-right:20rpx;
margin-bottom:20rpx;
}
.ganwu{
display:flex;
}
.namedianzan {
margin-right: 10rpx;
}
.addimg {
width: 100rpx;
height: 100rpx;
font-size: 0;
margin-right: 20rpx;
margin-top: 20rpx;
}
.touxiang {
width: 92rpx;
height: 92rpx;
border-radius: 50%;
font-size: 0;
margin-right: 0.32rem;
}
.touxiang image {
border-radius: 50%;
}
.coursetitle {
font-size: 28rpx;
}
.seemore {
color: #ee8b27;
font-weight: 600;
font-size: 30rpx;
margin-top: 10rpx;
}
.layer_noend {
padding-bottom: 32rpx;
box-sizing: border-box;
}
.record_clock {
// 打卡人信息
.record_people {
padding: 62upx 32upx;
height: 254upx;
background-color: #ee8b27;
// 左侧
.people_l {
color: #fff;
// 头像
image {
margin-right: 20upx;
width: 92upx;
height: 92upx;
margin-right: 32upx;
}
view{
width: 432upx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// 姓名
.people_name {
font-size: 32upx;
margin-bottom: 12upx;
}
// 课程进度
.people_progress {
font-size: 24upx;
}
}
// 无图标
.no_icon_single {
padding-left: 52upx;
font-size: 28upx;
color: #06121e;
margin-bottom: 14upx;
// 选择框
.score_picker {
width: 156upx;
height: 46upx;
background: rgba(249, 249, 249, 1);
}
// 本次打卡记录
.record_msg {
padding: 0 32upx;
position: relative;
margin-top: -172rpx;
.record_course {
position: relative;
// margin-top: -172upx;
background-color: #fff;
box-shadow: 0 0 12upx rgba(0, 0, 0, 0.04);
border-radius: 8upx;
padding: 56upx 32upx 0;
box-sizing: border-box;
margin-bottom:26rpx;
// 修改按钮
.people_r {
width: 112upx;
height: 56upx;
position: absolute;
top: 56upx;
right: 32upx;
border: 1px solid rgba(238, 139, 39, 1);
border-radius: 8upx;
padding: 0 12upx 0 46upx;
color: #bdc4ce;
color: #ee8b27;
font-size: 24upx;
text-align: center;
line-height: 56upx;
}
.course_icon {
width: 32upx;
height: 32upx;
}
.course_name {
color: #ee8b27;
}
.course_single {
margin-bottom: 14upx;
image {
width: 20upx;
margin-right: 20upx;
}
view {
width: 432upx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
// 评论、点赞
.course_btn {
padding: 12upx 28upx;
color: #8C9198;
font-size: 24upx;
border: 2upx solid rgba(140, 145, 152, 1);
border-radius: 8upx;
margin-left: 24upx;
margin-top: 34upx;
image {
width: 32upx;
margin-right: 14upx;
// 无图标
.no_icon_single {
padding-left: 52upx;
font-size: 28upx;
color: #06121e;
margin-bottom: 14upx;
// 选择框
.score_picker {
width: 156upx;
height: 46upx;
background: rgba(249, 249, 249, 1);
border-radius: 8upx;
padding: 0 12upx 0 46upx;
color: #bdc4ce;
font-size: 24upx;
image {
width: 20upx;
}
}
}
}
.active {
border-color: #ff7441;
color: #ff7441;
// 评论、点赞
.course_btn {
padding: 12upx 28upx;
color: #8C9198;
font-size: 24upx;
border: 2upx solid rgba(140, 145, 152, 1);
border-radius: 8upx;
margin-left: 24upx;
margin-top: 34upx;
image {
width: 32upx;
margin-right: 14upx;
}
}
.active {
border-color: #ff7441;
color: #ff7441;
}
// 评论信息
.comment_msg {
border-top: 1px solid #eee;
padding-bottom: 20rpx;
// padding-top: 30upx;
// 点赞人员
.point_people {
margin-bottom: 20upx;
image {
width: 32upx;
width: 32upx;
margin-right: 22upx;
border-radius: 50%;
}
.point_detail {
color: #bdc4ce;
font-size: 28upx;
width: 556upx;
}
}
// 评论信息
.msg_detail {
color: #5b5e63;
font-size: 28upx;
.detail_single {
margin-bottom: 16upx;
text {
color: #ee8b27;
font-weight: 600;
margin-right: 10upx;
}
}
}
}
}
}
}
}
</style>
... ...
... ... @@ -22,63 +22,91 @@
</view>
<!-- 打卡 -->
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
<!-- <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
<view class="clock_single layer_nostar">打卡时间:{{date}}</view>
</picker>
</picker> -->
<view class="clock_single layer_nostar">
打卡感悟:
<text class='dakaganwu'>打卡感悟:</text>
<view class="flex_star">
<textarea v-model="content" value="" placeholder="请输入您的打卡感悟" @input="entertext" />
<image class="add_img" :src="image==''?'../../static/tianjia_img@2x.png':image" mode="widthFix" @click="chooseImage"></image>
<textarea v-model="gantext" value="gantext" placeholder="请输入您的打卡感悟" @input="entertext" maxlength="2000"/>
<view class="flexone imagebox">
<view class="addimg" v-for="(item,index) in image" :key="index">
<image class="add_img" :src="item" mode=""></image>
<view class="closeimg" @click="deleteimg" :data-url="item">
<image src="../../static/close.png"></image>
</view>
</view>
<view class="imgadd">
<image class="add_img" src="../../static/addpic.png" mode="widthFix" @click="chooseImage"></image>
</view>
</view>
</view>
</view>
<!-- 自我打分 -->
<view class="self_mark">
<view class="mark_title">自我打分:</view>
<view class="layer_star no_icon_single">
完成事件打分:
<picker mode="selector" :range="completeList" @change="changeComplete">
<view class="score_picker layer_between">
<view>{{ completeList[complete] ? completeList[complete] : '请打分' }}</view>
<image src="../../static/start_01.png" mode="widthFix"></image>
</view>
</picker>
</view>
<view class="layer_star no_icon_single">
情绪状态打分:
<picker mode="selector" :range="feeling" @change="changefeel">
<view class="layer_star no_icon_single" v-for="(item,index) in scorelist" :key="index">
{{item.title}}:
<picker mode="selector" :range="item.score" @change="changeComplete" :value="item.indexk" :data-index="index">
<view class="score_picker layer_between">
<view>{{completeList[feelindex] ? completeList[feelindex] : '请打分' }}</view>
<view>{{item.name}}</view>
<image src="../../static/start_01.png" mode="widthFix"></image>
</view>
</picker>
</view>
</view>
<!-- 按钮 -->
<view class="submit_btn" @click="submitClock()">打卡</view>
<view v-if="item==''">
<view class="submit_btn" @click="submitClock()" v-if="daka==false">打卡</view>
<view class="submit_btn" v-else>打卡</view>
</view>
<view v-else>
<view class="submit_btn" @click="editClock()" v-if="dakak==false">
修改
</view>
<view class="submit_btn" v-else>修改</view>
</view>
<!-- 弹窗 -->
<view class="tx_mask" v-if="isDialog" @click="closeDialog"></view>
<view class="mask_content" v-if="isContent">
<view class="content_tips">打卡内容不能为空,请重新编辑</view>
<view class="content_btn" @click="closeDialog">确定</view>
</view>
<!-- 海报 -->
<view class="canvas_dialog" v-if="isCanvas">
<canvas style="width: 100%;height: 690;backgroundColor: #FFFFFF" canvas-id="myCanvas"></canvas>
<!-- 保存、分享按钮 -->
<view class="layer_around share_group_btn">
<view class="layer_around share_btn">
<image src="../../static/baocun_icon@2x.png" mode="widthFix"></image>
保存图片
<view class="register" v-if="isCanvas">
<view class="canvas_dialog" >
<!-- <canvas style="width: 100%;height: 690;backgroundColor: #FFFFFF" canvas-id="myCanvas"></canvas> -->
<view class="topimg">
<image :src="posterimg"></image>
</view>
<view class="layer_around share_btn">
<image src="../../static/fenxiang_icon@2x.png" mode="widthFix"></image>
立即分享
<button open-type="share"></button>
<!-- 保存、分享按钮 -->
<view class="layer_around share_group_btn">
<view class="layer_around share_btn" @click="cancel">
<image src="../../static/baocun_icon@2x.png" mode="widthFix"></image>
取消
</view>
<view class="layer_around share_btn" @click='baocun'>
<image src="../../static/baocun_icon@2x.png" mode="widthFix"></image>
保存图片
<!-- <button open-type="share"></button> -->
</view>
</view>
</view>
</view>
</view>
</template>
... ... @@ -122,7 +150,16 @@ export default {
// 传的图片
cimage:[],
eventid:'',
ganid:''
ganid:'',
item:'',
change:'',
posterimg:'',
// 打分数组
scorelist:[],
clock_log_id:'',
changetype:'',
daka:false,
dakak:false
};
... ... @@ -132,11 +169,39 @@ export default {
// 设为隐私
setpricy(){
this.is_privacy=1
this.is_privacy=1;
// let that=this;
// let url='/api/clock/set_privacy'
// let param = {
// clock_log_id:this.clock_log_id
// }
// app.post(url, param)
// .then(r => {
// console.log(r)
// uni.showToast({
// title:'设为隐私成功',
// icon:'none'
// })
// })
},
// 取消隐私
cancelpricy(){
this.is_privacy=2
this.is_privacy=2;
// let that=this;
// let url='/api/clock/set_privacy'
// let param = {
// clock_log_id:this.clock_log_id
// }
// app.post(url, param)
// .then(r => {
// console.log(r)
// uni.showToast({
// title:'取消隐私成功',
// icon:'none'
// })
// })
},
// 获取打分项目
... ... @@ -144,36 +209,45 @@ export default {
let that = this;
var url = '/api/clock/score_option';
var params = {
course_id:that.course_id
}
app.post(url, params,"post").then((res) => {
//事件id 情感id
that.eventid=res[0].id,
that.ganid=res[1].id
// 完成事件
if(res[0].min==res[0].max){
that.completeList.push(res[0].min)
}else{
for(var i=res[0].min;i<res[0].max;i++){
console.log(i)
that.completeList.push(i)
}
}
// 情感状态
if(res[1].min==res[1].max){
that.feeling.push(res[1].min)
}else{
for(var i=res[1].min;i<res[1].max;i++){
console.log(i)
that.feeling.push(i)
}
}
that.feeling=that.feeling;
console.log(that.feeling)
for(var obj of res){
obj.score=[];
obj.name='请打分';
obj.indexk=0;
if(obj.min==obj.max){
obj.score.push(obj.max)
}else{
for(var i=obj.min;i<=obj.max;i++){
obj.score.unshift(i)
}
}
}
that.scorelist=res
// 给打分项赋默认值
if(that.item!=''){
for(var i=0;i<that.scorelist.length;i++){
for(var j=0;j<that.item.clock_score.length;j++)
if(that.scorelist[i].title==that.item.clock_score[j].title){
that.scorelist[i].name=that.item.clock_score[j].score;
for(var k=0;k<that.scorelist[i].score.length;k++){
if(that.scorelist[i].score[k]==that.item.clock_score[j].score){
that.scorelist[i].indexk=k
}
}
}
}
// 给打分项赋值
that.scorelist.forEach(function(value,index,array){
that.scorearr[value.id]=value.name
})
}
that.scorearr=that.scorearr;
that.scorelist=that.scorelist
}).catch((err) => {
... ... @@ -181,25 +255,18 @@ export default {
},
// 完成事件打分
changeComplete(e) {
let kid=this.eventid;
let obj={
}
obj[this.eventid]=e.detail.value;
this.complete = e.detail.value;
this.scorearr[this.eventid]=e.detail.value;
console.log(this.scorearr)
},
// 情感状态
changefeel(e){
let obj={
}
obj[this.ganid]=e.detail.value;
this.feelindex=e.detail.value;
this.scorearr[this.ganid]=e.detail.value;
console.log(e)
let index=e.currentTarget.dataset.index;
let indexk=e.detail.value
let newscorelist=this.scorelist;
newscorelist[index].name=newscorelist[index].score[indexk];
this.scorelist=newscorelist;
// 传值
this.scorearr[newscorelist[index].id]=newscorelist[index].score[indexk];
console.log(this.scorearr)
},
// 修改日期
getDate(type) {
const date = new Date();
... ... @@ -222,7 +289,9 @@ export default {
// 输入打卡感悟
entertext(e){
this.gantext=e.detail.value ;
let str=e.detail.value;
str = str.split('&hc').join('\n');
this.gantext=str ;
console.log(this.gantext)
},
... ... @@ -237,11 +306,16 @@ export default {
console.log(res.tempFilePaths[0])
app.upload('image', res.tempFilePaths[0],"post").then((res) => {
console.log('上传文件', res);
that.image=res.url
that.cimage=res.kurl
console.log('99887',that.image)
let newimage=that.image;
newimage.push(res.url);
console.log(newimage)
console.log(res.url)
that.iamge=newimage
// that.image.push(res.url)
// that.cimage.push(res.kurl)
// that.image=that.image;
// that.cimage=that.cimage
}).catch((err) => {
console.log(err)
})
... ... @@ -249,114 +323,372 @@ export default {
fail: function (res) { }
})
},
// 提交
// 删除图片
deleteimg(e){
console.log(e)
var url=e.currentTarget.dataset.url;
console.log(url)
for(var i=0;i<this.image.length;i++){
if(url==this.image[i]){
this.image.splice(i,1);
// this.cimage.splice(i,1)
}
}
this.image=this.image;
this.cimage=this.cimage;
},
// 获取详情
getcordtail(){
let that=this;
let url='/api/clock/edit_clock_view'
let param = {
clock_log_id:that.clock_log_id
}
app.post(url, param)
.then(r => {
console.log(r)
that.item=r;
console.log('7896754',that.item)
this.gantext=r.content;
this.date=r.createtime;
this.is_privacy=r.is_privacy;
this.image=r.images==null?[]:r.images;
this.cimage=r.images==null?[]:r.images;
console.log(this.image)
that.getfenshu()
})
},
// 提交
submitClock() {
var that = this;
that.daka=true
if (!that.isClick) {
if(that.gantext==''){
uni.showToast({
title:'请输入打卡感悟',
icon:"none"
})
that.daka=false
return false
}
if(that.image==''){
uni.showToast({
title:'请上传图片',
icon:"none"
})
return false
for(var obj of that.scorelist){
if(obj.name=='请打分'){
uni.showToast({
title:'请选择打分事项',
icon:'none'
})
that.daka=false
return false
}
}
console.log(that.scorearr[that.eventid])
if(that.scorearr[that.eventid]==undefined){
uni.showLoading({
title: '加载中'
});
var url = '/api/clock/clock';
var params = {
content:that.gantext,
course_id:that.course_id,
customs_id:that.customs_id,
images:that.image.join(","),
clock_score:JSON.stringify(that.scorearr),
is_privacy:that.is_privacy,
}
app.post(url, params).then((res) => {
uni.hideLoading();
console.log(res);
setTimeout(function(){
uni.showToast({
title: '打卡成功',
icon: 'success',
});
},200)
setTimeout(function() {
uni.showLoading({
title: '海报加载中'
});
}, 800);
that.posterimg=res.poster;
that.savefilecode();
setTimeout(function(){
uni.hideLoading();
that.isCanvas=true;
},2000)
// setTimeout(function() {
// }, 3500);
}).catch((err) => {
console.log(err)
uni.showToast({
title:err.msg,
icon:'none'
})
})
}
},
// 修改打卡
editClock(){
var that=this;
console.log('448958989')
that.dakak=true
if (!that.isClick) {
if(that.gantext==''){
uni.showToast({
title:'请选择完成事件打分',
title:'请输入打卡感悟',
icon:"none"
})
that.dakak=false
return false
}
if(that.scorearr[that.ganid]==undefined){
uni.showToast({
title:'请选择情感状态打分',
icon:"none"
})
// if(that.image==''){
// uni.showToast({
// title:'请上传图片',
// icon:"none"
// })
return false
// return false
// }
for(var obj of that.scorelist){
if(obj.name=='请打分'){
uni.showToast({
title:'请选择打分事项',
icon:'none'
})
that.dakak=false
return false
}
}
console.log(that.scorearr)
var url = '/api/clock/clock';
var url = '/api/clock/edit_clock';
var params = {
type: that.type,
id:that.clock_log_id,
content:that.gantext,
course_id:that.course_id,
customs_id:that.customs_id,
images:that.cimage,
array:JSON.stringify(that.scorearr),
images:that.image==null?'':that.image.join(","),
clock_score:JSON.stringify(that.scorearr),
is_privacy:that.is_privacy,
}
app.post(url, params).then((res) => {
console.log(res);
// this.isDialog = true;
// this.isContent = true;
uni.showToast({
title: '打卡成功',
icon: 'success',
duration: 3000
});
uni.showToast({
title: '修改成功',
icon: 'seccess',
duration:1000
});
console.log(that.changetype)
setTimeout(function(){
if(that.changetype==1){
uni.navigateTo({
url:"/pages/course/courseDetail?id="+that.customs_id+'&courseid='+that.course_id
})
}else{
uni.switchTab({
url:'/pages/mine/mine'
})
}
},1500)
}).catch((err) => {
console.log(err)
})
// setTimeout(function() {
// // 海报
// t.isCanvas = true;
// t.isDialog = true;
// t.getCanvas();
// }, 3000);
}
}
},
// 绘制海报
getCanvas() {
var ctx = uni.createCanvasContext('myCanvas');
// 背景图
// ctx.drawImage("../../static/bg.png", 0, 0, 375, 550);
// ctx.save();
// // 头像圆
// ctx.arc(198, 43, 30, 0, 2 * Math.PI)
// ctx.arcTo(100, 100, 120, 120, 10)
// ctx.setFillStyle('#fff')
// ctx.fill()
// ctx.save()
// // 头像
// ctx.drawImage("../../static/header.png",173,18,50,50);
// ctx.save();
// // 昵称
// var name = "赚钱的小李";
// ctx.setFontSize(14);
// ctx.fillText(name,162,90);
// ctx.save()
// // 二维码
// ctx.drawImage("../../static/qr.png",120,335,140,140);
// ctx.save();
// ctx.draw();
baocun: function () {
console.log(999)
var that = this
uni.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
uni.authorize({
scope: 'scope.writePhotosAlbum',
success() { //这里是用户同意授权后的回调
uni.saveImageToPhotosAlbum({
filePath: that.posterimg,
success(res) {
uni.showModal({
content: '图片已保存到相册',
showCancel: false,
confirmText: '好的',
confirmColor: '#333',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
setTimeout(function(){
uni.navigateTo({
url:"/pages/course/courseDetail?id="+that.customs_id+'&courseid='+that.course_id
})
},1500)
/* 该隐藏的隐藏 */
// that.setData({
// maskHidden: false
// })
}else{
}
},
fail: function (res) {
}
})
}
})
},
fail() { //这里是用户拒绝授权后的回调
uni.showModal({
title: '提示',
content: '您取消授权,无法保存图片,点击确定打开权限',
success(res) {
if (res.confirm) {
console.log('用户点击确定')
uni.openSetting({
success(res) {
console.log(res.authSetting)
// res.authSetting = {
// "scope.userInfo": true,
// "scope.userLocation": true
// }
}
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
})
} else { //用户已经授权过了
// console.log(that.data.codeurl)
uni.saveImageToPhotosAlbum({
filePath: that.posterimg,
success(res) {
uni.showModal({
content: '图片已保存到相册',
showCancel: false,
confirmText: '好的',
confirmColor: '#333',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
setTimeout(function(){
uni.redirectTo({
url:"/pages/course/courseDetail?id="+that.customs_id+'&courseid='+that.course_id
})
},1500)
/* 该隐藏的隐藏 */
// that.setData({
// maskHidden: false
// })
}else{
}
},
fail: function (res) {
}
})
}
})
}
}
})
},
savefilecode() {
let that = this;
uni.downloadFile({
url: that.posterimg,
header: {},
success: function (res) {
console.log('下载图片下载图片下载图片', res)
var tempFilePath = res.tempFilePath
//console.log('临时文件地址是:' + tempFilePath)
uni.saveFile({
tempFilePath: tempFilePath,
success: function (res) {
console.log(res)
var saveFilePath = res.savedFilePath;
that.posterimg=res.savedFilePath
console.log('123456855555555', that.posterimg)
}, //可以将saveFilePath写入到页面数据中
fail: function (res) { },
complete: function (res) {
console.log('complete后的res数据:')
},
}) //,
},
// fail: function (res) {
// wx.showModal({
// title: '下载失败',
// content: '请联系管理员',
// })
// },
complete: function (res) { },
})
},
//关闭海报
cancel(){
let that=this;
this.isCanvas=false
setTimeout(function(){
uni.redirectTo({
url:"/pages/course/courseDetail?id="+that.customs_id+'&courseid='+that.course_id
})
},100)
},
// 关闭弹窗
closeDialog() {
this.isDialog = false;
... ... @@ -366,11 +698,23 @@ export default {
},
onLoad(options) {
console.log(options)
console.log('999',options)
this.customs_id=options.custom_id;
this.course_id=options.courseid;
console.log(this.customs_id);
console.log(this.course_id)
if(options.changetype!=undefined){
this.changetype=options.changetype
}
if(options.change==1){
console.log(8888)
// var item=JSON.parse(options.item)
// console.log(item)
this.clock_log_id=options.clock_log_id;
this.getcordtail()
}
this.getfenshu()
},
// 分享
... ... @@ -387,11 +731,40 @@ export default {
</script>
<style lang="scss">
.register{
z-index:9999;
}
.canvas_dialog{
z-index:99999;
}
.clockimg{
width:32rpx;
height:32rpx;
font-size: 0;
}
.dakaganwu{
width:353rpx;
}
.imagebox{
flex-wrap: wrap;
}
.topimg{
width:100%;
height:905rpx;
}
.addimg{
position: relative;
margin-right:32rpx;
}
.closeimg{
width:36rpx;
height:36rpx;
font-size: 0;
position: absolute;
right:-20rpx;
top:0
}
.submit_clock {
border-top: 24upx solid #fafbfd;
padding: 50upx 32upx;
... ... @@ -490,6 +863,7 @@ export default {
}
// 分享按钮
.share_group_btn {
margin-top:25rpx;
.share_btn {
width: 192upx;
height: 62upx;
... ...
<template>
<view class="discovery_wrap">
<view class="bannerimg">
<!-- <view class="bannerimg">
<image :src="bannerimg" mode=""></image>
</view>
</view> -->
<!-- 轮播图 -->
<!-- <swiper :indicator-dots="true" :circular="true" :autoplay="true" :interval="3000" indicator-active-color="#fff" indicator-color="rgba(255,255,255,0.5)" :duration="1000">
<swiper-item v-for="(item,index) in swiperList" :key="index">
<swiper :indicator-dots="true" :circular="true" :autoplay="true" :interval="3000" indicator-active-color="#fff" indicator-color="rgba(255,255,255,0.5)" :duration="1000">
<swiper-item v-for="(item,index) in bannerimg" :key="index">
<view class="swiper-item">
<image :src="item.image" mode=""></image>
</view>
</swiper-item>
</swiper> -->
</swiper>
<!-- 推荐课程 -->
<view class="recommend_course">
<!-- 标题 -->
... ... @@ -22,7 +22,9 @@
</view>
</view>
<!-- 推荐的课程 -->
<view class="courses_box">
<view class="nodata" v-if="courseList.length==0&&time==true">暂无课程</view>
<view class="courses_box" v-else>
<view class="courses_list">
<view class="courses_single justify_between" :class="{no_bot:noBot == index+1}" v-for="(item,index) in courseList" :key="index" @click="toCourseIntro(item)">
<!-- 左侧 -->
... ... @@ -33,7 +35,8 @@
<view class="layout_row course_status">
<image src="../../static/index_07.png" mode=""></image>
<view class="status_des" v-if="item.state==1">正在进行</view>
<view class="status_des" v-if="item.state==2">已结束</view>
<view class="status_des" v-if="item.state==2">未开始</view>
<view class="status_des" v-if="item.state==3">已结束</view>
</view>
</view>
<!-- 右侧 -->
... ... @@ -55,12 +58,12 @@
swiperList:[
],
bannerimg:'',
bannerimg:[],
courseList:[],
noBot:3,
page:1,
pageNum:10,
time:false
}
},
... ... @@ -72,22 +75,13 @@
let url='/api/index/index'
let Userid = uni.getStorageSync('userid')
let param = {
// page: that.page,
// pageNum: that.pageNum
page: that.page,
pageNum: 10
};
app.post(url, param, 'get').then(r => {
console.log(r)
that.courseList=r.list
that.courseList=that.courseList.concat(r)
}).catch(err => {
console.log(err)
... ... @@ -104,18 +98,9 @@
};
app.post(url, param, 'get').then(r => {
console.log(r)
that.bannerimg=r.image
that.bannerimg=r
}).catch(err => {
console.log(err)
... ... @@ -129,15 +114,94 @@
// var item=JSON.stringify(item)
// console.log(item)
// wx.setStorageSync("item",JSON.stringify(item))
wx.setStorageSync("item", item)
uni.navigateTo({
url:"/pages/course/courseIntro"
// wx.setStorageSync("item", item)
let token=uni.getStorageSync("token")
if(token==''){
uni.showToast({
title:'请先登录',
icon:'none'
})
setTimeout(function(){
uni.navigateTo({
url:"/pages/start/start"
})
},1500)
}else{
uni.navigateTo({
url:"/pages/course/courseIntro?id="+item.id
})
}
},
// 获取用户信息
getuserinfo() {
let that = this;
var url = '/api/index/user_info';
var params = {
}
app.post(url, params, "post").then((res) => {
console.log(res);
}).catch((err) => {
console.log(err)
if (err.msg == '您已被拉黑') {
uni.showToast({
title: err.msg,
icon: "none"
})
setTimeout(function() {
uni.navigateTo({
url: '/pages/start/start'
})
}, 1500)
} else if (err.msg == '用户未登录') {
wx.showToast({
title: '请重新登录',
icon: 'none'
})
uni.clearStorageSync();
setTimeout(function(){
uni.navigateTo({
url:'/pages/start/start'
})
},1500)
}
})
},
},
onLoad() {
},
onShow: function(){
console.log(34437347)
this.page=1;
this.courseList=[];
this.getcourselist();
this.getbanner()
this.getbanner();
this.getuserinfo();
setTimeout(function(){
this.time=true
},1000)
},
onReachBottom() {
var newpage = this.page;
newpage++;
this.page = newpage
this.getcourselist()
},
}
</script>
... ...
... ... @@ -7,16 +7,16 @@
<view class="enteritem flextwo">
<view class="enterleft">昵称</view>
<view class="enterright flexone">
<view class="enterword"><input type="text" v-model="nickName" placeholder="请输入昵称" /></view>
<view class="yourow"><image src="../../static/yourow.png" mode=""></image></view>
<view class="enterword"><input type="text" v-model="nickName" placeholder="请输入昵称" @input="entername"/></view>
<!-- <view class="yourow"><image src="../../static/yourow.png" mode=""></image></view> -->
</view>
</view>
<view class="enteritem flextwo">
<view class="enterleft">绑定手机号</view>
<view class="enterright flexone">
<view class="enterword"><input type="number" v-model="phone" maxlength="11" placeholder="请输入绑定手机号" /></view>
<view class="yourow"><image src="../../static/yourow.png" mode=""></image></view>
<view class="enterword"><input type="number" v-model="phone" maxlength="11" placeholder="请输入绑定手机号" @input="enterphone"/></view>
<!-- <view class="yourow"><image src="../../static/yourow.png" mode=""></image></view> -->
</view>
</view>
... ... @@ -24,9 +24,9 @@
<view class="picker">
<!-- 当前选择:{{array[index]}} -->
<view class="enteritem flextwo">
<view class="enterleft">所行业</view>
<view class="enterleft">所行业</view>
<view class="enterright flexone">
<view class="enterword">{{ industyname }}</view>
<view class="enterword">{{industryName}}</view>
<view class="yourow"><image src="../../static/yourow.png" mode=""></image></view>
</view>
</view>
... ... @@ -38,7 +38,7 @@
<view class="enteritem flextwo">
<view class="enterleft">职业</view>
<view class="enterright flexone">
<view class="enterword">{{ occupationname }}</view>
<view class="enterword">{{ occupationName }}</view>
<view class="yourow"><image src="../../static/yourow.png" mode=""></image></view>
</view>
</view>
... ... @@ -59,7 +59,7 @@ export default {
// 原数据
industryStart: [],
industryarray: [],
industyname: '请选择行业',
industryName: '请选择行业',
industyindex: 0,
// 行业id
industryId: '',
... ... @@ -68,7 +68,7 @@ export default {
occupationStart: [],
occupationarray: [],
occupationindex: 0,
occupationname: '请选择职业',
occupationName: '请选择职业',
// 职业id
occupationId: '',
// 头像
... ... @@ -76,10 +76,50 @@ export default {
// 昵称
nickName: '',
// 手机号
phone: ''
phone: '',
userinfo:'',
};
},
methods: {
// 输入姓名
entername(e){
this.nickName=e.detail.value
},
enterphone(){
this.phone=phone
},
// 获取用户信息
getuserinfo(){
let that = this;
var url = '/api/index/user_info';
var params = {
}
app.post(url, params,"post").then((res) => {
console.log(res);
that.userinfo=res;
that.avatarUrl=res.avatar;
that.userName=res.nickname;
that.nickName=res.nickname;
console.log('89900',that.nickname)
that.phone=res.mobile;
if(res.profession!=null){
that.industryName=res.profession
}
if(res.profession!=0){
that.occupationName=res.occupation
}
}).catch((err) => {
})
},
// 修改头像
uploadAvatar() {
let t = this;
... ... @@ -109,24 +149,25 @@ export default {
},
// 选择行业
bindindustyChange: function(e) {
this.industyname = this.industryarray[e.detail.value];
uni.setStorageSync('industyname', this.industyname);
this.industryName = this.industryarray[e.detail.value];
uni.setStorageSync('industryName', this.industryName);
// 获取行业id
this.industryStart.forEach(ele => {
if (ele.name == this.industyname) {
if (ele.name == this.industryName) {
this.getOccupation(ele.id);
this.industryId = ele.id;
uni.setStorageSync('industryId', ele.id);
}
});
this.occupationName="请选择职业";
},
// 选择职业
bindoccupationchange: function(e) {
this.occupationname = this.occupationarray[e.detail.value];
uni.setStorageSync('occupationname', this.occupationname);
this.occupationName = this.occupationarray[e.detail.value];
uni.setStorageSync('occupationName', this.occupationName);
// 获取职业id
this.occupationStart.forEach(ele => {
if (ele.name == this.occupationname) {
if (ele.name == this.occupationName) {
this.occupationId = ele.id;
uni.setStorageSync('occupationId', ele.id);
}
... ... @@ -135,47 +176,82 @@ export default {
// 获取行业列表
getIndustry() {
this.industryarray = [];
let t = this;
let that = this;
let url = '/api/category/category';
app.post(url).then(res => {
// 行业原数据
this.industryStart = res.list;
res.list.forEach(ele => {
this.industryarray.push(ele.name);
that.industryStart = res.list;
let arr=[]
res.list.forEach(function(value, index, array) {
arr.push(value.name);
if (value.name == that.industryName) {
that.industyindex = index;
let id = value.id;
that.getOccupation(id)
}
});
that.industryarray=arr
});
},
// 获取职业列表
getOccupation(id) {
let t = this;
let that = this;
let url = '/api/category/sub_category';
let params = {
categoty_id: id
};
app.post(url, params).then(res => {
console.log(res)
this.occupationStart = res.list;
let arr = [];
res.list.forEach(ele => {
arr.push(ele.name);
res.list.forEach(function(value, index, array) {
arr.push(value.name);
if (value.name == that.occupationName) {
that.occupationindex = index;
}
});
this.occupationarray = arr;
console.log(this.occupationarray)
});
},
// 修改个人信息
submitPerson() {
let t = this;
let url = '/api/user/update';
if (t.industryId && t.occupationId && t.nickName && t.phone) {
if(t.industryName=='请选择行业'){
uni.showToast({
title:'请选择行业',
icon:'none'
})
return false
}
if(t.occupationName=='请选择职业'){
uni.showToast({
title:'请选择职业',
icon:'none'
})
return false
}
if (t.nickName!='' && t.phone!='') {
let params = {
avatar: t.avatarUrl,
nickname: t.nickName,
mobile: t.phone,
profession: t.industryId,
occupation: t.occupationId
profession: t.industryName,
occupation: t.occupationName
};
app.post(url, params).then(res => {
uni.showToast({
title: '修改成功',
title: '提交成功',
icon: 'none',
duration: 1500
});
... ... @@ -203,14 +279,15 @@ export default {
this.avatarUrl = uni.getStorageSync('avatarUrl');
this.nickName = uni.getStorageSync('nickName');
this.phone = uni.getStorageSync('phone');
if (uni.getStorageSync('industyname')) {
this.industyname = uni.getStorageSync('industyname');
if (uni.getStorageSync('industryName')) {
this.industryName = uni.getStorageSync('industryName');
}
if (uni.getStorageSync('occupationname')) {
this.occupationname = uni.getStorageSync('occupationname');
if (uni.getStorageSync('occupationName')) {
this.occupationName = uni.getStorageSync('occupationName');
}
this.industryId = uni.getStorageSync('industryId');
this.occupationId = uni.getStorageSync('occupationId');
this.getuserinfo()
},
onHide: function() {}
};
... ...
... ... @@ -4,9 +4,9 @@
<image src="../../static/toppic.png" mode=""></image>
<view class="topinfo flexone">
<view class="topinfoimg">
<image src="../../static/header.png" mode=""></image>
<image :src="avatar" mode=""></image>
</view>
<view class="peoplename">两只老虎</view>
<view class="peoplename">{{nickname}}</view>
</view>
</view>
<view class="circlebox">
... ... @@ -40,19 +40,20 @@
<!--#endif-->
</view>
<!--
<view class="atten flex">
<view class='attenleft'>注:</view>
<view class='attenright'>黄色代表完成事件打分,蓝色代表情绪状态打分。
x轴代表分数,y轴代表时间。</view>
</view>
-->
</view>
</view>
</template>
<script>
import app from "../../App.vue";
import uCharts from '@/components/u-charts/u-charts.js';
import {
isJSON
... ... @@ -67,10 +68,19 @@
cHeight: '',
pixelRatio: 1,
textarea: '',
sel:1
sel: 1,
userName: '',
avatarUrl: '',
courseid: '',
max:'',
min:'',
number:'',
avatar:'',
nickname:''
}
},
onLoad() {
onLoad(options) {
this.courseid = options.id
_self = this;
//#ifdef MP-ALIPAY
uni.getSystemInfo({
... ... @@ -88,31 +98,87 @@
this.getServerData();
},
methods: {
selitem(e){
this.sel=e.currentTarget.dataset.id;
selitem(e) {
this.sel = e.currentTarget.dataset.id;
this.getServerData()
},
getServerData() {
uni.request({
url: 'https://www.ucharts.cn/data.json',
data: {},
success: function(res) {
console.log(res.data.data)
let LineA = {
categories: [],
series: []
};
//这里我后台返回的是数组,所以用等于,如果您后台返回的是单条数据,需要push进去
LineA.categories = res.data.data.LineA.categories;
LineA.series = res.data.data.LineA.series;
_self.textarea = JSON.stringify(res.data.data.LineA);
_self.showLineA("canvasLineA", LineA);
},
fail: () => {
_self.tips = "网络错误,小程序端请检查合法域名";
},
});
let that = this;
var url = '/api/clock/score';
var params = {
course_id: that.courseid,
type: that.sel
}
app.post(url, params).then((res) => {
console.log(res);
this.avatar=res.avatar;
this.nickname=res.nickname;
let LineA = {
categories: [],
series: []
};
var data=[];
res.data.forEach(function(value,index,array){
data.push(value)
})
var time=
// ["2020-03-23", "2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28"]
// var datak=[{name: "完成事件打分", data: [6,8,9]},{name: "情绪状态打分", data: [4,5,6]},{name: "优异度", data: [1,310]}];
that.max=Number(res.max)+2;
that.min=Number(res.min)-2;
console.log(that.max);
console.log(that.min)
that.number=(Number(that.max)-Number(that.min))/2;
LineA.categories=res.time;
// LineA.categories=time;
LineA.series = res.data;
console.log(LineA);
_self.textarea = JSON.stringify(LineA);
_self.showLineA("canvasLineA", LineA);
}).catch((err) => {
})
},
// getServerData() {
// uni.request({
// url: 'https://www.ucharts.cn/data.json',
// data: {},
// success: function(res) {
// console.log(res.data)
// console.log(res.data.data)
// let LineA = {
// categories: [],
// series: []
// };
// //这里我后台返回的是数组,所以用等于,如果您后台返回的是单条数据,需要push进去
// console.log(res.data.data.LineA)
// LineA.categories = res.data.data.LineA.categories;
// LineA.series = res.data.data.LineA.series;
// console.log('87765',LineA)
// _self.textarea = JSON.stringify(res.data.data.LineA);
// _self.showLineA("canvasLineA", LineA);
// },
// fail: () => {
// _self.tips = "网络错误,小程序端请检查合法域名";
// },
// });
// },
showLineA(canvasId, chartData) {
canvaLineA = new uCharts({
$this: _self,
... ... @@ -146,11 +212,14 @@
yAxis: {
//disabled:true
gridType: 'dash',
splitNumber: 8,
min: 10,
max: 180,
splitNumber: this.number,
min: this.min,
max: this.max,
// splitNumber: 8,
// min: 0,
// max: 180,
format: (val) => {
return val.toFixed(0)
return val.toFixed(0)
} //如不写此方法,Y轴刻度默认保留两位小数
},
width: _self.cWidth * _self.pixelRatio,
... ... @@ -167,6 +236,7 @@
canvaLineA.scrollStart(e);
},
moveLineA(e) {
console.log(e)
canvaLineA.scroll(e);
},
touchEndLineA(e) {
... ... @@ -195,6 +265,10 @@
})
}
}
},
onshow() {
this.userName = uni.getStorageSync('nickName');
this.avatarUrl = uni.getStorageSync('avatarUrl');
}
}
</script>
... ... @@ -205,41 +279,48 @@
page {
background: #f9f9f9;
}
.atten{
color:#8C9198;
font-size:24upx;
.qiun-columns{
width:750rpx;
}
.atten {
color: #8C9198;
font-size: 24upx;
padding: 32upx 28upx;
}
.nav{
height:84upx;
width:100%;
.nav {
height: 84upx;
width: 100%;
}
.navitem{
width:138upx;
.navitem {
width: 138upx;
text-align: center;
color:#06121E;
color: #06121E;
font-size: 28upx;
font-weight: bold;
}
.navactive{
.navactive {
position: relative;
color:#EE8B27
color: #EE8B27
}
.navactive:after{
display:block;
content:'';
width:138upx;
height:1upx;
background:red ;
.navactive:after {
display: block;
content: '';
width: 138upx;
height: 1upx;
background: red;
// position: absolute;
// bottom:0upx;
// left:50%;
// transform: translateX(-50%);
}
.circlebox{
width:686upx;
margin:32upx auto 0;
.circlebox {
width: 686upx;
margin: 32upx auto 0;
background: #fff;
}
... ... @@ -253,8 +334,11 @@
width: 120upx;
height: 120upx;
font-size: 0;
border-radius: 50%;
}
.topinfoimg image{
border-radius: 50%;
}
.peoplename {
color: #fff;
font-size: 32upx;
... ...