<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title></title>
<script src="../../assets/js/fontsize.js"></script>
<link rel="stylesheet" href="../../assets/css/weui.min.css">
<!--<link rel="stylesheet" href="../../assets/css/api.css"/>-->
<link rel="stylesheet" href="../../assets/icon/iconfont.css">
<style>
body, html {
background-color: transparent;
background: transparent !important;
height: 100%;
}
.meal {
display: flex;
flex-direction: column;
justify-content: flex-end;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
.meal_title {
text-align: center;
color: #424242;
font-size: 15px;
font-weight: bold;
border-bottom: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.25rem;
}
.meal_price_box {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
color: #424242;
padding: 0.25rem 10% 0 10%;
}
.meal_price {
color: #d8b25f;
font-size: 9px;
margin-left: 0.1rem;
}
.incer {
color: #ccc;
font-size: 9px;
padding: 0 10%;
}
.sever_list {
display: flex;
align-items: center;
flex-wrap: wrap;
font-size: 12px;
padding: 0.25rem 10%;
}
.sever_list span {
background-color: #f2f2f2;
padding: 0.1rem 0.2rem;
margin: 0 0.2rem 0.2rem 0;
border-radius: 0.07rem;
}
.sever_list .span_active {
background-color: #dbb25f;
color: #fff;
}
.meal_item {
background-color: #fff;
}
.pay_box {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10% 0.25rem 10%;
}
.pay_num {
font-size: 12px;
color: #424242;
}
.pay_btn_box {
display: flex;
align-items: center;
}
.pay_btn_box .iconfont {
font-size: 20px;
color: #ccc;
}
.pay_btn_box input {
width: 0.5rem;
text-align: center;
border: 0;
outline: none;
font-size: 15px;
}
.pay_num .limit {
padding: 0;
font-size: 9px;
color: #ccc;
}
.price {
flex: 1;
text-align: right;
}
.price .meal_price {
font-size: 12px;
}
.price .old_price {
text-decoration: line-through;
color: #ccc;
margin-left: 0.1rem;
}
.pay_btn {
font-size: 15px;
color: #fff;
background-color: #dbb25f;
text-align: center;
padding: 0.2rem 0;
}
.icon-cuohao {
font-size: 15px;
color: #424242;
}
.save_btn {
text-align: center;
font-size: 0.36rem;
color: #fff;
padding: 0.15rem 0;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
z-index: 100;
background-color: #dbb25f;
}
.moreoul {
width: 100%;
}
.moreoul li {
width: 100%;
padding: 0.3rem 0;
line-height: 0.3rem;
font-size: 16px;
border-bottom: 1px solid #f0f0f0;
text-align: center;
}
.nodata {
font-size: 16px;
color: #c0c0c0;
text-align: center;
padding: 0.5rem 0;
width: 100% !important;
}
.weui-picker__indicator:after {
border-bottom: 1px solid #dbb25f;
}
.weui-picker__indicator:before {
border-top: 1px solid #dbb25f;
}
.weui-picker__action {
padding: 0.2rem 0;
font-size: 13px;
text-align: center;
}
.weui-picker__action:first-child {
color: #333;
text-align: center;
}
.weui-picker__action:last-child {
color: #fff;
text-align: center;
background-color: #dbb25f;
}
.weui-picker__hd {
padding: 0;
}
.weui-picker__item {
font-size: 13px;
}
.close_left {
position: relative;
}
.close_left::before {
position: absolute;
left: -0.1rem;
right: -0.1rem;
top: -0.1rem;
bottom: -0.1rem;
content: '';
}
.mint-popup-bottom {
width: 100%;
}
.weui-check__label:active {
background: transparent;
}
.weui-cells_checkbox .weui-icon-checked:before {
/*content: '';*/
}
.weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before {
color: #dbb25f
}
.weui-cell__hd {
position: relative;
}
.weui-cell__hd::before {
content: '';
position: absolute;
left: -10px;
right: -10px;
top: -10px;
bottom: -10px;
}
.mold_index {
position: fixed;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.05);
/*background-color: #000;*/
left: 0;
top: 0;
bottom: 0;
z-index: 10;
}
.weui-mask, .weui-mask_transparent {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.weui-toast {
position: fixed;
z-index: 5000;
width: 40%;
min-width: 20%;
min-height: auto;
height: auto;
top: 50%;
left: 0;
right: 0;
margin: 0 auto;
/*margin-left: -3.8em;*/
background: hsla(0, 0%, 7%, .7);
text-align: center;
border-radius: 5px;
color: #fff;
font-size: 14px;
}
.weui-icon_toast {
margin: 0;
/*display: block*/
}
.weui-toast__content {
margin: 0;
padding: 0.1rem 0;
}
.weui-icon_toast.weui-icon-success-no-circle {
font-size: 0;
}
.weui-icon_toast.weui-icon-success-no-circle:before {
color: #fff;
font-size: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<div @click="close" class="meal">
<div class="meal_item" @click.stop>
<div class="meal_title"><span></span><span>选择套餐</span><span class="iconfont icon-cuohao"
@click="close"></span></div>
<div class="meal_price_box">
<div><span>服务价格</span><span class="meal_price">优惠价格￥{{Math.abs(priceList.count)?Math.abs(priceList.count):0}}</span>
</div>
<div class="price"><span class="meal_price">￥{{priceList.price?priceList.price:0}}</span><span
class="old_price">原价￥{{priceList.o_price?priceList.o_price:0}}</span></div>
</div>
<div class="incer">此服务由慈界平台优质服务商提供</div>
<div class="sever_list"><span :class="{'span_active':index==active_index}"
v-for="(item,index) in attribute"
@click="choose_sever(item,index)">{{item}}</span></div>
<div class="pay_box">
<span class="pay_num">购买数量 <span
class="limit">（限购<span>{{priceList.limit_num?priceList.limit_num:0}}</span>{{unit}}）</span></span>
<div class="pay_btn_box">
<span class="iconfont icon-jian" @click="reduce"></span>
<input type="number" placeholder="" value="1" v-model="num">
<span class="iconfont icon-jikediancanicon09" @click="plus"></span>
</div>
</div>
<div class="pay_btn" @click="pay_go">确定</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="../../assets/js/api.js"></script>
<script type="text/javascript" src="../../assets/js/weui.min.js"></script>
<script type="text/javascript" src="../../assets/js/public.js"></script>
<script type="text/javascript" src="../../assets/js/fastclick.js"></script>
<script>
new FastClick(document.body);
</script>
<script type="text/javascript" src="../../assets/js/vue.min.js"></script>
<script type="text/javascript" src="../../assets/js/swiper-3.4.2.min.js"></script>
<script type="text/javascript" src="../../assets/js/axios.min.js"></script>
<script type="text/javascript" src="../../assets/icon/iconfont.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
num: 1,
sever_list: [],
active_index: -1,
active_name: '',
priceList: [],
attribute: [],
id: '',
unit: ''
},
created: function () {
apiready = function () {
app.attribute = api.pageParam.attribute.split(',');
app.id = api.pageParam.id;
app.unit = api.pageParam.unit;
}
},
methods: {
close: function () {
// api.closeWin({
// name: 'choose_meal_w'
// });
api.closeWin();
},
choose_sever: function (attr, index) {
var app = this;
app.active_index = index;
app.active_name = app.attribute[index];
app.attribute_id = app.attribute[index].id;
var post = {
id: app.id,
attribute: attr
};
var header = {
"XX-Device-Type": getDevice(),
'XX-Token': getToken()
};
getRequest('post', 'portal/Goods/getPrice', post, header).then(function (res) {
// alert(JSON.stringify(res))
if (res.data.code == 1) {
app.priceList = res.data.data;
} else {
toastMsg(res.msg)
}
})
app.num = 1;
},
reduce: function () {
if (app.num > 1) {
app.num--
}
},
plus: function () {
if (app.num < app.priceList.limit_num) {
app.num++
} else {
toastMsg('不能超过最大限购哦')
}
},
pay_go: function () {
if (app.active_name != '') {
api.sendEvent({
name: 'meal',
extra: {
meal: app.active_name,
num: app.num > app.priceList.limit_num ? app.priceList.limit_num : app.num,
price: app.priceList.price,
attribute_id: app.priceList.attribute_id
}
});
api.closeWin();
} else {
toastMsg('请选择套餐类型')
}
}
}
})
</script>