Skip to content
This repository was archived by the owner on Mar 23, 2018. It is now read-only.

Commit 4714f3e

Browse files
xwwLmmxwwLmm
committed
fix v-lazy home
1 parent ecdc333 commit 4714f3e

File tree

8 files changed

+461
-58
lines changed

8 files changed

+461
-58
lines changed

‎.pug-lintrc.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,6 @@ module.exports = {
5555
validateDivTags: true,
5656
validateExtensions: true,
5757
validateIndentation: 2,
58-
validateLineBreaks: 'LF',
58+
// validateLineBreaks: 'LF',
5959
validateSelfClosingTags: true
6060
}

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
"compile:test-mock": "cross-env NODE_ENV=test DEBUG=hi* node build/bin/compile --mock",
2626
"compile:test-pages": "cross-env NODE_ENV=test DEBUG=hi* node build/bin/compile --pages",
2727
"debug": "npm run dev -- --debug",
28-
"dev": "cross-env DEBUG=hi* PORT=3000 nodemon build/bin/start --mock",
28+
"dev": "cross-env DEBUG=hi* PORT=3001 nodemon build/bin/start --mock",
2929
"eslint": "eslint --max-warnings 10 --ext .js,.vue .",
3030
"lint": "npm run eslint && npm run stylelint && npm run puglint",
3131
"lint:fix": "npm run eslint -- --fix && npm run stylelint && npm run puglint",

‎src/views/Home/EditPanel/index.vue

+168
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
<template lang="pug">
2+
modal-item(:class="$style.container", transition="bottom")
3+
template(v-if="!editingImg")
4+
.bottom
5+
ul.list-unstyled
6+
li(@click="toggleImage(1)")
7+
span.iconfont.icon-img2
8+
| 换轮播图1
9+
li(@click="toggleImage(2)")
10+
span.iconfont.icon-img1
11+
| 换轮播图2
12+
li(@click="changeColor")
13+
span.iconfont(:class="[editingColor ? 'icon-black' : 'icon-white']")
14+
| 文字颜色
15+
li(@click="changeMask")
16+
span.iconfont.icon-unchecked
17+
| 蒙层
18+
.border-t(:class="$style.action")
19+
div(@click="closeModal") 取消
20+
div.theme-color.border-l(@click="confirmModal") 保存
21+
22+
template(v-else)
23+
ul.list-unstyled
24+
li(@click="selectDefaultImg")
25+
div(:class="[$style.defaultImg, editingImgIndex - 1 ? $style.pic2 : $style.pic1]")
26+
| 默认图{{editingImgIndex}}
27+
li(@click="selectImg")
28+
span.iconfont.icon-img-reverse
29+
| 选择图片
30+
input.hidden(type="file", @change="previewFile", accept="image/*", ref="img")
31+
32+
div(:class="$style.footer")
33+
span.iconfont.icon-error(@click="revertImg")
34+
span 换轮播图{{ editingImgIndex }}
35+
span.iconfont.icon-correct.theme-color(@click="confirmImg")
36+
</template>
37+
<script>
38+
import ModalItem from 'components/HiModal/ModalItem'
39+
40+
import {resizeImgFile} from 'utils'
41+
42+
export default {
43+
props: {
44+
editingColor: Boolean,
45+
editingMask: Boolean,
46+
editingInitImg: String,
47+
confirm: Function,
48+
close: Function
49+
},
50+
data() {
51+
return {
52+
editingImg: false,
53+
editingImgIndex: 1,
54+
result: ''
55+
}
56+
},
57+
methods: {
58+
toggleImage(index) {
59+
this.editingImg = true
60+
this.editingImgIndex = index
61+
},
62+
previewFile(e) {
63+
resizeImgFile(e.target.files[0],
64+
result => this.$emit('toggleImg', this.editingImgIndex, (this.result = result)))
65+
},
66+
selectImg() {
67+
this.$refs.img.click()
68+
},
69+
changeColor() {
70+
this.$emit('toggleColor')
71+
},
72+
changeMask() {
73+
this.$emit('toggleMask')
74+
},
75+
selectDefaultImg() {
76+
this.result = ''
77+
this.$emit('reInitImg', this.editingImgIndex)
78+
},
79+
revertImg() {
80+
this.editingImg = false
81+
this.result = ''
82+
this.$emit('reInitImg', this.editingImgIndex)
83+
},
84+
confirmImg() {
85+
this.$emit('toggleImg', this.editingImgIndex, this.result)
86+
this.editingImg = false
87+
this.result = ''
88+
},
89+
closeModal() {
90+
this.close()
91+
},
92+
confirmModal() {
93+
this.confirm()
94+
}
95+
},
96+
components: {
97+
ModalItem
98+
}
99+
}
100+
</script>
101+
<style lang="stylus" module>
102+
.container
103+
:global
104+
.modal-dialog .modal-content
105+
fixed(bottom, left)
106+
width 100%
107+
border none
108+
border-radius 0
109+
box-shadow 0
110+
111+
.modal-body
112+
padding 0
113+
114+
ul
115+
display flex
116+
margin-bottom 0
117+
padding 20px
118+
color grey
119+
120+
li
121+
flex 1
122+
text-align center
123+
124+
span
125+
display block
126+
font-size 30px
127+
128+
:global(.iconfont)
129+
display block
130+
font-size 30px
131+
transform scale(1)
132+
133+
.action
134+
display flex
135+
136+
> div
137+
flex 1
138+
text-align center
139+
padding 10px
140+
141+
.footer
142+
display flex
143+
border-top 1px solid $list-line-color
144+
145+
> span
146+
display table-cell
147+
padding 10px 30px
148+
149+
&:nth-child(2)
150+
width 10000px
151+
text-align center
152+
153+
> :global(.iconfont)
154+
font-size 16px
155+
156+
.default-img
157+
width 30px
158+
height 30px
159+
margin 5px auto 7px auto
160+
border 2px solid
161+
border-radius 50%
162+
163+
.pic1
164+
retina('../home-01', 'jpg')
165+
166+
.pic2
167+
retina('../home-02', 'jpg')
168+
</style>

