Skip to content

S
self-support
Commit bf128999 authored by Damon's avatar Damon
Browse files
Options

feat: 钱包优化-静态页面

parent fe6667de
Hide whitespace changes
Inline Side-by-side
Showing with 192 additions and 13 deletions
src/pages.json
View file @ bf128999
......@@ -252,6 +252,16 @@
"navigationBarBackgroundColor": "#F4F5F7"
}
},
{
"path": "wallet/settlementDetail",
"style": {
"navigationBarTitleText": "结算详情",
"enablePullDownRefresh": false,
"disableScroll": true,
"navigationStyle": "custom",
"navigationBarBackgroundColor": "#F4F5F7"
}
},
{
"path": "cert/index",
"style": {
......
src/pages/mine/wallet/itemizedBills.vue
View file @ bf128999
<template>
<view class="itemized-bills">
<w-navbar title="账单详情" />
<u-search
v-model="keyword"
bg-color="#FFFFFF"
placeholder="请输入客户姓名或手机号"
search-icon-color="#999999"
color="#333333"
placeholder-color="#999999"
height="72"
margin="0 30rpx"
:animation="true"
:show-action="true"
:action-style="{
'font-size': '32rpx',
'font-weight': 500,
color: '#2272FF',
}"
:focus="true"
@search="searchBills"
@custom="searchBills"
></u-search>
<view class="content-wrap" v-for="(item, index) in bills" :key="index">
<view class="header">
<view class="header-title">结算单号：{{ item.statementNumber }}</view>
......@@ -18,11 +38,12 @@
:text-indent="0"
close-text="查看更多"
open-text="点击收起"
show-height="72"
show-height="80"
>
<view class="order-item-row u-flex">
<view class="order-item-label">工单编号：</view>
<view class="order-item-value">{{ item.order.orderNumber }}</view>
<view class="order-item-value" @click="copyName(item.order.orderNumber)">{{ item.order.orderNumber }}</view>
<view class="jf-line u-margin-left-30" @click="toDetail(item)">结算详情</view>
</view>
<view class="order-item-row u-flex">
<view class="order-item-label">合作厂商：</view>
......@@ -65,11 +86,15 @@ export default {
paddingTop: "0",
marginTop: "20rpx",
},
keyword: ''
};
},
computed: {},
onLoad(e) {
getApp().trackPage("账单详情页");
// // 调试用
// let e = wx.getLaunchOptionsSync().query
// console.log("e", e)
if (e && e.payableRecordId) {
this.payableRecordId = e.payableRecordId;
this.loadItemizedBills();
......@@ -82,6 +107,20 @@ export default {
this.bills = res.data || []
}
},
searchBills(value) {
this.keyword = value
this.loadItemizedBills()
},
copyName(name) {
uni.setClipboardData({
data: name
})
},
toDetail(item) {
uni.navigateTo({
url: `/pages/mine/wallet/settlementDetail?statementNumber=${item.statementNumber}`
})
}
},
};
</script>
......@@ -150,10 +189,19 @@ export default {
}
}
.order-item-value {
width: 444rpx;
max-width: 444rpx;
color: #333333;
}
.jf-line {
width: 130rpx;
height: 52rpx;
border-radius: 26rpx;
background-color: #2272ff;
color: #fff;
text-align: center;
font-size: 24rpx;
line-height: 52rpx;
}
}
}
}
......
src/pages/mine/wallet/settlement.vue
View file @ bf128999
......@@ -4,7 +4,7 @@
:border-bottom="false" title-bold></u-navbar>
<view class="settlement-conten">
<view class="settlement-content-view">
<view class="head-view">
<view class="head-view" :style="{background: 'url('+qnFile('liushuibeijing.png')+') no-repeat', 'background-size': '100% 100%'}">
<view class="head-top-view">
<picker mode="date" :value="date" fields="month" @change="bindDateChange">
<view class="date-input">
......@@ -22,8 +22,10 @@
<view class="head-amount-text"><text>{{info.waitPaidAmount || 0}}</text></view> -->
</view>
</view>
<u-line color="#e4e7ed69" />
<view class="tips">提示：状态为“部分支付”则代表本月只支付了该笔支付单的一半</view>
</view>
<image :src="qnFile('liushuibeijing.png')" class="head-back-image" mode="widthFix"></image>
<!-- <image :src="qnFile('liushuibeijing.png')" class="head-back-image"></image> -->
<view class="list-view" v-if="hasInfo">
<view class="u-flex u-row-center" v-if="loading">
<u-gap height="20"></u-gap>
......@@ -123,12 +125,11 @@
margin: 10rpx 30rpx 30rpx 30rpx;
border-radius: 12rpx;
position: relative;
border-radius: 12rpx;
background-color: #FFFFFF;
.head-back-image {
position: relative;
width: 100%;
height: 185px;
z-index: 0;
}
......@@ -136,10 +137,8 @@
z-index: 1;
padding: 30rpx;
color: #FFFFFF;
position: absolute;
width: 100%;
position: relative;
width: 100%;
.head-top-view {
margin-top: 10rpx;
margin-bottom: 50rpx;
......@@ -155,7 +154,7 @@
display: flex;
align-items: flex-start;
justify-content: space-between;
padding-bottom: 20rpx;
.head-amount-view {
font-size: 24rpx;
......@@ -165,6 +164,11 @@
}
}
}
.tips {
font-size: 24rpx;
padding-top: 20rpx;
}
}
.list-view {
position: relative;
......
src/pages/mine/wallet/settlementDetail.vue 0 → 100644
View file @ bf128999
<template>
<view class="wrap">
<w-navbar title="结算详情" />
<view class="content">
<view class="rules">
<view class="title">结算类型</view>
<view class="table">
<u-table align="left" padding="15rpx">
<u-tr>
<u-th>结算类型</u-th>
<u-th>结算金额</u-th>
</u-tr>
<u-tr>
<u-td>保内工单</u-td>
<u-td>350</u-td>
</u-tr>
<u-tr>
<u-td>合计</u-td>
<u-td>350</u-td>
</u-tr>
</u-table>
</view>
</view>
<view class="rules">
<view class="title">备注</view>
<view class="table">
<u-table align="left" padding="15rpx">
<u-tr>
<u-th class="name">备注人</u-th>
<u-th class="remark">结算备注信息</u-th>
<u-th class="time">备注时间</u-th>
</u-tr>
<u-tr>
<u-td class="name">钟明媚</u-td>
<u-td class="remark">结算备注信息结算备注信息结算备注信息结算备注信息结算备注信息</u-td>
<u-td class="time">2021-10-14 10:52</u-td>
</u-tr>
</u-table>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
statementNumber: ''
};
},
computed: {},
onLoad(e) {
getApp().trackPage("结算详情页")
console.log("e", e)
if (e && e.statementNumber) {
this.statementNumber = e.statementNumber;
this.getDetail()
}
},
methods: {
async getDetail() {
// let res = await this.$u.api.listStatementDetails({payableRecordId: this.payableRecordId});
// if (res && res.code == 200 && res.data) {
// console.log("res", res)
// }
}
}
}
</script>
<style lang="scss" scoped>
.wrap {
background-color: #F4F5F7;
padding: 30rpx;
.content {
padding: 30rpx;
width: 690rpx;
min-height: 1120rpx;
background: #FFFFFF;
border-radius: 12rpx;
display: flex;
flex-direction: column;
align-items: center;
.rules {
align-self: flex-start;
margin-top: 20rpx;
width: 100%;
.title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
line-height: 32rpx;
margin-bottom: 10rpx;
}
.table {
margin: 40rpx 0;
width: 100%;
.tr {
display: flex;
}
.name {
flex: 0 0 20%;
}
.remark {
flex: 0 0 50%;
}
.time {
flex: 0 0 30%;
}
}
}
}
}
</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