javascript image update view

博客给出一段JavaScript代码,保存为HTM文件可运行。代码实现了图片上传功能,包含图片尺寸调整函数DrawImage,文件选择改变函数FileChange,以及上传前验证函数BeforeUpLoad,还提供了文件输入框、图片显示区和提交按钮。

将以下代码保存为HTM文件,即可查看运行效果

<script language=JavaScript>
var flag=false;
function DrawImage(ImgD){
   var image=new Image();
   image.src=ImgD.src;
   if(image.width>0 && image.height>0){
    flag=true;
    if(image.width/image.height>= 120/80){
     if(image.width>120){ 
     ImgD.width=120;
     ImgD.height=(image.height*120)/image.width;
     }else{
     ImgD.width=image.width;  
     ImgD.height=image.height;
     }
     ImgD.alt=image.width+"×"+image.height;
     }
    else{
     if(image.height>80){ 
     ImgD.height=80;
     ImgD.width=(image.width*80)/image.height;     
     }else{
     ImgD.width=image.width;  
     ImgD.height=image.height;
     }
     ImgD.alt=image.width+"×"+image.height;
     }
    }
   /*else{
    ImgD.src="";
    ImgD.alt=""
    }*/
   }

function FileChange(Value){
flag=false;
document.all.uploadimage.width=10;
document.all.uploadimage.height=10;
document.all.uploadimage.alt="";
document.all.uploadimage.src=Value;
}

function BeforeUpLoad(){
if(flag) alert("OK");else alert("FAIL");
}
</script>
<INPUT style="WIDTH: 143px; HEIGHT: 18px" type=file size=8 name=pic onchange="javascript:FileChange(this.value);">
<IMG id=uploadimage height=10 width=10 src=""  onload="javascript:DrawImage(this);" ><BR>
<Button onclick="javascript:BeforeUpLoad();">提交</Button>

