|
@@ -1,62 +1,434 @@
|
|
|
<template>
|
|
|
- <view :style="{ minHeight: sys.windowHeight + 'px' }"
|
|
|
- :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
|
|
|
- <tm-menubars title="消息列表" :shadow="0" :showback="true"></tm-menubars>
|
|
|
- <div class="zhuti">
|
|
|
- <tm-sheet class="kuang" style="padding-bottom: 70px !important;">
|
|
|
- <view style="width: 94%;margin:0 auto;">
|
|
|
- <view>
|
|
|
- <text class="fl text-white">我的钱包</text>
|
|
|
- <text class="fr">规则</text>
|
|
|
+ <view :style="{ minHeight: sys.windowHeight + 'px' }" :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
|
|
|
+ <tm-menubars title="我的钱包" :shadow="0" :showback="true"></tm-menubars>
|
|
|
+
|
|
|
+ <div class="zhuti" style="padding-bottom:60px !important;">
|
|
|
+ <tm-sheet class="kuang">
|
|
|
+ <view style="padding: 12px 12px 0;position: relative;">
|
|
|
+ <view class="my_top">
|
|
|
+ <text>我的钱包</text>
|
|
|
+ <text>规则</text>
|
|
|
+ </view>
|
|
|
+ <view class="my_rest">
|
|
|
+ <view style="display: flex;flex-direction: column;align-items: center;margin-bottom: 20px;">
|
|
|
+ <text class="rest_money">{{rest}}</text>
|
|
|
+ <text style="color: #fff;font-size: 15px;">钱包余额</text>
|
|
|
+ </view>
|
|
|
+ <view class="my_fun">
|
|
|
+ <view class="fun_btn" @click="goPay">充值</view>
|
|
|
+ <view class="fun_btn" @click="goCash">提现</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <image src="../../static/img/104.png" mode="widthFix" style="width: 104px;height: 70px;"></image>
|
|
|
+ </view>
|
|
|
+ </tm-sheet>
|
|
|
+ <tm-sheet class="kuang">
|
|
|
+ <view class="" style="padding: 20px 10px;">
|
|
|
+ <view class="line_bottom btm_flex" v-for="item in optList" :key="item.id">
|
|
|
+ <view style="display: flex;flex-direction: column;">
|
|
|
+ <text class="btm_info" style="font-size: 16px;color: #ffffff;">{{item.way}}</text>
|
|
|
+ <text class="btm_info" style="font-size: 14px;">{{item.from}}</text>
|
|
|
+ <text class="btm_info" style="font-size: 13px;">{{item.time}}</text>
|
|
|
+ </view>
|
|
|
+ <view style="color: #ffcc00;font-size: 14px;">+¥{{item.money}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</tm-sheet>
|
|
|
</div>
|
|
|
+ <tm-poup v-model="show" position="center" width="95%" height="400px">
|
|
|
+ <view class="" style="background-color: #303030;height: 100%;">
|
|
|
+ <view class="price_title">
|
|
|
+ <!-- 占位 -->
|
|
|
+ <text></text>
|
|
|
+ <text>充值</text>
|
|
|
+ <image src="../../static/img/105.png" mode="widthFix"
|
|
|
+ style="width: 24px;height: 24px;vertical-align: middle;" @click="goCancal"></image>
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+ <view class="price_box">
|
|
|
+ <view :class="selectType==index?'price_info_active':'price_info_Inactive'"
|
|
|
+ v-for="(item,index) in payList" :key="item.id" @click="selectIndex(index)">
|
|
|
+ <text class="info_pri">{{item.price}}</text>
|
|
|
+ <text class="info_mark" style="font-size: 13px;">({{item.mark}}元)</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="inps">
|
|
|
+ <tm-input :border-bottom="false" :vertical="true" title="" v-model="prices"
|
|
|
+ placeholder="自定义充值金额" align="left" bg-color="rgba(30, 30, 30, 1)" round="5">
|
|
|
+ </tm-input>
|
|
|
+ <view class="btns">
|
|
|
+ <view class="quxiao" @click="goConfirm">取消</view>
|
|
|
+ <view class="queding" @click="goConfirm">确认 </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </tm-poup>
|
|
|
<!-- 弹出层消息 -->
|
|
|
<tm-message ref="toast"></tm-message>
|
|
|
</view>
|
|
|
-</template>
|
|
|
+</template>
|
|
|
<script>
|
|
|
-import{myRequest} from '@/api/request.js'
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- checked1:false,
|
|
|
- checked2:false,
|
|
|
- checked3:false,
|
|
|
- beizu:''
|
|
|
- };
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
-
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.sys = uni.getSystemInfoSync();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- aa(num){
|
|
|
- if(num==1){
|
|
|
- this.checked1=true;
|
|
|
- this.checked2=false;
|
|
|
- this.checked3=false;
|
|
|
- }else if(num==2){
|
|
|
- this.checked1=false;
|
|
|
- this.checked2=true;
|
|
|
- this.checked3=false;
|
|
|
- }else if(num==3){
|
|
|
- this.checked1=false;
|
|
|
- this.checked2=false;
|
|
|
- this.checked3=true;
|
|
|
+ import {
|
|
|
+ myRequest
|
|
|
+ } from '@/api/request.js'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ selectType: 0,
|
|
|
+ prices: '',
|
|
|
+ show: false,
|
|
|
+ rest: '2136',
|
|
|
+ optList: [{
|
|
|
+ way: '充值',
|
|
|
+ from: '通过苹果应用内支付(IAP)支出',
|
|
|
+ time: '2022-05-07 00:01 已到账',
|
|
|
+ money: '100.00'
|
|
|
+ }],
|
|
|
+ // 充值列表
|
|
|
+ payList: [{
|
|
|
+ price: '233',
|
|
|
+ mark: '233'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ price: '666',
|
|
|
+ mark: '666'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ price: '1000',
|
|
|
+ mark: '1000'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ price: '6666',
|
|
|
+ mark: '6666'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ listdata: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad() {},
|
|
|
+ created() {
|
|
|
+ this.sys = uni.getSystemInfoSync();
|
|
|
+ this.randouh()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ selectIndex(index) {
|
|
|
+ console.log(index, '2');
|
|
|
+ this.selectType = index;
|
|
|
+ },
|
|
|
+ randouh() {
|
|
|
+ let list2 = [],
|
|
|
+ that = this;
|
|
|
+ for (let i = 0; i < 8; i++) {
|
|
|
+ list2.push({
|
|
|
+ image: '../../static/img/90.png',
|
|
|
+ text: '帽子',
|
|
|
+ jiage: '¥ 359.00',
|
|
|
+ xiaol: '128'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.listdata = this.listdata.concat(list2)
|
|
|
+ console.log(this.listdata)
|
|
|
+ },
|
|
|
+ gengmore() {
|
|
|
+ this.randouh()
|
|
|
+ },
|
|
|
+ goPay() {
|
|
|
+ this.show = true;
|
|
|
+ },
|
|
|
+ goCancal() {
|
|
|
+ this.show = false
|
|
|
+ },
|
|
|
+ goConfirm() {
|
|
|
+ this.show = false;
|
|
|
+ },
|
|
|
+ goCash() {
|
|
|
+ console.log('提现');
|
|
|
}
|
|
|
},
|
|
|
- },
|
|
|
-}
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- /deep/ .tm-menubars .body{
|
|
|
+ /deep/ .tm-menubars .body {
|
|
|
background-color: #1b1b1b !important;
|
|
|
}
|
|
|
- /deep/ .zhuti{padding: 10px 10px;}
|
|
|
- /deep/ .kuang{margin:0 !important;padding: 0px !important;}
|
|
|
+
|
|
|
+ /deep/ .zhuti {
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .kuang {
|
|
|
+ margin: 0 !important;
|
|
|
+ padding: 0px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .my_top {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .my_rest {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 40px;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 22;
|
|
|
+
|
|
|
+ .rest_money {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #ffcc00;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 36px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .my_fun {
|
|
|
+ display: flex;
|
|
|
+ color: #ffffff;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0px 80px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fun_btn {
|
|
|
+ padding: 5px 23px;
|
|
|
+ background: #0178FD;
|
|
|
+ border-radius: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .kuang .line_bottom {
|
|
|
+ padding: 10px;
|
|
|
+ border-bottom: 1px solid rgba(129, 129, 129, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ .btm_info {
|
|
|
+ margin: 5px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btm_flex {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .kuang .line_bottom:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .line_my {
|
|
|
+ margin: 10px 0;
|
|
|
+ display: flex;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price_title {
|
|
|
+ height: 54px;
|
|
|
+ display: flex;
|
|
|
+ color: #ffffff;
|
|
|
+ padding: 0px 16px;
|
|
|
+ align-items: center;
|
|
|
+ background: #0178fd;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price_box {
|
|
|
+ width: 100%;
|
|
|
+ padding: 13px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price_info_active,
|
|
|
+ .price_info_Inactive {
|
|
|
+ width: 30%;
|
|
|
+ height: 80px;
|
|
|
+ display: flex;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: rgba(37, 37, 37, 0.5);
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin: 0px 0 8px;
|
|
|
+
|
|
|
+ .info_pri {
|
|
|
+ margin-bottom: 3px;
|
|
|
+ font-size: 19px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .price_info_active {
|
|
|
+ border: 1px solid #0178fd;
|
|
|
+
|
|
|
+ .info_pri {
|
|
|
+ color: #0178fd;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info_mark {
|
|
|
+ color: #0178fd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .price_info_Inactive {
|
|
|
+ border: 1px solid #AAAAAA;
|
|
|
+
|
|
|
+ .info_pri {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info_mark {}
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .qiehuan1 .text-primary {
|
|
|
+ color: white !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .touxiang {
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .xiugai image {
|
|
|
+ width: 18px;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .xiugai text {
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .xiugai {
|
|
|
+ position: absolute;
|
|
|
+ right: 5px;
|
|
|
+ top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .you {
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 10px;
|
|
|
+ width: 88%;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .you .grey-darken-5 {
|
|
|
+ background-color: #0d0d0d !important;
|
|
|
+ padding: 0px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .you .text-red {
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .tan .active {
|
|
|
+ background-color: #AAAAAA !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .tan .tm-poups .grey-darken-5 {
|
|
|
+ background-color: gray !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .tan uni-input {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .you .border-grey-darken-4-b-1 {
|
|
|
+ border-bottom: solid 1px #313131 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .inps .grey-darken-5 {
|
|
|
+ background-color: transparent !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .yiguicla image {
|
|
|
+ width: 95%;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .yiguicla {
|
|
|
+ width: 30%;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sao {
|
|
|
+ width: 88%;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .mx-32 {
|
|
|
+ margin: 0px !important;
|
|
|
+ margin-top: 15px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dingwei {
|
|
|
+ width: 21%;
|
|
|
+ margin-top: 3%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contone {
|
|
|
+ width: 48%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .remenzan {
|
|
|
+ width: 18px !important;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .more {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .more image {
|
|
|
+ margin-right: 10px;
|
|
|
+ vertical-align: middle;
|
|
|
+ width: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btns {
|
|
|
+ margin: 33px 0px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0px 30px;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .quxiao {
|
|
|
+ border-radius: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ background: #303440;
|
|
|
+ width: 120px;
|
|
|
+ height: 35px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 35px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .queding {
|
|
|
+ border-radius: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ background: #0178fd;
|
|
|
+ width: 120px;
|
|
|
+ height: 35px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 35px;
|
|
|
+ }
|
|
|
+ /deep/ .uni-scroll-view-content{
|
|
|
+ background: #303030;
|
|
|
+ }
|
|
|
</style>
|