1.定義UI結構:

<template><view v-if="goods_info.goods_name"><!-- 輪播圖區域 --><swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"><swiper-item v-for="(item, i) in goods_info.pics" :key="i"><!-- 把當前點擊的圖片的索引，傳遞到 preview() 處理函數中 --><image :src="item.pics_big" @click="preview(i)"></image></swiper-item></swiper><!-- 商品信息區域 --><view class="goods-info-box"><!-- 商品價格 --><view class="price">￥{{goods_info.goods_price}}</view><!-- 信息主體區域 --><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><!-- 運費 --><view class="yf">快遞：免運費 -- {{cart.length}}</view></view><!-- 商品詳情信息 --><rich-text :nodes="goods_info.goods_introduce"></rich-text><!-- 商品導航組件 --><view class="goods_nav"><!-- fill 控制右側按鈕的樣式 --><!-- options 左側按鈕的配置項, 由data定義 --><!-- buttonGroup 右側按鈕的配置項, 由data定義 --><!-- click 左側按鈕的點擊事件處理函數 --><!-- buttonClick 右側按鈕的點擊事件處理函數 --><uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" /></view></view> </template>

2.自定義腳本:

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

3.頁面美化:

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

效果:

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。