更新了AI换装，修复了分包导致的页面丢失问题
This commit is contained in:
parent
5e28f0f6c2
commit
1e4d995ff3
257
pages/subPack/changeClothes/changeClothes.vue
Normal file
257
pages/subPack/changeClothes/changeClothes.vue
Normal file
|
|
@ -0,0 +1,257 @@
|
|||
<template>
|
||||
<view class="flex-col page" :style="{ backgroundImage: 'url(' + bkgPubilcPath + ')' }">
|
||||
<view class="flex-row section_2">
|
||||
<image
|
||||
class="shrink-0 image"
|
||||
src="https://www.carboner.cn:8888/api/file/downloadFile?objectKey=test_joXykCyMkUPipYIi_173dc3d4a3850b0bb353efc1a2b99624.png"
|
||||
/>
|
||||
<view class="flex-col flex-1 ml-7">
|
||||
<text class="self-start font text">AI换装</text>
|
||||
<text class="self-stretch text_2 mt-6">
|
||||
无需更衣室，轻松试穿全球华服！AI智能试衣系统，1秒精准贴合身形，真实还原汉服非遗刺绣、丝绸光泽、现代剪裁等细节。所见即所穿——助你告别网购“想象落差”，让每一件衣服都为你量身呈现。
|
||||
</text>
|
||||
<text class="self-start text_3 mt-6">注：收集的人像将会在本日自动删除(换装服务由即梦AI提供)</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col items-start section_3">
|
||||
<text class="font text_4">肖像照</text>
|
||||
<uni-file-picker
|
||||
fileMediatype="image"
|
||||
@select="select"
|
||||
limit="1"
|
||||
/>
|
||||
</view>
|
||||
<view class="flex-col items-start section_4">
|
||||
<text class="font">AI换装效果</text>
|
||||
<text class="text_5 mt-14">说明：AI换装仅供参考，到店试装最佳</text>
|
||||
<image
|
||||
class="image_3 "
|
||||
:src="showImg"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</view>
|
||||
<view class="flex-col justify-start items-center section_5">
|
||||
<view class="flex-col justify-start items-center text-wrapper" @click="changeClothing"><text class="text_6">一键换装</text></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 遮罩层 -->
|
||||
<view v-if="isShow" class="overlay"></view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted,ref } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { baseUrl, domain } from '../../../api/request';
|
||||
import { publicPath,bkgPubilcPath } from '../../../common/globalImagesUrl';
|
||||
|
||||
const clothesImg = ref('');
|
||||
const modelImg = ref('')
|
||||
const cookie = wx.getStorageSync("cookie") //请求头
|
||||
const responseObj = ref('') //后端返回的对象
|
||||
const showImg = ref('https://www.carboner.cn:8888/api/file/downloadFile?objectKey=test_XuemOldYRiPrCypr_3e9ee919e2a801d0cb845076a6d3f486.png') //展示样片
|
||||
|
||||
onLoad((options)=>{
|
||||
console.log('服装图片URL---->',options.imgUrl);
|
||||
clothesImg.value = publicPath + options.imgUrl;
|
||||
})
|
||||
|
||||
//肖像上传
|
||||
const select = async (e)=> {
|
||||
// console.log('选择文件：',e.tempFiles[0].file);
|
||||
const res = await uni.uploadFile({
|
||||
url: baseUrl + '/file/upload',
|
||||
filePath: e.tempFilePaths[0],
|
||||
name: 'file',
|
||||
header: {
|
||||
cookie
|
||||
},
|
||||
formData: {
|
||||
biz: "test"
|
||||
}
|
||||
})
|
||||
console.log('上传结果为--->',JSON.parse(res.data));
|
||||
responseObj.value = JSON.parse(res.data);
|
||||
if(responseObj.value.code === 1) {
|
||||
modelImg.value = publicPath + responseObj.value.data;
|
||||
}
|
||||
console.log('模特url为--->',modelImg.value);
|
||||
}
|
||||
|
||||
|
||||
//防抖
|
||||
let debounceTimer = null;
|
||||
let wxPayTimer = null;
|
||||
let loading = false;
|
||||
let isLoading = ref(false)
|
||||
let isShow = ref(false)
|
||||
|
||||
|
||||
//一键换装 + 防抖
|
||||
const changeClothing = async()=> {
|
||||
if(modelImg.value === '') {
|
||||
uni.showModal({
|
||||
content: '模特图片不能为空'
|
||||
})
|
||||
return
|
||||
}
|
||||
showLoading()
|
||||
isShow.value = true //打开遮罩
|
||||
// console.log('服装url----->',clothesImg.value);
|
||||
// console.log('模特url--->',modelImg.value);
|
||||
const res = await uni.request({
|
||||
url: domain + '/clothes/facelift',
|
||||
method: 'GET',
|
||||
header: {
|
||||
cookie
|
||||
},
|
||||
data: {
|
||||
modelURL: modelImg.value,
|
||||
clothesURL: clothesImg.value
|
||||
}
|
||||
})
|
||||
console.log('----->返回结果',res.data);
|
||||
if(res.data.code === 1) {
|
||||
hideLoading()
|
||||
console.log('换装返回的结果---->',res.data.data);
|
||||
showImg.value = res.data.data
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const wxPayFd = (order) => { //微信支付按钮防抖
|
||||
showLoading()
|
||||
isShow.value = true //打开遮罩
|
||||
}
|
||||
|
||||
function showLoading() { //加载弹窗
|
||||
if (!loading) {
|
||||
wx.showLoading({
|
||||
title: '加载中...',
|
||||
});
|
||||
loading = true;
|
||||
isLoading.value = true
|
||||
}
|
||||
}
|
||||
|
||||
function hideLoading() { //关闭弹窗
|
||||
if (loading) {
|
||||
wx.hideLoading();
|
||||
loading = false;
|
||||
isLoading.value = false
|
||||
isShow.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.4); /* 半透明黑色背景 */
|
||||
z-index: 999;
|
||||
}
|
||||
.ml-7 {
|
||||
margin-left: 13.13rpx;
|
||||
}
|
||||
.mt-9 {
|
||||
margin-top: 16.88rpx;
|
||||
}
|
||||
.page {
|
||||
padding-top: 26.25rpx;
|
||||
background-color: #ffffff;
|
||||
// background-image: url('https://ide.code.fun/api/image?token=6815eae14ae84d00122e93ec&name=cf84478130b4f1e349c5b866f9c1a049.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.section_2 {
|
||||
margin-left: 16.88rpx;
|
||||
margin-right: 15rpx;
|
||||
padding: 10.2rpx 9.38rpx 15rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 18.75rpx;
|
||||
}
|
||||
.image {
|
||||
margin-top: 4.8rpx;
|
||||
border-radius: 28.13rpx;
|
||||
width: 191.25rpx;
|
||||
height: 191.25rpx;
|
||||
}
|
||||
.font {
|
||||
font-size: 37.5rpx;
|
||||
line-height: 36.04rpx;
|
||||
color: #000000;
|
||||
}
|
||||
.text {
|
||||
color: #323233;
|
||||
}
|
||||
.text_2 {
|
||||
color: #6b6e72;
|
||||
font-size: 22.5rpx;
|
||||
line-height: 26.25rpx;
|
||||
}
|
||||
.text_3 {
|
||||
color: #6b6e72;
|
||||
font-size: 15rpx;
|
||||
line-height: 14.59rpx;
|
||||
}
|
||||
.section_3 {
|
||||
margin: 20.63rpx 15rpx 0 16.88rpx;
|
||||
padding: 19.57rpx 16.88rpx 24.38rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 18.75rpx;
|
||||
}
|
||||
.text_4 {
|
||||
margin-left: 2.17rpx;
|
||||
margin-bottom: 16.88rpx;
|
||||
line-height: 35.89rpx;
|
||||
}
|
||||
.image_2 {
|
||||
width: 256.88rpx;
|
||||
height: 255rpx;
|
||||
}
|
||||
.section_4 {
|
||||
margin: 20.63rpx 15rpx 0 16.88rpx;
|
||||
padding: 30.13rpx 17.18rpx 73.13rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 18.75rpx;
|
||||
}
|
||||
.text_5 {
|
||||
color: #6b6e72;
|
||||
font-size: 20.63rpx;
|
||||
line-height: 19.82rpx;
|
||||
}
|
||||
.image_3 {
|
||||
// margin-left: 5.32rpx;
|
||||
// width: 673.13rpx;
|
||||
// height: 673.13rpx;
|
||||
}
|
||||
.section_5 {
|
||||
// margin-top: 181.88rpx;
|
||||
padding: 16.88rpx 0 15rpx;
|
||||
background-color: #ffffff;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.text-wrapper {
|
||||
padding: 20.16rpx 0 22.28rpx;
|
||||
background-color: #ffaaa5;
|
||||
border-radius: 75rpx;
|
||||
width: 536.25rpx;
|
||||
}
|
||||
.text_6 {
|
||||
color: #ffffff;
|
||||
font-size: 30rpx;
|
||||
line-height: 28.84rpx;
|
||||
}
|
||||
@import url(../../../common/css/global.css);
|
||||
</style>
|
||||
101
pages/subPack/clothesPop/clothesPop.vue
Normal file
101
pages/subPack/clothesPop/clothesPop.vue
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<movable-area class="movableArea">
|
||||
<movable-view class="movableView" :x="x" :y="y" direction="all" @tap="onTouchend">
|
||||
<image :src="doll" mode="widthFix" class="iconImage"></image>
|
||||
<view class="fontBubble">AI试衣</view>
|
||||
</movable-view>
|
||||
</movable-area>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, nextTick, onMounted, onUnmounted, defineProps } from 'vue'
|
||||
import { storeHomeUrl,publicPath } from '../../../common/globalImagesUrl';
|
||||
import emitter from '../../../utils/emitter';
|
||||
|
||||
const doll = ref(publicPath + 'test_OVXdpOvbYwpUHkEx_jimeng_2025_05_06_634.jpeg')
|
||||
|
||||
const x = ref(375)
|
||||
const y = ref(378)
|
||||
// const old = ref({
|
||||
// x: 30,
|
||||
// y: 30
|
||||
// })
|
||||
|
||||
const props = defineProps({
|
||||
clothesImgUrl : String
|
||||
})
|
||||
|
||||
onMounted(()=>{
|
||||
})
|
||||
|
||||
onUnmounted(()=>{})
|
||||
|
||||
const onTouchend =()=> { //点击的方法
|
||||
console.log('按钮被触发');
|
||||
uni.navigateTo({
|
||||
url: '/pages/subPack/changeClothes/changeClothes?imgUrl=' + props.clothesImgUrl
|
||||
})
|
||||
}
|
||||
|
||||
const onChange = (e) => { //移动时的方法
|
||||
// old.value.x = e.detail.x
|
||||
// old.value.y = e.detail.y
|
||||
// console.log('x---->',e.detail.x);
|
||||
console.log('y---->',e.detail.y);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
position: relative;
|
||||
top: 40;
|
||||
left: 40;
|
||||
/* height: 100vh; */
|
||||
}
|
||||
|
||||
.movableArea {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 999;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.movableView {
|
||||
pointer-events: auto;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
padding: 10rpx;
|
||||
border-radius: 100%;
|
||||
/* border: 2px solid #33A3DC; */
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.iconImage {
|
||||
display: block;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
margin-left: 14rpx;
|
||||
}
|
||||
|
||||
.contact {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
border-radius: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fontBubble {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
</style>
|
||||
37
pages/subPack/my-order/component/nav.vue
Normal file
37
pages/subPack/my-order/component/nav.vue
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<view class="flex-row items-center equal-division-item" style="display: flex; align-items: center;">
|
||||
<image
|
||||
class="shrink-0 image_3"
|
||||
:src="myOrderUrl + '/component/nav.png'"
|
||||
/>
|
||||
<text class="ml-2 font text_18" style="margin-left: 5rpx;">导航</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import { getFonts } from '@/common/globalFont';
|
||||
import { myOrderUrl } from "@/common/globalImagesUrl";
|
||||
onLoad(() => {
|
||||
getFonts()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.equal-division-item {
|
||||
padding: 15rpx 0;
|
||||
}
|
||||
.image_3 {
|
||||
width: 46.88rpx;
|
||||
height: 46.88rpx;
|
||||
}
|
||||
.font {
|
||||
font-size: 26.25rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 25.84rpx;
|
||||
color: #e79ea1;
|
||||
}
|
||||
.text_18 {
|
||||
line-height: 24.62rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,704 @@
|
|||
<template>
|
||||
<view class="flex-col justify-start relative page" :style="{ backgroundImage: 'url(' + bkgPubilcPath + ')' }">
|
||||
<view class="section" :style="{ backgroundImage: 'url(' + bkgPubilcPath + ')' }"></view>
|
||||
<view class="flex-row section_2 pos">
|
||||
<image
|
||||
class="self-center image"
|
||||
:src="orderStatusObj.img"
|
||||
/>
|
||||
<view class="ml-6 flex-col items-start flex-1 self-start group">
|
||||
<text class="font text" :style="{ marginTop: offset }">{{ orderStatusObj.msg }}</text>
|
||||
<text class="mt-6 font_2 text_2" v-if="isShowText">{{ orderStatusObj.tips }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row items-center section_3 pos_2">
|
||||
<image
|
||||
class="shrink-0 image_2"
|
||||
:src="myOrderUrl + '/myGeneralOrderDetail/dw.png'"
|
||||
/>
|
||||
<view class="ml-8 flex-col items-start flex-1">
|
||||
<text class="font text_3">{{ addressObj.name }} {{ addressObj.phone }}</text>
|
||||
<text class="font_2 text_4 mt-9">{{ addressObj.region }}{{ addressObj.detailAddress}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col section_4 pos_3">
|
||||
<view class="flex-col">
|
||||
<view class="flex-row justify-between mt-8 list-item" v-for="(item, index) in order.orderItemList" :key="index">
|
||||
<view class="flex-row">
|
||||
<image
|
||||
class="image_3" mode="aspectFill"
|
||||
:src="publicPath + item.goodSnapshot.goodImg.split(';')[0]"
|
||||
/>
|
||||
<view class="flex-col items-start ml-11">
|
||||
<text class="font text_5">{{ item.goodSnapshot.name }}</text>
|
||||
<text class="mt-58 font_3 text_6">￥{{ item.goodSnapshot.price.toFixed(2) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="self-start font_4 text_7">×{{ item.quantity }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col mt-25">
|
||||
<view class="flex-row justify-between items-baseline">
|
||||
<text class="font_5 text_8">商品金额</text>
|
||||
<text class="font_6">￥ {{ allAmount.toFixed(2) }}</text>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-baseline group_2">
|
||||
<text class="font_5 text_9">快递费用</text>
|
||||
<text class="font_6">￥{{ postage }}</text>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-baseline group_2">
|
||||
<text class="font_5 text_9">优惠券</text>
|
||||
<text class="font_6">￥{{ couponAmount.toFixed(2) }}</text>
|
||||
</view>
|
||||
<view class="flex-row justify-end items-baseline group_3">
|
||||
<text class="font text_10">应付款：</text>
|
||||
<view class="group_4">
|
||||
<text class="font_4 text_11">￥</text>
|
||||
<text class="text_12">{{ totalPrice.toFixed(2) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col group_5">
|
||||
<text class="self-start font_7 text_13">买家留言</text>
|
||||
<view class="mt-2 flex-col justify-start self-stretch text-wrapper">
|
||||
<text class="font_2 text_14" style="word-break: break-all; word-wrap: break-word;">
|
||||
{{ order.note }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-baseline group_6">
|
||||
<text class="font_7">创建时间：</text>
|
||||
<text class="font_4 text_15">{{ order.createTime }}</text>
|
||||
</view>
|
||||
<view class="flex-row justify-between group_7">
|
||||
<text class="font_5 text_16">订单编号：</text>
|
||||
<view class="flex-row items-center">
|
||||
<text class="font_4 text_17">{{ order.orderNumber }}</text>
|
||||
<view class="ml-4 flex-col justify-start items-center shrink-0 text-wrapper_2" @click="copy(order.orderNumber)">
|
||||
<text class="font_8">复制</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-between group_8" v-if="order.orderStatus === '待收货'">
|
||||
<text class="font_5 text_18">物流单号：</text>
|
||||
<view class="flex-row items-center">
|
||||
<text class="font_4 text_19">{{ order.trackingNumber }}</text>
|
||||
<view class="ml-4 flex-col justify-start items-center shrink-0 text-wrapper_2" @click="copy(order.orderNumber)">
|
||||
<text class="font_8">复制</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-center items-center group_9">
|
||||
<button style="display: flex; align-items: center; height: 60rpx;" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">
|
||||
<image
|
||||
class="image_4"
|
||||
:src="myOrderUrl + '/myGeneralOrderDetail/zxkf.png'"
|
||||
/>
|
||||
<text class="font text_20">在线客服</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-center section_5 pos_4">
|
||||
<view class="flex-row items-baseline">
|
||||
<text class="font text_21">应付款：</text>
|
||||
<view class="group_10">
|
||||
<text class="font_9 text_22">￥</text>
|
||||
<text class="font_9 text_23">{{ totalPrice.toFixed(2) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="order.operationList[0]" class="flex-col justify-start items-center text-wrapper_3" @click="wxPayFd(order)">
|
||||
<text class="font text_24">去支付</text>
|
||||
</view>
|
||||
|
||||
<view v-if="order.operationList[1]" class="flex-col justify-start items-center text-wrapper_3" @click="fd(order.id)">
|
||||
<text class="font text_24">查看物流</text>
|
||||
</view>
|
||||
|
||||
<view v-if="order.operationList[2]" class="flex-col justify-start items-center text-wrapper_3" @click="gotoDeleteOrder(order.id)">
|
||||
<text class="font text_24">删除订单</text>
|
||||
</view>
|
||||
|
||||
<view v-if="order.operationList[3]" style="background-color: #fff;" class="flex-col justify-start items-center text-wrapper_3">
|
||||
<text class="font text_24"></text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 遮罩层 -->
|
||||
<view v-if="isShow" class="overlay"></view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onMounted, ref} from 'vue'
|
||||
import { stateList } from '@/common/global.js'
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import { baseUrl } from '@/api/request';
|
||||
import { JudgeIsNullity, showTips } from '@/common/globalFunction';
|
||||
import { getFonts } from '@/common/globalFont';
|
||||
import emitter from '@/utils/emitter';
|
||||
import { myOrderUrl } from '@/common/globalImagesUrl.js';
|
||||
import { publicPath,bkgPubilcPath } from '@/common/globalImagesUrl.js';
|
||||
import { onPullDownRefresh } from '@dcloudio/uni-app';
|
||||
const order = ref({})
|
||||
const cookie = wx.getStorageSync('cookie')
|
||||
let orderId = ''
|
||||
const couponAmount = ref(0)
|
||||
const allAmount = ref(0)
|
||||
const addressObj = ref({})
|
||||
const orderStatusObj = ref({})
|
||||
let debounceTimer = null;
|
||||
let wxPayTimer = null;
|
||||
let loading = false;
|
||||
let isLoading = ref(false)
|
||||
let isShow = ref(false)
|
||||
const isShowText = ref(true)
|
||||
const offset = ref('0')
|
||||
const postage = ref(0) //快递费用
|
||||
const totalPrice = ref(0) //商品总价
|
||||
|
||||
onLoad((options) => {
|
||||
getFonts()
|
||||
orderId = options.id
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
getOrderById(orderId)
|
||||
})
|
||||
|
||||
onPullDownRefresh( async ()=>{ //下拉刷新
|
||||
await getOrderById(orderId)
|
||||
setTimeout(()=>{
|
||||
uni.stopPullDownRefresh() //停止下拉刷新
|
||||
},1000)
|
||||
})
|
||||
|
||||
|
||||
|
||||
const getOrderById = async (val) => {
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/order/get/id',
|
||||
method: 'POST',
|
||||
header: {
|
||||
cookie
|
||||
},
|
||||
data: {
|
||||
id: val
|
||||
}
|
||||
})
|
||||
console.log(res.data.data)
|
||||
order.value = res.data.data
|
||||
addressObj.value = order.value.addressSnapshot
|
||||
couponAmount.value = JudgeIsNullity(order.value.couponSnapshot) ? 0 : order.value.couponSnapshot.conditionAmount
|
||||
allAmount.value = order.value.totalAmount + couponAmount.value
|
||||
totalPrice.value = order.value.totalAmount + couponAmount.value + order.value.postage
|
||||
postage.value = order.value.postage;
|
||||
if (order.value.orderStatus === '待支付') {
|
||||
order.value.operationList = [true, false, false, false]
|
||||
orderStatusObj.value = stateList[0]
|
||||
} else if (order.value.orderStatus === '交易关闭') {
|
||||
order.value.operationList = [false, false, true, false]
|
||||
orderStatusObj.value = stateList[5]
|
||||
} else if (order.value.orderStatus === '待发货') {
|
||||
order.value.operationList = [false, false, false, true]
|
||||
orderStatusObj.value = stateList[1]
|
||||
} else if (order.value.orderStatus === '已退款') {
|
||||
order.value.operationList = [false, false, false, true]
|
||||
orderStatusObj.value = stateList[2]
|
||||
} else if (order.value.orderStatus === '交易成功') {
|
||||
order.value.operationList = [false, false, false, true]
|
||||
orderStatusObj.value = stateList[4]
|
||||
} else if (order.value.orderStatus === '待收货') {
|
||||
order.value.operationList = [false, true, false, false]
|
||||
orderStatusObj.value = stateList[3]
|
||||
}
|
||||
isShowText.value = order.value.orderStatus !== '已退款' && order.value.orderStatus !== '交易关闭'
|
||||
offset.value = isShowText.value ? '0' : '18rpx'
|
||||
}
|
||||
|
||||
|
||||
|
||||
const copy = ( orderNumber ) => {
|
||||
console.log('订单编号为--->',orderNumber);
|
||||
uni.setClipboardData({
|
||||
data: orderNumber,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '成功复制到剪贴板'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const wxPayFd = (order) => { //微信支付按钮防抖
|
||||
showLoading()
|
||||
isShow.value = true //打开遮罩
|
||||
wxPay(order.id)
|
||||
}
|
||||
|
||||
function showLoading() { //加载弹窗
|
||||
if (!loading) {
|
||||
wx.showLoading({
|
||||
title: '加载中...',
|
||||
});
|
||||
loading = true;
|
||||
isLoading.value = true
|
||||
}
|
||||
}
|
||||
|
||||
function hideLoading() { //关闭弹窗
|
||||
if (loading) {
|
||||
wx.hideLoading();
|
||||
loading = false;
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const wxPay = async( oid )=> { //传入订单id
|
||||
try {
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/wechat/payment/create',
|
||||
method: 'POST',
|
||||
header: {
|
||||
'cookie': wx.getStorageSync("cookie")
|
||||
},
|
||||
data: { id: oid }
|
||||
})
|
||||
const paymentData = res.data.data
|
||||
wx.requestPayment({
|
||||
appid: paymentData.appId,
|
||||
nonceStr: paymentData.nonceStr,
|
||||
package: paymentData.packageVal,
|
||||
paySign: paymentData.paySign,
|
||||
timeStamp: paymentData.timeStamp,
|
||||
signType: paymentData.signType,
|
||||
success(res) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '支付成功',
|
||||
showCancel: false
|
||||
})
|
||||
getOrderById(oid)
|
||||
},
|
||||
fail(e) {
|
||||
|
||||
},
|
||||
complete () {
|
||||
hideLoading()
|
||||
isShow.value = false //关闭遮罩
|
||||
}
|
||||
})
|
||||
}catch(error) {
|
||||
hideLoading()
|
||||
isShow.value = false //关闭遮罩
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '支付失败，请刷新后重试',
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const gotoDeleteOrder = (val) => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您确定要删除订单吗？',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
await deleteOrder(val)
|
||||
await emitter.emit('flushOrderList')
|
||||
routerJump('pages/my-order/myGeneralOrderDetail/myGeneralOrderDetail')
|
||||
showTips('删除成功')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const deleteOrder = async (val) => {
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/order/delete/id',
|
||||
method: 'POST',
|
||||
header: {
|
||||
cookie
|
||||
},
|
||||
data: {
|
||||
id: val
|
||||
}
|
||||
})
|
||||
console.log(res.data.data)
|
||||
}
|
||||
|
||||
|
||||
const fd = (val) => { //防抖
|
||||
clearTimeout(debounceTimer)
|
||||
showLoading()
|
||||
debounceTimer = setTimeout(async () => {
|
||||
await gotoDelieverPage(val)
|
||||
hideLoading()
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
|
||||
let waybillToken = ''
|
||||
var plugin = requirePlugin('logisticsPlugin')
|
||||
const gotoDelieverPage = (val) => {
|
||||
uni.request({
|
||||
url: baseUrl + '/logistics/get/info',
|
||||
method: 'POST',
|
||||
data: {
|
||||
id: val
|
||||
},
|
||||
header: {
|
||||
cookie
|
||||
},
|
||||
success: (res) => {
|
||||
console.log(res.data.data)
|
||||
waybillToken = res.data.data.waybill_token
|
||||
plugin.openWaybillTracking({
|
||||
waybillToken: waybillToken
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const routerJump = (val) => {
|
||||
let pages = getCurrentPages();
|
||||
var num = pages.length
|
||||
if (num == 1) return ;
|
||||
console.log(pages)
|
||||
//当前页面栈总数
|
||||
var backnum = num
|
||||
for( var i = 0; i < num; i ++ ) {
|
||||
//循环找到指定页面路由所在的页数
|
||||
if(pages[i].route == val){
|
||||
//'pages/mypage/mypage'替换成A页面的路由地址
|
||||
backnum = num - i - 1
|
||||
//计算返回的层数，总数-指定页面页数-1
|
||||
}
|
||||
}
|
||||
uni.navigateBack({
|
||||
delta:backnum
|
||||
//返回的页面数，如果 delta 大于现有页面数，则返回到首页。
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.4); /* 半透明黑色背景 */
|
||||
z-index: 999;
|
||||
}
|
||||
button {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
button::after{
|
||||
border: none;
|
||||
}
|
||||
.mt-9 {
|
||||
margin-top: 16.88rpx;
|
||||
}
|
||||
.ml-11 {
|
||||
margin-left: 20.63rpx;
|
||||
}
|
||||
.mt-25 {
|
||||
margin-top: 46.88rpx;
|
||||
}
|
||||
.page {
|
||||
background-color: #fff;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100vh;
|
||||
}
|
||||
// .section {
|
||||
// background-image: url('https://ide.code.fun/api/image?token=67cf80c84ae84d001228feb1&name=24453f696e665b4a146abeed1b16ec7c.png');
|
||||
// background-size: 100% 100%;
|
||||
// background-repeat: no-repeat;
|
||||
// width: 750rpx;
|
||||
// }
|
||||
.section_2 {
|
||||
padding: 15rpx 16.88rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 18.75rpx;
|
||||
}
|
||||
.pos {
|
||||
position: absolute;
|
||||
left: 16.88rpx;
|
||||
right: 15rpx;
|
||||
top: 20.63rpx;
|
||||
}
|
||||
.image {
|
||||
width: 75rpx;
|
||||
height: 75rpx;
|
||||
}
|
||||
.group {
|
||||
margin-top: 11.25rpx;
|
||||
}
|
||||
.font {
|
||||
font-size: 28.13rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 29.18rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.text {
|
||||
color: #323233;
|
||||
line-height: 27.58rpx;
|
||||
}
|
||||
.font_2 {
|
||||
font-size: 24.38rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 29.18rpx;
|
||||
color: #818181;
|
||||
}
|
||||
.text_2 {
|
||||
color: #6b6e72;
|
||||
line-height: 24rpx;
|
||||
}
|
||||
.section_3 {
|
||||
padding: 26.25rpx 22.5rpx 22.5rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 18.75rpx;
|
||||
}
|
||||
.pos_2 {
|
||||
// position: absolute;
|
||||
// left: 16.88rpx;
|
||||
// right: 15rpx;
|
||||
// top: 144.38rpx;
|
||||
margin: 144.38rpx 15rpx 0 16.88rpx;
|
||||
}
|
||||
.image_2 {
|
||||
width: 43.13rpx;
|
||||
height: 43.13rpx;
|
||||
}
|
||||
.text_3 {
|
||||
line-height: 24.28rpx;
|
||||
}
|
||||
.text_4 {
|
||||
line-height: 30rpx;
|
||||
width: 571.88rpx;
|
||||
}
|
||||
.section_4 {
|
||||
padding: 22.5rpx 15rpx 22.5rpx 24.38rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 18.75rpx;
|
||||
}
|
||||
.pos_3 {
|
||||
// position: absolute;
|
||||
// left: 15rpx;
|
||||
// right: 16.88rpx;
|
||||
// top: 287.5rpx;
|
||||
margin: 25.5rpx 16.88rpx 150rpx 15rpx;
|
||||
}
|
||||
.list-item:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.image_3 {
|
||||
border-radius: 9.38rpx;
|
||||
width: 146.25rpx;
|
||||
height: 165rpx;
|
||||
}
|
||||
.text_5 {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.font_3 {
|
||||
font-size: 28.13rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 22.18rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.text_6 {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.font_4 {
|
||||
font-size: 28.13rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 18.73rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.text_7 {
|
||||
margin-right: 15rpx;
|
||||
margin-top: 136.88rpx;
|
||||
font-size: 26.25rpx;
|
||||
}
|
||||
.font_5 {
|
||||
font-size: 28.13rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 29.18rpx;
|
||||
color: #818181;
|
||||
}
|
||||
.text_8 {
|
||||
line-height: 26.04rpx;
|
||||
}
|
||||
.font_6 {
|
||||
font-size: 28.13rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 20.79rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.group_2 {
|
||||
margin-top: 18.75rpx;
|
||||
}
|
||||
.text_9 {
|
||||
line-height: 27.36rpx;
|
||||
}
|
||||
.group_3 {
|
||||
margin-top: 18.75rpx;
|
||||
}
|
||||
.text_10 {
|
||||
line-height: 25.71rpx;
|
||||
}
|
||||
.group_4 {
|
||||
line-height: 20.76rpx;
|
||||
height: 20.76rpx;
|
||||
}
|
||||
.text_11 {
|
||||
color: #ffaaa5;
|
||||
line-height: 20.29rpx;
|
||||
}
|
||||
.text_12 {
|
||||
color: #ffaaa5;
|
||||
font-size: 28.13rpx;
|
||||
font-family: FangZhengFonts;
|
||||
font-weight: 700;
|
||||
line-height: 20.76rpx;
|
||||
}
|
||||
.group_5 {
|
||||
margin-top: 26.25rpx;
|
||||
padding: 22.5rpx 0 18.75rpx;
|
||||
border-top: solid 1.88rpx #dfdfdf;
|
||||
border-bottom: solid 1.88rpx #dfdfdf;
|
||||
}
|
||||
.font_7 {
|
||||
font-size: 28.13rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 26.47rpx;
|
||||
color: #818181;
|
||||
}
|
||||
.text_13 {
|
||||
margin-left: 3.75rpx;
|
||||
}
|
||||
.text-wrapper {
|
||||
margin-right: 11.25rpx;
|
||||
padding: 3.75rpx 0;
|
||||
border-radius: 9.38rpx;
|
||||
border: solid 1.88rpx #ffffff;
|
||||
}
|
||||
.text_14 {
|
||||
margin-right: 7.5rpx;
|
||||
line-height: 30rpx;
|
||||
text-shadow: 0 1.88rpx #ffffff, 0 -1.88rpx #ffffff, 1.88rpx 0 #ffffff, -1.88rpx 0 #ffffff;
|
||||
}
|
||||
.group_6 {
|
||||
margin-top: 26.25rpx;
|
||||
}
|
||||
.text_15 {
|
||||
font-size: 26.25rpx;
|
||||
line-height: 19.41rpx;
|
||||
}
|
||||
.group_7 {
|
||||
margin-top: 18.75rpx;
|
||||
}
|
||||
.text_16 {
|
||||
line-height: 27.69rpx;
|
||||
}
|
||||
.text_17 {
|
||||
font-size: 26.25rpx;
|
||||
line-height: 19.29rpx;
|
||||
}
|
||||
.text-wrapper_2 {
|
||||
background-color: #ffffff;
|
||||
width: 65.63rpx;
|
||||
height: 30rpx;
|
||||
border: solid 0.94rpx #d1d1d1;
|
||||
}
|
||||
.font_8 {
|
||||
font-size: 22.5rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 30rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.group_8 {
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
.text_18 {
|
||||
line-height: 27.69rpx;
|
||||
}
|
||||
.text_19 {
|
||||
font-size: 26.25rpx;
|
||||
line-height: 19.29rpx;
|
||||
}
|
||||
.group_9 {
|
||||
margin-top: 28.13rpx;
|
||||
}
|
||||
.image_4 {
|
||||
width: 45rpx;
|
||||
height: 45rpx;
|
||||
}
|
||||
.text_20 {
|
||||
font-size: 30rpx;
|
||||
line-height: 28.48rpx;
|
||||
}
|
||||
.section_5 {
|
||||
padding: 15rpx 26.25rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.pos_4 {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.text_21 {
|
||||
color: #323232;
|
||||
font-size: 30rpx;
|
||||
line-height: 27.43rpx;
|
||||
}
|
||||
.group_10 {
|
||||
margin-left: -7.5rpx;
|
||||
line-height: 24.92rpx;
|
||||
height: 24.92rpx;
|
||||
}
|
||||
.font_9 {
|
||||
font-size: 33.75rpx;
|
||||
font-family: FangZhengFonts;
|
||||
color: #ffaaa5;
|
||||
}
|
||||
.text_22 {
|
||||
line-height: 24.34rpx;
|
||||
}
|
||||
.text_23 {
|
||||
font-weight: 700;
|
||||
line-height: 24.92rpx;
|
||||
}
|
||||
.text-wrapper_3 {
|
||||
padding: 22.5rpx 0;
|
||||
background-color: #ffaaa5;
|
||||
border-radius: 75rpx;
|
||||
width: 204.38rpx;
|
||||
height: 71.25rpx;
|
||||
}
|
||||
.text_24 {
|
||||
color: #ffffff;
|
||||
font-size: 30rpx;
|
||||
line-height: 27.77rpx;
|
||||
}
|
||||
@import url(../../../../common/css/global.css);
|
||||
</style>
|
||||
867
pages/subPack/my-order/myOrderList/myOrderList.vue
Normal file
867
pages/subPack/my-order/myOrderList/myOrderList.vue
Normal file
|
|
@ -0,0 +1,867 @@
|
|||
<template>
|
||||
<view class="flex-col justify-start items-center relative page" :style="{ backgroundImage: 'url(' + bkgPubilcPath + ')' }">
|
||||
<!-- <image
|
||||
class="image_3"
|
||||
src="https://ide.code.fun/api/image?token=67cf80c84ae84d001228feb1&name=666fe70fbe2b3eb6bec964adf12deccc.png"
|
||||
/> -->
|
||||
<view class="flex-col section pos">
|
||||
<view class="flex-col relative section_2">
|
||||
<view class="flex-row justify-center section_3" style="display: flex; align-items: center;" @click="gotoResearch">
|
||||
<image
|
||||
class="image"
|
||||
:src="myOrderUrl + '/myOrderList/ss.png'"
|
||||
/>
|
||||
<text class="font text ml-17" v-if="isHiddenInput">搜索订单</text>
|
||||
<input class="font text ml-7" v-if="!isHiddenInput" placeholder="搜索订单" :disabled="true" v-model="orderNumber" style="width: 85%; color: #323232;"/>
|
||||
</view>
|
||||
<view class="flex-row justify-between group">
|
||||
<view @click="isSelectedState(0)">
|
||||
<text class="font_2 text_2" :style="{ color: color[0] }"> 全部 </text>
|
||||
<view class="flex-col justify-start items-center" v-if="isShowUnderLine[0]" style="border: 1.88rpx solid #e79ea1; width: 90rpx; margin-top: 10rpx;"></view>
|
||||
</view>
|
||||
<view @click="isSelectedState(1)">
|
||||
<text class="font_2 text_3" :style="{ color: color[1] }">待支付</text>
|
||||
<view class="flex-col justify-start items-center" v-if="isShowUnderLine[1]" style="border: 1.88rpx solid #e79ea1; width: 90rpx; margin-top: 10rpx;"></view>
|
||||
</view>
|
||||
<view @click="isSelectedState(2)">
|
||||
<text class="font_2 text_4" :style="{ color: color[2] }">待发货</text>
|
||||
<view class="flex-col justify-start items-center" v-if="isShowUnderLine[2]" style="border: 1.88rpx solid #e79ea1; width: 90rpx; margin-top: 10rpx;"></view>
|
||||
</view>
|
||||
<view @click="isSelectedState(3)">
|
||||
<text class="font_2 text_5" :style="{ color: color[3] }">待收货</text>
|
||||
<view class="flex-col justify-start items-center" v-if="isShowUnderLine[3]" style="border: 1.88rpx solid #e79ea1; width: 90rpx; margin-top: 10rpx;"></view>
|
||||
</view>
|
||||
<view @click="isSelectedState(4)">
|
||||
<text class="font_2 text_6" :style="{ color: color[4] }">已退款</text>
|
||||
<view class="flex-col justify-start items-center" v-if="isShowUnderLine[4]" style="border: 1.88rpx solid #e79ea1; width: 90rpx; margin-top: 10rpx;"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col list mt-14">
|
||||
<view class="flex-col list-item mt-20" v-for="(item, index) in orderList" :key="index" @click="gotoOrderDetail(item.id, item.orderType)">
|
||||
<view class="flex-row justify-between group_3">
|
||||
<text class="font_2 text_7">泠珑水月阁</text>
|
||||
<view class="flex-row items-center group_1">
|
||||
<text class="font_3 text_8" v-if="item.orderStatus === '待支付'">{{ item.countdown }}</text>
|
||||
<text class="font text_9 ml-4">{{ item.orderStatus }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row items-center group_16">
|
||||
<text class="font_4">订单编号：</text>
|
||||
<text class="font_5 text_10">{{ item.orderNumber }}</text>
|
||||
</view>
|
||||
<view class="flex-col group_4">
|
||||
<view class="flex-row justify-between list-item_2 group_6" v-for="(subItem, index) in item.orderItemList" :key="index">
|
||||
<view class="flex-row">
|
||||
<image
|
||||
class="image_2" mode="aspectFill"
|
||||
:src="publicPath + subItem.goodSnapshot.goodImg.split(';')[0]"
|
||||
/>
|
||||
<view class="flex-col items-start group_19 ml-11">
|
||||
<text class="font_2">{{ subItem.goodSnapshot.name }}</text>
|
||||
<text v-if="item.orderType === 'service'" class="appointmentDate">已选时间：{{ subItem.reservationDate }} {{ getWeekday(subItem.reservationDate) }}</text>
|
||||
<text v-if="item.orderType === 'service'" class="timeSlot">{{ subItem.timeSlot }}</text>
|
||||
<text v-if="item.orderType === 'product'" class="appointmentDate"> </text>
|
||||
<text v-if="item.orderType === 'product'" class="timeSlot"> </text>
|
||||
<text class="font_6 text_28 mt-18">￥{{ subItem.goodSnapshot.price.toFixed(2) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="self-start font_7 text_29">×{{ subItem.quantity }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col group_12">
|
||||
<view class="flex-row justify-end items-baseline group_13">
|
||||
<text class="font_8 text_14">已优惠：</text>
|
||||
<text class="font_6 text_15 ml-9">￥{{ item.couponSnapshot === null ? (0).toFixed(2) : item.couponSnapshot.conditionAmount.toFixed(2) }}</text>
|
||||
</view>
|
||||
<view class="flex-row justify-end items-baseline mt-12 group_13_2">
|
||||
<text class="font_8 text_16">应付款：</text>
|
||||
<text class="font_9 text_17 ml-9">￥{{ (Number(item.totalAmount) + Number(item.postage)).toFixed(2)}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="flex-row justify-end group_14">
|
||||
|
||||
<view class="nav" @click.stop="nav" v-if="item.orderType === 'service'">
|
||||
<navVue></navVue>
|
||||
</view>
|
||||
|
||||
<view class="flex-col justify-start items-center text-wrapper" v-if="item.operationList[0]" @click.stop="gotoCancelOrder(item.id, item.orderType)">
|
||||
<text class="font_10">取消订单</text>
|
||||
</view>
|
||||
|
||||
<view @click.stop>
|
||||
<button class="flex-col justify-start items-center text-wrapper" v-if="item.operationList[1]" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">
|
||||
<text class="font_10">联系客服</text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view class="flex-col justify-start items-center text-wrapper" v-if="item.operationList[2]" @click.stop="gotoDeleteOrder(item.id)">
|
||||
<text class="font_10">删除订单</text>
|
||||
</view>
|
||||
|
||||
<view class="flex-col justify-start items-center text-wrapper_2 ml-11" v-if="item.operationList[3]" @click.stop="wxPayFd(item)">
|
||||
<text class="font_11 text_18">去付款</text>
|
||||
</view>
|
||||
|
||||
<view class="flex-col justify-start items-center text-wrapper_2 ml-11" v-if="item.operationList[4] && item.orderType === 'product'" @click.stop="fd(item.id)">
|
||||
<text class="font_11 text_18">查看物流</text>
|
||||
</view>
|
||||
|
||||
<view class="flex-col justify-start items-center text-wrapper_2 ml-11" style="background-color: #fff;" v-if="item.operationList[5]">
|
||||
<text class="font_11 text_18"></text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 遮罩层 -->
|
||||
<view v-if="isShow" class="overlay"></view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onBeforeUnmount, onMounted, onUnmounted, ref} from 'vue'
|
||||
import { baseUrl } from '@/api/request';
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||||
import { JudgeIsNullity } from '@/common/globalFunction';
|
||||
import navVue from '../component/nav.vue';
|
||||
import emitter from '@/utils/emitter';
|
||||
import { getFonts } from '@/common/globalFont';
|
||||
import { myOrderUrl,bkgPubilcPath } from '@/common/globalImagesUrl';
|
||||
import { publicPath } from '@/common/globalImagesUrl';
|
||||
import { onPullDownRefresh } from '@dcloudio/uni-app';
|
||||
import { showTips } from '@/common/globalFunction';
|
||||
|
||||
const color = ref(new Array(5).fill('#323232'))
|
||||
const point = ref(0)
|
||||
const isShowUnderLine = ref([true, false, false, false, false])
|
||||
let orderStatusList = ['全部', '待支付', '待发货', '待收货', '已退款']
|
||||
const cookie = wx.getStorageSync('cookie')
|
||||
const orderList = ref([])
|
||||
const tempOrderList = ref([])
|
||||
const orderNumber = ref('')
|
||||
const isHiddenInput = ref(true)
|
||||
const status = ref(0)
|
||||
|
||||
let debounceTimer = null;
|
||||
let wxPayTimer = null;
|
||||
let loading = false;
|
||||
let isLoading = ref(false)
|
||||
let isShow = ref(false)
|
||||
|
||||
const flushOrderListHandler = () => {
|
||||
getMyOrder()
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
getFonts()
|
||||
orderNumber.value = options.orderNumber
|
||||
if (!JudgeIsNullity(orderNumber.value)) {
|
||||
isHiddenInput.value = false
|
||||
}
|
||||
status.value = options.status
|
||||
})
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
color.value[0] = '#e79ea1'
|
||||
if (!JudgeIsNullity(status.value)) {
|
||||
getMyStatusOrder(Number(status.value)) //根据状态获取订单列表
|
||||
} else {
|
||||
getMyOrder()
|
||||
}
|
||||
emitter.on('flushOrderList', flushOrderListHandler)
|
||||
})
|
||||
|
||||
|
||||
onPullDownRefresh( async ()=>{ //下拉刷新
|
||||
color.value[0] = '#e79ea1'
|
||||
if (!JudgeIsNullity(status.value)) {
|
||||
getMyStatusOrder(Number(status.value))
|
||||
} else {
|
||||
getMyOrder()
|
||||
}
|
||||
emitter.on('flushOrderList', flushOrderListHandler)
|
||||
setTimeout(()=>{
|
||||
uni.stopPullDownRefresh() //停止下拉刷新
|
||||
},1000)
|
||||
})
|
||||
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off('flushOrderList', flushOrderListHandler)
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
const getMyStatusOrder = async (val) => {
|
||||
point.value = val
|
||||
for (var i = 0; i < 5; i ++ ) {
|
||||
if (i === val) {
|
||||
isShowUnderLine.value[i] = true
|
||||
color.value[i] = '#e79ea1'
|
||||
} else {
|
||||
isShowUnderLine.value[i] = false
|
||||
color.value[i] = '#323232'
|
||||
}
|
||||
}
|
||||
await getMyOrder()
|
||||
if (point.value !== 0) {
|
||||
orderList.value = tempOrderList.value.filter(item => item.orderStatus === orderStatusList[point.value])
|
||||
} else {
|
||||
orderList.value = tempOrderList.value
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
const isSelectedState = (val) => {
|
||||
if (point.value === val) return
|
||||
point.value = val
|
||||
for (var i = 0; i < 5; i ++ ) {
|
||||
if (i === val) {
|
||||
isShowUnderLine.value[i] = true
|
||||
color.value[i] = '#e79ea1'
|
||||
} else {
|
||||
isShowUnderLine.value[i] = false
|
||||
color.value[i] = '#323232'
|
||||
}
|
||||
}
|
||||
if (point.value !== 0) {
|
||||
orderList.value = tempOrderList.value.filter(item => item.orderStatus === orderStatusList[point.value])
|
||||
} else {
|
||||
orderList.value = tempOrderList.value
|
||||
}
|
||||
}
|
||||
|
||||
const getMyOrder = async () => {
|
||||
orderList.value.forEach(order => {
|
||||
if (order.countdownInterval) {
|
||||
clearInterval(order.countdownInterval); // 清除定时器
|
||||
}
|
||||
})
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/order/list',
|
||||
method: 'POST',
|
||||
header: {
|
||||
cookie
|
||||
}
|
||||
})
|
||||
console.log(res.data.data);
|
||||
orderList.value = res.data.data
|
||||
tempOrderList.value = res.data.data
|
||||
dealTimeout()
|
||||
orderList.value.forEach(order => {
|
||||
if (order.orderStatus === '待支付') {
|
||||
startCountdown(order)
|
||||
}
|
||||
});
|
||||
if (!JudgeIsNullity(orderNumber.value)) {
|
||||
orderList.value = orderList.value.filter(item => item.orderNumber === orderNumber.value)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const gotoResearch = () => {
|
||||
uni.navigateTo({
|
||||
url: '../researchOrder/researchOrder'
|
||||
})
|
||||
}
|
||||
|
||||
const gotoOrderDetail = (val, type) => {
|
||||
if (type === 'product') {
|
||||
uni.navigateTo({
|
||||
url: '../myGeneralOrderDetail/myGeneralOrderDetail?id=' + val
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: '../myServiceOrderDetail/myServiceOrderDetail?id=' + val
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const wxPayFd = (order) => { //微信支付按钮防抖
|
||||
showLoading()
|
||||
isShow.value = true //打开遮罩
|
||||
wxPay(order.id, order.orderType)
|
||||
}
|
||||
|
||||
function showLoading() { //加载弹窗
|
||||
if (!loading) {
|
||||
wx.showLoading({
|
||||
title: '加载中...',
|
||||
});
|
||||
loading = true;
|
||||
isLoading.value = true
|
||||
}
|
||||
}
|
||||
|
||||
function hideLoading() { //关闭弹窗
|
||||
if (loading) {
|
||||
wx.hideLoading();
|
||||
loading = false;
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const wxPay = async( oid , type)=> { //传入订单id
|
||||
try {
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/wechat/payment/create',
|
||||
method: 'POST',
|
||||
header: {
|
||||
'cookie': wx.getStorageSync("cookie")
|
||||
},
|
||||
data: { id: oid }
|
||||
})
|
||||
const paymentData = res.data.data
|
||||
wx.requestPayment({
|
||||
appid: paymentData.appId,
|
||||
nonceStr: paymentData.nonceStr,
|
||||
package: paymentData.packageVal,
|
||||
paySign: paymentData.paySign,
|
||||
timeStamp: paymentData.timeStamp,
|
||||
signType: paymentData.signType,
|
||||
success(res) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '支付成功',
|
||||
showCancel: false
|
||||
})
|
||||
},
|
||||
fail(e) {
|
||||
|
||||
},
|
||||
complete () {
|
||||
if (type === 'product') {
|
||||
uni.redirectTo({
|
||||
url: '/pages/subPack/my-order/myGeneralOrderDetail/myGeneralOrderDetail?id=' + oid
|
||||
})
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: '/pages/subPack/my-order/myServiceOrderDetail/myServiceOrderDetail?id=' + oid
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}catch(error) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '支付失败，请刷新后重试',
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
const fd = (val) => { //防抖
|
||||
clearTimeout(debounceTimer)
|
||||
showLoading()
|
||||
debounceTimer = setTimeout(async () => {
|
||||
await gotoDelieverPage(val)
|
||||
hideLoading()
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
let waybillToken = ''
|
||||
var plugin = requirePlugin('logisticsPlugin')
|
||||
const gotoDelieverPage = (val) => {
|
||||
uni.request({
|
||||
url: baseUrl + '/logistics/get/info',
|
||||
method: 'POST',
|
||||
data: {
|
||||
id: val
|
||||
},
|
||||
header: {
|
||||
cookie
|
||||
},
|
||||
success: (res) => {
|
||||
console.log(res.data.data)
|
||||
waybillToken = res.data.data.waybill_token
|
||||
plugin.openWaybillTracking({
|
||||
waybillToken: waybillToken
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const gotoCancelOrder = (val, type) => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您确定要取消订单吗？',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
if (type === 'product'){
|
||||
await cancelGeneralOrder(val)
|
||||
}
|
||||
else {
|
||||
await cancelServiceOrder(val)
|
||||
}
|
||||
showTips('取消成功')
|
||||
await getMyOrder()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const gotoDeleteOrder = (val) => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您确定要删除订单吗？',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
await deleteOrder(val)
|
||||
await getMyOrder()
|
||||
showTips('删除成功')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
const cancelGeneralOrder = async (val) => {
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/order/cancel/id',
|
||||
method: 'POST',
|
||||
header: {
|
||||
cookie
|
||||
},
|
||||
data: {
|
||||
id: val
|
||||
}
|
||||
})
|
||||
console.log(res.data.data)
|
||||
}
|
||||
|
||||
|
||||
const cancelServiceOrder = async (val) => {
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/order/cancel/service/id',
|
||||
method: 'POST',
|
||||
header: {
|
||||
cookie
|
||||
},
|
||||
data: {
|
||||
id: val
|
||||
}
|
||||
})
|
||||
console.log(res.data.data)
|
||||
}
|
||||
|
||||
|
||||
|
||||
const deleteOrder = async (val) => {
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/order/delete/id',
|
||||
method: 'POST',
|
||||
header: {
|
||||
cookie
|
||||
},
|
||||
data: {
|
||||
id: val
|
||||
}
|
||||
})
|
||||
console.log('=================================>', res.data.data)
|
||||
}
|
||||
|
||||
|
||||
|
||||
const dealTimeout = () => {
|
||||
for (var i = 0; i < orderList.value.length; i ++ ) {
|
||||
let order = orderList.value[i]
|
||||
if (order.orderStatus === '待支付') {
|
||||
orderList.value[i].operationList = [true, false, false, true, false, false]
|
||||
} else if (order.orderStatus === '待发货') {
|
||||
orderList.value[i].operationList = [false, true, false, false, false, false]
|
||||
} else if (order.orderStatus === '待收货') {
|
||||
orderList.value[i].operationList = [false, true, false, false, true, false]
|
||||
} else if (order.orderStatus === '已退款') {
|
||||
orderList.value[i].operationList = [false, true, false, false, false, false]
|
||||
} else if (order.orderStatus === '交易关闭') {
|
||||
orderList.value[i].operationList = [false, false, true, false, false, false]
|
||||
} else if (order.orderStatus === '交易成功') {
|
||||
orderList.value[i].operationList = [false, false, false, false, false, true]
|
||||
}else {
|
||||
orderList.value[i].operationList = [false, false, false, false, false, true]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 启动每个订单的倒计时（仅对待支付订单有效）
|
||||
const startCountdown = (order) => {
|
||||
|
||||
if (order.orderStatus === '待支付') {
|
||||
order.endTime = add30Minutes(order.createTime); // 设置最终取消时间
|
||||
|
||||
order.countdownInterval = setInterval(() => {
|
||||
const now = Math.floor(Date.now() / 1000); // 获取当前时间的时间戳（秒）
|
||||
const remainingTime = order.endTime - now;
|
||||
if (remainingTime <= 0) {
|
||||
order.countdown = '00:00';
|
||||
clearInterval(order.countdownInterval); // 清除定时器
|
||||
order.orderStatus = '交易关闭'
|
||||
dealTimeout()
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '订单超时未支付，已取消',
|
||||
showCancel: false
|
||||
})
|
||||
} else {
|
||||
const minutes = Math.floor(remainingTime / 60); // 计算剩余分钟
|
||||
const seconds = remainingTime % 60; // 计算剩余秒数
|
||||
order.countdown = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// 时间格式化函数，处理后端返回的时间
|
||||
const parseDate = (dateString) => {
|
||||
const [date, time] = dateString.split(' ');
|
||||
const [year, month, day] = date.split('-').map(Number);
|
||||
const [hour, minute, second] = time.split(':').map(Number);
|
||||
return new Date(year, month - 1, day, hour, minute, second); // JavaScript Date的月份是从0开始的
|
||||
};
|
||||
|
||||
// 给订单创建时间加上30分钟
|
||||
const add30Minutes = (createdTime) => {
|
||||
const date = parseDate(createdTime);
|
||||
date.setMinutes(date.getMinutes() + 15); // 加上30分钟
|
||||
return Math.floor(date.getTime() / 1000); // 返回时间戳（秒）
|
||||
};
|
||||
|
||||
// 在组件卸载时清除所有定时器，避免内存泄漏
|
||||
onBeforeUnmount(() => {
|
||||
orderList.value.forEach(order => {
|
||||
if (order.countdownInterval) {
|
||||
clearInterval(order.countdownInterval); // 清除定时器
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
const nav = () => {
|
||||
wx.openLocation({
|
||||
latitude: 45.867741,
|
||||
longitude: 126.560037,
|
||||
name: '哈尔滨师范大学(松北校区)',
|
||||
address: '黑龙江省哈尔滨市呼兰区利民经济开发区师大路1号',
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function getWeekday(dateStr) {
|
||||
const date = new Date(dateStr);
|
||||
const weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
|
||||
return weekdays[date.getDay()];
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.nav {
|
||||
position: absolute;
|
||||
left: 15rpx;
|
||||
top: 25rpx;
|
||||
}
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.4); /* 半透明黑色背景 */
|
||||
z-index: 999;
|
||||
}
|
||||
button{padding: 0;margin: 0;}
|
||||
button::after{ border: none; }
|
||||
|
||||
.page {
|
||||
background-color: #ffffff;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.appointmentDate {
|
||||
margin-top: 20.63rpx;
|
||||
font-size: 26.25rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 24.51rpx;
|
||||
color: #818181;
|
||||
margin-left: 3.75rpx;
|
||||
}
|
||||
.timeSlot {
|
||||
margin-top: 20.63rpx;
|
||||
font-size: 26.25rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 17.53rpx;
|
||||
color: #818181;
|
||||
margin-left: 3.75rpx;
|
||||
}
|
||||
.ml-7 {
|
||||
margin-left: 13.13rpx;
|
||||
}
|
||||
.ml-9 {
|
||||
margin-left: 16.88rpx;
|
||||
}
|
||||
.ml-11 {
|
||||
margin-left: 20.63rpx;
|
||||
}
|
||||
|
||||
.pos {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.section_2 {
|
||||
padding: 31.88rpx 35.63rpx 0;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0rpx 3.75rpx 3.75rpx #32323240;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
.section_3 {
|
||||
padding: 13.13rpx 0 15rpx;
|
||||
height: 60rpx;
|
||||
background-color: #f3f3f3;
|
||||
border-radius: 75rpx;
|
||||
}
|
||||
.image {
|
||||
width: 28.13rpx;
|
||||
height: 28.13rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.font {
|
||||
font-size: 26.25rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 25.84rpx;
|
||||
color: #ffaaa5;
|
||||
}
|
||||
.text {
|
||||
color: #bdbdbd;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
.group {
|
||||
padding: 24.26rpx 0 0;
|
||||
}
|
||||
.font_2 {
|
||||
font-size: 30rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 29.18rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.text_2 {
|
||||
line-height: 28.24rpx;
|
||||
}
|
||||
.text_3 {
|
||||
line-height: 28.24rpx;
|
||||
}
|
||||
.text_4 {
|
||||
line-height: 28.24rpx;
|
||||
}
|
||||
.text_5 {
|
||||
line-height: 28.24rpx;
|
||||
}
|
||||
.text_6 {
|
||||
line-height: 28.24rpx;
|
||||
}
|
||||
.list {
|
||||
padding: 170rpx 15rpx 50rpx;
|
||||
}
|
||||
.list-item {
|
||||
padding: 28.01rpx 22.5rpx 0 24.38rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 18.75rpx;
|
||||
}
|
||||
.list-item:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.group_3 {
|
||||
padding-left: 9.96rpx;
|
||||
padding-right: 4.5rpx;
|
||||
}
|
||||
.text_7 {
|
||||
line-height: 28.01rpx;
|
||||
}
|
||||
.group_1 {
|
||||
margin-top: 2.34rpx;
|
||||
}
|
||||
.font_3 {
|
||||
font-size: 30rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 18.73rpx;
|
||||
color: #ffaaa5;
|
||||
}
|
||||
.text_8 {
|
||||
font-size: 28.13rpx;
|
||||
line-height: 18.79rpx;
|
||||
}
|
||||
.text_9 {
|
||||
line-height: 25.74rpx;
|
||||
}
|
||||
.group_16 {
|
||||
margin-top: 19.26rpx;
|
||||
padding: 0 8.94rpx;
|
||||
}
|
||||
.font_4 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 25.84rpx;
|
||||
color: #818181;
|
||||
}
|
||||
.font_5 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 18.73rpx;
|
||||
color: #818181;
|
||||
}
|
||||
.text_10 {
|
||||
line-height: 17.53rpx;
|
||||
}
|
||||
.group_4 {
|
||||
margin-top: 30.06rpx;
|
||||
}
|
||||
.list-item_2:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.image_2 {
|
||||
border-radius: 9.38rpx;
|
||||
width: 146.25rpx;
|
||||
height: 165rpx;
|
||||
}
|
||||
.group_19 {
|
||||
margin-bottom: 3.32rpx;
|
||||
}
|
||||
.font_6 {
|
||||
font-size: 30rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 22.18rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.text_28 {
|
||||
margin-left: 3.36rpx;
|
||||
}
|
||||
.font_7 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 18.73rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.text_29 {
|
||||
margin-right: 5.83rpx;
|
||||
margin-top: 136.88rpx;
|
||||
}
|
||||
.group_12 {
|
||||
margin-top: 66.28rpx;
|
||||
padding-left: 3.06rpx;
|
||||
padding-right: 3.04rpx;
|
||||
}
|
||||
.group_13 {
|
||||
padding: 0 10.11rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.group_13_2 {
|
||||
padding: 0 10.11rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.font_8 {
|
||||
font-size: 30rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 25.84rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.text_14 {
|
||||
font-size: 28.13rpx;
|
||||
line-height: 26.59rpx;
|
||||
}
|
||||
.text_15 {
|
||||
font-size: 28.13rpx;
|
||||
line-height: 20.79rpx;
|
||||
}
|
||||
.text_16 {
|
||||
font-size: 28.13rpx;
|
||||
line-height: 26.04rpx;
|
||||
}
|
||||
.font_9 {
|
||||
font-size: 30rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 22.18rpx;
|
||||
font-weight: 600;
|
||||
color: #ffaaa5;
|
||||
}
|
||||
.text_17 {
|
||||
font-size: 28.13rpx;
|
||||
line-height: 21.13rpx;
|
||||
}
|
||||
.group_14 {
|
||||
position: relative;
|
||||
margin-top: 26.92rpx;
|
||||
padding: 33.75rpx 0 35.63rpx;
|
||||
border-top: solid 1.88rpx #dfdfdf;
|
||||
}
|
||||
.text-wrapper {
|
||||
padding: 13.35rpx 0 13.31rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 75rpx;
|
||||
width: 153.75rpx;
|
||||
height: 56.25rpx;
|
||||
border: solid 1.88rpx #e79ea1;
|
||||
}
|
||||
.font_10 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 25.84rpx;
|
||||
color: #e79ea1;
|
||||
}
|
||||
.text-wrapper_2 {
|
||||
padding: 16.07rpx 0 16.18rpx;
|
||||
background-color: #e79ea1;
|
||||
border-radius: 75rpx;
|
||||
width: 153.75rpx;
|
||||
height: 56.25rpx;
|
||||
}
|
||||
.font_11 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 25.84rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
.text_18 {
|
||||
line-height: 24rpx;
|
||||
}
|
||||
.group_6 {
|
||||
margin-top: 28.75rpx;
|
||||
}
|
||||
|
||||
@import url(../../../../common/css/global.css);
|
||||
</style>
|
||||
|
|
@ -0,0 +1,667 @@
|
|||
<template>
|
||||
<view class="flex-col justify-start relative page" :style="{ backgroundImage: 'url(' + bkgPubilcPath + ')' }">
|
||||
<view class="section" :style="{ backgroundImage: 'url(' + bkgPubilcPath + ')' }"></view>
|
||||
<view class="flex-row items-center section_2 pos">
|
||||
<image
|
||||
class="image"
|
||||
:src="orderStatusObj.img"
|
||||
/>
|
||||
<view class="flex-col items-start flex-1 ml-6">
|
||||
<text class="font text">{{ orderStatusObj.msg }}</text>
|
||||
<text class="font_2 text_2 mt-3">{{ orderStatusObj.tips }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row items-center section_3 pos_2">
|
||||
<image
|
||||
class="image_2"
|
||||
:src="myOrderUrl + '/myServiceOrderDetail/lxr.png'"
|
||||
/>
|
||||
<text class="font_3 text_3 ml-9">{{ contactObj.name }} {{ contactObj.phone }}</text>
|
||||
</view>
|
||||
<view class="flex-col section_4 pos_3">
|
||||
<view class="flex-col">
|
||||
<view class="flex-row list-item mt-12" v-for="(item, index) in order.orderItemList" :key="index">
|
||||
<image
|
||||
class="shrink-0 image_3" mode="aspectFill"
|
||||
:src="publicPath + item.goodSnapshot.goodImg"
|
||||
/>
|
||||
<view class="flex-col items-start flex-1 group_2 ml-20">
|
||||
<text class="font"> {{ item.goodSnapshot.name }}</text>
|
||||
<text class="font_4 text_4">已选时间：{{ item.reservationDate }} {{ getWeekday(item.reservationDate) }}</text>
|
||||
<text class="font_5 text_5">{{ item.timeSlot }}</text>
|
||||
<text class="font_6 text_6">￥{{ item.goodSnapshot.price.toFixed(2) }}</text>
|
||||
</view>
|
||||
<text class="self-start font_6 text_7 ml-20">× {{ item.quantity }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-baseline view_2">
|
||||
<text class="font_3 text_8">商品金额</text>
|
||||
<text class="font_6 text_1">￥{{ allAmount.toFixed(2) }}</text>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-baseline view_3">
|
||||
<text class="font_7 text_10">优惠券</text>
|
||||
<text class="font_6 text_9">￥{{ couponAmount.toFixed(2) }}</text>
|
||||
</view>
|
||||
<view class="flex-row justify-end items-baseline group_3">
|
||||
<text class="font text_11">应付款：</text>
|
||||
<view class="group_4">
|
||||
<text class="font_6 text_12">￥</text>
|
||||
<text class="text_13">{{ order.totalAmount.toFixed(2) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col group_5">
|
||||
<text class="self-start font_8 text_14">买家留言</text>
|
||||
<view class="flex-col justify-start self-stretch text-wrapper mt-2">
|
||||
<text class="font_2 text_15" style="word-break: break-all; word-wrap: break-word;">
|
||||
{{ order.note }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-baseline group_6">
|
||||
<text class="font_8 text_16">创建时间：</text>
|
||||
<text class="font_9 text_17">{{ order.createTime }}</text>
|
||||
</view>
|
||||
<view class="flex-row justify-between group_7">
|
||||
<text class="font_7 text_18">订单编号：</text>
|
||||
<view class="flex-row items-center group_8">
|
||||
<text class="font_9 text_19">{{ order.orderNumber }}</text>
|
||||
<view class="flex-col justify-start items-center shrink-0 text-wrapper_2 ml-4" @click="copy(order.orderNumber)">
|
||||
<text class="text_20">复制</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-center items-center group_9">
|
||||
<button style="display: flex; align-items: center; height: 60rpx;" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">
|
||||
<image
|
||||
class="image_4"
|
||||
:src="myOrderUrl + '/myServiceOrderDetail/zxkf.png'"
|
||||
/>
|
||||
<text class="font text_21">在线客服</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-center section_5 pos_4">
|
||||
<view class="flex-row items-baseline">
|
||||
<text class="font text_22">应付款：</text>
|
||||
<view class="group_10">
|
||||
<text class="font_10 text_23">￥</text>
|
||||
<text class="font_10 text_24">{{ order.totalAmount.toFixed(2) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="order.operationList[0]" class="flex-col justify-start items-center text-wrapper_3" @click="wxPayFd(order)">
|
||||
<text class="font text_25">去支付</text>
|
||||
</view>
|
||||
|
||||
<view v-if="order.operationList[1]" class="flex-col justify-start items-center text-wrapper_3" @click="gotoDeleteOrder(order.id)">
|
||||
<text class="font text_25">删除订单</text>
|
||||
</view>
|
||||
|
||||
<view v-if="order.operationList[2]" style="background-color: #fff;" class="flex-col justify-start items-center text-wrapper_3">
|
||||
<text class="font text_25"></text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 遮罩层 -->
|
||||
<view v-if="isShow" class="overlay"></view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onMounted, ref} from 'vue'
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import { baseUrl } from '@/api/request';
|
||||
import { JudgeIsNullity, showTips } from '@/common/globalFunction';
|
||||
import { serviceStateList } from '@/common/global.js'
|
||||
import emitter from '@/utils/emitter';
|
||||
import { getFonts } from '@/common/globalFont';
|
||||
import { myOrderUrl } from '@/common/globalImagesUrl';
|
||||
import { publicPath,bkgPubilcPath } from '@/common/globalImagesUrl';
|
||||
import { onPullDownRefresh } from '@dcloudio/uni-app';
|
||||
const cookie = wx.getStorageSync('cookie')
|
||||
let orderId = ''
|
||||
const order = ref({})
|
||||
const couponAmount = ref(0)
|
||||
const allAmount = ref(0)
|
||||
const contactObj = ref({})
|
||||
const orderStatusObj = ref({})
|
||||
let debounceTimer = null;
|
||||
let wxPayTimer = null;
|
||||
let loading = false;
|
||||
let isLoading = ref(false)
|
||||
let isShow = ref(false)
|
||||
|
||||
|
||||
onLoad((options) => {
|
||||
getFonts()
|
||||
orderId = options.id
|
||||
})
|
||||
onMounted(() => {
|
||||
getOrderById(orderId)
|
||||
})
|
||||
|
||||
onPullDownRefresh( async ()=>{ //下拉刷新
|
||||
await getOrderById(orderId)
|
||||
setTimeout(()=>{
|
||||
uni.stopPullDownRefresh() //停止下拉刷新
|
||||
},1000)
|
||||
})
|
||||
|
||||
const getOrderById = async (val) => {
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/order/get/id',
|
||||
method: 'POST',
|
||||
header: {
|
||||
cookie
|
||||
},
|
||||
data: {
|
||||
id: val
|
||||
}
|
||||
})
|
||||
console.log(res.data.data)
|
||||
order.value = res.data.data
|
||||
contactObj.value = order.value.contactsSnapshot
|
||||
couponAmount.value = JudgeIsNullity(order.value.couponSnapshot) ? 0 : order.value.couponSnapshot.conditionAmount
|
||||
allAmount.value = order.value.totalAmount + couponAmount.value
|
||||
if (order.value.orderStatus === '待支付') {
|
||||
order.value.operationList = [true, false, false]
|
||||
orderStatusObj.value = serviceStateList[0]
|
||||
} else if (order.value.orderStatus === '交易关闭') {
|
||||
order.value.operationList = [false, true, false]
|
||||
orderStatusObj.value = serviceStateList[4]
|
||||
} else if (order.value.orderStatus === '待发货') {
|
||||
order.value.operationList = [false, false, true]
|
||||
orderStatusObj.value = serviceStateList[1]
|
||||
} else if (order.value.orderStatus === '已退款') {
|
||||
order.value.operationList = [false, false, true]
|
||||
orderStatusObj.value = serviceStateList[2]
|
||||
} else if (order.value.orderStatus === '交易成功') {
|
||||
order.value.operationList = [false, false, true]
|
||||
orderStatusObj.value = serviceStateList[3]
|
||||
}
|
||||
}
|
||||
|
||||
const copy = ( orderNumber ) => {
|
||||
console.log('订单编号为--->',orderNumber);
|
||||
uni.setClipboardData({
|
||||
data: orderNumber,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '成功复制到剪贴板'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const wxPayFd = (order) => { //微信支付按钮防抖
|
||||
showLoading()
|
||||
isShow.value = true //打开遮罩
|
||||
wxPay(order.id)
|
||||
}
|
||||
|
||||
function showLoading() { //加载弹窗
|
||||
if (!loading) {
|
||||
wx.showLoading({
|
||||
title: '加载中...',
|
||||
});
|
||||
loading = true;
|
||||
isLoading.value = true
|
||||
}
|
||||
}
|
||||
|
||||
function hideLoading() { //关闭弹窗
|
||||
if (loading) {
|
||||
wx.hideLoading();
|
||||
loading = false;
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const wxPay = async( oid )=> { //传入订单id
|
||||
try {
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/wechat/payment/create',
|
||||
method: 'POST',
|
||||
header: {
|
||||
'cookie': wx.getStorageSync("cookie")
|
||||
},
|
||||
data: { id: oid }
|
||||
})
|
||||
const paymentData = res.data.data
|
||||
wx.requestPayment({
|
||||
appid: paymentData.appId,
|
||||
nonceStr: paymentData.nonceStr,
|
||||
package: paymentData.packageVal,
|
||||
paySign: paymentData.paySign,
|
||||
timeStamp: paymentData.timeStamp,
|
||||
signType: paymentData.signType,
|
||||
success(res) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '支付成功',
|
||||
showCancel: false
|
||||
})
|
||||
getOrderById(oid)
|
||||
},
|
||||
fail(e) {
|
||||
|
||||
},
|
||||
complete () {
|
||||
hideLoading()
|
||||
isShow.value = false //关闭遮罩
|
||||
}
|
||||
})
|
||||
}catch(error) {
|
||||
hideLoading()
|
||||
isShow.value = false //关闭遮罩
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '支付失败，请刷新后重试',
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const gotoDeleteOrder = (val) => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您确定要删除订单吗？',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
await deleteOrder(val)
|
||||
await emitter.emit('flushOrderList')
|
||||
routerJump('pages/subPack/my-order/myServiceOrderDetail/myServiceOrderDetail')
|
||||
showTips('删除成功')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const deleteOrder = async (val) => {
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/order/delete/id',
|
||||
method: 'POST',
|
||||
header: {
|
||||
cookie
|
||||
},
|
||||
data: {
|
||||
id: val
|
||||
}
|
||||
})
|
||||
console.log(res.data.data)
|
||||
}
|
||||
|
||||
|
||||
|
||||
function getWeekday(dateStr) {
|
||||
const date = new Date(dateStr);
|
||||
const weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
|
||||
return weekdays[date.getDay()];
|
||||
}
|
||||
|
||||
|
||||
const routerJump = (val) => {
|
||||
let pages = getCurrentPages();
|
||||
var num = pages.length
|
||||
if (num == 1) return ;
|
||||
console.log(pages)
|
||||
//当前页面栈总数
|
||||
var backnum = num
|
||||
for( var i = 0; i < num; i ++ ) {
|
||||
//循环找到指定页面路由所在的页数
|
||||
if(pages[i].route == val){
|
||||
//'pages/mypage/mypage'替换成A页面的路由地址
|
||||
backnum = num - i - 1
|
||||
//计算返回的层数，总数-指定页面页数-1
|
||||
}
|
||||
}
|
||||
uni.navigateBack({
|
||||
delta:backnum
|
||||
//返回的页面数，如果 delta 大于现有页面数，则返回到首页。
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.4); /* 半透明黑色背景 */
|
||||
z-index: 999;
|
||||
}
|
||||
button {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
button::after{
|
||||
border: none;
|
||||
}
|
||||
|
||||
.mt-3 {
|
||||
margin-top: 5.63rpx;
|
||||
}
|
||||
.ml-9 {
|
||||
margin-left: 16.88rpx;
|
||||
}
|
||||
.page {
|
||||
background-color: #ffffff;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100vh;
|
||||
}
|
||||
// .section {
|
||||
// background-image: url('https://ide.code.fun/api/image?token=67cf80c84ae84d001228feb1&name=9df295c356c1b6849e20b6b4853b4d1c.png');
|
||||
// background-size: 100% 100%;
|
||||
// background-repeat: no-repeat;
|
||||
// width: 750rpx;
|
||||
// }
|
||||
.section_2 {
|
||||
padding: 16.88rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 18.75rpx;
|
||||
}
|
||||
.pos {
|
||||
position: absolute;
|
||||
left: 16.88rpx;
|
||||
right: 15rpx;
|
||||
top: 26.25rpx;
|
||||
}
|
||||
.image {
|
||||
width: 75rpx;
|
||||
height: 75rpx;
|
||||
}
|
||||
.font {
|
||||
font-size: 30rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 29.18rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.text {
|
||||
color: #323233;
|
||||
font-size: 28.13rpx;
|
||||
line-height: 27.58rpx;
|
||||
}
|
||||
.font_2 {
|
||||
font-size: 24.38rpx;
|
||||
font-family: FangZhengFonts;
|
||||
}
|
||||
.text_2 {
|
||||
color: #6b6e72;
|
||||
line-height: 24rpx;
|
||||
}
|
||||
.section_3 {
|
||||
padding: 24.38rpx 24.38rpx 26.25rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 18.75rpx;
|
||||
}
|
||||
.pos_2 {
|
||||
position: absolute;
|
||||
left: 16.88rpx;
|
||||
right: 15rpx;
|
||||
top: 159.38rpx;
|
||||
}
|
||||
.image_2 {
|
||||
width: 46.88rpx;
|
||||
height: 46.88rpx;
|
||||
}
|
||||
.font_3 {
|
||||
font-size: 30rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 24.51rpx;
|
||||
color: #818181;
|
||||
}
|
||||
.text_3 {
|
||||
line-height: 25.89rpx;
|
||||
}
|
||||
.section_4 {
|
||||
padding: 20.63rpx 16.01rpx 24.38rpx 20.85rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 18.75rpx;
|
||||
}
|
||||
.pos_3 {
|
||||
// position: absolute;
|
||||
// left: 15rpx;
|
||||
// right: 16.88rpx;
|
||||
// top: 281.25rpx;
|
||||
margin: 281.25rpx 16.88rpx 150rpx 15rpx;
|
||||
}
|
||||
.list-item {
|
||||
padding-left: 12.9rpx;
|
||||
padding-right: 10.74rpx;
|
||||
}
|
||||
.list-item:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.image_3 {
|
||||
border-radius: 9.38rpx;
|
||||
width: 142.5rpx;
|
||||
height: 166.88rpx;
|
||||
}
|
||||
.group_2 {
|
||||
margin-bottom: 3.34rpx;
|
||||
}
|
||||
.font_4 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 24.51rpx;
|
||||
color: #818181;
|
||||
}
|
||||
.text_4 {
|
||||
margin-left: 3.92rpx;
|
||||
margin-top: 17.72rpx;
|
||||
}
|
||||
.font_5 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 17.53rpx;
|
||||
color: #818181;
|
||||
}
|
||||
.text_5 {
|
||||
margin-left: 5.14rpx;
|
||||
margin-top: 20.1rpx;
|
||||
}
|
||||
.font_6 {
|
||||
font-size: 30rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 21.41rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.text_6 {
|
||||
margin-left: 3.36rpx;
|
||||
margin-top: 31.29rpx;
|
||||
line-height: 22.18rpx;
|
||||
}
|
||||
.text_7 {
|
||||
margin-top: 145.46rpx;
|
||||
}
|
||||
.view_2 {
|
||||
margin-top: 46.52rpx;
|
||||
padding-left: 4.97rpx;
|
||||
}
|
||||
.text_8 {
|
||||
font-size: 28.13rpx;
|
||||
line-height: 26.04rpx;
|
||||
}
|
||||
.text_1 {
|
||||
font-size: 28.13rpx;
|
||||
line-height: 20.79rpx;
|
||||
}
|
||||
.view_3 {
|
||||
margin-top: 18.08rpx;
|
||||
padding-left: 3.98rpx;
|
||||
}
|
||||
.font_7 {
|
||||
font-size: 30rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 29.18rpx;
|
||||
color: #818181;
|
||||
}
|
||||
.text_10 {
|
||||
font-size: 28.13rpx;
|
||||
line-height: 27.36rpx;
|
||||
}
|
||||
.text_9 {
|
||||
font-size: 28.13rpx;
|
||||
line-height: 20.79rpx;
|
||||
}
|
||||
.group_3 {
|
||||
margin-top: 18.41rpx;
|
||||
padding: 0 5.91rpx;
|
||||
}
|
||||
.text_11 {
|
||||
font-size: 28.13rpx;
|
||||
line-height: 25.71rpx;
|
||||
}
|
||||
.group_4 {
|
||||
line-height: 20.76rpx;
|
||||
height: 20.76rpx;
|
||||
}
|
||||
.text_12 {
|
||||
color: #ffaaa5;
|
||||
font-size: 28.13rpx;
|
||||
line-height: 20.29rpx;
|
||||
}
|
||||
.text_13 {
|
||||
color: #ffaaa5;
|
||||
font-size: 28.13rpx;
|
||||
font-family: FangZhengFonts;
|
||||
font-weight: 700;
|
||||
line-height: 20.76rpx;
|
||||
}
|
||||
.group_5 {
|
||||
margin-top: 27.88rpx;
|
||||
padding: 21.41rpx 3.52rpx 14.31rpx;
|
||||
border-top: solid 1.88rpx #dfdfdf;
|
||||
border-bottom: solid 1.88rpx #dfdfdf;
|
||||
}
|
||||
.font_8 {
|
||||
font-size: 30rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 26.47rpx;
|
||||
color: #818181;
|
||||
}
|
||||
.text_14 {
|
||||
margin-left: 2.53rpx;
|
||||
font-size: 28.13rpx;
|
||||
}
|
||||
.text-wrapper {
|
||||
margin-right: 6.71rpx;
|
||||
padding: 6.6rpx 0 2.96rpx;
|
||||
border-radius: 9.38rpx;
|
||||
border: solid 1.88rpx #ffffff;
|
||||
}
|
||||
.text_15 {
|
||||
margin-right: 8.74rpx;
|
||||
color: #818181;
|
||||
line-height: 30rpx;
|
||||
text-shadow: 0 1.88rpx #ffffff, 0 -1.88rpx #ffffff, 1.88rpx 0 #ffffff, -1.88rpx 0 #ffffff;
|
||||
}
|
||||
.group_6 {
|
||||
margin-top: 28.14rpx;
|
||||
}
|
||||
.text_16 {
|
||||
font-size: 28.13rpx;
|
||||
}
|
||||
.font_9 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: FangZhengFonts;
|
||||
color: #323232;
|
||||
}
|
||||
.text_17 {
|
||||
line-height: 19.41rpx;
|
||||
}
|
||||
.group_7 {
|
||||
margin-top: 19.2rpx;
|
||||
}
|
||||
.text_18 {
|
||||
font-size: 28.13rpx;
|
||||
line-height: 27.69rpx;
|
||||
}
|
||||
.group_8 {
|
||||
margin-right: 4.59rpx;
|
||||
}
|
||||
.text_19 {
|
||||
line-height: 19.29rpx;
|
||||
}
|
||||
.text-wrapper_2 {
|
||||
// padding: 3.43rpx 0 3.86rpx;
|
||||
background-color: #ffffff;
|
||||
width: 65.63rpx;
|
||||
height: 30rpx;
|
||||
border: solid 0.94rpx #d1d1d1;
|
||||
}
|
||||
.text_20 {
|
||||
color: #323232;
|
||||
font-size: 22.5rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
.group_9 {
|
||||
margin-top: 24.38rpx;
|
||||
}
|
||||
.image_4 {
|
||||
width: 45rpx;
|
||||
height: 45rpx;
|
||||
}
|
||||
.text_21 {
|
||||
line-height: 28.48rpx;
|
||||
}
|
||||
.section_5 {
|
||||
padding: 16.88rpx 15rpx 15rpx 21.56rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.pos_4 {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.text_22 {
|
||||
color: #323232;
|
||||
line-height: 27.43rpx;
|
||||
}
|
||||
.group_10 {
|
||||
line-height: 24.92rpx;
|
||||
height: 24.92rpx;
|
||||
}
|
||||
.font_10 {
|
||||
font-size: 33.75rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 24.51rpx;
|
||||
color: #ffaaa5;
|
||||
}
|
||||
.text_23 {
|
||||
line-height: 24.34rpx;
|
||||
}
|
||||
.text_24 {
|
||||
font-weight: 700;
|
||||
line-height: 24.92rpx;
|
||||
}
|
||||
.text-wrapper_3 {
|
||||
padding: 20.63rpx 0 22.86rpx;
|
||||
background-color: #ffaaa5;
|
||||
border-radius: 75rpx;
|
||||
width: 204.38rpx;
|
||||
height: 71.25rpx;
|
||||
}
|
||||
.text_25 {
|
||||
color: #ffffff;
|
||||
line-height: 27.77rpx;
|
||||
}
|
||||
@import url(../../../../common/css/global.css);
|
||||
</style>
|
||||
75
pages/subPack/my-order/researchOrder/researchOrder.vue
Normal file
75
pages/subPack/my-order/researchOrder/researchOrder.vue
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<view class="flex-col justify-start relative page" :style="{ backgroundImage: 'url(' + bkgPubilcPath + ')' }">
|
||||
<view class="flex-col justify-start section_2 pos">
|
||||
<view class="flex-row section_3" style="display: flex; align-items: center;">
|
||||
<image
|
||||
class="image"
|
||||
:src="myOrderUrl + '/researchOrder/ss.png'"
|
||||
/>
|
||||
<input confirm-type="search" @confirm="search" class="ml-7" placeholder="搜索订单" style="width: 100%;" v-model="orderNumber"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from 'vue'
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
|
||||
import { myOrderUrl,bkgPubilcPath } from '@/common/globalImagesUrl';
|
||||
import { getFonts } from '@/common/globalFont';
|
||||
onLoad(() => {
|
||||
getFonts()
|
||||
})
|
||||
|
||||
const orderNumber = ref('')
|
||||
const search = () => {
|
||||
if (orderNumber.value === null || orderNumber.value === undefined || orderNumber.value === '') {
|
||||
uni.showToast({
|
||||
title: '请输入订单号',
|
||||
icon: 'error'
|
||||
})
|
||||
return ;
|
||||
}
|
||||
uni.redirectTo({
|
||||
url: '../myOrderList/myOrderList?orderNumber=' + orderNumber.value
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.ml-7 {
|
||||
margin-left: 13.13rpx;
|
||||
}
|
||||
.page {
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100vh;
|
||||
}
|
||||
.section_2 {
|
||||
padding: 33.75rpx 0 35.63rpx;
|
||||
background-color: #fff;
|
||||
box-shadow: 0rpx 3.75rpx 3.75rpx #32323240;
|
||||
}
|
||||
.pos {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.section_3 {
|
||||
margin-left: 35.63rpx;
|
||||
margin-right: 35.63rpx;
|
||||
padding: 18.75rpx 24.38rpx;
|
||||
background-color: #f3f3f3;
|
||||
border-radius: 75rpx;
|
||||
}
|
||||
.image {
|
||||
width: 28.13rpx;
|
||||
height: 28.13rpx;
|
||||
}
|
||||
@import url(../../../../common/css/global.css);
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user