提交 1c527bcf 编写于 作者: Yuanzhao.dai's avatar Yuanzhao.dai

邀请明细页面接口联调

上级 ef6e2dc5
...@@ -52,6 +52,10 @@ module.exports = { ...@@ -52,6 +52,10 @@ module.exports = {
src: '~/plugins/vueComponent', src: '~/plugins/vueComponent',
ssr: false ssr: false
}, },
{
src: '~plugins/vue-infinite-scroll',
ssr: false
}
], ],
/* /*
** Nuxt.js modules ** Nuxt.js modules
......
...@@ -6283,8 +6283,7 @@ ...@@ -6283,8 +6283,7 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
...@@ -6305,14 +6304,12 @@ ...@@ -6305,14 +6304,12 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
...@@ -6327,20 +6324,17 @@ ...@@ -6327,20 +6324,17 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
...@@ -6457,8 +6451,7 @@ ...@@ -6457,8 +6451,7 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
...@@ -6470,7 +6463,6 @@ ...@@ -6470,7 +6463,6 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
...@@ -6485,7 +6477,6 @@ ...@@ -6485,7 +6477,6 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
...@@ -6493,14 +6484,12 @@ ...@@ -6493,14 +6484,12 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
...@@ -6519,7 +6508,6 @@ ...@@ -6519,7 +6508,6 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
...@@ -6600,8 +6588,7 @@ ...@@ -6600,8 +6588,7 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
...@@ -6613,7 +6600,6 @@ ...@@ -6613,7 +6600,6 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
...@@ -6699,8 +6685,7 @@ ...@@ -6699,8 +6685,7 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
...@@ -6736,7 +6721,6 @@ ...@@ -6736,7 +6721,6 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
...@@ -6756,7 +6740,6 @@ ...@@ -6756,7 +6740,6 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
...@@ -6800,14 +6783,12 @@ ...@@ -6800,14 +6783,12 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
} }
} }
}, },
...@@ -8500,7 +8481,8 @@ ...@@ -8500,7 +8481,8 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
...@@ -8543,7 +8525,8 @@ ...@@ -8543,7 +8525,8 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
...@@ -8554,7 +8537,8 @@ ...@@ -8554,7 +8537,8 @@
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
...@@ -8684,6 +8668,7 @@ ...@@ -8684,6 +8668,7 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
...@@ -8706,12 +8691,14 @@ ...@@ -8706,12 +8691,14 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
...@@ -8730,6 +8717,7 @@ ...@@ -8730,6 +8717,7 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
...@@ -8810,7 +8798,8 @@ ...@@ -8810,7 +8798,8 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
...@@ -8822,6 +8811,7 @@ ...@@ -8822,6 +8811,7 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
...@@ -8907,7 +8897,8 @@ ...@@ -8907,7 +8897,8 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
...@@ -8943,6 +8934,7 @@ ...@@ -8943,6 +8934,7 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
...@@ -8962,6 +8954,7 @@ ...@@ -8962,6 +8954,7 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
...@@ -9005,12 +8998,14 @@ ...@@ -9005,12 +8998,14 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
} }
} }
}, },
...@@ -13296,6 +13291,11 @@ ...@@ -13296,6 +13291,11 @@
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz", "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz",
"integrity": "sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g==" "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": { "vue-jest": {
"version": "3.0.4", "version": "3.0.4",
"resolved": "https://registry.npmjs.org/vue-jest/-/vue-jest-3.0.4.tgz", "resolved": "https://registry.npmjs.org/vue-jest/-/vue-jest-3.0.4.tgz",
...@@ -13580,7 +13580,6 @@ ...@@ -13580,7 +13580,6 @@
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
...@@ -13727,7 +13726,6 @@ ...@@ -13727,7 +13726,6 @@
"minimatch": { "minimatch": {
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
......
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
"sass-loader": "^8.0.0", "sass-loader": "^8.0.0",
"vant": "^2.0.9", "vant": "^2.0.9",
"vconsole": "^3.3.4", "vconsole": "^3.3.4",
"vue-infinite-scroll": "^2.0.2",
"web-buried-point": "^2.0.0" "web-buried-point": "^2.0.0"
}, },
"devDependencies": { "devDependencies": {
......
.invite-details-wrap { .invite-details-wrap {
.main-container { .main-container {
overflow: hidden; // overflow: hidden;
.invite-explain { .invite-explain {
padding: 0 15px; padding: 0 15px;
margin: 20px 0 30px 0; margin: 20px 0 30px 0;
...@@ -105,7 +105,11 @@ ...@@ -105,7 +105,11 @@
background: #F8F9FA; background: #F8F9FA;
} }
.record-details { .record-details {
width: 100%;
background: #fff;
.tab-nav { .tab-nav {
width: 100%;
background: #fff;
height: 52px; height: 52px;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -136,58 +140,85 @@ ...@@ -136,58 +140,85 @@
.right-item { .right-item {
margin-right: 82.5px; margin-right: 82.5px;
} }
.activeItem {
color: #373839;
font-weight: 700;
}
} }
.record-list { .record-list {
padding: 15px; padding: 15px;
margin-bottom: 50px;
.sum { .sum {
color: #676869; color: #676869;
font-size: 14px; font-size: 14px;
} }
.record-item { .loadMore {
padding: 20px 0; overflow-y: auto;
display: flex; .record-item {
align-items: center; padding: 20px 0;
.person-photo { display: flex;
width: 35px; align-items: center;
height: 35px; .person-photo {
border-radius: 100%; width: 35px;
} height: 35px;
.person-info { border-radius: 100%;
margin-left: 15px;
.phone {
color: #373839;
font-size: 16px;
line-height: 16px;
} }
.time { .person-info {
color: #979899; margin-left: 15px;
font-size: 13px; .phone {
line-height: 13px; color: #373839;
margin-top: 8px; font-size: 16px;
line-height: 16px;
}
.time {
color: #979899;
font-size: 13px;
line-height: 13px;
margin-top: 8px;
}
} }
} .awards {
.awards { margin-left: auto;
margin-left: auto; .item {
.item { font-size: 13px;
font-size: 13px; font-weight: 700;
font-weight: 700; height: 13px;
height: 13px; margin-bottom: 9px;
margin-bottom: 9px; .num {
.num { color: #FD5A2F;
color: #FD5A2F; }
.award-name {
color: #373839;
}
} }
.award-name { .item:last-child {
color: #373839; 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 { .no-data {
margin-bottom: 50px;
img { img {
width: 150px; width: 150px;
height: 150px; height: 150px;
...@@ -214,6 +245,7 @@ ...@@ -214,6 +245,7 @@
box-shadow:0px -1px 0px 0px rgba(237,237,237,1); box-shadow:0px -1px 0px 0px rgba(237,237,237,1);
position: fixed; position: fixed;
bottom: 0; bottom: 0;
background: #fff;
.btn { .btn {
width: 345px; width: 345px;
height: 40px; height: 40px;
......
...@@ -41,39 +41,44 @@ ...@@ -41,39 +41,44 @@
<div class="gray-line"></div> <div class="gray-line"></div>
<div class="record-details"> <div class="record-details">
<div class="tab-nav"> <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>
<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> </div>
<!-- <div class="record-list"> <div class="record-list">
<p class="sum">共10人</p> <p class="sum" v-if="recordTotal">{{recordTotal}}</p>
<div class="record-item"> <div class="loadMore" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy"
<img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="" class="person-photo"> infinite-scroll-distance="10">
<div class="person-info"> <div class="record-item" v-if="inviteList.length" v-for="item in inviteList">
<p class="phone">135****3456</p> <img :src="item.avatarImageUrl" alt="" class="person-photo">
<p class="time">2019.12.16</p> <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>
<div class="awards"> <div class="no-more" v-if="noMore&&inviteList.length">
<p class="item"> <span class="line"></span>
<span class="num">+5</span> <span class="text">到底啦</span>
<span class="award-name">勤奋分</span> <span class="line"></span>
</p>
<p class="item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</p>
</div> </div>
</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=""> <img src="~/assets/img/invite-details/icon-nodata.png" alt="">
<!-- <p>提醒您的医生好友领取课程您将获得奖励哦!</p>--> <p v-if="recordType==1">提醒您的医生好友领取课程您将获得奖励哦!</p>
<p class="text-get">提醒您的医生好友领取课程后登录云鹊医APP您将再获得奖励哦!</p> <p v-if="recordType==2" class="text-get">提醒您的医生好友领取课程后登录云鹊医APP您将再获得奖励哦!</p>
</div> </div>
<div class="footer-btn"> <div class="footer-btn">
<div class="btn">去邀请</div> <div class="btn">去邀请</div>
...@@ -84,7 +89,9 @@ ...@@ -84,7 +89,9 @@
</template> </template>
<script> <script>
import NormalHeader from '@/components/normal-header' import NormalHeader from '@/components/normal-header'
import { getOneInviteDetails,getTwoInviteDetails } from '@/service/detailsAndRanking'
export default { export default {
name: "index", name: "index",
components: { components: {
...@@ -96,12 +103,136 @@ ...@@ -96,12 +103,136 @@
title: '邀请明细', title: '邀请明细',
barHeight: 0, barHeight: 0,
barColor: '#fff', barColor: '#fff',
inviteList: [],
recordTotal: 0,
recordType: 1,
busy: true, //分页参数--start
pageNo: 0,
pageSize: 10,
noMore: false,//分页参数--end
}; };
}, },
mounted() { 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> </script>
......
import Vue from 'vue'
const infiniteScroll = require('vue-infinite-scroll');
Vue.use(infiniteScroll)
// 明细页排名也接口
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 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册