Skip to content

Y
year-end-activitiy
提交 1c527bcf 编写于 作者: Yuanzhao.dai's avatar Yuanzhao.dai
浏览文件
操作

邀请明细页面接口联调

上级 ef6e2dc5
隐藏空白字符变更
内嵌 并排
正在显示 包含 296 行增加 和 100 行删除
nuxt.config.js
浏览文件 @ 1c527bcf
......@@ -52,6 +52,10 @@ module.exports = {
src: '~/plugins/vueComponent',
ssr: false
},
{
src: '~plugins/vue-infinite-scroll',
ssr: false
}
],
/*
** Nuxt.js modules
......
package-lock.json
浏览文件 @ 1c527bcf
......@@ -6283,8 +6283,7 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"aproba": {
"version": "1.2.0",
......@@ -6305,14 +6304,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
......@@ -6327,20 +6324,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
......@@ -6457,8 +6451,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
......@@ -6470,7 +6463,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
......@@ -6485,7 +6477,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
......@@ -6493,14 +6484,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
......@@ -6519,7 +6508,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
......@@ -6600,8 +6588,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
......@@ -6613,7 +6600,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
......@@ -6699,8 +6685,7 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"safer-buffer": {
"version": "2.1.2",
......@@ -6736,7 +6721,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
......@@ -6756,7 +6740,6 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
......@@ -6800,14 +6783,12 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
}
}
},
......@@ -8500,7 +8481,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
......@@ -8543,7 +8525,8 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
......@@ -8554,7 +8537,8 @@
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
......@@ -8684,6 +8668,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
......@@ -8706,12 +8691,14 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
......@@ -8730,6 +8717,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
......@@ -8810,7 +8798,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
......@@ -8822,6 +8811,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
......@@ -8907,7 +8897,8 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
......@@ -8943,6 +8934,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
......@@ -8962,6 +8954,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
......@@ -9005,12 +8998,14 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
}
}
},
......@@ -13296,6 +13291,11 @@
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz",
"integrity": "sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g=="
},
"vue-infinite-scroll": {
"version": "2.0.2",
"resolved": "http://192.168.110.93:4873/vue-infinite-scroll/-/vue-infinite-scroll-2.0.2.tgz",
"integrity": "sha1-yjepH+ku4K07dKz4aCwAkXFEtxE="
},
"vue-jest": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/vue-jest/-/vue-jest-3.0.4.tgz",
......@@ -13580,7 +13580,6 @@
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
......@@ -13727,7 +13726,6 @@
"minimatch": {
"version": "3.0.4",
"bundled": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
......
package.json
浏览文件 @ 1c527bcf
......@@ -24,6 +24,7 @@
"sass-loader": "^8.0.0",
"vant": "^2.0.9",
"vconsole": "^3.3.4",
"vue-infinite-scroll": "^2.0.2",
"web-buried-point": "^2.0.0"
},
"devDependencies": {
......
pages/invite-details/index.less
浏览文件 @ 1c527bcf
.invite-details-wrap {
.main-container {
overflow: hidden;
// overflow: hidden;
.invite-explain {
padding: 0 15px;
margin: 20px 0 30px 0;
......@@ -105,7 +105,11 @@
background: #F8F9FA;
}
.record-details {
width: 100%;
background: #fff;
.tab-nav {
width: 100%;
background: #fff;
height: 52px;
display: flex;
align-items: center;
......@@ -136,58 +140,85 @@
.right-item {
margin-right: 82.5px;
}
.activeItem {
color: #373839;
font-weight: 700;
}
}
.record-list {
padding: 15px;
margin-bottom: 50px;
.sum {
color: #676869;
font-size: 14px;
}
.record-item {
padding: 20px 0;
display: flex;
align-items: center;
.person-photo {
width: 35px;
height: 35px;
border-radius: 100%;
}
.person-info {
margin-left: 15px;
.phone {
color: #373839;
font-size: 16px;
line-height: 16px;
.loadMore {
overflow-y: auto;
.record-item {
padding: 20px 0;
display: flex;
align-items: center;
.person-photo {
width: 35px;
height: 35px;
border-radius: 100%;
}
.time {
color: #979899;
font-size: 13px;
line-height: 13px;
margin-top: 8px;
.person-info {
margin-left: 15px;
.phone {
color: #373839;
font-size: 16px;
line-height: 16px;
}
.time {
color: #979899;
font-size: 13px;
line-height: 13px;
margin-top: 8px;
}
}
}
.awards {
margin-left: auto;
.item {
font-size: 13px;
font-weight: 700;
height: 13px;
margin-bottom: 9px;
.num {
color: #FD5A2F;
.awards {
margin-left: auto;
.item {
font-size: 13px;
font-weight: 700;
height: 13px;
margin-bottom: 9px;
.num {
color: #FD5A2F;
}
.award-name {
color: #373839;
}
}
.award-name {
color: #373839;
.item:last-child {
margin-bottom: 0;
}
}
.item:last-child {
margin-bottom: 0;
}
.no-more {
height: 62px;
display: flex;
justify-content: center;
align-items: center;
.line {
display: inline-block;
width: 84px;
height: 1px;
background:#F7F7F7;
}
.text {
color: #BEC2CC;
font-size: 13px;
margin: 0 8px;
}
}
}
}
}
.no-data {
margin-bottom: 50px;
img {
width: 150px;
height: 150px;
......@@ -214,6 +245,7 @@
box-shadow:0px -1px 0px 0px rgba(237,237,237,1);
position: fixed;
bottom: 0;
background: #fff;
.btn {
width: 345px;
height: 40px;
......
pages/invite-details/index.vue
浏览文件 @ 1c527bcf
......@@ -41,39 +41,44 @@
<div class="gray-line"></div>
<div class="record-details">
<div class="tab-nav">
<div class="item left-item">
<div class="item left-item" :class="{activeItem:recordType==1}" @click="changeRecordType">
领取记录
<p class="active-line"></p>
<p class="active-line" v-if="recordType==1"></p>
</div>
<div class="item right-item">
<div class="item right-item" :class="{activeItem:recordType==2}" @click="changeRecordType">
登录记录
<p class="active-line"></p>
<p class="active-line" v-if="recordType==2"></p>
</div>
</div>
<!-- <div class="record-list">
<p class="sum">共10人</p>
<div class="record-item">
<img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="" class="person-photo">
<div class="person-info">
<p class="phone">135****3456</p>
<p class="time">2019.12.16</p>
<div class="record-list">
<p class="sum" v-if="recordTotal">共{{recordTotal}}人</p>
<div class="loadMore" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy"
infinite-scroll-distance="10">
<div class="record-item" v-if="inviteList.length" v-for="item in inviteList">
<img :src="item.avatarImageUrl" alt="" class="person-photo">
<div class="person-info">
<p class="phone">{{item.mobile}}</p>
<p class="time">{{item.inviteDate}}</p>
</div>
<div class="awards">
<p class="item" v-for="item1 in dealJsonData(item.rewardJsonInfo)">
<span class="num">+{{item1.rewardQuantity}}</span>
<span class="award-name">{{changeAwardsName(item1.rewardType)}}</span>
</p>
</div>
</div>
<div class="awards">
<p class="item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</p>
<p class="item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</p>
<div class="no-more" v-if="noMore&&inviteList.length">
<span class="line"></span>
<span class="text">到底啦</span>
<span class="line"></span>
</div>
</div>
</div>-->
<div class="no-data">
</div>
<div class="no-data" v-if="!inviteList.length">
<img src="~/assets/img/invite-details/icon-nodata.png" alt="">
<!-- <p>提醒您的医生好友领取课程您将获得奖励哦！</p>-->
<p class="text-get">提醒您的医生好友领取课程后登录云鹊医APP您将再获得奖励哦！</p>
<p v-if="recordType==1">提醒您的医生好友领取课程您将获得奖励哦！</p>
<p v-if="recordType==2" class="text-get">提醒您的医生好友领取课程后登录云鹊医APP您将再获得奖励哦！</p>
</div>
<div class="footer-btn">
<div class="btn">去邀请</div>
......@@ -84,7 +89,9 @@
</template>
<script>
import NormalHeader from '@/components/normal-header'
import { getOneInviteDetails,getTwoInviteDetails } from '@/service/detailsAndRanking'
export default {
name: "index",
components: {
......@@ -96,12 +103,136 @@
title: '邀请明细',
barHeight: 0,
barColor: '#fff',
inviteList: [],
recordTotal: 0,
recordType: 1,
busy: true, //分页参数--start
pageNo: 0,
pageSize: 10,
noMore: false,//分页参数--end
};
},
mounted() {
this.pageNo++
this.getOneInviteDetails();
window.addEventListener('scroll', function (e) {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
//获取recordDetails到顶部距离
const recordDetails = document.getElementsByClassName('record-details')[0];
let recordDetailsHeight = recordDetails.getBoundingClientRect().top;
//获取headDiv部分高度
const headDiv = document.getElementsByClassName('header-container')[0];
let headDivHeight = headDiv.offsetHeight;
//获取窗口高度
const lastHeight = window.innerHeight;
console.log('recordDetailsHeight',recordDetailsHeight);
console.log('headDivHeight',headDivHeight);
const tabNab=document.getElementsByClassName('tab-nav')[0];
if(recordDetailsHeight<=headDivHeight) {
tabNab.setAttribute('style',`position:fixed;top: ${44}px;`);
} else {
console.log('sdd')
tabNab.removeAttribute('style');
}
});
},
methods: {
getOneInviteDetails() { //领取记录数据
getOneInviteDetails({
pageNo: this.pageNo,
pageSize: this.pageSize
}).then(res => {
if(res.code == '000000') {
this.recordTotal = res.data.total;
if(res.data.list.length>0) {
if(this.pageNo ==1) {
this.inviteList = res.data.list
} else {
this.inviteList = this.inviteList.concat(res.data.list);
}
this.busy = false;
this.noMore = false;
}else {
if(this.pageNo ==1) {
this.noMore = false;
} else {
this.noMore = true;
}
}
}
})
},
getTwoInviteDetails() { //登记记录数据
getTwoInviteDetails({
pageNo: this.pageNo,
pageSize: this.pageSize
}).then(res => {
if(res.code == '000000') {
this.recordTotal = res.data.total;
if(res.code == '000000') {
this.recordTotal = res.data.total
if(res.data.list.length>0) {
if(this.pageNo ==1) {
alert
this.inviteList = res.data.list
} else {
this.inviteList = this.inviteList.concat(res.data.list);
}
this.busy = false;
this.noMore = false;
}else {
if(this.pageNo ==1) {
this.noMore = false;
} else {
this.noMore = true;
}
}
}
}
})
},
dealJsonData(data) {
if(data) {
return JSON.parse(data)
}
},
changeAwardsName(type) {
if(type == 1) {
return '云鹊豆'
} else if(type == 2) {
return '现金'
} else if(type == 3) {
return '勤奋分'
} else if(type == 4) {
return '短信额度'
}
},
changeRecordType() {
this.recordType = this.recordType==1?2:1;
this.pageNo = 1;
this.inviteList = [];
this.getData()
},
getData() {
if(this.recordType == 1) {
this.getOneInviteDetails();
} else if(this.recordType == 2) {
this.getTwoInviteDetails();
}
},
loadMore() {
this.busy = true;
this.pageNo++
//this.changeRecordType();
this.getData()
},
},
methods: {},
}
</script>
......
plugins/vue-infinite-scroll.js 0 → 100644
浏览文件 @ 1c527bcf
import Vue from 'vue'
const infiniteScroll = require('vue-infinite-scroll');
Vue.use(infiniteScroll)
service/detailsAndRanking.js 0 → 100644
浏览文件 @ 1c527bcf
// 明细页排名也接口
import request from './api';
// 获取领取记录列表列表
export const getOneInviteDetails = (params) => {
return request({
url: `campaign/inviteDetail/oneList`,
params: params,
withCredentials: true
})
}// 获取领取记录列表列表
export const getTwoInviteDetails = (params) => {
return request({
url: `campaign/inviteDetail/twoList`,
params: params,
withCredentials: true
})
}
// 获取额度明细列表
export const geAmountData = (params) => {
return request({
url: `/healths/patientEducation/smsAmount/log`,
params: params,
withCredentials: true
})
}
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或