Merge branch 'master' of https://gitlab-pro.ezijing.com/ezijing-web/highway-h5

src/assets/css/base.css

@@ -2,3 +2,6 @@
   margin: 0;
   padding: 0;
 }
+body {
+  background: #f7f7f7;
+}

src/modules/home/components/ImgShow.vue

 <template>
   <div class="main">
-    <commonheader @back="handlePrev" :callBack="true" />
+    <commonheader @back="handlePrev" :callBack="true" :title="title" />
     <!-- 展示页面 -->
     <div class="show_content">
       <div class="show_content_img" v-html="data.desc"></div>
+    </div>
+    <div class="main_footer">
       <div class="show_content_btn" @click="handleSubmit">{{ data.title }}</div>
     </div>
   </div>
@@ -12,12 +14,16 @@
 <script>
 import Commonheader from '../components/Commonheader.vue'
 export default {
+  data() {
+    return {
+      title: '报名'
+    }
+  },
   components: { Commonheader },
   props: {
     data: { type: Object }
   },
-  mounted() {
-  },
+  mounted() {},
   methods: {
     handlePrev() {
       this.$emit('prev')
@@ -38,6 +44,13 @@ export default {
       margin-top: 0.84rem;
       width: 6.9rem;
     }
+  }
+  .main_footer {
+    width: 100%;
+    height: 1.81rem;
+    background: #fff;
+    position: fixed;
+    bottom: 0;
     .show_content_btn {
       width: 6.42rem;
       height: 0.88rem;

src/modules/home/components/SignForm.vue

 <template>
   <div class="main">
+    <commonheader :title="title" />
     <div class="main_content">
       <div class="main_content_banner" v-html="data.desc"></div>
       <div class="main_content_form">
-        <van-form>
+        <van-form class="main_content_form_con">
           <div v-for="(listIt, formIndex) in data.user_fields" :key="formIndex" class="main_content_form_list">
             <img
               src="https://webapp-pub.ezijing.com/highway/h5/form_minus.png"
@@ -22,9 +23,10 @@
                   :placeholder="item.placeholder"
                   :rules="[{ required: item.required, message: item.placeholder }]"
                   clearable
-                  border
+                  :border="true"
                   :disabled="formIndex === 0 && (item.key === 'mobile' || item.key === 'name')"
                 />
+                <div class="line"></div>
               </div>
               <!-- 单选框 -->
               <div v-if="item.type === 'radio'">
@@ -37,6 +39,7 @@
                     </van-radio-group>
                   </template>
                 </van-field>
+                <div class="line"></div>
               </div>
 
               <!-- 选择器 -->
@@ -59,7 +62,9 @@
                     @cancel="showPicker = false"
                   />
                 </van-popup>
+                <div class="line"></div>
               </div>
+
               <!-- 时间 -->
               <div v-if="item.type === 'datetime'">
                 <van-field
@@ -75,6 +80,7 @@
                 <van-popup v-model="item.showPicker" position="bottom">
                   <van-datetime-picker type="datetime" @confirm="onConfirmTime" @cancel="showPickerTime = false" />
                 </van-popup>
+                <div class="line"></div>
               </div>
             </div>
           </div>
@@ -83,28 +89,41 @@
           <img src="https://webapp-pub.ezijing.com/highway/h5/form_add.png" class="btn_add" @click="handleAdd" />
         </div>
       </div>
-      <div class="main_content_footer">
-        <template v-if="data.can_skip_pay === 1">
-          <van-checkbox v-model="checkedPay" shape="square" class="main_content_skipPay">
+    </div>
+    <div class="main_footer">
+      <div class="main_footer_top" v-if="data.can_skip_pay === 1">
+        <van-checkbox icon-size="13px" v-model="checkedPay" shape="square" class="main_content_skipPay">
           {{ data.skip_pay_title }}</van-checkbox
         >
-        </template>
+      </div>
+      <div class="main_footer_bottom">
         <van-button
           round
           block
           native-type="submit"
-          :class="[data.can_skip_pay === 1 ? 'main_content_btn' : 'main_content_btn1']"
           @click="onSubmit"
+          :class="[data.can_skip_pay === 1 ? 'main_content_btn' : 'main_content_btn1']"
           >{{ data.title }}</van-button
         >
       </div>
+      <!-- <template v-if="data.can_skip_pay === 1">
+        <van-checkbox icon-size="13px" v-model="checkedPay" shape="square" class="main_content_skipPay">
+          {{ data.skip_pay_title }}</van-checkbox
+        >
+      </template>
+      <div >
+        <van-button round block native-type="submit" @click="onSubmit">{{ data.title }}</van-button>
+      </div> -->
     </div>
   </div>
 </template>
 
 <script>
+import Commonheader from '../components/Commonheader.vue'
+
 import { saveStepInfo } from '../api'
 export default {
+  components: { Commonheader },
   props: {
     stepList: { type: Array },
     data: { type: Object },
@@ -114,6 +133,7 @@ export default {
   },
   data() {
     return {
+      title: '报名',
       checkedPay: false, // 勾选是否跳过按钮
       index: 0,
       cIndex: 0,
@@ -156,6 +176,7 @@ export default {
           } else {
             this.$emit('next', res.data)
           }
+          this.checkedPay = false
         }
       })
     },
@@ -208,25 +229,24 @@ export default {
 <style lang="scss" scoped>
 .main {
   background-color: #f7f7f7;
-  height: 100vh;
+
   .main_content {
     padding: 0.21rem 0.3rem 4.13rem 0.3rem;
     .main_content_banner {
       margin-top: 0.84rem;
       width: 100%;
-      // height: 2.97rem;
-      // border: 1px solid #707070;
-      // border-radius: 0.2rem;
     }
     .main_content_form {
       width: 6.9rem;
       opacity: 1;
-      border-radius: 20px;
       margin-top: 0.32rem;
     }
     .main_content_form_list {
+      border-radius: 20px;
       margin-top: 0.43rem;
       background: #fff;
+      padding-bottom: 0.68rem;
+      padding-top: 0.4rem;
       .btn_minus {
         float: right;
         width: 0.5072rem;
@@ -245,48 +265,49 @@ export default {
         margin-right: 0.31rem;
       }
     }
-    .main_content_footer {
+  }
+
+  .main_footer {
+    width: 100%;
     height: 1.81rem;
-      position: fixed;
-      bottom: 0.3rem;
     background: #fff;
-      width: 100%;
-      margin-left: -0.3rem;
-      margin-bottom: -0.3rem;
-      .main_content_skipPay {
+    position: fixed;
+    bottom: 0;
+    display: flex;
+    justify-content: space-around;
+    align-items: flex-start;
+    flex-direction: column;
+    .main_footer_top {
       font-size: 0.24rem;
       font-weight: 400;
       color: #999999;
       margin-left: 0.8rem;
-        opacity: 1;
+      margin-top: 0.15rem;
     }
+    .main_footer_bottom {
+      margin-top: -0.18rem;
+
       .main_content_btn {
         width: 6.9rem;
         background: #b80140;
         color: #ffffff;
         margin-left: 0.28rem;
+        margin-top: -0.18rem;
       }
       .main_content_btn1 {
         width: 6.9rem;
         background: #b80140;
         color: #ffffff;
         margin-left: 0.28rem;
-        margin-top: 0.4rem;
+        margin-top: 0.3rem;
       }
     }
   }
 }
-::v-deep .van-checkbox__icon .van-icon {
-  width: 0.25rem;
-  height: 0.26rem;
-  text-align: center;
-  margin-top: 0.06rem;
-}
-::v-deep .van-checkbox__icon .van-checkbox__icon {
-  font-size: 0.16rem;
-}
-::v-deep .van-checkbox__icon .van-checkbox__label {
-  color: #999999;
-  margin-top: -0.9rem;
+::v-deep {
+  .van-checkbox__icon {
+    border-radius: 3px;
+    overflow: hidden;
+  }
 }
 </style>

src/modules/home/views/MyOrder.vue

@@ -21,11 +21,11 @@
                   <div class="orderList_con_left_tit">{{ item.activity.name }}</div>
                   <div class="orderList_con_left_num">人数：{{ item.count }}</div>
                 </div>
-                <div class="orderList_con_price">¥{{ item.amount }}</div>
+                <div class="orderList_con_price">¥{{ item.amount.toFixed(2) }}</div>
               </div>
               <div class="orderList_pay">
                 <div class="orderList_pay_tit">需付款：</div>
-                <div class="orderList_pay_price">{{ item.amount }}</div>
+                <div class="orderList_pay_price">{{ item.amount.toFixed(2) }}</div>
               </div>
               <div class="orderList_btn">
                 <van-button
@@ -34,6 +34,7 @@
                   style="margin-left: 0.42rem"
                   v-if="item.status === 0 || item.status === 1"
                   @click="handlePay(item)"
+                  class="pay_btn"
                   >去支付</van-button
                 >
               </div>
@@ -106,7 +107,6 @@ export default {
 
 <style lang="scss" scoped>
 .main {
-  min-height: 100vh;
   background-color: #f7f7f7;
 
   .main_content {
@@ -202,4 +202,11 @@ export default {
   z-index: 1000;
   top: 0.9rem;
 }
+::v-deep .pay_btn {
+  border-radius: 0.31rem;
+  border: 1px solid #c01540;
+
+  color: #c01540;
+  font-size: 0.28rem;
+}
 </style>

src/modules/home/views/OrderConfirm.vue

@@ -10,21 +10,20 @@
               <div class="card_header">
                 <van-checkbox :name="item" :disabled="item.pay_record.pay_status === '1'"></van-checkbox>
                 <!-- <span class="card_header_title">{{ JSON.parse($route.query.detailListName) }}</span> -->
-              </div>
                 <div class="card_con">
                   <p>{{ item.name }} {{ item.mobile }}</p>
                 </div>
+              </div>
+
               <div class="card_fotter">
                 <div class="card_fotter_left">
                   <span class="price">¥</span>
-                  <span class="price_num">{{ payPrice }}<span class="price_num"></span></span>
+                  <span class="price_num" v-html="getPayPrice()"></span>
                 </div>
                 <div class="card_fotter_left card_fotter_right">
                   <span class="price">单位已优惠</span>
                   <span class="price">¥</span>
-                  <span class="price_num">{{
-                    (Number(payPrice).toFixed(2) - Number(item.pay_record.pay_amount).toFixed(2)).toFixed(2)
-                  }}</span>
+                  <span class="price_num" v-html="getCompanyPrice(item)"></span>
                 </div>
               </div>
             </div>
@@ -38,12 +37,12 @@
           <div class="main_footer_total_top">
             <div class="total_text">合计:</div>
             <div class="total_sign">¥</div>
-            <div class="price">{{ totalPrice }}</div>
+            <div class="price" v-html="getTotalPrice()"></div>
           </div>
           <div class="main_footer_total_bottom">
-            <div class="company_yh">单位已优惠</div>
+            <div class="company_yh">共优惠</div>
             <div class="company_sign">¥</div>
-            <div class="company_yh">{{ totalCompanyPrice.toFixed(2) }}</div>
+            <div class="company_yh" v-html="totalCompanyPrice"></div>
           </div>
         </div>
         <van-button round @click="handlePrev" class="prev_btn">上一页</van-button>
@@ -82,7 +81,10 @@ export default {
 
   computed: {
     totalPrice() {
-      return this.selctOrderData.map(item => Number(item.pay_record.pay_amount)).reduce((pre, nex) => (pre += nex), 0)
+      return this.selctOrderData
+        .map(item => Number(item.pay_record.pay_amount))
+        .reduce((pre, nex) => (pre += nex), 0)
+        .toFixed(2)
     },
     payPrice() {
       return this.data.payData.pay_price
@@ -91,12 +93,34 @@ export default {
       return this.selctOrderData
         .map(item => Number(this.payPrice) - Number(item.pay_record.pay_amount))
         .reduce((pre, nex) => (pre += nex), 0)
+        .toFixed(2)
     }
   },
   mounted() {
     this.stepOrderInfo = this.data.payData.list
   },
   methods: {
+    getTotalTotalCompanyPrice() {
+      const splitPrice = this.totalCompanyPrice.split('.')
+      // //2.重新赋值
+      return `<span style="font-size:0.34rem;">${splitPrice[0]}</span>.<span style="font-size:0.2rem;">${splitPrice[1]}</span>`
+    },
+    getTotalPrice() {
+      const splitPrice = this.totalPrice.split('.')
+      // //2.重新赋值
+      return `<span style="font-size:0.34rem;">${splitPrice[0]}</span>.<span style="font-size:0.2rem;">${splitPrice[1]}</span>`
+    },
+    getPayPrice() {
+      const splitPrice = this.payPrice.split('.')
+      // //2.重新赋值
+      return `<span style="font-size:0.34rem;">${splitPrice[0]}</span>.<span style="font-size:0.2rem;">${splitPrice[1]}</span>`
+    },
+    getCompanyPrice(item) {
+      const companyPrice = (Number(this.payPrice).toFixed(2) - Number(item.pay_record.pay_amount).toFixed(2)).toFixed(2)
+      const splitPrice = companyPrice.split('.')
+      // //2.重新赋值
+      return `<span style="font-size:0.34rem;">${splitPrice[0]}</span>.<span style="font-size:0.2rem;">${splitPrice[1]}</span>`
+    },
     checkItem() {
       if (this.selctOrderData.length === this.stepOrderInfo.filter(item => item.pay_record.pay_status !== '1').length) {
         this.isAll = true
@@ -143,7 +167,6 @@ export default {
 <style lang="scss" scoped>
 .main {
   background-color: #f7f7f7;
-  height: 100vh;
   .main_content {
     padding: 0.51rem 0.3rem 0.3rem 0.3rem;
     margin-top: 0.9rem;
@@ -176,7 +199,7 @@ export default {
         .card_con {
           font-weight: 400;
           color: #999999;
-          margin-left: 0.66rem;
+          margin-left: 0.33rem;
           font-size: 0.24rem;
         }
         .card_fotter {
@@ -192,6 +215,7 @@ export default {
               font-size: 0.2rem;
               color: #b80140;
               font-weight: 300;
+              margin-top: 0.1rem;
             }
             .price_num {
               font-size: 0.28rem;
@@ -227,23 +251,30 @@ export default {
       align-items: flex-start;
       .main_footer_total_top {
         display: flex;
+        align-items: flex-end;
         .total_text {
           font-size: 0.24rem;
           font-weight: 400;
           color: #333333;
+          padding-top: 0.11rem;
         }
         .total_sign {
           font-size: 0.2rem;
           color: #b80140;
+          margin-top: 0.18rem;
+          margin-left: 0.1rem;
         }
         .price {
           font-size: 0.2rem;
           font-weight: bold;
           color: #b80140;
+          margin-left: 0.1rem;
+          margin-top: 0.11rem;
         }
       }
       .main_footer_total_bottom {
         display: flex;
+        align-items: flex-end;
 
         .company_yh {
           font-size: 0.24rem;

src/modules/home/views/PayDetail.vue

 <template>
   <div class="main">
-    <!-- <commonheader :title="title" /> -->
+    <commonheader :title="title" />
     <div class="main_content">
       <div class="main_content_desc">1.打开支付宝扫码二维码支付，或长按保存二维码打开支付宝支付。</div>
       <div class="main_content_qdCode">
@@ -24,18 +24,10 @@
         复制链接在浏览器打开去支付
       </div>
       <div class="main_btn">
-        <van-button
-          class="main_btn_home"
-          round
-          @click="$router.push('/')"
-          v-if="isLastStep && status == 1"
+        <van-button class="main_btn_home" round @click="$router.push('/')" v-if="isLastStep && status == 1"
           >首页</van-button
         >
-        <van-button
-          round
-          class="main_btn_home"
-          @click="$router.go(0)"
-          v-if="!isLastStep  && status == 1"
+        <van-button round class="main_btn_home" @click="$router.go(0)" v-if="!isLastStep && status == 1"
           >继续报名</van-button
         >
         <van-button round class="main_btn_order" @click="$router.push('/MyOrder')">我的订单</van-button>
@@ -52,7 +44,7 @@ import Clipboard from 'clipboard'
 import { Toast } from 'vant'
 import { getPayStatus } from '../api'
 
-// import commonheader from '../components/Commonheader.vue'
+import commonheader from '../components/Commonheader.vue'
 export default {
   props: {
     data: {
@@ -63,7 +55,8 @@ export default {
     }
   },
   components: {
-    QrcodeVue
+    QrcodeVue,
+    commonheader
   },
   data() {
     return {
@@ -161,18 +154,18 @@ export default {
 .main {
   background: #f7f7f7;
   .main_content {
-    padding: 0.57rem 0.58rem 0 0.46rem;
     background: #fff;
     display: flex;
     align-items: center;
     flex-direction: column;
+    margin: 1.2rem 0.3rem 0.64rem 0.3rem;
 
     .main_content_desc {
-      // width: 5.56rem;
       font-size: 0.3rem;
       font-weight: 400;
       color: #333333;
       margin-top: 0.57rem;
+      margin: 0.57rem 0.3rem 0 0.3rem;
     }
     .main_content_qdCode {
       width: 2.88rem;
@@ -193,14 +186,22 @@ export default {
       }
     }
     .main_btn {
+      margin-top: 1.12rem;
+      margin-bottom: 0.64rem;
       display: flex;
       justify-content: center;
       .main_btn_home {
         background: #b80140;
         color: #fff;
+        font-size: 0.3rem;
+        font-weight: 400;
       }
       .main_btn_order {
         margin-left: 0.2rem;
+        background: #f5f5f5;
+        font-size: 0.3rem;
+        font-weight: 400;
+        color: #333333;
       }
     }
     #value {

src/modules/home/views/PersonalCenter.vue

@@ -38,7 +38,6 @@ export default {
 <style lang="scss" scoped>
 .main {
   .main_content {
-    height: calc(100vh - 46px);
     margin-top: 0.46rem;
     padding: 0.51rem 0.3rem 0 0.3rem;
     background-color: #f7f7f7;

src/modules/home/views/SignMainPage copy.vue

-<template>
-  <div class="main">
-    <commonheader @back="handlePrev" :callBack="true" :title="title" />
-    <!-- 展示 -->
-    <template v-if="Object.keys(stepList).length">
-      <img-show
-        :stepList="stepList"
-        :data="setpItem"
-        @prev="handlePrev"
-        @next="handleNext"
-        v-if="setpItem.type === 1"
-      />
-      <!-- 表单 -->
-      <sign-form
-        :myInfoList="myInfoList"
-        :personalInfo="detailList.info"
-        :data="setpItem"
-        :stepList="stepList"
-        :stepIndex="stepIndex"
-        @prev="handlePrev"
-        @next="handleNext"
-        v-if="setpItem.type === 2"
-        :isShowSkip="isShowSkip"
-        :detailList="detailList"
-        :order_join_rand="$route.query.join_rand"
-      />
-    </template>
-  </div>
-</template>
-
-<script>
-import SignForm from '../components/SignForm.vue'
-import ImgShow from '../components/ImgShow.vue'
-import Commonheader from '../components/Commonheader.vue'
-import { getActivityDetail } from '../api'
-
-export default {
-  components: { SignForm, ImgShow, Commonheader },
-  data() {
-    return {
-      title: '报名主页面',
-      stepIndex: 0,
-      isShowSkip: '',
-      stepList: [],
-      detailList: {
-        info: {}
-      }
-    }
-  },
-  computed: {
-    setpItem() {
-      if (this.$route.query.stepIndex) {
-        return this.stepList[this.$route.query.stepIndex]
-      } else {
-        return this.stepList[this.stepIndex]
-      }
-    }
-  },
-  mounted() {
-    this.activity_detail_id = this.$route.query.activity_detail_id
-    this.getActivityDetail()
-  },
-  methods: {
-    // 获取活动详情
-    getActivityDetail() {
-      const params = { id: this.$route.query.id || this.$route.query.activityId }
-      getActivityDetail(params).then(res => {
-        this.detailList = res.data
-        this.myInfoList = res.data.other_fill_in.list
-        // console.log(this.detailList.activity.details.slice(-1), '0000')
-        if (this.detailList.other_fill_in.need_fill_in_status) {
-          this.detailList.activity.details.forEach(item => {
-            if (item.id === this.detailList.other_fill_in.need_fill_in_id) {
-              const details = this.detailList.activity.details.indexOf(item)
-              console.log(details, '111')
-              if (details === 0) {
-                this.stepList = res.data.activity.details
-                console.log(this.stepList, '1')
-              } else if (details > 0) {
-                console.log(details, 'details')
-                this.stepList = this.detailList.activity.details.splice(details)
-                console.log(this.stepList, '2')
-              }
-            }
-          })
-        } else {
-          if (this.detailList.self_fill_in.need_fill_in_status) {
-            this.detailList.activity.details.forEach(item => {
-              if (item.id === this.detailList.self_fill_in.need_fill_in_id) {
-                const details = this.detailList.activity.details.indexOf(item)
-                console.log(details, '222')
-
-                if (details === 0) {
-                  this.stepList = res.data.activity.details
-                  console.log(this.stepList, '3')
-                } else if (details > 0) {
-                  console.log(details, 'details1')
-                  this.stepList = this.detailList.activity.details.splice(details)
-                  console.log(this.stepList, '4')
-                }
-              }
-            })
-          } else {
-            this.stepList = res.data.activity.details
-            console.log(this.stepList, '5')
-          }
-        }
-        const newIndex = this.stepList.findIndex(item => {
-          return item.id === this.$route.query.activity_detail_id
-        })
-        if (this.$route.query.stepIndex) {
-          this.stepIndex = parseInt(this.$route.query.stepIndex)
-        } else {
-          this.stepIndex = newIndex < 0 ? 0 : newIndex
-        }
-      })
-    },
-    handlePrev() {
-      if (this.stepIndex <= 0) {
-        this.$router.push('/')
-      } else {
-        this.stepIndex--
-      }
-    },
-    handleNext() {
-      this.stepIndex++
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped></style>

src/modules/home/views/SignMainPage.vue

@@ -162,7 +162,6 @@ export default {
         }
         return a
       }, [])
-      console.log(this.stepList)
       this.stepList.map((item, index) => {
         item.num = index + 1
         return item
@@ -180,11 +179,10 @@ export default {
         this.stepIndex++
         if (data) {
           this.setpItem.payData = data
+          console.log(this.setpItem)
         }
       }
     }
   }
 }
 </script>
-
-<style lang="scss" scoped></style>