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