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

Introduction:

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

Quick Start

安装依赖： npm i iov-petrochina

使用示例

getPerm 授权信息

授权信息

属性说明：

| 属性名 | 类型 | 默认值 | 必填 | 说明 | | ------ | -------- | ------ | ---- | -------------- | | retry | function | 无 | 是 | 重试按钮的函数 |

示例

json

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

swan

<getperm bindretry="retry" />

js

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

verify 发送验证码

发送验证码

属性说明：

| 属性名 | 类型 | 默认值 | 必填 | 说明 | | ----------- | -------- | ------ | ---- | -------------------- | | imgUrl | String | 无 | 否 | 图片的 Url | | logUrl | String | 无 | 是 | 登录跳转的 Url | | phoneNum | String | 无 | 是 | 手机号码 | | correctCode | String | 无 | 是 | 获取到的验证码 | | bindgetcode | function | 无 | 是 | 获取验证码的事件函数 | | bindlogin | function | 无 | 是 | 登录的事件函数 | | msg | String | 无 | 是 | 验证码错误的提示信息 |

示例

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 油站列表

油站列表

属性说明：

| 属性名 | 类型 | 默认值 | 必填 | 说明 | | ------------------- | -------- | ------ | ---- | -------------------- | | linkUrl | String | 无 | 是 | 跳转页面的 Url | | list | Array | 无 | 是 | 油站列表 | | list.distance | String | 无 | 是 | 距离 | | list.address | String | 无 | 是 | 油站地址 | | list.posY | String | 无 | 是 | 油站纬度 | | list.posX | String | 无 | 是 | 油站经度 | | list.stationName | String | 无 | 是 | 油站名 | | list.oliStationCode | String | 无 | 是 | 油站编号 | | list.oilPrice | Number | 无 | 是 | 油站价格 | | list.oilNo | String | 无 | 是 | 油号 | | bindselected | function | 无 | 是 | 选择油站的事件函数 | | bindclickNavi | function | 无 | 是 | 导航去油站的事件函数 |

示例

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 选择油枪号

选择油枪号

属性说明：

| 属性名 | 类型 | 默认值 | 必填 | 说明 | | ------------ | -------- | ------ | ---- | ------------------------ | | backUrl | String | 无 | 是 | 重选油站的 Url | | linkUrl | String | 无 | 是 | 跳转页面的 Url | | gasName | String | 无 | 是 | 油站名 | | distance | String | 无 | 是 | 油站距离 | | gasAddress | String | 无 | 是 | 油站地址 | | gasIndex | Number | 无 | 否 | 所选油枪的下标 | | gasList | Array | 无 | 是 | 油枪号列表 | | bindselected | function | 无 | 是 | 选择油枪号的事件函数 | | bindback | function | 无 | 是 | 重选油站的事件函数 | | bindinput | function | 无 | 是 | 输入时的事件函数 | | bindfocus | function | 无 | 是 | 获取焦点时的事件函数 | | bindblur | function | 无 | 是 | 失去焦点时的事件函数 | | bindconfirm | function | 无 | 是 | 点击完成按钮时的事件函数 |

示例:

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 选择订单

选择订单

属性说明：

| 属性名 | 类型 | 默认值 | 必填 | 说明 | | ------------------- | -------- | ------ | ---- | -------------------- | | linkUrl | String | 无 | 是 | 跳转页面的 Url | | gasName | String | 无 | 是 | 油站名 | | distance | String | 无 | 是 | 油站距离 | | gasAddress | String | 无 | 是 | 油站地址 | | gasAddressLatitude | String | 无 | 是 | 油站纬度 | | gasAddressLongitude | String | 无 | 是 | 油站经度 | | gas | Array | 无 | 是 | 油枪号列表 | | gas[i].oilName | String | 无 | 否 | 已选油号 | | gas[i].gunIndex | String | 无 | 否 | 已选油枪号 | | gasIndex | Number | 无 | 否 | 所选油枪号下标 | | amountList | Array | [] | 是 | 价格列表 | | amountIndex | Number | 无 | 否 | 所选价格下标 | | failedToLoad | Boolean | false | 是 | 订单是否获取失败 | | bindselected | function | 无 | 是 | 选择订单号的事件函数 | | bindback | function | 无 | 是 | 重选油站的事件函数 | | bindretry | function | 无 | 是 | '再试一次'的事件函数 |

示例:

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 确认下单

确认下单

属性说明：

