Skip to content

E
eduline
Commit 23c61e64 by 冷斌
Options

设置

parent f12897d9
Showing with 83 additions and 36 deletions
apps/home/Tpl/default/Home/order_w3g.html
...@@ -26,13 +26,17 @@ ...@@ -26,13 +26,17 @@
<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)"
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>
<template v-for="(item, i) in listItem(opt)">
<!-- 带图 --> <!-- 带图 -->
<div v-if="showImage(item)" class="order_image_item layout_v"> <div v-if="showImage(item)" class="order_image_item layout_v">
<div class="layout_h"> <div class="layout_h">
<van-image height="72" width="128" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg" ></van-image> <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 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_333333">[班级课程]透视理论01——认识透视</span>
<span class="text_14_600 color_FF3B3B">¥100</span> <span class="text_14_600 color_FF3B3B">¥100</span>
...@@ -45,15 +49,20 @@ ...@@ -45,15 +49,20 @@
<span class="text_14_600 color_FF3B3B">¥100</span> <span class="text_14_600 color_FF3B3B">¥100</span>
</div> </div>
<div class="layout_h_r"> <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="showSolid(index)" class="order_action_solid self_center"
<div v-if="showHollow(index)" class="order_action_hollow self_center">{{hollowText(index)}}</div> style="margin-left: 0.75rem;">去支付
</div>
<div v-if="showHollow(index)" class="order_action_hollow self_center">
{{hollowText(index)}}
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- 不带图 --> <!-- 不带图 -->
<div v-if="!showImage(item)" class="order_image_item layout_v"> <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;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> <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="divider" style="margin-top: 1rem;"></div>
<div class="order_action_bar layout_h_b"> <div class="order_action_bar layout_h_b">
<div class="weight_full layout_h self_center"> <div class="weight_full layout_h self_center">
...@@ -61,8 +70,12 @@ ...@@ -61,8 +70,12 @@
<span class="text_14_600 color_FF3B3B">¥100</span> <span class="text_14_600 color_FF3B3B">¥100</span>
</div> </div>
<div class="layout_h_r"> <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="showSolid(index)" class="order_action_solid self_center"
<div v-if="showHollow(index)" class="order_action_hollow self_center">{{hollowText(index)}}</div> style="margin-left: 0.75rem;">去支付
</div>
<div v-if="showHollow(index)" class="order_action_hollow self_center">
{{hollowText(index)}}
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -80,7 +93,7 @@ ...@@ -80,7 +93,7 @@
new Vue({ new Vue({
el: "#app", el: "#app",
data: function() { data: function () {
return { return {
tab: 0, tab: 0,
innerTab: 0, innerTab: 0,
...@@ -89,62 +102,96 @@ ...@@ -89,62 +102,96 @@
options: [{ options: [{
title: "课程订单", title: "课程订单",
items: [1] items: [1]
}, }, {
{
title: "考题订单", title: "考题订单",
items: [2] items: [2]
}, }, {
{
title: "商城订单", title: "商城订单",
items: [3] items: [3]
}] }]
},{ }, {
title: "待发货", title: "待发货",
items: [] options: [{
},{ title: "课程订单",
items: [1]
}, {
title: "考题订单",
items: [2]
}, {
title: "商城订单",
items: [3]
}]
}, {
title: "待收货", title: "待收货",
items: [] options: [{
},{ title: "课程订单",
items: [1]
}, {
title: "考题订单",
items: [2]
}, {
title: "商城订单",
items: [3]
}]
}, {
title: "已完成", title: "已完成",
items: [] options: [{
},{ title: "课程订单",
items: [1]
}, {
title: "考题订单",
items: [2]
}, {
title: "商城订单",
items: [3]
}]
}, {
title: "已取消", title: "已取消",
items: [] options: [{
title: "课程订单",
items: [1]
}, {
title: "考题订单",
items: [2]
}, {
title: "商城订单",
items: [3]
}]
}] }]
} }
}, },
mounted:function(){ mounted: function () {
$("#preloader").hide() $("#preloader").hide()
}, },
computed: { computed: {
showHollow: function() { showHollow: function () {
return function(index) { return function (index) {
return index != 1 && index != 2 return index != 1 && index != 2
} }
}, },
showSolid: function() { showSolid: function () {
return function(index) { return function (index) {
return index == 0 return index == 0
} }
}, },
showImage: function() { showImage: function () {
return function(item) { return function (item) {
return false//TODO 每一个item要设置一个类型显示带图的还是不带图 return false//TODO 每一个item要设置一个类型显示带图的还是不带图
} }
}, },
hollowText: function() { hollowText: function () {
return function(index) { return function (index) {
return index == 0 ? '取消订单' : '删除订单' return index == 0 ? '取消订单' : '删除订单'
} }
}, },
listItem: function() { listItem: function () {
return function(opt) { return function (opt) {
return opt.options ? opt.options[this.innerTab].items : opt.items return opt.options ? opt.options[this.innerTab].items : opt.items
} }
}, },
showEmpty: function() { showEmpty: function () {
let opt = this.options[this.tab] let opt = this.options[this.tab]
if(opt.options) { if (opt.options) {
return opt.options[this.innerTab].items.length == 0 return opt.options[this.innerTab].items.length == 0
} else { } else {
return opt.items.length == 0 return opt.items.length == 0
...@@ -152,10 +199,10 @@ ...@@ -152,10 +199,10 @@
} }
}, },
methods: { methods: {
onTopTab: function(tab) { onTopTab: function (tab) {
}, },
onInnerTab: function(tab) { onInnerTab: function (tab) {
this.innerTab = tab this.innerTab = tab
} }
}, },
......
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