285 lines
6.6 KiB
Vue
285 lines
6.6 KiB
Vue
<template>
|
||
<view class="uni-page">
|
||
<u-navbar placeholder :autoBack="true" bgColor="#fff0e7" title="编辑书信" />
|
||
<view class="letter-content">
|
||
<textarea input-mode="multiline" :maxlength="-1" v-model="letterData" :autoHeight="true" placeholder="请输入内容"
|
||
border="bottom"></textarea>
|
||
</view>
|
||
<view class="signature-time">
|
||
<view class="signature">
|
||
<!-- <u--textarea :maxlength="10" class="signature-input" v-model="letterAthor" placeholder="请输入署名"
|
||
border="bottom"></u--textarea> -->
|
||
<u--input style="white-space: pre-wrap;" inputAlign="center" placeholder="请输入署名" v-model="letterAthor"
|
||
border="bottom" :customStyle="{
|
||
width:'200rpx'
|
||
}">
|
||
</u--input>
|
||
</view>
|
||
<view class="time">
|
||
<!-- {{typeof new Date}} -->
|
||
{{ currentTime }}
|
||
</view>
|
||
</view>
|
||
<view class="img-list-box">
|
||
<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="3" multiple :maxCount="10"
|
||
:previewFullImage="true">
|
||
<view class="upload-box">
|
||
<view class="plus-circle">
|
||
<u-icon name="plus-circle" color="#e49458" size="35"></u-icon>
|
||
<view style="margin-top:10rpx;">
|
||
添加照片
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-upload>
|
||
</view>
|
||
<view class="photo-explain">
|
||
<SelectProductionMethod @selectPlan="selectPlan" @close="isShowNextBox=false" v-if="isShowNextBox">
|
||
</SelectProductionMethod>
|
||
说明：照片会相纸打印随信一起寄出，首张照片免费，多出部分每张费用按以下顺序改变
|
||
{{$store.photoPrice?$store.photoPrice.photo_artificial:''}}
|
||
超出的按最后一个价格延续！
|
||
</view>
|
||
<view class="bottom-button">
|
||
<view class="to-view-button" @click="toView">
|
||
<u-icon name="eye" color="#222222" size="28" style="margin-right:10px;"></u-icon>书信预览
|
||
</view>
|
||
<view class="nextstep-button" @click="toNextStep">
|
||
下一步
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
uploadFile
|
||
} from '@/request/api.js'
|
||
import {
|
||
getPhotoPriceApi
|
||
} from '@/request/wm.js'
|
||
import SelectProductionMethod from '@/components/SelectProductionMethod/SelectProductionMethod.vue'
|
||
export default {
|
||
components: {
|
||
SelectProductionMethod
|
||
},
|
||
data() {
|
||
return {
|
||
letterData: '',
|
||
letterAthor: '',
|
||
fileList: [],
|
||
isShowNextBox: false,
|
||
currentTime: (new Date).$formatDate()
|
||
}
|
||
},
|
||
onLoad(opt) {
|
||
if (opt.clear) {
|
||
this.$set(this.$store, 'letterInfo', {})
|
||
}
|
||
this.getPhotoPrice()
|
||
this.letterData = this.$store.letterInfo.message
|
||
console.log(this.letterData);
|
||
},
|
||
methods: {
|
||
deletePic(event) {
|
||
this.fileList.splice(event.index, 1)
|
||
},
|
||
async afterRead(event) {
|
||
console.log(event);
|
||
let lists = [].concat(event.file)
|
||
let fileListLen = this.fileList.length;
|
||
lists.map((item) => {
|
||
this.fileList.push({
|
||
...item,
|
||
status: 'uploading',
|
||
message: '上传中'
|
||
})
|
||
})
|
||
|
||
let res = await uploadFile(event.file[0].url);
|
||
console.log(res);
|
||
if (res.data.code === 1) {
|
||
let item = this.fileList[fileListLen];
|
||
this.fileList.splice(fileListLen, 1, Object.assign(item, {
|
||
status: 'success',
|
||
message: '',
|
||
url: res.data.data.fullurl
|
||
}))
|
||
}
|
||
},
|
||
toView() {
|
||
// 这里要发送请求获取预览的拦截
|
||
// uni.showLoading({
|
||
// title: '加载中'
|
||
// });
|
||
this.$store.letterViewInfo.message = this.letterData;
|
||
this.$store.letterViewInfo.letterAthor = this.letterAthor;
|
||
this.$store.letterViewInfo.currentTime = this.currentTime;
|
||
this.$store.letterViewInfo.fileList = this.fileList;
|
||
console.log(this.$store.letterViewInfo);
|
||
uni.navigateTo({
|
||
url: "pages/letter-view/letter-view",
|
||
})
|
||
// this.isViewLetter = true
|
||
},
|
||
|
||
toNextStep() {
|
||
this.isShowNextBox = true
|
||
},
|
||
async getPhotoPrice() {
|
||
let {
|
||
data
|
||
} = await getPhotoPriceApi()
|
||
this.$set(this.$store, 'photoPrice', data.data)
|
||
this.$store.productionType.forEach(item => {
|
||
console.log(data.data[item.key],'111111111111111');
|
||
let price = data.data[item.key]?.find(price => {
|
||
if (+price > 0) {
|
||
return true
|
||
}
|
||
})
|
||
item.price = price || 0
|
||
})
|
||
console.log(this.$store.productionType, 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
|
||
},
|
||
selectPlan(item) {
|
||
this.$store.letterInfo.message = this.letterData;
|
||
this.$store.letterInfo.mail_type = item.id
|
||
this.$store.letterInfo.thumb = this.fileList.map(item => {
|
||
return item.url
|
||
})
|
||
this.$store.letterInfo.affix = this.letterAthor
|
||
|
||
uni.navigateTo({
|
||
url: 'pages/confirmOrder/confirmOrder?plan=' + item.id,
|
||
})
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.uni-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
}
|
||
|
||
.letter-content {
|
||
padding: 30rpx;
|
||
background-color: rgba(255, 255, 255, 0.5);
|
||
border-radius: 20rpx;
|
||
height: fit-content;
|
||
flex: 1;
|
||
margin-top: 20rpx;
|
||
|
||
textarea {
|
||
// min-height: 300rpx;
|
||
width: 100%;
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
|
||
::v-deep.signature-input {
|
||
max-width: 300rpx;
|
||
width: 300rpx;
|
||
text-align: center;
|
||
height: 30rpx;
|
||
border-bottom: unset;
|
||
// text-align: center;
|
||
background-color: transparent;
|
||
|
||
textarea {
|
||
height: 30rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.signature-time {
|
||
margin-top: 10rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: end;
|
||
text-align: center;
|
||
align-items: flex-end;
|
||
;
|
||
|
||
.time,
|
||
.signature {
|
||
width: 300rpx;
|
||
text-align: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
>view {
|
||
width: fit-content;
|
||
// width: 250px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.upload-box {
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
border-radius: 20rpx;
|
||
background-color: #fffdfc;
|
||
color: #CE7A2C;
|
||
font-size: 25rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.plus-circle {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.photo-explain {
|
||
height: 100rpx;
|
||
margin-top: 20rpx;
|
||
font-size: 26rpx;
|
||
font-weight: 400;
|
||
color: #9f9a97;
|
||
margin-bottom: 150rpx;
|
||
}
|
||
|
||
.bottom-button {
|
||
position: fixed;
|
||
bottom: 10rpx;
|
||
width: calc(100% - 40rpx);
|
||
display: flex;
|
||
z-index: 11;
|
||
}
|
||
|
||
.to-view-button {
|
||
width: 459rpx;
|
||
min-height: 98rpx;
|
||
background-color: #ffe4d9;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.nextstep-button {
|
||
flex: 1;
|
||
background: linear-gradient(to bottom right, #e8b648, #e08745);
|
||
min-height: 98rpx;
|
||
border-radius: 20rpx;
|
||
color: white;
|
||
font-size: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
}
|
||
|
||
.nextstep-button:hover {
|
||
background-color: black;
|
||
}
|
||
</style> |