订单详情弹窗
This commit is contained in:
parent
a48ca62807
commit
59e6588710
|
|
@ -21,7 +21,7 @@
|
|||
<view class="wrapper" v-if="pageType === 3">
|
||||
<view class="pro-info">
|
||||
<view class="title">订单详情</view>
|
||||
<view class="content flex">
|
||||
<view class="content flex" @click="rulesFun">
|
||||
<image class="pro-img" :src="productInfo.show_pic" />
|
||||
<view class="flex flex-1 flex-col">
|
||||
<view class="flex flex-justify-between name" style="margin-bottom: 12rpx">
|
||||
|
|
@ -46,6 +46,18 @@
|
|||
订单金额：{{ orderInfo.order_amount }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-rules" @click="rulesFun">使用说明</view>
|
||||
<view class="mask flex_items flex_center" v-if="ismask" @click="closemsk">
|
||||
<view class="mk plr50" style="">
|
||||
<view class="flex_between flex_items mt40 mlr30">
|
||||
<view></view>
|
||||
<text class="f30 bold" style="color: #003a6e">使用说明</text>
|
||||
<view class="close" @click="closemsk"></view>
|
||||
</view>
|
||||
<rich-text v-if="contentMsg" :nodes="contentMsg"></rich-text>
|
||||
<view v-else class="f24 mt30 mlr30" style="color: #2b6da8"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btns" v-if="pageType === 3">
|
||||
<view class="btn pwd" @click="toPay" v-if="[1].includes(orderInfo.status)">立即付款</view>
|
||||
|
|
@ -58,7 +70,7 @@
|
|||
</view>
|
||||
<!-- <view class="btn back" @click="backIndex">返回首页</view> -->
|
||||
</view>
|
||||
<view class="pay-tips" @click="refresh" v-if="pageType == 3">我已完成支付,去刷新</view>
|
||||
<!-- <view class="pay-tips" @click="refresh" v-if="pageType == 3">我已完成支付,去刷新</view> -->
|
||||
<wd-popup
|
||||
v-model="showPayConfig"
|
||||
position="bottom"
|
||||
|
|
@ -89,7 +101,7 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, unref } from 'vue'
|
||||
import { queryOrderDetail, goPay, getPayConfig } from './api'
|
||||
import { queryOrderDetail, goPay, getPayConfig, getProductDetail } from './api'
|
||||
import { debounce, throttle } from '@/utils/index'
|
||||
|
||||
const orderId = ref<string>('')
|
||||
|
|
@ -99,6 +111,8 @@ const productInfo = reactive<any>({})
|
|||
const couponInfo = reactive<any>({})
|
||||
const pageType = ref(2)
|
||||
const showPayConfig = ref(false)
|
||||
const contentMsg = ref('')
|
||||
const ismask = ref(false)
|
||||
const payList = ref([])
|
||||
const payConfig = {
|
||||
1: {
|
||||
|
|
@ -148,6 +162,28 @@ function queryEvent() {
|
|||
getDetail()
|
||||
}
|
||||
|
||||
function closemsk() {
|
||||
ismask.value = false
|
||||
}
|
||||
|
||||
async function rulesFun() {
|
||||
const params = {
|
||||
goods_id: productInfo.activity_goods_id,
|
||||
activity_code: activityCode.value,
|
||||
}
|
||||
ismask.value = true
|
||||
const res: any = await getProductDetail(params)
|
||||
if (res.code === 200) {
|
||||
const msg = res.data.remark || ''
|
||||
contentMsg.value = msg ? `<div class="mast-content f24 mt30 mlr30">${msg}</div>` : ''
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.message,
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function sleep(delay) {
|
||||
return new Promise((resolve) => setTimeout(resolve, delay))
|
||||
}
|
||||
|
|
@ -310,6 +346,7 @@ const getDetail = () => {
|
|||
background-color: #fafafa;
|
||||
}
|
||||
.wrapper {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 702rpx;
|
||||
height: 486rpx;
|
||||
|
|
@ -373,6 +410,87 @@ const getDetail = () => {
|
|||
color: #6c6c6c;
|
||||
}
|
||||
}
|
||||
.close {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
z-index: 1;
|
||||
background-image: url('@/assets/images/jlgh/guan.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.mk {
|
||||
width: 550rpx;
|
||||
height: 900rpx;
|
||||
background-image: url('@/assets/images/jlgh/mk.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.flex_items {
|
||||
align-items: center;
|
||||
}
|
||||
.flex_center {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.plr50 {
|
||||
padding-right: 50rpx;
|
||||
padding-left: 50rpx;
|
||||
}
|
||||
.flex_between {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.mt40 {
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
.mlr30 {
|
||||
margin-right: 30rpx;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
.f30 {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.f24 {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.mt30 {
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
.mt20 {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.mast-content {
|
||||
height: 580rpx !important;
|
||||
overflow-y: auto;
|
||||
color: #2b6da8;
|
||||
}
|
||||
|
||||
.order-rules {
|
||||
position: absolute;
|
||||
bottom: 16rpx;
|
||||
right: 24rpx;
|
||||
width: 124rpx;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(90deg, #ea5c41 0%, #ec7852 100%);
|
||||
border-radius: 23rpx;
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
display: flex;
|
||||
|
|
|
|||
Loading…
Reference in New Issue