sadjv3_jishi/my/publish/index.vue

713 lines
20 KiB
Vue
Raw Normal View History

2024-06-05 19:14:51 +08:00
<!-- 菜单悬浮的原理: 通过给菜单添加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">
<view class="flex align-center padding-left" style="background: #FFFFFF;">
<image src="../../static/images/data.png" style="width: 26upx;height: 26upx;"></image>
<view class="margin-left-xs flex align-center" style="color: #999999;">
<view @click="bindData(1)">{{startTime?startTime:'开始时间'}}</view>
<view @click="bindData(2)">{{endTime?endTime:'结束时间'}}</view>
</view>
</view>
<u-tabs :list="tabs" :is-scroll="true" :current="tabIndex" @change="tabChange" active-color="#000000">
</u-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'
@click="goNav('/pages/index/game/myOrder?id=' + item.massageTypeId + '&userId=' + userId)">
<view class="flex">
<view style="width: 220upx;height: 160upx;border-radius: 20rpx;">
<image :src="item.massageImg?item.massageImg: '../../static/logo.png'"
style="width: 220upx;height: 160upx;border-radius: 20rpx;"></image>
</view>
<view class="u-flex-1 text-white margin-left-sm">
<view style="color: #333333;font-size: 32upx;">{{item.title}}</view>
<view style="font-size: 26upx;color: #999999;margin-top: 16rpx;" class="">{{item.createTime}}</view>
<view style="color: #FF1200;font-size: 28upx;margin-top: 16rpx;" class="">
<text style="font-size: 40rpx;">{{item.price}}</text>
<text style="font-size: 24upx;color: #999999;margin-left: 10px;">{{item.duration}}分钟</text>
</view>
<view class="u-font-14 u-tips-color " v-if="item.content && item.status == 3">
<view class="text-red">拒绝理由{{item.content}}</view>
</view>
</view>
</view>
<view class="flex justify-end" v-if="checkJs != '否'">
<u-button v-if="item.status == 1" :custom-style="customStyle" @click="updateStatus(item)"
shape="square" :plain="true" style="background: linear-gradient(to right, #223845, #00a85b);color: #ffffff;border-radius: 40px;font-size: 28rpx;border: 0;">立即上架</u-button>
<u-button v-if="item.status == 0" :custom-style="customStyle"
@click="downdateStatus(item)" shape="square" :plain="true" style="background: linear-gradient(to right, #223845, #00a85b);color: #ffffff;border-radius: 40px;font-size: 28rpx;">立即下架</u-button>
<u-button v-if="item.status == 1" :custom-style="customStyle" @click="delStatus(item)"
shape="square" :plain="true" style="background-color: #cccccc;color: #ffffff;border-radius: 40px;font-size: 28rpx;">删除</u-button>
<!-- <u-button v-if="item.status != 0" :custom-style="customStyle2" shape="square" :plain="true"
@click="update(item)">重新编辑</u-button> -->
</view>
</view>
<empty v-if="goods.length == 0"></empty>
</mescroll-body>
<view class=" addbtn padding-lr-sm" v-if="checkJs != '否'">
<view style="background-image: linear-gradient(to right, #223845, #00a85b)" class="addbtns" @click="bindFb()">添加项目</view>
</view>
<u-popup v-model="show" mode="bottom" border-radius="14" :closeable="true" height="800">
<view style="padding: 30rpx 30rpx 0rpx;color: #096f4b;">*备注只能添加当前城市项目</view>
<view class="fl_pop " style="margin-top: 40upx;padding-bottom: 120rpx;" v-if="orderList.length">
<view class="flex margin-tb radius margin-lr-sm align-center" v-for="(item,index) in orderList"
:key='index'>
<view>
<u-checkbox-group>
<u-checkbox @change="checkboxChange(item)" v-model="item.checked" active-color="#096f4b">
</u-checkbox>
</u-checkbox-group>
</view>
<view style="width: 220upx;height: 160upx;border-radius: 10rpx;">
<image :src="item.massageImg?item.massageImg: '../../static/logo.png'"
style="width: 220upx;height: 160upx;border-radius: 30rpx;"></image>
</view>
<view class="margin-left text-white flex flex-direction" style="width: 65%;">
<view class="flex justify-between">
<view class="flex">
<image src="../../static/images/geren.png" style="width: 35rpx;height: 35rpx;">
</image>
<view class="text-bold text-df margin-left-xs text-black">{{item.title}}</view>
</view>
<!-- <view style="color: #999999;font-size: 22upx;">已售1286</view> -->
</view>
<view class="flex flex-wrap" style="margin-top: 10rpx;"
v-if="item.labels && item.labels.length > 0">
<text class="margin-bottom-xs box" v-for="(ite,index) in item.labels"
:key="index">{{ite}}</text>
</view>
<view style="color:#FF1200;font-size: 24upx;margin-top: 10rpx;">
<text style="font-size: 32upx;font-weight: bold;">{{item.price}}/</text>{{item.duration}}分钟
</view>
</view>
</view>
<view class="addbtnf" v-if="checkJs != '否'">
<view class="addbtn1" @click="bindGame()">发布</view>
</view>
</view>
<empty v-if="orderList.length == 0"></empty>
</u-popup>
<!-- 开始时间 -->
<u-picker v-model="startshow" mode="time" :params="paramsStart" @confirm="startData"></u-picker>
<!-- 结束时间 -->
<u-picker v-model="endshow" mode="time" :params="paramsEnd" @confirm="endData"></u-picker>
</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 {
checkJs: '否',
goods: [], // 数据列表
tabs: [{
name: '出售中',
status: ''
}, {
name: '已下架',
status: '1'
}],
tabIndex: 0, // tab下标
game: [],
page: 1,
limit: 10,
userId: 0,
status: 1,
nickName: '',
avatar: '',
customStyle: {
color: '#333333',
border: '',
// backgroundColor: '#1E1F31',
border: "",
width: '180rpx',
height: '30px',
margin: "0 0 0 20rpx"
},
customStyle2: {
color: '',
border: '',
// backgroundColor: '#1E1F31',
border: "",
width: '180rpx',
height: '30px',
margin: "0 0 0 20rpx"
},
customStyle1: {
backgroundColor: "#096f4b",
color: '#FFFFFF',
border: 0,
color: "#FFF",
height: '30px'
},
customStyle2: {
color: '#FFFFFF',
position: "fixed",
bottom: "15rpx",
left: "0rpx",
right: "0rpx",
margin: "0rpx 50rpx",
backgroundColor: '#096f4b',
},
renzheng: 0,
show: false,
selarr: [],
gameList: [],
orderList: [],
startshow: false,
endshow: false,
paramsStart: {
year: true,
month: true,
day: true,
hour: false,
minute: false,
second: false
},
paramsEnd: {
year: true,
month: true,
day: true,
hour: false,
minute: false,
second: false
},
startTime: '',
endTime: '',
page: 1,
limit: 10,
massageTypeId: []
}
},
onLoad() {
this.$queue.showLoading("加载中...");
this.userId = uni.getStorageSync('userId')
this.nickName = uni.getStorageSync('nickName')
// this.getRenZheng()
this.renzheng = uni.getStorageSync("renzheng")
this.$Request.get('/app/common/type/319').then(res => {
if (res.code == 0) {
this.checkJs = res.data.value;
}
});
},
onShow() {
// this.mescroll.resetUpScroll()
},
methods: {
// 选中某个复选框时由checkbox时触发
checkboxChange(e) {
},
//时间弹框开关
bindData(index) {
// console.log(index, 1111)
if (index == 1) {
this.startshow = true
} else if (index == 2) {
this.endshow = true
}
},
//开始时间
startData(e) {
// console.log(e)
this.startTime = e.year + ' ' + e.month + '-' + e.day
},
// 结束时间
endData(e) {
this.endTime = e.year + ' ' + e.month + '-' + e.day
// console.log(this.endTime)
},
//发布列表 查看详情
goOrder(e) {
uni.navigateTo({
url: '/pages/index/game/myOrder?id=' + e.id
})
},
// 技能列表
bindList(index, item) {
console.log(index)
if (this.selarr.length > 0 && item.ischeck == false) {
uni.showToast({
title: '只能选择一个项目',
icon: 'none'
})
return
}
if (item.ischeck == false) {
item.ischeck = true;
this.selarr.push(item)
} else {
item.ischeck = false;
let index11 = this.selarr.indexOf(index)
this.selarr.splice(index11, 1)
}
this.selarr = this.selarr;
},
getcity() {
let that = this
uni.getLocation({
type: 'wgs84',
success: function(res) {
console.log('当前位置的经度:' + res.longitude);
console.log('当前位置的纬度:' + res.latitude);
that.Mycity(res.latitude, res.longitude)
}
});
},
//获取省市区
Mycity(latitude, longitude) {
this.$Request.get("/app/Login/selectCity", {
lat: latitude,
lng: longitude
}).then(res => {
console.log(res)
this.city = res.data.city
this.getMassageType()
});
},
bindFb() {
let renzheng = uni.getStorageSync('renzheng')
let isCashDeposit = uni.getStorageSync('isCashDeposit')
if (renzheng == 2) {
let bzjCheck = this.$queue.getData("bzjCheck");
if (bzjCheck != '否') {
if (isCashDeposit == 2) {
this.show = true
this.getcity()
} else if (isCashDeposit == 3) {
uni.showToast({
title: '系统审核中,请耐心等待',
icon: 'none',
duration: 1000
})
} else {
uni.showModal({
title: '提示',
content: '您还未缴纳保证金,请先缴纳保证金',
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
uni.navigateTo({
url: '/my/publish/money'
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
})
}
}else{
this.show = true
this.getcity()
}
} else {
if (renzheng == 1) {
uni.showToast({
title: '系统审核中,请耐心等待',
icon: 'none',
})
} else {
uni.showModal({
title: '提示',
content: '您还未实名认证,请先认证',
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
uni.navigateTo({
url: '/my/renzheng/rzType'
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
})
}
}
},
/*下拉刷新的回调 */
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,
artificerId: uni.getStorageSync('artificerId')
}
this.$Request.get('/app/artificer/selectArtificerMassage', 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.mescroll.endSuccess(res.data.list.length); // 隐藏加载状态栏
}).catch(() => {
//联网失败, 结束加载
this.mescroll.endErr();
});
},
// 切换菜单
tabChange(index) {
this.tabIndex = index
this.goods = []; // 置空列表,显示加载进度条
this.mescroll.resetUpScroll()
},
// 上架
updateStatus(e) {
let data = {
artificerMassageId: e.artificerMassageId,
status: 0
}
this.$Request.postJson('/app/artificer/updateArtificerMassage', data).then(res => {
if (res.code == 0) {
this.mescroll.resetUpScroll()
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1000
})
}
})
},
//下架
downdateStatus(e) {
let data = {
artificerMassageId: e.artificerMassageId,
status: 1
}
this.$Request.postJson('/app/artificer/updateArtificerMassage', data).then(res => {
if (res.code == 0) {
this.mescroll.resetUpScroll()
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1000
})
}
})
},
// 重新编辑
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) {
console.log(e)
let that = this
uni.showModal({
title: '提示',
content: '确定删除吗?',
success: function(res) {
if (res.confirm) {
let data = {
id: e.artificerMassageId
}
that.$Request.postT('/app/artificer/deleteArtificerMassage', 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/game/order?id=' + e.orderTakingId + '&userId=' + e.userId
});
},
goNav(e) {
uni.navigateTo({
url: e
})
},
//发布列表
getMassageType() {
let data = {
// page: this.page,
// limit: this.limit,
city: this.city,
artificerId: uni.getStorageSync('artificerId')
}
this.$Request.get('/app/artificer/selectMassageTypeList', data).then(res => {
// console.log(res)
for (let i = 0; i < res.data.length; i++) {
if (res.data[i].labels) {
res.data[i].labels = res.data[i].labels.split(",");
}
res.data[i].checked = false
}
// if (this.page == 1) this.orderList = []; //如果是第一页需手动制空列表
// this.orderList = [...this.orderList, ...res.data]; //追加新数据
this.orderList = res.data
})
},
bindGame() {
this.orderList.forEach(res => {
if (res.checked == true) {
this.massageTypeId.push(res.massageTypeId)
this.getMassageType()
// console.log(this.massageTypeId.push(res.massageTypeId))
}
})
if (this.massageTypeId == '') {
uni.showToast({
title: '请选择发布的项目',
icon: 'none',
duration: 1000
})
return
}
let data = {
artificerMassages: this.massageTypeId.toString()
// artificerId:uni.getStorageSync('artificerId')
}
this.$Request.postT('/app/artificer/insertArtificerMassage', data).then(res => {
console.log(res)
if (res.code == 0) {
this.show = false
this.massageTypeId = []
this.mescroll.resetUpScroll()
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1000
})
}
})
}
},
onReachBottom: function() {
this.page = this.page + 1;
// this.getMassageType();
},
onPullDownRefresh: function() {
this.page = 1;
// this.getMassageType();
},
}
</script>
<style lang="scss">
/*
sticky生效条件
1父元素不能overflow:hidden或者overflow:auto属性(mescroll-body设置:sticky="true"即可, mescroll-uni本身没有设置overflow)
2必须指定topbottomleftright4个值之一否则只会处于相对定位
3父元素的高度不能低于sticky元素的高度
4sticky元素仅在其父元素内生效,所以父元素必须是 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: #f7f7f7;
}
.bg {
background-color: #FFFFFF;
}
.addbtn {
position: fixed;
bottom: 0upx;
left: 0;
right: 0;
width: 100%;
height: 120upx;
z-index: 999;
background: #FFFFFF;
text-align: center;
display: flex;
align-items: center;
}
.addbtns {
width: 685upx;
height: 80rpx;
line-height: 80rpx;
z-index: 999;
background: linear-gradient(to right, #223845, #00a85b);
color: #FFFFFF;
text-align: center;
margin: 0 auto;
border-radius: 40upx;
font-size: 30rpx;
}
.addbtnf {
width: 100%;
height: 100upx;
z-index: 999;
background: #FFFFFF;
text-align: center;
position: fixed;
bottom: 0px;
left: 0;
right: 0;
display: flex;
align-items: center;
}
.addbtn1 {
width: 685upx;
height: 80rpx;
line-height: 80rpx;
z-index: 999;
background: linear-gradient(to right, #223845, #00a85b);
color: #FFFFFF;
text-align: center;
margin: 0 auto;
border-radius: 40upx;
font-size: 30rpx;
}
.tabBox {
border: 1rpx solid #999999;
// padding: 15rpx 20rpx;
border-radius: 15rpx;
font-size: 28rpx;
width: 150upx;
line-height: 60upx;
text-align: center;
}
.box {
// border: 3rpx solid #005dff;
background: #E8FAE1;
color: #096f4b;
padding: 5rpx 15rpx;
font-size: 26rpx;
letter-spacing: 2rpx;
border-radius: 8rpx;
// margin-top: 10rpx;
margin-right: 8upx;
}
.u-size-default{
height: 30px !important;
line-height: 30px !important;
border-radius: 30px !important;
}
</style>