Jingde-town-wechat-uniapp/pages_order/service/StudyAndPathDetail.vue

<template>
	<!-- 我要研学详情 type:1 和 遗产路径详情 type:0 -->
	<view class="page">
		<navbar :title="dict.title" leftClick @leftClick="$utils.navigateBack" />
		
		<view class="image">
			<!-- <image src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" mode="aspectFill"></image> -->
			<uv-swiper
			:list="detail.amusementImage ? 
				detail.amusementImage.split(',') : []" 
			indicator
			height="420rpx"></uv-swiper>
		</view>
		
		<view class="box">
			<view class="info">
				<view class="price" 
				v-if="detail.amusementPrice 
				&& detail.isPay == 1">
					<text>￥{{ detail.amusementPrice }}</text>起
				</view>
				<view class="title">
					{{ detail.amusementTitle }}
				</view>
				<view class="tip">
					{{ detail.amusementBrief }}
				</view>
			</view>
			
			<view class="detail">
				<view class="">
					<uv-tabs :list="tabs"
					lineColor="#B12026"
					lineHeight="8rpx"
					lineWidth="50rpx"
					:scrollable="false"
					@click="clickTabs"></uv-tabs>
				</view>
				
				<view class="content">
					<uv-parse :content="content"></uv-parse>
				</view>
			</view>
		</view>
		
		
		<StudyAndPathDetailSubmit 
		:detail="detail" 
		@getData="getData"
		@submit="toPayUrl(detail, type)"
		:isPay="detail.isPay == '1'"
		:collectonFlag="collectonFlag"
		:collectType="dict.collectType"/>
	</view>
</template>

<script>
	import StudyAndPathDetailSubmit from '../components/submit/StudyAndPathDetailSubmit.vue'
	export default {
		components : {
			StudyAndPathDetailSubmit,
		},
		data() {
			return {
				type: '',
				tabs: [
					{
						name: '关于行程'
					},
					{
						name: '注意事项'
					},
					{
						name: '出行说明'
					},
				],
				id : 0,
				detail : {},
				contentKey : ['amusementRoute', 'amusementAttention', 'amusementStatement'],
				content : '',
				dict : {},
				collectonFlag : false,
			}
		},
		onLoad(args) {
			this.type = args.type || ''
			this.id = args.id
			this.dict = this.$config.dict[args.type]
		},
		onShow() {
			this.getData()
		},
		onPullDownRefresh() {
			this.getData()
		},
		onShareAppMessage(res) {
		    return {
		      title: this.dict.title,
		      desc: this.detail.amusementTitle,
		      path: '/pages_order/service/StudyAndPathDetail?id=' + this.id
		    }
		},
		methods: {
			//点击tab栏
			clickTabs({index}) {
				this.content = this.detail[this.contentKey[index]]
			},
			getData(){
				let data = {
					amusementId : this.id,
				}
				if(uni.getStorageSync('token')){
					data.token = uni.getStorageSync('token')
				}
				this.$api('queryAmusementById', data, res => {
					uni.stopPullDownRefresh()
					if(res.code == 200){
						this.detail = res.result.travelAmusement
						this.collectonFlag = res.result.collectonFlag
						this.content = this.detail[this.contentKey[0]]
					}
				})
			},
			toPayUrl(item, type){
				uni.navigateTo({
					url: `/pages_order/order/orderSubscribe?type=${type}&id=${item.id}`
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.page{
	image{
		width: 100%;
		height: 100%;
	}
	.image{
		width: 100%;
		height: 400rpx;
	}
	.box{
		margin-top: -40rpx;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		overflow: hidden;
		position: relative;
		.info{
			background-color: #fff;
			padding: 40rpx;
			.price{
				padding: 20rpx 0;
				font-size: 22rpx;
				text{
					font-size: 38rpx;
					color: $uni-color;
					font-weight: 900;
				}
			}
			.title{
				font-weight: 900;
				padding-bottom: 20rpx;
				font-size: 28rpx;
			}
			.tip{
				font-size: 22rpx;
				padding-bottom: 20rpx;
				line-height: 40rpx;
			}
		}
		.detail{
			margin-top: 20rpx;
			background-color: #fff;
			.content{
				padding: 40rpx;
			}
		}
	}
}
</style>