Skip to content

E
eduline
Commit 23c61e64 by 冷斌
Options

设置

parent f12897d9
Showing with 192 additions and 145 deletions
apps/home/Tpl/default/Home/order_w3g.html
<include file="__THEME__/public_header_w3g"/> <include file="__THEME__/public_header_w3g"/>
<style> <style>
body { body {
padding: 0 !important; padding: 0 !important;
} }
</style> </style>
<div id="app"> <div id="app">
<div class="layout_v"> <div class="layout_v">
<van-tabs <van-tabs
:border="false" :border="false"
v-model="tab" v-model="tab"
sticky sticky
@change="onTopTab" @change="onTopTab"
line-width="54px" line-width="54px"
line-height="4px" line-height="4px"
background="white" background="white"
color="#A3E460" color="#A3E460"
title-inactive-color="#333333" title-inactive-color="#333333"
title-active-color="#A3E460"> title-active-color="#A3E460">
<van-tab v-for="(opt, index) in options" :key="index"> <van-tab v-for="(opt, index) in options" :key="index">
<span slot="title" v-bind:class="tab == index ? 'tab_text_selected' : 'tab_text_normal'"> <span slot="title" v-bind:class="tab == index ? 'tab_text_selected' : 'tab_text_normal'">
{{opt.title}} {{opt.title}}
</span> </span>
<div class="layout_v" :class="opt.options ? 'order_inner_tab_container' : ''"> <div class="layout_v" :class="opt.options ? 'order_inner_tab_container' : ''">
<div v-if="opt.options" class="layout_h order_inner_tab" style="background: white;z-index: 220;"> <div v-if="opt.options" class="layout_h order_inner_tab" style="background: white;z-index: 220;">
<div v-for="(innerOpt, idx) in opt.options" :key="idx" @click="onInnerTab(idx)" class="layout_center weight_full" :class="innerTab == idx ? 'zhenti_tab_selected' : 'zhenti_tab_normal'">{{innerOpt.title}}</div> <div v-for="(innerOpt, idx) in opt.options" :key="idx" @click="onInnerTab(idx)"
</div> class="layout_center weight_full"
<template v-for="(item, i) in listItem(opt)" > :class="innerTab == idx ? 'zhenti_tab_selected' : 'zhenti_tab_normal'">{{innerOpt.title}}
<!-- 带图 --> </div>
<div v-if="showImage(item)" class="order_image_item layout_v"> </div>
<div class="layout_h"> <template v-for="(item, i) in listItem(opt)">
<van-image height="72" width="128" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg" ></van-image> <!-- 带图 -->
<div class="layout_v_b weight_full" style="margin-left: 0.75rem;"> <div v-if="showImage(item)" class="order_image_item layout_v">
<span class="text_14_600 color_333333">[班级课程]透视理论01——认识透视</span> <div class="layout_h">
<span class="text_14_600 color_FF3B3B">¥100</span> <van-image height="72" width="128" fit="cover"
</div> src="https://img.yzcdn.cn/vant/cat.jpeg"></van-image>
</div> <div class="layout_v_b weight_full" style="margin-left: 0.75rem;">
<div class="divider" style="margin-top: 1rem;"></div> <span class="text_14_600 color_333333">[班级课程]透视理论01——认识透视</span>
<div class="order_action_bar layout_h_b"> <span class="text_14_600 color_FF3B3B">¥100</span>
<div class="weight_full layout_h self_center"> </div>
<span class="text_12_400 color_333333">应付款：</span> </div>
<span class="text_14_600 color_FF3B3B">¥100</span> <div class="divider" style="margin-top: 1rem;"></div>
</div> <div class="order_action_bar layout_h_b">
<div class="layout_h_r"> <div class="weight_full layout_h self_center">
<div v-if="showSolid(index)" class="order_action_solid self_center" style="margin-left: 0.75rem;">去支付</div> <span class="text_12_400 color_333333">应付款：</span>
<div v-if="showHollow(index)" class="order_action_hollow self_center">{{hollowText(index)}}</div> <span class="text_14_600 color_FF3B3B">¥100</span>
</div> </div>
</div> <div class="layout_h_r">
</div> <div v-if="showSolid(index)" class="order_action_solid self_center"
<!-- 不带图 --> style="margin-left: 0.75rem;">去支付
<div v-if="!showImage(item)" class="order_image_item layout_v"> </div>
<span style="margin-left: 0.75rem;margin-right: 0.75rem;" class="text_14_600 color_333333">[班级课程]透视理论01——认识透视</span> <div v-if="showHollow(index)" class="order_action_hollow self_center">
<span style="margin-left: 0.75rem;" class="text_14_600 color_FF3B3B" style="margin-top: 0.5rem;">¥100</span> {{hollowText(index)}}
<div class="divider" style="margin-top: 1rem;"></div> </div>
<div class="order_action_bar layout_h_b"> </div>
<div class="weight_full layout_h self_center"> </div>
<span class="text_12_400 color_333333">应付款：</span> </div>
<span class="text_14_600 color_FF3B3B">¥100</span> <!-- 不带图 -->
</div> <div v-if="!showImage(item)" class="order_image_item layout_v">
<div class="layout_h_r"> <span style="margin-left: 0.75rem;margin-right: 0.75rem;" class="text_14_600 color_333333">[班级课程]透视理论01——认识透视</span>
<div v-if="showSolid(index)" class="order_action_solid self_center" style="margin-left: 0.75rem;">去支付</div> <span style="margin-left: 0.75rem;" class="text_14_600 color_FF3B3B"
<div v-if="showHollow(index)" class="order_action_hollow self_center">{{hollowText(index)}}</div> style="margin-top: 0.5rem;">¥100</span>
</div> <div class="divider" style="margin-top: 1rem;"></div>
</div> <div class="order_action_bar layout_h_b">
</div> <div class="weight_full layout_h self_center">
</template> <span class="text_12_400 color_333333">应付款：</span>
<include file="__THEME__/empty_view_w3g"/> <span class="text_14_600 color_FF3B3B">¥100</span>
</div> </div>
<div class="layout_h_r">
<div v-if="showSolid(index)" class="order_action_solid self_center"
style="margin-left: 0.75rem;">去支付
</div>
<div v-if="showHollow(index)" class="order_action_hollow self_center">
{{hollowText(index)}}
</div>
</div>
</div>
</div>
</template>
<include file="__THEME__/empty_view_w3g"/>
</div>
</van-tab> </van-tab>
</van-tabs> </van-tabs>
</div> </div>
</div> </div>
<script> <script>
new Vue({ new Vue({
el: "#app", el: "#app",
data: function() { data: function () {
return { return {
tab: 0, tab: 0,
innerTab: 0, innerTab: 0,
options: [{ options: [{
title: "待支付", title: "待支付",
options: [{ options: [{
title: "课程订单", title: "课程订单",
items: [1] items: [1]
}, }, {
{ title: "考题订单",
title: "考题订单", items: [2]
items: [2] }, {
}, title: "商城订单",
{ items: [3]
title: "商城订单", }]
items: [3] }, {
}] title: "待发货",
},{ options: [{
title: "待发货", title: "课程订单",
items: [] items: [1]
},{ }, {
title: "待收货", title: "考题订单",
items: [] items: [2]
},{ }, {
title: "已完成", title: "商城订单",
items: [] items: [3]
},{ }]
title: "已取消", }, {
items: [] title: "待收货",
}] options: [{
} title: "课程订单",
}, items: [1]
mounted:function(){ }, {
$("#preloader").hide() title: "考题订单",
}, items: [2]
computed: { }, {
showHollow: function() { title: "商城订单",
return function(index) { items: [3]
return index != 1 && index != 2 }]
} }, {
}, title: "已完成",
showSolid: function() { options: [{
return function(index) { title: "课程订单",
return index == 0 items: [1]
} }, {
}, title: "考题订单",
showImage: function() { items: [2]
return function(item) { }, {
return false//TODO 每一个item要设置一个类型显示带图的还是不带图 title: "商城订单",
} items: [3]
}, }]
hollowText: function() { }, {
return function(index) { title: "已取消",
return index == 0 ? '取消订单' : '删除订单' options: [{
} title: "课程订单",
}, items: [1]
listItem: function() { }, {
return function(opt) { title: "考题订单",
return opt.options ? opt.options[this.innerTab].items : opt.items items: [2]
} }, {
}, title: "商城订单",
showEmpty: function() { items: [3]
let opt = this.options[this.tab] }]
if(opt.options) { }]
return opt.options[this.innerTab].items.length == 0 }
} else { },
return opt.items.length == 0 mounted: function () {
} $("#preloader").hide()
} },
}, computed: {
methods: { showHollow: function () {
onTopTab: function(tab) { return function (index) {
return index != 1 && index != 2
}
},
showSolid: function () {
return function (index) {
return index == 0
}
},
showImage: function () {
return function (item) {
return false//TODO 每一个item要设置一个类型显示带图的还是不带图
}
},
hollowText: function () {
return function (index) {
return index == 0 ? '取消订单' : '删除订单'
}
},
listItem: function () {
return function (opt) {
return opt.options ? opt.options[this.innerTab].items : opt.items
}
},
showEmpty: function () {
let opt = this.options[this.tab]
if (opt.options) {
return opt.options[this.innerTab].items.length == 0
} else {
return opt.items.length == 0
}
}
},
methods: {
onTopTab: function (tab) {
}, },
onInnerTab: function(tab) { onInnerTab: function (tab) {
this.innerTab = tab this.innerTab = tab
} }
}, },
}) })
</script> </script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment