|
|
@@ -0,0 +1,445 @@
|
|
|
+<template>
|
|
|
+ <div class="crafting">
|
|
|
+ <!-- <img class="xiangyun" src="@/assets/img/CraftingView/xiangyun.png" alt="" /> -->
|
|
|
+ <div class="content">
|
|
|
+ <div class="content-top">
|
|
|
+ <img
|
|
|
+ class="ai-text"
|
|
|
+ src="@/assets/img/CraftingView/AIText.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <div :class="`content-sex contentAc${curSex}`">
|
|
|
+ <div
|
|
|
+ class="boy"
|
|
|
+ v-for="item in topArr"
|
|
|
+ :key="item.id"
|
|
|
+ @click="curSexFu(item)"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-center">
|
|
|
+ <div class="box">
|
|
|
+ <div class="box-content">
|
|
|
+ <div
|
|
|
+ class="box-item"
|
|
|
+ v-for="item in curSexList"
|
|
|
+ :key="item.id"
|
|
|
+ @click="imgClick(item.id)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="`${baseStateUrl}/${
|
|
|
+ curSex === 1 ? 'ManPic' : 'WomanPic'
|
|
|
+ }/${item.id}.jpg`"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-bottom">
|
|
|
+ <div class="tips">
|
|
|
+ 如{{ countDownNumber45 }}秒内未作操作,将自动退出
|
|
|
+ </div>
|
|
|
+ <div class="bottom-btns">
|
|
|
+ <div
|
|
|
+ class="download"
|
|
|
+ @click="downImg"
|
|
|
+ v-show="craftingUrl && isLoding === 0"
|
|
|
+ >
|
|
|
+ 查看图片
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="resetbtn"
|
|
|
+ :class="{ resetbtnOne: !(craftingUrl && isLoding === 0) }"
|
|
|
+ @click="againFu"
|
|
|
+ >
|
|
|
+ 重新拍摄
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 查看图片 -->
|
|
|
+ <div class="lookImg" :class="{ lookImgAc: lookImgFlag }" v-if="craftingUrl">
|
|
|
+ <img :src="craftingUrl" alt="" />
|
|
|
+ <div
|
|
|
+ class="close"
|
|
|
+ @click="(countDownNumber45 = 45), (lookImgFlag = false)"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/close.png" alt="" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="lookTit">
|
|
|
+ 如{{ countDownNumber45 }}秒内未作操作,将自动退出
|
|
|
+ <br />
|
|
|
+ 长按保存图片
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 加载中 -->
|
|
|
+ <div class="isLodingBox" v-show="isLoding === 1">
|
|
|
+ <div><img src="../assets/img/loading.gif" alt="" /></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import baseUrl from "@/utils/https.js";
|
|
|
+export default {
|
|
|
+ components: {},
|
|
|
+ props: ["craftingUrl", "isLoding"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ curSex: 1,
|
|
|
+ baseStateUrl: baseUrl,
|
|
|
+ // 3分钟计时
|
|
|
+ timer: null,
|
|
|
+ // 45s计时间
|
|
|
+ timer2: null,
|
|
|
+ countDownNumber45: 45,
|
|
|
+
|
|
|
+ topArr: [
|
|
|
+ { id: 1, name: "男", type: "man" },
|
|
|
+ { id: 2, name: "女", type: "woman" },
|
|
|
+ ],
|
|
|
+
|
|
|
+ // 查看图片
|
|
|
+ lookImgFlag: true,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ curSexList: function () {
|
|
|
+ // console.log(this.$store.state.dataAll.compoundPicList.manList);
|
|
|
+ return this.curSex == 1
|
|
|
+ ? this.$store.state.dataAll.compoundPicList.manList
|
|
|
+ : this.$store.state.dataAll.compoundPicList.womanList;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ methods: {
|
|
|
+ sonImgShow() {
|
|
|
+ this.lookImgFlag = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 点击 男 女
|
|
|
+ curSexFu(item) {
|
|
|
+ this.countDownNumber45 = 45;
|
|
|
+
|
|
|
+ if (this.curSex === item.id) return;
|
|
|
+
|
|
|
+ this.curSex = item.id;
|
|
|
+ this.$emit("sonMsg", { type: "WebChangeGender", data: item.type });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 点击图片
|
|
|
+ imgClick(ind) {
|
|
|
+ this.countDownNumber45 = 45;
|
|
|
+ if (this.isLoding === 1) {
|
|
|
+ alert("照片合成中,请稍后操作");
|
|
|
+ } else {
|
|
|
+ this.$emit("sonMsg", { type: "WebChooseImageID", data: ind });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 点击查看图片
|
|
|
+ downImg() {
|
|
|
+ this.countDownNumber45 = 45;
|
|
|
+ if (this.isLoding === 1) alert("照片合成中,请稍后操作");
|
|
|
+ else {
|
|
|
+ if (this.craftingUrl) this.lookImgFlag = true;
|
|
|
+ else alert("请先完成拍照");
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 点击重新拍摄
|
|
|
+ againFu() {
|
|
|
+ this.countDownNumber45 = 45;
|
|
|
+ this.$emit("sonMsg", { type: "WebReShoot", data: "" });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // console.log("绑定数据", this.baseStateUrl);
|
|
|
+ // 3分钟后,强制退出应用
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ // 强制退出应用
|
|
|
+ this.$emit("changeStateFu", "overtime");
|
|
|
+ }, 180000);
|
|
|
+
|
|
|
+ // 45s 持续递减
|
|
|
+ this.timer2 = setInterval(() => {
|
|
|
+ if (this.countDownNumber45 > 0) {
|
|
|
+ this.countDownNumber45--;
|
|
|
+ } else {
|
|
|
+ // 强制退出应用
|
|
|
+ this.$emit("changeStateFu", "overtime");
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ clearInterval(this.timer2);
|
|
|
+ }, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.crafting {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: url(@/assets/img/CraftingView/craftingBg.jpg);
|
|
|
+ background-size: cover;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .lookImg {
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 100;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ transition: all 0.3s;
|
|
|
+ background-color: rgba(0, 0, 0, 0.6);
|
|
|
+ display: flex;
|
|
|
+ img {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 100%;
|
|
|
+ }
|
|
|
+ .lookTit {
|
|
|
+ pointer-events: none;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+ bottom: 20px;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ text-shadow: 1px 1px 1px red;
|
|
|
+ }
|
|
|
+ .close {
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ right: 20px;
|
|
|
+ z-index: 1;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.6);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .lookImgAc {
|
|
|
+ opacity: 1;
|
|
|
+ pointer-events: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .isLodingBox {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 99;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ & > div {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.8);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .xiangyun {
|
|
|
+ width: 160px;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-110%);
|
|
|
+ /* left: 8vw; */
|
|
|
+ top: 5vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ max-width: 500px;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 2;
|
|
|
+ padding: 11% 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .content-top {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 15%;
|
|
|
+ // background: rgba(0, 0, 0, 0.548);
|
|
|
+
|
|
|
+ .ai-text {
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-sex {
|
|
|
+ width: 35%;
|
|
|
+ height: 4vh;
|
|
|
+ font-family: "SourceHanSansCN-Regular";
|
|
|
+ font-size: 1.3em;
|
|
|
+ display: flex;
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ .boy {
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ color: #ffffffa6;
|
|
|
+ margin-right: 2px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ background-image: url("../assets/img/CraftingView/sexRight.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ &:nth-of-type(2) {
|
|
|
+ margin-right: 0;
|
|
|
+ background-image: url("../assets/img/CraftingView/sexRight.png");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .contentAc1 {
|
|
|
+ .boy {
|
|
|
+ background-image: url("../assets/img/CraftingView/sexLeftAc.png");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .contentAc2 {
|
|
|
+ .boy {
|
|
|
+ &:nth-of-type(2) {
|
|
|
+ background-image: url("../assets/img/CraftingView/sexLeftAc.png");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-center {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 22%);
|
|
|
+ // background: black;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .box {
|
|
|
+ width: 95%;
|
|
|
+ height: 100%;
|
|
|
+ background: url(@/assets/img/CraftingView/boxBg.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 10% 8%;
|
|
|
+
|
|
|
+ ::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ /* 隐藏滚动条 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr 1fr;
|
|
|
+ // align-content: space-around;
|
|
|
+ grid-gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ // object-fit: contain;
|
|
|
+ border-radius: 10px;
|
|
|
+ border: yellow 1px solid;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-bottom {
|
|
|
+ width: 100%;
|
|
|
+ height: 15%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px auto 30px auto;
|
|
|
+
|
|
|
+ .tips {
|
|
|
+ // font-family: 'SourceHanSansCN-Bold';
|
|
|
+ font-size: 0.6em;
|
|
|
+ color: white;
|
|
|
+ width: 80%;
|
|
|
+ height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 30px;
|
|
|
+ background: url(@/assets/img/CraftingView/tipsBg.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-btns {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ font-family: "SourceHanSansCN-Bold";
|
|
|
+ font-size: 0.9em;
|
|
|
+ color: #ffffff;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ width: 80%;
|
|
|
+
|
|
|
+ .download {
|
|
|
+ width: 40vw;
|
|
|
+ height: 45px;
|
|
|
+ background: url(@/assets/img/CraftingView/downloadBg.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 2px;
|
|
|
+ padding-right: 6%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ justify-content: right;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .resetbtn {
|
|
|
+ width: 40vw;
|
|
|
+ height: 45px;
|
|
|
+ background: url(@/assets/img/CraftingView/resetBg.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-left: 2px;
|
|
|
+ padding-left: 6%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ justify-content: left;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .resetbtnOne {
|
|
|
+ padding-left: 12%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|