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){
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 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);
// 获取我的钱包-师傅提现
......@@ -235,6 +237,7 @@ let orderApiFun = function(vm){
getAssets,
listStatement,
payableRecord,
listStatementDetails,
workerApplyPay,
allowLogin,
otherUser,
......
src/components/mine/settlement.vue
View file @ 62402a67
......@@ -3,14 +3,14 @@
<view class="settlement-com-view" @click="$u.throttle(handleClick, 500)">
<view class="left-view">
<view class="time-view">{{timeText}}</view>
<view class="order-view">
<view class="order-view" @click="$u.throttle(showSettlement, 500)">
<text>提现编号：</text>
<text>{{data.payableRecordNumber}}</text>
</view>
</view>
<view class="right-view">
<view :class="['settlement-status-view', settlementTypeClass]">{{data.payableRecordStatusText}}</view>
<view class="settlement-amount-view">-{{data.settlementAmount}}</view>
<view class="right-view">
<view :class="['settlement-status-view', settlementTypeClass]">{{data.payableRecordStatusText}}</view>
<view class="settlement-amount-view">-{{data.settlementAmount}}</view>
</view>
</view>
<view class="line-view"></view>
......@@ -27,6 +27,7 @@
paymentTime: new Date().getTime(),
payableRecordStatusText: '提现',
payableRecordNumber: 'EE999777',
payableRecordId: '',
settlementAmount: 9899
}
},
......@@ -64,18 +65,21 @@
return this.$u.timeFormat(this.data.updateDatetime, 'mm.dd')
}
}
},
methods: {
handleClick() {
this.$emit('click', this.data.orderId)
}
},
methods: {
handleClick() {
this.$emit('click', this.data.orderId)
},
showSettlement() {
this.$emit('open', this.data.payableRecordId)
}
}
}
</script>
<style lang="scss" scoped>
.settlement-view {
height: 212rpx;
.settlement-view {
height: 212rpx;
.settlement-com-view {
display: flex;
......@@ -102,41 +106,41 @@
}
}
.right-view {
display: flex;
flex-direction: column;
align-items: flex-end;
.settlement-status-view {
border-radius: 8rpx;
border: 2rpx solid #FF930D;
font-size: 20rpx;
color: #FF930D;
width: 80rpx;
height: 40rpx;
text-align: center;
padding-top: 4rpx;
margin-right: 10rpx;
&.settlement-type-y {
border: 2rpx solid #FF930D;
color: #FF930D;
}
&.settlement-type-h {
border: 2rpx solid #2272FF;
color: #2272FF;
}
}
.settlement-amount-view {
font-size: 40rpx;
font-weight: bold;
color: #FA5A49;
margin-top: 30rpx;
}
.right-view {
display: flex;
flex-direction: column;
align-items: flex-end;
.settlement-status-view {
border-radius: 8rpx;
border: 2rpx solid #FF930D;
font-size: 20rpx;
color: #FF930D;
width: 80rpx;
height: 40rpx;
text-align: center;
padding-top: 4rpx;
margin-right: 10rpx;
&.settlement-type-y {
border: 2rpx solid #FF930D;
color: #FF930D;
}
&.settlement-type-h {
border: 2rpx solid #2272FF;
color: #2272FF;
}
}
.settlement-amount-view {
font-size: 40rpx;
font-weight: bold;
color: #FA5A49;
margin-top: 30rpx;
}
}
}
......@@ -146,4 +150,4 @@
margin: 0 30rpx;
}
}
</style>
</style>
src/pages.json
View file @ 62402a67
......@@ -202,6 +202,16 @@
"navigationBarBackgroundColor": "#F4F5F7"
}
},
{
"path": "wallet/itemizedBills",
"style": {
"navigationBarTitleText": "账单详情",
"enablePullDownRefresh": false,
"disableScroll": true,
"navigationStyle": "custom",
"navigationBarBackgroundColor": "#F4F5F7"
}
},
{
"path": "cert/index",
"style": {
......@@ -253,69 +263,69 @@
"navigationBarTitleText": "备件押金",
"enablePullDownRefresh": false
}
},
{
"path": "setting/index",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "设置",
"enablePullDownRefresh": false,
"disableScroll": true
}
},
{
"path": "setting/index",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "设置",
"enablePullDownRefresh": false,
"disableScroll": true
}
},
{
"path": "warehouse/index",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "备件订单",
"enablePullDownRefresh": false,
"disableScroll": true
}
},
{
"path": "warehouse/spare",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "备件库",
"enablePullDownRefresh": false,
"disableScroll": true
}
},
{
"path": "warehouse/return",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "返件信息",
"enablePullDownRefresh": false,
"disableScroll": true
}
},
{
"path": "warehouse/searchParts",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": " ", // 备件单搜索
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#F4F5F7",
"disableScroll": true
}
},
{
"path": "warehouse/express",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": " ", // 备件单物流
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#F4F5F7",
"disableScroll": true
}
"enablePullDownRefresh": false,
"disableScroll": true
}
},
{
"path": "warehouse/spare",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "备件库",
"enablePullDownRefresh": false,
"disableScroll": true
}
},
{
"path": "warehouse/return",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "返件信息",
"enablePullDownRefresh": false,
"disableScroll": true
}
},
{
"path": "warehouse/searchParts",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": " ", // 备件单搜索
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#F4F5F7",
"disableScroll": true
}
},
{
"path": "warehouse/express",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": " ", // 备件单物流
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#F4F5F7",
"disableScroll": true
}
},
{
"path": "warehouse/records",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "出库记录",
"enablePullDownRefresh": false,
"enablePullDownRefresh": false,
"disableScroll": true
}
},
......@@ -397,24 +407,24 @@
"enablePullDownRefresh": false,
"disableScroll": true
}
},
{
"path": "document-tag",
"style": {
"navigationBarTitleText": "", // 合作商或品牌标签列表
"navigationStyle": "custom",
"enablePullDownRefresh": false,
"disableScroll": true
}
},
{
"path": "specification",
"style": {
"navigationBarTitleText": "", // 完工-产品规格
"navigationStyle": "custom",
"enablePullDownRefresh": false,
"disableScroll": true
}
},
{
"path": "document-tag",
"style": {
"navigationBarTitleText": "", // 合作商或品牌标签列表
"navigationStyle": "custom",
"enablePullDownRefresh": false,
"disableScroll": true
}
},
{
"path": "specification",
"style": {
"navigationBarTitleText": "", // 完工-产品规格
"navigationStyle": "custom",
"enablePullDownRefresh": false,
"disableScroll": true
}
},
{
"path": "parts",
......@@ -556,7 +566,7 @@
{
"path": "addParts",
"style": {
"navigationBarTitleText": "备件选择",
"navigationBarTitleText": "备件选择",
"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>
<view class="settlement-view">
<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-content-view">
<view class="settlement-content-view">
<view class="head-view">
<view class="head-top-view">
<picker mode="date" :value="date" fields="month" @change="bindDateChange">
<view class="date-input">
<text class="date-text">{{date}}</text>
<u-icon name="arrow-down"></u-icon>
</view>
<view class="head-top-view">
<picker mode="date" :value="date" fields="month" @change="bindDateChange">
<view class="date-input">
<text class="date-text">{{date}}</text>
<u-icon name="arrow-down"></u-icon>
</view>
</picker>
</view>
<view class="head-bottom-view">
......@@ -19,16 +19,16 @@
<view class="head-amount-text"><text>{{info.totalAmount}}</text></view>
</view>
</view>
</view>
<image :src="qnFile('liushuibeijing.png')" class="head-back-image" mode="widthFix"></image>
</view>
<image :src="qnFile('liushuibeijing.png')" class="head-back-image" mode="widthFix"></image>
<view class="list-view" v-if="hasInfo">
<view class="u-flex u-row-center" v-if="loading">
<u-gap height="20"></u-gap>
<u-loading color="#2272FF" :show="loading"></u-loading>
</view>
<view v-else v-for="(item, index) in info.payableRecordExtendDtos" :key="index">
<Settlement :data="item"></Settlement>
</view>
</view>
<view v-else v-for="(item, index) in info.payableRecordExtendDtos" :key="index">
<Settlement :data="item" @open="openItemizedBills"></Settlement>
</view>
</view>
<view class="list-view-empty" v-else>
<u-image class="empty-image" :src="banner" width="374" height="246" mode="widthFix" :fade="false">
......@@ -37,7 +37,7 @@
</u-image>
<text class="desc">本月没有账单信息</text>
</view>
</view>
</view>
</view>
</view>
</template>
......@@ -54,7 +54,7 @@
data() {
return {
loading: true,
info: baseinfo,
info: baseinfo,
date: '2021-05',
params: {
payableRecordStatus: null,
......@@ -73,11 +73,11 @@
banner() {
return this.qnFile('receipt.png')
},
},
},
onLoad() {
getApp().trackPage('结算账单列表页')
this.loadPayRecord()
},
},
methods: {
qnFile(src) {
return process.uniEnv.qn_base_url + src
......@@ -94,11 +94,14 @@
if(res && res.code == 200) {
self.info = res.data && res.data[self.date] || baseinfo
}
},
bindDateChange: function(e) {
},
bindDateChange: function(e) {
this.date = e.target.value
this.loadPayRecord()
},
this.loadPayRecord()
},
openItemizedBills(payableRecordId) {
this.$u.route({url: "pages/mine/wallet/itemizedBills", params: {payableRecordId: payableRecordId}})
},
}
}
</script>
......@@ -108,24 +111,24 @@
display: flex;
flex-direction: column;
height: 100vh;
background-color: #F4F5F7;
.settlement-conten {
overflow: auto;
background-color: #F4F5F7;
.settlement-conten {
overflow: auto;
.settlement-content-view {
margin: 10rpx 30rpx 30rpx 30rpx;
border-radius: 12rpx;
position: relative;
border-radius: 12rpx;
border-radius: 12rpx;
position: relative;
border-radius: 12rpx;
background-color: #FFFFFF;
.head-back-image {
position: relative;
width: 100%;
z-index: 0;
position: relative;
width: 100%;
z-index: 0;
}
.head-view {
.head-view {
z-index: 1;
padding: 30rpx;
color: #FFFFFF;
......@@ -134,14 +137,14 @@
width: 100%;
.head-top-view {
margin-top: 10rpx;
margin-bottom: 50rpx;
.date-input {
.date-text {
padding-right: 10rpx;
font-size: 28rpx;
}
}
margin-top: 10rpx;
margin-bottom: 50rpx;
.date-input {
.date-text {
padding-right: 10rpx;
font-size: 28rpx;
}
}
}
.head-bottom-view {
......@@ -158,11 +161,11 @@
}
}
}
}
.list-view {
position: relative;
z-index: 1;
padding-bottom: 20rpx;
}
.list-view {
position: relative;
z-index: 1;
padding-bottom: 20rpx;
}
.list-view-empty {
position: relative;
......@@ -183,7 +186,7 @@
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