161 lines
3.5 KiB
Vue
161 lines
3.5 KiB
Vue
|
<template>
|
||
|
|
<view class="page">
|
||
|
|
<view v-if="type == 1" class="bg-container">
|
||
|
|
<view class="bg-item" v-for="(it,index) in bgList" :key="index"
|
||
|
|
:style="{ backgroundImage: `url(${it.elements.templateCover})` }"
|
||
|
|
:class="{'active': currentId == it.id}"
|
||
|
|
@click="currentId = it.id"
|
||
|
|
></view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
<view v-if="type == 2" class="bg-container2">
|
||
|
|
<view class="bg-item2" v-for="(it,index) in bgList" :key="index"
|
||
|
|
:style="{ backgroundImage: `url(${it.elements.templateCover})` }"
|
||
|
|
:class="{'active': currentId == it.id}"
|
||
|
|
@click="currentId = it.id"
|
||
|
|
></view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
<view class="btn-box">
|
||
|
|
<view class="btn" @click="preview">预览</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { getBillTemplateList } from "@/api/bar.js"
|
||
|
|
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
type: 1,
|
||
|
|
currentId: 0,
|
||
|
|
bgList:[],
|
||
|
|
form: {
|
||
|
|
|
||
|
|
}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onLoad(options) {
|
||
|
|
console.log(options)
|
||
|
|
this.type = options.type
|
||
|
|
this.form = {
|
||
|
|
amount: options.amount,
|
||
|
|
amount1: options.amount1,
|
||
|
|
specs: options.specs,
|
||
|
|
specs1: options.specs1,
|
||
|
|
no: options.no,
|
||
|
|
beerId: options.beerId,
|
||
|
|
}
|
||
|
|
this.getList()
|
||
|
|
uni.setNavigationBarTitle({
|
||
|
|
title: this.type == 1 ? '选择图片样式' : '选择打印样式'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getList() {
|
||
|
|
getBillTemplateList().then(res => {
|
||
|
|
this.bgList = res.data.filter(it => it.templateType == this.type)
|
||
|
|
this.bgList = this.bgList.map(it => {
|
||
|
|
if(it.elements) {
|
||
|
|
it.elements = JSON.parse(it.elements)
|
||
|
|
} else {
|
||
|
|
it.elements = {}
|
||
|
|
}
|
||
|
|
return it
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
preview() {
|
||
|
|
if(!this.currentId) {
|
||
|
|
uni.showToast({
|
||
|
|
title: '请选择模板',
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if(this.type == 1) {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: `/pagesActivity/preview?templateId=${this.currentId}&beerId=${this.form.beerId}&no=${this.form.no}&amount=${this.form.amount}&amount1=${this.form.amount1}&specs=${this.form.specs}&specs1=${this.form.specs1}`
|
||
|
|
})
|
||
|
|
} else if(this.type == 2) {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: `/pagesActivity/pdfPreview?templateId=${this.currentId}&beerId=${this.form.beerId}&no=${this.form.no}&amount=${this.form.amount}&amount1=${this.form.amount1}&specs=${this.form.specs}&specs1=${this.form.specs1}`
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.page {
|
||
|
|
|
||
|
|
background: #FFF;
|
||
|
|
height: 100vh;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
|
||
|
|
.bg-container {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
overflow-y: auto;
|
||
|
|
gap: 24rpx;
|
||
|
|
padding: 32rpx 42rpx;
|
||
|
|
.bg-item {
|
||
|
|
width: 320rpx;
|
||
|
|
height: 568rpx;
|
||
|
|
border: 2rpx solid #D8D8D8;
|
||
|
|
background-repeat: round;
|
||
|
|
}
|
||
|
|
.active {
|
||
|
|
border: 2rpx solid #39E5B1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.bg-container2 {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: flex-start;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
overflow-y: auto;
|
||
|
|
gap: 24rpx;
|
||
|
|
padding: 32rpx 42rpx;
|
||
|
|
.bg-item2 {
|
||
|
|
background-repeat: round;
|
||
|
|
width: 680rpx;
|
||
|
|
height: 340rpx;
|
||
|
|
border: 2rpx solid #D8D8D8;
|
||
|
|
}
|
||
|
|
.active {
|
||
|
|
border: 2rpx solid #39E5B1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.btn-box{
|
||
|
|
width: 100%;
|
||
|
|
height: 200rpx;
|
||
|
|
padding: 20rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
background-color: #FFF;
|
||
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
||
|
|
padding-bottom: env(safe-area-inset-bottom);
|
||
|
|
.btn{
|
||
|
|
width: 434rpx;
|
||
|
|
height: 88rpx;
|
||
|
|
line-height: 88rpx;
|
||
|
|
text-align: center;
|
||
|
|
background: #39E5B1;
|
||
|
|
color: #0B0E26;
|
||
|
|
border-radius: 12rpx;
|
||
|
|
font-size: 36rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|