‎src/views/Home/index.js

+134-5
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,142 @@
1+
import {mapGetters} from 'vuex'
2+
3+
import EditPanel from './EditPanel'
4+
15
import classes from './index.styl'
26

3-
import {ensure, removeClass} from 'utils'
7+
import {ensure, removeClass, cutByteStr} from 'utils'
8+
9+
const DEFAULT_SLOGAN_TITLE = '遇见瑜伽'
10+
11+
const DEFAULT_SLOGAN_CONTENT = '当心得到控制，平静下来时，剩下的便是灵魂'
412

513
export default require('./index.pug')({
614
name: 'home',
7-
data: () => ({classes}),
15+
data: () => ({
16+
classes,
17+
editing: false,
18+
show: true,
19+
sloganTitle: DEFAULT_SLOGAN_TITLE,
20+
sloganContent: DEFAULT_SLOGAN_CONTENT,
21+
color: true,
22+
mask: true,
23+
img1: '',
24+
img2: '',
25+
editingSloganTitle: DEFAULT_SLOGAN_TITLE,
26+
editingSloganContent: DEFAULT_SLOGAN_CONTENT,
27+
editingColor: true,
28+
editingMask: true,
29+
editingImg1: '',
30+
editingImg2: ''
31+
}),
32+
computed: {
33+
...mapGetters(['isStaffS', 'currRole', 'isConsumer', 'merchantUrlPrefix']),
34+
resultImg1() {
35+
return (this.editing && this.editingImg1) || this.img1
36+
},
37+
resultImg2() {
38+
return (this.editing && this.editingImg2) || this.img2
39+
}
40+
},
41+
watch: {
42+
editingSloganTitle(val) {
43+
this.changeSloganTitle(val)
44+
},
45+
editingSloganContent(val) {
46+
this.changeSloganContent(val)
47+
}
48+
},
49+
async created() {
50+
const {sloganTitle, sloganContent, mask, color, backImgs} =
51+
(await this.$http.post(`/member-index/queryMemberIndex`)).data
52+
this.sloganTitle = this.editingSloganTitle = sloganTitle
53+
this.sloganContent = this.editingSloganContent = sloganContent
54+
this.mask = this.editingMask = mask
55+
this.color = this.editingColor = color
56+
this.img1 = this.editingImg1 = backImgs[0]
57+
this.img2 = this.editingImg2 = backImgs[1]
58+
},
859
mounted() {
9-
ensure(Object.values(this.$refs), 'animationend', (e, el) => {
10-
removeClass(e ? e.target : el, 'animated')
11-
}, 1600)
60+
this.animate()
61+
},
62+
updated() {
63+
this.animate()
64+
},
65+
methods: {
66+
animate() {
67+
const circles = [this.$refs.circle0, this.$refs.circle1]
68+
ensure(circles, 'animationend', (e, el) => {
69+
removeClass(e ? e.target : el, 'animated')
70+
}, 1600)
71+
},
72+
goto(index) {
73+
if (this.editing) return
74+
if (!index) {
75+
return this.$router.push('/subscribe-index')
76+
}
77+
78+
if (this.isConsumer) {
79+
return this.$router.push('/member-index')
80+
}
81+
location.href = this.merchantUrlPrefix + `${this.currRole}/index`
82+
},
83+
editPanel() {
84+
this.editing = true
85+
},
86+
togglePanel(show) {
87+
this.show = show
88+
},
89+
changeSloganTitle(val) {
90+
if (this.$refs.sloganTitle) {
91+
this.$refs.sloganTitle.value = this.editingSloganTitle = cutByteStr(val, 12)
92+
this.$refs.sloganTitle.focus()
93+
}
94+
},
95+
changeSloganContent(val) {
96+
if (this.$refs.sloganContent) {
97+
this.$refs.sloganContent.value = this.editingSloganContent = cutByteStr(val, 80)
98+
this.$refs.sloganContent.focus()
99+
}
100+
},
101+
toggleImg(index, data) {
102+
index - 1 ? (this.editingImg2 = data) : (this.editingImg1 = data)
103+
},
104+
reInitImg(index) {
105+
if (index - 1) {
106+
this.editingImg2 = this.img2
107+
} else {
108+
this.editingImg1 = this.img1
109+
}
110+
this.$forceUpdate()
111+
},
112+
toggleColor() {
113+
this.editingColor = !this.editingColor
114+
},
115+
toggleMask() {
116+
this.editingMask = !this.editingMask
117+
},
118+
close() {
119+
this.editing = false
120+
},
121+
async confirm() {
122+
const data = {
123+
sloganTitle: this.editingSloganTitle || this.sloganTitle,
124+
sloganContent: this.editingSloganContent || this.sloganContent,
125+
backImgs: [this.editingImg1, this.editingImg2],
126+
mask: this.editingMask,
127+
color: this.editingColor
128+
}
129+
await this.$http.post('/member-index/save-index-info', data)
130+
this.editing = false
131+
this.sloganTitle = data.sloganTitle
132+
this.sloganContent = data.sloganContent
133+
this.img1 = data.backImgs[0]
134+
this.img2 = data.backImgs[1]
135+
this.mask = data.mask
136+
this.color = data.color
137+
}
138+
},
139+
components: {
140+
EditPanel
12141
}
13142
})

‎src/views/Home/index.pug

+45-8
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,53 @@
11
div(:class="classes.content")
2-
each val in [1,2]
3-
div(:class="[classes.pic, classes.pic" + val + "]")
2+
div(:class="classes.edit", v-if="isStaffS && !editing", @click="editPanel") 编辑本页
3+
div(:class="classes.tips", v-if="isStaffS && editing")
4+
span 背景图格式为.jpg/.jpeg/.png
5+
template
6+
div(:class="[classes.pic, classes.ani1]", v-lazy:background-image="$util.imgPath((editing && editingImg1) ? editingImg1 : img1)", v-if="resultImg1")
7+
div(:class="[classes.pic, classes.ani1, classes.pic1]", v-else)
8+
div(:class="[classes.pic, classes.ani2]", v-lazy:background-image="$util.imgPath((editing && editingImg2) ? editingImg2 : img2)", v-if="resultImg2")
9+
div(:class="[classes.pic, classes.ani2, classes.pic2]", v-else)
410
div(:class="classes.slogan")
5-
div(:class="classes.sloganHeader")
6-
input(title="请输入标题", value="遇见瑜伽", readonly)
11+
div(:class="[classes.sloganHeader, editing ? classes['editing'] : '']")
12+
input(:class="classes['slogan-title']", :style="{color: (editing ? editingColor : color) ? 'white' : 'black'}", :value="sloganTitle", readonly, v-if="!editing")
13+
input(:class="classes['slogan-title']", :style="{color: (editing ? editingColor : color) ? 'white' : 'black'}",
14+
title="请输入标题",
15+
maxlength="12",
16+
v-model="editingSloganTitle",
17+
ref="sloganTitle",
18+
@focus="togglePanel(false)",
19+
@blur="togglePanel(true)", v-else)
720
div(:class="classes.line")
8-
.center-block(:class="classes['slogan-body']")
9-
textarea(title="请输入内容", readonly) 当心得到控制，平静下来时，剩下的便是灵魂
21+
.center-block(:class="[classes['slogan-body'], editing ? classes['editing'] : '']")
22+
textarea(:class="classes['slogan-text']", :style="{color: (editing ? editingColor : color) ? 'white' : 'black'}", readonly, v-if="!editing", :value="sloganContent")
23+
textarea(:class="[classes['slogan-text'], classes['slogan-title']]", :style="{color: (editing ? editingColor : color) ? 'white' : 'black'}",
24+
title="请输入内容",
25+
v-model="editingSloganContent",
26+
ref="sloganContent",
27+
@focus="togglePanel(false)",
28+
@blur="togglePanel(true)",
29+
maxlength="80",
30+
rows="3",
31+
:placeholder="`描述一下贵馆的瑜伽理念等，最多40个汉字`",
32+
v-else)
33+
34+
div(:class="classes.mask", v-if="editing ? editingMask : mask")
35+
1036
div(:class="classes.memberMenu")
11-
each val, index in [{pull:'left',link:'/subscribe-index',icon:'icon-book',menu:'预订课程'}, {pull:'right',link:'/member-index',icon:'icon-person',menu:'个人中心'}]
37+
each val, index in [{pull:'left', icon:'icon-book',menu:'预订课程'}, {pull:'right', icon:'icon-person',menu:'个人中心'}]
1238
div(:class="classes.outsideCircle", class="pull-" + val.pull + " animated", ref="circle" + index)
13-
router-link(:class="classes.insideCircle", to=val.link, tag="div")
39+
div(:class="classes.insideCircle", @click="goto("+ index + ")")
1440
span(:class="classes.menuIcon", class="iconfont " + val.icon)
1541
span(:class="classes.menuText") #{val.menu}
1642
div(:class="classes.insideCircleReplace")
43+
44+
edit-panel(v-if="isStaffS && editing && show",
45+
:close="close",
46+
:confirm="confirm",
47+
:editingColor="editingColor",
48+
:editingMask="editingMask",
49+
@togglePanel="togglePanel",
50+
@toggleImg="toggleImg",
51+
@reInitImg="reInitImg",
52+
@toggleColor="toggleColor",
53+
@toggleMask="toggleMask")

0 commit comments

Comments
 (0)