482 lines
11 KiB
Vue
482 lines
11 KiB
Vue
<template>
|
||
<view class="confirm-order-page">
|
||
<view class="nav" :style="{'padding-top': statusBarHeight}">
|
||
<image src="@/static/mine/fh.png" mode="" class="nav-back" @click="goBack"></image>
|
||
<view class="nav-title">确认订单</view>
|
||
<view class="nav-back"></view>
|
||
</view>
|
||
<scroll-view class="scroll-list-view" scroll-y="true" scroll-with-animation>
|
||
<view class="shop">
|
||
<view class="shop-detail">
|
||
<view class="shop-img" :style="{'backgroundImage':`url(${detailData.coverResource.url})`}"></view>
|
||
<view class="detail">
|
||
<view class="detail-title">{{detailData.name}}</view>
|
||
<view class="detail-num">{{statusObj[detailData.type]}}</view>
|
||
<view class="detail-price">
|
||
<text class="detail-sym">¥</text>
|
||
{{detailData.amount.sale}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="pay">
|
||
<!-- <view class="pay-item">
|
||
<view class="item-name">
|
||
<view class="pay-img-main" >
|
||
<image src="@/static/index/hb.png" style="width: 26rpx;height: 27rpx" class="pay-img" mode=""></image>
|
||
</view>
|
||
优惠券
|
||
</view>
|
||
<view class="coupon">
|
||
<view class="coupon-price">- ¥8</view>
|
||
<view class="coupon-num">3张可用</view>
|
||
<image src="@/static/index/hb-g.png" mode="" class="coupon-arr"></image>
|
||
</view>
|
||
</view> -->
|
||
|
||
<view class="pay-item" v-for="(item,index) in payList" :key="index" @click="payChange(index,item)">
|
||
<view class="item-name">
|
||
<view class="pay-img-main">
|
||
<image :src="item.img" :style="{width:item.width,height:item.height}" class="pay-img"
|
||
mode="" v-if="item.img"></image>
|
||
<view :style="{width:item.width,height:item.height}" v-else></view>
|
||
</view>
|
||
{{item.label}}
|
||
</view>
|
||
<image src="@/static/index/g.png" mode="" class="item-img" v-if="item.visible"></image>
|
||
<view class="item-img-view" v-else></view>
|
||
</view>
|
||
<view class="coupon-total">
|
||
<!-- 优惠<text class="price">¥8</text> -->
|
||
实付<text class="total">¥{{detailData.amount.sale}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="main">
|
||
<view class="title">买家需知</view>
|
||
<view class="main-txt">1.商品抽奖存在概率性，付费请谨慎。</view>
|
||
<view class="main-txt">2.本公司惊喜礼盒开箱概率已经过公证处鉴定(公证后台
|
||
设置与app展示一致)。</view>
|
||
<view class="main-txt">3.惊喜礼盒一经购买不支持退款(除商品质量问题)，但可
|
||
8折回收后自动兑换成繁豆用于兑换商品，繁豆为平台积
|
||
分，暂不支持提现。</view>
|
||
<view class="main-txt">4.本平台禁止未成年人消费。</view>
|
||
<view class="main-txt">5.受疫情影响，部分地区物流公司暂时无法接单及派送，
|
||
为此给您带来的不便我们深表歉意。请您耐心等待我们
|
||
会在疫情解除的第一时间为您派件。</view>
|
||
</view>
|
||
<view class="footer">
|
||
<view class="footer-detail">
|
||
<text class="footer-total">合计：</text>
|
||
<text class="footer-sym">¥</text>
|
||
<text class="footer-price">{{detailData.amount.sale}}</text>
|
||
</view>
|
||
<view class="footer-btn" @click="pay">确认支付</view>
|
||
</view>
|
||
</scroll-view>
|
||
<!-- 所有页面的弹框 -->
|
||
<page-popup page="/pages/index/confirmOrder"></page-popup>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { myMixins } from "@/mixins/mixins.js";
|
||
import {
|
||
boxOrderReviewApi,
|
||
boxOrderApi,
|
||
boxOrderPaidApi
|
||
} from '@/API/index.js'
|
||
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight ? `${uni.getSystemInfoSync().statusBarHeight}px` : '20px'
|
||
export default {
|
||
mixins: [myMixins],
|
||
data() {
|
||
return {
|
||
statusBarHeight,
|
||
boxId: "",
|
||
type: "",
|
||
buyMethod: "",
|
||
detailData: {
|
||
coverResource: {},
|
||
amount: {}
|
||
},
|
||
statusObj: {
|
||
SINGLE: "一发入魂",
|
||
TRIPLE: "三连抽",
|
||
PENTA: "五连抽",
|
||
},
|
||
|
||
payList: [],
|
||
payType: '',
|
||
timer: null
|
||
}
|
||
},
|
||
onLoad(opation) {
|
||
this.boxId = opation.boxId
|
||
this.type = opation.type
|
||
this.getDetail()
|
||
},
|
||
methods: {
|
||
goBack() {
|
||
uni.navigateBack()
|
||
},
|
||
// 订单预览
|
||
getDetail() {
|
||
boxOrderReviewApi({
|
||
boxId: this.boxId,
|
||
type: this.type
|
||
}).then(res => {
|
||
if (res.code === 200) {
|
||
this.detailData = res.data
|
||
this.detailData.methods.forEach(item => {
|
||
if (item === 'ALIPAY') {
|
||
this.payList.push({
|
||
label: "支付宝支付",
|
||
type: 'ALIPAY',
|
||
visible: false,
|
||
img: '../../static/index/zfb.png',
|
||
width: '30rpx',
|
||
height: '30rpx'
|
||
})
|
||
} else if (item === 'WECHAT') {
|
||
this.payList.push({
|
||
label: "微信支付",
|
||
type: 'WECHAT',
|
||
visible: false,
|
||
img: '../../static/index/wx.png',
|
||
width: '34rpx',
|
||
height: '29rpx'
|
||
})
|
||
} else if (item === 'POINTS') {
|
||
this.payList.push({
|
||
label: "积分支付",
|
||
type: 'POINTS',
|
||
visible: false,
|
||
img: '../../static/mine/jf.png',
|
||
width: '30rpx',
|
||
height: '31rpx'
|
||
})
|
||
} else if (item === 'NONE') {
|
||
this.payList.push({
|
||
label: "无需支付",
|
||
type: 'NONE',
|
||
visible: false,
|
||
img: '',
|
||
width: '30rpx',
|
||
height: '31rpx'
|
||
})
|
||
}
|
||
})
|
||
this.payList[0].visible = true
|
||
this.payType = this.payList[0].type
|
||
}
|
||
})
|
||
},
|
||
// 切换支付方式
|
||
payChange(index, item) {
|
||
this.payList.forEach((v, i) => {
|
||
v.visible = false;
|
||
})
|
||
this.payType = item.type
|
||
this.payList[index].visible = !this.payList[index].visible
|
||
},
|
||
pay() {
|
||
let data = {
|
||
boxId: this.boxId,
|
||
type: this.type,
|
||
method: this.payType
|
||
}
|
||
uni.showLoading()
|
||
boxOrderApi(data).then(res => {
|
||
uni.hideLoading()
|
||
if (res.code === 200) {
|
||
//
|
||
this.getBoxOrderPaid(res.data.no)
|
||
this.timer = setInterval(() => {
|
||
this.getBoxOrderPaid(res.data.no)
|
||
}, 3000);
|
||
// uni.navigateTo({
|
||
// url: `/pages/index/paySuccess?no=${res.data.no}`
|
||
// })
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
|
||
},
|
||
getBoxOrderPaid(no) {
|
||
boxOrderPaidApi({
|
||
no
|
||
}).then(payResult => {
|
||
if (payResult.data) {
|
||
clearInterval(this.timer); // 清除定时器
|
||
this.timer = null;
|
||
this.$api.msg('支付成功')
|
||
uni.redirectTo({
|
||
url: `/pages/index/order?no=${no}&boxId=${this.boxId}&name=${this.detailData.name}&type=${this.detailData.type}&sale=${this.detailData.amount.sale}`
|
||
})
|
||
uni.hideLoading()
|
||
}
|
||
}).catch(err => {
|
||
clearInterval(this.timer); // 清除定时器
|
||
this.timer = null;
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
},
|
||
onUnload() {
|
||
// 在页面离开时清除定时器
|
||
clearInterval(this.timer);
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-image: url('@/static/index/bg.png');
|
||
background-size: 100%;
|
||
}
|
||
|
||
.confirm-order-page {
|
||
.nav {
|
||
z-index: 100;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 23rpx;
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
|
||
.nav-back {
|
||
width: 19rpx;
|
||
height: 34rpx;
|
||
z-index: 11;
|
||
}
|
||
|
||
.nav-title {
|
||
font-weight: 500;
|
||
font-size: 34rpx;
|
||
color: #000000;
|
||
}
|
||
}
|
||
|
||
.scroll-list-view {
|
||
height: 100vh;
|
||
padding-top: 130rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.shop {
|
||
width: 706rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 10rpx;
|
||
padding: 19rpx 16rpx 32rpx 20rpx;
|
||
margin-left: 22rpx;
|
||
|
||
.shop-detail {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.shop-img {
|
||
width: 146rpx;
|
||
height: 146rpx;
|
||
background-size: 100%;
|
||
background-position: 50%;
|
||
background-repeat: no-repeat;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.detail {
|
||
margin-left: 21rpx;
|
||
|
||
.detail-title {
|
||
width: 400rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
color: #333;
|
||
|
||
}
|
||
|
||
.detail-num {
|
||
margin-top: 10rpx;
|
||
font-size: 22rpx;
|
||
color: #888888;
|
||
}
|
||
|
||
.detail-price {
|
||
margin-top: 17rpx;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #F04236;
|
||
|
||
.detail-sym {
|
||
// font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.pay {
|
||
margin-top: 26rpx;
|
||
border-top: 1px solid #EEEEEE;
|
||
|
||
.pay-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 29rpx;
|
||
|
||
.item-name {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.pay-img-main {
|
||
width: 35rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.pay-img {}
|
||
}
|
||
|
||
.coupon {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.coupon-price{
|
||
font-size: 28rpx;
|
||
color: #EF4235;
|
||
}
|
||
.coupon-num{
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
background: #F04437;
|
||
border-radius: 8rpx;
|
||
padding: 6rpx 12rpx;
|
||
}
|
||
|
||
.coupon-arr {
|
||
margin-left: 13rpx;
|
||
width: 12rpx;
|
||
height: 22rpx;
|
||
}
|
||
}
|
||
|
||
.item-img {
|
||
width: 41rpx;
|
||
height: 41rpx;
|
||
}
|
||
|
||
.item-img-view {
|
||
width: 41rpx;
|
||
height: 41rpx;
|
||
border-radius: 50%;
|
||
border: 2rpx solid #888888;
|
||
}
|
||
}
|
||
|
||
.coupon-total {
|
||
border-top: 1px solid #EEEEEE;
|
||
padding-top: 35rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
margin-top: 27rpx;
|
||
|
||
.price {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #EF4235;
|
||
margin: 0 38rpx 0 10rpx;
|
||
}
|
||
|
||
.total {
|
||
margin-left: 19rpx;
|
||
font-weight: bold;
|
||
font-size: 40rpx;
|
||
color: #EF4235;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.main {
|
||
padding: 45rpx 71rpx 0 26rpx;
|
||
|
||
.title {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
|
||
.main-txt {
|
||
font-size: 24rpx;
|
||
color: #888888;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
position: fixed;
|
||
bottom: 54rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 22rpx 0 76rpx;
|
||
|
||
.footer-detail {
|
||
|
||
.footer-total {
|
||
display: inline-block;
|
||
font-size: 20rpx;
|
||
color: #888888;
|
||
}
|
||
|
||
.footer-sym {
|
||
display: inline-block;
|
||
margin-left: 8rpx;
|
||
font-size: 30rpx;
|
||
color: #FF6256;
|
||
}
|
||
|
||
.footer-price {
|
||
display: inline-block;
|
||
// font-family: YouSheBiaoTiHei;
|
||
font-size: 52rpx;
|
||
color: #FF6256;
|
||
font-weight: 800;
|
||
margin-left: 5rpx;
|
||
}
|
||
}
|
||
|
||
.footer-btn {
|
||
width: 323rpx;
|
||
height: 88rpx;
|
||
background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
|
||
border-radius: 44rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
</style> |