日常提交

file/assets/css/detail.css

@@ -3,7 +3,6 @@
     width: 100%;
     background: #f8f8f8;
 }
-
 .detail .detail-router {
     line-height: 50px;
     text-align: left;
@@ -13,7 +12,6 @@
     height: 50px;
     background: white;
 }
-
 .detail .detail-router .detail-router-list {
     list-style: none;
     margin: 0;
@@ -23,45 +21,37 @@
     font-weight: bold;
     display: flex;
 }
-
 .detail .detail-router .detail-router-list .detail-router-item {
     margin: 0 10px;
 }
-
 .detail .detail-router .detail-router-list .detail-router-item:hover {
     cursor: pointer;
     color: #207cfb;
     text-decoration: underline;
 }
-
 .detail .goods-show {
     background: #cfddd6;
     height: 300px;
     padding-top: 35px;
 }
-
 .detail .goods-show .goods-show-info {
     width: 1180px;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
 }
-
 .detail .goods-show .goods-show-info .goods-show-body {
     display: flex;
 }
-
 .detail .goods-show .goods-show-info .goods-show-body .goods-show-img {
     perspective: 300px;
 }
-
 .detail .goods-show .goods-show-info .goods-show-body .goods-show-img img {
     transform-origin: left center;
     transform: rotateY(10deg) rotateX(5deg);
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
     border-radius: 20px;
 }
-
 .detail .goods-show .goods-show-info .goods-show-body .goods-show-text {
     padding-top: 20px;
     padding-left: 30px;
@@ -69,14 +59,12 @@
     width: 600px;
     text-align: left;
 }
-
 .detail .goods-show .goods-show-info .goods-show-body .goods-show-text .goods-show-title {
     line-height: 35px;
     font-size: 30px;
     font-weight: bold;
     color: #777;
 }
-
 .detail .goods-show .goods-show-info .goods-show-body .goods-show-text .goods-show-advantages {
     margin-top: 15px;
     color: #888;
@@ -84,19 +72,15 @@
     justify-content: left;
     flex-wrap: wrap;
 }
-
 .detail .goods-show .goods-show-info .goods-show-body .goods-show-text .goods-show-advantages .goods-show-advantage-not-icon {
     width: 85px;
 }
-
 .detail .goods-show .goods-show-info .goods-show-body .goods-show-text .goods-show-advantages .goods-show-advantage-icon {
     width: 110px;
 }
-
 .detail .goods-show .goods-show-info .goods-show-body .goods-show-text .goods-show-advantages .goods-show-advantage-icon .goods-show-tag {
     padding-left: 0px;
 }
-
 .detail .goods-show .goods-show-info .goods-show-body .goods-show-text .goods-show-advantages .goods-show-advantage {
     padding: 5px;
     margin-bottom: 5px;
@@ -109,29 +93,24 @@
     user-select: none;
     text-align: center;
 }
-
 .detail .goods-show .goods-show-info .goods-show-body .goods-show-text .goods-show-advantages .goods-show-advantage img {
     width: 25px;
     height: 25px;
     border-radius: 50%;
 }
-
 .detail .goods-show .goods-show-info .goods-show-body .goods-show-text .goods-show-advantages .goods-show-advantage .goods-show-tag {
     width: 100%;
 }
