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.
195 lines
4.1 KiB
195 lines
4.1 KiB
<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;">
|
|
0 </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">
|
|
<view class="show_readme_div_3" style="width: 100%;margin-left: 0;margin-top: 10rpx;">
|
|
PNG格式
|
|
</view>
|
|
</view>
|
|
<view class="show_readme_div_2">
|
|
<view class="show_readme_div_3" style="width: 100%;margin-left: 0;margin-top: 10rpx;background:#F3F2F8;color:#999999">
|
|
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" style="width: 220rpx;" @tap="goUrl('/pagesA/merge/success')">
|
|
确认
|
|
</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,
|
|
this_tab: 0,
|
|
root_path: '',
|
|
show_2: false,
|
|
|
|
list1: [{
|
|
id: 2,
|
|
name: '女装'
|
|
},
|
|
{
|
|
id: 1,
|
|
name: '男装'
|
|
},
|
|
],
|
|
tem_list: []
|
|
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
|
|
},
|
|
onLoad() {
|
|
this.changeTab();
|
|
this.root_path = this.$api.getOssurl();
|
|
|
|
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
getNavHeight(e) {
|
|
this.margin_top += e;
|
|
},
|
|
selectThis(index) {
|
|
this.selectedImg = this.$api.getOssurl() + this.tem_list[index].image;
|
|
|
|
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.show_2 = true;
|
|
},
|
|
goUrl(url){
|
|
this.show_2 = false;
|
|
uni.navigateTo({
|
|
url:url
|
|
})
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './this.scss';
|
|
|
|
.photo_back {
|
|
background-color: #fff;
|
|
}
|
|
</style> |