xt / xcx-book · Commits

Go to a project

Commit 55e3f3d02df5439870520e4afb5a23251ef80d2b

Authored by pengye
1 parent eef86833
build: skipped

样式调整、toast组件添加、解决提前点餐分享菜品更换提示显示不全问题

Inline Side-by-side
Showing 9 changed files with 197 additions and 125 deletions
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
*/
properties: {
toastText: { // 属性名
type: String,
value: '内容'
}
},
/**
* 组件的初始数据
*/
data: {
toastShow: false,
},
/**
* 组件的方法列表
*/
methods: {
showToast(text, time) {
this.setData({
toastShow: !this.data.toastShow,
toastText: text
})
var that = this
if (!time) {
time = 8000
}
setTimeout(function () {
that.setData({
toastShow: !that.data.toastShow
})
}, time)
}
}
})
\ No newline at end of file
... ...
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
... ...
<view class='wx_toast_container' hidden="{{!toastShow}}">
<view class='wx_toast_text'>{{toastText}}</view>
</view>
\ No newline at end of file
... ...
.wx_toast_container {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.wx_toast_text {
background: rgba(0, 0, 0, 0.95);
color: white;
text-align: center;
font-size: 34rpx;
padding: 34rpx 50rpx;
border-radius: 20rpx;
max-width: 70%;
min-width: 35%;
box-sizing: border-box;
line-height: 120%;
}
\ No newline at end of file
... ...
<!--pack-cookbook/pages/cart_new.wxml-->
<view style="background: rgba({{themeColor}});height: 100%;">
<view class="page" style="background: rgba({{themeColor}});">
<nav backgroundColor="rgba({{themeColor}})" color="rgba({{navColor}})">{{options.sellerName||'提交订单'}}</nav>
<scroll-view class="main" style="background: rgba({{themeColor}});">
<view class="info" style="color: rgba({{textColor}});">
... ...
<!--pack-cookbook/pages/index_new.wxml-->
<nav backgroundColor="rgba({{themeColor}})" color="rgba({{navColor}})">{{options.sellerName||'提前点菜'}}</nav>
<loading wx:if="{{isloading}}">数据加载中</loading>
<scroll-view style="background: rgba({{themeColor}});" class="content" scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true">
<block wx:for="{{cookbooklist}}" wx:key="cookbooklist-key" wx:for-index="indexs">
<view class="dishWrap" id="{{ 'inToView'+item.id}}">
<view class="heand flex-vc flex-cc">
<view class="style_round flex-vc flex-cc">
<view class="round"></view>
<view class="line"></view>
</view>
<view class="title" style="color:rgba({{navColor}})">{{item.class_name}}</view>
<view class="style_round flex-vc flex-cc">
<view class="line"></view>
<view class="round"></view>
<view class="page" style="background: rgba({{themeColor}});">
<nav backgroundColor="rgba({{themeColor}})" color="rgba({{navColor}})">{{options.sellerName||'提前点菜'}}</nav>
<loading wx:if="{{isloading}}">数据加载中</loading>
<scroll-view style="background: rgba({{themeColor}});" class="content" scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true">
<block wx:for="{{cookbooklist}}" wx:key="cookbooklist-key" wx:for-index="indexs">
<view class="dishWrap" id="{{ 'inToView'+item.id}}">
<view class="heand flex-vc flex-cc">
<view class="style_round flex-vc flex-cc">
<view class="round"></view>
<view class="line"></view>
</view>
<view class="title" style="color:rgba({{navColor}})">{{item.class_name}}</view>
<view class="style_round flex-vc flex-cc">
<view class="line"></view>
<view class="round"></view>
</view>
</view>
</view>
<block wx:for="{{item.cookbooklist[0]}}" wx:key="id" wx:for-index="index">
<!-- name_type 1左侧,2右侧,3顶部分开 image_type 1大图,2小图 -->
<view wx:if="{{item.image_type=='1'}}" class="oneBox" data-idx="{{item.image_type}}" data-nameType="{{item.name_type}}">
<block wx:if="{{item.name_type!='3'}}">
<view class="dishItem {{item.name_type=='2'?'typeB':''}}">
<view class="dishLeft dishTexts" style="color:rgba({{textColor}})">
{{item.name}}
</view>
<view class="dishTexts dishRight" style="color:rgba({{textColor}})">
<text wx:if="{{item.taste}}" class="texts">味型：{{item.taste}}</text>
<text wx:if="{{item.cooks}}">烹调：{{item.cooks}}</text>
</view>
</view>
<view wx:if="{{item.specArr.length>0}}" class="norms {{item.name_type=='2'?'normsB':''}}" style="color:rgba({{navColor}})">
<view wx:for="{{item.specArr}}" wx:key="id">
{{item.str}}
{{item.member_str}}
</view>
</view>
<view wx:else class="norms {{item.name_type=='2'?'normsB':''}}">
{{'￥'+item.price+'/'+item.unit}}
{{item.member_price?'会员 ￥'+item.member_price+'/'+item.unit:''}}
</view>
</block>
<view wx:else class="names">
<view class="dishItem flex-lr">
<view class="dishLeft dishTexts" style="color:rgba({{textColor}})">
{{item.name}}
<block wx:for="{{item.cookbooklist[0]}}" wx:key="id" wx:for-index="index">
<!-- name_type 1左侧,2右侧,3顶部分开 image_type 1大图,2小图 -->
<view wx:if="{{item.image_type=='1'}}" class="oneBox" data-idx="{{item.image_type}}" data-nameType="{{item.name_type}}">
<block wx:if="{{item.name_type!='3'}}">
<view class="dishItem {{item.name_type=='2'?'typeB':''}}">
<view class="dishLeft dishTexts" style="color:rgba({{textColor}})">
{{item.name}}
</view>
<view class="dishTexts dishRight" style="color:rgba({{textColor}})">
<text wx:if="{{item.taste}}" class="texts">味型：{{item.taste}}</text>
<text wx:if="{{item.cooks}}">烹调：{{item.cooks}}</text>
</view>
</view>
<view wx:if="{{item.specArr.length>0}}" style="color:rgba({{textColor}})" class="norms {{item.name_type=='2'?'normsB':''}}" style="color:rgba({{navColor}})">
<view wx:if="{{item.specArr.length>0}}" class="norms {{item.name_type=='2'?'normsB':''}}" style="color:rgba({{navColor}})">
<view wx:for="{{item.specArr}}" wx:key="id">
{{item.str}}
{{item.member_str}}
</view>
</view>
<view wx:else class="norms {{item.name_type=='2'?'normsB':''}}" style="color:rgba({{textColor}})">
<view wx:else class="norms {{item.name_type=='2'?'normsB':''}}">
{{'￥'+item.price+'/'+item.unit}}
{{item.member_price?'会员 ￥'+item.member_price+'/'+item.unit:''}}
</view>
</view>
<view class="dishTexts dishRight bottom" style="color:rgba({{textColor}})">
<text wx:if="{{item.taste}}" class="texts">味型：{{item.taste}}</text>
<text wx:if="{{item.cooks}}">烹调：{{item.cooks}}</text>
</view>
</view>
<view class="imgOneBox">
<image wx:if="{{item.image}}" catch:tap="preview" style="height: {{item.imageHeight>height?height+'px':item.imageHeight+'px'}};width: {{item.imageHeight>height?'':item.imageHeight==height?'100%':'100%'}}" mode="{{(item.imageHeight>height || item.imageHeight==height)?'aspectFit':''}}" src="{{item.image}}" bindload="imageLoad" data-item="{{item}}" data-index="{{index}}" data-indexs="{{indexs}}" />
</view>
<view class="greens" wx:if="{{item.desc}}">
<view class="news" style="color:rgba({{textColor}})">{{item.desc}}</view>
</view>
<view wx:for="{{item.norms}}" wx:key="id" wx:for-index="normsIndex" class="algorithmImg flex-lr calculate">
<image src="{{themeColor!='251,246,241,1'?'https://qn.colorcun.com/WechatIMG697.png':'https://qn.colorcun.com/Line2.png'}}" mode="aspectFill" class="reduceImg" bindtap="subtraction" data-item="{{item}}" />
<view class="box flex-cc">
<view class="num flex-cc">
{{item.count}}<view wx:if="{{item.specs || item.unit}}" style="color:rgba({{textColor}})">{{item.specs?item.specs:item.unit}}</view>
</block>
<view wx:else class="names">
<view class="dishItem flex-lr">
<view class="dishLeft dishTexts" style="color:rgba({{textColor}})">
{{item.name}}
</view>
<view wx:if="{{item.specArr.length>0}}" style="color:rgba({{textColor}})" class="norms {{item.name_type=='2'?'normsB':''}}" style="color:rgba({{navColor}})">
<view wx:for="{{item.specArr}}" wx:key="id">
{{item.str}}
{{item.member_str}}
</view>
</view>
<view wx:else class="norms {{item.name_type=='2'?'normsB':''}}" style="color:rgba({{textColor}})">
{{'￥'+item.price+'/'+item.unit}}
{{item.member_price?'会员 ￥'+item.member_price+'/'+item.unit:''}}
</view>
</view>
<view class="practice" wx:if="{{item.name}}" style="color:rgba({{textColor}})">{{item.name}}</view>
</view>
<image src="{{themeColor!='251,246,241,1'?'https://qn.colorcun.com/WechatIMG696.png':'https://qn.colorcun.com/Line1.png'}}" mode="aspectFill" class="imgs" data-type="0" bindtap="addition" data-item="{{item}}" data-key="{{index}}" data-indexs="{{indexs}}" />
</view>
<view wx:if="{{(item.specArr.length>1 || item.practice.length>1) || item.norms.length=='0'}}" class="algorithmImg flex-rr imgbox">
<image src="{{themeColor!='251,246,241,1'?'https://qn.colorcun.com/WechatIMG696.png':'https://qn.colorcun.com/Line1.png'}}" class="imgs" mode="aspectFill" bindtap="addition" data-type="1" data-item="{{item}}" data-key="{{index}}" data-indexs="{{indexs}}" />
</view>
</view>
<view wx:else class="twoBox" data-idx="{{item.image_type}}">
<view class="{{item.boderNone?'borderNone twoItem':'twoItem'}}">
<view class="twoTitle" style="color:rgba({{textColor}})">{{item.name}}</view>
<view class="twoInfo dishTexts" wx:if="{{item.taste}}" style="color:rgba({{textColor}})">
<text wx:if="{{item.taste}}" class="texts">味型：{{item.taste}}</text>
<text wx:if="{{item.cooks}}">烹调：{{item.cooks}}</text>
</view>
<view wx:if="{{item.specArr.length>0}}" class="twoInfo twoSingle" style="color:rgba({{textColor}})">
<view wx:for="{{item.specArr}}" wx:key="id">
{{item.str}}
{{item.member_str}}
<view class="dishTexts dishRight bottom" style="color:rgba({{textColor}})">
<text wx:if="{{item.taste}}" class="texts">味型：{{item.taste}}</text>
<text wx:if="{{item.cooks}}">烹调：{{item.cooks}}</text>
</view>
</view>
<view wx:else class="twoInfo twoSingle">
{{item.price?'￥'+item.price+'/'+item.unit:''}}
{{item.member_price?'会员 ￥'+item.member_price+'/'+item.unit:''}}
<view class="imgOneBox">
<image wx:if="{{item.image}}" catch:tap="preview" style="height: {{item.imageHeight>height?height+'px':item.imageHeight+'px'}};width: {{item.imageHeight>height?'':item.imageHeight==height?'100%':'100%'}}" mode="{{(item.imageHeight>height || item.imageHeight==height)?'aspectFit':''}}" src="{{item.image}}" bindload="imageLoad" data-item="{{item}}" data-index="{{index}}" data-indexs="{{indexs}}" />
</view>
<image wx:if="{{item.image}}" catch:tap="preview" style="height: {{item.imageHeight>height2?height2+'px':item.imageHeight+'px'}};width: {{item.imageHeight>height2?height2+'px':item.imageHeight==height2?'100%':'100%'}}" mode="{{(item.imageHeight>height2 || item.imageHeight==height2)?'aspectFit':'aspectFill'}}" src="{{item.image}}" bindload="imageLoad" data-item="{{item}}" data-index="{{index}}" data-indexs="{{indexs}}" />
<view class="greens" wx:if="{{item.desc}}">
<view class="news" style="color:rgba({{textColor}})">{{item.desc}}</view>
</view>
<view wx:for="{{item.norms}}" wx:key="unit" wx:for-index="normsIndex" class="algorithmImg flex-lr calculate">
<image src="{{themeColor!='251,246,241,1'?'https://qn.colorcun.com/WechatIMG697.png':'https://qn.colorcun.com/Line2.png'}}" mode="aspectFill" class="reduceImg" bindtap="subtraction" data-item="{{item}}" data-key="{{index}}" data-indexs="{{indexs}}" />
<view wx:for="{{item.norms}}" wx:key="id" wx:for-index="normsIndex" class="algorithmImg flex-lr calculate">
<image src="{{themeColor!='251,246,241,1'?'https://qn.colorcun.com/WechatIMG697.png':'https://qn.colorcun.com/Line2.png'}}" mode="aspectFill" class="reduceImg" bindtap="subtraction" data-item="{{item}}" />
<view class="box flex-cc">
<view class="num flex-cc">
{{item.count}}<view wx:if="{{item.name}}" style="color:rgba({{textColor}})">{{item.name}}</view>
{{item.count}}<view wx:if="{{item.specs || item.unit}}" style="color:rgba({{textColor}})">{{item.specs?item.specs:item.unit}}</view>
</view>
<view class="practice" wx:if="{{item.specs || item.unit}}" style="color:rgba({{textColor}})">{{item.specs?item.specs:item.unit}}</view>
<view class="practice" wx:if="{{item.name}}" style="color:rgba({{textColor}})">{{item.name}}</view>
</view>
<image src="{{themeColor!='251,246,241,1'?'https://qn.colorcun.com/WechatIMG696.png':'https://qn.colorcun.com/Line1.png'}}" mode="aspectFill" class="imgs" data-type="0" bindtap="addition" data-item="{{item}}" data-key="{{index}}" data-indexs="{{indexs}}" />
</view>
<view wx:if="{{(item.spec.length>1 || item.practice.length>1) || item.norms.length=='0'}}" class="algorithmImg flex-rr imgbox">
<image wx:if="{{item.id}}" src="{{themeColor!='251,246,241,1'?'https://qn.colorcun.com/WechatIMG696.png':'https://qn.colorcun.com/Line1.png'}}" class="imgs" mode="aspectFill" bindtap="addition" data-type="1" data-item="{{item}}" data-key="{{index}}" data-indexs="{{indexs}}" />
<view wx:if="{{(item.specArr.length>1 || item.practice.length>1) || item.norms.length=='0'}}" class="algorithmImg flex-rr imgbox">
<image src="{{themeColor!='251,246,241,1'?'https://qn.colorcun.com/WechatIMG696.png':'https://qn.colorcun.com/Line1.png'}}" class="imgs" mode="aspectFill" bindtap="addition" data-type="1" data-item="{{item}}" data-key="{{index}}" data-indexs="{{indexs}}" />
</view>
</view>
</view>
</block>
</view>
</block>
</scroll-view>
<view class="fixedBox flex-lr" style="background: rgba({{themeColor}});">
<view class="left flex-cmc" bindtap="showClassifyModal">
<image src="{{themeColor!='251,246,241,1'?'https://qn.colorcun.com/WechatIMG700.png':'https://qn.colorcun.com/s1.png'}}" mode="" />
<view class="fixedName" style="color:rgba({{textColor}})">
菜品分类
<view wx:else class="twoBox" data-idx="{{item.image_type}}">
<view class="{{item.boderNone?'borderNone twoItem':'twoItem'}}">
<view class="twoTitle" style="color:rgba({{textColor}})">{{item.name}}</view>
<view class="twoInfo dishTexts" wx:if="{{item.taste}}" style="color:rgba({{textColor}})">
<text wx:if="{{item.taste}}" class="texts">味型：{{item.taste}}</text>
<text wx:if="{{item.cooks}}">烹调：{{item.cooks}}</text>
</view>
<view wx:if="{{item.specArr.length>0}}" class="twoInfo twoSingle" style="color:rgba({{textColor}})">
<view wx:for="{{item.specArr}}" wx:key="id">
{{item.str}}
{{item.member_str}}
</view>
</view>
<view wx:else class="twoInfo twoSingle">
{{item.price?'￥'+item.price+'/'+item.unit:''}}
{{item.member_price?'会员 ￥'+item.member_price+'/'+item.unit:''}}
</view>
<image wx:if="{{item.image}}" catch:tap="preview" style="height: {{item.imageHeight>height2?height2+'px':item.imageHeight+'px'}};width: {{item.imageHeight>height2?height2+'px':item.imageHeight==height2?'100%':'100%'}}" mode="{{(item.imageHeight>height2 || item.imageHeight==height2)?'aspectFit':'aspectFill'}}" src="{{item.image}}" bindload="imageLoad" data-item="{{item}}" data-index="{{index}}" data-indexs="{{indexs}}" />
<view class="greens" wx:if="{{item.desc}}">
<view class="news" style="color:rgba({{textColor}})">{{item.desc}}</view>
</view>
<view wx:for="{{item.norms}}" wx:key="unit" wx:for-index="normsIndex" class="algorithmImg flex-lr calculate">
<image src="{{themeColor!='251,246,241,1'?'https://qn.colorcun.com/WechatIMG697.png':'https://qn.colorcun.com/Line2.png'}}" mode="aspectFill" class="reduceImg" bindtap="subtraction" data-item="{{item}}" data-key="{{index}}" data-indexs="{{indexs}}" />
<view class="box flex-cc">
<view class="num flex-cc">
{{item.count}}<view wx:if="{{item.name}}" style="color:rgba({{textColor}})">{{item.name}}</view>
</view>
<view class="practice" wx:if="{{item.specs || item.unit}}" style="color:rgba({{textColor}})">{{item.specs?item.specs:item.unit}}</view>
</view>
<image src="{{themeColor!='251,246,241,1'?'https://qn.colorcun.com/WechatIMG696.png':'https://qn.colorcun.com/Line1.png'}}" mode="aspectFill" class="imgs" data-type="0" bindtap="addition" data-item="{{item}}" data-key="{{index}}" data-indexs="{{indexs}}" />
</view>
<view wx:if="{{(item.spec.length>1 || item.practice.length>1) || item.norms.length=='0'}}" class="algorithmImg flex-rr imgbox">
<image wx:if="{{item.id}}" src="{{themeColor!='251,246,241,1'?'https://qn.colorcun.com/WechatIMG696.png':'https://qn.colorcun.com/Line1.png'}}" class="imgs" mode="aspectFill" bindtap="addition" data-type="1" data-item="{{item}}" data-key="{{index}}" data-indexs="{{indexs}}" />
</view>
</view>
</view>
</block>
</view>
</block>
</scroll-view>
<view class="fixedBox flex-lr" style="background: rgba({{themeColor}});">
<view class="left flex-cmc" bindtap="showClassifyModal">
<image src="{{themeColor!='251,246,241,1'?'https://qn.colorcun.com/WechatIMG700.png':'https://qn.colorcun.com/s1.png'}}" mode="" />
<view class="fixedName" style="color:rgba({{textColor}})">
菜品分类
</view>
</view>
<userinfo class="right flex-cmc" style="color:rgba({{textColor}})" binduserinfo="gotoShoppingCart">
<view class="rightBox">
<image src="{{themeColor!='251,246,241,1'?'https://qn.colorcun.com/WechatIMG701.png':'https://qn.colorcun.com/s2.png'}}" mode="" />
<view class="num" wx:if="{{orderItemCount*1>0}}">{{orderItemCount}}</view>
</view>
<view class="fixedName" style="color:rgba({{textColor}})">
已选菜品
</view>
</userinfo>
</view>
<userinfo class="right flex-cmc" style="color:rgba({{textColor}})" binduserinfo="gotoShoppingCart">
<view class="rightBox">
<image src="{{themeColor!='251,246,241,1'?'https://qn.colorcun.com/WechatIMG701.png':'https://qn.colorcun.com/s2.png'}}" mode="" />
<view class="num" wx:if="{{orderItemCount*1>0}}">{{orderItemCount}}</view>
</view>
<view class="fixedName" style="color:rgba({{textColor}})">
已选菜品
</view>
</userinfo>
</view>
<my-modal id="checkModal" height="410px" fadeStyle="center">
<view slot="modalContent" class="normsModel">
... ...
... ... @@ -23,6 +23,7 @@ Page({
height:wx.getSystemInfoSync().windowWidth*1,
is_show_price:'',
},
myToast :'',
imageLoad(e) {
const index = e.currentTarget.dataset['index'];
const indexs = e.currentTarget.dataset['indexs'];
... ... @@ -84,6 +85,12 @@ Page({
this.getCheckCookList()
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
this.myToast = this.selectComponent("#myToast")
},
getCookbooklist(cookbooklist){
cookbooklist.forEach(i => {
i.cookbooklist.forEach(j => {
... ... @@ -410,11 +417,7 @@ Page({
},
// 菜品更换
continueOrdering() {
wx.showToast({
title: '您的订单已经下达给商家，如果需要改菜需和商家确认，以免产生误解。',
icon: 'none',
duration: 3000
})
this.myToast.showToast('您的订单已经下达给商家，如果需要改菜需和商家确认，以免产生误解。',3000)
},
// 点击了解更多会员优惠政策
gotoFavourableList() {
... ... @@ -533,12 +536,6 @@ Page({
imageUrl: 'http://nosqn.colorcun.com/reserve/images/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_201911151148571.jpg',
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
... ...
... ... @@ -3,6 +3,7 @@
"navigationBarBackgroundColor": "#4d4e50",
"navigationBarTextStyle": "white",
"usingComponents": {
"nav": "/components/nav/nav"
"nav": "/components/nav/nav",
"toast": "/components/toast/index"
}
}
\ No newline at end of file
... ...
<!--pack-cookbook/pages/success_new.wxml-->
<view style="background: rgba({{themeColor}});">
<view class="page" style="background: rgba({{themeColor}});">
<nav back="none" bindNavEvent="navEvent" backgroundColor="rgba({{themeColor}})" color="rgba({{navColor}})">{{options.sellerName}}</nav>
<scroll-view class="main" style="background: rgba({{themeColor}});height: 100%;">
<scroll-view class="main" style="background: rgba({{themeColor}});">
<view class="box">
<view class="info" style="color: rgba({{textColor}});">
<view class="texts font28r">就餐时间：</view>
... ... @@ -164,4 +164,5 @@
<button wx:if="{{options.hasSuccess==1 && options.type=='1'}}" class="font32r continue flex-cc" style="background: rgba({{themeColor}});color: rgba({{textColor}});" bindtap="continueOrdering">菜品更换</button>
<button wx:if="{{options.hasSuccess==1}}" class="font32r determine flex-cc {{options.type=='2'?'onebtns':''}}" open-type="share">分享菜单</button>
</view>
<toast id="myToast"></toast>
</view>
\ No newline at end of file
... ...