panqihua
2 years ago
parent
b8673a1d1e
commit
fa6fa0d0f3
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 611 B |
@ -0,0 +1,293 @@ |
|||||||
|
<template> |
||||||
|
<div class="app-container root"> |
||||||
|
<el-row :gutter="20" type="flex"> |
||||||
|
<el-col :span="4" v-for="(item,index) in vipList" :key="index"> |
||||||
|
<div @click="check('vipList',index)"> |
||||||
|
<el-card class="vip" :class="{active:item.active}"> |
||||||
|
<div>￥{{ item.price }}</div> |
||||||
|
<div>{{ item.time }}</div> |
||||||
|
</el-card> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<div class="tip mt10">审核通过后开始计算时长</div> |
||||||
|
<div class="title mt10 mb10">优惠选择</div> |
||||||
|
<el-row type="flex" class="discount-p"> |
||||||
|
<el-col class="discount mt10" v-for="item in 4" :key="item"> |
||||||
|
<div class="top"> |
||||||
|
<div class="left"> |
||||||
|
<div class="mt10"> |
||||||
|
<span class="unit">￥</span> |
||||||
|
<span class="price">10</span> |
||||||
|
</div> |
||||||
|
<div class="use mb10">满300使用</div> |
||||||
|
</div> |
||||||
|
<div class="right"> |
||||||
|
<div class="tag mt">新人优惠券</div> |
||||||
|
<div class="mt20"><span class="discount-coupon">满减券</span> <span class="tag ml10">全场通用券</span></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="down mt20 mb20"> |
||||||
|
<div>未使用前 永久有效</div> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<div class="title mt10 mb10">支付方式</div> |
||||||
|
<div> |
||||||
|
<el-row v-for="(item,index) in payMethod" :key="index" type="flex" class="method"> |
||||||
|
<el-col :span="1"> |
||||||
|
<svg-icon :icon-class="item.icon"/> |
||||||
|
</el-col> |
||||||
|
|
||||||
|
<el-col :span="4">{{ item.name }}</el-col> |
||||||
|
<el-col :span="3" :offset="2"> |
||||||
|
<i class="el-icon-circle-check active" v-if="item.active"></i> |
||||||
|
<div class="inactive" @click="check('payMethod',index)" v-else></div> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
<div class="text-center"> |
||||||
|
<el-button @click="$emit('back')">上一步</el-button> |
||||||
|
<el-button type="primary" @click="open=true">立即支付</el-button> |
||||||
|
</div> |
||||||
|
|
||||||
|
<el-dialog title="支付" :visible.sync="open"> |
||||||
|
<template v-if="payMethod.find(item=>item.active).type"> |
||||||
|
<el-row> |
||||||
|
<el-col :span="8" :offset="3"> |
||||||
|
<div class="bank-title">银行卡转账流程</div> |
||||||
|
<div class="mt20">第一步：对公汇款账户</div> |
||||||
|
<div class="mt20">名称：北京的当石科技有限公司</div> |
||||||
|
<div class="mt20">开户银行：招商银行北京分行三里屯支行</div> |
||||||
|
<div class="mt20">银行账号：1110 1354 8610 601</div> |
||||||
|
<div class="mt20">汇款金额：¥296.65</div> |
||||||
|
<div class="mt20">汇款备注：订单号fcaspi2crho1ds4</div> |
||||||
|
<div class="mt20 red">请在对公汇款时务必备注订单号</div> |
||||||
|
<el-button type="primary" class="mt20">一键复制</el-button> |
||||||
|
</el-col> |
||||||
|
<el-col :span="12"> |
||||||
|
<div class="mt20">第二步： 升级帐号</div> |
||||||
|
<div class="mt10"> |
||||||
|
转账完成后请点击页面中的「已完成支付」，我们在收到汇款24小时内会为您自动升级账号（周末、法定假日可能有延时） |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<div class="text-center"> |
||||||
|
<el-button type="primary" @click="$emit('success')">已完成支付</el-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<template v-else> |
||||||
|
<div class="text-center">￥{{ this.vipList.find(item => item.active).price }}</div> |
||||||
|
<div class="text-center"> |
||||||
|
<img src="http://www.dummyimage.com/100x100" class="mt20"/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'pay.vue', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
open: false, |
||||||
|
vipList: [ |
||||||
|
{ price: 300, time: '1年', active: true }, |
||||||
|
{ price: 556, time: '2年', active: false }, |
||||||
|
{ price: 899, time: '4年', active: false } |
||||||
|
], |
||||||
|
payMethod: [{ |
||||||
|
icon: 'wechat', |
||||||
|
name: '微信支付', |
||||||
|
active: true |
||||||
|
}, { |
||||||
|
icon: 'alipay', |
||||||
|
name: '支付宝支付', |
||||||
|
active: false |
||||||
|
}, { |
||||||
|
icon: 'bank-card', |
||||||
|
name: '招商银行支付', |
||||||
|
type: 'bank', |
||||||
|
active: false |
||||||
|
}] |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
check(key, index) { |
||||||
|
|
||||||
|
let method = this[key].map(item => { |
||||||
|
item.active = false |
||||||
|
return item |
||||||
|
}) |
||||||
|
method[index].active = true |
||||||
|
|
||||||
|
this[key].splice(0, this[key].length, ...method) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
|
||||||
|
$discount-width: 40%; |
||||||
|
$discount-border: 1px dashed rgba(0, 0, 0, 0.5); |
||||||
|
$icon-size: 20px; |
||||||
|
|
||||||
|
.red { |
||||||
|
color: red; |
||||||
|
} |
||||||
|
|
||||||
|
.bank-title { |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.root { |
||||||
|
padding: 0 10%; |
||||||
|
} |
||||||
|
|
||||||
|
.method { |
||||||
|
font-size: $icon-size; |
||||||
|
|
||||||
|
div { |
||||||
|
.active { |
||||||
|
color: blue; |
||||||
|
font-size: #{$icon-size + 2px}; |
||||||
|
} |
||||||
|
|
||||||
|
.inactive { |
||||||
|
width: $icon-size; |
||||||
|
height: $icon-size; |
||||||
|
border: 2px solid rgba(0, 0, 0, 0.5); |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
div:first-child { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.method:not(:first-child) { |
||||||
|
.inactive { |
||||||
|
margin-left: 2px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.discount-p { |
||||||
|
flex-wrap: wrap; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.discount:not(:nth-child(3n+1)) { |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.discount { |
||||||
|
flex-basis: calc(100% / 3 - 20px); |
||||||
|
border-radius: 6px; |
||||||
|
background-color: rgba(239, 239, 239, 1); |
||||||
|
text-align: center; |
||||||
|
border: 1px solid rgba(252, 202, 0, 1); |
||||||
|
|
||||||
|
|
||||||
|
& > .top { |
||||||
|
display: flex; |
||||||
|
border-bottom: $discount-border; |
||||||
|
|
||||||
|
|
||||||
|
& > .left { |
||||||
|
flex-basis: $discount-width; |
||||||
|
border-right: $discount-border; |
||||||
|
|
||||||
|
& > div { |
||||||
|
.unit { |
||||||
|
font-size: 12px; |
||||||
|
text-align: center; |
||||||
|
font-family: PingFangSC-regular; |
||||||
|
} |
||||||
|
|
||||||
|
.price { |
||||||
|
font-size: 40px; |
||||||
|
text-align: center; |
||||||
|
font-family: SFUIText-regular; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.use { |
||||||
|
color: rgba(68, 68, 68, 1); |
||||||
|
font-size: 12px; |
||||||
|
text-align: center; |
||||||
|
font-family: PingFangSC-regular; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
& > .right { |
||||||
|
padding-left: 20px; |
||||||
|
|
||||||
|
& > div { |
||||||
|
& > .discount-coupon { |
||||||
|
border-radius: 4px; |
||||||
|
background-color: rgba(94, 99, 102, 1); |
||||||
|
color: rgba(255, 255, 255, 1); |
||||||
|
font-size: 12px; |
||||||
|
text-align: center; |
||||||
|
font-family: Microsoft Yahei; |
||||||
|
padding: 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tag { |
||||||
|
color: rgba(68, 68, 68, 1); |
||||||
|
font-size: 13px; |
||||||
|
text-align: left; |
||||||
|
font-family: PingFangSC-regular; |
||||||
|
} |
||||||
|
|
||||||
|
.tag.mt { |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
& > .down { |
||||||
|
& > div { |
||||||
|
color: rgba(68, 68, 68, 1); |
||||||
|
font-size: 12px; |
||||||
|
text-align: center; |
||||||
|
font-family: PingFangSC-regular; |
||||||
|
width: $discount-width; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tip { |
||||||
|
color: rgba(108, 108, 108, 1); |
||||||
|
font-size: 14px; |
||||||
|
text-align: left; |
||||||
|
font-family: SourceHanSansSC-regular; |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
color: rgba(16, 16, 16, 1); |
||||||
|
font-size: 14px; |
||||||
|
text-align: left; |
||||||
|
font-family: SourceHanSansSC-regular; |
||||||
|
} |
||||||
|
|
||||||
|
.vip { |
||||||
|
color: rgba(16, 16, 16, 1); |
||||||
|
font-size: 14px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
text-align: center; |
||||||
|
padding: 80px 0; |
||||||
|
} |
||||||
|
|
||||||
|
.vip.active { |
||||||
|
background-color: rgba(22, 132, 252, 0.29); |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue