|
@@ -1,351 +1,278 @@
|
|
-<template>
|
|
|
|
- <view>
|
|
|
|
- <ujp-navbar > 充电详情</ujp-navbar>
|
|
|
|
- <view class="details">
|
|
|
|
- <view class="details-head">
|
|
|
|
-<!-- <u-icon name="charging-pile-fill" custom-prefix="custom-icon" color="#27B148" size="48"></u-icon>
|
|
|
|
- -->
|
|
|
|
-
|
|
|
|
- <h4>{{detail.record&&detail.record.flowNo?detail.record.flowNo:'无充电单号'}}</h4>
|
|
|
|
-
|
|
|
|
- </view>
|
|
|
|
- <view class="details-main">
|
|
|
|
- <view class="details-price">
|
|
|
|
- <h3>{{detail.income?detail.income.toFixed(2):0}}</h3><span>元</span>
|
|
|
|
- </view>
|
|
|
|
- <p>本单金额</p>
|
|
|
|
- </view>
|
|
|
|
- <view class="details-row" v-if="detail.deviceType" ><p>订单类型 </p><span>{{options0[detail.deviceType].label}}
|
|
|
|
- </span></view>
|
|
|
|
-
|
|
|
|
- <view class="details-row" v-if="detail.deviceType!='0'" ><p>电费 </p><span>{{detail.electricityAmount?detail.electricityAmount.toFixed(2):0}}元</span></view>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- <view class="details-row" v-if="detail.deviceType!='0'" >
|
|
|
|
- <p>服务费</p>
|
|
|
|
-
|
|
|
|
- <span v-if="detail.record">{{detail.surplusAmount?detail.surplusAmount.toFixed(2):0}}元
|
|
|
|
-
|
|
|
|
-<!-- <span v-if="couponObj&&couponObj.status=='1'">({{detail.surplusAmount}}-{{detail.record.discountAmount}})</span>
|
|
|
|
- -->
|
|
|
|
- </span>
|
|
|
|
- </view>
|
|
|
|
- <view class="details-row" v-if="couponObj&&couponObj.status=='1'" >
|
|
|
|
- <p>优惠券 </p>
|
|
|
|
- <span>
|
|
|
|
- {{couponObj.useText}}
|
|
|
|
- </span>
|
|
|
|
- </view>
|
|
|
|
- <view class="details-row" v-if="detail.record&&detail.record.discountAmount" >
|
|
|
|
- <p>实际减免 </p>
|
|
|
|
|
|
+<template>
|
|
|
|
+ <view>
|
|
|
|
+ <ujp-navbar> 优惠券详情</ujp-navbar>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <view class="details">
|
|
|
|
+ <view class="details-title">
|
|
|
|
+ <h4>优惠券明细</h4>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <view class="details-row" >
|
|
|
|
+ <p>优惠券类型</p>
|
|
|
|
+ <span>免费停车优惠券</span>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="details-row">
|
|
|
|
+ <p>免费停电时长</p>
|
|
<span>
|
|
<span>
|
|
- -{{detail.record.discountAmount?detail.record.discountAmount.toFixed(2):0}}元
|
|
|
|
- </span>
|
|
|
|
- </view>
|
|
|
|
- <view class="details-row" v-if="detail.record&&detail.record.userCardId" >
|
|
|
|
- <p>会员活动 </p>
|
|
|
|
- <span>
|
|
|
|
- 折扣卡<span v-if="detail.monthlyRentCard">-{{detail.monthlyRentCard.name}}</span></span>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- </view>
|
|
|
|
- <view class="details-row" ><p>订单来源 </p><span>{{detail.record?detail.record.platformText:''}}</span></view>
|
|
|
|
-
|
|
|
|
- <view class="details-row" v-if="detail.payType" ><p>支付方式 </p><span>{{detail.payType==1?'先付后退':''}}{{detail.payType==2?'个人账户':''}}{{detail.payType==3?'企业账户':''}}</span></view>
|
|
|
|
- <view class="details-row" v-if="detail.payType==3" ><p>企业名称 </p><span>{{detail.entName}}</span></view>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- <view class="details-row" ><p>用户类型 </p>
|
|
|
|
- <span v-html="chargeUserPhoneXDT(detail.chargeUserPhone,detail.userType)" > </span>
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- <view class="details">
|
|
|
|
- <view class="details-title">
|
|
|
|
- <h4>用电明细</h4>
|
|
|
|
|
|
+ {{parkingCoupon.freeMinute?minuteConversion(parkingCoupon.freeMinute,1):''}}
|
|
|
|
+
|
|
|
|
+ </span>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="details-row">
|
|
|
|
+ <p>开始充电时间</p><span>{{chargingRecord.startTime?chargingRecord.startTime:chargingRecord.endTime}}</span>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="details-row">
|
|
|
|
+ <p>结束充电时间</p><span>{{chargingRecord.endTime}}</span>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <view class="details-row" >
|
|
|
|
+ <p>订单编号</p>
|
|
|
|
+ <span>{{chargingRecord.flowNo}}</span>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <view v-for="(item,i) in chargeDetails" :key="i" v-if="detail.deviceType!=0">
|
|
|
|
+ <view class="details-row" style=" margin-top: 18px;">
|
|
|
|
+ <p>区间充电量({{item.startTime}}-{{item.endTime}})</p>
|
|
|
|
+
|
|
|
|
+ <span v-if="item.fixKwh&&item.kwh">{{(item.kwh+item.fixKwh).toFixed(2) }}度</span>
|
|
|
|
+ <span v-else>{{item.kwh.toFixed(2) }}度</span>
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+</view>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <view class="details">
|
|
|
|
+ <view class="details-title">
|
|
|
|
+ <h4>更多信息</h4>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <view class="details-row">
|
|
|
|
+ <p>车牌号</p><span>{{chargingRecord.carNumber?chargingRecord.carNumber:'未填写'}}</span>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="details-row">
|
|
|
|
+ <p>用户姓名</p><span>{{chargingUser.nickName}}</span>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="details-row">
|
|
|
|
+ <p>联系方式</p><span>{{chargingUser.phone}}</span>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
</view>
|
|
</view>
|
|
|
|
|
|
- <view class="details-row" v-if="detail.record&&detail.record.endSoc" >
|
|
|
|
- <p>充电SOC</p>
|
|
|
|
- <span>{{detail.record&&detail.record.startSoc}}%>{{detail.record&&detail.record.endSoc}}%</span>
|
|
|
|
- </view>
|
|
|
|
- <view class="details-row" >
|
|
|
|
- <p>总充电量</p>
|
|
|
|
- <span>{{detail.electricQuantity?detail.electricQuantity/10000:0}}度
|
|
|
|
- <span v-if="detail.lossCompensate" style="color: red;" >*</span>
|
|
|
|
- </span>
|
|
|
|
- </view>
|
|
|
|
- <view class="details-row"><p>开始时间</p><span>{{detail.startTime?detail.startTime:detail.endTime}}</span></view>
|
|
|
|
- <view class="details-row"><p>结束时间</p><span>{{detail.endTime}}</span></view>
|
|
|
|
- <view class="details-row"><p>充电时长</p><span>{{getPercent(detail.chargingMinute)}}</span></view>
|
|
|
|
-
|
|
|
|
- <view class="details-row" v-if="detail.deviceType=='0'" >
|
|
|
|
- <p>电费单价</p>
|
|
|
|
- <span>{{detail.unitPrice?detail.unitPrice.toFixed(2):0}}元/小时</span>
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- <view v-for="(item,i) in chargeDetails" :key="i" v-if="detail.deviceType!=0" >
|
|
|
|
- <view class="details-row" style=" margin-top: 18px;" >
|
|
|
|
- <p>区间充电量({{item.startTime}}-{{item.endTime}})</p>
|
|
|
|
-
|
|
|
|
- <span v-if="item.fixKwh&&item.kwh" >{{(item.kwh+item.fixKwh).toFixed(2) }}度</span>
|
|
|
|
- <span v-else >{{item.kwh.toFixed(2) }}度</span>
|
|
|
|
-
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- <view class="details-row" style="display: block;" >
|
|
|
|
- <p>
|
|
|
|
- <span style=" color: #37393c;">区间定价</span>
|
|
|
|
- <span style="float: right; color: #333;font-weight: normal;" v-if="item.discountServicePrice||item.discountServicePrice==0" >{{((item.electricityPrice*100+item.discountServicePrice*100)/100).toFixed(2)}}元/度 <span style="text-decoration:line-through;margin-left: 3px;">{{((item.electricityPrice*100+item.servicePrice*100)/100).toFixed(2)}}元/度</span></span>
|
|
|
|
-
|
|
|
|
- <span style="float: right; color: #333;font-weight: normal;" v-else >{{((item.electricityPrice*100+item.servicePrice*100)/100).toFixed(2)}}元/度</span>
|
|
|
|
-
|
|
|
|
- </p>
|
|
|
|
- <span class="details-row-sum" style="float:none" v-if="item.discountServicePrice||item.discountServicePrice==0" >电费{{item.electricityPrice.toFixed(2)}}元/度|服务费{{item.discountServicePrice.toFixed(2)}}元/度(折前{{item.servicePrice.toFixed(2)}}元/度) </span>
|
|
|
|
-
|
|
|
|
- <span class="details-row-sum" v-else >{{item.electricityPrice.toFixed(2)}}元/度(电费)+{{item.servicePrice.toFixed(2)}}元/度(服务费) </span>
|
|
|
|
-
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- <view class="details" v-if="sprList&&sprList.length">
|
|
|
|
- <view class="details-title">
|
|
|
|
- <h4>分润明细</h4>
|
|
|
|
- </view>
|
|
|
|
- <view class="details-row" v-for="(item,i) in sprList" :key="i" v-if="item.disProportion">
|
|
|
|
- <p>{{item.merchantAccountName}}({{(item.disProportion*100).toFixed(2)}}%)</p>
|
|
|
|
- <span>{{showNumJP(item.shareProfitAmount)}}元</span>
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- <view class="details">
|
|
|
|
- <view class="details-title">
|
|
|
|
- <h4>更多信息</h4>
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
- <view class="details-row"><p>来源站点</p><span>{{detail.stationName}}</span></view>
|
|
|
|
- <view class="details-row"><p>来源充电桩</p><span>{{detail.deviceName}}</span></view>
|
|
|
|
- <view class="details-row" ><p>桩号</p><span>{{detail.deviceNo}}</span></view>
|
|
|
|
- <view class="details-row" v-if="detail.deviceType!='0'" ><p>枪号</p><span>{{detail.gunNo}}号充电枪</span></view>
|
|
|
|
- <view class="details-row" v-if="detail.deviceType=='0'" ><p>通道号</p><span>{{detail.gunNo}}号</span></view>
|
|
|
|
-
|
|
|
|
- <view class="details-row"><p style="width: 80px;">结束原因</p><span>{{detail.record&&detail.record.remark?detail.record.remark:'无'}}</span></view>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
- <view class="details">
|
|
|
|
- <view class="details-title">
|
|
|
|
- <h4>充电用户</h4>
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
- <view class="details-row"><p>用户昵称</p><span>{{detail.chargeUserName?detail.chargeUserName:'未命名'}}</span></view>
|
|
|
|
- <view class="details-row"><p>手机号码</p><span>{{detail.chargeUserPhone}}</span></view>
|
|
|
|
- <view class="details-row" v-if="detail.deviceType!='0'" ><p>车牌号</p><span>{{detail.record&&detail.record.carNumber?detail.record.carNumber:'未绑定'}}</span></view>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- <view class="detailsBtn">
|
|
|
|
- <u-button class="detailsBtn-btn" @click="back" type="primary" plain>返回</u-button>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
-</template>
|
|
|
|
-
|
|
|
|
-<script>
|
|
|
|
- import * as API from '@/apis/finance.js'
|
|
|
|
-
|
|
|
|
- export default {
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- chargeDetails:[],
|
|
|
|
- id:'',
|
|
|
|
- sprList:[
|
|
|
|
-
|
|
|
|
- ],
|
|
|
|
- detail:{
|
|
|
|
-
|
|
|
|
- },
|
|
|
|
- options0: [
|
|
|
|
-
|
|
|
|
- {
|
|
|
|
- label: '自行车充电',
|
|
|
|
- value: 0,
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- label: '直流快充',
|
|
|
|
- value: 1,
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- label: '交流慢充',
|
|
|
|
- value: 2,
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- ],
|
|
|
|
- title:"",
|
|
|
|
- couponObj:null,
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- onLoad(op){
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- this.id=op.id;
|
|
|
|
- this.getInfo()
|
|
|
|
- },
|
|
|
|
|
|
+ </view>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ import * as API from '@/apis/coupon.js'
|
|
|
|
+ import {
|
|
|
|
+ minuteConversion
|
|
|
|
+ } from '@/utils'
|
|
|
|
+ export default {
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ chargeDetails: [],
|
|
|
|
+ id: '',
|
|
|
|
+ sprList: [
|
|
|
|
+
|
|
|
|
+ ],
|
|
|
|
+ detail: {
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ options0: [
|
|
|
|
+
|
|
|
|
+ {
|
|
|
|
+ label: '自行车充电',
|
|
|
|
+ value: 0,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '直流快充',
|
|
|
|
+ value: 1,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '交流慢充',
|
|
|
|
+ value: 2,
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ ],
|
|
|
|
+ title: "",
|
|
|
|
+ parkingCoupon: {},
|
|
|
|
+ chargingUser: {},
|
|
|
|
+ chargingRecord: {},
|
|
|
|
+ couponObj: null,
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ onLoad(op) {
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ this.id = op.id;
|
|
|
|
+ this.getInfo()
|
|
|
|
+ },
|
|
methods: {
|
|
methods: {
|
|
- getPercent(estimateMinute) {
|
|
|
|
- var value="";
|
|
|
|
-
|
|
|
|
- var ms =estimateMinute
|
|
|
|
- if (ms > 0) {
|
|
|
|
- var Hour = parseInt(Math.floor(ms / 60 ));
|
|
|
|
- var Fen = parseInt(Math.floor(ms % 60 ));
|
|
|
|
-
|
|
|
|
- if(Hour){
|
|
|
|
- value += Hour + "小时"
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- if(Fen){
|
|
|
|
- value += Fen+"分钟"
|
|
|
|
- }
|
|
|
|
- }else{
|
|
|
|
- value="0分钟"
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- return value;
|
|
|
|
- },
|
|
|
|
- back(){
|
|
|
|
- uni.navigateBack({
|
|
|
|
-
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- getInfo(){
|
|
|
|
- uni.showLoading({
|
|
|
|
- title:"加载中",mask:true,
|
|
|
|
- })
|
|
|
|
- API.incomeDetails({
|
|
|
|
- recordId:this.id
|
|
|
|
- }).then((res) => {
|
|
|
|
- this.detail=res.data
|
|
|
|
-
|
|
|
|
- //this.sprList=res.data.cdmList
|
|
|
|
- this.couponObj=res.data.userCoupon;
|
|
|
|
- this.chargeDetails=JSON.parse(res.data.ChargeDetails)
|
|
|
|
- this.sprList=res.data.detailList
|
|
|
|
- uni.hideLoading()
|
|
|
|
- console.log(this.detail)
|
|
|
|
- }).catch(error => {
|
|
|
|
- uni.showToast({
|
|
|
|
-
|
|
|
|
- title:error
|
|
|
|
- })
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-</script>
|
|
|
|
-<style>
|
|
|
|
- page{
|
|
|
|
- background-color: #F7F7F7;
|
|
|
|
- }
|
|
|
|
-</style>
|
|
|
|
-<style lang="scss" scoped>
|
|
|
|
- .detailsBtn{
|
|
|
|
- margin: 16px;
|
|
|
|
- .detailsBtn-btn{
|
|
|
|
- border-color:#185AC6!important;
|
|
|
|
- border-radius: 8px!important;
|
|
|
|
- background: none!important;
|
|
|
|
- color:#185AC6!important;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .details-title{
|
|
|
|
- margin-bottom: 16px;
|
|
|
|
- h4{
|
|
|
|
- font-weight: normal;
|
|
|
|
- font-size: 16px;
|
|
|
|
- position: relative;
|
|
|
|
- padding-left:10px;
|
|
|
|
- &::after{
|
|
|
|
- content: '';
|
|
|
|
- position: absolute;
|
|
|
|
- height: 12px;
|
|
|
|
- width: 4px;
|
|
|
|
- background-color: #27B148;
|
|
|
|
- left: 0;
|
|
|
|
- top:5px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .details-row{
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- align-items: center;
|
|
|
|
- margin-top: 15px;
|
|
|
|
-
|
|
|
|
- p{
|
|
|
|
- color: #37393c;
|
|
|
|
- font-weight: bold;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .details{
|
|
|
|
- margin: 34rpx;
|
|
|
|
- padding: 34rpx;
|
|
|
|
- background-color: #fff;
|
|
|
|
- border-radius: 8px;
|
|
|
|
- .details-head{
|
|
|
|
- text-align: center;
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- justify-content: center;
|
|
|
|
- h4{
|
|
|
|
- font-size: 18px;
|
|
|
|
- font-weight: normal;
|
|
|
|
- margin-left: 4px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .details-price{
|
|
|
|
- margin-top: 28px;
|
|
|
|
- display: flex;
|
|
|
|
- align-items: flex-end;
|
|
|
|
- justify-content: center;
|
|
|
|
- h3{
|
|
|
|
- font-size: 36px;
|
|
|
|
- color:#27B148;
|
|
|
|
- line-height: 36px;
|
|
|
|
- margin: 0 4px;
|
|
|
|
- font-weight: normal;
|
|
|
|
- }
|
|
|
|
- span{
|
|
|
|
- font-size: 20px;
|
|
|
|
- color:#27B148;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .details-main{
|
|
|
|
- text-align: center;
|
|
|
|
- margin-bottom: 20px;
|
|
|
|
- p{
|
|
|
|
- color:#777;
|
|
|
|
- margin-top: 4px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .details-row-sum{
|
|
|
|
- float: right;
|
|
|
|
- color: #888;
|
|
|
|
- font-size: 24rpx;
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
-</style>
|
|
|
|
|
|
+ minuteConversion(a,b){
|
|
|
|
+ return minuteConversion(a,b)
|
|
|
|
+ },
|
|
|
|
+ getPercent(estimateMinute) {
|
|
|
|
+ var value = "";
|
|
|
|
+
|
|
|
|
+ var ms = estimateMinute
|
|
|
|
+ if (ms > 0) {
|
|
|
|
+ var Hour = parseInt(Math.floor(ms / 60));
|
|
|
|
+ var Fen = parseInt(Math.floor(ms % 60));
|
|
|
|
+
|
|
|
|
+ if (Hour) {
|
|
|
|
+ value += Hour + "小时"
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ if (Fen) {
|
|
|
|
+ value += Fen + "分钟"
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ value = "0分钟"
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ return value;
|
|
|
|
+ },
|
|
|
|
+ back() {
|
|
|
|
+ uni.navigateBack({
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getInfo() {
|
|
|
|
+ uni.showLoading({
|
|
|
|
+ title: "加载中",
|
|
|
|
+ mask: true,
|
|
|
|
+ })
|
|
|
|
+ API.couponDetails({
|
|
|
|
+ id: this.id
|
|
|
|
+ }).then((res) => {
|
|
|
|
+ this.chargingRecord = res.data.chargingRecord
|
|
|
|
+ this.chargingUser = res.data.chargingUser
|
|
|
|
+ this.parkingCoupon = res.data.parkingCoupon
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ uni.hideLoading()
|
|
|
|
+
|
|
|
|
+ }).catch(error => {
|
|
|
|
+ uni.showToast({
|
|
|
|
+
|
|
|
|
+ title: error
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+<style>
|
|
|
|
+ page {
|
|
|
|
+ background-color: #F7F7F7;
|
|
|
|
+ }
|
|
|
|
+</style>
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+ .detailsBtn {
|
|
|
|
+ margin: 16px;
|
|
|
|
+
|
|
|
|
+ .detailsBtn-btn {
|
|
|
|
+ border-color: #185AC6 !important;
|
|
|
|
+ border-radius: 8px !important;
|
|
|
|
+ background: none !important;
|
|
|
|
+ color: #185AC6 !important;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .details-title {
|
|
|
|
+ margin-bottom: 16px;
|
|
|
|
+
|
|
|
|
+ h4 {
|
|
|
|
+ font-weight: normal;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ position: relative;
|
|
|
|
+ padding-left: 10px;
|
|
|
|
+
|
|
|
|
+ &::after {
|
|
|
|
+ content: '';
|
|
|
|
+ position: absolute;
|
|
|
|
+ height: 12px;
|
|
|
|
+ width: 4px;
|
|
|
|
+ background-color: #27B148;
|
|
|
|
+ left: 0;
|
|
|
|
+ top: 5px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .details-row {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+ margin-top: 15px;
|
|
|
|
+
|
|
|
|
+ p {
|
|
|
|
+ color: #37393c;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .details {
|
|
|
|
+ margin: 34rpx;
|
|
|
|
+ padding: 34rpx;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ border-radius: 8px;
|
|
|
|
+
|
|
|
|
+ .details-head {
|
|
|
|
+ text-align: center;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+
|
|
|
|
+ h4 {
|
|
|
|
+ font-size: 18px;
|
|
|
|
+ font-weight: normal;
|
|
|
|
+ margin-left: 4px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .details-price {
|
|
|
|
+ margin-top: 28px;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: flex-end;
|
|
|
|
+ justify-content: center;
|
|
|
|
+
|
|
|
|
+ h3 {
|
|
|
|
+ font-size: 36px;
|
|
|
|
+ color: #27B148;
|
|
|
|
+ line-height: 36px;
|
|
|
|
+ margin: 0 4px;
|
|
|
|
+ font-weight: normal;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ span {
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ color: #27B148;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .details-main {
|
|
|
|
+ text-align: center;
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
+
|
|
|
|
+ p {
|
|
|
|
+ color: #777;
|
|
|
|
+ margin-top: 4px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .details-row-sum {
|
|
|
|
+ float: right;
|
|
|
|
+ color: #888;
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+</style>
|