image.png
html
<!-- 自定义模态框效果-->
<view>
<button bindtap='showMd'>点击弹出框</button>
<view class='bg' hidden="{{isHidden}}">
<view class='modalContent'>
<view class='title'>套餐</view>
<view class='cansole' bindtap='hiddenMd'>✘</view>
<view class='contents'>
<view class="md-title"> 弹出框的内容</view>
<view class="md-content">
<view class="md-left">
<image src="https://file.snailpet.cn/wxApplet/down_arrow.png"></image>
</view><!--left-->
<view class="md-right">
<view class="tl-font-28"><text>商品名称</text> <text >商品规格</text></view>
<view class="tl-font-24-999">价格</view>
</view><!--right-->
</view>
</view>
</view>
</view>
</view>
css
/*****************模态框独立样式操作 start************************/
.bg {
position: fixed;
width: 100%;
height: 100%;
top: 0;
background: rgba(0, 0, 0, 0.4);
overflow: hidden;
z-index: 999999;
}
.modalContent {
border: 1px solid #ccc;
height: 670rpx;
width: 600rpx;
position: absolute; /*让节点脱离文档流,我的理解就是,从页面上浮出来,不再按照文档其它内容布局*/
margin: 0 auto;
top: 25%; /*节点脱离了文档流,如果设置位置需要用top和left,right,bottom定位*/
left: 0;
right: 0;
bottom: 0;
z-index: 999998; /*个人理解为层级关系,由于这个节点要在顶部显示,所以这个值比其余节点的都大*/
background: white;
}
.title
{
height: 85rpx;
line-height: 85rpx;
background: #F5F5F5;
color:#666;
padding-left: 20rpx;
font-size: 30rpx;
text-align: center;
}
.cansole
{
/*float: right;
margin-right: 20rpx;
margin-top: 20rpx;*/
position: absolute;
top: 18rpx;
right: 20rpx;
width: 40rpx;
height: 40rpx;
}
.contents{
padding: 20rpx;
font-size: 28rpx;
}
.tl-div{
position: absolute;
bottom: -8rpx;
width: 100%;
height: 60rpx;
line-height: 60rpx;
text-align: center;
font-size: 22rpx;
color: #CCCCCC;
border-top: 1px solid #EEEEEE;
}
.md-content{
width: 100%;
height: auto;
overflow: hidden;
padding: 40rpx 0 40rpx 20rpx;
background: #EEEEEE;
margin-bottom: 20rpx;
}
.md-left{
float: left;
width: 90rpx;
height: 90rpx;
margin-right: 18rpx;
}
.md-left image{
width: 90rpx;
height: 90rpx;
}
.md-right{
float: left;
width: calc(100%-120rpx);
height: auto;
}
.tl-font-28-333{
font-size:28rpx;
font-weight:400;
color:#333333;
}
.tl-font-24-999{
font-size:24rpx;
font-weight:400;
color:#999;
}
/*****************模态框独立样式操作 end************************/
js
* 页面的初始数据
*/
data: {
isHidden: true //隐藏模态框
},
showMd: function(e) {
//弹出框展示套餐的具体商品，根据data-group得到数组对象，然后再渲染到界面上
var self = this;
let groupList = e.currentTarget.dataset.group;
//debugger
this.setData({
isHidden: false,//显示模态框，
groupArr: groupList,
})
},
hiddenMd: function() {
this.setData({
isHidden: true//隐藏模态框
})
},
//加入购物车
addGoodsCart: function (e) {
var self = this;
let goodsObj = e.currentTarget.dataset.item;
app.judgeLogin(function () {
if (app.windowData.status === -1) {
app.tool.showTipModal('提示', '店铺休息暂不接单');
} else {
if (app.tool.showSellout(goodsObj)) {
app.tool.showTipModal('提示', '商品库存不足');
} else {
var param = {
num: 1, //增加的数量
shop_id: goodsObj.shop_id,
product_id: goodsObj.product_id,
};
let apiData = {
apiUrl: app.apiConfig.addCart,
type: 'post',
sendData: param,
notLoad: true
};
apiData.success = res => {
if (res.data) {
//提示添加成功
setTimeout(function () {
app.tool.showToast('添加成功', 'success', 1500);
}, 100);
}
};
apiData.anyFun = () => {
//获取购物车商品购买总数量
appJs.calcCartNUMBER()
};
app.apiConfig.getApi(apiData);
//购物车动画
/**
self.setData({
good_box_item: goodsObj
},function () {
//购物车动画
self.touchOnGoods(e)
})*/
}
}
}, true, function (goLogin) {
if (goLogin) {
self.isTimelyUpdate = true
}
})
},
古之学者必有师。师者，所以传道受业解惑也。人非生而知之者，孰能无惑？惑而不从师，其为惑也，终不解矣。生乎吾前，其闻道也固先乎吾，吾从而师之；生乎吾后，其闻道也亦先乎吾，吾从而师之。吾师道也，夫庸知其年之先后生于吾乎？是故无贵无贱，无长无少，道之所存，师之所存也。
嗟乎！师道之不传也久矣！欲人之无惑也难矣！古之圣人，其出人也远矣，犹且从师而问焉；今之众人，其下圣人也亦远矣，而耻学于师。是故圣益圣，愚益愚。圣人之所以为圣，愚人之所以为愚，其皆出于此乎？爱其子，择师而教之；于其身也，则耻师焉，惑矣。彼童子之师，授之书而习其句读者，非吾所谓传其道解其惑者也。句读之不知，惑之不解，或师焉，或不焉，小学而大遗，吾未见其明也。巫医乐师百工之人，不耻相师。士大夫之族，曰师曰弟子云者，则群聚而笑之。问之，则曰：“彼与彼年相若也，道相似也。位卑则足羞，官盛则近谀。”呜呼！师道之不复可知矣。巫医乐师百工之人，君子不齿，今其智乃反不能及，其可怪也欤！
圣人无常师。孔子师郯子、苌弘、师襄、老聃。郯子之徒，其贤不及孔子。孔子曰：三人行，则必有我师。是故弟子不必不如师，师不必贤于弟子，闻道有先后，术业有专攻，如是而已。
李氏子蟠，年十七，好古文，六艺经传皆通习之，不拘于时，学于余。余嘉其能行古道，作《师说》以贻之。
网友评论