zm/medicine_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

我的订单+我的

Browse Source
This commit is contained in:
始于初见
2024-06-19 16:12:23 +08:00
parent 5d8aace5cc
commit 132e363be0
473 changed files with 65060 additions and 2742 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1386
pages/component/commonComponents/address/edit.vue Normal file
View File

File diff suppressed because it is too large Load Diff

906
pages/component/commonComponents/address/index.vue Normal file
View File

@@ -0,0 +1,906 @@
<template>
<view class=" ">
<!-- 公共组件-每个页面必须引入 -->
<!-- <public-module></public-module>
<z-nav-bar title="确认订单" bgColor="#258feb" fontColor="#fff"></z-nav-bar> -->
<view
class="common_address_box"
:style="`${
backState != 1000 ? 'padding-bottom: 180rpx' : 'padding-bottom: 100rpx'
}`"
>
<z-nav-bar
navFontAlign="left"
title="我的收货地址"
bgColor="#258feb"
fontColor="#fff"
>
<template slot="right"></template>
</z-nav-bar>
<view
class=""
style="padding: 20rpx; background-color: #f9f9f9; height: 100%"
>
<!-- @longpress.native.stop="onLongPress" -->
<common-list
isCondition="true"
:dataList="addressList"
isNoIcon="true"
@hancleClick="selectAddress"
label="name"
class="common_radius_box color_shandow"
style="background-color: #fff"
>
<template slot="labelSlot" slot-scope="slotProps">
<view class="label_content AC_List">
<view style="width: 100%">
<view class="normal_logo">
{{ getName(slotProps.row.consigneeName) }}
</view>
<view :class="`right`">
<view class="normal_box">
<view class="normal_box_top">
<view class="user_info">
<text class="name">
{{ slotProps.row.consigneeName }}
</text>
<text class="tel">
{{ slotProps.row.consigneePhone }}
</text>
<text
v-if="slotProps.row.isDefault == 1"
class="isDefault"
>默认</text
>
</view>
<view class="curriulum_title"
>{{ slotProps.row.province }}{{ slotProps.row.city
}}{{ slotProps.row.county
}}{{ slotProps.row.detailAddress }}
</view>
</view>
</view>
<!-- 018F89 -->
<u-icon
class="editIcon"
name="edit-pen-fill"
color="#258feb"
size="24"
@click.native.stop="handleClickEdit(slotProps.row)"
style="display: inline-block; margin-left: 10rpx"
></u-icon>
<u-icon
class="editIcon"
name="trash-fill"
color="red"
size="24"
@click.native.stop="handleClickDelete(slotProps.row.id)"
style="display: inline-block; margin-left: 10rpx"
></u-icon>
</view>
</view>
<view> </view>
</view>
</template>
<template slot="rightSlot" slot-scope="slotProps">
<view> </view>
</template>
</common-list>
</view>
<view class="goods_nav_box">
<uni-goods-nav
:fill="true"
:options="buyOptions"
:button-group="customButtonGroup1"
@click="onHandleClickIcon"
@buttonClick="onHandleClickBuy"
/>
</view>
</view>
<u-modal
:show="showModal"
:title="modalInfo.title"
:content="modalInfo.content"
showCancelButton
@confirm="deleteAddress"
@cancel="hancleModalCancel"
></u-modal>
<!-- <edit-address
@fresh="handleFresh"
ref="commonAddress"
@selectAddress="selectAddress"
></edit-address> -->
</view>
</template>
<script>
import courseDescription from "@/pages/component/commonComponents/list";
import editAddress from "./edit.vue";
import $http from "@/config/requestConfig.js";
import { mapState } from "vuex";
export default {
components: {
courseDescription, //课程说明
editAddress, //编辑收获地址
},
props: ["backState", "type"],
data() {
return {
isEdit: false,
showModal: false,
addressData: {
address: "天津市河东区桃园西里2单元222号房",
userName: "张花花",
phone: "18834844849",
},
buyOptions: [
// {
// icon: 'chat',
// text: '客服'
// },
// {
// icon: "bars",
// text: "管理",
// // info: 2,
// infoBackgroundColor: "#007aff",
// infoColor: "#f5f5f5",
// },
// {
// icon: 'cart',
// text: '购物车',
// info: 2
// }
],
customButtonGroup1: [
{
with: 200,
text: "+ 添加收货地址",
backgroundColor: "linear-gradient(90deg, #258feb 0%, #B9E0F5 100%)",
color: "#fff",
},
],
show: false,
addressList: [],
urlList: {
list: "common/userAddress/getUserAddress",
curriculumInfo: "app/phone.do?getCourseInfo",
detailInfo: "app/phoneDoctor.do?getTaiHuClassInfo_new",
delete: "common/userAddress/delete",
},
customButton: [
{
width: "340rpx",
text: "立即支付",
backgroundColor: "linear-gradient(90deg, #258feb 0%, #B9E0F5 100%)",
color: "#fff",
},
],
modalInfo: {},
};
},
onLoad(options) {
this.options = options;
this.getData();
// this.getUserInfo()
// this.getCateList()
},
onHide() {
// this.showSearchList = false
// this.searchList = []
},
onShow() {
this.selectPayIndex = 0;
this.getData();
},
computed: {
...mapState(["userInfo"]),
},
methods: {
hancleModalCancel() {
this.showModal = false;
},
backClick() {
this.$emit("fresh");
},
handleFresh() {
this.getData();
},
onHandleClickIcon() {
this.isEdit = true;
},
onHandleClickBuy() {
uni.navigateTo({
url: "/pages/component/commonComponents/address/edit",
});
},
handleClickEdit(data) {
console.log("data at line 145:", data);
uni.navigateTo({
url: "/pages/component/commonComponents/address/edit?id=" + data.id,
});
// this.$refs.commonAddress.open(data.id);
},
deleteAddress() {
var data = {};
$http
.request({
// url: "book/buyOrder/buySave",
url: `${this.urlList.delete}?id=${this.selectAddressId}`,
method: "Get", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: {
//默认 无 说明：请求头
"Content-Type": "application/json",
},
})
.then((res) => {
console.log("res at line 252:", res);
this.showModal = false;
if (res.code == 0) {
this.getData();
}
});
},
handleClickDelete(id) {
this.modalInfo = { title: "提示信息", content: "确定要删除该地址吗？" };
this.selectAddressId = id;
this.showModal = true;
},
getName(name) {
console.log("name at line 140:", name);
if (name) {
if (name.length <= 2) {
return name;
} else {
return name.substring(0, 1);
}
}
},
open() {
this.getData();
},
fnCopy(value, title) {
this.$commonJS.handleMakingPhoneCalls(value, title);
},
gotoPhone() {
this.$commonJS.handleMakingPhoneCalls("022-24142321");
},
radioChange(index) {
this.selectPayIndex = index;
console.log("this.selectPayIndex at line 315:", this.selectPayIndex);
this.$forceUpdate();
},
handleValChange(e) {
console.log("e at line 424:", e);
},
buttonClick(e) {
console.log(e);
this.options[2].info++;
},
hancleModalConfirm() {
var data = {
values: {
customerType: "D",
token: uni.getStorageSync("token"),
customerOid: uni.getStorageSync("customerOid"),
...this.taiHuClassInfo,
},
};
// $mars.progressBegin('申请中...');
// $mars.post(customerType, 'applyRelearn', data, function (ret) {
// api.hideProgress();
// fnLoadDataGrid();
// });
},
selectAddress(v) {
console.log("v at line 423:", this.type);
// 当前页面
// 在源页面中使用 uni.navigateBack 返回上一页面并传递参数
if (this.options.type == "order") {
uni.$emit("returnData", v);
uni.navigateBack({
delta: 1, // 返回上一级页面
});
}
// this.$emit("selectAddress", v);
},
async getData() {
console.log("this.userInfo.id at line 368:", this.userInfo.id);
var data = {};
var that = this;
console.log(this.$store.state, "11111111111");
$http
.request({
// url: "book/buyOrder/buySave",
url: `${this.urlList.list}?userId=${this.userInfo.id}`,
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: {
//默认 无 说明：请求头
"Content-Type": "application/json",
},
})
.then(async (res) => {
console.log("res at line 374:", res);
if (res.code == 0) {
this.addressList = res.list;
}
this.$forceUpdate();
// await that.getDetailInfo();
});
},
getPriceData() {
var that = this;
setTimeout(() => {
that.$nextTick(() => {
that.$refs.priceDetail.getData();
});
}, 100);
},
// 检查是有权限使用搜索功能
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, "呼呼");
});
}
},
async handleselectCate(item, index) {
this.dataList = [];
var data = [];
console.log(item, index, 99999);
var that = this;
// curriculumInfo
this.$http
.post(this.urlList.curriculumInfo, {
customerType: "D",
token: uni.getStorageSync("token"),
customerOid: uni.getStorageSync("customerOid"),
oid: item.coid,
})
.then(async (res) => {
that.curriculumInfo = res.obj;
that.dataList = res.obj.courseList;
// socket.init();
});
// this.$nextTick(() => {
// switch (item.type) {
// case 1:
// // allDataList
// this.dataList = that.allDataList.result1Lst
// break;
// case 2:
// this.dataList = that.allDataList.result2Lst
// break;
// case 3:
// this.dataList = that.allDataList.result3Lst
// break;
// case 4:
// this.dataList = that.allDataList.result4Lst.filter(e =>
// e.oid != '5fcf991c027b11e7ae62008cfae40c18' && e.oid != 'b3d8a938b8e147bc877613bb712a9cb3' && e.oid != '4d4730163135420ea962bfac4805e026' && e.oid != '49fb76ca3d6b43718d78c6aa9a3003c2' && e.oid != 'c7b047ed9246469b9ae2b1013fc3df9c'
// )
// console.log(this.dataList.length, 6666666)
// break;
// }
// this.currentCateIndex = item.index
// })
console.log(this.allDataList, this.dataList, "1688");
// 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
// }
// this.currentStatusIndex = index
this.searchValue = "";
this.searchList = [];
this.showSearchList = false;
// if (index != 2) {
// uni.createSelectorQuery().select('.statusList').boundingClientRect(function (rect) {
// var height = rect.height
// console.log('元素高度：',);
// }).exec();
// } else {
// this.getJFList(dictType)
// }
return data;
},
async getDetailInfo() {
var that = this;
// curriculumInfo
// this.$http
// .post(this.urlList.detailInfo, {
// customerType
// :
// "D",
// token
// : uni.getStorageSync("token")
// ,
// customerOid
// : uni.getStorageSync("customerOid"),
// classOid: 'f81b558ca4ee406e97c4045c87c2539c'
// })
// .then(async res => {
// that.detailInfo = res.obj
// // that.dataList = res.obj.courseList
// // socket.init();
// });
// this.$nextTick(() => {
// switch (item.type) {
// case 1:
// // allDataList
// this.dataList = that.allDataList.result1Lst
// break;
// case 2:
// this.dataList = that.allDataList.result2Lst
// break;
// case 3:
// this.dataList = that.allDataList.result3Lst
// break;
// case 4:
// this.dataList = that.allDataList.result4Lst.filter(e =>
// e.oid != '5fcf991c027b11e7ae62008cfae40c18' && e.oid != 'b3d8a938b8e147bc877613bb712a9cb3' && e.oid != '4d4730163135420ea962bfac4805e026' && e.oid != '49fb76ca3d6b43718d78c6aa9a3003c2' && e.oid != 'c7b047ed9246469b9ae2b1013fc3df9c'
// )
// console.log(this.dataList.length, 6666666)
// break;
// }
// this.currentCateIndex = item.index
// })
console.log(this.allDataList, this.dataList, "1688");
// 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
// }
// this.currentStatusIndex = index
this.searchValue = "";
this.searchList = [];
this.showSearchList = false;
// if (index != 2) {
// uni.createSelectorQuery().select('.statusList').boundingClientRect(function (rect) {
// var height = rect.height
// console.log('元素高度：',);
// }).exec();
// } else {
// this.getJFList(dictType)
// }
return data;
},
async setOneCateIndex(item, index) {
this.allDataList = [];
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
// }
this.currentStatusIndex = index;
// this.currentCateIndex = 0
this.searchValue = "";
this.searchList = [];
this.showSearchList = false;
this.$nextTick(async () => {
await that.getData();
this.$forceUpdate();
});
// this.handleselectCate(this.cateList[this.currentCateIndex])
// if (index != 2) {
// uni.createSelectorQuery().select('.statusList').boundingClientRect(function (rect) {
// var height = rect.height
// console.log('元素高度：',);
// }).exec();
// } else {
// this.getJFList(dictType)
// }
},
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.dataList = this.transformData(res.list)
// console.log('JF经方', this.dataList)
// } else {
// this.twoCateList = []
// this.dataList = []
// }
// }).catch(e => {
// this.twoCateList = []
// this.dataList = []
// 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.statusList = res.list
// this.getTowCateList(this.statusList[0].type)
// } else {
// this.statusList = []
// }
// }).catch(e => {
// this.statusList = []
// 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.currentStatusIndex + 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.dataList = []
// 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
},
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
/deep/.list_item {
// border-bottom: none;
padding-left: 0 !important;
padding-right: 0 !important;
}
.AC_List {
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
background-color: #fff;
// justify-content: space-between;
}
.curriulum_title {
width: 100%;
font-weight: 500;
font-size: 28rpx;
white-space: wrap; /* 禁止文本换行 */
overflow: hidden;
// line-height: 40rpx;
// display: flex;
// align-items: center;
margin-top: 10rpx;
float: left;
margin-bottom: 5rpx;
color: #b0b0b0;
// padding: 20rpx;
box-sizing: border-box;
text {
margin-right: 10rpx;
}
}
.right {
width: calc(100% - 100rpx);
display: flex;
align-items: center;
}
.user_info {
width: 100%;
float: left;
display: flex;
margin-top: 10rpx;
align-items: center;
font-size: 32rpx;
font-weight: 800;
.name {
max-width: calc(100% - 300rpx);
white-space: nowrap; /* 禁止文本换行 */
overflow: hidden; /* 隐藏超出容器的文本 */
text-overflow: ellipsis; /* 使用省略号代替隐藏的内容 */
display: inline-block;
color: #333;
margin-right: 10rpx;
}
.tel {
color: #000;
font-size: 28rpx;
font-weight: 600;
}
}
.common_address_box {
width: 100vw;
height: 100vh;
background-color: #fdfbfb;
}
.normal_box {
width: calc(100% - 60rpx);
height: auto;
float: left;
// overflow: hidden;
.normal_box_top {
width: 100%;
// display: flex;
height: auto;
margin-bottom: 40rpx;
}
.editIcon {
float: right;
}
}
.normal_logo {
width: 80rpx !important;
height: 80rpx !important;
border-radius: 80rpx;
background-color: $themeBgColor;
color: #258feb;
font-size: 34rpx;
font-weight: bold;
text-align: center;
line-height: 80rpx;
float: left;
margin-right: 20rpx;
}
.isDefault {
color: #258feb;
font-size: 22rpx;
font-weight: 600;
border: 1rpx solid $themeColor;
padding: 2rpx 10rpx;
border-radius: 6rpx;
line-height: 30rpx;
margin-left: 18rpx;
}
</style>

181
pages/component/commonComponents/curriculum.vue Normal file
View File

@@ -0,0 +1,181 @@
<template>
<view style="width: 100%;height: 100%;" class="common_curriculum_list">
<scroll-view scroll-y="true" class="scroll-Y" v-if="dataList.length > 0">
<u-grid :col="col ? col : 1" style="overflow: hidden;justify-content:space-between">
<u-grid-item :class="`scroll-view-item list_item content_item `"
v-for="(item, index) in dataList" :key="item.id" @click="gotoDetail(item)">
<image :src="defaultUrl ? defaultUrl : item[imgUrl]" :mode="imgMode?imgMode:'aspectFil'" class="book_image"></image>
<view :class="['titleItem', 'common_curriculum_item']">
<slot name="leftSlot" :row="item"></slot>
<template v-if="isCondition">
<slot name="labelSlot" :row="item"></slot>
</template>
<template v-else>
{{ item[label] }}
</template>
<slot name="rightSlot" :row="item"></slot>
</view>
<!-- <image src="@/static/icon/icon_right.png" class="rightArrow" style=""></image> -->
</u-grid-item>
</u-grid>
</scroll-view>
<u-empty v-else-if="noDataIcon&&isLoadingHide"
:mode="noDataIcon"
:icon="`http://cdn.uviewui.com/uview/empty/${noDataIcon}.png`"
>
</u-empty>
<u-divider v-else text="暂无数据哦~"></u-divider>
</view>
</template>
<script>
import {
mapState
} from 'vuex';
export default {
props: ['dataList', 'label', 'isCondition', 'imgUrl','imgMode', 'className', 'col', 'defaultUrl', 'isScroll','isLoadingHide','noDataIcon'],
data() {
return {
}
},
onLoad() {
},
onHide() {
// this.showSearchList = false
// this.searchList = []
},
computed: {
...mapState(['userInfo']),
},
methods: {
gotoDetail(v) {
this.$emit('hancleClick', v)
},
},
onBackPress() {
// #ifdef APP-PLUS
plus.key.hideSoftKeybord();
// #endif
},
components: {
},
}
</script>
<style lang="scss" scoped>
.list_item {
width: 100%;
// padding: 20rpx 30rpx;
box-sizing: border-box;
font-size: 30rpx;
// border-bottom: 1rpx solid #e0e0e0;
position: relative;
justify-content: space-around;
}
.scroll-view-item:nth-child(2n-1) {
// background-color: #f5f5f5 !important;
}
.rightArrow {
width: 40rpx;
height: 40rpx;
position: absolute;
right: 30rpx;
}
.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;
}
.titleItem {
width: 100%;
}
.common_curriculum_list {
// width: 100%;
// display: flex;
// overflow: hidden;
// height: auto;
// padding: 24rpx 19rpx 5rpx;
// box-sizing: border-box;
.content_item {
// float: left;
display: inline-block;
width: 49% !important;
margin-bottom: 30rpx;
overflow: hidden;
}
.book_image {
width: 100% !important;
height: 146rpx;
border-radius: 10rpx;
margin-bottom: 10rpx;
background-color: #f5f5f5;
}
.book_name {
font-family: MicrosoftYaHei;
font-weight: 600;
font-size: 23rpx;
color: #000000;
line-height: 23rpx;
text-align: left;
margin-top: 14rpx;
}
.content_item:nth-child(2n) {
// float: right !important;
}
}
.common_curriculum_item {
display: flex !important;
align-items: center;
}
</style>

