uni-app學習記錄——2.uni-app搭建一個網上商城

1.創建項目 & 清理結構 & 配置基本外觀

• 利用HBuilder X創建基本項目結構

• 運行項目

• 整理基本項目結構，並修改窗口外觀

  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "黑馬商城",
    "navigationBarBackgroundColor": "#1989fa",
    "backgroundColor": "#F8F8F8"
  }
  

2.完成底部tabbar的配置

• 創建tabbar對應的四個頁面和圖標準備好

• 將頁面路徑配置到pages.json中的pages數組中

  "pages": [ //pages數組中第一項表示應用啓動頁，參考：https://uniapp.dcloud.io/collocation/pages
  		{
  			"path": "pages/index/index"
  		},
  		{
  			"path": "pages/member/member"
  		},
  		{
  			"path": "pages/cart/cart"
  		},
  		{
  			"path": "pages/search/search"
  		}
  	]
  

• 配置tabbar

  {
  	"tabBar": {
  		"list": [
  			{
  				"pagePath":"pages/index/index",
  				"text":"首頁",
  				"iconPath":"static/icon/home.png",
  				"selectedIconPath":"static/icon/home-active.png"
  			},
  			{
  				"pagePath":"pages/member/member",
  				"text":"會員",
  				"iconPath":"static/icon/member.png",
  				"selectedIconPath":"static/icon/member-active.png"
  			},
  			{
  				"pagePath":"pages/cart/cart",
  				"text":"購物車",
  				"iconPath":"static/icon/cart.png",
  				"selectedIconPath":"static/icon/cart-active.png"
  			},
  			{
  				"pagePath":"pages/search/search",
  				"text":"搜索",
  				"iconPath":"static/icon/search.png",
  				"selectedIconPath":"static/icon/search-active.png"
  			}
  		]
  		
  	}
  }
  

3.獲取輪播圖數據

• 封裝uni.request請求，並掛在到全局

  • 創建util》api.js

    // 封裝get請求
    const baseUrl = "http://localhost:8082"
    export const myRequest = (options)=>{
    	return new Promise((resolve,reject)=>{
    		uni.request({
    			method: options.method,
    			data: options.data,
    			url: baseUrl+options.url,
    			success(res) {
    				if(res.data.status !== 0) {
    					return uni.showToast({
    						title: '獲取數據失敗'
    					})
    				}
    				resolve(res)
    			},
    			fail(err) {
    				uni.showToast({
    					title: '獲取數據失敗'
    				})
    				reject(err)
    			}
    		})
    	})
    }
    

  • 在main.js中導入並掛載到全局

    import { myRequest } from './util/api.js'
    Vue.prototype.$myRequest = myReques
    

• 獲取輪播圖的數據

  • 定義獲取輪播圖的方法

    methods: {
      async getSwipers () {
        const res = await this.$myRequest({
          method: 'GET',
          url: '/api/getlunbo'
        })
        this.swipers = res.data.message
      }
    }
    

  • 在onLoad中調用該方法

    this.getSwipers()
    

4.實現輪播圖的結構和數據渲染

• 定義輪播圖的基本結構

  <swiper class="swiper" indicator-dots :autoplay="true" :interval="2000" circular>
    <swiper-item v-for="item in swipers" :key="item.id">
      <image :src="item.img"></image>
    </swiper-item>
  </swiper>
  

• 樣式，在工具中安裝scss

  <style lang="scss">
  	.home{
  		swiper{
  			height: 380rpx;
  			image{
  				width: 750rpx;
  				height: 380rpx;
  			}
  		}
  	}
  </style>
  

5.實現菜單導航結構

5.1 引入字體圖標初始化樣式

<style>
	@font-face {font-family: "iconfont";
	  src: url('~@/static/fonts/iconfont.eot?t=1576335469449'); /* IE9 */
	  src: url('~@/static/fonts/iconfont.eot?t=1576335469449#iefix') format('embedded-opentype'), /* IE6-IE8 */
	  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAVMAAsAAAAAChwAAAT/AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDKAqHQIYhATYCJAMUCwwABCAFhG0HUBurCFGUTk6f7EeBu6eIlFFajBY208XLlGHx/6/hiYfvx76d+2xFJLlUn75pp4tCoyQ8NgiJUJjuJfzNpSrpXIDoeDbs3GjyH7Lfv+zTy1mok+GyEhYAW8AKaPvz/6eeG1QvDUo6SQW8bE4KYTDSMRj1R/5x7/TP88Dmo7Jc/misYXOelwWYYEBjbGxrAQ7KEvQW8SwuJBO4nkCvRQ21q/PbB5hXQLdAvDU6gHmbRQnhhG598xlb1lEvsu70PvEBfFU/H/+hF1IkNYO+149nMRz+6v7/fwrv4JAqI6T5uXCbRMYWUIhnX8+tKT22ZUrvJ3PaCdCNryR+Sb2RfRPT+c9kbdF0s788siIRDWj6GXkWL/ySEsVkfsmyftoYKiIZsiQfJ+Y2ll7MgdgDiE/AMF+CumLWsCSpdFXpjsNkefoatW8WSY8xapRhreWm1a9vWvVEM6edaQdPapImTzTLLG4BwEBG/HJsK4bVEKkStJbxbUYy3othvO2ofJA7jBARcUZ4illDuEL29TB2C/3AGWj4WUfGYbG25LTICaEk1jWBR8KWC0bqQJ+EjJYmOnvisiHzqtifvZ08X7NYzBaJWAJBglDIRIi3Fd/C3cbZjqEKvkh9Qmx2SKCgMAhD15VHVkCQMCWOP72YnLB0euHUpROzJ/PEYiR6wxK8ShC+ZsryVibGlbIzorOjqRKnhwyOKTIlMRoPSLgMlYvInDIKdwsQ8K2YbO2PReRsyxzZvrK0dWxUYUrIE2sPj8+sHNw6tUVhj0AgslvelUfhDnNG4k0YwgedbyX/ovPRL8SnqwOt/atMII/RGGMacyXGJOaq+MtGYDFMOL1Hk8OSJdfqARNMZkPmnDVh5DP0bjDpx6XAB6RO0JkqM4F0fNSNZMKXB20QqI//n+swdzCvnv1/JszOzMEszPsskD8RZtrarNB14gGhubjWlduokVnWD9e9PyCQd1jtvPjStKTGs6VZFT/xjhhW0hpkG6PoC0wW8iGUrPK9prFY4AM+9GF8APhKfIvr5tct+IoAxU/eE3ILa4yrDxTgUfkrG0lPTtshU4pGtXT9UJqywWkDhzyi/5ka15D+WlPn1Gd+QYF7s0j3dXTuS0oStZLum6on86NOwIbPcydIP3+STiDFaYk1Z6WFLPt7b7M6EhMA+Gr+qtDilfia4mPFr0p8JZUS973QHulzYJxsPjJ6xdeW7Wd75WHHrZsGDXaUb1hacCuQVmrOkt1DjdgTxSeY3EcWDqCzRLxB9PmH2DNplYhzhCDbNLfzY7dKy1jb/dqNFfBTXbWg8vhWsH1JP9IN0VQmIcif4isHay1vtVDzNIiyxeirbpZ0JKEXg3QAAqN+8jFMLN9E6DZhQtJlAbJuS2ght6DqcwRNt1Potelicp8xbEqUHmz4IBCGfUIy6DtkwyZoIb+hmvQLzXAQoddNbM3ZZyWKFk+YAqEYwxGayJZKsMuiVnxH2ucBW+Uq94m4MkHstjrO5AWVxHkMqPq6J6JQsS3wnGxGeW7RsU0pklYi4rbbbeV3plZkC1h0iZGAIDEUGkFGxCopubpYdL3/DtG8XIBDSn4knxBWMbWjrpZODPRCU8YqWZfGlT6tRwjFOynMKqBz6iI5xizk/FulSES0JCkizrY2q6Tialrl64ppLD0VysKcNVLkKFGjae8S40w5K14OB+WS9lKjkR/YgsrZsRnZzAAA') format('woff2'),
	  url('~@/static/fonts/iconfont.woff?t=1576335469449') format('woff'),
	  url('~@/static/fonts/iconfont.ttf?t=1576335469449') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
	  url('~@/static/fonts/iconfont.svg?t=1576335469449#iconfont') format('svg'); /* iOS 4.1- */
	}
	
	.iconfont {
	  font-family: "iconfont" !important;
	  font-size: 16px;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	
	.icon-shipin:before {
	  content: "\f0024";
	}
	
	.icon-tupian:before {
	  content: "\e650";
	}
	
	.icon-guanyuwomen:before {
	  content: "\e608";
	}
	
	.icon-ziyuan:before {
	  content: "\e60d";
	}
</style>

5.2 完成菜單導航基本結構

<view class="nav">
			<view class="item">
				<view class="iconfont icon-ziyuan"></view>
				<text>黑馬超市</text>
			</view>
			<view class="item">
				<view class="iconfont icon-tupian"></view>
				<text>聯繫我們</text>
			</view>
			<view class="item">
				<view class="iconfont icon-guanyuwomen"></view>
				<text>社區圖片</text>
			</view>
			<view class="item">
				<view class="iconfont icon-shipin"></view>
				<text>視頻專區</text>
			</view>
		</view>

5.3 菜單導航樣式

.nav{
  display: flex;
  align-items: center;
  .item{
    width: 25%;
    text-align: center;
    view{
      background: $shop-color;
      line-height: 120rpx;
      width: 120rpx;
      height: 120rpx;
      border-radius: 90px;
      margin:10px auto;
    }
    text{
      font-size: 15px;
    }
  }
  .iconfont{
    font-size: 25px;
    color: #fff;
    height: 50px;
  }
  .icon-tupian{
    font-size: 20px;
  }
}

6.實現推薦商品列表

6.1 定義基本結構

<view class="hot_goods">
  <view class="tit">推薦商品</view>
  <!-- 一般用法 -->
  <view class="goods_list">
    <view class="goods_item">
      <image></image>
      <view class="price">
        <text>1299</text>
        <text>12990</text>
      </view>
      <view class="name">華爲（HUAWEI）榮耀6Plus 16G雙4G版</view>
    </view>
  </view>
</view>

6.2 美化樣式

.hot_goods {
  background: #eee;
  .tit{
    border-top: 2px solid #eee;
    border-bottom: 2px solid #eee;
    margin-top: 20px;
    margin-bottom: 3px;
    color: $shop-color;
    height: 50px;
    line-height: 50px;
    text-align: center;
    letter-spacing: 20px;
    background: #fff;
  }
  .goods_list {
    display: flex;
    padding: 0 15rpx;
    justify-content: space-between;
    overflow: hidden;
    flex-wrap: wrap;
    .goods_item {
      width: 355rpx;
      margin-bottom: 15rpx;
      background: #fff;
      padding: 10px;
      box-sizing: border-box;
      image{
        height: 150px;
        width: auto;
        mix-width:160px;
        margin: 10px auto;
      }
      .price{
        font-size: 18px;
        color: red;
        padding: 8px 0;
        text:nth-child(2){
          color: #ccc;
          text-decoration: line-through;
          margin-left: 10px;
          font-size: 13px;
        }
      }
      .name {
        font-size: 14px;

      }
    }
  }
}

6.3 獲取數據

• 定義獲取數據的方法

  // 獲取推薦商品
  async getGoods () {
    const res = await this.$myRequest({
      url: '/api/getgoods?pageindex=1'
    })
    this.goods = res.data.message
  }
  

• 在onLoad生命週期中調用該方法

  this.getGoods()
  

6.4 渲染數據

• 通過v-for渲染數據

  <view class="hot_goods">
    <view class="tit">推薦商品</view>
    <!-- 一般用法 -->
    <view class="goods_list">
      <view class="goods_item" v-for="item in goods" :key="item.id">
        <image :src="item.img_url"></image>
        <view class="price">
          <text>{{item.sell_price}}</text>
          <text>{{item.market_price}}</text>
        </view>
        <view class="name">{{item.title}}</view>
      </view>
    </view>
  </view>
  

7.完成超市頁面

7.1 改造導航菜單

• 定義數據

  navs: [
    {
      icons: "iconfont icon-ziyuan",
      title: "黑馬超市",
      path: "/pages/goods/list"
    },
    {
      icons: "iconfont icon-tupian",
      title: "社區圖片",
      path: "/pages/pics/pics"
    },
    {
      icons: "iconfont icon-guanyuwomen",
      title: "聯繫我們",
      path: "/pages/contact/contact"
    },
    {
      icons: "iconfont icon-shipin",
      title: "學習視頻",
      path: "/pages/videos/videos"
    }
  ]
  

• 渲染數據

  <view class="nav">
    <view class="item" v-for="(item,index) in navs" :key="index">
      <view :class="item.icons"></view>
      <text>{{item.title}}</text>
    </view>
  </view>
  

• 給導航菜單註冊點擊事件

  <view class="goods_item" v-for="item in goods" :key="item.id">
  

• 定義跳轉的方法

  goNavigator (url) {
    uni.navigateTo({
      url
    })
  }
  

7.2 創建超市頁面

• 創建頁面，goods>list.vue
• 將頁面路勁配置到pages文件中，修改標題

7.3 封裝商品列表組件

• 在components下面創建goods>list.vue

  <template>
  	<view class="goods_list">
  		<view class="goods_item" v-for="item in goods" :key="item.id">
  			<image :src="item.img_url"></image>
  			<view class="price">
  				<text>{{item.sell_price}}</text>
  				<text>{{item.market_price}}</text>
  			</view>
  			<view class="name">{{item.title}}</view>
  		</view>
  	</view>
  </template>
  
  <script>
  	export default {
  		props:{
  			goods:Array
  		}
  	}
  </script>
  
  <style lang="scss">
  	.goods_list {
  		display: flex;
  		padding: 0 15rpx;
  		justify-content: space-between;
  		overflow: hidden;
  		flex-wrap: wrap;
  		.goods_item {
  			width: 355rpx;
  			margin-bottom: 15rpx;
  			background: #fff;
  			padding: 10px;
  			box-sizing: border-box;
  			image{
  				height: 150px;
  				width: 150px;
  				display: block;
  				margin: 10px auto;
  			}
  			.price{
  				font-size: 18px;
  				color: red;
  				padding: 8px 0;
  				text:nth-child(2){
  					color: #ccc;
  					text-decoration: line-through;
  					margin-left: 10px;
  					font-size: 13px;
  				}
  			}
  			.name {
  				font-size: 14px;
  				
  			}
  		}
  	}
  </style>
  

• 在首頁引入該組件

  import goodsList from "../../components/goods-list/index.vue"
  
  components: {
    "goods-list":goodsList
  }
  

• 使用組件並將數據傳遞到組件內部

  <goods-list :goods="goods"></goods-list>
  

7.4 渲染商品列表

• 定義獲取商品列表數據的方法並調用

  <script>
  	export default {
  		data () {
  			return {
  				goods: []
  			}
  		},
  		methods: {
  			async getGoods () {
  				const res = await this.$myRequest({
  					url: '/api/getgoods?pageindex=1'
  				})
  				this.goods = res.data.message
  			},
  		},
  		
  		onLoad () {
  		    this.getGoods()
  		}
  	}
  </script>
  

• 引入商品組件並使用

  <template>
  	<view class="goods_list">
  		<goods-list :goods="goods"></goods-list>
  	</view>
  </template>
  <script>
  	import goodsList from "../../components/goods-list/index.vue"
  	export default {
  		components: {
  			"goods-list": goodsList
  		}
  	}
  </script>
  
  

7.5 實現上拉加載更多

• 通過onReachBottom來監聽觸底

  onReachBottom () {
    this.pageindex++
    this.getGoods()
  }
  

• 修改給goods賦值

  this.goods = [...this.goods,...res.data.message]
  

• 動態顯示底線

  • 通過onReachBottom監聽是否還有更多

    if(this.pageindex*10>this.goods.length) return this.flag = true
    

  • 通過v-if控制底線

    <view class="over_line" v-if="flag">----------我是有底線的----------</view>
    

7.6 實現下拉刷新

• 通過onPullDownRefresh進行下拉刷新的操作

  onPullDownRefresh() {
    this.goods = []
    this.pageindex = 1
    this.flag = false 
    setTimeout(()=>{
      this.getGoods(()=>{
        uni.stopPullDownRefresh()
      })
    },1000)
  }
  

8.關於我們

<template>
	<view class="contact">
		<image class="img" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg"></image>
		<view class="info">
			<view @click="phone">聯繫電話：123-456-789（點擊撥打）</view>
			<view>聯繫地址：CSDN-賑川</view>
		</view>
		<map class="map" v-bind:longitude="longitude" v-bind:latitude="latitude" v-bind:markers="markers"></map>
		聯繫我們
	</view>
</template>

<script>
	export default {
		data() {
			return {
				longitude : 108.910649,
				latitude: 34.158268,
				markers:[
					{
						longitude : 108.910649,
						latitude: 34.158268,
						iconPath : '../../static/logo.png'
					}
				]
			}
		},
		methods: {
			phone(){
				uni.makePhoneCall({
					phoneNumber: '123-456-789'
				})
			}
		}
	}
</script>

<style lang="scss">
	.contact{
		.img{
			width: 750rpx;
			height: 320rpx;
		}
		.info{
			padding: 10rpx 20rpx;
			font-size: 30rpx;
			view{
				line-height: 80rpx;
				border-bottom: 1px solid #eee;
			}
		}
		.map{
			width: 750rpx;
			height: 750rpx;
		}
	}
</style>

9.實現社區圖片

<template>
	<view class="pics">
		<scroll-view class="left" scroll-y="true">
			<view @click="leftClickHandle(index,item.id)" v-bind:class="active==index?'active':''" v-bind="active" v-for="(item,index) in cates" v-bind:key="item.id">
				{{item.title}}
			</view>
		</scroll-view>
		<scroll-view class="right" scroll-y="true">
			<view class="item" v-for="item in secondData" v-bind:key="item.id">
				<image @click="previewImg(item.img_url)" v-bind:src="item.img_url"></image>
				<text>{{item.title}}</text>
			</view>
			<text v-if="secondData.length === 0">暫無數據</text>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cates : [],
				active : 0,
				secondData : []
			}
		},
		methods: {
			async getPicsCate(){
				const res = await this.$myRequest({
					url: ' /api/getimgcategory'
				})
				this.cates = res.data.message
				this.leftClickHandle(0,this.cates[0].id)
			},
			async leftClickHandle(index,id){
				this.active = index;
				// 獲取右側渲染的數據
				const res = await this.$myRequest({
					url : '/api/getimages/' + id 
				})
				this.secondData = res.data.message;
			},
			previewImg(current){
				const urls = this.secondData.map(item => {
					return item.img_url;
				})
				uni.previewImage({
					current,
					urls
				})
			}
		},
		onLoad(){
			this.getPicsCate()
		}
	}
