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

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

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

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

<template>

<div class="fabu-page">

<div class="clip-wp" id="clip-wp" v-show="isClip" >

<div id="container"></div>

<button id="save-img" @click="saveImg">截取</button>

</div>

<div class="fb-navbar ui-border-b" v-show="isClip == false">

<div class="fb-navbar-item" @click="link(0)" :class="queryType == 0 || queryType == null ? 'active' : ''">发布活动</div>

<div class="fb-navbar-item" @click="link(1)" :class="queryType == 1 ? 'active' : ''">我的发布</div>

</div>

<!--发布活动-->

<div v-if="queryType == 0">

<div class="tj_hb">

<input v-el:avatar hidden type="file" accept="image/*;capture=camera" name="img" @change="onChooseImage($event)">

<img :src="clipUrl" @click="hbPhoto()">

</div>

<!-- 压缩图片用的 -->

<canvas id="compressCanvas" style="position: fixed; z-index: -1; opacity: 0; top: -100%; left: -100%"></canvas>

<div>

<mt-field label="主题:" placeholder="活动主题" :value.sync="title"></mt-field>

<mt-cell class="mint-field" title="类型:" placeholder="请选择" @click="onType" is-link>

{{selectType}}

</mt-cell>

<mt-field label="日期时间:" placeholder="格式：2020-01-01 10:30" :value.sync="endTime"></mt-field>

<mt-field label="费用:" placeholder="现场付款，免费请填0" :value.sync="price"></mt-field>

<div v-show="selectType !== '线上活动'">

<mt-field label="地点:" placeholder="格式：市-详细地址" :value.sync="address"></mt-field>

</div>

<mt-field placeholder="详情描述" type="textarea" rows="5" :value.sync="remark"></mt-field>

</div>

<div class="upload-img-column">

<div class="words">添加详情图片 ({{imgTempList.length}}/5)</div>

<div class="upload-wrap">

<div class="box">

<label class="p dotted">

<input v-el:detail type="file" accept="image/jpg,image/jpeg,image/png" name="file"

@change="onChooseDetailImage($event)">

<img src="../../assets/img/jiahao.png" @click="detailPhoto()" alt="">

</label>

</div>

<template v-for="(imgIndex, imgItem) in imgTempList">

<div class="box">

<div class="p">

<img :src="imgItem">

<div class="delete" @click.stop="deleteImg(imgIndex)">

<img src="../../assets/img/close-icon.png" alt="">

</div>

</div>

</div>

</template>

</div>

</div>

<div class="footer">

<!--<mt-button class="preview" type="default" @click="preview">预览</mt-button>-->

<mt-button class="commit" type="primary" @click="commit">发布</mt-button>

</div>

<mt-popup :visible.sync="typeOption" position="bottom" class="select-box">

<div>

<div class="select-header">

<div class="title">选择类型</div>

<div class="close" @click="typeOption = false"></div>

</div>

<div class="select">

<label v-for="item in huoDongType" @click="setType(item.name)" :key="item.id">

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

<span class="text">{{item.name}}</span>

</label>

</div>

</div>

</mt-popup>

</div>

<!--我的发布-->

<div v-else>

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

<div v-for="v in listData" v-on:click="openNews(v.id)">

<div class="article-item clearfix">

<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.status}} {{v.endTime}}</p>

</div>

</div>

</div>

</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>

</div>

<tabbar></tabbar>

</div>

</template>

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

<style lang="scss">

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

.fabu-page{

padding-bottom: 0.829rem;

.fb-navbar {

z-index: 100;

position: fixed;

left: 0;

top: 0;

width: 100%;

height: 0.512rem;

background-color: #fff;

.fb-navbar-item {

position: relative;

font-size: 0.170667rem;

float: left;

width: 50%;

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%);

}

}

}

}

.list{

margin-top: 0.518rem;

.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: #e01845;

line-height: 1.5;

position:absolute;

bottom:0px;

}

}

}

}

.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;

}

}

.tj_hb{

//text-align: center;

margin-top: .56rem;

img{

width: 100%;

height: 200px;

}

}

