504 lines
11 KiB
Vue
504 lines
11 KiB
Vue
<template>
|
||
<uni-popup ref="popup" type="bottom">
|
||
<view class="buy-pop relative">
|
||
<view class="buy-pop-hd">
|
||
<view class="" style="width: 60rpx"></view>
|
||
<text class="" style="font-size: 28rpx">确认订单</text>
|
||
<view class="close icon" @click="$emit('close')">
|
||
<image :src="$img('/static/img/close2.png')" style="width: 24rpx; height: 24rpx" lazy-load></image>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="buy-card">
|
||
<view class="buy-info">
|
||
<view class="pic flex">
|
||
<image class="img100" :src="orderData.goods.imgurl_detail"></image>
|
||
</view>
|
||
|
||
<view class="info-r">
|
||
<view class="title hang1">
|
||
{{ orderData.goods.title }}
|
||
</view>
|
||
|
||
<view class="type">类型:明信片</view>
|
||
|
||
<template v-if="orderData.goods.is_shou_zhe == 1 && orderData.goods.shou_zhe_price * 1 > 0">
|
||
<view class="price-num">
|
||
<view class="price">
|
||
<template v-if="pageData.goods.type != 5">¥</template>
|
||
<text>{{ orderData.goods.shou_zhe_price }}</text>
|
||
<template v-if="pageData.goods.type == 5">积分</template>
|
||
(首抽5折)
|
||
</view>
|
||
|
||
<view class="num">×{{ 1 }}</view>
|
||
</view>
|
||
|
||
<view v-if="orderData.goods.prize_num > 1" class="price-num">
|
||
<view class="price">
|
||
<template v-if="pageData.goods.type != 5">¥</template>
|
||
<text>{{ orderData.goods.price }}</text>
|
||
<template v-if="pageData.goods.type == 5">积分</template>
|
||
</view>
|
||
|
||
<view class="num">
|
||
×{{ orderData.goods.prize_num * 1 - 1 }}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<view v-else class="price-num">
|
||
<view class="price">
|
||
<template v-if="pageData.goods.type != 5">¥</template>
|
||
<text>{{ orderData.goods.price }}</text>
|
||
<template v-if="pageData.goods.type == 5">{{ currencyName2 }}</template>
|
||
</view>
|
||
|
||
<view class="num">×{{ orderData.goods.prize_num }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<template>
|
||
<view v-if="pay_coupon" class="card-row" @click="$emit('to-coupon')">
|
||
<view class="title">优惠券</view>
|
||
|
||
<view class="row-r">
|
||
{{ couponData && orderData.coupon_price > 0 ? `-${couponData.price}` : "未选择" }}
|
||
|
||
<view class="icon">
|
||
<image :src="$img1('common/right1.png')" lazy-load></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="pay-type" v-if="pay_balance" @click="changePayMethod('useMoney')">
|
||
<view class="title flex align-center">
|
||
使用{{ balanceName }}{{ deduction_name }}¥{{ orderData.use_money }}
|
||
<text style="color: #676767; font-size: 16rpx; margin-left: 10rpx;">
|
||
(剩余:{{ orderData.money }})</text>
|
||
</view>
|
||
|
||
<view class="icon">
|
||
<image v-if="useMoney" :src="$img1('common/check_act.png')" lazy-load></image>
|
||
<image v-else :src="$img1('common/check.png')" lazy-load></image>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="pay-type" v-if="pay_currency" @click="changePayMethod('useIntegral')">
|
||
<view class="title flex align-center">
|
||
使用{{ currencyName }}{{ deduction_name }}¥{{ orderData.use_integral_money }}
|
||
<text style="color: #676767; font-size: 16rpx; margin-left: 10rpx;">(剩余:{{ orderData.integral
|
||
}})</text>
|
||
</view>
|
||
|
||
<view class="icon">
|
||
<image v-if="useIntegral" :src="$img1('common/check_act.png')" lazy-load></image>
|
||
<image v-else :src="$img1('common/check.png')" lazy-load></image>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
<view class="pay-type" v-if="pay_currency2" @click="changePayMethod('useMoney2')">
|
||
<view class="title flex align-center">
|
||
使用{{ currencyName2 }}{{ deduction_name }}¥{{ (orderData.use_score / 100).toFixed(2) }} <text
|
||
style="color: #676767; font-size: 16rpx; margin-left: 10rpx;">
|
||
(剩余:{{ orderData.score }})</text>
|
||
</view>
|
||
<view class="icon">
|
||
<image v-if="useMoney2" :src="$img1('common/check_act.png')" lazy-load></image>
|
||
<image v-else :src="$img1('common/check.png')" lazy-load></image>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<view class="rule">
|
||
<scroll-view class="rule-inner" scroll-y>
|
||
<rich-text :nodes="sendRuleData"></rich-text>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<view class="agree" @click="$emit('toggle-agree')">
|
||
<view class="icon">
|
||
<image v-if="isAgree" :src="$img1('common/check_act.png')" lazy-load></image>
|
||
<image v-else :src="$img1('common/check.png')" lazy-load></image>
|
||
</view>
|
||
|
||
我已满18岁,阅读并同意
|
||
|
||
<text @click.stop="$c.to({ url: '/pages/guize/guize?type=4' })">
|
||
《用户协议》
|
||
</text>
|
||
|
||
<text @click.stop="$c.to({ url: '/pages/guize/guize?type=5' })">
|
||
《隐私政策》
|
||
</text>
|
||
</view>
|
||
|
||
<view class="pay-btn" @click="$emit('confirm')">
|
||
<text>确认支付</text>
|
||
<text>{{
|
||
pageData.goods.type == 5 ? ` ${(orderData.use_score / 100).toFixed(2)}积分` : ` ¥${orderData.price}`
|
||
}}</text>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "OrderConfirmPopup",
|
||
props: {
|
||
// 订单数据
|
||
orderData: {
|
||
type: Object,
|
||
required: true
|
||
},
|
||
// 页面数据
|
||
pageData: {
|
||
type: Object,
|
||
required: true
|
||
},
|
||
// 是否使用余额
|
||
useMoney: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
//是否使用余额2
|
||
useMoney2: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 是否使用积分
|
||
useIntegral: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 优惠券数据
|
||
couponData: {
|
||
type: [Object, String],
|
||
default: () => null
|
||
},
|
||
// 是否同意协议
|
||
isAgree: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 规则数据
|
||
sendRuleData: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 购买数量
|
||
buyNum: {
|
||
type: Number,
|
||
default: 1
|
||
}
|
||
},
|
||
watch: {
|
||
// // 监听props变化，更新内部数据
|
||
// couponData(val) {
|
||
// console.log('couponData',val);
|
||
|
||
// },
|
||
|
||
},
|
||
data() {
|
||
//pageData.goods.type
|
||
return {
|
||
currencyName: '',
|
||
currencyName2: '',
|
||
balanceName: '',
|
||
pay_balance: 1,
|
||
pay_coupon: 1,
|
||
pay_currency: 1,
|
||
pay_currency2: 1,
|
||
pay_wechat: 1,
|
||
is_deduction: 1,
|
||
deduction_name: ''
|
||
}
|
||
},
|
||
created() {
|
||
console.log('创建了');
|
||
|
||
// 获取货币名称和余额名称
|
||
this.currencyName = this.$config.getAppSetting('currency1_name') || 'UU币';
|
||
this.currencyName2 = this.$config.getAppSetting('currency2_name') || '达达卷';
|
||
this.balanceName = this.$config.getAppSetting('balance_name') || '余额';
|
||
let goodType = this.$config.getGoodTypeFind(this.pageData.goods.type);
|
||
this.setPayType(goodType);
|
||
|
||
},
|
||
methods: {
|
||
|
||
setPayType(good_extend) {
|
||
if (good_extend != null) {
|
||
//是否显示余额支付
|
||
this.pay_balance = good_extend.pay_balance;
|
||
//是否显示优惠卷
|
||
this.pay_coupon = good_extend.pay_coupon;
|
||
//是否显示货币支付
|
||
this.pay_currency = good_extend.pay_currency;
|
||
//是否显示货币2支付
|
||
this.pay_currency2 = good_extend.pay_currency2;
|
||
//是否显示微信支付
|
||
this.pay_wechat = good_extend.pay_wechat;
|
||
//抵扣还是支付
|
||
this.is_deduction = good_extend.is_deduction;
|
||
if (this.is_deduction == 1) {
|
||
this.deduction_name = '抵扣';
|
||
} else {
|
||
this.deduction_name = '支付';
|
||
}
|
||
}
|
||
},
|
||
/**
|
||
* 打开弹窗
|
||
*/
|
||
open() {
|
||
if (this.orderData != null && this.orderData.goods_extend != null) {
|
||
this.setPayType(this.orderData.goods_extend);
|
||
}
|
||
this.$refs.popup.open();
|
||
},
|
||
|
||
/**
|
||
* 关闭弹窗
|
||
*/
|
||
close() {
|
||
this.$refs.popup.close();
|
||
},
|
||
|
||
/**
|
||
* 切换支付方式
|
||
* @param {String} method 支付方式
|
||
*/
|
||
changePayMethod(method) {
|
||
console.log('aaa');
|
||
|
||
if (this.is_deduction == 0) {
|
||
// 如果是支付模式，检查可用的支付方式数量
|
||
let availablePayMethods = 0;
|
||
if (this.pay_balance) availablePayMethods++;
|
||
if (this.pay_currency) availablePayMethods++;
|
||
if (this.pay_currency2) availablePayMethods++;
|
||
if (this.pay_wechat) availablePayMethods++;
|
||
// 如果只有一种支付方式可用，则不允许切换
|
||
if (availablePayMethods <= 1) {
|
||
return;
|
||
}
|
||
}
|
||
this.$emit('change-pay', method);
|
||
},
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.buy-pop {
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
background: #f7f7f7;
|
||
padding-bottom: 30rpx;
|
||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
||
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: -62rpx;
|
||
left: 0;
|
||
width: 750rpx;
|
||
height: 62rpx;
|
||
}
|
||
|
||
.buy-pop-hd {
|
||
padding: 20rpx 0;
|
||
padding-left: 10rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 40rpx;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
|
||
.close {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
}
|
||
|
||
.card-row {
|
||
padding: 16rpx 0;
|
||
display: flex;
|
||
height: 82rpx;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 24rpx;
|
||
border-radius: 16rpx;
|
||
background-color: #fff;
|
||
|
||
.title {
|
||
font-size: 20rpx;
|
||
font-weight: 400;
|
||
margin-left: 24rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.row-r {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
|
||
.icon {
|
||
width: 10rpx;
|
||
height: 17rpx;
|
||
color: #999999;
|
||
margin-left: 10rpx;
|
||
margin-right: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.buy-card {
|
||
border-radius: 20rpx;
|
||
padding: 30rpx 30rpx 10rpx;
|
||
background: #ffffff;
|
||
|
||
.buy-info {
|
||
display: flex;
|
||
|
||
.pic {
|
||
width: 190rpx;
|
||
height: 190rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.info-r {
|
||
width: calc(100% - 190rpx);
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
justify-content: space-between;
|
||
padding: 10rpx 0 10rpx 30rpx;
|
||
|
||
.title {
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.type {
|
||
font-size: 20rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
|
||
.price-num {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.price {
|
||
font-weight: 500;
|
||
font-size: 16rpx;
|
||
color: #333333;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
.num {
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.pay-type {
|
||
padding: 30rpx 24rpx;
|
||
border-radius: 20rpx;
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
background: #ffffff;
|
||
|
||
.icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.title {
|
||
flex: 1;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.rule {
|
||
padding: 20rpx;
|
||
border-radius: 20rpx;
|
||
box-sizing: border-box;
|
||
margin: 20rpx 0 0;
|
||
height: 160rpx;
|
||
background: #f9f8e1;
|
||
border-radius: 20rpx;
|
||
|
||
.rule-inner {
|
||
max-height: 120rpx;
|
||
font-size: 20rpx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.agree {
|
||
display: flex;
|
||
margin-top: 30rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
line-height: 32rpx;
|
||
|
||
.icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
.pay-btn {
|
||
margin: 30rpx auto 0;
|
||
width: 686rpx;
|
||
height: 84rpx;
|
||
background: url($imgurl + "common/payBtn.png") no-repeat 0 0 / 100% 100%;
|
||
display: flex;
|
||
margin-bottom: 90rpx;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 500;
|
||
color: #cdef27;
|
||
|
||
>text:nth-child(1) {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
>text:nth-child(2) {
|
||
font-size: 36rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |