youngS
3 years ago
parent
002c90d5e3
commit
f49c067015
@ -1,87 +1,87 @@ |
||||
<template> |
||||
<div id="app" ref="app"> |
||||
<router-view/> |
||||
</div> |
||||
<div id="app" ref="app"> |
||||
<router-view/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
export default { |
||||
name: 'app', |
||||
data() { |
||||
return {} |
||||
}, |
||||
} |
||||
export default { |
||||
name: 'app', |
||||
data() { |
||||
return {} |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
body { |
||||
background-color: #F6F6F6; |
||||
} |
||||
|
||||
html, body { |
||||
height: 100%; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: "iconfont"; |
||||
src: url('./assets/icon/iconfont.eot?t=1583637102320'); /* IE9 */ |
||||
src: url('./assets/icon/iconfont.eot?t=1583637102320#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAnUAAsAAAAAEXwAAAmIAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEIAqUYJBKATYCJAMoCxYABCAFhG0HdhuGDlGUL1aT7CuMW3giIDU2lBZVYzMmA6BYbBoB4AIAvsWyNCR1ZYRAPDyt/e/cmdn1b4KYdG+eSCaJRMWjWPVE6ZTyQkZL4P/W2j938EFdZvf2bG4F1UgXqyQeKfBIqpGQb4i2eQ/W/4P6Ek9oYwayNWYT2liwtS7KBWzNL+pBXQarNpcN/6uINB8EdIMjCcASCSSx4cAb7oGJPvjzf6maMe0OLEmbbAtQ1TLH+t2bjwpcoLGH1RZY9/OCWElqEp69Ctt/lUoZgKMJ9DZKJTpb39oLSoVQBWoeMPQUKGtmZQQOra7u2bKID6DSppeMC3hP7x//HA0lSZWJNS/fr5uFyp+QiaT/uZpYwYv1OWFuR8Z+oBDfe93f5Fy5n9R9H1g8BBYZNWVZ128wWubBX4gsc00C/+npXSCHRbkuqBVJ6GSNo/zjETVVPQL/ONPxMyIeNT9HHoWfyzwSPzeo8DQ7IF5OsxdGGZpzMGqgeQOjCpoJxHejmz7ZYhE4AvIjgLIWhPY8ORu1xKf7mSXfEqJWz1lFqu4IsUVclojNFtvZeZZJWCxfTwc225MLw+IOJVu9jIhlZydks0WD2YzVCGJDzZv3bRWtVSPgFM6ZTJDKjCPGrSIdax2dlWgymUleOEnitJKXpPyEKz9ri1IZTMalepIwQ/od1OvB5hq3QpDBcnCLkASgX+Ot37xvI9/Ep9QGC7EF1DMQNJgws3VoBmqIDgCbNXYuVd01lKFvR5CqnITxPpi1Z23gbKCzVCYzT3meaFLvhr5kmfWJDrV+iz8KDo/ogiAUbGoo8SKbLBDTGVnfLmB0BpiGzuEVMxCPpJitnaqi7QPc/I2nEGN6Yb7eUj2voN2qcKHuJxEIVUb7HLspkHcwNKgtsk9XrLzLL2qnl/syr6WbOyffau0FeKUntEq8bGeo+bLsHFVv2IggXAm3BxcRKD4qQJAKpPFED97cegA2kUtJkufhEa5hguf0l6KbAjfRsqUoyisV/sajng+9Tg8sp/2sVPRImnYco2IPWCUbqfgT1lSrrW/7VfTgedn+s9KD1yN30pCRKrXQnuutQZutHvvpsYD3WcPOT9ADl+8K2mVNPnAp9cSF3FNUNnVr4DitOXmXd5BOI2x9VwM0UXRJJ6U6MWENSmG19tlu9tF0g83WkJw35hw1brVGEXTtxk4RtKzrdEcwaG7N+s0ANrPfcth3vHWoM7SOzosxLcPNKMmLbqN7xpoDCR7Zwo26aAOV2mziKs4ZG1WmpTzlGUXJPpWdjSaDmSD1S9EsUryx0/OqplwYy9vjrrPyxLZUyHbAlg4UBYchLJdPRqKr5WY1GnenBYElwhrjZsE0UWXitVtXau4B6TbsEETKTYgqW7ca11skHotAqCLSqu8TzTldome82Wsp5a2lPn03qYZV0HrRfaYtuR2xJ6W3pQhPi8Xyezqa3c8TyNnMNv1zOy+QUBFrb8+Yo3hUiDsBt4OTRPQOeXLy11deWJbq1+OgVrJp8JITpcISj+p5aa9SJ5TKi/o2VKD37G/xu1ERehnQt/bKk+LfZZ2Li48XXAy/KLjDXTbqabKD0+DFjk5YidPrAw8b+ADh3wm7wHd0BAD7RC6YL3I63Np/w+1uHZyLbhdOOgWY4JsQi8aE33JgNDJJFCsKnToP+Ain5hLZJ+oMIeJY0aRZzy41NiRiiRkNlwIzZVR8UKZ6gjrOx1Oy55plBcn64P+UtFEhJJwsTRaRKlKkLQ6TIVFajgW4FybDoZ1loaLkI+ACamn7vt5/X1BiF1y1/8m85UFdNdyaAG6A7phsAKgEUNljkEgZGhJqDY7/TQBeHCUBQ7bM3HwgbX2hUHhqbn3VDsIVYcAoomY1TISKHcKariNO2PbaZgyX5N6oC/OHfNjxXzabV+91hR2d90zbk6bWotfUxzuvZ/mWE2AIgaUsOMde5snf/NxBElNVPnB045As1kLdjhRM0wCJH8X384+4FiQpzJ3tlufDTZydm1/k+xI80DKzs7INNcWemo9FflMbU70a5MXSzpiaiJeyfPP74Jjso8dKNQbLzDuiJKZjVebQuSV4UtxHuc94mSgx1kfuDXSn54cWlI/IC901zzN/UFheSAz85UPeQ4W6cPeJ5Z7Qz3V1Yf4DxUwcjVMOHNy/Z7VCcnVNu+RhrCZm2Pgc/PekHiDmSxhpaVX/Zpb3ybTr7gmq/SQPHuhYh85ZyzAgS9bhdbCcmeKbiAdODfLT8OYfiitWlDYqpvArls3WTlgMAt2/dHlh2PKgTf9C3xZ6SfMPf4H/e/DeeBU9YTHXud+QEcczVOuLHD+8pR7Q4ItaA4rCDaqSE1PLB/c/6xOQwt8fF5DmMMYhIFW6P8A/ZWWSDlR+AvKkAZJcuA2ThltOqtHilt0hhX74CCiuz12fJrwJOm/kar23PmgzaH21LlvtP7SQMKjJ4X3Ge4emTB16l/FuniAh5KR716vKe+sOOlsSWpJUK/6+4R1UkQDelaH4e4fnCqZB8Dwv3HAbkMo7II0h+zH2kPQAT7diZzA60R6o3IB2E8hUwxCdENuicNkw3pQ1YR3AhGA9UOqmhVWC7/HngiboCBZbg4KDzga9uu/nfkayyrXNtb5N0LO3U5vStQ1TJl+Jq2M/00nrlp1baILFTn7eSQjGzoIaSRi7V5FYhGUuwcaARMOYt59wXsE8J7+YWJonyFWLkc/AlG4gigJdJjGTQJ1iCbNXk56FOQWmJZOoT+UzxdQWBqaOatItGSBI3E3MxD40KfmrXQpS5vyRCZc+X53Qn98Zz0aZ+yj0f0oB601pJcIT/LFKmMNKINMsffEGFomXauqjNqtKllBO4+/UP+993doltuQfXLtU0pPGBnrW2o4u+P30yuA4vdY6Qe/t07D9YAFHIkqHvfYUeph1RU+m/aBns24EEAD/Rq8s+xcelTUkEMB7JTjY42BnMOokDk8JeBZNLyFmhvio0Caos9puTM95priqjCj9mOOZGMpKz2zmGrAPc+tYh5+nswWBQhRHvKheOR72eAjyc8SFZ4R0pyD4izMyqL5102eIF9TO4GBThIR9FjJtiZ8xg/ChkAXq1tt3w2hzPKZwI736/P0wDo+ZPZIlXSYD3aD2sXrdF5A3j5ZNUJ0UFHXkEF5IverEPDJNIP7+xVywGYJ0ziWSfsUy1NEorjp9+1rvrS37se5DXLePFDlKVFFHE2100cegueWb5QgzqyRdljFPtoQhvCSjo0cKVVaMkK2o4rlyAAA=') format('woff2'), |
||||
url('./assets/icon/iconfont.woff?t=1583637102320') format('woff'), |
||||
url('./assets/icon/iconfont.ttf?t=1583637102320') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('./assets/icon/iconfont.svg?t=1583637102320#iconfont') format('svg'); /* iOS 4.1- */ |
||||
} |
||||
|
||||
.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
.icon-android:before { |
||||
content: "\e61d"; |
||||
} |
||||
|
||||
.icon-android1:before { |
||||
content: "\e616"; |
||||
} |
||||
|
||||
.icon-android2:before { |
||||
content: "\e62a"; |
||||
} |
||||
|
||||
.icon-ios:before { |
||||
content: "\e60c"; |
||||
} |
||||
|
||||
.icon-IOS:before { |
||||
content: "\e68c"; |
||||
} |
||||
|
||||
.icon-ios1:before { |
||||
content: "\e601"; |
||||
} |
||||
|
||||
.icon-ios2:before { |
||||
content: "\e64b"; |
||||
} |
||||
|
||||
.icon-Android:before { |
||||
content: "\e6d4"; |
||||
} |
||||
|
||||
.icon-android3:before { |
||||
content: "\e625"; |
||||
} |
||||
|
||||
.canvas { |
||||
position: fixed; |
||||
left: -0px; |
||||
top: 58px; |
||||
height: 100%; |
||||
z-index: -2; |
||||
width: 100%; |
||||
} |
||||
body { |
||||
background-color: #F6F6F6; |
||||
} |
||||
|
||||
html, body { |
||||
height: 100%; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: "iconfont"; |
||||
src: url('./assets/icon/iconfont.eot?t=1583637102320'); /* IE9 */ |
||||
src: url('./assets/icon/iconfont.eot?t=1583637102320#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAnUAAsAAAAAEXwAAAmIAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEIAqUYJBKATYCJAMoCxYABCAFhG0HdhuGDlGUL1aT7CuMW3giIDU2lBZVYzMmA6BYbBoB4AIAvsWyNCR1ZYRAPDyt/e/cmdn1b4KYdG+eSCaJRMWjWPVE6ZTyQkZL4P/W2j938EFdZvf2bG4F1UgXqyQeKfBIqpGQb4i2eQ/W/4P6Ek9oYwayNWYT2liwtS7KBWzNL+pBXQarNpcN/6uINB8EdIMjCcASCSSx4cAb7oGJPvjzf6maMe0OLEmbbAtQ1TLH+t2bjwpcoLGH1RZY9/OCWElqEp69Ctt/lUoZgKMJ9DZKJTpb39oLSoVQBWoeMPQUKGtmZQQOra7u2bKID6DSppeMC3hP7x//HA0lSZWJNS/fr5uFyp+QiaT/uZpYwYv1OWFuR8Z+oBDfe93f5Fy5n9R9H1g8BBYZNWVZ128wWubBX4gsc00C/+npXSCHRbkuqBVJ6GSNo/zjETVVPQL/ONPxMyIeNT9HHoWfyzwSPzeo8DQ7IF5OsxdGGZpzMGqgeQOjCpoJxHejmz7ZYhE4AvIjgLIWhPY8ORu1xKf7mSXfEqJWz1lFqu4IsUVclojNFtvZeZZJWCxfTwc225MLw+IOJVu9jIhlZydks0WD2YzVCGJDzZv3bRWtVSPgFM6ZTJDKjCPGrSIdax2dlWgymUleOEnitJKXpPyEKz9ri1IZTMalepIwQ/od1OvB5hq3QpDBcnCLkASgX+Ot37xvI9/Ep9QGC7EF1DMQNJgws3VoBmqIDgCbNXYuVd01lKFvR5CqnITxPpi1Z23gbKCzVCYzT3meaFLvhr5kmfWJDrV+iz8KDo/ogiAUbGoo8SKbLBDTGVnfLmB0BpiGzuEVMxCPpJitnaqi7QPc/I2nEGN6Yb7eUj2voN2qcKHuJxEIVUb7HLspkHcwNKgtsk9XrLzLL2qnl/syr6WbOyffau0FeKUntEq8bGeo+bLsHFVv2IggXAm3BxcRKD4qQJAKpPFED97cegA2kUtJkufhEa5hguf0l6KbAjfRsqUoyisV/sajng+9Tg8sp/2sVPRImnYco2IPWCUbqfgT1lSrrW/7VfTgedn+s9KD1yN30pCRKrXQnuutQZutHvvpsYD3WcPOT9ADl+8K2mVNPnAp9cSF3FNUNnVr4DitOXmXd5BOI2x9VwM0UXRJJ6U6MWENSmG19tlu9tF0g83WkJw35hw1brVGEXTtxk4RtKzrdEcwaG7N+s0ANrPfcth3vHWoM7SOzosxLcPNKMmLbqN7xpoDCR7Zwo26aAOV2mziKs4ZG1WmpTzlGUXJPpWdjSaDmSD1S9EsUryx0/OqplwYy9vjrrPyxLZUyHbAlg4UBYchLJdPRqKr5WY1GnenBYElwhrjZsE0UWXitVtXau4B6TbsEETKTYgqW7ca11skHotAqCLSqu8TzTldome82Wsp5a2lPn03qYZV0HrRfaYtuR2xJ6W3pQhPi8Xyezqa3c8TyNnMNv1zOy+QUBFrb8+Yo3hUiDsBt4OTRPQOeXLy11deWJbq1+OgVrJp8JITpcISj+p5aa9SJ5TKi/o2VKD37G/xu1ERehnQt/bKk+LfZZ2Li48XXAy/KLjDXTbqabKD0+DFjk5YidPrAw8b+ADh3wm7wHd0BAD7RC6YL3I63Np/w+1uHZyLbhdOOgWY4JsQi8aE33JgNDJJFCsKnToP+Ain5hLZJ+oMIeJY0aRZzy41NiRiiRkNlwIzZVR8UKZ6gjrOx1Oy55plBcn64P+UtFEhJJwsTRaRKlKkLQ6TIVFajgW4FybDoZ1loaLkI+ACamn7vt5/X1BiF1y1/8m85UFdNdyaAG6A7phsAKgEUNljkEgZGhJqDY7/TQBeHCUBQ7bM3HwgbX2hUHhqbn3VDsIVYcAoomY1TISKHcKariNO2PbaZgyX5N6oC/OHfNjxXzabV+91hR2d90zbk6bWotfUxzuvZ/mWE2AIgaUsOMde5snf/NxBElNVPnB045As1kLdjhRM0wCJH8X384+4FiQpzJ3tlufDTZydm1/k+xI80DKzs7INNcWemo9FflMbU70a5MXSzpiaiJeyfPP74Jjso8dKNQbLzDuiJKZjVebQuSV4UtxHuc94mSgx1kfuDXSn54cWlI/IC901zzN/UFheSAz85UPeQ4W6cPeJ5Z7Qz3V1Yf4DxUwcjVMOHNy/Z7VCcnVNu+RhrCZm2Pgc/PekHiDmSxhpaVX/Zpb3ybTr7gmq/SQPHuhYh85ZyzAgS9bhdbCcmeKbiAdODfLT8OYfiitWlDYqpvArls3WTlgMAt2/dHlh2PKgTf9C3xZ6SfMPf4H/e/DeeBU9YTHXud+QEcczVOuLHD+8pR7Q4ItaA4rCDaqSE1PLB/c/6xOQwt8fF5DmMMYhIFW6P8A/ZWWSDlR+AvKkAZJcuA2ThltOqtHilt0hhX74CCiuz12fJrwJOm/kar23PmgzaH21LlvtP7SQMKjJ4X3Ge4emTB16l/FuniAh5KR716vKe+sOOlsSWpJUK/6+4R1UkQDelaH4e4fnCqZB8Dwv3HAbkMo7II0h+zH2kPQAT7diZzA60R6o3IB2E8hUwxCdENuicNkw3pQ1YR3AhGA9UOqmhVWC7/HngiboCBZbg4KDzga9uu/nfkayyrXNtb5N0LO3U5vStQ1TJl+Jq2M/00nrlp1baILFTn7eSQjGzoIaSRi7V5FYhGUuwcaARMOYt59wXsE8J7+YWJonyFWLkc/AlG4gigJdJjGTQJ1iCbNXk56FOQWmJZOoT+UzxdQWBqaOatItGSBI3E3MxD40KfmrXQpS5vyRCZc+X53Qn98Zz0aZ+yj0f0oB601pJcIT/LFKmMNKINMsffEGFomXauqjNqtKllBO4+/UP+993doltuQfXLtU0pPGBnrW2o4u+P30yuA4vdY6Qe/t07D9YAFHIkqHvfYUeph1RU+m/aBns24EEAD/Rq8s+xcelTUkEMB7JTjY42BnMOokDk8JeBZNLyFmhvio0Caos9puTM95priqjCj9mOOZGMpKz2zmGrAPc+tYh5+nswWBQhRHvKheOR72eAjyc8SFZ4R0pyD4izMyqL5102eIF9TO4GBThIR9FjJtiZ8xg/ChkAXq1tt3w2hzPKZwI736/P0wDo+ZPZIlXSYD3aD2sXrdF5A3j5ZNUJ0UFHXkEF5IverEPDJNIP7+xVywGYJ0ziWSfsUy1NEorjp9+1rvrS37se5DXLePFDlKVFFHE2100cegueWb5QgzqyRdljFPtoQhvCSjo0cKVVaMkK2o4rlyAAA=') format('woff2'), |
||||
url('./assets/icon/iconfont.woff?t=1583637102320') format('woff'), |
||||
url('./assets/icon/iconfont.ttf?t=1583637102320') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('./assets/icon/iconfont.svg?t=1583637102320#iconfont') format('svg'); /* iOS 4.1- */ |
||||
} |
||||
|
||||
.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
.icon-android:before { |
||||
content: "\e61d"; |
||||
} |
||||
|
||||
.icon-android1:before { |
||||
content: "\e616"; |
||||
} |
||||
|
||||
.icon-android2:before { |
||||
content: "\e62a"; |
||||
} |
||||
|
||||
.icon-ios:before { |
||||
content: "\e60c"; |
||||
} |
||||
|
||||
.icon-IOS:before { |
||||
content: "\e68c"; |
||||
} |
||||
|
||||
.icon-ios1:before { |
||||
content: "\e601"; |
||||
} |
||||
|
||||
.icon-ios2:before { |
||||
content: "\e64b"; |
||||
} |
||||
|
||||
.icon-Android:before { |
||||
content: "\e6d4"; |
||||
} |
||||
|
||||
.icon-android3:before { |
||||
content: "\e625"; |
||||
} |
||||
|
||||
.canvas { |
||||
position: fixed; |
||||
left: -0px; |
||||
top: 58px; |
||||
height: 100%; |
||||
z-index: -2; |
||||
width: 100%; |
||||
} |
||||
|
||||
</style> |
||||
|
||||
@ -1,75 +1,75 @@ |
||||
<template> |
||||
<div id="download" ref="download"> |
||||
<router-view></router-view> |
||||
</div> |
||||
<div id="download" ref="download"> |
||||
<router-view></router-view> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
export default { |
||||
name: 'download', |
||||
data() { |
||||
return {} |
||||
}, |
||||
} |
||||
export default { |
||||
name: 'download', |
||||
data() { |
||||
return {} |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
body { |
||||
background-color: #F6F6F6; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: "iconfont"; |
||||
src: url('./assets/icon/iconfont.eot?t=1583637102320'); /* IE9 */ |
||||
src: url('./assets/icon/iconfont.eot?t=1583637102320#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAnUAAsAAAAAEXwAAAmIAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEIAqUYJBKATYCJAMoCxYABCAFhG0HdhuGDlGUL1aT7CuMW3giIDU2lBZVYzMmA6BYbBoB4AIAvsWyNCR1ZYRAPDyt/e/cmdn1b4KYdG+eSCaJRMWjWPVE6ZTyQkZL4P/W2j938EFdZvf2bG4F1UgXqyQeKfBIqpGQb4i2eQ/W/4P6Ek9oYwayNWYT2liwtS7KBWzNL+pBXQarNpcN/6uINB8EdIMjCcASCSSx4cAb7oGJPvjzf6maMe0OLEmbbAtQ1TLH+t2bjwpcoLGH1RZY9/OCWElqEp69Ctt/lUoZgKMJ9DZKJTpb39oLSoVQBWoeMPQUKGtmZQQOra7u2bKID6DSppeMC3hP7x//HA0lSZWJNS/fr5uFyp+QiaT/uZpYwYv1OWFuR8Z+oBDfe93f5Fy5n9R9H1g8BBYZNWVZ128wWubBX4gsc00C/+npXSCHRbkuqBVJ6GSNo/zjETVVPQL/ONPxMyIeNT9HHoWfyzwSPzeo8DQ7IF5OsxdGGZpzMGqgeQOjCpoJxHejmz7ZYhE4AvIjgLIWhPY8ORu1xKf7mSXfEqJWz1lFqu4IsUVclojNFtvZeZZJWCxfTwc225MLw+IOJVu9jIhlZydks0WD2YzVCGJDzZv3bRWtVSPgFM6ZTJDKjCPGrSIdax2dlWgymUleOEnitJKXpPyEKz9ri1IZTMalepIwQ/od1OvB5hq3QpDBcnCLkASgX+Ot37xvI9/Ep9QGC7EF1DMQNJgws3VoBmqIDgCbNXYuVd01lKFvR5CqnITxPpi1Z23gbKCzVCYzT3meaFLvhr5kmfWJDrV+iz8KDo/ogiAUbGoo8SKbLBDTGVnfLmB0BpiGzuEVMxCPpJitnaqi7QPc/I2nEGN6Yb7eUj2voN2qcKHuJxEIVUb7HLspkHcwNKgtsk9XrLzLL2qnl/syr6WbOyffau0FeKUntEq8bGeo+bLsHFVv2IggXAm3BxcRKD4qQJAKpPFED97cegA2kUtJkufhEa5hguf0l6KbAjfRsqUoyisV/sajng+9Tg8sp/2sVPRImnYco2IPWCUbqfgT1lSrrW/7VfTgedn+s9KD1yN30pCRKrXQnuutQZutHvvpsYD3WcPOT9ADl+8K2mVNPnAp9cSF3FNUNnVr4DitOXmXd5BOI2x9VwM0UXRJJ6U6MWENSmG19tlu9tF0g83WkJw35hw1brVGEXTtxk4RtKzrdEcwaG7N+s0ANrPfcth3vHWoM7SOzosxLcPNKMmLbqN7xpoDCR7Zwo26aAOV2mziKs4ZG1WmpTzlGUXJPpWdjSaDmSD1S9EsUryx0/OqplwYy9vjrrPyxLZUyHbAlg4UBYchLJdPRqKr5WY1GnenBYElwhrjZsE0UWXitVtXau4B6TbsEETKTYgqW7ca11skHotAqCLSqu8TzTldome82Wsp5a2lPn03qYZV0HrRfaYtuR2xJ6W3pQhPi8Xyezqa3c8TyNnMNv1zOy+QUBFrb8+Yo3hUiDsBt4OTRPQOeXLy11deWJbq1+OgVrJp8JITpcISj+p5aa9SJ5TKi/o2VKD37G/xu1ERehnQt/bKk+LfZZ2Li48XXAy/KLjDXTbqabKD0+DFjk5YidPrAw8b+ADh3wm7wHd0BAD7RC6YL3I63Np/w+1uHZyLbhdOOgWY4JsQi8aE33JgNDJJFCsKnToP+Ain5hLZJ+oMIeJY0aRZzy41NiRiiRkNlwIzZVR8UKZ6gjrOx1Oy55plBcn64P+UtFEhJJwsTRaRKlKkLQ6TIVFajgW4FybDoZ1loaLkI+ACamn7vt5/X1BiF1y1/8m85UFdNdyaAG6A7phsAKgEUNljkEgZGhJqDY7/TQBeHCUBQ7bM3HwgbX2hUHhqbn3VDsIVYcAoomY1TISKHcKariNO2PbaZgyX5N6oC/OHfNjxXzabV+91hR2d90zbk6bWotfUxzuvZ/mWE2AIgaUsOMde5snf/NxBElNVPnB045As1kLdjhRM0wCJH8X384+4FiQpzJ3tlufDTZydm1/k+xI80DKzs7INNcWemo9FflMbU70a5MXSzpiaiJeyfPP74Jjso8dKNQbLzDuiJKZjVebQuSV4UtxHuc94mSgx1kfuDXSn54cWlI/IC901zzN/UFheSAz85UPeQ4W6cPeJ5Z7Qz3V1Yf4DxUwcjVMOHNy/Z7VCcnVNu+RhrCZm2Pgc/PekHiDmSxhpaVX/Zpb3ybTr7gmq/SQPHuhYh85ZyzAgS9bhdbCcmeKbiAdODfLT8OYfiitWlDYqpvArls3WTlgMAt2/dHlh2PKgTf9C3xZ6SfMPf4H/e/DeeBU9YTHXud+QEcczVOuLHD+8pR7Q4ItaA4rCDaqSE1PLB/c/6xOQwt8fF5DmMMYhIFW6P8A/ZWWSDlR+AvKkAZJcuA2ThltOqtHilt0hhX74CCiuz12fJrwJOm/kar23PmgzaH21LlvtP7SQMKjJ4X3Ge4emTB16l/FuniAh5KR716vKe+sOOlsSWpJUK/6+4R1UkQDelaH4e4fnCqZB8Dwv3HAbkMo7II0h+zH2kPQAT7diZzA60R6o3IB2E8hUwxCdENuicNkw3pQ1YR3AhGA9UOqmhVWC7/HngiboCBZbg4KDzga9uu/nfkayyrXNtb5N0LO3U5vStQ1TJl+Jq2M/00nrlp1baILFTn7eSQjGzoIaSRi7V5FYhGUuwcaARMOYt59wXsE8J7+YWJonyFWLkc/AlG4gigJdJjGTQJ1iCbNXk56FOQWmJZOoT+UzxdQWBqaOatItGSBI3E3MxD40KfmrXQpS5vyRCZc+X53Qn98Zz0aZ+yj0f0oB601pJcIT/LFKmMNKINMsffEGFomXauqjNqtKllBO4+/UP+993doltuQfXLtU0pPGBnrW2o4u+P30yuA4vdY6Qe/t07D9YAFHIkqHvfYUeph1RU+m/aBns24EEAD/Rq8s+xcelTUkEMB7JTjY42BnMOokDk8JeBZNLyFmhvio0Caos9puTM95priqjCj9mOOZGMpKz2zmGrAPc+tYh5+nswWBQhRHvKheOR72eAjyc8SFZ4R0pyD4izMyqL5102eIF9TO4GBThIR9FjJtiZ8xg/ChkAXq1tt3w2hzPKZwI736/P0wDo+ZPZIlXSYD3aD2sXrdF5A3j5ZNUJ0UFHXkEF5IverEPDJNIP7+xVywGYJ0ziWSfsUy1NEorjp9+1rvrS37se5DXLePFDlKVFFHE2100cegueWb5QgzqyRdljFPtoQhvCSjo0cKVVaMkK2o4rlyAAA=') format('woff2'), |
||||
url('./assets/icon/iconfont.woff?t=1583637102320') format('woff'), |
||||
url('./assets/icon/iconfont.ttf?t=1583637102320') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('./assets/icon/iconfont.svg?t=1583637102320#iconfont') format('svg'); /* iOS 4.1- */ |
||||
} |
||||
|
||||
.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
.icon-android:before { |
||||
content: "\e61d"; |
||||
} |
||||
|
||||
.icon-android1:before { |
||||
content: "\e616"; |
||||
} |
||||
|
||||
.icon-android2:before { |
||||
content: "\e62a"; |
||||
} |
||||
|
||||
.icon-ios:before { |
||||
content: "\e60c"; |
||||
} |
||||
|
||||
.icon-IOS:before { |
||||
content: "\e68c"; |
||||
} |
||||
|
||||
.icon-ios1:before { |
||||
content: "\e601"; |
||||
} |
||||
|
||||
.icon-ios2:before { |
||||
content: "\e64b"; |
||||
} |
||||
|
||||
.icon-Android:before { |
||||
content: "\e6d4"; |
||||
} |
||||
|
||||
.icon-android3:before { |
||||
content: "\e625"; |
||||
} |
||||
body { |
||||
background-color: #F6F6F6; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: "iconfont"; |
||||
src: url('./assets/icon/iconfont.eot?t=1583637102320'); /* IE9 */ |
||||
src: url('./assets/icon/iconfont.eot?t=1583637102320#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAnUAAsAAAAAEXwAAAmIAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEIAqUYJBKATYCJAMoCxYABCAFhG0HdhuGDlGUL1aT7CuMW3giIDU2lBZVYzMmA6BYbBoB4AIAvsWyNCR1ZYRAPDyt/e/cmdn1b4KYdG+eSCaJRMWjWPVE6ZTyQkZL4P/W2j938EFdZvf2bG4F1UgXqyQeKfBIqpGQb4i2eQ/W/4P6Ek9oYwayNWYT2liwtS7KBWzNL+pBXQarNpcN/6uINB8EdIMjCcASCSSx4cAb7oGJPvjzf6maMe0OLEmbbAtQ1TLH+t2bjwpcoLGH1RZY9/OCWElqEp69Ctt/lUoZgKMJ9DZKJTpb39oLSoVQBWoeMPQUKGtmZQQOra7u2bKID6DSppeMC3hP7x//HA0lSZWJNS/fr5uFyp+QiaT/uZpYwYv1OWFuR8Z+oBDfe93f5Fy5n9R9H1g8BBYZNWVZ128wWubBX4gsc00C/+npXSCHRbkuqBVJ6GSNo/zjETVVPQL/ONPxMyIeNT9HHoWfyzwSPzeo8DQ7IF5OsxdGGZpzMGqgeQOjCpoJxHejmz7ZYhE4AvIjgLIWhPY8ORu1xKf7mSXfEqJWz1lFqu4IsUVclojNFtvZeZZJWCxfTwc225MLw+IOJVu9jIhlZydks0WD2YzVCGJDzZv3bRWtVSPgFM6ZTJDKjCPGrSIdax2dlWgymUleOEnitJKXpPyEKz9ri1IZTMalepIwQ/od1OvB5hq3QpDBcnCLkASgX+Ot37xvI9/Ep9QGC7EF1DMQNJgws3VoBmqIDgCbNXYuVd01lKFvR5CqnITxPpi1Z23gbKCzVCYzT3meaFLvhr5kmfWJDrV+iz8KDo/ogiAUbGoo8SKbLBDTGVnfLmB0BpiGzuEVMxCPpJitnaqi7QPc/I2nEGN6Yb7eUj2voN2qcKHuJxEIVUb7HLspkHcwNKgtsk9XrLzLL2qnl/syr6WbOyffau0FeKUntEq8bGeo+bLsHFVv2IggXAm3BxcRKD4qQJAKpPFED97cegA2kUtJkufhEa5hguf0l6KbAjfRsqUoyisV/sajng+9Tg8sp/2sVPRImnYco2IPWCUbqfgT1lSrrW/7VfTgedn+s9KD1yN30pCRKrXQnuutQZutHvvpsYD3WcPOT9ADl+8K2mVNPnAp9cSF3FNUNnVr4DitOXmXd5BOI2x9VwM0UXRJJ6U6MWENSmG19tlu9tF0g83WkJw35hw1brVGEXTtxk4RtKzrdEcwaG7N+s0ANrPfcth3vHWoM7SOzosxLcPNKMmLbqN7xpoDCR7Zwo26aAOV2mziKs4ZG1WmpTzlGUXJPpWdjSaDmSD1S9EsUryx0/OqplwYy9vjrrPyxLZUyHbAlg4UBYchLJdPRqKr5WY1GnenBYElwhrjZsE0UWXitVtXau4B6TbsEETKTYgqW7ca11skHotAqCLSqu8TzTldome82Wsp5a2lPn03qYZV0HrRfaYtuR2xJ6W3pQhPi8Xyezqa3c8TyNnMNv1zOy+QUBFrb8+Yo3hUiDsBt4OTRPQOeXLy11deWJbq1+OgVrJp8JITpcISj+p5aa9SJ5TKi/o2VKD37G/xu1ERehnQt/bKk+LfZZ2Li48XXAy/KLjDXTbqabKD0+DFjk5YidPrAw8b+ADh3wm7wHd0BAD7RC6YL3I63Np/w+1uHZyLbhdOOgWY4JsQi8aE33JgNDJJFCsKnToP+Ain5hLZJ+oMIeJY0aRZzy41NiRiiRkNlwIzZVR8UKZ6gjrOx1Oy55plBcn64P+UtFEhJJwsTRaRKlKkLQ6TIVFajgW4FybDoZ1loaLkI+ACamn7vt5/X1BiF1y1/8m85UFdNdyaAG6A7phsAKgEUNljkEgZGhJqDY7/TQBeHCUBQ7bM3HwgbX2hUHhqbn3VDsIVYcAoomY1TISKHcKariNO2PbaZgyX5N6oC/OHfNjxXzabV+91hR2d90zbk6bWotfUxzuvZ/mWE2AIgaUsOMde5snf/NxBElNVPnB045As1kLdjhRM0wCJH8X384+4FiQpzJ3tlufDTZydm1/k+xI80DKzs7INNcWemo9FflMbU70a5MXSzpiaiJeyfPP74Jjso8dKNQbLzDuiJKZjVebQuSV4UtxHuc94mSgx1kfuDXSn54cWlI/IC901zzN/UFheSAz85UPeQ4W6cPeJ5Z7Qz3V1Yf4DxUwcjVMOHNy/Z7VCcnVNu+RhrCZm2Pgc/PekHiDmSxhpaVX/Zpb3ybTr7gmq/SQPHuhYh85ZyzAgS9bhdbCcmeKbiAdODfLT8OYfiitWlDYqpvArls3WTlgMAt2/dHlh2PKgTf9C3xZ6SfMPf4H/e/DeeBU9YTHXud+QEcczVOuLHD+8pR7Q4ItaA4rCDaqSE1PLB/c/6xOQwt8fF5DmMMYhIFW6P8A/ZWWSDlR+AvKkAZJcuA2ThltOqtHilt0hhX74CCiuz12fJrwJOm/kar23PmgzaH21LlvtP7SQMKjJ4X3Ge4emTB16l/FuniAh5KR716vKe+sOOlsSWpJUK/6+4R1UkQDelaH4e4fnCqZB8Dwv3HAbkMo7II0h+zH2kPQAT7diZzA60R6o3IB2E8hUwxCdENuicNkw3pQ1YR3AhGA9UOqmhVWC7/HngiboCBZbg4KDzga9uu/nfkayyrXNtb5N0LO3U5vStQ1TJl+Jq2M/00nrlp1baILFTn7eSQjGzoIaSRi7V5FYhGUuwcaARMOYt59wXsE8J7+YWJonyFWLkc/AlG4gigJdJjGTQJ1iCbNXk56FOQWmJZOoT+UzxdQWBqaOatItGSBI3E3MxD40KfmrXQpS5vyRCZc+X53Qn98Zz0aZ+yj0f0oB601pJcIT/LFKmMNKINMsffEGFomXauqjNqtKllBO4+/UP+993doltuQfXLtU0pPGBnrW2o4u+P30yuA4vdY6Qe/t07D9YAFHIkqHvfYUeph1RU+m/aBns24EEAD/Rq8s+xcelTUkEMB7JTjY42BnMOokDk8JeBZNLyFmhvio0Caos9puTM95priqjCj9mOOZGMpKz2zmGrAPc+tYh5+nswWBQhRHvKheOR72eAjyc8SFZ4R0pyD4izMyqL5102eIF9TO4GBThIR9FjJtiZ8xg/ChkAXq1tt3w2hzPKZwI736/P0wDo+ZPZIlXSYD3aD2sXrdF5A3j5ZNUJ0UFHXkEF5IverEPDJNIP7+xVywGYJ0ziWSfsUy1NEorjp9+1rvrS37se5DXLePFDlKVFFHE2100cegueWb5QgzqyRdljFPtoQhvCSjo0cKVVaMkK2o4rlyAAA=') format('woff2'), |
||||
url('./assets/icon/iconfont.woff?t=1583637102320') format('woff'), |
||||
url('./assets/icon/iconfont.ttf?t=1583637102320') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('./assets/icon/iconfont.svg?t=1583637102320#iconfont') format('svg'); /* iOS 4.1- */ |
||||
} |
||||
|
||||
.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
.icon-android:before { |
||||
content: "\e61d"; |
||||
} |
||||
|
||||
.icon-android1:before { |
||||
content: "\e616"; |
||||
} |
||||
|
||||
.icon-android2:before { |
||||
content: "\e62a"; |
||||
} |
||||
|
||||
.icon-ios:before { |
||||
content: "\e60c"; |
||||
} |
||||
|
||||
.icon-IOS:before { |
||||
content: "\e68c"; |
||||
} |
||||
|
||||
.icon-ios1:before { |
||||
content: "\e601"; |
||||
} |
||||
|
||||
.icon-ios2:before { |
||||
content: "\e64b"; |
||||
} |
||||
|
||||
.icon-Android:before { |
||||
content: "\e6d4"; |
||||
} |
||||
|
||||
.icon-android3:before { |
||||
content: "\e625"; |
||||
} |
||||
|
||||
|
||||
</style> |
||||
|
||||
@ -1,129 +1,129 @@ |
||||
<template> |
||||
<div ref="appbase"> |
||||
<el-dialog |
||||
:title="bind_domain_title" |
||||
:close-on-click-modal="false" |
||||
:close-on-press-escape="false" |
||||
:visible.sync="bind_domain_sure" |
||||
width="666px"> |
||||
<bind-domain v-if="bind_domain_sure" :transitionName="`bind-user-domain`+ bind_domain_type" |
||||
:domain_type="bind_domain_type"/> |
||||
</el-dialog> |
||||
<canvas ref="canvas" class="canvas" @mousemove="canvas_move" @mouseleave="canvas_leave"/> |
||||
<el-container> |
||||
<div style="margin: -5px 20px" v-if="$store.state.show_domain_msg"> |
||||
<el-alert |
||||
center |
||||
type="error" |
||||
:closable="false" |
||||
effect="dark"> |
||||
<div slot="title"> |
||||
<div ref="appbase"> |
||||
<el-dialog |
||||
:close-on-click-modal="false" |
||||
:close-on-press-escape="false" |
||||
:title="bind_domain_title" |
||||
:visible.sync="bind_domain_sure" |
||||
width="666px"> |
||||
<bind-domain v-if="bind_domain_sure" :domain_type="bind_domain_type" |
||||
:transitionName="`bind-user-domain`+ bind_domain_type"/> |
||||
</el-dialog> |
||||
<canvas ref="canvas" class="canvas" @mouseleave="canvas_leave" @mousemove="canvas_move"/> |
||||
<el-container> |
||||
<div v-if="$store.state.show_domain_msg" style="margin: -5px 20px"> |
||||
<el-alert |
||||
:closable="false" |
||||
center |
||||
effect="dark" |
||||
type="error"> |
||||
<div slot="title"> |
||||
<span :underline="false" |
||||
class="domian-tip-bar">应用分发请绑定您自己的域名，平台分发域名可能因不可违因素更换，将导致您的应用无法访问</span> |
||||
<el-button size="medium" @click="bind_domain_type=1,bind_domain_sure=true">立即绑定</el-button> |
||||
</div> |
||||
</el-alert> |
||||
</div> |
||||
<el-header> |
||||
<FirHeader/> |
||||
</el-header> |
||||
<div class="pbody"> |
||||
<router-view/> |
||||
</div> |
||||
<el-footer> |
||||
<el-divider/> |
||||
<FirFooter/> |
||||
</el-footer> |
||||
<el-tooltip placement="top" content="回到顶部"> |
||||
<back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" |
||||
transition-name="fade"/> |
||||
</el-tooltip> |
||||
</el-container> |
||||
</div> |
||||
<el-button size="medium" @click="bind_domain_type=1,bind_domain_sure=true">立即绑定</el-button> |
||||
</div> |
||||
</el-alert> |
||||
</div> |
||||
<el-header> |
||||
<FirHeader/> |
||||
</el-header> |
||||
<div class="pbody"> |
||||
<router-view/> |
||||
</div> |
||||
<el-footer> |
||||
<el-divider/> |
||||
<FirFooter/> |
||||
</el-footer> |
||||
<el-tooltip content="回到顶部" placement="top"> |
||||
<back-to-top :back-position="50" :custom-style="myBackToTopStyle" :visibility-height="300" |
||||
transition-name="fade"/> |
||||
</el-tooltip> |
||||
</el-container> |
||||
</div> |
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
import FirHeader from "@/components/FirHeader"; |
||||
import FirFooter from "@/components/FirFooter"; |
||||
import BackToTop from "@/components/base/BackToTop"; |
||||
import BindDomain from "@/components/base/BindDomain"; |
||||
import {show_beautpic,} from "@/utils"; |
||||
import FirHeader from "@/components/FirHeader"; |
||||
import FirFooter from "@/components/FirFooter"; |
||||
import BackToTop from "@/components/base/BackToTop"; |
||||
import BindDomain from "@/components/base/BindDomain"; |
||||
import {show_beautpic,} from "@/utils"; |
||||
|
||||
export default { |
||||
name: "FirBase", |
||||
components: {FirFooter, FirHeader, BackToTop, BindDomain}, |
||||
data() { |
||||
return { |
||||
mousePosition: {}, |
||||
bind_domain_sure: false, |
||||
bind_domain_title: '绑定下载页域名', |
||||
bind_domain_type: 1, |
||||
active: 1, |
||||
domain_name: '', |
||||
bind_status: false, |
||||
domain_tData: [{'type': 'CNAME', 'host': 'xxx', 'dns': 'demo.xxx.cn'}], |
||||
myBackToTopStyle: { |
||||
right: '80px', |
||||
bottom: '100px', |
||||
width: '40px', |
||||
height: '40px', |
||||
'border-radius': '4px', |
||||
'line-height': '45px', |
||||
background: '#e7eaf1' |
||||
} |
||||
} |
||||
}, |
||||
mounted() { |
||||
let canvas = this.$refs.canvas; |
||||
show_beautpic(this, canvas, 200); |
||||
}, watch: { |
||||
'$store.state.userinfo': function () { |
||||
if (this.$store.state.userinfo.domain_name) { |
||||
this.$store.dispatch("dodomainshow", false); |
||||
} else { |
||||
this.$store.dispatch("dodomainshow", true); |
||||
} |
||||
}, |
||||
'$store.state.domain_action': function () { |
||||
if (this.$store.state.domain_action) { |
||||
if (this.$store.state.domain_action === 2) { |
||||
this.bind_domain_title = '绑定下载码域名'; |
||||
this.bind_domain_type = 0 |
||||
} else { |
||||
this.bind_domain_title = '绑定下载页域名'; |
||||
this.bind_domain_type = 1 |
||||
} |
||||
this.$store.dispatch("dodomainaction", 0); |
||||
this.bind_domain_sure = true; |
||||
} |
||||
}, |
||||
} |
||||
, methods: { |
||||
canvas_move(e) { |
||||
this.mousePosition.x = e.pageX; |
||||
this.mousePosition.y = e.pageY; |
||||
}, |
||||
// eslint-disable-next-line no-unused-vars |
||||
canvas_leave(e) { |
||||
let canvas = this.$refs.canvas; |
||||
this.mousePosition.x = canvas.width / 2; |
||||
this.mousePosition.y = canvas.height / 2; |
||||
}, |
||||
} |
||||
export default { |
||||
name: "FirBase", |
||||
components: {FirFooter, FirHeader, BackToTop, BindDomain}, |
||||
data() { |
||||
return { |
||||
mousePosition: {}, |
||||
bind_domain_sure: false, |
||||
bind_domain_title: '绑定下载页域名', |
||||
bind_domain_type: 1, |
||||
active: 1, |
||||
domain_name: '', |
||||
bind_status: false, |
||||
domain_tData: [{'type': 'CNAME', 'host': 'xxx', 'dns': 'demo.xxx.cn'}], |
||||
myBackToTopStyle: { |
||||
right: '80px', |
||||
bottom: '100px', |
||||
width: '40px', |
||||
height: '40px', |
||||
'border-radius': '4px', |
||||
'line-height': '45px', |
||||
background: '#e7eaf1' |
||||
} |
||||
} |
||||
}, |
||||
mounted() { |
||||
let canvas = this.$refs.canvas; |
||||
show_beautpic(this, canvas, 200); |
||||
}, watch: { |
||||
'$store.state.userinfo': function () { |
||||
if (this.$store.state.userinfo.domain_name) { |
||||
this.$store.dispatch("dodomainshow", false); |
||||
} else { |
||||
this.$store.dispatch("dodomainshow", true); |
||||
} |
||||
}, |
||||
'$store.state.domain_action': function () { |
||||
if (this.$store.state.domain_action) { |
||||
if (this.$store.state.domain_action === 2) { |
||||
this.bind_domain_title = '绑定下载码域名'; |
||||
this.bind_domain_type = 0 |
||||
} else { |
||||
this.bind_domain_title = '绑定下载页域名'; |
||||
this.bind_domain_type = 1 |
||||
} |
||||
this.$store.dispatch("dodomainaction", 0); |
||||
this.bind_domain_sure = true; |
||||
} |
||||
}, |
||||
} |
||||
, methods: { |
||||
canvas_move(e) { |
||||
this.mousePosition.x = e.pageX; |
||||
this.mousePosition.y = e.pageY; |
||||
}, |
||||
// eslint-disable-next-line no-unused-vars |
||||
canvas_leave(e) { |
||||
let canvas = this.$refs.canvas; |
||||
this.mousePosition.x = canvas.width / 2; |
||||
this.mousePosition.y = canvas.height / 2; |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.pbody { |
||||
padding-top: 30px; |
||||
} |
||||
.pbody { |
||||
padding-top: 30px; |
||||
} |
||||
|
||||
.domian-tip-bar { |
||||
line-height: 43px; |
||||
color: #fff; |
||||
font-weight: 500; |
||||
font-size: medium; |
||||
margin-right: 20px; |
||||
} |
||||
.domian-tip-bar { |
||||
line-height: 43px; |
||||
color: #fff; |
||||
font-weight: 500; |
||||
font-size: medium; |
||||
margin-right: 20px; |
||||
} |
||||
</style> |
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,61 +1,61 @@ |
||||
<template> |
||||
<div class="ifooter"> |
||||
<div class="ifooter"> |
||||
|
||||
<div style="width: 300px; margin: 0 auto; padding: 5px 0;"> |
||||
<el-link :underline="false"> {{ footer.copyright }}</el-link> |
||||
</div> |
||||
<div style="width: 300px; margin: 0 auto; padding: 5px 0;"> |
||||
<a style="display: inline-block; text-decoration: none; height: 20px; line-height: 20px;" |
||||
:href="footer.gongAnBeiAn.url" |
||||
target="_blank" rel="noopener"> |
||||
<img style="float: left;" src="@/assets/beianlogo.png" alt=""/> |
||||
<el-link :underline="false" |
||||
style="float: left; height: 20px; line-height: 20px; margin: 0 0 0 5px; color: #939393;"> |
||||
{{ footer.gongAnBeiAn.text }} |
||||
</el-link> |
||||
</a> |
||||
<div style="width: 300px; margin: 0 auto; padding: 5px 0;"> |
||||
<el-link :underline="false"> {{ footer.copyright }}</el-link> |
||||
</div> |
||||
<div style="width: 300px; margin: 0 auto; padding: 5px 0;"> |
||||
<a :href="footer.gongAnBeiAn.url" |
||||
rel="noopener" |
||||
style="display: inline-block; text-decoration: none; height: 20px; line-height: 20px;" target="_blank"> |
||||
<img alt="" src="@/assets/beianlogo.png" style="float: left;"/> |
||||
<el-link :underline="false" |
||||
style="float: left; height: 20px; line-height: 20px; margin: 0 0 0 5px; color: #939393;"> |
||||
{{ footer.gongAnBeiAn.text }} |
||||
</el-link> |
||||
</a> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
<div> |
||||
<div :underline="false" style="width: 200px; margin: 0 auto; padding: 5px 0;"> |
||||
<el-link :underline="false" :href="footer.ipcBeiAn.url" target="_blank" |
||||
rel="nofollow noopener">{{ footer.ipcBeiAn.text }} |
||||
</el-link> |
||||
</div> |
||||
</div> |
||||
<div> |
||||
<div :underline="false" style="width: 200px; margin: 0 auto; padding: 5px 0;"> |
||||
<el-link :href="footer.ipcBeiAn.url" :underline="false" rel="nofollow noopener" |
||||
target="_blank">{{ footer.ipcBeiAn.text }} |
||||
</el-link> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
export default { |
||||
name: "FirFooter", |
||||
data() { |
||||
return { |
||||
footer: { |
||||
copyright: 'Copyright © 2020-2022 东城飞阳 版权所有.', |
||||
ipcBeiAn: { |
||||
url: 'https://beian.miit.gov.cn', |
||||
text: '粤ICP备2021097895号', |
||||
}, |
||||
gongAnBeiAn: { |
||||
url: 'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41142202000062', |
||||
text: '豫公网安备41142202000062号', |
||||
}, |
||||
} |
||||
} |
||||
} |
||||
export default { |
||||
name: "FirFooter", |
||||
data() { |
||||
return { |
||||
footer: { |
||||
copyright: 'Copyright © 2020-2022 东城飞阳 版权所有.', |
||||
ipcBeiAn: { |
||||
url: 'https://beian.miit.gov.cn', |
||||
text: '粤ICP备2021097895号', |
||||
}, |
||||
gongAnBeiAn: { |
||||
url: 'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41142202000062', |
||||
text: '豫公网安备41142202000062号', |
||||
}, |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.ifooter { |
||||
margin: 20px auto 100px; |
||||
width: 1166px; |
||||
text-align: center; |
||||
font-size: 0; |
||||
border-radius: 10px; |
||||
} |
||||
.ifooter { |
||||
margin: 20px auto 100px; |
||||
width: 1166px; |
||||
text-align: center; |
||||
font-size: 0; |
||||
border-radius: 10px; |
||||
} |
||||
|
||||
</style> |
||||
|
||||
@ -1,203 +1,204 @@ |
||||
<template> |
||||
<div style="background-color: rgba(162,193,230,0.18);"> |
||||
<el-container class="navbar-wrapper"> |
||||
<el-dialog |
||||
title="API Token" |
||||
:visible.sync="dialogVisible" |
||||
width="30%" |
||||
center |
||||
> |
||||
<span>可用于调用公开 API，可用于登录 fly-cli，请勿泄露您的 token</span> |
||||
<el-main> |
||||
<el-tooltip content="点击复制到剪贴板"> |
||||
<el-link type="primary" v-if="token" :underline="false" v-clipboard:copy="token" |
||||
v-clipboard:success="copy_success">{{ token }} |
||||
</el-link> |
||||
</el-tooltip> |
||||
</el-main> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<div style="background-color: rgba(162,193,230,0.18);"> |
||||
<el-container class="navbar-wrapper"> |
||||
<el-dialog |
||||
:visible.sync="dialogVisible" |
||||
center |
||||
title="API Token" |
||||
width="30%" |
||||
> |
||||
<span>可用于调用公开 API，可用于登录 fly-cli，请勿泄露您的 token</span> |
||||
<el-main> |
||||
<el-tooltip content="点击复制到剪贴板"> |
||||
<el-link v-if="token" v-clipboard:copy="token" v-clipboard:success="copy_success" :underline="false" |
||||
type="primary">{{ token }} |
||||
</el-link> |
||||
</el-tooltip> |
||||
</el-main> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button type="primary" @click="maketoken">重新生成</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="14" style="padding-top: 36px;margin-left: 60px"> |
||||
<el-breadcrumb separator-class="el-icon-arrow-right" style="height: 60px;font-size: 20px"> |
||||
<el-breadcrumb-item :to="{ name:'FirIndex' }">首页</el-breadcrumb-item> |
||||
<el-breadcrumb-item :to="{ name:'FirApps'}">我的应用</el-breadcrumb-item> |
||||
|
||||
<el-breadcrumb-item v-if="this.route_info.label" :to="{ name:route_info.name}">{{ |
||||
this.route_info.label }} |
||||
</el-breadcrumb-item> |
||||
|
||||
<el-breadcrumb-item v-if="$store.state.currentapp.name" |
||||
:to="{name: 'FirAppInfostimeline', params: {id: $store.state.currentapp.app_id}}"> |
||||
{{ $store.state.currentapp.name}} |
||||
</el-breadcrumb-item> |
||||
|
||||
</el-breadcrumb> |
||||
</el-col> |
||||
<el-col :span="2" :push="2" style="padding-top: 16px;"> |
||||
<div class="block"> |
||||
<el-avatar :size="66" :src="$store.state.userinfo.head_img"></el-avatar> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="4" :push="2" style="padding-top: 16px"> |
||||
<el-dropdown style="padding-top: 12px;" @command="handleCommand"> |
||||
<el-button type="primary" plain round> |
||||
{{$store.state.userinfo.first_name }}<i class="el-icon-arrow-down el-icon--right"></i> |
||||
</el-button> |
||||
<el-dropdown-menu slot="dropdown"> |
||||
<el-dropdown-item command="userinfo">个人资料</el-dropdown-item> |
||||
<el-dropdown-item command="apitoken">API token</el-dropdown-item> |
||||
<el-dropdown-item command="setdomian">设置域名</el-dropdown-item> |
||||
<el-dropdown-item command="setadvert" v-if="$store.state.userinfo.role>1">宣传广告 |
||||
</el-dropdown-item> |
||||
<el-dropdown-item command="storage" v-if="$store.state.userinfo.storage_active">存储管理 |
||||
</el-dropdown-item> |
||||
<el-dropdown-item command="supersign" v-if="$store.state.userinfo.supersign_active">超级签名 |
||||
</el-dropdown-item> |
||||
<el-dropdown-item command="myorder">订单信息</el-dropdown-item> |
||||
<el-dropdown-item command="contact">联系我们</el-dropdown-item> |
||||
<el-dropdown-item command="exit">退出</el-dropdown-item> |
||||
|
||||
</el-dropdown-menu> |
||||
</el-dropdown> |
||||
|
||||
</el-col> |
||||
|
||||
</el-row> |
||||
|
||||
|
||||
</el-container> |
||||
</div> |
||||
</el-dialog> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="14" style="padding-top: 36px;margin-left: 60px"> |
||||
<el-breadcrumb separator-class="el-icon-arrow-right" style="height: 60px;font-size: 20px"> |
||||
<el-breadcrumb-item :to="{ name:'FirIndex' }">首页</el-breadcrumb-item> |
||||
<el-breadcrumb-item :to="{ name:'FirApps'}">我的应用</el-breadcrumb-item> |
||||
|
||||
<el-breadcrumb-item v-if="this.route_info.label" :to="{ name:route_info.name}">{{ |
||||
this.route_info.label |
||||
}} |
||||
</el-breadcrumb-item> |
||||
|
||||
<el-breadcrumb-item v-if="$store.state.currentapp.name" |
||||
:to="{name: 'FirAppInfostimeline', params: {id: $store.state.currentapp.app_id}}"> |
||||
{{ $store.state.currentapp.name }} |
||||
</el-breadcrumb-item> |
||||
|
||||
</el-breadcrumb> |
||||
</el-col> |
||||
<el-col :push="2" :span="2" style="padding-top: 16px;"> |
||||
<div class="block"> |
||||
<el-avatar :size="66" :src="$store.state.userinfo.head_img"></el-avatar> |
||||
</div> |
||||
</el-col> |
||||
<el-col :push="2" :span="4" style="padding-top: 16px"> |
||||
<el-dropdown style="padding-top: 12px;" @command="handleCommand"> |
||||
<el-button plain round type="primary"> |
||||
{{ $store.state.userinfo.first_name }}<i class="el-icon-arrow-down el-icon--right"></i> |
||||
</el-button> |
||||
<el-dropdown-menu slot="dropdown"> |
||||
<el-dropdown-item command="userinfo">个人资料</el-dropdown-item> |
||||
<el-dropdown-item command="apitoken">API token</el-dropdown-item> |
||||
<el-dropdown-item command="setdomian">设置域名</el-dropdown-item> |
||||
<el-dropdown-item v-if="$store.state.userinfo.role>1" command="setadvert">宣传广告 |
||||
</el-dropdown-item> |
||||
<el-dropdown-item v-if="$store.state.userinfo.storage_active" command="storage">存储管理 |
||||
</el-dropdown-item> |
||||
<el-dropdown-item v-if="$store.state.userinfo.supersign_active" command="supersign">超级签名 |
||||
</el-dropdown-item> |
||||
<el-dropdown-item command="myorder">订单信息</el-dropdown-item> |
||||
<el-dropdown-item command="contact">联系我们</el-dropdown-item> |
||||
<el-dropdown-item command="exit">退出</el-dropdown-item> |
||||
|
||||
</el-dropdown-menu> |
||||
</el-dropdown> |
||||
|
||||
</el-col> |
||||
|
||||
</el-row> |
||||
|
||||
|
||||
</el-container> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import {apitoken, logout} from '@/restful' |
||||
|
||||
export default { |
||||
name: "FirHeader", |
||||
data() { |
||||
return { |
||||
current_user: {}, |
||||
appName: '', |
||||
token: '', |
||||
dialogVisible: false, |
||||
route_info: {'name': '', 'label': ''}, |
||||
} |
||||
}, methods: { |
||||
copy_success() { |
||||
this.$message.success('复制剪切板成功'); |
||||
}, |
||||
maketoken() { |
||||
this.$confirm('确认重新生成新的密钥么?', '警告', { |
||||
type: 'warning' |
||||
}) |
||||
// eslint-disable-next-line no-unused-vars |
||||
.then(res => { |
||||
apitoken(data => { |
||||
if (data.code === 1000) { |
||||
this.token = data.data.token; |
||||
this.$message({ |
||||
type: 'success', |
||||
message: '重新生成成功!' |
||||
}); |
||||
} else { |
||||
this.$message.error("失败了 " + data.msg) |
||||
} |
||||
}, {methods: 'PUT', token: this.token}); |
||||
}) |
||||
.catch(err => { |
||||
this.$message.error(err) |
||||
}); |
||||
}, |
||||
handleCommand(command) { |
||||
if (command === 'userinfo') { |
||||
this.$router.push({name: 'FirUserProfileInfo'}) |
||||
} else if (command === 'storage') { |
||||
this.$router.push({name: 'FirUserStorage', params: {act: "change"}}) |
||||
} else if (command === 'supersign') { |
||||
this.$store.dispatch('doucurrentapp', {}); |
||||
this.$router.push({"name": 'FirSuperSignBase', params: {act: "iosdeveloper"}}) |
||||
} else if (command === 'apitoken') { |
||||
apitoken(data => { |
||||
if (data.code === 1000) { |
||||
this.token = data.data.token; |
||||
this.dialogVisible = true; |
||||
} else { |
||||
this.dialogVisible = false; |
||||
this.$message.error("获取失败了 " + data.msg) |
||||
} |
||||
}, {methods: 'GET', token: this.token}); |
||||
|
||||
} else if (command === 'setdomian') { |
||||
this.$router.push({"name": 'FirUserDomain'}) |
||||
} else if (command === 'setadvert') { |
||||
this.$router.push({"name": 'FirUserAdvert'}) |
||||
} else if (command === 'myorder') { |
||||
this.$router.push({"name": 'FirUserOrders'}) |
||||
} else if (command === 'contact') { |
||||
this.$router.push({"name": 'FirContact'}) |
||||
} else if (command === 'exit') { |
||||
logout(data => { |
||||
if (data.code === 1000) { |
||||
this.$message.success("退出成功"); |
||||
this.$cookies.remove("token"); |
||||
this.$cookies.remove("auth_token"); |
||||
this.$cookies.remove("username"); |
||||
this.$cookies.remove("first_name"); |
||||
this.$store.dispatch('doucurrentapp', {}); |
||||
this.$store.dispatch('doUserinfo', {}); |
||||
this.$router.push({name: 'FirLogin'}); |
||||
} else { |
||||
this.$message.error("退出失败") |
||||
} |
||||
}, {}) |
||||
} |
||||
}, |
||||
init_route_name() { |
||||
if (this.$route.meta) { |
||||
this.route_info.label = this.$route.meta.label; |
||||
this.route_info.name = this.$route.name; |
||||
} |
||||
}, |
||||
|
||||
}, created() { |
||||
this.appName = this.$route.params.id |
||||
}, watch: { |
||||
$route: function () { |
||||
this.appName = this.$route.params.id; |
||||
this.init_route_name(); |
||||
} |
||||
}, mounted() { |
||||
this.init_route_name(); |
||||
} |
||||
import {apitoken, logout} from '@/restful' |
||||
|
||||
export default { |
||||
name: "FirHeader", |
||||
data() { |
||||
return { |
||||
current_user: {}, |
||||
appName: '', |
||||
token: '', |
||||
dialogVisible: false, |
||||
route_info: {'name': '', 'label': ''}, |
||||
} |
||||
}, methods: { |
||||
copy_success() { |
||||
this.$message.success('复制剪切板成功'); |
||||
}, |
||||
maketoken() { |
||||
this.$confirm('确认重新生成新的密钥么?', '警告', { |
||||
type: 'warning' |
||||
}) |
||||
// eslint-disable-next-line no-unused-vars |
||||
.then(res => { |
||||
apitoken(data => { |
||||
if (data.code === 1000) { |
||||
this.token = data.data.token; |
||||
this.$message({ |
||||
type: 'success', |
||||
message: '重新生成成功!' |
||||
}); |
||||
} else { |
||||
this.$message.error("失败了 " + data.msg) |
||||
} |
||||
}, {methods: 'PUT', token: this.token}); |
||||
}) |
||||
.catch(err => { |
||||
this.$message.error(err) |
||||
}); |
||||
}, |
||||
handleCommand(command) { |
||||
if (command === 'userinfo') { |
||||
this.$router.push({name: 'FirUserProfileInfo'}) |
||||
} else if (command === 'storage') { |
||||
this.$router.push({name: 'FirUserStorage', params: {act: "change"}}) |
||||
} else if (command === 'supersign') { |
||||
this.$store.dispatch('doucurrentapp', {}); |
||||
this.$router.push({"name": 'FirSuperSignBase', params: {act: "iosdeveloper"}}) |
||||
} else if (command === 'apitoken') { |
||||
apitoken(data => { |
||||
if (data.code === 1000) { |
||||
this.token = data.data.token; |
||||
this.dialogVisible = true; |
||||
} else { |
||||
this.dialogVisible = false; |
||||
this.$message.error("获取失败了 " + data.msg) |
||||
} |
||||
}, {methods: 'GET', token: this.token}); |
||||
|
||||
} else if (command === 'setdomian') { |
||||
this.$router.push({"name": 'FirUserDomain'}) |
||||
} else if (command === 'setadvert') { |
||||
this.$router.push({"name": 'FirUserAdvert'}) |
||||
} else if (command === 'myorder') { |
||||
this.$router.push({"name": 'FirUserOrders'}) |
||||
} else if (command === 'contact') { |
||||
this.$router.push({"name": 'FirContact'}) |
||||
} else if (command === 'exit') { |
||||
logout(data => { |
||||
if (data.code === 1000) { |
||||
this.$message.success("退出成功"); |
||||
this.$cookies.remove("token"); |
||||
this.$cookies.remove("auth_token"); |
||||
this.$cookies.remove("username"); |
||||
this.$cookies.remove("first_name"); |
||||
this.$store.dispatch('doucurrentapp', {}); |
||||
this.$store.dispatch('doUserinfo', {}); |
||||
this.$router.push({name: 'FirLogin'}); |
||||
} else { |
||||
this.$message.error("退出失败") |
||||
} |
||||
}, {}) |
||||
} |
||||
}, |
||||
init_route_name() { |
||||
if (this.$route.meta) { |
||||
this.route_info.label = this.$route.meta.label; |
||||
this.route_info.name = this.$route.name; |
||||
} |
||||
}, |
||||
|
||||
}, created() { |
||||
this.appName = this.$route.params.id |
||||
}, watch: { |
||||
$route: function () { |
||||
this.appName = this.$route.params.id; |
||||
this.init_route_name(); |
||||
} |
||||
}, mounted() { |
||||
this.init_route_name(); |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
.el-container, .el-row { |
||||
margin: 10px auto; |
||||
width: 1166px; |
||||
} |
||||
.el-container, .el-row { |
||||
margin: 10px auto; |
||||
width: 1166px; |
||||
} |
||||
|
||||
.navbar-wrapper { |
||||
font-size: 0; |
||||
border-radius: 10px; |
||||
} |
||||
.navbar-wrapper { |
||||
font-size: 0; |
||||
border-radius: 10px; |
||||
} |
||||
|
||||
.el-dropdown { |
||||
vertical-align: top; |
||||
} |
||||
.el-dropdown { |
||||
vertical-align: top; |
||||
} |
||||
|
||||
.el-dropdown + .el-dropdown { |
||||
margin-left: 15px; |
||||
} |
||||
.el-dropdown + .el-dropdown { |
||||
margin-left: 15px; |
||||
} |
||||
|
||||
.el-icon-arrow-down { |
||||
font-size: 12px; |
||||
} |
||||
.el-icon-arrow-down { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
|
||||
</style> |
||||
|
||||
@ -1,424 +1,424 @@ |
||||
<template> |
||||
<el-container> |
||||
<div style="margin: 10px 0 10px 0 ;position:absolute;right:20px;top:auto;"> |
||||
<el-button round icon="el-icon-arrow-left" @click="$router.go(-1)"/> |
||||
<el-button round icon="el-icon-s-home" @click="$router.push({name:'FirIndex'})"/> |
||||
<el-container> |
||||
<div style="margin: 10px 0 10px 0 ;position:absolute;right:20px;top:auto;"> |
||||
<el-button icon="el-icon-arrow-left" round @click="$router.go(-1)"/> |
||||
<el-button icon="el-icon-s-home" round @click="$router.push({name:'FirIndex'})"/> |
||||
|
||||
</div> |
||||
<el-header> |
||||
|
||||
<div> |
||||
<span>登录</span> |
||||
</div> |
||||
|
||||
</el-header> |
||||
<el-main> |
||||
|
||||
<el-form ref="form" :model="form"> |
||||
|
||||
<el-tabs v-model="activeName"> |
||||
<el-tab-pane v-if="allow_ways.up" label="用户名登录" name="username"> |
||||
<el-form-item> |
||||
<el-input v-model="form.email" autofocus clearable placeholder="用户名" |
||||
prefix-icon="el-icon-user"/> |
||||
</el-form-item> |
||||
</el-tab-pane> |
||||
<el-tab-pane v-if="allow_ways.sms || allow_ways.email" :label="rutitle+'登录'" name="smsemail"> |
||||
<el-form-item> |
||||
<el-input v-model="form.email" :placeholder="rutitle" autofocus clearable |
||||
prefix-icon="el-icon-user"/> |
||||
</el-form-item> |
||||
</el-tab-pane> |
||||
|
||||
</el-tabs> |
||||
|
||||
<el-form-item v-if="is_captcha"> |
||||
<el-input v-model="form.password" clearable placeholder="密码" |
||||
prefix-icon="el-icon-lock" |
||||
show-password @keyup.enter.native="onSubmit"/> |
||||
</el-form-item> |
||||
<el-form-item v-else> |
||||
<el-input v-model="form.password" clearable placeholder="密码" |
||||
prefix-icon="el-icon-lock" show-password/> |
||||
</el-form-item> |
||||
<el-form-item v-if="captcha.captcha_image" style="height: 40px"> |
||||
<el-row style="height: 40px"> |
||||
<el-col :span="16"> |
||||
<el-input v-model="form.authcode" clearable maxlength="6" |
||||
placeholder="请输入验证码" @keyup.enter.native="onSubmit"/> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<el-image |
||||
:src="captcha.captcha_image" |
||||
fit="contain" |
||||
style="margin:0 4px;border-radius:4px;cursor:pointer;height: 40px" @click="get_auth_code"> |
||||
</el-image> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
|
||||
<el-form-item> |
||||
<div id="captcha" ref="captcha"></div> |
||||
</el-form-item> |
||||
|
||||
<el-form-item> |
||||
<el-button :disabled="login_disable" type="danger" @click="onSubmit">登录</el-button> |
||||
</el-form-item> |
||||
|
||||
<el-form-item v-if="register_enable"> |
||||
<el-button plain type="primary" @click="onRegister">注册</el-button> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-link :underline="false" plain @click="$router.push({name: 'FirResetPwd'})">忘记密码</el-link> |
||||
</el-form-item> |
||||
|
||||
<div v-if="allow_ways.third && JSON.stringify(allow_ways.third).indexOf('true')!==-1" class="other-way"> |
||||
<hr> |
||||
<span class="info">或使用以下账户登录</span> |
||||
|
||||
<el-popover |
||||
v-if="allow_ways.third && allow_ways.third.wxp" |
||||
v-model="wx_visible" |
||||
placement="top" |
||||
title="微信扫码关注公众号登录" |
||||
trigger="manual"> |
||||
<div> |
||||
<el-image :src="wx_login_qr_url" style="width: 176px;height: 166px"/> |
||||
</div> |
||||
<el-button slot="reference" |
||||
size="small" style="color: #1fc939;border: 1px solid rgba(31,201,57,.5); width: 110px" @click="wxLogin">微信 |
||||
</el-button> |
||||
</el-popover> |
||||
|
||||
</div> |
||||
<el-header> |
||||
</el-form> |
||||
|
||||
<div> |
||||
<span>登录</span> |
||||
</div> |
||||
|
||||
</el-header> |
||||
<el-main> |
||||
|
||||
<el-form ref="form" :model="form"> |
||||
|
||||
<el-tabs v-model="activeName"> |
||||
<el-tab-pane label="用户名登录" name="username" v-if="allow_ways.up"> |
||||
<el-form-item> |
||||
<el-input v-model="form.email" prefix-icon="el-icon-user" placeholder="用户名" autofocus |
||||
clearable/> |
||||
</el-form-item> |
||||
</el-tab-pane> |
||||
<el-tab-pane :label="rutitle+'登录'" name="smsemail" v-if="allow_ways.sms || allow_ways.email"> |
||||
<el-form-item> |
||||
<el-input v-model="form.email" prefix-icon="el-icon-user" :placeholder="rutitle" autofocus |
||||
clearable/> |
||||
</el-form-item> |
||||
</el-tab-pane> |
||||
|
||||
</el-tabs> |
||||
|
||||
<el-form-item v-if="is_captcha"> |
||||
<el-input v-model="form.password" prefix-icon="el-icon-lock" placeholder="密码" |
||||
@keyup.enter.native="onSubmit" |
||||
show-password clearable/> |
||||
</el-form-item> |
||||
<el-form-item v-else> |
||||
<el-input v-model="form.password" prefix-icon="el-icon-lock" placeholder="密码" |
||||
show-password clearable/> |
||||
</el-form-item> |
||||
<el-form-item style="height: 40px" v-if="captcha.captcha_image"> |
||||
<el-row style="height: 40px"> |
||||
<el-col :span="16"> |
||||
<el-input placeholder="请输入验证码" v-model="form.authcode" maxlength="6" |
||||
@keyup.enter.native="onSubmit" clearable/> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<el-image |
||||
style="margin:0 4px;border-radius:4px;cursor:pointer;height: 40px" |
||||
:src="captcha.captcha_image" |
||||
fit="contain" @click="get_auth_code"> |
||||
</el-image> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
|
||||
<el-form-item> |
||||
<div id="captcha" ref="captcha"></div> |
||||
</el-form-item> |
||||
|
||||
<el-form-item> |
||||
<el-button type="danger" :disabled="login_disable" @click="onSubmit">登录</el-button> |
||||
</el-form-item> |
||||
|
||||
<el-form-item v-if="register_enable"> |
||||
<el-button type="primary" @click="onRegister" plain>注册</el-button> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-link :underline="false" @click="$router.push({name: 'FirResetPwd'})" plain>忘记密码</el-link> |
||||
</el-form-item> |
||||
|
||||
<div class="other-way" v-if="allow_ways.third && JSON.stringify(allow_ways.third).indexOf('true')!==-1"> |
||||
<hr> |
||||
<span class="info">或使用以下账户登录</span> |
||||
|
||||
<el-popover |
||||
v-if="allow_ways.third && allow_ways.third.wxp" |
||||
placement="top" |
||||
trigger="manual" |
||||
title="微信扫码关注公众号登录" |
||||
v-model="wx_visible"> |
||||
<div> |
||||
<el-image :src="wx_login_qr_url" style="width: 176px;height: 166px"/> |
||||
</div> |
||||
<el-button style="color: #1fc939;border: 1px solid rgba(31,201,57,.5); width: 110px" |
||||
slot="reference" size="small" @click="wxLogin">微信 |
||||
</el-button> |
||||
</el-popover> |
||||
|
||||
</div> |
||||
</el-form> |
||||
|
||||
|
||||
</el-main> |
||||
|
||||
|
||||
</el-container> |
||||
</el-main> |
||||
|
||||
|
||||
</el-container> |
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
import {loginFun, set_auth_token, wxLoginFun} from "@/restful"; |
||||
import {checkEmail, checkphone, geetest} from "@/utils"; |
||||
|
||||
export default { |
||||
name: "FirLogin", |
||||
data() { |
||||
return { |
||||
form: { |
||||
email: '', |
||||
password: '', |
||||
authcode: '' |
||||
}, |
||||
captcha: {"captcha_image": '', "captcha_key": '', "length": 8}, |
||||
activeName: 'username', |
||||
allow_ways: {'third': {}}, |
||||
rutitle: '', |
||||
rctitle: '', |
||||
register_enable: false, |
||||
login_disable: false, |
||||
wx_login_qr_url: '', |
||||
wx_visible: false, |
||||
loop_flag: false, |
||||
} |
||||
}, |
||||
methods: { |
||||
|
||||
set_cookie_and_token(data) { |
||||
this.$cookies.remove("auth_token"); |
||||
this.$cookies.set("token", data['token'], 3600 * 24 * 30); |
||||
this.$cookies.set("username", data.userinfo.username, 3600 * 24 * 30); |
||||
this.$cookies.set("first_name", data.userinfo.first_name, 3600 * 24 * 30); |
||||
this.$store.dispatch("doUserinfo", data.userinfo); |
||||
set_auth_token(); |
||||
this.$router.push({name: 'FirApps'}) |
||||
}, |
||||
loop_get_wx_info(wx_login_ticket) { |
||||
if (wx_login_ticket && wx_login_ticket.length < 3) { |
||||
this.$message.error("获取登陆码失败，请稍后再试"); |
||||
return |
||||
} |
||||
let c_count = 1; |
||||
// eslint-disable-next-line no-unused-vars |
||||
const loop_t = window.setInterval(res => { |
||||
if (!this.loop_flag) { |
||||
window.clearInterval(loop_t); |
||||
} |
||||
wxLoginFun(data => { |
||||
c_count += 1; |
||||
if (c_count > 120) { |
||||
window.clearInterval(loop_t); |
||||
} |
||||
if (data.code === 1000) { |
||||
window.clearInterval(loop_t); |
||||
this.set_cookie_and_token(data); |
||||
} else if (data.code === 1005) { |
||||
window.clearInterval(loop_t); |
||||
this.wx_visible = false; |
||||
this.loop_flag = false; |
||||
this.$message({ |
||||
message: data.msg, |
||||
type: 'error', |
||||
duration: 30000 |
||||
}); |
||||
} |
||||
}, { |
||||
"methods": "POST", |
||||
data: {"ticket": wx_login_ticket} |
||||
}) |
||||
}, 3000) |
||||
|
||||
}, |
||||
wxLogin() { |
||||
this.wx_visible = !this.wx_visible; |
||||
this.wx_login_qr_url = ''; |
||||
if (this.wx_visible) { |
||||
wxLoginFun(data => { |
||||
if (data.code === 1000) { |
||||
this.wx_login_qr_url = data.data.qr; |
||||
this.loop_flag = true; |
||||
this.loop_get_wx_info(data.data.ticket); |
||||
} else { |
||||
this.$message.error(data.msg); |
||||
this.wx_visible = false; |
||||
this.loop_flag = false; |
||||
} |
||||
}, { |
||||
"methods": "GET", |
||||
}) |
||||
} else { |
||||
this.loop_flag = false; |
||||
} |
||||
}, |
||||
is_captcha() { |
||||
let captcha_flag = this.form.authcode.length === this.captcha.length; |
||||
if (this.captcha.captcha_key === '' || !this.captcha.captcha_key) { |
||||
captcha_flag = true |
||||
} |
||||
return captcha_flag |
||||
}, |
||||
onSubmit() { |
||||
let email = this.form.email; |
||||
let password = this.form.password; |
||||
let authcode = this.form.authcode; |
||||
let login_type = 'up'; |
||||
let captcha_flag = this.form.authcode.length === this.captcha.length; |
||||
if (this.captcha.captcha_key === '' || !this.captcha.captcha_key) { |
||||
captcha_flag = true |
||||
} |
||||
if (captcha_flag) { |
||||
|
||||
if (this.activeName === "username") { |
||||
if (email.length < 6) { |
||||
this.$message({ |
||||
message: '用户名至少6位', |
||||
type: 'error' |
||||
}); |
||||
return |
||||
} |
||||
|
||||
} else if (this.activeName === "smsemail") { |
||||
let checkp = checkphone(this.form.email); |
||||
let checke = checkEmail(this.form.email); |
||||
if (!checkp && !checke) { |
||||
this.$message({ |
||||
message: '邮箱或者手机号输入有误', |
||||
type: 'error' |
||||
}); |
||||
return |
||||
} |
||||
if (checkp) { |
||||
login_type = 'sms'; |
||||
} else if (checke) { |
||||
login_type = 'email'; |
||||
} |
||||
} else { |
||||
this.$message({ |
||||
message: '未知登录方式', |
||||
type: 'error' |
||||
}); |
||||
return |
||||
} |
||||
if (password.length > 6) { |
||||
let params = { |
||||
"username": email, |
||||
"password": password, |
||||
"authcode": authcode, |
||||
"captcha_key": this.captcha.captcha_key, |
||||
"login_type": login_type, |
||||
}; |
||||
this.login_disable = true; |
||||
if (this.captcha.geetest) { |
||||
geetest(this, this.form.email, params, (n_params) => { |
||||
this.do_login(n_params); |
||||
}) |
||||
} else { |
||||
this.do_login(params) |
||||
} |
||||
} else { |
||||
this.$message({ |
||||
message: '密码长度过短', |
||||
type: 'warning' |
||||
}); |
||||
} |
||||
} else { |
||||
this.$message({ |
||||
message: '验证码有误', |
||||
type: 'warning' |
||||
}); |
||||
} |
||||
}, |
||||
do_login(params) { |
||||
loginFun(data => { |
||||
if (data.code === 1000) { |
||||
this.$message({ |
||||
message: '登录成功', |
||||
type: 'success' |
||||
}); |
||||
this.set_cookie_and_token(data); |
||||
} else { |
||||
this.$message({ |
||||
message: data.msg, |
||||
type: 'error' |
||||
}); |
||||
this.get_auth_code(); |
||||
} |
||||
this.login_disable = false; |
||||
}, { |
||||
"methods": "POST", |
||||
"data": params |
||||
}); |
||||
}, |
||||
onRegister() { |
||||
this.$router.push({name: 'FirRegist'}) |
||||
}, |
||||
set_activename() { |
||||
if (this.allow_ways.up) { |
||||
this.activeName = 'username'; |
||||
} else { |
||||
this.activeName = 'smsemail'; |
||||
} |
||||
}, |
||||
set_rtitle() { |
||||
this.rutitle = ''; |
||||
if (this.allow_ways.sms) { |
||||
this.rutitle = this.rutitle + '手机号 '; |
||||
} |
||||
if (this.allow_ways.email) { |
||||
this.rutitle = this.rutitle + '邮箱 '; |
||||
} |
||||
|
||||
this.rutitle = this.rutitle.trim().replace(' ', '或'); |
||||
}, |
||||
get_auth_code() { |
||||
loginFun(data => { |
||||
if (data.code === 1000) { |
||||
this.captcha = data.data; |
||||
this.allow_ways = data.data.login_type; |
||||
this.register_enable = data.data.register_enable; |
||||
this.form.authcode = ''; |
||||
this.set_rtitle(); |
||||
this.set_activename(); |
||||
} else { |
||||
this.$message({ |
||||
message: data.msg, |
||||
type: 'error' |
||||
}); |
||||
} |
||||
}, { |
||||
"methods": "GET", |
||||
"data": {} |
||||
}); |
||||
}, |
||||
}, |
||||
mounted() { |
||||
this.get_auth_code(); |
||||
}, created() { |
||||
} |
||||
import {loginFun, set_auth_token, wxLoginFun} from "@/restful"; |
||||
import {checkEmail, checkphone, geetest} from "@/utils"; |
||||
|
||||
export default { |
||||
name: "FirLogin", |
||||
data() { |
||||
return { |
||||
form: { |
||||
email: '', |
||||
password: '', |
||||
authcode: '' |
||||
}, |
||||
captcha: {"captcha_image": '', "captcha_key": '', "length": 8}, |
||||
activeName: 'username', |
||||
allow_ways: {'third': {}}, |
||||
rutitle: '', |
||||
rctitle: '', |
||||
register_enable: false, |
||||
login_disable: false, |
||||
wx_login_qr_url: '', |
||||
wx_visible: false, |
||||
loop_flag: false, |
||||
} |
||||
}, |
||||
methods: { |
||||
|
||||
set_cookie_and_token(data) { |
||||
this.$cookies.remove("auth_token"); |
||||
this.$cookies.set("token", data['token'], 3600 * 24 * 30); |
||||
this.$cookies.set("username", data.userinfo.username, 3600 * 24 * 30); |
||||
this.$cookies.set("first_name", data.userinfo.first_name, 3600 * 24 * 30); |
||||
this.$store.dispatch("doUserinfo", data.userinfo); |
||||
set_auth_token(); |
||||
this.$router.push({name: 'FirApps'}) |
||||
}, |
||||
loop_get_wx_info(wx_login_ticket) { |
||||
if (wx_login_ticket && wx_login_ticket.length < 3) { |
||||
this.$message.error("获取登陆码失败，请稍后再试"); |
||||
return |
||||
} |
||||
let c_count = 1; |
||||
// eslint-disable-next-line no-unused-vars |
||||
const loop_t = window.setInterval(res => { |
||||
if (!this.loop_flag) { |
||||
window.clearInterval(loop_t); |
||||
} |
||||
wxLoginFun(data => { |
||||
c_count += 1; |
||||
if (c_count > 120) { |
||||
window.clearInterval(loop_t); |
||||
} |
||||
if (data.code === 1000) { |
||||
window.clearInterval(loop_t); |
||||
this.set_cookie_and_token(data); |
||||
} else if (data.code === 1005) { |
||||
window.clearInterval(loop_t); |
||||
this.wx_visible = false; |
||||
this.loop_flag = false; |
||||
this.$message({ |
||||
message: data.msg, |
||||
type: 'error', |
||||
duration: 30000 |
||||
}); |
||||
} |
||||
}, { |
||||
"methods": "POST", |
||||
data: {"ticket": wx_login_ticket} |
||||
}) |
||||
}, 3000) |
||||
|
||||
}, |
||||
wxLogin() { |
||||
this.wx_visible = !this.wx_visible; |
||||
this.wx_login_qr_url = ''; |
||||
if (this.wx_visible) { |
||||
wxLoginFun(data => { |
||||
if (data.code === 1000) { |
||||
this.wx_login_qr_url = data.data.qr; |
||||
this.loop_flag = true; |
||||
this.loop_get_wx_info(data.data.ticket); |
||||
} else { |
||||
this.$message.error(data.msg); |
||||
this.wx_visible = false; |
||||
this.loop_flag = false; |
||||
} |
||||
}, { |
||||
"methods": "GET", |
||||
}) |
||||
} else { |
||||
this.loop_flag = false; |
||||
} |
||||
}, |
||||
is_captcha() { |
||||
let captcha_flag = this.form.authcode.length === this.captcha.length; |
||||
if (this.captcha.captcha_key === '' || !this.captcha.captcha_key) { |
||||
captcha_flag = true |
||||
} |
||||
return captcha_flag |
||||
}, |
||||
onSubmit() { |
||||
let email = this.form.email; |
||||
let password = this.form.password; |
||||
let authcode = this.form.authcode; |
||||
let login_type = 'up'; |
||||
let captcha_flag = this.form.authcode.length === this.captcha.length; |
||||
if (this.captcha.captcha_key === '' || !this.captcha.captcha_key) { |
||||
captcha_flag = true |
||||
} |
||||
if (captcha_flag) { |
||||
|
||||
if (this.activeName === "username") { |
||||
if (email.length < 6) { |
||||
this.$message({ |
||||
message: '用户名至少6位', |
||||
type: 'error' |
||||
}); |
||||
return |
||||
} |
||||
|
||||
} else if (this.activeName === "smsemail") { |
||||
let checkp = checkphone(this.form.email); |
||||
let checke = checkEmail(this.form.email); |
||||
if (!checkp && !checke) { |
||||
this.$message({ |
||||
message: '邮箱或者手机号输入有误', |
||||
type: 'error' |
||||
}); |
||||
return |
||||
} |
||||
if (checkp) { |
||||
login_type = 'sms'; |
||||
} else if (checke) { |
||||
login_type = 'email'; |
||||
} |
||||
} else { |
||||
this.$message({ |
||||
message: '未知登录方式', |
||||
type: 'error' |
||||
}); |
||||
return |
||||
} |
||||
if (password.length > 6) { |
||||
let params = { |
||||
"username": email, |
||||
"password": password, |
||||
"authcode": authcode, |
||||
"captcha_key": this.captcha.captcha_key, |
||||
"login_type": login_type, |
||||
}; |
||||
this.login_disable = true; |
||||
if (this.captcha.geetest) { |
||||
geetest(this, this.form.email, params, (n_params) => { |
||||
this.do_login(n_params); |
||||
}) |
||||
} else { |
||||
this.do_login(params) |
||||
} |
||||
} else { |
||||
this.$message({ |
||||
message: '密码长度过短', |
||||
type: 'warning' |
||||
}); |
||||
} |
||||
} else { |
||||
this.$message({ |
||||
message: '验证码有误', |
||||
type: 'warning' |
||||
}); |
||||
} |
||||
}, |
||||
do_login(params) { |
||||
loginFun(data => { |
||||
if (data.code === 1000) { |
||||
this.$message({ |
||||
message: '登录成功', |
||||
type: 'success' |
||||
}); |
||||
this.set_cookie_and_token(data); |
||||
} else { |
||||
this.$message({ |
||||
message: data.msg, |
||||
type: 'error' |
||||
}); |
||||
this.get_auth_code(); |
||||
} |
||||
this.login_disable = false; |
||||
}, { |
||||
"methods": "POST", |
||||
"data": params |
||||
}); |
||||
}, |
||||
onRegister() { |
||||
this.$router.push({name: 'FirRegist'}) |
||||
}, |
||||
set_activename() { |
||||
if (this.allow_ways.up) { |
||||
this.activeName = 'username'; |
||||
} else { |
||||
this.activeName = 'smsemail'; |
||||
} |
||||
}, |
||||
set_rtitle() { |
||||
this.rutitle = ''; |
||||
if (this.allow_ways.sms) { |
||||
this.rutitle = this.rutitle + '手机号 '; |
||||
} |
||||
if (this.allow_ways.email) { |
||||
this.rutitle = this.rutitle + '邮箱 '; |
||||
} |
||||
|
||||
this.rutitle = this.rutitle.trim().replace(' ', '或'); |
||||
}, |
||||
get_auth_code() { |
||||
loginFun(data => { |
||||
if (data.code === 1000) { |
||||
this.captcha = data.data; |
||||
this.allow_ways = data.data.login_type; |
||||
this.register_enable = data.data.register_enable; |
||||
this.form.authcode = ''; |
||||
this.set_rtitle(); |
||||
this.set_activename(); |
||||
} else { |
||||
this.$message({ |
||||
message: data.msg, |
||||
type: 'error' |
||||
}); |
||||
} |
||||
}, { |
||||
"methods": "GET", |
||||
"data": {} |
||||
}); |
||||
}, |
||||
}, |
||||
mounted() { |
||||
this.get_auth_code(); |
||||
}, created() { |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
.other-way { |
||||
position: relative; |
||||
text-align: center; |
||||
} |
||||
|
||||
.other-way hr { |
||||
height: 1px; |
||||
margin: 30px 0; |
||||
border: 0; |
||||
background-color: #e4e7ed; |
||||
} |
||||
|
||||
.other-way span.info { |
||||
font-size: 12px; |
||||
line-height: 1; |
||||
position: absolute; |
||||
top: -6px; |
||||
left: 50%; |
||||
padding: 0 10px; |
||||
transform: translate(-50%, 0); |
||||
color: #9ba3af; |
||||
} |
||||
|
||||
.el-container { |
||||
margin: 10px auto; |
||||
width: 1266px; |
||||
} |
||||
|
||||
.el-header { |
||||
margin-top: 13%; |
||||
} |
||||
|
||||
.el-form { |
||||
max-width: 360px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.el-form-item .el-button { |
||||
max-width: 360px; |
||||
/*padding: 16px 20px;*/ |
||||
width: 100%; |
||||
position: relative; |
||||
height: 50px; |
||||
|
||||
} |
||||
|
||||
.el-header { |
||||
text-align: center; |
||||
overflow: hidden; |
||||
margin-bottom: 50px |
||||
} |
||||
|
||||
|
||||
.el-header div span { |
||||
font-size: 24px; |
||||
display: inline-block; |
||||
vertical-align: middle; |
||||
padding: 8px 40px |
||||
} |
||||
|
||||
.el-header div:before, .el-header div:after { |
||||
content: ' '; |
||||
display: inline-block; |
||||
vertical-align: middle; |
||||
width: 50%; |
||||
height: 1px; |
||||
background-color: #babfc3; |
||||
margin: 0 0 0 -50% |
||||
} |
||||
|
||||
.el-header div { |
||||
text-align: center |
||||
} |
||||
|
||||
.el-header div:after { |
||||
margin: 0 -50% 0 0 |
||||
} |
||||
.other-way { |
||||
position: relative; |
||||
text-align: center; |
||||
} |
||||
|
||||
.other-way hr { |
||||
height: 1px; |
||||
margin: 30px 0; |
||||
border: 0; |
||||
background-color: #e4e7ed; |
||||
} |
||||
|
||||
.other-way span.info { |
||||
font-size: 12px; |
||||
line-height: 1; |
||||
position: absolute; |
||||
top: -6px; |
||||
left: 50%; |
||||
padding: 0 10px; |
||||
transform: translate(-50%, 0); |
||||
color: #9ba3af; |
||||
} |
||||
|
||||
.el-container { |
||||
margin: 10px auto; |
||||
width: 1266px; |
||||
} |
||||
|
||||
.el-header { |
||||
margin-top: 13%; |
||||
} |
||||
|
||||
.el-form { |
||||
max-width: 360px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.el-form-item .el-button { |
||||
max-width: 360px; |
||||
/*padding: 16px 20px;*/ |
||||
width: 100%; |
||||
position: relative; |
||||
height: 50px; |
||||
|
||||
} |
||||
|
||||
.el-header { |
||||
text-align: center; |
||||
overflow: hidden; |
||||
margin-bottom: 50px |
||||
} |
||||
|
||||
|
||||
.el-header div span { |
||||
font-size: 24px; |
||||
display: inline-block; |
||||
vertical-align: middle; |
||||
padding: 8px 40px |
||||
} |
||||
|
||||
.el-header div:before, .el-header div:after { |
||||
content: ' '; |
||||
display: inline-block; |
||||
vertical-align: middle; |
||||
width: 50%; |
||||
height: 1px; |
||||
background-color: #babfc3; |
||||
margin: 0 0 0 -50% |
||||
} |
||||
|
||||
.el-header div { |
||||
text-align: center |
||||
} |
||||
|
||||
.el-header div:after { |
||||
margin: 0 -50% 0 0 |
||||
} |
||||
</style> |
||||
|
||||
@ -1,389 +1,389 @@ |
||||
<template> |
||||
<el-container> |
||||
<div style="margin: 10px 0 10px 0 ;position:absolute;right:20px;top:auto;"> |
||||
<el-button round icon="el-icon-arrow-left" @click="$router.go(-1)"/> |
||||
<el-button round icon="el-icon-s-home" @click="$router.push({name:'FirIndex'})"/> |
||||
|
||||
</div> |
||||
<el-header> |
||||
|
||||
<div> |
||||
<span>注册</span> |
||||
</div> |
||||
|
||||
</el-header> |
||||
<el-main v-if="allow_r"> |
||||
|
||||
<el-form ref="form" :model="form"> |
||||
|
||||
<el-form-item v-if="allow_ways.code"> |
||||
<el-input v-model="form.icode" prefix-icon="el-icon-postcard" placeholder="邀请码必填" clearable |
||||
/> |
||||
</el-form-item> |
||||
|
||||
<el-form-item> |
||||
<el-input v-model="form.email" prefix-icon="el-icon-user" :placeholder="rutitle" autofocus |
||||
clearable/> |
||||
</el-form-item> |
||||
|
||||
<el-form-item style="height: 40px" v-if="captcha.captcha_image"> |
||||
<el-row style="height: 40px"> |
||||
<el-col :span="16"> |
||||
<el-input placeholder="请输入图片验证码" v-model="form.authcode" maxlength="6" clearable/> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<el-image |
||||
style="margin:0 4px;border-radius:4px;cursor:pointer;height: 40px" |
||||
:src="captcha.captcha_image" |
||||
fit="contain" @click="get_auth_code"> |
||||
</el-image> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
|
||||
|
||||
<el-form-item> |
||||
<el-row> |
||||
<el-col :span="16"> |
||||
<el-input v-model="form.seicode" prefix-icon="el-icon-mobile" |
||||
placeholder="验证码" clearable/> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<el-button type="info" @click="getphonecode" plain |
||||
style="margin:0 4px;border-radius:4px;cursor:pointer;height: 40px">获取验证码 |
||||
</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
|
||||
|
||||
<el-form-item> |
||||
<el-input v-model="form.password" prefix-icon="el-icon-lock" placeholder="密码" |
||||
show-password clearable/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-input v-model="form.password2" prefix-icon="el-icon-lock" placeholder="确认密码" |
||||
show-password @keyup.enter.native="onRegist" clearable/> |
||||
</el-form-item> |
||||
|
||||
<el-form-item> |
||||
<div id="captcha" ref="captcha"></div> |
||||
</el-form-item> |
||||
|
||||
<el-form-item> |
||||
<el-button type="danger" @click="onRegist" :disabled="register_disable">注册</el-button> |
||||
</el-form-item> |
||||
|
||||
<el-form-item> |
||||
<el-button type="primary" @click="onLogin" plain>我是老用户,要登录</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
|
||||
|
||||
</el-main> |
||||
|
||||
|
||||
</el-container> |
||||
<el-container> |
||||
<div style="margin: 10px 0 10px 0 ;position:absolute;right:20px;top:auto;"> |
||||
<el-button icon="el-icon-arrow-left" round @click="$router.go(-1)"/> |
||||
<el-button icon="el-icon-s-home" round @click="$router.push({name:'FirIndex'})"/> |
||||
|
||||
</div> |
||||
<el-header> |
||||
|
||||
<div> |
||||
<span>注册</span> |
||||
</div> |
||||
|
||||
</el-header> |
||||
<el-main v-if="allow_r"> |
||||
|
||||
<el-form ref="form" :model="form"> |
||||
|
||||
<el-form-item v-if="allow_ways.code"> |
||||
<el-input v-model="form.icode" clearable placeholder="邀请码必填" prefix-icon="el-icon-postcard" |
||||
/> |
||||
</el-form-item> |
||||
|
||||
<el-form-item> |
||||
<el-input v-model="form.email" :placeholder="rutitle" autofocus clearable |
||||
prefix-icon="el-icon-user"/> |
||||
</el-form-item> |
||||
|
||||
<el-form-item v-if="captcha.captcha_image" style="height: 40px"> |
||||
<el-row style="height: 40px"> |
||||
<el-col :span="16"> |
||||
<el-input v-model="form.authcode" clearable maxlength="6" placeholder="请输入图片验证码"/> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<el-image |
||||
:src="captcha.captcha_image" |
||||
fit="contain" |
||||
style="margin:0 4px;border-radius:4px;cursor:pointer;height: 40px" @click="get_auth_code"> |
||||
</el-image> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
|
||||
|
||||
<el-form-item> |
||||
<el-row> |
||||
<el-col :span="16"> |
||||
<el-input v-model="form.seicode" clearable |
||||
placeholder="验证码" prefix-icon="el-icon-mobile"/> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<el-button plain style="margin:0 4px;border-radius:4px;cursor:pointer;height: 40px" type="info" |
||||
@click="getphonecode">获取验证码 |
||||
</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
|
||||
|
||||
<el-form-item> |
||||
<el-input v-model="form.password" clearable placeholder="密码" |
||||
prefix-icon="el-icon-lock" show-password/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-input v-model="form.password2" clearable placeholder="确认密码" |
||||
prefix-icon="el-icon-lock" show-password @keyup.enter.native="onRegist"/> |
||||
</el-form-item> |
||||
|
||||
<el-form-item> |
||||
<div id="captcha" ref="captcha"></div> |
||||
</el-form-item> |
||||
|
||||
<el-form-item> |
||||
<el-button :disabled="register_disable" type="danger" @click="onRegist">注册</el-button> |
||||
</el-form-item> |
||||
|
||||
<el-form-item> |
||||
<el-button plain type="primary" @click="onLogin">我是老用户,要登录</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
|
||||
|
||||
</el-main> |
||||
|
||||
|
||||
</el-container> |
||||
</template> |
||||
|
||||
<script> |
||||
import {getAuthTokenFun, registerFun} from "@/restful"; |
||||
import {checkEmail, checkphone, geetest} from "@/utils"; |
||||
|
||||
export default { |
||||
name: "FirRegist", |
||||
data() { |
||||
return { |
||||
form: { |
||||
email: '', |
||||
password: '', |
||||
password2: '', |
||||
authcode: '', |
||||
srccode: '', |
||||
seicode: '', |
||||
authtoken: '', |
||||
icode: '', |
||||
auth_token: '', |
||||
|
||||
}, |
||||
captcha: {"captcha_image": '', "captcha_key": '', "length": 8}, |
||||
allow_r: false, |
||||
allow_ways: {}, |
||||
rutitle: '', |
||||
register_disable: false, |
||||
} |
||||
}, |
||||
methods: { |
||||
set_rtitle() { |
||||
this.rutitle = ''; |
||||
if (this.allow_ways.sms) { |
||||
this.rutitle = this.rutitle + '手机号 '; |
||||
} |
||||
if (this.allow_ways.email) { |
||||
this.rutitle = this.rutitle + '邮箱 '; |
||||
} |
||||
|
||||
this.rutitle = this.rutitle.trim().replace(' ', '或'); |
||||
}, |
||||
get_auth_code() { |
||||
registerFun(data => { |
||||
if (data.code === 1000) { |
||||
let jdata = data.data; |
||||
if (jdata.enable) { |
||||
this.allow_r = true; |
||||
this.allow_ways = jdata.register_type; |
||||
this.form.authcode = ''; |
||||
this.set_rtitle(); |
||||
this.captcha = data.data; |
||||
} else { |
||||
this.allow_r = false; |
||||
this.$message({ |
||||
message: "该服务器不允许注册", |
||||
type: 'error' |
||||
}); |
||||
} |
||||
} else { |
||||
this.$message({ |
||||
message: data.msg, |
||||
type: 'error' |
||||
}); |
||||
} |
||||
}, { |
||||
"methods": "GET", |
||||
"data": {} |
||||
}); |
||||
}, |
||||
do_get_auth_token(params) { |
||||
getAuthTokenFun(data => { |
||||
if (data.code === 1000) { |
||||
this.$notify({ |
||||
title: '验证码', |
||||
message: '您正在进行注册，验证码已经发送您', |
||||
type: 'success' |
||||
}); |
||||
this.form.auth_token = data.data.auth_token; |
||||
} else { |
||||
this.$message({ |
||||
message: data.msg, |
||||
type: 'error' |
||||
}); |
||||
} |
||||
}, {"methods": 'POST', 'data': params}) |
||||
}, |
||||
getphonecode() { |
||||
let act = 'up'; |
||||
if (!this.docheck()) { |
||||
return |
||||
} |
||||
if (checkphone(this.form.email)) { |
||||
act = 'sms' |
||||
} |
||||
if (checkEmail(this.form.email)) { |
||||
act = 'email' |
||||
} |
||||
let authcode = this.form.authcode; |
||||
let captcha_flag = authcode.length === this.captcha.length; |
||||
if (this.captcha.captcha_key === '' || !this.captcha.captcha_key) { |
||||
captcha_flag = true |
||||
} |
||||
if (captcha_flag) { |
||||
let picode = { |
||||
"authcode": authcode, |
||||
"captcha_key": this.captcha.captcha_key, |
||||
"icode": this.form.icode, |
||||
}; |
||||
let params = {'act': act, 'target': this.form.email, 'ext': picode}; |
||||
if (this.captcha.geetest) { |
||||
geetest(this, this.form.email, params, (n_params) => { |
||||
this.do_get_auth_token(n_params); |
||||
}) |
||||
} else { |
||||
this.do_get_auth_token(params); |
||||
} |
||||
} else { |
||||
this.$message({ |
||||
message: '图片验证码有误', |
||||
type: 'warning' |
||||
}); |
||||
} |
||||
|
||||
}, |
||||
docheck() { |
||||
let checkp = checkphone(this.form.email); |
||||
let checke = checkEmail(this.form.email); |
||||
|
||||
if (this.allow_ways.sms && this.allow_ways.email) { |
||||
if (!checke && !checkp) { |
||||
this.$message({ |
||||
message: '请输入正确的邮箱地址或手机号码', |
||||
type: 'warning' |
||||
}); |
||||
return 0 |
||||
} |
||||
} else { |
||||
if (this.allow_ways.email) { |
||||
if (!checke) { |
||||
this.$message({ |
||||
message: '请输入正确的邮箱地址', |
||||
type: 'warning' |
||||
}); |
||||
return 0 |
||||
} |
||||
} |
||||
if (this.allow_ways.sms) { |
||||
if (!checkp) { |
||||
this.$message({ |
||||
message: '请输入正确的手机号码', |
||||
type: 'warning' |
||||
}); |
||||
return 0 |
||||
} |
||||
} |
||||
} |
||||
if (this.allow_ways.code && this.form.icode.length === 0) { |
||||
this.$message({ |
||||
message: '请输入邀请码', |
||||
type: 'warning' |
||||
}); |
||||
return 0 |
||||
} |
||||
return 1 |
||||
}, |
||||
do_register(params) { |
||||
registerFun(data => { |
||||
if (data.code === 1000) { |
||||
this.$message({ |
||||
message: '注册成功', |
||||
type: 'success' |
||||
}); |
||||
this.$router.push({name: 'FirLogin'}) |
||||
} else { |
||||
this.$message({ |
||||
message: data.msg, |
||||
type: 'error' |
||||
}); |
||||
this.get_auth_code(); |
||||
} |
||||
}, { |
||||
"methods": "POST", |
||||
"data": params |
||||
}); |
||||
this.register_disable = false; |
||||
}, |
||||
onRegist() { |
||||
let email = this.form.email; |
||||
let password = this.form.password; |
||||
let password2 = this.form.password2; |
||||
if (!this.docheck()) { |
||||
return |
||||
} |
||||
let authcode = this.form.authcode; |
||||
let captcha_flag = authcode.length === this.captcha.length; |
||||
if (this.captcha.captcha_key === '' || !this.captcha.captcha_key) { |
||||
captcha_flag = true |
||||
} |
||||
if (captcha_flag) { |
||||
if (password === password2 && password.length >= 6) { |
||||
let params = { |
||||
"username": email, |
||||
"password": password, |
||||
"password2": password2, |
||||
"auth_token": this.form.auth_token, |
||||
"auth_key": this.form.seicode |
||||
}; |
||||
this.register_disable = true; |
||||
if (this.captcha.geetest) { |
||||
geetest(this, this.form.email, params, (n_params) => { |
||||
this.do_register(n_params); |
||||
}) |
||||
} else { |
||||
this.do_register(params); |
||||
} |
||||
|
||||
} else { |
||||
this.$message({ |
||||
message: '密码不一致或者密码长度小于6', |
||||
type: 'warning' |
||||
}); |
||||
} |
||||
|
||||
} else { |
||||
this.$message({ |
||||
message: '验证码有误', |
||||
type: 'warning' |
||||
}); |
||||
} |
||||
|
||||
|
||||
}, |
||||
onLogin() { |
||||
this.$router.push({name: 'FirLogin'}) |
||||
}, |
||||
import {getAuthTokenFun, registerFun} from "@/restful"; |
||||
import {checkEmail, checkphone, geetest} from "@/utils"; |
||||
|
||||
export default { |
||||
name: "FirRegist", |
||||
data() { |
||||
return { |
||||
form: { |
||||
email: '', |
||||
password: '', |
||||
password2: '', |
||||
authcode: '', |
||||
srccode: '', |
||||
seicode: '', |
||||
authtoken: '', |
||||
icode: '', |
||||
auth_token: '', |
||||
|
||||
}, |
||||
captcha: {"captcha_image": '', "captcha_key": '', "length": 8}, |
||||
allow_r: false, |
||||
allow_ways: {}, |
||||
rutitle: '', |
||||
register_disable: false, |
||||
} |
||||
}, |
||||
methods: { |
||||
set_rtitle() { |
||||
this.rutitle = ''; |
||||
if (this.allow_ways.sms) { |
||||
this.rutitle = this.rutitle + '手机号 '; |
||||
} |
||||
if (this.allow_ways.email) { |
||||
this.rutitle = this.rutitle + '邮箱 '; |
||||
} |
||||
|
||||
this.rutitle = this.rutitle.trim().replace(' ', '或'); |
||||
}, |
||||
get_auth_code() { |
||||
registerFun(data => { |
||||
if (data.code === 1000) { |
||||
let jdata = data.data; |
||||
if (jdata.enable) { |
||||
this.allow_r = true; |
||||
this.allow_ways = jdata.register_type; |
||||
this.form.authcode = ''; |
||||
this.set_rtitle(); |
||||
this.captcha = data.data; |
||||
} else { |
||||
this.allow_r = false; |
||||
this.$message({ |
||||
message: "该服务器不允许注册", |
||||
type: 'error' |
||||
}); |
||||
} |
||||
} else { |
||||
this.$message({ |
||||
message: data.msg, |
||||
type: 'error' |
||||
}); |
||||
} |
||||
, |
||||
created() { |
||||
}, mounted() { |
||||
this.get_auth_code(); |
||||
}, { |
||||
"methods": "GET", |
||||
"data": {} |
||||
}); |
||||
}, |
||||
do_get_auth_token(params) { |
||||
getAuthTokenFun(data => { |
||||
if (data.code === 1000) { |
||||
this.$notify({ |
||||
title: '验证码', |
||||
message: '您正在进行注册，验证码已经发送您', |
||||
type: 'success' |
||||
}); |
||||
this.form.auth_token = data.data.auth_token; |
||||
} else { |
||||
this.$message({ |
||||
message: data.msg, |
||||
type: 'error' |
||||
}); |
||||
} |
||||
} |
||||
}, {"methods": 'POST', 'data': params}) |
||||
}, |
||||
getphonecode() { |
||||
let act = 'up'; |
||||
if (!this.docheck()) { |
||||
return |
||||
} |
||||
if (checkphone(this.form.email)) { |
||||
act = 'sms' |
||||
} |
||||
if (checkEmail(this.form.email)) { |
||||
act = 'email' |
||||
} |
||||
let authcode = this.form.authcode; |
||||
let captcha_flag = authcode.length === this.captcha.length; |
||||
if (this.captcha.captcha_key === '' || !this.captcha.captcha_key) { |
||||
captcha_flag = true |
||||
} |
||||
if (captcha_flag) { |
||||
let picode = { |
||||
"authcode": authcode, |
||||
"captcha_key": this.captcha.captcha_key, |
||||
"icode": this.form.icode, |
||||
}; |
||||
let params = {'act': act, 'target': this.form.email, 'ext': picode}; |
||||
if (this.captcha.geetest) { |
||||
geetest(this, this.form.email, params, (n_params) => { |
||||
this.do_get_auth_token(n_params); |
||||
}) |
||||
} else { |
||||
this.do_get_auth_token(params); |
||||
} |
||||
} else { |
||||
this.$message({ |
||||
message: '图片验证码有误', |
||||
type: 'warning' |
||||
}); |
||||
} |
||||
|
||||
}, |
||||
docheck() { |
||||
let checkp = checkphone(this.form.email); |
||||
let checke = checkEmail(this.form.email); |
||||
|
||||
if (this.allow_ways.sms && this.allow_ways.email) { |
||||
if (!checke && !checkp) { |
||||
this.$message({ |
||||
message: '请输入正确的邮箱地址或手机号码', |
||||
type: 'warning' |
||||
}); |
||||
return 0 |
||||
} |
||||
} else { |
||||
if (this.allow_ways.email) { |
||||
if (!checke) { |
||||
this.$message({ |
||||
message: '请输入正确的邮箱地址', |
||||
type: 'warning' |
||||
}); |
||||
return 0 |
||||
} |
||||
} |
||||
if (this.allow_ways.sms) { |
||||
if (!checkp) { |
||||
this.$message({ |
||||
message: '请输入正确的手机号码', |
||||
type: 'warning' |
||||
}); |
||||
return 0 |
||||
} |
||||
} |
||||
} |
||||
if (this.allow_ways.code && this.form.icode.length === 0) { |
||||
this.$message({ |
||||
message: '请输入邀请码', |
||||
type: 'warning' |
||||
}); |
||||
return 0 |
||||
} |
||||
return 1 |
||||
}, |
||||
do_register(params) { |
||||
registerFun(data => { |
||||
if (data.code === 1000) { |
||||
this.$message({ |
||||
message: '注册成功', |
||||
type: 'success' |
||||
}); |
||||
this.$router.push({name: 'FirLogin'}) |
||||
} else { |
||||
this.$message({ |
||||
message: data.msg, |
||||
type: 'error' |
||||
}); |
||||
this.get_auth_code(); |
||||
} |
||||
}, { |
||||
"methods": "POST", |
||||
"data": params |
||||
}); |
||||
this.register_disable = false; |
||||
}, |
||||
onRegist() { |
||||
let email = this.form.email; |
||||
let password = this.form.password; |
||||
let password2 = this.form.password2; |
||||
if (!this.docheck()) { |
||||
return |
||||
} |
||||
let authcode = this.form.authcode; |
||||
let captcha_flag = authcode.length === this.captcha.length; |
||||
if (this.captcha.captcha_key === '' || !this.captcha.captcha_key) { |
||||
captcha_flag = true |
||||
} |
||||
if (captcha_flag) { |
||||
if (password === password2 && password.length >= 6) { |
||||
let params = { |
||||
"username": email, |
||||
"password": password, |
||||
"password2": password2, |
||||
"auth_token": this.form.auth_token, |
||||
"auth_key": this.form.seicode |
||||
}; |
||||
this.register_disable = true; |
||||
if (this.captcha.geetest) { |
||||
geetest(this, this.form.email, params, (n_params) => { |
||||
this.do_register(n_params); |
||||
}) |
||||
} else { |
||||
this.do_register(params); |
||||
} |
||||
|
||||
} else { |
||||
this.$message({ |
||||
message: '密码不一致或者密码长度小于6', |
||||
type: 'warning' |
||||
}); |
||||
} |
||||
|
||||
} else { |
||||
this.$message({ |
||||
message: '验证码有误', |
||||
type: 'warning' |
||||
}); |
||||
} |
||||
|
||||
|
||||
}, |
||||
onLogin() { |
||||
this.$router.push({name: 'FirLogin'}) |
||||
}, |
||||
} |
||||
, |
||||
created() { |
||||
}, mounted() { |
||||
this.get_auth_code(); |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
.el-container { |
||||
margin: 10px auto; |
||||
width: 1266px; |
||||
|
||||
} |
||||
|
||||
.el-header { |
||||
margin-top: 13%; |
||||
} |
||||
|
||||
.el-form { |
||||
max-width: 360px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.el-form-item .el-button { |
||||
max-width: 360px; |
||||
width: 100%; |
||||
position: relative; |
||||
height: 50px; |
||||
|
||||
} |
||||
|
||||
.el-header { |
||||
text-align: center; |
||||
overflow: hidden; |
||||
margin-bottom: 50px |
||||
} |
||||
|
||||
|
||||
.el-header div span { |
||||
font-size: 24px; |
||||
display: inline-block; |
||||
vertical-align: middle; |
||||
padding: 8px 40px |
||||
} |
||||
|
||||
.el-header div:before, .el-header div:after { |
||||
content: ' '; |
||||
display: inline-block; |
||||
vertical-align: middle; |
||||
width: 50%; |
||||
height: 1px; |
||||
background-color: #babfc3; |
||||
margin: 0 0 0 -50% |
||||
} |
||||
|
||||
.el-header div { |
||||
text-align: center |
||||
} |
||||
|
||||
.el-header div:after { |
||||
margin: 0 -50% 0 0 |
||||
} |
||||
.el-container { |
||||
margin: 10px auto; |
||||
width: 1266px; |
||||
|
||||
} |
||||
|
||||
.el-header { |
||||
margin-top: 13%; |
||||
} |
||||
|
||||
.el-form { |
||||
max-width: 360px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.el-form-item .el-button { |
||||
max-width: 360px; |
||||
width: 100%; |
||||
position: relative; |
||||
height: 50px; |
||||
|
||||
} |
||||
|
||||
.el-header { |
||||
text-align: center; |
||||
overflow: hidden; |
||||
margin-bottom: 50px |
||||
} |
||||
|
||||
|
||||
.el-header div span { |
||||
font-size: 24px; |
||||
display: inline-block; |
||||
vertical-align: middle; |
||||
padding: 8px 40px |
||||
} |
||||
|
||||
.el-header div:before, .el-header div:after { |
||||
content: ' '; |
||||
display: inline-block; |
||||
vertical-align: middle; |
||||
width: 50%; |
||||
height: 1px; |
||||
background-color: #babfc3; |
||||
margin: 0 0 0 -50% |
||||
} |
||||
|
||||
.el-header div { |
||||
text-align: center |
||||
} |
||||
|
||||
.el-header div:after { |
||||
margin: 0 -50% 0 0 |
||||
} |
||||
|
||||
|
||||
</style> |
||||
|
||||
@ -1,277 +1,277 @@ |
||||
<template> |
||||
<el-container> |
||||
<div style="margin: 10px 0 10px 0 ;position:absolute;right:20px;top:auto;"> |
||||
<el-button round icon="el-icon-arrow-left" @click="$router.go(-1)"/> |
||||
<el-button round icon="el-icon-s-home" @click="$router.push({name:'FirIndex'})"/> |
||||
<el-container> |
||||
<div style="margin: 10px 0 10px 0 ;position:absolute;right:20px;top:auto;"> |
||||
<el-button icon="el-icon-arrow-left" round @click="$router.go(-1)"/> |
||||
<el-button icon="el-icon-s-home" round @click="$router.push({name:'FirIndex'})"/> |
||||
|
||||
</div> |
||||
<el-header> |
||||
<div> |
||||
<span>忘记密码</span> |
||||
</div> |
||||
</div> |
||||
<el-header> |
||||
<div> |
||||
<span>忘记密码</span> |
||||
</div> |
||||
|
||||
</el-header> |
||||
<el-main> |
||||
<el-form ref="form" :model="form"> |
||||
<el-form-item> |
||||
<el-input v-model="form.email" prefix-icon="el-icon-user" placeholder="邮箱或手机号" autofocus |
||||
clearable/> |
||||
</el-form-item> |
||||
<el-form-item style="height: 40px" v-if="captcha.captcha_image"> |
||||
<el-row style="height: 40px"> |
||||
<el-col :span="16"> |
||||
<el-input placeholder="请输入验证码" v-model="form.authcode" maxlength="6" |
||||
@keyup.enter.native="onSubmit" clearable/> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<el-image |
||||
style="margin:0 4px;border-radius:4px;cursor:pointer;height: 40px" |
||||
:src="captcha.captcha_image" |
||||
fit="contain" @click="get_auth_code"> |
||||
</el-image> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
</el-header> |
||||
<el-main> |
||||
<el-form ref="form" :model="form"> |
||||
<el-form-item> |
||||
<el-input v-model="form.email" autofocus clearable placeholder="邮箱或手机号" |
||||
prefix-icon="el-icon-user"/> |
||||
</el-form-item> |
||||
<el-form-item v-if="captcha.captcha_image" style="height: 40px"> |
||||
<el-row style="height: 40px"> |
||||
<el-col :span="16"> |
||||
<el-input v-model="form.authcode" clearable maxlength="6" |
||||
placeholder="请输入验证码" @keyup.enter.native="onSubmit"/> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<el-image |
||||
:src="captcha.captcha_image" |
||||
fit="contain" |
||||
style="margin:0 4px;border-radius:4px;cursor:pointer;height: 40px" @click="get_auth_code"> |
||||
</el-image> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
|
||||
<el-form-item> |
||||
<el-row> |
||||
<el-col :span="16"> |
||||
<el-input v-model="form.seicode" prefix-icon="el-icon-mobile" |
||||
placeholder="验证码" clearable/> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<el-button type="info" @click="onGetCode" plain |
||||
style="margin:0 4px;border-radius:4px;cursor:pointer;height: 40px">获取验证码 |
||||
</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-row> |
||||
<el-col :span="16"> |
||||
<el-input v-model="form.seicode" clearable |
||||
placeholder="验证码" prefix-icon="el-icon-mobile"/> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<el-button plain style="margin:0 4px;border-radius:4px;cursor:pointer;height: 40px" type="info" |
||||
@click="onGetCode">获取验证码 |
||||
</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
|
||||
<el-form-item> |
||||
<div id="captcha" ref="captcha"></div> |
||||
</el-form-item> |
||||
<el-form-item style="margin-top: 30px"> |
||||
<el-button type="danger" :disabled="login_disable" @click="onReset">发送重置密码邮件</el-button> |
||||
</el-form-item> |
||||
<el-form-item style="margin-top: 30px"> |
||||
<el-button type="primary" @click="onLogin">我是老用户,要登录</el-button> |
||||
</el-form-item> |
||||
<el-form-item v-if="register_enable" style="margin-top: 30px"> |
||||
<el-button type="primary" @click="onRegister" plain>注册</el-button> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<div id="captcha" ref="captcha"></div> |
||||
</el-form-item> |
||||
<el-form-item style="margin-top: 30px"> |
||||
<el-button :disabled="login_disable" type="danger" @click="onReset">发送重置密码邮件</el-button> |
||||
</el-form-item> |
||||
<el-form-item style="margin-top: 30px"> |
||||
<el-button type="primary" @click="onLogin">我是老用户,要登录</el-button> |
||||
</el-form-item> |
||||
<el-form-item v-if="register_enable" style="margin-top: 30px"> |
||||
<el-button plain type="primary" @click="onRegister">注册</el-button> |
||||
</el-form-item> |
||||
|
||||
</el-form> |
||||
</el-form> |
||||
|
||||
|
||||
</el-main> |
||||
</el-main> |
||||
|
||||
|
||||
</el-container> |
||||
</el-container> |
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
import {loginFun} from "@/restful"; |
||||
import {checkEmail, geetest, checkphone} from "@/utils"; |
||||
import {loginFun} from "@/restful"; |
||||
import {checkEmail, checkphone, geetest} from "@/utils"; |
||||
|
||||
export default { |
||||
name: "FirResetPwd", |
||||
data() { |
||||
return { |
||||
form: { |
||||
email: '', |
||||
password: '', |
||||
authcode: '', |
||||
seicode: '', |
||||
auth_token: '' |
||||
}, |
||||
captcha: {"captcha_image": '', "captcha_key": '', "length": 8}, |
||||
activeName: 'username', |
||||
allow_ways: {}, |
||||
rutitle: '', |
||||
rctitle: '', |
||||
register_enable: false, |
||||
login_disable: false, |
||||
} |
||||
}, |
||||
methods: { |
||||
onGetCode() { |
||||
this.form.auth_token = ''; |
||||
this.form.seicode = ''; |
||||
this.onSubmit(); |
||||
}, |
||||
onReset() { |
||||
if (this.form.auth_token && this.form.seicode && this.form.seicode.length > 3) { |
||||
this.onSubmit() |
||||
} else { |
||||
this.$message.error("输入有误，请检查") |
||||
} |
||||
}, |
||||
is_captcha() { |
||||
let captcha_flag = this.form.authcode.length === this.captcha.length; |
||||
if (this.captcha.captcha_key === '' || !this.captcha.captcha_key) { |
||||
captcha_flag = true |
||||
} |
||||
return captcha_flag |
||||
}, |
||||
onSubmit() { |
||||
let email = this.form.email; |
||||
let authcode = this.form.authcode; |
||||
let captcha_flag = this.form.authcode.length === this.captcha.length; |
||||
if (this.captcha.captcha_key === '' || !this.captcha.captcha_key) { |
||||
captcha_flag = true |
||||
} |
||||
if (captcha_flag) { |
||||
let checke = checkEmail(this.form.email); |
||||
let checkp = checkphone(this.form.email); |
||||
if (checke || checkp) { |
||||
let params = { |
||||
"username": email, |
||||
"authcode": authcode, |
||||
"captcha_key": this.captcha.captcha_key, |
||||
"login_type": 'reset', |
||||
}; |
||||
let seicode = this.form.seicode; |
||||
let auth_token = this.form.auth_token; |
||||
if (seicode && seicode.length > 3) { |
||||
params['seicode'] = seicode |
||||
} |
||||
if (auth_token && auth_token.length > 3) { |
||||
params['auth_token'] = auth_token |
||||
} |
||||
this.login_disable = true; |
||||
if (this.captcha.geetest) { |
||||
geetest(this, this.form.email, params, (n_params) => { |
||||
this.do_login(n_params); |
||||
}) |
||||
} else { |
||||
this.do_login(params) |
||||
} |
||||
} else { |
||||
this.$message({ |
||||
message: '邮箱或手机号输入有误', |
||||
type: 'error' |
||||
}); |
||||
} |
||||
export default { |
||||
name: "FirResetPwd", |
||||
data() { |
||||
return { |
||||
form: { |
||||
email: '', |
||||
password: '', |
||||
authcode: '', |
||||
seicode: '', |
||||
auth_token: '' |
||||
}, |
||||
captcha: {"captcha_image": '', "captcha_key": '', "length": 8}, |
||||
activeName: 'username', |
||||
allow_ways: {}, |
||||
rutitle: '', |
||||
rctitle: '', |
||||
register_enable: false, |
||||
login_disable: false, |
||||
} |
||||
}, |
||||
methods: { |
||||
onGetCode() { |
||||
this.form.auth_token = ''; |
||||
this.form.seicode = ''; |
||||
this.onSubmit(); |
||||
}, |
||||
onReset() { |
||||
if (this.form.auth_token && this.form.seicode && this.form.seicode.length > 3) { |
||||
this.onSubmit() |
||||
} else { |
||||
this.$message.error("输入有误，请检查") |
||||
} |
||||
}, |
||||
is_captcha() { |
||||
let captcha_flag = this.form.authcode.length === this.captcha.length; |
||||
if (this.captcha.captcha_key === '' || !this.captcha.captcha_key) { |
||||
captcha_flag = true |
||||
} |
||||
return captcha_flag |
||||
}, |
||||
onSubmit() { |
||||
let email = this.form.email; |
||||
let authcode = this.form.authcode; |
||||
let captcha_flag = this.form.authcode.length === this.captcha.length; |
||||
if (this.captcha.captcha_key === '' || !this.captcha.captcha_key) { |
||||
captcha_flag = true |
||||
} |
||||
if (captcha_flag) { |
||||
let checke = checkEmail(this.form.email); |
||||
let checkp = checkphone(this.form.email); |
||||
if (checke || checkp) { |
||||
let params = { |
||||
"username": email, |
||||
"authcode": authcode, |
||||
"captcha_key": this.captcha.captcha_key, |
||||
"login_type": 'reset', |
||||
}; |
||||
let seicode = this.form.seicode; |
||||
let auth_token = this.form.auth_token; |
||||
if (seicode && seicode.length > 3) { |
||||
params['seicode'] = seicode |
||||
} |
||||
if (auth_token && auth_token.length > 3) { |
||||
params['auth_token'] = auth_token |
||||
} |
||||
this.login_disable = true; |
||||
if (this.captcha.geetest) { |
||||
geetest(this, this.form.email, params, (n_params) => { |
||||
this.do_login(n_params); |
||||
}) |
||||
} else { |
||||
this.do_login(params) |
||||
} |
||||
} else { |
||||
this.$message({ |
||||
message: '邮箱或手机号输入有误', |
||||
type: 'error' |
||||
}); |
||||
} |
||||
|
||||
} else { |
||||
this.$message({ |
||||
message: '验证码有误', |
||||
type: 'warning' |
||||
}); |
||||
} |
||||
}, |
||||
do_login(params) { |
||||
loginFun(data => { |
||||
if (data.code === 1000) { |
||||
let msg = '密码重置成功，请登录邮箱或者手机短信查看'; |
||||
if (data.data && data.data.auth_token) { |
||||
this.form.auth_token = data.data.auth_token; |
||||
msg = "验证码发送成功，请登录邮箱或者手机短信查看" |
||||
} |
||||
this.$message({ |
||||
message: msg, |
||||
type: 'success' |
||||
}); |
||||
} else { |
||||
this.$message({ |
||||
message: '验证码有误', |
||||
type: 'warning' |
||||
}); |
||||
} |
||||
}, |
||||
do_login(params) { |
||||
loginFun(data => { |
||||
if (data.code === 1000) { |
||||
let msg = '密码重置成功，请登录邮箱或者手机短信查看'; |
||||
if (data.data && data.data.auth_token) { |
||||
this.form.auth_token = data.data.auth_token; |
||||
msg = "验证码发送成功，请登录邮箱或者手机短信查看" |
||||
} |
||||
this.$message({ |
||||
message: msg, |
||||
type: 'success' |
||||
}); |
||||
|
||||
} else { |
||||
this.$message({ |
||||
message: data.msg, |
||||
type: 'error' |
||||
}); |
||||
this.get_auth_code(); |
||||
} |
||||
this.login_disable = false; |
||||
}, { |
||||
"methods": "POST", |
||||
"data": params |
||||
}); |
||||
}, |
||||
onRegister() { |
||||
this.$router.push({name: 'FirRegist'}) |
||||
}, |
||||
onLogin() { |
||||
this.$router.push({name: 'FirLogin'}) |
||||
}, |
||||
get_auth_code() { |
||||
loginFun(data => { |
||||
if (data.code === 1000) { |
||||
this.captcha = data.data; |
||||
this.register_enable = data.data.register_enable; |
||||
this.form.authcode = ''; |
||||
} else { |
||||
this.$message({ |
||||
message: data.msg, |
||||
type: 'error' |
||||
}); |
||||
} |
||||
}, { |
||||
"methods": "GET", |
||||
"data": {} |
||||
}); |
||||
}, |
||||
}, |
||||
mounted() { |
||||
this.get_auth_code(); |
||||
}, created() { |
||||
} else { |
||||
this.$message({ |
||||
message: data.msg, |
||||
type: 'error' |
||||
}); |
||||
this.get_auth_code(); |
||||
} |
||||
} |
||||
this.login_disable = false; |
||||
}, { |
||||
"methods": "POST", |
||||
"data": params |
||||
}); |
||||
}, |
||||
onRegister() { |
||||
this.$router.push({name: 'FirRegist'}) |
||||
}, |
||||
onLogin() { |
||||
this.$router.push({name: 'FirLogin'}) |
||||
}, |
||||
get_auth_code() { |
||||
loginFun(data => { |
||||
if (data.code === 1000) { |
||||
this.captcha = data.data; |
||||
this.register_enable = data.data.register_enable; |
||||
this.form.authcode = ''; |
||||
} else { |
||||
this.$message({ |
||||
message: data.msg, |
||||
type: 'error' |
||||
}); |
||||
} |
||||
}, { |
||||
"methods": "GET", |
||||
"data": {} |
||||
}); |
||||
}, |
||||
}, |
||||
mounted() { |
||||
this.get_auth_code(); |
||||
}, created() { |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
.el-container { |
||||
margin: 10px auto; |
||||
width: 1266px; |
||||
} |
||||
.el-container { |
||||
margin: 10px auto; |
||||
width: 1266px; |
||||
} |
||||
|
||||
.el-header { |
||||
margin-top: 13%; |
||||
} |
||||
.el-header { |
||||
margin-top: 13%; |
||||
} |
||||
|
||||
.el-form { |
||||
max-width: 360px; |
||||
margin: 0 auto; |
||||
} |
||||
.el-form { |
||||
max-width: 360px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.el-form-item .el-button { |
||||
max-width: 360px; |
||||
/*padding: 16px 20px;*/ |
||||
width: 100%; |
||||
position: relative; |
||||
height: 50px; |
||||
.el-form-item .el-button { |
||||
max-width: 360px; |
||||
/*padding: 16px 20px;*/ |
||||
width: 100%; |
||||
position: relative; |
||||
height: 50px; |
||||
|
||||
} |
||||
} |
||||
|
||||
.el-header { |
||||
text-align: center; |
||||
overflow: hidden; |
||||
margin-bottom: 50px |
||||
} |
||||
.el-header { |
||||
text-align: center; |
||||
overflow: hidden; |
||||
margin-bottom: 50px |
||||
} |
||||
|
||||
|
||||
.el-header div span { |
||||
font-size: 24px; |
||||
display: inline-block; |
||||
vertical-align: middle; |
||||
padding: 8px 40px |
||||
} |
||||
.el-header div span { |
||||
font-size: 24px; |
||||
display: inline-block; |
||||
vertical-align: middle; |
||||
padding: 8px 40px |
||||
} |
||||
|
||||
.el-header div:before, .el-header div:after { |
||||
content: ' '; |
||||
display: inline-block; |
||||
vertical-align: middle; |
||||
width: 50%; |
||||
height: 1px; |
||||
background-color: #babfc3; |
||||
margin: 0 0 0 -50% |
||||
} |
||||
.el-header div:before, .el-header div:after { |
||||
content: ' '; |
||||
display: inline-block; |
||||
vertical-align: middle; |
||||
width: 50%; |
||||
height: 1px; |
||||
background-color: #babfc3; |
||||
margin: 0 0 0 -50% |
||||
} |
||||
|
||||
.el-header div { |
||||
text-align: center |
||||
} |
||||
.el-header div { |
||||
text-align: center |
||||
} |
||||
|
||||
.el-header div:after { |
||||
margin: 0 -50% 0 0 |
||||
} |
||||
.el-header div:after { |
||||
margin: 0 -50% 0 0 |
||||
} |
||||
</style> |
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,406 +1,406 @@ |
||||
<template> |
||||
<div class="main"> |
||||
<div class="page-app app-info"> |
||||
<div class="banner"> |
||||
<div class="middle-wrapper"> |
||||
<div @click="defaulttimeline"> |
||||
<img ref="icon_url" :src="icon_url" class="appicon" style="width:100px; height:100px" alt=""> |
||||
</div> |
||||
<div class="badges"> |
||||
<el-tooltip content="复制到剪切板" placement="top"> |
||||
<span class="bundleid short" |
||||
v-clipboard:copy="short_full_url" |
||||
<div class="main"> |
||||
<div class="page-app app-info"> |
||||
<div class="banner"> |
||||
<div class="middle-wrapper"> |
||||
<div @click="defaulttimeline"> |
||||
<img ref="icon_url" :src="icon_url" alt="" class="appicon" style="width:100px; height:100px"> |
||||
</div> |
||||
<div class="badges"> |
||||
<el-tooltip content="复制到剪切板" placement="top"> |
||||
<span v-clipboard:copy="short_full_url" |
||||
v-clipboard:success="copy_success" |
||||
> {{short_full_url }}</span> |
||||
</el-tooltip> |
||||
<span>{{ master_release.release_type |getapptype }}</span> |
||||
<el-tooltip content="下载量" placement="top"> |
||||
<span><i class="el-icon-cloudy"/><b class="short">{{ appinfos.count_hits }}</b></span> |
||||
</el-tooltip> |
||||
<span class="bundleid ng-binding">BundleID<b class="ng-binding"> |
||||
class="bundleid short" |
||||
> {{ short_full_url }}</span> |
||||
</el-tooltip> |
||||
<span>{{ master_release.release_type |getapptype }}</span> |
||||
<el-tooltip content="下载量" placement="top"> |
||||
<span><i class="el-icon-cloudy"/><b class="short">{{ appinfos.count_hits }}</b></span> |
||||
</el-tooltip> |
||||
<span class="bundleid ng-binding">BundleID<b class="ng-binding"> |
||||
<el-tooltip content="复制到剪切板" placement="top"> |
||||
<span class="bundleid short" |
||||
v-clipboard:copy="appinfos.bundle_id" |
||||
<span v-clipboard:copy="appinfos.bundle_id" |
||||
v-clipboard:success="copy_success" |
||||
> {{appinfos.bundle_id }}</span> |
||||
class="bundleid short" |
||||
> {{ appinfos.bundle_id }}</span> |
||||
</el-tooltip> |
||||
</b></span> |
||||
<span class="version ng-scope">{{ master_release.minimum_os_version }} 或者高版本</span> |
||||
<span class="short ng-scope" v-if="appinfos.issupersign">超级签</span> |
||||
|
||||
<el-popover |
||||
v-if="$store.state.userinfo&&$store.state.userinfo.role >1 &&$store.state.userinfo.qrcode_domain_name.length>3 " |
||||
placement="right" |
||||
width="288"> |
||||
<div style="text-align: center; margin: 0"> |
||||
<vue-qr :margin="qrinfo.margin" |
||||
:logoSrc="icon_url" :logoScale="qrinfo.logoScale" |
||||
:logoCornerRadius="qrinfo.logoCornerRadius" |
||||
:correctLevel="qrinfo.correctLevel" |
||||
:text="short_url()" :size="266" |
||||
ref="qr"> |
||||
</vue-qr> |
||||
<el-button type="primary" size="small" @click="save_qr()">保存本地</el-button> |
||||
</div> |
||||
|
||||
<span class="short ng-scope" slot="reference">下载码</span> |
||||
</el-popover> |
||||
|
||||
|
||||
</div> |
||||
<div class="actions"> |
||||
<el-button v-if="appinfos.status!==1" type="danger">该应用被封禁,请联系管理员</el-button> |
||||
<el-button v-else @click="appDownload" class="download" icon="el-icon-view"> |
||||
预览 |
||||
</el-button> |
||||
</div> |
||||
|
||||
<div class="tabs-container"> |
||||
<el-row :gutter="1"> |
||||
<el-col :span="3"> |
||||
<a class="" ref="baseinfo" @click="baseinfo"><i class="el-icon-document"/>基本信息</a> |
||||
</el-col> |
||||
|
||||
<el-col :span="3"> |
||||
<a class="" ref="security" @click="security"><i class="el-icon-set-up"/>应用管理</a> |
||||
</el-col> |
||||
|
||||
<el-col :span="3"> |
||||
<a class="" ref="combo" @click="combo"><i class="el-icon-copy-document" |
||||
style="transform:rotateX(180deg);"/>应用合并</a> |
||||
</el-col> |
||||
|
||||
<el-col :span="3" |
||||
v-if="appinfos.type===1 || appinfos.issupersign "> |
||||
<a class="" ref="supersign" @click="supersign"><i |
||||
class="el-icon-ship"/>超级签名</a> |
||||
</el-col> |
||||
|
||||
<el-col :span="3" |
||||
v-if="(appinfos.type===1 && master_release.release_type ===1) || appinfos.issupersign "> |
||||
<a class="" ref="devices" @click="devices"><i class="el-icon-mobile-phone"/>设备列表</a> |
||||
</el-col> |
||||
|
||||
</el-row> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div> |
||||
<div class="block" style="margin-top: -46px;color: #d5f9f9"> |
||||
<el-slider |
||||
v-model="$store.state.appInfoIndex[0]" |
||||
range |
||||
:show-tooltip="false" |
||||
:max="100"> |
||||
</el-slider> |
||||
</div> |
||||
<el-container style="padding-top: 20px;max-width: 96%"> |
||||
<router-view/> |
||||
</el-container> |
||||
</div> |
||||
<span class="version ng-scope">{{ master_release.minimum_os_version }} 或者高版本</span> |
||||
<span v-if="appinfos.issupersign" class="short ng-scope">超级签</span> |
||||
|
||||
<el-popover |
||||
v-if="$store.state.userinfo&&$store.state.userinfo.role >1 &&$store.state.userinfo.qrcode_domain_name.length>3 " |
||||
placement="right" |
||||
width="288"> |
||||
<div style="text-align: center; margin: 0"> |
||||
<vue-qr ref="qr" |
||||
:correctLevel="qrinfo.correctLevel" :logoCornerRadius="qrinfo.logoCornerRadius" |
||||
:logoScale="qrinfo.logoScale" |
||||
:logoSrc="icon_url" |
||||
:margin="qrinfo.margin" :size="266" |
||||
:text="short_url()"> |
||||
</vue-qr> |
||||
<el-button size="small" type="primary" @click="save_qr()">保存本地</el-button> |
||||
</div> |
||||
|
||||
<span slot="reference" class="short ng-scope">下载码</span> |
||||
</el-popover> |
||||
|
||||
|
||||
</div> |
||||
<div class="actions"> |
||||
<el-button v-if="appinfos.status!==1" type="danger">该应用被封禁,请联系管理员</el-button> |
||||
<el-button v-else class="download" icon="el-icon-view" @click="appDownload"> |
||||
预览 |
||||
</el-button> |
||||
</div> |
||||
|
||||
<div class="tabs-container"> |
||||
<el-row :gutter="1"> |
||||
<el-col :span="3"> |
||||
<a ref="baseinfo" class="" @click="baseinfo"><i class="el-icon-document"/>基本信息</a> |
||||
</el-col> |
||||
|
||||
<el-col :span="3"> |
||||
<a ref="security" class="" @click="security"><i class="el-icon-set-up"/>应用管理</a> |
||||
</el-col> |
||||
|
||||
<el-col :span="3"> |
||||
<a ref="combo" class="" @click="combo"><i class="el-icon-copy-document" |
||||
style="transform:rotateX(180deg);"/>应用合并</a> |
||||
</el-col> |
||||
|
||||
<el-col v-if="appinfos.type===1 || appinfos.issupersign " |
||||
:span="3"> |
||||
<a ref="supersign" class="" @click="supersign"><i |
||||
class="el-icon-ship"/>超级签名</a> |
||||
</el-col> |
||||
|
||||
<el-col v-if="(appinfos.type===1 && master_release.release_type ===1) || appinfos.issupersign " |
||||
:span="3"> |
||||
<a ref="devices" class="" @click="devices"><i class="el-icon-mobile-phone"/>设备列表</a> |
||||
</el-col> |
||||
|
||||
</el-row> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div> |
||||
<div class="block" style="margin-top: -46px;color: #d5f9f9"> |
||||
<el-slider |
||||
v-model="$store.state.appInfoIndex[0]" |
||||
:max="100" |
||||
:show-tooltip="false" |
||||
range> |
||||
</el-slider> |
||||
</div> |
||||
<el-container style="padding-top: 20px;max-width: 96%"> |
||||
<router-view/> |
||||
</el-container> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
import {apputils} from "@/restful"; |
||||
import VueQr from 'vue-qr'; |
||||
import {getUserInfoFun} from "@/utils"; |
||||
|
||||
export default { |
||||
name: "FirAppInfosBase", |
||||
components: { |
||||
VueQr |
||||
}, |
||||
data() { |
||||
return { |
||||
qrinfo: { |
||||
logoScale: 0.3, |
||||
logoCornerRadius: 12, |
||||
correctLevel: 3, |
||||
margin: 20 |
||||
}, |
||||
icon_url: "", |
||||
appinfos: {status: 1}, |
||||
master_release: {}, |
||||
allapp: [], |
||||
activity: { |
||||
editing: false |
||||
}, |
||||
short_full_url: '', |
||||
} |
||||
}, |
||||
methods: { |
||||
copy_success() { |
||||
this.$message.success('复制剪切板成功'); |
||||
}, |
||||
save_qr() { |
||||
let dtype = "I"; |
||||
if (this.master_release.release_type === 0) { |
||||
dtype = "A"; |
||||
} |
||||
let a = document.createElement('a'); |
||||
// 下载图名字 |
||||
a.download = this.appinfos.name + '_' + dtype + "_下载码"; |
||||
//url |
||||
a.href = this.$refs.qr.$el.src; |
||||
//合成函数，执行下载 |
||||
a.dispatchEvent(new MouseEvent('click')) |
||||
}, |
||||
short_url() { |
||||
const userinfo = this.$store.state.userinfo; |
||||
if (userinfo && userinfo.role > 1 && userinfo.qrcode_domain_name.length > 3) { |
||||
return 'http://' + userinfo.qrcode_domain_name + '/' + this.appinfos.short; |
||||
} |
||||
}, |
||||
setfunactive(item, index) { |
||||
for (let key in this.$refs) { |
||||
if (key === "qr") continue; |
||||
if (key === item) { |
||||
if (this.$refs[key]) { |
||||
this.$refs[key].classList.add('active'); |
||||
this.$store.dispatch('doappInfoIndex', [[index, index], [index, index]]); |
||||
} |
||||
} else { |
||||
if (this.$refs[key]) { |
||||
this.$refs[key].classList.remove('active'); |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
appDownload() { |
||||
let routeData = this.$router.resolve({name: 'FirDownload', params: {short: this.appinfos.short}}); |
||||
// window.open(routeData.href, '_blank'); |
||||
let p_url = routeData.href; |
||||
// let p_url = location.origin + '/' + this.appinfos.short; |
||||
if (this.appinfos.preview_url && this.appinfos.preview_url.length > 6) { |
||||
p_url = this.appinfos.preview_url + p_url |
||||
} |
||||
window.open(p_url, '_blank', ''); |
||||
}, |
||||
defaulttimeline() { |
||||
this.setfunactive('timeline', 5); |
||||
this.$router.push({name: 'FirAppInfostimeline'}); |
||||
}, |
||||
baseinfo() { |
||||
this.setfunactive('baseinfo', 18); |
||||
this.$router.push({name: 'FirAppInfosbaseinfo'}); |
||||
}, |
||||
security() { |
||||
this.setfunactive('security', 31); |
||||
this.$router.push({name: 'FirAppInfossecurity'}); |
||||
|
||||
}, |
||||
combo() { |
||||
this.setfunactive('combo', 44); |
||||
this.$router.push({name: 'FirAppInfoscombo'}); |
||||
}, |
||||
devices() { |
||||
this.setfunactive('devices', 70); |
||||
this.$router.push({name: 'FirAppInfosdevices'}); |
||||
}, |
||||
supersign() { |
||||
this.setfunactive('supersign', 57); |
||||
this.$router.push({name: 'FirAppInfossupersign'}); |
||||
}, |
||||
set_icon_url() { |
||||
this.icon_url = this.$store.state.currentapp.master_release.icon_url; |
||||
}, |
||||
}, created() { |
||||
|
||||
}, filters: { |
||||
getapptype: function (type) { |
||||
let ftype = ''; |
||||
if (type === 0) { |
||||
ftype = 'Android' |
||||
} else { |
||||
ftype = 'iOS' |
||||
} |
||||
return ftype |
||||
}, |
||||
}, |
||||
computed: {}, mounted() { |
||||
getUserInfoFun(this); |
||||
apputils(data => { |
||||
if (data.code === 1000) { |
||||
this.appinfos = data.data; |
||||
this.master_release = data.data.master_release; |
||||
this.appinfos["icon_url"] = this.master_release.icon_url; |
||||
this.$store.dispatch('doucurrentapp', this.appinfos); |
||||
this.short_full_url = this.appinfos.preview_url + "/" + this.appinfos.short; |
||||
} else if (data.code === 1003) { |
||||
this.$router.push({name: 'FirApps'}); |
||||
} else { |
||||
// eslint-disable-next-line no-console |
||||
console.log("Error"); |
||||
} |
||||
}, { |
||||
"methods": "GET", |
||||
"app_id": this.$route.params.id |
||||
}); |
||||
if (this.$store.state.currentapp.master_release) { |
||||
this.set_icon_url() |
||||
} |
||||
}, watch: { |
||||
'$store.state.currentapp.master_release.icon_url': function () { |
||||
this.set_icon_url() |
||||
}, |
||||
'$store.state.currentapp': function () { |
||||
this.appinfos = this.$store.state.currentapp; |
||||
}, |
||||
}, destroyed() { |
||||
this.$store.dispatch('doucurrentapp', {}); |
||||
import {apputils} from "@/restful"; |
||||
import VueQr from 'vue-qr'; |
||||
import {getUserInfoFun} from "@/utils"; |
||||
|
||||
export default { |
||||
name: "FirAppInfosBase", |
||||
components: { |
||||
VueQr |
||||
}, |
||||
data() { |
||||
return { |
||||
qrinfo: { |
||||
logoScale: 0.3, |
||||
logoCornerRadius: 12, |
||||
correctLevel: 3, |
||||
margin: 20 |
||||
}, |
||||
icon_url: "", |
||||
appinfos: {status: 1}, |
||||
master_release: {}, |
||||
allapp: [], |
||||
activity: { |
||||
editing: false |
||||
}, |
||||
short_full_url: '', |
||||
} |
||||
}, |
||||
methods: { |
||||
copy_success() { |
||||
this.$message.success('复制剪切板成功'); |
||||
}, |
||||
save_qr() { |
||||
let dtype = "I"; |
||||
if (this.master_release.release_type === 0) { |
||||
dtype = "A"; |
||||
} |
||||
let a = document.createElement('a'); |
||||
// 下载图名字 |
||||
a.download = this.appinfos.name + '_' + dtype + "_下载码"; |
||||
//url |
||||
a.href = this.$refs.qr.$el.src; |
||||
//合成函数，执行下载 |
||||
a.dispatchEvent(new MouseEvent('click')) |
||||
}, |
||||
short_url() { |
||||
const userinfo = this.$store.state.userinfo; |
||||
if (userinfo && userinfo.role > 1 && userinfo.qrcode_domain_name.length > 3) { |
||||
return 'http://' + userinfo.qrcode_domain_name + '/' + this.appinfos.short; |
||||
} |
||||
}, |
||||
setfunactive(item, index) { |
||||
for (let key in this.$refs) { |
||||
if (key === "qr") continue; |
||||
if (key === item) { |
||||
if (this.$refs[key]) { |
||||
this.$refs[key].classList.add('active'); |
||||
this.$store.dispatch('doappInfoIndex', [[index, index], [index, index]]); |
||||
} |
||||
} else { |
||||
if (this.$refs[key]) { |
||||
this.$refs[key].classList.remove('active'); |
||||
} |
||||
} |
||||
|
||||
} |
||||
}, |
||||
appDownload() { |
||||
let routeData = this.$router.resolve({name: 'FirDownload', params: {short: this.appinfos.short}}); |
||||
// window.open(routeData.href, '_blank'); |
||||
let p_url = routeData.href; |
||||
// let p_url = location.origin + '/' + this.appinfos.short; |
||||
if (this.appinfos.preview_url && this.appinfos.preview_url.length > 6) { |
||||
p_url = this.appinfos.preview_url + p_url |
||||
} |
||||
window.open(p_url, '_blank', ''); |
||||
}, |
||||
defaulttimeline() { |
||||
this.setfunactive('timeline', 5); |
||||
this.$router.push({name: 'FirAppInfostimeline'}); |
||||
}, |
||||
baseinfo() { |
||||
this.setfunactive('baseinfo', 18); |
||||
this.$router.push({name: 'FirAppInfosbaseinfo'}); |
||||
}, |
||||
security() { |
||||
this.setfunactive('security', 31); |
||||
this.$router.push({name: 'FirAppInfossecurity'}); |
||||
|
||||
}, |
||||
combo() { |
||||
this.setfunactive('combo', 44); |
||||
this.$router.push({name: 'FirAppInfoscombo'}); |
||||
}, |
||||
devices() { |
||||
this.setfunactive('devices', 70); |
||||
this.$router.push({name: 'FirAppInfosdevices'}); |
||||
}, |
||||
supersign() { |
||||
this.setfunactive('supersign', 57); |
||||
this.$router.push({name: 'FirAppInfossupersign'}); |
||||
}, |
||||
set_icon_url() { |
||||
this.icon_url = this.$store.state.currentapp.master_release.icon_url; |
||||
}, |
||||
}, created() { |
||||
|
||||
}, filters: { |
||||
getapptype: function (type) { |
||||
let ftype = ''; |
||||
if (type === 0) { |
||||
ftype = 'Android' |
||||
} else { |
||||
ftype = 'iOS' |
||||
} |
||||
return ftype |
||||
}, |
||||
}, |
||||
computed: {}, mounted() { |
||||
getUserInfoFun(this); |
||||
apputils(data => { |
||||
if (data.code === 1000) { |
||||
this.appinfos = data.data; |
||||
this.master_release = data.data.master_release; |
||||
this.appinfos["icon_url"] = this.master_release.icon_url; |
||||
this.$store.dispatch('doucurrentapp', this.appinfos); |
||||
this.short_full_url = this.appinfos.preview_url + "/" + this.appinfos.short; |
||||
} else if (data.code === 1003) { |
||||
this.$router.push({name: 'FirApps'}); |
||||
} else { |
||||
// eslint-disable-next-line no-console |
||||
console.log("Error"); |
||||
} |
||||
}, { |
||||
"methods": "GET", |
||||
"app_id": this.$route.params.id |
||||
}); |
||||
if (this.$store.state.currentapp.master_release) { |
||||
this.set_icon_url() |
||||
} |
||||
}, watch: { |
||||
'$store.state.currentapp.master_release.icon_url': function () { |
||||
this.set_icon_url() |
||||
}, |
||||
'$store.state.currentapp': function () { |
||||
this.appinfos = this.$store.state.currentapp; |
||||
}, |
||||
}, destroyed() { |
||||
this.$store.dispatch('doucurrentapp', {}); |
||||
} |
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.main { |
||||
margin: 40px auto 100px; |
||||
position: relative; |
||||
padding-bottom: 1px; |
||||
color: #9b9b9b; |
||||
-webkit-font-smoothing: antialiased; |
||||
border-radius: 1%; |
||||
} |
||||
|
||||
.appicon { |
||||
overflow: hidden; |
||||
margin-left: 10px; |
||||
border-radius: 17.544%; |
||||
} |
||||
|
||||
.page-app { |
||||
padding-bottom: 0; |
||||
width: 1166px; |
||||
margin: 10px auto 100px; |
||||
} |
||||
|
||||
.page-app .banner { |
||||
padding-top: 60px; |
||||
padding-bottom: 40px; |
||||
border-bottom: 1px solid rgba(208, 208, 208, .5); |
||||
background-color: #ffffff; |
||||
border-radius: 10px; |
||||
} |
||||
|
||||
.page-app .banner .actions { |
||||
position: absolute; |
||||
right: 0; |
||||
top: 0; |
||||
} |
||||
|
||||
.page-app .banner .actions .download { |
||||
display: block; |
||||
min-width: 150px; |
||||
padding: 10px 20px; |
||||
border-radius: 5px; |
||||
font-size: 14px; |
||||
margin: 0 12px 12px 12px |
||||
} |
||||
|
||||
|
||||
.page-app .banner .actions .download { |
||||
text-align: center; |
||||
text-decoration: none; |
||||
color: #3ab2a7; |
||||
border: 1px solid; |
||||
background-color: transparent |
||||
} |
||||
|
||||
|
||||
.page-app .banner .middle-wrapper { |
||||
position: relative |
||||
} |
||||
|
||||
|
||||
.page-app .badges { |
||||
margin-left: 160px; |
||||
font-size: 12px; |
||||
line-height: initial; |
||||
position: relative; |
||||
margin-top: -100px; |
||||
} |
||||
|
||||
.page-app .badges > span { |
||||
position: relative; |
||||
display: inline-block; |
||||
margin-right: 8px; |
||||
padding: 4px 8px; |
||||
border: 1px solid; |
||||
border-radius: 5px |
||||
} |
||||
|
||||
|
||||
.page-app .badges .short { |
||||
color: #6f6ef8 |
||||
} |
||||
|
||||
.page-app .badges .short:hover { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.page-app .badges b { |
||||
display: inline-block; |
||||
padding-left: 12px; |
||||
height: 100%; |
||||
font-weight: 400 |
||||
} |
||||
|
||||
.page-app .badges b:before { |
||||
position: absolute; |
||||
top: 0; |
||||
width: 0; |
||||
height: 100%; |
||||
border-left: 1px solid; |
||||
content: ' '; |
||||
margin-left: -6px |
||||
} |
||||
|
||||
.page-app .tabs-container { |
||||
margin-top: 40px; |
||||
margin-left: 160px |
||||
} |
||||
|
||||
.page-app .tabs-container .el-row { |
||||
margin: 10px auto; |
||||
} |
||||
|
||||
.page-app .tabs-container .el-row .el-col { |
||||
margin-right: 30px; |
||||
border-left: 1px solid; |
||||
} |
||||
|
||||
.page-app .tabs-container .el-row .el-col a { |
||||
display: block; |
||||
padding-left: 15px; |
||||
color: #599b1a; |
||||
text-decoration: none; |
||||
-webkit-transition: all .5s; |
||||
transition: all .5s |
||||
} |
||||
|
||||
.page-app .tabs-container .el-row .el-col a > i { |
||||
display: block; |
||||
margin-bottom: 14px; |
||||
height: 22px; |
||||
font-size: 22px |
||||
} |
||||
|
||||
.page-app .tabs-container .el-row .el-col a.active { |
||||
color: #4a4a4a |
||||
} |
||||
|
||||
.page-app .tabs-container .el-row .el-col:nth-child(6) { |
||||
display: none |
||||
} |
||||
|
||||
.page-app .has-devices .tabs-container .el-row .el-col:nth-child(6) { |
||||
display: inline-block |
||||
} |
||||
.main { |
||||
margin: 40px auto 100px; |
||||
position: relative; |
||||
padding-bottom: 1px; |
||||
color: #9b9b9b; |
||||
-webkit-font-smoothing: antialiased; |
||||
border-radius: 1%; |
||||
} |
||||
|
||||
.appicon { |
||||
overflow: hidden; |
||||
margin-left: 10px; |
||||
border-radius: 17.544%; |
||||
} |
||||
|
||||
.page-app { |
||||
padding-bottom: 0; |
||||
width: 1166px; |
||||
margin: 10px auto 100px; |
||||
} |
||||
|
||||
.page-app .banner { |
||||
padding-top: 60px; |
||||
padding-bottom: 40px; |
||||
border-bottom: 1px solid rgba(208, 208, 208, .5); |
||||
background-color: #ffffff; |
||||
border-radius: 10px; |
||||
} |
||||
|
||||
.page-app .banner .actions { |
||||
position: absolute; |
||||
right: 0; |
||||
top: 0; |
||||
} |
||||
|
||||
.page-app .banner .actions .download { |
||||
display: block; |
||||
min-width: 150px; |
||||
padding: 10px 20px; |
||||
border-radius: 5px; |
||||
font-size: 14px; |
||||
margin: 0 12px 12px 12px |
||||
} |
||||
|
||||
|
||||
.page-app .banner .actions .download { |
||||
text-align: center; |
||||
text-decoration: none; |
||||
color: #3ab2a7; |
||||
border: 1px solid; |
||||
background-color: transparent |
||||
} |
||||
|
||||
|
||||
.page-app .banner .middle-wrapper { |
||||
position: relative |
||||
} |
||||
|
||||
|
||||
.page-app .badges { |
||||
margin-left: 160px; |
||||
font-size: 12px; |
||||
line-height: initial; |
||||
position: relative; |
||||
margin-top: -100px; |
||||
} |
||||
|
||||
.page-app .badges > span { |
||||
position: relative; |
||||
display: inline-block; |
||||
margin-right: 8px; |
||||
padding: 4px 8px; |
||||
border: 1px solid; |
||||
border-radius: 5px |
||||
} |
||||
|
||||
|
||||
.page-app .badges .short { |
||||
color: #6f6ef8 |
||||
} |
||||
|
||||
.page-app .badges .short:hover { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.page-app .badges b { |
||||
display: inline-block; |
||||
padding-left: 12px; |
||||
height: 100%; |
||||
font-weight: 400 |
||||
} |
||||
|
||||
.page-app .badges b:before { |
||||
position: absolute; |
||||
top: 0; |
||||
width: 0; |
||||
height: 100%; |
||||
border-left: 1px solid; |
||||
content: ' '; |
||||
margin-left: -6px |
||||
} |
||||
|
||||
.page-app .tabs-container { |
||||
margin-top: 40px; |
||||
margin-left: 160px |
||||
} |
||||
|
||||
.page-app .tabs-container .el-row { |
||||
margin: 10px auto; |
||||
} |
||||
|
||||
.page-app .tabs-container .el-row .el-col { |
||||
margin-right: 30px; |
||||
border-left: 1px solid; |
||||
} |
||||
|
||||
.page-app .tabs-container .el-row .el-col a { |
||||
display: block; |
||||
padding-left: 15px; |
||||
color: #599b1a; |
||||
text-decoration: none; |
||||
-webkit-transition: all .5s; |
||||
transition: all .5s |
||||
} |
||||
|
||||
.page-app .tabs-container .el-row .el-col a > i { |
||||
display: block; |
||||
margin-bottom: 14px; |
||||
height: 22px; |
||||
font-size: 22px |
||||
} |
||||
|
||||
.page-app .tabs-container .el-row .el-col a.active { |
||||
color: #4a4a4a |
||||
} |
||||
|
||||
.page-app .tabs-container .el-row .el-col:nth-child(6) { |
||||
display: none |
||||
} |
||||
|
||||
.page-app .has-devices .tabs-container .el-row .el-col:nth-child(6) { |
||||
display: inline-block |
||||
} |
||||
|
||||
|
||||
</style> |
||||
|
||||
@ -1,293 +1,293 @@ |
||||
<template> |
||||
<div style="margin-top: 20px;width: 100%;margin-left: 8%"> |
||||
<el-form ref="form" label-width="80px"> |
||||
<el-form-item label="应用ID" style="width: 56%"> |
||||
<el-row> |
||||
<el-col :span="19"> |
||||
<el-input v-model="currentapp.app_id" :disabled="true"/> |
||||
</el-col> |
||||
<el-col :span="4"> |
||||
<el-button type="danger" plain @click="delApp" |
||||
style="margin:0 8px;border-radius:4px;cursor:pointer;height: 40px">删除应用 |
||||
</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
<div style="margin-top: 20px;width: 100%;margin-left: 8%"> |
||||
<el-form ref="form" label-width="80px"> |
||||
<el-form-item label="应用ID" style="width: 56%"> |
||||
<el-row> |
||||
<el-col :span="19"> |
||||
<el-input v-model="currentapp.app_id" :disabled="true"/> |
||||
</el-col> |
||||
<el-col :span="4"> |
||||
<el-button plain style="margin:0 8px;border-radius:4px;cursor:pointer;height: 40px" type="danger" |
||||
@click="delApp">删除应用 |
||||
</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
</el-form-item> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="应用名称" style="width: 56%"> |
||||
<el-input v-model="currentapp.name"/> |
||||
</el-form-item> |
||||
<el-form-item label="应用名称" style="width: 56%"> |
||||
<el-input v-model="currentapp.name"/> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="短链接" style="width: 56%"> |
||||
<el-input v-model="currentapp.short" maxlength="16" show-word-limit type="text"> |
||||
<template slot="prepend">{{ currentapp.preview_url }}/</template> |
||||
</el-input> |
||||
</el-form-item> |
||||
<el-form-item label="短链接" style="width: 56%"> |
||||
<el-input v-model="currentapp.short" maxlength="16" show-word-limit type="text"> |
||||
<template slot="prepend">{{ currentapp.preview_url }}/</template> |
||||
</el-input> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="应用图标" style="width: 56%"> |
||||
<el-upload |
||||
class="avatar-uploader" |
||||
action="#" |
||||
:show-file-list="false" |
||||
accept=".png , .jpg , .jpeg" |
||||
:before-upload="upload_app_icon"> |
||||
<img v-if="currentapp.icon_url" :src="currentapp.icon_url" |
||||
class="avatar" alt=""> |
||||
<i v-else class="el-icon-plus avatar-uploader-icon"/> |
||||
</el-upload> |
||||
</el-form-item> |
||||
<el-form-item label="应用描述" style="width: 66%"> |
||||
<el-input type="textarea" v-model="currentapp.description" |
||||
:autosize="{ minRows: 8, maxRows: 18}"/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-row> |
||||
<el-col :span="15"> |
||||
<el-button type="primary" plain @click="saveappinfo('save')" size="medium" |
||||
style="width: 160px;height: 50px;font-size: large;float: right">保存信息 |
||||
</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
<el-divider/> |
||||
<el-form-item label="应用截图" style="width: 100%"> |
||||
<el-form-item label="应用图标" style="width: 56%"> |
||||
<el-upload |
||||
:before-upload="upload_app_icon" |
||||
:show-file-list="false" |
||||
accept=".png , .jpg , .jpeg" |
||||
action="#" |
||||
class="avatar-uploader"> |
||||
<img v-if="currentapp.icon_url" :src="currentapp.icon_url" |
||||
alt="" class="avatar"> |
||||
<i v-else class="el-icon-plus avatar-uploader-icon"/> |
||||
</el-upload> |
||||
</el-form-item> |
||||
<el-form-item label="应用描述" style="width: 66%"> |
||||
<el-input v-model="currentapp.description" :autosize="{ minRows: 8, maxRows: 18}" |
||||
type="textarea"/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-row> |
||||
<el-col :span="15"> |
||||
<el-button plain size="medium" style="width: 160px;height: 50px;font-size: large;float: right" type="primary" |
||||
@click="saveappinfo('save')">保存信息 |
||||
</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
<el-divider/> |
||||
<el-form-item label="应用截图" style="width: 100%"> |
||||
|
||||
<div class="appdownload"> |
||||
<el-tooltip content="点击删除该应用截图" v-for="(screen) in currentapp.screenshots" :key="screen.id" |
||||
placement="top" effect="light"> |
||||
<el-image |
||||
class="screen-img" |
||||
fit="scale-down" |
||||
@click="delscreen(screen.id)" |
||||
:src="screen.url" alt=""> |
||||
<div slot="error" class="image-slot" @click="delscreen(screen.id)" |
||||
style="text-align: center;margin-top: 80%"> |
||||
<i class="el-icon-picture-outline"> 加载失败</i> |
||||
</div> |
||||
</el-image> |
||||
</el-tooltip> |
||||
<div class="screen-img" |
||||
v-if="currentapp.screenshots && currentapp.screenshots.length < 5"> |
||||
<el-upload |
||||
drag |
||||
action="#" |
||||
accept=".png , .jpg , .jpeg" |
||||
:before-upload="upload_app_screen"> |
||||
<i class="el-icon-upload"/> |
||||
</el-upload> |
||||
</div> |
||||
<div class="appdownload"> |
||||
<el-tooltip v-for="(screen) in currentapp.screenshots" :key="screen.id" content="点击删除该应用截图" |
||||
effect="light" placement="top"> |
||||
<el-image |
||||
:src="screen.url" |
||||
alt="" |
||||
class="screen-img" |
||||
fit="scale-down" @click="delscreen(screen.id)"> |
||||
<div slot="error" class="image-slot" style="text-align: center;margin-top: 80%" |
||||
@click="delscreen(screen.id)"> |
||||
<i class="el-icon-picture-outline"> 加载失败</i> |
||||
</div> |
||||
</el-image> |
||||
</el-tooltip> |
||||
<div v-if="currentapp.screenshots && currentapp.screenshots.length < 5" |
||||
class="screen-img"> |
||||
<el-upload |
||||
:before-upload="upload_app_screen" |
||||
accept=".png , .jpg , .jpeg" |
||||
action="#" |
||||
drag> |
||||
<i class="el-icon-upload"/> |
||||
</el-upload> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
</el-form-item> |
||||
</el-form> |
||||
</el-form-item> |
||||
</el-form> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
import {apputils, getapppicurl, releaseapputils} from "@/restful" |
||||
import {AvatarUploadUtils} from "@/utils"; |
||||
import {apputils, getapppicurl, releaseapputils} from "@/restful" |
||||
import {AvatarUploadUtils} from "@/utils"; |
||||
|
||||
export default { |
||||
name: "FirAppInfosbaseinfo", |
||||
data() { |
||||
return { |
||||
currentapp: {}, |
||||
imageUrl: "", |
||||
uploadconf: {}, |
||||
uploadprocess: 0, |
||||
dialogImageUrl: '', |
||||
dialogVisible: false, |
||||
appinfos: {}, |
||||
} |
||||
}, |
||||
methods: { |
||||
// eslint-disable-next-line no-unused-vars |
||||
delscreen(screen_id) { |
||||
this.$confirm('确定要删除该应用截图?', '警告', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'warning' |
||||
}).then(() => { |
||||
releaseapputils(data => { |
||||
if (data.code === 1000) { |
||||
this.$message.success('删除成功'); |
||||
this.getappinfo(); |
||||
} else if (data.code === 1003) { |
||||
this.$router.push({name: 'FirApps'}); |
||||
} |
||||
}, { |
||||
"methods": "DELETE", |
||||
"app_id": this.$route.params.id, |
||||
"release_id": "screen", |
||||
"data": {'screen_id': screen_id} |
||||
}) |
||||
|
||||
}).catch(() => { |
||||
this.$message({ |
||||
type: 'info', |
||||
message: '已取消操作' |
||||
}); |
||||
}); |
||||
}, |
||||
export default { |
||||
name: "FirAppInfosbaseinfo", |
||||
data() { |
||||
return { |
||||
currentapp: {}, |
||||
imageUrl: "", |
||||
uploadconf: {}, |
||||
uploadprocess: 0, |
||||
dialogImageUrl: '', |
||||
dialogVisible: false, |
||||
appinfos: {}, |
||||
} |
||||
}, |
||||
methods: { |
||||
// eslint-disable-next-line no-unused-vars |
||||
delscreen(screen_id) { |
||||
this.$confirm('确定要删除该应用截图?', '警告', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'warning' |
||||
}).then(() => { |
||||
releaseapputils(data => { |
||||
if (data.code === 1000) { |
||||
this.$message.success('删除成功'); |
||||
this.getappinfo(); |
||||
} else if (data.code === 1003) { |
||||
this.$router.push({name: 'FirApps'}); |
||||
} |
||||
}, { |
||||
"methods": "DELETE", |
||||
"app_id": this.$route.params.id, |
||||
"release_id": "screen", |
||||
"data": {'screen_id': screen_id} |
||||
}) |
||||
|
||||
delApp() { |
||||
//发送删除APP的操作 |
||||
this.$confirm('确认删除 ' + this.currentapp.name + ' ?') |
||||
// eslint-disable-next-line no-unused-vars |
||||
.then(res => { |
||||
const loadingobj = this.$loading({ |
||||
lock: true, |
||||
text: '操作中，请耐心等待', |
||||
spinner: 'el-icon-loading', |
||||
// background: 'rgba(0, 0, 0, 0.7)' |
||||
}); |
||||
apputils(data => { |
||||
loadingobj.close(); |
||||
if (data.code === 1000) { |
||||
this.$message({ |
||||
message: '删除成功', |
||||
type: 'success' |
||||
}); |
||||
this.$router.push({name: 'FirApps'}); |
||||
} else { |
||||
this.$message({ |
||||
message: '删除失败，请联系管理员', |
||||
type: 'error' |
||||
}); |
||||
} |
||||
}, { |
||||
"methods": "DELETE", |
||||
"app_id": this.currentapp.app_id |
||||
}); |
||||
}).catch(() => { |
||||
this.$message({ |
||||
type: 'info', |
||||
message: '已取消操作' |
||||
}); |
||||
}); |
||||
}, |
||||
|
||||
}) |
||||
.catch(err => { |
||||
this.$message.error(err) |
||||
}); |
||||
}, |
||||
getappinfo() { |
||||
apputils(data => { |
||||
if (data.code === 1000) { |
||||
this.appinfos = data.data; |
||||
this.master_release = data.data.master_release; |
||||
this.appinfos["icon_url"] = this.master_release.icon_url; |
||||
this.$store.dispatch('doucurrentapp', this.appinfos); |
||||
} else if (data.code === 1003) { |
||||
this.$router.push({name: 'FirApps'}); |
||||
} else { |
||||
// eslint-disable-next-line no-console |
||||
console.log("Error"); |
||||
} |
||||
}, { |
||||
"methods": "GET", |
||||
"app_id": this.currentapp.app_id |
||||
delApp() { |
||||
//发送删除APP的操作 |
||||
this.$confirm('确认删除 ' + this.currentapp.name + ' ?') |
||||
// eslint-disable-next-line no-unused-vars |
||||
.then(res => { |
||||
const loadingobj = this.$loading({ |
||||
lock: true, |
||||
text: '操作中，请耐心等待', |
||||
spinner: 'el-icon-loading', |
||||
// background: 'rgba(0, 0, 0, 0.7)' |
||||
}); |
||||
apputils(data => { |
||||
loadingobj.close(); |
||||
if (data.code === 1000) { |
||||
this.$message({ |
||||
message: '删除成功', |
||||
type: 'success' |
||||
}); |
||||
}, |
||||
saveappinfo() { |
||||
apputils(data => { |
||||
if (data.code === 1000) { |
||||
this.$message.success('数据更新成功'); |
||||
} else { |
||||
this.$message.error('操作失败,' + data.msg); |
||||
} |
||||
}, { |
||||
"methods": "PUT", |
||||
"app_id": this.currentapp.app_id, |
||||
"data": { |
||||
"description": this.currentapp.description, |
||||
"short": this.currentapp.short, |
||||
"name": this.currentapp.name, |
||||
} |
||||
this.$router.push({name: 'FirApps'}); |
||||
} else { |
||||
this.$message({ |
||||
message: '删除失败，请联系管理员', |
||||
type: 'error' |
||||
}); |
||||
}, |
||||
upload_app_icon(file) { |
||||
return this.beforeAvatarUpload(file, 'app') |
||||
}, |
||||
upload_app_screen(file) { |
||||
return this.beforeAvatarUpload(file, 'screen') |
||||
}, |
||||
beforeAvatarUpload(file, act) { |
||||
return AvatarUploadUtils(this, file, { |
||||
'app_id': this.currentapp.app_id, |
||||
'upload_key': file.name, |
||||
'ftype': act |
||||
// eslint-disable-next-line no-unused-vars |
||||
}, res => { |
||||
this.getappinfo(); |
||||
}); |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.$store.dispatch('doappInfoIndex', [[18, 18], [18, 18]]); |
||||
if (!this.currentapp.app_id) { |
||||
this.currentapp = this.$store.state.currentapp; |
||||
} |
||||
this.uploadconf = { |
||||
"AuthHeaders": {"Authorization": this.$cookies.get("auth_token")} |
||||
}; |
||||
}, |
||||
watch: { |
||||
'$store.state.currentapp': function () { |
||||
this.currentapp = this.$store.state.currentapp; |
||||
} |
||||
}, computed: { |
||||
getuppicurl() { |
||||
return getapppicurl(this.currentapp.app_id) |
||||
} |
||||
} |
||||
}, { |
||||
"methods": "DELETE", |
||||
"app_id": this.currentapp.app_id |
||||
}); |
||||
|
||||
}) |
||||
.catch(err => { |
||||
this.$message.error(err) |
||||
}); |
||||
}, |
||||
getappinfo() { |
||||
apputils(data => { |
||||
if (data.code === 1000) { |
||||
this.appinfos = data.data; |
||||
this.master_release = data.data.master_release; |
||||
this.appinfos["icon_url"] = this.master_release.icon_url; |
||||
this.$store.dispatch('doucurrentapp', this.appinfos); |
||||
} else if (data.code === 1003) { |
||||
this.$router.push({name: 'FirApps'}); |
||||
} else { |
||||
// eslint-disable-next-line no-console |
||||
console.log("Error"); |
||||
} |
||||
}, { |
||||
"methods": "GET", |
||||
"app_id": this.currentapp.app_id |
||||
}); |
||||
}, |
||||
saveappinfo() { |
||||
apputils(data => { |
||||
if (data.code === 1000) { |
||||
this.$message.success('数据更新成功'); |
||||
} else { |
||||
this.$message.error('操作失败,' + data.msg); |
||||
} |
||||
}, { |
||||
"methods": "PUT", |
||||
"app_id": this.currentapp.app_id, |
||||
"data": { |
||||
"description": this.currentapp.description, |
||||
"short": this.currentapp.short, |
||||
"name": this.currentapp.name, |
||||
} |
||||
}); |
||||
}, |
||||
upload_app_icon(file) { |
||||
return this.beforeAvatarUpload(file, 'app') |
||||
}, |
||||
upload_app_screen(file) { |
||||
return this.beforeAvatarUpload(file, 'screen') |
||||
}, |
||||
beforeAvatarUpload(file, act) { |
||||
return AvatarUploadUtils(this, file, { |
||||
'app_id': this.currentapp.app_id, |
||||
'upload_key': file.name, |
||||
'ftype': act |
||||
// eslint-disable-next-line no-unused-vars |
||||
}, res => { |
||||
this.getappinfo(); |
||||
}); |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.$store.dispatch('doappInfoIndex', [[18, 18], [18, 18]]); |
||||
if (!this.currentapp.app_id) { |
||||
this.currentapp = this.$store.state.currentapp; |
||||
} |
||||
this.uploadconf = { |
||||
"AuthHeaders": {"Authorization": this.$cookies.get("auth_token")} |
||||
}; |
||||
}, |
||||
watch: { |
||||
'$store.state.currentapp': function () { |
||||
this.currentapp = this.$store.state.currentapp; |
||||
} |
||||
}, computed: { |
||||
getuppicurl() { |
||||
return getapppicurl(this.currentapp.app_id) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.appdownload /deep/ .el-upload-dragger { |
||||
background: #f1f1f1; |
||||
width: 155px; |
||||
height: 288px; |
||||
} |
||||
.appdownload /deep/ .el-upload-dragger { |
||||
background: #f1f1f1; |
||||
width: 155px; |
||||
height: 288px; |
||||
} |
||||
|
||||
.appdownload /deep/ .el-icon-upload { |
||||
margin-top: 80%; |
||||
} |
||||
.appdownload /deep/ .el-icon-upload { |
||||
margin-top: 80%; |
||||
} |
||||
|
||||
.avatar-uploader .el-upload { |
||||
border: 1px dashed #d9d9d9; |
||||
border-radius: 6px; |
||||
cursor: pointer; |
||||
position: relative; |
||||
overflow: hidden; |
||||
.avatar-uploader .el-upload { |
||||
border: 1px dashed #d9d9d9; |
||||
border-radius: 6px; |
||||
cursor: pointer; |
||||
position: relative; |
||||
overflow: hidden; |
||||
|
||||
} |
||||
} |
||||
|
||||
.screen-img { |
||||
width: 155px; |
||||
height: 288px; |
||||
margin-right: 20px; |
||||
background-color: #f1f1f1; |
||||
float: left |
||||
} |
||||
.screen-img { |
||||
width: 155px; |
||||
height: 288px; |
||||
margin-right: 20px; |
||||
background-color: #f1f1f1; |
||||
float: left |
||||
} |
||||
|
||||
.screen-img:hover { |
||||
background-color: #c2dcf1; |
||||
} |
||||
.screen-img:hover { |
||||
background-color: #c2dcf1; |
||||
} |
||||
|
||||
.avatar-uploader-icon { |
||||
font-size: 28px; |
||||
color: #8c939d; |
||||
width: 178px; |
||||
height: 178px; |
||||
line-height: 178px; |
||||
text-align: center; |
||||
} |
||||
.avatar-uploader-icon { |
||||
font-size: 28px; |
||||
color: #8c939d; |
||||
width: 178px; |
||||
height: 178px; |
||||
line-height: 178px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.avatar { |
||||
height: 100px; |
||||
width: 100px; |
||||
border-radius: 10px; |
||||
display: block; |
||||
} |
||||
.avatar { |
||||
height: 100px; |
||||
width: 100px; |
||||
border-radius: 10px; |
||||
display: block; |
||||
} |
||||
</style> |
||||
|
||||
@ -1,370 +1,370 @@ |
||||
<template> |
||||
<div class="apps-app-combo page-tabcontent "> |
||||
<div class="middle-wrapper"> |
||||
<div class="request-wrapper" v-if="has_combo "> |
||||
<p class="lead text-center ng-scope">已经与 <b>{{ has_combo.name }}</b> 合并</p> |
||||
<table> |
||||
<tr> |
||||
<td><span class="type">{{ currentapp.type|getapptype}}</span></td> |
||||
<td/> |
||||
<td><span class="type">{{ has_combo.type|getapptype}}</span></td> |
||||
</tr> |
||||
<tr> |
||||
<td> |
||||
<div class="icon"><img v-if="cmaster_release" :src="cmaster_release.icon_url" |
||||
class="ng-isolate-scope" alt=""> |
||||
</div> |
||||
</td> |
||||
<td><i class="icon-combo"/></td> |
||||
<td> |
||||
<div class="icon"><img v-if="hmaster_release" :src="hmaster_release.icon_url" |
||||
class="ng-isolate-scope" alt=""> |
||||
</div> |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<td class="actions" colspan="3"> |
||||
<el-button @click="each_confirm" round>解除合并</el-button> |
||||
</td> |
||||
</tr> |
||||
</table> |
||||
</div> |
||||
<div v-else> |
||||
<div class="icon-container text-center"> |
||||
<img v-if="cmaster_release" :src="cmaster_release.icon_url" height="128" width="128"> |
||||
</div> |
||||
<div class="apps-list"> |
||||
<div class="known-apps"> |
||||
<p class="lead ng-binding"> |
||||
<b>选择已有的应用进行合并</b> |
||||
</p> |
||||
<div class="apps"> |
||||
<el-link v-if="comboapplists.length ===0 " :underline="false" type="danger">暂无可以合并的应用 |
||||
</el-link> |
||||
<div :key="comboapp.app_id" @click="each_add(comboapp.app_id)" class="app ng-scope" |
||||
v-for="comboapp in comboapplists"> |
||||
<div class="icon"> |
||||
<img :src="comboapp.master_release|geticon_url" class="ng-isolate-scope" alt=""> |
||||
</div> |
||||
<p class="ng-binding">{{ comboapp.name }}</p></div> |
||||
</div> |
||||
</div> |
||||
<span class="hr-vertical"/> |
||||
<div class="find-apps"> |
||||
<p class="lead "> |
||||
<b>输入需要合并的应用的短链接或者名字</b> |
||||
</p> |
||||
<div class="form-group"> |
||||
<el-input |
||||
@click="searchapps" |
||||
clearable |
||||
placeholder="输入短链接或者名字" |
||||
prefix-icon="el-icon-search" |
||||
v-model="searchKey" |
||||
/> |
||||
</div> |
||||
</div> |
||||
<div class="apps-app-combo page-tabcontent "> |
||||
<div class="middle-wrapper"> |
||||
<div v-if="has_combo " class="request-wrapper"> |
||||
<p class="lead text-center ng-scope">已经与 <b>{{ has_combo.name }}</b> 合并</p> |
||||
<table> |
||||
<tr> |
||||
<td><span class="type">{{ currentapp.type|getapptype }}</span></td> |
||||
<td/> |
||||
<td><span class="type">{{ has_combo.type|getapptype }}</span></td> |
||||
</tr> |
||||
<tr> |
||||
<td> |
||||
<div class="icon"><img v-if="cmaster_release" :src="cmaster_release.icon_url" |
||||
alt="" class="ng-isolate-scope"> |
||||
</div> |
||||
</td> |
||||
<td><i class="icon-combo"/></td> |
||||
<td> |
||||
<div class="icon"><img v-if="hmaster_release" :src="hmaster_release.icon_url" |
||||
alt="" class="ng-isolate-scope"> |
||||
</div> |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<td class="actions" colspan="3"> |
||||
<el-button round @click="each_confirm">解除合并</el-button> |
||||
</td> |
||||
</tr> |
||||
</table> |
||||
</div> |
||||
<div v-else> |
||||
<div class="icon-container text-center"> |
||||
<img v-if="cmaster_release" :src="cmaster_release.icon_url" height="128" width="128"> |
||||
</div> |
||||
<div class="apps-list"> |
||||
<div class="known-apps"> |
||||
<p class="lead ng-binding"> |
||||
<b>选择已有的应用进行合并</b> |
||||
</p> |
||||
<div class="apps"> |
||||
<el-link v-if="comboapplists.length ===0 " :underline="false" type="danger">暂无可以合并的应用 |
||||
</el-link> |
||||
<div v-for="comboapp in comboapplists" :key="comboapp.app_id" class="app ng-scope" |
||||
@click="each_add(comboapp.app_id)"> |
||||
<div class="icon"> |
||||
<img :src="comboapp.master_release|geticon_url" alt="" class="ng-isolate-scope"> |
||||
</div> |
||||
|
||||
|
||||
<p class="ng-binding">{{ comboapp.name }}</p></div> |
||||
</div> |
||||
|
||||
</div> |
||||
<span class="hr-vertical"/> |
||||
<div class="find-apps"> |
||||
<p class="lead "> |
||||
<b>输入需要合并的应用的短链接或者名字</b> |
||||
</p> |
||||
<div class="form-group"> |
||||
<el-input |
||||
v-model="searchKey" |
||||
clearable |
||||
placeholder="输入短链接或者名字" |
||||
prefix-icon="el-icon-search" |
||||
@click="searchapps" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
|
||||
</div> |
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
import {apputils, getapps} from "@/restful"; |
||||
|
||||
export default { |
||||
name: "FirAppInfoscombo" |
||||
, data() { |
||||
return { |
||||
searchKey: '', |
||||
currentapp: {}, |
||||
has_combo: {}, |
||||
cmaster_release: {}, |
||||
hmaster_release: {}, |
||||
comboapplists: [], |
||||
orgapplists: [], |
||||
comboapp: {"master_release": ""} |
||||
} |
||||
}, methods: { |
||||
searchapps() { |
||||
let keysearch = this.searchKey.replace(/^\s+|\s+$/g, ""); |
||||
let newapplists = []; |
||||
for (let i = 0; i < this.orgapplists.length; i++) { |
||||
if (this.orgapplists[i].short.search(keysearch) === 0 || this.orgapplists[i].name.search(keysearch) === 0) { |
||||
newapplists.push(this.orgapplists[i]); |
||||
} |
||||
} |
||||
if (keysearch === "") { |
||||
this.comboapplists = this.orgapplists.slice(); |
||||
} else { |
||||
this.comboapplists = newapplists.slice(); |
||||
} |
||||
}, |
||||
each_add(hcombo_id) { |
||||
apputils(data => { |
||||
if (data.code === 1000) { |
||||
this.$message.success('操作成功'); |
||||
this.comboapplists = []; |
||||
apputils(data => { |
||||
let appinfos = data.data; |
||||
appinfos["icon_url"] = appinfos.master_release.icon_url; |
||||
this.$store.dispatch('doucurrentapp', appinfos); |
||||
|
||||
if (data.code === 1000) { |
||||
this.$store.dispatch('doucurrentapp', data.data); |
||||
} else if (data.code === 1003) { |
||||
this.$router.push({name: 'FirApps'}); |
||||
} else { |
||||
// eslint-disable-next-line no-console |
||||
console.log("Error"); |
||||
} |
||||
}, { |
||||
"methods": "GET", |
||||
"app_id": this.currentapp.app_id |
||||
}); |
||||
this.setData(); |
||||
} |
||||
}, { |
||||
"methods": "PUT", |
||||
"app_id": this.currentapp.app_id, |
||||
"data": { |
||||
"has_combo": { |
||||
"hcombo_id": hcombo_id, |
||||
"action": "COMBO", |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
each_confirm() { |
||||
apputils(data => { |
||||
if (data.code === 1000) { |
||||
this.$message.success('操作成功'); |
||||
|
||||
let currentapp = this.$store.state.currentapp; |
||||
this.has_combo = this.$store.state.currentapp.has_combo; |
||||
this.has_combo = null; |
||||
currentapp.has_combo = null; |
||||
this.hmaster_release = null; |
||||
this.$store.dispatch('doucurrentapp', currentapp); |
||||
this.getappiconFun(); |
||||
|
||||
} |
||||
}, { |
||||
"methods": "PUT", |
||||
"app_id": this.currentapp.app_id, |
||||
"data": { |
||||
"has_combo": { |
||||
"hcombo_id": this.has_combo.app_id, |
||||
"action": "UNCOMBO", |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
setData() { |
||||
this.currentapp = this.$store.state.currentapp; |
||||
this.cmaster_release = this.$store.state.currentapp.master_release; |
||||
if (this.$store.state.currentapp.has_combo) { |
||||
this.has_combo = this.$store.state.currentapp.has_combo; |
||||
this.hmaster_release = this.$store.state.currentapp.has_combo.master_release; |
||||
} else { |
||||
this.has_combo = null; |
||||
this.hmaster_release = null; |
||||
this.getappiconFun(); |
||||
} |
||||
}, |
||||
getappiconFun() { |
||||
let type = "android"; |
||||
if (this.currentapp.type === 0) { |
||||
type = "ios" |
||||
} |
||||
getapps(data => { |
||||
if (data.code === 1000) { |
||||
this.comboapplists = data.data; |
||||
this.orgapplists = this.comboapplists.slice(); //深拷贝 |
||||
|
||||
} else { |
||||
this.$router.push({name: 'FirLogin'}); |
||||
} |
||||
}, {"type": type, "page": 1, "size": 999, "act": 'combo'}); |
||||
import {apputils, getapps} from "@/restful"; |
||||
|
||||
export default { |
||||
name: "FirAppInfoscombo" |
||||
, data() { |
||||
return { |
||||
searchKey: '', |
||||
currentapp: {}, |
||||
has_combo: {}, |
||||
cmaster_release: {}, |
||||
hmaster_release: {}, |
||||
comboapplists: [], |
||||
orgapplists: [], |
||||
comboapp: {"master_release": ""} |
||||
} |
||||
}, methods: { |
||||
searchapps() { |
||||
let keysearch = this.searchKey.replace(/^\s+|\s+$/g, ""); |
||||
let newapplists = []; |
||||
for (let i = 0; i < this.orgapplists.length; i++) { |
||||
if (this.orgapplists[i].short.search(keysearch) === 0 || this.orgapplists[i].name.search(keysearch) === 0) { |
||||
newapplists.push(this.orgapplists[i]); |
||||
} |
||||
} |
||||
if (keysearch === "") { |
||||
this.comboapplists = this.orgapplists.slice(); |
||||
} else { |
||||
this.comboapplists = newapplists.slice(); |
||||
} |
||||
}, |
||||
each_add(hcombo_id) { |
||||
apputils(data => { |
||||
if (data.code === 1000) { |
||||
this.$message.success('操作成功'); |
||||
this.comboapplists = []; |
||||
apputils(data => { |
||||
let appinfos = data.data; |
||||
appinfos["icon_url"] = appinfos.master_release.icon_url; |
||||
this.$store.dispatch('doucurrentapp', appinfos); |
||||
|
||||
if (data.code === 1000) { |
||||
this.$store.dispatch('doucurrentapp', data.data); |
||||
} else if (data.code === 1003) { |
||||
this.$router.push({name: 'FirApps'}); |
||||
} else { |
||||
// eslint-disable-next-line no-console |
||||
console.log("Error"); |
||||
} |
||||
}, filters: { |
||||
geticon_url(app) { |
||||
if (app) { |
||||
return app.icon_url |
||||
} |
||||
return "" |
||||
}, |
||||
getapptype: function (type) { |
||||
let ftype = ''; |
||||
if (type === 0) { |
||||
ftype = 'Android' |
||||
} else { |
||||
ftype = 'iOS' |
||||
} |
||||
return ftype |
||||
}, |
||||
}, |
||||
mounted() { |
||||
this.$store.dispatch('doappInfoIndex', [[44, 44], [44, 44]]); |
||||
this.setData(); |
||||
}, |
||||
watch: { |
||||
'$store.state.currentapp': function () { |
||||
this.setData(); |
||||
}, |
||||
// eslint-disable-next-line no-unused-vars |
||||
searchKey: function (val, oldVal) { |
||||
this.searchapps() |
||||
}, |
||||
}, { |
||||
"methods": "GET", |
||||
"app_id": this.currentapp.app_id |
||||
}); |
||||
this.setData(); |
||||
} |
||||
}, { |
||||
"methods": "PUT", |
||||
"app_id": this.currentapp.app_id, |
||||
"data": { |
||||
"has_combo": { |
||||
"hcombo_id": hcombo_id, |
||||
"action": "COMBO", |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
each_confirm() { |
||||
apputils(data => { |
||||
if (data.code === 1000) { |
||||
this.$message.success('操作成功'); |
||||
|
||||
let currentapp = this.$store.state.currentapp; |
||||
this.has_combo = this.$store.state.currentapp.has_combo; |
||||
this.has_combo = null; |
||||
currentapp.has_combo = null; |
||||
this.hmaster_release = null; |
||||
this.$store.dispatch('doucurrentapp', currentapp); |
||||
this.getappiconFun(); |
||||
|
||||
} |
||||
}, { |
||||
"methods": "PUT", |
||||
"app_id": this.currentapp.app_id, |
||||
"data": { |
||||
"has_combo": { |
||||
"hcombo_id": this.has_combo.app_id, |
||||
"action": "UNCOMBO", |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
setData() { |
||||
this.currentapp = this.$store.state.currentapp; |
||||
this.cmaster_release = this.$store.state.currentapp.master_release; |
||||
if (this.$store.state.currentapp.has_combo) { |
||||
this.has_combo = this.$store.state.currentapp.has_combo; |
||||
this.hmaster_release = this.$store.state.currentapp.has_combo.master_release; |
||||
} else { |
||||
this.has_combo = null; |
||||
this.hmaster_release = null; |
||||
this.getappiconFun(); |
||||
} |
||||
}, |
||||
getappiconFun() { |
||||
let type = "android"; |
||||
if (this.currentapp.type === 0) { |
||||
type = "ios" |
||||
} |
||||
getapps(data => { |
||||
if (data.code === 1000) { |
||||
this.comboapplists = data.data; |
||||
this.orgapplists = this.comboapplists.slice(); //深拷贝 |
||||
|
||||
} else { |
||||
this.$router.push({name: 'FirLogin'}); |
||||
} |
||||
}, {"type": type, "page": 1, "size": 999, "act": 'combo'}); |
||||
} |
||||
}, filters: { |
||||
geticon_url(app) { |
||||
if (app) { |
||||
return app.icon_url |
||||
} |
||||
return "" |
||||
}, |
||||
getapptype: function (type) { |
||||
let ftype = ''; |
||||
if (type === 0) { |
||||
ftype = 'Android' |
||||
} else { |
||||
ftype = 'iOS' |
||||
} |
||||
return ftype |
||||
}, |
||||
}, |
||||
mounted() { |
||||
this.$store.dispatch('doappInfoIndex', [[44, 44], [44, 44]]); |
||||
this.setData(); |
||||
}, |
||||
watch: { |
||||
'$store.state.currentapp': function () { |
||||
this.setData(); |
||||
}, |
||||
// eslint-disable-next-line no-unused-vars |
||||
searchKey: function (val, oldVal) { |
||||
this.searchapps() |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
|
||||
.text-center { |
||||
text-align: center |
||||
} |
||||
|
||||
.middle-wrapper { |
||||
margin: 0 auto; |
||||
width: 1100px |
||||
} |
||||
|
||||
.apps-app-combo { |
||||
position: relative; |
||||
padding-top: 45px |
||||
} |
||||
|
||||
.apps-app-combo .icon-container { |
||||
margin-bottom: 60px |
||||
} |
||||
|
||||
.apps-app-combo .icon-container img { |
||||
border-radius: 17.544% |
||||
} |
||||
|
||||
.apps-app-combo .apps-list { |
||||
position: relative; |
||||
overflow: hidden |
||||
} |
||||
|
||||
.apps-app-combo .lead { |
||||
margin-bottom: 30px; |
||||
font-size: 16px |
||||
} |
||||
|
||||
.apps-app-combo .lead b { |
||||
max-width: 300px; |
||||
display: inline-block; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
vertical-align: top |
||||
} |
||||
|
||||
.known-apps { |
||||
text-align: center; |
||||
float: left; |
||||
width: 45%; |
||||
margin: 10px 30px; |
||||
} |
||||
|
||||
.apps-app-combo .known-apps .icon img { |
||||
width: 80px; |
||||
height: 80px; |
||||
border-radius: 22.7% |
||||
} |
||||
|
||||
.apps-app-combo .known-apps .apps .app { |
||||
display: inline-block; |
||||
margin: 0 0 20px 28px; |
||||
text-align: center; |
||||
cursor: pointer; |
||||
vertical-align: top; |
||||
|
||||
} |
||||
|
||||
.apps-app-combo .known-apps .apps .app > p { |
||||
margin-top: 8px; |
||||
font-size: 12px; |
||||
text-align: center; |
||||
display: inline-block; |
||||
max-width: 100px; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
word-wrap: normal |
||||
} |
||||
|
||||
.apps-app-combo .find-apps { |
||||
/*padding-left: 50px;*/ |
||||
text-align: center; |
||||
margin: 10px 30px; |
||||
float: right; |
||||
width: 40%; |
||||
} |
||||
|
||||
.apps-app-combo .find-apps .lead { |
||||
text-align: left; |
||||
} |
||||
|
||||
.apps-app-combo .find-apps .form-group { |
||||
position: relative; |
||||
margin-bottom: 36px; |
||||
width: 260px; |
||||
} |
||||
|
||||
.apps-app-combo .hr-vertical { |
||||
position: absolute; |
||||
z-index: 12; |
||||
width: 1px; |
||||
height: 100%; |
||||
background-color: #d5f9f9 |
||||
} |
||||
|
||||
.apps-app-combo .request-wrapper .lead { |
||||
margin-bottom: 80px; |
||||
font-size: 18px |
||||
} |
||||
|
||||
.apps-app-combo .request-wrapper table { |
||||
margin: 0 auto; |
||||
width: 400px |
||||
} |
||||
|
||||
.apps-app-combo .request-wrapper table tr:first-child td span { |
||||
display: inline-block; |
||||
margin-bottom: 12px; |
||||
font-size: 16px |
||||
} |
||||
|
||||
.apps-app-combo .request-wrapper table td { |
||||
padding: 0 15px; |
||||
text-align: center |
||||
} |
||||
|
||||
.apps-app-combo .request-wrapper table td img { |
||||
width: 120px; |
||||
height: 120px; |
||||
border-radius: 17.54% |
||||
} |
||||
|
||||
.apps-app-combo .request-wrapper table .actions { |
||||
padding-top: 40px |
||||
} |
||||
|
||||
.apps-app-combo .request-wrapper table i.icon-combo { |
||||
font-size: 30px |
||||
} |
||||
.text-center { |
||||
text-align: center |
||||
} |
||||
|
||||
.middle-wrapper { |
||||
margin: 0 auto; |
||||
width: 1100px |
||||
} |
||||
|
||||
.apps-app-combo { |
||||
position: relative; |
||||
padding-top: 45px |
||||
} |
||||
|
||||
.apps-app-combo .icon-container { |
||||
margin-bottom: 60px |
||||
} |
||||
|
||||
.apps-app-combo .icon-container img { |
||||
border-radius: 17.544% |
||||
} |
||||
|
||||
.apps-app-combo .apps-list { |
||||
position: relative; |
||||
overflow: hidden |
||||
} |
||||
|
||||
.apps-app-combo .lead { |
||||
margin-bottom: 30px; |
||||
font-size: 16px |
||||
} |
||||
|
||||
.apps-app-combo .lead b { |
||||
max-width: 300px; |
||||
display: inline-block; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
vertical-align: top |
||||
} |
||||
|
||||
.known-apps { |
||||
text-align: center; |
||||
float: left; |
||||
width: 45%; |
||||
margin: 10px 30px; |
||||
} |
||||
|
||||
.apps-app-combo .known-apps .icon img { |
||||
width: 80px; |
||||
height: 80px; |
||||
border-radius: 22.7% |
||||
} |
||||
|
||||
.apps-app-combo .known-apps .apps .app { |
||||
display: inline-block; |
||||
margin: 0 0 20px 28px; |
||||
text-align: center; |
||||
cursor: pointer; |
||||
vertical-align: top; |
||||
|
||||
} |
||||
|
||||
.apps-app-combo .known-apps .apps .app > p { |
||||
margin-top: 8px; |
||||
font-size: 12px; |
||||
text-align: center; |
||||
display: inline-block; |
||||
max-width: 100px; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
word-wrap: normal |
||||
} |
||||
|
||||
.apps-app-combo .find-apps { |
||||
/*padding-left: 50px;*/ |
||||
text-align: center; |
||||
margin: 10px 30px; |
||||
float: right; |
||||
width: 40%; |
||||
} |
||||
|
||||
.apps-app-combo .find-apps .lead { |
||||
text-align: left; |
||||
} |
||||
|
||||
.apps-app-combo .find-apps .form-group { |
||||
position: relative; |
||||
margin-bottom: 36px; |
||||
width: 260px; |
||||
} |
||||
|
||||
.apps-app-combo .hr-vertical { |
||||
position: absolute; |
||||
z-index: 12; |
||||
width: 1px; |
||||
height: 100%; |
||||
background-color: #d5f9f9 |
||||
} |
||||
|
||||
.apps-app-combo .request-wrapper .lead { |
||||
margin-bottom: 80px; |
||||
font-size: 18px |
||||
} |
||||
|
||||
.apps-app-combo .request-wrapper table { |
||||
margin: 0 auto; |
||||
width: 400px |
||||
} |
||||
|
||||
.apps-app-combo .request-wrapper table tr:first-child td span { |
||||
display: inline-block; |
||||
margin-bottom: 12px; |
||||
font-size: 16px |
||||
} |
||||
|
||||
.apps-app-combo .request-wrapper table td { |
||||
padding: 0 15px; |
||||
text-align: center |
||||
} |
||||
|
||||
.apps-app-combo .request-wrapper table td img { |
||||
width: 120px; |
||||
height: 120px; |
||||
border-radius: 17.54% |
||||
} |
||||
|
||||
.apps-app-combo .request-wrapper table .actions { |
||||
padding-top: 40px |
||||
} |
||||
|
||||
.apps-app-combo .request-wrapper table i.icon-combo { |
||||
font-size: 30px |
||||
} |
||||
|
||||
|
||||
</style> |
||||
|
||||
@ -1,486 +1,487 @@ |
||||
<template> |
||||
<el-timeline> |
||||
<el-timeline-item v-for="(app) in release_apps" :key="app.release_id" |
||||
:timestamp="app.created_time|formatdatatimeline" |
||||
:color="app.master_color" |
||||
placement="top"> |
||||
<el-card> |
||||
<div class="directive-view-release"> |
||||
|
||||
<i class="el-icon-cloudy" v-if="! app.is_master"/> |
||||
<i class="el-icon-cloudy" style="background-color: rgb(139,195,248)" v-else/> |
||||
|
||||
<b class="ng-binding">{{app.app_version}} (Build {{app.build_version}})</b> |
||||
<div class="release-metainfo ng-hide" |
||||
v-if="app.release_type === 0"> |
||||
<small> |
||||
<i class="icon-calendar"/> |
||||
<span class="el-icon-date"> {{app.created_time|formattimeline}}</span> |
||||
</small> |
||||
</div> |
||||
|
||||
<div class="release-metainfo" v-else> |
||||
<small> |
||||
<i class="icon-calendar"/> |
||||
<span class="el-icon-date"> {{app.created_time|formattimeline}}</span> |
||||
</small> · |
||||
|
||||
<small>{{app.release_type|getiOStype}}</small> |
||||
<small v-if="app.distribution_name" style="margin-left: 5px"> · {{app.distribution_name}}</small> |
||||
</div> |
||||
|
||||
<p>{{app.changelog}}</p> |
||||
<label> |
||||
<el-timeline> |
||||
<el-timeline-item v-for="(app) in release_apps" :key="app.release_id" |
||||
:color="app.master_color" |
||||
:timestamp="app.created_time|formatdatatimeline" |
||||
placement="top"> |
||||
<el-card> |
||||
<div class="directive-view-release"> |
||||
|
||||
<i v-if="! app.is_master" class="el-icon-cloudy"/> |
||||
<i v-else class="el-icon-cloudy" style="background-color: rgb(139,195,248)"/> |
||||
|
||||
<b class="ng-binding">{{ app.app_version }} (Build {{ app.build_version }})</b> |
||||
<div v-if="app.release_type === 0" |
||||
class="release-metainfo ng-hide"> |
||||
<small> |
||||
<i class="icon-calendar"/> |
||||
<span class="el-icon-date"> {{ app.created_time|formattimeline }}</span> |
||||
</small> |
||||
</div> |
||||
|
||||
<div v-else class="release-metainfo"> |
||||
<small> |
||||
<i class="icon-calendar"/> |
||||
<span class="el-icon-date"> {{ app.created_time|formattimeline }}</span> |
||||
</small> · |
||||
|
||||
<small>{{ app.release_type|getiOStype }}</small> |
||||
<small v-if="app.distribution_name" |
||||
style="margin-left: 5px"> · {{ app.distribution_name }}</small> |
||||
</div> |
||||
|
||||
<p>{{ app.changelog }}</p> |
||||
<label> |
||||
<textarea v-if="app.editing.changelog" |
||||
v-model="app.changelog" |
||||
placeholder="更新日志"> |
||||
</textarea> |
||||
</label> |
||||
<div class="release-actions editing " v-if="app.editing.changelog"> |
||||
<button class="btn-cancel" @click="endEdit(app,'changelog')"><span |
||||
>取消</span></button> |
||||
<button class="btn-save" @click="updateChangelog(app,'changelog')"><span |
||||
>保存</span></button> |
||||
</div> |
||||
<el-input v-if="app.editing.binary_url" |
||||
v-model="app.binary_url" |
||||
placeholder="下载地址,默认本服务器，填写第三方可以 自动跳转到第三方平台" clearable> |
||||
</el-input> |
||||
<div class="release-actions editing " v-if="app.editing.binary_url" style="margin-top: 10px"> |
||||
|
||||
<button class="btn-cancel" @click="endEdit(app,'binary_url')"><span |
||||
>取消</span></button> |
||||
<button class="btn-save" @click="updateChangelog(app,'binary_url')"><span |
||||
>保存</span></button> |
||||
</div> |
||||
<div class="release-actions" v-show="!app.editing.changelog && !app.editing.binary_url "> |
||||
<el-tooltip class="tooltip-top" content="编辑更新日志" placement="top"> |
||||
<el-button @click="startEdit(app,'changelog')" |
||||
tooltip="编辑更新日志" |
||||
class="tooltip-top "> |
||||
<i class="el-icon-edit"/> |
||||
</el-button> |
||||
</el-tooltip> |
||||
<el-tooltip class="tooltip-top" content="下载原文件" placement="top"> |
||||
<el-button class="tooltip-top" tooltip="下载原文件" |
||||
@click="downloadPackage(app)"> |
||||
<i class="el-icon-download"/> |
||||
<span>{{app.binary_size}}</span> |
||||
</el-button> |
||||
</el-tooltip> |
||||
|
||||
<el-tooltip class="tooltip-top" :content="app.binary_url|downcontent" placement="top"> |
||||
|
||||
<el-button class="tooltip-top" tooltip="修改下载地址" |
||||
@click="startEdit(app,'binary_url')"><i class="el-icon-link"/> <span>下载地址</span> |
||||
</el-button> |
||||
|
||||
</el-tooltip> |
||||
|
||||
<el-button class="tooltip-top" @click="previewRelase(app)"><i class="el-icon-view"/> <span |
||||
class="ng-binding">预览</span> |
||||
</el-button> |
||||
|
||||
<el-button v-if="! app.is_master" class="tooltip-top" @click="make_master_release(app)"> |
||||
<i class="el-icon-view"/> |
||||
<span class="ng-binding ng-scope">标记上线</span> |
||||
</el-button> |
||||
|
||||
<el-button v-if="(! app.is_master )|| (app.is_master && release_apps.length === 1)" |
||||
class="tooltip-top" @click="del_release_app(app)"> |
||||
<i class="el-icon-delete"/> |
||||
<span class="ng-binding ng-scope">删除</span> |
||||
</el-button> |
||||
|
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
</el-timeline-item> |
||||
<el-button v-if="has_next" class="time-line-more" @click="getapptimelineFun('more')">显示更多版本</el-button> |
||||
</el-timeline> |
||||
</label> |
||||
<div v-if="app.editing.changelog" class="release-actions editing "> |
||||
<button class="btn-cancel" @click="endEdit(app,'changelog')"><span |
||||
>取消</span></button> |
||||
<button class="btn-save" @click="updateChangelog(app,'changelog')"><span |
||||
>保存</span></button> |
||||
</div> |
||||
<el-input v-if="app.editing.binary_url" |
||||
v-model="app.binary_url" |
||||
clearable placeholder="下载地址,默认本服务器，填写第三方可以 自动跳转到第三方平台"> |
||||
</el-input> |
||||
<div v-if="app.editing.binary_url" class="release-actions editing " style="margin-top: 10px"> |
||||
|
||||
<button class="btn-cancel" @click="endEdit(app,'binary_url')"><span |
||||
>取消</span></button> |
||||
<button class="btn-save" @click="updateChangelog(app,'binary_url')"><span |
||||
>保存</span></button> |
||||
</div> |
||||
<div v-show="!app.editing.changelog && !app.editing.binary_url " class="release-actions"> |
||||
<el-tooltip class="tooltip-top" content="编辑更新日志" placement="top"> |
||||
<el-button class="tooltip-top " |
||||
tooltip="编辑更新日志" |
||||
@click="startEdit(app,'changelog')"> |
||||
<i class="el-icon-edit"/> |
||||
</el-button> |
||||
</el-tooltip> |
||||
<el-tooltip class="tooltip-top" content="下载原文件" placement="top"> |
||||
<el-button class="tooltip-top" tooltip="下载原文件" |
||||
@click="downloadPackage(app)"> |
||||
<i class="el-icon-download"/> |
||||
<span>{{ app.binary_size }}</span> |
||||
</el-button> |
||||
</el-tooltip> |
||||
|
||||
<el-tooltip :content="app.binary_url|downcontent" class="tooltip-top" placement="top"> |
||||
|
||||
<el-button class="tooltip-top" tooltip="修改下载地址" |
||||
@click="startEdit(app,'binary_url')"><i class="el-icon-link"/> <span>下载地址</span> |
||||
</el-button> |
||||
|
||||
</el-tooltip> |
||||
|
||||
<el-button class="tooltip-top" @click="previewRelase(app)"><i class="el-icon-view"/> <span |
||||
class="ng-binding">预览</span> |
||||
</el-button> |
||||
|
||||
<el-button v-if="! app.is_master" class="tooltip-top" @click="make_master_release(app)"> |
||||
<i class="el-icon-view"/> |
||||
<span class="ng-binding ng-scope">标记上线</span> |
||||
</el-button> |
||||
|
||||
<el-button v-if="(! app.is_master )|| (app.is_master && release_apps.length === 1)" |
||||
class="tooltip-top" @click="del_release_app(app)"> |
||||
<i class="el-icon-delete"/> |
||||
<span class="ng-binding ng-scope">删除</span> |
||||
</el-button> |
||||
|
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
</el-timeline-item> |
||||
<el-button v-if="has_next" class="time-line-more" @click="getapptimelineFun('more')">显示更多版本</el-button> |
||||
</el-timeline> |
||||
</template> |
||||
|
||||
<script> |
||||
import {getdownloadurl, releaseapputils} from "@/restful" |
||||
|
||||
export default { |
||||
name: "FirAppInfostimeline", |
||||
data() { |
||||
return { |
||||
release_apps: [], |
||||
currentapp: {}, |
||||
activity: { |
||||
editing: {'changelog': false, 'binary_url': false} |
||||
}, |
||||
updatas: {}, |
||||
query: {'page': 1, size: 10}, |
||||
has_next: false, |
||||
} |
||||
import {getdownloadurl, releaseapputils} from "@/restful" |
||||
|
||||
export default { |
||||
name: "FirAppInfostimeline", |
||||
data() { |
||||
return { |
||||
release_apps: [], |
||||
currentapp: {}, |
||||
activity: { |
||||
editing: {'changelog': false, 'binary_url': false} |
||||
}, |
||||
updatas: {}, |
||||
query: {'page': 1, size: 10}, |
||||
has_next: false, |
||||
} |
||||
}, |
||||
methods: { |
||||
set_query_page() { |
||||
if (this.has_next) { |
||||
this.query.page += 1; |
||||
} |
||||
}, |
||||
downloadPackage(app) { |
||||
getdownloadurl(res => { |
||||
if (res.code === 1000) { |
||||
window.location.href = res.data.download_url; |
||||
} else { |
||||
this.$message.error(res.msg); |
||||
} |
||||
}, { |
||||
'data': { |
||||
'token': app.download_token, |
||||
'short': this.currentapp.short, |
||||
'release_id': app.release_id, |
||||
"password": this.currentapp.password, |
||||
"isdownload": true, |
||||
}, |
||||
methods: { |
||||
set_query_page() { |
||||
if (this.has_next) { |
||||
this.query.page += 1; |
||||
} |
||||
}, |
||||
downloadPackage(app) { |
||||
getdownloadurl(res => { |
||||
if (res.code === 1000) { |
||||
window.location.href = res.data.download_url; |
||||
} else { |
||||
this.$message.error(res.msg); |
||||
} |
||||
}, { |
||||
'data': { |
||||
'token': app.download_token, |
||||
'short': this.currentapp.short, |
||||
'release_id': app.release_id, |
||||
"password": this.currentapp.password, |
||||
"isdownload": true, |
||||
}, |
||||
'app_id': this.currentapp.app_id |
||||
}) |
||||
}, |
||||
previewRelase(app) { |
||||
let routeData = this.$router.resolve({ |
||||
name: 'FirDownload', |
||||
params: {short: this.currentapp.short}, |
||||
query: {release_id: app.release_id} |
||||
}); |
||||
let p_url = routeData.href; |
||||
if (this.currentapp.preview_url && this.currentapp.preview_url.length > 6) { |
||||
p_url = this.currentapp.preview_url + p_url |
||||
} |
||||
window.open(p_url, 'target', ''); |
||||
|
||||
}, |
||||
getapptimelineFun(act = '') { |
||||
const loading = this.$loading({ |
||||
lock: true, |
||||
text: '加载中', |
||||
spinner: 'el-icon-loading', |
||||
// background: 'rgba(0, 0, 0, 0.7)' |
||||
}); |
||||
if (act === 'more') { |
||||
this.set_query_page(); |
||||
} else { |
||||
this.release_apps = []; |
||||
this.query = {'page': 1, size: 10}; |
||||
} |
||||
releaseapputils(data => { |
||||
if (data.code === 1000) { |
||||
this.currentapp = data.data.currentapp; |
||||
this.has_next = data.data.has_next; |
||||
this.release_apps = this.release_apps.concat(data.data.release_apps); |
||||
} else if (data.code === 1003) { |
||||
loading.close(); |
||||
this.$router.push({name: 'FirApps'}); |
||||
} |
||||
loading.close(); |
||||
}, { |
||||
"methods": "GET", |
||||
"app_id": this.$route.params.id, |
||||
"release_id": "timeline", |
||||
"data": { |
||||
"page": this.query.page, |
||||
"size": this.query.size |
||||
} |
||||
}) |
||||
}, |
||||
del_release_app(app) { |
||||
//发送删除APP的操作 |
||||
this.$confirm('确认删除 ' + this.currentapp.name + '下 当前 release 版本吗?') |
||||
// eslint-disable-next-line no-unused-vars |
||||
.then(res => { |
||||
let loadingobj = this.$loading({ |
||||
lock: true, |
||||
text: '操作中，请耐心等待', |
||||
spinner: 'el-icon-loading', |
||||
// background: 'rgba(0, 0, 0, 0.7)' |
||||
}); |
||||
releaseapputils(data => { |
||||
loadingobj.close(); |
||||
if (data.code === 1000) { |
||||
this.$message({ |
||||
message: '删除成功', |
||||
type: 'success' |
||||
}); |
||||
this.getapptimelineFun(); |
||||
|
||||
} else { |
||||
this.$message({ |
||||
message: '删除失败，请联系管理员', |
||||
type: 'error' |
||||
}); |
||||
} |
||||
}, { |
||||
"methods": "DELETE", |
||||
"app_id": this.currentapp.app_id, |
||||
"release_id": app.release_id, |
||||
}); |
||||
}); |
||||
|
||||
}, |
||||
updatereleaseappFun(params) { |
||||
releaseapputils(data => { |
||||
if (data.code === 1000) { |
||||
this.$message({ |
||||
message: '更新成功', |
||||
type: 'success' |
||||
}); |
||||
this.release_apps = data.data.release_apps; |
||||
this.currentapp = data.data.currentapp; |
||||
// this.getapptimelineFun(); |
||||
// this.currentapp["icon_url"] = this.currentapp.master_release.icon_url; |
||||
// this.$store.dispatch('doucurrentapp', this.currentapp); |
||||
|
||||
} else { |
||||
this.$message({ |
||||
message: '更新失败，请联系管理员', |
||||
type: 'error' |
||||
}); |
||||
} |
||||
}, params |
||||
); |
||||
}, |
||||
make_master_release(app) { |
||||
this.updatereleaseappFun({ |
||||
"methods": "PUT", |
||||
"app_id": this.currentapp.app_id, |
||||
"release_id": app.release_id, |
||||
"data": { |
||||
"make_master": app.release_id |
||||
} |
||||
'app_id': this.currentapp.app_id |
||||
}) |
||||
}, |
||||
previewRelase(app) { |
||||
let routeData = this.$router.resolve({ |
||||
name: 'FirDownload', |
||||
params: {short: this.currentapp.short}, |
||||
query: {release_id: app.release_id} |
||||
}); |
||||
let p_url = routeData.href; |
||||
if (this.currentapp.preview_url && this.currentapp.preview_url.length > 6) { |
||||
p_url = this.currentapp.preview_url + p_url |
||||
} |
||||
window.open(p_url, 'target', ''); |
||||
|
||||
}, |
||||
getapptimelineFun(act = '') { |
||||
const loading = this.$loading({ |
||||
lock: true, |
||||
text: '加载中', |
||||
spinner: 'el-icon-loading', |
||||
// background: 'rgba(0, 0, 0, 0.7)' |
||||
}); |
||||
if (act === 'more') { |
||||
this.set_query_page(); |
||||
} else { |
||||
this.release_apps = []; |
||||
this.query = {'page': 1, size: 10}; |
||||
} |
||||
releaseapputils(data => { |
||||
if (data.code === 1000) { |
||||
this.currentapp = data.data.currentapp; |
||||
this.has_next = data.data.has_next; |
||||
this.release_apps = this.release_apps.concat(data.data.release_apps); |
||||
} else if (data.code === 1003) { |
||||
loading.close(); |
||||
this.$router.push({name: 'FirApps'}); |
||||
} |
||||
loading.close(); |
||||
}, { |
||||
"methods": "GET", |
||||
"app_id": this.$route.params.id, |
||||
"release_id": "timeline", |
||||
"data": { |
||||
"page": this.query.page, |
||||
"size": this.query.size |
||||
} |
||||
}) |
||||
}, |
||||
del_release_app(app) { |
||||
//发送删除APP的操作 |
||||
this.$confirm('确认删除 ' + this.currentapp.name + '下 当前 release 版本吗?') |
||||
// eslint-disable-next-line no-unused-vars |
||||
.then(res => { |
||||
let loadingobj = this.$loading({ |
||||
lock: true, |
||||
text: '操作中，请耐心等待', |
||||
spinner: 'el-icon-loading', |
||||
// background: 'rgba(0, 0, 0, 0.7)' |
||||
}); |
||||
releaseapputils(data => { |
||||
loadingobj.close(); |
||||
if (data.code === 1000) { |
||||
this.$message({ |
||||
message: '删除成功', |
||||
type: 'success' |
||||
}); |
||||
this.getapptimelineFun(); |
||||
|
||||
}, |
||||
endEdit(app, type) { |
||||
if (type === 'changelog') { |
||||
app.editing.changelog = false; |
||||
|
||||
} else if (type === 'binary_url') { |
||||
app.editing.binary_url = false; |
||||
} |
||||
}, |
||||
updateChangelog(app, type) { |
||||
if (type === 'changelog') { |
||||
this.activity.editing.changelog = false; |
||||
this.updatas = {"changelog": app.changelog} |
||||
} else if (type === 'binary_url') { |
||||
this.activity.editing.binary_url = false; |
||||
this.updatas = {"binary_url": app.binary_url} |
||||
} |
||||
this.updatereleaseappFun({ |
||||
"methods": "PUT", |
||||
"app_id": this.currentapp.app_id, |
||||
"release_id": app.release_id, |
||||
"data": this.updatas |
||||
} else { |
||||
this.$message({ |
||||
message: '删除失败，请联系管理员', |
||||
type: 'error' |
||||
}); |
||||
this.updatas = {} |
||||
}, |
||||
startEdit(app, type) { |
||||
if (type === 'changelog') { |
||||
|
||||
app.editing.changelog = true; |
||||
} else if (type === 'binary_url') { |
||||
app.editing.binary_url = true; |
||||
} |
||||
} |
||||
}, { |
||||
"methods": "DELETE", |
||||
"app_id": this.currentapp.app_id, |
||||
"release_id": app.release_id, |
||||
}); |
||||
}); |
||||
|
||||
}, |
||||
updatereleaseappFun(params) { |
||||
releaseapputils(data => { |
||||
if (data.code === 1000) { |
||||
this.$message({ |
||||
message: '更新成功', |
||||
type: 'success' |
||||
}); |
||||
this.release_apps = data.data.release_apps; |
||||
this.currentapp = data.data.currentapp; |
||||
// this.getapptimelineFun(); |
||||
// this.currentapp["icon_url"] = this.currentapp.master_release.icon_url; |
||||
// this.$store.dispatch('doucurrentapp', this.currentapp); |
||||
|
||||
} else { |
||||
this.$message({ |
||||
message: '更新失败，请联系管理员', |
||||
type: 'error' |
||||
}); |
||||
} |
||||
|
||||
}, created() { |
||||
|
||||
}, watch: {}, |
||||
computed: {}, mounted() { |
||||
this.$store.dispatch('doappInfoIndex', [[5, 5], [5, 5]]); |
||||
this.getapptimelineFun(); |
||||
}, filters: { |
||||
downcontent(content) { |
||||
if (content) { |
||||
return content |
||||
} else { |
||||
return "修改下载地址" |
||||
} |
||||
}, |
||||
formatdatatimeline: function (timestr) { |
||||
return timestr.split("T")[0]; |
||||
}, |
||||
formattimeline: function (timestr) { |
||||
return timestr.split(".")[0].split("T")[1]; |
||||
}, |
||||
getiOStype: function (type) { |
||||
let ftype = ''; |
||||
if (type === 1) { |
||||
ftype = '内测版' |
||||
} else if (type === 2) { |
||||
ftype = '企业版' |
||||
} |
||||
return ftype |
||||
}, |
||||
}, params |
||||
); |
||||
}, |
||||
make_master_release(app) { |
||||
this.updatereleaseappFun({ |
||||
"methods": "PUT", |
||||
"app_id": this.currentapp.app_id, |
||||
"release_id": app.release_id, |
||||
"data": { |
||||
"make_master": app.release_id |
||||
} |
||||
}); |
||||
|
||||
}, |
||||
endEdit(app, type) { |
||||
if (type === 'changelog') { |
||||
app.editing.changelog = false; |
||||
|
||||
} else if (type === 'binary_url') { |
||||
app.editing.binary_url = false; |
||||
} |
||||
}, |
||||
updateChangelog(app, type) { |
||||
if (type === 'changelog') { |
||||
this.activity.editing.changelog = false; |
||||
this.updatas = {"changelog": app.changelog} |
||||
} else if (type === 'binary_url') { |
||||
this.activity.editing.binary_url = false; |
||||
this.updatas = {"binary_url": app.binary_url} |
||||
} |
||||
this.updatereleaseappFun({ |
||||
"methods": "PUT", |
||||
"app_id": this.currentapp.app_id, |
||||
"release_id": app.release_id, |
||||
"data": this.updatas |
||||
}); |
||||
this.updatas = {} |
||||
}, |
||||
startEdit(app, type) { |
||||
if (type === 'changelog') { |
||||
|
||||
app.editing.changelog = true; |
||||
} else if (type === 'binary_url') { |
||||
app.editing.binary_url = true; |
||||
} |
||||
} |
||||
|
||||
}, created() { |
||||
|
||||
}, watch: {}, |
||||
computed: {}, mounted() { |
||||
this.$store.dispatch('doappInfoIndex', [[5, 5], [5, 5]]); |
||||
this.getapptimelineFun(); |
||||
}, filters: { |
||||
downcontent(content) { |
||||
if (content) { |
||||
return content |
||||
} else { |
||||
return "修改下载地址" |
||||
} |
||||
}, |
||||
formatdatatimeline: function (timestr) { |
||||
return timestr.split("T")[0]; |
||||
}, |
||||
formattimeline: function (timestr) { |
||||
return timestr.split(".")[0].split("T")[1]; |
||||
}, |
||||
getiOStype: function (type) { |
||||
let ftype = ''; |
||||
if (type === 1) { |
||||
ftype = '内测版' |
||||
} else if (type === 2) { |
||||
ftype = '企业版' |
||||
} |
||||
return ftype |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
|
||||
.directive-view-release { |
||||
position: relative; |
||||
padding-left: 80px; |
||||
color: #9b9b9b; |
||||
} |
||||
|
||||
.directive-view-release > i { |
||||
display: -webkit-box; |
||||
display: -ms-flexbox; |
||||
display: flex; |
||||
height: 50px; |
||||
-webkit-box-align: center; |
||||
-ms-flex-align: center; |
||||
align-items: center; |
||||
-webkit-box-pack: center; |
||||
-ms-flex-pack: center; |
||||
justify-content: center; |
||||
position: absolute; |
||||
left: 0; |
||||
z-index: 2; |
||||
width: 50px; |
||||
border: 1px solid rgba(151, 151, 151, .2); |
||||
border-radius: 50%; |
||||
background-color: #f6f6f6; |
||||
text-align: center; |
||||
font-size: 22px |
||||
} |
||||
|
||||
.directive-view-release > i:before { |
||||
display: inline-block; |
||||
margin-top: 2px; |
||||
margin-left: 2px |
||||
} |
||||
|
||||
.directive-view-release .release-metainfo { |
||||
margin-top: 2px |
||||
} |
||||
|
||||
.directive-view-release .release-metainfo small { |
||||
display: inline-block; |
||||
vertical-align: middle; |
||||
margin: 8px 0; |
||||
line-height: 14px |
||||
} |
||||
|
||||
.directive-view-release .release-metainfo small i, .directive-view-release .release-metainfo small span { |
||||
display: inline-block; |
||||
vertical-align: middle |
||||
} |
||||
|
||||
.directive-view-release .release-metainfo small i { |
||||
margin-right: 2px; |
||||
line-height: 14px |
||||
} |
||||
|
||||
.directive-view-release > b { |
||||
display: inline-block; |
||||
vertical-align: middle; |
||||
margin-right: 30px; |
||||
color: #4a4a4a; |
||||
font-weight: 400; |
||||
font-size: 20px |
||||
} |
||||
|
||||
.directive-view-release pre, .directive-view-release textarea { |
||||
margin: 14px 0; |
||||
padding: 0; |
||||
border: 0; |
||||
background-color: transparent; |
||||
color: #4a4a4a; |
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif |
||||
} |
||||
|
||||
.directive-view-release textarea { |
||||
padding: 12px 16px; |
||||
width: 500px; |
||||
height: 120px; |
||||
border-radius: 5px; |
||||
resize: none; |
||||
border: 1px solid #bdc6c7; |
||||
color: #555; |
||||
font-size: 16px |
||||
} |
||||
|
||||
.directive-view-release .tooltip-top { |
||||
position: relative; |
||||
overflow: visible; |
||||
color: #9b9b9b; |
||||
} |
||||
|
||||
|
||||
.directive-view-release .release-actions { |
||||
margin-top: 10px; |
||||
position: relative |
||||
} |
||||
|
||||
.directive-view-release .release-actions a, .directive-view-release .release-actions button { |
||||
display: inline-block; |
||||
vertical-align: middle; |
||||
margin-right: 8px; |
||||
background-color: transparent; |
||||
border: 1px solid; |
||||
overflow: hidden; |
||||
border-radius: 17px; |
||||
padding: 4px 10px |
||||
} |
||||
|
||||
.directive-view-release .release-actions .tooltip-top { |
||||
overflow: visible; |
||||
position: relative |
||||
} |
||||
|
||||
.directive-view-release .release-actions a i, .directive-view-release .release-actions button i { |
||||
display: inline-block; |
||||
vertical-align: middle |
||||
} |
||||
|
||||
.directive-view-release .release-actions a.btn-save, .directive-view-release .release-actions button.btn-save { |
||||
border-color: #3d6df8; |
||||
background-color: #92c1f8; |
||||
color: #fff |
||||
} |
||||
|
||||
.directive-view-release .release-actions a.btn-cancel, .directive-view-release .release-actions button.btn-cancel { |
||||
border: 0; |
||||
} |
||||
|
||||
.directive-view-release .release-actions a.btn-cancel:hover, .directive-view-release .release-actions button.btn-cancel:hover { |
||||
color: #686868 |
||||
} |
||||
|
||||
.directive-view-release .release-actions a { |
||||
color: #9b9b9b |
||||
} |
||||
|
||||
.directive-view-release .release-actions a:focus, .directive-view-release .release-actions a:hover { |
||||
text-decoration: none |
||||
} |
||||
|
||||
|
||||
.directive-view-release .release-actions .has-text i { |
||||
border-right: 1px solid |
||||
} |
||||
|
||||
.directive-view-release .release-actions.editing { |
||||
margin-top: 0; |
||||
text-align: right; |
||||
width: 500px |
||||
} |
||||
|
||||
.time-line-more { |
||||
background: #F6F6F6; |
||||
border: 1px solid; |
||||
position: relative; |
||||
z-index: 99; |
||||
width: 160px; |
||||
padding: 10px 0; |
||||
border-radius: 40px; |
||||
margin-top: 10px; |
||||
} |
||||
.directive-view-release { |
||||
position: relative; |
||||
padding-left: 80px; |
||||
color: #9b9b9b; |
||||
} |
||||
|
||||
.directive-view-release > i { |
||||
display: -webkit-box; |
||||
display: -ms-flexbox; |
||||
display: flex; |
||||
height: 50px; |
||||
-webkit-box-align: center; |
||||
-ms-flex-align: center; |
||||
align-items: center; |
||||
-webkit-box-pack: center; |
||||
-ms-flex-pack: center; |
||||
justify-content: center; |
||||
position: absolute; |
||||
left: 0; |
||||
z-index: 2; |
||||
width: 50px; |
||||
border: 1px solid rgba(151, 151, 151, .2); |
||||
border-radius: 50%; |
||||
background-color: #f6f6f6; |
||||
text-align: center; |
||||
font-size: 22px |
||||
} |
||||
|
||||
.directive-view-release > i:before { |
||||
display: inline-block; |
||||
margin-top: 2px; |
||||
margin-left: 2px |
||||
} |
||||
|
||||
.directive-view-release .release-metainfo { |
||||
margin-top: 2px |
||||
} |
||||
|
||||
.directive-view-release .release-metainfo small { |
||||
display: inline-block; |
||||
vertical-align: middle; |
||||
margin: 8px 0; |
||||
line-height: 14px |
||||
} |
||||
|
||||
.directive-view-release .release-metainfo small i, .directive-view-release .release-metainfo small span { |
||||
display: inline-block; |
||||
vertical-align: middle |
||||
} |
||||
|
||||
.directive-view-release .release-metainfo small i { |
||||
margin-right: 2px; |
||||
line-height: 14px |
||||
} |
||||
|
||||
.directive-view-release > b { |
||||
display: inline-block; |
||||
vertical-align: middle; |
||||
margin-right: 30px; |
||||
color: #4a4a4a; |
||||
font-weight: 400; |
||||
font-size: 20px |
||||
} |
||||
|
||||
.directive-view-release pre, .directive-view-release textarea { |
||||
margin: 14px 0; |
||||
padding: 0; |
||||
border: 0; |
||||
background-color: transparent; |
||||
color: #4a4a4a; |
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif |
||||
} |
||||
|
||||
.directive-view-release textarea { |
||||
padding: 12px 16px; |
||||
width: 500px; |
||||
height: 120px; |
||||
border-radius: 5px; |
||||
resize: none; |
||||
border: 1px solid #bdc6c7; |
||||
color: #555; |
||||
font-size: 16px |
||||
} |
||||
|
||||
.directive-view-release .tooltip-top { |
||||
position: relative; |
||||
overflow: visible; |
||||
color: #9b9b9b; |
||||
} |
||||
|
||||
|
||||
.directive-view-release .release-actions { |
||||
margin-top: 10px; |
||||
position: relative |
||||
} |
||||
|
||||
.directive-view-release .release-actions a, .directive-view-release .release-actions button { |
||||
display: inline-block; |
||||
vertical-align: middle; |
||||
margin-right: 8px; |
||||
background-color: transparent; |
||||
border: 1px solid; |
||||
overflow: hidden; |
||||
border-radius: 17px; |
||||
padding: 4px 10px |
||||
} |
||||
|
||||
.directive-view-release .release-actions .tooltip-top { |
||||
overflow: visible; |
||||
position: relative |
||||
} |
||||
|
||||
.directive-view-release .release-actions a i, .directive-view-release .release-actions button i { |
||||
display: inline-block; |
||||
vertical-align: middle |
||||
} |
||||
|
||||
.directive-view-release .release-actions a.btn-save, .directive-view-release .release-actions button.btn-save { |
||||
border-color: #3d6df8; |
||||
background-color: #92c1f8; |
||||
color: #fff |
||||
} |
||||
|
||||
.directive-view-release .release-actions a.btn-cancel, .directive-view-release .release-actions button.btn-cancel { |
||||
border: 0; |
||||
} |
||||
|
||||
.directive-view-release .release-actions a.btn-cancel:hover, .directive-view-release .release-actions button.btn-cancel:hover { |
||||
color: #686868 |
||||
} |
||||
|
||||
.directive-view-release .release-actions a { |
||||
color: #9b9b9b |
||||
} |
||||
|
||||
.directive-view-release .release-actions a:focus, .directive-view-release .release-actions a:hover { |
||||
text-decoration: none |
||||
} |
||||
|
||||
|
||||
.directive-view-release .release-actions .has-text i { |
||||
border-right: 1px solid |
||||
} |
||||
|
||||
.directive-view-release .release-actions.editing { |
||||
margin-top: 0; |
||||
text-align: right; |
||||
width: 500px |
||||
} |
||||
|
||||
.time-line-more { |
||||
background: #F6F6F6; |
||||
border: 1px solid; |
||||
position: relative; |
||||
z-index: 99; |
||||
width: 160px; |
||||
padding: 10px 0; |
||||
border-radius: 40px; |
||||
margin-top: 10px; |
||||
} |
||||
</style> |
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,114 +1,115 @@ |
||||
<template> |
||||
<transition :name="transitionName"> |
||||
<div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop"> |
||||
<svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" |
||||
class="Icon Icon--backToTopArrow" aria-hidden="true" style="height:16px;width:16px"> |
||||
<path d="M12.036 15.59a1 1 0 0 1-.997.995H5.032a.996.996 0 0 1-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z"/> |
||||
</svg> |
||||
</div> |
||||
</transition> |
||||
<transition :name="transitionName"> |
||||
<div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop"> |
||||
<svg aria-hidden="true" class="Icon Icon--backToTopArrow" height="16" style="height:16px;width:16px" |
||||
viewBox="0 0 17 17" width="16" xmlns="http://www.w3.org/2000/svg"> |
||||
<path |
||||
d="M12.036 15.59a1 1 0 0 1-.997.995H5.032a.996.996 0 0 1-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z"/> |
||||
</svg> |
||||
</div> |
||||
</transition> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'BackToTop', |
||||
props: { |
||||
visibilityHeight: { |
||||
type: Number, |
||||
default: 400 |
||||
}, |
||||
backPosition: { |
||||
type: Number, |
||||
default: 0 |
||||
}, |
||||
customStyle: { |
||||
type: Object, |
||||
default: function () { |
||||
return { |
||||
right: '50px', |
||||
bottom: '50px', |
||||
width: '40px', |
||||
height: '40px', |
||||
'border-radius': '4px', |
||||
'line-height': '45px', |
||||
background: '#e7eaf1' |
||||
} |
||||
} |
||||
}, |
||||
transitionName: { |
||||
type: String, |
||||
default: 'fade' |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
visible: false, |
||||
interval: null, |
||||
isMoving: false |
||||
} |
||||
}, |
||||
mounted() { |
||||
window.addEventListener('scroll', this.handleScroll) |
||||
}, |
||||
beforeDestroy() { |
||||
window.removeEventListener('scroll', this.handleScroll) |
||||
if (this.interval) { |
||||
clearInterval(this.interval) |
||||
} |
||||
}, |
||||
methods: { |
||||
handleScroll() { |
||||
this.visible = window.pageYOffset > this.visibilityHeight |
||||
}, |
||||
backToTop() { |
||||
if (this.isMoving) return |
||||
const start = window.pageYOffset |
||||
let i = 0 |
||||
this.isMoving = true |
||||
this.interval = setInterval(() => { |
||||
const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500)) |
||||
if (next <= this.backPosition) { |
||||
window.scrollTo(0, this.backPosition) |
||||
clearInterval(this.interval) |
||||
this.isMoving = false |
||||
} else { |
||||
window.scrollTo(0, next) |
||||
} |
||||
i++ |
||||
}, 16.7) |
||||
}, |
||||
easeInOutQuad(t, b, c, d) { |
||||
if ((t /= d / 2) < 1) return c / 2 * t * t + b |
||||
return -c / 2 * (--t * (t - 2) - 1) + b |
||||
} |
||||
export default { |
||||
name: 'BackToTop', |
||||
props: { |
||||
visibilityHeight: { |
||||
type: Number, |
||||
default: 400 |
||||
}, |
||||
backPosition: { |
||||
type: Number, |
||||
default: 0 |
||||
}, |
||||
customStyle: { |
||||
type: Object, |
||||
default: function () { |
||||
return { |
||||
right: '50px', |
||||
bottom: '50px', |
||||
width: '40px', |
||||
height: '40px', |
||||
'border-radius': '4px', |
||||
'line-height': '45px', |
||||
background: '#e7eaf1' |
||||
} |
||||
} |
||||
}, |
||||
transitionName: { |
||||
type: String, |
||||
default: 'fade' |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
visible: false, |
||||
interval: null, |
||||
isMoving: false |
||||
} |
||||
}, |
||||
mounted() { |
||||
window.addEventListener('scroll', this.handleScroll) |
||||
}, |
||||
beforeDestroy() { |
||||
window.removeEventListener('scroll', this.handleScroll) |
||||
if (this.interval) { |
||||
clearInterval(this.interval) |
||||
} |
||||
}, |
||||
methods: { |
||||
handleScroll() { |
||||
this.visible = window.pageYOffset > this.visibilityHeight |
||||
}, |
||||
backToTop() { |
||||
if (this.isMoving) return |
||||
const start = window.pageYOffset |
||||
let i = 0 |
||||
this.isMoving = true |
||||
this.interval = setInterval(() => { |
||||
const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500)) |
||||
if (next <= this.backPosition) { |
||||
window.scrollTo(0, this.backPosition) |
||||
clearInterval(this.interval) |
||||
this.isMoving = false |
||||
} else { |
||||
window.scrollTo(0, next) |
||||
} |
||||
i++ |
||||
}, 16.7) |
||||
}, |
||||
easeInOutQuad(t, b, c, d) { |
||||
if ((t /= d / 2) < 1) return c / 2 * t * t + b |
||||
return -c / 2 * (--t * (t - 2) - 1) + b |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.back-to-ceiling { |
||||
position: fixed; |
||||
display: inline-block; |
||||
text-align: center; |
||||
cursor: pointer; |
||||
} |
||||
.back-to-ceiling { |
||||
position: fixed; |
||||
display: inline-block; |
||||
text-align: center; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.back-to-ceiling:hover { |
||||
background: #d5dbe7; |
||||
} |
||||
.back-to-ceiling:hover { |
||||
background: #d5dbe7; |
||||
} |
||||
|
||||
.fade-enter-active, |
||||
.fade-leave-active { |
||||
transition: opacity .5s; |
||||
} |
||||
.fade-enter-active, |
||||
.fade-leave-active { |
||||
transition: opacity .5s; |
||||
} |
||||
|
||||
.fade-enter, |
||||
.fade-leave-to { |
||||
opacity: 0 |
||||
} |
||||
.fade-enter, |
||||
.fade-leave-to { |
||||
opacity: 0 |
||||
} |
||||
|
||||
.back-to-ceiling .Icon { |
||||
fill: #9aaabf; |
||||
background: none; |
||||
} |
||||
.back-to-ceiling .Icon { |
||||
fill: #9aaabf; |
||||
background: none; |
||||
} |
||||
</style> |
||||
|
||||
@ -1,314 +1,314 @@ |
||||
<template> |
||||
<transition :name="transitionName"> |
||||
<div> |
||||
<div style="margin: 5px 20px"> |
||||
<el-steps :active="active" finish-status="success"> |
||||
<el-step title="步骤 1"> |
||||
<transition :name="transitionName"> |
||||
<div> |
||||
<div style="margin: 5px 20px"> |
||||
<el-steps :active="active" finish-status="success"> |
||||
<el-step title="步骤 1"> |
||||
|
||||
</el-step> |
||||
<el-step title="步骤 2"> |
||||
</el-step> |
||||
<el-step title="步骤 3"/> |
||||
</el-steps> |
||||
<div style="margin-top: 20px"> |
||||
<div v-if="active===1"> |
||||
<h2>你的二级域名</h2> |
||||
<el-input clearable autofocus v-model="domain_name"/> |
||||
</div> |
||||
<div v-else-if="active===2"> |
||||
<div style="text-align: center;margin: 20px 0"> |
||||
<h3>还差一步绑定成功</h3> |
||||
</div> |
||||
请联系域名管理员，前往 <strong>{{ domain_name }}</strong> 域名 DNS 管理后台添加如下 CNAME 记录。 |
||||
<el-table |
||||
:data="domain_tData" |
||||
border |
||||
stripe |
||||
style="width: 100%;margin-top: 20px"> |
||||
<el-table-column |
||||
prop="type" |
||||
label="记录类型" |
||||
align="center" |
||||
width="100"> |
||||
</el-table-column> |
||||
<el-table-column |
||||
prop="host" |
||||
align="center" |
||||
label="主机记录" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<el-tooltip content="点击复制到剪贴板"> |
||||
<el-link v-if="scope.row.host" :underline="false" |
||||
v-clipboard:copy="scope.row.host" |
||||
v-clipboard:success="copy_success">{{ scope.row.host }} |
||||
</el-link> |
||||
</el-tooltip> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
prop="dns" |
||||
align="center" |
||||
label="记录值" |
||||
width="300"> |
||||
<template slot-scope="scope"> |
||||
<el-tooltip content="点击复制到剪贴板"> |
||||
<el-link v-if="scope.row.dns" :underline="false" |
||||
v-clipboard:copy="scope.row.dns" |
||||
v-clipboard:success="copy_success">{{ scope.row.dns }} |
||||
</el-link> |
||||
</el-tooltip> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<el-alert title="请在域名DNS配置成功后，点击“下一步”按钮" |
||||
style="margin-top: 30px" |
||||
type="warning" |
||||
:closable="false" |
||||
show-icon/> |
||||
</div> |
||||
<div v-else-if="active===3"> |
||||
<div v-if="!bind_status"> |
||||
<div style="text-align: center;margin: 20px 0"> |
||||
<el-link :underline="false" type="danger" |
||||
style="font-size: x-large">绑定失败 |
||||
</el-link> |
||||
</div> |
||||
|
||||
<p style="margin: 10px 0">{{b_t_msg}}正在绑定域名：<strong>{{ domain_name }}</strong></p> |
||||
<el-row> |
||||
<el-col :span="16"><p>系统未检出到您的CNAME记录，请检查您的配置。</p></el-col> |
||||
<el-col :span="6"> |
||||
<el-button type="danger" size="small" plain style="margin-top: 8px" |
||||
@click="remove_domain"> |
||||
解除绑定 |
||||
</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
</div> |
||||
</el-step> |
||||
<el-step title="步骤 2"> |
||||
</el-step> |
||||
<el-step title="步骤 3"/> |
||||
</el-steps> |
||||
<div style="margin-top: 20px"> |
||||
<div v-if="active===1"> |
||||
<h2>你的二级域名</h2> |
||||
<el-input v-model="domain_name" autofocus clearable/> |
||||
</div> |
||||
<div v-else-if="active===2"> |
||||
<div style="text-align: center;margin: 20px 0"> |
||||
<h3>还差一步绑定成功</h3> |
||||
</div> |
||||
请联系域名管理员，前往 <strong>{{ domain_name }}</strong> 域名 DNS 管理后台添加如下 CNAME 记录。 |
||||
<el-table |
||||
:data="domain_tData" |
||||
border |
||||
stripe |
||||
style="width: 100%;margin-top: 20px"> |
||||
<el-table-column |
||||
align="center" |
||||
label="记录类型" |
||||
prop="type" |
||||
width="100"> |
||||
</el-table-column> |
||||
<el-table-column |
||||
align="center" |
||||
label="主机记录" |
||||
prop="host" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<el-tooltip content="点击复制到剪贴板"> |
||||
<el-link v-if="scope.row.host" v-clipboard:copy="scope.row.host" |
||||
v-clipboard:success="copy_success" |
||||
:underline="false">{{ scope.row.host }} |
||||
</el-link> |
||||
</el-tooltip> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
align="center" |
||||
label="记录值" |
||||
prop="dns" |
||||
width="300"> |
||||
<template slot-scope="scope"> |
||||
<el-tooltip content="点击复制到剪贴板"> |
||||
<el-link v-if="scope.row.dns" v-clipboard:copy="scope.row.dns" |
||||
v-clipboard:success="copy_success" |
||||
:underline="false">{{ scope.row.dns }} |
||||
</el-link> |
||||
</el-tooltip> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<el-alert :closable="false" |
||||
show-icon |
||||
style="margin-top: 30px" |
||||
title="请在域名DNS配置成功后，点击“下一步”按钮" |
||||
type="warning"/> |
||||
</div> |
||||
<div v-else-if="active===3"> |
||||
<div v-if="!bind_status"> |
||||
<div style="text-align: center;margin: 20px 0"> |
||||
<el-link :underline="false" style="font-size: x-large" |
||||
type="danger">绑定失败 |
||||
</el-link> |
||||
</div> |
||||
|
||||
<div v-else> |
||||
<div style="text-align: center;margin: 20px 0"> |
||||
<el-link :underline="false" type="success" |
||||
style="font-size: x-large">绑定成功 |
||||
</el-link> |
||||
</div> |
||||
<p style="margin: 10px 0">{{ b_t_msg }}正在绑定域名：<strong>{{ domain_name }}</strong></p> |
||||
<el-row> |
||||
<el-col :span="16"><p>系统未检出到您的CNAME记录，请检查您的配置。</p></el-col> |
||||
<el-col :span="6"> |
||||
<el-button plain size="small" style="margin-top: 8px" type="danger" |
||||
@click="remove_domain"> |
||||
解除绑定 |
||||
</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
</div> |
||||
|
||||
<el-row> |
||||
<el-col :span="16"><p>{{b_t_msg}}已绑定域名：<strong>{{ domain_name }}</strong></p></el-col> |
||||
<el-col :span="6"> |
||||
<el-button type="danger" size="small" plain style="margin-top: 8px" |
||||
@click="remove_domain"> |
||||
解除绑定 |
||||
</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
<div v-else> |
||||
<div style="text-align: center;margin: 20px 0"> |
||||
<el-link :underline="false" style="font-size: x-large" |
||||
type="success">绑定成功 |
||||
</el-link> |
||||
</div> |
||||
|
||||
</div> |
||||
<el-table |
||||
:data="domain_tData" |
||||
border |
||||
stripe |
||||
style="width: 100%;margin-top: 20px"> |
||||
<el-table-column |
||||
prop="type" |
||||
label="记录类型" |
||||
align="center" |
||||
width="100"> |
||||
</el-table-column> |
||||
<el-table-column |
||||
prop="host" |
||||
align="center" |
||||
label="主机记录" |
||||
> |
||||
</el-table-column> |
||||
<el-table-column |
||||
prop="dns" |
||||
align="center" |
||||
label="记录值" |
||||
width="300"> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div v-if="!bind_status" style="text-align: center;margin: 30px 0"> |
||||
<el-button @click="check_cname" type="success" plain>已经修改配置，再次检查绑定</el-button> |
||||
</div> |
||||
</div> |
||||
<el-row> |
||||
<el-col :span="16"><p>{{ b_t_msg }}已绑定域名：<strong>{{ domain_name }}</strong></p></el-col> |
||||
<el-col :span="6"> |
||||
<el-button plain size="small" style="margin-top: 8px" type="danger" |
||||
@click="remove_domain"> |
||||
解除绑定 |
||||
</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
</div> |
||||
</div> |
||||
<div v-if="active!==3" style="margin:40px 20px 0;text-align: right"> |
||||
<el-button @click="last" |
||||
:disabled="bind_status|| active===1 ">上一步 |
||||
</el-button> |
||||
<el-button v-if="force_bind" @click="next(1)">强制绑定</el-button> |
||||
<el-button v-else @click="next(0)">下一步</el-button> |
||||
|
||||
<el-table |
||||
:data="domain_tData" |
||||
border |
||||
stripe |
||||
style="width: 100%;margin-top: 20px"> |
||||
<el-table-column |
||||
align="center" |
||||
label="记录类型" |
||||
prop="type" |
||||
width="100"> |
||||
</el-table-column> |
||||
<el-table-column |
||||
align="center" |
||||
label="主机记录" |
||||
prop="host" |
||||
> |
||||
</el-table-column> |
||||
<el-table-column |
||||
align="center" |
||||
label="记录值" |
||||
prop="dns" |
||||
width="300"> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div v-if="!bind_status" style="text-align: center;margin: 30px 0"> |
||||
<el-button plain type="success" @click="check_cname">已经修改配置，再次检查绑定</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</transition> |
||||
</div> |
||||
<div v-if="active!==3" style="margin:40px 20px 0;text-align: right"> |
||||
<el-button :disabled="bind_status|| active===1 " |
||||
@click="last">上一步 |
||||
</el-button> |
||||
<el-button v-if="force_bind" @click="next(1)">强制绑定</el-button> |
||||
<el-button v-else @click="next(0)">下一步</el-button> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
</transition> |
||||
</template> |
||||
|
||||
<script> |
||||
import {domainFun} from "@/restful"; |
||||
import {domainFun} from "@/restful"; |
||||
|
||||
export default { |
||||
name: 'BindDomain', |
||||
props: { |
||||
transitionName: { |
||||
type: String, |
||||
default: 'bind-domain' |
||||
}, |
||||
app_id: { |
||||
type: String, |
||||
default: undefined |
||||
}, |
||||
domain_type: { |
||||
type: Number, |
||||
default: 1 |
||||
}, |
||||
domain_state: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
active: 1, |
||||
bind_status: false, |
||||
bind_domain_sure: true, |
||||
domain_name: '', |
||||
domain_tData: [{'type': 'CNAME', 'host': 'xxx', 'dns': 'demo.xxx.cn'}], |
||||
force_bind: false, |
||||
b_t_msg: '您的账户', |
||||
export default { |
||||
name: 'BindDomain', |
||||
props: { |
||||
transitionName: { |
||||
type: String, |
||||
default: 'bind-domain' |
||||
}, |
||||
app_id: { |
||||
type: String, |
||||
default: undefined |
||||
}, |
||||
domain_type: { |
||||
type: Number, |
||||
default: 1 |
||||
}, |
||||
domain_state: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
active: 1, |
||||
bind_status: false, |
||||
bind_domain_sure: true, |
||||
domain_name: '', |
||||
domain_tData: [{'type': 'CNAME', 'host': 'xxx', 'dns': 'demo.xxx.cn'}], |
||||
force_bind: false, |
||||
b_t_msg: '您的账户', |
||||
} |
||||
}, |
||||
mounted() { |
||||
if (this.domain_type === 2) { |
||||
this.b_t_msg = '您的应用' |
||||
} |
||||
this.bind_click(); |
||||
}, |
||||
beforeDestroy() { |
||||
this.bind_domain_sure = false; |
||||
}, |
||||
methods: { |
||||
copy_success() { |
||||
this.$message.success('复制剪切板成功'); |
||||
}, |
||||
check_cname() { |
||||
domainFun(data => { |
||||
if (data.code === 1000) { |
||||
if (this.active++ > 2) this.active = 3; |
||||
this.bind_status = true; |
||||
if (!this.app_id) { |
||||
if (this.domain_type === 1) { |
||||
this.$store.dispatch("dodomainshow", false); |
||||
} |
||||
}, |
||||
mounted() { |
||||
if (this.domain_type === 2) { |
||||
this.b_t_msg = '您的应用' |
||||
} |
||||
if (this.domain_state) { |
||||
this.$store.dispatch("dosetdomainstate", true); |
||||
} |
||||
} else { |
||||
if (data.code === 1004) { |
||||
this.active = 1; |
||||
this.domain_name = ''; |
||||
} else { |
||||
if (this.active++ > 2) this.active = 3; |
||||
} |
||||
this.bind_status = false; |
||||
this.$message.error("绑定失败 " + data.msg) |
||||
} |
||||
}, {methods: 'PUT', data: {app_id: this.app_id, domain_type: this.domain_type}}) |
||||
}, |
||||
remove_domain() { |
||||
domainFun(data => { |
||||
if (data.code === 1000) { |
||||
this.bind_status = false; |
||||
this.active = 1; |
||||
this.$message.success("解除绑定成功 "); |
||||
if (!this.app_id) { |
||||
if (this.domain_type === 1) { |
||||
this.$store.dispatch("dodomainshow", true); |
||||
} |
||||
this.bind_click(); |
||||
}, |
||||
beforeDestroy() { |
||||
this.bind_domain_sure = false; |
||||
}, |
||||
methods: { |
||||
copy_success() { |
||||
this.$message.success('复制剪切板成功'); |
||||
}, |
||||
check_cname() { |
||||
domainFun(data => { |
||||
if (data.code === 1000) { |
||||
if (this.active++ > 2) this.active = 3; |
||||
this.bind_status = true; |
||||
if (!this.app_id) { |
||||
if (this.domain_type === 1) { |
||||
this.$store.dispatch("dodomainshow", false); |
||||
} |
||||
} |
||||
if (this.domain_state) { |
||||
this.$store.dispatch("dosetdomainstate", true); |
||||
} |
||||
} else { |
||||
if (data.code === 1004) { |
||||
this.active = 1; |
||||
this.domain_name = ''; |
||||
} else { |
||||
if (this.active++ > 2) this.active = 3; |
||||
} |
||||
this.bind_status = false; |
||||
this.$message.error("绑定失败 " + data.msg) |
||||
} |
||||
}, {methods: 'PUT', data: {app_id: this.app_id, domain_type: this.domain_type}}) |
||||
}, |
||||
remove_domain() { |
||||
domainFun(data => { |
||||
if (data.code === 1000) { |
||||
this.bind_status = false; |
||||
this.active = 1; |
||||
this.$message.success("解除绑定成功 "); |
||||
if (!this.app_id) { |
||||
if (this.domain_type === 1) { |
||||
this.$store.dispatch("dodomainshow", true); |
||||
} |
||||
} |
||||
if (this.domain_state) { |
||||
this.$store.dispatch("dosetdomainstate", true); |
||||
} |
||||
} else { |
||||
this.$message.error("解除绑定失败 " + data.msg) |
||||
} |
||||
}, {methods: 'DELETE', data: {app_id: this.app_id, domain_type: this.domain_type}}); |
||||
}, |
||||
bind_click() { |
||||
this.$store.dispatch("dosetdomainstate", false); |
||||
domainFun(data => { |
||||
if (data.code === 1000) { |
||||
if (data.data) { |
||||
if (data.data.domain_name) { |
||||
this.domain_name = data.data.domain_name; |
||||
} |
||||
if (data.data.domain_record) { |
||||
this.format_domain_tData(data.data.domain_record); |
||||
if (this.active++ > 2) this.active = 3; |
||||
} |
||||
if (data.data.is_enable) { |
||||
this.bind_status = true; |
||||
if (this.active++ > 2) this.active = 3; |
||||
} |
||||
this.bind_domain_sure = true; |
||||
} |
||||
} else { |
||||
this.$message.error("绑定失败 " + data.msg) |
||||
} |
||||
}, {methods: 'GET', data: {app_id: this.app_id, domain_type: this.domain_type}}); |
||||
}, |
||||
format_domain_tData(cname_domain) { |
||||
let domain_name_list = this.domain_name.split('.'); |
||||
const d_len = domain_name_list.length; |
||||
if (d_len === 2) { |
||||
this.domain_tData[0].host = '@' |
||||
} else if (d_len > 2) { |
||||
domain_name_list.splice(domain_name_list.length - 2, 2); |
||||
this.domain_tData[0].host = domain_name_list.join(".") |
||||
} |
||||
this.domain_tData[0].dns = cname_domain; |
||||
}, |
||||
next(force_bind) { |
||||
if (this.active === 1) { |
||||
domainFun(data => { |
||||
if (data.code === 1000) { |
||||
if (data.data && data.data.cname_domain) { |
||||
this.format_domain_tData(data.data.cname_domain); |
||||
if (this.active++ > 2) this.active = 3; |
||||
} |
||||
} else { |
||||
this.$message.error("绑定失败 " + data.msg); |
||||
if (data.code === 1011) { |
||||
this.force_bind = true |
||||
} |
||||
} |
||||
}, { |
||||
methods: 'POST', |
||||
data: { |
||||
domain_name: this.domain_name, |
||||
app_id: this.app_id, |
||||
domain_type: this.domain_type, |
||||
force_bind: force_bind |
||||
} |
||||
}) |
||||
} else if (this.active === 2) { |
||||
this.check_cname() |
||||
} |
||||
}, |
||||
last() { |
||||
if (this.active-- < 2) this.active = 1; |
||||
}, |
||||
} |
||||
if (this.domain_state) { |
||||
this.$store.dispatch("dosetdomainstate", true); |
||||
} |
||||
} else { |
||||
this.$message.error("解除绑定失败 " + data.msg) |
||||
} |
||||
} |
||||
}, {methods: 'DELETE', data: {app_id: this.app_id, domain_type: this.domain_type}}); |
||||
}, |
||||
bind_click() { |
||||
this.$store.dispatch("dosetdomainstate", false); |
||||
domainFun(data => { |
||||
if (data.code === 1000) { |
||||
if (data.data) { |
||||
if (data.data.domain_name) { |
||||
this.domain_name = data.data.domain_name; |
||||
} |
||||
if (data.data.domain_record) { |
||||
this.format_domain_tData(data.data.domain_record); |
||||
if (this.active++ > 2) this.active = 3; |
||||
} |
||||
if (data.data.is_enable) { |
||||
this.bind_status = true; |
||||
if (this.active++ > 2) this.active = 3; |
||||
} |
||||
this.bind_domain_sure = true; |
||||
} |
||||
} else { |
||||
this.$message.error("绑定失败 " + data.msg) |
||||
} |
||||
}, {methods: 'GET', data: {app_id: this.app_id, domain_type: this.domain_type}}); |
||||
}, |
||||
format_domain_tData(cname_domain) { |
||||
let domain_name_list = this.domain_name.split('.'); |
||||
const d_len = domain_name_list.length; |
||||
if (d_len === 2) { |
||||
this.domain_tData[0].host = '@' |
||||
} else if (d_len > 2) { |
||||
domain_name_list.splice(domain_name_list.length - 2, 2); |
||||
this.domain_tData[0].host = domain_name_list.join(".") |
||||
} |
||||
this.domain_tData[0].dns = cname_domain; |
||||
}, |
||||
next(force_bind) { |
||||
if (this.active === 1) { |
||||
domainFun(data => { |
||||
if (data.code === 1000) { |
||||
if (data.data && data.data.cname_domain) { |
||||
this.format_domain_tData(data.data.cname_domain); |
||||
if (this.active++ > 2) this.active = 3; |
||||
} |
||||
} else { |
||||
this.$message.error("绑定失败 " + data.msg); |
||||
if (data.code === 1011) { |
||||
this.force_bind = true |
||||
} |
||||
} |
||||
}, { |
||||
methods: 'POST', |
||||
data: { |
||||
domain_name: this.domain_name, |
||||
app_id: this.app_id, |
||||
domain_type: this.domain_type, |
||||
force_bind: force_bind |
||||
} |
||||
}) |
||||
} else if (this.active === 2) { |
||||
this.check_cname() |
||||
} |
||||
}, |
||||
last() { |
||||
if (this.active-- < 2) this.active = 1; |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.dialog-footer { |
||||
.dialog-footer { |
||||
|
||||
} |
||||
} |
||||
</style> |
||||
|
||||
@ -1,69 +1,69 @@ |
||||
<template> |
||||
<div class="ContactUs"> |
||||
<div> |
||||
<h3>联系我们</h3> |
||||
<p style="color:#b2b2b2">Contact us</p> |
||||
</div> |
||||
<div class="ContactUs"> |
||||
<div> |
||||
<h3>联系我们</h3> |
||||
<p style="color:#b2b2b2">Contact us</p> |
||||
</div> |
||||
|
||||
|
||||
<div class="content"> |
||||
<div class="item"><p>技术咨询</p> |
||||
</div> |
||||
<el-divider direction="vertical"/> |
||||
<div class="item"><p>商务合作</p> |
||||
</div> |
||||
<el-divider direction="vertical"/> |
||||
<div class="item"><p style="margin-bottom: 16px">应用举报</p> |
||||
</div> |
||||
<p><b>flyapps@126.com</b></p> |
||||
<el-tooltip content="拿出手机扫描添加微信" style="margin-top: 33px"> |
||||
<el-image :lazy="true" :src="require('@/assets/wxchat.jpg')" style="width: 160px" alt="扫描添加微信"> |
||||
</el-image> |
||||
</el-tooltip> |
||||
<div class="content"> |
||||
<div class="item"><p>技术咨询</p> |
||||
</div> |
||||
<el-divider direction="vertical"/> |
||||
<div class="item"><p>商务合作</p> |
||||
</div> |
||||
<el-divider direction="vertical"/> |
||||
<div class="item"><p style="margin-bottom: 16px">应用举报</p> |
||||
</div> |
||||
<p><b>flyapps@126.com</b></p> |
||||
<el-tooltip content="拿出手机扫描添加微信" style="margin-top: 33px"> |
||||
<el-image :lazy="true" :src="require('@/assets/wxchat.jpg')" alt="扫描添加微信" style="width: 160px"> |
||||
</el-image> |
||||
</el-tooltip> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "FirContact", |
||||
data() { |
||||
return { |
||||
bg_img: require("@/assets/imgs/banner_1.jpg") |
||||
} |
||||
}, |
||||
export default { |
||||
name: "FirContact", |
||||
data() { |
||||
return { |
||||
bg_img: require("@/assets/imgs/banner_1.jpg") |
||||
} |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.ContactUs { |
||||
text-align: center; |
||||
.ContactUs { |
||||
text-align: center; |
||||
|
||||
} |
||||
} |
||||
|
||||
.content { |
||||
width: 942px; |
||||
margin: 80px auto 160px; |
||||
text-align: center; |
||||
} |
||||
.content { |
||||
width: 942px; |
||||
margin: 80px auto 160px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.item { |
||||
display: inline-block; |
||||
font-size: 14px; |
||||
text-align: left; |
||||
} |
||||
.item { |
||||
display: inline-block; |
||||
font-size: 14px; |
||||
text-align: left; |
||||
} |
||||
|
||||
.item p { |
||||
font-size: 16px; |
||||
color: #8C9293; |
||||
} |
||||
.item p { |
||||
font-size: 16px; |
||||
color: #8C9293; |
||||
} |
||||
|
||||
.item p b { |
||||
font-size: 30px; |
||||
color: #313639; |
||||
font-weight: 400; |
||||
letter-spacing: 2.5px; |
||||
} |
||||
.item p b { |
||||
font-size: 30px; |
||||
color: #313639; |
||||
font-weight: 400; |
||||
letter-spacing: 2.5px; |
||||
} |
||||
|
||||
</style> |
||||
|
||||
@ -1,255 +1,255 @@ |
||||
<template> |
||||
<div> |
||||
<div class="main"> |
||||
<div class="top"> |
||||
<el-carousel :interval="5000" arrow="always" height="600px"> |
||||
<el-carousel-item v-for="item in swiperList" :key="item.title"> |
||||
<div :style="{backgroundImage:`url(${item.img})`}" class="bpic"> |
||||
<div class="topplayer-top"> |
||||
<div class="word">{{ item.title }}</div> |
||||
<div class="content">{{ item.content }}</div> |
||||
</div> |
||||
</div> |
||||
</el-carousel-item> |
||||
</el-carousel> |
||||
|
||||
<div> |
||||
<div class="main"> |
||||
<div class="top"> |
||||
<el-carousel :interval="5000" arrow="always" height="600px"> |
||||
<el-carousel-item v-for="item in swiperList" :key="item.title"> |
||||
<div :style="{backgroundImage:`url(${item.img})`}" class="bpic"> |
||||
<div class="topplayer-top"> |
||||
<div class="word">{{ item.title }}</div> |
||||
<div class="content">{{ item.content }}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-carousel-item> |
||||
</el-carousel> |
||||
|
||||
<div id="whyChooseUs"> |
||||
<div style="width: 80%;margin-right: auto; margin-left: auto;"> |
||||
<div class="whyChooseUs-title text-center"> |
||||
<p>为什么选择我们的服务</p> |
||||
<p>THE REASON TO CHOOSING US</p> |
||||
</div> |
||||
<el-row :gutter="24"> |
||||
<el-col :span="6" v-for="(item,index) in serverList" :key="index"> |
||||
<div class="server-block" |
||||
onmouseenter="this.style.color='#28f';this.style.borderColor='#28f'" |
||||
onmouseleave="this.style.color='#666';this.style.borderColor='#ccc'"> |
||||
<img class="center-block" v-lazy="item.logo" alt="logo"> |
||||
<p class="text-center">{{item.title}}</p> |
||||
<div |
||||
class="text-center" |
||||
v-html="item.content" |
||||
onmouseenter="this.style.color='#28f'" |
||||
onmouseleave="this.style.color='#ccc'" |
||||
></div> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="whyChooseUs"> |
||||
<div style="width: 80%;margin-right: auto; margin-left: auto;"> |
||||
<div class="whyChooseUs-title text-center"> |
||||
<p>为什么选择我们的服务</p> |
||||
<p>THE REASON TO CHOOSING US</p> |
||||
</div> |
||||
<el-row :gutter="24"> |
||||
<el-col v-for="(item,index) in serverList" :key="index" :span="6"> |
||||
<div class="server-block" |
||||
onmouseenter="this.style.color='#28f';this.style.borderColor='#28f'" |
||||
onmouseleave="this.style.color='#666';this.style.borderColor='#ccc'"> |
||||
<img v-lazy="item.logo" alt="logo" class="center-block"> |
||||
<p class="text-center">{{ item.title }}</p> |
||||
<div |
||||
class="text-center" |
||||
onmouseenter="this.style.color='#28f'" |
||||
onmouseleave="this.style.color='#ccc'" |
||||
v-html="item.content" |
||||
></div> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-container id="contactUs" :style="{background:`url(${contact_images.bg}) 0 0 no-repeat`}"> |
||||
<el-main class="contactUs-container"> |
||||
<div class="content">您身边的应用托管分发专家</div> |
||||
<div class="content">7x24小时提供出色的不间断服务</div> |
||||
<el-button @click="$router.push({name:'FirContact'})" |
||||
onmouseleave="this.style.borderColor='#ffffff'; this.style.backgroundColor='#ffffff'; this.style.color='#3f3f3f';" |
||||
onmouseenter="this.style.backgroundColor='transparent'; this.style.borderColor='#ffffff'; this.style.color='#ffffff';" |
||||
>联系我们 |
||||
</el-button> |
||||
<div class="contactUs-contactWay"> |
||||
<img v-lazy="contact_images.weixin"/> |
||||
<img v-lazy="contact_images.weibo"/> |
||||
<img v-lazy="contact_images.twitter"/> |
||||
</div> |
||||
</el-main> |
||||
</el-container> |
||||
<el-container id="contactUs" :style="{background:`url(${contact_images.bg}) 0 0 no-repeat`}"> |
||||
<el-main class="contactUs-container"> |
||||
<div class="content">您身边的应用托管分发专家</div> |
||||
<div class="content">7x24小时提供出色的不间断服务</div> |
||||
<el-button onmouseenter="this.style.backgroundColor='transparent'; this.style.borderColor='#ffffff'; this.style.color='#ffffff';" |
||||
onmouseleave="this.style.borderColor='#ffffff'; this.style.backgroundColor='#ffffff'; this.style.color='#3f3f3f';" |
||||
@click="$router.push({name:'FirContact'})" |
||||
>联系我们 |
||||
</el-button> |
||||
<div class="contactUs-contactWay"> |
||||
<img v-lazy="contact_images.weixin"/> |
||||
<img v-lazy="contact_images.weibo"/> |
||||
<img v-lazy="contact_images.twitter"/> |
||||
</div> |
||||
</el-main> |
||||
</el-container> |
||||
|
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "FirIndex", |
||||
data() { |
||||
return { |
||||
contact_images: { |
||||
bg: require("@/assets/imgs/contact_us_bg.jpg"), |
||||
weixin: require("@/assets/imgs/weixin.png"), |
||||
weibo: require("@/assets/imgs/weibo.png"), |
||||
twitter: require("@/assets/imgs/twitter.png"), |
||||
}, |
||||
swiperList: [ |
||||
{ |
||||
img: require("@/assets/imgs/banner2.jpg"), |
||||
path: "", |
||||
title: '超级签名', |
||||
content: '自定义超级签签名，不再为频繁填写udid打包而烦恼', |
||||
}, |
||||
{ |
||||
img: require("@/assets/imgs/banner1.png"), |
||||
path: "", |
||||
title: '内测托管', |
||||
content: '一键上传应用，扫描二维码下载', |
||||
}, |
||||
{ |
||||
img: require("@/assets/imgs/banner_2.jpg"), |
||||
path: "", |
||||
title: '应用合并', |
||||
content: '扫描同一个二维码，根据设备类型自动下载对应的 iOS 或 Android 应用', |
||||
}, |
||||
{ |
||||
img: require("@/assets/imgs/banner_1.jpg"), |
||||
path: "", |
||||
title: '权限控制', |
||||
content: '灵活的访问权限控制，密码授权，下载页展示，管理应用', |
||||
}, |
||||
|
||||
], |
||||
serverList: [ |
||||
{ |
||||
logo: require("@/assets/imgs/tel.png"), |
||||
title: "核心优势1", |
||||
content: "<p>由专业客服提供人工服务</p>负责疑难问题和故障受理" |
||||
}, |
||||
{ |
||||
logo: require("@/assets/imgs/computer.png"), |
||||
title: "核心优势2", |
||||
content: "<p>可定制私有化部署</p>帮助客户进行私有操作" |
||||
}, |
||||
{ |
||||
logo: require("@/assets/imgs/qq.png"), |
||||
title: "核心优势3", |
||||
content: "<p>利用QQ微信等提供在线解答</p>帮助用户快速准确解决问题和故障" |
||||
}, |
||||
{ |
||||
logo: require("@/assets/imgs/skill.png"), |
||||
title: "核心优势4", |
||||
content: "<p>由技术支持工程师，负责问题解答</p>需求受理及故障受理" |
||||
} |
||||
] |
||||
} |
||||
export default { |
||||
name: "FirIndex", |
||||
data() { |
||||
return { |
||||
contact_images: { |
||||
bg: require("@/assets/imgs/contact_us_bg.jpg"), |
||||
weixin: require("@/assets/imgs/weixin.png"), |
||||
weibo: require("@/assets/imgs/weibo.png"), |
||||
twitter: require("@/assets/imgs/twitter.png"), |
||||
}, |
||||
swiperList: [ |
||||
{ |
||||
img: require("@/assets/imgs/banner2.jpg"), |
||||
path: "", |
||||
title: '超级签名', |
||||
content: '自定义超级签签名，不再为频繁填写udid打包而烦恼', |
||||
}, |
||||
{ |
||||
img: require("@/assets/imgs/banner1.png"), |
||||
path: "", |
||||
title: '内测托管', |
||||
content: '一键上传应用，扫描二维码下载', |
||||
}, |
||||
{ |
||||
img: require("@/assets/imgs/banner_2.jpg"), |
||||
path: "", |
||||
title: '应用合并', |
||||
content: '扫描同一个二维码，根据设备类型自动下载对应的 iOS 或 Android 应用', |
||||
}, |
||||
{ |
||||
img: require("@/assets/imgs/banner_1.jpg"), |
||||
path: "", |
||||
title: '权限控制', |
||||
content: '灵活的访问权限控制，密码授权，下载页展示，管理应用', |
||||
}, |
||||
|
||||
], |
||||
serverList: [ |
||||
{ |
||||
logo: require("@/assets/imgs/tel.png"), |
||||
title: "核心优势1", |
||||
content: "<p>由专业客服提供人工服务</p>负责疑难问题和故障受理" |
||||
}, |
||||
{ |
||||
logo: require("@/assets/imgs/computer.png"), |
||||
title: "核心优势2", |
||||
content: "<p>可定制私有化部署</p>帮助客户进行私有操作" |
||||
}, |
||||
{ |
||||
logo: require("@/assets/imgs/qq.png"), |
||||
title: "核心优势3", |
||||
content: "<p>利用QQ微信等提供在线解答</p>帮助用户快速准确解决问题和故障" |
||||
}, |
||||
{ |
||||
logo: require("@/assets/imgs/skill.png"), |
||||
title: "核心优势4", |
||||
content: "<p>由技术支持工程师，负责问题解答</p>需求受理及故障受理" |
||||
} |
||||
] |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
|
||||
.main .top { |
||||
margin-top: 10px; |
||||
width: 100%; |
||||
height: 600px; |
||||
} |
||||
|
||||
.main .top .bpic { |
||||
width: 100%; |
||||
height: 600px; |
||||
} |
||||
|
||||
.main .topplayer-top { |
||||
width: 800px; |
||||
height: 300px; |
||||
position: absolute; |
||||
top: 220px; |
||||
margin-top: -150px; |
||||
z-index: 2; |
||||
right: 50%; |
||||
margin-right: -400px; |
||||
} |
||||
|
||||
.word { |
||||
padding-top: 100px; |
||||
color: #ffffff; |
||||
font-size: 45px; |
||||
font-weight: bolder; |
||||
text-align: center; |
||||
font-family: "微软雅黑"; |
||||
} |
||||
|
||||
.content { |
||||
padding-top: 30px; |
||||
color: #ffffff; |
||||
font-size: 20px; |
||||
font-weight: bolder; |
||||
text-align: center; |
||||
font-family: "微软雅黑"; |
||||
} |
||||
|
||||
.main .topplayer-top button { |
||||
width: 200px; |
||||
height: 60px; |
||||
margin-top: 50px; |
||||
color: #ffffff; |
||||
background: #f5704f; |
||||
font-family: 微软雅黑; |
||||
text-align: center; |
||||
font-weight: bolder; |
||||
font-size: 14px; |
||||
border-radius: 8px; /*圆角*/ |
||||
margin-left: 150px; |
||||
} |
||||
|
||||
#contactUs { |
||||
margin-top: 60px; |
||||
color: #fff; |
||||
height: 400px; |
||||
text-align: center; |
||||
background-size: 100% 100%; |
||||
transition: all ease 0.6s; |
||||
} |
||||
|
||||
#contactUs .contactUs-container { |
||||
padding-top: 50px; |
||||
} |
||||
|
||||
#contactUs .contactUs-container button { |
||||
width: 300px; |
||||
height: 50px; |
||||
margin-top: 40px; |
||||
} |
||||
|
||||
#contactUs .contactUs-container .contactUs-contactWay img { |
||||
display: inline-block; |
||||
width: 48px; |
||||
height: 48px; |
||||
margin: 30px; |
||||
} |
||||
|
||||
/* 为什么选择我们 */ |
||||
#whyChooseUs { |
||||
padding: 100px; |
||||
text-align: center; |
||||
} |
||||
|
||||
#whyChooseUs .whyChooseUs-title { |
||||
margin-bottom: 50px; |
||||
} |
||||
|
||||
#whyChooseUs .whyChooseUs-title p:nth-of-type(1) { |
||||
font-size: 25px; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
#whyChooseUs .whyChooseUs-title p:nth-of-type(2) { |
||||
font-size: 14px; |
||||
} |
||||
|
||||
#whyChooseUs .server-block { |
||||
padding: 50px 20px; |
||||
border: 1px solid #ccc; |
||||
border-bottom: 5px solid #ccc; |
||||
} |
||||
|
||||
#whyChooseUs .server-block img { |
||||
width: 48px; |
||||
height: 48px; |
||||
} |
||||
|
||||
#whyChooseUs .server-block > p { |
||||
font-size: 20px; |
||||
margin: 30px 0; |
||||
} |
||||
|
||||
#whyChooseUs .server-block > div { |
||||
color: #ccc; |
||||
} |
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
|
||||
.main .top { |
||||
margin-top: 10px; |
||||
width: 100%; |
||||
height: 600px; |
||||
} |
||||
|
||||
.main .top .bpic { |
||||
width: 100%; |
||||
height: 600px; |
||||
} |
||||
|
||||
.main .topplayer-top { |
||||
width: 800px; |
||||
height: 300px; |
||||
position: absolute; |
||||
top: 220px; |
||||
margin-top: -150px; |
||||
z-index: 2; |
||||
right: 50%; |
||||
margin-right: -400px; |
||||
} |
||||
|
||||
.word { |
||||
padding-top: 100px; |
||||
color: #ffffff; |
||||
font-size: 45px; |
||||
font-weight: bolder; |
||||
text-align: center; |
||||
font-family: "微软雅黑"; |
||||
} |
||||
|
||||
.content { |
||||
padding-top: 30px; |
||||
color: #ffffff; |
||||
font-size: 20px; |
||||
font-weight: bolder; |
||||
text-align: center; |
||||
font-family: "微软雅黑"; |
||||
} |
||||
|
||||
.main .topplayer-top button { |
||||
width: 200px; |
||||
height: 60px; |
||||
margin-top: 50px; |
||||
color: #ffffff; |
||||
background: #f5704f; |
||||
font-family: 微软雅黑; |
||||
text-align: center; |
||||
font-weight: bolder; |
||||
font-size: 14px; |
||||
border-radius: 8px; /*圆角*/ |
||||
margin-left: 150px; |
||||
} |
||||
|
||||
#contactUs { |
||||
margin-top: 60px; |
||||
color: #fff; |
||||
height: 400px; |
||||
text-align: center; |
||||
background-size: 100% 100%; |
||||
transition: all ease 0.6s; |
||||
} |
||||
|
||||
#contactUs .contactUs-container { |
||||
padding-top: 50px; |
||||
} |
||||
|
||||
#contactUs .contactUs-container button { |
||||
width: 300px; |
||||
height: 50px; |
||||
margin-top: 40px; |
||||
} |
||||
|
||||
#contactUs .contactUs-container .contactUs-contactWay img { |
||||
display: inline-block; |
||||
width: 48px; |
||||
height: 48px; |
||||
margin: 30px; |
||||
} |
||||
|
||||
/* 为什么选择我们 */ |
||||
#whyChooseUs { |
||||
padding: 100px; |
||||
text-align: center; |
||||
} |
||||
|
||||
#whyChooseUs .whyChooseUs-title { |
||||
margin-bottom: 50px; |
||||
} |
||||
|
||||
#whyChooseUs .whyChooseUs-title p:nth-of-type(1) { |
||||
font-size: 25px; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
#whyChooseUs .whyChooseUs-title p:nth-of-type(2) { |
||||
font-size: 14px; |
||||
} |
||||
|
||||
#whyChooseUs .server-block { |
||||
padding: 50px 20px; |
||||
border: 1px solid #ccc; |
||||
border-bottom: 5px solid #ccc; |
||||
} |
||||
|
||||
#whyChooseUs .server-block img { |
||||
width: 48px; |
||||
height: 48px; |
||||
} |
||||
|
||||
#whyChooseUs .server-block > p { |
||||
font-size: 20px; |
||||
margin: 30px 0; |
||||
} |
||||
|
||||
#whyChooseUs .server-block > div { |
||||
color: #ccc; |
||||
} |
||||
|
||||
</style> |
||||
|
||||
@ -1,120 +1,120 @@ |
||||
<template> |
||||
<el-container> |
||||
<div style="background-color:rgba(162, 193, 230, 0.18);"> |
||||
<el-header class="header"> |
||||
<el-row :gutter="12"> |
||||
<el-col :span="12"> |
||||
<el-image class="logo img" :src="require('@/assets/logo.png')" alt="logo"/> |
||||
</el-col> |
||||
<el-col :span="12" :offset="12"> |
||||
<el-row :gutter="12" class="nav"> |
||||
<el-col :span="8"> |
||||
<el-link @click="$router.push({name:'FirIndex'})">首页</el-link> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<el-link @click="$router.push({name:'FirService'})">服务</el-link> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<el-link @click="$router.push({name:'FirNews'})">新闻</el-link> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<el-link @click="$router.push({name:'FirApps'})">登录</el-link> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<el-link @click="$router.push({name:'FirRegist'})">注册</el-link> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<el-link @click="$router.push({name:'FirContact'})">联系我们</el-link> |
||||
</el-col> |
||||
</el-row> |
||||
</el-col> |
||||
</el-row> |
||||
</el-header> |
||||
</div> |
||||
<el-container> |
||||
<div style="background-color:rgba(162, 193, 230, 0.18);"> |
||||
<el-header class="header"> |
||||
<el-row :gutter="12"> |
||||
<el-col :span="12"> |
||||
<el-image :src="require('@/assets/logo.png')" alt="logo" class="logo img"/> |
||||
</el-col> |
||||
<el-col :offset="12" :span="12"> |
||||
<el-row :gutter="12" class="nav"> |
||||
<el-col :span="8"> |
||||
<el-link @click="$router.push({name:'FirIndex'})">首页</el-link> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<el-link @click="$router.push({name:'FirService'})">服务</el-link> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<el-link @click="$router.push({name:'FirNews'})">新闻</el-link> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<el-link @click="$router.push({name:'FirApps'})">登录</el-link> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<el-link @click="$router.push({name:'FirRegist'})">注册</el-link> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<el-link @click="$router.push({name:'FirContact'})">联系我们</el-link> |
||||
</el-col> |
||||
</el-row> |
||||
</el-col> |
||||
</el-row> |
||||
</el-header> |
||||
</div> |
||||
|
||||
<div> |
||||
<router-view/> |
||||
</div> |
||||
<el-tooltip placement="top" content="回到顶部"> |
||||
<back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" |
||||
transition-name="fade"/> |
||||
</el-tooltip> |
||||
<el-footer> |
||||
<el-divider/> |
||||
<FirFooter/> |
||||
</el-footer> |
||||
</el-container> |
||||
<div> |
||||
<router-view/> |
||||
</div> |
||||
<el-tooltip content="回到顶部" placement="top"> |
||||
<back-to-top :back-position="50" :custom-style="myBackToTopStyle" :visibility-height="300" |
||||
transition-name="fade"/> |
||||
</el-tooltip> |
||||
<el-footer> |
||||
<el-divider/> |
||||
<FirFooter/> |
||||
</el-footer> |
||||
</el-container> |
||||
</template> |
||||
|
||||
<script> |
||||
import FirFooter from "@/components/FirFooter"; |
||||
import BackToTop from "@/components/base/BackToTop"; |
||||
import FirFooter from "@/components/FirFooter"; |
||||
import BackToTop from "@/components/base/BackToTop"; |
||||
|
||||
export default { |
||||
name: "FirIndex", |
||||
components: {FirFooter, BackToTop}, |
||||
data() { |
||||
return { |
||||
myBackToTopStyle: { |
||||
right: '80px', |
||||
bottom: '100px', |
||||
width: '40px', |
||||
height: '40px', |
||||
'border-radius': '4px', |
||||
'line-height': '45px', |
||||
background: '#e7eaf1' |
||||
}, |
||||
} |
||||
} |
||||
export default { |
||||
name: "FirIndex", |
||||
components: {FirFooter, BackToTop}, |
||||
data() { |
||||
return { |
||||
myBackToTopStyle: { |
||||
right: '80px', |
||||
bottom: '100px', |
||||
width: '40px', |
||||
height: '40px', |
||||
'border-radius': '4px', |
||||
'line-height': '45px', |
||||
background: '#e7eaf1' |
||||
}, |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
.header { |
||||
width: 100%; |
||||
height: 120px; |
||||
} |
||||
.header { |
||||
width: 100%; |
||||
height: 120px; |
||||
} |
||||
|
||||
.header .img { |
||||
width: 300px; |
||||
height: 85px; |
||||
padding-left: 100px; |
||||
padding-top: 8px; |
||||
} |
||||
.header .img { |
||||
width: 300px; |
||||
height: 85px; |
||||
padding-left: 100px; |
||||
padding-top: 8px; |
||||
} |
||||
|
||||
.header .logo { |
||||
float: left; |
||||
} |
||||
.header .logo { |
||||
float: left; |
||||
} |
||||
|
||||
.header .nav { |
||||
float: right; |
||||
padding-right: 80px; |
||||
.header .nav { |
||||
float: right; |
||||
padding-right: 80px; |
||||
|
||||
} |
||||
} |
||||
|
||||
.header .nav .el-col { |
||||
margin-right: 20px; |
||||
float: left; |
||||
list-style: none; |
||||
width: 80px; |
||||
height: 60px; |
||||
line-height: 100px; |
||||
color: #7d7d7d; |
||||
font-size: 15px; |
||||
font-weight: bolder; |
||||
} |
||||
.header .nav .el-col { |
||||
margin-right: 20px; |
||||
float: left; |
||||
list-style: none; |
||||
width: 80px; |
||||
height: 60px; |
||||
line-height: 100px; |
||||
color: #7d7d7d; |
||||
font-size: 15px; |
||||
font-weight: bolder; |
||||
} |
||||
|
||||
.header .nav .el-link:hover { |
||||
color: #47477d; |
||||
font-size: 16px; |
||||
cursor: pointer; |
||||
touch-action: manipulation; |
||||
.header .nav .el-link:hover { |
||||
color: #47477d; |
||||
font-size: 16px; |
||||
cursor: pointer; |
||||
touch-action: manipulation; |
||||
|
||||
} |
||||
} |
||||
|
||||
</style> |
||||
|
||||
@ -1,213 +1,213 @@ |
||||
<template> |
||||
<div class="NewsInformation"> |
||||
<div> |
||||
<div class="text-center"> |
||||
<h3>新闻动态</h3> |
||||
<p style="color:#b2b2b2">Company News</p> |
||||
</div> |
||||
<div class="nav text-center"> |
||||
<a href="#" class="active">公司新闻</a> |
||||
<a href="#">行业动态</a> |
||||
</div> |
||||
<ul class="news-container"> |
||||
<li v-for="(item,index) in newsList" :key="index"> |
||||
<div class="content"> |
||||
<p>{{item.title}}</p> |
||||
<p>{{item.introduce}}</p> |
||||
</div> |
||||
<div class="time"> |
||||
<p>{{item.date}}</p> |
||||
<span>{{item.year}}</span> |
||||
</div> |
||||
<div class="circle"> |
||||
<img :src="require('@/assets/imgs/circle.png')"> |
||||
<i class="center-block"></i> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
<div class="NewsInformation"> |
||||
<div> |
||||
<div class="text-center"> |
||||
<h3>新闻动态</h3> |
||||
<p style="color:#b2b2b2">Company News</p> |
||||
</div> |
||||
<div class="nav text-center"> |
||||
<a class="active" href="#">公司新闻</a> |
||||
<a href="#">行业动态</a> |
||||
</div> |
||||
<ul class="news-container"> |
||||
<li v-for="(item,index) in newsList" :key="index"> |
||||
<div class="content"> |
||||
<p>{{ item.title }}</p> |
||||
<p>{{ item.introduce }}</p> |
||||
</div> |
||||
<div class="time"> |
||||
<p>{{ item.date }}</p> |
||||
<span>{{ item.year }}</span> |
||||
</div> |
||||
<div class="circle"> |
||||
<img :src="require('@/assets/imgs/circle.png')"> |
||||
<i class="center-block"></i> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "FirNews", |
||||
data() { |
||||
return { |
||||
show: false, |
||||
newsList: [ |
||||
{ |
||||
id: '001', |
||||
title: '现有版本', |
||||
introduce: '经过好长时间的编写，平台已经支持超级签名，权限管理，自定义域名，自定义存储', |
||||
date: '03-26', |
||||
year: '2021' |
||||
}, { |
||||
id: '002', |
||||
title: '发布第一个版本', |
||||
introduce: '只是简单的一个应用分发，然后再测试服进行分发测试', |
||||
date: '11-24', |
||||
year: '2019' |
||||
}, { |
||||
id: '003', |
||||
title: '撸代码', |
||||
introduce: '资源，签名方式，想法都已经准备好，正式写代码', |
||||
date: '10-10', |
||||
year: '2019' |
||||
}, { |
||||
id: '004', |
||||
title: '开始行动', |
||||
introduce: '网上找了些资源，然后进行设计，也找了些linux平台签名方式', |
||||
date: '08-20', |
||||
year: '2019' |
||||
}, { |
||||
id: '005', |
||||
title: '行动前准备', |
||||
introduce: '通过互联网查询，发现了fir平台，但是fir平台只支持应用分发，还不可以iOS签名', |
||||
date: '06-03', |
||||
year: '2019' |
||||
}, { |
||||
id: '006', |
||||
title: '萌发新想法', |
||||
introduce: 'iOS测试打包，应用分发复杂繁琐，怎么可以一站式分发安卓和苹果应用？', |
||||
date: '05-24', |
||||
year: '2019' |
||||
} |
||||
] |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.show = true; |
||||
export default { |
||||
name: "FirNews", |
||||
data() { |
||||
return { |
||||
show: false, |
||||
newsList: [ |
||||
{ |
||||
id: '001', |
||||
title: '现有版本', |
||||
introduce: '经过好长时间的编写，平台已经支持超级签名，权限管理，自定义域名，自定义存储', |
||||
date: '03-26', |
||||
year: '2021' |
||||
}, { |
||||
id: '002', |
||||
title: '发布第一个版本', |
||||
introduce: '只是简单的一个应用分发，然后再测试服进行分发测试', |
||||
date: '11-24', |
||||
year: '2019' |
||||
}, { |
||||
id: '003', |
||||
title: '撸代码', |
||||
introduce: '资源，签名方式，想法都已经准备好，正式写代码', |
||||
date: '10-10', |
||||
year: '2019' |
||||
}, { |
||||
id: '004', |
||||
title: '开始行动', |
||||
introduce: '网上找了些资源，然后进行设计，也找了些linux平台签名方式', |
||||
date: '08-20', |
||||
year: '2019' |
||||
}, { |
||||
id: '005', |
||||
title: '行动前准备', |
||||
introduce: '通过互联网查询，发现了fir平台，但是fir平台只支持应用分发，还不可以iOS签名', |
||||
date: '06-03', |
||||
year: '2019' |
||||
}, { |
||||
id: '006', |
||||
title: '萌发新想法', |
||||
introduce: 'iOS测试打包，应用分发复杂繁琐，怎么可以一站式分发安卓和苹果应用？', |
||||
date: '05-24', |
||||
year: '2019' |
||||
} |
||||
] |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.show = true; |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.NewsInformation { |
||||
text-align: center; |
||||
} |
||||
|
||||
.nav { |
||||
margin: 20px 0; |
||||
} |
||||
|
||||
.nav > a { |
||||
display: inline-block; |
||||
text-decoration: none; |
||||
width: 120px; |
||||
height: 45px; |
||||
line-height: 45px; |
||||
color: #333; |
||||
border: 1px solid #333; |
||||
} |
||||
|
||||
.nav > a.active { |
||||
color: #1e73be; |
||||
border-color: #1e73be; |
||||
} |
||||
|
||||
.nav > a:hover { |
||||
color: #1e73be; |
||||
border-color: #1e73be; |
||||
} |
||||
|
||||
.news-container { |
||||
overflow: hidden; |
||||
margin-bottom: 0; |
||||
width: 1140px; |
||||
margin-right: auto; |
||||
margin-left: auto; |
||||
list-style: none; |
||||
} |
||||
|
||||
.news-container > li { |
||||
width: 55.45%; |
||||
height: 120px; |
||||
float: left; |
||||
color: #333; |
||||
text-align: right; |
||||
border-left: 1px solid transparent; |
||||
border-right: 1px solid transparent; |
||||
} |
||||
|
||||
.news-container > li:hover { |
||||
color: #1e73be; |
||||
/*border: 1px solid #1e73be;*/ |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.news-container > li:nth-of-type(2n) { |
||||
float: right; |
||||
text-align: left; |
||||
} |
||||
|
||||
.news-container > li > .content { |
||||
width: 60%; |
||||
float: left; |
||||
padding: 20px 0; |
||||
} |
||||
|
||||
.news-container > li > .time { |
||||
width: 20%; |
||||
float: left; |
||||
padding: 10px 0; |
||||
} |
||||
|
||||
.news-container > li > .time > p { |
||||
font-size: 30px; |
||||
margin: 5px 0; |
||||
} |
||||
|
||||
.news-container > li > .circle { |
||||
width: 20%; |
||||
height: 100%; |
||||
float: left; |
||||
position: relative; |
||||
} |
||||
|
||||
.news-container > li > .circle > img { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
margin: auto; |
||||
width: 20px; |
||||
height: 20px; |
||||
} |
||||
|
||||
.news-container > li > .circle > i { |
||||
display: block; |
||||
width: 1px; |
||||
height: 100%; |
||||
background: #707070; |
||||
} |
||||
|
||||
.news-container > li:nth-of-type(2n) > .content { |
||||
float: right; |
||||
} |
||||
|
||||
.news-container > li:nth-of-type(2n) > .time { |
||||
float: right; |
||||
} |
||||
|
||||
.news-container > li:nth-of-type(2n) > .circle { |
||||
float: right; |
||||
} |
||||
|
||||
.news-container > li:nth-of-type(1) > .circle > i { |
||||
height: 50%; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
} |
||||
|
||||
.center-block { |
||||
display: block; |
||||
margin-right: auto; |
||||
margin-left: auto |
||||
} |
||||
.NewsInformation { |
||||
text-align: center; |
||||
} |
||||
|
||||
.nav { |
||||
margin: 20px 0; |
||||
} |
||||
|
||||
.nav > a { |
||||
display: inline-block; |
||||
text-decoration: none; |
||||
width: 120px; |
||||
height: 45px; |
||||
line-height: 45px; |
||||
color: #333; |
||||
border: 1px solid #333; |
||||
} |
||||
|
||||
.nav > a.active { |
||||
color: #1e73be; |
||||
border-color: #1e73be; |
||||
} |
||||
|
||||
.nav > a:hover { |
||||
color: #1e73be; |
||||
border-color: #1e73be; |
||||
} |
||||
|
||||
.news-container { |
||||
overflow: hidden; |
||||
margin-bottom: 0; |
||||
width: 1140px; |
||||
margin-right: auto; |
||||
margin-left: auto; |
||||
list-style: none; |
||||
} |
||||
|
||||
.news-container > li { |
||||
width: 55.45%; |
||||
height: 120px; |
||||
float: left; |
||||
color: #333; |
||||
text-align: right; |
||||
border-left: 1px solid transparent; |
||||
border-right: 1px solid transparent; |
||||
} |
||||
|
||||
.news-container > li:hover { |
||||
color: #1e73be; |
||||
/*border: 1px solid #1e73be;*/ |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.news-container > li:nth-of-type(2n) { |
||||
float: right; |
||||
text-align: left; |
||||
} |
||||
|
||||
.news-container > li > .content { |
||||
width: 60%; |
||||
float: left; |
||||
padding: 20px 0; |
||||
} |
||||
|
||||
.news-container > li > .time { |
||||
width: 20%; |
||||
float: left; |
||||
padding: 10px 0; |
||||
} |
||||
|
||||
.news-container > li > .time > p { |
||||
font-size: 30px; |
||||
margin: 5px 0; |
||||
} |
||||
|
||||
.news-container > li > .circle { |
||||
width: 20%; |
||||
height: 100%; |
||||
float: left; |
||||
position: relative; |
||||
} |
||||
|
||||
.news-container > li > .circle > img { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
margin: auto; |
||||
width: 20px; |
||||
height: 20px; |
||||
} |
||||
|
||||
.news-container > li > .circle > i { |
||||
display: block; |
||||
width: 1px; |
||||
height: 100%; |
||||
background: #707070; |
||||
} |
||||
|
||||
.news-container > li:nth-of-type(2n) > .content { |
||||
float: right; |
||||
} |
||||
|
||||
.news-container > li:nth-of-type(2n) > .time { |
||||
float: right; |
||||
} |
||||
|
||||
.news-container > li:nth-of-type(2n) > .circle { |
||||
float: right; |
||||
} |
||||
|
||||
.news-container > li:nth-of-type(1) > .circle > i { |
||||
height: 50%; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
} |
||||
|
||||
.center-block { |
||||
display: block; |
||||
margin-right: auto; |
||||
margin-left: auto |
||||
} |
||||
</style> |
||||
|
||||
@ -1,155 +1,155 @@ |
||||
<template> |
||||
<div class="Service"> |
||||
<div> |
||||
<h3>我们的服务</h3> |
||||
<p style="color:#b2b2b2">The Best Service You Never See</p> |
||||
</div> |
||||
<div class="Service-container"> |
||||
<transition name="el-zoom-in-center"> |
||||
<el-row :gutter="20" v-show="show"> |
||||
<el-col :span="6" v-for="(item,index) in serviceList" :key="index"> |
||||
<div class="Service-item Service-item-wrapper"> |
||||
<div class="Service-item-top"> |
||||
<h4>{{item.title}}</h4> |
||||
<i/> |
||||
<p>{{item.eng_title}}</p> |
||||
</div> |
||||
<div class="Service-item-img"> |
||||
<img :src="item.img" alt="服务"> |
||||
</div> |
||||
<div class="Service-item-border"></div> |
||||
</div> |
||||
|
||||
</el-col> |
||||
</el-row> |
||||
</transition> |
||||
|
||||
</div> |
||||
<div class="Service"> |
||||
<div> |
||||
<h3>我们的服务</h3> |
||||
<p style="color:#b2b2b2">The Best Service You Never See</p> |
||||
</div> |
||||
<div class="Service-container"> |
||||
<transition name="el-zoom-in-center"> |
||||
<el-row v-show="show" :gutter="20"> |
||||
<el-col v-for="(item,index) in serviceList" :key="index" :span="6"> |
||||
<div class="Service-item Service-item-wrapper"> |
||||
<div class="Service-item-top"> |
||||
<h4>{{ item.title }}</h4> |
||||
<i/> |
||||
<p>{{ item.eng_title }}</p> |
||||
</div> |
||||
<div class="Service-item-img"> |
||||
<img :src="item.img" alt="服务"> |
||||
</div> |
||||
<div class="Service-item-border"></div> |
||||
</div> |
||||
|
||||
</el-col> |
||||
</el-row> |
||||
</transition> |
||||
|
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "FirService", |
||||
data() { |
||||
return { |
||||
show: false, |
||||
serviceList: [ |
||||
{ |
||||
id: 'section-1', |
||||
title: '高性能应用分发', |
||||
eng_title: 'High performance app distribution', |
||||
img: require('@/assets/imgs/service1.jpg') |
||||
}, { |
||||
id: 'section-2', |
||||
title: 'iOS超级签名', |
||||
eng_title: 'IOS super signature', |
||||
img: require('@/assets/imgs/service2.jpg') |
||||
}, { |
||||
id: 'section-3', |
||||
title: '多维下载权限', |
||||
eng_title: 'Multi download permission', |
||||
img: require('@/assets/imgs/service3.jpg') |
||||
}, { |
||||
id: 'section-4', |
||||
title: '应用自定义域名', |
||||
eng_title: 'Custom domain name', |
||||
img: require('@/assets/imgs/service4.jpg') |
||||
} |
||||
] |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.show = true; |
||||
export default { |
||||
name: "FirService", |
||||
data() { |
||||
return { |
||||
show: false, |
||||
serviceList: [ |
||||
{ |
||||
id: 'section-1', |
||||
title: '高性能应用分发', |
||||
eng_title: 'High performance app distribution', |
||||
img: require('@/assets/imgs/service1.jpg') |
||||
}, { |
||||
id: 'section-2', |
||||
title: 'iOS超级签名', |
||||
eng_title: 'IOS super signature', |
||||
img: require('@/assets/imgs/service2.jpg') |
||||
}, { |
||||
id: 'section-3', |
||||
title: '多维下载权限', |
||||
eng_title: 'Multi download permission', |
||||
img: require('@/assets/imgs/service3.jpg') |
||||
}, { |
||||
id: 'section-4', |
||||
title: '应用自定义域名', |
||||
eng_title: 'Custom domain name', |
||||
img: require('@/assets/imgs/service4.jpg') |
||||
} |
||||
] |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.show = true; |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.Service { |
||||
text-align: center; |
||||
} |
||||
|
||||
.Service-container { |
||||
width: 1170px; |
||||
padding: 30px 50px; |
||||
margin-right: auto; |
||||
margin-left: auto; |
||||
} |
||||
|
||||
.Service-item { |
||||
margin-bottom: 50px; |
||||
} |
||||
|
||||
.Service-item-wrapper { |
||||
cursor: pointer; |
||||
background: rgba(244, 244, 244, 1); |
||||
overflow: hidden; |
||||
position: relative; |
||||
} |
||||
|
||||
.Service-item-top { |
||||
width: 100%; |
||||
height: 120px; |
||||
/*padding: 30px;*/ |
||||
text-align: center; |
||||
} |
||||
|
||||
.Service-item-top > i { |
||||
display: inline-block; |
||||
width: 25px; |
||||
height: 2px; |
||||
background: #28f; |
||||
} |
||||
|
||||
.Service-item-top > p { |
||||
color: #b2b2b2; |
||||
opacity: 0; |
||||
transform: translateY(10px); |
||||
transition: all .5s ease; |
||||
} |
||||
|
||||
.Service-item-img { |
||||
width: 100%; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.Service-item-img img { |
||||
width: 100%; |
||||
transition: all 0.5s ease; |
||||
} |
||||
|
||||
.Service-item-border { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
margin: auto; |
||||
z-index: 9999999; |
||||
width: 100%; |
||||
height: 100%; |
||||
transition: all 0.5s ease; |
||||
border: 1px solid #000; |
||||
opacity: 0; |
||||
} |
||||
|
||||
.Service-item-wrapper:hover .Service-item-top > i { |
||||
opacity: 0; |
||||
} |
||||
|
||||
.Service-item-wrapper:hover .Service-item-top > p { |
||||
opacity: 1; |
||||
transform: translateY(-10px); |
||||
} |
||||
|
||||
.Service-item-wrapper:hover .Service-item-img > img { |
||||
transform: scale(1.1, 1.1); |
||||
} |
||||
|
||||
.Service-item-wrapper:hover > .Service-item-border { |
||||
/*opacity: 1;*/ |
||||
width: 90%; |
||||
height: 90%; |
||||
} |
||||
.Service { |
||||
text-align: center; |
||||
} |
||||
|
||||
.Service-container { |
||||
width: 1170px; |
||||
padding: 30px 50px; |
||||
margin-right: auto; |
||||
margin-left: auto; |
||||
} |
||||
|
||||
.Service-item { |
||||
margin-bottom: 50px; |
||||
} |
||||
|
||||
.Service-item-wrapper { |
||||
cursor: pointer; |
||||
background: rgba(244, 244, 244, 1); |
||||
overflow: hidden; |
||||
position: relative; |
||||
} |
||||
|
||||
.Service-item-top { |
||||
width: 100%; |
||||
height: 120px; |
||||
/*padding: 30px;*/ |
||||
text-align: center; |
||||
} |
||||
|
||||
.Service-item-top > i { |
||||
display: inline-block; |
||||
width: 25px; |
||||
height: 2px; |
||||
background: #28f; |
||||
} |
||||
|
||||
.Service-item-top > p { |
||||
color: #b2b2b2; |
||||
opacity: 0; |
||||
transform: translateY(10px); |
||||
transition: all .5s ease; |
||||
} |
||||
|
||||
.Service-item-img { |
||||
width: 100%; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.Service-item-img img { |
||||
width: 100%; |
||||
transition: all 0.5s ease; |
||||
} |
||||
|
||||
.Service-item-border { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
margin: auto; |
||||
z-index: 9999999; |
||||
width: 100%; |
||||
height: 100%; |
||||
transition: all 0.5s ease; |
||||
border: 1px solid #000; |
||||
opacity: 0; |
||||
} |
||||
|
||||
.Service-item-wrapper:hover .Service-item-top > i { |
||||
opacity: 0; |
||||
} |
||||
|
||||
.Service-item-wrapper:hover .Service-item-top > p { |
||||
opacity: 1; |
||||
transform: translateY(-10px); |
||||
} |
||||
|
||||
.Service-item-wrapper:hover .Service-item-img > img { |
||||
transform: scale(1.1, 1.1); |
||||
} |
||||
|
||||
.Service-item-wrapper:hover > .Service-item-border { |
||||
/*opacity: 1;*/ |
||||
width: 90%; |
||||
height: 90%; |
||||
} |
||||
</style> |
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,43 +1,43 @@ |
||||
<template> |
||||
<el-main> |
||||
<h1> 请点击打开 <a href="https://appstoreconnect.apple.com/" target="_blank">appstoreconnect</a> 登录苹果开发者账户进行操作</h1> |
||||
<div v-for="helpic in imagelist" :key="helpic"> |
||||
<img v-lazy="helpic" alt="" style="width: 1100px;margin-top: 20px"/> |
||||
</div> |
||||
</el-main> |
||||
<el-main> |
||||
<h1> 请点击打开 <a href="https://appstoreconnect.apple.com/" target="_blank">appstoreconnect</a> 登录苹果开发者账户进行操作</h1> |
||||
<div v-for="helpic in imagelist" :key="helpic"> |
||||
<img v-lazy="helpic" alt="" style="width: 1100px;margin-top: 20px"/> |
||||
</div> |
||||
</el-main> |
||||
</template> |
||||
|
||||
<script> |
||||
import {getUserInfoFun} from "@/utils"; |
||||
import {getUserInfoFun} from "@/utils"; |
||||
|
||||
export default { |
||||
name: "FirSuperSignHelp", |
||||
data() { |
||||
return { |
||||
imagelist: [ |
||||
require('@/assets/sign/help/sign_help_0.png'), |
||||
require('@/assets/sign/help/sign_help_1.png'), |
||||
require('@/assets/sign/help/sign_help_2.png'), |
||||
require('@/assets/sign/help/sign_help_3.png'), |
||||
require('@/assets/sign/help/sign_help_4.png'), |
||||
require('@/assets/sign/help/sign_help_5.png'), |
||||
] |
||||
} |
||||
}, mounted() { |
||||
getUserInfoFun(this); |
||||
} |
||||
export default { |
||||
name: "FirSuperSignHelp", |
||||
data() { |
||||
return { |
||||
imagelist: [ |
||||
require('@/assets/sign/help/sign_help_0.png'), |
||||
require('@/assets/sign/help/sign_help_1.png'), |
||||
require('@/assets/sign/help/sign_help_2.png'), |
||||
require('@/assets/sign/help/sign_help_3.png'), |
||||
require('@/assets/sign/help/sign_help_4.png'), |
||||
require('@/assets/sign/help/sign_help_5.png'), |
||||
] |
||||
} |
||||
}, mounted() { |
||||
getUserInfoFun(this); |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.el-main { |
||||
margin: 20px auto 100px; |
||||
width: 1166px; |
||||
position: relative; |
||||
padding-bottom: 1px; |
||||
text-align: center; |
||||
color: #9b9b9b; |
||||
-webkit-font-smoothing: antialiased; |
||||
border-radius: 1%; |
||||
} |
||||
.el-main { |
||||
margin: 20px auto 100px; |
||||
width: 1166px; |
||||
position: relative; |
||||
padding-bottom: 1px; |
||||
text-align: center; |
||||
color: #9b9b9b; |
||||
-webkit-font-smoothing: antialiased; |
||||
border-radius: 1%; |
||||
} |
||||
</style> |
||||
|
||||
@ -1,430 +1,430 @@ |
||||
<template> |
||||
<el-main> |
||||
<el-main> |
||||
|
||||
<!-- vueCropper 剪裁图片实现--> |
||||
<el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body> |
||||
<div style="height: 500px"> |
||||
<vueCropper |
||||
ref="cropper" |
||||
:img="option.img" |
||||
:outputSize="option.size" |
||||
:outputType="option.outputType" |
||||
:info="true" |
||||
:full="option.full" |
||||
:canScale="option.canScale" |
||||
:canMove="option.canMove" |
||||
:canMoveBox="option.canMoveBox" |
||||
:autoCropWidth="option.autoCropWidth" |
||||
:autoCropHeight="option.autoCropHeight" |
||||
:original="option.original" |
||||
:autoCrop="option.autoCrop" |
||||
:fixed="option.fixed" |
||||
:fixedNumber="option.fixedNumber" |
||||
:centerBox="option.centerBox" |
||||
:infoTrue="option.infoTrue" |
||||
:fixedBox="option.fixedBox" |
||||
/> |
||||
</div> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button @click="dialogVisible = false">取 消</el-button> |
||||
<el-button type="primary" @click="finish">确认</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
<!-- vueCropper 剪裁图片实现--> |
||||
<el-dialog :visible.sync="dialogVisible" append-to-body title="图片剪裁"> |
||||
<div style="height: 500px"> |
||||
<vueCropper |
||||
ref="cropper" |
||||
:autoCrop="option.autoCrop" |
||||
:autoCropHeight="option.autoCropHeight" |
||||
:autoCropWidth="option.autoCropWidth" |
||||
:canMove="option.canMove" |
||||
:canMoveBox="option.canMoveBox" |
||||
:canScale="option.canScale" |
||||
:centerBox="option.centerBox" |
||||
:fixed="option.fixed" |
||||
:fixedBox="option.fixedBox" |
||||
:fixedNumber="option.fixedNumber" |
||||
:full="option.full" |
||||
:img="option.img" |
||||
:info="true" |
||||
:infoTrue="option.infoTrue" |
||||
:original="option.original" |
||||
:outputSize="option.size" |
||||
:outputType="option.outputType" |
||||
/> |
||||
</div> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button @click="dialogVisible = false">取 消</el-button> |
||||
<el-button type="primary" @click="finish">确认</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
|
||||
<el-dialog |
||||
:title="advert_title" |
||||
:close-on-click-modal="false" |
||||
:close-on-press-escape="false" |
||||
:visible.sync="bind_advert_sure" |
||||
center |
||||
width="666px"> |
||||
<el-dialog |
||||
:close-on-click-modal="false" |
||||
:close-on-press-escape="false" |
||||
:title="advert_title" |
||||
:visible.sync="bind_advert_sure" |
||||
center |
||||
width="666px"> |
||||
|
||||
<el-form :model="editadvertinfo" |
||||
label-width="180px" style="margin:0 auto;"> |
||||
<el-form :model="editadvertinfo" |
||||
label-width="180px" style="margin:0 auto;"> |
||||
|
||||
<el-form-item label="广告名称"> |
||||
<el-input v-model="editadvertinfo.ad_name" clearable/> |
||||
</el-form-item> |
||||
<el-form-item label="展示图片【高80像素】"> |
||||
<el-upload |
||||
action="#" |
||||
drag |
||||
:show-file-list="false" |
||||
:auto-upload="false" |
||||
accept=".png , .jpg , .jpeg" |
||||
style="max-height: 200px" |
||||
:on-change="onUploadChange"> |
||||
<img v-if="upload_pic_b" :src="upload_pic_b" class="avatar"> |
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
||||
</el-upload> |
||||
</el-form-item> |
||||
<el-form-item label="点击跳转连接"> |
||||
<el-input v-model="editadvertinfo.ad_uri" clearable/> |
||||
</el-form-item> |
||||
<el-form-item label="展示权重"> |
||||
<el-input-number v-model="editadvertinfo.weight" :min="0" :max="100" |
||||
label="展示权重"/> |
||||
</el-form-item> |
||||
<el-form-item label="是否发布"> |
||||
<el-switch |
||||
v-model="editadvertinfo.is_enable" |
||||
active-color="#13ce66" |
||||
inactive-color="#ff4949" |
||||
active-text="发布" |
||||
inactive-text="未发布"> |
||||
</el-switch> |
||||
</el-form-item> |
||||
<el-form-item label="备注"> |
||||
<el-input type="textarea" v-model="editadvertinfo.description" |
||||
:autosize="{ minRows: 3, maxRows: 6}"/> |
||||
</el-form-item> |
||||
</el-form> |
||||
<el-form-item label="广告名称"> |
||||
<el-input v-model="editadvertinfo.ad_name" clearable/> |
||||
</el-form-item> |
||||
<el-form-item label="展示图片【高80像素】"> |
||||
<el-upload |
||||
:auto-upload="false" |
||||
:on-change="onUploadChange" |
||||
:show-file-list="false" |
||||
accept=".png , .jpg , .jpeg" |
||||
action="#" |
||||
drag |
||||
style="max-height: 200px"> |
||||
<img v-if="upload_pic_b" :src="upload_pic_b" class="avatar"> |
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
||||
</el-upload> |
||||
</el-form-item> |
||||
<el-form-item label="点击跳转连接"> |
||||
<el-input v-model="editadvertinfo.ad_uri" clearable/> |
||||
</el-form-item> |
||||
<el-form-item label="展示权重"> |
||||
<el-input-number v-model="editadvertinfo.weight" :max="100" :min="0" |
||||
label="展示权重"/> |
||||
</el-form-item> |
||||
<el-form-item label="是否发布"> |
||||
<el-switch |
||||
v-model="editadvertinfo.is_enable" |
||||
active-color="#13ce66" |
||||
active-text="发布" |
||||
inactive-color="#ff4949" |
||||
inactive-text="未发布"> |
||||
</el-switch> |
||||
</el-form-item> |
||||
<el-form-item label="备注"> |
||||
<el-input v-model="editadvertinfo.description" :autosize="{ minRows: 3, maxRows: 6}" |
||||
type="textarea"/> |
||||
</el-form-item> |
||||
</el-form> |
||||
|
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button v-if="!disabled" @click="saveadvert">保存</el-button> |
||||
<el-button v-if="!disabled" @click="bind_advert_sure=false,init_advertinfo()">取消</el-button> |
||||
</div> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button v-if="!disabled" @click="saveadvert">保存</el-button> |
||||
<el-button v-if="!disabled" @click="bind_advert_sure=false,init_advertinfo()">取消</el-button> |
||||
</div> |
||||
|
||||
</el-dialog> |
||||
<div> |
||||
<el-input |
||||
style="width: 30%;margin-right: 30px;margin-bottom: 5px" |
||||
v-model="search_key" |
||||
clearable |
||||
placeholder="输入名称搜索"/> |
||||
<el-button type="primary" icon="el-icon-search" @click="handleCurrentChange(1)"> |
||||
搜索 |
||||
</el-button> |
||||
<div style="float: right"> |
||||
<el-button type="primary" plain @click="bind_advert_sure=true,init_advertinfo()"> |
||||
添加 |
||||
</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
<div> |
||||
<el-input |
||||
v-model="search_key" |
||||
clearable |
||||
placeholder="输入名称搜索" |
||||
style="width: 30%;margin-right: 30px;margin-bottom: 5px"/> |
||||
<el-button icon="el-icon-search" type="primary" @click="handleCurrentChange(1)"> |
||||
搜索 |
||||
</el-button> |
||||
<div style="float: right"> |
||||
<el-button plain type="primary" @click="bind_advert_sure=true,init_advertinfo()"> |
||||
添加 |
||||
</el-button> |
||||
</div> |
||||
|
||||
|
||||
<el-table |
||||
:data="advert_info_list" |
||||
v-loading="loading" |
||||
border |
||||
stripe |
||||
style="width: 100%"> |
||||
<el-table |
||||
v-loading="loading" |
||||
:data="advert_info_list" |
||||
border |
||||
stripe |
||||
style="width: 100%"> |
||||
|
||||
<el-table-column |
||||
fixed |
||||
prop="ad_name" |
||||
align="center" |
||||
label="名称"> |
||||
</el-table-column> |
||||
<el-table-column |
||||
fixed |
||||
prop="ad_pic" |
||||
align="center" |
||||
label="展示图片"> |
||||
<template slot-scope="scope"> |
||||
<img :src="scope.row.ad_pic" style="max-height: 80px;width: 100%;object-fit: cover"/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
fixed |
||||
prop="ad_uri" |
||||
align="center" |
||||
label="点击跳转连接"> |
||||
</el-table-column> |
||||
<el-table-column |
||||
align="center" |
||||
fixed |
||||
label="名称" |
||||
prop="ad_name"> |
||||
</el-table-column> |
||||
<el-table-column |
||||
align="center" |
||||
fixed |
||||
label="展示图片" |
||||
prop="ad_pic"> |
||||
<template slot-scope="scope"> |
||||
<img :src="scope.row.ad_pic" style="max-height: 80px;width: 100%;object-fit: cover"/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
align="center" |
||||
fixed |
||||
label="点击跳转连接" |
||||
prop="ad_uri"> |
||||
</el-table-column> |
||||
|
||||
|
||||
<el-table-column |
||||
prop="is_enable" |
||||
label="是否发布" |
||||
align="center" |
||||
width="110"> |
||||
<el-table-column |
||||
align="center" |
||||
label="是否发布" |
||||
prop="is_enable" |
||||
width="110"> |
||||
|
||||
<template slot-scope="scope"> |
||||
<el-button v-if="scope.row.is_enable === true" type="success" size="small">已发布 |
||||
</el-button> |
||||
<el-button v-else type="warning" size="small">未发布 |
||||
</el-button> |
||||
<template slot-scope="scope"> |
||||
<el-button v-if="scope.row.is_enable === true" size="small" type="success">已发布 |
||||
</el-button> |
||||
<el-button v-else size="small" type="warning">未发布 |
||||
</el-button> |
||||
|
||||
</template> |
||||
</template> |
||||
|
||||
</el-table-column> |
||||
<el-table-column |
||||
prop="weight" |
||||
width="110" |
||||
align="center" |
||||
label="展示权重"> |
||||
</el-table-column> |
||||
<el-table-column |
||||
:formatter="format_create_time" |
||||
prop="created_time" |
||||
width="170" |
||||
align="center" |
||||
label="添加时间" |
||||
> |
||||
</el-table-column> |
||||
<el-table-column |
||||
fixed="right" |
||||
label="操作" |
||||
align="center" |
||||
width="150"> |
||||
<template slot-scope="scope"> |
||||
</el-table-column> |
||||
<el-table-column |
||||
align="center" |
||||
label="展示权重" |
||||
prop="weight" |
||||
width="110"> |
||||
</el-table-column> |
||||
<el-table-column |
||||
:formatter="format_create_time" |
||||
align="center" |
||||
label="添加时间" |
||||
prop="created_time" |
||||
width="170" |
||||
> |
||||
</el-table-column> |
||||
<el-table-column |
||||
align="center" |
||||
fixed="right" |
||||
label="操作" |
||||
width="150"> |
||||
<template slot-scope="scope"> |
||||
|
||||
<el-button |
||||
size="mini" |
||||
@click="handleEditAdvert(scope.row)">编辑 |
||||
</el-button> |
||||
<el-button |
||||
size="mini" |
||||
type="danger" |
||||
@click="handleDeleteAdvert(scope.row)">删除 |
||||
</el-button> |
||||
<el-button |
||||
size="mini" |
||||
@click="handleEditAdvert(scope.row)">编辑 |
||||
</el-button> |
||||
<el-button |
||||
size="mini" |
||||
type="danger" |
||||
@click="handleDeleteAdvert(scope.row)">删除 |
||||
</el-button> |
||||
|
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
|
||||
</div> |
||||
<div style="margin-top: 20px;margin-bottom: 20px"> |
||||
<el-pagination |
||||
@size-change="handleSizeChange" |
||||
@current-change="handleCurrentChange" |
||||
:current-page.sync="pagination.currentPage" |
||||
:page-sizes="[10, 20, 50, 100]" |
||||
:page-size="pagination.pagesize" |
||||
layout="total,sizes, prev, pager, next" |
||||
:total="pagination.total"> |
||||
</el-pagination> |
||||
</div> |
||||
</el-main> |
||||
</div> |
||||
<div style="margin-top: 20px;margin-bottom: 20px"> |
||||
<el-pagination |
||||
:current-page.sync="pagination.currentPage" |
||||
:page-size="pagination.pagesize" |
||||
:page-sizes="[10, 20, 50, 100]" |
||||
:total="pagination.total" |
||||
layout="total,sizes, prev, pager, next" |
||||
@size-change="handleSizeChange" |
||||
@current-change="handleCurrentChange"> |
||||
</el-pagination> |
||||
</div> |
||||
</el-main> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
import {advertinfo} from "@/restful"; |
||||
import {VueCropper} from 'vue-cropper' |
||||
import {getUserInfoFun, AvatarUploadUtils, dataURLtoFile} from '@/utils' |
||||
import {advertinfo} from "@/restful"; |
||||
import {VueCropper} from 'vue-cropper' |
||||
import {AvatarUploadUtils, dataURLtoFile, getUserInfoFun} from '@/utils' |
||||
|
||||
export default { |
||||
name: "FirUserAdvert", |
||||
components: { |
||||
VueCropper, |
||||
}, |
||||
data() { |
||||
return { |
||||
dialogVisible: false, |
||||
option: { |
||||
img: '', // 裁剪图片的地址 |
||||
info: true, // 裁剪框的大小信息 |
||||
outputSize: 1, // 裁剪生成图片的质量 |
||||
outputType: 'jpeg', // 裁剪生成图片的格式 |
||||
canScale: true, // 图片是否允许滚轮缩放 |
||||
autoCrop: true, // 是否默认生成截图框 |
||||
autoCropWidth: 200, // 默认生成截图框宽度 |
||||
autoCropHeight: 80, // 默认生成截图框高度 |
||||
fixedBox: false, // 固定截图框大小 不允许改变 |
||||
fixed: false, // 是否开启截图框宽高固定比例 |
||||
fixedNumber: [7, 2], // 截图框的宽高比例 |
||||
full: true, // 是否输出原图比例的截图 |
||||
canMoveBox: true, // 截图框能否拖动 |
||||
original: false, // 上传图片按照原始比例渲染 |
||||
centerBox: true, // 截图框是否被限制在图片里面 |
||||
infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高 |
||||
}, |
||||
advert_title: '添加新宣传广告', |
||||
bind_advert_sure: false, |
||||
advert_info_list: [], |
||||
search_key: "", |
||||
pagination: {"currentPage": 1, "total": 0, "pagesize": 10}, |
||||
loading: false, |
||||
editadvertinfo: {}, |
||||
upload_file: undefined, |
||||
disabled: false, |
||||
upload_pic_b: '' |
||||
export default { |
||||
name: "FirUserAdvert", |
||||
components: { |
||||
VueCropper, |
||||
}, |
||||
data() { |
||||
return { |
||||
dialogVisible: false, |
||||
option: { |
||||
img: '', // 裁剪图片的地址 |
||||
info: true, // 裁剪框的大小信息 |
||||
outputSize: 1, // 裁剪生成图片的质量 |
||||
outputType: 'jpeg', // 裁剪生成图片的格式 |
||||
canScale: true, // 图片是否允许滚轮缩放 |
||||
autoCrop: true, // 是否默认生成截图框 |
||||
autoCropWidth: 200, // 默认生成截图框宽度 |
||||
autoCropHeight: 80, // 默认生成截图框高度 |
||||
fixedBox: false, // 固定截图框大小 不允许改变 |
||||
fixed: false, // 是否开启截图框宽高固定比例 |
||||
fixedNumber: [7, 2], // 截图框的宽高比例 |
||||
full: true, // 是否输出原图比例的截图 |
||||
canMoveBox: true, // 截图框能否拖动 |
||||
original: false, // 上传图片按照原始比例渲染 |
||||
centerBox: true, // 截图框是否被限制在图片里面 |
||||
infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高 |
||||
}, |
||||
advert_title: '添加新宣传广告', |
||||
bind_advert_sure: false, |
||||
advert_info_list: [], |
||||
search_key: "", |
||||
pagination: {"currentPage": 1, "total": 0, "pagesize": 10}, |
||||
loading: false, |
||||
editadvertinfo: {}, |
||||
upload_file: undefined, |
||||
disabled: false, |
||||
upload_pic_b: '' |
||||
} |
||||
}, |
||||
methods: { |
||||
finish() { |
||||
this.$refs.cropper.getCropData((data) => { |
||||
this.upload_pic_b = data; |
||||
this.upload_file = dataURLtoFile(data, this.upload_file.name); |
||||
this.dialogVisible = false; |
||||
}) |
||||
}, |
||||
init_advertinfo() { |
||||
this.editadvertinfo = { |
||||
'ad_name': '', |
||||
'ad_pic': '', |
||||
'ad_uri': '', |
||||
'is_enable': true, |
||||
'weight': 10 |
||||
}; |
||||
this.upload_file = undefined; |
||||
this.upload_pic_b = ''; |
||||
}, |
||||
saveadvert() { |
||||
if (this.editadvertinfo.ad_pic && this.editadvertinfo.ad_pic.indexOf("http") > -1) { |
||||
advertinfo(data => { |
||||
if (data.code === 1000) { |
||||
if (data.data && data.data.id) { |
||||
if (this.upload_file) { |
||||
this.beforeAvatarUpload(this.upload_file, data.data.id, 'update') |
||||
} else { |
||||
this.$message.success("更新成功") |
||||
} |
||||
} else { |
||||
this.$message.error("操作失败 " + data.msg) |
||||
} |
||||
}, |
||||
methods: { |
||||
finish() { |
||||
this.$refs.cropper.getCropData((data) => { |
||||
this.upload_pic_b = data; |
||||
this.upload_file = dataURLtoFile(data, this.upload_file.name); |
||||
this.dialogVisible = false; |
||||
}) |
||||
}, |
||||
init_advertinfo() { |
||||
this.editadvertinfo = { |
||||
'ad_name': '', |
||||
'ad_pic': '', |
||||
'ad_uri': '', |
||||
'is_enable': true, |
||||
'weight': 10 |
||||
}; |
||||
this.upload_file = undefined; |
||||
this.upload_pic_b = ''; |
||||
}, |
||||
saveadvert() { |
||||
if (this.editadvertinfo.ad_pic && this.editadvertinfo.ad_pic.indexOf("http") > -1) { |
||||
advertinfo(data => { |
||||
if (data.code === 1000) { |
||||
if (data.data && data.data.id) { |
||||
if (this.upload_file) { |
||||
this.beforeAvatarUpload(this.upload_file, data.data.id, 'update') |
||||
} else { |
||||
this.$message.success("更新成功") |
||||
} |
||||
} else { |
||||
this.$message.error("操作失败 " + data.msg) |
||||
} |
||||
|
||||
} else { |
||||
this.$message.error("更新失败 " + data.msg) |
||||
} |
||||
this.loading = false; |
||||
}, {methods: 'PUT', data: this.editadvertinfo}) |
||||
} else { |
||||
advertinfo(data => { |
||||
if (data.code === 1000) { |
||||
if (data.data && data.data.id) { |
||||
this.beforeAvatarUpload(this.upload_file, data.data.id, 'create') |
||||
} else { |
||||
this.$message.error("操作失败 " + data.msg) |
||||
} |
||||
} else { |
||||
this.$message.error("更新失败 " + data.msg) |
||||
} |
||||
this.loading = false; |
||||
}, {methods: 'PUT', data: this.editadvertinfo}) |
||||
} else { |
||||
advertinfo(data => { |
||||
if (data.code === 1000) { |
||||
if (data.data && data.data.id) { |
||||
this.beforeAvatarUpload(this.upload_file, data.data.id, 'create') |
||||
} else { |
||||
this.$message.error("操作失败 " + data.msg) |
||||
} |
||||
|
||||
} else { |
||||
this.$message.error("添加失败 " + data.msg) |
||||
} |
||||
this.loading = false; |
||||
}, {methods: 'POST', data: this.editadvertinfo}) |
||||
} |
||||
}, |
||||
beforeAvatarUpload(file, id, act) { |
||||
return AvatarUploadUtils(this, file, { |
||||
'app_id': this.$store.state.userinfo.uid, |
||||
'upload_key': file.name, |
||||
'ftype': 'advert', |
||||
'ext': {'id': id} |
||||
// eslint-disable-next-line no-unused-vars |
||||
}, res => { |
||||
this.get_data_from_tabname(); |
||||
this.upload_file = undefined; |
||||
let msg = '添加成功'; |
||||
if (act === 'update') { |
||||
msg = '更新成功' |
||||
} else { |
||||
this.bind_advert_sure = false; |
||||
this.upload_pic_b = ''; |
||||
} |
||||
this.$message.success(msg); |
||||
} else { |
||||
this.$message.error("添加失败 " + data.msg) |
||||
} |
||||
this.loading = false; |
||||
}, {methods: 'POST', data: this.editadvertinfo}) |
||||
} |
||||
}, |
||||
beforeAvatarUpload(file, id, act) { |
||||
return AvatarUploadUtils(this, file, { |
||||
'app_id': this.$store.state.userinfo.uid, |
||||
'upload_key': file.name, |
||||
'ftype': 'advert', |
||||
'ext': {'id': id} |
||||
// eslint-disable-next-line no-unused-vars |
||||
}, res => { |
||||
this.get_data_from_tabname(); |
||||
this.upload_file = undefined; |
||||
let msg = '添加成功'; |
||||
if (act === 'update') { |
||||
msg = '更新成功' |
||||
} else { |
||||
this.bind_advert_sure = false; |
||||
this.upload_pic_b = ''; |
||||
} |
||||
this.$message.success(msg); |
||||
|
||||
}); |
||||
}); |
||||
|
||||
}, |
||||
// eslint-disable-next-line no-unused-vars |
||||
onUploadChange(file, fileList) { |
||||
this.upload_file = file.raw; |
||||
const reader = new FileReader(); |
||||
reader.readAsDataURL(file.raw); |
||||
// eslint-disable-next-line no-unused-vars |
||||
reader.onload = res => { |
||||
this.upload_pic_b = reader.result; |
||||
this.option.img = reader.result; |
||||
this.dialogVisible = true |
||||
}; |
||||
}, |
||||
copy_success() { |
||||
this.$message.success('复制剪切板成功'); |
||||
}, |
||||
handleSizeChange(val) { |
||||
this.pagination.pagesize = val; |
||||
this.get_data_from_tabname({ |
||||
"size": this.pagination.pagesize, |
||||
"page": 1 |
||||
}) |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.pagination.currentPage = val; |
||||
this.get_data_from_tabname({ |
||||
"size": this.pagination.pagesize, |
||||
"page": this.pagination.currentPage |
||||
}) |
||||
}, |
||||
handleEditAdvert(ad_info) { |
||||
this.editadvertinfo = ad_info; |
||||
this.upload_pic_b = ad_info.ad_pic; |
||||
this.advert_title = "编辑广告信息"; |
||||
this.bind_advert_sure = true; |
||||
}, |
||||
handleDeleteAdvert(ad_info) { |
||||
this.loading = true; |
||||
advertinfo(data => { |
||||
if (data.code === 1000) { |
||||
this.advert_info_list = data.data; |
||||
this.pagination.total = data.count; |
||||
this.$message.success("操作成功") |
||||
} else { |
||||
this.$message.error("信息获取失败") |
||||
} |
||||
this.loading = false; |
||||
}, {methods: 'DELETE', data: {'pk': ad_info.id}}) |
||||
}, |
||||
get_data_from_tabname(data = {}) { |
||||
data.search_key = this.search_key.replace(/^\s+|\s+$/g, ""); |
||||
this.UseradvertFun(data) |
||||
}, |
||||
UseradvertFun(params) { |
||||
this.loading = true; |
||||
advertinfo(data => { |
||||
if (data.code === 1000) { |
||||
this.advert_info_list = data.data; |
||||
this.pagination.total = data.count; |
||||
} else { |
||||
this.$message.error("信息获取失败") |
||||
} |
||||
this.loading = false; |
||||
}, {methods: 'GET', data: params}) |
||||
}, |
||||
}, |
||||
// eslint-disable-next-line no-unused-vars |
||||
onUploadChange(file, fileList) { |
||||
this.upload_file = file.raw; |
||||
const reader = new FileReader(); |
||||
reader.readAsDataURL(file.raw); |
||||
// eslint-disable-next-line no-unused-vars |
||||
reader.onload = res => { |
||||
this.upload_pic_b = reader.result; |
||||
this.option.img = reader.result; |
||||
this.dialogVisible = true |
||||
}; |
||||
}, |
||||
copy_success() { |
||||
this.$message.success('复制剪切板成功'); |
||||
}, |
||||
handleSizeChange(val) { |
||||
this.pagination.pagesize = val; |
||||
this.get_data_from_tabname({ |
||||
"size": this.pagination.pagesize, |
||||
"page": 1 |
||||
}) |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.pagination.currentPage = val; |
||||
this.get_data_from_tabname({ |
||||
"size": this.pagination.pagesize, |
||||
"page": this.pagination.currentPage |
||||
}) |
||||
}, |
||||
handleEditAdvert(ad_info) { |
||||
this.editadvertinfo = ad_info; |
||||
this.upload_pic_b = ad_info.ad_pic; |
||||
this.advert_title = "编辑广告信息"; |
||||
this.bind_advert_sure = true; |
||||
}, |
||||
handleDeleteAdvert(ad_info) { |
||||
this.loading = true; |
||||
advertinfo(data => { |
||||
if (data.code === 1000) { |
||||
this.advert_info_list = data.data; |
||||
this.pagination.total = data.count; |
||||
this.$message.success("操作成功") |
||||
} else { |
||||
this.$message.error("信息获取失败") |
||||
} |
||||
this.loading = false; |
||||
}, {methods: 'DELETE', data: {'pk': ad_info.id}}) |
||||
}, |
||||
get_data_from_tabname(data = {}) { |
||||
data.search_key = this.search_key.replace(/^\s+|\s+$/g, ""); |
||||
this.UseradvertFun(data) |
||||
}, |
||||
UseradvertFun(params) { |
||||
this.loading = true; |
||||
advertinfo(data => { |
||||
if (data.code === 1000) { |
||||
this.advert_info_list = data.data; |
||||
this.pagination.total = data.count; |
||||
} else { |
||||
this.$message.error("信息获取失败") |
||||
} |
||||
this.loading = false; |
||||
}, {methods: 'GET', data: params}) |
||||
}, |
||||
|
||||
format_create_time(row) { |
||||
return this.format_time(row.created_time) |
||||
}, |
||||
format_create_time(row) { |
||||
return this.format_time(row.created_time) |
||||
}, |
||||
|
||||
format_time(stime) { |
||||
if (stime) { |
||||
stime = stime.split(".")[0].split("T"); |
||||
return stime[0] + " " + stime[1] |
||||
} else |
||||
return ''; |
||||
}, |
||||
}, mounted() { |
||||
getUserInfoFun(this); |
||||
this.get_data_from_tabname(); |
||||
}, |
||||
} |
||||
format_time(stime) { |
||||
if (stime) { |
||||
stime = stime.split(".")[0].split("T"); |
||||
return stime[0] + " " + stime[1] |
||||
} else |
||||
return ''; |
||||
}, |
||||
}, mounted() { |
||||
getUserInfoFun(this); |
||||
this.get_data_from_tabname(); |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.el-main { |
||||
margin: 20px auto 100px; |
||||
width: 1166px; |
||||
position: relative; |
||||
padding-bottom: 1px; |
||||
color: #9b9b9b; |
||||
-webkit-font-smoothing: antialiased; |
||||
border-radius: 1%; |
||||
} |
||||
.el-main { |
||||
margin: 20px auto 100px; |
||||
width: 1166px; |
||||
position: relative; |
||||
padding-bottom: 1px; |
||||
color: #9b9b9b; |
||||
-webkit-font-smoothing: antialiased; |
||||
border-radius: 1%; |
||||
} |
||||
|
||||
.avatar-uploader-icon { |
||||
font-size: 28px; |
||||
color: #8c939d; |
||||
width: 178px; |
||||
height: 178px; |
||||
line-height: 178px; |
||||
text-align: center; |
||||
} |
||||
.avatar-uploader-icon { |
||||
font-size: 28px; |
||||
color: #8c939d; |
||||
width: 178px; |
||||
height: 178px; |
||||
line-height: 178px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.avatar { |
||||
max-height: 80px; |
||||
margin-top: 50px; |
||||
object-fit: cover; |
||||
} |
||||
.avatar { |
||||
max-height: 80px; |
||||
margin-top: 50px; |
||||
object-fit: cover; |
||||
} |
||||
|
||||
</style> |
||||
|
||||
@ -1,248 +1,250 @@ |
||||
<template> |
||||
<el-main> |
||||
<el-dialog |
||||
:title="domain_title" |
||||
:close-on-click-modal="false" |
||||
:close-on-press-escape="false" |
||||
:visible.sync="bind_domain_sure" |
||||
width="666px"> |
||||
<bind-domain v-if="bind_domain_sure" transitionName="bind-app-domain" :app_id="current_domain_info.app_id" |
||||
:domain_type="current_domain_info.domain_type" :domain_state="true"/> |
||||
</el-dialog> |
||||
<div> |
||||
<el-input |
||||
style="width: 30%;margin-right: 30px;margin-bottom: 5px" |
||||
v-model="search_key" |
||||
clearable |
||||
placeholder="输入域名或者应用名称搜索"/> |
||||
<el-button type="primary" icon="el-icon-search" @click="handleCurrentChange(1)"> |
||||
搜索 |
||||
<el-main> |
||||
<el-dialog |
||||
:close-on-click-modal="false" |
||||
:close-on-press-escape="false" |
||||
:title="domain_title" |
||||
:visible.sync="bind_domain_sure" |
||||
width="666px"> |
||||
<bind-domain v-if="bind_domain_sure" :app_id="current_domain_info.app_id" :domain_state="true" |
||||
:domain_type="current_domain_info.domain_type" transitionName="bind-app-domain"/> |
||||
</el-dialog> |
||||
<div> |
||||
<el-input |
||||
v-model="search_key" |
||||
clearable |
||||
placeholder="输入域名或者应用名称搜索" |
||||
style="width: 30%;margin-right: 30px;margin-bottom: 5px"/> |
||||
<el-button icon="el-icon-search" type="primary" @click="handleCurrentChange(1)"> |
||||
搜索 |
||||
</el-button> |
||||
<div style="float: right"> |
||||
<el-button plain type="primary" @click="$store.dispatch('dodomainaction', 1)"> |
||||
设置下载页域名 |
||||
</el-button> |
||||
<el-button v-if="$store.state.userinfo&&$store.state.userinfo.role >1" plain type="primary" |
||||
@click="$store.dispatch('dodomainaction', 2)"> |
||||
设置下载码域名 |
||||
</el-button> |
||||
</div> |
||||
|
||||
|
||||
<el-table |
||||
v-loading="loading" |
||||
:data="domain_info_list" |
||||
border |
||||
stripe |
||||
style="width: 100%"> |
||||
|
||||
<el-table-column |
||||
align="center" |
||||
fixed |
||||
label="绑定域名" |
||||
prop="domain_name"> |
||||
<template slot-scope="scope"> |
||||
<el-tooltip content="点击复制到剪贴板"> |
||||
<el-link v-if="scope.row.domain_name" v-clipboard:copy="scope.row.domain_name" |
||||
v-clipboard:success="copy_success" |
||||
:underline="false">{{ scope.row.domain_name }} |
||||
</el-link> |
||||
</el-tooltip> |
||||
</template> |
||||
</el-table-column> |
||||
|
||||
<el-table-column |
||||
align="center" |
||||
label="状态" |
||||
prop="is_enable" |
||||
width="110"> |
||||
|
||||
<template slot-scope="scope"> |
||||
<el-tooltip v-if="scope.row.is_enable === true" content="点击查看域名绑定信息" placement="left-start"> |
||||
<el-button size="small" type="success" @click="show_bind_domain_info(scope.row)">已绑定 |
||||
</el-button> |
||||
</el-tooltip> |
||||
<el-tooltip v-else content="激活下载域名绑定信息" placement="left-start"> |
||||
|
||||
<el-button size="small" type="warning" @click="show_bind_domain_info(scope.row)">继续绑定 |
||||
</el-button> |
||||
</el-tooltip> |
||||
|
||||
</template> |
||||
|
||||
</el-table-column> |
||||
|
||||
|
||||
<el-table-column |
||||
align="center" |
||||
label="域名类型" |
||||
prop="domain_type" |
||||
width="260"> |
||||
<template slot-scope="scope"> |
||||
<el-tooltip v-if="scope.row.domain_type===2 && scope.row.app_info" content="点击查看应用信息" |
||||
placement="right-start"> |
||||
<el-button plain size="small" type="info" @click="appInfos(scope.row.app_info)">{{ |
||||
format_domain_type(scope.row) |
||||
}} |
||||
</el-button> |
||||
</el-tooltip> |
||||
<el-button v-else-if="scope.row.domain_type===1" plain size="small" type="success">{{ |
||||
format_domain_type(scope.row) |
||||
}} |
||||
</el-button> |
||||
<div style="float: right"> |
||||
<el-button type="primary" plain @click="$store.dispatch('dodomainaction', 1)"> |
||||
设置下载页域名 |
||||
</el-button> |
||||
<el-button type="primary" plain v-if="$store.state.userinfo&&$store.state.userinfo.role >1" |
||||
@click="$store.dispatch('dodomainaction', 2)"> |
||||
设置下载码域名 |
||||
</el-button> |
||||
</div> |
||||
|
||||
|
||||
<el-table |
||||
:data="domain_info_list" |
||||
v-loading="loading" |
||||
border |
||||
stripe |
||||
style="width: 100%"> |
||||
|
||||
<el-table-column |
||||
fixed |
||||
prop="domain_name" |
||||
align="center" |
||||
label="绑定域名"> |
||||
<template slot-scope="scope"> |
||||
<el-tooltip content="点击复制到剪贴板"> |
||||
<el-link v-if="scope.row.domain_name" :underline="false" |
||||
v-clipboard:copy="scope.row.domain_name" |
||||
v-clipboard:success="copy_success">{{ scope.row.domain_name }} |
||||
</el-link> |
||||
</el-tooltip> |
||||
</template> |
||||
</el-table-column> |
||||
|
||||
<el-table-column |
||||
prop="is_enable" |
||||
label="状态" |
||||
align="center" |
||||
width="110"> |
||||
|
||||
<template slot-scope="scope"> |
||||
<el-tooltip content="点击查看域名绑定信息" v-if="scope.row.is_enable === true" placement="left-start"> |
||||
<el-button type="success" size="small" @click="show_bind_domain_info(scope.row)">已绑定 |
||||
</el-button> |
||||
</el-tooltip> |
||||
<el-tooltip content="激活下载域名绑定信息" v-else placement="left-start"> |
||||
|
||||
<el-button type="warning" size="small" @click="show_bind_domain_info(scope.row)">继续绑定 |
||||
</el-button> |
||||
</el-tooltip> |
||||
|
||||
</template> |
||||
|
||||
</el-table-column> |
||||
|
||||
|
||||
<el-table-column |
||||
prop="domain_type" |
||||
align="center" |
||||
label="域名类型" |
||||
width="260"> |
||||
<template slot-scope="scope"> |
||||
<el-tooltip content="点击查看应用信息" v-if="scope.row.domain_type===2 && scope.row.app_info" |
||||
placement="right-start"> |
||||
<el-button type="info" plain size="small" @click="appInfos(scope.row.app_info)">{{ |
||||
format_domain_type(scope.row) }} |
||||
</el-button> |
||||
</el-tooltip> |
||||
<el-button v-else-if="scope.row.domain_type===1" type="success" plain size="small">{{ |
||||
format_domain_type(scope.row) }} |
||||
</el-button> |
||||
<el-button v-else type="primary" plain size="small">{{ format_domain_type(scope.row) }} |
||||
</el-button> |
||||
|
||||
</template> |
||||
</el-table-column> |
||||
|
||||
<el-table-column |
||||
:formatter="format_create_time" |
||||
prop="created_time" |
||||
width="170" |
||||
align="center" |
||||
label="域名绑定时间" |
||||
> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
|
||||
</div> |
||||
<div style="margin-top: 20px;margin-bottom: 20px"> |
||||
<el-pagination |
||||
@size-change="handleSizeChange" |
||||
@current-change="handleCurrentChange" |
||||
:current-page.sync="pagination.currentPage" |
||||
:page-sizes="[10, 20, 50, 100]" |
||||
:page-size="pagination.pagesize" |
||||
layout="total,sizes, prev, pager, next" |
||||
:total="pagination.total"> |
||||
</el-pagination> |
||||
</div> |
||||
</el-main> |
||||
<el-button v-else plain size="small" type="primary">{{ format_domain_type(scope.row) }} |
||||
</el-button> |
||||
|
||||
</template> |
||||
</el-table-column> |
||||
|
||||
<el-table-column |
||||
:formatter="format_create_time" |
||||
align="center" |
||||
label="域名绑定时间" |
||||
prop="created_time" |
||||
width="170" |
||||
> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
|
||||
</div> |
||||
<div style="margin-top: 20px;margin-bottom: 20px"> |
||||
<el-pagination |
||||
:current-page.sync="pagination.currentPage" |
||||
:page-size="pagination.pagesize" |
||||
:page-sizes="[10, 20, 50, 100]" |
||||
:total="pagination.total" |
||||
layout="total,sizes, prev, pager, next" |
||||
@size-change="handleSizeChange" |
||||
@current-change="handleCurrentChange"> |
||||
</el-pagination> |
||||
</div> |
||||
</el-main> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
import {domaininfo} from "@/restful"; |
||||
import BindDomain from "@/components/base/BindDomain"; |
||||
import {getUserInfoFun} from '@/utils' |
||||
|
||||
export default { |
||||
name: "FirUserDomain", |
||||
components: {BindDomain}, |
||||
data() { |
||||
return { |
||||
domain_title: '绑定应用专属下载页域名', |
||||
bind_domain_sure: false, |
||||
domain_info_list: [], |
||||
search_key: "", |
||||
pagination: {"currentPage": 1, "total": 0, "pagesize": 10}, |
||||
domain_type_choices: [], |
||||
current_domain_info: {'domain_type': 1, 'app_id': null}, |
||||
loading: false, |
||||
} |
||||
}, |
||||
methods: { |
||||
show_bind_domain_info(domain_info) { |
||||
this.bind_domain_sure = true; |
||||
let app_id = null; |
||||
if (domain_info.app_info && domain_info.app_info.app_id) { |
||||
app_id = domain_info.app_info.app_id; |
||||
} |
||||
this.current_domain_info.app_id = app_id; |
||||
this.current_domain_info.domain_type = domain_info.domain_type; |
||||
this.domain_title = this.format_domain_type(domain_info) + ' 绑定详情'; |
||||
}, |
||||
appInfos(app_info) { |
||||
if (app_info && app_info.app_id) { |
||||
this.$router.push({name: 'FirAppInfossecurity', params: {id: app_info.app_id}}) |
||||
} |
||||
}, |
||||
copy_success() { |
||||
this.$message.success('复制剪切板成功'); |
||||
}, |
||||
handleSizeChange(val) { |
||||
this.pagination.pagesize = val; |
||||
this.get_data_from_tabname({ |
||||
"size": this.pagination.pagesize, |
||||
"page": 1 |
||||
}) |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.pagination.currentPage = val; |
||||
this.get_data_from_tabname({ |
||||
"size": this.pagination.pagesize, |
||||
"page": this.pagination.currentPage |
||||
}) |
||||
}, |
||||
|
||||
get_data_from_tabname(data = {}) { |
||||
data.search_key = this.search_key.replace(/^\s+|\s+$/g, ""); |
||||
this.UserDomainFun(data) |
||||
}, |
||||
UserDomainFun(params) { |
||||
this.loading = true; |
||||
domaininfo(data => { |
||||
if (data.code === 1000) { |
||||
this.domain_info_list = data.data; |
||||
this.pagination.total = data.count; |
||||
this.domain_type_choices = data.domain_type_choices; |
||||
|
||||
} else { |
||||
this.$message.error("域名绑定信息获取失败") |
||||
} |
||||
this.loading = false; |
||||
}, {methods: 'GET', data: params}) |
||||
}, |
||||
format_choices(key, obj) { |
||||
for (let i = 0; i < obj.length; i++) { |
||||
if (key === obj[i].id) { |
||||
return obj[i].name |
||||
} |
||||
} |
||||
return "未知" |
||||
}, |
||||
|
||||
format_domain_type(row) { |
||||
if (row.domain_type === 2) { |
||||
return "应用" + row.app_info.name + "域名" |
||||
} |
||||
return this.format_choices(row.domain_type, this.domain_type_choices) |
||||
}, |
||||
|
||||
format_create_time(row) { |
||||
return this.format_time(row.created_time) |
||||
}, |
||||
|
||||
format_time(stime) { |
||||
if (stime) { |
||||
stime = stime.split(".")[0].split("T"); |
||||
return stime[0] + " " + stime[1] |
||||
} else |
||||
return ''; |
||||
}, |
||||
}, mounted() { |
||||
getUserInfoFun(this); |
||||
this.get_data_from_tabname(); |
||||
}, watch: { |
||||
'$store.state.domian_show_state': function () { |
||||
if (this.$store.state.domian_show_state) { |
||||
this.bind_domain_sure = false; |
||||
this.get_data_from_tabname(); |
||||
} |
||||
}, |
||||
} |
||||
import {domaininfo} from "@/restful"; |
||||
import BindDomain from "@/components/base/BindDomain"; |
||||
import {getUserInfoFun} from '@/utils' |
||||
|
||||
export default { |
||||
name: "FirUserDomain", |
||||
components: {BindDomain}, |
||||
data() { |
||||
return { |
||||
domain_title: '绑定应用专属下载页域名', |
||||
bind_domain_sure: false, |
||||
domain_info_list: [], |
||||
search_key: "", |
||||
pagination: {"currentPage": 1, "total": 0, "pagesize": 10}, |
||||
domain_type_choices: [], |
||||
current_domain_info: {'domain_type': 1, 'app_id': null}, |
||||
loading: false, |
||||
} |
||||
}, |
||||
methods: { |
||||
show_bind_domain_info(domain_info) { |
||||
this.bind_domain_sure = true; |
||||
let app_id = null; |
||||
if (domain_info.app_info && domain_info.app_info.app_id) { |
||||
app_id = domain_info.app_info.app_id; |
||||
} |
||||
this.current_domain_info.app_id = app_id; |
||||
this.current_domain_info.domain_type = domain_info.domain_type; |
||||
this.domain_title = this.format_domain_type(domain_info) + ' 绑定详情'; |
||||
}, |
||||
appInfos(app_info) { |
||||
if (app_info && app_info.app_id) { |
||||
this.$router.push({name: 'FirAppInfossecurity', params: {id: app_info.app_id}}) |
||||
} |
||||
}, |
||||
copy_success() { |
||||
this.$message.success('复制剪切板成功'); |
||||
}, |
||||
handleSizeChange(val) { |
||||
this.pagination.pagesize = val; |
||||
this.get_data_from_tabname({ |
||||
"size": this.pagination.pagesize, |
||||
"page": 1 |
||||
}) |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.pagination.currentPage = val; |
||||
this.get_data_from_tabname({ |
||||
"size": this.pagination.pagesize, |
||||
"page": this.pagination.currentPage |
||||
}) |
||||
}, |
||||
|
||||
get_data_from_tabname(data = {}) { |
||||
data.search_key = this.search_key.replace(/^\s+|\s+$/g, ""); |
||||
this.UserDomainFun(data) |
||||
}, |
||||
UserDomainFun(params) { |
||||
this.loading = true; |
||||
domaininfo(data => { |
||||
if (data.code === 1000) { |
||||
this.domain_info_list = data.data; |
||||
this.pagination.total = data.count; |
||||
this.domain_type_choices = data.domain_type_choices; |
||||
|
||||
} else { |
||||
this.$message.error("域名绑定信息获取失败") |
||||
} |
||||
this.loading = false; |
||||
}, {methods: 'GET', data: params}) |
||||
}, |
||||
format_choices(key, obj) { |
||||
for (let i = 0; i < obj.length; i++) { |
||||
if (key === obj[i].id) { |
||||
return obj[i].name |
||||
} |
||||
} |
||||
return "未知" |
||||
}, |
||||
|
||||
format_domain_type(row) { |
||||
if (row.domain_type === 2) { |
||||
return "应用" + row.app_info.name + "域名" |
||||
} |
||||
return this.format_choices(row.domain_type, this.domain_type_choices) |
||||
}, |
||||
|
||||
format_create_time(row) { |
||||
return this.format_time(row.created_time) |
||||
}, |
||||
|
||||
format_time(stime) { |
||||
if (stime) { |
||||
stime = stime.split(".")[0].split("T"); |
||||
return stime[0] + " " + stime[1] |
||||
} else |
||||
return ''; |
||||
}, |
||||
}, mounted() { |
||||
getUserInfoFun(this); |
||||
this.get_data_from_tabname(); |
||||
}, watch: { |
||||
'$store.state.domian_show_state': function () { |
||||
if (this.$store.state.domian_show_state) { |
||||
this.bind_domain_sure = false; |
||||
this.get_data_from_tabname(); |
||||
} |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.el-main { |
||||
margin: 20px auto 100px; |
||||
width: 1166px; |
||||
position: relative; |
||||
padding-bottom: 1px; |
||||
color: #9b9b9b; |
||||
-webkit-font-smoothing: antialiased; |
||||
border-radius: 1%; |
||||
} |
||||
.el-main { |
||||
margin: 20px auto 100px; |
||||
width: 1166px; |
||||
position: relative; |
||||
padding-bottom: 1px; |
||||
color: #9b9b9b; |
||||
-webkit-font-smoothing: antialiased; |
||||
border-radius: 1%; |
||||
} |
||||
|
||||
</style> |
||||
|
||||
@ -1,507 +1,508 @@ |
||||
<template> |
||||
<el-main> |
||||
|
||||
<el-dialog |
||||
:visible.sync="wx_pay" |
||||
width="49%" |
||||
:close-on-click-modal="false" |
||||
:close-on-press-escape="false" |
||||
center> |
||||
<div slot="title" style="margin-bottom: 10px"> |
||||
<el-row> |
||||
<el-col :span="12"> |
||||
<p class="detail">请在<span style="color: #f89303">24小时</span>内完成支付，超时订单将自动取消。</p> |
||||
<p class="detail">支付订单号： <span>{{ current_order_info.order_number }}</span></p> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<p style="margin-top: 26px"><span class="order_text">订单金额（元）：</span><span class="amount">{{format_actual_amount(current_order_info) }}</span> |
||||
</p> |
||||
</el-col> |
||||
|
||||
</el-row> |
||||
|
||||
</div> |
||||
<div class="pay_wx"> |
||||
<div> |
||||
<div class="icon-weixin" :style="{background:`url(${pay_image.order_wx}) 0 0/100%`}"></div> |
||||
<vue-qr :margin="qrinfo.margin" |
||||
class="code-wrap" |
||||
:logoScale="qrinfo.logoScale" |
||||
:logoCornerRadius="qrinfo.logoCornerRadius" |
||||
:correctLevel="qrinfo.correctLevel" |
||||
:text="pay_code_url" :size="266" |
||||
ref="qr"> |
||||
</vue-qr> |
||||
<div class="tip-btn pay_wx"><span class="icon" :style="{backgroundImage:`url(${pay_image.scan})`}"/><span |
||||
class="text">请使用微信扫码支付</span></div> |
||||
<p style="margin-top: 30px">支付完成之后，请刷新该页面，确认支付状态</p> |
||||
</div> |
||||
</div> |
||||
|
||||
</el-dialog> |
||||
|
||||
<el-dialog |
||||
:visible.sync="show_order_info" |
||||
width="780px" |
||||
:close-on-click-modal="false" |
||||
:close-on-press-escape="false" |
||||
title="订单详情" |
||||
top="6vh" |
||||
center> |
||||
<div> |
||||
|
||||
<el-form :model="current_order_info" |
||||
label-width="80px" style="margin:0 auto;"> |
||||
|
||||
<el-form-item label-width="110px" label="平台订单ID"> |
||||
<el-input :value="current_order_info.order_number"/> |
||||
</el-form-item> |
||||
|
||||
|
||||
<el-form-item label-width="110px" label="第三方订单ID"> |
||||
<el-input :value="current_order_info.payment_number"/> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label-width="110px" label="付款方式"> |
||||
<el-input :value="format_payment_type(current_order_info)"/> |
||||
</el-form-item> |
||||
<el-form-item label-width="110px" label="订单状态"> |
||||
<el-input :value="format_status_type(current_order_info)"/> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label-width="110px" label="订单类型"> |
||||
<el-input :value="format_order_type(current_order_info)"/> |
||||
</el-form-item> |
||||
<el-form-item label-width="110px" label="实付金额"> |
||||
<el-input :value="format_actual_amount(current_order_info)"/> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label-width="110px" label="购买数量"> |
||||
<el-input |
||||
:value="current_order_info.actual_download_times"/> |
||||
</el-form-item> |
||||
<el-main> |
||||
|
||||
<el-dialog |
||||
:close-on-click-modal="false" |
||||
:close-on-press-escape="false" |
||||
:visible.sync="wx_pay" |
||||
center |
||||
width="49%"> |
||||
<div slot="title" style="margin-bottom: 10px"> |
||||
<el-row> |
||||
<el-col :span="12"> |
||||
<p class="detail">请在<span style="color: #f89303">24小时</span>内完成支付，超时订单将自动取消。</p> |
||||
<p class="detail">支付订单号： <span>{{ current_order_info.order_number }}</span></p> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<p style="margin-top: 26px"><span class="order_text">订单金额（元）：</span><span |
||||
class="amount">{{ format_actual_amount(current_order_info) }}</span> |
||||
</p> |
||||
</el-col> |
||||
|
||||
</el-row> |
||||
|
||||
</div> |
||||
<div class="pay_wx"> |
||||
<div> |
||||
<div :style="{background:`url(${pay_image.order_wx}) 0 0/100%`}" class="icon-weixin"></div> |
||||
<vue-qr ref="qr" |
||||
:correctLevel="qrinfo.correctLevel" |
||||
:logoCornerRadius="qrinfo.logoCornerRadius" |
||||
:logoScale="qrinfo.logoScale" |
||||
:margin="qrinfo.margin" |
||||
:size="266" :text="pay_code_url" |
||||
class="code-wrap"> |
||||
</vue-qr> |
||||
<div class="tip-btn pay_wx"><span :style="{backgroundImage:`url(${pay_image.scan})`}" class="icon"/><span |
||||
class="text">请使用微信扫码支付</span></div> |
||||
<p style="margin-top: 30px">支付完成之后，请刷新该页面，确认支付状态</p> |
||||
</div> |
||||
</div> |
||||
|
||||
</el-dialog> |
||||
|
||||
<el-dialog |
||||
:close-on-click-modal="false" |
||||
:close-on-press-escape="false" |
||||
:visible.sync="show_order_info" |
||||
center |
||||
title="订单详情" |
||||
top="6vh" |
||||
width="780px"> |
||||
<div> |
||||
|
||||
<el-form :model="current_order_info" |
||||
label-width="80px" style="margin:0 auto;"> |
||||
|
||||
<el-form-item label="平台订单ID" label-width="110px"> |
||||
<el-input :value="current_order_info.order_number"/> |
||||
</el-form-item> |
||||
|
||||
|
||||
<el-form-item label="第三方订单ID" label-width="110px"> |
||||
<el-input :value="current_order_info.payment_number"/> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="付款方式" label-width="110px"> |
||||
<el-input :value="format_payment_type(current_order_info)"/> |
||||
</el-form-item> |
||||
<el-form-item label="订单状态" label-width="110px"> |
||||
<el-input :value="format_status_type(current_order_info)"/> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="订单类型" label-width="110px"> |
||||
<el-input :value="format_order_type(current_order_info)"/> |
||||
</el-form-item> |
||||
<el-form-item label="实付金额" label-width="110px"> |
||||
<el-input :value="format_actual_amount(current_order_info)"/> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="购买数量" label-width="110px"> |
||||
<el-input |
||||
:value="current_order_info.actual_download_times"/> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label-width="110px" label="赠送数量"> |
||||
<el-input |
||||
:value="current_order_info.actual_download_gift_times"/> |
||||
</el-form-item> |
||||
<el-form-item label="赠送数量" label-width="110px"> |
||||
<el-input |
||||
:value="current_order_info.actual_download_gift_times"/> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label-width="110px" label="订单创建时间"> |
||||
<el-input :value="format_create_time(current_order_info)"/> |
||||
</el-form-item> |
||||
<el-form-item label="订单创建时间" label-width="110px"> |
||||
<el-input :value="format_create_time(current_order_info)"/> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label-width="110px" label="订单支付时间"> |
||||
<el-input :value="format_pay_time(current_order_info)"/> |
||||
</el-form-item> |
||||
<el-form-item label="订单支付时间" label-width="110px"> |
||||
<el-input :value="format_pay_time(current_order_info)"/> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label-width="110px" label="订单取消时间"> |
||||
<el-input :value="format_cancel_time(current_order_info)"/> |
||||
</el-form-item> |
||||
<el-form-item label="订单取消时间" label-width="110px"> |
||||
<el-input :value="format_cancel_time(current_order_info)"/> |
||||
</el-form-item> |
||||
|
||||
|
||||
<el-form-item label-width="110px" label="备注"> |
||||
<el-input :value="current_order_info.description"/> |
||||
</el-form-item> |
||||
<el-form-item label="备注" label-width="110px"> |
||||
<el-input :value="current_order_info.description"/> |
||||
</el-form-item> |
||||
|
||||
</el-form> |
||||
</el-form> |
||||
|
||||
|
||||
</div> |
||||
<span slot="footer"> |
||||
</div> |
||||
<span slot="footer"> |
||||
<el-button @click="$router.push({'name':'FirContact'})"> 如对充值订单有疑问，请联系我们</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
|
||||
</el-dialog> |
||||
|
||||
|
||||
<div> |
||||
<el-input |
||||
v-model="order_id_seach" |
||||
clearable |
||||
placeholder="输入订单ID" |
||||
style="width: 30%;margin-right: 30px;margin-bottom: 5px"/> |
||||
<el-button icon="el-icon-search" type="primary" @click="handleCurrentChange(1)"> |
||||
搜索 |
||||
</el-button> |
||||
|
||||
<el-table |
||||
v-loading="loading" |
||||
:data="order_info_list" |
||||
border |
||||
stripe |
||||
style="width: 100%"> |
||||
|
||||
<el-table-column |
||||
fixed |
||||
label="系统订单ID" |
||||
prop="order_number"> |
||||
|
||||
</el-table-column> |
||||
|
||||
<el-table-column |
||||
align="center" |
||||
label="状态" |
||||
prop="status" |
||||
width="110"> |
||||
|
||||
<template slot-scope="scope"> |
||||
<div v-if="scope.row.status === 1 || scope.row.status === 2"> |
||||
<el-button size="small" |
||||
type="primary" @click="goto_pay(scope.row)"> {{ format_status_type(scope.row) }} |
||||
</el-button> |
||||
</div> |
||||
<div v-else-if="scope.row.status === 0"> |
||||
<el-button size="small" |
||||
type="success" @click="click_order_info(scope.row)"> {{ format_status_type(scope.row) }} |
||||
</el-button> |
||||
</div> |
||||
<div v-else-if="scope.row.status === 4 || scope.row.status ===5|| scope.row.status ===6"> |
||||
<el-button size="small" |
||||
type="danger" @click="click_order_info(scope.row)"> {{ format_status_type(scope.row) }} |
||||
</el-button> |
||||
</div> |
||||
<div v-else> |
||||
<el-button size="small" |
||||
type="warning" @click="click_order_info(scope.row)"> {{ format_status_type(scope.row) }} |
||||
</el-button> |
||||
</div> |
||||
|
||||
<div> |
||||
<el-input |
||||
style="width: 30%;margin-right: 30px;margin-bottom: 5px" |
||||
v-model="order_id_seach" |
||||
clearable |
||||
placeholder="输入订单ID"/> |
||||
<el-button type="primary" icon="el-icon-search" @click="handleCurrentChange(1)"> |
||||
搜索 |
||||
</template> |
||||
|
||||
</el-table-column> |
||||
|
||||
<el-table-column |
||||
:formatter="format_actual_amount" |
||||
label="实付金额" |
||||
prop="actual_amount" |
||||
width="100"> |
||||
</el-table-column> |
||||
|
||||
|
||||
<el-table-column |
||||
label="购买数量" |
||||
prop="actual_download_times" |
||||
width="120"> |
||||
</el-table-column> |
||||
|
||||
<el-table-column |
||||
label="赠送数量" |
||||
prop="actual_download_gift_times" |
||||
width="90"> |
||||
</el-table-column> |
||||
<el-table-column |
||||
:formatter="format_payment_type" |
||||
align="center" |
||||
label="支付方式" |
||||
prop="payment_type" |
||||
width="80"> |
||||
</el-table-column> |
||||
|
||||
<el-table-column |
||||
:formatter="format_create_time" |
||||
align="center" |
||||
label="订单创建时间" |
||||
prop="created_time" |
||||
width="170" |
||||
> |
||||
</el-table-column> |
||||
|
||||
<el-table-column |
||||
fixed="right" |
||||
label="查看详细" |
||||
width="145"> |
||||
<template slot-scope="scope"> |
||||
|
||||
<el-button |
||||
size="mini" |
||||
@click="click_order_info(scope.row)">详情 |
||||
</el-button> |
||||
|
||||
<el-table |
||||
:data="order_info_list" |
||||
v-loading="loading" |
||||
border |
||||
stripe |
||||
style="width: 100%"> |
||||
|
||||
<el-table-column |
||||
fixed |
||||
prop="order_number" |
||||
label="系统订单ID"> |
||||
|
||||
</el-table-column> |
||||
|
||||
<el-table-column |
||||
prop="status" |
||||
label="状态" |
||||
align="center" |
||||
width="110"> |
||||
|
||||
<template slot-scope="scope"> |
||||
<div v-if="scope.row.status === 1 || scope.row.status === 2"> |
||||
<el-button @click="goto_pay(scope.row)" |
||||
type="primary" size="small"> {{ format_status_type(scope.row)}} |
||||
</el-button> |
||||
</div> |
||||
<div v-else-if="scope.row.status === 0"> |
||||
<el-button @click="click_order_info(scope.row)" |
||||
type="success" size="small"> {{ format_status_type(scope.row)}} |
||||
</el-button> |
||||
</div> |
||||
<div v-else-if="scope.row.status === 4 || scope.row.status ===5|| scope.row.status ===6"> |
||||
<el-button @click="click_order_info(scope.row)" |
||||
type="danger" size="small"> {{ format_status_type(scope.row)}} |
||||
</el-button> |
||||
</div> |
||||
<div v-else> |
||||
<el-button @click="click_order_info(scope.row)" |
||||
type="warning" size="small"> {{ format_status_type(scope.row)}} |
||||
</el-button> |
||||
</div> |
||||
|
||||
</template> |
||||
|
||||
</el-table-column> |
||||
|
||||
<el-table-column |
||||
:formatter="format_actual_amount" |
||||
prop="actual_amount" |
||||
label="实付金额" |
||||
width="100"> |
||||
</el-table-column> |
||||
|
||||
|
||||
<el-table-column |
||||
prop="actual_download_times" |
||||
label="购买数量" |
||||
width="120"> |
||||
</el-table-column> |
||||
|
||||
<el-table-column |
||||
prop="actual_download_gift_times" |
||||
label="赠送数量" |
||||
width="90"> |
||||
</el-table-column> |
||||
<el-table-column |
||||
:formatter="format_payment_type" |
||||
prop="payment_type" |
||||
align="center" |
||||
label="支付方式" |
||||
width="80"> |
||||
</el-table-column> |
||||
|
||||
<el-table-column |
||||
:formatter="format_create_time" |
||||
prop="created_time" |
||||
width="170" |
||||
align="center" |
||||
label="订单创建时间" |
||||
> |
||||
</el-table-column> |
||||
|
||||
<el-table-column |
||||
fixed="right" |
||||
label="查看详细" |
||||
width="145"> |
||||
<template slot-scope="scope"> |
||||
|
||||
<el-button |
||||
size="mini" |
||||
@click="click_order_info(scope.row)">详情 |
||||
</el-button> |
||||
<el-button v-if="scope.row.status === 1 || scope.row.status === 2" |
||||
size="mini" type="danger" |
||||
@click="cancel_order(scope.row)">取消 |
||||
</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
|
||||
</div> |
||||
<div style="margin-top: 20px;margin-bottom: 20px"> |
||||
<el-pagination |
||||
@size-change="handleSizeChange" |
||||
@current-change="handleCurrentChange" |
||||
:current-page.sync="pagination.currentPage" |
||||
:page-sizes="[10, 20, 50, 100]" |
||||
:page-size="pagination.pagesize" |
||||
layout="total,sizes, prev, pager, next" |
||||
:total="pagination.total"> |
||||
</el-pagination> |
||||
</div> |
||||
</el-main> |
||||
<el-button v-if="scope.row.status === 1 || scope.row.status === 2" |
||||
size="mini" type="danger" |
||||
@click="cancel_order(scope.row)">取消 |
||||
</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
|
||||
</div> |
||||
<div style="margin-top: 20px;margin-bottom: 20px"> |
||||
<el-pagination |
||||
:current-page.sync="pagination.currentPage" |
||||
:page-size="pagination.pagesize" |
||||
:page-sizes="[10, 20, 50, 100]" |
||||
:total="pagination.total" |
||||
layout="total,sizes, prev, pager, next" |
||||
@size-change="handleSizeChange" |
||||
@current-change="handleCurrentChange"> |
||||
</el-pagination> |
||||
</div> |
||||
</el-main> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
import {my_order} from "@/restful"; |
||||
import {getUserInfoFun} from '@/utils' |
||||
import VueQr from 'vue-qr'; |
||||
|
||||
export default { |
||||
name: "FirUserOrders", |
||||
components: { |
||||
VueQr |
||||
}, |
||||
data() { |
||||
return { |
||||
wx_pay: false, |
||||
pay_code_url: '', |
||||
pay_image: { |
||||
'scan': require('@/assets/pay/pay-scan.png'), |
||||
'order_wx': require('@/assets/pay/order-weixin.png'), |
||||
}, |
||||
qrinfo: { |
||||
logoScale: 0.3, |
||||
logoCornerRadius: 12, |
||||
correctLevel: 3, |
||||
margin: 20 |
||||
}, |
||||
order_info_list: [], |
||||
order_id_seach: "", |
||||
pagination: {"currentPage": 1, "total": 0, "pagesize": 10}, |
||||
order_type_choices: [], |
||||
status_choices: [], |
||||
payment_type_choices: [], |
||||
show_order_info: false, |
||||
current_order_info: {}, |
||||
loading: false, |
||||
import {my_order} from "@/restful"; |
||||
import {getUserInfoFun} from '@/utils' |
||||
import VueQr from 'vue-qr'; |
||||
|
||||
export default { |
||||
name: "FirUserOrders", |
||||
components: { |
||||
VueQr |
||||
}, |
||||
data() { |
||||
return { |
||||
wx_pay: false, |
||||
pay_code_url: '', |
||||
pay_image: { |
||||
'scan': require('@/assets/pay/pay-scan.png'), |
||||
'order_wx': require('@/assets/pay/order-weixin.png'), |
||||
}, |
||||
qrinfo: { |
||||
logoScale: 0.3, |
||||
logoCornerRadius: 12, |
||||
correctLevel: 3, |
||||
margin: 20 |
||||
}, |
||||
order_info_list: [], |
||||
order_id_seach: "", |
||||
pagination: {"currentPage": 1, "total": 0, "pagesize": 10}, |
||||
order_type_choices: [], |
||||
status_choices: [], |
||||
payment_type_choices: [], |
||||
show_order_info: false, |
||||
current_order_info: {}, |
||||
loading: false, |
||||
} |
||||
}, |
||||
methods: { |
||||
cancel_order(order) { |
||||
my_order(res => { |
||||
if (res.code === 1000) { |
||||
this.$message.success("操作成功"); |
||||
this.get_data_from_tabname({ |
||||
"size": this.pagination.pagesize, |
||||
"page": this.pagination.currentPage |
||||
}) |
||||
} else { |
||||
this.$message.error("失败了 " + res.msg) |
||||
} |
||||
}, { |
||||
methods: 'PUT', data: {order_number: order.order_number, act: 'cancel'}, |
||||
}) |
||||
}, |
||||
goto_pay(order) { |
||||
this.current_order_info = order; |
||||
my_order(res => { |
||||
if (res.code === 1000) { |
||||
let data = res.data; |
||||
if (data && data.url) { |
||||
|
||||
if (data && data.type === 'WX') { |
||||
this.pay_code_url = data.url; |
||||
this.wx_pay = true; |
||||
this.$message.success("请用微信扫描支付"); |
||||
} else if (data && data.type === 'ALI') { |
||||
let pay_url = data.url; |
||||
if (pay_url && pay_url.length > 10) { |
||||
this.$message.success("正在跳转支付宝支付平台"); |
||||
window.location.href = pay_url |
||||
// window.open(pay_url, '_blank', ''); |
||||
} |
||||
} else { |
||||
this.$message.error("支付获取失败 " + res.msg) |
||||
} |
||||
}, |
||||
methods: { |
||||
cancel_order(order) { |
||||
my_order(res => { |
||||
if (res.code === 1000) { |
||||
this.$message.success("操作成功"); |
||||
this.get_data_from_tabname({ |
||||
"size": this.pagination.pagesize, |
||||
"page": this.pagination.currentPage |
||||
}) |
||||
} else { |
||||
this.$message.error("失败了 " + res.msg) |
||||
} |
||||
}, { |
||||
methods: 'PUT', data: {order_number: order.order_number, act: 'cancel'}, |
||||
}) |
||||
}, |
||||
goto_pay(order) { |
||||
this.current_order_info = order; |
||||
my_order(res => { |
||||
if (res.code === 1000) { |
||||
let data = res.data; |
||||
if (data && data.url) { |
||||
|
||||
if (data && data.type === 'WX') { |
||||
this.pay_code_url = data.url; |
||||
this.wx_pay = true; |
||||
this.$message.success("请用微信扫描支付"); |
||||
} else if (data && data.type === 'ALI') { |
||||
let pay_url = data.url; |
||||
if (pay_url && pay_url.length > 10) { |
||||
this.$message.success("正在跳转支付宝支付平台"); |
||||
window.location.href = pay_url |
||||
// window.open(pay_url, '_blank', ''); |
||||
} |
||||
} else { |
||||
this.$message.error("支付获取失败 " + res.msg) |
||||
} |
||||
} else { |
||||
this.$message.error("下订单异常，请联系管理员"); |
||||
} |
||||
} else { |
||||
this.$message.error("失败了 " + res.msg) |
||||
} |
||||
}, { |
||||
methods: 'POST', data: {order_number: order.order_number}, |
||||
}) |
||||
}, |
||||
click_order_info(order) { |
||||
if (order.status === 1 || order.status === 2) { |
||||
my_order(res => { |
||||
if (res.code === 1000) { |
||||
this.get_data_from_tabname() |
||||
} else { |
||||
this.$message.error("失败了 " + res.msg) |
||||
} |
||||
}, { |
||||
methods: 'PUT', data: {order_number: order.order_number, act: 'status'}, |
||||
}); |
||||
} |
||||
this.show_order_info = true; |
||||
this.current_order_info = order; |
||||
|
||||
}, |
||||
handleSizeChange(val) { |
||||
this.pagination.pagesize = val; |
||||
this.get_data_from_tabname({ |
||||
"size": this.pagination.pagesize, |
||||
"page": 1 |
||||
}) |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.pagination.currentPage = val; |
||||
this.get_data_from_tabname({ |
||||
"size": this.pagination.pagesize, |
||||
"page": this.pagination.currentPage |
||||
}) |
||||
}, |
||||
|
||||
get_data_from_tabname(data = {}) { |
||||
data.order_id = this.order_id_seach.replace(/^\s+|\s+$/g, ""); |
||||
this.MyOrderFun(data) |
||||
}, |
||||
|
||||
format_choices(key, obj) { |
||||
for (let i = 0; i < obj.length; i++) { |
||||
if (key === obj[i].id) { |
||||
return obj[i].name |
||||
} |
||||
} |
||||
return "未知" |
||||
}, |
||||
|
||||
format_payment_type(row) { |
||||
return this.format_choices(row.payment_type, this.payment_type_choices) |
||||
}, |
||||
|
||||
format_status_type(row) { |
||||
return this.format_choices(row.status, this.status_choices) |
||||
}, |
||||
|
||||
format_order_type(row) { |
||||
return this.format_choices(row.order_type, this.order_type_choices) |
||||
}, |
||||
|
||||
format_actual_amount(row) { |
||||
return '￥ ' + (row.actual_amount / 100).toString() |
||||
}, |
||||
|
||||
format_create_time(row) { |
||||
return this.format_time(row.created_time) |
||||
}, |
||||
|
||||
format_pay_time(row) { |
||||
return this.format_time(row.pay_time) |
||||
}, |
||||
|
||||
format_cancel_time(row) { |
||||
return this.format_time(row.cancel_time) |
||||
}, |
||||
|
||||
format_time(stime) { |
||||
if (stime) { |
||||
stime = stime.split(".")[0].split("T"); |
||||
return stime[0] + " " + stime[1] |
||||
} else |
||||
return ''; |
||||
}, |
||||
MyOrderFun(params) { |
||||
this.loading = true; |
||||
my_order(data => { |
||||
if (data.code === 1000) { |
||||
this.order_info_list = data.data; |
||||
this.pagination.total = data.count; |
||||
this.payment_type_choices = data.payment_type_choices; |
||||
this.status_choices = data.status_choices; |
||||
this.order_type_choices = data.order_type_choices; |
||||
if (this.order_info_list.length === 1) { |
||||
this.current_order_info = this.order_info_list[0]; |
||||
let out_trade_no = this.$route.params.out_trade_no; |
||||
if (out_trade_no) { |
||||
this.goto_pay(this.current_order_info); |
||||
this.$route.params.out_trade_no = undefined; |
||||
} |
||||
} |
||||
} else if (data.code === 1008) { |
||||
this.$message.error(data.msg); |
||||
} else { |
||||
this.$message.error("操作失败") |
||||
} |
||||
this.loading = false; |
||||
}, {methods: 'GET', data: params}) |
||||
}, |
||||
}, mounted() { |
||||
getUserInfoFun(this); |
||||
} else { |
||||
this.$message.error("下订单异常，请联系管理员"); |
||||
} |
||||
} else { |
||||
this.$message.error("失败了 " + res.msg) |
||||
} |
||||
}, { |
||||
methods: 'POST', data: {order_number: order.order_number}, |
||||
}) |
||||
}, |
||||
click_order_info(order) { |
||||
if (order.status === 1 || order.status === 2) { |
||||
my_order(res => { |
||||
if (res.code === 1000) { |
||||
this.get_data_from_tabname() |
||||
} else { |
||||
this.$message.error("失败了 " + res.msg) |
||||
} |
||||
}, { |
||||
methods: 'PUT', data: {order_number: order.order_number, act: 'status'}, |
||||
}); |
||||
} |
||||
this.show_order_info = true; |
||||
this.current_order_info = order; |
||||
|
||||
}, |
||||
handleSizeChange(val) { |
||||
this.pagination.pagesize = val; |
||||
this.get_data_from_tabname({ |
||||
"size": this.pagination.pagesize, |
||||
"page": 1 |
||||
}) |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.pagination.currentPage = val; |
||||
this.get_data_from_tabname({ |
||||
"size": this.pagination.pagesize, |
||||
"page": this.pagination.currentPage |
||||
}) |
||||
}, |
||||
|
||||
get_data_from_tabname(data = {}) { |
||||
data.order_id = this.order_id_seach.replace(/^\s+|\s+$/g, ""); |
||||
this.MyOrderFun(data) |
||||
}, |
||||
|
||||
format_choices(key, obj) { |
||||
for (let i = 0; i < obj.length; i++) { |
||||
if (key === obj[i].id) { |
||||
return obj[i].name |
||||
} |
||||
} |
||||
return "未知" |
||||
}, |
||||
|
||||
format_payment_type(row) { |
||||
return this.format_choices(row.payment_type, this.payment_type_choices) |
||||
}, |
||||
|
||||
format_status_type(row) { |
||||
return this.format_choices(row.status, this.status_choices) |
||||
}, |
||||
|
||||
format_order_type(row) { |
||||
return this.format_choices(row.order_type, this.order_type_choices) |
||||
}, |
||||
|
||||
format_actual_amount(row) { |
||||
return '￥ ' + (row.actual_amount / 100).toString() |
||||
}, |
||||
|
||||
format_create_time(row) { |
||||
return this.format_time(row.created_time) |
||||
}, |
||||
|
||||
format_pay_time(row) { |
||||
return this.format_time(row.pay_time) |
||||
}, |
||||
|
||||
format_cancel_time(row) { |
||||
return this.format_time(row.cancel_time) |
||||
}, |
||||
|
||||
format_time(stime) { |
||||
if (stime) { |
||||
stime = stime.split(".")[0].split("T"); |
||||
return stime[0] + " " + stime[1] |
||||
} else |
||||
return ''; |
||||
}, |
||||
MyOrderFun(params) { |
||||
this.loading = true; |
||||
my_order(data => { |
||||
if (data.code === 1000) { |
||||
this.order_info_list = data.data; |
||||
this.pagination.total = data.count; |
||||
this.payment_type_choices = data.payment_type_choices; |
||||
this.status_choices = data.status_choices; |
||||
this.order_type_choices = data.order_type_choices; |
||||
if (this.order_info_list.length === 1) { |
||||
this.current_order_info = this.order_info_list[0]; |
||||
let out_trade_no = this.$route.params.out_trade_no; |
||||
if (out_trade_no) { |
||||
this.order_id_seach = out_trade_no; |
||||
this.goto_pay(this.current_order_info); |
||||
this.$route.params.out_trade_no = undefined; |
||||
} |
||||
this.get_data_from_tabname(); |
||||
}, filters: {} |
||||
} |
||||
} else if (data.code === 1008) { |
||||
this.$message.error(data.msg); |
||||
} else { |
||||
this.$message.error("操作失败") |
||||
} |
||||
this.loading = false; |
||||
}, {methods: 'GET', data: params}) |
||||
}, |
||||
}, mounted() { |
||||
getUserInfoFun(this); |
||||
let out_trade_no = this.$route.params.out_trade_no; |
||||
if (out_trade_no) { |
||||
this.order_id_seach = out_trade_no; |
||||
} |
||||
this.get_data_from_tabname(); |
||||
}, filters: {} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.el-main { |
||||
margin: 20px auto 100px; |
||||
width: 1166px; |
||||
position: relative; |
||||
padding-bottom: 1px; |
||||
color: #9b9b9b; |
||||
-webkit-font-smoothing: antialiased; |
||||
border-radius: 1%; |
||||
} |
||||
|
||||
.icon-weixin { |
||||
width: 137px; |
||||
height: 35px; |
||||
margin-left: 50px; |
||||
} |
||||
|
||||
.code-wrap { |
||||
width: 240px; |
||||
height: 240px; |
||||
border: 1px solid #c3c3c3; |
||||
margin-top: 23px; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.tip-btn { |
||||
background: #2bbc4d; |
||||
width: 240px; |
||||
height: 60px; |
||||
} |
||||
|
||||
.icon { |
||||
width: 26px; |
||||
height: 26px; |
||||
background-size: 100%; |
||||
display: inline-block; |
||||
margin-right: 11px; |
||||
} |
||||
|
||||
.text { |
||||
font-family: PingFang-SC-Bold; |
||||
font-size: 16px; |
||||
color: #fff; |
||||
letter-spacing: -.1px; |
||||
} |
||||
|
||||
.pay_wx { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
.order_text { |
||||
font-family: PingFang-SC-Medium; |
||||
font-size: 14px; |
||||
color: #787e85; |
||||
letter-spacing: 0; |
||||
vertical-align: text-top; |
||||
} |
||||
|
||||
.amount { |
||||
font-family: Avenir-Heavy; |
||||
font-size: 24px; |
||||
color: #ff8000; |
||||
letter-spacing: 0; |
||||
} |
||||
.el-main { |
||||
margin: 20px auto 100px; |
||||
width: 1166px; |
||||
position: relative; |
||||
padding-bottom: 1px; |
||||
color: #9b9b9b; |
||||
-webkit-font-smoothing: antialiased; |
||||
border-radius: 1%; |
||||
} |
||||
|
||||
.icon-weixin { |
||||
width: 137px; |
||||
height: 35px; |
||||
margin-left: 50px; |
||||
} |
||||
|
||||
.code-wrap { |
||||
width: 240px; |
||||
height: 240px; |
||||
border: 1px solid #c3c3c3; |
||||
margin-top: 23px; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.tip-btn { |
||||
background: #2bbc4d; |
||||
width: 240px; |
||||
height: 60px; |
||||
} |
||||
|
||||
.icon { |
||||
width: 26px; |
||||
height: 26px; |
||||
background-size: 100%; |
||||
display: inline-block; |
||||
margin-right: 11px; |
||||
} |
||||
|
||||
.text { |
||||
font-family: PingFang-SC-Bold; |
||||
font-size: 16px; |
||||
color: #fff; |
||||
letter-spacing: -.1px; |
||||
} |
||||
|
||||
.pay_wx { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
.order_text { |
||||
font-family: PingFang-SC-Medium; |
||||
font-size: 14px; |
||||
color: #787e85; |
||||
letter-spacing: 0; |
||||
vertical-align: text-top; |
||||
} |
||||
|
||||
.amount { |
||||
font-family: Avenir-Heavy; |
||||
font-size: 24px; |
||||
color: #ff8000; |
||||
letter-spacing: 0; |
||||
} |
||||
</style> |
||||
|
||||
@ -1,205 +1,205 @@ |
||||
<template> |
||||
<div class="main"> |
||||
<div class="user-info"> |
||||
|
||||
<el-upload |
||||
class="avatar-uploader" |
||||
action="#" |
||||
:show-file-list="false" |
||||
accept=".png , .jpg , .jpeg" |
||||
:before-upload="beforeAvatarUpload"> |
||||
<img v-if="imageUrl" :src="imageUrl" class="avatar"> |
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
||||
</el-upload> |
||||
|
||||
<div class="name"> |
||||
<input v-model="userinfo.first_name" maxlength="8" @focusout="update_name"> |
||||
</div> |
||||
|
||||
<div class="user_pro_tabs"> |
||||
|
||||
<el-row :gutter="12" class="row"> |
||||
<el-col :span="tspan" :offset="3"> |
||||
<div class="col-4"> |
||||
<a @click="$router.push({name:'FirUserProfileInfo'})" ref="userinfo" class=""> |
||||
<div class="main"> |
||||
<div class="user-info"> |
||||
|
||||
<el-upload |
||||
:before-upload="beforeAvatarUpload" |
||||
:show-file-list="false" |
||||
accept=".png , .jpg , .jpeg" |
||||
action="#" |
||||
class="avatar-uploader"> |
||||
<img v-if="imageUrl" :src="imageUrl" class="avatar"> |
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
||||
</el-upload> |
||||
|
||||
<div class="name"> |
||||
<input v-model="userinfo.first_name" maxlength="8" @focusout="update_name"> |
||||
</div> |
||||
|
||||
<div class="user_pro_tabs"> |
||||
|
||||
<el-row :gutter="12" class="row"> |
||||
<el-col :offset="3" :span="tspan"> |
||||
<div class="col-4"> |
||||
<a ref="userinfo" class="" @click="$router.push({name:'FirUserProfileInfo'})"> |
||||
<span> |
||||
<i class="el-icon-user"></i> |
||||
</span> |
||||
个人资料 |
||||
</a> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="tspan"> |
||||
<div class="col-4"> |
||||
<a ref="changepwd" class="" @click="$router.push({name:'FirUserProfileChangePwd'})"> |
||||
<span><i class="el-icon-lock"></i></span> |
||||
修改密码 |
||||
</a> |
||||
</div> |
||||
|
||||
</el-col> |
||||
|
||||
<el-col :span="6"> |
||||
<div class="col-4"> |
||||
<a ref="storage" class="" @click="$router.push({name:'FirUserProfileCertification'})"> |
||||
<span><i class="el-icon-coin"></i></span> |
||||
实名认证 |
||||
</a> |
||||
</div> |
||||
|
||||
</el-col> |
||||
|
||||
</el-row> |
||||
|
||||
个人资料 |
||||
</a> |
||||
</div> |
||||
<div style="margin-top: 50px"> |
||||
<router-view></router-view> |
||||
</el-col> |
||||
<el-col :span="tspan"> |
||||
<div class="col-4"> |
||||
<a ref="changepwd" class="" @click="$router.push({name:'FirUserProfileChangePwd'})"> |
||||
<span><i class="el-icon-lock"></i></span> |
||||
修改密码 |
||||
</a> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
</template> |
||||
</el-col> |
||||
|
||||
<script> |
||||
import {getuserpicurl, userinfos} from '@/restful'; |
||||
import {AvatarUploadUtils} from "@/utils"; |
||||
|
||||
export default { |
||||
name: "FirUserProfileBase", |
||||
data() { |
||||
return { |
||||
imageUrl: '', |
||||
userinfo: {}, |
||||
uploadconf: {}, |
||||
tspan: 6, |
||||
} |
||||
}, |
||||
methods: { |
||||
updateUserInfo(datainfo) { |
||||
userinfos(data => { |
||||
if (data.code === 1000) { |
||||
this.userinfo = data.data; |
||||
this.$store.dispatch("doUserinfo", data.data); |
||||
this.$store.dispatch('doucurrentapp', {}); |
||||
this.imageUrl = data.data.head_img; |
||||
if (datainfo.data) { |
||||
this.$message.success("更新成功") |
||||
} |
||||
} else { |
||||
this.$message.error("更新失败") |
||||
} |
||||
}, datainfo) |
||||
}, |
||||
update_name() { |
||||
this.updateUserInfo({"methods": 'PUT', 'data': {"first_name": this.userinfo.first_name}}); |
||||
}, |
||||
beforeAvatarUpload(file) { |
||||
return AvatarUploadUtils(this, file, { |
||||
'app_id': this.userinfo.uid, |
||||
'upload_key': file.name, |
||||
'ftype': 'head' |
||||
// eslint-disable-next-line no-unused-vars |
||||
}, res => { |
||||
this.updateUserInfo({"methods": 'GET'}); |
||||
}); |
||||
|
||||
}, |
||||
setfunactive(item) { |
||||
for (let key in this.$refs) { |
||||
if (key === item) { |
||||
this.$refs[key].classList.add('active'); |
||||
} else { |
||||
this.$refs[key].classList.remove('active'); |
||||
} |
||||
} |
||||
}, |
||||
autoSetInfoIndex() { |
||||
if (this.$store.state.userInfoIndex === 0) { |
||||
this.setfunactive('userinfo'); |
||||
} else if (this.$store.state.userInfoIndex === 1) { |
||||
this.setfunactive('changepwd'); |
||||
} else if (this.$store.state.userInfoIndex === 2) { |
||||
this.setfunactive('storage'); |
||||
} |
||||
} |
||||
}, mounted() { |
||||
this.autoSetInfoIndex(); |
||||
this.updateUserInfo({"methods": 'GET'}); |
||||
}, watch: { |
||||
'$store.state.userInfoIndex': function () { |
||||
this.autoSetInfoIndex(); |
||||
}, |
||||
}, filters: {}, computed: { |
||||
getuppicurl() { |
||||
return getuserpicurl() |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
<el-col :span="6"> |
||||
<div class="col-4"> |
||||
<a ref="storage" class="" @click="$router.push({name:'FirUserProfileCertification'})"> |
||||
<span><i class="el-icon-coin"></i></span> |
||||
实名认证 |
||||
</a> |
||||
</div> |
||||
|
||||
<style scoped> |
||||
.main { |
||||
position: relative; |
||||
padding-bottom: 1px; |
||||
color: #9b9b9b; |
||||
-webkit-font-smoothing: antialiased; |
||||
border-radius: 1%; |
||||
} |
||||
</el-col> |
||||
|
||||
.user-info { |
||||
position: relative; |
||||
text-align: center; |
||||
margin: 46px auto 100px; |
||||
width: 1166px; |
||||
} |
||||
</el-row> |
||||
|
||||
.avatar { |
||||
height: 100px; |
||||
width: 100px; |
||||
border-radius: 50%; |
||||
display: block; |
||||
} |
||||
</div> |
||||
<div style="margin-top: 50px"> |
||||
<router-view></router-view> |
||||
</div> |
||||
|
||||
.name { |
||||
text-align: center; |
||||
padding-bottom: 20px; |
||||
</div> |
||||
|
||||
} |
||||
</div> |
||||
</template> |
||||
|
||||
.name input { |
||||
text-align: center; |
||||
color: #889eff; |
||||
margin: 36px auto 0; |
||||
width: 280px; |
||||
padding: 0; |
||||
border: none; |
||||
background-color: transparent; |
||||
font-size: 30px; |
||||
<script> |
||||
import {getuserpicurl, userinfos} from '@/restful'; |
||||
import {AvatarUploadUtils} from "@/utils"; |
||||
|
||||
export default { |
||||
name: "FirUserProfileBase", |
||||
data() { |
||||
return { |
||||
imageUrl: '', |
||||
userinfo: {}, |
||||
uploadconf: {}, |
||||
tspan: 6, |
||||
} |
||||
|
||||
.user_pro_tabs a { |
||||
width: 100%; |
||||
font-size: 16px; |
||||
text-align: center; |
||||
display: inline-block; |
||||
line-height: 48px; |
||||
height: 48px; |
||||
border-bottom: 1px solid #BABFC3; |
||||
text-decoration: none; |
||||
color: #BABFC3; |
||||
|
||||
}, |
||||
methods: { |
||||
updateUserInfo(datainfo) { |
||||
userinfos(data => { |
||||
if (data.code === 1000) { |
||||
this.userinfo = data.data; |
||||
this.$store.dispatch("doUserinfo", data.data); |
||||
this.$store.dispatch('doucurrentapp', {}); |
||||
this.imageUrl = data.data.head_img; |
||||
if (datainfo.data) { |
||||
this.$message.success("更新成功") |
||||
} |
||||
} else { |
||||
this.$message.error("更新失败") |
||||
} |
||||
}, datainfo) |
||||
}, |
||||
update_name() { |
||||
this.updateUserInfo({"methods": 'PUT', 'data': {"first_name": this.userinfo.first_name}}); |
||||
}, |
||||
beforeAvatarUpload(file) { |
||||
return AvatarUploadUtils(this, file, { |
||||
'app_id': this.userinfo.uid, |
||||
'upload_key': file.name, |
||||
'ftype': 'head' |
||||
// eslint-disable-next-line no-unused-vars |
||||
}, res => { |
||||
this.updateUserInfo({"methods": 'GET'}); |
||||
}); |
||||
|
||||
}, |
||||
setfunactive(item) { |
||||
for (let key in this.$refs) { |
||||
if (key === item) { |
||||
this.$refs[key].classList.add('active'); |
||||
} else { |
||||
this.$refs[key].classList.remove('active'); |
||||
} |
||||
} |
||||
}, |
||||
autoSetInfoIndex() { |
||||
if (this.$store.state.userInfoIndex === 0) { |
||||
this.setfunactive('userinfo'); |
||||
} else if (this.$store.state.userInfoIndex === 1) { |
||||
this.setfunactive('changepwd'); |
||||
} else if (this.$store.state.userInfoIndex === 2) { |
||||
this.setfunactive('storage'); |
||||
} |
||||
} |
||||
|
||||
.user_pro_tabs a > span { |
||||
margin-right: 16px; |
||||
vertical-align: middle |
||||
}, mounted() { |
||||
this.autoSetInfoIndex(); |
||||
this.updateUserInfo({"methods": 'GET'}); |
||||
}, watch: { |
||||
'$store.state.userInfoIndex': function () { |
||||
this.autoSetInfoIndex(); |
||||
}, |
||||
}, filters: {}, computed: { |
||||
getuppicurl() { |
||||
return getuserpicurl() |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
.user_pro_tabs a.active { |
||||
color: #7e5ef8; |
||||
border-bottom-color: #7e5ef8 |
||||
} |
||||
<style scoped> |
||||
.main { |
||||
position: relative; |
||||
padding-bottom: 1px; |
||||
color: #9b9b9b; |
||||
-webkit-font-smoothing: antialiased; |
||||
border-radius: 1%; |
||||
} |
||||
|
||||
.user-info { |
||||
position: relative; |
||||
text-align: center; |
||||
margin: 46px auto 100px; |
||||
width: 1166px; |
||||
} |
||||
|
||||
.avatar { |
||||
height: 100px; |
||||
width: 100px; |
||||
border-radius: 50%; |
||||
display: block; |
||||
} |
||||
|
||||
.name { |
||||
text-align: center; |
||||
padding-bottom: 20px; |
||||
|
||||
} |
||||
|
||||
.name input { |
||||
text-align: center; |
||||
color: #889eff; |
||||
margin: 36px auto 0; |
||||
width: 280px; |
||||
padding: 0; |
||||
border: none; |
||||
background-color: transparent; |
||||
font-size: 30px; |
||||
} |
||||
|
||||
.user_pro_tabs a { |
||||
width: 100%; |
||||
font-size: 16px; |
||||
text-align: center; |
||||
display: inline-block; |
||||
line-height: 48px; |
||||
height: 48px; |
||||
border-bottom: 1px solid #BABFC3; |
||||
text-decoration: none; |
||||
color: #BABFC3; |
||||
|
||||
} |
||||
|
||||
.user_pro_tabs a > span { |
||||
margin-right: 16px; |
||||
vertical-align: middle |
||||
} |
||||
|
||||
.user_pro_tabs a.active { |
||||
color: #7e5ef8; |
||||
border-bottom-color: #7e5ef8 |
||||
} |
||||
|
||||
|
||||
</style> |
||||
|
||||
@ -1,475 +1,475 @@ |
||||
<template> |
||||
<div v-if="(certification || certification === 0) && !cert_edit_flag"> |
||||
<el-form style="max-width: 400px"> |
||||
<el-form-item> |
||||
<el-row> |
||||
<el-col :span="24"> |
||||
<el-link :underline="false" type="success" style="font-size: x-large" |
||||
v-if="certification.status === 1">已经认证 |
||||
</el-link> |
||||
<el-link :underline="false" type="primary" style="font-size: x-large" |
||||
v-else-if="certification.status === 0">审核中 |
||||
</el-link> |
||||
<el-link v-else-if="certification.status === 2" :underline="false" type="danger" |
||||
style="font-size: x-large" |
||||
>审核失败 |
||||
</el-link> |
||||
<el-link :underline="false" type="info" style="font-size: x-large" v-else>待认证</el-link> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="真实姓名"> |
||||
<el-row :gutter="36"> |
||||
<el-col :span="18"> |
||||
<el-link :underline="false">{{ certification.name }}</el-link> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
<el-form-item label="身份证号"> |
||||
<el-row :gutter="36"> |
||||
<el-col :span="18"> |
||||
<el-link :underline="false">{{ certification.card }}</el-link> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
<el-form-item label="手机号码" v-if="certification.mobile"> |
||||
<el-row :gutter="36"> |
||||
<el-col :span="18"> |
||||
<el-link :underline="false">{{ certification.mobile }}</el-link> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
<el-form-item label="联系地址"> |
||||
<el-row :gutter="36"> |
||||
<el-col :span="18"> |
||||
<el-link :underline="false">{{ certification.addr }}</el-link> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
|
||||
<el-form-item v-if="certification.status === 2" label="审核信息" style="width: 700px"> |
||||
<el-row :gutter="36"> |
||||
<el-col :span="18"> |
||||
<el-link :underline="false" type="danger">{{ certification.msg }}</el-link> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
<el-form-item v-if="certification.status === 2"> |
||||
<el-row> |
||||
<el-col :span="24"> |
||||
<el-button type="primary" @click="recommit">重新提交审核</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
<el-form-item v-if="certification_status === -1"> |
||||
<el-row> |
||||
<el-col :span="24"> |
||||
<el-button type="primary" @click="goauth">开始认证</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
<div v-else> |
||||
<el-form ref="form" :model="form"> |
||||
<el-form-item label="真实姓名"> |
||||
<el-row :gutter="36"> |
||||
<el-col :span="18"> |
||||
<el-input v-model="form.name" :autofocus="true" prefix-icon="el-icon-user" |
||||
placeholder="请输入真实姓名" clearable/> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
<el-form-item label="身份证号"> |
||||
<el-row :gutter="36"> |
||||
<el-col :span="18"> |
||||
<el-input v-model="form.card" clearable prefix-icon="el-icon-s-order" |
||||
placeholder="请输入身份证号"/> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="居住地址"> |
||||
<el-row :gutter="36"> |
||||
<el-col :span="18"> |
||||
<el-input v-model="form.addr" clearable prefix-icon="el-icon-house" |
||||
placeholder="请输入现居住地址"/> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
|
||||
|
||||
<el-form-item label="手机号码" v-if="captcha.change_type.sms"> |
||||
<el-row :gutter="36"> |
||||
<el-col :span="18"> |
||||
<el-input v-model="form.mobile" ref="phone" clearable |
||||
prefix-icon="el-icon-mobile" placeholder="请输入手机号码" maxlength="11"/> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
<el-form-item label="图片验证码" v-if="captcha.captcha_image"> |
||||
<el-row :gutter="11"> |
||||
<el-col :span="12"> |
||||
<el-input placeholder="请输入图片验证码" v-model="form.authcode" maxlength="6" clearable/> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<el-image |
||||
style="border-radius:4px;cursor:pointer;height: 40px" |
||||
:src="captcha.captcha_image" |
||||
fit="contain" @click="get_auth_code"> |
||||
</el-image> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="手机验证码" v-if="captcha.change_type.sms"> |
||||
<el-row :gutter="11"> |
||||
<el-col :span="12"> |
||||
<el-input v-model="form.auth_key" prefix-icon="el-icon-mobile" placeholder="请输入您收到的验证码" |
||||
maxlength="6" clearable/> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<el-button type="info" @click="getsmsemailcode('sms',form.mobile)" plain |
||||
style="border-radius:4px;cursor:pointer;height: 40px;background-color: #ecf5ff;color: #dd6161"> |
||||
获取验证码 |
||||
</el-button> |
||||
</el-col> |
||||
|
||||
</el-row> |
||||
</el-form-item> |
||||
|
||||
<el-form-item> |
||||
<el-row style="margin-left: 88px"> |
||||
<el-col :span="13"> |
||||
<div id="captcha" ref="captcha"></div> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
<el-form-item label="身份证号"> |
||||
<el-row style="height: 40px" :gutter="36"> |
||||
<el-col :span="19"> |
||||
<div class="appdownload"> |
||||
<el-upload |
||||
drag |
||||
action="#" |
||||
accept=".png , .jpg , .jpeg" |
||||
:before-upload="upload_one"> |
||||
|
||||
<el-tooltip v-if="user_certification.one" placement="top"> |
||||
<div slot="content">上传身份证<i style="color: #2abb9d!important;">国徽面</i>照片</div> |
||||
<img :src="user_certification.one" |
||||
class="avatar" alt="国徽面照片"> |
||||
</el-tooltip> |
||||
<i v-else class="avatar-uploader-icon" style="text-align: center"> |
||||
上传身份证<i style="color: #2abb9d!important;">国徽面</i>照片 |
||||
</i> |
||||
</el-upload> |
||||
</div> |
||||
|
||||
<div class="appdownload"> |
||||
<el-upload |
||||
drag |
||||
action="#" |
||||
accept=".png , .jpg , .jpeg" |
||||
:before-upload="upload_two"> |
||||
|
||||
<el-tooltip v-if="user_certification.two" placement="top"> |
||||
<div slot="content">上传身份证<i style="color: #2abb9d!important;">人像面</i>照片</div> |
||||
<img :src="user_certification.two" |
||||
class="avatar" alt="人像面照片"> |
||||
</el-tooltip> |
||||
<i v-else class="avatar-uploader-icon" style="text-align: center"> |
||||
上传身份证<i style="color: #2abb9d!important;">人像面</i>照片 |
||||
</i> |
||||
</el-upload> |
||||
</div> |
||||
|
||||
<div class="appdownload"> |
||||
<el-upload |
||||
drag |
||||
action="#" |
||||
accept=".png , .jpg , .jpeg" |
||||
:before-upload="upload_three"> |
||||
<el-tooltip v-if="user_certification.three" placement="top"> |
||||
<div slot="content">上传<i style="color: #2abb9d!important;">手持身份证</i>照片</div> |
||||
<img :src="user_certification.three" |
||||
class="avatar" alt="手持身份证照片"> |
||||
</el-tooltip> |
||||
<i v-else class="avatar-uploader-icon" style="text-align: center"> |
||||
上传<i style="color: #2abb9d!important;">手持身份证</i>照片 |
||||
</i> |
||||
</el-upload> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
|
||||
|
||||
<el-form-item> |
||||
<el-row> |
||||
<el-col :span="24" style="margin-top: 20px"> |
||||
<el-button type="primary" @click="commit">提交</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
|
||||
</el-form> |
||||
</div> |
||||
<div v-if="(certification || certification === 0) && !cert_edit_flag"> |
||||
<el-form style="max-width: 400px"> |
||||
<el-form-item> |
||||
<el-row> |
||||
<el-col :span="24"> |
||||
<el-link v-if="certification.status === 1" :underline="false" style="font-size: x-large" |
||||
type="success">已经认证 |
||||
</el-link> |
||||
<el-link v-else-if="certification.status === 0" :underline="false" style="font-size: x-large" |
||||
type="primary">审核中 |
||||
</el-link> |
||||
<el-link v-else-if="certification.status === 2" :underline="false" style="font-size: x-large" |
||||
type="danger" |
||||
>审核失败 |
||||
</el-link> |
||||
<el-link v-else :underline="false" style="font-size: x-large" type="info">待认证</el-link> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="真实姓名"> |
||||
<el-row :gutter="36"> |
||||
<el-col :span="18"> |
||||
<el-link :underline="false">{{ certification.name }}</el-link> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
<el-form-item label="身份证号"> |
||||
<el-row :gutter="36"> |
||||
<el-col :span="18"> |
||||
<el-link :underline="false">{{ certification.card }}</el-link> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
<el-form-item v-if="certification.mobile" label="手机号码"> |
||||
<el-row :gutter="36"> |
||||
<el-col :span="18"> |
||||
<el-link :underline="false">{{ certification.mobile }}</el-link> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
<el-form-item label="联系地址"> |
||||
<el-row :gutter="36"> |
||||
<el-col :span="18"> |
||||
<el-link :underline="false">{{ certification.addr }}</el-link> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
|
||||
<el-form-item v-if="certification.status === 2" label="审核信息" style="width: 700px"> |
||||
<el-row :gutter="36"> |
||||
<el-col :span="18"> |
||||
<el-link :underline="false" type="danger">{{ certification.msg }}</el-link> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
<el-form-item v-if="certification.status === 2"> |
||||
<el-row> |
||||
<el-col :span="24"> |
||||
<el-button type="primary" @click="recommit">重新提交审核</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
<el-form-item v-if="certification_status === -1"> |
||||
<el-row> |
||||
<el-col :span="24"> |
||||
<el-button type="primary" @click="goauth">开始认证</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
<div v-else> |
||||
<el-form ref="form" :model="form"> |
||||
<el-form-item label="真实姓名"> |
||||
<el-row :gutter="36"> |
||||
<el-col :span="18"> |
||||
<el-input v-model="form.name" :autofocus="true" clearable |
||||
placeholder="请输入真实姓名" prefix-icon="el-icon-user"/> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
<el-form-item label="身份证号"> |
||||
<el-row :gutter="36"> |
||||
<el-col :span="18"> |
||||
<el-input v-model="form.card" clearable placeholder="请输入身份证号" |
||||
prefix-icon="el-icon-s-order"/> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="居住地址"> |
||||
<el-row :gutter="36"> |
||||
<el-col :span="18"> |
||||
<el-input v-model="form.addr" clearable placeholder="请输入现居住地址" |
||||
prefix-icon="el-icon-house"/> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
|
||||
|
||||
<el-form-item v-if="captcha.change_type.sms" label="手机号码"> |
||||
<el-row :gutter="36"> |
||||
<el-col :span="18"> |
||||
<el-input ref="phone" v-model="form.mobile" clearable |
||||
maxlength="11" placeholder="请输入手机号码" prefix-icon="el-icon-mobile"/> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
<el-form-item v-if="captcha.captcha_image" label="图片验证码"> |
||||
<el-row :gutter="11"> |
||||
<el-col :span="12"> |
||||
<el-input v-model="form.authcode" clearable maxlength="6" placeholder="请输入图片验证码"/> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<el-image |
||||
:src="captcha.captcha_image" |
||||
fit="contain" |
||||
style="border-radius:4px;cursor:pointer;height: 40px" @click="get_auth_code"> |
||||
</el-image> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
|
||||
<el-form-item v-if="captcha.change_type.sms" label="手机验证码"> |
||||
<el-row :gutter="11"> |
||||
<el-col :span="12"> |
||||
<el-input v-model="form.auth_key" clearable maxlength="6" |
||||
placeholder="请输入您收到的验证码" prefix-icon="el-icon-mobile"/> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<el-button plain style="border-radius:4px;cursor:pointer;height: 40px;background-color: #ecf5ff;color: #dd6161" type="info" |
||||
@click="getsmsemailcode('sms',form.mobile)"> |
||||
获取验证码 |
||||
</el-button> |
||||
</el-col> |
||||
|
||||
</el-row> |
||||
</el-form-item> |
||||
|
||||
<el-form-item> |
||||
<el-row style="margin-left: 88px"> |
||||
<el-col :span="13"> |
||||
<div id="captcha" ref="captcha"></div> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
<el-form-item label="身份证号"> |
||||
<el-row :gutter="36" style="height: 40px"> |
||||
<el-col :span="19"> |
||||
<div class="appdownload"> |
||||
<el-upload |
||||
:before-upload="upload_one" |
||||
accept=".png , .jpg , .jpeg" |
||||
action="#" |
||||
drag> |
||||
|
||||
<el-tooltip v-if="user_certification.one" placement="top"> |
||||
<div slot="content">上传身份证<i style="color: #2abb9d!important;">国徽面</i>照片</div> |
||||
<img :src="user_certification.one" |
||||
alt="国徽面照片" class="avatar"> |
||||
</el-tooltip> |
||||
<i v-else class="avatar-uploader-icon" style="text-align: center"> |
||||
上传身份证<i style="color: #2abb9d!important;">国徽面</i>照片 |
||||
</i> |
||||
</el-upload> |
||||
</div> |
||||
|
||||
<div class="appdownload"> |
||||
<el-upload |
||||
:before-upload="upload_two" |
||||
accept=".png , .jpg , .jpeg" |
||||
action="#" |
||||
drag> |
||||
|
||||
<el-tooltip v-if="user_certification.two" placement="top"> |
||||
<div slot="content">上传身份证<i style="color: #2abb9d!important;">人像面</i>照片</div> |
||||
<img :src="user_certification.two" |
||||
alt="人像面照片" class="avatar"> |
||||
</el-tooltip> |
||||
<i v-else class="avatar-uploader-icon" style="text-align: center"> |
||||
上传身份证<i style="color: #2abb9d!important;">人像面</i>照片 |
||||
</i> |
||||
</el-upload> |
||||
</div> |
||||
|
||||
<div class="appdownload"> |
||||
<el-upload |
||||
:before-upload="upload_three" |
||||
accept=".png , .jpg , .jpeg" |
||||
action="#" |
||||
drag> |
||||
<el-tooltip v-if="user_certification.three" placement="top"> |
||||
<div slot="content">上传<i style="color: #2abb9d!important;">手持身份证</i>照片</div> |
||||
<img :src="user_certification.three" |
||||
alt="手持身份证照片" class="avatar"> |
||||
</el-tooltip> |
||||
<i v-else class="avatar-uploader-icon" style="text-align: center"> |
||||
上传<i style="color: #2abb9d!important;">手持身份证</i>照片 |
||||
</i> |
||||
</el-upload> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
|
||||
|
||||
<el-form-item> |
||||
<el-row> |
||||
<el-col :span="24" style="margin-top: 20px"> |
||||
<el-button type="primary" @click="commit">提交</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
|
||||
</el-form> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import {changeInfoFun, getAuthcTokenFun, user_certification} from "@/restful"; |
||||
import {AvatarUploadUtils, getUserInfoFun, checkphone, geetest} from "@/utils"; |
||||
|
||||
export default { |
||||
name: "FirUserProfileCertification", |
||||
data() { |
||||
return { |
||||
form: {}, |
||||
captcha: { |
||||
captcha_image: '', |
||||
captcha_key: '', |
||||
authcode: '', |
||||
length: 8, |
||||
change_type: {email: false, sms: false} |
||||
}, |
||||
user_certification: {'one': '', 'two': '', 'three': ''}, |
||||
certification: {}, |
||||
certification_status: 0, |
||||
cert_edit_flag: false |
||||
import {changeInfoFun, getAuthcTokenFun, user_certification} from "@/restful"; |
||||
import {AvatarUploadUtils, checkphone, geetest, getUserInfoFun} from "@/utils"; |
||||
|
||||
export default { |
||||
name: "FirUserProfileCertification", |
||||
data() { |
||||
return { |
||||
form: {}, |
||||
captcha: { |
||||
captcha_image: '', |
||||
captcha_key: '', |
||||
authcode: '', |
||||
length: 8, |
||||
change_type: {email: false, sms: false} |
||||
}, |
||||
user_certification: {'one': '', 'two': '', 'three': ''}, |
||||
certification: {}, |
||||
certification_status: 0, |
||||
cert_edit_flag: false |
||||
} |
||||
}, methods: { |
||||
goauth() { |
||||
this.cert_edit_flag = true; |
||||
this.get_user_certification({methods: 'GET', data: {act: 'certpiccertinfo'}}); |
||||
this.get_auth_code(); |
||||
}, |
||||
recommit() { |
||||
this.cert_edit_flag = true; |
||||
this.get_user_certification({methods: 'GET', data: {act: 'certpiccertinfo'}}); |
||||
this.get_auth_code(); |
||||
}, |
||||
commit() { |
||||
for (let v of Object.keys(this.form)) { |
||||
if (this.form[v].length < 2) { |
||||
this.$message.error("填写错误，请检查"); |
||||
return false |
||||
} |
||||
} |
||||
let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; |
||||
if (reg.test(this.form.card) === false) { |
||||
this.$message.error("身份证输入不合法"); |
||||
return false; |
||||
} |
||||
if (this.captcha.change_type.sms) { |
||||
let checkp = checkphone(this.form.mobile); |
||||
if (!checkp) { |
||||
this.$message.error("手机号输入不合法"); |
||||
return false; |
||||
} |
||||
} |
||||
delete this.form['email']; |
||||
this.get_user_certification({methods: 'POST', data: this.form}) |
||||
}, |
||||
get_user_certification(params) { |
||||
user_certification(res => { |
||||
if (res.code === 1000) { |
||||
if (params.methods === 'POST') { |
||||
this.$message.success("信息提交成功，正在审核中"); |
||||
this.cert_edit_flag = false; |
||||
this.certification_status = 0; |
||||
getUserInfoFun(this); |
||||
this.get_user_certification({methods: 'GET', data: {act: 'usercert'}}); |
||||
} |
||||
if (res.data.usercert) { |
||||
this.certification = res.data.usercert; |
||||
} else { |
||||
const ft = ['one', 'two', 'three']; |
||||
if (res.data.certification && res.data.certification.length > 0) { |
||||
for (let v of res.data.certification) { |
||||
this.user_certification[ft[v.type - 1]] = v.certification_url; |
||||
} |
||||
} |
||||
}, methods: { |
||||
goauth() { |
||||
this.cert_edit_flag = true; |
||||
this.get_user_certification({methods: 'GET', data: {act: 'certpiccertinfo'}}); |
||||
this.get_auth_code(); |
||||
}, |
||||
recommit() { |
||||
this.cert_edit_flag = true; |
||||
this.get_user_certification({methods: 'GET', data: {act: 'certpiccertinfo'}}); |
||||
this.get_auth_code(); |
||||
}, |
||||
commit() { |
||||
for (let v of Object.keys(this.form)) { |
||||
if (this.form[v].length < 2) { |
||||
this.$message.error("填写错误，请检查"); |
||||
return false |
||||
} |
||||
} |
||||
let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; |
||||
if (reg.test(this.form.card) === false) { |
||||
this.$message.error("身份证输入不合法"); |
||||
return false; |
||||
} |
||||
if (this.captcha.change_type.sms) { |
||||
let checkp = checkphone(this.form.mobile); |
||||
if (!checkp) { |
||||
this.$message.error("手机号输入不合法"); |
||||
return false; |
||||
} |
||||
} |
||||
delete this.form['email']; |
||||
this.get_user_certification({methods: 'POST', data: this.form}) |
||||
}, |
||||
get_user_certification(params) { |
||||
user_certification(res => { |
||||
if (res.code === 1000) { |
||||
if (params.methods === 'POST') { |
||||
this.$message.success("信息提交成功，正在审核中"); |
||||
this.cert_edit_flag = false; |
||||
this.certification_status = 0; |
||||
getUserInfoFun(this); |
||||
this.get_user_certification({methods: 'GET', data: {act: 'usercert'}}); |
||||
} |
||||
if (res.data.usercert) { |
||||
this.certification = res.data.usercert; |
||||
} else { |
||||
const ft = ['one', 'two', 'three']; |
||||
if (res.data.certification && res.data.certification.length > 0) { |
||||
for (let v of res.data.certification) { |
||||
this.user_certification[ft[v.type - 1]] = v.certification_url; |
||||
} |
||||
} |
||||
if (res.data.user_certification) { |
||||
this.form = res.data.user_certification; |
||||
} |
||||
} |
||||
|
||||
} else { |
||||
this.$message.error(res.msg) |
||||
} |
||||
}, params) |
||||
}, |
||||
|
||||
getsmsemailcode(act, target) { |
||||
let picode = { |
||||
"authcode": this.form.authcode, |
||||
"captcha_key": this.captcha.captcha_key, |
||||
}; |
||||
if (this.captcha.captcha_image) { |
||||
if (!this.form.authcode) { |
||||
this.$message.error("图片验证码输入有误"); |
||||
return; |
||||
} |
||||
let captcha_flag = this.form.authcode.length === this.captcha.length; |
||||
if (this.captcha.captcha_key === '' || !this.captcha.captcha_key) { |
||||
captcha_flag = true |
||||
} |
||||
if (!captcha_flag) { |
||||
this.$message.error("图片验证码输入有误"); |
||||
return |
||||
} |
||||
} |
||||
|
||||
let checkp = checkphone(this.form.mobile); |
||||
if (!checkp) { |
||||
this.$message.error("手机号输入有误"); |
||||
return |
||||
} |
||||
|
||||
let params = {'act': act, 'target': target, 'ext': picode, 'user_id': target, 'ftype': 'certification'}; |
||||
if (this.captcha.geetest) { |
||||
geetest(this, this.form.mobile, params, (n_params) => { |
||||
this.get_phone_code(n_params); |
||||
}) |
||||
} else { |
||||
this.get_phone_code(params) |
||||
} |
||||
|
||||
}, |
||||
|
||||
get_phone_code(params) { |
||||
getAuthcTokenFun(data => { |
||||
if (data.code === 1000) { |
||||
let msg = '您正在进行身份认证，验证码已经发送您手机'; |
||||
this.$notify({ |
||||
title: '验证码', |
||||
message: msg, |
||||
type: 'success' |
||||
}); |
||||
this.form.auth_token = data.data.auth_token; |
||||
} else { |
||||
this.$message.error(data.msg) |
||||
} |
||||
|
||||
}, {"methods": 'POST', 'data': params}) |
||||
}, |
||||
|
||||
get_auth_code() { |
||||
if (this.form.authcode) { |
||||
this.form.authcode = ''; |
||||
} |
||||
changeInfoFun(data => { |
||||
if (data.code === 1000) { |
||||
this.captcha = data.data; |
||||
if (this.captcha.captcha_key) { |
||||
this.form.captcha_key = this.captcha.captcha_key; |
||||
} |
||||
} else { |
||||
this.$message({ |
||||
message: data.msg, |
||||
type: 'error' |
||||
}); |
||||
} |
||||
}, { |
||||
"methods": "GET", |
||||
"data": {} |
||||
}); |
||||
}, |
||||
upload_one(file) { |
||||
return this.beforeAvatarUpload(file, 1) |
||||
}, |
||||
upload_two(file) { |
||||
return this.beforeAvatarUpload(file, 2) |
||||
}, |
||||
upload_three(file) { |
||||
return this.beforeAvatarUpload(file, 3) |
||||
}, |
||||
beforeAvatarUpload(file, ptype) { |
||||
return AvatarUploadUtils(this, file, { |
||||
'app_id': this.$store.state.userinfo.uid, |
||||
'upload_key': file.name, |
||||
'ftype': 'certification', |
||||
'ext': {'ptype': ptype} |
||||
// eslint-disable-next-line no-unused-vars |
||||
}, res => { |
||||
this.get_user_certification({methods: 'GET', data: {act: 'certpic'}}); |
||||
}); |
||||
|
||||
}, |
||||
init() { |
||||
if (this.$store.state.userinfo.certification || this.$store.state.userinfo.certification === 0) { |
||||
this.certification_status = this.$store.state.userinfo.certification; |
||||
if (this.certification_status !== -1) { |
||||
this.get_user_certification({methods: 'GET', data: {act: 'usercert'}}); |
||||
} |
||||
} |
||||
|
||||
}, |
||||
}, mounted() { |
||||
this.$store.dispatch('douserInfoIndex', 2); |
||||
this.init(); |
||||
}, watch: { |
||||
'$store.state.userinfo': function () { |
||||
this.init(); |
||||
if (res.data.user_certification) { |
||||
this.form = res.data.user_certification; |
||||
} |
||||
} |
||||
|
||||
} else { |
||||
this.$message.error(res.msg) |
||||
} |
||||
}, params) |
||||
}, |
||||
|
||||
getsmsemailcode(act, target) { |
||||
let picode = { |
||||
"authcode": this.form.authcode, |
||||
"captcha_key": this.captcha.captcha_key, |
||||
}; |
||||
if (this.captcha.captcha_image) { |
||||
if (!this.form.authcode) { |
||||
this.$message.error("图片验证码输入有误"); |
||||
return; |
||||
} |
||||
let captcha_flag = this.form.authcode.length === this.captcha.length; |
||||
if (this.captcha.captcha_key === '' || !this.captcha.captcha_key) { |
||||
captcha_flag = true |
||||
} |
||||
if (!captcha_flag) { |
||||
this.$message.error("图片验证码输入有误"); |
||||
return |
||||
} |
||||
} |
||||
|
||||
let checkp = checkphone(this.form.mobile); |
||||
if (!checkp) { |
||||
this.$message.error("手机号输入有误"); |
||||
return |
||||
} |
||||
|
||||
let params = {'act': act, 'target': target, 'ext': picode, 'user_id': target, 'ftype': 'certification'}; |
||||
if (this.captcha.geetest) { |
||||
geetest(this, this.form.mobile, params, (n_params) => { |
||||
this.get_phone_code(n_params); |
||||
}) |
||||
} else { |
||||
this.get_phone_code(params) |
||||
} |
||||
|
||||
}, |
||||
|
||||
get_phone_code(params) { |
||||
getAuthcTokenFun(data => { |
||||
if (data.code === 1000) { |
||||
let msg = '您正在进行身份认证，验证码已经发送您手机'; |
||||
this.$notify({ |
||||
title: '验证码', |
||||
message: msg, |
||||
type: 'success' |
||||
}); |
||||
this.form.auth_token = data.data.auth_token; |
||||
} else { |
||||
this.$message.error(data.msg) |
||||
} |
||||
|
||||
}, {"methods": 'POST', 'data': params}) |
||||
}, |
||||
|
||||
get_auth_code() { |
||||
if (this.form.authcode) { |
||||
this.form.authcode = ''; |
||||
} |
||||
changeInfoFun(data => { |
||||
if (data.code === 1000) { |
||||
this.captcha = data.data; |
||||
if (this.captcha.captcha_key) { |
||||
this.form.captcha_key = this.captcha.captcha_key; |
||||
} |
||||
} else { |
||||
this.$message({ |
||||
message: data.msg, |
||||
type: 'error' |
||||
}); |
||||
} |
||||
}, { |
||||
"methods": "GET", |
||||
"data": {} |
||||
}); |
||||
}, |
||||
upload_one(file) { |
||||
return this.beforeAvatarUpload(file, 1) |
||||
}, |
||||
upload_two(file) { |
||||
return this.beforeAvatarUpload(file, 2) |
||||
}, |
||||
upload_three(file) { |
||||
return this.beforeAvatarUpload(file, 3) |
||||
}, |
||||
beforeAvatarUpload(file, ptype) { |
||||
return AvatarUploadUtils(this, file, { |
||||
'app_id': this.$store.state.userinfo.uid, |
||||
'upload_key': file.name, |
||||
'ftype': 'certification', |
||||
'ext': {'ptype': ptype} |
||||
// eslint-disable-next-line no-unused-vars |
||||
}, res => { |
||||
this.get_user_certification({methods: 'GET', data: {act: 'certpic'}}); |
||||
}); |
||||
|
||||
}, |
||||
init() { |
||||
if (this.$store.state.userinfo.certification || this.$store.state.userinfo.certification === 0) { |
||||
this.certification_status = this.$store.state.userinfo.certification; |
||||
if (this.certification_status !== -1) { |
||||
this.get_user_certification({methods: 'GET', data: {act: 'usercert'}}); |
||||
} |
||||
} |
||||
|
||||
}, |
||||
}, mounted() { |
||||
this.$store.dispatch('douserInfoIndex', 2); |
||||
this.init(); |
||||
}, watch: { |
||||
'$store.state.userinfo': function () { |
||||
this.init(); |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.el-form { |
||||
max-width: 800px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.el-form-item .el-button { |
||||
max-width: 260px; |
||||
width: 100%; |
||||
height: 50px; |
||||
} |
||||
|
||||
.appdownload /deep/ .el-upload-dragger { |
||||
background: #f1f1f1; |
||||
width: 200px; |
||||
height: 166px; |
||||
} |
||||
|
||||
.appdownload /deep/ .el-icon-upload { |
||||
margin-top: 45%; |
||||
} |
||||
|
||||
.appdownload { |
||||
float: left; |
||||
width: 200px; |
||||
height: 166px; |
||||
background-color: #c2dcf1; |
||||
} |
||||
|
||||
.avatar-uploader .el-upload { |
||||
border: 1px dashed #d9d9d9; |
||||
border-radius: 6px; |
||||
cursor: pointer; |
||||
position: relative; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.avatar-uploader .el-upload:hover { |
||||
border-color: #409EFF; |
||||
} |
||||
|
||||
.avatar-uploader-icon { |
||||
color: #8c939d; |
||||
width: 158px; |
||||
height: 158px; |
||||
line-height: 158px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.avatar { |
||||
width: 178px; |
||||
height: 178px; |
||||
display: block; |
||||
} |
||||
.el-form { |
||||
max-width: 800px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.el-form-item .el-button { |
||||
max-width: 260px; |
||||
width: 100%; |
||||
height: 50px; |
||||
} |
||||
|
||||
.appdownload /deep/ .el-upload-dragger { |
||||
background: #f1f1f1; |
||||
width: 200px; |
||||
height: 166px; |
||||
} |
||||
|
||||
.appdownload /deep/ .el-icon-upload { |
||||
margin-top: 45%; |
||||
} |
||||
|
||||
.appdownload { |
||||
float: left; |
||||
width: 200px; |
||||
height: 166px; |
||||
background-color: #c2dcf1; |
||||
} |
||||
|
||||
.avatar-uploader .el-upload { |
||||
border: 1px dashed #d9d9d9; |
||||
border-radius: 6px; |
||||
cursor: pointer; |
||||
position: relative; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.avatar-uploader .el-upload:hover { |
||||
border-color: #409EFF; |
||||
} |
||||
|
||||
.avatar-uploader-icon { |
||||
color: #8c939d; |
||||
width: 158px; |
||||
height: 158px; |
||||
line-height: 158px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.avatar { |
||||
width: 178px; |
||||
height: 178px; |
||||
display: block; |
||||
} |
||||
</style> |
||||
|
||||
@ -1,98 +1,98 @@ |
||||
<template> |
||||
<div> |
||||
<div> |
||||
|
||||
<el-form ref="form" :model="form" label-width="90px"> |
||||
<el-form-item label="当前密码"> |
||||
<el-row :gutter="36"> |
||||
<el-col :span="18"> |
||||
<el-input v-model="form.oldpassword" show-password autofocus prefix-icon="el-icon-unlock" |
||||
placeholder="当前密码" clearable/> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
<el-form-item label="新密码"> |
||||
<el-row :gutter="36"> |
||||
<el-col :span="18"> |
||||
<el-input v-model="form.newpassword" show-password prefix-icon="el-icon-lock" |
||||
placeholder="新密码" clearable/> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
<el-form ref="form" :model="form" label-width="90px"> |
||||
<el-form-item label="当前密码"> |
||||
<el-row :gutter="36"> |
||||
<el-col :span="18"> |
||||
<el-input v-model="form.oldpassword" autofocus clearable placeholder="当前密码" |
||||
prefix-icon="el-icon-unlock" show-password/> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
<el-form-item label="新密码"> |
||||
<el-row :gutter="36"> |
||||
<el-col :span="18"> |
||||
<el-input v-model="form.newpassword" clearable placeholder="新密码" |
||||
prefix-icon="el-icon-lock" show-password/> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="确认密码"> |
||||
<el-row :gutter="36"> |
||||
<el-col :span="18"> |
||||
<el-input v-model="form.surepassword" show-password prefix-icon="el-icon-lock" |
||||
placeholder="确认密码" clearable/> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
<el-form-item label="确认密码"> |
||||
<el-row :gutter="36"> |
||||
<el-col :span="18"> |
||||
<el-input v-model="form.surepassword" clearable placeholder="确认密码" |
||||
prefix-icon="el-icon-lock" show-password/> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
|
||||
<el-form-item> |
||||
<el-row :gutter="36"> |
||||
<el-col :span="20"> |
||||
<el-button type="primary" @click="updatepasswd">更新密码</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-row :gutter="36"> |
||||
<el-col :span="20"> |
||||
<el-button type="primary" @click="updatepasswd">更新密码</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form-item> |
||||
|
||||
</el-form> |
||||
</el-form> |
||||
|
||||
|
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import {userinfos} from "@/restful"; |
||||
import {userinfos} from "@/restful"; |
||||
|
||||
export default { |
||||
name: "FirUserProfileChangePwd", |
||||
data() { |
||||
return { |
||||
form: { |
||||
oldpassword: '', |
||||
newpassword: '', |
||||
surepassword: '' |
||||
}, |
||||
} |
||||
}, methods: { |
||||
updatepasswd() { |
||||
if (this.form.newpassword === this.form.surepassword) { |
||||
export default { |
||||
name: "FirUserProfileChangePwd", |
||||
data() { |
||||
return { |
||||
form: { |
||||
oldpassword: '', |
||||
newpassword: '', |
||||
surepassword: '' |
||||
}, |
||||
} |
||||
}, methods: { |
||||
updatepasswd() { |
||||
if (this.form.newpassword === this.form.surepassword) { |
||||
|
||||
userinfos(data => { |
||||
if (data.code === 1000) { |
||||
this.userinfo = data.data; |
||||
this.$message.success('密码修改成功'); |
||||
} else { |
||||
this.$message.error('密码修改失败,' + data.msg); |
||||
} |
||||
}, { |
||||
"methods": 'PUT', 'data': { |
||||
"oldpassword": this.form.oldpassword, |
||||
"surepassword": this.form.surepassword |
||||
} |
||||
}); |
||||
} else { |
||||
this.$message.error('密码不一致'); |
||||
} |
||||
} |
||||
}, mounted() { |
||||
this.$store.dispatch('douserInfoIndex', 1); |
||||
} |
||||
userinfos(data => { |
||||
if (data.code === 1000) { |
||||
this.userinfo = data.data; |
||||
this.$message.success('密码修改成功'); |
||||
} else { |
||||
this.$message.error('密码修改失败,' + data.msg); |
||||
} |
||||
}, { |
||||
"methods": 'PUT', 'data': { |
||||
"oldpassword": this.form.oldpassword, |
||||
"surepassword": this.form.surepassword |
||||
} |
||||
}); |
||||
} else { |
||||
this.$message.error('密码不一致'); |
||||
} |
||||
} |
||||
}, mounted() { |
||||
this.$store.dispatch('douserInfoIndex', 1); |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.el-form { |
||||
max-width: 500px; |
||||
margin: 0 auto; |
||||
} |
||||
.el-form { |
||||
max-width: 500px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.el-button { |
||||
margin-top: 20px; |
||||
max-width: 260px; |
||||
width: 100%; |
||||
height: 50px; |
||||
} |
||||
.el-button { |
||||
margin-top: 20px; |
||||
max-width: 260px; |
||||
width: 100%; |
||||
height: 50px; |
||||
} |
||||
|
||||
</style> |
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue