获取商品信息

跳转过来携带商品id

  1. <navigator 
  2. :url="`/pages/goods_detail/goods_detail?goods_id=${info.goods_id}`">
  4. onLoad (options) {
  5.     const goods_id = options.goods_id
  6.     this.getGoodsDetail(goods_id)
  7.   },
  8.   data() {
  9.     return {
  10.       goodsDetail: null
  11.     }
  12.   },
  13.   methods: {
  14.     async getGoodsDetail(goods_id) {
  15.       const res = await this.$u.get('/goods/detail',{goods_id})
  16.       console.log(res);
  17.       this.goodsDetail = res.message
  18.     }
  19.   },

页面渲染

轮播图

轮播图 + 图片 组件 会冲突 看文档img-mode是控制轮播图中的图片裁件 bg-color控制背景颜色 十六进制

  1. <!-- 轮播图 -->
  2.     <u-swiper
  3.       :list="goodsDetail.pics"
  4.       name="pics_big_url"
  5.       img-mode="aspectFit"
  6.       height="500"
  7.       bg-color="#fff"
  8.     ></u-swiper>

点击轮播图 放大预览被点击的图片 previewImage 小程序api

  1.     // 点击轮播图图片
  2.     handlepreviewImage (index) {
  3.       // console.log(index);
  4.       const urls = this.urls // 需要预览的图片 http 链接列表
  5.       const current = this.urls[index]// 当前显示图片的 http 链接
  6.       // 放大预览图片
  7.       uni.previewImage({
  8.         current, 
  9.         urls 
  10.       })
  11.     }
  12.   },
  13.   computed: {
  14.     // 优化 计算属性有缓存 不用每次点击都重新输出新的urls
  15.     urls() {
  16.       // 预览的图片数组 只能存放
  17.       if (this.goodsDetail) {
  18.         return this.goodsDetail.pics.map(item => item.pics_big_url)
  19.       } else {
  20.         return []
  21.       }
  22.     }
  23.   },
  24. }

商品信息

直接渲染 页面有可能会出现undefined 在跟组件上加一个v-if来做渲染

  1. <template v-if="goodsDetail">
  2.   <view>
  3.     <!-- 轮播图 -->
  4.     <u-swiper
  5.       :list="goodsDetail.pics"
  6.       name="pics_big_url"
  7.       img-mode="aspectFit"
  8.       height="500"
  9.       bg-color="#fff"
  10.       @click="handlepreviewImage"
  11.     ></u-swiper>
  12.     <!-- 商品信息 -->
  13.     <view>
  14.       <!-- 价格 -->
  15.       <view class="goods-price">
  16.         <view>
  17.           ￥{{ goodsDetail.goods_price }}
  18.         </view>
  19.         <!-- 分享功能 -->
  20.         <view class="share-container">
  21.           <u-icon name="share"></u-icon>
  22.           <button open-type="share"></button>
  23.         </view>
  24.       </view>
  25.       <!-- 描述 -->
  26.       <view class="goods-name">{{ goodsDetail.goods_name }}</view>
  27.     </view>
  28.   </view>
  29. </template>

分享功能

分享当前页面给微信好友

通过监听生命周期事件onShareAppMessage用户分享时会执行 如果不定义 无法点击小程序右上-分享 button组件open-type="share"可以触发

  1. <button open-type="share"></button>
  2. onShareAppMessage () {},

分享到朋友圈

通过监听生命周期事件onShareTimeline用户分享时会执行 如果不定义 无法点击小程序右上-分享到朋友圈

  1. onShareTimeline () {},

分享图标

