wangluohuoyun-huozhuapp/pages/cargoTerminal/cargoTerminal.vue

<template>
	<view class="content">
		<view class="img">
			<u-image width="100%" height="300rpx" src="@/static/banner.jpg"></u-image>
		</view>
		<view class="tab-view">
			<u-tabs :list="tabList" @click="clickTab" :lineColor="scrollTop>1200?'white':'#000000'" :current='tabIndex'
				:inactiveStyle="{color: scrollTop>1200?'white':'',}" :activeStyle="{
							color: scrollTop>1200?'':'#000000',
							fontWeight: 'bold',
							transform: 'scale(1.25)',
						}" :class="scrollTop>1200?'fixed':''"></u-tabs>
		</view>
		<mescroll-body ref="mescrollRef" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback"
			class="mescroll">
			<view class="list-content" @click="toDetail(item.id)" v-for="item in goodsList">
				<view class="list-item">
					<view class="xj"  v-if="item.status=='已下架'">
						已下架
					</view>
					<view class="row1 row">
						<view class="left">
							{{item.sendCity}} {{item.sendArea}}
						</view>
						<view class="">
							→
						</view>
						<view class="right">
							{{item.unloadCity}} {{item.unloadArea}}
						</view>
					</view>
					<view class="row2 flex row">
						<view class="left">
							<text>￥{{item.freightPrice}}</text>
							<text v-if="item.billingMethod==0">元/吨</text>
							<text v-if="item.billingMethod==1">元/车</text>
							<text v-if="item.billingMethod==2">元/方</text>
						</view>
						<view class="right">
							{{item.updateDate}}
						</view>
					</view>
					<view class="row3 row">
						{{item.content}}
						<!-- {{item.carModel?item.carModel.replace(',','/'):''}}、{{item.carLength?item.carLength.replace(',','/'):''}}米、10吨/10方、10车... -->
					</view>
					<view class="row4 flex row">
						<view class="btn" @click.native.stop="shelvesBtnClick(1,item)" v-if="item.status=='已下架'">
							上架
						</view>
						<view class="btn" @click.native.stop="shelvesBtnClick(2,item)" v-if="item.status=='已上架'">
							下架
						</view>
						<view class="btn" @click.native.stop="copyToNewPage(item,1)" v-if="tabIndex==1">
							复制
						</view>
						<view class="btn" @click.native.stop="often(item)" v-if="tabIndex==1&&item.oftenFlag!=1">
							常发
						</view>
						<view class="btn often" v-if="tabIndex==1&&item.oftenFlag==1">
							常发
						</view>
						<view class="btn" @click.native.stop="deleteTask(item)">
							删除
						</view>
						<view class="btn" @click.native.stop="editTask(item)">
							编辑
						</view>
						<view class="btn" @click.native.stop="removeOften(item)" v-if="tabIndex==2">
							移除
						</view>
					</view>
				</view>

			</view>
			<!-- <view class="" v-for="(item,index) in goodsList" :key="index">
				{{item}}
			</view> -->
		</mescroll-body>
		<u-button type="warning" :custom-style="customStyleButton" @click="toPublishSource">发货找车</u-button>
		<u-toast ref="uToast"></u-toast>
		<u-modal :show="show" :content='content' @confirm="confirmRemove" @cancel="show=false"
			showCancelButton></u-modal>
		<u-modal :show="show1" :content='content1' @confirm="confirmRemove1" @cancel="show1=false"
			showCancelButton></u-modal>
		<u-modal :show="show2" :content='content2' @confirm="confirmRemove2" @cancel="show2=false"
			showCancelButton></u-modal>
	</view>
</template>

