Skip to content

A
az-uniapp-wechat-web
Commit 68f197b8 authored by 李智书's avatar 李智书
Browse files
Options

1.修改充值体现页面

parent 30d4497f
Show whitespace changes
Inline Side-by-side
Showing with 1769 additions and 650 deletions
components/keyboard-package/keyboard-package.vue 0 → 100644
View file @ 68f197b8
<template>
<uni-popup :custom="true" type="bottom" ref="keyboardPackage">
<view class="keyboardbox">
<view class="numkeyboard" v-if="type==='number'">
<view class="num-area">
<view class="row" v-for="(item,index) in numKeybordList" :key="index">
<view :class="['item',ite===0?'z':'',(disableDot && ite==='.')?'disabled':'']" v-for="(ite,idx) in item"
hover-class="active" :hover-start-time="0" :hover-stay-time="5" :key="idx" @tap="input(ite)">{{ite}}</view>
</view>
</view>
<view class="btn-area">
<view :class="['item','del']" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="deleteVal">
删除
</view>
<view class="confirem item" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="confirm">
完成
</view>
</view>
</view>
<view class="numkeyboard" v-if="type==='idCard'">
<view class="num-area">
<view class="row" v-for="(item,index) in idCardList" :key="index">
<view :class="['item',ite===0?'z':'',(disableDot && ite==='.')?'disabled':'']" v-for="(ite,idx) in item"
hover-class="active" :hover-start-time="0" :hover-stay-time="5" :key="idx" @tap="input(ite)">{{ite}}</view>
</view>
</view>
<view class="btn-area">
<view :class="['item','del']" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="deleteVal">
删除
</view>
<view class="confirem item" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="confirm">
完成
</view>
</view>
</view>
<view class="platenumber" v-if="type==='plateNumber'">
<view class="header">
<view @tap="active=active===1?2:1" hover-class="active" :hover-start-time="0" :hover-stay-time="5">{{active===1?'地区':'车牌号'}}</view>
<view hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="confirm">完成</view>
</view>
<view class="main">
<view class="normal" v-show="active===1">
<view class="row" v-for="(item,index) in EngKeyBoardList" :key="index">
<view class="item" v-for="(ite,idx) in item" :key="idx" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="input(ite)">
{{ite}}
</view>
<view class="item img" v-if="index===EngKeyBoardList.length-1" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="deleteVal">
<image src="/static/delete.png" mode=""></image>
</view>
</view>
</view>
<view class="area" v-show="active===2">
<view class="row" v-for="(item,index) in areaList" :key="index">
<view class="item" v-for="(ite,idx) in item" :key="idx" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="input(ite)">
{{ite}}
</view>
<view class="item img" v-if="index===EngKeyBoardList.length-1" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="deleteVal">
<image src="/static/delete.png" mode=""></image>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="safe-area" v-if="safeAreaInsetBottom"></view>
</uni-popup>
</template>
<script>
import uniPopup from "@/components/uni-popup/uni-popup.vue"
export default {
components: {
uniPopup
},
props: {
type: {
type: String,
default: 'number'
},
safeAreaInsetBottom: { //是否设置安全区
type: Boolean,
default: false
},
disableDot: { //数字键盘是否禁止点击.仅type为number生效
type: Boolean,
default: false
}
},
data() {
return {
numKeybordList: [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
[0, '.']
],
idCardList: [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
[0, 'X']
],
areaList: [
['京', '沪', '粤', '津', '冀', '豫', '云', '辽', '黑', '湘'],
['皖', '鲁', '苏', '浙', '赣', '鄂', '桂', '甘', '晋', '陕'],
['蒙', '吉', '闽', '贵', '渝', '川', '青', '琼', '宁'],
['藏', '新', '使', '港', '澳', '学']
],
EngKeyBoardList: [
[1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
['Z', 'X', 'C', 'V', 'B', 'N', 'M']
],
active: 2
};
},
methods: {
open() {
this.$refs.keyboardPackage.open();
},
confirm() {
this.close();
this.$emit('onConfirm');
},
deleteVal() {
this.$emit('onDelete');
},
input(val) {
if (val === '.' && this.disableDot) return;
this.$emit('onInput', val);
if(this.active === 2){
this.active = 1;
}
},
close() {
this.$refs.keyboardPackage.close();
}
}
}
</script>
<style lang="scss" scoped>
.keyboardbox {
background-color: #FFFFFF;
.numkeyboard {
height: 432rpx;
display: flex;
background-color: #ebedf0;
.btn-area {
width: 180rpx;
height: 100%;
display: flex;
flex-direction: column;
.item {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}
.del {
background-color: #ebedf0;
color: #333;
&.active {
background-color: #f1f3f5;
}
}
.confirem {
background-color: #1989fa;
color: #FFFFFF;
&.active {
background-color: #0570db;
}
}
}
.num-area {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
.row {
width: 100%;
height: 25%;
display: flex;
margin-top: 1px;
.item {
flex-grow: 1;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
border-right: 1px solid #ebedf0;
width: 33.33%;
&.active {
background-color: #ebedf0;
}
&.z {
flex-grow: 2;
width: 66.66%;
}
&.disabled {
background: #FFFFFF;
color: #B9B9B9;
}
}
}
}
}
}
.safe-area {
padding-bottom: 0rpx;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.platenumber {
background-color: #f5f5f5;
.header {
height: 76rpx;
background-color: #FFFFFF;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
border-top: 1px solid #f5f5f5;
&>view {
padding: 0 45rpx;
color: #00a7ea;
height: 100%;
display: flex;
align-items: center;
&.active {
background-color: #ebedf0;
}
}
}
.main {
height: 435rpx;
.row {
margin: 13rpx 0;
display: flex;
justify-content: center;
align-items: center;
.item {
width: 56rpx;
height: 94rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
border-radius: 6rpx;
margin: 0 7rpx;
font-size: 24rpx;
&.active {
background-color: #ebedf0;
}
&.img {
background-color: #c2cacc;
width: 94rpx;
&.active {
background-color: #ddd;
}
&>image {
width: 49rpx;
height: 48rpx;
}
}
}
}
}
}
</style>
components/password-input/password-input.vue 0 → 100644
View file @ 68f197b8
<template>
<view class="box">
<view :class="['item',list.length===index?'fakecursor':'']" v-for="(item,index) in length" :key="item" :style="{margin:formatMargin(gutter)}">
<view class="psw" v-if="showPsw">{{list[index]}}</view>
<view :class="['circle',(index<list.length)?'dot':'']" v-else></view>
</view>
</view>
</template>
<script>
export default {
props: {
length: { //长度只允许为6和4
type: Number,
default: 6,
validator(val) {
if (val !== 6 && val !== 4) {
return false;
}
return true;
}
},
gutter: {
type: Number,
default: 0
},
list: {
type: Array,
default: function() {
return [];
}
},
showPsw: { // 展示密码
type: Boolean,
default: false,
}
},
data() {
return {};
},
computed: {
},
methods: {
formatMargin(gutter) {
return 0 + ' ' + gutter + 'rpx';
}
}
}
</script>
<style lang="scss" scoped>
.box {
background-color: #F5F5F5;
padding: 20rpx;
display: flex;
.item {
position: relative;
background-color: #FFFFFF;
height: 100rpx;
flex: 1;
border: 1px solid #F5F5F5;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20rpx;
.circle {
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background-color: #fff;
&.dot {
background-color: #000;
}
}
.psw{
font-size: 24rpx;
}
}
}
.fakecursor::after {
content: '';
display: block;
width: 1px;
height: 32rpx;
animation: blink 1s infinite steps(1, start);
position: absolute;
left: 50%;
top: 50%;
margin-top: -16rpx;
}
@keyframes blink {
0% {
background-color: white;
}
50% {
background-color: black;
}
100% {
background-color: white;
}
}
</style>
components/uni-popup/message.js 0 → 100644
View file @ 68f197b8
export default {
created() {
if (this.type === 'message') {
// 不显示遮罩
this.maskShow = false
// 获取子组件对象
this.childrenMsg = null
}
},
methods: {
customOpen() {
if (this.childrenMsg) {
this.childrenMsg.open()
}
},
customClose() {
if (this.childrenMsg) {
this.childrenMsg.close()
}
}
}
}
components/uni-popup/popup.js 0 → 100644
View file @ 68f197b8
import message from './message.js';
// 定义 type 类型:弹出类型：top/bottom/center
const config = {
// 顶部弹出
top:'top',
// 底部弹出
bottom:'bottom',
// 居中弹出
center:'center',
// 消息提示
message:'top',
// 对话框
dialog:'center',
// 分享
share:'bottom',
}
export default {
data(){
return {
config:config
}
},
mixins: [message],
}
components/uni-popup/uni-popup-dialog.vue 0 → 100644
View file @ 68f197b8
<template>
<view class="uni-popup-dialog">
<view class="uni-dialog-title">
<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{title}}</text>
</view>
<view class="uni-dialog-content">
<text class="uni-dialog-content-text" v-if="mode === 'base'">{{content}}</text>
<input v-else class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholder" :focus="focus" >
</view>
<view class="uni-dialog-button-group">
<view class="uni-dialog-button" @click="close">
<text class="uni-dialog-button-text">取消</text>
</view>
<view class="uni-dialog-button uni-border-left" @click="onOk">
<text class="uni-dialog-button-text uni-button-color">确定</text>
</view>
</view>
</view>
</template>
<script>
/**
* PopUp 弹出层-对话框样式
* @description 弹出层-对话框样式
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} value input 模式下的默认值
* @property {String} placeholder input 模式下输入提示
* @property {String} type = [success|warning|info|error] 主题样式
* @value success 成功
* @value warning 提示
* @value info 消息
* @value error 错误
* @property {String} mode = [base|input] 模式、
* @value base 基础对话框
* @value input 可输入对话框
* @property {String} content 对话框内容
* @property {Boolean} beforeClose 是否拦截取消事件
* @event {Function} confirm 点击确认按钮触发
* @event {Function} close 点击取消按钮触发
*/
export default {
name: "uniPopupDialog",
props: {
value: {
type: [String, Number],
default: ''
},
placeholder: {
type: [String, Number],
default: '请输入内容'
},
/**
* 对话框主题 success/warning/info/error 默认 success
*/
type: {
type: String,
default: 'error'
},
/**
* 对话框模式 base/input
*/
mode: {
type: String,
default: 'base'
},
/**
* 对话框标题
*/
title: {
type: String,
default: '提示'
},
/**
* 对话框内容
*/
content: {
type: String,
default: ''
},
/**
* 拦截取消事件 ，如果拦截取消事件，必须监听close事件，执行 done()
*/
beforeClose: {
type: Boolean,
default: false
}
},
data() {
return {
dialogType: 'error',
focus: false,
val: ""
}
},
inject: ['popup'],
watch: {
type(val) {
this.dialogType = val
},
mode(val) {
if (val === 'input') {
this.dialogType = 'info'
}
},
value(val) {
this.val = val
}
},
created() {
// 对话框遮罩不可点击
this.popup.mkclick = false
if (this.mode === 'input') {
this.dialogType = 'info'
this.val = this.value
} else {
this.dialogType = this.type
}
},
mounted() {
this.focus = true
},
methods: {
/**
* 点击确认按钮
*/
onOk() {
this.$emit('confirm', () => {
this.popup.close()
if (this.mode === 'input') this.val = this.value
}, this.mode === 'input' ? this.val : '')
},
/**
* 点击取消按钮
*/
close() {
if (this.beforeClose) {
this.$emit('close', () => {
this.popup.close()
})
return
}
this.popup.close()
}
}
}
</script>
<style lang="scss" scoped>
.uni-popup-dialog {
width: 300px;
border-radius: 15px;
background-color: #fff;
}
.uni-dialog-title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
padding-top: 15px;
padding-bottom: 5px;
}
.uni-dialog-title-text {
font-size: 16px;
font-weight: 500;
}
.uni-dialog-content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
padding: 5px 15px 15px 15px;
}
.uni-dialog-content-text {
font-size: 14px;
color: #6e6e6e;
}
.uni-dialog-button-group {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
border-top-color: #f5f5f5;
border-top-style: solid;
border-top-width: 1px;
}
.uni-dialog-button {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
justify-content: center;
align-items: center;
height: 45px;
}
.uni-border-left {
border-left-color: #f0f0f0;
border-left-style: solid;
border-left-width: 1px;
}
.uni-dialog-button-text {
font-size: 14px;
}
.uni-button-color {
color: $uni-color-primary;
}
.uni-dialog-input {
flex: 1;
font-size: 14px;
}
.uni-popup__success {
color: $uni-color-success;
}
.uni-popup__warn {
color: $uni-color-warning;
}
.uni-popup__error {
color: $uni-color-error;
}
.uni-popup__info {
color: #909399;
}
</style>
components/uni-popup/uni-popup-message.vue 0 → 100644
View file @ 68f197b8
<template>
<view class="uni-popup-message" :class="'uni-popup__'+[type]">
<text class="uni-popup-message-text" :class="'uni-popup__'+[type]+'-text'">{{message}}</text>
</view>
</template>
<script>
/**
* PopUp 弹出层-消息提示
* @description 弹出层-消息提示
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} type = [success|warning|info|error] 主题样式
* @value success 成功
* @value warning 提示
* @value info 消息
* @value error 错误
* @property {String} message 消息提示文字
* @property {String} duration 显示时间，设置为 0 则不会自动关闭
*/
export default {
name: 'UniPopupMessage',
props: {
/**
* 主题 success/warning/info/error 默认 success
*/
type: {
type: String,
default: 'success'
},
/**
* 消息文字
*/
message: {
type: String,
default: ''
},
/**
* 显示时间，设置为 0 则不会自动关闭
*/
duration: {
type: Number,
default: 3000
}
},
inject: ['popup'],
data() {
return {}
},
created() {
this.popup.childrenMsg = this
},
methods: {
open() {
if (this.duration === 0) return
clearTimeout(this.popuptimer)
this.popuptimer = setTimeout(() => {
this.popup.close()
}, this.duration)
},
close() {
clearTimeout(this.popuptimer)
}
}
}
</script>
<style lang="scss" scoped>
.uni-popup-message {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
background-color: #e1f3d8;
padding: 10px 15px;
border-color: #eee;
border-style: solid;
border-width: 1px;
}
.uni-popup-message-text {
font-size: 14px;
padding: 0;
}
.uni-popup__success {
background-color: #e1f3d8;
}
.uni-popup__success-text {
color: #67C23A;
}
.uni-popup__warn {
background-color: #faecd8;
}
.uni-popup__warn-text {
color: #E6A23C;
}
.uni-popup__error {
background-color: #fde2e2;
}
.uni-popup__error-text {
color: #F56C6C;
}
.uni-popup__info {
background-color: #F2F6FC;
}
.uni-popup__info-text {
color: #909399;
}
</style>
components/uni-popup/uni-popup-share.vue 0 → 100644
View file @ 68f197b8
<template>
<view class="uni-popup-share">
<view class="uni-share-title"><text class="uni-share-title-text">{{title}}</text></view>
<view class="uni-share-content">
<view class="uni-share-content-box">
<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
<text class="uni-share-text">{{item.text}}</text>
</view>
</view>
</view>
<view class="uni-share-button-box">
<button class="uni-share-button" @click="close">取消</button>
</view>
</view>
</template>
<script>
export default {
name: 'UniPopupShare',
props: {
title: {
type: String,
default: '分享到'
}
},
inject: ['popup'],
data() {
return {
bottomData: [{
text: '微信',
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-2.png',
name: 'wx'
},
{
text: '支付宝',
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-8.png',
name: 'wx'
},
{
text: 'QQ',
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/gird-3.png',
name: 'qq'
},
{
text: '新浪',
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-1.png',
name: 'sina'
},
{
text: '百度',
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-7.png',
name: 'copy'
},
{
text: '其他',
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-5.png',
name: 'more'
}
]
}
},
created() {},
methods: {
/**
* 选择内容
*/
select(item, index) {
this.$emit('select', {
item,
index
}, () => {
this.popup.close()
})
},
/**
* 关闭窗口
*/
close() {
this.popup.close()
}
}
}
</script>
<style lang="scss" scoped>
.uni-popup-share {
background-color: #fff;
}
.uni-share-title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
height: 40px;
}
.uni-share-title-text {
font-size: 14px;
color: #666;
}
.uni-share-content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
padding-top: 10px;
}
.uni-share-content-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex-wrap: wrap;
width: 360px;
}
.uni-share-content-item {
width: 90px;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
padding: 10px 0;
align-items: center;
}
.uni-share-content-item:active {
background-color: #f5f5f5;
}
.uni-share-image {
width: 30px;
height: 30px;
}
.uni-share-text {
margin-top: 10px;
font-size: 14px;
color: #3B4144;
}
.uni-share-button-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
padding: 10px 15px;
}
.uni-share-button {
flex: 1;
border-radius: 50px;
color: #666;
font-size: 16px;
}
.uni-share-button::after {
border-radius: 50px;
}
</style>
components/uni-popup/uni-popup.vue 0 → 100644
View file @ 68f197b8
<template>
<view v-if="showPopup" class="uni-popup" :class="[popupstyle]" @touchmove.stop.prevent="clear">
<uni-transition v-if="maskShow" :mode-class="['fade']" :styles="maskClass" :duration="duration" :show="showTrans"
@click="onTap" />
<uni-transition :mode-class="ani" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
<view class="uni-popup__wrapper-box" @click.stop="clear">
<slot />
</view>
</uni-transition>
</view>
</template>
<script>
import uniTransition from '../uni-transition/uni-transition.vue'
import popup from './popup.js'
/**
* PopUp 弹出层
* @description 弹出层组件，为了解决遮罩弹层的问题
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} type = [top|center|bottom] 弹出方式
* @value top 顶部弹出
* @value center 中间弹出
* @value bottom 底部弹出
* @value message 消息提示
* @value dialog 对话框
* @value share 底部分享示例
* @property {Boolean} animation = [ture|false] 是否开启动画
* @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
* @event {Function} change 打开关闭弹窗触发，e={show: false}
*/
export default {
name: 'UniPopup',
components: {
uniTransition
},
props: {
// 开启动画
animation: {
type: Boolean,
default: true
},
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
// message: 消息提示 ; dialog : 对话框
type: {
type: String,
default: 'center'
},
// maskClick
maskClick: {
type: Boolean,
default: true
}
},
provide() {
return {
popup: this
}
},
mixins: [popup],
watch: {
/**
* 监听type类型
*/
type: {
handler: function(newVal) {
this[this.config[newVal]]()
},
immediate: true
},
/**
* 监听遮罩是否可点击
* @param {Object} val
*/
maskClick(val) {
this.mkclick = val
}
},
data() {
return {
duration: 300,
ani: [],
showPopup: false,
showTrans: false,
maskClass: {
'position': 'fixed',
'bottom': 0,
'top': 0,
'left': 0,
'right': 0,
'backgroundColor': 'rgba(0, 0, 0, 0.4)'
},
transClass: {
'position': 'fixed',
'left': 0,
'right': 0,
},
maskShow: true,
mkclick: true,
popupstyle: 'top'
}
},
created() {
this.mkclick = this.maskClick
if (this.animation) {
this.duration = 300
} else {
this.duration = 0
}
},
methods: {
clear(e) {
// TODO nvue 取消冒泡
e.stopPropagation()
},
open() {
this.showPopup = true
this.$nextTick(() => {
new Promise(resolve => {
clearTimeout(this.timer)
this.timer = setTimeout(() => {
this.showTrans = true
// fixed by mehaotian 兼容 app 端
this.$nextTick(() => {
resolve();
})
}, 50);
}).then(res => {
// 自定义打开事件
clearTimeout(this.msgtimer)
this.msgtimer = setTimeout(() => {
this.customOpen && this.customOpen()
}, 100)
this.$emit('change', {
show: true,
type: this.type
})
})
})
},
close(type) {
this.showTrans = false
this.$nextTick(() => {
this.$emit('change', {
show: false,
type: this.type
})
clearTimeout(this.timer)
// 自定义关闭事件
this.customOpen && this.customClose()
this.timer = setTimeout(() => {
this.showPopup = false
}, 300)
})
},
onTap() {
if (!this.mkclick) return
this.close()
},
/**
* 顶部弹出样式处理
*/
top() {
this.popupstyle = 'top'
this.ani = ['slide-top']
this.transClass = {
'position': 'fixed',
'left': 0,
'right': 0,
}
},
/**
* 底部弹出样式处理
*/
bottom() {
this.popupstyle = 'bottom'
this.ani = ['slide-bottom']
this.transClass = {
'position': 'fixed',
'left': 0,
'right': 0,
'bottom': 0
}
},
/**
* 中间弹出样式处理
*/
center() {
this.popupstyle = 'center'
this.ani = ['zoom-out', 'fade']
this.transClass = {
'position': 'fixed',
/* #ifndef APP-NVUE */
'display': 'flex',
'flexDirection': 'column',
/* #endif */
'bottom': 0,
'left': 0,
'right': 0,
'top': 0,
'justifyContent': 'center',
'alignItems': 'center'
}
}
}
}
</script>
<style lang="scss" scoped>
.uni-popup {
position: fixed;
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
}
.uni-popup__mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: $uni-bg-color-mask;
opacity: 0;
}
.mask-ani {
transition-property: opacity;
transition-duration: 0.2s;
}
.uni-top-mask {
opacity: 1;
}
.uni-bottom-mask {
opacity: 1;
}
.uni-center-mask {
opacity: 1;
}
.uni-popup__wrapper {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: absolute;
}
.top {
/* #ifdef H5 */
top: var(--window-top);
/* #endif */
/* #ifndef H5 */
top: 0;
/* #endif */
}
.bottom {
bottom: 0;
}
.uni-popup__wrapper-box {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: relative;
/* iphonex 等安全区设置，底部安全区适配 */
/* #ifndef APP-NVUE */
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
/* #endif */
}
.content-ani {
// transition: transform 0.3s;
transition-property: transform, opacity;
transition-duration: 0.2s;
}
.uni-top-content {
transform: translateY(0);
}
.uni-bottom-content {
transform: translateY(0);
}
.uni-center-content {
transform: scale(1);
opacity: 1;
}
</style>
components/uni-transition/uni-transition.vue 0 → 100644
View file @ 68f197b8
<template>
<view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]" :style="'transform:' +transform+';'+stylesObject"
@click="change">
<slot></slot>
</view>
</template>
<script>
// #ifdef APP-NVUE
const animation = uni.requireNativePlugin('animation');
// #endif
/**
* Transition 过渡动画
* @description 简单过渡动画组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=985
* @property {Boolean} show = [false|true] 控制组件显示或隐藏
* @property {Array} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
* @value fade 渐隐渐出过渡
* @value slide-top 由上至下过渡
* @value slide-right 由右至左过渡
* @value slide-bottom 由下至上过渡
* @value slide-left 由左至右过渡
* @value zoom-in 由小到大过渡
* @value zoom-out 由大到小过渡
* @property {Number} duration 过渡动画持续时间
* @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
*/
export default {
name: 'uniTransition',
props: {
show: {
type: Boolean,
default: false
},
modeClass: {
type: Array,
default () {
return []
}
},
duration: {
type: Number,
default: 300
},
styles: {
type: Object,
default () {
return {}
}
}
},
data() {
return {
isShow: false,
transform: '',
ani: { in: '',
active: ''
}
};
},
watch: {
show: {
handler(newVal) {
if (newVal) {
this.open()
} else {
this.close()
}
},
immediate: true
}
},
computed: {
stylesObject() {
let styles = {
...this.styles,
'transition-duration': this.duration / 1000 + 's'
}
let transfrom = ''
for (let i in styles) {
let line = this.toLine(i)
transfrom += line + ':' + styles[i] + ';'
}
return transfrom
}
},
created() {
// this.timer = null
// this.nextTick = (time = 50) => new Promise(resolve => {
// clearTimeout(this.timer)
// this.timer = setTimeout(resolve, time)
// return this.timer
// });
},
methods: {
change() {
this.$emit('click', {
detail: this.isShow
})
},
open() {
clearTimeout(this.timer)
this.isShow = true
this.transform = ''
this.ani.in = ''
for (let i in this.getTranfrom(false)) {
if (i === 'opacity') {
this.ani.in = 'fade-in'
} else {
this.transform += `${this.getTranfrom(false)[i]} `
}
}
this.$nextTick(() => {
setTimeout(() => {
this._animation(true)
}, 50)
})
},
close(type) {
clearTimeout(this.timer)
this._animation(false)
},
_animation(type) {
let styles = this.getTranfrom(type)
// #ifdef APP-NVUE
if(!this.$refs['ani']) return
animation.transition(this.$refs['ani'].ref, {
styles,
duration: this.duration, //ms
timingFunction: 'ease',
needLayout: false,
delay: 0 //ms
}, () => {
if (!type) {
this.isShow = false
}
this.$emit('change', {
detail: this.isShow
})
})
// #endif
// #ifndef APP-NVUE
this.transform = ''
for (let i in styles) {
if (i === 'opacity') {
this.ani.in = `fade-${type?'out':'in'}`
} else {
this.transform += `${styles[i]} `
}
}
this.timer = setTimeout(() => {
if (!type) {
this.isShow = false
}
this.$emit('change', {
detail: this.isShow
})
}, this.duration)
// #endif
},
getTranfrom(type) {
let styles = {
transform: ''
}
this.modeClass.forEach((mode) => {
switch (mode) {
case 'fade':
styles.opacity = type ? 1 : 0
break;
case 'slide-top':
styles.transform += `translateY(${type?'0':'-100%'}) `
break;
case 'slide-right':
styles.transform += `translateX(${type?'0':'100%'}) `
break;
case 'slide-bottom':
styles.transform += `translateY(${type?'0':'100%'}) `
break;
case 'slide-left':
styles.transform += `translateX(${type?'0':'-100%'}) `
break;
case 'zoom-in':
styles.transform += `scale(${type?1:0.8}) `
break;
case 'zoom-out':
styles.transform += `scale(${type?1:1.2}) `
break;
}
})
return styles
},
_modeClassArr(type) {
let mode = this.modeClass
if (typeof(mode) !== "string") {
let modestr = ''
mode.forEach((item) => {
modestr += (item + '-' + type + ',')
})
return modestr.substr(0, modestr.length - 1)
} else {
return mode + '-' + type
}
},
// getEl(el) {
// console.log(el || el.ref || null);
// return el || el.ref || null
// },
toLine(name) {
return name.replace(/([A-Z])/g, "-$1").toLowerCase();
}
}
}
</script>
<style>
.uni-transition {
transition-timing-function: ease;
transition-duration: 0.3s;
transition-property: transform, opacity;
}
.fade-in {
opacity: 0;
}
.fade-active {
opacity: 1;
}
.slide-top-in {
/* transition-property: transform, opacity; */
transform: translateY(-100%);
}
.slide-top-active {
transform: translateY(0);
/* opacity: 1; */
}
.slide-right-in {
transform: translateX(100%);
}
.slide-right-active {
transform: translateX(0);
}
.slide-bottom-in {
transform: translateY(100%);
}
.slide-bottom-active {
transform: translateY(0);
}
.slide-left-in {
transform: translateX(-100%);
}
.slide-left-active {
transform: translateX(0);
opacity: 1;
}
.zoom-in-in {
transform: scale(0.8);
}
.zoom-out-active {
transform: scale(1);
}
.zoom-out-in {
transform: scale(1.2);
}
</style>
main.js
View file @ 68f197b8
......@@ -17,6 +17,10 @@ import dayjs from 'dayjs'
Vue.prototype.$day = dayjs
// OSS静态资源
Vue.prototype.$ImgUrl = 'https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/';
// #ifdef H5
// echarts图标
// var echarts = require('echarts')
......
pages/assignDeposit/assignDeposit.vue
View file @ 68f197b8
<template>
<view class="container">
<div id="AssginBox">
<!-- <p class="TitleHeader"></p>-->
<p id="ReturnBox" @click="BackToMini('personalCenter')">
<img src="../../static/img/return.png" class="returnImgBox" alt="">
<span style="vertical-align: middle;">返回</span>
</p>
<!-- 充值 -->
<div id="DepositBox">
<div class="ImgContent">
<img mode='widthFix'
src="https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/images/xiaopaycard (31).png"
alt="">
<div class="contentDiv">
<p>
<span class="schoolNameTx"
style="font-size:17px;font-weight:700;width: 50vw;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"></span>
<span class="IconCls">电子校园卡</span>
</p>
<p class="HidenText" style="margin-top:17vw;">
<span style="font-size:13px;">姓名：<span class="userNameTx"></span></span>
<span class="StudentCls" style="font-size:13px;text-align:right;display: none;">班级：<span
class="ClsNameTx"></span></span>
<span class='TeacherCls' style="font-size:13px;text-align:right;display: none;">教职工</span>
</p>
<p style="font-size:15px;color:#fff;font-weight:700;margin-top: 10px;">
<span>余额：￥<span class="cardBalanceTx"></span></span>
<span @click="ToWalletTx">余额提现<img class='ImgIcon1' mode='widthFix'
src="https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/images/xiaopaycard (17).png"
alt=""></span>
</p>
</div>
</div>
<div style="font-size:14px;color:#268EF8;text-decoration:underline;text-align:center;margin:10px 0;">
<span @click="BackToMini('purchaseDetail')">账户明细</span>
</div>
<div class="depositBox">
<p class="inputTitle">充值金额</p>
<div id="MoneyBox">
<div class="depotMoney" @click="depotMoney(500)">500</div>
<div class="depotMoney" @click="depotMoney(1000)">1000</div>
<div class="depotMoney" @click="depotMoney(1500)">1500</div>
</div>
<div>
<span
style="font-size:17px;font-weight:bold;position: absolute;left: 5px;bottom: -1px;">￥</span>
<input class="depositTx" v-model="Money" type="number" @input="inputControl" @blur="ReturnToTop"
maxlength="4" style="width:90%;" placeholder="请输入其他金额，最低3元" />
</div>
<p>
<img mode='widthFix' class="depositImg" src="../../static/img/depositIcon.png" alt="">
<span style="vertical-align:middle;font-size:14px;">最大可充值金额：<span style="color:red;">￥<span
class="canDepositTx">{{RechargeMax}}</span></span></span>
</p>
</div>
<div class="accountBox1">
<div class="AcountTitle">付款账户</div>
<div class="bankNameClass" @click="queryBindCardList"></div>
<img @click="queryBindCardList" src="../../static/img/8.png" alt="">
</div>
<button class="bottomDetail bottom1 DisaBledBtn DepositID" style="margin-top: 400rpx;"
@click="toDeposit(0)">充值生活费</button>
<div class="changeCardBox">
<span @click="BackToMini('AssignAddCard')">我要换银行卡支付</span>
</div>
</div>
<!-- 提现 -->
<div id='TxWalletBox'>
<div class="TopBox">
<p>提现金额</p>
<div class="changeCardBox dayTips">每日可提现一次</div>
</div>
<div class="TxDiv">
<span style="font-size:17px;font-weight:bold;position: absolute;left: 5px;bottom: -1px;">￥</span>
<input style="width:50%;padding-right:40%;" type="number" v-model="ReflectMoney" class="TxClsTx"
@blur="ReturnToTop" maxlength="4" placeholder="输入提现金额" @input="inputControl">
<span style="position:absolute;right:20px;font-weight:700;font-size:14px;color:#129A5E;"
@click="TxAllFun">全部</span>
</div>
<div class="accountBox1">
<div class="AcountTitle">提现至</div>
<div class="bankNameClass1"></div>
</div>
<div class="payCardEndNo"
style="width:90vw;text-align:right;font-weight:700;font-size:15px;margin-top: 5px;"></div>
<button class="bottomDetail bottom2" @click="toDeposit(1)">提现</button>
<div class="changeCardBox">
<span @click="BackToMini('TxHistory')">提现记录</span>
</div>
</div>
<!-- 切换绑定的一类卡列表 -->
<div class="BgCoverBox showBindCardList PhoneConfirmBox" style="display: none;"></div>
<div class="BankClass showBindCardList" style="display: none;">
<div class="choiceBox">选择付款账户</div>
<div class="hideListCover">
</div>
<div class="bottomDiv" @click="HideHTML('showBindCardList',0)">取消</div>
</div>
<!-- 手机号验证 -->
<div class="PhoneConfirmBox MyPhoneCls" style="display: none;">
<img src="../../static/img/close.png" class="closePhoneBox" alt="" @click="hidePhoneBox">
<p style='text-align:center;font-size:18px;font-weight:bold;margin-bottom:30px;'>验证开卡手机号</p>
<p class="myPhoneP">
<span class="title1">手机号：</span>
<span style="flex: 1;" class="myPhoneTx"></span>
<span class="changPhone" @click="BackToMini('AssignChangPhone')">变更手机号</span>
</p>
<div class="myPhoneDiv">
<span class="title1">验证码：</span>
<div style="flex: 1;">
<input class="VerifyCode" v-model="VerifyCode" @blur="ReturnToTop" type="text" maxlength="6"
placeholder="验证码" />
</div>
<span class="CodeMsg" @click="SendMsg">{{CodeMsg}}</span>
</div>
<button class="doBtnTx" @click="DoNextStep">充值</button>
</div>
<!-- 20210421 -->
<div class="RechargeException" style="display: none;">
<div class="tiptext">您在银行预留的身份信息已过期，请更新身份信息后再继续交易</div>
<div class="weui-form">
<div class="weui-form__control-area">
<div class="weui-cells__group weui-cells__group_form">
<div
class="weui-cell weui-cell_active weui-cell_access weui-cell_select weui-cell_select-after">
<div class="weui-cell__hd"><label class="weui-label">所属职业</label></div>
<div class="weui-cell__bd" id="showPicker"
style="color: #A1A4A8;text-align: center;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;">
请选择职业类型</div>
</div>
<div class="weui-cell weui-cell_active weui-cell_access weui-cell_select weui-cell_select-after"
id="showCityPicker3">
<div class="weui-cell__hd"><label class="weui-label" id="city3-label">家庭地址</label></div>
<div class="weui-cell__bd" id="homeAddress"
style="color: #A1A4A8;text-align: center;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;">
请选择家庭地址</div>
</div>
<div class="weui-cell weui-cell_active weui-cell_access ">
<div class="weui-cell__hd"><label class="weui-label">所在街道</label></div>
<div class="weui-cell__bd weui-flex">
<input class="weui-input" style="text-align: right;padding-right: 17px;" type="text"
@input="StreetInformation" placeholder="请输入具体街道和门牌号">
</div>
</div>
<div class="">
<div class="weui-cell__hd"><label class="weui-label">身份证照片</label></div>
<div class="weui-cell__bd">
<div class="liDiv">
<div class="imgBox">
<img src="../../static/img/idCardBg1.png" alt="" class="idCardPhoto1">
<div class="positionCam">
<input class="weui-uploader__input" type="file" accept="image/*"
multiple="" onchange="uploaderInput(this,1)">
【点击可上传】
</div>
<!-- <img class="idCardPhoto1" src="ss" alt="" style=""> -->
</div>
<div class="imgBox">
<img src="../../static/img/idCardBg0.png" alt="" class="idCardPhoto2">
<div class="positionCam">
<input class="weui-uploader__input" type="file" accept="image/*"
multiple="" d onchange="uploaderInput(this,2)">
【点击可上传】
</div>
<!-- <img class="idCardPhoto2" src="1" alt=""> -->
</div>
</div>
</div>
</div>
<button class="bottomDetail" @click="UpdateRechargeException">立即更新</button>
</div>
</div>
</div>
</div>
</div>
<view class="contentBox">
<!-- <image mode='widthFix' src="https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/images/xiaopaycard (31).png"></image> -->
<view class="contentDiv">
<view class="headview">
<view class="schoolname">{{PersonalInfo.schoolname}}</view>
<view class="IconCls">电子校园卡</view>
</view>
<view class="HidenText">
<view class="userName">姓名：<span>张三</span></view>
<view class="StudentCls" v-if="PersonalInfo.usertype=='1'">班级：高一(63班)</view>
<view class='TeacherCls' v-else>教职工</view>
</view>
<view class="Balance">
<view class="cardBalanceTx">余额：￥<span>0.00</span></view>
<view @click="ToWalletTx">余额提现
<image style="position: relative;width: 13rpx;height: 20rpx;" class='ImgIcon1' mode='widthFix'
:src="ImgUrl+'images/xiaopaycard (17).png'" alt=""></image>
</view>
</view>
</view>
<!-- 充值账户 -->
<view class="Recharge">
<view class="leftdiv">账户充值</view>
<view class="rightdiv">
<span>账户明细 ></span>
</view>
</view>
<!-- -->
<view class="MoneyBox">
<view class="depotMoney" :data-money="item.value" v-for="(item,index) in MoneyList" :key="index">
<span class="value">
{{item.value}}
</span>
<span style="font-size: 28rpx;font-weight: 600;margin-left: 7rpx;">{{item.lable}}</span>
<span class="tips" v-show="item.tips">
{{item.tips}}
</span>
</view>
</view>
<!-- -->
<view class="OtherMoney">
<view>其他充值金额</view>
<view>></view>
</view>
<!-- 支付方式 -->
<view class="payType">
<view>付款方式</view>
<view>招商银行(5947)</view>
</view>
<view class="" style="height: 1rpx;background-color: #DFDFDF;"></view>
</view>
</view>
</template>
<script>
import keyboardPackage from "@/components/keyboard-package/keyboard-package.vue"
import cityData from "@/common/js/city.js"
console.log(cityData);
......@@ -233,6 +106,9 @@
// wefileToken: "QplB0tfvjtzOU+tWgKI2+L+4B9HE8kbpJVREUTwXZCsVqXcUwyDxHAbTU3bW8ziGb4hKAaWiLQXAyZUbYRB9hBKhSt1VVvoFl5qOCR4GT+X1KpcQgBlhKYi/NYPkmsjeZO/qn9YXGDp/1sGmxazv6T05y8EbU9HXreRhF/jh8G1HtUCwprFoaulGFShvV819EUBdHifDF5IjpPekLtgzIm8C/kYYX8xproKvxV4maRji5p1Krkyv/U1K3C18/TyjHwPpC4KlOEqA6QpFujR8yZ42qvLZqfqgUkRFZ4WC27/nN3+do9VNpNbK4MAMSLTRaxdGmKe2wStKbZ5OQ+1WFA=="
// wefileUrl: "https://bfiles-stg.pingan.com.cn/brcp/secfile/sec_wefiles_udmp_upload.do"
export default {
components: {
keyboardPackage
},
name: "assignDeposit",
data() {
return {
......@@ -241,7 +117,21 @@
ReflectMoney: '', //提现金额
VerifyCode: '', //验证码
cardBalanceTx: '0', //余额
CodeMsg: "获取验证码"
CodeMsg: "获取验证码",
type: 'number',
PersonalInfo: {
schoolname: "微微学测试",
name: "李智书",
usertype: "1"
},
ImgUrl: this.$ImgUrl,
MoneyList: Array(6).fill(1).map((v, index) => {
return {
lable: '元',
value: 50 * (index + 1),
tips: ""
}
})
}
},
created: function() {
......@@ -341,6 +231,10 @@
})
},
methods: {
openKeyBoard(key) {
this.type = key;
this.$refs[key].open();
},
async depotMoney(value) {
this.Money = parseInt(value)
},
......@@ -1174,539 +1068,206 @@
</script>
<style scoped lang="scss">
.RechargeException {
padding-top: 0.63rem;
page {
width: 750rpx;
height: 1470rpx;
background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
}
.weui-label {
width: 118px;
height: 42px;
font-size: 40rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #3D3D3D;
line-height: 42px;
font-weight: bold;
}
.tiptext {
/* width: 24.5rem; */
height: 1.06rem;
font-size: 0.75rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #03BC73;
line-height: 1.06rem;
margin-bottom: 0.625rem;
text-align: center;
}
.RechargeException input::placeholder {
color: #A1A4A8;
}
.RechargeException .weui-cell {
height: 4rem;
/* line-height: 4rem; */
padding: 0 !important;
}
.RechargeException .liDiv .imgBox {
width: 15.13rem;
/* height: 10rem; */
.contentBox {
width: 670rpx;
height: 376rpx;
margin: 0 auto;
/* margin-top: 0.88rem; */
text-align: center;
}
.imgBox img {
width: 100%;
}
.imgBox .positionCam {
height: 1rem;
font-size: 0.69rem;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #6D7278;
line-height: 1rem;
text-align: center;
position: relative;
top: -2.0625rem;
}
.idCardPhoto1,
.idCardPhoto2 {
width: auto !important;
height: auto;
max-width: 100%;
max-height: 100%;
}
.weui-toptips_success {
background-color: #03BC73 !important
.contentDiv {
height: 100%;
margin-top: 36rpx;
border-radius: 15rpx;
background-image: url('https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/images/xiaopaycard (31).png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
html,
body {
/* -webkit-overflow-scrolling:none; */
.HidenText {
margin-top: 147rpx;
}
#MoneyBox {
.HidenText,
.Balance {
padding-left: 46rpx;
padding-right: 40rpx;
display: flex;
border: none !important;
justify-content: space-between;
margin-bottom: 25px !important;
}
.DisaBledBtn {
background: #e6e6e6 !important;
color: gray;
}
.choiceClass {
background: #01BC73 !important;
;
color: #fff !important;
}
#MoneyBox>div {
width: 28% !important;
height: 40px !important;
line-height: 40px !important;
border-radius: 5px;
font-size: 15px;
text-align: center;
}
.TopBox>.dayTips {
color: #888888;
text-decoration: none;
display: inline-block;
width: 48vw;
font-size: 13px;
text-align: right;
font-size: 28rpx;
color: #FFFFFF;
}
.changPhone {
font-size: 14px;
color: #39F;
text-align: right;
.Balance {
margin-top: 20rpx;
}
.TopBox>p {
font-size: 17px;
font-weight: bold;
width: 40vw;
display: inline-block;
}
.myPhoneDiv {
height: 50px;
.Recharge {
display: flex;
align-items: center;
border-bottom: 1px solid #eeeeee;
}
body,
p {
margin: 0;
}
input {
outline: none;
}
button {
border: none;
}
#TxWalletBox {
display: none;
margin-top: 30px;
}
.title1 {
display: inline-block;
width: 30%;
}
.closePhoneBox {
position: absolute;
top: 10px;
right: 10px;
width: 20px;
height: 20px;
}
#ReturnBox {
font-size: 15px;
display: none;
margin: 10px 0;
justify-content: space-between;
margin-top: 70rpx;
}
.returnImgBox {
width: 15px;
height: 15px;
vertical-align: middle;
.Recharge .leftdiv {
width: 192rpx;
height: 67rpx;
font-size: 48rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #010101;
line-height: 67rpx;
}
.TxDiv {
width: 90vw;
height: 48px;
line-height: 48px;
position: relative;
margin: 10px 0;
border-radius: 5px;
border: 1px solid #EEEEEE;
.Recharge .rightdiv {
height: 67rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 67rpx;
}
.accountBox1 {
margin-top: 20px;
font-weight: bold;
.Recharge .rightdiv image {
position: relative;
width: 20rpx;
height: 20rpx;
}
.accountBox1 .AcountTitle {
font-size: 14px;
display: inline-block;
color: #888;
}
.accountBox1 .bankNameClass1 {
font-size: 15px;
float: right;
position: absolute;
right: 0;
bottom: 3px;
top: 2px;
}
.accountBox1 img {
width: 8px;
height: 13px;
position: absolute;
right: 0;
bottom: 5px;
}
.TxClsTx {
width: 50%;
padding-right: 40%;
display: inline-block;
vertical-align: bottom;
/* border: 1px solid #EEEEEE; */
border: none;
padding-left: 25px;
outline: none;
height: 48px;
font-size: 15px;
}
#AssginBox {
width: 90vw;
padding: 0 5vw;
/* height:100vh; */
overflow-y: auto;
display: none;
padding-top: 20rpx;
}
.MyPhoneCls {
position: fixed;
width: 70vw;
font-size: 15px;
left: 10vw;
padding: 20px 5vw;
top: 20vh;
background: #fff;
border-radius: 5px;
z-index: 20;
.headview {
display: flex;
justify-content: space-between;
}
.doBtnTx {
border: none;
width: 60vw;
margin-left: 5vw;
height: 41px;
margin-top: 60px;
line-height: 40px;
font-size: 16px;
background: #01BC73;
color: #fff;
border-radius: 5px;
outline: none;
}
.MyPhoneCls input {
width: 21vw;
border: none;
outline: none;
}
.CodeMsg {
color: #01BC73;
border-radius: 5px;
background: #EBEBEB;
font-size: 13px;
padding: 2%;
}
.myPhoneP {
border-bottom: 1px solid #eeeeee;
font-size: 14px;
display: flex;
}
padding-left: 40rpx;
padding-right: 40rpx;
.VerifyCode {
font-size: 14px;
/* color: #888888; */
padding-top: 36rpx;
}
.MyPhoneCls p {
height: 50px;
line-height: 50px;
}
.TitleHeader {
font-size: 15px;
text-align: center;
height: 60px;
line-height: 60px;
}
.centerBox {
position: absolute;
font-weight: bold;
color: #fff;
width: 80vw;
left: 13vw;
top: 5vw;
}
.BankClass {
width: 100vw;
position: fixed;
bottom: 0;
left: 0;
z-index: 15;
max-height: 60vh;
background: #F2F2F2;
overflow-y: auto;
text-align: center;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.hideListCover>div {
border-bottom: 1px solid #e6e6e6;
padding: 10px 0;
background: #fff;
font-size: 14px;
position: relative;
}
.BankListImg {
position: absolute;
display: none;
right: 50px;
width: 15px;
top: 25px;
}
.BankClass>p {
height: 25px;
line-height: 25px;
}
.choiceBox {
font-weight: bold;
height: 50px;
line-height: 50px;
border-bottom: 1px solid #e6e6e6;
}
.HidenText span {
width: 40vw;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
.headview .schoolname {
width: 252rpx;
height: 50rpx;
font-size: 36rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 50rpx;
}
.IconCls {
font-size: 12px;
.headview .IconCls {
width: 170rpx;
height: 48rpx;
background: #20946D;
border-radius: 15px;
text-align: center;
padding: 1vw 2vw;
}
.ImgIcon1 {
display: inline-block;
width: 8px !important;
margin-left: 5px;
margin-top: -2px;
vertical-align: middle;
}
.ImgContent {
position: relative;
/* margin-left: 5vw; */
}
.ImgContent>img {
width: 90vw;
}
border-radius: 25rpx;
.contentDiv {
position: absolute;
top: 0;
color: #fff;
padding: 5vw;
font-size: 24rpx;
font-weight: 400;
color: #FFFFFF;
line-height: 48rpx;
text-align: center;
}
.contentDiv>p {
width: 80vw;
.MoneyBox {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
height: auto;
color: #333333;
}
.contentDiv>span {
.choiceClass {
background: #01BC73 !important;
color: #fff;
}
.depositBox {
width: 90vw;
margin-top: 20px;
}
.AllCharge {
padding: 0 5px;
border-radius: 20px;
font-size: 15px;
width: 25%;
.MoneyBox view {
width: 206rpx;
height: 133rpx;
background: #F5F5F5;
border-radius: 8rpx;
margin-top: 26rpx;
text-align: center;
height: 40px;
position: absolute;
line-height: 40px;
color: #fff;
background: #A5876B;
top: 5px;
right: 0;
}
.depositImg {
width: 14px;
vertical-align: middle;
margin-right: 8px;
}
.inputTitle {
font-size: 17px;
font-weight: bold;
}
.depositBox div {
width: 90vw;
height: 46px;
line-height: 46px;
margin: 10px 0;
border-radius: 5px;
position: relative;
border: 1px solid #EEEEEE;
}
.depositBox>div>input {
display: inline-block;
// vertical-align: bottom;
border: none;
padding-left: 25px;
height: 46px;
outline: none;
font-size: 15px;
}
.BgCoverBox {
width: 100vw;
height: 100vh;
position: fixed;
left: 0;
top: 0;
z-index: 10;
background: #000000;
opacity: 0.5;
.depotMoney .value {
font-size: 48rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
line-height: 133rpx;
text-align: center;
}
.hideListCover {
max-height: 50vh;
overflow-y: auto;
padding: 0;
}
.depotMoney .tips {
// width: 79rpx;
height: 33rpx;
background: linear-gradient(180deg, #FA6400 0%, #FD9D00 100%);
border-radius: 4rpx;
font-size: 18rpx;
font-weight: 500;
padding: 4rpx;
text-align: center;
z-index: 99999;
float: right;
position: absolute;
right: 10rpx;
.bottomDiv {
font-weight: bold;
height: 50px;
line-height: 50px;
border-bottom: 1px solid #e6e6e6;
}
.accountBox {
margin: 40px 0 12px 0;
font-weight: bold;
position: relative;
}
.accountBox>img {
width: 8px;
height: 13px;
position: absolute;
right: 0;
bottom: 4px;
}
.OtherMoney {
display: flex;
justify-content: center;
color: #999999;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 40rpx;
.AcountTitle {
font-size: 14px;
display: inline-block;
color: #888;
margin-top: 26rpx;
}
.bankNameClass {
font-size: 15px;
float: right;
margin-right: 18px;
position: absolute;
right: 0;
bottom: 0;
.OtherMoney view:nth-child(2) {
width: 30rpx;
height: 30rpx;
background: #F0F0F0;
border-radius: 50%;
text-align: center;
line-height: 30rpx;
margin-top: 7rpx;
margin-left: 5rpx;
}
.changeCardBox {
font-size: 15px;
color: #268EF8;
text-align: center;
text-decoration: underline;
width: 90vw;
bottom: 40px;
.payType {
height: 98rpx;
line-height: 98rpx;
display: flex;
justify-content: space-between;
}
.bottomDetail {
background: #01BC73;
color: #fff;
width: 86vw;
height: 45px;
outline: none;
line-height: 45px;
font-size: 17px;
text-align: center;
bottom: 70px;
margin: 20vh 0 10px 2vw;
border: none;
border-radius: 5px;
.payType view:nth-child(1) {
width: 120rpx;
height: 42rpx;
font-size: 30rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 42rpx;
}
.depositTx div {
position: absolute;
border: none;
.payType view::nth-child(2) {
width: 225rpx;
height: 45rpx;
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 45rpx;
}
</style>
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