ts_aimz_uni/pages/shop/sellGoods/sellGoods.vue

<!-- 我要卖 -->
<template>
	<view class="page-container">
		<view class="page-title-box">
			<view class="search-container-fixed">
				<view class="search-box">
					<icon class="mr-10" type="search" size="20"></icon>
					<input type="text" @confirm="doSearch" class="search-input" @input="inputKeywords" :value="keywords"
						placeholder="请输入软著名称" />
					<view @click="doSearch">搜索</view>
				</view>
			</view>
			<view class="header">
				<view class="condition-page-box">
					<view class="condition-item">
						<view class="condition-item-title">软著分类</view>
						<scroll-view scroll-x style="width: 75vw;padding-left: 20rpx;">
							<view class="list-tabs">
								<block v-for="(item,index) in typeList" :key="index">
									<view
										:class="['item-margin',includes(selType,item.dataId) ? 'tab-select' :'tab-normal']"
										@click="bindChooseType" :data-item="item">
										{{item.dataName}}
									</view>
								</block>
							</view>
						</scroll-view>
					</view>
					<view class="condition-item mt-20">
						<view class="condition-item-title">所属者类型</view>
						<scroll-view scroll-x style="flex:1;">
							<view class="list-tabs ml-20">
								<block v-for="(item,index) in ownerList" :key="index">
									<view :class="[selOwner==item.dataId? 'tab-select':'tab-normal','item-margin']"
										@click="bindChooseOwner" :data-item="item">
										{{item.dataName}}
									</view>
								</block>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<view class="container-box">
			<containerLoading style="min-height: 70vh;" :loadingVisible="listLoading" @refresh="doRefreshList">
				<view class="page-list-content">
					<view class="content-box">
						<block v-for="(item,index) in goodsList" :key="index">
							<view class="content-item" @click="doDetail" :data-value="item">
								<view class="content-item-img-box">
									<image :src="item.preImg" class="content-item-img" mode="aspectFill"></image>
								</view>
								<view class="content-item-txt">{{item.goodsName}}</view>
								<view class="content-item-bottom">
									<rich-text class="content-item-price"
										:nodes="moneyTxt(8,14,item.goodsPrice+'')"></rich-text>
									<view class="content-item-time">截止:{{item.goodsLastTime}}</view>
								</view>
								<view class="status-tag">
									{{goodsStatus(item.goodsCheckStatus,item.goodsStatus,item.goodsOrderStatus)}}
								</view>
							</view>
						</block>
					</view>
					<uni-load-more :status="hasMore"></uni-load-more>
				</view>

			</containerLoading>
			<view :class="isScrolling ? 'create-box-hide' : 'create-box-show'" @click="doCreateGoods">
				<image src="/static/images/icon_create_goods_bg.png" class="create-box-bg" mode="scaleToFill">
				</image>
				<view class="create-txt">发布软著</view>
			</view>
		</view>
		<uni-popup type="message" ref="msg">
			<uni-popup-message :type="msgType" :message="msgHint" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import Shop from '@/common/js/net/shop.js'
	import {
		sImgPrefix
	} from '@/common/js/net/mainUrl.js'
	import containerLoading from '../../../components/container-loading.vue'
	import {
		inject
	} from 'vue';
	import {
		goodsStatus,
		includes,
		moneyTxt
	} from '@/common/js/conver.js'
	export default {
		components: {
			containerLoading
		},
		setup() {
			const globalData = inject('globalData')
			return {
				globalData
			}
		},
		data() {
			return {
				pageData: {
					page: 1,
					rows: 10,
					keywords: '',
					keywords: '',
					goodsLeaderType: '',
					goodsGetTime: '',
					goodsDevelop: '',
					goodsType: ''
				},
				keywords: '',
				priceStart: '',
				priceEnd: '',
				isLoadMore: false,
				hasMore: true,
				listLoading: 'loading',
				listRefreshTrig: false,
				goodsList: [],
				imgPrefix: sImgPrefix,
				localAssets: this.globalData.localAssets,
				imgAssets: this.globalData.imgAssetsUrl,
				typeList: [],
				selType: '',
				ownerList: [{
					dataName: '自然人',
					dataId: '1'
				}, {
					dataName: '法人',
					dataId: '2'
				}, {
					dataName: '非法人组织或其他',
					dataId: '3'
				}],
				selOwner: '',
				msgType: 'info',
				msgHint: '',
				msgShow: false,
				isScrolling: false,
				scrollTimer: null,
				needRefresh: false
			};
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: "我要卖",
			});
			uni.setNavigationBarColor({
				frontColor: "#000000",
				backgroundColor: "#FFFFFF",
				animation: {
					duration: 500,
					timingFunc: "easeIn",
				},
			});
			this.doGetDic()
			this.doRefreshList()
		},
		onShow() {
			if (this.needRefresh) {
				this.needRefresh = false
				this.doRefreshList()
			}
		},
		onPageScroll(e) {
			if (this.scrollTimer) {
				clearTimeout(this.scrollTimer);
			}
			if (!this.isScrolling) {
				this.isScrolling = true
			}
			const timer = setTimeout(() => {
				this.isScrolling = false
			}, 300);
			this.scrollTimer = timer
		},
		onPullDownRefresh() {
			this.doRefreshList()
		},
		onReachBottom() {
			this.doLoadMore()
		},
		methods: {
			goodsStatus,
			includes,
			moneyTxt,
			inputKeywords(e) {
				this.keywords = e.detail.value
			},
			doSearch() {
				this.doRefreshList()
			},
			bindChooseType(e) {
				uni.pageScrollTo({
					scrollTop: 0
				})
				setTimeout(() => {
					const item = e.currentTarget.dataset.item;
					let newSelType = this.selType;
					// 先转数组，处理空字符串情况
					const typeArr = newSelType ? newSelType.split(',') : [];

					if (typeArr.includes(item.dataId)) {
						// 删除
						const index = typeArr.indexOf(item.dataId);
						typeArr.splice(index, 1);
					} else {
						// 添加
						typeArr.push(item.dataId);
					}

					// 转回字符串，自动处理空数组（转成空字符串）
					newSelType = typeArr.join(',');
					this.selType = newSelType
					console.log('选择分类:', this.data.selType);
					this.doRefreshList();
				}, 500);
			},
			bindChooseOwner(e) {
				const item = e.currentTarget.dataset.item
				this.selOwner = this.selOwner == item.dataId ? '' : item.dataId
				this.doRefreshList()
			},
			doGetDic() {
				uni.showLoading({
					title: '加载中...',
				})
				const that = this
				Shop.doGetGoodsDic('0b00884a-f7a2-425f-93e5-599fbaad4bde')
					.then(res => {
						uni.hideLoading()
						that.typeList = res
					})
					.catch(err => {
						uni.hideLoading()
					})
			},
			//刷新
			doRefreshList() {
				this.goodsList = []
				this.isLoadMore = false
				this.hasMore = 'more'
				this.listRefreshTrig = true
				this.pageData.page = 1
				this.pageData.keywords = this.keywords
				this.pageData.goodsLeaderType = this.selOwner
				this.pageData.priceRangeStart = this.priceStart
				this.pageData.priceRangeEnd = this.priceEnd
				this.pageData.goodsType = this.selType
				this.getIndexList(true)
			},
			//加载更多
			doLoadMore() {
				if (this.isLoadMore || this.hasMore == 'noMore') {
					return
				}
				//判断是否有更多
				this.hasMore = 'loading'
				this.isLoadMore = true
				this.pageData.page = ++this.pageData.page
				this.getIndexList(false)
			},
			//获取列表
			getIndexList(isRefresh) {
				const _self = this
				this.listLoading = isRefresh ? 'loading' : ''
				Shop.doGetMineSellGoods(_self.pageData)
					.then(res => {
						uni.stopPullDownRefresh()
						console.log(res)
						var status = 'success'
						status = res.rows && res.rows.length > 0 ? 'success' : 'empty'
						const list = _self.addPrefixToPreviewImgs(res.rows)
						_self.listLoading = isRefresh ? status : ''
						_self.goodsList = _self.goodsList.concat(list)
						_self.listRefreshTrig = false
						_self.isLoadMore = false
						_self.hasMore = _self.goodsList.length < res.total ? 'more' : 'noMore'
					})
					.catch(err => {
						uni.stopPullDownRefresh()
						console.log(err)
						_self.listLoading = 'error'
						_self.listRefreshTrig = false
						_self.isLoadMore = false
						_self.hasMore = 'more'
					})
			},
			//为数据中图片添加前缀
			addPrefixToPreviewImgs(data) {
				const prefix = this.imgPrefix;
				return data.map(item => {
					if (item.goodsPhoto && item.goodsPhoto != '') {
						item.preImg = prefix + item.goodsPhoto
					}
					return item;
				});
			},
			//详情
			doDetail(e) {
				const goods = e.currentTarget.dataset.value
				if (goods.goodsOrderStatus == '0') {
					//未售卖
					uni.navigateTo({
						url: '/pages/shop/manageGoods/manageGoods?id=' + goods.goodsId,
						animation: 'fade'
					})
				} else {
					this.msgHint = goods.goodsOrderStatus != '4' ? '商品已被买家购买,无法操作' : '商品已经出售'
					this.msgType = 'info'
					this.$refs.msg.open()
				}
			},
			//去创建软著商品
			doCreateGoods() {
				uni.navigateTo({
					url: '/pages/shop/publishGoods/publishGoods'
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.page-title-box {
		background-color: $white-color;
		position: fixed;
		/* #ifdef MP-BAIDU */
		top: 0rpx;
		/* #endif */
		/* #ifndef MP-BAIDU */
		top: 82rpx;
		/* #endif */
		left: 0;
		z-index: 3;
		width: 100%;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
		box-shadow: 0 2rpx 4rpx $bg-gray-input-color;
		display: flex;
		flex-direction: column;
	}

	.search-container-fixed {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.search-box {
		background-color: $bg-gray-color;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 15rpx 20rpx;
		border-radius: 60rpx;
		font-size: 28rpx;
	}

	.search-input {
		flex: 1;
	}

	.divider-20 {
		background-color: $bg-gray-input-color;
		min-height: 20rpx;
		margin: 0rpx -30rpx;
	}

	.title-box {
		position: relative;
		margin-top: 60rpx;
		padding: 30rpx;
	}

	.title-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 300rpx;
		background-size: cover;
	}

	.page-list-content {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.title-container {
		position: relative;
	}

	.title-hint-box {
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
	}

	.title-hint-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.title-hint-item:nth-of-type(n+2) {
		margin-left: 30rpx;
	}

	.title-hint-txt {
		margin-left: 8rpx;
		font-size: 24rpx;
		color: $text-gray-desc-color;
	}

	.hook {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		background: linear-gradient(0deg, #FFB540 0%, #FF4800 100%);
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.hook::after {
		content: "";
		display: block;
		width: 8rpx;
		height: 15rpx;
		border: solid white;
		border-width: 0 2rpx 2rpx 0;
		transform: rotate(45deg);
		position: absolute;
		top: 6rpx;
	}

	.title-func-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.title-func-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.func-img {
		width: 120rpx;
		height: 120rpx;
	}

	.func-txt {
		font-size: 28rpx;
		color: $text-color;
		margin-top: 15rpx;
	}

	.container-box {
		background-color: $white-color;
		margin: 180rpx -30rpx 0rpx -30rpx;
		padding: 30rpx;
		min-height: 80vh;
	}

	.header {
		transition: all 0.3s;
		margin-top: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.header.sticky {
		background-color: $white-color;
		box-sizing: border-box;
		box-shadow: 0 2rpx 4rpx $bg-gray-input-color;
	}

	.condition-box {
		display: flex;
		flex-direction: column;
		padding: 30rpx 0rpx 20rpx 0rpx;
	}

	.condition-item {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.condition-item-title {
		white-space: nowrap;
		font-size: 24rpx;
	}

	.list-tabs {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.tab-select {
		white-space: nowrap;
		line-height: 17px;
		border-radius: 5rpx;
		background-color: $btn-primary-color;
		color: $text-primary-deep-color;
		font-size: 24rpx;
		text-align: center;
		padding: 5rpx 15rpx;
	}

	.tab-normal {
		background-color: $bg-gray-input-color;
		color: $text-gray-hint-color;
		white-space: nowrap;
		line-height: 17px;
		border-radius: 5rpx;
		font-size: 24rpx;
		text-align: center;
		padding: 5rpx 15rpx;
	}

	.item-margin {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.item-margin:nth-of-type(n+2) {
		margin-left: 20rpx;
	}


	.content-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.content-item {
		width: 48%;
		margin-top: 20rpx;
		position: relative;
	}

	.content-item:nth-of-type(even) {
		margin-left: 20rpx;
	}

	.status-tag {
		display: inline-block;
		padding: 0rpx 20rpx;
		background-color: $primary-color;
		color: #fff;
		font-size: 22rpx;
		line-height: 40rpx;
		height: 40rpx;
		text-align: center;
		border-bottom-right-radius: 30rpx;
		border-top-right-radius: 30rpx;
		position: absolute;
		top: 0rpx;
		left: 0rpx;
	}

	.status-tag::before {
		content: '';
		position: absolute;
		left: 0rpx;
		bottom: -15rpx;
		border-width: 18rpx 18rpx 0 0rpx;
		border-style: solid;
		border-color: $primary-color transparent transparent transparent;
	}

	.special-tag {
		display: inline-block;
		padding: 0rpx 20rpx;
		background-color: $red-color;
		color: #fff;
		font-size: 22rpx;
		border-bottom-right-radius: 30rpx;
		border-top-right-radius: 30rpx;
		position: absolute;
		top: 0rpx;
		left: 0rpx;
	}

	.special-tag::before {
		content: '';
		position: absolute;
		left: 0rpx;
		bottom: -15rpx;
		border-width: 18rpx 18rpx 0 0rpx;
		border-style: solid;
		border-color: $red-color transparent transparent transparent;
	}


	.content-item-img-box {
		border-radius: 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 20rpx;
		background-color: $bg-gray-input-color;
	}

	.content-item-img {
		width: 200rpx;
		height: 260rpx;
	}

	.content-item-txt {
		font-size: 28rpx;
		margin-top: 15rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 100%;
	}

	.content-item-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.content-item-time {
		font-size: 24rpx;
		color: $text-gray-hint-color;
	}

	.content-item-price {
		color: red;
		font-size: 28rpx;
		font-weight: bold;
	}

	.create-box-show,
	.create-box-hide {
		position: fixed;
		bottom: 300rpx;
		right: 35rpx;
		color: white;
		border-radius: 10rpx;
		transition: all 0.3s ease;
		opacity: 1;
		z-index: 100;
		height: 200rpx;
		width: 200rpx;
	}

	.create-box-hide {
		opacity: 0;
		transform: translate(-50%, 20rpx);
		pointer-events: none;
	}

	.create-box-bg {
		width: 200rpx;
		height: 200rpx;
	}

	.create-txt {
		position: absolute;
		color: $white-color;
		top: 117rpx;
		left: 45rpx;
		font-size: 28rpx;
	}
</style>