kkc-shop
/
kkc-go


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详情</title>
    <link rel="stylesheet" href="/api/static//css/index.css">
    <link rel="stylesheet" href="/api/static/css/detail.css">
    <script src="/api/static/js/handler.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content="{{.goods.goodsName}} / {{.sku.skuName}}" />
</head>
<body>

{{template "NavigationBar.tmpl" .}}
<div class="detail">
    <!--    路由地址栏-->
    <RouterJumpBar v-model:nowRouterName="detailInfo.sku.skuName"/>

    <div class="goods-show">
        <div class="goods-show-info">
            <div class="goods-show-body">
                <div class="goods-show-img">
                    <!--            <img src="/api/static/goods-img.jpg" alt="" width="180" height="240"/>-->
                    <img src="{{.sku.skuImage}}" alt="" width="180" height="240"/>
                </div>
                <div class="goods-show-text">
                    <div class="goods-show-title">
                        {{ .goods.goodsName }}
                    </div>
                    <div class="goods-show-advantages">
                        {{range $tag := .tags}}
                        {{if $tag}}
                        <div class="goods-show-advantage goods-show-advantage-icon">
                            <img src="{{$tag.iconUrl}}">
                            {{else if eq $tag ""}}
                            <div class="goods-show-advantage goods-show-advantage-icon">
                                <img src="{{$tag.iconUrl}}">
                                {{else}}
                                <div class="goods-show-advantage goods-show-advantage-not-icon">
                                    {{end}}
                                    <div class="goods-show-tag">
                                        <div class="goods-show-name">
                                            {{ $tag.name }}
                                        </div>
                                        <div class="goods-show-desc">
                                            {{ $tag.tag }}
                                        </div>
                                    </div>
                                </div>
                                <!--                        </template>-->
                                {{end}}
                            </div>
                            <div class="goods-show-des">
                            </div>
                        </div>
                    </div>

                    <div class="goods-show-count">
                        <div class="goods-show-price-text">
                            <span>近30天销量：</span>
                            <span>{{ .goods.salesVolume }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="goods-info">
                <div class="info-left">
                    {{if .areas}}
                    <div class="info-left-select-btns">
                        {{$skuAreaId := .sku.commodityAreaId}}
                        {{range $area := .areas}}
                        {{if eq $skuAreaId $area.id}}
                        <div class="info-left-select-btn"
                             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"
                             areaId="{{$area.id}}"
                             onclick="GetAreaById({{$area.id}})">
                            <span>{{ $area.commodityAreaName }}</span>
                        </div>
                        {{end}}
                        {{end}}
                    </div>
                    {{end}}
                    <div class="info-left-select-param">
                        {{$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>
                        </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">
                        <div class="des-tags">
                            <div class="des-tag" :class="selectArticleType==0?'des-select-tag':''"
                                 @click="selectArticleType=0">
                                商品介绍
                            </div>
                            <!--            <div class="des-tag" :class="selectArticleType==1?'des-select-tag':''" @click="selectArticleType=1">-->
                            <!--              常见问题-->
                            <!--            </div>-->
                        </div>
                        <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>

                </div>
                <div class="info-right">
                    <div class="info-right-price-calc">
                        <div class="info-right-purchase-count">
                            <!--  购买数量 -->
                            <div class="irpc-font">购买数量</div>
                            <!--          数量按钮-->
                            <div class="irpc-count-button">
                                <div class="irpc-count-button-minus" onclick="purchaseQuantityMinus()">-</div>
                                <div class="irpc-count-button-input">
                                    <input id="irpc-input" value="1"/>
                                </div>
                                <div class="irpc-count-button-add" onclick="purchaseQuantityAdd()">+</div>
                            </div>
                        </div>
                        <div class="info-right-total-purchase-price">

                            <div class="price">
                                <div class="price-name" style="font-size: 20px;color: #333333">单价</div>
                                <div class="price-number">
                                    {{ if lt .sku.historicalPrices .sku.price}}
                                    <div class="price-original">
                                        {{ .sku.historicalPrices }}
                                    </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">
                                    {{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>
                            </div>
                            <div class="purchase-button">
                                <div class="purchase-button-btn" onclick="orderSubmit()">
                                    立即购买
                                </div>
                            </div>
                        </div>
<!--                        TODO 1-->
                        <div class="order-buy-curtain" id="order-buy-curtain" style="display: none">
                            <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" id="order-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" id="order-count">数量</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" id="order-historical-price">{{.sku.historicalPrices}}</div>
                                                        <div class="value-now" id="order-price">{{.sku.price}}</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">
                            {{range .recommendedGoods}}
                            <div class="info-recommend-item" onclick="RouterJumpId({{.id}})">
                                <div class="recommend-item-img">
                                    <img src="{{.skuImage}}" alt="图片"/>
                                </div>
                                <div class="recommend-item-name">
                                    {{ .skuName }} {{.id }}
                                </div>
                            </div>
                            {{end}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

{{template "BottomBar.tmpl" .}}
</body>
<script src="/api/static/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>