.select-box {

background: #fff;

width: 100%;

.select-header {

display: flex;

width: 100%;

height: 0.512rem;

.title {

font-size: 0.19rem;

-webkit-box-flex: 1;

-webkit-flex: 1;

flex: 1;

text-align: center;

text-indent: 0.512rem;

line-height: 0.512rem;

}

.close {

width: 0.512rem;

height: 0.512rem;

background: url("../../assets/img/close-icon.png") no-repeat center;

background-size: 0.147911rem;

}

}

.hover {

background-color: #ff004f;

border-color: #ff004f;

}

.hover::after {

border-color: #333;

-webkit-transform: rotate(45deg) scale(1);

transform: rotate(45deg) scale(1);

}

.select {

padding: 0.136533rem 0.170667rem 0.011333rem 0.170667rem;

p {

padding: 0.056889rem 0 0.136533rem 0;

}

label {

width: 100%;

display: block;

position: relative;

overflow: hidden;

margin-bottom: 0.136533rem;

span {

float: left;

}

.text {

color: #666;

font-size: 0.168rem;

margin-left: 0.113778rem;

margin-top: 0.136533rem;

}

input {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 0.216178rem;

}

}

}

.line{

background: #ced0d2;

height: 1px;

width: 100%;

}

}

.footer{

margin-top: 6px;

background-color: #fff;

.preview{

margin-left: 10px;

float: left;

width: 50%;

}

.commit{

//margin-right: 10px;

//float: right;

width: 100%;

}

}

/* 上传图片栏目 START */

.upload-img-column {

width: 100%;

padding: 10px;

}

.upload-img-column .words {

font-size: 14px;

}

.upload-img-column .upload-wrap {

width: 100%;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-ms-flex-direction: row;

flex-direction: row;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

}

.upload-img-column .upload-wrap .box {

width: 33.33%;

padding: 10px 10px 0 0;

}

.upload-img-column .upload-wrap .box .p {

width: 100%;

height: 0;

padding-bottom: 100%;

border-radius: 5px;

position: relative;

overflow: hidden;

}

.upload-img-column .upload-wrap .box .p img {

position: absolute;

width: 100%;

height: 100%;

border-radius: 5px;

overflow: hidden;

left: 50%;

top: 50%;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

.upload-img-column .upload-wrap .box .p .delete {

width: 30px;

height: 30px;

text-align: center;

border-radius: 50%;

background: #e0e0e0;

position: absolute;

right: 0;

top: 0;

//z-index: 2;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-ms-flex-direction: row;

flex-direction: row;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

opacity: 0.8;

}

.upload-img-column .upload-wrap .box .p .delete:active {

-webkit-transform: scale(0.95);

-ms-transform: scale(0.95);

transform: scale(0.95);

}

.upload-img-column .upload-wrap .box .p .delete img {

width: 14px;

height: 14px;

}

.upload-img-column .upload-wrap .box .p.dotted {

display: block;

border: dotted 2px #999;

}

.upload-img-column .upload-wrap .box .p.dotted input {

display: none;

}

.upload-img-column .upload-wrap .box .p.dotted img {

width: 60%;

height: auto;

position: absolute;

left: 50%;

top: 50%;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

opacity: .8;

}

/* 上传图片栏目 END */

.clip-wp{

position: fixed;

width: 100%;

top: 0;

bottom: 0;

z-index: 11;

background-color: #000;

text-align: center;

#container{

background-color: #000;

text-align: center;

width: 100%;

left: 0;

right: 0;

top: 20px;

bottom: 80px;

margin: 0 auto;

position: absolute;

}

#save-img{

position: absolute;

bottom: 20px;

width: 90%;

left: 5%;

height: 42px;

line-height: 42px;

color: #fff;

background-color: #32c47c;

border-radius: 20px;

}

#image-box {

position: absolute;

left: 0px;

right: 0px;

bottom: 0px;

top: 0px;

margin: auto;

}

#cover-box {

position: absolute;

z-index: 9999;

display: none;

left: 0px;

