Skip to content

E
educationStu
Commit 95fff39c authored by 罗超's avatar 罗超
Browse files
Options

2

parent 6d8243d6
Hide whitespace changes
Inline Side-by-side
Showing with 794 additions and 1129 deletions
src/pages/index/index.vue
View file @ 95fff39c
<template> <template>
<view class="page-box"> <view class="indexpage">
<!-- <van-nav-bar :border="fasle" fixed :z-index="99"> <navbar>
<view slot="left" class="page-title" title="shouye">首页</view> <view class="navbarCon">
</van-nav-bar> --> <view class="pagetitle" @click="jumpPage('/pages/login/login')">
<navbar> 首页
<view class="navbar-con"> </view>
<view class="pagetitle"> <view class="loginBox">
首页 <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/login2x.png"
mode="aspectFit" class="loginIcon" id="loadImg" ></image>
登录
</view>
<view class="scanBox">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/scan2x.png"
mode="aspectFit" class="scanIcon"></image>
<view class="scanText">
签到
</view>
</view>
</view> </view>
</navbar>
<view class="activeContent" v-if="ActivityList.length >= 0">
<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" indicator-color="#CCCCCC"
indicator-active-color="#000000" :vertical="true" circular>
<swiper-item v-for="(item, index) in ActivityList" :key="index" @click="goActiveDetail(item.Id)">
<view class="swiperList" :style="{
'background-image': item.CoverImg
? `url(${item.CoverImg})`
: `url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/defaultBgimg.png)`,
}">
<view class="swiper_Time">{{ item.BMStart }}</view>
<view class="swiper_Name">{{ item.ActivityName }}</view>
</view>
</swiper-item>
</swiper>
</view> </view>
</navbar> <view class="wordBox">
<view class="con"> <view class="wordTitle">
<view class="personInfo flex flex_start_center"> 单词积分
<van-image </view>
round <view class="flex_around_center ">
width="100rpx" <view class="wordItem">
height="100rpx" <text class="wordItemTitle">今日新词</text>
fit="cover" <text class="wordItemText">{{pageData.Words.NextWord}}<text class="wordItemTextUnit">词</text></text>
:src="userinfo.UserIcon ? userinfo.UserIcon : userinfo.GroupLogo" </view>
class="headimg" <view class="wordItem">
@click="jumpPage('/pages/login/login')" <text class="wordItemTitle">复习词语</text>
/> <text class="wordItemText">{{pageData.Words.ReviewWord}} <text
<view class="grow"> class="wordItemTextUnit">词</text></text>
<view class="name" v-if="userinfo.AccountName"> {{ userinfo.AccountName?userinfo.AccountName:'' }} </view>
<view v-else>
<indexassembly @success='againdata'></indexassembly>
</view>
<view class="phone">
{{ userinfo.Account?userinfo.Account:'' }}
</view>
</view>
<view class="saleInfo">
<view class="info1">
<van-icon
name="contact"
size="23rpx"
style="margin-right: 10rpx"
/>服务人员
</view>
<view class="info2 one_line">
<text style="margin-right: 10rpx">课程顾问</text
>{{ userinfo.EnterPhone2?userinfo.EnterPhone2:'无' }}
</view>
</view>
</view>
<view class="baseInfo flex flex_wrap">
<view
class="baseInfo_item flex flex_between_center"
v-for="(item, index) in baseInfo"
:key="index"
:style="{ 'background-color': item.bgcolor }"
@click="jumpPage(item.jumpUrl)"
>
<view style="height: 100%; max-width: 120rpx">
<view class="baseInfo_name">
{{ item.name }}
</view>
<view class="baseInfo_desc one_line" :title="item.desc">
{{ item.desc }}
</view>
</view>
<van-image width="58rpx" height="66rpx" fit="cover" :src="item.img" />
</view>
</view>
<view class="LearningGarden flex flex_wrap">
<view
v-for="(item, index) in learnList"
:key="index"
class="LearningGarden-item"
:style="{ backgroundColor: item.bgcolor }"
@click="jumpPage(item.jumpUrl)"
>
<view class="LearningGarden-item-name">{{ item.name }}</view>
<view class="LearningGarden-item-desc">{{ item.desc }}</view>
<image :src="item.img" class="LearningGarden-item-img" />
</view>
</view>
<view class="title" v-if="indexData && indexData.FeedBackList && indexData.FeedBackList.length > 0">
课程反馈
</view>
<view class="feedback" v-if="indexData && indexData.FeedBackList && indexData.FeedBackList.length > 0">
<view class="feedback-info flex flex_start_center">
<image
:src="indexData.FeedBackList[0].TeacherIcon"
class="info-headimg"
/>
<view class="grow">
<view
class="teacher-name one_line"
v-if="indexData.FeedBackList[0].TeacherName"
>{{ indexData.FeedBackList[0].TeacherName }} {{indexData.FeedBackList[0].CourseName}} </view
>
<view class="rate">
<van-rate
:value="indexData.FeedBackList[0].Score"
:count="indexData.FeedBackList[0].Score"
icon="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/rate.png"
void-icon=""
size="24rpx"
/>
<text class="FeedBackTime">{{indexData.FeedBackList[0].ClassDateStr}}&nbsp;{{indexData.FeedBackList[0].StartTime}}</text>
</view>
</view>
<view
class="feedback-all"
@click="jumpPage('/pages/course/feedback')"
>
全部
<van-icon name="arrow" style="margin-left: 30rpx" />
</view>
</view>
<view class="two_line feedback-text">
{{ indexData.FeedBackList[0].Comment }}
</view>
<view class="flex">
<view
v-for="(item, index) in indexData.FeedBackList[0].PhotoList"
:key="index"
v-if="index === 0 || index === 1 || index === 2"
class="feedback-img"
>
<view style="width: 100%; height: 100%" >
<image
:src="item"
style="width: 100%; height: 100%"
mode="aspectFill"
v-if="item.indexOf('mp4')==-1"
@click="previewImage(item, index)"
>
</image>
<video :id="'myVideo'+index" :src="item" style="width: 100%; height: 100%;"
:controls='controls'
:show-center-play-btn='false'
:show-fullscreen-btn='false'
@fullscreenchange='videoControl'
v-if="item.indexOf('mp4')!=-1"
></video>
<view @click="enlarge(index)" v-if="item.indexOf('mp4')!=-1"
style="position: absolute;left: 50%;top: 50%;margin-top: -49rpx;margin-left: -49rpx;width: 98rpx;height: 98rpx;border-radius: 20rpx;background-color: rgba(255,255,255,.4);display: flex;align-items: center;justify-content: center;">
<!-- 播放按钮 -->
<image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png"
style="width: 37rpx;height: 44rpx;" mode=""></image>
</view> </view>
</view> </view>
<view class="wordDuration">
<view 预计用时10分钟
class="layer" </view>
v-if=" <view class="wordBtn">
indexData.FeedBackList[0].PhotoList.length > 3 && index === 2 开始学习
" </view>
></view> </view>
<view <view class="courseBox">
class="layer2 flex flex_center_center" <view class="courseInnerBox">
v-if=" <view class="top">
indexData.FeedBackList[0].PhotoList.length > 3 && index === 2 <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/classtime.png"
" mode="aspectFit" class="courseIcon"></image>
> <text class="courseDateStr"
+{{ indexData.FeedBackList[0].PhotoList.length - 3 }}</view style="margin: 0 16rpx 0 8rpx;">{{pageData.ClassNext.DateStr||'暂无'}}</text>
> <text class="courseDateStr"
</view> v-if="pageData.ClassNext.DateStart">{{pageData.ClassNext.DateStart}}</text>
</view> <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/classroom.png"
</view> mode="aspectFit" class="courseIcon" style="margin: 0 12rpx 0 50rpx;"></image>
<view class="activeContent" v-if="ActivityList.length > 0"> <text class="courseDateStr"
<swiper style="margin-right: 30rpx;">{{pageData.ClassNext.RoomName||'暂无'}}</text>
class="swiper" </view>
:indicator-dots="indicatorDots" <view class="flex">
:autoplay="autoplay" <view class="courseNameBox">
indicator-color="#CCCCCC" <view class="className">
indicator-active-color="#000000" {{pageData.ClassNext.ClassName||'暂无'}}
:vertical="true" </view>
circular <view class="courseName">
> {{pageData.ClassNext.CourseName||'暂无'}}
<swiper-item </view>
v-for="(item, index) in ActivityList" </view>
:key="index" <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/female2x.png"
@click="goActiveDetail(item.Id)" mode="aspectFit" class="courseIcon2"></image>
> </view>
<view </view>
class="swiperList" <view class="courseTitle">
:style="{ 下节课
'background-image': item.CoverImg </view>
? `url(${item.CoverImg})` </view>
: `url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/defaultBgimg.png)`, <view class="learningGarden">
}" <view class="learningGardenSbutitle">
> 扩展学习
<view class="swiper_Time">{{ item.BMStart }}</view> </view>
<view class="swiper_Name">{{ item.ActivityName }}</view> <view v-for="(item,index) in pageData.LearningGardenList" :key="index" v-if="item.List.length>0">
</view> <view class="learningGardenTitle">
</swiper-item> {{item.Name}}
</swiper> </view>
</view> <view class="gardenCon" v-for="(item1,index1) in item.List" :key="index1" id="img">
<view class="timetable"> <image :src="item1.Img" mode="aspectFill"
<view class="timetable_item flex flex_between_center"> style="width: 100%;height:100%;border-radius: 24rpx 24rpx 0 0;" ></image>
<text class="timetable_title">我的课表</text> <view class="gardenTextBox" :style="{background:'linear-gradient(0deg,'+getColor(item1.Img)}">
<view <view class="gardenTitle one_line">
class="timetable_btn" <!-- {{item1.Title}} -->
@click=" {{getColor(item1.Img)}}
jumpPage(`/pages/course/timeTable?classId=${indexData.ClassId}`) </view>
" <view class="gardenDigest one_line">
v-if="indexData.ClassPlan.TimeStart" {{item1.Digest}}
> </view>
全部 </view>
<van-icon name="arrow" style="margin-left: 30rpx" />
</view> </view>
</view> </view>
<view class="timetable_item2">
日期： </view>
<text v-if="indexData.ClassPlan.NewPlanDateTimeStr">{{ <canvas canvas-id="myCanvas" class="canvas" style="position:absolute;left: -1000px;"></canvas>
indexData.ClassPlan.NewPlanDateTimeStr <van-toast id="van-toast" />
}}</text> </view>
<text v-else>暂无</text>
</view>
<view class="timetable_item2">
时间：
<text v-if="indexData.ClassPlan.TimeStr">{{
indexData.ClassPlan.TimeStr
}}</text>
<text v-else>暂无</text>
</view>
<view class="timetable_item2">
老师：
<text v-if="indexData.ClassPlan.TeacherName">{{
indexData.ClassPlan.TeacherName
}}</text>
<text v-else>暂无</text>
</view>
<view class="timetable_item2">
状态：
<text v-if="indexData.ClassPlan.TimeStatusStr === 0">待上课</text>
<text v-if="indexData.ClassPlan.TimeStatusStr === 1">上课中</text>
<text v-if="indexData.ClassPlan.TimeStatusStr === 2">下课</text>
</view>
</view>
<van-cell-group :border="false">
<van-cell title="我的考试" title-class="title" :border="false">
<view
class="value"
@click="
jumpPage(`/pages/exam/examPaperList?Id=${indexData.GuestId}`)
"
>
查看更多
</view>
</van-cell>
</van-cell-group>
<view v-if="indexData && indexData.paperList && indexData.paperList.length == 0">
<van-empty description="暂无数据" />
</view>
<view class="mytest flex" v-if="indexData && indexData.paperList && indexData.paperList.length > 0">
<view
v-for="(item, index) in indexData.paperList"
:key="index"
class="test-item no_shrink"
:style="{
'background-image': item.PicList[0]
? `url(${item.PicList[0]})`
: `url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/defaultBgimg.png)`,
}"
@click="getItemStatus(item)"
>
<view class="testName">
{{ item.PaperName }}
</view>
<view class="testTime"> 考试时间:{{ item.ExamStartTime }} </view>
<view class="teacherInfo-bg"></view>
<view class="teacherInfo flex flex_between_center">
<view class="flex flex_start_center">
<!-- <van-image
round
width="45rpx"
height="45rpx"
fit="cover"
src="https://img.yzcdn.cn/vant/cat.jpeg"
/>
<view class="teacherName">{{ indexData.TeacherName }}</view> -->
</view>
<view
class="test-status"
:class="{
'status-blue': item.ExamStatusStr == '未开始',
'status-green': item.ExamStatusStr == '已开始',
'status-black': item.ExamStatusStr == '完成',
'status-red': item.ExamStatusStr == '缺考',
}"
>
{{ item.ExamStatusStr }}
</view>
</view>
</view>
</view>
</view>
<van-toast id="van-toast" />
</view>
</template> </template>
<script> <script>
import { import vue, {
ref, ref,
reactive, reactive,
toRefs, toRefs,
toRef, toRef,
getCurrentInstance, getCurrentInstance,
watch, watch,
computed, computed,
onMounted, onMounted,
provide, provide,
} from "vue"; nextTick,
import { getIndexInfo } from "../../api/index"; } from "vue";
import { getActivityList } from "../../api/activity"; import {
import { desensitization } from "../../utils/index"; getActivityList
import indexassembly from './components/indexassembly.vue' } from "../../api/activity";
import navbar from '../../components/navbar.vue' import {
export default { getImageColor
components: { } from '../../utils/index.js'
indexassembly, import indexassembly from './components/indexassembly.vue'
navbar, import navbar from '../../components/navbar.vue'
}, export default {
setup(props) { components: {
let { proxy } = getCurrentInstance(); indexassembly,
proxy.$isLogin(); navbar,
let data = reactive({ },
statusBarHeight: 0, setup(props) {
userinfo: {}, let {
indexData: { proxy
FeedBackList: [], } = getCurrentInstance();
}, proxy.$isLogin();
baseInfo: [ let data = reactive({
{ ActiveMsg: {
name: "学区", pageIndex: 1,
desc: "", pageSize: 10,
img: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/icon2.png", ActivityType: 0,
bgcolor: "#CCEDFE", SelectIsEnd: 0,
jumpUrl: "", },
}, ActivityList: [],
{ pageData: {},
name: "课程", });
desc: "N1~N3",
img: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/icon1.png", let methods = {
bgcolor: "#DDE6FF", jumpPage(url) {
jumpUrl: "/pages/course/course", uni.navigateTo({
}, url: url,
{ });
name: "进度", },
desc: "上到哪里了", async getActivityData() {
img: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/icon4.png", let res = await getActivityList(data.ActiveMsg);
bgcolor: "#FFEFE4", if (res.resultCode == 1) {
jumpUrl: `/pages/progress/progress`, data.ActivityList = res.data.pageData;
}, }
{ },
name: "剩余课时", getIndexData() {
desc: "100", proxy.$request("/AppletIndex/GetIndexInfo_V2", {}).then(res => {
img: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/icon3.png", // console.log(222, res)
bgcolor: "#FFEAFE", data.pageData = res.Data
jumpUrl: `/pages/surplusTime/surplusTime`, })
}, },
{ async getColor(src) {
name: "电子合同", let res=await getImageColor('myCanvas','img',src)
desc: "5个", const formatres=`rgba(${res.r},${res.g},${res.b})`
img: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/icon5.png", console.log(168, formatres)
bgcolor: "#D9FAF1", return formatres
jumpUrl: "/pages/contract/contract", }
}, };
{
name: "我的老师", onMounted(() => {
desc: "李琴", methods.getIndexData();
img: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/icon6.png", });
bgcolor: "#FFE7E6", return {
jumpUrl: "/pages/course/askForLeaveList", ...toRefs(data),
}, ...methods,
], };
// 学习园地 },
learnList: [ onShow() {
{ this.getActivityData();
name: "日语学习园地", },
desc: "日本語の勉強", onLoad() {
bgcolor: "#F6E5FE", uni.setNavigationBarTitle({
img: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/garden1.png", title: "首页",
jumpUrl: "/pages/learningGarden/learningGardenList", });
}, },
{ onShareAppMessage() {
name: "韩语学习园地", return {
desc: "정원", title: "甲小鹤",
bgcolor: "#FEF5D6", query: "/pages/index/index",
img: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/garden2.png", imageUrl: "",
jumpUrl: "", };
}, },
], onShareTimeline() {
indicatorDots: true, //是否显示轮播指示点 return {
autoplay: false, title: "甲小鹤",
ActiveMsg: { query: "/pages/index/index",
pageIndex: 1, imageUrl: "",
pageSize: 10, };
ActivityType: 0, },
SelectIsEnd: 0, };
},
ActivityList: [], //活动数据
videoContext:null
});
let methods = {
jumpPage(url) {
uni.navigateTo({
url: url,
});
},
async getIndexdata() {
let res = await getIndexInfo();
if (res) {
data.indexData = res.Data;
uni.setStorageSync("indexData", res.Data);
data.baseInfo[0].desc = res.Data.SName;
data.baseInfo[1].desc = res.Data.CourseName;
data.baseInfo[1].jumpUrl =
"/pages/course/course?id=" + res.Data.CourseId;
data.baseInfo[2].jumpUrl =
"/pages/progress/progress?id=" + res.Data.ClassId;
data.baseInfo[3].desc = res.Data.SurplusHours + "课时";
data.baseInfo[3].jumpUrl =
"/pages/surplusTime/surplusTime?id=" + res.Data.ClassId;
data.baseInfo[4].desc = res.Data.ContractNum;
data.baseInfo[5].desc = res.Data.TeacherName;
}
},
async getActivityData() {
let res = await getActivityList(data.ActiveMsg);
if (res.resultCode == 1) {
data.ActivityList = res.data.pageData;
}
},
//根据状态跳转
getItemStatus(item) {
//ExamStatus 1未开始 2已开始 3已考试 4缺考 5已阅卷
if (item.ExamStatus == 5) {
this.jumpPage(
`/pages/exam/examScore?GuestId=${item.GuestId}&&PaperId=${item.PaperId}&&Id=${item.Id}&&Exam_Student_Id=${item.Exam_Student_Id}&&ExamStatus=${item.ExamStatus}`
);
} else {
this.jumpPage(
`/pages/exam/examPaper?GuestId=${item.GuestId}&&PaperId=${item.PaperId}&&Id=${item.Id}&&Exam_Student_Id=${item.Exam_Student_Id}&&ExamStatus=${item.ExamStatus}`
);
}
},
//跳转至详情
goActiveDetail(Id) {
this.jumpPage(`/pages/activity/activityDetails?Id=${Id}`);
},
previewImage(item, i) {
let arr=[item]
uni.previewImage({
urls: arr,
current: i,
longPressActions: {
itemList: ["发送给朋友", "保存图片", "收藏"],
success: function (data) {},
fail: function (err) {
console.log(err.errMsg);
},
},
});
},
enlarge(i) {
// 全屏
data.videoContext = uni.createVideoContext('myVideo'+i);
data.videoContext.requestFullScreen({direction: 0})
},
videoControl(e){
if(e.detail.fullScreen==false){
data.videoContext.stop()
data.controls=false
}else{
data.videoContext.play()
data.controls=true
}
},
againdata(){
data.userinfo = uni.getStorageSync("userInfo");
that.getIndexdata();
that.getActivityData();
data.userinfo.EnterPhone2 = desensitization(
data.userinfo.EnterPhone,
3,
-4
);
}
};
onMounted(() => {
console.log(process.env);
console.log(uni.getSystemInfoSync());
data.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
data.userinfo = uni.getStorageSync("userInfo");
data.userinfo.EnterPhone2 = desensitization(
data.userinfo.EnterPhone,
3,
-4
);
});
let that = methods;
return {
...toRefs(data),
...methods,
};
},
onShow() {
this.getIndexdata();
this.getActivityData();
},
onLoad() {
uni.setNavigationBarTitle({
title: "首页",
});
},
onShareAppMessage() {
return {
title: "甲小鹤",
query: "/pages/index/index",
imageUrl: "",
};
},
onShareTimeline() {
return {
title: "甲小鹤",
query: "/pages/index/index",
imageUrl: "",
};
},
};
</script> </script>
<style scoped> <style scoped>
.navbar-con{ .indexpage {
min-height: 100vh;
background-color: #F5F5F5;
box-sizing: border-box;
padding-bottom: 40rpx;
}
.navbarCon {
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 0 30rpx; padding: 0 30rpx;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.pagetitle{
.pagetitle {
font-size: 46rpx;
font-weight: 800;
color: #111111;
margin-right: 30rpx;
}
.loginBox {
height: 100%;
display: flex;
align-items: center;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 800;
color: #4C50E7;
margin-right: 220rpx;
}
.loginIcon {
width: 50rpx;
height: 50rpx;
margin-right: 10rpx;
}
.scanBox {
width: 40rpx;
display: flex;
flex-wrap: wrap;
}
.scanIcon {
width: 40rpx;
height: 40rpx;
}
.scanText {
font-size: 20rpx;
font-family: PingFang SC;
font-weight: 800;
color: #111111;
line-height: 20rpx;
}
.activeContent {
width: 100%;
height: 300rpx;
border-radius: 20rpx;
margin-bottom: 50rpx;
overflow: hidden;
box-sizing: border-box;
padding: 0 30rpx;
}
.swiperList {
position: relative;
width: 100%;
height: 300rpx;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-clip: border-box;
box-sizing: border-box;
overflow: hidden;
color: #fff;
border-radius: 20rpx;
}
.swiper_Time {
position: absolute;
top: 20rpx;
right: 40rpx;
font-size: 26rpx;
}
.swiper_Name {
position: absolute;
bottom: 20rpx;
left: 30rpx;
font-size: 26rpx;
}
.swiper {
position: relative;
border-radius: 20rpx;
}
.swiper /deep/ .wx-swiper-dot {
width: 10rpx;
height: 10rpx;
margin-right: 0;
}
.wordBox {
box-sizing: border-box;
/* height: 390rpx; */
background-color: #EBEBEB;
padding: 30rpx;
margin-bottom: 50rpx;
}
.wordTitle {
font-size: 28rpx;
font-weight: bold;
color: #111111;
margin-bottom: 45rpx;
}
.wordItem {
width: 200rpx;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.wordItemTitle {
width: 100%;
font-size: 22rpx;
font-weight: 500;
color: #666666;
text-align: center;
margin-bottom: 10rpx;
}
.wordItemText {
font-size: 78rpx;
line-height: 60rpx;
font-weight: 800;
font-style: italic;
color: #111111;
white-space: nowrap;
}
.wordItemTextUnit {
font-size: 22rpx;
font-weight: 400;
font-style: normal;
margin-left: 10rpx;
}
.wordDuration {
margin: 50rpx 0 15rpx;
font-size: 22rpx;
font-weight: 500;
color: #999999;
text-align: center;
}
.wordBtn {
width: 130rpx;
height: 50rpx;
background-color: #4C50E7;
border-radius: 25rpx;
margin: 10rpx auto;
font-size: 22rpx;
font-family: PingFang SC;
font-weight: bold;
color: #FEFEFF;
display: flex;
justify-content: center;
align-items: center;
}
.courseBox {
width: 690rpx;
margin: 0 auto;
height: 350rpx;
background: linear-gradient(0deg, #FFFFFF, #4C50E7);
box-shadow: 2rpx 4rpx 40rpx 0rpx rgba(212, 212, 212, 0.6);
border-radius: 24rpx;
box-sizing: border-box;
padding: 10rpx;
position: relative;
margin-bottom: 50rpx;
}
.courseInnerBox {
width: 100%;
height: 100%;
background-color: #FFFFFF;
border-radius: 24rpx;
}
.courseTitle {
box-sizing: border-box;
padding: 10rpx 20rpx 10rpx 10rpx;
background: linear-gradient(0deg, #6C70EB, #505FEB);
position: absolute;
top: 10rpx;
left: 10rpx;
border-bottom-right-radius: 30rpx;
font-size: 28rpx;
font-weight: 500;
color: #FFFFFF;
}
.courseInnerBox .top {
display: flex;
justify-content: flex-end;
align-items: center;
height: 60rpx;
margin-bottom: 50rpx;
}
.courseIcon {
width: 30rpx;
height: 30rpx;
}
.courseDateStr {
font-size: 22rpx;
font-weight: 500;
color: #111111;
}
.courseIcon2 {
width: 235rpx;
height: 225rpx;
}
.courseNameBox {
width: 410rpx;
box-sizing: border-box;
padding: 0 25rpx;
}
.className {
font-size: 22rpx;
font-weight: 500;
color: #666666;
margin-bottom: 20rpx;
}
.courseName {
width: 355rrpx;
height: 75rpx;
background-color: #F5F5F5;
border-radius: 35rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 42rpx;
font-weight: bold;
color: #111111;
}
.learningGarden {
box-sizing: border-box;
padding: 0 30rpx;
}
.learningGardenSbutitle {
font-size: 28rpx;
font-weight: 500;
color: #666666;
margin-bottom: 15rpx;
}
.learningGardenTitle {
font-size: 46rpx; font-size: 46rpx;
font-weight: 800; font-weight: 800;
color: #111111; color: #111111;
margin-bottom: 35rpx;
}
.gardenCon {
width: 680rpx;
height: 455rpx;
border-radius: 24rpx;
margin-bottom: 30rpx;
overflow: hidden;
position: relative;
}
.gardenTextBox {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 180rpx;
background: linear-gradient(0deg, #FBD140);
box-sizing: border-box;
padding: 80rpx 40rpx 0;
overflow: hidden;
}
.gardenTitle {
font-size: 28rpx;
font-weight: bold;
color: #FFFFFF;
white-space: nowrap;
}
.gardenDigest {
font-size: 20rpx;
font-weight: 500;
color: #FFFFFF;
margin-top: 15rpx;
white-space: nowrap;
} }
.con {
box-sizing: border-box;
/* padding: 0rpx 30rpx 50rpx; */
}
.page-title {
font-size: 44rpx;
font-family: PingFang SC;
font-weight: bold;
color: #0f1b35;
}
.personInfo {
height: 100rpx;
position: relative;
margin-bottom: 50rpx;
}
.headimg {
margin-right: 30rpx;
}
.name {
font-size: 30rpx;
font-family: PingFang SC;
font-weight: bold;
color: #0f1b35;
}
.phone {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
}
.saleInfo {
/* width: 200rpx; */
height: 66rpx;
background-color: #00acf9;
border-radius: 33rpx 0rpx 0rpx 33rpx;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -30rpx;
z-index: 10;
box-sizing: border-box;
padding: 0 20rpx;
font-family: PingFang SC;
color: #ffffff;
}
.saleInfo .info1 {
text-align: center;
font-size: 22rpx;
font-weight: bold;
}
.saleInfo .info2 {
font-size: 20rpx;
}
.baseInfo {
margin-bottom: 10rpx;
}
.baseInfo_item {
width: 220rpx;
height: 140rpx;
border-radius: 20rpx;
box-sizing: border-box;
padding: 38rpx 20rpx;
margin-right: 15rpx;
margin-bottom: 30rpx;
}
.baseInfo .baseInfo_item:nth-child(3n) {
margin-right: 0rpx;
}
.baseInfo_name {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: bold;
color: #0f1b35;
margin: -7rpx 0 3rpx 0;
}
.baseInfo_desc {
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333e52;
}
.timetable {
height: 360rpx;
background-image: url("https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coursebg.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-radius: 20rpx;
overflow: hidden;
box-sizing: border-box;
padding: 30rpx 30rpx 0 50rpx;
margin-bottom: 50rpx;
}
.timetable_item {
color: #fff;
margin-bottom: 20rpx;
}
.timetable_title {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
}
.timetable_btn {
font-size: 24rpx;
font-family: PingFang SC;
/* font-weight: 500; */
}
.timetable_item2 {
color: #fff;
margin-bottom: 20rpx;
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
}
/deep/.title {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 800;
color: #0f1b35;
}
/deep/.value {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333f53;
}
/deep/.van-cell {
padding: 0;
}
.mytest {
width: 720rpx;
height: 250rpx;
margin-top: 30rpx;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
transition: all 0.5s;
}
.test-item {
width: 620rpx;
height: 250rpx;
box-sizing: border-box;
border-radius: 20rpx;
overflow: hidden;
margin-right: 30rpx;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-origin: border-box;
background-clip: border-box;
padding-top: 60rpx;
padding-left: 44rpx;
position: relative;
}
.testName {
font-size: 40rpx;
font-family: PingFang SC;
font-weight: bold;
color: #0f1b35;
margin-bottom: 20rpx;
}
.testTime {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #0f1b35;
}
.teacherInfo-bg {
position: absolute;
left: 0;
bottom: 0;
width: 620rpx;
height: 70rpx;
background-image: linear-gradient(90deg, #000000, #ffffff);
opacity: 0.4;
z-index: 1;
}
.teacherInfo {
position: absolute;
left: 0;
bottom: 0;
width: 620rpx;
height: 70rpx;
z-index: 2;
box-sizing: border-box;
padding: 0 30rpx;
}
.teacherName {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #ffffff;
margin-left: 10rpx;
}
.test-status {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: bold;
/* color: #00acf9; */
}
.status-blue {
color: #00acf9;
}
.status-green {
color: #00df9f;
}
.status-black {
color: #111111;
}
.status-red {
color: #ff3816;
}
.LearningGarden {
box-sizing: border-box;
margin-bottom: 10rpx;
}
.LearningGarden-item {
width: 330rpx;
height: 140rpx;
border-radius: 20rpx;
margin-right: 30rpx;
margin-bottom: 30rpx;
box-sizing: border-box;
padding: 30rpx 20rpx;
position: relative;
}
.LearningGarden .LearningGarden-item:nth-child(2n) {
margin-right: 0rpx !important;
}
.LearningGarden-item-name {
width: 220rpx;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: bold;
color: #0f1b35;
}
.LearningGarden-item-desc {
width: 220rpx;
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333e52;
margin-top: 10rpx;
}
.LearningGarden-item-img {
width: 64rpx;
height: 66rpx;
position: absolute;
top: 38rpx;
right: 20rpx;
}
.feedback {
margin: 30rpx 0;
}
.feedback-info {
height: 60rpx;
}
.info-headimg {
width: 60rpx;
height: 60rpx;
background-color: #c4a1a1;
border-radius: 50%;
margin-right: 20rpx;
}
.teacher-name {
max-width: 500rpx;
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #111111;
}
.FeedBackTime{
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #111111;
margin-left: 20rpx;
}
.feedback-all {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
}
.feedback-text {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 400;
color: #111111;
margin: 20rpx 0;
}
.feedback-img {
width: 210rpx;
height: 210rpx;
border-radius: 20rpx;
background-color: #eee;
overflow: hidden;
margin-right: 30rpx;
position: relative;
box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36, 36, 36, 0.2);
}
.feedback-img:nth-child(3n) {
margin-right: 0rpx !important;
}
.layer {
width: 210rpx;
height: 210rpx;
border-radius: 20rpx;
background-color: #cbd9ed;
opacity: 0.5;
position: absolute;
top: 0;
right: 0;
}
.layer2 {
width: 210rpx;
height: 210rpx;
border-radius: 20rpx;
font-size: 36rpx;
font-family: PingFang SC;
font-weight: bold;
color: #111111;
position: absolute;
top: 0;
right: 0;
z-index: 5;
}
.activeContent {
width: 100%;
height: 250rpx;
border-radius: 20rpx;
margin-bottom: 30rpx;
overflow: hidden;
}
.swiperList {
position: relative;
width: 100%;
height: 250rpx;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-clip: border-box;
box-sizing: border-box;
overflow: hidden;
color: #fff;
border-radius: 20rpx;
}
.swiper_Time {
position: absolute;
top: 20rpx;
right: 40rpx;
font-size: 26rpx;
}
.swiper_Name {
position: absolute;
bottom: 20rpx;
left: 30rpx;
font-size: 26rpx;
}
.swiper {
position: relative;
border-radius: 20rpx;
}
/* .swiper /deep/ .wx-swiper-dots {
position: absolute;
right: -10rpx;
top: 50%;
transform: translateY(-50%);
z-index: 999;
} */
.swiper /deep/ .wx-swiper-dot {
width: 10rpx;
height: 10rpx;
margin-right: 0;
}
</style> </style>
src/static/css/common.css
View file @ 95fff39c
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
} }
.flex_around_center { .flex_around_center {
display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
flex-flow: row wrap flex-flow: row wrap
......
src/utils/index.js
View file @ 95fff39c
//脱敏 //脱敏
export let desensitization = (str, beginLen, endLen) => { export let desensitization = (str, beginLen, endLen) => {
let len = str.length; let len = str.length;
let firstStr = str.substr(0, beginLen); let firstStr = str.substr(0, beginLen);
let lastStr = str.substr(endLen); let lastStr = str.substr(endLen);
let middleStr = str.substring(beginLen, len - Math.abs(endLen)).replace(/[\s\S]/ig, '*'); let middleStr = str.substring(beginLen, len - Math.abs(endLen)).replace(/[\s\S]/ig, '*');
let tempStr = firstStr + middleStr + lastStr; let tempStr = firstStr + middleStr + lastStr;
return tempStr; return tempStr;
} }
export let uploadFile = (path, file, successCallback) => { export let uploadFile = (path, file, successCallback) => {
for (let i = 0; i < file.length; i++) { for (let i = 0; i < file.length; i++) {
UploadSelfFile(path, file[i], successCallback) UploadSelfFile(path, file[i], successCallback)
} }
} }
//获取base64格式路径 //获取base64格式路径
export let urlTobase64 = (file, suc) => { export let urlTobase64 = (file, suc) => {
uni.getFileSystemManager().readFile({ uni.getFileSystemManager().readFile({
filePath: file, //选择图片返回的相对路径 filePath: file, //选择图片返回的相对路径
encoding: 'base64', //编码格式 encoding: 'base64', //编码格式
success: (res) => { //成功的回调 success: (res) => { //成功的回调
let data = res.data; let data = res.data;
let base64 = 'data:image/png;base64,' + data let base64 = 'data:image/png;base64,' + data
suc(base64); suc(base64);
} }
}); });
} }
/** /**
* 上传文件 * 上传文件
*/ */
export function UploadSelfFile(path, file, callback, configObj) { export function UploadSelfFile(path, file, callback, configObj) {
//用户登录缓存 //用户登录缓存
var cacheInfo = uni.getStorageSync("userInfo") var cacheInfo = uni.getStorageSync("userInfo")
//上传配置 //上传配置
var uploadConfig = ""; var uploadConfig = "";
if (cacheInfo && cacheInfo.UploadConfig) { if (cacheInfo && cacheInfo.UploadConfig) {
uploadConfig = cacheInfo.UploadConfig; uploadConfig = cacheInfo.UploadConfig;
} }
//获取文件扩展名 //获取文件扩展名
var index = file.url.lastIndexOf("."); var index = file.url.lastIndexOf(".");
var suffix = file.url.substr(index); var suffix = file.url.substr(index);
var timestamp1 = Date.parse(new Date()) + "_" + (Math.ceil(Math.random() * 1000)); var timestamp1 = Date.parse(new Date()) + "_" + (Math.ceil(Math.random() * 1000));
let str = '/Test'; let str = '/Test';
var newPath = "/EduSystem" + str + '/Upload/' + path; var newPath = "/EduSystem" + str + '/Upload/' + path;
uni.showLoading({ uni.showLoading({
title: '文件上传中...' title: '文件上传中...'
}); });
if (uploadConfig) { if (uploadConfig) {
switch (uploadConfig.StoreType) { switch (uploadConfig.StoreType) {
//上传文件到腾讯云 //上传文件到腾讯云
case 1: case 1:
newPath += "/" + timestamp1 + "" + suffix; newPath += "/" + timestamp1 + "" + suffix;
UploadFileToTencent(uploadConfig, newPath, file, callback); UploadFileToTencent(uploadConfig, newPath, file, callback);
break; break;
//上传文件到阿里云 //上传文件到阿里云
case 2: case 2:
newPath += "/" + timestamp1 + "" + suffix; newPath += "/" + timestamp1 + "" + suffix;
UploadFileToALi(uploadConfig, newPath, file, callback); UploadFileToALi(uploadConfig, newPath, file, callback);
break; break;
//上传文件到自己文件服务器 //上传文件到自己文件服务器
case 3: case 3:
UploadFileToSystem(uploadConfig, newPath, file, callback, configObj); UploadFileToSystem(uploadConfig, newPath, file, callback, configObj);
break; break;
} }
} }
} }
/** /**
* 上传文件到本地文件系统 * 上传文件到本地文件系统
*/ */
export function UploadFileToSystem(uploadConfig, fileFullPath, fileObj, successCall, configObj) { export function UploadFileToSystem(uploadConfig, fileFullPath, fileObj, successCall, configObj) {
let url = uploadConfig.UploadDomain + "/Upload?filePath=" + fileFullPath; let url = uploadConfig.UploadDomain + "/Upload?filePath=" + fileFullPath;
if (configObj) { if (configObj) {
//是否转换图片 //是否转换图片
if (configObj.isTrans && configObj.isTrans == 1) { if (configObj.isTrans && configObj.isTrans == 1) {
url += "&isTrans=1" url += "&isTrans=1"
} }
if (configObj.isCreateCover && configObj.isCreateCover == 1) { if (configObj.isCreateCover && configObj.isCreateCover == 1) {
url += "&isCreateCover=1" url += "&isCreateCover=1"
} }
} }
uni.uploadFile({ uni.uploadFile({
url: url, url: url,
filePath: fileObj.url, filePath: fileObj.url,
name: 'file', name: 'file',
formData: { 'myfile': fileObj }, formData: {
success(res) { 'myfile': fileObj
uni.hideLoading(); },
let jsonObj = JSON.parse(res.data) success(res) {
let index = jsonObj.FilePath.indexOf(".") uni.hideLoading();
let suffix = jsonObj.FilePath.slice(index + 1) let jsonObj = JSON.parse(res.data)
let uploadResult = { let index = jsonObj.FilePath.indexOf(".")
name: fileObj.name, let suffix = jsonObj.FilePath.slice(index + 1)
url: uploadConfig.CustomDomain + '/' + jsonObj.FilePath, let uploadResult = {
type: fileObj.type, name: fileObj.name,
suffix: suffix, url: uploadConfig.CustomDomain + '/' + jsonObj.FilePath,
// VideoCoverImg: uploadConfig.CustomDomain + jsonObj.VideoCoverImg, type: fileObj.type,
} suffix: suffix,
successCall(uploadResult); // VideoCoverImg: uploadConfig.CustomDomain + jsonObj.VideoCoverImg,
}, }
fail(err) { successCall(uploadResult);
console.log("uploadErr", err) },
} fail(err) {
}); console.log("uploadErr", err)
}
});
} }
/** /**
* 上传文件到阿里云 * 上传文件到阿里云
*/ */
export function UploadFileToALi(uploadConfig, fileFullPath, fileObj, successCall) { export function UploadFileToALi(uploadConfig, fileFullPath, fileObj, successCall) {
// var OSS = require('ali-oss'); // var OSS = require('ali-oss');
// var oss = new OSS({ // var oss = new OSS({
// region: uploadConfig.Region, // region: uploadConfig.Region,
// accessKeyId: uploadConfig.SecretId, // accessKeyId: uploadConfig.SecretId,
// accessKeySecret: uploadConfig.SecretKey, // accessKeySecret: uploadConfig.SecretKey,
// bucket: uploadConfig.Bucket // bucket: uploadConfig.Bucket
// }) // })
// var result = oss.multipartUpload(fileFullPath, fileObj, { // var result = oss.multipartUpload(fileFullPath, fileObj, {
// progress: function* (p) { } // progress: function* (p) { }
// }).then(res => { // }).then(res => {
// uni.hideLoading() // uni.hideLoading()
// var uploadResult = { // var uploadResult = {
// Code: 1, // Code: 1,
// FileName: fileObj.name, // FileName: fileObj.name,
// FileUrl: res.res.requestUrls[0].split('?')[0].replace('http', 'https') // FileUrl: res.res.requestUrls[0].split('?')[0].replace('http', 'https')
// } // }
// if (successCall) { // if (successCall) {
// successCall(uploadResult); // successCall(uploadResult);
// } // }
// }) // })
} }
/** /**
* 上传文件到腾讯云 * 上传文件到腾讯云
*/ */
export function UploadFileToTencent(uploadConfig, fileFullPath, fileObj, successCall) { export function UploadFileToTencent(uploadConfig, fileFullPath, fileObj, successCall) {
// var COS = require('cos-js-sdk-v5'); // var COS = require('cos-js-sdk-v5');
// var cos = new COS({ // var cos = new COS({
// SecretId: uploadConfig.SecretId, // SecretId: uploadConfig.SecretId,
// SecretKey: uploadConfig.SecretKey, // SecretKey: uploadConfig.SecretKey,
// }); // });
// cos.putObject({ // cos.putObject({
// Bucket: uploadConfig.Bucket, // Bucket: uploadConfig.Bucket,
// Region: uploadConfig.Region, //存储桶所在地域，必须字段 // Region: uploadConfig.Region, //存储桶所在地域，必须字段
// Key: fileFullPath, //文件名 // Key: fileFullPath, //文件名
// StorageClass: 'STANDARD', // StorageClass: 'STANDARD',
// Body: fileObj, // 上传文件对象 // Body: fileObj, // 上传文件对象
// onProgress: function (progressData) { } // onProgress: function (progressData) { }
// }, function (err, data) { // }, function (err, data) {
// uni.hideLoading() // uni.hideLoading()
// if (data && data.statusCode == 200) { // if (data && data.statusCode == 200) {
// var uploadResult = { // var uploadResult = {
// Code: 1, // Code: 1,
// FileName: fileObj.name, // FileName: fileObj.name,
// FileUrl: "https://" + data.Location // FileUrl: "https://" + data.Location
// } // }
// if (successCall) { // if (successCall) {
// successCall(uploadResult); // successCall(uploadResult);
// } // }
// } else { // } else {
// /*上传文件异常*/ // /*上传文件异常*/
// console.log(err || data); // console.log(err || data);
// } // }
// }); // });
} }
// 数字转汉字 // 数字转汉字
export let changeNumToHan = (num) => { export let changeNumToHan = (num) => {
var arr1 = new Array('零', '一', '二', '三', '四', '五', '六', '七', '八', '九'); var arr1 = new Array('零', '一', '二', '三', '四', '五', '六', '七', '八', '九');
var arr2 = new Array('', '十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千', '万', '十', '百', '千', '亿');//可继续追加更高位转换值 var arr2 = new Array('', '十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千', '万', '十', '百', '千',
if (!num || isNaN(num)) { '亿'); //可继续追加更高位转换值
return "零"; if (!num || isNaN(num)) {
} return "零";
var english = num.toString().split("") }
var result = ""; var english = num.toString().split("")
for (var i = 0; i < english.length; i++) { var result = "";
var des_i = english.length - 1 - i;//倒序排列设值 for (var i = 0; i < english.length; i++) {
result = arr2[i] + result; var des_i = english.length - 1 - i; //倒序排列设值
var arr1_index = english[des_i]; result = arr2[i] + result;
result = arr1[arr1_index] + result; var arr1_index = english[des_i];
} result = arr1[arr1_index] + result;
//将【零千、零百】换成【零】 【十零】换成【十】 }
result = result.replace(/零(千|百|十)/g, '零').replace(/十零/g, '十'); //将【零千、零百】换成【零】 【十零】换成【十】
//合并中间多个零为一个零 result = result.replace(/零(千|百|十)/g, '零').replace(/十零/g, '十');
result = result.replace(/零+/g, '零'); //合并中间多个零为一个零
//将【零亿】换成【亿】【零万】换成【万】 result = result.replace(/零+/g, '零');
result = result.replace(/零亿/g, '亿').replace(/零万/g, '万'); //将【零亿】换成【亿】【零万】换成【万】
//将【亿万】换成【亿】 result = result.replace(/零亿/g, '亿').replace(/零万/g, '万');
result = result.replace(/亿万/g, '亿'); //将【亿万】换成【亿】
//移除末尾的零 result = result.replace(/亿万/g, '亿');
result = result.replace(/零+$/, '') //移除末尾的零
//将【零一十】换成【零十】 result = result.replace(/零+$/, '')
//result = result.replace(/零一十/g, '零十');//貌似正规读法是零一十 //将【零一十】换成【零十】
//将【一十】换成【十】 //result = result.replace(/零一十/g, '零十');//貌似正规读法是零一十
result = result.replace(/^一十/g, '十') //将【一十】换成【十】
return result; result = result.replace(/^一十/g, '十')
return result;
} }
// 判断登录 // 判断登录
export let isLogin = () => { export let isLogin = () => {
let userinfo = uni.getStorageSync('userInfo'); let userinfo = uni.getStorageSync('userInfo');
if (!userinfo || userinfo === "") { if (!userinfo || userinfo === "") {
uni.showToast({ uni.showToast({
title: '请登录账号', title: '请登录账号',
duration: 2000, duration: 2000,
icon: "error", icon: "error",
// success: () => { // success: () => {
// setTimeout(() => { // setTimeout(() => {
// uni.navigateTo({ // uni.navigateTo({
// url: '/pages/login/login' // url: '/pages/login/login'
// }); // });
// clearTimeout(); // clearTimeout();
// }, 2000) // }, 2000)
// } // }
}); });
} }
}
export let getImageColor = async (canvasID, imgID, imgSrc) => {
let res = {
r: 1,
g: 1,
b: 1
}
const canvas = uni.createCanvasContext(canvasID)
let imgWidth
let imgHeight
await new Promise(resolve => {
uni.createSelectorQuery().select("#" + imgID).boundingClientRect(res => {
console.log(234,res)
imgWidth = res?.width??10;
imgHeight = res?.height??10;
resolve()
}).exec()
})
canvas.fillRect(0, 0, imgWidth, imgHeight)
let base64Img= await netUrlTobase64(imgSrc)
canvas.drawImage(base64Img, 0, 0, imgWidth, imgHeight)
res = await new Promise((resolve, reject) => {
canvas.draw(true, (e) => {
// 获取像素数据
uni.canvasGetImageData({
// #ifdef MP-WEIXIN
canvasId: canvas.canvasId,
// #endif
// #ifndef MP-WEIXIN
canvasId: canvas.id,
// #endif
x: 0,
y: 0,
width: imgWidth,
height: imgHeight,
success: (res) => {
let data = res.data;
var r = 1,
g = 1,
b = 1;
// 取所有像素的平均值
for (var row = 0; row < imgHeight; row++) {
for (var col = 0; col < imgWidth; col++) {
// console.log(data[((img.width * row) + col) * 4])
if (row == 0) {
r += data[((imgWidth * row) + col)];
g += data[((imgWidth * row) + col) + 1];
b += data[((imgWidth * row) + col) + 2];
} else {
r += data[((imgWidth * row) + col) * 4];
g += data[((imgWidth * row) + col) * 4 + 1];
b += data[((imgWidth * row) + col) * 4 + 2];
}
}
}
// 求取平均值
r /= (imgWidth * imgHeight);
g /= (imgWidth * imgHeight);
b /= (imgWidth * imgHeight);
// 将最终的值取整
r = Math.round(r);
g = Math.round(g);
b = Math.round(b);
let obj = {
r,
g,
b
}
resolve(obj);
},
fail: (fail) => {
reject(fail);
}
});
})
})
return res
}
// 网络图片转base64
export let netUrlTobase64= async (url,suc)=> {
let toBase64Url=""
toBase64Url= await new Promise(resolve => {
uni.request({
url: url,
method: 'GET',
responseType: 'arraybuffer',
success(res) {
const base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64
const conType =res.header['Content-Type']
toBase64Url = 'data:'+conType+';base64,' + base64; //不加上这串字符，在页面无法显示
resolve(toBase64Url)
}
});
})
return toBase64Url
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment