Skip to content

A
Athena
Commit 6006d1f0 authored by huangyuanyuan's avatar huangyuanyuan
Browse files
Options

Merge branch 'master' of http://gitlab.oytour.com/huaguohao/athena

parents d1370027 74864b22
Show whitespace changes
Inline Side-by-side
Showing with 3558 additions and 1079 deletions
public/index.html
View file @ 6006d1f0
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="renderer" content="webkit">
<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=z58ZwNa8oYvzEYI6dD8hAS0GFbfKpttP"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script> -->
<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?key=AIzaSyAZ5MIfzicStzKbIkbI3RcBBeZBjQFKsp0&language=zh-CN"></script>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script type="text/javascript"
src="http://ditu.google.cn/maps/api/js?key=AIzaSyAZ5MIfzicStzKbIkbI3RcBBeZBjQFKsp0&language=zh-CN"></script>
<script>
(function ($) {
var supportedCSS, styles = document.getElementsByTagName("head")[0].style,
toCheck = "transformProperty WebkitTransform OTransform msTransform MozTransform".split(" ");
for (var a = 0; a < toCheck.length; a++)
if (styles[toCheck[a]] !== undefined) supportedCSS = toCheck[a];
// Bad eval to preven google closure to remove it from code o_O
// After compresion replace it back to var IE = 'v' == '\v'
var IE = eval('"v"=="\v"');
jQuery.fn.extend({
rotate: function (parameters) {
if (this.length === 0 || typeof parameters == "undefined") return;
if (typeof parameters == "number") parameters = {
angle: parameters
};
var returned = [];
for (var i = 0, i0 = this.length; i < i0; i++) {
var element = this.get(i);
if (!element.Wilq32 || !element.Wilq32.PhotoEffect) {
var paramClone = $.extend(true, {}, parameters);
var newRotObject = new Wilq32.PhotoEffect(element, paramClone)._rootObj;
returned.push($(newRotObject));
} else {
element.Wilq32.PhotoEffect._handleRotation(parameters);
}
}
return returned;
},
getRotateAngle: function () {
var ret = [];
for (var i = 0, i0 = this.length; i < i0; i++) {
var element = this.get(i);
if (element.Wilq32 && element.Wilq32.PhotoEffect) {
ret[i] = element.Wilq32.PhotoEffect._angle;
}
}
return ret;
},
stopRotate: function () {
for (var i = 0, i0 = this.length; i < i0; i++) {
var element = this.get(i);
if (element.Wilq32 && element.Wilq32.PhotoEffect) {
clearTimeout(element.Wilq32.PhotoEffect._timer);
}
}
}
});
// Library agnostic interface
Wilq32 = window.Wilq32 || {};
Wilq32.PhotoEffect = (function () {
if (supportedCSS) {
return function (img, parameters) {
img.Wilq32 = {
PhotoEffect: this
};
this._img = this._rootObj = this._eventObj = img;
this._handleRotation(parameters);
}
} else {
return function (img, parameters) {
// Make sure that class and id are also copied - just in case you would like to refeer to an newly created object
this._img = img;
this._rootObj = document.createElement('span');
this._rootObj.style.display = "inline-block";
this._rootObj.Wilq32 = {
PhotoEffect: this
};
img.parentNode.insertBefore(this._rootObj, img);
if (img.complete) {
this._Loader(parameters);
} else {
var self = this;
// TODO: Remove jQuery dependency
jQuery(this._img).bind("load", function () {
self._Loader(parameters);
});
}
}
}
})();
Wilq32.PhotoEffect.prototype = {
_setupParameters: function (parameters) {
this._parameters = this._parameters || {};
if (typeof this._angle !== "number") this._angle = 0;
if (typeof parameters.angle === "number") this._angle = parameters.angle;
this._parameters.animateTo = (typeof parameters.animateTo === "number") ? (parameters
.animateTo) : (this._angle);
this._parameters.step = parameters.step || this._parameters.step || null;
this._parameters.easing = parameters.easing || this._parameters.easing || function (x,
t, b, c, d) {
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
}
this._parameters.duration = parameters.duration || this._parameters.duration || 1000;
this._parameters.callback = parameters.callback || this._parameters.callback ||
function () {};
if (parameters.bind && parameters.bind != this._parameters.bind) this._BindEvents(
parameters.bind);
},
_handleRotation: function (parameters) {
this._setupParameters(parameters);
if (this._angle == this._parameters.animateTo) {
this._rotate(this._angle);
} else {
this._animateStart();
}
},
_BindEvents: function (events) {
if (events && this._eventObj) {
// Unbinding previous Events
if (this._parameters.bind) {
var oldEvents = this._parameters.bind;
for (var a in oldEvents)
if (oldEvents.hasOwnProperty(a))
// TODO: Remove jQuery dependency
jQuery(this._eventObj).unbind(a, oldEvents[a]);
}
this._parameters.bind = events;
for (var a in events)
if (events.hasOwnProperty(a))
// TODO: Remove jQuery dependency
jQuery(this._eventObj).bind(a, events[a]);
}
},
_Loader: (function () {
if (IE)
return function (parameters) {
var width = this._img.width;
var height = this._img.height;
this._img.parentNode.removeChild(this._img);
this._vimage = this.createVMLNode('image');
this._vimage.src = this._img.src;
this._vimage.style.height = height + "px";
this._vimage.style.width = width + "px";
this._vimage.style.position =
"absolute"; // FIXES IE PROBLEM - its only rendered if its on absolute position!
this._vimage.style.top = "0px";
this._vimage.style.left = "0px";
/* Group minifying a small 1px precision problem when rotating object */
this._container = this.createVMLNode('group');
this._container.style.width = width;
this._container.style.height = height;
this._container.style.position = "absolute";
this._container.setAttribute('coordsize', width - 1 + ',' + (height -
1)); // This -1, -1 trying to fix ugly problem with small displacement on IE
this._container.appendChild(this._vimage);
this._rootObj.appendChild(this._container);
this._rootObj.style.position = "relative"; // FIXES IE PROBLEM
this._rootObj.style.width = width + "px";
this._rootObj.style.height = height + "px";
this._rootObj.setAttribute('id', this._img.getAttribute('id'));
this._rootObj.className = this._img.className;
this._eventObj = this._rootObj;
this._handleRotation(parameters);
}
else
return function (parameters) {
this._rootObj.setAttribute('id', this._img.getAttribute('id'));
this._rootObj.className = this._img.className;
this._width = this._img.width;
this._height = this._img.height;
this._widthHalf = this._width / 2; // used for optimisation
this._heightHalf = this._height / 2; // used for optimisation
var _widthMax = Math.sqrt((this._height) * (this._height) + (this
._width) * (this._width));
this._widthAdd = _widthMax - this._width;
this._heightAdd = _widthMax - this
._height; // widthMax because maxWidth=maxHeight
this._widthAddHalf = this._widthAdd / 2; // used for optimisation
this._heightAddHalf = this._heightAdd / 2; // used for optimisation
this._img.parentNode.removeChild(this._img);
this._aspectW = ((parseInt(this._img.style.width, 10)) || this._width) /
this._img.width;
this._aspectH = ((parseInt(this._img.style.height, 10)) || this
._height) / this._img.height;
this._canvas = document.createElement('canvas');
this._canvas.setAttribute('width', this._width);
this._canvas.style.position = "relative";
this._canvas.style.left = -this._widthAddHalf + "px";
this._canvas.style.top = -this._heightAddHalf + "px";
this._canvas.Wilq32 = this._rootObj.Wilq32;
this._rootObj.appendChild(this._canvas);
this._rootObj.style.width = this._width + "px";
this._rootObj.style.height = this._height + "px";
this._eventObj = this._canvas;
this._cnv = this._canvas.getContext('2d');
this._handleRotation(parameters);
}
})(),
_animateStart: function () {
if (this._timer) {
clearTimeout(this._timer);
}
this._animateStartTime = +new Date;
this._animateStartAngle = this._angle;
this._animate();
},
_animate: function () {
var actualTime = +new Date;
var checkEnd = actualTime - this._animateStartTime > this._parameters.duration;
// TODO: Bug for animatedGif for static rotation ? (to test)
if (checkEnd && !this._parameters.animatedGif) {
clearTimeout(this._timer);
} else {
if (this._canvas || this._vimage || this._img) {
var angle = this._parameters.easing(0, actualTime - this._animateStartTime, this
._animateStartAngle, this._parameters.animateTo - this
._animateStartAngle, this._parameters.duration);
this._rotate((~~(angle * 10)) / 10);
}
if (this._parameters.step) {
this._parameters.step(this._angle);
}
var self = this;
this._timer = setTimeout(function () {
self._animate.call(self);
}, 10);
}
// To fix Bug that prevents using recursive function in callback I moved this function to back
if (this._parameters.callback && checkEnd) {
this._angle = this._parameters.animateTo;
this._rotate(this._angle);
this._parameters.callback.call(this._rootObj);
}
},
_rotate: (function () {
var rad = Math.PI / 180;
if (IE)
return function (angle) {
this._angle = angle;
this._container.style.rotation = (angle % 360) + "deg";
}
else if (supportedCSS)
return function (angle) {
this._angle = angle;
this._img.style[supportedCSS] = "rotate(" + (angle % 360) + "deg)";
}
else
return function (angle) {
this._angle = angle;
angle = (angle % 360) * rad;
// clear canvas
this._canvas.width = this._width + this._widthAdd;
this._canvas.height = this._height + this._heightAdd;
// REMEMBER: all drawings are read from backwards.. so first function is translate, then rotate, then translate, translate..
this._cnv.translate(this._widthAddHalf, this
._heightAddHalf); // at least center image on screen
this._cnv.translate(this._widthHalf, this
._heightHalf); // we move image back to its orginal
this._cnv.rotate(angle); // rotate image
this._cnv.translate(-this._widthHalf, -this
._heightHalf); // move image to its center, so we can rotate around its center
this._cnv.scale(this._aspectW, this._aspectH); // SCALE - if needed ;)
this._cnv.drawImage(this._img, 0, 0); // First - we draw image
}
})()
}
if (IE) {
Wilq32.PhotoEffect.prototype.createVMLNode = (function () {
document.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)");
try {
!document.namespaces.rvml && document.namespaces.add("rvml",
"urn:schemas-microsoft-com:vml");
return function (tagName) {
return document.createElement('<rvml:' + tagName + ' class="rvml">');
};
} catch (e) {
return function (tagName) {
return document.createElement('<' + tagName +
' xmlns="urn:schemas-microsoft.com:vml" class="rvml">');
};
}
})();
}
})(jQuery);
</script>
<script>
function inherits(childCtor, parentCtor) {
/** @constructor */
......@@ -159,7 +469,8 @@
}
me.crossDiv_.style.display = "none";
me.marker_.setZIndex(cSavedZIndex);
cIgnoreClick = true; // Set flag to ignore the click event reported after a label drag
cIgnoreClick =
true; // Set flag to ignore the click event reported after a label drag
cDraggingLabel = false;
mEvent.latLng = me.marker_.getPosition();
google.maps.event.trigger(me.marker_, "dragend", mEvent);
......@@ -170,7 +481,8 @@
if (cMouseIsDown) {
if (cDraggingLabel) {
// Change the reported location from the mouse position to the marker position:
mEvent.latLng = new google.maps.LatLng(mEvent.latLng.lat() - cLatOffset, mEvent.latLng.lng() - cLngOffset);
mEvent.latLng = new google.maps.LatLng(mEvent.latLng.lat() - cLatOffset, mEvent
.latLng.lng() - cLngOffset);
position = me.getProjection().fromLatLngToDivPixel(mEvent.latLng);
if (cRaiseEnabled) {
me.crossDiv_.style.left = position.x + "px";
......@@ -192,7 +504,8 @@
cStartCenter = me.marker_.getMap().getCenter();
cRaiseEnabled = me.marker_.get("raiseOnDrag");
cDraggingLabel = true;
me.marker_.setZIndex(1000000); // Moves the marker & label to the foreground during a drag
me.marker_.setZIndex(
1000000); // Moves the marker & label to the foreground during a drag
mEvent.latLng = me.marker_.getPosition();
google.maps.event.trigger(me.marker_, "dragstart", mEvent);
}
......@@ -368,7 +681,8 @@
this.labelDiv_.style.overflow = "hidden";
// Make sure the opacity setting causes the desired effect on MSIE:
if (typeof this.labelDiv_.style.opacity !== "undefined" && this.labelDiv_.style.opacity !== "") {
this.labelDiv_.style.MsFilter = "\"progid:DXImageTransform.Microsoft.Alpha(opacity=" + (this.labelDiv_.style.opacity * 100) + ")\"";
this.labelDiv_.style.MsFilter = "\"progid:DXImageTransform.Microsoft.Alpha(opacity=" + (this
.labelDiv_.style.opacity * 100) + ")\"";
this.labelDiv_.style.filter = "alpha(opacity=" + (this.labelDiv_.style.opacity * 100) + ")";
}
......@@ -519,11 +833,14 @@
if (typeof opt_options.optimized === "undefined") {
opt_options.optimized = false;
}
opt_options.crossImage = opt_options.crossImage || "http" + (document.location.protocol === "https:" ? "s" : "") + "://maps.gstatic.com/intl/en_us/mapfiles/drag_cross_67_16.png";
opt_options.handCursor = opt_options.handCursor || "http" + (document.location.protocol === "https:" ? "s" : "") + "://maps.gstatic.com/intl/en_us/mapfiles/closedhand_8_8.cur";
opt_options.crossImage = opt_options.crossImage || "http" + (document.location.protocol === "https:" ? "s" :
"") + "://maps.gstatic.com/intl/en_us/mapfiles/drag_cross_67_16.png";
opt_options.handCursor = opt_options.handCursor || "http" + (document.location.protocol === "https:" ? "s" :
"") + "://maps.gstatic.com/intl/en_us/mapfiles/closedhand_8_8.cur";
opt_options.optimized = false; // Optimized rendering is not supported
this.label = new MarkerLabel_(this, opt_options.crossImage, opt_options.handCursor); // Bind the label to the marker
this.label = new MarkerLabel_(this, opt_options.crossImage, opt_options
.handCursor); // Bind the label to the marker
// Call the parent constructor. It calls Marker.setValues to initialize, so all
// the new parameters are conveniently saved and can be accessed with get/set.
......@@ -550,12 +867,15 @@
</script>
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>athena</title>
</head>
<body>
</head>
<body>
<noscript>
<strong>We're sorry but athena doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
<strong>We're sorry but athena doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</body>
</html>
\ No newline at end of file
src/App.vue
View file @ 6006d1f0
......@@ -29,7 +29,6 @@ export default {
B2BDomain:window.location.host.split(':')[0]
}
this.apipost('admin_get_GetGroupDomain',msg,r=>{
// console.log("res",r);
let g={}
g.i=r.data.data.GroupId
g.n=r.data.data.GroupName
......@@ -60,7 +59,7 @@ export default {
<style>
@import './assets/global/font.css';
@import '//at.alicdn.com/t/font_863923_lzf5ymeg5ss.css';
@import '//at.alicdn.com/t/font_863923_lbsx2a06sr.css';
@import './assets/global/global.css';
body,html{
padding: 0px;
......
src/assets/mall/PsSystem.css
View file @ 6006d1f0
.PsSystem{padding-top: 20px;}
.PsSystem{padding-top: 20px; background-color: #F5F5F5;}
.PsSystem ._left{
min-height: 600px;
background-color: #F2F2F2;
background-color: #ffffff;
}
.PsSystem ._left ul{padding: 0;}
.PsSystem ._left ul li{list-style: none;}
......@@ -70,3 +70,158 @@
}
.PsSystem .el-tag {margin-right: 10px;}
.PsSystem ._input_style ._tags{margin-right: 10px;}
.PsSystem .Authentication ._real_name {
height: 70px;
}
.PsSystem .Authentication ._real_name ._rn_tit{
height: 58px;
font-size: 18px;
color: #5079ED;
background-color: white;
border:1px solid rgba(80,121,237,1);
text-align: center;
line-height: 58px;
cursor: pointer;
}
.PsSystem .Authentication ._real_name ._rn_tit._active{
background-color: #5079ED;
color: white;
font-weight: bold;
}
.kailong{
width:0;
height:0;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-top: 10px solid #5079ed;
margin: 0 auto;
}
.Authentication ._at_tips{
height: 100px;
padding: 20px 100px;
background-color: white;
margin:20px 0px;
}
.Authentication ._at_tips p{
font-size: 12px;
color: #666666;
margin: 0;
}
.Authentication ._at_tips p._at_tips_tit{
font-size: 16px;
font-weight: bold;
color: #333333;
margin-bottom: 5px;
}
._up_box{
padding: 20px 100px 20px 100px;
background-color: white;
border-bottom: 1px solid #E6E6E6
}
.upload-demo{
height: 360px;
}
.upload-demo .el-upload-dragger{
height: 360px;
width: 260px;
}
.upload-demo_img{
height: 358px;
width: 258px;
}
._up_box_left,._up_box_right{
text-align: center;
}
._up_box_right img{
height: 358px;
width: 258px;
}
._up_box_left_tips,._up_box_right_tips{
font-size: 18px;
color: #666666;
margin: 10px;
}
._up_box_left_tips span,._up_box_right_tips span{
font-size: 18px;
color: #5079ED;
font-weight: bold
}
._up_box_right_tips span{
color: #666666;
}
._op_btn{
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #5079ED;
color: white;
font-size: 54px;
font-weight: bolder;
line-height: 90px;
text-align: center;
position: absolute;
top: 130px;
left: 80px;
}
._op_btn:hover{
background-color: #2853CC;
}
.w215{
width: 215px;
}
.text_a_center{
text-align: center;
}
.upload-demo2 .el-upload-dragger{
width: 243px;
height: 152px;
}
.upload-demo_img2{
height: 150px;
}
._op_btn2{
left: 95px;
top: 45px;
width: 60px;
height: 60px;
line-height: 52px;
}
._up_box2{
padding-bottom: 0;
border: none;
}
._id_card .text_a_center{
background-color: white;
padding: 10px;
}
._link{
color: #47A5FF !important;
cursor: pointer;
font-weight: 700;
}
.Authentication_tips{
background-color: white;
text-align: center;
padding: 0px 0;
color: #999;
font-size: 14px;
padding: 40px;
}
.Authentication_tips p{
font-size: 18px;
padding:20px;
}
.Authentication_tips i.iconfont {
font-size: 120px;
color: #ccc;
}
._status_str_y{
color: #E6A23C !important;
}
._status_str_g{
color: #67C23A !important;
}
._status_str_r{
color: #F56C6C !important;
}
\ No newline at end of file
src/assets/utils/awardRotate.js 0 → 100644
View file @ 6006d1f0
(function ($) {
var supportedCSS, styles = document.getElementsByTagName("head")[0].style, toCheck = "transformProperty WebkitTransform OTransform msTransform MozTransform".split(" ");
for (var a = 0; a < toCheck.length; a++) if (styles[toCheck[a]] !== undefined) supportedCSS = toCheck[a];
// Bad eval to preven google closure to remove it from code o_O
// After compresion replace it back to var IE = 'v' == '\v'
var IE = eval('"v"=="\v"');
jQuery.fn.extend({
rotate: function (parameters) {
if (this.length === 0 || typeof parameters == "undefined") return;
if (typeof parameters == "number") parameters = { angle: parameters };
var returned = [];
for (var i = 0, i0 = this.length; i < i0; i++) {
var element = this.get(i);
if (!element.Wilq32 || !element.Wilq32.PhotoEffect) {
var paramClone = $.extend(true, {}, parameters);
var newRotObject = new Wilq32.PhotoEffect(element, paramClone)._rootObj;
returned.push($(newRotObject));
}
else {
element.Wilq32.PhotoEffect._handleRotation(parameters);
}
}
return returned;
},
getRotateAngle: function () {
var ret = [];
for (var i = 0, i0 = this.length; i < i0; i++) {
var element = this.get(i);
if (element.Wilq32 && element.Wilq32.PhotoEffect) {
ret[i] = element.Wilq32.PhotoEffect._angle;
}
}
return ret;
},
stopRotate: function () {
for (var i = 0, i0 = this.length; i < i0; i++) {
var element = this.get(i);
if (element.Wilq32 && element.Wilq32.PhotoEffect) {
clearTimeout(element.Wilq32.PhotoEffect._timer);
}
}
}
});
// Library agnostic interface
Wilq32 = window.Wilq32 || {};
Wilq32.PhotoEffect = (function () {
if (supportedCSS) {
return function (img, parameters) {
img.Wilq32 = {
PhotoEffect: this
};
this._img = this._rootObj = this._eventObj = img;
this._handleRotation(parameters);
}
} else {
return function (img, parameters) {
// Make sure that class and id are also copied - just in case you would like to refeer to an newly created object
this._img = img;
this._rootObj = document.createElement('span');
this._rootObj.style.display = "inline-block";
this._rootObj.Wilq32 =
{
PhotoEffect: this
};
img.parentNode.insertBefore(this._rootObj, img);
if (img.complete) {
this._Loader(parameters);
} else {
var self = this;
// TODO: Remove jQuery dependency
jQuery(this._img).bind("load", function () {
self._Loader(parameters);
});
}
}
}
})();
Wilq32.PhotoEffect.prototype = {
_setupParameters: function (parameters) {
this._parameters = this._parameters || {};
if (typeof this._angle !== "number") this._angle = 0;
if (typeof parameters.angle === "number") this._angle = parameters.angle;
this._parameters.animateTo = (typeof parameters.animateTo === "number") ? (parameters.animateTo) : (this._angle);
this._parameters.step = parameters.step || this._parameters.step || null;
this._parameters.easing = parameters.easing || this._parameters.easing || function (x, t, b, c, d) { return -c * ((t = t / d - 1) * t * t * t - 1) + b; }
this._parameters.duration = parameters.duration || this._parameters.duration || 1000;
this._parameters.callback = parameters.callback || this._parameters.callback || function () { };
if (parameters.bind && parameters.bind != this._parameters.bind) this._BindEvents(parameters.bind);
},
_handleRotation: function (parameters) {
this._setupParameters(parameters);
if (this._angle == this._parameters.animateTo) {
this._rotate(this._angle);
}
else {
this._animateStart();
}
},
_BindEvents: function (events) {
if (events && this._eventObj) {
// Unbinding previous Events
if (this._parameters.bind) {
var oldEvents = this._parameters.bind;
for (var a in oldEvents) if (oldEvents.hasOwnProperty(a))
// TODO: Remove jQuery dependency
jQuery(this._eventObj).unbind(a, oldEvents[a]);
}
this._parameters.bind = events;
for (var a in events) if (events.hasOwnProperty(a))
// TODO: Remove jQuery dependency
jQuery(this._eventObj).bind(a, events[a]);
}
},
_Loader: (function () {
if (IE)
return function (parameters) {
var width = this._img.width;
var height = this._img.height;
this._img.parentNode.removeChild(this._img);
this._vimage = this.createVMLNode('image');
this._vimage.src = this._img.src;
this._vimage.style.height = height + "px";
this._vimage.style.width = width + "px";
this._vimage.style.position = "absolute"; // FIXES IE PROBLEM - its only rendered if its on absolute position!
this._vimage.style.top = "0px";
this._vimage.style.left = "0px";
/* Group minifying a small 1px precision problem when rotating object */
this._container = this.createVMLNode('group');
this._container.style.width = width;
this._container.style.height = height;
this._container.style.position = "absolute";
this._container.setAttribute('coordsize', width - 1 + ',' + (height - 1)); // This -1, -1 trying to fix ugly problem with small displacement on IE
this._container.appendChild(this._vimage);
this._rootObj.appendChild(this._container);
this._rootObj.style.position = "relative"; // FIXES IE PROBLEM
this._rootObj.style.width = width + "px";
this._rootObj.style.height = height + "px";
this._rootObj.setAttribute('id', this._img.getAttribute('id'));
this._rootObj.className = this._img.className;
this._eventObj = this._rootObj;
this._handleRotation(parameters);
}
else
return function (parameters) {
this._rootObj.setAttribute('id', this._img.getAttribute('id'));
this._rootObj.className = this._img.className;
this._width = this._img.width;
this._height = this._img.height;
this._widthHalf = this._width / 2; // used for optimisation
this._heightHalf = this._height / 2;// used for optimisation
var _widthMax = Math.sqrt((this._height) * (this._height) + (this._width) * (this._width));
this._widthAdd = _widthMax - this._width;
this._heightAdd = _widthMax - this._height; // widthMax because maxWidth=maxHeight
this._widthAddHalf = this._widthAdd / 2; // used for optimisation
this._heightAddHalf = this._heightAdd / 2;// used for optimisation
this._img.parentNode.removeChild(this._img);
this._aspectW = ((parseInt(this._img.style.width, 10)) || this._width) / this._img.width;
this._aspectH = ((parseInt(this._img.style.height, 10)) || this._height) / this._img.height;
this._canvas = document.createElement('canvas');
this._canvas.setAttribute('width', this._width);
this._canvas.style.position = "relative";
this._canvas.style.left = -this._widthAddHalf + "px";
this._canvas.style.top = -this._heightAddHalf + "px";
this._canvas.Wilq32 = this._rootObj.Wilq32;
this._rootObj.appendChild(this._canvas);
this._rootObj.style.width = this._width + "px";
this._rootObj.style.height = this._height + "px";
this._eventObj = this._canvas;
this._cnv = this._canvas.getContext('2d');
this._handleRotation(parameters);
}
})(),
_animateStart: function () {
if (this._timer) {
clearTimeout(this._timer);
}
this._animateStartTime = +new Date;
this._animateStartAngle = this._angle;
this._animate();
},
_animate: function () {
var actualTime = +new Date;
var checkEnd = actualTime - this._animateStartTime > this._parameters.duration;
// TODO: Bug for animatedGif for static rotation ? (to test)
if (checkEnd && !this._parameters.animatedGif) {
clearTimeout(this._timer);
}
else {
if (this._canvas || this._vimage || this._img) {
var angle = this._parameters.easing(0, actualTime - this._animateStartTime, this._animateStartAngle, this._parameters.animateTo - this._animateStartAngle, this._parameters.duration);
this._rotate((~~(angle * 10)) / 10);
}
if (this._parameters.step) {
this._parameters.step(this._angle);
}
var self = this;
this._timer = setTimeout(function () {
self._animate.call(self);
}, 10);
}
// To fix Bug that prevents using recursive function in callback I moved this function to back
if (this._parameters.callback && checkEnd) {
this._angle = this._parameters.animateTo;
this._rotate(this._angle);
this._parameters.callback.call(this._rootObj);
}
},
_rotate: (function () {
var rad = Math.PI / 180;
if (IE)
return function (angle) {
this._angle = angle;
this._container.style.rotation = (angle % 360) + "deg";
}
else if (supportedCSS)
return function (angle) {
this._angle = angle;
this._img.style[supportedCSS] = "rotate(" + (angle % 360) + "deg)";
}
else
return function (angle) {
this._angle = angle;
angle = (angle % 360) * rad;
// clear canvas
this._canvas.width = this._width + this._widthAdd;
this._canvas.height = this._height + this._heightAdd;
// REMEMBER: all drawings are read from backwards.. so first function is translate, then rotate, then translate, translate..
this._cnv.translate(this._widthAddHalf, this._heightAddHalf); // at least center image on screen
this._cnv.translate(this._widthHalf, this._heightHalf); // we move image back to its orginal
this._cnv.rotate(angle); // rotate image
this._cnv.translate(-this._widthHalf, -this._heightHalf); // move image to its center, so we can rotate around its center
this._cnv.scale(this._aspectW, this._aspectH); // SCALE - if needed ;)
this._cnv.drawImage(this._img, 0, 0); // First - we draw image
}
})()
}
if (IE) {
Wilq32.PhotoEffect.prototype.createVMLNode = (function () {
document.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)");
try {
!document.namespaces.rvml && document.namespaces.add("rvml", "urn:schemas-microsoft-com:vml");
return function (tagName) {
return document.createElement('<rvml:' + tagName + ' class="rvml">');
};
} catch (e) {
return function (tagName) {
return document.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">');
};
}
})();
}
})(jQuery);
src/assets/utils/draw.js 0 → 100644
View file @ 6006d1f0
var turnplate = {
restaraunts: [], //大转盘奖品名称
colors: [], //大转盘奖品区块对应背景颜色
outsideRadius: 192, //大转盘外圆的半径
textRadius: 155, //大转盘奖品位置距离圆心的距离
insideRadius: 68, //大转盘内圆的半径
startAngle: 0, //开始角度
bRotate: false, //false:停止;ture:旋转
time: 2000,
noBegun: false,
};
let param = window.location.href.split('?')[1].split("&") ? window.location.href.split('?')[1].split("&") : null;
let id = param ? param[0].split('=')[1] : 0;
let type = param ? param[1].split('=')[1] : 0;
let remainingCount = 0;
let LotteryAward = [];
let colors = [];
getRemainingCount()
getLotteryAwardItem()
function getRemainingCount() { // 获取用户剩余抽奖次数
$.ajax({
type: "POST",
url: `${getApiUrl().urlJava}api/sell/lottery/getLotteryRemainingCount`,
contentType: "application/json",
data: getJavaData({ lotteryId: id }),
async: false,//使用同步的方式,true为异步方式
success: function (res) {
if (res.resultCode === 1) {
remainingCount = res.data.remainingCount
$('#remainingCount').html(res.data.remainingCount)
}
},
error: function (res) {
// alert("提交失败" + JSON.stringify(res));
}
});
}
function getLotteryAwardItem() {
$.ajax({
type: "POST",
url: `${getApiUrl().urlJava}api/sell/lottery/getLotteryAwardItem`,
contentType: "application/json",
data: getJavaData({ lotteryId: id }),
async: false,//使用同步的方式,true为异步方式
success: function (res) {
if (res.resultCode === 1) {
// LotteryAward.push("开始")
// colors.push("#ffbe04")
let data = res.data
if (data.length > 0) {
data.forEach((x, index) => {
LotteryAward.push({
name: x.awardName,
id: x.awardType
})
colors.push((index % 2 == 0) ? "#ffeebe" : "#ffbe04")
turnplate.noBegun = false
});
} else {
for (let i = 0; i < 6; i++) {
LotteryAward.push({
name: '暂无奖项',
id: 0
})
colors.push((i % 2 == 0) ? "#ffeebe" : "#ffbe04")
turnplate.noBegun = true
}
}
setTimeout(() => {
$('.spinner').hide()
}, 1000)
}
},
error: function (res) {
// alert("提交失败" + JSON.stringify(res));
}
});
}
$(document).ready(function () {
//动态添加大转盘的奖品与奖品区域背景颜色
console.log(LotteryAward)
turnplate.restaraunts = LotteryAward;
turnplate.colors = colors;
//旋转转盘 item:奖品位置; txt：提示语;
var rotateFn = function (item, txt) {
var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length * 2));
if (angles < 270) {
angles = 270 - angles;
} else {
angles = 360 - angles + 270;
}
$('#wheelcanvas').stopRotate();
$('#wheelcanvas').rotate({
angle: 0,
animateTo: angles + 1800,
duration: turnplate.time,
callback: function () { //回调
turnplate.bRotate = false
}
});
};
$('.pointer').click(function () {
if (turnplate.bRotate || turnplate.noBegun) return;
if (remainingCount === 0 || !remainingCount) return layer.msg("抽奖次数已用完")
// if (!type || type === '2' || remainingCount < 1) {
// if (!type || type === '2') {
// return layer.msg("请在活动时间内参与！")
// } else {
// return layer.msg("抽奖次数已用完!")
// }
// }
$.ajax({
type: "POST",
url: `${getApiUrl().urlJava}api/sell/lottery/getLotteryAward`,
contentType: "application/json",
data: getJavaData({ lotteryId: id }),
async: false,//使用同步的方式,true为异步方式
success: function (res) {
if (res.resultCode === 1) {
remainingCount = remainingCount - 1
$('#remainingCount').html(remainingCount)
if (res.data.winningType === 2) {
LotteryAward.forEach((x, index) => {
if (x.id === 1) {
rotateFn(index + 1, res.data.awardName);
turnplate.bRotate = !turnplate.bRotate;
setTimeout(() => {
$('.status').html(`很遗憾`)
$('.your').html(`未中奖`)
$('.tips').show()
}, turnplate.time)
}
})
} else {
LotteryAward.forEach((x, index) => {
if (x.name === res.data.awardName) {
rotateFn(index + 1, res.data.awardName);
turnplate.bRotate = !turnplate.bRotate;
setTimeout(() => {
if (res.data.winningType === 0) {
$('.status').html(`很遗憾`)
$('.your').html(`未中奖`)
} else if (res.data.winningType === 1) {
$('.status').html(`恭喜你`)
$('.your').html(`获得奖品 <span class="reward">${res.data.awardName}</span>`)
}
$('.tips').show()
}, turnplate.time)
}
})
}
} else if (res.resultCode === 0) {
layer.msg(res.message)
}
},
error: function (res) {
// alert("提交失败" + JSON.stringify(res));
}
});
// turnplate.bRotate = !turnplate.bRotate;
//获取随机数(奖品个数范围内)
// var item = rnd(1, turnplate.restaraunts.length);
//奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
// rotateFn(item, turnplate.restaraunts[item - 1]);
});
});
$(".rules_footer").click(function () {
$(".rules_cover,.rules_footer").hide();
$(".rules_con").css("height", "95vw");
});
function rnd(n, m) {
var random = Math.floor(Math.random() * (m - n + 1) + n);
return random;
}
//页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
window.onload = function () {
drawRouletteWheel();
};
function drawRouletteWheel() {
var canvas = document.getElementById("wheelcanvas");
if (canvas.getContext) {
//根据奖品个数计算圆周角度
var arc = Math.PI / (turnplate.restaraunts.length / 2);
var ctx = canvas.getContext("2d");
//在给定矩形内清空一个矩形
ctx.clearRect(0, 0, 422, 422);
//strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
ctx.strokeStyle = "#FFBE04";
//font 属性设置或返回画布上文本内容的当前字体属性
ctx.font = 'bold 18px Microsoft YaHei';
for (var i = 0; i < turnplate.restaraunts.length; i++) {
var angle = turnplate.startAngle + i * arc;
ctx.fillStyle = turnplate.colors[i];
ctx.beginPath();
//arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）
ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);
ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
//锁画布(为了保存之前的画布状态)
ctx.save();
//改变画布文字颜色
var b = i + 2;
if (b % 2) {
ctx.fillStyle = "#E5302F";
} else {
ctx.fillStyle = "#E5302F";
};
//----绘制奖品开始----
var text = turnplate.restaraunts[i].name;
var line_height = 17;
//translate方法重新映射画布上的 (0,0) 位置
ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);
//rotate方法旋转当前的绘图
ctx.rotate(angle + arc / 2 + Math.PI / 2);
/** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
// if (text.indexOf("盘") > 0) {//判断字符进行换行
// var texts = text.split("盘");
// for (var j = 0; j < texts.length; j++) {
// ctx.font = j == 0 ? 'bold 20px Microsoft YaHei' : 'bold 18px Microsoft YaHei';
// if (j == 0) {
// ctx.fillText(texts[j] + "盘", -ctx.measureText(texts[j] + "盘").width / 2, j * line_height);
// } else {
// ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height * 1.2); //调整行间距
// }
// }
// } else if (text.indexOf("盘") == -1 && text.length > 8) {//奖品名称长度超过一定范围
// text = text.substring(0, 8) + "||" + text.substring(8);
// var texts = text.split("||");
// for (var j = 0; j < texts.length; j++) {
// ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
// }
// } else {
//在画布上绘制填色的文本。文本的默认颜色是黑色
//measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
// }
//添加对应图标
// if(text.indexOf(turnplate.restaraunts[0])>=0){
// var img= document.getElementById("diy1-img");
// img.onload=function(){
// ctx.drawImage(img,-35,20);
// };
// ctx.drawImage(img,-35,20);
// };
// if(text.indexOf(turnplate.restaraunts[1])>=0){
// var img= document.getElementById("shan-img");
// img.onload=function(){
// ctx.drawImage(img,-35,20);
// };
// ctx.drawImage(img,-35,20);
// };
// if(text.indexOf(turnplate.restaraunts[2])>=0){
// var img= document.getElementById("diy5-img");
// img.onload=function(){
// ctx.drawImage(img,-25,35);
// };
// ctx.drawImage(img,-30,35);
// };
// if(text.indexOf(turnplate.restaraunts[3])>=0){
// var img= document.getElementById("shan-img");
// img.onload=function(){
// ctx.drawImage(img,-35,20);
// };
// ctx.drawImage(img,-35,20);
// };
// if(text.indexOf(turnplate.restaraunts[4])>=0){
// var img= document.getElementById("diy3-img");
// img.onload=function(){
// ctx.drawImage(img,-30,20);
// };
// ctx.drawImage(img,-30,20);
// };
// if(text.indexOf(turnplate.restaraunts[5])>=0){
// var img= document.getElementById("shan-img");
// img.onload=function(){
// ctx.drawImage(img,-35,20);
// };
// ctx.drawImage(img,-35,20);
// };
// if(text.indexOf(turnplate.restaraunts[6])>=0){
// var img= document.getElementById("diy2-img");
// img.onload=function(){
// ctx.drawImage(img,-30,20);
// };
// ctx.drawImage(img,-30,20);
// };
// if(text.indexOf(turnplate.restaraunts[7])>=0){
// var img= document.getElementById("shan-img");
// img.onload=function(){
// ctx.drawImage(img,-35,20);
// };
// ctx.drawImage(img,-35,20);
// };
//把当前画布返回（调整）到上一个save()状态之前
ctx.restore();
//----绘制奖品结束----
}
}
};
src/components/ActivityCenter/TurnaroundDraw.vue
View file @ 6006d1f0
......@@ -122,6 +122,7 @@
}
.page_TurnaroundDraw .main_box .info_box .info_right .info_right_roll ul li>span._name{
max-width: 60px;
min-width: 60px;
}
.page_TurnaroundDraw .main_box .info_box .info_right .info_right_roll ul li>span._acc{
max-width: 72px;
......@@ -148,6 +149,62 @@
font-size: 12px;
color: white;
}
.pointer{
cursor: pointer;
}
.page_TurnaroundDraw .tips{
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.6);
position: fixed;
left: 0;
top: 0;
/* display: none; */
z-index: 2019;
}
.page_TurnaroundDraw .tips .bg{
width: 298px;
height: 353px;
margin: 0 auto;
background-image: url(../../assets/img/active/box_bg.png);
background-size: 100% 100%;
background-repeat: no-repeat;
margin-top: 10rem;
text-align: center;
position: relative;
}
.page_TurnaroundDraw .tips .bg p:nth-child(1){
color: #5F121A;
font-size: 22px;
width: 93%;
}
.page_TurnaroundDraw .tips .bg p:nth-child(2) {
color: #B43B48;
font-size: 16px;
width: 93%;
}
.page_TurnaroundDraw .tips .bg p:nth-child(3) {
position: absolute;
bottom: 2rem;
font-size: 1.5rem;
color: #FFFFFF;
width: 93%;
}
.page_TurnaroundDraw .tips ._close{
width: 3rem;
height: 3rem;
margin: 0 auto;
margin-top: 2rem;
color: #fff;
}
.page_TurnaroundDraw ._close img{
width: 100%;
}
.bg_box{
position: absolute;
top: 80px;
width: 100%;
}
</style>
<template>
......@@ -157,13 +214,13 @@
<div class="info_left">
<div class="turnplate">
<canvas class="item" id="wheelcanvas" ref="wheelcanvas" width="422px" height="422px"></canvas>
<img class="pointer" @click="startUp" src="../../assets/img/active/jt_2.png">
<img class="pointer" @click="turnplate.noBegun===true ? '' : startUp()" src="../../assets/img/active/jt_2.png">
</div>
<div class="Cushion">
<div class="trapezoid">
</div>
<p class="">抽奖次数： <span>02</span></p>
<p class="">抽奖次数： <span>{{remainingCount}}</span></p>
</div>
<div class="_scushion">
......@@ -173,60 +230,10 @@
<img src="../../assets/img/active/active_tittle.png" alt="">
<div class="info_right_roll">
<ul id="RollBox">
<li>
<span class="_name">非法所得发</span>
<span class="_acc">158****1254</span>
<span class="_last">抽中<span class="_prize">满2000元减500元券</span></span>
</li>
<li>
<span class="_name">非法所得发</span>
<span class="_acc">158****1254</span>
<span class="_last">抽中<span class="_prize">满2000元减500元券</span></span>
</li>
<li>
<span class="_name">非法所得发</span>
<span class="_acc">158****1254</span>
<span class="_last">抽中<span class="_prize">满2000元减500元券</span></span>
</li>
<li>
<span class="_name">非法所得发</span>
<span class="_acc">158****1254</span>
<span class="_last">抽中<span class="_prize">满2000元减500元券</span></span>
</li>
<li>
<span class="_name">非法所得发</span>
<span class="_acc">158****1254</span>
<span class="_last">抽中<span class="_prize">满2000元减500元券</span></span>
</li>
<li>
<span class="_name">非法所得发</span>
<span class="_acc">158****1254</span>
<span class="_last">抽中<span class="_prize">满2000元减500元券</span></span>
</li>
<li>
<span class="_name">非法所得发</span>
<span class="_acc">158****1254</span>
<span class="_last">抽中<span class="_prize">满2000元减500元券</span></span>
</li>
<li>
<span class="_name">非法所得发</span>
<span class="_acc">158****1254</span>
<span class="_last">抽中<span class="_prize">满2000元减500元券</span></span>
</li>
<li>
<span class="_name">非法所得发</span>
<span class="_acc">158****1254</span>
<span class="_last">抽中<span class="_prize">满2000元减500元券</span></span>
</li>
<li>
<span class="_name">非法所得发</span>
<span class="_acc">158****1254</span>
<span class="_last">抽中<span class="_prize">满2000元减500元券</span></span>
</li>
<li>
<span class="_name">非法所得发</span>
<span class="_acc">158****1254</span>
<span class="_last">抽中<span class="_prize">满2000元减500元券</span></span>
<li v-for="item in TaskLotteryWinningList">
<span class="_name">{{item.userName}}</span>
<span class="_acc">{{item.mobile}}</span>
<span class="_last">抽中<span class="_prize">{{item.awardName}}</span></span>
</li>
</ul>
</div>
......@@ -244,6 +251,18 @@
</div>
</div>
</div>
<div class="tips" v-if="showTips">
<div class="bg">
<div class="bg_box">
<p class="status">{{text1}}</p>
<p class="your" v-if="text1 === '很遗憾'">{{text2}}</p>
<p v-else>获得奖品 <span class="reward">{{text2}}</span></p>
</div>
</div>
<div class="_close" @click="showTips = false">
<img src="../../assets/img/active/close.png" alt="">
</div>
</div>
</el-col>
</el-row>
</template>
......@@ -259,14 +278,16 @@ export default {
insideRadius: 68, //大转盘内圆的半径
startAngle: 0, //开始角度
bRotate: false, //false:停止;ture:旋转
time: 2000,
time: 5000,
noBegun: false
},
LotteryAward: [
{
name: "一等奖"
}
]
LotteryAward: [],
TaskLotteryWinningList: [],
lotteryId: 0,
remainingCount: 0,
showTips: false,
text1: '很遗憾',
text2: '未中奖',
};
},
mounted() {
......@@ -290,25 +311,141 @@ export default {
"#FFFFFF",
"#5fcbd5"
];
this.drawRouletteWheel();
this.getChouJiang();
this.startmarquee('30', 20, 0, 'RollBox')
},
methods: {
getChouJiang: function () {
this.apiJavaPost('/api/sell/lottery/getB2bTaskLottery', {}, res=>{
let nowTime = this.getNowDate()
let LotteryAward = [];
let colors = [];
if(res.data.resultCode==1){
let data = res.data.data.lotteryAwardItem
if (data.length > 0) {
data.forEach((x, index) => {
LotteryAward.push({
name: x.awardName,
id: x.awardType
})
colors.push((index % 2 == 0) ? "#ffeebe" : "#ffbe04")
this.turnplate.noBegun = false
});
} else {
for (let i = 0; i < 6; i++) {
LotteryAward.push({
name: '暂无奖项',
id: 0
})
colors.push((i % 2 == 0) ? "#ffeebe" : "#ffbe04")
this.turnplate.noBegun = true
}
}
this.turnplate.restaraunts = LotteryAward;
this.turnplate.colors = colors;
this.lotteryId = res.data.data.id
this.LotteryAward = LotteryAward
this.getCishu()
}else{
this.Error(res.data.message);
for (let i = 0; i < 6; i++) {
LotteryAward.push({
name: '暂无奖项',
id: 0
})
colors.push((i % 2 == 0) ? "#ffeebe" : "#ffbe04")
this.turnplate.noBegun = true
}
this.turnplate.restaraunts = LotteryAward;
this.turnplate.colors = colors;
this.LotteryAward = LotteryAward
}
this.drawRouletteWheel();
this.getTaskLotteryWinningList();
},null)
},
getTaskLotteryWinningList: function() {
this.apiJavaPost('/api/b2b/lottery/getTaskLotteryWinningList',{lotteryId: this.lotteryId, pageIndex: 1 ,pageSize: 20},res=>{
if(res.data.resultCode==1){
this.TaskLotteryWinningList = res.data.data.pageData
}else{
this.Error(res.data.message);
}
},null)
},
getCishu: function () {
this.apiJavaPost('/api/sell/lottery/getLotteryRemainingCount',{lotteryId: this.lotteryId},res=>{
let nowTime = this.getNowDate()
if(res.data.resultCode==1){
this.remainingCount = res.data.data.remainingCount
}else{
this.Error(res.data.message);
}
},null)
},
startUp: function() {
var item = this.rnd(1, this.turnplate.restaraunts.length);
var angles = item * (360 / this.turnplate.restaraunts.length) - (360 / (this.turnplate.restaraunts.length*2));
if(angles<270){
if (this.turnplate.bRotate || this.turnplate.noBegun) return;
if (this.remainingCount === 0 || !this.remainingCount) return this.$message.error("抽奖次数已用完")
this.apiJavaPost('/api/sell/lottery/getLotteryAward', {lotteryId: this.lotteryId}, res=>{
if (res.data.resultCode === 1) {
this.remainingCount = this.remainingCount - 1
if (res.data.data.winningType === 2) {
console.log('if',1111)
let _this = this;
this.LotteryAward.forEach((x, index) => {
if (x.id === 1) {
console.log('if',2222)
this.rotateFn(index + 1, res.data.awardName);
this.turnplate.bRotate = !this.turnplate.bRotate;
setTimeout(() => {
_this.text1= '很遗憾';
_this.text2= '未中奖';
_this.showTips = true;
_this.getTaskLotteryWinningList()
}, this.turnplate.time)
}
})
} else {
console.log('else',1111,res.data.data)
this.LotteryAward.forEach((x, index) => {
if (x.name === res.data.data.awardName) {
console.log('else',2222)
let _this = this;
this.rotateFn(index + 1, res.data.awardName);
this.turnplate.bRotate = !this.turnplate.bRotate;
setTimeout(() => {
if (res.data.data.winningType === 0) {
_this.text1= '很遗憾';
_this.text2= '未中奖';
} else if (res.data.data.winningType === 1) {
_this.text1= '恭喜你';
_this.text2= res.data.data.awardName;
}
_this.showTips = true;
_this.getTaskLotteryWinningList()
}, this.turnplate.time)
}
})
}
}
}, null)
},
rotateFn: function (item, txt) {
console.log(item)
let _this = this
var angles = item * (360 / this.turnplate.restaraunts.length) - (360 / (this.turnplate.restaraunts.length * 2));
if (angles < 270) {
angles = 270 - angles;
}else{
} else {
angles = 360 - angles + 270;
}
$('#wheelcanvas').stopRotate();
$('#wheelcanvas').rotate({
angle:0,
animateTo:angles+1800,
duration:8000,
callback:function (){ //回调
alert('恭喜中奖了');
angle: 0,
animateTo: angles + 1800,
duration: _this.turnplate.time,
callback: function () { //回调
_this.turnplate.bRotate = false
}
});
},
......@@ -387,9 +524,8 @@ export default {
} else {
ctx.fillStyle = "#E5302F";
}
//----绘制奖品开始----
var text = _this.turnplate.restaraunts[i];
var text = _this.turnplate.restaraunts[i].name;
var line_height = 17;
//translate方法重新映射画布上的 (0,0) 位置
ctx.translate(
......
src/components/DependentTravel/IndependentTravel.vue
View file @ 6006d1f0
<template>
<div class="Indepentdent">
<div class="top_img">
<div style="padding:15px 0 0 30px">
<img src="../../assets/img/travel/logo.png" alt="">
</div>
<div class="japen">
<p style="font-size:55px;padding:15px 0">JAPAN</p>
<p>日本 自由行</p>
<p class="_name">JAPAN</p>
<p class="s_name">日本 自由行</p>
</div>
<div class="box">
<div class="boxCont"></div>
<img src="../../assets/img/banner-dibu_09.png" alt>
<!-- <div class="boxCont"></div> -->
</div>
</div>
<el-row class="back_middle" :gutter="20">
<img class="left1" src="../../assets/img/travel/left1.png" alt="">
<img class="right1" src="../../assets/img/travel/right1.png" alt="">
<el-row class="back_middle">
<img class="left1" src="../../assets/img/travel/left1.png" alt>
<img class="right1" src="../../assets/img/travel/right1.png" alt>
<el-row class="max-w1500" :gutter="0">
<el-col :span="18" :offset="3">
<div class="pro_list">
<!-- <div class="pro_list">
<div @mouseenter="enter(0)" @mouseleave="leave">
<img v-if="prolist==0" src="../../assets/img/travel/hover0.png" alt="">
<img v-if="prolist==0" src="../../assets/img/travel/hover0.png" alt>
<p>大阪</p>
<p class="fg"></p>
<p>osaka</p>
</div>
<div @mouseenter="enter(1)" @mouseleave="leave">
<img v-if="prolist==1" src="../../assets/img/travel/hover1.png" alt="">
<img v-if="prolist==1" src="../../assets/img/travel/hover1.png" alt>
<p>东京</p>
<p class="fg"></p>
<p>Tokyo</p>
</div>
<div @mouseenter="enter(2)" @mouseleave="leave">
<img v-if="prolist==2" src="../../assets/img/travel/hover2.png" alt="">
<img v-if="prolist==2" src="../../assets/img/travel/hover2.png" alt>
<p>冲绳</p>
<p class="fg"></p>
<p>Okinawa</p>
</div>
<div @mouseenter="enter(3)" @mouseleave="leave">
<img v-if="prolist==3" src="../../assets/img/travel/hover3.png" alt="">
<img v-if="prolist==3" src="../../assets/img/travel/hover3.png" alt>
<p>北海道</p>
<p class="fg"></p>
<p>Hokkaido</p>
</div>
<div @mouseenter="enter(4)" @mouseleave="leave">
<img v-if="prolist==4" src="../../assets/img/travel/hover4.png" alt="">
<img v-if="prolist==4" src="../../assets/img/travel/hover4.png" alt>
<p>富士山</p>
<p class="fg"></p>
<p>Mount Fuji</p>
</div>
</div>
</div> -->
<!-- 当季精选特惠 -->
<div class="_top_box clearfix">
<div class='wrap'>
<div class='left common'></div>
<div class='right common'></div>
<img src="../../assets/img/travel/top_1.png" alt="">
<p>快速提交需求单</p>
</div>
<div class="partition">
<span></span>
<span></span>
<span></span>
</div>
<div class='wrap'>
<div class='left common'></div>
<div class='right common'></div>
<img src="../../assets/img/travel/top_2.png" alt="">
<p>免费发送方案</p>
</div>
<div class="partition">
<span></span>
<span></span>
<span></span>
</div>
<div class='wrap'>
<div class='left common'></div>
<div class='right common'></div>
<img src="../../assets/img/travel/top_3.png" alt="">
<p>沟通确认行程</p>
</div>
<div class="partition">
<span></span>
<span></span>
<span></span>
</div>
<div class='wrap'>
<div class='left common'></div>
<div class='right common'></div>
<img src="../../assets/img/travel/top_4.png" alt="">
<p>签合同出行</p>
</div>
<div class="partition_last">
<span>></span>
</div>
<div class='wrap wrap2'>
<div class='left common'></div>
<div class='right common'></div>
<p>立即定制</p>
</div>
</div>
<div style="margin-top:40px">
<p style="text-align:center;font-family:PingFang-SC-Regular;">Hot areas in the season</p>
<div class="djjx">
......@@ -57,86 +105,154 @@
</div>
<div class="Season_content">
<div>
<div @mouseenter="Seasonenter(0)" @mouseleave="Seasonleave(0)" class="Season_content_list">
<div style="position:relative">
<img ref="img0" id="img0" src="../../assets/img/visa/country1.png" alt="">
<div class="Season_content_list">
<div style="position:relative;height: 35px;background-color: white;bottom: -5px;">
<!-- <img ref="img0" id="img0" src="../../assets/img/visa/country1.png" alt=""> -->
<div :class="SeasonBtn==0 ? 'Season_moneyActive' :''" class="Season_money">
<p style="font-size:12px;padding-top:10px">RMB</p>
<p style="font-size:14px;font-weight:600">5680<span style="font-size:12px;font-weight:10">起</span></p>
<p style="font-size:14px;font-weight:600">
5680
<span style="font-size:12px;font-weight:10">起</span>
</p>
</div>
</div>
<div style="padding:25px 10px 15px 10px">
<p style="font-size:16px;font-weight:600;text-align:center">东京-大阪自由行</p>
<div class="text">四季变化明显，樱花季节，富士山，银座，新宿，池袋东护城河对岸矗立着一幢标志性建筑飞檐重阁白墙黑瓦，精巧的建筑连同浓郁的日本民族风格一起半掩半映在绿树丛中，加上氤氲萦绕的氛围，使皇宫更显得几分神秘。仿佛整个东京仅存的一丁点文化底蕴都藏进了对岸的树丛里。</div>
<div style="padding: 3px 10px 10px;">
<p
style="font-size:16px;font-weight:600;text-align:center;background-color: white;"
>东京-大阪自由行</p>
<div
class="text"
>四季变化明显，樱花季节，富士山，银座，新宿，池袋东护城河对岸矗立着一幢标志性建筑飞檐重阁白墙黑瓦，精巧的建筑连同浓郁的日本民族风格一起半掩半映在绿树丛中，加上氤氲萦绕的氛围，使皇宫更显得几分神秘。仿佛整个东京仅存的一丁点文化底蕴都藏进了对岸的树丛里。</div>
</div>
<div>
<el-button v-if="SeasonBtn==0" size="mini" class="btn">立即购买</el-button>
<el-button size="mini" class="btn">立即购买</el-button>
</div>
</div>
</div>
<div>
<div @mouseenter="Seasonenter(1)" @mouseleave="Seasonleave(1)" class="Season_content_list">
<div style="position:relative">
<img ref="img1" id="img1" src="../../assets/img/visa/country1.png" alt="">
<div class="Season_content_list">
<div style="position:relative;height: 35px;background-color: white;bottom: -5px;">
<!-- <img ref="img1" id="img1" src="../../assets/img/visa/country1.png" alt=""> -->
<div :class="SeasonBtn==1 ? 'Season_moneyActive' :''" class="Season_money">
<p style="font-size:12px;padding-top:10px">RMB</p>
<p style="font-size:14px;font-weight:600">5680<span style="font-size:12px;font-weight:10">起</span></p>
<p style="font-size:14px;font-weight:600">
5680
<span style="font-size:12px;font-weight:10">起</span>
</p>
</div>
</div>
<div style="padding:25px 10px 15px 10px">
<p style="font-size:16px;font-weight:600;text-align:center">东京-大阪自由行</p>
<div class="text">四季变化明显，樱花季节，富士山，银座，新宿，池袋东护城河对岸矗立着一幢标志性建筑飞檐重阁白墙黑瓦，精巧的建筑连同浓郁的日本民族风格一起半掩半映在绿树丛中，加上氤氲萦绕的氛围，使皇宫更显得几分神秘。仿佛整个东京仅存的一丁点文化底蕴都藏进了对岸的树丛里。</div>
<div style="padding: 3px 10px 10px;">
<p
style="font-size:16px;font-weight:600;text-align:center;background-color: white;"
>东京-大阪自由行</p>
<div
class="text"
>四季变化明显，樱花季节，富士山，银座，新宿，池袋东护城河对岸矗立着一幢标志性建筑飞檐重阁白墙黑瓦，精巧的建筑连同浓郁的日本民族风格一起半掩半映在绿树丛中，加上氤氲萦绕的氛围，使皇宫更显得几分神秘。仿佛整个东京仅存的一丁点文化底蕴都藏进了对岸的树丛里。</div>
</div>
<div>
<el-button v-if="SeasonBtn==1" size="mini" class="btn">立即购买</el-button>
<el-button size="mini" class="btn">立即购买</el-button>
</div>
</div>
</div>
<div>
<div @mouseenter="Seasonenter(2)" @mouseleave="Seasonleave(2)" class="Season_content_list">
<div style="position:relative">
<img ref="img2" id="img2" src="../../assets/img/visa/country1.png" alt="">
<!-- -->
<div class="Season_content_list">
<div style="position:relative;height: 35px;background-color: white;bottom: -5px;">
<!-- <img ref="img2" id="img2" src="../../assets/img/visa/country1.png" alt=""> -->
<div :class="SeasonBtn==2 ? 'Season_moneyActive' :''" class="Season_money">
<p style="font-size:12px;padding-top:10px">RMB</p>
<p style="font-size:14px;font-weight:600">5680<span style="font-size:12px;font-weight:10">起</span></p>
<p style="font-size:14px;font-weight:600">
5680
<span style="font-size:12px;font-weight:10">起</span>
</p>
</div>
</div>
<div style="padding:25px 10px 15px 10px">
<p style="font-size:16px;font-weight:600;text-align:center">东京-大阪自由行</p>
<div class="text">四季变化明显，樱花季节，富士山，银座，新宿，池袋东护城河对岸矗立着一幢标志性建筑飞檐重阁白墙黑瓦，精巧的建筑连同浓郁的日本民族风格一起半掩半映在绿树丛中，加上氤氲萦绕的氛围，使皇宫更显得几分神秘。仿佛整个东京仅存的一丁点文化底蕴都藏进了对岸的树丛里。</div>
<div style="padding: 3px 10px 10px;">
<p
style="font-size:16px;font-weight:600;text-align:center;background-color: white;"
>东京-大阪自由行</p>
<div
class="text"
>四季变化明显，樱花季节，富士山，银座，新宿，池袋东护城河对岸矗立着一幢标志性建筑飞檐重阁白墙黑瓦，精巧的建筑连同浓郁的日本民族风格一起半掩半映在绿树丛中，加上氤氲萦绕的氛围，使皇宫更显得几分神秘。仿佛整个东京仅存的一丁点文化底蕴都藏进了对岸的树丛里。</div>
</div>
<div>
<el-button v-if="SeasonBtn==2" size="mini" class="btn">立即购买</el-button>
<el-button size="mini" class="btn">立即购买</el-button>
</div>
</div>
</div>
</div>
<div class="Season_content" style="padding: 0px 120px;">
<div>
<div class="Season_content_list">
<div style="position:relative;height: 35px;background-color: white;bottom: -5px;">
<!-- <img ref="img0" id="img0" src="../../assets/img/visa/country1.png" alt=""> -->
<div :class="SeasonBtn==0 ? 'Season_moneyActive' :''" class="Season_money">
<p style="font-size:12px;padding-top:10px">RMB</p>
<p style="font-size:14px;font-weight:600">
5680
<span style="font-size:12px;font-weight:10">起</span>
</p>
</div>
</div>
<div style="padding: 3px 10px 10px;">
<p
style="font-size:16px;font-weight:600;text-align:center;background-color: white;"
>东京-大阪自由行</p>
<div
class="text"
>四季变化明显，樱花季节，富士山，银座，新宿，池袋东护城河对岸矗立着一幢标志性建筑飞檐重阁白墙黑瓦，精巧的建筑连同浓郁的日本民族风格一起半掩半映在绿树丛中，加上氤氲萦绕的氛围，使皇宫更显得几分神秘。仿佛整个东京仅存的一丁点文化底蕴都藏进了对岸的树丛里。</div>
</div>
<div>
<el-button size="mini" class="btn">立即购买</el-button>
</div>
</div>
</div>
<div>
<div class="Season_content_list">
<div style="position:relative;height: 35px;background-color: white;bottom: -5px;">
<!-- <img ref="img1" id="img1" src="../../assets/img/visa/country1.png" alt=""> -->
<div :class="SeasonBtn==1 ? 'Season_moneyActive' :''" class="Season_money">
<p style="font-size:12px;padding-top:10px">RMB</p>
<p style="font-size:14px;font-weight:600">
5680
<span style="font-size:12px;font-weight:10">起</span>
</p>
</div>
</div>
<div style="padding: 3px 10px 10px;">
<p
style="font-size:16px;font-weight:600;text-align:center;background-color: white;"
>东京-大阪自由行</p>
<div
class="text"
>四季变化明显，樱花季节，富士山，银座，新宿，池袋东护城河对岸矗立着一幢标志性建筑飞檐重阁白墙黑瓦，精巧的建筑连同浓郁的日本民族风格一起半掩半映在绿树丛中，加上氤氲萦绕的氛围，使皇宫更显得几分神秘。仿佛整个东京仅存的一丁点文化底蕴都藏进了对岸的树丛里。</div>
</div>
<div>
<el-button size="mini" class="btn">立即购买</el-button>
</div>
</div>
</div>
</div>
</div>
</el-col>
</el-row>
<el-row class="back_middle" :gutter="20">
<img class="left1" src="../../assets/img/travel/left1.png" alt="">
<img class="right1" src="../../assets/img/travel/right1.png" alt="">
</el-row>
<el-row class="back_middle">
<img class="left1" src="../../assets/img/travel/left1.png" alt>
<img class="right1" src="../../assets/img/travel/right1.png" alt>
<el-row class="max-w1500" :gutter="0">
<el-col :span="18" :offset="3">
<div style="margin-top:45px;">
<p style="text-align:center;font-family:PingFang-SC-Regular;">Hot crash free rides</p>
<div class="djjx">
<span class="cont_top">热门速成自由行</span>
<span class="cont_bottom">2人成行快速成团出发</span>
<span class="cont_top cont_top2">热门速成自由行</span>
<span class="cont_bottom cont_bottom2">2人成行快速成团出发</span>
</div>
</div>
<el-row class="zyx">
<el-col :span="12" style="position:relative">
<div class="div_back" style="position:relative;">
<img class="img2" src="../../assets/img/travel/1.png" alt="">
<img class="img2" src="../../assets/img/travel/1.png" alt>
</div>
</el-col>
<el-col :span="2">&nbsp;</el-col>
......@@ -150,23 +266,24 @@
<p>初游推荐，樱花季漫游东京，赠人气药妆</p>
<p>三款礼遇任您选，代订富士山/镰仓一日游初游推荐，樱花季漫游东京，赠人气药妆</p>
<p>三款礼遇任您选，代订富士山/镰仓一日游</p>
</div>
<div class="zyx_pay">
<span style="color:#FF6633;font-size:12px">
<span>￥</span>
<span style="font-size:20px;font-weight:700">4880</span>
<span>起</span>
</span>
<span style="color:#EE4454;margin-left:20px"><i class="iconfont icon-dingweiweizhi"></i></span>
<span style="color:#EE4454;margin-left:20px">
<i class="iconfont icon-dingweiweizhi"></i>
</span>
<span style="font-size:12px">成都出发</span>
</div>
<el-button size="mini" style="background:#EE4454;color:#fff;width:180px">立即抢购</el-button>
<el-button
size="mini"
style="background:#EE4454;color:#fff;width:180px;padding: 8px 15px;border: 1px solid #ee4454;margin-top"
>立即抢购</el-button>
</div>
</el-col>
</el-row>
<el-row class="zyx">
<el-col :span="10">
......@@ -179,41 +296,203 @@
<p>初游推荐，樱花季漫游东京，赠人气药妆</p>
<p>三款礼遇任您选，代订富士山/镰仓一日游初游推荐，樱花季漫游东京，赠人气药妆</p>
<p>三款礼遇任您选，代订富士山/镰仓一日游</p>
</div>
<div class="zyx_pay">
<span style="color:#FF6633;font-size:12px">
<span>￥</span>
<span style="font-size:20px;font-weight:700">4880</span>
<span>起</span>
</span>
<span style="color:#EE4454;margin-left:20px"><i class="iconfont icon-dingweiweizhi"></i></span>
<span style="color:#EE4454;margin-left:20px">
<i class="iconfont icon-dingweiweizhi"></i>
</span>
<span style="font-size:12px">成都出发</span>
</div>
<el-button size="mini" style="background:#EE4454;color:#fff;width:180px">立即抢购</el-button>
</div>
</el-col>
<el-col :span="12" style="position:relative">
<div class="div_back" style="position:relative;">
<img class="img2" src="../../assets/img/travel/1.png" alt="">
<img class="img2" src="../../assets/img/travel/1.png" alt>
</div>
</el-col>
<el-col :span="2">&nbsp;</el-col>
</el-row>
<el-row class="zyx">
<el-col :span="12" style="position:relative">
<div class="div_back" style="position:relative;">
<img class="img2" src="../../assets/img/travel/1.png" alt>
</div>
</el-col>
<el-col :span="2">&nbsp;</el-col>
<el-col :span="10">
<div>
<p class="zyx_title">
东京-大阪-富士山
<span class="persontravel">2人成行</span>
</p>
<div class="zyx_content">
<p>初游推荐，樱花季漫游东京，赠人气药妆</p>
<p>三款礼遇任您选，代订富士山/镰仓一日游初游推荐，樱花季漫游东京，赠人气药妆</p>
<p>三款礼遇任您选，代订富士山/镰仓一日游</p>
</div>
<div class="zyx_pay">
<span style="color:#FF6633;font-size:12px">
<span>￥</span>
<span style="font-size:20px;font-weight:700">4880</span>
<span>起</span>
</span>
<span style="color:#EE4454;margin-left:20px">
<i class="iconfont icon-dingweiweizhi"></i>
</span>
<span style="font-size:12px">成都出发</span>
</div>
<el-button
size="mini"
style="background:#EE4454;color:#fff;width:180px;padding: 8px 15px;border: 1px solid #ee4454;margin-top"
>立即抢购</el-button>
</div>
</el-col>
</el-row>
<div>
<div class="more_btn">
<p>查看更多</p>
<p>MORE</p>
<p class="_more">MORE</p>
</div>
</div>
</el-col>
</el-row>
<div class="footer"></div>
</el-row>
<el-row class="leader max-w1500">
<div style="margin-top:45px;">
<p style="text-align:center;font-family:PingFang-SC-Regular;">Hot crash free rides</p>
<div class="djjx">
<span class="cont_top cont_top2">专业行程定制师</span>
<span class="cont_bottom cont_bottom3">选择定制师定制你的专属行程</span>
</div>
</div>
<!-- <el-col :span="18" :offset="3" class="clearfix _item_box">
<div class="_line"></div>
<div class="_content">
<div class="_t1 _t_item">
<p><i class="iconfont icon-danju"></i></p>
<p class="_text">快速提交需求单</p>
</div>
<div class="_fl _r_arrow">
<i class="iconfont icon-arrowright1"></i>
</div>
<div class="_t1 _t_item">
<p><i class="iconfont icon-shouji"></i></p>
<p class="_text">免费发送方案</p>
</div>
<div class="_fl _r_arrow">
<i class="iconfont icon-arrowright1"></i>
</div>
<div class="_t1 _t_item">
<p><i class="iconfont icon-icon--"></i></p>
<p class="_text">沟通确认行程</p>
</div>
<div class="_fl _r_arrow">
<i class="iconfont icon-arrowright1"></i>
</div>
<div class="_t1 _t_item">
<p><i class="iconfont icon-icon--1"></i></p>
<p class="_text">签订合同愉快出行</p>
</div>
</div>
</el-col> -->
<el-col :span="18" :offset="3" class="clearfix _someone">
<div class="_someone_item" @click="goPersonalTailor">
<div class="_someone_item_top">
<div>
<p class="_name">徐数学 /90后</p>
<p class="_xianlu">精通 <strong>日本线</strong></p>
</div>
</div>
<div class="_someone_item_bottom">
<div class="_someone_item_bottom_head">
<img src="../../assets/img/visa/activy.jpg" alt="">
</div>
</div>
</div>
<div class="_someone_item">
<div class="_someone_item_top">
<div>
<p class="_name">徐数学 /90后</p>
<p class="_xianlu">精通 <strong>日本线</strong></p>
</div>
</div>
<div class="_someone_item_bottom">
<div class="_someone_item_bottom_head">
<img src="../../assets/img/visa/activy.jpg" alt="">
</div>
</div>
</div>
<div class="_someone_item">
<div class="_someone_item_top">
<div>
<p class="_name">徐数学 /90后</p>
<p class="_xianlu">精通 <strong>日本线</strong></p>
</div>
</div>
<div class="_someone_item_bottom">
<div class="_someone_item_bottom_head">
<img src="../../assets/img/visa/activy.jpg" alt="">
</div>
</div>
</div>
<div class="_someone_item _someone_item_last">
<div class="_someone_item_top">
<div>
<p class="_name">徐数学 /90后</p>
<p class="_xianlu">精通 <strong>日本线</strong></p>
</div>
</div>
<div class="_someone_item_bottom">
<div class="_someone_item_bottom_head">
<img src="../../assets/img/visa/activy.jpg" alt="">
</div>
</div>
</div>
</el-col>
</el-row>
<div class="footer">
<el-row>
<div class="footer_box">
<p>我们将提供什么？</p>
<el-row>
<el-col :span="6">
<div class="f_font_box">
<i class="iconfont icon-xihao"></i>
</div>
<p class="f_tit">拒绝程式化</p>
<p class="f_tit_s">自己掌握行程定制</p>
</el-col>
<el-col :span="6">
<div class="f_font_box">
<i class="iconfont icon-zhuguan"></i>
</div>
<p class="f_tit">1800+专业定制师</p>
<p class="f_tit_s">获取更高性价比的旅游线路</p>
</el-col>
<el-col :span="6">
<div class="f_font_box">
<i class="iconfont icon-wodefangan"></i>
</div>
<p class="f_tit">免费制作行程方案</p>
<p class="f_tit_s">旅游计划更省心</p>
</el-col>
<el-col :span="6">
<div class="f_font_box">
<i class="iconfont icon-service"></i>
</div>
<p class="f_tit">一站式服务</p>
<p class="f_tit_s">省去做攻略、预订资源的繁琐流程</p>
</el-col>
</el-row>
</div>
</el-row>
</div>
</div>
</template>
<script>
......@@ -221,289 +500,617 @@ export default {
data() {
return {
top: 0,
prolist:-1,
SeasonBtn:-1,
prolist: -1,
SeasonBtn: -1
};
},
mounted() {},
methods: {
Seasonenter(num){
this.$nextTick(()=>{
this.$refs[`img${num}`].style.height = 90+"px";
this.SeasonBtn=num;
})
goPersonalTailor: function () {
this.$router.push({name: 'PersonalTailor'});
},
Seasonleave(num){
this.$nextTick(()=>{
this.$refs[`img${num}`].style.height = 130+"px";
this.SeasonBtn=-1;
})
Seasonenter(num) {
this.$nextTick(() => {
this.$refs[`img${num}`].style.height = 90 + "px";
this.SeasonBtn = num;
});
},
enter(num){
this.prolist=num;
Seasonleave(num) {
this.$nextTick(() => {
this.$refs[`img${num}`].style.height = 130 + "px";
this.SeasonBtn = -1;
});
},
leave(){
this.prolist=-1;
enter(num) {
this.prolist = num;
},
leave() {
this.prolist = -1;
}
}
};
</script>
<style>
.img2{
._fl{
float: left;
}
.max-w1500 {
max-width: 1500px;
margin: 0 auto;
}
.img2 {
}
.img2:after {
position: absolute;
content: '';
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
box-shadow:0 0 50px 30px red inset;
box-shadow: 0 0 50px 30px red inset;
}
.Indepentdent .more_btn{
.Indepentdent .more_btn {
margin: 0 auto;
margin-top:40px;
margin-top: 40px;
text-align: center;
width:191px;
width: 191px;
color: #676767;
background: url('../../assets/img/travel/more.png') no-repeat center center;
background: url("../../assets/img/travel/more.png") no-repeat center center;
font-size: 14px;
cursor: pointer;
}
.Indepentdent .more_btn p {
text-align: left;
padding-left: 45px;
}
.Indepentdent .more_btn p._more {
text-indent: 5px;
}
.div_back{
.div_back {
width: 535px;
height: 236px;
background:url('../../assets/img/travel/tc1.png') no-repeat;
background-size:100% 100%;
background: url("../../assets/img/travel/tc1.png") no-repeat;
background-size: 100% 100%;
/* display: inline-block; */
margin:5px auto;
margin: 5px auto;
}
.zyx .el-col-10>div{
.zyx .el-col-10 > div {
display: table-cell;
vertical-align: middle;
}
.zyx .el-col-10{
.zyx .el-col-10 {
display: table;
}
.zyx .persontravel{
.zyx .persontravel {
font-size: 12px;
background: #5597FF;
background: #5597ff;
color: #fff;
padding:2px 6px;
padding: 2px 6px;
font-weight: 100;
border-radius: 4px;
}
.zyx_pay{
margin:25px 0;
.zyx_pay {
margin: 25px 0;
}
.zyx_content{
margin-top:10px;
.zyx_content {
margin-top: 10px;
font-size: 14px;
color: #666666;
}
.zyx_content p{
padding:10px 0;
.zyx_content p {
padding: 10px 0;
}
.zyx .zyx_title{
.zyx .zyx_title {
color: #333333;
font-size: 16px;
font-weight: 700;
}
.zyx {
margin-top:50px;
font-family: "PingFang"
margin-top: 50px;
font-family: "PingFang";
}
.zyx img{
.zyx img {
width: 100%;
}
.Season_moneyActive{
color: #fff!important;
background: #EE4454!important;
.Season_moneyActive {
color: #fff !important;
background: #ee4454 !important;
}
.Indepentdent .footer{
.Indepentdent .footer {
width: 100%;
height: 700px;
background: url("../../assets/img/travel/footer.png");
background-size:100% 100%;
background-size: 100% 100%;
}
.back_middle .left1{
.back_middle .left1 {
position: absolute;
z-index:-2;
z-index: -2;
top: 0;
left:0;
left: 0;
}
.back_middle .right1{
.back_middle .right1 {
position: absolute;
z-index:-2;
z-index: -2;
top: 0;
right:0;
right: 0;
}
.back_middle{
.back_middle {
position: relative;
}
.Indepentdent .Season_content .Season_content_list .btn{
background: #EE4454;
.leader{
padding-top: 45px;
}
._t_item{
margin-top: 30px;
padding-top: 25px;
}
._item_box{
display: flex;
align-items: center;
}
.leader ._t1{
width: 217px;
height: 121px;
background: url(../../assets/img/travel/yunduoer.png);
background-size: 217px 121px;
background-repeat: no-repeat;
float: left;
}
.leader ._t1 p{
padding-left: 35px;
color: white;
}
.leader ._t1 p:nth-child(1){
padding-left: 75px;
}
.leader ._t1 p i.iconfont{
font-size: 24px;
}
.leader ._t1 p._text{
margin-top: 5px;
}
._item_box{
position: relative;
height: 250px;
}
._item_box ._r_arrow{
height: 34px;
width: 34px;
background-color: #EEEEEE;
color: #D5D5D5;
border-radius: 50%;
text-align: center;
line-height: 34px;
font-weight: bold;
margin-right: 40px;
margin-top: 72px;
}
._item_box ._line{
height: 1px;
width: 80%;
border-bottom: 1px dashed #76A9FA;
position: absolute;
}
._content{
position: absolute;
z-index: 2;
}
._someone{
margin-top: 40px;
}
._someone_item{
float: left;
cursor: pointer;
margin-right: 80px;
}
._someone_item_last{
margin-right: 0
}
._someone_item_top{
padding: 5px;
width: 90px;
height: 225px;
border-radius: 34px;
border: 1px dashed #666666;
margin: 0 auto;
}
._someone_item_top>div{
width: 100%;
height: 100%;
border-radius: 34px;
background-color: #EEEEEE;
display: flex;
}
._someone_item_top>div>p{
width: 20px;
height: 100%;
writing-mode: tb;
font-family: "PingFangR";
}
._someone_item_top>div>p._name{
margin-left: 15px;
text-align: center;
padding-top: 5PX;
}
._someone_item_top>div>p._xianlu{
margin-left: 15px;
padding-top: 20PX;
font-size: 20px;
}
._someone_item_bottom{
width: 192px;
height: 192px;
border-radius: 50%;
background-color: #e5e5e5;
margin-top: -55px;
padding: 8px;
}
._someone_item_bottom ._someone_item_bottom_head{
width: 192px;
height: 192px;
border-radius: 50%;
background-color: white;
}
._someone_item_bottom ._someone_item_bottom_head img{
width: 96%;
height: 96%;
border-radius: 50%;
margin: 2%;
}
.Indepentdent .Season_content .Season_content_list {
padding-top: 130px;
background: url(../../assets/img/visa/activy.jpg);
background-position: 0 0;
background-size: 300px 130px;
background-repeat: no-repeat;
transition: all linear 0.5s;
overflow: hidden;
}
._someone_item:hover ._someone_item_top{
border-color: #76a9fa;
}
._someone_item:hover ._someone_item_top>div{
background-color: #76a9fa;
}
._someone_item:hover ._someone_item_top>div>p{
color: white
}
.Indepentdent .Season_content .Season_content_list:hover {
padding-top: 90px;
}
.Season_content_list:hover .Season_money {
color: #fff !important;
background: #ee4454 !important;
}
.Indepentdent .Season_content .Season_content_list .btn {
background: #ee4454;
color: #fff;
}
.Indepentdent .Season_content .Season_content_list:hover{
.Indepentdent .Season_content .Season_content_list:hover {
cursor: pointer;
box-shadow:0px 1px 8px 0px rgba(153,153,153,0.6);
box-shadow: 0px 1px 8px 0px rgba(153, 153, 153, 0.6);
}
.Season_content_list .text{
color:#666666;
font-size:12px;
letter-spacing:2px;
padding-top:15px;
.Season_content_list .text {
color: #666666;
font-size: 12px;
letter-spacing: 2px;
padding-top: 15px;
max-height: 100px;
box-sizing: border-box;
line-height: 2;
overflow:hidden;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp:3;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.Indepentdent .Season_content .Season_content_list .Season_money{
.Season_content_list .btn {
margin-top: 5px;
}
.Indepentdent .Season_content .Season_content_list .Season_money {
position: absolute;
width: 60px;
height: 60px;
bottom:-25px;
bottom: 8px;
border-radius: 50%;
text-align: center;
background: #F5F5F5;
background: #f5f5f5;
color: #333333;
left:120px;
left: 115px;
transition: background linear 0.5s;
}
.Indepentdent .Season_content .Season_content_list img{
.Indepentdent .Season_content .Season_content_list img {
width: 100%;
height:130px;
height: 130px;
}
.Indepentdent .Season_content .Season_content_list{
.Indepentdent .Season_content .Season_content_list {
width: 285px;
margin:10px 0;
margin: 10px 0;
box-sizing: border-box;
display: inline-block;
height: 278px;
}
.Indepentdent .Season_content>div{
width:33%;
.Indepentdent .Season_content > div {
width: 33%;
text-align: center;
}
.Indepentdent .Season_content{
.Indepentdent .Season_content {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin-top:30px;
margin-top: 30px;
}
.djjx .cont_bottom{
.djjx .cont_bottom {
position: absolute;
font-size:14px;
bottom:-10px;
left:25px;
font-size: 14px;
bottom: -10px;
left: 25px;
background: #fff;
padding:0 35px;
padding: 0 35px;
color: #333333;
}
.djjx .cont_top{
.djjx .cont_top {
position: absolute;
font-size:24px;
top:-15px;
font-size: 24px;
top: -15px;
left: 30px;
background: #fff;
padding:0 20px;
padding: 0 20px;
}
.djjx .cont_top2 {
left: 15px;
}
.djjx .cont_bottom2 {
left: 18px;
}
.djjx .cont_bottom3{
padding: 1px;
}
.djjx{
width:239px;
height:40px;
background:rgba(255,255,255,1);
.djjx {
width: 239px;
height: 40px;
background: rgba(255, 255, 255, 1);
position: relative;
margin:15px auto;
background: rgba(0,0,0,0);
border:1px solid #313131;
border-radius: 16px;
margin: 15px auto;
background: rgba(0, 0, 0, 0);
border: 1px solid #313131;
/* border-radius: 16px; */
font-family: "MicrosoftYaHei";
}
.Indepentdent .top_img .japen{
width:472px;
height:92px;
.Indepentdent .top_img .japen {
width: 472px;
height: 92px;
position: relative;
margin:15px auto;
margin: 15px auto;
color: #ffffff;
text-align: center;
border: 1px solid #fff;
background: -webkit-gradient(
linear,
0% 0%,
0% 100%,
from(#6cadfe),
to(#79b4ff)
);
border: 1px solid #fff;
margin-top: 100px;
}
.Indepentdent ul,p{
margin:0;
padding:0;
.Indepentdent .top_img .japen p._name {
font-size: 100px;
padding: 15px 0px;
position: absolute;
top: -98px;
left: 50px;
background: -webkit-gradient(
linear,
0% 0%,
0% 100%,
from(#66abff),
to(#76b1ff)
);
width: 80%;
}
.Indepentdent .top_img .japen p.s_name {
padding: 15px 0px;
position: absolute;
bottom: -30px;
left: 70px;
background: -webkit-gradient(
linear,
0% 0%,
0% 100%,
from(#75b1fe),
to(#82b8ff)
);
width: 70%;
font-family: "PingFangR";
font-size: 24px;
}
.Indepentdent ul,
p {
margin: 0;
padding: 0;
}
.Indepentdent .pro_list>div:hover{
.Indepentdent .pro_list > div:hover {
border: none;
color: #fff;
/* transition: all linear .2s; */
}
.Indepentdent .pro_list>div .fg{
width:40px;
height:4px;
background:rgba(0,0,0,1);
.Indepentdent .pro_list > div .fg {
width: 40px;
height: 4px;
background: rgba(0, 0, 0, 1);
display: inline-block;
margin:10px auto;
opacity:0.2
margin: 10px auto;
opacity: 0.2;
}
.Indepentdent .pro_list>div{
.Indepentdent .pro_list > div {
display: inline-block;
width: 151px;
height: 151px;
border-radius: 50%;
border:6px solid #eee;
border: 6px solid #eee;
text-align: center;
display: flex;
flex-wrap: wrap;
flex-direction:column;
flex-direction: column;
justify-content: center;
cursor: pointer;
box-sizing: border-box;
position: relative;
}
.Indepentdent .pro_list>div img{
}
.Indepentdent .pro_list > div img {
position: absolute;
left: 0;
top:0;
z-index:-1;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
}
.Indepentdent .pro_list{
}
.Indepentdent .pro_list {
width: 100%;
display: flex;
justify-content: space-between;
}
.Indepentdent .top_img{
.Indepentdent .top_img {
width: 100%;
height: 530px;
position: relative;
background: url("../../assets/img/travel/logo_back.png");
overflow: hidden;
}
.box{
width: 100%;
height: 50px;
background: rgba(255,255,255,0);
.box {
/* width: 104%; */
height: 99px;
background: rgba(255, 255, 255, 0);
overflow: hidden;
position: absolute;
bottom:0;
left:0;
bottom: 0;
/* left: 68px; */
}
.boxCont {
/* width: 100%;
height: 137px;
border-radius: 100%;
background: #fff; */
}
._top_box{
height: 200px;
margin-top: 80px;
}
._top_box .wrap{
height: 80px;
width: 137px;
position: relative;
border-radius: 5px;
border:1px solid rgba(226, 178, 209, 1);
border-top: 0;
border-bottom: 0;
text-align: center;
float: left;
/* box-shadow:0px 1px 8px 0px rgba(164, 95, 17, 0.35); */
}
._top_box .wrap2{
background:rgba(71,165,255,1);
}
._top_box .wrap2 .common{
background:rgba(71,165,255,1);
}
._top_box .wrap2 P{
color: white;
font-weight: 800;
margin-top: 35px;
}
.wrap img{
position: relative;
top: -10px;
left: 5px;
}
.wrap p{
position: relative;
top: -10px;
}
.boxCont{
._top_box .common{
position: absolute;
height: 100%;
width: 100%;
height: 109px;
overflow: hidden;
left:0;
border:1px solid rgba(226, 178, 209, 1);
/* box-shadow:0px 1px 8px 0px rgba(164, 95, 17, 0.35); */
border-radius: 5px;
border-top: 0;
border-bottom: 0;
}
._top_box .left{
transform: rotate(60deg);
}
._top_box .right{
transform: rotate(-60deg);
}
.partition,.partition_last{
width: 80px;
float: left;
display: flex;
justify-content: space-around;
padding: 27px 15px 0 12px;
}
.partition span{
display: inline-block;
height: 12px;
width: 12px;
border-radius: 50%;
background: #fff;
background-color: #E8E8E8;
}
.partition_last span{
width:38px;
height:38px;
background:rgba(205,182,214,1);
opacity:0.75;
border-radius:50%;
text-align: center;
line-height: 38px;
font-size: 14px;
font-weight: 800;
color: white
}
.footer{
}
.footer .footer_box{
height: 340px;
padding: 50px 50px 0 50px;
text-align: center;
background-color: rgba(255, 255, 255, 0.8);
width: 1200px;
margin: 80px auto 0 auto;
}
.footer_box>p{
font-weight: bold;
font-size: 18px;
}
.f_font_box{
height: 120px;
width: 120px;
border-radius: 8px;
background-color: white;
line-height: 120px;
margin: 25px auto;
}
.footer_box p.f_tit_s{
font-size: 14px;
color: #999999;
margin-top: 10px;
}
.f_font_box i{
font-size: 50px;
background-image: -webkit-gradient(linear, left 0, right 0, from(rgba(71,121,255,1)), to(rgba(71,165,255,1)));
-webkit-background-clip: text; /*必需加前缀 -webkit- 才支持这个text值 */
-webkit-text-fill-color: transparent; /*text-fill-color会覆盖color所定义的字体颜色： */
}
</style>
src/components/DependentTravel/PersonalTailor.vue 0 → 100644
View file @ 6006d1f0
<style>
.PersonalTailor{
background-color: #F5F3E6;
height: 765px;
}
.PersonalTailor .max-w1500 {
max-width: 1500px;
margin: 0 auto;
}
.PersonalTailor .header{
height: 90px;
margin-top: 20px;
background: url(../../assets/img/travel/sirendingzhi.gif);
}
.PersonalTailor .main{
margin-top: 45px;
}
.PersonalTailor .main .info{position: relative;}
.PersonalTailor .main .info .info_{
position: relative;
height: 545px;
padding: 20px 20px 20px 30px;
}
.PersonalTailor .main .info .info_.info_left{
background-color: white;
padding: 20px 20px 20px 30px;
}
.PersonalTailor .main .info .info_.info_right{
background-color: #333333;
}
.PersonalTailor .main .info .info_.info_left .info_left_tit{
font-size: 18px;
color: #000000;
font-weight:400;
padding-bottom: 10px;
border-bottom: 1px solid #E6E6E6;
margin: 0;
}
.PersonalTailor .main .info .info_.info_left .info_left_sub{
display: flex;
align-items: center;
padding: 15px 30px;
}
.PersonalTailor .main .info .info_.info_left .info_left_sub ._sub_left>._icon,._sub_right>._icon{
display: inline-block;
background-color: #E1EDFF;
width: 38px;
height: 38px;
border-radius: 50%;
}
.PersonalTailor .main .info .info_.info_left .info_left_sub ._sub_right>._icon{
background-color: #E7E7E7;
}
.PersonalTailor .main .info .info_.info_left .info_left_sub ._sub_left .iconfont,._sub_right .iconfont{
display: inline-block;
background-color: #95BFFF;
width: 30px;
height: 30px;
border-radius: 50%;
color: #558EE5;
text-align: center;
line-height: 30px;
margin: 4px;
}
.PersonalTailor .main .info .info_.info_left .info_left_sub ._sub_right .iconfont{
color: #999999;
background-color: #BBBBBB;
}
.PersonalTailor .main .info .info_.info_left .info_left_sub ._sub_left {
width: 45%;
color: #5A92E6;
}
.PersonalTailor .main .info .info_.info_left .info_left_sub ._sub_line {
width: 25%;
line-height: 0px;
padding: 0 10px;
}
.PersonalTailor .main .info .info_.info_left .info_left_sub ._sub_right {
width: 30%;
color: #999999;
}
.PersonalTailor .main .info .info_.info_left .info_left_sub ._sub_line span{
width: 100%;
display: inline-block;
border-top: 1px dashed #AAAAAA;
height: 1px;
}
.PersonalTailor .main .info .info_.info_left .info_left_sub ._sub_right._active .iconfont{
color: #558EE5;
background-color: #95BFFF;
}
.PersonalTailor .main .info .info_.info_left .info_left_sub ._sub_right._active{
color: #558EE5;
}
.PersonalTailor .main .info .info_.info_left .info_left_sub ._sub_right._active>._icon{
background-color: #E1EDFF;
}
.PersonalTailor ._checkd .el-col._active{
border: 2px solid #EE4454;
}
.PersonalTailor ._for_tips{
color: #999999;
padding-left: 30px;
}
.PersonalTailor .max-h90{
max-height: 100px;
}
.PersonalTailor .max-h90 textarea{resize: none}
.PersonalTailor .w220{
width: 220px;
}
.PersonalTailor .w100{
width: 100px;
}
.PersonalTailor ._checkd .el-col{
border: 2px solid #D2D2D2;
height: 40px;
text-align: center;
margin-right: 10px;
cursor: pointer;
}
.PersonalTailor ._next{
border:none;
background:linear-gradient(90deg,rgba(255,133,133,1),rgba(238,68,84,1));
}
._previous,._previous:hover,._previous:active{
background-color: white;
color: #EE4454;
border-color: #EE4454
}
.PersonalTailor .tri-right{
width: 0;
height:0;
border-top:20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #333333;
position: absolute;
left: -20px;
top: 45%;
}
</style>
<template>
<div class="PersonalTailor">
<el-row class="max-w1500">
<el-col class="header"></el-col>
<el-col :span="18" :offset="3" class="main">
<el-row class="info">
<el-col :span="14" class="info_ info_left">
<p class="info_left_tit">填写需求，快速定制行程</p>
<div class="info_left_sub">
<div class="_sub_left">
<span class="_icon"><span class="iconfont icon-danju"></span></span>
<span> 1、填写定制行程基本信息</span>
</div>
<div class="_sub_line">
<span></span>
</div>
<div class="_sub_right" :class="{'_active': showType === 2}">
<span class="_icon"><span class="iconfont icon-shouji"></span></span>
<span> 2、联系人信息</span>
</div>
</div>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
<div v-if="showType === 1">
<el-form-item label="出发地：" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域" size="small" class="w220">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="目的地：" prop="regions">
<el-select v-model="ruleForm.regions" placeholder="请选择活动区域" size="small" class="w220">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
<span class="_for_tips">最多选择3个目的地</span>
</el-form-item>
<el-form-item label="预估出行日期：" required>
<el-form-item prop="date1">
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" size="small" class="w220"></el-date-picker>
</el-form-item>
</el-form-item>
<el-form-item label="预估出行人数：" required>
<el-form-item>
<el-col :span="11">
<el-form-item prop="num1">
成人 <el-input-number v-model="ruleForm.num1" :min="1" :max="10" label="描述文字" size="small"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item prop="num2">
儿童 <el-input-number v-model="ruleForm.num2" :min="0" :max="10" label="描述文字" size="small"></el-input-number>
</el-form-item>
</el-col>
</el-form-item>
</el-form-item>
<el-form-item label="预估人均预算：">
<el-form-item>
<el-input v-model="ruleForm.name" size="small" class="w220"></el-input>
<span class="_for_tips">请输入0-99999之间的数字</span>
</el-form-item>
</el-form-item>
<el-form-item label="需要提供什么：">
<el-row class="_checkd">
<el-col :span="4" v-for="(item, index) in active" :key="index" :class="{'_active': item.click}" ><div @click="item.id!==1 ? clickActive(index) : ''">{{item.lable}}</div></el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-button type="primary" class="_next w100" @click="onSubmit" size="small">下一步</el-button>
</el-form-item>
</div>
<div v-else>
<el-form-item prop="lianxiren" label="联系人：">
<el-input v-model="ruleForm.lianxiren" size="small" class="w220" placeholder="必填，定制师对您的称呼"></el-input>
</el-form-item>
<el-form-item prop="phone" label="手机号码：">
<el-input v-model="ruleForm.phone" size="small" class="w220" placeholder=""></el-input>
</el-form-item>
<el-form-item label="电子邮箱：">
<el-input v-model="ruleForm.email" size="small" class="w220" placeholder=""></el-input>
</el-form-item>
<el-form-item label="微信号：">
<el-input v-model="ruleForm.wechat" size="small" class="w220" placeholder=""></el-input>
</el-form-item>
<el-form-item label="其他需求：">
<el-input type="textarea" class="max-h90" rows="4" v-model="ruleForm.desc" placeholder="选填，您可以在此输入个性化需求，如：同行人中是否含婴儿、老人，希望定制师何时联系您，对酒店、景点、出行方式的具体要求等"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" class="_previous w100" @click="showType = 1" size="small">上一步</el-button>
<el-button type="primary" class="_next w100" @click="onSubmit" size="small">提交需求</el-button>
</el-form-item>
</div>
</el-form>
</el-col>
<el-col :span="10" class="info_ info_right">
<div class="tri-right"></div>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data(){
return {
ruleForm: {
region: '',
regions: '',
date1: '',
num1: '',
num2: '',
name: '',
lianxiren: '',
phone: '',
email: '',
wechat: '',
desc: '',
},
showType: 1,
active: [
],
rules: {
region: [
{ required: true, message: '请输入活动名称', trigger: 'change' }
],
regions: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
date1: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
num1: [
{ required: true, message: '请选择成人人数', trigger: 'change' }
],
num1: [
{ required: true, message: '请选择儿童人数', trigger: 'change' }
],
phone: [
{ required: true, message: '请输入电话', trigger: 'blur' }
],
lianxiren: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
]
}
}
}, methods: {
clickActive: function(index) {
this.active[index].click = !this.active[index].click
},
onSubmit: function() {
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
this.showType = 2
} else {
console.log('error submit!!');
return false;
}
});
}
}, mounted() {
},created(){
this.active = [
{
lable: '线路设计',
id: 1,
click: true,
},
{
lable: '机票',
id: 2,
click: false,
},
{
lable: '酒店',
id: 3,
click: false,
},
{
lable: '用车',
id: 4,
click: false,
},
{
lable: '用餐',
id: 5,
click: false,
}
]
}
}
</script>
src/components/PersonalCenter/PsMyCoupon.vue
View file @ 6006d1f0
......@@ -8,6 +8,7 @@
<el-col :span="20" :offset="2" class="_content">
<el-row class="_el_tab">
<ul>
<li :class="active==3?'active':''" @click="active=3, msg.couponsUseScope = 1, getList(), resetPageIndex()">通用</li>
<li :class="active==0?'active':''" @click="active=0, msg.couponsUseScope = 2, getList(), resetPageIndex()">跟团游</li>
<li :class="active==1?'active':''" @click="active=1, msg.couponsUseScope = 4, getList(), resetPageIndex()">机票</li>
<li :class="active==2?'active':''" @click="active=2, msg.couponsUseScope = 3, getList(), resetPageIndex()">签证</li>
......@@ -87,7 +88,7 @@ export default {
},
data(){
return {
active: 0,
active: 3,
activeSub: 0,
totalCount: 20,
pageSize: 1,
......@@ -101,7 +102,7 @@ export default {
couponsType: '',
couponStatus: 1,
couponEffectStatus: 1,
couponsUseScope: 2,
couponsUseScope: 1,
},
dataList: [{a:1}],
dataLoading: false,
......
src/components/PersonalCenter/PsSystem.vue
View file @ 6006d1f0
......@@ -3,29 +3,36 @@
</style>
<template>
<el-row class="PsSystem">
<el-col :span="20" :offset="2">
<el-row class="PsSystem" :style='{"min-height":minHeight+"px"}'>
<el-col :span="20" :offset="2" :style='{"min-height": (minHeight-20)+"px"}'>
<el-row>
<el-col :span="4" class="_left">
<ul>
<li :class="active==1?'_active':''" @click="active=1,initMsg()">
<div>
<i class="iconfont icon-bb-tuanqi"></i>
<i class="iconfont icon-ico-jichuxinxi"></i>
<span>基础信息管理</span>
</div>
<i class="iconfont icon-arrowright1"></i>
</li>
<li :class="active==2?'_active':''" @click="active=2,initMsg()">
<div>
<i class="iconfont icon-bb-tuanqi"></i>
<i class="iconfont icon-ico-xiugaimima"></i>
<span>修改密码</span>
</div>
<i class="iconfont icon-arrowright1"></i>
</li>
<li :class="active==3?'_active':''" @click="active=3,initMsg()">
<div>
<i class="iconfont icon-shimingrenzheng"></i>
<span>实名认证</span>
</div>
<i class="iconfont icon-arrowright1"></i>
</li>
</ul>
</el-col>
<el-col :span="19" :offset="1" class="_right">
<div v-if="active==1">
<div v-if="active==1" style="background-color: white">
<el-row class="_edit_box">
<el-button type="primary" v-if="!editInfo" size="mini" @click="editInfo=true" icon="el-icon-edit">编辑</el-button>
<el-button type="primary" v-if="editInfo" size="mini" @click="userInfoSet" >保存</el-button>
......@@ -101,7 +108,7 @@
</el-row>
<el-row class="_right_line"></el-row>
</div>
<div v-if="active==2">
<div v-if="active==2" style="background-color: white">
<el-row class="_edit_box">
<el-button type="primary" size="mini" @click="editPwd" >保存</el-button>
</el-row>
......@@ -147,6 +154,134 @@
</el-col>
</el-row>
</div>
<div v-if="active==3" class="Authentication">
<div v-if="!againUpLoad">
<el-row class="_real_name">
<el-col :span="12">
<div class="_rn_tit" :class="{'_active': subTit===1}" @click="SelectionType(1)">
企业认证
</div>
<div class="kailong" v-if="subTit == 1"></div>
</el-col>
<el-col :span="12">
<div class="_rn_tit" :class="{'_active': subTit===2}" @click="SelectionType(2)">
个人认证
</div>
<div class="kailong" v-if="subTit == 2"></div>
</el-col>
</el-row>
<div v-if="subTit == 1">
<el-row class="_at_tips">
<p class="_at_tips_tit">温馨提示：</p>
<p>1.照片要求：jpg/png格式，大小不超过1M；</p>
<p>2.请确保三证合一的营业执照照片边框完整，字体清晰，亮度均匀。</p>
</el-row>
<el-row class="_up_box">
<el-row>
<el-col :span="10" class="_up_box_left">
<el-upload
class="upload-demo"
drag
:http-request="uploadFileBtn1"
action=""
:multiple="false" :show-file-list="false">
<span class="_op_btn">+</span>
<img v-if="!showImg1" class="upload-demo_img" src="../../assets/img/ps/yyzzmoren.png" alt="">
<img v-else class="upload-demo_img" :src="showImg1" alt="">
</el-upload>
<p class="_up_box_left_tips">上传三证合一的<span>营业执照</span></p>
</el-col>
<el-col :span="4">
&nbsp;
</el-col>
<el-col :span="10" class="_up_box_right">
<img src="../../assets/img/ps/yyzzshiyi.png" alt="">
<p class="_up_box_right_tips">营业执照<span>示例图</span></p>
</el-col>
</el-row>
<el-row class="text_a_center">
<el-button type="primary" class="w215" @click="subImg" size="small">提交</el-button>
</el-row>
</el-row>
</div>
<div v-else class="_id_card">
<el-row class="_at_tips">
<p class="_at_tips_tit">温馨提示：</p>
<p>1.照片要求：jpg/png格式，大小不超过1M；</p>
<p>2.请确保身份证照片边框完整，字体清晰，亮度均匀。</p>
</el-row>
<el-row class="_up_box">
<el-col :span="11" class="_up_box_left">
<el-upload
class="upload-demo2"
drag
:http-request="uploadFileBtn2"
action=""
:multiple="false" :show-file-list="false">
<span class="_op_btn _op_btn2">+</span>
<img v-if="!showImg2" class="upload-demo_img2" src="../../assets/img/ps/gshenfenzheng.png" alt="">
<img v-else class="upload-demo_img" :src="showImg2" alt="">
</el-upload>
<p class="_up_box_left_tips">上传身份证<span>人像面</span></p>
</el-col>
<el-col :span="2">
&nbsp;
</el-col>
<el-col :span="11" class="_up_box_left">
<el-upload
class="upload-demo2"
drag
:http-request="uploadFileBtn3"
action=""
:multiple="false" :show-file-list="false">
<span class="_op_btn _op_btn2">+</span>
<img v-if="!showImg3" class="upload-demo_img2" src="../../assets/img/ps/huohui.png" alt="">
<img v-else class="upload-demo_img" :src="showImg3" alt="">
</el-upload>
<p class="_up_box_left_tips">上传身份证<span>国徽面</span></p>
</el-col>
</el-row>
<el-row class="_up_box _up_box2">
<el-col :span="11" class="_up_box_left">
<el-upload
class="upload-demo2"
drag
:http-request="uploadFileBtn4"
action=""
:multiple="false" :show-file-list="false">
<span class="_op_btn _op_btn2">+</span>
<img v-if="!showImg4" class="upload-demo_img2" src="../../assets/img/ps/gmingpian.png" alt="">
<img v-else class="upload-demo_img" :src="showImg4" alt="">
</el-upload>
<p class="_up_box_left_tips">上传<span>名片</span>有姓名、联系方式的一面</p>
</el-col>
</el-row>
<el-row class="text_a_center">
<el-button type="primary" class="w215" @click="subImg" size="small">提交</el-button>
</el-row>
</div>
</div>
<div v-else>
<el-row v-if="Verification[0].ApplyState === 0" class="Authentication_tips">
<div>
<i class="iconfont icon-dkw_shenhezhong _status_str_y"></i>
</div>
<p class="_status_str_y">您的认证资料正在审核中。</p>
</el-row>
<el-row v-else-if="Verification[0].ApplyState === 2" class="Authentication_tips">
<div>
<i class="iconfont icon-shenheshibai _status_str_r"></i>
</div>
<p class="_status_str_r">您的认证审核已经被拒绝，请 <span class="_link" @click="againUpLoad = false">重新上传资料</span> 进行认证！</p>
</el-row>
<el-row v-else-if="Verification[0].ApplyState === 1" class="Authentication_tips">
<div>
<i class="iconfont icon-dkw_shenhetongguo _status_str_g"></i>
</div>
<p class="_status_str_g">已认证。</p>
</el-row>
</div>
</div>
</el-col>
</el-row>
</el-col>
......@@ -185,12 +320,26 @@ export default {
oldPassword:'',
newPassword:''
},
subTit: 1,
newPassword:'',
brandList:[],
brand:'',
tags:[],
tagsCopy:[],
userAcc:'',
minHeight: 0,
Verification: false,
VerificationMsg: {
CertificationPics: [],
CustomerID: 0,
ApplyType: 0,
ID: 0,
},
showImg1: '',
showImg2: '',
showImg3: '',
showImg4: '',
againUpLoad: false,
}
},
computed: {
......@@ -198,11 +347,103 @@ export default {
},
created(){
this.app_get_customer_brand();
this.GetCertificationModel();
if (this.$route.params.type) {
this.active = 3;
}
},
mounted() {
this.minHeight=document.documentElement.clientHeight-171
this.getInfo();
},
methods: {
subImg(){ // 提交审核
let userInfo = this.getLocalStorage();
this.VerificationMsg.CustomerID = userInfo.customerId;
this.VerificationMsg.ApplyType = this.subTit;
this.VerificationMsg.ID = this.Verification[0] ? this.Verification[0].ID : 0;
this.apipost("app_customer_SetCertification", this.VerificationMsg, res => {
if (res.data.resultCode == 1) {
console.log(res.data.data)
this.GetCertificationModel()
} else {
this.$message.error(res.data.message);
}
},err => {});
},
SelectionType(type){
this.subTit = type;
this.VerificationMsg.ApplyType = type;
this.VerificationMsg.CertificationPics = [];
this.showImg1 = '';
this.showImg2 = '';
this.showImg3 = '';
this.showImg4 = '';
},
GetCertificationModel(){
let userInfo = this.getLocalStorage();
this.apipost("app_customer_GetCertificationModel", { CustomerID: userInfo.customerId }, res => {
if (res.data.resultCode == 1) {
this.Verification = res.data.data
if (!this.Verification || this.Verification.length === 0) {
this.againUpLoad = false
} else {
this.againUpLoad = true
}
console.log(res.data.data)
} else {
this.$message.error(res.data.message);
}
},err => {});
},
uploadFileBtn1(file){
this.uploadFileBtn(file, 1)
},
uploadFileBtn2(file){
this.uploadFileBtn(file, 2)
},
uploadFileBtn3(file){
this.uploadFileBtn(file, 3)
},
uploadFileBtn4(file){
this.uploadFileBtn(file, 4)
},
uploadFileBtn(file, type) { //上传
console.log(type)
if(file.file.size > 1024 * 1024 * 1) {
this.$message.warning('最大不能超过1M')
return
}
// 1 文档 2 数据 3 图片
let typeArr=[
{stringArr:'GIF|JPG|JPEG|PNG|BMP',type:3},
]
let ft=file.file.name.substring(file.file.name.lastIndexOf('.')+1,file.file.name.length).toUpperCase();
let typeOk = false;
typeArr.forEach(x=>{
if(x.stringArr.indexOf(ft)!='-1')
{
typeOk = true;
}
})
if (!typeOk) return this.$message.error('请上传图片！');
let newArr = [];
newArr.push(file.file)
let path = "/Upload/Temporary/"
this.$message.info('上传中....')
this.UploadSelfFileT(path, newArr, x => {
if (type === 1) {
this.showImg1 = this.domainManager().ViittoFileUrl + x.data.FilePath
} else if (type === 2){
this.showImg2 = this.domainManager().ViittoFileUrl + x.data.FilePath
} else if (type === 3){
this.showImg3 = this.domainManager().ViittoFileUrl + x.data.FilePath
} else if (type === 4){
this.showImg4 = this.domainManager().ViittoFileUrl + x.data.FilePath
}
this.VerificationMsg.CertificationPics.push(this.domainManager().ViittoFileUrl + x.data.FilePath)
});
},
editPwd(){ // 修改密码
if(!this.editPwdMsg.oldPassword) return this.$message.error("请输入老密码");
if(!this.editPwdMsg.newPassword) return this.$message.error("请输入新密码");
......
src/components/global/head.vue
View file @ 6006d1f0
......@@ -82,13 +82,13 @@ color:rgba(51,51,51,1);
</el-col>
<el-col :span="14" :offset="1">
<el-menu :default-active='defaultKey' class="el-menu-demo small" mode="horizontal" background-color="rgba(0,0,0,0)" active-text-color="#EF4455" @select='handleSelect'>
<el-submenu index="1">
<!-- <el-submenu index="1">
<template slot="title">旅游</template>
<el-menu-item index="2-1">跟团游</el-menu-item>
<el-menu-item index="2-2">一日游</el-menu-item>
<!-- <el-menu-item index="2-3">单团</el-menu-item>
<el-menu-item index="2-4">私人订制</el-menu-item> -->
</el-submenu>
</el-submenu> -->
<el-menu-item index="2-1" @click="handleSelect('2-1',false)"><a href="javascript:void(0);">跟团游</a></el-menu-item>
<el-menu-item index="2-2" @click="handleSelect('2-2',true)"><a href="javascript:void(0);">当地游</a></el-menu-item>
<el-menu-item index="3" @click="goUrl('TicketHome',true)"><a href="javascript:void(0);">机票</a></el-menu-item>
<el-menu-item index="4" @click="goUrl('VisaHomePage',true)"><a href="javascript:void(0);">签证</a></el-menu-item>
<el-menu-item index="5" @click="goUrl('IndependentTravel',true)"><a href="javascript:void(0);">自由行</a></el-menu-item>
......
src/components/trade/order/indexTwo.vue
View file @ 6006d1f0
......@@ -65,6 +65,10 @@
._coupon_box ._coupon_item.blue._active{
background-color: #6776D2;
}
._coupon_box ._coupon_item.disab,._coupon_box ._coupon_item.blue.disab ._repeat,._coupon_box ._coupon_item.blue.disab ._info_time{
background-color: #C3C3C3 !important;
color: #777777 !important
}
._coupon_box ._coupon_item ._time{
color: #A7711C !important;
}
......@@ -138,6 +142,14 @@
margin: 0 !important;
color: gray !important;
}
._trip_xiangqing_tips{
color: red !important;
font-size: 14px !important;
}
._trip_xiangqing_tips span{
color: #3965B0;
cursor: pointer;
}
</style>
<template>
<div class="trade" v-loading="loadingDataList">
......@@ -274,8 +286,9 @@
</el-col>
<el-col class="_trip_xiangqing _coupon_box">
<p style="width:100%">优惠券</p>
<p v-if="Verification.length && Verification[0].ApplyState !== 1" class="_trip_xiangqing_tips">您还为进行 <span @click="goShenqing">实名认证</span>，认证后可使用优惠券哦~如果已提认证申请，申请审核通过后即可使用优惠券！</p>
<div v-if="UserCanUseCouponList.length>0" class="_coupon_box">
<div class="_coupon_item" v-for="(item, index) in UserCanUseCouponList" :class="{'blue':item.couponsType===1,'_active':item.active}" @click="clickCoupon(item)">
<div class="_coupon_item" v-for="(item, index) in UserCanUseCouponList" :class="{'blue':item.couponsType===1,'_active':item.active,'disab': Verification.length && Verification[0].ApplyState !== 1}" @click="Verification.length && Verification[0].ApplyState !== 1 ? '' : clickCoupon(item)">
<div class="_left_raduis">
<span></span>
<span></span>
......@@ -325,6 +338,7 @@
需要你登录以后才能预定哦！登录后还能享受更加优惠的价格，<span class="link" @click="goLogin">立即登录吧</span>
</div>
</div>
<a :href='blankUrl' id='blankLink' target="_blank" style="display:none">1</a>
<!-- <div class="_invoice">
<p>发票信息</p>
<div class="_is_invoice">
......@@ -424,6 +438,7 @@ export default {
label: '北京烤鸭'
}],
value8: '',
blankUrl: '',
pickerOptions:{
disabledDate(time) {
let isHave=true
......@@ -495,6 +510,7 @@ export default {
UserCanUseCouponList: [],
CouponList: [],
CouponIds: '',
Verification: '',
}
},
watch: {
......@@ -526,8 +542,22 @@ export default {
this.chosenObj.startDate = this.numPeople.startDate
this.Remarks = this.numPeople.remark
this.getList(this.numPeople.startDate)
let userInfo = this.getLocalStorage();
this.apipost("app_customer_GetCertificationModel", { CustomerID: userInfo.customerId }, res => {
if (res.data.resultCode == 1) {
this.Verification = res.data.data
} else {
this.$message.error(res.data.message);
}
},err => {});
},
methods: {
goShenqing: function () {
let dom = document.querySelector("#blankLink")
dom.href=`http://${window.location.host}/#/PsSystem/${1}`
//console.log(that.$refs.blankLink.click())
dom.click()
},
clickCoupon: function (item) {
let list = [];
if (!item.active) { // 是否选中
......
src/main.js
View file @ 6006d1f0
......@@ -14,6 +14,7 @@ import htmlToPdf from './assets/utils/htmlToPdf'
import commonUtils from './assets/utils/commonUtils'
import languageUtils from './assets/utils/languageUtils' //引入语言转换帮助类
import moment from 'moment'
import co from 'co'
// 使用Vue.use()方法就会调用工具方法中的install方法
Vue.use(htmlToPdf)
......@@ -116,7 +117,41 @@ Vue.filter("YMD", function (date) {
return moment(date).format("YYYY-MM-DD");
})
Vue.prototype.random_string = function (len) {
len = len || 32;
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
var maxPos = chars.length;
var pwd = '';
for (let i = 0; i < len; i++) {
pwd += chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
},
//上传文件到本地服务器
Vue.prototype.UploadSelfFileT = function (path, files, successCall) {
if (files && files.length > 0) {
let nameList = new Array()
for (let index = 0; index < files.length; index++) {
nameList.push(this.random_string());
}
let that = this;
co(function* () {
for (let index = 0; index < files.length; index++) {
let fileName = nameList[index]
fileName = path + fileName + "." + files[index].name.split('.').pop()
var formData = new FormData();
var uploadUrl = that.domainManager().UploadUrl + "/Upload?filePath=" + path;
formData.append("myfile", files[index]);
that.$http.post(uploadUrl, formData, {})
.then(res => {
successCall(res);
})
}
}).catch(function (err) {
console.log("上传文件出错" + err);
});
}
}
new Vue({
router,
store,
......
src/plugins/index.js
View file @ 6006d1f0
......@@ -16,8 +16,8 @@ export default {
// var domainUrl = "http://192.168.2.16:8083"//主域名
// let domainUrl = "https://reborn.oytour.com"; //刘东主域名
// let domainUrl = "https://reborn.oytour.com";
var domainUrl = "http://test.viitto.com"
let domainUrl = "https://reborn.oytour.com";
// var domainUrl = "http://test.viitto.com"
domainUrl = "http://192.168.2.214:8082"
let locationName = window.location.hostname;
if (this.isOnline()) {
......@@ -31,7 +31,7 @@ export default {
DomainUrl: domainUrl,
//常用提交数据URL
PostUrl: domainUrl + "/api/common/post",
javaUrl: locationName.indexOf('oytour') !== -1 || locationName.indexOf('viitto') !== -1 ? "http://47.96.12.235:9000" : "http://192.168.2.215:9000",
javaUrl: locationName.indexOf('oytour') !== -1 || locationName.indexOf('viitto') !== -1 ? (locationName.indexOf('oytour') !== -1 ? "http://efficient.oytour.com" : "http://47.96.12.235:9001") : "http://192.168.2.215:9000",
ViittoFileUrl: locationName.indexOf('oytour') !== -1 || locationName.indexOf('viitto') !== -1 ? "http://imgfile.oytour.com" : 'http://192.168.2.214:8130',
UploadUrl: locationName.indexOf('oytour') !== -1 || locationName.indexOf('viitto') !== -1 ? "http://upload.oytour.com" : "http://192.168.2.214:8120",
LocalFileStreamDownLoadUrl: domainUrl + "/api/file/GetFileFromWebApi",
......
src/router.js
View file @ 6006d1f0
......@@ -150,6 +150,15 @@ export default new Router({
title: "系统管理"
}
},
{
path: "/PsSystem/:type",
name: "PsSystem",
component: resolve =>
require(["@/components/PersonalCenter/PsSystem"], resolve),
meta: {
title: "系统管理"
}
},
{
path: "/PsAccBalance",
name: "PsAccBalance",
......@@ -317,6 +326,15 @@ export default new Router({
title: "自由行"
}
},
{
path: "/PersonalTailor",
name: "PersonalTailor",
component: resolve =>
require(["@/components/DependentTravel/PersonalTailor"], resolve),
meta: {
title: "私人定制"
}
},
]
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment