初始化
This commit is contained in:
269
pages/editor-letter-manual/editor-letter-manual.vue
Normal file
269
pages/editor-letter-manual/editor-letter-manual.vue
Normal file
@@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<view class="uni-page">
|
||||
<u-navbar placeholder :autoBack="true" bgColor="#fff0e7" title="XX书信-手写版"></u-navbar>
|
||||
<view class="content-main">
|
||||
<view class="no-picture-chunk" v-if="fileList.length<1" @click="uploadImg">
|
||||
<view class="picture-chunk-center">
|
||||
<u-icon name="plus-circle" color="#E49458" size="40"></u-icon>
|
||||
<text style="color: #e49458; font-size: 30rpx">添加照片</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<u-grid v-else :border="false" class="picture-chunk" :col="2">
|
||||
<u-grid-item v-for="(file,index) in fileList" :key="index">
|
||||
<view class="" style="padding: 20rpx 20rpx;">
|
||||
<image @click="$showImg(fileList.map(item=>item.url),index)"
|
||||
style="object-fit: cover; width: 335rpx;height: 278rpx; border-radius: 40rpx;overflow: hidden;"
|
||||
:src="file.url" alt="">
|
||||
</view>
|
||||
</u-grid-item>
|
||||
<u-grid-item>
|
||||
<view class="picture-chunk-center"
|
||||
style="object-fit: cover; width: 335rpx;height: 278rpx; border-radius: 40rpx;overflow: hidden;"
|
||||
@click="uploadImg">
|
||||
<u-icon name="plus-circle" color="#E49458" size="40"></u-icon>
|
||||
<text style="color: #e49458; font-size: 30rpx">添加照片</text>
|
||||
</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
<view class="upload-explain">
|
||||
<view class="upload-explain-item">
|
||||
<view class="dot"> </view>
|
||||
<text class="explain-text">请务必将信纸铺平，无褶皱</text>
|
||||
</view>
|
||||
<view class="upload-explain-item">
|
||||
<view class="dot"> </view>
|
||||
<text class="explain-text">
|
||||
请在光线充足的条件下拍照，避免阴影及画面清晰</text>
|
||||
</view>
|
||||
<view class="upload-explain-item">
|
||||
<view class="dot"> </view>
|
||||
<text class="explain-text"> 请尽量正面90°角度拍照，不要倾斜</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="floor-explain">
|
||||
说明：照片会相纸打印随信一起寄出，首张照片免费，多出部分每张费用按以下顺序改变
|
||||
{{$store.photoPrice?$store.photoPrice.photo_write.join('元>'):''}}，
|
||||
超出的按最后一个价格延续！
|
||||
</view>
|
||||
<SelectProductionMethod @selectPlan="selectPlan" @close="isShowNextBox=false" v-if="isShowNextBox">
|
||||
</SelectProductionMethod>
|
||||
<view class="floor-button" v-if="fileList.length>0&&canShowToolbar">
|
||||
<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 SelectProductionMethod from "@/components/SelectProductionMethod/SelectProductionMethod.vue";
|
||||
import {
|
||||
uploadFile
|
||||
} from "@/request/api.js";
|
||||
import {
|
||||
getPhotoPriceApi
|
||||
} from "@/request/wm.js";
|
||||
export default {
|
||||
components: {
|
||||
SelectProductionMethod,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fileList: [],
|
||||
isShowNextBox: false,
|
||||
canShowToolbar: false,
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.getPhotoPrice();
|
||||
},
|
||||
methods: {
|
||||
async uploadImg() {
|
||||
uni.chooseImage({
|
||||
count: 1, // 最多可选择的图片数量
|
||||
success: async (res) => {
|
||||
let lists = res.tempFilePaths;
|
||||
let fileListLen = this.fileList.length;
|
||||
lists.map((item) => {
|
||||
this.fileList.push({
|
||||
...item,
|
||||
status: "uploading",
|
||||
message: "上传中",
|
||||
});
|
||||
});
|
||||
let {
|
||||
data
|
||||
} = await uploadFile(lists[0]);
|
||||
if (data.code === 1) {
|
||||
let item = this.fileList[fileListLen];
|
||||
this.fileList.splice(
|
||||
fileListLen,
|
||||
1,
|
||||
Object.assign(item, {
|
||||
status: "success",
|
||||
message: "",
|
||||
url: data.data.fullurl,
|
||||
})
|
||||
);
|
||||
this.canShowToolbar = true
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log("选择照片失败", err);
|
||||
},
|
||||
});
|
||||
},
|
||||
toView() {
|
||||
// 这里要发送请求获取预览的拦截
|
||||
// this.$store.letterViewInfo.message = this.letterData;
|
||||
// this.$store.letterViewInfo.letterAthor = this.letterAthor;
|
||||
// this.$store.letterViewInfo.currentTime = this.currentTime;
|
||||
this.$store.letterViewInfo.fileList = this.fileList.map(item => item.url);
|
||||
uni.navigateTo({
|
||||
url: "pages/letter-view/letter-view",
|
||||
});
|
||||
// this.isViewLetter = true
|
||||
},
|
||||
toNextStep() {
|
||||
this.isShowNextBox = true;
|
||||
},
|
||||
async getPhotoPrice() {
|
||||
let {
|
||||
data
|
||||
} = await getPhotoPriceApi();
|
||||
// this.$mutations.setPhotoPrice(data.data)
|
||||
this.$set(this.$store, "photoPrice", data.data);
|
||||
// console.log(this.$store.photoPrice,'111');
|
||||
// console.log(data);
|
||||
},
|
||||
selectPlan(item) {
|
||||
let data = {
|
||||
message: "",
|
||||
thumb: this.fileList.map((item) => item.url),
|
||||
send_address: "",
|
||||
take_address: "",
|
||||
affix: "",
|
||||
remark: "",
|
||||
mail_type: item.id,
|
||||
isMmanual: true,
|
||||
};
|
||||
this.$set(this.$store, "letterInfo", data);
|
||||
uni.navigateTo({
|
||||
url: "pages/confirmOrder/confirmOrder",
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.uni-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.content-main {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
// height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.no-picture-chunk {
|
||||
margin: 30rpx 0;
|
||||
height: 496rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
padding: 43rpx;
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.picture-chunk-center {
|
||||
margin-bottom: 20rpx;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.picture-chunk {
|
||||
.picture-chunk-center {
|
||||
width: 335rpx;
|
||||
height: 278rpx;
|
||||
border-radius: 40rpx;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-explain {
|
||||
padding-left: 30rpx;
|
||||
|
||||
.upload-explain-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
background-color: #999796;
|
||||
margin-right: 14rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.explain-text {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.floor-explain {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: #222222;
|
||||
text-align: center;
|
||||
margin-bottom: 20rpx;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.floor-button {
|
||||
display: flex;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user