novelAD/pages/commonModule/complaint.vue

<template>
	<view class="content">
		<image class="w h-150" src="/static/image/source/jubao.jpeg"></image>
		<view class="mgt-50 text-28 text-777 mgb-20">
			请选择举报原因：(<text class="text-fc2419">*</text>)
		</view>
		<up-radio-group
		    v-model="radiovalue1"
		    placement="column"
			activeColor="#d91e0f"
		    @change="groupChange"
		  >
		    <up-radio
		      :customStyle="{marginBottom: '8rpx'}"
		      v-for="(item, index) in radiolist1"
		      :key="index"
		      :label="item.name"
		      :name="item.name"
		      @change="radioChange"
		    >
		    </up-radio>
			<view v-if="radiovalue1 == '其他意见或建议'">
			  <view class="pdl-50">
				  <view class="border-top pdy-20 pdr-100 flex jc_between ai_center">
					  <view class="w-260">具体情况说明</view>
					  <up-input v-model="desc" class="text-24" :customStyle="{ height: '50rpx' }" fontSize="12"
					   placeholder="请补充你的投诉内容"></up-input>
				  </view>
				  <view class="border-top pdy-20 pdr-100 flex jc_between ai_center">
					  <view class="w-260">联系方式</view>
					  <up-input v-model="tel" class="text-24" :customStyle="{ height: '50rpx' }" fontSize="12"
					   placeholder="请填写你的联系方式"></up-input>
				  </view>
			  </view>
			</view>
		  </up-radio-group>
		  <view class="flex jc_around mgt-50">
			  <view class="cancel" @click="cancelFn">取消</view>
			  <view class="sure" @click="sureFn">确定</view>
		  </view>
	</view>
</template>

<script setup>
import { ref,reactive } from 'vue';
// 基本案列数据
const radiolist1 = reactive([
  {
    name: '内容粗糙或不美观',
    disabled: false,
  },
  {
    name: '广告展示频繁，影响体验',
    disabled: false,
  },
  {
    name: '其他意见或建议',
    disabled: false,
  },
]);
const desc = ref()
const tel = ref()
const cancelFn = ()=>{
	uni.navigateBack()
}
const sureFn = ()=>{
	uni.showToast({
		title:'提交成功',
		icon:'none'
	})
	setTimeout(()=>{
		uni.navigateTo({
			url:'/pages/commonModule/complaintResult'
		})
	},500)
}
const radiovalue1 = ref('内容粗糙或不美观');
const groupChange = (n) => {
  console.log('groupChange', n);
};
const radioChange = (n) => {
  console.log('radioChange', n);
};
</script>

<style lang='scss' scoped>
	.content{
		margin-top: 60rpx;
		border-radius: 50rpx 50rpx 0 0;
		min-height: 100vh;
		padding: 50rpx 28rpx;
		background: linear-gradient(to bottom, #d6e6ff, #f3f4f8);
	}
	.cancel{
		border: 1rpx solid #999;
		height: 80rpx;
		line-height: 80rpx;
		width: 250rpx;
		text-align: center;
		border-radius: 12rpx;
	}
	.sure{
		height: 80rpx;
		line-height: 80rpx;
		width: 250rpx;
		text-align: center;
		border-radius: 12rpx;
		color: #fff;
		background: #f03433;
	}
</style>