提交 105693cf authored 作者: matian's avatar matian

代码提交

上级 cb266d0f
......@@ -2,3 +2,6 @@
margin: 0;
padding: 0;
}
body {
background: #f7f7f7;
}
......@@ -4,6 +4,8 @@
<!-- 展示页面 -->
<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>
......@@ -42,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;
......
......@@ -23,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'">
......@@ -38,6 +39,7 @@
</van-radio-group>
</template>
</van-field>
<div class="line"></div>
</div>
<!-- 选择器 -->
......@@ -60,7 +62,9 @@
@cancel="showPicker = false"
/>
</van-popup>
<div class="line"></div>
</div>
<!-- 时间 -->
<div v-if="item.type === 'datetime'">
<van-field
......@@ -76,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>
......@@ -84,21 +89,31 @@
<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">
</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>
......@@ -214,24 +229,24 @@ export default {
<style lang="scss" scoped>
.main {
background-color: #f7f7f7;
.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;
......@@ -250,33 +265,41 @@ 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;
}
}
}
......@@ -287,17 +310,4 @@ export default {
overflow: hidden;
}
}
// ::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;
// }
</style>
......@@ -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>
......@@ -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,32 +251,42 @@ export default {
align-items: flex-start;
.main_footer_total_top {
display: flex;
margin-top: 0.1rem;
.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;
margin-top: 0.11rem;
.company_yh {
font-size: 0.24rem;
font-weight: 400;
color: #b80140;
// margin-top: 0.11rem;
}
.company_sign {
font-size: 0.2rem;
color: #b80140;
// margin-top: 0.18rem;
// margin-left: 0.1rem;
}
}
}
......
......@@ -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;
......
<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>
......@@ -186,5 +186,3 @@ export default {
}
}
</script>
<style lang="scss" scoped></style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论