kuangjunhua/TakeOutShop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

多规格弹框组件添加

Browse Source
This commit is contained in:
邝军华 2025-04-13 20:39:43 +08:00
parent 45837db187
commit fb537b8bcd
10 changed files with 312 additions and 451 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

214
components/multi/multi.vue
View File

@ -1,32 +1,22 @@
<template>
<!-- 多规格组件弹框 -->
<!-- 多规格组件弹框 -->
<uni-popup ref="multiPopup" type="bottom" @change="changeMulti">
<view class="multiPopup">
<view class="shop_open_close" @click="OpenCoupon()">
<view class="shop_open_close" @click="OpenMulti()">
<image src="../../static/order/close.png" mode="widthFix"></image>
</view>
<view class="multishop">
<image class="multishop_img" src="http://mnse8q.natappfree.cc/crmebimage/public/content/2025/03/06/8b55b251f89942fbaac25f72143be0e15jg9vmswjy.png" mode="widthFix"></image>
<image class="multishop_img" :src="imageUrls" mode="widthFix"></image>
<view class="multishop_text">
<view class="multishop_title"><text>蔡长青烟熏鸡肉沙拉（调味沙拉）210g</text></view>
<view class="multishop_price">14.90<text class="multishop_name">5.00</text></view>
<view class="multishop_title"><text>{{titles}}</text></view>
<view class="multishop_price">{{prices}}<text class="multishop_name">{{otPrices}}</text></view>
<view class="multishop_spec">已选:<text :class="!specValue?'specValue':''">{{specValue||'请选择规格'}}</text></view>
</view>
</view>
<view class="multishop_list">
<view class="multishop_list_title">颜色</view>
<view class="multishop_list" v-for="(item,index) in productAttr" :key="index">
<view class="multishop_list_title">{{item.attrName}}</view>
<view class="multishop_list_item">
<view class="multishop_list_name multishop_list_arver">沙漠色</view>
<view class="multishop_list_name">黑色</view>
<view class="multishop_list_name">原色</view>
<view class="multishop_list_name">白色</view>
</view>
</view>
<view class="multishop_list">
<view class="multishop_list_title">容量</view>
<view class="multishop_list_item">
<view class="multishop_list_name multishop_list_arver">256GB</view>
<view class="multishop_list_name">512GB</view>
<view class="multishop_list_name">1TB</view>
<view v-for="(v,i) in item.attrValueList" :key="i" class="multishop_list_name" :class="selectedSpecs[item.attrName] === v?'multishop_list_arver':''" @click="choose(item.attrName,v)">{{v}}</view>
</view>
</view>
<view style="height: 200rpx;"></view>
@ -34,16 +24,16 @@
<view class="multishop_amount">
<view class="multishop_name_amount">选数量</view>
<view class="multishop_data_edit">
<view class="multishop_data_edit_img border_l" @click="editAmount(1,item)">
<image class="multishop_data_edit_imgurl" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
<view class="multishop_data_edit_img border_l" @click="editAmount(1)">
<image class="multishop_data_edit_imgurl" :class="amount == 1 ?'opy':''" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
</view>
<view class="multishop_data_number">22</view>
<view class="multishop_data_edit_img border_r" @click="editAmount(2,item)">
<view class="multishop_data_number">{{amount}}</view>
<view class="multishop_data_edit_img border_r" @click="editAmount(2)">
<image class="multishop_data_edit_imgurl" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
</view>
</view>
</view>
<view class="footer_multi_btn">确定</view>
<view class="footer_multi_btn" @click="specConfirm">确定</view>
</view>
</view>
</uni-popup>
@ -51,15 +41,165 @@
<script setup>
import { loads } from '@/utils/index.js'
import { frontproduct } from '@/server/api';
import { computed,ref,onMounted,defineEmits } from 'vue';
import { frontproduct,skudetail,cartsave,frontcartcount } from '@/server/api';
import { computed,ref,onMounted,defineEmits,watch } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
import { skudetail,cartsave } from '@/server/api.js'
const counterStore = useCounterStore(); // 使用 Store
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const { token } = storeToRefs(counterStore);
const { token,cartcount } = storeToRefs(counterStore);
const multiPopup = ref(null);
const multiShow = ref(false);
const show = ref(false);
const emit = defineEmits(['add-success', 'add-error']);
const productAttr = ref([]);
const productValue = ref([]);
const titles = ref("");
const prices = ref("");
const otPrices = ref("");
const imageUrls = ref("");
const amount = ref(1);
// 当前选中的规格
const selectedSpecs = ref("")
const specValue = ref("");
// 当前匹配的SKU
const currentSku = ref({})
const changeMulti = (e)=>{
multiShow.value = e.show;
show.value = e.show;
}
const OpenMulti =() =>{
multiShow.value ? multiPopup.value.close():multiPopup.value.open()
}
const props = defineProps({
shopitem:{
type:Object,
default:{}
}
})
//加购物车
const addCart=(i,type)=>{
const { jumpIds,productInfo,specType,id,image,storeName,price,otPrice } = i;
let specTypes = false;
let ids = ""
if(type){
imageUrls.value = image;
titles.value = storeName;
prices.value = price;
otPrices.value = otPrice;
specTypes = specType;
}else{
specTypes = productInfo.specType;
}
if(jumpIds){
ids = jumpIds;
}else{
ids = id;
}
api_skudetail(specTypes,ids);
}
// 暴露方法给父组件
defineExpose({
addCart
})
//购物车数量
const api_frontcartcount=()=>{
frontcartcount().then(({data}) => {cartcount.value = data.count;})
}
//购物车规格详情接口 specTypes 多规格true、单规格false
const api_skudetail=(specTypes,ids)=>{
loads('', true)
return skudetail(ids).then(({data}) => {
if(specTypes){
uni.hideLoading()
amount.value = 1;
productAttr.value = data.productAttr;
productValue.value = Object.values(data.productValue);
multiPopup.value.open();
}else{
const { productId,id } = data.productValue.默认;
api_cartsave(productId,id);
}
})
.catch(({message}) => {
uni.hideLoading()
uni.showModal({
content:message,
showCancel: false
})
})
}
//选择多规格
const choose = (name,value)=>{
selectedSpecs.value = {
...selectedSpecs.value,
[name]: value
}
const valuesArray = Object.values(selectedSpecs.value).toString();
specValue.value = valuesArray;
productValue.value.forEach(item=>{
if(valuesArray == item.suk){
if(item.image){
imageUrls.value = item.image
}
if(item.price){
prices.value = item.price
}
currentSku.value = item
}
})
}
const specConfirm = ()=>{
if(productAttr.value.length !== Object.values(selectedSpecs.value).length){
uni.showToast({
title:'请选择规格',
icon:'none'
})
return false
}
api_cartsave(currentSku.value.productId,currentSku.value.id);
}
const api_cartsave = (productId,productAttrUnique) =>{
const params = {
cartNum:amount.value,
productId,
productAttrUnique
}
return cartsave(params).then(({message})=>{
uni.hideLoading()
uni.showToast({
title:'添加购物车成功',
icon:'none',
success: () => {
emit('add-success', message)
api_frontcartcount();
if(multiShow.value){
multiPopup.value.close()
}
}
})
})
.catch(({message}) => {
emit('add-error', message)
uni.hideLoading()
uni.showModal({
content:message,
showCancel: false
})
})
}
const editAmount = (type) =>{
if(type == 1){
if(amount.value == 1) return false;
amount.value = amount.value - 1;
}else{
amount.value = amount.value + 1;
}
}
//生命周期钩子
onMounted(() => {});
</script>
<style lang="scss">
@ -101,7 +241,7 @@
color: #333;
font-weight: 500;
margin-top: 5rpx;
min-height: 115rpx;
min-height: 75rpx;
}
.multishop_title text{
overflow: hidden;
@ -127,6 +267,17 @@
margin-right: 5rpx;
}
}
.multishop_spec{
color: #333333;
font-size: 26rpx;
margin-top: 15rpx;
}
.multishop_spec text{
margin-left: 10rpx;
}
.specValue{
color: #999;
}
.multishop_price::before{
content: "¥";
font-size: 24rpx;
@ -174,6 +325,7 @@
background-color: #FFFFFF;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
padding-bottom: 20rpx;
.multishop_amount{
display: flex;
align-items: center;
@ -239,4 +391,8 @@
border-radius: 50rpx;
}
}
}
.opy{
opacity: 0.3;
}
</style>

