Files
sociology_app/pages/homePage/index/index.vue
2024-06-13 10:04:13 +08:00

960 lines
24 KiB
Vue

<template>
<view class="commonPageBox">
<public-module></public-module>
<view class="header_box"></view>
<view class="main_content_box">
<view class="curriculum_box">
<view
class="curriculum_item_box"
v-for="(v, i) in curriculumList"
@click="handleClickCurriculum(v)"
>
<!-- <view class="curriculum_item"> -->
<image
:src="v.imgUrl"
mode="aspectFill"
class="curriculum_item_img"
></image>
<view class="curriculum_item_name">{{ v.name }}</view>
<!-- </view> -->
</view>
</view>
<view class="cate_box">
<view
class="cate_item_box"
v-for="(v, i) in cateList"
@click="handleClickCate(v)"
>
<view class="cate_item_border">
<image
:src="v.icon"
mode="aspectFill"
style="width: 59rpx; height: 59rpx"
></image>
</view>
<view class="cate_item_name">{{ v.title }}</view>
</view>
</view>
<view class="flash_sale_box notice_box">
<view class="flash_sale_top">
<image
class="miaoShaIcon noticeIcon"
src="@/static/icon/homePage/notice.png"
mode="aspectFill"
style="width: 36rpx; height: 44rpx"
></image>
<u-notice-bar
:text="noticeList"
style="background-color: none !important"
class="miaoShaContent"
icon=""
direction="column"
label="title"
@click="goNotice"
>
</u-notice-bar>
<!-- <view class="miaoShaContent" style="width: 100%;">
{{ miaoShaContent }}
</view> -->
</view>
</view>
<view class="flash_sale_box">
<view class="flash_sale_top">
<image
class="miaoShaIcon"
src="@/static/icon/homePage/miaosha.png"
mode="aspectFill"
style="width: 36rpx; height: 44rpx"
></image>
<text class="miaoShaTitle">秒杀</text>
<view class="miaoShaContent">
<!-- {{ miaoShaContent }} -->
</view>
<image
class="rightArrowIcon"
src="@/static/icon/homePage/right_arrow.png"
mode="aspectFill"
style="width: 28rpx; height: 18rpx"
></image>
</view>
<view class="flash_sale_content" style="margin-top: 40rpx">
<scroll-view scroll-x="true" class="scroll-X" style="">
<view
class="scroll-view-item flash_sale_content_item"
@click="goGoodsDetail(v)"
v-for="(v, i) in seckillLst"
>
<image class="book_image" :src="v.productImages" mode="aspectFit">
</image>
<view class="book_name">{{ v.productName }}</view>
</view>
</scroll-view>
</view>
</view>
<view class="greenCardBox1 learning_box" v-if="studyList.length > 0">
<view class="learning_box_top"
><view class="learning_top greenCardBoxTop PM_font"
><view class="titlebg">正在学习</view>
</view></view
>
<view class="flash_sale_content greenCardBoxContent">
<scroll-view scroll-x="true" class="scroll-X" style="">
<!-- studyList -->
<common-curriculum-list
imgUrl="image"
:isScroll="true"
:isCondition="true"
:dataList="studyList"
@hancleClick="goCourseDescription"
label="title"
>
<template slot="labelSlot" slot-scope="slotProps">
<view class="related_courses_name hidden1">{{
slotProps.row.title
}}</view>
<!-- <text v-if="slotProps.row.conditions!='03'">试听</text> -->
</template>
</common-curriculum-list>
<!-- <view class="scroll-view-item flash_sale_content_item content_item"
v-for="(v, i) in flashSaleList">
<image class="book_image" src="@/static/icon/homePage/miaosha.png" mode="aspectFill">
</image>
<view class="book_name">中医生理学</view>
</view> -->
</scroll-view>
</view>
<view class="learning_box_bottom"></view>
</view>
<view class="greenCardBox1 learning_box listening_box">
<view class="learning_box_top"
><view class="learning_top greenCardBoxTop PM_font"
><view class="titlebg">欢迎试听</view>
</view></view
>
<view class="flash_sale_content greenCardBoxContent">
<scroll-view scroll-x="true" class="scroll-X" style="">
<common-curriculum-list
imgUrl="image"
:isCondition="true"
:dataList="flashSaleList"
@hancleClick="goCourseDescription"
label="title"
>
<template slot="labelSlot" slot-scope="slotProps">
<view class="related_courses_name hidden1">{{
slotProps.row.title
}}</view>
<!-- <text v-if="slotProps.row.conditions!='03'">试听</text> -->
</template>
</common-curriculum-list>
</scroll-view>
</view>
<view class="learning_box_bottom"></view>
</view>
<view class="learning_box listening_box bottomBox">
<view class="item_img" @click="handleGoApp">
<image src="@/static/tab/bottom1.png" mode="aspectFill"></image>
</view>
<view class="item_img">
<!-- <image src="@/static/tab/bg.png" mode="aspectFill"></image> -->
</view>
</view>
</view>
</view>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
name: "music",
props: {},
data() {
return {
noticeList: [], //秒杀列表
seckillLst: [], //秒杀列表
studyList: [], //正在学习
dataInfo: {},
flashSaleList: [], //试听
miaoShaContent: "",
cateList: [
{
title: "儒",
url: "/pages/curriculum/cate/index",
imgUrl: require("@/static/icon/homePage/cate_ru.png"),
style: {
width: "62rpx",
height: "56rpx",
},
},
// {
// title: "释",
// url: "/pages/curriculum/cate/index",
// imgUrl: require("@/static/icon/homePage/cate_shi.png"),
// style: {
// width: "49rpx",
// height: "61rpx",
// },
// },
// {
// title: "道",
// url: "/pages/curriculum/cate/index",
// imgUrl: require("@/static/icon/homePage/cate_dao.png"),
// style: {
// width: "59rpx",
// height: "59rpx",
// },
// },
{
title: "医",
url: "/pages/curriculum/cate/index",
imgUrl: require("@/static/icon/homePage/cate_yi.png"),
style: {
width: "61rpx",
height: "61rpx",
},
},
{
title: "美",
url: "/pages/curriculum/cate/index",
imgUrl: require("@/static/icon/homePage/cate_mei.png"),
style: {
width: "59rpx",
height: "59rpx",
},
},
{
title: "文",
url: "/pages/curriculum/cate/index",
imgUrl: require("@/static/icon/homePage/cate_wen.png"),
style: {
width: "61rpx",
height: "60rpx",
},
},
],
curriculumList: [
{
name: "课程设置",
url: "/pages/courseInformation/index/index",
// url: "",
imgUrl: require("@/static/icon/homePage/kcjg.png"),
},
{
name: "我的课程",
url: "/pages/curriculum/order/index/index",
// url: "",
imgUrl: require("@/static/icon/homePage/wdkc.png"),
},
{
name: "吴门之光",
url: "/pages/medicaldes/medicaldes",
imgUrl: require("@/static/icon/homePage/wmzg.png"),
},
],
urlList: {
list: "app/phoneDoctor.do?toHomePage",
getSociologyLabels: "sociology/home/getSociologyLabels",
getUserLateCourseList: "sociology/course/getUserLateCourseList",
getMarketProductList: "sociology/product/getMarketProductList", //秒杀商品
getMarketCourseList: "sociology/course/getMarketCourseList", //精彩试听
getNotice: "common/message/listByPage", //消息
getCateList: "sociology/home/getSociologyLabels", //消息
},
};
},
onReady() {},
onLoad() {},
async onShow() {
console.log("at line 287:", this.userInfo);
this.requestAll();
},
async onTabItemTap() {
this.requestAll();
},
methods: {
...mapMutations(["setUserInfo"]),
requestAll() {
// 获取当前页面的栈
this.$nextTick(async () => {
await this.getData();
await this.getCateList();
await this.getSociologyLabels();
await this.getMarketProductList();
await this.getMarketCourseList();
await this.getNotice();
});
},
goNotice(index) {
console.log("at line 297:", this.noticeList[index]);
// var mynavData = JSON.stringify({
// ...this.noticeList[index],
// navTitle: this.noticeList[index].title,
// title: this.noticeList[index].title,
// }); // 这里转换成 字符串
uni.navigateTo({
url: `/pages/homePage/index/noticeDetail?id=${this.noticeList[index].id}`,
});
},
handleGoApp() {
if (plus.os.name == "Android") {
plus.runtime.launchApplication(
{
pname: "com.cn.nuttyreading",
},
function (e) {
console.log("Open system default browser failed: " + e.message);
}
);
} else if (plus.os.name == "iOS") {
// plus.runtime.launchApplication(
// {
// action: "taobao://",
// },
// function (e) {
// console.log("Open system default browser failed: " + e.message);
// }
// );
}
},
async getData() {
var that = this;
this.$http.post(this.urlList.getUserLateCourseList).then(async (res) => {
console.log(res, "7777777777777777777");
if (res.code == 0) {
that.studyList = res.page ? res.page : [];
}
});
},
async getCateList() {
var that = this;
this.$http
.request({
url: this.urlList.getCateList,
method: "POST",
data: {
id: 0,
},
header: {
//默认 无 说明:请求头
"Content-Type": "application/json",
},
})
.then(async (res) => {
console.log(res, "7777777777777777777");
if (res.code == 0) {
that.cateList = res.labels ? res.labels : [];
}
});
},
async getNotice() {
var that = this;
var data = {
isBook: 0, //是否是疯子读书
isMedical: 0, //是否是吴门医述
isSociology: 1, //是否是众妙之门
};
this.$http
.request({
url: this.urlList.getNotice,
method: "POST",
data: data,
header: {
//默认 无 说明:请求头
"Content-Type": "application/json",
},
})
.then(async (res) => {
console.log(res, "7777777777777777777");
var result = res.messages;
console.log("result at line 332:", result);
that.noticeList = res.messages ? result : [];
});
},
async getMarketProductList() {
var that = this;
this.$http
.request({
url: this.urlList.getMarketProductList,
method: "POST",
data: {
id: 1, //这个需要后台提供数值,比如秒杀商品
limit: 10,
page: 1,
},
header: {
//默认 无 说明:请求头
"Content-Type": "application/json",
},
})
.then(async (res) => {
console.log(res, "999");
that.seckillLst = res.products.records ? res.products.records : [];
that.$forceUpdate();
});
},
async getMarketCourseList() {
var that = this;
this.$http
.request({
url: this.urlList.getMarketCourseList,
method: "POST",
data: {
id: 4, //这个需要后台提供数值,比如秒杀商品
limit: 10,
page: 1,
},
header: {
//默认 无 说明:请求头
"Content-Type": "application/json",
},
})
.then(async (res) => {
console.log(res, "7777777777777777777");
that.flashSaleList = res.courseList.records
? res.courseList.records
: [];
});
},
async getSociologyLabels() {
var that = this;
this.$http
.request({
url: this.urlList.getSociologyLabels,
method: "POST",
data: {
id: 0,
},
header: {
//默认 无 说明:请求头
"Content-Type": "application/json",
},
})
.then(async (res) => {
console.log(res.labels, "8888");
that.cateList.forEach((e, i) => {
var data = res.labels.filter((item) => item.title === e.title);
console.log("data at line 315:", data);
if (data.length > 0) {
that.cateList[i] = {
...data[0],
...e,
};
}
});
that.$forceUpdate();
console.log("this.cateList at line 314:", this.cateList);
});
},
goCourseDescription(v) {
console.log(v);
uni.navigateTo({
// url: '../bookShop/commodityDetail?id=' + item.id
url: `/pages/curriculum/order/curriculum/index?navTitle=${v.title}&title=${v.title}&id=${v.id}`,
});
},
goGoodsDetail(v) {
console.log(v);
uni.navigateTo({
// url: '../bookShop/commodityDetail?id=' + item.id
url: `/pages/goods/index/index?navTitle=${v.title}&isMiaosha=1&title=${v.title}&id=${v.productId}`,
});
},
handleClickCurriculum(v) {
console.log(v);
if (v.url) {
uni.navigateTo({
url: v.url,
});
} else {
this.$commonJS.showToast("此功能暂未开放");
}
},
handleClickCate(v) {
console.log(v);
uni.navigateTo({
url: `/pages/curriculum/cate/index?navTitle=${v.title}&title=${v.title}&id=${v.id}`,
});
},
//关闭或开启 音乐
},
computed: {
...mapState(["userInfo"]),
timer() {
return calcTimer(this.userInfo.currentTime);
},
overTimer() {
return calcTimer(this.userInfo.duration);
},
playStatus() {
var playFlag = false;
this.userInfo.playFlag !== undefined
? (playFlag = this.userInfo.playFlag)
: "";
console.log(playFlag, "playFlag");
return playFlag;
},
},
watch: {},
};
//时间换算
function calcTimer(timer) {
if (timer === 0 || typeof timer !== "number") {
return "00:00";
}
let mm = Math.floor(timer / 60);
let ss = Math.floor(timer % 60);
if (mm < 10) {
mm = "0" + mm;
}
if (ss < 10) {
ss = "0" + ss;
}
return mm + ":" + ss;
}
</script>
<style lang="scss" scoped>
@import "@/style/mixin.scss";
.header_box {
width: 100%;
height: 350rpx;
background-repeat: no-repeat;
display: flex;
justify-content: center;
overflow: hidden;
background-size: 100% 100%;
background-image: url("@/static/icon/homePage/header_bg.png");
.logo {
width: 146rpx;
height: 183rpx;
margin-top: 115rpx;
}
}
.main_content_box {
width: 100%;
padding: 27rpx;
box-sizing: border-box;
// padding-top: 75rpx;
.curriculum_box {
width: 100%;
// height: 198rpx;
display: flex;
align-items: center;
justify-content: space-around;
padding: 0px 37rpx 17rpx;
box-sizing: border-box;
.curriculum_item_box {
height: 100%;
display: flex;
align-items: center;
.curriculum_item_img {
width: 39rpx;
height: 38rpx;
float: left;
}
.curriculum_item_name {
margin-top: -10rpx;
font-family: MicrosoftYaHei;
font-weight: bold;
font-size: 30rpx;
color: #001b73;
margin-left: 21rpx;
// line-height: 46rpx;
}
}
}
.cate_box {
width: 100%;
height: 198rpx;
background: $themeColor;
background-repeat: no-repeat;
display: flex;
justify-content: center;
background-size: 100% 100%;
// background-image: url("@/static/icon/cate_bg.png");
box-shadow: 0rpx 0rpx 6rpx 0rpx #f9f6ea;
border-radius: 7rpx;
display: flex;
align-items: center;
justify-content: space-around;
padding: 20rpx 31rpx;
box-sizing: border-box;
.cate_item_box {
min-width: 110rpx;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.cate_item_border {
width: 75rpx;
height: 98rpx;
background-size: 100% 100%;
background-image: url("@/static/icon/homePage/cate_bg.png");
border-radius: 4rpx;
display: flex;
align-items: center;
justify-content: center;
image {
// height: 56rpx;
}
}
.cate_item_name {
margin-top: 21rpx;
font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
font-weight: normal;
font-size: 43rpx;
color: #000000;
// line-height: 46rpx;
text-align: center;
color: #fff;
}
}
}
.flash_sale_box {
width: 100%;
margin-top: 33rpx;
margin-bottom: 10rpx;
.flash_sale_top {
width: 100%;
height: 61rpx;
// background: #B7E0E2;
background-color: rgba(188, 231, 223, 0.3);
color: rgb(46, 103, 106);
border-color: rgb(197, 227, 215);
box-shadow: 0rpx 0rpx 4rpx 0rpx #fcf2f6;
border-radius: 7rpx;
padding: 3rpx 18rpx 3rpx 10rpx;
box-sizing: border-box;
display: flex;
align-items: center;
// margin-bottom: 21rpx;
.miaoShaIcon {
margin-right: 16rpx;
}
.miaoShaTitle {
margin-right: 25rpx;
font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
font-weight: normal;
font-size: 35rpx;
color: #018f89;
line-height: 46rpx;
}
.miaoShaContent {
width: calc(100% - 172rpx);
margin-top: 1rpx;
font-family: Microsoft YaHei;
font-weight: 600;
font-size: 21rpx;
color: #018f89;
// line-height: 45rpx;
}
}
}
.flash_sale_content {
width: 100%;
display: flex;
overflow: hidden;
height: 254rpx;
.flash_sale_content_item {
display: inline-block;
width: 165rpx;
margin-right: 12rpx;
overflow: hidden;
}
.book_image {
width: 165rpx;
height: 192rpx;
border-radius: 10rpx;
background-color: #f5f5f5;
}
.book_name {
font-family: MicrosoftYaHei;
font-weight: 600;
font-size: 30rpx;
line-height: 30rpx;
color: #000000;
text-align: center;
margin-top: 18rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.learning_box_top {
width: 100%;
height: 40rpx;
margin: 40rpx 0;
margin-bottom: 0;
background-repeat: no-repeat;
background-size: 100% 100%;
padding-left: 60rpx;
background-image: url("@/static/icon/borderTopBg.png");
}
.learning_box_bottom {
width: 100%;
margin-top: 0;
height: 40rpx;
margin: 40rpx 0;
background-repeat: no-repeat;
background-size: 100% 100%;
padding-left: 60rpx;
background-image: url("@/static/icon/borderBottomBg.png");
}
.greenCardBox1 {
margin-top: 80rpx;
margin-bottom: 120rpx;
.greenCardBoxTop {
width: 100%;
background: linear-gradient(
130deg,
rgb(46, 103, 106) 0%,
rgb(114, 173, 146) 100%
)
text;
text-align: center;
line-height: 80rpx;
padding-left: -20rpx;
display: flex;
margin-bottom: 60rpx;
align-items: center;
justify-content: center;
// background-color: $themeColor;
padding: 0 22rpx;
box-sizing: border-box;
font-size: 36rpx;
.titlebg {
width: 300rpx;
height: 90rpx;
text-align: left;
padding-left: 54rpx;
margin-top: -16rpx;
margin-left: -50rpx;
background-repeat: no-repeat;
background-size: 100% 100%;
// padding-left: 60rpx;
background-image: url("@/static/icon/homeTitle1.png");
}
.userBox {
display: flex;
align-items: center;
.user_img {
width: 49rpx;
height: 49rpx;
border-radius: 100%;
margin-right: 14rpx;
}
.name {
font-family: MicrosoftYaHei;
font-weight: 600;
font-size: 21rpx;
color: #ffffff;
}
}
}
.greenCardBoxContent {
border: 10rpx solid;
border-radius: 50rpx;
border-image: linear-gradient(to right, #cdb17a, #ebdbcc) 0.5;
clip-path: inset(0px round 10rpx);
animation: huerotate 6s infinite linear;
filter: hue-rotate(360deg);
width: 100%;
display: flex;
overflow: hidden;
height: auto;
padding: 24rpx 19rpx 5rpx;
box-sizing: border-box;
margin-top: 60rpx;
.content_item {
display: inline-block;
width: 317rpx;
margin-right: 26rpx;
overflow: hidden;
}
.book_image {
width: 317rpx;
height: 146rpx;
border-radius: 10rpx;
// background-color: #919191;
}
.book_name {
font-family: MicrosoftYaHei;
font-weight: 600;
font-size: 23rpx;
color: #000000;
line-height: 23rpx;
text-align: left;
margin-top: 14rpx;
}
}
.right {
width: 160rpx;
height: 37rpx;
// background: #0037EB;
border-radius: 7rpx;
font-family: MicrosoftYaHei;
font-weight: 600;
font-size: 26rpx;
color: #ffffff;
line-height: 37rpx;
text-align: center;
}
}
.scroll-X {
width: 100%;
height: 100%;
white-space: nowrap;
}
.learning_box {
// height: 298rpx;
.learning_user_box {
display: flex;
align-items: center;
.learning_user_img {
width: 49rpx;
height: 49rpx;
border-radius: 100%;
margin-right: 14rpx;
}
.name {
font-family: MicrosoftYaHei;
font-weight: 600;
font-size: 21rpx;
color: #ffffff;
}
}
.right {
background-color: #f0ba00;
}
}
.listening_box {
// height: 298rpx;
.right {
background-color: #0037eb;
}
}
.commonPageBox {
// padding-bottom: 50rpx;
// box-sizing: border-box;
}
.noticeIcon {
width: 20rpx;
}
.u-notice-bar {
background-color: transparent !important;
}
.bottomBox {
width: 100%;
height: 200rpx;
display: flex;
align-items: center;
justify-content: space-between;
.item_img {
width: 48% !important;
height: 100%;
image {
width: 100%;
height: 100%;
}
}
}
.notice_box {
border: 2rpx solid rgb(197, 227, 215);
// background-repeat: no-repeat;
// background-size: 100% 100%;
// padding-left: 60rpx;
// background-image: url("@/static/icon/noticebg.png");
}
</style>