12
Showing
15 changed files
with
312 additions
and
46 deletions
| ... | @@ -5,10 +5,69 @@ | ... | @@ -5,10 +5,69 @@ |
| 5 | <router-link to="/about">About</router-link> | 5 | <router-link to="/about">About</router-link> |
| 6 | </div>--> | 6 | </div>--> |
| 7 | <router-view /> | 7 | <router-view /> |
| 8 | |||
| 9 | <biz-model v-model="shareModel"></biz-model> | ||
| 8 | </div> | 10 | </div> |
| 9 | </template> | 11 | </template> |
| 10 | 12 | ||
| 11 | 13 | ||
| 14 | <script> | ||
| 15 | let urls = { | ||
| 16 | share: "/jiajiaCHApi/app/works/share" | ||
| 17 | }; | ||
| 18 | |||
| 19 | import BizModel from "@/components/biz-model/biz-model"; | ||
| 20 | import { httpPost } from "@/api/fetch-api"; | ||
| 21 | |||
| 22 | export default { | ||
| 23 | data() { | ||
| 24 | return { | ||
| 25 | shareModel: { | ||
| 26 | show: false, | ||
| 27 | title: "", | ||
| 28 | content: "", | ||
| 29 | index: "default", | ||
| 30 | btnShow: false, | ||
| 31 | btnText: "", | ||
| 32 | confirmHandler: null, | ||
| 33 | labelBtnShow: false, | ||
| 34 | labelBtnText: "", | ||
| 35 | labelBtnHandler: null | ||
| 36 | } | ||
| 37 | }; | ||
| 38 | }, | ||
| 39 | methods: { | ||
| 40 | init() { | ||
| 41 | // alert("init"); | ||
| 42 | // as.appSuccess = this.shareSuccessHandler; | ||
| 43 | // as.success = this.shareSuccessHandler; | ||
| 44 | }, | ||
| 45 | shareSuccessHandler() { | ||
| 46 | httpPost({ url: urls.share, data: { worksCode: "" } }).then(res => { | ||
| 47 | if (res == 1) { | ||
| 48 | let that = this; | ||
| 49 | this.shareModel.show = true; | ||
| 50 | this.shareModel.title = "分享成功"; | ||
| 51 | this.shareModel.content = "您已获得一次抽奖机会"; | ||
| 52 | this.shareModel.btnShow = true; | ||
| 53 | this.shareModel.btnText = "前往抽奖"; | ||
| 54 | this.shareModel.confirmHandler = function() { | ||
| 55 | that.$router.push("/draw"); | ||
| 56 | }; | ||
| 57 | this.shareModel.labelBtnShow = false; | ||
| 58 | } | ||
| 59 | }); | ||
| 60 | } | ||
| 61 | }, | ||
| 62 | created() { | ||
| 63 | this.init(); | ||
| 64 | }, | ||
| 65 | components: { | ||
| 66 | BizModel | ||
| 67 | } | ||
| 68 | }; | ||
| 69 | </script> | ||
| 70 | |||
| 12 | <style lang="scss"> | 71 | <style lang="scss"> |
| 13 | @import "./styles/support.scss"; | 72 | @import "./styles/support.scss"; |
| 14 | 73 | ||
| ... | @@ -136,7 +195,6 @@ body { | ... | @@ -136,7 +195,6 @@ body { |
| 136 | } | 195 | } |
| 137 | } | 196 | } |
| 138 | 197 | ||
| 139 | |||
| 140 | .home { | 198 | .home { |
| 141 | position: relative; | 199 | position: relative; |
| 142 | text-align: center; | 200 | text-align: center; | ... | ... |
| ... | @@ -20,7 +20,8 @@ let wxOauthUrl = global_wx_oauth_url; | ... | @@ -20,7 +20,8 @@ let wxOauthUrl = global_wx_oauth_url; |
| 20 | 20 | ||
| 21 | 21 | ||
| 22 | let whileList = [ | 22 | let whileList = [ |
| 23 | "https://api.k.wxpai.cn/bizproxy/kdapi/file/upload" | 23 | "https://api.k.wxpai.cn/bizproxy/kdapi/file/upload", |
| 24 | "https://api.k.wxpai.cn/bizproxy/kdapi/file/uploadBase64" | ||
| 24 | ] | 25 | ] |
| 25 | // let base = COM.baseUrl; | 26 | // let base = COM.baseUrl; |
| 26 | 27 | ||
| ... | @@ -133,9 +134,12 @@ export const store = { | ... | @@ -133,9 +134,12 @@ export const store = { |
| 133 | localStorage.removeItem("_jiajia_childrenhost_sesson"); | 134 | localStorage.removeItem("_jiajia_childrenhost_sesson"); |
| 134 | }, | 135 | }, |
| 135 | saveRedirectUrl() { | 136 | saveRedirectUrl() { |
| 136 | let current = Router.history.current || {}; | 137 | if (!Router.history.current || !Router.history.current.path) { |
| 138 | return; | ||
| 139 | } | ||
| 140 | let current = Router.history.current; | ||
| 137 | let data = { | 141 | let data = { |
| 138 | route: current.path, | 142 | route: current.path == "/" ? "/index" : current.path, |
| 139 | params: current.query | 143 | params: current.query |
| 140 | } | 144 | } |
| 141 | localStorage.setItem("_jiajia_childrenhost_redirect", JSON.stringify(data)); | 145 | localStorage.setItem("_jiajia_childrenhost_redirect", JSON.stringify(data)); |
| ... | @@ -152,6 +156,9 @@ export const store = { | ... | @@ -152,6 +156,9 @@ export const store = { |
| 152 | if (dataStr) { | 156 | if (dataStr) { |
| 153 | let data = JSON.parse(dataStr); | 157 | let data = JSON.parse(dataStr); |
| 154 | let path = data.route; | 158 | let path = data.route; |
| 159 | if (!path) { | ||
| 160 | return "/index"; | ||
| 161 | } | ||
| 155 | let sep = "?"; | 162 | let sep = "?"; |
| 156 | if (data.params) { | 163 | if (data.params) { |
| 157 | for (let key in data.params) { | 164 | for (let key in data.params) { |
| ... | @@ -161,7 +168,7 @@ export const store = { | ... | @@ -161,7 +168,7 @@ export const store = { |
| 161 | } | 168 | } |
| 162 | return path; | 169 | return path; |
| 163 | } | 170 | } |
| 164 | return null; | 171 | return "/index"; |
| 165 | }, | 172 | }, |
| 166 | delRedirectUrl() { | 173 | delRedirectUrl() { |
| 167 | localStorage.removeItem("_jiajia_childrenhost_redirect"); | 174 | localStorage.removeItem("_jiajia_childrenhost_redirect"); | ... | ... |
This diff is collapsed.
Click to expand it.
| ... | @@ -15,12 +15,17 @@ | ... | @@ -15,12 +15,17 @@ |
| 15 | class="prize-thumb" | 15 | class="prize-thumb" |
| 16 | v-bind:style="{backgroundImage:'url(' + data.drawResult.thumb + ')'}" | 16 | v-bind:style="{backgroundImage:'url(' + data.drawResult.thumb + ')'}" |
| 17 | ></div> | 17 | ></div> |
| 18 | |||
| 18 | <div class="prize-name">{{data.drawResult.prizeName}}</div> | 19 | <div class="prize-name">{{data.drawResult.prizeName}}</div> |
| 20 | <div | ||
| 21 | v-if="data.drawResult.prizeType == 'coupon'" | ||
| 22 | class="prize-sn" | ||
| 23 | >{{data.drawResult.prizeSn}}</div> | ||
| 19 | <div class="tip-container"> | 24 | <div class="tip-container"> |
| 20 | <span class="use-tip">奖品说明</span> | 25 | <span class="use-tip">奖品说明</span> |
| 21 | </div> | 26 | </div> |
| 22 | <div class="tip-container" v-if="data.drawResult.prizeType == 'integral'"> | 27 | <div class="tip-container" v-if="data.drawResult.prizeType == 'integral'"> |
| 23 | <span class="tip">积分可以在立乐家商城兑换礼品</span> | 28 | <span class="tip">积分可以在立乐家积分商场兑换礼品</span> |
| 24 | </div> | 29 | </div> |
| 25 | <div class="tip-container" v-if="data.drawResult.prizeType == 'coupon'"> | 30 | <div class="tip-container" v-if="data.drawResult.prizeType == 'coupon'"> |
| 26 | <span class="tip">优惠券可以在立乐家商城购物当现金使用</span> | 31 | <span class="tip">优惠券可以在立乐家商城购物当现金使用</span> |
| ... | @@ -113,7 +118,8 @@ export default { | ... | @@ -113,7 +118,8 @@ export default { |
| 113 | return { | 118 | return { |
| 114 | loading: false, | 119 | loading: false, |
| 115 | data: this.value, | 120 | data: this.value, |
| 116 | submitForm: !this.value || !this.value.drawResult | 121 | submitForm: |
| 122 | !this.value || !this.value.drawResult | ||
| 117 | ? { | 123 | ? { |
| 118 | drawCode: "", | 124 | drawCode: "", |
| 119 | contactName: "", | 125 | contactName: "", |
| ... | @@ -355,4 +361,10 @@ input::-webkit-input-placeholder { | ... | @@ -355,4 +361,10 @@ input::-webkit-input-placeholder { |
| 355 | color: #4f9984; | 361 | color: #4f9984; |
| 356 | font-size: 26px; | 362 | font-size: 26px; |
| 357 | } | 363 | } |
| 364 | |||
| 365 | .prize-sn { | ||
| 366 | text-align: center; | ||
| 367 | font-size: 30px; | ||
| 368 | font-weight: 600; | ||
| 369 | } | ||
| 358 | </style> | 370 | </style> | ... | ... |
| ... | @@ -79,7 +79,7 @@ export default { | ... | @@ -79,7 +79,7 @@ export default { |
| 79 | toWorksViewHandler(code) { | 79 | toWorksViewHandler(code) { |
| 80 | let link = location.origin + location.pathname; | 80 | let link = location.origin + location.pathname; |
| 81 | link += "?worksCode=" + code; | 81 | link += "?worksCode=" + code; |
| 82 | as.setShare(link, null, null, null); | 82 | as.setShare(link, "", "", ""); |
| 83 | this.$emit("worksDetail", { worksCode: code }); | 83 | this.$emit("worksDetail", { worksCode: code }); |
| 84 | }, | 84 | }, |
| 85 | searchWorksHandler(action) { | 85 | searchWorksHandler(action) { |
| ... | @@ -109,6 +109,7 @@ export default { | ... | @@ -109,6 +109,7 @@ export default { |
| 109 | tempList = []; | 109 | tempList = []; |
| 110 | list.push(tempList); | 110 | list.push(tempList); |
| 111 | } | 111 | } |
| 112 | this._changeImageList(res.list[index]); | ||
| 112 | tempList.push(res.list[index]); | 113 | tempList.push(res.list[index]); |
| 113 | } | 114 | } |
| 114 | // console.log(list); | 115 | // console.log(list); |
| ... | @@ -124,8 +125,28 @@ export default { | ... | @@ -124,8 +125,28 @@ export default { |
| 124 | Toast.clear(true); | 125 | Toast.clear(true); |
| 125 | }); | 126 | }); |
| 126 | }, | 127 | }, |
| 128 | _changeImageList(works) { | ||
| 129 | let worksList = works.worksList; | ||
| 130 | if (!worksList || worksList.length == 0) { | ||
| 131 | return; | ||
| 132 | } | ||
| 133 | if (worksList[0].worksType == "pic") { | ||
| 134 | return; | ||
| 135 | } | ||
| 136 | let changeIndex = -1; | ||
| 137 | for (let index = 0; index < worksList.length; index++) { | ||
| 138 | if (worksList[index].worksType == "pic") { | ||
| 139 | changeIndex = index; | ||
| 140 | break; | ||
| 141 | } | ||
| 142 | } | ||
| 143 | if (changeIndex > -1) { | ||
| 144 | let worksTmp = worksList.splice(changeIndex, 1); | ||
| 145 | worksList.unshift(worksTmp[0]); | ||
| 146 | works.worksList = worksList; | ||
| 147 | } | ||
| 148 | }, | ||
| 127 | refreshMore() { | 149 | refreshMore() { |
| 128 | // console.log("refresh more"); | ||
| 129 | this.listForm.page++; | 150 | this.listForm.page++; |
| 130 | this.searchWorksHandler(); | 151 | this.searchWorksHandler(); |
| 131 | } | 152 | } | ... | ... |
| ... | @@ -8,9 +8,16 @@ | ... | @@ -8,9 +8,16 @@ |
| 8 | <div class="head-line"></div> | 8 | <div class="head-line"></div> |
| 9 | <div class="swipe"> | 9 | <div class="swipe"> |
| 10 | <van-swipe :autoplay="5000"> | 10 | <van-swipe :autoplay="5000"> |
| 11 | <van-swipe-item v-for="(works, index) in formData.worksList" :key="index"> | 11 | <van-swipe-item v-for="(item, index) in formData.worksList" :key="index"> |
| 12 | <!-- <img :src="works.worksUrl" /> --> | 12 | <!-- <img :src="works.worksUrl" /> --> |
| 13 | <div class="img" v-bind:style="{backgroundImage:'url(' + works.worksUrl + ')'}"></div> | 13 | <div |
| 14 | v-if="item.worksType=='pic'" | ||
| 15 | class="img" | ||
| 16 | v-bind:style="{backgroundImage:'url(' + item.worksUrl + ')'}" | ||
| 17 | ></div> | ||
| 18 | <video v-if="item.worksType=='video'" controls> | ||
| 19 | <source :src="item.worksUrl" type="video/mp4" /> | ||
| 20 | </video> | ||
| 14 | </van-swipe-item> | 21 | </van-swipe-item> |
| 15 | </van-swipe> | 22 | </van-swipe> |
| 16 | </div> | 23 | </div> |
| ... | @@ -43,7 +50,6 @@ | ... | @@ -43,7 +50,6 @@ |
| 43 | <div class="msg">{{formData.slogan}}</div> | 50 | <div class="msg">{{formData.slogan}}</div> |
| 44 | </div> | 51 | </div> |
| 45 | 52 | ||
| 46 | |||
| 47 | <div class="text-container space top"> | 53 | <div class="text-container space top"> |
| 48 | <div class="label">个人简介:</div> | 54 | <div class="label">个人简介:</div> |
| 49 | <div class="msg">{{formData.profile}}</div> | 55 | <div class="msg">{{formData.profile}}</div> |
| ... | @@ -165,6 +171,11 @@ export default { | ... | @@ -165,6 +171,11 @@ export default { |
| 165 | width: 630px; | 171 | width: 630px; |
| 166 | background-size: cover; | 172 | background-size: cover; |
| 167 | } | 173 | } |
| 174 | |||
| 175 | video { | ||
| 176 | height: 451px; | ||
| 177 | width: 630px; | ||
| 178 | } | ||
| 168 | } | 179 | } |
| 169 | 180 | ||
| 170 | .space { | 181 | .space { | ... | ... |
| ... | @@ -11,8 +11,15 @@ | ... | @@ -11,8 +11,15 @@ |
| 11 | <div class="self-content"> | 11 | <div class="self-content"> |
| 12 | <div class="swipe"> | 12 | <div class="swipe"> |
| 13 | <van-swipe :autoplay="5000"> | 13 | <van-swipe :autoplay="5000"> |
| 14 | <van-swipe-item v-for="(works, index) in formData.worksList" :key="index"> | 14 | <van-swipe-item v-for="(item, index) in formData.worksList" :key="index"> |
| 15 | <div class="img" v-bind:style="{backgroundImage:'url(' + works.worksUrl + ')'}"></div> | 15 | <div |
| 16 | v-if="item.worksType=='pic'" | ||
| 17 | class="img" | ||
| 18 | v-bind:style="{backgroundImage:'url(' + item.worksUrl + ')'}" | ||
| 19 | ></div> | ||
| 20 | <video v-if="item.worksType=='video'" controls> | ||
| 21 | <source :src="item.worksUrl" type="video/mp4" /> | ||
| 22 | </video> | ||
| 16 | </van-swipe-item> | 23 | </van-swipe-item> |
| 17 | </van-swipe> | 24 | </van-swipe> |
| 18 | </div> | 25 | </div> |
| ... | @@ -213,6 +220,11 @@ export default { | ... | @@ -213,6 +220,11 @@ export default { |
| 213 | width: 265px; | 220 | width: 265px; |
| 214 | background-size: cover; | 221 | background-size: cover; |
| 215 | } | 222 | } |
| 223 | |||
| 224 | video { | ||
| 225 | height: 190px; | ||
| 226 | width: 265px; | ||
| 227 | } | ||
| 216 | } | 228 | } |
| 217 | 229 | ||
| 218 | .space { | 230 | .space { | ... | ... |
| ... | @@ -116,21 +116,20 @@ export default { | ... | @@ -116,21 +116,20 @@ export default { |
| 116 | } | 116 | } |
| 117 | }, | 117 | }, |
| 118 | initActivity() { | 118 | initActivity() { |
| 119 | Toast.loading({ | ||
| 120 | mask: true, | ||
| 121 | message: "加载中..." | ||
| 122 | }); | ||
| 123 | httpGet({ url: urls.myWork }).then(res => { | ||
| 119 | this.init = true; | 124 | this.init = true; |
| 120 | // Toast.loading({ | 125 | this.formData = res.data || {}; |
| 121 | // mask: true, | 126 | if (!res.data) { |
| 122 | // message: "加载中..." | 127 | this.formEdit = true; |
| 123 | // }); | 128 | } else { |
| 124 | // httpGet({ url: urls.myWork }).then(res => { | 129 | this.formEdit = false; |
| 125 | // this.init = true; | 130 | } |
| 126 | // this.formData = res.data || {}; | 131 | Toast.clear(); |
| 127 | // if (!res.data) { | 132 | }); |
| 128 | // this.formEdit = true; | ||
| 129 | // } else { | ||
| 130 | // this.formEdit = false; | ||
| 131 | // } | ||
| 132 | // Toast.clear(); | ||
| 133 | // }); | ||
| 134 | }, | 133 | }, |
| 135 | showRuleHandler() { | 134 | showRuleHandler() { |
| 136 | this.model.show = true; | 135 | this.model.show = true; |
| ... | @@ -176,7 +175,7 @@ export default { | ... | @@ -176,7 +175,7 @@ export default { |
| 176 | }, | 175 | }, |
| 177 | created() { | 176 | created() { |
| 178 | this.initUrlQuery(); | 177 | this.initUrlQuery(); |
| 179 | // this.initActivity(); | 178 | this.initActivity(); |
| 180 | }, | 179 | }, |
| 181 | components: { | 180 | components: { |
| 182 | BottomTool, | 181 | BottomTool, | ... | ... |
| ... | @@ -63,7 +63,7 @@ | ... | @@ -63,7 +63,7 @@ |
| 63 | <div class="sys-btn-02" :class="{disabled : !autoRegister}" @click="submitFormHandler">确认提交</div> | 63 | <div class="sys-btn-02" :class="{disabled : !autoRegister}" @click="submitFormHandler">确认提交</div> |
| 64 | 64 | ||
| 65 | <div | 65 | <div |
| 66 | class="center base-margin auto-register-tips" | 66 | class="center base-margin-top auto-register-tips" |
| 67 | @click="acceptRegisterHandler" | 67 | @click="acceptRegisterHandler" |
| 68 | v-if="formData.worksCode == '' || formData.worksCode == null " | 68 | v-if="formData.worksCode == '' || formData.worksCode == null " |
| 69 | > | 69 | > |
| ... | @@ -71,6 +71,15 @@ | ... | @@ -71,6 +71,15 @@ |
| 71 | <div class="tips">自动注册为立白集团会员,立享会员权益,详见“更多福利”</div> | 71 | <div class="tips">自动注册为立白集团会员,立享会员权益,详见“更多福利”</div> |
| 72 | </div> | 72 | </div> |
| 73 | 73 | ||
| 74 | <div class="center base-margin auto-register-tips"> | ||
| 75 | <div class="icon-register" :class="{activity : privacy}"></div> | ||
| 76 | <div class="tips"> | ||
| 77 | 我已阅读并同意 | ||
| 78 | <u @click="showAgreementHandler">用户协议</u>和 | ||
| 79 | <u @click="showPrivacyHandler">隐私政策</u> | ||
| 80 | </div> | ||
| 81 | </div> | ||
| 82 | |||
| 74 | <van-popup position="bottom" :style="{ height: '40%' }" v-model="area.show"> | 83 | <van-popup position="bottom" :style="{ height: '40%' }" v-model="area.show"> |
| 75 | <van-area | 84 | <van-area |
| 76 | :area-list="areaList" | 85 | :area-list="areaList" |
| ... | @@ -108,6 +117,7 @@ export default { | ... | @@ -108,6 +117,7 @@ export default { |
| 108 | data() { | 117 | data() { |
| 109 | return { | 118 | return { |
| 110 | autoRegister: true, | 119 | autoRegister: true, |
| 120 | privacy: true, | ||
| 111 | successModelVisiable: true, | 121 | successModelVisiable: true, |
| 112 | area: { | 122 | area: { |
| 113 | show: false | 123 | show: false |
| ... | @@ -140,6 +150,12 @@ export default { | ... | @@ -140,6 +150,12 @@ export default { |
| 140 | if (!this.autoRegister) { | 150 | if (!this.autoRegister) { |
| 141 | } | 151 | } |
| 142 | }, | 152 | }, |
| 153 | showAgreementHandler() { | ||
| 154 | this.$emit("agreement"); | ||
| 155 | }, | ||
| 156 | showPrivacyHandler() { | ||
| 157 | this.$emit("privacy"); | ||
| 158 | }, | ||
| 143 | submitFormHandler() { | 159 | submitFormHandler() { |
| 144 | if (!this.autoRegister) { | 160 | if (!this.autoRegister) { |
| 145 | return; | 161 | return; |
| ... | @@ -197,9 +213,12 @@ export default { | ... | @@ -197,9 +213,12 @@ export default { |
| 197 | .then(res => { | 213 | .then(res => { |
| 198 | this.loading = false; | 214 | this.loading = false; |
| 199 | Toast.clear(); | 215 | Toast.clear(); |
| 216 | let data = { | ||
| 217 | isFirst : !this.formData.worksCode ? 1 : 0, | ||
| 218 | worksCode : res | ||
| 219 | }; | ||
| 200 | this.formData.worksCode = res; | 220 | this.formData.worksCode = res; |
| 201 | console.log("submit === =", res); | 221 | this.$emit("submit", data); |
| 202 | this.$emit("submit", res); | ||
| 203 | }) | 222 | }) |
| 204 | .catch(res => { | 223 | .catch(res => { |
| 205 | this.loading = false; | 224 | this.loading = false; |
| ... | @@ -360,8 +379,12 @@ export default { | ... | @@ -360,8 +379,12 @@ export default { |
| 360 | background-size: 100%; | 379 | background-size: 100%; |
| 361 | } | 380 | } |
| 362 | 381 | ||
| 363 | .base-margin { | 382 | .base-margin-top{ |
| 364 | margin-top: 40px; | 383 | margin-top: 40px; |
| 384 | } | ||
| 385 | |||
| 386 | .base-margin { | ||
| 387 | margin-top: 20px; | ||
| 365 | margin-bottom: 80px; | 388 | margin-bottom: 80px; |
| 366 | } | 389 | } |
| 367 | 390 | ... | ... |
src/pages/sign/components/ImageClipper.vue
0 → 100755
This diff is collapsed.
Click to expand it.
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | <div class="img-container" v-for="(item,index) in fileList" :key="index"> | 3 | <div class="img-container" v-for="(item,index) in fileList" :key="index"> |
| 4 | <img :src="item.worksUrl" /> | 4 | <img v-if="item.worksType=='pic'" :src="item.worksUrl" /> |
| 5 | <video v-if="item.worksType=='video'" controls> | ||
| 6 | <source :src="item.worksUrl" type="video/mp4" /> | ||
| 7 | </video> | ||
| 5 | <i class="van-icon van-icon-delete" @click="deleteImageHandler(index)"></i> | 8 | <i class="van-icon van-icon-delete" @click="deleteImageHandler(index)"></i> |
| 6 | </div> | 9 | </div> |
| 7 | <van-uploader | 10 | <van-uploader |
| 8 | ref="vanUploader" | 11 | ref="vanUploader" |
| 9 | class="uploader" | 12 | class="uploader" |
| 13 | accept="image/*, audio/mp4, video/mp4" | ||
| 14 | :before-read="beforeUpload" | ||
| 10 | :after-read="uploadSumit" | 15 | :after-read="uploadSumit" |
| 11 | v-if="!fileList || fileList.length < 3" | 16 | v-if="!fileList || fileList.length < 3" |
| 12 | >+</van-uploader> | 17 | >+</van-uploader> |
| 18 | |||
| 19 | <image-clipper | ||
| 20 | ref="clipper" | ||
| 21 | v-if="imageData.show" | ||
| 22 | :img="imageData.data" | ||
| 23 | :clipper-img-width="750" | ||
| 24 | :clipper-img-height="537" | ||
| 25 | @ok="imageClipperHandler" | ||
| 26 | @cancel="imageData.show=false" | ||
| 27 | ></image-clipper> | ||
| 13 | </div> | 28 | </div> |
| 14 | </template> | 29 | </template> |
| 15 | 30 | ||
| 16 | 31 | ||
| 17 | 32 | ||
| 18 | <script> | 33 | <script> |
| 19 | import { request } from "@/api/fetch-api.js"; | 34 | import { request, httpPost } from "@/api/fetch-api.js"; |
| 35 | import ImageClipper from "./ImageClipper"; | ||
| 20 | 36 | ||
| 21 | import Vue from "vue"; | 37 | import Vue from "vue"; |
| 22 | import { Uploader } from "vant"; | 38 | import { Uploader } from "vant"; |
| 39 | import { Toast } from "vant"; | ||
| 23 | Vue.use(Uploader); | 40 | Vue.use(Uploader); |
| 41 | Vue.use(Toast); | ||
| 24 | 42 | ||
| 25 | /** | 43 | /** |
| 26 | * 外层插件可通过监听:v-on:before-upload;v-on:after-upload两个事件监听上传结果 | 44 | * 外层插件可通过监听:v-on:before-upload;v-on:after-upload两个事件监听上传结果 |
| ... | @@ -32,27 +50,85 @@ export default { | ... | @@ -32,27 +50,85 @@ export default { |
| 32 | data() { | 50 | data() { |
| 33 | return { | 51 | return { |
| 34 | fileList: this.value, | 52 | fileList: this.value, |
| 35 | uploadUrl: "https://api.k.wxpai.cn/bizproxy/kdapi/file/upload", | 53 | uploadFile: "https://api.k.wxpai.cn/bizproxy/kdapi/file/upload", |
| 54 | uploadUrl: "https://api.k.wxpai.cn/bizproxy/kdapi/file/uploadBase64", | ||
| 55 | imageData: { | ||
| 56 | show: false, | ||
| 57 | data: "" | ||
| 58 | } | ||
| 36 | }; | 59 | }; |
| 37 | }, | 60 | }, |
| 38 | methods: { | 61 | methods: { |
| 62 | beforeUpload(params) { | ||
| 63 | // console.log(params); | ||
| 64 | // let worksType = params.type.indexOf("image") >= 0 ? "pic" : "video"; | ||
| 65 | // if ( | ||
| 66 | // worksType == "video" && | ||
| 67 | // (!this.fileList || this.fileList.length == 0) | ||
| 68 | // ) { | ||
| 69 | // Toast("第一个作品必须上传图片!"); | ||
| 70 | // return false; | ||
| 71 | // } | ||
| 72 | return true; | ||
| 73 | }, | ||
| 39 | uploadSumit(params) { | 74 | uploadSumit(params) { |
| 40 | console.log(params); | 75 | console.log(params); |
| 76 | let worksType = params.file.type.indexOf("image") >= 0 ? "pic" : "video"; | ||
| 77 | if (worksType == "pic") { | ||
| 78 | this.imageData.data = params.content; | ||
| 79 | this.imageData.show = true; | ||
| 80 | } else { | ||
| 81 | Toast.loading({ | ||
| 82 | mask: true, | ||
| 83 | forbidClick: true, | ||
| 84 | message: "视频提交中..." | ||
| 85 | }); | ||
| 41 | let data = { | 86 | let data = { |
| 42 | path: "/pro/jiajiaChildrenHost/works", | 87 | path: "/pro/jiajiaChildrenHost/works", |
| 43 | file: params.file | 88 | file: params.file |
| 44 | }; | 89 | }; |
| 45 | request | 90 | request |
| 46 | .form(this.uploadUrl, data) | 91 | .form(this.uploadFile, data) |
| 47 | .then(result => { | 92 | .then(result => { |
| 93 | Toast.clear(); | ||
| 48 | let uploadResult = { | 94 | let uploadResult = { |
| 49 | worksUrl: result.data.content, | 95 | worksUrl: result.data.content, |
| 50 | worksType: params.file.type.indexOf("image") >= 0 ? "pic" : "video" | 96 | worksType: "video" |
| 97 | }; | ||
| 98 | if (!this.fileList) { | ||
| 99 | this.fileList = []; | ||
| 100 | } | ||
| 101 | this.fileList.push(uploadResult); | ||
| 102 | this.$emit("input", this.fileList); | ||
| 103 | }) | ||
| 104 | .catch(res => {}); | ||
| 105 | } | ||
| 106 | }, | ||
| 107 | imageClipperHandler(base64) { | ||
| 108 | let data = { | ||
| 109 | path: "/pro/jiajiaChildrenHost/works", | ||
| 110 | data: base64 | ||
| 111 | }; | ||
| 112 | |||
| 113 | Toast.loading({ | ||
| 114 | mask: true, | ||
| 115 | forbidClick: true, | ||
| 116 | message: "图片提交中..." | ||
| 117 | }); | ||
| 118 | httpPost({ url: this.uploadUrl, data: data }) | ||
| 119 | .then(result => { | ||
| 120 | Toast.clear(); | ||
| 121 | console.log(result); | ||
| 122 | let uploadResult = { | ||
| 123 | worksUrl: result, | ||
| 124 | worksType: "pic" | ||
| 51 | }; | 125 | }; |
| 52 | if (!this.fileList) { | 126 | if (!this.fileList) { |
| 53 | this.fileList = []; | 127 | this.fileList = []; |
| 54 | } | 128 | } |
| 55 | this.fileList.push(uploadResult); | 129 | this.fileList.push(uploadResult); |
| 130 | console.log("submit image : ", this.fileList); | ||
| 131 | this.imageData.show = false; | ||
| 56 | this.$emit("input", this.fileList); | 132 | this.$emit("input", this.fileList); |
| 57 | }) | 133 | }) |
| 58 | .catch(res => {}); | 134 | .catch(res => {}); |
| ... | @@ -65,6 +141,9 @@ export default { | ... | @@ -65,6 +141,9 @@ export default { |
| 65 | currentValue: function() { | 141 | currentValue: function() { |
| 66 | return this.value; | 142 | return this.value; |
| 67 | } | 143 | } |
| 144 | }, | ||
| 145 | components: { | ||
| 146 | ImageClipper | ||
| 68 | } | 147 | } |
| 69 | }; | 148 | }; |
| 70 | </script> | 149 | </script> |
| ... | @@ -99,6 +178,9 @@ export default { | ... | @@ -99,6 +178,9 @@ export default { |
| 99 | img { | 178 | img { |
| 100 | width: 100%; | 179 | width: 100%; |
| 101 | } | 180 | } |
| 181 | video { | ||
| 182 | width: 100%; | ||
| 183 | } | ||
| 102 | 184 | ||
| 103 | .van-icon { | 185 | .van-icon { |
| 104 | background-color: rgba($color: #000000, $alpha: 0.3); | 186 | background-color: rgba($color: #000000, $alpha: 0.3); | ... | ... |
| ... | @@ -11,9 +11,16 @@ | ... | @@ -11,9 +11,16 @@ |
| 11 | </div> | 11 | </div> |
| 12 | <div class="swipe"> | 12 | <div class="swipe"> |
| 13 | <van-swipe :autoplay="5000"> | 13 | <van-swipe :autoplay="5000"> |
| 14 | <van-swipe-item v-for="(works, index) in formData.worksList" :key="index"> | 14 | <van-swipe-item v-for="(item, index) in formData.worksList" :key="index"> |
| 15 | <!-- <img :src="works.worksUrl" /> --> | 15 | <!-- <img :src="works.worksUrl" /> --> |
| 16 | <div class="img" v-bind:style="{backgroundImage:'url(' + works.worksUrl + ')'}"></div> | 16 | <div |
| 17 | v-if="item.worksType=='pic'" | ||
| 18 | class="img" | ||
| 19 | v-bind:style="{backgroundImage:'url(' + item.worksUrl + ')'}" | ||
| 20 | ></div> | ||
| 21 | <video v-if="item.worksType=='video'" controls> | ||
| 22 | <source :src="item.worksUrl" type="video/mp4" /> | ||
| 23 | </video> | ||
| 17 | </van-swipe-item> | 24 | </van-swipe-item> |
| 18 | </van-swipe> | 25 | </van-swipe> |
| 19 | </div> | 26 | </div> |
| ... | @@ -171,6 +178,11 @@ export default { | ... | @@ -171,6 +178,11 @@ export default { |
| 171 | width: 630px; | 178 | width: 630px; |
| 172 | background-size: cover; | 179 | background-size: cover; |
| 173 | } | 180 | } |
| 181 | |||
| 182 | video { | ||
| 183 | height: 451px; | ||
| 184 | width: 630px; | ||
| 185 | } | ||
| 174 | } | 186 | } |
| 175 | 187 | ||
| 176 | .space { | 188 | .space { | ... | ... |
| ... | @@ -9,7 +9,13 @@ | ... | @@ -9,7 +9,13 @@ |
| 9 | v-on:praiseSuccess="showPraiseSuccessModel" | 9 | v-on:praiseSuccess="showPraiseSuccessModel" |
| 10 | v-on:showShare="shareModelVisiable=true" | 10 | v-on:showShare="shareModelVisiable=true" |
| 11 | ></ViewModel> | 11 | ></ViewModel> |
| 12 | <EditModel v-model="formData" v-if="init && formEdit" v-on:submit="showSuccessModel"></EditModel> | 12 | <EditModel |
| 13 | v-model="formData" | ||
| 14 | v-if="init && formEdit" | ||
| 15 | v-on:submit="submitSuccessHandler" | ||
| 16 | v-on:agreement="showAgreementModel" | ||
| 17 | v-on:privacy="showPrivacyModel" | ||
| 18 | ></EditModel> | ||
| 13 | 19 | ||
| 14 | <div class="bottom-line"></div> | 20 | <div class="bottom-line"></div> |
| 15 | 21 | ||
| ... | @@ -100,9 +106,22 @@ export default { | ... | @@ -100,9 +106,22 @@ export default { |
| 100 | this.initShare(); | 106 | this.initShare(); |
| 101 | }); | 107 | }); |
| 102 | }, | 108 | }, |
| 103 | showSuccessModel() { | 109 | submitSuccessHandler(data) { |
| 110 | if (data.isFirst) { | ||
| 111 | this.model.title = "温馨提示"; | ||
| 112 | this.model.content = "报名已成功!获得1次抽奖机会"; | ||
| 113 | this.model.index = "default"; | ||
| 114 | this.model.btnShow = true; | ||
| 115 | this.model.btnText = "前往抽奖"; | ||
| 116 | this.model.show = true; | ||
| 117 | |||
| 118 | let that = this; | ||
| 119 | this.model.confirmHandler = function() { | ||
| 120 | that.$router.push("/draw"); | ||
| 121 | }; | ||
| 122 | } else { | ||
| 104 | this.model.title = "温馨提示"; | 123 | this.model.title = "温馨提示"; |
| 105 | this.model.content = "报名已成功!"; | 124 | this.model.content = "作品信息修改成功!"; |
| 106 | this.model.index = "default"; | 125 | this.model.index = "default"; |
| 107 | this.model.btnShow = true; | 126 | this.model.btnShow = true; |
| 108 | this.model.btnText = "查看我的主页"; | 127 | this.model.btnText = "查看我的主页"; |
| ... | @@ -112,11 +131,13 @@ export default { | ... | @@ -112,11 +131,13 @@ export default { |
| 112 | this.model.confirmHandler = function() { | 131 | this.model.confirmHandler = function() { |
| 113 | that.initActivity(); | 132 | that.initActivity(); |
| 114 | }; | 133 | }; |
| 134 | } | ||
| 115 | }, | 135 | }, |
| 116 | showPraiseSuccessModel() { | 136 | showPraiseSuccessModel() { |
| 117 | this.model.show = true; | 137 | this.model.show = true; |
| 118 | this.model.title = "点赞成功"; | 138 | this.model.title = "点赞成功"; |
| 119 | this.model.content = "您已获得一次抽奖机会"; | 139 | this.model.content = "您已获得一次抽奖机会"; |
| 140 | this.model.index = "default"; | ||
| 120 | this.model.btnShow = true; | 141 | this.model.btnShow = true; |
| 121 | this.model.btnText = "前往抽奖"; | 142 | this.model.btnText = "前往抽奖"; |
| 122 | 143 | ||
| ... | @@ -130,6 +151,14 @@ export default { | ... | @@ -130,6 +151,14 @@ export default { |
| 130 | that.initActivity(); | 151 | that.initActivity(); |
| 131 | }; | 152 | }; |
| 132 | }, | 153 | }, |
| 154 | showAgreementModel() { | ||
| 155 | this.model.index = "agreement"; | ||
| 156 | this.model.show = true; | ||
| 157 | }, | ||
| 158 | showPrivacyModel() { | ||
| 159 | this.model.index = "privacy"; | ||
| 160 | this.model.show = true; | ||
| 161 | }, | ||
| 133 | initShare() { | 162 | initShare() { |
| 134 | let link = location.origin + location.pathname; | 163 | let link = location.origin + location.pathname; |
| 135 | if (this.formData.worksCode) { | 164 | if (this.formData.worksCode) { | ... | ... |
| ... | @@ -73,7 +73,7 @@ const router = new Router({ | ... | @@ -73,7 +73,7 @@ const router = new Router({ |
| 73 | 73 | ||
| 74 | router.beforeEach((to, from, next) => { | 74 | router.beforeEach((to, from, next) => { |
| 75 | let link = location.origin + location.pathname; | 75 | let link = location.origin + location.pathname; |
| 76 | as.setShare(link, null, null, null); | 76 | as.setShare(link, "", "", ""); |
| 77 | const title = to.meta && to.meta.title; | 77 | const title = to.meta && to.meta.title; |
| 78 | if (title) { | 78 | if (title) { |
| 79 | document.title = title; | 79 | document.title = title; | ... | ... |
| ... | @@ -38,8 +38,8 @@ module.exports = { | ... | @@ -38,8 +38,8 @@ module.exports = { |
| 38 | 38 | ||
| 39 | // 它支持webPack-dev-server的所有选项 | 39 | // 它支持webPack-dev-server的所有选项 |
| 40 | devServer: { | 40 | devServer: { |
| 41 | host: "192.168.0.101", | 41 | // host: "192.168.0.101", |
| 42 | // host: "localhost", | 42 | host: "localhost", |
| 43 | port: 9001, // 端口号 | 43 | port: 9001, // 端口号 |
| 44 | https: false, // https:{type:Boolean} | 44 | https: false, // https:{type:Boolean} |
| 45 | open: true, //配置自动启动浏览器 | 45 | open: true, //配置自动启动浏览器 | ... | ... |
-
Please register or sign in to post a comment