Commit c0769b73 by zhangzhen

细节优化

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