Merge branch 'test' of e.coding.net:g-cphe0354/duanju/new_app into gyq
This commit is contained in:
commit
993113b324
3
App.vue
3
App.vue
|
|
@ -31,7 +31,8 @@ export default {
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
/*每个页面公共css */
|
/*每个页面公共css */
|
||||||
@import 'uview-plus/index.scss';
|
@import "uview-plus/index.scss";
|
||||||
|
@import "@/commons/style/common.scss";
|
||||||
|
|
||||||
ul,
|
ul,
|
||||||
li {
|
li {
|
||||||
|
|
|
||||||
|
|
@ -7,3 +7,62 @@ export function getVideoDetail(data) {
|
||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
//追剧
|
||||||
|
export function zhuiju(data) {
|
||||||
|
return http.request({
|
||||||
|
url: 'courseCollect/insertCourseCollect',
|
||||||
|
method:'POST',
|
||||||
|
data:{
|
||||||
|
classify:1,
|
||||||
|
...data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//点赞
|
||||||
|
export function dianzan(data) {
|
||||||
|
return http.request({
|
||||||
|
url: 'courseCollect/insertCourseCollect',
|
||||||
|
method:'POST',
|
||||||
|
data:{
|
||||||
|
classify:3,
|
||||||
|
...data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//插入播放历史记录
|
||||||
|
|
||||||
|
export function insertHistory(data){
|
||||||
|
return http.request({
|
||||||
|
url: 'courseCollect/insertCourseCollect',
|
||||||
|
method:'POST',
|
||||||
|
data:{
|
||||||
|
classify:3,
|
||||||
|
type:1,
|
||||||
|
...data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取金币比例
|
||||||
|
export function getJinbiBili(data) {
|
||||||
|
return http.request({
|
||||||
|
url: 'common/type/914',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取推荐视频
|
||||||
|
export function tuijianVideo(data){
|
||||||
|
const randomNum=5+ Math.ceil(Math.random()*30)
|
||||||
|
return http.request({
|
||||||
|
url: 'course/selectCourseDetailsList',
|
||||||
|
method:'GET',
|
||||||
|
data:{
|
||||||
|
page: 1,
|
||||||
|
limit: 5,
|
||||||
|
randomNum: randomNum
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
export default{
|
||||||
|
main:'#ff7581'
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,409 @@
|
||||||
|
.u-relative,
|
||||||
|
.u-rela {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-absolute,
|
||||||
|
.u-abso {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.u-fixed,.u-fix{
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
.left-top{
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.u-overflow-hide{
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
// nvue不能用标签命名样式，不能放在微信组件中，否则微信开发工具会报警告，无法使用标签名当做选择器
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
image {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 在weex，也即nvue中，所有元素默认为border-box
|
||||||
|
view,
|
||||||
|
text {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
.u-font-xs {
|
||||||
|
font-size: 22rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-font-sm {
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-font-md {
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-font-lg {
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-font-xl {
|
||||||
|
font-size: 34rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-flex {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-flex-wrap {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-flex-nowrap {
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-col-center {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-col-top {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-col-bottom {
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-row-center {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-row-left {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-row-right {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-row-between {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-row-around {
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-left {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-flex-col {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex!important;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定义flex等分
|
||||||
|
@for $i from 0 through 12 {
|
||||||
|
.u-flex-#{$i} {
|
||||||
|
flex: $i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定义字体(px)单位，小于20都为px单位字体
|
||||||
|
@for $i from 9 to 20 {
|
||||||
|
.u-font-#{$i} {
|
||||||
|
font-size: $i + px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定义字体(rpx)单位，大于或等于20的都为rpx单位字体
|
||||||
|
@for $i from 20 through 40 {
|
||||||
|
.u-font-#{$i} {
|
||||||
|
font-size: $i + rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定义内外边距，历遍1-80
|
||||||
|
@for $i from 0 through 80 {
|
||||||
|
// 只要双数和能被5除尽的数
|
||||||
|
@if $i % 2 == 0 or $i % 5 == 0 {
|
||||||
|
// 得出：u-margin-30或者u-m-30
|
||||||
|
.u-margin-#{$i}, .u-m-#{$i} {
|
||||||
|
margin: $i + rpx!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 得出：u-padding-30或者u-p-30
|
||||||
|
.u-padding-#{$i}, .u-p-#{$i} {
|
||||||
|
padding: $i + rpx!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $short, $long in l left, t top, r right, b bottom {
|
||||||
|
// 缩写版，结果如： u-m-l-30
|
||||||
|
// 定义外边距
|
||||||
|
.u-m-#{$short}-#{$i} {
|
||||||
|
margin-#{$long}: $i + rpx!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定义内边距
|
||||||
|
.u-p-#{$short}-#{$i} {
|
||||||
|
padding-#{$long}: $i + rpx!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 完整版，结果如：u-margin-left-30
|
||||||
|
// 定义外边距
|
||||||
|
.u-margin-#{$long}-#{$i} {
|
||||||
|
margin-#{$long}: $i + rpx!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定义内边距
|
||||||
|
.u-padding-#{$long}-#{$i} {
|
||||||
|
padding-#{$long}: $i + rpx!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置nvue的默认关于flex的样式
|
||||||
|
.u-reset-nvue {
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* start--文本行数限制--start */
|
||||||
|
.u-line-1 {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-line-2 {
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-line-3 {
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-line-4 {
|
||||||
|
-webkit-line-clamp: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-line-5 {
|
||||||
|
-webkit-line-clamp: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-line-2, .u-line-3, .u-line-4, .u-line-5 {
|
||||||
|
overflow: hidden;
|
||||||
|
word-break: break-all;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box; // 弹性伸缩盒
|
||||||
|
-webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
|
||||||
|
}
|
||||||
|
|
||||||
|
/* end--文本行数限制--end */
|
||||||
|
|
||||||
|
|
||||||
|
/* start--不同颜色文字--start */
|
||||||
|
.color-333{
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.color-666{
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
.color-999{
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.color-red{
|
||||||
|
color: $my-red-color;
|
||||||
|
}
|
||||||
|
.color-main{
|
||||||
|
color:$my-main-color
|
||||||
|
}
|
||||||
|
|
||||||
|
/* end--不同颜色文字--end */
|
||||||
|
|
||||||
|
|
||||||
|
.tranistion{
|
||||||
|
transition: all .3s ease-in-out;
|
||||||
|
}
|
||||||
|
.tranistion-1{
|
||||||
|
transition: all .1s ease-in-out;
|
||||||
|
}
|
||||||
|
.tranistion-2{
|
||||||
|
transition: all .2s ease-in-out;
|
||||||
|
}
|
||||||
|
.font-bold{
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* start--不同颜色背景--start */
|
||||||
|
.my-bg-main{
|
||||||
|
background-color:$my-main-color
|
||||||
|
}
|
||||||
|
|
||||||
|
/* end--不同颜色背景--end */
|
||||||
|
|
||||||
|
.safe-page{
|
||||||
|
padding-bottom: 60rpx!important;
|
||||||
|
}
|
||||||
|
::v-deep .uni-switch-input.uni-switch-input-checked{
|
||||||
|
border-color: $my-main-color;
|
||||||
|
background-color: $my-main-color;
|
||||||
|
}
|
||||||
|
.btn-circle{
|
||||||
|
border-radius: 200px;
|
||||||
|
}
|
||||||
|
.min-page{
|
||||||
|
/* #ifdef H5 */
|
||||||
|
min-height: calc(100vh - 44px);
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef H5 */
|
||||||
|
min-height: 100vh;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
.w-full{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.gap-20{
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
.color-000{
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.color-fff{
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.bg-fff{
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.bg-gray{
|
||||||
|
background-color: #F9F9F9;
|
||||||
|
}
|
||||||
|
.overflow-hide{
|
||||||
|
/* #ifdef H5 */
|
||||||
|
height: calc(100vh - 44px);
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef H5 */
|
||||||
|
height: 100vh;
|
||||||
|
/* #endif */
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.no-wrap{
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.border-r-12{
|
||||||
|
border-radius: 12rpx;
|
||||||
|
}
|
||||||
|
.border-r-18{
|
||||||
|
border-radius: 18rpx;
|
||||||
|
}
|
||||||
|
.border-top{
|
||||||
|
border-top: 1px solid #E5E5E5;
|
||||||
|
}
|
||||||
|
.border-bottom{
|
||||||
|
border-bottom: 1px solid #E5E5E5;
|
||||||
|
}
|
||||||
|
.scale7{
|
||||||
|
transform: scale(0.7);
|
||||||
|
}
|
||||||
|
.page-gray {
|
||||||
|
min-height: calc(100vh);
|
||||||
|
/* #ifdef H5 */
|
||||||
|
min-height: calc(100vh - var(--window-top));
|
||||||
|
/* #endif */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #F9F9F9;
|
||||||
|
}
|
||||||
|
.box-shadow{
|
||||||
|
box-shadow: 0 0 5px #eee;
|
||||||
|
}
|
||||||
|
.safe-bottom{
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
/* #ifdef H5 */
|
||||||
|
padding-bottom: 28rpx;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
.position-all{
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
.fixed-top{
|
||||||
|
position: fixed;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
top: 44px;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef H5 */
|
||||||
|
top: 0;
|
||||||
|
/* #endif */
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.lh30 {
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
.default-box-padding{
|
||||||
|
padding: 32rpx 24rpx;
|
||||||
|
}
|
||||||
|
.icon-arrow-down-fill {
|
||||||
|
width: 16rpx;
|
||||||
|
height: 10rpx;
|
||||||
|
}
|
||||||
|
.zIndex-999{
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
.icon-default-size{
|
||||||
|
width: 28rpx;
|
||||||
|
height: 28rpx;
|
||||||
|
}
|
||||||
|
::v-deep.uni-easyinput__placeholder-class{
|
||||||
|
font-size: 28rpx!important;
|
||||||
|
}
|
||||||
|
.filter-gray{
|
||||||
|
filter: grayscale(1);
|
||||||
|
}
|
||||||
|
// .u-font-20{
|
||||||
|
// font-size: 10px;
|
||||||
|
// }
|
||||||
|
// .u-font-24{
|
||||||
|
// font-size: 12px;
|
||||||
|
// }
|
||||||
|
// .u-font-28{
|
||||||
|
// font-size: 14px;
|
||||||
|
// }
|
||||||
|
// .u-font-32{
|
||||||
|
// font-size: 16px;
|
||||||
|
// }
|
||||||
|
.line-th{
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
//覆盖u-view-plus 颜色
|
||||||
|
.u-primary-light {
|
||||||
|
color: $my-main-color;
|
||||||
|
}
|
||||||
|
::v-deep .u-border{
|
||||||
|
border-width: 1px!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .u-m-t-16 .u-textarea{
|
||||||
|
border-width: 1px!important;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,283 @@
|
||||||
|
<template>
|
||||||
|
<view style="background: #FFFFFF;">
|
||||||
|
<canvas v-if="!tempFilePath" :canvas-id="CanvasID"
|
||||||
|
:style="{ width: canvasW + 'px', height: canvasH + 'px' }"></canvas>
|
||||||
|
<image v-else lazy-load :src="tempFilePath" mode="widthFix" class="is-response"
|
||||||
|
@longpress="toSave(tempFilePath)"></image>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var _this;
|
||||||
|
export default {
|
||||||
|
name: 'wm-poster',
|
||||||
|
props: {
|
||||||
|
CanvasID: {
|
||||||
|
//CanvasID 等同于 canvas-id
|
||||||
|
Type: String,
|
||||||
|
default: 'PosterCanvas'
|
||||||
|
},
|
||||||
|
imgSrc: {
|
||||||
|
//展示图
|
||||||
|
Type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
QrSrc: {
|
||||||
|
//二维码
|
||||||
|
Type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
Title: {
|
||||||
|
//文本内容
|
||||||
|
Type: String,
|
||||||
|
default: '短剧'
|
||||||
|
},
|
||||||
|
TitleColor: {
|
||||||
|
//标题颜色
|
||||||
|
Type: String,
|
||||||
|
default: '#333333'
|
||||||
|
},
|
||||||
|
LineType: {
|
||||||
|
//标题显示行数 大于两行是否省略 （注超出2行显示会导致画布布局絮乱）
|
||||||
|
Type: [String, Boolean],
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
PriceTxt: {
|
||||||
|
//价格值
|
||||||
|
Type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
PriceColor: {
|
||||||
|
//价格颜色
|
||||||
|
Type: String,
|
||||||
|
default: '#e31d1a'
|
||||||
|
},
|
||||||
|
OriginalTxt: {
|
||||||
|
//原价值
|
||||||
|
Type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
OriginalColor: {
|
||||||
|
//默认颜色（如原价与扫描二维码颜色）
|
||||||
|
Type: String,
|
||||||
|
default: '#b8b8b8'
|
||||||
|
},
|
||||||
|
Width: {
|
||||||
|
//画布宽度 (高度根据图片比例计算 单位upx)
|
||||||
|
Type: String,
|
||||||
|
default: 750
|
||||||
|
},
|
||||||
|
CanvasBg: {
|
||||||
|
//canvas画布背景色
|
||||||
|
Type: String,
|
||||||
|
default: '#ffffff'
|
||||||
|
},
|
||||||
|
Referrer: {
|
||||||
|
//推荐人信息
|
||||||
|
Type: String,
|
||||||
|
default: '精选好剧'
|
||||||
|
},
|
||||||
|
ViewDetails: {
|
||||||
|
//描述提示文字
|
||||||
|
Type: String,
|
||||||
|
default: '长按或扫描识别二维码观看'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tempFilePath: '',
|
||||||
|
canvasW: 0,
|
||||||
|
canvasH: 0,
|
||||||
|
canvasImgSrc: '',
|
||||||
|
ctx: null
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toSave(url) {
|
||||||
|
|
||||||
|
//#ifndef H5
|
||||||
|
uni.getImageInfo({
|
||||||
|
src: url,
|
||||||
|
success: function(image) {
|
||||||
|
console.log('图片信息：', JSON.stringify(image));
|
||||||
|
uni.saveImageToPhotosAlbum({
|
||||||
|
filePath: image.path,
|
||||||
|
success: function() {
|
||||||
|
console.log('save success');
|
||||||
|
uni.showToast({
|
||||||
|
title: '海报已保存相册',
|
||||||
|
icon: 'success',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
//#endif
|
||||||
|
},
|
||||||
|
async OnCanvas() {
|
||||||
|
uni.showLoading({
|
||||||
|
title: '海报生成中...'
|
||||||
|
})
|
||||||
|
_this.ctx = uni.createCanvasContext(_this.CanvasID, this);
|
||||||
|
const C_W = uni.upx2px(_this.Width), //canvas宽度
|
||||||
|
C_P = uni.upx2px(30), //canvas Paddng 间距
|
||||||
|
C_Q = uni.upx2px(150); //二维码或太阳码宽高
|
||||||
|
let _strlineW = 0; //文本宽度
|
||||||
|
let _imgInfo = await _this.getImageInfo({
|
||||||
|
imgSrc: _this.imgSrc
|
||||||
|
}); //广告图
|
||||||
|
console.log('图片信息0：', JSON.stringify(""));
|
||||||
|
|
||||||
|
let _QrCode = await _this.getImageInfo({
|
||||||
|
imgSrc: _this.QrSrc
|
||||||
|
}); //二维码或太阳码
|
||||||
|
|
||||||
|
console.log('图片信息1：', JSON.stringify(""));
|
||||||
|
|
||||||
|
let r = [_imgInfo.width, _imgInfo.height];
|
||||||
|
let q = [_QrCode.width, _QrCode.height];
|
||||||
|
let imgW = C_W - C_P * 2;
|
||||||
|
if (r[0] != imgW) {
|
||||||
|
r[1] = Math.floor((imgW / r[0]) * r[1]);
|
||||||
|
r[0] = imgW;
|
||||||
|
}
|
||||||
|
if (q[0] != C_Q) {
|
||||||
|
q[1] = Math.floor((C_Q / q[0]) * q[1]);
|
||||||
|
q[0] = C_Q;
|
||||||
|
}
|
||||||
|
_this.canvasW = C_W;
|
||||||
|
_this.canvasH = r[1] + q[1] + 40;
|
||||||
|
_this.ctx.setFillStyle(_this.CanvasBg); //canvas背景颜色
|
||||||
|
_this.ctx.fillRect(0, 0, C_W, _this.canvasH); //canvas画布大小
|
||||||
|
|
||||||
|
//添加图片展示
|
||||||
|
_this.ctx.drawImage(_imgInfo.path, C_P, C_P, r[0], r[1]);
|
||||||
|
//添加图片展示 end
|
||||||
|
|
||||||
|
//设置文本
|
||||||
|
_this.ctx.setFontSize(uni.upx2px(32)); //设置标题字体大小
|
||||||
|
_this.ctx.setFillStyle(_this.TitleColor); //设置标题文本颜色
|
||||||
|
let _strLastIndex = 0; //每次开始截取的字符串的索引
|
||||||
|
let _strHeight = r[1] + C_P * 2 + 10; //绘制字体距离canvas顶部的初始高度
|
||||||
|
let _num = 1;
|
||||||
|
// for (let i = 0; i < _this.Title.length; i++) {
|
||||||
|
// _strlineW += _this.ctx.measureText(_this.Title[i]).width;
|
||||||
|
// if (_strlineW > r[0]) {
|
||||||
|
// if (_num == 2 && _this.LineType) {
|
||||||
|
// //文字换行数量大于二进行省略号处理
|
||||||
|
// _this.ctx.fillText(_this.Title.substring(_strLastIndex, i - 8) + '...', C_P, _strHeight);
|
||||||
|
// _strlineW = 0;
|
||||||
|
// _strLastIndex = i;
|
||||||
|
// _num++;
|
||||||
|
// break;
|
||||||
|
// } else {
|
||||||
|
// _this.ctx.fillText(_this.Title.substring(_strLastIndex, i), C_P, _strHeight);
|
||||||
|
// _strlineW = 0;
|
||||||
|
// _strHeight += 20;
|
||||||
|
// _strLastIndex = i;
|
||||||
|
// _num++;
|
||||||
|
// }
|
||||||
|
// } else if (i == _this.Title.length - 1) {
|
||||||
|
// _this.ctx.fillText(_this.Title.substring(_strLastIndex, i + 1), C_P, _strHeight);
|
||||||
|
// _strlineW = 0;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
//设置文本 end
|
||||||
|
//设置价格
|
||||||
|
_strlineW = C_P;
|
||||||
|
_strHeight += uni.upx2px(60);
|
||||||
|
if (_num == 1) {
|
||||||
|
_strHeight += 20; //单行标题时占位符
|
||||||
|
}
|
||||||
|
// if (_this.PriceTxt != '') {
|
||||||
|
// //判断是否有销售价格
|
||||||
|
// _this.ctx.setFillStyle(_this.PriceColor);
|
||||||
|
// _this.ctx.setFontSize(uni.upx2px(38));
|
||||||
|
// // _this.ctx.fillText('券后价 ￥' + _this.PriceTxt, _strlineW, _strHeight); //商品价格
|
||||||
|
// _strlineW += _this.ctx.measureText('券后价 ￥' + _this.PriceTxt).width + uni.upx2px(10);
|
||||||
|
// }
|
||||||
|
// // #ifdef H5
|
||||||
|
// if (_this.PriceTxt != '' && _this.OriginalTxt != '') {
|
||||||
|
// //判断是否有销售价格且原价
|
||||||
|
// _this.ctx.setFillStyle(_this.OriginalColor);
|
||||||
|
// _this.ctx.setFontSize(uni.upx2px(24));
|
||||||
|
// _this.ctx.fillText(_this.OriginalTxt, _strlineW, _strHeight); //商品原价
|
||||||
|
// }
|
||||||
|
// #endif
|
||||||
|
_this.ctx.strokeStyle = _this.OriginalColor;
|
||||||
|
_this.ctx.moveTo(_strlineW, _strHeight - uni.upx2px(10)); //起点
|
||||||
|
_this.ctx.lineTo(_strlineW + _this.ctx.measureText(_this.OriginalTxt).width, _strHeight - uni.upx2px(
|
||||||
|
10)); //终点
|
||||||
|
_this.ctx.stroke();
|
||||||
|
//设置价格 end
|
||||||
|
|
||||||
|
//添加二维码
|
||||||
|
_strHeight += uni.upx2px(20);
|
||||||
|
let toTop = uni.upx2px(20);
|
||||||
|
// _this.ctx.drawImage(_QrCode.path, r[0] - q[0] + C_P, _strHeight, q[0], q[1]);
|
||||||
|
_this.ctx.drawImage(_QrCode.path, r[0] - q[0] + C_P, _this.canvasH - q[1] - toTop, q[0], q[1]);
|
||||||
|
//添加二维码 end
|
||||||
|
|
||||||
|
//添加推荐人与描述
|
||||||
|
_this.ctx.setFillStyle(_this.TitleColor);
|
||||||
|
_this.ctx.setFontSize(uni.upx2px(30));
|
||||||
|
_this.ctx.fillText(_this.Title, C_P, _this.canvasH - q[1] - toTop + q[1] / 2);
|
||||||
|
_this.ctx.setFillStyle(_this.OriginalColor);
|
||||||
|
_this.ctx.setFontSize(uni.upx2px(24));
|
||||||
|
_this.ctx.fillText(_this.ViewDetails, C_P, _this.canvasH - q[1] - toTop + q[1] / 2 + 20);
|
||||||
|
//添加推荐人与描述 end
|
||||||
|
//延迟后渲染至canvas上
|
||||||
|
setTimeout(function() {
|
||||||
|
_this.ctx.draw(true, ret => {
|
||||||
|
_this.getNewImage();
|
||||||
|
});
|
||||||
|
}, 600);
|
||||||
|
},
|
||||||
|
async getImageInfo({
|
||||||
|
imgSrc
|
||||||
|
}) {
|
||||||
|
return new Promise((resolve, errs) => {
|
||||||
|
uni.getImageInfo({
|
||||||
|
src: imgSrc,
|
||||||
|
success: function(image) {
|
||||||
|
resolve(image);
|
||||||
|
},
|
||||||
|
fail(err) {
|
||||||
|
// errs(err);
|
||||||
|
_this.$emit('error', err);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getNewImage() {
|
||||||
|
uni.canvasToTempFilePath({
|
||||||
|
canvasId: _this.CanvasID,
|
||||||
|
quality: 1,
|
||||||
|
complete: res => {
|
||||||
|
_this.tempFilePath = res.tempFilePath;
|
||||||
|
_this.$emit('success', res);
|
||||||
|
|
||||||
|
// uni.showToast({
|
||||||
|
// title: '长按图片保存海报',
|
||||||
|
// mask: false,
|
||||||
|
// duration: 2000,
|
||||||
|
// icon: "none"
|
||||||
|
// });
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
this
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
_this = this;
|
||||||
|
this.OnCanvas();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
|
|
@ -0,0 +1,395 @@
|
||||||
|
<template>
|
||||||
|
<view class="item" @appear="appear" @disappear="disappear" @click.stop>
|
||||||
|
|
||||||
|
<video class="u-flex-1 video" :show-fullscreen-btn="false" @controlstoggle="controlstoggles" v-if="showVideo"
|
||||||
|
@waiting="waiting()" object-fit="cover"
|
||||||
|
@play="videoPlay('myVideo'+item.courseDetailsId,item.courseDetailsId)" :play-strategy="2"
|
||||||
|
:show-loading="true" codec="software" :muted="false" :show-center-play-btn="true" :loop="false"
|
||||||
|
:enable-progress-gesture="false" :poster="item.titleImg" :ref="'myVideo'+item.courseDetailsId"
|
||||||
|
:autoplay="autoplay" @ended="ended" :id="'myVideo'+item.courseDetailsId" :src="item.videoUrl"></video>
|
||||||
|
|
||||||
|
<image class="poster" v-else @click="!item.videoUrl?popupShow('pay'):''" :src="item.titleImg" mode="aspectFill">
|
||||||
|
</image>
|
||||||
|
|
||||||
|
<view class="info" v-if="!isCommand">
|
||||||
|
<text class="color-fff" v-if="item.courseDetailsName">{{item.courseDetailsName}}</text>
|
||||||
|
<view v-if="item.content" v-html="item.content"></view>
|
||||||
|
<view class="u-m-t-20 color-fff" @click="popupShow('show')">
|
||||||
|
<text class="color-fff">
|
||||||
|
{{item.courseDetailsName}}（共{{total}}集）选集 >
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="info" v-if="isCommand">
|
||||||
|
<text class="color-fff" v-if="item.courseDetailsName">{{item.courseDetailsName}}</text>
|
||||||
|
<view v-if="item.content" v-html="item.content"></view>
|
||||||
|
<view class="u-m-t-20 color-fff" @click="toDetail">
|
||||||
|
<text class="color-fff">
|
||||||
|
查看更多续集 >
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="right">
|
||||||
|
<view class="love u-flex u-flex-xy-center u-flex-col u-m-b-40 u-text-center" @click="dianzanClick">
|
||||||
|
<up-icon name="heart-fill" v-if="item.isGood==1" color="red" size="30"></up-icon>
|
||||||
|
<up-icon name="heart-fill" v-else color="#ffffff" size="30"></up-icon>
|
||||||
|
<text class="text color-fff u-font-24">{{item.goodNum}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="share u-m-b-40 u-flex u-flex-xy-center u-flex-col u-text-center" @click="share">
|
||||||
|
<image class="icon" src="@/static/images/share.png" mode=""></image>
|
||||||
|
<text class="text color-fff u-font-24">分享</text>
|
||||||
|
</view>
|
||||||
|
<view class="zhuiju u-m-b-40 u-flex u-flex-xy-center u-flex-col u-text-center" @click="zhuijuClick">
|
||||||
|
<image class="icon" v-if="isCollect" src="@/static/images/shuqian.png" mode=""></image>
|
||||||
|
<image class="icon" v-else src="@/static/images/shuqian_s.png" mode=""></image>
|
||||||
|
<text class="text color-fff u-font-24">{{isCollect?'已追':'追剧'}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
computed,
|
||||||
|
nextTick,
|
||||||
|
onMounted,
|
||||||
|
ref,
|
||||||
|
watch
|
||||||
|
} from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
item: {
|
||||||
|
type: Object,
|
||||||
|
defaulr: () => {
|
||||||
|
return {
|
||||||
|
videoUrl: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
isCommand: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
instance: {
|
||||||
|
type: Object,
|
||||||
|
defaulr: () => {
|
||||||
|
return {
|
||||||
|
proxy: {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
current: {
|
||||||
|
//h5判断是否是当前项目
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
index: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
nowIndex: {
|
||||||
|
//app判断是否是当前项目
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
total: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
isCollect: {
|
||||||
|
type: [Number, Boolean],
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
playSpeeds: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
}
|
||||||
|
})
|
||||||
|
let autoplay = ref(props.item.videoUrl ? true : false)
|
||||||
|
|
||||||
|
const emits = defineEmits(['controlstoggles', 'disappear', 'appear', 'waiting', 'videoPlay', 'ended', 'dianzanClick',
|
||||||
|
'share', 'zhuijuClick', 'popupShow', 'itemMounted', 'toDetail'
|
||||||
|
])
|
||||||
|
|
||||||
|
function controlstoggles(e) {
|
||||||
|
emits('controlstoggles', e)
|
||||||
|
}
|
||||||
|
|
||||||
|
function toDetail() {
|
||||||
|
if (video) {
|
||||||
|
video.pause()
|
||||||
|
}
|
||||||
|
emits('toDetail')
|
||||||
|
}
|
||||||
|
|
||||||
|
function waiting() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function videoPlay() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function ended() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function dianzanClick() {
|
||||||
|
emits('dianzanClick')
|
||||||
|
}
|
||||||
|
|
||||||
|
function share() {
|
||||||
|
emits('share')
|
||||||
|
}
|
||||||
|
|
||||||
|
function zhuijuClick() {
|
||||||
|
emits('zhuijuClick')
|
||||||
|
}
|
||||||
|
|
||||||
|
function popupShow(key) {
|
||||||
|
emits('popupShow', key)
|
||||||
|
}
|
||||||
|
|
||||||
|
let first = true
|
||||||
|
|
||||||
|
function appear() {
|
||||||
|
if (video) {
|
||||||
|
video.playbackRate(props.playSpeeds)
|
||||||
|
video.play()
|
||||||
|
}
|
||||||
|
emits('appear', first)
|
||||||
|
if (first) {
|
||||||
|
first = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let video = null
|
||||||
|
|
||||||
|
function disappear() {
|
||||||
|
if (video) {
|
||||||
|
video.pause()
|
||||||
|
}
|
||||||
|
emits('disappear')
|
||||||
|
}
|
||||||
|
const showVideo = computed(() => {
|
||||||
|
// #ifdef H5
|
||||||
|
return props.current === props.index && props.item.videoUrl
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP
|
||||||
|
return props.nowIndex === props.index && props.item.videoUrl
|
||||||
|
// #endif
|
||||||
|
})
|
||||||
|
onMounted(() => {
|
||||||
|
init()
|
||||||
|
emits('itemMounted', props.index)
|
||||||
|
})
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
try {
|
||||||
|
if (props.item.videoUrl && showVideo.value) {
|
||||||
|
video = uni.createVideoContext('myVideo' + props.item.courseDetailsId)
|
||||||
|
video.playbackRate(props.playSpeeds)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('------')
|
||||||
|
//TODO handle the exception
|
||||||
|
}
|
||||||
|
}
|
||||||
|
watch(() => props.playSpeeds, (newval) => {
|
||||||
|
console.log('speed' + newval);
|
||||||
|
if (video) {
|
||||||
|
video.playbackRate(newval)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
watch(() => showVideo.value, (newval) => {
|
||||||
|
if (newval) {
|
||||||
|
init()
|
||||||
|
} else {
|
||||||
|
video = null
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.item {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
/* #ifdef H5 */
|
||||||
|
flex: 1;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-flex-1 {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-popup {
|
||||||
|
position: fixed !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .u-popup {
|
||||||
|
position: fixed !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video {
|
||||||
|
width: 750rpx;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poster {
|
||||||
|
/* #ifdef H5 */
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 90%;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP */
|
||||||
|
width: 750rpx;
|
||||||
|
flex: 1;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-flex-row {
|
||||||
|
flex-direction: row !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
/* #ifdef H5 */
|
||||||
|
width: 80%;
|
||||||
|
/* #endif */
|
||||||
|
height: auto;
|
||||||
|
position: absolute !important;
|
||||||
|
bottom: 50px;
|
||||||
|
left: 10px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 15px;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-flex-y-center {
|
||||||
|
align-items: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swipers-items {
|
||||||
|
width: 750rpx;
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
position: absolute !important;
|
||||||
|
right: 20rpx;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP */
|
||||||
|
top: 500px;
|
||||||
|
/* #endif */
|
||||||
|
z-index: 999;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 24rpx;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share {
|
||||||
|
.text {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.zhuiju {}
|
||||||
|
}
|
||||||
|
|
||||||
|
.poster-popup {
|
||||||
|
position: fixed !important;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.6);
|
||||||
|
z-index: 9999;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ji-list {
|
||||||
|
.ji-item {
|
||||||
|
width: 210rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
margin-right: 30rpx;
|
||||||
|
height: 88rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
background-color: #F5F7FF;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background-color: $my-main-color;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lock {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 0px 6px 0px 6px;
|
||||||
|
background-color: #ccc;
|
||||||
|
padding: 2rpx 4rpx;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playing {
|
||||||
|
position: absolute;
|
||||||
|
width: 32rpx;
|
||||||
|
height: 24rpx;
|
||||||
|
bottom: 5px;
|
||||||
|
right: 7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ji-item:nth-of-type(3n) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hot {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pay-list {
|
||||||
|
.pay-list-item {
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: #F2F2F2;
|
||||||
|
padding: 24rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.zhifubao {
|
||||||
|
width: 56rpx;
|
||||||
|
height: 56rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,60 +1,182 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="u-flex-1">
|
|
||||||
<!-- #ifdef H5 -->
|
<!-- #ifdef H5 -->
|
||||||
<swiper @change="swiperChange" :current="current" :circular="true" vertical class="u-flex-1"
|
<view class=" w-full box" style="width: 100vw;">
|
||||||
@transition="transition" :indicator-dots="false" :autoplay="false" :interval="0" :duration="200">
|
<swiper @longpress="popupShow('speed')"
|
||||||
|
:style="{height:wHeight+'px'}"
|
||||||
|
v-if="videoList.length" @change="swiperChange" :current="current"
|
||||||
|
:circular="true" vertical class="u-flex-1" @transition="transition" :indicator-dots="false"
|
||||||
|
:autoplay="false" :interval="0" :duration="200">
|
||||||
<swiper-item v-for="(item,index) in videoList" :key="index">
|
<swiper-item v-for="(item,index) in videoList" :key="index">
|
||||||
|
<list-item-vue :total="list.length" :item="item"
|
||||||
<video class="u-flex-1 video" :show-fullscreen-btn="false" @controlstoggle="controlstoggles"
|
:isCommand="isCommand"
|
||||||
v-if="current === index && item.videoUrl" @waiting="waiting()" object-fit="cover"
|
:current="current" :isCollect="isCollect"
|
||||||
@play="videoPlay('myVideo'+item.courseDetailsId,item.courseDetailsId)" :play-strategy="2"
|
@toDetail="toDetail(item,index)"
|
||||||
:show-loading="true" codec="software" :muted="false" :show-center-play-btn="true" :loop="false"
|
@controlstoggles="controlstoggles" :playSpeeds="playSpeeds" :index="index" :nowIndex="nowIndex"
|
||||||
:enable-progress-gesture="false" :poster="item.titleImg" :ref="'myVideo'+item.courseDetailsId"
|
@dianzanClick="dianzanClick(item,index)" @share="share(item)" @zhuijuClick="zhuijuClick(item)"
|
||||||
@ended="ended" :id="'myVideo'+item.courseDetailsId" :src="item.videoUrl"
|
@popupShow="popupShow"></list-item-vue>
|
||||||
:autoplay="item.autoPlay"></video>
|
|
||||||
|
|
||||||
<image class="poster" v-else @click="openShowPay(current,index,item.videoUrl)" :src="item.titleImg"
|
|
||||||
mode="aspectFill"></image>
|
|
||||||
|
|
||||||
<view class="info">
|
|
||||||
<text v-if="item.courseDetailsName">{{item.courseDetailsName}}</text>
|
|
||||||
<view v-if="item.content" v-html="item.content"></view>
|
|
||||||
<text class="u-m-t-20">
|
|
||||||
{{item.courseDetailsName}}（共{{list.length}}集）选集 >
|
|
||||||
</text>
|
|
||||||
</view>
|
|
||||||
<view class="right">
|
|
||||||
<view class="love u-m-b-40 u-flex-y-center u-flex-x-center u-text-center">
|
|
||||||
<up-icon name="heart-fill" v-if="item.isGood==1" color="red" size="30"></up-icon>
|
|
||||||
<up-icon name="heart-fill" v-else color="#ffffff" size="30"></up-icon>
|
|
||||||
<text class="text">{{item.goodNum}}</text>
|
|
||||||
</view>
|
|
||||||
<view class="share u-m-b-40 u-flex-y-center u-flex-x-center u-text-center" @click="share(item)">
|
|
||||||
<image class="icon" src="@/static/images/share.png" mode=""></image>
|
|
||||||
<text class="text">分享</text>
|
|
||||||
</view>
|
|
||||||
<view class="zhuiju u-m-b-40 u-flex-y-center u-flex-x-center u-text-center" @click="zhuijuClick">
|
|
||||||
<image class="icon" v-if="isCollect" src="@/static/images/shuqian.png" mode=""></image>
|
|
||||||
<image class="icon" v-else src="@/static/images/shuqian_s.png" mode=""></image>
|
|
||||||
<text class="text">{{isCollect?'已追':'追剧'}}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
</swiper>
|
</swiper>
|
||||||
|
</view>
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
|
|
||||||
|
<!-- #ifdef APP -->
|
||||||
|
<list :bounce="false" :loadmoreoffset="wHeight*3" :show-scrollbar="false" ref="listBox" :pagingEnabled="true"
|
||||||
|
@loadmore="loadmore" :scrollable="true">
|
||||||
|
<cell v-for="(item,index) in list" :key="item.courseDetailsId" :ref="setRefList(index)">
|
||||||
|
<view class="swipers-items" :style="boxStyle" @longpress="popupShow('speed')">
|
||||||
|
<list-item-vue :total="list.length" :item="item" :current="current" :isCollect="isCollect"
|
||||||
|
:isCommand="isCommand"
|
||||||
|
@toDetail="toDetail(item,index)"
|
||||||
|
@itemMounted="itemMounted" @controlstoggles="controlstoggles" :index="index" :instance="instance"
|
||||||
|
:nowIndex="nowIndex" @appear="appear($event,item,index)" :playSpeeds="playSpeeds"
|
||||||
|
@disappear="disappear(item,index)" @dianzanClick="dianzanClick(item,index)" @share="share(item)"
|
||||||
|
@zhuijuClick="zhuijuClick(item)" @popupShow="popupShow"></list-item-vue>
|
||||||
</view>
|
</view>
|
||||||
|
</cell>
|
||||||
|
</list>
|
||||||
|
|
||||||
|
<!-- #endif -->
|
||||||
|
|
||||||
|
<!-- 返回按钮 -->
|
||||||
|
<view class="back-icon" v-if="!isTabbar&&control.showBack">
|
||||||
|
<u-icon name="arrow-left" color="#fff" :size="28" @click="back"></u-icon>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 选集 -->
|
||||||
|
<up-popup :show="popup.show" :round="10" @close="popupClose('show')" :customStyle="customStyle">
|
||||||
|
<view class="u-p-30">
|
||||||
|
<view class="u-flex u-flex-row u-row-between">
|
||||||
|
<view class="u-flex u-flex-row" style="align-items: baseline;">
|
||||||
|
<text class="color-333 u-font-32 ">{{info.title}}</text>
|
||||||
|
<text class="u-font-28 color-666 u-m-l-20">共{{list.length}}集</text>
|
||||||
|
</view>
|
||||||
|
<up-icon name="close" :size="16" color="#333" bold @click="popupClose('show')"></up-icon>
|
||||||
|
</view>
|
||||||
|
<scroll-view scroll-y="true" class="u-m-t-30" style="height: 400px;box-sizing: border-box;"
|
||||||
|
:show-scrollbar="false">
|
||||||
|
<view class="ji-list u-flex u-flex-row u-flex-wrap">
|
||||||
|
<view class="ji-item u-flex-xy-center u-text-center" @click="jiClick(item,index)"
|
||||||
|
:class="{active:nowIndex==index,'mr-0':(index+1)%3==0}" v-for="(item,index) in list"
|
||||||
|
:key="index">
|
||||||
|
<text class="u-font-28" :class="{'color-fff':nowIndex==index}">第{{index+1}}集</text>
|
||||||
|
<view class="lock u-flex-xy-center" v-if="!item.videoUrl">
|
||||||
|
<up-icon name="lock" :size="14" color="#fff"></up-icon>
|
||||||
|
</view>
|
||||||
|
<image v-if="nowIndex==index" class="playing" src="@/static/images/playIng.png" mode="">
|
||||||
|
</image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</up-popup>
|
||||||
|
<!-- 支付 -->
|
||||||
|
<up-popup :show="popup.pay" :round="10" @close="popupClose('pay')" :customStyle="customStyle">
|
||||||
|
<view class="u-p-30">
|
||||||
|
<view class="u-flex u-flex-row u-row-between">
|
||||||
|
<view class="u-flex u-flex-row" style="align-items: baseline;">
|
||||||
|
<text class="color-333 u-font-32 ">当前视频 没有播放权限</text>
|
||||||
|
</view>
|
||||||
|
<up-icon name="close" :size="16" color="#333" bold @click="popupClose('pay')"></up-icon>
|
||||||
|
</view>
|
||||||
|
<view class="u-m-t-30">
|
||||||
|
<text class=" color-999 u-font-24">每日前10次付款均可获取抽奖机会，抽奖保底抽中付款金额等额红包，红包可直接提现。当前为第1次付款</text>
|
||||||
|
</view>
|
||||||
|
<view class="colo-333 pay-list font-bold u-font-28 u-m-t-20">
|
||||||
|
<view class="pay-list-item" v-if="info&&info.price" @click="payBtnClick">
|
||||||
|
<image class="hot" src="@/static/images/hot.png" mode=""></image>
|
||||||
|
<text class="u-font-28 font-bold">{{info.price}}元解锁全剧</text>
|
||||||
|
</view>
|
||||||
|
<view class="pay-list-item" @click="payBtnClick">
|
||||||
|
<image class="hot" src="@/static/images/hot.png" mode=""></image>
|
||||||
|
<text class="u-font-28 font-bold">{{nowDanjiPrice*jinbiBili}}金币解锁单集视频</text>
|
||||||
|
</view>
|
||||||
|
<view class="pay-list-item" @click="payBtnClick">
|
||||||
|
<!-- <image class="hot" src="@/static/images/hot.png" mode=""></image> -->
|
||||||
|
<text class="u-font-28 font-bold">{{nowDanjiPrice}}元解锁单集视频</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</up-popup>
|
||||||
|
<!-- 支付确认 -->
|
||||||
|
<up-popup :show="popup.payTips" :round="10" @close="popupClose('payTips')" :customStyle="customStyle">
|
||||||
|
<view class="u-p-30">
|
||||||
|
<view class="u-flex u-flex-row u-row-between">
|
||||||
|
<view class="u-flex u-flex-row" style="align-items: baseline;">
|
||||||
|
<text class="color-333 u-font-32 ">购买后继续观看</text>
|
||||||
|
</view>
|
||||||
|
<up-icon name="close" :size="16" color="#333" bold @click="popupClose('payTips')"></up-icon>
|
||||||
|
</view>
|
||||||
|
<view class="u-flex u-m-t-24 u-flex-row u-row-between u-font-28">
|
||||||
|
<view class="u-flex u-flex-row u-flex-y-center">
|
||||||
|
<image src="@/static/images/zhifubao.png" class="zhifubao" mode=""></image>
|
||||||
|
<text class="u-m-l-20 u-flex-xy-center u-font-28">支付宝</text>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<up-radio-group>
|
||||||
|
<up-radio :icon-size="20" :size="26" :activeColor="color.main"></up-radio>
|
||||||
|
</up-radio-group>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="u-m-t-10">
|
||||||
|
<text class="font-bold u-font-26 color-333">温馨提示</text>
|
||||||
|
<text class="u-m-t-10 u-font-24 color-999">一经购买不予退款，未满18岁需在监护人的指导、同意下进行付费操作</text>
|
||||||
|
</view>
|
||||||
|
<view class="u-flex u-flex-row u-m-t-30 u-flex-y-center u-font-28">
|
||||||
|
<view class="u-flex-y-center">
|
||||||
|
<up-checkbox usedAlone shape="circle" v-model="isAgree" :activeColor="color.main"></up-checkbox>
|
||||||
|
</view>
|
||||||
|
<view class="u-flex u-flex-row u-flex-y-center">
|
||||||
|
<text class="u-font-28 color-333">我已经阅读并同意</text>
|
||||||
|
<text class="color-main u-font-28">《付费须知说明》</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="u-m-t-30 my-bg-main payConfirm">
|
||||||
|
<text class="u-font-28 color-fff">确认支付</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</up-popup>
|
||||||
|
|
||||||
|
<!-- 倍速 -->
|
||||||
|
<up-popup :show="popup.speed" :round="0" @close="popupClose('speed')" :customStyle="customStyle">
|
||||||
|
<view class="u-p-20 u-flex u-flex-row u-row-between u-flex-y-center">
|
||||||
|
<text class="font-bold color-333 u-font-28">倍速:</text>
|
||||||
|
|
||||||
|
<view class="u-flex u-flex-row speed-list">
|
||||||
|
<text class="speed-list-item u-font-28" @click="changeSpeed(index)"
|
||||||
|
:class="{active:index==speeds.active}" v-for="(item,index) in speeds.list">{{item.num}}x</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</up-popup>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import {returnShareUrl} from '@/commons/config.js'
|
// #ifdef APP
|
||||||
|
const domModule = uni.requireNativePlugin('dom')
|
||||||
|
// #endif
|
||||||
|
import listItemVue from './list-item.vue';
|
||||||
|
import {
|
||||||
|
returnShareUrl
|
||||||
|
} from '@/commons/config.js'
|
||||||
|
import color from '@/commons/color.js'
|
||||||
|
import {
|
||||||
|
debounce
|
||||||
|
} from 'lodash';
|
||||||
|
import * as Api from '@/api/video/index.js'
|
||||||
|
import infoBox from '@/utils/infoBox.js'
|
||||||
import {
|
import {
|
||||||
computed,
|
computed,
|
||||||
reactive,
|
reactive,
|
||||||
ref,
|
ref,
|
||||||
watch
|
watch,
|
||||||
|
nextTick,
|
||||||
|
onMounted,
|
||||||
|
getCurrentInstance
|
||||||
} from 'vue';
|
} from 'vue';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
list: {
|
list: {
|
||||||
type: Array,
|
type: Array,
|
||||||
|
|
@ -62,42 +184,311 @@
|
||||||
[]
|
[]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
isCollect: {
|
isCommand:{
|
||||||
type: Boolean,
|
type:Boolean,
|
||||||
default: false
|
default:false
|
||||||
|
},
|
||||||
|
isTabbar:{
|
||||||
|
type:Boolean,
|
||||||
|
default:false
|
||||||
|
},
|
||||||
|
info: {
|
||||||
|
tpye: Object,
|
||||||
|
default: () => {
|
||||||
|
return {
|
||||||
|
collect: 0,
|
||||||
|
current: {},
|
||||||
|
list: [],
|
||||||
|
price: 0,
|
||||||
|
title: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
const control = reactive({
|
||||||
|
showBack: true,
|
||||||
|
showControls: true
|
||||||
|
})
|
||||||
|
|
||||||
function posterError(){
|
const customStyle=computed(()=>{
|
||||||
|
// #ifdef H5
|
||||||
|
return {
|
||||||
|
bottom:props.isTabbar?'50px':'0'
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
// #ifndef H5
|
||||||
|
return {}
|
||||||
|
// #endif
|
||||||
|
})
|
||||||
|
|
||||||
|
function controlstoggles(e) {
|
||||||
|
control.showControls = e.detail.show
|
||||||
|
control.showBack = control.showControls
|
||||||
|
console.log(control);
|
||||||
}
|
}
|
||||||
|
|
||||||
function posterSuccess(){
|
const speeds = reactive({
|
||||||
|
list: [{
|
||||||
|
name: '0.5x',
|
||||||
|
num: 0.5
|
||||||
|
}, {
|
||||||
|
name: '1x',
|
||||||
|
num: 1
|
||||||
|
}, {
|
||||||
|
name: '1.25x',
|
||||||
|
num: 1.25
|
||||||
|
}, {
|
||||||
|
name: '1.5x',
|
||||||
|
num: 1.5
|
||||||
|
}],
|
||||||
|
active: 1
|
||||||
|
})
|
||||||
|
|
||||||
|
const $mountedComponents={}
|
||||||
|
function itemMounted(index) {
|
||||||
|
// $mountedComponents[index]=true
|
||||||
}
|
}
|
||||||
|
|
||||||
const posterData=reactive({
|
function back() {
|
||||||
posterShow:false
|
const arr = getCurrentPages()
|
||||||
|
if (arr.length < 2) {
|
||||||
|
uni.switchTab({
|
||||||
|
url: '/pages/index/index'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
uni.navigateBack()
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeSpeed(index) {
|
||||||
|
speeds.active = index
|
||||||
|
uni.showToast({
|
||||||
|
title: '已切换' + speeds.list[index].num + '倍播放',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const playSpeeds = computed(() => {
|
||||||
|
return speeds.list[speeds.active].num
|
||||||
|
})
|
||||||
|
|
||||||
|
const instance = getCurrentInstance()
|
||||||
|
let isAgree = ref(false);
|
||||||
|
const cutomStyle = {
|
||||||
|
background: 'rgb(255, 117, 129)',
|
||||||
|
height: '100rpx',
|
||||||
|
'border-radius': '100px'
|
||||||
|
}
|
||||||
|
const popup = reactive({
|
||||||
|
show: false,
|
||||||
|
pay: false,
|
||||||
|
payTips: false,
|
||||||
|
speed: false
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
let videoList = ref(props.list.slice(0, 3))
|
function openBs() {
|
||||||
watch(() => props.list.length, (newval) => {
|
|
||||||
init()
|
}
|
||||||
|
|
||||||
|
let cacheIndex = null
|
||||||
|
|
||||||
|
function appear(isFirst,item, index) {
|
||||||
|
if(isFirst){
|
||||||
|
$mountedComponents[index]=true
|
||||||
|
}
|
||||||
|
if (!initing) {
|
||||||
|
cacheIndex = index
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function disappear(item, index) {
|
||||||
|
|
||||||
|
if (index == nowIndex.value && cacheIndex != null && !initing) {
|
||||||
|
console.log('disappear' + index);
|
||||||
|
console.log('disappear nowIndex' + nowIndex.value);
|
||||||
|
console.log('cacheIndex' + cacheIndex);
|
||||||
|
nowIndex.value = cacheIndex
|
||||||
|
cacheIndex = null
|
||||||
|
console.log('disappear,nowIndex=' + nowIndex.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//确认支付
|
||||||
|
function payConfirm() {
|
||||||
|
if (!isAgree.value) {
|
||||||
|
return infoBox.showToast('请阅读并同意 《付费须知说明》')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function payBtnClick() {
|
||||||
|
popupClose()
|
||||||
|
popupShow('payTips')
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function jiClick(item, index) {
|
||||||
|
let newCurrent = (current.value + 1) % 3;
|
||||||
|
videoList.value[newCurrent] = item;
|
||||||
|
current.value = newCurrent;
|
||||||
|
popupClose('show')
|
||||||
|
// #ifdef APP
|
||||||
|
goListPosition(index)
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
|
||||||
|
let refList = ref([])
|
||||||
|
|
||||||
|
function setRefList(index) {
|
||||||
|
refList.value[index] = null;
|
||||||
|
return (el) => {
|
||||||
|
if (el) {
|
||||||
|
refList.value[index] = el;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
//滚动到指定位置
|
||||||
|
function goListPosition(index) {
|
||||||
|
console.log('goListPosition:' + index)
|
||||||
|
const el = refList.value[index]
|
||||||
|
if($mountedComponents[props.list.length-1]){
|
||||||
|
domModule.scrollToElement(el, {
|
||||||
|
animated: false
|
||||||
})
|
})
|
||||||
|
initing = false;
|
||||||
|
const item = props.list[index]
|
||||||
|
setVideoList(item)
|
||||||
|
insertHistory()
|
||||||
|
}else{
|
||||||
|
setTimeout(()=>{
|
||||||
|
goListPosition(index)
|
||||||
|
},30)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function popupClose(key) {
|
||||||
|
if (key) {
|
||||||
|
popup[key] = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
for (let i in popup) {
|
||||||
|
popup[i] = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function popupShow(key = 'show') {
|
||||||
|
popup[key] = true
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
let jinbiBili = ref(0)
|
||||||
|
let wHeight = ref(0)
|
||||||
|
async function configInit() {
|
||||||
|
const res = await Api.getJinbiBili()
|
||||||
|
jinbiBili.value = res.value
|
||||||
|
|
||||||
|
const sysInfo = uni.getSystemInfoSync()
|
||||||
|
wHeight.value = sysInfo.windowHeight
|
||||||
|
// wHeight.value = sysInfo.screenHeight
|
||||||
|
}
|
||||||
|
|
||||||
|
let isCollect = ref(props.info.collect)
|
||||||
|
watch(() => props.collect, (newval) => {
|
||||||
|
isCollect.value = newval
|
||||||
|
})
|
||||||
|
|
||||||
|
function toDetail(item,index){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pages/video/detail?courseId='+item.courseId
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function posterError() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function posterSuccess() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const posterData = reactive({
|
||||||
|
show: false,
|
||||||
|
// 用户姓名
|
||||||
|
name: '小明',
|
||||||
|
// 用户头像
|
||||||
|
logo: '/static/images/share.png',
|
||||||
|
// 商品名称
|
||||||
|
title: '精美时尚苹果手机一部',
|
||||||
|
// 商品价格
|
||||||
|
money: '5200.90',
|
||||||
|
// 商品图片(小程序需要换成自己服务器白名单设置的地址)
|
||||||
|
img: '',
|
||||||
|
// 商品链接
|
||||||
|
url: 'https://www.apple.com.cn/iphone/'
|
||||||
|
|
||||||
|
})
|
||||||
|
let nowIndex = ref(0)
|
||||||
|
let current = ref(0)
|
||||||
|
let videoList = ref([])
|
||||||
|
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
if (current.value === 0 && nowIndex.value == 0) {
|
if (JSON.stringify(props.current) !== '{}') {
|
||||||
videoList.value = [props.list[0], props.list[1], props.list[props.list.length - 1]]
|
// #ifdef H5
|
||||||
} else {
|
setVideoList(props.info.current)
|
||||||
videoList.value = props.list.slice(0, 3)
|
// #endif
|
||||||
|
// #ifdef APP
|
||||||
|
nextTick(() => {
|
||||||
|
const index = props.list.findIndex(v => v.courseDetailsId == props.info.current.courseDetailsId)
|
||||||
|
goListPosition(index)
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const emits = defineEmits(['zhuijuClick'])
|
|
||||||
|
|
||||||
function zhuijuClick() {
|
|
||||||
emits(['zhuijuClick', 'swiperChange','share'])
|
const emits = defineEmits(['zhuijuClick', 'swiperChange', 'share', 'update'])
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function zhuijuClick(item) {
|
||||||
|
isCollect.value = !isCollect.value
|
||||||
|
zhuiju({
|
||||||
|
courseId: item.courseId,
|
||||||
|
type: isCollect.value ? 1 : 0
|
||||||
|
})
|
||||||
|
emits('zhuijuClick')
|
||||||
}
|
}
|
||||||
|
const zhuiju = debounce((data) => {
|
||||||
|
Api.zhuiju(data)
|
||||||
|
}, 500)
|
||||||
|
|
||||||
|
let dianZanTimer = null
|
||||||
|
|
||||||
|
function dianzanClick(item, index) {
|
||||||
|
item.isGood = !item.isGood
|
||||||
|
const newval = item.goodNum + (item.isGood ? 1 : -1)
|
||||||
|
item.goodNum = newval < 0 ? 0 : newval
|
||||||
|
emits('update', {
|
||||||
|
index,
|
||||||
|
item
|
||||||
|
})
|
||||||
|
dianzan(item, index)
|
||||||
|
}
|
||||||
|
|
||||||
|
const dianzan = debounce((item, index) => {
|
||||||
|
Api.dianzan({
|
||||||
|
courseId: item.courseId,
|
||||||
|
courseDetailsId: item.courseDetailsId,
|
||||||
|
type: item.isGood ? 1 : 0
|
||||||
|
})
|
||||||
|
}, 500)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
let showControls = ref(false)
|
let showControls = ref(false)
|
||||||
|
|
||||||
|
|
@ -105,11 +496,7 @@
|
||||||
showControls.value = true
|
showControls.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
let current = ref(0)
|
|
||||||
|
|
||||||
function controlstoggles() {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function videoPlay(videoId, courseDetailsId) {
|
function videoPlay(videoId, courseDetailsId) {
|
||||||
|
|
||||||
|
|
@ -120,22 +507,43 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function share(item) {
|
function share(item) {
|
||||||
emits('share',item)
|
|
||||||
const urls = returnShareUrl() + '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item
|
const urls = returnShareUrl() + '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item
|
||||||
.courseDetailsId + '&invitation=' + uni.getStorageSync('invitationCode') + '&qdCode=' + this.qdCode;
|
.courseDetailsId + '&invitation=' + uni.getStorageSync('invitationCode') + '&qdCode=' + this.qdCode;
|
||||||
console.log(urls);
|
console.log(urls);
|
||||||
|
posterData.img = item.titleImg
|
||||||
|
posterData.show = true
|
||||||
}
|
}
|
||||||
let nowIndex = ref(0)
|
|
||||||
|
function posterHide() {
|
||||||
|
posterData.show = false
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const insertHistory = debounce(() => {
|
||||||
|
const item = videoList.value[current.value]
|
||||||
|
Api.insertHistory({
|
||||||
|
courseId: item.courseId,
|
||||||
|
courseDetailsId: item.courseDetailsId
|
||||||
|
})
|
||||||
|
}, 1000)
|
||||||
|
|
||||||
function swiperChange(e) {
|
function swiperChange(e) {
|
||||||
console.log(e);
|
console.log('e.detail.current');
|
||||||
const direction = e.detail.current > current.value ? 'down' : 'up'
|
console.log(e.detail.current);
|
||||||
current.value = e.detail.current
|
current.value = e.detail.current
|
||||||
const item = videoList.value[e.detail.current]
|
const item = videoList.value[e.detail.current]
|
||||||
|
insertHistory()
|
||||||
|
setVideoList(item)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function setVideoList(item) {
|
||||||
const listLen = props.list.length
|
const listLen = props.list.length
|
||||||
const lastIndex = listLen - 1
|
const lastIndex = listLen - 1
|
||||||
const index = props.list.findIndex(v => v.courseDetailsId == item.courseDetailsId)
|
const index = props.list.findIndex(v => v.courseDetailsId == item.courseDetailsId)
|
||||||
nowIndex.value = index
|
nowIndex.value = index
|
||||||
|
console.log('setVideoList nowIndex' + index);
|
||||||
let position = ''
|
let position = ''
|
||||||
if (index === 0) {
|
if (index === 0) {
|
||||||
position = 'start'
|
position = 'start'
|
||||||
|
|
@ -143,7 +551,6 @@
|
||||||
if (index === props.list.length - 1) {
|
if (index === props.list.length - 1) {
|
||||||
position = 'end'
|
position = 'end'
|
||||||
}
|
}
|
||||||
console.log(position);
|
|
||||||
if (current.value == 0) {
|
if (current.value == 0) {
|
||||||
if (position === 'start') {
|
if (position === 'start') {
|
||||||
videoList.value = [item, props.list[index + 1], props.list[lastIndex]]
|
videoList.value = [item, props.list[index + 1], props.list[lastIndex]]
|
||||||
|
|
@ -172,6 +579,9 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
console.log(videoList.value);
|
console.log(videoList.value);
|
||||||
|
if (!item.videoUrl) {
|
||||||
|
popupShow('pay')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function transition(e) {
|
function transition(e) {
|
||||||
|
|
@ -185,33 +595,82 @@
|
||||||
function waiting() {
|
function waiting() {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
let initing = true
|
||||||
|
configInit()
|
||||||
|
onMounted(() => {
|
||||||
|
init()
|
||||||
|
// setTimeout(()=>{
|
||||||
|
// },500)
|
||||||
|
})
|
||||||
|
watch(() => props.list.length, (newval) => {
|
||||||
|
// #ifdef H5
|
||||||
|
init()
|
||||||
|
// #endif
|
||||||
|
})
|
||||||
|
const nowDanjiPrice = computed(() => {
|
||||||
|
return videoList.value[current.value].price
|
||||||
|
})
|
||||||
|
|
||||||
|
function loadmore() {
|
||||||
|
console.log('loadmore');
|
||||||
|
}
|
||||||
|
const boxStyle = computed(() => {
|
||||||
|
return {
|
||||||
|
'height': wHeight.value + 'px',
|
||||||
|
'width': '750rpx',
|
||||||
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss" scoped>
|
||||||
|
.box {
|
||||||
|
/* #ifdef H5 */
|
||||||
|
flex: 1;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
.u-flex-1 {
|
.u-flex-1 {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.u-popup {
|
||||||
|
position: fixed !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .u-popup {
|
||||||
|
position: fixed !important;
|
||||||
|
}
|
||||||
|
|
||||||
.video {
|
.video {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.poster {
|
.poster {
|
||||||
|
/* #ifdef H5 */
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 90%;
|
height: 90%;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP */
|
||||||
|
width: 750rpx;
|
||||||
|
flex: 1;
|
||||||
|
/* #endif */
|
||||||
}
|
}
|
||||||
|
|
||||||
.u-text-center {
|
.u-text-center {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.u-flex-row {
|
||||||
|
flex-direction: row !important;
|
||||||
|
}
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
@ -223,6 +682,17 @@
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.u-flex-y-center {
|
||||||
|
align-items: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swipers-items {
|
||||||
|
width: 750rpx;
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
width: 60rpx;
|
width: 60rpx;
|
||||||
position: absolute !important;
|
position: absolute !important;
|
||||||
|
|
@ -246,4 +716,117 @@
|
||||||
|
|
||||||
.zhuiju {}
|
.zhuiju {}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.poster-popup {
|
||||||
|
position: fixed !important;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.6);
|
||||||
|
z-index: 9999;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ji-list {
|
||||||
|
.ji-item {
|
||||||
|
width: 210rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
margin-right: 30rpx;
|
||||||
|
height: 88rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
background-color: #F5F7FF;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background-color: $my-main-color;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mr-0 {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lock {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 0px 6px 0px 6px;
|
||||||
|
background-color: #ccc;
|
||||||
|
padding: 2rpx 4rpx;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playing {
|
||||||
|
position: absolute;
|
||||||
|
width: 32rpx;
|
||||||
|
height: 24rpx;
|
||||||
|
bottom: 5px;
|
||||||
|
right: 7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ji-item:nth-of-type(3n) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hot {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-icon {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 9999;
|
||||||
|
left: 30rpx;
|
||||||
|
top: 100rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pay-list {
|
||||||
|
.pay-list-item {
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: #F2F2F2;
|
||||||
|
padding: 24rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.payConfirm {
|
||||||
|
border-radius: 100px;
|
||||||
|
height: 100rpx;
|
||||||
|
line-height: 100rpx;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zhifubao {
|
||||||
|
width: 56rpx;
|
||||||
|
height: 56rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speed-list {
|
||||||
|
align-items: center;
|
||||||
|
background-color: #eeeeef;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
.speed-list-item {
|
||||||
|
border-radius: 3px;
|
||||||
|
width: 50px;
|
||||||
|
padding: 8px 0;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,205 @@
|
||||||
|
<template xlang="wxml" minapp="mpvue">
|
||||||
|
<view class="tki-qrcode">
|
||||||
|
<canvas class="tki-qrcode-canvas" :canvas-id="cid" :style="{width:cpSize+'px',height:cpSize+'px'}" />
|
||||||
|
<image v-if="show" :src="result" :style="{width:cpSize+'px',height:cpSize+'px'}" />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import QRCode from "./qrcode.js"
|
||||||
|
let qrcode
|
||||||
|
export default {
|
||||||
|
name: "tki-qrcode",
|
||||||
|
props: {
|
||||||
|
cid: {
|
||||||
|
type: String,
|
||||||
|
default: 'tki-qrcode-canvas'
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: Number,
|
||||||
|
default: 200
|
||||||
|
},
|
||||||
|
unit: {
|
||||||
|
type: String,
|
||||||
|
default: 'upx'
|
||||||
|
},
|
||||||
|
show: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
val: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
background: {
|
||||||
|
type: String,
|
||||||
|
default: '#ffffff'
|
||||||
|
},
|
||||||
|
foreground: {
|
||||||
|
type: String,
|
||||||
|
default: '#000000'
|
||||||
|
},
|
||||||
|
pdground: {
|
||||||
|
type: String,
|
||||||
|
default: '#000000'
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
iconSize: {
|
||||||
|
type: Number,
|
||||||
|
default: 40
|
||||||
|
},
|
||||||
|
lv: {
|
||||||
|
type: Number,
|
||||||
|
default: 3
|
||||||
|
},
|
||||||
|
onval: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
loadMake: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
usingComponents: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
showLoading: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
loadingText: {
|
||||||
|
type: String,
|
||||||
|
default: '二维码生成中'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
result: '',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
_makeCode() {
|
||||||
|
let that = this
|
||||||
|
if (!this._empty(this.val)) {
|
||||||
|
qrcode = new QRCode({
|
||||||
|
context: that, // 上下文环境
|
||||||
|
canvasId: that.cid, // canvas-id
|
||||||
|
usingComponents: that.usingComponents, // 是否是自定义组件
|
||||||
|
// loadingText: that.loadingText, // loading文字
|
||||||
|
text: that.val, // 生成内容
|
||||||
|
size: that.cpSize, // 二维码大小
|
||||||
|
background: that.background, // 背景色
|
||||||
|
foreground: that.foreground, // 前景色
|
||||||
|
pdground: that.pdground, // 定位角点颜色
|
||||||
|
correctLevel: that.lv, // 容错级别
|
||||||
|
image: that.icon, // 二维码图标
|
||||||
|
imageSize: that.iconSize, // 二维码图标大小
|
||||||
|
cbResult: function(res) { // 生成二维码的回调
|
||||||
|
that._result(res)
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: '二维码内容不能为空',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
_clearCode() {
|
||||||
|
this._result('')
|
||||||
|
qrcode.clear()
|
||||||
|
},
|
||||||
|
_saveCode() {
|
||||||
|
let that = this;
|
||||||
|
if (this.result != "") {
|
||||||
|
uni.saveImageToPhotosAlbum({
|
||||||
|
filePath: that.result,
|
||||||
|
success: function() {
|
||||||
|
// uni.showToast({
|
||||||
|
// title: '二维码保存成功',
|
||||||
|
// icon: 'success',
|
||||||
|
// duration: 2000
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
_result(res) {
|
||||||
|
this.result = res;
|
||||||
|
this.$emit('result', res)
|
||||||
|
},
|
||||||
|
_empty(v) {
|
||||||
|
let tp = typeof v,
|
||||||
|
rt = false;
|
||||||
|
if (tp == "number" && String(v) == "") {
|
||||||
|
rt = true
|
||||||
|
} else if (tp == "undefined") {
|
||||||
|
rt = true
|
||||||
|
} else if (tp == "object") {
|
||||||
|
if (JSON.stringify(v) == "{}" || JSON.stringify(v) == "[]" || v == null) rt = true
|
||||||
|
} else if (tp == "string") {
|
||||||
|
if (v == "" || v == "undefined" || v == "null" || v == "{}" || v == "[]") rt = true
|
||||||
|
} else if (tp == "function") {
|
||||||
|
rt = false
|
||||||
|
}
|
||||||
|
return rt
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
size: function(n, o) {
|
||||||
|
if (n != o && !this._empty(n)) {
|
||||||
|
this.cSize = n
|
||||||
|
if (!this._empty(this.val)) {
|
||||||
|
setTimeout(() => {
|
||||||
|
this._makeCode()
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
val: function(n, o) {
|
||||||
|
if (this.onval) {
|
||||||
|
if (n != o && !this._empty(n)) {
|
||||||
|
setTimeout(() => {
|
||||||
|
this._makeCode()
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
cpSize() {
|
||||||
|
if (this.unit == "upx") {
|
||||||
|
return uni.upx2px(this.size)
|
||||||
|
} else {
|
||||||
|
return this.size
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted: function() {
|
||||||
|
if (this.loadMake) {
|
||||||
|
if (!this._empty(this.val)) {
|
||||||
|
setTimeout(() => {
|
||||||
|
this._makeCode()
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.tki-qrcode {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tki-qrcode-canvas {
|
||||||
|
position: fixed;
|
||||||
|
top: -99999upx;
|
||||||
|
left: -99999upx;
|
||||||
|
z-index: -99999;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="min-page">
|
<view class="min-page">
|
||||||
<my-video-list @swiperChange="swiperChange" :list="state.list" :isCollect="state.isCollect" @share="share"
|
<my-video-list v-if="state.list.length" @swiperChange="swiperChange" :list="state.list" @update="update"
|
||||||
|
:info="state"
|
||||||
></my-video-list>
|
></my-video-list>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -17,6 +18,9 @@
|
||||||
import {
|
import {
|
||||||
slice
|
slice
|
||||||
} from 'lodash'
|
} from 'lodash'
|
||||||
|
const boxStyle={
|
||||||
|
height:'835px'
|
||||||
|
}
|
||||||
let options = {}
|
let options = {}
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
collect: 0,
|
collect: 0,
|
||||||
|
|
@ -30,6 +34,9 @@
|
||||||
Object.assign(state, res)
|
Object.assign(state, res)
|
||||||
state.list = res.list
|
state.list = res.list
|
||||||
}
|
}
|
||||||
|
function update({index,item}){
|
||||||
|
state.list[index]=item
|
||||||
|
}
|
||||||
onLoad((opt) => {
|
onLoad((opt) => {
|
||||||
Object.assign(options, opt)
|
Object.assign(options, opt)
|
||||||
init()
|
init()
|
||||||
|
|
@ -54,4 +61,8 @@
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
.u-popup{
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -0,0 +1,100 @@
|
||||||
|
<template>
|
||||||
|
<view class="min-page " :style="comStyle">
|
||||||
|
<!-- <up-button @click="toDetail">toDetail</up-button> -->
|
||||||
|
<my-video-list isCommand isTabbar v-if="state.list.length" @swiperChange="swiperChange" :list="state.list" @update="update"
|
||||||
|
:info="state"
|
||||||
|
></my-video-list>
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
onLoad,
|
||||||
|
onShow
|
||||||
|
} from '@dcloudio/uni-app'
|
||||||
|
import * as Api from '@/api/video/index.js'
|
||||||
|
import {
|
||||||
|
computed,
|
||||||
|
reactive,
|
||||||
|
ref
|
||||||
|
} from 'vue'
|
||||||
|
import {
|
||||||
|
slice
|
||||||
|
} from 'lodash'
|
||||||
|
|
||||||
|
let height = ref(0)
|
||||||
|
const sysInfo = uni.getSystemInfoSync()
|
||||||
|
height.value = sysInfo.screenHeight - 50
|
||||||
|
const comStyle = computed(() => {
|
||||||
|
return {
|
||||||
|
// height: height.value + 'px'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function toDetail() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/video/detail?courseId=1208'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let options = {}
|
||||||
|
const state = reactive({
|
||||||
|
collect: 0,
|
||||||
|
current: {},
|
||||||
|
list: [],
|
||||||
|
price: 0,
|
||||||
|
title: ''
|
||||||
|
})
|
||||||
|
async function init() {
|
||||||
|
const res = await Api.tuijianVideo(options)
|
||||||
|
state.current = res.list[0]
|
||||||
|
Object.assign(state, res)
|
||||||
|
state.list = res.list
|
||||||
|
}
|
||||||
|
|
||||||
|
function update({
|
||||||
|
index,
|
||||||
|
item
|
||||||
|
}) {
|
||||||
|
state.list[index] = item
|
||||||
|
}
|
||||||
|
onLoad((opt) => {
|
||||||
|
Object.assign(options, opt)
|
||||||
|
init()
|
||||||
|
})
|
||||||
|
|
||||||
|
function swiperChange({
|
||||||
|
current,
|
||||||
|
direction,
|
||||||
|
data
|
||||||
|
}) {}
|
||||||
|
|
||||||
|
onShow(() => {
|
||||||
|
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
page{
|
||||||
|
height: calc(100vh - 50px);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.min-page {
|
||||||
|
/* #ifdef H5 */
|
||||||
|
height: calc(100vh - 50px);
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP */
|
||||||
|
height: 100vh;
|
||||||
|
/* #endif */
|
||||||
|
background-color: #000;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-popup {
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="u-p-60">
|
|
||||||
<up-button @click="toDetail">toDetail</up-button>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
function toDetail(){
|
|
||||||
uni.navigateTo({
|
|
||||||
url:'/pages/video/detail'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
3
uni.scss
3
uni.scss
|
|
@ -77,3 +77,6 @@ $uni-font-size-subtitle: 26px;
|
||||||
$uni-color-paragraph: #3f536e; // 文章段落颜色
|
$uni-color-paragraph: #3f536e; // 文章段落颜色
|
||||||
$uni-font-size-paragraph: 15px;
|
$uni-font-size-paragraph: 15px;
|
||||||
@import 'uview-plus/theme.scss';
|
@import 'uview-plus/theme.scss';
|
||||||
|
|
||||||
|
$my-main-color:#ff7581;
|
||||||
|
$my-red-color:#F02C45;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
## 3.0.8（2024-10-03）
|
||||||
|
组件优化
|
||||||
|
## 3.0.6（2024-07-14）
|
||||||
|
组件优化
|
||||||
|
## 3.0.2（2023-07-29）
|
||||||
|
组件优化
|
||||||
|
## 3.0.1（2023-07-28）
|
||||||
|
组件说明优化
|
||||||
|
## 3.0（2023-07-22）
|
||||||
|
优化使用说明，小程序设置网络图片地址，需要是服务器白名单IP，本地图片无限制
|
||||||
|
## 2.0.1（2023-07-11）
|
||||||
|
兼容微信小程序 优化使用说明
|
||||||
|
## 2.0（2023-07-11）
|
||||||
|
组件优化, 兼容小程序
|
||||||
|
## 1.0.1（2023-07-11）
|
||||||
|
组件优化
|
||||||
|
## 1.0.0（2023-07-02）
|
||||||
|
组件初始化
|
||||||
|
|
@ -0,0 +1,447 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<!-- 绘制canvas -->
|
||||||
|
<canvas class="mycanvas" canvas-id="mycanvas" :style="'width:' + (windowWidth-60) + 'px;height:520px'"></canvas>
|
||||||
|
|
||||||
|
<block>
|
||||||
|
<image class="imgs" :style="'width:' + (windowWidth-60) + 'px;height:520px'" :src="imgUrl" mode=""></image>
|
||||||
|
</block>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- #ifndef H5 -->
|
||||||
|
<view class="saveImg" @tap="saveImg" :style="'background:' + colors">
|
||||||
|
保存图片
|
||||||
|
</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef H5 -->
|
||||||
|
<p class="tips">长按图片进行保存</p>
|
||||||
|
<!-- #endif -->
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import uQRCode from './uqrcode.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mixins: [{
|
||||||
|
methods: {
|
||||||
|
setData: function(obj, callback) {
|
||||||
|
let that = this;
|
||||||
|
const handleData = (tepData, tepKey, afterKey) => {
|
||||||
|
tepKey = tepKey.split('.');
|
||||||
|
tepKey.forEach(item => {
|
||||||
|
if (tepData[item] === null || tepData[item] === undefined) {
|
||||||
|
let reg = /^[0-9]+$/;
|
||||||
|
tepData[item] = reg.test(afterKey) ? [] : {};
|
||||||
|
tepData = tepData[item];
|
||||||
|
} else {
|
||||||
|
tepData = tepData[item];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return tepData;
|
||||||
|
};
|
||||||
|
const isFn = function(value) {
|
||||||
|
return typeof value == 'function' || false;
|
||||||
|
};
|
||||||
|
Object.keys(obj).forEach(function(key) {
|
||||||
|
let val = obj[key];
|
||||||
|
key = key.replace(/\]/g, '').replace(/\[/g, '.');
|
||||||
|
let front, after;
|
||||||
|
let index_after = key.lastIndexOf('.');
|
||||||
|
if (index_after != -1) {
|
||||||
|
after = key.slice(index_after + 1);
|
||||||
|
front = handleData(that, key.slice(0, index_after), after);
|
||||||
|
} else {
|
||||||
|
after = key;
|
||||||
|
front = that;
|
||||||
|
}
|
||||||
|
if (front.$data && front.$data[after] === undefined) {
|
||||||
|
Object.defineProperty(front, after, {
|
||||||
|
get() {
|
||||||
|
return front.$data[after];
|
||||||
|
},
|
||||||
|
set(newValue) {
|
||||||
|
front.$data[after] = newValue;
|
||||||
|
that.$forceUpdate();
|
||||||
|
},
|
||||||
|
enumerable: true,
|
||||||
|
configurable: true
|
||||||
|
});
|
||||||
|
front[after] = val;
|
||||||
|
} else {
|
||||||
|
that.$set(front, after, val);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
isFn(callback) && this.$nextTick(callback);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
windowWidth: '',
|
||||||
|
windowHeight: '',
|
||||||
|
colors: "#fa436a",
|
||||||
|
ctx: '',
|
||||||
|
imgUrl: '',
|
||||||
|
isShow: false,
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
props: {
|
||||||
|
// 海报生成数据
|
||||||
|
posterData: {
|
||||||
|
type: Object
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getSystem();
|
||||||
|
|
||||||
|
this.setPoster();
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 页面上拉触底事件的处理函数
|
||||||
|
*/
|
||||||
|
onReachBottom: function() {},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 用户点击右上角分享
|
||||||
|
*/
|
||||||
|
onShareAppMessage: function() {},
|
||||||
|
methods: {
|
||||||
|
getSystem() {
|
||||||
|
let that = this;
|
||||||
|
uni.getSystemInfo({
|
||||||
|
success: function(res) {
|
||||||
|
console.log(res);
|
||||||
|
that.setData({
|
||||||
|
windowHeight: res.windowHeight,
|
||||||
|
windowWidth: res.windowWidth
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
setPoster() {
|
||||||
|
uni.showLoading({
|
||||||
|
title: '海报生成中...'
|
||||||
|
})
|
||||||
|
let ctx = uni.createCanvasContext('mycanvas', this); // 绘制背景
|
||||||
|
ctx.fillStyle = "#FFFFFF"
|
||||||
|
ctx.fillRect(0, 0, this.windowWidth - 60, 520)
|
||||||
|
/**
|
||||||
|
* 绘制名称
|
||||||
|
*/
|
||||||
|
// const setText = (context, fs, color, x, y, c, bold) => {
|
||||||
|
// context.setFillStyle(color);
|
||||||
|
// context.setTextAlign('left');
|
||||||
|
// if (bold) {
|
||||||
|
// context.font = 'normal bold 20px Arial,sans-serif';
|
||||||
|
// } else {
|
||||||
|
// context.font = 'normal 20px Arial,sans-serif';
|
||||||
|
// }
|
||||||
|
// context.setFontSize(fs);
|
||||||
|
// context.fillText(c, x, y);
|
||||||
|
// context.restore();
|
||||||
|
// };
|
||||||
|
// setText(ctx, 14, '#333', 85, 35, this.posterData.name, 'bold');
|
||||||
|
// setText(ctx, 12, '#999', 85, 58, '为您挑选了一个好礼物');
|
||||||
|
// ctx.save();
|
||||||
|
/**
|
||||||
|
* 绘制头像
|
||||||
|
*/
|
||||||
|
// ctx.beginPath();
|
||||||
|
// let avatar_width = 60; //头像宽度
|
||||||
|
// let avatar_height = 60; //头像高度
|
||||||
|
// let avatar_x = 15; //头像的x坐标
|
||||||
|
// let avatar_y = 15; //头像的y坐标
|
||||||
|
// let radius = 8 //头像的圆角弧度
|
||||||
|
// // 绘制圆角头像
|
||||||
|
// this.setRadius(ctx, avatar_width, avatar_height, avatar_x, avatar_y, radius)
|
||||||
|
// 绘制圆形图片
|
||||||
|
// this.setCircular(ctx, avatar_width, avatar_height, avatar_x, avatar_y)
|
||||||
|
|
||||||
|
// 绘制商品图片
|
||||||
|
this.setGoodsImg(ctx)
|
||||||
|
|
||||||
|
// 绘制商品价格
|
||||||
|
let pirce = '￥ ' + this.posterData.money
|
||||||
|
// this.setGoodsPrice(ctx, 20, this.colors, 15, 410, pirce)
|
||||||
|
// 绘制商品名称
|
||||||
|
this.setGoodsName(ctx)
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
setEwm(ctx) {
|
||||||
|
|
||||||
|
|
||||||
|
console.log('生成二维码')
|
||||||
|
let code_widht = 100; //二维码宽度
|
||||||
|
let code_height = 100; //二维码高度
|
||||||
|
let x = this.windowWidth - 170
|
||||||
|
|
||||||
|
|
||||||
|
let myThis = this;
|
||||||
|
console.log(this.windowWidth);
|
||||||
|
|
||||||
|
|
||||||
|
uQRCode.make({
|
||||||
|
canvasId: 'mycanvas',
|
||||||
|
componentInstance: this,
|
||||||
|
text: this.posterData.url,
|
||||||
|
size: 200,
|
||||||
|
margin: 10,
|
||||||
|
fileType: 'png',
|
||||||
|
success: res => {
|
||||||
|
console.log('生成二维码3')
|
||||||
|
|
||||||
|
console.log('res = ' + res);
|
||||||
|
|
||||||
|
ctx.drawImage(res, x, 410, code_widht, code_height);
|
||||||
|
|
||||||
|
setTimeout(() => { //必须延时执行 不然h5不显示
|
||||||
|
ctx.save();
|
||||||
|
ctx.draw(false, () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.canvasToTempFilePath({
|
||||||
|
canvasId: 'mycanvas',
|
||||||
|
success: (res) => {
|
||||||
|
console.log(res)
|
||||||
|
this.imgUrl = res.tempFilePath
|
||||||
|
}
|
||||||
|
}, this)
|
||||||
|
}, 300)
|
||||||
|
})
|
||||||
|
uni.hideLoading()
|
||||||
|
}, 1000)
|
||||||
|
|
||||||
|
},
|
||||||
|
complete: () => {
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
setRadius(ctx, avatar_width, avatar_height, avatar_x, avatar_y, radius) {
|
||||||
|
/**
|
||||||
|
* 绘制圆角
|
||||||
|
*/
|
||||||
|
ctx.arc(avatar_x + radius, avatar_y + radius, radius, Math.PI, Math.PI * 3 / 2);
|
||||||
|
ctx.lineTo(avatar_width - radius + avatar_x, avatar_y);
|
||||||
|
ctx.arc(avatar_width - radius + avatar_x, radius + avatar_y, radius, Math.PI * 3 / 2, Math.PI * 2);
|
||||||
|
ctx.lineTo(avatar_width + avatar_x, avatar_height + avatar_y - radius);
|
||||||
|
ctx.arc(avatar_width - radius + avatar_x, avatar_height - radius + avatar_y, radius, 0, Math.PI * 1 / 2);
|
||||||
|
ctx.lineTo(radius + avatar_x, avatar_height + avatar_y);
|
||||||
|
ctx.arc(radius + avatar_x, avatar_height - radius + avatar_y, radius, Math.PI * 1 / 2, Math.PI);
|
||||||
|
// 开始填充
|
||||||
|
ctx.strokeStyle = "#fff";
|
||||||
|
ctx.fill() //保证图片无bug填充
|
||||||
|
ctx.clip(); //画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
|
||||||
|
|
||||||
|
ctx.drawImage(this.posterData.logo, avatar_x, avatar_y, avatar_width, avatar_height);
|
||||||
|
ctx.closePath()
|
||||||
|
ctx.restore();
|
||||||
|
},
|
||||||
|
setCircular(ctx, avatar_width, avatar_height, avatar_x, avatar_y) { //绘制圆形图片
|
||||||
|
/**
|
||||||
|
* 绘制圆形
|
||||||
|
*/
|
||||||
|
//先画个圆 前两个参数确定了圆心 （x,y） 坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false，即顺时针
|
||||||
|
ctx.arc(avatar_width / 2 + avatar_x, avatar_height / 2 + avatar_y, avatar_width / 2, 0, Math.PI * 2,
|
||||||
|
false); //画圆
|
||||||
|
// 开始填充
|
||||||
|
ctx.strokeStyle = "#fff";
|
||||||
|
ctx.fill() //保证图片无bug填充
|
||||||
|
ctx.clip(); //画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
|
||||||
|
|
||||||
|
ctx.drawImage(this.posterData.logo, avatar_x, avatar_y, avatar_width, avatar_height);
|
||||||
|
ctx.closePath()
|
||||||
|
ctx.restore();
|
||||||
|
},
|
||||||
|
setGoodsImg(ctx) { //绘制中间商品图片
|
||||||
|
let width = this.windowWidth - 90
|
||||||
|
ctx.drawImage(this.posterData.img, 15, 15, width, width);
|
||||||
|
ctx.save();
|
||||||
|
},
|
||||||
|
setGoodsPrice(ctx, fs, color, x, y, c, bold) { //绘制商品价格
|
||||||
|
ctx.setFillStyle(color);
|
||||||
|
ctx.setTextAlign('left');
|
||||||
|
if (bold) {
|
||||||
|
ctx.font = 'normal bold 20px Arial,sans-serif';
|
||||||
|
} else {
|
||||||
|
ctx.font = 'normal 20px Arial,sans-serif';
|
||||||
|
}
|
||||||
|
ctx.setFontSize(fs);
|
||||||
|
ctx.fillText(c, x, y);
|
||||||
|
ctx.restore();
|
||||||
|
},
|
||||||
|
setGoodsName(ctx) { //绘制商品名称
|
||||||
|
let obj = {
|
||||||
|
x: 20, //绘制文本的左上角x坐标位置
|
||||||
|
y: 440, //绘制文本的左上角y坐标位置
|
||||||
|
width: 210,
|
||||||
|
height: 20,
|
||||||
|
line: 2,
|
||||||
|
color: '#202020',
|
||||||
|
size: 14, //字体的字号
|
||||||
|
align: 'left',
|
||||||
|
baseline: 'top',
|
||||||
|
text: this.posterData.title,
|
||||||
|
bold: true
|
||||||
|
};
|
||||||
|
var td = Math.ceil(obj.width / (obj.size));
|
||||||
|
var tr = Math.ceil(obj.text.length / td);
|
||||||
|
for (var i = 0; i < tr; i++) {
|
||||||
|
var txt = {
|
||||||
|
x: obj.x,
|
||||||
|
y: obj.y + (i * obj.height),
|
||||||
|
color: obj.color,
|
||||||
|
size: obj.size,
|
||||||
|
align: obj.align,
|
||||||
|
baseline: obj.baseline,
|
||||||
|
text: obj.text.substring(i * td, (i + 1) * td),
|
||||||
|
bold: obj.bold
|
||||||
|
};
|
||||||
|
if (i < obj.line) {
|
||||||
|
if (i == obj.line - 1) {
|
||||||
|
txt.text = txt.text.substring(0, txt.text.length - 3) + '......';
|
||||||
|
}
|
||||||
|
this.drawText(ctx, txt);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 绘制二维码
|
||||||
|
this.setEwm(ctx);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 渲染文字
|
||||||
|
*
|
||||||
|
* @param {Object} obj
|
||||||
|
*/
|
||||||
|
drawText: function(ctx, obj) {
|
||||||
|
console.log('渲染文字', obj)
|
||||||
|
ctx.save();
|
||||||
|
ctx.setFillStyle(obj.color);
|
||||||
|
ctx.setFontSize(obj.size);
|
||||||
|
ctx.setTextAlign(obj.align);
|
||||||
|
ctx.setTextBaseline(obj.baseline);
|
||||||
|
if (obj.bold) {
|
||||||
|
console.log('字体加粗')
|
||||||
|
ctx.fillText(obj.text, obj.x, obj.y - 0.1);
|
||||||
|
ctx.fillText(obj.text, obj.x - 0.1, obj.y);
|
||||||
|
}
|
||||||
|
ctx.fillText(obj.text, obj.x, obj.y);
|
||||||
|
if (obj.bold) {
|
||||||
|
ctx.fillText(obj.text, obj.x, obj.y + 0.1);
|
||||||
|
ctx.fillText(obj.text, obj.x + 0.1, obj.y);
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
},
|
||||||
|
saveImg() {
|
||||||
|
//保存图片
|
||||||
|
uni.showLoading({
|
||||||
|
title: '保存中...'
|
||||||
|
});
|
||||||
|
let that = this;
|
||||||
|
// #ifdef MP
|
||||||
|
uni.getSetting({
|
||||||
|
success(res) {
|
||||||
|
uni.hideLoading();
|
||||||
|
console.log(res)
|
||||||
|
if (!res.authSetting['scope.writePhotosAlbum']) {
|
||||||
|
wx.authorize({
|
||||||
|
scope: 'scope.writePhotosAlbum',
|
||||||
|
success: (res) => {
|
||||||
|
console.log(res)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.saveImageToPhotosAlbum({
|
||||||
|
filePath: that.imgUrl,
|
||||||
|
success(re) {
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.showToast({
|
||||||
|
title: '保存成功',
|
||||||
|
icon: 'success'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail(err) {
|
||||||
|
console.log(err);
|
||||||
|
uni.showToast({
|
||||||
|
title: '保存失败',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.saveImageToPhotosAlbum({
|
||||||
|
filePath: that.imgUrl,
|
||||||
|
success(re) {
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.showToast({
|
||||||
|
title: '保存成功',
|
||||||
|
icon: 'success'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail(err) {
|
||||||
|
console.log(err);
|
||||||
|
uni.showToast({
|
||||||
|
title: '保存失败',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
}, 1000);
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.mycanvas {
|
||||||
|
margin: 0 auto;
|
||||||
|
border-radius: 10upx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.saveImg {
|
||||||
|
width: 70%;
|
||||||
|
height: 80upx;
|
||||||
|
line-height: 80upx;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #4DB8E4;
|
||||||
|
border-radius: 10upx;
|
||||||
|
margin: 40upx auto 20upx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgs {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 50%;
|
||||||
|
border-radius: 10upx;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
/* 遮挡二维码 */
|
||||||
|
background-color: white;
|
||||||
|
/* 置于上层 */
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tips {
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 24upx;
|
||||||
|
margin-top: 20upx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,86 @@
|
||||||
|
{
|
||||||
|
"id": "cc-beautyPoster",
|
||||||
|
"displayName": "一款基于canvas的精美商品海报生成组件 根据个性化数据生成商品海报图 长按保存图片",
|
||||||
|
"version": "3.0.8",
|
||||||
|
"description": "一款基于canvas的精美商品海报生成组件 根据个性化数据生成商品海报图 长按保存图片",
|
||||||
|
"keywords": [
|
||||||
|
"海报",
|
||||||
|
"canvas",
|
||||||
|
"商品海报",
|
||||||
|
"朋友圈海报",
|
||||||
|
"海报生成"
|
||||||
|
],
|
||||||
|
"repository": "",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "^3.8.0"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"type": "component-vue",
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": ""
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y",
|
||||||
|
"alipay": "n"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
},
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y",
|
||||||
|
"钉钉": "y",
|
||||||
|
"快手": "y",
|
||||||
|
"飞书": "y",
|
||||||
|
"京东": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "y",
|
||||||
|
"联盟": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,170 @@
|
||||||
|
# cc-beautyPoster
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
##uniapp专属精品组件页面模板（由前端组件开发出品）精品组件页面模板
|
||||||
|
|
||||||
|
###●组件模板规划：
|
||||||
|
由前端组件开发出品的精品组件页面模板，将陆续发布，预计高达约几百种供您使用，是快速快发项目、创业的必备精品。
|
||||||
|
|
||||||
|
合集地址： uni-app模板合集地址：(https://ext.dcloud.net.cn/publisher?id=274945) 如查看全部页面模板，请前往上述uniapp插件市场合集地址；
|
||||||
|
|
||||||
|
###●组件模板效果图：
|
||||||
|
可下载项目后预览，效果图见右侧图片；
|
||||||
|
|
||||||
|
###●组件模板费用：
|
||||||
|
学习：免费下载，进行学习，无费用；
|
||||||
|
|
||||||
|
使用/商用：本页面地址赞赏10元后，可终身商用；
|
||||||
|
|
||||||
|
###●组件模板使用版权/商用：
|
||||||
|
本组件模板免费下载可供学习，如需使用及商用，请在本组件页面模板进行赞赏10元
|
||||||
|
|
||||||
|
（仅需10元获取精品页面模板代码-物有所值，1个组件页面市场价100元 ）
|
||||||
|
|
||||||
|
赞赏10后（当前项目产生赞赏订单可追溯）即可终身商用当前本地址下载的页面模版代码，不同下载地址需进行不同的赞赏。（不赞赏就进行商用使用者，面临侵权！保留追究知识产权法律责任！后果自负！）
|
||||||
|
|
||||||
|
|
||||||
|
### 我的技术公众号(私信可加前端技术交流群)
|
||||||
|
|
||||||
|
群内气氛挺不错的，应该或许可能大概，算是为数不多的，专搞技术的前端群，偶尔聊天摸鱼
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### 使用方法
|
||||||
|
```使用方法
|
||||||
|
|
||||||
|
<!-- posterData： 海报数据 -->
|
||||||
|
<cc-beautyPoster :posterData="posterData"></cc-beautyPoster>
|
||||||
|
|
||||||
|
<!-- 海报数据字段 注意小程序下网络图片地址需要是服务器设置的白名单地址 本地图片无限制！ -->
|
||||||
|
posterData: {
|
||||||
|
// 用户姓名
|
||||||
|
name: '小明',
|
||||||
|
// 用户头像
|
||||||
|
logo: '/static/images/headIcon.jpg',
|
||||||
|
// 商品名称
|
||||||
|
title: '精美时尚苹果手机一部',
|
||||||
|
// 商品价格
|
||||||
|
money: '5200.90',
|
||||||
|
// 商品图片(小程序需要换成自己服务器白名单设置的地址)
|
||||||
|
img: '/static/images/goods.jpg',
|
||||||
|
// 商品链接
|
||||||
|
url: 'https://www.apple.com.cn/iphone/'
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
#### HTML代码实现部分
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
|
||||||
|
<button style="margin-top: 38px;" @click="openPoster">生成商品海报</button>
|
||||||
|
|
||||||
|
<!-- 海报弹框 -->
|
||||||
|
<uni-popup ref="popup" type="center">
|
||||||
|
<view class="center_poter" style="margin: 0 auto;" v-if="shows">
|
||||||
|
<!-- #ifndef MP -->
|
||||||
|
<image class="close_btn" src="/static/images/goods/close.png" @click="hidePoster">
|
||||||
|
</image>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef MP -->
|
||||||
|
<cover-image class="close_btn" src="/static/images/goods/close.png" @click="hidePoster">
|
||||||
|
</cover-image>
|
||||||
|
<!-- #endif -->
|
||||||
|
|
||||||
|
<!-- posterData： 海报数据 -->
|
||||||
|
<cc-beautyPoster :posterData="posterData"></cc-beautyPoster>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import uniPopup from '@/components/uni-popup/uni-popup.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
uniPopup
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
shows: false,
|
||||||
|
posterData: {
|
||||||
|
// 用户姓名
|
||||||
|
name: '小明',
|
||||||
|
// 用户头像
|
||||||
|
logo: '/static/images/headIcon.jpg',
|
||||||
|
// 商品名称
|
||||||
|
title: '精美时尚苹果手机一部',
|
||||||
|
// 商品价格
|
||||||
|
money: '5200.90',
|
||||||
|
// 商品图片(小程序需要换成自己服务器白名单设置的地址)
|
||||||
|
img: '/static/images/goods.jpg',
|
||||||
|
// 商品链接
|
||||||
|
url: 'https://www.apple.com.cn/iphone/'
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
//生成海报
|
||||||
|
openPoster() {
|
||||||
|
this.shows = false
|
||||||
|
uni.showLoading({
|
||||||
|
title: '海报绘制中..'
|
||||||
|
})
|
||||||
|
this.$refs.popup.open()
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.hideLoading()
|
||||||
|
this.shows = true
|
||||||
|
}, 400)
|
||||||
|
},
|
||||||
|
|
||||||
|
//关闭海报
|
||||||
|
hidePoster() {
|
||||||
|
this.$refs.popup.close()
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.center_poter {
|
||||||
|
position: relative;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
|
.close_btn {
|
||||||
|
width: 40upx;
|
||||||
|
height: 40upx;
|
||||||
|
background-color: rgba($color: #000000, $alpha: .3);
|
||||||
|
position: absolute;
|
||||||
|
top: 5upx;
|
||||||
|
right: 5upx;
|
||||||
|
z-index: 500;
|
||||||
|
padding: 5upx;
|
||||||
|
border-radius: 6upx;
|
||||||
|
z-index: 999;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
Loading…
Reference in New Issue