You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
256 lines
9.4 KiB
256 lines
9.4 KiB
<template>
|
|
<view>
|
|
<view class="width100 height120 headsbg backcorfff fotct">
|
|
<view class="height20"></view>
|
|
<view class="width100 font18 fcor666">时代天街</view>
|
|
<image src="../static/imgs/location.png" v-if="typeid == 1" mode="widthFix" class="icon20 mart5"></image>
|
|
<image src="../static/imgs/locabtn.png" v-if="typeid == 2" mode="widthFix" class="icon20 mart5"></image>
|
|
<view class="width100 mart5 font12 fcor666">时代天街时代天街时代天街时代天街</view>
|
|
</view>
|
|
<view class="width96 mart20 colorc3 font12 fotct" v-if="typeid == 1">
|
|
注:约5分钟后取餐,请尽快到餐厅取餐哦
|
|
</view>
|
|
|
|
<view class="concont width94 mart10 backcorfff height45 alijusstart" v-if="typeid == 2">
|
|
<view class="width25 font14 paddleft10 fcor333">
|
|
餐品详情
|
|
</view>
|
|
<view class="color2f6f43 font14">
|
|
3-10分钟出单，请凭取餐口令到店取餐
|
|
</view>
|
|
</view>
|
|
|
|
<view class="concont width94 mart10 backcorfff">
|
|
<view class="width94 paddtop10 font14 fcor333">
|
|
餐品详情
|
|
</view>
|
|
<view class="width100 bor-botm1 mart10 marb10"></view>
|
|
<view class="width100">
|
|
<view class="width100 alijusstart mart10 bor-botm1" v-for="(item,index) in orderList" :key="index">
|
|
<view class="width30">
|
|
<image src="../static/imgs/kfc2.png" mode="widthFix" class="width100"></image>
|
|
</view>
|
|
<view class="width40 font13 fcor666">香辣鸡腿堡</view>
|
|
<view class="width10 font12 fcor999">x1</view>
|
|
<view class="width20">
|
|
<view class="width100 fcor333 font12">¥<text class="fontwig6 font16">16.8</text></view>
|
|
<view class="width100 fcor999 font12" style="text-decoration: line-through;">¥17.8</view>
|
|
</view>
|
|
</view>
|
|
<view class="width90 fotrt height50 font13 fcor999">
|
|
共 <text class="fcor333 fontwig6" style="margin: 0px 5px;"> 1 </text> 件 小计:
|
|
<text class="font16 colorc3 fontwig6 margle" v-if="typeid == 1"> ¥16.8</text>
|
|
<text class="font16 color2f6f43 fontwig6 margle" v-if="typeid == 2"> ¥16.8</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="width94 concont mart10 backcorfff">
|
|
<view class="width92 alijusstart paddtop20">
|
|
<view class="width30 fcor333 fontwig6 font16">
|
|
积分抵扣
|
|
</view>
|
|
<view class="cj-slider">
|
|
<view class="flleft fotct font14 fcor666" style="width: 15%;">0</view>
|
|
<cj-slider style="width: 60%; float:left;" v-model="priceValue" :min="0"
|
|
:max="availIntegal" :step="1" :blockWidth="40"
|
|
@end="blockEnd" />
|
|
<view class="flright fotrt font14 fcor666" style="width: 25%;">{{availIntegal}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="width94 line1 mart15 marb5"></view>
|
|
<view class="height50 width100 backcorfff">
|
|
<view class="width70 flleft fcor666 font16 text1" style="padding-left: 4%;">
|
|
抵扣金额
|
|
</view>
|
|
<view class="width20 flright fotrt paddtright10 font15 fcor666 alijun"
|
|
style="align-items: center;">
|
|
¥{{priceValue[1] / 100}}
|
|
</view>
|
|
</view>
|
|
<view class="height50 width100">
|
|
<view class="width100 flleft fcor333 fontwig6 font16" style="padding-left: 4%;">
|
|
支付方式
|
|
<!-- :
|
|
<text class="jfrecharge" style="background-color: #c72a20;" v-if="typeid == 1" @click="jumpdeposits">积分充值</text>
|
|
<text class="jfrecharge backcorf2f6" v-if="typeid == 2" @click="jumpdeposits">积分充值</text> -->
|
|
</view>
|
|
</view>
|
|
<!-- <view class="height50 width100"
|
|
@tap="paytype='jinbi'">
|
|
<view class="width70 flleft fcor333 font16 text1" style="padding-left: 4%;">
|
|
积分支付<text class="font14 fcor666 margle">可用积分: 20000</text>
|
|
</view>
|
|
<view class="width20 flright fotrt paddtright10 font15 fontwig6 fcor666 alijun"
|
|
style="align-items: center;">
|
|
<radio :checked="paytype=='jinbi'" v-if="typeid == 1" color="#c72a20" />
|
|
<radio :checked="paytype=='jinbi'" v-if="typeid == 2" color="#2f6f43" />
|
|
</view>
|
|
</view> -->
|
|
<view class="height50 width100" @tap="paytype='weixin'">
|
|
<view class="width50 flleft fcor333 font16" style="padding-left: 4%;">
|
|
微信支付
|
|
</view>
|
|
<view class="width40 flright fotrt paddtright10 font15 fontwig6 fcor666 alijun"
|
|
style="align-items: center;">
|
|
<radio :checked="paytype=='weixin'" v-if="typeid == 1" color="#c72a20" />
|
|
<radio :checked="paytype=='weixin'" v-if="typeid == 2" color="#2f6f43" />
|
|
</view>
|
|
</view>
|
|
<view class="height50 width100" @tap="paytype='gonghuika'">
|
|
<view class="width70 flleft fcor333 font16 text1" style="padding-left: 4%;">
|
|
汇联通工会卡<text class="font14 fcor666 margle">可用余额: 13.1元</text>
|
|
</view>
|
|
<view class="width20 flright fotrt paddtright10 font15 fontwig6 fcor666 alijun"
|
|
style="align-items: center;">
|
|
<radio :checked="paytype=='gonghuika'" v-if="typeid == 1" @click="changeRiado()" color="#c72a20" />
|
|
<radio :checked="paytype=='gonghuika'" v-if="typeid == 2" @click="changeRiado()" color="#2f6f43" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="concont width94 mart10 backcorfff">
|
|
<view class="width94 alijusstart paddtop10 font14 fcor666">
|
|
<view class="width40">联系电话</view>
|
|
<input class="width60 fotrt" placeholder="请输入联系人手机号"/>
|
|
</view>
|
|
<view class="width94 font12 fcor999 mart5 paddbotm10">经用于接收取餐码,请正确填写</view>
|
|
</view>
|
|
|
|
<view class="concont width94 mart20 backcorfff marb100" v-if="typeid == 1">
|
|
<view class="width94 paddtop10 font14 fcor333 fontwig6">
|
|
就餐方式
|
|
</view>
|
|
<view class="width94 mart20 paddbotm20 alijusstart">
|
|
<view class="takemode height30 alijus fcor999" :class="sttypeid == 1?'aftermode':''" @click="changedissr(1)">
|
|
<image src="../static/imgs/menu3.png" mode="widthFix" class="icon20"></image>
|
|
<view class="font14 margle10">店内就餐</view>
|
|
</view>
|
|
<view class="takemode height30 alijus fcor999" style="margin-left: 4%;" :class="sttypeid == 2?'aftermode':''" @click="changedissr(2)">
|
|
<image src="../static/imgs/menu2.png" mode="widthFix" class="icon20"></image>
|
|
<view class="font14 margle10">打包带走</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="concont width94 mart20 backcorfff marb100 font13" v-if="typeid == 2">
|
|
<view class="width94 alijusstart paddtop10 font14">
|
|
<view class="width50 fcor333">购买须知</view>
|
|
<!-- <view ></view> -->
|
|
<radio-group class="width50 fotrt alijusend font14" @change="radioChange" style="transform: scale(0.77)">
|
|
<radio v-if="typeid == 1" color="#c72a20" />
|
|
<radio v-if="typeid == 2" color="#2f6f43" />
|
|
<text>已读</text>
|
|
<!-- <text>未读</text> -->
|
|
</radio-group>
|
|
</view>
|
|
<view class="fcor666 width94 mart10">
|
|
1.本平台商品为折扣商品,<text class="fontwig6 fcoreb5">付款后订单不可取消!!!不可退换!!!</text>请准确核对信息，确认后购买。
|
|
</view>
|
|
<view class="fcor666 width94 mart10">
|
|
2.出餐是由平台入驻的商家提供咖啡代点服务,若出餐失败,将会在两小时内自动退款。
|
|
</view>
|
|
<view class="fcor666 width94 mart10">
|
|
3.购买成功后,将会以推送消息的方式提醒您购买成功,请查看短信或者到订单详情页查看取餐口令,凭取餐口令可到门店取餐。
|
|
</view>
|
|
<view class="fcor666 width94 mart10 paddbotm20">
|
|
4.如遇出餐失败，配送失败等任何平台方原因导致的订单异常，请及时联系在线客服处理。
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="footbtn width100 height50 backcor33">
|
|
<view class="width94 alijusstart">
|
|
<view class="width70 fcorfff">
|
|
合计: ¥<text class="font16 fontwig6" style="margin: 0px 6px;">16.8</text> <text class="font12">已省 ¥1.7</text>
|
|
</view>
|
|
<view class="width30 fotrt">
|
|
<view class="btnpay fotct font13 fcorfff" style="background-color: #c72a20;" v-if="typeid == 1">去支付</view>
|
|
<view class="btnpay fotct font13 fcorfff backcorf2f6" v-if="typeid == 2">去支付</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import cjSlider from '@/components/cj-slider/cj-slider.vue';
|
|
let app = getApp();
|
|
export default {
|
|
components: {
|
|
cjSlider
|
|
},
|
|
data() {
|
|
return {
|
|
orderList: [1, 2, 3, 4, 5],
|
|
sttypeid:1,
|
|
paytype: '', //支付方式
|
|
typeid: app.globalData.distinguishid ,//类型区分
|
|
priceValue: [0, 2000], // 积分可以指定默认值
|
|
availIntegal: '2000', // 可用积分
|
|
}
|
|
},
|
|
methods: {
|
|
//选择方式
|
|
changedissr(item){
|
|
this.sttypeid = item;
|
|
},
|
|
//滑动结束
|
|
blockEnd() {
|
|
this.payPrice = this.priceValue[1];
|
|
if (this.payPrice == 0) {
|
|
this.isUse = false;
|
|
this.paytype = '';
|
|
} else {
|
|
this.isUse = true;
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.headsbg {
|
|
border-radius: 0 0 30px 30px;
|
|
}
|
|
|
|
.concont {
|
|
border-radius: 12px;
|
|
}
|
|
.jfrecharge {
|
|
padding: 3px 20rpx;
|
|
color: #fff;
|
|
margin-left: 50%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 30rpx;
|
|
border-radius: 40rpx;
|
|
}
|
|
|
|
.footbtn{
|
|
bottom: 0px;
|
|
position: fixed;
|
|
}
|
|
.btnpay{
|
|
width: 90px;
|
|
border-radius: 22px;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
}
|
|
.takemode{
|
|
width: 48%;
|
|
border-radius: 5px;
|
|
border: 1px solid #999999;
|
|
}
|
|
.aftermode{
|
|
background-color: #faf1f1;
|
|
color: #c72a20;
|
|
}
|
|
.cj-slider {
|
|
width: 100%;
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
</style>
|
|
|