diff --git a/orderDetails/cardOrder.html b/orderDetails/cardOrder.html index 45f410d..524f37d 100644 --- a/orderDetails/cardOrder.html +++ b/orderDetails/cardOrder.html @@ -14,6 +14,13 @@
+
+
+
+
+
+
+ @@ -31,14 +38,14 @@ class="bottom-img"> -
+

卡号

{{goods.card_number}}

+ alt="" @click="copyFunction(goods.card_number)" class="copy">
@@ -47,22 +54,21 @@

{{goods.card_password}}

+ alt="" @click="copyFunction(goods.card_password)" class="copy">
- -
- -
-
重新兑换
-
+
刷新
+
+ +
+
复制成功 @@ -77,7 +83,7 @@ const toast = ref(false); const clr = ref(null); const goodsCount = ref(0); - const loading = ref(true); + const loading = ref(false); onMounted(() => { goodsCount.value = Number(sessionStorage.getItem('goodsCount')) || 0; @@ -85,14 +91,20 @@ }); /* 获取详情 */ - function getInfo () { - loading.value = false; + function getInfo (isLoading) { + const orderNumber = sessionStorage.getItem('orderNumber'); req.axiosGet(`/key/order/detail/${orderNumber}`).then(res => { - loading.value = true; + if (isLoading) { + loading.value = true; + const clr = setTimeout(() => { + loading.value = false; + clearTimeout(clr); + }, 1000); + } if (res.code == 200) { - const { product_name, status, show_url, card_number, card_password, use_coupon } = res.data; - goods.value = { product_name, time: res.data.goods.end_time, status, show_url, card_number, card_password, card_show: res.data.goods.card_show, use_coupon }; + const { product_name, status, show_url, card_number, card_password, use_coupon, product } = res.data; + goods.value = { product_name, time: res.data.goods.end_time, status, show_url, card_number, card_password, card_show: res.data.goods.card_show, use_coupon, detail_url: product.detail_url }; } }); } diff --git a/orderDetails/chargerOrder.html b/orderDetails/chargerOrder.html index 2334b2b..10f8e60 100644 --- a/orderDetails/chargerOrder.html +++ b/orderDetails/chargerOrder.html @@ -38,7 +38,7 @@ {{goods.orderNumber}}

+ alt="" @click="copyFunction(goods.orderNumber)" class="copy">

订单时间： diff --git a/orderDetails/orderCss.css b/orderDetails/orderCss.css index c4e1ba2..6233b66 100644 --- a/orderDetails/orderCss.css +++ b/orderDetails/orderCss.css @@ -3,7 +3,6 @@ padding: 0; font-family: HYQiHei; list-style: none; - color: #333333; } html { @@ -38,10 +37,11 @@ body { #app { width: 100%; - height: 100%; + min-height: 100%; background: #f0f5ff; box-sizing: border-box; position: relative; + padding-bottom: 0.2rem; } #app .banner { @@ -49,6 +49,95 @@ body { max-height: 100%; } +#app .mask { + position: fixed; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.2); + text-align: center; + display: flex; + align-items: center; + justify-content: center; + top: 0; + left: 0; + z-index: 999; +} + +#app .loading, +#app .loading > div { + position: relative; + box-sizing: border-box; +} + +#app .loading { + display: block; + font-size: 0; + color: #5983ff; +} + +#app .loading.la-dark { + color: #333; +} + +#app .loading > div { + display: inline-block; + float: none; + background-color: currentColor; + border: 0 solid currentColor; +} + +#app .loading { + width: 0.34rem; + height: 0.34rem; + animation: ball-spin-rotate 2s infinite linear; +} + +#app .loading > div { + position: absolute; + top: 0; + width: 60%; + height: 60%; + border-radius: 100%; + animation: ball-spin-bounce 2s infinite ease-in-out; +} + +#app .loading > div:last-child { + top: auto; + bottom: 0; + animation-delay: -1s; +} + +#app .loading.la-sm { + width: 0.16rem; + height: 0.16rem; +} + +#app .loading.la-2x { + width: 0.64rem; + height: 0.64rem; +} + +#app .loading.la-3x { + width: 0.96rem; + height: 0.96rem; +} + +@keyframes ball-spin-rotate { + 100% { + transform: rotate(360deg); + } +} + +@keyframes ball-spin-bounce { + 0%, + 100% { + transform: scale(0); + } + 50% { + transform: scale(1); + } +} + #app .main { position: relative; width: 90%; @@ -217,7 +306,7 @@ body { margin-left: 0.1rem; } -#app .c-item img { +#app .c-item .copy { width: 0.15rem; height: 0.15rem; } diff --git a/orderDetails/orderCss.scss b/orderDetails/orderCss.scss index 0e4e3c3..2f95f54 100644 --- a/orderDetails/orderCss.scss +++ b/orderDetails/orderCss.scss @@ -3,7 +3,6 @@ padding: 0; font-family: HYQiHei; list-style: none; - color: #333333; } html { @@ -40,16 +39,108 @@ body { #app { width: 100%; - height: 100%; + min-height: 100%; background: #f0f5ff; box-sizing: border-box; position: relative; + padding-bottom: 0.2rem; .banner { width: 100%; max-height: 100%; } + .mask { + position: fixed; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.2); + text-align: center; + display: flex; + align-items: center; + justify-content: center; + top: 0; + left: 0; + z-index: 999; + } + + .loading, + .loading>div { + position: relative; + box-sizing: border-box; + } + + .loading { + display: block; + font-size: 0; + color: #5983ff; + } + + .loading.la-dark { + color: #333; + } + + .loading>div { + display: inline-block; + float: none; + background-color: currentColor; + border: 0 solid currentColor; + } + + .loading { + width: 0.34rem; + height: 0.34rem; + animation: ball-spin-rotate 2s infinite linear; + } + + .loading>div { + position: absolute; + top: 0; + width: 60%; + height: 60%; + border-radius: 100%; + animation: ball-spin-bounce 2s infinite ease-in-out; + } + + .loading>div:last-child { + top: auto; + bottom: 0; + animation-delay: -1s; + } + + .loading.la-sm { + width: 0.16rem; + height: 0.16rem; + } + + .loading.la-2x { + width: 0.64rem; + height: 0.64rem; + } + + .loading.la-3x { + width: 0.96rem; + height: 0.96rem; + } + + @keyframes ball-spin-rotate { + 100% { + transform: rotate(360deg); + } + } + + @keyframes ball-spin-bounce { + + 0%, + 100% { + transform: scale(0); + } + + 50% { + transform: scale(1); + } + } + .main { position: relative; width: 90%; @@ -147,6 +238,8 @@ body { display: block; } + + .back { position: fixed; top: 0.1rem; @@ -219,10 +312,11 @@ body { margin-left: 0.1rem; } - img { + .copy { width: 0.15rem; height: 0.15rem; } + } .detail_url {