Files
sociology_app/pages/medicaldes/medicaldes.vue
2025-03-19 09:41:42 +08:00

937 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="container commonPageBox"
style="background-color: #fff !important"
>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<z-nav-bar title="吴门之光" bgColor="#3AB3AE" fontColor="#fff"></z-nav-bar>
<!-- <uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input"
@cancel="cancel" @clear="clear">
</uni-search-bar> -->
<view class="contentBox">
<!-- <scroll-view class="scroll-view_H oneCateList" scroll-x="true" scroll-left="0"> -->
<view class="oneCateList flexbox">
<text
:class="[curOneCateIndex == index ? 'cur' : '']"
@click="setOneCateIndex(item, index)"
v-for="(item, index) in oneCateList"
:key="item.type"
>{{ item.title }}</text
>
</view>
<!-- <view class="search_box" v-if="oneCateList.length > 0">
<u-search @click="checkDisable" placeholder="请输入方剂名" @focus="focus" @clear="clear" v-model="searchValue"
@input="input" @blur="blur" @search="search" @custom="search"></u-search>
</view> -->
<!-- <view class="searchList" v-show="showSearchList">
<view class="itemBox" v-if="searchList.length > 0">
<view class="item" v-for="(item, index) in searchList" :key="index" @click="gotoDetail(item)">
{{item.title}}
</view>
</view>
<view v-else class="">
<u-divider text="未找到相关方剂哦~"></u-divider>
</view>
</view> -->
<!-- </scroll-view> -->
<template v-if="!showSearchList">
<view class="grid twoCateList" v-if="twoCateList.length > 0">
<u-grid :col="3" border class="u-grid-list cateList">
<u-grid-item
v-for="(item, index) in twoCateList"
:key="item.dictType"
@click="setTwoCateIndex(item, index)"
>
<!-- <u-button :type="success">成功按钮</u-button> -->
<view
:class="['grid-text', curTwoCateIndex == index ? 'cur' : '']"
>{{ item.dictValue }}
</view>
</u-grid-item>
</u-grid>
</view>
<view
:class="` titleList`"
:style="`height:calc(100% - ${scrollViewHeight * 2}rpx;`"
>
<scroll-view
scroll-y="true"
class="scroll-Y"
v-if="titleList.length > 0"
>
<template v-if="curOneCateIndex == 2 && curTwoCateIndex == 2">
<!-- 吴门缘起-吴门之徽 -->
<u-grid :col="3">
<u-grid-item
class="scroll-view-item"
v-for="(item, index) in titleList"
:key="item.id"
@click="previewImage(item.url)"
style="align-items: flex-start"
>
<img
:src="item.url"
alt=""
class="wmzhimg"
mode="aspectFit"
/>
</u-grid-item>
</u-grid>
</template>
<template
v-else-if="
curOneCateIndex == 0 &&
(curTwoCateIndex == 0 || curTwoCateIndex == 2)
"
>
<common-list
@lower="onReachBottom1"
:pagination="pagination"
:dataList="titleList"
@hancleClick="gotoDetail"
label="title"
>
</common-list>
<!-- 学术贡献-学术思想和学术平台 -->
</template>
<template v-else-if="curOneCateIndex == 0 && curTwoCateIndex == 1">
<u-divider text="点击标签进入出版专著"></u-divider>
</template>
<template v-else-if="curOneCateIndex == 0 || curOneCateIndex == 2">
<common-list
@lower="onReachBottom1"
:dataList="titleList"
@hancleClick="gotoDetail"
label="name"
>
</common-list>
<!-- <u-grid :col="1">
<u-grid-item class="scroll-view-item " v-for="(item, index) in titleList" :key="item.id"
@click="gotoDetail(item)"
style="align-items: flex-start;border-bottom: 2px solid #fff;">
<view :class="['titleItem']">{{ item.name }}</view>
</u-grid-item>
</u-grid> -->
</template>
<template v-if="curOneCateIndex == 3">
<common-list
@lower="onReachBottom1"
:dataList="titleList"
@hancleClick="gotoDetail"
label="title"
>
</common-list>
<!-- <u-grid :col="1">
<scroll-view class="scroll-Y" scroll-y="true">
<u-grid-item class="scroll-view-item " v-for="(item, index) in titleList"
:key="item.id" @click="gotoDetail(item)"
style="align-items: flex-start;border-bottom: 2px solid #fff;">
<view :class="['titleItem']">{{ item.title }}</view>
</u-grid-item></scroll-view>
</u-grid> -->
</template>
<template v-if="curOneCateIndex == 1">
<view
class="scroll-view-item"
v-for="(item, index) in titleList"
:key="item.id"
@click="gotoDetail(item)"
style="
align-items: flex-start;
border-bottom: 2px solid #fff;
display: flex;
padding: 20rpx 0;
"
>
<view style="width: 280rpx; text-align: center">
<img
src=""
v-if="item.imageslist && item.imageslist.length == 0"
class="chImage"
/>
<img
:src="item.imageslist && item.imageslist[0]"
v-else
class="chImage"
/>
</view>
<view :class="['titleItem']">{{ item.name }}</view>
</view>
</template>
</scroll-view>
<u-divider v-else text="暂无数据哦~"></u-divider>
</view>
</template>
</view>
<!-- <view class="search_box flexbox" @click="">
<view class="search">
<text class="icon_search"></text>
<text class="prompt">请输入方剂名</text>
</view>
</view> -->
<!-- <u-modal :show="limitShow" :title="limitTitle" :content='limitContent' @confirm="limitShow=false">
<view class="limiTy">
<view v-if="curOneCateIndex == 0">
此功能使用权限仅对同一手机账号注册过一路健康APP且开通《吴门验方基础班》【上中下】与《吴门验方提高班》【上下】五部课程的疯子读书APP学员开通。
<br>如果您符合条件,请联系微信客服开通。
<br>客服微信:<b>yilujiankangkefu</b>
</view>
<view v-if="curOneCateIndex == 3">
此功能使用权限仅对在疯子读书APP购买《肿瘤六经辨证法》书籍的学员开通。
<br>如果您符合条件,请联系微信客服开通。
<br>客服微信:<b>yilujiankangkefu</b>
</view>
</view>
</u-modal> -->
<z-navigation></z-navigation>
</view>
</template>
<script>
import $http from "@/config/requestConfig.js";
import { mapState } from "vuex";
export default {
data() {
return {
playData: {},
searchValue: "",
oneCateList: [
{
title: "学术贡献",
type: "medicaldesBookType",
},
{
title: "学术传承",
type: "inheritType",
},
{
title: "吴门缘起",
type: "lightType",
// }, {
// title: "吴门纪实",
// type: 'recordType'
},
], // 一级分类标题1
twoCateList: [], // 二级分类标题
titleList: [], // 方剂标题
curOneCateIndex: 0, // 当前选中的一级分类
curTwoCateIndex: 0, // 当前选中的二级分类
searchList: [], // 搜索结果数组
showSearchList: false,
userMes: {}, // 用户信息
searchDisable: false, // 搜索不可用
limitShow: false,
limitTitle: "提示",
limitContent: "",
scrollViewHeight: 0,
};
},
onLoad() {
this.getUserInfo();
// this.getCateList()
},
onHide() {
// this.showSearchList = false
// this.searchList = []
},
computed: {
...mapState(["userInfo"]),
},
methods: {
// 检查是有权限使用搜索功能
checkDisable() {
console.log("点击了");
},
// 显示无权限弹窗
// showNoRights() {
// let that = this
// uni.showModal({
// content: "",
// confirmText: '好的',
// showCancel: false,
// success: function(res) {
// if (res.confirm) {
// // console.log('用户点击确定');
// that.clear()
// }
// }
// })
// },
// 获取用户详情
getUserInfo() {
// 用户详情
if (this.userInfo.id != undefined) {
this.$http.post("book/user/info/" + this.userInfo.id).then((res) => {
this.userMes = res.user;
this.getCateList();
console.log(this.userMes, "呼呼");
});
}
},
// 详情
gotoDetail(item) {
console.log("111", item);
console.log("this.curOneCateIndex", this.curOneCateIndex);
console.log("this.curTwoCateIndex", this.curTwoCateIndex);
if (this.curOneCateIndex == 0) {
uni.navigateTo({
// url: '../bookShop/commodityDetail?id=' + item.id
url: "./xueshugongxianDetail?id=" + item.id,
});
return;
}
if (this.curOneCateIndex == 1) {
uni.navigateTo({
url: "./medicaldesDetail?id=" + item.id,
});
return;
}
if (this.curOneCateIndex == 2) {
console.log("111", item);
uni.navigateTo({
url: "./video?title=" + item.name + "&src=" + item.url,
});
return;
}
if (this.curOneCateIndex == 3) {
console.log("111", item);
uni.navigateTo({
url: "./recordDetail?id=" + item.id,
});
return;
}
},
// 获取名称
getTitles(dictType) {
console.log("dictType", dictType);
if (this.curOneCateIndex == 0) {
if (dictType == 2) {
uni.navigateTo({
url: "./zhuanzhuchuban",
});
return;
}
$http
.request({
url: "book/generalArticle/articleByPage",
method: "POST",
data: {
// loadAnimate: 'none', // 请求加载动画
type: dictType == 1 ? "1" : "2",
limit: 1000,
current: 1,
},
header: {
//默认 无 说明:请求头
"Content-Type": "application/json",
},
})
.then((res) => {
console.log(res, "内容获取成功");
if (res.code == 0 && res.result && res.result.records.length > 0) {
this.titleList = res.result.records;
} else {
this.titleList = [];
}
})
.catch((e) => {
this.titleList = [];
console.log(e);
});
}
if (this.curOneCateIndex == 1) {
$http
.request({
url: "book/medicaldes/inheritListByPage",
method: "POST",
data: {
// loadAnimate: 'none', // 请求加载动画
dictType: dictType,
limit: 1000,
current: 1,
},
header: {
//默认 无 说明:请求头
"Content-Type": "application/json",
},
})
.then((res) => {
console.log(res, "内容获取成功");
if (res.code == 0 && res.result.records.length > 0) {
this.titleList = res.result.records;
for (let i = 0; i < this.titleList.length; i++) {
this.titleList[i].imageslist = [];
this.titleList[i].imageslist = this.titleList[i].img.split(";");
}
} else {
this.titleList = [];
}
})
.catch((e) => {
this.titleList = [];
console.log(e);
});
}
if (this.curOneCateIndex == 2) {
$http
.request({
url: "book/medicaldes/lightListByType?type=" + dictType,
method: "POST",
data: {
// loadAnimate: 'none', // 请求加载动画
limit: 1000,
page: 1,
},
header: {
//默认 无 说明:请求头
"Content-Type": "application/json",
},
})
.then((res) => {
console.log(res, "内容获取成功");
if (res.code == 0 && res.result.length > 0) {
this.titleList = res.result;
} else {
this.titleList = [];
}
})
.catch((e) => {
this.titleList = [];
console.log(e);
});
}
if (this.curOneCateIndex == 3) {
$http
.request({
url: "book/medicaldes/recordByType?type=" + dictType,
method: "POST",
data: {
// loadAnimate: 'none', // 请求加载动画
limit: 1000,
page: 1,
},
header: {
//默认 无 说明:请求头
"Content-Type": "application/json",
},
})
.then((res) => {
console.log(res, "内容获取成功");
if (res.code == 0 && res.result.length > 0) {
this.titleList = res.result;
} else {
this.titleList = [];
}
})
.catch((e) => {
this.titleList = [];
console.log(e);
});
}
},
setTwoCateIndex(item, index) {
let dictType = item.dictType;
this.curTwoCateIndex = index;
this.getTitles(dictType);
},
async setOneCateIndex(item, index) {
console.log(index, 99999);
var that = this;
// if(this.userMes.tgdzPower == 0){
// let that = this
// uni.showModal({
// content: "购买 针灸六经法要上册和下册 后方可使用此功能",
// confirmText: '好的',
// showCancel: false,
// success: function(res) {
// if (res.confirm) {
// // console.log('用户点击确定');
// }
// }
// })
// return
// }
// if(item.title == "时辰取穴"){
// uni.navigateTo({
// url: "../timeAcupoint/timeAcupoint"
// })
// return
// }
let type = item.type;
this.curOneCateIndex = index;
this.curTwoCateIndex = 0;
this.searchValue = "";
this.searchList = [];
this.showSearchList = false;
// if (index != 2) {
await this.getTowCateList(type);
// uni.createSelectorQuery().select('.oneCateList').boundingClientRect(function (rect) {
// var height = rect.height
// console.log('元素高度:',);
// }).exec();
// } else {
// this.getJFList(dictType)
// }
},
async getTowCateList(type) {
var that = this;
$http
.request({
url: "book/medicaldes/typeList?label=" + type,
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
loadAnimate: "none", // 请求加载动画
// 'categoryId': id
},
// header: { //默认 无 说明:请求头
// 'Content-Type': 'application/json'
// },
})
.then((res) => {
console.log(res, "二级分类获取成功");
if (res.code == 0 && res.result.length >= 0) {
this.twoCateList = res.result;
if (this.curOneCateIndex == 0) {
this.twoCateList = [
{
dictType: "1",
dictValue: "学术思想",
},
{
dictType: "2",
dictValue: "出版专著",
},
{
dictType: "3",
dictValue: "学术平台",
},
];
}
if (this.curOneCateIndex == 2) {
this.twoCateList = [
{
dictType: "1",
dictValue: "吴门之歌",
},
{
dictType: "2",
dictValue: "巴山夜语",
},
{
dictType: "3",
dictValue: "吴门之徽",
},
];
}
if (this.curOneCateIndex == 3) {
this.twoCateList = [
{
dictType: "1",
dictValue: "学术贡献",
},
{
dictType: "2",
dictValue: "抗疫纪实",
},
{
dictType: "3",
dictValue: "吴门公益",
},
];
}
this.getTitles(this.twoCateList[0].dictType);
this.$nextTick(async () => {
// await uni.createSelectorQuery().select('.uni-tabbar').boundingClientRect(function (rect) {
// console.log(rect.height, '3333')
// // var height = 42 + rect.height + 10;
// // that.scrollViewHeight = height;
// // console.log(that.scrollViewHeight, '111111')
// // that.$forceUpdate()
// // console.log('元素高度2', height);
// }).exec();
await uni
.createSelectorQuery()
.select(".cateList")
.boundingClientRect(function (rect) {
console.log(rect.height, "22222");
var height = 42 + rect.height + 20;
that.scrollViewHeight = height;
console.log(that.scrollViewHeight, "111111");
that.$forceUpdate();
console.log("元素高度2", height);
})
.exec();
});
} else {
this.twoCateList = [];
this.titleList = [];
}
})
.catch((e) => {
this.twoCateList = [];
this.titleList = [];
console.log(e);
});
},
transformData(inputData) {
const result = {};
inputData.forEach((item) => {
const { letter } = item;
if (!result[letter]) {
result[letter] = [];
}
result[letter].push(item);
});
// const finalResult = Object.keys(result).map(key => ({ [key]: result[key] }));
return result;
},
// getJFList(id) {
// $http.request({
// url: "book/prescript/prescriptListForJF",
// method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
// data: {
// loadAnimate: 'none', // 请求加载动画
// 'categoryId': id
// },
// header: { //默认 无 说明:请求头
// 'Content-Type': 'application/json'
// },
// }).then(res => {
// if (res.code == 0 && res.list.length > 0) {
// this.twoCateList = []
// this.titleList = this.transformData(res.list)
// console.log('JF经方', this.titleList)
// } else {
// this.twoCateList = []
// this.titleList = []
// }
// }).catch(e => {
// this.twoCateList = []
// this.titleList = []
// console.log(e)
// })
// },
getCateList(id) {
id ? "" : (id = 0);
this.twoCateList = [];
this.curTwoCateIndex = 0;
// 0为获取顶级分类其他为搜索下级分类目前的逻辑顶级是写死的所以可能只会涉及到搜索第二级
// $http.request({
// url: "book/prescript/prescriptCategoryList",
// method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
// data: {
// loadAnimate: 'none', // 请求加载动画
// 'categoryId': id
// },
// header: { //默认 无 说明:请求头
// 'Content-Type': 'application/json'
// },
// }).then(res => {
// console.log(res, '脉穴分类获取成功')
// if (res.code == 0 && res.list.length > 0) {
// this.oneCateList = res.list
this.getTowCateList(this.oneCateList[0].type);
// } else {
// this.oneCateList = []
// }
// }).catch(e => {
// this.oneCateList = []
// console.log(e)
// })
},
// 放大图片
previewImage(url) {
console.log(url);
uni.previewImage({
urls: [url],
longPressActions: {
itemList: ["很抱歉,暂不支持保存图片到本地"],
success: function (res) {
// console.log(res,'+++++')
},
},
});
},
// getSearch() {
// $http.request({
// url: "book/prescript/searchPrescript",
// method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
// data: {
// loadAnimate: 'none', // 请求加载动画
// 'keywords': this.searchValue,
// type: this.curOneCateIndex + 1
// },
// header: { //默认 无 说明:请求头
// 'Content-Type': 'application/json'
// },
// }).then(res => {
// console.log(res, '搜索结果')
// if (res.code == 0 && res.list.length >= 0) {
// this.showSearchList = true
// this.searchList = res.list
// } else {
// this.searchList = []
// }
// }).catch(e => {
// // this.titleList = []
// this.searchList = []
// console.log(e)
// })
// },
// search(res) {
// console.log(res, 'res')
// // uni.showToast({
// // title: '搜索:' + res,
// // icon: 'none'
// // })
// if (res == '') {
// this.showSearchList = false
// this.searchList = []
// } else {
// this.getSearch()
// }
// },
// input(res) {
// console.log('----input:', res)
// if (res == '') {
// this.searchList = []
// } else {
// this.getSearch()
// }
// },
// clear(res) {
// console.log('----clear:', res)
// // uni.showToast({
// // title: 'clear事件清除值为',
// // icon: 'none'
// // })
// this.searchValue = ''
// this.showSearchList = false
// },
// blur(res) {
// // console.log('----blur:', res)
// // if (res == '') {
// // this.showSearchList = false
// // this.searchList = []
// // } else {
// // this.getSearch()
// // }
// },
// focus(e) {
// console.log('----focus:')
// // uni.showToast({
// // title: 'focus事件输出值为' + e.value,
// // icon: 'none'
// // })
// // 等于1 就是有权限
// // this.showSearchList = true
// },
// cancel(res) {
// uni.showToast({
// title: '点击取消,输入值为:' + res.value,
// icon: 'none'
// })
// }
},
onBackPress() {
// #ifdef APP-PLUS
plus.key.hideSoftKeybord();
// #endif
},
components: {},
};
</script>
<style lang="scss" scoped>
.u-grid-list {
// height: 40rpx;
}
.searchList {
.item {
font-size: 28rpx;
padding: 20rpx;
border-bottom: 1px solid #dadbde;
}
}
.scroll-view_H {
background-color: #fff;
white-space: nowrap;
padding: 10rpx;
}
.contentBox {
height: calc(100% - 50px);
.oneCateList {
padding: 10rpx;
box-sizing: border-box;
justify-content: space-between;
text {
text-align: center;
display: inline-block;
width: 32%;
padding: 20rpx 0;
font-size: 34rpx;
border-radius: 10rpx;
}
.cur {
background-color: #3ab3ae;
color: #fff;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
}
.twoCateList {
font-size: 28rpx;
margin-top: 20rpx;
.grid-text {
padding: 10rpx 0rpx;
text-align: center;
}
.cur {
color: #3ab3ae;
}
// .u-grid-list{border: 0.5px solid #dadbde;}
}
.titleList {
font-size: 26rpx;
margin-top: 20rpx;
padding: 0 10rpx;
border-radius: 10rpx;
background-color: #f8f9fa;
.JFtitleItem {
background-color: #ffffff;
padding: 20rpx 10rpx;
width: 100%;
border-bottom: 0.5px solid #f8f9fa;
}
.wmzhimg {
width: 220rpx;
height: 220rpx;
}
}
}
.search_box {
margin: 0 auto;
overflow: hidden;
align-items: center;
width: calc(100% - 10px);
margin-top: 20rpx;
margin-bottom: 20rpx;
.search {
height: 56upx;
display: flex;
width: 86%;
margin: 0 auto;
align-items: center;
padding: 0upx 40upx;
background-color: #fff;
border-radius: 20upx;
box-shadow: 0 0px 10px 1px #3ab3ae33;
}
.prompt {
color: #838383;
font-size: 24rpx;
}
.icon_search {
background-image: url("@/static/icon/map_ic_search.png");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 36upx;
height: 36upx;
margin-right: 20upx;
}
}
.flexbox {
display: flex;
}
.uni-modal .uni-modal__bd {
text-align: left;
}
.limiTy {
font-size: 28rpx;
line-height: 46rpx;
}
.chImage {
height: 100rpx;
}
.scroll-Y {
height: 100%;
}
.scroll-view_H {
white-space: nowrap;
width: 100%;
}
.scroll-view-item {
// height: 300rpx;
// line-height: 300rpx;
// text-align: center;
// font-size: 36rpx;
}
.scroll-view-item_H {
display: inline-block;
width: 100%;
// height: 300rpx;
// line-height: 300rpx;
// text-align: center;
// font-size: 36rpx;
}
.titleList {
height: 100%;
}
.titleList2 {
height: calc(100% - 170rpx);
}
</style>