596 lines
15 KiB
Vue
596 lines
15 KiB
Vue
<template>
|
||
<view class="s_page" :class="{ mb_flag: mb_flag }">
|
||
<view class="view_content step_three">
|
||
<view class="public_box all_money flex">
|
||
<view class="title">実際支払い金額</view>
|
||
<!-- <view class="content">¥{{ all_price | changeMoney }}</view> -->
|
||
<view class="content">¥{{ newData.dMoney || newData.totalMoney }}</view>
|
||
</view>
|
||
<!-- <view class="step_three_txt">認証明細/{{ $t('核销明细') }}</view> -->
|
||
<view class="public_box fun_box">
|
||
<view class="fun_item">
|
||
<view class="left">店舗ID</view>
|
||
<view class="right flex_abs">
|
||
<view class="right_l">
|
||
<view>NO.{{ axios_data.id }}</view>
|
||
<view>{{ axios_data.storeName }}</view>
|
||
</view>
|
||
<view class="right_r flex_ac"></view>
|
||
</view>
|
||
</view>
|
||
<view class="fun_item">
|
||
<view class="left">割引前金額</view>
|
||
<view class="right flex_abs">
|
||
<!-- <view class="right_l">
|
||
</view> -->
|
||
<view class="right_r flex_ac">
|
||
<view class="txt">¥{{ axios_data.money | changeMoney }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="fun_item">
|
||
<view class="left"> 割引 </view>
|
||
<view class="left"> </view>
|
||
<view
|
||
class="right flex_abs"
|
||
@tap="
|
||
gotoWhere(
|
||
`/pages/verification/selectCoupon?money=${form_data.money.value}`
|
||
)
|
||
"
|
||
>
|
||
<!-- <view class="right_l">
|
||
</view> -->
|
||
<view class="right_r flex_ac" v-if="newData.dTicket">
|
||
<view class="txt">-¥{{ newData.dTicket }}</view>
|
||
<image src="/static/img/icon_118.png" mode=""></image>
|
||
</view>
|
||
<view class="right_r" v-else>
|
||
<view
|
||
style="
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
"
|
||
v-if="newData.dTicket == 0 && newData.dTicket != ''"
|
||
>
|
||
<view class="txt">SPECIAL OFFER</view>
|
||
<image src="/static/img/icon_118.png" mode=""></image>
|
||
</view>
|
||
|
||
<view
|
||
style="
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
"
|
||
v-else
|
||
>
|
||
<view></view>
|
||
<image src="/static/img/icon_118.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="fun_item" v-if="poins_deduction.redirect">
|
||
<view class="left">ポイント利用</view>
|
||
<view
|
||
class="right flex_abs"
|
||
@tap="
|
||
gotoWhere(
|
||
`/pages/verification/selectIntegral?money=${use_con_price * 1}`
|
||
)
|
||
"
|
||
>
|
||
<!-- <view class="right_l">
|
||
</view> -->
|
||
<view class="right_r flex_ac">
|
||
<view class="txt txt_two" v-if="newData.dIntegral"
|
||
>-{{ newData.dIntegral }}</view
|
||
>
|
||
<view class="txt txt_two" v-else></view>
|
||
<image src="/static/img/icon_118.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 人数 -->
|
||
<view class="fun_item">
|
||
<view class="left">お客様人数</view>
|
||
<view class="right flex_abs">
|
||
<!-- <view class="right_l">
|
||
</view> -->
|
||
<view class="right_r flex_ac">
|
||
<view class="txt">{{ axios_data.num_dine }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="step_three_txt" style="color:#007AD7;margin-top: 60rpx;">※{{ $t('请让商家输入验证码并提交') }}</view>
|
||
<view class="public_box shop_code_box" :class="{ 'active': form_data.code.value }">
|
||
<view class="content"><input v-model="form_data.code.value" :password="true" :placeholder="`店舗ID：${axios_data.id}の認証コードを入力してください。`" placeholder-style="font-weight: 600;color:#8A8A8A;" @keyboardheightchange="keyboardheightchange" /></view>
|
||
</view> -->
|
||
<view class="next_btn_box">
|
||
<view
|
||
class="next_btn flex_abc"
|
||
:class="{ active: last_btn_flag }"
|
||
@tap="nextStep()"
|
||
>提出</view
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import custom from "@/components/custom/custom";
|
||
import { verification, getWriteOffInfo } from "@/request/ticketReq";
|
||
export default {
|
||
components: {
|
||
custom,
|
||
},
|
||
data() {
|
||
const moneyRule = (value, callback) => {
|
||
if (!value || value <= 0) {
|
||
return this.$t("请输入金额");
|
||
}
|
||
};
|
||
const peopleRule = (value, callback) => {
|
||
if (!value || value < 1) {
|
||
return this.$t("请输入用餐人数");
|
||
}
|
||
};
|
||
const codeRule = (value, callback) => {
|
||
if (!value) {
|
||
return this.$t("请输入店家核销码");
|
||
}
|
||
};
|
||
return {
|
||
// 表单规则
|
||
rule: {
|
||
money: moneyRule,
|
||
people: peopleRule,
|
||
code: codeRule,
|
||
},
|
||
ids: "",
|
||
store_arr: [],
|
||
plan: 3,
|
||
axios_data: {
|
||
id: "",
|
||
storeName: "",
|
||
point: 0,
|
||
money: "",
|
||
num_dine: "", // 人数
|
||
},
|
||
form_data: {
|
||
money: {
|
||
value: "",
|
||
tips_key: "",
|
||
process_type: 2,
|
||
},
|
||
num_dine: "", // 人数
|
||
},
|
||
ver_coupon: {},
|
||
mb_flag: false,
|
||
tenantId: "",
|
||
|
||
poins_deduction: [],
|
||
newData: [],
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
let { money, num_dine } = options;
|
||
this.form_data.money.value = money;
|
||
this.form_data.num_dine = num_dine;
|
||
this.axios_data.id = uni.getStorageSync("store_obj").id;
|
||
this.axios_data.storeName = uni.getStorageSync("store_obj").shop_name;
|
||
this.axios_data.money = this.form_data.money.value;
|
||
this.axios_data.num_dine = this.form_data.num_dine;
|
||
|
||
console.log("this.axios_data.num_dine", num_dine);
|
||
|
||
this.tenantId = uni.getStorageSync("customer_info")[0];
|
||
this.getListFn(this.axios_data.id, this.tenantId);
|
||
|
||
this.newData = uni.getStorageSync("heXiaoData");
|
||
},
|
||
onUnload() {
|
||
this.clearStore();
|
||
},
|
||
onShow() {
|
||
this.newData = uni.getStorageSync("heXiaoData");
|
||
this.customer_info = uni.getStorageSync("customer_info");
|
||
},
|
||
computed: {
|
||
all_price() {
|
||
let price = this.use_con_price;
|
||
price = price - this.axios_data.point - this.ver_coupon.couponValue;
|
||
return price > 0 ? price : 0;
|
||
},
|
||
use_con_price() {
|
||
let price = this.form_data.money.value;
|
||
if (!this.ver_coupon.couponValue) {
|
||
return price;
|
||
}
|
||
},
|
||
last_btn_flag() {
|
||
console.log(this.form_data);
|
||
this.formDataRuleHandler();
|
||
let tips_key = "";
|
||
// 获取不同步骤的错误提示信息
|
||
for (var key in this.form_data) {
|
||
if (
|
||
this.form_data[key].process_type === this.plan &&
|
||
this.form_data[key].tips_key
|
||
) {
|
||
tips_key = this.form_data[key].tips_key;
|
||
break;
|
||
}
|
||
}
|
||
if (tips_key) {
|
||
return false;
|
||
} else {
|
||
return true;
|
||
}
|
||
},
|
||
},
|
||
methods: {
|
||
async getListFn(spid, userId) {
|
||
let res = await getWriteOffInfo({ shop_id: spid, user_id: userId });
|
||
this.poins_deduction = res.data.data.poins_deduction;
|
||
|
||
console.log("店铺上限", this.poins_deduction);
|
||
},
|
||
keyboardheightchange(event) {
|
||
let { height } = event.detail;
|
||
if (height > 0) {
|
||
this.mb_flag = true;
|
||
} else {
|
||
this.mb_flag = false;
|
||
}
|
||
},
|
||
clearStore() {
|
||
// uni.removeStorageSync("ver_coupon");
|
||
// uni.removeStorageSync("use_point");
|
||
uni.removeStorageSync("heXiaoData");
|
||
},
|
||
// input 失去焦点 检测事件
|
||
blurChecked(key_code) {
|
||
if (key_code == "people" && this.form_data[key_code].value < 1) {
|
||
this.form_data[key_code].value = 1;
|
||
}
|
||
},
|
||
// 表单验证
|
||
formDataRuleHandler() {
|
||
let flag = true;
|
||
let str = "";
|
||
for (let key in this.form_data) {
|
||
if (this.form_data[key].process_type === this.plan) {
|
||
if (this.rule[key]) {
|
||
this.form_data[key].tips_key = this.rule[key](
|
||
this.form_data[key].value
|
||
);
|
||
}
|
||
}
|
||
}
|
||
},
|
||
async verificationApi() {
|
||
// let params = {
|
||
// couponId: this.ver_coupon.couponId
|
||
// ? this.ver_coupon.couponId
|
||
// : this.ver_coupon.id,
|
||
// customerId: uni.getStorageSync("customer_info")[0],
|
||
// // diningNumber: this.form_data.people.value,
|
||
// // discountAmount: this.ver_coupon.couponValue,
|
||
// discountType: 2,
|
||
// point: this.axios_data.point,
|
||
// // securityCode: this.form_data.code.value,
|
||
// spendAmount: this.form_data.money.value * 100,
|
||
// storeId: this.axios_data.id,
|
||
// tenantId: this.tenantId,
|
||
// imei: uni.getStorageSync("store_obj").imei,
|
||
// diningNumber: +this.form_data.num_dine,
|
||
// };
|
||
|
||
// 处理优惠券为JSON格式
|
||
this.newData.coupon = JSON.stringify(this.newData.coupon);
|
||
let params = {
|
||
type: 2,
|
||
shop_id: this.axios_data.id,
|
||
user_id: this.tenantId,
|
||
number_of_people: +this.form_data.num_dine,
|
||
amount_receivable: this.newData.totalMoney,
|
||
coupon: this.newData.coupon,
|
||
points: this.newData.dIntegral,
|
||
};
|
||
console.log("核销参数", params);
|
||
let res = await verification(params);
|
||
console.log("核销结果", res);
|
||
if (res.data.status == 1) {
|
||
const paramsData = encodeURIComponent(JSON.stringify(res.data.data));
|
||
|
||
this.clearStore();
|
||
let url = `/pages/verification/stepResult?params=${paramsData}`;
|
||
uni.redirectTo({
|
||
url,
|
||
});
|
||
}
|
||
},
|
||
// 通用方法
|
||
nextStep() {
|
||
this.verificationApi();
|
||
},
|
||
gotoWhere(url) {
|
||
uni.navigateTo({
|
||
url,
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style>
|
||
page {
|
||
/* background-color: #FFFFFF; */
|
||
background: linear-gradient(
|
||
rgba(160, 204, 87, 0.2) 0%,
|
||
rgba(223, 226, 0, 0.2) 100%
|
||
);
|
||
}
|
||
</style>
|
||
<style scoped lang="scss">
|
||
.s_page {
|
||
min-height: 100vh;
|
||
&.mb_flag {
|
||
width: 100%;
|
||
position: fixed;
|
||
top: -60rpx;
|
||
left: 0;
|
||
// // min-height: calc(100vh + 120rpx);
|
||
// padding-bottom: 500rpx;
|
||
// box-sizing: border-box;
|
||
}
|
||
}
|
||
.custom_c_txt {
|
||
width: 560rpx;
|
||
font-size: 36rpx;
|
||
color: $step_color;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
}
|
||
.public_box {
|
||
width: 100%;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
background-color: #ffffff;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
.view_content {
|
||
padding-top: 20rpx;
|
||
padding-bottom: 150rpx;
|
||
// &.mb_flag {
|
||
// padding-bottom: 500rpx;
|
||
// position: absolute;
|
||
// top: 60rpx;
|
||
// z-index: -1;
|
||
// }
|
||
}
|
||
.title_txt {
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
line-height: 38rpx;
|
||
font-weight: bold;
|
||
&.one {
|
||
color: #007ad7;
|
||
margin: 80rpx 0 8rpx;
|
||
}
|
||
&.two {
|
||
color: #4a4a4a;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
}
|
||
.item {
|
||
border: 3px solid #ffffff;
|
||
.top {
|
||
font-size: 28rpx;
|
||
line-height: 28rpx;
|
||
color: $them_color_two;
|
||
font-weight: bold;
|
||
}
|
||
.line {
|
||
width: 100%;
|
||
height: 1px;
|
||
background-color: $them_color_two;
|
||
margin: 16rpx 0;
|
||
}
|
||
.txt {
|
||
color: #000000;
|
||
font-size: 28rpx;
|
||
line-height: 38rpx;
|
||
font-weight: bold;
|
||
}
|
||
&.active {
|
||
border-color: $them_color_two;
|
||
// background: linear-gradient(90deg, #7EB96A 0%, #D3D823 100%) !important;
|
||
// .top {
|
||
// color: #FFFFFF;
|
||
// }
|
||
// .line {
|
||
// background-color: #FFFFFF;
|
||
// }
|
||
}
|
||
}
|
||
.step_two {
|
||
.item_box {
|
||
width: 100%;
|
||
margin-bottom: 40rpx;
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
.box_title {
|
||
font-size: 28rpx;
|
||
line-height: 38rpx;
|
||
color: $them_color_two;
|
||
font-weight: bold;
|
||
}
|
||
.box_fun {
|
||
width: 100%;
|
||
min-height: 80rpx;
|
||
|
||
.change_btn_box {
|
||
flex-shrink: 0;
|
||
margin-left: 20rpx;
|
||
.chang_btn {
|
||
height: 54rpx;
|
||
width: 54rpx;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
image {
|
||
height: 35%;
|
||
width: 35%;
|
||
display: block;
|
||
}
|
||
&.del {
|
||
background-color: $them_color_two;
|
||
}
|
||
&.add {
|
||
background-color: $them_color_two;
|
||
}
|
||
}
|
||
}
|
||
.txt {
|
||
flex: 1;
|
||
height: 100%;
|
||
padding: 16rpx 0 30rpx;
|
||
box-sizing: border-box;
|
||
align-items: flex-end;
|
||
border-bottom: 1px solid #e1e0e8;
|
||
> view,
|
||
input {
|
||
color: #000000;
|
||
font-size: 48rpx;
|
||
line-height: 48rpx;
|
||
font-weight: bold;
|
||
}
|
||
&.ts {
|
||
> view {
|
||
font-size: 28rpx !important;
|
||
line-height: 38rpx !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.step_three {
|
||
.step_three_txt {
|
||
font-size: 28rpx;
|
||
line-height: 38rpx;
|
||
margin-bottom: 16rpx;
|
||
color: #000000;
|
||
font-weight: bold;
|
||
}
|
||
.all_money {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.title {
|
||
color: $step_color;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
line-height: 38rpx;
|
||
text-align: center;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
.content {
|
||
font-size: 68rpx;
|
||
line-height: 96rpx;
|
||
font-weight: bold;
|
||
color: #000000;
|
||
text-align: center;
|
||
padding: 0 100rpx;
|
||
border-bottom: 1px solid #dbdbdb;
|
||
}
|
||
}
|
||
.fun_box {
|
||
.fun_item {
|
||
width: 100%;
|
||
margin-bottom: 20rpx;
|
||
border-bottom: 1px solid #dbdbdb;
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
.left {
|
||
color: $them_color_two;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
line-height: 38rpx;
|
||
}
|
||
.right {
|
||
padding: 20rpx 0 10rpx;
|
||
.right_l {
|
||
> view {
|
||
font-size: 28rpx;
|
||
line-height: 38rpx;
|
||
color: #000000;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.right_r {
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
.txt {
|
||
font-size: 44rpx;
|
||
line-height: 56rpx;
|
||
color: #000000;
|
||
font-weight: bold;
|
||
}
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
display: block;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.shop_code_box {
|
||
border: 2px solid #8a8a8a;
|
||
&.active {
|
||
border-color: #007ad7;
|
||
}
|
||
.content {
|
||
input {
|
||
font-size: 28rpx;
|
||
line-height: 38rpx;
|
||
color: #007ad7;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.next_btn_box {
|
||
width: 100%;
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
background-color: #ffffff;
|
||
padding: 20rpx 0;
|
||
}
|
||
.next_btn {
|
||
margin: 0 auto;
|
||
width: 92%;
|
||
height: 82rpx;
|
||
border-radius: 41rpx;
|
||
font-size: 32rpx;
|
||
line-height: 32rpx;
|
||
font-weight: bold;
|
||
background: #f2f2f2;
|
||
color: #acacac;
|
||
&.active {
|
||
background: linear-gradient(90deg, #7eb96a 0%, #d3d722 100%);
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
</style>
|