upload.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  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" v-loading='showloading'>
  66. <!-- <h1>数据上传</h1> -->
  67. <el-form v-if='!loading' 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. <span style="font-size:12px;color:#666;">(交作业时间:13:00-15:30)</span>
  74. </el-form-item>
  75. <el-form-item label="用户代码" prop="usercode">
  76. <el-input v-model="form.usercode"></el-input>
  77. </el-form-item>
  78. <el-form-item label="今日资产" prop="today_fund">
  79. <el-input clearable type='digit' v-model="form.today_fund" placeholder="请输入今日资产">
  80. <template slot="append">万元</template>
  81. </el-input>
  82. </el-form-item>
  83. <el-form-item label="股票名称(空仓请留空不填)" prop="today_stock" v-show='!form.is_markt'>
  84. <div v-for="(item,index) in form.today_stock" :key='index' style="margin-bottom:5px;width:100%;">
  85. <el-input style="width:45%;display:inline-block" v-model="item.name" placeholder="名称/代码" :disabled="form.is_markt==true"></el-input>
  86. &nbsp;<el-input style="width:40%" clearable type='digit' v-model="item.fund" placeholder="资金" :disabled="form.is_markt==true">
  87. <template slot="append">万元</template>
  88. </el-input>
  89. <i @click="form.today_stock.splice(index,1)" style="margin-top:5px;" class="el-icon-circle-close del"></i>
  90. </div>
  91. </el-form-item>
  92. <el-form-item>
  93. <el-button @click="addCode" type="danger" size="small">新增代码</el-button><br>
  94. </el-form-item>
  95. <el-form-item>
  96. 开超市(持股超5支可选)<el-switch active-color="#13ce66" v-model="form.is_markt"> </el-switch>
  97. </el-form-item>
  98. <el-form-item label="股票截图(截图需包括:净资产-股票名-持股金额,请屏蔽账户-开户名-股东代码等个人信息)">
  99. <div class="imgs" v-for="(item,index) in form.today_stock_img" :key='index'>
  100. <img width="150" :src="item" alt="">
  101. <i @click="form.today_stock_img.splice(index,1)" class="el-icon-circle-close del"></i>
  102. </div>
  103. <img v-if='form.today_stock_img.length == 0' width="110" src="upload.png" alt="">
  104. <el-upload
  105. class="upload-demo"
  106. :show-file-list ='false'
  107. :on-success="handleSuccess"
  108. action="https://test.scxjc.club/api/wx/player/record/topic/uploadfile">
  109. <el-button size="small" type="danger">上传图片</el-button>
  110. </el-upload>
  111. </el-form-item>
  112. <el-form-item>
  113. <div class="tips">
  114. 交作业须知:<br>
  115. 1、当天下午收盘后30分钟内交作业,逾期不候,如空仓无操作可提前交。 <br>
  116. 2、当天有资金进出和其它特殊情况,请联系副主编QQ修改调整。 <br>
  117. 3、当天持股太多,超过六支以上,可以选择开超市。 <br>
  118. 4、帐户截图需包括:净资产-持股名称-持股金额,可多张图片,以备查验核对。 <br>
  119. 5、帐户截图请屏蔽:股东帐户-开户名-股东代码等个人信息。 <br>
  120. 6、比赛每日仅公布前三选手交割单,其余不公开,请放心提交。
  121. </div>
  122. </el-form-item>
  123. <el-form-item style="text-align:center;">
  124. <el-button style="width: 80%;" type="danger" @click="submitForm">确 定</el-button>
  125. </el-form-item>
  126. </el-form>
  127. </div>
  128. <script src="https://unpkg.com/vue/dist/vue.js"></script>
  129. <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  130. <script>
  131. var app = new Vue({
  132. el: '#upload',
  133. data: {
  134. loading:true,
  135. showloading:false,
  136. form:{
  137. today_stock_img:[],
  138. today_stock:[{code: "", name:"",fund:''}],
  139. stock_date:'',
  140. name:'',
  141. is_markt:0
  142. },
  143. rules:{
  144. usercode: [
  145. { required: true, message: '请输入用户代码', trigger: 'blur' }
  146. ],
  147. today_fund: [
  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(isNaN(Number(form.today_fund)) || Number(form.today_fund)<=0){
  173. this.$message('请输入今日资产');
  174. return
  175. }
  176. if(!this.form.is_markt){
  177. // if(this.form.today_stock.length<=0){
  178. // this.$message('请添加股票');
  179. // return
  180. // }else{
  181. // for (let i = 0; i < form.today_stock.length;i++){
  182. // if (!form.today_stock[i].name || isNaN(Number(form.today_stock[i].fund)) || Number(form.today_stock[i].fund)<=0) {
  183. // this.$message('请输入股票代码并输入资金额');
  184. // return;
  185. // // break;
  186. // }
  187. // }
  188. // }
  189. }else{
  190. form.today_stock=[]
  191. }
  192. $.ajax({
  193. type: 'POST',
  194. url: 'https://test.scxjc.club/api/wx/player/record/topic',
  195. data: JSON.stringify(form),
  196. contentType: "application/json",
  197. dataType: 'json',
  198. success:res=>{
  199. if(res.code != 0){
  200. this.$message(res.message);
  201. return
  202. }
  203. this.$message({
  204. message: '上传成功',
  205. type: 'success'
  206. });
  207. setTimeout(()=>{
  208. window.location.href=window.location.href
  209. },500)
  210. },
  211. });
  212. }
  213. });
  214. },
  215. },
  216. created(){
  217. this.getNowDate()
  218. var id=window.location.search.split('=')[1]
  219. console.log(id)
  220. $.get('https://test.scxjc.club/api/wx/player/record/topic/match',{id:id},(res=>{
  221. this.loading=false
  222. var match=res.data.match
  223. this.form.name=match.name
  224. this.form.match_id=match.id
  225. }))
  226. }
  227. })
  228. </script>
  229. </body>
  230. </html>