Files
sociology_app/pages/homePage/index/index.vue
2024-10-09 10:38:59 +08:00

1065 lines
26 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view class="commonPageBox">
<public-module></public-module>
<view class="header_box"></view>
<view class="appJump">
<view class="everhealth item flexbox" @click="appjumpfun('everhealth')">
<view class="img">
<image
src="@/static/icon/ic_login_health.png"
mode="widthFix"
></image>
</view>
<view class="text">
<text>一路健康</text>
</view>
</view>
<view class="zmzm item flexbox" @click="appjumpfun('nuttyreading')">
<view class="img">
<image src="@/static/icon/home_icon_3.png" mode="widthFix"></image>
</view>
<view class="text">
<text>疯子读书</text>
</view>
</view>
<view class="zmzm item flexbox" @click="appjumpfun('medicine')">
<view class="img">
<image src="@/static/icon/wmysicon.png" mode="widthFix"></image>
</view>
<view class="text">
<text>吴门医述</text>
</view>
</view>
</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: 49rpx; height: 49rpx"
></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" @click="goVideo">秒杀</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" style="padding-bottom: 20rpx">{{
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>
<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>
<!-- <view class="learning_box listening_box bottomBox">
<view class="item_img" @click="handleGoApp">
<image src="@/static/tab/bottom1.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: [ ],
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();
},
async onPullDownRefresh() {
console.log('下拉刷新')
await this.requestAll();
setTimeout(() => {
uni.stopPullDownRefresh();
console.log('下拉刷新已停止');
}, 50);
},
methods: {
...mapMutations(["setUserInfo"]),
goVideo() {
uni.navigateTo({
url: "/pages/index/index",
});
},
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) => {
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) => {
that.cateList.forEach((e, i) => {
var data = res.labels.filter((item) => item.title === e.title);
if (data.length > 0) {
that.cateList[i] = {
...data[0],
...e,
};
}
});
that.$forceUpdate();
});
},
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}`,
});
},
appjumpfun(name) {
let bagName = "";
let schemes = "";
if (name == "nuttyreading") {
bagName = "com.cn.nuttyreading";
schemes = "nuttyreading";
}
if (name == "everhealth") {
bagName = "cn.com.everhealth";
schemes = "everhealth";
}
if (name == "medicine") {
bagName = "com.cn.medicine";
schemes = "medicine";
}
// if(name == 'everhealth'){
if (plus.os.name == "Android") {
//安卓
if (
plus.runtime.isApplicationExist({
//查看安卓系统手机有没有下载这款app
pname: bagName, //B款app云打包的包名
})
) {
//安装了app
plus.runtime.launchApplication({
//打开app
pname: bagName, //B款app云打包的包名
extra: {
url: `${schemes}://${bagName}`, //B款app配置的schemes+云打包的包名
},
function(e) {
console.log("Open system default browser failed: " + e.message);
},
});
} else {
//未安装app
plus.runtime.openURL(
`https://a.app.qq.com/o/simple.jsp?pkgname=${bagName}`,
function (res) {
//进入后台小哥哥给我的应用宝下载链接,让你们后台给你
//这链接会判断你手机是ios还是AndroidAndroid进入应用宝下载app
//跟下面的是一个链接
console.log(res);
}
);
}
} else if (plus.os.name == "iOS") {
//苹果
//因为ios查不到B款app在ios系统手机里面其实下载了也是检测不到所以就不检测了
//直接打开B款appB款app没有的话会进入回调报错我们在回调去打开下载链接
plus.runtime.launchApplication(
{
action: "${schemes}://",
},
function (e) {
plus.runtime.openURL(
`https://a.app.qq.com/o/simple.jsp?pkgname=${bagName}`,
function (res) {
//进入后台小哥哥给我的appStore下载app链接让你们后台给你
//这链接会判断你手机是ios还是Androidios进入应用宝下载app
//跟上面的是一个链接
console.log(res);
}
);
}
);
// }
}
},
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;
display: flex;
justify-content: center;
overflow: hidden;
background-size: 100% 100%;
background-image: url("@/static/icon/homePage/header_bg.png");
background-repeat: no-repeat;
.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: auto;
background: $themeColor;
background-repeat: no-repeat;
display: flex;
flex-wrap: wrap;
// 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: 10rpx 10rpx 0;
box-sizing: border-box;
.cate_item_box {
width: 25%;
height: 100%;
padding: 10rpx 0 10rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.cate_item_border {
width: 65rpx;
height: 78rpx;
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: 10rpx;
font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
font-weight: normal;
font-size: 36rpx;
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;
}
.learning_box_bottom {
width: 100%;
margin-top: 0;
height: 40rpx;
margin: 40rpx 0;
}
.greenCardBox1 {
margin-top: 80rpx;
margin-bottom: 120rpx;
.greenCardBoxTop {
width: 100%;
margin-bottom: 30rpx;
// background: linear-gradient(
// 130deg,
// rgb(46, 103, 106) 0%,
// rgb(114, 173, 146) 100%
// )
// text;
text-align: center;
// line-height: 60rpx;
display: flex;
// margin-bottom: 60rpx;
align-items: center;
justify-content: center;
// background-color: $themeColor;
padding: 0 22rpx 0;
padding-left: 40rpx;
box-sizing: border-box;
font-size: 44rpx;
.titlebg {
width: 400rpx;
height: 120rpx;
line-height: 120rpx;
background-size: 100% 100%;
background-image: url("@/static/icon/homeTitleBg.png");
background-repeat: no-repeat;
font-size: 44rpx;
margin-left: -60rpx;
// height: 90rpx;
text-align: left;
padding-left: 140rpx;
color: #fff;
// homeTitleBg.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: bold;
font-size: 21rpx;
color: #ffffff;
}
}
}
.greenCardBoxContent {
border: 2rpx solid #5599a7;
padding: 100rpx 20rpx 20rpx;
margin-top: -96rpx;
// border: 10rpx solid;
border-radius: 20rpx;
background-image: linear-gradient(0deg, #65b5c561 0%, #fdfcdf3d 75%);
// 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: 300rpx;
background-color: #fff !important;
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;
// border-radius: 40rpx;
// background-image: linear-gradient(90deg, #3ab3ae 0%, #d5ecdd 200%);
.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");
}
.appJump {
width: 190rpx;
position: fixed;
right: 0;
top: 7%;
z-index: 1;
.item {
background: rgba(255, 255, 255, 0.6);
margin-bottom: 30rpx;
border: 1px solid #fff;
border-right: none;
align-items: center;
padding-right: 10rpx;
display: flex;
align-items: center;
justify-content: space-around;
overflow: hidden;
border-radius: 50rpx 0 0 50rpx;
text {
font-size: 28rpx;
font-weight: 700;
}
.img {
// width: 60rpx; height: 60rpx;
padding: 6rpx;
overflow: hidden;
background-color: #fff;
border-radius: 100%;
image {
width: 50rpx;
height: 50rpx;
}
}
}
}
.related_courses_name {
font-weight: bold;
}
</style>