订单详情弹窗
This commit is contained in:
parent
a48ca62807
commit
59e6588710
|
@ -21,7 +21,7 @@
|
||||||
<view class="wrapper" v-if="pageType === 3">
|
<view class="wrapper" v-if="pageType === 3">
|
||||||
<view class="pro-info">
|
<view class="pro-info">
|
||||||
<view class="title">订单详情</view>
|
<view class="title">订单详情</view>
|
||||||
<view class="content flex">
|
<view class="content flex" @click="rulesFun">
|
||||||
<image class="pro-img" :src="productInfo.show_pic" />
|
<image class="pro-img" :src="productInfo.show_pic" />
|
||||||
<view class="flex flex-1 flex-col">
|
<view class="flex flex-1 flex-col">
|
||||||
<view class="flex flex-justify-between name" style="margin-bottom: 12rpx">
|
<view class="flex flex-justify-between name" style="margin-bottom: 12rpx">
|
||||||
|
@ -46,6 +46,18 @@
|
||||||
订单金额:{{ orderInfo.order_amount }}
|
订单金额:{{ orderInfo.order_amount }}
|
||||||
</view>
|
</view>
|
||||||
</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>
|
||||||
<view class="btns" v-if="pageType === 3">
|
<view class="btns" v-if="pageType === 3">
|
||||||
<view class="btn pwd" @click="toPay" v-if="[1].includes(orderInfo.status)">立即付款</view>
|
<view class="btn pwd" @click="toPay" v-if="[1].includes(orderInfo.status)">立即付款</view>
|
||||||
|
@ -58,7 +70,7 @@
|
||||||
</view>
|
</view>
|
||||||
<!-- <view class="btn back" @click="backIndex">返回首页</view> -->
|
<!-- <view class="btn back" @click="backIndex">返回首页</view> -->
|
||||||
</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
|
<wd-popup
|
||||||
v-model="showPayConfig"
|
v-model="showPayConfig"
|
||||||
position="bottom"
|
position="bottom"
|
||||||
|
@ -89,7 +101,7 @@
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, reactive, ref, unref } from 'vue'
|
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'
|
import { debounce, throttle } from '@/utils/index'
|
||||||
|
|
||||||
const orderId = ref<string>('')
|
const orderId = ref<string>('')
|
||||||
|
@ -99,6 +111,8 @@ const productInfo = reactive<any>({})
|
||||||
const couponInfo = reactive<any>({})
|
const couponInfo = reactive<any>({})
|
||||||
const pageType = ref(2)
|
const pageType = ref(2)
|
||||||
const showPayConfig = ref(false)
|
const showPayConfig = ref(false)
|
||||||
|
const contentMsg = ref('')
|
||||||
|
const ismask = ref(false)
|
||||||
const payList = ref([])
|
const payList = ref([])
|
||||||
const payConfig = {
|
const payConfig = {
|
||||||
1: {
|
1: {
|
||||||
|
@ -148,6 +162,28 @@ function queryEvent() {
|
||||||
getDetail()
|
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) {
|
function sleep(delay) {
|
||||||
return new Promise((resolve) => setTimeout(resolve, delay))
|
return new Promise((resolve) => setTimeout(resolve, delay))
|
||||||
}
|
}
|
||||||
|
@ -310,6 +346,7 @@ const getDetail = () => {
|
||||||
background-color: #fafafa;
|
background-color: #fafafa;
|
||||||
}
|
}
|
||||||
.wrapper {
|
.wrapper {
|
||||||
|
position: relative;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 702rpx;
|
width: 702rpx;
|
||||||
height: 486rpx;
|
height: 486rpx;
|
||||||
|
@ -373,6 +410,87 @@ const getDetail = () => {
|
||||||
color: #6c6c6c;
|
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 {
|
.btns {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
Loading…
Reference in New Issue