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.
 
 
 
 

274 line
6.5 KiB

  1. <template>
  2. <div class="Box">
  3. <div class="back-box">
  4. <van-icon
  5. class="back-icon"
  6. @click="goBack"
  7. size=".6rem"
  8. name="arrow-left"
  9. color="#fff"
  10. />
  11. <span>会员核销</span>
  12. </div>
  13. <div class="topImgBox">{{ thenDate }}</div>
  14. <van-list
  15. v-model="loading"
  16. :finished="finished"
  17. finished-text="没有更多了"
  18. @load="onLoad"
  19. style="background-color: #f8f8fa"
  20. >
  21. <div class="bill" v-for="(item, index) in list" :key="index">
  22. <div class="bul_Box">
  23. <div class="left">券状态</div>
  24. <div
  25. class="right"
  26. :style="'color:' + setStype(item.couponOrderStatus, 'cl')"
  27. >
  28. {{ setStype(item.couponOrderStatus, "name") }}
  29. </div>
  30. </div>
  31. <div class="bul_Box">
  32. <div class="left">券名称</div>
  33. <div class="right" style="color: #b8b8b8">{{ item.title }}</div>
  34. </div>
  35. <div class="bul_Box">
  36. <div class="left">券码</div>
  37. <div class="right" style="color: #b8b8b8">{{ item.id }}</div>
  38. </div>
  39. <div class="bul_Box">
  40. <div class="left">
  41. {{ item.couponOrderStatus == 1 ? "核销时间" : "退款时间" }}
  42. </div>
  43. <div class="right" style="color: #b8b8b8">
  44. {{ setTiem(item.updateDate, "YYYY-MM-DD HH:mm:ss") }}
  45. </div>
  46. </div>
  47. <div class="bul_Box">
  48. <div class="left">购买用户</div>
  49. <div class="right" style="color: #b8b8b8">{{ item.cuserPhone }}</div>
  50. </div>
  51. <div class="bul_Box">
  52. <div class="left">核销员</div>
  53. <div class="right" style="color: #b8b8b8">{{ item.buserName }}</div>
  54. </div>
  55. <div class="bul_Box">
  56. <div class="left">{{ item.type == 8 ? "原价" : "券面额" }}</div>
  57. <div class="right" style="color: #b8b8b8">
  58. {{ item.price / 100 }}元
  59. </div>
  60. </div>
  61. <div class="bul_Box">
  62. <div class="left">{{ item.type == 8 ? "底价" : "券售价" }}</div>
  63. <div class="right" style="color: #b8b8b8">
  64. {{ item.couponPrice / 100 }}元
  65. </div>
  66. </div>
  67. </div>
  68. </van-list>
  69. <div class="calendar" @click="show = !show">
  70. <img src="@/assets/images/calendar.png" alt="" class="calendar_img" />
  71. </div>
  72. <van-popup v-model="show" position="bottom">
  73. <van-datetime-picker
  74. v-model="currentDate"
  75. color="#52a0fd"
  76. type="date"
  77. title="选择年月日"
  78. :min-date="minDate"
  79. :max-date="maxDate"
  80. @confirm="onConfirm"
  81. @cancel="show = !show"
  82. />
  83. </van-popup>
  84. </div>
  85. </template>
  86. <script>
  87. import { formatDate } from "@/utils/cloud-utils";
  88. import Vue from "vue";
  89. import { DatetimePicker, Toast, List, Popup } from "vant";
  90. import moment from "moment";
  91. import { fstat } from 'fs';
  92. Vue.use(DatetimePicker, Toast, List, Popup);
  93. export default {
  94. data() {
  95. return {
  96. currentDate: new Date(),
  97. loading: false,
  98. finished: false,
  99. thenDate: "",
  100. show: false,
  101. minDate: new Date(2015, 0, 1),
  102. maxDate: new Date(2025, 0, 1),
  103. pageNum: 1,
  104. pageSize: 10,
  105. pitchTiem: "",
  106. list: [],
  107. scrollTopFalg: "",
  108. statusList: [
  109. {
  110. value: 0,
  111. name: "未核销",
  112. cl: "#FFAE00",
  113. },
  114. {
  115. value: 1,
  116. name: "已核销",
  117. cl: "#52A0FD",
  118. },
  119. {
  120. value: 2,
  121. name: "已过期",
  122. cl: "#FF5700",
  123. },
  124. {
  125. value: 3,
  126. name: "已退款",
  127. cl: "#FF5700",
  128. },
  129. ],
  130. };
  131. },
  132. methods: {
  133. goBack() {
  134. this.$router.go(-1)
  135. },
  136. //时间处理
  137. setTiem(temp, format) {
  138. //第一个参数是时间戳 第二个参数是格式 参考momentJS
  139. return moment(Number(temp)).format(format);
  140. },
  141. //下拉加载
  142. onLoad() {
  143. this.pageNum += 1;
  144. this.getLsit();
  145. },
  146. // status 状态值 value 返回类型
  147. setStype(status, value) {
  148. if (value == "cl") {
  149. return this.statusList.filter((res) => {
  150. return res.value == status;
  151. })[0].cl;
  152. } else {
  153. return this.statusList.filter((res) => {
  154. return res.value == status;
  155. })[0].name;
  156. }
  157. },
  158. onConfirm(date) {
  159. let tmepTime = formatDate(new Date(date), "yyyy-MM-dd");
  160. this.pitchTiem = tmepTime;
  161. this.thenDate = tmepTime;
  162. this.pageNum = 1 ;
  163. this.list = [];
  164. this.getLsit();
  165. this.show = false;
  166. //查询
  167. },
  168. getLsit() {
  169. this.loading = true;
  170. this.$http
  171. .couponOrderListVerified({
  172. methods: "get",
  173. params: {
  174. date: this.pitchTiem,
  175. pageNum: this.pageNum,
  176. pageSize: 10,
  177. },
  178. })
  179. .then((res) => {
  180. const { code, data } = res;
  181. if (code == 200) {
  182. this.loading = false;
  183. this.list = this.list.concat(data.list.list);
  184. this.finished = data.list.list.length === 0?true:false;
  185. } else {
  186. Toast(message);
  187. return;
  188. }
  189. })
  190. .catch((res) => {
  191. Toast(res);
  192. });
  193. },
  194. },
  195. mounted() {
  196. this.thenDate = formatDate(new Date(), "yyyy-MM-dd");
  197. this.pitchTiem = this.thenDate;
  198. this.getLsit();
  199. },
  200. };
  201. </script>
  202. <style scoped>
  203. .Box {
  204. width: 100%;
  205. height: 100%;
  206. background-color: #f8f8fa;
  207. }
  208. .back-box {
  209. left: 0;
  210. top: 0;
  211. z-index: 1000;
  212. width: 100%;
  213. height: 1.3rem;
  214. line-height: 1.3rem;
  215. background: #52a0fd;
  216. color: #fff;
  217. font-size: 0.43rem;
  218. text-align: center;
  219. }
  220. .back-icon {
  221. float: left;
  222. margin: 0.4rem 0 0 0.1rem;
  223. }
  224. .topImgBox {
  225. width: 100%;
  226. overflow: hidden;
  227. background-image: url("../../assets/images/bannerbg.png");
  228. background-size: 100% 1.2rem;
  229. text-align: center;
  230. color: #ffffff;
  231. line-height: 1.2rem;
  232. font-size: 0.5rem;
  233. margin-bottom: 0.2rem;
  234. }
  235. .bill {
  236. width: 96%;
  237. margin: 0 2%;
  238. background-color: #ffffff;
  239. border-radius: 0.2rem;
  240. margin-bottom: 0.5rem;
  241. }
  242. .bul_Box {
  243. overflow: hidden;
  244. }
  245. .right {
  246. float: right;
  247. font-size: 0.4rem;
  248. text-align: right;
  249. padding: 0.3rem 0.5rem;
  250. }
  251. .left {
  252. float: left;
  253. font-size: 0.4rem;
  254. text-align: left;
  255. padding: 0.3rem 0.5rem;
  256. }
  257. .calendar {
  258. width: 2rem;
  259. height: 2rem;
  260. background-color: #52a0fd;
  261. position: fixed;
  262. border-radius: 50%;
  263. bottom: 2rem;
  264. margin-left: 40%;
  265. }
  266. .calendar_img {
  267. margin: 0.5rem;
  268. }
  269. </style>