269 lines
6.7 KiB
Vue
269 lines
6.7 KiB
Vue
<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> |