Uniapp笔记(四)uniapp语法3

一、商品详情

1、从商品列表页跳转到商品详情页

  • 在商品列表的项中绑定单击事件,并传递商品id值

<view class="goods-item" v-for="(item,index) in goodsList" :key="index" @click="goGoodsDetail(item.goods_id)">
</view>
  • 在methods选项中定义goGoodsDetail方法实现跳转到商品详情页

goGoodsDetail(goods_id){uni.navigateTo({url:`/pages/goodsdetail/index?goods_id=${goods_id}`})
}

2、获取商品详情数据

  • 在data中定义商品详情的数据

data() {return {goods_item:{}}
}
  • onLoad 中获取商品的 Id,并调用请求商品详情的方法

onLoad(options) {let gid=options.goods_idthis.getGoodsById(gid)
}
  • methods 中声明 getGoodsById 方法:

methods: {async getGoodsById(goods_id){let result=await uni.$api.get('/goods/detail',{goods_id:goods_id})this.goods_item=result.data.message}
},

3、渲染商品轮播图区域

  • 渲染轮播图区域

<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper"><swiper-item v-for="(item,index) in goods_item.pics" :key="index"><image :src="item.pics_big"></image></swiper-item>
</swiper>
<style lang="scss">.swiper{height: 750rpx;image{width: 100%;height: 100%;}}
</style>
  • 完成轮播图预览功能

为轮播图中的 image 图片绑定 click 事件处理函数:

<swiper-item v-for="(item,index) in goods_item.pics" :key="index"><image :src="item.pics_big" @click="perview(index)"></image>
</swiper-item>

methods 中定义 preview 事件处理函数:

perview(index){uni.previewImage({current:index,urls:this.goods_item.pics.map(item=>item.pics_big)})
}

4、渲染商品信息区域

<view class="goods-info-box"><!-- 商品价格 --><view class="price">¥{{goods_item.goods_price}}</view><!-- 信息主体区域 --><view class="goods-info-body"><!-- 商品名称 --><view class="goods-name">{{goods_item.goods_name}}</view><!-- 收藏 --><view class="favi"><uni-icons type="star" size="18" color="gray"></uni-icons><text>收藏</text></view></view><!-- 运费 --><view class="yf">快递:免运费</view>
</view>
<rich-text :nodes="goods_item.goods_introduce"></rich-text>
.goods-info-box {padding: 10px;padding-right: 0;.price {color: #c00000;font-size: 18px;margin: 10px 0;}.goods-info-body {display: flex;justify-content: space-between;.goods-name {font-size: 13px;padding-right: 10px;}// 收藏区域.favi {width: 120px;font-size: 12px;display: flex;flex-direction: column;justify-content: center;align-items: center;border-left: 1px solid #efefef;color: gray;}}// 运费.yf {margin: 10px 0;font-size: 12px;color: gray;}}

5、渲染详情页底部的商品导航区域

在 data 中,通过 optionsbuttonGroup 两个数组,来声明商品导航组件的按钮配置对象

data(){return{options: [{icon: 'shop',text: '店铺'}, {icon: 'cart',text: '购物车',info: 2}],// 右侧按钮组的配置对象buttonGroup: [{text: '加入购物车',backgroundColor: '#ff0000',color: '#fff'},{text: '立即购买',backgroundColor: '#ffa200',color: '#fff'}]}
}

在页面中使用 uni-goods-nav 商品导航组件:

<view class="goods_nav"><uni-goods-nav :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
</view>

美化商品导航组件,使之固定在页面最底部:

.container{padding-bottom: 100rpx;
}
.goods_nav {// 为商品导航组件添加固定定位position: fixed;bottom: 0;left: 0;
}

二、加入购物车

1、下载vuex

npm i vuex@3.6.2

2、配置Vuex

  • 在src下创建store文件夹,在store文件夹下创建index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store=new Vuex.Store({modules:{}
})
export default store
  • 在main.js将store对象挂载到Vue的实例上

import store from '@/store/index.js'
const app = new Vue({...App,store
})
app.$mount()

3、创建购物车模块

  • 在store/modules目录下创建shopcart.js文件

export default{namespaced:true,state:{shopcartList:[]},mutations:{},getters:{}
}
  • store/index.js 模块中,导入并挂载购物车的 vuex 模块

import Vue from 'vue'
import Vuex from 'vuex'
import shopart from '@/store/modules/shopcart.js'
Vue.use(Vuex)
const store=new Vuex.Store({modules:{shopart}
})
export default store

4、在商品详情中使用store中的数据

import {createNamespacedHelpers} from 'vuex'
const {mapState:mapShopcartState}=createNamespacedHelpers('shopart')
export default {computed:{...mapShopcartState(['shopcartList'])}
}

5、实现加入购物车的功能

  • 编写一个加入购物车的方法的mutations方法addToShopcart方法

export default{namespaced:true,state:{shopcartList:[]},mutations:{addToShopart(state,goods){const result=state.shopcartList.find(item=>item.goods_id==goods.goods_id)if(!result){state.shopcartList.push(goods)}else{goods.goods_count++}}},getters:{}
}
  • 在商品详情页面中,通过 mapMutations 这个辅助方法,把 vuex 中 shopcart 模块下的 addToShopart 方法映射到当前页面:

import {createNamespacedHelpers} from 'vuex'
const {mapState:mapShopcartState,mapMutations:mapShopcartMutations}=createNamespacedHelpers('shopart')
export default{methods:{...mapShopcartMutations(['addToShopart']),}
}
  • 为商品导航组件 uni-goods-nav 绑定 @buttonClick="buttonClick" 事件处理函数:

buttonClick(e){if(e.content.text=='加入购物车'){const goods = {goods_id: this.goods_item.goods_id,       goods_name: this.goods_item.goods_name,   goods_price: this.goods_item.goods_price, goods_count: 1,                          goods_small_logo: this.goods_item.goods_small_logo, goods_state: true                         }this.addToShopart(goods)}
}

6、动态统计购物车中商品的总数量

getters 节点下定义一个 total 方法,用来统计购物车中商品的总数量:

getters:{total(state){return state.shopcartList.reduce((prev,cur)=>prev+cur.goods_count,0)}
}
  • 导入 mapGetters 方法并进行使用

import {createNamespacedHelpers} from 'vuex'
const {mapGetters:mapShopcartGetters}=createNamespacedHelpers('shopart')
export default{computed:{...mapShopcartGetters(['total'])},
}
  • 通过 watch 侦听器,监听计算属性 total 值的变化,从而动态为购物车按钮的徽标赋值

watch:{total:{handler(newval){let result=this.options.find(item=>item.text==="购物车")if(result){result.info=newval}},immediate:true}
},

7、持久化购物车中的商品

修改 mutations 节点中的 addToCart 方法,在处理完商品信息后,调用 saveToStorage 方法:

mutations:{addToShopart(state,goods){const result=state.shopcartList.find(item=>item.goods_id==goods.goods_id)if(!result){state.shopcartList.push(goods)}else{goods.goods_count++}uni.setStorageSync('cart',JSON.stringify(state.shopcartList))},},

修改 shopcart.js 模块中的 state 函数,读取本地存储的购物车数据,对 shopcartList 数组进行初始化

state:{shopcartList:JSON.parse(uni.getStorageSync('cart')||'[]')
}

三、购物车列表

1、购物车列表

<template><view class="container"><view v-for="(goods,index) in shopcartList" :key="index" class="goods-item"><view class="goods-item-left"><radio checked color="#C00000"></radio><image :src="goods.goods_small_logo" class="goods-pic"></image></view><view class="goods-item-right"><view class="goods-name">{{goods.goods_name}}</view><!-- 商品价格 --><view class="goods-price">¥{{goods.goods_price}}</view><!-- 商品数量 --><uni-number-box :min="1"></uni-number-box></view></view></view>
</template><script>import {createNamespacedHelpers} from 'vuex'const {mapState: mapShopcartState,mapMutations: mapShopcartMutations,mapGetters: mapShopcartGetters} = createNamespacedHelpers('shopart')export default {data() {return {}},methods: {},computed: {...mapShopcartState(['shopcartList'])}}
</script><style lang="scss">.container {.goods-item {display: flex;margin: 20rpx 10rpx;.goods-item-left {margin-right: 5px;display: flex;justify-content: space-between;align-items: center;.goods-pic {width: 100px;height: 100px;display: block;}}.goods-item-right {.goods-price{color: #C00000;}}}}
</style>

2、修改购物车商品的勾选状态

  • 给shopcart.js模块中的mutations选项中添加修改购物车状态的方法

mutations:{updateShopcartState(state,goods){const result=state.shopcartList.find(item=>item.goods_id==goods.goods_id)if(result){result.goods_state=!goods.goods_state}uni.setStorageSync('cart',JSON.stringify(state.shopcartList))}
},
  • 在购物车列表页面中进行访问

methods: {...mapShopcartMutations(['updateShopcartState']),radioChange(goods){this.updateShopcartState(goods)}
},

3、修改购物车商品数量的方法

给shopcart.js模块中的mutations选项中添加修改s购物车数量的方法的方法

mutations:{updateShopcartNum(state,goods){const result=state.shopcartList.find(item=>item.goods_id==goods.goods_id)if(result){result.goods_count=goods.goods_count}uni.setStorageSync('cart',JSON.stringify(state.shopcartList))}
},
  • 在uni-number-box绑定change事件

<uni-number-box :min="1" :value="goods.goods_count" @change="numChange($event,goods)"></uni-number-box>
  • 在购物车列表页面中进行访问

methods: {...mapShopcartMutations(['updateShopcartState','updateShopcartNum']),radioChange(goods){this.updateShopcartState(goods)},numChange(e,val){this.updateShopcartNum({goods_id:val.goods_id,goods_count:e})}
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/63719.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

新版Mongodb(6.0以上)找不到mongo.exe

安装目录下/bin目录中&#xff0c;没有mongo.exe文件&#xff0c;只有mongod和mongos&#xff0c;以及一个powershell命令脚本。 原因在于&#xff0c;mongodb6.0以后做出了重大改变&#xff0c;mongodb已经不再默认为你安装shell工具&#xff0c;因此需要安装一个额外的shell…

FFmpeg5.0源码阅读——FFmpeg大体框架(以GIF转码为示例)

摘要&#xff1a;前一段时间熟悉了下FFmpeg主流程源码实现&#xff0c;对FFmpeg的整体框架有了个大概的认识&#xff0c;因此在此做一个笔记&#xff0c;希望以比较容易理解的文字描述FFmpeg本身的结构&#xff0c;加深对FFmpeg的框架进行梳理加深理解&#xff0c;如果文章中有…

基于负载均衡的在线OJ实战项目

前言&#xff1a; 该篇讲述了实现基于负载均衡式的在线oj&#xff0c;即类似在线编程做题网站一样&#xff0c;文章尽可能详细讲述细节即实现&#xff0c;便于大家了解学习。 文章将采用单篇不分段形式&#xff08;ps&#xff1a;切着麻烦&#xff09;&#xff0c;附图文&#…

javacv 基础04-读取mp4,avi等视频文件并截图保存图片到本地

javacv 读取mp4,avi等视频文件并截图保存图片到本地 代码如下&#xff1a; package com.example.javacvstudy;import org.bytedeco.javacv.FFmpegFrameGrabber; import org.bytedeco.javacv.Frame; import org.bytedeco.javacv.Java2DFrameConverter;import javax.imageio.Im…

Macos 10.13.2安装eclipse

eclipse for php 安装2021-12最后版本4.22 2021-12 R | Eclipse Packages jdk17 x64 dmg安装包,要安装jdk这个才能运行 Java Downloads | Oracle

Prompt2Model: Generating Deployable Models from Natural Language Instructions

本文是LLM系列文章&#xff0c;针对《 Prompt2Model: Generating Deployable Models from Natural Language Instructions》的翻译。 Prompt2Model&#xff1a;从自然语言指令生成可部署模型 摘要1 引言2 Prompt2Model框架3 参考实现4 实验设置5 实验结果6 讨论与结论不足道德…

wangluobiancheng

UDP send: receive: TCP

函数式编程(四)Stream流使用

一、概述 在使用stream之前&#xff0c;先理解Optional 。 Optional是Java 8引入的一个容器类&#xff0c;用于处理可能为空的值。它提供了一种优雅的方式来处理可能存在或不存在的值&#xff0c;避免了空指针异常。 Optional的主要特点如下&#xff1a; 可能为空&#xff…

朝夕光年游戏自动化测试实践

朝夕光年是面向全球用户与开发者的游戏研发与发行业务品牌&#xff0c;致力于服务全球玩家&#xff0c;帮助玩家在令人惊叹的虚拟世界中一起玩耍与创造。 在游戏的研发过程中&#xff0c;游戏自动化一直是开展难度较大的工程&#xff0c;具体包括机房机架、设备调度、软件框架、…

IntelliJ IDEA 简介

IntelliJ IDEA 简介 IntelliJ IDEA&#xff08;简称 IDEA&#xff09;是一款由 JetBrains 公司开发的强大且广受欢迎的集成开发环境&#xff08;IDE&#xff09;&#xff0c;主要用于Java开发&#xff0c;但也支持其他编程语言和技术栈的开发。作为一款功能丰富、高效的IDE&am…

理解底层— —Golang的log库,二开实现自定义Logger

理解底层— —Golang的log库&#xff0c;实现自定义Logger 1 分析实现思路 基于golang中自带的log库实现&#xff1a;对日志实现设置日志级别&#xff0c;每天生成一个文件&#xff0c;同时添加上前缀以及展示文件名等 日志级别&#xff0c;通过添加prefix&#xff1a;[INFO]、…

学生信息管理系统MIS(前端)

改造HTML文件 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>学生信息管理系统MIS</title><!-- link在HTML文件中,引入外部的css文件 rel的值是固定写法,stylesheet样式表href用来指定样式表的位置--><lin…

【LeetCode】剑指 Offer <二刷>(4)

目录 题目&#xff1a;剑指 Offer 09. 用两个栈实现队列 - 力扣&#xff08;LeetCode&#xff09; 题目的接口&#xff1a; 解题思路&#xff1a; 代码&#xff1a; 过啦&#xff01;&#xff01;&#xff01; 题目&#xff1a;剑指 Offer 10- I. 斐波那契数列 - 力扣&am…

MySQL 5种索引应用

文章目录 简介一、聚集索引二、唯一索引三、聚集索引和唯一索引对比四、非唯一&#xff08;普通&#xff09;索引五、全文索引六、组合索引七、索引验证总结 简介 在本篇文章中&#xff0c;我们将学习MySQL中5种不同类型的索引及其应用场景&#xff0c;以及它们的优缺点。 一…

WIFI与BT的PCB布局布线注意事项

1、模块整体布局时&#xff0c;WIFI模组要尽量远离DDR、HDMI、USB、LCD电路以及喇叭等易干扰模块或连接座&#xff1b; 2、晶体电路布局需要优先考虑&#xff0c;布局时应与芯片在同一层并尽量靠近放置以避免打过孔&#xff0c;晶体走线尽可能的短&#xff0c;远离干扰源&…

【Ajax】发送跨域的POST请求时,浏览器会先发送一次OPTIONS请求,然后才发送原本的POST请求

当发送跨域的POST请求时&#xff0c;浏览器会先发送一次OPTIONS请求&#xff0c;这是因为浏览器的同源策略。OPTIONS请求被称为预检请求(pre-flight request)&#xff0c;它是CORS(跨源资源共享)机制中的一部分。 预检请求的目的是为了确保实际请求&#xff08;例如POST、PUT等…

【MetaAI】2023年MetaAI发布的开源模型和工具

MetaAI开源模型和工具 MetaAILlamaSegment AnythingDINOv2ImageBindMMSLimaVoiceboxMusicGenLlama 2AudioCraftSeamlessM4T MetaAI Meta 首席执行官扎克伯格表示&#xff0c;与其他研究者分享 Meta 公司开发的模型可以帮助该公司促进创新、发现安全漏洞和降低成本。他今年 4 月…

概念解析 | 量子机器学习:将量子力学与人工智能的奇妙融合

注1:本文系“概念解析”系列之一,致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是:量子机器学习。 量子机器学习:将量子力学与人工智能的奇妙融合 量子增强机器学习:量子经典混合卷积神经网络 量子机器学习是量子计算和机器学习的结合,它利用量子力学的特…

Opencv-C++笔记 (18) : 轮廓和凸包

文章目录 一、轮廓findContours发现轮廓drawContours绘制轮廓代码 二.几何及特性概括——凸包(Convex Hull)凸包概念凸包扫描算法介绍——Graham扫描算法 相关API介绍程序示例轮廓集合及特性性概括——轮廓周围绘制矩形框和圆形相关理论介绍轮廓周围绘制矩形 -API绘制步骤程序实…

Python数据分析案例30——中国高票房电影分析(爬虫获取数据及分析可视化全流程)

案例背景 最近总看到《消失的她》票房多少多少&#xff0c;《孤注一掷》票房又破了多少多少..... 于是我就想自己爬虫一下获取中国高票房的电影数据&#xff0c;然后分析一下。 数据来源于淘票票&#xff1a;影片总票房排行榜 (maoyan.com) 爬它就行。 代码实现 首先爬虫获…