2025-10-21
商品详情加入购物车与创建订单 支付页面70%
This commit is contained in:
216
pages/home/pay.vue
Normal file
216
pages/home/pay.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<view class="pay-container">
|
||||
<scroll-view scroll-y="true" style="height: 100%;">
|
||||
<view class="scroll-container">
|
||||
<view class="box-bg">
|
||||
<view class="address">
|
||||
<view class="text">
|
||||
<image style="width: 40rpx;height: 40rpx;" src="/static/icon/Map pin2.png" mode=""></image>
|
||||
<view class="u-m-l-10">张三 | </view>
|
||||
<view class="u-m-l-10">浙江省 宁波市 海曙区</view>
|
||||
</view>
|
||||
<view class="right-icon">
|
||||
<image style="width: 100%;height: 100%;" src="/static/icon/Chevron right Menu.png" mode="">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="count-select u-p-l-10 u-p-r-10" v-for="item in dataInfo.items">
|
||||
<view class="pre-view">
|
||||
<u-image :src="getImageUrl(item.image_url)" height="100%" width="100%">
|
||||
<template v-slot:error>
|
||||
<view style="font-size: 24rpx;">暂无图片</view>
|
||||
</template>
|
||||
</u-image>
|
||||
</view>
|
||||
<view class="text">
|
||||
{{item.product_name}}
|
||||
融豆：{{item.rongdou_price}}
|
||||
积分：{{item.points_price}}
|
||||
数量X{{item.quantity}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="box-bg description u-m-t-20">
|
||||
<view class="item">
|
||||
<view class="title">
|
||||
订单编号
|
||||
</view>
|
||||
<view class="value">
|
||||
{{dataInfo.order_no}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="title">
|
||||
创建时间
|
||||
</view>
|
||||
<view class="value">
|
||||
{{dataInfo.created_at}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="box-bg pay-method u-m-t-20">
|
||||
<view class="title">
|
||||
支付方式
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="title">
|
||||
融豆
|
||||
</view>
|
||||
<view class="value">
|
||||
<u-checkbox v-model="checked" shape="circle" active-color="#305def"></u-checkbox>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="box-bottom">
|
||||
<view class="text">
|
||||
实际支付：1231
|
||||
</view>
|
||||
<view class="btn">
|
||||
<u-button>确认支付</u-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-toast ref="msgRef" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onMounted,
|
||||
ref
|
||||
} from 'vue';
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app'
|
||||
import {
|
||||
mallAPI
|
||||
} from '../../api/mall';
|
||||
import {
|
||||
getImageUrl
|
||||
} from '../../util/common.js'
|
||||
|
||||
const checked = ref(false)
|
||||
|
||||
const dataInfo = ref({})
|
||||
|
||||
const loadData = () => {
|
||||
mallAPI.getOrder(preOrderId.value).then(res => {
|
||||
dataInfo.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
const preOrderId = ref()
|
||||
|
||||
onLoad((val) => {
|
||||
preOrderId.value = val.preOrderId
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pay-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--Color, #E4ECFF);
|
||||
|
||||
.scroll-container {
|
||||
|
||||
.box-bg {
|
||||
background: #F5F8FF;
|
||||
}
|
||||
|
||||
.address {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 10rpx;
|
||||
justify-content: space-between;
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.right-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.count-select {
|
||||
display: flex;
|
||||
margin-top: 10rpx;
|
||||
|
||||
.pre-view {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 30rpx;
|
||||
width: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
padding: 30rpx 40rpx;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.pay-method {
|
||||
padding: 30rpx 40rpx;
|
||||
|
||||
|
||||
.title {
|
||||
font-weight: 400;
|
||||
font-style: Regular;
|
||||
font-size: 28rpx;
|
||||
leading-trim: NONE;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.box-bottom {
|
||||
width: 100%;
|
||||
padding: 20rpx 40rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background: #F5F8FF;
|
||||
|
||||
|
||||
.text {}
|
||||
|
||||
.btn {}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user