iov-petrochina v0.3.9

智能小程序中石油页面模板

Introduction:

为了方便开发者组件开发，提供一个可用于开发、调试的模板

Quick Start

安装依赖： npm i iov-petrochina

使用示例

getPerm 授权信息

授权信息

属性说明：

示例

json

{
    "navigationBarTitleText": "",
    "usingComponents": {
        "getperm": "iov-petrochina/lib/getPerm"
    }
}

swan

<getperm bindretry="retry" />

js

Page({
    retry: function (e) {
        console.log('重试');
    }
});

verify 发送验证码

发送验证码

属性说明：

示例

json

{
    "usingComponents": {
        "verify": "iov-petrochina/lib/verify"
    }
}

swan

<verify
    imgUrl="https://img.yzcdn.cn/vant/cat.jpeg"
    logUrl="../oilStation/index"
    phoneNum="13987654321"
    correctCode="1234"
    bindlogin="login"
    bindgetcode="getcode"
/>

js

Page({
    data: {},
    login: function (e) {
        console.log('登录函数');
    },
    getcode: function (e) {
        console.log('获取验证码函数');
    }
});

oilStation 油站列表

油站列表

属性说明：

示例

json

{
    "usingComponents": {
        "oilstation": "iov-petrochina/lib/oilStation"
    }
}

swan

<oilstation linkUrl="../detail/index" list="{{oilList}}" bindclickNavi="navigation" bindselected="selected" />

js

Page({
    selected: function (e) {
        console.log('选择油站函数,已选择: ');
        console.log(e);
    },
    navigation: function (e) {
        console.log('触发导航事件');
        console.log('油站信息', e);
    },
    data: {
        oilList: [
            {
                address: '湖南省长沙县黄兴镇035县道',
                beginDate: null,
                beginTime: null,
                cityCode: '102',
                cityCompany: '湖南长沙销售分公司',
                cityName: null,
                closingTime: '23:00:00',
                creationTime: '2019-08-23T02:25:15.000+0000',
                distance: '0.34',
                endDate: null,
                endTime: null,
                founder: null,
                id: null,
                isCaChe: true,
                isCardpay: null,
                isFood: true,
                isFreeBoiledWater: true,
                isFreeWater: true,
                isSelfHelp: true,
                isWC: true,
                isWeixiuJiJiu: true,
                landmark: null,
                lastChangeTime: null,
                localName: '仙人加油站',
                manage: null,
                managerName: '段益',
                managerPhone: '13787107002',
                modifier: null,
                nature: null,
                oilNo: null,
                oilPrice: null,
                oliStationCode: '1A2J',
                openingTime: '6:00:00',
                otherServices: null,
                posX: 116.410125,
                posY: 39.891903,
                provinceCode: '1000',
                provinceCompany: '中国石油湖南销售分公司',
                provinceName: null,
                rechargeStation: true,
                roundBBQ: null,
                roundBank: null,
                roundJingDian: null,
                roundStayRoom: null,
                stationName: '湖南长沙仙人加油站',
                stationPhone: null,
                status: 2,
                telePhone: '13787107002',
                tollStation: null,
                type: null
            }
        ]
    }
});

detail 选择油枪号

选择油枪号

属性说明：

示例:

json

{
    "usingComponents": {
        "detail": "iov-petrochina/lib/detail"
    }
}

swan

<detail
    backUrl="../pageList/index"
    linkUrl="../selectOrder/index"
    gasName="广州市黄浦区加油站（黄埔南路向西786加油站…黄埔南…"
    distance="100m"
    gasAddress="南山区登良路25-1南山区登良路25-1南山区登良路25-1南山区登良..."
    gasList="{{list}}"
    bindselected="selected"
    bindback="back"
    bindinput="input"
    bindfocus="focus"
    bindblur="blur"
    bindconfirm="confirm"
/>

js

Page({
    selected: function (e) {
        console.log(`选择油枪号函数,已选择: 第 ${e.currentTarget.dataset.value + 1} 个`);
        console.log(e.currentTarget.dataset.info);
    },
    back: function (e) {
        console.log(`重选油站函数`);
    },
    input: function (e) {
        console.log(`监听输入事件`);
    },
    focus: function (e) {
        console.log(`监听获取焦点事件`);
    },
    blur: function (e) {
        console.log(`监听失去焦点事件`);
    },
    confirm: function (e) {
        console.log(`监听点击完成按钮事件`);
    },
    data: {}
});

