优惠计算器Vue重制，HTML代码在线实时编辑、实时预览

index.html

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

            
            <!doctype html>
<html>
<head>
  <meta charset="UTF-8" />

  <!-- 引入 vue 入口文件 -->
  <script type="module" src="./main.js"></script>
  
</head>

<body>
  <div id="app"></div>
</body>

</html>

编辑器加载中

main.js

            
                1
2
3
4
5
6
7

            
            import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

createApp(App).use(ElementPlus).mount('#app')

编辑器加载中

App.vue

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

            
            <template>
  <div style="margin: 50px 0;">
    <el-text tag="b" type="success" size="large" style="font-size: 6vh;">Hello 欢迎使用</el-text>
  </div>
  <div style="margin: 50px 0;">
    <el-text tag="b" type="primary" size="large" style="margin: 0 20px;">请输入你的游戏总价</el-text>
    <el-input-number v-model="a" :min="0" :max="1000" :controls="false" style="auto">
      <template #suffix>
        <span>RMB</span>
      </template>
    </el-input-number>
  </div>
  <div class="re">
    <div>
      <el-text type="info" size="large">95折优惠后：</el-text>
      <el-text tag="b" type="primary" size="large">{{ (a * 0.95).toFixed(2) }} 元</el-text>
    </div>
    <div style="display: flex;justify-content: center;width: 100%;gap:40px">
      <div style="margin: 20px">
        <el-text type="info" size="large">方案一：叠加95折优惠后 </el-text>
        <el-text tag="b" type="success" size="large"> {{ (a * 0.9025).toFixed(2) }} 元</el-text>
        <el-progress :percentage=" a === 0 ? 0 :((a * 0.9025).toFixed(2) / a).toFixed(2) * 100" :stroke-width="24" :text-inside="true" status="success" striped striped-flow :duration="15" />
      </div>
      <div style="margin: 20px">
        <el-text type="info" size="large">方案二：每满25-1.5立减后 </el-text>
        <el-text tag="b" type="success" size="large"> {{ (a * 0.95 - Math.floor(a / 25) * 1.5).toFixed(2) }} 元</el-text>
        <el-progress :percentage=" a === 0 ? 0 :((a * 0.95 - Math.floor(a / 25) * 1.5).toFixed(2) / a).toFixed(2) * 100" :stroke-width="24" :text-inside="true" status="success" striped striped-flow :duration="15" />
      </div>
    </div>
  </div>
  <div class="re">
    <el-text tag="b" type="primary" size="large" style="margin-top: 40px">最优惠的方案</el-text>
    <div>
      <el-text tag="b" type="success" size="large">{{ (a * 0.95 - Math.floor(a / 25) * 1.5).toFixed(2) >= (a * 0.9025).toFixed(2)
  ? "方案一&nbsp;&nbsp;&nbsp;&nbsp;"
  : "方案二&nbsp;&nbsp;&nbsp;&nbsp;"}}</el-text>
      <el-text tag="b" type="warning" size="large">
        {{ (a * 0.95 - Math.floor(a / 25) * 1.5).toFixed(2) >= (a * 0.9025).toFixed(2)
    ? (a * 0.9025).toFixed(2)
    : (a * 0.95 - Math.floor(a / 25) * 1.5).toFixed(2) }} 元</el-text>
    </div>
    <el-text v-show="a > 100" size="small" type="danger" tag="i">总价较高请提前联系我，以防预备的余额不足！</el-text>
  </div>
</template>

<script setup>
  import {
    ref,
    watch
  } from "vue"
  let a = ref(0);
  watch(a, () => {
    if(a.value === null) {
      a.value = 0;
    }
  })
</script>

<style>
  html,
  body {
    background-color: #fefefe;
    text-align: center;
    padding: 20px 0;
    margin: 0 auto;
    width: 100%
  }

  .re {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap:20px;
  }
</style>

编辑器加载中

package.json

注意：新添加的依赖包首次加载可能会报错，稍后再次刷新即可

            
                1
2
3
4
5
6
7

            
            {
    "dependencies": {
    "vue": "3.5.15",
    "element-plus": "2.9.4",
    "@element-plus/icons-vue": "2.3.1"
    }
  }

编辑器加载中