382 lines
9.6 KiB
Vue
382 lines
9.6 KiB
Vue
<template>
|
||
<view class="s_page">
|
||
<custom :isBack="true">
|
||
<template v-slot:content>
|
||
<view style="font-size: 38rpx; font-weight: bold"> 認証明細 </view>
|
||
</template>
|
||
</custom>
|
||
<view class="main">
|
||
<view v-if="dataList.length !== 0">
|
||
<view
|
||
class="recode_box"
|
||
v-for="item in dataList"
|
||
:key="item.id"
|
||
:style="{ marginTop: StatusBar !== 0 ? '88rpx' : '' }"
|
||
>
|
||
<view class="title_box">
|
||
NO.{{ item.ticket_number }}
|
||
<button
|
||
v-if="item.status == 1"
|
||
class="btn"
|
||
@click="openDelRecode(item)"
|
||
>
|
||
削除
|
||
</button>
|
||
<span style="background: #eeeeee; color: #8a8a8a" class="btn" v-else
|
||
>削除済み</span
|
||
>
|
||
</view>
|
||
<view class="item_box">
|
||
<view class="sub_title"> 実際支払い金額 </view>
|
||
<view class="shijizhifu"> ¥{{ item.paid_in_amount }} </view>
|
||
<hr class="hr_style" />
|
||
</view>
|
||
<view class="item_box">
|
||
<view class="sub_title"> 店铺ID </view>
|
||
<view class="id"> ID.{{ item.shop_id }} </view>
|
||
<view class="content">
|
||
{{ item.shop_name }}
|
||
</view>
|
||
<hr class="hr_style" />
|
||
</view>
|
||
<view class="item_box">
|
||
<view class="sub_title"> 割引前金額 </view>
|
||
<view class="num">
|
||
￥{{ item.amount_receivable | formatMoney }}
|
||
</view>
|
||
<hr class="hr_style" />
|
||
</view>
|
||
<view class="item_box">
|
||
<view class="sub_title"> 割引 </view>
|
||
<view class="num">
|
||
<!-- 10% off -->
|
||
<view style="font-size: 34rpx" v-if="item.coupon === 0"
|
||
>SPECIAL OFFER</view
|
||
>
|
||
<view style="font-size: 34rpx" v-else>
|
||
<!-- <span v-if="item.ticketDiscountType === 2"
|
||
>{{ item.coupon }}% off</span
|
||
> -->
|
||
<!-- v-else -->
|
||
<span>{{ item.coupon }} 円</span>
|
||
</view>
|
||
</view>
|
||
<hr class="hr_style" />
|
||
</view>
|
||
<view class="item_box">
|
||
<view class="sub_title"> ポイント利用 </view>
|
||
<view class="num">
|
||
{{ item.points }}
|
||
</view>
|
||
<hr class="hr_style" />
|
||
</view>
|
||
<view class="item_box">
|
||
<view class="sub_title"> お客様人数 </view>
|
||
<view class="num">
|
||
{{ item.number_of_people }}
|
||
</view>
|
||
<hr class="hr_style" />
|
||
</view>
|
||
<view class="item_box">
|
||
<view class="sub_title"> ポイント還元 </view>
|
||
<view class="num">
|
||
{{ item.merchants_reward_points }}
|
||
</view>
|
||
<hr class="hr_style" />
|
||
</view>
|
||
<!-- <view class="item_box" v-if="item.cardBackPoint !== 0">
|
||
<view class="sub_title"> JCBポイント還元 </view>
|
||
<view class="num">
|
||
{{ item.cardBackPoint }}
|
||
</view>
|
||
<hr class="hr_style" />
|
||
</view> -->
|
||
<view class="item_box">
|
||
<view class="sub_title"> 時間 </view>
|
||
<view class="num">
|
||
{{ item.created_at }}
|
||
</view>
|
||
<hr class="hr_style" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view
|
||
style="
|
||
text-align: center;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
margin-top: 50%;
|
||
color: #808080;
|
||
"
|
||
v-else
|
||
>
|
||
{{ noData }}
|
||
</view>
|
||
</view>
|
||
<uni-popup ref="popup">
|
||
<view class="dialog">
|
||
<view class="dialog_text">
|
||
ID {{ delObj.ticket_number }}<br />
|
||
削除しますか？
|
||
</view>
|
||
<!-- <br> -->
|
||
<view class="dialogBtnBox">
|
||
<span class="dialog_btn" @click="delRecode">削除</span>
|
||
<span
|
||
class="dialog_btn"
|
||
style="background: #eee; color: #8a8a8a"
|
||
@click="close"
|
||
>取消</span
|
||
>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import custom from "@/components/custom/custom";
|
||
import { dateTransitionJo, formatMoney } from "@/util/util.js";
|
||
import {
|
||
getVerificationList,
|
||
deleteVerificationRecord,
|
||
} from "@/request/ticketReq";
|
||
export default {
|
||
components: {
|
||
custom,
|
||
},
|
||
filters: {
|
||
formatMoney(val) {
|
||
return formatMoney(val);
|
||
},
|
||
formatTime(val) {
|
||
return dateTransitionJo(val);
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
noData: "読み込み中",
|
||
dataList: [],
|
||
delObj: {},
|
||
machineId: null,
|
||
};
|
||
},
|
||
onLoad: function () {
|
||
this.machineId = "861741042996303";
|
||
this.getDataList();
|
||
return;
|
||
|
||
plus.device.getInfo({
|
||
success: (e) => {
|
||
const imei = e.imei.split(",");
|
||
this.machineId = imei[0];
|
||
this.getDataList();
|
||
},
|
||
fail: function (e) {
|
||
console.log("getDeviceInfo failed: " + JSON.stringify(e));
|
||
},
|
||
});
|
||
// this.getDataList()
|
||
},
|
||
methods: {
|
||
all_price(spendAmount, couponAmount, pointAmount) {
|
||
if (spendAmount / 100 - couponAmount / 100 - pointAmount < 0) {
|
||
return 0;
|
||
}
|
||
return spendAmount / 100 - couponAmount / 100 - pointAmount;
|
||
},
|
||
getDataList() {
|
||
const storeId = uni.getStorageSync("store_obj").id;
|
||
// const storeId =767
|
||
getVerificationList({
|
||
imei: this.machineId,
|
||
})
|
||
.then((res) => {
|
||
console.log(res);
|
||
this.dataList = res.data.data.list;
|
||
})
|
||
.catch((error) => {
|
||
// console.log('报错了',error);
|
||
this.noData = "データなし";
|
||
});
|
||
},
|
||
openDelRecode(row) {
|
||
this.$refs.popup.open("center");
|
||
this.delObj = row;
|
||
},
|
||
delRecode(row) {
|
||
deleteVerificationRecord({
|
||
imei: this.machineId,
|
||
id: this.delObj.id,
|
||
}).then((res) => {
|
||
if (res.data.status === 1) {
|
||
uni.showToast({
|
||
title: "操作成功",
|
||
duration: 1500,
|
||
});
|
||
this.getDataList();
|
||
this.$refs.popup.close();
|
||
}
|
||
});
|
||
},
|
||
close() {
|
||
this.$refs.popup.close();
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.s_page {
|
||
position: relative;
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
height: auto;
|
||
background: linear-gradient(
|
||
rgba(160, 204, 87, 0.2) 0%,
|
||
rgba(223, 226, 0, 0.2) 100%
|
||
);
|
||
|
||
.main {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.recode_box {
|
||
overflow: hidden;
|
||
position: relative;
|
||
width: 626rpx;
|
||
height: auto;
|
||
border-radius: 16rpx;
|
||
margin: 0 auto;
|
||
margin-top: 44rpx;
|
||
padding: 0 30rpx;
|
||
background-color: #fff;
|
||
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
|
||
|
||
.title_box {
|
||
position: relative;
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
margin-top: 16rpx;
|
||
margin-bottom: 26rpx;
|
||
text-align: center;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #0071bc;
|
||
|
||
.btn {
|
||
position: absolute;
|
||
top: 7rpx;
|
||
right: 0rpx;
|
||
width: 116rpx;
|
||
height: 44rpx;
|
||
line-height: 44rpx;
|
||
font-size: 24rpx;
|
||
border-radius: 22rpx;
|
||
background: linear-gradient(90deg, #7eb96a 0%, #d3d722 100%);
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.item_box {
|
||
position: relative;
|
||
width: 100%;
|
||
height: auto;
|
||
|
||
.sub_title {
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
line-height: 32rpx;
|
||
color: #85bc6b;
|
||
}
|
||
|
||
.id {
|
||
font-weight: bold;
|
||
font-size: 34rpx;
|
||
line-height: 38rpx;
|
||
margin-top: 8rpx;
|
||
}
|
||
.shijizhifu {
|
||
text-align: center;
|
||
font-weight: bold;
|
||
font-size: 68rpx;
|
||
}
|
||
|
||
.content {
|
||
font-weight: bold;
|
||
font-size: 34rpx;
|
||
line-height: 38rpx;
|
||
margin-top: 6rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
/* 限制在一个块元素显示的文本的行数 */
|
||
-webkit-box-orient: vertical;
|
||
/* 垂直排列 */
|
||
word-break: break-all;
|
||
/* 内容自动换行 */
|
||
}
|
||
|
||
.num {
|
||
text-align: right;
|
||
font-weight: bold;
|
||
font-size: 34rpx;
|
||
line-height: 38rpx;
|
||
margin-top: 16rpx;
|
||
margin-right: 18rpx;
|
||
}
|
||
|
||
.hr_style {
|
||
height: 1px;
|
||
margin: 16rpx 0;
|
||
border: none;
|
||
background-color: #dbdbdb;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.dialog {
|
||
position: relative;
|
||
background-color: #fff;
|
||
// height: 180rpx;
|
||
line-height: 160rpx;
|
||
// padding: 20rpx;
|
||
border-radius: 16rpx;
|
||
width: 650rpx;
|
||
height: 348rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
.dialog_text {
|
||
text-align: center;
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
line-height: 40rpx;
|
||
color: #000;
|
||
}
|
||
.dialogBtnBox {
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
margin-bottom: 36rpx;
|
||
margin-top: 56rpx;
|
||
}
|
||
|
||
.dialog_btn {
|
||
// width: 100%;
|
||
width: 280rpx;
|
||
height: 82rpx;
|
||
border-radius: 41rpx;
|
||
background: linear-gradient(90deg, #81ba6e 0%, #d3d830 100%);
|
||
line-height: 82rpx;
|
||
text-align: center;
|
||
color: #ffffff;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
</style>
|