problemAdd.vue 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <template>
  2. <view class="center">
  3. <view class="login_name"><input class="uni-input" v-model="title" focus placeholder="标题" /></view>
  4. <view class="text">
  5. <textarea @input="number" v-model="content" maxlength="300" focus placeholder="详细描述您的问题,老师会根据您的反馈及时解答哦"></textarea>
  6. <view class="js">{{num}}/300</view>
  7. </view>
  8. <view class="buttom" @click="nav('/pages/course/success')">
  9. 提交
  10. </view>
  11. </view>
  12. </template>
  13. <script>
  14. import { setProblem } from '@/api/problem.js'
  15. export default {
  16. data(){
  17. return{
  18. title:'',
  19. content:'',
  20. num: 0
  21. }
  22. },
  23. methods: {
  24. nav(url){
  25. setProblem({
  26. title: this.title,
  27. content: this.content
  28. }).then(e =>{
  29. uni.navigateTo({
  30. url:url
  31. })
  32. })
  33. },
  34. number() {
  35. this.num = this.content.length;
  36. }
  37. }
  38. }
  39. </script>
  40. <style lang="scss">
  41. .login_name {
  42. width: 90%;
  43. margin: 30rpx auto;
  44. .uni-input{
  45. padding:20rpx;
  46. background: #fff;
  47. height: 80rpx;
  48. }
  49. }
  50. .text{
  51. position: relative;
  52. width: 90%;
  53. margin: 30rpx auto;
  54. height: 430rpx;
  55. font-size: 30rpx;
  56. font-weight: 500;
  57. background: #fff;
  58. color: #999999;
  59. padding: 30rpx;
  60. .js{
  61. position: absolute;
  62. right: 50rpx;
  63. bottom: 24rpx;
  64. }
  65. textarea {
  66. height: 100%;
  67. width: 100%;
  68. }
  69. }
  70. .buttom{
  71. margin: 114rpx auto 0;
  72. width: 560rpx;
  73. height: 90rpx;
  74. background: #1CC7C7;
  75. border-radius: 45px;
  76. text-align: center;
  77. line-height: 90rpx;
  78. color: #FFFFFF;
  79. }
  80. </style>