瑜璟缘官网
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
 
 
 

248 rindas
7.1 KiB

  1. <template>
  2. <div class="login">
  3. <div class="top_div"></div>
  4. <div class="login_ct">
  5. <el-alert
  6. title="严禁发布低价欺诈以及图片虚假的信息诱导买家,价格严重偏离正常水平的及图片虚假的信息将被删除"
  7. type="warning"
  8. show-icon
  9. :closable="false">
  10. </el-alert>
  11. <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" size="small">
  12. <p>基础信息</p>
  13. <el-form-item label="标题" prop="name">
  14. <el-input v-model="ruleForm.name" placeholder="请输入标题"></el-input>
  15. </el-form-item>
  16. <el-form-item label="类别" prop="category">
  17. <el-select v-model="ruleForm.category" placeholder="请选择活动区域">
  18. <el-option v-for="(item, index) in categoryList" :key="index" :label="item.label" :value="item.value"></el-option>
  19. </el-select>
  20. </el-form-item>
  21. <el-form-item label="上传图片" prop="fileList">
  22. <el-upload
  23. class="upload-demo"
  24. ref="upload"
  25. action="#"
  26. :show-file-list="true"
  27. :on-change="fileChange"
  28. :file-list="ruleForm.fileList"
  29. :on-remove="fileRemove"
  30. accept="image/*"
  31. :auto-upload="false"
  32. >
  33. <el-button type="primary">请选择图片</el-button>
  34. </el-upload>
  35. </el-form-item>
  36. <el-form-item label="信息详情" prop="detail">
  37. <el-input type="textarea" v-model="ruleForm.detail" placeholder="请输入信息详情介绍"></el-input>
  38. </el-form-item>
  39. <p>联系方式</p>
  40. <el-form-item label="联系电话" prop="phone">
  41. <el-input v-model="ruleForm.phone" placeholder="请输入联系电话"></el-input>
  42. </el-form-item>
  43. <el-form-item label="联系人" prop="contact">
  44. <el-input v-model="ruleForm.contact" placeholder="请输入联系人"></el-input>
  45. </el-form-item>
  46. <el-form-item label="QQ">
  47. <el-input v-model="ruleForm.qq" placeholder="请输入QQ"></el-input>
  48. </el-form-item>
  49. <el-form-item label="E-mail">
  50. <el-input v-model="ruleForm.email" placeholder="请输入E-mail"></el-input>
  51. </el-form-item>
  52. </el-form>
  53. <div class="login_btn">
  54. <el-button class="right" size="small" type="primary" @click="login('ruleForm')">发布信息</el-button>
  55. </div>
  56. </div>
  57. </div>
  58. </template>
  59. <script>
  60. export default {
  61. data() {
  62. var checkIdCard = (rule, value, cb) => {
  63. if (value.length > 0) {
  64. return cb();
  65. }
  66. cb(new Error("请选择图片"));
  67. };
  68. return {
  69. ruleForm: {
  70. name: '',
  71. category: 1,
  72. detail: '',
  73. phone: '',
  74. contact: '',
  75. qq: '',
  76. email: '',
  77. imageUrl: '',
  78. fileList: [],
  79. },
  80. rules: {
  81. name: [
  82. { required: true, message: '请输入标题', trigger: 'blur' }
  83. ],
  84. category: [
  85. { required: true, message: '请选择类别', trigger: 'change' }
  86. ],
  87. detail: [
  88. { required: true, message: '请输入信息详情', trigger: 'blur' }
  89. ],
  90. phone: [
  91. { required: true, message: '请输入联系人电话', trigger: 'blur' }
  92. ],
  93. contact: [
  94. { required: true, message: '请输入联系人', trigger: 'blur' }
  95. ],
  96. fileList: [
  97. { required: true, message: "请选择图片", trigger: ['blur', 'change'] },
  98. { validator: checkIdCard, trigger: ['blur', 'change'] }
  99. ]
  100. },
  101. categoryList: [
  102. {
  103. label: '生活服务',
  104. value: 1
  105. },
  106. {
  107. label: '同城活动',
  108. value: 2
  109. },
  110. {
  111. label: '商务服务',
  112. value: 3
  113. },
  114. {
  115. label: '宠物市场',
  116. value: 4
  117. },
  118. {
  119. label: '行业市场',
  120. value: 5
  121. },
  122. {
  123. label: '教育培训',
  124. value: 6
  125. },
  126. {
  127. label: '跳蚤市场',
  128. value: 7
  129. },
  130. {
  131. label: '车辆相关',
  132. value: 8
  133. },
  134. {
  135. label: '房产出售',
  136. value: 9
  137. },
  138. {
  139. label: '餐饮美食',
  140. value: 10
  141. },
  142. {
  143. label: '票务卡券',
  144. value: 11
  145. },
  146. {
  147. label: '宠物市场',
  148. value: 12
  149. }
  150. ]
  151. };
  152. },
  153. methods: {
  154. login(formName) {
  155. this.$refs[formName].validate((valid) => {
  156. if (valid) {
  157. this.$message({
  158. message: '人工审核中',
  159. type: 'success'
  160. });
  161. } else {
  162. console.log('error submit!!');
  163. return false;
  164. }
  165. });
  166. },
  167. goPage(path) {
  168. if(path) {
  169. this.$router.push(path);
  170. }
  171. },
  172. resetForm(formName) {
  173. this.$refs[formName].resetFields();
  174. },
  175. /* 只保留最后一次上传的文件 */
  176. fileChange (file, fileList) {
  177. if (fileList.length > 0) {
  178. this.ruleForm.fileList = [fileList[fileList.length - 1]]
  179. }
  180. },
  181. fileRemove(file) {
  182. this.ruleForm.fileList = []
  183. }
  184. }
  185. }
  186. </script>
  187. <style scoped lang="scss">
  188. .login {
  189. position: absolute;
  190. left: 0;
  191. top: 0;
  192. right: 0;
  193. bottom: 0;
  194. .top_div{
  195. height: 50%;
  196. width: 100%;
  197. background: #008ead;
  198. }
  199. .login_ct{
  200. width: 600px;
  201. margin: -100px auto 0;
  202. background: #fff;
  203. padding: 40px 0 0;
  204. border: 1px solid #e7e7e7;
  205. position: relative;
  206. .el-form{
  207. padding: 0 40px;
  208. .code{
  209. width: 90%;
  210. float: right;
  211. height: 30px;
  212. vertical-align: middle;
  213. border-radius: 5px;
  214. border: 1px solid #d3d3d3;
  215. background: #F2FBFE;
  216. text-align: center;
  217. line-height: 30px;
  218. font-weight: bold;
  219. }
  220. .login_text{
  221. font-size: 12px;
  222. line-height: 20px;
  223. display: inline-block;
  224. a{
  225. color: #409EFF;
  226. font-size: 12px;
  227. cursor: pointer;
  228. }
  229. }
  230. }
  231. .login_btn {
  232. height: 50px;
  233. margin-top: 40px;
  234. border-top: 1px solid #e7e7e7;
  235. line-height: 50px;
  236. padding: 10px 40px 0;
  237. .right{
  238. float: right;
  239. button{
  240. margin: 0 10px;
  241. }
  242. }
  243. }
  244. }
  245. }
  246. </style>