</script>

<style lang="scss">
	// 適配微信小程序
	page{
		height: 100%;
	}
	.pics{
		height: 100%;
		display: flex;
		.left{
			width: 200rpx;
			height: 100%;
			border-right: 1px solid #eee;
			view{
				height: 60px;
				line-height: 60px;
				color: #333;
				text-align: center;
				font-size: 30rpx;
				border-top: 1px solid #eee;
			}
			.active{
				background: $shop-color;
				color: #fff;
			}
		}
		.right{
			height: 100%;
			width: 520rpx;
			margin: 10rpx auto;
			.item{
				image{
					width: 520rpx;
					height: 520rpx;
					border-radius: 5px;
				}
				text{
					font-size: 30rpx;
					line-height: 60rpx;
				}
			}
		}
		
	}
</style>

10.實現資訊列表

10.1 實現列表項的結構和樣式

結構

<view class="news_item">
  <image src="../../static/logo.png"></image>
  <view class="content">
    <view class="tit">1季度多家房企利潤跌幅超50% 去庫存促銷戰打響</view>
    <view class="info">
      <text>發表時間：2019-12-23</text>
      <text>瀏覽：1次</text>
    </view>
  </view>
</view>

樣式

.news{
	.news_item{
		display: flex;
		padding: 5px 10px;
		border-bottom: 3px solid $shop-color;
		image{
			width: 300rpx;
			height: 150rpx;
		}
		.content {
			padding: 5px 10px;
			position: relative;
			.tit{
				font-size: 30rpx;
			}
			.info{
				font-size: 26rpx;
				position: absolute;
				left: 10px;
				bottom: 5px;
				text:nth-child(2){
					margin-left: 20px;
				}
			}
		}
	}
}

