Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
B
bigwood
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
罗超
bigwood
Commits
99eb9318
Commit
99eb9318
authored
Apr 13, 2025
by
罗超
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
修改
parent
63575108
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
345 additions
and
358 deletions
+345
-358
redEnvelope.vue
src/components/passbook/redEnvelope.vue
+215
-220
index.ts
src/i18n/en-US/index.ts
+2
-1
index.ts
src/i18n/ja-RB/index.ts
+3
-2
index.ts
src/i18n/zh-SW/index.ts
+3
-2
index.ts
src/i18n/zh-TW/index.ts
+3
-2
passbook.vue
src/pages/passbook/passbook.vue
+119
-131
No files found.
src/components/passbook/redEnvelope.vue
View file @
99eb9318
<
template
>
<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"
/>
<q-separator
color=
"grey-3"
class=
"q-my-sm"
/>
<div
style=
"padding: 15px 0 0 0;"
:class=
"[$q.platform.is.desktop?'row justify-between':'column mobile']"
>
<div
class=
"column col redEnvelope-left fz14"
:class=
"[$q.platform.is.desktop?'q-pl-sm':'']"
:style=
"
{'padding':$q.platform.is.desktop?'0 25px 0 25px':''}">
<p
class=
"fz14 text-grey-7"
:class=
"[$q.platform.is.desktop?'':'q-pl-md']"
>
{{
$t
(
'v104.passbook.titles.text6'
)
}}
</p>
<div
ref=
"main"
:class=
"[$q.platform.is.desktop?'q-pt-lg':'']"
style=
"height: 280px;position: relative;top: -30px;"
:style=
"
{'width': $q.platform.is.desktop?'100%':'95%', 'left': $q.platform.is.desktop?'-20px':'10px','top': $q.platform.is.desktop?'-30px':'0'}">
</div>
<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"
/>
<q-separator
color=
"grey-3"
class=
"q-my-sm"
/>
<div
style=
"padding: 15px 0 0 0"
:class=
"[$q.platform.is.desktop ? 'row justify-between' : 'column mobile']"
>
<div
class=
"column col redEnvelope-left fz14"
:class=
"[$q.platform.is.desktop ? 'q-pl-sm' : '']"
:style=
"
{ padding: $q.platform.is.desktop ? '0 25px 0 25px' : '' }">
<p
class=
"fz14 text-grey-7"
:class=
"[$q.platform.is.desktop ? '' : 'q-pl-md']"
>
{{
$t
(
'v104.passbook.titles.text6'
)
}}
</p>
<div
ref=
"main"
:class=
"[$q.platform.is.desktop ? 'q-pt-lg' : '']"
style=
"height: 280px; position: relative; top: -30px"
:style=
"
{ width: $q.platform.is.desktop ? '100%' : '95%', left: $q.platform.is.desktop ? '-20px' : '10px', top: $q.platform.is.desktop ? '-30px' : '0' }">
</div>
</div>
<div
v-if=
"$q.platform.is.desktop"
class=
"row justify-center"
>
<q-separator
vertical
inset
style=
"height: 50%; position: relative; top: 11%"
/>
</div>
<div
class=
"redEnvelope-right"
:class=
"[$q.platform.is.desktop ? 'col-4 column q-px-lg' : 'col row q-px-sm']"
:style=
"
{ padding: $q.platform.is.desktop ? '0 30px 0 30px' : '' }">
<div
:class=
"[$q.platform.is.desktop ? 'q-pb-sm' : 'col-6 text-center']"
>
<div
class=
"fz14 text-grey-7"
:class=
"[$q.platform.is.desktop ? 'q-pb-xs' : '']"
>
{{
$t
(
'v104.passbook.titles.text9'
)
}}
</div>
<div
class=
"row items-end"
:class=
"[$q.platform.is.desktop ? 'q-pt-sm q-pb-lg' : 'justify-center']"
>
<span
class=
"fz12"
></span>
<div
class=
"fz32 q-pl-sm"
>
<span
style=
"position: relative; top: 9px"
>
{{
datainfo
.
Amount
}}
</span>
</div>
<div
v-if=
"$q.platform.is.desktop"
class=
"row justify-center"
>
<q-separator
vertical
inset
style=
"height: 50%;position: relative;top: 11%;"
/>
</div>
<div
class=
"redEnvelope-right"
:class=
"[$q.platform.is.desktop?'col-4 column q-px-lg':'col row q-px-sm']"
:style=
"
{'padding':$q.platform.is.desktop?'0 30px 0 30px':''}"
>
<div
:class=
"[$q.platform.is.desktop?'q-pb-sm':'col-6 text-center']"
>
<div
class=
"fz14 text-grey-7"
:class=
"[$q.platform.is.desktop?'q-pb-xs':'']"
>
{{
$t
(
'v104.passbook.titles.text9'
)
}}
</div>
<div
class=
"row items-end"
:class=
"[$q.platform.is.desktop?'q-pt-sm q-pb-lg':'justify-center']"
>
<span
class=
"fz12"
>
¥
</span>
<div
class=
"fz32 q-pl-sm"
><span
style=
"position: relative;top: 9px;"
>
{{
datainfo
.
Amount
}}
</span></div>
</div>
</div>
<q-separator
v-if=
"$q.platform.is.desktop"
color=
"grey-3"
/>
<div
:class=
"[$q.platform.is.desktop?'q-pb-sm':'col-6 text-center']"
>
<div
class=
"fz14 text-grey-7"
:class=
"[$q.platform.is.desktop?'q-pb-xs q-pt-lg':'']"
>
{{
$t
(
'v104.passbook.titles.text10'
)
}}
</div>
<div
class=
"row items-end"
:class=
"[$q.platform.is.desktop?'q-pt-sm q-pb-lg':'justify-center']"
>
<span
class=
"fz12"
>
¥
</span>
<div
class=
"fz32 q-pl-sm"
><span
style=
"position: relative;top: 9px;"
>
{{
datainfo
.
TotalMoney
}}
</span></div>
</div>
</div>
<q-separator
v-if=
"$q.platform.is.desktop"
color=
"grey-3"
/>
</div>
</div>
<q-separator
v-if=
"$q.platform.is.desktop"
color=
"grey-3"
/>
<div
:class=
"[$q.platform.is.desktop ? 'q-pb-sm' : 'col-6 text-center']"
>
<div
class=
"fz14 text-grey-7"
:class=
"[$q.platform.is.desktop ? 'q-pb-xs q-pt-lg' : '']"
>
{{
$t
(
'v104.passbook.titles.text10'
)
}}
</div>
<div
class=
"row items-end"
:class=
"[$q.platform.is.desktop ? 'q-pt-sm q-pb-lg' : 'justify-center']"
>
<span
class=
"fz12"
>
¥
</span>
<div
class=
"fz32 q-pl-sm"
>
<span
style=
"position: relative; top: 9px"
>
{{
datainfo
.
TotalMoney
}}
</span>
</div>
<q-separator
v-if=
"$q.platform.is.mobile"
color=
"grey-3"
/>
</div>
</div>
<q-separator
v-if=
"$q.platform.is.desktop"
color=
"grey-3"
/>
</div>
<q-separator
v-if=
"$q.platform.is.mobile"
color=
"grey-3"
/>
</div>
<div
:class=
"[$q.platform.is.desktop ? 'q-pb-lg q-px-lg' : 'q-py-md q-px-md']"
>
<span>
{{
$t
(
'v104.passbook.titles.text11'
)
}}
:
</span><span
class=
"q-pl-lg"
></span><span
class=
"fz32 q-pl-sm"
>
{{
datainfo
.
Amount
.
toFixed
(
0
)
}}
</span>
</div>
<div
class=
"q-pt-sm"
:class=
"[$q.platform.is.desktop ? 'q-px-lg' : 'q-px-md']"
>
<div
class=
"q-pb-lg"
v-for=
"(item, index) in datainfo.RatioList"
:key=
"index"
:class=
"[$q.platform.is.desktop ? 'row items-center no-wrap' : 'column']"
>
<div
class=
"col"
>
<template
v-if=
"$q.platform.is.desktop"
>
<q-linear-progress
style=
"border-radius: 15px"
v-if=
"item.percent > 1"
stripe
rounded
size=
"20px"
:value=
"item.width / 1000"
color=
"orange-9"
/>
<q-linear-progress
style=
"border-radius: 15px"
v-else-if=
"item.percent
<
1
"
stripe
rounded
size=
"20px"
:value=
"item.width / 1000"
color=
"red-5"
/>
<q-linear-progress
style=
"border-radius: 15px"
v-else
stripe
rounded
size=
"20px"
:value=
"item.width / 1000"
color=
"cyan-4"
/>
</
template
>
<
template
v-else
>
<q-linear-progress
style=
"border-radius: 15px"
v-if=
"item.percent > 1"
stripe
rounded
size=
"10px"
:value=
"item.width / 1000"
color=
"orange-9"
/>
<q-linear-progress
style=
"border-radius: 15px"
v-else-if=
"item.percent
<
1
"
stripe
rounded
size=
"10px"
:value=
"item.width / 1000"
color=
"red-5"
/>
<q-linear-progress
style=
"border-radius: 15px"
v-else
stripe
rounded
size=
"10px"
:value=
"item.width / 1000"
color=
"cyan-4"
/>
</
template
>
</div>
<div
:class=
"[$q.platform.is.desktop?'q-pb-lg q-px-lg':'q-py-md q-px-md']"
><span>
{{
$t
(
'v104.passbook.titles.text11'
)
}}
:
</span><span
class=
"q-pl-lg"
>
¥
</span><span
class=
"fz32 q-pl-sm"
>
{{
datainfo
.
Amount
.
toFixed
(
2
)
}}
</span>
</div>
<div
class=
"q-pt-sm"
:class=
"[$q.platform.is.desktop?'q-px-lg':'q-px-md']"
>
<div
class=
"q-pb-lg"
v-for=
"(item,index) in datainfo.RatioList"
:key=
"index"
:class=
"[$q.platform.is.desktop?'row items-center no-wrap':'column']"
>
<div
class=
"col"
>
<template
v-if=
"$q.platform.is.desktop"
>
<q-linear-progress
style=
"border-radius: 15px;"
v-if=
"item.percent>1"
stripe
rounded
size=
"20px"
:value=
"item.width/1000"
color=
"orange-9"
/>
<q-linear-progress
style=
"border-radius: 15px;"
v-else-if=
"item.percent
<1
"
stripe
rounded
size=
"20px"
:value=
"item.width/1000"
color=
"red-5"
/>
<q-linear-progress
style=
"border-radius: 15px;"
v-else
stripe
rounded
size=
"20px"
:value=
"item.width/1000"
color=
"cyan-4"
/>
</
template
>
<
template
v-else
>
<q-linear-progress
style=
"border-radius: 15px;"
v-if=
"item.percent>1"
stripe
rounded
size=
"10px"
:value=
"item.width/1000"
color=
"orange-9"
/>
<q-linear-progress
style=
"border-radius: 15px;"
v-else-if=
"item.percent
<1
"
stripe
rounded
size=
"10px"
:value=
"item.width/1000"
color=
"red-5"
/>
<q-linear-progress
style=
"border-radius: 15px;"
v-else
stripe
rounded
size=
"10px"
:value=
"item.width/1000"
color=
"cyan-4"
/>
</
template
>
<div
class=
"row items-center no-wrap"
:class=
"[$q.platform.is.desktop ? 'col-4 q-ml-lg' : 'col']"
>
<div
:class=
"[$q.platform.is.desktop ? '' : 'q-mr-sm']"
>
<
template
v-if=
"$q.platform.is.desktop"
>
<q-img
v-if=
"item.percent > 1"
src=
"../../assets/images/personal/gou.png"
width=
"20px"
height=
"20px"
style=
"position: relative"
/>
<q-img
v-else
src=
"../../assets/images/personal/x1.png"
width=
"26px"
height=
"26px"
style=
"position: relative"
/>
</
template
>
<
template
v-else
>
<q-img
v-if=
"item.percent > 1"
src=
"../../assets/images/personal/gou.png"
width=
"15px"
height=
"15px"
style=
"position: relative"
/>
<q-img
v-else
src=
"../../assets/images/personal/x1.png"
width=
"16px"
height=
"16px"
style=
"position: relative"
/>
</
template
>
</div>
</div>
<div
class=
"row items-center no-wrap"
:class=
"[$q.platform.is.desktop?'col-4 q-ml-lg':'col']"
>
<div
:class=
"[$q.platform.is.desktop?'':'q-mr-sm']"
>
<
template
v-if=
"$q.platform.is.desktop"
>
<q-img
v-if=
"item.percent>1"
src=
"../../assets/images/personal/gou.png"
width=
"20px"
height=
"20px"
style=
"position: relative;"
/>
<q-img
v-else
src=
"../../assets/images/personal/x1.png"
width=
"26px"
height=
"26px"
style=
"position: relative;"
/>
</
template
>
<
template
v-else
>
<q-img
v-if=
"item.percent>1"
src=
"../../assets/images/personal/gou.png"
width=
"15px"
height=
"15px"
style=
"position: relative;"
/>
<q-img
v-else
src=
"../../assets/images/personal/x1.png"
width=
"16px"
height=
"16px"
style=
"position: relative;"
/>
</
template
>
</div>
<div
:class=
"[$q.platform.is.desktop ? 'column q-ml-md' : 'row no-wrap items-center justify-between q-pt-xs']"
>
<span
class=
"row"
:class=
"[item.percent > 1 ? 'text-light-green-6' : item.percent < 1 ? 'text-red-5' : 'text-dark', $q.platform.is.desktop ? 'wrap fz16 text-weight-bold' : 'fz12 col-6']"
>
<
template
v-if=
"item.percent > 1"
>
{{
$t
(
'v104.passbook.titles.text12'
)
}}
</
template
>
<div
:class=
"[$q.platform.is.desktop?'column q-ml-md':'row no-wrap items-center justify-between q-pt-xs']"
>
<span
class=
"row"
:class=
"[item.percent>1?'text-light-green-6':item.percent<1?'text-red-5':'text-dark',$q.platform.is.desktop?'wrap fz16 text-weight-bold':'fz12 col-6']"
>
<
template
v-if=
"item.percent>1"
>
{{
$t
(
'v104.passbook.titles.text12'
)
}}
¥
{{
(
item
.
Money
*
item
.
Ratio
)
/
1000
}}
</
template
>
<
template
v-if=
"item.percent<1"
>
{{
$t
(
'v104.passbook.titles.text13'
)
}}
¥
{{
item
.
Money
-
datainfo
.
Amount
}}
,
{{
$t
(
'v104.passbook.titles.text14'
)
}}
¥
{{
(
item
.
Money
*
item
.
Ratio
)
/
1000
}}
</
template
>
</span>
<
template
v-if=
"item.percent < 1"
>
{{
$t
(
'v104.passbook.titles.text13'
)
}}
{{
item
.
Money
-
datainfo
.
GuestNum
}}
/
{{
$t
(
'travel.people'
)
}}
,
{{
$t
(
'v104.passbook.titles.text14'
)
}}
¥
{{
item
.
Ratio
}}
/
{{
$t
(
'travel.people'
)
}}
</
template
>
</span>
<span
class=
"fz12 text-grey-6 q-pt-xs"
:class=
"[$q.platform.is.desktop?'':'col-6']"
>
{{$t('v104.passbook.titles.text15')}} ¥ {{item.Money}} {{$t('v104.passbook.titles.text16')}}{{item.Ratio}}‰
</span>
</div>
</div>
</div>
<span
class=
"fz12 text-grey-6 q-pt-xs"
:class=
"[$q.platform.is.desktop ? '' : 'col-6']"
>
{{ $t('v104.passbook.titles.text15') }}
{{ item.Money }}
<span
v-if=
"index<datainfo.RatioList.length-1"
>
-{{ datainfo.RatioList[index+1].Money-1 }}
</span>
<span
v-else
>
{{ $t('v104.passbook.titles.text17') }}
</span>
{{ $t('v104.passbook.titles.text16') }}
{{ item.Ratio }}/{{ $t('travel.people') }}
</span>
</div>
</div>
</div>
</div>
</div>
</template>
<
script
lang=
"ts"
>
import
{
ref
,
toRefs
,
onMounted
,
onBeforeUnmount
}
from
"vue"
;
import
{
useRouter
}
from
'vue-router'
;
import
{
useQuasar
}
from
'quasar'
import
{
defineComponent
,
ref
,
reactive
,
toRefs
}
from
'vue'
import
{
useI18n
}
from
'vue-i18n'
import
*
as
echarts
from
"echarts"
import
rebatehead
from
'../../components/passbook/rebate/rebatehead.vue'
export
default
defineComponent
({
name
:
'user-info'
,
components
:
{
rebatehead
},
props
:
{
Obj
:
{
type
:
Object
,
require
:
true
},
info
:
{
type
:
Object
,
require
:
true
}
import
{
ref
,
toRefs
,
onMounted
,
onBeforeUnmount
}
from
'vue'
import
{
useRouter
}
from
'vue-router'
import
{
useQuasar
}
from
'quasar'
import
{
defineComponent
,
ref
,
reactive
,
toRefs
}
from
'vue'
import
{
useI18n
}
from
'vue-i18n'
import
*
as
echarts
from
'echarts'
import
rebatehead
from
'../../components/passbook/rebate/rebatehead.vue'
export
default
defineComponent
({
name
:
'user-info'
,
components
:
{
rebatehead
},
props
:
{
Obj
:
{
type
:
Object
,
require
:
true
},
setup
(
props
)
{
const
$q
=
useQuasar
()
const
{
t
}
=
useI18n
()
const
$router
=
useRouter
();
const
main
=
ref
();
const
data
=
reactive
({
titleHead
:
t
(
'v104.passbook.titles.text5'
),
xMonth
:[]
as
Array
<
any
>
,
yMoney1
:[]
as
Array
<
any
>
,
yMoney2
:[]
as
Array
<
any
>
,
datainfo
:
null
as
any
})
if
(
props
.
Obj
&&
props
.
info
){
data
.
xMonth
=
props
.
Obj
.
xMonth
data
.
yMoney1
=
props
.
Obj
.
yMoney1
data
.
yMoney2
=
props
.
Obj
.
yMoney2
data
.
datainfo
=
props
.
info
}
let
chart
=
null
const
methods
=
{
getinit
()
{
// 基于准备好的dom,初始化echarts实例
const
myChart
=
echarts
.
init
(
main
.
value
);
const
option
=
{
xAxis
:
{
type
:
"category"
,
boundaryGap
:
false
,
axisLine
:
{
show
:
false
,
lineStyle
:
{
width
:
30
,
}
},
axisTick
:
false
,
data
:
data
.
xMonth
,
},
yAxis
:
{
type
:
"value"
,
min
:
'10'
,
axisTick
:
true
,
splitLine
:
{
show
:
true
,
lineStyle
:
{
color
:
"#fff"
}
},
},
grid
:
{
top
:
$q
.
platform
.
is
.
desktop
?
"30px"
:
"20px"
,
left
:
$q
.
platform
.
is
.
desktop
?
"45px"
:
"45px"
,
right
:
$q
.
platform
.
is
.
desktop
?
"30px"
:
"20px"
,
bottom
:
$q
.
platform
.
is
.
desktop
?
"50px"
:
"60px"
,
},
series
:
[
{
type
:
"line"
,
smooth
:
2
,
symbol
:
'none'
,
data
:
data
.
yMoney1
,
lineStyle
:
{
width
:
3
,
color
:
"#36C7D9"
,
},
itemStyle
:
{
borderWidth
:
5
,
color
:
"#FFFFFF"
,
},
areaStyle
:
{
color
:
"#A4E6EE"
}
},
{
type
:
"line"
,
smooth
:
2
,
data
:
data
.
yMoney2
,
lineStyle
:
{
width
:
3
,
color
:
"#ED6A6B"
,
type
:
'dashed'
},
itemStyle
:
{
borderWidth
:
5
,
},
info
:
{
type
:
Object
,
require
:
true
}
},
setup
(
props
)
{
const
$q
=
useQuasar
()
const
{
t
}
=
useI18n
()
const
$router
=
useRouter
()
const
main
=
ref
()
const
data
=
reactive
({
titleHead
:
t
(
'v104.passbook.titles.text5'
),
xMonth
:
[]
as
Array
<
any
>
,
yMoney1
:
[]
as
Array
<
any
>
,
yMoney2
:
[]
as
Array
<
any
>
,
datainfo
:
null
as
any
})
if
(
props
.
Obj
&&
props
.
info
)
{
data
.
xMonth
=
props
.
Obj
.
xMonth
data
.
yMoney1
=
props
.
Obj
.
yMoney1
data
.
yMoney2
=
props
.
Obj
.
yMoney2
data
.
datainfo
=
props
.
info
}
let
chart
=
null
const
methods
=
{
getinit
()
{
// 基于准备好的dom,初始化echarts实例
const
myChart
=
echarts
.
init
(
main
.
value
)
const
option
=
{
xAxis
:
{
type
:
'category'
,
boundaryGap
:
false
,
axisLine
:
{
show
:
false
,
lineStyle
:
{
width
:
30
}
},
axisTick
:
false
,
data
:
data
.
xMonth
},
areaStyle
:
{
color
:
"#FAD2D2"
}
}
]
yAxis
:
{
type
:
'value'
,
min
:
'10'
,
axisTick
:
true
,
splitLine
:
{
show
:
true
,
lineStyle
:
{
color
:
'#fff'
}
}
},
grid
:
{
top
:
$q
.
platform
.
is
.
desktop
?
'30px'
:
'20px'
,
left
:
$q
.
platform
.
is
.
desktop
?
'45px'
:
'45px'
,
right
:
$q
.
platform
.
is
.
desktop
?
'30px'
:
'20px'
,
bottom
:
$q
.
platform
.
is
.
desktop
?
'50px'
:
'60px'
},
series
:
[
{
type
:
'line'
,
smooth
:
2
,
symbol
:
'none'
,
data
:
data
.
yMoney1
,
lineStyle
:
{
width
:
3
,
color
:
'#36C7D9'
},
itemStyle
:
{
borderWidth
:
5
,
color
:
'#FFFFFF'
},
areaStyle
:
{
color
:
'#A4E6EE'
}
},
{
type
:
'line'
,
smooth
:
2
,
data
:
data
.
yMoney2
,
lineStyle
:
{
width
:
3
,
color
:
'#ED6A6B'
,
type
:
'dashed'
},
itemStyle
:
{
borderWidth
:
5
},
};
// 使用刚指定的配置项和数据显示图表。
myChart
.
setOption
(
option
);
areaStyle
:
{
color
:
'#FAD2D2'
}
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart
.
setOption
(
option
)
}
onBeforeUnmount
(()
=>
{
})
onMounted
(()
=>
{
methods
.
getinit
();
});
return
{...
toRefs
(
data
),
main
,...
methods
}
}
})
</
script
>
onBeforeUnmount
(()
=>
{})
onMounted
(()
=>
{
methods
.
getinit
()
})
return
{
...
toRefs
(
data
),
main
,
...
methods
}
}
})
</
script
>
<
style
scoped
>
.redEnvelope-form
{
padding
:
15px
30px
0
30px
;
}
.redEnvelope-form.mobile
{
padding
:
15px
10px
0
20px
;
}
.redEnvelope-left
{
}
.redEnvelope-right
{
}
</
style
>
\ No newline at end of file
.redEnvelope-form
{
padding
:
15px
30px
0
30px
;
}
.redEnvelope-form.mobile
{
padding
:
15px
10px
0
20px
;
}
.redEnvelope-left
{
}
.redEnvelope-right
{
}
</
style
>
src/i18n/en-US/index.ts
View file @
99eb9318
...
...
@@ -1524,7 +1524,7 @@ export default {
text6
:
'Revenue in the past six months'
,
text7
:
'Time selection'
,
text8
:
'Select month'
,
text9
:
'
Accumulated number of transactions
this year'
,
text9
:
'
Number of people
this year'
,
text10
:
'Accumulated revenue'
,
text11
:
'Month Number'
,
text12
:
'Activated, expected revenue'
,
...
...
@@ -1532,6 +1532,7 @@ export default {
text14
:
'Estimated Revenue'
,
text15
:
'Monthly transaction amount has been reached'
,
text16
:
'Return'
,
text17
:
'up'
,
},
col
:
{
title1
:
'Order'
,
...
...
src/i18n/ja-RB/index.ts
View file @
99eb9318
...
...
@@ -1522,14 +1522,15 @@ export default {
text6
:
'半年近くの収益'
,
text7
:
'時間の選択'
,
text8
:
'選択月'
,
text9
:
'本年の累計
取引総額です
'
,
text9
:
'本年の累計
人数
'
,
text10
:
'累積収益'
,
text11
:
'
当面の取引額
'
,
text11
:
'
現在の人数
'
,
text12
:
'活性化しています,収益見込み'
,
text13
:
'まだまだ'
,
text14
:
'収益予想'
,
text15
:
'月の取引額はすでに達しました'
,
text16
:
'返します'
,
text17
:
'以下'
,
},
col
:{
title1
:
'註文します'
,
...
...
src/i18n/zh-SW/index.ts
View file @
99eb9318
...
...
@@ -1525,14 +1525,15 @@ export default {
text6
:
'近半年收益'
,
text7
:
'时间选择'
,
text8
:
'选择月份'
,
text9
:
'本年累计
交易总额
'
,
text9
:
'本年累计
人数
'
,
text10
:
'累计收益'
,
text11
:
'当前
交易额
'
,
text11
:
'当前
人数
'
,
text12
:
'已激活,预计收益'
,
text13
:
'还差'
,
text14
:
'预计收益'
,
text15
:
'月交易额已达'
,
text16
:
'返'
,
text17
:
'以上'
,
},
col
:{
title1
:
'订单'
,
...
...
src/i18n/zh-TW/index.ts
View file @
99eb9318
...
...
@@ -1527,14 +1527,15 @@ export default {
text6
:
'近半年收益'
,
text7
:
'時間選擇'
,
text8
:
'選擇月份'
,
text9
:
'本年累計
交易總額
'
,
text9
:
'本年累計
人數
'
,
text10
:
'累計收益'
,
text11
:
'當前
交易額
'
,
text11
:
'當前
人數
'
,
text12
:
'已激活,預計收益'
,
text13
:
'還差'
,
text14
:
'預計收益'
,
text15
:
'月交易額已達'
,
text16
:
'返'
,
text17
:
'以上'
,
},
col
:{
title1
:
'訂單'
,
...
...
src/pages/passbook/passbook.vue
View file @
99eb9318
<
template
>
<div
class=
"column items-center"
>
<div
class=
"q-mt-sm q-mb-lg"
:class=
"[$q.platform.is.desktop?'passbook-form':'']"
:style=
"
{'width':$q.platform.is.mobile?'100%':''}">
<transition-group
v-if=
"!isUseDetails"
appear
enter-active-class=
"animated fadeInRight"
leave-active-class=
"animated fadeInLeft"
>
<template
v-if=
"MonthObj&&datainfo"
>
<passbookHead
:dataNum=
"datainfo?datainfo.Client_Balance:0"
/>
<!--
<rebate/>
-->
<redEnvelope
:Obj=
"MonthObj"
:info=
"datainfo"
/>
</
template
>
</transition-group>
<transition
v-else
appear
enter-active-class=
"animated fadeInLeft"
leave-active-class=
"animated fadeInRight"
>
<useDetails/>
</transition>
</div>
<div
class=
"column items-center"
>
<div
class=
"q-mt-sm q-mb-lg"
:class=
"[$q.platform.is.desktop ? 'passbook-form' : '']"
:style=
"
{ width: $q.platform.is.mobile ? '100%' : '' }">
<transition-group
v-if=
"!isUseDetails"
appear
enter-active-class=
"animated fadeInRight"
leave-active-class=
"animated fadeInLeft"
>
<template
v-if=
"MonthObj && datainfo"
>
<passbookHead
:dataNum=
"datainfo ? datainfo.Client_Balance : 0"
/>
<!--
<rebate/>
-->
<redEnvelope
:Obj=
"MonthObj"
:info=
"datainfo"
/>
</
template
>
</transition-group>
<transition
v-else
appear
enter-active-class=
"animated fadeInLeft"
leave-active-class=
"animated fadeInRight"
>
<useDetails
/>
</transition>
</div>
</div>
</template>
<
script
lang=
"ts"
>
import
useMetaModule
from
'../../module/meta/metaModule'
import
{
useRouter
}
from
'vue-router'
;
import
{
defineComponent
,
ref
,
reactive
,
toRefs
,
provide
,
inject
}
from
'vue'
import
{
useQuasar
}
from
'quasar'
import
{
ApiResult
}
from
'../../@types/enumHelper'
import
message
from
'../../utils/message'
import
{
useI18n
}
from
'vue-i18n'
import
Store
from
'../../store'
import
{
DirtionmaryHelper
}
from
'../../config/dictionary'
import
passbookHead
from
'../../components/passbook/passbookHead.vue'
import
rebate
from
'../../components/passbook/rebate.vue'
import
redEnvelope
from
'../../components/passbook/redEnvelope.vue'
import
useDetails
from
'../../components/passbook/useDetails.vue'
import
passbookService
from
'../../api/passbook'
export
default
defineComponent
({
name
:
'user-info'
,
components
:
{
passbookHead
,
rebate
,
redEnvelope
,
useDetails
},
props
:
{},
setup
()
{
import
useMetaModule
from
'../../module/meta/metaModule'
import
{
useRouter
}
from
'vue-router'
import
{
defineComponent
,
ref
,
reactive
,
toRefs
,
provide
,
inject
}
from
'vue'
import
{
useQuasar
}
from
'quasar'
import
{
ApiResult
}
from
'../../@types/enumHelper'
import
message
from
'../../utils/message'
import
{
useI18n
}
from
'vue-i18n'
import
Store
from
'../../store'
import
{
DirtionmaryHelper
}
from
'../../config/dictionary'
import
passbookHead
from
'../../components/passbook/passbookHead.vue'
import
rebate
from
'../../components/passbook/rebate.vue'
import
redEnvelope
from
'../../components/passbook/redEnvelope.vue'
import
useDetails
from
'../../components/passbook/useDetails.vue'
import
passbookService
from
'../../api/passbook'
export
default
defineComponent
({
name
:
'user-info'
,
components
:
{
passbookHead
,
rebate
,
redEnvelope
,
useDetails
},
props
:
{},
setup
()
{
const
$router
=
useRouter
()
const
$q
=
useQuasar
()
const
data
=
reactive
({
datainfo
:
null
as
Object
,
xMonth
:
[]
as
Array
<
any
>
,
yMoney1
:
[]
as
Array
<
any
>
,
yMoney2
:
[]
as
Array
<
any
>
,
MonthObj
:
null
as
Object
})
const
$router
=
useRouter
();
const
$q
=
useQuasar
()
const
data
=
reactive
({
datainfo
:
null
as
Object
,
xMonth
:[]
as
Array
<
any
>
,
yMoney1
:[]
as
Array
<
any
>
,
yMoney2
:[]
as
Array
<
any
>
,
MonthObj
:
null
as
Object
})
let
{
setTitle
}
=
useMetaModule
()
const
{
locale
,
t
}
=
useI18n
()
const
pageTitle
=
inject
(
DirtionmaryHelper
.
PAGE_TITLE_KEY
)
as
any
pageTitle
.
value
=
t
(
'v104.passbook.pageTitle'
)
setTitle
(
pageTitle
.
value
)
const
ratioListBase
=
ref
([
{
Money
:
5
,
Ratio
:
100000
,
},
{
Money
:
11
,
Ratio
:
150000
,
},
{
Money
:
16
,
Ratio
:
200000
,
},
{
Money
:
21
,
Ratio
:
250000
,
},
])
const
isUseDetails
=
ref
(
false
)
provide
(
DirtionmaryHelper
.
PASSBOOK_DETAILS
,
isUseDetails
)
const
methods
=
{
GetBigRedEnvelope
()
{
let
CustomerId
if
(
Store
.
state
&&
Store
.
state
.
user
?.
userDetail
)
{
CustomerId
=
Store
.
state
.
user
?.
userDetail
?.
customerId
}
$q
.
loading
.
show
()
passbookService
.
GetCustomerBigRedEnvelope
(
CustomerId
)
.
then
(
r
=>
{
let
arr1
=
[
'-'
,
'-'
,
'-'
,
'-'
];
let
newarr
=
[];
if
(
r
.
data
.
resultCode
==
ApiResult
.
SUCCESS
)
{
data
.
datainfo
=
r
.
data
.
data
;
data
.
datainfo
.
JQLRList
.
forEach
((
item
,
index
)
=>
{
data
.
xMonth
.
push
(
item
.
Date
)
if
(
index
<
5
){
data
.
yMoney1
.
push
(
item
.
Money
)
}
if
(
index
>
3
){
newarr
.
push
(
item
.
Money
);
data
.
yMoney2
=
arr1
.
concat
(
newarr
);
}
})
data
.
datainfo
.
RatioList
=
ratioListBase
.
value
data
.
datainfo
.
RatioList
.
forEach
(
item
=>
{
item
.
percent
=
data
.
datainfo
.
Amount
/
item
.
Money
;
item
.
width
=
(
item
.
percent
)
*
100
;
})
console
.
log
(
data
.
datainfo
.
RatioList
)
data
.
yMoney1
=
data
.
yMoney1
.
concat
([
"-"
]);
data
.
MonthObj
=
{
xMonth
:
data
.
xMonth
,
yMoney1
:
data
.
yMoney1
,
yMoney2
:
data
.
yMoney2
let
{
setTitle
}
=
useMetaModule
()
const
{
locale
,
t
}
=
useI18n
()
const
pageTitle
=
inject
(
DirtionmaryHelper
.
PAGE_TITLE_KEY
)
as
any
pageTitle
.
value
=
t
(
'v104.passbook.pageTitle'
)
setTitle
(
pageTitle
.
value
)
const
ratioListBase
=
ref
([
{
Money
:
5
,
Ratio
:
100000
},
{
Money
:
11
,
Ratio
:
150000
},
{
Money
:
16
,
Ratio
:
200000
},
{
Money
:
21
,
Ratio
:
250000
}
])
const
isUseDetails
=
ref
(
false
)
provide
(
DirtionmaryHelper
.
PASSBOOK_DETAILS
,
isUseDetails
)
const
methods
=
{
GetBigRedEnvelope
()
{
let
CustomerId
if
(
Store
.
state
&&
Store
.
state
.
user
?.
userDetail
)
{
CustomerId
=
Store
.
state
.
user
?.
userDetail
?.
customerId
}
$q
.
loading
.
show
()
passbookService
.
GetCustomerBigRedEnvelope
(
CustomerId
)
.
then
(
r
=>
{
let
arr1
=
[
'-'
,
'-'
,
'-'
,
'-'
]
let
newarr
=
[]
if
(
r
.
data
.
resultCode
==
ApiResult
.
SUCCESS
)
{
data
.
datainfo
=
r
.
data
.
data
data
.
datainfo
.
JQLRList
.
forEach
((
item
,
index
)
=>
{
data
.
xMonth
.
push
(
item
.
Date
)
if
(
index
<
5
)
{
data
.
yMoney1
.
push
(
item
.
Money
)
}
}
else
{
message
.
errorMsg
(
r
.
data
.
message
)
if
(
index
>
3
)
{
newarr
.
push
(
item
.
Money
)
data
.
yMoney2
=
arr1
.
concat
(
newarr
)
}
})
data
.
datainfo
.
RatioList
=
ratioListBase
.
value
data
.
datainfo
.
GuestNum
=
data
.
datainfo
.
GuestNum
?
data
.
datainfo
.
GuestNum
:
0
data
.
datainfo
.
RatioList
.
forEach
(
item
=>
{
item
.
percent
=
data
.
datainfo
.
GuestNum
/
item
.
Money
item
.
width
=
item
.
percent
*
100
})
data
.
yMoney1
=
data
.
yMoney1
.
concat
([
'-'
])
data
.
MonthObj
=
{
xMonth
:
data
.
xMonth
,
yMoney1
:
data
.
yMoney1
,
yMoney2
:
data
.
yMoney2
}
$q
.
loading
.
hide
()
})
.
catch
(
r
=>
{
$q
.
loading
.
hide
()
message
.
errorMsg
(
r
.
message
)
})
},
}
else
{
message
.
errorMsg
(
r
.
data
.
message
)
}
$q
.
loading
.
hide
()
})
.
catch
(
r
=>
{
$q
.
loading
.
hide
()
message
.
errorMsg
(
r
.
message
)
})
}
methods
.
GetBigRedEnvelope
()
return
{...
toRefs
(
data
),
isUseDetails
,...
methods
}
}
})
</
script
>
methods
.
GetBigRedEnvelope
()
return
{
...
toRefs
(
data
),
isUseDetails
,
...
methods
}
}
})
</
script
>
<
style
>
.passbook-form
{
width
:
963px
;
/* min-width: 663px; */
.passbook-form
{
width
:
963px
;
/* min-width: 663px; */
}
</
style
>
\ No newline at end of file
</
style
>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment