Commit 2861b3c2 authored by 李星剑's avatar 李星剑

fix:面料建模

parent 67440c41
...@@ -4,7 +4,9 @@ ...@@ -4,7 +4,9 @@
// #ifdef H5 // #ifdef H5
export const BASE_URL = process.env.NODE_ENV === 'development' ? '/dev':'/prod-api/' export const BASE_URL = process.env.NODE_ENV === 'development' ? '/dev':'/prod-api/'
// #endif // #endif
// #ifdef MP-WEIXIN
export const BASE_URL = "http://octopus-dev.textile-saas.huansi.net/dev-api/"
// #endif
// #ifdef APP-PLUS // #ifdef APP-PLUS
export const BASE_URL = "http://octopus-dev.textile-saas.huansi.net/dev-api/" export const BASE_URL = "http://octopus-dev.textile-saas.huansi.net/dev-api/"
// export const BASE_URL = "http://10.10.10.31/" // export const BASE_URL = "http://10.10.10.31/"
......
...@@ -16,5 +16,9 @@ export default { ...@@ -16,5 +16,9 @@ export default {
url: "/gdep-enterprise/supplier/getSupplierList", url: "/gdep-enterprise/supplier/getSupplierList",
method: "get" method: "get"
}, },
upload:{
url: "/gdep-system/virtualfile/uploadFile",
method: "post"
}
} }
} }
\ No newline at end of file
...@@ -5,7 +5,7 @@ import base from './apiList/base.js' ...@@ -5,7 +5,7 @@ import base from './apiList/base.js'
import user from './apiList/user.js' import user from './apiList/user.js'
import auth from './apiList/auth.js' import auth from './apiList/auth.js'
import color from './apiList/colors.js' import color from './apiList/colors.js'
// import orderTicket from './apiList/orderTicket.js' import orderTicket from './apiList/orderTicket.js'
// 建模任务表接口 // 建模任务表接口
import modeling from './apiList/modeling.js' import modeling from './apiList/modeling.js'
// 建模品类表接口 // 建模品类表接口
...@@ -23,7 +23,7 @@ export default { ...@@ -23,7 +23,7 @@ export default {
...user, ...user,
...auth, ...auth,
...color, ...color,
// ...orderTicket, ...orderTicket,
...modeling, ...modeling,
...plm, ...plm,
...modelingTaskCategory, ...modelingTaskCategory,
......
...@@ -6,6 +6,15 @@ ...@@ -6,6 +6,15 @@
"pages": [ "pages": [
//pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
//品牌商首页 //品牌商首页
{
"path": "pages/user/login/login",
"style": {
"navigationBarTitleText": "模拟登录",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{ {
"path": "pages/home/tenantSelection", "path": "pages/home/tenantSelection",
"style": { "style": {
...@@ -20,15 +29,7 @@ ...@@ -20,15 +29,7 @@
} }
} }
}, },
{
"path": "pages/user/login/login",
"style": {
"navigationBarTitleText": "模拟登录",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{ {
"path": "pages/home/index", "path": "pages/home/index",
"style": { "style": {
...@@ -221,95 +222,6 @@ ...@@ -221,95 +222,6 @@
} }
} }
}, },
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"enablePullDownRefresh": false
}
},
{
"path": "pages/designCommissioned/listSelectToAdd",
"style": {
"navigationBarTitleText": "选择面料新增内容",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
"path": "pages/designCommissioned/list",
"style": {
"navigationBarTitleText": "款式委托选款列表",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
"path": "pages/designCommissioned/addItem",
"style": {
"navigationBarTitleText": "完善信息",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
"path": "pages/designCommissioned/item",
"style": {
"navigationBarTitleText": "委托详情",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
"path": "pages/user/register/stepSelectType",
"style": {
"navigationBarTitleText": "完善信息",
// "navigationBarTextStyle": "white",
"enablePullDownRefresh": false,
"mp-alipay": {
"transparentTitle": "always",
"titlePenetrate": "YES",
"allowsBounceVertical": "NO"
}
}
},
{
"path": "pages/user/register/perfectInformation",
"style": {
"navigationBarTitleText": "完善信息",
// "navigationBarTextStyle": "white",
"enablePullDownRefresh": false,
"mp-alipay": {
"transparentTitle": "always",
"titlePenetrate": "YES",
"allowsBounceVertical": "NO"
}
}
},
{
"path": "pages/user/register/success",
"style": {
"navigationBarTitleText": "完善信息",
// "navigationBarTextStyle": "white",
"enablePullDownRefresh": false,
"mp-alipay": {
"transparentTitle": "always",
"titlePenetrate": "YES",
"allowsBounceVertical": "NO"
}
}
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"enablePullDownRefresh": false
}
},
{ {
"path": "pages/designCommissioned/listSelectToAdd", "path": "pages/designCommissioned/listSelectToAdd",
"style": { "style": {
......
...@@ -24,21 +24,21 @@ ...@@ -24,21 +24,21 @@
<view class="color_fff btn u-p-l-10 u-p-r-10" @click="sampleConfirm">寄样确认</view> <view class="color_fff btn u-p-l-10 u-p-r-10" @click="sampleConfirm">寄样确认</view>
</view> </view>
<!-- 具体内容 我的面料 --> <!-- 具体内容 我的面料 -->
<view class="home_con u-m-t-20"> <!-- <view class="home_con u-m-t-20">-->
<view class="home_con_tit"> <!-- <view class="home_con_tit">-->
<view> <!-- <view>-->
<span class="u-font-32">我的面料</span> <!-- <span class="u-font-32">我的面料</span>-->
<span style="line-height: 0;" class="u-m-l-10 color_000 u-font-24">MY FABRIC</span> <!-- <span style="line-height: 0;" class="u-m-l-10 color_000 u-font-24">MY FABRIC</span>-->
</view> <!-- </view>-->
<view class="u-font-24 color_d5aa7a" @click="seeFabric">查看更多</view> <!-- <view class="u-font-24 color_d5aa7a" @click="seeFabric">查看更多</view>-->
</view> <!-- </view>-->
<view class="home_con_fabric"> <!-- <view class="home_con_fabric">-->
<view class="home_con_content u-m-t-24" @click="detailFabric(item)" v-for="item in fiabricList"> <!-- <view class="home_con_content u-m-t-24" @click="detailFabric(item)" v-for="item in fiabricList">-->
<image class="hs-img" src="../../static/images/home/1@2x.png" mode=""></image> <!-- <image class="hs-img" src="../../static/images/home/1@2x.png" mode=""></image>-->
<view class="home_con_content_font ov_hiden">{{ item.materialName }}</view> <!-- <view class="home_con_content_font ov_hiden">{{ item.materialName }}</view>-->
</view> <!-- </view>-->
</view> <!-- </view>-->
</view> <!-- </view>-->
<!-- 具体内容 我的订单 --> <!-- 具体内容 我的订单 -->
<view class="home_con u-m-t-20"> <view class="home_con u-m-t-20">
<view class="home_con_tit"> <view class="home_con_tit">
......
<template>
<view>
<view class="r-canvas-component"
:style="{
width:canvas_width/scale+'px',
height:canvas_height/scale+'px'
}"
:class="{'hidden':hidden}">
<canvas class="r-canvas" v-if="canvas_id"
:canvas-id="canvas_id" :id="canvas_id"
:style="{width:canvas_width+'px',height:canvas_height+'px','transform': `scale(${r_canvas_scale})`}"></canvas>
</view>
</view>
</template>
<script>
import canvas from "./canvas"
export default {
name: "e-canvas",
mixins: [canvas],
onLoad(){
}
}
</script>
<style scoped>
.r-canvas{
transform-origin: 0 0;
}
.r-canvas-component{
overflow: hidden;
}
.r-canvas-component.hidden{
position: fixed;
}
</style>
<template> <template>
<view> <view>
首页 <!-- <canvas-->
<button @click="changeUserType">切换用户</button> <!-- canvas-id="canvas"-->
<!-- :style="{-->
<!-- width: 549+'px',-->
<!-- height: 849+'px',-->
<!-- 'transform': `scale(${1})`-->
<!-- }">-->
<!-- </canvas>-->
<!-- <canvas canvas-id="myCanvas"></canvas>-->
<button @click="clear">清除</button>
<button @click="setI">设置</button>
<button @click="exportPng">导出</button>
<e-canvas ref="rCanvas" ></e-canvas>
</view> </view>
</template> </template>
<script> <script>
import ECanvas from "./e-canvas";
import mergeImages from "./mergeImages";
export default { export default {
name: "index", name: "index",
components: {ECanvas},
data(){
return{
index: 0
}
},
methods:{ methods:{
changeUserType(){ downLoadNetworkFile(url){
this.$Router.push({ return new Promise((resolve,reject)=>{
path: '/pages/user/register?redirect=1' uni.downloadFile({
url,
success:(res)=>{
if(res.statusCode == 200){
resolve(res.tempFilePath)
}else{
reject("Download Image Fail:102")
}
},
fail:(err)=>{
reject("Download Image Fail:101")
}
})
})
},
urlToBase64(config){
return new Promise(async (resolve,reject)=>{
if (typeof window != 'undefined') {
await this.downLoadNetworkFile(config.url).then(res=>{ // two function
resolve(res)
}).catch(err=>{
reject(err)
})
}else if (typeof plus != 'undefined') {
plus.io.resolveLocalFileSystemURL(config.url,(obj)=>{
obj.file((file)=>{
let fileReader = new plus.io.FileReader()
fileReader.onload = (res)=>{
resolve(res.target.result)
}
fileReader.onerror = (err)=>{
reject(err)
}
fileReader.readAsDataURL(file)
}, (err)=>{
reject(err)
})
},(err)=>{
reject(err)
})
}else if(typeof wx != 'undefined'){
wx.getFileSystemManager().readFile({
filePath: config.url,
encoding: 'base64',
success: function(res) {
resolve('data:image/png;base64,' + res.data)
},
fail: function(error) {
reject(error)
}
})
}
}) })
}, },
exportPng(){
uni.canvasToTempFilePath({
canvasId: "canvas",
quality: 1,
// x: 100,
// y: 200,
width: 549,
fileType:'jpg',
height: 849,
// destWidth: 100,
// destHeight: 100,
success: (res)=>{
this.urlToBase64({
url: res.tempFilePath
}).then(i =>{
console.log(i)
})
console.log('res',res.tempFilePath)
},
fail:(err)=>{
console.log(JSON.stringify(err)|| "Failed to generate poster:101")
}
},this)
},
async setImg(){
let sources = [
'https://huansi-gdep-dev.oss-cn-hangzhou.aliyuncs.com/020141d6-840d-48f8-9b4d-bb3905583d05',
'https://huansi-gdep-dev.oss-cn-hangzhou.aliyuncs.com/d691790d-ccf7-4e29-a9ac-69a8c058cb82',
'https://huansi-gdep-dev.oss-cn-hangzhou.aliyuncs.com/8965770b-d673-4285-b472-6c4c1be662d9',
]
let images = [
await this.downLoadNetworkFile(sources[1]),
await this.downLoadNetworkFile(sources[2]),
await this.downLoadNetworkFile(sources[0]),
"../../static/images/brank/lightxin.png",
"../../static/images/brank/thumb.png"
];
const ctx = uni.createCanvasContext("canvas",this),
ww = 549, hh = 849;
ctx.drawImage(images[0], 0, 0, ww, hh)
ctx.drawImage(images[1], 0, 0, ww, hh)
ctx.drawImage(images[2], 0, 0, ww, hh)
// ctx.drawImage(images[1], 30, hh - 87, 50, 50);
// ctx.drawImage(images[2], ww - 90, hh - 92, 60, 60);
ctx.draw();
},
getBaseUrl(){
// #ifdef H5
return process.env.NODE_ENV === 'development' ? '/images/': ''
// #endif
// #ifdef APP-PLUS
return this.$IMG_URL;
// #endif
},
async setI(){
let baseUrl = this.getBaseUrl();
let sources = [
`${baseUrl}020141d6-840d-48f8-9b4d-bb3905583d05`,
`${baseUrl}d691790d-ccf7-4e29-a9ac-69a8c058cb82`,
`${baseUrl}8965770b-d673-4285-b472-6c4c1be662d9`,
`${baseUrl}c24c2d77-2a53-4782-bec3-c66185a0ce10`,
]
let images = [
await this.downLoadNetworkFile(sources[1]),
await this.downLoadNetworkFile(sources[2]),
await this.downLoadNetworkFile(sources[0]),
await this.downLoadNetworkFile(sources[3]),
]
await this.$refs.rCanvas.mergeImageByImg(images[0],images[1])
},
async clear(){
await this.$refs.rCanvas.clearCanvas()
}
},
onReady(){
this.$nextTick(async ()=>{
// const context = uni.createCanvasContext('myCanvas')
//
// uni.downloadFile({
// url: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png',
// success: function (res) {
// context.save()
// context.beginPath()
// context.arc(96, 96, 48, 0, 2 * Math.PI)
// context.clip()
// context.drawImage(res.tempFilePath, 48, 48)
// context.restore()
// context.draw()
// }
// })
const ctx = uni.createCanvasContext("canvas",this)
// // 初始化
await this.$refs.rCanvas.init({
canvas_id: "rCanvas"
})
let baseUrl = this.getBaseUrl();
let sources = [
`${baseUrl}020141d6-840d-48f8-9b4d-bb3905583d05`,
`${baseUrl}d691790d-ccf7-4e29-a9ac-69a8c058cb82`,
`${baseUrl}8965770b-d673-4285-b472-6c4c1be662d9`,
`${baseUrl}c24c2d77-2a53-4782-bec3-c66185a0ce10`,
// '${baseUrl}020141d6-840d-48f8-9b4d-bb3905583d05',
// '${baseUrl}020141d6-840d-48f8-9b4d-bb3905583d05',
// 'https://huansi-gdep-dev.oss-cn-hangzhou.aliyuncs.com/d691790d-ccf7-4e29-a9ac-69a8c058cb82',
// 'https://huansi-gdep-dev.oss-cn-hangzhou.aliyuncs.com/8965770b-d673-4285-b472-6c4c1be662d9',
// // 上色用 图
// 'https://huansi-gdep-dev.oss-cn-hangzhou.aliyuncs.com/c24c2d77-2a53-4782-bec3-c66185a0ce10',
]
let images = [
await this.downLoadNetworkFile(sources[1]),
await this.downLoadNetworkFile(sources[2]),
await this.downLoadNetworkFile(sources[0]),
await this.downLoadNetworkFile(sources[3]),
]
// images.forEach((image) =>{
// let ww = 549, hh = 849;
// ctx.drawImage(image, 0, 0, ww, hh)
// })
// ctx.draw();
// await this.$refs.rCanvas.mergeImages(sources);
await this.$refs.rCanvas.mergeImageByImg(images[0],images[3])
})
} }
} }
</script> </script>
......
<template>
<view>
<view class="r-canvas-component" :style="{width:canvas_width/scale+'px',height:canvas_height/scale+'px'}" :class="{'hidden':hidden}">
<canvas class="r-canvas" v-if="canvas_id" :canvas-id="canvas_id" :id="canvas_id" :style="{width:canvas_width+'px',height:canvas_height+'px','transform': `scale(${r_canvas_scale})`}"></canvas>
</view>
</view>
</template>
<script>
import canvas from "../mixins/canvas"
export default {
name: "e-canvas",
mixins: [canvas]
}
</script>
<style scoped>
.r-canvas{
transform-origin: 0 0;
}
.r-canvas-component{
overflow: hidden;
}
.r-canvas-component.hidden{
position: fixed;
top: -5000upx;
}
</style>
...@@ -16,13 +16,19 @@ ...@@ -16,13 +16,19 @@
<view class="u-relative"> <view class="u-relative">
<!-- <u-image height="750rpx" :src="`${$IMG_URL}${detail.originalImageCode}`"></u-image>--> <!-- <u-image height="750rpx" :src="`${$IMG_URL}${detail.originalImageCode}`"></u-image>-->
<view> <view>
<!-- <image :src="`${$IMG_URL}${detail.originalImageCode}`" mode="heightFix" class="height-750rpx"></image>--> <!--新增 初始化的时候显示 部位编辑的时候不显示-->
<e-canvas ref="eCanvas" v-show="!isPartEdit && isEditMode"></e-canvas>
<!--调试-->
<!--<e-canvas ref="eCanvasHelp" ></e-canvas>-->
<e-canvas ref="eCanvasHelp" style="position: fixed;top: -100000px;"></e-canvas>
<!--部位编辑的时候显示 -->
<image <image
v-show="isPartEdit || !isEditMode"
:style="{ :style="{
'--src': `url(${$IMG_URL}${detail.originalImageCode})`, '--src': `url(${activeBgPic})`,
'--transform': `rotate(${angle}deg)`, '--transform': `rotate(${angle}deg)`,
}" }"
src="`${$IMG_URL}${detail.originalImageCode}`" :src="`${activePartPicCode}`"
mode="heightFix" mode="heightFix"
class="height-750rpx view" class="height-750rpx view"
></image> ></image>
...@@ -225,7 +231,9 @@ ...@@ -225,7 +231,9 @@
</view> </view>
</view> </view>
</view> </view>
<!-- #ifdef APP-PLUS -->
<!-- #endif -->
<view id="footer" class="footer"> <view id="footer" class="footer">
<view class="footer-btn"> <view class="footer-btn">
<view <view
...@@ -256,11 +264,16 @@ import dom from "@/mixins/dom"; ...@@ -256,11 +264,16 @@ import dom from "@/mixins/dom";
import step from "./mixins/step"; import step from "./mixins/step";
import material from "./mixins/material"; import material from "./mixins/material";
import ECanvas from "../index/e-canvas";
// 单一部位 材质合成
// 合成主体
export default { export default {
name: "createMaterial", name: "createMaterial",
components: {ECanvas},
mixins: [dom, step, material], mixins: [dom, step, material],
data() { data() {
return { return {
imgMergeTasks: [],
keyword: "", keyword: "",
isEdit: false, isEdit: false,
...@@ -290,9 +303,32 @@ export default { ...@@ -290,9 +303,32 @@ export default {
materialId: "", materialId: "",
activePartIndex: -1, activePartIndex: -1,
submitData: [], submitData: [],
// 是否部位编辑状态
isPartEdit: false,
}; };
}, },
computed: { computed: {
activePartPicCode(){
if(!this.isEditMode){
return this.$IMG_URL + this.detail.effectPictureCode
}
let data = this.activePartIndex === -1 ?
this.$IMG_URL + this.detail.originalImageCode :
this.$IMG_URL + this.parts[this.activePartIndex].pictureCode;
// debugger;
// let item = this.imgMergeTasks.length > 0 && this.activePartIndex > -1?
// this.imgMergeTasks.find((item) =>
// item.part.id === this.parts[this.activePartIndex].id
// )?.base64Code : '';
// console.log(item)
return data;
},
// 图片合成 底图
activeBgPic(){
return this.activeColor.fileCode ? this.$IMG_URL + this.activeColor.fileCode : "";
},
// 部位 // 部位
parts() { parts() {
return (this.detail.styleLibraryPictureVOList || []).sort((a, b) => { return (this.detail.styleLibraryPictureVOList || []).sort((a, b) => {
...@@ -336,9 +372,6 @@ export default { ...@@ -336,9 +372,6 @@ export default {
selectColorList() { selectColorList() {
// 如果部位是主体 且 存在信息则回填老的数据 // 如果部位是主体 且 存在信息则回填老的数据
if (this.mainPart.length !== 0) { if (this.mainPart.length !== 0) {
console.log(
this.mainPart[0].materialColoursList
)
return this.mainPart[0].materialColoursList.map((item) => { return this.mainPart[0].materialColoursList.map((item) => {
return { return {
...item, ...item,
...@@ -375,18 +408,141 @@ export default { ...@@ -375,18 +408,141 @@ export default {
}, },
}, },
created() { onLoad() {
let { id, materialId } = this.$Route.query; let { id, materialId } = this.$Route.query;
this.materialId = materialId; this.materialId = materialId;
this.getItem(id); this.id = id;
this.getList(); this.getList();
this.getColors(); this.getColors();
this.getMaterialItem(materialId); this.getMaterialItem(materialId);
this.getMaterialList(); this.getMaterialList();
},
onReady() {
this.$nextTick(async ()=>{
await this.getItem(this.id);
let canvas = this.$refs.eCanvas;
await canvas.init({
canvas_id: "eCanvas",
canvas_width: 375,
canvas_height: 375,
})
await this.$refs['eCanvasHelp'].init({
canvas_id: "eCanvasHelp",
canvas_width: 375,
canvas_height: 375,
})
let BASE_URL = this.getBaseUrl();
let sources = [`${BASE_URL}${this.detail.originalImageCode}`].concat(
this.parts.map((item) => `${BASE_URL}${item.pictureCode}`)
);
await canvas.mergeImages(sources);
this.isPartEdit = false;
this.initImageTasks(this.parts)
})
}, },
methods: { methods: {
getBaseUrl(){
// #ifdef H5
return process.env.NODE_ENV === 'development' ? '/images/': ''
// #endif
// #ifdef APP-PLUS
return this.$IMG_URL;
// #endif
},
// todo
uploadImg(base64) {
return new Promise((resolve, reject) => {
uni.request({
url: this.$API_URL +'/gdep-system/virtualfile/uploadFileBase64',
data: {
file: base64,
fileName: '11'
},
method:'POST',
header: {
// 'Content-Type': "application/x-www-form-urlencoded", //自定义请求头信息
'Authorization-Basic': 'Basic c3dvcmQ6c3dvcmRfc2VjcmV0',
"blade-auth": "Bearer " + uni.getStorageSync('token')
},
success: (res) =>{
resolve(res.data.data)
console.log(res)
},
fail: (error) =>{
reject(error);
console.log(error)
}
})
})
},
base64ToBlob(urlData, type) {
let arr = urlData.split(',');
let mime = arr[0].match(/:(.*?);/)[1] || type;
// 去掉url的头,并转化为byte
let bytes = window.atob(arr[1]);
// 处理异常,将ascii码小于0的转换为大于0
let ab = new ArrayBuffer(bytes.length);
// 生成视图(直接针对内存):8位无符号整数,长度1个字节
let ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], {
type: mime
});
},
// 最后提交前的图片整合
imagesMerge(){
return new Promise((resolve, reject) => {
mergeImages(
this.imgMergeTasks.map((item) => item.base64Code)
).then(res => {
resolve(res)
})
})
},
initImageTasks(parts){
let baseUrl = this.getBaseUrl();
parts.forEach((part) =>{
this.imgMergeTasks.push({
base64Code: `${baseUrl}${part.pictureCode}`,
id: part.id,
part
})
})
},
// 保存临时的图片用来预览
async createImgMergeTask(part,color,callback){
uni.showLoading({
mask: true
})
let index = this.imgMergeTasks.findIndex((item) => part.id === item.part.id);
let BASE_URL = this.getBaseUrl();
let canvas = this.$refs['eCanvasHelp'];
await canvas.clearCanvas();
await canvas.mergeImageByImg(`${BASE_URL}${part.pictureCode}`,`${BASE_URL}${color.fileCode}`);
let base64 = await canvas.exportImg();
let item = {
part,
color,
base64Code: base64
}
if(index === -1){
this.imgMergeTasks.push(item)
}else{
this.imgMergeTasks.splice(index,1,item)
}
if(callback){
callback();
}
uni.hideLoading()
},
filterPartActive(part) { filterPartActive(part) {
let data = this.submitData.filter( let data = this.submitData.filter(
(item) => !item.isDeleted && part.id === item.styleLibraryPictureId (item) => !item.isDeleted && part.id === item.styleLibraryPictureId
...@@ -420,6 +576,8 @@ export default { ...@@ -420,6 +576,8 @@ export default {
styleLibraryPictureId: activePart.id, styleLibraryPictureId: activePart.id,
styleLibrayId: activePart.styleLibrayId, styleLibrayId: activePart.styleLibrayId,
}); });
this.createImgMergeTask(this.parts[this.activePartIndex],color,this.toggleCanvasEditCallback)
// if() // if()
// $data.push({ // $data.push({
// materialColoursList: colors, // materialColoursList: colors,
...@@ -430,11 +588,21 @@ export default { ...@@ -430,11 +588,21 @@ export default {
// styleLibrayId: activePart.styleLibrayId, // styleLibrayId: activePart.styleLibrayId,
// }) // })
}, },
// 更改内容以后 刷新画布 重新绘制
async toggleCanvasEditCallback(){
let canvas = this.$refs['eCanvas'];
await canvas.clearCanvas();
let BASE_URL = this.getBaseUrl();
let sources = [`${BASE_URL}${this.detail.originalImageCode}`].concat(
this.imgMergeTasks.map((item) => item.base64Code)
);
await canvas.mergeImages(sources);
},
// //
setMaterialItem() { setMaterialItem() {
if (this.activePartIndex === 0) { if (this.activePartIndex === 0) {
this.materialDetail = this.selectedMaterialItem; this.materialDetail = this.selectedMaterialItem;
this.colorSelect(this.activeColor, this.selectedMaterialItemColors); this.colorSelect(this.activeColor, this.selectedMaterialItemColors,this.toggleCanvasEditCallback);
} else { } else {
this.ontherPartTrigger( this.ontherPartTrigger(
this.activeColor, this.activeColor,
...@@ -443,6 +611,8 @@ export default { ...@@ -443,6 +611,8 @@ export default {
} }
this.activeColor = {}; this.activeColor = {};
this.isEdit = false; this.isEdit = false;
this.isPartEdit = false;
}, },
cancelMaterialItem() { cancelMaterialItem() {
this.isEdit = false; this.isEdit = false;
...@@ -457,17 +627,27 @@ export default { ...@@ -457,17 +627,27 @@ export default {
pageReload() { pageReload() {
this.$Router.replace({ this.$Router.replace({
path: "/pages/material/createMaterial", path: "/pages/material/createMaterial",
query: this.$Route.query, query: {
...this.$Route.query,
materialId: this.materialDetail.id
},
}); });
}, },
// 加入待上架 // 加入待上架
submit() { async submit() {
let data = { let data = {
styleLibraryMaterialDTOList: this.submitData, styleLibraryMaterialDTOList: this.submitData,
styleOrderId: this.detail.styleOrderId, styleOrderId: this.detail.styleOrderId,
styleLibraryId: this.detail.id, styleLibraryId: this.detail.id,
}; };
this.$http("stylelibraryorder.addToShelves", data).then((res) => { uni.showLoading({
mask: true
})
let base64 = await this.$refs['eCanvas'].exportImg();
let res = await this.uploadImg(base64);
// console.log(data)
// return;
this.$http("stylelibraryorder.addToShelves", Object.assign({},data,{fileCode: res.fileCode})).then((res) => {
let { code, msg } = res; let { code, msg } = res;
if (code === 200) { if (code === 200) {
this.pageReload(); this.pageReload();
...@@ -476,7 +656,9 @@ export default { ...@@ -476,7 +656,9 @@ export default {
title: msg, title: msg,
}); });
} }
}); }).then(() =>{
uni.hideLoading()
})
}, },
// 取消上架 // 取消上架
cancel() { cancel() {
...@@ -544,6 +726,7 @@ export default { ...@@ -544,6 +726,7 @@ export default {
styleLibrayId: this.parts[0].styleLibrayId, styleLibrayId: this.parts[0].styleLibrayId,
}); });
} }
this.createImgMergeTask(this.parts[0],color,this.toggleCanvasEditCallback)
this.clearColor(color); this.clearColor(color);
}, },
clearColor(color) { clearColor(color) {
...@@ -606,7 +789,7 @@ export default { ...@@ -606,7 +789,7 @@ export default {
}, },
// 上一款 下一款 // 上一款 下一款
routerPush(isNext) { routerPush(isNext) {
this.$Router.push({ this.$Router.replace({
path: "/pages/material/createMaterial", path: "/pages/material/createMaterial",
query: { query: {
materialId: this.materialId, materialId: this.materialId,
...@@ -619,6 +802,7 @@ export default { ...@@ -619,6 +802,7 @@ export default {
this.loadStatus = "loading"; this.loadStatus = "loading";
this.$http("stylelibraryorder.page", { this.$http("stylelibraryorder.page", {
styleTag: this.keyword, styleTag: this.keyword,
isFilter: true,
status: 0, status: 0,
materialTagIdList, materialTagIdList,
size: 999, size: 999,
...@@ -634,33 +818,37 @@ export default { ...@@ -634,33 +818,37 @@ export default {
} }
}); });
}, },
getItem(id) {
this.$http("stylelibraryorder.details", id).then((res) => {
let { code, data } = res;
if (code === 200) {
// 过滤出数据
this.detail = data; // 获取详情
let parts = (data.styleLibraryPictureVOList || []).sort((a, b) => { getItem(id) {
return a.isMainBodyPart - b.isMainBodyPart < -1; return new Promise((resolve,reject) =>{
}); this.$http("stylelibraryorder.details", id).then((res) => {
let { code, data } = res;
if (code === 200) {
// 过滤出数据
let selectedList = parts.reduce((res, item) => { this.detail = data;
let selectItem = item["styleLibraryMaterialVOList"].map(($i) => { let parts = (data.styleLibraryPictureVOList || []).sort((a, b) => {
return { return a.isMainBodyPart - b.isMainBodyPart < -1;
...$i,
isMainBodyPart: item.isMainBodyPart,
materialColoursList: item.materialInfo.materialColoursList,
};
}); });
return res.concat(selectItem);
}, []);
this.submitData = selectedList;
// console.log(selectedList)
}
});
},
this.submitData = parts.reduce((res, item) => {
let selectItem = item["styleLibraryMaterialVOList"].map(($i) => {
return {
...$i,
isMainBodyPart: item.isMainBodyPart,
materialColoursList: item.materialInfo.materialColoursList,
};
});
return res.concat(selectItem);
}, []);
}
resolve()
});
})
},
// 获取颜色 // 获取颜色
getColors() { getColors() {
this.$http("colour.selectColour", { color: "" }).then((res) => { this.$http("colour.selectColour", { color: "" }).then((res) => {
...@@ -680,6 +868,7 @@ export default { ...@@ -680,6 +868,7 @@ export default {
this.activePartIndex = index; this.activePartIndex = index;
this.isEdit = true; this.isEdit = true;
this.isPartEdit = true;
}, },
}, },
}; };
......
export default {
data(){
return {
system_info:{}, //system info
canvas_width:0, //canvas width px
canvas_height:0, //canvas height px
ctx:null, //canvas object
canvas_id:null, //canvas id
hidden:false, //Whether to hide canvas
scale:1, //canvas scale
r_canvas_scale:1,
if_ctx:true
}
},
methods:{
/**
* Compatibility px
* @param {Object} size
*/
compatibilitySize(size) {
let canvasSize = (parseFloat(size) / 750) * this.system_info.windowWidth
canvasSize = parseFloat(canvasSize * 2)
return canvasSize
},
/**
* Restore compatibility px
* @param {Object} size
*/
resetCompatibilitySize(size) {
return (parseFloat(size / 2) / this.system_info.windowWidth) * 750
},
init(config){
return new Promise(async (resolve,reject)=>{
if(!config.canvas_id){
reject("Canvas ID cannot be empty, please refer to the usage example")
return;
}
this.hidden = config.hidden
this.canvas_id = config.canvas_id
let system_info = await uni.getSystemInfoSync()
this.system_info = system_info
this.scale = config.scale && parseFloat(config.scale)>0?parseInt(config.scale):1
this.canvas_width = (config.canvas_width ? this.compatibilitySize(config.canvas_width) : system_info.windowWidth) * this.scale
this.canvas_height = (config.canvas_height ? this.compatibilitySize(config.canvas_height) : system_info.windowHeight) * this.scale,
this.r_canvas_scale = 1/this.scale
this.ctx = uni.createCanvasContext(this.canvas_id,this)
// this.setCanvasConfig({
// global_alpha:config.global_alpha?parseFloat(config.global_alpha):1,
// backgroundColor:config.background_color?config.background_color:"#fff"
// })
resolve()
})
},
clearCanvas(){
return new Promise(async (resolve,reject)=>{
if(!this.ctx){
reject("canvas is not initialized:101")
return
}else{
this.ctx.clearRect(0,0,parseFloat(this.canvas_width)*this.scale,parseFloat(this.canvas_height)*this.scale)
await this.draw()
resolve()
}
})
},
draw(){
}
}
}
...@@ -24,46 +24,49 @@ ...@@ -24,46 +24,49 @@
</view> </view>
</view> </view>
<!-- 列表 确定--> <!-- 列表 确定-->
<view class="body bg-fff u-p-r-30 u-p-b-30 u-p-l-30" :style="{ bottom: footerHeight+ 'px', top: headerHeight + 'px' }"> <scroll-view class="body bg-fff u-p-r-30 u-p-b-30 u-p-l-30"
<view v-for="(item, index) in list" :key="item.id" :scroll-y="true"
@click="$Router.push({ @scrolltolower="loadMore"
:style="{ bottom: footerHeight+ 'px', top: headerHeight + 'px' }">
<view v-for="(item, index) in list" :key="item.id"
@click="$Router.push({
path: '/pages/material/createMaterial', path: '/pages/material/createMaterial',
query:{ query:{
materialId: $Route.query.materialId, materialId: $Route.query.materialId,
id: item.id id: item.id
} }
})" })"
class="u-flex u-m-b-20"> class="u-flex u-m-b-20">
<view class="item item--round u-flex "> <view class="item item--round u-flex ">
<view class="item-img u-relative"> <view class="item-img u-relative">
<image :src="`${$IMG_URL}${item.effectPictureCode}`" mode="fit" style="width:100%; height: 100%"></image> <image :src="`${$IMG_URL}${item.effectPictureCode}`" mode="fit" style="width:100%; height: 100%"></image>
<u-image width="100rpx" height="100rpx" v-if="item.putawayStatus === 1" <u-image width="100rpx" height="100rpx" v-if="item.putawayStatus === 1"
class="item--status" class="item--status"
mode="widthFix" mode="widthFix"
src="@/static/images/material/status.png"> src="@/static/images/material/status.png">
</u-image> </u-image>
</view>
<view class="u-flex-1 u-p-l-20 u-p-r-30 u-border-left">
<view class="item-title u-flex ">
<view class="u-flex-1 u-line-1 u-font-32 u-p-t-20 u-p-b-8">{{item.category}}</view>
<u-icon size="24" color="#000" name="arrow-right"></u-icon>
</view> </view>
<view class="item-desc u-font-24">{{ item.styleCode }}</view> <view class="u-flex-1 u-p-l-20 u-p-r-30 u-border-left">
<view class="item-tags u-p-b-24"> <view class="item-title u-flex ">
<view class="item-tag u-font-20" <view class="u-flex-1 u-line-1 u-font-32 u-p-t-20 u-p-b-8">{{item.category}}</view>
:key="tag.id" <u-icon size="24" color="#000" name="arrow-right"></u-icon>
v-for="tag in item.styleLibraryTagVOList"> </view>
{{ tag.materialTagName }} <view class="item-desc u-font-24">{{ item.styleCode }}</view>
<view class="item-tags u-p-b-24">
<view class="item-tag u-font-20"
:key="tag.id"
v-for="tag in item.styleLibraryTagVOList">
{{ tag.materialTagName }}
</view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> <!-- 加载更多 -->
<!-- 加载更多 --> <u-loadmore v-if="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
<u-loadmore v-if="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" /> <!-- 缺省页 -->
<!-- 缺省页 --> <hs-empty v-if="isEmpty" tipText="没有数据"></hs-empty>
<hs-empty v-if="isEmpty" tipText="没有数据"></hs-empty> </scroll-view>
</view>
<u-popup v-model="popupShow" mode="bottom" height="100%"> <u-popup v-model="popupShow" mode="bottom" height="100%">
<view class="u-relative"> <view class="u-relative">
<!--选款--> <!--选款-->
...@@ -143,9 +146,17 @@ export default { ...@@ -143,9 +146,17 @@ export default {
}) })
} }
}, },
methods:{ methods:{
// 触底加载更多
loadMore() {
if (this.pageOptions.current < this.pageOptions.pages) {
this.pageOptions.current += 1;
this.getList([],false);
}
},
popupConfirm(){ popupConfirm(){
this.getList(this.tagIds); this.getList(this.tagIds,true);
this.popupShow = false; this.popupShow = false;
}, },
triggerClickTag({materialLabelId}){ triggerClickTag({materialLabelId}){
...@@ -156,13 +167,6 @@ export default { ...@@ -156,13 +167,6 @@ export default {
this.tagIds.push(materialLabelId) this.tagIds.push(materialLabelId)
} }
}, },
// 触底加载更多
onReachBottom() {
if (this.pageOptions.current < this.pageOptions.pages) {
this.pageOptions.current += 1;
this.getData();
}
},
search(){ search(){
this.pageOptions = { this.pageOptions = {
current: 1, current: 1,
...@@ -170,10 +174,11 @@ export default { ...@@ -170,10 +174,11 @@ export default {
} }
this.getList(); this.getList();
}, },
getList(materialTagIdList = []){ getList(materialTagIdList = [],isReload = false){
this.loadStatus = 'loading'; this.loadStatus = 'loading';
this.$http('stylelibraryorder.page', { this.$http('stylelibraryorder.page', {
styleTag: this.keyword, styleTag: this.keyword,
isFilter: true,
status: 0, status: 0,
materialTagIdList, materialTagIdList,
...this.pageOptions ...this.pageOptions
...@@ -181,11 +186,11 @@ export default { ...@@ -181,11 +186,11 @@ export default {
let { code, data } = res; let { code, data } = res;
if (code === 200) { if (code === 200) {
if(Object.keys(data).length > 0){ if(Object.keys(data).length > 0){
this.list = data.records; this.list = isReload ? data.records:this.list.concat(data.records);
this.pageOptions.pages = data.total; this.pageOptions.pages = data.total;
this.loadStatus = this.list.length < data.total ? 'loadmore' : 'nomore'; this.loadStatus = this.list.length < data.total ? 'loadmore' : 'nomore';
}else{ }else{
this.list = [] // this.list = []
this.loadStatus = 'nomore'; this.loadStatus = 'nomore';
} }
} }
...@@ -272,7 +277,7 @@ $main-color: #fff; ...@@ -272,7 +277,7 @@ $main-color: #fff;
right: 0; right: 0;
bottom: 0; bottom: 0;
top: 0; top: 0;
overflow-y: auto; //overflow-y: auto;
} }
.title{ .title{
......
...@@ -192,14 +192,21 @@ ...@@ -192,14 +192,21 @@
</view> </view>
</view> </view>
<view class="right u-flex-1 color--tree-children"> <view class="right u-flex-1 color--tree-children">
<view class="tree-item u-flex" <view class="tree-item grid-content"
@click="selectColor(item)" @click="selectColor(item)"
v-for="(item) in activeColorTree"> v-for="(item) in activeColorTree">
<u-checkbox <u-checkbox
class="display-inline-block u-m-r-10"
v-model="item.checked" v-model="item.checked"
></u-checkbox> ></u-checkbox>
<view class="tree-level-text"> <view class="tree-level-text display-inline-block">
{{ item.colour }} <text class="u-m-r-40 float-left">{{ item.colour }}</text>
<view class="float-left">
<u-image :src="`${$IMG_URL}${item.fileCode}`" shape="circle"
width="30rpx" height="30rpx"
></u-image>
</view>
<view class="u-line-1 float-left">{{ item.pantoneEncode}}</view>
</view> </view>
</view> </view>
</view> </view>
...@@ -475,8 +482,8 @@ export default { ...@@ -475,8 +482,8 @@ export default {
} }
} }
} }
this.detail.modelingTaskMaterialColourList = list.filter((item) => item.id && checked.indexOf(item.id) > -1); this.detail.modelingTaskMaterialColourList = list.filter((item) => item.id);
console.log(list) // this.detail.modelingTaskMaterialColourList = list.filter((item) => item.id && checked.indexOf(item.id) > -1);
}, },
// 颜色库选择 点击时间 存一份选中状态 在确定的时候过滤 // 颜色库选择 点击时间 存一份选中状态 在确定的时候过滤
selectColor(colorItem){ selectColor(colorItem){
...@@ -627,6 +634,19 @@ export default { ...@@ -627,6 +634,19 @@ export default {
}, },
submit(type){ submit(type){
let {modelingTaskPictureDTOList, ...onther} = this.detail; let {modelingTaskPictureDTOList, ...onther} = this.detail;
console.log(this.detail.modelingTaskMaterialColourList)
console.log(
Object.assign({},
onther,
{
designAgencyColourQuantity: this.designAgencyColourQuantity,
operationType:type,
modelingTaskPictureDTOList: modelingTaskPictureDTOList.concat(this.delModelingTaskPictureDTOList)}
)
)
return
this.$http("modeling.submit",Object.assign({}, this.$http("modeling.submit",Object.assign({},
onther, onther,
{ {
...@@ -665,7 +685,6 @@ export default { ...@@ -665,7 +685,6 @@ export default {
for (let i = 0; i < item.value; i++) { for (let i = 0; i < item.value; i++) {
res.push(this.getDefaultColor()) res.push(this.getDefaultColor())
} }
// console.log(target)
// console.log(res) // console.log(res)
this.detail.modelingTaskColourDTOList = target.filter((item) => item.id).concat(res) this.detail.modelingTaskColourDTOList = target.filter((item) => item.id).concat(res)
this.clearColors(); this.clearColors();
...@@ -787,6 +806,12 @@ export default { ...@@ -787,6 +806,12 @@ export default {
content: '*'; content: '*';
margin-right: 4px; margin-right: 4px;
} }
.grid-content{
display: grid;
grid-template-columns: min-content max-content minmax(min-content, 1fr);
}
.float-left{ .float-left{
float: left; float: left;
margin-right: 10rpx; margin-right: 10rpx;
......
...@@ -75,16 +75,16 @@ ...@@ -75,16 +75,16 @@
<view class="line"></view> <view class="line"></view>
品牌{{ index + 1 }} 品牌{{ index + 1 }}
</view> </view>
<text class="button--delete" @click.stop.self="delBrandRow(item)">删除</text> <text class="button--delete" @click.stop="delBrandRow(item)">删除</text>
</view> </view>
<view @click="InfoCollapseChange(index)"> <view @click="InfoCollapseChange(index)">
{{ {{
brandActive === index ? "收起":"展开" infoActive === index ? "收起":"展开"
}} }}
</view> </view>
</view> </view>
<view class="collapse-body" :style="[{ <view class="collapse-body" :style="[{
height: brandActive === index ? 'auto' : '0' height: infoActive === index ? 'auto' : '0'
}]"> }]">
<u-form labelWidth="100" labelPosition="top" > <u-form labelWidth="100" labelPosition="top" >
<u-form-item label="品牌名称" :style="style"> <u-form-item label="品牌名称" :style="style">
......
...@@ -52,21 +52,15 @@ export default { ...@@ -52,21 +52,15 @@ export default {
} }
}, },
created() { onLoad() {
this.orderId = this.$Router.currentRoute.query.id; this.orderId = this.$Router.currentRoute.query.id;
},
onShow() {
if(this.ticker){ if(this.ticker){
clearInterval(this.ticker); clearInterval(this.ticker);
}else { }else {
this.ticker = setInterval(this.checkStatus, 1000); this.ticker = setInterval(this.checkStatus, 1000);
} }
//
// this.$once("hooks:onHide", () =>{
// clearInterval(this.ticker);
// })
}, },
onHide(){ onUnload(){
clearInterval(this.ticker); clearInterval(this.ticker);
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment