|
|
@@ -0,0 +1,182 @@
|
|
|
+<template>
|
|
|
+ <div class="myKaifainDataMobile">
|
|
|
+ <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="listArea">
|
|
|
+ <div style="text-align: center" v-if="firstLoading">
|
|
|
+ <van-loading size="24px">加载中...</van-loading>
|
|
|
+ </div>
|
|
|
+ <van-list
|
|
|
+ v-else
|
|
|
+ v-model="loading"
|
|
|
+ :finished="finished"
|
|
|
+ finished-text="没有更多了"
|
|
|
+ @load="onLoad"
|
|
|
+ :immediate-check="false"
|
|
|
+ class="list"
|
|
|
+ :error="error"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="cell"
|
|
|
+ v-for="(item, index) in dataList" :key="'dataList' + index"
|
|
|
+ >
|
|
|
+ <div class="cellContent" v-if="Type.VIEWED === type || Type.COLLECTED === type">
|
|
|
+ <div class="leftImg">
|
|
|
+ <img src="https://inn.proginn.com/useralbum/449101/avatar4491011590931131.jpg" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="rightBody">
|
|
|
+ <div class="userName">龚喜涓</div>
|
|
|
+ <div class="userTips">2020-4-30 11:11 浏览过您的XXX解决方案</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cellContentAsk" v-else-if="Type.ASKED === type">
|
|
|
+ <div class="topArea">
|
|
|
+ <div class="leftName">方案名称: 消息中台</div>
|
|
|
+ <div class="status">平台已联系</div>
|
|
|
+ </div>
|
|
|
+ <div class="userInfo">
|
|
|
+ <div class="name">客户: 张先生</div>
|
|
|
+ <div class="line">|</div>
|
|
|
+ <div class="phone" v-if="index !== 2">电话: 13909862071</div>
|
|
|
+ <div class="getPhone" v-else>获取电话</div>
|
|
|
+ </div>
|
|
|
+ <div class="time">时间: 2020-4-20 11:11</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-list>
|
|
|
+ </van-pull-refresh>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ const Type = {
|
|
|
+ VIEWED: 'viewed', //浏览用户
|
|
|
+ COLLECTED: 'collected', //收藏用户
|
|
|
+ ASKED: 'asked', //咨询客户页
|
|
|
+ }
|
|
|
+ const Title = {
|
|
|
+ [Type.VIEWED]: "浏览用户列表",
|
|
|
+ [Type.COLLECTED]: "收藏用户列表",
|
|
|
+ [Type.ASKED]: "咨询用户列表",
|
|
|
+ "Detault": "程序员客栈",
|
|
|
+ }
|
|
|
+ /** 我咨询的解决方案 **/
|
|
|
+ export default {
|
|
|
+ name: "MyKaifainData",
|
|
|
+ showCommonFooter: false,
|
|
|
+ components: {},
|
|
|
+ head() {
|
|
|
+ let title = Title[this.type]
|
|
|
+ let obj = {
|
|
|
+ title: title,
|
|
|
+ meta: [
|
|
|
+ {
|
|
|
+ 'name': 'keywords',
|
|
|
+ 'content': ""
|
|
|
+ }, {
|
|
|
+ 'name': 'descrption',
|
|
|
+ 'content': ""
|
|
|
+ }, {
|
|
|
+ 'name': 'h1',
|
|
|
+ 'content': ""
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ return obj
|
|
|
+ },
|
|
|
+ async asyncData({ app, context }) {
|
|
|
+ return {
|
|
|
+ type: context.route.params.type,
|
|
|
+ mobile: app.$deviceType.isMobile()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ Type,
|
|
|
+
|
|
|
+ page: {
|
|
|
+ page: 1,
|
|
|
+ total: 0,
|
|
|
+ size: 20,
|
|
|
+ },
|
|
|
+ dataList: [{}, {}, {}],
|
|
|
+ error: false,
|
|
|
+ finished: false, //移动端列表是否完全加载完成
|
|
|
+ loading: false, //web端列表首次加载loading todo true
|
|
|
+ refreshing: false,
|
|
|
+ firstLoading: false, //移动端加载loading
|
|
|
+ isLoading: false //控制防止一次没响应，重复请求接口
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ computed: {},
|
|
|
+ async created() {
|
|
|
+ this.checkLogin()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getList() {
|
|
|
+ const { page, selectedTypeIndex } = this
|
|
|
+ let url = "/api/collection_center/list"
|
|
|
+ if (this.isLoading) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let data = {
|
|
|
+ ...page,
|
|
|
+ type: selectedTypeIndex
|
|
|
+ }
|
|
|
+ this.loading = true
|
|
|
+ this.isLoading = true
|
|
|
+ this.$axios.post(url, data).then(res => {
|
|
|
+ if (Number(res.data.status) === 1) {
|
|
|
+ let data = res.data.data
|
|
|
+ let list = data.list || []
|
|
|
+ this.page.total = data.total
|
|
|
+ if (this.page.page === 1 || !this.mobile) {
|
|
|
+ this.dataList = [ ...list ]
|
|
|
+ } else {
|
|
|
+ this.dataList = [ ...this.dataList, ...list ]
|
|
|
+ }
|
|
|
+ if (this.mobile) {
|
|
|
+ this.page.page += 1
|
|
|
+ }
|
|
|
+ if (this.page.total <= this.dataList.length) {
|
|
|
+ this.finished = true
|
|
|
+ }
|
|
|
+ this.error = false
|
|
|
+ }
|
|
|
+ }).finally(() => {
|
|
|
+ this.firstLoading = false
|
|
|
+ this.refreshing = false
|
|
|
+ this.isLoading = false
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ this.error = "请求失败"
|
|
|
+ })
|
|
|
+ },
|
|
|
+ pageChange(i) {
|
|
|
+ this.page.page = i
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ /** 移动端下拉刷新 **/
|
|
|
+ onRefresh() {
|
|
|
+ console.log("refresh")
|
|
|
+ // 清空列表数据
|
|
|
+ this.finished = false;
|
|
|
+ this.page.page = 1
|
|
|
+ this.page.total = 0
|
|
|
+ this.onLoad();
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ console.log('onLoad')
|
|
|
+ // this.getList()
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scope lang="scss">
|
|
|
+ .delete-button {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ @import "@/assets/css/otherpage/kaifain/myKaifainData";
|
|
|
+</style>
|
xinfeng