Skip to content

G
gxpt_wechat
Commit f425eb52 by zhangzhen
Options

细节优化

parent 287d14aa
Showing with 48 additions and 21 deletions
pages/order/order.vue
...@@ -219,25 +219,21 @@ ...@@ -219,25 +219,21 @@
<text class="cuIcon-right " :class="useCouponList.length?'text-pink':'text-gray'"></text> <text class="cuIcon-right " :class="useCouponList.length?'text-pink':'text-gray'"></text>
</view> </view>
</view> </view>
<view v-if="computePriceInfo.balance" class="flex-between price"> <view v-if="computePriceInfo.remainingDuration" class="flex-between price">
<text class="text-black text-left">优惠金额</text> <text class="text-black text-left">可用时长</text>
<view class="flex-row"> <view class="flex-row">
<!-- <text class="text-pink text-sm text-bold" style="margin-bottom: 3upx;">{{computePriceInfo.couponFee>0?'-':''}}￥</text> --> <text class="text-pink text-lg text-bold">{{computePriceInfo.remainingDuration}}</text>
<text class="text-pink">￥</text> <text class="text-pink">小时</text>
<text class="text-pink text-lg text-bold">{{computePriceInfo.balance||0}}</text>
<text>(余额抵扣)</text>
</view> </view>
</view> </view>
<view v-if="computePriceInfo.discountFee" class="flex-between price">
<view v-else-if="computePriceInfo.couponFee" class="flex-between price"> <text class="text-black text-left">应付金额</text>
<text class="text-black text-left">优惠金额</text>
<view class="flex-row"> <view class="flex-row">
<!-- <text class="text-pink text-sm text-bold" style="margin-bottom: 3upx;">{{computePriceInfo.couponFee>0?'-':''}}￥</text> -->
<text class="text-pink">￥</text> <text class="text-pink">￥</text>
<text class="text-pink text-lg text-bold">{{computePriceInfo.couponFee}}</text> <text class="text-pink text-lg text-bold">{{computePriceInfo.discountFee||0}}</text>
<text>(优惠券抵扣)</text>
</view> </view>
</view> </view>
<view v-if="computePriceInfo.duration" class="flex-between price"> <view v-if="computePriceInfo.duration" class="flex-between price">
<text class="text-black text-left">时长抵扣</text> <text class="text-black text-left">时长抵扣</text>
<view class="flex-row"> <view class="flex-row">
...@@ -245,27 +241,41 @@ ...@@ -245,27 +241,41 @@
<text class="text-pink text-lg text-bold">{{computePriceInfo.duration||0}}</text> <text class="text-pink text-lg text-bold">{{computePriceInfo.duration||0}}</text>
</view> </view>
</view> </view>
<view class="flex-between price"> <view v-if="computePriceInfo.remainingBalance" class="flex-between price">
<text class="text-black text-left">支付策略</text>
<view class="flex-row">
<text class="text-pink">优先使用钱包余额</text>
</view>
</view>
<view v-if="computePriceInfo.remainingBalance" class="flex-between price">
<text class="text-black text-left">钱包余额</text> <text class="text-black text-left">钱包余额</text>
<view class="flex-row"> <view class="flex-row">
<text class="text-pink">￥</text> <text class="text-pink">￥</text>
<text class="text-pink text-lg text-bold">{{computePriceInfo.remainingBalance}}</text> <text class="text-pink text-lg text-bold">{{computePriceInfo.remainingBalance}}</text>
</view> </view>
</view> </view>
<view class="flex-between price"> <view v-if="computePriceInfo.discount && computePriceInfo.couponFee <= 0" class="flex-between price">
<text class="text-black text-left">可用时长</text> <view class="flex-row-center">
<view class="flex-row"> <text class="text-black text-left">会员折扣</text>
<text class="text-pink text-lg text-bold">{{computePriceInfo.remainingDuration}}</text> <view class="vip-tag-box">
<text class="text-pink">小时</text> <image :src="assetsPath+'/huiyuan.png'" mode="widthFix"></image>
<text>会员日{{computePriceInfo.discount}}折</text>
</view>
</view>
<view class="flex-row-center">
<text class="text-pink text-xl text-bold" style="margin-right: 6upx;">-</text>
<text class="text-pink text-bold">￥</text>
<text class="text-pink text-lg text-bold">{{computePriceInfo.discountFee - computePriceInfo.balance}}</text>
</view> </view>
</view> </view>
</view> </view>
<view class="pay-content-box"> <view class="pay-content-box">
<view class="flex-row"> <view class="flex-row">
<text class="text-title">优惠价</text> <text class="text-title">实付</text>
<view class="flex-row margin-left"> <view class="flex-row margin-left">
<text class="text-pink">￥</text> <text class="text-pink">￥</text>
<text class="text-xxl text-bold amount">{{Number(computePriceInfo.payFee).toFixed(2)}}</text> <text class="text-xxl text-bold amount">{{computePriceInfo.payFee}}</text>
</view> </view>
</view> </view>
<view class="btn-box"> <view class="btn-box">
...@@ -2357,6 +2367,23 @@ ...@@ -2357,6 +2367,23 @@
.flex-row { .flex-row {
align-items: center; align-items: center;
} }
.vip-tag-box{
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to right, rgba(255,255,255,0.2), rgba(157,18,196,0.3));
color: #9D1260;
font-size: 16upx;
height: 34upx;
border-radius: 18upx;
padding: 0 12upx;
margin-left: 6upx;
image{
width: 22upx;
max-height: 22upx;
margin-right: 4upx;
}
}
} }
.use-coupon-box { .use-coupon-box {
......
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