From ac9e764764c3426b9fb3e71a2113a1b5f05d3a2a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BA=9E=E4=B8=9C=E6=97=AD?= <850374051@qq.com> Date: Wed, 16 Jun 2021 14:41:47 +0800 Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/css/listingItems/items.css | 8 +- static/css/user/user.css | 1 + static/js/api/user.js | 14 +- static/js/common/main.js | 17 +- static/js/common/tools.js | 2 +- static/js/lib/ajaxUpload/ajaxupload.js | 682 ++++++++++++++++++++++++ static/js/project/listingItems/items.js | 36 +- static/js/project/new/new.js | 3 - static/js/project/user/index.js | 3 +- view/listingItems/itemsDetail.html | 31 +- view/user/user.html | 1 + 11 files changed, 768 insertions(+), 30 deletions(-) create mode 100644 static/js/lib/ajaxUpload/ajaxupload.js diff --git a/static/css/listingItems/items.css b/static/css/listingItems/items.css index aa8a828..e6ce211 100644 --- a/static/css/listingItems/items.css +++ b/static/css/listingItems/items.css @@ -317,8 +317,11 @@ padding: 12px 14px; background-color: #f3f3f3; } - -.swiperInput input[type='text']{ +nput::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; +} +.swiperInput input[type='number']{ background-color: #e5e5e5; width: 244px; height: 40px; @@ -326,6 +329,7 @@ padding-left: 20px; font-size: 24px; margin-left: 10px; + -moz-appearance: textfield; } .swiperInput input[type='button']{ diff --git a/static/css/user/user.css b/static/css/user/user.css index 66bf43a..e1f63f7 100644 --- a/static/css/user/user.css +++ b/static/css/user/user.css @@ -107,6 +107,7 @@ font-size: 12px; margin-left: 2px; color: #007b76; + cursor: pointer; } .supplyTable input[type='button']{ diff --git a/static/js/api/user.js b/static/js/api/user.js index e067753..7abe8f9 100644 --- a/static/js/api/user.js +++ b/static/js/api/user.js @@ -54,4 +54,16 @@ var deleteSupply = '/transaction/demand' //删除供求类接口 @purl /transaction/communicate @param */ -var userCommunicate = '/transaction/communicate' //添加咨询类接口 \ No newline at end of file +var userCommunicate = '/transaction/communicate' //添加咨询类接口 + +/* +@purl /transaction/demand +@param +*/ +var userDemandUpdate = '/transaction/demand' //通过ID查询个人供求 + +/* +@purl /transaction/website/data/type +@param +*/ +var dictionaries = '/transaction/website/data/type' //数据字典 \ No newline at end of file diff --git a/static/js/common/main.js b/static/js/common/main.js index 3a174f7..1e6962c 100644 --- a/static/js/common/main.js +++ b/static/js/common/main.js @@ -33,6 +33,7 @@ requirejs.config({ interactApi: 'api/interact',//互动交流接口 user: 'api/user',//用户信息接口 register:'api/register',//用户注册接口 + ajaxUploadImage:'lib/ajaxUpload/ajaxupload',//上传图片 }, shim: { bootstrap: { @@ -60,6 +61,10 @@ requirejs.config({ dateTime: { deps: ['jquery'], exports: 'dateTime' + }, + ajaxUploadImage: { + deps: ['jquery'], + exports: 'ajaxUploadImage' } } }); @@ -84,7 +89,7 @@ require(["jquery", "nprogress"], function ($, nprogress) { // 页面加载完毕后再执行相关业务代码比较稳妥 $(function () { require([targetModule], function (targetModule) { - // 不要在这里写业务代码 + //不要在这里写业务代码 //全部统一调用init方法 //也就是每个模块都暴露一个init方法用于事件监听，页面内容加载等 targetModule.init(currentPage); @@ -131,9 +136,13 @@ require(["jquery", "Tools","addressApi"], function ($, Tools) { } outLogin = function(){ - tools.removeCookie('Admin-Token'); - tools.removeCookie('userName'); - location.reload(); + var keys = document.cookie.match(/[^ =;]+(?==)/g) + if (keys) { + for (var i = keys.length; i--;) { + document.cookie = keys[i] + '=0;path=/;expires=' + new Date(0).toUTCString() // 清除当前域名下的,例如：m.ratingdog.cn + } + location.reload(); + } } goIndex = function(){ diff --git a/static/js/common/tools.js b/static/js/common/tools.js index 44e56f1..952e633 100644 --- a/static/js/common/tools.js +++ b/static/js/common/tools.js @@ -371,7 +371,7 @@ define(['jquery', 'dialog'], function ($, dialog) { var currentdate = date.getFullYear() + seperator1 + month + seperator1 + day + " " + hours + seperator2 + minutes + seperator2 + seconds; console.log(currentdate) return currentdate; - } + }, }); return Tool; diff --git a/static/js/lib/ajaxUpload/ajaxupload.js b/static/js/lib/ajaxUpload/ajaxupload.js new file mode 100644 index 0000000..c010a5e --- /dev/null +++ b/static/js/lib/ajaxUpload/ajaxupload.js @@ -0,0 +1,682 @@ +/** + * AJAX Upload ( http://valums.com/ajax-upload/ ) + * Copyright (c) Andrew Valums + * Licensed under the MIT license + */ +(function () { + /** + * Attaches event to a dom element. + * @param {Element} el + * @param type event name + * @param fn callback This refers to the passed element + */ + function addEvent(el, type, fn){ + if (el.addEventListener) { + el.addEventListener(type, fn, false); + } else if (el.attachEvent) { + el.attachEvent('on' + type, function(){ + fn.call(el); + }); + } else { + throw new Error('not supported or DOM not loaded'); + } + } + + /** + * Attaches resize event to a window, limiting + * number of event fired. Fires only when encounteres + * delay of 100 after series of events. + * + * Some browsers fire event multiple times when resizing + * http://www.quirksmode.org/dom/events/resize.html + * + * @param fn callback This refers to the passed element + */ + function addResizeEvent(fn){ + var timeout; + + addEvent(window, 'resize', function(){ + if (timeout){ + clearTimeout(timeout); + } + timeout = setTimeout(fn, 100); + }); + } + + // Needs more testing, will be rewriten for next version + // getOffset function copied from jQuery lib (http://jquery.com/) + if (document.documentElement.getBoundingClientRect){ + // Get Offset using getBoundingClientRect + // http://ejohn.org/blog/getboundingclientrect-is-awesome/ + var getOffset = function(el){ + var box = el.getBoundingClientRect(); + var doc = el.ownerDocument; + var body = doc.body; + var docElem = doc.documentElement; // for ie + var clientTop = docElem.clientTop || body.clientTop || 0; + var clientLeft = docElem.clientLeft || body.clientLeft || 0; + + // In Internet Explorer 7 getBoundingClientRect property is treated as physical, + // while others are logical. Make all logical, like in IE8. + var zoom = 1; + if (body.getBoundingClientRect) { + var bound = body.getBoundingClientRect(); + zoom = (bound.right - bound.left) / body.clientWidth; + } + + if (zoom > 1) { + clientTop = 0; + clientLeft = 0; + } + + var top = box.top / zoom + (window.pageYOffset || docElem && docElem.scrollTop / zoom || body.scrollTop / zoom) - clientTop, left = box.left / zoom + (window.pageXOffset || docElem && docElem.scrollLeft / zoom || body.scrollLeft / zoom) - clientLeft; + + return { + top: top, + left: left + }; + }; + } else { + // Get offset adding all offsets + var getOffset = function(el){ + var top = 0, left = 0; + do { + top += el.offsetTop || 0; + left += el.offsetLeft || 0; + el = el.offsetParent; + } while (el); + + return { + left: left, + top: top + }; + }; + } + + /** + * Returns left, top, right and bottom properties describing the border-box, + * in pixels, with the top-left relative to the body + * @param {Element} el + * @return {Object} Contains left, top, right,bottom + */ + function getBox(el){ + var left, right, top, bottom; + var offset = getOffset(el); + left = offset.left; + top = offset.top; + + right = left + el.offsetWidth; + bottom = top + el.offsetHeight; + + return { + left: left, + right: right, + top: top, + bottom: bottom + }; + } + + /** + * Helper that takes object literal + * and add all properties to element.style + * @param {Element} el + * @param {Object} styles + */ + function addStyles(el, styles){ + for (var name in styles) { + if (styles.hasOwnProperty(name)) { + el.style[name] = styles[name]; + } + } + } + + /** + * Function places an absolutely positioned + * element on top of the specified element + * copying position and dimentions. + * @param {Element} from + * @param {Element} to + */ + function copyLayout(from, to){ + var box = getBox(from); + + addStyles(to, { + position: 'absolute', + left : box.left + 'px', + top : box.top + 'px', + width : from.offsetWidth + 'px', + height : from.offsetHeight + 'px' + }); + } + + /** + * Creates and returns element from html chunk + * Uses innerHTML to create an element + */ + var toElement = (function(){ + var div = document.createElement('div'); + return function(html){ + div.innerHTML = html; + var el = div.firstChild; + return div.removeChild(el); + }; + })(); + + /** + * Function generates unique id + * @return unique id + */ + var getUID = (function(){ + var id = 0; + return function(){ + return 'ValumsAjaxUpload' + id++; + }; + })(); + + /** + * Get file name from path + * @param {String} file path to file + * @return filename + */ + function fileFromPath(file){ + return file.replace(/.*(\/|\\)/, ""); + } + + /** + * Get file extension lowercase + * @param {String} file name + * @return file extenstion + */ + function getExt(file){ + return (-1 !== file.indexOf('.')) ? file.replace(/.*[.]/, '') : ''; + } + + function hasClass(el, name){ + var re = new RegExp('\\b' + name + '\\b'); + return re.test(el.className); + } + function addClass(el, name){ + if ( ! hasClass(el, name)){ + el.className += ' ' + name; + } + } + function removeClass(el, name){ + var re = new RegExp('\\b' + name + '\\b'); + el.className = el.className.replace(re, ''); + } + + function removeNode(el){ + el.parentNode.removeChild(el); + } + + /** + * Easy styling and uploading + * @constructor + * @param button An element you want convert to + * upload button. Tested dimentions up to 500x500px + * @param {Object} options See defaults below. + */ + window.AjaxUpload = function(button, options){ + this._settings = { + // Location of the server-side upload script + action: 'upload.php', + // File upload name + name: 'userfile', + // Select & upload multiple files at once FF3.6+, Chrome 4+ + multiple: false, + // Additional data to send + data: {}, + // Submit file as soon as it's selected + autoSubmit: true, + // The type of data that you're expecting back from the server. + // html and xml are detected automatically. + // Only useful when you are using json data as a response. + // Set to "json" in that case. + responseType: false, + // Class applied to button when mouse is hovered + hoverClass: 'hover', + // Class applied to button when button is focused + focusClass: 'focus', + // Class applied to button when AU is disabled + disabledClass: 'disabled', + // When user selects a file, useful with autoSubmit disabled + // You can return false to cancel upload + onChange: function(file, extension){ + }, + // Callback to fire before file is uploaded + // You can return false to cancel upload + onSubmit: function(file, extension){ + }, + // Fired when file upload is completed + // WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE! + onComplete: function(file, response){ + } + }; + + // Merge the users options with our defaults + for (var i in options) { + if (options.hasOwnProperty(i)){ + this._settings[i] = options[i]; + } + } + + // button isn't necessary a dom element + if (button.jquery){ + // jQuery object was passed + button = button[0]; + } else if (typeof button == "string") { + if (/^#.*/.test(button)){ + // If jQuery user passes #elementId don't break it + button = button.slice(1); + } + + button = document.getElementById(button); + } + + if ( ! button || button.nodeType !== 1){ + throw new Error("Please make sure that you're passing a valid element"); + } + + if ( button.nodeName.toUpperCase() == 'A'){ + // disable link + addEvent(button, 'click', function(e){ + if (e && e.preventDefault){ + e.preventDefault(); + } else if (window.event){ + window.event.returnValue = false; + } + }); + } + + // DOM element + this._button = button; + // DOM element + this._input = null; + // If disabled clicking on button won't do anything + this._disabled = false; + + // if the button was disabled before refresh if will remain + // disabled in FireFox, let's fix it + this.enable(); + + this._rerouteClicks(); + }; + + // assigning methods to our class + AjaxUpload.prototype = { + setData: function(data){ + this._settings.data = data; + }, + disable: function(){ + addClass(this._button, this._settings.disabledClass); + this._disabled = true; + + var nodeName = this._button.nodeName.toUpperCase(); + if (nodeName == 'INPUT' || nodeName == 'BUTTON'){ + this._button.setAttribute('disabled', 'disabled'); + } + + // hide input + if (this._input){ + if (this._input.parentNode) { + // We use visibility instead of display to fix problem with Safari 4 + // The problem is that the value of input doesn't change if it + // has display none when user selects a file + this._input.parentNode.style.visibility = 'hidden'; + } + } + }, + enable: function(){ + removeClass(this._button, this._settings.disabledClass); + this._button.removeAttribute('disabled'); + this._disabled = false; + + }, + /** + * Creates invisible file input + * that will hover above the button + *
+ */ + _createInput: function(){ + var self = this; + + var input = document.createElement("input"); + input.setAttribute('type', 'file'); + input.setAttribute('name', this._settings.name); + if(this._settings.multiple) input.setAttribute('multiple', 'multiple'); + + addStyles(input, { + 'position' : 'absolute', + // in Opera only 'browse' button + // is clickable and it is located at + // the right side of the input + 'right' : 0, + 'margin' : 0, + 'padding' : 0, + 'fontSize' : '480px', + // in Firefox if font-family is set to + // 'inherit' the input doesn't work + 'fontFamily' : 'sans-serif', + 'cursor' : 'pointer' + }); + + var div = document.createElement("div"); + addStyles(div, { + 'display' : 'block', + 'position' : 'absolute', + 'overflow' : 'hidden', + 'margin' : 0, + 'padding' : 0, + 'opacity' : 0, + // Make sure browse button is in the right side + // in Internet Explorer + 'direction' : 'ltr', + //Max zIndex supported by Opera 9.0-9.2 + 'zIndex': 2147483583 + }); + + // Make sure that element opacity exists. + // Otherwise use IE filter + if ( div.style.opacity !== "0") { + if (typeof(div.filters) == 'undefined'){ + throw new Error('Opacity not supported by the browser'); + } + div.style.filter = "alpha(opacity=0)"; + } + + addEvent(input, 'change', function(){ + + if ( ! input || input.value === ''){ + return; + } + + // Get filename from input, required + // as some browsers have path instead of it + var file = fileFromPath(input.value); + + if (false === self._settings.onChange.call(self, file, getExt(file))){ + self._clearInput(); + return; + } + + // Submit form when value is changed + if (self._settings.autoSubmit) { + self.submit(); + } + }); + + addEvent(input, 'mouseover', function(){ + addClass(self._button, self._settings.hoverClass); + }); + + addEvent(input, 'mouseout', function(){ + removeClass(self._button, self._settings.hoverClass); + removeClass(self._button, self._settings.focusClass); + + if (input.parentNode) { + // We use visibility instead of display to fix problem with Safari 4 + // The problem is that the value of input doesn't change if it + // has display none when user selects a file + input.parentNode.style.visibility = 'hidden'; + } + }); + + addEvent(input, 'focus', function(){ + addClass(self._button, self._settings.focusClass); + }); + + addEvent(input, 'blur', function(){ + removeClass(self._button, self._settings.focusClass); + }); + + div.appendChild(input); + document.body.appendChild(div); + + this._input = input; + }, + _clearInput : function(){ + if (!this._input){ + return; + } + + // this._input.value = ''; Doesn't work in IE6 + removeNode(this._input.parentNode); + this._input = null; + this._createInput(); + + removeClass(this._button, this._settings.hoverClass); + removeClass(this._button, this._settings.focusClass); + }, + /** + * Function makes sure that when user clicks upload button, + * the this._input is clicked instead + */ + _rerouteClicks: function(){ + var self = this; + + // IE will later display 'access denied' error + // if you use using self._input.click() + // other browsers just ignore click() + + addEvent(self._button, 'mouseover', function(){ + if (self._disabled){ + return; + } + + if ( ! self._input){ + self._createInput(); + } + + var div = self._input.parentNode; + copyLayout(self._button, div); + div.style.visibility = 'visible'; + + }); + + + // commented because we now hide input on mouseleave + /** + * When the window is resized the elements + * can be misaligned if button position depends + * on window size + */ + //addResizeEvent(function(){ + // if (self._input){ + // copyLayout(self._button, self._input.parentNode); + // } + //}); + + }, + /** + * Creates iframe with unique name + * @return {Element} iframe + */ + _createIframe: function(){ + // We can't use getTime, because it sometimes return + // same value in safari :( + var id = getUID(); + + // We can't use following code as the name attribute + // won't be properly registered in IE6, and new window + // on form submit will open + // var iframe = document.createElement('iframe'); + // iframe.setAttribute('name', id); + + var iframe = toElement('