|
@@ -0,0 +1,285 @@
|
|
|
+<template>
|
|
|
+ <van-nav-bar title="详情" :border="false" safe-area-inset-top>
|
|
|
+ <template #left>
|
|
|
+ <van-icon
|
|
|
+ :name="require('@/assets/arrow-left.svg')"
|
|
|
+ size="24"
|
|
|
+ @click="backPath"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </van-nav-bar>
|
|
|
+ <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
|
|
+ <div class="page_info">
|
|
|
+ <van-row align="center" class="list_total">
|
|
|
+ <van-col>共有</van-col>
|
|
|
+ <v-count-up
|
|
|
+ :end-val="total"
|
|
|
+ class="count_up"
|
|
|
+ options="{ separator: ',' }"
|
|
|
+ />
|
|
|
+ <van-col>条记录</van-col>
|
|
|
+ </van-row>
|
|
|
+ <div class="info_list">
|
|
|
+ <van-list
|
|
|
+ v-model:loading="loading"
|
|
|
+ :finished="finished"
|
|
|
+ :error="error"
|
|
|
+ error-text="请求失败,点击重新加载"
|
|
|
+ finished-text="没有更多了"
|
|
|
+ @load="onLoad"
|
|
|
+ >
|
|
|
+ <div v-for="item in dataList" :key="item.id" class="list_item">
|
|
|
+ <van-row>
|
|
|
+ <van-col>收件人:</van-col>
|
|
|
+ <van-col>{{ item.smsCode }}</van-col>
|
|
|
+ </van-row>
|
|
|
+ <van-row>
|
|
|
+ <van-col>发送时间:</van-col>
|
|
|
+ <van-col>{{ item.createDate }}</van-col>
|
|
|
+ </van-row>
|
|
|
+ <van-row>
|
|
|
+ <van-col>空间信息:</van-col>
|
|
|
+ <van-col
|
|
|
+ style="
|
|
|
+ flex: 1;
|
|
|
+ word-break: break-all;
|
|
|
+ height: auto;
|
|
|
+ text-align: left;
|
|
|
+ "
|
|
|
+ >{{ item.spacePos }}</van-col
|
|
|
+ >
|
|
|
+ </van-row>
|
|
|
+ <van-row>
|
|
|
+ <van-col>联系电话:</van-col>
|
|
|
+ <van-col>{{ item.mobile }}</van-col>
|
|
|
+ </van-row>
|
|
|
+ <van-row>
|
|
|
+ <van-col>短信类型:</van-col>
|
|
|
+ <van-col>{{
|
|
|
+ `${dict_filter(item.smsType, "smsTypeList")["dictLabel"]}`
|
|
|
+ }}</van-col>
|
|
|
+ </van-row>
|
|
|
+ <van-row>
|
|
|
+ <van-col>短信内容:</van-col>
|
|
|
+ <van-col
|
|
|
+ style="
|
|
|
+ flex: 1;
|
|
|
+ word-break: break-all;
|
|
|
+ height: auto;
|
|
|
+ text-align: left;
|
|
|
+ "
|
|
|
+ >{{ item.content }}</van-col
|
|
|
+ >
|
|
|
+ </van-row>
|
|
|
+ </div>
|
|
|
+ </van-list>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-pull-refresh>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import Api from "@/utils/api";
|
|
|
+import { isEmpty, getDictDataList } from "@/utils/index";
|
|
|
+import VCountUp from "../CountUp";
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ "v-count-up": VCountUp,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ smsTypeList: [],
|
|
|
+ dataForm: {
|
|
|
+ name: "",
|
|
|
+ page: 1,
|
|
|
+ limit: 10,
|
|
|
+ },
|
|
|
+ total: 0,
|
|
|
+ dataList: [],
|
|
|
+ loading: false,
|
|
|
+ refreshing: false,
|
|
|
+ finished: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.dataForm.name = this.$route.query.name;
|
|
|
+ this.getSmsTypeList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getSmsTypeList() {
|
|
|
+ this.smsTypeList = getDictDataList("MsgType");
|
|
|
+ },
|
|
|
+ dict_filter(val, list) {
|
|
|
+ if (isEmpty(val)) {
|
|
|
+ return {};
|
|
|
+ }
|
|
|
+ return this[list].find((item) => item.dictValue == val);
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ setTimeout(async () => {
|
|
|
+ if (this.refreshing) {
|
|
|
+ this.dataList = [];
|
|
|
+ this.refreshing = false;
|
|
|
+ }
|
|
|
+ await this.getDataList();
|
|
|
+ }, 100);
|
|
|
+ },
|
|
|
+
|
|
|
+ onRefresh() {
|
|
|
+ // 清空列表数据
|
|
|
+ this.finished = false;
|
|
|
+ this.dataList = [];
|
|
|
+ // 重新加载数据
|
|
|
+ // 将 loading 设置为 true,表示处于加载状态
|
|
|
+ this.loading = true;
|
|
|
+ this.total = 0;
|
|
|
+ this.dataForm.page = 1; // 分页数赋值为1
|
|
|
+ this.onLoad();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取列表数据方法
|
|
|
+ getDataList() {
|
|
|
+ Api.lackFeeDetail(this.dataForm).then((res) => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ if (res.data) {
|
|
|
+ if (res.data.list.length == 0) {
|
|
|
+ // 判断获取数据条数若等于0
|
|
|
+ this.dataList = []; // 清空数组
|
|
|
+ this.finished = true; // 停止加载
|
|
|
+ }
|
|
|
+ // 若数据条数不等于0
|
|
|
+ this.dataList.push(...res.data.list); // 将数据放入list中
|
|
|
+ this.loading = false; // 加载状态结束
|
|
|
+ if (res.data.list.length > 9) {
|
|
|
+ this.dataForm.page++; // 分页数加一
|
|
|
+ }
|
|
|
+ this.total = res.data.total;
|
|
|
+ // 如果list长度大于等于总数据条数,数据全部加载完成
|
|
|
+ if (this.dataList.length >= res.data.total) {
|
|
|
+ this.finished = true; // 结束加载状态
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 判断获取数据条数若等于0
|
|
|
+ this.dataList = []; // 清空数组
|
|
|
+ this.finished = true; // 停止加载
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.loading = false; // 加载状态结束
|
|
|
+ this.finished = true; // 停止加载
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ backPath() {
|
|
|
+ this.$router.back();
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.page_info {
|
|
|
+ height: 100%;
|
|
|
+ .position_pannel {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 10px 16px;
|
|
|
+ background: #5c8fff;
|
|
|
+ box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
|
|
|
+ .van-col {
|
|
|
+ height: 24px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
+ text-indent: 4px;
|
|
|
+ text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_total {
|
|
|
+ padding: 0 16px;
|
|
|
+ margin: 8px 0;
|
|
|
+ display: flex;
|
|
|
+ text-align: left;
|
|
|
+ .van-col {
|
|
|
+ height: 16px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
+ .count_up {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #fa5555;
|
|
|
+ margin: 0 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info_list {
|
|
|
+ padding: 0 16px;
|
|
|
+ .list_item {
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 0px 10px 0px rgba(153, 153, 153, 0.15);
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ padding: 12px 16px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ position: relative;
|
|
|
+ &:nth-last-child(1) {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ .reduce_type {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 24px;
|
|
|
+ padding: 0 12px;
|
|
|
+ border-radius: 0px 4px 0px 10px;
|
|
|
+ span {
|
|
|
+ height: 16px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-col {
|
|
|
+ height: 18px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 18px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ &:nth-last-child(1) {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .header {
|
|
|
+ .van-col {
|
|
|
+ height: 22px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #0c1935;
|
|
|
+ line-height: 22px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list_btn {
|
|
|
+ width: 100%;
|
|
|
+ text-align: right;
|
|
|
+ margin-top: 8px;
|
|
|
+ padding-top: 10px;
|
|
|
+ border-top: 1px solid #d8d8d8;
|
|
|
+ .van-button {
|
|
|
+ border-width: 1px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|