296 lines
6.0 KiB
Vue
296 lines
6.0 KiB
Vue
<template>
|
||
<view class="container">
|
||
<TransNavVue title="确认订单"></TransNavVue>
|
||
<view class="pay-center">
|
||
<view class="name-box">
|
||
<text>{{ addrdessList.consigneeName }}</text>
|
||
<view class="name">{{ addrdessList.addressDetail }}</view>
|
||
</view>
|
||
<view class="pay-details">
|
||
<view class="details-box">
|
||
<view class="details-img"></view>
|
||
<view class="info">
|
||
<text>商品名称</text>
|
||
<view class="details-price"> ￥88.5</view>
|
||
</view>
|
||
</view>
|
||
<view class="details-info"><text>商品价格</text><text>￥88.5</text></view>
|
||
<view class="details-info"><text>购买数量</text><text>1</text></view>
|
||
</view>
|
||
<view class="sale-box">
|
||
<text>优惠券</text>
|
||
</view>
|
||
|
||
<view class="pay-method">
|
||
<text class="method-title">支付方式</text>
|
||
<view class="payment-option" >
|
||
<view class="option-icon">
|
||
<image mode="scaleToFill"></image>
|
||
</view>
|
||
<view class="option-content">
|
||
<text class="option-name">微信支付</text>
|
||
<view class="option-desc">使用微信快捷支付</view>
|
||
</view>
|
||
<view class="option-radio">
|
||
<radio-group bindchange="radioChange">
|
||
<label>
|
||
<radio value="wechatPay" ></radio>
|
||
</label>
|
||
</radio-group>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="pay-bottom">
|
||
<view class="pay-content" >
|
||
<view class="total">
|
||
合计({{ selectedCount }})：
|
||
<view class="price">
|
||
|
||
{{ totalPrice }}
|
||
</view>
|
||
</view>
|
||
<view class="pay-btn">
|
||
<button class="settle-btn" @click="getPayList">确认支付</button>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
background-color: #f7f7f7;
|
||
height: 100vh;
|
||
position: relative;
|
||
z-index: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.pay-center{
|
||
padding: 30rpx 30rpx 0rpx;
|
||
.name-box{
|
||
background-color: #fff;
|
||
height: 150rpx;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx;
|
||
.name{
|
||
margin-top: 20rpx;
|
||
color: #000;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
.pay-details{
|
||
margin-top: 20rpx;
|
||
background-color: #fff;
|
||
height: 300rpx;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx;
|
||
|
||
.details-box{
|
||
display: flex;
|
||
|
||
.details-img{
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
background-color: #c3c3c3;
|
||
border-radius: 5rpx;
|
||
}
|
||
.info{
|
||
margin-left: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
.details-price{
|
||
color: orange;
|
||
}
|
||
}
|
||
}
|
||
.details-info{
|
||
margin-top: 10rpx;
|
||
color: #bbb;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
.sale-box{
|
||
margin-top: 20rpx;
|
||
background-color: #fff;
|
||
height: 80rpx;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx;
|
||
}
|
||
.pay-method{
|
||
margin-top: 20rpx;
|
||
background-color: #fff;
|
||
height: 200rpx;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx;
|
||
.method-title {
|
||
color: #999;
|
||
font-size: 30rpx;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
.payment-option {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.option-icon {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
.option-icon image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.option-content {
|
||
margin-top: 10rpx;
|
||
flex: 1;
|
||
}
|
||
.option-name {
|
||
font-size: 36rpx;
|
||
color: #333;
|
||
}
|
||
.option-desc {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
margin-top: 5rpx;
|
||
}
|
||
.option-radio {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pay-bottom {
|
||
position: fixed;
|
||
width: 100%;
|
||
bottom: 0px;
|
||
height: 148rpx;
|
||
padding: 0 32rpx;
|
||
background: #ffffff;
|
||
border-top: 1rpx solid #eeeeee;
|
||
|
||
.pay-content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 100%;
|
||
|
||
.pay-btn {
|
||
.settle-btn {
|
||
width: 280rpx;
|
||
height: 96rpx;
|
||
background: #ff6f0e;
|
||
border-radius: 50rpx 50rpx 50rpx 50rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #ffffff;
|
||
line-height: 96rpx;
|
||
}
|
||
}
|
||
|
||
.total {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
|
||
.price {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: bold;
|
||
font-size: 48rpx;
|
||
color: #fa4b46;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
</style>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue';
|
||
import { request } from '@/utils/request'
|
||
|
||
const selectedItems = ref([]);
|
||
const totalPrice = ref(0);
|
||
const addrdessList = ref({});
|
||
|
||
const getShoppingList = async () => {
|
||
try {
|
||
const res = await request({
|
||
url: '/app-api/weixin/shipping-address/list',
|
||
showLoading: true,
|
||
})
|
||
console.log(res)
|
||
if (res.code === 0 || res.code === 200) {
|
||
addrdessList.value=res.data[0]
|
||
|
||
|
||
} else {
|
||
throw new Error(res.msg || '数据异常')
|
||
}
|
||
}
|
||
catch (err) {
|
||
console.error('获取商场数据失败:', err)
|
||
|
||
}
|
||
}
|
||
const getPayList = async () => {
|
||
try {
|
||
const res = await request({
|
||
url: '/app-api/trade/cart/create/cartOrder',
|
||
data:{
|
||
items:[{skuid:28522,count:1,}],
|
||
receiverName:addrdessList.consigneeName ,
|
||
deliveryType:1,
|
||
receiverMobile:addrdessList.phoneNumber
|
||
},
|
||
method:'post',
|
||
showLoading: true,
|
||
})
|
||
console.log(res)
|
||
if (res.code === 0 || res.code === 200) {
|
||
|
||
|
||
|
||
} else {
|
||
throw new Error(res.msg || '数据异常')
|
||
}
|
||
}
|
||
catch (err) {
|
||
console.error('获取商场数据失败:', err)
|
||
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
// 使用uni-app内置方法获取页面实例
|
||
const pages = getCurrentPages();
|
||
const currentPage = pages[pages.length - 1];
|
||
|
||
// 通过页面参数获取数据
|
||
if (currentPage && currentPage.$vm) {
|
||
const eventChannel = currentPage.$vm.getOpenerEventChannel();
|
||
eventChannel.on('acceptSelectedItems', (data) => {
|
||
console.log(data)
|
||
selectedItems.value = data.selectedItems;
|
||
totalPrice.value = data.totalPrice;
|
||
});
|
||
}
|
||
getShoppingList()
|
||
});
|
||
</script>
|