fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by lea guo
Commit 46b08e197823272259f1b05448c17c8cd403aef5 2 parents b43edac5 f37b7921

Merge branch 'develop' of git.yoho.cn:fe/xianyu-ufo-app-web into develop

Inline Side-by-side
Showing 10 changed files with 427 additions and 21 deletions
1 import Mine from './mine'; 1 import Mine from './mine';
2 - 2 +import Trade from './tradeIncome';
3 export default [ 3 export default [
4 { 4 {
5 name: 'channel', 5 name: 'channel',
@@ -7,4 +7,5 @@ export default [ @@ -7,4 +7,5 @@ export default [
7 component: () => import(/* webpackChunkName: "channel" */ './channel/channel') 7 component: () => import(/* webpackChunkName: "channel" */ './channel/channel')
8 }, 8 },
9 ...Mine, 9 ...Mine,
  10 + ...Trade,
10 ]; 11 ];
@@ -39,13 +39,9 @@ export default { @@ -39,13 +39,9 @@ export default {
39 created() { 39 created() {
40 this.fetchResource() 40 this.fetchResource()
41 this.fetchFavoriteNum() 41 this.fetchFavoriteNum()
42 - this.fetchOrderSummary().then(data => {  
43 - console.log(data)  
44 - }) 42 + this.fetchOrderSummary()
45 this.fetchSellerOrder() 43 this.fetchSellerOrder()
46 - this.fetchAssets().then(data => {  
47 - console.log(data)  
48 - }) 44 + this.fetchAssets()
49 }, 45 },
50 methods: { 46 methods: {
51 ...mapActions(['fetchFavoriteNum','fetchResource','fetchSellerOrder','fetchOrderSummary', 'fetchAssets']) 47 ...mapActions(['fetchFavoriteNum','fetchResource','fetchSellerOrder','fetchOrderSummary', 'fetchAssets'])
  1 +<template>
  2 + <div class="progress-box">
  3 + <!-- 绘制圆环背景 -->
  4 + <canvas class="progress-bg" id="canvasProgressbg" />
  5 + <!-- 绘制加载中圆弧 -->
  6 + <canvas class="progress-canvas" id="canvasProgress" />
  7 + </div>
  8 +</template>
  9 +
  10 +<script>
  11 +import incomeItem from './incomeItem'
  12 +export default {
  13 + name: 'income-detail',
  14 + props: {
  15 + data: {
  16 + type: Array,
  17 + default: []
  18 + }
  19 + },
  20 + data() {
  21 + return {
  22 +
  23 + };
  24 + },
  25 + methods: {
  26 + /**
  27 + * 画progress底部背景
  28 + */
  29 + drawProgressbg: function (summary) {
  30 + var c=document.getElementById("canvasProgressbg");
  31 + var cxt=c.getContext("2d");
  32 + // 设置圆环的宽度
  33 + ctx.setLineWidth(28 * radio);
  34 + // 设置圆环的颜色
  35 + let strokeColor = '#E0E0E0'
  36 + if (summary && summary.totalIncome > 0) {
  37 + strokeColor = '#65AB85';
  38 + }
  39 + ctx.setStrokeStyle(strokeColor);
  40 + // 设置圆环端点的形状
  41 + ctx.setLineCap('round')
  42 + //开始一个新的路径
  43 + ctx.beginPath();
  44 + //设置一个原点(110,110)，半径为100的圆的路径到当前路径
  45 + console.log("起始点：" + Math.PI)
  46 + ctx.arc(120 * radio, 120 * radio, 100 * radio, 0, 2 * Math.PI, false);
  47 + //对当前路径进行描边
  48 + ctx.stroke();
  49 + //开始绘制
  50 + ctx.draw();
  51 + },
  52 +
  53 + /**
  54 + * 画progress进度
  55 + */
  56 + drawCircle: function (step) {
  57 + // 使用 wx.createContext 获取绘图上下文 context
  58 + var context = wx.createCanvasContext('canvasProgress');
  59 + // 设置圆环的宽度
  60 + context.setLineWidth(28 * radio);
  61 + // 设置圆环的颜色
  62 + let strokeColor = '#002B47'
  63 + // if (this.data.summary.totalIncome <= 0){
  64 + // strokeColor = '#E0E0E0';
  65 + // }
  66 + context.setStrokeStyle(strokeColor);
  67 + // 设置圆环端点的形状
  68 + context.setLineCap('round')
  69 + //开始一个新的路径
  70 + context.beginPath();
  71 + //参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
  72 + context.arc(120 * radio, 120 * radio, 100 * radio, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
  73 + //对当前路径进行描边
  74 + context.stroke();
  75 + //开始绘制
  76 + context.draw()
  77 + },
  78 +
  79 + /**
  80 + * 开始progress
  81 + */
  82 + startProgress: function (summary) {
  83 +
  84 + // 设置倒计时 定时器 每100毫秒执行一次，计数器count+1 ,耗时6秒绘一圈
  85 + if (summary && summary.totalIncome > 0) {
  86 + // this.countTimer = setInterval(() => {
  87 +
  88 + // if (this.data.count <= 60) {
  89 + /* 绘制彩色圆环进度条
  90 + 注意此处 传参 step 取值范围是0到2，
  91 + 所以 计数器 最大值 60 对应 2 做处理，计数器count=60的时候step=2
  92 + */
  93 + this.drawCircle(summary.goodsIncome / (summary.totalIncome / 2))
  94 + // if()
  95 + // this.data.count++;
  96 + // }
  97 + // else {
  98 + // clearInterval(this.countTimer);
  99 + // this.startProgress();
  100 + // }
  101 + // }, 100)
  102 + }
  103 + },
  104 + },
  105 + components: {
  106 + incomeItem
  107 + }
  108 +
  109 +};
  110 +</script>
  111 +
  112 +<style lang="scss" scoped>
  113 +.total-income {
  114 + font-size: 36px;
  115 + padding: 15px;
  116 + border-bottom: solid 1px #eee;
  117 +}
  118 +.no-data {
  119 + color: #ccc;
  120 + font-weight: bold;
  121 + text-align: center;
  122 + font-size: 42px;
  123 + padding: 100px 0;
  124 + }
  125 +</style>
  1 +<template>
  2 + <div class="income-detail-header">
  3 + <p class="total-income">收入明细</p>
  4 + <div v-if="data.length === 0" class="no-data">暂无收入明细</div>
  5 + <div v-else>
  6 + <incomeItem :data="data"></incomeItem>
  7 + </div>
  8 + </div>
  9 +</template>
  10 +
  11 +<script>
  12 +import incomeItem from './incomeItem'
  13 +export default {
  14 + name: 'income-detail',
  15 + props: {
  16 + data: {
  17 + type: Array,
  18 + default: []
  19 + }
  20 + },
  21 + data() {
  22 + return {
  23 +
  24 + };
  25 + },
  26 + components: {
  27 + incomeItem
  28 + }
  29 +
  30 +};
  31 +</script>
  32 +
  33 +<style lang="scss" scoped>
  34 +.total-income {
  35 + font-size: 36px;
  36 + padding: 15px;
  37 + border-bottom: solid 1px #eee;
  38 +}
  39 +.no-data {
  40 + color: #ccc;
  41 + font-weight: bold;
  42 + text-align: center;
  43 + font-size: 42px;
  44 + padding: 100px 0;
  45 + }
  46 +</style>
  1 +<template>
  2 + <div class="income-header">
  3 + <p class="total-income">收入: {{data.totalIncome}}</p>
  4 + <div class="income">
  5 + <span class="dot1"></span>
  6 + <span class="income-name">货款收入</span>
  7 + <span class="income-num">{{data.goodsIncome}}</span>
  8 + </div>
  9 + <div class="income">
  10 + <span class="dot2"></span>
  11 + <span class="income-name">补偿收入</span>
  12 + <span class="income-num">{{data.compensateIncome}}</span>
  13 + </div>
  14 + </div>
  15 +</template>
  16 +
  17 +<script>
  18 +
  19 +export default {
  20 + name: 'income-header',
  21 + props: {
  22 + data: {
  23 + type: Object,
  24 + default: {}
  25 + }
  26 + },
  27 + data() {
  28 + return {
  29 +
  30 + };
  31 + },
  32 +
  33 +
  34 +};
  35 +</script>
  36 +
  37 +<style lang="scss" scoped>
  38 +.income-header {
  39 + margin: 50px 0;
  40 +}
  41 +.total-income {
  42 + font-size: 36px;
  43 + margin-bottom: 40px;
  44 +}
  45 +.income {
  46 + margin-bottom: 15px;
  47 + font-size: 24px;
  48 + .dot1,.dot2 {
  49 + display: inline-block;
  50 + width: 16px;
  51 + height: 16px;
  52 + border-radius: 16px;
  53 + }
  54 + .dot1 {
  55 + background-color: #002B47;
  56 + }
  57 + .dot2 {
  58 + background-color: #65AB85;
  59 + }
  60 + .income-name {
  61 + color: #999;
  62 + }
  63 +}
  64 +</style>
  1 +<template>
  2 + <div class="assets-record-container">
  3 + <div class='assets-record-info-detail-view'>
  4 + <div class='assets-record-left-view'>
  5 + <img class='assets-record-image-style' :src='data.tradeType == 2 ?"" : ""' />
  6 + <div class='assets-record-middle-view'>
  7 + <span class='assets-record-code-txt'>{{data.tradeTypeDesc}}(订单号：{{data.orderCode}})</span>
  8 + <span class='assets-record-time-txt'>{{data.createTime}}</span>
  9 + </div>
  10 + </div>
  11 + <div class='assets-record-right-view'>
  12 + <span class='assets-record-income-txt'>+{{data.amount}}</span>
  13 + <span class='assets-record-income-tip-txt' v-if="!data.normalFlag">打款失败</span>
  14 + </div>
  15 + </div>
  16 + </div>
  17 +</template>
  18 +
  19 +<script>
  20 +
  21 +export default {
  22 + name: 'income-item',
  23 + props: {
  24 + data: {
  25 + type: Object,
  26 + default: {}
  27 + }
  28 + },
  29 + data() {
  30 + return {
  31 +
  32 + };
  33 + },
  34 +
  35 +
  36 +};
  37 +</script>
  38 +
  39 +<style lang="scss" scoped>
  40 + .assets-record-container {
  41 + display: flex;
  42 + flex-direction: column;
  43 + justify-content: space-between;
  44 + border-bottom: solid 1px #E0E0E0;
  45 + /* background: #ee00dd; */
  46 + /* position: fixed; */
  47 +}
  48 +
  49 +.assets-record-info-detail-view {
  50 + display: flex;
  51 + flex-direction: row;
  52 + justify-content: space-between;
  53 + align-items: center;
  54 + padding-top: 30px;
  55 + padding-bottom: 30px;
  56 +}
  57 +.assets-record-left-view {
  58 + display: flex;
  59 + flex-direction: row;
  60 + align-items: center;
  61 +
  62 +}
  63 +.assets-record-middle-view {
  64 + display: flex;
  65 + flex-direction: column;
  66 + margin-left: 20px;
  67 +}
  68 +.assets-record-right-view {
  69 + display: flex;
  70 + flex-direction: column;
  71 + align-items: center;
  72 +}
  73 +.assets-record-image-style {
  74 + width: 48px;
  75 + height: 48px;
  76 + /* background: #00ff */
  77 +}
  78 +.assets-record-code-txt {
  79 + font-family: PingFang-SC-Regular;
  80 + font-size: 28px;
  81 + color: #000000;
  82 +}
  83 +.assets-record-time-txt {
  84 + font-family: SFProText-Regular;
  85 + font-size: 24px;
  86 + color: #999999;
  87 + margin-top: 12px;
  88 +}
  89 +.assets-record-income-txt {
  90 + font-family: SFProText-Medium;
  91 + font-weight: bold;
  92 + font-size: 28px;
  93 + color: #000000;
  94 +}
  95 +.assets-record-income-tip-txt {
  96 + font-family: PingFang-SC-Regular;
  97 + font-size: 20px;
  98 + color: #D0021B;
  99 +}
  100 +</style>
  1 +export default [{
  2 + name: 'mine',
  3 + path: '/xianyu/home/mine/tradeIncome',
  4 + component: () => import(/* webpackChunkName: "mine" */ './tradeIncome')
  5 +}];
  1 +<template>
  2 + <LayoutApp :show-back="true">
  3 + <div class="body" ref="body">
  4 + <h1>我的收入</h1>
  5 + <incomeHeader :data="incomeSum"></incomeHeader>
  6 + <incomeDetail></incomeDetail>
  7 + </div>
  8 + </LayoutApp>
  9 +</template>
  10 +
  11 +<script>
  12 +import incomeHeader from './components/incomeHeader';
  13 +import incomeDetail from './components/incomeDetail';
  14 +import { createNamespacedHelpers } from 'vuex';
  15 +
  16 +const {mapState, mapActions} = createNamespacedHelpers('home/mine');
  17 +export default {
  18 + data() {
  19 + return {
  20 +
  21 + }
  22 + },
  23 + computed:{
  24 + ...mapState({
  25 + incomeSum:(state) => {
  26 + return {
  27 + goodsIncome: state.assetData.goodsIncome,
  28 + totalIncome: state.assetData.totalIncome,
  29 + compensateIncome: state.assetData.compensateIncome
  30 + }
  31 + },
  32 + incomeData: (state) => state.assetData
  33 + }),
  34 +
  35 + },
  36 + created() {
  37 + this.fetchAssets().then(data => {
  38 + console.log(data)
  39 + })
  40 + },
  41 + methods: {
  42 + ...mapActions(['fetchAssets'])
  43 + },
  44 + components: {
  45 + incomeHeader,
  46 + incomeDetail
  47 + }
  48 +};
  49 +</script>
  50 +
  51 +<style lang="scss" scoped>
  52 +.body {
  53 + height: 100%;
  54 + overflow-y: auto;
  55 + background-color: white;
  56 + padding: 0 40px;
  57 +}
  58 +</style>
1 -import { parseAssetList, maskAccount } from '../../utils/mine-handler'; 1 +import {parseAssetList, formatNumber, maskAccount} from '../../utils/mine-handler';
2 import { get, set } from 'lodash'; 2 import { get, set } from 'lodash';
3 import { getImgUrl } from '../../common/utils'; 3 import { getImgUrl } from '../../common/utils';
4 4
5 // const uid = '600046428'; 5 // const uid = '600046428';
6 -const uid = '75339977'; 6 +const uid = '500031424';
7 const MINE_RESOURCE_CODE1 = '11a73219a63b50067d88e75c0fe04d10'; 7 const MINE_RESOURCE_CODE1 = '11a73219a63b50067d88e75c0fe04d10';
8 const MINE_RESOURCE_CODE2 = 'dc2731fbbebcba6329c74a379e9c41ec'; 8 const MINE_RESOURCE_CODE2 = 'dc2731fbbebcba6329c74a379e9c41ec';
9 9
@@ -20,13 +20,14 @@ export default function() { @@ -20,13 +20,14 @@ export default function() {
20 failNum: 0, 20 failNum: 0,
21 favoriteNum: 0, 21 favoriteNum: 0,
22 buyNum: 0, 22 buyNum: 0,
  23 + askBuyNum: 0,
23 assetData: { 24 assetData: {
24 list: [], 25 list: [],
25 currentPage: 1, 26 currentPage: 1,
26 endReached: false, 27 endReached: false,
27 - compensateIncome: 0,  
28 - goodsIncome: 0,  
29 - totalIncome: 0 28 + compensateIncome: '￥0.00',
  29 + goodsIncome: '￥0.00',
  30 + totalIncome: '￥0.00'
30 }, 31 },
31 resource1: {}, 32 resource1: {},
32 resource2: {} 33 resource2: {}
@@ -50,8 +51,7 @@ export default function() { @@ -50,8 +51,7 @@ export default function() {
50 resource1: {name: 'resource1', data: state.resource1}, 51 resource1: {name: 'resource1', data: state.resource1},
51 income: {title: '交易收入', num: state.assetData.totalIncome}, 52 income: {title: '交易收入', num: state.assetData.totalIncome},
52 buyOrder: {title: '我购买的订单', num: state.buyNum}, 53 buyOrder: {title: '我购买的订单', num: state.buyNum},
53 -  
54 - // buy: {name: 'buy', title: '我的求购', num: 1}, 54 + buy: {name: 'buy', title: '我的求购', num: state.askBuyNum},
55 collect: {name: 'collect', title: '我的收藏', num: state.favoriteNum}, 55 collect: {name: 'collect', title: '我的收藏', num: state.favoriteNum},
56 resource2: {name: 'resource2', data: state.resource2} 56 resource2: {name: 'resource2', data: state.resource2}
57 }; 57 };
@@ -99,10 +99,24 @@ export default function() { @@ -99,10 +99,24 @@ export default function() {
99 addFavoriteNum(state, {count}) { 99 addFavoriteNum(state, {count}) {
100 state.favoriteNum = count; 100 state.favoriteNum = count;
101 }, 101 },
102 - addOrderSummary(state, {count}) {  
103 - state.buyNum = count; 102 + addOrderSummary(state, {data}) {
  103 + data.forEach((item) => {
  104 + switch (item.actor) {
  105 + case 'buy':
  106 + state.buyNum = item.sum;
  107 + break;
  108 + case 'bid':
  109 + state.askBuyNum = item.sum;
  110 + break;
  111 + default:
  112 + break;
  113 + }
  114 + });
104 }, 115 },
105 addAssets(state, assetData) { 116 addAssets(state, assetData) {
  117 + assetData.totalIncome = formatNumber(assetData.totalIncome);
  118 + assetData.compensateIncome = formatNumber(assetData.compensateIncome);
  119 + assetData.goodsIncome = formatNumber(assetData.goodsIncome);
106 state.assetData = Object.assign({}, state.assetData, assetData); 120 state.assetData = Object.assign({}, state.assetData, assetData);
107 }, 121 },
108 122
@@ -156,7 +170,6 @@ export default function() { @@ -156,7 +170,6 @@ export default function() {
156 if (result.code === 200) { 170 if (result.code === 200) {
157 commit('addSellerOrder', { orderSumList: result.data }); 171 commit('addSellerOrder', { orderSumList: result.data });
158 } 172 }
159 - return result.data || [];  
160 }, 173 },
161 async fetchFavoriteNum({ commit }) { 174 async fetchFavoriteNum({ commit }) {
162 const result = await this.$api.get('/api/ufo/mine/favoriteNum', {uid}); 175 const result = await this.$api.get('/api/ufo/mine/favoriteNum', {uid});
@@ -164,15 +177,13 @@ export default function() { @@ -164,15 +177,13 @@ export default function() {
164 if (result.code === 200) { 177 if (result.code === 200) {
165 commit('addFavoriteNum', { count: result.data.product_favorite_total }); 178 commit('addFavoriteNum', { count: result.data.product_favorite_total });
166 } 179 }
167 - return result.data || [];  
168 }, 180 },
169 async fetchOrderSummary({ commit }) { 181 async fetchOrderSummary({ commit }) {
170 const result = await this.$api.get('/api/ufo/mine/order/summary', {uid}); 182 const result = await this.$api.get('/api/ufo/mine/order/summary', {uid});
171 183
172 if (result.code === 200) { 184 if (result.code === 200) {
173 - commit('addOrderSummary', { count: result.data.buyCount }); 185 + commit('addOrderSummary', { data: result.data});
174 } 186 }
175 - return result.data || [];  
176 }, 187 },
177 188
178 async fetchAssets({ commit }) { 189 async fetchAssets({ commit }) {
@@ -36,7 +36,7 @@ module.exports = { @@ -36,7 +36,7 @@ module.exports = {
36 }, 36 },
37 '/api/ufo/mine/order/summary': { 37 '/api/ufo/mine/order/summary': {
38 ufo: true, 38 ufo: true,
39 - path: '/shopping', 39 + path: '/ufo-gateway/shopping',
40 api: 'ufo.order.summary', 40 api: 'ufo.order.summary',
41 params: { 41 params: {
42 uid: { type: Number }, 42 uid: { type: Number },