不知道是什么导致的调了三天了刚开始用的两个文件公用这个功能,然后他就报错这个关键是逐次注销代码一直找不到是什么问题,不知道是哪里出错了导致的递归
- 发布:2024-08-26 17:33
- 更新:2024-08-26 17:33
- 阅读:117
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 23H2
HBuilderX类型: 正式
HBuilderX版本号: 4.26
第三方开发者工具版本号: 4.24
基础库版本号: 1.06.2407110
项目创建方式: HBuilderX
操作步骤:
预期结果:
l
l
实际结果:
vendor.js? [sm]:3677 Maximum recursive updates exceeded in component <PieviewGoods>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.(env: Windows,mp,1.06.2407110; lib: 3.5.5)
vendor.js? [sm]:3677 Maximum recursive updates exceeded in component <PieviewGoods>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.(env: Windows,mp,1.06.2407110; lib: 3.5.5)
bug描述:
<template>
<view class="CommdtiyData" v-if="GoodsS && Object.keys(GoodsS).length">
<view class="title_image">
<image class="img" :src=GoodsS.goods_thumb mode="aspectFill"></image>
</view>
<view class="center">
<view class="GoodsRend">
<view class="head">
<text class="name">{{GoodsS.goods_name}}</text>
<view class="moneyBox">
<text class="money">
<text class="qian"><text class="fuhao">¥</text>{{GoodsS.goods_money}}</text>
<text class="num">数量: <text class="shuL">{{GoodsS.goods_money}}</text></text>
</text>
</view>
</view>
<view class="toby">
<h2 class="h2">坦诚的摊主</h2>
<text class="zishu">摊主自述:<text class="neirong">{{GoodsS.goods_component}}</text></text>
<text class="zishu">份量:<text class="neirong">{{GoodsS.goods_weight}}</text></text>
<text class="zishu">商品描述:<text class="neirong">{{GoodsS.goods_composition}}</text></text>
</view>
</view>
</view>
</view>
<view class="bottomBox" v-if="GoodsS && Object.keys(GoodsS).length">
<view class="bottom" v-if="state===false">
<view class="shop" @click="gotoSellerPage(GoodsS)">
<uni-icons class="location" type="shop" size="27" color="#f11"></uni-icons>
<text>摊主</text>
</view>
<view class="service">
<uni-icons class="locationS" fontFamily="Service" :size="22" color="#f11"></uni-icons>
<text class="ser">客服</text>
</view>
<view class="buy" @click="open()">立刻下单</view>
</view>
<view class="bottom2" v-if="state=== true">
<view class="image" @click="GoodsInformation()">
<image class="logo" src="../../static/1111.png" mode="aspectFit"></image>
<text v-if="selectedIndex!==null" class="moneyCC"><text class="fuCC">¥</text>{{money_tall(order)}}</text>
</view>
<text class="settlement">结算</text>
</view>
<uni-popup ref="popup" class="popup" type="bottom" backgroundColor="#f3f2f2" border-radius="10px 10px 0 0">
<view class="itemCommodity">
<view class="iconimg">
<image class="iconimg" :src="GoodsS.goods_thumb" mode="aspectFit"></image>
</view>
<view class="infromationData">
<view class="title">
<h1 class="h1">{{GoodsS.goods_name}}</h1>
</view>
<view class="tbody">
<text>商家描述:{{GoodsS.goods_desc}}</text>
<text class="money"> <text class="fu">¥ </text>{{GoodsS.goods_money}} </text>
</view>
</view>
</view>
<view class="parameter">
<text>套餐</text>
<view class="parconterBox">
<view
class="parconter"
:style="{ borderColor: selectedIndex === Pindex ? 'red' : border }"
@click="selectItem(Pindex)"
v-for="(Pitem,Pindex) in GoodsS.goods_Package"
:key="Pindex"
>
<text class="ttt1">{{ Pitem.Package_name }}</text>
<text class="moneyS" :style="{ borderColor: selectedIndex === Pindex ? 'red' : border }"> <text class="fuS">¥ </text>{{Pitem.Package_money}} </text>
</view>
</view>
<text>口味</text>
<view class="parconterBox">
<view
class="parconter"
:style="{ borderColor: selectedIndex2 === Kindex ? 'red' : border }"
@click="selectItem2(Kindex)"
v-for="(kitem,Kindex) in GoodsS.goods_Package"
:key="Kindex"
>
<text class="ttt2">{{kitem.Page_taste}}</text>
</view>
</view>
<view class="numbox">
<text class="num">数量</text>
<text class="qqq">
<text class="www" @click="numReduce()">−</text>
<text class="eee">{{Goods_num}}</text>
<text class="rrr" @click="numGaga()">+</text>
</text>
</view>
</view>
<view class="fuqian">
<text class="text2" @click="Cart()">加入购物车</text>
</view>
</uni-popup>
<uni-popup ref="infromation" v-if="order.length >= 0" type="bottom" backgroundColor="#f3f2f2" border-radius="10px 10px 0 0">
<view class="infromationPoput">
<text class="titlech">购物车</text>
<uni-icons class="transh" type="trash" color="#f11" size="25"></uni-icons>
</view>
<view class="infromationpopup" v-for="(item,index) in order" :key="index">
<image class="n_image" :src=item.goods_thumb mode="aspectFill"></image>
<view class="textbox">
<text class="name">【{{item.itemgoods_Package[selectedIndex].Package_name}}】</text>
<text class="taste">{{item.goods_Package[selectedIndex2].Page_taste}}</text>
<view class="jiajia">
<text class="money">{{item.goods_Package[selectedIndex2].Package_money}}</text>
<text class="qqq">
<text class="www" @click="numReducenumReduce(index)">−</text>
<text class="eee">{{Goods_num}}</text>
<text class="rrr" @click="numGaga(index)">+</text>
</text>
</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script setup>
import { ref } from 'vue';
import CommodityDataStore from '../pinia/SerchInerface.js'
const CommodityData = CommodityDataStore();
const Goods = CommodityData.SerchData;
const order = CommodityData.orderData;
console.log('props',order)
console.log('props',Goods)
const popup = ref()
const infromation = ref()
const state = ref(false);
let Goods_num = ref(1)
let GoodsS = ref('')
let border = ref('#eee')
let selectedIndex = ref(null); // 新增选中索引
let selectedIndex2 = ref(null); // 新增选中索引
if(Goods.Seller_total_goods){
GoodsS.value = Goods.Seller_total_goods[0];
console.log("11111111",GoodsS);
}else{
GoodsS.value = Goods;
console.log("222222222",GoodsS.value);
}
function gotoSellerPage(data){
if(data.Cheap_goods === true){
console.log("而是滴哦建安二十的房间啊",data.goods_Seller)
CommodityData.SerchData = data.goods_Seller[0]
uni.navigateTo({
url:"/pages/src/SellerPage"
})
}else{
uni.navigateBack()
}
}
function open(){
popup.value.open();
}
function selectItem(index) {
selectedIndex.value = index; // 更新选中索引
}
function selectItem2(index) {
selectedIndex2.value = index; // 更新选中索引
}
function GoodsInformation(){
infromation.value.open();
}
function money_tall(num){
let tall = ref(0)
num.forEach((item)=>{
tall.value += (Number(item.money) * Number(item.num));
})
return tall.value
}
function Cart(){
if(selectedIndex.value !== null && selectedIndex2.value !== null && Goods_num.value >0){
order.push({
"src": Goods.goods_thumb,
"name": Goods.goods_Package[selectedIndex.value].Package_name,
"money": Goods.goods_Package[selectedIndex.value].Package_money,
"taste": Goods.goods_Package[selectedIndex2.value].Page_taste,
"num": Goods_num.value
});
popup.value.close();
state.value = true;
console.log('orderorderorderorder',order);
}else{
uni.showToast({
title: "请选择规格",
icon: 'none' // 设置为 'none' 以不显示图标
});
}
console.log("当前状态:", state.value); // 调试输出
}
function numReduce(index = null) {
Goods_num.value--;
if (index !== null && order[index]) {
order[index].num = Goods_num.value;
} else {
console.error('Invalid index for reduce:', index);
}
if (Goods_num.value <= 0) {
Goods_num.value = 0;
state.value = false;
infromation.value.close();
}
}
function numGaga(index = null) {
Goods_num.value++;
if (index !== null && order[index]) {
order[index].num = Goods_num.value;
} else {
console.error('Invalid index:', index);
}
if (Goods_num.value > GoodsS.goods_number) {
uni.showToast({
title: '摊主库存不多了',
icon: 'none'
});
Goods_num.value--; // 如果超出库存,减少数量
}
}
function closetall(){
infromation.value.close();
Goods_num.value = 1;
state.value = false;
console.log("当前状态:", state.value); // 调试输出
}
</script>
<style scoped lang="scss">
@font-face {
font-family: Service;
src: url('/static/Service.ttf') format('truetype');
}
.CommdtiyData{
width: 100%;
height: 100vh;
background-color: $backColor;
.title_image{
.img{
width: 100%;
height: 45vh;
border-bottom-right-radius: 10rpx;
border-bottom-left-radius: 10rpx;
}
}
.center{
padding-left: 20rpx;
padding-right: 20rpx;
background-color: $backColor;
.GoodsRend{
margin-top: 10rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
.head{
margin-top: 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-content: flex-start;
background-color: #fff;
border-radius: 25rpx;
padding: 25rpx;
.name{
font-weight: 600;
font-size: 40rpx;
}
.moneyBox{
margin-top: 20rpx;
font-weight: 500;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.money{
color: #f00;
.qian{
font-size: 46rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.fuhao{
font-size: 32rpx;
}
}
.num{
margin-left: 20rpx;
font-size: 25rpx;
color: #685658;
.shuL{
color: #aab;
}
}
}
}
.toby{
margin-top: 30rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-content: flex-start;
background-color: #fff;
padding: 25rpx;
border-radius: 25rpx;
.h2{
font-size: 36rpx;
font-weight: 600;
}
.zishu{
margin-top: 15rpx;
font-size: 30rpx;
color: #345;
.neirong{
text-align: center;
font-size: 24rpx;
color: #567;
}
}
}
.gouwuche{
position: fixed;
right: 20rpx;
bottom: 15%;
}
}
}
}
.bottomBox{
position: fixed;
z-index: 1;
bottom: 0rpx;
background-color: #fff;
width: 100%;
.bottom{
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
margin-top: 20rpx;
margin-bottom: 40rpx;
.service,.shop{
margin-left: 30rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 25rpx;
.locationS{
}
.ser{
}
}
.buy{
margin-left: 30rpx;
font-size: 36rpx;
font-weight: 500;
padding: 20rpx 150rpx;
color: #fff;
border-radius: 25rpx;
background-color: #f11;
}
}
.bottom2{
background-color: #fff;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
.image{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
.logo{
height: 100rpx;
width: 100rpx;
padding: 20rpx 10rpx;
}
.moneyCC{
font-size: 36rpx;
display: block;
color: #f44;
.fuCC{
font-size: 30rpx;
}
}
}
.settlement{
padding: 25rpx 150rpx;
border-radius: 100rpx;
color: #fff;
font-size: 32rpx;
background-color: #d80110;
}
}
.popup{
.itemCommodity{
padding: 20rpx;
border-radius: 20rpx;
background-color: #fff;
display: flex;
flex-direction: row;
justify-content: flex-start;
.iconimg{
width: 140rpx;
height: 140rpx;
border-radius: 10rpx;
padding-top: 10rpx;
padding-left: 10rpx;
}
.infromationData{
overflow: hidden;
padding-top: 10rpx;
padding-left: 30rpx;
.title{
display: flex;
white-space: nowrap;
.h1{
font-size: 36rpx;
font-weight: 500;
}
}
.tbody{
overflow: hidden;
padding-top: 15rpx;
color: #677;
.money{
padding-top: 15rpx;
font-size: 30rpx;
display: block;
color: #f44;
.fu{
font-size: 20rpx;
}
}
}
}
}
.parameter {
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-top: 20rpx;
margin-bottom: 200rpx;
font-size: 32rpx;
padding: 20rpx;
border-radius: 25rpx;
background-color: #fff;
.parconterBox {
margin-top: 20rpx;
margin-bottom: 20rpx;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-content: center;
flex-wrap: wrap;
color: #234;
.parconter {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
margin-top: 40rpx;
margin-right: 15rpx;
border: solid #f11 1rpx;
border-radius: 15rpx;
.ttt1{
padding: 10rpx 15rpx;
font-size: 24rpx;
}
.ttt2{
padding: 10rpx 30rpx;
font-size: 24rpx;
}
.moneyS{
color: #f00;
font-size: 24rpx;
line-height: 45rpx;
padding: 5rpx 10rpx;
border-left: solid #f11 1rpx;
.fuS{
text-align: center;
}
}
}
}
}
.numbox{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 20rpx;
margin-bottom: 20rpx;
.qqq {
margin-right: 20rpx;
display: flex; /* 使用flex布局 */
align-items: center; /* 垂直居中对齐 */
.www {
font-size: 35rpx;
padding: 0rpx 10rpx;
border-radius: 100%;
border: solid #f44 5rpx;
color: #f11;
line-height: 40rpx;
}
.eee {
padding: 25rpx;
font-size: 32rpx;
color: #333; /* 改变颜色以提高可读性 */
text-align: center; /* 文本居中 */
margin: 0 10rpx; /* 添加左右间距 */
}
.rrr {
padding: 5rpx 15rpx;
font-size: 35rpx;
border-radius: 100%;
color: #fff;
line-height: 40rpx;
background-color: #f11;
}
}
}
.fuqian{
display: flex;
justify-content: center;
.text2{
width: 90%;
height: 70rpx;
line-height: 70rpx;
border-radius: 25rpx;
font-size: 28rpx;
text-align: center;
color: #eee;
background-color: #d80110;
}
}
}
.infromationPoput{
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
.titlech{
padding: 20rpx;
font-size: 36rpx;
font-weight: 500;
color: #d80110;
}
.transh {
padding: 20rpx;
}
}
.infromationpopup{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-content: center;
margin: 20rpx;
background-color: #fff;
border-radius: 25rpx;
.n_image{
width: 100rpx;
height: 100rpx;
border-radius: 15rpx;
padding: 20rpx;
}
.textbox{
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
width: 100%;
.name{
font-size: 30rpx;
color: #000;
font-weight: 500;
}
.taste{
font-size: 23rpx;
color: #888;
margin-top: 6rpx;
margin-left: 20rpx;
}
.jiajia{
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
width: 100%;
.money{
font-size: 30rpx;
color: #f22;
margin-top: 6rpx;
margin-left: 20rpx;
}
.qqq {
margin-right: 20rpx;
display: flex; /* 使用flex布局 */
align-items: center; /* 垂直居中对齐 */
.www {
display: inline-block;
padding: 10rpx 20rpx;
font-size: 40rpx;
border-radius: 100%;
border: solid #f44 1rpx;
color: #f11;
line-height: 40rpx;
}
.eee {
display: inline-block;
padding: 25rpx;
font-size: 32rpx;
color: #333; /* 改变颜色以提高可读性 */
text-align: center; /* 文本居中 */
margin: 0 10rpx; /* 添加左右间距 */
}
.rrr {
display: inline-block;
padding: 10rpx 15rpx;
font-size: 40rpx;
border-radius: 100%;
color: #fff;
line-height: 40rpx;
background-color: #f11;
}
}
}
}
}
}
</style>
0 个回复