HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>完善购物车</title>
  8.     <script src="https://unpkg.com/vue@next"></script>
  9.     <style>
  10.       table {
  11.         width: 35em;
  12.         text-align: center;
  13.         border-collapse: collapse;
  14.       }
  16.       table caption {
  17.         font-size: 1.5em;
  18.         margin-bottom: 0.6em;
  19.       }
  21.       thead {
  22.         background-color: lightcyan;
  23.       }
  25.       th,
  26.       td {
  27.         border: 1px solid #000;
  28.         height: 2em;
  29.       }
  30.     </style>
  31.   </head>
  32.   <body>
  33.     <div class="app">
  34.       <table>
  35.         <caption>购物车</caption>
  36.         <thead>
  37.           <tr>
  38.             <th>选择</th>
  39.             <th>ID</th>
  40.             <th>品名</th>
  41.             <th>单价</th>
  42.             <th>数量</th>
  43.             <th>金额</th>
  44.             <th>优惠金额</th>
  45.             <th>实付金额</th>
  46.           </tr>
  47.         </thead>
  48.         <tbody>
  49.           <tr>
  50.             <td><input type="checkbox" checked /></td>
  51.             <td>1</td>
  52.             <td>牛奶</td>
  53.             <td>{{price}}</td>
  54.             <td><input type="number" v-model="num" /></td>
  55.             <td>{{payAmount}}</td>
  56.             <td>{{diffAmount}}</td>
  57.             <td>{{disAmount}}</td>
  58.           </tr>
  59.           <tr>
  60.             <td><input type="checkbox" checked /></td>
  61.             <td>2</td>
  62.             <td>可乐</td>
  63.             <td>{{prices}}</td>
  64.             <td><input type="number" v-model="nums" /></td>
  65.             <td>{{payAmounts}}</td>
  66.             <td>{{diffAmounts}}</td>
  67.             <td>{{disAmounts}}</td>
  68.           </tr>
  69.           <tr>
  70.             <td><input type="checkbox" checked /></td>
  71.             <td>3</td>
  72.             <td>雪碧</td>
  73.             <td>{{pricer}}</td>
  74.             <td><input type="number" v-model="numr" /></td>
  75.             <td>{{payAmountr}}</td>
  76.             <td>{{diffAmountr}}</td>
  77.             <td>{{disAmountr}}</td>
  78.           </tr>
  79.           <tr>
  80.             <td colspan="4">总计：</td>
  81.             <td>{{numberAll}}</td>
  82.             <td>{{payAmountAll}}</td>
  83.             <td>{{diffAmountAll}}</td>
  84.             <td>{{disAmountAll}}</td>
  85.           </tr>
  86.         </tbody>
  87.       </table>
  89.       <script>
  90.         const app = Vue.createApp({
  91.           data() {
  92.             return {
  93.               price: 50,
  94.               num: 5,
  95.               prices: 80,
  96.               nums: 8,
  97.               pricer: 80,
  98.               numr: 5,
  99.               disAmount: 50,
  100.               disAmounts: 80,
  101.               disAmountr: 80,
  102.               diffAmount: 0,
  103.               diffAmounts: 0,
  104.               diffAmountr: 0,
  105.             };
  106.           },
  107.           computed: {
  108.             payAmount() {
  109.               return this.price * this.num;
  110.             },
  111.             payAmounts() {
  112.               return this.prices * this.nums;
  113.             },
  114.             payAmountr() {
  115.               return this.pricer * this.numr;
  116.             },
  117.             numberAll() {
  118.               return this.num + this.nums + this.numr;
  119.             },
  120.             payAmountAll() {
  121.               return this.payAmount + this.payAmountr + this.payAmounts;
  122.             },
  123.           },
  124.           watch: {
  125.             payAmount(crr) {
  126.               switch (true) {
  127.                 case crr >= 1000 && crr < 2000:
  128.                   this.disAmount = this.payAmount * 0.9;
  129.                   break;
  130.                 case crr >= 2000 && crr < 3000:
  131.                   this.disAmount = this.payAmount * 0.8;
  132.                   break;
  133.                 case crr >= 3000 && crr < 4000:
  134.                   this.disAmount = this.payAmount * 0.7;
  135.                   break;
  136.                 case crr >= 4000 && crr < 5000:
  137.                   this.disAmount = this.payAmount * 0.6;
  138.                   break;
  139.                 case crr >= 5000:
  140.                   this.disAmount = this.payAmount * 0.5;
  141.                   break;
  142.                 default:
  143.                   this.disAmount = this.payAmount;
  144.               }
  145.               this.diffAmount = this.payAmount - this.disAmount;
  146.             },
  148.             payAmounts(crr) {
  149.               switch (true) {
  150.                 case crr >= 1000 && crr < 2000:
  151.                   this.disAmounts = this.payAmounts * 0.9;
  152.                   break;
  153.                 case crr >= 2000 && crr < 3000:
  154.                   this.disAmounts = this.payAmounts * 0.8;
  155.                   break;
  156.                 case crr >= 3000 && crr < 4000:
  157.                   this.disAmounts = this.payAmounts * 0.7;
  158.                   break;
  159.                 case crr >= 4000 && crr < 5000:
  160.                   this.disAmounts = this.payAmounts * 0.6;
  161.                   break;
  162.                 case crr >= 5000:
  163.                   this.disAmounts = this.payAmounts * 0.5;
  164.                   break;
  165.                 default:
  166.                   this.disAmounts = this.payAmounts;
  167.               }
  168.               this.diffAmounts = this.payAmounts - this.disAmounts;
  169.             },
  170.             payAmountr(crr) {
  171.               switch (true) {
  172.                 case crr >= 1000 && crr < 2000:
  173.                   this.disAmountr = this.payAmountr * 0.9;
  174.                   break;
  175.                 case crr >= 2000 && crr < 3000:
  176.                   this.disAmountr = this.payAmountr * 0.8;
  177.                   break;
  178.                 case crr >= 3000 && crr < 4000:
  179.                   this.disAmountr = this.payAmountr * 0.7;
  180.                   break;
  181.                 case crr >= 4000 && crr < 5000:
  182.                   this.disAmountr = this.payAmountr * 0.6;
  183.                   break;
  184.                 case crr >= 5000:
  185.                   this.disAmountr = this.payAmountr * 0.5;
  186.                   break;
  187.                 default:
  188.                   this.disAmountr = this.payAmountr;
  189.               }
  190.               this.diffAmountr = this.payAmountr - this.disAmountr;
  191.             },
  192.             numberAll(crr) {
  193.               this.diffAmountAll = this.diffAmount + this.diffAmountr + this.diffAmounts;
  194.               this.disAmountAll = this.disAmount + this.disAmountr + this.disAmounts;
  195.             },
  196.           },
  197.           methods: {},
  198.           mounted() {
  199.             this.num = 1;
  200.             this.nums = 1;
  201.             this.numr = 1;
  202.           },
  203.         }).mount(".app");
  204.       </script>
  205.     </div>
  206.   </body>
  207. </html>