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"/>
<style>
body {
padding: 0 !important;
}
body {
padding: 0 !important;
}
</style>
<div id="app">
<div class="layout_v">
<van-tabs
:border="false"
v-model="tab"
sticky
@change="onTopTab"
line-width="54px"
line-height="4px"
background="white"
color="#A3E460"
title-inactive-color="#333333"
title-active-color="#A3E460">
<div class="layout_v">
<van-tabs
:border="false"
v-model="tab"
sticky
@change="onTopTab"
line-width="54px"
line-height="4px"
background="white"
color="#A3E460"
title-inactive-color="#333333"
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'">
{{opt.title}}
</span>
<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-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>
<template v-for="(item, i) in listItem(opt)" >
<!-- 带图 -->
<div v-if="showImage(item)" class="order_image_item layout_v">
<div class="layout_h">
<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;">
<span class="text_14_600 color_333333">[班级课程]透视理论01——认识透视</span>
<span class="text_14_600 color_FF3B3B">¥100</span>
</div>
</div>
<div class="divider" style="margin-top: 1rem;"></div>
<div class="order_action_bar layout_h_b">
<div class="weight_full layout_h self_center">
<span class="text_12_400 color_333333">应付款：</span>
<span class="text_14_600 color_FF3B3B">¥100</span>
</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>
<!-- 不带图 -->
<div v-if="!showImage(item)" class="order_image_item layout_v">
<span style="margin-left: 0.75rem;margin-right: 0.75rem;" class="text_14_600 color_333333">[班级课程]透视理论01——认识透视</span>
<span style="margin-left: 0.75rem;" class="text_14_600 color_FF3B3B" style="margin-top: 0.5rem;">¥100</span>
<div class="divider" style="margin-top: 1rem;"></div>
<div class="order_action_bar layout_h_b">
<div class="weight_full layout_h self_center">
<span class="text_12_400 color_333333">应付款：</span>
<span class="text_14_600 color_FF3B3B">¥100</span>
</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>
<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-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>
<template v-for="(item, i) in listItem(opt)">
<!-- 带图 -->
<div v-if="showImage(item)" class="order_image_item layout_v">
<div class="layout_h">
<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;">
<span class="text_14_600 color_333333">[班级课程]透视理论01——认识透视</span>
<span class="text_14_600 color_FF3B3B">¥100</span>
</div>
</div>
<div class="divider" style="margin-top: 1rem;"></div>
<div class="order_action_bar layout_h_b">
<div class="weight_full layout_h self_center">
<span class="text_12_400 color_333333">应付款：</span>
<span class="text_14_600 color_FF3B3B">¥100</span>
</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>
<!-- 不带图 -->
<div v-if="!showImage(item)" class="order_image_item layout_v">
<span style="margin-left: 0.75rem;margin-right: 0.75rem;" class="text_14_600 color_333333">[班级课程]透视理论01——认识透视</span>
<span style="margin-left: 0.75rem;" class="text_14_600 color_FF3B3B"
style="margin-top: 0.5rem;">¥100</span>
<div class="divider" style="margin-top: 1rem;"></div>
<div class="order_action_bar layout_h_b">
<div class="weight_full layout_h self_center">
<span class="text_12_400 color_333333">应付款：</span>
<span class="text_14_600 color_FF3B3B">¥100</span>
</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>
</div>
</van-tabs>
</div>
</div>
<script>
new Vue({
el: "#app",
data: function() {
return {
tab: 0,
innerTab: 0,
options: [{
title: "待支付",
options: [{
title: "课程订单",
items: [1]
},
{
title: "考题订单",
items: [2]
},
{
title: "商城订单",
items: [3]
}]
},{
title: "待发货",
items: []
},{
title: "待收货",
items: []
},{
title: "已完成",
items: []
},{
title: "已取消",
items: []
}]
}
},
mounted:function(){
$("#preloader").hide()
},
computed: {
showHollow: function() {
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) {
new Vue({
el: "#app",
data: function () {
return {
tab: 0,
innerTab: 0,
options: [{
title: "待支付",
options: [{
title: "课程订单",
items: [1]
}, {
title: "考题订单",
items: [2]
}, {
title: "商城订单",
items: [3]
}]
}, {
title: "待发货",
options: [{
title: "课程订单",
items: [1]
}, {
title: "考题订单",
items: [2]
}, {
title: "商城订单",
items: [3]
}]
}, {
title: "待收货",
options: [{
title: "课程订单",
items: [1]
}, {
title: "考题订单",
items: [2]
}, {
title: "商城订单",
items: [3]
}]
}, {
title: "已完成",
options: [{
title: "课程订单",
items: [1]
}, {
title: "考题订单",
items: [2]
}, {
title: "商城订单",
items: [3]
}]
}, {
title: "已取消",
options: [{
title: "课程订单",
items: [1]
}, {
title: "考题订单",
items: [2]
}, {
title: "商城订单",
items: [3]
}]
}]
}
},
mounted: function () {
$("#preloader").hide()
},
computed: {
showHollow: function () {
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) {
this.innerTab = tab
}
},
})
},
onInnerTab: function (tab) {
this.innerTab = tab
}
},
})
</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