You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

334 lines
7.4 KiB

<template>
<div class="poster">
<img class="weixin" src="../assets/images/poster/weixin.png" v-show="ImgFix" @click="ImgFix = false" />
<!--<input type="hidden" id="merchantNo" th:value="${merchantNo}"/>-->
<div class="page-top">
<a @click="goBack()" class="goBack"><img src="../assets/images/my-money/left.png" /></a>
<i class="name">分销海报</i>
<i class="text" @click="show = true" v-if=" defaultCity != '' ">{{defaultCity}}</i>
</div>
<div class="page-content">
<img class="poster-img" v-if="imgSrc != ''" :src="imgSrc">
<button class="create-poster" @click="create">重新生成海报</button>
</div>
<popup v-model="show">
<div class="picke-address">
<div class="status-btn">
<a class="cel-btn" @click="show = false">取消</a>
<a class="complete-btn" @click="getName()">完成</a>
</div>
<picker :data='addressData' :columns=3 v-model='addressValue' @on-change='change' ref="picker1"></picker>
</div>
</popup>
<div class="Loading-box">
<loading v-model="showLoading" text="loading"></loading>
</div>
</div>
</template>
<script>
import homeApi from "../models/home-model.js";
import posterApi from "../models/poster-model.js";
// import Swiper from 'swiper';
import { Alert, Toast,Popup,Picker,Loading } from "vux";
export default {
data() {
return {
show: false,
imgSrc: "",
merchantNo: "", //商户编号
isAuthorize: false,
authorizeSrc : "",
ImgFix: true,
defaultCity: '天河区',
addressData: [],
addressValue: [],
no: "",
sourceType : "",
showLoading: false,
};
},
components: {
Toast,
Popup,
Picker,
Loading
},
watch: {
},
methods: {
getCityName (){
let name = localStorage.getItem("cityName")||''
console.log(name)
if(!name){
return
}
let arr = name.split(',')
this.addressValue = arr
let cityNameArr = arr[2].split('&')
let cityName = cityNameArr[1]
this.defaultCity = cityName
this.merchantNo = cityNameArr[2]
},
getPoster (){
let merchantNo = this.merchantNo
posterApi.getPoster(merchantNo).then(res => {
if ( res.code == 0 ){
this.authorizeSrc = res.data.oauthUrl || ''
if ( res.data.hasOAuth == 1 ){
this.isAuthorize = true
}
if ( res.data.imageUrl ){
this.imgSrc = res.data.imageUrl
} else {
if ( res.data.hasOAuth == 0 ){
location.href = res.data.oauthUrl
return
} else {
this.createPoster()
}
}
} else {
this.$vux.toast.text(res.msg,"middle");
if ( res.code == 667 ){
setTimeout(function(){
location.href = '/mall/web/user/login'
},3000)
}
}
})
},
createPoster (){
if ( !this.isAuthorize ){
location.href = this.authorizeSrc
return;
}
this.showLoading = true
var merchantNo = this.merchantNo
posterApi.createPoster(merchantNo).then(res => {
setTimeout(()=>{
this.showLoading = false
},500)
if ( res.code == 0 ){
this.imgSrc = res.response
} else {
this.$vux.toast.text(res.msg,"middle");
if ( res.code == 666 ){
setTimeout(function(){
location.href = '/mall/web/user/login'
},2000)
}
}
})
},
getPoster2 (){
posterApi.getPoster2(this.no).then(res => {
if ( res.code == 0 ){
this.authorizeSrc = res.data.oauthUrl || ''
if ( res.data.hasOAuth == 1 ){
this.isAuthorize = true
}
if ( res.data.imageUrl ){
this.imgSrc = res.data.imageUrl
} else {
if ( res.data.hasOAuth == 0 ){
location.href = res.data.oauthUrl
return
} else {
this.createPoster2()
}
}
} else {
this.$vux.toast.text(res.msg,"middle");
if ( res.code == 667 ){
setTimeout(function(){
location.href = '/mall/web/user/login'
},2000)
}
}
})
},
createPoster2 (){
if ( !this.isAuthorize ){
location.href = this.authorizeSrc
return;
}
var no = this.no
this.showLoading = true
posterApi.createPoster2({"couponNo":no}).then(res => {
setTimeout(()=>{
this.showLoading = false
},500)
if ( res.code == 0 ){
this.imgSrc = res.response
} else {
this.$vux.toast.text(res.msg,"middle");
if ( res.code == 666 ){
setTimeout(function(){
location.href = '/mall/web/user/login'
})
}
}
})
},
getName (){
let arr = this.addressValue[2].split('&')
this.defaultCity = arr[1]
this.show = false
this.merchantNo = arr[2]
},
change (name) {
this.addressValue = name
},
getAddress (){
homeApi.getAddress().then(res => {
if ( res.code == 0 ){
this.addressData = res.data
} else {
this.$vux.toast.text(res.msg,"middle");
}
});
},
//返回上一页
goBack() {
history.go(-1);
},
getParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var url = window.location.href;
url = window.location.href.substring(url.indexOf("?") + 1, url.length);
var r = url.match(reg);
if (r != null) return unescape(r[2]);
return null;
},
//获取连接上的数据 进行判断
getNo (){
this.getCityName()
this.getAddress()
this.no = this.getParam("no")
this.sourceType = this.getParam("sourceType")
if ( this.sourceType == 2 ){
this.defaultCity = ''
this.getPoster2()
} else {
this.getPoster()
}
},
//点击生成海报按钮
create (){
if ( this.sourceType == 2 ){
this.createPoster2()
} else {
this.createPoster()
}
}
},
mounted() {
this.getNo()
}
};
</script>
<style>
.poster {
background:rgba(255,255,255,1);
}
.poster .page-top {
display: flex;
align-items: center;
justify-content: center;
padding: 0 0.2rem;
box-sizing: border-box;
position: relative;
}
.poster .page-top .goBack {
left: 0.2rem;
position: absolute;
}
.poster .page-top .text {
right: 0.2rem;
position: absolute;
}
.poster .page-top i {
font-style: normal;
display: flex;
align-items: center;
font-size: 0.36rem;
color: rgba(255,255,255,1);
letter-spacing: 1px;
}
.poster .page-top a {
position: relative;
left: 0;
}
.poster .page-top .name {
}
.poster .page-top .text {
height:0.28rem;
font-size:0.28rem;
font-weight:400;
color: #fff;
}
.page-content {
padding-bottom: 1.5rem;
position: relative;
}
.picke-address .status-btn {
display: flex;
height: 0.8rem;
align-items: center;
justify-content: space-between;
font-size: 0.3rem;
}
.picke-address .status-btn a {
padding: 0.3rem;
color: #888;
}
.picke-address .status-btn a.complete-btn {
color: #1aad19;
}
.poster-img {
width: 100%;
display: block;
}
.create-poster {
width: 4.68rem;
height: 0.76rem;
background: #19BC7F;
border-radius: 5px;
color: #fff;
font-size: 0.34rem;
border: none;
margin: auto;
display: block;
margin-top: 0.5rem;
}
.weixin {
width: 100%;
position: fixed;
z-index: 100;
}
.Loading-box .weui-toast {
width: 100%;
min-height: 100% !important;
overflow: hidden;
top: 0;
}
.Loading-box .weui-icon_toast.weui-loading {
margin-top: 75%;
}
</style>