Commit c0769b73 by zhangzhen

细节优化

parent 718b8cb1
......@@ -55,6 +55,9 @@
if(uni.getStorageSync("popupTipStatus")){
uni.removeStorageSync("popupTipStatus")
}
uni.setStorageSync('activite',false)
uni.setStorageSync('rechargeTip',false)
uni.getSystemInfo({
success: (e) => {
Vue.prototype.screenHeight = e.screenHeight;
......
......@@ -220,37 +220,13 @@
<text>/小时</text>
</view>
</view>
<view v-if="computePriceInfo.totalFeeNow" class="flex-between price">
<text class="text-black text-left">应付金额</text>
<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-lg text-bold">{{computePriceInfo.totalFeeNow||0}}</text>
</view>
</view>
<view v-if="computePriceInfo.remainingBalance" class="flex-between price">
<view 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.discount > 0 && computePriceInfo.discount < 100" class="flex-between price">
<view class="flex-row-center">
<text class="text-black text-left">会员折扣</text>
<view class="vip-tag-box">
<image :src="assetsPath+'/huiyuan.png'" mode="widthFix"></image>
<text>会员日{{computePriceInfo.discountText || 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.memberDiscount).toFixed(2)}}</text>
</view>
</view>
<view class="flex-col card-use">
<view class="flex-between" @tap="onShowMorePayWay">
<text class="text-black text-left">钱包支付</text>
......@@ -272,7 +248,8 @@
style="transform:scale(0.7)" />
</view>
</label>
<label v-if="secondaryCardList.length" class="flex-between" @tap="onRadioChange('secondaryCard')">
<label v-if="secondaryCardList.length" class="flex-between"
@tap="onRadioChange('secondaryCard')">
<view class="flex-row-center">
<text>{{secondaryCard.name}}:剩 <text
class="text-pink text-bold">{{secondaryCard.number}}</text> 次可用</text>
......@@ -284,7 +261,7 @@
</view>
</label>
<label class="flex-between" >
<label class="flex-between">
<view class="flex-1 flex-between">
<view class="flex-row-center">
<text>可用余额: </text>
......@@ -295,19 +272,22 @@
</view>
</view>
<view class="flex-row-center">
<text v-if="computePriceInfo.availableBalance" class="text-pink text-lg text-bold margin-right-sm">{{computePriceInfo.balance || 0}}</text>
<button v-else class="cu-btn bg-pink sm" @tap="onNavToRecharge">充值</button>
<text v-if="computePriceInfo.availableBalance"
class="text-pink text-lg text-bold margin-right-sm">{{computePriceInfo.balance || 0}}</text>
<button v-else class="cu-btn bg-pink sm" @tap="onNavToRecharge">充值</button>
</view>
</label>
<label v-if="computePriceInfo && computePriceInfo.availableDuration" class="flex-between" >
<label v-if="computePriceInfo && computePriceInfo.availableDuration" class="flex-between">
<view class="flex-1 flex-between">
<view class="flex-row-center">
<text>可用时长: </text>
<text class="text-pink text-bold">{{Number(computePriceInfo.availableDuration).toFixed(1)}}小时</text>
<text
class="text-pink text-bold">{{Number(computePriceInfo.availableDuration).toFixed(1)}}小时</text>
</view>
</view>
<view class="flex-row-center">
<text class="text-pink text-bold margin-right-sm">{{Number(computePriceInfo.duration)? '-'+Number(computePriceInfo.duration).toFixed(1) : 0}}</text>
<text
class="text-pink text-bold margin-right-sm">{{Number(computePriceInfo.duration)? '-'+Number(computePriceInfo.duration).toFixed(1) : 0}}</text>
</view>
</label>
......@@ -328,6 +308,29 @@
<text class="cuIcon-right " :class="useCouponList.length?'text-pink':'text-gray'"></text>
</view>
</view>
<view v-if="computePriceInfo.totalFeeNow" class="flex-between price">
<text class="text-black text-left">应付金额</text>
<view class="flex-row">
<text class="text-pink"></text>
<text class="text-pink text-lg text-bold">{{computePriceInfo.totalFeeNow||0}}</text>
</view>
</view>
<view v-if="computePriceInfo.discount > 0 && computePriceInfo.discount < 100" class="flex-between price">
<view class="flex-row-center">
<text class="text-black text-left">会员折扣</text>
<view class="vip-tag-box">
<image :src="assetsPath+'/huiyuan.png'" mode="widthFix"></image>
<text>会员日{{computePriceInfo.discountText || 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.memberDiscount).toFixed(2)}}</text>
</view>
</view>
<!-- <view v-if="userInfo && computePriceInfo.availableDuration" class="flex-between price">
<text class="text-black text-left">可用时长</text>
<view class="flex-row">
......@@ -427,7 +430,7 @@
</view>
</view>
</uni-popup>
<uni-popup ref="popupRecharge" type="center" :isMaskClick="false">
<view class="popup-recharge">
<view class="recharge-content">
......@@ -439,26 +442,26 @@
<text class="text-gray">享受每次订房最低打95折,最高打88折</text>
</view>
<view class="content-part">
<view v-for="(item,k) in rechargeConfList" :key="k" class="flex-row-center list-item">
<image class="recharge-icon" :src="assetsPath+'/recharge_icon.png'" mode="widthFix"></image>
<text class="text-title">{{item.rechargeAmount}}元送</text>
<text class="text-pink">{{item.giveAmount}}</text>
<text class="text-title">元余额={{Number(item.rechargeAmount)+Number(item.giveAmount)}}</text>
</view>
<view class="text-des-box">
<text class="text-des">充值会员后,每一次消费的积分可自动 累计,用于升级订房折扣,最高打88折</text>
</view>
<button class="cu-btn" @tap="onNavToRecharge">
立即充值
</button>
</view>
</view>
</view>
</uni-popup>
......@@ -548,7 +551,8 @@
import config from "@/config/index.config"
import moment from "@/common/moment_zh_cn.js";
import {
dictList
dictList,
getUserInfo
} from "@/api/index.js";
import {
getDictItem,
......@@ -569,10 +573,10 @@
orderCancelPay,
queryCardUse
} from "@/api/order"
import {
rechargeConf
} from "@/api/recharge.js";
import {
rechargeConf
} from "@/api/recharge.js";
export default {
components: {
LoginPop
......@@ -773,14 +777,25 @@
this.onGetRechargeConf();
},
onShow() {
if(this.rechargeConfList.length){
this.userInfo = uni.getStorageSync("userInfo") || '';
this.onComputePrice();
if (this.rechargeConfList.length) {
this.onGetUserInfo();
}
},
methods: {
onGetUserInfo() {
getUserInfo().then(res => {
if (res.data.code == 200) {
this.loginStatus = uni.getStorageSync('loginStatus') == 'login'? true: false;
this.userInfo = {
...res.data.data,
consumerWallet: res.data.data.consumerWallet? res.data.data.consumerWallet: {remainingIntegral:0}
}
this.onComputePrice();
}
})
},
onGetRechargeConf() {
rechargeConf().then(res => {
if (res.data.code == 200 && res.data.rows) {
......@@ -788,9 +803,9 @@
}
})
},
onNavToRecharge(){
onNavToRecharge() {
uni.switchTab({
url:'/pages/vipCreate/vipCreate'
url: '/pages/vipCreate/vipCreate'
})
},
onShowMorePayWay() {
......@@ -885,7 +900,7 @@
let b1 = orderEndDate >= moment(startDate).valueOf() && orderEndDate <= moment(endDate).valueOf();
// 续夜宵套餐的开始时间必须在设定的开始时间和开始时间四个小时内
let b2 = orderEndDate >= moment(startDate).valueOf() && orderEndDate <= moment(startDate)
.valueOf() + 4 * 60 * 60 * 1000;
.valueOf() + 4 * 60 * 60 * 1000;
if (!(b1 && b2) || this.onCheckPackUse(startDate, endDate, 4)) {
useStatus = false;
......@@ -915,7 +930,7 @@
actualTime = moment(dateTimeObj.tempEndDate).valueOf() - moment(dateTimeObj.tempStartDate)
.valueOf()
if (actualTime < originTime - 4 * 60 * 60 * 1000 || this.onCheckPackUse(startDate, endDate,
4)) {
4)) {
useStatus = false;
return
}
......@@ -936,7 +951,7 @@
let originTime = moment(endDate).valueOf() - moment(startDate).valueOf()
// 实际时间
let actualTime = moment(dateTimeObj.tempEndDate).valueOf() - moment(dateTimeObj.tempStartDate)
.valueOf()
.valueOf()
if (actualTime < originTime * 0.6 || this.onCheckPackUse(startDate, endDate)) {
useStatus = false;
return
......@@ -1106,7 +1121,7 @@
let originTime = moment(endDate).valueOf() - moment(startDate).valueOf()
// 实际时间
let actualTime = moment(dateTimeObj.tempEndDate).valueOf() - moment(dateTimeObj.tempStartDate)
.valueOf()
.valueOf()
if (actualTime < originTime * 0.6 || this.onCheckPackUse(startDate, endDate)) {
uni.showToast({
icon: "none",
......@@ -1747,12 +1762,12 @@
if (this.submitBtnStatus) return
this.submitBtnStatus = true;
if(this.orderType ===1 && !uni.getStorageSync('rechargeTip')) {
if (this.orderType === 1 && !uni.getStorageSync('rechargeTip')) {
this.$refs.popupRecharge.open();
return
}
wx.requestSubscribeMessage({
tmplIds: [
......@@ -1766,15 +1781,15 @@
}
})
},
onNavToCreateOrder(){
onNavToCreateOrder() {
this.$refs.popupRecharge.close();
uni.setStorageSync('rechargeTip',true)
uni.setStorageSync('rechargeTip', true)
wx.requestSubscribeMessage({
tmplIds: [
'UkvsRnZkZB_w3MqXPbRhi4jEk8ML4N9PWT3rnd3Bhxg',
],
success: (res) => {
},
complete: (res) => {
this.onOrderConfirm();
......@@ -3189,10 +3204,12 @@
.radio-group {
width: 100%;
margin: 20upx 0;
label{
label {
height: 32px;
}
.margin-right-sm{
.margin-right-sm {
margin-right: 14upx;
}
}
......@@ -3235,21 +3252,24 @@
transform-origin: center center;
transform: rotate(90deg);
}
.popup-recharge{
.popup-recharge {
width: 540upx;
// height: 700upx;
background-color: #ffffff;
border-radius: 36upx;
overflow: hidden;
.recharge-content{
.recharge-content {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
// height: 100%;
background: linear-gradient(0deg, rgba(255,255,255,0.65), rgba(255,214,241,0.43));
.close-btn{
background: linear-gradient(0deg, rgba(255, 255, 255, 0.65), rgba(255, 214, 241, 0.43));
.close-btn {
position: absolute;
top: 0;
right: 0;
......@@ -3260,11 +3280,13 @@
height: 42px;
z-index: 10;
margin: 0;
.cuIcon-close{
.cuIcon-close {
font-size: 36upx;
}
}
.header-part{
.header-part {
display: flex;
flex-direction: column;
justify-content: center;
......@@ -3272,38 +3294,46 @@
padding-bottom: 32upx;
width: 470upx;
border-bottom: 1px dashed #C9CACA;
.text-title{
.text-title {
margin-top: 50upx;
font-size: 40upx;
}
.text-gray{
.text-gray {
margin-top: 16upx;
font-size: 24upx;
}
}
.content-part{
.content-part {
display: flex;
flex-direction: column;
padding: 30upx 0 0;
width: 470upx;
.list-item{
.list-item {
margin: 14upx 0 14upx 18upx;
.recharge-icon{
.recharge-icon {
display: block;
width: 44upx;
max-height: 46upx;
margin-right: 12upx;
}
.text-title{
.text-title {
color: #000000;
font-size: 30upx;
}
.text-pink{
.text-pink {
color: #E40583;
font-size: 30upx;
}
}
.text-des-box{
.text-des-box {
display: flex;
justify-content: center;
align-items: center;
......@@ -3312,7 +3342,8 @@
color: #666666;
margin: 52upx auto 52upx;
}
.cu-btn{
.cu-btn {
width: 470upx;
height: 88upx;
background: #E40583;
......
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