anmo-master/my/publish/index.vue

<!-- 菜单悬浮的原理: 通过给菜单添加position:sticky实现, 用法超简单, 仅APP端的低端机不兼容 https://caniuse.com/#feat=css-sticky -->
<template>
	<view class="publish-page">
		<!-- 对于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="item" v-for="(item,index) in goods" :key='index'
				@click="goNav('/pages/index/game/myOrder?id=' + item.massageTypeId + '&userId=' + userId)">
				<view class="flex margin-bottom-sm">
					<view style="width: 160rpx;height: 160upx;border-radius: 32rpx;">
						<image :src="item.massageImg?item.massageImg: '../../static/logo.png'"
							style="width: 160rpx;height: 160upx;border-radius: 32rpx;"></image>
					</view>
					<view class="u-flex-1 text-white margin-left-sm">
						<view style="font-weight: bold;font-size: 32rpx;color: #222222;">{{item.title}}</view>
						<view style="font-size: 28upx;color: #222;" class="margin-top">{{item.createTime}}</view>
						<view style="color:#2FB57A;font-size: 32upx;" class="margin-top">
							
							<text style="font-size: 28upx;color: #222;">{{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-between u-p-t-20" style="border-top:1rpx solid #F0F0F0;" v-if="checkJs != '否'">
					<view style="font-weight: bold;font-size: 40rpx;color: #F24E4E;">￥{{item.price}}</view>
					<view class="flex">
						<u-button v-if="item.status == 1" :custom-style="customStyle" @click="updateStatus(item)"
							 >立即上架</u-button>
						<u-button v-if="item.status == 0" class="customStyle2" :custom-style="customStyle"
							@click="downdateStatus(item)" >立即下架</u-button>
						<u-button v-if="item.status == 1" :custom-style="customStyle" @click="delStatus(item)"
							 >删除</u-button>
						<!-- <u-button v-if="item.status != 0" :custom-style="customStyle2" shape="square" :plain="true"
							@click="update(item)">重新编辑</u-button> -->
					</view>
				</view>
			</view>

			<empty v-if="goods.length == 0"></empty>
		</mescroll-body>

		<view class=" addbtn padding-lr-sm" v-if="checkJs != '否'" @click="bindFb()">
			添加项目
		</view>




		<u-popup v-model="show" mode="bottom" border-radius="14" :closeable="true" height="800">
			<view style="padding: 30rpx 30rpx 0rpx;color: #2FB57A;">*备注：只能添加当前城市项目</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="#2FB57A">
							</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: '#FFFFFF',
					backgroundColor: '#1EDA94',
					borderRadius: "32rpx",
					width: '156rpx',
					height: '60rpx',
					margin: "0 0 0 20rpx",
					fontWeight: 'bold',
					fontSize: '28rpx',
				},
				customStyle2: {
					color: '#2FB57A',
					border: '2rpx solid #2FB57A',
					// backgroundColor: '#1E1F31',
					border: "8rpx",
					width: '160rpx',
					height: '54rpx',
					margin: "0 0 0 20rpx"
				},
				customStyle1: {
					backgroundColor: "#2FB57A",
					color: '#FFFFFF',
					border: 0,
					color: "#FFF",
					height: '98rpx'
				},
				customStyle2: {
					color: '#FFFFFF',
					position: "fixed",
					bottom: "15rpx",
					left: "0rpx",
					right: "0rpx",
					margin: "0rpx 50rpx",
					backgroundColor: '#2FB57A',
				},
				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、必须指定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;
	}

	.publish-page {
		background-color: #F5F5F5;
		padding: 20rpx 32rpx ;
		.item{
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			padding: 24rpx;
			margin-bottom: 20rpx;
		}
	}
	

	.addbtn {
		position: fixed;
		bottom: 40rpx;
		left: 32rpx;
		z-index: 99;
		width: 686rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #1EDA94;
		border-radius: 86rpx 86rpx 86rpx 86rpx;
		text-align: center;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		
	}


	.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: 88upx;
		line-height: 88upx;
		z-index: 999;
		background: #2FB57A;
		color: #FFFFFF;
		text-align: center;
		margin: 0 auto;
		border-radius: 8upx;
		font-size: 32upx;
		font-weight: bold;

	}

	.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: #2FB57A;
		padding: 5rpx 15rpx;
		font-size: 26rpx;
		letter-spacing: 2rpx;
		border-radius: 8rpx;
		// margin-top: 10rpx;
		margin-right: 8upx;
	}
</style>