detail.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>{{if .sku.seoTitle}}{{.sku.seoTitle}}{{else}}{{.sku.skuName}} - 易租租{{end}}</title>
  6. <link rel="stylesheet" href="/api/static//css/index.css">
  7. <link rel="stylesheet" href="/api/static/css/detail.css">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9. <meta name="og:title" content="{{if .sku.seoKeywords}}{{.sku.seoTitle}}{{else}}{{.sku.skuName}} - 易租租{{end}}">
  10. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  11. <meta name="keywords" content="{{if .sku.seoKeywords}}{{.sku.seoKeywords}} - 易租租{{else}}{{.goods.goodsName}} - 易租租{{end}}">
  12. <meta name="og:keywords" content="{{if .sku.seoKeywords}}{{.sku.seoKeywords}} - 易租租{{else}}{{.goods.goodsName}} - 易租租{{end}}">
  13. <meta name="description" content="{{if .sku.seoDescription}}{{.sku.seoKeywords}}{{else}}{{.goods.goodsName}} / {{.sku.skuName}}{{end}}" />
  14. <meta name="og:description" content="{{if .sku.seoDescription}}{{.sku.seoKeywords}}{{else}}{{.goods.goodsName}} / {{.sku.skuName}}{{end}}" />
  15. </head>
  16. <body>
  17. {{template "NavigationBar.tmpl" .}}
  18. <div class="detail">
  19. <!-- 路由地址栏-->
  20. <!-- <RouterJumpBar v-model:nowRouterName="detailInfo.sku.skuName"/>-->
  21. <div class="router-jump-bar">
  22. <div class="router-bar">
  23. <ul class="router-bar-list" id="router-bar-list">
  24. </ul>
  25. </div>
  26. </div>
  27. <div class="goods-show">
  28. <div class="goods-show-info">
  29. <div class="goods-show-body">
  30. <div class="goods-show-img">
  31. <!-- <img src="/api/static/goods-img.jpg" alt="" width="180" height="240"/>-->
  32. <img src="{{.sku.skuImage}}" alt="" width="180" height="240"/>
  33. </div>
  34. <div class="goods-show-text">
  35. <div class="goods-show-title">
  36. {{ .goods.goodsName }}
  37. </div>
  38. <div class="goods-show-price-text">
  39. <span>近30天销量:</span>
  40. <span>0</span>
  41. </div>
  42. <div class="goods-show-advantages">
  43. {{range $tag := .tags}}
  44. {{if $tag}}
  45. <div class="goods-show-advantage goods-show-advantage-icon">
  46. {{if $tag.iconUrl}}
  47. <img src="{{$tag.iconUrl}}">
  48. {{end}}
  49. {{else if eq $tag ""}}
  50. <div class="goods-show-advantage goods-show-advantage-icon">
  51. <img src="{{$tag.iconUrl}}">
  52. {{else}}
  53. <div class="goods-show-advantage goods-show-advantage-not-icon">
  54. {{end}}
  55. <div class="goods-show-tag">
  56. <div class="goods-show-name">
  57. {{ $tag.name }}
  58. </div>
  59. <div class="goods-show-desc">
  60. {{ $tag.tag }}
  61. </div>
  62. </div>
  63. </div>
  64. <!-- </template>-->
  65. {{end}}
  66. </div>
  67. <div class="goods-show-des">
  68. </div>
  69. </div>
  70. </div>
  71. <div class="goods-show-count">
  72. <div class="goods-show-price-text">
  73. <span>近30天销量:</span>
  74. <span>{{ .goods.salesVolume }}</span>
  75. </div>
  76. </div>
  77. </div>
  78. </div>
  79. <div class="goods-info">
  80. <div class="info-left">
  81. {{if .areas}}
  82. <div class="info-left-select-btns">
  83. {{$skuAreaId := .sku.commodityAreaId}}
  84. {{range $area := .areas}}
  85. {{if eq $skuAreaId $area.id}}
  86. <div class="info-left-select-btn"
  87. areaId="{{$area.id}}"
  88. onclick="GetAreaById({{$area.id}})"
  89. style="background-color: rgb(199, 199, 199);">
  90. <span>{{ $area.commodityAreaName }}</span>
  91. </div>
  92. {{else}}
  93. <div class="info-left-select-btn"
  94. areaId="{{$area.id}}"
  95. onclick="GetAreaById({{$area.id}})">
  96. <span>{{ $area.commodityAreaName }}</span>
  97. </div>
  98. {{end}}
  99. {{end}}
  100. </div>
  101. {{end}}
  102. <div class="info-left-select-param">
  103. {{$goodsSku := .sku}}
  104. {{range $sku := .skus}}
  105. {{if eq $sku.commodityAreaId $goodsSku.commodityAreaId}}
  106. <div class="info-left-select-param-btn"
  107. onclick="RouterJumpId({{$sku.id}})" areaId="{{$sku.commodityAreaId}}">
  108. <div class="ilspb-selector">
  109. <svg data-v-1f073385="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"
  110. {{if ne $sku.id $goodsSku.id}}
  111. style="display: none"
  112. {{end}}>
  113. <path fill="currentColor"
  114. 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>
  115. </svg>
  116. </div>
  117. <span>{{ $sku.skuName }}</span>
  118. <div class="ilspb-tag">
  119. ¥{{ $sku.price }}
  120. </div>
  121. </div>
  122. {{else}}
  123. <div class="info-left-select-param-btn"
  124. onclick="RouterJumpId({{$sku.id}})"
  125. areaId="{{$sku.commodityAreaId}}" style="display: none">
  126. <div class="ilspb-selector">
  127. <svg data-v-1f073385="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"
  128. {{if ne $sku.id $goodsSku.id}}
  129. style="display: none"
  130. {{end}}
  131. >
  132. <path fill="currentColor"
  133. 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>
  134. </svg>
  135. </div>
  136. <span>{{ $sku.skuName }}</span>
  137. <div class="ilspb-tag">
  138. ¥{{ $sku.price }}
  139. </div>
  140. </div>
  141. {{end}}
  142. {{end}}
  143. </div>
  144. <div class="info-left-des">
  145. <div class="des-tags">
  146. <div class="des-tag" :class="selectArticleType==0?'des-select-tag':''"
  147. @click="selectArticleType=0">
  148. 商品介绍
  149. </div>
  150. <!-- <div class="des-tag" :class="selectArticleType==1?'des-select-tag':''" @click="selectArticleType=1">-->
  151. <!-- 常见问题-->
  152. <!-- </div>-->
  153. </div>
  154. <div class="info-introduction">
  155. {{range $index, $introduction := .introductions}}
  156. {{if eq $index 0}}
  157. {{ $introduction.goodsArticle | safeHTML}}
  158. {{end}}
  159. {{end}}
  160. </div>
  161. <div class="info-question" v-show="selectArticleType==1"></div>
  162. </div>
  163. </div>
  164. <div class="info-right">
  165. <div class="info-right-price-calc">
  166. <div class="info-right-purchase-count">
  167. <!-- 购买数量 -->
  168. <div class="irpc-font">购买数量</div>
  169. <!-- 数量按钮-->
  170. <div class="irpc-count-button">
  171. <div class="irpc-count-button-minus" onclick="purchaseQuantityMinus()">-</div>
  172. <div class="irpc-count-button-input">
  173. <input id="irpc-input" value="1"/>
  174. </div>
  175. <div class="irpc-count-button-add" onclick="purchaseQuantityAdd()">+</div>
  176. </div>
  177. </div>
  178. <div class="info-right-total-purchase-price">
  179. <div class="price">
  180. <div class="price-name" style="font-size: 20px;color: #333333">单价</div>
  181. <div class="price-number">
  182. {{ if lt .sku.historicalPrices .sku.price}}
  183. <div class="price-original">
  184. {{ .sku.historicalPrices }}
  185. </div>
  186. {{end}}
  187. <div class="price-value" style="font-size: 20px">{{ .sku.price }}</div>
  188. </div>
  189. </div>
  190. <div class="price">
  191. <div class="price-name">总价</div>
  192. <div class="price-number">
  193. {{if lt .sku.historicalPrices .sku.price}}
  194. <div class="price-original" id="price-calc-historical-price">
  195. 0
  196. </div>
  197. {{end}}
  198. <div class="price-value" id="price-calc-price">
  199. 0
  200. </div>
  201. </div>
  202. </div>
  203. <div class="purchase-button">
  204. <div class="purchase-button-btn" onclick="orderSubmit()">
  205. 立即购买
  206. </div>
  207. </div>
  208. </div>
  209. <div class="info-left-des mobile-show">
  210. <div class="des-tags">
  211. <div class="des-tag" :class="selectArticleType==0?'des-select-tag':''"
  212. @click="selectArticleType=0">
  213. 商品介绍
  214. </div>
  215. <!-- <div class="des-tag" :class="selectArticleType==1?'des-select-tag':''" @click="selectArticleType=1">-->
  216. <!-- 常见问题-->
  217. <!-- </div>-->
  218. </div>
  219. <div class="info-introduction">
  220. {{range $index, $introduction := .introductions}}
  221. {{if eq $index 0}}
  222. {{ $introduction.goodsArticle | safeHTML}}
  223. {{end}}
  224. {{end}}
  225. </div>
  226. <div class="info-question" v-show="selectArticleType==1"></div>
  227. </div>
  228. <!-- TODO 1-->
  229. <div class="order-buy-curtain" id="order-buy-curtain" style="display: none" ><!---->
  230. <div class="order-buy-body">
  231. <div class="order-buy-title">订单详情</div>
  232. <div class="order-buy-close" onclick="closeView()">
  233. <span style="font-size: 20px; cursor: pointer;">&times;</span>
  234. </div>
  235. <div class="order-body">
  236. <div class="order-buy-pay">
  237. <div class="order-buy-pay-list">
  238. <div class="order-buy-pay-item" onclick="selectPayMethod(0)" id="pay-wx">
  239. <div class="order-buy-pay-wx">
  240. <div class="order-buy-pay-name">微信</div>
  241. <div class="order-buy-pay-tip">+20%手续费</div>
  242. </div>
  243. </div>
  244. <div class="order-buy-pay-item" onclick="selectPayMethod(1)" id="pay-zfb">
  245. <div class="order-buy-pay-zfb">
  246. <div class="order-buy-pay-name">支付宝</div>
  247. <div class="order-buy-pay-tip">随机立减最高16.8元</div>
  248. </div>
  249. </div>
  250. <div class="order-buy-pay-item" onclick="selectPayMethod(2)" id="pay-test">
  251. <div class="order-buy-pay-py">
  252. <div class="order-buy-pay-name">Test 支付</div>
  253. <div class="order-buy-pay-tip">免费,测试专用</div>
  254. </div>
  255. </div>
  256. </div>
  257. <div class="order-buy-pay-select" id="pay-select"></div>
  258. <div class="order-buy-pay-body">
  259. <div class="pay-body-qrcode">
  260. <div id="test-purchase" style="display: none;" onclick="orderTest()">
  261. 假装购买
  262. </div>
  263. </div>
  264. <div class="pay-body-info">
  265. <div class="pay-body-info-title">应付金额</div>
  266. <div class="pay-body-info-amount" id="order-amount">{{.NowSku.Price}} * {{.Count}}</div>
  267. </div>
  268. <div class="pay-body-tip">
  269. <span>购买即同意</span>
  270. <span class="pay-body-tip-line">《购买协议》</span>
  271. </div>
  272. </div>
  273. </div>
  274. <div class="order-buy-info">
  275. <div class="order-buy-info-body">
  276. <div class="order-buy-info-title">订单信息</div>
  277. <div class="order-buy-info-data">
  278. <div class="order-image">
  279. <img src="{{.sku.skuImage}}" alt="图片"/>
  280. </div>
  281. <div class="order-name">{{.goods.goodsName}}</div>
  282. </div>
  283. <div class="order-data">
  284. <div class="order-data-item">
  285. <div class="order-data-item-name">类型</div>
  286. <div class="order-data-item-value">{{.sku.skuName}}</div>
  287. </div>
  288. <div class="order-data-item">
  289. <div class="order-data-item-name" >数量</div>
  290. <div class="order-data-item-value" id="order-count">{{.Count}}!!</div>
  291. </div>
  292. <div class="order-data-item">
  293. <div class="order-data-item-name">单价</div>
  294. <div class="order-data-item-value">
  295. <div class="value-delete-line">{{.sku.historicalPrices}}</div>
  296. <div class="value-now">{{.sku.price}}</div>
  297. </div>
  298. </div>
  299. <div class="order-data-item">
  300. <div class="order-data-item-name">总计</div>
  301. <div class="order-data-item-value">
  302. <div class="value-delete-line" id="order-historical-price">{{.sku.historicalPrices}}</div>
  303. <div class="value-now" id="order-price">{{.sku.price}}</div>
  304. </div>
  305. </div>
  306. </div>
  307. </div>
  308. </div>
  309. </div>
  310. </div>
  311. </div>
  312. </div>
  313. <div class="info-recommend">
  314. <div class="info-recommend-title">
  315. 相关推荐
  316. </div>
  317. <div class="info-recommend-items">
  318. {{range .recommendedGoods}}
  319. <div class="info-recommend-item" onclick="RouterJumpId({{.id}})">
  320. <div class="recommend-item-img">
  321. <img src="{{.skuImage}}" alt="图片"/>
  322. </div>
  323. <div class="recommend-item-name">
  324. {{ .skuName }}nihao 这个是正文
  325. </div>
  326. </div>
  327. {{end}}
  328. </div>
  329. </div>
  330. </div>
  331. </div>
  332. </div>
  333. </div>
  334. </div>
  335. {{template "BottomBar.tmpl" .}}
  336. </body>
  337. <script src="/api/static/js/Detail.js"></script>
  338. <script>
  339. let skuData = JSON.parse("{{toJson .sku}}")
  340. let skuHistoricalPrice = Number("{{.sku.price}}")
  341. let skuPrice = Number("{{.sku.price}}")
  342. init(skuHistoricalPrice, skuPrice)
  343. </script>
  344. </html>