Files
soulspace/pages/vip/order.vue
2025-03-17 17:00:10 +08:00

1102 lines
23 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view class="container commonDetailPage" style="background-color: #fff !important">
<view class="contentBox commonPageContentBox order_box">
<view class="order_top goods_box pay_box">
<view class="pay_title">支付方式</view>
<view style="margin-bottom: 20rpx" v-if="!dataInfo.list">
<u-tag :text="`已选:${dataInfo.title}`" bgColor="#DCF2FA" borderColor="#DCF2FA" color="#7dc1f0"
plain></u-tag>
</view>
<view v-if="dataInfo.list&&dataInfo.list.length>0">
{{dataInfo.list[0].title}}<text v-if="dataInfo.type==1">延期价格</text><text v-else>价格</text>
<text v-for="(item,index) in dataInfo.list" :key="index"
class="list_choose"
:class="activeIndex==index?'list_choose_active':''"
@click="chooseYear(item, index)">{{item.year}}</text>
</view>
<view class="curriulum_title_box goods_item pay_item" v-for="(v, i) in payList">
<view :class="i != 2 ? 'bgGrey top' : 'top'">
<view class="left">
<image class="pay_item_img" :src="v.imgUrl" mode="aspectFil" :style="v.style">
</image>
<template v-if="v.type == 4">
<text> {{ v.text }}</text>
<text style="color: #7dc1f0; font-weight: 400; margin-left: 10rpx">
余额{{
initData && initData.user ? initData.user.peanutCoin : 0
}}</text>
</template>
<text v-else> {{ v.text }}</text>
</view>
<radio :value="v.value" color="#7dc1f0" :checked="selectPayIndex == i ? true : false"
@click="radioChange(i)" size="10" />
</view>
</view>
<template v-if="selectPayIndex == 2||$platform=='ios'">
<view class="goods_detail_list_title bg_box_shandow color_shandow bg_color">
<view class="linlanzhifu" style="
width: 100%;
overflow: hidden;
justify-content: space-between;
">
<view class="linlanzhifu">
<u-icon name="error-circle" color="#7dc1f0" size="18"
style="display: inline-block; margin-right: 10rpx"></u-icon>
确保您的天医币足够支付
</view>
<text class="fdButtonBox aui-text-danger fdButtonBoxRed" style="float: right"
@click="onPageJump('/pages/wallet/recharge?source=order')">立即充值</text>
</view>
<view class="other_info" style="margin-top: 12rpx">
<view class="explain" style="margin-bottom: 10rpx"> 说明 </view>
<view class="explain"> 1. 1天医币 = 1元人民币 </view>
<view class="explain">
2.若有疑问或意见请致电客服
<span style="font-size: 15px"><u @click="gotoPhone">022-24142321</u></span>
</view>
<view class="explain">
3.非中国大陆用户可以信用卡支付简单快捷推荐使用
支付时使用的信用卡需要带有Visa或MasterCard的标识请向邮箱
<text @click="fnCopy('publisher@tmrjournals.com', '邮箱')" class="aui-text-success"
style="text-decoration: underline; color: #7dc1f0">
publisher@tmrjournals.com
</text>
点击复制发送支付请求内容需包含拟购买的课程名称支付金额APP注册姓名及手机号码或者加一路健康客服微信
<text class="aui-text-success" @click="fnCopy('yilujiankangkefu', '微信名')"
style="text-decoration: underline; color: #7dc1f0">
yilujiankangkefu </text>点击复制联系我们我们将在24小时内向您的邮箱或者微信发送支付链接根据提示即可完成信用卡支付无需兑换外币
</view>
</view>
</view>
</template>
</view>
<template>
<common-sticky label="title" :itemStyle="`width:${
cateList.length == 2 ? '50' : '33'
}%;padding-left: 15px; padding-right: 15px; height: 68rpx;`" :list="cateList"
:currentCateIndex="currentCateIndex" @handleselectCate="handleselectCate">
</common-sticky>
</template>
</view>
<view class="goods_nav_box">
<common-goods-nav :iconList="[]" :customButton="customButton" @submit="goBuyJie">
<!-- leftSlot -->
<template slot="leftSlot" slot-scope="slotProps">
<view class="price_box order_bottom_box">
<text class="price">合计
<text class="total">{{ dataInfo.lastFee }}</text>
</text>
</view>
</template>
</common-goods-nav>
<view class="agree_wo">
<radio-group class="agree">
<view v-for="(item, index) in argee" :key="index">
<radio class="agreeRadio" :value="item.id" :checked="item.id == radioValue" color="#7dc1f0"
@click="radioCheck(index)"></radio>
</view>
</radio-group>
<view>* 我已阅读并同意<span class="highlight" @click="showXieyi">会员服务协议</span></view>
</view>
</view>
<!-- 会员协议 -->
<u-popup :show="xieyiShow" :round="10" @close="xieyiShow = false">
<view class="tanchu">
<view class="dp_title">{{ xieyi.title }}</view>
<view style="max-height: 1000rpx; overflow-y: scroll">
<view v-html="xieyi.content"></view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import courseDescription from "@/pages/component/commonComponents/list";
import {
setPay,
setPayAssign,
setWXPay
} from "@/config/utils";
import $http from "@/config/requestConfig.js";
const { platform } = uni.getSystemInfoSync();
import {
mapState
} from "vuex";
export default {
props: ["dataInfo"],
components: {
courseDescription, //课程说明
},
watch:{
lastFee:{
immediate: true,
handler(newRoute) {
if(this.dataInfo.list&&this.dataInfo.list.length>0){
this.dataInfo.lastFee = this.dataInfo.list[0].rebateFee
}
}
}
},
data() {
return {
isDefaultCurrency: false,
isShowAddress: false,
jfNumber: 0,
totalPrice: 0,
actualPayment: 0,
jfNumberShow: "",
jfNumberMax: 0,
goodsDataList: [],
orderModalShowInfo: {},
orderModalShow: false,
payType: 1,
freightNum: 0,
addressData: {
address: "",
consigneeName: "",
consigneePhone: "",
},
selectPayIndex: 1,
farePrice: 0,
payList: [],
priceBreakdownList: [],
number: 1,
detailInfo: {},
content: "",
remark: "",
iconList: [],
swiperList: [],
options: {},
relatedCoursesList: [], //相关课程
curriculumData: {},
curriculumInfo: {},
detailInfo: {},
fdButtonStyle: {
width: "90rpx",
"border-color": "#7dc1f0",
color: "#7dc1f0",
float: "right",
"margin-right": "20rpx",
"margin-left": "30rpx",
},
modalInfo: {},
currentCateIndex: 0,
show: false,
playData: {},
initData: {},
taiHuClassInfo: {},
searchValue: "",
argee: [{value: false, id: "1"}], // 同意权限
radioValue: "",
xieyi: {
title: "",
content: "",
},
xieyiShow: false,
cateList: [], // 一级分类标题1
twoCateList: [], // 二级分类标题
dataList: [], // 方剂标题
defaultAddressList: {},
allDataList: [], // 方剂标题
currentStatusIndex: 0, // 当前选中的一级分类
curTwoCateIndex: 0, // 当前选中的二级分类
searchList: [], // 搜索结果数组
showSearchList: false,
userMes: {}, // 用户信息
searchDisable: false, // 搜索不可用
limitShow: false,
limitTitle: "提示",
goToInfo: {},
limitContent: "",
scrollViewHeight: 0,
urlList: {
list: "app/phone.do?getCourseDetail_new",
initPrepareOrder: "common/buyOrder/initPrepareOrder",
buyOrder: "common/userVip/placeVipOrder",
curriculumInfo: "app/phone.do?getCourseInfo",
detailInfo: "app/phoneDoctor.do?getTaiHuClassInfo_new",
addressList: "common/userAddress/getUserAddress",
freightNum: "book/buyOrder/calculateTransportPrice", //运费
},
customButton: [{
width: "180rpx",
text: "立即支付",
backgroundColor: "linear-gradient(90deg, #294a97 0%,#7dc1f0 100%)",
color: "#fff",
}, ],
customButtonGroup1: [{
with: 200,
text: "确定",
backgroundColor: "linear-gradient(90deg, #294a97 0%,#7dc1f0 100%)",
color: "#fff",
}, ],
activeIndex: 0, //选择付款 下标
};
},
created(){
//判断是什么系统
if(platform=='ios'){
this.payList = [
{
text: "天医币",
imgUrl: require("@/static/icon/pay_3.png"),
type: 4,
value: "2",
}]
this.selectPayIndex = 0;
this.payType=4
}else{
this.payList = [{
text: "支付宝",
imgUrl: require("@/static/icon/pay_1.png"),
type: 2,
value: "0",
},
{
text: "微信",
imgUrl: require("@/static/icon/pay_2.png"),
type: 1,
value: "1",
},
{
text: "天医币",
imgUrl: require("@/static/icon/pay_3.png"),
type: 4,
value: "2",
}]
this.selectPayIndex = 1;
this.payType=1
}
},
async onLoad(options) {
var that = this;
this.options = JSON.parse(options.data);
this.goodsDataList = this.options.goods;
},
async onShow() {
var that = this;
await uni.$on("returnData", function(data) {
if (data) {
that.addressData = {
...data,
address: `${data.province}${data.city}${data.county}${data.detailAddress}`,
consigneeName: data.consigneeName,
consigneePhone: data.consigneePhone,
};
that.$forceUpdate();
that.getUserAddress();
} else {
}
});
},
computed: {
...mapState(["userInfo"]),
},
methods: {
onPageJump(url) {
uni.navigateTo({
url: url,
});
},
//父级调用
async initPrepareOrder() {
this.priceBreakdownList = [{
text: "商品总价",
imgUrl: "",
type: 1,
},
{
text: "运费",
imgUrl: "",
type: 2,
},
];
var data = {
uid: this.userInfo.id,
productList: [],
};
var that = this;
this.$http.request({
url: `${this.urlList.initPrepareOrder}`,
method: "POST",
data,
header: {
"Content-Type": "application/json",
},
})
.then(async (res) => {
console.log("res at line 374:", res);
if (res.code == 0) {
this.initData = res.data;
}
this.$forceUpdate();
});
},
//复制
fnCopy(value, title) {
this.$commonJS.handleMakingPhoneCalls(value, title);
},
//打电话
gotoPhone() {
this.$commonJS.handleMakingPhoneCalls("022-24142321");
},
//支付请求
async goBuyJie() {
var that = this;
this.nowClick = false;
setTimeout(() => {
this.nowClick = true;
}, 5000);
//判断勾选
if(that.radioValue!='1'){
uni.showToast({
title: "请勾选 已阅读会员服务协议",
icon: "none",
});
return false;
}
let xiaBiao = [];
if (this.payType == 4 && this.initData.user.peanutCoin < this.dataInfo.lastFee) {
uni.showToast({
title: '天医币余额不足',
icon: 'none'
})
return
}
let data = {
paymentMethod: this.payType, //1微信2支付宝3苹果支付4虚拟币
orderMoney: this.dataInfo.lastFee, //订单金额
realMoney: this.dataInfo.lastFee, //实际金额
shippingMoney: 0, //运费
jfDeduction: 0, //积分抵扣
vipBuyConfigId: this.dataInfo.id,
come: 3, //订单来源0疯子读书1国学众妙之门2医学吴门医述 3心灵空间
};
await $http.request({
url: that.urlList.buyOrder,
method: "POST",
data,
header: {
"Content-Type": "application/json",
},
})
.then(async (res) => {
if (res.code == 0) {
if (res.orderSn == null) {
uni.showToast({
title: "失败,请重新下单",
icon: "none"
});
} else {
if (that.payType == 2) {
// 常规支付
uni.showToast({
title: "正在支付",
icon: "loading",
});
await setPay({
typePay: "alipay",
subject: "vip",
totalAmount: res.money,
type: 2,
relevanceoid: res.orderSn,
customerId: that.userInfo.id,
},
(res) => {
uni.showLoading({
title: "加载中",
});
console.log(res, "支付支付");
if (res.success) {
uni.showToast({
title: "支付成功",
});
setTimeout(() => {
uni.switchTab({
url: "/pages/order/index",
});
}, 1000);
} else {
setTimeout(() => {
uni.showToast({
title: "支付失败"
});
}, 0);
}
}
);
} else if (this.payType == 1) {
// 微信支付
let data1 = {
orderSn: res.orderSn,
buyOrderId: null,
totalAmount: res.money,
};
setWXPay(data1, (res) => {
if (res.success) {
uni.showToast({
title: "支付成功",
});
setTimeout(() => {
uni.switchTab({
url: "/pages/order/index",
});
}, 1000);
} else {
if (res.data.errMsg.indexOf("User canceled") != -1) {
uni.showToast({
title: "用户取消支付",
icon: "none"
});
} else {
uni.showToast({
title: "支付失败",
icon: "none"
});
}
}
});
} else if (this.payType == 4) {
// 天医币支付
uni.showToast({
title: "购买成功",
icon: "success",
});
setTimeout(() => {
uni.switchTab({
url: "/pages/order/index",
});
}, 1000);
}
}
}
});
},
//切换年份选项
chooseYear(item,index){
this.activeIndex = index;
this.dataInfo.lastFee = item.rebateFee;
this.dataInfo.id = item.id;
},
//切换付款方式
radioChange(index) {
this.selectPayIndex = index;
this.payType = this.payList[this.selectPayIndex].type;
this.$forceUpdate();
},
async handleselectCate(item, index) {
this.dataList = [];
var data = [];
var that = this;
this.$http
.post(this.urlList.curriculumInfo, {
customerType: "D",
token: uni.getStorageSync("token"),
customerOid: uni.getStorageSync("customerOid"),
oid: item.coid,
})
.then(async (res) => {
that.curriculumInfo = res.obj;
that.dataList = res.obj.courseList;
});
this.searchValue = "";
this.searchList = [];
this.showSearchList = false;
return data;
},
//勾选会员协议
radioCheck(index) {
this.argee.forEach((item) => {
item.isCheck = false;
});
if (this.radioValue == this.argee[index].id) {
this.radioValue = null;
} else {
this.radioValue = this.argee[index].id;
}
},
//会员协议
async showXieyi() {
var data = await this.$commonJS.getAgreement(111);
if (data.content) {
data.content = data.content.replace(
/<h5>/g,
'<view style="font-weight: bold;font-size: 32rpx;margin-top: 20rpx;margin-bottom: 20rpx;">'
);
data.content = data.content.replace(/<\/h5>/g, "</view>");
}
this.xieyi = data;
this.xieyiShow = true;
},
},
onBackPress() {
// #ifdef APP-PLUS
plus.key.hideSoftKeybord();
// #endif
},
};
</script>
<style lang="scss" scoped>
@import "@/static/mixin.scss";
.pay_title {
text-align: center;
font-size: 32rpx;
margin-bottom: 40rpx;
}
.order_box {
padding: 20rpx;
.order_top {
background-color: #fff;
margin-bottom: 20rpx;
}
.goods_item {
width: 100%;
overflow: hidden;
.textarea {
margin-top: 20rpx;
background-color: #fffdfd;
}
.goods_item_img {
width: 140rpx;
height: 140rpx;
float: left;
background-color: #f5f5f5;
border-radius: 10rpx;
}
.normal_box {
width: calc(100% - 160rpx);
height: auto;
float: right;
.normal_box_top {
width: 100%;
display: flex;
height: 100rpx;
}
}
}
}
.flexbox {
display: flex;
}
.dataList {
height: 100%;
}
.titleList2 {
height: calc(100% - 150rpx);
}
.priceDetail {
height: calc(100% - 180rpx) !important;
padding: 0rpx 0;
box-sizing: border-box;
}
.componentPage {
height: calc(100% - 90rpx) !important;
}
.dateReminder {
width: 100%;
font-size: 24rpx;
text-align: right;
line-height: 40rpx;
}
.fdButtonBox {
border: 1rpx solid $themeColor;
background-color: $themeColor;
color: #fff;
float: right;
padding: 4rpx 14rpx;
font-size: 24rpx;
font-weight: 500;
line-height: 30rpx;
border-radius: 10rpx;
box-sizing: border-box;
}
.commonDetailPage {
padding: 0 !important;
padding-bottom: 150rpx !important;
}
.goods_box {
background-color: #fff;
box-sizing: border-box;
width: 100%;
.title {
color: #333;
font-weight: 600;
margin-bottom: 20rpx;
}
.curriulum_title_box {
width: calc(100%) !important;
padding-bottom: 20rpx;
background-color: #fff;
.curriulum_title {
width: calc(100% - 80rpx);
font-weight: 500;
font-size: 30rpx;
margin-top: 10rpx;
float: left;
margin-bottom: 0rpx;
color: #333;
box-sizing: border-box;
}
}
}
.dataList {
background-color: #fff !important;
padding: 0 30rpx 40rpx !important;
box-sizing: border-box;
}
/deep/.scroll-view-item:nth-child(2n-1) {
background-color: transparent !important;
}
.dataList {
height: auto !important;
}
.related_courses_box {
background-color: #fff;
.small_class_teaching_content {
padding: 10rpx 20rpx;
box-sizing: border-box;
}
}
.related_courses_name {
display: inline-block;
width: calc(100% - 150rpx) !important;
.aui-text-danger {
display: inline-block;
float: right;
}
}
.original_price {
font-size: 28rpx !important;
font-weight: 500;
color: #999 !important;
white-space: nowrap;
text-decoration: line-through;
float: left;
margin-top: 6rpx;
}
.price {
width: auto;
font-size: 30rpx;
font-weight: 600;
float: right;
margin-right: 10rpx;
color: #333;
}
.price_box {
width: auto;
overflow: hidden;
margin-top: 10rpx;
}
.commonTags {
margin-right: 20rpx;
margin-top: -5rpx !important;
}
.sales_number {
text-decoration: none;
color: #b0b0b0;
font-weight: 500;
}
/deep/.common_curriculum_list {
margin-top: 20rpx;
padding: 20rpx 20rpx 20rpx;
.content_item {
width: 100% !important;
margin-bottom: 0 !important;
padding: 15rpx 0 0rpx;
border-top: 1rpx solid #f1f0f0;
.book_image {
width: 60rpx !important;
height: 60rpx !important;
float: left !important;
background-color: #f5f5f5;
}
.common_curriculum_item {
width: calc(100% - 88rpx);
float: right;
display: block !important;
.related_courses_name {
width: 100% !important;
}
}
}
.content_item:nth-child(1) {
border-top: none !important;
}
}
/deep/.common_section {
padding: 0 !important;
padding-bottom: 20rpx !important;
}
.goods_detail_list_title {
display: block;
padding-top: 20rpx;
padding-bottom: 40rpx;
.linlanzhifu {
display: flex;
align-items: center;
}
.other_info {
font-size: 28rpx;
color: #5a5a5a;
}
.left {
display: flex;
align-items: center;
}
.right {
font-size: 24rpx;
font-weight: 500 !important;
color: #999;
font-family: none;
}
}
.commonPageContentBox {
height: auto !important;
}
.minus {
width: 50rpx;
height: 50rpx;
border-width: 2rpx;
border-color: #e6e6e6;
border-right-color: transparent;
border-top-left-radius: 10rpx;
border-bottom-left-radius: 10rpx;
border-style: solid;
@include flex;
justify-content: center;
align-items: center;
}
.input {
padding: 0 10px;
height: 50rpx;
border: 1rpx solid #e6e6e6;
}
.plus {
width: 50rpx;
height: 50rpx;
border-width: 2rpx;
border-color: #e6e6e6;
border-left-color: transparent;
border-style: solid;
border-top-right-radius: 10rpx;
border-bottom-right-radius: 10rpx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
color: $themeColor;
}
.order_bottom_box {
position: absolute;
right: 20rpx;
.number {
font-size: 28rpx;
margin-right: 15rpx;
margin-top: 5rpx;
}
.price {
.total {
font-size: 38rpx;
color: red;
}
}
}
/deep/.goods_nav_box {
.goods_nav{
padding: 20rpx 20rpx 10rpx 20rpx;
}
.left {
margin-top: -10rpx;
width: calc(100% - 180rpx);
height: auto;
position: relative;
}
}
.explain {
word-wrap: break-word;
word-break: normal;
word-break: break-all;
}
.order_bottom_box {
display: flex;
align-items: center;
}
.pay_box {
.pay_item {
border-bottom: 1rpx solid #eeecec;
padding-top: 20rpx;
justify-content: space-between;
.top {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.left {
line-height: 50rpx;
font-family: MicrosoftYaHei;
font-weight: 500;
color: #242323;
.pay_item_img {
width: 50rpx;
height: 50rpx;
float: left;
margin-right: 20rpx;
}
}
.bottom {
width: calc(100% - 60rpx);
float: right;
background-color: #f5f5f5;
border-radius: 20rpx;
margin-top: 20rpx;
.jf_box {
width: 100%;
display: flex;
align-items: center;
padding: 0 20rpx;
box-sizing: border-box;
justify-content: space-between;
color: #aaa;
}
.jf_input {
width: calc(100% - 320rpx) !important;
padding: 10rpx 0;
box-sizing: border-box;
}
}
}
/deep/.pay_item:nth-last-child(1) {
border-bottom: none !important;
}
}
.linlanzhifu {
font-size: 28rpx;
line-height: 24rpx;
}
.address_box {
display: flex;
align-items: center;
.order_top {
background-color: #fff;
}
.user_info {
width: 100%;
float: left;
display: flex;
margin-top: 10rpx;
align-items: center;
.name {
color: #838282;
margin-right: 10rpx;
}
.tel {
color: #838282;
}
}
.curriulum_title {
width: auto;
font-size: 34rpx;
font-weight: 700;
float: left;
margin-right: 10rpx;
color: #333;
line-height: 50rpx;
letter-spacing: 2rpx;
}
.normal_box {
margin-left: 5rpx;
width: calc(100% - 120rpx);
}
.goods_box {
display: flex;
align-items: center;
}
.rightArrow {
margin-left: 40rpx;
width: 40rpx;
height: 40rpx;
}
}
.rightArrow {
width: 40rpx;
height: 40rpx;
}
.orderModalShow {
width: 100%;
max-height: 48vh;
padding-bottom: 120rpx;
}
.popup_box {
.curriulum_title_box {
.title {
text-align: center;
font-size: 34rpx !important;
padding-top: 15rpx !important;
margin-bottom: 60rpx !important;
}
}
}
.hasRemark {
color: #333 !important;
font-size: 40rpx !important;
}
.pay_info {
margin-bottom: 60rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
/deep/.commonDetailPage {
height: 100vh !important;
}
.list_choose{
display: inline-block;
border:1rpx solid #999;
color: #999;
border-radius: 10rpx;
margin-right: 20rpx;
margin-bottom: 30rpx;
padding: 0 20rpx;
font-size: 28rpx;
line-height: 40rpx;
}
.list_choose_active{
border:1rpx solid #ff1f00;
color: #ff1f00;
}
.agree_wo {
display: flex;
align-items: center;
justify-content: flex-end;
color: #aaa;
line-height: 30rpx;
font-size: 28rpx;
padding: 10rpx 10rpx 20rpx 0;
}
.agreeRadio {
zoom: 0.8;
}
.agree {
width: auto !important;
}
.highlight {
color: $uni-color-primary;
}
.tanchu {
padding: 40rpx 30rpx 40rpx 30rpx;
position: relative;
.dp_title {
font-size: 32rpx;
margin-bottom: 50rpx;
color: #555;
text-align: center;
font-weight: bold;
}
}
</style>