buyer端组件说明

RegionPicker 地区选择器

地区选择器，一般用于设置地址相关功能 比如：收货地址页

Props

参数	类型	默认值	可选值	说明
default	Array	-	-	默认地区 比如：[province_id,city_id,county_id,town_id]
api	String	-	-	组件调用的API接口

RegionPicker示例

  <template>
    <div>
      <en-region-picker :api="MixinRegionApi" :default="defaultRegions" @changed="changedRegionPicker"/>
    </div>
  </template>

  import EnRegionPicker from "@/components/RegionPicker"
  export default {
    mixins: [mixin], //引入mixin文件就不需要定义MixinRegionApi
    components: { EnRegionPicker },
    data() {
      return {
        defaultRegions: [province_id,city_id,county_id,town_id], //默认地区id
        MixinRegionApi: '${api.base}/regions/@id/children' // 直接使用即可,页面中不需要定义(mixin文件定义的有,这里做示范)
      }
    },
    methods: {
      // 地区发生变化时触发
      changedRegionPicker(object) {
        console.log(object)
      }
    }
  }

RegionCascader 地址选择器

该组件一般用于展示地址的地方， 比如：供应商、采购单页面收货地

Props

参数	类型	默认值	可选值	说明
value	Array	-	-	省市区id
province	String	-	-	省id
city	String	-	-	市id
county	String	-	-	区id

RegionCascader示例

  <template>
    <div>
      <en-region-cascader
        :province.sync="form.ship_province"
        :city.sync="form.ship_city"
        :county.sync="form.ship_county"
      />
    </div>
  </template>

  import EnRegionCascader from "@/components/RegionCascader"
  export default {
    components: { EnRegionCascader },
    data() {
      return {
        from: {
          ship_province: '',
          ship_city: '',
          ship_county: ''
        }
      }
    }
  }

Logo 网站logo

注：组件不需要传值 在管理端-设置管理-网点设置-系统设置-站点设置中配置网站LOGO即可

Logo 示例

  <template>
    <div>
      <en-logo/>
    </div>
  </template>

  import EnLogo from "@/components/Logo"
  export default {
    components: { EnLogo }
  }

CartStep 购物车页面步骤条

该组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景

Props

参数	类型	默认值	可选值	说明
step	Number	1	-	设置当前处于第几步

CartStep 示例

  <template>
    <div>
      <en-cart-step :step="1"/>
    </div>
  </template>

  import EnCartStep from "@/components/CartStep"
  export default {
    components: { EnCartStep }
  }

Category 商品分类

该组件一般用于展示商城的商品分类列表，例如：首页商品分类

Props

参数	类型	默认值	可选值	说明
init-unfold	Boolean	false	true	是否展开分类列表

Category示例

  <template>
    <div>
      <en-category :init-unfold="false"/>
    </div>
  </template>

  import EnCategory from "@/components/Category"
  export default {
    components: { EnCategory }
  }

CountDownBtn 倒计时

该组件一般用于获取验证码，通过数字的变化，提示用户进行下一步操作。

Props

参数	类型	默认值	可选值	说明
time	Number	60	-	需要倒数的时间
initTip	String	获取验证码	-	初始化提示
endTip	String	重新获取	-	倒计时结束的提示
preTip	String	-	-	倒计时开始后 秒数的前缀
sufTip	String	秒后重新获取	-	倒计时开始后 秒数的后缀
start	Function	-	-	一个异步方法，回调后开始倒计时

Events

事件名	说明	回调参数
@end	当验证码失效重新发送的时候触发	-

CountDownBtn示例

  <template>
    <div>
      <en-count-down-btn :time="60" :start="sendValidMobileSms" @end="getValidImgUrl"/>
    </div>
  </template>

  import EnCountDownBtn from "@/components/CountDownBtn"
  export default {
    components: { EnCountDownBtn },
    methods: {
      /** 发送手机验证码异步方法 */
      sendValidMobileSms() {
        return new Promise((resolve, reject) => {
         
        })
      },
      /** 获取图片验证码URL */
      getValidImgUrl() {
        
      }
    }
  }

Face 头像组件

该组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。

Props

参数	类型	默认值	可选值	说明
url	String	assets/images/icon-noface.jpg（默认头像地址）	-	头像地址

Face示例

  <template>
    <div>
      <en-face :url="face"/>
    </div>
  </template>

  import EnFace from "@/components/Face"
  export default {
    components: { EnFace },
    data() {
      return {
        face: ''
      }
    }
  }

