使用场景

设置购买商品数量与套餐的页面

引入模块

//.wxml
    // data-has-cart:是否带有加入购物车功能,true表示有,false表示无
    // data-cart-text:加入购物车按钮文案,data-has-cart为fasle时此字段可不填,默认为‘加入购物车’
    // data-buy-text:立即购买按钮文案,默认为‘立即购买’
    //data-action:当底部只有一个按钮时的回调说明,'cart'表示加入购物车,‘buy’表示立即购买

    <button class="wii-btn" bindtap="wiiShowActionSheet" data-has-cart="true" data-cart-text="加入购物车" data-buy-text="立即购买">购买菜单</button>
    <import src="../../components/actionSheet/actionSheet.wxml"/>
    <template is="actionSheet" data="{{wiiActionSheet}}"/>
//.js
    var actionSheet = require('../../components/actionSheet/actionSheet');

配置组件数据

//skuData表示商品套餐数据
var skuData = [
                   {
                        id:1,//商品套餐id
                        name: '中秋礼包3',//套餐名字
                        price:88,//套餐现价
                        stock:11,//库存
                        imgUrl: 'http://p.qpic.cn/automall_pic/0/20161223140141_89862/500'//套餐头图
                    },
                    {
                        id:2,
                        name: '中秋礼包4',
                        price:66,
                        stock:11,//库存
                        imgUrl: 'http://p.qpic.cn/automall_pic/0/20170105153411_93293/500'
                    }
                ];
var actionSheetOption = {
    data:{
        wiiActionSheet:{
            data:{
                skuList:skuData,//套餐列表
                choosedSku:skuData[1]//默认选中的套餐
            }
        }
    }
};
actionSheet = utils.assign(actionSheet,actionSheetOption);

wiiShowActionSheet

调起购买商品菜单

示例
//.wxml
...
   // data-has-cart:是否带有加入购物车功能
   // data-cart-text:加入购物车按钮文案
   // data-buy-text:立即购买按钮文案
    <button class="wii-btn" bindtap="wiiShowActionSheet" data-has-cart="true" data-cart-text="加入购物车" data-buy-text="立即购买">购买菜单</button>
    <import src="../../components/actionSheet/actionSheet.wxml"/>
    <template is="actionSheet" data="{{wiiActionSheet}}"/>
...
//.js
...
var actionSheet = require('../../components/actionSheet/actionSheet');
var pageSetting = {
    ...
    callback:function(){
        var _this = this;
        switch(arguments[0]){

            case 'actionSheet':
                console.log(arguments[1]);
                var type=arguments[2];
                if(type == 'buy'){
                 //点击立即购买之后的回调函数

                }eles if(type == 'cart'){
                //点击加入购物车之后的回调函数

                }
                break;
            default:
                break;
    },
    ...
}
var skuData = [
                    {
                        id:1,
                        name: '中秋礼包3',
                        price:88,
                        stock:99,
                        imgUrl: 'http://p.qpic.cn/automall_pic/0/20161223140141_89862/500'
                    },
                    {
                        id:2,
                        name: '中秋礼包4',
                        price:66,
                        stock:77,
                        imgUrl: 'http://p.qpic.cn/automall_pic/0/20170105153411_93293/500'
                    }
                ];
var actionSheetOption = {
    data:{
        wiiActionSheet:{
            data:{
                skuList:skuData,
                choosedSku:skuData[1]
            }
        }
    }
};
actionSheet = utils.assign(actionSheet,actionSheetOption);
pageSetting = utils.assign(pageSetting,actionSheet);
Page(pageSetting);

results matching ""

    No results matching ""