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