373 lines
11 KiB
Vue
373 lines
11 KiB
Vue
<!-- 菜单悬浮的原理: 通过给菜单添加position:sticky实现, 用法超简单, 仅APP端的低端机不兼容 https://caniuse.com/#feat=css-sticky -->
|
||
<template>
|
||
<view>
|
||
<!-- 对于mescroll-body: 需设置:sticky="true", 此应避免在mescroll-body标签前面加其他非定位的元素, 否则下拉区域会被挤出, 无法会隐藏.-->
|
||
<!-- 对于mescroll-uni: 则无需设置:sticky="true", 无其他限制和要求 -->
|
||
|
||
<!-- sticky吸顶悬浮的菜单, 父元素必须是 mescroll -->
|
||
<view class="sticky-tabs">
|
||
<me-tabs v-model="tabIndex" nameKey='title' :tabs="tabs" @change="tabChange"></me-tabs>
|
||
</view>
|
||
<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
||
<!-- 数据列表 -->
|
||
<view class="margin-sm padding-sm bg radius " v-for="(item,index) in goods" :key='index'
|
||
>
|
||
<view class="flex justify-between u-border-bottom padding-bottom-sm">
|
||
<view class="text-blue">{{item.statusName}}</view>
|
||
<view style="color: #1E1F31;">{{item.updateTime}}</view>
|
||
</view>
|
||
|
||
<view class=" u-flex u-p-t-30">
|
||
<!-- <view class="u-m-r-10">
|
||
<u-avatar :src="avatar" mode="square" size="100"></u-avatar>
|
||
</view> -->
|
||
<view class="u-flex-1 text-white margin-left-xs">
|
||
<view class="u-font-16 text-bold flex justify-between">
|
||
<!-- <view>{{item.gameName}}</view> -->
|
||
<!-- <view style="display: inline-flex;flex: 2;">
|
||
<view class="margin-top-xs text-white text-df" v-for="(item, index) in item.gameName " :key="index" style="margin-right: 10rpx;">{{item}}</view>
|
||
</view> -->
|
||
<view class="u-line-1" style="width: 460rpx;">{{item.myLevel}}</view>
|
||
|
||
<view style="flex: 1;text-align: right;">{{item.oldMoney}}元/月</view>
|
||
</view>
|
||
<view class="u-font-14 u-tips-color margin-top">
|
||
<!-- <view class="text-white">接单时间：{{item.orderTakingTime}}</view> -->
|
||
<view>
|
||
<text v-for="(item,index) in item.gameName" :key="index"
|
||
class="margin-right-sm padding-xs"
|
||
style="color: #557EFD;background-color: #E1E8FF;">{{item}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="u-font-14 u-tips-color margin-top " v-if="item.content && item.status == 3">
|
||
<view class="text-red">拒绝理由：{{item.content}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="flex justify-end u-p-t-20">
|
||
<u-button v-if="item.status == 1" class="margin-right-sm" :custom-style="customStyle"
|
||
@click="updateStatus(item)" shape="circle" :plain="true">取消审核</u-button>
|
||
<u-button v-if="item.status == 0" class="margin-right-sm customStyle2" :custom-style="customStyle"
|
||
@click="updateStatus(item)" shape="circle" :plain="true">立即下架</u-button>
|
||
<u-button v-if="item.status == 2 || item.status == 3" class="margin-right-sm"
|
||
:custom-style="customStyle2" @click="delStatus(item)" shape="circle" :plain="true">删除</u-button>
|
||
<u-button v-if="item.status != 0" :custom-style="customStyle2" shape="circle" :plain="true"
|
||
@click="update(item)">重新编辑</u-button>
|
||
</view>
|
||
</view>
|
||
<!-- <u-gap height="140" bg-color="#ffffff"></u-gap> -->
|
||
<empty v-if="goods.length == 0"></empty>
|
||
|
||
</mescroll-body>
|
||
<view class="padding-lr-sm" style="position: fixed;bottom: 40upx;width: 100%;z-index: 999;">
|
||
<u-button class="" :custom-style="customStyle1" :hair-line="false" @click="bindFb()">
|
||
<u-icon name="plus" color="#fff" size="30" style="margin-right: 10upx;"></u-icon>
|
||
发布
|
||
</u-button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import MescrollMixin from "@/components/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
||
import mescrollBody from "@/components/mescroll-uni/components/mescroll-body/mescroll-body.vue";
|
||
import meTabs from "@/components/mescroll-uni/me-tabs/me-tabs.vue";
|
||
import empty from '../../components/empty.vue'
|
||
|
||
export default {
|
||
mixins: [MescrollMixin], // 使用mixin
|
||
components: {
|
||
mescrollBody,
|
||
meTabs,
|
||
// orderList
|
||
empty
|
||
},
|
||
data() {
|
||
return {
|
||
goods: [], // 数据列表
|
||
tabs: [{
|
||
title: '全部',
|
||
status: ''
|
||
}, {
|
||
title: '进行中',
|
||
status: '0'
|
||
}, {
|
||
title: '待审核',
|
||
status: '1'
|
||
}, {
|
||
title: '已下架',
|
||
status: '2'
|
||
}, {
|
||
title: '已拒绝',
|
||
status: '3'
|
||
}, ],
|
||
tabIndex: 0, // tab下标
|
||
game: [],
|
||
page: 1,
|
||
limit: 10,
|
||
userId: 0,
|
||
status: 1,
|
||
nickName: '',
|
||
avatar: '',
|
||
customStyle: {
|
||
color: '#999999',
|
||
border: '2rpx solid #999999',
|
||
// backgroundColor: '#1E1F31',
|
||
border: "8rpx",
|
||
width: '180rpx',
|
||
height: '54rpx',
|
||
margin: "0 0 0 20rpx"
|
||
},
|
||
customStyle2: {
|
||
color: '#557EFD',
|
||
border: '2rpx solid #557EFD',
|
||
// backgroundColor: '#1E1F31',
|
||
border: "8rpx",
|
||
width: '180rpx',
|
||
height: '54rpx',
|
||
margin: "0 0 0 20rpx"
|
||
},
|
||
customStyle1: {
|
||
backgroundColor: "#557EFD",
|
||
color: '#FFFFFF',
|
||
border: 0,
|
||
color: "#FFF",
|
||
height: '98rpx'
|
||
},
|
||
renzheng: 0
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.$queue.showLoading("加载中...");
|
||
this.userId = uni.getStorageSync('userId')
|
||
this.nickName = uni.getStorageSync('nickName')
|
||
// this.getRenZheng()
|
||
this.renzheng = uni.getStorageSync("renzheng")
|
||
},
|
||
onShow() {
|
||
this.mescroll.resetUpScroll()
|
||
|
||
|
||
},
|
||
methods: {
|
||
bindFb() {
|
||
// this.renzheng = uni.getStorageSync("renzheng")
|
||
if (this.renzheng == 2) {
|
||
uni.navigateTo({
|
||
url: './editor?classify=' + 1
|
||
})
|
||
} else if (this.renzheng == 5) {
|
||
uni.navigateTo({
|
||
url: './firm?classify=' + 2
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: '/my/renzheng/index?classify=' + 1
|
||
})
|
||
// uni.showToast({
|
||
// title: '您还为实名，请先实名',
|
||
// icon: 'none',
|
||
// duration: 1000
|
||
// })
|
||
}
|
||
},
|
||
/*下拉刷新的回调 */
|
||
downCallback() {
|
||
// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
|
||
// loadSwiper();
|
||
// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
|
||
this.mescroll.resetUpScroll()
|
||
},
|
||
/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
|
||
upCallback(page) {
|
||
let curTab = this.tabs[this.tabIndex].status
|
||
|
||
let data = {
|
||
status: curTab,
|
||
page: page.num,
|
||
limit: page.size
|
||
}
|
||
this.$Request.get('/app/orderTaking/selectMyRelease', data).then(res => {
|
||
uni.hideLoading();
|
||
this.mescroll.endBySize(res.data.list.length, res.data.totalCount)
|
||
if (page.num == 1) this.goods = []; //如果是第一页需手动制空列表
|
||
|
||
this.goods = [...this.goods, ...res.data.list]; //追加新数据
|
||
// for (let i = 0; i < this.goods.length; i++) {
|
||
// this.goods[i].gameName = this.goods[i].gameName.split(",");
|
||
// console.log(this.goods[i].gameName)
|
||
// }
|
||
this.goods.forEach(ret => {
|
||
ret.gameName = ret.gameName.split(",");
|
||
|
||
switch (ret.status) {
|
||
case '0':
|
||
ret.statusName = '进行中';
|
||
break;
|
||
case '1':
|
||
ret.statusName = '待审核';
|
||
break;
|
||
case '2':
|
||
ret.statusName = '已下架';
|
||
break;
|
||
case '3':
|
||
ret.statusName = '已拒绝';
|
||
break;
|
||
}
|
||
})
|
||
this.mescroll.endSuccess(res.data.list.length); // 隐藏加载状态栏
|
||
}).catch(() => {
|
||
//联网失败, 结束加载
|
||
this.mescroll.endErr();
|
||
});
|
||
},
|
||
// 切换菜单
|
||
tabChange() {
|
||
this.goods = []; // 置空列表,显示加载进度条
|
||
this.mescroll.resetUpScroll()
|
||
},
|
||
// 下架
|
||
updateStatus(e) {
|
||
let data = {
|
||
id: e.id,
|
||
status: '2'
|
||
}
|
||
this.$Request.get('/app/orderTaking/updateTakingStatus', data).then(res => {
|
||
if (res.code == 0) {
|
||
this.mescroll.resetUpScroll()
|
||
}
|
||
})
|
||
},
|
||
// 重新编辑
|
||
update(e) {
|
||
console.log(e)
|
||
if (this.renzheng != 2 && this.renzheng != 5) {
|
||
uni.showToast({
|
||
title: '请先完成实名认证',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
|
||
} else {
|
||
if (this.renzheng == 2) {
|
||
if (e.authentication == 2) {
|
||
uni.showToast({
|
||
title: '当前为个人已实名状态，不可发布企业订单',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
} else if (e.authentication == 1) {
|
||
uni.navigateTo({
|
||
url: '/my/publish/editor?id=' + e.id
|
||
})
|
||
|
||
}
|
||
} else if (this.renzheng == 5) {
|
||
if (e.authentication == 1) {
|
||
uni.showToast({
|
||
title: '当前为企业已实名状态，不可发布个人订单',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
} else if (e.authentication == 2) {
|
||
uni.navigateTo({
|
||
url: '/my/publish/firm?id=' + e.id
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
},
|
||
//删除
|
||
delStatus(e) {
|
||
let that = this
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定删除吗?',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
let data = {
|
||
id: e.id
|
||
}
|
||
that.$Request.get('/app/orderTaking/deleteTaking', data).then(res => {
|
||
uni.showToast({
|
||
title: "删除成功"
|
||
})
|
||
that.mescroll.resetUpScroll()
|
||
})
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
|
||
},
|
||
// 完善需求
|
||
edit(item) {
|
||
uni.navigateTo({
|
||
url: '/pages/order/release?type=hasEdit&id=' + item.id + '&content=' + item.content +
|
||
'&site=' + item.site +
|
||
'&phone=' + item.phone + '&deliveryTime=' + item.deliveryTime + '&classifyId=' + item
|
||
.classifyId +
|
||
'&classifyName=' + item.classifyName + '&userType=' + item.userType + '&commission=' + item
|
||
.commission + '&image=' + item.image + '&address=' + item.address + '&latitude=' + item
|
||
.latitude + '&longitude=' + item.longitude
|
||
})
|
||
},
|
||
clickItem: function(e) {
|
||
console.log('点击', e)
|
||
uni.navigateTo({
|
||
url: '/pages/index/order/order?id=' + e.orderTakingId + '&userId=' + e.userId
|
||
});
|
||
},
|
||
goNav(e) {
|
||
uni.navigateTo({
|
||
url: e
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/*
|
||
sticky生效条件：
|
||
1、父元素不能overflow:hidden或者overflow:auto属性。(mescroll-body设置:sticky="true"即可, mescroll-uni本身没有设置overflow)
|
||
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
|
||
3、父元素的高度不能低于sticky元素的高度
|
||
4、sticky元素仅在其父元素内生效,所以父元素必须是 mescroll
|
||
*/
|
||
.sticky-tabs {
|
||
z-index: 990;
|
||
position: sticky;
|
||
top: var(--window-top);
|
||
// background-color: #fff;
|
||
}
|
||
|
||
// 使用mescroll-uni,则top为0
|
||
.mescroll-uni,
|
||
/deep/.mescroll-uni {
|
||
.sticky-tabs {
|
||
top: 0;
|
||
}
|
||
}
|
||
|
||
.demo-tip {
|
||
padding: 18upx;
|
||
font-size: 24upx;
|
||
text-align: center;
|
||
}
|
||
|
||
page {
|
||
background-color: #F5F5F5;
|
||
}
|
||
|
||
.bg {
|
||
background-color: #FFFFFF;
|
||
}
|
||
</style>
|