FE-V2-XCX/pages_manage/workbench/laboratory/word.vue

<!-- 播放文字 -->
<template>
    <view id="word">
		<view class="title-p">广播内容</view>
        <textarea placeholder="请输入广播内容" v-model="text"></textarea>
		<view class="radio-box">
			<view class="radio-title">播报方式</view>
			<radio-group @change="radioChange" class="radio-max-button">
				<label class="radio-button" v-for="(item, index) in items" :key="item.value">
					<radio :value="item.value" color="#007AFF" :checked="index === current" />{{item.name}}
				</label>
			</radio-group>
		</view>
        <view class="button-view" @click="voiceButton">确定</view>
    </view>
</template>

<script>
    import { voice } from '@/api/index.js'
    export default {
        data() {
            return {
                itemData:{},
                text:"",
				type:"",
				items:[
					{
						name:"文字",
						value:"1"
					},
					{
						name:"音频",
						value:"2"
					},
				]
            }
        },
        onLoad(option) {
            this.itemData = JSON.parse(decodeURIComponent(option.item));
        },
        methods: {
			radioChange(e){
				console.log("e",e)
				this.type = e.detail.value;
			},
            voiceButton(){
                let self = this;
				if(!this.text){
					uni.showToast({
						title: '请输入广播内容',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				if(!this.type){
					uni.showToast({
						title: '请选择播报方式',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
                uni.showModal({
                    // title: '确认要退出吗?',
                    content: '确认播放吗?',
                    cancelColor:"#999",
                    confirmColor:"#0183FA",
                    success: function (res) {
                        if (res.confirm) {
                            self.voice();
                            console.log('用户点击确定');
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            },
            //播放
            async voice(){
                let obj = {
                    txt:this.text,
					type:this.type
                };
                const {data} = await voice(this.itemData.id,obj);
                if(data.code == 200){
                    uni.showToast({
                        title: '播放成功',
                        icon:"none",
                        mask:true,
                        duration: 2000
                    });
                    setTimeout(function(){
                        uni.navigateBack();
                    },2000);
                }
            },
        }
    }
</script>

<style lang="stylus" scoped>
    #word{
        height:100%;
        background #fff
        overflow hidden
		.title-p{
            font-size:28rpx;
			margin:20rpx 0 20rpx 20rpx;
			line-height:60rpx;
		}
        textarea{
            width:670rpx;
            height:200rpx;
            margin:20rpx 20rpx 0;
            font-size:26rpx;
            border: 1rpx solid #E0E0E0;
            border-radius:10rpx;
            padding:20rpx;
        }
		.radio-box{
            font-size:26rpx;
			.radio-title{
				font-size:28rpx;
				margin:20rpx 0 20rpx 20rpx;
				line-height:60rpx;
			}
			.radio-max-button{
				display flex
				margin:0 100rpx;
				.radio-button{
					flex:1;
					margin-left:75rpx;
					font-size:26rpx;
				}
			}
		}
        .button-view{
            width: 600rpx;
            height: 80rpx;
            background: #0183FA;
            border-radius: 20rpx;
            font-size:30rpx;
            line-height:80rpx;
            text-align center;
            color: #fff;
            margin:90rpx auto;
        }
    }
</style>