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