10.2 封裝爲組件

創建news-item.vue

<template>
	<view>
		<view class="news_item" v-for="item in data" :key="item.id">
			<image :src="item.img_url"></image>
			<view class="content">
				<view class="tit">{{item.title}}</view>
				<view class="info">
					<text>發表時間：{{item.add_time | formatDate}}</text>
					<text>瀏覽：{{item.click+123}}次</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['data'],
		filters:{
		  formatDate(data){
				const date = new Date(data)
				console.log(date)
				const day = date.getMonth().toString().padStart(2,'0')+'-'+date.getDay().toString().padStart(2,'0')
				return date.getFullYear()+'-'+day
			}	
		}
	}
</script>

<style lang="scss">
	.news_item{
		display: flex;
		padding: 5px 10px;
		border-bottom: 1rpx solid $shop-color;
		image{
			max-width: 200rpx;
			min-width: 200rpx;
			height: 150rpx;
		}
		.content {
			padding: 5px 10px;
			position: relative;
			.tit{
				font-size: 30rpx;
			}
			.info{
				font-size: 26rpx;
				position: absolute;
				left: 10px;
				bottom: 5px;
				text:nth-child(2){
					margin-left: 20px;
				}
			}
		}
	}
</style>

10.3 在新聞頁面導入並使用

