day07-商品详情页&购物车

商品详情页

在mixins文件夹下创建相应的 main.js 文件，创建好js的架子

import wepy from 'wepy'
export default class extends wepy.mixin {
   
    data = {
   
       goods_id: ''
    }

    onLoad(options) {
   
        this.goods_id = optons.goods_id
    }

}

在 main.wpy 里面引入 文件

<script>
    import wepy from 'wepy'
    import mix from '@/mixins/goods_detail/main'
    export default class Main extends wepy.page {
    
       mixins = [mix]
    }
</script>

轮播图实现

在 onLoad函数里面获取传递过来的id，然后根据接口文档，请求服务器

// 获取商品详情数据
async getGoodsInfo() {
   
  const {
    data: res } = await wepy.get('/goods/detail', {
   
    goods_id: this.goods_id
  })

  if (res.meta.status !== 200) {
   
    return wepy.baseToast()
  }

  this.goodsInfo = res.message
  this.$apply()
}

利用微信小程序提供的组件来进行页面的渲染

<view>
    <swiper indicator-dots autoplay circular>
        <block wx:for="{
    {goodsInfo.pics}}" wx:key="">
            <swiper-item>
                <image mode="aspectFit" src="{
    {item.pics_big}}" />
            </swiper-item>
        </block>
    </swiper>
</view>

商品信息实现

价格区域的实现

内容区域的实现，数据都存在了 goosInfo里面，我们需要搭建页面的结构，然后利用 goodsInfo来渲染到页面

<view class="goods_info">
    <view class="box1">
        <!-- 价格 -->
        <view class="price">￥{
  {goodsInfo.goods_price}}</view>
        <!-- 商品名称 -->
        <view class="goods_name">
            <view class="left">
                {
  {goodsInfo.goods_name}}
            </view>
            <view class