-
uniapp 学习笔记二十一 路由跳转及产品详情数据渲染
uniapp 学习笔记二十一 路由跳转及产品详情数据渲染
cake.vue
- <view>
- <nav-custom>nav-custom>
- <view class="cont">
- <good-item v-for="(item,index) in glist" :gdata="item">good-item>
- view>
- <view class="fixed flex justify-center bg-fff padding-sm">
- <view v-for="(item,index) in tabArr" :key="index" @tap="handleTab(item)"
- class="flex justify-around align-center">
- <view class="">{{item.name}}view>
- <u-line v-if="index
- view>
- view>
- <u-popup :show="show" mode="left" @close="handleClose">
- <view class="pop-cont">
- <view v-for="(item,index) in cfylist" class="padding-sm u-border-bottom">
- {{item.bname}}
- <view v-if="index==0">
- <view
- @tap="listShow=!listShow"
- :class="['padding-tb-sm',{'u-border-bottom':!listShow}]"
- >
- 口味筛选
- view>
- <u-cell-group v-if="listShow">
- <u-cell
- v-for="(itm,idx) in item.list"
- :title="itm.tname"
- isLink
- @click="handleList(itm,1)"
- >u-cell>
- u-cell-group>
- <view @tap="sceneShow=!sceneShow" class="padding-tb-sm u-border-top">
- 场景筛选
- view>
- <u-cell-group v-if="sceneShow">
- <u-cell
- v-for="(itm,idx) in item.scene"
- :title="itm.tname"
- isLink
- @click="handleList(itm,2)"
- >u-cell>
- u-cell-group>
- view>
- view>
- view>
- u-popup>
- view>
- template>
- <script>
- export default {
- data() {
- return {
- // condition:{ // 商品列表查询条件对象
- // bcid:1,
- // },
- cfylist:[],
- sceneShow:false,
- listShow:false,
- show: false,
- glist: [],
- page: 0,
- tabArr: [{
- name: '分类',
- bcid: '',
- target: ''
- },
- {
- name: '蛋糕',
- bcid: '1',
- target: '/pages/cake'
- },
- {
- name: '面包',
- bcid: '11',
- target: '/pages/bread'
- },
- {
- name: '小食',
- bcid: '6',
- target: '/pages/food'
- },
- {
- name: '购物车',
- bcid: '',
- target: '/pages/cart'
- }
- ]
- }
- },
- computed:{
- num(){
- return this.$store.state.count.num
- },
- condition(){
- return this.$store.state.condition.cond
- }
- },
- methods: {
- /* handleDetail(idx) {
- console.log(idx);
- uni.navigateTo({
- url: '../detail/detail?idx=' + idx
- })
- }, */
- loadData() {
- let skip = this.page * 8
- let wh = JSON.stringify(this.condition)
- let url = `/1.1/classes/goods?where=${wh}&limit=8&skip=${skip}`;
- this.$get(url).then(res => {
- uni.stopPullDownRefresh()
- let {
- results
- } = res
- if (results.length) {
- this.page++
- this.glist = [
- ...this.glist,
- ...res.results
- ]
- return
- }
- uni.showToast({
- title: '这回真没了...',
- icon: 'none'
- })
- })
- },
- handleTab(item) {
- let {
- bcid,
- target
- } = item
- if (bcid) {
- // this.glist = []
- // this.page = 0
- // this.condition.bcid = Number(bcid)
- this.$store.commit('changeCondition',{
- bcid:Number(bcid)
- })
- this.reloadData()
- }
- if (!bcid && !target) {
- this.show = true
- }
- },
- handleClose(){
- this.show = false
- },
- handleList({bid,tid},type){
- // 口味场景筛选
- // console.log(typeof bid);
- let obj = {bcid:bid}
- type === 1 ? obj.fid=tid : obj.sid=tid
- this.$store.commit('changeCondition',obj)
- this.reloadData()
- },
- reloadData(){ //刷新页面数据
- this.glist = []
- this.page = 0
- this.loadData()
- }
- },
- onLoad() {
- this.loadData()
- this.$get('/1.1/classes/classify').then(res=>{
- console.log(res)
- this.cfylist = res.results
- })
- },
- onReachBottom() {
- console.log('触底了');
- this.loadData()
- },
- onPullDownRefresh() {
- this.glist = []
- this.page = 0
- this.loadData()
- }
- }
- script>
- <style lang="scss">
- page {
- padding-top: 100upx;
- padding-bottom: 120upx;
- }
- .cont {
- display: flex;
- flex-wrap: wrap;
- padding: 15upx;
- justify-content: space-between;
- }
- .fixed {
- position: fixed;
- bottom: 0;
- left: 0;
- width: 100%;
- box-shadow: 0 0 10upx 2upx rgba(0, 0, 0, 0.2);
- }
- .cu-bar{
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- z-index: 2;
- }
- .pop-cont{
- width: 400upx;
- margin-top: 200upx;
- }
- style>
detail.vue
- <view>
- <swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
- <swiper-item>
- <view class="swiper-item">
- <image :src="detail.img" mode="widthFix">image>
- view>
- swiper-item>
- swiper>
- <view class="flex justify-around">
- <view
- v-for="(item,index) in detail.list"
- :key="index"
- :class="['text-center padding-sm tab',{active:tabIdx}]"
- @tap="tabIdx = index"
- >
- <view class="">{{item.spec}}view>
- <view class="">{{item.weight}}view>
- <view class="">{{item.edible}}view>
- view>
- view>
- <view class="padding fs-28 u-border-bottom">
- ¥{{detail.list[tabIdx].price}}
- view>
- <view class="padding fs-28 u-border-bottom">
- {{detail.list[tabIdx].ahead}}
- <text class="margin-lr">{{detail.list[tabIdx].size}}text>
- {{detail.list[tabIdx].edible}}
- view>
- <view class="padding fs-28 u-border-bottom">
- {{detail.list[tabIdx].fittings}}
- view>
- <view class="flex justify-around fixed padding-tb-sm">
- <button class="cu-btn bg-brown lg">加入购物车button>
- <button class="cu-btn bg-yellow lg">立即购买button>
- view>
- view>
- <script>
- export default {
- data() {
- return {
- tabIdx:0,
- detail:null
- }
- },
- methods: {
- },
- onLoad() {
- uni.getStorage({
- key:'detail',
- success:(res)=>{
- // console.log(res.data);
- this.detail = res.data
- }
- })
- },
- onShow() {
- console.log('onShow 生命周期 执行');
- },
- onHide() {
- console.log('onHide 生命周期 执行');
- },
- onLaunch() {
- console.log('onLaunch 生命周期 执行');
- }
- }
- script>
- <style>
- .banner{
- height: 600upx;
- .swiper-item{
- height: 600upx;
- }
- }
- style>
goods-item.vue
- <view class="cake-item">
- <image @tap="handleDetail" class="poster" :src="gdata.img" mode="">image>
- <view class="info-cont">
- <view class="info flex align-center justify-between">
- <view class="">
- <view class="fs-28">
- {{gdata.name}}
- view>
- <view class="fs-16">
- {{gdata.french}}
- view>
- view>
- <view class="cart-btn margin-right-sm">
- <text class="iconfont icon-caigou">text>
- view>
- view>
- <view class="fs-18">
- <text class="fs-14">Ytext>
- {{gdata.price}}
- view>
- view>
- view>
- <script>
- export default {
- name:"goods-item",
- props:['gdata'],
- data() {
- return {
- };
- },
- methods:{
- handleDetail() {
- uni.setStorage({
- key:'detail',
- data:this.gdata,
- success: () => {
- uni.navigateTo({
- url: '/pages/detail/detail'
- })
- }
- })
- },
- }
- }
- script>
- <style lang="scss">
- .cake-item{
- width: 350upx;
- .poster{
- height: 350upx;
- background-color: #f5f5f5;
- }
- .fs-28{
- font-size: 28upx;
- margin-top: 24upx;
- }
- .fs-16{
- font-size: 16upx;
- margin: 14upx 0;
- }
- .fs-18{
- font-size: 18upx;
- margin-bottom: 22upx;
- }
- .cart-btn{
- width: 60upx;
- height: 60upx;
- border-radius: 50%;
- background-color: #ffe32a;
- text-align: center;
- line-height: 60upx;
- }
- }
- style>
-
相关阅读:
EasyX图形库note4,动画及键盘交互
Redis持久化
设计模式深入解析与实例应用
自动控制原理 - 2 控制系统的数学模型 节2.7-2.10
javascript数据类型
教你java中如何判断代码中异步操作是否完成
Buuctf [ACTF2020 新生赛]BackupFile1 WP解析
嗯，倒数日，开发了一个多月的倒数日 桌面应用 上线啦，简单暴力的显示方式，专注于显眼
工程化分类面试题
C语言每日一题(9)：跳水比赛猜名次
- 原文地址：https://blog.csdn.net/gixome/article/details/126621296
- 最新文章
-
沪漂五周年了：我越来越迷茫了
Agentic Skill Routing 实战：别再把所有 Skill 塞进 AI Agent 上下文
MySQL-Seconds_behind_master的精度误差
[MAF预定义ChatClient中间件-03]CachingChatClient——利用缓存省钱省时间
AI的至暗历史：从万众期待到被政府撤资，AI的两次死亡徘徊
Agent OS ：五种驯服不确定性的范式
PortSwigger SQL注入LAB11
数据库即时编译JIT
[Begin]AI Learn Data Day 0
深度学习进阶（二十七）现代 LLM 的核心架构设计其二：SwiGLU