Skip to content

B
bigwood
Commit 7715dcf0 authored by youjie's avatar youjie
Browse files
Options

no message

parent e7e134dc
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 192 additions and 72 deletions
src/components/passbook/passbookHead.vue
View file @ 7715dcf0
<template> <template>
<div class="banner q-pa-sm q-mt-lg" style="position: relative;"> <div class="banner q-pa-sm q-mt-lg" style="position: relative;"
<q-img src="../../assets/images/personal/bg1.png" :style="{'margin':$q.platform.is.mobile?'20px 10px 0 10px':''}"
:class="{'mobile':$q.platform.is.mobile}">
<q-img v-if="$q.platform.is.desktop" src="../../assets/images/personal/bg1.png"
width="156px" width="156px"
height="162px" style="position: absolute; bottom: 0px;"/> height="162px" style="position: absolute; bottom: 0px;"/>
<div class="text-center" style="position: absolute; top: -27px;width: 100%;left:0;"> <div class="text-center passbookHead-title"
:class="[$q.platform.is.desktop?'desktop':'mobile']">
<q-img src="../../assets/images/personal/title.png" <q-img src="../../assets/images/personal/title.png"
width="199px" width="199px"
height="59px"/> height="59px"/>
</div> </div>
<div class="row justify-between passbookHead-form"> <div
<div class="column col"> class="passbookHead-form"
<p class="text-white" style="opacity: .5;">可用余额</p> :class="{'row justify-between':$q.platform.is.desktop,
<div class="row items-end text-white" style="position: relative;"> 'column mobile':$q.platform.is.mobile}">
<div class="fz22"> <div class="col"
¥ :class="{'column':$q.platform.is.desktop,'row justify-between':$q.platform.is.mobile}"
</div> :style="{'position':$q.platform.is.mobile?'reactive':''}">
<div class="fz40 q-pl-md"> <div class="column"
<span style="position: relative; top: 11px;">{{Client_Balance}}</span> :style="{'padding':$q.platform.is.mobile?'20px 0 15px 0':''}">
</div> <div class="text-white" style="opacity: .5;">可用余额</div>
<div class="fz12 q-pl-lg cursor-pointer" style="position: absolute;right: 0;bottom: 0;"> <div class="row items-end text-white" style="position: relative;">
使用规则 <div class="fz22">
¥
</div>
<div class="fz40 q-pl-md ">
<span style="position: relative; top: 11px;">{{Client_Balance.toFixed(2)}}</span>
</div>
</div> </div>
</div> </div>
<q-img v-if="$q.platform.is.mobile" src="../../assets/images/personal/bg1.png"
style="position: absolute;right: 20px;top: 40px;"
width="117px"
height="auto"/>
</div> </div>
<div class="row items-center justify-end col-7"> <q-separator v-if="$q.platform.is.mobile" dark class="q-mt-md" />
<div class="q-pa-xs q-px-sm bg-amber-3 rounded-borders text-orange-14 passbookHeadButtom cursor-pointer" @click="seeDetails"> <div class="row justify-between col-8"
<q-img src="../../assets/images/personal/ck.png" :class="{'items-end':$q.platform.is.desktop,'items-center':$q.platform.is.mobile}">
width="12px" <div
height="12px" style="position: relative; top: 0px;"/> :class="{'q-pl-lg fz12 text-white':$q.platform.is.desktop,'fz14 text-amber-1 col text-center':$q.platform.is.mobile}">
<span class="fz14 q-pl-xs">查看明细</span> <span>使用规则</span>
</div>
<q-separator v-if="$q.platform.is.mobile" dark vertical inset />
<div class="row items-center" style="height: 100%;"
:class="{'q-pt-lg':$q.platform.is.desktop,'col-6 text-center':$q.platform.is.mobile}">
<div class="rounded-borders cursor-pointer" @click="seeDetails"
:class="{'q-pa-xs q-px-sm bg-amber-3 passbookHeadButtom text-orange-14 q-mt-md':$q.platform.is.desktop,'text-amber-1':$q.platform.is.mobile}"
:style="{'width':$q.platform.is.mobile?'100%':''}">
<q-img v-if="$q.platform.is.desktop" src="../../assets/images/personal/ck.png"
width="12px"
height="12px" style="position: relative; top: 0px;"/>
<span class="fz14 q-pl-xs">使用明细</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -78,10 +102,24 @@ ...@@ -78,10 +102,24 @@
border: 6px solid #EEA376; border: 6px solid #EEA376;
padding: 0 57px; padding: 0 57px;
} }
.banner.mobile{
border-radius: 10px;
padding: 0 20px;
border: 4px solid #EEA376;
}
.passbookHead-form{ .passbookHead-form{
padding: 36px 0 37px 246px; padding: 36px 0 37px 246px;
} }
.passbookHead-form.mobile{
padding: 36px 0 5px 0px;
}
.passbookHeadButtom{ .passbookHeadButtom{
border: 2px solid #F6CA58; border: 2px solid #F6CA58;
} }
.passbookHead-title{
position: absolute;
width: 100%;;
left: 0;
top: -27px;
}
</style> </style>
\ No newline at end of file
src/components/passbook/rebate.vue
View file @ 7715dcf0
<template> <template>
<div class="bg-white q-mt-lg"> <div class="bg-white q-mt-lg"
:style="{'margin':$q.platform.is.mobile?'20px 10px 0 10px':'',
'border-radius':$q.platform.is.desktop?'':'10px'}">
<rebatehead :title="titleHead"/> <rebatehead :title="titleHead"/>
<q-separator color="grey-3" class="q-my-sm" /> <q-separator color="grey-3" class="q-my-sm" />
<div class="row justify-between rebate-form"> <div
<div class="column col rebate-left fz14"> style="padding: 15px 0 0 0;"
<div class="row items-center left-text text-grey-9"> :class="[$q.platform.is.desktop?'row justify-between':'column reverse']">
<div>订单信息</div><div>系列</div> <div v-if="$q.platform.is.mobile" class="text-center fz16 q-py-md" @click="isShow=!isShow"
style="border: 1px dashed #E0E0E0;">
查看明细<q-icon
:name="isShow ? 'keyboard_arrow_up' : 'keyboard_arrow_down'" class="q-ml-sm text-grey-6"
size="25px"
/>
</div>
<div class="column col rebate-left fz14"
:style="{'padding':$q.platform.is.desktop?'0 30px 0 30px':''}">
<template v-if="isShow||$q.platform.is.desktop">
<div class="row items-center left-text text-grey-9"
:class="[$q.platform.is.desktop?'':'q-py-sm']">
<div>订单{{$q.platform.is.desktop?'信息':''}}</div><div>系列</div>
<div>人数</div><div>返佣</div> <div>人数</div><div>返佣</div>
</div> </div>
<q-separator color="grey-3" /> <q-separator color="grey-3" />
...@@ -24,20 +38,24 @@ ...@@ -24,20 +38,24 @@
<svg-icon :size="50" color="nav" icon="General/Clipboard.svg"></svg-icon> <svg-icon :size="50" color="nav" icon="General/Clipboard.svg"></svg-icon>
<div class="q-mt-md f12 text-grey-6">{{ $t('noneData') }}</div> <div class="q-mt-md f12 text-grey-6">{{ $t('noneData') }}</div>
</div> </div>
</template>
</div> </div>
<div class="col-4 rebate-right column q-px-lg"> <div class="rebate-right column"
<p class="fz14 text-grey-7">线路数据占比</p> :class="[$q.platform.is.desktop?'col-4 q-px-lg':'col']"
<div class="q-pl-lg"> :style="{'padding':$q.platform.is.desktop?'0 30px 0 30px':''}">
<div class="fz14 text-grey-7 q-pl-lg">线路数据占比</div>
<div :class="[$q.platform.is.desktop?'q-pl-lg':'']">
<div ref="main" style="width: 100%;height: 300px;"></div> <div ref="main" style="width: 100%;height: 300px;"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { ref, toRefs, onMounted } from "vue"; import { ref, toRefs, onMounted } from "vue";
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar'
import { defineComponent, ref, reactive, toRefs, provide } from 'vue' import { defineComponent, ref, reactive, toRefs, provide } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import * as echarts from "echarts" import * as echarts from "echarts"
...@@ -56,9 +74,11 @@ ...@@ -56,9 +74,11 @@
} }
}, },
setup(props) { setup(props) {
const $q = useQuasar()
const $router = useRouter(); const $router = useRouter();
const main = ref(); const main = ref();
const data=reactive({ const data=reactive({
isShow: false,
titleHead: '人头返佣', titleHead: '人头返佣',
title: '线路数据占比', title: '线路数据占比',
dataList: [], dataList: [],
...@@ -141,14 +161,13 @@ ...@@ -141,14 +161,13 @@
trigger: "item", trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)" formatter: "{a} <br/>{b} : {c} ({d}%)"
}, },
calculable: true, calculable: true,
graphic: [ graphic: [
{ {
type: "text", type: "text",
left: "33%", left: $q.platform.is.desktop?"35%":"40%",
top: "45%", top: $q.platform.is.desktop?"43%":"48%",
style: { style: {
text: "线路占比", text: "线路占比",
textAlign: "center", textAlign: "center",
...@@ -163,6 +182,7 @@ ...@@ -163,6 +182,7 @@
name: "订单来源", name: "订单来源",
type: "pie", type: "pie",
radius: ["50%", "70%"], radius: ["50%", "70%"],
center: $q.platform.is.desktop?["50%", "45%"]:["50%", "50%"],
itemStyle: { itemStyle: {
normal: { normal: {
label: { label: {
...@@ -188,7 +208,6 @@ ...@@ -188,7 +208,6 @@
emphasis: { emphasis: {
label: { label: {
show: true, show: true,
textStyle: { textStyle: {
fontSize: "20", fontSize: "20",
fontFamily: "pingfangR" fontFamily: "pingfangR"
...@@ -226,7 +245,7 @@ ...@@ -226,7 +245,7 @@
padding: 15px 30px 0 30px; padding: 15px 30px 0 30px;
} }
.rebate-left { .rebate-left {
/* width: 70%; */
} }
.left-text div{ .left-text div{
display: inline-block; display: inline-block;
...@@ -237,7 +256,7 @@ ...@@ -237,7 +256,7 @@
background: #E0E0E0; background: #E0E0E0;
} }
.rebate-right{ .rebate-right{
/* width: 28%; */
} }
</style> </style>
\ No newline at end of file
src/components/passbook/rebate/rebatehead.vue
View file @ 7715dcf0
<template> <template>
<div class="row justify-between q-px-lg q-py-sm q-pt-md"> <div class="row justify-between q-px-lg q-py-sm q-pt-md">
<span class="fz16 text-weight-bold dark">{{title}}</span> <span class="fz16 text-weight-bold dark"
:class="[$q.platform.is.mobile?'q-pl-sm':'']"
:style="{'border-left':$q.platform.is.mobile?'4px solid #EE4454 ':'',}">{{title}}</span>
<span @click="title=='使用明细'?Return():''"> <span @click="title=='使用明细'?Return():''">
<span class="fz12 cursor-pointer text-grey-6"> <span class="fz12 cursor-pointer text-grey-6">
{{title!='使用明细'?'':'返回'}} {{title!='使用明细'?'':'返回'}}
......
src/components/passbook/redEnvelope.vue
View file @ 7715dcf0
This diff is collapsed.
src/components/passbook/useDetails.vue
View file @ 7715dcf0
<template> <template>
<div class="bg-white q-mt-lg"> <div class="bg-white q-mt-lg" :style="{'margin':$q.platform.is.mobile?'0 10px':''}">
<rebatehead :title="titleHead"/> <rebatehead :title="titleHead"/>
<q-separator color="grey-3" class="q-my-sm" /> <q-separator color="grey-3" class="q-my-sm" />
<div class="q-px-lg q-pt-md"> <div class="q-px-lg q-pt-md">
......
src/pages/passbook/passbook.vue
View file @ 7715dcf0
<template> <template>
<div class="column items-center"> <div class="column items-center">
<div class="passbook-form q-mt-sm q-mb-lg"> <div class="q-mt-sm q-mb-lg"
:class="[$q.platform.is.desktop?'passbook-form':'']"
:style="{'width':$q.platform.is.mobile?'100%':''}">
<template v-if="!isUseDetails"> <template v-if="!isUseDetails">
<passbookHead :dataNum="datainfo?datainfo.Client_Balance:0"/> <passbookHead :dataNum="datainfo?datainfo.Client_Balance:0"/>
<rebate /> <rebate />
......
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