<template>
	<view class="news">
		<new-item :data="newsList"></new-item>
	</view>
</template>
<script>
	import newItem from '../../components/new-item/new-item.vue'
	export default {
		data() {
			return {
				newsList: []
			}
		},
		methods: {
			async getNewsList () {
				const res = await this.$myRequest({
					url:'/api/getnewslist'
				})
				this.newsList = res.data.message
			}
		},
		onLoad () {
			this.getNewsList()
		},
		components: {
			"new-item":newItem
		}
	}
</script>

<style lang="scss">
</style>

10.4 點擊列表進入詳情

• 點擊子組件列表項通過this.$emit觸發父組件的方法

  navigatorTo (item) {
    this.$emit('clickItem',item)
  }
  

• 父組件通過註冊clickItem事件及事件函數實現跳轉操作

  <template>
  	<view class="news">
  		<new-item :data="newsList" @clickItem="goDetail"></new-item>
  	</view>
  </template>
  <script>
  	export default {
  		methods: {
  			goDetail (data) {
  				console.log(data)
  				uni.navigateTo({
  					url: '/pages/news-detail/news-detail'
  				})
  			}
  		}
  	}
  </script>
  

• 新建/pages/news-detail/news-detail頁面

11.實現資訊詳情

11.1 實現基本結構