利用定位让按钮脱标 宽高跟父元素一样 透明度0 点击图标 = 点击按钮

  1. <!-- 分享功能 -->
  2. <view class="share-container">
  3.   <u-icon name="share"></u-icon>
  4.   <button open-type="share"></button>
  5. </view>
  6. </view>
  8. <style lang="scss">
  9. .goods-price {
  10.   display: flex;
  11.   justify-content: space-between;
  12.   color: #ea4350;
  13.   padding: 10rpx;
  14.   .share-container {
  15.     position: relative;
  16.     // 由内容撑开   icon图标
  17.     display: inline-block;
  18.     margin-right: 45rpx;
  19.     color: #000;
  20.     button {
  21.       position: absolute;
  22.       width: 100%;
  23.       height: 100%;
  24.       top: 0;
  25.       left: 0;
  26.       opacity: 0;
  27.     }
  28.   }
  29. }
  30. </style>

图文详情

由商家在商家后台自定义好，后端直接返回富文本

解析富文本

  • <rich-text :nodes=""> 原生小程序
    • 适合简单的场景
  • v-htmlvue语法
  • <u-parse :html="">uview组件
    • 适合复杂场景 如：图文详情
      1. <!-- vue语法 -->
      2. <view v-html="goodsDetail.goods_introduce"></view>
      3. <!-- uview 组件 -->
      4. <u-parse :html="goodsDetail.goods_introduce"></u-parse>
      5. <!-- 小程序原生组件 -->
      6. <rich-text :nodes="goodsDetail.goods_introduce"></rich-text>

      底部-提交订单栏

      uview模板

  1. <template>
  2.     <view class="navigation">
  3.         <view class="left">
  4.             <view class="item">
  5.                 <u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
  6.                 <view class="text u-line-1">客服</view>
  7.             </view>
  8.             <view class="item">
  9.                 <u-icon name="home" :size="40" :color="$u.color['contentColor']"></u-icon>
  10.                 <view class="text u-line-1">店铺</view>
  11.             </view>
  12.             <view class="item car">
  13.                 <u-badge class="car-num" :count="9" type="error" :offset="[-3, -6]"></u-badge>
  14.                 <u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
  15.                 <view class="text u-line-1">购物车</view>
  16.             </view>
  17.         </view>
  18.         <view class="right">
  19.             <view class="cart btn u-line-1">加入购物车</view>
  20.             <view class="buy btn u-line-1">立即购买</view>
  21.         </view>
  22.     </view>
  23. </template>
  25. <script>
  26. export default {
  28. };
  29. </script>
  31. <style lang="scss" scoped>
  32. .navigation {
  33.     display: flex;
  34.     margin-top: 100rpx;
  35.     border: solid 2rpx #f2f2f2;
  36.     background-color: #ffffff;
  37.     padding: 16rpx 0;
  38.     .left {
  39.         display: flex;
  40.         font-size: 20rpx;
  41.         .item {
  42.             margin: 0 30rpx;
  43.             &.car {
  44.                 text-align: center;
  45.                 position: relative;
  46.                 .car-num {
  47.                     position: absolute;
  48.                     top: -10rpx;
  49.                     right: -10rpx;
  50.                 }
  51.             }
  52.         }
  53.     }
  54.     .right {
  55.         display: flex;
  56.         font-size: 28rpx;
  57.         align-items: center;
  58.         .btn {
  59.             line-height: 66rpx;
  60.             padding: 0 30rpx;
  61.             border-radius: 36rpx;
  62.             color: #ffffff;
  63.         }
  64.         .cart {
  65.             background-color: #ed3f14;
  66.             margin-right: 30rpx;
  67.         }
  68.         .buy {
  69.             background-color: #ff7900;
  70.         }
  71.     }
  72. }
  73. </style>

