uniapp 电商小程序商品详情页及SKU的处理

落日映苍穹つ 2021-07-25 15:45 2309阅读 0赞

最近在接触电商小程序，是通过Uniapp开发的。  
结果发现里面还是有很多的知识点的，基本上可以看作是数据格式的转化。

下面一部分一部分的详细介绍：

## 标题部分——page.json ##

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

### page.json ###

{ 
    	"path": "pages/product/product",
    	"style": { 
    		"navigationBarTitleText": "详情展示",
    		"app-plus": { 
    			"titleNView": { 
    				"type": "transparent"
    			}
    		}
    	}
    }

## 商品轮播图部分——页面 ##

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

### 轮播图html代码 ###

<view class="carousel">
    //indicator-dots 轮播图下方的小圆点
    //circular 轮播图之间是否无缝衔接，true代表是
    //duration 轮播图切换的时间间隔,无论是否是自动切换，都是有这个切换时间间隔的
    	<swiper indicator-dots circular=true duration="400">
    	//swiper里面必须要嵌套swiper-item
    		<swiper-item class="swiper-item" v-for="(item,index) in detail.medias" :key="index">
    		// detail.medias是一个数组，数组中是一个个的对象，item就是每一个的对象,index是每一个数组的索引
    		// item.mediaType 分为两种，一种是图片 0 一种是视频 1
    			<view class="image-wrapper" v-if="item.mediaType === 0">
    			// 图片的模式mode aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
    				<image
    					:src="item.mediaUrl" 
    					class="loaded" 
    					mode="aspectFill"
    				></image>
    			</view>
    			// 视频有个参数就是 Object-fit 当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖
    			<view class="image-wrapper" v-else>
    				<video
    				style="width: 100%;height: 100%;"
    				object-fit="cover"
    					:src="item.mediaUrl" 
    				></video>
    			</view>
    		</swiper-item>
    	</swiper>
    </view>

### detail的数据格式——轮播图部分 ###

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

### 商品信息部分——页面 ###

![在这里插入图片描述][20200714103143618.png]

<view>
    	<text class="title">{ { detail.itemName}}</text>
    	// button open-type属性，如果值为share，则为分享，可以弹出分享页面
    	<button class="share" type="primary" open-type="share">
    		<text class="shaer-txt">分享 </text>
    		<text style="margin-top: 2px;margin-left: 6px;" class="icon iconfont icon-fenxiang2 shaer-txt"></text> 
    	</button>
    </view>
    <view class="bot-row" style="display: flex;justify-content: space-between;">
    	<text>销量: { { detail.sales}}</text>
    </view>

button 的分享功能  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]

### 商品折扣部分——页面 ###

![在这里插入图片描述][20200714103806869.png]

<view class="c-list" style="margin-top: 20upx;" v-if="detail.discountVo">
    	<view class="" style="display: flex;justify-content: space-between;">
    		<view style="position: relative;background-color:#F04A44;width: 240upx;text-align: center;height: 80upx;line-height: 80upx;padding-right: 28upx;color: #fff;font-weight: bold;">
    			满减活动
    			<view class="mask1" style="position: absolute;right: 0;top: 0;"></view>
    		</view>	
    		<view style="width: 100%;">
    		// 此处的detail.discountVo.discountMap 是一个对象，item是对象的属性值，index是对象的属性名
    			<view v-for="(item,index) in detail.discountVo.discountMap" :key='index' class="active-title">
    				满{ { index}}件{ { item}}折
    			</view>
    		</view>
    	</view>
    </view>
    
    css部分
    .mask1
    	{ 
    	    height: 0;
    	    width: 48upx;
    	    border-bottom: 80upx solid #fff;
    	    border-left: 44upx solid transparent;
    	}

### detail数据格式——折扣部分 ###

![在这里插入图片描述][20200714104118233.png]

### 商品图文详情——页面 ###

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

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

### detail数据格式——图文详情 ###

![在这里插入图片描述][20200714104433883.png]

最最重要的难点放在最后，就是SKU部分的处理

### 商品购买类型——页面 ###

![在这里插入图片描述][20200714104912420.png]

<view class="c-list" style="margin-top: 20upx;">
    	<view class="c-row b-b" @click="toggleSpec">
    		<text class="tit">购买类型</text>
    		<view class="con">
    			<text class="selected-text">
    				{ { specSelected.itemTitle || ""}}
    			</text>
    		</view>
    		<text class="icon iconfont icon-you-copy"></text>
    	</view>
    </view>
    
    //js部分
    //规格弹窗开关，此部分控制规格属性弹窗的显示与隐藏，specClass是样式，分为三种，show:展示 hide:从展示到隐藏，有过渡动画，none:隐藏。type=1代表是从规格页点击了确定按钮，会进入到创建订单页面
    toggleSpec(type) { 
    	if(this.specClass === 'show'){ 
    		if(type == 1 && this.specSelected.number==0){ 
    			return;
    		}
    		this.specClass = 'hide';
    		setTimeout(() => { 
    			this.specClass = 'none';
    		}, 250);
    	}else if(this.specClass === 'none'){ 
    		this.specClass = 'show';
    	}
    	if(type == 1){ 
    		if(this.clcikCart){ 
    			this.addCart();
    		}else{ 
    			this.buy();
    		}
    	}
    },

