novelQuick/src/pages/commonModule/complaint/index.ux

<template>
  <div class="content fd_c">
    <image class="w h-150" src="/assets/images/source/jubao.jpeg"></image>
    <div class="mgt-50 text-28 text-777 mgb-20 fd_c">
      <text>请选择举报原因：(*)</text>
    </div>
    <div class="fd_c" style="margin-top: 20px;">
      <list style="height: 200px;">
        <list-item for="(index,item) in radiolist1">
          <div class="radio-row" @click="selectRadio(index)">
            <div class="radio-outer">
              <div class="radio-inner" if="radiovalue1 === item.name"></div>
            </div>
            <text class="radio-label">{{item.name}}</text>
          </div>
        </list-item>
      </list>
      <div if="radiovalue1 === '其他意见或建议'" style="margin-bottom: 50px;">
        <div class="pdl-50 fd_c">
          <div class="input_line">
            <text class="w-260">具体情况说明</text>
            <input class="text-24 h-50" value="{{desc}}" placeholder="请补充你的投诉内容" @change="descChange"/>
          </div>
          <div class="input_line">
            <text class="w-260">联系方式</text>
            <input class="text-24 h-50" value="{{tel}}" placeholder="请填写你的联系方式" @change="telChange"/>
          </div>
        </div>
      </div>
    </div>
    <div style="justify-content: space-around;margin-top: 100px;">
      <text class="cancel" @click="cancelFn">取消</text>
      <text class="sure" @click="sureFn">确定</text>
    </div>
  </div>
</template>

<script>
import router from '@system.router'
import prompt from '@system.prompt'
export default {
  data: {
    radiolist1: [
      { name: '内容粗糙或不美观', disabled: false },
      { name: '广告展示频繁，影响体验', disabled: false },
      { name: '其他意见或建议', disabled: false }
    ],
    desc: '',
    tel: '',
    radiovalue1: '内容粗糙或不美观'
  },
    selectRadio(index) {
      this.radiovalue1 = this.radiolist1[index].name;
    },
    descChange(e) {
      this.desc = e.value;
    },
    telChange(e) {
      this.tel = e.value;
    },
    cancelFn() {
      router.back();
    },
    sureFn() {
      prompt.showToast({ message: '提交成功' });
      setTimeout(() => {
        router.replace({ uri: '/pages/commonModule/complaintResult' });
      }, 500);
    }
  }
</script>

<style>

.fd_c{
  flex-direction: column;
}
.input_line{
  border-top:1px solid #999;
  padding: 20px 100px 20px 0;
  justify-content: space-between;
  align-items: center;
}
.w-260{
  width: 260px;
}
.text-24{
  font-size: 24px;
}
.h-50{
  height: 50px;
}
.content {
  margin-top: 60px;
  border-radius: 50px;
  padding: 50px 28px;
  background: linear-gradient(to bottom, #d6e6ff, #f3f4f8);
}
.radio-row {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
.radio-outer {
  width: 32px;
  height: 32px;
  border: 2px solid #d91e0f;
  border-radius: 50%;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.radio-inner {
  width: 18px;
  height: 18px;
  background-color: #d91e0f;
  border-radius: 50%;
}
.radio-label {
  font-size: 28px;
  color: #333;
}
.cancel {
  border: 1px solid #999;
  height: 80px;
  line-height: 80px;
  width: 250px;
  text-align: center;
  border-radius: 12px;
}
.sure {
  height: 80px;
  line-height: 80px;
  width: 250px;
  text-align: center;
  border-radius: 12px;
  color: #fff;
  background-color: #f03433;
}
</style>