|
|
@@ -0,0 +1,302 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <!-- <view class="filter-box">
|
|
|
+ <u-search placeholder="请输入关键字" v-model="filterText" @search="setFilterText" @custom="setFilterText"></u-search>
|
|
|
+ </view> -->
|
|
|
+ <template v-if="tabList[0].tableList.length">
|
|
|
+ <scroll-view scroll-y class="scroll-box" @scrolltolower="handleLoadMore" :refresher-enabled="true"
|
|
|
+ :refresher-triggered="triggered" :refresher-threshold="100" refresher-background="white" @refresherrefresh="onRefresh"
|
|
|
+ @refresherrestore="onRestore">
|
|
|
+ <u-card :show-head="false" :foot-border-top="false" margin="10px 15px" borderRadius="40" :foot-style="{padding: '0 10px 5px 0'}" v-for="(site, index2) in tabList[0].tableList"
|
|
|
+ :key="index2" class="card-box">
|
|
|
+ <view slot="body" class="card-content">
|
|
|
+ <view class="student-info">
|
|
|
+ <view style="width: 100%;margin-bottom: 5px;">
|
|
|
+ <text class="info-name" style="margin-right: 10px;">{{site.studentName}}</text>
|
|
|
+ <text class="info-name">{{site.fatherName}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-phone">{{site.parentPhone}}</view>
|
|
|
+ <view class="info-phone" v-if="getType == 3">生日: {{site.parentPhone}}</view>
|
|
|
+ <view class="info-phone" v-if="getType == 4">预约时间: {{site.parentPhone}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view slot="foot" style="text-align: right;" v-if="getType == 1">
|
|
|
+ <u-button type="warning" :ripple="true" shape="circle" :custom-style="handleCustomStyle" size="mini" @click="handleRecordClick(site.id)">追踪信息</u-button>
|
|
|
+ </view>
|
|
|
+ </u-card>
|
|
|
+ <u-divider v-if="item.isOver" bg-color="transparent" :style="{paddingTop : tabList[0].tableList.length == 0 ? '10px' : ''}">没有更多了</u-divider>
|
|
|
+ </scroll-view>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <u-empty mode="data"></u-empty>
|
|
|
+ </template>
|
|
|
+ <!-- 追踪记录 -->
|
|
|
+ <u-popup v-model="recordShow" mode="center" border-radius="30" width="600rpx" height="500px" >
|
|
|
+ <view class="common-title">追踪记录</view>
|
|
|
+ <view class="menber-box" style="overflow-y: auto;height:390px;">
|
|
|
+ <template v-if="recordList.legnth">
|
|
|
+ <view style="padding:5px; border-bottom:1px solid #aaa;" v-for="(item,index) in recordList">
|
|
|
+ <view>{{ item.content }}</view>
|
|
|
+ <view>{{ item.createTime }}</view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <u-empty mode="data"></u-empty>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ <view class="button-box">
|
|
|
+ <u-button type="warning" shape="circle" :ripple="true" :custom-style="customStyle" @click="recordShow = false">确定</u-button>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ <u-top-tips ref="uTips"></u-top-tips>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ mapGetters
|
|
|
+ } from 'vuex'
|
|
|
+ const NET = require('@/utils/request')
|
|
|
+ const API = require('@/config/api')
|
|
|
+ export default {
|
|
|
+ computed: {
|
|
|
+ ...mapGetters([
|
|
|
+ 'customStyle',
|
|
|
+ 'handleCustomStyle',
|
|
|
+ ])
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ getType: 0,
|
|
|
+ customerId: '',
|
|
|
+ // filterText: '',
|
|
|
+ triggered: false,
|
|
|
+ tabList: [
|
|
|
+ {
|
|
|
+ name: '未联系',
|
|
|
+ isOver: false,
|
|
|
+ pageIndex: 1,
|
|
|
+ filterText: '',
|
|
|
+ type: 1,
|
|
|
+ tableList: [],
|
|
|
+ }],
|
|
|
+ // 追踪记录
|
|
|
+ recordShow: false,
|
|
|
+ recordList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ this.getType = options.type
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: options.navTitle
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.tabList = Object.assign([], this.$options.data().tabList)
|
|
|
+ this.getTableList()
|
|
|
+ },
|
|
|
+ onReady() {},
|
|
|
+ methods: {
|
|
|
+ // 获取列表数据
|
|
|
+ getTableList() {
|
|
|
+ let rUrl = ''
|
|
|
+ switch (parseInt(this.getType)) {
|
|
|
+ case 1:
|
|
|
+ rUrl = API.estrangedList
|
|
|
+ break
|
|
|
+ case 3:
|
|
|
+ rUrl = API.birthdayRemind
|
|
|
+ break
|
|
|
+ case 4:
|
|
|
+ rUrl = API.oneWeekAppointment
|
|
|
+ break
|
|
|
+ }
|
|
|
+ NET.request(rUrl, {
|
|
|
+ page: 1,
|
|
|
+ size: 100,
|
|
|
+ }, 'POST').then(res => {
|
|
|
+ this.triggered = false
|
|
|
+ this.tabList[0].tableList = res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 查看追踪记录
|
|
|
+ handleRecordClick(id) {
|
|
|
+ NET.request(API.findResourceRecordList, {
|
|
|
+ id,
|
|
|
+ page:1,
|
|
|
+ size: 100}, 'POST').then(res=> {
|
|
|
+ if(res.status == 10000) {
|
|
|
+ this.recordShow = true
|
|
|
+ this.recordList = res.data
|
|
|
+ } else {
|
|
|
+ this.$refs.uTips.show({
|
|
|
+ title: res.message,
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 设置过滤字段
|
|
|
+ setFilterText(value) {
|
|
|
+ this.tabList[0].filterText = value
|
|
|
+ this.onRefresh()
|
|
|
+ },
|
|
|
+ // 下拉刷新
|
|
|
+ onRefresh() {
|
|
|
+ if (!this.triggered) {
|
|
|
+ this.triggered = true
|
|
|
+ this.tabList[0].isOver = false
|
|
|
+ this.tabList[0].pageIndex = 1
|
|
|
+ this.tabList[0].tableList = []
|
|
|
+ this.getTableList()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 重置下拉刷新状态
|
|
|
+ onRestore() {
|
|
|
+ this.triggered = false
|
|
|
+ },
|
|
|
+ // 懒加载
|
|
|
+ handleLoadMore() {
|
|
|
+ if (!this.tabList[0].isOver) {
|
|
|
+ this.tabList[0].pageIndex++
|
|
|
+ this.getTableList()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+ page {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ @import "@/static/css/themes.scss";
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ float: left;
|
|
|
+
|
|
|
+ .filter-box {
|
|
|
+ height: 48px;
|
|
|
+ padding: 10px 15px;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-box {
|
|
|
+ height: calc(100vh - 82px);
|
|
|
+
|
|
|
+ .swiper-item {
|
|
|
+ height: calc(100vh - 82px);
|
|
|
+
|
|
|
+ .scroll-box {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh - 82px);
|
|
|
+
|
|
|
+ .card-box {
|
|
|
+ .card-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .student-info {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .info-name {
|
|
|
+ // width: 64px;
|
|
|
+ // float: left;
|
|
|
+ line-height: 28px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-type {
|
|
|
+ padding: 0 10px;
|
|
|
+ margin-top: 3px;
|
|
|
+ border-radius: 20px;
|
|
|
+ float: left;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 10px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ background-color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-type-active {
|
|
|
+ background-color: $mainColor;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-phone {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .menber-box {
|
|
|
+ width: 100%;
|
|
|
+ // float: left;
|
|
|
+ padding: 10px 15px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ .menber-col {
|
|
|
+ width: 100%;
|
|
|
+ padding: 15px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: inline-block;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 15px;
|
|
|
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .menber-label {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ float: left;
|
|
|
+ font-size: 14px;
|
|
|
+ // line-height: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menber-num {
|
|
|
+ width: 100%;
|
|
|
+ float: left;
|
|
|
+ font-size: 26px;
|
|
|
+ line-height: 28px;
|
|
|
+ color: $mainColor;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menber-icon {
|
|
|
+ font-size: 100px;
|
|
|
+ color: $mainColor;
|
|
|
+ position: absolute;
|
|
|
+ right: -5px;
|
|
|
+ bottom: -30px;
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .common-title {
|
|
|
+ width:100%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20px;
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+ .fix-add-icon {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 15px;
|
|
|
+ right: 15px;
|
|
|
+ }
|
|
|
+ .button-box {
|
|
|
+ // width: 100%;
|
|
|
+ padding: 10px 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
