no message

src/components/ScenicSpotTicket/orderPreview.vue

+<template>
+  <div class="column full-height">
+    <div class="col">
+      <div class="text-right" v-if="$q.platform.is.desktop">
+        <q-btn
+          color="primary"
+          icon="refresh"
+          label="全部重選"
+          @click="resetHandler"
+          flat
+        />
+      </div>
+      <div class="text-grey-6 f12 q-my-md">選擇門票類型</div>
+      <div class="row wrap">
+        <div v-for="(x,i) in dataList.TicketList" :key="i">
+          <q-chip size="14px" clickable @click="handleSelect(x)" 
+          :text-color="selectedObj&&selectedObj.Id==x.Id?'white':'dark'" 
+          :color="selectedObj&&selectedObj.Id==x.Id?'primary':'grey-3'" square>{{ x.TicketName }}</q-chip>
+        </div>
+      </div>
+      <div class="text-grey-6 f12 q-my-md">選擇數量</div>
+      <div class="row items-end">
+        <div class="col" :class="{'column':$q.platform.is.mobile}">
+          <div v-if="selectedObj">
+            <span class="text-subtitle2 text-weight-bold">{{selectedObj.TicketName}}</span>
+            <span class="text-grey-6 f12 q-ml-sm"></span>(1人/票)</span>
+          </div>
+          <div v-if="$q.platform.is.mobile">
+            <span class="text-grey-7 product-price" style="font-size: 13px">
+              CNY {{ moneyFormat(p.originalB2CPrice, 0) }} /每票
+            </span>
+          </div>
+        </div>
+        <div class="row items-end">
+          <span v-if="$q.platform.is.desktop" class="text-grey-7 product-price" style="font-size: 13px">
+            CNY {{ moneyFormat(p.originalB2CPrice, 0) }} /每票
+          </span>
+          <q-input
+            style="width: 150px"
+            @input="changePeople"
+            v-model="chosenObj.Count"
+            class="col"
+            :class="{
+              'q-ml-sm q-px-none q-pl-none': $q.platform.is.desktop,
+            }"
+            mask="#"
+            reverse-fill-mask
+            dense
+            standout
+            readonly
+          >
+            <template v-slot:prepend>
+              <q-btn
+                color="primary"
+                size="sm"
+                class="q-px-none"
+                flat
+                icon="remove"
+                @click="addPeople('Count', -1)"
+              />
+            </template>
+            <template v-slot:append>
+              <q-btn
+                color="primary"
+                size="sm"
+                class="q-px-none"
+                flat
+                icon="add"
+                @click="addPeople('Count', 1)"
+              />
+            </template>
+          </q-input>
+        </div>
+      </div>
+    </div>
+    <div class="q-mt-md q-pt-md" style="border-top: 1px dashed #eee">
+      <div class="row items-center">
+        <span class="text-subtitle2 text-grey-6 col">總金額</span>
+        <span class="text-h6 text-primary product-price">CNY {{ moneyFormat(sumPrice,0) }}</span>
+      </div>
+      <div class="q-mt-md text-right"
+      :class="{'row wrap justify-end items-start':$q.platform.is.mobile}">
+        <span :class="{'col-12 q-mb-sm':$q.platform.is.mobile}">
+        <span class="f12 text-negative" v-if="!p.startDate" 
+        :class="{'q-mr-lg':$q.platform.is.desktop}">
+          {{$q.platform.is.mobile?'請選擇上面的出行日期':'請選擇左側的出行日期'}} 
+        </span>
+        <span class="f12 text-negative" 
+        :class="{'q-mr-lg':$q.platform.is.desktop}"
+        v-if="p.startDate&&!selectedObj">
+          {{`請選擇上面的門票類型`}} 
+        </span>
+        </span>
+        <q-btn color="primary" label="立即訂購" unelevated class="q-px-lg" 
+        :disable="sumPrice==0||!selectedObj"
+        @click="goOrderHandler"/>
+        
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { date } from "quasar";
+export default {
+  props: ["dataList","price","configId","Month"],
+  watch: {
+    price: {
+      handler(n, o) {
+        this.p = n;
+        if(n&&n.startDate){
+          this.chosenObj.startDate = n.startDate;
+        }
+        this.calcMoney()
+        
+      },
+      deep: true,
+      immediate: false
+    },
+    dataList: {
+      handler(n, o) {
+        this.dataList = n;
+        
+      },
+      deep: true,
+      immediate: true
+    },
+  },
+  data() {
+    return {
+      p: {},
+      chosenObj: null,
+      sumPrice:0,
+      selectedObj: null,
+      priceList: [],
+    };
+  },
+  created() {
+    this.initModel();
+    if(this.p.startDate){
+      this.chosenObj.startDate = this.p.startDate;
+      this.calcMoney()
+      this.getCarPriceData2()
+    }
+    
+  },
+  methods: {
+    goOrderHandler(){
+      let order = {
+        CouponsId: this.configId, 
+        TicketId: this.selectedObj.Id,
+        Month: this.Month,
+        startDate: this.p.startDate,
+        originalB2CPrice: this.p.originalB2CPrice,
+        orderInfo: this.chosenObj,
+      }
+      let key = this.$md5(JSON.stringify(order))
+      let pickuporderScenTickets = localStorage.getItem('pickuporderScenTickets')
+      pickuporderScenTickets = pickuporderScenTickets?JSON.parse(pickuporderScenTickets):[]
+      pickuporderScenTickets.push({
+        key,
+        order
+      })
+      localStorage.setItem("pickuporderScenTickets",JSON.stringify(pickuporderScenTickets))
+      this.CommonJump('/PickuporderForm/'+key, {});
+    },
+    //  获取报价的详情
+    getCarPriceData2() {
+      this.priceList = []
+      this.apipost(
+        "b2c_get_GetTicketCouponsMonthPrice",
+        { 
+          CouponsId: this.configId, 
+          TicketId: this.selectedObj.Id,
+          Month: this.Month,
+          
+         },
+        (r) => {
+          if (r.data.resultCode == 1) {
+            let arr = []
+            r.data.data.forEach(x=>{
+              if(x.Price){
+                if(this.chosenObj.startDate==x.Date){
+                  this.p.originalB2CPrice = x.Price
+                }
+                let dataObj = {
+                  startDate: x.Date,
+                  originalB2CPrice: x.Price,
+                  remainNum: 1,
+                  Count: 1,
+                  isSupportChildren: 1,
+                  safeMoney: 0,
+                }
+                if(date.formatDate(Date.now(), 'YYYY-MM-DD')!=x.Date&&x.Date>date.formatDate(Date.now(), 'YYYY-MM-DD')){
+                  arr.push(dataObj)
+                }
+              }
+            })
+            const temp= JSON.parse(JSON.stringify(r.data.data))
+            let PriceArr = temp.filter(x=>{ return x.Price>0 })
+            
+            if(PriceArr.length>0){
+              this.$emit('getPriceList',JSON.stringify(arr),this.selectedObj.Id)
+            }else{
+              let dataObj = {
+                  startDate: '',
+                  originalB2CPrice: '',
+                  remainNum: 0,
+                  Count: 0,
+                  safeMoney: 0,
+                  PeopleNum: 1
+              }
+              this.priceList.push(dataObj)
+              this.$emit('getPriceList',JSON.stringify(this.priceList),this.selectedObj.Id)
+              this.p.originalB2CPrice = 0
+              this.resetHandler()
+            }
+          }
+          
+        },null)
+    },
+    handleSelect(item){
+      this.selectedObj = item
+      setTimeout(()=>{
+        this.getCarPriceData2()
+      },100)
+    },
+    initModel() {
+      this.sumPrice=0
+      this.chosenObj = {
+        startDate: "",
+        Count: 1,
+        remark: "",
+      };
+    },
+    resetHandler(type) {
+      if(type){
+        this.selectedObj = null
+      }
+      setTimeout(()=>{
+        this.p = {};
+        this.initModel()
+      },100)
+      this.$emit("reset");
+    },
+    changePeople(val) {},
+    addPeople(m, i, isDf = false) {
+      this.chosenObj[m] = parseInt(this.chosenObj[m]) + i;
+      if(m!='Count'){
+        this.chosenObj[m] = this.chosenObj[m] < 0 ? 0 : this.chosenObj[m]++;
+      }else{
+        this.chosenObj[m] = this.chosenObj[m] < 1 ? 1 : this.chosenObj[m]++;
+      }
+      this.calcMoney()
+    },
+    calcMoney() {
+      if (!this.p) return;
+      let money = this.p.originalB2CPrice * this.chosenObj.Count;
+      this.sumPrice = money;
+    },
+  },
+};
+</script>
+
+<style></style>