298 lines
8.0 KiB
Vue
298 lines
8.0 KiB
Vue
<template>
|
|
<view class="bg-gray min-page">
|
|
<view class="bg-fff top">
|
|
<view class="u-p-30">
|
|
<myTabs :defaultIndex="tabsCurrent" :list="tabsList" @change="tabsChange"></myTabs>
|
|
</view>
|
|
</view>
|
|
<template v-if="tabsCurrent===0">
|
|
<view class="u-p-30">
|
|
<view class="u-flex bg-fff u-p-30 border-r-12" @tap="toAddRecharge">
|
|
<view class="u-m-r-22 ">
|
|
<my-icons type="add"></my-icons>
|
|
</view>
|
|
<view class="">添加充值面额</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="u-p-30">
|
|
<view class="u-m-b-32" v-for="(item,index) in rechargeLists" :key="index">
|
|
<recharge-item @del="rechargeItemDel" :index="index" :data="item"></recharge-item>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</template>
|
|
<template v-if="tabsCurrent===1">
|
|
<view class="u-p-30">
|
|
<view class="bg-fff u-p-30 border-r-12">
|
|
<view>充值说明</view>
|
|
<view class="u-p-30 border-r-12 border u-m-t-30">
|
|
<view class="">
|
|
<textarea placeholder="请填写充值说明"/>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="bg-fff u-m-t-30 u-overflow-hide border-r-12 u-p-30 u-flex u-row-between">
|
|
<view class="">充值前绑定手机</view>
|
|
<view>
|
|
<my-switch v-model="mustBindPhone"></my-switch>
|
|
</view>
|
|
</view>
|
|
<view class="u-m-t-60" style="padding: 80rpx;">
|
|
<my-button showShadow shape="circle">保存</my-button>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</template>
|
|
<template v-if="tabsCurrent===2">
|
|
<view class="bg-fff u-font-28">
|
|
<view class="box-shadow u-relative">
|
|
<view class="u-flex u-row-between u-p-30 u-relative">
|
|
<view class="u-flex u-col-center" @tap="timeToggle">
|
|
<text class="color-main">充值时间</text>
|
|
<view class="icon-down u-m-l-6">
|
|
<uni-icons type="right" :color="$utils.ColorMain" size="16"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="u-flex u-col-center" @tap="showStatusToggle">
|
|
<text :class="{'color-main':nowStatusIndex>=1}">状态</text>
|
|
<view class="icon-down u-m-l-6">
|
|
<uni-icons type="right" :color="nowStatusIndex>=1 ? $utils.ColorMain:'#000'" size="16"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view style="width: 164rpx;"></view>
|
|
<view class="search-box">
|
|
<view class="search-btn u-flex" @tap="showSearch" :style="{width:searchShow?'690rpx':'164rpx'}">
|
|
<image src="@/static/iconImg/icon-search.svg" class="input-icon" />
|
|
<view class="u-flex-1 u-p-l-10"><input v-model="keyword" @confirm="searchConfirm" type="text"
|
|
placeholder-style="font-size:28rpx;" placeholder="搜索" /></view>
|
|
<view @tap.stop="hideSearch" v-if="searchShow">取消</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view :style="{height:showStatus?statusHeight:0}" class="tranistion status overflow-hide">
|
|
<view @tap="changeNowStatusIndex(index)" class="u-flex u-p-l-30 lh30 u-p-r-30 u-row-between"
|
|
v-for="(item,index) in status" :key="index">
|
|
<view :class="{'color-main':nowStatusIndex===index}">{{item}}</view>
|
|
<uni-icons v-if="nowStatusIndex===index" type="checkmarkempty" :color="$utils.ColorMain"></uni-icons>
|
|
</view>
|
|
<view :style="{height: statusBootom+'px'}"></view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="u-flex u-p-30">
|
|
<view class="time-area u-font-24 color-main u-flex">
|
|
<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="filters.time.start"></uni-dateformat>
|
|
<text class="u-p-l-10 u-p-r-10">至</text>
|
|
<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="filters.time.end"></uni-dateformat>
|
|
</view>
|
|
</view>
|
|
<view class="u-p-30">
|
|
<view class="recoreds color-fff">
|
|
<view class="u-font-32">数据统计</view>
|
|
<view class="u-flex u-row-between u-m-t-48">
|
|
<view class="u-flex u-flex-col u-row-center u-col-center">
|
|
<view>充值总额</view>
|
|
<view class="u-font-32 u-m-t-10">0.00</view>
|
|
</view>
|
|
<view style="margin-left: 240rpx;" class="u-flex u-flex-col u-row-center u-col-center">
|
|
<view>充值人次</view>
|
|
<view class="u-font-32 u-m-t-10">0</view>
|
|
</view>
|
|
</view>
|
|
<view class="u-flex u-row-between u-m-t-30">
|
|
<view class="u-flex u-flex-col u-row-center u-col-center">
|
|
<view>退款总额</view>
|
|
<view class="u-font-32 u-m-t-10">0.00</view>
|
|
</view>
|
|
<view style="margin-left: 240rpx;" class="u-flex u-flex-col u-row-center u-col-center">
|
|
<view>退款金额</view>
|
|
<view class="u-font-32 u-m-t-10">0</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<my-model ref="model" :desc="modelData.desc"></my-model>
|
|
<my-date-pickerview @confirm="datePickerConfirm" ref="datePicker"></my-date-pickerview>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
computed,
|
|
reactive,
|
|
ref
|
|
} from 'vue';
|
|
import myTabs from '@/components/my-components/my-tabs.vue'
|
|
import myIcons from '@/components/my-components/my-icons.vue'
|
|
import mySwitch from '@/components/my-components/my-switch.vue'
|
|
import myButton from '@/components/my-components/my-button.vue'
|
|
import myModel from '@/components/my-components/my-model.vue'
|
|
import myDatePickerview from '@/components/my-components/my-date-pickerview'
|
|
import rechargeItem from './components/recharge-item.vue'
|
|
import $util from '@/commons/utils/getDateArea.js';
|
|
import go from '@/commons/utils/go.js';
|
|
|
|
const model=ref(null)
|
|
const modelData=reactive({
|
|
desc:''
|
|
})
|
|
function rechargeItemDel(e){
|
|
modelData.desc=`确定删除【${Number(e.data.price).toFixed(2)}】面额吗?`
|
|
model.value.open()
|
|
console.log(e);
|
|
}
|
|
function toAddRecharge(){
|
|
go.to('PAGES_RECHARGE_ADD_RECHARGE')
|
|
}
|
|
|
|
const rechargeLists=ref([
|
|
{
|
|
id:1,
|
|
price:200,
|
|
desc:'20.00元、2张券'
|
|
},
|
|
{
|
|
id:2,
|
|
price:500,
|
|
desc:'60.00元、4张券'
|
|
}
|
|
])
|
|
|
|
|
|
|
|
let mustBindPhone=ref(true)
|
|
const nowDate=new Date()
|
|
const filters=reactive({
|
|
time:{
|
|
start:$util.getDayArea(nowDate,'start'),
|
|
end:$util.getDayArea(nowDate,'end')
|
|
}
|
|
})
|
|
const tabsList = ['充值面额', '充值设置', '充值记录']
|
|
let tabsCurrent = ref(2)
|
|
|
|
let showStatus=ref(false)
|
|
function showStatusToggle(){
|
|
showStatus.value=!showStatus.value
|
|
}
|
|
|
|
const statusBootom=14
|
|
const statusHeight= computed(()=>{
|
|
return 30*status.length+statusBootom +'px'
|
|
})
|
|
|
|
|
|
let searchShow = ref(false)
|
|
|
|
function showSearch() {
|
|
searchShow.value = true
|
|
}
|
|
const status = ['全部', '未支付', '支付成功']
|
|
let nowStatusIndex = ref(0)
|
|
function changeNowStatusIndex(i) {
|
|
nowStatusIndex.value = i
|
|
showStatus.value=false
|
|
}
|
|
function hideSearch() {
|
|
searchShow.value = false
|
|
}
|
|
|
|
function tabsChange(i) {
|
|
console.log(i);
|
|
tabsCurrent.value = i
|
|
}
|
|
|
|
let keyword = ref('')
|
|
|
|
function searchConfirm(e) {
|
|
console.log(e)
|
|
}
|
|
|
|
const datePicker=ref(null)
|
|
function timeToggle(){
|
|
datePicker.value.toggle()
|
|
showStatus.value=false
|
|
}
|
|
function datePickerConfirm(e){
|
|
console.log(e);
|
|
filters.time.start=e.start
|
|
filters.time.end=e.end
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.u-overflow-hide{
|
|
overflow: hidden;
|
|
}
|
|
.border{
|
|
border: 1px solid #E5E5E5;
|
|
}
|
|
.border-r-12{
|
|
border-radius: 12rpx;
|
|
}
|
|
.recoreds{
|
|
background: linear-gradient( 127deg, #33A0FF 0%, #6699FF 100%);
|
|
box-shadow: 0rpx 20rpx 60rpx 2rpx rgba(92,112,248,0.2);
|
|
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
|
padding: 32rpx 40rpx 40rpx 48rpx;
|
|
}
|
|
.lh30 {
|
|
line-height: 30px;
|
|
}
|
|
.status {
|
|
position: absolute;top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
background-color: #fff;
|
|
}
|
|
.input-icon {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
|
|
.box-shadow {
|
|
box-shadow: 0 0 5px #eee;
|
|
}
|
|
|
|
.search-box {
|
|
background-color: #fff;
|
|
padding: 16rpx 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
position: absolute;
|
|
right: 30rpx;
|
|
display: flex;
|
|
|
|
.search-btn {
|
|
padding: 0 30rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
// width: 164rpx;
|
|
transition: all .3s ease-in-out;
|
|
background-color: rgb(247, 247, 247);
|
|
border-radius: 100px;
|
|
}
|
|
}
|
|
.time-area{
|
|
background: #E6F0FF;
|
|
border-radius: 100px;
|
|
padding: 10rpx 20rpx;
|
|
}
|
|
.icon-down {
|
|
transform: rotate(90deg);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
</style> |