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

<template>
	<!-- 非遗体验 -->
	<view class="experience">
		<navbar title="非遗体验" leftClick @leftClick="$utils.navigateBack" />
		<view class="experience-img">
			<uv-swiper
			:list="banner.experience" 
			indicator
			height="420rpx"
			keyName="imageContent"></uv-swiper>
		</view>
		<view class="experience-box" v-for="(item,index) in list" 
		@click="toUrl(item)"
		:key="index">
			<view class="experience-box-img">
				<uv-image :src="item.experienceImage" radius="16rpx" width="100%" height="360rpx"
					:fade="false" />
			</view>

			<view class="experience-box-font">
				<view style="font-weight: 600;">{{ item.experienceTitle }}</view>
				<view style="font-size: 24rpx; color: #999999;">{{ item.experienceOpentime }}</view>
				<view class="experience-box-button">
					<view>线上预订</view>
				</view>
			</view>
		</view>
		
		<tabber/>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import mixinsList from '@/mixins/list.js'
	export default {
		mixins : [mixinsList],
		data() {
			return {
				mixinsListApi : 'queryExperienceList',
				list : [],
			}
		},
		computed : {
			...mapState(['banner']),
		},
		onLoad() {
		},
		onShow() {
			this.getData()
		},
		methods: {
			toUrl(item){
				this.$utils.navigateTo(`/pages_order/service/articleDetail?id=${item.id}&type=2`)
			},
		}
	}
</script>

<style scoped lang="scss">
	.experience {
		.experience-img {

		}

		.experience-box {
			width: 94%;
			margin-left: 3%;
			margin-top: 20rpx;
			background-color: #fff;
			box-shadow: 0px 0px 10rpx 0rpx #00000022;
			border-radius: 12rpx;

			.experience-box-img {
				width: 94%;
				margin-left: 3%;
				padding-top: 20rpx;
			}

			.experience-box-font {
				width: 94%;
				margin-left: 3%;
				margin-top: 30rpx;

				.experience-box-button {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					font-size: 28rpx;
					color: #fff;
					padding-bottom: 40rpx;
					
					view {
						padding: 10rpx 40rpx;
						border-radius: 40rpx;
						background-color: #C83741;
					}
				}
			}
		}
	}
</style>