639 lines
17 KiB
Vue
639 lines
17 KiB
Vue
<!-- 购物车的详细页面 包含服务类和商品类 -->
|
||
<template>
|
||
<view class="flex-col page">
|
||
<view class="flex-col">
|
||
<view class="flex-col justify-start items-end text-wrapper"><text class="font text" @click="changeState">{{ stateText.topBtn }}</text></view>
|
||
<!-- <view class="flex-col justify-start items-end text-wrapper"><text class="font text">完成</text></view> -->
|
||
<view class="flex-col section">
|
||
<view class="flex-row justify-between self-stretch group">
|
||
<text class="font text_2" :style="getTextStyle(1)" @click="changeType(1)">商品类</text>
|
||
<text class="font" :style="getTextStyle(2)" @click="changeType(2)">服务类</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-col list">
|
||
<checkbox-group @change="checkBoxChange">
|
||
<view class="flex-col list-item mt-8" v-for="(item, index) in products" :key="index">
|
||
<!-- 实体类商品 -->
|
||
<view class="flex-row section_1" v-if="current == 1">
|
||
<!-- 多选框 -->
|
||
<checkbox class="shrink-0 self-center image_2" :value="index" :checked="item.checked"/>
|
||
<view class="flex-row flex-1 self-center group_2">
|
||
<image
|
||
class="shrink-0 image"
|
||
:src="item.cartGoodVO.goodImg.split(';')[0]"
|
||
@click="jump_product(item.goodId)"
|
||
/>
|
||
<view class="flex-col flex-1 group_3 ml-12">
|
||
<view class="flex-row group_4">
|
||
<text class="font_2" @click="jump_product(item.goodId)">{{ item.cartGoodVO.name }}</text>
|
||
<text class="font_2 ml-4" @click="jump_product(item.goodId)">【{{ item.cartGoodVO.type }}】</text>
|
||
</view>
|
||
<view class="flex-row items-center mt-47">
|
||
<view class="flex-row items-center self-stretch group_5">
|
||
<text class="font_3 text_3" @click="jump_product(item.goodId)"><text class="font_4">￥</text>{{ item.cartGoodVO.price }}</text>
|
||
<!-- <image
|
||
class="image_6"
|
||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FJipaVPoQ-storeRmb.png"
|
||
/> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 减少数量 -->
|
||
<image
|
||
class="shrink-0 self-start image_3 image_4"
|
||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FosWvYyNx-short1.png"
|
||
@click="decrease(index , item.checked)"
|
||
/>
|
||
<view class="flex-row shrink-0 self-start group_9">
|
||
<view class="flex-col justify-start items-center text-wrapper_2"><text class="font_5 text_4">{{ item.quantity }}</text></view>
|
||
<!-- 添加数量 -->
|
||
<image
|
||
class="image_5 ml-2"
|
||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FGbdSQDul-add1.png"
|
||
@click="increase(index , item.checked)"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<!-- 服务类商品 -->
|
||
<view class="flex-col list-item_2 mt-8" v-if="current == 2">
|
||
<view class="flex-row">
|
||
<image
|
||
class="shrink-0 self-start image_2 image_8"
|
||
src="https://ide.code.fun/api/image?token=672db25dc471750012de4901&name=radio.png"
|
||
/>
|
||
<image
|
||
class="shrink-0 image_7"
|
||
src="https://ide.code.fun/api/image?token=672db25dc471750012de4901&name=service.png"
|
||
/>
|
||
<view class="flex-col flex-1 group_1">
|
||
<text class="font_6">【非遗手工艺体验】纸笺加工技艺-流沙笺团扇制作体验</text>
|
||
<view class="flex-row justify-between items-center section_3 mt-7">
|
||
<view class="flex-col items-start">
|
||
<text class="font_7">仿真丝团扇;上午场(09:30-12:00)</text>
|
||
<text class="font_8 text_5 mt-6">预约日期：2024-10-15</text>
|
||
</view>
|
||
<image
|
||
class="image_9"
|
||
src="https://ide.code.fun/api/image?token=672db25dc471750012de4901&name=pull.png"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex-row justify-end items-center group_7 mt-14">
|
||
<view class="flex-row items-center">
|
||
<text class="font_3 text_6">138.</text>
|
||
<image
|
||
class="shrink-0 image_6"
|
||
src="https://ide.code.fun/api/image?token=672db25dc471750012de4901&name=storeRmb.png"
|
||
/>
|
||
<text class="font_4 text_7">00</text>
|
||
</view>
|
||
<view class="flex-row ml-82">
|
||
<image
|
||
class="image_3"
|
||
src="https://ide.code.fun/api/image?token=672db25dc471750012de4901&name=short1.png"
|
||
/>
|
||
<view class="flex-col justify-start items-center text-wrapper_2 ml-2">
|
||
<text class="font_5 text_8">1</text>
|
||
</view>
|
||
<image
|
||
class="image_5 ml-2"
|
||
src="https://ide.code.fun/api/image?token=672db25dc471750012de4901&name=add1.png"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</checkbox-group>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="flex-row justify-between items-center section_4 mt-569">
|
||
<view class="flex-row items-center">
|
||
<checkbox class="shrink-0 image_2" :checked="allCheck" @tap="allChecked"/>
|
||
<text class="ml-10 font text_10">全选</text>
|
||
</view>
|
||
<view class="flex-row items-center group_3">
|
||
<text class="font">合计：</text>
|
||
<image
|
||
class="shrink-0 image_7 image_9"
|
||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FJipaVPoQ-storeRmb.png"
|
||
/>
|
||
<text class="font text_12">{{ totalPrice }}</text>
|
||
<view class="flex-col justify-start items-center shrink-0 text-wrapper_3" @click="editOrSettle"><text class="text_11">{{ stateText.bottomBtn }}</text></view>
|
||
<!-- <view class="flex-col justify-start items-center shrink-0 text-wrapper_3"><text class="text_11">删除</text></view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref , onMounted , toRaw} from 'vue'
|
||
import { onShow , onLoad } from "@dcloudio/uni-app";
|
||
import { baseUrl , testUrl ,suiUrl} from '../../../api/request';
|
||
import * as math from 'mathjs'
|
||
const products = ref([])
|
||
const current = ref(1) //用于判断是实体类商品还是服务类商品
|
||
const allCheck = ref(false) //全选
|
||
const checkedData = ref([]) //选择的暂存保存数组
|
||
const totalPrice = ref(0)
|
||
// const userInfo = wx.getStorageSync('userInfo')
|
||
const stateText = ref({
|
||
topBtn: '编辑',
|
||
bottomBtn: '去结算'
|
||
})
|
||
onShow(()=>{
|
||
getProductCart() //获取商品类
|
||
})
|
||
onLoad(()=>{
|
||
getProductCart() //再获取一次实体类商品的列表
|
||
})
|
||
//小程序刷新根据用户id获取购物车信息
|
||
const getProductCart = async ()=>{
|
||
const res = await uni.request({
|
||
url: baseUrl + '/cart/list',
|
||
method: 'POST',
|
||
header: {
|
||
'cookie': wx.getStorageSync('cookie')
|
||
}
|
||
})
|
||
// console.log('res--->',res.data);
|
||
if(res.data.code === 1) {
|
||
products.value = res.data.data
|
||
products.value.forEach((item)=>{
|
||
item.checked = false
|
||
})
|
||
}
|
||
console.log('products-->',products.value);
|
||
}
|
||
const deleteProduct = async (idArr) =>{ //删除商品
|
||
const res = await uni.request({
|
||
url: baseUrl + '/cart/delete',
|
||
method: 'POST',
|
||
data: idArr ,
|
||
header: {
|
||
'cookie': wx.getStorageSync('cookie')
|
||
}
|
||
})
|
||
console.log(res.data);
|
||
if(res.data.code === 1) {
|
||
// getProductCart() //重新获取购物车信息
|
||
uni.reLaunch({
|
||
url: '/pages/Shopping-cart/productmain/productmain'
|
||
})
|
||
totalPrice.value = 0
|
||
}
|
||
}
|
||
const getServiceCart =()=>{
|
||
console.log('获取服务类商品方法被触发');
|
||
}
|
||
//更改实体商品和服务类方法
|
||
const changeType = async (num)=>{
|
||
current.value = num;
|
||
if(num ===1 ) { //为一的时候就获取用户商品购物车
|
||
|
||
}
|
||
}
|
||
//更改下划线
|
||
const getTextStyle = (num) => ({
|
||
'border-bottom' : current.value === num ? '2px solid orange' : '2px solid #ffffff'
|
||
});
|
||
//复选框绑定方法
|
||
const checkBoxChange =(event)=>{
|
||
//如果选中的checkbox的value的数组长度和后端传过来的数组长度相等则为全选状态 allCheck为true
|
||
console.log('length---->',event.detail.value.length);
|
||
// console.log('product--->',products.value);
|
||
if(event.detail.value.length == products.value.length) {
|
||
allCheck.value = true
|
||
} else {
|
||
allCheck.value = false
|
||
}
|
||
checkedData.value = [] //每次都要重置一下
|
||
totalPrice.value = 0;
|
||
let count = 0; //用于记录checkedData不为null的个数
|
||
console.log('event--->',event.detail);
|
||
if(event.detail.value.length) {
|
||
products.value[parseInt(event.detail.value)].checked = true; //勾选
|
||
} else {
|
||
products.value.forEach((item)=>{
|
||
item.checked = false
|
||
})
|
||
}
|
||
//计算一下总金额
|
||
for(let key in event.detail.value) {
|
||
let temp = parseInt(event.detail.value[parseInt(key)]) //相当于商品数组下标
|
||
computed(products.value[temp].cartGoodVO.price , products.value[temp].quantity)
|
||
}
|
||
event.detail.value.forEach((item)=>{
|
||
products.value[parseInt(item)].checked = true
|
||
})
|
||
//然后假如checkboxGroup传过来的 detail.value中有某个id则把这些元素的checked属性置为true(选中状态)
|
||
products.value.forEach((x)=>{
|
||
event.detail.value.forEach((y)=>{
|
||
if(x.value == y) {
|
||
x.checked = true
|
||
}
|
||
})
|
||
})
|
||
event.detail.value.forEach((item)=>{ //将选中的商品信息赋值给checkedData
|
||
console.log('products.value[parseInt(item)].goodId',products.value[parseInt(item)].goodId);
|
||
if(products.value[parseInt(item)] !== null) {
|
||
checkedData.value.push(products.value[parseInt(item)].id)
|
||
// console.log(products.value[parseInt(item)].goodId);
|
||
count += 1
|
||
}
|
||
})
|
||
console.log('checkedData--->',checkedData.value);
|
||
//将选中的数组保存在某一个ref中
|
||
// checkedData.value = event.detail.value
|
||
// console.log('checkedData--->',checkedData.value);
|
||
}
|
||
//全选方法
|
||
const allChecked = ()=>{
|
||
allCheck.value = !allCheck.value
|
||
totalPrice.value = 0
|
||
if ( allCheck.value == true ) {
|
||
products.value.forEach((item)=>{
|
||
item.checked = true //将全部选项选上
|
||
computed(item.cartGoodVO.price , item.quantity)
|
||
})
|
||
checkedData.value = products.value.map((item)=>( item.id ))
|
||
console.log('checkedData--->',checkedData.value);
|
||
} else {
|
||
products.value.forEach((item)=>{
|
||
item.checked = false //将全部都取消选择
|
||
})
|
||
}
|
||
}
|
||
//减少商品
|
||
const decrease =(index , 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) {
|
||
computed(-products.value[index].cartGoodVO.price, 1)
|
||
}
|
||
}
|
||
}
|
||
//增加商品的方法
|
||
const increase =(index , item) =>{ //item用于监测是否选中
|
||
console.log('increase,index-->',index);
|
||
console.log('increase,item-->',item);
|
||
if(products.value[index].quantity < products.value[index].cartGoodVO.inventory) {
|
||
if(item && products.value[index].quantity <= products.value[index].cartGoodVO.inventory) {
|
||
computed(products.value[index].cartGoodVO.price, 1)
|
||
}
|
||
products.value[index].quantity += 1
|
||
}
|
||
}
|
||
//计算方法
|
||
const computed =( price , quantity )=>{
|
||
totalPrice.value = math.round(totalPrice.value+price * quantity,2)
|
||
return totalPrice.value
|
||
}
|
||
const jump_product =(gid)=>{
|
||
uni.navigateTo({
|
||
url:'../../../pages/store-home/ProductDetails/ProductDetails?gid=' + JSON.stringify(gid)
|
||
})
|
||
}
|
||
const editOrSettle = async ()=>{ //去结算或者删除状态方法
|
||
// console.log('要传到订单详情页面的checked--->',checkedData.value);
|
||
if(stateText.value.bottomBtn === '去结算') {
|
||
if(checkedData.value.length === 0) { //在没有勾选的时候禁止发请求
|
||
return;
|
||
}
|
||
const res = await uni.request({
|
||
url: baseUrl + '/cart/submit/error',
|
||
method: 'POST',
|
||
header: {
|
||
'cookie': wx.getStorageSync('cookie')
|
||
}
|
||
})
|
||
console.log(res.data);
|
||
if(res.data.data.length != 0) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '购物车商品发生改变，点击移除变化商品',
|
||
showCancel: false,
|
||
success: (e)=>{
|
||
if(e.confirm) {
|
||
deleteProduct(res.data.data)
|
||
}
|
||
}
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: '/pages/order/product-waitpay/product-waitpay?cartInfo=' + JSON.stringify(checkedData.value)
|
||
})
|
||
checkedData.value.splice(0,checkedData.value.length)
|
||
}
|
||
} else {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '是否删除商品?',
|
||
success: (e) => {
|
||
if(e.confirm) {
|
||
deleteProduct(checkedData.value)
|
||
}
|
||
else if(e.cancel)
|
||
return;
|
||
}
|
||
})
|
||
}
|
||
}
|
||
const changeState =()=>{ //修改购物车订单方法
|
||
if(stateText.value.topBtn === '编辑') {
|
||
stateText.value.topBtn = '完成',
|
||
stateText.value.bottomBtn = '删除'
|
||
} else {
|
||
stateText.value.topBtn = '编辑',
|
||
stateText.value.bottomBtn = '去结算'
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.mt-47 {
|
||
margin-top: 88.13rpx;
|
||
}
|
||
.mt-7 {
|
||
margin-top: 13.13rpx;
|
||
}
|
||
.mt-173 {
|
||
margin-top: 324.38rpx;
|
||
}
|
||
.page {
|
||
background-color: #f8e8c1;
|
||
width: 100%;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
height: 100vh;
|
||
}
|
||
.text-wrapper {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
padding: 25.46rpx 0 25.5rpx;
|
||
background-color: #f5f5dc;
|
||
}
|
||
.font {
|
||
font-size: 30rpx;
|
||
font-family: Open Sans;
|
||
line-height: 27.69rpx;
|
||
color: #323232;
|
||
}
|
||
.text {
|
||
margin-right: 30.86rpx;
|
||
line-height: 27.79rpx;
|
||
}
|
||
.section {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 74rpx;
|
||
padding: 0 121.88rpx;
|
||
background-color: #fffef8;
|
||
}
|
||
.group {
|
||
padding: 21.64rpx 4.63rpx 18.17rpx 11.42rpx;
|
||
}
|
||
.text_2 {
|
||
line-height: 27.6rpx;
|
||
}
|
||
.section_2 {
|
||
background-color: #fb8b05;
|
||
width: 112.5rpx;
|
||
height: 5.63rpx;
|
||
}
|
||
.list {
|
||
padding: 155rpx 15rpx 110rpx;
|
||
}
|
||
.list-item:first-child {
|
||
margin-top: 0;
|
||
}
|
||
.section_1 {
|
||
padding: 35.63rpx 20.63rpx 28.13rpx;
|
||
background-color: #fffef8;
|
||
border-radius: 18.75rpx;
|
||
}
|
||
.image_2 {
|
||
width: 37.5rpx;
|
||
height: 37.5rpx;
|
||
}
|
||
.group_2 {
|
||
margin-left: 41.25rpx;
|
||
}
|
||
.image {
|
||
border-radius: 9.38rpx;
|
||
width: 146.25rpx;
|
||
height: 144.38rpx;
|
||
}
|
||
.group_3 {
|
||
margin-top: 2.19rpx;
|
||
}
|
||
.group_4 {
|
||
padding-left: 8.53rpx;
|
||
}
|
||
.font_2 {
|
||
font-size: 26.25rpx;
|
||
font-family: Open Sans;
|
||
line-height: 24.43rpx;
|
||
color: #323232;
|
||
}
|
||
.group_5 {
|
||
width: 90.66rpx;
|
||
}
|
||
.font_3 {
|
||
font-size: 33.75rpx;
|
||
font-family: Open Sans;
|
||
line-height: 24.43rpx;
|
||
font-weight: 600;
|
||
color: #fb8b05;
|
||
}
|
||
.text_3 {
|
||
margin-left: 25.03rpx;
|
||
line-height: 24.88rpx;
|
||
}
|
||
.image_6 {
|
||
margin-left: -90.66rpx;
|
||
width: 30rpx;
|
||
height: 26.25rpx;
|
||
}
|
||
.font_4 {
|
||
font-size: 26.25rpx;
|
||
font-family: Open Sans;
|
||
line-height: 19.29rpx;
|
||
font-weight: 600;
|
||
color: #fb8b05;
|
||
}
|
||
.image_3 {
|
||
border-radius: 9.38rpx 0rpx 0rpx 9.38rpx;
|
||
width: 45rpx;
|
||
height: 45rpx;
|
||
}
|
||
.image_4 {
|
||
margin-left: 18.15rpx;
|
||
margin-top: 106.88rpx;
|
||
}
|
||
.group_9 {
|
||
margin: 106.88rpx 3.77rpx 0 3.75rpx;
|
||
}
|
||
.text-wrapper_2 {
|
||
padding: 12.39rpx 0 13.88rpx;
|
||
background-color: #f5f5dc;
|
||
width: 58.13rpx;
|
||
height: 45rpx;
|
||
}
|
||
.font_5 {
|
||
font-size: 26.25rpx;
|
||
font-family: Open Sans;
|
||
line-height: 19.29rpx;
|
||
color: #323232;
|
||
}
|
||
.text_4 {
|
||
line-height: 18.73rpx;
|
||
}
|
||
.image_5 {
|
||
border-radius: 0rpx 9.38rpx 9.38rpx 0rpx;
|
||
width: 45rpx;
|
||
height: 45rpx;
|
||
}
|
||
.list-item_2 {
|
||
padding: 24.38rpx 18.75rpx 18.75rpx;
|
||
background-color: #fffef8;
|
||
border-radius: 18.75rpx;
|
||
}
|
||
.image_8 {
|
||
margin-top: 108.75rpx;
|
||
}
|
||
.image_7 {
|
||
margin-left: 39.38rpx;
|
||
width: 121.88rpx;
|
||
height: 172.5rpx;
|
||
}
|
||
.group_1 {
|
||
margin: 3.07rpx 17.76rpx 7.5rpx 22.5rpx;
|
||
}
|
||
.font_6 {
|
||
font-size: 26.25rpx;
|
||
font-family: Open Sans;
|
||
line-height: 31.88rpx;
|
||
color: #323233;
|
||
}
|
||
.section_3 {
|
||
margin-right: 4.74rpx;
|
||
padding: 12.94rpx 9.83rpx 13.09rpx;
|
||
background-color: #f5f5dc;
|
||
border-radius: 9.38rpx;
|
||
}
|
||
.font_7 {
|
||
font-size: 22.5rpx;
|
||
font-family: Open Sans;
|
||
line-height: 22.5rpx;
|
||
color: #6b6e72;
|
||
}
|
||
.font_8 {
|
||
font-size: 22.5rpx;
|
||
font-family: Open Sans;
|
||
line-height: 19.29rpx;
|
||
color: #6b6e72;
|
||
}
|
||
.text_5 {
|
||
line-height: 20.79rpx;
|
||
}
|
||
.image_9 {
|
||
margin-right: 5.17rpx;
|
||
width: 22.5rpx;
|
||
height: 22.5rpx;
|
||
}
|
||
.group_7 {
|
||
padding: 0 22.5rpx;
|
||
}
|
||
.text_6 {
|
||
margin-left: 25.03rpx;
|
||
line-height: 24.88rpx;
|
||
}
|
||
.text_7 {
|
||
margin-left: 61.14rpx;
|
||
}
|
||
.text_8 {
|
||
line-height: 18.73rpx;
|
||
}
|
||
.section_4 {
|
||
position: fixed;
|
||
right: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
padding: 18.75rpx 18.75rpx 16.88rpx;
|
||
background-color: #fffef8;
|
||
}
|
||
.text_9 {
|
||
line-height: 27.64rpx;
|
||
}
|
||
.text-wrapper_3 {
|
||
margin-right: 3.77rpx;
|
||
padding: 22.37rpx 0 23.53rpx;
|
||
background-color: #ffd45a;
|
||
border-radius: 75rpx;
|
||
width: 219.38rpx;
|
||
height: 76.88rpx;
|
||
}
|
||
.text_10 {
|
||
color: #ffffff;
|
||
font-size: 33.75rpx;
|
||
font-family: Open Sans;
|
||
line-height: 30.97rpx;
|
||
}
|
||
.mt-569 {
|
||
margin-top: 1066.88rpx;
|
||
}
|
||
.image_2 {
|
||
width: 37.5rpx;
|
||
height: 37.5rpx;
|
||
}
|
||
.image_7 {
|
||
width: 30rpx;
|
||
height: 26.25rpx;
|
||
}
|
||
.section_4 {
|
||
padding: 18.75rpx;
|
||
background-color: #fffef8;
|
||
}
|
||
.font {
|
||
font-size: 30rpx;
|
||
font-family: Open Sans;
|
||
line-height: 27.54rpx;
|
||
color: #323232;
|
||
}
|
||
.text_10 {
|
||
line-height: 27.64rpx;
|
||
}
|
||
.group_3 {
|
||
margin-right: 3.75rpx;
|
||
}
|
||
.image_9 {
|
||
margin-left: -11.25rpx;
|
||
}
|
||
.text_12 {
|
||
color: #fb8b05;
|
||
line-height: 22.01rpx;
|
||
}
|
||
.text-wrapper_3 {
|
||
margin-left: 22.5rpx;
|
||
padding: 22.5rpx 0;
|
||
background-color: #ffd45a;
|
||
border-radius: 75rpx;
|
||
width: 219.38rpx;
|
||
height: 76.88rpx;
|
||
}
|
||
.text_11 {
|
||
color: #ffffff;
|
||
font-size: 33.75rpx;
|
||
font-family: Open Sans;
|
||
line-height: 31.48rpx;
|
||
}
|
||
@import url(../../../common/css/global.css);
|
||
</style> |