class h5 点击后样式变化_人人都可写代码-H5零基础编程-活动订单界面实操08

欢迎来到人人都可写代码，大家好，我是杨晓华，今天我们的课程内容是，项目实操，开发一个活动订单界面的H5。

这是要实现的H5活动订单界面展示效果，下面就是教大家如何制作的步骤：

1、在views的项目smart-zgw目录下，新建can-jia.vue文件。这个文件由三部分style、template、script组成。stytle用于绑定样式、template用于设计标签界面、script用于数据交互操作。

2、template部分里编写的代码是:

<template>

<div class="tpl-page">

<div class="order-navbar ui-border-b">

<!--<div class="order-navbar-item" @click="link(1)" :class="queryType == 1 || queryType == null ? 'active' : ''">待付款<div v-if="countData && countData.wait_pay > 0" class="badge-info">{{countData.wait_pay}}</div></div>-->

<div class="order-navbar-item" @click="link(2)" :class="queryType == 2 ? 'active' : ''">待参加<div v-if="countData && countData.wait_use > 0" class="badge-info">{{countData.wait_use}}</div></div>

<div class="order-navbar-item" @click="link(3)" :class="queryType == 3 ? 'active' : ''">已结束</div>

<div class="order-navbar-item" @click="link(0)" :class="queryType == 0 ? 'active' : ''">全部</div>

</div>

<div class="article-list" v-if="msgList.length > 0">

<li v-for="v in msgList" v-if="queryType == v.query_st || queryType == 0">

<div class="line"></div>

<div v-if="queryType == 1 || queryType == 2 ">

<p class="tj-name" style="float:left;">{{v.hdType}} - {{v.city}}</p>

<p class="tj-dec" v-if="queryType == 1">去付款</p>

<p class="tj-dec" v-if="queryType == 2" @click="toCancel(v.id)">取消参加</p>

</div>

<div v-else>

<p class="tj-name">{{v.hdType}} - {{v.city}}</p>

</div>

<div class="article-item clearfix" v-on:click="openNews(v.id)">

<div class="pull-left">

<img :src="v.banner" :alt="v.title">

</div>

<div class="item-intro">

<div class="item-title">{{v.title}}</div>

<p class="item-desc">{{v.price | price_st}}，{{v.endTime}}</p>

</div>

</div>

</li>

</div>

<p class="order-list-empty" v-else>

<span></span>

暂无数据！

</p>

<mt-button class="btn-more" size="large" type="primary" v-if="hasNext > 0" @click="loadingList">点击加载更多</mt-button>

<tabbar></tabbar>

</div>

</template>

3、style部分里编写的代码是：

<style lang="scss">

@import '../../assets/css/fn';

.tpl-page{

padding-bottom: 0.829rem;

.order-navbar {

z-index: 100;

position: fixed;

left: 0;

top: 0;

width: 100%;

height: 0.512rem;

background-color: #fff;

.order-navbar-item {

position: relative;

font-size: 0.170667rem;

float: left;

width: 33.33%;

height: 100%;

line-height: 0.512rem;

text-align: center;

color: #999;

&.active {

color: #333;

position: relative;

&:before {

content: "";

width: 50%;

height: 0.022756rem;

background: #ff004f;

position: absolute;

bottom: 0;

left: 50%;

transform: translateX(-50%);

}

}

}

}

.badge-info {

position: absolute;

top: 0.022756rem;

right: 0.011378rem;

color: #fff;

font-size: 0.113778rem;

font-weight: normal;

-webkit-transform: scale(0.8);

transform: scale(0.8);

text-align: center;

box-sizing: border-box;

padding: 0 0.068267rem;

min-width: 0.2048rem;

line-height: 0.2048rem;

border-radius: 0.1024rem;

background-color: #f44;

}

.article-list{

//width: 900px;

margin-top: 0.52rem;

.line{

background: #ced0d2;

height: 1px;

width: 100%;

}

.article-item{

position: relative;

padding: 5px;

background: #fff;

margin-bottom: 5px;

box-shadow: 1px 1px 1px #e7e7e7;

transition: all 0.2s;

img{

overflow: hidden;

height: 80px;

width: 130px;

margin-right: 15px;

}

.pull-left{

float: left;

}

.item-intro{

height: 80px;

overflow: hidden;

position: relative;

.item-title{

display: block;

font-size: 16px;

line-height: 1.5;

color: #333333;

width: 230px;

}

a{

text-decoration: none;

}

.item-desc{

font-size: 14px;

color: #1b8d9c;

line-height: 1.5;

position:absolute;

bottom:0px;

}

}

}

.tj-name{

font-size: 15px;

padding:6px 15px;

//float:left;

}

.tj-dec{

margin-left:3.2rem;

font-size: 15px;

padding:6px 10px;

width: 90px;

font-weight: bold;

background: #4ccddd;

//border-radius: 1rem;

text-align: center;

color: #fff;

}

.clearfi{

display: block

}

}

.order-list-empty{

margin-top: 1.422222rem;

color: $desc;

text-align: center;

font-size: 0.159289rem;

span{

display: block;

width: 1.109333rem;

height: 1.109333rem;

background: url("../../assets/img/no_data.png") no-repeat 0 0;

background-size: cover;

margin: 0 auto 0.113778rem;

}

}

.btn-more{

margin-bottom: 0.133333rem;

text-align: center;

color: #333;

background-color: #ecf2f7;

}

}

</style>

4、script部分里编写的代码是：

<script>

import Tabbar from '../../components/tabbar'

import Cell from '../../components/cell'

import api from '../../api'

import Toast from '../../components/toast'

import Indicator from '../../components/indicator'

import Button from '../../components/button'

import { getAllParam, setCookie, getCookie, clearCookie } from '../../utils/other.js'

export default {

components: [Tabbar,Cell,Button],

data () {

return {

name: '',

mobile: '',

hasNext: 0,

page: 0,

queryType: 2,

countData: {

"wait_pay": 0,

"wait_use": 0

},

msgList: []

}

},

route: {

data (transition) {

if (process.env.NODE_ENV === 'production') {

this.name = getCookie('prod_zhu_bf')

this.mobile = getCookie('prod_zhu_bf_phone')

} else {

this.name = getCookie('dev_zhu_bf')

this.mobile = getCookie('dev_zhu_bf_phone')

}

if(this.$route.query.type){

this.queryType = this.$route.query.type

}

this.getData()

}

},

methods: {

openNews(id)

{

window.location.href = "#!/smart-zgw/can-jia-detail?id=" + id + "&bao_ming=0"

},

toCancel (id) {

let params = {}

params.huo_dong_id = id

params.mobile = this.mobile

api.huodongCancel.save(params).then(res => {

let data = res.data.message

Toast(data)

location.reload()

}, res => {

Toast('取消失败')

})

},

getData() {

Indicator.open()

this.page = 0

let params = {}

params.mobile = this.mobile

params.page = this.page

params.pageSize = 20

api.canJiaOrderList.get(params).then(res => {

let data = res.data.data

this.msgList = data.list

this.countData = data.countData

this.hasNext = data.page.pageCount - this.page - 1

Indicator.close()

}, res => {

console.log('读取失败')

Indicator.close()

})

},

loadingList () {

Indicator.open()

this.page = this.page + 1

let params = {}

params.mobile = this.mobile

params.page = this.page

params.pageSize = 20

api.canJiaOrderList.get(params).then(res => {

let data = res.data.data.list

this.msgList = this.msgList.concat(data)

this.countData = data.countData

this.hasNext = res.data.data.page.pageCount - this.page -1

Indicator.close()

}, res => {

//console.log('读取失败')

Indicator.close()

})

},

link(index) {

this.$route.router.go({path: 'can-jia', query: {type: index}})

}

},

filters: {

price_st: function (value) {

if (value == 0) {

return '免费'

}

else {

return '¥'+value + '元'

}

}

}

}

</script>

5、活动订单界面用到取消参加活动和读取参加活动订单列表数据的接口，在script里可以看到api.huodongCancel和api.canJiaOrderList，在api目录的index.js文件里需设置这两个接口。

export default {

login: init(appHost, '/v2/topic/login?appid=zgw'),

getVerifyCode: init(appHost, ‘/v2/login/get-verify-code?appid=zgw’),

homeIndex: init(appHost, '/v2/topic/home-index?appid=zgw'),

commitHuoDong: init(appHost, '/v2/topic/fabu-huodong?appid=zgw'),

myHuoDong: init(appHost, '/v2/topic/my-huodong?appid=zgw'),

huodongCancel: init(appHost, ‘/v2/topic/huodong-cancel?appid=zgw'),

canJiaOrderList: init(appHost, '/v2/topic/can-jia-order-list?appid=zgw'),

}

6、编写界面和数据交互后，还需要设置页面的访问路由，在route目录的index

.js文件里添加下面代码，在开发环境，输入http://localhost:8087/?#!/smart-zgw/can-jia就可访问活动订单H5。

export function configRouter (router) {

router.map({

'/smart-zgw': {

component: require('../views/smart-zgw/wrap.vue'),

subRoutes: {

'home': {

component: require('../views/smart-zgw/home.vue'),

title: '这个娃亲子活动服务平台',

name: 'smartzgwhome'

},

'login': {

component: require('../views/smart-zgw/login.vue'),

title: '登录'

},

'xie-yi': {

component: require('../views/smart-zgw/xie-yi.vue'),

title: '《用户服务协议》'

},

'fa-bu': {

component: require('../views/smart-zgw/fa-bu.vue'),

title: '发布',

name: 'fabu'

},

'can-jia': {

component: require('../views/smart-zgw/can-jia.vue'),

title: '参加活动的订单',

name: 'canjia'

}

}

开头：人人都可写代码-H5零基础编程-序言01

下一篇：人人都可写代码-H5零基础编程-个人中心界面实操09