d7d372ab726862fb447d17cfe02c83d6.php 43 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966
  1. <?php /*a:1:{s:75:"D:\phpstudy_pro\WWW\CRMEB\app\admin\view\auction\auction_product\create.php";i:1648693789;}*/ ?>
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7. <link href="/system/frame/css/font-awesome.min.css" rel="stylesheet">
  8. <link href="/system/plug/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
  9. <script type="text/javascript" src="/system/plug/umeditor/third-party/jquery.min.js"></script>
  10. <script type="text/javascript" src="/system/plug/umeditor/third-party/template.min.js"></script>
  11. <script type="text/javascript" charset="utf-8" src="/system/plug/umeditor/umeditor.config.js"></script>
  12. <script type="text/javascript" charset="utf-8" src="/system/plug/umeditor/umeditor.min.js"></script>
  13. <script type="text/javascript" src="/system/plug/umeditor/lang/zh-cn/zh-cn.js"></script>
  14. <link rel="stylesheet" href="/static/plug/layui/css/layui.css">
  15. <script src="/static/plug/layui/layui.js"></script>
  16. <script src="/static/plug/vue/dist/vue.min.js"></script>
  17. <script src="/static/plug/axios.min.js"></script>
  18. <script src="/system/module/widget/aliyun-oss-sdk-4.4.4.min.js"></script>
  19. <script src="/system/module/widget/cos-js-sdk-v5.min.js"></script>
  20. <script src="/system/module/widget/qiniu-js-sdk-2.5.5.js"></script>
  21. <script src="/system/module/widget/plupload.full.min.js"></script>
  22. <script src="/system/module/widget/videoUpload.js"></script>
  23. <style>
  24. .layui-form-item {
  25. margin-bottom: 0px;
  26. }
  27. .pictrueBox {
  28. display: inline-block !important;
  29. }
  30. .pictrue {
  31. width: 60px;
  32. height: 60px;
  33. border: 1px dotted rgba(0, 0, 0, 0.1);
  34. margin-right: 15px;
  35. display: inline-block;
  36. position: relative;
  37. cursor: pointer;
  38. }
  39. .pictrue img {
  40. width: 100%;
  41. height: 100%;
  42. }
  43. .upLoad {
  44. width: 58px;
  45. height: 58px;
  46. line-height: 58px;
  47. border: 1px dotted rgba(0, 0, 0, 0.1);
  48. border-radius: 4px;
  49. background: rgba(0, 0, 0, 0.02);
  50. cursor: pointer;
  51. display: flex;
  52. justify-content: center;
  53. align-items: center;
  54. }
  55. .rulesBox {
  56. display: flex;
  57. flex-wrap: wrap;
  58. margin-left: 10px;
  59. }
  60. .layui-tab-content {
  61. margin-top: 15px;
  62. }
  63. .ml110 {
  64. margin: 18px 0 4px 110px;
  65. }
  66. .rules {
  67. display: flex;
  68. }
  69. .rules-btn-sm {
  70. height: 30px;
  71. line-height: 30px;
  72. font-size: 12px;
  73. width: 109px;
  74. }
  75. .rules-btn-sm input {
  76. width: 79% !important;
  77. height: 84% !important;
  78. padding: 0 10px;
  79. }
  80. .ml10 {
  81. margin-left: 10px !important;
  82. }
  83. .ml40 {
  84. margin-left: 40px !important;
  85. }
  86. .closes {
  87. position: absolute;
  88. left: 86%;
  89. top: -18%;
  90. }
  91. .red {
  92. color: red;
  93. }
  94. .layui-input-block .layui-video-box{
  95. width: 22%;
  96. height: 180px;
  97. border-radius: 10px;
  98. background-color: #707070;
  99. margin-top: 10px;
  100. position: relative;
  101. overflow: hidden;
  102. }
  103. .layui-input-block .layui-video-box i{
  104. color: #fff;
  105. line-height: 180px;
  106. margin: 0 auto;
  107. width: 50px;
  108. height: 50px;
  109. display: inherit;
  110. font-size: 50px;
  111. }
  112. .layui-input-block .layui-video-box .mark{
  113. position: absolute;
  114. width: 100%;
  115. height: 30px;
  116. top: 0;
  117. background-color: rgba(0,0,0,.5);
  118. text-align: center;
  119. }
  120. .store_box{
  121. display: flex;
  122. }
  123. .info{
  124. color: #c9c9c9;
  125. padding-left: 10px;
  126. line-height: 30px;
  127. }
  128. </style>
  129. </head>
  130. <body>
  131. <div class="layui-fluid">
  132. <div class="layui-row layui-col-space15" id="app" v-cloak="">
  133. <div class="layui-card">
  134. <div class="layui-card-header">
  135. <span class="">竞拍添加</span>
  136. <button style="margin-left: 20px" type="button" class="layui-btn layui-btn-primary layui-btn-xs" @click="goBack">返回列表</button>
  137. </div>
  138. <div class="layui-card-body">
  139. <form class="layui-form" action="" v-cloak="">
  140. <div class="layui-tab layui-tab-brief" lay-filter="docTabBrief">
  141. <div class="layui-tab-content">
  142. <div class="layui-tab-item layui-show">
  143. <div class="layui-row layui-col-space15">
  144. <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
  145. <div class="grid-demo grid-demo-bg1">
  146. <div class="layui-form-item">
  147. <label class="layui-form-label">商品名称<i class="red">*</i></label>
  148. <div class="layui-input-block">
  149. <input type="text" name="nickname" lay-verify="title" autocomplete="off"
  150. placeholder="商品名称" class="layui-input" v-model="formData.name" maxlength="100">
  151. </div>
  152. </div>
  153. </div>
  154. </div>
  155. <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
  156. <div class="grid-demo grid-demo-bg1">
  157. <div class="layui-form-item">
  158. <label class="layui-form-label">商品图片<i class="red">*</i></label>
  159. <div class="pictrueBox">
  160. <div class="pictrue" v-if="formData.image" @click="uploadImage('image')">
  161. <img :src="formData.image"></div>
  162. <div class="upLoad" @click="uploadImage('image')" v-else>
  163. <i class="layui-icon layui-icon-camera" class="iconfont"
  164. style="font-size: 26px;"></i>
  165. </div>
  166. </div>
  167. </div>
  168. </div>
  169. </div>
  170. <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
  171. <div class="grid-demo grid-demo-bg1">
  172. <div class="layui-form-item">
  173. <label class="layui-form-label">商品轮播图<i class="red">*</i></label>
  174. <div class="pictrueBox pictrue" v-for="(item,index) in formData.slider_image">
  175. <img :src="item">
  176. <i class="layui-icon closes" @click="deleteImage('slider_image',index)">&#x1007</i>
  177. </div>
  178. <div class="pictrueBox">
  179. <div class="upLoad" @click="uploadImage('slider_image')"
  180. v-if="formData.slider_image.length <= rule.slider_image.maxLength">
  181. <i class="layui-icon layui-icon-camera" class="iconfont"
  182. style="font-size: 26px;"></i>
  183. </div>
  184. </div>
  185. </div>
  186. </div>
  187. </div>
  188. <div class="layui-form-item">
  189. <label class="layui-form-label">场次</label>
  190. <div class="layui-input-inline">
  191. <select id="auction_id" name="auction_id" lay-verify="title" v-model="formData.auction_id">
  192. <option value="">请选择场馆</option>
  193. <?php foreach($list as $key=>$vo): ?>
  194. <option value="<?php echo htmlentities($vo['id']); ?>"><?php echo htmlentities($vo['nickname']); ?><option>
  195. <?php endforeach; ?>
  196. </select>
  197. </div>
  198. </div>
  199. <div class="layui-row layui-col-space15">
  200. <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
  201. <div class="grid-demo grid-demo-bg1">
  202. <div class="layui-form-item">
  203. <label class="layui-form-label">商品状态</label>
  204. <div class="layui-input-block">
  205. <input type="radio" name="is_show" lay-filter="is_show" value="1" title="上架"
  206. :checked="formData.is_show == 1 ? true : false">
  207. <input type="radio" name="is_show" lay-filter="is_show" value="0" title="下架"
  208. :checked="formData.is_show == 0 ? true : false">
  209. </div>
  210. </div>
  211. </div>
  212. </div>
  213. </div>
  214. <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
  215. <div class="grid-demo grid-demo-bg1">
  216. <div class="layui-form-item">
  217. <label class="layui-form-label">原价<i class="red">*</i></label>
  218. <div class="layui-input-inline">
  219. <input type="number" name="price" lay-verify="title" autocomplete="off" class="layui-input" v-model="formData.price" maxlength="100" value="0">
  220. </div>
  221. </div>
  222. </div>
  223. </div>
  224. <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
  225. <div class="grid-demo grid-demo-bg1">
  226. <div class="layui-form-item">
  227. <label class="layui-form-label">挂售价格<i class="red">*</i></label>
  228. <div class="layui-input-inline">
  229. <input type="number" name="hanging_price" lay-verify="title" autocomplete="off" class="layui-input" v-model="formData.hanging_price" maxlength="100" value="0">
  230. </div>
  231. </div>
  232. </div>
  233. </div>
  234. <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
  235. <div class="grid-demo grid-demo-bg1">
  236. <div class="layui-form-item">
  237. <label class="layui-form-label">涨幅<i class="red">*</i></label>
  238. <div class="layui-input-inline">
  239. <input type="number" name="rise" lay-verify="title" autocomplete="off" class="layui-input" v-model="formData.rise" maxlength="100" value="0">
  240. </div>
  241. </div>
  242. </div>
  243. </div>
  244. <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
  245. <div class="grid-demo grid-demo-bg1">
  246. <div class="layui-form-item">
  247. <label class="layui-form-label">扣除<i class="red">*</i></label>
  248. <div class="layui-input-inline">
  249. <input type="number" name="deduct" lay-verify="title" autocomplete="off" class="layui-input" v-model="formData.deduct" maxlength="100" value="0">
  250. </div>
  251. </div>
  252. </div>
  253. </div>
  254. <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
  255. <div class="grid-demo grid-demo-bg1">
  256. <div class="layui-form-item layui-form-text">
  257. <label class="layui-form-label">商品介绍</label>
  258. <div class="layui-input-block">
  259. <textarea name="info" v-model="formData.info"
  260. placeholder="请输入商品简介" class="layui-textarea"></textarea>
  261. </div>
  262. </div>
  263. </div>
  264. </div>
  265. <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
  266. <div class="grid-demo grid-demo-bg1">
  267. <div class="layui-form-item">
  268. <label class="layui-form-label">排序</label>
  269. <div class="layui-input-inline">
  270. <input type="number" name="sort" lay-verify="title" autocomplete="off" class="layui-input" v-model="formData.sort" maxlength="100" value="0">
  271. </div>
  272. </div>
  273. </div>
  274. </div>
  275. <label class="layui-form-label" style="left: +1%">商品详情:</label>
  276. <div class="layui-row layui-col-space15">
  277. <textarea type="text/plain" name="description" id="myEditor" style="width:100%;">{{formData.description}}</textarea>
  278. </div>
  279. </div>
  280. </div>
  281. <div class="layui-tab-content">
  282. <div class="layui-row layui-col-space15">
  283. <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
  284. <button class="layui-btn layui-btn-normal layui-btn-sm" id="submit" type="button" @click="handleSubmit()">提交</button>
  285. </div>
  286. </div>
  287. </div>
  288. </div>
  289. </form>
  290. </div>
  291. </div>
  292. </div>
  293. </div>
  294. <script>
  295. var id = <?php echo htmlentities($id); ?>;
  296. layui.use('laydate', function(){
  297. var laydate = layui.laydate;
  298. laydate.render({
  299. elem: '#time'
  300. ,type: 'time'
  301. ,range: true
  302. });
  303. laydate.render({
  304. elem: '#rtime'
  305. ,type: 'time'
  306. ,range: true
  307. });
  308. })
  309. new Vue({
  310. el: '#app',
  311. data: {
  312. id:id,
  313. //分类列表
  314. cateList: [],
  315. //运费模板
  316. tempList: [],
  317. upload:{
  318. videoIng:false
  319. },
  320. formData: {
  321. description: '',
  322. name: '',
  323. is_show:1,
  324. image:'',
  325. price:'',
  326. deduct: 1.2,
  327. rise: 2.7,
  328. info: '',
  329. sort: 0,
  330. auction_id: '',
  331. hanging_price: '',
  332. slider_image: []
  333. },
  334. rule: { //多图选择规则
  335. slider_image: {
  336. maxLength: 5
  337. }
  338. },
  339. attr: [],//临时属性
  340. newRule: false,//是否添加新规则
  341. radioRule: ['status'],//radio 当选规则
  342. ruleList:[],
  343. ruleIndex:-1,
  344. progress: 0,
  345. um: null,//编译器实例化
  346. form: null,//layui.form
  347. layTabId: 1,
  348. ruleBool: id ? true : false,
  349. },
  350. watch:{
  351. 'formData.is_sub':function (n) {
  352. if (n == 1) {
  353. this.formHeader.push({title:'一级返佣(元)'});
  354. this.formHeader.push({title:'二级级返佣(元)'});
  355. } else {
  356. this.formHeader.pop();
  357. this.formHeader.pop();
  358. }
  359. },
  360. 'formData.spec_type':function (n) {
  361. if (n) {
  362. this.render();
  363. }
  364. },
  365. // 'formData.image':function (n) {
  366. // if(!this.batchAttr.pic){
  367. // this.batchAttr.pic = n;
  368. // }
  369. // if(!this.formData.attr.pic){
  370. // this.formData.attr.pic = n;
  371. // }
  372. // }
  373. },
  374. methods: {
  375. back:function(){
  376. var that = this;
  377. layui.use(['element'], function () {
  378. layui.element.tabChange('docTabBrief', that.layTabId == 1 ? 1 : parseInt(that.layTabId) - 1);
  379. });
  380. },
  381. next:function(){
  382. var that = this;
  383. layui.use(['element'], function () {
  384. layui.element.tabChange('docTabBrief', that.layTabId == 3 ? 3 : parseInt(that.layTabId) + 1);
  385. });
  386. },
  387. goBack:function(){
  388. location.href = this.U({c:'auction.auction_product',a:'index'});
  389. },
  390. U: function (opt) {
  391. var m = opt.m || 'admin', c = opt.c || window.controlle || '', a = opt.a || 'index', q = opt.q || '',
  392. p = opt.p || {};
  393. var params = Object. keys(p).map(function (key) {
  394. return key + '/' + p[key];
  395. }).join('/');
  396. var gets = Object.keys(q).map(function (key) {
  397. return key+'='+ q[key];
  398. }).join('&');
  399. return '/' + m + '/' + c + '/' + a + (params == '' ? '' : '/' + params) + (gets == '' ? '' : '?' + gets);
  400. },
  401. /**
  402. * 提示
  403. * */
  404. showMsg: function (msg, success) {
  405. $('#submit').removeAttr('disabled').text('提交');
  406. layui.use(['layer'], function () {
  407. layui.layer.msg(msg, success);
  408. });
  409. },
  410. addBrokerage:function(){
  411. if (this.brokerage.brokerage >= 0 && this.brokerage.brokerage_two >= 0){
  412. var that = this;
  413. this.$set(this.formData,'attrs',this.formData.attrs.map(function (item) {
  414. item.brokerage = that.brokerage.brokerage;
  415. item.brokerage_two = that.brokerage.brokerage_two;
  416. return item;
  417. }));
  418. } else {
  419. return this.showMsg('请填写返佣金额在进行批量添加');
  420. }
  421. },
  422. batchClear:function(){
  423. this.$set(this,'batchAttr',{
  424. pic: '',
  425. price: 0,
  426. cost: 0,
  427. ot_price: 0,
  428. stock: 0,
  429. bar_code: '',
  430. weight: 0,
  431. volume: 0,
  432. });
  433. },
  434. /**
  435. * 批量添加
  436. * */
  437. batchAdd:function(){
  438. var that = this;
  439. this.$set(this.formData,'attrs',this.formData.attrs.map(function (item) {
  440. if (that.batchAttr.pic) {
  441. item.pic = that.batchAttr.pic;
  442. }
  443. if (that.batchAttr.price > 0){
  444. item.price = that.batchAttr.price;
  445. }
  446. if (that.batchAttr.cost > 0){
  447. item.cost = that.batchAttr.cost;
  448. }
  449. if (that.batchAttr.ot_price > 0){
  450. item.ot_price = that.batchAttr.ot_price;
  451. }
  452. if (that.batchAttr.stock > 0){
  453. item.stock = that.batchAttr.stock;
  454. }
  455. if (that.batchAttr.bar_code != ''){
  456. item.bar_code = that.batchAttr.bar_code;
  457. }
  458. if (that.batchAttr.weight > 0){
  459. item.weight = that.batchAttr.weight;
  460. }
  461. if (that.batchAttr.volume > 0){
  462. item.volume = that.batchAttr.volume;
  463. }
  464. return item;
  465. }));
  466. },
  467. /**
  468. * 获取商品信息
  469. * */
  470. getProductInfo: function () {
  471. var that = this;
  472. that.requestGet(that.U({c:"auction.auction_product",a:'auction_list',q:{id:that.id}})).then(function (res) {
  473. that.$set(that,'cateList',res.data.cateList);
  474. that.$set(that,'tempList',res.data.tempList);
  475. var productInfo = res.data.productInfo || {};
  476. if(productInfo.id && that.id){
  477. that.$set(that,'formData',productInfo);
  478. that.generate();
  479. }
  480. that.getRuleList();
  481. that.init();
  482. }).catch(function (res) {
  483. that.showMsg(res.msg);
  484. })
  485. },
  486. /**
  487. * 给某个属性添加属性值
  488. * @param item
  489. * */
  490. addDetail: function (item) {
  491. if (!item.detailValue) return false;
  492. if (item.detail.find(function (val) {
  493. if(item.detailValue == val){
  494. return true;
  495. }
  496. })) {
  497. return this.showMsg('添加的属性值重复');
  498. }
  499. item.detail.push(item.detailValue);
  500. item.detailValue = '';
  501. },
  502. /**
  503. * 删除某个属性值
  504. * @param item 父级循环集合
  505. * @param inx 子集index
  506. * */
  507. deleteValue: function (item, inx) {
  508. if (item.detail.length > 1) {
  509. item.detail.splice(inx, 1);
  510. } else {
  511. return this.showMsg('请设置至少一个属性');
  512. }
  513. },
  514. /**
  515. * 删除某条属性
  516. * @param index
  517. * */
  518. deleteItem: function (index) {
  519. this.formData.items.splice(index, 1);
  520. },
  521. /**
  522. * 删除某条属性
  523. * @param index
  524. * */
  525. deleteAttrs: function (index) {
  526. var that = this;
  527. if(that.id > 0){
  528. that.requestGet(that.U({c:"store.StoreProduct",a:'check_activity',q:{id:that.id}})).then(function (res) {
  529. that.showMsg(res.msg);
  530. }).catch(function (res) {
  531. if (that.formData.attrs.length > 1) {
  532. that.formData.attrs.splice(index, 1);
  533. } else {
  534. return that.showMsg('请设置至少一个规则');
  535. }
  536. })
  537. }else{
  538. if (that.formData.attrs.length > 1) {
  539. that.formData.attrs.splice(index, 1);
  540. } else {
  541. return that.showMsg('请设置至少一个规则');
  542. }
  543. }
  544. },
  545. /**
  546. * 创建属性
  547. * */
  548. createAttrName: function () {
  549. if (this.formDynamic.attrsName && this.formDynamic.attrsVal) {
  550. if (this.formData.items.find(function (val) {
  551. if (val.value == this.formDynamic.attrsName) {
  552. return true;
  553. }
  554. }.bind(this))) {
  555. return this.showMsg('添加的属性重复');
  556. }
  557. this.formData.items.push({
  558. value: this.formDynamic.attrsName,
  559. detailValue: '',
  560. attrHidden: false,
  561. detail: [this.formDynamic.attrsVal]
  562. });
  563. this.formDynamic.attrsName = '';
  564. this.formDynamic.attrsVal = '';
  565. this.newRule = false;
  566. } else {
  567. return this.showMsg('请添加完整的规格!');
  568. }
  569. },
  570. /**
  571. * 删除图片
  572. * */
  573. deleteImage: function (key, index) {
  574. var that = this;
  575. if (index != undefined) {
  576. that.formData[key].splice(index, 1);
  577. that.$set(that.formData, key, that.formData[key]);
  578. } else {
  579. that.$set(that.formData, key, '');
  580. }
  581. },
  582. createFrame: function (title, src, opt) {
  583. opt === undefined && (opt = {});
  584. var h = 0;
  585. if (window.innerHeight < 800 && window.innerHeight >= 700) {
  586. h = window.innerHeight - 50;
  587. } else if (window.innerHeight < 900 && window.innerHeight >= 800) {
  588. h = window.innerHeight - 100;
  589. } else if (window.innerHeight < 1000 && window.innerHeight >= 900) {
  590. h = window.innerHeight - 150;
  591. } else if (window.innerHeight >= 1000) {
  592. h = window.innerHeight - 200;
  593. } else {
  594. h = window.innerHeight;
  595. }
  596. var area = [(opt.w || window.innerWidth / 2) + 'px', (!opt.h || opt.h > h ? h : opt.h) + 'px'];
  597. layui.use('layer',function () {
  598. return layer.open({
  599. type: 2,
  600. title: title,
  601. area: area,
  602. fixed: false, //不固定
  603. maxmin: true,
  604. moveOut: false,//true 可以拖出窗外 false 只能在窗内拖
  605. anim: 5,//出场动画 isOutAnim bool 关闭动画
  606. offset: 'auto',//['100px','100px'],//'auto',//初始位置 ['100px','100px'] t[ 上 左]
  607. shade: 0,//遮罩
  608. resize: true,//是否允许拉伸
  609. content: src,//内容
  610. move: '.layui-layer-title'
  611. });
  612. });
  613. },
  614. changeIMG: function (name, value) {
  615. if (this.getRule(name).maxLength !== undefined) {
  616. var that = this;
  617. value.map(function (v) {
  618. that.formData[name].push(v);
  619. });
  620. this.$set(this.formData, name, this.formData[name]);
  621. } else {
  622. if(name == 'batchAttr.pic'){
  623. this.batchAttr.pic = value;
  624. } else {
  625. if (name.indexOf('.') !== -1) {
  626. var key = name.split('.');
  627. if (key.length == 2){
  628. this.formData[key[0]][key[1]] = value;
  629. } else if(key.length == 3){
  630. this.formData[key[0]][key[1]][key[2]] = value;
  631. } else if(key.length == 4){
  632. this.$set(this.formData[key[0]][key[1]][key[2]],key[3],value)
  633. }
  634. } else {
  635. this.formData[name] = value;
  636. }
  637. }
  638. }
  639. },
  640. getRule: function (name) {
  641. return this.rule[name] || {};
  642. },
  643. uploadImage: function (name) {
  644. return this.createFrame('选择图片',this.U({c:"widget.images",a:'index',p:{fodder:name}}),{h:545,w:900});
  645. },
  646. uploadVideo: function () {
  647. if (this.videoLink) {
  648. this.formData.video_link = this.videoLink;
  649. } else {
  650. $(this.$refs.filElem).click();
  651. }
  652. },
  653. delVideo: function () {
  654. var that = this;
  655. that.$set(that.formData, 'video_link', '');
  656. },
  657. insertEditor: function (list) {
  658. this.um.execCommand('insertimage', list);
  659. },
  660. insertEditorVideo: function (src) {
  661. this.um.setContent('<div><video style="width: 99%" src="'+src+'" class="video-ue" controls="controls" width="100"><source src="'+src+'"></source></video></div><br>',true);
  662. },
  663. getContent: function () {
  664. return this.um.getContent();
  665. },
  666. /**
  667. * 监听radio字段
  668. */
  669. eeventRadio: function () {
  670. var that = this;
  671. that.radioRule.map(function (val) {
  672. that.form.on('radio(' + val + ')', function (res) {
  673. that.formData[val] = res.value;
  674. });
  675. })
  676. },
  677. init: function () {
  678. var that = this;
  679. window.UMEDITOR_CONFIG.toolbar = [
  680. // 加入一个 test
  681. 'source | undo redo | bold italic underline strikethrough | superscript subscript | forecolor backcolor | removeformat |',
  682. 'insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontfamily fontsize',
  683. '| justifyleft justifycenter justifyright justifyjustify |',
  684. 'link unlink | emotion selectimgs video | map',
  685. '| horizontal print preview fullscreen', 'drafts', 'formula'
  686. ];
  687. UM.registerUI('selectimgs', function (name) {
  688. var me = this;
  689. var $btn = $.eduibutton({
  690. icon: 'image',
  691. click: function () {
  692. that.createFrame('选择图片', "<?php echo Url('widget.images/index',['fodder'=>'editor']); ?>");
  693. },
  694. title: '选择图片'
  695. });
  696. this.addListener('selectionchange', function () {
  697. //切换为不可编辑时,把自己变灰
  698. var state = this.queryCommandState(name);
  699. $btn.edui().disabled(state == -1).active(state == 1)
  700. });
  701. return $btn;
  702. });
  703. UM.registerUI('video', function (name) {
  704. var me = this;
  705. var $btn = $.eduibutton({
  706. icon: 'video',
  707. click: function () {
  708. that.createFrame('选择视频', "<?php echo Url('widget.video/index',['fodder'=>'video']); ?>");
  709. },
  710. title: '选择视频'
  711. });
  712. this.addListener('selectionchange', function () {
  713. //切换为不可编辑时,把自己变灰
  714. var state = this.queryCommandState(name);
  715. $btn.edui().disabled(state == -1).active(state == 1)
  716. });
  717. return $btn;
  718. });
  719. //实例化编辑器
  720. this.um = UM.getEditor('myEditor', {initialFrameWidth: '99%', initialFrameHeight: 400});
  721. this.um.setContent(that.formData.description);
  722. that.$nextTick(function () {
  723. layui.use(['form','element'], function () {
  724. that.form = layui.form;
  725. that.form.render();
  726. that.form.on('select(temp_id)', function (data) {
  727. that.$set(that.formData, 'temp_id', data.value);
  728. });
  729. that.form.on('select(rule_index)', function (data) {
  730. that.ruleIndex = data.value;
  731. });
  732. layui.element.on('tab(docTabBrief)', function(){
  733. that.layTabId = this.getAttribute('lay-id');
  734. });
  735. that.eeventRadio();
  736. });
  737. })
  738. },
  739. requestPost: function (url, data) {
  740. return new Promise(function (resolve, reject) {
  741. axios.post(url, data).then(function (res) {
  742. if (res.status == 200 && res.data.code == 200) {
  743. resolve(res.data)
  744. } else {
  745. reject(res.data);
  746. }
  747. }).catch(function (err) {
  748. reject({msg:err})
  749. });
  750. })
  751. },
  752. requestGet: function (url) {
  753. return new Promise(function (resolve, reject) {
  754. axios.get(url).then(function (res) {
  755. if (res.status == 200 && res.data.code == 200) {
  756. resolve(res.data)
  757. } else {
  758. reject(res.data);
  759. }
  760. }).catch(function (err) {
  761. reject({msg:err})
  762. });
  763. })
  764. },
  765. generates: function () {
  766. var that = this;
  767. that.generate(1);
  768. },
  769. generate: function (type = 0) {
  770. var that = this;
  771. this.requestPost(that.U({c:"store.StoreProduct",a:'is_format_attr',p:{id:that.id,type:type}}), {attrs:this.formData.items}).then(function (res) {
  772. that.$set(that.formData, 'attrs', res.data.value);
  773. that.$set(that, 'formHeader', res.data.header);
  774. if (that.id && that.formData.is_sub == 1 && that.formData.spec_type == 1) {
  775. that.formHeader.push({title:'一级返佣(元)'});
  776. that.formHeader.push({title:'二级级返佣(元)'});
  777. }
  778. }).catch(function (res) {
  779. return that.showMsg(res.msg);
  780. });
  781. },
  782. handleSubmit:function () {
  783. var that = this;
  784. var auction_id = $('#auction_id').val();
  785. console.log(auction_id);
  786. if (that.formData.name === ''){
  787. return that.showMsg('请输入商品名称');
  788. }
  789. if (auction_id <= 0){
  790. return that.showMsg('请选择场馆');
  791. }
  792. if (that.formData.image === ''){
  793. return that.showMsg('请输入上传图片');
  794. }
  795. if (that.formData.price <= 0){
  796. return that.showMsg('请输入价格');
  797. }
  798. if (that.formData.rise <= 0){
  799. return that.showMsg('涨幅不能为空');
  800. }
  801. if (that.formData.deduct <= 0){
  802. return that.showMsg('扣除不能为空');
  803. }
  804. that.formData.auction_id = auction_id;
  805. that.formData.description = that.getContent();
  806. that.requestPost(that.U({c:'auction.auctionProduct',a:'save',p:{id:that.id}}),that.formData).then(function (res) {
  807. that.confirm();
  808. }).catch(function (res) {
  809. that.showMsg(res.msg);
  810. });
  811. },
  812. confirm: function(){
  813. var that = this;
  814. layui.use(['layer'], function () {
  815. var layer = layui.layer;
  816. layer.confirm(that.id ? '修改成功是否返回产品列表' : '添加成功是否返回产品列表', {
  817. btn: ['返回列表',that.id ? '继续修改' : '继续添加'] //按钮
  818. }, function(){
  819. location.href = that.U({c:'auction.auction_product',a:'index'});
  820. }, function(){
  821. location.reload();
  822. });
  823. });
  824. },
  825. render:function(){
  826. this.$nextTick(function(){
  827. layui.use(['form'], function () {
  828. layui.form.render('select');
  829. });
  830. })
  831. },
  832. // 移动
  833. handleDragStart (e, item) {
  834. this.dragging = item;
  835. },
  836. handleDragEnd (e, item) {
  837. this.dragging = null
  838. },
  839. handleDragOver (e) {
  840. e.dataTransfer.dropEffect = 'move'
  841. },
  842. handleDragEnter (e, item) {
  843. e.dataTransfer.effectAllowed = 'move'
  844. if (item === this.dragging) {
  845. return
  846. }
  847. var newItems = [...this.formData.activity];
  848. var src = newItems.indexOf(this.dragging);
  849. var dst = newItems.indexOf(item);
  850. newItems.splice(dst, 0, ...newItems.splice(src, 1))
  851. this.formData.activity = newItems;
  852. },
  853. getRuleList:function (type) {
  854. var that = this;
  855. that.requestGet(that.U({c:'store.StoreProduct',a:'get_rule'})).then(function (res) {
  856. that.$set(that,'ruleList',res.data);
  857. if(type !== undefined){
  858. that.render();
  859. }
  860. });
  861. },
  862. addRule:function(){
  863. return this.createFrame('添加商品规则',this.U({c:'store.StoreProductRule',a:'create'}));
  864. },
  865. allRule:function () {
  866. if (this.ruleIndex != -1) {
  867. var rule = this.ruleList[this.ruleIndex];
  868. if (rule) {
  869. this.ruleBool = true;
  870. var rule_value = rule.rule_value.map(function (item) {
  871. return item;
  872. });
  873. this.$set(this.formData,'items',rule_value);
  874. this.$set(this.formData,'attrs',[]);
  875. this.$set(this,'formHeader',[]);
  876. return true;
  877. }
  878. }
  879. this.showMsg('选择的属性无效');
  880. }
  881. },
  882. mounted: function () {
  883. var that = this;
  884. axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
  885. that.getProductInfo();
  886. window.$vm = that;
  887. window.changeIMG = that.changeIMG;
  888. window.insertEditor = that.insertEditor;
  889. window.insertEditorVideo = that.insertEditorVideo;
  890. window.successFun = function(){
  891. that.getRuleList(1);
  892. }
  893. $(that.$refs.filElem).change(function () {
  894. var inputFile = this.files[0];
  895. that.requestPost(that.U({c:"widget.video",a:'get_signature'})).then(function (res) {
  896. AdminUpload.upload(res.data.uploadType,{
  897. token: res.data.uploadToken || '',
  898. file: inputFile,
  899. accessKeyId: res.data.accessKey || '',
  900. accessKeySecret: res.data.secretKey || '',
  901. bucketName: res.data.storageName || '',
  902. region: res.data.storageRegion || '',
  903. domain: res.data.domain || '',
  904. uploadIng:function (progress) {
  905. that.upload.videoIng = true;
  906. that.progress = progress;
  907. }
  908. }).then(function (res) {
  909. //成功
  910. that.$set(that.formData, 'video_link', res.url);
  911. that.progress = 0;
  912. that.upload.videoIng = false;
  913. return that.showMsg('上传成功');
  914. }).catch(function (err) {
  915. //失败
  916. console.info(err);
  917. return that.showMsg('上传错误请检查您的配置');
  918. });
  919. }).catch(function (res) {
  920. return that.showMsg(res.msg || '获取密钥失败,请检查您的配置');
  921. });
  922. })
  923. }
  924. });
  925. </script>
  926. </body>
  927. </html>
  928. <script>
  929. import Layout from "../../../../../public/static/plug/iview/dist/iview";
  930. export default {
  931. components: {Layout}
  932. }
  933. </script>