联系人弹窗修改，购物车防抖
This commit is contained in:
parent
070afad323
commit
81ac7d70ac
|
|
@ -1,5 +1,12 @@
|
|||
{
|
||||
"pages": [
|
||||
{
|
||||
"path" : "pages/order/service-paystatus/service-paystatus",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/book/photoProductsOrder/photoProductsOrder",
|
||||
"style" :
|
||||
|
|
|
|||
|
|
@ -24,20 +24,15 @@
|
|||
<checkbox class="shrink-0 self-center image_3 round red" :value="index" :checked="item.checked" />
|
||||
<view class="flex-row items-end flex-1 self-center ml-22">
|
||||
<image class="shrink-0 image_2" :src="item.cartGoodVO.goodImg.split(';')[0]"
|
||||
@click="jump_product(item.goodId)" />
|
||||
@click="jump_product(item.goodId)" :style="{ pointerEvents: isLoading ? 'none' : 'auto' }"/>
|
||||
<view class="flex-col flex-1 group_2">
|
||||
<view class="flex-row justify-center group_3">
|
||||
<view class="flex-row justify-center group_3" :style="{ pointerEvents: isLoading ? 'none' : 'auto' }">
|
||||
<text class="font_3 text_5" @click="jump_product(item.goodId)">{{ item.cartGoodVO.name }}</text>
|
||||
<text class="font_3" @click="jump_product(item.goodId)">【{{ item.cartGoodVO.type }}】</text>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-center mt-46">
|
||||
<view class="flex-row items-end">
|
||||
<view class="flex-row items-end" :style="{ pointerEvents: isLoading ? 'none' : 'auto' }">
|
||||
<text class="font_4 text_6" @click="jump_product(item.goodId)">￥{{ item.cartGoodVO.price }}</text>
|
||||
<!-- <image
|
||||
class="shrink-0 image_6"
|
||||
src="https://ide.code.fun/api/image?token=6779d8c1797f850011f55ea9&name=babcf6110b7f4238c5be5c44afb0a800.png"
|
||||
/>
|
||||
<text class="font_5 text_7">00</text> -->
|
||||
</view>
|
||||
<!-- 减少数量 -->
|
||||
<image class="image_4"
|
||||
|
|
@ -81,7 +76,8 @@
|
|||
<view class="flex-row ml-83">
|
||||
<image class="image_10"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FVBaGfZxE-short.png"
|
||||
@click="decrease(index , item.checked)" />
|
||||
@click="decrease(index , item.checked)"
|
||||
/>
|
||||
<view class="flex-col justify-start items-center text-wrapper_2 ml-2"><text
|
||||
class="font_6">{{ item.quantity }}</text>
|
||||
</view>
|
||||
|
|
@ -108,11 +104,13 @@
|
|||
<view class="flex-row items-center">
|
||||
<text class="font_2 text_12">合计：{{ totalPrice }}元</text>
|
||||
<view class="flex-col justify-start items-center shrink-0 text-wrapper_3 ml-7">
|
||||
<text class="font_4 text_13" @click="editOrSettle">{{ stateText.bottomBtn }}</text>
|
||||
<text class="font_4 text_13" @click="editOrSettle" :style="{ pointerEvents: isLoading ? 'none' : 'auto' }">{{ stateText.bottomBtn }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 遮罩层 -->
|
||||
<view v-if="isShow" class="overlay"></view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -130,11 +128,13 @@
|
|||
topBtn: '编辑',
|
||||
bottomBtn: '去结算'
|
||||
})
|
||||
const updateArr = ref([]) //商品更新数组(防抖)
|
||||
//服务类商品
|
||||
const serviceProduct = ref([])
|
||||
const errorArr = ref([]) //检验错误的实体类商品id数组
|
||||
onShow(() => {
|
||||
getProductCart() //获取购物车所有商品信息
|
||||
totalPrice.value = 0 //重置
|
||||
})
|
||||
onLoad(() => {
|
||||
getProductCart() //再获取一次
|
||||
|
|
@ -299,8 +299,8 @@
|
|||
}
|
||||
//减少商品(适用于服务类和商品类)
|
||||
const decrease = (index, item) => { //item用于监测是否选中
|
||||
console.log('decrease,index-->', index);
|
||||
console.log('decrease,item-->', item);
|
||||
// console.log('decrease,index-->', index);
|
||||
// console.log('decrease,item-->', item);
|
||||
if (products.value[index].quantity > 1) {
|
||||
products.value[index].quantity -= 1
|
||||
if (item && products.value[index].quantity >= 1 && current.value === 1) {
|
||||
|
|
@ -308,20 +308,28 @@
|
|||
} else if(item && products.value[index].quantity >= 1 && current.value === 2) {
|
||||
computed(-products.value[index].cartExperienceGoodVO.price, 1)
|
||||
}
|
||||
cartFd() //购物车防抖
|
||||
}
|
||||
}
|
||||
//增加商品的方法(适用于服务类和商品类)
|
||||
const increase = (index, item) => { //item用于监测是否选中
|
||||
console.log('increase,index-->', index);
|
||||
console.log('increase,item-->', item);
|
||||
if ( current.value === 1) {
|
||||
if (item && products.value[index].quantity <= products.value[index].cartGoodVO.inventory) {
|
||||
computed(products.value[index].cartGoodVO.price, 1)
|
||||
const increase = (index, item) => { //item用于监测是否选中,obj是商品对象,index是商品数组下标
|
||||
// console.log('increase,index-->', index);
|
||||
// console.log('increase,item-->', item);
|
||||
if ( current.value === 1) { //和减少商品数量情况不一样
|
||||
if (products.value[index].quantity <= products.value[index].cartGoodVO.inventory) {
|
||||
if(item) {
|
||||
computed(products.value[index].cartGoodVO.price, 1)
|
||||
}
|
||||
products.value[index].quantity += 1
|
||||
cartFd() //增加商品的时候启动购物车防抖
|
||||
}
|
||||
} else if (current.value === 2) { //待修改
|
||||
} else if (current.value === 2) {
|
||||
if(products.value[index].quantity < products.value[index].restNumber) {
|
||||
products.value[index].quantity += 1
|
||||
if(item) {
|
||||
computed(products.value[index].cartExperienceGoodVO.price, 1)
|
||||
}
|
||||
cartFd()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -463,9 +471,93 @@
|
|||
}
|
||||
})
|
||||
}
|
||||
//防抖相关变量
|
||||
let debounceTimer = null;
|
||||
let wxPayTimer = null;
|
||||
let loading = false;
|
||||
let isLoading = ref(false)
|
||||
let isShow = ref(false)
|
||||
const cartFd = () => { //购物车防抖
|
||||
clearTimeout(debounceTimer)
|
||||
showLoading()
|
||||
debounceTimer = setTimeout(async () => {
|
||||
await updateCart()
|
||||
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
|
||||
}
|
||||
}
|
||||
const updateCart = async () => { //更新购物车商品信息
|
||||
if(current.value === 1) {
|
||||
// console.log('product--->',products.value);
|
||||
updateArr.value.splice(0,updateArr.value.length)
|
||||
products.value.forEach((item)=> {
|
||||
updateArr.value.push({
|
||||
id: item.id,
|
||||
quantity: item.quantity
|
||||
})
|
||||
})
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/cart/update',
|
||||
method: 'POST',
|
||||
header: {
|
||||
'cookie': wx.getStorageSync('cookie')
|
||||
},
|
||||
data: toRaw(updateArr.value)
|
||||
})
|
||||
if(res.data.code === 1) {
|
||||
console.log('更新成功');
|
||||
}
|
||||
} else if(current.value === 2) {
|
||||
updateArr.value.splice(0,updateArr.value.length)
|
||||
products.value.forEach((item)=> {
|
||||
updateArr.value.push({
|
||||
id: item.id,
|
||||
quantity: item.quantity,
|
||||
reservationDate: item.reservationDate,
|
||||
timeSlot: item.timeSlot
|
||||
})
|
||||
})
|
||||
console.log('防抖数组--->',updateArr.value);
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/cartExperience/update',
|
||||
method: 'POST',
|
||||
header: {
|
||||
'cookie': wx.getStorageSync('cookie')
|
||||
},
|
||||
data: toRaw(updateArr.value)
|
||||
})
|
||||
if(res.data.code === 1) {
|
||||
console.log('更新成功');
|
||||
}
|
||||
}
|
||||
}
|
||||
</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-17 {
|
||||
margin-left: 31.88rpx;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
const popup = ref(null) //弹窗对象
|
||||
onMounted(() => {
|
||||
getContactInfo() //获取联系人信息
|
||||
emitter.on('close',()=>{
|
||||
emitter.on('closeContactPop',()=>{
|
||||
close()
|
||||
})
|
||||
emitter.on('updateInfo',()=>{ //更新联系人信息
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<view class="flex-row justify-between items-center group_2">
|
||||
<checkbox-group @change="defaultAddress">
|
||||
<text class="font_2 text_5" style="margin-right: 400rpx;">设为默认联系人</text>
|
||||
<checkbox class="round red radius" value="1" />
|
||||
<checkbox class="round red radius" value="1" :checked="checked"/>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -33,29 +33,33 @@ const contactParam = ref({
|
|||
phone: "",
|
||||
isDefault: 0
|
||||
})
|
||||
//接受编辑按钮传来的地址信息
|
||||
const checked = ref(false) //是否选中
|
||||
onLoad(()=>{
|
||||
})
|
||||
onShow(()=>{
|
||||
})
|
||||
onMounted(()=>{
|
||||
emitter.on('contactInfo',(val)=>{
|
||||
emitter.on('contactInfo',(val)=>{ //编辑按钮传来的联系人信息
|
||||
console.log('当前编辑的联系人信息',val);
|
||||
if(val != null) {
|
||||
contactParam.value.id = val.id
|
||||
contactParam.value.name = val.name
|
||||
contactParam.value.phone = val.phone
|
||||
contactParam.value.isDefault = val.isDefault
|
||||
val.isDefault ? checked.value = true : checked.value = false
|
||||
}
|
||||
})
|
||||
defaultAddress()
|
||||
})
|
||||
//勾选默认联系人的选项
|
||||
const defaultAddress =(event)=>{
|
||||
event.detail.value[0] ? contactParam.value.isDefault = 1 : contactParam.value.isDefault = 0
|
||||
event.detail.value[0] ? checked.value = true : checked.value = false
|
||||
console.log('event--->',event);
|
||||
}
|
||||
//发送添加新增联系人的请求
|
||||
const newContact = async () =>{
|
||||
console.log('按钮联系人信息--->',contactParam.value);
|
||||
// console.log('按钮联系人信息--->',contactParam.value);
|
||||
if(contactParam.value.id === "")
|
||||
delete contactParam.value.id
|
||||
const values = Object.values(contactParam.value);
|
||||
|
|
@ -67,7 +71,7 @@ const newContact = async () =>{
|
|||
})
|
||||
return;
|
||||
}
|
||||
console.log(contactParam.value);
|
||||
// console.log(contactParam.value);
|
||||
if(contactParam.value.id != undefined) {
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/contacts/update',
|
||||
|
|
@ -77,7 +81,7 @@ const newContact = async () =>{
|
|||
},
|
||||
data: { ...contactParam.value }
|
||||
})
|
||||
console.log('res1==>',res.data);
|
||||
// console.log('res1==>',res.data);
|
||||
sucRes(res.data.code)
|
||||
} else {
|
||||
const res = await uni.request({
|
||||
|
|
@ -92,14 +96,14 @@ const newContact = async () =>{
|
|||
isDefault: contactParam.value.isDefault
|
||||
}
|
||||
})
|
||||
console.log('res2==>',res.data);
|
||||
// console.log('res2==>',res.data);
|
||||
sucRes(res.data.code)
|
||||
}
|
||||
}
|
||||
const sucRes =(res)=>{ //请求成功执行的方法
|
||||
if(res === 1) {
|
||||
emitter.emit('updateInfo')
|
||||
closePop()
|
||||
emitter.emit('updateInfo')
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<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="index === current"></radio>
|
||||
<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>
|
||||
|
|
@ -108,7 +108,6 @@ const closeWindow =()=> {
|
|||
.ml-9 {
|
||||
margin-left: 16.88rpx;
|
||||
}
|
||||
|
||||
.page {
|
||||
padding-top: 18.75rpx;
|
||||
background-color: #f5f5dc;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
:key="index"
|
||||
>
|
||||
<view class="flex-row items-center">
|
||||
<radio color="#E79EA1" :value="index" :checked="index === current"></radio>
|
||||
<radio color="#E79EA1" :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>
|
||||
|
|
@ -36,8 +36,8 @@
|
|||
</view>
|
||||
</radio-group>
|
||||
</view>
|
||||
<view class="flex-col justify-start items-center self-stretch text-wrapper mt-22">
|
||||
<text class="text_2" @click="loadPop()">添加联系人</text>
|
||||
<view class="flex-col justify-start items-center self-stretch text-wrapper mt-22" @click="loadPop()">
|
||||
<text class="text_2">添加联系人</text>
|
||||
</view>
|
||||
</view>
|
||||
<uni-popup ref="popup" background-color="#fff" :mask-click="false">
|
||||
|
|
@ -53,9 +53,11 @@
|
|||
import { onShow, onLoad } from "@dcloudio/uni-app";
|
||||
import emitter from '../../../utils/emitter';
|
||||
import contactPopVue from '../../mine/component/contactPop.vue'; //导入联系人弹窗
|
||||
const ContactArr = ref() //联系人数组
|
||||
const ContactArr = ref([]) //联系人数组
|
||||
const popup = ref(null) //弹窗对象
|
||||
onMounted(() => {
|
||||
const selectedContact = ref() //在订单确认页面已经选择的联系人信息
|
||||
const current = ref(0) //当前数组位置
|
||||
onMounted( async () => {
|
||||
getContactInfo() //获取联系人信息
|
||||
emitter.on('closeContactPop',()=>{
|
||||
closeContactPop()
|
||||
|
|
@ -124,10 +126,9 @@
|
|||
}
|
||||
//选项改变时
|
||||
const radioChange = ( event ) => {
|
||||
console.log('选中---->',event);
|
||||
// console.log('选中---->',event);
|
||||
const index = event.detail.value
|
||||
const temp = ContactArr.value[index]
|
||||
console.log('联系人是---->',ContactArr.value[index]);
|
||||
emitter.emit('contactsNowInfo',temp) //传出联系人信息
|
||||
emitter.emit('close')
|
||||
}
|
||||
|
|
@ -139,7 +140,7 @@
|
|||
}
|
||||
})
|
||||
}
|
||||
const closeWindow =()=> {
|
||||
const closeWindow =()=> { //关闭新增/更新联系人弹窗
|
||||
emitter.emit('close')
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
473
pages/order/service-paystatus/service-paystatus.vue
Normal file
473
pages/order/service-paystatus/service-paystatus.vue
Normal file
|
|
@ -0,0 +1,473 @@
|
|||
<template>
|
||||
<view class="flex-col page">
|
||||
<view class="flex-row items-center section_2">
|
||||
<image
|
||||
class="image"
|
||||
src="https://ide.code.fun/api/image?token=67c001c94ae84d0012277299&name=43f9d33cbaf7205072a2e1cd43931990.png"
|
||||
/>
|
||||
<view class="flex-col items-start flex-1 ml-6">
|
||||
<text class="font text">等待买家付款</text>
|
||||
<text class="text_2 mt-4">请于13分51秒内付款，超时订单将自动关闭</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"
|
||||
/>
|
||||
<text class="text_3 ml-10">张三 15888610253</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">
|
||||
<image
|
||||
class="shrink-0 image_3"
|
||||
src="https://ide.code.fun/api/image?token=67c001c94ae84d0012277299&name=5b1e63a77141ce1c8fc2514061052c99.png"
|
||||
/>
|
||||
<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>
|
||||
</view>
|
||||
<text class="self-start font text_9">已选时间：12月9号星期二</text>
|
||||
<text class="self-start font_3 text_10">10:00-12:00</text>
|
||||
<view class="flex-row items-center self-stretch group_23">
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
<text class="font_6 text_11 text_1">×1</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
|
||||
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>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-center group_9">
|
||||
<text class="font">优惠券</text>
|
||||
<view class="flex-row items-center">
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-end items-center group_10">
|
||||
<view class="flex-row items-center group_11">
|
||||
<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>
|
||||
</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>
|
||||
<text class="font text_22 pos_4">
|
||||
希望所使用的材料是可持续来源的，并且制作工艺要精细，以确保每一朵花瓣都能生动地展现出绒花的质感和美感。
|
||||
</text>
|
||||
</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>
|
||||
</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>
|
||||
</view>
|
||||
<view class="flex-col group_18">
|
||||
<view class="flex-row justify-between items-baseline group_21">
|
||||
<text class="font text_28">退款时间：</text>
|
||||
<text class="font_5 text_29">2024-10-05 11:47:08</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>
|
||||
</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
|
||||
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>
|
||||
</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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const items = [null,null,null,null,null,null]
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ml-3 {
|
||||
margin-left: 5.63rpx;
|
||||
}
|
||||
.mt-17 {
|
||||
margin-top: 31.88rpx;
|
||||
}
|
||||
.mt-5 {
|
||||
margin-top: 9.38rpx;
|
||||
}
|
||||
.mt-3 {
|
||||
margin-top: 5.63rpx;
|
||||
}
|
||||
.page {
|
||||
padding-top: 26.25rpx;
|
||||
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: 16.88rpx;
|
||||
margin-right: 15rpx;
|
||||
padding: 16.88rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 18.75rpx;
|
||||
}
|
||||
.image {
|
||||
width: 75rpx;
|
||||
height: 75rpx;
|
||||
}
|
||||
.font {
|
||||
font-size: 26.25rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 25.54rpx;
|
||||
color: #818181;
|
||||
}
|
||||
.text {
|
||||
color: #323233;
|
||||
font-size: 28.13rpx;
|
||||
line-height: 27.58rpx;
|
||||
}
|
||||
.text_2 {
|
||||
color: #6b6e72;
|
||||
font-size: 22.5rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 22.14rpx;
|
||||
}
|
||||
.section_3 {
|
||||
margin: 26.25rpx 15rpx 0 16.88rpx;
|
||||
padding: 20.63rpx 24.38rpx 24.98rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 18.75rpx;
|
||||
}
|
||||
.image_2 {
|
||||
width: 65.63rpx;
|
||||
height: 67.5rpx;
|
||||
}
|
||||
.text_3 {
|
||||
color: #818181;
|
||||
font-size: 37.5rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 32.38rpx;
|
||||
}
|
||||
.section_4 {
|
||||
margin: 25.65rpx 15rpx 0 16.88rpx;
|
||||
padding: 20.63rpx 22.63rpx 9.79rpx 24.38rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 18.75rpx;
|
||||
}
|
||||
.list-item {
|
||||
padding: 0 11.25rpx;
|
||||
}
|
||||
.list-item:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.group {
|
||||
padding: 0 7.5rpx;
|
||||
}
|
||||
.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-left: 3.83rpx;
|
||||
}
|
||||
.font_2 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 25.54rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.text_8 {
|
||||
line-height: 25.01rpx;
|
||||
}
|
||||
.text_9 {
|
||||
margin-left: 8.01rpx;
|
||||
margin-top: 18.21rpx;
|
||||
line-height: 24.62rpx;
|
||||
}
|
||||
.font_3 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 17.53rpx;
|
||||
color: #818181;
|
||||
}
|
||||
.text_10 {
|
||||
margin-left: 9.21rpx;
|
||||
margin-top: 19.99rpx;
|
||||
}
|
||||
.group_23 {
|
||||
margin-top: 27.58rpx;
|
||||
}
|
||||
.image_4 {
|
||||
width: 35.63rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
.font_4 {
|
||||
font-size: 33.75rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 22.54rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.font_5 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 17.53rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.font_6 {
|
||||
font-size: 30rpx;
|
||||
font-family: Open Sans;
|
||||
line-height: 22.54rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.text_11 {
|
||||
margin-left: 39.99rpx;
|
||||
margin-bottom: 2.66rpx;
|
||||
line-height: 21.41rpx;
|
||||
}
|
||||
.text_1 {
|
||||
margin: 0 7.88rpx 2.66rpx 39.99rpx;
|
||||
}
|
||||
.group_8 {
|
||||
margin-top: 21.71rpx;
|
||||
}
|
||||
.text_16 {
|
||||
line-height: 24.3rpx;
|
||||
}
|
||||
.image_5 {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
.font_7 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: Open Sans;
|
||||
line-height: 17.53rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.text_17 {
|
||||
line-height: 19.41rpx;
|
||||
}
|
||||
.group_9 {
|
||||
margin-top: 13.13rpx;
|
||||
}
|
||||
.image_6 {
|
||||
width: 41.25rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
.text_18 {
|
||||
line-height: 19.41rpx;
|
||||
}
|
||||
.group_10 {
|
||||
margin-top: 16.88rpx;
|
||||
}
|
||||
.group_11 {
|
||||
width: 102.3rpx;
|
||||
}
|
||||
.image_7 {
|
||||
margin-left: 72.3rpx;
|
||||
}
|
||||
.text_19 {
|
||||
margin-left: -102.3rpx;
|
||||
line-height: 24.3rpx;
|
||||
}
|
||||
.text_20 {
|
||||
color: #ffaaa5;
|
||||
line-height: 19.41rpx;
|
||||
}
|
||||
.group_12 {
|
||||
margin-top: 15rpx;
|
||||
padding: 29.19rpx 0 16.88rpx;
|
||||
border-top: solid 1.88rpx #dfdfdf;
|
||||
border-bottom: solid 1.88rpx #dfdfdf;
|
||||
}
|
||||
.text_21 {
|
||||
margin-left: 2.36rpx;
|
||||
line-height: 24.71rpx;
|
||||
}
|
||||
.group_13 {
|
||||
margin-right: 3.62rpx;
|
||||
padding-top: 9.86rpx;
|
||||
}
|
||||
.group_14 {
|
||||
border-radius: 9.38rpx;
|
||||
height: 84.38rpx;
|
||||
border: solid 1.88rpx #ffffff;
|
||||
}
|
||||
.text_22 {
|
||||
line-height: 31.88rpx;
|
||||
text-shadow: 0 1.88rpx #ffffff, 0 -1.88rpx #ffffff, 1.88rpx 0 #ffffff, -1.88rpx 0 #ffffff;
|
||||
text-indent: 54.45rpx;
|
||||
}
|
||||
.pos_4 {
|
||||
position: absolute;
|
||||
left: 12.17rpx;
|
||||
right: 25.33rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.group_15 {
|
||||
margin-top: 15.36rpx;
|
||||
}
|
||||
.text_23 {
|
||||
line-height: 25.84rpx;
|
||||
}
|
||||
.group_16 {
|
||||
margin-right: 3.62rpx;
|
||||
width: 368.34rpx;
|
||||
}
|
||||
.text-wrapper {
|
||||
margin-left: 317.72rpx;
|
||||
padding-bottom: 2.31rpx;
|
||||
background-color: #ffffff;
|
||||
width: 50.63rpx;
|
||||
height: 22.5rpx;
|
||||
border: solid 0.94rpx #d1d1d1;
|
||||
}
|
||||
.text_25 {
|
||||
color: #323232;
|
||||
font-size: 18.75rpx;
|
||||
font-family: Open Sans;
|
||||
line-height: 17.36rpx;
|
||||
}
|
||||
.text_24 {
|
||||
margin-left: -368.34rpx;
|
||||
}
|
||||
.group_17 {
|
||||
margin-top: 10.24rpx;
|
||||
}
|
||||
.text_26 {
|
||||
line-height: 24.71rpx;
|
||||
}
|
||||
.text_27 {
|
||||
margin-right: 132.38rpx;
|
||||
}
|
||||
.group_18 {
|
||||
margin-top: 11.12rpx;
|
||||
}
|
||||
.group_21 {
|
||||
padding: 0 2.38rpx;
|
||||
}
|
||||
.text_28 {
|
||||
line-height: 24.51rpx;
|
||||
}
|
||||
.text_29 {
|
||||
margin-right: 137.49rpx;
|
||||
}
|
||||
.text_30 {
|
||||
line-height: 24.51rpx;
|
||||
}
|
||||
.text_31 {
|
||||
margin-right: 139.88rpx;
|
||||
}
|
||||
.section_5 {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
// margin-top: 131.25rpx;
|
||||
padding: 16.88rpx 15rpx 15rpx 25.31rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.font_8 {
|
||||
font-size: 30rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 27.77rpx;
|
||||
}
|
||||
.text_32 {
|
||||
color: #000000;
|
||||
}
|
||||
.image_8 {
|
||||
width: 33.75rpx;
|
||||
height: 33.75rpx;
|
||||
}
|
||||
.text_33 {
|
||||
color: #ffaaa5;
|
||||
font-size: 37.5rpx;
|
||||
font-family: Open Sans;
|
||||
font-weight: 700;
|
||||
line-height: 27.62rpx;
|
||||
}
|
||||
.text_36 {
|
||||
color: #ffaaa5;
|
||||
font-weight: 700;
|
||||
line-height: 22.05rpx;
|
||||
}
|
||||
.text-wrapper_2 {
|
||||
padding: 17.81rpx 0 20.51rpx;
|
||||
flex: 1 1 204.38rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 75rpx;
|
||||
height: 71.25rpx;
|
||||
border: solid 1.88rpx #e1e1e1;
|
||||
}
|
||||
.text_34 {
|
||||
color: #ffaaa5;
|
||||
line-height: 29.18rpx;
|
||||
}
|
||||
.text-wrapper_3 {
|
||||
padding: 20.63rpx 0 22.86rpx;
|
||||
flex: 1 1 204.38rpx;
|
||||
background-color: #ffaaa5;
|
||||
border-radius: 75rpx;
|
||||
height: 71.25rpx;
|
||||
}
|
||||
.text_35 {
|
||||
color: #ffffff;
|
||||
}
|
||||
@import url(../../../common/css/global.css);
|
||||
</style>
|
||||
|
|
@ -119,7 +119,7 @@
|
|||
<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"><text class="font_8 text_19">微信支付</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">
|
||||
|
|
@ -127,6 +127,8 @@
|
|||
<contactsComponentVue></contactsComponentVue>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<!-- 遮罩层 -->
|
||||
<view v-if="isShow" class="overlay"></view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -136,7 +138,8 @@
|
|||
import { baseUrl } from '../../../api/request';
|
||||
import { stateMap } from '../../../common/global';
|
||||
import { sum } from 'mathjs';
|
||||
import contactsComponentVue from '../component/contactsComponent.vue'; //联系人弹窗
|
||||
import contactsComponentVue from '../component/contactsComponent.vue'; //联系人弹窗\
|
||||
import contactPopVue from '../../mine/component/contactPop.vue'; //新增联系人弹窗
|
||||
//一些暂时变量
|
||||
const sumprice = ref(0) //总价格
|
||||
const popup = ref(null) //弹窗对象
|
||||
|
|
@ -156,7 +159,7 @@
|
|||
emitter.on('close', () => {
|
||||
close()
|
||||
})
|
||||
//获取地址信息
|
||||
//获取联系人信息
|
||||
emitter.on('contactsNowInfo', (val) =>{
|
||||
contactRealInfo.value = val
|
||||
})
|
||||
|
|
@ -169,7 +172,7 @@
|
|||
})
|
||||
onShow(()=>{
|
||||
userInfo.value = wx.getStorageSync('userInfo') //从微信缓存中获取用户信息
|
||||
getDefaultAddress()
|
||||
getDefaultContact()
|
||||
// computed()
|
||||
})
|
||||
//关闭弹窗
|
||||
|
|
@ -185,27 +188,30 @@
|
|||
popup.value.open('bottom')
|
||||
}
|
||||
//获取用户默认联系人
|
||||
// const getDefaultAddress = async () =>{
|
||||
// const res = await uni.request({
|
||||
// url: baseUrl + '/address/list',
|
||||
// method: 'POST',
|
||||
// header: {
|
||||
// cookie: wx.getStorageSync('cookie')
|
||||
// }
|
||||
// })
|
||||
// //根据for循环遍历默认地址
|
||||
// for(let key in res.data.data) {
|
||||
// if(res.data.data[key].isDefault === 1) {
|
||||
// contactRealInfo.value = res.data.data[key]
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
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);
|
||||
console.log('联系人信息-->',contactRealInfo.value);
|
||||
formatArr()
|
||||
console.log('postCartArr--->',postCartArr.value);
|
||||
const resOrder = await uni.request({ //向后端发送生成订单请求
|
||||
url: baseUrl + '/order/add/cart',
|
||||
url: baseUrl + '/order/add/experience/cart',
|
||||
method: 'POST',
|
||||
header: {
|
||||
cookie: wx.getStorageSync('cookie')
|
||||
|
|
@ -213,8 +219,7 @@
|
|||
data: {
|
||||
orderType: productArr.value[0].cartExperienceGoodVO.type === '服务类' ? 'service' : 'product',
|
||||
userName: userInfo.userName,
|
||||
addressId: addressRealInfo.value.id, //地址信息id
|
||||
// contactsId: null, //联系人信息id
|
||||
contactsId: contactRealInfo.value.id, //联系人信息id
|
||||
couponId: null, //优惠卷id
|
||||
note: note.value,
|
||||
cartOrderItemAddRequestList: toRaw(postCartArr.value)
|
||||
|
|
@ -260,16 +265,16 @@
|
|||
}
|
||||
//增加当前商品数量
|
||||
const addNum = (index)=>{
|
||||
if( productArr.value[index].quantity < productArr.value[index].cartExperienceGoodVO.inventory ) { //数量肯定不能大于库存
|
||||
if( productArr.value[index].quantity < productArr.value[index].restNumber ) { //数量肯定不能大于库存
|
||||
productArr.value[index].quantity += 1
|
||||
sumprice.value += productArr.value[index].cartExperienceGoodVO.price * 1 //计算商品价格
|
||||
}
|
||||
}
|
||||
const formatArr = () =>{
|
||||
const formatArr = () =>{ //格式化
|
||||
postCartArr.value.splice(0,postCartArr.value.length)
|
||||
productArr.value.forEach((item,index)=>{
|
||||
postCartArr.value.push({
|
||||
cartRecordId: totalInfo.value[index],
|
||||
cartExperienceId: totalInfo.value[index],
|
||||
quantity: item.quantity
|
||||
})
|
||||
})
|
||||
|
|
@ -299,17 +304,13 @@
|
|||
showCancel: false
|
||||
})
|
||||
uni.redirectTo({
|
||||
url: '/pages/order/product-paysuccess/product-paysuccess?oid=' + JSON.stringify(oid)
|
||||
url: '/pages/order/service-paystatus/service-paystatus?oid=' + JSON.stringify(oid)
|
||||
})
|
||||
console.log('支付成功res--->',res);
|
||||
},
|
||||
fail(e) {
|
||||
// uni.showModal({
|
||||
// content: '支付失败，原因为:' + e.errMsg,
|
||||
// showCancel: false
|
||||
// })
|
||||
uni.redirectTo({
|
||||
url: '/pages/order/product-paysuccess/product-paysuccess?oid=' + JSON.stringify(oid)
|
||||
url: '/pages/order/service-paystatus/service-paystatus?oid=' + JSON.stringify(oid)
|
||||
})
|
||||
console.log('e.errMsg--->',e.errMsg);
|
||||
}
|
||||
|
|
@ -339,9 +340,73 @@
|
|||
}
|
||||
})
|
||||
}
|
||||
//防抖相关变量
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -313,7 +313,7 @@ const textColor = ref('')
|
|||
let isLoading = ref(false)
|
||||
let isShow = ref(false)
|
||||
|
||||
const fd = () => {
|
||||
const fd = () => { //防抖
|
||||
clearTimeout(debounceTimer)
|
||||
showLoading()
|
||||
debounceTimer = setTimeout(async () => {
|
||||
|
|
|
|||
|
|
@ -46,11 +46,11 @@
|
|||
<text class="font_3 mt-9">{{ item.intro }}</text>
|
||||
<text class="font_4 text_5 text_1 mt-9">￥{{ item.price }}</text>
|
||||
</view>
|
||||
<image
|
||||
<!-- <image
|
||||
class="self-start image_5"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FhuDBpAGx-add.png"
|
||||
@click.stop
|
||||
/>
|
||||
/> -->
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user