|
- <template>
- <div class="Box">
- <div class="back-box">
- <van-icon
- class="back-icon"
- @click="goBack"
- size=".6rem"
- name="arrow-left"
- color="#fff"
- />
- <span>会员核销</span>
- </div>
- <div class="topImgBox">{{ thenDate }}</div>
- <van-list
- v-model="loading"
- :finished="finished"
- finished-text="没有更多了"
- @load="onLoad"
- style="background-color: #f8f8fa"
- >
- <div class="bill" v-for="(item, index) in list" :key="index">
- <div class="bul_Box">
- <div class="left">券状态</div>
- <div
- class="right"
- :style="'color:' + setStype(item.couponOrderStatus, 'cl')"
- >
- {{ setStype(item.couponOrderStatus, "name") }}
- </div>
- </div>
- <div class="bul_Box">
- <div class="left">券名称</div>
- <div class="right" style="color: #b8b8b8">{{ item.title }}</div>
- </div>
- <div class="bul_Box">
- <div class="left">券码</div>
- <div class="right" style="color: #b8b8b8">{{ item.id }}</div>
- </div>
- <div class="bul_Box">
- <div class="left">
- {{ item.couponOrderStatus == 1 ? "核销时间" : "退款时间" }}
- </div>
- <div class="right" style="color: #b8b8b8">
- {{ setTiem(item.updateDate, "YYYY-MM-DD HH:mm:ss") }}
- </div>
- </div>
- <div class="bul_Box">
- <div class="left">购买用户</div>
- <div class="right" style="color: #b8b8b8">{{ item.cuserPhone }}</div>
- </div>
- <div class="bul_Box">
- <div class="left">核销员</div>
- <div class="right" style="color: #b8b8b8">{{ item.buserName }}</div>
- </div>
- <div class="bul_Box">
- <div class="left">{{ item.type == 8 ? "原价" : "券面额" }}</div>
- <div class="right" style="color: #b8b8b8">
- {{ item.price / 100 }}元
- </div>
- </div>
- <div class="bul_Box">
- <div class="left">{{ item.type == 8 ? "底价" : "券售价" }}</div>
- <div class="right" style="color: #b8b8b8">
- {{ item.couponPrice / 100 }}元
- </div>
- </div>
- </div>
- </van-list>
-
- <div class="calendar" @click="show = !show">
- <img src="@/assets/images/calendar.png" alt="" class="calendar_img" />
- </div>
- <van-popup v-model="show" position="bottom">
- <van-datetime-picker
- v-model="currentDate"
- color="#52a0fd"
- type="date"
- title="选择年月日"
- :min-date="minDate"
- :max-date="maxDate"
- @confirm="onConfirm"
- @cancel="show = !show"
- />
- </van-popup>
- </div>
- </template>
-
- <script>
- import { formatDate } from "@/utils/cloud-utils";
- import Vue from "vue";
- import { DatetimePicker, Toast, List, Popup } from "vant";
- import moment from "moment";
- import { fstat } from 'fs';
- Vue.use(DatetimePicker, Toast, List, Popup);
- export default {
- data() {
- return {
- currentDate: new Date(),
- loading: false,
- finished: false,
- thenDate: "",
- show: false,
- minDate: new Date(2015, 0, 1),
- maxDate: new Date(2025, 0, 1),
- pageNum: 1,
- pageSize: 10,
- pitchTiem: "",
- list: [],
- scrollTopFalg: "",
- statusList: [
- {
- value: 0,
- name: "未核销",
- cl: "#FFAE00",
- },
- {
- value: 1,
- name: "已核销",
- cl: "#52A0FD",
- },
- {
- value: 2,
- name: "已过期",
- cl: "#FF5700",
- },
- {
- value: 3,
- name: "已退款",
- cl: "#FF5700",
- },
- ],
- };
- },
- methods: {
- goBack() {
- this.$router.go(-1)
- },
- //时间处理
- setTiem(temp, format) {
- //第一个参数是时间戳 第二个参数是格式 参考momentJS
- return moment(Number(temp)).format(format);
- },
- //下拉加载
- onLoad() {
- this.pageNum += 1;
- this.getLsit();
- },
- // status 状态值 value 返回类型
- setStype(status, value) {
- if (value == "cl") {
- return this.statusList.filter((res) => {
- return res.value == status;
- })[0].cl;
- } else {
- return this.statusList.filter((res) => {
- return res.value == status;
- })[0].name;
- }
- },
-
- onConfirm(date) {
- let tmepTime = formatDate(new Date(date), "yyyy-MM-dd");
- this.pitchTiem = tmepTime;
- this.thenDate = tmepTime;
- this.pageNum = 1 ;
- this.list = [];
- this.getLsit();
- this.show = false;
- //查询
- },
- getLsit() {
- this.loading = true;
- this.$http
- .couponOrderListVerified({
- methods: "get",
- params: {
- date: this.pitchTiem,
- pageNum: this.pageNum,
- pageSize: 10,
- },
- })
- .then((res) => {
- const { code, data } = res;
- if (code == 200) {
-
- this.loading = false;
- this.list = this.list.concat(data.list.list);
- this.finished = data.list.list.length === 0?true:false;
- } else {
- Toast(message);
- return;
- }
- })
- .catch((res) => {
- Toast(res);
- });
- },
- },
- mounted() {
- this.thenDate = formatDate(new Date(), "yyyy-MM-dd");
- this.pitchTiem = this.thenDate;
- this.getLsit();
- },
- };
- </script>
-
- <style scoped>
- .Box {
- width: 100%;
- height: 100%;
- background-color: #f8f8fa;
- }
- .back-box {
- left: 0;
- top: 0;
- z-index: 1000;
- width: 100%;
- height: 1.3rem;
- line-height: 1.3rem;
- background: #52a0fd;
- color: #fff;
- font-size: 0.43rem;
- text-align: center;
- }
- .back-icon {
- float: left;
- margin: 0.4rem 0 0 0.1rem;
- }
- .topImgBox {
- width: 100%;
- overflow: hidden;
- background-image: url("../../assets/images/bannerbg.png");
- background-size: 100% 1.2rem;
- text-align: center;
- color: #ffffff;
- line-height: 1.2rem;
- font-size: 0.5rem;
- margin-bottom: 0.2rem;
- }
- .bill {
- width: 96%;
- margin: 0 2%;
- background-color: #ffffff;
- border-radius: 0.2rem;
- margin-bottom: 0.5rem;
- }
- .bul_Box {
- overflow: hidden;
- }
- .right {
- float: right;
- font-size: 0.4rem;
- text-align: right;
- padding: 0.3rem 0.5rem;
- }
- .left {
- float: left;
- font-size: 0.4rem;
- text-align: left;
- padding: 0.3rem 0.5rem;
- }
- .calendar {
- width: 2rem;
- height: 2rem;
- background-color: #52a0fd;
- position: fixed;
- border-radius: 50%;
- bottom: 2rem;
- margin-left: 40%;
- }
- .calendar_img {
- margin: 0.5rem;
- }
- </style>
|