|
|
|
@@ -0,0 +1,972 @@ |
|
|
|
<template> |
|
|
|
<view class="content-box" style="margin-top: 30rpx;"> |
|
|
|
<view class="list" v-if="state.list.length>0"> |
|
|
|
<u-checkbox-group @change="checkboxGroupChange" ref="checkbox"> |
|
|
|
<view class="item" v-for="(item, index) in state.list" :key="index" |
|
|
|
:class="item.suppleStatus=='PAY'?'finished':''"> |
|
|
|
<view class="head"> |
|
|
|
<view class="name"> |
|
|
|
<image :src="`${$imgUrl}user/icon-ETC.png`" class="icon"></image> |
|
|
|
<text class="title m-10">{{item.cardId}}</text> |
|
|
|
<text class="tag-green" v-if="item.suppleStatus=='NOTPAY'">待支付</text> |
|
|
|
<text class="tag-green" v-else-if="item.suppleStatus=='PAY'">已支付</text> |
|
|
|
<text class="tag-green" v-else>已下支付单</text> |
|
|
|
</view> |
|
|
|
<view class="status text-black">{{item.vehiclePlate}}</view> |
|
|
|
</view> |
|
|
|
<view class="detail"> |
|
|
|
<view class="orders"> |
|
|
|
<view class="order-text"> |
|
|
|
<text class="type">补缴类型：</text> |
|
|
|
<text class="value">{{item.suppleType=='TRAFFIC'?'流水欠费补缴':'卡账欠费补缴'}}</text> |
|
|
|
</view> |
|
|
|
<view class="order-text"> |
|
|
|
<text class="type">补缴单号：</text> |
|
|
|
<text class="value">{{item.suppleNo}}</text> |
|
|
|
</view> |
|
|
|
<view class="order-text"> |
|
|
|
<text class="type">补缴单生成时间：</text> |
|
|
|
<text class="value">{{item.insertTime}}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<u-checkbox @change="checkboxChange" v-model="item.checked" :name="item.suppleNo" |
|
|
|
v-if="item.suppleStatus=='NOTPAY'"> |
|
|
|
</u-checkbox> |
|
|
|
</view> |
|
|
|
<view class="detail1"> |
|
|
|
<view class="order-text1"> |
|
|
|
<text class="type">{{item.extolllaneName}}</text> |
|
|
|
<text class="value">{{item.exTime}}</text> |
|
|
|
</view> |
|
|
|
<view class="order-text1"> |
|
|
|
<text class="type">{{item.entolllaneName}}</text> |
|
|
|
<text class="value">{{item.enTime}}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="bottom"> |
|
|
|
<view class="bottom-left"><text class="tit1">通行金额：￥</text><text |
|
|
|
class="amount1">{{item.fee}}</text> |
|
|
|
</view> |
|
|
|
<view class="bottom-left"><text class="tit1">服务费用：￥</text><text |
|
|
|
class="amount1">{{item.serviceFee}}</text> |
|
|
|
</view> |
|
|
|
<view class="bottom-left"><text class="tit">欠费总金额：￥</text><text |
|
|
|
class="amount">{{item.totalFee}}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</u-checkbox-group> |
|
|
|
|
|
|
|
</view> |
|
|
|
<view class="tips" v-else> |
|
|
|
~暂无数据~ |
|
|
|
</view> |
|
|
|
<view class="footer"> |
|
|
|
<u-checkbox-group> |
|
|
|
<u-checkbox @change="checkboxChangeAll" v-model="item.checked" v-for="(item, index) in list2" |
|
|
|
:key="index" :name="item.name">{{item.name}}</u-checkbox> |
|
|
|
</u-checkbox-group> |
|
|
|
<view class="footer-right"> |
|
|
|
<view class="row1"> |
|
|
|
合计：￥{{allPrice}} |
|
|
|
</view> |
|
|
|
<view class="btn" @click="wxPayment"> |
|
|
|
支付 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
import { |
|
|
|
getItem |
|
|
|
} from "@/utils/storage.ts" |
|
|
|
import { |
|
|
|
wechatPayConfigId, |
|
|
|
aliPayConfigId, |
|
|
|
trafficsupplObtainuserid, |
|
|
|
trafficsuppleQueryList, |
|
|
|
trafficsuppleApply, |
|
|
|
trafficsupplePayQuery,getOpenId |
|
|
|
} from "@/utils/network/api.js"; |
|
|
|
import { |
|
|
|
request,requestNew |
|
|
|
} from "@/utils/network/request.js"; |
|
|
|
|
|
|
|
import { |
|
|
|
stringToJson |
|
|
|
} from "@/utils/network/encryption"; |
|
|
|
import { |
|
|
|
onLoad, |
|
|
|
onPullDownRefresh |
|
|
|
} from "@dcloudio/uni-app"; |
|
|
|
import { |
|
|
|
ref, |
|
|
|
reactive |
|
|
|
} from "vue" |
|
|
|
import { |
|
|
|
confirm, |
|
|
|
msg |
|
|
|
} from "@/utils/utils"; |
|
|
|
const state = reactive({ |
|
|
|
list: [], |
|
|
|
suppleNoList: [], |
|
|
|
openid: '', |
|
|
|
orderId: '' |
|
|
|
|
|
|
|
}) |
|
|
|
const checkbox = ref() |
|
|
|
const list2 = reactive([{ |
|
|
|
name: '全选', |
|
|
|
checked: false, |
|
|
|
disabled: false |
|
|
|
}]) |
|
|
|
const allPrice = ref(0) |
|
|
|
const all = ref(true) |
|
|
|
// 获取列表数据 |
|
|
|
const getlist = () => { |
|
|
|
allPrice.value = 0 |
|
|
|
|
|
|
|
const options = { |
|
|
|
type: 2, |
|
|
|
data: { |
|
|
|
opId: getItem('openId') |
|
|
|
}, |
|
|
|
method: "POST", |
|
|
|
showLoading: true, |
|
|
|
}; |
|
|
|
requestNew(trafficsuppleQueryList, options).then((res) => { |
|
|
|
const data = res; |
|
|
|
console.log(data); |
|
|
|
data.data = data.data.map(val => { |
|
|
|
val.checked = false |
|
|
|
val.fee = val.fee / 100 |
|
|
|
val.totalFee = val.totalFee / 100 |
|
|
|
val.serviceFee = val.serviceFee / 100 |
|
|
|
return val |
|
|
|
}) |
|
|
|
state.list = data.data |
|
|
|
console.log(state.list, "我是处理后得列表"); |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
const checkboxChangeAll = (e) => { |
|
|
|
console.log(e); |
|
|
|
allPrice.value = 0 |
|
|
|
state.suppleNoList = [] |
|
|
|
if (e.value) { |
|
|
|
state.list.map(val => { |
|
|
|
val.checked = true; |
|
|
|
if (val.suppleStatus == 'NOTPAY') { |
|
|
|
allPrice.value += val.totalFee |
|
|
|
state.suppleNoList.push(val.suppleNo) |
|
|
|
} |
|
|
|
}) |
|
|
|
} else { |
|
|
|
state.list.map(val => { |
|
|
|
val.checked = false; |
|
|
|
}) |
|
|
|
} |
|
|
|
console.log(state.suppleNoList, "支付集合"); |
|
|
|
} |
|
|
|
|
|
|
|
const checkboxChange = (e) => { |
|
|
|
console.log(e); |
|
|
|
} |
|
|
|
const checkboxGroupChange = (e) => { |
|
|
|
console.log(e); |
|
|
|
state.suppleNoList = e |
|
|
|
let arr = [] |
|
|
|
allPrice.value = 0 |
|
|
|
state.suppleNoList.forEach((item, i) => { |
|
|
|
state.list.forEach((val, index) => { |
|
|
|
if (item == val.suppleNo) { |
|
|
|
arr.push(val.totalFee) |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
arr.forEach(item => { |
|
|
|
allPrice.value += item |
|
|
|
}) |
|
|
|
|
|
|
|
console.log(state.suppleNoList, "支付集合"); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
//获取微信小程序openid |
|
|
|
const getOpenID = () => { |
|
|
|
uni.login({ |
|
|
|
provider: "weixin", |
|
|
|
success: function (e) { |
|
|
|
getOpenid(e.code) |
|
|
|
}, |
|
|
|
}); |
|
|
|
}; |
|
|
|
const getOpenid = (code) => { |
|
|
|
const options = { |
|
|
|
type: 2, |
|
|
|
data: { |
|
|
|
"jsCode": code |
|
|
|
}, |
|
|
|
method: "POST", |
|
|
|
showLoading: true, |
|
|
|
}; |
|
|
|
// #ifdef MP-WEIXIN |
|
|
|
requestNew(getOpenId, options).then((res) => { |
|
|
|
const result = res; |
|
|
|
console.log("获取微信小程序openid", result); |
|
|
|
const openidData = result.data; |
|
|
|
state.openid = openidData.openid |
|
|
|
}); |
|
|
|
// #endif |
|
|
|
} |
|
|
|
|
|
|
|
//掉起微信支付 |
|
|
|
const wxPayment = () => { |
|
|
|
if (state.suppleNoList.length > 0) { |
|
|
|
// #ifdef MP-WEIXIN |
|
|
|
const options = { |
|
|
|
type: 2, |
|
|
|
data: { |
|
|
|
openid: state.openid, |
|
|
|
suppleNoList: state.suppleNoList, |
|
|
|
totalFee: allPrice.value * 100, |
|
|
|
payConfigId: wechatPayConfigId, |
|
|
|
}, |
|
|
|
method: "POST", |
|
|
|
showLoading: true, |
|
|
|
}; |
|
|
|
requestNew(trafficsuppleApply, options).then((res) => { |
|
|
|
const data =res; |
|
|
|
state.orderId = data.orderId |
|
|
|
uni.requestPayment({ |
|
|
|
provider: "wxpay", |
|
|
|
orderInfo: "", |
|
|
|
timeStamp: data.timestamp, |
|
|
|
nonceStr: data.noncestr, |
|
|
|
package: data.wxPackage ? data.wxPackage : "", |
|
|
|
signType: data.signType, |
|
|
|
paySign: data.sign, |
|
|
|
success: function (e) { |
|
|
|
console.log("支付成功", e); |
|
|
|
const dataaa = stringToJson(res.bizContent); |
|
|
|
checkOrder(dataaa.orderId); |
|
|
|
}, |
|
|
|
fail: function (err) { |
|
|
|
confirm(err, () => { }, "支付失败", false); |
|
|
|
}, |
|
|
|
}); |
|
|
|
}); |
|
|
|
// #endif |
|
|
|
// #ifdef MP-ALIPAY |
|
|
|
my.getAuthCode({ |
|
|
|
scopes: 'auth_base', |
|
|
|
success: res => { |
|
|
|
const optionsUser = { |
|
|
|
type: 2, |
|
|
|
data: { |
|
|
|
payConfigId: aliPayConfigId, |
|
|
|
code: res.authCode |
|
|
|
}, |
|
|
|
method: "POST", |
|
|
|
showLoading: true, |
|
|
|
}; |
|
|
|
console.log('支付宝用户编号请求：', optionsUser) |
|
|
|
requestNew(trafficsupplObtainuserid, optionsUser).then((res) => { |
|
|
|
console.log('支付宝用户编号返回：', res) |
|
|
|
const data = stringToJson(res.bizContent); |
|
|
|
const optionsali = { |
|
|
|
type: 2, |
|
|
|
data: { |
|
|
|
openid: data.openId, |
|
|
|
suppleNoList: state.suppleNoList, |
|
|
|
totalFee: allPrice.value * 100, |
|
|
|
payConfigId: "6a9a54123456578934edfre132b1234", |
|
|
|
}, |
|
|
|
method: "POST", |
|
|
|
showLoading: true, |
|
|
|
}; |
|
|
|
console.log('支付下单请求：', optionsali) |
|
|
|
requestNew(trafficsuppleApply, optionsali).then((res) => { |
|
|
|
console.log('支付下单返回：', res) |
|
|
|
const data = res; |
|
|
|
my.tradePay({ |
|
|
|
// 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号 trade_no |
|
|
|
tradeNO: data.tranPackage, |
|
|
|
success: res => { |
|
|
|
console.log("支付成功", res); |
|
|
|
|
|
|
|
allPrice.value = 0 |
|
|
|
|
|
|
|
const options = { |
|
|
|
type: 2, |
|
|
|
data: { |
|
|
|
opId: getItem('openId') |
|
|
|
}, |
|
|
|
method: "POST", |
|
|
|
showLoading: true, |
|
|
|
}; |
|
|
|
requestNew(trafficsuppleQueryList, options).then((res) => { |
|
|
|
const data = res; |
|
|
|
console.log(data); |
|
|
|
data.data = data.data.map(val => { |
|
|
|
val.checked = false |
|
|
|
val.fee = val.fee / 100 |
|
|
|
val.totalFee = val.totalFee / 100 |
|
|
|
val.serviceFee = val.serviceFee / 100 |
|
|
|
return val |
|
|
|
}) |
|
|
|
state.list = data.data |
|
|
|
console.log(state.list, "我是处理后得列表"); |
|
|
|
}) |
|
|
|
}, |
|
|
|
fail: res => { |
|
|
|
console.log("支付失败", res); |
|
|
|
}, |
|
|
|
}); |
|
|
|
|
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
fail: err => { |
|
|
|
console.log('my.getAuthCode 调用失败', err) |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
// #endif |
|
|
|
} else { |
|
|
|
msg("未勾选补缴订单！") |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
//支付成功改变订单状态 |
|
|
|
const checkOrder = (orderId) => { |
|
|
|
const options = { |
|
|
|
type: 2, |
|
|
|
data: { |
|
|
|
orderId: orderId, |
|
|
|
}, |
|
|
|
method: "POST", |
|
|
|
showLoading: true, |
|
|
|
}; |
|
|
|
|
|
|
|
requestNew(trafficsupplePayQuery, options).then((res) => { |
|
|
|
msg("支付成功!"); |
|
|
|
getlist() |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
onLoad(() => { |
|
|
|
getlist() |
|
|
|
getOpenID() |
|
|
|
console.log("state"); |
|
|
|
}) |
|
|
|
|
|
|
|
onPullDownRefresh(() => { |
|
|
|
getlist() |
|
|
|
}) |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
page { |
|
|
|
background: #eef7f7; |
|
|
|
} |
|
|
|
|
|
|
|
.content-box { |
|
|
|
padding-bottom: 115rpx; |
|
|
|
|
|
|
|
.tips { |
|
|
|
font-size: 25rpx; |
|
|
|
color: #d2d2d2; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.footer { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
padding: 0 30rpx; |
|
|
|
background: #fff; |
|
|
|
height: 100rpx; |
|
|
|
border-top: 1rpx solid #cdcdcd; |
|
|
|
position: fixed; |
|
|
|
bottom: 0; |
|
|
|
width: 100%; |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
.footer-right { |
|
|
|
align-items: center; |
|
|
|
display: flex; |
|
|
|
justify-content: flex-end; |
|
|
|
flex: 1; |
|
|
|
|
|
|
|
.row1 { |
|
|
|
font-size: 29rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.btn { |
|
|
|
text-align: center; |
|
|
|
width: 150rpx; |
|
|
|
height: 60rpx; |
|
|
|
background: #13E7C1; |
|
|
|
line-height: 60rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
font-size: 29rpx; |
|
|
|
color: #fff; |
|
|
|
margin-left: 30rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.search-btn { |
|
|
|
color: white; |
|
|
|
background-color: #00B38B; |
|
|
|
width: 140rpx; |
|
|
|
height: 75rpx; |
|
|
|
line-height: 75rpx; |
|
|
|
font-size: 32rpx; |
|
|
|
border-radius: 40rpx; |
|
|
|
text-align: center; |
|
|
|
margin-right: 30rpx; |
|
|
|
margin-top: 10rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.search-box { |
|
|
|
margin: 30rpx 30rpx 20rpx 30rpx; |
|
|
|
height: 72rpx; |
|
|
|
height: 81rpx; |
|
|
|
background: #FFFFFF; |
|
|
|
border: 1px solid #DCDCDC; |
|
|
|
border-radius: 40rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
box-sizing: border-box; |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.search-box .icon { |
|
|
|
width: 48rpx; |
|
|
|
height: 48rpx; |
|
|
|
margin: 0 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.search-box .search { |
|
|
|
flex: 1; |
|
|
|
margin-right: 20rpx; |
|
|
|
height: 100%; |
|
|
|
padding: 0 10rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
color: #00b38b; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.scroll-view { |
|
|
|
white-space: nowrap; |
|
|
|
position: sticky; |
|
|
|
top: 0; |
|
|
|
background: #ffffff; |
|
|
|
box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8); |
|
|
|
} |
|
|
|
|
|
|
|
.top-menu { |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
|
|
|
|
.top-menu .tab { |
|
|
|
font-size: 26rpx; |
|
|
|
padding: 38rpx 30rpx; |
|
|
|
color: #333; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.top-menu .active .border { |
|
|
|
position: absolute; |
|
|
|
width: 70%; |
|
|
|
height: 16rpx; |
|
|
|
background: #00b38b; |
|
|
|
opacity: 0.3; |
|
|
|
bottom: 40rpx; |
|
|
|
z-index: -99; |
|
|
|
left: 15%; |
|
|
|
border-radius: 6rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.top-menu .active { |
|
|
|
font-weight: bold; |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.top-menu .active::before { |
|
|
|
width: 100%; |
|
|
|
height: 16rpx; |
|
|
|
background: #00b38b; |
|
|
|
opacity: 0.3; |
|
|
|
} |
|
|
|
|
|
|
|
.search-time { |
|
|
|
display: flex; |
|
|
|
margin: 20rpx 30rpx 48rpx 30rpx; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
.time-btn { |
|
|
|
width: 130rpx; |
|
|
|
height: 80rpx; |
|
|
|
background: #00B38B; |
|
|
|
border-radius: 40rpx; |
|
|
|
color: #FFFFFF; |
|
|
|
font-size: 32rpx; |
|
|
|
line-height: 80rpx; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.show-info { |
|
|
|
width: 260rpx; |
|
|
|
height: 80rpx; |
|
|
|
padding: 0 31rpx; |
|
|
|
background: #FFFFFF; |
|
|
|
border: 1px solid #DCDCDC; |
|
|
|
border-radius: 40rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.show-text { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.date-text { |
|
|
|
color: #999999; |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.text-val { |
|
|
|
color: #333 |
|
|
|
} |
|
|
|
|
|
|
|
.line { |
|
|
|
width: 25rpx; |
|
|
|
height: 1rpx; |
|
|
|
background: #999999; |
|
|
|
margin: 0 24rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.show-info2 { |
|
|
|
width: 541rpx; |
|
|
|
height: 80rpx; |
|
|
|
padding: 0 31rpx; |
|
|
|
background: #FFFFFF; |
|
|
|
border: 1px solid #DCDCDC; |
|
|
|
border-radius: 40rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.show-text { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
flex: 1; |
|
|
|
justify-content: space-evenly; |
|
|
|
} |
|
|
|
|
|
|
|
.date-text { |
|
|
|
color: #999999; |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.text-val { |
|
|
|
color: #333 |
|
|
|
} |
|
|
|
|
|
|
|
.line { |
|
|
|
width: 25rpx; |
|
|
|
height: 1rpx; |
|
|
|
background: #999999; |
|
|
|
margin: 0 24rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.count { |
|
|
|
margin: 0 30rpx 25rpx 30rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
font-family: Noto Sans S Chinese; |
|
|
|
font-weight: 400; |
|
|
|
color: #999999; |
|
|
|
line-height: 36rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.search-payment-box { |
|
|
|
width: 260rpx; |
|
|
|
height: 80rpx; |
|
|
|
padding: 0 31rpx; |
|
|
|
background: #FFFFFF; |
|
|
|
border: 1px solid #DCDCDC; |
|
|
|
border-radius: 40rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
color: #999999; |
|
|
|
} |
|
|
|
|
|
|
|
.list { |
|
|
|
padding: 0 30rpx; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
} |
|
|
|
|
|
|
|
.bg-white { |
|
|
|
background: #FFFFFF; |
|
|
|
border-radius: 30rpx 30rpx 0 0; |
|
|
|
} |
|
|
|
|
|
|
|
.bg-white .sub-tabs { |
|
|
|
display: flex; |
|
|
|
justify-content: space-evenly; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.bg-white .sub-item { |
|
|
|
padding: 10rpx 0; |
|
|
|
margin: 20rpx 0 30rpx; |
|
|
|
border-bottom: 6rpx solid #fff; |
|
|
|
font-size: 26rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.bg-white .active { |
|
|
|
border-bottom: 6rpx solid #00B38B; |
|
|
|
color: #00B38B; |
|
|
|
font-size: 30rpx; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
|
|
|
|
.bg-none { |
|
|
|
background: none; |
|
|
|
border-radius: 30rpx 30rpx 0 0; |
|
|
|
} |
|
|
|
|
|
|
|
.list .item { |
|
|
|
background: #ffffff; |
|
|
|
box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8); |
|
|
|
border-radius: 20rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
margin-bottom: 30rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.list.bg-white .item { |
|
|
|
box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8); |
|
|
|
} |
|
|
|
|
|
|
|
.list .item .head { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
padding: 20rpx 28rpx; |
|
|
|
border-bottom: 1px solid #dcdcdc; |
|
|
|
} |
|
|
|
|
|
|
|
.list .item .head { |
|
|
|
.head-row { |
|
|
|
display: flex; |
|
|
|
width: 100%; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.name {} |
|
|
|
|
|
|
|
.name>text { |
|
|
|
font-size: 25rpx; |
|
|
|
font-family: Noto Sans S Chinese; |
|
|
|
font-weight: 400; |
|
|
|
color: #999999; |
|
|
|
line-height: 36rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.list .item .head .icon { |
|
|
|
width: 48rpx; |
|
|
|
height: 48rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.list .item .head .name { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.list .text-green { |
|
|
|
font-size: 26rpx; |
|
|
|
color: #00b38b; |
|
|
|
} |
|
|
|
|
|
|
|
.list .text-orange { |
|
|
|
font-size: 26rpx; |
|
|
|
color: #ff8000; |
|
|
|
} |
|
|
|
|
|
|
|
.list .text-black { |
|
|
|
font-size: 28rpx; |
|
|
|
color: #333; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
.list .title { |
|
|
|
font-size: 30rpx; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
|
|
|
|
.list .tag-green { |
|
|
|
font-size: 22rpx; |
|
|
|
height: 40rpx; |
|
|
|
line-height: 40rpx; |
|
|
|
padding: 0 12rpx; |
|
|
|
border-radius: 6rpx; |
|
|
|
background: #d9f4ee; |
|
|
|
color: #00b38b; |
|
|
|
} |
|
|
|
|
|
|
|
.list .tag-grey { |
|
|
|
font-size: 22rpx; |
|
|
|
height: 40rpx; |
|
|
|
line-height: 40rpx; |
|
|
|
padding: 0 12rpx; |
|
|
|
border-radius: 6rpx; |
|
|
|
background: #e8e8e8; |
|
|
|
color: #666; |
|
|
|
} |
|
|
|
|
|
|
|
.list .detail { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
padding: 30rpx 32rpx; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.list .detail1 { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
padding: 0rpx 32rpx 30rpx 32rpx; |
|
|
|
|
|
|
|
.order-text1 { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
width: 50%; |
|
|
|
|
|
|
|
.type { |
|
|
|
font-size: 26rpx; |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
|
|
|
|
.value { |
|
|
|
font-size: 26rpx; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.list .detail .type { |
|
|
|
font-size: 26rpx; |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
|
|
|
|
.list .detail .value { |
|
|
|
font-size: 26rpx; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
|
|
|
|
.list .finished .detail .value { |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
|
|
|
|
.list .detail .odd { |
|
|
|
margin: 20rpx 0; |
|
|
|
} |
|
|
|
|
|
|
|
.list .cny { |
|
|
|
font-size: 26rpx; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
|
|
|
|
.list .finished .cny { |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
|
|
|
|
.list .amount { |
|
|
|
font-size: 40rpx; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
|
|
|
|
.list .bottom .amount { |
|
|
|
color: #ff8000; |
|
|
|
} |
|
|
|
|
|
|
|
.list .finished .amount { |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
|
|
|
|
.list .btns { |
|
|
|
position: relative; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: flex-end; |
|
|
|
border-top: 1px solid #dcdcdc; |
|
|
|
margin: 0 30rpx; |
|
|
|
padding: 20rpx 0; |
|
|
|
} |
|
|
|
|
|
|
|
.list .bottom { |
|
|
|
display: flex; |
|
|
|
border-top: 1px solid #dcdcdc; |
|
|
|
margin: 0 30rpx; |
|
|
|
padding: 20rpx 0; |
|
|
|
flex-direction: column; |
|
|
|
align-items: flex-start; |
|
|
|
|
|
|
|
.tit { |
|
|
|
font-size: 30rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.tit1 { |
|
|
|
font-size: 26rpx; |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
|
|
|
|
.amount1 { |
|
|
|
font-size: 26rpx; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.list .btn { |
|
|
|
height: 60rpx; |
|
|
|
line-height: 58rpx; |
|
|
|
border-radius: 30rpx; |
|
|
|
padding: 0 24rpx; |
|
|
|
font-size: 26rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
margin-right: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.list .btns .btn:last-child { |
|
|
|
margin: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.list .btns .state { |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
font-size: 26rpx; |
|
|
|
font-family: Noto Sans S Chinese; |
|
|
|
font-weight: 400; |
|
|
|
color: #999999; |
|
|
|
line-height: 58rpx; |
|
|
|
|
|
|
|
text { |
|
|
|
font-size: 26rpx; |
|
|
|
font-family: Noto Sans S Chinese; |
|
|
|
font-weight: 400; |
|
|
|
color: #00B38B; |
|
|
|
line-height: 58rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.list .btn-primary { |
|
|
|
border: 1px solid #00b38b; |
|
|
|
color: #00b38b; |
|
|
|
} |
|
|
|
|
|
|
|
.list .btn-disable { |
|
|
|
border: 1px solid #999; |
|
|
|
color: #999; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.list .btn-normal { |
|
|
|
border: 1px solid #dcdcdc; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
|
|
|
|
.m-10 { |
|
|
|
margin: 0 10rpx; |
|
|
|
} |
|
|
|
|
|
|
|
// |
|
|
|
.detail2 { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
padding: 30rpx 32rpx; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
view { |
|
|
|
text-align: center; |
|
|
|
|
|
|
|
text { |
|
|
|
display: block; |
|
|
|
margin: 20rpx 0; |
|
|
|
} |
|
|
|
|
|
|
|
view { |
|
|
|
font-size: 24rpx; |
|
|
|
font-family: Noto Sans S Chinese; |
|
|
|
font-weight: 400; |
|
|
|
color: #999999; |
|
|
|
line-height: 36rpx; |
|
|
|
|
|
|
|
text { |
|
|
|
margin: 0; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.indicator { |
|
|
|
position: absolute; |
|
|
|
left: 50%; |
|
|
|
top: 50%; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
text { |
|
|
|
margin: 0; |
|
|
|
font-size: 26rpx; |
|
|
|
font-family: Noto Sans S Chinese; |
|
|
|
font-weight: 400; |
|
|
|
color: #666666; |
|
|
|
line-height: 36rpx; |
|
|
|
} |
|
|
|
|
|
|
|
image { |
|
|
|
width: 186rpx; |
|
|
|
height: 12rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.state { |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
font-size: 26rpx; |
|
|
|
font-family: Noto Sans S Chinese; |
|
|
|
font-weight: 400; |
|
|
|
color: #999999; |
|
|
|
line-height: 58rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.emptyView { |
|
|
|
margin-top: 120rpx; |
|
|
|
} |
|
|
|
</style> |
yangteng
před 1 měsícem