银联第一版基础
This commit is contained in:
parent
42a0e600a3
commit
0bfdb7e667
|
|
@ -1,5 +1,5 @@
|
||||||
// const baseurl = "http://192.168.110.39:8080"; // 本地
|
const baseurl = "http://192.168.110.50:8000"; // 本地
|
||||||
const baseurl = "http://lottery.unipay.test.86698.cn/api"; // 测试
|
// const baseurl = "http://lottery.unipay.test.86698.cn/api"; // 测试
|
||||||
// const baseurl = "https://lottery.unipay.api.86698.cn"; // 正式
|
// const baseurl = "https://lottery.unipay.api.86698.cn"; // 正式
|
||||||
// 统一请求
|
// 统一请求
|
||||||
// 返送之前
|
// 返送之前
|
||||||
|
|
|
||||||
215
index-style.css
215
index-style.css
|
|
@ -7,54 +7,195 @@
|
||||||
#app {
|
#app {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
padding-bottom: 0.2rem;
|
padding-bottom: 0.4rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: #3387c2;
|
background: #92D9FF;
|
||||||
|
/* background-color: #b0b5b8; */
|
||||||
|
/* background: url("https://lsxdmgoss.oss-cn-chengdu.aliyuncs.com/unipay/banner1.png?v=222")
|
||||||
|
no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding-bottom: 0.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner {
|
.banner {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 3.68rem;
|
height: 2.58rem;
|
||||||
|
margin-bottom: -0.02rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back {
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 0.7rem;
|
||||||
|
width: 0.47rem;
|
||||||
|
height: 0.22rem;
|
||||||
|
background: #1FCDFC;
|
||||||
|
color: #FFFFFF;
|
||||||
|
border-radius: 0rem 0.26rem 0.26rem 0rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-2 {
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 0.7rem;
|
||||||
|
width: 0.47rem;
|
||||||
|
height: 0.22rem;
|
||||||
|
background: #E8F6FF;
|
||||||
|
;
|
||||||
|
color: #FFFFFF;
|
||||||
|
border-radius: 0rem 0.26rem 0.26rem 0rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-text {
|
||||||
|
position: relative;
|
||||||
|
width: 0.24rem;
|
||||||
|
height: 0.16rem;
|
||||||
|
font-family: PingFang SC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 0.12rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 0.16rem;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
/* 上右下左 */
|
||||||
|
margin: 0.03rem 0.11rem 0.03rem 0.09rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-text-2 {
|
||||||
|
position: relative;
|
||||||
|
width: 0.24rem;
|
||||||
|
height: 0.16rem;
|
||||||
|
font-family: PingFang SC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.12rem;
|
||||||
|
color: #1D82DA;
|
||||||
|
line-height: 0.16rem;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
/* 上右下左 */
|
||||||
|
margin: 0.03rem 0.11rem 0.03rem 0.09rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buy {
|
||||||
|
position: absolute;
|
||||||
|
margin: 0.73rem 0rem 6.35rem 3.25rem;
|
||||||
|
width: 0.51rem;
|
||||||
|
height: 0.13rem;
|
||||||
|
background: #1FCDFC;
|
||||||
|
border-radius: 26px 0px 0px 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buy-2 {
|
||||||
|
position: absolute;
|
||||||
|
margin: 0.94rem 0rem 6.14rem 3.24rem;
|
||||||
|
width: 0.51rem;
|
||||||
|
height: 0.13rem;
|
||||||
|
background: #1FCDFC;
|
||||||
|
border-radius: 26px 0px 0px 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buy .buy-text {
|
||||||
|
position: relative;
|
||||||
|
margin: 0rem 0.05rem 0.01rem 0.06rem;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.14rem;
|
||||||
|
font-family: PingFang SC, PingFang SC;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 0.10rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 0.14rem;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buy-2 .buy-text {
|
||||||
|
position: relative;
|
||||||
|
margin: 0rem 0.05rem 0.01rem 0.06rem;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.14rem;
|
||||||
|
font-family: PingFang SC, PingFang SC;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 0.10rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 0.14rem;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.goods-box {
|
.goods-box {
|
||||||
width: 3.5rem;
|
width: 3.66rem;
|
||||||
height: 4.66rem;
|
height: 4.60rem;
|
||||||
background-color: #c0ddf3;
|
/* background: rgba(46,182,230,0.5);
|
||||||
border-radius: 0.15rem;
|
border-radius: 0.15rem; */
|
||||||
margin: -0.6rem auto 0 auto;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
margin: 2.58rem auto 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-box-2 {
|
||||||
|
width: 3.66rem;
|
||||||
|
height: 4.60rem;
|
||||||
|
/* background: rgba(46,182,230,0.5);
|
||||||
|
border-radius: 0.15rem; */
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 3.56rem auto 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.goods-list-box-bg {
|
.goods-list-box-bg {
|
||||||
width: 3.36rem;
|
width: 3.36rem;
|
||||||
height: 4.43rem;
|
height: 4.43rem;
|
||||||
background-color: #fff;
|
/* background-color: #fff;
|
||||||
border-radius: 0.14rem;
|
border-radius: 0.14rem; */
|
||||||
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.goods-list-box {
|
.goods-list-box {
|
||||||
width: 3.36rem;
|
width: 3.36rem;
|
||||||
height: 4.43rem;
|
height: 4.43rem;
|
||||||
background: url("https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/img/jb-kuang.png?v=222")
|
/* background: url("https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/img/jb-kuang.png?v=222")
|
||||||
no-repeat;
|
no-repeat;
|
||||||
background-size: 100%;
|
background-size: 100%; */
|
||||||
border-radius: 0.14rem;
|
border-radius: 0.14rem;
|
||||||
padding: 0 0.1rem;
|
padding: 0 0.1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.goods-title {
|
.goods-title {
|
||||||
font-size: 0.18rem;
|
width: 1rem;
|
||||||
font-weight: bold;
|
height: 0.16rem;
|
||||||
color: #333333;
|
font-family: 'Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20';
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.16rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 0.16rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 0.17rem 0 0.05rem 0;
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
text-align: center;
|
||||||
|
/* padding: 0.17rem 0 0.05rem 0; */
|
||||||
|
position: relative;
|
||||||
|
margin: 0.05rem 1.31rem 0.18rem 1.1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.goods-info {
|
.goods-info {
|
||||||
width: 1.53rem;
|
width: 1.48rem;
|
||||||
height: 0.96rem;
|
height: 0.96rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: 0.1rem;
|
margin-top: 0.1rem;
|
||||||
|
|
@ -98,17 +239,53 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.goods-price {
|
||||||
|
width: 0.35rem;
|
||||||
|
height: 0.14rem;
|
||||||
|
font-family: D-DIN, D-DIN;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 0.15rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 0.14rem;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0.67rem;
|
||||||
|
left: 0.07rem;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-showprice {
|
||||||
|
/* 加横线 */
|
||||||
|
width: 0.33rem;
|
||||||
|
height: 0.14rem;
|
||||||
|
font-family: D-DIN, D-DIN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.08rem;
|
||||||
|
color: #FFD9D9;
|
||||||
|
line-height: 0.14rem;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-decoration-line: line-through;
|
||||||
|
text-transform: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0.68rem;
|
||||||
|
left: 0.52rem;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
.goods-main {
|
.goods-main {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
margin: 0rem 0.05rem 0rem 0.05rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.goods-btn {
|
.goods-btn {
|
||||||
width: 1.37rem;
|
width: 1.37rem;
|
||||||
height: 0.5rem;
|
height: 0.5rem;
|
||||||
background: url("https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/img/btn.png")
|
background: url("https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/img/btn.png") no-repeat;
|
||||||
no-repeat;
|
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
margin: 0.2rem auto 0;
|
margin: 0.2rem auto 0;
|
||||||
font-size: 0.16rem;
|
font-size: 0.16rem;
|
||||||
|
|
|
||||||
68
index.html
68
index.html
|
|
@ -12,7 +12,7 @@
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
||||||
<meta name="format-detection" content="telephone=no, email=no" />
|
<meta name="format-detection" content="telephone=no, email=no" />
|
||||||
<meta name="viewport"
|
<meta name="viewport"
|
||||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0,viewport-fit=cover" />
|
||||||
<!-- A11Y：如果有无障碍方面的需求，建议使用下面的 viewport 设置，不要禁止页面缩放 -->
|
<!-- A11Y：如果有无障碍方面的需求，建议使用下面的 viewport 设置，不要禁止页面缩放 -->
|
||||||
<!--<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />-->
|
<!--<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />-->
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -28,19 +28,23 @@
|
||||||
<link rel="stylesheet" href="https://gw.alipayobjects.com/as/g/antui/antui/10.1.10/rem/widget/toast.css">
|
<link rel="stylesheet" href="https://gw.alipayobjects.com/as/g/antui/antui/10.1.10/rem/widget/toast.css">
|
||||||
<link rel="stylesheet" href="./index-style.css">
|
<link rel="stylesheet" href="./index-style.css">
|
||||||
<link rel="stylesheet" href="./style.css">
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
<!-- 引入字体 -->
|
||||||
|
<link type="text/css" rel="stylesheet" href="https://webfont.hellofont.cn/webfont/puhuiti-2?weight=65&family=puhuiti-2-65">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<div v-if="state.showPage">
|
<div v-if="state.showPage" class="main" :style="`background:url(${state.id === 10 ? state.bg[0] : state.bg[1]}) no-repeat;background-size: 100%;`">
|
||||||
<div class="banner"
|
<div :class="`${(state.id)===10?'back':'back-2'}`">
|
||||||
:style="`background:url(${state.id === 11 ? state.bg[0] : state.bg[1]}) no-repeat;background-size: 100%;`">
|
<div :class="`${(state.id)===10?'back-text':'back-text-2'}`">返回</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="goods-box">
|
<div :class="`${(state.id)===10?'buy':'buy-2'}`" @click="exchangeBtn()">
|
||||||
|
<div class="buy-text">购买详情</div>
|
||||||
|
</div>
|
||||||
|
<div :class="`${(state.id)===10?'goods-box':'goods-box-2'}`" :style="`background:url(${state.id === 10 ? state.goodsBoxBg[0] : state.goodsBoxBg[1]}) no-repeat;background-size: 100%;`">
|
||||||
<div class="goods-list-box-bg">
|
<div class="goods-list-box-bg">
|
||||||
<div class="goods-list-box">
|
<div class="goods-list-box">
|
||||||
<h2 class="goods-title">兑换商品列表</h2>
|
<h2 class="goods-title">购买商品列表</h2>
|
||||||
|
|
||||||
<div class="goods-main">
|
<div class="goods-main">
|
||||||
<div class="goods-info" v-for="item in state.goodsList" :key="item.id">
|
<div class="goods-info" v-for="item in state.goodsList" :key="item.id">
|
||||||
<img :src="item.icon" alt=""
|
<img :src="item.icon" alt=""
|
||||||
|
|
@ -63,13 +67,17 @@
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="goods-price">
|
||||||
|
￥{{item.price}}
|
||||||
|
</div>
|
||||||
|
<div class="goods-showprice" :style="`color:${selectColor(item.name)}`">
|
||||||
|
原价{{item.show_price}}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="goods-btn" @click="exchangeBtn()">
|
<div class="goods-btn" @click="exchangeBtn()">
|
||||||
{{ state.isExchange === -1 ? '立即兑换' : '查询详情' }}
|
{{ state.isExchange === -1 ? '优惠购买' : '查询详情' }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -122,10 +130,17 @@
|
||||||
setup() {
|
setup() {
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
bg: [
|
bg: [
|
||||||
"https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/img/banner1.png?v=222",
|
"https://lsxdmgoss.oss-cn-chengdu.aliyuncs.com/unipay/bg1.png?v=222",
|
||||||
"https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/img/banner2.png?v=333",
|
"https://lsxdmgoss.oss-cn-chengdu.aliyuncs.com/unipay/bg2.png?v=333",
|
||||||
],
|
],
|
||||||
id: 11,
|
goodsBoxBg:[
|
||||||
|
"https://lsxdmgoss.oss-cn-chengdu.aliyuncs.com/unipay/goodsbox1.png?v=222",
|
||||||
|
"https://lsxdmgoss.oss-cn-chengdu.aliyuncs.com/unipay/goodsbox2.png?v=222",
|
||||||
|
],
|
||||||
|
Title:[
|
||||||
|
"https://lsxdmgoss.oss-cn-chengdu.aliyuncs.com/unipay/%E5%B9%B4%E8%BD%BB%E5%AE%A2%E7%BE%A4%E4%BC%98%E6%83%A0%E8%B4%AD.png?v=222",
|
||||||
|
],
|
||||||
|
id: 10,
|
||||||
token: "",
|
token: "",
|
||||||
showPage: false,
|
showPage: false,
|
||||||
showPop: false,
|
showPop: false,
|
||||||
|
|
@ -221,46 +236,41 @@
|
||||||
|
|
||||||
// 判断商品类型，返回不同的颜色
|
// 判断商品类型，返回不同的颜色
|
||||||
const selectColor = (name) => {
|
const selectColor = (name) => {
|
||||||
// 1腾讯，2爱奇艺，3网易云，4饿了么，5青桔，6keep
|
// 1网易云 2 喜马拉雅 3 优酷 4 咪咕 5 爱奇艺
|
||||||
let type = 1;
|
let type = 1;
|
||||||
|
|
||||||
if (name.indexOf("腾讯视频") !== -1) {
|
if (name.indexOf("网易云") !== -1) {
|
||||||
type = 1;
|
type = 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (name.indexOf("爱奇艺黄金") !== -1) {
|
if (name.indexOf("喜马拉雅") !== -1) {
|
||||||
type = 2;
|
type = 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (name.indexOf("网易云音乐黑胶") !== -1) {
|
if (name.indexOf("优酷") !== -1) {
|
||||||
type = 3;
|
type = 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (name.indexOf("饿了么超级吃货卡") !== -1) {
|
if (name.indexOf("咪咕") !== -1) {
|
||||||
type = 4;
|
type = 4;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (name.indexOf("青桔单车骑行") !== -1) {
|
if (name.indexOf("爱奇艺") !== -1) {
|
||||||
type = 5;
|
type = 5;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (name.indexOf("KEEP") !== -1) {
|
|
||||||
type = 6;
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case 1:
|
case 1:
|
||||||
return "#4998FB";
|
return "#FF231E";
|
||||||
case 2:
|
case 2:
|
||||||
return "#59D736";
|
return "#F82801";
|
||||||
case 3:
|
case 3:
|
||||||
return "#FE3E37";
|
|
||||||
case 4:
|
|
||||||
return "#4B99FB";
|
return "#4B99FB";
|
||||||
|
case 4:
|
||||||
|
return "#1782C7";
|
||||||
case 5:
|
case 5:
|
||||||
return "#15C8C0";
|
return "#8AE471";
|
||||||
case 6:
|
|
||||||
return "#574E5F";
|
|
||||||
default:
|
default:
|
||||||
return "#4998FB"
|
return "#4998FB"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue