LostandFoundadd.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <template>
  2. <view class="padding">
  3. <u-form labelPosition="top" :model="model1" :rules="rules" ref="uForm">
  4. <u-form-item label="订单号码" prop="ordersId" borderBottom ref="item1">
  5. <u-input v-model="model1.ordersId" border="none"></u-input>
  6. </u-form-item>
  7. <u-form-item label="联系人" prop="name" borderBottom ref="item1">
  8. <u-input v-model="model1.name" border="none"></u-input>
  9. </u-form-item>
  10. <u-form-item label="联系方式" prop="phone" borderBottom ref="item1">
  11. <u-input v-model="model1.phone" border="none"></u-input>
  12. </u-form-item>
  13. <u-form-item label="其他信息" prop="description" borderBottom>
  14. <textarea placeholder="简要描述物品其他信息" v-model="model1.description"
  15. class="feedback-textare" />
  16. </u-form-item>
  17. </u-form>
  18. <view class="">
  19. <view class="flex" style="justify-content: space-between;">
  20. <view>物品照片</view>
  21. <view>请上传丢失的物品照片</view>
  22. </view>
  23. <u-upload
  24. :action="uploadAction"
  25. :file-list="fileList"
  26. @on-success="handleUploadSuccess"
  27. @on-error="handleUploadError"
  28. :max-count="1"
  29. :multiple="false"
  30. ></u-upload>
  31. </view>
  32. <view class="pay_btns" @click="submit">发布信息</view>
  33. </view>
  34. </template>
  35. <script>
  36. export default {
  37. data() {
  38. return {
  39. model1: {
  40. name: '',
  41. ordersId: '',
  42. phone: '',
  43. description: '',
  44. image: '',
  45. loss: 1,
  46. },
  47. // 上传组件配置
  48. uploadAction: 'http://192.168.50.122:8179/sqx_fast/alioss/upload', // 上传接口地址
  49. fileList: [], // 已上传的文件列表
  50. }
  51. },
  52. methods: {
  53. // 上传成功回调
  54. handleUploadSuccess(response) {
  55. console.log('上传成功', response.data);
  56. // 将上传成功的文件添加到 fileList
  57. this.model1.image = response.data; // 保存图片 URL
  58. this.fileList = response.data
  59. },
  60. // 上传失败回调
  61. handleUploadError(error) {
  62. console.error('上传失败', error);
  63. uni.showToast({
  64. title: '上传失败,请重试',
  65. icon: 'none',
  66. });
  67. },
  68. submit() {
  69. this.$Request.postT("/app/lostFound/insert", this.model1).then(res => {
  70. if (res.code === 0) {
  71. uni.showToast({
  72. title: '新增成功',
  73. icon: 'success',
  74. });
  75. uni.navigateBack(); // 返回上一页
  76. }
  77. });
  78. }
  79. }
  80. }
  81. </script>
  82. <style scoped>
  83. .feedback-textare {
  84. height: 200upx;
  85. font-size: 24upx;
  86. line-height: 50upx;
  87. width: 100%;
  88. box-sizing: border-box;
  89. padding: 20upx 20upx 0;
  90. border: #e4e7ed 1rpx solid;
  91. background: #fff;
  92. border-radius: 15rpx;
  93. /* margin-top: 20rpx; */
  94. }
  95. .pay_btns {
  96. width: calc(100% - 60rpx);
  97. margin: 0 auto 40rpx;
  98. text-align: center;
  99. background: #fe6b01;
  100. height: 80rpx;
  101. border-radius: 16rpx;
  102. color: #ffffff;
  103. line-height: 80rpx;
  104. margin-top: 20rpx;
  105. position: fixed;
  106. bottom: 0rpx;
  107. }
  108. /deep/ .u-flex {
  109. background: #fff !important;
  110. }
  111. </style>