### 规格弹窗部分——页面 ###

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

<view 
    	class="popup spec" 
    	:class="specClass"
    	@touchmove.stop.prevent="stopPrevent"
    	@click="toggleSpec"
    >
    	
    	<view class="mask"></view>
    	<view class="layer attr-content" @click.stop="stopPrevent">
    	// stock 库存量
    		<view class="a-t" v-if='specSelected.stock'>
    		// 选中的属性对应的商品图
    			<image :src="specSelected.imageUrl"></image>
    			<view class="right">
    			// 商品的实际价格
    				<text class="price">¥{ { specSelected.retailPrice || ''}}</text>
    				//商品的库存
    				<text class="stock">库存：{ { specSelected.stock || ''}}件</text>
    				<view class="selected">
    				// 商品选中的属性集合
    					已选：{ { specSelected.itemTitle}}
    				</view>
    			</view>
    		</view>
    		// detail.attributeList 是一个对象，格式如下：{”颜色“:[{"name":"红色","img":"图片地址",checked:false}],”尺码“:[{"name":"L","img":"图片地址",checked:false}]}
    		// for 循环中 attr是属性值对应的数组，index是属性名称，也就是一级属性
    		<view class="attr-list" v-for="(attr,index) in detail.attributeList" :key="index">
    			<text>{ { index}}</text>
    			<view class="item-list">
    				<text 
    				// sku 数据格式是：{"name":"红色","img":"图片地址",checked:false} skuIndex是数组索引值
    					v-for="(sku, skuIndex) in attr" 
    					:key="skuIndex"
    					:class="{selected: sku.checkd}"
    					// 选择属性 参数分别是：一级属性 二级属性的索引 图片
    					@click="selectSku(index, skuIndex, sku.img)"
    				>
    					{ { sku.name}}
    				</text>	
    			</view>
    		</view>
    		<view class="p-num">
    			<text>购买数量</text>
    			<uni-number-box
    				v-if="specSelected.number"
    				class="step"
    				:min="1" 
    				:max="specSelected.stock || 100"
    				:value="specSelected.number>specSelected.stock?specSelected.stock:specSelected.number"
    				:isMax="specSelected.number>=specSelected.stock?true:false"
    				:isMin="specSelected.number===1"
    				:index="specSelected.id"
    				@eventChange="numberChange"
    			></uni-number-box>
    		</view>
    		<button class="btn" @click="toggleSpec(1)">确定</button>
    	</view>
    </view>

### detail数据格式——sku部分 ###

![在这里插入图片描述][20200714110556480.png]  
看一下这个数据格式，是一个对象，里面的属性名是一级属性，格式是数组，数组的每一项可能是对象，也可能是字符串。对象里面还有属性名为二级属性，属性值是图片。为了统一需要对格式进行转化。  
要求统一的格式如下：

{ 
    	name:"属性名,img:"图片地址"
    }

转化格式方式如下：

// JSON字符串转化成对象
    let attrList = JSON.parse(attributeList);
    //利用对象的for in 循环，key为属性名 Obj[key]为属性值
    for(let key in attrList){ 
    	let attrArr = attrList[key];
    	//此时的attrArr 是数组,利用数组的for 循环
    	for (let i = 0;i<attrArr.length;i++){ 
    		let item = attrArr[i];
    		if(typeof item === 'string'){ 
    			//如果是字符串，则就是类似于上图中的尺码属性
    			attrArr[i] = { 
    				name:item,
    				img:null,
    				//此处为了能够实现选中属性，给每一个二级属性添加一个值为checed，如果有点击，则设置checked为true,这样可以通过checed的值改变样式，及同姬选中的sku值
    				checked:false	
    			}
    		}else{ 
    			attrArr[i] = { 
    				name:Object.keys(item)[0],
    				img:attrArr[i][Object.keys(item)[0]],
    				checked:false
    			}	
    		}
    	}
    }
    //通过for in 循环，会将对象中所有值都进行处理，最终赋值给detail新的数据格式
    this.detail = attrList;

知识点：  
Object.keys(对象)：是将对象中的属性名提取出来，组成一个数组。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 7]  
选择属性的函数如下：

