Skip to content

H
hs-app-project
Commit 82fc9f6c authored by DongRuifen's avatar DongRuifen
Browse files
Options

列表接口

parents 0e61cd66 13a131a4
Hide whitespace changes
Inline Side-by-side
Showing with 1179 additions and 281 deletions
src/config/request/apiList/mdm/colour/index.js 0 → 100644
View file @ 82fc9f6c
import config from "../config/index";
let className = 'colour';
let baseUrl = `${config.baseUrl}/${className}`
export default {
[className]:{
'selectColour':{
url: `${baseUrl}/selectColour`,
method: 'get'
}
}
}
src/config/request/apiList/mdm/index.js
View file @ 82fc9f6c
import materialinfo from './materialinfo/index'
import colour from './colour/index'
export default {
...materialinfo,
...colour,
}
src/config/request/apiList/plm/stylelibraryorder/index.js
View file @ 82fc9f6c
......@@ -10,6 +10,50 @@ export default {
'details':{
url: `${baseUrl}/details`,
method: 'get'
},
// 潜在客户列表
'potentialCustomersPage':{
url: `${baseUrl}/potentialCustomersPage`,
method: 'post'
},
// 潜在客户详情 enterpriseId
'potentialCustomersDetails':{
url: `${baseUrl}/potentialCustomersDetails`,
method: 'get'
},
// 上架单列表
'listingList':{
url: `${baseUrl}/listingList`,
method: 'post'
},
// 上架单详情
'listingDetails':{
url: `${baseUrl}/listingList`,
method: 'get'
},
// 上架管理列表
'getToShelvesManagerList':{
url: `${baseUrl}/getToShelvesManagerList`,
method: 'get'
},
// 上架管理详情
'getStyleDetails':{
url: `${baseUrl}/getStyleDetails`,
method: 'get'
},
// 加入待上架
'addToShelves':{
url: `${baseUrl}/addToShelves`,
method: 'post'
},
// 一键上架
'oneClickListing':{
url: `${baseUrl}/oneClickListing`,
method: 'post'
},
'unlisted':{
url: `${baseUrl}/unlisted`,
method: 'post'
}
}
}
src/pages/material/createMaterial.vue
View file @ 82fc9f6c
......@@ -10,13 +10,25 @@
</view>
<view class="body " :style="{ bottom: footerHeight + 'px', top: headerHeight+ 'px'}">
<view class="u-relative">
<u-image height="750rpx"></u-image>
<!-- <u-image height="750rpx" :src="`${$IMG_URL}${detail.originalImageCode}`"></u-image>-->
<view >
<!-- <image :src="`${$IMG_URL}${detail.originalImageCode}`" mode="heightFix" class="height-750rpx"></image>-->
<image :style="{
'--src': `url(${$IMG_URL}${detail.originalImageCode})`,
'--transform': `rotate(${angle}deg)`
}"
src="./img.png" mode="heightFix" class="height-750rpx view"></image>
</view>
<view v-if="!isEdit">
<view class="u-absolute prev">上一款</view>
<view class="u-absolute next">下一款</view>
<view class="u-absolute prev"
@click="routerPush(true)"
v-if="!isFirst">上一款</view>
<view class="u-absolute next"
@click="routerPush(false)"
v-if="!isLast">下一款</view>
</view>
<view v-if="isEdit"
class="u-absolute step u-p-r-30 u-p-l-30">
<view :class="[ !isEdit ? 'hide':'active']"
class="u-absolute step u-p-r-30 u-p-l-30">
<view class="step-main u-p-r-20 u-p-l-20 u-flex">
<text class="width_100">{{angle}}°</text>
<view class="u-relative u-flex-1">
......@@ -31,47 +43,71 @@
@touchmove="touchMove"
@touchend="touchEnd"
@touchstart="touchStart"
/>
/>
</view>
</view>
<text class="u-m-l-24">重置</text>
<text class="u-m-l-24" @click="resetStep">重置</text>
</view>
</view>
</view>
<view class="">
<!--可调整部位-->
<view class="u-m-b-20 bg-fff u-p-r-30 u-p-l-30">
<view class="title u-flex u-p-t-26 u-p-b-18">
<view class="title-tip u-m-r-10"></view>
可调整部位
</view>
<view class="overflow u-m-b-24">
<view class="button inline-block active">主身</view>
<view class="button inline-block">主身</view>
</view>
<view class="u-p-b-20">
<u-search placeholder="请输入面料名称" v-model="keyword"
border-color="#e1e1e1" height="76"
bg-color="#fff" :show-action="false"></u-search>
<view class="overflow u-p-b-24">
<view class="button inline-block"
:class="[
activePartIndex === index ? 'active':'',
filterPartActive(part) ? 'changed' : '',
]"
@click="partClick(index)"
v-for="(part,index) in parts">
{{
part.isMainBodyPart === 1 ? '主身' : `部位${index}`
}}
</view>
</view>
<view class="overflow u-p-b-30 u-border-bottom">
<view class="image u-m-r-10 active">
<image src="" style="width: 100%;height: 100%"></image>
<view class="image-tip u-line-1">颜色</view>
<view v-if="isEdit">
<view class="u-p-b-20" >
<u-search placeholder="请输入面料名称" v-model="keyword"
border-color="#e1e1e1" height="76"
bg-color="#fff" :show-action="false"></u-search>
</view>
<view class="overflow u-p-b-30 u-border-bottom">
<view class="image u-m-r-10 "
@click="triggerSelectedMaterial(color)"
:class="[selectedMaterial.id === color.id ? 'active':'']"
v-for="color in MaterialList">
<image src="" style="width: 100%;height: 100%"></image>
<view class="image-tip u-line-1">{{ color.materialName }}</view>
</view>
</view>
<view class="image u-m-r-10">
<image src="" style="width: 100%;height: 100%"></image>
<view class="image-tip u-line-1">颜色</view>
<view class="overflow"
v-if="selectedMaterialItemColors.length > 0">
<u-image :src="`${$IMG_URL}${item.color}`"
width="80rpx" height="80rpx"
:class="[activeColor.id === item.id ? 'active':'']"
shape="circle"
@click="setActiveColor(item)"
:key="item.id"
v-for="(item) in selectedMaterialItemColors"
class="u-m-r-20 inline-block color-item"
></u-image>
</view>
<view class="image u-m-r-10">
<image src="" style="width: 100%;height: 100%"></image>
<view class="image-tip u-line-1">颜色</view>
<view class="u-p-t-30 u-p-b-20 text-right">
<view class="button inline-block button-plain button-plain-default"
@click="cancelMaterialItem"
>取消</view>
<view
@click="setMaterialItem"
class="button inline-block button-default">确定</view>
</view>
</view>
<view class="u-p-t-30 u-p-b-20 text-right">
<view class="button inline-block button-plain button-plain-default">取消</view>
<view class="button inline-block button-default">确定</view>
</view>
</view>
<!--颜色选择-->
<view class="bg-fff u-p-r-30 u-p-l-30">
<view class="title u-flex u-p-t-26 u-p-b-18">
<view class="title-tip u-m-r-10"></view>
......@@ -80,29 +116,23 @@
<view class="u-border-bottom u-p-b-32">
<view class="">主图颜色</view>
<view>
<view class="image u-m-r-10">
<image src="" style="width: 100%;height: 100%"></image>
<view class="image-tip u-line-1">颜色</view>
<view v-if="isEditMode">
<view class="image u-m-r-10"
:class="[
activeMainPartBodyColorId === color.mdmMaterialColourId ? 'active' : ''
]"
@click="colorSelect(color,selectColorList)"
v-for="color in selectColorList">
<image :src="`${$IMG_URL}${color.fileCode}`" style="width: 100%;height: 100%" mode="aspectFit"></image>
<view class="image-tip u-line-1">{{ color.colour }}</view>
</view>
</view>
<view class="image u-m-r-10">
<image src="" style="width: 100%;height: 100%"></image>
<view class="image-tip u-line-1">颜色</view>
</view>
<view class="image u-m-r-10">
<image src="" style="width: 100%;height: 100%"></image>
<view class="image-tip u-line-1">颜色</view>
</view>
<view class="image u-m-r-10">
<image src="" style="width: 100%;height: 100%"></image>
<view class="image-tip u-line-1">颜色</view>
</view>
<view class="image u-m-r-10">
<image src="" style="width: 100%;height: 100%"></image>
<view class="image-tip u-line-1">颜色</view>
</view>
<view class="image u-m-r-10">
<image src="" style="width: 100%;height: 100%"></image>
<view class="image-tip u-line-1">颜色</view>
<view v-if="!isEditMode">
<view class="image u-m-r-10"
v-for="color in mainPartBodyColor">
<image :src="`${$IMG_URL}${color.fileCode}`" style="width: 100%;height: 100%" mode="aspectFit"></image>
<view class="image-tip u-line-1">{{ color.colourApi.describes}}</view>
</view>
</view>
</view>
</view>
......@@ -112,114 +142,516 @@
<text>(可多选)</text>
</view>
<view>
<view class="image u-m-r-10">
<image src="" style="width: 100%;height: 100%"></image>
<view class="image-tip u-line-1">颜色</view>
<view v-if="isEditMode">
<view class="image u-m-r-10"
:class="[
mainPartOtherColor.map((item) => item.mdmMaterialColourId).indexOf(color.mdmMaterialColourId) > -1 ? 'active' : ''
]"
@click="colorSelects(color,selectColorList)"
v-for="color in selectColorList">
<image :src="`${$IMG_URL}${color.fileCode}`" style="width: 100%;height: 100%" mode="aspectFit"></image>
<view class="image-tip u-line-1">{{ color.colour}}</view>
</view>
</view>
<view v-if="!isEditMode">
<view class="image u-m-r-10"
v-for="color in mainPartOtherColor">
<image :src="`${$IMG_URL}${color.fileCode}`" style="width: 100%;height: 100%" mode="aspectFit"></image>
<view class="image-tip u-line-1">{{ color.colourApi.describes}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view id="footer" class="footer">
<view class="footer-btn">
<view class="button button-default button-plain button-plain--default">
<view class="button button-default button-plain button-plain--default"
@click="submit"
v-if="isEditMode">
加入待上架
</view>
<view class="button button-plain button-plain--default"
v-if="!isEditMode" @click="cancel">
取消上架
</view>
</view>
</view>
<u-toast ref="uToast" />
</view>
</template>
<script>
// 点击部位获取对应内容
// 选择颜色 设置选中主色
//
import dom from "@/mixins/dom";
import step from "./mixins/step";
import material from "./mixins/material";
export default {
name: "createMaterial",
mixins:[dom],
mixins:[dom,step,material],
data(){
return {
title: '111',
keyword: '',
offset :{
x: 0
},
startTime: 0,
lineStepWidth: 0,
lineWidth: 0,
lineOffset: 0,
isEdit: false,
detail: {},
colors: [],
list: [],
// 选中物料
selectedMaterial: {},
// 选中主色
mainColor: {},
// 选中其他颜色
subColor: [],
selectedMaterialItem: [],
selectedMaterialItemColor: {},
activeColor: {},
styleLibraryMaterialDTOList: [],
// 过滤数据
filteredMaterialColorList: [],
// activePart: {},
materialId: '',
activePartIndex: -1,
submitData: []
}
},
computed:{
angle(){
let { lineOffset,offset,lineWidth} = this;
let left = (offset.x - lineOffset.left) / lineWidth * 100;
return Math.ceil((left-50) / 50 * 180);
// 部位
parts(){
return (this.detail.styleLibraryPictureVOList || []).sort((a,b) =>{
return a.isMainBodyPart - b.isMainBodyPart < -1
})
},
selectedMaterialItemColors(){
let key = (this.selectedMaterialItem.materialColourVOList || []).map((item) => item.colourId);
return this.colors.filter((item) => key.indexOf(item.id) > -1)
.map(item => {
return {
...item,
mdmMaterialColourId: item.id,
materialId: this.selectedMaterialItem.id
}
})
},
index(){
return this.list.findIndex(item => item.id === this.detail.id);
},
isLast(){
return this.index === this.list.length - 1
},
isFirst(){
return this.index === 0
},
isEditMode(){
return this.detail.putawayStatus === 1
},
// 默认的物料颜色可选
defaultColorList(){
let key = (this.materialDetail.materialColourVOList || []).map((item) => item.colourId);
return this.colors.filter((item) => key.indexOf(item.id) > -1)
.map((item) =>{
return {
...item,
materialId: this.materialId
}
})
},
// 可选颜色过滤
selectColorList(){
// 如果部位是主体 且 存在信息则回填老的数据
if(this.mainPart.length !== 0){
return this.mainPart[0].materialColoursList.map((item) => {
return {
...item,
colour: item.colourName || item.colour,
mdmMaterialColourId: item.colourId || item.mdmMaterialColourId
}
})
}else{
return this.defaultColorList.map((item) => {
return {
...item,
mdmMaterialColourId: item.id
}
})
}
},
//
mainPart(){
return this.submitData.filter((item) => item.isMainBodyPart === 1 && !item.isDeleted)
},
// 主图颜色 选中的颜色
mainPartBodyColor(){
return this.mainPart.filter((item) => item.type === 1);
},
// 主图颜色 其他选中的颜色
mainPartOtherColor(){
return this.mainPart.filter((item) => item.type !== 1);
},
// 主图颜色 其他选中的颜色
activeMainPartBodyColorId(){
return this.mainPartBodyColor[0]?.mdmMaterialColourId
}
},
mounted() {
this.uGetRect("#line").then(res => {
this.lineWidth = res.width;
this.lineOffset = {
left: res.left,
right: res.right,
};
this.offset.x = res.width /2 + res.left
})
this.uGetRect("#line-step").then(res => {
this.lineStepWidth = res.width;
})
},
created() {
let {id,materialId} = this.$Route.query;
this.materialId = materialId;
this.getItem(id);
this.getList();
this.getColors();
this.getMaterialItem(materialId);
this.getMaterialList();
},
methods:{
getItem(id){
this.$http("stylelibraryorder.details", id)
.then(res =>{
filterPartActive(part){
let data = this.submitData.filter((item) =>
!item.isDeleted &&
part.id === item.styleLibraryPictureId
);
return data.length > 0;
},
ontherPartTrigger(color,colors){
let $data = this.submitData;
let activePart = this.parts[this.activePartIndex];
let index = $data.findIndex((item) =>
item.styleLibraryPictureId === activePart.id
);
if(index > -1){
let item = $data[index];
if(item.id){
this.$set($data,index,{
...item,
isDeleted: !$data[index]['isDeleted']
})
}else{
$data.splice(index,1);
}
}
$data.push({
materialColoursList: colors,
isMainBodyPart: 0,type: 0, isDeleted: false,
mdmMaterialId: color.materialId,
mdmMaterialColourId: color.mdmMaterialColourId,
styleLibraryPictureId: activePart.id,
styleLibrayId: activePart.styleLibrayId,
})
// if()
// $data.push({
// materialColoursList: colors,
// isMainBodyPart: 0,type: 2, isDeleted: false,
// mdmMaterialId: color.materialId,
// mdmMaterialColourId: color.mdmMaterialColourId,
// styleLibraryPictureId: activePart.id,
// styleLibrayId: activePart.styleLibrayId,
// })
},
//
setMaterialItem(){
if(this.activePartIndex === 0){
this.materialDetail = this.selectedMaterialItem;
this.colorSelect(this.activeColor,this.selectedMaterialItemColors);
}else{
this.ontherPartTrigger(this.activeColor,this.selectedMaterialItemColors);
}
this.activeColor = {}
this.isEdit = false;
},
cancelMaterialItem(){
this.isEdit = false;
},
setActiveColor(color){
this.activeColor = {
...color,
materialId: this.selectedMaterialItem.id,
mdmMaterialColourId: color.id
};
},
pageReload(){
this.$Router.replace({
path: 'pages/material/createMaterial',
query: this.$Route.query
})
},
// 加入待上架
submit(){
let data = {
styleLibraryMaterialDTOList: this.submitData,
styleOrderId: this.detail.styleOrderId,
styleLibraryId: this.detail.id,
}
this.$http("stylelibraryorder.addToShelves",data)
.then(res =>{
let {
code, msg
} = res;
if(code === 200){
this.pageReload();
}else{
this.$refs.uToast.show({
title: msg
})
}
})
},
// 取消上架
cancel(){
this.$http("stylelibraryorder.unlisted", { id: this.detail.styleOrderId})
.then(res => {
let {
code,msg
} = res;
if(code === 200){
this.pageReload();
}else{
this.$refs.uToast.show({
title: msg
})
}
})
},
// 主体颜色选择
// 判断是否已有主体选择
// 清除其他可选
colorSelect(color,colors){
let $data = this.submitData;
let index = $data.findIndex((item) =>
item.mdmMaterialColourId === color.mdmMaterialColourId &&
item.type === 1 &&
item.isMainBodyPart === 1
);
if(this.activeMainPartBodyColorId){
let index = $data.findIndex((item) =>
item.mdmMaterialColourId === this.activeMainPartBodyColorId &&
item.type === 1 &&
item.isMainBodyPart === 1
);
let item = $data[index];
if(item.id){
this.$set($data,index,{
...$data[index],
isDeleted: !$data[index]['isDeleted']
})
}else{
$data.splice(index,1)
}
}
// 清除数据
if(index > -1){
let item = $data[index];
if(item.id){
this.$set($data,index,{
...$data[index],
isDeleted: !$data[index]['isDeleted']
})
}else{
$data.splice(index,1)
}
}else{
$data.push({
materialColoursList: colors,
isMainBodyPart: 1,type: 1, isDeleted: false,
mdmMaterialId: color.materialId,
mdmMaterialColourId: color.mdmMaterialColourId,
styleLibraryPictureId: this.parts[0].id,
styleLibrayId: this.parts[0].styleLibrayId,
})
}
this.clearColor(color)
},
clearColor(color){
let $data = this.submitData;
let index = $data.findIndex((item) =>
item.mdmMaterialColourId === color.mdmMaterialColourId &&
item.type === 2 &&
item.isMainBodyPart === 1
);
if(index > -1){
let item = $data[index];
if(item.id){
this.$set($data,index,{
...item,
isDeleted: !$data[index]['isDeleted']
})
}else{
$data.splice(index,1);
}
}
},
colorSelects(color,colors){
if(color.mdmMaterialColourId === this.activeMainPartBodyColorId) return;
let $data = this.submitData;
let index = $data.findIndex((item) =>
item.mdmMaterialColourId === color.mdmMaterialColourId &&
item.type === 0
);
// 清除数据
if(index > -1){
let item = $data[index];
if(item.id){
this.$set($data,index,{
...$data[index],
isDeleted: true
})
}else{
$data.splice(index,1)
}
}else{
$data.push({
materialColoursList: colors,
isMainBodyPart: 1,type: 0, isDeleted: false,
mdmMaterialId: color.materialId,
mdmMaterialColourId: color.mdmMaterialColourId,
styleLibraryPictureId: this.parts[0].id,
styleLibrayId: this.parts[0].styleLibrayId
})
}
},
triggerSelectedMaterial(item){
this.selectedMaterial = item;
this.getMaterialItem(item.id,(data) =>{
this.selectedMaterialItem = data;
})
},
// 上一款 下一款
routerPush(isNext){
this.$Router.push({
path: '/pages/material/createMaterial',
query:{
materialId: this.materialId,
id: this.list[isNext ? this.index + 1 : this.index -1].id
}
})
},
getMaterialItem(id){
this.$http("materialinfo.getMaterialById", id)
// 款式列表
getList(materialTagIdList = []){
this.loadStatus = 'loading';
this.$http('stylelibraryorder.page', {
styleTag: this.keyword,
status: 0,
materialTagIdList,
size: 999,
current: 1,
}).then(res => {
let { code, data } = res;
if (code === 200) {
if(Object.keys(data).length > 0){
this.list = data.records;
}else{
this.list = []
}
}
});
},
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) =>{
return a.isMainBodyPart - b.isMainBodyPart < -1
});
let selectedList = parts.reduce((res,item) =>{
let selectItem = item['styleLibraryMaterialVOList'].map(($i) => {
return {
...$i,
isMainBodyPart: item.isMainBodyPart,
materialColoursList: item.materialInfo.materialColoursList
}
});
return res.concat(selectItem)
},[])
this.submitData = selectedList;
// console.log(selectedList)
}
})
},
touchMove(e){
let left = e.changedTouches[0].pageX;
if(
left >= this.lineOffset.left &&
left <= this.lineOffset.right
){
this.offset.x = left
}
// 获取颜色
getColors(){
this.$http("colour.selectColour", {color: ''})
.then(res =>{
let {
code, data
} = res;
if(code === 200){
this.colors = data;
}
})
},
touchEnd(e){
let left = e.changedTouches[0].pageX;
// console.log(left)
// console.log(this.lineOffset.right)
if(
left >= this.lineOffset.left &&
left <= this.lineOffset.right
){
this.offset.x = left
// 可调整部位点击时间
partClick(index){
if(!this.isEditMode) return;
if(this.activePartIndex !== index){
this.activeColor = {};
this.selectedMaterial = {}
}
this.activePartIndex = index;
this.isEdit = true;
},
touchStart(e){
this.offset.x = e.changedTouches[0].pageX;
}
}
}
</script>
<style scoped lang="scss">
.color-item{
&.active{
border:1px solid #DDA973;
}
}
.height-750rpx{
height: 750rpx;
}
.view{
position: relative;
&:after{
content: "";
position: absolute;
width: 100%;
height: 100%;
background-image: var(--src);
transform: var(--transform);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
top: 0;
left: 0;
z-index: -1;
}
}
.bg-fff{ background: #fff}
.width_100{ width: 100rpx}
.inline-block{
......@@ -231,6 +663,12 @@ export default {
bottom: 16rpx;
left: 0;
color: #fff;
&.active{
opacity: 100%;
}
&.hide{
opacity: 0%;
}
&-main{
background: rgba(0,0,0,0.20);
}
......@@ -256,7 +694,7 @@ export default {
top: 50%;
margin-top: -20rpx;
background: #fff;
margin-left: -20rpx;
//margin-left: -20rpx;
}
}
......@@ -327,6 +765,9 @@ export default {
color: #AF8D66;
border: 1px solid #DDA973;
}
&.changed{
color: #AF8D66;
}
}
.body{
position: absolute;
......
src/pages/material/entrustItem.vue
View file @ 82fc9f6c
......@@ -8,47 +8,50 @@
</u-navbar>
<view class="body" :style="{ bottom: footerHeight + 'px', top: headerHeight+ 'px'}">
<view class="tip u-m-b-20">剩余59分1秒自动取消上架单</view>
<view class="tip u-m-b-20" v-if="detail.status === 1">剩余59分1秒自动取消上架单</view>
<view class="u-p-r-30 u-p-l-30">
<view class="bg-fff u-p-r-30 u-p-b-30 u-p-l-30 u-m-b-20">
<view class="u-border-bottom u-l-height-44 u-flex">
<text class="u-flex-1">款式明细</text>
<text>总共50款</text>
<text>总共{{detail.quantity}}款</text>
</view>
<view class="u-p-t-20 u-p-b-20">
加厚荷兰绒绒布布料(3)
</view>
<view class="item u-flex">
<view class="item-img"></view>
<!-- <view class="u-p-t-20 u-p-b-20">-->
<!-- {{ detail.styleOrderCode }}-->
<!-- </view>-->
<view class="item u-flex" v-for="(item) in list" :key="item.id">
<view class="item-img">
<image :src="`${$IMG_URL}${item.originalImageCode}`" mode="widthFix"></image>
</view>
<view class="u-flex-1 u-p-l-20">
<view class="item-title u-line-1 u-font-28">男装-上装-青年-时尚休闲</view>
<view class="item-title u-line-1 u-font-28">{{item.styleTag}}</view>
<view class="u-flex u-m-t-6 u-m-b-6">
<view class="u-m-r-40 label u-font-24">款号</view>
<view class="u-line-1 u-flex-1 content u-font-24">
11
{{ item.styleCode }}
</view>
</view>
<view class="u-flex u-m-t-6 u-m-b-6">
<view class="u-m-r-40 label u-font-24">所选面料</view>
<view class="u-line-1 u-flex-1 content u-font-24">
11
{{ item.materialName }}
</view>
</view>
<view class="item-tags">
<view class="item-tag u-font-20">
标签
</view>
<view class="item-tag u-font-20">
标签
<view class="item-tag u-font-20"
:key="tag.id"
v-for="tag in item.styleLibraryTagVOList">
{{tag.materialTagName}}
</view>
</view>
</view>
</view>
<view class="u-p-b-20 u-border-bottom text-center" @click="toggle">
<text>展开<u-icon name="arrow-down" size="22" color="#000"></u-icon></text>
<view class="u-p-b-20 u-border-bottom text-center"
v-if="detail.styleLibraryTaskItemVOList.length > 3"
@click="toggle">
<text>{{end? '展开': '收起'}}<u-icon :name="end ? 'arrow-down': 'arrow-up'" size="22" color="#000"></u-icon></text>
</view>
<view class="price text-right u-m-t-30 u-p-r-30">
总金额 <text class="price-num u-m-l-40">2000</text>元
总金额 <text class="price-num u-m-l-40">{{ detail.price }}</text>元
</view>
</view>
<!--订单信息-->
......@@ -57,26 +60,26 @@
<view class="u-flex u-m-t-18 u-m-b-8">
<view class="u-m-r-40 label">订单编号</view>
<view class="u-line-1 u-flex-1 content">
11
<!-- {{ item.createTime}}-->
</view>
</view>
<view class="u-flex u-m-t-18 u-m-b-8">
<view class="u-m-r-40 label">创建时间</view>
<view class="u-line-1 u-flex-1 content" >
111
</view>付款时间
{{ detail.createTime}}
</view>
</view>
<view class="u-flex u-m-t-18 u-m-b-8">
<view class="u-m-r-40 label">付款时间</view>
<view class="u-line-1 u-flex-1 content">
11
{{ detail.createTime}}
</view>
</view>
</view>
</view>
</view>
<view class="footer" id="footer">
<view class="footer" id="footer" v-if="detail.status === 1">
<view class="footer-btn">
<view class="button button-default">
立刻付款
......@@ -95,12 +98,38 @@ export default {
return {
title: '待付款',
detail:{
}
styleLibraryTaskItemVOList:[]
},
end: true
}
},
computed:{
list(){
let data = this.detail.styleLibraryTaskItemVOList || [];
return this.end === true && data.length > 3
? data.slice(0,3) : data;
}
},
created() {
let { id} = this.$Route.query;
this.getItem(id)
},
methods:{
toggle(){}
toggle(){
this.end = !this.end;
},
getItem(id){
this.$http("stylelibraryorder.listingDetails",id).then(res =>{
let {
code, data
} = res;
if(code === 200){
if(Object.keys(data).length > 0){
this.detail = data;
}
}
})
},
}
}
</script>
......
src/pages/material/entrustList.vue
View file @ 82fc9f6c
......@@ -29,38 +29,43 @@
<view class="item-header u-flex">
<view class="u-flex-1 u-line-1 u-font-32 u-flex">
<view class="item-header-tip u-m-r-10"></view>
AS2312424234
{{item.styleOrderCode}}
</view>
<view class="item-header-status u-flex-1 u-line-1 u-font-28">
待付款倒计时：59分21秒
<view class="item-header-status u-flex-1 u-line-1 u-font-28 text-right">
<!-- 待付款倒计时：59分21秒-->
<!-- 1-待付款、2-已付款、3-已取消-->
{{
item.status === 1 ? '待付款' :
item.status === 2 ? '已付款' : '已取消'
}}
</view>
</view>
<view class="item-body ">
<view class="item-desc u-m-t-28 u-m-b-22">
<text class="u-m-r-20 item-desc-label">上架款数</text>
<text class="item-desc-value">50款</text>
</view>
<view class="item-images">
<image src="" fit="fit" class="item-image"></image>
<image src="" fit="fit" class="item-image"></image>
<image src="" fit="fit" class="item-image"></image>
<image src="" fit="fit" class="item-image"></image>
<image src="" fit="fit" class="item-image"></image>
<image src="" fit="fit" class="item-image"></image>
<text class="item-desc-value">{{item.quantity}}款</text>
</view>
</view>
<view class="item-hr"></view>
<view class="item-footer u-flex">
<view class="item-desc u-flex-1 u-line-1">
<view class="item-desc u-flex-1 u-line-1" v-if="item.status === 1">
<text class="u-m-r-20 item-desc-label">待支付:</text>
<text class="item-desc-value item--status">23211元</text>
<text class="item-desc-value item--status">{{ item.price }}元</text>
</view>
<view class="item-buttons u-flex-1 u-flex">
<view class="button button-plain button-plain--default u-m-r-20">取消上架</view>
<view class="button button-default">付款</view>
<view class="item-buttons u-flex-1 u-flex" >
<!-- v-if="item.putawayStatus === 3"-->
<view class="button button-plain button-plain--default u-m-r-20" @click.stop.self="cancel(item)" >取消上架</view>
<view class="button button-default" v-if="item.status === 1">付款</view>
</view>
</view>
</view>
<!-- 加载更多 -->
<u-loadmore v-if="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
<!-- 缺省页 -->
<hs-empty v-if="isEmpty" tipText="没有数据"
marginTop="100rpx"
:image="emptyImage"></hs-empty>
<u-toast ref="uToast" />
</view>
</view>
</template>
......@@ -73,25 +78,72 @@ export default {
mixins:[dom],
data(){
return{
emptyImage :require("@/static/images/components/empty/empty.png"),
activeStatus: 0,
statusList: [
{label: '全部',value: '1'},
{label: '待付款',value: '2'},
{label: '已付款',value: '3'},
{label: '已取消',value: '4'},
{label: '全部',value: 0},
{label: '待付款',value: 1},
{label: '已付款',value: 2},
{label: '已取消',value: 3},
],
list: [
{}
]
loadStatus: 'loadmore',
pageOptions: {
current: 1,
size: 10,
pages: 10,
},
list: []
}
},
created() {
this.getList()
},
computed:{
isEmpty(){
return this.list.length === 0
}
},
methods:{
setStatus(index){
this.activeStatus = index;
this.getList();
this.getList(true);
},
getList(isReload){
this.loadStatus = 'loading';
this.$http("stylelibraryorder.listingList",{
...this.pageOptions,
"status": this.statusList[this.activeStatus].value,
}).then(res =>{
let {
code, data
} = res;
if(code === 200){
if(Object.keys(data).length > 0){
this.list = isReload ? data.records : this.list.concat(data.records);
this.pageOptions.pages = data.total;
this.loadStatus = this.list.length < data.total ? 'loadmore' : 'nomore';
}else{
this.list = []
this.loadStatus = 'nomore';
}
}
})
},
getList(){
// this.
cancel(item){
this.$http("stylelibraryorder.unlisted", { id: item.id})
.then(res => {
let {
code,msg
} = res;
if(code === 200){
this.getList(true);
}else{
this.$refs.uToast.show({
title: msg
})
}
})
},
goEntrustItemPage({id}){
this.$Router.push({
......@@ -109,7 +161,9 @@ export default {
$activeColor: #DDA973;
$mainColor: #000;
$subColor: rgba(0,0,0,0.40);
.flex-row-reverse{
flex-direction: row-reverse;
}
.bg-fff{
background: #fff;
}
......
src/pages/material/entrustManagement.vue
View file @ 82fc9f6c
......@@ -24,92 +24,91 @@
</view>
<view id="body" class="body u-p-r-30 u-p-l-30" :style="{ bottom: footerHeight + 'px', top: headerHeight+ 'px'}">
<view v-if="activeStatus === 0">
<view class="u-p-t-24 u-p-b-24">待上架：300款</view>
<view class="entrust bg-fff u-p-30">
<view class="u-p-t-24 u-p-b-24">待上架：{{ pageOptions.pages }}款</view>
<view class="entrust bg-fff u-p-30"
v-for="(item,index) in computedList">
<view class="entrust-title u-flex">
<!-- :name="index === selectedIndex ? 'checkmark-circle-fill': 'checkmark-circle'"-->
<u-icon name="checkmark-circle"
<u-icon :name="checkSelect(item) ? 'checkmark-circle-fill': 'checkmark-circle'"
color="#000" size="40"
@click="triggerSelectItem()"
@click="triggerSelectList(item)"
/>
<text class="u-flex-1 u-p-l-30">
加厚荷兰绒绒布布料(<text class="active-color">1</text>/3)
<text class="u-flex-1 u-p-l-30" @click="triggerToggle(index)">
{{item.label}} (<text class="active-color">{{checkSelectedLength(item)}}</text>/{{item.children.length}})
</text>
<u-icon name="arrow-down"
color="#000" size="40"
@click="triggerToggle()"
<u-icon
:name="checkToggle(index) ? 'arrow-up': 'arrow-down'"
color="#000" size="40"
@click="triggerToggle(index)"
/>
</view>
<view class="u-flex u-p-t-30">
<u-icon name="checkmark-circle"
color="#000" size="40"
@click="triggerSelectItem()"
/>
<view class="item u-flex-1 u-flex u-p-l-30">
<view class="item-img"></view>
<view class="u-flex-1 u-p-l-20">
<view class="item-title u-line-1 u-font-28">男装-上装-青年-时尚休闲</view>
<view class="u-flex u-m-t-6 u-m-b-6">
<view class="u-m-r-40 label u-font-24">款号</view>
<view class="u-line-1 u-flex-1 content u-font-24">
11
<view v-if="checkToggle(index)">
<view class="u-flex u-p-t-30" v-for="(item) in item.children">
<u-icon name="checkmark-circle"
color="#000" size="40"
:name="selectedIds.indexOf(item.id) > -1 ? 'checkmark-circle-fill': 'checkmark-circle'"
@click="() => { triggerSelectItem(item)}"
/>
<view class="item u-flex-1 u-flex u-p-l-30" @click="goItem(item)">
<view class="item-img"></view>
<view class="u-flex-1 u-p-l-20">
<view class="item-title u-line-1 u-font-28">{{ item.materialName}}</view>
<view class="u-flex u-m-t-6 u-m-b-6">
<view class="u-m-r-40 label u-font-24">款号</view>
<view class="u-line-1 u-flex-1 content u-font-24">
{{ item.styleCode }}
</view>
</view>
</view>
<view class="u-flex u-m-t-6 u-m-b-6">
<view class="u-m-r-40 label u-font-24">所选面料</view>
<view class="u-line-1 u-flex-1 content u-font-24">
11
<view class="u-flex u-m-t-6 u-m-b-6">
<view class="u-m-r-40 label u-font-24">所选面料</view>
<view class="u-line-1 u-flex-1 content u-font-24">
{{ item.materialName }}
</view>
</view>
</view>
<view class="item-tags">
<view class="item-tag u-font-20">
标签
</view>
<view class="item-tag u-font-20">
标签
<view class="item-tags">
<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 v-if="activeStatus === 1">
<view class="u-p-t-24 u-p-b-24">已上架：300款</view>
<view class="entrust bg-fff u-p-30">
<view class="u-p-t-24 u-p-b-24">已上架：{{ pageOptions.pages }}款</view>
<view class="entrust bg-fff u-p-30" v-for="(item,index) in computedList" >
<view class="entrust-title u-flex">
<text class="u-flex-1 u-p-l-30">
加厚荷兰绒绒布布料(3)
{{ item.label}}
</text>
<u-icon name="arrow-down"
color="#000" size="40"
@click="triggerToggle()"
@click="triggerToggle(index)"
/>
</view>
<view class="u-flex u-p-t-30">
<view class="item u-flex-1 u-flex u-p-l-30">
<view class="u-flex u-p-t-30" v-for="item in item.children">
<view class="item u-flex-1 u-flex u-p-l-30" @click="goItem(item)">
<view class="item-img"></view>
<view class="u-flex-1 u-p-l-20">
<view class="item-title u-line-1 u-font-28">男装-上装-青年-时尚休闲</view>
<view class="item-title u-line-1 u-font-28">{{ item.materialName }}</view>
<view class="u-flex u-m-t-6 u-m-b-6">
<view class="u-m-r-40 label u-font-24">款号</view>
<view class="u-line-1 u-flex-1 content u-font-24">
11
{{ item.styleCode }}
</view>
</view>
<view class="u-flex u-m-t-6 u-m-b-6">
<view class="u-m-r-40 label u-font-24">所选面料</view>
<view class="u-line-1 u-flex-1 content u-font-24">
11
{{ item.materialName }}
</view>
</view>
<view class="item-tags">
<view class="item-tag u-font-20">
标签
</view>
<view class="item-tag u-font-20">
标签
<view class="item-tag u-font-20" :key="tag.id"
v-for="(tag) in item.styleLibraryTagVOList">
{{ tag.materialTagName }}
</view>
</view>
</view>
......@@ -119,43 +118,48 @@
</view>
</view>
<view v-if="activeStatus === 2">
<view class="u-p-t-24 u-p-b-24">全部：300款</view>
<view class="entrust bg-fff u-p-30">
<view class="entrust-title u-flex">
<view class="entrust-tip"></view>
<text class=" u-flex-1 u-p-l-30">
加厚荷兰绒绒布布料(3)
</text>
<text>已上架</text>
</view>
<view class="u-flex u-p-t-30">
<view class="item u-flex-1 u-flex u-p-l-30">
<view class="item-img"></view>
<view class="u-flex-1 u-p-l-20">
<view class="u-flex u-m-t-6 u-m-b-6">
<view class="u-m-r-40 label ">款号</view>
<view class="u-line-1 u-flex-1 content">
11
</view>
<view class="u-p-t-24 u-p-b-24">全部：{{ pageOptions.pages }}款</view>
<view v-for="item in list" @click="goItem(item)" :key="item.id">
<view class="entrust bg-fff u-p-30">
<view class="entrust-title u-flex">
<view class="entrust-tip"></view>
<text class=" u-flex-1 u-p-l-30">
{{
item.styleTag
}}
</text>
<text>{{item.putawayStatus | putawayStatusFilter}}</text>
</view>
<view class="u-flex u-p-t-30">
<view class="item u-flex-1 u-flex u-p-l-30">
<view class="item-img">
<!-- <image :src="`${$IMG_URL}${item.pci}`"></image>-->
</view>
<view class="u-flex u-m-t-6 u-m-b-6">
<view class="u-m-r-40 label">所选面料</view>
<view class="u-line-1 u-flex-1 content">
11
<view class="u-flex-1 u-p-l-20">
<view class="u-flex u-m-t-6 u-m-b-6">
<view class="u-m-r-40 label ">款号</view>
<view class="u-line-1 u-flex-1 content">
{{ item.styleCode }}
</view>
</view>
</view>
<view class="item-tags">
<view class="item-tag u-font-20">
标签
<view class="u-flex u-m-t-6 u-m-b-6">
<view class="u-m-r-40 label">所选面料</view>
<view class="u-line-1 u-flex-1 content">
{{ item.materialName }}
</view>
</view>
<view class="item-tag u-font-20">
标签
<view class="item-tags">
<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>
......@@ -164,12 +168,15 @@
<view class="custom-style-round-circle custom-style-btn custom-style"
>
<view class="custom-style-left save">删除</view>
<view class="custom-style-right submit">
一键上架(3)
<view class="custom-style-right submit" @click="submit">
一键上架({{selected.length}})
</view>
</view>
</view>
</view>
<!--提示-->
<u-toast ref="uToast" />
</view>
</template>
......@@ -185,13 +192,103 @@ export default {
activeStatus: 0,
statusList: [
{label: '待上架', value: '1'},
{label: '已上架', value: '2'},
{label: '全部', value: '3'},
]
{label: '待上架', value: '2'},
{label: '已上架', value: '3'},
{label: '全部', value: '1'},
],
selected: [],
hideList: [],
list:[],
pageOptions: {
current: 1,
size: 10,
pages: 0,
},
}
},
computed:{
computedList(){
function arr2Tree(data,id = 'materialName'){
const newList = [], map = Array.from(
new Set(
data.map(item =>{
return item[id]
})
)
) ;
for (let i = 0; i < data.length; i++) {
let item = data[i],
name = item[id],
index = map.indexOf(name);
if(newList[index]){
newList[index]['children'].push(item)
}else{
newList.push({
label: name,
children: [item]
})
}
}
return newList;
}
return arr2Tree(this.list).map((item) => {
return {
...item,
show: true
}
})
},
selectedIds(){
return this.selected.map((item) => item.id);
}
},
filters:{
putawayStatusFilter(v){
switch (v) {
case 1:
return '未上架'
case 2:
return '待上架'
case 3:
return '待上架'
default:
return ''
}
}
},
created() {
this.getList();
},
methods:{
goItem({id}){
this.$Router.push({
path: '/pages/material/entrustManagementItem',
query:{
id
}
})
},
submit(){
this.$http("stylelibraryorder.oneClickListing", this.selectedIds)
.then(res => {
let {
code, msg
} = res;
if(code === 200){
this.$refs['uToast'].show({
title: msg
})
this.selected = [];
this.hideList = [];
this.getList();
}else{
this.$refs['uToast'].show({
title: msg
})
}
})
},
resetPage(){
this.getHeaderHeight();
this.getFooterHeight();
......@@ -199,13 +296,77 @@ export default {
setActiveStatus(index){
this.activeStatus = index;
this.resetPage();
this.getList(true);
},
triggerSelectItem(){
checkSelectedLength({children}){
// 获取所有id
let childrenIds = children.map(item => item.id);
// 核对是否存在
return this.selectedIds.filter(id => childrenIds.indexOf(id)).length
},
triggerToggle(){
checkToggle(index){
return this.hideList.indexOf(index) > -1
},
checkSelect({children}){
let childrenIds = children.map(item => item.id);
return new Set(this.selectedIds.concat(childrenIds)).size === this.selected.length
},
// 多选 确定/取消
triggerSelectList(item){
// console.log(children)
if(!this.checkSelect(item)){
this.selected = this.selected.concat(
item.children.filter(($item) => this.selectedIds.indexOf($item.id) === -1)
);
}else{
// this.selected = this.selected.concat(
// item.children.filter(($item) => this.selectedIds.indexOf($item.id) === -1)
// );
}
},
// 单选 确定/取消
triggerSelectItem(item){
let index = this.selectedIds.indexOf(item.id);
if(index > -1){
this.selected.splice(index,1)
}else {
this.selected.push(item)
}
},
triggerToggle(index){
let $index = this.hideList.findIndex($I => $I === index);
if($index > -1){
this.hideList.splice($index,1)
}else{
this.hideList.push(index)
}
},
// 触底加载更多
onReachBottom() {
if (this.pageOptions.current < this.pageOptions.pages) {
this.pageOptions.current += 1;
this.getList();
}
},
getList(isReload = false){
this.$http("stylelibraryorder.getToShelvesManagerList",{
status: this.statusList[this.activeStatus].value,
...this.pageOptions
})
.then(res => {
let { code, data } = res;
if (code === 200) {
if(Object.keys(data).length > 0){
this.list = isReload ? data.records: this.list.concat(data.records);
this.pageOptions.pages = data.total;
this.loadStatus = this.list.length < data.total ? 'loadmore' : 'nomore';
}else{
this.list = [];
this.pageOptions.pages = 0;
this.loadStatus = 'nomore';
}
}
})
},
goEntrustList(){
this.$Router.push({
......@@ -227,7 +388,7 @@ $main-color: #fff;
flex-direction: $direction;
/* #endif */
}
.active-color{ color: $color}
.active-color{ color: $activeColor}
.bg-fff{ background: #fff;}
.item{
width: 100%;
......
src/pages/material/entrustManagementItem.vue
View file @ 82fc9f6c
<template>
<view>
<view>
<u-image height="750rpx"></u-image>
<u-image height="750rpx" :src="`${$IMG_URL}${item.originalImageCode}`"></u-image>
</view>
<view class="u-p-t-20 u-p-r-30 u-p-l-30 ">
<view class="bg-fff u-p-t-20 u-p-r-30 u-p-b-30 u-p-l-30 item">
<view class="u-flex">
<text class="u-flex-1">男装-上装-青年-时尚</text>
<text class="active">待上架</text>
<text class="u-flex-1">{{ item.styleTag}}</text>
<text class="active">{{item.status | filterStatus}}</text>
</view>
<view class="u-flex">
<text class="u-flex-1 u-font-28">AS23124</text>
<text class="u-flex-1 u-font-28">{{ item.styleCode}}</text>
<text class="u-font-24">
加入日期：2021-12-11
加入日期：{{ item.createTime.split(' ')[0]}}
</text>
</view>
<view class="item-tags">
<view class="item-tag u-font-20">
标签
</view>
<view class="item-tag u-font-20">
标签
<view class="item-tag u-font-20"
:key="tag.id"
v-for="tag in item.styleLibraryTagVOList">
{{ tag.materialTagName }}
</view>
</view>
</view>
<view class="bg-fff u-p-r-30 u-p-b-30 u-p-l-30 item">
<view class="bg-fff u-p-r-30 u-p-b-30 u-p-l-30 item ">
<view class="u-border-bottom u-line-88">所选面料</view>
<view class="u-m-t-30 u-m-b-56">
<hs-material-thumbnail :item="item"></hs-material-thumbnail>
<hs-material-thumbnail :item="materialInfo"></hs-material-thumbnail>
</view>
<view class="u-flex">
<view class="u-flex base-line ">
<view class="">
<view>主图颜色</view>
<view class="image">
<image src="" style="width: 100%;height: 100%"></image>
<view class="image-tip u-line-1">颜色</view>
<image :src="`${$IMG_URL}${mainPic.fileCode}`" style="width: 100%;height: 100%"></image>
<view class="image-tip u-line-1">{{mainPic.describes}}</view>
</view>
</view>
<view class="overflow u-flex-1">
<view>其他颜色</view>
<view>
<view class="image u-m-r-10">
<image src="" style="width: 100%;height: 100%"></image>
<view class="image-tip u-line-1">颜色</view>
</view>
<view class="image u-m-r-10">
<image src="" style="width: 100%;height: 100%"></image>
<view class="image-tip u-line-1">颜色</view>
</view>
<view class="image u-m-r-10">
<image src="" style="width: 100%;height: 100%"></image>
<view class="image-tip u-line-1">颜色</view>
<view class="image u-m-r-10" v-for="pic in subPic" :key="pic.id">
<image :src="`${$IMG_URL}${item.fileCode}`" style="width: 100%;height: 100%"></image>
<view class="image-tip u-line-1">{{pic.describes}}</view>
</view>
</view>
</view>
......@@ -67,7 +58,60 @@ export default {
components: {HsMaterialThumbnail},
data(){
return{
item:{}
item:{
createTime: '',
colourApiList: []
}
}
},
computed:{
mainPic(){
return this.item.colourApiList.filter((item) => item.isMain)[0]
},
subPic(){
return this.item.colourApiList.filter((item) => !item.isMain)
},
materialInfo(){
let item = this.item.materialInfo || {};
return Object.assign({}, item,{
materialCategory: item.category,
materialDoorWidth: item.fabricWidth,
materialElement: item.saoriStandard,
})
}
},
filters:{
filterStatus(v){
// 1-待领取、2-待处理、3-待审核、4-已启动、5-已停用
switch (v) {
case 1:
return '待领取'
case 2:
return '待处理'
case 3:
return '待审核'
case 4:
return '已启动'
case 5:
return '已停用'
}
}
},
created() {
let { id} =this.$Route.query;
this.getItem(id);
},
methods:{
getItem(id){
this.$http("stylelibraryorder.getStyleDetails",id)
.then(res =>{
let{
code, data
} = res;
if(code === 200){
this.item = data;
}
})
}
}
}
......@@ -78,7 +122,7 @@ $h-color: #AF8D66;
$activeColor: #DDA973;
$color: rgba(175,141,102,0.10);
$main-color: #fff;
.base-line{ align-items: baseline;}
.u-line-88{
line-height: 88rpx;
}
......
src/pages/material/mixins/material.js 0 → 100644
View file @ 82fc9f6c
export default {
data(){
return {
MaterialList: [],
materialDetail: {}
}
},
computed:{
title(){
return this.materialDetail.materialName;
},
},
methods:{
getMaterialList(){
this.$http("materialinfo.getMaterialList",{
isDisabled: false,
materialType: "面料",
current: 1,
size: 10,
}).then(res =>{
let {
code, data
} = res;
if(code === 200){
this.MaterialList = data.page.records;
}
})
},
// 获取面料详情
getMaterialItem(id,callback){
this.$http("materialinfo.getMaterialById", id)
.then(res =>{
let {
code, data
} = res;
if(code === 200){
if(callback){
callback(data)
}else{
this.materialDetail = data;
}
}
})
},
}
}
src/pages/material/mixins/step.js 0 → 100644
View file @ 82fc9f6c
export default {
data(){
return{
offset :{
x: 0
},
startTime: 0,
lineStepWidth: 0,
lineWidth: 0,
lineOffset: 0,
}
},
computed:{
// 角度
angle(){
let { lineOffset,offset,lineWidth} = this;
let left = (offset.x - lineOffset.left) / lineWidth * 100;
return Math.ceil((left-50) / 50 * 180);
},
},
methods:{
// 重置调整的进度条
initStep(){
this.uGetRect("#line").then(res => {
this.lineWidth = res.width;
this.lineOffset = {
left: res.left,
right: res.right,
};
this.offset.x = res.width / 2 + res.left;
})
this.uGetRect("#line-step").then(res => {
this.lineStepWidth = res.width;
})
},
resetStep(){
this.offset.x = this.lineWidth / 2 + this.lineOffset.left;
},
touchMove(e){
let left = e.changedTouches[0].pageX;
this.offset.x = this.filterStartEnd(left)
},
touchEnd(e){
let left = e.changedTouches[0].pageX;
this.offset.x = this.filterStartEnd(left)
},
touchStart(e){
this.offset.x = e.changedTouches[0].pageX;
},
filterStartEnd(num){
let { left,right } = this.lineOffset;
if(num < left){
return left
}else if(num > right){
return right
}else{
return num
}
}
},
mounted() {
this.initStep()
},
}
src/pages/material/selectType.vue
View file @ 82fc9f6c
......@@ -174,6 +174,7 @@ export default {
this.loadStatus = 'loading';
this.$http('stylelibraryorder.page', {
styleTag: this.keyword,
status: 0,
materialTagIdList,
...this.pageOptions
}).then(res => {
......
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