sound-chain/pages/task/selectReason.vue

<template>
	<s-layout
		title="执行对象"
		navbar="normal"
		showBackButton
		:bgStyle="{ color: '#FAFAFA' }"
	>
	<view class="select_label">请选择不满意的原因</view>
	<view class="reason_list">
		<view class="reason_item" :class="{'s_reason':state.reason===item.key}" v-for="(item,index) in state.reasonList" @tap="onReason(item.key)">{{item.text}}</view>
	</view>
	<view class="submit_btn" @click="submitForm">下一步</view>
	</s-layout>
</template>

<script setup>
	import { ref, reactive } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import sheep from '@/common'
	const state = reactive({
		reasonList:[
			{ key:1, text:'1.执行的话术不对' },
			{ key:2, text:'2.我需要修改执行时间' },
			{ key:3, text:'3.我需要修改执行对象' }
		],
		reason:1,
	})
	onLoad((options) => {
	  
	})
	function onReason(key){
		state.reason = key
	}
	function submitForm(){
		if(state.reason===1||state.reason===2){
			sheep.$router.go('/pages/task/create', {
			  reason:state.reason,
			})
		}
		if(state.reason===3){
			sheep.$router.go('/pages/task/executionList', {
			  reason:state.reason,
			})
		}
	}
</script>

<style lang="scss" scoped>
	.select_label{
		font-weight: bold;
		font-size: 40rpx;
		color: #222222;
		line-height: 58rpx;
		padding: 40rpx 30rpx 70rpx;
	}
	.reason_list{
		.reason_item{
			width: 690rpx;
			padding: 30rpx;
			box-sizing: border-box;
			line-height: 40rpx;
			background: #F2F2F2;
			border-radius: 30rpx;
			margin: 30rpx auto;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
		}
		.s_reason{
			background: #35E89A;
			color: #222222;
		}
	}
	.submit_btn{
		width: 630rpx;
		height: 104rpx;
		line-height: 104rpx;
		background: #35E89A;
		border-radius: 40rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #222222;
		text-align: center;
		position: fixed;
		left: calc(50%);
		transform: translateX(-50%);
		bottom: 40rpx;
	}
</style>