-
-.detail .goods-show .goods-show-info .goods-show-body .goods-show-text .goods-show-advantages .goods-show-advantage .goods-show-tag .goods-show-name {
+.detail .goods-show .goods-show-info .goods-show-body .goods-show-text .goods-show-advantages .goods-show-advantage .goods-show-name {
     font-size: 16px;
     line-height: 20px;
     color: #666666;
     font-weight: bold;
 }
-
-.detail .goods-show .goods-show-info .goods-show-body .goods-show-text .goods-show-advantages .goods-show-advantage .goods-show-tag .goods-show-desc {
+.detail .goods-show .goods-show-info .goods-show-body .goods-show-text .goods-show-advantages .goods-show-advantage .goods-show-desc {
     font-size: 12px;
 }
-
-.detail .goods-show .goods-show-info .goods-show-body .goods-show-text .goods-show-des {
+.detail .goods-show .goods-show-info .goods-show-body .goods-show-des {
     margin-top: 30px;
     color: #aaa;
     height: 140px;
@@ -139,12 +118,10 @@
     text-overflow: ellipsis;
     overflow: hidden;
 }
-
 .detail .goods-show .goods-show-info .goods-show-count {
     display: flex;
     width: 150px;
 }
-
 .detail .goods-show .goods-show-info .goods-show-count .goods-show-price-text {
     font-size: 12px;
     width: 150px;
@@ -154,11 +131,9 @@
     height: 34px;
     background: rgba(255, 255, 255, 0.3);
 }
-
 .detail .goods-show .goods-show-info .goods-show-count .goods-show-price-text span:nth-child(1) {
     color: #999;
 }
-
 .detail .goods-info {
     width: 1180px;
     display: flex;
@@ -166,11 +141,9 @@
     justify-content: space-between;
     margin: 20px auto 0 auto;
 }
-
 .detail .goods-info .info-left {
     width: 760px;
 }
-
 .detail .goods-info .info-left .info-left-select-btns {
     padding: 15px;
     width: 730px;
@@ -182,7 +155,6 @@
     flex-wrap: wrap;
     background: white;
 }
-
 .detail .goods-info .info-left .info-left-select-btns .info-left-select-btn {
     margin: 0 10px 20px 0;
     height: 35px;
@@ -196,17 +168,14 @@
     transition: background-color 0.2s ease;
     user-select: none;
 }
-
 .detail .goods-info .info-left .info-left-select-btns .info-left-select-btn:hover {
     background: #888888;
     color: white;
 }
-
 .detail .goods-info .info-left .info-left-select-btns .info-left-select-btn:active {
     background: #dddddd;
     color: #888888;
 }
-
 .detail .goods-info .info-left .info-left-select-param {
     padding: 15px;
     border-radius: 0 0 5px 5px;
@@ -218,7 +187,6 @@
     justify-content: space-between;
     flex-wrap: wrap;
 }
-
 .detail .goods-info .info-left .info-left-select-param .info-left-select-param-btn {
     user-select: none;
     width: 300px;
@@ -233,23 +201,25 @@
     font-size: 12px;
     margin-bottom: 10px;
 }
-
 .detail .goods-info .info-left .info-left-select-param .info-left-select-param-btn .ilspb-selector {
     line-height: 35px;
     width: 20px;
     height: 20px;
     background: #888888;
+    color: white;
     border-radius: 50%;
     margin: 7px 0;
     display: flex;
     align-items: center;
     justify-content: center;
 }
-
+.detail .goods-info .info-left .info-left-select-param .info-left-select-param-btn .ilspb-selector svg{
+    width: 15px;
+    height: 15px;
+}
 .detail .goods-info .info-left .info-left-select-param .info-left-select-param-btn span {
     margin-left: 10px;
 }
-
 .detail .goods-info .info-left .info-left-select-param .info-left-select-param-btn .ilspb-tag {
     margin-top: -15px;
     margin-left: 0;
@@ -263,13 +233,496 @@
     color: rgba(223, 30, 28);
     border: rgba(223, 30, 28) 1px solid;
 }
-
 .detail .goods-info .info-left .info-left-select-param .info-left-select-param-btn:hover .ilspb-tag {
     background: rgba(248, 217, 209, 0.3);
 }
-
 .detail .goods-info .info-left .info-left-select-param .info-left-select-param-btn .it {
     margin: -15px 0 0 180px;
 }
+.detail .goods-info .info-left .info-left-select-param .info-left-select-param-btn:hover {
+    background: #aaa;
+    color: white;
+}
+.detail .goods-info .info-left .info-left-select-param .info-left-select-param-btn:active {
+    background: #dddddd;
+    color: #aaa;
+}
+.detail .goods-info .info-left .info-left-des {
+    margin-top: 30px;
+    border-radius: 5px;
+    min-height: 600px;
+    padding: 0 20px 20px 20px;
+    border: #dddddd 1px solid;
+    background: white;
+}
+.detail .goods-info .info-left .info-left-des .des-tags {
+    display: flex;
+    flex-wrap: wrap;
+    font-size: 16px;
+    border-bottom: #dddddd 1px solid;
+}
+.detail .goods-info .info-left .info-left-des .des-tags .des-tag {
+    padding: 15px 5px;
+    transition: font-size 0.2s ease;
+    line-height: 30px;
+    cursor: pointer;
+}
+.detail .goods-info .info-left .info-left-des .des-tags .des-select-tag {
+    font-weight: bold;
+    font-size: 20px;
+}
+.detail .goods-info .info-left .info-left-des .info-introduction {
+    text-align: left;
+    text-indent: 2em;
+    height: auto;
+}
+.detail .goods-info .info-right {
+    width: 380px;
+}
+.detail .goods-info .info-right .info-right-price-calc {
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-purchase-count {
+    display: flex;
+    justify-content: space-between;
+    padding: 20px 30px;
+    border-radius: 5px 5px 0 0;
+    background: white;
+    border: solid #dddddd;
+    border-width: 1px 1px 0 1px;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-purchase-count .irpc-font {
+    font-size: 14px;
+    line-height: 36px;
+    text-align: left;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-purchase-count .irpc-count-button {
+    width: 120px;
+    border-radius: 15px;
+    background: #f0f0f0;
+    height: 36px;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-purchase-count .irpc-count-button .irpc-count-button-minus,
+.detail .goods-info .info-right .info-right-price-calc .info-right-purchase-count .irpc-count-button .irpc-count-button-add {
+    text-align: center;
+    line-height: 36px;
+    font-weight: bold;
+    color: #666666;
+    font-size: 18px;
+    width: 40px;
+    cursor: pointer;
+    user-select: none;
+    border-radius: 0 15px 15px 0;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-purchase-count .irpc-count-button .irpc-count-button-minus:nth-child(1) {
+    border-radius: 15px 0 0 15px;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-purchase-count .irpc-count-button .irpc-count-button-minus:hover,
+.detail .goods-info .info-right .info-right-price-calc .info-right-purchase-count .irpc-count-button .irpc-count-button-add:hover {
+    background: #eaeaea;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-purchase-count .irpc-count-button .irpc-count-button-input {
+    text-align: center;
+    line-height: 36px;
+    width: 40px;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-purchase-count .irpc-count-button .irpc-count-button-input input {
+    color: #666666;
+    font-size: 14px;
+    text-align: center;
+    width: 40px;
+    outline: none;
+    background: transparent;
+    border: transparent;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-total-purchase-price {
+    border: solid #dddddd;
+    border-width: 0 1px 1px 1px;
+    border-radius: 0 0 5px 5px;
+    height: 200px;
+    width: 318px;
+    padding: 10px 30px 10px 30px;
+    background: white;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-total-purchase-price .price-name {
+    justify-content: left;
+    text-align: left;
+    font-size: 26px;
+    font-weight: bold;
+    display: inline-block;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-total-purchase-price .price {
+    display: flex;
+    vertical-align: bottom;
+    justify-content: space-between;
+    margin: 10px 5px 0 5px;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-total-purchase-price .price .price-number {
+    display: flex;
+    justify-content: right;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-total-purchase-price .price .price-number .price-original {
+    padding-top: 13px;
+    display: block;
+    position: relative;
+    bottom: 0;
+    width: auto;
+    color: #8b8b8b;
+    text-decoration: line-through;
+    font-size: 14px;
+    text-align: right;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-total-purchase-price .price .price-number .price-original:before {
+    content: "￥";
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-total-purchase-price .price .price-number .price-value {
+    font-weight: bold;
+    font-size: 26px;
+    color: #ff4d4f;
+    text-align: right;
+    letter-spacing: -1.5px;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-total-purchase-price .price .price-number .price-value:before {
+    content: "￥";
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-total-purchase-price .purchase-button {
+    border-top: 1px solid #dddddd;
+    width: 320px;
+    height: 45px;
+    margin: 20px auto 0 auto;
+    color: white;
+    text-align: center;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-total-purchase-price .purchase-button .purchase-button-btn {
+    margin-top: 20px;
+    background: #207cfb;
+    border-radius: 5px;
+    line-height: 45px;
+    user-select: none;
+    cursor: pointer;
+}
+.detail .goods-info .info-right .info-recommend {
+    margin-top: 40px;
+    margin-bottom: 20px;
+    width: 380px;
+    background: #fff;
+    border-radius: 5px;
+    border: 1px solid #dddddd;
+}
+.detail .goods-info .info-right .info-recommend .info-recommend-title {
+    font-size: 24px;
+    font-weight: bold;
+    text-align: center;
+    padding-bottom: 15px;
+    margin-bottom: 15px;
+    border-bottom: 1px solid #dddddd;
+}
+.detail .goods-info .info-right .info-recommend .info-recommend-items {
+    width: 320px;
+    padding: 10px 30px;
+    min-height: 30px;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    display: flex;
+}
+.detail .goods-info .info-right .info-recommend .info-recommend-items .info-recommend-item {
+    cursor: pointer;
+    margin: 0 10px 20px 10px;
+    max-width: 150px;
+}
+.detail .goods-info .info-right .info-recommend .info-recommend-items .info-recommend-item .recommend-item-img {
+    width: 110px;
+    height: 143px;
+    margin-bottom: 12px;
+}
+.detail .goods-info .info-right .info-recommend .info-recommend-items .info-recommend-item .recommend-item-img img {
+    border-radius: 15px;
+    width: 110px;
+    height: 143px;
+    z-index: 1;
+}
+.detail .goods-info .info-right .info-recommend .info-recommend-items .info-recommend-item .recommend-item-img:after {
+    transition: all 5.3s ease;
+    margin: -148px 0 0 0;
+    position: absolute;
+    display: none;
+    z-index: 2;
+    content: "";
+    width: 110px;
+    height: 143px;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 15px;
+}
+.detail .goods-info .info-right .info-recommend .info-recommend-items .info-recommend-item .recommend-item-img:hover:after {
+    display: block;
+}
+.detail .goods-info .info-right .info-recommend .info-recommend-items .info-recommend-item:hover .recommend-item-img img {
+    box-shadow: #333 0 0 8px;
+}
+.detail .goods-info .info-right .info-recommend .info-recommend-items .info-recommend-item .recommend-item-name {
+    width: 110px;
+    height: 38px;
+    font-size: 12px;
+    text-align: left;
+}
+
+
+.content * {
+    max-width: 740px;
+}
+
+
+.content img {
+    max-width: 680px;
+}
+/*//todo order*/
+.order-buy-curtain {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100VW;
+    height: 100VH;
+    background: rgba(0, 0, 0, 0.5);
+}
+
+.order-buy-body {
+    position: absolute;
+    top: calc(50% - 200px);
+    left: calc(50% - 300px);
+    background: white;
+    border-radius: 15px;
+    padding: 20px;
+}
+
+.order-buy-title {
+    font-size: 24px;
+    font-weight: bold;
+    text-align: left;
+    margin-bottom: 15px;
+}
+
+.order-buy-close {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    right: 10px;
+    top: 10px;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    transition: background-color 0.2s ease;
+    color: #aaaaaa;
+    cursor: pointer;
+}
+
+.order-buy-close:hover {
+    color: #555555;
+    background-color: rgba(0, 0, 0, 0.2);
+}
+
+.order-body {
+    display: flex;
+    justify-content: space-between;
+}
+
+.order-buy-pay {
+    color: #333333;
+    width: 380px;
+    border-radius: 15px;
+    border: #dddddd 1px solid;
+    margin-right: 10px;
+    height: auto;
+}
+
+.order-buy-pay-list {
+    display: flex;
+    justify-content: left;
+    margin: 10px 10px 0 10px;
+    border-bottom: solid 3px #dddddd;
+}
+
+.order-buy-pay-item {
+    height: 40px;
+    width: calc(340px / 3);
+    background-color: #dddddd;
+    border-radius: 5px 5px 0 0;
+    user-select: none;
+    cursor: pointer;
+    margin-right: 10px;
+}
+
+.order-buy-pay-item:last-child {
+    margin-right: 0;
+}
+
+.order-buy-pay-item:hover {
+    background-color: #cccccc;
+}
+
+.order-buy-pay-item div .order-buy-pay-name {
+    font-size: 14px;
+    font-weight: bold;
+}
+
+.order-buy-pay-item div .order-buy-pay-tip {
+    font-size: 12px;
+    color: #ea6200;
+}
+
+.order-buy-pay-select {
+    position: relative;
+    height: 40px;
+    background-color: transparent;
+    border-width: 0 0 3px 0;
+    border-style: solid;
+    width: calc(340px / 3);
+    transition: left 0.2s ease-in-out, border-color 0.2s ease-in-out;
+    top: -43px;
+    margin: 0;
+    padding: 0;
+}
+
+.order-buy-pay-body {
+    padding: 20px 0 10px;
+    margin: -43px 10px 10px;
+    border-radius: 0 0 10px 10px;
+    background: #eeeeee;
+}
+
+.pay-body-qrcode {
+    width: 150px;
+    height: 150px;
+    background-color: #dddddd;
+    margin: 0 auto 20px;
+}
+
+#test-purchase {
+    border-radius: 10px;
+    width: 100%;
+    height: 40px;
+    background-color: #207cfb;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    color: white;
+    font-weight: bold;
+    font-size: 14px;
+    user-select: none;
+}
+
+.pay-body-info {
+    display: flex;
+    justify-content: space-between;
+    width: 150px;
+    margin: 0 auto 5px;
+}
+
+.pay-body-info-title {
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.pay-body-info-amount {
+    font-size: 16px;
+    color: #ff4d4f;
+}
+
+.pay-body-info-amount:before {
+    content: "￥";
+}
+
+.pay-body-tip {
+    text-align: center;
+}
+
+.pay-body-tip-line {
+    cursor: pointer;
+}
+
+.pay-body-tip-line:hover {
+    color: #aaaaaa;
+}
+
+.order-buy-info {
+    border-radius: 15px;
+    width: 335px;
+    text-align: left;
+}
+
+.order-buy-info-body {
+    margin: 10px;
+    border-radius: 10px;
+}
+
+.order-buy-info-title {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
 
-.detail .
+.order-buy-info-data {
+    display: flex;
+    justify-content: left;
+    border-bottom: 1px solid #cccccc;
+    padding-bottom: 10px;
+}
+
+.order-image {
+    padding-right: 20px;
+}
+
+.order-image img {
+    border-radius: 5px;
+    width: 50px;
+    height: 70px;
+}
+
+.order-name {
+    font-size: 14px;
+    font-weight: bold;
+}
+
+.order-data {
+    margin-top: 20px;
+}
+
+.order-data-item {
+    display: flex;
+    justify-content: space-between;
+    margin: 5px 0;
+}
+
+.order-data-item-name:after {
+    content: ":";
+}
+
+.order-data-item-value {
+    display: flex;
+    vertical-align: bottom;
+}
+
+.value-delete-line {
+    text-decoration: line-through;
+    height: 16px;
+    margin-top: 6px;
+    font-size: 12px;
+    color: #888888;
+    margin-right: 5px;
+}
+
+.value-delete-line:before {
+    content: "￥";
+}
+
+.value-now {
+    color: #ff4d4f;
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.value-now:before {
+    content: "￥";
+}

file/assets/js/Detail.js

@@ -0,0 +1,159 @@
+var purchaseQuantity = 1
+var areaId = 0
+
+function init(skuHistoricalPrice, skuPrice) {
+    var priceInput = document.getElementById("irpc-input")
+    priceInput.addEventListener("input", (e) => {
+        purchaseQuantity = e.target.value
+        if (purchaseQuantity <= 0) {
+            purchaseQuantity = 1
+        }
+        if (purchaseQuantity > 999) {
+            purchaseQuantity = 999
+        }
+
+    })
+
+
+    var pchp = document.getElementById("price-calc-historical-price")
+    var pcp = document.getElementById("price-calc-price")
+
+
+    setInterval(() => {
+        priceInput.value = purchaseQuantity
+        //计算价格
+        if (pchp) {
+            pchp.innerText = (skuHistoricalPrice * purchaseQuantity).toFixed(2)
+        }
+        if (pcp) {
+            pcp.innerText = (skuPrice * purchaseQuantity).toFixed(2)
+        }
+    }, 100)
+}
+
+// 购买数量减
+function purchaseQuantityAdd() {
+    if (purchaseQuantity >= 999) {
+        purchaseQuantity = 999
+        return
+    }
+    purchaseQuantity++;
+}
+
+// 购买数量减
+function purchaseQuantityMinus() {
+    if (purchaseQuantity <= 1) {
+        purchaseQuantity = 1
+        return
+    }
+    purchaseQuantity--;
+}
+
+function GetAreaById(areaId) {
+    let areaEles = document.getElementsByClassName("info-left-select-btn")
+    for (let i = 0; i < areaEles.length; i++) {
+        if (areaEles[i].getAttribute("areaId") == areaId) {
+            areaEles[i].style.backgroundColor = "rgb(199, 199, 199)"
+        } else {
+            areaEles[i].style.backgroundColor = ""
+        }
+    }
+
+
+
+
+    console.log(areaId)
+    let eles = document.getElementsByClassName("info-left-select-param-btn");
+    for (let i = 0; i < eles.length; i++) {
+        if (eles[i].getAttribute("areaId") == areaId) {
+            eles[i].style = ""
+        } else {
+            eles[i].style.display = "none"
+        }
+    }
+    return areaId
+}
+
+
+function RouterJumpId(id) {
+    window.location.href = "?skuId=" + id
+
+}
+//TODO a
+function orderSubmit() {
+
+    const data = {
+        skuId: skuData.id,
+        count: purchaseQuantity,
+        //优惠券
+        couponUserId: 0,
+        //联系信息
+        contactInformation: ""
+    };
+
+    fetch('/api/order/submit', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(data)
+    })
+        .then(response => response.json())
+        .then(data => {
+            console.log('Success:', data);
+            alert("假装购买成功");
+        })
+        .catch((error) => {
+            console.error('Error:', error);
+            alert("购买失败");
+        });
+}
+
+let selectIndex = 0;
+let nowSku = { Price: 100, SkuImage: "path/to/image", SkuName: "SKU 名称", HistoricalPrices: 120 }; // Example data
+let count = 1;
+let goodsName = "商品名称"; // Example data
+
+function closeView() {
+    document.querySelector(".order-buy-curtain").style.display = "none";
+}
+
+function selectPayMethod(index) {
+    selectIndex = index;
+    document.querySelectorAll(".order-buy-pay-item").forEach((item, idx) => {
+        item.style.backgroundColor = idx === index ? "#cccccc" : "#dddddd";
+    });
+    updatePaySelectPosition();
+    document.getElementById("test-purchase").style.display = index === 2 ? "flex" : "none";
+}
+
+function updatePaySelectPosition() {
+    const select = document.getElementById("pay-select");
+    const wxColor = "rgba(0, 168, 242, 1)";
+    const zfbColor = "rgba(1, 183, 0, 1)";
+    const pyColor = "rgba(234, 98, 0, 1)";
+    let bc = "";
+    switch (selectIndex) {
+        case 0:
+            bc = wxColor;
+            break;
+        case 1:
+            bc = zfbColor;
+            break;
+        case 2:
+            bc = pyColor;
+            break;
+    }
+    select.style.left = 10 + (selectIndex * (10 + 340 / 3)) + "px";
+    select.style.borderColor = bc;
+}
+
+function orderTest() {
+    console.log("Test order submitted");
+    alert("假装购买成功");
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+    selectPayMethod(0); // Set default selection
+});
+

file/static/detail.html

@@ -172,9 +172,10 @@
         </div>
     </div>
 </div>
-<div class="detail" v-if="detailInfo !== null">
+<div class="detail">
     <!--    路由地址栏-->
     <RouterJumpBar v-model:nowRouterName="detailInfo.sku.skuName"/>
+
     <div class="goods-show">
         <div class="goods-show-info">
             <div class="goods-show-body">
@@ -225,41 +226,70 @@
 
             <div class="goods-info">
                 <div class="info-left">
-
                     {{if .areas}}
                     <div class="info-left-select-btns">
+                        {{$skuAreaId := .sku.commodityAreaId}}
                         {{range $area := .areas}}
-                        {{if eq .sku.commodityAreaId $area.id}}
+                        {{if eq $skuAreaId $area.id}}
                         <div class="info-left-select-btn"
-                             @click="selectCommodityArea(item.id)"
-                             style="background-Color:#c7c7c7">
-                            <span>{{ $area.commodityAreaName }} {{ $area.id }}</span>
+                             areaId="{{$area.id}}"
+                             onclick="GetAreaById({{$area.id}})"
+                             style="background-color: rgb(199, 199, 199);">
+                            <span>{{ $area.commodityAreaName }}</span>
                         </div>
                         {{else}}
                         <div class="info-left-select-btn"
-                             @click="selectCommodityArea(item.id)">
-                            <span>{{ $area.commodityAreaName }} {{ $area.id}}</span>
+                             areaId="{{$area.id}}"
+                             onclick="GetAreaById({{$area.id}})">
+                            <span>{{ $area.commodityAreaName }}</span>
                         </div>
                         {{end}}
                         {{end}}
-
                     </div>
                     {{end}}
                     <div class="info-left-select-param">
-                        <template v-for="(item,index) in selectorDatas">
-                            <div class="info-left-select-param-btn" @click="selectSku(item.id)">
-                                <div class="ilspb-selector">
-                                    <el-icon v-if="detailInfo.sku.id==item.id" size="15" color="#dddddd">
-                                        <Select/>
-                                    </el-icon>
-                                </div>
-                                <span>{1{ item.skuName }}</span>
-                                <div class="ilspb-tag" :style="getTargetMarginLeft(item.price.toString())"
-                                     v-if="item.price">
-                                    ￥{1{ item.price }}
-                                </div>
+                        {{$goodsSku := .sku}}
+                        {{range $sku := .skus}}
+                        {{if eq $sku.commodityAreaId $goodsSku.commodityAreaId}}
+                        <div class="info-left-select-param-btn"
+                             onclick="RouterJumpId({{$sku.id}})" areaId="{{$sku.commodityAreaId}}">
+                            <div class="ilspb-selector">
+
+                                <svg data-v-1f073385="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"
+                                     {{if ne $sku.id $goodsSku.id}}
+                                     style="display: none"
+                                     {{end}}>
+                                    <path fill="currentColor"
+                                          d="M77.248 415.04a64 64 0 0 1 90.496 0l226.304 226.304L846.528 188.8a64 64 0 1 1 90.56 90.496l-543.04 543.04-316.8-316.8a64 64 0 0 1 0-90.496z"></path>
+                                </svg>
+                            </div>
+                            <span>{{ $sku.skuName }}</span>
+                            <div class="ilspb-tag">
+                                ￥{{ $sku.price }}
                             </div>
-                        </template>
+                        </div>
+                        {{else}}
+                        <div class="info-left-select-param-btn"
+                             onclick="RouterJumpId({{$sku.id}})"
+                             areaId="{{$sku.commodityAreaId}}" style="display: none">
+                            <div class="ilspb-selector">
+                                <svg data-v-1f073385="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"
+                                     {{if ne $sku.id $goodsSku.id}}
+                                     style="display: none"
+                                     {{end}}
+                                >
+                                    <path fill="currentColor"
+                                          d="M77.248 415.04a64 64 0 0 1 90.496 0l226.304 226.304L846.528 188.8a64 64 0 1 1 90.56 90.496l-543.04 543.04-316.8-316.8a64 64 0 0 1 0-90.496z"></path>
+                                </svg>
+
+                            </div>
+                            <span>{{ $sku.skuName }}</span>
+                            <div class="ilspb-tag">
+                                ￥{{ $sku.price }}
+                            </div>
+                        </div>
+                        {{end}}
+                        {{end}}
                     </div>
 
                     <div class="info-left-des">
@@ -272,13 +302,13 @@
                             <!--              常见问题-->
                             <!--            </div>-->
                         </div>
-                        <template v-if="detailInfo.introductions.length>0" v-show="selectArticleType==0">
-                            <!--            v-if="detailInfo.introducti ons[0].id=detailInfo.sku.commodityAreaId"-->
-                            <div class="info-introduction"
-                                 v-show="selectArticleType==0" v-html="detailInfo.introductions[0].goodsArticle">
-                            </div>
-                        </template>
-
+                        <div class="info-introduction">
+                            {{range $index, $introduction := .introductions}}
+                            {{if eq $index 0}}
+                            {{ $introduction.goodsArticle | safeHTML}}
+                            {{end}}
+                            {{end}}
+                        </div>
                         <div class="info-question" v-show="selectArticleType==1"></div>
                     </div>
 
@@ -290,12 +320,11 @@
                             <div class="irpc-font">购买数量</div>
                             <!--          数量按钮-->
                             <div class="irpc-count-button">
-                                <div class="irpc-count-button-minus" @click="purchaseQuantityMinus()">-</div>
+                                <div class="irpc-count-button-minus" onclick="purchaseQuantityMinus()">-</div>
                                 <div class="irpc-count-button-input">
-                                    <input v-model="purchaseQuantity"
-                                           @input="checkPurchaseQuantity"/>
+                                    <input id="irpc-input" value="1"/>
                                 </div>
-                                <div class="irpc-count-button-add" @click="purchaseQuantityAdd()">+</div>
+                                <div class="irpc-count-button-add" onclick="purchaseQuantityAdd()">+</div>
                             </div>
                         </div>
                         <div class="info-right-total-purchase-price">
@@ -303,232 +332,326 @@
                             <div class="price">
                                 <div class="price-name" style="font-size: 20px;color: #333333">单价</div>
                                 <div class="price-number">
-                                    <div class="price-original"
-                                         v-if="detailInfo.sku.historicalPrices>=detailInfo.sku.price">
-                                        {1{ detailInfo.sku.historicalPrices }}
+                                    {{ if lt .sku.historicalPrices .sku.price}}
+                                    <div class="price-original">
+                                        {{ .sku.historicalPrices }}
                                     </div>
-                                    <div class="price-value" style="font-size: 20px">{1{ detailInfo.sku.price }}</div>
+                                    {{end}}
+                                    <div class="price-value" style="font-size: 20px">{{ .sku.price }}</div>
                                 </div>
                             </div>
                             <div class="price">
                                 <div class="price-name">总价</div>
                                 <div class="price-number">
-                                    <div class="price-original"
-                                         v-if="detailInfo.sku.historicalPrices>=detailInfo.sku.price">
-                                        {1{ detailInfo.sku.historicalPrices * purchaseQuantity }}
+                                    {{if lt .sku.historicalPrices .sku.price}}
+                                    <div class="price-original" id="price-calc-historical-price">
+                                        0
+                                    </div>
+                                    {{end}}
+                                    <div class="price-value" id="price-calc-price">
+                                        0
                                     </div>
-                                    <div class="price-value">{1{ detailInfo.sku.price * purchaseQuantity }}</div>
                                 </div>
                             </div>
                             <div class="purchase-button">
-                                <div class="purchase-button-btn" @click="SubmitOrder()">
+                                <div class="purchase-button-btn" onclick="orderSubmit()">
                                     立即购买
                                 </div>
                             </div>
                         </div>
-                        <order-by-view :count="purchaseQuantity" :now-sku="detailInfo.sku"
-                                       :goods-name="detailInfo.goods.goodsName"
-                                       @closeView="closeOrderBuyView" v-model:ShowView="showOrderBuyView"
-                                       v-if="showOrderBuyView"/>
+<!--                        TODO 1-->
+                        <div class="order-buy-curtain" id="order-buy-curtain" style="">
+                            <div class="order-buy-body">
+                                <div class="order-buy-title">订单详情</div>
+                                <div class="order-buy-close" onclick="closeView()">
+                                    <span style="font-size: 20px; cursor: pointer;">&times;</span>
+                                </div>
+                                <div class="order-body">
+                                    <div class="order-buy-pay">
+                                        <div class="order-buy-pay-list">
+                                            <div class="order-buy-pay-item" onclick="selectPayMethod(0)" id="pay-wx">
+                                                <div class="order-buy-pay-wx">
+                                                    <div class="order-buy-pay-name">微信</div>
+                                                    <div class="order-buy-pay-tip">+20%手续费</div>
+                                                </div>
+                                            </div>
+                                            <div class="order-buy-pay-item" onclick="selectPayMethod(1)" id="pay-zfb">
+                                                <div class="order-buy-pay-zfb">
+                                                    <div class="order-buy-pay-name">支付宝</div>
+                                                    <div class="order-buy-pay-tip">随机立减最高16.8元</div>
+                                                </div>
+                                            </div>
+                                            <div class="order-buy-pay-item" onclick="selectPayMethod(2)" id="pay-test">
+                                                <div class="order-buy-pay-py">
+                                                    <div class="order-buy-pay-name">Test 支付</div>
+                                                    <div class="order-buy-pay-tip">免费，测试专用</div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="order-buy-pay-select" id="pay-select"></div>
+                                        <div class="order-buy-pay-body">
+                                            <div class="pay-body-qrcode">
+                                                <div id="test-purchase" style="display: none;" onclick="orderTest()">
+                                                    假装购买
+                                                </div>
+                                            </div>
+                                            <div class="pay-body-info">
+                                                <div class="pay-body-info-title">应付金额</div>
+                                                <div class="pay-body-info-amount">{{.NowSku.Price}} * {{.Count}}</div>
+                                            </div>
+                                            <div class="pay-body-tip">
+                                                <span>购买即同意</span>
+                                                <span class="pay-body-tip-line">《购买协议》</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="order-buy-info">
+                                        <div class="order-buy-info-body">
+                                            <div class="order-buy-info-title">订单信息</div>
+                                            <div class="order-buy-info-data">
+                                                <div class="order-image">
+                                                    <img src="{{.sku.skuImage}}" alt="图片"/>
+                                                </div>
+                                                <div class="order-name">{{.goods.goodsName}}</div>
+                                            </div>
+                                            <div class="order-data">
+                                                <div class="order-data-item">
+                                                    <div class="order-data-item-name">类型</div>
+                                                    <div class="order-data-item-value">{{.sku.skuName}}</div>
+                                                </div>
+                                                <div class="order-data-item">
+                                                    <div class="order-data-item-name">数量</div>
+                                                    <div class="order-data-item-value">{{.Count}}!!</div>
+                                                </div>
+                                                <div class="order-data-item">
+                                                    <div class="order-data-item-name">单价</div>
+                                                    <div class="order-data-item-value">
+                                                        <div class="value-delete-line">{{.sku.historicalPrices}}</div>
+                                                        <div class="value-now">{{.sku.price}}</div>
+                                                    </div>
+                                                </div>
+                                                <div class="order-data-item">
+                                                    <div class="order-data-item-name">总计</div>
+                                                    <div class="order-data-item-value">
+                                                        <div class="value-delete-line">{{.NowSku.HistoricalPrices}} * {{.Count}}</div>
+                                                        <div class="value-now">{{.NowSku.Price}} * {{.Count}}</div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                     <div class="info-recommend">
                         <div class="info-recommend-title">
                             相关推荐
                         </div>
                         <div class="info-recommend-items">
-                            <template v-for="item in detailInfo.recommendedGoods">
-                                <div class="info-recommend-item" @click="SelectRecommended(item.id)">
-                                    <div class="recommend-item-img">
-                                        <img :src="item.skuImage" alt="图片"/>
-                                    </div>
-                                    <div class="recommend-item-name">
-                                        {1{ item.skuName }} {1{ item.id }}
-                                    </div>
+                            {{range .recommendedGoods}}
+                            <div class="info-recommend-item" onclick="RouterJumpId({{.id}})">
+                                <div class="recommend-item-img">
+                                    <img src="{{.skuImage}}" alt="图片"/>
                                 </div>
-                            </template>
+                                <div class="recommend-item-name">
+                                    {{ .skuName }} {{.id }}
+                                </div>
+                            </div>
+                            {{end}}
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-        <div class="bottom-bar">
-            <!--    合作伙伴-->
-            <div class="partners">
-                <div class="partners-line">
-                    <ul>
-                        <li>
-                            <img style="transform: rotate(180deg);"
-                                 src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAeCAYAAADzXER0AAAAAXNSR0IArs4c6QAAAhdJREFUSEulVU1rE1EUPdfEgBAIg27UjT+jS13pTpeKriMxRQxJ3hukBnc2ZUwiLUFGxRbbKqZ/Rve+2bswkSB13jDvygtJSZPJl5nlzJz7zr33nPNISlmL4/it53k/seJDQoh3RMRKqc1Op6NXwZOU8j6ABoATrfXLZrP5a9kCVC6Xr6TT6a8ANpj5Y6/Xe+b7frRMAbI/SSkLANoALG1Pa/16GQYDcLFYvJzNZr8DuAbgFMBxGIaVVqvVm8dgAM7n8xcdx3kDwDIAM4dE1FZKufOGOADbp1Kp3EylUkfD0+0rzczvoyh6MauFM3ChUHByudwxM98ZFWRm28JeEARbSQzOwMPBPQLwaaLP0Bizz8y1SSGdA5dKpUuZTOYHgKsTBf4C+KKUejzO4BzYAlzX3WXmJwAuTBQYrLHb7e74vv/bfpsCCyE2iOgzgBsJazq1QjLGCM/z/iSd7Bhjdono4Ywd2xYa/X7/1RTYAoQQ94hoH0BuVgFjzEkiWEp5F8DBPLA10jzaDxKGZonMpr3EwD4YY9zEgUkp94YaT1qV9f12vV6fXtVaIpFSJsnT6vswjuOtmfJ0XddhZiuO22PrsaJoB0HwfK4xhBC3iOhwZUuuFQbDGPoG4PoohrTWYlGOjQKwaE0/DMBGGIb1Rfk1cNVa0SuEsO7ZAXAURdH2IqrjRhldN7FS6unK1021Wq0x839ddP8AAxJAzJtS4CsAAAAASUVORK5CYII="/>
-                        </li>
-                        <!--          <li v-for="index in 9"><div><img src="../assets/steam-partners.png" alt=""></div></li>-->
-                        <li>
-                            <div><img src="../assets/image/footer/footer-slider-steam.png" alt=""></div>
-                        </li>
-                        <li>
-                            <div><img src="../assets/image/footer/footer-slider-google.png" alt=""></div>
-                        </li>
-                        <li>
-                            <div><img src="../assets/image/footer/footer-slider-tencent.png" alt=""></div>
-                        </li>
-                        <li>
-                            <div><img src="../assets/image/footer/footer-slider-microsoft.png" alt=""></div>
-                        </li>
-                        <li>
-                            <div><img src="../assets/image/footer/footer-slider-garena.png" alt=""></div>
-                        </li>
-                        <li>
-                            <div><img src="../assets/image/footer/footer-slider-ea.png" alt=""></div>
-                        </li>
-                        <li>
-                            <div><img src="../assets/image/footer/footer-slider-riot.png" alt=""></div>
-                        </li>
-                        <li>
-                            <div><img src="../assets/image/footer/footer-slider-pubg.png" alt=""></div>
-                        </li>
-                        <li>
-                            <div><img src="../assets/image/footer/footer-slider-ubisoft.png" alt=""></div>
-                        </li>
-                        <li>
-                            <img
-                                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAeCAYAAADzXER0AAAAAXNSR0IArs4c6QAAAhdJREFUSEulVU1rE1EUPdfEgBAIg27UjT+jS13pTpeKriMxRQxJ3hukBnc2ZUwiLUFGxRbbKqZ/Rve+2bswkSB13jDvygtJSZPJl5nlzJz7zr33nPNISlmL4/it53k/seJDQoh3RMRKqc1Op6NXwZOU8j6ABoATrfXLZrP5a9kCVC6Xr6TT6a8ANpj5Y6/Xe+b7frRMAbI/SSkLANoALG1Pa/16GQYDcLFYvJzNZr8DuAbgFMBxGIaVVqvVm8dgAM7n8xcdx3kDwDIAM4dE1FZKufOGOADbp1Kp3EylUkfD0+0rzczvoyh6MauFM3ChUHByudwxM98ZFWRm28JeEARbSQzOwMPBPQLwaaLP0Bizz8y1SSGdA5dKpUuZTOYHgKsTBf4C+KKUejzO4BzYAlzX3WXmJwAuTBQYrLHb7e74vv/bfpsCCyE2iOgzgBsJazq1QjLGCM/z/iSd7Bhjdono4Ywd2xYa/X7/1RTYAoQQ94hoH0BuVgFjzEkiWEp5F8DBPLA10jzaDxKGZonMpr3EwD4YY9zEgUkp94YaT1qV9f12vV6fXtVaIpFSJsnT6vswjuOtmfJ0XddhZiuO22PrsaJoB0HwfK4xhBC3iOhwZUuuFQbDGPoG4PoohrTWYlGOjQKwaE0/DMBGGIb1Rfk1cNVa0SuEsO7ZAXAURdH2IqrjRhldN7FS6unK1021Wq0x839ddP8AAxJAzJtS4CsAAAAASUVORK5CYII="/>
-                        </li>
-                    </ul>
-                </div>
+    </div>
+    {{toJson .sku}}
+    <div class="bottom-bar">
+        <!--    合作伙伴-->
+        <div class="partners">
+            <div class="partners-line">
+                <ul>
+                    <li>
+                        <img style="transform: rotate(180deg);"
+                             src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAeCAYAAADzXER0AAAAAXNSR0IArs4c6QAAAhdJREFUSEulVU1rE1EUPdfEgBAIg27UjT+jS13pTpeKriMxRQxJ3hukBnc2ZUwiLUFGxRbbKqZ/Rve+2bswkSB13jDvygtJSZPJl5nlzJz7zr33nPNISlmL4/it53k/seJDQoh3RMRKqc1Op6NXwZOU8j6ABoATrfXLZrP5a9kCVC6Xr6TT6a8ANpj5Y6/Xe+b7frRMAbI/SSkLANoALG1Pa/16GQYDcLFYvJzNZr8DuAbgFMBxGIaVVqvVm8dgAM7n8xcdx3kDwDIAM4dE1FZKufOGOADbp1Kp3EylUkfD0+0rzczvoyh6MauFM3ChUHByudwxM98ZFWRm28JeEARbSQzOwMPBPQLwaaLP0Bizz8y1SSGdA5dKpUuZTOYHgKsTBf4C+KKUejzO4BzYAlzX3WXmJwAuTBQYrLHb7e74vv/bfpsCCyE2iOgzgBsJazq1QjLGCM/z/iSd7Bhjdono4Ywd2xYa/X7/1RTYAoQQ94hoH0BuVgFjzEkiWEp5F8DBPLA10jzaDxKGZonMpr3EwD4YY9zEgUkp94YaT1qV9f12vV6fXtVaIpFSJsnT6vswjuOtmfJ0XddhZiuO22PrsaJoB0HwfK4xhBC3iOhwZUuuFQbDGPoG4PoohrTWYlGOjQKwaE0/DMBGGIb1Rfk1cNVa0SuEsO7ZAXAURdH2IqrjRhldN7FS6unK1021Wq0x839ddP8AAxJAzJtS4CsAAAAASUVORK5CYII="/>
+                    </li>
+                    <!--          <li v-for="index in 9"><div><img src="../assets/steam-partners.png" alt=""></div></li>-->
+                    <li>
+                        <div><img src="../assets/image/footer/footer-slider-steam.png" alt=""></div>
+                    </li>
+                    <li>
+                        <div><img src="../assets/image/footer/footer-slider-google.png" alt=""></div>
+                    </li>
+                    <li>
+                        <div><img src="../assets/image/footer/footer-slider-tencent.png" alt=""></div>
+                    </li>
+                    <li>
+                        <div><img src="../assets/image/footer/footer-slider-microsoft.png" alt=""></div>
+                    </li>
+                    <li>
+                        <div><img src="../assets/image/footer/footer-slider-garena.png" alt=""></div>
+                    </li>
+                    <li>
+                        <div><img src="../assets/image/footer/footer-slider-ea.png" alt=""></div>
+                    </li>
+                    <li>
+                        <div><img src="../assets/image/footer/footer-slider-riot.png" alt=""></div>
+                    </li>
+                    <li>
+                        <div><img src="../assets/image/footer/footer-slider-pubg.png" alt=""></div>
+                    </li>
+                    <li>
+                        <div><img src="../assets/image/footer/footer-slider-ubisoft.png" alt=""></div>
+                    </li>
+                    <li>
+                        <img
+                                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAeCAYAAADzXER0AAAAAXNSR0IArs4c6QAAAhdJREFUSEulVU1rE1EUPdfEgBAIg27UjT+jS13pTpeKriMxRQxJ3hukBnc2ZUwiLUFGxRbbKqZ/Rve+2bswkSB13jDvygtJSZPJl5nlzJz7zr33nPNISlmL4/it53k/seJDQoh3RMRKqc1Op6NXwZOU8j6ABoATrfXLZrP5a9kCVC6Xr6TT6a8ANpj5Y6/Xe+b7frRMAbI/SSkLANoALG1Pa/16GQYDcLFYvJzNZr8DuAbgFMBxGIaVVqvVm8dgAM7n8xcdx3kDwDIAM4dE1FZKufOGOADbp1Kp3EylUkfD0+0rzczvoyh6MauFM3ChUHByudwxM98ZFWRm28JeEARbSQzOwMPBPQLwaaLP0Bizz8y1SSGdA5dKpUuZTOYHgKsTBf4C+KKUejzO4BzYAlzX3WXmJwAuTBQYrLHb7e74vv/bfpsCCyE2iOgzgBsJazq1QjLGCM/z/iSd7Bhjdono4Ywd2xYa/X7/1RTYAoQQ94hoH0BuVgFjzEkiWEp5F8DBPLA10jzaDxKGZonMpr3EwD4YY9zEgUkp94YaT1qV9f12vV6fXtVaIpFSJsnT6vswjuOtmfJ0XddhZiuO22PrsaJoB0HwfK4xhBC3iOhwZUuuFQbDGPoG4PoohrTWYlGOjQKwaE0/DMBGGIb1Rfk1cNVa0SuEsO7ZAXAURdH2IqrjRhldN7FS6unK1021Wq0x839ddP8AAxJAzJtS4CsAAAAASUVORK5CYII="/>
+                    </li>
+                </ul>
+            </div>
 
-                <!--      服务支持-->
-                <div class="partners-service-guarantee">
-                    <div class="service-guarantee">
-                        <div class="sg-icon" style="background: rgb(225, 222, 250);">
-                            <img
-                                    class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
-                                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA1hJREFUWEftl0FO21AQhv+ZOBWtVDXLgE1wd1BQ+wLquuYE0BM0nKBwg9yg9AZwgnKDuPsWLBVaujOJTdg1Wwj2VM9JIIQ4iVMhNn1ZxFLezHz+Z97MC+GRF/1LfKu46AhRLWz+mtrP1IYa3CquOGCpBecnU/sZa2jbqqCD+b7XGlRrHIBdVLZ/4fmjVB4LUJp7XQXxBuexPggxKgWmuawYRi3G5U4Ynu6lQYwFsAt24frZc5cpJ4MQlrXiSBTdqwEdPEf5mgid5fLiDFOvBzQWQG/UaYjacAkknJcbJSxLOYiuakHz540f01SKITWAxwbXvicCuIUQl8A3EBqsfdmuhM2TXb1HBzfYqEGiMzJGv3kmBXqbO0qQVmKvHh4mQftXyVS7ROyQEY+Uvd9mYgUGg9nmWxVTtAHEYAP7vj+62qcuwjTDeauslVAQaQGyEBPWg8Bzsza2oQqYs8vbnHuyAZGOP+psY1DrLDh8r581gP5uBEdO51lajcDb7KRJvoAY+qMVihM/AjB9bjS8g7EpmJ9b2iR+qrTx7WLto9XLfT9AyVqtxnLlBOGxk3TIuVdV5pl7YjBi1x9Qaeoa6KQArXpwtDkIkCUNUwOUzFUfhL16cFgtWaoqAqcReokCWdZUAPNzy3tExuZVdKkuLk79TrvOfQDR3ZYr5NfD7/ujgFIBdDslkY1+4xiRx8LbxHkHiLYa4UkSUNcM88x2r2J06ekeJ8A7SOzVQ6+c+RiWrPIBBEoIyTQjQInICyD6KpFUg4vjsUfONpWKiY5EZKsRekMHUqoCC1bZFZCrc9w7diTk1cPD7Sw5XrBWXUHs1gMv8TO4sgFAUh2lQS1YayIiO8Nad1fZ4aZDFcgIoJuSXBt/CFj3g29DU/agCuj7AiNf42t5mXYzyghwWxOT1EHS0pk/NcIfqXFSf+gOm7tF2FeUkwBY5vIuYqigeZLaoB4WYHbR1cc4PD+tZO4D9xQwlR6/fj08SnU2GMSaXWoJ4mrY/H3v8tLbm6pAyVo7gMgbIfH1WCaCAqgAiSpxJD7QTs0CMRcEqBAZ6+3oKmnXmRUoFhdtg7n7tt0mK6T/I3xMbpJ6xHfvCYlzPfN7ryPJz2eUk0oQnI7smFMNo0kKcNI9/wEeXYG/2/HLMDfFEZMAAAAASUVORK5CYII="
-                                    draggable="false">
-                        </div>
-                        <div class="sg-info">
-                            <div>自动发货</div>
-                            <div>提供最快发货</div>
-                        </div>
+            <!--      服务支持-->
+            <div class="partners-service-guarantee">
+                <div class="service-guarantee">
+                    <div class="sg-icon" style="background: rgb(225, 222, 250);">
+                        <img
+                                class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
+                                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA1hJREFUWEftl0FO21AQhv+ZOBWtVDXLgE1wd1BQ+wLquuYE0BM0nKBwg9yg9AZwgnKDuPsWLBVaujOJTdg1Wwj2VM9JIIQ4iVMhNn1ZxFLezHz+Z97MC+GRF/1LfKu46AhRLWz+mtrP1IYa3CquOGCpBecnU/sZa2jbqqCD+b7XGlRrHIBdVLZ/4fmjVB4LUJp7XQXxBuexPggxKgWmuawYRi3G5U4Ynu6lQYwFsAt24frZc5cpJ4MQlrXiSBTdqwEdPEf5mgid5fLiDFOvBzQWQG/UaYjacAkknJcbJSxLOYiuakHz540f01SKITWAxwbXvicCuIUQl8A3EBqsfdmuhM2TXb1HBzfYqEGiMzJGv3kmBXqbO0qQVmKvHh4mQftXyVS7ROyQEY+Uvd9mYgUGg9nmWxVTtAHEYAP7vj+62qcuwjTDeauslVAQaQGyEBPWg8Bzsza2oQqYs8vbnHuyAZGOP+psY1DrLDh8r581gP5uBEdO51lajcDb7KRJvoAY+qMVihM/AjB9bjS8g7EpmJ9b2iR+qrTx7WLto9XLfT9AyVqtxnLlBOGxk3TIuVdV5pl7YjBi1x9Qaeoa6KQArXpwtDkIkCUNUwOUzFUfhL16cFgtWaoqAqcReokCWdZUAPNzy3tExuZVdKkuLk79TrvOfQDR3ZYr5NfD7/ujgFIBdDslkY1+4xiRx8LbxHkHiLYa4UkSUNcM88x2r2J06ekeJ8A7SOzVQ6+c+RiWrPIBBEoIyTQjQInICyD6KpFUg4vjsUfONpWKiY5EZKsRekMHUqoCC1bZFZCrc9w7diTk1cPD7Sw5XrBWXUHs1gMv8TO4sgFAUh2lQS1YayIiO8Nad1fZ4aZDFcgIoJuSXBt/CFj3g29DU/agCuj7AiNf42t5mXYzyghwWxOT1EHS0pk/NcIfqXFSf+gOm7tF2FeUkwBY5vIuYqigeZLaoB4WYHbR1cc4PD+tZO4D9xQwlR6/fj08SnU2GMSaXWoJ4mrY/H3v8tLbm6pAyVo7gMgbIfH1WCaCAqgAiSpxJD7QTs0CMRcEqBAZ6+3oKmnXmRUoFhdtg7n7tt0mK6T/I3xMbpJ6xHfvCYlzPfN7ryPJz2eUk0oQnI7smFMNo0kKcNI9/wEeXYG/2/HLMDfFEZMAAAAASUVORK5CYII="
+                                draggable="false">
                     </div>
-
-                    <div class="service-guarantee">
-                        <div class="sg-icon" style="background: rgb(234, 217, 247);">
-                            <img
-                                    class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
-                                    src="../assets/image/footer/footer-promise-2.png"
-                                    draggable="false">
-                        </div>
-                        <div class="sg-info">
-                            <div>正版保障</div>
-                            <div>官方正版采购,安全保障</div>
-                        </div>
+                    <div class="sg-info">
+                        <div>自动发货</div>
+                        <div>提供最快发货</div>
                     </div>
+                </div>
 
-                    <div class="service-guarantee">
-                        <div class="sg-icon" style="background: rgb(245, 221, 231);">
-                            <img
-                                    class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
-                                    src="../assets/image/footer/footer-promise-3.png"
-                                    draggable="false">
-                        </div>
-                        <div class="sg-info">
-                            <div>客户服务</div>
-                            <div>提供专业的客服咨询</div>
-                        </div>
+                <div class="service-guarantee">
+                    <div class="sg-icon" style="background: rgb(234, 217, 247);">
+                        <img
+                                class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
+                                src="../assets/image/footer/footer-promise-2.png"
+                                draggable="false">
                     </div>
-
-                    <div class="service-guarantee">
-                        <div class="sg-icon" style="background: rgb(226, 235, 230);">
-                            <img
-                                    class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
-                                    src="../assets/image/footer/footer-promise-4.png"
-                                    draggable="false">
-                        </div>
-                        <div class="sg-info">
-                            <div>100%满意度</div>
-                            <div>给予您满意的购物体验</div>
-                        </div>
+                    <div class="sg-info">
+                        <div>正版保障</div>
+                        <div>官方正版采购,安全保障</div>
                     </div>
-
-
                 </div>
-            </div>
 
-            <div class="bottom-bar-about">
-                <div class="bottom-bar-about-left">
-                    <div class="about-contact about-row">
-                        <div class="about-row-title">联系我们</div>
-                        <div class="about-row-item">平日 9:30 - 24:00</div>
-                        <div class="about-row-item">周末 9:30 - 24:00</div>
-                        <div class="about-row-imgs">
-                            <img src="../assets/image/footer/footer-about-1.png"/>
-                            <img src="../assets/image/footer/footer-about-2.png"/>
-                            <img src="../assets/image/footer/footer-about-3.png"/>
-                            <img src="../assets/image/footer/footer-about-4.png"/>
-                        </div>
+                <div class="service-guarantee">
+                    <div class="sg-icon" style="background: rgb(245, 221, 231);">
+                        <img
+                                class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
+                                src="../assets/image/footer/footer-promise-3.png"
+                                draggable="false">
                     </div>
-
-                    <div class="about-me about-row">
-                        <div class="about-row-title">关于我们</div>
-                        <div class="about-row-item">关于我们</div>
-                        <div class="about-row-item">联系我们</div>
-                        <div class="about-row-item">条款与条件</div>
-                        <div class="about-row-item">隐私和Cookie</div>
+                    <div class="sg-info">
+                        <div>客户服务</div>
+                        <div>提供专业的客服咨询</div>
                     </div>
+                </div>
 
-                    <div class="about-issue about-row">
-                        <div class="about-row-title">常见问题</div>
-                        <div class="about-row-item">帮助中心</div>
-                        <div class="about-row-item">售后服务</div>
-                        <div class="about-row-item">关于退款</div>
-                        <div class="about-row-item">关于发货</div>
+                <div class="service-guarantee">
+                    <div class="sg-icon" style="background: rgb(226, 235, 230);">
+                        <img
+                                class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
+                                src="../assets/image/footer/footer-promise-4.png"
+                                draggable="false">
+                    </div>
+                    <div class="sg-info">
+                        <div>100%满意度</div>
+                        <div>给予您满意的购物体验</div>
                     </div>
                 </div>
 
-                <div class="bottom-bar-about-right">
-                    <div class="about-my-use about-row-title">
-                        我们使用
-                    </div>
-                    <div class="my-user-images">
-                        <img src="../assets/image/footer/footer-myuse-0.png"/>
-                        <img src="../assets/image/footer/footer-myuse-1.png"/>
-                        <img src="../assets/image/footer/footer-myuse-2.png"/>
-                        <img src="../assets/image/footer/footer-myuse-3.png"/>
-                        <img src="../assets/image/footer/footer-myuse-4.png"/>
-                        <img src="../assets/image/footer/footer-myuse-5.png"/>
-                        <img src="../assets/image/footer/footer-myuse-6.png"/>
-                        <img src="../assets/image/footer/footer-myuse-7.png"/>
-                        <img src="../assets/image/footer/footer-myuse-8.png"/>
-                        <img src="../assets/image/footer/footer-myuse-9.png"/>
-                        <img src="../assets/image/footer/footer-myuse-10.png"/>
-                        <img src="../assets/image/footer/footer-myuse-11.png"/>
-                        <img src="../assets/image/footer/footer-myuse-12.png"/>
-                        <img src="../assets/image/footer/footer-myuse-13.png"/>
-                        <img src="../assets/image/footer/footer-myuse-14.png"/>
-                        <img src="../assets/image/footer/footer-myuse-15.png"/>
 
+            </div>
+        </div>
+
+        <div class="bottom-bar-about">
+            <div class="bottom-bar-about-left">
+                <div class="about-contact about-row">
+                    <div class="about-row-title">联系我们</div>
+                    <div class="about-row-item">平日 9:30 - 24:00</div>
+                    <div class="about-row-item">周末 9:30 - 24:00</div>
+                    <div class="about-row-imgs">
+                        <img src="../assets/image/footer/footer-about-1.png"/>
+                        <img src="../assets/image/footer/footer-about-2.png"/>
+                        <img src="../assets/image/footer/footer-about-3.png"/>
+                        <img src="../assets/image/footer/footer-about-4.png"/>
                     </div>
                 </div>
-            </div>
-            <div class="bottom-bar-active">
-                <img src="../assets/image/footer/footer-active-0.png"/>
-                <img src="../assets/image/footer/footer-active-1.png"/>
-                <img src="../assets/image/footer/footer-active-2.png"/>
-                <img src="../assets/image/footer/footer-active-3.png"/>
-                <img src="../assets/image/footer/footer-active-4.png"/>
-            </div>
-            <div class="footer-about-box">
-                <img src="../assets/image/logo.png" width="130" height="35">
-            </div>
-            <div class="footer-about-app">
-                <img src="../assets/image/footer/footer-app-0.png"/>
-                <img src="../assets/image/footer/footer-app-1.png"/>
+
+                <div class="about-me about-row">
+                    <div class="about-row-title">关于我们</div>
+                    <div class="about-row-item">关于我们</div>
+                    <div class="about-row-item">联系我们</div>
+                    <div class="about-row-item">条款与条件</div>
+                    <div class="about-row-item">隐私和Cookie</div>
+                </div>
+
+                <div class="about-issue about-row">
+                    <div class="about-row-title">常见问题</div>
+                    <div class="about-row-item">帮助中心</div>
+                    <div class="about-row-item">售后服务</div>
+                    <div class="about-row-item">关于退款</div>
+                    <div class="about-row-item">关于发货</div>
+                </div>
             </div>
 
-            <!--    备案-->
-            <div class="filing">
-                <div class="filing-body">xxx省xxx市xxx区666号xxx公司</div>
+            <div class="bottom-bar-about-right">
+                <div class="about-my-use about-row-title">
+                    我们使用
+                </div>
+                <div class="my-user-images">
+                    <img src="../assets/image/footer/footer-myuse-0.png"/>
+                    <img src="../assets/image/footer/footer-myuse-1.png"/>
+                    <img src="../assets/image/footer/footer-myuse-2.png"/>
+                    <img src="../assets/image/footer/footer-myuse-3.png"/>
+                    <img src="../assets/image/footer/footer-myuse-4.png"/>
+                    <img src="../assets/image/footer/footer-myuse-5.png"/>
+                    <img src="../assets/image/footer/footer-myuse-6.png"/>
+                    <img src="../assets/image/footer/footer-myuse-7.png"/>
+                    <img src="../assets/image/footer/footer-myuse-8.png"/>
+                    <img src="../assets/image/footer/footer-myuse-9.png"/>
+                    <img src="../assets/image/footer/footer-myuse-10.png"/>
+                    <img src="../assets/image/footer/footer-myuse-11.png"/>
+                    <img src="../assets/image/footer/footer-myuse-12.png"/>
+                    <img src="../assets/image/footer/footer-myuse-13.png"/>
+                    <img src="../assets/image/footer/footer-myuse-14.png"/>
+                    <img src="../assets/image/footer/footer-myuse-15.png"/>
+
+                </div>
             </div>
+        </div>
+        <div class="bottom-bar-active">
+            <img src="../assets/image/footer/footer-active-0.png"/>
+            <img src="../assets/image/footer/footer-active-1.png"/>
+            <img src="../assets/image/footer/footer-active-2.png"/>
+            <img src="../assets/image/footer/footer-active-3.png"/>
+            <img src="../assets/image/footer/footer-active-4.png"/>
+        </div>
+        <div class="footer-about-box">
+            <img src="../assets/image/logo.png" width="130" height="35">
+        </div>
+        <div class="footer-about-app">
+            <img src="../assets/image/footer/footer-app-0.png"/>
+            <img src="../assets/image/footer/footer-app-1.png"/>
+        </div>
 
+        <!--    备案-->
+        <div class="filing">
+            <div class="filing-body">xxx省xxx市xxx区666号xxx公司</div>
         </div>
+
+    </div>
 </body>
+<script src="../assets/js/Detail.js"></script>
+
+<script>
+    let skuData = JSON.parse("{{toJson .sku}}")
+    let skuHistoricalPrice = Number("{{.sku.price}}")
+    let skuPrice = Number("{{.sku.price}}")
+    init(skuHistoricalPrice, skuPrice)
+</script>
 </html>

util/templatefunc/BaseTemplateFunc.go

@@ -1,6 +1,8 @@
 package templatefunc
 
 import (
+	"encoding/json"
+	"fmt"
 	"html/template"
 	"strconv"
 )
@@ -25,6 +27,8 @@ func BaseTemplateFunc() template.FuncMap {
 		"minusInt":   minusInt,
 		"minusFloat": minusFloat,
 		"discalc":    DiscountCalculation,
+		"safeHTML":   SafeHTML,
+		"toJson":     ToJson,
 	}
 }
 
@@ -35,3 +39,15 @@ func DiscountCalculation(arg1, arg2 float64) string {
 	f := 1.0 - (arg2)/arg1
 	return strconv.FormatFloat(f*100, 'f', 0, 64)
 }
+func SafeHTML(s string) template.HTML {
+	return template.HTML(s)
+}
+func ToJson(arg any) string {
+	//将arg转换为json字符串
+	marshal, err := json.Marshal(arg)
+	if err != nil {
+		return ""
+	}
+	fmt.Println("ToJson:", string(marshal))
+	return string(marshal)
+}