Skip to content

dev / lilejia-f2mb-pro

Go to a project
Toggle navigation
Toggle navigation pinning
7c65a283 by joe
Options

临时保存

1 parent 4d9925d8
Inline Side-by-side
Showing 33 changed files with 1377 additions and 48 deletions
......@@ -135,4 +135,11 @@ body {
color: #e8e8e8;
}
}
.home {
position: relative;
text-align: center;
background-color: #74cb35;
}
</style>
......
<template>
<van-popup v-model="data.show">
<div class="model">
<div class="model" v-if="data.index == 'default'">
<div class="model-close" @click="modelCloseHandler"></div>
<div class="model-content">
<div class="model-head-line"></div>
<div class="model-title">{{data.title}}</div>
<div class="successModel" v-if="data.index == 'default'">
<div class="successModel">
<div class="model-data">{{data.content}}</div>
<div v-if="data.btnShow" class="sys-btn-02" @click="modelBtnClickHandler">{{data.btnText}}</div>
<div
......@@ -18,6 +18,47 @@
</div>
</div>
</div>
<div class="model rule-model" v-if="data.index == 'rule'">
<div class="model-close" @click="modelCloseHandler"></div>
<!-- 规则-->
<div class="model-content">
<div class="model-head-line"></div>
<div class="model-title">{{data.title}}</div>
<div class="rule-container">
<div class="rule-line">
<div>1.</div>
<div>每位微信用户每天可投一票；</div>
</div>
<div class="rule-line">
<div>2.</div>
<div>投票后可以获得一次抽奖机会；</div>
</div>
<div class="rule-line">
<div>3.</div>
<div>严禁恶意刷人气，一经发现将立即取消选手人气评选资格；</div>
</div>
<div class="rule-line">
<div>4.</div>
<div>本组委会保留最终解释权；</div>
</div>
<div class="rule-line">
<div>5.</div>
<div>报名截止时间9月19日23：59，投票截止时间9月20日23：59，最终入围名单将在9月21在嘉佳卡通卫视官方微信号公布</div>
</div>
<div class="rule-line">
<div>6.</div>
<div>因不可抗因素造成网络人气评选被动停止的，以网络人气评选停止时间的人气值为准。</div>
</div>
</div>
<div class="successModel">
<div v-if="data.btnShow" class="sys-btn-02" @click="modelBtnClickHandler">{{data.btnText}}</div>
<div class="model-bottom-line"></div>
</div>
</div>
</div>
</van-popup>
</template>
......@@ -71,7 +112,7 @@ export default {
<style lang="less" scoped>
.van-popup {
background-color: transparent;
top: 40%;
top: 45%;
}
.model {
display: flex;
......@@ -130,4 +171,34 @@ export default {
font-size: 26px;
text-align: center;
}
.rule-model {
width: 600px !important;
.model-content {
width: 600px !important;
}
.rule-container {
margin: 30px auto;
}
.rule-line {
width: 520px;
margin: auto;
display: flex;
align-items: flex-start;
div {
font-size: 24px;
color: #303531;
text-align: left;
line-height: 50px;
}
div:first-child {
min-width: 40px;
}
}
}
</style>
......
<template>
<div class="sys-container-panel content">
<div class="container-title">{{title}}</div>
<div class="head-line"></div>
</div>
</template>
<script>
export default {
props: ["value"],
data() {
return {
title: this.value
};
}
};
</script>
<style lang="scss" scoped>
.content {
margin: 85px auto 60px auto;
padding-bottom: 60px;
}
.container-title {
font-size: 30px;
}
.head-line {
height: 60px;
}
</style>
\ No newline at end of file
<template>
<div class="head-container">
<div class="head-leap"></div>
</div>
</template>
<style lang="scss" scoped>
.head-container {
position: relative;
height: 0px;
}
.head-leap {
width: 750px;
height: 231px;
background: url(../../assets/imgs/head-leap.png);
background-size: 100%;
position: relative;
left: 0;
top: 0;
z-index: 999;
}
</style>
\ No newline at end of file
<template>
<div class="home">
<head-view></head-view>
<div class="sys-container-panel content">
<div class="container-title">{{title}}</div>
<div class="head-line"></div>
<div class="remain-tip">
您现在还有
<b>1</b>次抽奖机会
</div>
<van-row>
<van-col span="8">
<div class="card-bg">
<div class="card-logo logo-01"></div>
</div>
</van-col>
<van-col span="8">
<div class="card-bg">
<div class="card-logo logo-02"></div>
</div>
</van-col>
<van-col span="8">
<div class="card-bg">
<div class="card-logo logo-03"></div>
</div>
</van-col>
<van-col span="8">
<div class="card-bg">
<div class="card-logo logo-04"></div>
</div>
</van-col>
<van-col span="8">
<div class="card-bg">
<div class="card-logo logo-05"></div>
</div>
</van-col>
<van-col span="8">
<div class="card-bg">
<div class="card-logo logo-06"></div>
</div>
</van-col>
<van-col span="8">
<div class="card-bg">
<div class="card-logo logo-07"></div>
</div>
</van-col>
<van-col span="8">
<div class="card-bg">
<div class="card-logo logo-08"></div>
</div>
</van-col>
<van-col span="8">
<div class="card-bg">
<div class="card-logo logo-09"></div>
</div>
</van-col>
</van-row>
<div class="draw-tip">请选择任意一张翻牌开启奖品</div>
<div class="btn-view-prize" @click="model.show =true"></div>
</div>
<div class="bottom-line"></div>
<bottom-tool v-model="activityIndex"></bottom-tool>
<biz-model v-model="model"></biz-model>
</div>
</template>
<script>
import { httpGet } from "@/api/fetch-api";
import BottomTool from "@/components/bottom-tools/bottom-tools";
import BizModel from "@/components/biz-model/biz-model";
import HeadView from "@/components/plugins/head";
import Vue from "vue";
import { Row, Col } from "vant";
Vue.use(Row).use(Col);
export default {
name: "home",
data() {
return {
activityIndex: 4,
title: "幸运大抽奖",
model: {
show: false,
title: "",
content: "",
index: "prize",
btnShow: false,
btnText: "",
confirmHandler: null,
labelBtnShow: false,
labelBtnText: "",
labelBtnHandler: null
}
};
},
methods: {
toSign() {
this.$router.push("/sign");
}
},
components: {
BottomTool,
BizModel,
HeadView
}
};
</script>
<style lang="scss" scoped>
.content {
margin: 85px auto 60px auto;
padding-bottom: 60px;
}
.container-title {
font-size: 30px;
}
.head-line {
height: 60px;
}
.bottom-line {
height: 150px;
background-color: transparent;
}
.remain-tip {
font-size: 30px;
font-weight: 600;
b {
color: #f00;
font-size: 36px;
padding: 0 10px;
}
}
.van-row {
width: 650px;
margin: auto;
margin-top: 10px;
}
.card-bg {
width: 214px;
height: 268px;
background: url(../../assets/imgs/draw-card-bg.png);
background-size: 100%;
display: flex;
align-items: center;
}
.card-logo {
margin: auto;
}
.logo-01 {
width: 111px;
height: 18px;
background: url(../../assets/imgs/draw-logo-01.png) no-repeat;
background-size: 100%;
}
.logo-02 {
width: 65px;
height: 32px;
background: url(../../assets/imgs/draw-logo-02.png) no-repeat;
background-size: 100%;
}
.logo-03 {
width: 62px;
height: 51px;
background: url(../../assets/imgs/draw-logo-03.png) no-repeat;
background-size: 100%;
}
.logo-04 {
width: 70px;
height: 30px;
background: url(../../assets/imgs/draw-logo-04.png) no-repeat;
background-size: 100%;
}
.logo-05 {
width: 89px;
height: 35px;
background: url(../../assets/imgs/draw-logo-05.png) no-repeat;
background-size: 100%;
}
.logo-06 {
width: 73px;
height: 74px;
background: url(../../assets/imgs/draw-logo-06.png) no-repeat;
background-size: 100%;
}
.logo-07 {
width: 66px;
height: 59px;
background: url(../../assets/imgs/draw-logo-07.png) no-repeat;
background-size: 100%;
}
.logo-08 {
width: 81px;
height: 46px;
background: url(../../assets/imgs/draw-logo-08.png) no-repeat;
background-size: 100%;
}
.logo-09 {
width: 109px;
height: 27px;
background: url(../../assets/imgs/draw-logo-09.png) no-repeat;
background-size: 100%;
}
.draw-tip {
font-size: 24px;
text-align: center;
margin: 30px auto 0 auto;
color: #06b686;
}
.btn-view-prize {
width: 283px;
height: 65px;
background: url(../../assets/imgs/draw-btn-viewprize.png) no-repeat;
background-size: 100%;
margin: 30px auto 0 auto;
}
</style>
......
......@@ -22,9 +22,9 @@ export default {
activityIndex: 1
};
},
methods : {
toSign(){
this.$router.push("/sign")
methods: {
toSign() {
this.$router.push("/sign");
}
},
components: {
......@@ -34,11 +34,6 @@ export default {
</script>
<style lang="scss" scoped>
.home {
position: relative;
text-align: center;
background-color: #74cb35;
}
.title {
width: 750px;
height: 955px;
......@@ -90,7 +85,7 @@ export default {
position: absolute;
bottom: 0px;
}
.remain{
.remain {
height: 0px;
}
</style>
......
<template>
<div class="viewClass">
<div class="search-panel">
<div class="input-panel">
<input v-model="listForm.query" />
</div>
<div class="search-btn" @click="searchWorksHandler('searchBtn')"></div>
</div>
<van-row>
<van-col span="12" v-for="(item,index) in worksList" :key="index">
<div class="worksItem" @click="toWorksViewHandler(item.worksCode)">
<div
class="worksThumb"
v-bind:style="{backgroundImage:'url(' + item.worksList[0].worksUrl + ')'}"
></div>
<div class="worksDescription">
<div class="worksNo">{{item.worksNo}}</div>
<div class="worksName">{{item.name}}</div>
<div class="worksPriaseNo">{{item.praiseNumber}}</div>
<div class="worksPraise"></div>
</div>
</div>
</van-col>
<van-col span="24" v-if="worksList.length == 0 ">
<div class="empty">
<div class="empty-icon">
<van-icon name="warn-o" />
</div>
<div class="empty-message">没有搜到任何作品 ！</div>
</div>
</van-col>
</van-row>
</div>
</template>
<script>
let urls = {
list: "/jiajiaCHApi/app/works/list"
};
import { httpGet } from "@/api/fetch-api";
import Vue from "vue";
import { Row, Col } from "vant";
import { Icon } from "vant";
Vue.use(Icon);
Vue.use(Row).use(Col);
export default {
props: [""],
data() {
return {
init: false,
worksList: [],
lastQuery: "",
listForm: {
query: "",
page: 1,
size: 10
}
};
},
methods: {
initActvity() {
this.searchWorksHandler();
},
toWorksViewHandler(code) {
this.$emit("worksDetail", { worksCode: code });
},
searchWorksHandler(action) {
if (action) {
if (this.lastQuery == this.listForm.query) {
return;
}
this.lastQuery = this.listForm.query;
this.listForm.page = 1;
}
httpGet({ url: urls.list, data: this.listForm }).then(res => {
let list = [];
if (this.listForm.page != 1) {
list = this.worksList;
}
list = list.concat(res.list);
this.worksList = list;
});
}
},
created() {
this.initActvity();
}
};
</script>
<style lang="scss" scoped>
.viewClass {
width: 630px;
margin: auto;
padding-top: 30px;
}
.search-panel {
display: flex;
align-items: center;
justify-content: space-between;
width: 630px;
.input-panel {
width: 450px;
height: 52px;
border: 2px solid #82acae;
background-color: #e8e8e8;
line-height: 54px;
border-radius: 26px;
display: flex;
input {
height: 46px;
width: 400px;
line-height: 46px;
border: none;
background-color: transparent;
padding-left: 20px;
font-size: 28px;
position: relative;
z-index: 1000;
}
}
.search-btn {
width: 152px;
height: 53px;
background: url(../../../assets/imgs/list-search-btn.png);
background-size: 100%;
position: relative;
z-index: 1000;
}
}
.van-row {
margin-top: 30px;
}
.worksItem {
width: 300px;
height: 275px;
border: solid 1px #d1d0d0;
box-shadow: 2px 2px 2px #d1d0d0;
border-radius: 20px;
.worksThumb {
width: 300px;
height: 215px;
background-size: cover;
}
.worksDescription {
display: flex;
align-items: center;
padding-left: 10px;
div {
font-size: 26px;
height: 60px;
line-height: 60px;
text-align: left;
text-overflow: ellipsis;
}
.worksNo {
width: 55px;
}
.worksName {
width: 133px;
}
.worksPriaseNo {
width: 63px;
}
.worksPraise {
width: 28px;
height: 24px;
background: url(../../../assets/imgs/list-heart-red.png);
background-size: 100%;
}
}
}
.empty {
padding-top: 100px;
height: 300px;
.empty-icon {
font-size: 60px;
color: #a1a1a1;
}
.empty-message {
font-size: 24px;
color: #a1a1a1;
}
}
</style>
<template>
<div class="viewClass" v-if="formData">
<div class="btn-back" @click="backHandler"></div>
<div class="sys-container-panel content">
<div class="container-title">小选手：{{formData.name}}</div>
<div class="head-line"></div>
<div class="swipe">
<van-swipe :autoplay="5000">
<van-swipe-item v-for="(works, index) in formData.worksList" :key="index">
<!-- <img :src="works.worksUrl" /> -->
<div class="img" v-bind:style="{backgroundImage:'url(' + works.worksUrl + ')'}"></div>
</van-swipe-item>
</van-swipe>
</div>
<div class="text-container space">
<div class="text-container inline">
<div class="label">参数编号：</div>
<div class="msg">{{formData.worksNo}}</div>
</div>
<div class="text-container inline right">
<div class="width-label label">目前人气值：</div>
<div class="msg primay">{{formData.praiseNumber}}</div>
</div>
</div>
<div class="text-container space">
<div class="text-container inline">
<div class="label">来自城市：</div>
<div class="msg">{{formData.province}} {{formData.city}}</div>
</div>
<div class="text-container inline right">
<div class="label">目前排名：</div>
<div class="msg primay">{{formData.rank}}</div>
</div>
</div>
<div class="text-container space top">
<div class="label">竞赛宣言：</div>
<div class="msg">{{formData.slogan}}</div>
</div>
</div>
<div class="view-btn-group">
<div class="sys-btn-02" @click="selfPraiseHandler">投TA一票</div>
<div class="sys-btn-02" @click="showShareHandler">呼叫亲友团</div>
</div>
<div class="btn-tips">*每用户每天仅能投票一次</div>
</div>
</template>
<script>
let urls = {
praise: "/jiajiaCHApi/app/works/praise"
};
import { request } from "@/api/fetch-api";
import Vue from "vue";
import { Toast } from "vant";
import { Swipe, SwipeItem } from "vant";
Vue.use(Swipe).use(SwipeItem);
Vue.use(Toast);
export default {
props: ["value"],
data() {
return {
formData: this.value.data,
isMy: this.value.isMy
};
},
methods: {
formEditHandler() {
this.$emit("edit");
},
selfPraiseHandler() {
// 自己点赞
let data = {
worksCode: this.formData.worksCode
};
Toast.loading({
mask: true,
message: "数据提交..."
});
request
.post(urls.praise, data)
.then(res => {
Toast.clear();
this.$emit("praiseSuccess");
})
.catch(res => {
let msg = res.data.errMsg;
Toast(msg);
});
},
showShareHandler() {
// 出现分享层
this.$emit("showShare");
},
backHandler() {
this.$emit("back");
}
}
};
</script>
<style lang="scss" scoped>
.content {
margin: 85px auto 60px auto;
padding-bottom: 60px;
.head-line {
height: 60px;
}
.edit {
width: 630px;
text-align: right;
u {
font-size: 24px;
color: #5db288;
position: relative;
z-index: 1000;
}
}
.swipe {
width: 630px;
height: 451px;
margin: auto;
border: 2px solid #82acae;
border-radius: 30px;
overflow: hidden;
.img {
height: 451px;
width: 630px;
background-size: cover;
}
}
.space {
margin-top: 20px !important;
}
.top {
display: flex;
align-items: flex-start !important;
}
.inline-group-width {
width: 500px;
}
.inline-group {
display: flex;
justify-content: space-between;
align-items: center;
}
.text-container {
display: flex;
align-items: center;
width: 620px;
margin: auto;
.inline {
width: 315px !important;
.label {
width: 130px;
}
.width-label {
width: 170px !important;
}
.msg {
width: 185px;
}
}
.inline-02 {
width: 180px !important;
padding: 0 30px;
.label {
font-size: 22px;
}
}
.right {
justify-content: flex-end !important;
}
.label {
min-width: 128px;
font-size: 24px;
text-align: left;
}
.msg {
color: #303531;
font-size: 24px;
text-align: left;
}
.primay {
font-size: 32px !important;
font-weight: 600;
color: #ff9e30;
}
}
.privacy {
width: 630px;
margin: auto;
hr {
border-top: 3px dashed #d4d1c5;
margin: 60px auto;
}
}
}
.view-btn-group {
display: flex;
width: 730px;
margin: auto;
justify-content: space-between;
.sys-btn-02 {
width: 340px;
line-height: 80px;
height: 90px;
background-size: 340px 90px;
}
}
.container-title {
font-size: 28px;
}
.auto-register-tips {
width: 700px;
margin: auto;
}
.icon-draw-down {
width: 30px;
height: 18px;
background: url(../../../assets/imgs/draw-down.png) no-repeat;
background-size: 100%;
}
.btn-tips {
width: 640px;
text-align: left;
font-size: 24px;
color: #303531;
margin: auto;
}
.btn-back {
width: 170px;
height: 52px;
background: url(../../../assets/imgs/list-btn-back.png);
background-size: 100%;
position: fixed;
left: 0;
top: 30px;
z-index: 8000;
}
</style>
<template>
<div class="viewClass" v-if="init">
<div class="btn-show-rule" @click="showRuleHandler"></div>
<div v-if="indexForm.worksCode">
<div class="sys-container-panel content top-marin">
<div class="container-title">人气评选</div>
<div class="head-line"></div>
<div class="self-container">
<div class="leap"></div>
<div class="self-content">
<div class="swipe">
<van-swipe :autoplay="5000">
<van-swipe-item v-for="(works, index) in formData.worksList" :key="index">
<div class="img" v-bind:style="{backgroundImage:'url(' + works.worksUrl + ')'}"></div>
</van-swipe-item>
</van-swipe>
</div>
<div class="text-container space">
<div class="text-container inline">
<div class="label">我的编号：</div>
<div class="msg">{{formData.worksNo}}</div>
</div>
<div class="text-container inline">
<div class="label">我的人气：</div>
<div class="msg">{{formData.praiseNumber}}</div>
</div>
<div class="text-container inline">
<div class="label">我的排名：</div>
<div class="msg">{{indexForm.rank}}</div>
</div>
<div class="text-container inline top" @click="praiseHandler">
<div class="no-praise" :class="{praise : indexForm.isPraiseToday == '1'}"></div>
<div class="msg primay">{{indexForm.isPraiseToday == '1' ? '今日已投' : '今日未投'}}</div>
</div>
</div>
</div>
</div>
</div>
<div class="chain-div"></div>
</div>
<div
class="sys-container-panel content list-panel"
v-bind:class="{'top-marin' : indexForm.worksCode == ''}"
>
<div class="container-title" v-if="!indexForm.worksCode">人气评选</div>
<div class="head-line" v-if="!indexForm.worksCode"></div>
<list-view v-on:worksDetail="showWorksDetail"></list-view>
<div class="bottom-line"></div>
</div>
</div>
</template>
<script>
let urls = {
praise: "/jiajiaCHApi/app/works/praise",
index: "/jiajiaCHApi/app/index"
};
import ListView from "./ListView";
import { request, httpGet } from "@/api/fetch-api";
import Vue from "vue";
import { Toast } from "vant";
import { Swipe, SwipeItem } from "vant";
Vue.use(Swipe).use(SwipeItem);
Vue.use(Toast);
export default {
props: ["value"],
data() {
return {
init: false,
formData: this.value,
indexForm: {
rank: 0,
isPraiseToday: 0,
worksCode: "",
isSubcribe: 0
}
};
},
methods: {
initActvity() {
httpGet({ url: urls.index, data: {} }).then(res => {
this.init = true;
this.indexForm = res;
// this.indexForm.worksCode = "";
});
},
praiseHandler(code) {
if (!this.init) {
return;
}
if (this.indexForm.isPraiseToday == 1) {
return;
}
let data = {
worksCode:
(typeof code).toLowerCase() == "string"
? code
: this.indexForm.worksCode
};
Toast.loading({
mask: true,
message: "数据提交..."
});
request
.post(urls.praise, data)
.then(res => {
Toast.clear();
this.indexForm.isPraiseToday = 1;
this.emitPraiseSuccess();
})
.catch(res => {
let msg = res.data.errMsg;
Toast(msg);
});
},
emitPraiseSuccess() {
this.$emit("praiseSuccess");
},
showRuleHandler() {
this.$emit("showRule");
},
showWorksDetail(params) {
this.$emit("worksDetail", params);
}
},
created() {
this.initActvity();
},
components: {
ListView
}
};
</script>
<style lang="scss" scoped>
.viewClass {
position: relative;
.chain-div {
width: 315px;
height: 50px;
background: url(../../../assets/imgs/list-chain-link.png);
background-size: 100%;
position: absolute;
left: 217px;
top: 360px;
z-index: 800;
}
}
.top-marin {
margin: 85px auto 15px auto !important;
}
.content {
padding-bottom: 30px;
.head-line {
height: 80px;
}
}
.self-container {
width: 630px;
height: 265px;
border-radius: 20px;
background-color: #71c634;
margin: 0px auto 0 auto;
position: relative;
padding-top: 5px;
.self-content {
display: flex;
}
.leap {
width: 149px;
height: 129px;
background: url(../../../assets/imgs/leap-04.png);
background-size: 100%;
position: absolute;
right: -5px;
bottom: 0px;
}
.swipe {
width: 265px;
height: 200px;
border: 2px solid #45a402;
border-radius: 20px;
margin: 32px;
overflow: hidden;
div {
line-height: 200px;
height: 200px;
text-align: center;
width: 265px;
}
.img {
margin: auto;
// width: 235px;
height: 190px;
width: 265px;
background-size: cover;
}
}
.space {
margin-top: 32px;
}
.top {
margin-top: 18px !important;
}
.inline {
display: flex;
margin-bottom: 10px;
align-items: center;
.label {
color: #fff;
font-weight: 400;
font-size: 30px;
}
.msg {
color: #0e6f4e;
font-weight: bold;
font-size: 30px;
}
.primay {
font-weight: 500;
font-size: 24px;
}
.no-praise {
margin-right: 10px;
width: 34px;
height: 30px;
background: url(../../../assets/imgs/list-no-praise.png) no-repeat;
background-size: 100%;
}
.praise {
width: 34px;
height: 30px;
background: url(../../../assets/imgs/list-praised.png) no-repeat !important;
background-size: 100% !important;
}
}
}
.list-panel {
min-height: 600px;
}
.bottom-line {
height: 10px;
}
.btn-show-rule {
width: 170px;
height: 52px;
background: url(../../../assets/imgs/list-btn-rule.png);
background-size: 100%;
position: fixed;
left: 0;
top: 30px;
z-index: 8000;
}
</style>
<template>
<div class="home">
<head-view></head-view>
<bottom-tool v-model="activityIndex"></bottom-tool>
<works-list-view
v-model="formData"
v-if="init"
v-show="listVisiabled"
v-on:showRule="showRuleHandler"
v-on:worksDetail="showWorksDetail"
></works-list-view>
<member-works-view
v-model="memberWorks"
v-if="init && !listVisiabled"
v-on:back="showWorksList"
v-on:praiseSuccess="praiseSuccessHandler"
v-on:showShare="shareModelVisiable=true"
></member-works-view>
<biz-model v-model="model"></biz-model>
<div class="bottom-line"></div>
<!-- 分享蒙层 -->
<div class="shareModel" v-if="shareModelVisiable" @click="shareModelVisiable = false">
<div class="shareModelContainer">
<div class="shareModelMask"></div>
<div class="shareIcon"></div>
</div>
</div>
</div>
</template>
<script>
let urls = {
myWork: "/jiajiaCHApi/app/works",
getWorks: "/jiajiaCHApi/app/works/get"
};
import { httpGet } from "@/api/fetch-api";
import BottomTool from "@/components/bottom-tools/bottom-tools";
import BizModel from "@/components/biz-model/biz-model";
import headView from "@/components/plugins/head";
import WorksListView from "./components/WorksListView";
import MemberWorksView from "./components/MemberWorksView";
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
export default {
name: "home",
data() {
return {
activityIndex: 3,
init: false,
listVisiabled: true,
shareModelVisiable: false,
formData: {
worksCode: "",
name: "",
province: "",
provinceCode: "",
city: "",
cityCode: "",
profile: "",
slogan: "",
parentName: "",
parentMobile: "",
worksList: []
},
model: {
show: false,
title: "",
content: "",
index: "default",
btnShow: false,
btnText: "",
confirmHandler: null,
labelBtnShow: false,
labelBtnText: "",
labelBtnHandler: null
},
memberWorks: {
data: {}
}
};
},
methods: {
initActivity() {
Toast.loading({
mask: true,
message: "加载中..."
});
httpGet({ url: urls.myWork }).then(res => {
this.init = true;
Toast.clear();
this.formData = res.data || {};
if (!res.data) {
this.formEdit = true;
} else {
this.formEdit = false;
}
});
},
showRuleHandler() {
this.model.show = true;
this.model.title = "规则说明";
this.model.content = "";
this.model.btnShow = true;
this.model.btnText = "我知道了";
this.model.index = "rule";
this.model.confirmHandler = null;
this.model.labelBtnShow = false;
this.model.labelBtnText = "";
this.model.labelBtnHandler = null;
},
showWorksDetail(params) {
Toast.loading({
mask: true,
message: "数据加载中..."
});
httpGet({ url: urls.getWorks, data: params }).then(res => {
Toast.clear();
this.memberWorks.data = res.data;
this.memberWorks.isMy = res.isMy;
console.log("this.memberWorks=== ", this.memberWorks);
this.listVisiabled = false;
});
},
showWorksList() {
this.listVisiabled = true;
},
praiseSuccessHandler() {}
},
created() {
this.initActivity();
},
components: {
BottomTool,
BizModel,
WorksListView,
MemberWorksView,
headView
}
};
</script>
<style lang="scss" scoped>
.home {
position: relative;
text-align: center;
background-color: #74cb35;
}
.bottom-line {
height: 250px;
background-color: transparent;
}
.shareModel {
position: fixed;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
z-index: 9999;
}
.shareModelContainer {
position: relative;
height: 100%;
width: 100%;
}
.shareModelMask {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
}
.shareIcon {
position: absolute;
top: 0px;
right: 30px;
width: 425px;
height: 220px;
background: url(../../assets/imgs/model-share-tip.png) no-repeat;
background-size: 100%;
}
</style>
......
......@@ -9,7 +9,8 @@
<div class="swipe">
<van-swipe :autoplay="5000">
<van-swipe-item v-for="(works, index) in formData.worksList" :key="index">
<img :src="works.worksUrl" />
<!-- <img :src="works.worksUrl" /> -->
<div class="img" v-bind:style="{backgroundImage:'url(' + works.worksUrl + ')'}"></div>
</van-swipe-item>
</van-swipe>
</div>
......@@ -94,7 +95,7 @@ export default {
.post(urls.praise, data)
.then(res => {
Toast.clear();
this.$emit("praiseSuccess")
this.$emit("praiseSuccess");
})
.catch(res => {
let msg = res.data.errMsg;
......@@ -103,8 +104,8 @@ export default {
},
showShareHandler() {
// 出现分享层
this.$emit("showShare")
console.log("show share")
this.$emit("showShare");
console.log("show share");
}
},
created() {
......@@ -135,14 +136,16 @@ export default {
.swipe {
width: 630px;
height: 320px;
height: 451px;
margin: auto;
border: 2px solid #82acae;
border-radius: 30px;
overflow: hidden;
img {
max-height: 300px;
max-width: 600px;
.img {
height: 451px;
width: 630px;
background-size: cover;
}
}
......@@ -188,7 +191,7 @@ export default {
.label {
min-width: 128px;
font-size: 20px;
font-size: 24px;
text-align: left;
}
.msg {
......@@ -218,7 +221,7 @@ export default {
width: 730px;
margin: auto;
justify-content: space-between;
margin-bottom: 200px;
margin-bottom: 100px;
.sys-btn-02 {
width: 300px;
......
<template>
<div class="home">
<div class="head-leap"></div>
<ViewModel
v-model="formData"
v-if="init && !formEdit"
v-on:edit="formEdit=true"
v-on:praiseSuccess="showPraiseSuccessModel"
v-on:showShare="shareModelVisiable=true"
></ViewModel>
<EditModel v-model="formData" v-if="init && formEdit" v-on:submit="showSuccessModel"></EditModel>
<div class="bottom-line"></div>
<bottom-tool v-model="activityIndex"></bottom-tool>
<biz-model v-model="model"></biz-model>
<!-- 分享蒙层 -->
<div class="shareModel" v-if="shareModelVisiable" @click="shareModelVisiable = false">
<div class="shareModelContainer">
<div class="shareModelMask"></div>
<div class="shareIcon"></div>
</div>
<div class="home">
<head-view></head-view>
<ViewModel
v-model="formData"
v-if="init && !formEdit"
v-on:edit="formEdit=true"
v-on:praiseSuccess="showPraiseSuccessModel"
v-on:showShare="shareModelVisiable=true"
></ViewModel>
<EditModel v-model="formData" v-if="init && formEdit" v-on:submit="showSuccessModel"></EditModel>
<div class="bottom-line"></div>
<bottom-tool v-model="activityIndex"></bottom-tool>
<biz-model v-model="model"></biz-model>
<!-- 分享蒙层 -->
<div class="shareModel" v-if="shareModelVisiable" @click="shareModelVisiable = false">
<div class="shareModelContainer">
<div class="shareModelMask"></div>
<div class="shareIcon"></div>
</div>
</div>
</div>
</template>
<script>
......@@ -35,6 +35,7 @@ import BottomTool from "@/components/bottom-tools/bottom-tools";
import BizModel from "@/components/biz-model/biz-model";
import EditModel from "./components/EditModel";
import ViewModel from "./components/ViewModel";
import headView from "@/components/plugins/head";
import { httpGet, httpPost } from "@/api/fetch-api";
import AreaList from "@/api/area";
......@@ -146,7 +147,8 @@ export default {
BottomTool,
EditModel,
ViewModel,
BizModel
BizModel,
headView
},
created() {
this.initActivity();
......@@ -160,19 +162,24 @@ export default {
text-align: center;
}
.head-container {
position: relative;
height: 0px;
}
.head-leap {
width: 750px;
height: 231px;
background: url(../../assets/imgs/head-leap.png);
background-size: 100%;
position: fixed;
position: relative;
left: 0;
top: 0;
z-index: 999;
}
.bottom-line {
height: 250px;
height: 150px;
background-color: transparent;
}
......
......@@ -38,7 +38,8 @@ module.exports = {
// 它支持webPack-dev-server的所有选项
devServer: {
host: "192.168.0.101",
// host: "192.168.0.101",
host: "localhost",
port: 9001, // 端口号
https: false, // https:{type:Boolean}
open: true, //配置自动启动浏览器
......