You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
341 lines
8.3 KiB
341 lines
8.3 KiB
<template>
|
|
<view class="dynamic-technician-list" v-if="isLoad">
|
|
<fixed>
|
|
<view class="fill-body">
|
|
<view class="count-list flex-center fill-base">
|
|
<view @tap.stop="$util.goUrl({url:`/dynamic/pages/technician/thumbs`})"
|
|
class="count-item flex-center flex-column f-caption c-title">
|
|
<view class="tag thumbs flex-center rel">
|
|
<i class="iconfont icon-shoucang-fill"></i>
|
|
<view class="count-tag flex-center f-icontext c-base abs"
|
|
:style="{width: count.thumbs_num < 10 ? '26rpx':'50rpx',right:count.thumbs_num < 10 ? '-13rpx':'-38rpx'}"
|
|
v-if="count.thumbs_num">
|
|
{{count.thumbs_num < 100 ? count.thumbs_num : '99+'}}
|
|
</view>
|
|
</view>
|
|
<view class="mt-md">收获的赞</view>
|
|
</view>
|
|
<view @tap.stop="$util.goUrl({url:`/dynamic/pages/technician/follow`})"
|
|
class="count-item flex-center flex-column f-caption c-title">
|
|
<view class="tag follow flex-center rel">
|
|
<i class="iconfont iconxinzengguanzhu"></i>
|
|
<view class="count-tag flex-center f-icontext c-base abs"
|
|
:style="{width: count.follow_num < 10 ? '26rpx':'50rpx',right:count.follow_num < 10 ? '-13rpx':'-38rpx'}"
|
|
v-if="count.follow_num">
|
|
{{count.follow_num < 100 ? count.follow_num : '99+'}}
|
|
</view>
|
|
</view>
|
|
<view class="mt-md">新增关注</view>
|
|
</view>
|
|
<view @tap.stop="$util.goUrl({url:`/dynamic/pages/technician/comment`})"
|
|
class="count-item flex-center flex-column f-caption c-title">
|
|
<view class="tag comment flex-center rel">
|
|
<i class="iconfont iconshouhuodepinglun"></i>
|
|
<view class="count-tag flex-center f-icontext c-base abs"
|
|
:style="{width: count.comment_num < 10 ? '26rpx':'50rpx',right:count.comment_num < 10 ? '-13rpx':'-38rpx'}"
|
|
v-if="count.comment_num">
|
|
{{count.comment_num < 100 ? count.comment_num : '99+'}}
|
|
</view>
|
|
</view>
|
|
<view class="mt-md">收获的评论</view>
|
|
</view>
|
|
</view>
|
|
<view class="rel">
|
|
<view class="flex-between pd-lg">
|
|
<view class="f-title text-bold">我的发布</view>
|
|
<view @tap.stop="toChangeItem(-1)" class="flex-y-center f-desc">
|
|
{{statusList[statusInd].title}}<i class="iconfont c-desc ml-sm"
|
|
:class="[{'iconshaixuanxia-1':showSort},{'iconshaixuanshang-1':!showSort}]"
|
|
style="font-size: 20rpx"></i>
|
|
</view>
|
|
</view>
|
|
<view class="dynamic-sort pt-md pb-md f-desc abs" v-if="showSort">
|
|
<view @tap.stop="toChangeItem(index)" class="sort-item flex-center"
|
|
:style="{color:statusInd == index ? primaryColor : ''}" v-for="(item,index) in statusList"
|
|
:key="index">
|
|
{{item.title}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</fixed>
|
|
|
|
<wfalls-flow :list="list.data" :path="2" ref="wfalls" v-if="list.data.length > 0"></wfalls-flow>
|
|
<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
|
|
</load-more>
|
|
<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
|
|
<view class="space-footer"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState,
|
|
mapActions,
|
|
mapMutations
|
|
} from "vuex"
|
|
import wfallsFlow from "@/components/wfalls-flow.vue"
|
|
export default {
|
|
components: {
|
|
wfallsFlow
|
|
},
|
|
data() {
|
|
return {
|
|
isLoad: false,
|
|
statusList: [{
|
|
id: 0,
|
|
title: '全部'
|
|
}, {
|
|
id: 1,
|
|
title: '审核中'
|
|
}, {
|
|
id: 2,
|
|
title: '审核通过'
|
|
}, {
|
|
id: 3,
|
|
title: '已驳回'
|
|
}],
|
|
statusInd: 0,
|
|
showSort: false,
|
|
loading: true,
|
|
param: {
|
|
page: 1,
|
|
limit: 10,
|
|
status: 0
|
|
},
|
|
list: {
|
|
data: []
|
|
},
|
|
count: {}
|
|
}
|
|
},
|
|
computed: mapState({
|
|
primaryColor: state => state.config.configInfo.primaryColor,
|
|
subColor: state => state.config.configInfo.subColor,
|
|
configInfo: state => state.config.configInfo,
|
|
userInfo: state => state.user.userInfo,
|
|
location: state => state.user.location,
|
|
haveShieldOper: state => state.user.haveShieldOper,
|
|
}),
|
|
onLoad() {
|
|
this.$util.setNavigationBarColor({
|
|
bg: this.primaryColor
|
|
})
|
|
this.$util.showLoading()
|
|
this.initIndex()
|
|
},
|
|
async onShow() {
|
|
if (this.haveShieldOper == 1) {
|
|
await this.initRefresh()
|
|
this.updateUserItem({
|
|
key: 'haveShieldOper',
|
|
val: 0
|
|
})
|
|
} else {
|
|
this.getDynamicData()
|
|
}
|
|
},
|
|
async onPullDownRefresh() {
|
|
// #ifndef APP-PLUS
|
|
uni.showNavigationBarLoading()
|
|
// #endif
|
|
await this.initRefresh();
|
|
uni.stopPullDownRefresh()
|
|
},
|
|
async onReachBottom() {
|
|
if (this.list.current_page >= this.list.last_page || this.loading) return;
|
|
this.param.page = this.param.page + 1;
|
|
this.loading = true;
|
|
await this.getList();
|
|
setTimeout(() => {
|
|
this.$refs.wfalls.handleViewRender();
|
|
}, 0)
|
|
},
|
|
methods: {
|
|
...mapMutations(['updateUserItem']),
|
|
async initIndex(refresh = false) {
|
|
// #ifdef H5
|
|
if (!refresh && this.$jweixin.isWechat()) {
|
|
await this.$jweixin.initJssdk();
|
|
this.$jweixin.wxReady(() => {
|
|
this.$jweixin.hideOptionMenu()
|
|
})
|
|
}
|
|
// #endif
|
|
if (refresh) {
|
|
await Promise.all([this.getDynamicData(), this.getList(1)])
|
|
} else {
|
|
await this.getList(1)
|
|
}
|
|
},
|
|
async initRefresh() {
|
|
await this.initIndex(true)
|
|
},
|
|
async getDynamicData() {
|
|
this.count = await this.$api.dynamic.dynamicData()
|
|
},
|
|
async getList(flag) {
|
|
if (flag) {
|
|
this.showSort = false
|
|
this.param.page = 1
|
|
this.list.data = []
|
|
}
|
|
let {
|
|
location
|
|
} = this
|
|
if (!location.lat) {
|
|
// #ifdef H5
|
|
if (this.$jweixin.isWechat()) {
|
|
this.$util.showLoading()
|
|
// await this.$jweixin.initJssdk();
|
|
await this.$jweixin.wxReady2();
|
|
let {
|
|
latitude: lat = 0,
|
|
longitude: lng = 0
|
|
} = await this.$jweixin.getWxLocation()
|
|
location = {
|
|
lng,
|
|
lat,
|
|
address: '定位失败',
|
|
province: '',
|
|
city: '',
|
|
district: ''
|
|
}
|
|
if (lat && lng) {
|
|
let key = `${lat},${lng}`
|
|
let data = await this.$api.base.getMapInfo({
|
|
location: key
|
|
})
|
|
let {
|
|
status,
|
|
result
|
|
} = JSON.parse(data)
|
|
if (status == 0) {
|
|
let {
|
|
address,
|
|
address_component
|
|
} = result
|
|
let {
|
|
province,
|
|
city,
|
|
district
|
|
} = address_component
|
|
location = {
|
|
lng,
|
|
lat,
|
|
address,
|
|
province,
|
|
city,
|
|
district
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// #endif
|
|
// #ifndef H5
|
|
location = await this.$util.getBmapLocation()
|
|
// #endif
|
|
this.updateUserItem({
|
|
key: 'location',
|
|
val: location
|
|
})
|
|
}
|
|
let {
|
|
lat = 0, lng = 0
|
|
} = location
|
|
|
|
let {
|
|
list: oldList,
|
|
param,
|
|
statusList,
|
|
statusInd
|
|
} = this
|
|
param.lat = lat
|
|
param.lng = lng
|
|
param.status = statusList[statusInd].id
|
|
let newList = await this.$api.dynamic.coachDynamicList(param)
|
|
if (this.param.page == 1) {
|
|
this.list = newList
|
|
} else {
|
|
newList.data = oldList.data.concat(newList.data)
|
|
this.list = newList
|
|
}
|
|
this.isLoad = true
|
|
this.loading = false
|
|
this.$util.hideAll()
|
|
},
|
|
toChangeItem(index) {
|
|
if (index == -1) {
|
|
this.showSort = !this.showSort
|
|
} else {
|
|
this.statusInd = index
|
|
this.showSort = false
|
|
this.initRefresh()
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.dynamic-technician-list {
|
|
.count-list {
|
|
width: 750rpx;
|
|
height: 204rpx;
|
|
|
|
.count-item {
|
|
width: 33.33%;
|
|
|
|
.tag {
|
|
width: 85rpx;
|
|
height: 85rpx;
|
|
border-radius: 29rpx;
|
|
|
|
.iconfont {
|
|
font-size: 44rpx;
|
|
}
|
|
|
|
.count-tag {
|
|
top: 0;
|
|
right: -13rpx;
|
|
width: 26rpx;
|
|
height: 26rpx;
|
|
background: #E82F21;
|
|
border-radius: 26rpx;
|
|
}
|
|
}
|
|
|
|
.thumbs {
|
|
color: #ff6262;
|
|
background: #FFEFEF;
|
|
}
|
|
|
|
.follow {
|
|
color: #FC8218;
|
|
background: #FEF6E7;
|
|
}
|
|
|
|
.comment {
|
|
color: #44A860;
|
|
background: #ECF6EF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dynamic-sort {
|
|
top: 80rpx;
|
|
right: 32rpx;
|
|
width: 145rpx;
|
|
background: #FEFFFE;
|
|
box-shadow: 0 14rpx 20rpx 0 rgba(132, 132, 132, 0.08);
|
|
border-radius: 4rpx;
|
|
border: 1rpx solid #EFEFEF;
|
|
transform: rotateZ(360deg);
|
|
z-index: 1;
|
|
|
|
.sort-item {
|
|
padding: 15rpx 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|