初始化
This commit is contained in:
285
pages/editor-letter/editor-letter.vue
Normal file
285
pages/editor-letter/editor-letter.vue
Normal file
@@ -0,0 +1,285 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user