<template> <view class="u-wrap"> <view class="u-menu-wrap"> <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"> <view v-for="(item,index) in tabbar" :key="index" class="u-tab-item" :class="[current==index ? 'u-tab-item-active' : '']" :data-current="index" @tap.stop="swichMenu(index)"> <text class="">{{item.name}}</text> </view> </scroll-view> <block v-for="(item,index) in tabbar" :key="index"> <scroll-view scroll-y class="right-box" v-if="current==index"> <view class="page-view"> <view class="" style="position: relative; width: 550rpx;" v-for="(item1, index1) in item.foods" :key="item1.id"> <view class="item u-border-bottom flex justify-start align-center " style="height: 200rpx;"> <view class="" @click="goShop()"> <u-image :src="item1.images" height="152" width="152"></u-image> </view> <view class="margin-left-sm" style="width: 392rpx;"> <view class=" flex justify-between align-center"> <view class="text-bold" style="font-size: 30rpx;"> {{item1.title}} </view> <!-- <view class="flex justify-center align-center text-bold align-center buy"> <u-image src="/static/my/collect/buy.png" height="22" width="22"></u-image> <view class="text-sm padding-left-xs"> 抢购 </view> </view> --> </view> <view class="flex text-sm align-center justify-start margin-top-xs" style="color: #D27E1B;"> <view class="padding-right-xs"> 评分:{{item1.score}} </view> <view class=""> 月售:{{item1.sell}} </view> </view> <view class="text-sm padding-tb-xs" style="color: #999999;"> 月浏览量:{{item1.browse}} </view> <view class="flex justify-between align-center"> <view class="flex justify-start align-center text-sm"> <view class="text-red "> ¥{{item1.newMoney}} </view> <view class="text-gray padding-lr-xs" style="text-decoration: line-through"> ¥{{item1.newMoney}} </view> <view class="text-xs flex align-center justify-center" style="height: 36rpx; width: 70rpx; border: 2rpx solid #FF4848;color: #FF4848; border-radius: 12rpx;"> {{item1.discount}}折 </view> </view> <view class="flex align-center justify-end"> <view class="flex align-center" v-if=" item1.buySum >0"> <!-- 减号按钮 --> <view v-if="getBuySum(item1) > 0" class="flex justify-center align-center" style="width: 36rpx; height: 36rpx; border-radius: 50%; background-color: #f0f0f0;" @click.stop="decrease(item1)"> <u-icon name="minus-circle" size="36rpx" color="#AAA8A7"></u-icon> </view> <!-- 数量显示 --> <text v-if="getBuySum(item1) > 0" class="margin-lr-xs" style="font-size: 28rpx; border-radius: 8rpx; background-color: #D9D9D9; color: #333; min-width: 40rpx; text-align: center;"> {{ getBuySum(item1) }} </text> <!-- 加号按钮 --> <view @click.stop="add(item1)" class="flex justify-center align-center" style="width: 36rpx; height: 36rpx; border-radius: 50%; background-color: #fff;"> <u-icon name="plus-circle" color="#FC7746" size="36rpx"></u-icon> </view> </view> <!-- <view class="" v-if=" item1.buySum >0"> --> <!-- '<u-number-box2 v-model="item1.buySum " :min="0" positive-integer @change="(val) => handleNumberChange(item1, val)" />' --> <!-- </view> --> <view class="" v-if="item1.buySum ==0" @click="add(item1)"> <u-icon name="plus-circle" color="#FC7746" size="36rpx"></u-icon> </view> </view> </view> </view> </view> </view> </view> </scroll-view> </block> </view> </view> </template> <script> export default { name: 'CategoryGoodsList', data() { return { scrollTop: 0, //tab标题的滚动条位置 current: 0, // 预设当前项的值 menuHeight: 0, // 左边菜单的高度 menuItemHeight: 0, // 左边菜单item的高度 tabbar: [{ "name": "品类名称", "foods": [{ "title": "镇江陈醋500ml", "images": "https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png", 'score': "5分", "sell": "1000+", "browse": '453456', "newMoney": 45.56, "money": 68, "discount": 6.7, 'buySum': 0 }, { "title": "镇江陈醋500ml", "images": "https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png", 'score': "5分", "sell": "1000+", "browse": '453456', "newMoney": 45.56, "money": 68, "discount": 6.7, 'buySum': 0 }, { "title": "镇江陈醋500ml", "images": "https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png", 'score': "5分", "sell": "1000+", "browse": '453456', "newMoney": 45.56, "money": 68, "discount": 6.7, 'buySum': 0 }] }, { "name": "品类名称", "foods": [{ "title": "镇江陈醋500ml", "images": "https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png", 'score': "5分", "sell": "1000+", "browse": '453456', "newMoney": 45.56, "money": 68, "discount": 6.7, 'buySum': 0 }] }, { "name": "品类名称", "foods": [{ "title": "镇江陈醋500ml", "images": "https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png", 'score': "5分", "sell": "1000+", "browse": '453456', "newMoney": 45.56, "money": 68, "discount": 6.7, 'buySum': 0 } ] }, { "name": "品类名称", "foods": [{ "title": "镇江陈醋500ml", "images": "https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png", 'score': "5分", "sell": "1000+", "browse": '453456', "newMoney": 45.56, "money": 68, "discount": 6.7, 'buySum': 0 }] }, { "name": "品类名称", "foods": [{ "title": "镇江陈醋500ml", "images": "https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png", 'score': "5分", "sell": "1000+", "browse": '453456', "newMoney": 45.56, "money": 68, "discount": 6.7, 'buySum': 0 }] }, { "name": "品类名称", "foods": [{ "title": "镇江陈醋500ml", "images": "https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png", 'score': "5分", "sell": "1000+", "browse": '453456', "newMoney": 45.56, "money": 68, "discount": 6.7, 'buySum': 0 }] }, { "name": "品类名称", "foods": [{ "title": "镇江陈醋500ml", "images": "https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png", 'score': "5分", "sell": "1000+", "browse": '453456', "newMoney": 45.56, "money": 68, "discount": 6.7, 'buySum': 0 }] }, ] } }, computed: { }, methods: { add(item) { const current = this.getBuySum(item); this.$set(item, 'buySum', current + 1); this.updateCart(); }, // 减少商品数量 decrease(item) { const current = this.getBuySum(item); if (current <= 0) return; this.$set(item, 'buySum', current - 1); this.updateCart(); }, updateCart() { // 构建购物车数据:只保留 buySum > 0 的商品 const cartItems = []; let totalAmount = 0; // 总件数 let totalPrice = 0; // 总金额 this.tabbar.forEach(category => { category.foods.forEach(food => { const buySum = this.getBuySum(food); if (buySum > 0) { const itemTotal = buySum * parseFloat(food.newMoney); cartItems.push({ id: food.id, title: food.title, buySum, price: parseFloat(food.newMoney), subtotal: itemTotal }); totalAmount += buySum; totalPrice += itemTotal; } }); }); // 发送到父组件 this.$emit('update-cart', { cartItems, // 所有选中的商品明细 totalAmount, // 总数量 totalPrice: parseFloat(totalPrice.toFixed(2)) // 保留两位小数 }); }, // 安全获取 buySum 值 getBuySum(item) { return typeof item.buySum === 'number' && !isNaN(item.buySum) ? item.buySum : 0; }, goShop() { uni.navigateTo({ url: '/pages/shop/shop' }) }, add(item1) { // 安全地递增 if (typeof item1.buySum !== 'number') { item1.buySum = 0; } item1.buySum++; this.$emit('update-buy-sum', this.tabbar); console.log(item1.buySum); }, handleNumberChange(item, val) { item.buySum = val; }, getImg() { return Math.floor(Math.random() * 35); }, // 点击左边的栏目切换 async swichMenu(index) { if (index == this.current) return; this.current = index; // 如果为0,意味着尚未初始化 if (this.menuHeight == 0 || this.menuItemHeight == 0) { await this.getElRect('menu-scroll-view', 'menuHeight'); await this.getElRect('u-tab-item', 'menuItemHeight'); } // 将菜单菜单活动item垂直居中 this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2; }, // 获取一个目标元素的高度 getElRect(elClass, dataVal) { new Promise((resolve, reject) => { const query = uni.createSelectorQuery().in(this); query.select('.' + elClass).fields({ size: true }, res => { // 如果节点尚未生成,res值为null,循环调用执行 if (!res) { setTimeout(() => { this.getElRect(elClass); }, 10); return; } this[dataVal] = res.height; }).exec(); }) } } } </script> <style lang="scss" scoped> .u-wrap { height: calc(100vh); /* #ifdef H5 */ height: calc(100vh - var(--window-top)); /* #endif */ display: flex; flex-direction: column; } .u-menu-wrap { flex: 1; display: flex; overflow: hidden; // border-radius: 20rpx; } .u-tab-view { width: 200rpx; height: 100%; // border-radius: 20rpx; } .u-tab-item { height: 110rpx; background: #fff; box-sizing: border-box; border-radius: 20rpx 20rpx 0 0; display: flex; align-items: center; justify-content: center; font-size: 28rpx; color: #444; font-weight: 400; line-height: 1; } .u-tab-item-active { position: relative; color: #fff; // font-size: 30rpx; // font-weight: 600; background: #E96F50; } .u-tab-view { height: 100%; } .right-box { background-color: rgb(250, 250, 250); } .page-view { padding-left: 16rpx; padding-right: 16rpx; .buy { height: 48rpx; width: 112rpx; color: #fff; border-radius: 24rpx; background-color: #FC7746; } } .class-item { margin-bottom: 30rpx; background-color: #fff; padding: 16rpx; border-radius: 8rpx; } .item-title { font-size: 26rpx; color: $u-main-color; font-weight: bold; } .item-menu-name { font-weight: normal; font-size: 24rpx; color: $u-main-color; } .item-container { display: flex; flex-wrap: wrap; } .thumb-box { width: 33.333333%; display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 20rpx; } .item-menu-image { width: 120rpx; height: 120rpx; } </style> 这是子组件 <template> <view> <z-paging :paging-style="{ background: 'linear-gradient(to bottom, #FFEB70 10%, #F9F9F9 20%)' }"> <!-- #ifdef H5 --> <view style="height: 40rpx"></view> <view class="flex align-center padding-lr"> <view class="text-bold text-lg padding-right-lg" @click="goback()"> <u-icon name="arrow-left"></u-icon> </view> <view class="text-bold text-lg"> 超市百货 </view> </view> <!-- #endif --> <!-- #ifndef H5 --> <view class="" :style="{height: navBarHeight + 'px'}"> </view> <view class="flex align-center padding"> <view class="text-bold text-lg padding-right-lg" @click="goback()"> <u-icon name="arrow-left"></u-icon> </view> <view class="text-bold text-lg"> 超市百货 </view> </view> <!-- #endif --> <view class="w-94 padding-top-lg"> <view class="item u-border-bottom flex justify-start align-center padding-lr-sm" style="height: 200rpx;background-color: #fff; border-radius: 20rpx;"> <view class=""> <u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png" height="152" width="152"></u-image> </view> <!-- 此层wrap在此为必写的,否则可能会出现标题定位错误 --> <view class="margin-left" style="width: 480rpx;"> <view class=" flex justify-between align-center"> <view class="text-bold" style="font-size: 30rpx;"> 华润万家 </view> <view class="flex justify-between align-center"> <view class="padding-right" @click="Collect()"> <view class="" v-if="!isCollect"> <u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/collect.svg" height="40" width="40" color='#FF9526'></u-image> </view> <view class="" v-if="isCollect"> <u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/select.svg" height="40" width="40" color='#FF9526'></u-image> </view> </view> <view class="shop flex align-center justify-center"> 到店 </view> <view class="send margin-left-sm flex align-center justify-center"> 配送 </view> </view> </view> <view class="flex text-sm align-center justify-between margin-top-xs" style="color: #D27E1B;"> <view class=""> 5.0分 </view> <view class=""> 月售:1000+ </view> <view class=""> 月浏览量:4000+ </view> </view> <view class="flex justify-between align-center margin-top text-sm" style="color: #999999;"> <view class=""> 起送价¥20.00 </view> <view class=""> 配送费¥5.00 </view> <view class="flex justify-between align-center"> <u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/address.svg" height="25" width="20"></u-image> <view class="padding-left-xs"> 1.2Km </view> </view> </view> </view> </view> </view> <view class="w-94 margin-top flex align-center padding justify-between" style="background-color: #F7F8DB; height: 64rpx; border-radius: 32rpx;"> <view class="flex align-center justify-start"> <u-icon name="volume-up-fill" size="48" color="#F1AF5A"></u-icon> <view class="padding-left-sm" style="font-size: 26rpx; color: #D7B06E;"> 这里是公告内容这里是公告内容 </view> </view> <view class=""> <u-icon name="arrow-right" color="#F1AF5A"></u-icon> </view> </view> <view class=" margin-tb-sm" style="width: 100%;"> <u-tabs :list="tabs" :current="current" active-color="#000" :is-scroll="false" @change="change" bar-width="25" font-size="28" bg-color="#F5F9F8" bar-height="6" inactive-color="#191915" :bar-style="{background:'#F09E37'}" gutter="20"></u-tabs> </view> <!-- 搜索 --> <view v-if="current ==0"> <view class="w-94 margin-tb-sm flex align-center justify-between" style=" height: 80rpx;border-radius: 40rpx; background-color: #F2F2F2;"> <view class="padding-left-lg flex align-center justify-start"> <u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/home/search.svg" height="40" width="40"></u-image> <u-search search-icon placeholder-color="#666666" placeholder="搜索附近商品" :show-action="false" v-model="keyword"></u-search> </view> <view class=""> <view class="flex align-center text-white justify-center margin-right-sm " style="height: 60rpx; width: 116rpx; background: linear-gradient(to right, #F0965F, #E76649 10vh, #E76649 100%); border-radius: 30rpx;"> 搜索 </view> </view> </view> <CategoryGoodsList @update-cart="onCartUpdate" /> <view class="fixed-button flex justify-around align-center"> <view class="left"> <view class="item car"> <u-badge class="car-num" :count="8" type="error" :offset="[-6, -3]"></u-badge> <u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/shopcar.svg" height="58" width="64"></u-image> </view> </view> <view class="text-bold" style="font-size: 26rpx; "> 数量: <text style="color: #999999;">1</text> </view> <view class="text-bold" style="font-size: 28rpx; "> 总价:<text style="color: #FE4343;">¥</text> <text style="color: #FE4343;font-size: 32rpx;">437.00</text> </view> <view class="text-df flex align-center justify-center text-bold" style="height: 88rpx; width: 172rpx; background-color: #FE4343; border-radius: 20rpx; color: #fff;" @click="goOrder()"> 去结算 </view> </view> </view> <view class="" v-else-if="current ==1"> <comment></comment> </view> <view class="w-94" v-else-if="current ==2" style="background-color: #fff; border-radius: 16rpx;"> <view class="padding"> <view class="text-bold" style="font-size: 32rpx;"> 商家信息 </view> <view class="flex justify-between align-center margin-top padding-bottom" style="font-size: 28rpx; height: 60rpx; border-bottom: 2rpx solid #F1F3F2;"> <view class=""> 商家电话 </view> <view class="text-bold flex align-center justify-between margin-top-xs" style="color: #00976A; font-size: 26rpx;"> <view class="padding-right-xs flex align-center justify-center"> <u-icon name="phone-fill" size="32rpx"></u-icon> </view> 联系商家 </view> </view> <view class="flex justify-between align-center margin-top padding-bottom" style="font-size: 28rpx; height: 60rpx; border-bottom: 2rpx solid #F1F3F2;"> <view class=""> 地址 </view> <view class="text-bold flex align-center justify-between" style="color: #B3B4B8; font-size: 26rpx;"> 金塔东路14号 <view class="padding-left-xs flex align-center justify-center"> <u-icon name="map-fill" size="32rpx" color="#11A9FF"></u-icon> </view> </view> </view> <view class="flex justify-between align-center margin-top padding-bottom" style="font-size: 28rpx; height: 60rpx; border-bottom: 2rpx solid #F1F3F2;"> <view class=""> 营业时间 </view> <view class="flex align-center justify-between" style="color: #B3B4B8; font-size: 26rpx;"> 10:00-22:00 </view> </view> <view class="margin-top"> <view class=""> 营业资质 </view> <view class="margin-top flex align-center justify-between"> <view class="" v-for="item in 3 " :key="item.index"> <u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png" height="192" width="192"></u-image> </view> </view> </view> <view class="margin-top"> <view class=""> 商家图片 </view> <view class="margin-top flex align-center justify-between"> <view class="" v-for="item in 3 " :key="item.index"> <u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png" height="192" width="192"></u-image> </view> </view> </view> </view> </view> <view class="" style="height: 80rpx;"> </view> </z-paging> </view> </template> <script> export default { data() { return { navBarHeight: '', isCollect: false, current: 0, tabs: [{ name: '商品' }, { name: '评价' }, { name: '商家' } ], }; }, methods: { change(index) { this.current = index; }, goOrder() { uni.navigateTo({ url: '/pages/order/order' }) }, goback() { uni.navigateBack({ delta: 1 }) }, Collect() { this.isCollect = !this.isCollect }, onCartUpdate(data) { console.log('收到购物车更新:', data); this.cart = { ...data }; // 更新本地状态 } }, onLoad() { this.$nextTick(() => { const statusBarHeight = uni.getSystemInfoSync().statusBarHeight const menuButtonInfo = uni.getMenuButtonBoundingClientRect() this.navBarHeight = statusBarHeight }) } } </script> <style lang="scss"> .shop { height: 40rpx; width: 60rpx; border-radius: 12rpx; font-size: 20rpx; color: #fff; background: linear-gradient(to right, #FF8F1F 50%, #E9664A 100%); } .send { height: 40rpx; width: 60rpx; border-radius: 12rpx; font-size: 20rpx; color: #fff; background: linear-gradient(to right, #FFDA6E 50%, #FF8F20 100%); } .buy { height: 48rpx; width: 112rpx; color: #fff; position: absolute; right: 24rpx; bottom: 18rpx; border-radius: 24rpx; background-color: #FC7746; } .title { width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-all; line-height: 1.5; } .fixed-button { position: fixed; height: 150rpx; background-color: #fff; border: 1px solid #F4F4F4; bottom: 0; left: 0; right: 0; z-index: 1000; .left { display: flex; font-size: 20rpx; .item { margin: 0 30rpx; &.car { text-align: center; position: relative; .car-num { position: absolute; top: -10rpx; right: -10rpx; } } } } } .btn { text-align: center; color: #fff; padding: 20rpx; margin: 50rpx; border-radius: 20rpx; background-color: #2979ff; } </style> 这是父组件 收不到子组件传来的数据分析问题解决问题
最新发布
10-28
<template> <view> <z-paging :paging-style="{ background: 'linear-gradient(to bottom, #FFEB70 10%, #F9F9F9 20%)' }"> <!-- #ifdef H5 --> <view style="height: 40rpx"></view> <view class="flex align-center padding-lr"> <view class="text-bold text-lg padding-right-lg" @click="goback()"> <u-icon name="arrow-left"></u-icon> </view> <view class="text-bold text-lg"> 超市百货 </view> </view> <!-- #endif --> <!-- #ifndef H5 --> <view class="" :style="{height: navBarHeight + 'px'}"> </view> <view class="flex align-center padding"> <view class="text-bold text-lg padding-right-lg" @click="goback()"> <u-icon name="arrow-left"></u-icon> </view> <view class="text-bold text-lg"> 超市百货 </view> </view> <!-- #endif --> <view class="w-94 padding-top-lg"> <view class="item u-border-bottom flex justify-start align-center padding-lr-sm" style="height: 200rpx;background-color: #fff; border-radius: 20rpx;"> <view class=""> <u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png" height="152" width="152"></u-image> </view> <!-- 此层wrap在此为必写的,否则可能会出现标题定位错误 --> <view class="margin-left" style="width: 480rpx;"> <view class=" flex justify-between align-center"> <view class="text-bold" style="font-size: 30rpx;"> 华润万家 </view> <view class="flex justify-between align-center"> <view class="padding-right" @click="Collect()"> <view class="" v-if="!isCollect"> <u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/collect.svg" height="40" width="40" color='#FF9526'></u-image> </view> <view class="" v-if="isCollect"> <u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/select.svg" height="40" width="40" color='#FF9526'></u-image> </view> </view> <view class="shop flex align-center justify-center"> 到店 </view> <view class="send margin-left-sm flex align-center justify-center"> 配送 </view> </view> </view> <view class="flex text-sm align-center justify-between margin-top-xs" style="color: #D27E1B;"> <view class=""> 5.0分 </view> <view class=""> 月售:1000+ </view> <view class=""> 月浏览量:4000+ </view> </view> <view class="flex justify-between align-center margin-top text-sm" style="color: #999999;"> <view class=""> 起送价¥20.00 </view> <view class=""> 配送费¥5.00 </view> <view class="flex justify-between align-center"> <u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/address.svg" height="25" width="20"></u-image> <view class="padding-left-xs"> 1.2Km </view> </view> </view> </view> </view> </view> <view class="w-94 margin-top flex align-center padding justify-between" style="background-color: #F7F8DB; height: 64rpx; border-radius: 32rpx;"> <view class="flex align-center justify-start"> <u-icon name="volume-up-fill" size="48" color="#F1AF5A"></u-icon> <view class="padding-left-sm" style="font-size: 26rpx; color: #D7B06E;"> 这里是公告内容这里是公告内容 </view> </view> <view class=""> <u-icon name="arrow-right" color="#F1AF5A"></u-icon> </view> </view> <view class=" margin-tb-sm" style="width: 100%;"> <u-tabs :list="tabs" :current="current" active-color="#000" :is-scroll="false" @change="change" bar-width="25" font-size="28" bg-color="#F5F9F8" bar-height="6" inactive-color="#191915" :bar-style="{background:'#F09E37'}" gutter="20"></u-tabs> </view> <!-- 搜索 --> <view v-if="current ==0"> <view class="w-94 margin-tb-sm flex align-center justify-between" style=" height: 80rpx;border-radius: 40rpx; background-color: #F2F2F2;"> <view class="padding-left-lg flex align-center justify-start"> <u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/home/search.svg" height="40" width="40"></u-image> <u-search search-icon placeholder-color="#666666" placeholder="搜索附近商品" :show-action="false" v-model="keyword"></u-search> </view> <view class=""> <view class="flex align-center text-white justify-center margin-right-sm " style="height: 60rpx; width: 116rpx; background: linear-gradient(to right, #F0965F, #E76649 10vh, #E76649 100%); border-radius: 30rpx;"> 搜索 </view> </view> </view> <CategoryGoodsList @update-cart="onCartUpdate" /> <view class="fixed-button flex justify-around align-center"> <view class="left"> <view class="item car"> <u-badge class="car-num" :count="8" type="error" :offset="[-6, -3]"></u-badge> <u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/shopcar.svg" height="58" width="64"></u-image> </view> </view> <view class="text-bold" style="font-size: 26rpx; "> 数量: <text style="color: #999999;">1</text> </view> <view class="text-bold" style="font-size: 28rpx; "> 总价:<text style="color: #FE4343;">¥</text> <text style="color: #FE4343;font-size: 32rpx;">437.00</text> </view> <view class="text-df flex align-center justify-center text-bold" style="height: 88rpx; width: 172rpx; background-color: #FE4343; border-radius: 20rpx; color: #fff;" @click="goOrder()"> 去结算 </view> </view> </view> <view class="" v-else-if="current ==1"> <comment></comment> </view> <view class="w-94" v-else-if="current ==2" style="background-color: #fff; border-radius: 16rpx;"> <view class="padding"> <view class="text-bold" style="font-size: 32rpx;"> 商家信息 </view> <view class="flex justify-between align-center margin-top padding-bottom" style="font-size: 28rpx; height: 60rpx; border-bottom: 2rpx solid #F1F3F2;"> <view class=""> 商家电话 </view> <view class="text-bold flex align-center justify-between margin-top-xs" style="color: #00976A; font-size: 26rpx;"> <view class="padding-right-xs flex align-center justify-center"> <u-icon name="phone-fill" size="32rpx"></u-icon> </view> 联系商家 </view> </view> <view class="flex justify-between align-center margin-top padding-bottom" style="font-size: 28rpx; height: 60rpx; border-bottom: 2rpx solid #F1F3F2;"> <view class=""> 地址 </view> <view class="text-bold flex align-center justify-between" style="color: #B3B4B8; font-size: 26rpx;"> 金塔东路14号 <view class="padding-left-xs flex align-center justify-center"> <u-icon name="map-fill" size="32rpx" color="#11A9FF"></u-icon> </view> </view> </view> <view class="flex justify-between align-center margin-top padding-bottom" style="font-size: 28rpx; height: 60rpx; border-bottom: 2rpx solid #F1F3F2;"> <view class=""> 营业时间 </view> <view class="flex align-center justify-between" style="color: #B3B4B8; font-size: 26rpx;"> 10:00-22:00 </view> </view> <view class="margin-top"> <view class=""> 营业资质 </view> <view class="margin-top flex align-center justify-between"> <view class="" v-for="item in 3 " :key="item.index"> <u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png" height="192" width="192"></u-image> </view> </view> </view> <view class="margin-top"> <view class=""> 商家图片 </view> <view class="margin-top flex align-center justify-between"> <view class="" v-for="item in 3 " :key="item.index"> <u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png" height="192" width="192"></u-image> </view> </view> </view> </view> </view> <view class="" style="height: 80rpx;"> </view> </z-paging> </view> </template> <script> export default { data() { return { navBarHeight: '', isCollect: false, current: 0, tabs: [{ name: '商品' }, { name: '评价' }, { name: '商家' } ], }; }, methods: { change(index) { this.current = index; }, goOrder() { uni.navigateTo({ url: '/pages/order/order' }) }, goback() { uni.navigateBack({ delta: 1 }) }, Collect() { this.isCollect = !this.isCollect }, onCartUpdate(data) { console.log('收到购物车更新:', data); this.cart = { ...data }; // 更新本地状态 } }, onLoad() { this.$nextTick(() => { const statusBarHeight = uni.getSystemInfoSync().statusBarHeight const menuButtonInfo = uni.getMenuButtonBoundingClientRect() this.navBarHeight = statusBarHeight }) } } </script> <style lang="scss"> .shop { height: 40rpx; width: 60rpx; border-radius: 12rpx; font-size: 20rpx; color: #fff; background: linear-gradient(to right, #FF8F1F 50%, #E9664A 100%); } .send { height: 40rpx; width: 60rpx; border-radius: 12rpx; font-size: 20rpx; color: #fff; background: linear-gradient(to right, #FFDA6E 50%, #FF8F20 100%); } .buy { height: 48rpx; width: 112rpx; color: #fff; position: absolute; right: 24rpx; bottom: 18rpx; border-radius: 24rpx; background-color: #FC7746; } .title { width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-all; line-height: 1.5; } .fixed-button { position: fixed; height: 150rpx; background-color: #fff; border: 1px solid #F4F4F4; bottom: 0; left: 0; right: 0; z-index: 1000; .left { display: flex; font-size: 20rpx; .item { margin: 0 30rpx; &.car { text-align: center; position: relative; .car-num { position: absolute; top: -10rpx; right: -10rpx; } } } } } .btn { text-align: center; color: #fff; padding: 20rpx; margin: 50rpx; border-radius: 20rpx; background-color: #2979ff; } </style> <template> <view class="u-wrap"> <view class="u-menu-wrap"> <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"> <view v-for="(item,index) in tabbar" :key="index" class="u-tab-item" :class="[current==index ? 'u-tab-item-active' : '']" :data-current="index" @tap.stop="swichMenu(index)"> <text class="">{{item.name}}</text> </view> </scroll-view> <block v-for="(item,index) in tabbar" :key="index"> <scroll-view scroll-y class="right-box" v-if="current==index"> <view class="page-view"> <view class="" style="position: relative; width: 550rpx;" v-for="(item1, index1) in item.foods" :key="item1.id"> <view class="item u-border-bottom flex justify-start align-center " style="height: 200rpx;"> <view class="" @click="goShop()"> <u-image :src="item1.images" height="152" width="152"></u-image> </view> <view class="margin-left-sm" style="width: 392rpx;"> <view class=" flex justify-between align-center"> <view class="text-bold" style="font-size: 30rpx;"> {{item1.title}} </view> <!-- <view class="flex justify-center align-center text-bold align-center buy"> <u-image src="/static/my/collect/buy.png" height="22" width="22"></u-image> <view class="text-sm padding-left-xs"> 抢购 </view> </view> --> </view> <view class="flex text-sm align-center justify-start margin-top-xs" style="color: #D27E1B;"> <view class="padding-right-xs"> 评分:{{item1.score}} </view> <view class=""> 月售:{{item1.sell}} </view> </view> <view class="text-sm padding-tb-xs" style="color: #999999;"> 月浏览量:{{item1.browse}} </view> <view class="flex justify-between align-center"> <view class="flex justify-start align-center text-sm"> <view class="text-red "> ¥{{item1.newMoney}} </view> <view class="text-gray padding-lr-xs" style="text-decoration: line-through"> ¥{{item1.newMoney}} </view> <view class="text-xs flex align-center justify-center" style="height: 36rpx; width: 70rpx; border: 2rpx solid #FF4848;color: #FF4848; border-radius: 12rpx;"> {{item1.discount}}折 </view> </view> <view class="flex align-center justify-end"> <view class="flex align-center" v-if=" item1.buySum >0"> <!-- 减号按钮 --> <view v-if="getBuySum(item1) > 0" class="flex justify-center align-center" style="width: 36rpx; height: 36rpx; border-radius: 50%; background-color: #f0f0f0;" @click.stop="decrease(item1)"> <u-icon name="minus-circle" size="36rpx" color="#AAA8A7"></u-icon> </view> <!-- 数量显示 --> <text v-if="getBuySum(item1) > 0" class="margin-lr-xs" style="font-size: 28rpx; border-radius: 8rpx; background-color: #D9D9D9; color: #333; min-width: 40rpx; text-align: center;"> {{ getBuySum(item1) }} </text> <!-- 加号按钮 --> <view @click.stop="add(item1)" class="flex justify-center align-center" style="width: 36rpx; height: 36rpx; border-radius: 50%; background-color: #fff;"> <u-icon name="plus-circle" color="#FC7746" size="36rpx"></u-icon> </view> </view> <!-- <view class="" v-if=" item1.buySum >0"> --> <!-- '<u-number-box2 v-model="item1.buySum " :min="0" positive-integer @change="(val) => handleNumberChange(item1, val)" />' --> <!-- </view> --> <view class="" v-if="item1.buySum ==0" @click="add(item1)"> <u-icon name="plus-circle" color="#FC7746" size="36rpx"></u-icon> </view> </view> </view> </view> </view> </view> </view> </scroll-view> </block> </view> </view> </template> <script> export default { name: 'CategoryGoodsList', data() { return { scrollTop: 0, //tab标题的滚动条位置 current: 0, // 预设当前项的值 menuHeight: 0, // 左边菜单的高度 menuItemHeight: 0, // 左边菜单item的高度 tabbar: [{ "name": "品类名称", "foods": [{ "title": "镇江陈醋500ml", "images": "https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png", 'score': "5分", "sell": "1000+", "browse": '453456', "newMoney": 45.56, "money": 68, "discount": 6.7, 'buySum': 0 }, { "title": "镇江陈醋500ml", "images": "https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png", 'score': "5分", "sell": "1000+", "browse": '453456', "newMoney": 45.56, "money": 68, "discount": 6.7, 'buySum': 0 }, { "title": "镇江陈醋500ml", "images": "https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png", 'score': "5分", "sell": "1000+", "browse": '453456', "newMoney": 45.56, "money": 68, "discount": 6.7, 'buySum': 0 }] }, { "name": "品类名称", "foods": [{ "title": "镇江陈醋500ml", "images": "https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png", 'score': "5分", "sell": "1000+", "browse": '453456', "newMoney": 45.56, "money": 68, "discount": 6.7, 'buySum': 0 }] }, { "name": "品类名称", "foods": [{ "title": "镇江陈醋500ml", "images": "https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png", 'score': "5分", "sell": "1000+", "browse": '453456', "newMoney": 45.56, "money": 68, "discount": 6.7, 'buySum': 0 } ] }, { "name": "品类名称", "foods": [{ "title": "镇江陈醋500ml", "images": "https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png", 'score': "5分", "sell": "1000+", "browse": '453456', "newMoney": 45.56, "money": 68, "discount": 6.7, 'buySum': 0 }] }, { "name": "品类名称", "foods": [{ "title": "镇江陈醋500ml", "images": "https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png", 'score': "5分", "sell": "1000+", "browse": '453456', "newMoney": 45.56, "money": 68, "discount": 6.7, 'buySum': 0 }] }, { "name": "品类名称", "foods": [{ "title": "镇江陈醋500ml", "images": "https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png", 'score': "5分", "sell": "1000+", "browse": '453456', "newMoney": 45.56, "money": 68, "discount": 6.7, 'buySum': 0 }] }, { "name": "品类名称", "foods": [{ "title": "镇江陈醋500ml", "images": "https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png", 'score': "5分", "sell": "1000+", "browse": '453456', "newMoney": 45.56, "money": 68, "discount": 6.7, 'buySum': 0 }] }, ] } }, computed: { }, methods: { add(item) { const current = this.getBuySum(item); this.$set(item, 'buySum', current + 1); this.updateCart(); }, // 减少商品数量 decrease(item) { const current = this.getBuySum(item); if (current <= 0) return; this.$set(item, 'buySum', current - 1); this.updateCart(); }, updateCart() { // 构建购物车数据:只保留 buySum > 0 的商品 const cartItems = []; let totalAmount = 0; // 总件数 let totalPrice = 0; // 总金额 this.tabbar.forEach(category => { category.foods.forEach(food => { const buySum = this.getBuySum(food); if (buySum > 0) { const itemTotal = buySum * parseFloat(food.newMoney); cartItems.push({ id: food.id, title: food.title, buySum, price: parseFloat(food.newMoney), subtotal: itemTotal }); totalAmount += buySum; totalPrice += itemTotal; } }); }); // 发送到父组件 this.$emit('update-cart', { cartItems, // 所有选中的商品明细 totalAmount, // 总数量 totalPrice: parseFloat(totalPrice.toFixed(2)) // 保留两位小数 }); }, // 安全获取 buySum 值 getBuySum(item) { return typeof item.buySum === 'number' && !isNaN(item.buySum) ? item.buySum : 0; }, goShop() { uni.navigateTo({ url: '/pages/shop/shop' }) }, add(item1) { // 安全地递增 if (typeof item1.buySum !== 'number') { item1.buySum = 0; } item1.buySum++; this.$emit('update-buy-sum', this.tabbar); console.log(item1.buySum); }, handleNumberChange(item, val) { item.buySum = val; }, getImg() { return Math.floor(Math.random() * 35); }, // 点击左边的栏目切换 async swichMenu(index) { if (index == this.current) return; this.current = index; // 如果为0,意味着尚未初始化 if (this.menuHeight == 0 || this.menuItemHeight == 0) { await this.getElRect('menu-scroll-view', 'menuHeight'); await this.getElRect('u-tab-item', 'menuItemHeight'); } // 将菜单菜单活动item垂直居中 this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2; }, // 获取一个目标元素的高度 getElRect(elClass, dataVal) { new Promise((resolve, reject) => { const query = uni.createSelectorQuery().in(this); query.select('.' + elClass).fields({ size: true }, res => { // 如果节点尚未生成,res值为null,循环调用执行 if (!res) { setTimeout(() => { this.getElRect(elClass); }, 10); return; } this[dataVal] = res.height; }).exec(); }) } } } </script> <style lang="scss" scoped> .u-wrap { height: calc(100vh); /* #ifdef H5 */ height: calc(100vh - var(--window-top)); /* #endif */ display: flex; flex-direction: column; } .u-menu-wrap { flex: 1; display: flex; overflow: hidden; // border-radius: 20rpx; } .u-tab-view { width: 200rpx; height: 100%; // border-radius: 20rpx; } .u-tab-item { height: 110rpx; background: #fff; box-sizing: border-box; border-radius: 20rpx 20rpx 0 0; display: flex; align-items: center; justify-content: center; font-size: 28rpx; color: #444; font-weight: 400; line-height: 1; } .u-tab-item-active { position: relative; color: #fff; // font-size: 30rpx; // font-weight: 600; background: #E96F50; } .u-tab-view { height: 100%; } .right-box { background-color: rgb(250, 250, 250); } .page-view { padding-left: 16rpx; padding-right: 16rpx; .buy { height: 48rpx; width: 112rpx; color: #fff; border-radius: 24rpx; background-color: #FC7746; } } .class-item { margin-bottom: 30rpx; background-color: #fff; padding: 16rpx; border-radius: 8rpx; } .item-title { font-size: 26rpx; color: $u-main-color; font-weight: bold; } .item-menu-name { font-weight: normal; font-size: 24rpx; color: $u-main-color; } .item-container { display: flex; flex-wrap: wrap; } .thumb-box { width: 33.333333%; display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 20rpx; } .item-menu-image { width: 120rpx; height: 120rpx; } </style> 收不到子组件传来的数据分析问题解决问题
10-28
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值