| 属性名 | 类型 | 默认值 | 必填 | 说明 | | ------------------- | -------- | ------ | ---- | ------------------ | | backUrl | String | 无 | 是 | 重选油站页面的 Url | | couponsUrl | String | 无 | 是 | 优惠券页面的 Url | | linkUrl | String | 无 | 是 | 支付跳转的 Url | | gasName | String | 无 | 是 | 油站名 | | distance | String | 无 | 是 | 油站距离 | | gasAddress | String | 无 | 是 | 油站地址 | | gasAddressLatitude | String | 无 | 是 | 油站纬度 | | gasAddressLongitude | String | 无 | 是 | 油站经度 | | gas | Array | 无 | 是 | 油枪号列表 | | gasIndex | Number | 无 | 否 | 所选油枪号下标 | | totalAmount | Number | 无 | 否 | 价格 | | coupCanOrderList | Array | [] | 是 | 优惠券列表 | | coupCanOrderIndex | Number | [] | 是 | 所选优惠下标 | | coupSelect | Boolean | false | 是 | 是否选择优惠券 | | showModal | Boolean | false | 是 | 是否显示弹出框 | | bindback | function | 无 | 是 | 重选油站的事件函数 | | bindpay | function | 无 | 是 | 支付按钮的事件函数 | | bindcoupons | function | 无 | 是 | 优惠券的事件函数 | | bindchecked | function | 无 | 是 | 弹出框的事件函数 |

示例:

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 选择优惠券

选择优惠券

属性说明：

| 属性名 | 类型 | 默认值 | 必填 | 说明 | | ---------------- | -------- | ------ | ---- | ---------------------- | | linkUrl | String | 无 | 是 | 跳转页面的 Url | | coupCanOrderList | Array | 无 | 是 | 优惠券列表 | | bindconfirm | function | 无 | 是 | 确认选择按钮的事件函数 | | isChecked | Object | 无 | 否 | 默认选择的优惠券 | | isChecked.index | Number | 无 | 否 | 默认选择的优惠券下标 | | isChecked.data | Object | 无 | 否 | 默认选择的优惠券信息 |

示例:

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 二维码页面

免密支付

属性说明：

| 属性名 | 类型 | 默认值 | 必填 | 说明 | | ------------------ | ------ | ------ | ---- | ---------------- | | codeMsg | String | 无 | 否 | 二维码提示的信息 | | status | String | 无 | 否 | 二维码图片状态 | | codeUrl | Object | 无 | 是 | 二维码图片 Url | | codeUrl.successUrl | String | 无 | 是 | 获取成功时的 Url | | codeUrl.loadingUrl | String | 无 | 是 | 正在加载时的 Url | | codeUrl.failedUrl | String | 无 | 是 | 获取失败时的 Url |

示例

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 订单详情

订单详情

属性说明：

| 属性名 | 类型 | 默认值 | 必填 | 说明 | | ------------------ | -------- | ------ | ---- | -------------------- | | qrCodeUrl | String | 无 | 是 | 二维码 Url | | spOrderNum | String | 无 | 是 | 订单号 | | totalPrice | Number | 无 | 是 | 合计价格 | | phoneNumber | String | 无 | 是 | 人工客服电话 | | detail | Object | {} | 是 | 订单信息 | | detail.gasName | String | 无 | 是 | 加油站名称 | | detail.oilStr | String | 无 | 是 | 油号信息 | | detail.oilGunNum | String | 无 | 是 | 油枪号 | | detail.payType | String | 无 | 是 | 支付方式 | | detail.createTime | String | 无 | 是 | 创建时间 | | detail.coupMoney | String | 无 | 是 | 优惠券 | | detail.status | Object | {} | 是 | 支付状态 | | detail.status.type | String | 无 | 是 | 支付状态图标 | | detail.status.str | String | 无 | 是 | 支付状态文本 | | bindchecked | function | 无 | 是 | 弹出框的事件函数 | | showCoupons | Boolean | false | 是 | 是否展示优惠券弹出框 | | titleMsg | String | 无 | 否 | 弹出框显示的标题 | | mainMsg | String | 无 | 否 | 弹出框显示的信息 | | btnMsg | String | 无 | 否 | 弹出框按钮的文本 | | countDown | Boolean | false | 否 | 弹出框是否有倒计时 | | second | Number | 无 | 否 | 弹出框倒计时的秒数 |

示例:

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 弹出框组件

弹出框

属性说明：

| 属性名 | 类型 | 默认值 | 必填 | 说明 | | ----------- | -------- | ------ | ---- | ------------------ | | titleMsg | String | 无 | 否 | 显示的标题 | | mainMsg | String | 无 | 否 | 显示信息 | | btnMsg | String | 无 | 否 | 按钮的文本 | | isShow | Boolean | false | 否 | 是否展示弹出框 | | countDown | Boolean | false | 否 | 弹出框是否有倒计时 | | second | Number | 无 | 否 | 弹出框倒计时的秒数 | | bindchecked | function | 无 | 是 | 按钮点击事件函数 |

示例

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
        });
    }
});