right: 0px;

bottom: 0px;

top: 0px;

margin: auto;

}

}

.btn-more{

margin-bottom: 0.133333rem;

text-align: center;

color: #333;

background-color: #ecf2f7;

}

}

</style>

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

<script>

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

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

import Popup from '../../components/popup'

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

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

import Field from '../../components/field'

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

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

import clip from '../../components/clip/clip.js'

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

export default {

components: [Tabbar,Popup, Button, Field, Cell,Toast],

data () {

return {

token: '',

typeOption: false,

selectType: '请选择',

title: '',

zhu_bf: '',

zhu_bf_phone: '',

address: '',

endTime: '',

price: '',

remark: '',

huoDongType: [{

id: 1,

name: '夏令营'

},{

id: 2,

name: '游乐园'

},{

id: 3,

name: '周边户外'

},{

id: 4,

name: '岁月摄影'

},{

id: 5,

name: '教育培训'

},{

id: 6,

name: '线上活动'

}] ,

queryType: 0,

hasNext: 0,

page: 1,

listData: [{

"id": "1",

"title": "30天宝妈成长陪伴--《宝妈加油站》线上训练营",

"status": '进行中',

"endTime": "2020-05-06",

"banner": "http://cdn.huodongxing.com/file/20161115/110189F058F20ABBDC8B0E40D81C448D7A/1540798324752.jpg",

"city": "深圳",

"price": 0,

"hdType": "线上活动"

}],

clipUrl: "https://wb-master.oss-cn-shenzhen.aliyuncs.com/photo/tj_hb.png",

imgTempList: [], //图片临时路径列表

isClip:false,

noScoll:function(evt){

this.isClip && evt.preventDefault();

},

clip:{}

}

},

route: {

data (transition) {

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

this.zhu_bf = getCookie('prod_zhu_bf')

this.zhu_bf_phone = getCookie('prod_zhu_bf_phone')

} else {

this.zhu_bf = getCookie('dev_zhu_bf')

this.zhu_bf_phone = getCookie('dev_zhu_bf_phone')

}

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

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

//我的发布数据

if(this.queryType == 1)

{

this.getData()

}

}

}

},

methods: {

saveImg(){

this.isClip = false;

this.clip.save();

document.body.removeEventListener('touchmove',this.noScoll,false);

},

hbPhoto() {

//触发添加海报图片按钮

//console.log('onPhoto')

this.$els.avatar.dispatchEvent(new MouseEvent("click"));

},

detailPhoto() {

//触发添加详情图片按钮

//console.log('detailPhoto')

this.$els.detail.dispatchEvent(new MouseEvent("click"));

},

//选择海报图片

onChooseImage: function (event) {

this.clip = new clip('container',this);

this.clip.init(event.target.files[0]);

this.isClip = true;

document.body.addEventListener('touchmove',this.noScoll,false);

},

//选择图片

onChooseDetailImage: function (event) {

var that = this;

//判断图片数量是否已上限

var currentImgTempArray = that.imgTempList;

if (currentImgTempArray.length >= 5) {

Toast("最多上传5张图片");

return false;

}

//使用FileReader对文件对象进行操作

var reader = new FileReader();

reader.readAsDataURL(event.target.files[0]); //将读取到的文件编码成Data URL

reader.onload = function () { //读取完成时

var replaceSrc = reader.result; //文件输出的内容

//压缩图片处理

var image = new Image();

image.src = replaceSrc;

image.onload = function () {

//获取图片初始宽高

var width = image.width;

var height = image.height;

//判断图片宽度，再按比例设置宽度和高度的值

if (width > 1024) {

width = 1024;

height = Math.ceil(1024 * (image.height / image.width));

}

//将图片重新画入canvas中

var canvas = document.getElementById("compressCanvas");

var context = canvas.getContext("2d");

canvas.width = width;

canvas.height = height;

context.beginPath();

context.fillStyle = "#ffffff";

context.fillRect(0, 0, width, height);

context.fill();

context.closePath();

context.drawImage(image, 0, 0, width, height);

replaceSrc = canvas.toDataURL("image/png"); //canvas转DataURL(base64格式)

//将压缩后的路径 追加到临时路径数组中

var totalList = [];

if (currentImgTempArray.length > 0) {

totalList = currentImgTempArray.concat(replaceSrc);

} else {

totalList[0] = replaceSrc;

}

that.imgTempList = totalList;

};

};

},

deleteImg: function (idx) {

var that = this;

that.imgTempList.splice(idx, 1);

},

openNews (id) {

window.location.href = "#!/smart-zgw/my-fabu?id=" + id

},

commit() {

let params = {}

params.banner = this.clipUrl

params.fj_image = this.imgTempList

params.title = this.title

params.zhu_bf = this.zhu_bf

params.zhu_bf_phone = this.zhu_bf_phone

params.address = this.address

params.endTime = this.endTime

params.remark = this.remark

params.price = this.price

params.hdType = this.selectType

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

let data = res.data.message

Toast(data)

}, res => {

console.log(1111)

})

},

