Skip to content

X
xzf_uniapp-wechat-web
Commit 6586451d authored by 李智书's avatar 李智书
Browse files
Options

1.日常缴费;

parent 27f59ec4
Hide whitespace changes
Inline Side-by-side
Showing with 1266 additions and 40 deletions
src/pages/StudentPayment/PayProgress/PayProgress.vue
View file @ 6586451d
<template>
<view class="tainer">
<van-dialog v-model="dialogShow" :show-confirm-button="false" :show-cancel-button="false"
:closeOnClickOverlay="true">
<view class="OneExpeditingBox">
<image style="width: 88rpx;height: 88rpx;" mode='widthFix' :src="ImgUrl+'StudentPayment/Tips.png'">
</image>
<view class="title1">
是否发送信息
</view>
<view class="title2">
给未交纳费用的家长发送信息，提醒其
交纳费用？
</view>
<view class="" style="background: #E6E6E6;height: 1rpx; margin-top: 30rpx;">
</view>
<view class="dialogBtnGrou">
<view class="cancelBtn" @click="dialogShow=false">
取消
</view>
<view class="" style="background: #E6E6E6;width: 1rpx;">
</view>
<view class="confirmBtn" @click="OneExpediting(OneExpeditingData)">
确认
</view>
</view>
</view>
</van-dialog>
<van-tabs ref="tabs" title-inactive-color="#999999" title-active-color="#333333" sticky animated
v-model:active="active" swipeable color="#01CB88" background="#FFFFFF" line-width="30px" line-height="4px"
@change="PayProjectTab">
......@@ -7,23 +33,30 @@
<!-- 收费项目 -->
<view class="ListBox">
<view class="" v-if="ChargePaymentPageList.length>0">
<view class="container ProjectList" v-for="(item,index) in ChargePaymentPageList" :key="index"
@tap="PayProgressDetails(item)">
<view class="listitem top">
<view class="container ProjectList" v-for="(item,index) in ChargePaymentPageList" :key="index">
<view class="listitem top" @tap="PayProgressDetails(item)">
<view class="title">
{{item.chargeName}}
</view>
<view class="money">
{{item.amountMust}}
</view>
</view>
<view class="listitem center">
<text class="describe">
{{item.descInfo||""}}
</text>
<view class="hairline"
style="width: 620rpx;height: 1rpx;background-color: #E6E6E6;margin: 0 auto;margin-top: 28rpx;">
</view>
<view class="contentTxt">
<view class="left">
<text>未交纳人数：</text>
<text>{{item.nopayNum}}</text>
</view>
<view class="right">
<text>已交纳人数：</text>
<text>{{item.paiedNum}}</text>
</view>
</view>
<view class="listitem botto" style="align-items: baseline;">
<van-icon name="clock-o" /> <text class="Tips">{{item.diffTime}}收费结束</text>
<view class="OneExpediting" @click="OneExpeditingPop(item)">
一键催交
</view>
</view>
</view>
<view class="bottomtxt">已经到底啦~</view>
......@@ -46,17 +79,19 @@
<view class="title">
{{item.chargeName}}
</view>
<view class="money" v-if="false">
{{item.amountMust}}
</view>
</view>
<view class="listitem center">
<text class="describe">
{{item.descInfo||""}}
</text>
<view class="hairline"
style="width: 620rpx;height: 1rpx;background-color: #E6E6E6;margin: 0 auto;margin-top: 28rpx;">
</view>
<view class="listitem botto" style="align-items: baseline;">
<van-icon name="clock-o" /> <text class="Tips">5天后收费结束</text>
<view class="contentTxt">
<view class="left">
<text>未交纳人数：</text>
<text>{{item.nopayNum}}</text>
</view>
<view class="right">
<text>已交纳人数：</text>
<text>{{item.paiedNum}}</text>
</view>
</view>
</view>
<view class="bottomtxt">已经到底啦~</view>
......@@ -90,7 +125,11 @@
pageCurrent: 1,
pageSize: 10,
total: 0,
allData: {}
allData: {},
// 弹框
dialogShow: false,
// 一键催缴的数据
OneExpeditingData: {}
}
},
onLoad: function(options) {
......@@ -122,6 +161,50 @@
this.queryChargeEndPage()
},
methods: {
// 一键催缴弹框
async OneExpeditingPop(ItemData) {
try {
this.dialogShow = true;
this.OneExpeditingData = ItemData
} catch (e) {
//TODO handle the exception
console.log(e);
uni.showToast({
icon: "none",
mask: true,
title: e.message
})
}
},
// 一键催缴
async OneExpediting() {
try {
let data = await this.$http.post({
url: orderApi + '/order-charge/teacher/charge/paymentNoticeAll'
}, {
"chargeId": this.OneExpeditingData ? this.OneExpeditingData.id : '',
"schoolId": this.allData.schoolId,
})
if (data.code != 200) {
this.dialogShow = false;
uni.showToast({
icon: "none",
mask: true,
title: data.msg
})
return
}
this.dialogShow = false;
} catch (e) {
//TODO handle the exception
console.log(e);
uni.showToast({
icon: "none",
mask: true,
title: e.message
})
}
},
// 切换tab
async PayProjectTab(index) {
try {
......@@ -160,6 +243,13 @@
let tmp = data.data.records;
let newArr = []
for (let s of tmp) {
let diffTime = dayjs(s.endTime).diff(new Date(), 'hour');
if (diffTime > 24) {
diffTime = dayjs(s.endTime).diff(new Date(), 'day');
s.diffTime = diffTime + ' 天后'
} else {
s.diffTime = 1 + ' 天后'
}
newArr.push(s)
}
if (this.pageCurrent == 1) {
......@@ -220,7 +310,7 @@
return
}
} else {
this.ChargeEndPageList = [1, 2, 3, 4, 5]
this.ChargeEndPageList = []
}
} catch (e) {
......@@ -239,7 +329,7 @@
console.log(data);
uni.setStorageSync("PayProgressDetails", data)
uni.navigateTo({
url: "../PayProgressDetails/PayProgressDetails?chargeId=" + data.id || ''
url: `../PayProgressDetails/PayProgressDetails?active=${this.active}&chargeId=${data.id ||''}`
})
} catch (e) {
//TODO handle the exception
......@@ -267,6 +357,52 @@
}
}
.tainer {
.OneExpeditingBox {
text-align: center;
margin-top: 50rpx;
}
.title1 {
font-size: 36rpx;
font-family: PingFang SC;
font-weight: bold;
color: #666666;
}
.title2 {
width: 440rpx;
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
margin: 0 auto;
margin-top: 30rpx;
}
.dialogBtnGrou {
height: 88rpx;
line-height: 88rpx;
display: flex;
justify-content: space-around;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
.cancelBtn {
width: 100%;
color: #999999;
}
.confirmBtn {
width: 100%;
color: #01CB88;
}
}
}
.ListBox {
width: 750rpx;
min-height: 100%;
......@@ -276,7 +412,6 @@
.container {
width: 686rpx;
height: 250rpx;
background: #FFFFFF;
border-radius: 16rpx;
margin: 0 auto;
......@@ -335,16 +470,80 @@
}
.botto {
padding-top: 30rpx;
// padding-top: 30rpx;
padding-left: 32rpx;
font-size: 24rpx;
font-weight: 500;
color: #BABABA;
height: 95rpx;
.Tips {
padding-left: 10rpx;
}
}
.contentTxt {
width: 620rpx;
margin: 0 auto;
display: flex;
flex-direction: row;
height: 100rpx;
line-height: 100rpx;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
.left,
.right {
display: flex;
align-items: center;
}
.left text:nth-child(2) {
font-size: 36rpx;
font-family: DIN;
font-weight: 500;
color: #FF3B00;
}
.right {
padding-left: 79rpx;
}
.right text:nth-child(2) {
font-size: 36rpx;
font-family: DIN;
font-weight: 500;
color: #333333;
}
}
.OneExpediting {
width: 176rpx;
height: 60rpx;
background: #01CB88;
border-radius: 30rpx;
text-align: center;
line-height: 60rpx;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
position: relative;
left: 250rpx;
}
}
.ProjectHistory {}
......
src/pages/StudentPayment/PayProgressDetails/PayProgressDetails.vue
View file @ 6586451d
<template>
<view class="contaner">
缴费进度详情
<view class="queryBox">
<view class="search">
<van-search class="inputSearch" v-model="searchValue" show-action placeholder="请输入姓名查询"
@search="onSearch">
<template #action>
<div class="SearchBtn" @click="onSearch">查询</div>
</template>
</van-search>
</view>
<van-dropdown-menu active-color="#01CB88">
<van-dropdown-item v-model="classId" @change="dropItemChange1" :options="option1" />
<van-dropdown-item v-model="payStatus" @change="dropItemChange2" :options="option2" />
</van-dropdown-menu>
</view>
<!-- 数据列表 -->
<view class="ChargeUserPageListBox" v-if="ChargeUserPageList.length>0">
<view class="PageItemList" v-for="(item,index) in ChargeUserPageList" :key="index">
<view class="hrow">
<view class="left ">
<text class="name">{{item.userName||'1111'}}</text>
<text class="payStatus" v-if="item.payStatus==2"
:style="{'background':'#FFECE6','color': '#FF3B00'}">未交纳</text>
<text class="payStatus" v-if="item.payStatus==1"
:style="{'background':'#E4FBF3','color': '#01CB88'}">已交纳</text>
</view>
<view class="right" v-if="item.payStatus==1">
<text>实交纳：</text>
<text class="money">{{item.amount/100||""}}</text>
</view>
</view>
<view class="paymentNotice" @tap="paymentNotice(item)" v-if="item.payStatus==2&&allData.active==0">
催交
</view>
<view class="class_name">
<text>{{item.userClass||'一年级/102班'}}</text>
</view>
</view>
</view>
<!-- -->
<view class="noData" v-else>
<image style="width: 301rpx;height: 258rpx;" :src="ImgUrl+'StudentPayment/NoRecord.png'" mode='widthFix'>
</image>
<view>暂无更多数据</view>
</view>
</view>
</template>
<script>
// 时间处理模块
import dayjs from 'dayjs'
let orderApi = window.location.origin
export default {
name: "PayProgressDetails",
data() {
return {
searchValue: "",
classId: 0,
payStatus: '',
option1: [{
text: '请选择',
value: 0
},
{
text: '当前教职工管理年级',
value: 1
},
{
text: '当前选择年级下的班级',
value: 2
},
],
option2: [{
text: '请选择',
value: ''
},
{
text: '已交费',
value: 1
},
{
text: '未交费',
value: 2
},
],
ImgUrl: this.$ImgUrl,
pageCurrent: 1,
pageSize: 10,
total: 0,
// 交费项目用户分页查询
ChargeUserPageList: [],
}
},
onLoad: function(options) {
let personalInfo = uni.getStorageSync("personalInfo")
this.allData = Object.assign(options, personalInfo)
this.queryChargeUserPage(options.chargeId)
},
onReachBottom: function(e) {
console.log("onReachBottom", e);
this.pageCurrent = this.pageCurrent + 1
},
methods: {
// 一键催缴
async paymentNotice(item) {
try {
let data = await this.$http.post({
url: orderApi + '/order-charge/teacher/charge/paymentNotice'
}, {
"chargeId": item.id,
"schoolId": this.allData.schoolId,
"userId": this.allData.userId || this.allData.userID
})
if (data.code != 200) {
this.dialogShow = false;
uni.showToast({
icon: "none",
mask: true,
title: data.msg
})
return
}
} catch (e) {
//TODO handle the exception
console.log(e);
uni.showToast({
icon: "none",
mask: true,
title: e.message
})
}
},
// 下拉选择
async dropItemChange1(value) {
try {
console.warn(value)
this.queryChargeUserPage(this.allData.chargeId, this.searchValue)
} catch (e) {
//TODO handle the exception
console.log(e);
uni.showToast({
icon: "none",
mask: true,
title: e.message
})
}
},
async dropItemChange2(value) {
try {
console.warn(value)
this.queryChargeUserPage(this.allData.chargeId, this.searchValue)
} catch (e) {
//TODO handle the exception
console.log(e);
uni.showToast({
icon: "none",
mask: true,
title: e.message
})
}
},
// 搜索框
async onSearch(value) {
try {
console.warn(value)
this.queryChargeUserPage(this.allData.chargeId, this.searchValue)
} catch (e) {
//TODO handle the exception
console.log(e);
uni.showToast({
icon: "none",
mask: true,
title: e.message
})
}
},
// 交费项目用户分页查询
async queryChargeUserPage(chargeId, userName) {
try {
let data = await this.$http.post({
url: orderApi + '/order-charge/teacher/charge/queryChargeUserPage'
}, {
userName,
chargeId,
"classId": this.classId,
"pageCurrent": this.pageCurrent,
"pageSize": this.pageSize,
"payStatus": this.payStatus,
"schoolId": this.allData.schoolId,
"userId": this.allData.userId || this.allData.userID
})
if (data.code != 200) {
uni.showToast({
icon: "none",
mask: true,
title: data.msg
})
this.ChargeUserPageList = []
return
}
if (data.data.records && Array.isArray(data.data.records)) {
let tmp = data.data.records;
let newArr = []
// [1, 2, 3, 4, 5, 6].map(v => {
// return {
// payStatus: parseInt(Math.random() * 2) + 1,
// amount: "100",
// id: 1
// }
// })
for (let s of tmp) {
newArr.push(s)
}
if (this.pageCurrent == 1) {
this.ChargeUserPageList = newArr
return
}
if (this.pageCurrent > 1) {
this.ChargeUserPageList.push(...newArr)
return
}
} else {
this.ChargeUserPageList = []
}
} catch (e) {
//TODO handle the exception
console.log(e);
uni.showToast({
icon: "none",
mask: true,
title: e.message
})
}
},
}
}
</script>
<style>
<style lang="scss">
page {
background: #F3F5F6;
}
.noData {
text-align: center;
margin-top: 316rpx;
image {
position: relative;
}
}
.queryBox {
background: #FFFFFF;
padding-top: 12rpx;
.search {
width: 686rpx;
height: 70rpx;
background: #FFFFFF;
border: 2rpx solid #01CB88;
border-radius: 35rpx;
margin: 0 auto;
.SearchBtn {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #01CB88;
}
.inputSearch {
height: 100%;
width: 92%;
margin: 0 auto;
padding: 0 !important;
}
}
}
.ChargeUserPageListBox {
padding-top: 10rpx;
.PageItemList {
width: 686rpx;
height: 170rpx;
background: #FFFFFF;
border-radius: 24rpx;
margin: 0 auto;
margin-top: 20rpx;
padding-left: 32rpx;
padding-right: 32rpx;
position: relative;
}
.paymentNotice {
width: 118rpx;
height: 60rpx;
background: #01CB88;
border-radius: 30rpx;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
text-align: center;
line-height: 60rpx;
position: absolute;
right: 32rpx;
bottom: 55rpx;
}
.hrow {
display: flex;
justify-content: space-between;
.left {
display: flex;
align-items: center;
height: 100rpx;
.name {
font-size: 42rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
}
}
.payStatus {
width: 94rpx;
height: 34rpx;
border-radius: 8rpx;
line-height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
text-align: center;
margin-left: 20rpx;
}
.right {
height: 100rpx;
line-height: 100rpx;
display: flex;
align-items: center;
}
.right text:nth-child(1) {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
}
.right text:nth-child(2) {
font-size: 36rpx;
font-family: DIN;
font-weight: 500;
color: #333333;
}
}
.class_name {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
}
}
</style>
src/pages/StudentPayment/PayProject/PayProject.vue
View file @ 6586451d
......@@ -50,19 +50,23 @@
{{item.amountMust}}
</view>
</view>
<view class="hairline" style="width: 686rpx;height: 1rpx; background-color:#E6E6E6;margin-top: 28rpx;">
</view>
<view class="History">
<view class="Historyitem">
<span>实交金额:</span>
<span class="money">{{item.realAmount/100||""}}</span>
</view>
<view class="Historyitem">
<span>交费时间:</span>
<span>{{item.payTime||""}}</span>
</view>
</view>
<view class="listitem center">
<text class="describe">
{{item.descInfo||""}}
</text>
</view>
<view class="listitem botto" style="align-items: baseline;">
<span>实交金额:</span>
<view style="margin-left: 26rpx;margin-right: 26rpx;width: 50rpx;text-align: center;">
{{item.realAmount/100||""}}
</view>
<span>交费时间:</span>
<view style="margin-left: 26rpx;margin-right: 26rpx;">{{item.payTime||""}}</view>
</view>
</view>
<view class="bottomtxt">已经到底啦~</view>
</view>
......@@ -372,7 +376,42 @@
}
}
.ProjectHistory {}
.ProjectHistory {
height: 330rpx;
background: #FFFFFF;
border-radius: 16rpx;
.money {
font-size: 36rpx;
font-family: DIN;
font-weight: bold;
color: #01CB88;
}
.money::before {
content: "￥";
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #01CB88;
}
.describe {
padding-top: 20rpx !important;
}
.History {
width: 630rpx;
margin: 0 auto;
.Historyitem {
height: 60rpx;
line-height: 60rpx;
display: flex;
justify-content: space-between;
}
}
}
.listitem {
display: flex;
......
src/pages/StudentPayment/PayProjectHistoryDetails/PayProjectHistoryDetails.vue
View file @ 6586451d
<template>
<view class="container">
缴费历史详情
<view class="tainer">
<view class="headerImg">
<view style="width: 686rpx;height: 60rpx;margin: 0 auto;padding-top: 44rpx;">
<image style="width: 686rpx;height: 60rpx;" :src="ImgUrl+'StudentPayment/bg3.png'" mode='widthFix'>
</image>
</view>
<view class="cardInfo">
<view class="title">
交费详情单
</view>
<!-- <view class="title2">
<van-notice-bar :scrollable="ChargeProDetail.descInfo.length>20?true:false" background="#ffffff"
color="#333333" style="padding: 0;" :text="ChargeProDetail.descInfo||''" />
</view> -->
<view style="position: relative;">
<image style="width: 124rpx;height: 106rpx;position: absolute;top: -110rpx;right: 0;"
:src="ImgUrl+'StudentPayment/yijiaona.png'" mode='widthFix'>
</image>
</view>
<van-divider dashed />
<view class="botto">
<view class="rowInfo">
<text class="name">订单编号：</text>
<text class="value">{{ChargeProDetail.tradeId||""}}</text>
</view>
<view class="rowInfo">
<text class="name">交纳时间：</text>
<text class="value">{{ChargeProDetail.payTime||""}}</text>
</view>
<view class="rowInfo">
<text class="name">学生姓名：</text>
<text class="value">{{ChargeProDetail.userName||""}}</text>
</view>
<view class="rowInfo">
<text class="name">年级班级：</text>
<text class="value">{{ChargeProDetail.userGrade||""}} {{ChargeProDetail.userClass||""}}班</text>
</view>
</view>
</view>
</view>
<!-- 收费项目 -->
<view class="PayProject">
<view style="padding-top: 20rpx;padding-left: 30rpx;">
<view style="font-size: 32rpx;font-family: PingFang SC;font-weight: 500;color: #333333;">
{{ChargeProDetail.chargeName||""}}
</view>
<van-notice-bar :scrollable="ChargeProDetail.descInfo.length>20?true:false" background="#ffffff"
color="#333333" style="padding: 0; font-family: PingFang SC;font-weight: 500;color: #999999;" :text="ChargeProDetail.descInfo||''" />
</view>
<!-- 备注 -->
<view class="remarks" style="height: auto;">
<text class="remarksTxt" style="font-size: 32rpx;">
交费信息
</text>
</view>
<view class="tabNames" style="background: #F8F8F8;">
<view>
收费子项
</view>
<view>
收费类型
</view>
<view>
金额（元）
</view>
</view>
<!-- Project -->
<view class="ProjectBox">
<view class="ProjectItem" style="border: none;" v-for="(item,index) in ChargeProDetail.items"
:key="index" v-if="!(item.itemAmount==0&&item.mustFlag==0)">
<view class="tabNames">
<view class="ProjectName">
<image v-if="SPayProject(index)" style="width: 32rpx;height: 32rpx;"
:src="ImgUrl+'StudentPayment/gx.png'" mode='widthFix'></image>
<image v-else style="width: 32rpx;height: 32rpx;" :src="ImgUrl+'StudentPayment/wgx.png'"
mode='widthFix'></image>
<text>{{item.itemName}}</text>
</view>
<view class="ProjectType">
{{['选交项目','必交项目'][item.mustFlag]}}
</view>
<view class="money">
{{itemAmount(item.itemAmount)}}
</view>
</view>
</view>
</view>
<!-- .......................... -->
<!-- 备注 -->
<view class="remarks" style="height: auto;">
<text class="remarksTxt" style="font-size: 32rpx;">
支付信息
</text>
</view>
<view class="tabNames" style="background: #F8F8F8;">
<view>
支付方式
</view>
<view>
支付单号
</view>
<view>
支付金额
</view>
</view>
<!-- Project -->
<view class="ProjectBox" style="border: none;">
<view class="ProjectItem" style="border: none;background-color: white;"
v-for="(item,index) in ChargeProDetail.payInfos" :key="index">
<view class="tabNames">
<view class="ProjectName">
<text>微信</text>
</view>
<view class="ProjectType"
style=" overflow: hidden;word-break: break-all; white-space: nowrap;text-overflow: ellipsis;">
{{item.transactionId}}
</view>
<view class="money">
{{itemAmount(item.amount)}}
</view>
</view>
</view>
<!-- 备注 -->
<view class="remarks">
<text class="remarksTxt">
{{remarksType[ChargeProDetail.notesType-1]}}
</text>
<view class="remarksTextarea">
必交金额为0的必交项展示在交费信息中，选交
金额为0的选交项不展示在交费信息中。
</view>
</view>
</view>
</view>
</view>
</template>
<script>
/**
* 对象转拼接字符串
* @param {*} res Object 需要转换的数据对象
*/
function OforS(res) {
var resL = 0;
var outS = "";
for (var i in res) {
if (resL == 0) {
outS += "" + i + "=" + res[i];
} else {
outS += "&" + i + "=" + res[i];
}
resL++;
}
return outS;
}
let orderApi = window.location.origin
// 时间处理模块
import dayjs from 'dayjs'
export default {
name: "PayProjectHistoryDetails",
data() {
return {
ImgUrl: this.$ImgUrl,
payMoney: "0.00",
// 选择收费子项目
selectPayProject: [],
// 选择收费子项目
selectPayProjectObj: {},
selectCount: 0,
dialogShow: false,
PaymentRsults: -1,
allData: {},
// 交费项目详情信息
ChargeProDetail: {
descInfo: ''
},
// 备注信息
remarks: "",
remarksType: ["备注", "邮箱", "手机号码", "身份证"],
// 费用id
chargeItemIds: []
}
},
onLoad: function(options) {
let this_ = this;
let personalInfo = uni.getStorageSync("personalInfo")
let PayOrderDetails = uni.getStorageSync("PayOrderDetails")
this.allData = Object.assign(options, personalInfo, {
chargeId: PayOrderDetails.id
})
this.queryChargeHistoryDetail()
},
onShow: function() {
},
computed: {
itemAmount() {
return function(Amount) {
if (Amount) {
return (Amount / 100).toFixed(2)
} else {
return "0.00"
}
}
},
SPayProject() {
return function(index) {
if (index == 0 || index > 0) {
return this.selectPayProject.includes(index)
} else {
return false
}
}
}
},
methods: {
// 查询交费订单明细信息
async queryChargeHistoryDetail() {
try {
let data = await this.$http.post({
url: orderApi + '/order-charge/app/charge/project/queryChargeHistoryDetail'
}, {
"chargeId": this.allData.chargeId,
"schoolId": this.allData.schoolId,
"userId": this.allData.userId
})
if (data.code != 200 || !data.data) {
uni.showToast({
icon: "none",
mask: true,
title: data.msg
})
return
}
this.ChargeProDetail = data.data;
this.ChargeProDetail.payTime = dayjs(data.data.payTime).format("YYYY-MM-DD HH:mm:ss");
// 收费类型必缴项目默认选择
for (let i = 0; i < data.data.items.length; i++) {
if (data.data.items[i].mustFlag == 1) {
this.selectProject(data.data.items[i], i)
}
}
} catch (e) {
//TODO handle the exception
console.log(e);
uni.showToast({
icon: "none",
mask: true,
title: e.message
})
}
},
// 选择支付的项目
async selectProject(data, index) {
try {
if (!this.selectPayProject.includes(index)) {
this.selectPayProject.push(index)
this.selectPayProjectObj[index + ''] = data
} else {
let indexOf = this.selectPayProject.indexOf(index)
this.selectPayProject.splice(indexOf, 1)
delete this.selectPayProjectObj[index + '']
}
// 计算金额
let payMoney = 0,
// 选择的项目数
selectCount = 0,
// 费用id
chargeItemIds = [];
for (let key in this.selectPayProjectObj) {
selectCount++
payMoney += this.selectPayProjectObj[key].itemAmount;
chargeItemIds.push(this.selectPayProjectObj[key].id)
}
this.selectCount = selectCount;
this.payMoney = (payMoney / 100).toFixed(2);
this.chargeItemIds = chargeItemIds;
} catch (e) {
//TODO handle the exception
console.log(e);
}
},
}
}
</script>
<style>
<style lang="scss">
page {
background: #F3F5F6;
}
.PaymentRsults {
width: 580rpx;
height: 480rpx;
background: #FFFFFF;
border-radius: 16rpx;
text-align: center;
text-align: center;
margin: 0 auto;
font-family: PingFang SC;
image {
top: 115rpx;
}
.PaymentRsultsTxt {
height: 34rpx;
font-size: 36rpx;
font-weight: bold;
color: #333333;
text-align: center;
margin: 0 auto;
margin-top: 115rpx;
}
}
.PayProject,
.remarks {
width: 646rpx;
background: #FFFFFF;
border-radius: 16rpx;
margin: 0 auto;
}
.PayProject {
height: 460rpx;
margin-top: 20rpx;
.ProjectBox {
// height: 350rpx;
// overflow: auto;
.tabNames {
justify-content: flex-start;
height: 100%;
}
.ProjectItem {
// width: 628rpx;
height: 100rpx;
margin: 0 auto;
border: 2rpx solid #E6E6E6;
border-radius: 16rpx;
// margin-top: 19rpx;
}
.selectProjectItem {
border: 2rpx solid #01CB88 !important;
background-color: rgba(1, 203, 136, 0.1);
}
.ProjectName {
margin-left: 25rpx;
display: flex;
justify-content: flex-start;
align-items: center;
image {
display: inline-block;
}
text {
display: inline-block;
width: 176rpx;
overflow: hidden;
word-break: break-all;
margin-left: 16rpx;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.ProjectName,
.ProjectType {
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
}
.ProjectType {
width: 120rpx;
// margin-left: 40rpx;
}
.money {
font-size: 32rpx;
font-family: DIN;
font-weight: bold;
color: #01CB88;
width: 32%;
text-align: right;
}
.money::before {
content: "￥";
font-size: 28rpx;
font-family: PingFang SC;
font-weight: bold;
color: #01CB88;
}
}
.tabNames {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
justify-content: space-around;
display: flex;
align-items: center;
height: 87rpx;
line-height: 87rpx;
}
}
.remarks {
height: 220rpx;
// margin-top: 20rpx;
textarea {
width: 100%;
height: 100%;
padding-left: 30rpx;
}
.remarksTxt {
height: 80rpx;
line-height: 80rpx;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
margin-left: 66rpx;
position: relative;
}
.remarksTxt:before {
content: " ";
width: 25rpx;
height: 25rpx;
background: #01CB88;
border-radius: 50%;
position: absolute;
z-index: 100;
top: 10rpx;
left: -40rpx;
}
.remarksTxt:after {
content: " ";
width: 25rpx;
height: 25rpx;
background: #FFB62D;
border-radius: 50%;
position: absolute;
z-index: 99;
left: -32rpx;
top: 10rpx;
}
.remarksTextarea {
width: 576rpx;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
margin: 0 auto;
}
}
@media (min-height: 650px) {
.bottomOper {
position: fixed;
left: 0;
right: 0;
bottom: 30rpx;
}
}
.bottomOper {
height: 128rpx;
background: #FFFFFF;
width: 100%;
margin-top: 20rpx;
margin-bottom: 30rpx;
.buttonContent {
display: flex;
align-items: center;
height: 100%;
justify-content: space-around;
width: 689rpx;
margin: 0 auto;
.left {
.zongji {
width: 65rpx;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
}
.money {
width: 125rpx;
font-size: 36rpx;
font-family: DIN;
font-weight: bold;
color: #01CB88;
line-height: 36rpx;
}
.money::before {
content: "￥";
font-size: 28rpx;
font-family: PingFang SC;
font-weight: bold;
color: #01CB88;
}
.xieyi {
font-size: 20rpx;
font-family: PingFang SC;
font-weight: 500;
}
.xieyi text:nth-child(1) {
color: #999999;
}
.xieyi text:nth-child(2) {
color: #01CB88;
}
}
.right {
width: 240rpx;
height: 72rpx;
background: rgba(1, 203, 136, 1);
border-radius: 36rpx;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
text-align: center;
line-height: 72rpx;
// margin-right: 32rpx;
}
}
}
.headerImg {
width: 750rpx;
height: 480rpx;
background-image: url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/StudentPayment/bg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.cardInfo {
width: 646rpx;
height: 444rpx;
background: #FFFFFF;
border-radius: 16rpx;
position: relative;
margin: 0 auto;
top: -32rpx;
overflow: hidden;
font-family: PingFang SC;
background: linear-gradient(180deg, #E2FBF1 1%, #FFFFFF 20%);
.title {
width: 370rpx;
// height: 34rpx;
font-size: 36rpx;
font-weight: 800;
color: #333333;
margin: 0 auto;
margin-top: 60rpx;
text-align: center;
}
.title2 {
width: 599rpx;
height: 55rpx;
font-size: 24rpx;
font-weight: 500;
color: #999999;
margin: 0 auto;
text-align: center;
margin-top: 24rpx;
}
.botto {
.rowInfo {
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 500;
margin-left: 30rpx;
line-height: 60rpx;
}
.name {
width: 128rpx;
color: #999999;
}
.value {
width: 58rpx;
color: #333333;
}
}
}
// .cardInfo:before,
// .cardInfo:after {
// content: " ";
// width: 100%;
// height: 0px;
// position: absolute;
// }
// .cardInfo:before {
// border-top: 16rpx dotted #01CB88;
// left: 16rpx;
// top: -6rpx;
// }
</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