showjoy-shop达人店工程文档

此文档为达人店项目文档大纲,文档内有不同入口详细记录各部分内容。

一、UI组件

gitlab地址

点击前往

[src]
  | -- [components]
  |     | -- [dialog]
  |     |     | -- README.md
  |     |     | -- dialog.js
  |     |     | -- style.less
  |     | -- [dropload]
  |     |     | -- README.md
  |     |     | -- dropload.js
  |     |     | -- style.less
  |     | -- [loading]
  |     |     | -- index.less
  |     |     | -- loading.js
  |     |     | -- readme.md
  |     | -- [wxshare]
  |     |     | -- readme.md
  |     |     | -- wxshare.js

组件列表

组件 文档 描述

dialog

文档

弹框组件包含了toast、alert、 wxShare方法

dropload

文档

上拉加载更多组件

loading

文档

异步加载等待动画

wxshare

文档

微信分享组件

m-picker

文档

地址/时间选择组件

m-swipe

文档

地址/时间选择组件

说明

专属于达人店的一套UI组件,目前根据业务需要正在搭建中。组件都存放在shop工程仓库components内(http://git.showjoy.net/showjoy-assets/shop-m/tree/dev/src/components)

ps shop工程的UI组件不存放到fecomponent组

使用

var dialog = require('components/dialog/dialog');

// 具体使用请参考各组件文档

二、全局less mixins方法(mixins.less)

gitlab地址

点击前往

[src]
  | -- [components]
  | -- [mixins]
  |     | -- [common]
  |     | -- mixins.less

说明

mixins.less文件中包含了业务代码编写中常用的mixins方法,例如.clearfix()方法清除浮动。.arr-up(@color, @width, @height)方法编写向上的箭头等等

使用

// 具体项目less文件内

@import "../../mixins/mixins.less";

文档

编写中

三、通用less文件(common/[name].less)

gitlab地址

点击前往

[src]
  | -- [components]
  | -- [mixins]
  |     | -- [common]
  |     |     | -- animation-slide.less
  |     |     | -- color.less
  |     |     | -- grid.less
  |     |     | -- user-level.less
  |     | -- mixins.less

说明

业务中公用的具体业务less片段可以抽离到[mixins][common]文件夹下。比如color.less文件中编写了整个达人店工程的UI基础色值,色值统一在一个文件进行管理,有利于后期的维护。

通用less列表

通用less 文档 描述

animation-slid.less

编写中

css3滑动动画

color.less

编写中

达人店UI基础色值

grid.less

编写中

布局方式

user-level.less

编写中

用户等级样式

四、具体业务文档(pages)

weex 相关页面开发文档(weex业务文档)

点击前往

gitlab地址

点击前往

[src]
  | -- [components]
  | -- [mixins]
  | -- [pages]
  |     | -- [about-ebank]
  |     |     | -- about-ebank.css
  |     |     | -- about-ebank.html
  |     |     | -- about-ebank.js
  |     |     | -- about-ebank.less
  |     | -- [add-address]
  |     |     | -- add-address.css
  |     |     | -- add-address.html
  |     |     | -- add-address.js
  |     |     | -- add-address.less
  |     | -- [add-my-address]
  |     |     | -- add-my-address.css
  |     |     | -- add-my-address.html
  |     |     | -- add-my-address.js
  |     |     | -- add-my-address.less
  |     |     |
  |     |     |...
  |     |     |...

说明

pages文件夹下一个page对应一个页面。

page列表

page 文档 描述

about-ebank

编写中

美丽宝介绍页面

add-address

编写中

支付流程中新增收货地址

add-my-address

编写中

达人店「我的」新增地址

address-choose

编写中

支付流程中选择收货地址

address-of-mine

编写中

达人店「我的」我的地址管理页面

alibund

编写中

收益模块 绑定提现支付宝页面

cart

编写中

达人店 购物车

category

编写中

达人店 「分类」页面

comment-list

编写中

评论详情页

commission-guide

编写中

达人店「我的」查看收益页面

commission-home

编写中

收益模块 收益综合

commission-order-list

编写中

收益模块 销售详情

coupons

编写中

支付流程 选择优惠劵页面

eight-bank

编写中

【废弃】达人店「我的」美丽宝

family-list

编写中

收益模块 家族成员详情页

free-register

编写中

达人店 免费注册店铺页面

free-shop

编写中

达人店 免费申请开店页面

groupon-item-detail

[废弃]

【废弃】特卖团购商品的详情页

home

编写中

达人店 首页

introduce

[废弃]

【废弃】达人店介绍页面

introduce-fb

编写中

达人店 介绍页面

introduce-pay

[废弃]编写中

【废弃】达人店确认支付页面

introduce-pay-s

[废弃]

达人店 确认开店支付页面

invitation

编写中

达人店 邀请页面

item-detail

编写中

普通商品详情页

item-pic

编写中

商品图文详情页

member-rights

[废弃]

【废弃】会员介绍页面

my-cards

编写中

达人店「我的」我的卡券

noupgrade

编写中

达人店「我的」店铺升级反馈已升级

order-detail

编写中

达人店「我的」我的订单进入订单详情页面

order-entry

编写中

购买流程 确认订单页面

order-list

[废弃]

达人店 「我的」我的订单

order-list-weex

[废弃]

达人店 「我的」我的订单

shop-order-weex

[废弃]

达人店 本店订单

pay-failure

编写中

支付流程 支付反馈失败

pay-method

编写中

支付流程 支付方式选择

pay-page

编写中

达人店 填写信息 开店支付

pay-success

编写中

支付流程 支付反馈成功

picc

编写中

picc 介绍页面

point

[废弃]

【废弃】支付流程 积分选择页面

product-management

编写中

达人店 管理商品页面

recruit-list

编写中

收益模块 纳新详情页面

red-packets

[废弃]

【废弃】支付流程 红包选择页面

register

编写中

达人店 开店填写头像、店名信息

search-result

编写中

搜索结果页面

shop-footer

编写中

shop工程公共footer

shop-header

编写中

shop工程公共header

shop-modify

编写中

达人店 「我的」点击头像跳转修改店铺信息页面

shop-upgrade-home

编写中

达人店「我的」店铺升级反馈升级详情

success

编写中

达人店 开店成功反馈页面

update-address

编写中

达人店 「我的」修改收货地址

user-info

编写中

达人店 「我的」页面

withdraw-home

编写中

收益模块 提现主页

withdraw-list

编写中

收益模块 提现记录页面

verify-account

编写中

新账号体系 验证账号是否绑定过手机号

五、全局配置选项

(一)data-sjshop-nopullrefresh="true"

说明

安卓原生客户端全局使用了下拉加载控件,导致和h5页面内部分滚动或touchmove事件冲突,暂时添加此自定义属性告知安卓客户端此页面不使用下拉加载控件。

使用

在html中的默认含有contentid的标签上添加此自定义属性。

<div id="content" data-sjshop-nopullrefresh="true"></div>  

(二)#set($isRem=true)

说明

新页面强制使用rem布局,需要在相应的page页面上方添加此设置。

使用

#set($title="我的购物袋") 
#set($mainTitle="购物袋")
#set($keywords="") 
#set($description = "我的购物袋")
#set($topTitle = $title) 
#set($newTitle="$!{title}")
#set($newKeywords="$!{keywords}") 
#set($newDescription ="$!{description}") 
#set($carts=$!{cartView.carts})
#set($isEmpty=$!{cartView.Empty})
#set($isRem=true)  // here**********
#parse("mobile/common/layout/head.html")
#parse("mobile/common/layout/header.html")

(三) webp图片兼容

达人店项目全站支持webp图片,在html、css中编写需要遵守一定规则。

webp编写文档

六、全局变量信息

(一)订单状态变量

{{if item.status == 20}}
    <p class="status">已收货</p>
{{else if item.status == 23}}
    <p class="status">配送中</p>
{{else if item.status == 26}}
    <p class="status">已退货</p>
{{else if item.status == -2}}
    <p class="status">交易被取消</p>
{{else if item.status == 21}}
    <p class="status">等待买家支付</p>
{{else if item.status == 22}}
    <p class="status">待发货</p>
{{else if item.status == 24}}
    <p class="status">售后处理中</p>
{{else if item.status == 25}}
    <p class="status">退货关闭</p>
{{else if item.status == 30}}
    <p class="status">提交海关审核</p>
{{else if item.status == 31}}
    <p class="status">海关审核失败</p>
{{else if item.status == 32}}
    <p class="status">海关审核成功</p>
{{else if item.status == 33}}
    <p class="status">海淘超卖</p>
{{else if item.status == 40 || item.status == 41 || item.status == 42 }}
    <p class="status">订单审查中</p>
{{/if}}   

(二)全局变量

变量名 钩子名 描述

$!{userImage}

j_ShopUserImage

用户头像

$!{shopName}

j_ShopName

店铺名称

j_ShopUrl

分享的店铺链接

$isTestEnv

--

是否测试环境

$!{pageName}

--

页面名称

$!{fromapp} == 'showjoyshopiOS/showjoyshopAndroid'

--

当前环境是达人店iOS还是andriod

$!{isNewFooter}

--

四tab的底部栏

$!myShop&&$!{myShop.isPaid()}

--

全符合代表是已开店用户

$!{position}

--

职位 @param {number}

$!{positionName}

--

职位名称 @param {string}

$!{shopId}

--

如果所访问页面中没有设定shopId,则取redis中shopId,若小于0,取本店铺shopId,若未开店,取0

南洋

继续阅读此作者的更多文章

尚妆大厦 http://www.lvdada.org