fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by baoss
Commit 399f4033ad32fd8447a9e5b7f350c3cea39cc10b 1 parent a7863b18

交易收入页面布局

Inline Side-by-side
Showing 6 changed files with 358 additions and 8 deletions
<template>
<div class="progress-box">
<!-- 绘制圆环背景 -->
<canvas class="progress-bg" id="canvasProgressbg" />
<!-- 绘制加载中圆弧 -->
<canvas class="progress-canvas" id="canvasProgress" />
</div>
</template>
<script>
import incomeItem from './incomeItem'
export default {
name: 'income-detail',
props: {
data: {
type: Array,
default: []
}
},
data() {
return {
};
},
methods: {
/**
* 画progress底部背景
*/
drawProgressbg: function (summary) {
var c=document.getElementById("canvasProgressbg");
var cxt=c.getContext("2d");
// 设置圆环的宽度
ctx.setLineWidth(28 * radio);
// 设置圆环的颜色
let strokeColor = '#E0E0E0'
if (summary && summary.totalIncome > 0) {
strokeColor = '#65AB85';
}
ctx.setStrokeStyle(strokeColor);
// 设置圆环端点的形状
ctx.setLineCap('round')
//开始一个新的路径
ctx.beginPath();
//设置一个原点(110,110)，半径为100的圆的路径到当前路径
console.log("起始点：" + Math.PI)
ctx.arc(120 * radio, 120 * radio, 100 * radio, 0, 2 * Math.PI, false);
//对当前路径进行描边
ctx.stroke();
//开始绘制
ctx.draw();
},
/**
* 画progress进度
*/
drawCircle: function (step) {
// 使用 wx.createContext 获取绘图上下文 context
var context = wx.createCanvasContext('canvasProgress');
// 设置圆环的宽度
context.setLineWidth(28 * radio);
// 设置圆环的颜色
let strokeColor = '#002B47'
// if (this.data.summary.totalIncome <= 0){
// strokeColor = '#E0E0E0';
// }
context.setStrokeStyle(strokeColor);
// 设置圆环端点的形状
context.setLineCap('round')
//开始一个新的路径
context.beginPath();
//参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
context.arc(120 * radio, 120 * radio, 100 * radio, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
//对当前路径进行描边
context.stroke();
//开始绘制
context.draw()
},
/**
* 开始progress
*/
startProgress: function (summary) {
// 设置倒计时 定时器 每100毫秒执行一次，计数器count+1 ,耗时6秒绘一圈
if (summary && summary.totalIncome > 0) {
// this.countTimer = setInterval(() => {
// if (this.data.count <= 60) {
/* 绘制彩色圆环进度条
注意此处 传参 step 取值范围是0到2，
所以 计数器 最大值 60 对应 2 做处理，计数器count=60的时候step=2
*/
this.drawCircle(summary.goodsIncome / (summary.totalIncome / 2))
// if()
// this.data.count++;
// }
// else {
// clearInterval(this.countTimer);
// this.startProgress();
// }
// }, 100)
}
},
},
components: {
incomeItem
}
};
</script>
<style lang="scss" scoped>
.total-income {
font-size: 36px;
padding: 15px;
border-bottom: solid 1px #eee;
}
.no-data {
color: #ccc;
font-weight: bold;
text-align: center;
font-size: 42px;
padding: 100px 0;
}
</style>
... ...
<template>
<div class="income-detail-header">
<p class="total-income">收入明细</p>
<div v-if="data.length === 0" class="no-data">暂无收入明细</div>
<div v-else>
<incomeItem :data="data"></incomeItem>
</div>
</div>
</template>
<script>
import incomeItem from './incomeItem'
export default {
name: 'income-detail',
props: {
data: {
type: Array,
default: []
}
},
data() {
return {
};
},
components: {
incomeItem
}
};
</script>
<style lang="scss" scoped>
.total-income {
font-size: 36px;
padding: 15px;
border-bottom: solid 1px #eee;
}
.no-data {
color: #ccc;
font-weight: bold;
text-align: center;
font-size: 42px;
padding: 100px 0;
}
</style>
... ...
<template>
<div class="income-header">
<p class="total-income">收入: {{data.totalIncome}}</p>
<div class="income">
<span class="dot1"></span>
<span class="income-name">货款收入</span>
<span class="income-num">{{data.goodsIncome}}</span>
</div>
<div class="income">
<span class="dot2"></span>
<span class="income-name">补偿收入</span>
<span class="income-num">{{data.compensateIncome}}</span>
</div>
</div>
</template>
<script>
export default {
name: 'income-header',
props: {
data: {
type: Object,
default: {}
}
},
data() {
return {
};
},
};
</script>
<style lang="scss" scoped>
.income-header {
margin: 50px 0;
}
.total-income {
font-size: 36px;
margin-bottom: 40px;
}
.income {
margin-bottom: 15px;
font-size: 24px;
.dot1,.dot2 {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 16px;
}
.dot1 {
background-color: #002B47;
}
.dot2 {
background-color: #65AB85;
}
.income-name {
color: #999;
}
}
</style>
... ...
<template>
<div class="assets-record-container">
<div class='assets-record-info-detail-view'>
<div class='assets-record-left-view'>
<img class='assets-record-image-style' :src='data.tradeType == 2 ?"" : ""' />
<div class='assets-record-middle-view'>
<span class='assets-record-code-txt'>{{data.tradeTypeDesc}}(订单号：{{data.orderCode}})</span>
<span class='assets-record-time-txt'>{{data.createTime}}</span>
</div>
</div>
<div class='assets-record-right-view'>
<span class='assets-record-income-txt'>+{{data.amount}}</span>
<span class='assets-record-income-tip-txt' v-if="!data.normalFlag">打款失败</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'income-item',
props: {
data: {
type: Object,
default: {}
}
},
data() {
return {
};
},
};
</script>
<style lang="scss" scoped>
.assets-record-container {
display: flex;
flex-direction: column;
justify-content: space-between;
border-bottom: solid 1px #E0E0E0;
/* background: #ee00dd; */
/* position: fixed; */
}
.assets-record-info-detail-view {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-top: 30px;
padding-bottom: 30px;
}
.assets-record-left-view {
display: flex;
flex-direction: row;
align-items: center;
}
.assets-record-middle-view {
display: flex;
flex-direction: column;
margin-left: 20px;
}
.assets-record-right-view {
display: flex;
flex-direction: column;
align-items: center;
}
.assets-record-image-style {
width: 48px;
height: 48px;
/* background: #00ff */
}
.assets-record-code-txt {
font-family: PingFang-SC-Regular;
font-size: 28px;
color: #000000;
}
.assets-record-time-txt {
font-family: SFProText-Regular;
font-size: 24px;
color: #999999;
margin-top: 12px;
}
.assets-record-income-txt {
font-family: SFProText-Medium;
font-weight: bold;
font-size: 28px;
color: #000000;
}
.assets-record-income-tip-txt {
font-family: PingFang-SC-Regular;
font-size: 20px;
color: #D0021B;
}
</style>
... ...
<template>
<LayoutApp :show-back="true">
<div class="body" ref="body">
<h2>trade</h2>
<h1>我的收入</h1>
<incomeHeader :data="incomeSum"></incomeHeader>
<incomeDetail></incomeDetail>
</div>
</LayoutApp>
</template>
<script>
// import tabItem from './components/tabItem';
import incomeHeader from './components/incomeHeader';
import incomeDetail from './components/incomeDetail';
import { createNamespacedHelpers } from 'vuex';
const {mapGetters, mapActions} = createNamespacedHelpers('home/mine');
const {mapState, mapActions} = createNamespacedHelpers('home/mine');
export default {
data() {
return {
... ... @@ -19,6 +21,16 @@ export default {
}
},
computed:{
...mapState({
incomeSum:(state) => {
return {
goodsIncome: state.assetData.goodsIncome,
totalIncome: state.assetData.totalIncome,
compensateIncome: state.assetData.compensateIncome
}
},
incomeData: (state) => state.assetData
}),
},
created() {
... ... @@ -30,7 +42,8 @@ export default {
...mapActions(['fetchAssets'])
},
components: {
incomeHeader,
incomeDetail
}
};
</script>
... ...
... ... @@ -25,9 +25,9 @@ export default function() {
list: [],
currentPage: 1,
endReached: false,
compensateIncome: 0,
goodsIncome: 0,
totalIncome: 0
compensateIncome: '￥0.00',
goodsIncome: '￥0.00',
totalIncome: '￥0.00'
},
resource1: {},
resource2: {}
... ... @@ -115,6 +115,8 @@ export default function() {
},
addAssets(state, assetData) {
assetData.totalIncome = formatNumber(assetData.totalIncome);
assetData.compensateIncome = formatNumber(assetData.compensateIncome);
assetData.goodsIncome = formatNumber(assetData.goodsIncome);
state.assetData = Object.assign({}, state.assetData, assetData);
},
... ...