preview() {

//window.location.href = "#!/smart-zgw/yu-lan"

this.$route.router.go({path: 'yu-lan'})

},

onType() {

this.typeOption = true

console.log(this.typeOption)

},

setType(name) {

this.selectType = name

this.typeOption = false

},

getData() {

Indicator.open()

this.page = 1

let params = {}

params.zhu_bf_phone = this.zhu_bf_phone

params.page = this.page

params.pageSize = 30

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

let data = res.data.data

this.listData = data.list

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

Indicator.close()

}, res => {

Indicator.close()

})

},

loadingList () {

Indicator.open()

this.page = this.page + 1

let params = {}

params.zhu_bf_phone = this.zhu_bf_phone

params.page = this.page

params.pageSize = 30

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

let data = res.data.data.list

this.listData = this.listData.concat(data)

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

Indicator.close()

}, res => {

Indicator.close()

})

},

link(index) {

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

//window.location.href = "#!/smart-zgw/fa-bu?type="+index

}

},

filters: {

urlHttp (value) {

if (value && value.indexOf('http:') > -1) {

return location.protocol + value.split('http:')[1]

} else {

return value;

}

},

text (val) { // 转换成换行

if (val) {

return val.replace(/rn/g, '</br>')

}

},

enter (val) {

if (val) {

return val.replace(/rn/g, '</br>')

}

}

}

}

</script>

5、发布活动界面用到发布活动和读取我的发布活动数据的接口，在script里可以看到api.commitHuoDong和api.myHuoDong，在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'),

}

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

.js文件里添加下面代码，在开发环境，输入http://localhost:8087/?#!/smart-zgw/fa-bu就可访问发布活动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'

}

}

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

下一篇：人人都可写代码-H5零基础编程-活动订单界面实操08

