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 :src="info.recovery_image" style="width: 100%; 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="price" v-else>免支付预约</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="b" v-if="type== 2">{{info.recovery_name}}</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">
				<view class="a">服务</view>
				<view class="b">优质服务全程跟踪</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" v-html="info.content"></view>
		</view>
		<view class="recycling-fd">
			<view class="a">
				<image :src="$picUrl+'/static/news/icon-recycling-06.png'"></image>客服
				<button open-type="contact"></button>
			</view>
			<view class="c" v-if="type== 1" @click="openPage(3)">立即预约</view>
			<view class="c" v-else @click="openPage(5)">立即预约</view>
		</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'
	export default{
		data(){
			return {
				addressInfo: {},
				tabIndex: 0,
				isShow: false,
				selector: ["门店回收","上门回收","邮寄回收"],
				type: 1,
				info: {},
				storeInfo: {},
				isShow1: false,
				storeList:[],
				storeIndex: -1,
			}
		},
		onLoad(o) {
			let info = uni.getStorageSync("getInfo");
			if(info.content){
				info.content.replace(/style=""/g,'').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("AccessToken")){
				this.getList()
			}
		},
		methods: {
			//获取门店列表
			async getList() {
				const { status, data } = await newFunApi.storeList({
					platform: 'H5'
				})
				if(status == 200){
					this.storeList = data.list
				}
			},
			openPage(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
				}
			},
			tabMItem(a,i){
				this.storeInfo = a;
				this.storeIndex = i;
				this.isShow1 = false
			},
			confirm(e){
				this.tabIndex = e[0]
			},
		}
	}
</script>
<style lang="scss" scoped>
	.recycling{
		padding-bottom: 130rpx;
		overflow: hidden;
		&-classify{
				width: 100%;
				overflow: hidden;
				&-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: 262rpx;
			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: 24rpx;
					font-weight: 400;
					color: #C4C4C4;
				}
				.b{
					flex: 1;
					font-size: 24rpx;
					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;
				image{
					width: 40rpx;
					height: 40rpx;
					display: block;
					margin: 0 auto;
				}
			}
			.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>