现代JavaScript技术-趣学前端

Appearance

本页目录

7. 商品详情 ​

7.1 商品信息区域-轮播图与商品信息 ​

7.1.1 查询当前商品信息数据 ​

  1. 设置搜索结果点击导航至商品详情并携带商品ID goodsId

    js
    // 跳转商品详情
const productDetail = (item) => {
  uni.navigateTo({
  	url: `/subpkg/goods_detail/goods_detail?goodsId=${item.goodsId}`
  })
}

  2. 封装接口调用

    js
    // 加载完成
onLoad(async options => {
	if (!options.goodsId) return uni.$Toast('商品信息错误')
	// 保存goodsId
	state.goodsId = options.goodsId
	// 查询商品信息
	const { data } = await getDetail(state.goodsId)
	data.goodsCarouselList[0] = data.goodsCoverImg
	// 解决图片底部 空白间隙 的问题
	// 解决 .webp 格式图片在 ios 设备上无法正常显示的问题：
	data.goodsDetailContent = data.goodsDetailContent.replace(/(<img((?!style=").)+)(style="((?!\").)+)/gi, '$1$3display:block;').replace(/webp/g, 'jpg')
	state.detail = data
	// 更新购物车列表
	cartStore.updateCart()
})

  3. **图片渲染会出现间隙（行内元素） ** 设置块级元素 最大宽度100%;

    封装函数

    JS
    // 匹配 img标签 增加 style样式
export const imgTagAddStyle = (htmldoc, style) => {
	// 正则匹配不含style="" 或 style='' 的img标签
	var reg1 = new RegExp('(i?)(\<img)(?!(.*?style=[\'"](.*)[\'"])[^\>]+\>)', 'gmi')

	// 给不含style="" 或 style='' 的img标签加上style=""
	htmldoc = htmldoc.replace(reg1, '$2 style=""$3')

	// 正则匹配含有style的img标签
	var reg2 = new RegExp('(i?)(\<img.*?style=[\'"])([^\>]+\>)', 'gmi')
	// 在img标签的style里面增加css样式(这里增加的样式：display:block;max-width:100%;height:auto;border:5px solid red;)
	htmldoc = htmldoc.replace(reg2, `$2${style}$3`)
	return htmldoc
}

  4. 将封面图设置为轮播图

7.1.2 完成布局结构 ​

vue
<!-- 商品信息区域 -->
<view class="detail-content">
    <!-- 轮播图区域 -->
    <view class="goods-swiper">
        <swiper class="my-swiper" indicator-active-color="#1baeae" :indicator-dots="false">
            <swiper-item v-for="(item, i) in detail.goodsCarouselList" :key="item"><image :src="item" @click="preview(i)"></image></swiper-item>
        </swiper>
    </view>

    <!-- 商品信息 -->
    <view class="goods-info">
        <view class="title">{{ detail.goodsName }}</view>
        <view class="desc">{{ detail.goodsIntro }}</view>
        <view class="desc">免邮费 顺丰快递</view>
        <view class="price">
            ¥{{ detail.sellingPrice }}
            <text class="o_price">￥{{ detail.originalPrice }}</text>
        </view>
    </view>

    <!-- 商品介绍 -->
    <view class="goods-intro">
        <view class="tabs">
            <view>概述</view>
            <view>参数</view>
            <view>安装服务</view>
            <view>常见问题</view>
        </view>
        <!-- 渲染html内容结构 -->
        <rich-text class="content" :nodes="detail.goodsDetailContent"></rich-text>
    </view>
</view>

7.1.3 完成UI样式 ​

scss
// 商品信息区域
	.detail-content {
		padding-bottom: 100rpx;
		// 轮播图
		.goods-swiper {
			height: 750rpx;
			.my-swiper,
			image {
				width: 100%;
				height: 100%;
			}
		}
		// 信息
		.goods-info {
			margin-top: 14rpx;
			padding: 0 20rpx;
			.title {
				font-size: 36rpx;
				text-align: left;
				color: #333;
			}
			.desc {
				font-size: 28rpx;
				text-align: left;
				color: #999;
				padding: 10rpx 0;
			}
			.price {
				color: #f63515;
				font-size: 44rpx;
				.o_price {
					color: #999;
					font-size: 30rpx;
					margin-left: 12rpx;
					text-decoration: line-through;
				}
			}
		}
		.goods-intro {
			width: 100%;
			padding-bottom: 100rpx;
			.tabs {
				@include fj();
				width: 100%;
				margin: 20rpx 0;
				view {
					flex: 1;
					padding: 10rpx 0;
					text-align: center;
					font-size: 30rpx;
					border-right: 2rpx solid #999;
					box-sizing: border-box;
					&:last-child {
						border-right: none;
					}
				}
			}
			.content {
				padding: 0 40rpx;
			}
		}
	}

7.2 商品操作区域 ​

7.2.1 完成UI布局结构 ​

vue
<!-- 商品操作区域 -->
<van-goods-action>
    <van-goods-action-icon icon="chat-o" text="客服" open-type="contact" />
    <van-goods-action-icon icon="cart-o" text="购物车" :info="cartStore.count || ''" @click="goTo" />
    <van-goods-action-button text="加入购物车" color="linear-gradient(to right,#6bd8d8, #1baeae)" @click="handleAddCart" />
    <van-goods-action-button text="立即购买" color="linear-gradient(to right,#0dc3c3, #098888)"  @click="payGoods"/>
</van-goods-action>

7.2.2 完成基础JS逻辑 ​

  1. 图片预览
js
// 图片预览功能
const preview = i => {
	// 调用 uni.previewImage() 方法预览图片
	uni.previewImage({
		// 预览时，默认显示图片的索引
		current: i,
		// 所有图片 url 地址的数组
		urls: state.detail.goodsCarouselList
	})
}
  1. 跳转购物车
js
// 跳转购物车
const goTo = () => {
	uni.switchTab({ url: '/pages/cart/cart' })
}
  1. 加入购物车
js
// 加入购物车
const handleAddCart = async () => {
	await addCart({ goodsCount: 1,  goodsId: state.goodsId })
	uni.$Toast('添加成功')
	// 更新购物车列表
	cartStore.updateCart()
}
  1. 立即结算
js
// 立即结算
const payGoods = async () => {
	// 1. 添加到购物车  
	await addCart({ goodsCount: 1,  goodsId: state.goodsId })
	// 2. 根据购物车Id生成订单（接口问题）
	cartStore.updateCart()
	// 3. 进入购物车下单
	uni.switchTab({ url: '/pages/cart/cart' })
}