Footer 底部footer组件

该组件一般用于网站底部，可配置网站相关帮助文档

Footer示例

  <template>
    <div>
      <en-footer/>
    </div>
  </template>

  import EnFooter from "@/components/Footer"
  export default {
    components: { EnFooter }
  }

Header 头部Header组件

该组件中包括logo(网站logo)、search(搜索)、settleup(购物车)、nav(导航)组件,封装成了一个header组件

Header示例

  <template>
    <div>
      <en-header/>
    </div>
  </template>

  import EnHeader from "@/components/Header"
  export default {
    components: { EnHeader }
  }

HeaderOther 头部组件

该组件一般用于页面头部内容（左侧包括logo组件及标题，可自定义右侧内容），如登录注册页头部

Props

参数	类型	默认值	可选值	说明
title	String	-	-	标题
width	Number	1000	-	宽度

HeaderOther示例

  <template>
    <div>
      <en-header-other title="欢迎登录"/>
    </div>
  </template>

  import EnHeaderOther from "@/components/HeaderOther"
  export default {
    components: { EnHeaderOther }
  }

Nav 导航栏

该组件一般用于首页头部导航栏,可在管理端-页面设置-页面设置-PC端da导航菜单里面配置

nav示例

  <template>
    <div>
      <en-nav />
    </div>
  </template>

  import EnNav from "@/components/Nav"
  export default {
    components: { EnNav }
  }

Operation 跳转操作组件

该组件一般用于页面中模块的跳转，如首页轮播图（管理端配置图片及图片跳转的页面类型及参数）。

Props

参数	类型	默认值	可选值	说明
opt	Object	-	-	返回需要跳转的页面类型及参数，对象形式

Operation示例

  <template>
    <div>
      <en-operation :opt="{type: '', value: ''}">
        <img :src="">
      </en-operation>
    </div>
  </template>

  import EnOperation from "@/components/Operation"
  export default {
    components: { EnOperation }
  }

PicZoom 图片放大镜组件

该组件一般用于商品图片放大展示，如商品详情页的商品图，鼠标移动到图片上时该位置图片呈现放大镜的效果。

Props

参数	类型	默认值	可选值	说明
scale	Number	2.5	-	图片放大倍数
url	String	-	-	图片地址
bigUrl	String	-	-	大图地址
scroll	Boolean	false	true	放大时页面是否可滚动
showEidt	Boolean	false	true	是否显示旋转图片按钮

PicZoom示例

  <template>
    <div>
      <pic-zoom :url="" :big-url="" :show-eidt="true" ></pic-zoom>
    </div>
  </template>

  import PicZoom from "@/components/PicZoom"
  export default {
    components: { PicZoom }
  }

Search 搜索框

商品及店铺的搜索组件，如首页顶部搜索

Props

参数	类型	默认值	可选值	说明
hide-keywords	Boolean	false	true	是否显示热搜词

Search示例

  <template>
    <div>
      <en-search :hide-keywords="true" />
    </div>
  </template>

  import EnSearch from "@/components/Search"
  export default {
    components: { EnPicZoom }
  }

Settleup 购物车组件

该组件一般用于展示当前账号的购物车及购物车数据，如首页顶部我的购物车

Settleup示例

  <template>
    <div>
      <en-settleup/>
    </div>
  </template>

  import EnSettleup from "@/components/Settleup"
  export default {
    components: { EnSettleup }
  }

Shortcut 快捷栏

该组件一般用于展示在网站顶部，显示快捷标签，如首页顶部快捷栏（我的订单、我的收藏、站点导航等）

Settleup示例

  <template>
    <div>
      <en-shortcut/>
    </div>
  </template>

  import EnShortcut from "@/components/Shortcut"
  export default {
    components: { EnShortcut }
  }

ShopLogo 店铺logo

该组件一般用于展示店铺logo的地方，如店铺列表页，或者店铺收藏页的店铺logo展示等场所。

Props

参数	类型	默认值	可选值	说明
url	String	assets/images/icon-no-shop-logo.jpg（默认logo地址）	-	店铺logo地址

ShopLogo示例

  <template>
    <div>
      <en-shop-logo :url="shop_logo" />
    </div>
  </template>

  import EnShopLogo from "@/components/ShopLogo"
  export default {
    components: { EnShopLogo },
    data() {
      return {
        shop_logo: ''
      }
    }
  }