selectOrder 选择订单

选择订单

属性说明：

示例:

json

{
    "usingComponents": {
        "selectorder": "iov-petrochina/lib/selectOrder"
    }
}

swan

<selectorder
    backUrl="../pageList/index"
    linkUrl="../detailOrder/index"
    gasName="广州市黄浦区加油站（黄埔南路向西786加油站…黄埔南…"
    distance="100m"
    gasAddress="南山区登良路25-1南山区登良路25-1南山区登良路25-1南山区登良..."
    amountList="{{amountList}}"
    gas="{{gasData}}"
    gasIndex="{{gasIndex}}"
    bindback="back"
    bindselected="selected"
    bindretry="retry"
    failedToLoad="{{false}}"
/>

js

Page({
    back: function (e) {
        console.log('重选油站事件函数');
    },
    retry: function (e) {
        console.log('"再试一次"事件函数');
    },
    selected: function (e) {
        console.log(`选择订单函数,已选择: 第 ${e.currentTarget.dataset.value + 1} 个`);
        console.log(e.currentTarget.dataset.info);
    },
    data: {
        gasIndex: 0,
        gasData: [
            {
                oilName: '92#',
                gunIndex: 1
            }
        ],
        amountList: [
            {
                liter: 2.3,
                price: 13.26,
                data: {}
            },
            {
                liter: 5.77,
                price: 4.42,
                data: {}
            },
            {
                liter: 2.7,
                price: 1.53,
                data: {}
            },
            {
                liter: 5.7,
                price: 4.42,
                data: {}
            },
            {
                liter: 2.4,
                price: 13.23,
                data: {}
            },
            {
                liter: 0.56,
                price: 3.4,
                data: {}
            }
        ]
    }
});

detailOrder 确认下单

确认下单

属性说明：

示例:

json

{
    "usingComponents": {
        "detail-order": "iov-petrochina/lib/detailOrder"
    }
}

swan

<detail-order
    couponsUrl="../selectCoupons/index"
    backUrl="../oilStation/index"
    linkUrl="../alipay/index"
    gasName="广州市黄浦区加油站（黄埔南路向西786加油站…黄埔南…"
    distance="100m"
    gasAddress="南山区登良路25-1南山区登良路25-1南山区登良路25-1南山区登良..."
    gas="{{gasData}}"
    gasIndex="{{gasIndex}}"
    totalAmount="{{price}}"
    coupCanOrderList="{{coupCanOrderList}}"
    coupCanOrderIndex="{{coupCanOrderIndex}}"
    coupSelect="{{true}}"
    showModal="{{showModal}}"
    bindchecked="checked"
    bindcoupons="coupons"
    bindback="back"
    bindpay="pay"
/>

js

Page({
    pay: function (e) {
        console.log('支付按钮的函数');
    },
    back: function (e) {
        console.log('重选油站的函数');
    },
    coupons: function (e) {
        console.log('选择优惠券列表的函数');
    },
    checked: function (e) {
        console.log('确认');
        this.setData({
            showModal: false
        });
    },
    data: {
        price: '300',
        gasIndex: 0,
        sumText: '300',
        showModal: false,
        gasData: [
            {
                oilName: '92#',
                gunIndex: 1
            },
            {
                oilName: '95#',
                gunIndex: 2
            },
            {
                oilName: '97#',
                gunIndex: 3
            }
        ],
        coupCanOrderIndex: 0,
        coupCanOrderList: [
            {
                coupId: '广州支付宝油品',
                coupMoney: 20,
                condMoney: 200,
                expireEnd: '2022-01-01'
            }
        ]
    }
});

selectCoupons 选择优惠券

选择优惠券

属性说明：

示例:

json

{
    "usingComponents": {
        "select-coupons": "iov-petrochina/lib/selectCoupons"
    }
}

swan

<select-coupons coupCanOrderList="{{list}}" linkUrl="{{url}}" bindconfirm="confirm" />

js

Page({
    confirm: function (e) {
        console.log(`选择优惠券函数,已选择:`);
        console.log(e.detail.index, e.detail.data);
    },
    data: {
        url: '../detailOrder/index',
        checkedCoup: {
            index: 2,
            data: {
                coupId: '广州支付宝油品',
                coupMoney: 20,
                condMoney: 200,
                expireEnd: '2022-01-01'
            }
        },
        list: [
            {
                coupId: '广州支付宝油品',
                coupMoney: 20,
                condMoney: 200,
                expireEnd: '2022-01-01'
            },
            {
                coupId: '油品无限制条件',
                coupMoney: 50,
                condMoney: 300,
                expireEnd: '2022-01-01'
            },
            {
                coupId: '广州支付宝油品',
                coupMoney: 20,
                condMoney: 200,
                expireEnd: '2022-01-01'
            },
            {
                coupId: '油品无限制条件',
                coupMoney: 50,
                condMoney: 300,
                expireEnd: '2022-01-01'
            },
            {
                coupId: '广州支付宝油品',
                coupMoney: 20,
                condMoney: 200,
                expireEnd: '2022-01-01'
            },
            {
                coupId: '油品无限制条件',
                coupMoney: 50,
                condMoney: 300,
                expireEnd: '2022-01-01'
            },
            {
                coupId: '广州支付宝油品',
                coupMoney: 20,
                condMoney: 200,
                expireEnd: '2022-01-01'
            },
            {
                coupId: '油品无限制条件',
                coupMoney: 50,
                condMoney: 300,
                expireEnd: '2022-01-01'
            },
            {
                coupId: '广州支付宝油品',
                coupMoney: 20,
                condMoney: 200,
                expireEnd: '2022-01-01'
            },
            {
                coupId: '油品无限制条件',
                coupMoney: 50,
                condMoney: 300,
                expireEnd: '2022-01-01'
            }
        ]
    }
});

qrCode 二维码页面

免密支付

属性说明：

示例

json

{
    "navigationBarTitleText": "开通免密支付",
    "usingComponents": {
        "qrcode": "iov-petrochina/lib/qrCode"
    }
}

swan

<qrcode codeMsg="{{msg}}" codeUrl="{{url}}" status="2" />

js

Page({
    data: {
        msg: '手机 “支付宝” APP 扫码关联',
        url: {
            successUrl: 'https://img.yzcdn.cn/vant/cat.jpeg',
            loadingUrl: '',
            failed: ''
        }
    }
});

orderDetail 订单详情

订单详情

属性说明：

示例:

json

{
    "usingComponents": {
        "order": "iov-petrochina/lib/orderDetail"
    }
}

swan

<order
    qrCodeUrl=""
    cardMsg="【退款】【开发票】请下载中油好客e站App"
    spOrderNum="{{orderNum}}"
    detail="{{detail}}"
    phoneNumber="13987654321"
    totalPrice="300"
    bindchecked="checked"
    showCoupons="{{showCoupons}}"
    titleMsg="恭喜你，获得一张优惠券！"
    mainMsg="优惠券可在【中油好客e站】App上查看"
    btnMsg="完成"
    countDown="true,"
    second="5"
/>

js

Page({
    checked: function (e) {
        console.log('确认');
        this.setData({
            showCoupons: false
        });
    },
    data: {
        showCoupons: false,
        orderNum: '00000001',
        detail: {
            status: {
                type: 'success', // success | loading | failed
                str: '支付成功'
            },
            oilStr: '92# 汽油',
            oilGunNum: '1',
            payType: '支付宝支付',
            createTime: '2021.12.09 11:24:05',
            coupMoney: '优惠券'
        }
    }
});

modal 弹出框组件

弹出框

属性说明：

示例

json

{
    "navigationBarTitleText": "",
    "usingComponents": {
        "modal": "iov-petrochina/lib/modal"
    }
}

swan

<modal
    titleMsg="{{titleMsg}}"
    mainMsg="{{mainMsg}}"
    btnMsg="{{btnMsg}}"
    bindchecked="checked"
    isShow="{{show}}"
    countDown="{{countDown}}"
    second="{{second}}"
/>

js

Page({
    data: {
        titleMsg: '恭喜你，获得一张优惠券！',
        mainMsg: '优惠券可在【中油好客e站】App上查看',
        btnMsg: '完成',
        show: true,
        countDown: true,
        second: 5
    },
    checked: function (e) {
        console.log('确认');
        this.setData({
            show: false
        });
    }
});