244 lines
7.9 KiB
Vue
244 lines
7.9 KiB
Vue
<template>
|
||
<uni-popup ref="popup" type="bottom">
|
||
<view
|
||
style="width: 100%; height: 965.65rpx; background-color: #F7F7F7; border-radius: 15.27rpx 15.27rpx 0rpx 0rpx;">
|
||
<view class="" style="width: 688.93rpx; height: 100%; margin: 0 auto;">
|
||
<view class=""
|
||
style="width: 100%; height: 30rpx; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding-top: 44rpx;">
|
||
<view class="" style="width: 24.81rpx; height: 24.81rpx;"></view>
|
||
<text style="font-size: 26.72rpx;">确认订单</text>
|
||
<image src="/static/ic_close.png" style="width: 24.81rpx; height: 24.81rpx;" @click="close" mode="">
|
||
</image>
|
||
</view>
|
||
|
||
<view class=""
|
||
style="width: 100%; height: 227.1rpx; background-color: white; position: relative; margin-top: 42rpx; border-radius: 15.27rpx;">
|
||
<image :src="product.image"
|
||
style="width: 180.12rpx; height: 180.12rpx; background-color: #D8D8D8; border-radius: 15.27rpx; position: absolute; left: 24.81rpx; top: 24.81rpx;"
|
||
mode=""></image>
|
||
<text style="font-size: 22.9rpx; position: absolute; left: 238.55rpx; top: 41.98rpx;">{{
|
||
product.title }}</text>
|
||
<text
|
||
style="font-size: 19.08rpx; position: absolute; left: 238.55rpx; top: 91.6rpx; color: #999999;">类型：实物</text>
|
||
<view class=""
|
||
style="position: absolute; display: flex; flex-direction: row; left: 238.55rpx; bottom: 44rpx; align-items: center;">
|
||
<text class=" " style="font-size: 19.08rpx; margin-top: 15rpx; color: #FF6A6A;">￥</text>
|
||
<text class=" " style="font-size: 41.98rpx; font-weight: bold; color: #FF6A6A;">{{
|
||
product.price }}</text>
|
||
</view>
|
||
<text
|
||
style="position: absolute; right: 24.81rpx; bottom: 41.98rpx; font-size: 19.08rpx; color: #999999;">x1</text>
|
||
</view>
|
||
|
||
<view class="" @click="toAddress"
|
||
style="width: 100%; height: 82.06rpx; background-color: white; border-radius: 15.27rpx; margin-top: 28.63rpx; display: flex; align-items: center; position: relative;">
|
||
<text style="left: 24.81rpx; font-size: 22.9rpx; position: absolute;">收货地址</text>
|
||
<text style="font-size: 22.9rpx; position: absolute; right:50rpx;">{{ address.receiver_name || '未设置'
|
||
}}</text>
|
||
<image src="/static/ic_arrow.png" class="arrow-icon"></image>
|
||
</view>
|
||
|
||
<view class="" @click="toCoupon"
|
||
style="width: 100%; height: 82.06rpx; background-color: white; border-radius: 15.27rpx; margin-top: 28.63rpx; display: flex; align-items: center; position: relative;">
|
||
<text style="left: 24.81rpx; font-size: 22.9rpx; position: absolute;">优惠券</text>
|
||
<text style="right: 45.8rpx; font-size: 19.08rpx; position: absolute; color: #999999;">未选择</text>
|
||
<image src="/static/ic_arrow.png" class="arrow-icon"></image>
|
||
</view>
|
||
|
||
<view class="" @click="toAgreement('product')"
|
||
style="width: 100%; height: 82.06rpx; background-color: #F9F8E1; border-radius: 15.27rpx; margin-top: 28.63rpx; display: flex; align-items: center; position: relative;">
|
||
<text style="left: 24.81rpx; font-size: 22.9rpx; position: absolute;">售前·售后须知</text>
|
||
<image src="/static/ic_arrow.png" class="arrow-icon"></image>
|
||
</view>
|
||
|
||
<view class=""
|
||
style="width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: left; margin-top: 45.8rpx;">
|
||
<image :src="isCheck ? '/static/ic_check_s.png' : '/static/ic_check.png'" @click="setCheck"
|
||
style="width: 24.02rpx; height: 24.02rpx;" mode=""></image>
|
||
<text style="font-size: 19.08rpx; color: #999999; margin-left: 11.45rpx;">我已满18岁，阅读并同意
|
||
<text style="color: #333333;" @click="toAgreement('user')">《用户协议》</text>
|
||
<text style="color: #333333;" @click="toAgreement('privacy')">《隐私政策》</text>
|
||
</text>
|
||
</view>
|
||
|
||
<view class="" @click="confirmPayment"
|
||
style="width: 100%; height: 83.97rpx; background-color: #333333; border-radius: 15.27rpx; display: flex; align-items: center; justify-content: center; margin-top: 30.53rpx;">
|
||
<text style="font-size: 22.9rpx; color: #CDEF27;">确认支付</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
import { pay_by_order, pay_by_create_order, pay_by_pay } from '@/common/server/order';
|
||
import { platform } from '@/common/platform/PlatformFactory';
|
||
const props = defineProps({
|
||
onSuccess: {
|
||
type: Function,
|
||
default: () => { }
|
||
}
|
||
});
|
||
let product = ref(null);
|
||
|
||
// const emit = defineEmits(['update:address']);
|
||
|
||
// 响应式数据
|
||
const isCheck = ref(true);
|
||
let address = ref('');
|
||
let coupon = ref('');
|
||
const popup = ref(null);
|
||
const toAgreement = (type) => {
|
||
uni.navigateTo({
|
||
url: '/pages/other/agreement?type=' + type,
|
||
});
|
||
};
|
||
// 方法
|
||
const open = async (product_id) => {
|
||
const res = await pay_by_order(product_id);
|
||
console.log(res);
|
||
|
||
if (res) {
|
||
product.value = res;
|
||
if (res.default_address != null) {
|
||
address.value = res.default_address;
|
||
}
|
||
popup.value.open();
|
||
}
|
||
|
||
};
|
||
|
||
const close = () => {
|
||
popup.value.close();
|
||
};
|
||
|
||
const setCheck = () => {
|
||
isCheck.value = !isCheck.value;
|
||
};
|
||
|
||
const toAddress = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/address/address-list?selsect=true',
|
||
events: {
|
||
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
|
||
selectAddress: function (data) {
|
||
console.log(data);
|
||
address.value = data;
|
||
|
||
}
|
||
},
|
||
success: function (res) {
|
||
// 通过eventChannel向被打开页面传送数据
|
||
res.eventChannel.emit('acceptDataFromOpenerPage', {
|
||
data: address.value.id
|
||
})
|
||
}
|
||
});
|
||
};
|
||
const toCoupon = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/other/choose-coupon',
|
||
events: {
|
||
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
|
||
selectCoupon: function (data) {
|
||
console.log(data);
|
||
coupon.value = data;
|
||
|
||
}
|
||
},
|
||
success: function (res) {
|
||
// 通过eventChannel向被打开页面传送数据
|
||
res.eventChannel.emit('acceptDataFromOpenerPage', {
|
||
data: coupon.value
|
||
})
|
||
}
|
||
});
|
||
};
|
||
|
||
const confirmPayment = async () => {
|
||
if (!isCheck.value) {
|
||
uni.showToast({
|
||
title: '请先同意用户协议和隐私政策',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
if (address.value == null || address.value.id == 0) {
|
||
uni.showToast({
|
||
title: '请选择收货地址',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 这里应该调用支付接口
|
||
// 支付成功后调用回调
|
||
uni.showLoading({
|
||
title: '支付处理中'
|
||
});
|
||
|
||
const order_res = await pay_by_create_order(product.value.product_id, address.value.id, coupon.value.id ?? 0);
|
||
if (!order_res) {
|
||
uni.showToast({
|
||
title: '支付失败,请刷新后重试！',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
console.log('支付成功', order_res);
|
||
let isPaySuccess = true;
|
||
if (order_res.user_info.is_test == 2) {
|
||
const isTestPay = await uni.showModal({
|
||
title: '支付提示',
|
||
content: '检测到您是测试账号，是否直接支付完成！取消后将正常拉起支付！（测试账号购买订单将自动标记为“已发货”）',
|
||
confirmText: "取消",
|
||
cancelText: "确定"
|
||
});
|
||
if (isTestPay.cancel) {
|
||
isPaySuccess = false;
|
||
}
|
||
}
|
||
if (isPaySuccess) {
|
||
let orderInfo = order_res.payment_data;
|
||
|
||
const payRes = await platform.pay(orderInfo, this);
|
||
console.log("paypaypaypay", payRes);
|
||
if (!payRes.isPay) {
|
||
uni.showToast({
|
||
title: '支付已取消',
|
||
icon: 'none'
|
||
});
|
||
uni.hideLoading();
|
||
return;
|
||
}
|
||
}
|
||
const by_pay_res = await pay_by_pay(order_res.order_no);
|
||
console.log("t", by_pay_res);
|
||
uni.hideLoading();
|
||
if (by_pay_res.pay_status == 2) {
|
||
props.onSuccess && props.onSuccess();
|
||
}
|
||
// 模拟支付过程
|
||
// setTimeout(() => {
|
||
// uni.hideLoading();
|
||
// props.onSuccess && props.onSuccess();
|
||
// close();
|
||
// }, 1500);
|
||
};
|
||
|
||
// 对外暴露方法
|
||
defineExpose({
|
||
open,
|
||
close
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.arrow-icon {
|
||
width: 10.67rpx;
|
||
height: 19.66rpx;
|
||
right: 25rpx;
|
||
position: absolute;
|
||
}
|
||
</style> |