1hjz-h5/src/view/poster.vue

<template>
	<div class="poster">
		<input type="hidden" id="merchantNo" th:value="${merchantNo}" value="2"/>
		<div class="page-top">		
			<a @click="goBack()"><img src="../assets/images/my-money/left.png" /></a>
			<i class="name">分销海报</i>
			<i class="text" @click="show = true">{{defaultCity}}</i>
		</div>
		<div class="page-content">
			<img class="poster-img" :src="imghost + imgSrc">
			<button class="create-poster" @click="createPoster(1)">重新生成海报</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>
</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 } from "vux";
	export default {
		data() {
			return {
				show: false,
				imgSrc: "",
				defaultCity: '天河区',
				addressData: [],
				addressValue: [],
				imghost: "http://medou.oss-cn-shenzhen.aliyuncs.com/",
			};
		},
		components: {
			Toast,
			Popup,
			Picker
		},
		watch: {
			
		},
		methods: {
			getCityName (){
				let name = localStorage.getItem("cityName")
				let arr = name.split(',')
				this.addressValue = arr
				let cityNameArr = arr[2].split('&')
				let cityName = cityNameArr[1]
				this.defaultCity = cityName
			},
			getPoster (){
				var merchantNo = $("#merchantNo").val()
				console.log(merchantNo)
				posterApi.getPoster(merchantNo).then(res => {
					console.log("海报",res)
					if ( res.code == 0 ){
						if ( res.data.hasOAuth == 0 ){
							location.href = res.data.oauthUrl
							return
						}
		   				if ( res.data.imageUrl ){
		   					this.imgSrc = res.data.imageUrl
		   				} else {
		   					createPoster()
		   				}
		   			} else {
						this.$vux.toast.text(res.msg,"middle");
						if ( res.code == 667 ){
							location.href = '/mall/web/user/login'
						}
					}
				})
			},
			createPoster (status){
				var merchantNo = $("#merchantNo").val()
				posterApi.createPoster({"merchantNo":merchantNo}).then(res => {
					if ( res.code == 0 ){
						if ( status ){
							this.$vux.toast.text(res.msg,"middle");
						}
		   				this.imgSrc = res.response
		   			} else {
						this.$vux.toast.text(res.msg,"middle");
						if ( res.code == 666 ){
							location.href = '/mall/web/user/login'
						}
					}
				})
			},
			getName (){
				let arr = this.addressValue[2].split('&')
				this.defaultCity = arr[1]
				this.show = false
			},
			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);
			}
		},
		mounted() {
	    	this.getAddress()
	      	this.getCityName()
		}
	};
</script>

<style>
.poster {
	background:rgba(255,255,255,1);
}
.poster .page-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 0.2rem;
	box-sizing: border-box;
}
.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 {
	margin-left: 1rem;
}

.poster .page-top .text {
	height:0.28rem;
	font-size:0.28rem;
	font-weight:400;
	color: #fff;
}

.page-content {
	padding-bottom: 1.5rem;
}

.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;
}

</style>