https://www.zydmall.com/js/component/example.js?v=20251016

1Vue.component('example', { 
2    template:   `<div class="example-box">
3                    <div class="example-mask" v-show="!showExampleModal"></div>
4                    <div 
5                        ref="example"
6                        class="example-position"
7                        @mousedown="mousedown($event,'example')" 
8                        @mousemove="mousemove($event,'example')"
9                        @mouseup="mouseup($event,'example')"
10                        @mouseleave="mouseup"
11                        >
12                        <div class="example-header">
13                            <p>批量询价</p>
14                            <a href="JavaScript:;" class="iconfont iconguanbidanchuang" @click="exampleClose"></a>
15                        </div>
16                        <div class="example-body">
17                            <div class="example"  @mousedown="stopMousedown">
18                                <p>批量添加订货号和数量，用空格隔开（可从Excel复制）。 如：</p>
19                                <p>ZB2BZ102C 50</p>
20                                <p>A9P18620 20</p>
21                                <p>RXZE2S114M 30</p>
22                                <p>XB2BA42C 60</p>
23                                <p>ZB2BD2C 80</p>
24                            </div>
25                            <div class="txtImportTextBox" :class="{'active': textFocus}" @mousedown="stopMousedown" >
26                                <textarea placeholder="批量添加订货号和数量，用空格隔开（可从 EXCEL 复制）" v-model="txtImportText" @focus="textFocus = true" @blur="textFocus = false"></textarea>
27                            </div>
28                            <div class="example-tips">
29                                <p><span >*</span> 询价篮产品行数上限为300行，建议您参考操作： </p>
30                                <p>①询价篮内的产品，先下单或转为草稿；②将批量询价的产品，分批次下单；</p>
31                            </div>
32                            <div class="example-btn">
33                                <z-button type="primary" id="btnAddLost" @click="checkData($event, 'Y')" :disabled="addBtnState" @mousedown="stopMousedown">
34                                    <span class="inner">
35                                        {{cart_text ? cart_text : '加入询价篮'}}
36                                    </span>
37                                </z-button>   
38                                <z-button type="primary" plain @click="uploadClick" @mousedown="stopMousedown">
39                                    导入Excel
40                                    <input 
41                                        id="excelInp" 
42                                        type="file" 
43                                        @change="uploadFile" 
44                                        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
45                                        >
46                                </z-button>  
47                                <a class="example-down" :href="downLink" @mousedown="stopMousedown">下载模板</a>               
48                            </div>
49                        </div>
50                    </div>
51                    <example-select
52                        :list="sameList" 
53                        @finish="exampleSelected" 
54                        @close="closeSelectFunc"
55                        v-if="showExampleModal"></example-select>
56                </div>`,
57    props: ['cart_text',"show", 'source'],
58    data() {
59        return {
60            txtImportText: "",
61            addBtnState: false,
62            textFocus: false,
63            showExampleModal: false,
64            sameList: [],   //同订货号列表
65            productList: [],
66            mouseStatus: false,  //鼠标按下状态
67            downLink: ''
68        }
69    },
70    mounted() {
71        var id = zyd_helpers.cookie.get("zyd_id");
72		var stype = zyd_helpers.cookie.get("stype");

73		// this.getHotAllList();
74		if (id == undefined || id == "" || id == null) {
75			this.downLink = "/file/众业达商城_批量询价模板.xlsx?v=20231211"
76		} else {
77			if (stype != undefined) {
78				if (stype == "T" || stype == "S" || stype == "s" || stype == "t") {
79					this.downLink = '/file/众业达商城_批量询价模板V3.xlsx?v=20231211'
80				} else {
81					this.downLink = "/file/众业达商城_批量询价模板.xlsx?v=20231211"
82				}
83			}
84		}
85        this.$nextTick(() => {
86            const body = document.querySelector("body");
87            if (body.append) {
88              body.append(this.$el);
89            } else {
90              body.appendChild(this.$el);
91            }
92        });
93    },
94    methods: {
95        closeSelectFunc(){
96            let dom = document.querySelector('body');
97            dom.classList.remove('no-scroll')
98            this.showExampleModal = false;
99            this.addBtnState = false;
100            if (this.$parent.currentFrom === 'industry') {
101                this.$parent.exampleShow = false
102            }
103        },
104        //重复项选择完成
105        exampleSelected(data){
106            let dom = document.querySelector('body');
107            dom.classList.remove('no-scroll')
108            this.showExampleModal = false;
109            let arr = JSON.parse(JSON.stringify(this.productList));
110            for(let i = 0; i < data.length; i ++){
111                arr = arr.filter(item => item.nindex != data[i].nindex);
112                arr.push(data[i])
113            }
114            arr.sort(this.compare('nindex'))
115            this.addToCart(arr)
116        },
117        compare(property){
118            return function(a,b){
119                var value1 = a[property];
120                var value2 = b[property];
121                return value1 - value2;
122            }
123        },
124        //点击导入
125        uploadClick(){
126            let zyd_id = zyd_helpers.cookie.get("zyd_id")
127            if(!zyd_id) {
128                
129                this.$parent.loginSuccess = () => {
130                    this.uploadClick();
131                    if(this.$parent.$parent.loginStatus != null && this.$parent.$parent.loginStatus != undefined) this.$parent.$parent.loginStatus = false;
132                    this.$parent.$parent.changeState++;
133                    setTimeout(() => {
134                        if(this.$parent.$parent.loginStatus != null && this.$parent.$parent.loginStatus != undefined) this.$parent.$parent.loginStatus = true;
135                    }, 20);
136                }
137                if(this.$parent.loginShow != null && this.$parent.loginShow != undefined) this.$parent.loginShow = true;
138                else {
139                    if(this.$parent.linkToIndex){
140                        setTimeout(() => {
141                            this.$parent.linkToIndex()
142                        },2000)
143                    }
144                    zyd_helpers.ui.alertBar("登录超时，请重新登录！",'error');
145                }
146                return;
147            }
148            let dom = document.getElementById('excelInp');
149            dom.click();
150        },
151        //选择excel
152        uploadFile(e){
153            let formdata = new FormData();
154            formdata.append('file',e.target.files[0]);
155            let dom = document.getElementById('excelInp');
156            dom.value = '';
157            this.newEventTrack(1)
158            cartApi.cart.l_excel_import_cart(formdata, r => {
159                if (r.code != 0) {
160                    zyd_helpers.ui.alertBar(r.message);
161                    return;
162                }
163                
164                this.txtImportText = r.data;
165                this.checkData()
166            })
167        },
168        // 提交数据检查
169        checkData(e, setTrack){
170            let zyd_id = zyd_helpers.cookie.get("zyd_id"),
171            reg = /[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g;
172            
173            if(!zyd_id) {
174                this.$parent.loginSuccess = () => {
175                    this.checkData(e, setTrack);
176                    if(this.$parent.$parent.loginStatus != null && this.$parent.$parent.loginStatus != undefined) this.$parent.$parent.loginStatus = false;

177                    this.$parent.$parent.changeState++;
178                    setTimeout(() => {
179                        if(this.$parent.$parent.loginStatus != null && this.$parent.$parent.loginStatus != undefined) this.$parent.$parent.loginStatus = true;
180                    }, 20);
181                }
182                if(this.$parent.loginShow != null && this.$parent.loginShow != undefined) this.$parent.loginShow = true;
183                else {
184                    if(this.$parent.linkToIndex){
185                        setTimeout(() => {
186                            this.$parent.linkToIndex()
187                        },2000)
188                    }
189                    zyd_helpers.ui.alertBar("登录超时，请重新登录！",'error');
190                }
191                return;
192            }
193
194            if (!this.txtImportText) {
195                zyd_helpers.ui.alertBar("请输入订货号和数量,用空格隔开!", 'tip', 2);
196                return
197            }
198
199            this.addBtnState = true;
200            this.$parent.moreSlist = [];
201            this.$parent.pncart_id = "";
202            this.$parent.isCorrect = false;
203            
204            if(this.source === 'headerMiddelHome') {
205                this.$parent.mergeWinStateM = false
206            } else {
207                this.$parent.mergeWinState = false;
208            }
209            this.$parent.sfrom_type = "cart.batch"
210            if(setTrack === 'Y') {
211                this.newEventTrack(0)
212            }
213            cartApi.cart.p_parse4carts(this.txtImportText, r => {
214                if (r.code != 0) {
215                    zyd_helpers.ui.alertBar(r.message);
216                    this.addBtnState = false;
217                    return;
218                }
219                let state = true;
220                let idx = null;
221                let arr = [];
222                this.productList = JSON.parse(JSON.stringify(r.data.list));
223                r.data.list.map(item => {
224                    if(idx != item.nindex){
225                        idx = item.nindex;
226                        arr.push([item])
227                    }else{
228                        state = false;
229                        arr.map(item2 => {
230                            for(let i = 0; i < item2.length; i ++){
231                                if(item2[i].nindex == idx){
232                                    item2.push(item)
233                                    break;
234                                }
235                            }
236                        })
237                    }
238                })
239
240                this.sameList = arr;
241
242                if(state){  //没有重复的产品
243                    this.addToCart(r.data.list,e)
244                } else {  //有重复产品弹出弹窗选择
245                    if(this.source === 'headerMiddelHome' && !this.$parent.exampleShowM) {
246                        this.$parent.exampleShowM = true
247                    } else if(!this.$parent.exampleShow) {
248                        this.$parent.exampleShow = true
249                    }
250                    this.txtImportText = ""; 
251                    this.showExampleModal = true; 
252                    let dom = document.querySelector('body');
253                    dom.classList.add('no-scroll')
254                }
255            })
256        },
257        //唤起合并弹窗
258        addToCart(list,e = null){
259            for (var index in list) {
260                let item = list[index];
261                if (item.nproduct_id == 0) item.spro_type = item.sku_code
262            }
263            this.$parent.logExample = this.txtImportText
264            this.$parent.moreSlist = list;
265            if(this.source === 'headerMiddelHome') {
266                this.$parent.mergeWinStateM = true
267            } else {
268                this.$parent.mergeWinState = true;
269            }
270            this.addBtnState = false;
271            if(e){
272                this.$parent.originalEvent = {
273                    x: e.clientX,
274                    y: e.clientY
275                }
276            }
277            // this.txtImportText = ""; 
278            // this.exampleClose();
279            this.$emit('success');
280        },
281        // 批量询价
282        addLot(e) {
283            let zyd_id = zyd_helpers.cookie.get("zyd_id"),
284                reg = /[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g;
285
286            if(!zyd_id) {
287                // zyd_helpers.ui.alertBar("请先登录", 'error', 2, () => {
288                    this.$parent.loginSuccess = () => {
289                        this.addLot(e);
290                        if(this.$parent.$parent.loginStatus != null && this.$parent.$parent.loginStatus != undefined) this.$parent.$parent.loginStatus = false;

291                        this.$parent.$parent.changeState++;
292                        setTimeout(() => {
293                            if(this.$parent.$parent.loginStatus != null && this.$parent.$parent.loginStatus != undefined) this.$parent.$parent.loginStatus = true;
294                        }, 20);
295                    }
296                    // console.log(11,this.$parent.linkToIndex);
297                    if(this.$parent.loginShow != null && this.$parent.loginShow != undefined) this.$parent.loginShow = true;
298                    else {
299                        if(this.$parent.linkToIndex){
300                            setTimeout(() => {
301                                this.$parent.linkToIndex()
302                            },2000)
303                        }
304                        zyd_helpers.ui.alertBar("登录超时，请重新登录！",'error');
305                    }
306                // });
307                return;
308            }
309
310            if (!this.txtImportText) {
311                zyd_helpers.ui.alertBar("请输入订货号和数量,用空格隔开!", 'tip', 2);
312                return
313            }
314
315            // if(this.txtImportText.match(reg)) {
316            //     zyd_helpers.ui.alertBar('请输入中英文或数字');
317            //     return;
318            // }
319            this.addBtnState = true;
320            this.$parent.moreSlist = [];
321            this.$parent.pncart_id = "";
322            this.$parent.isCorrect = false;
323            if(this.source === 'headerMiddelHome') {
324                this.$parent.mergeWinStateM = false
325            } else {
326                this.$parent.mergeWinState = false;
327            }
328            this.$parent.sfrom_type = "cart.batch"
329            // // 智能下单解析
330            cartApi.cart.p_parse4cart(this.txtImportText, res => {
331                if (res.code != 0) {
332                    zyd_helpers.ui.alertBar(res.message);
333                    this.addBtnState = false;
334                    return;
335                }
336                for (var index in res.data.list) {
337                    let item = res.data.list[index];
338                    if (item.nproduct_id == 0) item.spro_type = item.sku_code
339                }
340                this.$parent.moreSlist = res.data.list;
341                if(this.source === 'headerMiddelHome') {
342                    this.$parent.mergeWinStateM = true
343                } else {
344                    this.$parent.mergeWinState = true;
345                }
346                this.addBtnState = false;
347                this.$parent.originalEvent = {
348                    x: e.clientX,
349                    y: e.clientY
350                }
351                this.txtImportText = ""; 
352                this.exampleClose();
353                this.$emit('success');
354                // if (this.tabVisitor == 0) this.sdraft_id = 0;
355            })
356        },
357        exampleClose() {
358            this.txtImportText = "";
359            if(this.source === 'headerMiddelHome') {
360                this.$emit('closem');
361            } else {
362                this.$emit('close');
363            }
364        },
365        stopMousedown(e) {
366            e.stopPropagation()
367        },
368        //鼠标按下
369        mousedown(e, type) {
370            this.mouse = {
371                x: e.pageX,
372                y: e.pageY
373            }
374            let dom = this.$refs[type];
375            this.dom = {
376                left: dom.getBoundingClientRect().x,
377                top: dom.getBoundingClientRect().y
378            }
379            dom.style.transform = `none`;
380            dom.style.left = this.dom.left + 'px';
381            dom.style.top = this.dom.top + 'px'
382            this.mouseStatus = true;
383        },
384        mousemove(e, type) {
385            if (!this.mouseStatus) return
386            let x = e.pageX - this.mouse.x;
387            let y = e.pageY - this.mouse.y;
388            let dom = this.$refs[type];
389            dom.style.transform = `none`;
390            dom.style.left = this.dom.left + x + 'px';
391            dom.style.top = this.dom.top + y + 'px'
392        },
393        mouseup() {
394            this.mouseStatus = false;
395        },
396        // 设置埋点
397        async newEventTrack(type) {
398            const url = '/service/param/new/trend/moves/p_add'
399            const obj = {
400                args: {"type": type},
401                code: 'Web_Order_CreateOrder',
402                event: 'click'
403            }
404            await request.post(url, obj)
405        },
406    },
407    watch: {
408        show(val,oldVal){
409            this.txtImportText = '' // this.$parent.logExample
410            if(!val){
411                let dom = document.querySelector('.example-position');
412                dom.style = '';
413            }
414        }
415    }
416})