页面修改

src/components/scenicSpot/Singleticket/OrderPreview.vue

 <style scoped>
-  .image-slot{
+  .image-slot {
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
   }
-  .time-box.time-box2 .time-box-width span{
+
+  .time-box.time-box2 .time-box-width span {
     width: auto;
   }
-    .flexOne{
+
+  .flexOne {
     margin: auto;
     width: 70%;
     min-width: 1300px;
@@ -17,22 +19,26 @@
     margin-top: 15px;
     align-items: flex-start;
   }
-    .flexOne-left{
+
+  .flexOne-left {
     flex-grow: 1;
   }
-    .flexOne-form-bj{
+
+  .flexOne-form-bj {
     border-radius: 5px;
     background: #ffffff;
     padding: 15px;
     margin-bottom: 20px;
   }
-    .flexOne-form-bj h3{
+
+  .flexOne-form-bj h3 {
     font-size: 18px;
     color: black;
     padding: 0 0 20px 0;
     font-weight: 400;
   }
-      .listone-form{
+
+  .listone-form {
     padding: 5px 0 15px 0;
     border-radius: 5px;
     background: #ffffff;
@@ -43,121 +49,149 @@
     overflow: hidden;
     border-bottom: 1px solid #eeeeee;
   }
-    .listone-img{
+
+  .listone-img {
     width: 130px;
     flex-shrink: 0;
     margin-right: 15px;
     border-radius: 5px;
     display: block;
   }
-    .listone-list{
+
+  .listone-list {
     flex-grow: 1;
     display: flex;
     justify-content: space-between;
   }
-    .list-left h6,.card-centent h6{
+
+  .list-left h6,
+  .card-centent h6 {
     font-size: 16px;
     margin-bottom: 5px;
     cursor: pointer;
   }
-    .list-left div{
+
+  .list-left div {
     color: #7E8299;
     font-size: 13px;
     margin-top: 7px;
   }
-    .list-left div a{
+
+  .list-left div a {
     color: #009EF7;
     font-size: 12px;
     margin-left: 15px;
     cursor: pointer;
   }
-    .flexOne-time{
+
+  .flexOne-time {
     padding: 20px;
   }
-    .time-box{
+
+  .time-box {
     display: flex;
     flex-direction: row;
     margin-bottom: 15px;
     border: 0 !important;
   }
-    .time-box.center{
+
+  .time-box.center {
     align-items: center;
   }
-    .time-box>span{
+
+  .time-box>span {
     /* width: 100px; */
     flex-shrink: 0;
     font-size: 13px;
     color: #181C32;
     margin-right: 40px;
   }
-    .flexOne-type{
+
+  .flexOne-type {
     display: flex;
     align-items: center;
     padding: 0 0 20px 0;
   }
-    .flexOne-type b{
+
+  .flexOne-type b {
     font-size: 13px;
     width: 100px;
     flex-shrink: 0;
   }
-    .flexOne-type div{
+
+  .flexOne-type div {
     display: flex;
   }
-    .flexOne-description{
+
+  .flexOne-description {
     padding: 15px 15px;
     border-radius: 5px;
     background: #E1F5FE;
     margin-bottom: 20px;
   }
-    .flexOne-description b{
+
+  .flexOne-description b {
     font-size: 14px;
   }
-    .flexOne-description p{
+
+  .flexOne-description p {
     font-size: 12px;
     color: #4C5759;
     padding: 10px 0 0 0;
   }
-    .flexOne-infor-box b{
+
+  .flexOne-infor-box b {
     font-size: 13px;
   }
-    .infor-list{
+
+  .infor-list {
     display: flex;
     flex-direction: column;
   }
-    .list-title{
+
+  .list-title {
     padding: 20px 0;
     border-bottom: 1px dashed #eeeeee;
     color: #7E8299;
     font-size: 13px;
   }
-    .list-title,.list-centent{
+
+  .list-title,
+  .list-centent {
     display: flex;
     flex-wrap: wrap;
     margin-top: 20px;
   }
-    .infor-list li{
+
+  .infor-list li {
     width: 25%;
   }
+
   .list-centent li {
     width: 33.33%;
   }
+
   .list-centent.active li {
     width: 25%;
   }
-    .bottom .el-form-item{
+
+  .bottom .el-form-item {
     margin-bottom: 0;
   }
-    .notice{
+
+  .notice {
     border-radius: 5px;
     border: 1px dashed #FFA500;
     background: #FFF3E0;
     margin-bottom: 15px;
     padding: 15px;
   }
-    .notice b{
+
+  .notice b {
     font-size: 13px;
   }
-    .notice p{
+
+  .notice p {
     color: #5E6278;
     font-size: 12px;
     padding: 10px 0 0 0;
@@ -177,7 +211,7 @@
 
 
 
-    .flexOne-right{
+  .flexOne-right {
     width: 300px;
     flex-shrink: 0;
     margin-left: 20px;
@@ -185,11 +219,13 @@
     background: #ffffff;
     padding: 15px;
   }
-    .flexOne-right h4{
+
+  .flexOne-right h4 {
     padding: 10px 0 20px 0;
     color: #181C32;
   }
-    .right-text{
+
+  .right-text {
     border: 1px dashed #F1416C;
     padding: 15px 10px;
     background: #FFEBEE;
@@ -198,68 +234,82 @@
     margin-bottom: 20px;
     border-radius: 5px;
   }
-    .right-text p{
+
+  .right-text p {
     color: #6D6E83;
     font-size: 12px;
     padding: 10px 0 0 0;
   }
-    .right-form{
+
+  .right-form {
     border-top: 1px dashed #EEEEEE;
     border-bottom: 1px dashed #EEEEEE;
     padding: 20px 0;
   }
-    .right-form h6{
+
+  .right-form h6 {
     font-size: 14px;
     color: black;
   }
-    .noData{
+
+  .noData {
     text-align: center;
     color: #7E8299;
     font-size: 14px;
   }
-    .right-form-list{
+
+  .right-form-list {
     padding: 20px 0;
   }
-    .right-list{
+
+  .right-list {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 6px;
   }
-    .right-list-right{
+
+  .right-list-right {
     font-size: 13px;
     color: #181C32;
     padding: 0 0 0 5px;
   }
-    .right-Money{
+
+  .right-Money {
     padding: 20px 0;
     font-size: 14px;
     color: #181C32;
   }
-    .right-Money b{
+
+  .right-Money b {
     font-size: 18px;
     color: #F1416C;
     margin-left: 5px;
   }
-    .right-Money,.right-Submit{
+
+  .right-Money,
+  .right-Submit {
     display: flex;
     flex-direction: row-reverse;
   }
-    /deep/.el-input-number{
+
+  /deep/.el-input-number {
     width: 200px;
     height: 32px;
     line-height: 32px;
   }
-    /deep/.el-input-number .el-input__inner{
+
+  /deep/.el-input-number .el-input__inner {
     text-align: center;
     height: 34px;
   }
-    /deep/.line-heigh .el-input-number{
+
+  /deep/.line-heigh .el-input-number {
     line-height: 32px;
   }
 
-  </style>
-  <template>
+</style>
+<template>
   <div class="flexOne">
     <div class="flexOne-left">
       <div class="flexOne-form-bj">
@@ -294,8 +344,8 @@
           <div class="time-box center">
             <span>游玩日期：</span>
             <div>
-                <el-date-picker class="w150" v-model='msg.UseDate' format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date"
-                  :picker-options="beforeCheck" laceholder="门票日期" @change="getInfo">
+              <el-date-picker class="w150" v-model='msg.UseDate' format="yyyy-MM-dd" value-format="yyyy-MM-dd"
+                type="date" :picker-options="beforeCheck" laceholder="门票日期" @change="getInfo">
               </el-date-picker>
             </div>
           </div>
@@ -303,11 +353,12 @@
             <span>选择票型：</span>
             <div style="display: flex;flex-wrap: wrap;">
               <template v-for="x in types">
-                  <el-tag class="time-box-width" :type="x.checked?'':'info'" style="margin-right: 10px;margin-bottom: 5px; cursor: pointer;"
-                  @click="changeDetailListHandler(x)">
+                <el-tag class="time-box-width" :type="x.checked?'':'info'"
+                  style="margin-right: 10px;margin-bottom: 5px; cursor: pointer;" @click="changeDetailListHandler(x)">
                   <a>{{ x.TicketName }}</a>
                   <p style="display: inline-block;margin-left: 5px;">
-                      <a style="display: inline-block;border-left: 1px solid #E9E9EB;line-height: 17px;padding: 0 0 0 8px;">
+                    <a
+                      style="display: inline-block;border-left: 1px solid #E9E9EB;line-height: 17px;padding: 0 0 0 8px;">
                       {{x.B2BPrice.toFixed(2)}}</a>
                   </p>
                 </el-tag>
@@ -319,10 +370,9 @@
             <div style="display: flex;flex-direction: column;">
               <template v-for="x in types">
                 <div style="flex-direction: row;" v-if="x.checked">
+                  {{x.TicketName}}：
                   <el-input-number v-model="x.num" @change="changePeople" :min="1" label="购买数量"
                     style="margin-bottom: 10px;"></el-input-number>
-                  <!-- <span> {{x.CurrencyName
-                  }} </span> -->
                 </div>
               </template>
             </div>
@@ -348,38 +398,31 @@
           <b> {{msg.MailingState==1?'客人讯息':msg.MailingState==2?'邮寄讯息':''}}</b>
           <el-form v-if="msg.MailingState!=4" label-width="80px" :model="msg" :rules="rules" ref="msg">
             <div class="infor-list">
-              <!-- <div class="list-title">
-                <li>中文姓名</li>
-                <li>英文姓名</li>
-                <li>性别</li>
-                <li>联络电话</li>
-                <li>收件地址</li>
-              </div> -->
+
               <div class="list-centent" :class="{'active':msg.MailingState==1}">
                 <li>
                   <el-form-item label="中文名" prop="Name">
-                      <el-input v-model="msg.Name" placeholder="请输入名称"/>
+                    <el-input v-model="msg.Name" placeholder="请输入名称" />
                   </el-form-item>
                 </li>
                 <li>
                   <el-form-item label="英文名" prop="EName">
-                    <el-input v-model="msg.EName" placeholder="请输入英文名"/>
+                    <el-input v-model="msg.EName" placeholder="请输入英文名" />
                   </el-form-item>
                 </li>
 
                 <li>
                   <el-form-item label="电话" prop="">
-                    <el-input type="Number" v-model="msg.Mobile" placeholder="请输入电话"/>
+                    <el-input type="Number" v-model="msg.Mobile" placeholder="请输入电话" />
                   </el-form-item>
                 </li>
                 <li v-if="msg.MailingState==2">
                   <el-popover trigger="click" placement="MailingAddress">
-                    <el-input type="textarea" v-model="msg.MailingAddress"
-                          :autosize="{ minRows: 3, maxRows: 100}"
-                          placeholder="输入邮寄地址"/>
+                    <el-input type="textarea" v-model="msg.MailingAddress" :autosize="{ minRows: 3, maxRows: 100}"
+                      placeholder="输入邮寄地址" />
                     <div slot="reference" class="name-wrapper">
                       <el-form-item label="邮寄地址" prop="MailingAddress">
-                        <el-input v-model="msg.MailingAddress" placeholder="输入邮寄地址" readonly/>
+                        <el-input v-model="msg.MailingAddress" placeholder="输入邮寄地址" readonly />
                       </el-form-item>
                     </div>
                   </el-popover>
@@ -387,15 +430,15 @@
                 <li class="bottom">
                   <el-form-item label="性别" prop="Sex">
                     <el-radio v-model="msg.Sex" label="1">男</el-radio>
-                    <el-radio v-model="msg.Sex" label="2" >女</el-radio>
+                    <el-radio v-model="msg.Sex" label="2">女</el-radio>
                   </el-form-item>
                 </li>
               </div>
             </div>
           </el-form>
           <div style="margin-top: 20px;">
-              <el-input style="width: 100%;" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"
-              v-model="msg.Remark" placeholder="订单备注"/>
+            <el-input style="width: 100%;" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="msg.Remark"
+              placeholder="订单备注" />
           </div>
         </div>
       </div>
@@ -457,9 +500,7 @@
         <!-- <button v-else class="normalBtn"  type="primary" @click="submit">
             提交订单
           </button> -->
-          <el-button :disabled="!isCheck"
-            :loading="loading"
-            class="normalBtn"  type="primary" @click="submit">
+        <el-button :disabled="!isCheck" :loading="loading" class="normalBtn" type="primary" @click="submit">
           提交订单
         </el-button>
       </div>
@@ -469,15 +510,17 @@
       <ticket-card :ticket="detailsRow"></ticket-card>
     </el-dialog>
   </div>
-  </template>
-  <script>
+</template>
+<script>
   import TicketCard from './components/OrderDetails.vue'
   export default {
-      components: { TicketCard },
+    components: {
+      TicketCard
+    },
     data() {
       return {
-          checkedTyps:0,//记录选多币种票型
-          isCheck:true,
+        checkedTyps: 0, //记录选多币种票型
+        isCheck: true,
         showDetails: false,
         loading: false,
         SelffetchAddress: '',
@@ -485,18 +528,18 @@
           OrderId: 0,
           Money: 0.0,
           Remark: '',
-            MailingState: '1',//邮寄状态 1自取 2邮寄
-            MailingAddress: '',//MailingState =2 填写邮寄
+          MailingState: '1', //邮寄状态 1自取 2邮寄
+          MailingAddress: '', //MailingState =2 填写邮寄
           MailingMoney: null,
-            SelffetchAddress: '',//自取地址
-            UseDate:'',//门票日期
-            Name:'',
-            EName:'',
-            Sex: '1',//1男2女
+          SelffetchAddress: '', //自取地址
+          UseDate: '', //门票日期
+          Name: '',
+          EName: '',
+          Sex: '1', //1男2女
           Birthday: '',
-            Mobile:'',
-            CouponsId:'',//景点id
-            DetailList:[],
+          Mobile: '',
+          CouponsId: '', //景点id
+          DetailList: [],
           LureEmpId: 0,
           CRMGuestId: 0,
         },
@@ -506,11 +549,11 @@
         detailsObj: {},
         beforeCheck: {
           disabledDate: time => {
-                let endTime = new Date(this.getBeforeDate(1,new Date().Format("yyyy-MM-dd")));
+            let endTime = new Date(this.getBeforeDate(1, new Date().Format("yyyy-MM-dd")));
             return time && endTime.getTime() >= time.getTime();
           }
         },
-          rules:{
+        rules: {
           Name: [{
             required: true,
             message: '请输入中文名',
@@ -521,8 +564,11 @@
             message: '请输入英文名',
             trigger: 'blur'
           }],
-            Mobile: [
-                { required: true, message: "请输入联系电话", trigger: "blur" },
+          Mobile: [{
+              required: true,
+              message: "请输入联系电话",
+              trigger: "blur"
+            },
             {
               pattern: this.$commonUtils.Regex.el_ISphone,
               message: "请输入正确的电话"
@@ -539,8 +585,8 @@
       };
     },
     methods: {
-        submit(){
-          if(this.msg.MailingState!=4){
+      submit() {
+        if (this.msg.MailingState != 4) {
           this.$refs['msg'].validate((valid) => {
             if (valid) {
               this.setFormMsg()
@@ -548,26 +594,27 @@
               return false;
             }
           });
-          }else{
+        } else {
           this.setFormMsg()
         }
       },
-        setFormMsg(){
-          if(this.msg.MailingState!='2'){
+      setFormMsg() {
+        if (this.msg.MailingState != '2') {
           this.msg.MailingAddress = ''
           this.msg.MailingMoney = null
-          }if(this.msg.MailingState!='1'){
+        }
+        if (this.msg.MailingState != '1') {
           this.msg.SelffetchAddress = ''
         }
         this.msg.DetailList = []
-          this.types.forEach(x=>{
-            if(x.checked){
+        this.types.forEach(x => {
+          if (x.checked) {
             let y = {
               TicketType: x.TicketCouponsType,
               TicketName: x.TicketName,
               Unit_Price: x.B2BPrice,
               Num: x.num,
-                Money: x.B2BPrice*x.num,
+              Money: x.B2BPrice * x.num,
               TicketId: x.TicketID
             }
             this.msg.DetailList.push(y)
@@ -593,54 +640,57 @@
       changePeople(val) {
         this.getNum()
       },
-        getNum(){
+      getNum() {
         // 控制门票张数
         // this.types.forEach(x=>{
         //     if(x.num>x.RemainingInventory){
         //       x.num = x.RemainingInventory
         //     }
         // })
-          setTimeout(()=>{
+        setTimeout(() => {
           this.calcMoneyHandler()
-          },50)
+        }, 50)
       },
-        calcMoneyHandler(){
-          this.msg.Money=0.0
-          let Money= 0
-          if(this.msg.MailingState == 2){
+      calcMoneyHandler() {
+        this.msg.Money = 0.0
+        let Money = 0
+        if (this.msg.MailingState == 2) {
           this.msg.MailingMoney = this.detailsObj.MailingMoney
-          }else{
+        } else {
           this.msg.MailingMoney = 0
         }
-          this.types.forEach(x=>{
-            if(x.checked){
-              Money+=x.B2BPrice*x.num
+        this.types.forEach(x => {
+          if (x.checked) {
+            Money += x.B2BPrice * x.num
           }
         })
-          this.msg.Money = Number(Money)+Number(this.msg.MailingMoney)
+        this.msg.Money = Number(Money) + Number(this.msg.MailingMoney)
       },
       changeDetailListHandler(e) {
         e.checked = !e.checked
         this.isCheck = this.types.findIndex(x => x.checked) > -1
         this.checkedTyps = 0
-          this.types.forEach(item=>{  if(item.checked==true){ this.checkedTyps++}})
-          if(this.isCheck){
+        this.types.forEach(item => {
+          if (item.checked == true) {
+            this.checkedTyps++
+          }
+        })
+        if (this.isCheck) {
           this.calcMoneyHandler()
-          }else{
-            this.msg.Money=0.0
+        } else {
+          this.msg.Money = 0.0
         }
       },
-        getInfo(){
+      getInfo() {
         let time
-          if(this.OpenTime!=this.msg.UseDate){
+        if (this.OpenTime != this.msg.UseDate) {
           time = this.msg.UseDate
-          }else{
+        } else {
           time = this.OpenTime
         }
-          if(time){
+        if (time) {
           this.apipost(
-            "ticket_post_GetTicketCouponsInfo",
-            {
+            "ticket_post_GetTicketCouponsInfo", {
               CouponsId: this.msg.CouponsId,
               OpenTime: time,
             },
@@ -657,15 +707,17 @@
                 };
                 addList(res.data.data.TicketPriceList);
                 this.msg.Money = 0.00
-                this.types = res.data.data.TicketPriceList.filter(x=>{ return x.B2BPrice>0})
-                if(this.types&&this.types.length>0){
+                this.types = res.data.data.TicketPriceList.filter(x => {
+                  return x.B2BPrice > 0
+                })
+                if (this.types && this.types.length > 0) {
                   this.changeDetailListHandler(this.types[0])
                 }
-                if(this.types&&this.types.length==0){
+                if (this.types && this.types.length == 0) {
                   this.Error('暂无报价，无法下单')
                 }
 
-              }else{
+              } else {
                 this.Error(res.data.message)
               }
             },
@@ -708,7 +760,7 @@
     },
     mounted() {
       // crm自动登陆传过来的参数
-        if(this.$route.query.crmOrderObj){
+      if (this.$route.query.crmOrderObj) {
         this.crmOrderObj = JSON.parse(this.$route.query.crmOrderObj)
         this.msg.LureEmpId = this.crmOrderObj.LureEmpId
         this.msg.CRMGuestId = this.crmOrderObj.CRMGuestId
@@ -722,4 +774,4 @@
     }
   };
 
-  </script>
+</script>