zan-choose-dialog

zan-choose-dialog

选择对话框，包括商品，微页面等等。

同时提供了一个通用的选择对话框架子，可以通过参数生成新的选择对话框。

使用场景

目前用于 Design 组件的所有选择对话框。

ChooseMenu 示例:

代码演示

:::demo ChooseMenu 基本用法

import ChooseMenu from 'zan-choose-dialog/lib/ChooseMenu';
 
const global = {
    kdt_id: 63077,
    user_id: '9066245',
    mp_data: {
        team_name: 'Qi码是家馆',
        business: '[{"value":"26","text":"\\u6c7d\\u8f66\\u517b\\u62a4"}]',
        business_id: '26',
        store_url: '',
        contact_name: '',
        mobile: '13588779255',
        country_code: '+86',
        qq: '1234567865',
        company_id: 0,
        logo:
            'http://img.yzcdn.cn/upload_files/2017/05/25/FvgC685sh3OrEfCFdHaLR4Ybqqfu.png',
        team_type: '0'
    },
    csrf_token:
        '79919140318861070442484512822591644363312957297758690257784292303863770554763',
    isWishOpen: 1,
    lock_create_showcase: false,
    paidcontent_auth: true,
    url: {
        base: '//www.youzan.com',
        bbs: 'http://bbs.youzan.com',
        cdn: '//b.yzcdn.cn',
        cdn_static: 'https://b.yzcdn.cn/v2',
        daxue: 'http://xuetang.youzan.com',
        fenxiao: '//fx.youzan.com',
        fuwu: 'http://fuwu.youzan.com',
        img: '//img.youzan.com',
        imgqn: 'https://img.yzcdn.cn',
        login: '//login.youzan.com',
        open: '//open.youzan.com',
        static: 'https://static.youzan.com/v2',
        trade: 'https://trade.koudaitong.com',
        v1: 'https://www.youzan.com/v1',
        v1_static: '//b.yzcdn.cn/v1',
        v2: '//www.youzan.com/v2',
        wap: 'https://h5.youzan.com/v2',
        ws: 'ws://s.im.youzan.com:83',
        www: '//www.youzan.com/v2',
        youzan: '//www.youzan.com',
        cloud: 'https://dl.yzcdn.cn',
        pf: 'https://pifa.youzan.com',
        uic: 'https://uic.youzan.com',
        store: '//store.youzan.com',
        market: 'https://pfmarket.youzan.com',
        im: 'http://b-im.youzan.com',
        help: '//help.youzan.com',
        materials: '//materials.youzan.com'
    }
};
 
class Simple extends Component {
    state = {};
 
    render() {
        return (
            <ChooseMenu
                value={this.state.value || {}}
                onChoose={this.onMenuChoose}
                config={global}
                extraConfig={{ withCredentials: true }}
            />
        );
    }
 
    onMenuChoose = data => {
        this.setState({
            value: data
        });
    };
}
 
ReactDOM.render(<Simple />, mountNode);

:::

支持的对话框

这些对话框可以单独使用。

import chooseXXX from 'zan-choose-dialog/lib/dialogs/xxx'

chooseXXX({
    // 是否多选
    multiple: boolean,
 
    // 选中时的回调函数
    onChoose: data => void,
 
    // window._global
    config: object
})

营销活动：

• app-card: 刮刮卡
• app-crazyguess: 疯狂猜
• app-wheel: 幸运大抽奖
• app-zodiac: 生肖翻翻看

微页面：

• feature: 微页面
• feature-category: 微页面分类
• feature-and-category: 微页面及分类

商品：

• goods: 商品
• goods-tag: 商品分组
• goods-and-rag: 商品及分组

知识付费:

• paid-columns: 知识专栏
• paid-content: 知识内容

UMP:

• ump-limited-discount: 限时折扣
• ump-seckill: 秒杀

其他未分类的：

• component: 自定义组件
• coupon: 优惠券
• vote: 投票
• custom-link: 自定义链接

ChooseMenu API

Design 组件的下拉选择菜单。

value 的类型：

type ValueType = {
    link_id: number | string,
    link_title: string,
    link_url: string,
    link_type: string,
    alias: string
};

参数	说明	类型	默认值	备选值
trigger	没有选中时的 trigger 节点	node
value	当前选中的值	ValueType
onChoose	选中时的回调函数	(ValueType) => void
menuItems	可用的菜单项目 key	string[]
config	全局配置	object	window._global
isWeapp	是否默认为小程序环境	bool	false
isMultiStore	是否开启多门店菜单	bool	false
hasPointsStore	是否开启积分商城菜单	bool	false
menuStyle	菜单样式	object
className	自定义额外类名	string	''	''
extraConfig	额外配置项	object

可选的菜单类型：

{
  FeatureAndCategory: '微页面及分类',
  FeatureCategory: '微页面分类',
  GoodsAndTag: '商品及分组',
  GoodsTag: '商品分组',
  Goods: '商品',
  Coupon: '优惠券',
  SecKill: '秒杀活动',
  Apps: '营销活动',
  Survey: '投票调查',
  History: '历史消息',
  HomePage: '店铺主页',
  UserCenter: '个人中心',
  Cart: '购物车',
  AllGoods: '全部商品',
  Chat: '在线客服',
  PointsStore: '积分商城',
  PaidColumn: '知识专栏',
  PaidContent: '知识内容',
  MyPaidContent: '我购买的专栏、内容',
  Link: '自定义链接',
 
  // 只有多网点时才有效
  OfflineList: '网点列表',
  OfflinePage: '某网点主页',
 
  // 小程序专用
  WeappGoodsAndTag: '商品及分组',
  WeappFeature: '小程序微页面',
  WeappLink: '小程序路径'
}

如果只需要微页面相关的菜单，将 menuItems 设置为 ['FeatureAndCategory', 'FeatureCategory'] 即可。

choose API

type Tab = {
    title: ReactNode,
    multiple: boolean,
    columns: {[key: string]: any}[],
    actions: {[key: string]: any}[],
    defaultSortBy: string,
    defaultSortType: string,
    buildQuery: (queryOptions: object) => object,
    formatData: (data: object) => any,
    placeholder: ReactNode,
    url: string,
    rowKey: string,
    canSelectRow: (rowData: any, rowIndex: number) => bool
}
 
choose(Tab[]): void

更新日志

4.1.7 (2017-10-26)

• [new feature] 新增参数 isWeapp 判断是否为小程序环境
• [bug fix] 更正了小程序微页面链接出现在普通微页面里边

4.1.6-beta (2017-10-19)

• 增加了拼团,门店弹窗
• 优惠券弹窗列表接口增加 source: 'feature'参数;价值展示规则修改

4.1.5-beta (2017-9-21)

• 增加了小程序微页面弹窗