Skip to content

U
uniapp_vedio
Commit 467d104c authored by mengcuiguang's avatar mengcuiguang
Browse files
Options

添加看点产品逻辑

parent 69d27797
Hide whitespace changes
Inline Side-by-side
Showing with 216 additions and 172 deletions
vedio/components/coin-popup/coin-popup.vue
View file @ 467d104c
<template>
<view>
<uni-popup type="bottom" ref="select" :maskClick="false" :isMaskClick="false">
<view class="body" style="width: 100%;height: 100%;">
<scroll-view scroll-y>
<uni-popup type="bottom" ref="coinPop" :maskClick="false" :isMaskClick="false">
<view class="body">
<scroll-view scroll-y style="width: 100%;height: 100%;">
<view style="display: flex;flex-direction: column;align-items: flex-end;">
<image @click="handleClose"
style="width: 30rpx;height: 30rpx;display: flex;align-items: right;margin: 15rpx;"
style="width: 30rpx;height: 30rpx;display: flex;align-items: right;margin-top: 20rpx;margin-right: 20rpx;margin-bottom: 10rpx;"
src="@/static/index/ic_quit_white.png"></image>
</view>
<view style="display: flex;flex-direction: column;align-items: center;margin-bottom: 20rpx;">
<view style="font-size: 30rpx;color: black;">超多精彩好剧一键解锁</view>
<view style="font-size: 38rpx;color: black;">超多精彩好剧一键解锁</view>
<view style="display: flex;flex-direction: row;margin-top: 10rpx;">
<view style="font-size: 24rpx;color: #644238;margin-top: 16rpx;">账户余额: </view>
<view style="font-size: 40rpx;color: red;font-weight: 777;">123</view>
<view style="font-size: 24rpx;color: #644238;margin-top: 16rpx;"> K币</view>
<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;">账户余额：</view>
<view style="font-size: 42rpx;color: red;font-weight: 777;">{{userBean.point}}</view>
<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;margin-left: 6rpx;">看点</view>
</view>
</view>
<view class="section">
......@@ -22,22 +22,26 @@
v-for='(item, index) in vipList' :key='index' @click="choosePack(item, index)">
<view style="display: flex;flex-direction: column;align-items: center;">
<view class="price row">
{{item.firstPayPrice}}元
</view>
<view class="name row">
{{item.title}}
</view>
<view class="price row">
￥{{item.firstPayPrice}}
</view>
<view class="origin row" v-if='item.oldPrice'>
原价：{{item.oldPrice}}
{{item.remarks}}
</view>
</view>
<view class="cut-down" v-if='item.oldPrice-item.firstPayPrice>0'>
立省 {{item.oldPrice-item.firstPayPrice}} 元
<view class="cut-down" v-if='item.topTitle.length>0'>
{{item.topTitle}}
</view>
<view v-if="index==selectedIndex" style="position: absolute;bottom: 0;right: 0;">
<image style="width: 24rpx;height: 24rpx;display: flex;align-items: right;"
src="@/static/index/ic_quit_white.png"></image>
<image mode="scaleToFill"
style="width: 100rpx;height: 100rpx;display: flex;align-items: right;"
src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/ic_loading.gif">
</image>
</view>
</view>
......@@ -45,7 +49,7 @@
</view>
<view style="display: flex;flex-direction: column;align-items: center;">
<view style="font-size: 24rpx;color: gray;margin-top: 16rpx;margin-bottom: 8rpx;">
<view style="font-size: 24rpx;color: gray;margin-top: 16rpx;margin-bottom: 18rpx;">
订单中如有疑问，请在个人中心联系客服</view>
</view>
</scroll-view>
......@@ -68,7 +72,8 @@
data() {
return {
vipList: [],
selectedIndex: 0,
selectedIndex: 0,
userBean: {},
showClone: false
};
},
......@@ -79,10 +84,10 @@
this.handleClose();
},
handleShow() {
this.$refs.select.open('bottom');
this.$refs.coinPop.open('bottom');
this.post({
url: '/vip/getVipProducts',
url: '/vip/getVipProducts/point',
showLoading: false,
success: ({
data
......@@ -92,10 +97,20 @@
this.selectedIndex = data.list[0].activityType;
}
}
});
this.post({
url: '/user/baseMsg',
showLoading: false,
success: ({
data
}) => {
this.userBean = data;
}
});
},
handleClose() {
this.$refs.select.close('bottom');
this.$refs.coinPop.close('bottom');
this.$emit('close');
},
choosePack(item, index) {
......@@ -162,92 +177,80 @@
background-color: white;
display: flex;
flex-direction: column;
position: relative;
align-items: center;
}
.section {
padding: 0 20rpx;
.section {
display: flex;
flex-direction: column;
background: white;
}
.pack-box {
margin-top: 25rpx;
margin-left: 18rpx;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
.active {
border: 6rpx solid #fd5350 !important;
}
.pack-item {
margin-bottom: 25rpx;
margin-right: 22rpx;
width: calc(45%);
height: 200rpx;
display: flex;
flex-direction: column;
background: #fff;
justify-content: space-around;
background: #f5f5f5;
border: 6rpx solid #f5f5f5;
border-radius: 10rpx;
position: relative;
.row {
margin: 8rpx 15rpx;
marign-bottom: 0;
}
.title {
.row:last-child {
margin-bottom: 8rpx;
}
.name {
font-size: 32rpx;
font-weight: 700;
color: #333;
margin-bottom: 30rpx;
}
.pack-box {
margin-top: 25rpx;
margin-left: 20rpx;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
.active {
border: 6rpx solid #fd5350 !important;
}
.pack-item {
margin-bottom: 25rpx;
margin-right: 22rpx;
width: calc(44%);
height: 200rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
background: #f5f5f5;
border: 6rpx solid #f5f5f5;
border-radius: 10rpx;
position: relative;
.row {
margin: 8rpx 15rpx;
marign-bottom: 0;
}
.row:last-child {
margin-bottom: 8rpx;
}
.name {
font-size: 26rpx;
font-weight: 700;
color: #333;
}
.price {
font-size: 30rpx;
color: #fd5350;
font-weight: 700;
}
.origin {
font-size: 22rpx;
color: #333;
}
.price {
font-size: 40rpx;
color: #fd5350;
font-weight: 700;
}
.cut-down {
position: absolute;
top: 0;
color: #fff;
background: #ff502f;
font-size: 22rpx;
border-radius: 15rpx;
height: 30rpx;
line-height: 30rpx;
padding: 0 10rpx;
transform: translate(0, -50%);
}
}
.origin {
font-size: 30rpx;
color: #333;
}
.apply-button {
border-radius: 50rpx;
background: #e8c8ae;
color: #8d5a29;
margin: 30rpx auto;
.cut-down {
position: absolute;
top: 0;
color: #fff;
background: #ff502f;
font-size: 22rpx;
border-radius: 15rpx;
height: 30rpx;
line-height: 30rpx;
padding-top: 6rpx;
padding-bottom: 3rpx;
padding-left: 16rpx;
padding-right: 16rpx;
transform: translate(0, -50%);
}
}
}
......
vedio/pages/my/my.vue
View file @ 467d104c
<template>
<view class="body">
<view
:style="'display: flex;flex-direction: row;align-items: center;margin: 20rpx;padding-left: 10rpx;margin-top:'+statusBarHeight+'px;'">
<image class="avatar" src="@/static/logo-about.png"></image>
<view>
<view style="font-size: 32rpx;color: black;margin-left: 20rpx;">用户ID：{{userBean.idcode}}</view>
<view class="body" >
<scroll-view scroll-y="true" :style="'height: '+(windowHeight -60)+'px;'">
<view
:style="'display: flex;flex-direction: row;align-items: center;margin: 20rpx;padding-left: 10rpx;margin-top:'+statusBarHeight+'px;'">
<image class="avatar" src="@/static/logo-about.png"></image>
<view>
<view style="font-size: 32rpx;color: black;margin-left: 20rpx;">用户ID：{{userBean.idcode}}</view>
</view>
</view>
</view>
<view
style="display: flex;flex-direction: row;background: #f5ca86;margin: 20rpx;padding: 40rpx;border-radius:20rpx;align-items: center;justify-content:space-between;">
<view style="display: flex;flex-direction: column;justify-content: center;">
<view style="font-size: 36rpx;color: #5b1500;font-weight: 777;">
{{userBean.expireTime<=0 ? '开通VIP会员' : 'VIP会员'}}
<view v-if="userBean.showVipInner"
style="display: flex;flex-direction: row;background: #f5ca86;margin: 20rpx;padding: 40rpx;border-radius:20rpx;align-items: center;justify-content:space-between;">
<view style="display: flex;flex-direction: column;justify-content: center;">
<view style="font-size: 36rpx;color: #5b1500;font-weight: 777;">
{{userBean.expireTime<=0 ? '开通VIP会员' : 'VIP会员'}}
</view>
<view v-if="userBean.expireTime<=0" style="font-size: 30rpx;color: #5b1500;margin-top: 12rpx;">
解锁全部短剧
</view>
<view v-else style="font-size: 30rpx;color: #5b1500;margin-top: 12rpx;">
到期时间:{{userBean.expireTime*1000 | formatDate('yyyy-MM-dd')}}
</view>
<view v-if="userBean.expireTime<=0" @click="handleVipPay"
style="width: 210rpx;height: 60rpx;background-color: #5b1500;border-radius:30rpx;color: white;font-size: 26rpx;justify-content: center;align-items: center;display: flex;padding-bottom: 4rpx;margin-top: 30rpx;">
立即开通
</view>
<view v-else style="width: 210rpx;height: 60rpx;padding-bottom: 4rpx;margin-top: 30rpx;">
</view>
</view>
<view v-if="userBean.expireTime<=0" style="font-size: 30rpx;color: #5b1500;margin-top: 12rpx;">
解锁全部短剧
<image style="border-radius:10rpx; width: 130rpx;height: 100rpx;margin-right: 20rpx;"
src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/bg_my_vip.png" mode="scaleToFill"></image>
</view>
<view v-if="userBean.expireTime<=0" style="display: flex;height: 200rpx;margin: 20rpx;background: #f5ca86;border-radius: 20rpx;">
<view style="flex-grow: 2; margin-left: 20rpx;">
<view
style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;">
<view style="display: flex;align-items: center;">
<image
style="width: 50rpx;height: 50rpx;display: flex;align-items: right;margin-right: 10rpx;"
src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/ic_my_coin.png"></image>
<view style="font-size: 36rpx;font-weight: 777;">看点充值</view>
</view>
<view style="font-size: 28rpx;color: #5b1500;margin-top: 20rpx;">海量看点狂洒中,好剧等你来解锁</view>
</view>
</view>
<view v-else style="font-size: 30rpx;color: #5b1500;margin-top: 12rpx;">
到期时间:{{userBean.expireTime*1000 | formatDate('yyyy-MM-dd')}}
<view style="width: 220rpx;">
<view
style="width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;">
<view style="font-size: 30rpx;color: #5b1500;margin-bottom: 20rpx;">{{userBean.point}}</view>
<view @click="handleCoinPay"
style="width: 160rpx;height: 60rpx;background-color: #5b1500;border-radius:30rpx;color: white;font-size: 26rpx;justify-content: center;align-items: center;display: flex;padding-bottom: 4rpx;">
去充值
</view>
</view>
</view>
</view>
<view v-if="userBean.expireTime<=0" @click="handleVipPay"
style="width: 210rpx;height: 60rpx;background-color: #5b1500;border-radius:30rpx;color: white;font-size: 26rpx;justify-content: center;align-items: center;display: flex;padding-bottom: 4rpx;margin-top: 30rpx;">
立即开通
<view class="infobg" style="margin: 20rpx;">
<view v-if="userBean.showVipInner" class="item arrow" @click="handlePayRecord">
我的订单
<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
</view>
<view class="item arrow" @click="handleDotRecord">
看点记录
<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
</view>
<view class="item arrow" @click="handleUseDotRecord">
消费记录
<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
</view>
<view v-else style="width: 210rpx;height: 60rpx;padding-bottom: 4rpx;margin-top: 30rpx;">
<view class="item arrow" @click="handleWatchRecord">
观看记录
<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
</view>
<view class="item arrow" @click="handlePhone">
联系客服
<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
</view>
</view>
<image style="border-radius:10rpx; width: 130rpx;height: 100rpx;margin-right: 20rpx;"
src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/bg_my_vip.png" mode="scaleToFill"></image>
</view>
<view class="infobg" style="margin: 20rpx;">
<view class="item arrow" @click="handleDotRecord">
看点记录
<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
</view>
<view class="item arrow" @click="handleUseDotRecord">
消费记录
<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
</view>
<view class="item arrow" @click="handleWatchRecord">
观看记录
<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
</view>
<view class="item arrow" @click="handlePayRecord">
我的订单
<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
</view>
<view class="item arrow" @click="handlePhone">
联系客服
<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
<view style="display: flex;justify-content: center;margin-top: 20rpx;font-size: 26rpx;color: gray;">
{{ versionName }}
</view>
</view>
<view style="display: flex;justify-content: center;margin-top: 20rpx;font-size: 26rpx;color: gray;">
{{ versionName }}
</view>
</scroll-view>
<coin-popup :show="showAnimate" @close="showAnimate = false" @paySuccess="paySuccess">
</coin-popup>
</view>
</template>
......@@ -92,12 +119,14 @@
return {
statusBarHeight: app.globalData.statusBarHeight,
userBean: {},
showAnimate: false,
showAnimate: false,
windowHeight: 0,
versionName: app.globalData.versionName
};
},
methods: {
show() {
show() {
this.windowHeight = uni.getSystemInfoSync().windowHeight
// loadData() {
this.post({
url: '/user/baseMsg',
......@@ -121,7 +150,9 @@
navigateTo(`/pagesD/useDotRecord/useDotRecord`)
},
handleWatchRecord() {
// navigateTo(`/pagesD/watchRecord/watchRecord`)
navigateTo(`/pagesD/watchRecord/watchRecord`)
},
handleCoinPay() {
this.showAnimate = true;
},
handlePayRecord() {
......@@ -132,31 +163,41 @@
},
handlePhone() {
// 联系我们
this.post({
url: '/vedio/customerServiceNumbers',
showLoading: false,
success: ({
data
}) => {
let datas = data.customerServiceNumbers.split(',')
let corpid = datas[0]
let curl = datas[1]
wx.openCustomerServiceChat({
extInfo: {
url: curl
},
corpId: corpid,
success(res) {},
fail(e) {
console.log(e)
}
})
}
});
},
paySuccess(){
// this.post({
// url: '/vedio/customerServiceNumbers',
// showLoading: false,
// success: ({
// data
// }) => {
// let datas = data.customerServiceNumbers.split(',')
// let corpid = datas[0]
// let curl = datas[1]
// wx.openCustomerServiceChat({
// extInfo: {
// url: curl
// },
// corpId: corpid,
// success(res) {},
// fail(e) {
// console.log(e)
// }
// })
// }
// });
wx.makePhoneCall({
phoneNumber: '4000969950',
success: function(res) {
console.log('拨打电话成功！');
},
fail: function(res) {
console.log('拨打电话失败！');
}
})
},
paySuccess() {
}
}
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment