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.
380 lines
9.2 KiB
380 lines
9.2 KiB
|
|
<template>
|
|
<div class="poster">
|
|
<img class="weixin" src="../assets/images/poster/weixin.png" v-show="ImgFix" @click="ImgFix = false" />
|
|
<div style="height: 0.9rem;" v-if="sourceType != 3 && sourceType != 2"></div>
|
|
<div class="page-top" v-if="sourceType != 3 && sourceType != 2">
|
|
<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 v-if="sourceType != 3 && sourceType != 2" class="create-poster" @click="createImg()">重新生成海报</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 { Alert, Toast,Popup,Picker,Loading } from "vux";
|
|
export default {
|
|
data() {
|
|
return {
|
|
show: false,
|
|
imgSrc: "",
|
|
imgUrl: '',
|
|
merchantNo: 2, //商户编号
|
|
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){
|
|
this.merchantNo = 2
|
|
this.defaultCity = '天河区'
|
|
return
|
|
}
|
|
let arr = name.split(',')
|
|
this.addressValue = arr
|
|
let cityNameArr = arr[2].split('&')
|
|
let cityName = cityNameArr[1]
|
|
this.defaultCity = cityName || '天河区'
|
|
this.merchantNo = cityNameArr[2] || 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.imgUrl = res.data.imageUrl
|
|
this.imgSrc = res.data.imageUrl + "?" + Date.now();
|
|
this.shareWenXin()
|
|
} 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.imgUrl = res.response
|
|
this.imgSrc = res.response + "?" + Date.now();
|
|
this.shareWenXin()
|
|
} 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.imgUrl = res.data.imageUrl
|
|
this.imgSrc = res.data.imageUrl + "?" + Date.now();
|
|
this.shareWenXin()
|
|
} 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.imgUrl = res.response
|
|
this.imgSrc = res.response + "?" + Date.now();
|
|
this.shareWenXin()
|
|
} 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
|
|
/// this.getName()
|
|
},
|
|
//加载地址
|
|
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.no = this.getParam("no")
|
|
this.sourceType = this.getParam("sourceType")
|
|
|
|
// alert("sourceType:"+this.sourceType)
|
|
// alert("href:"+location.href)
|
|
|
|
if ( this.sourceType != 3){
|
|
this.getCityName()
|
|
this.getAddress()
|
|
}
|
|
if ( this.sourceType == 2 ){ //指定优惠券
|
|
this.getPoster2()
|
|
}else if (this.sourceType == 3){
|
|
this.imgSrc = "http://1hjz.3ncto.com.cn" + this.no + "?" + Date.now();
|
|
this.imgUrl = "http://1hjz.3ncto.com.cn" + this.no;
|
|
} else { //通过商户默认推荐
|
|
this.getPoster()
|
|
}
|
|
this.shareWenXin()
|
|
},
|
|
//点击生成海报按钮
|
|
createImg (){
|
|
if ( this.sourceType == 2 ){
|
|
this.createPoster2()
|
|
} else {
|
|
this.createPoster()
|
|
}
|
|
},
|
|
//分享微信
|
|
shareWenXin (){
|
|
var coupon = this.getParam("no")
|
|
var sourceType = this.sourceType
|
|
var merchantNo = this.getParam("merchantNo")
|
|
var urls = encodeURIComponent(location.href)
|
|
var imgUrl = encodeURIComponent(this.imgUrl)
|
|
if ( sourceType == 2 ){ //指定优惠券
|
|
this.wxShare({"couponNo":coupon,"source":10,"url":urls,"imgUrl":imgUrl})
|
|
} else if( sourceType == 1) { //通过商户默认推荐
|
|
this.wxShare({"merchantNo":merchantNo,"source":10,"url":urls,"imgUrl":imgUrl})
|
|
} else if (sourceType == 3){ //通过别人分享
|
|
this.wxShare({"source":40,"url":urls,"imgUrl":imgUrl})
|
|
} else {
|
|
this.wxShare({"merchantNo":this.merchantNo,"source":10,"url":urls,"imgUrl":imgUrl})
|
|
}
|
|
|
|
}
|
|
},
|
|
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: fixed;
|
|
z-index: 10;
|
|
/*position: relative;*/
|
|
/*left: 0;*/
|
|
}
|
|
.poster .page-top .goBack {
|
|
left: 0.2rem;
|
|
top: 0.27rem;
|
|
position: absolute;
|
|
}
|
|
.poster .page-top .text {
|
|
right: 0.2rem;
|
|
top: 0.29rem;
|
|
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;
|
|
top: 0;
|
|
}
|
|
|
|
.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>
|