appraise.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <template>
  2. <mobile-frame>
  3. <view class="info">
  4. <view class="one">
  5. <uni-forms ref="form" :modelValue="form" :rules="rules" label-width="auto">
  6. <uni-forms-item label="评论内容" name="content">
  7. <uni-easyinput type="textarea" v-model="form.content" placeholder="请输入评论内容" />
  8. </uni-forms-item>
  9. <uni-forms-item label="上传评论图片" name="file">
  10. <upload :list="file" name="file" :count="6" @uplSuc="uplSuc" @uplDel="uplDel"></upload>
  11. </uni-forms-item>
  12. <uni-forms-item label="商品评分" name="goods_score">
  13. <uni-rate size="18" v-model="form.goods_score" />
  14. </uni-forms-item>
  15. <uni-forms-item label="发货评分" name="send_score">
  16. <uni-rate size="18" v-model="form.send_score" />
  17. </uni-forms-item>
  18. <uni-forms-item label="店铺评分" name="service_score">
  19. <uni-rate size="18" v-model="form.service_score" />
  20. </uni-forms-item>
  21. </uni-forms>
  22. <view class="btn">
  23. <button type="primary" @click="onSubmit('form')" size="small">提交</button>
  24. </view>
  25. </view>
  26. </view>
  27. </mobile-frame>
  28. </template>
  29. <script>
  30. import upload from '@/components/upload/index.vue';
  31. export default {
  32. components: {
  33. upload
  34. },
  35. data() {
  36. return {
  37. id: '',
  38. user: {},
  39. form: {},
  40. file: [],
  41. rules: {
  42. content: {
  43. rules: [{
  44. required: true,
  45. errorMessage: '请输入评论内容',
  46. }]
  47. },
  48. grade: {
  49. rules: [{
  50. required: true,
  51. errorMessage: '请输入评论等级',
  52. }]
  53. }
  54. },
  55. };
  56. },
  57. onLoad: function(e) {
  58. const that = this;
  59. that.$set(that, `id`, e.id || '');
  60. // 监听用户是否登录
  61. that.watchLogin();
  62. },
  63. methods: {
  64. // 图片上传
  65. uplSuc(e) {
  66. const that = this;
  67. that.$set(that, `${e.name}`, [...that[e.name], e.data]);
  68. },
  69. // 图片删除
  70. uplDel(e) {
  71. const that = this;
  72. let data = that[e.name];
  73. let arr = data.filter((i, index) => index != e.data.index);
  74. that.$set(that, `${e.name}`, arr)
  75. },
  76. // 提交保存
  77. async onSubmit(ref) {
  78. const that = this;
  79. that.$refs[ref].validate().then(async params => {
  80. console.log(params);
  81. })
  82. },
  83. // 监听用户是否登录
  84. watchLogin() {
  85. const that = this;
  86. uni.getStorage({
  87. key: 'token',
  88. success: function(res) {
  89. let user = that.$jwt(res.data);
  90. if (user) that.$set(that, `user`, user);
  91. // that.search();
  92. },
  93. fail: function(err) {
  94. uni.navigateTo({
  95. url: `/pages/login/index`
  96. })
  97. }
  98. });
  99. },
  100. }
  101. }
  102. </script>
  103. <style lang="scss">
  104. .info {
  105. display: flex;
  106. flex-direction: column;
  107. width: 100vw;
  108. height: 100vh;
  109. .one {
  110. padding: 2vw;
  111. .uni-input {
  112. border: #f1f1ff 1px solid;
  113. padding: 2vw 2vw;
  114. border-radius: 1vw;
  115. }
  116. .btn {
  117. text-align: center;
  118. button {
  119. margin: 0 2vw 2vw 2vw;
  120. background-color: var(--ff0Color);
  121. color: var(--fffColor);
  122. }
  123. .name {
  124. color: var(--f85Color);
  125. font-size: var(--font14Size);
  126. }
  127. }
  128. }
  129. }
  130. .uni-forms-item {
  131. margin-bottom: 6vw !important;
  132. display: flex;
  133. flex-direction: row;
  134. }
  135. .uni-forms-item__content {
  136. display: flex;
  137. align-items: center;
  138. }
  139. </style>