photo_uniapp/pagesA/merge/idcard.vue

<template>
	<view>
		<view class="content photo_back">
			<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" :theme="theme" />
			<view class="photo_main" :style="'margin-top:'+margin_top+'px'" style="width: 100%;margin-left: 0;">
				<view class="idcard_1_over">
					<view class="idcard_1">
						<image :src="selectedImg" />
					</view>
				</view>


				<view class="idcard_2">
					<view class="idcard_2_1">
						<u-tabs @click="changeTab()" :current="this_tab" :list="list1" lineWidth="30"
							lineColor="#5A8FFF" :activeStyle="{
						              color: '#5A8FFF',
						              fontWeight: 'bold',
						              transform: 'scale(1.05)'
						          }" :inactiveStyle="{
						              color: '#999999',
						              transform: 'scale(1)'
						          }"></u-tabs>
					</view>

					<view class="idcard_2_2">
						<scroll-view class="idcard_2_2_1" enable-flex="true" scroll-x="true"
							scroll-with-animation="true">
							<view style="overflow: hidden;" class="idcard_2_2_1_one" v-for="(item,key) in tem_list"
								:key="key" @tap="selectThis(key)">
								<view class="idcard_2_2_1_one_1">

									<image :src="root_path+item.image" />
								</view>
								<view class="idcard_2_2_1_one_2" :style="key != selectedIndex ? 'display:none' : ''">
									<view class="idcard_2_2_1_one_2_1">
										<image src="/static/img/common/idcard_1.png" />
									</view>
								</view>
							</view>
						</scroll-view>


					</view>

					<view class="idcard_2_3 photo_full_blue_btn" @tap="saveBtn()">
						保存
					</view>

					<view class="idcard_2_4">剩余生成次数
					 <text style="color: #7A74F0;margin-left: 8rpx;margin-right: 8rpx;">
							{{photo_has}} </text> / 30 张</view>
				</view>
			</view>



		</view>

		<u-popup :show="show_2" mode="center" bgColor="transparent" :round="12">
			<view class="show_readme_div" style="height: 500rpx;">
				<view class="show_readme_div_1">
					请选择保存格式
				</view>
				<view class="show_readme_div_2" @tap="selecSave('1')">
					<view class="show_readme_div_3" :class="[save_type == '1' ? 'save_yes' : '']" style="width: 100%;margin-left: 0;margin-top: 10rpx;">
						PNG格式
					</view>
				</view>
				<view class="show_readme_div_2" @tap="selecSave('2')">
					<view class="show_readme_div_3" :class="[save_type == '2' ? 'save_yes' : '']" style="width: 100%;margin-left: 0;margin-top: 10rpx;">
						JPG格式
					</view>
				</view>
				
				
				<view class="show_readme_div_line">
					<view class="show_readme_div_4" style="width: 220rpx;" @tap="this.show_2 = false">
						取消
					</view>
					<view class="show_readme_div_3 save_yes" style="width: 220rpx;" @tap="subThis">
						确认
					</view>
				</view>
				

			</view>
		</u-popup>

	</view>
</template>

<script>
	import custom_navbar from "../photo/components/photo_header.vue";
	export default {
		components: {
			custom_navbar

		},
		data() {
			return {
				navbar_title: '二寸证件照',
				theme: "white1",
				margin_top: 10,
				selectedImg: '',
				selectedIndex: 0,
				selectedId:'',
				this_tab: 0,
				root_path: '',
				show_2: false,

				list1: [{
						id: 2,
						name: '女装'
					},
					{
						id: 1,
						name: '男装'
					},
				],
				tem_list: [],
				photo_has :0,
				save_type:'',
				form:{},

			}
		},

		onLoad(options) {
			var _this =this;
			console.log('options',options);
			_this.form = options;
			_this.changeTab();
			_this.root_path = _this.$api.getOssurl();
			_this.getUserInfo();

		},
		onShow() {

		},


		methods: {
			
			selecSave(type){
				this.save_type = type;
				console.log(this.save_type)
			},
			///api/userInfo
			getUserInfo(){
				
				let _this = this;
				this.$api.get('/api/userInfo',{},function(res){
					_this.photo_has = res.attach.photo.specs_number;
					
				});
			},
			getNavHeight(e) {
				this.margin_top += e;
			},
			selectThis(index) {
				this.selectedImg = this.$api.getOssurl() + this.tem_list[index].image;
				this.selectedId = this.tem_list[index].id;
				this.selectedIndex = index;
			},
			changeTab(e) {

				if (typeof(e) != 'undefined' && e.index) {
					this.this_tab = e.index;
				} else {
					this.this_tab = 0;
				}


				let data = {};
				data.template_type = this.list1[this.this_tab].id;
				let _this = this;
				this.$api.get('/api/specs/template_list', data, function(res) {
					if (res.length > 0) {
						_this.tem_list = res;
						_this.selectThis(0)

					} else {
						_this.tem_list = [];
					}
				});

			},
			
			saveBtn() {
				this.save_type ='';
				this.show_2 = true;
				
				
			},
			goUrl(url){
				this.show_2 = false;
				uni.navigateTo({
					url:url
				})
			},
			subThis(){
				var _this =this;
				var form = _this.form;
				var data = {
					specs_id:form.specs_id,
					portrait_id:form.portrait_id,
				};
				if(form.ilk == 3)
				{
					data.w_h_px = {w:form.w,h:form.h};
					data.kb = {min:form.min,max:form.max};
				}
				if(!this.save_type){
					this.$com.showError('请选择保存格式!');
					return false;					
				}else{
					data.image_suffix = this.save_type;
				}
				
				if(!this.selectedId){
					this.$com.showError('请选择一个模板!');
					return false;					
				}else{
					data.template_id = this.selectedId;
				}
				
				uni.showLoading({
					title: '保存图片中',
					mask:true					
				});
				this.$api.post('/api/specs/append',data,function(rs){
					uni.hideLoading();
					uni.navigateTo({
						url:"/pagesA/merge/success"
					})
				});				
			}			
		},

		
	}
</script>

<style lang="scss" scoped>
	@import './this.scss';

	.photo_back {
		background-color: #fff;
	}
</style>