Jingde-town-wechat-uniapp/components/tourGuide/locations.vue

<template>
	<view class="Locations">
		
		<view class="Locations-list">
			<view class="main">
				<image 
				class="main-image"
				src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" 
				mode="aspectFill"></image>
				
				<view class="info">
					<view class="title">
						陶阳里景区
					</view>
					<view class="tips">
						6个遗产点
					</view>
					<view class="btn">
						<image src="/static/image/tourGuide/a.png" 
						mode=""></image>
						<text class=""
						@click="textToSpeech">
							语音讲解
						</text>
					</view>
				</view>
				
				<view class="controls">
					<view class="f">
						<image src="/static/image/tourGuide/f.png" mode=""></image>
					</view>
					<view class="btn"
					@click="show = !show">
						<text class="">
							{{ show ? '收起' : '展开' }}
						</text>
						<uv-icon
						:name="show ? 'arrow-up' : 'arrow-down'"
						size="30rpx"></uv-icon>
					</view>
				</view>
			</view>
			<view class="list"
			v-if="show">
				<view class="main"
				v-for="(item, index) in 10"
				:key="index">
					<image 
					class="main-image"
					src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" 
					mode="aspectFill"></image>
					
					<view class="info">
						<view class="title">
							陶阳里景区
						</view>
						<view class="tips">
							6个遗产点
						</view>
					</view>
					
					<view class="controls">
						<view class="f">
							<image 
							
							src="/static/image/tourGuide/f.png" mode=""></image>
						</view>
						<view class="f">
							<image 
							@click="textToSpeech"
							src="/static/image/tourGuide/a.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// var plugin = requirePlugin("WechatSI")
	
	// "plugins" : {
	//     "WechatSI" : {
	//         "version" : "0.3.1",
	//         "provider" : "wx069ba97219f66d99"
	//     }
	// }
	export default {
		data() {
			return {
				show : true,
				context : uni.createInnerAudioContext(),
			}
		},
		methods: {
			textToSpeech(){
				console.log('textToSpeech');
				
				let self = this
				
				plugin.textToSpeech({
				    lang: "zh_CN",
				    tts: true,
				    content: "景德镇市陶阳里御窑景区位于景德镇的城市中心地带，北起瓷都大桥、昌江大道，南至昌江大桥、西至沿江西路，东至莲社路、胜利路。 自宋以来，景德镇先民“沿河建窑，因窑成市”，渐呈“码头—民窑—老街—里弄—御窑”聚落的历史空间和瓷业肌理，形成了世界建筑史上绝无仅有的老城格局，成就了中国“东方瓷国”的盛誉，陶瓷成为了中国走向世界，世界认识中国的文化符号。这里是景德镇历史上制瓷业的中心、原点和高峰，是“一带一路”海上陶瓷之路的零公里起点，是研究皇家御窑制瓷历史文化和景德镇陶瓷技艺，讲好景德镇故事，传播中国声音的“窗口”和“名片”。",
				    success: function(res) {
						self.context.src = res.filename;
						self.context.play()
				    },
				    fail: function(res) {
				        console.log("fail tts", res)
				    }
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.Locations{
	.Locations-list{
		.main{
			display: flex;
			margin: 20rpx;
			.main-image{
				width: 150rpx;
				height: 150rpx;
				border-radius: 20rpx;
			}
			.info{
				margin-left: 20rpx;
				.title{
					font-size: 30rpx;
					font-weight: 900;
				}
				.tips{
					font-size: 24rpx;
					color: #999999;
					margin-top: 10rpx;
				}
			}
			.controls{
				margin-left: auto;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.f{
					image{
						width: 50rpx;
						height: 50rpx;
					}
				}
			}
			.btn{
				padding: 10rpx;
				font-size: 22rpx;
				color: $uni-color;
				border: 1rpx solid $uni-color;
				background-color: #F4E4C4;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 10rpx;
				border-radius: 15rpx;
				image{
					width: 25rpx;
					height: 25rpx;
				}
				text{
					margin: 0 10rpx;
				}
			}
		}
		.list{
			padding-left: 40rpx;
			.main{
				align-items: center;
				.main-image{
					width: 140rpx;
					height: 140rpx;
				}
				.controls{
					flex-direction: row;
					.f{
						margin: 30rpx;
						image{
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}
		}
	}
}
</style>