shang/yfs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
zpc 2025-03-23 18:17:55 +08:00
parent d83f42d1e5
commit eed6c2d980
2 changed files with 510 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

451
components/order-confirm-popup/order-confirm-popup.vue Normal file
View File

@ -0,0 +1,451 @@
<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>
<template v-if="pageData.goods.type != 5">
<view 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>
</template>
<view v-if="pageData.goods.type == 5" class="pay-type">
<view class="title">
使用积分抵扣
{{ orderData.use_score }} <text style="color: #676767; font-size: 16rpx;">
(剩余:{{ orderData.score }})</text>
</view>
<view class="icon">
<image v-if="true" :src="$img1('common/check_act.png')" lazy-load></image>
<image v-else :src="$img1('common/check.png')" lazy-load></image>
</view>
</view>
<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>
我已满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}积分` : ` ¥${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
},
// 是否使用积分
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: ''
}
},
created() {
// 获取货币名称和余额名称
this.currencyName = this.$config.getAppSetting('currency1_name') || '积分';
this.balanceName = this.$config.getAppSetting('balance_name') || '余额';
},
methods: {
/**
* 打开弹窗
*/
open() {
this.$refs.popup.open();
},
/**
* 关闭弹窗
*/
close() {
this.$refs.popup.close();
},
/**
* 切换支付方式
* @param {String} method 支付方式
*/
changePayMethod(method) {
this.$emit('change-pay', method);
},
/**
* 检查按钮是否显示
*/
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>

233
pages/shouye/detail.vue
View File

@ -130,176 +130,23 @@
</view>
</view>
<uni-popup ref="buyPop" type="bottom">
<view v-if="orderData" 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="close('buyPop')">
<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>
<template v-if="pageData.goods.type != 5">
<view class="card-row" @click="toCoupon">
<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>
</template>
<!-- <view v-if="!(pageData.goods.type == 6 && !getBtnXianShi(0))" class="pay-title ziti">请选择抵扣方式</view> -->
<view v-if="pageData.goods.type == 5" class="pay-type">
<!-- <view class="icon">
<image :src="$img('/static/img/pay_type3.png')" lazy-load></image>
</view> -->
<view class="title">
使用积分抵扣
{{ orderData.use_score }} <text style="color: #676767; font-size: 16rpx;">
(剩余:{{ orderData.score }})</text>
</view>
<view class="icon">
<image v-if="true" :src="$img1('common/check_act.png')" lazy-load></image>
<image v-else :src="$img1('common/check.png')" lazy-load></image>
</view>
</view>
<view v-if="pageData.goods.type == 6 && !getBtnXianShi(0)"> </view>
<template v-else>
<view class="pay-type" @click="changePay('useIntegral')">
<view class="title flex align-center">
使用{{$config.getAppSetting('currency1_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" @click="changePay('useMoney')">
<!-- <view class="icon">
<image :src="$img('/static/img/pay_type2.png')" lazy-load></image>
</view> -->
<view class="title flex align-center">
使用{{$config.getAppSetting('balance_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>
</template>
<view class="rule">
<scroll-view class="rule-inner" scroll-y>
<div v-html="sendRuleData"></div>
</scroll-view>
</view>
<view class="agree" @click="isAgree = !isAgree">
<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="$c.noDouble1(confirmSubmit, [1, buyNum], choujiangloading)">
<text>确认支付</text>
<text>{{
pageData.goods.type == 5
? ` ${orderData.use_score}积分`
: ` ¥${orderData.price}`
}}</text>
</view>
</view>
</uni-popup>
<order-confirm-popup
ref="buyPop"
v-if="orderData"
:order-data="orderData"
:page-data="pageData"
:use-money="useMoney"
:use-integral="useIntegral"
:coupon-data="couponData"
:is-agree="isAgree"
:send-rule-data="sendRuleData"
:buy-num="buyNum"
@close="close('buyPop')"
@change-pay="changePay"
@toggle-agree="isAgree = !isAgree"
@to-coupon="toCoupon"
@confirm="$c.noDouble1(confirmSubmit, [1, buyNum], choujiangloading)"
></order-confirm-popup>
<buy-notice ref="buyNotice"
@confirm="$c.noDouble(confirmSubmit, [1, buyNum, true], choujiangloading)"></buy-notice>
@ -350,7 +197,12 @@
</template>
<script>
import OrderConfirmPopup from '@/components/order-confirm-popup/order-confirm-popup.vue'
export default {
components: {
OrderConfirmPopup
},
data() {
return {
optData: "",
@ -612,7 +464,14 @@
this.orderData = res.data;
this.open("buyPop");
// 使用this.$nextTick确保视图已更新，组件已挂载
this.$nextTick(() => {
if (this.$refs.buyPop) {
this.$refs.buyPop.open();
} else {
console.error('buyPop组件引用不存在');
}
});
}
if (type == 1) {
@ -811,17 +670,43 @@
return false;
},
close(e) {
this.$refs[e].close();
console.log('关闭弹窗:', e, this.$refs[e]);
if (e === 'buyPop') {
if (this.$refs[e]) {
this.$refs[e].close();
} else {
console.error('找不到buyPop组件引用');
}
} else {
if (this.$refs[e]) {
this.$refs[e].close();
} else {
console.error('找不到组件引用:', e);
}
}
if (e == "resPop") {
if (this.prizeData["user_coupon"] != null) {
if (this.prizeData && this.prizeData["user_coupon"] != null) {
this.$refs["couponPop"].open(this.prizeData["user_coupon"]);
}
}
},
open(e) {
this.$refs[e].open();
console.log('打开弹窗:', e, this.$refs[e]);
if (e === 'buyPop') {
if (this.$refs[e]) {
this.$refs[e].open();
} else {
console.error('找不到buyPop组件引用');
}
} else {
if (this.$refs[e]) {
this.$refs[e].open();
} else {
console.error('找不到组件引用:', e);
}
}
},
},
};