From 0bfdb7e6676e2d794c293635d05a92f2bf60be46 Mon Sep 17 00:00:00 2001
From: wuchao <1272174216@qq.com>
Date: Tue, 6 Aug 2024 18:47:06 +0800
Subject: [PATCH] =?UTF-8?q?=E9=93=B6=E8=81=94=E7=AC=AC=E4=B8=80=E7=89=88?=
 =?UTF-8?q?=E5=9F=BA=E7=A1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dof-api.js      |   4 +-
 index-style.css | 217 +++++++++++++++++++++++++++++++++++++++++++-----
 index.html      |  68 ++++++++-------
 3 files changed, 238 insertions(+), 51 deletions(-)

diff --git a/dof-api.js b/dof-api.js
index 902f7c1..ed893bb 100644
--- a/dof-api.js
+++ b/dof-api.js
@@ -1,5 +1,5 @@
-// const baseurl = "http://192.168.110.39:8080"; // 本地
-const baseurl = "http://lottery.unipay.test.86698.cn/api"; // 测试
+const baseurl = "http://192.168.110.50:8000"; // 本地
+// const baseurl = "http://lottery.unipay.test.86698.cn/api"; // 测试
 // const baseurl = "https://lottery.unipay.api.86698.cn"; // 正式
 // 统一请求
 // 返送之前
diff --git a/index-style.css b/index-style.css
index c3443ef..73686e8 100644
--- a/index-style.css
+++ b/index-style.css
@@ -7,54 +7,195 @@
 #app {
   width: 100%;
   min-height: 100vh;
-  padding-bottom: 0.2rem;
+  padding-bottom: 0.4rem;
   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 {
   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 {
-  width: 3.5rem;
-  height: 4.66rem;
-  background-color: #c0ddf3;
-  border-radius: 0.15rem;
-  margin: -0.6rem auto 0 auto;
+  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: 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 {
   width: 3.36rem;
   height: 4.43rem;
-  background-color: #fff;
-  border-radius: 0.14rem;
+  /* background-color: #fff;
+  border-radius: 0.14rem; */
+  position: absolute;
 }
 
 .goods-list-box {
   width: 3.36rem;
   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;
-  background-size: 100%;
+  background-size: 100%; */
   border-radius: 0.14rem;
   padding: 0 0.1rem;
 }
 
 .goods-title {
-  font-size: 0.18rem;
-  font-weight: bold;
-  color: #333333;
+  width: 1rem;
+  height: 0.16rem;
+  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;
-  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 {
-  width: 1.53rem;
+  width: 1.48rem;
   height: 0.96rem;
   position: relative;
   margin-top: 0.1rem;
@@ -98,17 +239,53 @@
   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 {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
+  margin: 0rem 0.05rem 0rem 0.05rem;
 }
 
 .goods-btn {
   width: 1.37rem;
   height: 0.5rem;
-  background: url("https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/img/btn.png")
-    no-repeat;
+  background: url("https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/img/btn.png") no-repeat;
   background-size: 100%;
   margin: 0.2rem auto 0;
   font-size: 0.16rem;
@@ -200,4 +377,4 @@
 
 .grayscale-image {
   filter: grayscale(100%);
-}
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 6c4c6c8..edccc45 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,7 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
     <meta name="format-detection" content="telephone=no, email=no" />
     <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 设置，不要禁止页面缩放 -->
     <!--<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />-->
     <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="./index-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>
 
 <body>
     <div id="app">
-        <div v-if="state.showPage">
-            <div class="banner"
-                :style="`background:url(${state.id === 11 ? state.bg[0] : state.bg[1]}) no-repeat;background-size: 100%;`">
+        <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="`${(state.id)===10?'back':'back-2'}`">
+                <div :class="`${(state.id)===10?'back-text':'back-text-2'}`">返回</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">
-                        <h2 class="goods-title">兑换商品列表</h2>
-
+                        <h2 class="goods-title">购买商品列表</h2>
                         <div class="goods-main">
                             <div class="goods-info" v-for="item in state.goodsList" :key="item.id">
                                 <img :src="item.icon" alt=""
@@ -63,13 +67,17 @@
                                         </g>
                                     </svg>
                                 </div>
+                                <div class="goods-price">
+                                    ￥{{item.price}}
+                                </div>
+                                <div class="goods-showprice" :style="`color:${selectColor(item.name)}`">
+                                    原价{{item.show_price}}
+                                </div>
                             </div>
-
-
                         </div>
 
                         <div class="goods-btn" @click="exchangeBtn()">
-                            {{ state.isExchange === -1 ? '立即兑换' : '查询详情' }}
+                            {{ state.isExchange === -1 ? '优惠购买' : '查询详情' }}
                         </div>
 
                     </div>
@@ -122,10 +130,17 @@
         setup() {
             const state = reactive({
                 bg: [
-                    "https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/img/banner1.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/bg1.png?v=222",
+                    "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: "",
                 showPage: false,
                 showPop: false,
@@ -221,46 +236,41 @@
 
             // 判断商品类型，返回不同的颜色
             const selectColor = (name) => {
-                // 1腾讯，2爱奇艺，3网易云，4饿了么，5青桔，6keep
+                // 1网易云 2 喜马拉雅 3 优酷 4 咪咕 5 爱奇艺
                 let type = 1;
 
-                if (name.indexOf("腾讯视频") !== -1) {
+                if (name.indexOf("网易云") !== -1) {
                     type = 1;
                 }
 
-                if (name.indexOf("爱奇艺黄金") !== -1) {
+                if (name.indexOf("喜马拉雅") !== -1) {
                     type = 2;
                 }
 
-                if (name.indexOf("网易云音乐黑胶") !== -1) {
+                if (name.indexOf("优酷") !== -1) {
                     type = 3;
                 }
 
-                if (name.indexOf("饿了么超级吃货卡") !== -1) {
+                if (name.indexOf("咪咕") !== -1) {
                     type = 4;
                 }
 
-                if (name.indexOf("青桔单车骑行") !== -1) {
+                if (name.indexOf("爱奇艺") !== -1) {
                     type = 5;
                 }
 
-                if (name.indexOf("KEEP") !== -1) {
-                    type = 6;
-                }
 
                 switch (type) {
                     case 1:
-                        return "#4998FB";
+                        return "#FF231E";
                     case 2:
-                        return "#59D736";
+                        return "#F82801";
                     case 3:
-                        return "#FE3E37";
-                    case 4:
                         return "#4B99FB";
+                    case 4:
+                        return "#1782C7";
                     case 5:
-                        return "#15C8C0";
-                    case 6:
-                        return "#574E5F";
+                        return "#8AE471";
                     default:
                         return "#4998FB"
                 }