Merge branch 'test' of https://e.coding.net/g-cphe0354/duanju/new_app into dwb
This commit is contained in:
duan
commit
ac95858331
28
App.vue
28
App.vue
|
|
@ -1,9 +1,9 @@
|
|||
<script>
|
||||
import { init } from '@/api/init.js'
|
||||
import http from '@/http/http.js'
|
||||
import { init } from '@/api/init.js';
|
||||
import http from '@/http/http.js';
|
||||
export default {
|
||||
onLaunch: function () {
|
||||
console.log('App Launch')
|
||||
console.log('App Launch');
|
||||
// const systemInfo = uni.getSystemInfoSync();
|
||||
// const isA = systemInfo.platform === 'android'
|
||||
// if (isA) {
|
||||
|
|
@ -11,28 +11,28 @@ export default {
|
|||
// } else {
|
||||
// uni.setStorageSync('isAI', false)
|
||||
// }
|
||||
|
||||
},
|
||||
onShow: function () {
|
||||
init()
|
||||
init();
|
||||
// ios是否在审核
|
||||
http.request({
|
||||
url: '/common/type/919',
|
||||
}).then(res => {
|
||||
url: '/common/type/919'
|
||||
}).then((res) => {
|
||||
if (res.code == 0) {
|
||||
uni.setStorageSync('isExamine', res.data.value)
|
||||
uni.setStorageSync('isExamine', res.data.value);
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
onHide: function () {
|
||||
console.log('App Hide')
|
||||
console.log('App Hide');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/*每个页面公共css */
|
||||
@import "uview-plus/index.scss";
|
||||
@import "@/commons/style/common.scss";
|
||||
|
||||
ul,
|
||||
li {
|
||||
|
|
@ -119,4 +119,10 @@ web-view {
|
|||
top: 800rpx;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.u-image {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.u-status-bar {
|
||||
height: var(--status-bar-height);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -41,3 +41,13 @@ export const forgetPwd = (data) => {
|
|||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 绑定
|
||||
*/
|
||||
export const bind = (data) => {
|
||||
return http.request({
|
||||
url: '/Login/registerCode',
|
||||
method: 'POST',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
63
api/me/me.js
63
api/me/me.js
|
|
@ -9,4 +9,67 @@ export const selectByUserId = (data) => {
|
|||
data: data,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取客服微信
|
||||
*/
|
||||
export const commonType = (type) => {
|
||||
return http.request({
|
||||
url: `/common/type/${type}`,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 金币明细
|
||||
*/
|
||||
export const queryUserMoneyDetails = (data) => {
|
||||
return http.request({
|
||||
url: '/moneyDetails/queryUserMoneyDetails',
|
||||
method: 'GET',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 意见反馈
|
||||
*/
|
||||
export const sendMessage = (data) => {
|
||||
return http.request({
|
||||
url: '/message/sendMessage',
|
||||
method: 'POST',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 帮助中心
|
||||
*/
|
||||
export const selectHelpList = (data) => {
|
||||
return http.request({
|
||||
url: '/helpWord/selectHelpList',
|
||||
method: 'GET',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 个人中心数据
|
||||
*/
|
||||
export const collectVideoSummary = () => {
|
||||
return http.request({
|
||||
url: '/courseCollect/collectVideoSummary',
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 金币
|
||||
*/
|
||||
export const selectUserMoney = () => {
|
||||
return http.request({
|
||||
url: '/moneyDetails/selectUserMoney',
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import http from '@/http/http.js'
|
||||
|
||||
/**
|
||||
* 获取消息列表
|
||||
*/
|
||||
export const selectMessageByUserId = (data) => {
|
||||
return http.request({
|
||||
url: '/message/selectMessageByUserId',
|
||||
data: data,
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
import http from '@/http/http.js'
|
||||
|
||||
/**
|
||||
* 获取提现金额
|
||||
*/
|
||||
export const selectUserMoney = (data) => {
|
||||
return http.request({
|
||||
url: '/moneyDetails/selectUserMoney',
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取提现记录
|
||||
*/
|
||||
export const selectPayDetails = (data) => {
|
||||
return http.request({
|
||||
url: '/cash/selectPayDetails',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 红包明细记录
|
||||
*/
|
||||
export const queryUserMoneyDetails = (data) => {
|
||||
return http.request({
|
||||
url: '/moneyDetails/queryUserMoneyDetails',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 修改提现账号
|
||||
*/
|
||||
export const updateUser = (data) => {
|
||||
return http.request({
|
||||
url: '/user/updateUser',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取看广告状态
|
||||
*/
|
||||
export const canCash = (data) => {
|
||||
return http.request({
|
||||
url: '/cash/canCash',
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 广告状态修改
|
||||
*/
|
||||
export const state = (data) => {
|
||||
return http.request({
|
||||
url: '/ad/state',
|
||||
data: data,
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 广告状态修改
|
||||
*/
|
||||
export const withdraw = (data) => {
|
||||
return http.request({
|
||||
url: '/cash/withdraw',
|
||||
data: data,
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import http from '@/http/http.js'
|
||||
|
||||
/**
|
||||
* 获取已邀请列表
|
||||
*/
|
||||
export const selectInviteByUserIdLists = (data) => {
|
||||
return http.request({
|
||||
url: '/invite/selectInviteByUserIdLists',
|
||||
data: data,
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取邀请战绩
|
||||
*/
|
||||
export const selectInviteMoney = (data) => {
|
||||
return http.request({
|
||||
url: '/invite/selectInviteMoney',
|
||||
data: data,
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取海报数据
|
||||
*/
|
||||
export const selectBannerList = (data) => {
|
||||
return http.request({
|
||||
url: '/banner/selectBannerList',
|
||||
data: data,
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -8,4 +8,15 @@ export const selectUserById = (data) => {
|
|||
url: '/user/selectUserById',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改用户信息
|
||||
*/
|
||||
export const updateUsers = (data) => {
|
||||
return http.request({
|
||||
url: '/user/updateUsers',
|
||||
method: 'POST',
|
||||
data: data,
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
import http from '@/http/http.js'
|
||||
|
||||
//获取短剧视频详情
|
||||
export function getVideoDetail(data) {
|
||||
return http.request({
|
||||
url: 'course/courseSets?courseId='+data.courseId,
|
||||
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'
|
||||
}
|
||||
|
|
@ -17,7 +17,7 @@ export const AppConfig = {
|
|||
local: 'http://192.168.1.41:8100'
|
||||
}
|
||||
|
||||
function returnShareUrl(){
|
||||
export function returnShareUrl(){
|
||||
if(env==='test'){
|
||||
return 'https://video-h5.hnsiyao.cn'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,20 +1,832 @@
|
|||
<template>
|
||||
<view>
|
||||
|
||||
<!-- #ifdef H5 -->
|
||||
<view class=" w-full box" style="width: 100vw;">
|
||||
<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">
|
||||
<list-item-vue :total="list.length" :item="item"
|
||||
:isCommand="isCommand"
|
||||
:current="current" :isCollect="isCollect"
|
||||
@toDetail="toDetail(item,index)"
|
||||
@controlstoggles="controlstoggles" :playSpeeds="playSpeeds" :index="index" :nowIndex="nowIndex"
|
||||
@dianzanClick="dianzanClick(item,index)" @share="share(item)" @zhuijuClick="zhuijuClick(item)"
|
||||
@popupShow="popupShow"></list-item-vue>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<!-- #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>
|
||||
</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>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"my-video-list",
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
<script setup>
|
||||
// #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 {
|
||||
computed,
|
||||
reactive,
|
||||
ref,
|
||||
watch,
|
||||
nextTick,
|
||||
onMounted,
|
||||
getCurrentInstance
|
||||
} from 'vue';
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
[]
|
||||
}
|
||||
},
|
||||
isCommand:{
|
||||
type:Boolean,
|
||||
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
|
||||
})
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
function back() {
|
||||
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
|
||||
})
|
||||
|
||||
|
||||
function openBs() {
|
||||
|
||||
}
|
||||
|
||||
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() {
|
||||
if (JSON.stringify(props.current) !== '{}') {
|
||||
// #ifdef H5
|
||||
setVideoList(props.info.current)
|
||||
// #endif
|
||||
// #ifdef APP
|
||||
nextTick(() => {
|
||||
const index = props.list.findIndex(v => v.courseDetailsId == props.info.current.courseDetailsId)
|
||||
goListPosition(index)
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
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)
|
||||
|
||||
function openShowPay(current, index, videoUrl) {
|
||||
showControls.value = true
|
||||
}
|
||||
|
||||
|
||||
|
||||
function videoPlay(videoId, courseDetailsId) {
|
||||
|
||||
}
|
||||
|
||||
function ended() {
|
||||
|
||||
}
|
||||
|
||||
function share(item) {
|
||||
const urls = returnShareUrl() + '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item
|
||||
.courseDetailsId + '&invitation=' + uni.getStorageSync('invitationCode') + '&qdCode=' + this.qdCode;
|
||||
console.log(urls);
|
||||
posterData.img = item.titleImg
|
||||
posterData.show = true
|
||||
}
|
||||
|
||||
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) {
|
||||
console.log('e.detail.current');
|
||||
console.log(e.detail.current);
|
||||
current.value = e.detail.current
|
||||
const item = videoList.value[e.detail.current]
|
||||
insertHistory()
|
||||
setVideoList(item)
|
||||
}
|
||||
|
||||
|
||||
function setVideoList(item) {
|
||||
const listLen = props.list.length
|
||||
const lastIndex = listLen - 1
|
||||
const index = props.list.findIndex(v => v.courseDetailsId == item.courseDetailsId)
|
||||
nowIndex.value = index
|
||||
console.log('setVideoList nowIndex' + index);
|
||||
let position = ''
|
||||
if (index === 0) {
|
||||
position = 'start'
|
||||
}
|
||||
if (index === props.list.length - 1) {
|
||||
position = 'end'
|
||||
}
|
||||
if (current.value == 0) {
|
||||
if (position === 'start') {
|
||||
videoList.value = [item, props.list[index + 1], props.list[lastIndex]]
|
||||
} else if (position === 'end') {
|
||||
videoList.value = [item, props.list[0], props.list[lastIndex]]
|
||||
} else {
|
||||
videoList.value = [item, props.list[index + 1], props.list[index - 1]]
|
||||
}
|
||||
}
|
||||
if (current.value == 1) {
|
||||
if (position === 'start') {
|
||||
videoList.value = [props.list[lastIndex], item, props.list[index + 1]]
|
||||
} else if (position === 'end') {
|
||||
videoList.value = [props.list[lastIndex - 1], item, props.list[0]]
|
||||
} else {
|
||||
videoList.value = [props.list[index - 1], item, props.list[index + 1]]
|
||||
}
|
||||
}
|
||||
if (current.value == 2) {
|
||||
if (position === 'start') {
|
||||
videoList.value = [props.list[1], props.list[lastIndex], item]
|
||||
} else if (position === 'end') {
|
||||
videoList.value = [props.list[0], props.list[lastIndex - 1], item]
|
||||
} else {
|
||||
videoList.value = [props.list[index + 1], props.list[index - 1], item]
|
||||
}
|
||||
}
|
||||
console.log(videoList.value);
|
||||
if (!item.videoUrl) {
|
||||
popupShow('pay')
|
||||
}
|
||||
}
|
||||
|
||||
function transition(e) {
|
||||
if (e.detail.dy > 0) {
|
||||
//down
|
||||
} else {
|
||||
//up
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.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: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.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 {
|
||||
width: 80%;
|
||||
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 {
|
||||
width: 60rpx;
|
||||
position: absolute !important;
|
||||
right: 20rpx;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
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;
|
||||
}
|
||||
|
||||
&.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>
|
||||
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>
|
||||
15
http/http.js
15
http/http.js
|
|
@ -73,6 +73,11 @@ function commonsProcess(showLoading, httpReqCallback,isreturm) {
|
|||
isShowErrorToast = true;
|
||||
return Promise.reject(bodyData); // 跳转到catch函数
|
||||
}
|
||||
if (bodyData.code == 500) {
|
||||
// 提示信息
|
||||
isShowErrorToast = true;
|
||||
return Promise.reject(bodyData); // 跳转到catch函数
|
||||
}
|
||||
if (bodyData.code != 0) {
|
||||
infoBox.showToast(data.message);
|
||||
return;
|
||||
|
|
@ -85,12 +90,12 @@ function commonsProcess(showLoading, httpReqCallback,isreturm) {
|
|||
code: bodyData.code,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 构造请求成功的响应数据
|
||||
return Promise.resolve(bodyData.data || bodyData.page|| bodyData);
|
||||
})
|
||||
.catch((res) => {
|
||||
|
||||
|
||||
if (res.status == 404) {
|
||||
infoBox.showErrorToast("接口404").then(() => {});
|
||||
reject();
|
||||
|
|
@ -100,7 +105,7 @@ function commonsProcess(showLoading, httpReqCallback,isreturm) {
|
|||
if (res.code == 401) {
|
||||
infoBox.showErrorToast(res.message || "请登录").then(() => {
|
||||
uni.redirectTo({
|
||||
url: "/pages/login/index",
|
||||
url: "/pages/login/login",
|
||||
});
|
||||
reject();
|
||||
});
|
||||
|
|
@ -110,7 +115,7 @@ function commonsProcess(showLoading, httpReqCallback,isreturm) {
|
|||
reject();
|
||||
}
|
||||
if (res.code == 500) {
|
||||
infoBox.showErrorToast(res.message || "服务器异常").then(() => {});
|
||||
infoBox.showErrorToast(res.msg || "服务器异常").then(() => {});
|
||||
reject();
|
||||
}
|
||||
reqFinishFunc(); // 请求完毕的动作
|
||||
|
|
@ -162,7 +167,7 @@ function request(args) {
|
|||
result += encodeURIComponent(key) + '=' + encodeURIComponent(params[key]) + "&"
|
||||
}
|
||||
})
|
||||
url = url+'?'+result
|
||||
url = url+'?'+(result.slice(0,result.length-1))
|
||||
params = null
|
||||
}
|
||||
let headerObject = {}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
"appid" : "__UNI__E0B05B1",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"versionCode" : 100,
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
|
|
|
|||
79
pages.json
79
pages.json
|
|
@ -28,7 +28,7 @@
|
|||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
"path": "pages/task/index",
|
||||
"style": {
|
||||
|
|
@ -42,13 +42,47 @@
|
|||
"enablePullDownRefresh": true
|
||||
}
|
||||
}, {
|
||||
"path": "pages/watching_history/watching_history"
|
||||
"path": "pages/watching_history/watching_history",
|
||||
"style": {
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
}, {
|
||||
"path": "pages/me/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/me/contact",
|
||||
"style": {
|
||||
"navigationBarTitleText": "联系客服"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/me/gold_record",
|
||||
"style": {
|
||||
"navigationBarTitleText": "金币明细",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
}, {
|
||||
"path": "pages/me/feedback",
|
||||
"style": {
|
||||
"navigationBarTitleText": "意见反馈"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/me/help_center",
|
||||
"style": {
|
||||
"navigationBarTitleText": "帮助中心"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/me/setting",
|
||||
"style": {
|
||||
"navigationBarTitleText": "设置"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/me/help_center_detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
}, {
|
||||
"path": "pages/login/login",
|
||||
"style": {
|
||||
|
|
@ -61,6 +95,11 @@
|
|||
"navigationBarTitleText": "注册",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/login/bind",
|
||||
"style": {
|
||||
"navigationBarTitleText": "修改手机号"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/login/registerApp",
|
||||
"style": {
|
||||
|
|
@ -73,6 +112,11 @@
|
|||
"navigationBarTitleText": "忘记密码",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/login/download",
|
||||
"style": {
|
||||
"navigationBarTitleText": "下载"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/me/userInfo",
|
||||
"style": {
|
||||
|
|
@ -88,6 +132,37 @@
|
|||
"style": {
|
||||
"navigationBarTitleText": "服务协议"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/me/message",
|
||||
"style": {
|
||||
"navigationBarTitleText": "消息中心"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/me/withdraw/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "申请提现",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/me/withdraw/realName",
|
||||
"style": {
|
||||
"navigationBarTitleText": "实名认证"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/me/withdraw/alipay",
|
||||
"style": {
|
||||
"navigationBarTitleText": "提现账号"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/me/withdraw/moneyList",
|
||||
"style": {
|
||||
"navigationBarTitleText": "红包明细"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/share/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "分享"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/search/index",
|
||||
|
|
|
|||
|
|
@ -7,7 +7,12 @@
|
|||
<navigator class="more" url="/pages/watching_history/watching_history?type=3">更多</navigator>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="item" v-for="item in data.list1" :key="item.id">
|
||||
<view
|
||||
class="item"
|
||||
v-for="item in data.list1"
|
||||
:key="item.id"
|
||||
@click="linkTo(`/pages/video/detail?courseId=${item.courseId}&courseDetailsId=${item.courseDetailsId}`)"
|
||||
>
|
||||
<view class="cover">
|
||||
<image class="img" :src="item.titleImg" mode="aspectFill"></image>
|
||||
<view class="num">{{ item.courseDetailsName }}</view>
|
||||
|
|
@ -26,7 +31,12 @@
|
|||
<navigator class="more" url="/pages/watching_history/watching_history?type=1">更多</navigator>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="item" v-for="item in data.list2" :key="item.id">
|
||||
<view
|
||||
class="item"
|
||||
v-for="item in data.list2"
|
||||
:key="item.id"
|
||||
@click="linkTo(`/pages/video/detail?courseId=${item.courseId}&courseDetailsId=${item.courseDetailsId}`)"
|
||||
>
|
||||
<div class="item-content">
|
||||
<view class="cover">
|
||||
<image class="img" :src="item.titleImg" mode="aspectFill"></image>
|
||||
|
|
@ -48,17 +58,21 @@
|
|||
import { reactive } from 'vue';
|
||||
import { selectByUserId } from '@/api/me/me.js';
|
||||
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { linkTo } from '@/utils/app.js';
|
||||
|
||||
// 获取数据
|
||||
async function selectByUserIdAjax() {
|
||||
try {
|
||||
const res1 = await selectByUserId({ page: 1, limit: 6, classify: 3 });
|
||||
const res2 = await selectByUserId({ page: 1, limit: 6, classify: 6 });
|
||||
const res2 = await selectByUserId({ page: 1, limit: 6, classify: 1 });
|
||||
data.list1 = res1.records;
|
||||
data.list2 = res2.records;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
setTimeout(() => {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
const data = reactive({
|
||||
|
|
|
|||
|
|
@ -1,303 +0,0 @@
|
|||
<template>
|
||||
<view class="containersView">
|
||||
<div style="width: 100%;height: 85%;position: absolute;background: url('../../static/images/appeq_bg.png') no-repeat center bottom / cover;"></div>
|
||||
|
||||
<view style="text-align: center;position: relative;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;">
|
||||
<image style="width: 124rpx;height: 124rpx;margin-top: -920rpx;border-radius:20upx;" src="../../static/images/appLogo.png"></image>
|
||||
<view style="font-size: 40rpx;margin-top: 22rpx;color: #FFFFFF;font-weight: bold;">斯耀短剧APP</view>
|
||||
<view style="font-size: 28rpx;margin-top: 16rpx;color: #FFFFFF;font-weight: bold;">海量电子榨菜 免费又过瘾</view>
|
||||
<button class="confirm-btn" @click="taobaoLogin">{{confirmBtn}}</button>
|
||||
|
||||
</view>
|
||||
<view id="shareit" v-if="show_share" @tap="closeShare">
|
||||
<image class="arrow" src="https://renwu.xiansqx.com/img/20210813/9aa484db4c60458f86deb2a8ab6fe400.png">
|
||||
</image>
|
||||
<view id="follow">点击右上角按钮，选择浏览器打开下载！</view>
|
||||
</view>
|
||||
<!-- #ifdef H5 -->
|
||||
<div v-if="isWeixin" style="width: 100%;height: 100%;position: absolute;top: 0;background: url('../../static/images/open_guide.png') no-repeat center bottom / cover;"></div>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mobile: '',
|
||||
code: '',
|
||||
message: '',
|
||||
show_share: false,
|
||||
openShare: false,
|
||||
openShares: false,
|
||||
relationId: '',
|
||||
sending: false,
|
||||
confirmBtn: '斯耀短剧APP',
|
||||
isWeixin: false,
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
let u = navigator.userAgent;
|
||||
if ( u.indexOf('iPhone') > -1) {
|
||||
// #ifdef H5
|
||||
this.confirmBtn = "跳转网页版首页"
|
||||
// #endif
|
||||
}
|
||||
|
||||
if ( u.toLowerCase().indexOf('micromessenger') !== -1) {
|
||||
this.isWeixin = true
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
closeShare() {
|
||||
this.show_share = false;
|
||||
},
|
||||
taobaoLogin() {
|
||||
|
||||
var u = navigator.userAgent;
|
||||
if (u.indexOf('Android') > -1 || u.indexOf('Adr') > -1) {
|
||||
this.$Request.get('/app/common/type/49').then(res => {
|
||||
if (res.code === 0) {
|
||||
if (res.data && res.data.value) {
|
||||
if (this.openShare) {
|
||||
let ua = navigator.userAgent.toLowerCase();
|
||||
if (ua.indexOf('micromessenger') === -1) {
|
||||
this.show_share = false;
|
||||
// #ifndef H5
|
||||
plus.runtime.openURL(res.data.value, function(res) {
|
||||
|
||||
});
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
window.location.href = res.data.value;
|
||||
// #endif
|
||||
} else {
|
||||
this.show_share = true;
|
||||
}
|
||||
|
||||
} else {
|
||||
// #ifndef H5
|
||||
plus.runtime.openURL(res.data.value, function(res) {
|
||||
|
||||
});
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
uni.setClipboardData({
|
||||
data: res.data.value,
|
||||
success: r => {
|
||||
// this.$queue.showToast('邀请码复制成功');
|
||||
}
|
||||
});
|
||||
window.location.href = res.data.value;
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
|
||||
this.$Request.get('/app/common/type/50').then(res => {
|
||||
if (res.code === 0) {
|
||||
if (res.data && res.data.value) {
|
||||
if (this.openShares) {
|
||||
let ua = navigator.userAgent.toLowerCase();
|
||||
if (ua.indexOf('micromessenger') === -1) {
|
||||
this.show_share = false;
|
||||
// #ifndef H5
|
||||
plus.runtime.openURL(res.data.value, function(res) {
|
||||
|
||||
});
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
window.location.href = res.data.value;
|
||||
// uni.switchTab({
|
||||
// url: 'pages/index/index'
|
||||
// })
|
||||
// #endif
|
||||
} else {
|
||||
this.show_share = true;
|
||||
}
|
||||
} else {
|
||||
// #ifndef H5
|
||||
plus.runtime.openURL(res.data.value, function(res) {
|
||||
|
||||
});
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
uni.setClipboardData({
|
||||
data: res.data.value,
|
||||
success: r => {
|
||||
// this.$queue.showToast('邀请码复制成功');
|
||||
}
|
||||
});
|
||||
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
// window.location.href = res.data.value;
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
uni-page-body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.containersView {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#shareit {
|
||||
-webkit-user-select: none;
|
||||
position: fixed;
|
||||
/*width: 100%;*/
|
||||
height: 2000px;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
text-align: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
#shareit img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
top: 1%;
|
||||
}
|
||||
|
||||
#follow {
|
||||
margin-right: 60px;
|
||||
margin-left: 30px;
|
||||
width: 90%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
float: left;
|
||||
margin-top: 160px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding-left: 140upx;
|
||||
margin-top: 32upx;
|
||||
font-size: 24upx;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.send-msg {
|
||||
border-radius: 30px;
|
||||
color: black;
|
||||
background: white;
|
||||
height: 30px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.container {
|
||||
top: 0;
|
||||
padding-top: 50px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
position: relative;
|
||||
z-index: 90;
|
||||
background: #fff;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
.right-top-sign {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: -15px;
|
||||
z-index: 95;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
display: block;
|
||||
content: '';
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
background: #e10a07;
|
||||
}
|
||||
|
||||
&:before {
|
||||
transform: rotate(50deg);
|
||||
border-radius: 0 50px 0 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
right: -198px;
|
||||
top: 0;
|
||||
transform: rotate(-50deg);
|
||||
border-radius: 50px 0 0 0;
|
||||
/* background: pink; */
|
||||
}
|
||||
}
|
||||
|
||||
.left-bottom-sign {
|
||||
position: absolute;
|
||||
left: -270px;
|
||||
bottom: -320px;
|
||||
/*border: 100upx solid #d0d1fd;*/
|
||||
border-radius: 50%;
|
||||
padding: 90px;
|
||||
}
|
||||
|
||||
.welcome {
|
||||
position: relative;
|
||||
left: 30px;
|
||||
top: -55px;
|
||||
font-size: 28px;
|
||||
color: #555;
|
||||
text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.input-content {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 416rpx;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
background: #FD5775;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 70rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,27 +1,26 @@
|
|||
<template>
|
||||
<view class="containerView">
|
||||
<view class="cu-form-group"
|
||||
style="margin: 30upx;border: 2upx solid whitesmoke;margin-bottom: 20px;border-radius: 30px">
|
||||
<view class="container">
|
||||
<view class="cu-form-group" >
|
||||
<view class="title">手机号</view>
|
||||
<input type="number" :value="mobile" placeholder="请输入手机号" maxlength="11" data-key="mobile"
|
||||
<input type="number" :value="data.mobile" placeholder="请输入手机号" maxlength="11" data-key="mobile"
|
||||
@input="inputChange" />
|
||||
</view>
|
||||
<view class="cu-form-group"
|
||||
style="margin: 30upx;border: 2upx solid whitesmoke;margin-bottom: 20px;border-radius: 30px">
|
||||
<view class="cu-form-group" >
|
||||
<text class="title">验证码</text>
|
||||
<input type="number" :value="code" placeholder="请输入验证码" maxlength="6" data-key="code" @input="inputChange"
|
||||
<input type="number" :value="data.code" placeholder="请输入验证码" maxlength="6" data-key="code" @input="inputChange"
|
||||
@confirm="toLogin" />
|
||||
<button class="send-msg" @click="sendMsg" :disabled="sendIng">{{ sendTime }}</button>
|
||||
<button class="send-msg" @click="sendMsg" :disabled="data.sendIng">{{ data.sendTime }}</button>
|
||||
</view>
|
||||
|
||||
<button class="confirm-btn" @click="toLogin" :disabled="loginIng">立即绑定</button>
|
||||
<button class="confirm-btn" @click="toLogin">立即绑定</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { onLoad} from '@dcloudio/uni-app'
|
||||
import {setSendMsg,forgetPwd} from '@/api/login/login.js';
|
||||
import { setSendMsg, bind} from '@/api/login/login.js';
|
||||
|
||||
let data = reactive({
|
||||
mobile: '',
|
||||
code: '',
|
||||
|
|
@ -30,8 +29,7 @@
|
|||
sendTime: '获取验证码',
|
||||
count: 60,
|
||||
type: '',
|
||||
})
|
||||
|
||||
})
|
||||
onLoad((option) => {
|
||||
if (option.type) {
|
||||
data.type = option.type
|
||||
|
|
@ -55,140 +53,147 @@
|
|||
data.count = count - 1;
|
||||
data.sendIng = true;
|
||||
data.sendTime = count - 1 + '秒后重新获取';
|
||||
setTimeout(data.countDown.bind(data), 1000);
|
||||
setTimeout(countDown.bind(this), 1000);
|
||||
}
|
||||
}
|
||||
|
||||
function sendMsg() {
|
||||
const {
|
||||
mobile
|
||||
} = data;
|
||||
if (!mobile) {
|
||||
data.$queue.showToast("请输入手机号");
|
||||
async function sendMsg() {
|
||||
const { mobile } = data;
|
||||
if (!data.mobile) {
|
||||
uni.showToast({ title: '请输入手机号', icon: 'none', })
|
||||
} else if (mobile.length !== 11) {
|
||||
data.$queue.showToast("请输入正确的手机号");
|
||||
uni.showToast({ title: '请输入正确的手机号', icon: 'none', })
|
||||
} else {
|
||||
data.$queue.showLoading("正在发送验证码...");
|
||||
http.request({
|
||||
url: 'app/Login/sendMsg/' + mobile + '/gzg',
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
data.sendIng = true;
|
||||
uni.showToast({ title: '验证码发送成功请注意查收', icon: 'none', })
|
||||
data.countDown();
|
||||
} else {
|
||||
uni.showModal({
|
||||
showCancel: false,
|
||||
title: '短信发送失败',
|
||||
content: res.msg ? res.msg : '请一分钟后再获取验证码'
|
||||
});
|
||||
}
|
||||
|
||||
uni.hideLoading();
|
||||
uni.showLoading({
|
||||
title: '正在发送验证码...'
|
||||
})
|
||||
let res = await setSendMsg(data.mobile,'gzg')
|
||||
uni.hideLoading();
|
||||
console.log(res)
|
||||
if (res.code == 0) {
|
||||
data.sendIng = true;
|
||||
uni.showToast({ title: '验证码发送成功请注意查收', icon: 'none', })
|
||||
countDown();
|
||||
} else {
|
||||
uni.showModal({
|
||||
showCancel: false,
|
||||
title: '短信发送失败',
|
||||
content: res.msg ? res.msg : '请一分钟后再获取验证码'
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function toLogin() {
|
||||
async function toLogin() {
|
||||
const {
|
||||
mobile,
|
||||
code
|
||||
} = data;
|
||||
let userId = this.$queue.getData("userId");
|
||||
if (!mobile) {
|
||||
if (!data.mobile) {
|
||||
uni.showToast({ title: '请输入手机号', icon: 'none', })
|
||||
} else if (mobile.length !== 11) {
|
||||
} else if (data.mobile.length !== 11) {
|
||||
uni.showToast({ title: '请输入正确的手机号', icon: 'none', })
|
||||
} else if (!code) {
|
||||
} else if (!data.code) {
|
||||
uni.showToast({ title: '请输入验证码', icon: 'none', })
|
||||
} else {
|
||||
uni.showLoading({ title: '正在绑定中...' })
|
||||
let openId = this.$queue.getData('openId') ? this.$queue.getData('openId') : '';
|
||||
let openidnickname = this.$queue.getData('openidnickname') ? this.$queue.getData('openidnickname') :
|
||||
'';
|
||||
let openidheadimgurl = this.$queue.getData('openidheadimgurl') ? this.$queue.getData(
|
||||
'openidheadimgurl') : '';
|
||||
let invitation = this.$queue.getData('inviterCode') ? this.$queue.getData('inviterCode') : '';
|
||||
let userId = this.$queue.getData('userId') ? this.$queue.getData('userId') : '';
|
||||
|
||||
http.request({
|
||||
url: `app/Login/registerCode`,
|
||||
method: 'post',
|
||||
data: {
|
||||
let res = await bind({
|
||||
phone: mobile,
|
||||
wxId: openId,
|
||||
userId: userId,
|
||||
inviterCode: invitation,
|
||||
avatar: openidheadimgurl,
|
||||
userName: openidnickname,
|
||||
// wxId: openId,
|
||||
// userId: userId,
|
||||
// inviterCode: invitation,
|
||||
// avatar: openidheadimgurl,
|
||||
// userName: openidnickname,
|
||||
msg: code
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$queue.setData("token", res.token);
|
||||
this.$queue.setData('userId', res.user.userId);
|
||||
this.$queue.setData('userName', res.user.userName);
|
||||
this.$queue.setData('phone', res.user.phone);
|
||||
this.$queue.setData('avatar', res.user.avatar ? res.user.avatar :
|
||||
'../../static/logo.png');
|
||||
this.$queue.showToast('绑定成功');
|
||||
uni.showToast({ title: '绑定成功', icon: 'none', })
|
||||
setTimeout(function() {
|
||||
uni.navigateBack()
|
||||
}, 1000)
|
||||
} else {
|
||||
uni.showModal({
|
||||
showCancel: false,
|
||||
title: '绑定失败',
|
||||
content: res.msg,
|
||||
});
|
||||
}
|
||||
uni.hideLoading();
|
||||
});
|
||||
})
|
||||
uni.hideLoading();
|
||||
|
||||
uni.setStorageSync('token', res.token)
|
||||
uni.setStorageSync('userInfo', res.user)
|
||||
uni.showToast({ title: '绑定成功', icon: 'none', })
|
||||
setTimeout(function() {
|
||||
uni.navigateBack()
|
||||
}, 1000)
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
<style lang='scss' scoped>
|
||||
page {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.send-msg {
|
||||
border-radius: 30px;
|
||||
color: white;
|
||||
height: 30px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
background: #557EFD;
|
||||
}
|
||||
|
||||
.containerView {
|
||||
top: 0;
|
||||
padding-top: 32upx;
|
||||
|
||||
.container {
|
||||
padding-top: 32rpx;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
}
|
||||
.cu-form-group{
|
||||
background-color: #ffffff;
|
||||
padding: 1rpx 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 80rpx;
|
||||
justify-content: space-between;
|
||||
margin: 30rpx;
|
||||
border: 2rpx solid whitesmoke;
|
||||
margin-bottom: 40rpx;
|
||||
border-radius: 60rpx
|
||||
|
||||
}
|
||||
.title{
|
||||
text-align: justify;
|
||||
padding-right: 30rpx;
|
||||
font-size: 30rpx;
|
||||
position: relative;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
uni-input{
|
||||
flex: 1;
|
||||
font-size: 15px;
|
||||
color: #555;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.send-msg {
|
||||
border-radius: 30px;
|
||||
color: white;
|
||||
height: 30px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
background: #ff7581;
|
||||
padding: 0 30rpx;
|
||||
border: none;
|
||||
&:after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.confirm-btn {
|
||||
width: 600upx;
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
border-radius: 60upx;
|
||||
margin-top: 32upx;
|
||||
background: #557EFD;
|
||||
width: 300px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
border-radius: 30px;
|
||||
margin-top: 70px;
|
||||
background: #ff7581;
|
||||
color: #ffffff;
|
||||
font-size: 32upx;
|
||||
|
||||
font-size: 16px;
|
||||
margin: 0 auto;
|
||||
&:after {
|
||||
border-radius: 60px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
<template>
|
||||
<view class="containers">
|
||||
<div class="bg" style="background: url('/static/download/appeq_bg.png') no-repeat center bottom / cover;"></div>
|
||||
|
||||
<view class="content">
|
||||
<image class="logo" src="/static/download/appLogo.png"></image>
|
||||
<view style="font-size: 40rpx;margin-top: 22rpx;color: #FFFFFF;font-weight: bold;">斯耀短剧APP</view>
|
||||
<view style="font-size: 28rpx;margin-top: 16rpx;color: #FFFFFF;font-weight: bold;">海量电子榨菜 免费又过瘾</view>
|
||||
<button class="confirm-btn" @click="download">{{data.confirmBtn}}</button>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- #ifdef H5 -->
|
||||
<div v-if="data.isWeixin" style="width: 100%;height: 100%;position: absolute;top: 0;background: url('/static/download/open_guide.png') no-repeat center bottom / cover;"></div>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { onLoad} from '@dcloudio/uni-app'
|
||||
import { commonType } from '@/api/init.js';
|
||||
|
||||
let data = reactive({
|
||||
openShare: false,
|
||||
openShares: false,
|
||||
confirmBtn: '斯耀短剧APP',
|
||||
isWeixin: false,
|
||||
})
|
||||
|
||||
onLoad(() => {
|
||||
let u = navigator.userAgent;
|
||||
if ( u.indexOf('iPhone') > -1) {
|
||||
// #ifdef H5
|
||||
data.confirmBtn = "跳转网页版首页"
|
||||
// #endif
|
||||
}
|
||||
|
||||
if ( u.toLowerCase().indexOf('micromessenger') !== -1) {
|
||||
data.isWeixin = true
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
function download() {
|
||||
var u = navigator.userAgent;
|
||||
if (u.indexOf('Android') > -1 || u.indexOf('Adr') > -1) {
|
||||
commonType(49).then(res => {
|
||||
if (res.code === 0) {
|
||||
if (res.data && res.data.value) {
|
||||
// #ifndef H5
|
||||
plus.runtime.openURL(res.data.value, function(res) {
|
||||
|
||||
});
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
uni.setClipboardData({
|
||||
data: res.data.value,
|
||||
success: r => {
|
||||
// this.$queue.showToast('邀请码复制成功');
|
||||
uni.showToast({
|
||||
title: '邀请码复制成功',
|
||||
icon: 'none',
|
||||
});
|
||||
}
|
||||
});
|
||||
window.location.href = res.data.value;
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
commonType(50).then(res => {
|
||||
if (res.code === 0) {
|
||||
if (res.data && res.data.value) {
|
||||
// #ifndef H5
|
||||
plus.runtime.openURL(res.data.value, function(res) {
|
||||
|
||||
});
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
uni.setClipboardData({
|
||||
data: res.data.value,
|
||||
success: r => {
|
||||
uni.showToast({
|
||||
title: '邀请码复制成功',
|
||||
icon: 'none',
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
// window.location.href = res.data.value;
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
uni-page-body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.containers {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.bg{
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
position: absolute;
|
||||
}
|
||||
.content{
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.logo{
|
||||
width: 124rpx;
|
||||
height: 124rpx;
|
||||
margin-top: -920rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 416rpx;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
background: #FD5775;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 70rpx;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<view class="nav" style="width: 100%;height: 96rpx;"></view>
|
||||
<view class="bg" >
|
||||
<image src="../../static/default/i_bg.png" style="width: 100%;height:100%" mode="aspectFill"></image>
|
||||
</view>
|
||||
|
|
@ -74,7 +75,7 @@
|
|||
title: '验证码发送成功请注意查收',
|
||||
icon: 'none',
|
||||
})
|
||||
data.countDown();
|
||||
countDown();
|
||||
} else {
|
||||
uni.showModal({
|
||||
showCancel: false,
|
||||
|
|
@ -98,7 +99,7 @@
|
|||
data.count = count - 1;
|
||||
data.sending = true;
|
||||
data.sendTime = count - 1 + '秒后重新获取';
|
||||
setTimeout(data.countDown.bind(data), 1000);
|
||||
setTimeout(countDown.bind(this), 1000);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -179,9 +180,7 @@
|
|||
padding-top: 48rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.footerView {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -214,6 +213,8 @@
|
|||
color: #EC6F48;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.send-msg::after{
|
||||
border: none;
|
||||
|
|
@ -258,6 +259,9 @@
|
|||
background-color: #fff;
|
||||
align-items: center;
|
||||
padding: 22rpx 32rpx 22rpx 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<view class="nav" style="width: 100%;height: 96rpx;"></view>
|
||||
<view class="bg" >
|
||||
<image src="../../static/default/i_bg.png" style="width: 100%;height:100%" mode="aspectFill"></image>
|
||||
</view>
|
||||
|
|
@ -18,14 +19,14 @@
|
|||
<view class="input flex" style="padding-left: 0;">
|
||||
<input class="input" type="password" :value="data.password" placeholder="请输入密码" placeholder-class="input-empty"
|
||||
maxlength="20" minlength="6" data-key="password" @input="inputChange" @confirm="toLogin" />
|
||||
<text class="send-msg" @click="forget" style="flex-shrink: 0;">忘记密码</text>
|
||||
<text class="send-msg" @click="linkTo('/pages/login/forgetPwd')" style="flex-shrink: 0;">忘记密码</text>
|
||||
</view>
|
||||
</view>
|
||||
<button class="confirm-btn" @click="toLogin">登录</button>
|
||||
<view style="margin-top: 32px;text-align: center">
|
||||
<view>
|
||||
没有账号？
|
||||
<text style="color: #ff7581" @click="register()">立即注册</text>
|
||||
<text style="color: #ff7581" @click="linkTo('/pages/login/register')">立即注册</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -35,9 +36,9 @@
|
|||
</u-checkbox-group>
|
||||
<view>同意</view>
|
||||
<!-- 协议地址 -->
|
||||
<navigator url="/pages/me/privacy" open-type="navigate">《隐私政策》</navigator>
|
||||
<view @click="linkTo('/pages/me/privacy')">《隐私政策》</view>
|
||||
和
|
||||
<navigator url="/pages/me/agreement" open-type="navigate">《用户服务协议》</navigator>
|
||||
<view @click="linkTo('/pages/me/agreement')">《用户服务协议》</view>
|
||||
</view>
|
||||
|
||||
<u-toast ref="uToast" />
|
||||
|
|
@ -49,6 +50,7 @@
|
|||
import { reactive } from 'vue';
|
||||
import { onLoad} from '@dcloudio/uni-app'
|
||||
import { login } from '@/api/login/login.js';
|
||||
import { linkTo } from '@/utils/app.js';
|
||||
let data = reactive({
|
||||
mobile: '',
|
||||
password: '',
|
||||
|
|
@ -59,24 +61,6 @@
|
|||
|
||||
})
|
||||
|
||||
/**
|
||||
* 注册
|
||||
*/
|
||||
function register () {
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/register'
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 忘记密码
|
||||
*/
|
||||
function forget () {
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/forgetPwd'
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取手机号/密码
|
||||
*/
|
||||
|
|
@ -130,17 +114,19 @@
|
|||
})
|
||||
console.log(res)
|
||||
uni.setStorageSync('token', res.token)
|
||||
uni.setStorageSync('userId', res.user.userId)
|
||||
uni.setStorageSync('userName', res.user.userName)
|
||||
uni.setStorageSync('avatar', res.user.avatar ? res.user.avatar : '../../static/default/avatar.png')
|
||||
uni.setStorageSync('phone', res.user.phone)
|
||||
uni.setStorageSync('invitationCode', res.user.invitationCode)
|
||||
uni.setStorageSync('sex', res.user.sex)
|
||||
uni.setStorageSync('userId', res.user.userId)
|
||||
uni.setStorageSync('userInfo', res.user)
|
||||
|
||||
// uni.setStorageSync('userId', res.user.userId)
|
||||
// uni.setStorageSync('userName', res.user.userName)
|
||||
// uni.setStorageSync('avatar', res.user.avatar ? res.user.avatar : '../../static/default/avatar.png')
|
||||
// uni.setStorageSync('phone', res.user.phone)
|
||||
// uni.setStorageSync('invitationCode', res.user.invitationCode)
|
||||
// uni.setStorageSync('sex', res.user.sex)
|
||||
// uni.setStorageSync('userId', res.user.userId)
|
||||
//设置渠道码
|
||||
if (res.user.qdCode) {
|
||||
uni.setStorageSync('qdCode', res.user.qdCode)
|
||||
}
|
||||
// if (res.user.qdCode) {
|
||||
// uni.setStorageSync('qdCode', res.user.qdCode)
|
||||
// }
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '登录成功',
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<view class="nav" style="width: 100%;height: 96rpx;"></view>
|
||||
<view class="bg" >
|
||||
<image src="../../static/default/i_bg.png" style="width: 100%;height:100%" mode="aspectFill"></image>
|
||||
</view>
|
||||
|
|
@ -35,9 +36,10 @@
|
|||
</u-checkbox-group>
|
||||
<view>注册即同意</view>
|
||||
<!-- 协议地址 -->
|
||||
<navigator url="/pages/me/privacy" open-type="navigate" style="color: #37A6FF;">《隐私政策》</navigator>
|
||||
与
|
||||
<navigator url="/pages/me/agreement" open-type="navigate" style="color: #37A6FF;">《用户协议》</navigator>
|
||||
<view @click="linkTo('/pages/me/privacy')" style="color: #37A6FF;">《隐私政策》</view>
|
||||
和
|
||||
<view @click="linkTo('/pages/me/agreement')" style="color: #37A6FF;">《用户服务协议》</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -48,7 +50,7 @@
|
|||
import { onLoad} from '@dcloudio/uni-app'
|
||||
import {setSendMsg,registerCode} from '@/api/login/login.js';
|
||||
import {commonType} from '@/api/init.js';
|
||||
|
||||
import { linkTo } from '@/utils/app.js';
|
||||
|
||||
let data = reactive({
|
||||
code: '',
|
||||
|
|
@ -81,13 +83,11 @@
|
|||
uni.showToast({
|
||||
title: '请输入手机号',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
} else if (data.mobile.length !== 11) {
|
||||
uni.showToast({
|
||||
title: '请输入正确的手机号',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
} else {
|
||||
uni.showLoading({
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
data.countDown();
|
||||
countDown();
|
||||
} else {
|
||||
uni.showModal({
|
||||
showCancel: false,
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
data.count = count - 1;
|
||||
data.sending = true;
|
||||
data.sendTime = count - 1 + '秒后重新获取';
|
||||
setTimeout(data.countDown.bind(data), 1000);
|
||||
setTimeout(countDown.bind(this), 1000);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -374,6 +374,9 @@
|
|||
background-color: #fff;
|
||||
align-items: center;
|
||||
padding: 22rpx 32rpx 22rpx 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,8 +11,6 @@
|
|||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import config from '@/commons/config.js';
|
||||
import {selectUserById} from '@/api/user/user.js';
|
||||
import {commonType} from '@/api/init.js';
|
||||
|
||||
let data = reactive({
|
||||
|
|
|
|||
|
|
@ -0,0 +1,74 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<view class="card">
|
||||
<view class="title">
|
||||
<view class="t1">添加客服微信咨询</view>
|
||||
<view class="t2">{{ info.wx }}</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<image class="img" :src="info.qrcode" mode="widthFix" @click="checkQrcode"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { commonType } from '@/api/me/me.js';
|
||||
|
||||
const info = ref({});
|
||||
async function commonTypeAjax() {
|
||||
try {
|
||||
const res1 = await commonType(205);
|
||||
const res2 = await commonType(207);
|
||||
info.value.wx = res2.value;
|
||||
info.value.qrcode = res1.value;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
// 预览二维码
|
||||
function checkQrcode() {
|
||||
uni.previewImage({
|
||||
urls: [info.value.qrcode]
|
||||
});
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
commonTypeAjax();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.container {
|
||||
padding: 28upx;
|
||||
}
|
||||
.card {
|
||||
padding: 28upx;
|
||||
border-radius: 20upx;
|
||||
background-color: #fff;
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
.t1 {
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 28upx;
|
||||
.img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<view class="card">
|
||||
<view class="title-wrap">
|
||||
<view class="title">问题和意见</view>
|
||||
<view class="right" @click="showSheet = true">快速键入</view>
|
||||
</view>
|
||||
<view class="ipt-wrap">
|
||||
<up-textarea v-model="form.content" placeholder="请详细描述你的问题和意见..." count></up-textarea>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view class="title-wrap">
|
||||
<view class="title">QQ/邮箱</view>
|
||||
</view>
|
||||
<view class="ipt-wrap">
|
||||
<up-input v-model="form.contact" placeholder="方便我们联系你 " count></up-input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn">
|
||||
<up-button color="#ff7581" :loading="loaing" loading-text="提交中..." @click="confirmHandle">提交</up-button>
|
||||
</view>
|
||||
<up-action-sheet
|
||||
:actions="list"
|
||||
:show="showSheet"
|
||||
cancelText="取消"
|
||||
closeOnClickAction
|
||||
closeOnClickOverlay
|
||||
@close="showSheet = false"
|
||||
@select="selectSheet"
|
||||
></up-action-sheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { sendMessage } from '@/api/me/me.js';
|
||||
|
||||
const list = ref([
|
||||
{
|
||||
name: '界面显示错乱'
|
||||
},
|
||||
{
|
||||
name: '启动缓慢，卡出翔了'
|
||||
},
|
||||
{
|
||||
name: 'UI无法直视，丑哭了'
|
||||
},
|
||||
{
|
||||
name: '偶发性崩溃'
|
||||
}
|
||||
]);
|
||||
const showSheet = ref(false);
|
||||
|
||||
const loaing = ref(false);
|
||||
const form = reactive({
|
||||
content: '',
|
||||
contact: ''
|
||||
});
|
||||
|
||||
function selectSheet(e) {
|
||||
if (!form.content.length) {
|
||||
form.content = e.name;
|
||||
} else {
|
||||
form.content += `、${e.name}`;
|
||||
}
|
||||
}
|
||||
|
||||
// 提交
|
||||
async function confirmHandle() {
|
||||
try {
|
||||
if (!form.content) {
|
||||
uni.showToast({
|
||||
title: '请输入内容',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!form.contact) {
|
||||
uni.showToast({
|
||||
title: '请输入联系方式',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
loaing.value = true;
|
||||
await sendMessage({
|
||||
content: JSON.stringify({ score: 5, ...form }),
|
||||
state: 2,
|
||||
title: form.contact
|
||||
});
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'none',
|
||||
mask: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1000);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
loaing.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 0 20upx;
|
||||
font-size: 28upx;
|
||||
}
|
||||
.card {
|
||||
margin-bottom: 28upx;
|
||||
.title-wrap {
|
||||
padding: 28upx 0;
|
||||
color: #999;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
padding: 28upx 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<view class="list">
|
||||
<view class="item" v-for="item in listData.list" :key="item.id">
|
||||
<view class="row">类型：{{ item.title }}</view>
|
||||
<view class="row">内容：{{ item.content }}</view>
|
||||
<view class="row">时间：{{ item.createTime }}</view>
|
||||
<view class="btm">+{{ item.money }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<emprty-card v-if="!listData.list.length && listData.status == 'nomore'" />
|
||||
<up-loadmore :status="listData.status" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
|
||||
import { queryUserMoneyDetails } from '@/api/me/me.js';
|
||||
|
||||
const listData = reactive({
|
||||
list: [],
|
||||
page: 1,
|
||||
size: 10,
|
||||
status: 'loading'
|
||||
});
|
||||
|
||||
async function getList() {
|
||||
try {
|
||||
const res = await queryUserMoneyDetails({
|
||||
page: listData.page,
|
||||
limit: listData.size,
|
||||
moneyType: 2,
|
||||
viewType: 2
|
||||
});
|
||||
if (listData.page == 1) {
|
||||
listData.list = res.records;
|
||||
} else {
|
||||
listData.list.push(...res.records);
|
||||
}
|
||||
if (res.currPage >= res.totalPage) {
|
||||
listData.status = 'nomore';
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
setTimeout(() => {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// 监听下拉结束
|
||||
onPullDownRefresh(() => {
|
||||
listData.page = 1;
|
||||
listData.status = 'loading';
|
||||
getList();
|
||||
});
|
||||
|
||||
onLoad((e) => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 28upx;
|
||||
}
|
||||
.list {
|
||||
.item {
|
||||
padding: 28upx;
|
||||
border-radius: 20upx;
|
||||
margin-bottom: 28upx;
|
||||
background: #fff;
|
||||
.row {
|
||||
margin-bottom: 4px;
|
||||
font-size: 28upx;
|
||||
}
|
||||
.btm {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
color: rgb(253, 100, 22);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<up-collapse accordion>
|
||||
<up-collapse-item :title="item.helpClassifyName" :name="item.helpClassifyId" v-for="item in list" :key="item.helpClassifyId">
|
||||
<view class="row-wrap">
|
||||
<view class="u-collapse-content row" v-for="val in item.helpWordList" :key="val.helpWordId" @click="toHelpDetal(val)">
|
||||
{{ val.helpWordTitle }}
|
||||
</view>
|
||||
</view>
|
||||
</up-collapse-item>
|
||||
</up-collapse>
|
||||
<view class="footer-wrap">
|
||||
<view class="footer">
|
||||
<view class="item" @click="linkTo('/pages/me/contact')">
|
||||
<up-icon name="email" size="24" />
|
||||
联系客服
|
||||
</view>
|
||||
<view class="item" @click="linkTo('/pages/me/feedback')">
|
||||
<up-icon name="edit-pen" size="24" />
|
||||
意见反馈
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { selectHelpList } from '@/api/me/me.js';
|
||||
import { linkTo } from '@/utils/app.js';
|
||||
|
||||
// 获取帮助中心列表
|
||||
const list = ref([]);
|
||||
async function selectHelpListAjax() {
|
||||
try {
|
||||
const res = await selectHelpList({ types: 1 });
|
||||
list.value = res;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
function toHelpDetal(item) {
|
||||
uni.setStorageSync('helpDetail', item);
|
||||
linkTo('/pages/me/help_center_detail');
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
selectHelpListAjax();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.footer-wrap {
|
||||
padding: 28upx;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
.footer {
|
||||
background-color: #f5f5f5;
|
||||
height: 108upx;
|
||||
display: flex;
|
||||
border-radius: 20upx;
|
||||
.item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
position: relative;
|
||||
&:first-child {
|
||||
&::after {
|
||||
content: '';
|
||||
height: 20upx;
|
||||
border-right: 1upx solid #999;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
margin-top: -10upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<rich-text :nodes="content.helpWordContent"></rich-text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
|
||||
const content = ref('');
|
||||
|
||||
onLoad(() => {
|
||||
content.value = uni.getStorageSync('helpDetail');
|
||||
const regex = new RegExp('img', 'gi');
|
||||
content.value.helpWordContent = content.value.helpWordContent.replace(regex, `img style="width:100%;"`);
|
||||
uni.setNavigationBarTitle({
|
||||
title: content.value.helpWordTitle
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 28upx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,29 +9,31 @@
|
|||
<image class="img" src="/static/logo.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="quick-menu">
|
||||
<image class="icon" src="/static/me/logo_btn1.png" mode="aspectFit"></image>
|
||||
<image class="icon" src="/static/me/logo_btn2.png" mode="aspectFit"></image>
|
||||
<image class="icon" src="/static/me/logo_btn3.png" mode="aspectFit"></image>
|
||||
<image class="icon" src="/static/me/logo_btn1.png" mode="aspectFit" @click="linkTo('/pages/share/index')"></image>
|
||||
<image class="icon" src="/static/me/logo_btn2.png" mode="aspectFit" @click="linkTo('/pages/me/message', true)"></image>
|
||||
<navigator hover-class="none" url="/pages/me/contact">
|
||||
<image class="icon" src="/static/me/logo_btn3.png" mode="aspectFit"></image>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
<view class="top">
|
||||
<image class="avatar" src="/static/default_avatar.png" mode="aspectFill"></image>
|
||||
<view class="top" @click="linkTo('/pages/me/userInfo')">
|
||||
<image class="avatar" :src="userInfo.avatar || '/static/default_avatar.png'" mode="aspectFill"></image>
|
||||
<view class="info-wrap">
|
||||
<view class="name">159****3331</view>
|
||||
<view class="name">{{ userInfo.phone || '请登录' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btm">
|
||||
<view class="item">
|
||||
<navigator class="item" hover-class="none" url="/pages/watching_history/watching_history?type=2">
|
||||
<view class="title">我的喜欢</view>
|
||||
<view class="num">0</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="num">{{ likeData.likeCount }}</view>
|
||||
</navigator>
|
||||
<navigator class="item" hover-class="none" url="/pages/watching_history/watching_history?type=1">
|
||||
<view class="title">我的追剧</view>
|
||||
<view class="num">0</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="num">{{ likeData.collectCount }}</view>
|
||||
</navigator>
|
||||
<view class="item" @click="linkTo('/pages/me/withdraw/index')">
|
||||
<view class="title">我的红包</view>
|
||||
<view class="num">0</view>
|
||||
<view class="num">{{ amount || 0 }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -39,63 +41,65 @@
|
|||
<view class="gold-wrap">
|
||||
<view class="left">
|
||||
<image class="icon" src="/static/me/gold_icon.png" mode="aspectFit"></image>
|
||||
<view class="num">123133.00</view>
|
||||
<view class="num">{{ gold }}</view>
|
||||
</view>
|
||||
<view class="btn">金币明细</view>
|
||||
</view>
|
||||
<view class="title-wrap">
|
||||
<view class="t">观看历史</view>
|
||||
<up-icon name="arrow-right"></up-icon>
|
||||
<navigator hover-class="none" url="/pages/me/gold_record">
|
||||
<view class="btn">金币明细</view>
|
||||
</navigator>
|
||||
</view>
|
||||
<navigator class="title-wrap" hover-class="none" url="/pages/watching_history/watching_history?type=3">
|
||||
<view class="a">
|
||||
<view class="t">观看历史</view>
|
||||
<up-icon name="arrow-right"></up-icon>
|
||||
</view>
|
||||
</navigator>
|
||||
<view class="history-list">
|
||||
<view class="item">
|
||||
<image class="cover" src="https://img0.baidu.com/it/u=966333451,3199467079&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=714" mode="aspectFill"></image>
|
||||
<view class="name">我在八零年代当后妈</view>
|
||||
<view class="t">看到8集</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<image class="cover" src="https://img2.baidu.com/it/u=3352094756,2708106394&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422" mode="aspectFill"></image>
|
||||
<view class="name">姜小姐的反击</view>
|
||||
<view class="t">看到12集</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<image class="cover" src="https://q0.itc.cn/images01/20240806/a14af4ece3354215be6294f3d2c264a4.jpeg" mode="aspectFill"></image>
|
||||
<view class="name">霸道载誉归来</view>
|
||||
<view class="t">看到3集</view>
|
||||
<view
|
||||
class="item"
|
||||
v-for="item in recordThree"
|
||||
:key="item.id"
|
||||
@click="linkTo(`/pages/video/detail?courseId=${item.courseId}&courseDetailsId=${item.courseDetailsId}`)"
|
||||
>
|
||||
<image class="cover" :src="item.titleImg" mode="aspectFill"></image>
|
||||
<view class="name">{{ item.title }}</view>
|
||||
<view class="t">看到{{ item.courseDetailsName }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="empty" style="padding-bottom: 20px" v-if="!recordThree.length">
|
||||
<emprty-card></emprty-card>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-wrap">
|
||||
<view class="menu-list">
|
||||
<view class="item">
|
||||
<view class="item" @click="toTask">
|
||||
<image class="icon" src="/static/me/menu_icon1.png" mode="aspectFit"></image>
|
||||
<view class="name">任务中心</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="item" @click="linkTo('/pages/me/setting')">
|
||||
<image class="icon" src="/static/me/menu_icon2.png" mode="aspectFit"></image>
|
||||
<view class="name">设置中心</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="item" @click="linkTo('/pages/me/feedback', true)">
|
||||
<image class="icon" src="/static/me/menu_icon3.png" mode="aspectFit"></image>
|
||||
<view class="name">意见反馈</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="item" @click="linkTo('/pages/me/help_center')">
|
||||
<image class="icon" src="/static/me/menu_icon4.png" mode="aspectFit"></image>
|
||||
<view class="name">帮助中心</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="item" @click="linkTo('/pages/login/download')">
|
||||
<image class="icon" src="/static/me/menu_icon5.png" mode="aspectFit"></image>
|
||||
<view class="name">检查更新</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="item" @click="linkTo('/pages/me/agreement')">
|
||||
<image class="icon" src="/static/me/menu_icon6.png" mode="aspectFit"></image>
|
||||
<view class="name">用户协议</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<!-- <view class="item">
|
||||
<image class="icon" src="/static/me/menu_icon7.png" mode="aspectFit"></image>
|
||||
<view class="name">关于我们</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
</view> -->
|
||||
<view class="item" @click="linkTo('/pages/me/privacy')">
|
||||
<image class="icon" src="/static/me/menu_icon8.png" mode="aspectFit"></image>
|
||||
<view class="name">隐私政策</view>
|
||||
</view>
|
||||
|
|
@ -105,13 +109,77 @@
|
|||
</view>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
import { selectByUserId, collectVideoSummary, selectUserMoney } from '@/api/me/me.js';
|
||||
import { linkTo } from '@/utils/app.js';
|
||||
|
||||
const userInfo = ref({});
|
||||
|
||||
// 获取最近的三条观看历史
|
||||
const recordThree = ref([]);
|
||||
async function selectByUserIdAjax() {
|
||||
try {
|
||||
const res = await selectByUserId({ page: 1, limit: 3, classify: 3 });
|
||||
recordThree.value = res.records;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
// 我的喜欢 我的追剧
|
||||
const likeData = reactive({
|
||||
likeCount: 0,
|
||||
collectCount: 0
|
||||
});
|
||||
async function collectVideoSummaryAjax() {
|
||||
try {
|
||||
const res = await collectVideoSummary();
|
||||
likeData.likeCount = res.likeCount;
|
||||
likeData.collectCount = res.collectCount;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
// 金币
|
||||
const gold = ref(0);
|
||||
const amount = ref(0);
|
||||
async function selectUserMoneyAjax() {
|
||||
try {
|
||||
const res = await selectUserMoney();
|
||||
gold.value = res.money;
|
||||
amount.value = res.amount;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
// 跳转任务中心
|
||||
function toTask() {
|
||||
uni.switchTab({
|
||||
url: '/pages/task/index'
|
||||
});
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
selectByUserIdAjax();
|
||||
collectVideoSummaryAjax();
|
||||
selectUserMoneyAjax();
|
||||
});
|
||||
onShow(() => {
|
||||
userInfo.value = uni.getStorageSync('userInfo');
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: #f5f7ff;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
$bgColor: #f5f7ff;
|
||||
page {
|
||||
background: $bgColor;
|
||||
}
|
||||
|
||||
.container {
|
||||
font-size: 28upx;
|
||||
color: #333;
|
||||
|
|
@ -173,7 +241,7 @@ page {
|
|||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 28upx;
|
||||
font-size: 32upx;
|
||||
}
|
||||
}
|
||||
.btm {
|
||||
|
|
@ -190,6 +258,8 @@ page {
|
|||
}
|
||||
.num {
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -247,19 +317,23 @@ page {
|
|||
}
|
||||
.title-wrap {
|
||||
padding: 28upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.t {
|
||||
font-size: 28upx;
|
||||
.a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.t {
|
||||
font-size: 28upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.history-list {
|
||||
padding: 0 28upx 28upx;
|
||||
display: flex;
|
||||
gap: 28upx;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: 1fr;
|
||||
grid-column-gap: 28upx;
|
||||
grid-row-gap: 28upx;
|
||||
.item {
|
||||
flex: 1;
|
||||
.cover {
|
||||
width: 100%;
|
||||
height: 280upx;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
<!-- 消息中心 -->
|
||||
<template>
|
||||
<view class="container">
|
||||
|
||||
<view v-if="data.msgList.length" class="list" v-for="(item,index) in data.msgList"
|
||||
:key='index'>
|
||||
<image class="icon" src="@/static/me/message.png" mode="aspectFit"></image>
|
||||
<view class="item-right">
|
||||
<view class="top">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="text-gray">{{item.createAt}}</view>
|
||||
</view>
|
||||
<view class="text-gray">{{item.content}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<emprty-card v-if="!data.msgList.length" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { onLoad,onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
|
||||
import { selectMessageByUserId } from '@/api/me/message.js';
|
||||
|
||||
let data = reactive({
|
||||
page: 1,
|
||||
limit: 10,
|
||||
msgList: []
|
||||
})
|
||||
|
||||
onLoad(() => {
|
||||
getMsg()
|
||||
})
|
||||
async function getMsg() {
|
||||
uni.showLoading({
|
||||
title: '加载中'
|
||||
})
|
||||
|
||||
let params = {
|
||||
page: data.page,
|
||||
limit: data.limit,
|
||||
state: 5
|
||||
}
|
||||
let res = await selectMessageByUserId(params)
|
||||
uni.hideLoading()
|
||||
uni.stopPullDownRefresh();
|
||||
if (data.page == 1) {
|
||||
data.msgList = res.list
|
||||
uni.stopPullDownRefresh();
|
||||
return
|
||||
}
|
||||
data.msgList = [...data.msgList, ...res.list]
|
||||
}
|
||||
onReachBottom(() => {
|
||||
data.page = data.page + 1;
|
||||
getMsg()
|
||||
})
|
||||
onPullDownRefresh(() => {
|
||||
data.page = 1;
|
||||
data.msgList = []
|
||||
getMsg()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: white;
|
||||
}
|
||||
.container{
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
.list{
|
||||
display: flex;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #e4e7ed;
|
||||
.icon{
|
||||
width: 85rpx;
|
||||
height: 85rpx;
|
||||
}
|
||||
.item-right{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 30rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
.top{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.title{
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -11,8 +11,6 @@
|
|||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import config from '@/commons/config.js';
|
||||
import {selectUserById} from '@/api/user/user.js';
|
||||
import {commonType} from '@/api/init.js';
|
||||
|
||||
let data = reactive({
|
||||
|
|
|
|||
|
|
@ -0,0 +1,92 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<view class="list">
|
||||
<view class="item" @click="linkTo('/pages/login/bind')">
|
||||
<view class="title">修改手机号</view>
|
||||
<up-icon name="arrow-right" />
|
||||
</view>
|
||||
<view class="item" @click="linkTo('/pages/me/help_center')">
|
||||
<view class="title">帮助中心</view>
|
||||
<up-icon name="arrow-right" />
|
||||
</view>
|
||||
<view class="item" @click="linkTo('/pages/me/feedback')">
|
||||
<view class="title">意见反馈</view>
|
||||
<up-icon name="arrow-right" />
|
||||
</view>
|
||||
<view class="item" @click="linkTo('/pages/me/agreement')">
|
||||
<view class="title">用户协议</view>
|
||||
<up-icon name="arrow-right" />
|
||||
</view>
|
||||
<view class="item" @click="linkTo('/pages/me/privacy')">
|
||||
<view class="title">隐私协议</view>
|
||||
<up-icon name="arrow-right" />
|
||||
</view>
|
||||
<view class="item" @click="logout">
|
||||
<view class="title">退出登录</view>
|
||||
<up-icon name="arrow-right" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="version">{{ version }}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { linkTo } from '@/utils/app.js';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
|
||||
const version = ref('');
|
||||
|
||||
// 退出登录
|
||||
function logout() {
|
||||
uni.showModal({
|
||||
title: '注意',
|
||||
content: '确定要退出登录吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.clearStorageSync();
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
//#ifdef APP-PLUS
|
||||
version.value = systemInfo.appWgtVersion;
|
||||
//#endif
|
||||
// #ifdef H5
|
||||
version.value = systemInfo.appVersion;
|
||||
// #endif
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
font-size: 28upx;
|
||||
color: #555;
|
||||
}
|
||||
.list {
|
||||
padding-bottom: 120upx;
|
||||
.item {
|
||||
padding: 32upx 28upx;
|
||||
border-bottom: 1upx solid #efefef;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.version {
|
||||
width: 100%;
|
||||
height: 120upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<up-cell-group>
|
||||
<up-cell title="头像">
|
||||
<template #value>
|
||||
<image :src="data.userInfo.avatar?data.userInfo.avatar:'../../static/default/avatar.png'" mode="" @click="uploadImg"
|
||||
<image :src="data.userInfo.avatar?data.userInfo.avatar:'../../static/default/avatar.png'" mode="aspectFill" @click="uploadImg"
|
||||
style="width: 111rpx;height: 111rpx;border-radius: 50%;"></image>
|
||||
</template>
|
||||
</up-cell>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
import { reactive } from 'vue';
|
||||
import { onShow} from '@dcloudio/uni-app'
|
||||
import config from '@/commons/config.js';
|
||||
import {selectUserById} from '@/api/user/user.js';
|
||||
import { selectUserById, updateUsers } from '@/api/user/user.js';
|
||||
|
||||
let data = reactive({
|
||||
userInfo: {
|
||||
|
|
@ -37,7 +37,6 @@
|
|||
})
|
||||
|
||||
onShow(() => {
|
||||
// console.log(1)
|
||||
getUserInfo()
|
||||
})
|
||||
|
||||
|
|
@ -46,9 +45,7 @@
|
|||
*/
|
||||
async function getUserInfo () {
|
||||
let res = await selectUserById()
|
||||
if ( res.code == 0 ) {
|
||||
data.userInfo = res.data
|
||||
}
|
||||
data.userInfo = res
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -130,25 +127,25 @@
|
|||
title: '温馨提示',
|
||||
content: '确定保存信息',
|
||||
confirmColor: '#ff7581',
|
||||
success: e => {
|
||||
success: async e => {
|
||||
if (e.confirm) {
|
||||
http.request({
|
||||
url:'app/user/updateUsers',
|
||||
method: 'post',
|
||||
data: {
|
||||
let res = await updateUsers({
|
||||
userName: data.userInfo.userName,
|
||||
avatar: data.userInfo.avatar,
|
||||
phone: data.userInfo.phone,
|
||||
}
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: "none"
|
||||
})
|
||||
setTimeout(function() {
|
||||
uni.navigateBack()
|
||||
}, 1000)
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: "none"
|
||||
})
|
||||
let userInfo = uni.getStorageSync('userInfo');
|
||||
userInfo.userName = data.userInfo.userName
|
||||
userInfo.avatar = data.userInfo.avatar
|
||||
userInfo.phone = data.userInfo.phone
|
||||
uni.setStorageSync('userInfo', userInfo);
|
||||
setTimeout(function() {
|
||||
uni.navigateBack()
|
||||
}, 1000)
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,128 @@
|
|||
<template>
|
||||
<view class="containerView">
|
||||
<up-cell-group :border="false">
|
||||
<up-cell title="收款人姓名">
|
||||
<template #right-icon> <up-input border="none" v-model="data.zhiFuBaoName" placeholder="请输入支付宝收款人姓名"></up-input> </template>
|
||||
</up-cell>
|
||||
<up-cell title="支付宝账号">
|
||||
<template #right-icon> <up-input border="none" v-model="data.zhiFuBao" placeholder="请输入要绑定的支付宝手机号"></up-input> </template>
|
||||
</up-cell>
|
||||
</up-cell-group>
|
||||
<button class="confirm-btn" @click="toLogin"
|
||||
:disabled="data.logining">绑定账户</button>
|
||||
<view style="font-size: 24upx;color: #999999;padding: 0 15rpx;margin-top: 32rpx;margin-bottom: 10rpx;">请正确填写收款人的支付宝账户和真实的收款人姓名</view>
|
||||
<view style="font-size: 24upx;color: #999999;padding: 0 15rpx">否则将无法正常收款，请须知</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, nextTick, ref } from 'vue';
|
||||
import { onReady,onLoad,onShow } from '@dcloudio/uni-app'
|
||||
import { updateUser } from '@/api/me/withdraw.js';
|
||||
import { commonType } from '@/api/init.js';
|
||||
|
||||
let data = reactive({
|
||||
zhiFuBao: null,
|
||||
zhiFuBaoName: null,
|
||||
logining: false
|
||||
})
|
||||
|
||||
onLoad(() => {
|
||||
data.zhiFuBao = uni.getStorageSync('userInfo').zhiFuBao;
|
||||
data.zhiFuBaoName = uni.getStorageSync('userInfo').zhiFuBaoName;
|
||||
})
|
||||
|
||||
function inputChange(e) {
|
||||
const key = e.currentTarget.dataset.key;
|
||||
data[key] = e.detail.value;
|
||||
}
|
||||
|
||||
async function toLogin() {
|
||||
|
||||
if (!data.zhiFuBaoName) {
|
||||
uni.showToast({
|
||||
title: '请设置收款人姓名',
|
||||
icon: 'none'
|
||||
})
|
||||
} else if (!data.zhiFuBao) {
|
||||
uni.showToast({
|
||||
title: '请设置收款人支付宝账号',
|
||||
icon: 'none'
|
||||
})
|
||||
} else {
|
||||
data.logining = true
|
||||
let res = await updateUser({
|
||||
zhiFuBao: data.zhiFuBao,
|
||||
certName: data.zhiFuBaoName,
|
||||
})
|
||||
if( res) {
|
||||
data.logining = false
|
||||
let userInfo = uni.getStorageSync('userInfo')
|
||||
userInfo.zhiFuBao = data.zhiFuBao
|
||||
userInfo.zhiFuBaoName = data.zhiFuBaoName
|
||||
uni.setStorageSync('userInfo', userInfo)
|
||||
uni.showToast({
|
||||
title: '修改成功',
|
||||
icon: 'none',
|
||||
complete() {
|
||||
setTimeout(function() {
|
||||
uni.navigateBack();
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
page {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.containerView {
|
||||
padding:30rpx;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.confirm-btn1 {
|
||||
width: 300px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
border-radius: 30px;
|
||||
margin-top: 70upx;
|
||||
/* background: whitesmoke; */
|
||||
background: #ff7581;
|
||||
color: #FFFFFF;
|
||||
font-size: 32rpx;
|
||||
|
||||
&:after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.confirm-btn {
|
||||
width: 300px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
border-radius: 30px;
|
||||
margin-top: 70upx;
|
||||
background: #ff7581;
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
&:after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,551 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<!-- <view class="navs" style="width: 100%;height: 96rpx;"></view> -->
|
||||
<view class="nav">
|
||||
<up-icon name="arrow-left" color="#fff" size="20" @click="back"></up-icon>
|
||||
<view class="navTitle">申请提现</view>
|
||||
<view class="ruleBtn" @click="data.ruleShow = true">规则</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="title">可提现总额</view>
|
||||
<view class="mayMoney">¥ {{ data.mayMoney }}</view>
|
||||
<view class="val" style="">
|
||||
<view style="display: flex;flex-direction: row;padding: 20upx;">
|
||||
<view style="font-size: 32upx;color: #333333;">提现金额</view>
|
||||
</view>
|
||||
<view class="input" style="">
|
||||
<view style="display: flex;align-items: center;">
|
||||
<view style="font-size: 40upx;color: #333333;">¥</view>
|
||||
<input type="number" v-model="data.money" placeholder="请输入金额" @input="moneyInput" style="font-size: 32rpx;color: #333333;text-align: left;margin-left: 10rpx;width: 80%;" />
|
||||
</view>
|
||||
<view class="allbtn" @click="setAllMoney">
|
||||
全部
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="witBtn" @click="goWithdraw"> {{data.isWithdraw?'立即提现':'观看广告提现'}} </view>
|
||||
|
||||
<view class="tab" style="">
|
||||
<view @click="linkTo('/pages/me/withdraw/realName')">实名认证</view>
|
||||
<!-- <view @click="linkTo('/pages/me/withdraw/alipay')">提现账号</view> -->
|
||||
<view @click="linkTo('/pages/me/withdraw/moneyList?moneyType=1&viewType=2')">红包明细</view>
|
||||
</view>
|
||||
|
||||
<view class="moneyList u-p-b-30">
|
||||
<view v-if="data.list.length" v-for="(item, index) in data.list" :key="index" class="item">
|
||||
<view>
|
||||
<view style="margin-bottom: 8upx;text-align: right;">
|
||||
<text style="margin-bottom: 8upx;color: green" v-if="item.state===1"> 提现成功</text>
|
||||
<text style="margin-bottom: 8upx;color: green" v-if="item.state===0||item.state==3">
|
||||
提现中</text>
|
||||
<text style="margin-bottom: 8upx;color: #FD6416" v-if="item.state===-1||item.state===2">
|
||||
提现失败
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view style="color: #999999;font-size: 28upx;">
|
||||
<view style="margin-bottom: 8upx"> 收款人账号：{{ item.zhifubao }}</view>
|
||||
<view style="margin-bottom: 8upx"> 收款人姓名：{{ item.zhifubaoName }}</view>
|
||||
<view style="margin-bottom: 8upx"> 发起时间：{{ item.createAt }}</view>
|
||||
<view style="margin-bottom: 8upx" v-if="item.state===1">成功时间 {{ item.outAt }}</view>
|
||||
<view style="margin-bottom: 8upx;color: #FD6416" v-if="item.state===-1||item.state===2">
|
||||
失败原因：{{ item.refund }}
|
||||
</view>
|
||||
|
||||
<view style="margin-bottom: 8upx;text-align: right;">
|
||||
<!-- 提现金额： -->
|
||||
<text style="color: #FD6416;font-size: 32upx;font-weight: 600"> ￥{{ item.money }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<emprty-card v-if="!data.list.length" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<up-modal :show="data.ruleShow" confirm-text="知道了" title="规则说明" :title-style="{fontWeight:'700'}" @confirm="data.ruleShow=false" confirm-color="rgb(255, 117, 129)">
|
||||
<view class="u-p-30 u-text-left">
|
||||
<scroll-view scroll-y="true" style="max-height: 50vh;" >
|
||||
<rich-text style="text-align: justify;font-size: 18px;color: #666;" :nodes="data.ruleInfo"></rich-text>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
</up-modal>
|
||||
|
||||
<view style="width: 0;height: 0;overflow: hidden;">
|
||||
<!-- 激励视频广告 -->
|
||||
<ad-rewarded-video v-if="data.adRewardedShow" ref="adRewarded" adpid="1507000689" :loadnext="true"
|
||||
:url-callback="data.urlCallback" @load="onadload" @close="onadclose" @error="onaderror">
|
||||
</ad-rewarded-video>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, nextTick, ref } from 'vue';
|
||||
import { onReady,onLoad,onShow,onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
|
||||
import { selectUserMoney, selectPayDetails, canCash, state, withdraw } from '@/api/me/withdraw.js';
|
||||
import { selectUserById } from '@/api/user/user.js';
|
||||
import { commonType } from '@/api/init.js';
|
||||
import { linkTo } from '@/utils/app.js';
|
||||
|
||||
let data = reactive({
|
||||
ruleShow: true,
|
||||
ruleInfo: `
|
||||
用户在平台中对奖励提现的，适用以下规则：
|
||||
<br/>
|
||||
<br/>
|
||||
1，用户的收益达到最低提现金额要求后，可以申请提现，每日只可以提现一笔。
|
||||
<br/>
|
||||
2，用户需要通过支付宝提现，需按照要求绑定支付宝账号并填写提现金额或其他提现所需信息，请确保提供的信息准确无误，以免提现失败。
|
||||
<br/>
|
||||
3，如果用户发现显示「提现失败」，需确认当前填写或绑定的支付宝账号或银行卡账号是否正确，以及支付宝账号是否可用。如果用户发现显示「提现成功」但没到账
|
||||
<br/>
|
||||
(1)如果用户有多个支付宝账号，请检查用户是否提现到了其他支付宝账号。
|
||||
<br/>
|
||||
(2)高峰期提现人数多会导致网络拥堵，显示提现成功之后72小时内属于正常现象，请耐心等候。
|
||||
<br/>
|
||||
4，每日08:00至次日18:00为提现时间，活动的对应奖励可能延迟到账。提现通常会在72小时内到账，如遇双休日、节假日，提现到账时间可能会延长。活动高峰期间，由于网络拥堵，用户可能存在短时间内无法提现的情况。平台将尽最大努力及时恢复提现功能，但无需因此承担任何责任。
|
||||
<br/>`,
|
||||
money: '',
|
||||
mayMoney: '0',
|
||||
list: [],
|
||||
page: 1,
|
||||
limit: 10,
|
||||
totalCount: 0,
|
||||
cashMoney: 0,
|
||||
urlCallback: {},
|
||||
adRewardedShow: true,
|
||||
adRewardedVideoloadNum: 0,
|
||||
isWithdraw: false,
|
||||
userInfo: null,
|
||||
})
|
||||
|
||||
const adRewarded = ref(null);
|
||||
onLoad(() => {
|
||||
getExtractFei();
|
||||
getMoneyDetail();
|
||||
})
|
||||
onShow(() => {
|
||||
getcashMoney()
|
||||
getUserInfo();
|
||||
})
|
||||
onReady(() => {
|
||||
nextTick(()=>{
|
||||
data.adRewardedVideoloadNum = 0
|
||||
adRewarded.value.load();
|
||||
})
|
||||
getCanCash()
|
||||
})
|
||||
onReachBottom(() => {
|
||||
if (data.page * data.limit < data.totalCount) {
|
||||
data.page = data.page + 1;
|
||||
data.getMoneyDetail();
|
||||
}
|
||||
})
|
||||
onPullDownRefresh(() => {
|
||||
data.page = 1;
|
||||
data.list = []
|
||||
data.getMoneyDetail();
|
||||
})
|
||||
function getUserInfo() {
|
||||
selectUserById().then(res=>{
|
||||
data.userInfo = res;
|
||||
})
|
||||
}
|
||||
function back() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
/**
|
||||
* 获取看广告状态
|
||||
*/
|
||||
async function getCanCash() {
|
||||
canCash().then(res => {
|
||||
data.isWithdraw = !res;
|
||||
})
|
||||
|
||||
}
|
||||
/**
|
||||
* 广告数据加载成功回调
|
||||
* @param {Object} e
|
||||
*/
|
||||
function onadload(e) {
|
||||
data.adRewardedShow = true;
|
||||
console.log('广告数据加载成功');
|
||||
}
|
||||
|
||||
/**
|
||||
* 广告加载失败回调
|
||||
* @param {Object} e
|
||||
*/
|
||||
function onaderror(e) {
|
||||
if ( data.adRewardedVideoloadNum >=3 ) {
|
||||
data.adRewardedShow = false;
|
||||
return
|
||||
}
|
||||
data.adRewardedVideoloadNum++
|
||||
setTimeout(() => {
|
||||
adRewarded.value.load();
|
||||
}, 1000); // 10
|
||||
console.log("广告加载失败")
|
||||
}
|
||||
|
||||
/**
|
||||
* 广告播放成功回调
|
||||
* @param {Object} e
|
||||
*/
|
||||
async function onadclose(e) {
|
||||
const detail = e.detail
|
||||
if (detail && detail.isEnded) {
|
||||
// 正常播放结束
|
||||
let res = await state({
|
||||
extraKey: data.urlCallback.extra
|
||||
})
|
||||
getCanCash()
|
||||
} else {
|
||||
// 播放中途退出
|
||||
}
|
||||
}
|
||||
|
||||
function onNavigationBarButtonTap() {
|
||||
console.log(1)
|
||||
data.ruleShow = true
|
||||
}
|
||||
|
||||
/**
|
||||
* 提现触发
|
||||
*/
|
||||
function goWithdraw() {
|
||||
|
||||
if ( !data.isWithdraw ) {
|
||||
data.urlCallback = {
|
||||
userId: uni.getStorageSync('userInfo').userId,
|
||||
extra: 'cash:'+uni.getStorageSync('userInfo').userId + "" + new Date().getTime(),
|
||||
}
|
||||
adRewarded.value.show();
|
||||
} else {
|
||||
getOut()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function moneyInput(e) {
|
||||
data.money = e.detail.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 全部提现赋值
|
||||
*/
|
||||
function setAllMoney() {
|
||||
data.money = data.mayMoney.toFixed(2)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取提现记录
|
||||
*/
|
||||
function getMoneyDetail() {
|
||||
selectPayDetails({
|
||||
page: data.page,
|
||||
limit: data.limit
|
||||
}).then(res => {
|
||||
data.totalCount = res.totalCount;
|
||||
if (res.list.length > 0) {
|
||||
data.list = [...data.list, ...res.list];
|
||||
}
|
||||
setTimeout(() => {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 500);
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取最低提现金额
|
||||
*/
|
||||
function getExtractFei() {
|
||||
commonType(112).then(res => {
|
||||
if (res && res.value) {
|
||||
data.cashMoney = res.value;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 可提现金额
|
||||
*/
|
||||
function getcashMoney() {
|
||||
selectUserMoney().then(res => {
|
||||
data.mayMoney = res.amount || 0
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转
|
||||
* @param {Object} url
|
||||
*/
|
||||
function navTo(url) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
}
|
||||
|
||||
function getMoney() {
|
||||
let data =
|
||||
uni.showLoading({
|
||||
title: '提现中'
|
||||
});
|
||||
withdraw({
|
||||
amount: data.money
|
||||
}).then(res => {
|
||||
data.money = ''
|
||||
setTimeout(function() {
|
||||
getcashMoney()
|
||||
}, 1500)
|
||||
}).catch(res =>{
|
||||
if (res.code == 9991) {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
setTimeout(function() {
|
||||
linkTo('/pages/me/withdraw/alipay')
|
||||
}, 1500)
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function getOut() {
|
||||
|
||||
if (!/^\d+(\.\d{1,2})?$/.test(data.money)) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '请输入正确金额，不能包含中文，英文，特殊字符和小数'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!data.userInfo.accountNo) {
|
||||
uni.showToast({ icon: 'none', title: "请先实名认证" });
|
||||
setTimeout(()=>{
|
||||
linkTo('/pages/me/withdraw/realName')
|
||||
},1500)
|
||||
return;
|
||||
}
|
||||
|
||||
if (parseFloat(data.mayMoney).toFixed(2) >= parseFloat(data.money)) {
|
||||
if (parseFloat(data.money).toFixed(2) >= parseFloat(data.cashMoney)) {
|
||||
uni.showModal({
|
||||
title: "提现申请提示",
|
||||
content: '每日只可提现一次',
|
||||
success: (e) => {
|
||||
if (e.confirm) {
|
||||
setTimeout(()=>{
|
||||
uni.showModal({
|
||||
title: "提现申请提示",
|
||||
content: '请仔细确认收款人信息\n\n收款人姓名:' + data.userInfo.certName + '\n\n提现金额:' + data
|
||||
.money + '元\n\n收款人账号：' + data.userInfo.accountNo + '',
|
||||
|
||||
success: (e) => {
|
||||
if (e.confirm) {
|
||||
getMoney();
|
||||
getMoneyDetail();
|
||||
}
|
||||
}
|
||||
});
|
||||
},200)
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: "提现金额必须大于或等于" + data.cashMoney + "元才可提现"
|
||||
});
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: "您的余额不足"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
text-align: center;
|
||||
background: white;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
.nav{
|
||||
width: 100%;
|
||||
|
||||
position: fixed;
|
||||
background-color: #ff7581;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 100rpx 30rpx 15rpx 30rpx;
|
||||
.navTitle{
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.ruleBtn{
|
||||
font-size: 30rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
background-color: #ff7581;
|
||||
height: 500rpx;
|
||||
border-bottom-right-radius: 40rpx;
|
||||
border-bottom-left-radius: 40rpx;
|
||||
.title{
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
padding-top: 230rpx;
|
||||
}
|
||||
.mayMoney{
|
||||
font-size: 40rpx;
|
||||
color: #FFFFFF;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
.val{
|
||||
width: 90%;
|
||||
height: max-content
|
||||
;margin-left: 40rpx;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: rgba(183, 183, 183, 0.3) 0px 1px 10px;
|
||||
margin-top: 50rpx;
|
||||
border-radius: 20rpx;
|
||||
.input{
|
||||
display: flex;
|
||||
padding: 20rpx;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.allbtn{
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
background: #ff7581;
|
||||
color: white;
|
||||
border-radius: 10rpx;
|
||||
padding: 7rpx 15rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
.witBtn{
|
||||
margin: 32rpx;
|
||||
font-size: 36rpx;
|
||||
background: #ff7581;
|
||||
color: white;
|
||||
border-radius: 20rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
.tab{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
>view{
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
padding-bottom: 60rpx;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
}
|
||||
.moneyList{
|
||||
text-align: left
|
||||
}
|
||||
}
|
||||
|
||||
.cash-top {
|
||||
padding: 32upx 32upx 50upx 32upx;
|
||||
/* border-bottom: 1px solid gainsboro; */
|
||||
background: #5074FF;
|
||||
}
|
||||
|
||||
.leiji {
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.rule-btn {
|
||||
font-size: 16px;
|
||||
// padding: 2rpx 10rpx;
|
||||
// border: 1px solid rgba(255, 255, 255, .8);
|
||||
// border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.view2-view-text {
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
margin-left: 20upx;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.view2-view-image-right {
|
||||
width: 18upx;
|
||||
height: 30upx;
|
||||
margin-left: 50upx;
|
||||
}
|
||||
|
||||
.moneyList {
|
||||
.item {
|
||||
background: white;
|
||||
padding: 32rpx;
|
||||
margin: 32rpx;
|
||||
font-size: 28rpx;
|
||||
box-shadow: 7px 9px 34px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 16upx;
|
||||
}
|
||||
|
||||
.item:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.centre {
|
||||
text-align: center;
|
||||
padding: 200rpx 0;
|
||||
font-size: 32rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
image {
|
||||
width: 360rpx;
|
||||
height: 360rpx;
|
||||
// margin-bottom: 20rpx;
|
||||
margin: 0 auto 20rpx;
|
||||
// border: 1px dotted #000000;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 34rpx;
|
||||
color: #999999;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 80rpx auto;
|
||||
width: 600rpx;
|
||||
border-radius: 32rpx;
|
||||
line-height: 90rpx;
|
||||
color: #ffffff;
|
||||
font-size: 34rpx;
|
||||
background: #ff7581;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<view v-if="data.list.length" v-for="(item, index) in data.list" :key="index" class="item">
|
||||
<view>
|
||||
|
||||
<view style="color: #000000;font-size: 28upx;">
|
||||
<view style="margin-bottom: 8upx;"> 类型： {{item.title}}</view>
|
||||
<view style="margin-bottom: 8upx"> 内容： {{item.content}}</view>
|
||||
<view style="margin-bottom: 8upx"> 时间： {{item.createTime}}</view>
|
||||
<view style="margin-bottom: 8upx;text-align: right;">
|
||||
<!-- 提现金额： -->
|
||||
<text v-if="item.type===2" style="color: #666;font-size: 32upx;font-weight: 600"> - ￥{{item.money}}</text>
|
||||
<text v-if="item.type===1" style="color: #FD6416;font-size: 32upx;font-weight: 600">+ ￥{{item.money}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<emprty-card v-if="!data.list.length" />
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { onLoad,onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
|
||||
import { queryUserMoneyDetails } from '@/api/me/withdraw.js';
|
||||
|
||||
let data = reactive({
|
||||
list: [],
|
||||
page: 1,
|
||||
limit: 10,
|
||||
totalCount: 0,
|
||||
moneyType: null,
|
||||
viewType: null,
|
||||
})
|
||||
|
||||
onLoad((options) => {
|
||||
if (options.moneyType) {
|
||||
data.moneyType = options.moneyType
|
||||
uni.setNavigationBarTitle({
|
||||
title: options.moneyType == 1 ? '红包明细' : '金币明细'
|
||||
});
|
||||
}
|
||||
if (options.viewType) {
|
||||
data.viewType = options.viewType
|
||||
}
|
||||
getMoney();
|
||||
})
|
||||
|
||||
function getMoney() {
|
||||
queryUserMoneyDetails({
|
||||
page : data.page,
|
||||
limit : data.limit,
|
||||
moneyType : data.moneyType,
|
||||
viewType: data.viewType,
|
||||
}).then(res => {
|
||||
data.totalCount = res.total;
|
||||
if ( res.records.length > 0) {
|
||||
data.list = [...data.list,...res.records];
|
||||
}
|
||||
setTimeout(() => {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 500);
|
||||
})
|
||||
}
|
||||
onReachBottom(() => {
|
||||
if (data.page*data.limit < data.totalCount) {
|
||||
data.page = data.page + 1;
|
||||
getMoney();
|
||||
}
|
||||
})
|
||||
onPullDownRefresh(() => {
|
||||
data.page = 1;
|
||||
data.list = []
|
||||
data.getMoney();
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
/* @import "../../static/css/index.css"; */
|
||||
|
||||
page {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: white;
|
||||
padding: 32rpx;
|
||||
margin: 32rpx;
|
||||
font-size: 28rpx;
|
||||
box-shadow: 7px 9px 34px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 16upx;
|
||||
}
|
||||
|
||||
.centre {
|
||||
text-align: center;
|
||||
padding: 200rpx 0;
|
||||
font-size: 32rpx;
|
||||
box-sizing: border-box;
|
||||
image {
|
||||
width: 360rpx;
|
||||
height: 360rpx;
|
||||
// margin-bottom: 20rpx;
|
||||
margin: 0 auto 20rpx;
|
||||
// border: 1px dotted #000000;
|
||||
}
|
||||
.tips {
|
||||
font-size: 34rpx;
|
||||
color: #999999;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.btn {
|
||||
margin: 80rpx auto;
|
||||
width: 600rpx;
|
||||
border-radius: 32rpx;
|
||||
line-height: 90rpx;
|
||||
color: #ffffff;
|
||||
font-size: 34rpx;
|
||||
background: #5074FF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
<template>
|
||||
<view class="containerView">
|
||||
<up-cell-group label-width="80" :border="false">
|
||||
<up-cell :label-style="{ width: '100rpx' }" title="姓名">
|
||||
<template #right-icon> <up-input border="none" v-model="data.certName" placeholder="请输入姓名"></up-input> </template>
|
||||
</up-cell>
|
||||
<up-cell title="身份证号码">
|
||||
<template #right-icon> <up-input border="none" v-model="data.certNum" placeholder="请输入身份证号码"></up-input> </template>
|
||||
</up-cell>
|
||||
<up-cell title="银行卡号码">
|
||||
<template #right-icon> <up-input border="none" v-model="data.accountNo" placeholder="请输入银行卡号码"></up-input> </template>
|
||||
</up-cell>
|
||||
<up-cell title="手机号">
|
||||
<template #right-icon> <up-input border="none" v-model="data.mobile" placeholder="请输入银行预留号码"></up-input> </template>
|
||||
</up-cell>
|
||||
</up-cell-group>
|
||||
<button v-if="!data.isAccountNo" class="confirm-btn" @click="toLogin" :disabled="data.logining">认证</button>
|
||||
<view style="font-size: 24upx;color: #999999;padding: 0 15rpx;margin-top: 32rpx;margin-bottom: 10rpx;">请正确填写收款人的银行卡号和真实的收款人姓名</view>
|
||||
<view style="font-size: 24upx;color: #999999;padding: 0 15rpx;;margin-bottom: 10rpx;">手机号需是银行卡银行卡预留手机号</view>
|
||||
<view style="font-size: 24upx;color: #999999;padding: 0 15rpx;;margin-bottom: 10rpx;">银行卡号需与收款人姓名一致</view>
|
||||
<view style="font-size: 24upx;color: #999999;padding: 0 15rpx;;margin-bottom: 10rpx;">身份证信息仅可使用一次</view>
|
||||
<view style="font-size: 24upx;color: #999999;padding: 0 15rpx">否则将无法正常收款，请须知</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, nextTick, ref } from 'vue';
|
||||
import { onReady,onLoad,onShow } from '@dcloudio/uni-app'
|
||||
import { updateUser } from '@/api/me/withdraw.js';
|
||||
import { selectUserById } from '@/api/user/user.js';
|
||||
import { commonType } from '@/api/init.js';
|
||||
|
||||
let data = reactive({
|
||||
certName: null,
|
||||
mobile: null,
|
||||
certNum: null,
|
||||
accountNo: null,
|
||||
isAccountNo: null,
|
||||
logining: false
|
||||
})
|
||||
|
||||
onLoad(() => {
|
||||
getUserInfo()
|
||||
})
|
||||
|
||||
function getUserInfo () {
|
||||
selectUserById().then(res=>{
|
||||
if(res){
|
||||
data.certName = res.certName;
|
||||
data.mobile = res.mobile;
|
||||
if ( res.accountNo ) {
|
||||
data.accountNo = res.accountNo;
|
||||
data.certNum = res.certNo;
|
||||
}
|
||||
data.isAccountNo = res.accountNo;
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
function inputChange(e) {
|
||||
const key = e.currentTarget.dataset.key;
|
||||
data[key] = e.detail.value;
|
||||
}
|
||||
|
||||
async function toLogin() {
|
||||
|
||||
if (!data.certName) {
|
||||
uni.showToast({
|
||||
title: '请设置收款人姓名',
|
||||
icon: 'none'
|
||||
})
|
||||
} else if (!data.mobile) {
|
||||
uni.showToast({
|
||||
title: '请设置收款人支付宝账号',
|
||||
icon: 'none'
|
||||
})
|
||||
} else if (!data.certNum) {
|
||||
uni.showToast({
|
||||
title: '请设置收款人支付宝账号',
|
||||
icon: 'none'
|
||||
})
|
||||
} else if (!data.accountNo) {
|
||||
uni.showToast({
|
||||
title: '请设置收款人支付宝账号',
|
||||
icon: 'none'
|
||||
})
|
||||
} else {
|
||||
data.logining = true
|
||||
let res = await updateUser({
|
||||
certName: data.certName,
|
||||
mobile: data.mobile,
|
||||
certNum: data.certNum,
|
||||
accountNo: data.accountNo.replace(/\s+/g, ''),
|
||||
})
|
||||
if( res) {
|
||||
data.logining = false
|
||||
let userInfo = uni.getStorageSync('userInfo')
|
||||
userInfo.mobile = data.mobile
|
||||
userInfo.mobile = data.mobile
|
||||
userInfo.certNo = data.certNum
|
||||
userInfo.accountNo = data.accountNo
|
||||
uni.setStorageSync('userInfo', userInfo)
|
||||
uni.showToast({
|
||||
title: '修改成功',
|
||||
icon: 'none',
|
||||
complete() {
|
||||
setTimeout(function() {
|
||||
uni.navigateBack();
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
page {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.containerView {
|
||||
padding:30rpx;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.confirm-btn1 {
|
||||
width: 300px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
border-radius: 30px;
|
||||
margin-top: 70upx;
|
||||
/* background: whitesmoke; */
|
||||
background: #ff7581;
|
||||
color: #FFFFFF;
|
||||
font-size: 32rpx;
|
||||
|
||||
&:after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.confirm-btn {
|
||||
width: 300px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
border-radius: 30px;
|
||||
margin-top: 70upx;
|
||||
background: #ff7581;
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
&:after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,443 @@
|
|||
<!-- 我的邀请 -->
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="head">
|
||||
<up-image src="/static/share/share-bg.png" alt="" width="100%" mode="widthFix"></up-image>
|
||||
<view class="top-title">
|
||||
<view>
|
||||
<up-image src="/static/share/title.png" alt="" width="550rpx" height="92rpx" mode="widthFix"></up-image>
|
||||
</view>
|
||||
<view style="padding-right:70rpx;justify-content: flex-end">
|
||||
<up-image src="/static/share/rule.png" alt="" width="430rpx" height="92rpx" mode="widthFix"></up-image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="inviteBox">
|
||||
<view class="top">
|
||||
<u-image src="/static/share/bg1.png" alt="" width="422rpx" height="76rpx"></u-image>
|
||||
<view class="u-absolute">
|
||||
<text>邀请详情</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="codeTitle">
|
||||
您的邀请码
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="code" style="">
|
||||
{{data.invitationCode}}
|
||||
</view>
|
||||
<view class="u-flex u-row-between" style="padding: 0 88rpx;">
|
||||
<u-button @tap="sharurl" :custom-style="data.customStyle" :hair-line="false"
|
||||
:ripple="true">一键分享</u-button>
|
||||
<u-button style="margin-left: 50rpx;" @click.stop="createPoster()" :custom-style="data.customStyle"
|
||||
:hair-line="false" :ripple="true">保存海报</u-button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="gap u-m-t-32"></view>
|
||||
<view class="u-m-t-32">
|
||||
<view style="font-size: 32rpx;font-weight:bold;color: #000;text-align: center;">我的邀请战绩</view>
|
||||
<view class="u-m-t-32" style="line-height: 46rpx;font-weight: bold;text-align: center;display: flex;justify-content: space-around;">
|
||||
<view>
|
||||
<view class="">已邀请</view>
|
||||
<view class="text-red u-m-t-16 "><text class=" u-font-40">{{data.inviteCount}}</text>人</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="">签到</view>
|
||||
<view class="text-red u-m-t-16 "><text class=" u-font-40">{{data.inviteSignCount}}</text>人</view>
|
||||
</view>
|
||||
<view @click="goNav('/pages/me/withdraw/moneyList?moneyType=2&viewType=1')">
|
||||
<view class="">金币收益</view>
|
||||
<!-- <view class="text-red u-m-t-16 "><text class=" u-font-40">{{earning.inviteGoldMoney||0}}</text></view> -->
|
||||
</view>
|
||||
<view @click="goNav('/pages/me/withdraw/moneyList?moneyType=1&viewType=1')">
|
||||
<view class="">红包收益</view>
|
||||
<!-- <view class="text-red u-m-t-16 "><text class=" u-font-40">{{earning.inviteMoney||0}}</text></view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-16 u-p-b-32" style="text-align: center;color: #999;">好友签到成功可额外获得1元现金红包</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="u-m-t-40 u-m-b-32" style="background-color: #fff;padding: 32rpx;border-radius: 16rpx;margin: 32rpx;">
|
||||
<view class="u-font-32 " style="text-align: center;color: #333;font-weight: bold;">已邀请列表</view>
|
||||
<view v-if="data.inviterList.length" class="u-m-t-20">
|
||||
<view class="u-m-b-20" style="line-height: 80rpx;display: flex;justify-content: space-between;" v-for="(item, index) in data.inviterList"
|
||||
:key='index'>
|
||||
<view style="display: flex;">
|
||||
<image src="/static/share/5.png" style="width: 80rpx;" mode="widthFix"></image>
|
||||
<text class="margin-left-sm">{{item.userName}}</text>
|
||||
</view>
|
||||
<view style="width: 160rpx;" class="u-flex u-row-right font-bold">
|
||||
<text class="text-red" v-if="item.recordNum>0">已签到</text>
|
||||
<text class="color-999" v-else>未签到</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="u-p-t-30 u-p-b-30" v-if="!data.inviterList.length">
|
||||
<up-divider text="没有更多了"></up-divider>
|
||||
</view>
|
||||
|
||||
<view style="width: 0;height: 0;overflow: hidden;">
|
||||
<up-qrcode :size="200" :val="data.erweima" @result="qrR"></up-qrcode>
|
||||
<canvas id="canvas" canvas-id="poster" :style="{width: data.canvasW+'px', height: data.canvasH+'px'}"></canvas>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, nextTick, ref } from 'vue';
|
||||
import { onReady,onLoad,onShow,onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
|
||||
import { updateUser } from '@/api/me/withdraw.js';
|
||||
import { selectInviteMoney, selectInviteByUserIdLists, selectBannerList } from '@/api/share/index.js';
|
||||
import { commonType } from '@/api/init.js';
|
||||
import config from '@/commons/config.js';
|
||||
let data = reactive({
|
||||
loading:false,
|
||||
qrcode: false,
|
||||
earning: {
|
||||
inviteMoney: 0,
|
||||
inviteGoldMoney: 0,
|
||||
},
|
||||
erweimapath: '',
|
||||
haibaoImg: null,
|
||||
customStyle: {
|
||||
background: '#DDDCFF',
|
||||
border: '8rpx',
|
||||
color: '#4544FF',
|
||||
fontSize: '28rpx',
|
||||
fontWeight: '700',
|
||||
padding: '10rpx 32rpx',
|
||||
},
|
||||
page: 1,
|
||||
limit: 10,
|
||||
isEnd:false,
|
||||
inviteCount: '', //邀请人数
|
||||
inviterList: [], //邀请列表
|
||||
erweima: '',
|
||||
bgImg: '',
|
||||
tuiguang: '',
|
||||
invitationCode: uni.getStorageSync('userInfo').invitationCode,
|
||||
h5SaveImg: '',
|
||||
haibaoImgH5: '',
|
||||
inviteSignCount:0,
|
||||
canvasW: 350,
|
||||
canvasH: 667,
|
||||
})
|
||||
let settingWritePhotosAlbum = false;
|
||||
onLoad(() => {
|
||||
getInviter()
|
||||
queryInviter()
|
||||
getBgImg()
|
||||
data.erweima = config.baseUrl + `/pages/login/register/?invitation=${data.invitationCode}&qdCode=${uni.getStorageSync('userInfo').qdCode}`
|
||||
console.log(data.erweima)
|
||||
})
|
||||
|
||||
/**
|
||||
* 获取邀请战绩
|
||||
*/
|
||||
function queryInviter() {
|
||||
selectInviteMoney().then(res => {
|
||||
data.inviteCount = res.inviteCount //邀请人数
|
||||
data.inviteSignCount = res.inviteSignCount
|
||||
data.earning.inviteGoldMoney = res.earning.inviteGoldMoney||0
|
||||
data.earning.inviteMoney = res.earning.inviteMoney||0
|
||||
console.log(data.earning)
|
||||
// Object.assign(data.earning,res.earning)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取已邀请列表
|
||||
*/
|
||||
function getInviter() {
|
||||
data.loading=true;
|
||||
selectInviteByUserIdLists({
|
||||
page: data.page,
|
||||
limit: data.limit
|
||||
}).then(res => {
|
||||
data.loading=false;
|
||||
data.inviterList =data.inviterList.concat(res.list)
|
||||
data.isEnd=data.page>=res.totalPage?true:false;
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转收益列表
|
||||
* @param {Object} url
|
||||
*/
|
||||
function goNav ( url) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 一键分享
|
||||
*/
|
||||
function sharurl() {
|
||||
uni.showModal({
|
||||
title: '链接推广',
|
||||
content: data.tuiguang + data.erweima,
|
||||
showCancel: true,
|
||||
cancelText: '关闭',
|
||||
confirmText: '一键复制',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
uni.setClipboardData({
|
||||
data: data.tuiguang + data.erweima,
|
||||
success: function() {
|
||||
console.log('success');
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
duration: 1000,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function posterSuccess(haibaoImg) {
|
||||
data.haibaoImg = haibaoImg;
|
||||
uni.hideLoading();
|
||||
}
|
||||
function successH5(haibaoImg) {
|
||||
if ( haibaoImg ) {
|
||||
data.haibaoImgH5 = haibaoImg
|
||||
uni.previewImage({
|
||||
urls: [haibaoImg],
|
||||
current: 1,
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function qrR(path) {
|
||||
data.erweimapath = path;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取海报图
|
||||
*/
|
||||
function getBgImg() {
|
||||
selectBannerList({
|
||||
classify: 5
|
||||
}).then(res => {
|
||||
data.bgImg = res[0].imageUrl
|
||||
data.tuiguang = res[0].describes
|
||||
// data.bgImg = "https://jiaoyu.xianmxkj.com/img/20230822/27d37f847db9481bb3dc54cd12258147.jpg"
|
||||
});
|
||||
}
|
||||
function createdCanvas(imageInfos){
|
||||
return new Promise((resolve, reject) => {
|
||||
//绘图上下文
|
||||
const ctx = uni.createCanvasContext('poster');
|
||||
uni.createSelectorQuery()
|
||||
.in(this)
|
||||
.select('#canvas')
|
||||
.boundingClientRect(rect => {
|
||||
if(!rect) return
|
||||
|
||||
// 背景图
|
||||
ctx.drawImage( data.bgImg, 0, 0, data.canvasW, data.canvasH );
|
||||
console.log(data.canvasW)
|
||||
|
||||
// 二维码图片
|
||||
ctx.drawImage( data.erweimapath, data.canvasW - 174, data.canvasH - 134, 64, 64 );
|
||||
ctx.draw();
|
||||
}).exec()
|
||||
resolve()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成海报
|
||||
*/
|
||||
async function createPoster() {
|
||||
uni.showLoading({
|
||||
title: '海报生成中'
|
||||
});
|
||||
const Images = [data.bgImg, data.erweimapath];
|
||||
Promise.all(Images.map(img => uni.getImageInfo({ src: img }))).then(
|
||||
imageInfos => {
|
||||
console.log('Images then>>>>>>', imageInfos);
|
||||
data.bgImg = imageInfos[0].path;
|
||||
data.erweimapath = imageInfos[1].path;
|
||||
|
||||
//根据参数开始绘图
|
||||
createdCanvas(imageInfos[0]).then(()=>{
|
||||
// 绘制需要延迟，不然第一次加载为空白
|
||||
setTimeout(() => {
|
||||
// 将生成的canvas图片，转为真实图片-地址
|
||||
uni.canvasToTempFilePath({
|
||||
x: 0,
|
||||
y: 0,
|
||||
canvasId: "poster",
|
||||
success: res => {
|
||||
data.haibaoImg = res.tempFilePath;
|
||||
// #ifdef H5
|
||||
uni.previewImage({
|
||||
urls: [data.haibaoImg],
|
||||
current: 1,
|
||||
})
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
uni.previewImage({
|
||||
urls: [data.haibaoImg],
|
||||
current: 1,
|
||||
})
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: data.haibaoImg,
|
||||
success: function() {
|
||||
uni.showToast({
|
||||
title: '海报已保存相册',
|
||||
icon: 'none',
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
|
||||
console.log('真实图片>>>>>>', res);
|
||||
uni.hideLoading();
|
||||
},
|
||||
fail: (err) => { console.log('error', err) }
|
||||
},this);
|
||||
}, 500);
|
||||
})
|
||||
});
|
||||
|
||||
}
|
||||
onReachBottom(() => {
|
||||
if(data.isEnd||data.loading){
|
||||
return
|
||||
}
|
||||
data.page+=1
|
||||
getInviter()
|
||||
})
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$color1: #5857FF;
|
||||
page {
|
||||
background: #F3F4F8;
|
||||
}
|
||||
.container {
|
||||
background: #F3F4F8;
|
||||
min-height: 100vh;
|
||||
.head{
|
||||
position: relative;
|
||||
.top-title {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 192rpx;
|
||||
>view{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.inviteBox {
|
||||
position: relative;
|
||||
margin-top: -240rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
margin-left: 28rpx;
|
||||
margin-right: 28rpx;
|
||||
.top {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
left: 134rpx;
|
||||
right: 134rpx;
|
||||
top: -24rpx;
|
||||
|
||||
.u-absolute {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.codeTitle{
|
||||
padding-top: 84rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
}
|
||||
.content{
|
||||
.code{
|
||||
font-size: 44rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: #5857FF;
|
||||
margin: 32rpx auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.cu-dialog {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.text-red {
|
||||
color: $color1;
|
||||
}
|
||||
|
||||
.gap {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
position: relative;
|
||||
border-bottom: 1px dashed #eee;
|
||||
|
||||
&:before,
|
||||
&::after {
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
background: #F3F4F8;
|
||||
border-radius: 50%;
|
||||
z-index: 2;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-size: 100% 18px;
|
||||
background-repeat: repeat-x
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: -16rpx;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: -16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-img {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -1,23 +1,68 @@
|
|||
<template>
|
||||
<view class="min-page">
|
||||
<my-video-list></my-video-list>
|
||||
<my-video-list 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'
|
||||
onLoad((opt)=>{
|
||||
|
||||
import {
|
||||
onLoad,
|
||||
onShow
|
||||
} from '@dcloudio/uni-app'
|
||||
import * as Api from '@/api/video/index.js'
|
||||
import {
|
||||
reactive
|
||||
} from 'vue'
|
||||
import {
|
||||
slice
|
||||
} from 'lodash'
|
||||
const boxStyle={
|
||||
height:'835px'
|
||||
}
|
||||
let options = {}
|
||||
const state = reactive({
|
||||
collect: 0,
|
||||
current: {},
|
||||
list: [],
|
||||
price: 0,
|
||||
title: ''
|
||||
})
|
||||
onShow(()=>{
|
||||
|
||||
async function init() {
|
||||
const res = await Api.getVideoDetail(options)
|
||||
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 lang="scss" scoped>
|
||||
.min-page{
|
||||
.min-page {
|
||||
height: 100vh;
|
||||
flex: 1;
|
||||
background-color: #000;
|
||||
overflow: hidden;
|
||||
}
|
||||
.u-popup{
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
</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>
|
||||
<up-button @click="toDetail">toDetail</up-button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
function toDetail(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/video/detail'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<view class="list">
|
||||
<view class="item" v-for="item in listData.list" :key="item.id">
|
||||
<view class="item" v-for="item in listData.list" :key="item.id"
|
||||
@click="linkTo(`/pages/video/detail?courseId=${item.courseId}&courseDetailsId=${item.courseDetailsId}`)">
|
||||
<view class="cover">
|
||||
<image class="img" :src="item.titleImg" mode="aspectFill"></image>
|
||||
</view>
|
||||
|
|
@ -26,7 +27,8 @@
|
|||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
|
||||
import { linkTo } from '@/utils/app.js';
|
||||
|
||||
import { selectByUserId } from '@/api/me/me.js';
|
||||
|
||||
|
|
@ -36,6 +38,10 @@ const typeList = ref([
|
|||
type: 1,
|
||||
label: '我的追剧'
|
||||
},
|
||||
{
|
||||
type: 2,
|
||||
label: '我的喜欢'
|
||||
},
|
||||
{
|
||||
type: 3,
|
||||
label: '最近观看'
|
||||
|
|
@ -57,15 +63,29 @@ async function selectByUserIdAjax() {
|
|||
limit: listData.size,
|
||||
classify: type.value
|
||||
});
|
||||
listData.list = res.records;
|
||||
if (listData.page == 1) {
|
||||
listData.list = res.records;
|
||||
} else {
|
||||
listData.list.push(...res.records);
|
||||
}
|
||||
if (res.currPage >= res.totalPage) {
|
||||
listData.status = 'nomore';
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
setTimeout(() => {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// 监听下拉结束
|
||||
onPullDownRefresh(() => {
|
||||
listData.page = 1;
|
||||
listData.status = 'loading';
|
||||
selectByUserIdAjax();
|
||||
});
|
||||
|
||||
onReachBottom(() => {
|
||||
listData.page++;
|
||||
selectByUserIdAjax();
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 209 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 676 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
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: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 385 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
3
uni.scss
3
uni.scss
|
|
@ -77,3 +77,6 @@ $uni-font-size-subtitle: 26px;
|
|||
$uni-color-paragraph: #3f536e; // 文章段落颜色
|
||||
$uni-font-size-paragraph: 15px;
|
||||
@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>
|
||||
```
|
||||
50
utils/app.js
50
utils/app.js
|
|
@ -1,31 +1,31 @@
|
|||
export function openApp(url){
|
||||
export function openApp(url) {
|
||||
// #ifdef H5
|
||||
window.location.href='com.hnsiyao.duanju://'
|
||||
window.location.href = 'com.hnsiyao.duanju://'
|
||||
// #endif
|
||||
}
|
||||
export function isAndroid(){
|
||||
export function isAndroid() {
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
const isA=systemInfo.platform === 'android'
|
||||
const isA = systemInfo.platform === 'android'
|
||||
// isAndroid=()=>{
|
||||
// return isA
|
||||
// }
|
||||
return isA
|
||||
}
|
||||
export function isIos(){
|
||||
export function isIos() {
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
const isIOS = /iOS/.test(systemInfo.platform);
|
||||
isIos=()=>{
|
||||
isIos = () => {
|
||||
return isIOS
|
||||
}
|
||||
return isIOS
|
||||
}
|
||||
export function isH5Android(){
|
||||
const token=uni.getStorageSync('token');
|
||||
export function isH5Android() {
|
||||
const token = uni.getStorageSync('token');
|
||||
console.log(isAndroid());
|
||||
if(isAndroid()&&token){
|
||||
if (isAndroid() && token) {
|
||||
uni.removeStorageSync('token')
|
||||
uni.navigateTo({
|
||||
url:'/pages/login/appEq'
|
||||
url: '/pages/login/appEq'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -40,3 +40,33 @@ export function returnIsSafari() {
|
|||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 路由跳转
|
||||
*/
|
||||
export function linkTo(path, isLogin = false) {
|
||||
if (isLogin) {
|
||||
let token = uni.getStorageSync('token')
|
||||
if (!token) {
|
||||
uni.showModal({
|
||||
title: '注意',
|
||||
content: '您还未登录，请登录后使用！',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: path
|
||||
})
|
||||
}
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: path
|
||||
})
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue