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 @@
<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 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>
<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 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;">
<span class="text_14_600 color_333333">[班级课程]透视理论01——认识透视</span>
<span class="text_14_600 color_FF3B3B">¥100</span>
......@@ -45,15 +49,20 @@
<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 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>
<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">
......@@ -61,8 +70,12 @@
<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 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>
......@@ -80,7 +93,7 @@
new Vue({
el: "#app",
data: function() {
data: function () {
return {
tab: 0,
innerTab: 0,
......@@ -89,62 +102,96 @@
options: [{
title: "课程订单",
items: [1]
},
{
}, {
title: "考题订单",
items: [2]
},
{
}, {
title: "商城订单",
items: [3]
}]
},{
}, {
title: "待发货",
items: []
},{
options: [{
title: "课程订单",
items: [1]
}, {
title: "考题订单",
items: [2]
}, {
title: "商城订单",
items: [3]
}]
}, {
title: "待收货",
items: []
},{
options: [{
title: "课程订单",
items: [1]
}, {
title: "考题订单",
items: [2]
}, {
title: "商城订单",
items: [3]
}]
}, {
title: "已完成",
items: []
},{
options: [{
title: "课程订单",
items: [1]
}, {
title: "考题订单",
items: [2]
}, {
title: "商城订单",
items: [3]
}]
}, {
title: "已取消",
items: []
options: [{
title: "课程订单",
items: [1]
}, {
title: "考题订单",
items: [2]
}, {
title: "商城订单",
items: [3]
}]
}]
}
},
mounted:function(){
mounted: function () {
$("#preloader").hide()
},
computed: {
showHollow: function() {
return function(index) {
showHollow: function () {
return function (index) {
return index != 1 && index != 2
}
},
showSolid: function() {
return function(index) {
showSolid: function () {
return function (index) {
return index == 0
}
},
showImage: function() {
return function(item) {
showImage: function () {
return function (item) {
return false//TODO 每一个item要设置一个类型显示带图的还是不带图
}
},
hollowText: function() {
return function(index) {
hollowText: function () {
return function (index) {
return index == 0 ? '取消订单' : '删除订单'
}
},
listItem: function() {
return function(opt) {
listItem: function () {
return function (opt) {
return opt.options ? opt.options[this.innerTab].items : opt.items
}
},
showEmpty: function() {
showEmpty: function () {
let opt = this.options[this.tab]
if(opt.options) {
if (opt.options) {
return opt.options[this.innerTab].items.length == 0
} else {
return opt.items.length == 0
......@@ -152,10 +199,10 @@
}
},
methods: {
onTopTab: function(tab) {
onTopTab: function (tab) {
},
onInnerTab: function(tab) {
onInnerTab: function (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