selectSku(type,index,img){ 
    	//type 一级属性 index 二级属性的索引 img 二级属性的图片
    	if(img){ 
    		this.specImg = img;
    	}
    	//{"颜色":[{"name":"红色","img":"图片地址",checked:false},{"name":"红色","img":"图片地址",checked:false}]}
    	// 一个对象中的一级属性只能有一个二级属性可以选中，所有的都先置为false
    	this.detail.attributeList[type].forEach(item =>{ 
    	//item {"name":"红色","img":"图片地址",checked:false}
    		item.checked = false;
    	})
    	//当前的二级属性置为true
    	this.detail.attributeList[type][index].checked = true;
    	//全局的checkSku添加一个属性。数据格式为：{"颜色":"红色","尺码":"L"}
    	this.checkSku[type] = this.detail.attributeList[type][index].name;
    	this.computeSku();
    }
    computeSku()
    	//本地的SKU属性集合应该和detail中的sku集合对比，可以因此获取到库存值
    	//参照下方的数据格式，相当于是{"颜色":"红色","尺码":"L"} 与 {"尺码":"L"，"颜色":"红色"}进行匹配的过程
    	//首先先获取本地属性集合的长度
    	//对象获取属性名的数组集合通过Object.keys(对象)的方式获取，数组的长度通过length来获取
    	let skuLength = Object.keys(this.checkSku).length;
    	//对象的for in 循环中，key值是属性名，for in 循环数组中的key是索引值
    	for(let key in this.detail.skus){ 
    	// 此处的item 数据格式:{"尺码":"L","颜色":"红色"}
    		let item = JSON.parse(this.detail.skus[key].itemSpecs);
    		let skul = 0;
    		//对象的for in 循环中，key值是属性名
    		for(let key in item){ 
    			if(item[key] === this.checkSku[key]){ 
    				skul++;	
    			}
    		}
    		if(skul === skuLength){ 
    			//如果两者相等，则代表是找到了匹配的属性集合
    			let itemSpecs = item;
    			//此处的item 数据格式:{"尺码":"L","颜色":"红色"}
    			let itemTile = "";
    			for(let specs in itemSpecs){ 
    				itemTitle += itemSpecs[specs];
    			}
    			//此处的itemTile 展示形式是：L 红色 
    			// 给detail 添加一个属性为 itemTitle 展示形式是：L 红色 
    			this.detail.skus[key].itemTitle = itemTitle;
    			// 给detail 添加一个属性为 number 就是选中的商品数量
    			this.detail.skus[key].number = 1;
    			//将整合好的数据存储在本地参数 specSelected
    			this.specSelected = this.detail.skus[key];
    			this.specSelected.imageUrl = this.specImg;
    		}
    	}
    }

### detail数据格式——sku集合 ###

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

### 加入购物车函数 ###

addCart(){ 
    	if(this.specSelected.number > 0){ 
    		let _this = this;
    		this.$request.urlRequest(
    			'/goods1/shoppingCard',
    			{ 
    				"skuId": _this.specSelected.id,
    				"skuQty": _this.specSelected.number
    			},
    			'POST',
    			function (res) { 
    				if(res.code == 200){ 
    					setTimeout(function(){ 
    						_this.$api.msg("添加成功",2000,false,'success')
    					},200)
    				}
    			}
    		)
    	}else{ 
    		this.clcikCart = true;
    		this.toggleSpec();
    	}
    }

### 立即购买函数 ###

buy(){ 
    	if(this.specSelected.number > 0){ 
    		uni.removeStorageSync('createOrderBuff');
    		uni.removeStorageSync('orderDetailBuff');
    		uni.setStorageSync('createOrderBuff',this.specSelected);
    		uni.setStorageSync('orderDetailBuff',this.detail);
    		uni.navigateTo({ 
    			url: `/pages/order/createOrder?id=`+this.specSelected.itemId
    		})
    	}else{ 
    		this.clcikCart = false;
    		this.toggleSpec();
    	}
    }

### 商品数量组件 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 9]  
下一篇详细拆解~~~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/30cf72889813431ba1d22676edbbb21d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/74d5355f0a0741f39a50a16cbe3bbcce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20210725/e22af036594f44aab5b68d25b5862123.png
[20200714103143618.png]: /images/20210725/705526ec19dd4efeae158558b9d7bebd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20210725/9a1ca1df44f4430db52c01092f438bb9.png
[20200714103806869.png]: /images/20210725/10d433e3312343e69433173e09bd59bf.png
[20200714104118233.png]: /images/20210725/ec15a207da4a4f02a963b56cadd483b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]: /images/20210725/00248f62254f40a893b2042f6bdbac7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]: /images/20210725/5aad7984caa74cb5b3e9d48d8cfdd779.png
[20200714104433883.png]: /images/20210725/bbada8ae386a4052a516c27f9bf9e634.png
[20200714104912420.png]: /images/20210725/acba74d4cda94f9c9331d0db8a230e31.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 6]: /images/20210725/86abcb62058c4782a739beaade835b17.png
[20200714110556480.png]: /images/20210725/5961d3273a3948b8be08d400f554d3b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 7]: /images/20210725/a776bc91f79e48a89dff65e379e8e34c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 8]: /images/20210725/a46a6654625e4296a840f0ef9ff6cef9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 9]: /images/20210725/e03431ecb2d34f098185cc6fd1a1d316.png