9.12

fuintCashierWeb/src/views/cashier/NewComponents/newHome.vue

@@ -105,7 +105,7 @@
           </div>
         </div>
         <div class="tab-kuang" style="flex-wrap: wrap">
-          <div class="card92" v-for="(item,index) in 3">
+          <div class="card92" v-for="(item,index) in 3" @click="setRefuelingAmount()" >
             <div>汽油 92#</div>
             <div class="card-title">1号枪</div>
             <div class="c-b-d">
@@ -433,7 +433,7 @@ export default {
           id: '4'
         },
       ],
-      userInfo:true,
+      userInfo:true,//判断登录状态
       ruleIndex:0,
       tabIndex: 0,
       newMember: false,
@@ -497,6 +497,9 @@ export default {
     setindex(index){
       this.ruleIndex = index
     },
+    setRefuelingAmount(){
+      this.refuelingAmount = true
+    },
     loadAll() {
       return [
         { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
@@ -902,6 +905,7 @@ input {
   overflow: hidden;
   margin-right: 1%;
   margin-bottom: 1%;
+  cursor: pointer;
 }
 
 .card0 {
@@ -913,7 +917,7 @@ input {
   box-shadow: 0px 3px 6px 1px rgba(255, 255, 255, 0.4), inset 0px 3px 6px 1px rgba(255, 255, 255, 0.5);
   border-radius: 6px 6px 6px 6px;
   border: 1px solid #FFB519;
-
+  cursor: pointer;
   font-size: 12px;
   color: #FFB519;
   overflow: hidden;
@@ -935,6 +939,7 @@ input {
   overflow: hidden;
   margin-right: 1%;
   margin-bottom: 1%;
+  cursor: pointer;
 }
 
 .card95 {
@@ -951,6 +956,7 @@ input {
   overflow: hidden;
   margin-right: 1%;
   margin-bottom: 1%;
+  cursor: pointer;
 }
 
 .card-title {

fuintCashierWeb/src/views/cashier/NewComponents/newHomeComponents/refuelingAmount.vue

@@ -12,6 +12,13 @@ export default {
         resource: '',
         desc: ''
       },
+      findex:0,
+      priceList:[
+        "¥100",
+        "¥150",
+        "¥200",
+        "¥300",
+      ],
       rules: {
         name: [
           { required: true, message: '请输入活动名称', trigger: 'blur' },
@@ -39,6 +46,9 @@ export default {
     };
   },
   methods: {
+    setIndex(index){
+      this.findex = index
+    },
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
@@ -59,15 +69,26 @@ export default {
 <template>
   <div>
     <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
-
-      <el-input v-model="ruleForm.name">
+      <div class="input-box">
+        <div>已选油品</div>
+        <div>汽油92#</div>
+      </div>
+      <div class="input-box">
+        <div>已选油枪</div>
+        <div>1号枪</div>
+      </div>
+      <div class="input-box">
+        <div>油品单价</div>
+        <div>8.5元/L</div>
+      </div>
+      <el-input v-model="ruleForm.name" style="width: 490px" placeholder="请输入加油金额">
         <template slot="append">元</template>
       </el-input>
-
-
-
-
-
+      <div class="box-">
+          <div class="fo-box" @click="setIndex(index)" :class="{ 'active' : findex == index }" v-for="(item,index) in priceList" :key="index">
+            {{item}}
+          </div>
+      </div>
     </el-form>
   </div>
 </template>
@@ -77,4 +98,42 @@ export default {
   font-size: 12px;
   color: #999999;
 }
+.input-box{
+  width: 490px;
+  height: 36px;
+  border-radius: 4px;
+  border: 1px solid #eceff1;
+  box-sizing: border-box;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 30px auto;
+  font-size: 14px;
+  color: #FF9655;
+}
+.box-{
+  width: 490px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 25px auto;
+}
+.fo-box{
+  width: 72px;
+  height: 36px;
+  background: #D8D8D8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #333333;
+
+  cursor: pointer;
+}
+.active{
+  background: #FF9655 !important;
+  color: #fff !important;
+}
 </style>