封装组件 引入到页面中

  1. <!-- 提交订单栏 -->
  2.     <view class="submit-bar">
  3.       <SubmitBar></SubmitBar>
  4.     </view>
  7. <script>
  8. import SubmitBar from './components/submit_bar.vue'
  9. export default {
  10.   components: {
  11.     SubmitBar,
  12.   }
  13. }
  14. </script>
  16. <style lang="scss">
  17. .submit-bar{
  18.   position: fixed;
  19.   bottom: 0;
  20.   left: 0;
  21.   // 块级元素加定位之后 变成行内块 - 宽度不是100%
  22.   width: 100%;
  23. }
  24. page {
  25.   padding-bottom: 102rpx;
  26. }
  27. </style>
  1. <template>
  2.     <view class="navigation">
  3.         <view class="left">
  4.             <view class="item">
  5.                 <u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
  6.                 <view class="text u-line-1">客服</view>
  7.             </view>
  8.             <view class="item">
  9.                 <u-icon name="home" :size="40" :color="$u.color['contentColor']"></u-icon>
  10.                 <view class="text u-line-1">店铺</view>
  11.             </view>
  12.             <view class="item car">
  13.                 <u-badge class="car-num" :count="9" type="error" :offset="[-3, -6]"></u-badge>
  14.                 <u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
  15.                 <view class="text u-line-1">购物车</view>
  16.             </view>
  17.         </view>
  18.         <view class="right">
  19.             <view class="cart btn u-line-1">加入购物车</view>
  20.             <view class="buy btn u-line-1">立即购买</view>
  21.         </view>
  22.     </view>
  23. </template>
  25. <script>
  26. export default {
  28. };
  29. </script>
  31. <style lang="scss" scoped>
  32. .navigation {
  33.     display: flex;
  34.   // 更改布局
  35.   justify-content: space-around;
  36.     margin-top: 100rpx;
  37.     border: solid 2rpx #f2f2f2;
  38.     background-color: #ffffff;
  39.     padding: 16rpx 0;
  40.     .left {
  41.         display: flex;
  42.         font-size: 20rpx;
  43.     // 位移
  44.     transform: translateX(-30rpx);
  45.         .item {
  46.             margin: 0 30rpx;
  47.             &.car {
  48.                 text-align: center;
  49.                 position: relative;
  50.                 .car-num {
  51.                     position: absolute;
  52.                     top: -10rpx;
  53.                     right: -10rpx;
  54.                 }
  55.             }
  56.         }
  57.     }
  58.     .right {
  59.         display: flex;
  60.         font-size: 28rpx;
  61.         align-items: center;
  62.         .btn {
  63.             line-height: 66rpx;
  64.             padding: 0 30rpx;
  65.             border-radius: 36rpx;
  66.             color: #ffffff;
  67.         }
  68.         .cart {
  69.             background-color: #ed3f14;
  70.             margin-right: 30rpx;
  71.         }
  72.         .buy {
  73.             background-color: #ff7900;
  74.         }
  75.     }
  76. }
  77. </style>

使用vuex

  1. export default {
  2.   namespaced:true,
  3.   state: {
  4.     // 商品数组
  5.     goodsArr: []
  6.   }
  7. };

导入模块

  1. import Vue from 'vue';
  2. import Vuex from 'vuex';
  3. // 引入模块
  4. import cart from './modules/cart';
  5. Vue.use(Vuex); //vue的插件机制
  7. //Vuex.Store 构造器选项
  8. const store = new Vuex.Store({
  9.   modules: {
  10.     cart,
  11.   },
  12. });
  13. export default store;

挂载到vue实例中

  1. import Vue from 'vue'
  2. import App from './App'
  3. import uView from "uview-ui"
  4. // 引入
  5. import store from './store';
  6. Vue.use(uView)
  7. Vue.config.productionTip = false
  8. // 挂载到原型上
  9. Vue.prototype.$store = store;
  11. App.mpType = 'app'
  13. const app = new Vue({
  14.   store,
  15.   ...App
  16. })
  17. // http拦截器，此为需要加入的内容，如果不是写在common目录，请自行修改引入路径
  18. import httpInterceptor from '@/common/http.interceptor.js'
  19. // 这里需要写在最后，是为了等Vue创建对象完成，引入"app"对象(也即页面的"this"实例)
  20. Vue.use(httpInterceptor, app)
  22. app.$mount()

组件中的生命周期需要使用vue的语法

  1. created () {
  2.   console.log(this.$store);
  3. }

