Skip to content

H
hs-app-project
Commit 3614b9d3 authored by 阮藤's avatar 阮藤
Browse files
Options

相关页面编写接口对接完成

parent c9e02d4b
Hide whitespace changes
Inline Side-by-side
Showing with 120 additions and 190 deletions
src/components/hs-material-thumbnail/hs-material-thumbnail.vue
View file @ 3614b9d3
<template> <template>
<view class="home_con_content_order" @click="click"> <view class="home_con_content_order" @click="click">
<image style="width: 100%;height: 160rpx;" src="@/static/images/home/1@2x.png" mode=""></image> <image class="width_100 hs-height-160" src="@/static/images/home/1@2x.png" mode=""></image>
<view class="order_tit"> <view class="order_tit">
<view class="u-flex justify-between u-font-32"> <view class="u-flex justify-between u-font-32">
<span class="color_DDA973 u-line-1">{{item.name}}</span> <span class="color_DDA973 u-line-1">{{ item.name }}</span>
<span><u-icon size="24" color="#fff" name="arrow-right"></u-icon></span> <span><u-icon size="24" color="#fff" name="arrow-right"></u-icon></span>
</view> </view>
<view class="u-font-24 u-m-t-20 color_6F6F72"> <view class="u-font-24 u-m-t-20 color_6F6F72">
<span class="u-m-r-10">{{item.mdmMaterialCategory}}</span> <span class="u-m-r-10">{{ item.mdmMaterialCategory }}</span>
| |
<span class="u-m-l-10 u-m-r-10">{{ item.mdmMaterialClothWidth }}cm</span> <span class="u-m-l-10 u-m-r-10">{{ item.mdmMaterialClothWidth }} cm</span>
| |
<span class="u-m-l-10">{{item.mdmMaterialComponent}}</span> <span class="u-m-l-10">{{ item.mdmMaterialComponent }}</span>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
name: "hs-material-thumbnail", name: 'hs-material-thumbnail',
props: { props: {
item: { item: {
type: Object, type: Object,
default: () => {} default: () => {}
} }
}, },
data() { data() {
return {}; return {};
}, },
methods:{ methods: {
click(){ click() {
this.$emit("click") this.$emit('click');
} }
} }
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.home_con_content_order { .home_con_content_order {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 160rpx; height: 160rpx;
border-radius: 8rpx; border-radius: 8rpx;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
.order_tit { .order_tit {
position: absolute; position: absolute;
width: 75%; width: 75%;
right: 0; right: 0;
flex-direction: column; flex-direction: column;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 20rpx; padding: 20rpx;
flex: 1; flex: 1;
height: 100%; height: 100%;
background: rgba(17, 21, 30, 0.5); background: rgba(17, 21, 30, 0.5);
} }
} }
.width_30 { .width_30 {
width: 30%; width: 30%;
}
.ht_136 {
height: 136rpx;
}
.ft-size-24 {
font-size: 24rpx;
}
.ft-size-28 {
font-size: 28rpx;
}
.ft-size-32 {
font-size: 32rpx;
} }
.color_DDA973 { .color_DDA973 {
color: #dda973; color: #dda973;
} }
.color_6F6F72 { .color_6F6F72 {
color: #6f6f72; color: #6f6f72;
}
.color_fff08 {
color: rgba(255, 255, 255, 0.8);
}
.color_00004 {
color: rgba(0, 0, 0, 0.4);
}
.ft-wt-700 {
font-weight: 700;
}
.bg_fff {
background: #fff;
}
.ds_flex {
display: flex;
}
.fx_wrap {
flex-wrap: wrap;
}
.fx_dir_column {
flex-direction: column;
}
.jt_con_center {
justify-content: center;
}
.jt_con_sp_between {
justify-content: space-between;
}
.bd_rad_8 {
border-radius: 8rpx !important;
}
.txt_center {
text-align: center;
}
.ps_relative {
position: relative;
}
.ps_absolute {
position: absolute;
} }
.bd_dashed { .bd_dashed {
position: relative; position: relative;
} }
.bd_dashed:after { .bd_dashed:after {
border-width: 1px; border-width: 1px;
} }
.bd_dashed-bottom:after, .bd_dashed-bottom:after,
...@@ -154,24 +86,23 @@ export default { ...@@ -154,24 +86,23 @@ export default {
.bd_dashed-top-bottom:after, .bd_dashed-top-bottom:after,
.bd_dashed-top:after, .bd_dashed-top:after,
.bd_dashed:after { .bd_dashed:after {
content: ' '; content: ' ';
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
pointer-events: none; pointer-events: none;
box-sizing: border-box; box-sizing: border-box;
transform-origin: 0 0; transform-origin: 0 0;
width: 199.8%; width: 199.8%;
height: 199.7%; height: 199.7%;
transform: scale(0.5, 0.5); transform: scale(0.5, 0.5);
border: 1px dashed #e4e7ed; border: 1px dashed #e4e7ed;
z-index: 2; z-index: 2;
} }
.ov_hiden { .ov_hiden {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
</style> </style>
src/pages/home/fabricDetails.vue
View file @ 3614b9d3
...@@ -6,15 +6,15 @@ ...@@ -6,15 +6,15 @@
<view class="content u-p-30"> <view class="content u-p-30">
<!-- 面料基本信息 --> <!-- 面料基本信息 -->
<view class="fabric_tit u-p-30"> <view class="fabric_tit u-p-30">
<view class="color_DDA973 u-font-32">{{fabricObj.materialName}}</view> <view class="color_DDA973 u-font-32">{{materialInfo.materialName}}</view>
<view class="u-font-24 u-m-t-20 color_fff08"> <view class="u-font-24 u-m-t-20 color_fff08">
<span class="u-m-r-10">{{fabricObj.materialCategory}}</span> <span class="u-m-r-10">{{materialInfo.category}}</span>
| |
<span class="u-m-l-10 u-m-r-10">{{fabricObj.materialDoorWidth}}</span> <span class="u-m-l-10 u-m-r-10">{{materialInfo.clothWidth}} cm</span>
| |
<span class="u-m-l-10">{{fabricObj.materialElement}}</span> <span class="u-m-l-10">{{materialInfo.component}}</span>
</view> </view>
<view class="u-m-t-20"><image v-for="item in fabricObj.materialPictureList" class="img_120 u-m-r-30" :src="item.fileCode" mode=""></image></view> <view class="u-m-t-20"><image v-for="item in materialInfo.materialPictureList" class="img_120 u-m-r-30" :src="item.fileCode" mode=""></image></view>
</view> </view>
<!-- 建模信息 --> <!-- 建模信息 -->
<view class="modeling_tit u-p-30"> <view class="modeling_tit u-p-30">
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
<view class="ds_flex jt_con_center fx_dir_column ht_136"> <view class="ds_flex jt_con_center fx_dir_column ht_136">
<view class="ds_flex"> <view class="ds_flex">
<span class="width_30 color_00004">检测服务商</span> <span class="width_30 color_00004">检测服务商</span>
<!-- TODO 后期修改 -->
<span class="flex-sub">{{fabricObj.supplierId}}</span> <span class="flex-sub">{{fabricObj.supplierId}}</span>
</view> </view>
<view class="ds_flex u-m-t-8"> <view class="ds_flex u-m-t-8">
...@@ -85,6 +86,11 @@ export default { ...@@ -85,6 +86,11 @@ export default {
this.id = option.id this.id = option.id
this.materialDetail(); this.materialDetail();
}, },
computed:{
materialInfo(){
return this.fabricObj.materialInfo
}
},
methods: { methods: {
seeStyleDetails(item) { seeStyleDetails(item) {
this.$Router.push('/pages/home/styleDetails'); this.$Router.push('/pages/home/styleDetails');
......
src/pages/home/fabricList.vue
View file @ 3614b9d3
...@@ -9,22 +9,7 @@ ...@@ -9,22 +9,7 @@
<view> <view>
<view class="u-m-t-30" v-for="item in fiabricList"> <view class="u-m-t-30" v-for="item in fiabricList">
<!-- 后期用公共组件 fabricTitle --> <!-- 后期用公共组件 fabricTitle -->
<view class="home_con_content_order" @click="click"> <hs-material-thumbnail :item="filterFiabric(item)"></hs-material-thumbnail>
<image style="width: 100%;height: 160rpx;" src="@/static/images/home/1@2x.png" mode=""></image>
<view class="order_tit">
<view class="u-flex justify-between u-font-32">
<span class="color_DDA973 u-line-1">{{ item.materialName }}</span>
<span><u-icon size="24" color="#fff" name="arrow-right"></u-icon></span>
</view>
<view class="u-font-24 u-m-t-20 color_6F6F72">
<span class="u-m-r-10">{{ item.materialCategory }}</span>
|
<span class="u-m-l-10 u-m-r-10">{{ item.materialClothWidth }}cm</span>
|
<span class="u-m-l-10">{{ item.materialComponent }}</span>
</view>
</view>
</view>
</view> </view>
</view> </view>
</view> </view>
...@@ -54,6 +39,15 @@ export default { ...@@ -54,6 +39,15 @@ export default {
} }
}, },
methods: { methods: {
filterFiabric(item) {
return {
...item,
name: item.materialName,
mdmMaterialComponent: item.materialElement,
mdmMaterialClothWidth: item.materialDoorWidth,
mdmMaterialCategory: item.materialCategory,
};
},
searchCli() { searchCli() {
this.size = 5; this.size = 5;
this.materialList(); this.materialList();
......
src/pages/home/sampleConfirmation.vue
View file @ 3614b9d3
...@@ -8,7 +8,6 @@ ...@@ -8,7 +8,6 @@
<view @click="nextCli" :class="{ color_ccc: sum == total }">下一个</view> <view @click="nextCli" :class="{ color_ccc: sum == total }">下一个</view>
</view> </view>
<!-- 内容 --> <!-- 内容 -->
<!-- style="border-radius: 20rpx;" -->
<view class="u-m-20 bg_fff" style="border-radius: 20rpx;"> <view class="u-m-20 bg_fff" style="border-radius: 20rpx;">
<view class="sample_title u-p-l-30 u-p-r-30"> <view class="sample_title u-p-l-30 u-p-r-30">
<span class="u-font-32">委托单信息</span> <span class="u-font-32">委托单信息</span>
...@@ -37,7 +36,8 @@ ...@@ -37,7 +36,8 @@
<span class="u-font-24 color_DDA973">（新建面料，已同步面料建模）</span> <span class="u-font-24 color_DDA973">（新建面料，已同步面料建模）</span>
</view> </view>
<view class="u-m-t-30"> <view class="u-m-t-30">
<view class="home_con_content_order" @click="click"> <hs-material-thumbnail :item="mdmMaterial"></hs-material-thumbnail>
<!-- <view class="home_con_content_order" @click="click">
<image style="width: 100%;height: 160rpx;" src="@/static/images/home/1@2x.png" mode=""></image> <image style="width: 100%;height: 160rpx;" src="@/static/images/home/1@2x.png" mode=""></image>
<view class="order_tit"> <view class="order_tit">
<view class="u-flex justify-between u-font-32"> <view class="u-flex justify-between u-font-32">
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
<span class="u-m-l-10">{{ tableData.mdmMaterialComponent }}</span> <span class="u-m-l-10">{{ tableData.mdmMaterialComponent }}</span>
</view> </view>
</view> </view>
</view> </view> -->
</view> </view>
</view> </view>
</view> </view>
...@@ -75,11 +75,19 @@ export default { ...@@ -75,11 +75,19 @@ export default {
tableData: {} tableData: {}
}; };
}, },
computed: {
mdmMaterial() {
return {
name: this.tableData.mdmMaterialName,
...this.tableData
};
}
},
onLoad(option) { onLoad(option) {
console.log(option); console.log(option);
this.abolishIds = option.abolishIds.split(','); this.abolishIds = option.abolishIds.split(',');
this.total = this.abolishIds.length; this.total = this.abolishIds.length;
this.detail() this.detail();
}, },
methods: { methods: {
detail() { detail() {
...@@ -126,28 +134,6 @@ export default { ...@@ -126,28 +134,6 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.home_con_content_order {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
height: 160rpx;
border-radius: 8rpx;
overflow: hidden;
width: 100%;
.order_tit {
position: absolute;
width: 75%;
right: 0;
flex-direction: column;
display: flex;
justify-content: center;
padding: 20rpx;
flex: 1;
height: 100%;
background: rgba(17, 21, 30, 0.5);
}
}
.bd_top { .bd_top {
border-top: 1px solid #f6f6f6; border-top: 1px solid #f6f6f6;
} }
......
src/pages/home/styleEntrustment.vue
View file @ 3614b9d3
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
</view> </view>
</view> </view>
<!-- tabs --> <!-- tabs -->
<u-sticky offset-top="88" class="bd_rad" style="background: #fff;"> <u-sticky offset-top="88" :enable="enable" class="bd_rad" style="background: #fff;">
<u-tabs :list="list" font-size="28" :show-bar="false" active-color="#AF8D66" :current="current" @change="change"></u-tabs> <u-tabs :list="list" font-size="28" :show-bar="false" active-color="#AF8D66" :current="current" @change="change"></u-tabs>
</u-sticky> </u-sticky>
</view> </view>
...@@ -87,7 +87,8 @@ export default { ...@@ -87,7 +87,8 @@ export default {
mixins: [dom], mixins: [dom],
data() { data() {
return { return {
statusBtn:true, enable: true,
statusBtn: true,
timeOut: null, timeOut: null,
background: { backgroundColor: 'rgba(245,245,245,0)' }, background: { backgroundColor: 'rgba(245,245,245,0)' },
modal: { modal: {
...@@ -139,6 +140,12 @@ export default { ...@@ -139,6 +140,12 @@ export default {
this.orderTicketExceptionNum(); this.orderTicketExceptionNum();
this.noSampleOrder(); this.noSampleOrder();
}, },
onShow() {
this.enable = true;
},
onHide() {
this.enable = false;
},
// 上拉加载更多 // 上拉加载更多
onReachBottom() { onReachBottom() {
if (this.total > this.entrustmentList.length) { if (this.total > this.entrustmentList.length) {
......
src/static/style/common.scss
View file @ 3614b9d3
.hs-position-relative{ .hs-position-relative{
position: relative; position: relative;
} }
.width_100{
width: 100%;
}
.height_100{
height: 100%;
}
.hs-img{ .hs-img{
width: 100%; width: 100%;
height: 100%; height: 100%;
......
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