<template>
	<view class="news_detail">
		<view class="news_title">
			標題
		</view>
		<view class="info">
			<text>發表時間：</text>
			<text>瀏覽：</text>
		</view>
		<view class="content">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
.news_detail {
	padding: 15rpx;
	.news_title{
		text-align: center;
		font-size: 32rpx;
	}
	.info{
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
	}
}
</style>

11.2 獲取詳情的數據

methods: {
  async getNewsDetail(id){
    const res = await this.$myRequest({
      url: '/api/getnew/'+id
    })
    console.log(res)
    this.newsDetail = res.data.message[0]
  }
},

  onLoad (options){
    this.getNewsDetail(options.id)
  }

11.3 實現詳情的渲染

<view class="news_title">
  {{newsDetail.title}}
    </view>
<view class="info">
  <text>發表時間：{{newsDetail.add_time | formatDate}}</text>
<text>瀏覽：{{newsDetail.click}}</text>
</view>
<view class="content">
  <rich-text :nodes="newsDetail.content"></rich-text>
</view>

12.實現商品詳情頁

12.1 商品列表註冊點擊事件

<template>
	<view class="goods_list">
		<view @click="itemClick(item)" class="goods_item" v-for="item in goods" :key="item.id">
		</view>
	</view>
</template>
<script>
	export default {
		props:{
			goods:Array
		},
		methods: {
			itemClick(item) {
				this.$emit('itemClick',item)
			}
		}
	}
</script>

12.2 父組件綁定自定義事件進行跳轉

<goods-list @itemClick="godetail" :goods="goods"></goods-list>
godetail (item) {
  uni.navigateTo({
 	 url: '/pages/goods-detail/goods-detail?id='+item.id
  })
}

12.3 創建商品詳情頁

12.4 獲取詳情輪播圖數據

methods: {
  async getDetail(){
    const res = await this.$myRequest({
      url:'/api/getthumimages/'+this.id
    })
    console.log(res)
  }
},
onLoad(options){
    this.id = options.id
    this.getDetail()
}

12.5 渲染輪播圖

<swiper indicator-dots>
  <swiper-item v-for="item in swipers" :key="item.src">
    <image :src="item.src"></image>
  </swiper-item>
</swiper>
<style lang="scss">
.goods_detail{
	swiper{
		height: 700rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
}
</style>

12.6 獲取商品信息

methods: {
  async getDetailInfo () {
    const res = await this.$myRequest({
      url:'/api/goods/getinfo/'+this.id
    })
    this.info = res.data.message[0]
  }
},
onLoad(options){
    this.id = options.id
    this.getDetailInfo()
}

12.7 完成商品信息結構和渲染

類似於之前小節的實現，這裏不再贅述。