环卫车小程序前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

151 lines
3.7 KiB

7 months ago
  1. <template>
  2. <view>
  3. <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="80">
  4. <view class="se-p-20">
  5. <view class="se-p-20 se-bgc-white se-br-10 se-fs-20">
  6. <u-form-item label="公司名称" prop="company">
  7. <u--input v-model="form.company" placeholder="请输入公司名称"></u--input>
  8. </u-form-item>
  9. <u-form-item label="联系人" prop="name">
  10. <u--input v-model="form.name" placeholder="请输入姓名名称"></u--input>
  11. </u-form-item>
  12. <u-form-item label="联系电话" prop="mobile">
  13. <u--input v-model="form.mobile" placeholder="请输入联系方式"></u--input>
  14. </u-form-item>
  15. <u-form-item label="公司地址" prop="address">
  16. <u--input v-model="form.address" placeholder="请输入公司地址"></u--input>
  17. </u-form-item>
  18. </view>
  19. </view>
  20. <view class="se-p-20">
  21. <view class="se-px-20 se-pb-20 se-bgc-white se-br-10 se-fs-20">
  22. <u-form-item prop="file" labelWidth="0">
  23. <view class="se-flex se-flex-v-sa">
  24. <view class="se-py-20 se-w-p-100 se-flex">
  25. <view class="line-green"></view>
  26. <view class="se-ml-10">
  27. 营业执照上传
  28. </view>
  29. </view>
  30. <view class="se-py-20 se-w-p-100">
  31. <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1"
  32. multiple :maxCount="10"></u-upload>
  33. </view>
  34. </view>
  35. </u-form-item>
  36. </view>
  37. </view>
  38. <view class="se-px-20 se-pt-20">
  39. <view class="se-px-20 se-pb-80 se-fs-20 se-flex">
  40. <view @click="submit"
  41. class="se-mx-10 se-flex-1 se-br-40 se-flex-h-c se-h-80 se-lh-80 se-ta-c se-fs-28 se-c-white se-bgc-green">
  42. <text>确认</text>
  43. </view>
  44. </view>
  45. </view>
  46. </u--form>
  47. </view>
  48. </template>
  49. <script>
  50. export default{
  51. data(){
  52. return{
  53. form: {
  54. name: '',
  55. mobile: '',
  56. company:'',
  57. address:'',
  58. fileList:[],
  59. file: ''
  60. },
  61. rules: {
  62. name: [{
  63. type: 'string',
  64. required: true,
  65. message: '请输入姓名名称',
  66. trigger: ['blur', 'change']
  67. }],
  68. mobile: [
  69. {
  70. required: true,
  71. message: '请输入手机号',
  72. trigger: ['change','blur'],
  73. },
  74. {
  75. validator: (rule, value, callback) => {
  76. return uni.$u.test.mobile(value);
  77. },
  78. message: '手机号码不正确',
  79. trigger: ['change','blur'],
  80. },
  81. ],
  82. company: [{
  83. type: 'string',
  84. required: true,
  85. message: '请输入公司名称',
  86. trigger: ['blur', 'change']
  87. }],
  88. address: [{
  89. type: 'string',
  90. required: true,
  91. message: '请输入公司地址',
  92. trigger: ['blur', 'change']
  93. }],
  94. file: [{
  95. type: 'string',
  96. required: true,
  97. message: '请选择营业执照',
  98. trigger: ['blur', 'change']
  99. }]
  100. },
  101. }
  102. },
  103. watch: {
  104. fileList(newValue, oldValue) {
  105. if (newValue.length > 0) {
  106. this.form.file = '有'
  107. } else {
  108. this.form.file = ''
  109. }
  110. }
  111. },
  112. onReady() {
  113. this.$refs.uForm.setRules(this.rules)
  114. },
  115. methods: {
  116. submit() {
  117. uni.switchTab({
  118. url:"/pages/home/index"
  119. })
  120. this.$refs.uForm.validate().then(res => {
  121. uni.$u.toast('校验通过')
  122. }).catch(errors => {
  123. // uni.$u.toast('校验失败')
  124. })
  125. },
  126. deletePic(event) {
  127. this.form.fileList.splice(event.index, 1)
  128. },
  129. async afterRead(e) {
  130. let self = this
  131. e.file.forEach(file => {
  132. self.$Oss.ossUpload(file.url).then(url => {
  133. self.form.fileList.push({
  134. url
  135. })
  136. })
  137. })
  138. }
  139. }
  140. }
  141. </script>
  142. <style lang="scss" scoped>
  143. .line-green {
  144. width: 8rpx;
  145. height: 32rpx;
  146. background: #669A32;
  147. border-radius: 4rpx;
  148. }
  149. </style>