You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
398 lines
8.3 KiB
Vue
398 lines
8.3 KiB
Vue
<template>
|
|
<navigationStyle :titles="titles" :bgcolor="bgcolor" :color="color"></navigationStyle>
|
|
<view class="secondBright">
|
|
<view class="tops">
|
|
|
|
</view>
|
|
<view class="secondBright-header">
|
|
<view class="header-left" :class="{headerActive:headerindex==1}" @click="remo">
|
|
次卡明细
|
|
</view>
|
|
<view class="header-right" :class="{headerActive:headerindex==2}" @click="add">
|
|
次数变动明细
|
|
</view>
|
|
</view>
|
|
<scroll-view class="secondBright-auto" scroll-y="true">
|
|
<view class="auto-box" v-for="(item,index) in demos" :key="item.id">
|
|
<view class="auto-box-title">
|
|
<text class="left-txt">{{item.title}}</text>
|
|
<text class="right-txt" v-show="headerindex===1">
|
|
<text class="blues">总金额：{{item.sumPrice*3}} </text>
|
|
<text class="reds">剩余次数：{{item.sumNum}}</text>
|
|
</text>
|
|
<text class="right-txt" v-show="headerindex===2">
|
|
<text class="blues">获得次数：{{item.sumPrice*3}} </text>
|
|
<text class="reds">使用次数：{{item.sumNum}}</text>
|
|
</text>
|
|
</view>
|
|
<view class="auto-box-flex" v-for="(items,indexs) in item.arrys" :key="items.id">
|
|
<view class="flex-tops" v-show="headerindex===1">
|
|
订单号：{{items.orderId}}
|
|
</view>
|
|
<view class="flex-topss" v-show="headerindex===2">
|
|
订单号：{{items.orderId}}
|
|
</view>
|
|
<view class="flex-centers">
|
|
<text>{{items.ciKaTitle}}</text>
|
|
<text v-show="headerindex===2">{{items.price}} </text>
|
|
<text v-show="headerindex===1">￥ <text class="flex-reds">{{items.price}}</text> </text>
|
|
</view>
|
|
<view class="flex-bottoms">
|
|
<text>{{items.oldDate}}</text><text>有效期{{items.newDate}}</text>
|
|
</view>
|
|
<view class="lines" v-if="indexs<item.arrys.length-1">
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="ding">
|
|
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref
|
|
} from 'vue'
|
|
const titles = ref('次卡购买')
|
|
const bgcolor= ref('#fff')
|
|
const color = ref('#000')
|
|
const headerindex = ref(0)
|
|
const demos = ref([])
|
|
const remo = () => {
|
|
headerindex.value = 1
|
|
if (headerindex.value === 1) {
|
|
demos.value=[]
|
|
demos.value = [{
|
|
id: 1,
|
|
title: "本月",
|
|
sumPrice: 30,
|
|
sumNum: 1,
|
|
arrys: [{
|
|
id: 1,
|
|
orderId: 'xxxxxxxxxxxx',
|
|
ciKaTitle: "4次卡办理",
|
|
price: 30,
|
|
oldDate: "2024-05-09 11:56:40",
|
|
newDate: "024-05-09"
|
|
}, {
|
|
id: 2,
|
|
orderId: 'xxxxxxxxxxxx',
|
|
ciKaTitle: "4次卡办理",
|
|
price: 30,
|
|
oldDate: "2024-05-09 11:56:40",
|
|
newDate: "024-05-09"
|
|
}, {
|
|
id: 3,
|
|
orderId: 'xxxxxxxxxxxx',
|
|
ciKaTitle: "4次卡办理",
|
|
price: 30,
|
|
oldDate: "2024-05-09 11:56:40",
|
|
newDate: "024-05-09"
|
|
}]
|
|
}, {
|
|
id: 2,
|
|
title: "2024年4月",
|
|
sumPrice: 30,
|
|
sumNum: 1,
|
|
arrys: [{
|
|
id: 1,
|
|
orderId: 'xxxxxxxxxxxx',
|
|
ciKaTitle: "4次卡办理",
|
|
price: 30,
|
|
oldDate: "2024-05-09 11:56:40",
|
|
newDate: "024-05-09"
|
|
}, {
|
|
id: 2,
|
|
orderId: 'xxxxxxxxxxxx',
|
|
ciKaTitle: "4次卡办理",
|
|
price: 30,
|
|
oldDate: "2024-05-09 11:56:40",
|
|
newDate: "024-05-09"
|
|
}, {
|
|
id: 3,
|
|
orderId: 'xxxxxxxxxxxx',
|
|
ciKaTitle: "4次卡办理",
|
|
price: 30,
|
|
oldDate: "2024-05-09 11:56:40",
|
|
newDate: "024-05-09"
|
|
}]
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "2024年3月",
|
|
sumPrice: 30,
|
|
sumNum: 1,
|
|
arrys: [{
|
|
id: 1,
|
|
orderId: 'xxxxxxxxxxxx',
|
|
ciKaTitle: "4次卡办理",
|
|
price: 30,
|
|
oldDate: "2024-05-09 11:56:40",
|
|
newDate: "024-05-09"
|
|
}, {
|
|
id: 2,
|
|
orderId: 'xxxxxxxxxxxx',
|
|
ciKaTitle: "4次卡办理",
|
|
price: 30,
|
|
oldDate: "2024-05-09 11:56:40",
|
|
newDate: "024-05-09"
|
|
}, {
|
|
id: 3,
|
|
orderId: 'xxxxxxxxxxxx',
|
|
ciKaTitle: "4次卡办理",
|
|
price: 30,
|
|
oldDate: "2024-05-09 11:56:40",
|
|
newDate: "024-05-09"
|
|
}]
|
|
}
|
|
]
|
|
}else{
|
|
uni.showToast({
|
|
icon:"none",
|
|
title:"网络错误,请重新进入"
|
|
})
|
|
}
|
|
|
|
}
|
|
remo();
|
|
const add = () => {
|
|
headerindex.value = 2
|
|
if(headerindex.value===2){
|
|
demos.value=[]
|
|
demos.value = [{
|
|
id: 1,
|
|
title: "本月",
|
|
sumPrice: 3,
|
|
sumNum: 1,
|
|
arrys: [{
|
|
id: 1,
|
|
orderId: 'xxxxxxxxxxxx',
|
|
ciKaTitle: "4次卡办理",
|
|
price: 3,
|
|
oldDate: "2024-05-09 11:56:40",
|
|
newDate: "024-05-09"
|
|
}, {
|
|
id: 2,
|
|
orderId: 'xxxxxxxxxxxx',
|
|
ciKaTitle: "4次卡办理",
|
|
price: 3,
|
|
oldDate: "2024-05-09 11:56:40",
|
|
newDate: "024-05-09"
|
|
}, {
|
|
id: 3,
|
|
orderId: 'xxxxxxxxxxxx',
|
|
ciKaTitle: "4次卡办理",
|
|
price: 3,
|
|
oldDate: "2024-05-09 11:56:40",
|
|
newDate: "024-05-09"
|
|
}]
|
|
}, {
|
|
id: 2,
|
|
title: "2024年4月",
|
|
sumPrice: 3,
|
|
sumNum: 1,
|
|
arrys: [{
|
|
id: 1,
|
|
orderId: 'xxxxxxxxxxxx',
|
|
ciKaTitle: "4次卡办理",
|
|
price: 3,
|
|
oldDate: "2024-05-09 11:56:40",
|
|
newDate: "024-05-09"
|
|
}, {
|
|
id: 2,
|
|
orderId: 'xxxxxxxxxxxx',
|
|
ciKaTitle: "4次卡办理",
|
|
price: 3,
|
|
oldDate: "2024-05-09 11:56:40",
|
|
newDate: "024-05-09"
|
|
}, {
|
|
id: 3,
|
|
orderId: 'xxxxxxxxxxxx',
|
|
ciKaTitle: "4次卡办理",
|
|
price: 3,
|
|
oldDate: "2024-05-09 11:56:40",
|
|
newDate: "024-05-09"
|
|
}]
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "2024年3月",
|
|
sumPrice: 3,
|
|
sumNum: 1,
|
|
arrys: [{
|
|
id: 1,
|
|
orderId: 'xxxxxxxxxxxx',
|
|
ciKaTitle: "4次卡办理",
|
|
price: 3,
|
|
oldDate: "2024-05-09 11:56:40",
|
|
newDate: "024-05-09"
|
|
}, {
|
|
id: 2,
|
|
orderId: 'xxxxxxxxxxxx',
|
|
ciKaTitle: "4次卡办理",
|
|
price: 3,
|
|
oldDate: "2024-05-09 11:56:40",
|
|
newDate: "024-05-09"
|
|
}, {
|
|
id: 3,
|
|
orderId: 'xxxxxxxxxxxx',
|
|
ciKaTitle: "4次卡办理",
|
|
price: 3,
|
|
oldDate: "2024-05-09 11:56:40",
|
|
newDate: "024-05-09"
|
|
}]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.secondBright {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
background-color: #f2f2f2;
|
|
overflow: hidden;
|
|
.tops{
|
|
width: 100%;
|
|
height: 11%;
|
|
}
|
|
|
|
.secondBright-header {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
display: flex;
|
|
font-size: 30rpx;
|
|
color: black;
|
|
background-color: #fff;
|
|
|
|
.header-left {
|
|
width: 50%;
|
|
height: 80rpx;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
}
|
|
|
|
.header-right {
|
|
width: 50%;
|
|
height: 80rpx;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
}
|
|
|
|
.headerActive {
|
|
border-bottom: 6rpx solid #009dd9;
|
|
color: #009dd9;
|
|
}
|
|
}
|
|
|
|
.secondBright-auto {
|
|
width: 100%;
|
|
height: 95%;
|
|
position: relative;
|
|
|
|
.auto-box {
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
.auto-box-title {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
padding-left: 30rpx;
|
|
padding-right: 30rpx;
|
|
font-size: 26rpx;
|
|
|
|
.right-txt {
|
|
.reds {
|
|
color: #d9001b;
|
|
}
|
|
|
|
.blues {
|
|
color: #009dd9;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.auto-box-flex {
|
|
width: 100%;
|
|
// height: 100rpx;
|
|
background-color: #fff;
|
|
|
|
.flex-tops {
|
|
width: 100%;
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
box-sizing: border-box;
|
|
padding-left: 40rpx;
|
|
font-size: 24rpx;
|
|
color: #ccc;
|
|
}
|
|
|
|
.flex-topss {
|
|
width: 100%;
|
|
height: 50rpx;
|
|
text-align: right;
|
|
line-height: 50rpx;
|
|
box-sizing: border-box;
|
|
padding-right: 40rpx;
|
|
font-size: 24rpx;
|
|
color: #ccc;
|
|
}
|
|
|
|
.flex-centers {
|
|
width: 100%;
|
|
height: 50rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
padding-left: 40rpx;
|
|
padding-right: 40rpx;
|
|
|
|
.flex-reds {
|
|
color: #d9001b;
|
|
font-size: 45rpx;
|
|
}
|
|
}
|
|
|
|
.flex-bottoms {
|
|
width: 100%;
|
|
height: 50rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
padding-left: 40rpx;
|
|
padding-right: 40rpx;
|
|
color: #ccc;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
|
|
.lines {
|
|
width: 100%;
|
|
height: 1rpx;
|
|
border-top: 2rpx dashed #ccc;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.ding {
|
|
width: 100%;
|
|
height: 400rpx;
|
|
}
|
|
}
|
|
</style> |