更新记录

3.1.22（2021-07-27）

1

平台兼容性

uniapp-mall

基于 uniapp 开发的社交电商 app

目录结构

|-- . gitignore
|-- App.vue
|-- main.js
|-- manigest.json
|-- README.md
|-- uni.scss
|-- common (存放公共文件)
    |-- css
    |-- js
|-- components (存放自定义组件、第三方组件)
|-- pages (页面)
|-- static (静态资源)
    |-- images (图片- 按照页面划分图片)
|-- store (全局状态管理)
|-- unpackage (导出文件)
|-- utils (工具脚本)

备注

1. 商品模版：实物 预定 虚拟 ('PRACTI','RESERVE','VIRTUAL')

   资源路径

   路径地址

   http://orenda-cache.oss-cn-beijing.aliyuncs.com/uniappmall/

   sacc 中使用

   background: url('#{$public-static}static/user/userMsg/bz2.png');

   vue 中使用

   ## 组件 #### 搜索框组件引入方式
2. 引入方式

   <z-search :disabled="true" placeholder="请输入商品名称" @click="goTo('/pages/classify/skip/skip')"></z-search>

3. 参数说明
   • disabled 默认为 false，为 true 则失焦
   • placeholder 默认文案
   • click 点击事件

z-navbar 头部导航栏

1. 本组件是基于官方提供的 NavBar,做了轻度封装 NavBar
2. 特性
   • 支持自定义左、中、右元素
   • 导航栏滚动时，会定位在头部
   • 高度包含状态栏
   • 组件遵循规范，无需import引入，直接使用
3. 使用方式

   //示例 1
   <z-navbar>
       <view class="z-navbar__left" slot="left">
            左侧按钮
       </view>
       <view class="z-navbar__title">
           居中标题
       </view>
       <view class="z-navbar__right" slot="right" @click="faxianSearch">
           右侧元素
       </view>
   </z-navbar>
   //示例 2
   <z-navbar @clickLeft='back' left-icon="back" left-text="" border="">
       <block slot="content">
           <view class="searchF">
               <view class="search">
                   <icon type="search"></icon>
                   <input type="text" v-model="searchValue" placeholder="请输入商品名称或订单编号">
               </view>
           </view>
           <view class="Navlist">
               <view @click="changeActive(index)" v-for="(item,index) in navData" :key="index"
                   :class="index===active?'active':''">
                   {{item}}
               </view>
           </view>
       </block>
   </z-navbar>

封装 mixins 方法

1. 如果未登陆，则重定向登录页 - 示例

   //  导入 minxis 工具包
   import mixinUtil from '@/mixins/utils.js'
   export default {
       mixins:[mixinUtil], //引入 mixins 方法
       onLoad() {
           // mixins 方法，如果未登陆，则重定向登录页
           this.handleLogin()
       }
   }

2. 方便页面组件跳转 - 示例

   // 点击组件跳转路由
   <view @click="goTo('/pages/health/detection')">
   
   //  导入 minxis 工具包
   import mixinUtil from '@/mixins/utils'
   export default {
       mixins:[mixinUtil], //引入 mixins 方法
   }

实例 - 使用 store

import {
    // mapState,
    mapGetters,
    mapMutations,
} from 'vuex'
export default {
    computed:{
            // ...mapState({ //mapState 方式获取 state
            //  hasLogin:(state)=>state.test.hasLogin
            // }),
            ...mapGetters([ //mapGetters 方式获取多个 state
                'hasLogin'
            ])
    },
    onLoad() {
        // 调用 mutations 方法
        this.handleLogin(true)
        // 获取到 state
        <!-- console.log('this.hasLogin:',this.hasLogin) -->
    },
    methods: {
        ...mapMutations(['handleLogin'])
    }
}

实例-接口请求

//接口请求统一在 apis 文件封装
// 封装实例如下
import request from '@/common/utils/request/index.js'
export function getTest(data) {
    //return Promise
  return request.request({
      header:'content-type: application/json',//默认，可为空
    url: `/get`,
    method: "GET",
    data,
  });
};

接口统一处理

// 登录失败 __code 为 AUTH, 统一清楚登录状态，重新登录
{
    "__code": "AUTH",
}
// 接口失败 __code 为 ERROR，__message为失败原因
{
    "__code": "ERROR",
    "__message": "您发送的验证码过多，请稍后再试"
}
// 接口成功 __code为 OK,data 为返回数据
{
    "option": null,
    "data": {
    },
    "__code": "OK",
    "__message": ""
}

接口模拟请求

import {
    pwdLogin
} from '@/apis/user/login'
let {__code,data,__message} = await pwdLogin(obj)
if (__code === 'OK') {
    //处理 data
}else{
    // 处理错误
    uni.showToast({
        icon: "none",
        title:__message
    })
}