吆喝
This commit is contained in:
蔡同学
@@ -0,0 +1,736 @@
|
||||
<template>
|
||||
<view class="pay_box">
|
||||
<view class="noRecharge" v-if="is_check && system=='ios'">
|
||||
根据相关规范ios暂不可用此功能，请使用android手机体验
|
||||
</view>
|
||||
<view class="recharge" v-else>
|
||||
<view class="header_top">
|
||||
<text style="font-size: 32rpx;">解锁后可继续观看</text>
|
||||
<image @tap="close_pay_box" src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/static/fanhui.png"
|
||||
style="width: 36rpx;height: 36rpx;"></image>
|
||||
</view>
|
||||
<view class="vider_juji">
|
||||
<text style="font-size: 24rpx;">{{ videoSynopsis.name }} · 第{{ serialNo }}集</text>
|
||||
<text style="font-size: 24rpx;color: #333333;">本剧共{{ videoSynopsis.sum }}集</text>
|
||||
</view>
|
||||
<view class="vider_juji">
|
||||
<text style="font-size: 24rpx;">解锁本集需要： {{ videoSynopsis.beans }}金豆</text>
|
||||
</view>
|
||||
<view class="other_recharge">
|
||||
<text style="font-size: 28rpx;">金豆充值</text>
|
||||
<text style="font-size: 28rpx;color: #333333;font-weight: bold;">我的金豆:{{ userInfo.beans || 0 }}</text>
|
||||
</view>
|
||||
<view class="vipCarBox" v-if="payListGroupId==1">
|
||||
<view :class="[
|
||||
'vipCarItem',
|
||||
{'vipCarFirst':item.pay_type == 1},
|
||||
{'vipCarSecond': item.pay_type == 2},
|
||||
{'vipCarThird':item.pay_type == 3},
|
||||
{'vipCarFourth':item.pay_type == 4},
|
||||
] " v-for="item in list_pay" :key="item.id" @click="getSelectItemId(item)">
|
||||
<text class="icon" v-if="item.pay_tab">{{ item.pay_tab }}</text>
|
||||
<view class="moneyLine">
|
||||
<view class="money">￥{{ item.pay_money }}</view>
|
||||
<view class="beanBtn" v-if="item.pay_give_num && item.pay_type == 2">赠{{ item.pay_give_num }}金豆
|
||||
</view>
|
||||
<view class="moneyInfoBtn" v-if="item.pay_type == 4">解锁全集</view>
|
||||
</view>
|
||||
<text class="depict" v-if="item.pay_give_num && item.pay_type == 2">
|
||||
{{ item.pay_num }}金豆+{{ item.pay_give_num }}豆
|
||||
</text>
|
||||
<text class="depict" v-if="!item.pay_give_num && item.pay_type == 2">
|
||||
{{ item.pay_num }}金豆
|
||||
</text>
|
||||
<view class="explainText" v-if="item.pay_type != 2">
|
||||
<text v-if="item.pay_type == 1" style="color: #333333;">全部影片免费观看</text>
|
||||
<text v-if="item.pay_type == 3" style="color: #FF6900;">本剧订阅全集</text>
|
||||
<text v-if="item.pay_type == 4" style="color: #ffffff;">邀请好友拼团享返利</text>
|
||||
</view>
|
||||
<view class="choiceNum" v-if="item.menber_sel">{{ item.menber_sel }}%用户选择</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="vipCarBox vipCarBoxSecond" v-else>
|
||||
<view
|
||||
:class="['vipCarItem',{'border':item.is_red==1},{'der':item.pay_give_num == 0},{'one':item.pay_type == 1},{'vipCarFourth':item.pay_type == 4}]"
|
||||
v-for="item in list_pay" :key="item.id" @click="getSelectItemId(item)">
|
||||
<text class="rightIcon" v-if="item.pay_tab">{{ item.pay_tab }}</text>
|
||||
<view class="VipCardContent">
|
||||
<view :class="['carMoney',{'redColor':item.is_red==1}]">
|
||||
<text>{{ item.pay_money }}</text>
|
||||
元
|
||||
</view>
|
||||
<view class="carMoneyExplain" v-if="item.pay_give_money>0">多送{{ item.pay_give_money }}元</view>
|
||||
<!-- <view v-else :class="item.pay_type == 4?'carMoneyExplainText':'carMoneyExplain'">{{item.pay_type == 4?'解锁全集':' '}}</view>-->
|
||||
<view v-else class="carMoneyExplain"></view>
|
||||
</view>
|
||||
<view :class="['vipCarFooter',{'footerRedColor':item.is_red!=1}]">
|
||||
{{ item.remark ? item.remark : '' }}
|
||||
</view>
|
||||
<image v-if="item.is_finger" class="hands"
|
||||
src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/static/hands.gif" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="explainList">
|
||||
<text class="explainItem"> 充值代表接受
|
||||
<text class="explainText" @click="goAgreement(1)">《充值/退款协议》</text>
|
||||
和
|
||||
<text class="explainText" @click="goAgreement(2)">《会员服务协议》</text>
|
||||
</text>
|
||||
<text class="explainItem"> 本小程序共有{{ allVideoNum }}部剧正在热播</text>
|
||||
</view>
|
||||
|
||||
|
||||
<uni-popup ref="back_ref" type="center">
|
||||
<view class="teamPupCont">
|
||||
<view class="closeIcon" @click="closePup">
|
||||
<uni-icons type="closeempty" size="16" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="textBox">
|
||||
<view class="textLine">用户只能发起一次邀请</view>
|
||||
<view class="textLine">有效时间为24小时</view>
|
||||
<view class="textLine">分享好友拼团，拼成退差价</view>
|
||||
</view>
|
||||
<button open-type="share" class="inviteBtn">立即邀请</button>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
httpRequest
|
||||
} from '@/utils/request'
|
||||
import PAY from '@/utils/pay'
|
||||
const playletPlugin = requirePlugin('playlet-plugin')
|
||||
export default {
|
||||
name: "payDom",
|
||||
props: {
|
||||
playerId: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
srcAppid: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
dramaId: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
serialNo: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
extParam: {
|
||||
type: String,
|
||||
default: '',
|
||||
}
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
_isInitChargeDialog: false,
|
||||
list_pay: [],
|
||||
payListGroupId: 1,
|
||||
userInfo: {},
|
||||
videoSynopsis: {},
|
||||
vid: "",
|
||||
mid: '',
|
||||
system: "",
|
||||
payItemData: {},
|
||||
g_order_id: "",
|
||||
is_check: false,
|
||||
allVideoNum: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
serialNo(newValue, oldvalue) {
|
||||
console.log('ready get pay list')
|
||||
this.is_check = uni.getStorageSync('config').is_check == 1 ? true : false;
|
||||
this.userInfo = uni.getStorageSync('userinfo');
|
||||
this.system = uni.getSystemInfoSync().osName;
|
||||
this.initChargeDialog();
|
||||
this.getVideoData();
|
||||
this.getAllVideoNum();
|
||||
this.getPayList();
|
||||
},
|
||||
playerId(newValue, oldvalue) {
|
||||
console.log('this.initChargeDialog', newValue)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
goAgreement(num) {
|
||||
const pm = this.getPlayerManager()
|
||||
pm.navigateTo({
|
||||
url: '/pagesA/agreement/agreement?id=' + num
|
||||
})
|
||||
},
|
||||
initChargeDialog() {
|
||||
if (!this.playerId) return
|
||||
if (this._isInitChargeDialog) return
|
||||
this._isInitChargeDialog = true;
|
||||
this.g_order_id = uni.getStorageSync('g_order_id');
|
||||
const pm = this.getPlayerManager()
|
||||
if (pm) {
|
||||
let extparams = pm.getInfo().extParam;
|
||||
if (extparams) {
|
||||
if (extparams.indexOf('%') < 0) {
|
||||
this.vid = JSON.parse(extparams).vid;
|
||||
} else {
|
||||
this.vid = JSON.parse(decodeURIComponent(extparams)).vid
|
||||
}
|
||||
console.log('ChargeDialog res', extparams)
|
||||
}
|
||||
|
||||
// console.log(this.pm.getInfo())
|
||||
// 注册弹窗显示事件
|
||||
pm.onShowChargeDialog(this.onShowChargeDialog.bind(this))
|
||||
// 注册弹窗隐藏事件
|
||||
pm.onHideChargeDialog(this.onHideChargeDialog.bind(this))
|
||||
|
||||
}
|
||||
},
|
||||
getPlayerManager() {
|
||||
return playletPlugin.PlayletManager.getPageManager(this.playerId);
|
||||
},
|
||||
onShowChargeDialog() {
|
||||
console.log('onShowChargeDialog bbs')
|
||||
this.getPayList();
|
||||
},
|
||||
onHideChargeDialog() {
|
||||
// this.$refs.back_ref.close();
|
||||
},
|
||||
close_pay_box(){
|
||||
const pm = this.getPlayerManager()
|
||||
pm.hideChargeDialog();
|
||||
},
|
||||
getAllVideoNum() {
|
||||
httpRequest({
|
||||
url: "/api/video/videoCount",
|
||||
method: "GET"
|
||||
}).then(res => {
|
||||
this.allVideoNum = res.data.count
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
// 视频信息
|
||||
getVideoData() {
|
||||
let that = this;
|
||||
httpRequest({
|
||||
url: "/api/video/dramaIdToVideoId",
|
||||
method: "GET",
|
||||
data: {
|
||||
drama_id: this.dramaId,
|
||||
no: this.serialNo
|
||||
}
|
||||
}).then(res => {
|
||||
that.videoSynopsis = res.data;
|
||||
that.vid = res.data.drama_vid
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
//充值方式
|
||||
getPayList() {
|
||||
httpRequest({
|
||||
url: "/api/beans/payList",
|
||||
method: "GET",
|
||||
data: {
|
||||
gid: uni.getStorageSync('g_order_id') || '',
|
||||
vs_id: uni.getStorageSync('vs_id_code'),
|
||||
token: this.userInfo.token,
|
||||
video_list_id: this.vid
|
||||
}
|
||||
}).then(res => {
|
||||
if(res.code == 1){
|
||||
this.payListGroupId = uni.getStorageSync('config').pay_tpl;
|
||||
// this.payListGroupId = 2;
|
||||
this.list_pay = res.data
|
||||
}else if(res.code ==50){
|
||||
this.is_check = true;
|
||||
}
|
||||
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
getSelectItemId(item) {
|
||||
let that = this;
|
||||
httpRequest({
|
||||
url: "/api/video/dramaIdToVideoId",
|
||||
method: "GET",
|
||||
data: {
|
||||
drama_id: that.dramaId,
|
||||
no: that.serialNo
|
||||
}
|
||||
}).then(res => {
|
||||
that.mid = res.data.id;
|
||||
that.selectPayItem(item)
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
selectPayItem(item) {
|
||||
let that = this,
|
||||
pms = that.getPlayerManager();
|
||||
this.payItemData = item;
|
||||
let gid = "",
|
||||
gvid = uni.getStorageSync('g_order_vid');
|
||||
if (gvid) {
|
||||
if (gvid == that.vid) {
|
||||
gid = uni.getStorageSync('g_order_id') || ''
|
||||
}
|
||||
}
|
||||
if (this.system == 'android') {
|
||||
wx.login({
|
||||
success(login) {
|
||||
let upData = {
|
||||
new: 1,
|
||||
id: item.id,
|
||||
pay_type: 5,
|
||||
code: login.code,
|
||||
token: that.userInfo.token,
|
||||
uid: that.userInfo.id,
|
||||
vid: that.mid,
|
||||
ad_code: uni.getStorageSync('get_ad_code'),
|
||||
gid: gid,
|
||||
}
|
||||
PAY.pays.serverCreatOrder(upData).then(resa => {
|
||||
PAY.pays.wxAppletAndroidPay(resa.data.data).then(payRes => {
|
||||
let payParam = {
|
||||
status: 'paySuccess',
|
||||
serialNo: that.serialNo,
|
||||
gOrderId: "",
|
||||
vid: that.vid,
|
||||
oid: resa.data.oid
|
||||
}
|
||||
if (that.payItemData.pay_type == 4) {
|
||||
// that.$refs.back_ref.open('center');
|
||||
that.payEnd(payParam)
|
||||
} else {
|
||||
pms.emitCustomEvent('chargeEnd', payParam)
|
||||
}
|
||||
}).catch(payErr => {
|
||||
console.log(payErr)
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
let upData = {
|
||||
new: 1,
|
||||
id: item.id,
|
||||
sum: 1,
|
||||
buytype: "微信",
|
||||
pricebuy: item.pay_money,
|
||||
token: that.userInfo.token,
|
||||
uid: that.userInfo.id,
|
||||
vid: that.mid,
|
||||
wxlx: "wxxcx",
|
||||
openid: uni.getStorageSync("openid"),
|
||||
gid: gid,
|
||||
};
|
||||
PAY.pays.wxIosCreatOrder(upData).then(resa => {
|
||||
PAY.pays.wxAppletIosPay(resa.data.data).then(payRes => {
|
||||
let payParam = {
|
||||
status: 'paySuccess',
|
||||
serialNo: that.serialNo,
|
||||
gOrderId: "",
|
||||
vid: that.vid,
|
||||
oid: resa.data.oid
|
||||
}
|
||||
if (that.payItemData.pay_type == 4) {
|
||||
// that.$refs.back_ref.open('center');
|
||||
that.payEnd(payParam)
|
||||
} else {
|
||||
pms.emitCustomEvent('chargeEnd', payParam)
|
||||
}
|
||||
}).catch(payErr => {
|
||||
console.log('ios pay err', payErr)
|
||||
})
|
||||
}).catch(err => {
|
||||
console.log('creat ios order err', err)
|
||||
})
|
||||
}
|
||||
},
|
||||
payEnd(payParam) {
|
||||
let that = this;
|
||||
console.log("payEnd getOrderId", payParam)
|
||||
console.log(that.vid)
|
||||
|
||||
httpRequest({
|
||||
url: "/api/order/getGroupOrderId",
|
||||
method: "POST",
|
||||
data: {
|
||||
vid: that.vid
|
||||
}
|
||||
}).then(res => {
|
||||
console.log("payEnd getOrderId Success", res)
|
||||
let pms = that.getPlayerManager();
|
||||
payParam.gOrderId = res.data.gid;
|
||||
pms.emitCustomEvent('chargeEnd', payParam)
|
||||
})
|
||||
},
|
||||
|
||||
// wxxcx_xuni(data) {
|
||||
// console.log(data)
|
||||
// let that = this,
|
||||
// pms = that.getPlayerManager();
|
||||
// uni.requestVirtualPayment({
|
||||
// signData: JSON.stringify({
|
||||
// buyQuantity: data.signData.buyQuantity,
|
||||
// currencyType: data.signData.currencyType,
|
||||
// env: data.signData.env,
|
||||
// goodsPrice: data.signData.goodsPrice,
|
||||
// offerId: data.signData.offerId,
|
||||
// outTradeNo: data.signData.outTradeNo,
|
||||
// platform: data.signData.platform,
|
||||
// productId: data.signData.productId,
|
||||
// attach: data.signData.attach,
|
||||
// }),
|
||||
// paySig: data.paySig,
|
||||
// signature: data.signature,
|
||||
// mode: 'short_series_coin',
|
||||
// success(res) {
|
||||
// let payParam = {
|
||||
// status: 'paySuccess',
|
||||
// serialNo: that.serialNo,
|
||||
// gOrderId: "",
|
||||
// vid: that.vid,
|
||||
// oid: data.oid
|
||||
// }
|
||||
// if (that.payItemData.pay_type == 4) {
|
||||
// // that.$refs.back_ref.open('center');
|
||||
// that.payEnd(payParam)
|
||||
// } else {
|
||||
// pms.emitCustomEvent('chargeEnd', payParam)
|
||||
// }
|
||||
// },
|
||||
// fail({errMsg, errCode}) {
|
||||
// console.log(errMsg, errCode, data.signature)
|
||||
// },
|
||||
// })
|
||||
// },
|
||||
// wxxcx(data) {
|
||||
// let that = this,
|
||||
// pms = that.getPlayerManager();
|
||||
// uni.requestPayment({
|
||||
// "provider": 'wxpay',
|
||||
// "appId": data.appId,
|
||||
// "timeStamp": data.timeStamp + '',
|
||||
// "nonceStr": data.nonceStr,
|
||||
// "package": data.package,
|
||||
// "signType": 'MD5',
|
||||
// "paySign": data.sign,
|
||||
// success: function (res1) {
|
||||
// let payParam = {
|
||||
// status: 'paySuccess',
|
||||
// serialNo: that.serialNo,
|
||||
// gOrderId: "",
|
||||
// vid: that.vid,
|
||||
// oid: data.oid
|
||||
// }
|
||||
// if (that.payItemData.pay_type == 4) {
|
||||
// // that.$refs.back_ref.open('center');
|
||||
//
|
||||
// that.payEnd(payParam)
|
||||
// } else {
|
||||
// pms.emitCustomEvent('chargeEnd', payParam)
|
||||
// }
|
||||
// console.log('success:' + JSON.stringify(res1));
|
||||
// },
|
||||
// fail: function (err1) {
|
||||
// console.log('fail:' + JSON.stringify(err1));
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
|
||||
|
||||
closePup() {
|
||||
// this.$refs.back_ref.close();
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.noRecharge {
|
||||
font-size: 40rpx;
|
||||
line-height: 200rpx;
|
||||
text-align: center;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.pay_box {
|
||||
width: 750rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 28rpx 28rpx 0 0;
|
||||
}
|
||||
|
||||
.header_top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 24rpx 12rpx 24rpx;
|
||||
}
|
||||
|
||||
.vider_juji {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.other_recharge {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.vipCarBox {
|
||||
padding: 26rpx;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.vipCarItem {
|
||||
width: 336rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.vipCarFirst {
|
||||
background-image: linear-gradient(to right, #FF9A54, #FF3C3C);
|
||||
}
|
||||
|
||||
.vipCarSecond {
|
||||
background-image: linear-gradient(to right, #FF9A54, #FF3C3C);
|
||||
}
|
||||
|
||||
.vipCarThird {
|
||||
background-image: url('https://wx.yaohe.hnjrdzkj.xyz/static/wechat/static/taoc2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.vipCarFourth {
|
||||
background-image: url('https://wx.yaohe.hnjrdzkj.xyz/static/wechat/static/dingyue_a.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
color: #333333;
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
line-height: 35rpx;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 0rpx 0rpx 16rpx 0rpx;
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, #FFC833 100%);
|
||||
}
|
||||
|
||||
.vipCarThird .icon {
|
||||
background: linear-gradient(180deg, #FF8F8F 0%, #FF3333 100%);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.vipCarFourth .icon {
|
||||
background: linear-gradient(90deg, #FFBC48 0%, #FF5D41 100%);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.moneyLine {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 0 20rpx;
|
||||
margin-top: 45rpx;
|
||||
}
|
||||
|
||||
.vipCarFourth .moneyLine {
|
||||
color: #FF300A;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.money {
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.vipCarFourth .money {
|
||||
color: #FF300A;
|
||||
}
|
||||
|
||||
.vipCarThird .money {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.beanBtn {
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 22rpx;
|
||||
color: #333333;
|
||||
line-height: 48rpx;
|
||||
padding: 0 20rpx;
|
||||
background: linear-gradient(180deg, #FFF2D1 0%, #FFC323 100%);
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
|
||||
.depict {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
line-height: 44rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
}
|
||||
|
||||
.explainText {
|
||||
margin-top: 26rpx;
|
||||
padding-left: 20rpx;
|
||||
|
||||
}
|
||||
|
||||
.explainText text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.choiceNum {
|
||||
text-align: right;
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
color: #FFCA3A;
|
||||
line-height: 32rpx;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
|
||||
// 新版
|
||||
.vipCarBoxSecond {
|
||||
background: #eeeeee;
|
||||
}
|
||||
|
||||
.VipCardContent {
|
||||
padding: 40rpx 0;
|
||||
}
|
||||
|
||||
.vipCarBoxSecond .vipCarItem {
|
||||
background: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
|
||||
}
|
||||
|
||||
.vipCarBoxSecond .border {
|
||||
border: 6rpx solid #dc3a35;
|
||||
background: #f6e2af;
|
||||
}
|
||||
|
||||
.rightIcon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -20rpx;
|
||||
line-height: 40rpx;
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
padding: 0 15rpx;
|
||||
border-radius: 0 12rpx 0 12rpx;
|
||||
background: #dc3a35;
|
||||
max-width: 336rpx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.carMoney {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.carMoney text {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.carMoneyExplain {
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
line-height: 30rpx;
|
||||
height: 30rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.vipCarFooter {
|
||||
line-height: 45rpx;
|
||||
background: #dc3a35;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.redColor {
|
||||
color: #dc3a35;
|
||||
}
|
||||
|
||||
.footerRedColor {
|
||||
line-height: 50rpx;
|
||||
background: #fde6e6;
|
||||
color: #dc3a35;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
border-radius: 0 0 12rpx 12rpx;
|
||||
}
|
||||
|
||||
.hands {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
bottom: 0rpx;
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
z-index: 300;
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
|
||||
.explainList {
|
||||
padding: 40rpx 0 20rpx 30rpx;
|
||||
line-height: 30rpx;
|
||||
|
||||
.explainItem {
|
||||
font-size: 22rpx;
|
||||
|
||||
.explainText {
|
||||
color: #0a5ab6;
|
||||
padding: 0 10rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,253 @@
|
||||
<template>
|
||||
<view style="position: relative;">
|
||||
<view class="sign_conent_box">
|
||||
<view class="sign_conent">
|
||||
<view class="sign_conent_title">
|
||||
<text class="zitiyangshi">你已连续签到</text>
|
||||
<span class="sign_conent_title_span zitiyangshi">{{qdjl}}</span>
|
||||
<text class="zitiyangshi">天</text>
|
||||
</view>
|
||||
<view class="ft12 mt10" style="color: #999;">签到领金豆，新剧抢先看。连续签到7天领惊喜礼包</view>
|
||||
<view class="sign_list_aligns"
|
||||
style="background-color: #fff;padding: 30rpx;margin-top: 48rpx;border-radius: 10rpx;">
|
||||
<scroll-view class="scroll-view_H" scroll-x="true" show-scrollbar='false'>
|
||||
<view class="scroll_view_items" v-for="(item, index) in sign_list" :key="index">
|
||||
<!-- -->
|
||||
<view class="scroll_view_itemsv">
|
||||
<view class="scroll_view_item">
|
||||
<view class="scroll_view_item_img_box">
|
||||
<view v-if="item.xz==2"
|
||||
style="width: 80rpx;height: 104rpx;background: linear-gradient(360deg, #64C700 0%, #85ED1C 100%);text-align: center;border-radius: 8rpx;">
|
||||
<image src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/jindou.png"
|
||||
style="width: 54rpx;height: 56rpx;margin-top: 10rpx;"></image>
|
||||
<view
|
||||
style="color: #fff;font-size: 30rpx;position: absolute;top: 56rpx;left: 10rpx;">
|
||||
+{{item.beans}}</view>
|
||||
</view>
|
||||
<!-- <image v-if="item.xz==2" :src="statics.xuanzhong" class="scroll_view_item_img" mode=""></image> -->
|
||||
<!-- <image v-if="item.xz==1" :src="statics.yuanq" class="scroll_view_item_img" mode=""></image> -->
|
||||
<!-- <view v-if="item.xz==1" class="scroll_view_item_top">{{ item.discount }}</view> -->
|
||||
<view v-if="item.xz==1"
|
||||
style="width: 80rpx;height: 104rpx;background-color: #F4F4F4;text-align: center;border-radius: 8rpx;">
|
||||
<image src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/jindou.png"
|
||||
style="width: 54rpx;height: 56rpx;margin-top: 10rpx;"></image>
|
||||
<view
|
||||
style="color: #999999;font-size: 30rpx;position: absolute;top: 56rpx;left: 10rpx;">
|
||||
+{{item.beans}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="scroll_view_item_tips" style="margin-top: 60rpx;">{{ item.day }}</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="sign_conent_btn" style="margin-top: 20rpx;" @click="cksigin()">今日签到</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
sign_list: {},
|
||||
qdjl: 0,
|
||||
tdsy: 0,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
cksigin() {
|
||||
if (uni.getStorageSync("userinfo")) {
|
||||
let this_ = this
|
||||
this_.$httpRequest({
|
||||
url:"/api/user/qingdao",
|
||||
method:"GET",
|
||||
data:{
|
||||
tdsy: this_.tdsy
|
||||
}
|
||||
}).then(res=>{
|
||||
uni.showModal({
|
||||
title: '温馨提示',
|
||||
content: res.msg,
|
||||
showCancel: false,
|
||||
success: modelRes => {
|
||||
if (res.code == 1) {
|
||||
this_.$emit('cksigin')
|
||||
}
|
||||
}
|
||||
});
|
||||
}).catch(err=>{
|
||||
console.log(err)
|
||||
})
|
||||
} else {
|
||||
uni.showModal({
|
||||
title: '温馨提示',
|
||||
content: '请先登录',
|
||||
showCancel: true,
|
||||
confirmText: "登录",
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
} else if (res.cancel) {
|
||||
//uni.navigateBack();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// @font-face {
|
||||
// font-family: "MyFont";
|
||||
|
||||
// }
|
||||
|
||||
.zitiyangshi {
|
||||
font-family: 'MyFont';
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
-webkit-appearance: none;
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
|
||||
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
|
||||
display: none;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
-webkit-appearance: none;
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.sign_conent_box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 30upx;
|
||||
|
||||
.sign_conent {
|
||||
width: 686upx;
|
||||
// background: white;
|
||||
// border-radius: 20upx;
|
||||
padding: 0upx 0upx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.sign_conent_title {
|
||||
width: 100%;
|
||||
font-size: 36upx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
|
||||
.sign_conent_title_span {
|
||||
color: #64C700 !important;
|
||||
font-size: 48rpx;
|
||||
margin-left: 12rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.sign_list_aligns {
|
||||
width: 100%;
|
||||
padding: 30upx 0 30upx 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.scroll-view_H {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
|
||||
.scroll_view_items {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.scroll_view_itemsv {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.scroll_view_item {
|
||||
.scroll_view_item_img_box {
|
||||
width: 100upx;
|
||||
height: 30upx;
|
||||
position: relative;
|
||||
|
||||
.scroll_view_item_top {
|
||||
font-size: 24upx;
|
||||
color: #bfbfbf;
|
||||
// font-weight: bold;
|
||||
position: absolute;
|
||||
top: 14upx;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.scroll_view_item_bottom {
|
||||
font-size: 12upx;
|
||||
color: #ffe29d;
|
||||
position: absolute;
|
||||
bottom: 18upx;
|
||||
left: 42upx;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll_view_item_tips {
|
||||
width: 60upx;
|
||||
text-align: center;
|
||||
font-size: 24upx;
|
||||
padding-top: 40upx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.scroll_view_item_img {
|
||||
width: 60upx;
|
||||
height: 60upx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll_xian {
|
||||
width: 40upx;
|
||||
height: 4upx;
|
||||
background: #bfbfbf;
|
||||
margin-top: 30upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sign_conent_btn {
|
||||
width: 100%;
|
||||
border-radius: 45upx;
|
||||
background: linear-gradient(#ACFD28 0%, #0AD89D 100%);
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
padding: 22upx 0;
|
||||
font-size: 32upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<view>
|
||||
<swiper class="home-swiper-banner" indicator-color="rgba(255, 255, 255, 0.3)" indicator-active-color="#FFFFFF" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
|
||||
<swiper-item v-for="(item,index) in banners" :key="index" @tap="detail(item.link,0)">
|
||||
<image :src="item.src" mode="aspectFill" style="border-radius: 16rpx"></image>
|
||||
</swiper-item>
|
||||
|
||||
</swiper>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
props: ['banners'],
|
||||
data(){
|
||||
return {
|
||||
banners1:[],
|
||||
}
|
||||
},
|
||||
|
||||
methods:{
|
||||
detail(url,mid) {
|
||||
console.log('ok')
|
||||
console.log(url)
|
||||
var fxpid = 1
|
||||
if (uni.getStorageSync("userinfo")) {
|
||||
fxpid = uni.getStorageSync("userinfo").id
|
||||
}
|
||||
|
||||
uni.navigateTo({
|
||||
url: '/'+url + '?mid=' + mid + '&fxpid=' + fxpid
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.home-swiper-banner{
|
||||
height: 350rpx;
|
||||
box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.home-swiper-banner image{
|
||||
width: 100%;
|
||||
height: 350rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- style="margin-bottom: 80upx;" -->
|
||||
<view class="pd16_15">
|
||||
<view class="flex alcenter space" style="margin-bottom: 30upx;">
|
||||
<view class="flex alcenter">
|
||||
<image style="width: 28rpx;height: 28rpx;"
|
||||
src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/star.png"></image>
|
||||
<text class="ft16 ftw600 cl-main ml15">最新热播</text>
|
||||
</view>
|
||||
<navigator url="/pages/client/tuan/search">
|
||||
<view class="ft14 cl-notice">大家都在看的热播好剧</view>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="flex " style="overflow-x: auto; flex-wrap: wrap;">
|
||||
<!-- <block v-for="(value,key) in datasa" :key="key">
|
||||
<view class=" pb10 mb15 videoItem" @click="detail(value.id,0)">
|
||||
<image class="integral-mall-goods" mode="scaleToFill" :src="value.img"></image>
|
||||
<view class=" ft14 ftw500 text-over cl-main">{{ value.name }}</view>
|
||||
<view class=" ft10 ftw500 cl-999 text-over cl-main">{{ value.text }}</view>
|
||||
</view>
|
||||
</block> -->
|
||||
|
||||
<block v-for="(value,key) in datasa" :key="key">
|
||||
<view class=" pb10 defaultItem" style="width:207rpx; display: inline-block; border-radius:20rpx;"
|
||||
@click="detail(value)">
|
||||
<image class="integral-mall-goods" mode="scaleToFill" :src="value.img"></image>
|
||||
<view class=" ft14 ftw500 text-over cl-main">{{ value.name }}</view>
|
||||
<view class=" ft10 ftw500 cl-999 text-over cl-main">{{ value.text }}</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="home-main" style="height: 50upx;">
|
||||
<com-copyright></com-copyright>
|
||||
</view> -->
|
||||
|
||||
<dialog-couponshareget @loginAct="showLoginCouponShareGet" v-if="showCouponShareGet"
|
||||
@closed="showCouponShareGet = false"></dialog-couponshareget>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['datasa'],
|
||||
data() {
|
||||
return {
|
||||
isLogin: false,
|
||||
showBirthday: false,
|
||||
showLogin: false,
|
||||
showQrcode: false,
|
||||
showCouponShareGet: false,
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
|
||||
// uni.setNavigationBarTitle({
|
||||
// title: '夜趣小视频'
|
||||
// });
|
||||
|
||||
// setTimeout(()=>{
|
||||
// this.showCouponShareGet = true;
|
||||
// },1000);
|
||||
},
|
||||
methods: {
|
||||
//'/pages/client/tuan/detail?id='+value.id
|
||||
detail(data) {
|
||||
uni.navigateTo({
|
||||
url: '/pagesA/player/detailPlayer?vid=' + data.id + '&mid=' + 0
|
||||
})
|
||||
},
|
||||
showLoginAct() {
|
||||
this.showLogin = true;
|
||||
},
|
||||
showLoginCouponShareGet() {
|
||||
this.showLogin = true;
|
||||
},
|
||||
loginYes() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home-header {
|
||||
height: 304rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: #363B4D;
|
||||
border-radius: 0rpx 0rpx 48rpx 48rpx;
|
||||
}
|
||||
|
||||
.home-main {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: -156rpx;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.home-mendian {
|
||||
width: 100%;
|
||||
height: 84rpx;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 42rpx;
|
||||
}
|
||||
|
||||
.tuan-product-l {
|
||||
width: 320rpx;
|
||||
height: 240rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #F2F2F2;
|
||||
}
|
||||
|
||||
.videoItem {
|
||||
width: 330rpx;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.integral-mall-goods {
|
||||
width: 330rpx;
|
||||
background: #F2F2F2;
|
||||
border-radius: 16upx;
|
||||
}
|
||||
|
||||
|
||||
.integral-mall-goods {
|
||||
min-width: 206rpx;
|
||||
width: 100%;
|
||||
height: 280rpx;
|
||||
background: #F2F2F2;
|
||||
border-radius: 16upx;
|
||||
}
|
||||
|
||||
.tuan-product-r {
|
||||
width: calc(100% - 320rpx);
|
||||
}
|
||||
|
||||
.defaultItem {
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.defaultItem:nth-of-type(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<view class="flex alcenter space">
|
||||
|
||||
<button v-if="getGridOne!=null && getGridOne.model=='share'" open-type="share" class="grid-left-box">
|
||||
<view class="main pd16_15">
|
||||
<view class="ft16 ftw600 cl-default">{{getGridOne.name}}</view>
|
||||
<view class="mt4 ft12" :style="{color:tempColor}">{{getGridOne.desc}}</view>
|
||||
<view class="btn-go" :style="{background:tempColor}">GO<text class="iconfont iconicon_arrow_small ft12"></text></view>
|
||||
</view>
|
||||
<image class="left-bg" :src="statics.gridLeft"></image>
|
||||
<image class="left-icon" :src="getGridOne.icon"></image>
|
||||
</button>
|
||||
<view v-if="getGridOne!=null && getGridOne.model!='share'" :data-model="getGridOne.model" @click="linkTo" class="grid-left-box">
|
||||
<view class="main pd16_15">
|
||||
<view class="ft16 ftw600 cl-default">{{getGridOne.name}}</view>
|
||||
<view class="mt4 ft12" :style="{color:tempColor}">{{getGridOne.desc}}</view>
|
||||
<view class="btn-go" :style="{background:tempColor}">GO<text class="iconfont iconicon_arrow_small ft12"></text></view>
|
||||
</view>
|
||||
<image class="left-bg" :src="statics.gridLeft"></image>
|
||||
<image class="left-icon" :src="getGridOne.icon"></image>
|
||||
</view>
|
||||
<view>
|
||||
<button v-if="getGridTwo!=null && getGridTwo.model=='share'" open-type="share" class="grid-right-box">
|
||||
<view class="main pd16_15">
|
||||
<view class="ft16 ftw600 cl-default">{{getGridTwo.name}}</view>
|
||||
<view class="mt4 ft12" :style="{color:tempColor}">{{getGridTwo.desc}}</view>
|
||||
<view class="btn-go" :style="{background:tempColor}">GO<text class="iconfont iconicon_arrow_small ft12"></text></view>
|
||||
</view>
|
||||
<image class="right-bg" :src="statics.gridRight"></image>
|
||||
<image class="right-icon" :src="getGridTwo.icon"></image>
|
||||
</button>
|
||||
<view v-if="getGridTwo!=null && getGridTwo.model!='share'" :data-model="getGridTwo.model" @click="linkTo" class="grid-right-box">
|
||||
<view class="main pd16_15">
|
||||
<view class="ft16 ftw600 cl-default">{{getGridTwo.name}}</view>
|
||||
<view class="mt4 ft12" :style="{color:tempColor}">{{getGridTwo.desc}}</view>
|
||||
<view class="btn-go" :style="{background:tempColor}">GO<text class="iconfont iconicon_arrow_small ft12"></text></view>
|
||||
</view>
|
||||
<image class="right-bg" :src="statics.gridRight"></image>
|
||||
<image class="right-icon" :src="getGridTwo.icon"></image>
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<button v-if="getGridThree!=null && getGridThree.model=='share'" open-type="share" class="grid-right-box">
|
||||
<view class="main pd16_15">
|
||||
<view class="ft16 ftw600 cl-default">{{getGridThree.name}}</view>
|
||||
<view class="mt4 ft12" :style="{color:tempColor}">{{getGridThree.desc}}</view>
|
||||
<view class="btn-go" :style="{background:tempColor}">GO<text class="iconfont iconicon_arrow_small ft12"></text></view>
|
||||
</view>
|
||||
<image class="right-bg" :src="statics.gridRight"></image>
|
||||
<image class="right-icon" :src="getGridThree.icon"></image>
|
||||
</button>
|
||||
<view v-if="getGridThree!=null && getGridThree.model!='share'" :data-model="getGridThree.model" @click="linkTo" class="grid-right-box">
|
||||
<view class="main pd16_15">
|
||||
<view class="ft16 ftw600 cl-default">{{getGridThree.name}}</view>
|
||||
<view class="mt4 ft12" :style="{color:tempColor}">{{getGridThree.desc}}</view>
|
||||
<view class="btn-go" :style="{background:tempColor}">GO<text class="iconfont iconicon_arrow_small ft12"></text></view>
|
||||
</view>
|
||||
<image class="right-bg" :src="statics.gridRight"></image>
|
||||
<image class="right-icon" :src="getGridThree.icon"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return {
|
||||
gridData:[
|
||||
{name:'VIP特惠',desc:'尊享会员折上折',model:'tuan',icon:this.$config.staticUrl +'vipcard_home_tehui@2x.png',show:1},
|
||||
{name:'领优惠券',desc:'领券更省钱',model:'coupon',icon:this.$config.staticUrl +'vipcard_home_coupon@2x.png',show:1},
|
||||
{name:'邀请好友',desc:'越邀请，越优惠',model:'share',icon:this.$config.staticUrl +'vipcard_home_invite@2x.png',show:0},
|
||||
{name:'积分商城',desc:'小积分兑豪礼',model:'integral',icon:this.$config.staticUrl +'vipcard_home_integralmall@2x.png',show:1},
|
||||
{name:'开通次卡',desc:'省钱升级必备',model:'card',icon:this.$config.staticUrl +'vipcard_home_cika@2x.png',show:0},
|
||||
]
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
getGridDatas(){
|
||||
let arr = new Array;
|
||||
for(var a in this.gridData){
|
||||
if(this.gridData[a].show == 1){
|
||||
arr.push(this.gridData[a]);
|
||||
}
|
||||
}
|
||||
return arr;
|
||||
},
|
||||
getGridOne(){
|
||||
return this.getGridDatas[0] ? this.getGridDatas[0] : null;
|
||||
},
|
||||
getGridTwo(){
|
||||
return this.getGridDatas[1] ? this.getGridDatas[1] : null;
|
||||
},
|
||||
getGridThree(){
|
||||
return this.getGridDatas[2] ? this.getGridDatas[2] : null;
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
linkTo(e){
|
||||
let model = e.currentTarget.dataset.model;
|
||||
let url = '';
|
||||
switch(model){
|
||||
case 'coupon':
|
||||
url = '/pages/client/coupon/index';
|
||||
break;
|
||||
case 'integral':
|
||||
url = '/pages/client/integral/index';
|
||||
break;
|
||||
case 'card':
|
||||
url = '/pages/client/card/index';
|
||||
break;
|
||||
case 'tuan':
|
||||
url = '/pages/client/tuan/index';
|
||||
break;
|
||||
}
|
||||
if(url == '') return;
|
||||
uni.navigateTo({
|
||||
url:url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.grid-left-box{
|
||||
width: 330rpx;
|
||||
height: 430rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
|
||||
border-radius: 32rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
text-align: left;
|
||||
}
|
||||
.grid-right-box{
|
||||
width: 330rpx;
|
||||
height: 200rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
|
||||
border-radius: 32rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
text-align: left;
|
||||
}
|
||||
.grid-left-box .main,.grid-right-box .main{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
}
|
||||
.grid-left-box .left-bg{
|
||||
width: 100%;
|
||||
height: 140rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.grid-left-box .left-icon{
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.grid-right-box .right-icon{
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.grid-right-box .right-bg{
|
||||
width: 100%;
|
||||
height: 74rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.btn-go{
|
||||
display: block;
|
||||
width: 92rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 20rpx;
|
||||
text-align: center;
|
||||
margin-top: 40rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
font-style:italic;
|
||||
}
|
||||
.btn-go text{
|
||||
font-weight: 400;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="pd16_15" style="margin-bottom: 80upx;">
|
||||
<view class="" style="">
|
||||
<block v-for="(value,key) in datasa" :key="key">
|
||||
<view @click="detail(value.id,0)" style="" class="flex alcenter mb16 showStyle">
|
||||
<image mode="aspectFill" class="tuan-product-l" :src="value.img"></image>
|
||||
<!-- <view class="btn-mini" style="position: absolute; top: 40upx; left: 280upx; border-radius: 10upx;font-size: 18upx;width: 60upx; height: 36upx;" :style="getBtnStyle">{{value.lxname}}</view> -->
|
||||
<view class="tuan-product-r pl15">
|
||||
<view class="ft16 ftw600 cl-main text-over1">{{value.name}}</view>
|
||||
<view class="mt5">
|
||||
<text class="ft14 cl-main text-over4" style="line-height: 50upx;">{{value.story}}</text>
|
||||
</view>
|
||||
<!-- <view class="mt16 flex space alcenter">
|
||||
<view class="ft14 cl-notice">{{value.mname}}</view>
|
||||
<view class="btn-vip-adviser ml15">继续观看</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class="home-main" style="height: 50upx;">
|
||||
<!-- <com-copyright></com-copyright> -->
|
||||
</view>
|
||||
|
||||
<!-- <dialog-couponshareget @loginAct="showLoginCouponShareGet" v-if="showCouponShareGet" @closed="showCouponShareGet = false"></dialog-couponshareget>-->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
props: ['datasa'],
|
||||
data(){
|
||||
return {
|
||||
isLogin:false,
|
||||
showBirthday:false,
|
||||
showLogin:false,
|
||||
showQrcode:false,
|
||||
showCouponShareGet:false,
|
||||
}
|
||||
},
|
||||
|
||||
created(){
|
||||
|
||||
// uni.setNavigationBarTitle({
|
||||
// title: '夜趣小视频'
|
||||
// });
|
||||
|
||||
// setTimeout(()=>{
|
||||
// this.showCouponShareGet = true;
|
||||
// },1000);
|
||||
},
|
||||
methods:{
|
||||
//'/pages/client/tuan/detail?id='+value.id
|
||||
detail(vid,mid){
|
||||
uni.navigateTo({
|
||||
url:'/pages/client/tuan/detail?vid='+vid+'&mid='+mid
|
||||
})
|
||||
},
|
||||
showLoginAct(){
|
||||
this.showLogin = true;
|
||||
},
|
||||
showLoginCouponShareGet(){
|
||||
this.showLogin = true;
|
||||
},
|
||||
loginYes(){
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.showStyle::before{
|
||||
content:'';
|
||||
position:'absolute';
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgba(31, 33, 41, 0.4);
|
||||
z-index:-1;
|
||||
backdrop-filter:blur(80px);
|
||||
}
|
||||
.showStyle{
|
||||
position: relative;
|
||||
}
|
||||
.home-header{
|
||||
height: 304rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: #363B4D;
|
||||
border-radius: 0rpx 0rpx 48rpx 48rpx;
|
||||
}
|
||||
.home-main{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: -156rpx;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
.home-mendian{
|
||||
width: 100%;
|
||||
height: 84rpx;
|
||||
background:rgba(255,255,255,0.1);
|
||||
border-radius: 42rpx;
|
||||
}
|
||||
|
||||
.tuan-product-l{
|
||||
width: 200rpx;
|
||||
height: 260rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #F2F2F2;
|
||||
}
|
||||
.tuan-product-r{
|
||||
width: calc(100% - 200rpx);
|
||||
height:260rpx;
|
||||
}
|
||||
.btn-vip-adviser{
|
||||
width: 200rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
/* font-weight: 600; */
|
||||
background: #FF6600;
|
||||
color:#FFFFFF;
|
||||
}
|
||||
.integral-mall-goods{
|
||||
width: 100%;
|
||||
height: 280rpx;
|
||||
background: #F2F2F2;
|
||||
border-radius: 16upx;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<view>
|
||||
<view v-if="userinfo.isLogin" class="box pd16_15">
|
||||
<navigator url="/pages/client/vipcard/index">
|
||||
<view class="home-vip-tag-box">
|
||||
<image class="bg" v-if="userinfo.group_id == 1" :src="statics.vipbg"></image>
|
||||
<image class="bg" v-else :src="statics.vipBgHas"></image>
|
||||
<view v-if="userinfo.group_id == 1" class="main plr15 flex alcenter space">
|
||||
<view class="tag-no-vip">普通用户</view>
|
||||
<view class="flex alcenter">
|
||||
<text class="ft12 cl-default mr15 ftw500">升级VIP，省更多钱</text>
|
||||
<image class="right-icon" :src="statics.rightIcon"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="main plr15 flex alcenter space">
|
||||
<view class="tag-has-vip flex alcenter center">
|
||||
<image class="vip-level-icon" :src="statics.vipLevelImg[0]"></image>
|
||||
<text class="vip-level-means">VIP会员</text>
|
||||
</view>
|
||||
<view class="flex alcenter">
|
||||
<view v-if="userinfo.dqts<0" class="ft12 cl-default mr15 ftw500">您好！尊敬的VIP<br>您的会员已经到期{{-userinfo.dqts}}天</view>
|
||||
<view v-if="userinfo.dqts>=0" class="ft12 cl-default mr15 ftw500">您好！尊敬的VIP<br>您的会员{{userinfo.dqts}}天后到期</view>
|
||||
<image class="right-icon" :src="statics.rightIcon"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
<view class="mt24 flex space">
|
||||
<view class="col3 text-center">
|
||||
<navigator url="/pages/client/vipcard/moneylog">
|
||||
<view class="cl-notice ft12">余额</view>
|
||||
<view class="mt8 ft20 ftw600 cl-default">{{userinfo.money}}</view>
|
||||
</navigator>
|
||||
</view>
|
||||
|
||||
<view class="col3 text-center" style="display: none;">
|
||||
<!-- <navigator url="/pages/client/coupon/mine/index"> -->
|
||||
<view class="cl-notice ft12">优惠券</view>
|
||||
<view class="mt8 ft20 ftw600 cl-default">0</view>
|
||||
<!-- </navigator> -->
|
||||
</view>
|
||||
|
||||
<view class="col3 text-center">
|
||||
<navigator url="/pages/client/vipcard/integrallog">
|
||||
<view class="cl-notice ft12">积分</view>
|
||||
<view class="mt8 ft20 ftw600 cl-default">{{userinfo.score}}</view>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="flex space alcenter mt24" style="padding-bottom: 16rpx;">
|
||||
<view class="flex alcenter">
|
||||
<navigator url="/pages/client/vipcard/recharge">
|
||||
<view class="btn-vip-money" :style="getBtnStyle">充值</view>
|
||||
</navigator>
|
||||
<navigator v-if="userinfo.zstx>0" url="/pages/client/member/tx">
|
||||
<view class="btn-vip-adviser ml15" :style="getBtnPlanStyle">提现</view>
|
||||
</navigator>
|
||||
</view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view @click="showQrcodeAct" v-if="userinfo.config.iskq==1" class="vip-qrcode-tag" :style="getBtnStyle">
|
||||
<!-- <text class="iconfont iconbtn_card_ma-copy ft20 cl-w"></text> -->
|
||||
<image style="width: 50upx; height: 50upx;" src="/static/share-fill.png"></image>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<view @click="wdfxm" v-if="userinfo.config.iskq==1" class="vip-qrcode-tag" :style="getBtnStyle">
|
||||
<text class="iconfont iconbtn_card_ma-copy ft20 cl-w"></text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="box pd24_15">
|
||||
<view class="text-center ft14 cl-info2">您还没登录，登录后即可体验VIP会员</view>
|
||||
<view class="flex center mt24">
|
||||
<button class="btn-mid" @click="loginAct" :style="getBtnStyle">立即登录</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
props: ['userinfo'],
|
||||
data(){
|
||||
return {
|
||||
isLogin:true,
|
||||
vipLevel:0,//普通用户
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
loginAct(){
|
||||
this.$emit('loginAct');
|
||||
},
|
||||
showQrcodeAct(){
|
||||
this.$emit('qrcode');
|
||||
},
|
||||
wdfxm(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/client/member/qrshare'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.home-vip-tag-box{
|
||||
height: 100rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
.home-vip-tag-box .main{
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.home-vip-tag-box .bg{
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
}
|
||||
.tag-no-vip{
|
||||
width: 128rpx;
|
||||
height: 40rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color:#8A8D99;
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.tag-has-vip{
|
||||
width: 200rpx;
|
||||
height: 40rpx;
|
||||
background: linear-gradient(180deg, #333333 0%, #000000 100%);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
.tag-has-vip .vip-level-icon{
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
.tag-has-vip .vip-level-means{
|
||||
font-size: 24rpx;
|
||||
margin-left: 8rpx;
|
||||
font-weight: 500;
|
||||
background: linear-gradient(180deg, #F2DCA9 0%, #C79556 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.home-vip-tag-box .main .right-icon{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
.vip-qrcode-tag{
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.btn-vip-money,.btn-vip-adviser{
|
||||
width: 208rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color:#FFFFFF;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<uni-popup type="center" ref="redeemVip">
|
||||
<view class="vipBox">
|
||||
<view class="vipTitle">VIP激活</view>
|
||||
<view class="vipContent">
|
||||
<input type="text" class="ipt" placeholder="请输入卡密" v-model="vipCode">
|
||||
<!-- <input type="text" class="ipt" placeholder="请输入密码" v-model="vipPass">-->
|
||||
</view>
|
||||
<view class="vipFooter">
|
||||
<view class="vipConfirmBtn footerBtn" @click="submitCard">确定</view>
|
||||
<view class="vipCancelBtn footerBtn" @click="closeRedeem">取消</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "depositPup",
|
||||
data() {
|
||||
return {
|
||||
vipCode: '',
|
||||
vipPass: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submitCard(){
|
||||
let that = this;
|
||||
uni.request({
|
||||
url: that.configs.webUrl + '/api/Cryptocard/exchangeCard',
|
||||
method: 'get',
|
||||
data: {
|
||||
dense: this.vipCode,
|
||||
vipPass: this.vipPass
|
||||
},
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
if(res.data.code == 1){
|
||||
this.$emit('redeemVip',res.data.data)
|
||||
this.closeRedeem()
|
||||
}else{
|
||||
uni.showToast()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
showRedeem() {
|
||||
this.$refs.redeemVip.open('center')
|
||||
},
|
||||
closeRedeem() {
|
||||
this.$refs.redeemVip.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.vipBox{
|
||||
width: 600rpx;
|
||||
border-radius: 15rpx;
|
||||
background-color: #fff;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
.vipTitle{
|
||||
line-height: 60rpx;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
.vipContent{
|
||||
padding: 20rpx;
|
||||
}
|
||||
.ipt{
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
padding-left: 15rpx;
|
||||
font-size: 30rpx;
|
||||
border: 1rpx solid #eeeeee;
|
||||
margin-top: 30rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.vipFooter{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content:space-around;
|
||||
padding: 20rpx 0;
|
||||
margin: 0 30rpx;
|
||||
}
|
||||
.footerBtn{
|
||||
width: 200rpx;
|
||||
line-height: 70rpx;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.vipConfirmBtn{
|
||||
background-color: #00C657;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.vipCancelBtn{
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,401 @@
|
||||
<template>
|
||||
<view class="compontents">
|
||||
<uni-popup ref="choiceNumPup" type="bottom" :safe-area="fales">
|
||||
<view class="choiceNumPupConts" v-if="selectType=='1'">
|
||||
<view class="firstSelectHeader">
|
||||
<text> 当前播放第{{ playVideoInfo.weigh }}个视频</text>
|
||||
<uni-icons type="down" size="20" color="#999999" @click="hideChoicePup"></uni-icons>
|
||||
</view>
|
||||
<scroll-view scroll-y class="videoScroll">
|
||||
<view class="firstList">
|
||||
<view class="firstItem" v-for="videos in videoListData" :key="videos.id" @click="clickItem(videos)">
|
||||
<image class="videoCover" :src="videos.img" mode="widthFix"></image>
|
||||
<view class="videoCont">
|
||||
<text class="videoNum">{{ videos.name }}</text>
|
||||
<view class="videoNameBox">
|
||||
<text class="videoName"> {{ videos.title }}</text>
|
||||
<image class="lock" v-if="videos.pays=='1'" mode="scaleToFill" src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/static/shilu-login/2.png"></image>
|
||||
</view>
|
||||
<text class="videoInfo"> {{ videos.msg }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="choiceNumPupConts" v-if="selectType=='2'">
|
||||
<view class="choiceTItle">
|
||||
<text class="videoName">{{ videoInfo.name }}
|
||||
<!-- <text class="videoNameSecond">更新至({{ videoInfo.sum }})</text> -->
|
||||
</text>
|
||||
<view class="schoiceClose" @click="hideChoicePup">
|
||||
<uni-icons type="closeempty" size="20" color="#999999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-x="true" class="pageLine">
|
||||
<text :class="['pageItem',{'pageItemCheck': index+1 == page.currentPage}]"
|
||||
v-for="(item,index) in pageList" :key="index" @click="changePage(index)"
|
||||
>{{ item }}
|
||||
</text>
|
||||
</scroll-view>
|
||||
<scroll-view scroll-y class="choiceScroll">
|
||||
<view class="videoList">
|
||||
<view :class="['videoItem',{'videoItemCheck': videos.playing}]" @click="clickItem(videos)"
|
||||
v-for="videos in videoListData" :key="videos.id">
|
||||
<view class="tag" v-if="videos.pays==1">
|
||||
<image class="lock" src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/static/white_lock_icon.png" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<image v-if="videos.playing && videos.pays==2" class="playGif" src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/static/player.gif"
|
||||
mode="scaleToFill"></image>
|
||||
<text v-else class="videoNumber">{{ videos.numText }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {httpRequest} from "@/utils/request";
|
||||
export default {
|
||||
props: {
|
||||
playVideoInfo: {
|
||||
type: Object,
|
||||
default: ()=>{
|
||||
return new Object
|
||||
}
|
||||
},
|
||||
videoInfo: {
|
||||
type: Object,
|
||||
default: ()=>{
|
||||
return new Object
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
videoListData: [],
|
||||
pageList: [],
|
||||
videoDel: {},
|
||||
userInfo: {},
|
||||
page: {
|
||||
pageSize: 25,
|
||||
currentPage: 1,
|
||||
allPage: 1,
|
||||
totalNum: 0
|
||||
},
|
||||
selectType: '2'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.userInfo = uni.getStorageSync('userinfo');
|
||||
// this.videoDel = Object.assign({},{},this.videoInfo);
|
||||
},
|
||||
methods: {
|
||||
clickItem(item) {
|
||||
this.$emit('choiceVideoItem', item)
|
||||
this.hideChoicePup()
|
||||
},
|
||||
showChoicePup() {
|
||||
this.getVideoList();
|
||||
this.$refs.choiceNumPup.open()
|
||||
},
|
||||
hideChoicePup() {
|
||||
this.$refs.choiceNumPup.close()
|
||||
},
|
||||
creatFirstPaging(ResData) {
|
||||
let that = this;
|
||||
ResData.data.forEach((item, index) => {
|
||||
item.ranking_num = Number(index);
|
||||
})
|
||||
if (that.page.currentPage == 1) {
|
||||
that.page.totalNum = ResData.total;
|
||||
that.videoListData = ResData.data
|
||||
} else {
|
||||
that.videoListData = that.videoListData.concat(ResData.data)
|
||||
}
|
||||
that.page.currentPage += 1;
|
||||
},
|
||||
|
||||
creatSecondPaging(ResData) {
|
||||
let that = this;
|
||||
ResData.data.forEach((item, index) => {
|
||||
item.ranking_num = (that.page.currentPage - 1) * that.page.pageSize + index;
|
||||
item.numText = (that.page.currentPage - 1) * that.page.pageSize + index + 1;
|
||||
if (item.id == that.playVideoInfo.id) {
|
||||
item.playing = true;
|
||||
} else {
|
||||
item.playing = false;
|
||||
}
|
||||
})
|
||||
that.videoListData = ResData.data;
|
||||
that.page.totalNum = ResData.total;
|
||||
if (that.page.currentPage == 1) {
|
||||
that.videoDel = ResData.videodata;
|
||||
let pageItemLength = Math.ceil(Number(ResData.total) / that.page.pageSize),
|
||||
listData = [];
|
||||
for (let i = 1; i <= pageItemLength; i++) {
|
||||
if (i == 1) {
|
||||
listData.push(`${i} - ${that.page.pageSize}`)
|
||||
} else {
|
||||
if (i == pageItemLength) {
|
||||
listData.push(`${(i - 1) * that.page.pageSize + 1} - ${ResData.total}`)
|
||||
} else {
|
||||
listData.push(`${(i - 1) * that.page.pageSize + 1} - ${i * that.page.pageSize}`)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
that.pageList = listData;
|
||||
}
|
||||
},
|
||||
getVideoList() {
|
||||
let that = this;
|
||||
httpRequest({
|
||||
url: "/api/video/videoinfo",
|
||||
method: "GET",
|
||||
data: {
|
||||
uid: that.userInfo.id,
|
||||
token: that.userInfo.token,
|
||||
page: that.page.currentPage,
|
||||
limit: that.page.pageSize,
|
||||
vid: that.videoInfo.id,
|
||||
vs_id: ""
|
||||
},
|
||||
}).then(res=>{
|
||||
if (that.selectType == '1') {
|
||||
that.creatFirstPaging(res)
|
||||
} else {
|
||||
that.creatSecondPaging(res)
|
||||
}
|
||||
}).catch(err=>{
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
changePage(val) {
|
||||
console.log(val)
|
||||
if (val + 1 != this.page.currentPage) {
|
||||
this.page.currentPage = val + 1;
|
||||
this.getVideoList();
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.choiceNumPupConts {
|
||||
width: 750rpx;
|
||||
border-radius: 24rpx 24rpx 0rpx 0rpx;
|
||||
padding: 36rpx 40rpx 0 40rpx;
|
||||
background-color: #212122;
|
||||
}
|
||||
|
||||
.firstSelectHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
font-size: 36rpx;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
.videoScroll{
|
||||
height: 600rpx;
|
||||
}
|
||||
.firstList{
|
||||
padding-top: 40rpx;
|
||||
}
|
||||
.firstItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
margin-bottom: 30rpx;
|
||||
.videoCover {
|
||||
width: 160rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.videoCont{
|
||||
padding-left: 15rpx;
|
||||
.videoNum{
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
font-weight: bold;
|
||||
}
|
||||
.lock {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
margin-left: 15rpx;
|
||||
}
|
||||
.videoNameBox{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.videoName {
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
margin-top: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.videoInfo {
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
margin-top: 5px;
|
||||
overflow: hidden;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.choiceTItle {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.videoName {
|
||||
font-weight: 500;
|
||||
font-size: 36rpx;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
|
||||
.videoNameSecond {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.36);
|
||||
padding-left: 24rpx;
|
||||
}
|
||||
|
||||
.schoiceClose {
|
||||
padding: 10rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.pageLine {
|
||||
|
||||
/* #ifdef MP-TOUTIAO || MP-WEIXIN || H5 */
|
||||
display: block;
|
||||
min-width: 100%;
|
||||
width: auto;
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef APP */
|
||||
width: 750rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
/* #endif */
|
||||
|
||||
margin-top: 20rpx;
|
||||
padding-left: 40rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
height: 60rpx;
|
||||
|
||||
.pageItem {
|
||||
/* #ifdef MP-TOUTIAO || MP-WEIXIN || H5 */
|
||||
display: inline-block;
|
||||
/* #endif */
|
||||
/* #ifdef APP */
|
||||
width: 140rpx;
|
||||
/* #endif */
|
||||
padding: 0 26rpx;
|
||||
line-height: 48rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.36);
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.pageItemCheck {
|
||||
|
||||
position: relative;
|
||||
color: #09D89E;
|
||||
}
|
||||
|
||||
.pageItemCheck::before {
|
||||
content: ' ';
|
||||
width: 40rpx;
|
||||
height: 4px;
|
||||
border-radius: 5rpx;
|
||||
background: #09D89E;
|
||||
position: absolute;
|
||||
bottom: -10rpx;
|
||||
left: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.choiceScroll {
|
||||
|
||||
height: 600rpx;
|
||||
padding-top: 40rpx;
|
||||
|
||||
.videoList {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.videoItem {
|
||||
width: 120rpx;
|
||||
height: 100rpx;
|
||||
background: #404040;
|
||||
border-radius: 12rpx;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin-right: 15rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.tag {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: #09D89E;
|
||||
width: 30rpx;
|
||||
text-align: center;
|
||||
border-radius: 0rpx 12rpx 0rpx 12rpx;
|
||||
|
||||
.lock {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
vertical-align: middle;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.videoNumber {
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.videoItemCheck {
|
||||
width: calc(20% - 24rpx);
|
||||
height: 96rpx;
|
||||
border: 2rpx solid #404040;
|
||||
background: #121212;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.playGif {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user