feat: 代码迁移
This commit is contained in:
@@ -0,0 +1,393 @@
|
||||
<template>
|
||||
<main class="checkout-page">
|
||||
<van-nav-bar title="确认订单" left-arrow @click-left="$router.back()" />
|
||||
|
||||
<section class="address-card" @click="$router.push({ path: '/joyful-selection/address', query: { from: 'checkout' } })">
|
||||
<van-icon class="address-icon" name="location" />
|
||||
<div class="address-info">
|
||||
<h3>收货人：{{ chosenAddress.name }} <span>{{ maskTel(chosenAddress.tel) }}</span></h3>
|
||||
<p>{{ chosenAddress.province }}{{ chosenAddress.city }}{{ chosenAddress.county }}</p>
|
||||
<p>{{ chosenAddress.addressDetail }}</p>
|
||||
</div>
|
||||
<van-icon class="arrow-icon" name="arrow" />
|
||||
</section>
|
||||
|
||||
<section class="delivery-card">
|
||||
<div class="delivery-row">
|
||||
<span>配送方式</span>
|
||||
<b>快速配送 免邮</b>
|
||||
</div>
|
||||
<div class="delivery-row delivery-date">
|
||||
<span>预计送达：</span>
|
||||
<em>5月20日（周二）</em>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="goods-card">
|
||||
<article v-for="item in visibleGoods" :key="item.cartId || item.id" class="order-item">
|
||||
<van-image class="order-thumb" :src="item.image" fit="cover" />
|
||||
<div class="order-info">
|
||||
<h3>{{ item.name }}</h3>
|
||||
<p>¥{{ item.price }}</p>
|
||||
</div>
|
||||
<span class="order-count">x{{ item.count || 1 }}</span>
|
||||
</article>
|
||||
<button v-if="showLoadMore" type="button" class="load-more" @click="showAllGoods = true">
|
||||
加载更多
|
||||
<van-icon name="arrow-down" />
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section class="remark-card">
|
||||
<span>订单备注</span>
|
||||
<input v-model="remark" type="text" placeholder="选填，给商家留言" />
|
||||
</section>
|
||||
|
||||
<section class="amount-card">
|
||||
<p><span>商品金额</span><b>¥{{ formatYuan(goodsAmount) }}</b></p>
|
||||
<p><span>运费</span><b>¥0.00</b></p>
|
||||
<p><span>优惠券</span><b class="muted">选择优惠券</b></p>
|
||||
</section>
|
||||
|
||||
<van-submit-bar :price="goodsAmount" button-text="提交订单" @submit="onSubmit" />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapState } from 'pinia'
|
||||
import { useCartStore } from '@/store/cart'
|
||||
import { readAddresses, readChosenAddressId } from '../../address/address-data'
|
||||
import { createOrderNo, savePaymentInfo } from '../payment/payment-data'
|
||||
|
||||
const CHECKOUT_ITEMS_KEY = 'joyful-selection-checkout-items'
|
||||
|
||||
export default {
|
||||
name: 'JoyfulSelectionCheckout',
|
||||
data: () => ({
|
||||
remark: '',
|
||||
goods: [],
|
||||
showAllGoods: false,
|
||||
chosenAddress: {}
|
||||
}),
|
||||
computed: {
|
||||
...mapState(useCartStore, ['items']),
|
||||
visibleGoods() {
|
||||
return this.showAllGoods ? this.goods : this.goods.slice(0, 3)
|
||||
},
|
||||
showLoadMore() {
|
||||
return !this.showAllGoods && this.goods.length > 3
|
||||
},
|
||||
goodsAmount() {
|
||||
return this.goods.reduce((total, item) => total + Math.round(Number(item.price) * 100) * Number(item.count || 1), 0)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadCart()
|
||||
this.goods = this.getCheckoutGoods()
|
||||
this.loadAddress()
|
||||
},
|
||||
activated() {
|
||||
this.loadAddress()
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useCartStore, ['loadCart']),
|
||||
getCheckoutGoods() {
|
||||
const storedItems = this.readCheckoutItems()
|
||||
|
||||
if (storedItems.length) {
|
||||
return storedItems
|
||||
}
|
||||
|
||||
if (this.$route.query.source === 'cart') {
|
||||
return this.items
|
||||
}
|
||||
|
||||
return []
|
||||
},
|
||||
readCheckoutItems() {
|
||||
try {
|
||||
return JSON.parse(sessionStorage.getItem(CHECKOUT_ITEMS_KEY) || '[]')
|
||||
} catch (error) {
|
||||
return []
|
||||
}
|
||||
},
|
||||
formatYuan(price) {
|
||||
return (Number(price || 0) / 100).toFixed(2)
|
||||
},
|
||||
loadAddress() {
|
||||
const addresses = readAddresses()
|
||||
const chosenId = readChosenAddressId()
|
||||
this.chosenAddress = addresses.find(item => item.id === chosenId) || addresses[0] || {}
|
||||
},
|
||||
maskTel(tel = '') {
|
||||
return tel.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
|
||||
},
|
||||
onSubmit() {
|
||||
savePaymentInfo({
|
||||
orderNo: createOrderNo(),
|
||||
amount: this.goodsAmount,
|
||||
receiverName: this.chosenAddress.name || '',
|
||||
receiverTel: this.maskTel(this.chosenAddress.tel || ''),
|
||||
goods: this.goods
|
||||
})
|
||||
this.$router.push('/joyful-selection/payment')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.checkout-page {
|
||||
min-height: 100vh;
|
||||
padding: 46px 0 62px;
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
.checkout-page ::v-deep .van-nav-bar {
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
|
||||
}
|
||||
|
||||
.address-card,
|
||||
.delivery-card,
|
||||
.goods-card,
|
||||
.remark-card,
|
||||
.amount-card {
|
||||
margin: 10px 12px 0;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.address-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 14px 12px;
|
||||
}
|
||||
|
||||
.address-icon {
|
||||
flex: none;
|
||||
margin-right: 10px;
|
||||
color: #ff5b20;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.address-info {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.address-info h3 {
|
||||
margin: 0 0 5px;
|
||||
color: #222;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.address-info h3 span {
|
||||
margin-left: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.address-info p {
|
||||
overflow: hidden;
|
||||
margin: 2px 0 0;
|
||||
color: #555;
|
||||
font-size: 12px;
|
||||
line-height: 17px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
flex: none;
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.delivery-card {
|
||||
padding: 13px 14px;
|
||||
}
|
||||
|
||||
.delivery-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #333;
|
||||
font-size: 13px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.delivery-row b {
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.delivery-date {
|
||||
justify-content: flex-start;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.delivery-date em {
|
||||
margin-left: 8px;
|
||||
color: #999;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.goods-card {
|
||||
padding: 2px 14px;
|
||||
}
|
||||
|
||||
.order-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 86px;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.order-item + .order-item {
|
||||
border-top: 1px solid #f4f4f4;
|
||||
}
|
||||
|
||||
.load-more {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
border: 0;
|
||||
border-top: 1px solid #f4f4f4;
|
||||
color: #ff5b20;
|
||||
font-size: 13px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.load-more .van-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.order-thumb {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
flex: none;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
.order-info {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.order-info h3 {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
margin: 0 0 8px;
|
||||
color: #222;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.order-info p {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.order-count {
|
||||
flex: none;
|
||||
color: #222;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.remark-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 46px;
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
.remark-card span {
|
||||
flex: none;
|
||||
color: #333;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.remark-card input {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
margin-left: 16px;
|
||||
border: 0;
|
||||
outline: none;
|
||||
color: #333;
|
||||
font-size: 13px;
|
||||
text-align: right;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.remark-card input::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.amount-card {
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.amount-card p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 0;
|
||||
color: #777;
|
||||
font-size: 13px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.amount-card b {
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.amount-card .muted {
|
||||
color: #777;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.checkout-page ::v-deep .van-submit-bar {
|
||||
bottom: 0;
|
||||
height: 58px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.checkout-page ::v-deep .van-submit-bar__bar {
|
||||
height: 58px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.checkout-page ::v-deep .van-submit-bar__price {
|
||||
color: #ff5b20;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.checkout-page ::v-deep .van-submit-bar__button {
|
||||
width: 112px;
|
||||
height: 40px;
|
||||
border-radius: 22px;
|
||||
background: #ff5b20;
|
||||
border-color: #ff5b20;
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<main class="confirm-page">
|
||||
<van-nav-bar title="确认支付" left-arrow @click-left="$router.back()" />
|
||||
|
||||
<section class="amount-card">
|
||||
<p>支付金额</p>
|
||||
<b>¥ {{ amountText }}</b>
|
||||
<span>{{ payTypeText }}</span>
|
||||
</section>
|
||||
|
||||
<van-popup v-model="show" class="pay-popup" round position="bottom" :close-on-click-overlay="false">
|
||||
<article class="pay-panel">
|
||||
<header>
|
||||
<van-icon name="cross" @click="$router.back()" />
|
||||
<h2>确认支付</h2>
|
||||
</header>
|
||||
<section class="pay-summary">
|
||||
<p>支付金额</p>
|
||||
<b>¥ {{ amountText }}</b>
|
||||
</section>
|
||||
<div class="pay-info">
|
||||
<p><span>支付方式</span><b>{{ payTypeText }}</b></p>
|
||||
<p><span>订单编号</span><b>{{ paymentInfo.orderNo || '-' }}</b></p>
|
||||
</div>
|
||||
<footer>
|
||||
<van-button round @click="$router.back()">取消</van-button>
|
||||
<van-button round type="danger" @click="confirmPay">确认支付</van-button>
|
||||
</footer>
|
||||
</article>
|
||||
</van-popup>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { readPaymentInfo, formatYuan } from '../payment/payment-data'
|
||||
|
||||
export default {
|
||||
name: 'JoyfulSelectionPaymentConfirm',
|
||||
data: () => ({
|
||||
show: true,
|
||||
paymentInfo: {}
|
||||
}),
|
||||
computed: {
|
||||
amountText() {
|
||||
return formatYuan(this.paymentInfo.amount)
|
||||
},
|
||||
payTypeText() {
|
||||
const map = {
|
||||
points: '积分支付',
|
||||
wechat: '微信支付',
|
||||
alipay: '支付宝支付'
|
||||
}
|
||||
|
||||
return map[this.$route.query.payType] || '积分支付'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.paymentInfo = readPaymentInfo()
|
||||
},
|
||||
methods: {
|
||||
confirmPay() {
|
||||
this.$router.push({ path: '/joyful-selection/payment-success', query: { payType: this.$route.query.payType } })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.confirm-page {
|
||||
min-height: 100vh;
|
||||
padding: 46px 12px 0;
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
.confirm-page ::v-deep .van-nav-bar {
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
|
||||
}
|
||||
|
||||
.amount-card {
|
||||
margin-top: 12px;
|
||||
padding: 28px 16px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.amount-card p {
|
||||
margin: 0 0 13px;
|
||||
color: #555;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.amount-card b {
|
||||
display: block;
|
||||
color: #222;
|
||||
font-size: 28px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.amount-card span {
|
||||
display: block;
|
||||
margin-top: 12px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pay-popup {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pay-panel {
|
||||
padding: 0 18px 18px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.pay-panel header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 52px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pay-panel header h2 {
|
||||
margin: 0;
|
||||
color: #222;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pay-panel header .van-icon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #999;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.pay-summary {
|
||||
padding: 18px 0 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pay-summary p {
|
||||
margin: 0 0 12px;
|
||||
color: #777;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.pay-summary b {
|
||||
color: #222;
|
||||
font-size: 30px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.pay-info {
|
||||
padding: 10px 0;
|
||||
border-top: 1px solid #f3f3f3;
|
||||
border-bottom: 1px solid #f3f3f3;
|
||||
}
|
||||
|
||||
.pay-info p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 0;
|
||||
color: #777;
|
||||
font-size: 13px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.pay-info b {
|
||||
max-width: 68%;
|
||||
overflow: hidden;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
text-align: right;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pay-panel footer {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.pay-panel footer .van-button {
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.confirm-page ::v-deep .van-button--danger {
|
||||
background: #ff5b20;
|
||||
border-color: #ff5b20;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<main class="success-page">
|
||||
<van-icon name="checked" color="#20bd58" size="68" />
|
||||
<h2>支付成功</h2>
|
||||
<b>¥ {{ amountText }}</b>
|
||||
<section>
|
||||
<p>订单编号 <span>{{ paymentInfo.orderNo || '-' }}</span></p>
|
||||
<p>支付方式 <span>{{ payTypeText }}</span></p>
|
||||
<p>支付时间 <span>{{ paidAt }}</span></p>
|
||||
</section>
|
||||
<div>
|
||||
<van-button round @click="$router.push('/joyful-selection/orders')">查看订单</van-button>
|
||||
<van-button round type="danger" @click="$router.push('/joyful-selection/home')">继续购物</van-button>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { readPaymentInfo, formatYuan } from '../payment/payment-data'
|
||||
|
||||
export default {
|
||||
name: 'JoyfulSelectionPaymentSuccess',
|
||||
data: () => ({
|
||||
paymentInfo: {},
|
||||
paidAt: ''
|
||||
}),
|
||||
computed: {
|
||||
amountText() {
|
||||
return formatYuan(this.paymentInfo.amount)
|
||||
},
|
||||
payTypeText() {
|
||||
const map = {
|
||||
points: '积分支付',
|
||||
wechat: '微信支付',
|
||||
alipay: '支付宝支付'
|
||||
}
|
||||
|
||||
return map[this.$route.query.payType] || '积分支付'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.paymentInfo = readPaymentInfo()
|
||||
this.paidAt = this.formatTime(new Date())
|
||||
},
|
||||
methods: {
|
||||
formatTime(date) {
|
||||
const pad = value => String(value).padStart(2, '0')
|
||||
|
||||
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.success-page{min-height:100vh;padding:80px 30px;text-align:center;background:#fff}.success-page h2{margin:15px 0 10px;font-size:17px}.success-page>b{font-size:22px}.success-page section{margin-top:42px;text-align:left;color:#888;font-size:12px}.success-page section p{display:flex;justify-content:space-between}.success-page section span{color:#333}.success-page>div{display:flex;gap:10px;margin-top:35px}.success-page .van-button{flex:1}.success-page .van-button--danger{background:#ff5b20;border-color:#ff5b20}
|
||||
</style>
|
||||
@@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<main class="payment-page">
|
||||
<van-nav-bar title="确认支付" left-arrow @click-left="$router.back()" />
|
||||
|
||||
<section class="amount-card">
|
||||
<p>支付金额</p>
|
||||
<b>¥ {{ amountText }}</b>
|
||||
</section>
|
||||
|
||||
<section class="info-card">
|
||||
<h3>订单信息</h3>
|
||||
<p><span>订单编号</span><b>{{ paymentInfo.orderNo || '-' }}</b></p>
|
||||
<p><span>收货人</span><b>{{ receiverText }}</b></p>
|
||||
</section>
|
||||
|
||||
<section class="pay-card">
|
||||
<h3>支付方式</h3>
|
||||
<van-radio-group v-model="payType">
|
||||
<van-cell
|
||||
v-for="item in payMethods"
|
||||
:key="item.name"
|
||||
clickable
|
||||
@click="payType = item.name"
|
||||
>
|
||||
<template #title>
|
||||
<div class="pay-method">
|
||||
<span class="pay-icon" :class="item.name">
|
||||
<van-icon :name="item.icon" />
|
||||
</span>
|
||||
<b>{{ item.label }}</b>
|
||||
</div>
|
||||
</template>
|
||||
<template #right-icon>
|
||||
<van-radio :name="item.name" checked-color="#ff5b20" />
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-radio-group>
|
||||
</section>
|
||||
|
||||
<van-button class="pay-button" round block @click="onPay">立即支付 ¥{{ amountText }}</van-button>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { readPaymentInfo, formatYuan } from './payment-data'
|
||||
|
||||
export default {
|
||||
name: 'JoyfulSelectionPayment',
|
||||
data: () => ({
|
||||
payType: 'points',
|
||||
paymentInfo: {},
|
||||
pointsBalance: '32.00'
|
||||
}),
|
||||
computed: {
|
||||
amountText() {
|
||||
return formatYuan(this.paymentInfo.amount)
|
||||
},
|
||||
receiverText() {
|
||||
const name = this.paymentInfo.receiverName || '-'
|
||||
const tel = this.paymentInfo.receiverTel || ''
|
||||
|
||||
return tel ? `${name} ${tel}` : name
|
||||
},
|
||||
payMethods() {
|
||||
return [
|
||||
{ name: 'points', label: `积分支付（余额：¥${this.pointsBalance}）`, icon: 'gold-coin-o' },
|
||||
{ name: 'wechat', label: '微信支付', icon: 'wechat-pay' },
|
||||
{ name: 'alipay', label: '支付宝支付', icon: 'alipay' }
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.paymentInfo = readPaymentInfo()
|
||||
},
|
||||
methods: {
|
||||
onPay() {
|
||||
this.$router.push({ path: '/joyful-selection/payment-confirm', query: { payType: this.payType } })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.payment-page {
|
||||
min-height: 100vh;
|
||||
padding: 46px 8px 84px;
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
.payment-page ::v-deep .van-nav-bar {
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
|
||||
}
|
||||
|
||||
.amount-card,
|
||||
.info-card,
|
||||
.pay-card {
|
||||
margin-top: 10px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.amount-card {
|
||||
padding: 24px 16px 27px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.amount-card p {
|
||||
margin: 0 0 14px;
|
||||
color: #333;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.amount-card b {
|
||||
color: #222;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
padding: 14px 12px 12px;
|
||||
}
|
||||
|
||||
.info-card h3,
|
||||
.pay-card h3 {
|
||||
margin: 0 0 12px;
|
||||
color: #222;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.info-card p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 0;
|
||||
color: #777;
|
||||
font-size: 12px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.info-card b {
|
||||
color: #333;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.pay-card {
|
||||
overflow: hidden;
|
||||
padding: 14px 0 4px;
|
||||
}
|
||||
|
||||
.pay-card h3 {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.pay-card ::v-deep .van-cell {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.pay-card ::v-deep .van-cell::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pay-method {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pay-method b {
|
||||
color: #333;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.pay-icon {
|
||||
display: flex;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 8px;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pay-icon .van-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.pay-icon.points {
|
||||
background: #ffb000;
|
||||
}
|
||||
|
||||
.pay-icon.wechat {
|
||||
background: #18c764;
|
||||
}
|
||||
|
||||
.pay-icon.alipay {
|
||||
background: #1989fa;
|
||||
}
|
||||
|
||||
.pay-button {
|
||||
position: fixed;
|
||||
right: 8px;
|
||||
bottom: 18px;
|
||||
left: 8px;
|
||||
width: calc(100% - 16px);
|
||||
height: 44px;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
background: #ff5b20;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,23 @@
|
||||
const PAYMENT_KEY = 'joyful-selection-payment-info'
|
||||
|
||||
export const createOrderNo = () => {
|
||||
const now = new Date()
|
||||
const pad = value => String(value).padStart(2, '0')
|
||||
const timestamp = `${now.getFullYear()}${pad(now.getMonth() + 1)}${pad(now.getDate())}${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`
|
||||
|
||||
return `YX${timestamp}`
|
||||
}
|
||||
|
||||
export const savePaymentInfo = info => {
|
||||
sessionStorage.setItem(PAYMENT_KEY, JSON.stringify(info))
|
||||
}
|
||||
|
||||
export const readPaymentInfo = () => {
|
||||
try {
|
||||
return JSON.parse(sessionStorage.getItem(PAYMENT_KEY) || '{}')
|
||||
} catch (error) {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
|
||||
export const formatYuan = price => (Number(price || 0) / 100).toFixed(2)
|
||||
Reference in New Issue
Block a user