222
pages/component/commonComponents/curriculumVideo.vue Normal file
View File

@@ -0,0 +1,222 @@
<template>
<view class="richDetail">
<!-- 公共组件-每个页面必须引入 -->
<view
scroll-x="true"
class="detail_title video_box"
style="background-color: #fff"
>
<view
v-for="(v, i) in dataList"
:class="`video_item ${currentVideo.id == v.id ? 'hot' : ''}`"
@click="handleClick(v,i)"
>
【{{ v.type == "2" ? "音频" : "视频" }}】{{ getNumber(i + 1) }}
</view>
</view>
<slot name="richHeadImg"></slot>
<!-- <view>{{ detailInfo.content }}</view> -->
</view>
</template>
<script>
import $http from "@/config/requestConfig.js";
import { mapState } from "vuex";
export default {
props: ["detailInfo", "dataList", "currentVideo"],
components: {},
data() {
return {};
},
onLoad(options) {},
onHide() {},
computed: {
...mapState(["userInfo"]),
},
methods: {
getNumber(num) {
if (num >= 10) {
return num;
} else {
return `0${num}`;
}
},
handleClick(data) {
console.log("data at line 35:", data);
this.$emit("open", data);
},
// 放大图片
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.currentCateIndex + 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.dataList = []
// 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
},
};
</script>
<style lang="scss" scoped>
.commonPageBox {
padding: 40rpx 0;
}
.contentBox {
.headImage {
margin-bottom: 20rpx;
}
.detail_title {
padding: 0 20rpx 0;
font-size: 26rpx;
line-height: 65rpx;
font-weight: bold;
text-align: center;
box-sizing: border-box;
margin-bottom: 20rpx;
overflow: hidden;
}
.rich_box {
padding: 20rpx;
box-sizing: border-box;
p {
display: block;
text-indent: 2em;
letter-spacing: 2px !important;
line-height: 46rpx;
}
}
}
.richDetail {
width: 100%;
height: 100%;
}
.video_box {
width: 100%;
// height: 100rpx;
.video_item {
width: 23%;
margin-right: 10rpx;
margin-bottom: 20rpx;
float: left;
border: 2rpx solid #018f89;
background: #fff;
color: #018f89;
text-align: center;
border-radius: 10rpx;
box-shadow: 0px 0px 6rpx 0px rgba(255, 255, 255, 1);
}
.video_item:nth-child(4n) {
margin-right: 0;
}
}
.hot {
background-color: #018f89 !important;
color: #fff !important;
}
</style>

134
pages/component/commonComponents/goodsList.vue Normal file
View File

@@ -0,0 +1,134 @@
<template>
<view style="width: 100%; height: 100%">
<scroll-view @scrolltolower="lower" scroll-y="true" class="scroll-Y" v-if="dataList.length > 0">
<view
@click="gotoDetail(item)"
class="scroll-view-item list_item"
v-for="(item, index) in dataList"
:key="item.id"
:index="index"
style="align-items: flex-start"
>
<view
:class="['titleItem', '']"
:style="`width:${isNoIcon ? '100%' : 'calc(100% - 30rpx)'}`"
>
<slot name="leftSlot" :row="item" :item="item" :index="index"> </slot>
<template v-if="isCondition">
<slot name="labelSlot" :row="item"></slot>
</template>
<template v-else>
{{ item[label] }}
</template>
<slot name="rightSlot" :row="item"></slot>
</view>
<image
v-if="!isNoIcon"
src="@/static/icon/icon_right.png"
class="rightArrow"
style=""
></image>
</view>
</scroll-view>
<u-divider v-else text="暂无数据哦~"></u-divider>
</view>
</template>
<script>
import { mapState } from "vuex";
export default {
props: ["dataList", "label", "isCondition", "isNoIcon","pagination"],
data() {
return {};
},
onLoad() {},
onHide() {
// this.showSearchList = false
// this.searchList = []
},
computed: {
...mapState(["userInfo"]),
},
methods: {
lower(){
this.$emit('lower')
},
gotoDetail(data) {
console.log("index at line 53:", data);
this.$emit("hancleClick", data);
},
},
onBackPress() {
// #ifdef APP-PLUS
plus.key.hideSoftKeybord();
// #endif
},
components: {},
};
</script>
<style lang="scss" scoped>
.list_item {
width: auto !important;
float: left !important;
padding: 20rpx 30rpx;
box-sizing: border-box;
// border-bottom: 1rpx solid #e0e0e0;
display: flex;
align-items: center;
justify-content: space-between;
// position: relative;
}
.list_item :last-child(1) {
border-bottom: none;
}
.scroll-view-item:nth-child(2n-1) {
background-color: #f5f5f5 !important;
}
.rightArrow {
width: 30rpx;
height: 30rpx;
// position: absolute;
// right: 30rpx;
// top: 20rpx;
}
.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;
}
.titleItem {
width: calc(100% - 30rpx);
}
/deep/.scroll-view-item:nth-child(2n-1) {
background-color: transparent !important;
}
.list_item:last-child{
border-bottom: none !important;
}
</style>

251
pages/component/commonComponents/goodsNav.vue Normal file
View File

@@ -0,0 +1,251 @@
<template>
<view class="goods_nav">
<!-- 公共组件-每个页面必须引入 -->
<view class="left">
<view v-for="(v,i) in iconList" class="icon_item" v-if="iconList.length>0">
<u-icon :name="v.icon" :color="v.infoColor" size="22" v-if="v.iconType" style="margin:0 auto" @click="clickIcon(v)"
></u-icon>
<uni-icons :type="v.icon" size="22" :color="v.infoColor" style="margin:0 auto" v-else> </uni-icons>
<view :style="`color:${v.infoColor};`">{{ v.text }}</view>
</view>
<slot name="leftSlot"></slot>
</view>
<view class="right">
<view class="button" v-for="(v,i) in customButton" :style="`background:${v.backgroundColor} !important;color:${v.color};width:${v.width}`" @click="submit(v)">
{{ v.text }}
</view>
</view>
<!-- <view>{{ detailInfo.content }}</view> -->
</view>
</template>
<script>
import $http from '@/config/requestConfig.js';
import {
mapState
} from 'vuex';
export default {
props: ['iconList','customButton'],
components: {
},
data() {
return {
}
},
onLoad(options) {
},
onHide() {
},
computed: {
...mapState(['userInfo']),
},
methods: {
submit(v){
this.$emit('submit',v)
},
clickIcon(v){
this.$emit('clickIcon',v)
},
showPreview(e) {
console.log('e at line 56:', e)
let conimg = e.target.dataset.nodes;
let imgs = conimg.match(/<img[^>]+>/g);//选择节点中的img
console.log('imgs at line 59:', imgs)
let imgList = [];
//遍历img标签的src里面的内容放在定义的数组imgList中
for (var j = 0; j < imgs.length; j++) {
imgs[j].replace(/<img[^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
imgList.push(capture)
})
}
console.log('imgList.push at line 64:', imgList)
//最后一步就是所有图片放在预览的方法previewImage中就可以了
// uni.previewImage({
// current: imgList,
// urls: imgList,
// })
uni.previewImage({
urls: imgList,
longPressActions: {
itemList: ['很抱歉，暂不支持保存图片到本地'],
success: function (res) {
// console.log(res,'+++++')
}
}
});
},
// 放大图片
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.currentCateIndex + 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.dataList = []
// 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
},
}
</script>
<style lang="scss" scoped>
.goods_nav {
background-color: #fff;
width: 100%;
padding: 20rpx 20rpx 20rpx 30rpx;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
.left{
height: 100%;
float: left;
display: flex;
align-items: center;
}
}
.richDetail {
width: 100%;
height: 100%;
}
.button{
float: right;
width: 240rpx;
border-radius: 100rpx;
line-height: 70rpx;
text-align: center;
margin-left: 20rpx;
background: linear-gradient(90deg, rgb(254, 96, 53), rgb(239, 18, 36));
color: rgb(255, 255, 255);
}
.icon_item{
display: flex;
justify-content:center;
flex-direction: column;
}
</style>

160
pages/component/commonComponents/list.vue Normal file
View File

@@ -0,0 +1,160 @@
<template>
<view style="width: 100%; height: 100%">
<scroll-view
@scrolltolower="lower"
scroll-y="true"
class="scroll-Y"
v-if="dataList.length > 0"
style="height: 100%"
>
<view
@click="gotoDetail(item, index)"
class="scroll-view-item list_item"
v-for="(item, index) in dataList"
:key="indexKey ? item[indexKey] : item.id"
:index="indexKey ? item[indexKey] : index"
style="align-items: flex-start"
>
<view
:class="['titleItem', '']"
:style="`width:${isNoIcon ? '100%' : 'calc(100% - 30rpx)'}`"
>
<slot name="leftSlot" :row="item" :item="item" :index="index"> </slot>
<template v-if="isCondition">
<slot
name="labelSlot"
:row="item"
:rowIndex="index"
></slot>
</template>
<template v-else>
{{ item[label] }}
</template>
<slot name="rightSlot" :row="item" :rowIndex="index"></slot>
</view>
<image
v-if="!isNoIcon"
src="@/static/icon/icon_right.png"
class="rightArrow"
style=""
></image>
</view>
</scroll-view>
<u-empty
v-else-if="noDataIcon && isLoadingHide"
:mode="noDataIcon"
:icon="`http://cdn.uviewui.com/uview/empty/${noDataIcon}.png`"
>
</u-empty>
<u-divider v-else text="暂无数据哦~"></u-divider>
</view>
</template>
<script>
import { mapState } from "vuex";
export default {
props: [
"indexKey",
"dataList",
"label",
"isCondition",
"isNoIcon",
"pagination",
"noDataIcon",
"isLoadingHide",
],
data() {
return {};
},
onLoad() {},
onHide() {
// this.showSearchList = false
// this.searchList = []
},
computed: {
...mapState(["userInfo"]),
},
methods: {
lower() {
this.$emit("lower");
},
gotoDetail(data, index) {
console.log("index at line 53:", data);
this.$emit("hancleClick", data, index);
},
},
onBackPress() {
// #ifdef APP-PLUS
plus.key.hideSoftKeybord();
// #endif
},
components: {},
};
</script>
<style lang="scss" scoped>
.list_item {
width: 100%;
padding: 20rpx 30rpx;
font-size: 30rpx;
box-sizing: border-box;
border-bottom: 1rpx solid #e0e0e0;
display: flex;
align-items: center;
justify-content: space-between;
// position: relative;
}
.list_item :last-child(1) {
border-bottom: none;
}
.scroll-view-item:nth-child(2n-1) {
background-color: #f5f5f5 !important;
}
.rightArrow {
width: 40rpx;
height: 40rpx;
// position: absolute;
// right: 30rpx;
// top: 20rpx;
}
.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;
}
.titleItem {
width: calc(100% - 30rpx);
}
/deep/.scroll-view-item:nth-child(2n-1) {
background-color: transparent !important;
}
.list_item:last-child {
border-bottom: none !important;
}
</style>

299
pages/component/commonComponents/richDetail.vue Normal file
View File

@@ -0,0 +1,299 @@
<template>
<view class="richDetail">
<!-- 公共组件-每个页面必须引入 -->
<view class="detail_title" v-if="detailInfo.title">{{
detailInfo.title
}}</view>
<slot name="richHeadImg"></slot>
<view class="rich_box" v-if="detailInfo.content">
<rich-text
:nodes="detailInfo.content | formatRichText"
@click.stop="showPreview"
:data-nodes="detailInfo.content"
></rich-text>
</view>
<!-- <view>{{ detailInfo.content }}</view> -->
</view>
</template>
<script>
import $http from '@/config/requestConfig.js';
import {
mapState
} from 'vuex';
export default {
props: ['detailInfo',],
components: {
},
data() {
return {
}
},
onLoad(options) {
},
onHide() {
},
computed: {
...mapState(['userInfo']),
}, filters: {
/**
* 处理富文本里的图片宽度自适应
* 1.去掉img标签里的style、width、height属性
* 2.img标签添加style属性：max-width:100%;height:auto
* 3.修改所有style里的width属性为max-width:100%
* 4.去掉<br/>标签
* @param html
* @returns {void|string|*}
*/
formatRichText(html) { //控制小程序中图片大小
let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
return match;
});
newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
'max-width:100%;');
return match;
});
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
newContent = newContent.replace(/\<img/gi,
'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
return newContent;
},
// 时间格式化
formatDate(date) {
console.log(date)
let newDate = new Date(date);
let year = newDate.getFullYear();
let month = newDate.getMonth().toString().padStart(2, 0);
let day = newDate.getDay().toString().padStart(2, 0);
return year + '-' + month + '-' + day;
}
},
methods: {
formatRichText(html) { //控制图片大小
let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
return match;
});
newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
'max-width:100%;');
return match;
});
// newContent = newContent.replace(/<img[^>]*>/gi, function(match, capture) {
// match = match.replace(/<img[^>]*>/gi, "@click='1111'").replace(/<img[^>]*>/gi, "@click='1111'");
// return match;
// });
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
newContent = newContent.replace(/\<img/gi,
'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
return newContent;
},
showPreview(e) {
console.log('e at line 56:', e)
let conimg = e.target.dataset.nodes;
let imgs = conimg.match(/<img[^>]+>/g);//选择节点中的img
console.log('imgs at line 59:', imgs)
let imgList = [];
//遍历img标签的src里面的内容放在定义的数组imgList中
for (var j = 0; j < imgs.length; j++) {
imgs[j].replace(/<img[^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
imgList.push(capture)
})
}
console.log('imgList.push at line 64:', imgList)
//最后一步就是所有图片放在预览的方法previewImage中就可以了
// uni.previewImage({
// current: imgList,
// urls: imgList,
// })
uni.previewImage({
urls: imgList,
longPressActions: {
itemList: ['很抱歉，暂不支持保存图片到本地'],
success: function (res) {
// console.log(res,'+++++')
}
}
});
},
// 放大图片
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.currentCateIndex + 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.dataList = []
// 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
},
}
</script>
<style lang="scss" scoped>
.commonPageBox {
padding: 40rpx 0;
}
.contentBox {
.headImage {
margin-bottom: 20rpx;
}
.detail_title {
padding: 20rpx 40rpx 0;
font-size: 38rpx;
line-height: 64rpx;
font-weight: bold;
text-align: center;
box-sizing: border-box;
margin-bottom: 20rpx;
}
.rich_box {
padding: 20rpx;
box-sizing: border-box;
::v-deep img {
width: 100%;
}
p {
display: block;
// text-indent: 2em;
letter-spacing: 2px ;
line-height: 46rpx;
img {
// margin-left: -2em;
}
}
}
}
.richDetail {
width: 100%;
height: 100%;
}
.ql-size-small{
font-size:20rpx !important;
}
.ql-size-large{
font-size:36rpx !important;
}
.ql-size-huge{
font-size:64rpx !important;
}
</style>

