初始化
This commit is contained in:
魏啾
809
pages/order/confirm.vue
Normal file
809
pages/order/confirm.vue
Normal file
@@ -0,0 +1,809 @@
|
||||
<template>
|
||||
<view class="content" :style="[theme]">
|
||||
<view class="onecontent">
|
||||
<view class="onecontentone flex-start">
|
||||
<view class="onecontent_one">
|
||||
预约项目
|
||||
</view>
|
||||
<view class="onecontent_tow">
|
||||
{{elist.title}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontenttow flex-start">
|
||||
<view class="onecontenttow_one">
|
||||
预约时间
|
||||
</view>
|
||||
<view class="onecontenttow_tow">
|
||||
{{elist.time}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontenttow flex-start" style="padding-bottom: 24rpx; border-bottom: 1px solid #F7F7F7;">
|
||||
<view class="onecontenttow_one">
|
||||
发型师
|
||||
</view>
|
||||
<view class="onecontenttow_tow">
|
||||
{{elist.people.nickname != ''?elist.people.nickname:'无'}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="towcontent" v-if="datalist.sec.is_store_vip ==1">
|
||||
<view class="towcontentone">
|
||||
商家会员卡
|
||||
</view>
|
||||
<view class="towcontenttow">
|
||||
享更多优惠
|
||||
</view>
|
||||
<view class="towcontentthere flex-between" @click="clickselects()">
|
||||
<view class="towcontentthere_one" v-if="datalist.sec.text_title">
|
||||
<text>{{datalist.sec.text_title}}</text>
|
||||
</view>
|
||||
<view class="towcontentthere_one" v-else>
|
||||
开通后享<text>更多优惠</text>
|
||||
</view>
|
||||
<view class="towcontentthere_tow flex-start">
|
||||
<text class="towcontentthere_towtext">{{datalist.sec.text}}</text>
|
||||
<u-icon v-if="is_sec == 1" name="checkmark-circle" color="#2979ff" size="16"></u-icon>
|
||||
<view v-else class="towcontentthere_towview"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontent" v-if="datalist.sec.is_user_vip ==1 && user_y_frequshow">
|
||||
<view class="towcontentone">
|
||||
商家会员卡
|
||||
</view>
|
||||
<view class="towcontenttow">
|
||||
享更多优惠
|
||||
</view>
|
||||
<view class="towcontentthere flex-between" @click="clickselectss()">
|
||||
<view class="towcontentthere_one" v-if="datalist.sec.text_title">
|
||||
<text>{{datalist.sec.text_title}}</text>
|
||||
</view>
|
||||
<view class="towcontentthere_one" v-else>
|
||||
开通后享<text>更多优惠</text>
|
||||
</view>
|
||||
<view class="towcontentthere_tow flex-start">
|
||||
<text v-if="pay_type != 3"
|
||||
class="towcontentthere_towtext">{{datalist.sec.user_y_frequ}}/{{datalist.sec.user_z_frequ}}次</text>
|
||||
<text v-if="pay_type == 3"
|
||||
class="towcontentthere_towtext">{{Number(datalist.sec.user_y_frequ) - Number(elist.number)}}/{{datalist.sec.user_z_frequ}}次</text>
|
||||
<u-icon v-if="pay_type == 3" name="checkmark-circle" color="#2979ff" size="16"></u-icon>
|
||||
<view v-else class="towcontentthere_towview"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontent">
|
||||
<view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
预约人数
|
||||
</view>
|
||||
<view class="therecontenttow_tow">
|
||||
{{elist.number}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontenttow flex-between" v-if="datalist.sec.is_user_vip ==1 && pay_type == 3">
|
||||
<view class="therecontenttow_one">
|
||||
会员折扣
|
||||
</view>
|
||||
<view class="therecontenttow_tow">
|
||||
-{{datalist.sec.pre_price || '0'}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontenttow flex-between" v-else>
|
||||
<view class="therecontenttow_one">
|
||||
会员折扣
|
||||
</view>
|
||||
<view class="therecontenttow_tow">
|
||||
￥{{datalist.balance.pre_price || '0'}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
原价
|
||||
</view>
|
||||
<view class="therecontenttow_tow">
|
||||
￥{{datalist.total_price}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
优惠券
|
||||
</view>
|
||||
<view class="therecontenttow_tow">
|
||||
暂无可用
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
合计
|
||||
</view>
|
||||
<view class="therecontenttow_tow" style="color:#FC5F69;"
|
||||
v-if="datalist.sec.is_user_vip ==1 && pay_type == 3">
|
||||
￥{{datalist.sec.price}}
|
||||
</view>
|
||||
<view class="therecontenttow_tow" style="color:#FC5F69;" v-else>
|
||||
￥{{datalist.total_price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontent">
|
||||
<view class="fivecontentitem flex-between">
|
||||
<view class="fivecontentitem_one">
|
||||
手机号码
|
||||
</view>
|
||||
<view class="fivecontentitem_tow">
|
||||
{{mobile}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="fivecontentitem flex-between">
|
||||
<view class="fivecontentitem_one">
|
||||
姓名
|
||||
</view>
|
||||
<view class="fivecontentitem_tow">
|
||||
张雪
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="sixcontent" v-if="pay_type != 3">
|
||||
<view class="sixcontentone flex-between">
|
||||
<view class="sixcontent_one">
|
||||
支付方式
|
||||
</view>
|
||||
</view>
|
||||
<view class="sixcontenttow">
|
||||
<view class="sixcontenttowitem flex-between" @click="clickselect(1)">
|
||||
<view class="sixcontenttowitemone flex-start">
|
||||
<image src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/wx.png" mode="aspectFill"></image>
|
||||
<text class="sixcontenttowitemonetext">微信支付</text>
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<u-icon v-if="pay_type == 1" name="checkmark-circle-fill" color="#333333" size="18"></u-icon>
|
||||
<u-icon v-else name="checkmark-circle-fill" color="#999999" size="18"></u-icon>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="sixcontenttowitem flex-between" @click="clickselect(2)"
|
||||
v-if="datalist.is_balance == 1 || datalist.balance_money<0 || datalist.balance_money != '0.00'">
|
||||
<view class="sixcontenttowitemone flex-start">
|
||||
|
||||
<image src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/ye.png" mode="aspectFill"></image>
|
||||
<text class="sixcontenttowitemonetext">余额支付</text>
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<u-icon v-if="pay_type == 2" name="checkmark-circle-fill" color="#333333" size="18"></u-icon>
|
||||
<u-icon v-else name="checkmark-circle-fill" color="#999999" size="18"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fourcontent">
|
||||
<view class="fourcontentone flex-start">
|
||||
<view class="fourcontent_one">
|
||||
预约须知：
|
||||
</view>
|
||||
</view>
|
||||
<view class="fourcontenttow flex-colum-start">
|
||||
<view class="" v-html="datalist.details">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view :style="{height:height}">
|
||||
|
||||
</view>
|
||||
<view class="fixedview flex-between">
|
||||
<view class="fixedview_one flex-start" v-if="datalist.sec.is_user_vip ==1 && pay_type == 3">
|
||||
<view class="fixedview_oneone">
|
||||
应付金额：
|
||||
</view>
|
||||
<view class="fixedview_onetow">
|
||||
<text>¥</text>{{datalist.sec.price}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view v-else> -->
|
||||
<view class="fixedview_one flex-start" v-if="pay_type == 1 && is_sec ==0">
|
||||
<view class="fixedview_oneone">
|
||||
应付金额：
|
||||
</view>
|
||||
<view class="fixedview_onetow">
|
||||
<text>¥</text>￥{{datalist.wechat.wechat_money.money_str}}
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixedview_one flex-start" v-if="pay_type == 2 && is_sec ==0">
|
||||
<view class="fixedview_oneone">
|
||||
应付金额：
|
||||
</view>
|
||||
<view class="fixedview_onetow flex-colum-start">
|
||||
<text>¥合计{{Number(datalist.balance.balance_money.money_str)+Number(datalist.balance.wechat_money)}}</text>
|
||||
<text style="font-size: 20rpx;">余额：{{datalist.balance.balance_money.money_str}}
|
||||
微信：{{datalist.balance.wechat_money}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixedview_one flex-start" v-if="is_sec == 1">
|
||||
<view class="fixedview_oneone">
|
||||
应付金额：
|
||||
</view>
|
||||
<view class="fixedview_onetow">
|
||||
<text>¥</text>{{datalist.sec.price}}
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<!-- </view> -->
|
||||
<view class="fixedview_tow" @tap="$u.debounce(showpopupclick,1000)">
|
||||
立即付款
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<u-popup :show="showpopup" @close="closepopup" @open="openpopup" mode="center" :round="10">
|
||||
<view class="u-popupflex-colum flex-colum">
|
||||
<view class="u-popupflex-columview">
|
||||
请输入支付密码
|
||||
</view>
|
||||
<u-code-input v-model="ucodeinputvalue" :maxlength="6" dot
|
||||
@finish="finish"></u-code-input>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showpopup: false,
|
||||
user_y_frequshow: true,
|
||||
ucodeinputvalue: '',
|
||||
textareavalue: '',
|
||||
height: '',
|
||||
upperlist: {},
|
||||
order_id: '',
|
||||
is_sec: 0,
|
||||
elist: {
|
||||
people: {
|
||||
nickname: '',
|
||||
id: ''
|
||||
}
|
||||
},
|
||||
mobile: uni.cache.get('loginuser').userinfo.mobile,
|
||||
datalist: {
|
||||
sec: {
|
||||
is_store_vip: '',
|
||||
is_user_vip: '',
|
||||
user_y_frequ: '',
|
||||
user_z_frequ: ''
|
||||
},
|
||||
balance: {
|
||||
pre_price: ''
|
||||
},
|
||||
wechat: {
|
||||
wechat_money: {
|
||||
money_str: ""
|
||||
}
|
||||
},
|
||||
balance: {
|
||||
balance_money: {
|
||||
money_str: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
pay_type: 1
|
||||
}
|
||||
},
|
||||
async onLoad(e) {
|
||||
// this.elist = JSON.parse(optionItem)
|
||||
this.order_id = e.order_id
|
||||
let res = await this.api.reservationorderecho({
|
||||
order_id: e.order_id
|
||||
})
|
||||
if (res) {
|
||||
this.elist = res
|
||||
if (!this.elist.people) {
|
||||
this.elist.people = {
|
||||
nickname: '',
|
||||
id: ''
|
||||
}
|
||||
}
|
||||
if (Number(this.datalist.sec.user_y_frequ) + Number(this.elist.number) > this.datalist.sec
|
||||
.user_z_frequ) {
|
||||
this.user_y_frequshow == false
|
||||
} else {
|
||||
this.user_y_frequshow == true
|
||||
}
|
||||
this.okmakenowreservation()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
openpopup() {
|
||||
console.log('open');
|
||||
},
|
||||
closepopup() {
|
||||
this.showpopup = false
|
||||
},
|
||||
|
||||
finish(e) {
|
||||
console.log(e)
|
||||
this.reservationmakenowsub()
|
||||
},
|
||||
showpopupclick() {
|
||||
if (this.pay_type == 1) {
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
this.reservationmakenowsub()
|
||||
return false;
|
||||
} else {
|
||||
if (this.pay_type == 2 || this.datalist.sec.is_user_vip == 1) {
|
||||
if (this.datalist.is_vip_password == 0) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您目前没有设置密码，请先设置支付密码',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/setup/repairpassword'
|
||||
});
|
||||
} else if (res.cancel) {}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.showpopup = true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async reservationmakenowsub() {
|
||||
var datareslane = await this.api.reservationmakenowsub({
|
||||
service_id: this.elist.store_service_id,
|
||||
number: this.elist.number,
|
||||
mobile: this.elist.mobile,
|
||||
remark: this.elist.remark,
|
||||
pay_type: this.pay_type,
|
||||
time: this.elist.time,
|
||||
people_id: this.elist.people.id != '' ? this.elist.people.id : 0,
|
||||
order_id: this.order_id,
|
||||
is_sec: this.is_sec
|
||||
})
|
||||
console.log(datareslane)
|
||||
if (datareslane.data) {
|
||||
let res = await this.api.paygetpayparams({
|
||||
order_id: datareslane.data.order_id,
|
||||
password: this.ucodeinputvalue
|
||||
}) //判断是否支付成功
|
||||
this.ucodeinputvalue = ''
|
||||
if (res.data.pay_status == 0) {
|
||||
this.showpopup = false
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.data.pay_data.payAppId, // 微信支付商户号
|
||||
timeStamp: res.data.pay_data.payTimeStamp, // 时间戳（单位：秒）
|
||||
nonceStr: res.data.pay_data.paynonceStr, // 随机字符串
|
||||
package: res.data.pay_data.payPackage, // 固定值
|
||||
signType: res.data.pay_data.paySignType, //固定值
|
||||
paySign: res.data.pay_data.paySign, //签名
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
uni.redirectTo({
|
||||
url: "/pages/order/ordersuccess?id=" + datareslane.data
|
||||
.order_id,
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
setTimeout(res => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败'
|
||||
})
|
||||
uni.hideLoading()
|
||||
}, 2000)
|
||||
uni.redirectTo({
|
||||
url: "/pages/my/order/index?e=" + 1,
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: "/pages/order/ordersuccess?id=" + datareslane.data.order_id,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.message || res.msg,
|
||||
icon: "none",
|
||||
success() {
|
||||
setTimeout(res => {
|
||||
// if (options.toast) {
|
||||
uni.hideLoading()
|
||||
// }
|
||||
}, 2000)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
clickselects() {
|
||||
this.is_sec = this.is_sec == 1 ? 0 : 1
|
||||
console.log(this.is_sec)
|
||||
this.okmakenowreservation()
|
||||
},
|
||||
clickselectss() {
|
||||
this.pay_type = this.pay_type == 3 ? 1 : 3
|
||||
},
|
||||
clickselect(b) {
|
||||
this.pay_type = b
|
||||
this.okmakenowreservation()
|
||||
},
|
||||
async okmakenowreservation() {
|
||||
let res = await this.api.okmakenowreservation({
|
||||
service_id: this.elist.store_service_id,
|
||||
number: this.elist.number,
|
||||
order_id: this.order_id
|
||||
})
|
||||
if (res) {
|
||||
this.datalist = res.vip
|
||||
this.datalist.details = res.vip.details.replace(/\<img/g,
|
||||
'<img style="max-width:100%;height:auto" ');
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
//#ifdef MP-WEIXIN || H5
|
||||
var query = uni.createSelectorQuery().in(this).select('.fixedview')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.height = (ele.height) + "px";
|
||||
that = null;
|
||||
}
|
||||
})
|
||||
}).exec();
|
||||
//#endif
|
||||
//#ifdef MP-ALIPAY
|
||||
my.createSelectorQuery().selectAll('.fixedview').boundingClientRect().exec(ele => {
|
||||
var nodeData = ele[0]
|
||||
var that = this;
|
||||
that.height = (nodeData.height) + "px";
|
||||
that = null;
|
||||
})
|
||||
//#endif
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.onecontentone {
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.onecontent_one {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontent_tow {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-left: 32rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.onecontenttow {
|
||||
margin-top: 24rpx;
|
||||
|
||||
.onecontenttow_one {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontenttow_tow {
|
||||
margin-left: 32rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.towcontentone {
|
||||
padding: 8rpx 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 150rpx;
|
||||
text-align: center;
|
||||
background: #333333;
|
||||
border-radius: 18rpx 0 0 0;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #BFAB8D;
|
||||
}
|
||||
|
||||
.towcontenttow {
|
||||
padding: 8rpx 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 136rpx;
|
||||
width: 142rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #432805;
|
||||
border-radius: 18rpx 0px 18rpx 0px;
|
||||
background: #E7C898;
|
||||
}
|
||||
|
||||
.towcontentthere {
|
||||
padding: 80rpx 32rpx 32rpx 32rpx;
|
||||
|
||||
.towcontentthere_tow {
|
||||
.towcontentthere_towtext {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.towcontentthere_towview {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentthere_one {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FC5F69;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.fivecontentitem:nth-child(2) {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.fivecontentitem {
|
||||
padding: 18rpx 0;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.fivecontentitem_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fivecontentitem_tow {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.therecontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.therecontenttow:nth-child(1) {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.therecontenttow {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.therecontenttow_one {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.therecontenttow_tow {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sixcontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
margin-top: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.sixcontentone {
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.sixcontent_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.sixcontenttow {
|
||||
.sixcontenttowitem {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.sixcontenttowitemone {
|
||||
image {
|
||||
margin-left: 24rpx;
|
||||
width: 31.37rpx;
|
||||
height: 27.34rpx;
|
||||
}
|
||||
|
||||
.sixcontenttowitemonetext {
|
||||
margin-left: 14rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fourcontent {
|
||||
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
margin-top: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.fourcontentone {
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.fourcontent_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.fourcontenttow {
|
||||
margin-top: 16rpx;
|
||||
width: 100%;
|
||||
|
||||
/deep/ img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-popupflex-colum {
|
||||
padding: 80rpx 40rpx;
|
||||
border-radius: 50rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.u-popupflex-columview {
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.fixedview_one {
|
||||
.fixedview_oneone {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fixedview_onetow {
|
||||
font-size: 44rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #F45C4C;
|
||||
font-weight: bold;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_tow {
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 34rpx;
|
||||
padding: 10rpx 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
991
pages/order/confirmhotel.vue
Normal file
991
pages/order/confirmhotel.vue
Normal file
@@ -0,0 +1,991 @@
|
||||
<template>
|
||||
<view class="content" :style="[theme]">
|
||||
<view class="onecontent">
|
||||
<view class="onecontentone flex-start">
|
||||
<view class="onecontent_one">
|
||||
<view class="onecontenttowthere flex-start">
|
||||
<view class="positionfixedbox flex-between">
|
||||
<view class="positionfixedbox_one flex-between">
|
||||
<view class="positionfixedbox_onebox flex-start">
|
||||
<text>{{lists.start}}</text>
|
||||
<text>周{{lists.weekstart}}</text>
|
||||
</view>
|
||||
<view class="positionfixedbox_onebox_box">
|
||||
{{lists.long}}晚
|
||||
</view>
|
||||
<view class="positionfixedbox_onebox flex-start" style="margin-right: 28rpx;">
|
||||
<text>{{lists.end}}</text>
|
||||
<text>周{{lists.weekend}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontenttow">
|
||||
{{elist.title}}
|
||||
</view>
|
||||
<view class="towindex_box_bouttn">
|
||||
<text style="margin-left: 10rpx;" v-for="(item,index) in elist.label" :key="index">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="towcontentitemtow_one_there flex-start">
|
||||
<u-icon name="checkmark-circle" color="#76903C" size="14"></u-icon>
|
||||
<text class="towcontentitemtow_one_theretext">{{elist.cancel_time}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontent">
|
||||
<view class="fivecontentitem flex-between" @click="popupshow = true">
|
||||
<view class="fivecontentitem_one">
|
||||
房间数量
|
||||
</view>
|
||||
<view class="fivecontentitem_tow flex-between">
|
||||
<view class="">
|
||||
{{among}}间（每间最多住{{elist.capacity_people}}人）
|
||||
</view>
|
||||
<u-icon name="arrow-right" color="#9b9b9b" size="14"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontentitem flex-between" v-for="(item,index1) in fullname" :key="index1">
|
||||
<view class="fivecontentitem_one">
|
||||
姓名
|
||||
</view>
|
||||
<view class="fivecontentitem_tow">
|
||||
<input type="text" v-model="item.name" placeholder="每间填1位住客姓名" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontentitem flex-between">
|
||||
<view class="fivecontentitem_one">
|
||||
手机号码
|
||||
</view>
|
||||
<view class="fivecontentitem_tow">
|
||||
<input type="number" v-model="mobile" placeholder="请输入手机号码" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="fivecontentitem flex-between">
|
||||
<view class="fivecontentitem_one">
|
||||
预计到店
|
||||
</view>
|
||||
<view class="fivecontentitem_tow">
|
||||
<input type="number" v-model="checkin_time" placeholder="房间将整晚保留" />
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="therecontent">
|
||||
<view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
会员折扣
|
||||
</view>
|
||||
<view class="therecontenttow_tow">
|
||||
-{{allamounts.price.pre_price || '0'}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
原价
|
||||
</view>
|
||||
<view class="therecontenttow_tow">
|
||||
￥{{allamounts.price.meet_price}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
优惠券
|
||||
</view>
|
||||
<view class="therecontenttow_tow">
|
||||
暂无可用
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
合计
|
||||
</view>
|
||||
<view class="therecontenttow_tow" style="color:#FC5F69;">
|
||||
￥{{allamounts.price.meet_price}}
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="sixcontent" v-if="pay_type != 3">
|
||||
<view class="sixcontentone flex-between">
|
||||
<view class="sixcontent_one">
|
||||
支付方式
|
||||
</view>
|
||||
</view>
|
||||
<view class="sixcontenttow">
|
||||
<view class="sixcontenttowitem flex-between" @click="clickselect(1)">
|
||||
<view class="sixcontenttowitemone flex-start">
|
||||
<image src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/wx.png" mode="aspectFill">
|
||||
</image>
|
||||
<text class="sixcontenttowitemonetext">微信支付</text>
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<u-icon v-if="pay_type == 1" name="checkmark-circle-fill" color="#333333" size="18"></u-icon>
|
||||
<u-icon v-else name="checkmark-circle-fill" color="#999999" size="18"></u-icon>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="sixcontenttowitem flex-between" @click="clickselect(2)"
|
||||
v-if="allamounts.balance.money != '0.00'">
|
||||
<view class="sixcontenttowitemone flex-start">
|
||||
|
||||
<image src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/ye.png" mode="aspectFill">
|
||||
</image>
|
||||
<text class="sixcontenttowitemonetext">余额支付</text>
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<u-icon v-if="pay_type == 2" name="checkmark-circle-fill" color="#333333" size="18"></u-icon>
|
||||
<u-icon v-else name="checkmark-circle-fill" color="#999999" size="18"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fourcontent">
|
||||
<view class="fourcontentone flex-start">
|
||||
<view class="fourcontent_one">
|
||||
购买须知：
|
||||
</view>
|
||||
</view>
|
||||
<view class="fourcontenttow flex-colum-start">
|
||||
<view class="" v-html="datalist.purchase">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view :style="{height:height}">
|
||||
|
||||
</view>
|
||||
<view class="fixedview flex-between">
|
||||
<view class="fixedview_one flex-start">
|
||||
<view class="fixedview_oneone">
|
||||
应付金额：
|
||||
</view>
|
||||
<view class="fixedview_onetow">
|
||||
<text>¥</text>{{allamounts.price.meet_price}}
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="mobiles" class="fixedview_tow" @tap="$u.debounce(showpopupclick,1000)">
|
||||
立即付款
|
||||
</view>
|
||||
<view v-else class="fixedview_tow">
|
||||
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
|
||||
立即付款
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<u-popup :show="showpopup" @close="closepopup" mode="center" :round="10">
|
||||
<view class="u-popupflex-colum flex-colum">
|
||||
<view class="u-popupflex-columview">
|
||||
请输入支付密码
|
||||
</view>
|
||||
<u-code-input v-model="ucodeinputvalue" :maxlength="6" dot @finish="finish"></u-code-input>
|
||||
</view>
|
||||
</u-popup>
|
||||
<u-popup :show="popupshow" @close="popupclose" :round="10">
|
||||
<view class="classpopupshow flex-colum">
|
||||
<view class="classpopupshowbox flex-between">
|
||||
<view class="flex-colum-start">
|
||||
<text class="classpopupshowboxflex-colum_one">房间数量</text>
|
||||
</view>
|
||||
<view class="classpopupshowboxnumber">
|
||||
<u-number-box v-model="among" :min="0" :max="10">
|
||||
<view slot="minus" class="minus">
|
||||
<u-icon name="minus" size="12"></u-icon>
|
||||
</view>
|
||||
<text slot="input" style="width: 50px;text-align: center;" class="input">{{among}}</text>
|
||||
<view slot="plus" class="plus">
|
||||
<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
|
||||
</view>
|
||||
</u-number-box>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mobiles: uni.cache.get('loginuser').userinfo.mobile,
|
||||
checkin_time: '14:00',
|
||||
adult: 1, //可住成人
|
||||
children: 0, //可住儿童
|
||||
bed: 1, //床位
|
||||
among: 1, //间数
|
||||
showpopup: false,
|
||||
popupshow: false, //选择人数
|
||||
user_y_frequshow: true,
|
||||
ucodeinputvalue: '',
|
||||
textareavalue: '',
|
||||
height: '',
|
||||
upperlist: {},
|
||||
hotel_id: '',
|
||||
is_sec: 0,
|
||||
fullname: [{
|
||||
name: ""
|
||||
}],
|
||||
elist: {
|
||||
people: {
|
||||
nickname: '',
|
||||
id: ''
|
||||
}
|
||||
},
|
||||
lists: {
|
||||
long: '', //多少天
|
||||
start: '',
|
||||
end: '',
|
||||
weekstart: '',
|
||||
weekend: '',
|
||||
},
|
||||
mobile: uni.cache.get('loginuser').userinfo.mobile,
|
||||
datalist: {
|
||||
sec: {
|
||||
is_store_vip: '',
|
||||
is_user_vip: '',
|
||||
user_y_frequ: '',
|
||||
user_z_frequ: ''
|
||||
},
|
||||
balance: {
|
||||
pre_price: ''
|
||||
},
|
||||
wechat: {
|
||||
wechat_money: {
|
||||
money_str: ""
|
||||
}
|
||||
},
|
||||
balance: {
|
||||
balance_money: {
|
||||
money_str: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
pay_type: 1,
|
||||
allamounts: {
|
||||
price: {},
|
||||
balance: {}
|
||||
},
|
||||
}
|
||||
},
|
||||
async onLoad(e) {
|
||||
this.hotel_id = e.hotel_id
|
||||
this.lists.start = e.start_time
|
||||
this.lists.end = e.end_time
|
||||
this.lists.long = e.long
|
||||
this.lists.weekstart = this.getweekday(this.lists.start)
|
||||
this.lists.weekend = this.getweekday(this.lists.end)
|
||||
this.among = e.number //间数
|
||||
this.adult = e.adult, //可住成人
|
||||
this.children = e.children //可住儿童
|
||||
this.add()
|
||||
this.reservationhoteldetial()
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
async onShow() {
|
||||
this.$store.dispatch('storeuseruserinfo')
|
||||
},
|
||||
methods: {
|
||||
async getPhoneNumber(res) { // 获取手机号
|
||||
var resdataa = res
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: async (data) => {
|
||||
let resdata = await this.api.usergetwechatphone({
|
||||
code: data.code,
|
||||
iv: resdataa.detail.iv,
|
||||
encryptedData: resdataa.detail.encryptedData
|
||||
})
|
||||
try {
|
||||
this.mobiles = resdata.mobile
|
||||
} catch (e) {
|
||||
uni.showToast({
|
||||
title: '获取失败'
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
add() {
|
||||
this.fullname = []
|
||||
for (let i = 0; i < this.among; i++) {
|
||||
this.fullname.push({
|
||||
"name": '',
|
||||
})
|
||||
}
|
||||
},
|
||||
async reservationhotelconfirm(e) { //获取他的价格
|
||||
let res = await this.api.reservationhotelconfirm({
|
||||
hotel_id: this.hotel_id,
|
||||
number: this.among,
|
||||
start_time: this.lists.start, //开始时间
|
||||
end_time: this.lists.end, //结束时间
|
||||
})
|
||||
this.allamounts = res
|
||||
},
|
||||
getweekday(date) {
|
||||
var weekArray = new Array("日", "一", "二", "三", "四", "五", "六");
|
||||
var week = weekArray[new Date(date).getDay()]; //注意此处必须是先new一个Date
|
||||
return week;
|
||||
},
|
||||
closepopup() {
|
||||
this.showpopup = false
|
||||
},
|
||||
popupclose() {
|
||||
this.reservationhoteldetial()
|
||||
this.popupshow = false
|
||||
this.add()
|
||||
},
|
||||
finish(e) {
|
||||
console.log(e)
|
||||
this.reservationmakenowsub()
|
||||
},
|
||||
async reservationhoteldetial() {
|
||||
let res = await this.api.reservationhoteldetial({
|
||||
hotel_id: this.hotel_id,
|
||||
start_time: this.lists.start, //开始时间
|
||||
end_time: this.lists.end, //结束时间
|
||||
among: this.among //
|
||||
})
|
||||
try {
|
||||
if (res) {
|
||||
this.elist = res
|
||||
this.elist.house_details = res.house_details.replace(/\<img/g,
|
||||
'<img style="max-width:100%;height:auto" ');
|
||||
this.reservationhotelconfirm()
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
showpopupclick() {
|
||||
if (this.pay_type == 1) {
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
this.fullname = this.fullname.map(user => user.name)
|
||||
this.reservationmakenowsub()
|
||||
return false;
|
||||
} else {
|
||||
if (this.pay_type == 2) {
|
||||
if (this.elist.sec_password == 0) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您目前没有设置密码，请先设置支付密码',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/setup/repairpassword'
|
||||
});
|
||||
} else if (res.cancel) {}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.showpopup = true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async reservationmakenowsub() {
|
||||
var datareslane = await this.api.reservationhotelsub({
|
||||
hotel_id: this.hotel_id,
|
||||
number: this.among, //房间数量
|
||||
checkin_number: this.adult + this.children, //入住人数
|
||||
checkin_username: this.fullname.toString(), //入住人姓名
|
||||
checkin_mobile: this.mobile, //入住人联系电话
|
||||
checkin_time: this.checkin_time, //入住人到店时间
|
||||
start_time: this.lists.start, //开始时间
|
||||
end_time: this.lists.end, //离店时间
|
||||
notes: '', //备注
|
||||
pay_type: this.pay_type, //1 微信 2余额卡
|
||||
})
|
||||
console.log(datareslane)
|
||||
this.fullname = [{
|
||||
name: ""
|
||||
}]
|
||||
if (datareslane.order_id) {
|
||||
let res = await this.api.reservationhotelgetpay({
|
||||
order_id: datareslane.order_id,
|
||||
password: this.ucodeinputvalue
|
||||
}) //判断是否支付成功
|
||||
this.ucodeinputvalue = ''
|
||||
if (res.pay_status == 0) {
|
||||
this.showpopup = false
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.pay_data.payAppId, // 微信支付商户号
|
||||
timeStamp: res.pay_data.payTimeStamp, // 时间戳（单位：秒）
|
||||
nonceStr: res.pay_data.paynonceStr, // 随机字符串
|
||||
package: res.pay_data.payPackage, // 固定值
|
||||
signType: res.pay_data.paySignType, //固定值
|
||||
paySign: res.pay_data.paySign, //签名
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
uni.redirectTo({
|
||||
url: "/pages/order/ordersuccess?id=" + datareslane.order_id,
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
setTimeout(res => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败'
|
||||
})
|
||||
uni.hideLoading()
|
||||
}, 2000)
|
||||
uni.redirectTo({
|
||||
url: "/pages/my/order/index?e=" + 1,
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: "/pages/order/ordersuccess?id=" + datareslane.order_id,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.message || res.msg,
|
||||
icon: "none",
|
||||
success() {
|
||||
setTimeout(res => {
|
||||
// if (options.toast) {
|
||||
uni.hideLoading()
|
||||
// }
|
||||
}, 2000)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
clickselect(b) {
|
||||
this.pay_type = b
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
//#ifdef MP-WEIXIN || H5
|
||||
var query = uni.createSelectorQuery().in(this).select('.fixedview')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.height = (ele.height) + "px";
|
||||
that = null;
|
||||
}
|
||||
})
|
||||
}).exec();
|
||||
//#endif
|
||||
//#ifdef MP-ALIPAY
|
||||
my.createSelectorQuery().selectAll('.fixedview').boundingClientRect().exec(ele => {
|
||||
var nodeData = ele[0]
|
||||
var that = this;
|
||||
that.height = (nodeData.height) + "px";
|
||||
that = null;
|
||||
})
|
||||
//#endif
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.onecontentone {
|
||||
.onecontent_one {
|
||||
.onecontenttowthere {
|
||||
.positionfixedbox {
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
border-radius: 22rpx;
|
||||
|
||||
.positionfixedbox_one {
|
||||
flex: auto;
|
||||
|
||||
.positionfixedbox_onebox_box::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 10rpx;
|
||||
left: -10rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 1rpx;
|
||||
background: #76903C;
|
||||
}
|
||||
|
||||
.positionfixedbox_onebox_box::after {
|
||||
position: absolute;
|
||||
right: -10rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 10rpx;
|
||||
height: 1rpx;
|
||||
background: #76903C;
|
||||
}
|
||||
|
||||
.positionfixedbox_onebox_box {
|
||||
margin: 0 40rpx;
|
||||
position: relative;
|
||||
width: 50rpx;
|
||||
height: 40rpx;
|
||||
background: #F6FAF2;
|
||||
border-radius: 14rpx;
|
||||
border: 2rpx solid #76903C;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #76903C;
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.positionfixedbox_onebox {
|
||||
text:nth-child(1) {
|
||||
font-size: 28rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
margin-left: 10rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.positionfixedbox_tow::before {
|
||||
content: '';
|
||||
margin-right: 26rpx;
|
||||
display: inline-block;
|
||||
width: 0rpx;
|
||||
height: 40rpx;
|
||||
opacity: 1;
|
||||
border: 2rpx solid #707070;
|
||||
}
|
||||
|
||||
.positionfixedbox_tow {
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onecontenttow {
|
||||
width: 100%;
|
||||
margin-top: 16rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towindex_box_bouttn {
|
||||
width: 100%;
|
||||
margin-top: 16rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.towcontentitemtow_one_there {
|
||||
width: 100%;
|
||||
margin-top: 16rpx;
|
||||
|
||||
.towcontentitemtow_one_theretext {
|
||||
margin-left: 18rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #76903C;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.towcontentone {
|
||||
padding: 8rpx 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 150rpx;
|
||||
text-align: center;
|
||||
background: #333333;
|
||||
border-radius: 18rpx 0 0 0;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #BFAB8D;
|
||||
}
|
||||
|
||||
.towcontenttow {
|
||||
padding: 8rpx 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 136rpx;
|
||||
width: 142rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #432805;
|
||||
border-radius: 18rpx 0px 18rpx 0px;
|
||||
background: #E7C898;
|
||||
}
|
||||
|
||||
.towcontentthere {
|
||||
padding: 80rpx 32rpx 32rpx 32rpx;
|
||||
|
||||
.towcontentthere_tow {
|
||||
.towcontentthere_towtext {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.towcontentthere_towview {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentthere_one {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FC5F69;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent {
|
||||
width: 100%;
|
||||
border-radius: 12rpx;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.fivecontentitem:nth-child(2) {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.fivecontentitem {
|
||||
background: #FFFFFF;
|
||||
padding: 16rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.fivecontentitem_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.fivecontentitem_tow {
|
||||
width: 70%;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.therecontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.therecontenttow:nth-child(1) {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.therecontenttow {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.therecontenttow_one {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.therecontenttow_tow {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sixcontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
margin-top: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.sixcontentone {
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.sixcontent_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.sixcontenttow {
|
||||
.sixcontenttowitem {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.sixcontenttowitemone {
|
||||
image {
|
||||
margin-left: 24rpx;
|
||||
width: 31.37rpx;
|
||||
height: 27.34rpx;
|
||||
}
|
||||
|
||||
.sixcontenttowitemonetext {
|
||||
margin-left: 14rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fourcontent {
|
||||
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
margin-top: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.fourcontentone {
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.fourcontent_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.fourcontenttow {
|
||||
margin-top: 16rpx;
|
||||
width: 100%;
|
||||
|
||||
/deep/ img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-popupflex-colum {
|
||||
padding: 80rpx 40rpx;
|
||||
border-radius: 50rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.u-popupflex-columview {
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.classpopupshow {
|
||||
padding-bottom: 60rpx;
|
||||
|
||||
.classpopupshowbox {
|
||||
width: 100%;
|
||||
padding: 16rpx 60rpx;
|
||||
border-bottom: 2rpx solid #F0F0F0;
|
||||
|
||||
.flex-colum-start {
|
||||
.classpopupshowboxflex-colum_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.classpopupshowboxflex-colum_tow {
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.classpopupshowboxnumber {
|
||||
.minus {
|
||||
padding: 20rpx;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border-width: 1px;
|
||||
border-color: #CDCDCD;
|
||||
border-style: solid;
|
||||
border-top-left-radius: 100px;
|
||||
border-top-right-radius: 100px;
|
||||
border-bottom-left-radius: 100px;
|
||||
border-bottom-right-radius: 100px;
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input {
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
|
||||
.plus {
|
||||
padding: 20rpx;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background-color: #555656;
|
||||
border-radius: 50%;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.fixedview_one {
|
||||
.fixedview_oneone {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fixedview_onetow {
|
||||
font-size: 44rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #F45C4C;
|
||||
font-weight: bold;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_tow {
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 34rpx;
|
||||
padding: 10rpx 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
|
||||
button::after {
|
||||
border-radius: 34rpx;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: var(--bg-color-button) !important;
|
||||
padding: 0 !important;
|
||||
line-height: inherit !important;
|
||||
margin: 0 !important;
|
||||
width: auto !important;
|
||||
font-weight: 500 !important;
|
||||
border-radius: none !important;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
441
pages/order/index.vue
Normal file
441
pages/order/index.vue
Normal file
@@ -0,0 +1,441 @@
|
||||
<template>
|
||||
<view class="content" style="padding-bottom: 10rpx;" :style="[theme]">
|
||||
<view class="onecontent">
|
||||
<view class="onecontent_oen flex-start">
|
||||
<input class="onecontent_oen_input" v-model="like" type="text" placeholder="请输入服务名">
|
||||
<text class="onecontent_oen_text" @click="init_fn">搜索</text>
|
||||
</view>
|
||||
<view class="onecontent_tow">
|
||||
<view ref="uTabs" class="onecontent_tow_item flex-colum" v-for="(item,index) in swipercurrentdata"
|
||||
:key="item.id" @click="orderswitch(item.id)">
|
||||
<view :class="swiperCurrent == item.id?'onecontent_tow_itemtexts':'onecontent_tow_itemtext'">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontent">
|
||||
<view class="towcontentitem" v-if="list.length>0" v-for="(item,index1) in list" :key="index1"
|
||||
@click="eeInfo(item)">
|
||||
|
||||
<view class="towcontentitemtow flex-start">
|
||||
<image class="towcontentitemtow_imge" :src="item.img" mode="aspectFill"></image>
|
||||
<view class="towcontentitemtow_one flex-colum-start">
|
||||
<text class="towcontentitemtow_one_one">{{item.title}}</text>
|
||||
<text class="towcontentitemtow_one_tow"><text
|
||||
style="font-size:28rpx;">¥{{item.price}}</text></text>
|
||||
</view>
|
||||
<view class="towcontentitemtow_tow">
|
||||
预约
|
||||
</view>
|
||||
</view>
|
||||
<u-overlay :show="overlayshow" @click="overlayshow = false">
|
||||
<view class="warp">
|
||||
<view class="rect flex-colum" @tap.stop>
|
||||
<view class="rectone">
|
||||
确定删除订单吗?
|
||||
</view>
|
||||
<view class="recttow flex-between">
|
||||
<view class="recttow_one" @click="cancelOrder(item)">
|
||||
确定
|
||||
</view>
|
||||
<view class="recttow_tow" @click="overlayshow = false">
|
||||
取消
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-overlay>
|
||||
</view>
|
||||
<view v-if="list.length==0 && is_end == true" class="flex-colum">
|
||||
<image :src="bgnothave" mode="widthFix" style="margin-top: 100rpx;">
|
||||
</image>
|
||||
</view>
|
||||
<u-loadmore :status="form.status" />
|
||||
</view>
|
||||
<bottombbar :valuebbar='1'></bottombbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from "dayjs";
|
||||
import bottombbar from '@/components/bottombbar.vue'
|
||||
export default {
|
||||
components: {
|
||||
bottombbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bgnothave: uni.getStorageSync('bgnothave'),
|
||||
list: [],
|
||||
is_end: false,
|
||||
swiperCurrent: 0,
|
||||
overlayshow: false,
|
||||
swipercurrentdata: [],
|
||||
like: '',
|
||||
lists: {
|
||||
long: '', //多少天
|
||||
start: '',
|
||||
end: '',
|
||||
weekstart: '',
|
||||
weekend: '',
|
||||
},
|
||||
form: {
|
||||
page: 1,
|
||||
status: 'loadmore',
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
this.reservationlist()
|
||||
},
|
||||
onShow() {
|
||||
this.reservationclassyy()
|
||||
this.$store.dispatch("actionsclassification");
|
||||
this.reservationlist()
|
||||
},
|
||||
onLoad(e) {
|
||||
this.swiperCurrent = e.id
|
||||
this.lists.start = dayjs(new Date()).format("YYYY-MM-DD");
|
||||
this.lists.end = dayjs(new Date(this.lists.start).getTime() + 86400000).format('YYYY-MM-DD');
|
||||
},
|
||||
methods: {
|
||||
async reservationclassyy() {
|
||||
let res = await this.api.reservationclassyy()
|
||||
this.swipercurrentdata = [...[{
|
||||
id: 0,
|
||||
name: '全部'
|
||||
}], ...res]
|
||||
},
|
||||
async reservationlist() {
|
||||
let res = await this.api.reservationlist({
|
||||
store_id: uni.getStorageSync('store_id'),
|
||||
page: this.form.page,
|
||||
like: this.like,
|
||||
service_type_id: this.swiperCurrent,
|
||||
start_time: this.lists.start,
|
||||
end_time: this.lists.end,
|
||||
|
||||
})
|
||||
if (res.length == 0) {
|
||||
this.is_end = true
|
||||
this.form.status = 'nomore'
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
this.list = [...this.list, ...res];
|
||||
if (res.length == 10) {
|
||||
this.form.status = 'loading';
|
||||
} else {
|
||||
this.is_end = true;
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
init_fn() {
|
||||
this.list = []
|
||||
this.is_end = false
|
||||
this.form.page = 1
|
||||
this.form.status = 'loadmore'
|
||||
this.reservationlist()
|
||||
},
|
||||
orderswitch(e) {
|
||||
this.swiperCurrent = e
|
||||
this.init_fn()
|
||||
},
|
||||
eeInfo(e) { //查看订单详情
|
||||
if (uni.getStorageSync('loginuser').model_type == 'Hotel') {
|
||||
uni.pro.navigateTo('order/orderInfohotel', {
|
||||
id: e.id,
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('order/orderInfo', {
|
||||
id: e.id,
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
.content {
|
||||
.onecontent {
|
||||
background: #FFFFFF;
|
||||
padding: 10rpx 28rpx;
|
||||
|
||||
.onecontent_oen {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 70rpx;
|
||||
border-radius: 36rpx;
|
||||
border: 1rpx solid var(--bg-color-button);
|
||||
padding-right: 8rpx;
|
||||
|
||||
.onecontent_oen_input {
|
||||
padding-left: 32rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.onecontent_oen_text {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 56rpx;
|
||||
width: 116rpx;
|
||||
height: 56rpx;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.onecontent_tow {
|
||||
width: 100%;
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
|
||||
.onecontent_tow_item:nth-child(1) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.onecontent_tow_item {
|
||||
position: relative;
|
||||
margin: 0 10rpx;
|
||||
|
||||
.onecontent_tow_itemtexts {
|
||||
white-space: nowrap;
|
||||
padding: 8rpx 18rpx;
|
||||
background: #F7F7F7;
|
||||
border-radius: 8rpx;
|
||||
border: 1rpx solid var(--bg-color-button);
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: var(--bg-color-button);
|
||||
}
|
||||
|
||||
.onecontent_tow_itemtext {
|
||||
white-space: nowrap;
|
||||
padding: 8rpx 18rpx;
|
||||
background: #F7F7F7;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
padding: 0 28rpx;
|
||||
|
||||
.flex-colum_image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
text {
|
||||
margin-top: 30rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitem {
|
||||
margin-top: 32rpx;
|
||||
padding: 32rpx 24rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.towcontentitemone {
|
||||
padding-bottom: 16rpx;
|
||||
border-bottom: 1px solid #F6F6F6;
|
||||
|
||||
.towcontentitemone_one {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontentitemone_tow {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
|
||||
.towcontentitemone_towimage {
|
||||
margin-right: 10rpx;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemtow {
|
||||
position: relative;
|
||||
|
||||
.towcontentitemtow_imge {
|
||||
width: 144rpx;
|
||||
height: 144rpx;
|
||||
background: #666666;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.towcontentitemtow_one {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-left: 32rpx;
|
||||
justify-content: space-around;
|
||||
height: 144rpx;
|
||||
|
||||
.towcontentitemtow_one_one {
|
||||
width: 80%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontentitemtow_one_tow {
|
||||
margin-top: 24rpx;
|
||||
font-size: 40rpx;
|
||||
font-family: Roboto-Bold, Roboto;
|
||||
font-weight: bold;
|
||||
color: #FC5F69;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemtow_tow {
|
||||
position: absolute;
|
||||
bottom: 0rpx;
|
||||
right: 0;
|
||||
font-size: 28rpx;
|
||||
font-family: Roboto-Regular, Roboto;
|
||||
font-weight: 400;
|
||||
padding: 8rpx 30rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemthere {
|
||||
width: 100%;
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.towcontentitemthereitem {
|
||||
margin-left: 24rpx;
|
||||
padding: 8rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 28rpx;
|
||||
}
|
||||
|
||||
.towcontentitemthereitem_one {
|
||||
background: linear-gradient(101deg, #FA8E5D 0%, #F45E4D 100%);
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.towcontentitemthereitem_tow {
|
||||
background: #F6F6F6;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.towcontentitemthereitem_there {
|
||||
background: linear-gradient(101deg, #8083A7 0%, #4D4E64 100%);
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
.rect {
|
||||
padding: 40rpx 68rpx;
|
||||
width: 480rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 42rpx;
|
||||
|
||||
.rectone {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.recttow {
|
||||
width: 100%;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.recttow_one {
|
||||
padding: 8rpx 40rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 26rpx;
|
||||
border: 2rpx solid #999999;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.recttow_tow {
|
||||
padding: 8rpx 40rpx;
|
||||
background: #333333;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
border-radius: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
1195
pages/order/orderInfo.vue
Normal file
1195
pages/order/orderInfo.vue
Normal file
File diff suppressed because it is too large
Load Diff
1428
pages/order/orderInfohotel.vue
Normal file
1428
pages/order/orderInfohotel.vue
Normal file
File diff suppressed because it is too large
Load Diff
1511
pages/order/orderInfos.vue
Normal file
1511
pages/order/orderInfos.vue
Normal file
File diff suppressed because it is too large
Load Diff
196
pages/order/ordersuccess.vue
Normal file
196
pages/order/ordersuccess.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<view class="container" :style="[theme]">
|
||||
<view class="header-wrap">
|
||||
<image class="icon" src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/success.png" mode="widthFix">
|
||||
</image>
|
||||
<text class="t" v-if="info.status == 0">支付失败</text>
|
||||
<text class="t" v-if="info.status == 1">成功支付</text>
|
||||
</view>
|
||||
<view class="status-wrap" v-if="info.status == 1">
|
||||
<view class="line"></view>
|
||||
<view class="info-wrap">
|
||||
<view class="card">
|
||||
<view class="num">
|
||||
<text class="i">￥</text>
|
||||
<text class="n">{{ info.money || '-' }}</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text>订单编号：{{ info.out_trade_no || '-' }}</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text>下单时间：{{ info.updatetime || '-'}}</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text>支付方式：{{ info.pay_type || '-' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn-wrap">
|
||||
<view class="btn" @click="toOrder">
|
||||
<text>查看订单</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
orderId: '',
|
||||
info: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
|
||||
onReady() {
|
||||
//动态修改状态栏的颜色
|
||||
uni.setNavigationBarColor({
|
||||
backgroundColor:this.theme.cartpieces
|
||||
})
|
||||
},
|
||||
async onLoad(e) {
|
||||
console.log(e)
|
||||
if( uni.getStorageSync('loginuser').model_type == 'Hotel'){
|
||||
this.info = await this.api.payhotelorderstatus({
|
||||
order_id: e.id
|
||||
})
|
||||
}else{
|
||||
this.info = await this.api.payorderstatus({
|
||||
order_id: e.id
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
toOrder() {
|
||||
uni.pro.navigateTo('my/order/index', {
|
||||
e: 0
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.header-wrap {
|
||||
padding: 50upx 0 94upx 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--bg-color-button);
|
||||
|
||||
.icon {
|
||||
$size: 98upx;
|
||||
width: 98rpx;
|
||||
height: 93rpx;
|
||||
margin-right: 42upx;
|
||||
}
|
||||
|
||||
.t {
|
||||
font-size: 40upx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.status-wrap {
|
||||
padding: 0 28upx;
|
||||
margin-top: -50upx;
|
||||
$h: 20upx;
|
||||
|
||||
.line {
|
||||
height: $h;
|
||||
border-radius: $h;
|
||||
background-color: 79, 81, 104;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
padding: 0 32upx;
|
||||
margin-top: $h / 2 * -1;
|
||||
position: relative;
|
||||
|
||||
.card {
|
||||
background-color: #fff;
|
||||
padding: 28upx 64upx 64upx;
|
||||
border-radius: 0 0 28upx 28upx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.num {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
|
||||
.i {
|
||||
font-size: 24upx;
|
||||
position: relative;
|
||||
bottom: 12upx;
|
||||
}
|
||||
|
||||
.n {
|
||||
font-size: 44upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
padding-top: 28upx;
|
||||
font-size: 28upx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wrap {
|
||||
padding: 64upx 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.btn {
|
||||
width: 296upx;
|
||||
height: 70upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 46rpx;
|
||||
opacity: 1;
|
||||
font-size: 28upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
477
pages/order/paybill.vue
Normal file
477
pages/order/paybill.vue
Normal file
@@ -0,0 +1,477 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="card">
|
||||
<view class="info-wrap">
|
||||
<image class="cover" :src="shopInfo.portrait" mode="aspectFill"></image>
|
||||
<text class="t">{{ shopInfo.userName }}</text>
|
||||
</view>
|
||||
<view class="input-wrap">
|
||||
<view class="input-cont">
|
||||
<text class="i">￥</text>
|
||||
<text class="num">{{ num }}</text>
|
||||
</view>
|
||||
<view class="tips"><input class="input" type="text" :maxlength="10" placeholder="添加付款备注（最多10个字）"
|
||||
v-model="remark" /></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view class="title"><text>支付方式</text></view>
|
||||
<view class="pay-list">
|
||||
<view class="item">
|
||||
<view class="label">
|
||||
<image class="icon" src="@/static/4.png" mode="aspectFit"></image>
|
||||
<text class="t">微信支付</text>
|
||||
</view>
|
||||
<uni-icons type="checkbox-filled" size="18" color="#54A347"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="num-wrap">
|
||||
<text>实付：</text>
|
||||
<text class="t b">￥{{ num || 0 }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="number-key-wrap">
|
||||
<view class="number-key">
|
||||
<view class="left">
|
||||
<view class="num-list">
|
||||
<view class="item" v-for="item in 9" :key="item" hover-class="active" hover-stay-time="50"
|
||||
@click="numHandle(`${item + 1}`)">
|
||||
<text>{{ item + 1 }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="num-foot">
|
||||
<view class="item" hover-class="active" hover-stay-time="50" @click="numHandle('0')">
|
||||
<text>0</text>
|
||||
</view>
|
||||
<view class="item" hover-class="active" hover-stay-time="50" @click="numHandle('.')">
|
||||
<text>.</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="item" hover-class="active" hover-stay-time="50" @click="delHandle" @longpress="longDel"
|
||||
@touchend="endLongDel">
|
||||
<uni-icons type="arrow-left" size="24"></uni-icons>
|
||||
</view>
|
||||
<view class="item confirm" hover-class="active" hover-stay-time="50" @click="submitHandle">
|
||||
<text>付款</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userAppId: '', // 用户id
|
||||
shopInfo: '', // 商户信息
|
||||
num: '', // 输入金额
|
||||
// maxNum: 200,
|
||||
remark: '', // 备注
|
||||
timer: null,
|
||||
orderNumber: '',
|
||||
type: 1
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
console.log(e, '111')
|
||||
if (e.orderNumber) {
|
||||
this.orderNumber = e.orderNumber;
|
||||
}
|
||||
|
||||
if (e.q) {
|
||||
let urlStr = decodeURIComponent(e.q);
|
||||
if (this.getQueryString(urlStr, 'userAppId')) {
|
||||
this.type = 1;
|
||||
this.userAppId = this.getQueryString(urlStr, 'userAppId')
|
||||
} else {
|
||||
this.type = 2;
|
||||
this.userAppId = urlStr.match('[^/]+(?!.*/)')[0]
|
||||
}
|
||||
console.log(this.userAppId, 'this.userAppId')
|
||||
this.getShopInfo();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 付款
|
||||
async submitHandle() {
|
||||
try {
|
||||
if (!this.num) {
|
||||
uni.showToast({
|
||||
title: '请输入支付金额',
|
||||
icon: 'none'
|
||||
});
|
||||
} else {
|
||||
uni.showLoading({
|
||||
title: '支付中...',
|
||||
mask: true
|
||||
});
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: async (resdata) => {
|
||||
let res = await this.requestHandle('/applet-pay/java-pay', {
|
||||
store_id: this.shopInfo.store_id, // 商户id
|
||||
pay_type: '1',
|
||||
money: this.num, // 金额
|
||||
remark: this.remark, // 备注
|
||||
code: resdata.code
|
||||
});
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay',
|
||||
timeStamp: res.data.payTimeStamp,
|
||||
nonceStr: res.data.paynonceStr,
|
||||
package: res.data.payPackage,
|
||||
signType: res.data.paySignType,
|
||||
paySign: res.data.paySign,
|
||||
success: (res) => {
|
||||
uni.hideLoading();
|
||||
uni.showModal({
|
||||
title: '注意',
|
||||
content: `成功支付${this.num}元`,
|
||||
showCancel: false,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// uni.reLaunch({
|
||||
// url: '/pages/index/index'
|
||||
// });
|
||||
uni.exitMiniProgram({
|
||||
success: () => {
|
||||
console.log('退出小程序成功');
|
||||
},
|
||||
fail: function(
|
||||
err) {
|
||||
console.log('退出小程序失败',err);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '支付失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
} catch (e) {
|
||||
uni.showToast({
|
||||
title: '支付失败:' + JSON.stringify(e),
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
// 删除
|
||||
delHandle() {
|
||||
uni.vibrateShort();
|
||||
this.num = this.num.slice(0, -1);
|
||||
},
|
||||
// 长按删除
|
||||
longDel() {
|
||||
this.timer = setInterval(() => {
|
||||
this.delHandle();
|
||||
}, 100);
|
||||
},
|
||||
// 结束长按删除
|
||||
endLongDel() {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
},
|
||||
// 输入
|
||||
numHandle(num) {
|
||||
uni.vibrateShort();
|
||||
this.num = this.clearNoNum({
|
||||
value: (this.num += num)
|
||||
});
|
||||
},
|
||||
// 封装请求
|
||||
requestHandle(url = '', data = {}, method = 'post') {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.request({
|
||||
url: `${'https://kysh.sxczgkj.cn'}/javaApi${url}`,
|
||||
method: method,
|
||||
header: {
|
||||
uniacid: '1',
|
||||
module: 'yb_o2ov2',
|
||||
appType: 'mini'
|
||||
// userId:uni.getStorageSync('userId')
|
||||
},
|
||||
data: data,
|
||||
success: (res) => {
|
||||
if (res.data.code == 1) {
|
||||
resolve(res.data);
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: res.data.msg
|
||||
});
|
||||
reject(res.data.msg);
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(JSON.stringify(err));
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
// 获取商户信息
|
||||
async getShopInfo() {
|
||||
try {
|
||||
const res = await this.requestHandle('/applet-pay/get-applet-store-info', {
|
||||
code_id: this.userAppId,
|
||||
type: this.type
|
||||
});
|
||||
this.shopInfo = res.data;
|
||||
} catch (e) {}
|
||||
},
|
||||
// 获取url参数
|
||||
getQueryString(url, name) {
|
||||
var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i');
|
||||
var r = url.substr(1).match(reg);
|
||||
if (r != null) {
|
||||
return r[2];
|
||||
}
|
||||
return null;
|
||||
},
|
||||
/**
|
||||
* 去除字符串中除了数字和点以外的其他字符
|
||||
* @param {Object} obj
|
||||
*/
|
||||
clearNoNum(obj) {
|
||||
//如果用户第一位输入的是小数点，则重置输入框内容
|
||||
if (obj.value != '' && obj.value.substr(0, 1) == '.') {
|
||||
obj.value = '';
|
||||
}
|
||||
obj.value = obj.value.replace(/^0*(0\.|[1-9])/, '$1'); //粘贴不生效
|
||||
obj.value = obj.value.replace(/[^\d.]/g, ''); //清除“数字”和“.”以外的字符
|
||||
obj.value = obj.value.replace(/\.{2,}/g, '.'); //只保留第一个. 清除多余的
|
||||
obj.value = obj.value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
|
||||
obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
|
||||
if (obj.value.indexOf('.') < 0 && obj.value != '') {
|
||||
//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
|
||||
if (obj.value.substr(0, 1) == '0' && obj.value.length == 2) {
|
||||
obj.value = obj.value.substr(1, obj.value.length);
|
||||
}
|
||||
}
|
||||
return obj.value;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 28upx;
|
||||
padding-bottom: 640upx;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 28upx;
|
||||
border-radius: 28upx;
|
||||
background-color: #fff;
|
||||
margin-bottom: 28upx;
|
||||
|
||||
.title {
|
||||
font-size: 32upx;
|
||||
}
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.cover {
|
||||
$size: 80upx;
|
||||
width: $size;
|
||||
height: $size;
|
||||
border-radius: 50%;
|
||||
margin-right: 20upx;
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
.t {
|
||||
font-size: 32upx;
|
||||
}
|
||||
}
|
||||
|
||||
.input-wrap {
|
||||
padding: 28upx 0 0;
|
||||
|
||||
.input-cont {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1upx solid #ececec;
|
||||
|
||||
.i {
|
||||
font-size: 42upx;
|
||||
font-weight: bold;
|
||||
margin-right: 12upx;
|
||||
position: relative;
|
||||
top: -4upx;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 48upx;
|
||||
height: 80upx;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
padding-right: 14upx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: 4upx;
|
||||
height: 40upx;
|
||||
background-color: #333;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -24upx;
|
||||
right: 0;
|
||||
animation: ani 0.8s ease-in-out 1.4s infinite;
|
||||
}
|
||||
|
||||
@keyframes ani {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
display: flex;
|
||||
padding-top: 24upx;
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay-list {
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 28upx 0;
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
$size: 60upx;
|
||||
width: $size;
|
||||
height: $size;
|
||||
margin-right: 20upx;
|
||||
}
|
||||
|
||||
.t {
|
||||
font-size: 28upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.num-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
.t {
|
||||
font-size: 32upx;
|
||||
}
|
||||
|
||||
.b {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.number-key-wrap {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: #efefef;
|
||||
z-index: 999;
|
||||
padding: 28upx 28upx calc(env(safe-area-inset-bottom) + 28upx);
|
||||
border-radius: 28upx 28upx 0 0;
|
||||
$gap: 12upx;
|
||||
$radius: 14upx;
|
||||
$itemH: 120upx;
|
||||
|
||||
.number-key {
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
font-size: 48upx;
|
||||
font-weight: bold;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: $radius;
|
||||
background-color: #fff;
|
||||
|
||||
&.active {
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
flex: 1;
|
||||
|
||||
.num-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: $itemH $itemH $itemH;
|
||||
grid-gap: $gap;
|
||||
}
|
||||
|
||||
.num-foot {
|
||||
padding-top: $gap;
|
||||
display: grid;
|
||||
grid-gap: $gap;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-template-rows: $itemH;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 160upx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: $gap;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
|
||||
&:last-child {
|
||||
margin-top: $gap;
|
||||
font-size: 32upx;
|
||||
}
|
||||
|
||||
&.confirm {
|
||||
background-color: #ffcc17;
|
||||
|
||||
&.active {
|
||||
background-color: #e1b516;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
556
pages/order/paymentorder.vue
Normal file
556
pages/order/paymentorder.vue
Normal file
@@ -0,0 +1,556 @@
|
||||
<template>
|
||||
<view class="container" :style="[theme]">
|
||||
<view class="card">
|
||||
<view class="info-wrap flex-colum">
|
||||
<image class="cover" :src="list.store_avatar" mode="aspectFill"></image>
|
||||
<text class="t">{{list.store_nickname}}</text>
|
||||
</view>
|
||||
<view class="input-wrap">
|
||||
<view class="input-cont">
|
||||
<text class="i">￥</text>
|
||||
<input class="num" type="text" v-model="amount" :readonly="true" @input="checkNum($event)" />
|
||||
</view>
|
||||
<!-- <view class="tips"><input class="input" type="text" :maxlength="10" placeholder="添加付款备注（最多10个字）" v-model="remark" /></view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view class="title"><text>支付方式</text></view>
|
||||
<view class="pay-list">
|
||||
<view class="item flex-between">
|
||||
<view class="label">
|
||||
<image class="icon" src="@/static/ye.png" mode="aspectFit"></image>
|
||||
<view class="t flex-colum-start">
|
||||
<text class="t_one">会员卡支付</text>
|
||||
<text class="t_tow" style="color: #5B8FF9;">当前余额：{{list.user_balance}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<u-icon name="checkmark-circle-fill" size="18" color="#54A347" v-if="pay_type==2"></u-icon>
|
||||
<view @click="pay_typeclick(2)"
|
||||
style="border-radius: 50%; width:32rpx;height:32rpx;border: 1rpx solid #ccc;" v-else></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="pay-list">
|
||||
<view class="item flex-between">
|
||||
<view class="label">
|
||||
<image class="icon" src="@/static/4.png" mode="aspectFit"></image>
|
||||
<view class="t flex-colum-start">
|
||||
<text class="t_one">微信支付</text>
|
||||
<text class="t_tow">使用微信支付</text>
|
||||
</view>
|
||||
</view>
|
||||
<u-icon name="checkmark-circle-fill" size="20" color="#54A347" v-if="pay_type==1"></u-icon>
|
||||
<view @click="pay_typeclick(1)"
|
||||
style="border-radius: 50%; width:32rpx;height:32rpx;border: 1rpx solid #ccc;" v-else></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<view class="pay-list">
|
||||
<view class="item flex-between">
|
||||
<view class="label">
|
||||
<image class="icon" src="@/static/4.png" mode="aspectFit"></image>
|
||||
<view class="t flex-colum-start">
|
||||
<text class="t_one">支付宝支付</text>
|
||||
<text class="t_tow">使用支付宝支付</text>
|
||||
</view>
|
||||
</view>
|
||||
<u-icon name="checkmark-circle-fill" size="20" color="#54A347" v-if="pay_type==1"></u-icon>
|
||||
<view @click="pay_typeclick(1)"
|
||||
style="border-radius: 50%; width:32rpx;height:32rpx;border: 1rpx solid #ccc;" v-else></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view class="btn-wrap" v-if="mobiles">
|
||||
<view class="btn" @click="showpopupclick"><text>确认支付</text></view>
|
||||
</view>
|
||||
<view v-else class="btn-wrap">
|
||||
<button class="btn" style="padding: 0;" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"><text>确认支付</text></button>
|
||||
</view>
|
||||
<u-popup :show="showpopup" @close="closepopup" @open="openpopup" mode="center" :round="10">
|
||||
<view class="u-popupflex-colum flex-colum">
|
||||
<view class="u-popupflex-columview">
|
||||
请输入支付密码
|
||||
</view>
|
||||
<u-code-input v-model="ucodeinputvalue" :maxlength="6" dot :focus="true"
|
||||
@finish="finish"></u-code-input>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showpopup: false,
|
||||
ucodeinputvalue: '',
|
||||
amount: "",
|
||||
pay_type: 1,
|
||||
list: '',
|
||||
mobiles: uni.cache.get('loginuser').userinfo.mobile,
|
||||
};
|
||||
},
|
||||
async onLoad(options) {
|
||||
this.reservationpaythebill()
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
onShow() {
|
||||
this.$store.dispatch('storeuseruserinfo')
|
||||
},
|
||||
methods: {
|
||||
async getPhoneNumber(res) { // 获取手机号
|
||||
var resdataa = res
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: async (data) => {
|
||||
let resdata = await this.api.usergetwechatphone({
|
||||
code: data.code,
|
||||
iv: resdataa.detail.iv,
|
||||
encryptedData: resdataa.detail.encryptedData
|
||||
})
|
||||
try {
|
||||
this.mobiles = resdata.mobile
|
||||
} catch (e) {
|
||||
uni.showToast({
|
||||
title: '获取失败'
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
// 方法
|
||||
checkNum(e) {
|
||||
let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "")
|
||||
console.log(val);
|
||||
if (!val) {
|
||||
this.amount = '';
|
||||
return
|
||||
}
|
||||
var reg = /[^\d.]/g
|
||||
|
||||
// 只能是数字和小数点，不能是其他输入
|
||||
val = val.replace(reg, "")
|
||||
// // 保证第一位只能是数字，不能是点
|
||||
val = val.replace(/^\./g, "");
|
||||
// // 小数只能出现1位
|
||||
val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
|
||||
// // 小数点后面保留2位
|
||||
val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
|
||||
console.log(val);
|
||||
this.$nextTick(() => {
|
||||
this.amount = val;
|
||||
})
|
||||
},
|
||||
pay_typeclick(e) {
|
||||
this.pay_type = e
|
||||
},
|
||||
async reservationpaythebill() {
|
||||
let res = await this.api.reservationpaythebill({
|
||||
store_id: uni.cache.get('store_id') // 判断显示哪家的作品
|
||||
})
|
||||
this.list = res
|
||||
},
|
||||
openpopup() {
|
||||
console.log('open');
|
||||
},
|
||||
closepopup() {
|
||||
this.ucodeinputvalue = ''
|
||||
this.showpopup = false
|
||||
},
|
||||
finish(e) {
|
||||
this.showpopup = false
|
||||
this.reservationmakenowsub()
|
||||
},
|
||||
async showpopupclick() {
|
||||
if (this.amount == null || this.amount == '') {
|
||||
uni.showToast({
|
||||
title: '支付金额不能为0',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.pay_type == 1) {
|
||||
this.reservationmakenowsub()
|
||||
}
|
||||
if (this.pay_type == 2) {
|
||||
let res = await this.api.useruserinfo() //p判断是否完成手机号
|
||||
uni.cache.set('loginuser', res);
|
||||
if (res.userinfo.mobile) {
|
||||
if (this.list.user_sec_password == 0) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您目前没有设置密码，请先设置支付密码',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/setup/repairpassword'
|
||||
});
|
||||
} else if (res.cancel) {}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.showpopup = true
|
||||
}
|
||||
} else {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认订单需要获取您的手机号',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/setup/index'
|
||||
});
|
||||
} else if (res.cancel) {}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
async reservationmakenowsub() {
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
try {
|
||||
var res = await this.api.reservationpaythebillsub({
|
||||
store_id: uni.cache.get('store_id'), // 判断显示哪家的作品
|
||||
amount: this.amount,
|
||||
pay_type: this.pay_type,
|
||||
sec_password: this.ucodeinputvalue
|
||||
})
|
||||
this.ucodeinputvalue = ''
|
||||
if (res.pay_status == 0) {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.pay_data.payAppId, // 微信支付商户号
|
||||
timeStamp: res.pay_data.payTimeStamp, // 时间戳（单位：秒）
|
||||
nonceStr: res.pay_data.paynonceStr, // 随机字符串
|
||||
package: res.pay_data.payPackage, // 固定值
|
||||
signType: res.pay_data.paySignType, //固定值
|
||||
paySign: res.pay_data.paySign, //签名
|
||||
success: (res) => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
setTimeout(res => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
},
|
||||
fail: (err) => {
|
||||
setTimeout(res => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败'
|
||||
})
|
||||
uni.hideLoading()
|
||||
}, 2000)
|
||||
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
setTimeout(res => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #f8f7f7;
|
||||
}
|
||||
|
||||
.u-popupflex-colum {
|
||||
padding: 80rpx 40rpx;
|
||||
border-radius: 50rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.u-popupflex-columview {
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wrap {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 50rpx;
|
||||
left: 0;
|
||||
padding: 28upx 28upx calc(env(safe-area-inset-bottom) + 28upx);
|
||||
.btn {
|
||||
padding: 20upx 0;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 34rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
button::after {
|
||||
border: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: transparent !important;
|
||||
padding: 0 !important;
|
||||
color: #FFFFFF;
|
||||
line-height: inherit !important;
|
||||
margin: 0 !important;
|
||||
width: 100% !important;
|
||||
font-weight: 500 !important;
|
||||
border-radius: none !important;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 28upx;
|
||||
padding-bottom: 640upx;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 28upx;
|
||||
border-radius: 28upx;
|
||||
background-color: #fff;
|
||||
margin-bottom: 28upx;
|
||||
|
||||
.title {
|
||||
font-size: 32upx;
|
||||
}
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.cover {
|
||||
$size: 80upx;
|
||||
width: $size;
|
||||
height: $size;
|
||||
border-radius: 50%;
|
||||
margin-right: 20upx;
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
.t {
|
||||
font-size: 32upx;
|
||||
}
|
||||
}
|
||||
|
||||
.input-wrap {
|
||||
padding: 28upx 0 0;
|
||||
|
||||
.input-cont {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1upx solid #ececec;
|
||||
|
||||
.i {
|
||||
font-size: 42upx;
|
||||
font-weight: bold;
|
||||
margin-right: 12upx;
|
||||
position: relative;
|
||||
top: -4upx;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 48upx;
|
||||
height: 80upx;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
padding-right: 14upx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
display: flex;
|
||||
padding-top: 24upx;
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay-list {
|
||||
.item {
|
||||
padding: 28upx 0;
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
$size: 42upx;
|
||||
width: $size;
|
||||
height: $size;
|
||||
margin-right: 20upx;
|
||||
}
|
||||
|
||||
.t {
|
||||
.t_one {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.t_tow {
|
||||
font-size: 24rpx;
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.num-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
.t {
|
||||
font-size: 32upx;
|
||||
}
|
||||
|
||||
.b {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.number-key-wrap {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: #efefef;
|
||||
z-index: 999;
|
||||
padding: 28upx 28upx calc(env(safe-area-inset-bottom) + 28upx);
|
||||
border-radius: 28upx 28upx 0 0;
|
||||
$gap: 12upx;
|
||||
$radius: 14upx;
|
||||
$itemH: 120upx;
|
||||
|
||||
.number-key {
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
font-size: 48upx;
|
||||
font-weight: bold;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: $radius;
|
||||
background-color: #fff;
|
||||
|
||||
&.active {
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
flex: 1;
|
||||
|
||||
.num-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: $itemH $itemH $itemH;
|
||||
grid-gap: $gap;
|
||||
}
|
||||
|
||||
.num-foot {
|
||||
padding-top: $gap;
|
||||
display: grid;
|
||||
grid-gap: $gap;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-template-rows: $itemH;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 160upx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: $gap;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
|
||||
&:last-child {
|
||||
margin-top: $gap;
|
||||
font-size: 32upx;
|
||||
}
|
||||
|
||||
&.confirm {
|
||||
background-color: #ffcc17;
|
||||
|
||||
&.active {
|
||||
background-color: #e1b516;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.success-wrap {
|
||||
padding: 0 28upx calc(env(safe-area-inset-bottom) + 28upx);
|
||||
|
||||
.title {
|
||||
padding: 28upx 0;
|
||||
font-size: 32upx;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
.img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12upx 0;
|
||||
border-radius: 100upx;
|
||||
font-size: 28upx;
|
||||
background: #ffcc17;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user