datagridview 绑定list 不能刷新界面_人人都可写代码-H5零基础编程-发布活动界面实操07...相关推荐

  1. datagridview 绑定list 不能刷新界面_人人都可写代码-H5零基础编程-首页界面实操06...

    欢迎来到人人都可写代码,大家好,我是杨晓华,今天我们的课程内容是,项目实操,开发一个首页界面的H5. 这是要实现的H5首页界面展示效果,下面就是教大家如何制作的步骤: 1.在views的项目smart ...

  2. qtdesigner怎么实现菜单栏跳转_人人都可写代码-Android零基础编程-app 入口菜单栏实操08...

    欢迎来到人人都可写代码,大家好,我是杨晓华,今天我们的课程内容是项目实操,以智者精选项目为例,编写一个Android app的入口关联菜单栏逻辑. 这是要实现的菜单栏组件展示效果,下面就是教大家如何制 ...

  3. h5可以获取本机手机号码么_人人都可写代码-H5零基础编程-登录界面实操05

    欢迎来到人人都可写代码,大家好,我是杨晓华,今天我们的课程内容是,项目实操,开发一个登录界面的H5. 这是要实现的H5登录界面展示效果,手机号+验证码的登录方式:下面就是教大家如何制作的步骤: 1.在 ...

  4. android 按钮顶级效果_人人都可写代码-Android零基础编程-相对布局11

    欢迎来到人人都可写代码,大家好,我是杨晓华,今天我们的课程内容是:Android界面布局中的相对布局. 1.RelativeLayout的概述 (1) RelativeLayout是一个允许子视图相对 ...

  5. android 不通过数据线打印日志_人人都可写代码-Android零基础编程-开发调试、APK编译04...

    欢迎来到人人都可写代码,大家好,我是杨晓华,今天我们的课程内容是,讲解Android开发中如何调试代码程序,开发完后如何打包成可发布的apk文件. 开发调试 在开发中,难免我们会遇到BUG,快速定位问 ...

  6. python实现qq登录界面_使用Python编写一个QQ办公版的图形登录界面！

    最近,QQ的办公版本--TIM进行了一次更新升级.本次更新升级大幅修改了界面的样式,看起来更加的清爽.简洁和高效了. 这种界面州的先生还是比较喜欢的,没有QQ那么花里胡哨,也比微信那些残缺的功能更加丰 ...

  7. python制作qq登录界面_使用Python编写一个QQ办公版的图形登录界面

    最近,QQ的办公版本--TIM进行了一次更新升级.本次更新升级大幅修改了界面的样式,看起来更加的清爽.简洁和高效了. 这种界面州的先生还是比较喜欢的,没有QQ那么花里胡哨,也比微信那些残缺的功能更加丰 ...

  8. 零基础自学python计划_「经验分享」python零基础学习规划与建议！

    如果你选择了自学,我想给你提几点建议: 1.找浅显易懂,例程比较好的教程,从头到尾看下去.不要看很多本,专注于一本.把里面的例程都手打一遍,搞懂为什么. 2.去找实际项目练手.最好是要有真实的项目做. ...

  9. unity给头发添加物理_不需要写代码,直接在unity实现手机可以跑的毛发效果

    马上注册,加入CGJOY,让你轻松玩转CGJOY. 您需要 登录 才可以下载或查看,没有帐号?立即注册 x 大家好,  我是炭窑居士, 好久不见 这次由我和好友fxyyoung一起给大家带来原创的毛发 ...

最新文章

  1. Python查找相同元素，不同元素
  2. 逆势而上的技术：图神经网络学习来了！
  3. java 怎么从性能上优化代码_月薪上万做好这一步：程序员职场中必须掌握的的Java代码性能优化技巧...
  4. 如何使用.NET从十六进制颜色代码中获取颜色？
  5. 目前国内的语音识别技术是什么水准？
  6. 装机人员常用软件工具大全
  7. java velocity 语法_Velocity语法
  8. win10开机密码忘记怎么办|win10登陆密码忘记解决方法
  9. SPSS——总体均数的估计及假设检验（t 检验）
  10. python中关于时间和日期函数的常用计算总结
  11. 2021-11-06大数据学习日志——数据埋点+网络爬虫——数据提取
  12. 圆形区域函数可视化和泊松方程求解
  13. ENVI系列--遥感影像UTM投影计算公式
  14. PYTHON机器学习基础（初学机器学习者的福音）
  15. 通过ping检测网络故障的典型次序
  16. 【已解决】ansys打开没有主界面，只有output窗口怎么回事？
  17. X-Mind8破解版
  18. 树莓派centos踩坑之旅，解决每次重启都需要route add才能有网络
  19. 新一代网状网协议T-Mesh无线通信技术优势介绍
  20. SQL数据库修复例子

热门文章

  1. relu函数为分段线性函数，为什么会增加非线性元素
  2. 2018.09.23 codeforces 1053B. Vasya and Good Sequences（前缀和）
  3. linux彻底删除nginx
  4. 更改centos epel源
  5. Git 有时候推送以及拉去不了代码解决方式（二）
  6. Keepalived实现双机热备
  7. $python日期和时间的处理
  8. git pull 失败 ,提示：fatal: refusing to merge unrelated histories
  9. 从豌豆荚百度撕逼中学作文
  10. github开源库（三）