Skip to content

S
self-support
Commit 62402a67 authored by 高铭波's avatar 高铭波
Browse files
Options

feat(mine, wallet): 钱包账单详情页面搭建

parent 807dcfb4
Hide whitespace changes
Inline Side-by-side
Showing with 347 additions and 165 deletions
src/common/api/order.js
View file @ 62402a67
...@@ -168,6 +168,8 @@ let orderApiFun = function(vm){ ...@@ -168,6 +168,8 @@ let orderApiFun = function(vm){
let getAssets = async (params = {}) => await vm.$u.get(settle + vm.vuex_token + '/v3/total', params); let getAssets = async (params = {}) => await vm.$u.get(settle + vm.vuex_token + '/v3/total', params);
// 获取我的钱包-收入流水 // 获取我的钱包-收入流水
let listStatement = async (params = {}) => await vm.$u.get(settle + vm.vuex_token + '/v2/statement', params); let listStatement = async (params = {}) => await vm.$u.get(settle + vm.vuex_token + '/v2/statement', params);
// 获取我的钱包-收入流水
let listStatementDetails = async (params = {}) => await vm.$u.get(settle + vm.vuex_token + '/queryStatementByPayableNo', params);
// 获取我的钱包-支付单一览 // 获取我的钱包-支付单一览
let payableRecord = async (params = {}) => await vm.$u.post(settle + vm.vuex_token + '/payable/v2/queryPayableRecord', params, formType); let payableRecord = async (params = {}) => await vm.$u.post(settle + vm.vuex_token + '/payable/v2/queryPayableRecord', params, formType);
// 获取我的钱包-师傅提现 // 获取我的钱包-师傅提现
...@@ -235,6 +237,7 @@ let orderApiFun = function(vm){ ...@@ -235,6 +237,7 @@ let orderApiFun = function(vm){
getAssets, getAssets,
listStatement, listStatement,
payableRecord, payableRecord,
listStatementDetails,
workerApplyPay, workerApplyPay,
allowLogin, allowLogin,
otherUser, otherUser,
......
src/components/mine/settlement.vue
View file @ 62402a67
...@@ -3,14 +3,14 @@ ...@@ -3,14 +3,14 @@
<view class="settlement-com-view" @click="$u.throttle(handleClick, 500)"> <view class="settlement-com-view" @click="$u.throttle(handleClick, 500)">
<view class="left-view"> <view class="left-view">
<view class="time-view">{{timeText}}</view> <view class="time-view">{{timeText}}</view>
<view class="order-view"> <view class="order-view" @click="$u.throttle(showSettlement, 500)">
<text>提现编号：</text> <text>提现编号：</text>
<text>{{data.payableRecordNumber}}</text> <text>{{data.payableRecordNumber}}</text>
</view> </view>
</view> </view>
<view class="right-view"> <view class="right-view">
<view :class="['settlement-status-view', settlementTypeClass]">{{data.payableRecordStatusText}}</view> <view :class="['settlement-status-view', settlementTypeClass]">{{data.payableRecordStatusText}}</view>
<view class="settlement-amount-view">-{{data.settlementAmount}}</view> <view class="settlement-amount-view">-{{data.settlementAmount}}</view>
</view> </view>
</view> </view>
<view class="line-view"></view> <view class="line-view"></view>
...@@ -27,6 +27,7 @@ ...@@ -27,6 +27,7 @@
paymentTime: new Date().getTime(), paymentTime: new Date().getTime(),
payableRecordStatusText: '提现', payableRecordStatusText: '提现',
payableRecordNumber: 'EE999777', payableRecordNumber: 'EE999777',
payableRecordId: '',
settlementAmount: 9899 settlementAmount: 9899
} }
}, },
...@@ -64,18 +65,21 @@ ...@@ -64,18 +65,21 @@
return this.$u.timeFormat(this.data.updateDatetime, 'mm.dd') return this.$u.timeFormat(this.data.updateDatetime, 'mm.dd')
} }
} }
}, },
methods: { methods: {
handleClick() { handleClick() {
this.$emit('click', this.data.orderId) this.$emit('click', this.data.orderId)
} },
showSettlement() {
this.$emit('open', this.data.payableRecordId)
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.settlement-view { .settlement-view {
height: 212rpx; height: 212rpx;
.settlement-com-view { .settlement-com-view {
display: flex; display: flex;
...@@ -102,41 +106,41 @@ ...@@ -102,41 +106,41 @@
} }
} }
.right-view { .right-view {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
.settlement-status-view { .settlement-status-view {
border-radius: 8rpx; border-radius: 8rpx;
border: 2rpx solid #FF930D; border: 2rpx solid #FF930D;
font-size: 20rpx; font-size: 20rpx;
color: #FF930D; color: #FF930D;
width: 80rpx; width: 80rpx;
height: 40rpx; height: 40rpx;
text-align: center; text-align: center;
padding-top: 4rpx; padding-top: 4rpx;
margin-right: 10rpx; margin-right: 10rpx;
&.settlement-type-y { &.settlement-type-y {
border: 2rpx solid #FF930D; border: 2rpx solid #FF930D;
color: #FF930D; color: #FF930D;
} }
&.settlement-type-h { &.settlement-type-h {
border: 2rpx solid #2272FF; border: 2rpx solid #2272FF;
color: #2272FF; color: #2272FF;
} }
} }
.settlement-amount-view { .settlement-amount-view {
font-size: 40rpx; font-size: 40rpx;
font-weight: bold; font-weight: bold;
color: #FA5A49; color: #FA5A49;
margin-top: 30rpx; margin-top: 30rpx;
} }
} }
} }
...@@ -146,4 +150,4 @@ ...@@ -146,4 +150,4 @@
margin: 0 30rpx; margin: 0 30rpx;
} }
} }
</style> </style>
src/pages.json
View file @ 62402a67
...@@ -202,6 +202,16 @@ ...@@ -202,6 +202,16 @@
"navigationBarBackgroundColor": "#F4F5F7" "navigationBarBackgroundColor": "#F4F5F7"
} }
}, },
{
"path": "wallet/itemizedBills",
"style": {
"navigationBarTitleText": "账单详情",
"enablePullDownRefresh": false,
"disableScroll": true,
"navigationStyle": "custom",
"navigationBarBackgroundColor": "#F4F5F7"
}
},
{ {
"path": "cert/index", "path": "cert/index",
"style": { "style": {
...@@ -253,69 +263,69 @@ ...@@ -253,69 +263,69 @@
"navigationBarTitleText": "备件押金", "navigationBarTitleText": "备件押金",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
}, },
{ {
"path": "setting/index", "path": "setting/index",
"style": { "style": {
"navigationStyle": "custom", "navigationStyle": "custom",
"navigationBarTitleText": "设置", "navigationBarTitleText": "设置",
"enablePullDownRefresh": false, "enablePullDownRefresh": false,
"disableScroll": true "disableScroll": true
} }
}, },
{ {
"path": "warehouse/index", "path": "warehouse/index",
"style": { "style": {
"navigationStyle": "custom", "navigationStyle": "custom",
"navigationBarTitleText": "备件订单", "navigationBarTitleText": "备件订单",
"enablePullDownRefresh": false, "enablePullDownRefresh": false,
"disableScroll": true "disableScroll": true
} }
}, },
{ {
"path": "warehouse/spare", "path": "warehouse/spare",
"style": { "style": {
"navigationStyle": "custom", "navigationStyle": "custom",
"navigationBarTitleText": "备件库", "navigationBarTitleText": "备件库",
"enablePullDownRefresh": false, "enablePullDownRefresh": false,
"disableScroll": true "disableScroll": true
} }
}, },
{ {
"path": "warehouse/return", "path": "warehouse/return",
"style": { "style": {
"navigationStyle": "custom", "navigationStyle": "custom",
"navigationBarTitleText": "返件信息", "navigationBarTitleText": "返件信息",
"enablePullDownRefresh": false, "enablePullDownRefresh": false,
"disableScroll": true "disableScroll": true
} }
}, },
{ {
"path": "warehouse/searchParts", "path": "warehouse/searchParts",
"style": { "style": {
"navigationStyle": "custom", "navigationStyle": "custom",
"navigationBarTitleText": " ", // 备件单搜索 "navigationBarTitleText": " ", // 备件单搜索
"enablePullDownRefresh": false, "enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#F4F5F7", "navigationBarBackgroundColor": "#F4F5F7",
"disableScroll": true "disableScroll": true
} }
}, },
{ {
"path": "warehouse/express", "path": "warehouse/express",
"style": { "style": {
"navigationStyle": "custom", "navigationStyle": "custom",
"navigationBarTitleText": " ", // 备件单物流 "navigationBarTitleText": " ", // 备件单物流
"enablePullDownRefresh": false, "enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#F4F5F7", "navigationBarBackgroundColor": "#F4F5F7",
"disableScroll": true "disableScroll": true
} }
}, },
{ {
"path": "warehouse/records", "path": "warehouse/records",
"style": { "style": {
"navigationStyle": "custom", "navigationStyle": "custom",
"navigationBarTitleText": "出库记录", "navigationBarTitleText": "出库记录",
"enablePullDownRefresh": false, "enablePullDownRefresh": false,
"disableScroll": true "disableScroll": true
} }
}, },
...@@ -397,24 +407,24 @@ ...@@ -397,24 +407,24 @@
"enablePullDownRefresh": false, "enablePullDownRefresh": false,
"disableScroll": true "disableScroll": true
} }
}, },
{ {
"path": "document-tag", "path": "document-tag",
"style": { "style": {
"navigationBarTitleText": "", // 合作商或品牌标签列表 "navigationBarTitleText": "", // 合作商或品牌标签列表
"navigationStyle": "custom", "navigationStyle": "custom",
"enablePullDownRefresh": false, "enablePullDownRefresh": false,
"disableScroll": true "disableScroll": true
} }
}, },
{ {
"path": "specification", "path": "specification",
"style": { "style": {
"navigationBarTitleText": "", // 完工-产品规格 "navigationBarTitleText": "", // 完工-产品规格
"navigationStyle": "custom", "navigationStyle": "custom",
"enablePullDownRefresh": false, "enablePullDownRefresh": false,
"disableScroll": true "disableScroll": true
} }
}, },
{ {
"path": "parts", "path": "parts",
...@@ -556,7 +566,7 @@ ...@@ -556,7 +566,7 @@
{ {
"path": "addParts", "path": "addParts",
"style": { "style": {
"navigationBarTitleText": "备件选择", "navigationBarTitleText": "备件选择",
"disableScroll": true "disableScroll": true
} }
} }
......
src/pages/mine/wallet/itemizedBills.vue 0 → 100644
View file @ 62402a67
<template>
<view class="itemized-bills">
<w-navbar title="账单详情" />
<view class="content-wrap" v-for="(item, index) in bills" :key="index">
<view class="header">
<view class="header-title">结算单号：{{ item.statementNumber }}</view>
</view>
<view class="body">
<view class="item u-flex u-row-between">
<view>结算类型：{{ item.businessSettlementTypeText }}</view>
<view>结算金额：{{ "￥" + item.settlementAmount }}</view>
</view>
<view class="order-item" v-if="item.order">
<u-read-more
:toggle="true"
:shadow-style="shadowStyle"
:text-indent="0"
close-text="查看更多"
open-text="点击收起"
show-height="72"
>
<view class="order-item-row u-flex">
<view class="order-item-label">工单编号：</view>
<view class="order-item-value">{{ item.order.orderNumber }}</view>
</view>
<view class="order-item-row u-flex">
<view class="order-item-label">合作厂商：</view>
<view class="order-item-value">{{ item.order.partnerCompanyName }}</view>
</view>
<view class="order-item-row u-flex">
<view class="order-item-label">
<view class="brand-text">品牌：</view>
</view>
<view class="order-item-value">{{ item.order.lianbaoBrandName }}</view>
</view>
<view class="order-item-row u-flex">
<view class="order-item-label">客户信息：</view>
<view class="order-item-value">{{ item.order.contactName }}</view>
</view>
<view class="order-item-row u-flex">
<view class="order-item-label">联系方式：</view>
<view class="order-item-value">{{ item.order.contactMobilephone }}</view>
</view>
<view class="order-item-row u-flex u-col-start">
<view class="order-item-label">客户地址：</view>
<view class="order-item-value">{{ item.order.contactFullAddress }}</view>
</view>
</u-read-more>
</view>
</view>
</view>
<u-gap height="60"></u-gap>
</view>
</template>
<script>
export default {
data() {
return {
payableRecordId: "",
bills: [],
shadowStyle: {
backgroundImage: "none",
paddingTop: "0",
marginTop: "20rpx",
},
};
},
computed: {},
onLoad(e) {
getApp().trackPage("账单详情页");
if (e && e.payableRecordId) {
this.payableRecordId = e.payableRecordId;
this.loadItemizedBills();
}
},
methods: {
async loadItemizedBills() {
let res = await this.$u.api.listStatementDetails({payableRecordId: this.payableRecordId});
if (res && res.code == 200 && res.data) {
this.bills = res.data || []
}
},
},
};
</script>
<style lang="scss" scoped>
.itemized-bills {
height: 100vh;
overflow-y: auto;
background-color: #f4f5f7;
.content-wrap {
margin: 20rpx 30rpx;
padding: 0 30rpx;
background: #ffffff;
border-radius: 12px;
display: flow-root;
.header {
padding: 30rpx 0;
font-size: 32rpx;
font-weight: bold;
color: #333333;
line-height: 32rpx;
.header-title {
height: 32rpx;
border-left: 4rpx solid #2272ff;
border-top-left-radius: 2rpx;
border-bottom-left-radius: 2rpx;
padding-left: 20rpx;
}
}
.body {
border-top: 2rpx solid #f4f5f7;
padding-top: 30rpx;
.item {
margin-bottom: 38rpx;
font-size: 28rpx;
font-weight: 500;
color: #333333;
}
.order-item {
margin-bottom: 30rpx;
background: #f4f5f7;
padding: 0 28rpx;
.order-item-row {
line-height: 40rpx;
margin-top: 28rpx;
font-size: 26rpx;
font-weight: 500;
.order-item-label {
width: 130rpx;
color: #666666;
text-align: justify;
text-align-last: justify;
text-justify: inter-ideograph;
align-self: flex-start;
.brand-text {
text-align: justify;
}
}
.order-item-value {
width: 444rpx;
color: #333333;
}
}
}
}
}
}
</style>
src/pages/mine/wallet/settlement.vue
View file @ 62402a67
<template> <template>
<view class="settlement-view"> <view class="settlement-view">
<u-navbar back-icon-color="#333333" background="#F4F5F7" title="结算账单" titleColor="#333333" <u-navbar back-icon-color="#333333" background="#F4F5F7" title="结算账单" titleColor="#333333"
:border-bottom="false" title-bold></u-navbar> :border-bottom="false" title-bold></u-navbar>
<view class="settlement-conten"> <view class="settlement-conten">
<view class="settlement-content-view"> <view class="settlement-content-view">
<view class="head-view"> <view class="head-view">
<view class="head-top-view"> <view class="head-top-view">
<picker mode="date" :value="date" fields="month" @change="bindDateChange"> <picker mode="date" :value="date" fields="month" @change="bindDateChange">
<view class="date-input"> <view class="date-input">
<text class="date-text">{{date}}</text> <text class="date-text">{{date}}</text>
<u-icon name="arrow-down"></u-icon> <u-icon name="arrow-down"></u-icon>
</view> </view>
</picker> </picker>
</view> </view>
<view class="head-bottom-view"> <view class="head-bottom-view">
...@@ -19,16 +19,16 @@ ...@@ -19,16 +19,16 @@
<view class="head-amount-text"><text>{{info.totalAmount}}</text></view> <view class="head-amount-text"><text>{{info.totalAmount}}</text></view>
</view> </view>
</view> </view>
</view> </view>
<image :src="qnFile('liushuibeijing.png')" class="head-back-image" mode="widthFix"></image> <image :src="qnFile('liushuibeijing.png')" class="head-back-image" mode="widthFix"></image>
<view class="list-view" v-if="hasInfo"> <view class="list-view" v-if="hasInfo">
<view class="u-flex u-row-center" v-if="loading"> <view class="u-flex u-row-center" v-if="loading">
<u-gap height="20"></u-gap> <u-gap height="20"></u-gap>
<u-loading color="#2272FF" :show="loading"></u-loading> <u-loading color="#2272FF" :show="loading"></u-loading>
</view> </view>
<view v-else v-for="(item, index) in info.payableRecordExtendDtos" :key="index"> <view v-else v-for="(item, index) in info.payableRecordExtendDtos" :key="index">
<Settlement :data="item"></Settlement> <Settlement :data="item" @open="openItemizedBills"></Settlement>
</view> </view>
</view> </view>
<view class="list-view-empty" v-else> <view class="list-view-empty" v-else>
<u-image class="empty-image" :src="banner" width="374" height="246" mode="widthFix" :fade="false"> <u-image class="empty-image" :src="banner" width="374" height="246" mode="widthFix" :fade="false">
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
</u-image> </u-image>
<text class="desc">本月没有账单信息</text> <text class="desc">本月没有账单信息</text>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
data() { data() {
return { return {
loading: true, loading: true,
info: baseinfo, info: baseinfo,
date: '2021-05', date: '2021-05',
params: { params: {
payableRecordStatus: null, payableRecordStatus: null,
...@@ -73,11 +73,11 @@ ...@@ -73,11 +73,11 @@
banner() { banner() {
return this.qnFile('receipt.png') return this.qnFile('receipt.png')
}, },
}, },
onLoad() { onLoad() {
getApp().trackPage('结算账单列表页') getApp().trackPage('结算账单列表页')
this.loadPayRecord() this.loadPayRecord()
}, },
methods: { methods: {
qnFile(src) { qnFile(src) {
return process.uniEnv.qn_base_url + src return process.uniEnv.qn_base_url + src
...@@ -94,11 +94,14 @@ ...@@ -94,11 +94,14 @@
if(res && res.code == 200) { if(res && res.code == 200) {
self.info = res.data && res.data[self.date] || baseinfo self.info = res.data && res.data[self.date] || baseinfo
} }
}, },
bindDateChange: function(e) { bindDateChange: function(e) {
this.date = e.target.value this.date = e.target.value
this.loadPayRecord() this.loadPayRecord()
}, },
openItemizedBills(payableRecordId) {
this.$u.route({url: "pages/mine/wallet/itemizedBills", params: {payableRecordId: payableRecordId}})
},
} }
} }
</script> </script>
...@@ -108,24 +111,24 @@ ...@@ -108,24 +111,24 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
background-color: #F4F5F7; background-color: #F4F5F7;
.settlement-conten { .settlement-conten {
overflow: auto; overflow: auto;
.settlement-content-view { .settlement-content-view {
margin: 10rpx 30rpx 30rpx 30rpx; margin: 10rpx 30rpx 30rpx 30rpx;
border-radius: 12rpx; border-radius: 12rpx;
position: relative; position: relative;
border-radius: 12rpx; border-radius: 12rpx;
background-color: #FFFFFF; background-color: #FFFFFF;
.head-back-image { .head-back-image {
position: relative; position: relative;
width: 100%; width: 100%;
z-index: 0; z-index: 0;
} }
.head-view { .head-view {
z-index: 1; z-index: 1;
padding: 30rpx; padding: 30rpx;
color: #FFFFFF; color: #FFFFFF;
...@@ -134,14 +137,14 @@ ...@@ -134,14 +137,14 @@
width: 100%; width: 100%;
.head-top-view { .head-top-view {
margin-top: 10rpx; margin-top: 10rpx;
margin-bottom: 50rpx; margin-bottom: 50rpx;
.date-input { .date-input {
.date-text { .date-text {
padding-right: 10rpx; padding-right: 10rpx;
font-size: 28rpx; font-size: 28rpx;
} }
} }
} }
.head-bottom-view { .head-bottom-view {
...@@ -158,11 +161,11 @@ ...@@ -158,11 +161,11 @@
} }
} }
} }
} }
.list-view { .list-view {
position: relative; position: relative;
z-index: 1; z-index: 1;
padding-bottom: 20rpx; padding-bottom: 20rpx;
} }
.list-view-empty { .list-view-empty {
position: relative; position: relative;
...@@ -183,7 +186,7 @@ ...@@ -183,7 +186,7 @@
line-height: 40px; line-height: 40px;
} }
} }
} }
} }
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment