yanzong_qianduan/pages/news/recycling/detail.vue

<template>
	<view class="recycling">
		<view class="recycling-swiper">
			<!-- <u-swiper :list="list" mode="number" height="750" indicator-pos="bottomRight"></u-swiper> -->
			<image v-if="type==1" :src="info.server_image" mode="widthFix" style="width: 100%; max-height: 750rpx;">
			</image>
			<image v-else :src="info.recovery_image" mode="widthFix" style="width: 100%; max-height: 750rpx;"></image>
		</view>
		<view class="recycling-hd">
			<view class="a">
				<view class="price" v-if="type== 1">￥<text>{{info.server_price}}</text></view>
				<view class="b" v-if="type== 2">{{info.recovery_name}}</view>
				<!-- <view class="exchange">已售{{info.sold}}</view> -->
			</view>
			<view class="b" v-if="type== 1">{{info.server_name}}</view>
			<!-- <view class="c" v-if="type== 1">{{info.server_category}}</view> -->
			<!-- <view class="c" v-if="type== 2">{{info.recovery_category}}</view> -->
			<view class="d">
				<view class="l">
					<image :src="$picUrl+'/static/news/icon-recycling-05.png'"></image>24小时客服
				</view>
				<view class="l">
					<image :src="$picUrl+'/static/news/icon-recycling-05.png'"></image>未服务全额退
				</view>
				<view class="l">
					<image :src="$picUrl+'/static/news/icon-recycling-05.png'"></image>未额外收费
				</view>
				<view class="l">
					<image :src="$picUrl+'/static/news/icon-recycling-05.png'"></image>全程保障
				</view>
			</view>
		</view>
		<view class="recycling-select">
			<view class="item">
				<view class="a">已选</view>
				<view class="b" v-if="type == 1">上门服务</view>
				<view class="b" v-else @click="openPage(2)">{{selector[tabIndex]}}
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="item" v-if="type == 2">
				<view class="a">门店</view>
				<view class="b" @click="openPage(4)">
					{{storeIndex>=0?storeList[storeIndex].shop_name:'请选择门店'}}
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="item" v-if="serviceContent">
				<view class="a">服务</view>
				<view class="b" @click="getCarouselList()">
					<view v-html="serviceContent"></view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view class="recycling-chat" hidden>
			<view class="a">
				<view class="l">用户评价<text>（30）</text></view>
				<view class="r">查看更多 <u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="b">
				<view class="item">全部12</view>
				<view class="item">沟通愉快4</view>
			</view>
			<view class="c">
				<view class="item" v-for="i in 5" :key="i">
					<view class="name">
						<image :src="$picUrl+'/static/news/avater.png'"></image>Shark特
					</view>
					<view class="desc">非常棒，讲解细致，下次还来！</view>
				</view>
			</view>
		</view>
		<view class="recycling-bd">
			<view class="title">产品详情</view>
			<view class="conten" style="margin-top: 20rpx;" v-html="info.content"></view>
		</view>
		<view class="recycling-fd">
			<view class="a" v-if="isToken">
				<image :src="$picUrl+'/static/news/icon-recycling-06.png'"></image>客服
				<button open-type="contact"></button>
			</view>
			<view class="a" v-else @click="openPage(6)">
				<image :src="$picUrl+'/static/news/icon-recycling-06.png'"></image>客服
			</view>
			<!-- 10普通用户20会员30分销商40店主 -->
			<!-- <template v-if="isToken == false || userInfo.user_type <= 20"> -->
			<template v-if="isToken == false || userInfo.user_type <= 100">
				<view class="c" v-if="type== 1" @click="openPage(3)">立即预约</view>
				<view class="c" v-else @click="openPage(5)">立即预约</view>
			</template>
			<!-- <template v-else>
				<view class="c">只对普通用户与会员用户预约</view>
			</template> -->
		</view>
		<u-picker v-model="isShow" mode="selector" :range="selector" @confirm="confirm"></u-picker>
		<!-- 选择门店 -->
		<u-popup v-model="isShow1" mode="bottom" border-radius="12" mask-close-able="false" closeable>
			<view class="recycling-classify">
				<view class="recycling-classify-hd">门店列表</view>
				<view class="recycling-classify-bd">
					<scroll-view scroll-y class="m">
						<view class="item" v-for="(a,i) in storeList" :key="i" @click="tabMItem(a,i)">
							<view :class="storeIndex == i?'item-on':''">{{a.shop_name}}</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import * as newFunApi from '@/api/newFun'
	import * as Api from '@/api/help'
	export default {
		data() {
			return {
				addressInfo: {},
				tabIndex: 0,
				isShow: false,
				selector: ["门店回收", "上门回收", "邮寄回收"],
				type: 1,
				info: {},
				storeInfo: {},
				isShow1: false,
				storeList: [],
				storeIndex: -1,
				isToken: false,
				userInfo: {},
				serviceContent: '优质服务全程跟踪'
			}
		},
		onLoad(o) {
			let info = o.info ? JSON.parse(o.info) : uni.getStorageSync("getInfo");
			uni.setStorageSync("getInfo",info)
			if (info.content) {
				info.content = info.content.replace(/<img src=/g, '<img style="width: 100%; display:block" src=')
			}
			this.info = info;
			this.type = o.type;
			uni.setNavigationBarTitle({
				title: o.type == 1 ? "服务详情" : '旧物回收'
			})
		},
		onShow() {
			if (uni.getStorageSync("userInfo").user_id) {
				this.getList() 
				this.userInfo = uni.getStorageSync("userInfo");
				this.isToken = true;
			} else {
				this.userInfo = {}
				this.isToken = false;
			}
			this.getCarouselList()
			uni.removeStorageSync("yuyueTime")

		},
		/**
		 * 分享当前页面
		 */
		onShareAppMessage() {
			const app = this
			// 构建页面参数
			uni.setStorageSync("getInfo", app.info)
			return {
				title: app.type == 2 ? app.info.recovery_name : app.info.server_name,
				imageUrl: app.type == 2 ? app.info.recovery_image : app.info.server_image,
				path: '/pages/news/recycling/detail?type=' + app.type + '&info=' + JSON.stringify(app.info),
			}
		},

		/**
		 * 分享到朋友圈
		 * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
		 * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
		 */
		onShareTimeline() {
			const app = this
			uni.setStorageSync("getInfo", app.info)
			return {
				title: app.type == 2 ? app.info.recovery_name : app.info.server_name,
				imageUrl: app.type == 2 ? app.info.recovery_image : app.info.server_image,
				path: '/pages/news/recycling/detail?type=' + app.type + '&info=' + JSON.stringify(app.info),
			}
		},
		methods: {
			// 获取预售规则
			getCarouselList(type) {
				const app = this;
				Api.getAgreement({
						type: 'recycling_services'
					})
					.then(result => {
						let content = result.data.detail ? result.data.detail.content : '';
						if (content) {
							content = content.replace(/style=""/g, '').replace(/<img src=/g,
								'<img style="width: 100%; display:block" src=')
						}
						this.serviceContent = this.setText(content)
					})
					.finally(() => app.isLoading = false)
			},
			setText(val) {
				if (val != null && val != "") {
					var re1 = new RegExp("<.+?>|&.+?;", "g"); //匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
					var msg = val.replace(re1, ""); //执行替换成空字符
					msg = msg.replace(/\s/g, ""); //去掉所有的空格（中文空格、英文空格都会被替换）
					msg = msg.replace(/[\r\n]/g, ""); //去掉所有的换行符
					return msg.substr(0, 100); //获文本文字内容的前100个字符
				} else return ''
			},
			//获取门店列表
			async getList() {
				const {
					status,
					data
				} = await newFunApi.storeList({
					platform: 'H5'
				})
				if (status == 200) {
					this.storeList = data.list
				}
			},
			openPage(index) {
				console.log(index)
				if (index == 2) {
					this.isShow = true;
				} else if (index == 3) {
					if (!uni.getStorageSync("AccessToken")) {
						uni.navigateTo({
							url: "/pages/login/index"
						})
						return;
					}
					uni.navigateTo({
						url: "/pages/news/recycling/confirm?tabIndex=" + this.tabIndex + "&id=" + this.info
							.server_id + "&type=" + this.type
					})
				} else if (index == 5) {
					if (!uni.getStorageSync("AccessToken")) {
						uni.navigateTo({
							url: "/pages/login/index"
						})
						return;
					}
					if (this.storeInfo && this.storeInfo.shop_id) {
						uni.setStorageSync("storeHsInfo", this.storeInfo)
						uni.navigateTo({
							url: "/pages/news/recycling/confirm1?tabIndex=" + this.tabIndex + "&id=" + this.info
								.recovery_id + "&type=" + this.type
						})
					} else {
						uni.showToast({
							title: '请选择门店',
							icon: "none",
						})
					}

				} else if (index == 4) {
					if (!uni.getStorageSync("AccessToken")) {
						uni.navigateTo({
							url: "/pages/login/index"
						})
						return;
					}
					this.isShow1 = true
				} else if (index == 6) {
					uni.navigateTo({
						url: "/pages/login/index"
					})
				}
			},
			tabMItem(a, i) {
				this.storeInfo = a;
				this.storeIndex = i;
				this.isShow1 = false
			},
			confirm(e) {
				this.tabIndex = e[0]
			},
		}
	}
</script>
<style lang="scss" scoped>
	.conten {
		overflow: hidden;

		::v-deep img {
			width: 100% !important;
		}
	}

	.recycling {
		padding-bottom: 130rpx;
		overflow: hidden;

		&-classify {
			width: 100%;
			overflow: hidden;

			padding-bottom: 30rpx;

			&-hd {
				padding: 30rpx 60rpx;
				position: relative;
				font-size: 32rpx;
				font-weight: 500;
				color: #303030;
				text-align: center;

				.a {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-weight: 500;
					color: #FF624F;
					position: absolute;
					top: 30rpx;
					left: 40rpx;
					z-index: 2;
				}
			}

			&-bd {
				overflow: hidden;
				display: flex;
				align-items: flex-start;

				.l {
					width: 210rpx;
					height: 560rpx;
					background-color: #F7F8FA;

					.item {
						text-overflow: ellipsis;
						overflow: hidden;
						height: 70rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #303030;
						white-space: nowrap;
						line-height: 70rpx;
						padding-left: 30rpx;
						box-sizing: border-box;
						text-align: left;

						&-on {
							background-color: #fff;
							font-weight: 500;
						}
					}
				}

				.m {
					width: 100%;
					text-align: center;
					max-height: 560rpx;

					.item {
						text-overflow: ellipsis;
						overflow: hidden;
						height: 70rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #303030;
						white-space: nowrap;
						line-height: 70rpx;
						padding-left: 80rpx;
						box-sizing: border-box;
						text-align: left;

						&-on {
							color: #FF624F;
						}
					}
				}

				.r {
					width: 540rpx;
					height: 560rpx;

					.item {
						text-overflow: ellipsis;
						overflow: hidden;
						height: 70rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #303030;
						white-space: nowrap;
						line-height: 70rpx;
						padding-left: 80rpx;
						box-sizing: border-box;

						&-on {
							color: #FF624F;
						}
					}
				}
			}
		}


		&-hd {
			width: 720rpx;
			min-height: 80rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			padding: 25rpx;
			box-sizing: border-box;

			.a {
				display: flex;
				align-items: baseline;
				justify-content: space-between;

				.price {
					font-size: 32rpx;
					font-weight: 500;
					color: #ED2B00;

					text {
						margin-left: 10rpx;
						font-size: 48rpx;
					}
				}

				.exchange {
					font-size: 24rpx;
					font-weight: 400;
					color: #989898;
				}
			}

			.b {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 43rpx;
			}

			.c {
				font-size: 28rpx;
				color: #989898;
				line-height: 43rpx;
			}

			.d {
				display: flex;
				align-items: center;
				font-size: 20rpx;
				font-weight: 400;
				color: #CDA55E;
				margin-top: 10rpx;

				.l {
					display: flex;
					align-items: center;
					margin-right: 20rpx;
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		&-select {
			width: 720rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			padding: 15rpx 25rpx;
			box-sizing: border-box;

			.item {
				padding: 12rpx 0;
				display: flex;
				align-items: center;
				overflow: hidden;

				.a {
					width: 100rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: #C4C4C4;
				}

				.b {
					flex: 1;
					font-size: 30rpx;
					font-weight: 400;
					color: #3D3D3D;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}

		&-chat {
			width: 720rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			padding: 15rpx 25rpx;
			box-sizing: border-box;

			.a {
				display: flex;
				align-items: baseline;
				justify-content: space-between;
				font-size: 32rpx;
				font-weight: 500;
				color: #000000;
				padding-top: 10rpx;

				.l {
					text {

						font-size: 28psx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #909090;
					}
				}

				.r {
					flex: 1;
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-weight: 400;
					color: #909090;
				}
			}

			.b {
				overflow: hidden;
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				padding: 10rpx 0;

				.item {
					line-height: 50rpx;
					background: #FFE7E7;
					border-radius: 8rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #515151;
					padding: 0 20rpx;
					margin-right: 20rpx;
					margin-top: 20rpx;
				}
			}

			.c {
				.item {
					padding: 20rpx 0;
					border-top: 1px solid #f3f3f3;

					&:first-child {
						border-top: 1px solid #FFFFFF;
					}

					overflow: hidden;

					.name {
						font-size: 28rpx;
						font-weight: 400;
						color: #515151;
						display: flex;
						align-items: center;

						image {
							width: 75rpx;
							height: 75rpx;
							border-radius: 50%;
							margin-right: 20rpx;
						}
					}

					.desc {
						font-size: 28rpx;
						font-weight: 400;
						color: #515151;
						line-height: 45rpx;
						margin-top: 20rpx;
					}
				}

			}
		}

		&-bd {
			width: 720rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			padding: 25rpx 25rpx;
			box-sizing: border-box;

			.a {
				font-size: 32rpx;
				font-weight: 500;
				color: #000000;
			}

			.b {
				width: 100%;
				padding: 20rpx 0;

				image {
					width: 100%;
				}
			}
		}

		&-fd {
			width: 100%;
			height: 120rpx;
			background-color: #FFFFFF;
			padding: 25rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 99;

			.a {
				width: 100rpx;
				text-align: center;
				font-size: 20rpx;
				font-weight: 400;
				color: #3D3D3D;
				position: relative;

				image {
					width: 40rpx;
					height: 40rpx;
					display: block;
					margin: 0 auto;
				}

				button {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					z-index: 2;
					opacity: 0;
				}
			}

			.b {
				width: 200rpx;
				height: 78rpx;
				line-height: 78rpx;
				background: #FF9E2B;
				border-radius: 78rpx;
				text-align: center;
				font-size: 24rpx;
				font-weight: 600;
				color: #FFFFFF;
				margin-left: 20rpx;
			}

			.c {
				width: 500rpx;
				height: 78rpx;
				line-height: 78rpx;
				background: linear-gradient(102deg, #FE5E06 0%, #F3221A 100%);
				border-radius: 78rpx;
				text-align: center;
				font-size: 24rpx;
				font-weight: 600;
				color: #FFFFFF;
				margin-left: 20rpx;
			}
		}
	}
</style>