初始化
This commit is contained in:
yziiy
69
pages/other/aboutUs.vue
Normal file
69
pages/other/aboutUs.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<view class="view-page">
|
||||
<!-- <headerHeight /> -->
|
||||
<navBar :style="{marginTop: `${statusBarHeight}${uni.getSystemInfoSync().platform === 'ios' ? 'px': 'dp'}`}" :navTitle="`关于我们`" :emitBack="true" @backEvent="back">
|
||||
</navBar>
|
||||
<view class="dec-view">
|
||||
<web-view src="https://chat.qxmier.com/api/Page/page_show?id=20"></web-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
// import headerHeight from '@/component/headerHeight.vue';
|
||||
import navBar from '@/component/nav.vue';
|
||||
export default {
|
||||
components: {
|
||||
// headerHeight,
|
||||
navBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight:0
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
const {
|
||||
h
|
||||
} = options
|
||||
this.currentIndex = type !== undefined ? +type : 0
|
||||
this.statusBarHeight = h
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
this.closeWeb()
|
||||
},
|
||||
closeWeb(){
|
||||
const platform = uni.getSystemInfoSync().platform;
|
||||
if (platform === 'ios') {
|
||||
window.webkit.messageHandlers.nativeHandler.postMessage({
|
||||
'action': 'closeWeb'
|
||||
});
|
||||
} else if (platform === 'android') {
|
||||
window.Android.closeWeb();
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.view-page {
|
||||
min-height: 100vh;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
background-image: url('@/static/image/help/bg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
.dec-view {
|
||||
min-height: calc(99vh - 160rpx);
|
||||
position: relative;
|
||||
border-radius: 16rpx;
|
||||
margin: 24rpx;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
482
pages/other/grade.vue
Normal file
482
pages/other/grade.vue
Normal file
@@ -0,0 +1,482 @@
|
||||
<template>
|
||||
<view class="view-page" v-if="levelActiveData">
|
||||
<view class="top-view">
|
||||
<view class="navbar" :style="{'margin-top' : `${statusBarHeight || 0}px`}">
|
||||
<view class="">
|
||||
<img @click="closeWeb" class="icon-image" src="@/static/image/grade/back.png" alt="" />
|
||||
<!-- <img v-else class="icon-image" src="@/static/image/grade/back1.png" alt="" /> -->
|
||||
</view>
|
||||
<view class="tab">
|
||||
<view @click="cutTabPage(0)" :class="currentIndex == 0 ? 'active' : ''">
|
||||
财富等级
|
||||
</view>
|
||||
<view @click="cutTabPage(1)" :class="currentIndex == 1 ? 'active' : ''">
|
||||
魅力等级
|
||||
</view>
|
||||
</view>
|
||||
<view class="" @click="jumpGradeRule">
|
||||
<img class="icon-image" src="@/static/image/grade/Question.png" alt="" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="swiper-view" v-if="levelActiveData.length">
|
||||
<view class="swiper-image" :style="{ 'background-image' : `url(${levelActiveData[0].bg_image})`}">
|
||||
<view class="view-level">
|
||||
<view class="">
|
||||
<view class="level-str" :style="{textShadow : `0px 0px 5px ${levelActiveData[0].color}`}">
|
||||
{{levelActiveData[0].name}}
|
||||
</view>
|
||||
<view class="color-9 flex-line" style="font-size: 20rpx;">
|
||||
<span
|
||||
style="white-space: nowrap">{{levelActiveData[0].level_str || levelActiveData[0].name}}</span><progress
|
||||
style="width: 200rpx;margin: 0 24rpx;" :border-radius="52" :percent="3"
|
||||
:activeColor="levelActiveData[0].color" stroke-width="3" />
|
||||
<span
|
||||
style="white-space: nowrap">{{nextLevelData[0].level_str || nextLevelData[0].name }}</span>
|
||||
</view>
|
||||
<view class="color-9 mt-24" style="font-size: 20rpx;">
|
||||
距离下一个段位还差{{detailData.user.next_exp}}经验值
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 0 -->
|
||||
<view class="LevelProgress-view">
|
||||
<LevelProgress :currentIndex="levelCurrent" :lvList="levelList" />
|
||||
</view>
|
||||
<!-- -->
|
||||
<view class="w-fill flex-line business-card">
|
||||
<view class="">
|
||||
<view class="font-36 color-0D">
|
||||
{{detailData.user.exp || 0}}
|
||||
</view>
|
||||
<view class="font-24 color-f">
|
||||
当前经验
|
||||
</view>
|
||||
</view>
|
||||
<view class="head-sculpture">
|
||||
<img :src="detailData.user.user_avatar || logo" alt="" />
|
||||
</view>
|
||||
<view class="">
|
||||
<view class="font-36 color-0D">
|
||||
{{detailData.user.next_exp}}
|
||||
</view>
|
||||
<view class="font-24 color-f">
|
||||
下个等级
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 每日奖励等 -->
|
||||
<view class="content-view">
|
||||
<template v-if="!currentIndex">
|
||||
<!-- <view class="card-view">
|
||||
<view class="card-title color-3 font-32 font-w500">
|
||||
每日奖励
|
||||
</view>
|
||||
<view class="card-body flex-line">
|
||||
<view class="coin">
|
||||
<img src="@/static/image/grade/coin.png" alt="" />
|
||||
</view>
|
||||
<view class="flex-line w-fill" style="justify-content: space-around;">
|
||||
<view class="font-28 color-3">
|
||||
<view class="">
|
||||
段位达到富豪8
|
||||
</view>
|
||||
<view class="">
|
||||
可每日领取金币
|
||||
</view>
|
||||
</view>
|
||||
<view class="receive-button flex-line color-3 font-24">
|
||||
立即领取
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- <Canvans /> -->
|
||||
<view class="card-view" v-if="detailData.privilege">
|
||||
<view class="card-title color-3 font-32 font-w500">
|
||||
财富特权
|
||||
</view>
|
||||
<!-- 容器使用 Flex 布局并允许换行 -->
|
||||
<view class="flex-container" v-if="detailData.privilege && detailData.privilege.length">
|
||||
<!-- 循环生成子元素 -->
|
||||
<view v-for="(item, index) in detailData.privilege" :key="index" class="flex-item">
|
||||
<view class="image">
|
||||
<img :src="item.base_image || logo" alt="" />
|
||||
</view>
|
||||
<view class="color-3 font-28">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="font-24 color-9">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="card-view" v-if="detailData.privilege">
|
||||
<view class="card-title color-3 font-32 font-w500">
|
||||
等级特权
|
||||
</view>
|
||||
<!-- 容器使用 Flex 布局并允许换行 -->
|
||||
<view class="flex-container" v-if="detailData.privilege && detailData.privilege.length">
|
||||
<!-- 循环生成子元素 -->
|
||||
<view v-for="(item, index) in detailData.privilege" :key="index" class="flex-item">
|
||||
<view class="image">
|
||||
<img :src="item.rights_icon || logo" alt="" />
|
||||
</view>
|
||||
<view class="font-24 color-9">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import http from '@/until/http.js';
|
||||
import logo from '@/static/image/logo.png';
|
||||
import SwiperView from '@/component/swiper.vue';
|
||||
import headerHeight from '@/component/headerHeight.vue';
|
||||
import LevelProgress from '@/component/LevelProgress.vue'
|
||||
export default {
|
||||
components: {
|
||||
headerHeight,
|
||||
SwiperView,
|
||||
LevelProgress
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
logo,
|
||||
detailData: null,
|
||||
statusBarHeight: 0,
|
||||
errorPage: true,
|
||||
tabs: [],
|
||||
listData: [],
|
||||
currentIndex: 0,
|
||||
levelActiveData: null,
|
||||
levelList: [],
|
||||
levelCurrent: 0,
|
||||
nextLevelData: null,
|
||||
currentSelectedLevel: 2,
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.errorPage = true
|
||||
const {
|
||||
id,
|
||||
type,
|
||||
h
|
||||
} = options
|
||||
this.currentIndex = type !== undefined ? +type : 0
|
||||
uni.setStorageSync('token', id)
|
||||
this.statusBarHeight = h
|
||||
uni.setStorageSync('BarHeight', h)
|
||||
if (uni.getStorageSync('token')) this.getData()
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
this.levelActiveData = []
|
||||
if (this.currentIndex) {
|
||||
// 魅力等级
|
||||
this.getCharmLevel()
|
||||
} else {
|
||||
// 财富等级
|
||||
this.getWealthLevel()
|
||||
}
|
||||
},
|
||||
jumpGradeRule() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/other/gradeRule?flag=${this.currentIndex}&h=${this.statusBarHeight}`
|
||||
});
|
||||
},
|
||||
cutTabPage(index) {
|
||||
this.currentIndex = index
|
||||
this.getData()
|
||||
},
|
||||
async getCharmLevel() {
|
||||
http.get('/api/Level/get_level_rule', {
|
||||
token: uni.getStorageSync('token') ?? ''
|
||||
}).then(response => {
|
||||
const {
|
||||
data,
|
||||
code
|
||||
} = response
|
||||
if (code) {
|
||||
// console.log(data)
|
||||
this.detailData = data
|
||||
this.levelList = data.level.map(ele => {
|
||||
return {
|
||||
...ele,
|
||||
title: ele.name
|
||||
}
|
||||
})
|
||||
this.levelCurrent = data.user.level
|
||||
this.nextLevelData = data.level.filter(ele => {
|
||||
return ele.level === data.user.level + 1
|
||||
})
|
||||
this.levelActiveData = data.level.filter(ele => {
|
||||
return ele.level === data.user.level
|
||||
})
|
||||
}
|
||||
|
||||
this.errorPage = false
|
||||
}).catch(error => {
|
||||
this.errorPage = true
|
||||
});
|
||||
},
|
||||
closeWeb() {
|
||||
// 关闭页面
|
||||
const platform = uni.getSystemInfoSync().platform;
|
||||
if (platform === 'ios') {
|
||||
window.webkit.messageHandlers.nativeHandler.postMessage({
|
||||
'action': 'closeWeb'
|
||||
});
|
||||
} else if (platform === 'android') {
|
||||
window.Android.closeWeb();
|
||||
|
||||
}
|
||||
},
|
||||
async getWealthLevel() {
|
||||
http.get('/api/Level/get_wealth_rule', {
|
||||
token: uni.getStorageSync('token') ?? ''
|
||||
}).then(response => {
|
||||
const {
|
||||
data,
|
||||
code
|
||||
} = response
|
||||
if (code) {
|
||||
this.detailData = data
|
||||
this.levelList = data.level.map(ele => {
|
||||
return {
|
||||
...ele,
|
||||
title: ele.name
|
||||
}
|
||||
})
|
||||
this.levelCurrent = data.user.level
|
||||
this.nextLevelData = data.level.filter(ele => {
|
||||
return ele.level === data.user.level + 1
|
||||
})
|
||||
this.levelActiveData = data.level.filter(ele => {
|
||||
return ele.level === data.user.level
|
||||
})
|
||||
}
|
||||
this.errorPage = false
|
||||
}).catch(error => {
|
||||
this.errorPage = true
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@font-face {
|
||||
font-family: 'MyCustomFont';
|
||||
src: url('@/static/youshe.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.level-str {
|
||||
font-family: 'MyCustomFont', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 60rpx;
|
||||
color: #FFFFFF;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.view-page {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
background: #F3F5F9;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.LevelProgress-view {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
/* 整体字体颜色 */
|
||||
// margin-top: 60px;
|
||||
// background-color: #000; /* 模拟背景 */
|
||||
// min-height: 100vh;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.top-view {
|
||||
width: 100vw;
|
||||
min-height: 50vh;
|
||||
background-image: url('@/static/image/grade/Maskgroupx.png');
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.navbar {
|
||||
display: inline-flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 96rpx;
|
||||
width: 100%;
|
||||
|
||||
.icon-image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
view {
|
||||
padding: 0 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.active {
|
||||
font-weight: 500;
|
||||
// font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.swiper-view {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
|
||||
.swiper-image {
|
||||
width: 80%;
|
||||
height: 266rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
margin-top: 24rpx;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
|
||||
.view-level {
|
||||
width: 93%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.icon {
|
||||
width: 220rpx;
|
||||
height: 156rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.business-card {
|
||||
justify-content: space-around;
|
||||
align-items: flex-end;
|
||||
margin: 50rpx 0;
|
||||
|
||||
view {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.head-sculpture {
|
||||
width: 122rpx;
|
||||
height: 122rpx;
|
||||
border-radius: 50%;
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.content-view {
|
||||
min-height: 46vh;
|
||||
width: 100%;
|
||||
padding: 0 32rpx;
|
||||
|
||||
.card-view {
|
||||
|
||||
// padding: 24rpx 0;
|
||||
.card-title {
|
||||
padding: 24rpx 0;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
width: 100%;
|
||||
min-height: 154rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.coin {
|
||||
height: 134rpx;
|
||||
width: 180rpx;
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
|
||||
.receive-button {
|
||||
width: 172rpx;
|
||||
height: 56rpx;
|
||||
background: #0DFFB9;
|
||||
border-radius: 106rpx 106rpx 106rpx 106rpx;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
/* 启用 Flex 布局 */
|
||||
flex-wrap: wrap;
|
||||
/* 允许换行 */
|
||||
}
|
||||
|
||||
.flex-item {
|
||||
flex: 0 0 calc(25% - 10px);
|
||||
/* 基础宽度25% 减去间隔 */
|
||||
margin: 5px;
|
||||
min-height: 220rpx;
|
||||
padding: 20rpx 0;
|
||||
/* 元素间距 */
|
||||
box-sizing: border-box;
|
||||
/* 包含内边距和边框 */
|
||||
border-radius: 14rpx;
|
||||
/* 样式美化（可选） */
|
||||
background-color: #fff;
|
||||
// padding: 20rpx;
|
||||
text-align: center;
|
||||
.image{
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
margin-bottom: 24rpx;
|
||||
img{
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
// .image {
|
||||
// width: 80%;
|
||||
// height: 120rpx;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
52
pages/other/gradeRule.vue
Normal file
52
pages/other/gradeRule.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<view class="view-page">
|
||||
<navBar :navTitle="`规则说明`" :style="{'margin-top' : `${statusBarHeight || 0}px`}">
|
||||
</navBar>
|
||||
<view class="dec-view" v-if="flagIndex !== null">
|
||||
<web-view :src="`https://chat.qxmier.com/api/Page/page_show?id=${flagIndex === 1 ? 10 : 11}`"></web-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import navBar from '@/component/nav.vue';
|
||||
export default {
|
||||
components: {
|
||||
navBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight:0,
|
||||
flagIndex:null
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
const {
|
||||
h,flag
|
||||
} = options
|
||||
this.flagIndex = +flag
|
||||
this.statusBarHeight = h
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.view-page {
|
||||
min-height: 100vh;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
background-image: url('@/static/image/help/bg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
.dec-view {
|
||||
min-height: calc(99vh - 160rpx);
|
||||
position: relative;
|
||||
border-radius: 16rpx;
|
||||
margin: 24rpx;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
665
pages/other/income.vue
Normal file
665
pages/other/income.vue
Normal file
@@ -0,0 +1,665 @@
|
||||
<template>
|
||||
<view class="view-page">
|
||||
<view class="nav w-fill flex-line"
|
||||
:style="{marginTop: `${statusBarHeight}${uni.getSystemInfoSync().platform === 'ios' ? 'px': 'dp'}`}">
|
||||
<view class="icon-image" @click="closeWeb">
|
||||
<uni-icons type="left" size="24"></uni-icons>
|
||||
</view>
|
||||
<view class="color-3 title font-w500 font-32">
|
||||
邀请收益
|
||||
</view>
|
||||
<view class="font-24" @click="bind" style="color: #FF8ACC;">
|
||||
手动绑定
|
||||
</view>
|
||||
</view>
|
||||
<view class="content-view" v-if="detailData">
|
||||
<view class="content">
|
||||
<view class="nav-coinList flex-container">
|
||||
<view v-for="(item,index) in listData" :key="index" class="flex-item decorate-box flex-line">
|
||||
<view class="image-icon">
|
||||
<img :src="item.icon" alt="" />
|
||||
</view>
|
||||
<view class="decorate-title">
|
||||
<view class="title font-24 font-w400">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="value font-24 font-w400 flex-line">
|
||||
<view class="">
|
||||
{{detailData[item.prop]}}
|
||||
</view>
|
||||
<view v-if="!index" class="ml-6" @click="exChangeData"
|
||||
style="width: 68rpx;height: 32rpx;">
|
||||
<img src="@/static/image/income/duihuan.png" alt="" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 文字 -->
|
||||
<view class="title-view">
|
||||
<view class="QRCode-view w-fill flex-line flex-spaceB">
|
||||
<view class="flex-line w-fill flex-spaceB">
|
||||
<view class="">
|
||||
<view class="color-3 font-32 font-w500">
|
||||
羽声语音
|
||||
</view>
|
||||
<view class="color-3 font-32 font-w500">
|
||||
邀请码
|
||||
</view>
|
||||
<view class="color-6 font-24 mt-24">
|
||||
一级充值的4%为邀请收益
|
||||
</view>
|
||||
</view>
|
||||
<view class="QRCodeImage">
|
||||
<!-- <img src="@/static/image/income/QRCode.png" alt="" /> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-line w-fill mt-24 flex-spaceB">
|
||||
<view class="Code-view color-3 font-w500" style="letter-spacing: 44rpx;text-align: center;">
|
||||
{{detailData.init_code}}
|
||||
</view>
|
||||
<view class="copy-button color-3 font-w500 font-24" @click="copyText(detailData.init_code)">
|
||||
复制
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="NavigationTabs-view">
|
||||
<NavigationTabs :tabs-data="[{type:1,value:'我的邀请'},{type:2,value:'账单明细'}]"
|
||||
:default-active="currentIndex" @tab-change="handleTabChange" />
|
||||
<Table :tableData="dataList" v-if="!currentIndex" />
|
||||
<Table :tableData="dataList" v-else :tableLabel="columns" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="tiXian" @click="Withdrawal">
|
||||
<img src="@/static/image/income/tixian.png" alt="" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-popup ref="bindPopup" type="center" background-color="#fff" border-radius="32rpx">
|
||||
<view class="bindPopup-view">
|
||||
<view class="bind-title font-32 font-w500 color-3">
|
||||
<view class="">
|
||||
手动绑定
|
||||
</view>
|
||||
<img @click="closeBind" class="closeIcon" src="@/static/image/income/close.png" alt="" />
|
||||
</view>
|
||||
|
||||
<view class="bind-input">
|
||||
<input class="uni-input" v-model="bindValue" placeholder="输入好友邀请码" />
|
||||
</view>
|
||||
<view class="color-3 font-w400 font-24" style="text-align: left;">
|
||||
{{detailData.explain}}
|
||||
</view>
|
||||
<view class="bind-footer" @click="decorate">
|
||||
<view class="confirm-button flex-line">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import headerHeight from '@/component/headerHeight.vue';
|
||||
import http from '@/until/http.js';
|
||||
import Table from '@/component/table.vue'
|
||||
import ZS from '@/static/image/income/zuanshi.png';
|
||||
import Coin from '@/static/image/income/coin.png';
|
||||
import Tx from '@/static/image/income/tixian.png';
|
||||
import DH from '@/static/image/income/duihuan.png';
|
||||
import NavigationTabs from '@/component/tab.vue';
|
||||
import WeChat from '@/static/image/income/WeChat.png';
|
||||
import PYQ from '@/static/image/income/pyq.png';
|
||||
import Qcode from '@/static/image/income/Qcode.png';
|
||||
import QQ from '@/static/image/income/QQ.png';
|
||||
export default {
|
||||
components: {
|
||||
NavigationTabs,
|
||||
headerHeight,
|
||||
Table
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
errorPage: false,
|
||||
detailData: null,
|
||||
currentIndex: 0,
|
||||
// 金币是两位，钻石四位。
|
||||
listData: [{
|
||||
icon: ZS,
|
||||
prop: 'diamond_total',
|
||||
value: 120,
|
||||
title: '钻石余额'
|
||||
},
|
||||
{
|
||||
icon: Coin,
|
||||
value: 200,
|
||||
prop: 'today_earnings',
|
||||
title: '今日收益'
|
||||
},
|
||||
{
|
||||
icon: Coin,
|
||||
value: 200,
|
||||
prop: 'total_earnings',
|
||||
title: '累计收益'
|
||||
}
|
||||
],
|
||||
statusBarHeight: 0,
|
||||
bindValue: '',
|
||||
dataList: [],
|
||||
columns: [
|
||||
{ title: '昵称', key: 'nickname', width: '20%' },
|
||||
{ title: '时间', key: 'createtime', width: '35%' },
|
||||
{ title: '充值金额', key: 'coin', width: '30%' },
|
||||
{ title: '获得收益', key: 'earnings', width: '30%' }
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
const {
|
||||
id,
|
||||
h
|
||||
} = options
|
||||
uni.setStorageSync('token', id)
|
||||
if (uni.getStorageSync('token')) this.gettabs()
|
||||
this.statusBarHeight = this.getStatusBarHeight()
|
||||
this.statusBarHeight = h
|
||||
},
|
||||
methods: {
|
||||
copyText(text) {
|
||||
if(text) {
|
||||
if (uni.getSystemInfoSync().platform === 'h5') {
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = text;
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(textarea);
|
||||
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'none',
|
||||
});
|
||||
return;
|
||||
} else {
|
||||
uni.setClipboardData({
|
||||
data: text,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '已复制到剪贴板',
|
||||
icon: 'none',
|
||||
duration: 1500
|
||||
});
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '复制失败，请重试',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '暂无可复制文本',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
getStatusBarHeight() {
|
||||
const systemInfo = uni.getSystemInfoSync(); // 获取系统信息
|
||||
uni.setStorageSync('BarHeight', systemInfo.statusBarHeight)
|
||||
return systemInfo.statusBarHeight || 0;
|
||||
},
|
||||
closeWeb() {
|
||||
const platform = uni.getSystemInfoSync().platform;
|
||||
if (platform === 'ios') {
|
||||
// 通过 messageHandlers 调用 iOS 原生方法
|
||||
window.webkit.messageHandlers.nativeHandler.postMessage({
|
||||
'action': 'closeWeb'
|
||||
});
|
||||
} else if (platform === 'android') {
|
||||
// 调用 Android 原生方法
|
||||
window.Android.closeWeb();
|
||||
}
|
||||
},
|
||||
async gettabs() {
|
||||
http.get('/api/Invited/get_init_code', {
|
||||
token: uni.getStorageSync('token') ?? '',
|
||||
}).then(response => {
|
||||
const {
|
||||
data,
|
||||
code
|
||||
} = response
|
||||
if (code) {
|
||||
// console.log(data)
|
||||
this.detailData = data
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
})
|
||||
this.errorPage = false
|
||||
}).catch(error => {
|
||||
this.errorPage = true
|
||||
});
|
||||
},
|
||||
getData() {
|
||||
if (this.currentIndex) {
|
||||
// 账单列表
|
||||
this.getBillList()
|
||||
} else {
|
||||
// 邀请列表
|
||||
this.getInvitedList()
|
||||
|
||||
}
|
||||
},
|
||||
getInvitedList() {
|
||||
http.get('/api/Invited/invited_list', {
|
||||
token: uni.getStorageSync('token') ?? '',
|
||||
}).then(response => {
|
||||
const {
|
||||
data,
|
||||
code
|
||||
} = response
|
||||
if (code) {
|
||||
this.dataList = data
|
||||
}
|
||||
}).catch(error => {});
|
||||
},
|
||||
getBillList() {
|
||||
http.get('/api/Invited/bill_list', {
|
||||
token: uni.getStorageSync('token') ?? '',
|
||||
}).then(response => {
|
||||
const {
|
||||
data,
|
||||
code
|
||||
} = response
|
||||
if (code) {
|
||||
this.dataList = data
|
||||
}
|
||||
}).catch(error => {
|
||||
this.errorPage = true
|
||||
});
|
||||
},
|
||||
// 提现
|
||||
Withdrawal() {
|
||||
const platform = uni.getSystemInfoSync().platform;
|
||||
if (platform === 'ios') {
|
||||
window.webkit.messageHandlers.nativeHandler.postMessage({
|
||||
'action': 'Withdrawal'
|
||||
});
|
||||
} else if (platform === 'android') {
|
||||
window.Android.Withdrawal();
|
||||
}
|
||||
},
|
||||
invite() {
|
||||
const platform = uni.getSystemInfoSync().platform;
|
||||
if (platform === 'ios') {
|
||||
window.webkit.messageHandlers.nativeHandler.postMessage({
|
||||
'action': 'inviteUser'
|
||||
});
|
||||
} else if (platform === 'android') {
|
||||
window.Android.inviteUser();
|
||||
}
|
||||
},
|
||||
exChangeData() {
|
||||
const platform = uni.getSystemInfoSync().platform;
|
||||
if (platform === 'ios') {
|
||||
window.webkit.messageHandlers.nativeHandler.postMessage({
|
||||
'action': 'exchange'
|
||||
});
|
||||
} else if (platform === 'android') {
|
||||
window.Android.exchange();
|
||||
}
|
||||
},
|
||||
closePopup() {
|
||||
this.$refs.popup.close()
|
||||
},
|
||||
handleTabChange({
|
||||
index,
|
||||
tab
|
||||
}) {
|
||||
this.currentIndex = index
|
||||
// console.log(this.currentIndex)
|
||||
this.getData()
|
||||
},
|
||||
// 绑定
|
||||
bind() {
|
||||
this.$refs.bindPopup.open('center')
|
||||
},
|
||||
closeBind() {
|
||||
this.$refs.bindPopup.close()
|
||||
},
|
||||
decorate() {
|
||||
if (this.bindValue) {
|
||||
uni.showLoading({
|
||||
mask: true
|
||||
})
|
||||
http.post('/api/Invited/invited_bind', {
|
||||
token: uni.getStorageSync('token') ?? '',
|
||||
init_code: this.bindValue
|
||||
}).then(response => {
|
||||
const {
|
||||
data,
|
||||
code,
|
||||
msg
|
||||
} = response
|
||||
if (code) {
|
||||
uni.showToast({
|
||||
title: '绑定成功',
|
||||
icon: 'success',
|
||||
mask: true,
|
||||
duration: 1000
|
||||
});
|
||||
uni.hideLoading()
|
||||
this.closeBind()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: msg,
|
||||
icon: 'error',
|
||||
mask: true,
|
||||
duration: 1000
|
||||
});
|
||||
uni.hideLoading()
|
||||
this.closeBind()
|
||||
}
|
||||
|
||||
}).catch(error => {});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '请输入邀请码',
|
||||
icon: 'error',
|
||||
mask: true,
|
||||
duration: 1000
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.view-page {
|
||||
width: 100vw;
|
||||
|
||||
margin: 0 auto;
|
||||
|
||||
.nav {
|
||||
padding: 24rpx;
|
||||
justify-content: space-between;
|
||||
width: calc(100% - 48rpx);
|
||||
background: #fff;
|
||||
|
||||
.icon-image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.content-view {
|
||||
min-height: 93vh;
|
||||
padding-top: 24rpx;
|
||||
background: #FBEEDD;
|
||||
background-image: url('@/static/image/income/Maskgroup.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.content {
|
||||
padding: 0 30rpx;
|
||||
width: calc(100vw - 60rpx);
|
||||
|
||||
.tiXian {
|
||||
width: 44rpx;
|
||||
height: 96rpx;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-coinList {
|
||||
width: 100%;
|
||||
min-height: 108rpx;
|
||||
background-image: url('@/static/image/income/Rectangle.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
/* 启用 Flex 布局 */
|
||||
flex-wrap: wrap;
|
||||
/* 允许换行 */
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-item {
|
||||
flex: 0 0 calc(30%);
|
||||
/* 基础宽度25% 减去间隔 */
|
||||
// margin: 5px;
|
||||
/* 元素间距 */
|
||||
box-sizing: border-box;
|
||||
/* 包含内边距和边框 */
|
||||
border-radius: 14rpx;
|
||||
/* 样式美化（可选） */
|
||||
// background-color: #fff;
|
||||
// padding: 20rpx;
|
||||
text-align: center;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.image-icon {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
}
|
||||
|
||||
.decorate-title {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
text-align: left;
|
||||
|
||||
.title {
|
||||
color: #6A2E00;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #FF2727;
|
||||
width: 100%;
|
||||
// justify-content: space-around;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title-view {
|
||||
width: calc(100% - 60rpx);
|
||||
height: 68rpx;
|
||||
position: absolute;
|
||||
top: 770rpx;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.QRCode-view {
|
||||
background: #F7F2F1;
|
||||
flex-wrap: wrap;
|
||||
padding: 32rpx;
|
||||
border-radius: 32rpx;
|
||||
width: 100%;
|
||||
|
||||
// min-height:338rpx;
|
||||
.QRCodeImage {
|
||||
width: 168rpx;
|
||||
height: 168rpx;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.Code-view {
|
||||
background-color: #E5E5E5;
|
||||
border-radius: 4rpx;
|
||||
width: 70%;
|
||||
padding: 10rpx 20rpx;
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
// width: 112rpx;
|
||||
border-radius: 4rpx;
|
||||
background-color: #0DFFB9;
|
||||
text-align: center;
|
||||
padding: 12rpx 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.title-bg {
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
background-image: url('@/static/image/income/title-bg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.NavigationTabs-view {
|
||||
margin-top: 32rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
background-color: #F7F2F1;
|
||||
width: calc(100% - 60rpx);
|
||||
border-radius: 10rpx;
|
||||
|
||||
.navigation-container {
|
||||
::v-deep .nav-tabs {
|
||||
// background: #F7F2F1;
|
||||
display: inline-flex !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-view {
|
||||
padding: 32rpx;
|
||||
min-height: 300rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
// background: #FFFFFF;
|
||||
|
||||
.share-view {
|
||||
display: flex;
|
||||
/* 启用 Flex 布局 */
|
||||
flex-wrap: wrap;
|
||||
/* 允许换行 */
|
||||
justify-content: center;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
|
||||
.share-item {
|
||||
flex: 0 0 calc(25% - 10px);
|
||||
/* 基础宽度25% 减去间隔 */
|
||||
margin: 5px;
|
||||
/* 元素间距 */
|
||||
box-sizing: border-box;
|
||||
/* 包含内边距和边框 */
|
||||
border-radius: 14rpx;
|
||||
/* 样式美化（可选） */
|
||||
// background-color: #fff;
|
||||
// padding: 20rpx;
|
||||
// text-align: center;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.share-icon {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bindPopup-view {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
padding: 24rpx;
|
||||
width: 70vw;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
.closeIcon {
|
||||
width: 22rpx;
|
||||
height: 26rpx;
|
||||
position: absolute;
|
||||
top: 34rpx;
|
||||
right: 34rpx;
|
||||
}
|
||||
|
||||
.bind-title {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.bind-input {
|
||||
background: #EFF2F8;
|
||||
border-radius: 22rpx;
|
||||
padding: 18rpx 32rpx;
|
||||
margin: 70rpx 0;
|
||||
}
|
||||
|
||||
.bind-footer {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
margin-top: 78rpx;
|
||||
|
||||
.confirm-button {
|
||||
width: 356rpx;
|
||||
height: 84rpx;
|
||||
background: #0DFFB9;
|
||||
border-radius: 106rpx;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
height: 140rpx;
|
||||
position: absolute;
|
||||
bottom: 30rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.footer-button {
|
||||
width: 186rpx;
|
||||
height: 68rpx;
|
||||
background: linear-gradient(180deg, #EE9D87 0%, #E74B47 100%);
|
||||
box-shadow: inset 0rpx 8rpx 0rpx 0rpx #EA805F;
|
||||
border-radius: 38rpx 38rpx 38rpx 38rpx;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
103
pages/other/taskDesc.vue
Normal file
103
pages/other/taskDesc.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<view class="view-page">
|
||||
<view class="image">
|
||||
<img src="/static/image/task/rule.png" alt="" />
|
||||
</view>
|
||||
<view class="dec-view" style="background-color: transparent !important;">
|
||||
<web-view :style="{ backgroundColor: 'transparent' }" :webview-styles="webviewStyles" src="https://chat.qxmier.com/api/Page/page_show?id=17"></web-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 关键配置：设置 WebView 样式
|
||||
webviewStyles: {
|
||||
progress: {
|
||||
color: 'transparent' // 隐藏进度条
|
||||
},
|
||||
// 安卓专用配置
|
||||
android: {
|
||||
hardwareAccelerated: true, // 开启硬件加速
|
||||
backgroundColor: 'transparent'
|
||||
},
|
||||
// iOS 专用配置
|
||||
ios: {
|
||||
allowsInlineMediaPlayback: true,
|
||||
backgroundColor: 'transparent'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
// #ifdef APP-PLUS
|
||||
// 获取 WebView 实例进行原生设置
|
||||
const pages = getCurrentPages();
|
||||
const page = pages[pages.length - 1];
|
||||
const currentWebview = page.$getAppWebview();
|
||||
|
||||
setTimeout(() => {
|
||||
const webview = currentWebview.children()[0];
|
||||
|
||||
// 安卓原生设置
|
||||
// #ifdef APP-ANDROID
|
||||
webview.setStyle({
|
||||
background: 'transparent'
|
||||
});
|
||||
// #endif
|
||||
|
||||
// iOS 原生设置
|
||||
// #ifdef APP-IOS
|
||||
webview.setStyle({
|
||||
opaque: false
|
||||
});
|
||||
// #endif
|
||||
}, 300); // 延迟确保 WebView 加载完成
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::-webkit-scrollbar {
|
||||
display: none !important;
|
||||
}
|
||||
/* 重要：设置页面背景透明 */
|
||||
page {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* 隐藏 WebView 默认容器背景 */
|
||||
uni-web-view > div {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.view-page {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
min-width: calc(100% - 40rpx);
|
||||
padding: 0 20rpx;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color: transparent !important;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
.image{
|
||||
width: calc(100% - 40rpx);
|
||||
// min-height: 100vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 20rpx;
|
||||
right: 20rpx;
|
||||
// bottom: 0;
|
||||
}
|
||||
.dec-view {
|
||||
width: calc(100% - 40rpx - 48rpx);
|
||||
min-height: calc(60% - 48rpx);
|
||||
position: absolute;
|
||||
top: 33%;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user