estimate.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <template>
  2. <view class="layout">
  3. <view class="assessHead">
  4. <span style="padding-right: 10upx;">评价</span>
  5. <van-rate
  6. :value="valueNumber"
  7. :size="20"
  8. void-color="#ee0a24"
  9. void-icon="star"
  10. color="#eee"
  11. />
  12. </view>
  13. <TextArea :tips="tips" @submitValue="submitValue"/>
  14. <view>
  15. <view>添加图片(最多3张)</view>
  16. <view class="cell-pd">
  17. <view class="uni-uploader">
  18. <view class="uni-uploader-body">
  19. <view class="uni-uploader__files">
  20. <block v-for="(image,index) in imageList" :key="index">
  21. <view class="uni-uploader__file">
  22. <image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
  23. </view>
  24. </block>
  25. <view class="uni-uploader__input-box deepHeight">
  26. <view class="uni-uploader__input" @tap="chooseImage"></view>
  27. </view>
  28. </view>
  29. </view>
  30. </view>
  31. </view>
  32. </view>
  33. <view class="submitRemin">提交</view>
  34. </view>
  35. </template>
  36. <script>
  37. import TextArea from '@/component/textarea.vue'
  38. export default {
  39. components: {
  40. TextArea
  41. },
  42. data() {
  43. return{
  44. valueNumber: 0,
  45. imageList:[],
  46. size: 25,
  47. goodComment:'',
  48. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  49. sourceType: ['album'], //从相册选择
  50. countIndex: 1,
  51. count: [1, 2, 3],
  52. tips: '五星好评超过20个字就有机会获得积分'
  53. }
  54. },
  55. onUnload() {
  56. this.imageList = [],
  57. this.sourceTypeIndex = 2,
  58. this.sourceType = ['album'],
  59. this.sizeType = ['original', 'compressed'],
  60. this.countIndex = 1;
  61. },
  62. methods: {
  63. submitValue(e) {
  64. this.goodComment = e.detail.value;
  65. },
  66. chooseImage() {
  67. if (this.imageList.length === 3) {
  68. // let isContinue = await this.isFullImg();
  69. // console.log("是否继续?", isContinue);
  70. // if (!isContinue) {
  71. // return;
  72. // }
  73. return;
  74. }
  75. uni.chooseImage({
  76. sourceType: this.sourceType,
  77. sizeType: this.sizeType,
  78. count: this.imageList.length + this.count[this.countIndex] > 3 ? 3 - this.imageList.length : this.count[this.countIndex],
  79. success: (res) => {
  80. this.imageList = this.imageList.concat(res.tempFilePaths);
  81. uni.uploadFile({
  82. url: 'https://www.example.com/upload', //仅为示例,非真实的接口地址
  83. filePath: tempFilePaths[0],
  84. name: 'file',
  85. formData: {
  86. 'user': 'test'
  87. },
  88. success: (uploadFileRes) => {
  89. console.log(uploadFileRes.data);
  90. }
  91. });
  92. }
  93. })
  94. },
  95. previewImage() {
  96. }
  97. }
  98. }
  99. </script>
  100. <style lang="scss">
  101. .layout {
  102. padding: 0 32upx;
  103. .assessHead {
  104. padding: 20upx 0;
  105. }
  106. .deepHeight {
  107. height: 108upx;
  108. width: 108upx;
  109. }
  110. }
  111. </style>