64
components/recomGoods/recomGoods.vue
View File

@ -85,7 +85,7 @@
<script setup>
import { loads } from '@/utils/index.js'
import { frontproduct } from '@/server/api';
import { computed,ref,onMounted,defineEmits } from 'vue';
import { computed,ref,onMounted,defineEmits,watch} from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
@ -99,7 +99,7 @@
const pages = ref(0);
const limits = ref(10);
// 1. 定义可触发的事件名
const emit = defineEmits(['updatecart']);
const emit = defineEmits(['add-message']);
const props = defineProps({
apiType:{
type:Number,
@ -149,67 +149,9 @@
}
}
}
//加购物车
const addCart=(i,type)=>{
const { jumpIds,productInfo,specType,id } = i;
let specTypes = false;
if(type){
specTypes = specType;
}else{
specTypes = productInfo.specType;
}
api_skudetail(specTypes,id);
}
//购物车规格详情接口 specTypes 多规格true、单规格false
const api_skudetail=(specTypes,id)=>{
loads('', true)
return skudetail(id).then(({data}) => {
if(specTypes){
uni.hideLoading()
}else{
const { id,productId } = data.productValue.默认;
api_cartsave(productId,id);
}
})
.catch(({message}) => {
uni.hideLoading()
uni.showModal({
content:message,
showCancel: false
})
})
}
const api_cartsave = (productId,productAttrUnique) =>{
const params = {
cartNum:1,
productId,
productAttrUnique
}
return cartsave(params).then(({message})=>{
uni.hideLoading()
uni.showToast({
title:'添加购物车成功',
icon:'none'
})
emit('updatecart',true);
})
.catch(({message}) => {
uni.hideLoading()
uni.showModal({
content:message,
showCancel: false
})
})
emit('add-message',i,type)
}
//生命周期钩子
onMounted(() => {

34
pages/cart/cart.vue
View File

@ -122,7 +122,7 @@
</view>
</view>
<template>
<recomGoods v-if="iscartListLoaded" :apiType="5" @updatecart="cartType"></recomGoods>
<recomGoods v-if="iscartListLoaded" :apiType="5" @add-message="addCart"></recomGoods>
</template>
<view style="height: 200rpx;"></view>
<view class="footer" v-if="cartList.length">
@ -193,6 +193,12 @@
</uni-popup>
<!-- 获取定位失败小组件提示 -->
<locationOpen></locationOpen>
<multi
ref="shopData"
@add-success="handleAddSuccess"
@add-error="handleAddError"
></multi>
</view>
</template>
@ -200,6 +206,7 @@
import NP from 'number-precision';
import { loads } from '@/utils/index.js'
import recomGoods from '@/components/recomGoods/recomGoods.vue';
import multi from '@/components/multi/multi.vue'
import { ref,computed } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值
@ -228,6 +235,7 @@ const options = ref([
}
}
]);
const shopData = ref({});
const OpenCoupon =() =>{
couponShow.value ? couponPopup.value.close():couponPopup.value.open()
};
@ -246,7 +254,23 @@ const goDetail= ()=>{
url:`/shopProDetail/detail/detail`
})
}
//加购物车
const addCart=(i,type)=>{
shopData.value.addCart(i,type);
}
// 加入购物车成功回调
const handleAddSuccess = (data) => {
console.log('加入购物车成功回调:', data)
setTimeout(()=>{
api_cartlist(true);
},1000)
// 可以在这里更新购物车徽章数量等
}
// 加入购物车失败回调
const handleAddError = (error) => {
console.error('加入购物车失败回调:', error)
}
//购物车有效商品
const api_cartlist = (e) =>{
if(e){
@ -255,16 +279,12 @@ const api_cartlist = (e) =>{
// cartpages.value = 0;
iscartShow.value = false;
}
cartdecs.value = "—— 加载中... ——";
// cartpages.value = cartpages.value + 1;
loads('', true)
const params = {isValid:"1",page:'1',limit:'100'}
return cartlist(params).then(({data})=>{
uni.hideLoading()
cartdecs.value = '—— 上拉加载更多 ——'
if(data.list.length < 10){
cartdecs.value = '—— 嗷呜，已经到底啦 ——';
}
//更改全选状态
const allSelected = data.list.every(item => item.isSelect === 1);
if(allSelected){

72
pages/classify/classify.vue
View File

@ -129,11 +129,17 @@
</view>
</view>
<view class="bcg_popup" v-if="show" @click="openCategory()"></view>
<multi
ref="shopData"
@add-success="handleAddSuccess"
@add-error="handleAddError"
></multi>
</view>
</template>
<script setup>
import { loads } from '@/utils/index.js'
import multi from '@/components/multi/multi.vue'
import { computed,ref } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值
@ -155,6 +161,7 @@ const windowWidth = ref(0);
const navPopup = ref(null);
const navShow = ref(false);
const show = ref(false);
const shopData = ref({});
const openCategory = ()=>{
show.value = !show.value
}
@ -235,58 +242,19 @@ const api_frontproducts = (e,i) => {
}
}
}
//加购物车
const addCart=(i,type)=>{
const { jumpIds,productInfo,specType,id } = i;
let specTypes = false;
if(type){
specTypes = specType;
}else{
specTypes = productInfo.specType;
}
api_skudetail(specTypes,id);
}
//购物车规格详情接口 specTypes 多规格true、单规格false
const api_skudetail=(specTypes,id)=>{
loads('', true)
return skudetail(id).then(({data}) => {
if(specTypes){
}else{
const { id,productId } = data.productValue.默认;
api_cartsave(productId,id);
}
})
.catch(({message}) => {
uni.hideLoading()
uni.showModal({
content:message,
showCancel: false
})
})
}
const api_cartsave = (productId,productAttrUnique) =>{
const params = {
cartNum:1,
productId,
productAttrUnique
}
return cartsave(params).then(({message})=>{
uni.hideLoading()
uni.showToast({
title:'添加购物车成功',
icon:'none'
})
})
.catch(({message}) => {
uni.hideLoading()
uni.showModal({
content:message,
showCancel: false
})
})
}
//加购物车
const addCart=(i,type)=>{
shopData.value.addCart(i,type);
}
// 加入购物车成功回调
const handleAddSuccess = (data) => {
console.log('加入购物车成功回调:', data)
//可以在这里更新购物车徽章数量等
}
// 加入购物车失败回调
const handleAddError = (error) => {
console.error('加入购物车失败回调:', error)
}
// 获取页面宽度
const updatePageWidth = () => {
const systemInfo = uni.getSystemInfoSync();

114
pages/index/index.vue
View File

@ -66,7 +66,7 @@
</scroll-view>
</view>
<!-- 商品区域 -->
<recomGoods v-if="ishomeListLoaded" :apiType="1"></recomGoods>
<recomGoods v-if="ishomeListLoaded" :apiType="1" @add-message="addCart"></recomGoods>
<view style="height: 200rpx;"></view>
<!-- <view class="footer">
<view class="footer_cont">
@ -85,55 +85,11 @@
</view> -->
<!-- 获取定位失败小组件提示 -->
<locationOpen></locationOpen>
<!-- 多规格组件弹框 -->
<uni-popup ref="multiPopup" type="bottom" @change="changeMulti">
<view class="multiPopup">
<view class="shop_open_close" @click="OpenCoupon()">
<image src="../../static/order/close.png" mode="widthFix"></image>
</view>
<view class="multishop">
<image class="multishop_img" src="http://mnse8q.natappfree.cc/crmebimage/public/content/2025/03/06/8b55b251f89942fbaac25f72143be0e15jg9vmswjy.png" mode="widthFix"></image>
<view class="multishop_text">
<view class="multishop_title"><text>蔡长青烟熏鸡肉沙拉（调味沙拉）210g</text></view>
<view class="multishop_price">14.90<text class="multishop_name">5.00</text></view>
</view>
</view>
<view class="multishop_list">
<view class="multishop_list_title">颜色</view>
<view class="multishop_list_item">
<view class="multishop_list_name multishop_list_arver">沙漠色</view>
<view class="multishop_list_name">黑色</view>
<view class="multishop_list_name">原色</view>
<view class="multishop_list_name">白色</view>
</view>
</view>
<view class="multishop_list">
<view class="multishop_list_title">容量</view>
<view class="multishop_list_item">
<view class="multishop_list_name multishop_list_arver">256GB</view>
<view class="multishop_list_name">512GB</view>
<view class="multishop_list_name">1TB</view>
</view>
</view>
<view style="height: 200rpx;"></view>
<view class="footer_multi">
<view class="multishop_amount">
<view class="multishop_name_amount">选数量</view>
<view class="multishop_data_edit">
<view class="multishop_data_edit_img border_l" @click="editAmount(1,item)">
<image class="multishop_data_edit_imgurl" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
</view>
<view class="multishop_data_number">22</view>
<view class="multishop_data_edit_img border_r" @click="editAmount(2,item)">
<image class="multishop_data_edit_imgurl" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
</view>
</view>
</view>
<view class="footer_multi_btn">确定</view>
</view>
</view>
</uni-popup>
<multi
ref="shopData"
@add-success="handleAddSuccess"
@add-error="handleAddError"
></multi>
</view>
</template>
@ -141,6 +97,7 @@
import { loads } from '@/utils/index.js'
import { frontindex,frontproduct,frontstorelist,skudetail,cartsave } from '@/server/api';
import recomGoods from '@/components/recomGoods/recomGoods.vue';
import multi from '@/components/multi/multi.vue'
import locationOpen from '@/components/locationOpen/locationOpen.vue'
import { computed,ref } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
@ -150,13 +107,13 @@ const counterStore = useCounterStore(); // 使用 Store
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,nikeName,key,token,phone,uid,storeName,storeId,latitude,longitude,locationName,locationShow } = storeToRefs(counterStore);
const homeList = ref([]);
const multiPopup = ref(null);
const shopList = ref([]);
const total = ref(0);
const pages = ref(0);
const limits = ref(10);
const decs = ref('');
const ishomeListLoaded = ref(false);
const shopData = ref({});
//首页楼层接口
const api_index=()=>{
ishomeListLoaded.value = false;
@ -165,7 +122,6 @@ const api_index=()=>{
uni.hideLoading();
homeList.value = data.homeList;
ishomeListLoaded.value = true;
multiPopup.value.open();
})
.catch(({message}) => {
uni.hideLoading();
@ -193,54 +149,16 @@ const JumpType=(item)=>{
}
//加购物车
const addCart=(i,type)=>{
const { jumpIds,productInfo,specType } = i;
let specTypes = false;
if(type){
specTypes = specType;
}else{
specTypes = productInfo.specType;
}
api_skudetail(specTypes,jumpIds);
shopData.value.addCart(i,type);
}
//购物车规格详情接口 specTypes 多规格true、单规格false
const api_skudetail=(specTypes,jumpIds)=>{
loads('', true)
return skudetail(jumpIds).then(({data}) => {
if(specTypes){
}else{
const { id,productId } = data.productValue.默认;
api_cartsave(productId,id);
}
})
.catch(({message}) => {
uni.hideLoading()
uni.showModal({
content:message,
showCancel: false
})
})
// 加入购物车成功回调
const handleAddSuccess = (data) => {
console.log('加入购物车成功回调:', data)
// 可以在这里更新购物车徽章数量等
}
const api_cartsave = (productId,productAttrUnique) =>{
const params = {
cartNum:1,
productId,
productAttrUnique
}
return cartsave(params).then(({message})=>{
uni.hideLoading()
uni.showToast({
title:'添加购物车成功',
icon:'none'
})
})
.catch(({message}) => {
uni.hideLoading()
uni.showModal({
content:message,
showCancel: false
})
})
// 加入购物车失败回调
const handleAddError = (error) => {
console.error('加入购物车失败回调:', error)
}
const orderConfirm=()=>{
uni.navigateTo({

181
pages/index/style.scss
View File

@ -441,184 +441,3 @@ page{
// 结束
//多规格
.multiPopup{
background-color: #FFFFFF;
border-top-left-radius: 25rpx;
border-top-right-radius: 25rpx;
max-height: 800rpx;
overflow-y: auto;
position: relative;
.shop_open_close{
width: 80rpx;
height: 80rpx;
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
}
.shop_open_close image{
width: 45rpx;
height: 45rpx;
}
.multishop{
display: flex;
padding: 25rpx 25rpx 0rpx 25rpx;
.multishop_img{
width: 180rpx;
height: 180rpx;
border-radius: 10rpx;
}
.multishop_text{
width: 460rpx;
margin-left: 20rpx;
.multishop_title{
font-size: 28rpx;
color: #333;
font-weight: 500;
margin-top: 5rpx;
min-height: 115rpx;
}
.multishop_title text{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.multishop_price{
font-size: 32rpx;
color: #FD3F3F;
font-weight: 500;
.multishop_name{
color: #999;
font-size: 23rpx;
text-decoration: line-through;
margin-left: 5rpx;
font-weight: 400;
}
.multishop_name::before{
content: "¥";
font-size: 20rpx;
margin-right: 5rpx;
}
}
.multishop_price::before{
content: "¥";
font-size: 24rpx;
margin-right: 5rpx;
}
}
}
.multishop_list{
padding: 25rpx 25rpx 0rpx 25rpx;
.multishop_list_title{
font-size: 28rpx;
color: #333;
font-weight: 500;
margin-bottom: 25rpx;
}
.multishop_list_item{
display: flex;
flex-wrap: wrap;
.multishop_list_name{
padding: 12rpx 35rpx 12rpx 35rpx;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #333333;
background-color: #f6f6f6;
margin-right: 25rpx;
margin-bottom: 25rpx;
border:1px solid #f6f6f6;
}
.multishop_list_arver{
background-color: #FFD7D7;
border:1px solid #fd3f3f;
color: #fd3f3f;
}
}
}
.footer_multi{
position: fixed;
bottom: 0rpx;
width: 100%;
background-color: #FFFFFF;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
.multishop_amount{
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 25rpx;
padding-right: 25rpx;
margin-top: 15rpx;
margin-bottom: 40rpx;
.multishop_name_amount{
font-size: 28rpx;
color: #333;
font-weight: 500;
}
.multishop_data_edit{
display: flex;
align-items: center;
justify-content: center;
.multishop_data_edit_img{
width: 55rpx;
height: 50rpx;
display: flex;
align-items: center;
justify-content: center;
border-top: 1px solid #E9E9E9;
border-bottom: 1px solid #E9E9E9;
.multishop_data_edit_imgurl{
width: 25rpx;
height: 25rpx;
display: block;
}
}
.border_l{
border-left: 1px solid #E9E9E9;
border-top-left-radius: 50rpx;
border-bottom-left-radius: 50rpx;
}
.border_r{
border-right: 1px solid #E9E9E9;
border-top-right-radius: 50rpx;
border-bottom-right-radius: 50rpx;
}
}
.multishop_data_number{
width: 60rpx;
height: 50rpx;
font-size: 28rpx;
color: #333;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #E9E9E9;
}
}
.footer_multi_btn{
margin: 0 28rpx 0 28rpx;
height:84rpx;
background-color: #FD3F3F;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
color: #FFFFFF;
border-radius: 50rpx;
}
}
}

31
pages/sidedish/sidedish.vue
View File

@ -31,8 +31,6 @@
</view>
<view class="content_shop">
<scroll-view class="content_shop_ul" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" scroll-x="true">
<view class="content_shop_item" v-for="(item,index) in list.items" :key="index" @click="JumpType(item)">
<view class="content_shop_item_img">
<!-- <view class="content_shop_item_tag"></view> -->
@ -46,7 +44,7 @@
<view class="content_shop_item_price price">{{item.productInfo.price}}</view>
<view class="content_shop_market prices">{{item.productInfo.otPrice}}</view>
</view>
<view class="content_shop_item_cart" @click.stop="addCart(item)">
<view class="content_shop_item_cart" @click.stop="addCart(item,1)">
<image class="content_shop_item_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
</view>
</view>
@ -57,12 +55,17 @@
<view class="load_desc">{{decs}}</view>
</view>
</view>
<multi
ref="shopData"
@add-success="handleAddSuccess"
@add-error="handleAddError"
></multi>
</view>
</template>
<script setup>
import { loads } from '@/utils/index.js'
import multi from '@/components/multi/multi.vue'
import { computed,ref } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值
@ -80,6 +83,7 @@ const load = ref(true);
const scrollLefter = ref(0);
const windowWidth = ref(0);
const wishesImage = ref('')
const shopData = ref({});
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const { storeId } = storeToRefs(counterStore);
const api_index=()=>{
@ -168,14 +172,17 @@ const JumpType=(item,type)=>{
}
}
//加购物车
const addCart=(i)=>{
const { jumpIds,productInfo,specType } = i;
const specTypes = productInfo.specType;
if(specTypes){
console.log('多规格弹窗选类加购');
}else{
console.log('单规格直接加购')
}
const addCart=(i,type)=>{
shopData.value.addCart(i,type);
}
// 加入购物车成功回调
const handleAddSuccess = (data) => {
console.log('加入购物车成功回调:', data)
//可以在这里更新购物车徽章数量等
}
// 加入购物车失败回调
const handleAddError = (error) => {
console.error('加入购物车失败回调:', error)
}
// 获取页面宽度
const updatePageWidth = () => {

29
pages/user/user.vue
View File

@ -48,13 +48,19 @@
<view class="user_cont_li_name">{{item.name}}</view>
</view>
</view>
<recomGoods v-if="token" :apiType="5"></recomGoods>
<recomGoods v-if="token" :apiType="5" @add-message="addCart"></recomGoods>
<view style="height: 200rpx;"></view>
<multi
ref="shopData"
@add-success="handleAddSuccess"
@add-error="handleAddError"
></multi>
</view>
</template>
<script setup>
import recomGoods from '@/components/recomGoods/recomGoods.vue';
import multi from '@/components/multi/multi.vue'
import { computed,ref } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值
@ -62,8 +68,7 @@ import { onLoad,onShow,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app
const counterStore = useCounterStore(); // 使用 Store
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const { statusHeight,headerHeight,token } = storeToRefs(counterStore);
// const statusHeight = ref(uni.getMenuButtonBoundingClientRect()['height'])
// const headerHeight = ref(uni.getSystemInfoSync()['statusBarHeight'])
const shopData = ref({});
const order = ref([
{
id:1,
@ -128,11 +133,19 @@ const contList = ref([
url:'/userserve/addressList/addressList'
}
])
const goDetail=()=>{
uni.navigateTo({
url:`/shopProDetail/detail/detail`
})
};
//加购物车
const addCart=(i,type)=>{
shopData.value.addCart(i,type);
}
// 加入购物车成功回调
const handleAddSuccess = (data) => {
console.log('加入购物车成功回调:', data)
// 可以在这里更新购物车徽章数量等
}
// 加入购物车失败回调
const handleAddError = (error) => {
console.error('加入购物车失败回调:', error)
}
const goCoupon=()=>{
uni.navigateTo({
url:`/order/coupon/coupon`

2
server/config.js
View File

@ -9,7 +9,7 @@ const type = 'dev'
* prod生产
*/
if(type === 'dev'){
url = "http://mnse8q.natappfree.cc";
url = "http://56w4qa.natappfree.cc";
}
if(type === 'test'){
url = "https://japiuat.3721zh.com/webapp";

22
shopProDetail/detail/detail.vue
View File

@ -52,7 +52,7 @@
</view>
</view>
<view class="item">
<recomGoods :apiType="5"></recomGoods>
<recomGoods :apiType="5" @add-message="addCart"></recomGoods>
</view>
<view style="height: 200rpx;"></view>
<!-- 底部 -->
@ -87,12 +87,18 @@
</view>
</view>
</uni-popup>
<multi
ref="shopData"
@add-success="handleAddSuccess"
@add-error="handleAddError"
></multi>
</view>
</template>
<script setup>
import { loads } from '@/utils/index.js'
import recomGoods from '@/components/recomGoods/recomGoods.vue';
import multi from '@/components/multi/multi.vue'
import comment from '@/components/comment/comment.vue';
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
@ -120,6 +126,7 @@ const productValue = ref({});
const sliderImages = ref([]);
const content = ref('');
const productId = ref('');
const shopData = ref({});
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,statusBartop,token,cartcount } = storeToRefs(counterStore);
import { frontdetail,collectdelete,collectcancel,collectadd,frontcartcount } from '@/server/api'
@ -155,7 +162,18 @@ const goCart=()=>{
url:`/pages/cart/cart`
})
};
//加购物车
const addCart=(i,type)=>{
shopData.value.addCart(i,type);
}
// 加入购物车成功回调
const handleAddSuccess = (data) => {
}
// 加入购物车失败回调
const handleAddError = (error) => {
console.error('加入购物车失败回调:', error)
}
const handleBack = () => {
if (getPages()) {
// 如果有上一页，返回上一页