feat: 代码迁移

This commit is contained in:
2026-07-28 10:11:03 +08:00
parent 78bca3b3d5
commit 3cd6ef665b
7 changed files with 205 additions and 57 deletions
+4 -4
View File
@@ -7,10 +7,10 @@ import JoyfulSelectionProductList from '@/view/joyful-selection/products/index.v
import JoyfulSelectionProductDetail from '@/view/joyful-selection/product-detail/index.vue'
import JoyfulSelectionCart from '@/view/joyful-selection/cart/index.vue'
import JoyfulSelectionCartEdit from '@/view/joyful-selection/cart/edit/index.vue'
import JoyfulSelectionCheckout from '@/view/joyful-selection/cart/checkout/index.vue'
import JoyfulSelectionPayment from '@/view/joyful-selection/cart/payment/index.vue'
import JoyfulSelectionPaymentConfirm from '@/view/joyful-selection/cart/payment-confirm/index.vue'
import JoyfulSelectionPaymentSuccess from '@/view/joyful-selection/cart/payment-success/index.vue'
import JoyfulSelectionCheckout from '@/view/joyful-selection/order/checkout/index.vue'
import JoyfulSelectionPayment from '@/view/joyful-selection/order/payment/index.vue'
import JoyfulSelectionPaymentConfirm from '@/view/joyful-selection/order/payment-confirm/index.vue'
import JoyfulSelectionPaymentSuccess from '@/view/joyful-selection/order/payment-success/index.vue'
import JoyfulSelectionAddressList from '@/view/joyful-selection/address/index.vue'
import JoyfulSelectionAddressEdit from '@/view/joyful-selection/address/edit/index.vue'
import JoyfulSelectionOrders from '@/view/joyful-selection/profile/orders/index.vue'
@@ -1,53 +0,0 @@
<template>
<main class="confirm-page">
<van-nav-bar title="确认支付" left-arrow @click-left="$router.back()" />
<section>
<p>支付金额</p>
<b>¥ {{ amountText }}</b>
</section>
<van-popup v-model="show" round position="bottom" :style="{ height: '42%' }" :close-on-click-overlay="false">
<article>
<h2>确认支付</h2>
<p>您即将使用{{ payTypeText }}</p>
<p>支付金额 <b>¥{{ amountText }}</b></p>
<div>
<van-button round @click="$router.back()">取消</van-button>
<van-button round type="danger" @click="$router.push({ path: '/joyful-selection/payment-success', query: { payType: $route.query.payType } })">确认支付</van-button>
</div>
</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()
}
}
</script>
<style scoped>
.confirm-page{min-height:100vh;padding-top:46px;background:#f7f7f7;text-align:center}.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)}.confirm-page section{margin:15px;padding:30px;border-radius:12px;background:#fff}.confirm-page section b{font-size:26px}.confirm-page article{padding:20px;text-align:center}.confirm-page article p{color:#666;font-size:13px}.confirm-page article div{display:flex;gap:10px;margin-top:40px}.confirm-page article .van-button{flex:1}.confirm-page ::v-deep .van-button--danger{background:#ff5b20;border-color:#ff5b20}
</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>