1.定義UI結(jié)構(gòu):

<template><view v-if="goods_info.goods_name"><!-- 輪播圖區(qū)域 --><swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"><swiper-item v-for="(item, i) in goods_info.pics" :key="i"><!-- 把當(dāng)前點(diǎn)擊的圖片的索引，傳遞到 preview() 處理函數(shù)中 --><image :src="item.pics_big" @click="preview(i)"></image></swiper-item></swiper><!-- 商品信息區(qū)域 --><view class="goods-info-box"><!-- 商品價格 --><view class="price">￥{{goods_info.goods_price}}</view><!-- 信息主體區(qū)域 --><view class="goods-info-body"><!-- 商品名稱 --><view class="goods-name">{{goods_info.goods_name}}</view><!-- 收藏 --><view class="favi"><uni-icons type="star" size="18" color="gray"></uni-icons><text>收藏</text></view></view><!-- 運(yùn)費(fèi) --><view class="yf">快遞：免運(yùn)費(fèi) -- {{cart.length}}</view></view><!-- 商品詳情信息 --><rich-text :nodes="goods_info.goods_introduce"></rich-text><!-- 商品導(dǎo)航組件 --><view class="goods_nav"><!-- fill 控制右側(cè)按鈕的樣式 --><!-- options 左側(cè)按鈕的配置項, 由data定義 --><!-- buttonGroup 右側(cè)按鈕的配置項, 由data定義 --><!-- click 左側(cè)按鈕的點(diǎn)擊事件處理函數(shù) --><!-- buttonClick 右側(cè)按鈕的點(diǎn)擊事件處理函數(shù) --><uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" /></view></view> </template>

2.自定義腳本:

<script>// 從 vuex 中按需導(dǎo)出 mapState 輔助方法import { mapState } from 'vuex'// 按需導(dǎo)入 mapMutations 這個輔助方法import { mapMutations } from 'vuex'// 按需導(dǎo)入 mapGetters 這個輔助方法import { mapGetters } from 'vuex'export default {data() {return {// 商品詳情對象goods_info: {},// uni-goods-nav 左側(cè)按鈕組的配置對象options: [{icon: 'shop',text: '店鋪'}, {icon: 'cart',text: '購物車',info: ''}],// uni-goods-nav 右側(cè)按鈕組的配置對象buttonGroup: [{text: '加入購物車',backgroundColor: '#ff0000',color: '#fff'},{text: '立即購買',backgroundColor: '#ffa200',color: '#fff'}]}},onLoad(options) {// 獲取商品 Id,const goods_id = options.goods_id// 調(diào)用請求商品詳情數(shù)據(jù)的方法this.getGoodsDetail(goods_id)},methods: {// 定義請求商品詳情數(shù)據(jù)的方法async getGoodsDetail(goods_id) {const { data: res } = await uni.$http.get('/api/public/v1/goods/detail', { goods_id })if (res.meta.status !== 200) return uni.$showMsg()// 使用字符串的 replace() 方法，為 img 標(biāo)簽添加行內(nèi)的 style 樣式，從而解決圖片底部空白間隙的問題res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, '<img style="display:block;" ').replace(/webp/g, 'jpg')// 為 data 中的數(shù)據(jù)賦值this.goods_info = res.message},// 實現(xiàn)輪播圖的預(yù)覽效果preview(i) {// 調(diào)用 uni.previewImage() 方法預(yù)覽圖片uni.previewImage({// 預(yù)覽時，默認(rèn)顯示圖片的索引current: i,// 所有圖片 url 地址的數(shù)組urls: this.goods_info.pics.map(x => x.pics_big)})},// 左側(cè)按鈕的點(diǎn)擊事件處理函數(shù)onClick(e) {if (e.content.text === '購物車') {// 切換到購物車頁面uni.switchTab({url: '/pages/cart/cart'})}},// 把 m_cart 模塊中的 addToCart 方法映射到當(dāng)前頁面使用...mapMutations('m_cart', ['addToCart']),// 右側(cè)按鈕的點(diǎn)擊事件處理函數(shù)buttonClick(e) {// 1. 判斷是否點(diǎn)擊了 加入購物車 按鈕if (e.content.text === '加入購物車') {// 2. 組織一個商品的信息對象const goods = {goods_id: this.goods_info.goods_id, // 商品的Idgoods_name: this.goods_info.goods_name, // 商品的名稱goods_price: this.goods_info.goods_price, // 商品的價格goods_count: 1, // 商品的數(shù)量goods_small_logo: this.goods_info.goods_small_logo, // 商品的圖片goods_state: true // 商品的勾選狀態(tài)}// 3. 通過 this 調(diào)用映射過來的 addToCart 方法，把商品信息對象存儲到購物車中this.addToCart(goods)}}},computed: {// 調(diào)用 mapState 方法，把 m_cart 模塊中的 cart 數(shù)組映射到當(dāng)前頁面中，作為計算屬性來使用// ...mapState('模塊的名稱', ['要映射的數(shù)據(jù)名稱1', '要映射的數(shù)據(jù)名稱2'])...mapState('m_cart', ['cart']),// 把 m_cart 模塊中名稱為 total 的 getter 映射到當(dāng)前頁面中使用...mapGetters('m_cart', ['total']),},watch: {// 定義 total 偵聽器，指向一個配置對象total: {// handler 屬性用來定義偵聽器的 function 處理函數(shù)handler(newVal) {const findResult = this.options.find(x => x.text === '購物車')if (findResult) {findResult.info = newVal}},// immediate 屬性用來聲明此偵聽器，是否在頁面初次加載完畢后立即調(diào)用immediate: true}}} </script>

3.頁面美化:

<style lang="scss"> swiper {height: 750rpx;image {width: 100%;height: 100%;} }// 商品信息區(qū)域的樣式 .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;}// 收藏區(qū)域.favi {width: 120px;font-size: 12px;display: flex;flex-direction: column;justify-content: center;align-items: center;border-left: 1px solid #efefef;color: gray;}}// 運(yùn)費(fèi).yf {margin: 10px 0;font-size: 12px;color: gray;} }.goods-detail-container {// 給頁面外層的容器，添加 50px 的內(nèi)padding，// 防止頁面內(nèi)容被底部的商品導(dǎo)航組件遮蓋padding-bottom: 50px; }.goods_nav {// 為商品導(dǎo)航組件添加固定定位position: fixed;bottom: 0;left: 0;width: 100%; } </style>

效果:

總結(jié)

以上是生活随笔為你收集整理的uniapp-商品详情配置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。