Skip to content

Y
ybf
Commit f84eafcb authored by Z's avatar Z
Browse files
Options

Z: Dot: Wx: qrCode 优惠券详情页更新至第二版，优惠券详情界面样式改为卡券样式。

parents 9f4685f3 9d44bbc3
Hide whitespace changes
Inline Side-by-side
Showing with 473 additions and 131 deletions
ybf_admin/src/pages/in/contact/components/move.vue
View file @ f84eafcb
......@@ -108,12 +108,12 @@ export default {
let groupId = this.$refs.tree.getCheckedKeys()[0]
let data = {
departmentId: groupId,
id: this.idList[0]
ids: this.idList
}
moveMember(data).then(res=> {
this.$emit("handleFinish", false);
})
},
/* handleChange() {},
handleClose() {
......
ybf_wx/public/qrCode/index-backup-V1.html 0 → 100644
View file @ f84eafcb
<!DOCTYPE html>
<html>
<head>
<meta lang="zh-cn">
<title>QRCode</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
<style>
.qr-code {
text-align: center;
padding-top: 50px;
}
.qr-code>#image {
display: inline-block;
width: 60%;
}
</style>
</head>
<body>
<!-- <div id="uri">Uri:</div> -->
<div class="qr-code">
<img id="image" src="" alt />
</div>
<!--<h1>Hola qrCode.</h1>-->
<!-- <img src="./3.png"> -->
<script>
const cleanUrlAndPostQRInfo = () => {
// alert(`--->qrCode: cleanUrlAndPostQRInfo: IN.`)
let nowUrl = ''
let id = ''
let actionid = ''
let activeId = ''
let voucherId = ''
let unionId = ''
nowUrl = document.location.toString().slice(42);
// alert(`--->nowUrl =${nowUrl}`)
id = String(nowUrl.split("?")[1].slice(3).split("&")[0]);
actionid = String(nowUrl.split("?")[1].slice(3).split("&")[1].split("=")[1]);
activeId = String(nowUrl.split("?")[1].slice(3).split("&")[2].split("=")[1]);
voucherId = String(nowUrl.split("?")[1].slice(3).split("&")[3].split("=")[1]);
unionId = String(nowUrl.split("?")[1].slice(3).split("&")[4].split("=")[1]);
// let pageUri = `${nowUrl}&detailid=${voucherId}&actionid=${activeId}&unionid=${unionId}`;
let pageUri = `${nowUrl}`;
pageUri = pageUri.split('&').slice(0, 5).join('&')
let pageUrl = `http://139.155.48.151:8085/workWx/auth/oauth2/wxMiniQrCode?pageUri=${pageUri}`;
// document.getElementById('uri').innerHTML = 'Uri=' + String(pageUri)
// alert(`--->qrCode: Ajax: POST: pageUrl = ${pageUrl}`)
// document.location = pageUri
$.ajax({
type: "POST",
url: pageUrl,
// data: JSON.stringify({ path: "pages/signIn/signIn" }),
data: {},
success: function (res) {
// alert(`--->qrCode: ajax: res.`)
// alert(`--->qrCode: ajax: res: res =${JSON.stringify(res)}`)
console.log(res)
$('#image').attr('src', res.data)
// $('#image').attr('src', 'http://qywx2.100smartdata.com/qrCode/1584512690487.jpeg')
},
error: function (data) {
alert(`--->qrCode: ajax: err.`)
alert(`--->qrCode: ajax: err: err =${JSON.stringify(err)}`)
alert('error' + JSON.stringify(data))
console.log(data);
}
});
}
const __main = () => {
cleanUrlAndPostQRInfo()
}
__main()
</script>
</body>
</html>
\ No newline at end of file
ybf_wx/public/qrCode/index.html
View file @ f84eafcb
......@@ -3,87 +3,269 @@
<head>
<meta lang="zh-cn">
<title>QRCode</title>
<title>优惠券详情</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
<style>
.qr-code {
body {
background-color: rgba(15, 106, 184, 0.99);
font-size: 10px;
margin: 0;
padding: 0;
}
.main {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
overflow: hidden;
}
.main>.titles {
/*border: 2px solid cyan;*/
width: 100%;
height: 8rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main>.titles>.title {
font-size: 3rem;
color: white;
text-align: center;
padding-top: 50px;
}
.main>.cards {
/*border: 2px solid red;*/
/*background-color: whitesmoke;*/
width: 76%;
height: auto;
.qr-code>#image {
display: inline-block;
width: 60%;
/*padding: 0 2rem;*/
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.main>.cards>.card {
/*border: 2px solid orange;*/
/*background-color: white;*/
width: 100%;
/*padding: 4rem 2rem;*/
}
.main>.cards>.card01 {
/*border-radius: 1rem 1rem 0 0;*/
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
background: white;
background:
linear-gradient(135deg, transparent 0, white 0) top left,
linear-gradient(-135deg, transparent 0, white 0) top right,
radial-gradient(circle at bottom right, transparent 2rem, white 0) bottom right,
radial-gradient(circle at bottom left, transparent 2rem, white 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.main>.cards>.card01>.titles {
margin: 4rem 2rem 0 2rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main>.cards>.card01>.titles>.title {
font-size: 3rem;
margin-bottom: 2rem;
}
.main>.cards>.card01>.titles>.discount {
font-size: 3rem;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.main>.cards>.card01>.titles>.discount>.number {
margin-right: 1rem;
color: orangered;
font-size: 4rem;
}
.main>.cards>.card01>.titles>.description {
/*font-size: 2rem;*/
font-size: 1rem;
color: grey;
}
.main>.cards>.card01>.rules {
margin: 2rem 2rem 4rem 2rem;
}
.main>.cards>.card01>.rules>.rule {
font-size: 2rem;
}
.main>.cards>.line {
background-color: white;
width: 90%;
border-bottom: 4px dotted rgba(15, 106, 184, 0.99);
}
.main>.cards>.card02 {
/*border-radius: 0 0 1rem 1rem;*/
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
background: white;
background:
radial-gradient(circle at top left, transparent 2rem, white 0) top left,
radial-gradient(circle at top right, transparent 2rem, white 0) top right,
linear-gradient(45deg, transparent 1px, white 0) bottom right,
linear-gradient(-45deg, transparent 1px, white 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.main>.cards>.card02>.tips {
margin: 4rem 2rem;
}
.main>.cards>.card02>.tips>.tip {
font-size: 2rem;
font-weight: bold;
}
.main>.cards>.card02>.tips>.rules {}
.main>.cards>.card02>.tips>.rules>.rule {
font-size: 2rem;
}
.main>.cards>.card02>.tips>.qrcodes {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.main>.cards>.card02>.tips>.qrcodes>.qrcode {
width: 50%;
}
.main>.cards>.card02>.tips>.qrcodes>.qrcodeTip {
font-size: 1rem;
color: grey;
}
</style>
</head>
<body>
<!-- <div id="uri">Uri:</div> -->
<div class="qr-code">
<img id="image" src="" alt />
<div class="main">
<div class="titles">
<!--<div class="title">优惠券详情</div>-->
</div>
<div class="cards">
<div class="card card01" id="card01">
<div class="titles">
<div class="title">惊喜满减券</div>
<div class="discount"><div class="number"> 20 </div> 元</div>
<div class="description">满 50 元可用</div>
</div>
<ul class="rules">
<li class="rule">满 50 元可用</li>
<li class="rule">有效期 2019-10-15 04:00:00 至 2019-10-15 04:01:00</li>
</ul>
</div>
<div class="line"></div>
<div class="card card02" id="card02">
<div class="tips">
<div class="tip">使用说明</div>
<ul class="rules">
<li class="rule">单次结算时候仅能使用一张优惠券折扣</li>
<li class="rule">单张优惠券不可叠加、找零、续用、残缺</li>
<li class="rule">该优惠券有效时间为 2019-10-15 04:00:00 至 2019-10-15 04:01:00 ，过期/提前均不可使用</li>
</ul>
<div class="qrcodes">
<!--<img class="qrcode" src="qrcodeBuy.png" alt />-->
<!--<img class="qrcode" id="image" src="QRCodeOY.png" alt />-->
<img class="qrcode" id="image" src="" alt />
<div class="qrcodeTip">长按识别二维码</div>
</div>
<!--<h1>Hola qrCode.</h1>-->
<!-- <img src="./3.png"> -->
<script>
const cleanUrlAndPostQRInfo = () => {
// alert(`--->qrCode: cleanUrlAndPostQRInfo: IN.`)
let nowUrl = ''
let id = ''
let actionid = ''
let activeId = ''
let voucherId = ''
let unionId = ''
nowUrl = document.location.toString().slice(42);
// alert(`--->nowUrl =${nowUrl}`)
id = String(nowUrl.split("?")[1].slice(3).split("&")[0]);
actionid = String(nowUrl.split("?")[1].slice(3).split("&")[1].split("=")[1]);
activeId = String(nowUrl.split("?")[1].slice(3).split("&")[2].split("=")[1]);
voucherId = String(nowUrl.split("?")[1].slice(3).split("&")[3].split("=")[1]);
unionId = String(nowUrl.split("?")[1].slice(3).split("&")[4].split("=")[1]);
// let pageUri = `${nowUrl}&detailid=${voucherId}&actionid=${activeId}&unionid=${unionId}`;
let pageUri = `${nowUrl}`;
pageUri = pageUri.split('&').slice(0, 5).join('&')
let pageUrl = `http://139.155.48.151:8085/workWx/auth/oauth2/wxMiniQrCode?pageUri=${pageUri}`;
// document.getElementById('uri').innerHTML = 'Uri=' + String(pageUri)
// alert(`--->qrCode: Ajax: POST: pageUrl = ${pageUrl}`)
// document.location = pageUri
$.ajax({
type: "POST",
url: pageUrl,
// data: JSON.stringify({ path: "pages/signIn/signIn" }),
data: {},
success: function (res) {
// alert(`--->qrCode: ajax: res.`)
// alert(`--->qrCode: ajax: res: res =${JSON.stringify(res)}`)
console.log(res)
$('#image').attr('src', res.data)
// $('#image').attr('src', 'http://qywx2.100smartdata.com/qrCode/1584512690487.jpeg')
},
error: function (data) {
alert(`--->qrCode: ajax: err.`)
alert(`--->qrCode: ajax: err: err =${JSON.stringify(err)}`)
alert('error' + JSON.stringify(data))
console.log(data);
}
});
}
const __main = () => {
cleanUrlAndPostQRInfo()
}
__main()
</script>
</div>
</div>
</div>
</div>
<script>
const cleanUrlAndPostQRInfo = () => {
// alert(`--->qrCode: cleanUrlAndPostQRInfo: IN.`)
let nowUrl = ''
let id = ''
let actionid = ''
let activeId = ''
let voucherId = ''
let unionId = ''
nowUrl = document.location.toString().slice(42);
// alert(`--->nowUrl =${nowUrl}`)
id = String(nowUrl.split("?")[1].slice(3).split("&")[0]);
actionid = String(nowUrl.split("?")[1].slice(3).split("&")[1].split("=")[1]);
activeId = String(nowUrl.split("?")[1].slice(3).split("&")[2].split("=")[1]);
voucherId = String(nowUrl.split("?")[1].slice(3).split("&")[3].split("=")[1]);
unionId = String(nowUrl.split("?")[1].slice(3).split("&")[4].split("=")[1]);
// let pageUri = `${nowUrl}&detailid=${voucherId}&actionid=${activeId}&unionid=${unionId}`;
let pageUri = `${nowUrl}`;
pageUri = pageUri.split('&').slice(0, 5).join('&')
let pageUrl = `http://139.155.48.151:8085/workWx/auth/oauth2/wxMiniQrCode?pageUri=${pageUri}`;
// document.getElementById('uri').innerHTML = 'Uri=' + String(pageUri)
// alert(`--->qrCode: Ajax: POST: pageUrl = ${pageUrl}`)
// document.location = pageUri
$.ajax({
type: "POST",
url: pageUrl,
// data: JSON.stringify({ path: "pages/signIn/signIn" }),
data: {},
success: function (res) {
// alert(`--->qrCode: ajax: res.`)
// alert(`--->qrCode: ajax: res: res =${JSON.stringify(res)}`)
console.log(res)
$('#image').attr('src', res.data)
// $('#image').attr('src', 'http://qywx2.100smartdata.com/qrCode/1584512690487.jpeg')
},
error: function (data) {
alert(`--->qrCode: ajax: err.`)
alert(`--->qrCode: ajax: err: err =${JSON.stringify(err)}`)
alert('error' + JSON.stringify(data))
console.log(data);
}
});
}
const __main = () => {
cleanUrlAndPostQRInfo()
}
__main()
</script>
</body>
</html>
\ No newline at end of file
</html>
ybf_wx/public/qrCodeV2/index.html
View file @ f84eafcb
......@@ -2,10 +2,10 @@
<html>
<head>
<meta charset="utf-8">
<title>长按扫描二维码</title>
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
<meta lang="zh-cn">
<title>优惠券详情</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
<style>
body {
background-color: rgba(15, 106, 184, 0.99);
......@@ -45,7 +45,7 @@
width: 76%;
height: auto;
padding: 0 2rem;
/*padding: 0 2rem;*/
display: flex;
flex-direction: column;
......@@ -53,23 +53,31 @@
align-items: center;
}
.main>.cards>.card {
border: 2px solid orange;
/*border: 2px solid orange;*/
/*background-color: white;*/
width: 100%;
padding: 4rem 2rem;
/*padding: 4rem 2rem;*/
}
.main>.cards>.card01 {
/*border-radius: 1rem 1rem 0 0;*/
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
background: white;
/*background:*/
/* linear-gradient(135deg, transparent 1px, white 0) top left,*/
/* linear-gradient(-135deg, transparent 1px, white 0) top right,*/
/* radial-gradient(circle at bottom right, transparent 2rem, white 0) bottom right,*/
/* radial-gradient(circle at bottom left, transparent 2rem, white 0) bottom left;*/
/*background-size: 50% 50%;*/
/*background-repeat: no-repeat;*/
background:
linear-gradient(135deg, transparent 0, white 0) top left,
linear-gradient(-135deg, transparent 0, white 0) top right,
radial-gradient(circle at bottom right, transparent 2rem, white 0) bottom right,
radial-gradient(circle at bottom left, transparent 2rem, white 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.main>.cards>.card01>.titles {
margin: 4rem 2rem 0 2rem;
display: flex;
flex-direction: column;
justify-content: center;
......@@ -77,57 +85,54 @@
}
.main>.cards>.card01>.titles>.title {
font-size: 3rem;
margin-bottom: 2rem;
}
.main>.cards>.card01>.titles>.discount {
font-size: 3rem;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.main>.cards>.card01>.titles>.discount>.number {
margin-right: 1rem;
color: orangered;
font-size: 4rem;
}
.main>.cards>.card01>.titles>.description {
font-size: 2rem;
/*font-size: 2rem;*/
font-size: 1rem;
color: grey;
}
.main>.cards>.card01>.rules {
margin: 2rem 2rem 4rem 2rem;
}
.main>.cards>.card01>.rules {}
.main>.cards>.card01>.rules>.rule {
font-size: 2rem;
}
.main>.cards>.line {
background-color: white;
width: 90%;
border-bottom: 4px dotted rgba(15, 106, 184, 0.99);
}
.main>.cards>.card02 {
/*border-radius: 0 0 1rem 1rem;*/
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
background: white;
/*background:*/
/* radial-gradient(circle at top left, transparent 2rem, white 0) top left,*/
/* radial-gradient(circle at top right, transparent 2rem, white 0) top right,*/
/* linear-gradient(45deg, transparent 1px, white 0) bottom right,*/
/* linear-gradient(-45deg, transparent 1px, white 0) bottom left;*/
/*background-size: 50% 50%;*/
/*background-repeat: no-repeat;*/
background:
radial-gradient(circle at top left, transparent 2rem, white 0) top left,
radial-gradient(circle at top right, transparent 2rem, white 0) top right,
linear-gradient(45deg, transparent 1px, white 0) bottom right,
linear-gradient(-45deg, transparent 1px, white 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.main>.cards>.card02::before {
content: '';
background: #f00;
width: 2rem;
height: 2rem;
border-radius: 50%;
position: relative;
left: 10px;
top: 10px;
display: inline-block;
}
/*.main>.cards>.card02::before {*/
/* top: -.4em;*/
/*}*/
/*.main>.cards>.card02::after {*/
/* bottom: -.4em;*/
/*}*/
.main>.cards>.card02>.tips {}
.main>.cards>.card02>.tips {
margin: 4rem 2rem;
}
.main>.cards>.card02>.tips>.tip {
font-size: 2rem;
font-weight: bold;
......@@ -136,12 +141,18 @@
.main>.cards>.card02>.tips>.rules>.rule {
font-size: 2rem;
}
.main>.cards>.card02>.tips>.qrcodes {}
.main>.cards>.card02>.tips>.qrcodes {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.main>.cards>.card02>.tips>.qrcodes>.qrcode {
width: 50%;
}
.main>.cards>.card02>.tips>.qrcodes>.qrcodeTip {
font-size: 2rem;
font-size: 1rem;
color: grey;
}
</style>
</head>
......@@ -149,37 +160,97 @@
<body>
<div class="main">
<div class="titles">
<div class="title">优惠券详情</div>
<!--<div class="title">优惠券详情</div>-->
</div>
<div class="cards">
<div class="card card01" id="card01">
<div class="titles">
<div class="title">惊喜折上折</div>
<div class="discount">0.5 元</div>
<div class="description">满9999元可用</div>
<div class="title">惊喜满减券</div>
<div class="discount"><div class="number"> 20 </div> 元</div>
<div class="description">满 50 元可用</div>
</div>
<ul class="rules">
<li class="rule">满9999元可用</li>
<li class="rule">满 50 元可用</li>
<li class="rule">有效期 2019-10-15 04:00:00 至 2019-10-15 04:01:00</li>
</ul>
</div>
<div class="line"></div>
<div class="card card02" id="card02">
<div class="tips">
<div class="tip">使用说明</div>
<ul class="rules">
<li class="rule">单次结算时候仅能使用半张优惠券折扣</li>
<li class="rule">单次结算时候仅能使用一张优惠券折扣</li>
<li class="rule">单张优惠券不可叠加、找零、续用、残缺</li>
<li class="rule">该优惠券有效时间为 2019-10-15 04:00:00 至 2019-10-15 04:01:00 ，过期/提前均不可使用</li>
</ul>
<div class="qrcodes">
<img class="qrcode" src="qrcodeBuy.png" alt />
<div class="qrcodeTip">按得越久，折扣越高！反正我信了！</div>
<!--<img class="qrcode" src="qrcodeBuy.png" alt />-->
<!--<img class="qrcode" id="image" src="QRCodeOY.png" alt />-->
<img class="qrcode" id="image" src="" alt />
<div class="qrcodeTip">长按识别二维码</div>
</div>
</div>
</div>
</div>
</div>
<script>
const cleanUrlAndPostQRInfo = () => {
// alert(`--->qrCode: cleanUrlAndPostQRInfo: IN.`)
let nowUrl = ''
let id = ''
let actionid = ''
let activeId = ''
let voucherId = ''
let unionId = ''
nowUrl = document.location.toString().slice(42);
// alert(`--->nowUrl =${nowUrl}`)
id = String(nowUrl.split("?")[1].slice(3).split("&")[0]);
actionid = String(nowUrl.split("?")[1].slice(3).split("&")[1].split("=")[1]);
activeId = String(nowUrl.split("?")[1].slice(3).split("&")[2].split("=")[1]);
voucherId = String(nowUrl.split("?")[1].slice(3).split("&")[3].split("=")[1]);
unionId = String(nowUrl.split("?")[1].slice(3).split("&")[4].split("=")[1]);
// let pageUri = `${nowUrl}&detailid=${voucherId}&actionid=${activeId}&unionid=${unionId}`;
let pageUri = `${nowUrl}`;
pageUri = pageUri.split('&').slice(0, 5).join('&')
let pageUrl = `http://139.155.48.151:8085/workWx/auth/oauth2/wxMiniQrCode?pageUri=${pageUri}`;
// document.getElementById('uri').innerHTML = 'Uri=' + String(pageUri)
// alert(`--->qrCode: Ajax: POST: pageUrl = ${pageUrl}`)
// document.location = pageUri
$.ajax({
type: "POST",
url: pageUrl,
// data: JSON.stringify({ path: "pages/signIn/signIn" }),
data: {},
success: function (res) {
// alert(`--->qrCode: ajax: res.`)
// alert(`--->qrCode: ajax: res: res =${JSON.stringify(res)}`)
console.log(res)
$('#image').attr('src', res.data)
// $('#image').attr('src', 'http://qywx2.100smartdata.com/qrCode/1584512690487.jpeg')
},
error: function (data) {
alert(`--->qrCode: ajax: err.`)
alert(`--->qrCode: ajax: err: err =${JSON.stringify(err)}`)
alert('error' + JSON.stringify(data))
console.log(data);
}
});
}
const __main = () => {
cleanUrlAndPostQRInfo()
}
__main()
</script>
</body>
</html>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment