338 lines
8.6 KiB
Vue
338 lines
8.6 KiB
Vue
<!-- 充值类型页面 -->
|
||
<template>
|
||
<!-- #ifdef APP -->
|
||
<view class="recharge-detail" :style="{ backgroundImage: `url(${myFileUrl+background})`,paddingTop: CustomBar+'rpx' }">
|
||
<view class="app-top" :style="{ height: CustomBar+'rpx',
|
||
background: topLevel===0? '#ffffff00' : `rgba(255, 255, 255,${topLevel})` }"></view>
|
||
<!-- #endif -->
|
||
<!-- #ifndef APP -->
|
||
<view class="recharge-detail" :style="{ backgroundImage: `url(${myFileUrl+background})` }">
|
||
<!-- #endif -->
|
||
<view class="rd-top">
|
||
<!-- #ifdef MP -->
|
||
<view :style="{height: `${StatusBar}px`}"></view>
|
||
<view class="app-top" :style="{height: `${StatusBar}px`,background: topLevel===0? '#ffffff00' : `rgba(255, 255, 255,${topLevel})`}"></view>
|
||
<view class="mobile-logo" :style="{height: `${CustomBarHeight}px`,backgroundColor: `rgba(255, 255, 255,${topLevel})`}">
|
||
<!-- #endif -->
|
||
<!-- #ifndef MP -->
|
||
<view class="mobile-logo" :style="{backgroundColor: `rgba(255, 255, 255,${topLevel})`}">
|
||
<!-- #endif -->
|
||
<u-icon name="arrow-left" size="40" class="back" @click="back"
|
||
:color="topLevel===0? '#f9f9f9' : `rgba(194, 234, 4,${topLevel})`"></u-icon>
|
||
<image :src="myFileUrl+logo"></image>
|
||
<view style="width: 75rpx;"></view>
|
||
</view>
|
||
<view class="detail-content">
|
||
<u-section title="充值类型" :right="false" :subTitle="`总数 ${total}`"
|
||
color="#cbe7fb" fontSize="34" :arrow="false" subColor="#cbe7fb" />
|
||
<scroll-view :scroll-top="scrollTop" :scrollY="true" class="rechargeList"
|
||
scroll-with-animation @scroll="scroll">
|
||
<view class="recharge-item" :style="{background:item.cardBackground}"
|
||
v-for="(item,index) in rechargeList" :key="index" @click="toDetail()">
|
||
<image :src="myFileUrl + item.icon"></image>
|
||
<view class="recharge-content">
|
||
<view class="content-title" :style="{color:item.titleColor}">
|
||
{{ item.name }}
|
||
</view>
|
||
<view class="content-abstract">
|
||
<text>{{item.description}}</text>
|
||
<u-icon name="arrow-right" size="12"></u-icon>
|
||
</view>
|
||
<view class="content-introduce">
|
||
<text>有效天数：{{ item.time }}</text>
|
||
<text>价格：<text style="font-weight: bold;">{{item.price}} 元/颗</text></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-loadmore @loadmore="getMore" :status="isFinish" color="#a7b6b8" marginTop="30" marginBottom="20" />
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
<view @click="goTop">
|
||
<u-back-top :scrollTop="oldScrollTop" zIndex="100" :iconStyle="{ color: '#fff' }"
|
||
:customStyle="{background: 'linear-gradient(180deg, rgba(56,45,79,1) 0%, #b3a0da 100%)',filter: 'opacity(0.96)'}"></u-back-top>
|
||
</view>
|
||
<u-toast ref="uToast"></u-toast>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import configService from '@/common/config.service.js';
|
||
export default {
|
||
data(){
|
||
return{
|
||
// #ifdef MP
|
||
// 微信小程序自定义导航栏参数
|
||
StatusBar: this.StatusBar || 0,
|
||
CustomBarHeight: this.Custom.height+(this.Custom.top-this.StatusBar)*2 || 0,
|
||
// #endif
|
||
// 基础路径
|
||
myFileUrl: configService.fileUrl + 'pixel/my/',
|
||
// 我的页面背景
|
||
background: 'background.png',
|
||
// logo图标
|
||
logo: 'logo-new.png',
|
||
// 顶部距离等级
|
||
topLevel: 0,
|
||
// 是否结束——loadmore加载更多，loading加载中，nomore无更多
|
||
isFinish: 'nomore',
|
||
form: {
|
||
size: 10,
|
||
current: 1
|
||
},
|
||
// 滚动顶部
|
||
scrollTop: 0,
|
||
oldScrollTop: 0,
|
||
// 充值类型列表
|
||
rechargeList: [{
|
||
icon: 'diamond.png',
|
||
name: '钻石-diamond',
|
||
description: '通用制图货币，助力高端操作~',
|
||
time: '无限制',
|
||
price: '0.1',
|
||
cardBackground: 'linear-gradient( 80deg, #F9FAF3 0%, #3BE0FF 100%)',
|
||
titleColor: '#004DB2',
|
||
}],
|
||
// 总数
|
||
total: 0,
|
||
}
|
||
},
|
||
// #ifndef H5
|
||
onPageScroll(e) {
|
||
const level = e.scrollTop/60;
|
||
if(level<=1) this.topLevel = level;
|
||
else this.topLevel = 1;
|
||
},
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
mounted(){
|
||
let that = this;
|
||
window.onscroll = function () {
|
||
//为了保证兼容性，这里取三个值，哪个有值取哪一个
|
||
//scrollTop就是触发滚轮事件时滚轮的高度
|
||
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
||
const level = scrollTop/60;
|
||
if(level<=1) that.topLevel = level;
|
||
else that.topLevel = 1;
|
||
}
|
||
},
|
||
onHide() {
|
||
window.onscroll = null;
|
||
},
|
||
// #endif
|
||
// 上拉刷新
|
||
onPullDownRefresh(){
|
||
try{
|
||
this.init();
|
||
}catch(e){}
|
||
finally{
|
||
uni.stopPullDownRefresh();
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
// this.init();
|
||
},
|
||
methods:{
|
||
// 返回
|
||
back(){
|
||
// #ifdef MP || APP
|
||
uni.navigateBack();
|
||
// #endif
|
||
// #ifndef MP || APP
|
||
uni.redirectTo({
|
||
url: '/pages/mobile_web/index/index'
|
||
})
|
||
// #endif
|
||
},
|
||
// 滚动回顶部
|
||
goTop() {
|
||
this.scrollTop = this.oldScrollTop;
|
||
this.$nextTick(()=>{
|
||
this.scrollTop = 0;
|
||
});
|
||
},
|
||
// 滚动监听
|
||
scroll(e){
|
||
this.oldScrollTop = e.detail.scrollTop;
|
||
},
|
||
// 前往支付详情界面
|
||
toDetail(){
|
||
uni.navigateTo({
|
||
url: '/pages/mobile_web/recharge/detail'
|
||
})
|
||
},
|
||
// 时间格式化
|
||
dateFormat(time){
|
||
let date = new Date(time);
|
||
let month = date.getMonth()+1,
|
||
day = date.getDate(),
|
||
hour = date.getHours(),
|
||
minute = date.getMinutes(),
|
||
second = date.getSeconds();
|
||
return `${date.getFullYear()}-${month<10?'0':''}${month}-${day<10?'0':''}${day} ${hour<10?'0':''}${hour}:${minute<10?'0':''}${minute}:${second<10?'0':''}${second}`;
|
||
},
|
||
// 加载更多
|
||
getMore(){
|
||
if(this.isFinish === 'nomore') return;
|
||
this.form.current++;
|
||
this.getRechargeList();
|
||
},
|
||
// 获取充值类型列表
|
||
async getRechargeList(){
|
||
this.isFinish = 'loading';
|
||
let res = await this.$api.getConsumption(this.form);
|
||
if(res?.success){
|
||
const { records, size, total, current } = res.data;
|
||
if(current === 1) this.rechargeList = records;
|
||
else this.rechargeList.push(...records);
|
||
this.isFinish = size*current >= total ? 'nomore' : 'loadmore';
|
||
this.total = total;
|
||
}else{
|
||
this.$refs.uToast.show({type:'error',title: "充值类型列表获取失败!"});
|
||
this.isFinish = 'loadmore';
|
||
}
|
||
},
|
||
// 初始化
|
||
init(){
|
||
this.form = {size: 10,current: 1};
|
||
this.getRechargeList();
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.recharge-detail{
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100vh;
|
||
background-size: cover;
|
||
// #ifdef APP || MP
|
||
.app-top{
|
||
width: 100%;
|
||
position: fixed;
|
||
z-index: 81;
|
||
top: 0;
|
||
}
|
||
// #endif
|
||
.rd-top{
|
||
// #ifdef APP
|
||
.app-top{
|
||
width: 100%;
|
||
position: fixed;
|
||
z-index: 81;
|
||
top: 0;
|
||
}
|
||
// #endif
|
||
.mobile-logo{
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.back{
|
||
margin-left: 35rpx;
|
||
margin-top: 5rpx
|
||
}
|
||
position: fixed;
|
||
z-index: 81;
|
||
padding: 15rpx 0;
|
||
image{
|
||
width: 200rpx;
|
||
height: 45rpx;
|
||
}
|
||
// .u-icon{
|
||
|
||
// }
|
||
}
|
||
}
|
||
.detail-content{
|
||
margin: 120rpx 20rpx 32rpx;
|
||
padding: 40rpx 25rpx 20rpx;
|
||
background-color: rgba(160, 160, 160, 0.1);
|
||
border-radius: 16rpx;
|
||
.rechargeList{
|
||
margin: 30rpx 0;
|
||
width: 100%;
|
||
height: 75vh;
|
||
.recharge-item{
|
||
display: flex;
|
||
align-items: center;
|
||
height: 200rpx;
|
||
border-radius: 16rpx;
|
||
width: 100%;
|
||
color: #000;
|
||
font-size: 24rpx;
|
||
padding: 36rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
&:active{
|
||
opacity: 0.8;
|
||
}
|
||
image{
|
||
width: 126rpx;
|
||
height: 126rpx;
|
||
margin-right: 32rpx;
|
||
}
|
||
.recharge-content{
|
||
display: flex;
|
||
height: 100%;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
overflow: hidden;
|
||
.content-title{
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
}
|
||
.content-abstract{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
overflow: hidden;
|
||
text{
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
.content-introduce{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.create-item-title{
|
||
width: 100%;
|
||
margin: 0 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.cit-left{
|
||
max-width: 50%;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
text{
|
||
margin-left: 20rpx;
|
||
}
|
||
.citl-green{
|
||
color: #49cc90;
|
||
}
|
||
.citl-red{
|
||
color: #f93e3e;
|
||
}
|
||
}
|
||
}
|
||
.create-item-content{
|
||
margin: 10rpx 30rpx;
|
||
color: #e7eefe;
|
||
}
|
||
</style> |