首页 > 小程序教程 > 微信小程序电子产品选择品类信息登记页面设计制作开发教程

微信小程序电子产品选择品类信息登记页面设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序电子产品选择品类信息登记页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/index/information.wxml-->
<import src="../util/addresstemplate.wxml"/>
<import src="../util/searchaddresstemplate.wxml"/>
<view class="tool-tip " wx:if="{{popMsg}}">
    <text class="{{popType}}">{{popMsg}}</text>
</view>
<template wx:if="{{isShowPCC}}" is="address" data="{{addressinfo}}"/>
<template wx:if="{{isShowSearch}}" is="searchaddress" data="{{addresspois}}"/>
<view wx:if="{{!(isShowPCC||isShowSearch)}}">
    <view class="item-divider item-divider-bg item-icon-right border-bottom  padding-top" bindtap="">
        <view class="h2 border-left">选择品类</view>
        <!--        <text class="{true:'ion-ios-arrow-right',false:'ion-ios-arrow-down'}[showme]"
                   class="icon  iconfont"></text>-->
    </view>

    <checkbox-group bindchange="checkboxChange"
                    class="row  row-center row-wrap text-center light-bg select-category padding-top">
        <label class="checkbox col-25 " wx:for="{{productList}}" wx:for-item="item"
               wx:key="*this" wx:for-index="index" data-index="{{index}}">
            <view class="border-label {{item.checked?'border-label-checked':''}}">
                <text class="iconfont {{item.imgurl}}"></text>
                <checkbox hidden value="{{index}}"/>
                <view class="{{item.checked?'color-p':''}} " style="font-size:85%;">{{item.name}}</view>
                <view class="{{item.checked?'show-span':'span'}}"></view>
            </view>

        </label>
    </checkbox-group>
    <view class="padding-top"></view>
    <view class="item-divider light-bg item-icon-right border-b  padding-top">
        <view class="h2 border-left">货主联系信息</view>
    </view>
    <view class="">
        <view class="row row-no-padding">
            <view class="item item-input col-40">
                <input type="text" bindinput="bindChange" id="name" name="name"
                       placeholder="姓名" maxlength="15"/>
            </view>
            <view class="item item-input col-60">
                <input type="number" bindinput="bindChange" id="motel" name="motel" maxlength="11"
                       placeholder="手机号"/>
            </view>
        </view>

        <view class="item item-input" bindtap="getAddressPCCList">
            <input type="text" disabled value="{{addresspcd}}"
                   placeholder="省市县"/>
        </view>
        <view class="item item-input ">
            <input type="text" bindinput="bindChange" id="addrdetail" name="addrdetail"
                   placeholder="街道 门牌号(必填)" value="{{addressname}}"/>
            <view bindtap="getCurrentCity" class="positive padding-horizontal">
                <text class="iconfont icon-locationfill"></text>
            </view>
        </view>

    </view>
    <view class="padding-top"></view>
    <view class="item-divider light-bg item-icon-right border-b  padding-top">
        <view class="h2 border-left">活动类型</view>
    </view>
    <view class="padding-top"></view>
    <view class="item-divider light-bg item-icon-right border-b  padding-top">
        <view class="h2 border-left">所属厂商</view>
    </view>
</view>
 
二、wxss样式文件代码如下:
/* pages/index/information.wxss */
.select-category label {
    position: relative;
    display: inline-block;
    margin-bottom: 0.3rem;
    width: 90%!important;
    height: 4rem;
    box-sizing: border-box;
}

.select-category .iconfont {
    font-size: 1.8rem !important;
    color: #585858;
}

/*.select-category label .span {
    opacity: 0;
    color: #fff !important;
}*/

.select-category label .show-span::before {
    content: '已选';
    position: absolute;
    color: #fff !important;
    font-size: 9px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    right: 0;
    top: 4px;
    z-index: 2000;
}

.select-category label .show-span::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 1.6rem solid #00ACFF;
    border-left: 1.6rem solid transparent;
    right: 0;
    top: 0;
}

.show-span {
    opacity: 1;
}

.color-p {
    color: #00ACFF !important;
}

.border-label{
    position: relative;
    width: 90%;
    height: 90%;

}
.border-label-checked {
    border: 1px solid #00ACFF;
}
/*.select-category input:checked + label > .span {
    opacity: 1;
}

.select-category input:checked + label > .p {
    color: #00ACFF !important;
}

.select-category input:checked + label {
    border: 1px solid #00ACFF;
}*/

.item-small {
    padding: 8px 16px !important;
}
三、js页面代码如下:
// pages/index/information.js
var app = getApp();
var util = require('../../utils/util.js');
Page({

    /**
     * 页面的初始数据
     */
    data: {
        isth: 1,//是否统货
        productList: [],
        productLists: []
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.getInformationData();
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    },
    /**
     * 获取省市县数据
     */
    getAddressPCCList: function (e) {
        util.getAddressPCCList(this, e.target.dataset.item, 3, function () {

        })
    },
    /**
     * 获取附近地址数据
     */
    getCurrentCity: function (e) {
        util.getCurrentCity(this, 3, function () {

        })
    },
    /**
     * 选择打开附近地址
     */
    getAddressPois: function (e) {
        this.setData({
            isShowSearch: false,
            addressname: e.currentTarget.dataset.items.name
        })
    },
    /**
     * 用户点击checkbox
     */
    checkboxChange: function (e) {
        console.log('checkbox发生change事件,携带value值为:', e.detail.value)

        for (var pindex in this.data.productList) {
            this.data.productList[pindex].checked = false;
            this.setData({
                productList: this.data.productList
            })
        }

        for (var index in e.detail.value) {
            this.data.productList[e.detail.value[index]].checked = true;
            this.setData({
                productList: this.data.productList
            })

        }


    },
    /**
     * 获取参考价格数据
     */
    getInformationData: function () {
        var that = this;
        //获取产品品类
        var indexs = 0;
        util.getProductList(that, function (data) {
            if (data.code == 1001) {
                that.setData({
                    productList: data.data
                })
                /*                for (var index in data.data) {
                                    that.setData({
                                        grpid: data.data[index].grpid
                                    })
                                    //根据产品品类及是否统货取产品列表
                                    util.getProductListIsth(that, function (datas) {
                                        if (datas.code == 1001) {
                                            var items = data.data[indexs];
                                            items.details = datas.data;
                                            that.data.productLists.push(items);
                                        }

                                        indexs++;
                                    })
                                }*/

            } else {
                util.toolTip(that, data.message)
            }

        })
    }
})

模板简介:该模板名称为【微信小程序电子产品选择品类信息登记页面设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 17,903次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-25
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信图片 微信公众平台 微信文章 单页式简历模板 微信模板 自适应 企业网站 微信素材 响应式 html5
您可能会喜欢的其他模板