<script>
	var that;
	import {
		mapState
	} from 'vuex';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				show: false,
				content: '确认移出常发货源？',
				show1: false,
				content1: '确认下架该货源？',
				show2: false,
				content2: '确认删除该货源？',
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 0, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无记录！'
					},
					toTop: {
						src: ''
					}
				},
				goodsList: [],
				customStyleButton: {
					position: "fixed",
					bottom: "140rpx",
					margin: "0 20rpx",
					width: "calc(100vw - 40rpx)"
				},
				scrollTop: 0,
				tabIndex: 0,

				tabList: [{
					name: '发布中'
				}, {
					name: '发布记录'
				}, {
					name: '常发货源'
				}, ],
			};
		},
		onLoad() {
			that = this
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		methods: {
			toDetail(id) {
				uni.navigateTo({
					url: "/pages/cargoTerminal/cargoTerminalDetail?id=" + id
				})
			},
			toPublishSource() {
				uni.navigateTo({
					url: "/pages/cargoTerminal/publishSource"
				})
			},
			copyToNewPage(val, type) {
				uni.setStorageSync("selectGoodObj", val)
				uni.navigateTo({
					url: "/pages/cargoTerminal/publishSource?type=1"
				})
			},
			deleteTask(val) {
				this.selectObj = val
				this.show2 = true
			},
			editTask(val) {
				uni.setStorageSync("selectGoodObj", val)
				uni.navigateTo({
					url: "/pages/cargoTerminal/publishSource?type=2"
				})
			},
			removeOften(val) {
				this.selectObj = val
				this.show = true
			},
			confirmRemove2() {
				uni.showLoading({
					title: "加载中"
				})
				this.$request.baseRequest('post', '/hyReleaseGoodsInfo/deleteTask', this.selectObj).then(res => {
						uni.hideLoading()
						uni.showToast({
							title: "货源删除成功！",
							icon:'none'
						})
						this.show2 = true
						this.mescroll.resetUpScroll()
					})
					.catch(res => {});
			},
			confirmRemove1() {
				uni.showLoading({
					title: "加载中"
				})
				this.selectObj.status = '已下架'
				this.$request.baseRequest('post', '/hyReleaseGoodsInfo/api/editTask', this.selectObj).then(res => {
						uni.showToast({
							title: "货源已下架",
							icon:'none'
						})
						this.show1 = false
						that.mescroll.resetUpScroll()
					})
					.catch(res => {
						uni.hideLoading()
						uni.$u.toast(res.message);
					});
			},
			confirmRemove() {
				uni.showLoading({
					title: "加载中",
					icon:'none'
				})
				this.selectObj.oftenFlag = 0
				this.$request.baseRequest('post', '/hyReleaseGoodsInfo/api/editTask', this.selectObj).then(res => {
						uni.hideLoading()
						this.show = false
						uni.showToast({
							title: "成功移除常发货源！",
							icon:'none'
						})
						this.mescroll.resetUpScroll()
					})
					.catch(res => {});
			},
			often(val) {
				uni.showLoading({
					title: "加载中"
				})
				this.$request.baseRequest('post', '/hyReleaseGoodsInfo/api/editTask', val).then(res => {
						uni.hideLoading()
						uni.showToast({
							title: "已存为常发货源！",
							icon:'none'
						})
						this.mescroll.resetUpScroll()
					})
					.catch(res => {});
			},


			shelvesBtnClick(flag, val) {
				if (flag == '1') {
					val.status = '已上架'
					this.$request.baseRequest('post', '/hyReleaseGoodsInfo/api/editTask', val).then(res => {
							uni.showToast({
								title: "货源已上架",
								icon:'none'
							})
							that.mescroll.resetUpScroll()
						})
						.catch(res => {
							uni.hideLoading()
							uni.$u.toast(res.message);
						});
				} else {
					this.selectObj = val
					this.show1 = true
				}

			},
			upCallback(page) {
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				this.$request.baseRequest('get', '/hyReleaseGoodsInfo/selectTask', {
						currentPage: page.num,
						pageSize: page.size,
						searchType: this.tabIndex + 1,
						commonId: this.userInfo.id
					}).then(res => {
						uni.hideLoading()
						let curPageData = res.data.records;
						let totalPage = res.data.total;
						let curPageLen = curPageData.length;
						this.mescroll.endByPage(curPageLen, totalPage);
						console.log(res.data)
						if (page.num == 1) this.goodsList = [];
						this.goodsList = this.goodsList.concat(curPageData);
						for (let i = 0; i < this.goodsList.length; i++) {
							let _text3 = ''
							let _textList = this.goodsList[i].measuringMethod.split(',')
							for (let k = 0; k < _textList.length; k++) {
								if (_textList[k] == '重量（吨）') {
									_text3 += this.goodsList[i].weight + '吨/'
								} else {
									_text3 += this.goodsList[i].volume + '方/'
								}
							}
							_text3 = _text3.substring(0, _text3.length - 1)
							this.goodsList[i].content = this.goodsList[i].carModel.replace(',', '/') + '、' + this
								.goodsList[i].carLength.replace(',', '/') + '米、' + _text3 + '、' + this.goodsList[i]
								.expectedNum + '车、' + this.goodsList[i].goodsName + '、' + this.goodsList[i]
								.packageType + '、' + this.goodsList[i].cargoDistance + 'km'
						}

					})
					.catch(res => {
						uni.hideLoading()
						uni.$u.toast(res.message);
						this.mescroll.endErr();
					});
			},
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			async clickTab(val) {
				console.log("val", val)
				this.tabIndex = val.index
				this.mescroll.resetUpScroll()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fixed,
	.fixed1 {
		background: linear-gradient(97deg, #F5BA3C 0%, #F5BA3C 100%);
		position: fixed;
		top: var(--status-bar-height);
		z-index: 999;
		// width: calc(100% - 40rpx);
		width: 100%;
		// margin:0 20rpx;
	}

	.fixed1 {
		top: 0;
		height: var(--status-bar-height);
		background: linear-gradient(97deg, #F5BA3C 0%, #F5BA3C 100%);
	}

	.tab-view {
		padding: 0 20rpx;
	}

	.list-content {
		margin: 20rpx;
	}

	.list-item {
		position: relative;
		background: #fff;
		padding: 20rpx;
		border-radius: 20rpx;

		.xj {
			position: absolute;
			right: 40rpx;
			top: 50rpx;
			color: red;
			font-weight: 700;
			border: 2px solid red;
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
			transform: rotate(40deg);
			background-color: rgba(255, 255, 255, 0.6);
			
		}

		.row2 {
			.left{
				color:rgb(255, 134, 0);
				font-weight: 700;
			}
			.right {
				color: rgb(153, 153, 153)
			}
		}

		.row {
			margin: 10rpx 0;
		}

		.row1 {
			display: flex;
			font-size: 32rpx;
			font-weight: 700;

		}

		.row2 {
			justify-content: space-between;
		}

		.row3 {
			color: rgb(153, 153, 153);
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}

		.row4 {
			justify-content: flex-end;
			margin-top: 20rpx;
		}
	}

	.btn {
		border: 1px solid rgb(255, 134, 0);
		padding: 10rpx;
		box-sizing: border-box;
		margin-left: 10rpx;
		color: rgb(255, 134, 0);
		border-radius: 10rpx;
		font-size: 28rpx;
	}

	.often {
		border: 1px solid rgb(187, 187, 187);
		color: rgb(187, 187, 187);
	}
</style>