You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
399 lines
9.4 KiB
399 lines
9.4 KiB
<template>
|
|
<view class="confrim-container">
|
|
<view class="content">
|
|
<view class="confrim-tips">
|
|
<img src="/static/images/details/tips.svg" alt="" style="width: 12px;height: 12px;margin-right: 5px;">
|
|
<text>如需取消，请查看详情页的退改政策或咨询服务人员</text>
|
|
</view>
|
|
<view class="confirm-form">
|
|
<uni-forms ref="baseForm" :modelValue="confirmData" label-position="top">
|
|
<uni-forms-item>
|
|
<label slot="label" class="form-label">手机号<span
|
|
style="color: #FF3D3D;margin-left: 4px;">*</span></label>
|
|
<uni-easyinput v-model="confirmData.phone" placeholder="请输入您的手机号以便我们联系您" />
|
|
</uni-forms-item>
|
|
<!-- <uni-forms-item>
|
|
<label slot="label" class="form-label">微信号</label>
|
|
<uni-easyinput v-model="confirmData.wechatId" placeholder="请输入您的微信号以便我们联系您" />
|
|
</uni-forms-item> -->
|
|
<uni-forms-item>
|
|
<label slot="label" class="form-label">备注</label>
|
|
<uni-easyinput v-model="confirmData.note" placeholder="请输入您的备注信息" />
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
</view>
|
|
<view class="content-container">
|
|
<view class="normal-bolb-text">
|
|
价格明细
|
|
</view>
|
|
<view class="price-details">
|
|
<view v-for="(item,index) in itemPrices" class="price-details-for" :key="index">
|
|
<view class="normal-text">
|
|
{{item.itemType}}
|
|
</view>
|
|
<view class="price-calculate">
|
|
￥{{item.price}} x {{item.quantity}} {{item.unit}}
|
|
<text style="color: #FF530A; margin-left:4px"> = ￥{{item.price*item.quantity}}</text>
|
|
</view>
|
|
<view class="line" style="background-color: #FFE8C6;"></view>
|
|
</view>
|
|
<view class="price-details-for">
|
|
<view class="normal-text">
|
|
{{currentMember.itemType}}
|
|
</view>
|
|
<view class="price-calculate" style="color: #FF530A;">
|
|
-￥{{submitData.totalPrice * currentMember.discount}}
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="payment">
|
|
<view class="details-radio" style="width: 100%;padding-bottom: 10px;">
|
|
<label class="details-radio" @click="changeAgree">
|
|
<radio style="transform:scale(0.5);" color="#FFB13F" activeBorderColor="#FFB13F"
|
|
activeBackgroundColor="#FFB13F" :checked="isAgree" />
|
|
我同意
|
|
</label>
|
|
<text class="details-agreement" @click="checkAgreement">《猫妈狗爸用户服务协议和隐私协议》</text>
|
|
</view>
|
|
<view class="total-price">
|
|
<text class="total-price-text">应付价格：</text>
|
|
<text class="total-price-value">￥{{submitData.totalPrice * (1-(currentMember.discount?currentMember.discount:0))}}元</text>
|
|
</view>
|
|
<button class="payment-btn" :loading="loading" @click="payment"> {{loading?'下单中':'支付'}}</button>
|
|
</view>
|
|
<Kefu></Kefu>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Kefu from '../common/kefu.vue'
|
|
import {
|
|
getOpenId,
|
|
createOrder
|
|
} from '@/api/system/user.js'
|
|
import { getToken,getOpenIdKey,setOpenIdKey } from '@/utils/auth'
|
|
import {getPersonalInfo} from "@/api/system/personal.js"
|
|
export default {
|
|
data() {
|
|
return {
|
|
loading:false,
|
|
totalPrice: 0,
|
|
confirmData: {
|
|
phone: "",
|
|
wechatId: "",
|
|
note: "",
|
|
},
|
|
submitData: {},
|
|
itemPrices: [],
|
|
isAgree: false,
|
|
isPaying: false,
|
|
openIdString: '',
|
|
currentMember:{},
|
|
memberDiscountList:[
|
|
{
|
|
itemType:"新晋家长9.5折优惠",
|
|
discount:0.05
|
|
},
|
|
{
|
|
itemType:"普卡会员9折优惠",
|
|
discount:0.1
|
|
},
|
|
{
|
|
itemType:"银卡会员8.8折优惠",
|
|
discount:0.12
|
|
},
|
|
{
|
|
itemType:"银卡会员8.5折优惠",
|
|
discount:0.15
|
|
}
|
|
]
|
|
|
|
}
|
|
},
|
|
components:{
|
|
Kefu
|
|
},
|
|
onLoad() {
|
|
if (getToken() && getOpenIdKey()) {
|
|
this.getPersonalInfo()
|
|
}
|
|
this.submitData = this.$globalData.submitData;
|
|
this.itemPrices = [...this.$globalData.servicePrices, ...this.$globalData.itemPrices];
|
|
this.confirmData = this.$globalData.confirmData;
|
|
},
|
|
methods: {
|
|
payment() {
|
|
if (!this.confirmData.phone) {
|
|
this.$modal.showToast('请输入手机号');
|
|
return;
|
|
}
|
|
const phoneNumberRegex = /^1[3456789]\d{9}$/
|
|
if (!phoneNumberRegex.test(this.confirmData.phone)) {
|
|
this.$modal.showToast('请输入正确的手机号');
|
|
return;
|
|
}
|
|
if (!this.isAgree) {
|
|
this.$modal.showToast('请阅读并同意《猫妈狗爸用户服务协议和隐私协议》');
|
|
return;
|
|
}
|
|
if (this.openIdString) {
|
|
this.setSubmitData(this.openIdString)
|
|
} else {
|
|
this.loading=true
|
|
uni.login({
|
|
provider: 'weixin',
|
|
success: (loginRes) => {
|
|
this.getOpenId(loginRes.code)
|
|
},
|
|
fail: function(error) {
|
|
this.loading=false
|
|
// 授权失败处理
|
|
uni.showToast('授权失败，请授权后再试')
|
|
}
|
|
});
|
|
}
|
|
|
|
},
|
|
getOpenId(code) {
|
|
getOpenId(code).then(res => {
|
|
if (res.code == 200 && res.data) {
|
|
this.openIdString = JSON.parse(res.data).openId;
|
|
this.$globalData.openIdStr = this.openIdString;
|
|
setOpenIdKey(this.openIdString)
|
|
this.throttle(this.setSubmitData(this.openIdString),1000)
|
|
}else{
|
|
this.loading=false
|
|
}
|
|
})
|
|
},
|
|
setSubmitData(openId) {
|
|
this.submitData.phone = this.confirmData.phone;
|
|
this.submitData.wechatId = this.confirmData.wechatId;
|
|
this.submitData.note = this.confirmData.note;
|
|
this.submitData.openId = openId;
|
|
this.submitData.skuList = [...this.$globalData.mainSku, ...this.$globalData.augmentedSku]
|
|
console.log(this.submitData);
|
|
createOrder(this.submitData).then(res => {
|
|
if (res.code == 200) {
|
|
this.pay(res.data)
|
|
} else {
|
|
this.$modal.showToast('创建订单失败，请重试');
|
|
this.loading=false
|
|
}
|
|
})
|
|
// uni.navigateTo({
|
|
// url:'/pages/details/successful'
|
|
// });
|
|
},
|
|
pay(params) {
|
|
if (this.isPaying) {
|
|
return;
|
|
}
|
|
this.isPaying = true
|
|
uni.requestPayment({
|
|
provider: 'wxpay',
|
|
timeStamp: params.timeStamp,
|
|
nonceStr: params.nonceStr,
|
|
package: params.package_,
|
|
signType: params.signType,
|
|
paySign: params.paySign,
|
|
success: (res) => {
|
|
this.$modal.showToast('支付成功')
|
|
uni.navigateTo({
|
|
url: '/pages/details/successful'
|
|
});
|
|
},
|
|
fail: (err) => {
|
|
this.loading=false
|
|
console.log('支付失败', err)
|
|
this.$modal.showToast('支付失败')
|
|
},
|
|
complete: () => {
|
|
this.loading=false
|
|
this.isPaying = false
|
|
}
|
|
})
|
|
|
|
|
|
},
|
|
changeAgree() {
|
|
console.log(this.isAgree);
|
|
if (this.isAgree) {
|
|
this.isAgree = false
|
|
} else {
|
|
this.isAgree = true
|
|
}
|
|
},
|
|
checkAgreement() {
|
|
uni.navigateTo({
|
|
url: '/pages/details/agreement'
|
|
});
|
|
},
|
|
getPersonalInfo(){
|
|
getPersonalInfo().then(res=>{
|
|
if(res&&(res.id || res.id === 0)){
|
|
let userLevel=res.level
|
|
this.currentMember = this.memberDiscountList.find(item=>{
|
|
if(item.itemType.includes(userLevel)){
|
|
return item
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 节流
|
|
throttle(func, delay) {
|
|
let lastCall = 0;
|
|
return function(...args) {
|
|
const now = new Date().getTime();
|
|
if (now - lastCall < delay) {
|
|
return;
|
|
}
|
|
lastCall = now;
|
|
func(...args);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.confrim-container {
|
|
background-color: #F5F5F7;
|
|
position: relative;
|
|
height: 100%;
|
|
padding-bottom: 90px;
|
|
|
|
.confrim-tips {
|
|
height: 36px;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #A94F20;
|
|
font-size: 10px;
|
|
background-color: #FFF8DF;
|
|
}
|
|
|
|
.confirm-form {
|
|
padding: 18px 20px;
|
|
background-color: #ffffff;
|
|
|
|
.form-label {
|
|
color: #333;
|
|
font-size: 16px;
|
|
line-height: 16px;
|
|
margin-bottom: 10px;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.content-container {
|
|
margin-top: 10px;
|
|
background-color: #ffffff;
|
|
padding: 14px 20px;
|
|
}
|
|
|
|
.normal-bolb-text {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
line-height: 16px;
|
|
color: #333;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.normal-text {
|
|
font-size: 14px;
|
|
color: #A94F20;
|
|
}
|
|
|
|
.price-details {
|
|
padding: 10px 20px;
|
|
background-color: #FFFCF2;
|
|
border: 1px solid #FFE8C6;
|
|
border-radius: 4px;
|
|
|
|
.price-details-for {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
}
|
|
|
|
.price-calculate {
|
|
font-size: 14px;
|
|
color: #999;
|
|
}
|
|
|
|
.line {
|
|
height: 1px;
|
|
width: 100%;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
}
|
|
|
|
.payment {
|
|
height: 90px;
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
padding: 10px 20px;
|
|
background-color: #ffffff;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
.total-price-text {
|
|
color: #333;
|
|
font-size: 16px;
|
|
font-weight: blob;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.total-price-value {
|
|
color: #FF530A;
|
|
font-size: 22px;
|
|
font-weight: blob;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.payment-btn {
|
|
width: 140px;
|
|
height: 38px;
|
|
border-radius: 6px;
|
|
background: #FFB13F;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.details-radio {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #858585;
|
|
font-size: 14px;
|
|
line-height: 16px;
|
|
|
|
/* 133.333% */
|
|
.details-agreement {
|
|
color: #A94F20;
|
|
|
|
}
|
|
}
|
|
}
|
|
</style>
|