yanzong_qianduan/pages/news/recycling/index.vue

<template>
	<view class="recycling">
		<view class="recycling-navbar">
			<u-navbar title="旧物回收" :border-bottom="false" :background="isScroll?background:background1"></u-navbar>
		</view>
		<view class="recycling-hd"></view>
		<view class="recycling-notice">
			<image :src="$picUrl+'/static/news/icon-volume.png'"></image>
			<view class="notice">
				<u-notice-bar mode="horizontal" :volume-icon="false" bg-color="#fff" color="#212121" :list="list">
				</u-notice-bar>
			</view>
		</view>
		<view class="recycling-bd">
			<scroll-view scroll-x class="tab">
				<view class="item" v-for="(a,i) in list1" :class="tabIndex==i?'item-on':''" @click="tabItem(i,a)">
					<image :src="a.image_url"></image>
					{{a.name}}
				</view>
			</scroll-view>
			<view class="list">
				<view class="item" v-for="(a,i) in list2" :key="i" @click="openPage(a)">
					<image :src="a.recovery_image"></image>
					<view class="info">
						<view class="title">{{a.recovery_name}}</view>
						<view class="desc">{{a.recovery_category}}</view>
						<view class="price">
							<view class="btn">免支付预约</view>
							<view class="num">已售{{a.sold}}+ 好评{{a.comment_rate}}%</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as newFunApi from '@/api/newFun'
	import * as Api from '@/api/help'
	export default {
		data() {
			return {
				isScroll: true,
				tabIndex: 0,
				background: {
					background: 'transparent',
				},
				background1: {
					background: '#fff',
				},
				server_name: "",
				list: [],
				list1: [],
				list2: [],
			}
		},
		onLoad(o) {
			this.tabIndex = o.index ? o.index : 0
			this.getList();
			this.getCarousel()
		},
		onPageScroll(e) {
			if (e.scrollTop <= 44) {
				this.isScroll = true;
			} else {
				this.isScroll = false;
			}
		},
		methods: {
			// 获取预售规则
			getCarousel(type) {
				const app = this;
				app.list = []
				Api.getAgreement({
						type: 'serve_notice'
					})
					.then(result => {
						if (result.data.detail.content) {
							app.list.push(this.formatRichText(result.data.detail.content))
						}
					})
					.finally(() => app.isLoading = false)
			},
			formatRichText(value) {
				value = value.replace(/\s*/g, ""); //去掉空格
				value = value.replace(/<[^>]+>/g, ""); //去掉所有的html标记
				value = value.replace(/↵/g, ""); //去掉所有的↵符号
				value = value.replace(/[\r\n]/g, "") //去掉回车换行
				value = value.replace(/&nbsp;/g, "") //去掉空格
				value = this.convertIdeogramToNormalCharacter(value);
				return value
			},
			convertIdeogramToNormalCharacter(val) {
				const arrEntities = {
					'lt': '<',
					'gt': '>',
					'nbsp': ' ',
					'amp': '&',
					'quot': '"'
				};
				return val.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) {
					return arrEntities[t];
				});
			},
			/**
			 * 获取列表
			 */
			async getList() {
				let {
					status,
					message,
					data
				} = await newFunApi.recoveryCategoryList({});
				if (status == 200) {
					this.list1 = data.list
					this.getGoodsList();
				}
			},
			/**
			 * 获取商品列表
			 */
			async getGoodsList() {
				let {
					status,
					message,
					data
				} = await newFunApi.recoveryRecoveryList({
					server_name: this.server_name,
					category_id: this.list1.length > 0 ? this.list1[this.tabIndex].category_id : ""
				});
				if (status == 200) {
					this.list2 = data.list
				}
			},
			openPage(a) {
				uni.setStorageSync("getInfo", a)
				uni.navigateTo({
					url: "/pages/news/recycling/detail?type=2&id=" + a.recovery_id
				})
			},
			tabItem(index) {
				this.tabIndex = index;
				this.getGoodsList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recycling {
		background: url(https://www.royaum.com.cn/static/news/recycling-bg.png) center top no-repeat;
		background-size: 100% auto;

		&-hd {
			height: 300rpx;
		}

		&-notice {
			border-radius: 30rpx 30rpx 0 0;
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 0 30rpx;

			image {
				width: 50rpx;
				height: 50rpx;
				display: block;
			}

			.notice {
				width: 500rpx;
				flex: 1;
			}
		}

		&-bd {
			padding: 20rpx 0 30rpx 36rpx;
			overflow: hidden;
			background-color: #fff;

			.tab {
				width: 100%;
				white-space: nowrap;

				.item {
					width: 165rpx;
					display: inline-block;
					text-align: center;
					font-size: 24rpx;
					font-weight: 500;
					color: #4F4F4F;
					position: relative;
					padding-bottom: 30rpx;

					image {
						width: 60rpx;
						height: 60rpx;
						display: block;
						margin: 0 auto;
						margin-bottom: 12rpx;
					}

					&-on {
						color: #FF4949;

						&::after {
							content: "";
							width: 50rpx;
							height: 6rpx;
							background: #FF4949;
							border-radius: 6rpx;
							position: absolute;
							left: 50%;
							bottom: 10rpx;
							z-index: 1;
							margin-left: -25rpx;
						}
					}
				}
			}

			.list {
				width: 100%;
				overflow: hidden;

				.item {
					padding: 28rpx 0;
					overflow: hidden;
					display: flex;
					border-top: 1px solid #F2F2F2;

					&:first-child {
						border-top-color: #fff;
					}

					image {
						width: 234rpx;
						height: 222rpx;
						border-radius: 12rpx;
						margin-right: 20rpx;
					}

					.info {
						width: 440rpx;
						white-space: nowrap;

						.title {
							overflow: hidden;
							font-size: 28rpx;
							text-overflow: ellipsis;
							font-weight: 600;
							color: #2C2C2C;
						}

						.desc {
							overflow: hidden;
							font-size: 28rpx;
							text-overflow: ellipsis;
							margin-top: 10rpx;
							color: #888888;
							height: 124rpx;
						}

						.price {
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 24rpx;
							font-weight: 400;
							color: #888888;

							.btn {
								width: 140rpx;
								line-height: 44rpx;
								text-align: center;
								background: #FFFFFF;
								border-radius: 8rpx;
								border: 1rpx solid #FF4949;
								font-size: 24rpx;
								font-weight: 400;
								color: #FF4949;
							}
						}

					}
				}
			}
		}
	}
</style>