fix style for order create and update, fix order create error

Signed-off-by: Puqns67 <me@puqns67.icu>

src/main/kotlin/team8/fruitable/controller/action/OrderAction.kt

@@ -1,10 +1,7 @@
 package team8.fruitable.controller.action
 
 import org.springframework.stereotype.Controller
-import org.springframework.web.bind.annotation.CookieValue
+import org.springframework.web.bind.annotation.*
-import org.springframework.web.bind.annotation.PathVariable
-import org.springframework.web.bind.annotation.RequestMapping
-import org.springframework.web.bind.annotation.RequestParam
 import org.springframework.web.servlet.mvc.support.RedirectAttributes
 import team8.fruitable.controller.util.error
 import team8.fruitable.datebase.entity.Item
@@ -25,37 +22,6 @@ class OrderAction(
         return token?.let(accountRepository::findByToken)
     }
 
-    @RequestMapping("/create/{item_id}/{item_number}")
-    fun create(
-        attributes: RedirectAttributes,
-        @CookieValue("TOKEN", required = false) token: String?,
-        @PathVariable("item_id") itemId: Long,
-        @PathVariable("item_number") itemNumber: Int,
-        @RequestParam("name") name: String,
-        @RequestParam("phone") phone: String,
-        @RequestParam("address") address: String,
-        @RequestParam("pay_type") payTypeId: Long,
-        @RequestParam("redirect", required = false) redirect: String?
-    ): String {
-        val user = this.getCurrentUser(token) ?: return error(attributes, "创建订单", "账户未登录", "/login")
-        val item = itemRepository.findById(itemId).orElse(null) ?: return error(attributes, "创建订单", "商品不存在")
-        val payType =
-            payTypeRepository.findById(payTypeId).orElse(null) ?: return error(attributes, "创建订单", "未知的支付类型")
-        val itemPrice = item.price?.times(itemNumber) ?: return error(
-            attributes, "创建订单", "错误的商品价格（可能是商品未添加对应的价格）"
-        )
-        var order = Order(user, name, phone, address, payType, itemPrice, mutableListOf(item))
-        order = orderRepository.save(order)
-
-        // 更新 orders_to_items 表中的个数信息
-        val orderedItem = orderedItemRepository.findByOrder(order)[0]
-        orderedItem.number = itemNumber
-        orderedItemRepository.save(orderedItem)
-
-        redirect?.let { return "redirect:/${it}" }
-        return "redirect:/order/${order.id}"
-    }
-
     @RequestMapping("/create")
     fun createForCart(
         attributes: RedirectAttributes,
@@ -70,27 +36,34 @@ class OrderAction(
     ): String {
         val user = this.getCurrentUser(token) ?: return error(attributes, "创建订单", "账户未登录", "/login")
         val itemPairs = itemIds zip itemNumbers
-        val items: MutableList<Item> = mutableListOf()
+        val items: MutableList<Pair<Item, Int>> = mutableListOf()
         var priceSum = .0
         itemPairs.forEach {
-            items.plus(
+            val item =
                 itemRepository.findById(it.first).orElse(null) ?: return error(attributes, "创建订单", "商品不存在")
-            )
+            items.add(item to it.second)
         }
         items.forEach { item ->
-            item.price?.let {
+            item.first.price?.let {
-                priceSum += it
+                priceSum += it * item.second
-            } ?: return error(attributes, "创建订单", "错误的商品价格（可能是商品未添加对应的价格）")
+            } ?: return error(attributes, "创建订单", "[内部错误] 错误的商品价格（可能是商品未添加对应的价格）")
         }
         val payType =
             payTypeRepository.findById(payTypeId).orElse(null) ?: return error(attributes, "创建订单", "未知的支付类型")
-        val order = Order(user, name, phone, address, payType, priceSum, items)
+        var order = Order(user, name, phone, address, payType, priceSum, items.map { it.first } as MutableList<Item>)
-        orderRepository.save(order)
+        order = orderRepository.save(order)
+
+        val orderedItems = orderedItemRepository.findByOrder(order)
+        (orderedItems zip items).forEach {
+            it.first.number = it.second.second
+            orderedItemRepository.save(it.first)
+        }
+
         redirect?.let { return "redirect:/${it}" }
         return "redirect:/order/${order.id}"
     }
 
-    @RequestMapping("/update/{id}")
+    @PostMapping("/update/{id}")
     fun update(
         attributes: RedirectAttributes,
         @CookieValue("TOKEN", required = false) token: String?,

src/main/kotlin/team8/fruitable/controller/page/OrderPage.kt

@@ -9,16 +9,17 @@ import org.springframework.web.bind.annotation.RequestMapping
 import org.springframework.web.bind.annotation.RequestParam
 import org.springframework.web.servlet.mvc.support.RedirectAttributes
 import team8.fruitable.controller.util.error
+import team8.fruitable.datebase.entity.Item
 import team8.fruitable.datebase.entity.User
-import team8.fruitable.datebase.repository.AccountRepository
+import team8.fruitable.datebase.repository.*
-import team8.fruitable.datebase.repository.ItemRepository
-import team8.fruitable.datebase.repository.OrderRepository
 
 @Controller
 class OrderPage(
     private val orderRepository: OrderRepository,
+    private val orderedItemRepository: OrderedItemRepository,
     private val accountRepository: AccountRepository,
-    private val itemRepository: ItemRepository
+    private val itemRepository: ItemRepository,
+    private val payTypeRepository: PayTypeRepository
 ) {
     private fun getCurrentUser(token: String?): User? {
         return token?.let(accountRepository::findByToken)
@@ -26,7 +27,8 @@ class OrderPage(
 
     @RequestMapping("/orders")
     fun orders(
-        model: Model, attributes: RedirectAttributes, @CookieValue("TOKEN", required = false) token: String?
+        model: Model, attributes: RedirectAttributes,
+        @CookieValue("TOKEN", required = false) token: String?
     ): String {
         model["isOrder"] = true
         val user = this.getCurrentUser(token) ?: return error(attributes, "查看订单列表", "账户未登录", "/login")
@@ -39,7 +41,8 @@ class OrderPage(
         model: Model,
         attributes: RedirectAttributes,
         @CookieValue("TOKEN", required = false) token: String?,
-        @RequestParam("id") id: Array<Long>
+        @RequestParam("items") itemIds: Array<Long>,
+        @RequestParam("numbers") itemNumbers: Array<Long>
     ): String {
         val user = this.getCurrentUser(token) ?: return error(attributes, "更新", "账户未登录", "/login")
         model["user"] = user
@@ -56,8 +59,29 @@ class OrderPage(
     ): String {
         val user = this.getCurrentUser(token) ?: return error(attributes, "查看订单", "账户未登录", "/login")
         val item = itemRepository.findById(id).orElse(null) ?: return error(attributes, "查看订单", "商品不存在")
+        model["payTypes"] = payTypeRepository.findAll()
         model["items"] = arrayOf(Triple(item, number ?: 1, item.price!! * (number ?: 1)))
         model["user"] = user
         return "order/create"
     }
+
+    @RequestMapping("/order/{id}")
+    fun order(
+        model: Model,
+        attributes: RedirectAttributes,
+        @CookieValue("TOKEN", required = false) token: String?,
+        @PathVariable("id") id: Long
+    ): String {
+        val user = this.getCurrentUser(token) ?: return error(attributes, "查看订单", "账户未登录", "/login")
+        val order = orderRepository.findById(id).orElse(null) ?: return error(attributes, "查看订单", "订单不存在")
+        val orderedItems = orderedItemRepository.findByOrder(order)
+        val items: MutableList<Triple<Item, Int, Double>> = mutableListOf()
+        orderedItems.forEach {
+            items.add(Triple(it.item!!, it.number, it.item!!.price!! * it.number))
+        }
+        model["order"] = order
+        model["items"] = items
+        model["user"] = user
+        return "order/update"
+    }
 }

src/main/kotlin/team8/fruitable/datebase/entity/OrderedItem.kt

@@ -18,6 +18,6 @@ class OrderedItem(
     @JoinColumn(name = "item_id", nullable = false)
     var item: Item? = null,
 
-    @Column(name = "number")
+    @Column(name = "number", nullable = false)
-    var number: Int? = 0
+    var number: Int = 0
 )

src/main/kotlin/team8/fruitable/datebase/entity/PayType.kt

@@ -7,9 +7,19 @@ import jakarta.persistence.*
 class PayType(
     @Id
     @GeneratedValue(strategy = GenerationType.IDENTITY)
-    @Column(name = "ID", nullable = false)
+    @Column(name = "id", nullable = false)
     var id: Long? = null,
 
-    @Column(name = "NAME", length = 16, nullable = false)
+    @Column(name = "name", length = 16, nullable = false)
     var name: String? = null,
-)
+
+    @Column(name = "picture", length = 16, nullable = false)
+    var picture: String? = null,
+
+    @Column(name = "is_default", nullable = false)
+    var isDefault: Boolean = false,
+) {
+    fun getPictureLink(): String {
+        return "/images/pay_type/${picture ?: "Card"}.svg"
+    }
+}

src/main/kotlin/team8/fruitable/datebase/entity/User.kt

@@ -83,6 +83,7 @@ class User(
         if (!email.isNullOrBlank()) this.email = email
         if (!address.isNullOrBlank()) this.address = address
         isAdmin?.let { this.isAdmin = it }
+        this.updateToken()
     }
 
     private final fun genPassword(password: String): String {

src/main/resources/static/images/pay_type/Card.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 1024 1024" class="icon"  version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M196.6 311.6h660v129.2l15.8 76.1-15.8 63.7v184.5h-660z" fill="#2F2F33" /><path d="M860.7 444.5h-51.2v128.3h51.2v210.7c0 15.2-12.1 27.5-27.1 27.5h-637c-15 0-27.1-12.3-27.1-27.5V307c0-15.2 12.1-27.5 27.1-27.5h637c15 0 27.1 12.3 27.1 27.5v137.5z m-637-110V756h585.8V334.5H223.7z" fill="#2F2F33" /><path d="M794.3 304.3l-49.1 13.3-30.6-116.1-430.9 131.2-17.1-49.3 457.2-137.1c14.4-4.3 29.4 4 33.7 18.6 0.1 0.2 0.1 0.5 0.2 0.7l36.6 138.7zM887.8 389.467c15 0 27.1 12.3 27.1 27.5v183.2c0 15.2-12.1 27.5-27.1 27.5H707.1c-64.9 0-117.5-53.3-117.5-119.1s52.6-119.1 117.5-119.1h180.7z m-40.7 55h-140c-34.9 0-63.2 28.7-63.2 64.1s28.3 64.1 63.2 64.1h140c7.5 0 13.6-6.2 13.6-13.7v-100.8c0-7.6-6.1-13.7-13.6-13.7z" fill="#2F2F33" /><path d="M860.7 444.5h-51.2v128.3h51.2v210.7c0 15.2-12.1 27.5-27.1 27.5h-637c-15 0-27.1-12.3-27.1-27.5V307c0-15.2 12.1-27.5 27.1-27.5h637c15 0 27.1 12.3 27.1 27.5v137.5z m-637-110V756h585.8V334.5H223.7z" fill="#2F2F33" /><path d="M794.3 304.3l-49.1 13.3-30.6-116.1-430.9 131.2-17.1-49.3 457.2-137.1c14.4-4.3 29.4 4 33.7 18.6 0.1 0.2 0.1 0.5 0.2 0.7l36.6 138.7zM887.8 389.467c15 0 27.1 12.3 27.1 27.5v183.2c0 15.2-12.1 27.5-27.1 27.5H707.1c-64.9 0-117.5-53.3-117.5-119.1s52.6-119.1 117.5-119.1h180.7z m-40.7 55h-140c-34.9 0-63.2 28.7-63.2 64.1s28.3 64.1 63.2 64.1h140c7.5 0 13.6-6.2 13.6-13.7v-100.8c0-7.6-6.1-13.7-13.6-13.7z" fill="#2F2F33" /><path d="M860.7 444.5h-51.2v128.3h51.2v210.7c0 15.2-12.1 27.5-27.1 27.5h-637c-15 0-27.1-12.3-27.1-27.5V307c0-15.2 12.1-27.5 27.1-27.5h637c15 0 27.1 12.3 27.1 27.5v137.5z m-637-110V756h585.8V334.5H223.7z" fill="#2F2F33" /><path d="M794.3 304.3l-49.1 13.3-30.6-116.1-430.9 131.2-17.1-49.3 457.2-137.1c14.4-4.3 29.4 4 33.7 18.6 0.1 0.2 0.1 0.5 0.2 0.7l36.6 138.7zM887.8 389.467c15 0 27.1 12.3 27.1 27.5v183.2c0 15.2-12.1 27.5-27.1 27.5H707.1c-64.9 0-117.5-53.3-117.5-119.1s52.6-119.1 117.5-119.1h180.7z m-40.7 55h-140c-34.9 0-63.2 28.7-63.2 64.1s28.3 64.1 63.2 64.1h140c7.5 0 13.6-6.2 13.6-13.7v-100.8c0-7.6-6.1-13.7-13.6-13.7z" fill="#2F2F33" /><path d="M457.5 280.3l255.2-79.5 24.2 86.8z" fill="#2F2F33" /><path d="M196.6 311.6h660v129.2l15.8 76.1-15.8 63.7v184.5h-660z" fill="#FFFFFF" /><path d="M860.7 444.5h-51.2v128.3h51.2v210.7c0 15.2-12.1 27.5-27.1 27.5h-637c-15 0-27.1-12.3-27.1-27.5V307c0-15.2 12.1-27.5 27.1-27.5h637c15 0 27.1 12.3 27.1 27.5v137.5z m-637-110V756h585.8V334.5H223.7z" fill="#2F2F33" /><path d="M794.3 304.3l-49.1 13.3-30.6-116.1-430.9 131.2-17.1-49.3 457.2-137.1c14.4-4.3 29.4 4 33.7 18.6 0.1 0.2 0.1 0.5 0.2 0.7l36.6 138.7zM887.8 389.467c15 0 27.1 12.3 27.1 27.5v183.2c0 15.2-12.1 27.5-27.1 27.5H707.1c-64.9 0-117.5-53.3-117.5-119.1s52.6-119.1 117.5-119.1h180.7z m-40.7 55h-140c-34.9 0-63.2 28.7-63.2 64.1s28.3 64.1 63.2 64.1h140c7.5 0 13.6-6.2 13.6-13.7v-100.8c0-7.6-6.1-13.7-13.6-13.7z" fill="#2F2F33" /><path d="M860.7 444.5h-51.2v128.3h51.2v210.7c0 15.2-12.1 27.5-27.1 27.5h-637c-15 0-27.1-12.3-27.1-27.5V307c0-15.2 12.1-27.5 27.1-27.5h637c15 0 27.1 12.3 27.1 27.5v137.5z m-637-110V756h585.8V334.5H223.7z" fill="#2F2F33" /><path d="M794.3 304.3l-49.1 13.3-30.6-116.1-430.9 131.2-17.1-49.3 457.2-137.1c14.4-4.3 29.4 4 33.7 18.6 0.1 0.2 0.1 0.5 0.2 0.7l36.6 138.7zM887.8 389.467c15 0 27.1 12.3 27.1 27.5v183.2c0 15.2-12.1 27.5-27.1 27.5H707.1c-64.9 0-117.5-53.3-117.5-119.1s52.6-119.1 117.5-119.1h180.7z m-40.7 55h-140c-34.9 0-63.2 28.7-63.2 64.1s28.3 64.1 63.2 64.1h140c7.5 0 13.6-6.2 13.6-13.7v-100.8c0-7.6-6.1-13.7-13.6-13.7z" fill="#2F2F33" /><path d="M457.5 280.3l255.2-79.5 24.2 86.8z" fill="#8CAAFF" /><path d="M847.4 445h-140c-34.9 0-63.2 28.7-63.2 64.1s28.3 64.1 63.2 64.1h140c7.5 0 13.6-6.2 13.6-13.7V458.7c-0.1-7.6-6.1-13.7-13.6-13.7z" fill="#FFFFFF" /><path d="M686.4 506.5a27.1 27.5 0 1 0 54.2 0 27.1 27.5 0 1 0-54.2 0Z" fill="#2F2F33" /></svg>

src/main/resources/static/styles/form.less

@@ -22,6 +22,28 @@
 
             > .ItemName {
                 flex: 1 0 0;
+
+                &[radioed] {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+
+                    > .ItemInput {
+                        display: none;
+                    }
+
+                    > .ItemPicture {
+                        width: 50px;
+                        height: 50px;
+                        padding: 10px 5px;
+                        border-radius: 15px;
+                        background: white;
+                    }
+
+                    > .ItemInput:checked + .ItemPicture {
+                        background: wheat;
+                    }
+                }
             }
 
             > .ItemInput {
@@ -30,6 +52,12 @@
                 border-radius: 10px;
                 border: 3px solid skyblue;
             }
+
+            > .ItemInput[disabled] {
+                background: unset;
+                border: unset;
+                color: black;
+            }
         }
     }
 

src/main/resources/static/styles/order.less

@@ -0,0 +1,36 @@
+.Item {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    border-radius: 15px;
+    background-color: teal;
+
+
+    > .Picture {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        > img {
+            border-radius: 15px;
+            width: 100px;
+            height: 100px;
+        }
+    }
+
+    > .Infos {
+        display: flex;
+        flex-direction: column;
+        padding: 5px 10px;
+        color: wheat;
+
+        > .Info {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+
+            > .Title {
+
+            }
+        }
+    }
+}

src/main/resources/templates/order/create.mustache

@@ -49,40 +49,32 @@
                        {{#user.address}}value="{{user.address}}"{{/user.address}} required/>
             </div>
 
-            <div class="TabFormItem">
+            <div class="TabFormItem PayType">
-                <input class="ItemInput" id="pay_type_card" type="radio" name="pay_type" value="1" checked/>
+                {{#payTypes}}
-                <label class="ItemName" for="pay_type_card">银行卡</label>
+                    <label class="ItemName" radioed>
-                <input class="ItemInput" id="pay_type_wechat_pay" type="radio" name="pay_type" value="2"/>
+                        <input class="ItemInput" type="radio" name="pay_type" value="{{id}}" {{#isDefault}}checked{{/isDefault}}/>
-                <label class="ItemName" for="pay_type_wechat_pay">微信支付</label>
+                        <img class="ItemPicture" alt="{{name}}" src="{{pictureLink}}"/>
-                <input class="ItemInput" id="pay_type_alipay" type="radio" name="pay_type" value="3"/>
+                    </label>
-                <label class="ItemName" for="pay_type_alipay">支付宝</label>
+                {{/payTypes}}
-                <input class="ItemInput" id="pay_type_union_pay" type="radio" name="pay_type" value="4"/>
-                <label class="ItemName" for="pay_type_union_pay">云闪付</label>
-                <input class="ItemInput" id="pay_type_paypal" type="radio" name="pay_type" value="5"/>
-                <label class="ItemName" for="pay_type_paypal">PayPal</label>
-                <input class="ItemInput" id="pay_type_google_pay" type="radio" name="pay_type" value="6"/>
-                <label class="ItemName" for="pay_type_google_pay">Google Pay</label>
-                <input class="ItemInput" id="pay_type_apple_pay" type="radio" name="pay_type" value="7"/>
-                <label class="ItemName" for="pay_type_apple_pay">Apple Pay</label>
             </div>
         </div>
 
         <div class="TabFormItems Items">
             {{#items}}
-                <div class="TabFormItem Item" id="0">
+                <div class="TabFormItem Item" itemid="{{first.id}}">
                     <input type="hidden" name="items" value="{{first.id}}"/>
                     <input type="hidden" name="numbers" value="{{second}}"/>
                     <div class="Picture">
                         <img alt="商品图片" src="{{first.pictureLink}}">
                     </div>
-                    <div class="infos">
+                    <div class="Infos">
                         <div class="Info">
-                            <span class="Title">{{first.name}}</span>
+                            <div class="Title">{{first.name}}</div>
-                            <span class="Prices">
+                            <div class="Prices">
-                                <span class="Price">￥${{first.price}}</span>
+                                <span class="Price">{{first.price}}￥</span>
                                 <span class="Number">x{{second}}</span>
-                                <span class="PriceSum">￥${{third}}</span>
+                                <span class="PriceSum">= {{third}}￥</span>
-                            </span>
+                            </div>
                         </div>
                         <span class="Description">{{first.description}}</span>
                     </div>

src/main/resources/templates/order/update.mustache

@@ -12,6 +12,7 @@
     <link type="text/css" rel="stylesheet" href="/styles/clock.css">
     <link type="text/css" rel="stylesheet" href="/styles/top.css">
     <link type="text/css" rel="stylesheet/less" href="/styles/form.less">
+    <link type="text/css" rel="stylesheet/less" href="/styles/base.less">
     <!-- 页面特定的样式表 -->
     <link type="text/css" rel="stylesheet/less" href="/styles/order.less">
     <!-- 外部小组件 -->
@@ -29,47 +30,76 @@
     <form class="TabForm" action="/action/order/update/{{order.id}}" method="post">
         <div class="TabTitle">订单</div>
 
+        <div class="TabFormItems Status">
+            <div class="TabFormItem PriceSum">
+                <label class="ItemName" for="price_sum">订单金额</label>
+                <input class="ItemInput" id="price_sum" type="text" name="price_sum" disabled
+                       value="{{order.priceSum}}"/>
+            </div>
+
+            <div class="TabFormItem PayType">
+                <label class="ItemName" for="pay_type">支付类型</label>
+                <input class="ItemInput" id="pay_type" type="text" name="pay_type" disabled
+                       value="{{order.payType.name}}"/>
+            </div>
+
+            <div class="TabFormItem Paid">
+                <label class="ItemName" for="pay_status">支付状态</label>
+                <input class="ItemInput" id="pay_status" type="text" name="pay_status" disabled
+                       value="{{#order.isPaid}}已支付{{/order.isPaid}}{{^order.isPaid}}未支付{{/order.isPaid}}"/>
+            </div>
+        </div>
+
         <div class="TabFormItems Infos">
             <div class="TabFormItem">
                 <label class="ItemName" for="name">姓名</label>
                 <input class="ItemInput" id="name" type="text" name="name" placeholder="请输入收货人姓名"
-                       {{#order.name}}value="{{order.name}}"{{/order.name}} required/>
+                       value="{{order.name}}" required/>
+            </div>
+
+            <div class="TabFormItem">
+                <label class="ItemName" for="phone">手机号码</label>
+                <input class="ItemInput" id="phone" type="tel" name="phone" placeholder="请输入收货人手机号码"
+                       value="{{order.phone}}" required/>
             </div>
 
             <div class="TabFormItem">
                 <label class="ItemName" for="address">地址</label>
                 <input class="ItemInput" id="address" type="text" name="address" placeholder="请输入收货人地址"
-                       {{#order.address}}value="{{order.address}}"{{/order.address}} required/>
+                       value="{{order.address}}" required/>
             </div>
         </div>
 
-        <div class="TabButtons">
+        {{^order.isRevoked}}
-            <button class="TabButton" type="button"
+            <div class="TabButtons">
-                    onclick="window.location.replace('/action/order/revoke/{{order.id}}')">撤销订单
+                <button class="TabButton" type="button"
-            </button>
+                        onclick="window.location.replace('/action/order/revoke/{{order.id}}')">撤销订单
-            <button class="TabButton" type="button"
+                </button>
-                    onclick="window.location.replace('/action/order/paid/{{order.id}}')">已支付订单
+                {{^order.isPaid}}
-            </button>
+                    <button class="TabButton" type="button"
-            <button class="TabButton" type="submit">更新订单信息</button>
+                            onclick="window.location.replace('/action/order/paid/{{order.id}}')">已支付订单
-        </div>
+                    </button>
+                {{/order.isPaid}}
+                <button class="TabButton" type="submit">更新订单信息</button>
+            </div>
+        {{/order.isRevoked}}
 
         <div class="TabFormItems Items">
             {{#items}}
-                <div class="Item" id="0">
+                <div class="TabFormItem Item" itemid="{{first.id}}">
                     <div class="Picture">
-                        <img alt="商品图片" src="{{a.pictureLink}}">
+                        <img alt="商品图片" src="{{first.pictureLink}}">
                     </div>
-
+                    <div class="Infos">
-                    <div class="infos">
                         <div class="Info">
-                            <span class="Title">{{a.name}}</span>
+                            <div class="Title">{{first.name}}</div>
-                            <span class="Prices">
+                            <div class="Prices">
-                                <span class="Price">￥${{a.price}}</span>
+                                <span class="Price">{{first.price}}￥</span>
-                                <span class="Number">x{{b}}</span>
+                                <span class="Number">x{{second}}</span>
-                                <span class="PriceSum">￥${{c}}</span>
+                                <span class="PriceSum">= {{third}}￥</span>
-                            </span>
+                            </div>
                         </div>
-                        <span class="Description">{{a.description}}</span>
+                        <span class="Description">{{first.description}}</span>
                     </div>
                 </div>
             {{/items}}