服务类单个、批量购买、订单状态、联系人信息、地址信息、支付防抖完成
This commit is contained in:
parent
5868e94f4b
commit
2d6e8703be
|
|
@ -4,4 +4,4 @@ export const suiUrl = 'http://154.8.193.216:9092/api' //隋宇霏的接口地
|
|||
export const domain = 'https://www.carboner.cn/api'
|
||||
export const myIp = 'http://8.130.119.119:9092/api'
|
||||
|
||||
export const baseUrl = Url
|
||||
export const baseUrl = testUrl
|
||||
|
|
|
|||
|
|
@ -47,6 +47,42 @@ export const stateMap = new Map()
|
|||
stateList.forEach((item)=>{
|
||||
stateMap.set(item.state,item)
|
||||
})
|
||||
export const serviceStateList = [
|
||||
{
|
||||
state: '待支付',
|
||||
img: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FFybMDtHR-dengdaifukuan.png',
|
||||
msg: '等待买家付款',
|
||||
tips: '请于15分钟内付款，超时订单将自动关闭'
|
||||
},
|
||||
{
|
||||
state: '待发货',
|
||||
img: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FEOzVqolp-fahuo.png',
|
||||
msg: '待到店体验',
|
||||
tips: '等待您的光临体验~'
|
||||
},
|
||||
{
|
||||
state: '已退款',
|
||||
img: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FlPnvgqCp-yituikuan.png',
|
||||
msg: '订单已经退款',
|
||||
tips: '希望下次能让君满意'
|
||||
},
|
||||
{
|
||||
state: '已完成',
|
||||
img: '',
|
||||
msg: '订单完成，感谢您的支持',
|
||||
tips: '感谢您的支持'
|
||||
},
|
||||
{
|
||||
state: '交易关闭',
|
||||
img: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FaHDhacaI-dengdaifukuan.png',
|
||||
msg: '您的订单已关闭',
|
||||
tips: '下次看好了之后再买哦'
|
||||
}
|
||||
]
|
||||
export const serviceStateMap = new Map()
|
||||
serviceStateList.forEach((item)=>{
|
||||
serviceStateMap.set(item.state,item)
|
||||
})
|
||||
//获取选中日期是星期几方法
|
||||
export const weekDay = function(time) {
|
||||
let datelist = ['周日','周一','周二','周三','周四','周五','周六',]
|
||||
|
|
|
|||
39
pages.json
39
pages.json
|
|
@ -1,5 +1,14 @@
|
|||
{
|
||||
"pages": [
|
||||
{
|
||||
"path" : "pages/home/home",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "首页",
|
||||
"enablePullDownRefresh":true, //开启下拉刷新
|
||||
"navigationBarBackgroundColor": "#ede8e7"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/order/service-paystatus/service-paystatus",
|
||||
"style" :
|
||||
|
|
@ -63,15 +72,6 @@
|
|||
"navigationBarTitleText" : ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/home/home",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "首页",
|
||||
"enablePullDownRefresh":true, //开启下拉刷新
|
||||
"navigationBarBackgroundColor": "#ede8e7"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/store-home/main/main",
|
||||
"style" :
|
||||
|
|
@ -198,13 +198,6 @@
|
|||
"navigationBarTitleText" : ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/mine/OrderDetails/OrderDetails",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/workshop/index/index",
|
||||
"style" :
|
||||
|
|
@ -269,13 +262,6 @@
|
|||
"navigationBarTitleText" : ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/workshop/component/testTimePopUp",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/mine/addressList/addressList",
|
||||
"style" :
|
||||
|
|
@ -324,6 +310,13 @@
|
|||
{
|
||||
"navigationBarTitleText" : ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/order/singleServiceWait/singleServiceWait",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : ""
|
||||
}
|
||||
}
|
||||
],
|
||||
"plugins" : {
|
||||
|
|
|
|||
|
|
@ -1,492 +0,0 @@
|
|||
<template>
|
||||
<view class="flex-col page">
|
||||
<view class="flex-col">
|
||||
<view class="flex-col justify-start items-start image-wrapper">
|
||||
<image class="image"
|
||||
src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=c450ffa87845363012613b1e0f522a87.png" />
|
||||
</view>
|
||||
<view class="flex-col group">
|
||||
<view class="flex-row items-center section">
|
||||
<image class="image_2"
|
||||
src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=d7c7e8f082bbf68fe1e60091fa650fcd.png" />
|
||||
<view class="ml-6 flex-col items-start flex-1">
|
||||
<text class="font text">等待买家付款</text>
|
||||
<text class="font_2 text_2 mt-5">请于13分51秒内付款，超时订单将自动关闭</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-8 flex-row items-center section_2">
|
||||
<image class="shrink-0 image_3"
|
||||
src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=19ebf0fd3bd190ff882354f39ef52d3e.png" />
|
||||
<view class="ml-8 flex-col items-start flex-1">
|
||||
<!-- <text class="font text_3">张三 15888610253</text> -->
|
||||
<view class="font text_3">{{Status.addressSnapshot.name+Status.addressSnapshot.phone}}</view>
|
||||
<!-- <text class="mt-12 font_2 text_4">黑龙江省哈尔滨市呼兰区学院路街道288号哈尔滨华德学院</text> -->
|
||||
<view class="mt-12 font_2 text_4">{{Status.addressSnapshot.region+Status.addressSnapshot.detailAddress}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-8 flex-col section_3">
|
||||
<view class="flex-row justify-between self-stretch group_2">
|
||||
<view class="flex-row self-center">
|
||||
<!-- <image
|
||||
class="image_4"
|
||||
src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=be4a0c4089866e086291773796509ef4.png"
|
||||
/> -->
|
||||
<view v-for="i in Status.orderItemList" :key="i">
|
||||
<image :src="i.goodSnapshot.goodImg" style="height: 50px;width: 50px;" class="image_4"></image>
|
||||
</view>
|
||||
<view class="flex-col group_3 ml-17">
|
||||
<view class="flex-col">
|
||||
<view class="flex-row self-stretch">
|
||||
<!-- <text class="font">非遗绒花</text> -->
|
||||
<view v-for="i in Status.orderItemList" :key="i" class="font">
|
||||
{{i.goodSnapshot.name}}
|
||||
</view>
|
||||
<!-- <text class="ml-4 font">【材料包】</text> -->
|
||||
<view v-for="i in Status.orderItemList" :key="i" class="ml-4 font">
|
||||
【{{i.goodSnapshot.type}}】
|
||||
</view>
|
||||
</view>
|
||||
<text class="self-start font_2 text_5 mt-11">已选种类：紫色</text>
|
||||
</view>
|
||||
<view class="mt-38 flex-row items-center">
|
||||
<view class="flex-row items-center group_4">
|
||||
<!-- <text class="text_6">138.</text> -->
|
||||
<view v-for="i in Status.orderItemList" :key="i" class="text_6">
|
||||
{{i.goodSnapshot.price}}
|
||||
</view>
|
||||
<image class="image_5 image_6"
|
||||
src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=53a8efcd2031289983433ba21eb70050.png" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="self-start font_3 text_8">×1</text>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-center self-stretch group_5">
|
||||
<text class="font_4 text_9">商品金额</text>
|
||||
<view class="flex-row items-center">
|
||||
<!-- <text class="font_3">138.00</text> -->
|
||||
<view v-for="i in Status.orderItemList" :key="i" class="font_3">
|
||||
{{i.goodSnapshot.price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-center self-stretch group_6">
|
||||
<text class="font_4 text_10">优惠券</text>
|
||||
<view class="flex-row items-center">
|
||||
<text class="font_3">-50.00</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-end items-center self-stretch group_7">
|
||||
<view class="flex-row items-center group_8">
|
||||
<image class="image_5 image_8"
|
||||
src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=4713f88f0f01fcb4c33fac4a8eba7f0f.png" />
|
||||
<text class="font text_11">合计：</text>
|
||||
</view>
|
||||
<text class="font_3 text_12">88.00</text>
|
||||
</view>
|
||||
<view class="self-stretch divider view"></view>
|
||||
<text class="self-start font_4 text_13">买家留言</text>
|
||||
<view class="flex-col justify-start self-stretch text-wrapper">
|
||||
<text class="font_2 text_14">
|
||||
希望所使用的材料是可持续来源的，并且制作工艺要精细，以确保每一朵花瓣都能生动地展现出绒花的质感和美感。
|
||||
</text>
|
||||
</view>
|
||||
<view class="self-stretch divider view_2"></view>
|
||||
<view class="flex-row justify-between self-stretch group_9">
|
||||
<text class="font_2 text_15">订单编号：</text>
|
||||
<view class="flex-row items-center">
|
||||
<!-- <text class="font_5 text_16">E20241005095840091406189</text> -->
|
||||
<text class="font_5 text_16">{{Status.orderNumber}}</text>
|
||||
<view class="ml-2 flex-col justify-start items-center shrink-0 text-wrapper_2">
|
||||
<text class="text_17">复制</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-center self-stretch group_10">
|
||||
<text class="font_2 text_18">创建时间：</text>
|
||||
<text class="font_5 text_19">2024-10-05 09:58:41</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-center section_4 mt-284">
|
||||
<view class="flex-row items-center" style="margin-left:80px;">
|
||||
<!-- <text class="text_21">88.</text> -->
|
||||
<text class="font_6 text_20"> 合计：</text>
|
||||
<!-- <text class="text_23">00</text> -->
|
||||
<view v-for="i in Status.orderItemList" :key="i" class="text_21">
|
||||
{{i.goodSnapshot.price}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col justify-start items-center text-wrapper_3">
|
||||
<!-- <text class="font_6 text_22">去支付</text> -->
|
||||
<view v-if="Status.orderStatus==='待支付'" class="font_6 text_22">去支付</view>
|
||||
<view v-if="Status.orderStatus==='待发货'" class="font_6 text_22">取消订单</view>
|
||||
<view v-if="Status.orderStatus==='待收货'" class="font_6 text_22">查看物流</view>
|
||||
<view v-if="Status.orderStatus==='待收货'" class="font_6 text_22">确认收货</view>
|
||||
<view v-if="Status.orderStatus==='售后'" class="font_6 text_22">售后详情</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
const Status = ref({})
|
||||
console.log(Status.value, 34)
|
||||
onLoad((options) => {
|
||||
Status.value = JSON.parse(options.info);
|
||||
console.log(Status.value, 111)
|
||||
console.log(Status.value.orderStatus, 222)
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.mt-5 {
|
||||
margin-top: 9.38rpx;
|
||||
}
|
||||
|
||||
.ml-17 {
|
||||
margin-left: 31.88rpx;
|
||||
}
|
||||
|
||||
.mt-11 {
|
||||
margin-top: 20.63rpx;
|
||||
}
|
||||
|
||||
.mt-284 {
|
||||
margin-top: 532.5rpx;
|
||||
}
|
||||
|
||||
.page {
|
||||
background-color: #f8e8c1;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
padding: 15rpx 0;
|
||||
background-color: #fffef8;
|
||||
}
|
||||
|
||||
.image {
|
||||
margin-left: 16.88rpx;
|
||||
width: 37.5rpx;
|
||||
height: 37.5rpx;
|
||||
}
|
||||
|
||||
.group {
|
||||
padding: 15rpx 15rpx 0;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 16.88rpx 18.75rpx;
|
||||
background-color: #fffef8;
|
||||
border-radius: 18.75rpx;
|
||||
}
|
||||
|
||||
.image_2 {
|
||||
width: 75rpx;
|
||||
height: 75rpx;
|
||||
}
|
||||
|
||||
.section_2 {
|
||||
padding: 33.75rpx 18.75rpx;
|
||||
background-color: #fffef8;
|
||||
border-radius: 18.75rpx;
|
||||
}
|
||||
|
||||
.image_3 {
|
||||
width: 43.13rpx;
|
||||
height: 43.13rpx;
|
||||
}
|
||||
|
||||
.font_2 {
|
||||
font-size: 22.5rpx;
|
||||
font-family: Open Sans;
|
||||
line-height: 19.39rpx;
|
||||
color: #818181;
|
||||
}
|
||||
|
||||
.text_2 {
|
||||
color: #6b6e72;
|
||||
line-height: 21.34rpx;
|
||||
}
|
||||
|
||||
.text_4 {
|
||||
line-height: 20.91rpx;
|
||||
}
|
||||
|
||||
.section_3 {
|
||||
padding: 0 18.75rpx 26.25rpx 24.38rpx;
|
||||
background-color: #fffef8;
|
||||
border-radius: 18.75rpx;
|
||||
}
|
||||
|
||||
.group_2 {
|
||||
padding: 22.5rpx 0;
|
||||
border-bottom: solid 1.88rpx #dfdfdf;
|
||||
}
|
||||
|
||||
.image_4 {
|
||||
margin-bottom: 5.63rpx;
|
||||
border-radius: 9.38rpx;
|
||||
width: 146.25rpx;
|
||||
height: 165rpx;
|
||||
}
|
||||
|
||||
.group_3 {
|
||||
margin-top: 3.75rpx;
|
||||
}
|
||||
|
||||
.font {
|
||||
font-size: 26.25rpx;
|
||||
font-family: Open Sans;
|
||||
line-height: 24.43rpx;
|
||||
color: #323232;
|
||||
}
|
||||
|
||||
.text_3 {
|
||||
line-height: 23.77rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #323233;
|
||||
font-size: 28.13rpx;
|
||||
line-height: 26.08rpx;
|
||||
}
|
||||
|
||||
.text_5 {
|
||||
line-height: 20.79rpx;
|
||||
}
|
||||
|
||||
.group_4 {
|
||||
width: 90.66rpx;
|
||||
}
|
||||
|
||||
.text_6 {
|
||||
margin-left: 26.25rpx;
|
||||
color: #323232;
|
||||
font-size: 33.75rpx;
|
||||
font-family: Open Sans;
|
||||
font-weight: 600;
|
||||
line-height: 24.88rpx;
|
||||
}
|
||||
|
||||
.image_5 {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
|
||||
.image_6 {
|
||||
margin-left: -90rpx;
|
||||
}
|
||||
|
||||
.font_3 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: Open Sans;
|
||||
line-height: 19.39rpx;
|
||||
color: #323232;
|
||||
}
|
||||
|
||||
.text_7 {
|
||||
font-weight: 600;
|
||||
line-height: 19.29rpx;
|
||||
}
|
||||
|
||||
.text_8 {
|
||||
margin-right: 7.5rpx;
|
||||
margin-top: 146.25rpx;
|
||||
line-height: 18.73rpx;
|
||||
}
|
||||
|
||||
.group_5 {
|
||||
margin-top: 26.25rpx;
|
||||
}
|
||||
|
||||
.font_4 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: Open Sans;
|
||||
line-height: 24.43rpx;
|
||||
color: #818181;
|
||||
}
|
||||
|
||||
.text_9 {
|
||||
line-height: 24.28rpx;
|
||||
}
|
||||
|
||||
.group_6 {
|
||||
margin-top: 13.13rpx;
|
||||
}
|
||||
|
||||
.text_10 {
|
||||
line-height: 24.26rpx;
|
||||
}
|
||||
|
||||
.image_7 {
|
||||
width: 41.25rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
|
||||
.group_7 {
|
||||
margin-top: 16.88rpx;
|
||||
}
|
||||
|
||||
.group_8 {
|
||||
width: 102.26rpx;
|
||||
}
|
||||
|
||||
.image_8 {
|
||||
margin-left: 71.25rpx;
|
||||
}
|
||||
|
||||
.text_11 {
|
||||
margin-left: -101.25rpx;
|
||||
line-height: 24.09rpx;
|
||||
}
|
||||
|
||||
.text_12 {
|
||||
color: #fb8b05;
|
||||
}
|
||||
|
||||
.divider {
|
||||
background-color: #dfdfdf;
|
||||
height: 1.88rpx;
|
||||
}
|
||||
|
||||
.view {
|
||||
margin-top: 16.88rpx;
|
||||
}
|
||||
|
||||
.text_13 {
|
||||
margin-top: 30rpx;
|
||||
line-height: 24.21rpx;
|
||||
}
|
||||
|
||||
.text-wrapper {
|
||||
margin-top: 15rpx;
|
||||
padding: 15rpx 0 11.25rpx;
|
||||
background-color: #fffef8;
|
||||
border-radius: 9.38rpx;
|
||||
border-left: solid 1.88rpx #f0f0b5;
|
||||
border-right: solid 1.88rpx #f0f0b5;
|
||||
border-top: solid 1.88rpx #f0f0b5;
|
||||
border-bottom: solid 1.88rpx #f0f0b5;
|
||||
}
|
||||
|
||||
.text_14 {
|
||||
margin-left: 15rpx;
|
||||
margin-right: 18.75rpx;
|
||||
line-height: 26.25rpx;
|
||||
}
|
||||
|
||||
.view_2 {
|
||||
margin-top: 18.75rpx;
|
||||
}
|
||||
|
||||
.group_9 {
|
||||
margin-top: 22.5rpx;
|
||||
}
|
||||
|
||||
.text_15 {
|
||||
line-height: 20.85rpx;
|
||||
}
|
||||
|
||||
.font_5 {
|
||||
font-size: 22.5rpx;
|
||||
font-family: Open Sans;
|
||||
color: #323232;
|
||||
}
|
||||
|
||||
.text_16 {
|
||||
line-height: 16.54rpx;
|
||||
}
|
||||
|
||||
.text-wrapper_2 {
|
||||
background-color: #fffef8;
|
||||
width: 50.63rpx;
|
||||
height: 22.5rpx;
|
||||
border-left: solid 0.94rpx #d1d1d1;
|
||||
border-right: solid 0.94rpx #d1d1d1;
|
||||
border-top: solid 0.94rpx #d1d1d1;
|
||||
border-bottom: solid 0.94rpx #d1d1d1;
|
||||
}
|
||||
|
||||
.text_17 {
|
||||
color: #323232;
|
||||
font-size: 18.75rpx;
|
||||
font-family: Open Sans;
|
||||
line-height: 17.38rpx;
|
||||
}
|
||||
|
||||
.group_10 {
|
||||
margin-top: 11.25rpx;
|
||||
}
|
||||
|
||||
.text_18 {
|
||||
line-height: 20.7rpx;
|
||||
}
|
||||
|
||||
.text_19 {
|
||||
margin-right: 157.5rpx;
|
||||
line-height: 16.63rpx;
|
||||
}
|
||||
|
||||
.section_4 {
|
||||
padding: 15rpx 26.25rpx;
|
||||
background-color: #fffef8;
|
||||
}
|
||||
|
||||
.image_9 {
|
||||
margin-left: 86.25rpx;
|
||||
width: 33.75rpx;
|
||||
height: 33.75rpx;
|
||||
}
|
||||
|
||||
.text_21 {
|
||||
color: #fbb612;
|
||||
font-size: 37.5rpx;
|
||||
font-family: Open Sans;
|
||||
font-weight: 700;
|
||||
line-height: 27.62rpx;
|
||||
}
|
||||
|
||||
.font_6 {
|
||||
font-size: 30rpx;
|
||||
font-family: Open Sans;
|
||||
line-height: 27.62rpx;
|
||||
}
|
||||
|
||||
.text_20 {
|
||||
margin-left: -172.5rpx;
|
||||
color: #000000;
|
||||
line-height: 27.54rpx;
|
||||
}
|
||||
|
||||
.text_23 {
|
||||
margin-left: 78.75rpx;
|
||||
color: #fbb612;
|
||||
font-size: 30rpx;
|
||||
font-family: Open Sans;
|
||||
font-weight: 700;
|
||||
line-height: 22.05rpx;
|
||||
}
|
||||
|
||||
.text-wrapper_3 {
|
||||
padding: 22.5rpx 0;
|
||||
background-color: #fbb612;
|
||||
border-radius: 75rpx;
|
||||
width: 204.38rpx;
|
||||
height: 71.25rpx;
|
||||
}
|
||||
|
||||
.text_22 {
|
||||
color: #ffffff;
|
||||
line-height: 27.86rpx;
|
||||
}
|
||||
|
||||
@import url(/common/css/global.css);
|
||||
</style>
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
<view class="flex-row justify-end group_7" v-if="order.orderStatus==='待支付'">
|
||||
<view class="flex-col justify-start items-center text-wrapper" @click="cancelOrder(order)"><text
|
||||
class="font text_18">取消订单</text></view>
|
||||
<view class="flex-col justify-start items-center text-wrapper_2 ml-14" @click="goToPay(order)">
|
||||
<view class="flex-col justify-start items-center text-wrapper_2 ml-14" @click="wxPayFd(order)">
|
||||
<text class="font_3">去支付</text>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -117,6 +117,8 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 遮罩层 -->
|
||||
<view v-if="isShow" class="overlay"></view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -203,10 +205,16 @@ const isSelected = (tab) => Status.value.orderStatus === tab
|
|||
}
|
||||
}
|
||||
const goToText = (orderInfo) => {
|
||||
console.log(orderInfo);
|
||||
uni.navigateTo({
|
||||
url: '../../../pages/order/product-paysuccess/product-paysuccess?oid=' + JSON.stringify(orderInfo.id)
|
||||
})
|
||||
console.log('订单信息--->',orderInfo);
|
||||
if(orderInfo.orderType === 'product') {
|
||||
uni.navigateTo({
|
||||
url: '../../../pages/order/product-paysuccess/product-paysuccess?oid=' + JSON.stringify(orderInfo.id)
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: '../../../pages/order/service-paystatus/service-paystatus?oid=' + JSON.stringify(orderInfo.id)
|
||||
})
|
||||
}
|
||||
}
|
||||
const cancelOrder = async (order) => { //取消订单
|
||||
console.log(order);
|
||||
|
|
@ -222,9 +230,6 @@ const cancelOrder = async (order) => { //取消订单
|
|||
}
|
||||
})
|
||||
}
|
||||
const goToPay = async (order) => {
|
||||
wxPay(order.id) //调用微信支付
|
||||
}
|
||||
const wxPay = async( oid )=> { //传入订单id
|
||||
try {
|
||||
const res = await uni.request({
|
||||
|
|
@ -270,20 +275,38 @@ const wxPay = async( oid )=> { //传入订单id
|
|||
}
|
||||
}
|
||||
const postCancelOrder = async(order)=>{ //向后端发送取消订单请求
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/order/cancel/id',
|
||||
method: 'POST',
|
||||
header: {
|
||||
cookie: wx.getStorageSync('cookie')
|
||||
},
|
||||
data: { id: order.id }
|
||||
})
|
||||
console.log('取消订单的信息--->',res.data);
|
||||
if(res.data.code === 1) {
|
||||
Getorder() //成功请求后获取订单信息
|
||||
uni.redirectTo({
|
||||
url: '/pages/mine/mineorders/mineorders?zt=' + JSON.stringify(Status.value.orderStatus)
|
||||
if(order.addressSnapshot != null) {
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/order/cancel/id',
|
||||
method: 'POST',
|
||||
header: {
|
||||
cookie: wx.getStorageSync('cookie')
|
||||
},
|
||||
data: { id: order.id }
|
||||
})
|
||||
console.log('取消订单的信息--->',res.data);
|
||||
if(res.data.code === 1) {
|
||||
Getorder() //成功请求后获取订单信息
|
||||
uni.redirectTo({
|
||||
url: '/pages/mine/mineorders/mineorders?zt=' + JSON.stringify(Status.value.orderStatus)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/order/cancel/service/id',
|
||||
method: 'POST',
|
||||
header: {
|
||||
cookie: wx.getStorageSync('cookie')
|
||||
},
|
||||
data: { id: order.id }
|
||||
})
|
||||
console.log('取消订单的信息--->',res.data);
|
||||
if(res.data.code === 1) {
|
||||
Getorder() //成功请求后获取订单信息
|
||||
uni.redirectTo({
|
||||
url: '/pages/mine/mineorders/mineorders?zt=' + JSON.stringify(Status.value.orderStatus)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
//查看物流方法
|
||||
|
|
@ -326,9 +349,52 @@ const getFonts =()=>{
|
|||
const confirm =()=> { //确认收货方法
|
||||
console.log('确认收货方法');
|
||||
}
|
||||
//防抖相关变量
|
||||
let debounceTimer = null;
|
||||
let wxPayTimer = null;
|
||||
let loading = false;
|
||||
let isLoading = ref(false)
|
||||
let isShow = ref(false)
|
||||
const wxPayFd = (order) => { //微信支付按钮防抖
|
||||
clearTimeout(wxPayTimer)
|
||||
showLoading()
|
||||
isShow.value = true //打开遮罩
|
||||
wxPayTimer = setTimeout(async () => {
|
||||
await wxPay(order.id)
|
||||
}, 1000)
|
||||
setTimeout(()=>{
|
||||
hideLoading()
|
||||
isShow.value = false //关闭遮罩
|
||||
},2000)
|
||||
}
|
||||
function showLoading() { //加载弹窗
|
||||
if (!loading) {
|
||||
wx.showLoading({
|
||||
title: '加载中...',
|
||||
});
|
||||
loading = true;
|
||||
isLoading.value = true
|
||||
}
|
||||
}
|
||||
function hideLoading() { //关闭弹窗
|
||||
if (loading) {
|
||||
wx.hideLoading();
|
||||
loading = false;
|
||||
isLoading.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;
|
||||
}
|
||||
.groupp {
|
||||
padding: 22.5rpx 0 18.75rpx;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,36 +1,43 @@
|
|||
<template>
|
||||
<view class="flex-col page">
|
||||
<view class="flex-row justify-center items-center relative group">
|
||||
<text class="text">收货地址</text>
|
||||
<image class="image pos" @click="closeWindow"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FxSHTnKhk-close.png" />
|
||||
</view>
|
||||
<view class="flex-col list">
|
||||
<radio-group @change="radioChange">
|
||||
<view class="flex-col list-item_1" v-for="(item, index) in addressList" :key="index">
|
||||
<view class="flex-row justify-between items-center self-stretch">
|
||||
<view class="flex-row items-center">
|
||||
<radio color="#00ba9c" :value="index" :checked="item.isDefault === 1"></radio>
|
||||
<text class="font ml-9">{{ item.name }}</text>
|
||||
<text class="font_2 ml-9">{{ item.phone }}</text>
|
||||
</view>
|
||||
<view class="flex-row group_3">
|
||||
<image class="image_3"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FKNXwmQrO-edit.png" @click="editAddress(item)"/>
|
||||
<image class="image_3 ml-12"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FXPhhJFpx-delete.png" @click="deleteAddress(item.id)" />
|
||||
</view>
|
||||
</view>
|
||||
<text class="self-center font_3 text_2 mt-12">{{ item.detailAddress }}</text>
|
||||
</view>
|
||||
</radio-group>
|
||||
</view>
|
||||
|
||||
<view class="flex-col justify-start items-center section" @click="toNewAddress">
|
||||
<view class="flex-col justify-start items-center text-wrapper"><text class="text_3">添加新地址</text></view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="flex-col page">
|
||||
<view class="flex-row justify-center items-center self-stretch relative section_2">
|
||||
<text class="text">收货地址</text>
|
||||
<image
|
||||
@click="closeWindow"
|
||||
class="image pos_2"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FxSHTnKhk-close.png"
|
||||
/>
|
||||
</view>
|
||||
<view class="flex-col self-stretch list">
|
||||
<radio-group @change="radioChange">
|
||||
<view class="flex-col list-item mt-10" v-for="(item, index) in addressList" :key="index">
|
||||
<view class="flex-row justify-between items-center self-stretch">
|
||||
<view class="flex-row items-center">
|
||||
<radio color="#E79EA1" :value="index" :checked="item.isDefault === 1"></radio>
|
||||
<text class="font ml-8">{{ item.name }}</text>
|
||||
<text class="font_2 ml-8">{{ item.phone }}</text>
|
||||
</view>
|
||||
<view class="flex-row group">
|
||||
<image
|
||||
class="image_2"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FKNXwmQrO-edit.png"
|
||||
@click="editAddress(item)"
|
||||
/>
|
||||
<image
|
||||
class="image_2 ml-11"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FXPhhJFpx-delete.png"
|
||||
@click="confirmDelete(item.id)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<text class="self-center font_3 text_2 mt-14">{{ item.region }}{{ item.detailAddress }}</text>
|
||||
</view>
|
||||
</radio-group>
|
||||
</view>
|
||||
<view class="flex-col justify-start items-center self-center text-wrapper" @click="toNewAddress">
|
||||
<text class="text_3">添加新地址</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -38,7 +45,7 @@ import {nextTick, onMounted , ref } from 'vue'
|
|||
import emitter from '../../../utils/emitter'
|
||||
import { testUrl , baseUrl , suiUrl } from '../../../api/request';
|
||||
import { onShow } from "@dcloudio/uni-app";
|
||||
const items = ref([null, null])
|
||||
const items = ref([null, null,null,null,null,null, null,null,null,null])
|
||||
const addressList = ref([])
|
||||
const userInfo = wx.getStorageSync('userInfo')
|
||||
//页面跳转回来之后，刷新一次地址列表 onShow就是在页面显示后执行
|
||||
|
|
@ -81,6 +88,18 @@ const editAddress =(value)=>{
|
|||
url: '/pages/Shopping-cart/newaddress_Info/newaddress_Info?editInfo=' + JSON.stringify(value)
|
||||
})
|
||||
}
|
||||
const confirmDelete =(id)=> { //确定删除地址按钮
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '是否删除地址?',
|
||||
success: (e) => {
|
||||
if (e.confirm) {
|
||||
deleteAddress(id)
|
||||
} else if (e.cancel)
|
||||
return;
|
||||
}
|
||||
})
|
||||
}
|
||||
//删除地址方法
|
||||
const deleteAddress = async( id ) =>{
|
||||
const res = await uni.request({
|
||||
|
|
@ -105,121 +124,103 @@ const closeWindow =()=> {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ml-9 {
|
||||
margin-left: 16.88rpx;
|
||||
}
|
||||
.page {
|
||||
padding-top: 18.75rpx;
|
||||
background-color: #f5f5dc;
|
||||
border-radius: 28.13rpx 28.13rpx 0rpx 0rpx;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.group {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 60rpx;
|
||||
background-color: #fbc27b;
|
||||
padding: 11.47rpx 24.38rpx 6.26rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #323232;
|
||||
font-size: 37.5rpx;
|
||||
font-family: Open Sans;
|
||||
line-height: 34.76rpx;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 52.5rpx;
|
||||
height: 52.5rpx;
|
||||
}
|
||||
|
||||
.pos {
|
||||
position: absolute;
|
||||
right: 24.38rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-top: 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.list-item_1 {
|
||||
padding: 26.27rpx 16.8rpx 24.98rpx;
|
||||
background-color: #fffef8;
|
||||
border-bottom: solid 1.88rpx #c8c8c8;
|
||||
}
|
||||
|
||||
.image_2 {
|
||||
width: 33.75rpx;
|
||||
height: 33.75rpx;
|
||||
}
|
||||
|
||||
.font {
|
||||
font-size: 30rpx;
|
||||
font-family: Open Sans;
|
||||
line-height: 27.19rpx;
|
||||
color: #323232;
|
||||
}
|
||||
|
||||
.font_2 {
|
||||
font-size: 30rpx;
|
||||
font-family: Open Sans;
|
||||
line-height: 22.05rpx;
|
||||
color: #323232;
|
||||
}
|
||||
|
||||
.group_3 {
|
||||
margin-right: 10.97rpx;
|
||||
}
|
||||
|
||||
.image_3 {
|
||||
width: 39.38rpx;
|
||||
height: 39.38rpx;
|
||||
}
|
||||
|
||||
.font_3 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: Open Sans;
|
||||
line-height: 31.88rpx;
|
||||
color: #818181;
|
||||
}
|
||||
|
||||
.text_2 {
|
||||
width: 601.88rpx;
|
||||
}
|
||||
|
||||
.section {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin-top: 202.5rpx;
|
||||
padding: 18.75rpx 0;
|
||||
background-color: #fffef8;
|
||||
}
|
||||
|
||||
.text-wrapper {
|
||||
padding: 27.9rpx 0 29.01rpx;
|
||||
background-color: #fbb612;
|
||||
border-radius: 75rpx;
|
||||
width: 639.38rpx;
|
||||
}
|
||||
|
||||
.text_3 {
|
||||
color: #ffffff;
|
||||
font-size: 33.75rpx;
|
||||
font-family: Open Sans;
|
||||
line-height: 31.22rpx;
|
||||
}
|
||||
|
||||
.ml-11 {
|
||||
margin-left: 20.57rpx;
|
||||
}
|
||||
.page {
|
||||
padding-bottom: 29.93rpx;
|
||||
background-color: #f5f5dc;
|
||||
border-radius: 28.05rpx 28.05rpx 0rpx 0rpx;
|
||||
background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FQfLHXSAU-feiyigongfangbeijin.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
.section_2 {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
padding: 28.88rpx 26.18rpx 21.21rpx;
|
||||
background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FQfLHXSAU-feiyigongfangbeijin.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.text {
|
||||
color: #323232;
|
||||
font-size: 37.41rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 35.95rpx;
|
||||
}
|
||||
.image {
|
||||
width: 52.37rpx;
|
||||
height: 52.37rpx;
|
||||
}
|
||||
.pos_2 {
|
||||
position: absolute;
|
||||
right: 26.18rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.list {
|
||||
margin: 100.96rpx 14.96rpx 0 16.83rpx;
|
||||
}
|
||||
.list-item {
|
||||
padding: 26.18rpx 16.01rpx 30.41rpx 16.03rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 28.05rpx;
|
||||
}
|
||||
.list-item:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.image_3 {
|
||||
width: 31.8rpx;
|
||||
height: 33.67rpx;
|
||||
}
|
||||
.font {
|
||||
font-size: 29.93rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 25.83rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.font_2 {
|
||||
font-size: 29.93rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 19.99rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.group {
|
||||
margin-right: 10.72rpx;
|
||||
}
|
||||
.image_2 {
|
||||
width: 37.41rpx;
|
||||
height: 39.28rpx;
|
||||
}
|
||||
.font_3 {
|
||||
font-size: 26.18rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 31.8rpx;
|
||||
color: #818181;
|
||||
}
|
||||
.text_2 {
|
||||
width: 572.32rpx;
|
||||
}
|
||||
.text-wrapper {
|
||||
margin-top: 80.72rpx;
|
||||
padding: 26.75rpx 0 29.61rpx;
|
||||
background-color: #ffb6b9;
|
||||
border-radius: 74.81rpx;
|
||||
width: 637.78rpx;
|
||||
}
|
||||
.text_3 {
|
||||
color: #ffffff;
|
||||
font-size: 33.67rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 31.57rpx;
|
||||
}
|
||||
@import url(../../../common/css/global.css);
|
||||
</style>
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
class="shrink-0 image_8"
|
||||
src="https://ide.code.fun/api/image?token=6764d712797f850011f38d7b&name=549b29459342a9a09d24834be40eb53b.png"
|
||||
/>
|
||||
<text class="text_31">{{ orderObject.totalAmount }}</text>
|
||||
<text class="text_31">￥{{ orderObject.totalAmount }}</text>
|
||||
<!-- <text class="text_33">00</text> -->
|
||||
</view>
|
||||
<view class="flex-col justify-start items-center text-wrapper_2" @click="stateSubmit(orderObject)" v-if="bottomBtn != '联系客服'">
|
||||
|
|
@ -114,6 +114,8 @@
|
|||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 遮罩层 -->
|
||||
<view v-if="isShow" class="overlay"></view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -168,7 +170,7 @@ const setBottomText =()=>{ //更改按钮的字体
|
|||
const stateSubmit = (obj) => { //按钮状态改变的方法
|
||||
// console.log('商品obj--->',obj);
|
||||
if(bottomBtn.value === '立即支付') { //重新支付
|
||||
wxPay(oid.value)
|
||||
wxPayFd(oid.value)
|
||||
} else if(bottomBtn.value === '删除订单') {
|
||||
console.log('订单被删除');
|
||||
} else if(bottomBtn.value === '查看物流') {
|
||||
|
|
@ -204,10 +206,10 @@ const wxPay = async( oid )=> { //传入订单id
|
|||
buffer()
|
||||
},
|
||||
fail(e) {
|
||||
uni.showModal({
|
||||
content: '支付失败，原因为:' + e.errMsg,
|
||||
showCancel: false
|
||||
})
|
||||
// uni.showModal({
|
||||
// content: '支付失败，原因为:' + e.errMsg,
|
||||
// showCancel: false
|
||||
// })
|
||||
}
|
||||
})
|
||||
}catch(error) {
|
||||
|
|
@ -255,9 +257,58 @@ const copy = ( orderNumber ) => {
|
|||
}
|
||||
})
|
||||
}
|
||||
//防抖相关变量
|
||||
let debounceTimer = null;
|
||||
let wxPayTimer = null;
|
||||
let loading = false;
|
||||
let isLoading = ref(false)
|
||||
let isShow = ref(false)
|
||||
const fd = () => { //防抖
|
||||
clearTimeout(debounceTimer)
|
||||
showLoading()
|
||||
debounceTimer = setTimeout(async () => {
|
||||
await getMyCouponList()
|
||||
hideLoading()
|
||||
}, 1000)
|
||||
}
|
||||
const wxPayFd = (oid) => { //微信支付按钮防抖
|
||||
clearTimeout(wxPayTimer)
|
||||
isShow.value = true
|
||||
showLoading()
|
||||
wxPayTimer = setTimeout(async () => {
|
||||
await wxPay(oid)
|
||||
hideLoading()
|
||||
}, 1000)
|
||||
}
|
||||
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;
|
||||
}
|
||||
.goodsBox {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -145,7 +145,7 @@
|
|||
<text class="text_22">{{ sumprice.toFixed(2) }}</text>
|
||||
<!-- <text class="text_24">00</text> -->
|
||||
</view>
|
||||
<view class="flex-col justify-start items-center text-wrapper_3" @click="createOrder"><text class="font_7 text_23">微信支付</text></view>
|
||||
<view class="flex-col justify-start items-center text-wrapper_3" @click="wxPayFd()"><text class="font_7 text_23">微信支付</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-popup ref="popup" background-color="#fff">
|
||||
|
|
@ -153,6 +153,8 @@
|
|||
<addressComponentVue></addressComponentVue>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<!-- 遮罩层 -->
|
||||
<view v-if="isShow" class="overlay"></view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -366,11 +368,60 @@ const getFonts =()=>{
|
|||
}
|
||||
})
|
||||
}
|
||||
//防抖相关变量
|
||||
let debounceTimer = null;
|
||||
let wxPayTimer = null;
|
||||
let loading = false;
|
||||
let isLoading = ref(false)
|
||||
let isShow = ref(false)
|
||||
const fd = () => { //防抖
|
||||
clearTimeout(debounceTimer)
|
||||
showLoading()
|
||||
debounceTimer = setTimeout(async () => {
|
||||
await getMyCouponList()
|
||||
hideLoading()
|
||||
}, 1000)
|
||||
}
|
||||
const wxPayFd = () => { //微信支付按钮防抖
|
||||
clearTimeout(wxPayTimer)
|
||||
showLoading()
|
||||
isShow.value = true
|
||||
wxPayTimer = setTimeout(async () => {
|
||||
await createOrder()
|
||||
hideLoading()
|
||||
}, 1000)
|
||||
}
|
||||
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;
|
||||
}
|
||||
.popup-content {
|
||||
height: 392px;
|
||||
height: 300px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
|
|
|
|||
|
|
@ -3,135 +3,298 @@
|
|||
<view class="flex-row items-center section_2">
|
||||
<image
|
||||
class="image"
|
||||
src="https://ide.code.fun/api/image?token=67c001c94ae84d0012277299&name=43f9d33cbaf7205072a2e1cd43931990.png"
|
||||
:src="stateObject.img"
|
||||
/>
|
||||
<view class="flex-col items-start flex-1 ml-6">
|
||||
<text class="font text">等待买家付款</text>
|
||||
<text class="text_2 mt-4">请于13分51秒内付款，超时订单将自动关闭</text>
|
||||
<text class="font text">{{ stateObject.msg }}</text>
|
||||
<text class="text_2 mt-4">{{ stateObject.tips }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row items-center section_3">
|
||||
<image
|
||||
class="image_2"
|
||||
src="https://ide.code.fun/api/image?token=67c001c94ae84d0012277299&name=d96aebb563e235fbf33e14d78237c796.png"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FIwOnPxNs-contact.png"
|
||||
/>
|
||||
<text class="text_3 ml-10">张三 15888610253</text>
|
||||
<text class="text_3 ml-10">{{ contactInfo.name }} {{ contactInfo.phone }}</text>
|
||||
</view>
|
||||
<view class="flex-col section_4">
|
||||
<view class="flex-col">
|
||||
<view class="flex-row items-end list-item group mt-17" v-for="(item, index) in items" :key="index">
|
||||
<view class="flex-row items-end list-item group mt-17" v-for="(item, index) in productList" :key="index">
|
||||
<image
|
||||
class="shrink-0 image_3"
|
||||
src="https://ide.code.fun/api/image?token=67c001c94ae84d0012277299&name=5b1e63a77141ce1c8fc2514061052c99.png"
|
||||
:src="item.goodSnapshot.goodImg"
|
||||
/>
|
||||
<view class="flex-col flex-1 group_5">
|
||||
<view class="flex-row self-stretch group_3">
|
||||
<text class="font_2">非遗绒花</text>
|
||||
<text class="font_2 text_8">【材料包】手工教程课</text>
|
||||
<text class="font_2">{{ item.goodSnapshot.name }}</text>
|
||||
<text class="font_2 text_8">【{{ item.goodSnapshot.type }}】</text>
|
||||
</view>
|
||||
<text class="self-start font text_9">已选时间：12月9号星期二</text>
|
||||
<text class="self-start font_3 text_10">10:00-12:00</text>
|
||||
<text class="self-start font text_9">已选时间：{{ item.reservationDate }}星期二</text>
|
||||
<text class="self-start font_3 text_10">{{ item.timeSlot }}</text>
|
||||
<view class="flex-row items-center self-stretch group_23">
|
||||
<image
|
||||
<!-- <image
|
||||
class="image_4"
|
||||
src="https://ide.code.fun/api/image?token=67c001c94ae84d0012277299&name=4a3c5c3a5c83be7a7b0551c598ed6037.png"
|
||||
/>
|
||||
<text class="font_4 ml-3">138.</text>
|
||||
<text class="font_5 ml-3">00</text>
|
||||
/> -->
|
||||
<text class="font_4 ml-3">￥{{ item.goodSnapshot.price }}</text>
|
||||
<!-- <text class="font_5 ml-3">00</text> -->
|
||||
</view>
|
||||
</view>
|
||||
<text class="font_6 text_11 text_1">×1</text>
|
||||
<text class="font_6 text_11 text_1">×{{ item.quantity }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-center group_8">
|
||||
<text class="font text_16">商品金额</text>
|
||||
<view class="flex-row items-center">
|
||||
<image
|
||||
<!-- <image
|
||||
class="shrink-0 image_5"
|
||||
src="https://ide.code.fun/api/image?token=67c001c94ae84d0012277299&name=4223cdafed72fca52c442dae885cee9c.png"
|
||||
/>
|
||||
<text class="font_7 text_17">138.00</text>
|
||||
/> -->
|
||||
<text class="font_7 text_17">￥{{ orderObject.totalAmount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-center group_9">
|
||||
<text class="font">优惠券</text>
|
||||
<view class="flex-row items-center">
|
||||
<image
|
||||
<!-- <image
|
||||
class="shrink-0 image_6"
|
||||
src="https://ide.code.fun/api/image?token=67c001c94ae84d0012277299&name=shortmoney.png"
|
||||
/>
|
||||
<text class="font_7 text_18">50.00</text>
|
||||
/> -->
|
||||
<text class="font_7 text_18">-￥0</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-end items-center group_10">
|
||||
<view class="flex-row items-center group_11">
|
||||
<image
|
||||
<!-- <image
|
||||
class="image_5 image_7"
|
||||
src="https://ide.code.fun/api/image?token=67c001c94ae84d0012277299&name=15c19bceb4f8bbcc0ed72958e3788b20.png"
|
||||
/>
|
||||
/> -->
|
||||
<text class="font_2 text_19">合计：</text>
|
||||
</view>
|
||||
<text class="font_7 text_20">88.00</text>
|
||||
<text class="font_7 text_20">￥{{ orderObject.totalAmount }}</text>
|
||||
</view>
|
||||
<view class="flex-col group_12">
|
||||
<text class="self-start font text_21">买家留言</text>
|
||||
<view class="flex-col justify-start self-stretch relative group_13 mt-5">
|
||||
<view class="group_14"></view>
|
||||
<view class="group_14" v-if="orderObject.note != ''">
|
||||
<text class="font text_22 pos_4">
|
||||
希望所使用的材料是可持续来源的，并且制作工艺要精细，以确保每一朵花瓣都能生动地展现出绒花的质感和美感。
|
||||
{{ orderObject.note }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-center group_15">
|
||||
<text class="font text_23">订单编号：</text>
|
||||
<view class="flex-row items-center group_16">
|
||||
<view class="flex-col justify-start items-center text-wrapper"><text class="text_25">复制</text></view>
|
||||
<text class="font_5 text_24">E20241005095840091406189</text>
|
||||
<view class="flex-col justify-start items-center text-wrapper" @click="copy(orderObject.orderNumber)"><text class="text_25">复制</text></view>
|
||||
<text class="font_5 text_24">{{ orderObject.orderNumber }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-center group_17">
|
||||
<text class="font text_26">创建时间：</text>
|
||||
<text class="font_5 text_27">2024-10-05 09:58:41</text>
|
||||
<text class="font_5 text_27">{{ orderObject.createTime }}</text>
|
||||
</view>
|
||||
<view class="flex-col group_18">
|
||||
<view class="flex-row justify-between items-baseline group_21">
|
||||
<view class="flex-row justify-between items-baseline group_21"
|
||||
v-if="stateObject.state === '已退款'"
|
||||
>
|
||||
<text class="font text_28">退款时间：</text>
|
||||
<text class="font_5 text_29">2024-10-05 11:47:08</text>
|
||||
<text class="font_5 text_29">{{ orderObject.updateTime }}</text>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-baseline mt-3">
|
||||
<text class="font text_30">成交时间：</text>
|
||||
<text class="font_5 text_31">2024-10-05 11:47:08</text>
|
||||
<view class="flex-row justify-between items-baseline mt-3"
|
||||
v-if="stateObject.state === '已完成'"
|
||||
>
|
||||
<text class="font text_30">完成时间：</text>
|
||||
<text class="font_5 text_31">{{ orderObject.updateTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row items-center section_5">
|
||||
<view class="flex-row items-center shrink-0">
|
||||
<text class="font_8 text_32">合计：</text>
|
||||
<image
|
||||
<!-- <image
|
||||
class="shrink-0 image_8"
|
||||
src="https://ide.code.fun/api/image?token=67c001c94ae84d0012277299&name=549b29459342a9a09d24834be40eb53b.png"
|
||||
/>
|
||||
<text class="text_33">88.</text>
|
||||
<text class="font_6 text_36">00</text>
|
||||
/> -->
|
||||
<text class="text_33">￥{{ orderObject.totalAmount }}</text>
|
||||
<!-- <text class="font_6 text_36">00</text> -->
|
||||
</view>
|
||||
<view class="flex-row flex-1 ml-46">
|
||||
<view class="flex-col justify-start items-center text-wrapper_2">
|
||||
<text class="font_8 text_34">联系客服</text>
|
||||
</view>
|
||||
<view class="flex-col justify-start items-center text-wrapper_3 ml-6">
|
||||
<text class="font_8 text_35">去支付</text>
|
||||
<button class="text-wrapper_9" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">
|
||||
<text class="font_9 text_64">联系客服</text>
|
||||
</button>
|
||||
<view class="flex-col justify-start items-center text-wrapper_3 ml-6" @click="stateSubmit(orderObject)" v-if="orderObject.orderStatus == '待支付' ">
|
||||
<text class="font_8 text_35">{{ bottomBtn }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 遮罩层 -->
|
||||
<view v-if="isShow" class="overlay"></view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const items = [null,null,null,null,null,null]
|
||||
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { onLoad , onShow } from "@dcloudio/uni-app";
|
||||
import { serviceStateMap } from '../../../common/global';
|
||||
import { baseUrl } from '../../../api/request';
|
||||
const orderObject = ref({}) //后端传来的订单对象
|
||||
const contactInfo = ref({}) //联系人
|
||||
const productList = ref([]) //订单涵盖的商品
|
||||
const stateObject = ref({}) //当前订单状态
|
||||
const bottomBtn = ref('去支付') //底下按钮
|
||||
const oid = ref(0)
|
||||
onMounted(()=>{
|
||||
getOrderItem()
|
||||
})
|
||||
onLoad((options)=>{
|
||||
oid.value = JSON.parse(options.oid) //获取从上一个页面传来的值
|
||||
console.log('当前订单ID为',oid.value);
|
||||
})
|
||||
onShow( async ()=>{
|
||||
await getOrderItem()
|
||||
await setBottomText()
|
||||
})
|
||||
const getOrderItem = async ()=>{ //获取当前订单详情
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/order/get/id',
|
||||
method: 'POST',
|
||||
header: {
|
||||
'cookie': wx.getStorageSync("cookie")
|
||||
},
|
||||
data: { id: oid.value }
|
||||
})
|
||||
if(res.data.code === 1) {
|
||||
orderObject.value = res.data.data,
|
||||
contactInfo.value = res.data.data.contactsSnapshot,
|
||||
productList.value = res.data.data.orderItemList
|
||||
stateObject.value = serviceStateMap.get(res.data.data.orderStatus)
|
||||
}
|
||||
console.log('联系人--->',contactInfo.value);
|
||||
console.log('商品信息为--->',productList.value);
|
||||
console.log('此订单信息为',res.data);
|
||||
console.log('订单状态---->',stateObject.value);
|
||||
}
|
||||
const setBottomText =()=>{ //更改按钮的字体
|
||||
switch(stateObject.value.state) {
|
||||
case '待支付': bottomBtn.value = '立即支付';break;
|
||||
case '已退款': bottomBtn.value = '删除订单';break;
|
||||
case '交易成功': bottomBtn.value = '删除订单';break;
|
||||
}
|
||||
}
|
||||
const stateSubmit = (obj) => { //按钮状态改变的方法
|
||||
// console.log('商品obj--->',obj);
|
||||
if(bottomBtn.value === '立即支付') { //重新支付
|
||||
wxPayFd(oid.value)
|
||||
} else if(bottomBtn.value === '删除订单') {
|
||||
console.log('订单被删除');
|
||||
}
|
||||
}
|
||||
const confirm =()=> { //确认收货方法
|
||||
console.log('确认收货方法');
|
||||
}
|
||||
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({
|
||||
content: '支付成功',
|
||||
showCancel: false
|
||||
})
|
||||
buffer()
|
||||
},
|
||||
fail(e) {
|
||||
// uni.showModal({
|
||||
// content: '支付失败，原因为:' + e.errMsg,
|
||||
// showCancel: false
|
||||
// })
|
||||
}
|
||||
})
|
||||
}catch(error) {
|
||||
console.error('支付请求失败',error);
|
||||
uni.showModal({
|
||||
content: '支付请求失败,请重试。',
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
}
|
||||
const buffer = async ()=>{ //缓冲函数
|
||||
await getOrderItem();
|
||||
await setBottomText();
|
||||
}
|
||||
//复制到剪切板方法
|
||||
const copy = ( orderNumber ) => {
|
||||
console.log('订单编号为--->',orderNumber);
|
||||
uni.setClipboardData({
|
||||
data: orderNumber,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '成功复制到剪贴板'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
//防抖相关变量
|
||||
let debounceTimer = null;
|
||||
let wxPayTimer = null;
|
||||
let loading = false;
|
||||
let isLoading = ref(false)
|
||||
let isShow = ref(false)
|
||||
const wxPayFd = (oid) => { //微信支付按钮防抖
|
||||
clearTimeout(wxPayTimer)
|
||||
showLoading()
|
||||
isShow.value = true //打开遮罩
|
||||
wxPayTimer = setTimeout(async () => {
|
||||
await wxPay(oid)
|
||||
}, 1000)
|
||||
setTimeout(()=>{
|
||||
hideLoading()
|
||||
isShow.value = false //关闭遮罩
|
||||
},2000)
|
||||
}
|
||||
function showLoading() { //加载弹窗
|
||||
if (!loading) {
|
||||
wx.showLoading({
|
||||
title: '加载中...',
|
||||
});
|
||||
loading = true;
|
||||
isLoading.value = true
|
||||
}
|
||||
}
|
||||
function hideLoading() { //关闭弹窗
|
||||
if (loading) {
|
||||
wx.hideLoading();
|
||||
loading = false;
|
||||
isLoading.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-3 {
|
||||
margin-left: 5.63rpx;
|
||||
}
|
||||
|
|
@ -200,7 +363,7 @@
|
|||
line-height: 32.38rpx;
|
||||
}
|
||||
.section_4 {
|
||||
margin: 25.65rpx 15rpx 0 16.88rpx;
|
||||
margin: 25.65rpx 15rpx 70px 16.88rpx;
|
||||
padding: 20.63rpx 22.63rpx 9.79rpx 24.38rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 18.75rpx;
|
||||
|
|
@ -322,7 +485,7 @@
|
|||
margin-left: 72.3rpx;
|
||||
}
|
||||
.text_19 {
|
||||
margin-left: -102.3rpx;
|
||||
// margin-left: -102.3rpx;
|
||||
line-height: 24.3rpx;
|
||||
}
|
||||
.text_20 {
|
||||
|
|
@ -385,7 +548,7 @@
|
|||
line-height: 17.36rpx;
|
||||
}
|
||||
.text_24 {
|
||||
margin-left: -368.34rpx;
|
||||
margin-left: -404.34rpx;
|
||||
}
|
||||
.group_17 {
|
||||
margin-top: 10.24rpx;
|
||||
|
|
@ -469,5 +632,20 @@
|
|||
.text_35 {
|
||||
color: #ffffff;
|
||||
}
|
||||
.text-wrapper_9 {
|
||||
// position: relative;
|
||||
// left: 326rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 75rpx;
|
||||
width: 214rpx;
|
||||
// height: 71rpx;
|
||||
font-size: unset;
|
||||
}
|
||||
.ml-46 {
|
||||
margin-left: 141.25rpx;
|
||||
}
|
||||
.text_64 {
|
||||
color: #ffaaa5;
|
||||
}
|
||||
@import url(../../../common/css/global.css);
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -147,12 +147,13 @@
|
|||
name: '请选择联系人'
|
||||
}) //地址页 选择地址传过来的值 进入页面首先是默认地址，若无默认地址，则为空
|
||||
const productArr = ref([]) //商品对象
|
||||
const labelList = ref([]) //老套路，商品标签
|
||||
const userInfo = wx.getStorageSync('userInfo') //用户信息
|
||||
const orderItemList = ref({})
|
||||
const totalInfo = ref([]) //购物车传过来的批量商品
|
||||
const note = ref('')
|
||||
const postCartArr = ref([])
|
||||
const singleService = ref({}) //单个服务类商品
|
||||
const cnt = ref(1) //单个服务类商品的商品数量
|
||||
onMounted(() => {
|
||||
getFonts()
|
||||
//将关闭弹窗方法传入弹窗页面，绑定弹窗按钮可关闭弹窗
|
||||
|
|
@ -165,10 +166,17 @@
|
|||
})
|
||||
})
|
||||
onLoad((options)=>{
|
||||
totalInfo.value = JSON.parse(options.cartInfo)
|
||||
console.log('options.cartInfo-->',JSON.parse(options.cartInfo));
|
||||
console.log('totalInfo.value-->',toRaw(totalInfo.value) );
|
||||
getProduct() //获取商品列表
|
||||
if(options.cartInfo === undefined) {
|
||||
singleService.value = JSON.parse(options.obj)
|
||||
cnt.value = JSON.parse(options.cnt)
|
||||
console.log('单个服务类--->',singleService.value);
|
||||
console.log('商品数量---->',cnt.value);
|
||||
} else {
|
||||
totalInfo.value = JSON.parse(options.cartInfo)
|
||||
console.log('options.cartInfo-->',JSON.parse(options.cartInfo));
|
||||
console.log('totalInfo.value-->',toRaw(totalInfo.value) );
|
||||
getProduct() //获取商品列表
|
||||
}
|
||||
})
|
||||
onShow(()=>{
|
||||
userInfo.value = wx.getStorageSync('userInfo') //从微信缓存中获取用户信息
|
||||
|
|
|
|||
|
|
@ -548,10 +548,10 @@ const textAssign = (e) => { //文本输入框赋值方法
|
|||
}
|
||||
|
||||
.popup-content {
|
||||
height: 392px;
|
||||
height: 300px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
// background-color: #fff;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
687
pages/order/singleServiceWait/singleServiceWait.vue
Normal file
687
pages/order/singleServiceWait/singleServiceWait.vue
Normal file
|
|
@ -0,0 +1,687 @@
|
|||
<template>
|
||||
<!-- 批量服务类商品购买 -->
|
||||
<view class="flex-col page">
|
||||
<view class="flex-row justify-between items-center section_2">
|
||||
<view class="flex-row items-center">
|
||||
<image
|
||||
class="shrink-0 image"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FXymRmdOc-lianxiren.png"
|
||||
/>
|
||||
<text class="text ml-10">{{ contactRealInfo.name }} {{ contactRealInfo.phone }}</text>
|
||||
</view>
|
||||
<view class="flex-row items-center group" @click="loadPop()">
|
||||
<image
|
||||
class="image_2"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FKgDGnwlb-right.png"
|
||||
/>
|
||||
<text class="font text_2">更换联系人</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col section_3">
|
||||
<view class="flex-col">
|
||||
<view class="flex-row items-end list-item mt-13">
|
||||
<image
|
||||
class="shrink-0 image_3"
|
||||
:src="singleService.goodImg"
|
||||
/>
|
||||
<view class="flex-col flex-1 group_5">
|
||||
<view class="flex-row self-stretch group_3">
|
||||
<!-- <text class="font">{{ item.cartExperienceGoodVO }}</text> -->
|
||||
<text class="font text_3">【 服务类 】 {{singleService.name}} </text>
|
||||
</view>
|
||||
<text class="self-start font_2 text_7 mt-9">已选时间：{{ bookDate }}星期二</text>
|
||||
<text class="self-start font_3 text_8 mt-9">{{ timeSlot }}</text>
|
||||
<view class="flex-row justify-between items-end self-stretch mt-9">
|
||||
<view class="flex-row items-center">
|
||||
<!-- <image
|
||||
class="shrink-0 image_6"
|
||||
src="https://ide.code.fun/api/image?token=67be64de4ae84d0012274ced&name=4a3c5c3a5c83be7a7b0551c598ed6037.png"
|
||||
/> -->
|
||||
<text class="font_5 ml-3">￥{{ singleService.price }}</text>
|
||||
<!-- <text class="font_6 ml-3">00</text> -->
|
||||
</view>
|
||||
<image
|
||||
class="image_4"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FDuKxtYum-short.png"
|
||||
@click="shortNum(index)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row shrink-0 group_4">
|
||||
<view class="flex-col justify-start items-center text-wrapper"><text class="font_4 text_6">{{ cnt }}</text></view>
|
||||
<image
|
||||
class="image_5 ml-2"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FIOMGjSNx-add.png"
|
||||
@click="addNum(index)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-center items-center group_9 mt-15">
|
||||
<view class="group_10">
|
||||
<text class="font_7 text_11">注：购买课程均视为同意</text>
|
||||
<text class="font_7 text_12">用户须知</text>
|
||||
</view>
|
||||
<image
|
||||
class="image_7 ml-2"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FcoxrJLJf-quesrion.png"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col section_4">
|
||||
<view class="flex-row justify-between items-center">
|
||||
<view class="flex-row">
|
||||
<text class="font_8 text_13">课程总价</text>
|
||||
<text class="font_9 ml-7">共{{ cnt }}件商品</text>
|
||||
</view>
|
||||
<view class="flex-row items-center group_11">
|
||||
<!-- <image
|
||||
class="shrink-0 image_8"
|
||||
src="https://ide.code.fun/api/image?token=67be64de4ae84d0012274ced&name=eb4f44af1db8b709d9d4b2aecf5159be.png"
|
||||
/> -->
|
||||
<text class="font_10">￥{{ sumprice.toFixed(2) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-between mt-34">
|
||||
<text class="font_8">优惠券</text>
|
||||
<view class="flex-row group_12">
|
||||
<text class="font_9">0张优惠券可用</text>
|
||||
<image
|
||||
class="shrink-0 image_9 ml-3"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FHomvnulG-rightblack.png"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-center mt-34">
|
||||
<text class="font_8 text_14">合计</text>
|
||||
<view class="flex-row items-center group_13">
|
||||
<!-- <image
|
||||
class="shrink-0 image_8"
|
||||
src="https://ide.code.fun/api/image?token=67be64de4ae84d0012274ced&name=0f3f4f80197a7b3647f307901f6a3bea.png"
|
||||
/> -->
|
||||
<text class="font_10">￥{{ sumprice.toFixed(2) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col section_5">
|
||||
<text class="self-start font_8 text_15">订单备注</text>
|
||||
<view class="flex-col justify-start items-start self-stretch text-wrapper_2 mt-11">
|
||||
<text class="font_7 text_16">备注建议提前协商（250字以内）</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-center section_6">
|
||||
<view class="flex-row items-center">
|
||||
<image
|
||||
class="shrink-0 image_8 image_10"
|
||||
src="https://ide.code.fun/api/image?token=67be64de4ae84d0012274ced&name=549b29459342a9a09d24834be40eb53b.png"
|
||||
/>
|
||||
<text class="text_17">应付：</text>
|
||||
<text class="text_18">{{ sumprice.toFixed(2) }}</text>
|
||||
<!-- <text class="text_20">00</text> -->
|
||||
</view>
|
||||
<view class="flex-col justify-start items-center text-wrapper_3" @click="wxPayFd()"><text class="font_8 text_19">微信支付</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-popup ref="popup" background-color="#fff" :mask-click="false">
|
||||
<view class="popup-content">
|
||||
<contactsComponentVue></contactsComponentVue>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<!-- 遮罩层 -->
|
||||
<view v-if="isShow" class="overlay"></view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {nextTick, onMounted, ref, toRaw} from 'vue'
|
||||
import emitter from '../../../utils/emitter'
|
||||
import { onLoad , onShow } from "@dcloudio/uni-app";
|
||||
import { baseUrl } from '../../../api/request';
|
||||
import { stateMap } from '../../../common/global';
|
||||
import { sum } from 'mathjs';
|
||||
import contactsComponentVue from '../component/contactsComponent.vue'; //联系人弹窗\
|
||||
import contactPopVue from '../../mine/component/contactPop.vue'; //新增联系人弹窗
|
||||
const sumprice = ref(0) //总价格
|
||||
const popup = ref(null) //弹窗对象
|
||||
const contactRealInfo = ref({
|
||||
name: '请选择联系人'
|
||||
}) //地址页 选择地址传过来的值 进入页面首先是默认地址，若无默认地址，则为空
|
||||
const userInfo = wx.getStorageSync('userInfo') //用户信息
|
||||
const totalInfo = ref([]) //购物车传过来的批量商品
|
||||
const note = ref('')
|
||||
const postCartArr = ref([])
|
||||
const singleService = ref({}) //单个服务类商品
|
||||
const cnt = ref(1) //单个服务类商品的商品数量
|
||||
const timeSlot = ref('') //时间段信息
|
||||
const bookDate = ref('') //日期信息
|
||||
const restNumber = ref(0) //最大预约人数信息
|
||||
onMounted(() => {
|
||||
getFonts()
|
||||
//将关闭弹窗方法传入弹窗页面，绑定弹窗按钮可关闭弹窗
|
||||
emitter.on('close', () => {
|
||||
close()
|
||||
})
|
||||
//获取联系人信息
|
||||
emitter.on('contactsNowInfo', (val) =>{
|
||||
contactRealInfo.value = val
|
||||
})
|
||||
})
|
||||
onLoad((options)=>{
|
||||
singleService.value = JSON.parse(options.obj)
|
||||
cnt.value = JSON.parse(options.cnt)
|
||||
restNumber.value = JSON.parse(options.rest)
|
||||
bookDate.value = singleService.value.appointmentDateVOList[0].specificDate
|
||||
timeSlot.value = singleService.value.appointmentDateVOList[0].timePeriodVOList[0].timeSlot
|
||||
sumprice.value = cnt.value * singleService.value.price
|
||||
console.log('单个服务类--->',singleService.value);
|
||||
console.log('商品数量---->',cnt.value);
|
||||
console.log('时间段---->',timeSlot.value);
|
||||
console.log('日期---->',bookDate.value);
|
||||
console.log('剩余人数---->',restNumber.value);
|
||||
})
|
||||
onShow(()=>{
|
||||
userInfo.value = wx.getStorageSync('userInfo') //从微信缓存中获取用户信息
|
||||
getDefaultContact()
|
||||
// computed()
|
||||
})
|
||||
//关闭弹窗
|
||||
const close = () => {
|
||||
nextTick(() => {
|
||||
if (popup.value) {
|
||||
popup.value.close()
|
||||
}
|
||||
})
|
||||
}
|
||||
//加载弹窗。默认从底部弹出
|
||||
const loadPop =() =>{
|
||||
popup.value.open('bottom')
|
||||
}
|
||||
//获取用户默认联系人
|
||||
const getDefaultContact = async () =>{
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/contacts/list',
|
||||
method: 'POST',
|
||||
header: {
|
||||
cookie: wx.getStorageSync('cookie')
|
||||
}
|
||||
})
|
||||
if(res.data.code === 1) {
|
||||
console.log('联系人数组---->',res.data.data);
|
||||
}
|
||||
//根据for循环遍历默认地址
|
||||
for(let key in res.data.data) {
|
||||
if(res.data.data[key].isDefault === 1) {
|
||||
contactRealInfo.value = res.data.data[key]
|
||||
}
|
||||
}
|
||||
}
|
||||
const createOrder = async () => { //单个服务类的购买方法
|
||||
console.log('联系人信息-->',contactRealInfo.value);
|
||||
formatArr()
|
||||
// console.log('postCartArr--->',postCartArr.value);
|
||||
const resOrder = await uni.request({ //向后端发送生成订单请求
|
||||
url: baseUrl + '/order/add',
|
||||
method: 'POST',
|
||||
header: {
|
||||
cookie: wx.getStorageSync('cookie')
|
||||
},
|
||||
data: {
|
||||
orderType: 'service',
|
||||
userName: userInfo.userName,
|
||||
contactsId: contactRealInfo.value.id, //联系人信息id
|
||||
couponId: null, //优惠卷id
|
||||
note: note.value,
|
||||
orderItemMainInfoAddRequestList: toRaw(postCartArr.value)
|
||||
}
|
||||
})
|
||||
console.log('后台返回订单响应==>',resOrder.data);
|
||||
if(resOrder.data.code === 1) {
|
||||
wxPay(resOrder.data.data)
|
||||
}
|
||||
}
|
||||
|
||||
//减少当前商品数量
|
||||
const shortNum = (index)=>{
|
||||
if(cnt.value > 1) {
|
||||
cnt.value -= 1
|
||||
//计算商品价格
|
||||
sumprice.value -= singleService.value.price * 1
|
||||
}
|
||||
}
|
||||
//增加当前商品数量
|
||||
const addNum = (index)=>{
|
||||
if( cnt.value < restNumber.value ) { //数量肯定不能大于库存
|
||||
cnt.value += 1
|
||||
sumprice.value += singleService.value.price * 1 //计算商品价格
|
||||
}
|
||||
}
|
||||
const formatArr = () =>{ //格式化
|
||||
postCartArr.value.splice(0,postCartArr.value.length)
|
||||
postCartArr.value.push({
|
||||
goodId: singleService.value.id,
|
||||
quantity: cnt.value,
|
||||
reservationDate: bookDate.value,
|
||||
timeSlot: timeSlot.value
|
||||
})
|
||||
}
|
||||
const wxPay = async( oid )=> { //传入订单id
|
||||
console.log('oid--->',oid);
|
||||
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({
|
||||
content: '支付成功',
|
||||
showCancel: false
|
||||
})
|
||||
uni.redirectTo({
|
||||
url: '/pages/order/service-paystatus/service-paystatus?oid=' + JSON.stringify(oid)
|
||||
})
|
||||
console.log('支付成功res--->',res);
|
||||
},
|
||||
fail(e) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/order/service-paystatus/service-paystatus?oid=' + JSON.stringify(oid)
|
||||
})
|
||||
console.log('e.errMsg--->',e.errMsg);
|
||||
}
|
||||
})
|
||||
}catch(error) {
|
||||
console.error('支付请求失败',error);
|
||||
uni.showModal({
|
||||
content: '支付请求失败,请重试。',
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
}
|
||||
const textAssign = (e) => { //文本输入框赋值方法
|
||||
note.value = e.detail.value
|
||||
// console.log('note--->',note.value);
|
||||
}
|
||||
//获取字体
|
||||
const getFonts =()=>{
|
||||
uni.loadFontFace({
|
||||
family: 'FangZhengFonts',
|
||||
source: `url("https://carbon2.obs.cn-north-4.myhuaweicloud.com/fonts/FangZhengFonts.TTF")`,
|
||||
success:(res) =>{
|
||||
console.log('success',res);
|
||||
},
|
||||
fail:(err) => {
|
||||
console.log('err',err);
|
||||
}
|
||||
})
|
||||
}
|
||||
//防抖相关变量
|
||||
let debounceTimer = null;
|
||||
let wxPayTimer = null;
|
||||
let loading = false;
|
||||
let isLoading = ref(false)
|
||||
let isShow = ref(false)
|
||||
// const fd = () => { //防抖
|
||||
// clearTimeout(debounceTimer)
|
||||
// showLoading()
|
||||
// debounceTimer = setTimeout(async () => {
|
||||
// await getMyCouponList()
|
||||
// hideLoading()
|
||||
// }, 1000)
|
||||
// }
|
||||
const wxPayFd = () => { //微信支付按钮防抖
|
||||
clearTimeout(wxPayTimer)
|
||||
showLoading()
|
||||
isShow.value = true
|
||||
wxPayTimer = setTimeout(async () => {
|
||||
await createOrder()
|
||||
}, 1000)
|
||||
}
|
||||
function showLoading() { //加载弹窗
|
||||
if (!loading) {
|
||||
wx.showLoading({
|
||||
title: '加载中...',
|
||||
});
|
||||
loading = true;
|
||||
isLoading.value = true
|
||||
}
|
||||
}
|
||||
function hideLoading() { //关闭弹窗
|
||||
if (loading) {
|
||||
wx.hideLoading();
|
||||
loading = false;
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
const getMyCouponList = async () => { //获取优惠卷列表
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/coupon/list/use',
|
||||
method: 'POST',
|
||||
header: {
|
||||
cookie
|
||||
},
|
||||
data: {
|
||||
currentAmount: sumprice.value,
|
||||
isAvailable: true
|
||||
}
|
||||
})
|
||||
myCouponList.value = res.data.data
|
||||
templateString.value = myCouponList.value.length + '张优惠券可用'
|
||||
console.log('============================>', myCouponList.value)
|
||||
}
|
||||
|
||||
</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;
|
||||
}
|
||||
.mt-13 {
|
||||
margin-top: 24.38rpx;
|
||||
}
|
||||
.mt-9 {
|
||||
margin-top: 16.88rpx;
|
||||
}
|
||||
.mt-15 {
|
||||
margin-top: 28.13rpx;
|
||||
}
|
||||
.ml-7 {
|
||||
margin-left: 13.13rpx;
|
||||
}
|
||||
.ml-3 {
|
||||
margin-left: 5.63rpx;
|
||||
}
|
||||
.mt-11 {
|
||||
margin-top: 20.63rpx;
|
||||
}
|
||||
.page {
|
||||
padding-top: 24.38rpx;
|
||||
background-color: #f8e8c1;
|
||||
background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FQfLHXSAU-feiyigongfangbeijin.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100vh;
|
||||
}
|
||||
.section_2 {
|
||||
margin-left: 24.38rpx;
|
||||
margin-right: 22.5rpx;
|
||||
padding: 20.63rpx 23.08rpx 24.98rpx 27.54rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 18.75rpx;
|
||||
}
|
||||
.image {
|
||||
width: 65.63rpx;
|
||||
height: 67.5rpx;
|
||||
}
|
||||
.text {
|
||||
color: #818181;
|
||||
font-size: 37.5rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 32.38rpx;
|
||||
}
|
||||
.group {
|
||||
width: 167.03rpx;
|
||||
}
|
||||
.image_2 {
|
||||
margin-left: 129.53rpx;
|
||||
width: 37.5rpx;
|
||||
height: 37.5rpx;
|
||||
}
|
||||
.font {
|
||||
font-size: 26.25rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 25.54rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.text_2 {
|
||||
margin-left: -167.03rpx;
|
||||
color: #ffaaa5;
|
||||
}
|
||||
.section_3 {
|
||||
margin: 31.27rpx 15rpx 0 16.88rpx;
|
||||
padding: 20.63rpx 18.75rpx 24.38rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 18.75rpx;
|
||||
}
|
||||
.list-item:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.image_3 {
|
||||
border-radius: 9.38rpx;
|
||||
width: 142.5rpx;
|
||||
height: 166.88rpx;
|
||||
}
|
||||
.group_5 {
|
||||
margin-left: 30.04rpx;
|
||||
margin-top: 4.2rpx;
|
||||
}
|
||||
.group_3 {
|
||||
padding: 0 3.83rpx;
|
||||
}
|
||||
.text_3 {
|
||||
line-height: 25.01rpx;
|
||||
}
|
||||
.font_2 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 25.54rpx;
|
||||
color: #818181;
|
||||
}
|
||||
.text_7 {
|
||||
margin-left: 8.01rpx;
|
||||
line-height: 24.62rpx;
|
||||
}
|
||||
.font_3 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 17.53rpx;
|
||||
color: #818181;
|
||||
}
|
||||
.text_8 {
|
||||
margin-left: 9.21rpx;
|
||||
}
|
||||
.image_6 {
|
||||
width: 35.63rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
.font_5 {
|
||||
font-size: 33.75rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 22.54rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.font_6 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 17.53rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.image_4 {
|
||||
border-radius: 9.38rpx 0rpx 0rpx 9.38rpx;
|
||||
width: 45rpx;
|
||||
height: 45rpx;
|
||||
}
|
||||
.group_4 {
|
||||
margin-left: 3.75rpx;
|
||||
margin-right: 5.63rpx;
|
||||
}
|
||||
.text-wrapper {
|
||||
padding: 11.31rpx 0 16.46rpx;
|
||||
background-color: #ffaaa5;
|
||||
width: 58.13rpx;
|
||||
height: 45rpx;
|
||||
}
|
||||
.font_4 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 17.53rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
.text_6 {
|
||||
line-height: 17.23rpx;
|
||||
}
|
||||
.image_5 {
|
||||
border-radius: 0rpx 9.38rpx 9.38rpx 0rpx;
|
||||
width: 45rpx;
|
||||
height: 45rpx;
|
||||
}
|
||||
.group_9 {
|
||||
padding: 0 138.81rpx;
|
||||
}
|
||||
.group_10 {
|
||||
line-height: 21.71rpx;
|
||||
height: 21.71rpx;
|
||||
}
|
||||
.font_7 {
|
||||
font-size: 22.5rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 22.54rpx;
|
||||
color: #818181;
|
||||
}
|
||||
.text_11 {
|
||||
line-height: 21.71rpx;
|
||||
}
|
||||
.text_12 {
|
||||
color: #ed4845;
|
||||
line-height: 21rpx;
|
||||
}
|
||||
.image_7 {
|
||||
width: 26.25rpx;
|
||||
height: 26.25rpx;
|
||||
}
|
||||
.section_4 {
|
||||
margin: 30rpx 16.88rpx 0 16.88rpx;
|
||||
padding: 30rpx 19.22rpx 20.63rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 18.75rpx;
|
||||
}
|
||||
.font_8 {
|
||||
font-size: 30rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 29.18rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.text_13 {
|
||||
line-height: 28.13rpx;
|
||||
}
|
||||
.font_9 {
|
||||
font-size: 30rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 29.18rpx;
|
||||
color: #818181;
|
||||
}
|
||||
.group_11 {
|
||||
margin-right: 9.38rpx;
|
||||
}
|
||||
.image_8 {
|
||||
width: 33.75rpx;
|
||||
height: 33.75rpx;
|
||||
}
|
||||
.font_10 {
|
||||
font-size: 30rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 20.04rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.group_12 {
|
||||
margin-right: 5.16rpx;
|
||||
}
|
||||
.image_9 {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
.text_14 {
|
||||
line-height: 27.77rpx;
|
||||
}
|
||||
.group_13 {
|
||||
margin-right: 13.37rpx;
|
||||
}
|
||||
.section_5 {
|
||||
margin: 28.13rpx 15rpx 110rpx 18.75rpx;
|
||||
padding: 17.81rpx 24.13rpx 22.5rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 18.75rpx;
|
||||
}
|
||||
.text_15 {
|
||||
color: #000000;
|
||||
line-height: 29.53rpx;
|
||||
}
|
||||
.text-wrapper_2 {
|
||||
margin-left: 3.99rpx;
|
||||
margin-right: 3.99rpx;
|
||||
padding: 22.35rpx 0 115.22rpx;
|
||||
background-color: #ffefef;
|
||||
border-radius: 9.38rpx;
|
||||
}
|
||||
.text_16 {
|
||||
margin-left: 21.15rpx;
|
||||
line-height: 21.81rpx;
|
||||
}
|
||||
.section_6 {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
// margin-top: 333.75rpx;
|
||||
padding: 16.88rpx 25.31rpx 15rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.image_10 {
|
||||
margin-left: 85.31rpx;
|
||||
}
|
||||
.text_17 {
|
||||
margin-left: -119.06rpx;
|
||||
color: #000000;
|
||||
font-size: 30rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 26.49rpx;
|
||||
}
|
||||
.text_18 {
|
||||
margin-left: 28.5rpx;
|
||||
color: #ffaaa5;
|
||||
font-size: 37.5rpx;
|
||||
font-family: Open Sans;
|
||||
font-weight: 700;
|
||||
line-height: 27.62rpx;
|
||||
}
|
||||
.text_20 {
|
||||
color: #ffaaa5;
|
||||
font-size: 30rpx;
|
||||
font-family: Open Sans;
|
||||
font-weight: 700;
|
||||
line-height: 22.05rpx;
|
||||
}
|
||||
.text-wrapper_3 {
|
||||
padding: 20.51rpx 0 22.97rpx;
|
||||
background-color: #ffaaa5;
|
||||
border-radius: 75rpx;
|
||||
width: 204.38rpx;
|
||||
height: 71.25rpx;
|
||||
}
|
||||
.text_19 {
|
||||
color: #ffffff;
|
||||
line-height: 27.77rpx;
|
||||
}
|
||||
.popup-content {
|
||||
height: 800rpx;
|
||||
}
|
||||
@import url(../../../common/css/global.css);
|
||||
</style>
|
||||
|
|
@ -1,418 +0,0 @@
|
|||
<template>
|
||||
<view class="flex-col justify-start page">
|
||||
<view class="flex-col section">
|
||||
<view class="flex-row justify-between group">
|
||||
<view class="flex-row items-end">
|
||||
<image
|
||||
class="image"
|
||||
:src="productInfo.goodImg"
|
||||
/>
|
||||
<view class="flex-col items-start relative group_2 ml-13">
|
||||
<view class="group_3">
|
||||
<text class="font text_2">￥</text>
|
||||
<text class="text">{{ productInfo.price }}</text>
|
||||
</view>
|
||||
<text class="font_2 text_3">请选择</text>
|
||||
<!-- <text class="font_2 pos_2">数量：20</text> -->
|
||||
<text class="font_2 pos">场次</text>
|
||||
</view>
|
||||
</view>
|
||||
<image
|
||||
class="self-start image_2"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FTZQhzAYT-close.png"
|
||||
/>
|
||||
</view>
|
||||
<view class="flex-col mt-2">
|
||||
<view class="flex-col">
|
||||
<view class="flex-row justify-between items-center section_2">
|
||||
<text class="font text_4">参加日期：2024年11月</text>
|
||||
<text class="font_2 text_5">当前预约人数：10</text>
|
||||
</view>
|
||||
<view class="flex-col group_4 mt-5">
|
||||
<view class="flex-col self-stretch group_5">
|
||||
<text class="self-start font_3 text_6">选择预约时间</text>
|
||||
<view class="flex-col justify-start self-stretch view mt-14">
|
||||
<scroll-view class="group_10" :scroll-x="true">
|
||||
<view class="flex-row justify-between items-baseline">
|
||||
<text :style="{color: textColor[index]}" class="font_4 text_7" v-for="(item, index) in items" :key="index" @click="choose(index)">
|
||||
今天12-09
|
||||
</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row self-center relative grid">
|
||||
<view class="flex-col justify-start grid-item pos_1">
|
||||
<view class="section_4"></view>
|
||||
<text class="font_5 text_11 pos_3">10:00-12:00</text>
|
||||
<text class="font_3 pos_5">可预约</text>
|
||||
</view>
|
||||
<view class="flex-col justify-start grid-item_2 pos_14">
|
||||
<view class="section_4"></view>
|
||||
<text class="font_5 pos_4">12:00-14:00</text>
|
||||
<text class="font_3 pos_6">可预约</text>
|
||||
</view>
|
||||
<view class="flex-col justify-start items-center grid-item_3 pos_15">
|
||||
<text class="font_3">可预约</text>
|
||||
<view class="flex-col justify-start items-center text-wrapper pos_7">
|
||||
<text class="font_5">14:00-16:00</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col justify-start grid-item_2 pos_11">
|
||||
<view class="section_4"></view>
|
||||
<text class="font_5 pos_8">16:00-18:00</text>
|
||||
<text class="font_3 pos_9">可预约</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col justify-start self-stretch group_6">
|
||||
<view class="flex-row justify-between section_5">
|
||||
<text class="font_3 text_12">预约时间</text>
|
||||
<view class="flex-row items-center group_7">
|
||||
<text class="font_5">2024-12-09</text>
|
||||
<text class="font_5 ml-22">暂未选择</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col items-start self-stretch section_6">
|
||||
<text class="font">购买须知：本次课程活动最少需要到</text>
|
||||
<text class="font">达5人才能进行授课</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col justify-start items-center section_7">
|
||||
<view class="flex-row section_8">
|
||||
<text class="font_4 text_13">加入购物车</text>
|
||||
<!-- <text class="font_4 text_14 ml-21">买</text> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import { baseUrl } from '../../../api/request';
|
||||
const cookie = wx.getStorageSync("cookie") //请求头
|
||||
const items = ref([null,null,null,null,null,null,null])
|
||||
const father = defineProps(['pid'])
|
||||
const pid = ref(0) //商品id
|
||||
const productInfo = ref({}) //商品对象
|
||||
const bookTimeList = ref([]) //时间段数组
|
||||
const textColor = ref(['#000', '#000', '#000', '#000', '#000', '#000', '#000'])
|
||||
onLoad((options)=>{
|
||||
})
|
||||
onMounted(()=>{
|
||||
// console.log('onMounted--->',father.pid);
|
||||
getProduct()
|
||||
})
|
||||
const choose = (index) => { //选中后要改变颜色和切换
|
||||
console.log(textColor.value[index]);
|
||||
textColor.value[index] = '#C35C5D'
|
||||
}
|
||||
const getProduct = async ()=>{
|
||||
pid.value = father.pid //父组件传来的商品id
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/goods/service/list/id',
|
||||
method: 'POST',
|
||||
data:{ id: pid.value },
|
||||
header: { cookie }
|
||||
})
|
||||
console.log('后端传来的商品信息--->',res.data.data);
|
||||
if(res.data.code === 1 ) {
|
||||
productInfo.value = res.data.data
|
||||
bookTimeList.value = res.data.data.appointmentDateVOList
|
||||
}
|
||||
console.log('商品信息--->',productInfo.value);
|
||||
console.log('时间段信息--->',bookTimeList.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ml-13 {
|
||||
margin-left: 24.38rpx;
|
||||
}
|
||||
.mt-5 {
|
||||
margin-top: 9.38rpx;
|
||||
}
|
||||
.ml-21 {
|
||||
margin-left: 39.38rpx;
|
||||
}
|
||||
.page {
|
||||
padding-bottom: 18.75rpx;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
.section {
|
||||
padding: 28.13rpx 0;
|
||||
background-color: #ffffff;
|
||||
border-radius: 37.5rpx 37.5rpx 0rpx 0rpx;
|
||||
}
|
||||
.group {
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
.image {
|
||||
border-radius: 5.63rpx;
|
||||
width: 195rpx;
|
||||
height: 204.38rpx;
|
||||
}
|
||||
.group_2 {
|
||||
margin-bottom: 5.29rpx;
|
||||
padding-bottom: 28.86rpx;
|
||||
width: 157.8rpx;
|
||||
}
|
||||
.group_3 {
|
||||
margin-left: 17.51rpx;
|
||||
line-height: 29.7rpx;
|
||||
}
|
||||
.font {
|
||||
font-size: 37.5rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 45rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.text_2 {
|
||||
color: #c35c5d;
|
||||
line-height: 24.17rpx;
|
||||
}
|
||||
.text {
|
||||
color: #c35c5d;
|
||||
font-size: 45rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 29.7rpx;
|
||||
}
|
||||
.font_2 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 31.88rpx;
|
||||
color: #818181;
|
||||
}
|
||||
.text_3 {
|
||||
margin-top: 21.26rpx;
|
||||
}
|
||||
.pos_2 {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.pos {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 28.03rpx;
|
||||
}
|
||||
.image_2 {
|
||||
margin-right: 20.63rpx;
|
||||
margin-top: 5.63rpx;
|
||||
width: 37.5rpx;
|
||||
height: 37.5rpx;
|
||||
}
|
||||
.section_2 {
|
||||
padding: 30.53rpx 21.86rpx 30.36rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 28.13rpx;
|
||||
}
|
||||
.text_4 {
|
||||
color: #000000;
|
||||
line-height: 36.62rpx;
|
||||
}
|
||||
.text_5 {
|
||||
margin-right: 16.14rpx;
|
||||
line-height: 25.43rpx;
|
||||
}
|
||||
.group_4 {
|
||||
padding: 0 20.63rpx 35.63rpx;
|
||||
}
|
||||
.group_5 {
|
||||
padding: 31.76rpx 7.5rpx 0;
|
||||
border-top: solid 1.88rpx #d9d9d9;
|
||||
}
|
||||
.font_3 {
|
||||
font-size: 30rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 27.07rpx;
|
||||
color: #000000;
|
||||
}
|
||||
.text_6 {
|
||||
line-height: 28.01rpx;
|
||||
}
|
||||
.view {
|
||||
margin-right: 7.5rpx;
|
||||
padding: 35.98rpx 0 35.87rpx 20rpx;
|
||||
background-color: #faddde;
|
||||
border-radius: 18.75rpx;
|
||||
}
|
||||
.group_10 {
|
||||
// margin-left: 11.78rpx;
|
||||
margin-right: 14.83rpx;
|
||||
}
|
||||
.font_4 {
|
||||
font-size: 30rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 27.07rpx;
|
||||
color: #c35c5d;
|
||||
}
|
||||
.text_7 {
|
||||
// border: 1px solid red;
|
||||
margin-right: 20rpx;
|
||||
line-height: 27.3rpx;
|
||||
}
|
||||
.grid {
|
||||
margin-top: 75rpx;
|
||||
width: 605.63rpx;
|
||||
height: 228.75rpx;
|
||||
}
|
||||
.grid-item {
|
||||
background-color: #fbdedf;
|
||||
border-radius: 18.75rpx;
|
||||
background-image: url('https://ide.code.fun/api/image?token=67582be6797f850011f1edb7&name=5f9759dd4fc5b6049913f513ad7248f2.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 253.13rpx;
|
||||
}
|
||||
.pos_1 {
|
||||
position: absolute;
|
||||
left: 3.75rpx;
|
||||
top: 0;
|
||||
}
|
||||
.section_4 {
|
||||
background-image: url('https://ide.code.fun/api/image?token=67582be6797f850011f1edb7&name=5f9759dd4fc5b6049913f513ad7248f2.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
height: 90rpx;
|
||||
}
|
||||
.font_5 {
|
||||
font-size: 30rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 20.04rpx;
|
||||
color: #000000;
|
||||
}
|
||||
.text_11 {
|
||||
width: 150rpx;
|
||||
}
|
||||
.pos_3 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 16.99rpx;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.pos_5 {
|
||||
position: absolute;
|
||||
left: 74.53rpx;
|
||||
bottom: 12.06rpx;
|
||||
}
|
||||
.grid-item_2 {
|
||||
background-color: #ffffff;
|
||||
border-radius: 18.75rpx;
|
||||
background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FVQSWQJrq-selectbox.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 253.13rpx;
|
||||
}
|
||||
.pos_14 {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.pos_4 {
|
||||
position: absolute;
|
||||
right: 42.83rpx;
|
||||
top: 20.74rpx;
|
||||
}
|
||||
.pos_6 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 13.93rpx;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.grid-item_3 {
|
||||
padding: 54.62rpx 0 8.31rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 18.75rpx;
|
||||
width: 253.13rpx;
|
||||
}
|
||||
.pos_15 {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 138.75rpx;
|
||||
}
|
||||
.text-wrapper {
|
||||
padding: 22.61rpx 0 47.34rpx;
|
||||
background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FVQSWQJrq-selectbox.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 256.88rpx;
|
||||
}
|
||||
.pos_7 {
|
||||
position: absolute;
|
||||
left: 3.75rpx;
|
||||
right: -7.5rpx;
|
||||
top: 0;
|
||||
}
|
||||
.pos_11 {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 138.75rpx;
|
||||
}
|
||||
.pos_8 {
|
||||
position: absolute;
|
||||
right: 39.67rpx;
|
||||
top: 18.86rpx;
|
||||
}
|
||||
.pos_9 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 8.31rpx;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.group_6 {
|
||||
margin-top: 97.5rpx;
|
||||
padding-bottom: 9.38rpx;
|
||||
border-bottom: solid 1.88rpx #d9d9d9;
|
||||
}
|
||||
.section_5 {
|
||||
margin-left: 22.5rpx;
|
||||
margin-right: 11.27rpx;
|
||||
padding: 12.66rpx 14.42rpx 27.9rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.text_12 {
|
||||
line-height: 28.01rpx;
|
||||
}
|
||||
.group_7 {
|
||||
margin-right: 13.74rpx;
|
||||
}
|
||||
.section_6 {
|
||||
margin: 43.13rpx 46.88rpx 0 41.25rpx;
|
||||
padding: 25.28rpx 6.62rpx 38.19rpx 12.13rpx;
|
||||
background-color: #fff2f2f5;
|
||||
border-radius: 18.75rpx;
|
||||
}
|
||||
.section_7 {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
// border: 1px solid red;
|
||||
margin-left: 7.5rpx;
|
||||
margin-right: 5.63rpx;
|
||||
padding: 16.88rpx 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.section_8 {
|
||||
padding: 26.14rpx 0 25.07rpx;
|
||||
background-color: #fbdedf;
|
||||
border-radius: 46.88rpx;
|
||||
width: 618.75rpx;
|
||||
}
|
||||
.text_13 {
|
||||
margin-left: 240.94rpx;
|
||||
line-height: 27.54rpx;
|
||||
}
|
||||
.text_14 {
|
||||
line-height: 27.54rpx;
|
||||
}
|
||||
@import url(../../../common/css/global.css);
|
||||
</style>
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col justify-start items-center text-wrapper_3" @click="addCart"><text class="font text_8">加入购物车</text></view>
|
||||
<view class="flex-col justify-start items-center text-wrapper_3" @click="selectStatus()"><text class="font text_8">{{ btnText }}</text></view>
|
||||
</view>
|
||||
|
||||
<uni-popup ref="tip" :animation="false" @maskClick="maskClosehandler">
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
<script setup>
|
||||
import tipVue from './tip.vue';
|
||||
import {onMounted, ref} from 'vue'
|
||||
import emitter from '../../../utils/emitter';
|
||||
|
|
@ -94,7 +94,6 @@
|
|||
const cnt = ref(1)
|
||||
const productObject = ref()
|
||||
const appointmentDateVOList = ref([])
|
||||
|
||||
let appointmentDate = ''
|
||||
let timeSlot = ''
|
||||
|
||||
|
|
@ -131,11 +130,17 @@
|
|||
}
|
||||
})
|
||||
|
||||
emitter.on('getBookingNumberMap', (val:any) => { //将map集合传过来
|
||||
emitter.on('getBookingNumberMap', (val) => { //将map集合传过来
|
||||
countMap = val
|
||||
console.log("val==============>", val)
|
||||
appointmentDate = appointmentDateVOList.value[appIdx.value].specificDate;
|
||||
})
|
||||
|
||||
emitter.on('count',(val)=>{
|
||||
nowSelected.value = val
|
||||
console.log('现在选择的是---->',nowSelected.value);
|
||||
statusChange() //更改按钮文字
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -218,7 +223,7 @@
|
|||
}
|
||||
|
||||
|
||||
const isSelected = (index:any) => { //选择预约日期方法
|
||||
const isSelected = (index) => { //选择预约日期方法
|
||||
appIdx.value = index
|
||||
restNumber.value = '请选择时间段'
|
||||
appointmentDate = appointmentDateVOList.value[appIdx.value].specificDate;
|
||||
|
|
@ -243,7 +248,7 @@
|
|||
}
|
||||
|
||||
|
||||
const itemIsSelected = (index:any) => { //选择时间段方法
|
||||
const itemIsSelected = (index) => { //选择时间段方法
|
||||
timeSlot = appointmentDateVOList.value[appIdx.value].timePeriodVOList[index].timeSlot
|
||||
restNumber.value = countMap[appointmentDate + '&' + timeSlot]
|
||||
console.log('timeSlot====================================>', timeSlot)
|
||||
|
|
@ -258,7 +263,39 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
const nowSelected = ref(0) //区别于加入购物车弹窗和立即预约弹窗
|
||||
const btnText = ref('加入购物车')
|
||||
const statusChange = () => {
|
||||
if(nowSelected.value === 2) {
|
||||
btnText.value = '立即预约'
|
||||
} else {
|
||||
btnText.value = '加入购物车'
|
||||
}
|
||||
}
|
||||
const selectStatus = () => {
|
||||
if(btnText.value === '加入购物车') {
|
||||
addCart()
|
||||
} else {
|
||||
goToBook()
|
||||
}
|
||||
}
|
||||
const goToBook =()=> { //去预约方法
|
||||
console.log('日期--->',appointmentDate,'时间段--->',timeSlot,'数量--->',cnt.value,'商品id---->',productObject.value.id);
|
||||
if(appointmentDate === '' || timeSlot === '' ) {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
title: "字段不能为空"
|
||||
})
|
||||
return;
|
||||
}
|
||||
console.log('productObj--->',productObject.value);
|
||||
console.log('数量--->',cnt.value);
|
||||
uni.navigateTo({ //跳转到待支付页面
|
||||
//商品信息+数量
|
||||
url: '/pages/order/singleServiceWait/singleServiceWait?obj=' + JSON.stringify(productObject.value) + '&cnt=' + JSON.stringify(cnt.value) + '&rest=' + JSON.stringify(restNumber.value)
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -48,10 +48,10 @@
|
|||
<text class="text_13 mt-3">客服</text>
|
||||
</view>
|
||||
<view class="flex-row flex-1 self-center ml-26">
|
||||
<view class="flex-col justify-start items-center text-wrapper" @click="loadPop">
|
||||
<view class="flex-col justify-start items-center text-wrapper" @click="loadPopCart">
|
||||
<text class="font_3 text_11">加入购物车</text>
|
||||
</view>
|
||||
<view class="flex-col justify-start items-center text-wrapper_2 ml-31">
|
||||
<view class="flex-col justify-start items-center text-wrapper_2 ml-31" @click="loadPopBook">
|
||||
<text class="font text_12">立即预约</text>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -103,6 +103,7 @@ const getProduct = async () =>{
|
|||
cookie
|
||||
}
|
||||
})
|
||||
console.log('单个服务类商品信息---->',res.data.data);
|
||||
if(res.data.code === 1) {
|
||||
productObject.value = res.data.data
|
||||
} else {
|
||||
|
|
@ -136,10 +137,17 @@ const close =()=> { //关闭弹窗
|
|||
popup.value.close()
|
||||
})
|
||||
}
|
||||
const loadPop =()=> {
|
||||
const loadPopCart =()=> {
|
||||
emitter.emit('getGoodData', productObject.value)
|
||||
emitter.emit('getBookingNumberMap', countMap)
|
||||
popup.value.open('bottom') //从底部弹
|
||||
emitter.emit('count',1) //区别于加入购物车弹窗和立即预约弹窗
|
||||
}
|
||||
const loadPopBook = ()=> {
|
||||
emitter.emit('getGoodData', productObject.value)
|
||||
emitter.emit('getBookingNumberMap', countMap)
|
||||
popup.value.open('bottom') //从底部弹
|
||||
emitter.emit('count',2) //区别于加入购物车弹窗和立即预约弹窗
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user