|
|
@@ -0,0 +1,278 @@
|
|
|
+<template>
|
|
|
+ <view class="ezy-qrdd-page">
|
|
|
+ <view class="icon-title-navBar-box">
|
|
|
+ <view class="nav-bar-icon" @click="handleBack"></view>
|
|
|
+ <text class="nav-bar-title">确认订单</text>
|
|
|
+ </view>
|
|
|
+ <view class="qrdd-body-box">
|
|
|
+ <!-- 卡片 -->
|
|
|
+ <view class="dd-item-box">
|
|
|
+ <!-- 封面 -->
|
|
|
+ <image class="item-img-box" :src="data.cover" mode=""></image>
|
|
|
+ <view class="item-content-box">
|
|
|
+ <!-- 名称 -->
|
|
|
+ <view class="item-name">{{data.name}}</view>
|
|
|
+ <!-- 简介 -->
|
|
|
+ <view class="item-intro">{{data.intro}}</view>
|
|
|
+ <!-- 价格 -->
|
|
|
+ <view class="item-xianjia">￥{{xianjia}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="item-play-btn"></view>
|
|
|
+ </view>
|
|
|
+ <!-- 等级 -->
|
|
|
+ <view class="qrdd-border-box">
|
|
|
+ <view class="kcxxdj-title">课程学习等级</view>
|
|
|
+ <view class="kcxxdj-tc-box">
|
|
|
+ <!-- 套餐 -->
|
|
|
+ <ezyActiveVue class="ezy-btn-active tc-item" v-for="item in data.taocanList"
|
|
|
+ @click="handleSelectTaoCan(item)" :class="{active: item.taocanId == activeTaocan.taocanId}">
|
|
|
+ {{item.name}}
|
|
|
+ </ezyActiveVue>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 商品总价 -->
|
|
|
+ <view class="qrdd-border-box">
|
|
|
+ <view class="border-row">
|
|
|
+ <view>商品总价</view>
|
|
|
+ <view>￥{{yuanjia}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="border-row">
|
|
|
+ <view>优惠券</view>
|
|
|
+ <view class="jg-text">-￥{{youhui}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="border-row sum-row">
|
|
|
+ <view class="sum-text">合计</view>
|
|
|
+ <view class="jg-text">￥{{xianjia}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 支付模式 -->
|
|
|
+ <template v-if="currentPlatform != 'ios'">
|
|
|
+ <radio-group @change="radioChange" class="qrdd-border-box">
|
|
|
+ <label class="border-row" v-for="(item, index) in items" :key="item.value">
|
|
|
+ <view class="zzfs-name-box">
|
|
|
+ <icon :class="{
|
|
|
+ 'wechat-icon': item.name === '微信',
|
|
|
+ 'alipay-icon': item.name === '支付宝'
|
|
|
+ }"></icon>
|
|
|
+ <text>{{item.name}}</text>
|
|
|
+ </view>
|
|
|
+ <radio :value="item.value" :checked="index === current" class="qrdd-radio-item"/>
|
|
|
+ </label>
|
|
|
+ </radio-group>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 支付区 -->
|
|
|
+ <view class="qrdd-footer-box">
|
|
|
+ <view class="jg-box">
|
|
|
+ <view class="sum-row">
|
|
|
+ <text class="sum-text">合计：</text>
|
|
|
+ <text class="xj-text-text">￥{{xianjia}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="yh-text">共优惠￥{{youhui}}</view>
|
|
|
+ </view>
|
|
|
+ <view @click="handlePay" class="ljzf-btn">立即支付</view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="shop-mask">遮盖层</view> -->
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <kaiTongFongShiVue ref="kaiRef" @ykIoszhifu="ykIoszhifu" @success="handlePay"></kaiTongFongShiVue>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import {
|
|
|
+ reactive,
|
|
|
+ ref,
|
|
|
+ computed,
|
|
|
+ } from "vue";
|
|
|
+ import {
|
|
|
+ onLoad,
|
|
|
+ onShow
|
|
|
+ } from "@dcloudio/uni-app"
|
|
|
+ import * as shopHttp from "@/api/shop.js"
|
|
|
+ import kaiTongFongShiVue from "../components/kaiTongFongShi.vue";
|
|
|
+ import {
|
|
|
+ getAppCp4Buy
|
|
|
+ } from "@/api/shop";
|
|
|
+ import {
|
|
|
+ usePay
|
|
|
+ } from "../usePay.js";
|
|
|
+ import {
|
|
|
+ getUserIsYouke
|
|
|
+ } from "@/utils/common.js"
|
|
|
+ import cacheManager from "@/utils/cacheManager.js";
|
|
|
+ import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
|
|
|
+
|
|
|
+
|
|
|
+ const currentPlatform = ref(null);
|
|
|
+
|
|
|
+ function isIOSorAndroid() {
|
|
|
+ const systemInfo = uni.getSystemInfoSync();
|
|
|
+
|
|
|
+ if (systemInfo.platform == 'ios') {
|
|
|
+ currentPlatform.value = 'ios'
|
|
|
+ } else {
|
|
|
+ currentPlatform.value = 'android'
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const data = reactive({
|
|
|
+ chanpinId: null,
|
|
|
+ cover: null,
|
|
|
+ intro: null,
|
|
|
+ name: null,
|
|
|
+ taocanList: []
|
|
|
+ })
|
|
|
+
|
|
|
+ const activeTaocan = ref(null)
|
|
|
+ const kaiRef = ref(null)
|
|
|
+
|
|
|
+ const current = ref(0)
|
|
|
+ const items = ref([{
|
|
|
+ name: '微信',
|
|
|
+ value: '0'
|
|
|
+ }, {
|
|
|
+ name: '支付宝',
|
|
|
+ value: '1'
|
|
|
+ }])
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ const youhui = computed(() => {
|
|
|
+ if (!activeTaocan.value) {
|
|
|
+ return '0.00'
|
|
|
+ } else {
|
|
|
+ return activeTaocan.value.youhui
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ const xianjia = computed(() => {
|
|
|
+ if (!activeTaocan.value) {
|
|
|
+ return '0.00'
|
|
|
+ } else {
|
|
|
+ return activeTaocan.value.xianjia
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ const yuanjia = computed(() => {
|
|
|
+ if (!activeTaocan.value) {
|
|
|
+ return '0.00'
|
|
|
+ } else {
|
|
|
+ return activeTaocan.value.yuanjia
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ const {
|
|
|
+ OrderPay
|
|
|
+ } = usePay({
|
|
|
+ createOrderError: () => {}, // 创建订单失败
|
|
|
+ checkError: () => {}, // 校验失败
|
|
|
+ payError: () => {}, // 支付失败
|
|
|
+ paySuccess: () => {
|
|
|
+ // 支付成功删除contentInfo 缓存
|
|
|
+ cacheManager.remove("contentInfo");
|
|
|
+ // zhifu='success' 用于判断在订单页 游客模式ios支付成功情况，要去弹出弹窗
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/chanpinMy/order?zhifu=success"
|
|
|
+ })
|
|
|
+ // uni.showLoading({
|
|
|
+ // title: '跳转中...',
|
|
|
+ // mask: true
|
|
|
+ // });
|
|
|
+ // uni.switchTab({
|
|
|
+ // url: "/pages/chanpinMy/my" // 你的F页面实际路径（不变）
|
|
|
+ // });
|
|
|
+ // setTimeout(() => {
|
|
|
+ // uni.navigateTo({
|
|
|
+ // url: "/pages/chanpinMy/order?zhifu=success", // 你的D页面路径+保留zhifu=success传参
|
|
|
+ // success: () => {
|
|
|
+ // uni.hideLoading();
|
|
|
+ // },
|
|
|
+ // fail: () => {
|
|
|
+ // uni.hideLoading();
|
|
|
+ // toast("跳转失败，请重试");
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // }, 300);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }, //支付成功
|
|
|
+ applePayError: () => {}, // 苹果内购失败
|
|
|
+ });
|
|
|
+
|
|
|
+ onLoad(() => {
|
|
|
+ isIOSorAndroid();
|
|
|
+ initPage();
|
|
|
+ if (currentPlatform.value == 'ios') {
|
|
|
+ // ios 无微信与支付宝
|
|
|
+ current.value = -1;
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ function ykIoszhifu() {
|
|
|
+ console.log('12311');
|
|
|
+ const options = {
|
|
|
+ chanpinId: data.chanpinId,
|
|
|
+ taocanId: activeTaocan.value.taocanId
|
|
|
+ };
|
|
|
+ options.applePid = activeTaocan.value.applePid;
|
|
|
+ console.log('options', options);
|
|
|
+ console.log('activeTaocan.value.applePid', activeTaocan.value.applePid);
|
|
|
+ OrderPay('apple', options)
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ function radioChange(d) {
|
|
|
+ current.value = d.detail.value;
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleSelectTaoCan(item) {
|
|
|
+ activeTaocan.value = item;
|
|
|
+ }
|
|
|
+
|
|
|
+ function initPage() {
|
|
|
+ shopHttp.getAppCp4Buy().then(res => {
|
|
|
+ Object.assign(data, res.data)
|
|
|
+
|
|
|
+ activeTaocan.value = res.data.taocanList[0]
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ function handlePay() {
|
|
|
+ if (getUserIsYouke()) {
|
|
|
+ // 游客
|
|
|
+ kaiRef.value.handleShow();
|
|
|
+ } else {
|
|
|
+ // 非游客
|
|
|
+ const options = {
|
|
|
+ chanpinId: data.chanpinId,
|
|
|
+ taocanId: activeTaocan.value.taocanId
|
|
|
+ };
|
|
|
+
|
|
|
+ if (currentPlatform.value == 'ios') {
|
|
|
+ options.applePid = activeTaocan.value.applePid;
|
|
|
+ console.log('apple支付入参', options)
|
|
|
+ // 苹果
|
|
|
+ OrderPay('apple', options)
|
|
|
+ } else if (currentPlatform.value != 'ios' && current.value == '0') {
|
|
|
+ console.log('wx支付入参', options)
|
|
|
+ // 微信
|
|
|
+ OrderPay('wx', options)
|
|
|
+ } else if (currentPlatform.value != 'ios' && current.value == '1') {
|
|
|
+ console.log('ali支付入参', options)
|
|
|
+ // 支付宝
|
|
|
+ OrderPay('ali', options)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleBack() {
|
|
|
+ uni.navigateBack()
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+
|
|
|
+</style>
|
wangxy