加入购物车

  • 传入商品信息 到提交订单栏
  • 提交订单栏 加入购物车绑定点击事件
  • 获取到当前商品的信息 提交mutaions传递商品对象
  • mutations业务
    • 判断当前商品是否存在于购物车
    • 存在 找到数组元素 执行增加计算
    • 不存在 数组新增元素 ```jsx加入购物车

methods: { handleCartAdd() { // 提交mutations this.$store.commit(“cart/cartAddMutations”,{ …this.goodsDetail, count:1， checked:true }) } },

  1. ```jsx
  2. export default {
  3.   namespaced:true,
  4.   state: {
  5.     // 商品数组
  6.     goodsArr: []
  7.   },
  8.   mutations: {
  9.     cartAddMutations (state,goods) {
  10.       const index = state.goodsArr.findIndex(item => item.goods_id === goods.goods_id)
  11.       if (index !== -1) {
  12.         // 存在 找到该商品修改信息
  13.         state.goodsArr[index].count++
  14.         // console.log('商品数量',state.goodsArr[index].count);
  15.       } else {
  16.         // 不存在 购物车数组加入新元素
  17.         state.goodsArr.push(goods)
  18.         // console.log('添加新元素',state.goodsArr);
  19.       }
  20.     }
  21.   }
  22. };

使用vuex提供的辅助函数 mapMutations 来简化代码

  1. import {mapMutations} from 'vuex'
  3.   methods: {
  4.     ...mapMutations('cart', ['cartAddMutations']),
  5.     handleCartAdd () {
  6.       this.cartAddMutations({
  7.         ...this.goodsDetail,
  8.         count: 1,
  9.         checked: true
  10.       })
  11.     }
  12.   }

数据持久化，通过本地存储 来管理购物车数据

小程序中的本地存储，可以存储任意类型，不需要转成json

  • 存
    • uni.setStorageSync('名称'，数据)
  • 取
    • uni.getStorageSync('名称')
      1. export default {
      2. namespaced:true,
      3. state: {
      4. // 商品数组 先取本地数据，没有才是空数组
      5. goodsArr: uni.getStorageSync('cart') ||[]
      6. },
      7. mutations: {
      8. cartAddMutations (state,goods) {
      9.  const index = state.goodsArr.findIndex(item => item.goods_id === goods.goods_id)
      10.  if (index !== -1) {
      11.    // 存在 找到该商品修改信息
      12.    state.goodsArr[index].count++
      13.    console.log('商品数量',state.goodsArr[index].count);
      14.  } else {
      15.    // 不存在 购物车数组加入新元素
      16.    state.goodsArr.push(goods)
      17.    console.log('添加新元素',state.goodsArr);
      18.  }
      19.  // 修改数据之后都需要存储
      20.  uni.setStorageSync('cart',state.goodsArr)
      21. }
      22. }
      23. };

      购物车图标

      商品数量显示

      计算属性，来计算总的购买数量getters

  1. getters: {
  2.     // 购物车商品的总数量
  3.     goodsTotalCount(state) {
  4.       return state.goodsArr.reduce((sum,item) => item.count + sum,0)
  5.     }
  6.   }
  1. <u-badge
  2.           class="car-num"
  3.           :count="goodsTotalCount"
  4.           type="error"
  5.           :offset="[-3, -6]"
  6.         ></u-badge>
  8. import { mapMutations, mapGetters } from 'vuex'
  10. computed: {
  11.   ...mapGetters('cart',['goodsTotalCount'])
  12.   },

点击跳转

跳转到tabbar页面 需要添加open-type=""属性

  1. <navigator 
  2.         class="item car"
  3.         url="/pages/cart/cart"
  4.         open-type="switchTab"
  5.       >
  6.         <u-badge
  7.           class="car-num"
  8.           :count="goodsTotalCount"
  9.           type="error"
  10.           :offset="[-3, -6]"
  11.         ></u-badge>
  12.         <u-icon
  13.           name="shopping-cart"
  14.           :size="40"
  15.           :color="$u.color['contentColor']"
  16.         ></u-icon>
  17.         <view class="text u-line-1">购物车</view>
  18.       </navigator>