457 lines
19 KiB
Vue
457 lines
19 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">绉垎</template>
|
||
</view>
|
||
|
||
<view class="num">脳{{ orderData.goods.prize_num }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<payment-manager
|
||
:order-data="orderData"
|
||
:page-data="pageData"
|
||
:use-money="useMoney"
|
||
:use-integral="useIntegral"
|
||
:coupon-data="couponData"
|
||
@change-pay="changePayMethod"
|
||
@to-coupon="$emit('to-coupon')"
|
||
@price-changed="onPriceChanged"
|
||
></payment-manager>
|
||
|
||
<view v-if="pageData.goods.type == 6 && !getBtnXianShi()"> </view>
|
||
|
||
<template v-else>
|
||
<view class="pay-type" @click="changePayMethod('useIntegral')">
|
||
<view class="title flex align-center">
|
||
浣跨敤{{currencyName}}鎶垫墸楼{{ 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" @click="changePayMethod('useMoney')">
|
||
<view class="title flex align-center">
|
||
浣跨敤{{balanceName}}鎶垫墸楼{{ 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>
|
||
</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>
|
||
|
||
鎴戝凡婊?8宀?闃呰骞跺悓鎰?
|
||
|
||
<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}绉垎` : ` 楼${finalPrice}`
|
||
}}</text>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</template>
|
||
|
||
<script>
|
||
import PaymentManager from '@/components/payment-manager/payment-manager.vue';
|
||
|
||
export default {
|
||
name: "OrderConfirmPopup",
|
||
components: {
|
||
PaymentManager
|
||
},
|
||
props: {
|
||
// 璁㈠崟鏁版嵁
|
||
orderData: {
|
||
type: Object,
|
||
required: true
|
||
},
|
||
// 椤甸潰鏁版嵁
|
||
pageData: {
|
||
type: Object,
|
||
required: true
|
||
},
|
||
// 鏄惁浣跨敤浣欓
|
||
useMoney: {
|
||
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
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
currencyName: '',
|
||
balanceName: '',
|
||
// 鏈€缁堟敮浠樹环鏍?
|
||
finalPrice: 0
|
||
}
|
||
},
|
||
created() {
|
||
// 鑾峰彇璐у竵鍚嶇О鍜屼綑棰濆悕绉?
|
||
this.currencyName = this.$config.getAppSetting('currency1_name') || '绉垎';
|
||
this.balanceName = this.$config.getAppSetting('balance_name') || '浣欓';
|
||
},
|
||
mounted() {
|
||
// 鍒濆鍖栦环鏍?
|
||
this.finalPrice = this.orderData ? this.orderData.price : 0;
|
||
},
|
||
methods: {
|
||
/**
|
||
* 鎵撳紑寮圭獥
|
||
*/
|
||
open() {
|
||
this.$refs.popup.open();
|
||
},
|
||
|
||
/**
|
||
* 鍏抽棴寮圭獥
|
||
*/
|
||
close() {
|
||
this.$refs.popup.close();
|
||
},
|
||
|
||
/**
|
||
* 鍒囨崲鏀粯鏂瑰紡
|
||
* @param {String} method 鏀粯鏂瑰紡
|
||
*/
|
||
changePayMethod(method) {
|
||
this.$emit('change-pay', method);
|
||
},
|
||
|
||
/**
|
||
* 浠锋牸鍙樻洿鍥炶皟
|
||
* @param {Object} priceInfo 浠锋牸淇℃伅
|
||
*/
|
||
onPriceChanged(priceInfo) {
|
||
if (priceInfo) {
|
||
this.finalPrice = priceInfo.finalPrice;
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 妫€鏌ユ寜閽槸鍚︽樉绀?
|
||
*/
|
||
getBtnXianShi() {
|
||
if (this.pageData == null || this.pageData["xuangou"] == null) {
|
||
return true;
|
||
}
|
||
let xuangou = this.pageData["xuangou"];
|
||
if (xuangou.quanju_xiangou == 0) {
|
||
return true;
|
||
}
|
||
return false;
|
||
}
|
||
}
|
||
}
|
||
</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: 500;
|
||
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-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
margin-left: 24rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.row-r {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN;
|
||
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>
|