!268 添加图片导出时设置目标天数

Merge pull request !268 from 德仔/develop
This commit is contained in:
德仔 2021-06-01 15:01:57 +08:00 committed by Gitee
commit 7d36193da2
2 changed files with 31 additions and 8 deletions

View File

@ -59,8 +59,10 @@
@click="handleOnResetCurrentDay" @click="handleOnResetCurrentDay"
slot="reference" slot="reference"
> >
<div class="cus_name_hide" :id="`cus_name_${num}`">{{ name }}</div> <div class="cus_name_hide" :id="`cus_name_${num}`">
<div>{{ `${numDay}` }}</div> {{ name }}
</div>
<div :id="`day_num_${num}`">{{ `${numDay}` }}</div>
</div> </div>
</el-popover> </el-popover>
</template> </template>

View File

@ -24,7 +24,7 @@
type="primary" type="primary"
style="margin-left: 12px" style="margin-left: 12px"
icon="el-icon-download" icon="el-icon-download"
@click="handleOnExportImg" @click="handleOnExportStartNumConfig"
v-loading="downloading" v-loading="downloading"
:disabled="downloading" :disabled="downloading"
> >
@ -126,6 +126,7 @@ export default {
{ value: 16, label: "16" }, { value: 16, label: "16" },
{ value: 18, label: "18" }, { value: 18, label: "18" },
], ],
oriStartNum: 0,
}; };
}, },
updated() {}, updated() {},
@ -174,7 +175,7 @@ export default {
if (response.code === 200) { if (response.code === 200) {
const { planId, id } = response.data; const { planId, id } = response.data;
this.saveRecipes({ this.saveRecipes({
cusId: 0, cusId: 0, //
planId, planId,
reviewStatus: 2, // reviewStatus: 2, //
callback: () => { callback: () => {
@ -215,7 +216,18 @@ export default {
return "info"; return "info";
} }
}, },
handleOnExportImg() { handleOnExportStartNumConfig() {
this.oriStartNum = this.recipesData[0].numDay;
this.$prompt("食谱开始天数", "导出图片", {
confirmButtonText: "确定",
inputValue: this.oriStartNum,
inputPattern: /^[1-9]\d*$/,
inputErrorMessage: "请输入正整数",
}).then(({ value }) => {
this.handleOnExportImg(parseInt(value));
});
},
handleOnExportImg(startNum) {
this.downloading = true; this.downloading = true;
this.$nextTick(() => { this.$nextTick(() => {
const centerContentDom = document.getElementById("center_content"); const centerContentDom = document.getElementById("center_content");
@ -234,6 +246,10 @@ export default {
if (tmpElm) { if (tmpElm) {
tmpElm.classList = []; tmpElm.classList = [];
} }
const tmpNum = document.getElementById(`day_num_${idx}`);
if (tmpNum) {
tmpNum.innerText = `${startNum + idx}`;
}
}); });
recipesDom.style.overflow = "visible"; recipesDom.style.overflow = "visible";
html2canvans(recipesDom, { html2canvans(recipesDom, {
@ -241,10 +257,11 @@ export default {
height: recipesDom.scrollHeight, height: recipesDom.scrollHeight,
}).then((canvas) => { }).then((canvas) => {
const { name } = this.healthyData; const { name } = this.healthyData;
const startNum = this.recipesData[0].numDay; // const startNum = this.recipesData[0].numDay;
const endNum = this.recipesData[this.recipesData.length - 1].numDay; // const endNum = this.recipesData[this.recipesData.length - 1].numDay;
const endNum = startNum + this.recipesData.length - 1;
const link = document.createElement("a"); const link = document.createElement("a");
link.download = `${name}_第${startNum}${endNum}天.jpeg`; link.download = `${name || "匿名"}_第${startNum}${endNum}天.jpeg`;
link.href = canvas.toDataURL(); link.href = canvas.toDataURL();
link.click(); link.click();
@ -256,6 +273,10 @@ export default {
if (tmpElm) { if (tmpElm) {
tmpElm.classList = ["cus_name_hide"]; tmpElm.classList = ["cus_name_hide"];
} }
const tmpNum = document.getElementById(`day_num_${idx}`);
if (tmpNum) {
tmpNum.innerText = `${this.oriStartNum + idx}`;
}
}); });
this.downloading = false; this.downloading = false;