upload.html 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title></title>
  8. <!-- 引入样式 -->
  9. <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  10. <!-- 引入组件库 -->
  11. <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  12. </head>
  13. <style>
  14. *{
  15. padding: 0;
  16. margin: 0;
  17. box-sizing: border-box;
  18. }
  19. #upload{
  20. width: 500px;
  21. max-width: 100%;
  22. min-height: 100vh;
  23. margin: auto;
  24. background: url(bg.png) no-repeat;
  25. background-size: 100%;
  26. background-color: #FF7716;
  27. background-position-y:-10vh;
  28. padding: 10px;
  29. }
  30. .form{
  31. width: 100%;
  32. margin-top: 18vh;
  33. background: #fff;
  34. border-radius: 8px;
  35. padding: 20px 10px;
  36. }
  37. .del{
  38. font-size: 20px;
  39. }
  40. input{
  41. padding: 0 10px !important;
  42. }
  43. .el-input-group__append{
  44. padding: 0 5px;
  45. }
  46. .el-form-item__label{
  47. color: #333;
  48. font-size: 14px;
  49. font-weight: 500;
  50. padding: 0 !important;
  51. }
  52. .el-button--danger{
  53. background-color: #FF5151;
  54. border-top: #FF5151;
  55. height: 44px;
  56. border-radius: 8px;
  57. }
  58. .tips{
  59. font-size: 12px;
  60. color: #666;
  61. line-height: 24px;
  62. }
  63. </style>
  64. <body>
  65. <div id="upload">
  66. <!-- <h1>数据上传</h1> -->
  67. <el-form class="form" ref="form" label-position='top' :model="form" :rules="rules">
  68. <el-form-item label="" style="margin-bottom: 0;">
  69. <span style="font-weight: 500;">赛事名称 &nbsp;&nbsp;{{form.name}}</span>
  70. </el-form-item>
  71. <el-form-item label="" prop="stock_date" style="margin-bottom: 10px;">
  72. <span style="font-weight: 500;">持仓日期 &nbsp;&nbsp;{{form.stock_date}}</span>
  73. </el-form-item>
  74. <el-form-item label="用户代码" prop="usercode">
  75. <el-input v-model="form.usercode"></el-input>
  76. </el-form-item>
  77. <el-form-item label="今日资产" prop="today_fund">
  78. <el-input clearable type='digit' v-model="form.today_fund" placeholder="请输入今日资产">
  79. <template slot="append">万元</template>
  80. </el-input>
  81. </el-form-item>
  82. <el-form-item label="股票名称" prop="today_stock" v-show='!form.is_markt'>
  83. <div v-for="(item,index) in form.today_stock" :key='index' style="margin-bottom:5px;width:100%;">
  84. <el-input style="width:45%;display:inline-block" v-model="item.name" placeholder="名称/代码" :disabled="form.is_markt==true"></el-input>
  85. &nbsp;<el-input style="width:40%" clearable type='digit' v-model="item.fund" placeholder="资金" :disabled="form.is_markt==true">
  86. <template slot="append">万元</template>
  87. </el-input>
  88. <i @click="form.today_stock.splice(index,1)" style="margin-top:5px;" class="el-icon-circle-close del"></i>
  89. </div>
  90. </el-form-item>
  91. <el-form-item>
  92. <el-button @click="addCode" type="danger" size="small">新增代码</el-button><br>
  93. </el-form-item>
  94. <el-form-item>
  95. 开超市 <el-switch active-color="#13ce66" v-model="form.is_markt"> </el-switch>
  96. </el-form-item>
  97. <el-form-item label="股票截图" prop="today_stock_img">
  98. <div class="imgs" v-for="(item,index) in form.today_stock_img" :key='index'>
  99. <img width="150" :src="item" alt="">
  100. <i @click="form.today_stock_img.splice(index,1)" class="el-icon-circle-close del"></i>
  101. </div>
  102. <img v-if='form.today_stock_img.length == 0' width="110" src="upload.png" alt="">
  103. <el-upload
  104. class="upload-demo"
  105. :show-file-list ='false'
  106. :on-success="handleSuccess"
  107. action="https://test.scxjc.club/api/wx/player/record/topic/uploadfile">
  108. <el-button size="small" type="danger">上传图片</el-button>
  109. </el-upload>
  110. </el-form-item>
  111. <el-form-item>
  112. <div class="tips">
  113. 交作业须知:<br>
  114. 1、当天下午收盘后30分钟内交作业,逾期不候,如空仓无操作可提前交。 <br>
  115. 2、当天有资金进出和其它特殊情况,请联系副主编QQ修改调整。 <br>
  116. 3、当天持股太多,超过六支以上,可以选择开超市。 <br>
  117. 4、帐户截图需包括:净资产-持股名称-持股金额,可多张图片,以备查验核对。 <br>
  118. 5、帐户截图请屏蔽:股东帐户-开户名-股东代码等个人信息。 <br>
  119. 6、比赛每日仅公布前三选手交割单,其余不公开,请放心提交。
  120. </div>
  121. </el-form-item>
  122. <el-form-item style="text-align:center;">
  123. <el-button style="width: 80%;" type="danger" @click="submitForm">确 定</el-button>
  124. </el-form-item>
  125. </el-form>
  126. </div>
  127. <script src="https://unpkg.com/vue/dist/vue.js"></script>
  128. <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  129. <script>
  130. var app = new Vue({
  131. el: '#upload',
  132. data: {
  133. form:{
  134. today_stock_img:[],
  135. today_stock:[{code: "", name:"",fund:''}],
  136. stock_date:'',
  137. name:'',
  138. is_markt:0
  139. },
  140. rules:{
  141. usercode: [
  142. { required: true, message: '请输入用户代码', trigger: 'blur' }
  143. ],
  144. today_fund: [
  145. { required: true, message: '请输入今日资产', trigger: 'blur' }
  146. ],
  147. today_stock_img: [
  148. { required: true, message: '请输入股票截图', trigger: 'blur' }
  149. ],
  150. }
  151. },
  152. methods:{
  153. handleSuccess(res, file) {
  154. this.form.today_stock_img.push(res.data.url);
  155. },
  156. getNowDate(){
  157. var y=new Date().getFullYear()
  158. var m=Number(new Date().getMonth() + 1)
  159. var d = new Date().getDate()
  160. m=m>9?m:'0'+m;
  161. d=d>9?d:'0'+d
  162. this.form.stock_date=y+'-'+m+'-'+d
  163. },
  164. addCode(){
  165. this.form.today_stock.push({code: "", name:"",fund:''})
  166. },
  167. submitForm() {
  168. var form={...this.form}
  169. form.is_markt=Number(form.is_markt)
  170. this.$refs["form"].validate(valid => {
  171. if (valid) {
  172. if(!this.form.is_markt){
  173. if(this.form.today_stock.length<=0){
  174. this.$message('请添加股票');
  175. return
  176. }else{
  177. if((!this.form.today_stock[0].name || !this.form.today_stock[0].fund) && !this.form.is_markt){
  178. this.$message('请选择股票并输入资金额');
  179. return
  180. }
  181. }
  182. }
  183. $.ajax({
  184. type: 'POST',
  185. url: 'https://test.scxjc.club/api/wx/player/record/topic',
  186. data: JSON.stringify(this.form),
  187. contentType: "application/json",
  188. dataType: 'json',
  189. success:res=>{
  190. if(res.code != 0){
  191. this.$message(res.message);
  192. return
  193. }
  194. this.$message({
  195. message: '上传成功',
  196. type: 'success'
  197. });
  198. setTimeout(()=>{
  199. window.location.href=window.location.href
  200. },500)
  201. },
  202. });
  203. }
  204. });
  205. },
  206. },
  207. created(){
  208. this.getNowDate()
  209. var id=window.location.search.split('=')[1]
  210. console.log(id)
  211. $.get('https://test.scxjc.club/api/wx/player/record/topic/match',{id:id},(res=>{
  212. var match=res.data.match
  213. this.form.name=match.name
  214. this.form.match_id=match.id
  215. }))
  216. }
  217. })
  218. </script>
  219. </body>
  220. </html>