328
pages/component/commonComponents/selectGoods.vue Normal file
View File

@@ -0,0 +1,328 @@
<template>
<view class="container commonPageBox commonDetailPage" style="height: auto !important;padding-bottom: 0 !important;">
<u-popup :show="show" mode="bottom" @close="close" class="popup_box">
<view class="popup_top">
<!-- @click="previewImage(selectGoodsData.productImages)" -->
<view class="product_image">
<image
:src="selectGoodsData.productImages"
mode="aspectFit"
class="goods_image"
></image>
</view>
<view class="title">已选：{{ selectGoodsData.productName }}</view>
</view>
<view :class="`common_radius_box goods_box popup_content`">
<view class="title title_box"
><text class="title_price">￥{{ selectGoodsData.activityPrice?selectGoodsData.activityPrice:selectGoodsData.price }}</text
>
<u-icon
name="close"
color="#333"
size="18"
@click="close"
style="display: inline-block"
></u-icon
></view>
<view class="title title_list"
><text>商品列表（{{ goodsList.length }}）</text></view
>
<common-list
imgUrl="url"
isNoIcon
imgMode="aspectFit"
defaultUrl=""
:isCondition="true"
:dataList="goodsList"
@hancleClick="selectGoods"
label="title"
>
<template slot="labelSlot" slot-scope="slotProps">
<!-- isSelectGoods -->
<view
class="related_courses_name"
:class="`goods_item ${
selectGoodsData &&
selectGoodsData.productId == slotProps.row.productId
? 'isSelectGoods color_shandow'
: ''
}`"
>
<view class="image_box" style="margin-right: 10rpx">
<image
:src="slotProps.row.productImages"
mode="aspectFit"
class="goods_image"
></image>
</view>
<view :class="`goods_info `">
<view class="name">{{ slotProps.row.productName }}</view>
<view class="price" style="color: #258feb"
>￥{{ slotProps.row.activityPrice?slotProps.row.activityPrice:slotProps.row.price }}</view
></view
>
</view>
<!-- <text v-if="slotProps.row.conditions!='03'">【试听】</text> -->
</template>
</common-list>
<view class="goods_nav_box">
<uni-goods-nav
:fill="true"
:options="buyOptions"
:button-group="customButtonGroup1"
@click="onHandleClickBuy"
@buttonClick="onHandleClickBuy"
/>
</view>
<!-- <view>
<text @click="handleClickClose">取消</text>
<text @click="handleClickGoBuy">立即购买</text>
</view>-->
</view>
</u-popup></view
>
</template>
<script>
import { mapState } from "vuex";
export default {
props: [
"goodsList",
"label",
"isCondition",
"imgUrl",
"imgMode",
"className",
"col",
"defaultUrl",
"isScroll",
"selectGoodsData",
"customButtonGroup1",
"buyOptions",
],
data() {
return {
show: false,
};
},
onLoad() {},
onHide() {
// this.showSearchList = false
// this.searchList = []
},
computed: {
...mapState(["userInfo"]),
},
methods: {
// 放大图片
previewImage(url) {
console.log(url);
uni.previewImage({
urls: [url],
longPressActions: {
itemList: ["很抱歉，暂不支持保存图片到本地"],
success: function (res) {
// console.log(res,'+++++')
},
},
});
},
close() {
this.show = false;
},
selectGoods(data) {
this.$emit("selectGoods", data);
},
open() {
this.show = true;
},
gotoDetail(v) {
this.$emit("hancleClick", v);
},
onHandleClickBuy() {
this.$emit("selectGoodsData", this.selectGoodsData);
this.$emit("onHandleClickBuy");
},
},
onBackPress() {
// #ifdef APP-PLUS
plus.key.hideSoftKeybord();
// #endif
},
components: {},
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.goods_item {
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
// margin-bottom: 20rpx;
padding: 10rpx 20rpx;
border: 2rpx solid #fff;
border-radius: 10rpx;
}
.title {
box-sizing: border-box;
// font-weight: bold;
margin-bottom: 40rpx;
padding-left: 20rpx;
}
.image_box {
width: 70rpx;
height: 70rpx;
float: left;
background-color: #f5f5f5;
}
.goods_image {
width: 100%;
height: 100%;
}
.goods_info {
width: calc(100%);
// padding: 10rpx 20rpx;
box-sizing: border-box;
// height: 100rpx;
display: flex;
align-items: center;
justify-content: space-between;
float: left;
.name {
font-size: 26rpx;
// font-weight: 600;
color: #333;
}
.price {
font-size: 26rpx;
color: #aaa;
}
}
.isSelectGoods {
color: $themeColor !important;
.name {
color: $themeColor !important;
}
.price {
color: $themeColor !important;
}
border: 2rpx solid $themeColor;
border-radius: 10rpx;
}
/deep/.list_item {
// border-bottom: none;
padding: 10rpx 0 !important;
padding-right: 0 !important;
}
.goods_image {
width: 100%;
height: 100%;
}
.curriulum_box {
margin-top: 20rpx;
width: 100%;
.curriulum_title_box {
display: flex;
align-items: center;
margin-bottom: 20rpx;
background-color: #fff;
.curriulum_title {
width: calc(100% - 80rpx);
font-size: 32rpx;
line-height: 40rpx;
padding: 20rpx;
box-sizing: border-box;
}
}
}
.goods_box {
background-color: #fff;
// margin-top: 20rpx;
// padding: 40rpx 30rpx;
box-sizing: border-box;
width: 100%;
.curriulum_title_box {
width: calc(100%) !important;
padding-bottom: 20rpx;
background-color: #fff;
.curriulum_title {
width: calc(100%);
font-weight: 600;
font-size: 34rpx;
// line-height: 40rpx;
// display: flex;
// align-items: center;
margin-top: 80rpx;
margin-bottom: 0rpx;
// padding: 20rpx;
box-sizing: border-box;
}
}
}
.popup_box {
padding-top: 30rpx;
background-color: transparent;
.popup_top {
display: flex;
align-items: center;
color: #fff;
margin-bottom: 20rpx;
padding: 0 20rpx;
.title {
margin-bottom: 0;
font-size: 30rpx;
font-weight: 600;
}
}
.popup_content {
padding-bottom: 140rpx;
}
/deep/.list_item {
// border-bottom: none;
border: none !important;
box-shadow: none !important;
}
.product_image {
width: 120rpx;
height: 120rpx;
border-radius: 10rpx;
background-color: #f5f5f5;
// margin: 0 auto;
}
}
/deep/.u-popup__content {
background-color: transparent !important;
}
/deep/.u-popup__content__close {
color: #fff !important;
}
.title_box {
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 0;
.title_price {
color: #ef1224;
font-size: 40rpx;
font-weight: 700;
}
}
</style>

541
pages/component/commonComponents/sticky.vue Normal file
View File

@@ -0,0 +1,541 @@
<template>
<!-- <scroll-view class="scroll-view_H cateList" scroll-x="true" scroll-left="0"> -->
<view class="" style="background-color: #fff; width: 100%">
<u-tabs
lineWidth="30"
lineColor="#258feb"
:activeStyle="{
color: '#258feb',
transform: 'scale(1.05)',
}"
:inactiveStyle="{
color: '#606266',
transform: 'scale(1)',
}"
:itemStyle="itemStyle"
:keyName="label"
:list="dataList"
:is-scroll="false"
:current="currentCateIndex"
@change="handleselectCate"
>
<template slot="labelSlot" slot-scope="slotProps">
<slot name="labelSlot" :data="slotProps.data"></slot>
</template>
</u-tabs>
</view>
</template>
<script>
import $http from "@/config/requestConfig.js";
import { mapState } from "vuex";
export default {
props: ["list", "currentCateIndex", "label", "itemStyle"],
components: {},
data() {
return {
detailInfo: {},
playData: {},
searchValue: "",
twoCateList: [], // 二级分类标题
dataList: [{}, {}], // 方剂标题
// currentCateIndex: 0, // 当前选中的一级分类
curTwoCateIndex: 0, // 当前选中的二级分类
searchList: [], // 搜索结果数组
showSearchList: false,
userMes: {}, // 用户信息
searchDisable: false, // 搜索不可用
limitShow: false,
limitTitle: "提示",
limitContent: "",
scrollViewHeight: 0,
urlList: {
instructionsForUse: "app/phone.do?getMembershipGuide",
},
};
},
onLoad() {
this.getCourseDescriptionData();
// this.getUserInfo()
// this.getCateList()
},
onHide() {
// this.showSearchList = false
// this.searchList = []
},
computed: {
...mapState(["userInfo"]),
},
watch: {
list: {
immediate: true,
handler(newRoute) {
console.log(this.list,'8777777777777');
this.dataList=[...this.list]
},
},
},
methods: {
goCourseDescription(v) {
console.log(v);
uni.navigateTo({
// url: '../bookShop/commodityDetail?id=' + item.id
url: `/pages/courseInformation/courseDescription/index?navTitle=${v.nameCN}&title=${v.nameCN}&oid=${v.oid}`,
});
},
getData() {
console.log(this.$store.state, "11111111111");
this.$http
.post(this.urlList.instructionsForUse, {
customerOid: "94c043df9daa40278e86e79fbd149c8d",
customerType: "D",
token: uni.getStorageSync("token"),
oid: "b07e45f6a5f3491db9854b16f3fd8b19",
step: 0,
limit: 100,
})
.then((res) => {
this.detailInfo = res.obj;
// socket.init();
});
},
getPriceData() {
var that = this;
setTimeout(() => {
that.$nextTick(() => {
that.$refs.priceDetail.getData();
});
}, 100);
},
// 检查是有权限使用搜索功能
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.currentCateIndex", this.currentCateIndex);
console.log("this.curTwoCateIndex", this.curTwoCateIndex);
if (this.currentCateIndex == 0) {
uni.navigateTo({
// url: '../bookShop/commodityDetail?id=' + item.id
url: "./xueshugongxianDetail?id=" + item.id,
});
return;
}
if (this.currentCateIndex == 1) {
uni.navigateTo({
url: "./medicaldesDetail?id=" + item.id,
});
return;
}
if (this.currentCateIndex == 2) {
console.log("111", item);
uni.navigateTo({
url: "./video?title=" + item.name + "&src=" + item.url,
});
return;
}
if (this.currentCateIndex == 3) {
console.log("111", item);
uni.navigateTo({
url: "./recordDetail?id=" + item.id,
});
return;
}
},
// 获取名称
getTitles(dictType) {
console.log("dictType", dictType);
if (this.currentCateIndex == 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.dataList = res.result.records;
} else {
this.dataList = [];
}
})
.catch((e) => {
this.dataList = [];
console.log(e);
});
}
if (this.currentCateIndex == 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.dataList = res.result.records;
for (let i = 0; i < this.dataList.length; i++) {
this.dataList[i].imageslist = [];
this.dataList[i].imageslist = this.dataList[i].img.split(";");
}
} else {
this.dataList = [];
}
})
.catch((e) => {
this.dataList = [];
console.log(e);
});
}
if (this.currentCateIndex == 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.dataList = res.result;
} else {
this.dataList = [];
}
})
.catch((e) => {
this.dataList = [];
console.log(e);
});
}
if (this.currentCateIndex == 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.dataList = res.result;
} else {
this.dataList = [];
}
})
.catch((e) => {
this.dataList = [];
console.log(e);
});
}
},
setTwoCateIndex(item, index) {
let dictType = item.dictType;
this.curTwoCateIndex = index;
this.getTitles(dictType);
},
async handleselectCate(e) {
this.$emit("handleselectCate", e, e.index);
var that = this;
},
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.dataList = this.transformData(res.list)
// console.log('JF经方', this.dataList)
// } else {
// this.twoCateList = []
// this.dataList = []
// }
// }).catch(e => {
// this.twoCateList = []
// this.dataList = []
// 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.cateList = res.list
this.getTowCateList(this.cateList[0].type);
// } else {
// this.cateList = []
// }
// }).catch(e => {
// this.cateList = []
// 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.currentCateIndex + 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.dataList = []
// 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
},
};
</script>
<style lang="scss" scoped>
.headImage {
width: 100%;
height: 300rpx;
// margin-bottom: 20rpx;
}
.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;
}
.dataList {
height: 100%;
}
.titleList2 {
height: calc(100% - 170rpx);
}
.instructionsForUse {
height: calc(100% - 380rpx);
padding: 30rpx 30rpx 0;
box-sizing: border-box;
}
.cateList {
width: 100%;
margin-top: 15rpx;
}
.instructionsForUseBox {
height: calc(100%);
}
</style>

337
pages/component/commonComponents/video.vue Normal file
View File

@@ -0,0 +1,337 @@
<template>
<view class="page container commonPageBox commonDetailPage">
<player
ref="player"
:videoId="videoId"
:userId="userId"
:apiKey="apiKey"
:verificationCode="verificationCode"
:customId="customId"
:autoPlay="autoPlay"
:lists="lists"
videoMode="fill"
qualityOrder="descending"
:barrageOpen="barrageOpen"
:settingBarrageMode="settingBarrageMode"
:logo="logo"
@onSendBarrage="toggleFixedFooter"
@onSettingBarrage="handleToggleBarrageSetting"
@onDownload="onDownload"
@changeVideo="changeVideo"
@requestAndroidDownloadPermission="requestAndroidDownloadPermission"
>
</player>
<!-- <video-list
v-if="showVideoList"
:pick-mode="pickMode"
:is-pushing="isPushing"
:lists="lists"
:currentVideo="videoId"
@listClick="changeVideo">
<template v-slot:title>
<view class="list-header">
<text class="list-title">课程目录</text>
<picker
mode="selector"
:value="selectedDefinition"
:range="definitions"
range-key="desp"
@change="handleDefinitionChange"
>
<view class="picker-inner">
<text class="select-text">{{ definitions[selectedDefinition].desp }}</text>
<image class="pick-icon" src="@/static/arrow-down-black@2x.png"></image>
</view>
</picker>
</view>
</template>
<template v-slot:footer>
<download-footer
:pick-mode="pickMode"
@changePickMode="changePickMode"
@downloadConfirm="downloadConfirm"
></download-footer>
</template>
</video-list> -->
</view>
</template>
<script>
import { setFullScreen } from "@/utils/tool.js";
import download from "@/mixins/download.js";
import Player from "@/components/player/player.vue";
import VideoList from "@/components/list/VideoList.nvue";
import downloadFooter from "@/components/download/downloadFooter.vue";
import { getList } from "@/api/list.js";
import { mapState, mapMutations } from "vuex";
const { platform } = uni.getSystemInfoSync();
import permision from "@/js_sdk/wa-permission/permission.js";
const definitions = [
{
quality: 20,
desp: "高清",
},
{
quality: 10,
desp: "清晰",
},
];
export default {
components: {
Player,
VideoList,
downloadFooter,
},
data() {
return {
videoId: "",
userId: "",
apiKey: "",
verificationCode: "",
customId: "",
lists: [],
showVideoList: true,
pickMode: false, // 批量下载选择模式
definitions,
selectedDefinition: 0,
logo: {
url: "https://www.bokecc.com/Site/Default/Uploads/kindeditor/image/20210207/logo6.png",
position: "tr", // 默认：左上 tr：右上 bl: 左下 br: 右下
// width: '100px',
// height: '100px',
offsetX: "15rpx", // position垂直偏移量
offsetY: "15rpx", // position水平偏移量
},
autoPlay: false,
};
},
computed: {
...mapState({
// userId: state => state.baseInfo.userId,
// apiKey: state => state.baseInfo.apiKey,
// verificationCode: state => {
// if (Array.isArray(state.baseInfo)) {
// const item = state.baseInfo.find(i => i.userId === this.userId)
// if (item) return item.verificationCode
// } else {
// return state.baseInfo.verificationCode
// }
// },
// customId: state => {
// if (Array.isArray(state.baseInfo)) {
// const item = state.baseInfo.find(i => i.userId === this.userId)
// if (item) return item.customId
// } else {
// return state.baseInfo.customId
// }
// },
baseInfo: (state) => state.baseInfo,
isPushing: (state) => state.isPushing,
pipVideoId: (state) => state.pipInfo.videoId,
}),
},
watch: {
userId(newVal) {
console.log("watch userId", newVal);
if (newVal) {
if (Array.isArray(this.baseInfo)) {
const item = this.baseInfo.find((i) => i.userId === newVal);
if (item) {
this.apiKey = item.apiKey;
this.verificationCode = item.verificationCode;
this.customId = item.customId;
}
} else {
this.apiKey = this.baseInfo.apiKey;
this.verificationCode = this.baseInfo.verificationCode;
this.customId = this.baseInfo.customId;
}
}
},
},
onLoad(option) {
let _this = this;
this.videoId = option.videoId;
this.userId = option.userId;
if (!option.from) {
uni.$emit("removePIP");
}
getList((data) => {
this.lists = data.map((item) => {
if (!Array.isArray(this.baseInfo)) {
item.userId = this.baseInfo.userId;
}
return item;
});
console.log("getList", data);
});
uni.$on("setFullScreenStatus", (status) => {
this.showVideoList = !status;
});
},
onReady() {
uni.setNavigationBarColor({
frontColor: "#ffffff",
backgroundColor: "#282828",
success: () => {
console.log("设置导航条颜色成功");
},
fail: (e) => {
console.log("设置导航条颜色失败", e);
},
});
},
onShow() {
console.log("detail page onShow");
// if (this.$refs.player) {
// this.$refs.player.start()
// }
if (this.pipVideoId && this.pipVideoId !== this.videoId) {
this.setPipInfo({
videoId: "",
userId: "",
});
}
},
onHide() {
// if (this.$refs.player) {
// this.$refs.player.pause();
// }
},
onUnload() {
console.log("detail page Unload");
if (this.$refs.player && platform === "ios") {
this.$refs.player.destroy();
} else {
this.$refs.player.stop();
}
},
onBackPress(options) {
console.log("detail page onBackPress", options);
// 安卓端手势返回上一页，强制竖屏
setFullScreen(false);
if (options.from == "backbutton") {
uni.$emit("removePIP");
}
},
methods: {
...mapMutations(["setPipInfo"]),
changeVideo(item) {
this.videoId = item.videoId;
this.userId = item.userId;
},
changePickMode(tag) {
if (platform === "android") {
// this.requestAndroidPermission('android.permission.READ_EXTERNAL_STORAGE');
if (!tag) {
this.pickMode = tag;
} else {
this.requestAndroidPermission(
"android.permission.WRITE_EXTERNAL_STORAGE"
);
}
} else {
this.pickMode = tag;
}
},
downloadConfirm() {
try {
let list = JSON.parse(JSON.stringify(this.lists));
list = list.filter((item) => item.selected == true);
console.log("downloadConfirm", list);
// 补充清晰度配置
list = list.map((item) => {
item.definition = Number(
this.definitions[this.selectedDefinition].quality
);
return item;
});
this.pickMode = false;
if (list.length) {
setTimeout(() => {
uni.$emit("startDownload", list);
}, 300);
uni.showToast({
title: "文件已加入下载队列",
icon: "none",
position: "bottom",
});
}
} catch (e) {
console.log(e);
}
},
onDownload(videoId, quality) {
const list = JSON.parse(JSON.stringify(this.lists));
const item = list.find((video) => video.videoId === videoId);
item.definition = Number(quality);
if (item) {
setTimeout(() => {
uni.$emit("startDownload", item);
}, 300);
}
},
async requestAndroidPermission(permisionID) {
var result = await permision.requestAndroidPermission(permisionID);
var strStatus;
if (result === 1) {
strStatus = "已获得授权";
this.pickMode = true;
uni.$emit("getStoragePermission");
} else {
uni.showModal({
content: "下载需获取存储权限，请先手动开启",
showCancel: false,
success: (res) => {
if (res.confirm) {
permision.gotoAppPermissionSetting();
}
},
});
}
},
handleDefinitionChange(e) {
this.selectedDefinition = e.detail.value;
console.log("selectedDefinition", this.selectedDefinition);
},
requestAndroidDownloadPermission() {
this.requestAndroidPermission(
"android.permission.WRITE_EXTERNAL_STORAGE"
);
},
},
};
</script>
<style lang="stylus" scoped>
.page
width 100%
height 100vh
flex 1
.list-header
flex-direction: row
justify-content: space-between
align-items: center
margin-top 30rpx
margin-bottom 5rpx
.list-title
font-size: 30rpx
.picker-inner
flex-direction: row
align-items: center
.select-text
font-size: 26rpx;
font-weight: 600;
color: rgba(0,0,0,0.85);
.pick-icon {
margin-left: 8rpx;
width: 26rpx;
height: 15rpx;
}
</style>

44
pages/component/commonComponents/video/MyComponent.vue Normal file
View File

@@ -0,0 +1,44 @@
<template>
<div>{{ message }}</div>
</template>
<script>
import $ from "jquery";
export default class MyComponent {
// data() {
// return {
// message: 'Hello, Vue!'
// }
// }
constructor(adAddress, toAddress) {
this.adAddress = adAddress;
this.toAddress = toAddress;
this.$html = $(html);
}
createEl(el) {
this.$html.find(".ad").attr("src", this.adAddress);
this.$html.attr("href", this.toAddress);
let $adWrapper = this.$html.find(".ad-wrapper");
$adWrapper.attr("href", this.toAddress);
$adWrapper.click(() => {
Aliplayer.util.stopPropagation();
});
this.$html.find(".close").click(() => {
this.$html.hide();
});
$(el).append(this.$html);
}
ready(player, e) {}
play(player, e) {
this.$html.hide();
}
pause(player, e) {
this.$html.show();
}
}
</script>

1
pages/component/commonComponents/video/aliplayer-min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
pages/component/commonComponents/video/aliplayer-min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

20
pages/component/commonComponents/video/aliplayercomponents.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

981
pages/component/commonComponents/video/index.vue Normal file
View File

@@ -0,0 +1,981 @@
<template>
<view class="container" style="background-color: #000; position: relative">
<!-- <u-icon
@click="goBack"
name="arrow-left"
color="#258feb"
size="20"
:style="`display: inline-block; position: absolute; top: ${
statusBarHeight + 2
}px; left: ${10}px;z-index: 999;`"
></u-icon>-->
<view style="width: 100%; height: 200px" v-if="currentVideo.type == 1">
<div
class=""
style="background-color: #000"
ref="videoContent"
@tap="renderScript.handleClick"
id="url-player-test"
:videoData="videoData"
:winWidth="winWidth"
:winHeight="winHeight"
:currentVideoList="currentVideoList"
:firstTime="firstTime"
:change:videoData="renderScript.receiveMsg"
:change:winWidth="renderScript.receiveWinWidth"
:change:winHeight="renderScript.receiveWinHeight"
:change:firstTime="renderScript.receiveFirstTime"
:change:currentVideoList="renderScript.receiveVideoList"
></div>
<div @tap="renderScript.emitData" ref="videoContent1" v-show="false">
直接调用renderjs中的emitData的方法,传递当前播放时长
</div>
<div @tap="renderScript.endEmitData" ref="videoContent2" v-show="false">
监听结束方法，记录播放时长
</div>
<div class="fullScreenButton-container">
<div
:class="`prism-fullscreen-btn ${isFullScreen ? 'fullscreen' : ''}`"
@tap="renderScript.changeVideoScreen"
></div>
<!-- <img class=" iconfont icon-list" src="../../../../static/icon/cate_bg.png" style="width: 60px;height: 10px;"></img> -->
</div>
</view>
<view style="width: 100%; height: 200px; position: relative" v-else>
<video
@timeupdate="videoTimeUpdateEvent($event)"
ref="videos"
style="width: 100%; height: 100%"
autoplay
id="videoId"
object-fit="contain"
class="video-box"
:src="videoUrl"
:poster="`${videoUrl}?x-oss-process=video/snapshot,t_${1},f_jpg`"
@play="playVideo"
>
<cover-view style="position: absolute; top: 10px; z-index: 80">
<cover-view class="returnBack" @click="goBack">
<uni-icons type="back" size="26" color="#fff"></uni-icons>
<text class="txt">返回</text>
</cover-view>
</cover-view>
<!-- <cover-view v-if="isFullScreen && isControl">
<view class="right_title">
<view class="returnBack" @click="quitScreen">
<uni-icons type="back" size="26" color="#fff"></uni-icons>
<text class="txt">返回</text>
</view>
<view class="right_handle">
<uni-icons type="star" size="30" color="#fff"></uni-icons>
<uni-icons type="redo-filled" size="30" color="#fff"></uni-icons>
</view>
</view>
</cover-view> -->
</video>
</view>
</view>
</template>
<script>
import $http from "@/config/requestConfig.js";
import { mapState, mapMutations } from "vuex";
// importScripts('@/static/aliplayer/aliplayer-min.js')
export default {
props: ["currentVideo", "currentVideoList"],
data() {
return {
//当前是否是全屏模式
isFullScreen: false,
isControl: true,
timer: null,
videoTitle: "",
videoList: [],
firstTime: 0,
options: {},
playAuth: "",
currentTime: "",
videoId: "",
videoData: {},
isSetFirstTime: false,
screenType: null,
videoUrl: null,
};
},
computed: {
...mapState(["videoOssList"]),
},
watch: {
currentVideo: {
immediate: true,
handler(newRoute) {},
},
},
// //页面显示
mounted() {},
async onUnload() {
uni.navigateTo({
url: "/pages/curriculum/order/curriculum/back",
});
// #ifdef APP-PLUS
plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
// plus.screen.lockOrientation("portrait-primary");
// #endif
this.timer = null;
await this.setVideoTime();
this.player.dispose();
},
//第一次加载
onLoad(options) {
console.log(options, "这是传参");
// #ifdef APP-PLUS
setTimeout(() => {
plus.screen.unlockOrientation();
plus.screen.lockOrientation("landscape-primary");
}, 10);
// #endif
// #ifdef APP-PLUS
// plus.screen.lockOrientation("portrait-primary");
// #endif
if (uni.getStorageSync("videoOssList")) {
this.videoList = JSON.parse(uni.getStorageSync("videoOssList"));
}
console.log("this.videoList at line 53:", this.videoList);
this.options = JSON.parse(options.data);
this.videoId = this.options.video;
this.timer = setInterval(() => {
var that = this;
if (this.currentTime) {
that.setVideoTime();
}
}, 60000 * 10);
},
methods: {
screenChange(data) {
console.log(
"status at line 这是当前的状态158:",
data.status,
data.primary
);
this.isFullScreen = !data.status;
this.$emit("changeScreen", this.isFullScreen);
// let fullScreen = e.detail.fullScreen; // 值true为进入全屏，false为退出全屏
// if (!fullScreen) {
// //退出全屏
// this.isFullScreen = false;
// } else {
// this.isFullScreen = true;
// }
},
// 控制器的显示隐藏
controlChange(e) {
this.isControl = e.detail.show;
},
quitScreen() {
// 退出全屏
const ctx = this.$refs.myVideo;
ctx.exitFullScreen();
},
// 播放进度改变
videoTimeUpdateEvent(e) {
console.log("e at line 78:", e);
this.playTime = parseInt(e.detail.currentTime);
this.allTime = parseInt(e.detail.duration);
console.log("视频播放时长", this.playTime, "视频总时长", this.allTime);
this.recordTime({
time: this.playTime,
});
},
async init(data) {
// uni.getSystemInfo({
// success(res) {
// var winWidth = res.screenWidth;
// var winHeight = res.screenHeight;
// var statusBarHeight = res.statusBarHeight;
console.log("at line 59:", "是否先走这里");
if (uni.getStorageSync("videoOssList")) {
this.videoList = JSON.parse(uni.getStorageSync("videoOssList"));
}
this.options = data.currentVideo;
console.log("this.options at line 64:", this.options);
this.videoId = this.options.video;
this.timer = setInterval(async () => {
var that = this;
if (this.currentTime) {
await that.setVideoTime();
}
}, 60000 * 10);
await this.getLive();
},
getData(data) {
console.log(
"data at line 这是接口拿回来的时长11111111111111111111:",
this.videoData.userCourseVideoPositionEntity
);
if (!this.isSetFirstTime) {
var netWork = this.videoData.userCourseVideoPositionEntity
? this.videoData.userCourseVideoPositionEntity.position
: 0;
var list = JSON.parse(uni.getStorageSync("videoOssList"));
console.log("这是获取接口 设置的起始时长", netWork);
var index = list.findIndex((e) => e.id == this.videoData.id);
if (netWork) {
if (index >= 0) {
this.firstTime =
list[index].time > netWork ? list[index].time : netWork;
} else {
this.firstTime = netWork ? netWork : 0;
}
} else {
if (index >= 0) {
this.firstTime = list[index].time ? list[index].time : 0;
} else {
this.firstTime = 0;
}
}
uni.setStorageSync("videoOssList", JSON.stringify(list));
console.log(
"list at line 这是设置完第一次初始值9777777777777777777770:",
list
);
if (this.currentVideo.type == 0 || this.currentVideo.type == 2) {
this.playVideo();
}
console.log(this.firstTime, "1111111111111111111111");
this.isSetFirstTime = true;
}
},
playVideo(e) {
this.videoContext = uni.createVideoContext("videoId", this);
this.videoContext.seek(this.firstTime);
// this.videoContext.requestFullScreen();
},
recordTime(data) {
this.currentTime = data.time;
console.log("data at line 54:", data);
var list = [];
if (uni.getStorageSync("videoOssList")) {
list = JSON.parse(uni.getStorageSync("videoOssList"));
}
console.log("list at line 56:", list);
console.log("点击后设置播放时长的方法list at line 65:", list);
var index = list.findIndex((e) => e.id == this.videoData.id);
if (list.length > 0 && index >= 0) {
list[index] = {
...this.videoData,
time: data.time,
};
} else {
list.push({
...this.videoData,
time: data.time,
});
}
uni.setStorageSync("videoOssList", JSON.stringify(list));
console.log(list, "走接口的方法参数");
},
// 获取数据
getLive() {
var data = {
...this.options,
};
$http
.request({
url: `sociology/course/checkVideo`,
method: "Post", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: {
//默认 无 说明：请求头
"Content-Type": "application/json",
},
})
.then((res) => {
console.log("res at line 252111111111111111111111111111:", res);
if (this.currentVideo.type == 1) {
var playAuth = res.video.playAuth.replace(/=/g, "");
this.videoData = {
...res.video,
videoId: res.video.video,
playAuth: playAuth,
};
this.playAuth = playAuth;
} else {
this.videoData = res.video;
this.videoUrl =
// "https://ehh-private-01.oss-cn-beijing.aliyuncs.com/video/taiHuClass/" +
res.video.videoUrl;
this.$nextTick(async () => {
await this.getData();
});
}
this.$forceUpdate();
});
},
async handleEnd() {
var list = JSON.parse(JSON.stringify(uni.getStorageSync("videoOssList")));
var data = list.find((e) => e.id == this.videoData.id);
this.currentTime = data.time;
await this.setVideoTime();
this.timer = null;
},
setVideoTime(time) {
var data = {
videoId: this.videoData.id,
position: this.currentTime, //秒数
};
console.log("data at line =存储视频时长接口:", data);
$http
.request({
// url: "book/buyOrder/buySave",
url: `sociology/course/saveCoursePosition`,
method: "Post", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: {
//默认 无 说明：请求头
"Content-Type": "application/json",
},
})
.then((res) => {
console.log("res at line 185:", res);
// console.log("data at line 5911111:", this.videoData);
this.$forceUpdate();
});
},
changePlayerTime(player) {
console.log("this.firstTime at line 106:", this.firstTime);
player.seek(this.firstTime);
},
goBack() {
uni.navigateBack({
delta: 1,
});
},
},
created() {},
};
</script>
<script module="renderScript" lang="renderjs">
import $ from 'jquery'
// import StaticADComponent from './staticadcomponent/index.js';
/**
* 静态广告组件
*/
export default {
/**
* 静态广告组件
*/
components: {
// MyComponent
},
mounted() {
// 在适合的生命周期，通过script和link标签引入播放器sdk、css
console.log(this.options, '这是monted')
this.loadWebPlayerSDK()
this.loadComponent()
},
data() {
return {
player: null,
curTime: null,
curStatus: null,
// currentTime:null,
}
},
watch: {
curTime(val) {
if (this.curTime !== null && this.curStatus !== null) {
this.$refs.videoContent1.click()
}
}
},
methods: {
handleClick(event, ownerInstance) {
console.log('event at line 165:', event)
// this.player.on('ready',function(){
// var status= this.player.fullscreenService.getIsFullScreen()
// console.log('status at line 403:', status)
// console.log('触发点击事件',status))
// })
ownerInstance.callMethod('getData')
},
emitData(event, ownerInstance) {
var that = this;
ownerInstance.callMethod('recordTime', {
time: that.curTime,
status: that.curStatus
})
},
changeVideoScreen(event, ownerInstance) {
var that = this;
// this.$emit('changeScreenLoading',true)
var status=this.player.fullscreenService.getIsFullScreen();
ownerInstance.callMethod('screenChange', {
status:status,
primary:status?'portrait':'landscape'
})
if(status){
setTimeout(() => {
plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
this.player.fullscreenService.cancelFullScreen() ;
// this.$emit('changeScreenLoading',false);
}, 100);
// this.player.setPlayerSize('100%','200px');
}else{
// this.player.setPlayerSize({
// w:"400px",
// height:'60%'
// });
// plus.screen.unlockOrientation();
this.player.fullscreenService.requestFullScreen();
setTimeout(() => {
// this.$emit('changeScreenLoading',false);
plus.screen.lockOrientation("landscape-primary");
}, 100);
}
},
endEmitData(event, ownerInstance) {
var that = this;
ownerInstance.callMethod('handleEnd', )
},
getLive() {
if(this.videoData.type==1){
var fullScreenButtonComponent = Aliplayer.Component({
/**
* 初始函数，在new对象时调用
*
* @param {string} adAddress - 广告视频地址
* @param {string} toAddress - 广告链接地址
*/
init: function (status, toAddress) {
this.fullScreenStatus=status
// this.adAddress = adAddress;
// this.toAddress = toAddress;
this.$html = $('.fullScreenButton-container');
// this.$html.hide();
},
/**
* 创建广告Dom元素
*/
createEl: function (el) {
this.$html.find('.ad').attr('src', this.adAddress);
var $adWrapper = this.$html.find('.ad-wrapper');
$adWrapper.attr('href', this.toAddress);
$adWrapper.click(function () {
// Aliplayer.util.stopPropagation();
});
// this.$html.find('.close').click(function () {
// this.$html.hide();
// });
// $(el).find('.prism-controlbar').append(this.$html);
$(el).find('.prism-time-display').after(this.$html);
},
ready: function (player, e) {
// this.$html.hide()
},
/**
* 隐藏广告
*/
play: function (player, e) {
// this.$html.show();
},
/**
* 显示广告
*/
pause: function (player, e) {
// this.$html.show();
},
/**
* 隐藏广告
*/
playing: function (player, e) {
this.$html.show();
// this.$html.hide();
},
waiting: function (player, e) {
// this.$html.hide()
},
timeupdate: function (player, e) {
},
error: function (player, e) {
},
/**
* 显示广告
*/
ended: function (player, e) {
// this.$html.show();
}
});
console.log('this.currentVideoList at line 456111111111111111111111:', this.videoList)
var player = new Aliplayer({
id: "url-player-test",
"vid": this.videoData
.videoId, // 必选参数，可以通过点播控制台（路径：媒资库>音/视频）查询。示例：1e067a2831b641db90d570b6480f****。
"playauth": this.videoData.playAuth, // 必选参数，参数值可通过调用GetVideoPlayAuth接口获取。
"encryptType": 1, // 必选参数，当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
"playConfig": {
"EncryptType": 'AliyunVoDEncryption'
},
width: '100%', //容器的大小
// videoWidth: '100vw', //容器的大小
// videoHeight: '100vh', //容器的大小
height: '100%', //容器的大小
playsinline:true,
controlBarVisibility:"click",
cover:"",
components: [
// {
// name: 'BulletScreenComponent',
// type: AliPlayerComponent.BulletScreenComponent,
// /** Descriptions of the scrolling text component parameters: text, style, bulletPosition
// * text: The scrolling text
// * style: The style of the scrolling text
// * bulletPosition: The position of the scrolling text. Valid values: 'top', 'bottom', and 'random'. The default is 'random'.
// */
// args: ['本课程版权归天津众妙之门科技有限公司所有，翻版必究!', {fontSize: '16px', color: 'red',}, 'random']
// },
{name:'adComponent',type:fullScreenButtonComponent,args:['http://101.201.146.165:8088/Pf-EH/statics/uploadFile/2024-05-10/b0f420c7-9178-41ad-9dd6-f59a64a6e190.png']},
// {
// name: 'RotateMirrorComponent',
// type: AliPlayerComponent.RotateMirrorComponent
// },
],
skinLayout:[
{name: "bigPlayButton", align: "blabs", x: 30, y: 80},
{name: "H5Loading", align: "cc"},
{name: "errorDisplay", align: "tlabs", x: 0, y: 0},
{name: "infoDisplay"},
{name:"tooltip", align:"blabs",x: 0, y: 56},
{name: "thumbnail"},
{
name: "controlBar", align: "blabs", x: 0, y: 0,
children: [
{name: "progress", align: "blabs", x: 0, y: 44},
{name: "playButton", align: "tl", x: 15, y: 12},
{name: "timeDisplay", align: "tl", x: 10, y: 7},
// {name: "fullScreenButton", align: "tr", x: 10, y: 12},
// {name:"subtitle", align:"tr",x:15, y:12},
{name:"setting", align:"tr",x:15, y:12},
{name:"prism-speed-selector", align:"tr",x:15, y:12},
{name: "volume", align: "tr", x: 5, y: 10}
]
}
]
}, function(player) {
});
this.player = player;
this.$refs.videoContent.click()
var timer = setInterval(() => {
var that = this;
that.curTime = parseInt(this.player.getCurrentTime());
that.curStatus = this.player.getStatus()
}, 1000);
// player.on('ready',function(){
// player.fullscreenService.requestFullScreen()
// })
this.player.on('ended', function() {
console.log('that.curTime at line 242:', this.curTime)
console.log('that.curStatus at line 210:', this.curStatus)
this.$refs.videoContent2.click()
})
}
// player.setRotate(90)
//全屏播放
// player.one('canplay', function() {
// // console.log('canplay', this.player.tag);
// player.tag.play();
// });
},
receiveScreenType(newValue) {
console.log('newValue at line 427屏幕方向111111111111:', newValue)
},
receiveFirstTime(newValue, oldValue, ownerVm, vm) {
// //数据变化
console.log('newValue111', newValue)
console.log('vm4444', vm)
console.log('this.firstTime at line 215:', newValue)
if (this.player) {
this.player.seek(newValue);
}
},
receiveVideoList(newValue, oldValue, ownerVm, vm) {
// //数据变化
console.log('currentVideoListcurrentVideoListcurrentVideoList', newValue)
},
receiveMsg(newValue, oldValue, ownerVm, vm) {
//数据变化
// console.log('newValue', newValue)
// console.log('oldValue', oldValue)
// console.log('ownerVm', ownerVm)
// console.log('vm', vm)
},
receiveWinWidth(newValue, oldValue, ownerVm, vm) {
//数据变化
console.log('newValue', newValue)
// console.log('oldValue', oldValue)
// console.log('ownerVm', ownerVm)
// console.log('vm', vm)
},
receiveWinHeight(newValue, oldValue, ownerVm, vm) {
//数据变化
console.log('newValue', newValue)
// console.log('oldValue', oldValue)
// console.log('ownerVm', ownerVm)
// console.log('vm', vm)
},
checkValue() {
console.log(this.videoId, this.authId, "1111888888")
if (!this.videoData.playAuth||!this.currentVideoList) {
setTimeout(() => {
this.checkValue();
}, 1000);
} else {
console.log('this.videoList at line 这是这只只是594:', this.currentVideoList)
this.getLive();
}
},
loadWebPlayerSDK() {
return new Promise((resolve, reject) => {
const s_tag = document.createElement('script'); // 引入播放器js
s_tag.type = 'text/javascript';
s_tag.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/aliplayer-min.js';
s_tag.charset = 'utf-8';
s_tag.onload = () => {
const s_tag1 = document.createElement('script'); // 引入播放器js
s_tag1.type = 'text/javascript';
s_tag1.src = 'https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js';
s_tag1.charset = 'utf-8';
s_tag1.onload = () => {
this.checkValue();
resolve();
}
document.body.appendChild(s_tag1);
}
document.body.appendChild(s_tag);
const l_tag = document.createElement('link'); // 引入播放器css
l_tag.rel = 'stylesheet';
l_tag.href =
'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/skins/default/aliplayer-min.css';
document.body.appendChild(l_tag);
});
},
loadComponent() {
// return new Promise((resolve, reject) => {
// const s_tag = document.createElement('script');
// s_tag.type = 'text/javascript';
// // 需要先下载组件 js 文件，放到项目 /static/ 目录下
// // 下载地址：https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/customComponents/dist/aliplayer-components/aliplayercomponents-1.0.9.min.js
// s_tag.src = '@/static/aliplayercomponents.js';
// s_tag.charset = 'utf-8';
// s_tag.onload = () => {
// resolve();
// }
// document.body.appendChild(s_tag);
// });
}
}
}
</script>
<style>
.container {
width: 100vw;
height: auto;
/deep/.pause {
width: 60rpx !important;
height: 60rpx !important;
}
}
.fds {
background-color: blue;
height: 600rpx;
position: fixed;
top: 60rpx;
}
.returnBack {
flex-direction: row;
justify-content: flex-start;
align-items: center;
height: 88rpx;
padding-left: 20rpx;
}
.txt {
color: #fff;
}
.right_title {
background: #000;
height: 96rpx;
justify-content: space-between;
flex-direction: row;
align-items: center;
margin-left: auto;
}
.return {
flex-direction: row;
align-items: center;
color: #fff;
}
.right_handle {
width: 200rpx;
flex-direction: row;
justify-content: flex-end;
padding-right: 20rpx;
}
cover-view {
display: block;
line-height: 1.2;
overflow: hidden;
white-space: nowrap;
pointer-events: auto;
}
cover-view {
visibility: visible !important;
}
cover-image {
visibility: visible !important;
}
.fullScreenButton-container {
color: #fff;
float: right;
height: 35px;
margin-top: 6px;
margin-right: 5px;
display: flex;
align-items: center;
position: relative;
i {
color: #fff;
display: inline-block;
font-size: 22px;
display: block;
margin-top: 7px;
cursor: pointer;
& + i {
margin-left: 3px;
}
@media (min-width: 768px) {
&:hover + .player-tooltip {
display: block;
}
}
}
.player-tooltip {
&.prev {
left: -10px;
}
&.list {
left: 5px;
}
&.next {
right: -12px;
}
}
}
.playlist-content {
position: absolute;
right: 0;
width: 0px;
padding-bottom: 48px;
box-sizing: border-box;
height: 100%;
transition: all 0.38s ease-in-out;
overflow: hidden;
.list {
background-color: #000;
background-color: rgba(0, 0, 0, 0.3);
height: 100%;
overflow: auto;
.video-item {
color: #fff;
padding: 0px 10px;
line-height: 35px;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
&.active {
background-color: #000;
color: #00ddff;
}
@media (min-width: 768px) {
&:hover {
background-color: #000;
color: #00ddff;
}
}
}
}
}
.player-tooltip {
position: absolute;
display: none;
font-size: 12px;
color: #fff;
line-height: 28px;
letter-spacing: 0;
text-align: center;
background: #3c3c3c;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
height: 28px;
top: -48px;
padding: 0 5px;
white-space: nowrap;
}
.playlist-skip-tip {
padding: 5px 15px;
position: absolute;
top: 50%;
left: 50%;
z-index: 30;
line-height: 30px;
font-size: 14px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.8);
color: #000;
text-align: center;
transform: translate(-50%, -50%);
}
#rotating-div {
width: 100vw;
height: 100vh;
background-color: #3498db;
transform: rotate(90deg); /* 旋转90度 */
transform-origin: center center; /* 设置旋转中心点在div中心 */
position: fixed; /* 固定定位，全屏显示 */
left: 0;
top: 0;
bottom: 0;
right: 0;
}
</style>

44
pages/component/commonComponents/video/staticadcomponent/index.css Normal file
View File

@@ -0,0 +1,44 @@
.ad-container
{
display:none;
position:absolute;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-100px;
}
.ad-container span
{
width: 27px;
height: 16px;
border-radius: 1px;
background-color: rgba(0,0,0,.5);
position: absolute;
font-size: 10px;
color: #fff;
line-height: 16px;
text-align: center;
top:0px;
left:0px;
}
.ad-container .close
{
position:absolute;
top:2px;
right:2px;
width: 20px;
height: 20px;
}
.ad-container .close:hover
{
cursor:pointer;
}
.ad-container .ad
{
width:300px;
height:200px;
}

0
pages/component/commonComponents/video/staticadcomponent/index.html Normal file
View File

76
pages/component/commonComponents/video/staticadcomponent/index.js Normal file
View File

@@ -0,0 +1,76 @@
import $ from 'jquery'
// const html = require('./index.html');
// require('https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/skins/default/aliplayer-min.css');
// require('../aliplayer-min.js');
// require('../aliplayercomponents.min.js');
// require('../aliplayer-min.css');
require('./index.css');
/**
* 静态广告组件
*/
const fullScreenButtonComponent = Aliplayer.Component({
/**
* 初始函数，在new对象时调用
*
* @param {string} adAddress - 广告视频地址
* @param {string} toAddress - 广告链接地址
*/
init: function (adAddress, toAddress) {
this.adAddress = adAddress;
this.toAddress = toAddress;
this.$html = $('.ad-container');
},
/**
* 创建广告Dom元素
*/
createEl: function (el) {
this.$html.find('.ad').attr('src', this.adAddress);
var $adWrapper = this.$html.find('.ad-wrapper');
$adWrapper.attr('href', this.toAddress);
$adWrapper.click(function () {
Aliplayer.util.stopPropagation();
});
this.$html.find('.close').click(function () {
this.$html.hide();
});
$(el).append(this.$html);
},
ready: function (player, e) {
},
/**
* 隐藏广告
*/
play: function (player, e) {
this.$html.hide();
},
/**
* 显示广告
*/
pause: function (player, e) {
this.$html.show();
},
/**
* 隐藏广告
*/
playing: function (player, e) {
this.$html.hide();
},
waiting: function (player, e) {
},
timeupdate: function (player, e) {
},
error: function (player, e) {
},
/**
* 显示广告
*/
ended: function (player, e) {
this.$html.show();
}
});
export default fullScreenButtonComponent;

375
pages/component/commonComponents/video/videoDetail.vue Normal file
View File

@@ -0,0 +1,375 @@
<template>
<view class="container commonPageBox commonDetailPage" style="position: relative;">
<!-- <cover-view class="image_box">
<image
src="http://101.201.146.165:8088/curriculum/detailImg/curriculum_20170411123240222.png"
mode="aspectFit"
class="headImage"
style="background-color: #f5f5f5"
>
</image>
</cover-view> -->
<video
@fullscreenchange="fullscreenchange"
@timeupdate="videoTimeUpdateEvent($event)"
ref="videos"
style="width: 100%; height: 100%"
autoplay
id="videoId"
object-fit="contain"
class="video-box"
:src="videoUrl"
:poster="`${videoUrl}?x-oss-process=video/snapshot,t_${1},f_jpg`"
@play="playVideo"
>
<!-- <cover-image class="controls-play img" src="http://101.201.146.165:8088/curriculum/detailImg/curriculum_20170411123240222.png"></cover-image>
-->
</video>
</view>
</template>
<script>
import courseDescription from "@/pages/component/commonComponents/list";
import price from "../price/index.vue";
import $http from "@/config/requestConfig.js";
import { mapState } from "vuex";
export default {
components: {
courseDescription, //课程说明
price, //课程价格
},
data() {
return {
timer: null,
videoUrl: "",
currentTime: 0,
firstTime: 0,
options: {},
videoData: {},
isSetFirstTime: false,
currentVideoTime: "", //初始播放时长（秒）
urlList: {
detail: "sociology/course/getCourseCatalogueChapterDetail",
curriculumInfo: "app/phone.do?getCourseInfo",
},
};
},
async onUnload() {
this.timer = null;
// #ifdef APP-PLUS
uni.navigateTo({
url: "/pages/curriculum/order/curriculum/back",
});
plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
// plus.screen.lockOrientation("portrait-primary");
// #endif
await this.setVideoTime();
// #ifdef APP-PLUS
// plus.screen.lockOrientation("portrait-primary");
// #endif
},
onLoad(options) {
// uni.navigateTo({
// url: "/pages/curriculum/order/curriculum/back",
// });
// #ifdef APP-PLUS
plus.screen.lockOrientation("landscape-primary");
// plus.screen.lockOrientation("portrait-primary");
// #endif
this.options = JSON.parse(options.data);
this.getLive();
this.timer = setInterval(() => {
var that = this;
if (this.currentTime) {
that.setVideoTime();
}
}, 60000 * 10);
},
onHide() {
// this.showSearchList = false
// this.searchList = []
},
computed: {
...mapState(["userInfo"]),
},
methods: {
// 播放进度改变
videoTimeUpdateEvent(e) {
console.log("e at line 78:", e);
this.playTime = parseInt(e.detail.currentTime);
this.allTime = parseInt(e.detail.duration);
console.log("视频播放时长", this.playTime, "视频总时长", this.allTime);
this.recordTime({
time: this.playTime,
});
},
recordTime(data) {
this.currentTime = data.time;
console.log("data at line 54:", data);
var list = [];
if (uni.getStorageSync("videoList")) {
list = JSON.parse(uni.getStorageSync("videoList"));
}
console.log("点击后设置播放时长的方法list at line 65:", list);
var index = list.findIndex((e) => e.id == this.videoData.id);
if (list.length > 0 && index >= 0) {
list[index] = {
...this.videoData,
time: data.time,
};
} else {
list.push({
...this.videoData,
time: data.time,
});
}
uni.setStorageSync("videoList", JSON.stringify(list));
console.log(list, "走接口的方法参数");
},
//是否全屏
fullscreenchange(e) {
if (!e.target.fullScreen) {
uni.navigateBack({
delta: 1,
});
// plus.screen.lockOrientation("default");
}
},
getData(data) {
console.log(
"data at line 这是接口拿回来的时长11111111111111111111:",
this.videoData.userCourseVideoPositionEntity.position
);
if (!this.isSetFirstTime) {
var netWork = this.videoData.userCourseVideoPositionEntity
? this.videoData.userCourseVideoPositionEntity.position
: 0;
var list = [];
if (uni.getStorageSync("videoList")) {
list = JSON.parse(uni.getStorageSync("videoList"));
}
console.log("这是获取接口 设置的起始时长", netWork);
var index = list.findIndex((e) => e.id == this.videoData.id);
if (netWork) {
if (index >= 0) {
this.firstTime =
list[index].time > netWork ? list[index].time : netWork;
} else {
this.firstTime = netWork ? netWork : 0;
}
} else {
if (index >= 0) {
this.firstTime = list[index].time ? list[index].time : 0;
} else {
this.firstTime = 0;
}
}
uni.setStorageSync("videoList", JSON.stringify(list));
console.log(
"list at line 这是设置完第一次初始值9777777777777777777770:",
list
);
console.log(this.firstTime, "1111111111111111111111");
this.playVideo();
this.isSetFirstTime = true;
}
},
setVideoTime(time) {
var data = {
videoId: this.videoData.id,
position: this.currentTime, //秒数
};
console.log("data at line =存储视频时长接口:", data);
$http
.request({
// url: "book/buyOrder/buySave",
url: `sociology/course/saveCoursePosition`,
method: "Post", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: {
//默认 无 说明：请求头
"Content-Type": "application/json",
},
})
.then((res) => {
console.log("res at line 185:", res);
// console.log("data at line 5911111:", this.videoData);
this.$forceUpdate();
});
},
playVideo(e) {
this.videoContext = uni.createVideoContext("videoId", this);
this.videoContext.seek(this.firstTime);
this.videoContext.requestFullScreen();
},
async getLive() {
var data = {
...this.options,
};
console.log("data at line 57:", data);
$http
.request({
// url: "book/buyOrder/buySave",
url: `sociology/course/checkVideo`,
method: "Post", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: {
//默认 无 说明：请求头
"Content-Type": "application/json",
},
})
.then((res) => {
console.log("res at line 252:", res);
this.videoData = res.video;
this.videoUrl =
// "https://ehh-private-01.oss-cn-beijing.aliyuncs.com/video/taiHuClass/" +
res.video.videoUrl;
this.$nextTick(async () => {
await this.getData();
});
// var playAuth = res.video.playAuth.replace(/=/g, "");
// this.videoData = {
// ...res.video,
// videoId: res.video.video,
// playAuth: playAuth,
// };
// this.playAuth = playAuth;
console.log("data at line 5911111:", this.videoData);
this.$forceUpdate();
});
},
openVideo(data) {
console.log("data at line 380:", data.type);
var mynavData = JSON.stringify(data); // 这里转换成 字符串
if (data.type == 0) {
//视频云点播
uni.navigateTo({
url: `/pages/curriculum/order/curriculum/videoDetail?data=${mynavData}`,
});
} else if (data.type == 1) {
uni.navigateTo({
url: `/pages/curriculum/order/curriculum/videoDetailOss?data=${mynavData}`,
});
}
// uni.navigateTo({
// // url: '../bookShop/commodityDetail?id=' + item.id
// url: `/pages/curriculum/order/curriculum/detail?navTitle=${v.title}&title=${v.title}&oid=${v.oid}`,
// });
},
hancleModalCancel() {
this.show = false;
},
handleClickMore(v, i, status) {
console.log("i at line 357:", i);
this.$set(this.correlationiList[i], "isOpen", status);
// [i].=!this.correlationiList[i].isOpen;
},
hancleModalConfirm() {
var data = {
values: {
customerType: "D",
token: uni.getStorageSync("token"),
customerOid: uni.getStorageSync("customerOid"),
...this.taiHuClassInfo,
},
};
// $mars.progressBegin('申请中...');
// $mars.post(customerType, 'applyRelearn', data, function (ret) {
// api.hideProgress();
// fnLoadDataGrid();
// });
},
// 检查是有权限使用搜索功能
checkDisable() {
console.log("点击了");
},
// 显示无权限弹窗
// showNoRights() {
// let that = this
// uni.showModal({
// content: "",
// confirmText: '好的',
// showCancel: false,
// success: function(res) {
// if (res.confirm) {
// // console.log('用户点击确定');
// that.clear()
// }
// }
// })
// },
// 放大图片
previewImage(url) {
console.log(url);
uni.previewImage({
urls: [url],
longPressActions: {
itemList: ["很抱歉，暂不支持保存图片到本地"],
success: function (res) {
// console.log(res,'+++++')
},
},
});
},
},
onBackPress() {
// #ifdef APP-PLUS
plus.key.hideSoftKeybord();
// #endif
},
};
</script>
<style lang="scss" scoped>
.video-box{
position: relative;
}
.image_box{
background-color: red;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>