增加音乐,摇一摇,服务等页面
This commit is contained in:
cansnow
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="u-p-40" style="background-color: #ffffff;">
|
||||
<view class="header u-border-bottom"
|
||||
style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;padding-bottom: 80rpx;">
|
||||
<view>
|
||||
<u-image width="100rpx" height="100rpx" src="./imgs/gaosu.jpg" shape="circle"></u-image>
|
||||
</view>
|
||||
<view style="font-size:17px;margin-top: 20rpx;margin-bottom: 26rpx;color: #000000;">{{target}}</view>
|
||||
<view style="font-size: 28px;color: #000000;font-weight: bold;">{{tradeValue}}</view>
|
||||
</view>
|
||||
<view class="center u-p-t-20">
|
||||
<view>
|
||||
<u-field class="field-class" v-model="tradeStatus" label="当前状态" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view class="u-p-r-18">
|
||||
<u-field class="field-class" v-model="goodName" label="商品" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false"
|
||||
placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="company" label="收单机构" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="settleCompany" label="清算机构" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="paytime" label="支付时间" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="payway" label="支付方式" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view class="u-m-t-16">
|
||||
<u-field class="field-class" v-model="tradeDesc" label="支付说明" :label-width="160"
|
||||
:field-style="fieldTextareaStyle" type="textarea" :border-bottom="false" :clearable="false"
|
||||
placeholder=" "></u-field>
|
||||
</view>
|
||||
<view style="margin-top: -20rpx;">
|
||||
<view>
|
||||
<u-field class="field-class" v-model="tradeCode" label="交易单号" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view class="u-p-r-30">
|
||||
<u-field class="field-class" v-model="shanghu" label="商户单号" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false"
|
||||
placeholder=" "></u-field>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-text-center u-m-t-20 u-m-b-30">
|
||||
<view class="u-flex u-row-center u-col-center">
|
||||
<view>
|
||||
<u-image src="./imgs/tiao-code.jpg" height="150rpx" width="480rpx" mode="aspectFill"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<text>{{shanghuCode}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-20 u-p-40" style="background-color: #ffffff;font-size: 30rpx;">
|
||||
<view style="padding-bottom: 30rpx;">
|
||||
<text>账单服务</text>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-col-center u-p-t-30 u-border-top">
|
||||
<view>
|
||||
<u-icon size="32" name="question-circle" color="#818ba4" label="对订单有疑惑" label-color="#818ba4"
|
||||
margin-left="12" top="4" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view class="">
|
||||
<u-icon size="32" name="coupon" color="#818ba4" label="开发票" label-color="#818ba4" margin-left="12"
|
||||
label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view style="width: 30rpx;"> </view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-col-center u-p-t-30 ">
|
||||
<view class="">
|
||||
<u-icon size="32" name="order" color="#818ba4" label="在此商户的交易" label-color="#818ba4"
|
||||
margin-left="12" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- position: absolute;bottom: 50rpx; -->
|
||||
<view style="width: 100%;text-align:center;padding:50rpx;color:#909399;">
|
||||
<text>本服务由财付通提供</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
recordData:{
|
||||
required:true,
|
||||
type:Object,
|
||||
default:function(){
|
||||
return null
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fieldStyle: {
|
||||
color: '#000000',
|
||||
padding: '0rpx',
|
||||
margin: '0rpx',
|
||||
height: '70rpx',
|
||||
},
|
||||
fieldTextareaStyle: {
|
||||
width:'400rpx',
|
||||
color: '#000000',
|
||||
padding: '0rpx',
|
||||
margin: '0rpx',
|
||||
height: '70rpx',
|
||||
marginBottom:'0rpx',
|
||||
},
|
||||
tradeStatus: '支付成功',
|
||||
paytime: '2022年9月30日20:01:29',
|
||||
goodName: '高速通行费',
|
||||
company: '辽宁省高速公路运营管理有限责任公司',
|
||||
settleCompany: '财付通支付科技有限公司',
|
||||
payway: '交通银行储蓄卡(7961)',
|
||||
tradeDesc: '优先支付方式零钱扣款失败，已自动更换支付方式完成支付',
|
||||
tradeCode: '4200067662202209303339833402',
|
||||
shanghu:'可在支持的商户扫码退款',
|
||||
shanghuCode: '893226056885035008',
|
||||
tradeValue: '-40.00',
|
||||
target: '辽宁高速'
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
console.log("辽宁高速数据",this.recordData);
|
||||
this.tradeValue="-"+Number(this.recordData.tradeValue).toFixed(2);
|
||||
this.paytime=this.formatTimeStr(this.recordData.createTime);
|
||||
if(this.recordData.tradeValue==61){
|
||||
this.paytime="2023年9月29日 22:09:10";
|
||||
this.shanghuCode="893226056885031992";
|
||||
this.tradeCode="4200067662202209303259866205";
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
formatTimeStr:function(timeStr){
|
||||
timeStr=timeStr.replace(/-/g,"/");
|
||||
let cdate=new Date(timeStr);
|
||||
let year=cdate.getFullYear();
|
||||
let yearStr=year+"年";
|
||||
let month= cdate.getMonth()+1;
|
||||
let day=cdate.getDate();
|
||||
let hour= cdate.getHours();
|
||||
let min=cdate.getMinutes();
|
||||
let s=cdate.getSeconds();
|
||||
let monthStr=month+"月";
|
||||
let dayStr=day+"日";
|
||||
let hourStr=hour+":";
|
||||
let minStr=min+":";
|
||||
let sStr=s;
|
||||
if(hour<10){
|
||||
hourStr="0"+hour+":";
|
||||
}
|
||||
if(min<10){
|
||||
minStr="0"+min+":";
|
||||
}
|
||||
if(s<10){
|
||||
sStr="0"+s;
|
||||
}
|
||||
let formatStr=yearStr+monthStr+dayStr+" "+hourStr+minStr+sStr;
|
||||
return formatStr;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.field-class {
|
||||
color: #909399 !important;
|
||||
font-size: 28rpx !important;
|
||||
margin: 0rpx !important;
|
||||
padding: 0rpx !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="u-p-40" style="background-color: #ffffff;">
|
||||
<view class="header u-border-bottom"
|
||||
style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;padding-bottom: 80rpx;">
|
||||
<view>
|
||||
<u-image width="100rpx" height="100rpx" src="/static/image/mt.jpg"
|
||||
shape="circle"></u-image>
|
||||
</view>
|
||||
<view style="font-size:17px;margin-top: 20rpx;margin-bottom: 26rpx;color: #000000;">{{target}}</view>
|
||||
<view style="font-size: 28px;color: #000000;font-weight: bold;">{{tradeValue}}</view>
|
||||
</view>
|
||||
<view class="center u-p-t-20">
|
||||
<view>
|
||||
<u-field class="field-class" v-model="tradeStatus" label="当前状态" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="paytime" label="支付时间" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view class="u-p-r-18">
|
||||
<u-field class="field-class" v-model="goodName" label="商品" :label-width="160"
|
||||
:field-style="fieldStyle" type="text" :border-bottom="false" :clearable="false"
|
||||
placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="company" label="商户全称" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="settleCompany" label="收单机构" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
<view style="padding-left: 165rpx;color: #909399;">
|
||||
<text>由网联清算有限公司提供收款清算服务</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<u-field class="field-class" v-model="payway" label="支付方式" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="tradeCode" label="交易单号" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view class="u-p-r-30">
|
||||
<u-field class="field-class" v-model="shanghu" label="商户单号" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false"
|
||||
placeholder=" "></u-field>
|
||||
</view>
|
||||
<view class="u-text-center u-m-t-20 u-m-b-30">
|
||||
<view class="u-flex u-row-center u-col-center">
|
||||
<view>
|
||||
<u-image src="./imgs/tiao-code.jpg" height="150rpx" width="480rpx" mode="aspectFill"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<text>{{shanghuCode}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="u-m-t-20 u-p-40 u-flex u-row-between u-col-center"
|
||||
style="background-color: #ffffff;font-size: 30rpx;">
|
||||
<view>商家小程序</view>
|
||||
<view class="u-flex u-row-between u-col-center">
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view class="u-m-r-10">
|
||||
<u-image width="36rpx" height="36rpx" src="/static/image/xiaochengxu.png"></u-image>
|
||||
</view>
|
||||
<view style="color: #909399;">
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view><text>美团</text></view>
|
||||
<view class="u-m-r-10 u-m-l-10">
|
||||
<u-line color="#909399" direction="col" length="30rpx" />
|
||||
</view>
|
||||
<view>
|
||||
<view>外卖美食买菜酒店电影</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>购物</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-l-30">
|
||||
<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<view class="u-m-t-20 u-p-40" style="background-color: #ffffff;font-size: 30rpx;">
|
||||
<view style="padding-bottom: 30rpx;">
|
||||
<text>账单服务</text>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-col-center u-p-t-30 u-border-top">
|
||||
<view>
|
||||
<u-icon size="32" name="question-circle" color="#818ba4" label="对订单有疑惑" label-color="#818ba4"
|
||||
margin-left="12" top="4" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view class="">
|
||||
<u-icon size="32" name="order" color="#818ba4" label="在此商户的交易" label-color="#818ba4"
|
||||
margin-left="12" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view style="width: 30rpx;"> </view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="width: 100%;text-align:center;padding:50rpx;color:#909399;">
|
||||
<text>本服务由财付通提供</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fieldStyle: {
|
||||
//width:'460rpx',
|
||||
color: '#000000',
|
||||
padding: '0rpx',
|
||||
margin: '0rpx',
|
||||
height: '70rpx',
|
||||
},
|
||||
tradeStatus: '支付成功',
|
||||
goodName: '美团收银909700180095643047',
|
||||
company: '商户_李敏',
|
||||
settleCompany: '北京钱袋宝支付技术有限公司',
|
||||
paytime: '2022年9月30日 12:50:56',
|
||||
payway: '零钱',
|
||||
tradeCode: '4200066259202209304888262262',
|
||||
shanghu:'可在支持的商户扫码退款',
|
||||
shanghuCode: '0461368604225767873608013',
|
||||
tradeValue: '-74.08',
|
||||
target: '万象三顾冒菜'
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.field-class {
|
||||
color: #909399 !important;
|
||||
font-size: 28rpx !important;
|
||||
margin: 0rpx !important;
|
||||
padding: 0rpx !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="u-p-40" style="background-color: #ffffff;">
|
||||
<view class="header u-border-bottom"
|
||||
style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;padding-bottom: 80rpx;">
|
||||
<view>
|
||||
<u-image width="100rpx" height="100rpx" src="/static/image/mycenter/default-record-icon.jpg"
|
||||
shape="circle"></u-image>
|
||||
</view>
|
||||
<view style="font-size:17px;margin-top: 20rpx;margin-bottom: 26rpx;color: #000000;">
|
||||
{{target}}
|
||||
</view>
|
||||
<view style="font-size: 28px;color: #000000;font-weight: bold;">{{tradeValue}}</view>
|
||||
</view>
|
||||
<view class="center u-p-t-20">
|
||||
<view>
|
||||
<u-field class="field-class" v-model="tradeStatus" label="当前状态" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="receiveRemark" label="收款方备注" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="transferWay" label="支付方式" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="transferTime" label="转账时间" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="transferCode" label="转账单号" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-20 u-p-40" style="background-color: #ffffff;font-size: 30rpx;">
|
||||
<view style="padding-bottom: 30rpx;">
|
||||
<text>账单服务</text>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-col-center u-p-t-30 u-border-top">
|
||||
<view>
|
||||
<u-icon size="32" name="question-circle" color="#818ba4" label="对订单有疑惑" label-color="#818ba4"
|
||||
margin-left="12" top="4" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view class="">
|
||||
<u-icon size="22" name="/static/image/bill/shoukuan.png" color="#818ba4" label="发起群收款"
|
||||
label-color="#818ba4" margin-left="12" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view style="width: 30rpx;"> </view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-20 u-p-40" style="background-color: #ffffff;font-size: 30rpx;">
|
||||
<view style="padding-bottom: 30rpx;">
|
||||
<text>收款方服务</text>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-col-center u-p-t-30 u-border-top">
|
||||
<view>
|
||||
<u-icon size="32" name="/static/image/bill/minpian.png" color="#818ba4" label="收款方名片"
|
||||
label-color="#818ba4" margin-left="12" top="4" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view class="">
|
||||
|
||||
</view>
|
||||
<view style="width: 30rpx;"> </view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view style="width: 100%;text-align:center;padding:50rpx;color:#909399;">
|
||||
<text>本服务由财付通提供</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
recordData:{
|
||||
required:true,
|
||||
type:Object,
|
||||
default:function(){
|
||||
return null
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fieldStyle: {
|
||||
color: '#000000',
|
||||
padding: '0rpx',
|
||||
margin: '0rpx',
|
||||
height: '70rpx',
|
||||
},
|
||||
target: '扫二维码付款-铁东区品江渔斑鱼火锅庄',
|
||||
tradeValue: '-1500.00',
|
||||
tradeStatus: '支付成功',
|
||||
receiveRemark: '二维码收款',
|
||||
transferWay: '零钱',
|
||||
transferTime: '2022年09月29日20:02:11',
|
||||
transferCode: '10000499012022092900281292669093'
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
console.log("扫码付款数据",this.recordData);
|
||||
this.tradeValue="-"+Number(this.recordData.tradeValue).toFixed(2);
|
||||
this.transferTime=this.formatTimeStr(this.recordData.createTime);
|
||||
this.target=this.recordData.tradeTitle;
|
||||
if(this.recordData.tradeValue==10){
|
||||
this.transferTime="2023年9月30日 14:02:12";
|
||||
this.transferCode="4200067662202209303259866205";
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
formatTimeStr:function(timeStr){
|
||||
timeStr=timeStr.replace(/-/g,"/");
|
||||
let cdate=new Date(timeStr);
|
||||
let year=cdate.getFullYear();
|
||||
let yearStr=year+"年";
|
||||
let month= cdate.getMonth()+1;
|
||||
let day=cdate.getDate();
|
||||
let hour= cdate.getHours();
|
||||
let min=cdate.getMinutes();
|
||||
let s=cdate.getSeconds();
|
||||
let monthStr=month+"月";
|
||||
let dayStr=day+"日";
|
||||
let hourStr=hour+":";
|
||||
let minStr=min+":";
|
||||
let sStr=s;
|
||||
if(hour<10){
|
||||
hourStr="0"+hour+":";
|
||||
}
|
||||
if(min<10){
|
||||
minStr="0"+min+":";
|
||||
}
|
||||
if(s<10){
|
||||
sStr="0"+s;
|
||||
}
|
||||
let formatStr=yearStr+monthStr+dayStr+" "+hourStr+minStr+sStr;
|
||||
return formatStr;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.field-class {
|
||||
color: #909399 !important;
|
||||
font-size: 28rpx !important;
|
||||
margin: 0rpx !important;
|
||||
padding: 0rpx !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="u-p-40" style="background-color: #ffffff;">
|
||||
<view class="header u-border-bottom"
|
||||
style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;padding-bottom: 80rpx;">
|
||||
<view>
|
||||
<u-image width="100rpx" height="100rpx" src="./imgs/shihua.jpg"
|
||||
shape="circle"></u-image>
|
||||
</view>
|
||||
<view style="font-size:17px;margin-top: 20rpx;margin-bottom: 26rpx;color: #000000;">{{target}}</view>
|
||||
<view style="font-size: 28px;color: #000000;font-weight: bold;">{{tradeValue}}</view>
|
||||
</view>
|
||||
<view class="center u-p-t-20">
|
||||
<view>
|
||||
<u-field class="field-class" v-model="tradeStatus" label="当前状态" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="paytime" label="支付时间" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view class="u-p-r-18">
|
||||
<u-field class="field-class" v-model="goodName" label="商品" :label-width="160"
|
||||
:field-style="fieldStyle" type="text" :border-bottom="false" :clearable="false"
|
||||
placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="company" label="商户全称" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="settleCompany" label="收单机构" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
<view style="padding-left: 165rpx;color: #909399;">
|
||||
<text>由中国银联股份有限公司提供收款清算服务</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<u-field class="field-class" v-model="payway" label="支付方式" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="tradeCode" label="交易单号" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view class="u-p-r-30">
|
||||
<u-field class="field-class" v-model="shanghuCode" label="商户单号" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false"
|
||||
placeholder=" "></u-field>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-20 u-p-40 u-flex u-row-between u-col-center"
|
||||
style="background-color: #ffffff;font-size: 30rpx;">
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view>商家订单中心</view>
|
||||
<view style="margin-left: 30rpx;background-color: #f04131;color: #ffffff;border-radius: 30rpx;padding: 5rpx 18rpx;">
|
||||
<text>NEW</text>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="u-m-l-30">
|
||||
<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-20 u-p-40" style="background-color: #ffffff;font-size: 30rpx;">
|
||||
<view style="padding-bottom: 30rpx;">
|
||||
<text>账单服务</text>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-col-center u-p-t-30 u-border-top">
|
||||
<view>
|
||||
<u-icon size="32" name="question-circle" color="#818ba4" label="对订单有疑惑" label-color="#818ba4"
|
||||
margin-left="12" top="4" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view class="">
|
||||
<u-icon size="32" name="order" color="#818ba4" label="在此商户的交易" label-color="#818ba4"
|
||||
margin-left="12" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view style="width: 30rpx;"> </view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="width: 100%;text-align:center;padding:50rpx;color:#909399;">
|
||||
<text>本服务由财付通提供</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fieldStyle: {
|
||||
//width:'460rpx',
|
||||
color: '#000000',
|
||||
padding: '0rpx',
|
||||
margin: '0rpx',
|
||||
height: '70rpx',
|
||||
},
|
||||
tradeStatus: '支付成功',
|
||||
goodName: '智慧U站215元',
|
||||
company: '鞍山市中金石油经销有限公司',
|
||||
settleCompany: '汇元银通(北京)在线支付技术有限公司',
|
||||
paytime: '2022年9月30日18:36:09',
|
||||
payway: '交通银行储蓄卡(7961)',
|
||||
tradeCode: '4200001559202209307401263465',
|
||||
shanghuCode: '40822093001788196557',
|
||||
tradeValue: '-215.00',
|
||||
target: '亚孚石化中金站'
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.field-class {
|
||||
color: #909399 !important;
|
||||
font-size: 28rpx !important;
|
||||
margin: 0rpx !important;
|
||||
padding: 0rpx !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="u-p-40" style="background-color: #ffffff;">
|
||||
<view class="header u-border-bottom"
|
||||
style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;padding-bottom: 80rpx;">
|
||||
<view>
|
||||
<u-image width="100rpx" height="100rpx" src="./imgs/xinrun.jpg"
|
||||
shape="circle"></u-image>
|
||||
</view>
|
||||
<view style="font-size:17px;margin-top: 20rpx;margin-bottom: 26rpx;color: #000000;">{{target}}</view>
|
||||
<view style="font-size: 28px;color: #000000;font-weight: bold;">{{tradeValue}}</view>
|
||||
</view>
|
||||
<view class="center u-p-t-20">
|
||||
<view>
|
||||
<u-field class="field-class" v-model="tradeStatus" label="当前状态" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="paytime" label="支付时间" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view class="u-p-r-18">
|
||||
<u-field class="field-class" v-model="goodName" label="商品" :label-width="160"
|
||||
:field-style="fieldStyle" type="text" :border-bottom="false" :clearable="false"
|
||||
placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="company" label="商户全称" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="settleCompany" label="收单机构" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<u-field class="field-class" v-model="payway" label="支付方式" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="tradeCode" label="交易单号" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view class="u-p-r-30">
|
||||
<u-field class="field-class" v-model="shanghuCode" label="商户单号" :label-width="160"
|
||||
:field-style="fieldStyle" type="textarea" :border-bottom="false" :clearable="false"
|
||||
placeholder=" "></u-field>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-20 u-p-40 u-flex u-row-between u-col-center"
|
||||
style="background-color: #ffffff;font-size: 30rpx;">
|
||||
<view>商家小程序</view>
|
||||
<view class="u-flex u-row-between u-col-center">
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view class="u-m-r-10">
|
||||
<u-image width="36rpx" height="36rpx" src="/static/image/xiaochengxu.png"></u-image>
|
||||
</view>
|
||||
<view style="color: #909399;">
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view><text>润欣商业发展鞍山有限公司</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-l-30">
|
||||
<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-20 u-p-40" style="background-color: #ffffff;font-size: 30rpx;">
|
||||
<view style="padding-bottom: 30rpx;">
|
||||
<text>账单服务</text>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-col-center u-p-t-30 u-border-top">
|
||||
<view>
|
||||
<u-icon size="32" name="question-circle" color="#818ba4" label="对订单有疑惑" label-color="#818ba4"
|
||||
margin-left="12" top="4" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view class="">
|
||||
<u-icon size="32" name="order" color="#818ba4" label="在此商户的交易" label-color="#818ba4"
|
||||
margin-left="12" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view style="width: 30rpx;"> </view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="width: 100%;text-align:center;padding:50rpx;color:#909399;">
|
||||
<text>本服务由财付通提供</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fieldStyle: {
|
||||
//width:'460rpx',
|
||||
color: '#000000',
|
||||
padding: '0rpx',
|
||||
margin: '0rpx',
|
||||
height: '70rpx',
|
||||
},
|
||||
tradeStatus: '支付成功',
|
||||
goodName: '小程序-停车场支付',
|
||||
company: '润欣商业发展(鞍山) 有限公司',
|
||||
settleCompany: '财付通支付科技有限公司',
|
||||
paytime: '2022年9月30日13:33:13',
|
||||
payway: '零钱',
|
||||
tradeCode: '4200001569202209306188471713',
|
||||
shanghuCode: 'ASTCWX16645159870220d5eb1578fe70',
|
||||
tradeValue: '-8.00',
|
||||
target: '润欣商业发展 (鞍山) 有限公司'
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.field-class {
|
||||
color: #909399 !important;
|
||||
font-size: 28rpx !important;
|
||||
margin: 0rpx !important;
|
||||
padding: 0rpx !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="u-p-40" style="background-color: #ffffff;">
|
||||
<view class="header u-border-bottom"
|
||||
style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;padding-bottom: 80rpx;">
|
||||
<view>
|
||||
<u-image width="100rpx" height="100rpx" :src="recordData.tradeIcon"
|
||||
shape="circle"></u-image>
|
||||
</view>
|
||||
<view style="font-size:17px;margin-top: 20rpx;margin-bottom: 26rpx;color: #000000;">
|
||||
{{target}}
|
||||
</view>
|
||||
<view style="font-size: 28px;color: #000000;font-weight: bold;">{{tradeValue}}</view>
|
||||
</view>
|
||||
<view class="center u-p-t-20">
|
||||
<view>
|
||||
<u-field class="field-class" v-model="tradeStatus" label="当前状态" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="receiveRemark" label="转账说明" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="transferTime" label="转账时间" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="transferWay" label="支付方式" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="transferCode" label="转账单号" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-20 u-p-40" style="background-color: #ffffff;font-size: 30rpx;">
|
||||
<view style="padding-bottom: 30rpx;">
|
||||
<text>账单服务</text>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-col-center u-p-t-30 u-border-top">
|
||||
<view>
|
||||
<u-icon size="32" name="question-circle" color="#818ba4" label="对订单有疑惑" label-color="#818ba4"
|
||||
margin-left="12" top="4" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view class="">
|
||||
<u-icon size="34" name="chat" color="#818ba4" label="定位到聊天位置"
|
||||
label-color="#818ba4" margin-left="12" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view style="width: 30rpx;"> </view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-col-center u-p-t-30">
|
||||
<view>
|
||||
<u-icon size="32" name="star" color="#818ba4" label="申请转账电子凭证" label-color="#818ba4"
|
||||
margin-left="12" top="4" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view class="">
|
||||
<u-icon size="34" name="rmb-circle" color="#818ba4" label="查看往来转账"
|
||||
label-color="#818ba4" margin-left="12" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view style="width: 30rpx;"> </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
recordData:{
|
||||
required:true,
|
||||
type:Object,
|
||||
default:function(){
|
||||
return null
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fieldStyle: {
|
||||
color: '#000000',
|
||||
padding: '0rpx',
|
||||
margin: '0rpx',
|
||||
height: '70rpx',
|
||||
},
|
||||
target: '转账-转给祁晶 华润质量',
|
||||
tradeValue: '-1800.00',
|
||||
tradeStatus: '对方已收钱',
|
||||
receiveRemark: '微信转账',
|
||||
transferWay: '交通银行储蓄卡(7961)',
|
||||
transferTime: '2022年9月30日11:04:09',
|
||||
transferCode: '1000050001202209300712408714345'
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
console.log("转账付款数据",this.recordData);
|
||||
this.target=this.recordData.tradeTitle;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.field-class {
|
||||
color: #909399 !important;
|
||||
font-size: 28rpx !important;
|
||||
margin: 0rpx !important;
|
||||
padding: 0rpx !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :is-back="true" title=" " :title-bold="true" :title-size="34" :background="{ background: '#ffffff'}"
|
||||
back-icon-name="close" back-icon-size="32" title-color="#404133" :border-bottom="false">
|
||||
</u-navbar>
|
||||
|
||||
<template v-if="recordData.tradeTitle.indexOf('辽宁高速')!=-1">
|
||||
<liaoning-gaosu :recordData="recordData"></liaoning-gaosu>
|
||||
</template>
|
||||
<template v-else-if="recordData.tradeTitle.indexOf('三顾冒菜')!=-1">
|
||||
<sangumaocai></sangumaocai>
|
||||
</template>
|
||||
<template v-else-if="recordData.tradeTitle.indexOf('亚孚石化')!=-1">
|
||||
<shihua></shihua>
|
||||
</template>
|
||||
<template v-else-if="recordData.tradeTitle.indexOf('润欣')!=-1">
|
||||
<xinrun></xinrun>
|
||||
</template>
|
||||
<template v-else-if="recordData.tradeTitle.indexOf('转账')!=-1">
|
||||
<zhuanzhang :recordData="recordData"></zhuanzhang>
|
||||
<view style="width: 100%;text-align:center;padding:50rpx;color:#909399;position: absolute;bottom: 50rpx;">
|
||||
<text>本服务由财付通提供</text>
|
||||
</view>
|
||||
</template>
|
||||
<!-- v-if="recordData.tradeTitle.indexOf('扫二维码')!=-1" -->
|
||||
<template v-else>
|
||||
<saoma :recordData="recordData"></saoma>
|
||||
<view style="width: 100%;text-align:center;padding:50rpx;color:#909399;position: absolute;bottom: 50rpx;">
|
||||
<text>本服务由财付通提供</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import saoma from './components/saoma.vue';
|
||||
import liaoningGaosu from './components/liaoning-gaosu.vue';
|
||||
import sangumaocai from './components/sangumaocai.vue';
|
||||
import shihua from './components/shihua.vue';
|
||||
import xinrun from './components/xinrunshangye.vue';
|
||||
import zhuanzhang from './components/zhuanzhang.vue';
|
||||
export default {
|
||||
components:{
|
||||
saoma,liaoningGaosu,sangumaocai,shihua,xinrun,zhuanzhang
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
recordData:null,
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
let that=this;
|
||||
let paramVal= option.record;
|
||||
if(paramVal!=null&¶mVal!=undefined&¶mVal.length>0){
|
||||
that.recordData=JSON.parse(decodeURIComponent(paramVal));
|
||||
console.log("recordData",that.recordData);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.field-class {
|
||||
color: #909399 !important;
|
||||
font-size: 28rpx !important;
|
||||
margin: 0rpx !important;
|
||||
padding: 0rpx !important;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
page {
|
||||
background-color: #efefef;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,360 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :background="{ background: '#efefef'}" :border-bottom="true" :is-back="false">
|
||||
<view style=" display: flex;flex-direction: row;justify-content: space-between;align-items: center; flex: 1; padding: 0 30rpx; ">
|
||||
<view style="width: 150rpx;" @click="goBack()">
|
||||
<u-icon name="close" :size="32"></u-icon>
|
||||
</view>
|
||||
<view @click="addRecord()" style="color:#404133;font-size: 34rpx;font-weight: bold;text-align: center;">
|
||||
<text>账单</text>
|
||||
</view>
|
||||
<view style="width: 150rpx;">
|
||||
<text style="font-size: 34rpx;color: #000000;" @click="serviceCenter()">客服中心</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<view>
|
||||
<view class="u-flex u-row-between u-col-center u-border-bottom"
|
||||
style="padding:34rpx 30rpx;">
|
||||
<view @click="openTradeTypePop()" style="background-color:#e3e3e3;height:60rpx;line-height: 50rpx; border-radius: 30rpx;padding: 0rpx 16rpx;">
|
||||
<u-icon name="arrow-down-fill" size="16" color="#666666"
|
||||
label="全部账单" label-size="26rpx" label-pos="left" margin-right="6rpx">
|
||||
</u-icon>
|
||||
</view>
|
||||
<view @click="toBillStatistics()">
|
||||
<u-icon name="arrow-right" color="#acb0b7"
|
||||
label="统计" label-color="#acb0b7" label-pos="left"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view style="padding:34rpx 30rpx;background-color:#efefef;width:100%;"
|
||||
class="u-flex u-row-between u-col-center">
|
||||
<view >
|
||||
<u-icon name="arrow-down" size="24" color="#333333" @click="openTimePicker"
|
||||
:label="activeMonthObj.currentYear+'年'+activeMonthObj.currentMonth+'月'"
|
||||
label-color="#333333"
|
||||
label-size="30rpx" label-pos="left"
|
||||
margin-right="6rpx">
|
||||
</u-icon>
|
||||
</view>
|
||||
<view class="u-flex u-row-left u-col-center" style="color:#acb0b7;" @click="openUpdateModel()">
|
||||
<view class="u-m-r-16">支出¥{{Number(activeMonthObj.outputAmount).toFixed(2)}}</view>
|
||||
<view>收入¥{{Number(activeMonthObj.inputAmount).toFixed(2)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="background-color:#ffffff;width: 100%;">
|
||||
<scroll-view :scroll-x="false" :scroll-y="true" class="hidden-scroll-bar"
|
||||
:style="'width: 100%;height:'+scrollviewHeight+'px'"
|
||||
:scroll-into-view="scrollIntoViewId"
|
||||
@scrolltoupper="scrolltoUpper"
|
||||
@scrolltolower="scrolltolower">
|
||||
<template v-if="activeMonthObj.recordList&&activeMonthObj.recordList.length>0">
|
||||
<view v-for="(record,index) in activeMonthObj.recordList" :key="index"
|
||||
:id="'record_'+index"
|
||||
class="u-flex u-row-between u-col-center"
|
||||
style="width: 100%;">
|
||||
<view style="width: 18%;padding: 30rpx 20rpx 30rpx 30rpx;">
|
||||
<u-image :src="record.tradeIcon" width="90rpx" height="90rpx"
|
||||
shape="circle" bg-color="#909399"></u-image>
|
||||
</view>
|
||||
<view style="width: 82%;padding: 30rpx 30rpx 30rpx 0rpx"
|
||||
class="u-flex u-row-between u-col-center u-border-bottom">
|
||||
<view @click="showUpdatePop(record,index)">
|
||||
<view style="font-size: 34rpx;font-weight: 500;width:400rpx" class="u-line-1">{{record.tradeTitle}}</view>
|
||||
<view style="font-size: 28rpx;color: #909399;margin-top:6rpx;">{{formatTimeStr(record.createTime)}}</view>
|
||||
</view>
|
||||
<view class="u-p-b-40" @click="toDetail(record)">
|
||||
<text v-if="record.tradeDirection=='out'"
|
||||
style="color: #000000;font-weight: bold;font-size: 32rpx;">{{"-"+Number(record.tradeValue).toFixed(2)}}</text>
|
||||
<text v-if="record.tradeDirection=='in'"
|
||||
style="color: #f29100;font-weight: bold;font-size: 32rpx;">{{"+"+Number(record.tradeValue).toFixed(2)}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 当前月份统计信息修改 -->
|
||||
<u-popup v-model="currentMonthPopFlag" mode="center" :mask-close-able="false" negative-top="200" closeable>
|
||||
<view class="u-p-30">
|
||||
<view class="u-m-t-30">
|
||||
<u-form :model="activeMonthObj" ref="activeMonthObj" label-width="150rpx">
|
||||
<u-form-item label="当前年度">
|
||||
<u-input v-model="activeMonthObj.currentYear" type="number" placeholder="月份"/>
|
||||
</u-form-item>
|
||||
<u-form-item label="当前月份">
|
||||
<u-input v-model="activeMonthObj.currentMonth" type="number" placeholder="月份"/>
|
||||
</u-form-item>
|
||||
<u-form-item label="当月收入">
|
||||
<u-input v-model="activeMonthObj.inputAmount" type="number" placeholder="本月收入"/>
|
||||
</u-form-item>
|
||||
<u-form-item label="当月支出">
|
||||
<u-input v-model="activeMonthObj.outputAmount" type="number" placeholder="本月支出"/>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
</view>
|
||||
<view class="u-p-30">
|
||||
<view>
|
||||
<u-button type="success" @click="submitUpdate">确定</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<!-- 月份查询筛选-->
|
||||
<u-picker mode="time" v-model="timePickerShow" :params="timeParams"
|
||||
confirm-color="#3c2e55" confirm-text="确定" @confirm="timePickerConfirm"
|
||||
:show-time-tag="false"></u-picker>
|
||||
|
||||
<!-- 新增或者修改时间选择器 -->
|
||||
<!-- 消费类型 -->
|
||||
<u-popup v-model="tradeTypePopFlag" mode="bottom"
|
||||
:border-radius="16" close-icon-color="#000000"
|
||||
:closeable="true" close-icon-pos="top-left">
|
||||
<view style="width: 100%;padding: 20rpx;background-color: #f0f0f0;">
|
||||
<view style="margin-top: 20rpx; text-align: center;font-weight: bold;">选择筛选项</view>
|
||||
<view style="margin-top: 50rpx;text-align: center;padding: 0rpx 20rpx;margin-bottom: 100rpx;">
|
||||
<u-row>
|
||||
<u-col :span="4" v-for="(tradeTypeItem,index) in tradeTypeList" :key="index">
|
||||
<view v-if="index==4"
|
||||
class="trade-type trade-type-4"
|
||||
:class="currentTradeType.value==tradeTypeItem.value?'trade-type trade-type-4 trade-type-active':'trade-type trade-type-4'"
|
||||
@click="selectTradeType(tradeTypeItem)">
|
||||
{{tradeTypeItem.title}}
|
||||
</view>
|
||||
<view v-else @click="selectTradeType(tradeTypeItem)"
|
||||
:class="currentTradeType.value==tradeTypeItem.value?'trade-type trade-type-active':'trade-type'">
|
||||
{{tradeTypeItem.title}}
|
||||
</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import billList from '@/util/billList';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollviewHeight:0,
|
||||
scrollIntoViewId:'',
|
||||
currentMonthIndex:new Date().getMonth()+1, //当前月份
|
||||
currentYearIndex: new Date().getFullYear(),//当期年份
|
||||
currentMonthPopFlag:false,//当前月份信息修改弹窗控制器
|
||||
//当前月份数据
|
||||
activeMonthObj:{
|
||||
currentYear:2022,
|
||||
currentMonth:5,
|
||||
outputAmount:0.00,
|
||||
inputAmount:0.00,
|
||||
recordList:[]
|
||||
},
|
||||
timePickerShow:false, //时间选择器开关
|
||||
//时间参数
|
||||
timeParams:{
|
||||
year: true,
|
||||
month: true,
|
||||
day: false,
|
||||
hour: false,
|
||||
minute: false,
|
||||
second: false,
|
||||
timestamp: true,
|
||||
},
|
||||
tradeTypePopFlag:false,
|
||||
tradeTypeList:[
|
||||
{"title":"全部",value:"0"},{"title":"红包",value:"1"},{"title":"转账",value:"2"},
|
||||
{"title":"群收款",value:"3"},{"title":"二维码收付款",value:"4"},{"title":"商户消费",value:"5"},
|
||||
{"title":"充值提现",value:"6"},{"title":"信用卡还款",value:"7"},{"title":"有退款",value:"8"},
|
||||
],
|
||||
currentTradeType:{title:'全部',value:"0"}
|
||||
};
|
||||
},
|
||||
onLoad:function(){
|
||||
let that=this;
|
||||
this.scrollviewHeight= that.$u.sys().windowHeight*0.76; // 0.828
|
||||
this.getRecordList();
|
||||
},
|
||||
methods:{
|
||||
goBack(){
|
||||
uni.navigateBack();
|
||||
},
|
||||
openTimePicker:function(){
|
||||
let that=this;
|
||||
that.timePickerShow=true;
|
||||
},
|
||||
timePickerConfirm:function(obj){
|
||||
let year=obj.year;
|
||||
let monthStr=obj.month;
|
||||
let month= (new Date(obj.timestamp*1000)).getMonth()+1;
|
||||
console.log("选择的月份",month);
|
||||
this.currentMonthIndex=month;
|
||||
this.currentYearIndex=year;
|
||||
this.getRecordList();
|
||||
},
|
||||
//获取缓存记录
|
||||
getRecordList:function(){
|
||||
this.activeMonthObj.recordList=[];
|
||||
this.activeMonthObj.inputAmount=0.00;
|
||||
this.activeMonthObj.outputAmount=0.00;
|
||||
this.activeMonthObj.currentMonth=this.currentMonthIndex;
|
||||
this.activeMonthObj.currentYear=this.currentYearIndex;
|
||||
let month=this.currentMonthIndex<10?("0"+this.currentMonthIndex):this.currentMonthIndex;
|
||||
let param={
|
||||
timeDuring:this.currentYearIndex+"-"+month,
|
||||
tradeType:this.currentTradeType.value=='0'?'':this.currentTradeType.value,
|
||||
}
|
||||
console.log("获取账单记录参数",param);
|
||||
this.activeMonthObj=JSON.parse(JSON.stringify(billList.tempBillList[0]));
|
||||
console.log("this.activeMonthObj",this.activeMonthObj);
|
||||
this.$forceUpdate();
|
||||
return;
|
||||
/* this.$u.api.imUser.getUserAccountRecordList(param).then(res => {
|
||||
if(res.code==200&&res.data){
|
||||
this.activeMonthObj.recordList=res.data.recordList;
|
||||
this.activeMonthObj.inputAmount=res.data.monthAccountInfo.inputAmount;
|
||||
this.activeMonthObj.outputAmount=res.data.monthAccountInfo.outputAmount;
|
||||
console.log("获取账单记录结果",this.activeMonthObj);
|
||||
}else{
|
||||
|
||||
}
|
||||
}) */
|
||||
},
|
||||
//打开修改弹窗
|
||||
openUpdateModel:function(){
|
||||
this.currentMonthPopFlag=true;
|
||||
},
|
||||
//提交修改
|
||||
submitUpdate:function(){
|
||||
this.currentMonthPopFlag=false;
|
||||
},
|
||||
//打开新增记录弹窗
|
||||
addRecord:function(){
|
||||
let that=this;
|
||||
that.addPopFlag=true;
|
||||
},
|
||||
serviceCenter(){
|
||||
this.$u.route({
|
||||
url:'/pages/tabbar/my/service/my-bill-question',
|
||||
});
|
||||
},
|
||||
toDetail:function(record){
|
||||
let that=this;
|
||||
this.$u.route({
|
||||
url:'/pages/tabbar/my/service/my-bill-detail',
|
||||
params:{
|
||||
record:encodeURIComponent(JSON.stringify(record))
|
||||
}
|
||||
});
|
||||
},
|
||||
scrolltoUpper:function(){
|
||||
this.currentMonthIndex=new Date().getMonth()+1; //当前月份
|
||||
this.currentYearIndex=new Date().getFullYear();//当期年份
|
||||
this.getRecordList();
|
||||
},
|
||||
//监听滚动
|
||||
scrolltolower:function(){
|
||||
let that=this;
|
||||
console.log("监听到页面滚动到底部");
|
||||
this.currentMonthIndex=this.currentMonthIndex-1;
|
||||
let month=this.currentMonthIndex<10?"0"+this.currentMonthIndex:this.currentMonthIndex;
|
||||
let param={
|
||||
timeDuring:this.currentYearIndex+"-"+month,
|
||||
tradeType:this.currentTradeType.value=='0'?'6':this.currentTradeType.value,
|
||||
}
|
||||
console.log("获取上一个月的账单记录参数",param);
|
||||
that.getRecordList();
|
||||
return;
|
||||
this.$u.api.imUser.getUserAccountRecordList(param).then(res => {
|
||||
console.log("获取上一个月的账单记录结果",res);
|
||||
if(res.code==200&&res.data){
|
||||
let recordList=res.data.recordList;
|
||||
if(recordList!=null&&recordList.length>0){
|
||||
that.activeMonthObj.recordList=that.activeMonthObj.recordList.concat(recordList);
|
||||
that.activeMonthObj.inputAmount=res.data.monthAccountInfo.inputAmount;
|
||||
that.activeMonthObj.outputAmount=res.data.monthAccountInfo.outputAmount;
|
||||
that.activeMonthObj.currentMonth=this.currentMonthIndex;
|
||||
}
|
||||
}else{
|
||||
this.currentMonthIndex=this.currentMonthIndex+1;
|
||||
}
|
||||
})
|
||||
},
|
||||
formatTimeStr:function(timeStr){
|
||||
//console.log("timeStr",timeStr);
|
||||
timeStr=timeStr.replace(/-/g,"/");
|
||||
let cdate=new Date(timeStr);
|
||||
let month= cdate.getMonth()+1;
|
||||
//console.log("month",month);
|
||||
let day=cdate.getDate();
|
||||
let hour= cdate.getHours();
|
||||
let min=cdate.getMinutes();
|
||||
let monthStr=month+"月";
|
||||
let dayStr=day+"日";
|
||||
let hourStr=hour+":";
|
||||
let minStr=min;
|
||||
/* if(month<10){
|
||||
monthStr="0"+month+"月";
|
||||
}
|
||||
if(day<10){
|
||||
dayStr="0"+day+"日";
|
||||
} */
|
||||
if(hour<10){
|
||||
hourStr="0"+hour+":";
|
||||
}
|
||||
if(min<10){
|
||||
minStr="0"+min;
|
||||
}
|
||||
let formatStr=monthStr+dayStr+" "+hourStr+minStr;
|
||||
//console.log("formatStr",formatStr);
|
||||
return formatStr;
|
||||
},
|
||||
openTradeTypePop:function(){
|
||||
let that=this;
|
||||
that.tradeTypePopFlag=true;
|
||||
},
|
||||
selectTradeType:function(tradeItem){
|
||||
this.currentTradeType=tradeItem;
|
||||
this.tradeTypePopFlag=false;
|
||||
this.getRecordList();
|
||||
},
|
||||
toBillStatistics:function(){
|
||||
this.$u.route({
|
||||
url:'/pages/tabbar/my/service/my-bill-statistics',
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .u-picker-view{
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
.trade-type{
|
||||
height: 120rpx;
|
||||
padding:40rpx 30rpx 0rpx 30rpx;
|
||||
margin-bottom: 16rpx;
|
||||
background-color: #e2e2e2;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
}
|
||||
.trade-type-4{
|
||||
padding:25rpx 30rpx 0rpx 30rpx;
|
||||
}
|
||||
.trade-type-active{
|
||||
background-color: rgb(232,248,238);
|
||||
border:1rpx solid #18b566;
|
||||
font-weight: bold;
|
||||
color:#18b566;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style>
|
||||
page{
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :is-back="true" title=" " :title-bold="true" :title-size="34"
|
||||
:background="{ background: '#57ab6d'}"
|
||||
back-icon-name="arrow-left" :back-icon-size="34" back-icon-color="#f0f0f0"
|
||||
:border-bottom="false">
|
||||
</u-navbar>
|
||||
<!-- 这里背景好像是图片 -->
|
||||
<scroll-view :scroll-x="false" :scroll-y="true" class="hidden-scroll-bar"
|
||||
:style="'width: 100%;background-color: #ffffff;height:'+scrollviewHeight+'px'">
|
||||
<view style="padding:20rpx;background-color:#57ab6d;height:230rpx;">
|
||||
<view style="color: #ffffff;font-size: 22px;">协助你解决</view>
|
||||
<view style="color: #ffffff;font-size: 22px;">账单相关问题</view>
|
||||
</view>
|
||||
|
||||
<view style="margin-top: -40rpx; padding: 0rpx 30rpx;">
|
||||
<view style="border-radius: 20rpx;background-color: #f9f9f9;padding: 40rpx;">
|
||||
<u-row>
|
||||
<u-col :span="5">
|
||||
<view class="u-flex u-row-center u-col-center">
|
||||
<view>
|
||||
<u-icon name="checkmark-circle-fill" :size="40"></u-icon>
|
||||
</view>
|
||||
<view class="u-m-l-10" @click="toDownLoadOrder()">
|
||||
<text style="font-size: 32rpx;">下载账单</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-col>
|
||||
<u-col :span="2">
|
||||
<view class="u-flex u-row-center">
|
||||
<u-line color="#a3a6ad" direction="col" length="70rpx" :hair-line="false"></u-line>
|
||||
</view>
|
||||
</u-col>
|
||||
<u-col :span="5">
|
||||
<view class="u-flex u-row-center u-col-center">
|
||||
<view>
|
||||
<u-icon name="file-text-fill" :size="40"></u-icon>
|
||||
</view>
|
||||
<view class="u-m-l-10">
|
||||
<text style="font-size: 32rpx;">银行支出查询</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="u-p-30 u-flex u-row-between u-col-center">
|
||||
<view style="font-size: 20px;color: #000000;">常见问题</view>
|
||||
<view class="u-flex u-row-around u-col-center"
|
||||
style="padding: 12rpx 20rpx;border-radius: 14rpx;border: 1rpx solid #adb1b8;">
|
||||
<view>
|
||||
<u-icon name="search" :size="32" :top="2"></u-icon>
|
||||
</view>
|
||||
<view class="u-tips-color u-p-l-10 u-font-30">
|
||||
<text>搜索</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<u-cell-item icon="order" :title-style="titleStyle" :border-bottom="false" :border-top="true" title="如何快速查询历史账单"></u-cell-item>
|
||||
<u-cell-item icon="order" :title-style="titleStyle" :border-bottom="false" :border-top="true" title="如何查看注销前账单"></u-cell-item>
|
||||
<u-cell-item icon="question-circle" :title-style="titleStyle" :border-bottom="false" :border-top="true" title="微信支付账单如何删除"></u-cell-item>
|
||||
<u-cell-item icon="rmb-circle" :title-style="titleStyle" :border-bottom="false" :border-top="true" title="交易遇到问问如何联系商家"></u-cell-item>
|
||||
<u-cell-item icon="heart" :title-style="titleStyle" :border-bottom="false" :border-top="true" title="未成年人充值/平台消费"></u-cell-item>
|
||||
<u-cell-item icon="question-circle" :title-style="titleStyle" :border-bottom="false" :border-top="true" title="申请交易明细证明常见问题"></u-cell-item>
|
||||
<u-cell-item icon="rmb-circle" :title-style="titleStyle" :border-bottom="false" :border-top="true" title="微信支付账户被莫名扣费"></u-cell-item>
|
||||
<u-cell-item icon="order" :title-style="titleStyle" :border-bottom="true" :border-top="true" title="账单号'收入/支出'的统计说明"></u-cell-item>
|
||||
</view>
|
||||
<!-- 不要删,占位 -->
|
||||
<view class="u-p-30" style="background-color: #f8f8f8;"></view>
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollviewHeight:0, //页面高度
|
||||
titleStyle:{
|
||||
fontSize:"32rpx",
|
||||
color:"#000000",
|
||||
margin:"16rpx 0rpx"
|
||||
}
|
||||
};
|
||||
},
|
||||
onLoad:function(){
|
||||
let that=this;
|
||||
this.scrollviewHeight= that.$u.sys().windowHeight*0.895; // 0.828
|
||||
//this.getData();
|
||||
},
|
||||
methods:{
|
||||
toDownLoadOrder:function(){
|
||||
this.$u.route({
|
||||
url:"/pages/my/service/download-bill-order/download-bill-order"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,563 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :is-back="true" title=" " :title-bold="true" :title-size="34"
|
||||
:background="{ background: '#57ab6d'}"
|
||||
back-icon-name="close" back-icon-size="34" back-icon-color="#f0f0f0"
|
||||
:border-bottom="false">
|
||||
</u-navbar>
|
||||
<view>
|
||||
<scroll-view :scroll-x="false" :scroll-y="true" class="hidden-scroll-bar"
|
||||
style="'width: 100%;background-color: #ffffff;height:88.5vh">
|
||||
<!-- 头部块 -->
|
||||
<view style="padding-bottom: 20rpx;background-color:#57ab6d;">
|
||||
<view class="u-flex u-row-center u-col-center">
|
||||
<!-- 年度账单/月度账单 -->
|
||||
<view style="width: 500rpx;">
|
||||
<u-tabs :list="tabList" :is-scroll="false" :current="currentTab" @change="tabChange"
|
||||
:font-size="32" :height="90" :bar-width="100"
|
||||
active-color="#ffffff" inactive-color="#d6d6d6" bg-color="#57ab6d"></u-tabs>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 月份,年份,类型 -->
|
||||
<view style="padding:40rpx;width:100%;padding-bottom: 30rpx;"
|
||||
class="u-flex u-row-between u-col-center">
|
||||
<view style="width: 50%;" v-if="currentTab==0">
|
||||
<u-icon name="arrow-down" size="24" color="#ffffff" @click="openTimePicker('month')"
|
||||
:label="currentBillObj.year+'年'+currentBillObj.month+'月'"
|
||||
label-color="#ffffff"
|
||||
label-size="30rpx" label-pos="left"
|
||||
margin-right="6rpx">
|
||||
</u-icon>
|
||||
</view>
|
||||
<view style="width: 50%;" v-if="currentTab==1">
|
||||
<u-icon name="arrow-down" size="24" color="#ffffff" @click="openTimePicker('year')"
|
||||
:label="currentBillObj.year+'年'"
|
||||
label-color="#ffffff"
|
||||
label-size="30rpx" label-pos="left"
|
||||
margin-right="6rpx">
|
||||
</u-icon>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-col-center" style="color:#d6d6d6;width: 50%;">
|
||||
<view :class="currentBillObj.currentbillTitle==0?'active-bill-type':'bill-type'" @click="changebillTitle(0)">支出</view>
|
||||
<view :class="currentBillObj.currentbillTitle==1?'active-bill-type':'bill-type'" @click="changebillTitle(1)">收入</view>
|
||||
<view :class="currentBillObj.currentbillTitle==2?'active-bill-type':'bill-type'" @click="changebillTitle(2)">其他</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 支付类型摘要信息 -->
|
||||
<view v-if="currentBillObj.currentbillTitle!=2"
|
||||
style="padding:40rpx;background-color:#57ab6d;width:100%;padding-top: 20rpx;">
|
||||
<view style="color:#d6d6d6;font-size: 26rpx;">
|
||||
共{{currentBillObj.currentbillTitle==0?'支出':'收入'}}{{currentBillObj.tradeCount}}笔，合计
|
||||
</view>
|
||||
<view class="u-flex u-row-left u-col-top"
|
||||
style="color: #ffffff;font-size: 26px;margin-top: 20rpx;font-weight: bold;">
|
||||
<view style="margin-right:16rpx;font-size: 22px;margin-top: 4rpx;">¥</view>
|
||||
<view class="u-m-l-10">{{Number(currentBillObj.tradeAmount).toFixed(2)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 白色块 -->
|
||||
<view class="u-p-20" v-show="currentTab==0"
|
||||
style="background-color: #ffffff;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;">
|
||||
<view class="u-flex u-row-between u-col-center u-p-30"
|
||||
style="background-color: #f0f0f0;border-radius: 20rpx;">
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view class="u-m-r-20">
|
||||
<u-icon name="red-packet-fill" color="#57ab6d" size="32"></u-icon>
|
||||
</view>
|
||||
<view>
|
||||
<view class="u-line-2" style="color:#909399;">使用记账本，查看分类统计(餐饮、交通等)</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<u-icon name="arrow-right" color="#909399" size="32"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view v-show="currentBillObj.currentbillTitle!=2" >
|
||||
<!-- 图表 -->
|
||||
<view class="u-p-20">
|
||||
<view class="u-font-34 ">{{currentBillObj.currentbillTitle==0?'每月支出':'每月收入'}}对比</view>
|
||||
<view style="height: 500rpx;">
|
||||
<l-echart ref="chart"></l-echart>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 排行榜 -->
|
||||
<view class="u-p-20">
|
||||
<view class="u-m-b-50">{{currentBillObj.currentbillTitle==0?'支出':'收入'}}排行榜</view>
|
||||
|
||||
<view class="u-flex u-row-between u-col-center u-m-b-30"
|
||||
v-for="(rankItem,index) in monthRankingkList" :key="index">
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view class="u-m-r-30" style="width: 40rpx;">{{rankItem.id}}</view>
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view>
|
||||
<u-image width="60rpx" height="60rpx" shape="circle" :src="rankItem.iconSrc"></u-image>
|
||||
</view>
|
||||
<view class="u-m-l-20 u-line-1" style="width: 350rpx;">{{rankItem.billTitle}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view style="color: #000000;font-weight: bold;width: 150rpx;text-align: right;">
|
||||
<text>¥</text>
|
||||
<text>{{Number(rankItem.amountValue).toFixed(2)}}</text>
|
||||
</view>
|
||||
<view class="u-m-l-20">
|
||||
<u-icon name="arrow-right" color="#909399"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-show="currentBillObj.currentbillTitle==2">
|
||||
<view style="padding-top: 20%;">
|
||||
<!-- 可以给src图片 -->
|
||||
<u-empty text="无其他资金流转记录" mode="data" :icon-size="100"></u-empty>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-p-40" v-show="currentTab==1"
|
||||
style="background-color: #ffffff;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;">
|
||||
<view v-if="currentBillObj.currentbillTitle!=2">
|
||||
<view class="u-font-34">
|
||||
{{currentBillObj.currentbillTitle==0?'支出':'收入'}}构成
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-40" v-for="(yearBillItem,index) in yearBillBuildArr" :key="index">
|
||||
<u-row>
|
||||
<u-col :span="4">
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view>
|
||||
<u-image :src="yearBillItem.iconSrc" :width="36" :height="36"></u-image>
|
||||
</view>
|
||||
<view class="u-m-l-20 u-line-1"
|
||||
style="width: 70%;font-size: 28rpx;">
|
||||
{{yearBillItem.billTitle}}
|
||||
</view>
|
||||
</view>
|
||||
</u-col>
|
||||
<u-col :span="4">
|
||||
<view>
|
||||
<u-line-progress :show-percent="false" :height="16"
|
||||
:active-color="yearBillItem.color"
|
||||
:percent="yearBillItem.percentValue"></u-line-progress>
|
||||
</view>
|
||||
</u-col>
|
||||
<u-col :span="4">
|
||||
<view style="width: 100%;" class="u-flex u-row-right u-col-center">
|
||||
<view style="text-align: right;font-weight: bold;color:#000000;font-size: 26rpx;">
|
||||
¥{{Number(yearBillItem.amountValue).toFixed(2)}}
|
||||
</view>
|
||||
<view class="u-m-l-10">
|
||||
<u-icon name="arrow-right" color="#909399"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view v-if="currentBillObj.currentbillTitle==2">
|
||||
<view class="u-font-34">
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view> 个人资金流转</view>
|
||||
<view class="u-m-l-16">
|
||||
<u-icon name="info-circle" color="#909399"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-40">
|
||||
<view class="u-flex u-row-between u-col-center u-m-t-40"
|
||||
v-for="(otherItem,otherIndex) in yearBillBuildOtherArr" :key="otherIndex">
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view>
|
||||
<u-icon name="rmb-circle" color="#ff9900" size="40"></u-icon>
|
||||
</view>
|
||||
<view class="u-m-l-20 u-font-32">{{otherItem.title}}</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view style="font-weight: bold;">¥{{Number(otherItem.amountValue).toFixed(2)}}</view>
|
||||
<view class="u-m-l-10">
|
||||
<u-icon name="arrow-right" color="#909399"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 月份查询筛选-->
|
||||
<u-picker mode="time" v-model="monthPickerShow" :params="monthTimeParams" end-year="2026"
|
||||
confirm-color="#3c2e55" confirm-text="确定" @confirm="monthTimePickerConfirm"
|
||||
:show-time-tag="false"></u-picker>
|
||||
<!-- 年度查询筛选-->
|
||||
<u-picker mode="time" v-model="yearPickerShow" :params="yearTimeParams" end-year="2026"
|
||||
confirm-color="#3c2e55" confirm-text="确定" @confirm="yearTimePickerConfirm"
|
||||
:show-time-tag="false"></u-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-PLUS
|
||||
import * as echarts from '@/uni_modules/lime-echart/static/app/echarts.min';
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
import * as echarts from '@/uni_modules/lime-echart/static/web/echarts.esm.min';
|
||||
// #endif
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
//年月tab切换器
|
||||
tabList:[
|
||||
{name:"月账单"},{name:"年账单"}
|
||||
],
|
||||
//当期年月tab的下标
|
||||
currentTab:0,
|
||||
//参数
|
||||
currentBillObj:{
|
||||
year:new Date().getFullYear(), //年
|
||||
month:new Date().getMonth()+1, //月
|
||||
currentbillTitle:0 ,//0支出 ,1收入 2其他
|
||||
tradeCount:264,
|
||||
tradeAmount:216734.8
|
||||
},
|
||||
monthPickerShow:false, //月份时间选择器开关
|
||||
yearPickerShow:false, //年度事件选择器开关
|
||||
//时间参数-月
|
||||
monthTimeParams:{
|
||||
year: true,
|
||||
month: true,
|
||||
day: false,
|
||||
hour: false,
|
||||
minute: false,
|
||||
second: false,
|
||||
timestamp: true,
|
||||
},
|
||||
//时间参数-年
|
||||
yearTimeParams:{
|
||||
year: true,
|
||||
month: false,
|
||||
day: false,
|
||||
hour: false,
|
||||
minute: false,
|
||||
second: false,
|
||||
timestamp: true,
|
||||
},
|
||||
//月度排行榜
|
||||
monthRankingkList:[],
|
||||
//年度账单构成
|
||||
yearBillBuildArr:[
|
||||
{
|
||||
billTitle:"转账",
|
||||
percentValue:70,
|
||||
amountValue:513080,
|
||||
color:"#F29100",
|
||||
iconSrc:"/static/image/bill/zhuanzhang.jpg"
|
||||
},
|
||||
{
|
||||
billTitle:"消费支出",
|
||||
percentValue:20,
|
||||
amountValue:231160.58,
|
||||
color:"#2979ff",
|
||||
iconSrc:"/static/image/bill/xiaofei.jpg"
|
||||
},
|
||||
{
|
||||
billTitle:"发红包",
|
||||
percentValue:10,
|
||||
amountValue:44650,
|
||||
color:"#fa3534",
|
||||
iconSrc:"/static/image/bill/hongbao.jpg"
|
||||
}
|
||||
],
|
||||
//年度账单其他类型的数据结构
|
||||
yearBillBuildOtherArr:[],
|
||||
//图表插件 :https://ext.dcloud.net.cn/plugin?id=4899
|
||||
//图表的配置 参考:https://echarts.apache.org/zh/option.html#xAxis.axisLine.lineStyle.join
|
||||
chartOption: {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
axisLabel: {
|
||||
color: '#909399',
|
||||
fontSize:10,
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgb(172, 233, 189)'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
show:false,
|
||||
},
|
||||
series: [{
|
||||
data: [0,0,0,0,0,0],
|
||||
type: 'bar',//柱状
|
||||
showBackground:false,//是否显示阴影
|
||||
color:'rgb(172, 233, 189)',//柱体颜色
|
||||
borderColor:'#fff',//柱体背景颜色
|
||||
barWidth:20,//柱条的宽度，
|
||||
label:{
|
||||
show:true,
|
||||
position:'top',
|
||||
fontSize:9,
|
||||
color:'inherit',
|
||||
formatter:function(params){
|
||||
//console.log(params);
|
||||
let val= params.value;
|
||||
//console.log("数值",val);
|
||||
if(val<10000){
|
||||
return "¥"+val.toFixed(2);
|
||||
}else{
|
||||
return "¥"+(val/10000).toFixed(1)+"万"
|
||||
}
|
||||
}
|
||||
},
|
||||
}]
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
mounted:function(){
|
||||
let that=this;
|
||||
that.$refs.chart.init(echarts, chart=> {
|
||||
that.getMonthData();
|
||||
chart.on('click',function(params){
|
||||
that.listenerChartClick(params.dataIndex)
|
||||
})
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
//年账单,月账单切换事件
|
||||
tabChange:function(index){
|
||||
this.currentTab = index;
|
||||
if(index==1){
|
||||
this.getYearBillData();
|
||||
}else{
|
||||
//获取月度数据,以图表为例
|
||||
this.getMonthData();
|
||||
}
|
||||
},
|
||||
//打开时间选择器
|
||||
openTimePicker:function(type){
|
||||
let that=this;
|
||||
if(type=='month'){
|
||||
that.monthPickerShow=true;
|
||||
}
|
||||
if(type=='year'){
|
||||
that.yearPickerShow=true;
|
||||
}
|
||||
},
|
||||
//选择时间变化-月度
|
||||
monthTimePickerConfirm:function(obj){
|
||||
let year=obj.year;
|
||||
let monthStr=obj.month;
|
||||
let month= (new Date(obj.timestamp*1000)).getMonth()+1;
|
||||
console.log("选择的月份",month);
|
||||
this.currentBillObj.month=month;
|
||||
this.currentBillObj.year=year;
|
||||
this.getMonthData();
|
||||
},
|
||||
//选择时间变化-年度
|
||||
yearTimePickerConfirm:function(obj){
|
||||
let year=obj.year;
|
||||
this.currentBillObj.year=year;
|
||||
this.getYearBillData();
|
||||
},
|
||||
//改变账单类型 0支出 1收入 2其他
|
||||
changebillTitle:function(index){
|
||||
this.currentBillObj.currentbillTitle=index;
|
||||
//年度账单
|
||||
if(this.currentTab==1){
|
||||
this.getYearBillData();
|
||||
}
|
||||
//获取月度数据,以图表为例
|
||||
if(this.currentTab==0&&index!=2){
|
||||
this.getMonthData();
|
||||
}
|
||||
},
|
||||
//获取图表数据
|
||||
getMonthData:function(){
|
||||
let that=this;
|
||||
let param={
|
||||
currentTab:this.currentTab, //0月度 1年度
|
||||
currentBillType:this.currentBillObj.currentbillTitle,//0支出 1收入 2其他
|
||||
year:this.currentBillObj.year, //当前年度
|
||||
month:this.currentBillObj.month //当前月度(如果当前选择是年度,month参数要忽略的)
|
||||
};
|
||||
console.log("获取月度账单参数",param);
|
||||
if(this.currentTab==0){
|
||||
if(this.currentBillObj.currentbillTitle==1){
|
||||
//下面数据临时写死,实际后端请求要得到柱状图的的x,y坐标系的数据以及月度排行数据
|
||||
let xData=['6月', '7月', '8月', '9月', '10月', '11月'];
|
||||
let currentMonthIndex= xData.findIndex(item=>item.indexOf(that.currentBillObj.month)!=-1);
|
||||
//console.log("currentMonthIndex",currentMonthIndex);
|
||||
let dataArr=[21000,84000,16000,98000,102000,216743];
|
||||
let currentMonthValue= dataArr[currentMonthIndex];
|
||||
dataArr[currentMonthIndex]={
|
||||
value:currentMonthValue,
|
||||
itemStyle:{
|
||||
color:"#19bE6B"
|
||||
}
|
||||
}
|
||||
that.chartOption.xAxis.data=xData;
|
||||
that.chartOption.series[0].data=dataArr;
|
||||
that.$refs.chart.setOption(this.chartOption);
|
||||
//模拟后台数据
|
||||
that.currentBillObj.tradeCount=267;//交易记录次数
|
||||
that.currentBillObj.tradeAmount=318962.2;//交易记录总额
|
||||
//月度排行数据
|
||||
that.monthRankingkList=[
|
||||
{id:1,iconSrc:"/static/image/bill/zhuanzhang.jpg",billTitle:"转账",amountValue:182204.3},
|
||||
{id:2,iconSrc:"/static/image/bill/xiaofei.jpg",billTitle:"二维码收付款",amountValue:21523.5},
|
||||
{id:3,iconSrc:"/static/image/bill/hongbao.jpg",billTitle:"微信红包",amountValue:8550},
|
||||
];
|
||||
}else{
|
||||
let xData=['6月', '7月', '8月', '9月', '10月', '11月'];
|
||||
let currentMonthIndex= xData.findIndex(item=>item.indexOf(that.currentBillObj.month)!=-1);
|
||||
//console.log("currentMonthIndex",currentMonthIndex);
|
||||
let dataArr=[55000,102000,38000,116000,114000,265400];
|
||||
let currentMonthValue= dataArr[currentMonthIndex];
|
||||
dataArr[currentMonthIndex]={
|
||||
value:currentMonthValue,
|
||||
itemStyle:{
|
||||
color:"#19bE6B"
|
||||
}
|
||||
}
|
||||
that.chartOption.xAxis.data=xData;
|
||||
this.chartOption.series[0].data=dataArr;//模拟后台数据
|
||||
this.$refs.chart.setOption(this.chartOption);
|
||||
that.currentBillObj.tradeCount=324;//交易记录次数
|
||||
that.currentBillObj.tradeAmount=216734.8;//交易记录总额
|
||||
that.monthRankingkList=[
|
||||
{id:1,iconSrc:"/static/image/bill/zhuanzhang.jpg",billTitle:"转账",amountValue:182204.3},
|
||||
{id:2,iconSrc:"/static/image/bill/xiaofei.jpg",billTitle:"二维码收付款",amountValue:21523.5},
|
||||
{id:3,iconSrc:"/static/image/bill/hongbao.jpg",billTitle:"微信红包",amountValue:8550},
|
||||
];
|
||||
}
|
||||
}
|
||||
},
|
||||
//获取年账单
|
||||
getYearBillData:function(){
|
||||
let that=this;
|
||||
let param={
|
||||
currentTab:this.currentTab, //0月度 1年度
|
||||
currentBillType:this.currentBillObj.currentbillTitle,//0支出 1收入 2其他
|
||||
year:this.currentBillObj.year, //当前年度
|
||||
month:this.currentBillObj.month //当前月度(如果当前选择是年度,month参数要忽略的)
|
||||
};
|
||||
console.log("获取年度度账单参数",param);
|
||||
if(this.currentTab==1){
|
||||
that.currentBillObj.currentbillTitle;
|
||||
//收入
|
||||
if(that.currentBillObj.currentbillTitle==0){
|
||||
that.currentBillObj.tradeCount=3120;
|
||||
that.currentBillObj.tradeAmount=3816734.8;
|
||||
this.yearBillBuildArr=[
|
||||
{
|
||||
billTitle:"转账",
|
||||
percentValue:78,
|
||||
amountValue:that.currentBillObj.tradeAmount*0.78,
|
||||
color:"#F29100",
|
||||
iconSrc:"/static/image/bill/zhuanzhang.jpg"
|
||||
},
|
||||
{
|
||||
billTitle:"消费支出",
|
||||
percentValue:21,
|
||||
amountValue:that.currentBillObj.tradeAmount*0.21,
|
||||
color:"#2979ff",
|
||||
iconSrc:"/static/image/bill/xiaofei.jpg"
|
||||
},
|
||||
{
|
||||
billTitle:"发红包",
|
||||
percentValue:1,
|
||||
amountValue:that.currentBillObj.tradeAmount*0.01,
|
||||
color:"#fa3534",
|
||||
iconSrc:"/static/image/bill/hongbao.jpg"
|
||||
}
|
||||
];
|
||||
}
|
||||
//支出
|
||||
if(that.currentBillObj.currentbillTitle==1){
|
||||
that.currentBillObj.tradeCount=3878;
|
||||
that.currentBillObj.tradeAmount=4201384.68;
|
||||
this.yearBillBuildArr=[
|
||||
{
|
||||
billTitle:"收转账",
|
||||
percentValue:80,
|
||||
amountValue:that.currentBillObj.tradeAmount*0.8,
|
||||
color:"#F29100",
|
||||
iconSrc:"/static/image/bill/zhuanzhang.jpg"
|
||||
},
|
||||
{
|
||||
billTitle:"二维码收款",
|
||||
percentValue:10,
|
||||
amountValue:that.currentBillObj.tradeAmount*0.1,
|
||||
color:"#fa3534",
|
||||
iconSrc:"/static/image/bill/hongbao.jpg"
|
||||
},
|
||||
{
|
||||
billTitle:"收红包",
|
||||
percentValue:5,
|
||||
amountValue:that.currentBillObj.tradeAmount*0.05,
|
||||
color:"#fa3534",
|
||||
iconSrc:"/static/image/bill/hongbao.jpg"
|
||||
},
|
||||
{
|
||||
billTitle:"退款",
|
||||
percentValue:3,
|
||||
amountValue:that.currentBillObj.tradeAmount*0.03,
|
||||
color:"#2979ff",
|
||||
iconSrc:"/static/image/bill/xiaofei.jpg"
|
||||
},
|
||||
{
|
||||
billTitle:"其他",
|
||||
percentValue:2,
|
||||
amountValue:that.currentBillObj.tradeAmount*0.02,
|
||||
color:"#2979ff",
|
||||
iconSrc:"/static/image/bill/hongbao.jpg"
|
||||
}
|
||||
];
|
||||
}
|
||||
//其他
|
||||
if(that.currentBillObj.currentbillTitle==2){
|
||||
this.yearBillBuildOtherArr=[
|
||||
{title:"零钱提现",amountValue:1001},
|
||||
{title:"零钱提现",amountValue:430}
|
||||
];
|
||||
}
|
||||
}
|
||||
},
|
||||
//监听柱状图点击事件
|
||||
listenerChartClick(dataIndex){
|
||||
console.log("dataIndex",dataIndex);
|
||||
let monthIndex= this.chartOption.xAxis.data[dataIndex];
|
||||
this.currentBillObj.month=monthIndex.replace('月','');
|
||||
this.getMonthData();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bill-type{
|
||||
border-radius: 30rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
.active-bill-type{
|
||||
border: 1rpx solid #fff;
|
||||
border-radius: 30rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user