uniapp 电商app 商品列表组件及开发中的规范问题汇总

刺骨的言语ヽ痛彻心扉 2021-07-25 12:44 902阅读 0赞

#### 商品列表组件具体代码 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]

<template>
    	<view>
    		<view class="solids-bottom padding-xs flex align-center" v-if="showTitle">
    			<view class="flex-sub text-center">
    				<view class="text-xl padding">
    					<text class="text-black text-bold">{ { title}}</text>
    				</view>
    			</view>
    		</view>
    		<view class="margin-bottom zaiui-goods-list-box show" >
    			<view class="flex flex-wrap ">
    				<view >
    					<block v-for="(item,index) in goodsData" :key="'item'+index">
    						<view class="goods" @tap="listTap(item)">
    							<view class="goods-img image-200" >
    								<image :src="item.pictUrl" lazy-load style="width:100%;"/>
    							</view>
    							<view class="goods-text" >
    								<view class="text-cut-2 text-black">{ { item.title}}</view>
    								<view class="flex-sub" v-if="item.couponInfo">
    									<text class="cu-tag light bg-red radius sm ">{ { item.couponInfo}}</text>
    								</view>
    								
    								<view class="margin-top-xs">
    									<view>
    										<view class="flex-sub flex justify-between" >
    											<text class="text-price text-delete">{ { item.reservePrice}}</text>
    											<text class="text-price text-red text-xl text-left">{ { item.zkFinalPrice}}</text>
    										</view>
    										<view class="quan">
    											<text>销量{ { item.tkTotalSales}}</text>
    											<view class="image">
    												<text class="text-price text-price-after">{ { item.couponAmount ? item.couponAmount : 0.00}}</text>
    												<image src="../../../static/images/goods/quanxiao.png" mode="widthFix"></image>
    											</view>
    										</view>
    									</view>
    								</view>
    							</view>
    						</view>
    					</block>
    				</view>
    			</view>
    		</view>
    		<view class="cu-load bg-white" :class="!isLoad?'loading':'over'"></view>
    	</view>
    </template>
    
    <script>
    	import { requestTaokeList} from "@/static/api/taoke-controller.js"
    	export default { 
    		name: 'goods-list',
    		props: { 
    			show: { 
    				type: Boolean,
    				default: true
    			},
    			cate:{ 
    				type:Number,
    				default:16
    			},
    			loadDataEventCount:{ 
    				type:Number,
    				default:0
    			},
    			title:{ 
    				type:String,
    				default:'为您推荐'
    			},
    			showTitle:{ 
    				type:Boolean,
    				default:true
    			}
    		},
    		watch: { 
    			loadDataEventCount() { 
    				this.setReachBottom();
    			}
    		},
    		data(){ 
    			return{ 
    				goodsData:[],
    				pageNo:0,
    				isLoad:false
    			}
    		},
    		created(){ 
    			this.getGoodsData();
    		},
    		methods: { 
    			listTap(data) { 
    				uni.navigateTo({ 
    					url: '/pages/goods/goods?content='+encodeURIComponent(JSON.stringify(data))
    				});
    			},
    			getGoodsData(){ 
    				this.isLoad = false
    				requestTaokeList(this.cate,this.pageNo).then(res=>{ 
    					if(res.resultList && res.resultList.length>0){ 
    						this.goodsData = this.goodsData.concat(res.resultList)
    					}else{ 
    						this.isLoad = true
    					}
    				}).catch(res =>{ 
    					this.isLoad = true
    				})
    			},
    			//触底了
    			setReachBottom() { 
    				this.pageNo++;
    				this.getGoodsData();
    			}
    		}
    	}
    </script>
    <style lang="scss" scoped>
    	@import "../../../static/css/goodslist.scss";
    </style>

### 开发中的规范问题汇总 ###

1.  命名规范问题  
    i. 从数据库获取来的数据：  
    如果是对象：则用 `xxxData`命名  
    如果是数组或列表：则用`xxxList`命名  
    如果是JSON：则用`xxxJson`命名  
    ii.本地创建的数据  
    如果是对象：则用`xxxObj`命名  
    如果是数组或列表：则用`xxxArr` 或`xxxArray`命名  
    如果是JSON：则用`xxxMap`命名  
    **汇总成一句话就是：约定大于配置，配置大于开发**
2.  子组件传值问题：  
    `<moneylist :type="'image'">`  
    `<moneylist :type="image">`  
    以上的两种情况，最好是使用第二种，如果传递的属性为一个字符串（上图中的`image`），则可以去掉单引号’‘直接书写，而且不需要属性名称前面添加冒号:  
    总结：如果父组件往子组件中传值`props`,  
    **如果传递的属性值为字符串**，则可以：  
    i.去掉属性名称前面的：，动态绑定的含义  
    ii.属性值不需要添加’'单引号进行包裹
3.  对于不经常改动的数据，如果放到了vuex中，则不能每次调用获取函数，都往vuex中commit数据。这样会导致页面出现逻辑错误。一般都是存储一遍后，直接通过`this.$store.state.xxx.xxx`或者`this.$store.getters.xxx`的方式进行获取即可。
4.  代码冗余及无意义的代码问题  
    虽然我看不懂为何这么做，但还是将代码贴一下，积累后会看得懂的。。。。（迷之自信）

const goodsCate = { 
      state: { 
        goodsCate: [],
    	cateMap:{ },
    	parentKey:"root"
      },
      mutations: { 
        SET_GOODSCATE: (state, goodsCate) => { 
          state.goodsCate = goodsCate
        },
    	SET_GOODSCATEBYID:(state,cateArray)=>{ 
    		if(cateArray && cateArray.length>0){ 
    			if(cateArray[0].parentId){ 
    				state.cateMap[cateArray[0].parentId] = cateArray
    			}else{ 
    				state.cateMap[state.parentKey] = cateArray
    			}
    		}
    	}
      },
      getters:{ 
    	  GET_GOODSCATE: state => { 
    		  return state.goodsCate
    	  },
    	  GET_GOODSCATEBYID:state=> parentId => { 
    		  if(parentId){ 
    		  	return state.cateMap[parentId]
    		  }else{ 
    		  	return state.cateMap[state.parentKey]
    		  }
    	  }
      }
    }
    export default goodsCate

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/389690c29eef4327bbf69d257c2b9d38.png