Skip to content

H
hs-app-project
Commit 0e61cd66 authored by DongRuifen's avatar DongRuifen
Browse files
Options

列表接口

parent 8109be76
Hide whitespace changes
Inline Side-by-side
Showing with 522 additions and 340 deletions
src/config/request/apiList/plm/index.js
View file @ 0e61cd66
/*
* @Author: your name
* @Date: 2022-01-14 11:42:25
* @LastEditTime: 2022-01-14 13:56:35
* @LastEditors: your name
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /hs-app-project/src/config/request/apiList/plm/index.js
*/
import stylelibraryorder from './stylelibraryorder/index'
import modelingtask from './modelingtask'
import mobileBrand from './mobileBrand'
export default {
...stylelibraryorder,
...modelingtask
...modelingtask,
...mobileBrand
}
src/config/request/apiList/plm/mobileBrand/index.js 0 → 100644
View file @ 0e61cd66
/*
* @Author: your name
* @Date: 2022-01-14 13:55:11
* @LastEditTime: 2022-01-14 16:50:17
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /hs-app-project/src/config/request/apiList/plm/mobileBrand/index.js
*/
import config from "../config/index";
let className = 'mobileBrand'
let baseUrl = `${config.baseUrl}/${className}`
export default {
[className]:{
'dailyNewStylePage': {
url: `${baseUrl}/dailyNewStylePage`,
method: "post",
},
'stylePage': {
url: `${baseUrl}/stylePage`,
method: "post",
},
'styleDetail': {
url: `${baseUrl}/styleDetail`,
method: "get",
},
}
}
\ No newline at end of file
src/pages/brands/brands.vue
View file @ 0e61cd66
......@@ -6,13 +6,9 @@
<u-navbar title="" :border-bottom="false" :background="background">
<template slot="right">
<!-- 插槽搜索按钮 -->
<view @click="searchCli" class="u-m-r-24 search"
><image
class="hs-img"
src="../../static/images/home/search@2x.png"
mode=""
></image
></view>
<view @click="searchCli" class="u-m-r-24 search">
<image class="hs-img" src="../../static/images/home/search@2x.png" mode=""></image>
</view>
</template>
</u-navbar>
</view>
......@@ -24,13 +20,16 @@
</view>
<view slot="body">
<view class="imgList">
<image v-for="item,index in dailyNewStyleList" :key="index" :src="`${imgUrl}${item.originalImageCode}`"
mode=""></image>
<!--
<image src="../../static/images/brank/mei1.jpg" mode=""></image>
<image src="../../static/images/brank/mei1.jpg" mode=""></image>
<image src="../../static/images/brank/mei1.jpg" mode=""></image>
<image src="../../static/images/brank/mei1.jpg" mode=""></image>
<image src="../../static/images/brank/mei1.jpg" mode=""></image>
<image src="../../static/images/brank/mei1.jpg" mode=""></image>
<image src="../../static/images/brank/mei1.jpg" mode=""></image>
<image src="../../static/images/brank/mei1.jpg" mode=""></image> -->
</view>
</view>
</u-card>
......@@ -43,10 +42,10 @@
</view>
<view slot="body">
<view class="hotFlex">
<hot-style v-if="hotStylePage.records.length>0" :recordsList="hotStylePage.records"></hot-style>
<!-- <hot-style></hot-style>
<hot-style></hot-style>
<hot-style></hot-style>
<hot-style></hot-style>
<hot-style></hot-style>
<hot-style></hot-style> -->
</view>
</view>
</u-card>
......@@ -55,73 +54,114 @@
</template>
<script>
import headTitle from "./components/header"; //每日更新头部的东西
import hotStyle from "./components/hotStyle"; //热门款式
export default {
components: { headTitle, hotStyle },
data() {
return {
background: { backgroundColor: "rgba(245,245,245,0)" },
};
},
methods: {
// 搜索按钮
searchCli() {
this.$router.push("/pages/home/search");
import headTitle from "./components/header"; //每日更新头部的东西
import hotStyle from "./components/hotStyle"; //热门款式
export default {
components: {
headTitle,
hotStyle
},
data() {
return {
fabricObj: "",
dailyNewStyleList: [],
hotStylePage: [],
imgUrl: this.$IMG_URL, // 上传地址
background: {
backgroundColor: "rgba(245,245,245,0)"
},
};
},
headTab() {
this.$router.push("pages/brands/everyDay");
created() {
console.log("ces");
this.getList()
},
},
};
methods: {
// 搜索按钮
searchCli() {
this.$router.push("/pages/home/search");
},
headTab() {
this.$router.push("pages/brands/everyDay");
// this.$router.push("pages/brands/detail");
},
getList() {
let param = {
"current": 1,
"size": 10,
"styleTag": ""
}
this.$http('mobileBrand.stylePage', param).then(res => {
let {
code,
data
} = res;
if (code === 200) {
this.dailyNewStyleList = data.dailyNewStyleList;
this.hotStylePage = data.hotStylePage;
}
});
}
},
};
</script>
<style lang="scss" scoped>
//头部
.back_img {
height: 486rpx;
width: 100%;
background: url(../../static/images/home/exhibition.png) no-repeat;
background-size: 100% 100%;
}
.search {
width: 60rpx;
height: 60rpx;
}
//每日更新
.everyUpdate {
width: 100%;
::v-deep .u-card__body {
padding: 0rpx 0rpx 40rpx 36rpx !important;
//头部
.back_img {
height: 486rpx;
width: 100%;
background: url(../../static/images/home/exhibition.png) no-repeat;
background-size: 100% 100%;
}
::v-deep .u-card__head {
padding-bottom: 34rpx !important;
.search {
width: 60rpx;
height: 60rpx;
}
.imgList {
overflow-x: auto;
white-space: nowrap;
image {
width: 240rpx;
height: 160rpx;
border-radius: 5px;
padding-left: 20.3rpx;
//每日更新
.everyUpdate {
width: 100%;
::v-deep .u-card__body {
padding: 0rpx 0rpx 40rpx 36rpx !important;
}
::v-deep .u-card__head {
padding-bottom: 34rpx !important;
}
.imgList {
overflow-x: auto;
white-space: nowrap;
display: flex;
image {
width: 240rpx;
height: 160rpx;
border-radius: 5px;
padding-left: 20.3rpx;
}
}
}
}
//热门款式
.hotstyle {
::v-deep .u-card__body {
padding-top: 24rpx !important;
}
::v-deep .u-card__head {
padding-bottom: 0rpx !important;
}
width: 100%;
.hotFlex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
//热门款式
.hotstyle {
::v-deep .u-card__body {
padding-top: 24rpx !important;
}
::v-deep .u-card__head {
padding-bottom: 0rpx !important;
}
width: 100%;
.hotFlex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
}
</style>
</style>
\ No newline at end of file
src/pages/brands/components/hotStyle.vue
View file @ 0e61cd66
<template>
<view class="hots">
<image
@click="tabdetail"
class="indexhot"
src="../../../static/images/brank/mei1.jpg"
></image>
<view class="whole">
<view class="hots" v-for="(item,index) in recordsList" :key="index" >
<image class="indexhot" :src="`${imgUrl}${item.originalImageCode}`" @click="tabdetail(item)" mode="aspectFill" ></image>
<!-- <image @click="tabdetail" class="indexhot" src="../../../static/images/brank/mei1.jpg"></image> -->
<view class="hotborder">
<view class="hotText1">男装-上装-青年-时尚休闲</view>
<view class="hotText1">{{item.styleTag}}</view>
<view class="hotText2">
<image
class="iconhot"
src="../../../static/images/brank/mei1.jpg"
></image>
<text class="wen">我的文字是dsadasdasddsads</text>
<image
class="iconLove"
src="../../../static/images/brank/blackxin.png"
v-if="ImageBool"
@click="tabImage"
></image>
<image
class="iconLove"
src="../../../static/images/brank/lightxin.png"
v-else
@click="tabImage"
></image>
<image class="iconhot" :src="`${imgUrl}${item.originalImageCode}`" mode="aspectFill" ></image>
<!-- <image class="iconhot" src="../../../static/images/brank/mei1.jpg"></image> -->
<text class="wen">{{item.materialName}}</text>
<image class="iconLove" src="../../../static/images/brank/blackxin.png" v-if="!item.isFavorite" @click="tabImage">
</image>
<image class="iconLove" src="../../../static/images/brank/lightxin.png" v-else @click="tabImage"></image>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 爱心切换的bool
ImageBool: true,
};
},
methods: {
// 点击切换心心选项
tabImage() {
this.ImageBool = !this.ImageBool;
export default {
props: {
recordsList: {
type: Array,
default: () => [],
}
},
data() {
return {
// 爱心切换的bool
ImageBool: true,
imgUrl: this.$IMG_URL, // 上传地址
};
},
created() {
console.log(this.recordsList, "recordsList");
},
// 跳转到详情
tabdetail() {
this.$router.push("pages/brands/detail?id=2");
methods: {
// 点击切换心心选项
tabImage() {
this.ImageBool = !this.ImageBool;
},
// 跳转到详情
tabdetail(item) {
// console.log("KKK");
this.$router.push("/pages/brands/detail?id=" + item.id);
// this.$router.push("pages/brands/everyDay");
},
},
},
};
};
</script>
<style lang="scss" scoped>
.hots {
height: 578rpx;
width: 330rpx;
margin-bottom: 20rpx;
.indexhot {
display: block;
height: 434rpx;
.whole{
display: flex;
flex-wrap: wrap;
}
.hots {
height: 578rpx;
width: 330rpx;
border-radius: 10rpx 10rpx 0 0;
}
.hotborder {
height: 144rpx;
border: 2rpx solid #e3e1e0;
// border-top: 0rpx !important;
border-radius: 0 0 10rpx 10rpx;
}
.hotText1 {
font-size: 24rpx;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 400;
color: rgba(0, 0, 0, 0.8);
margin: 24rpx 28rpx 0 20rpx;
}
.hotText2 {
width: 100%;
// background-color: red;
margin-top: 16rpx;
display: flex;
align-items: center;
// margin: 24rpx 0rpx 0 20rpx;
.iconhot {
width: 40rpx;
height: 40rpx;
margin-left: 20rpx;
margin-bottom: 20rpx;
margin-right: 16rpx;
// flex: 1;
.indexhot {
display: block;
height: 434rpx;
width: 330rpx;
border-radius: 10rpx 10rpx 0 0;
}
.wen {
width: 192rpx;
font-size: 24rpx;
margin-left: 10rpx;
overflow: hidden; /*超出部分隐藏*/
white-space: nowrap; /*禁止换行*/
text-overflow: ellipsis;
.hotborder {
height: 144rpx;
// width: 193rpx;
border: 2rpx solid #e3e1e0;
// border-top: 0rpx !important;
border-radius: 0 0 10rpx 10rpx;
}
.iconLove {
width: 36rpx;
height: 32rpx;
margin-left: 20rpx;
.hotText1 {
font-size: 24rpx;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 400;
color: rgba(0, 0, 0, 0.8);
margin: 24rpx 28rpx 0 20rpx;
}
.hotText2 {
width: 100%;
// background-color: red;
margin-top: 16rpx;
display: flex;
align-items: center;
// margin: 24rpx 0rpx 0 20rpx;
.iconhot {
width: 40rpx;
height: 40rpx;
margin-left: 20rpx;
}
.wen {
width: 192rpx;
font-size: 24rpx;
margin-left: 10rpx;
overflow: hidden;
/*超出部分隐藏*/
white-space: nowrap;
/*禁止换行*/
text-overflow: ellipsis;
}
.iconLove {
width: 36rpx;
height: 32rpx;
margin-left: 20rpx;
}
}
}
}
</style>
</style>
\ No newline at end of file
src/pages/brands/components/hs-material-thumbnail.vue
View file @ 0e61cd66
<template>
<view class="home_con_content_order" @click="click">
<image
<!-- <image
class="width_100 hs-height-160"
src="@/static/images/home/1@2x.png"
mode=""
></image>
></image> -->
<!-- <image class="width_100 hs-height-160" :src="`${imgUrl}${fileCode}`"> -->
<template v-for="item,index in colourApiList">
<image :key="index" v-if="item.isMain" class="width_100 hs-height-160" :src="`${imgUrl}${item.fileCode}`" />
</template>
<view class="order_tit">
<view class="u-flex justify-between u-font-32">
<span class="color_DDA973 u-line-1"
>{{ item.materialName }}加厚荷兰绒绒布布料</span
>
<span class="color_DDA973 u-line-1">{{ item.materialName }}
<!-- 加厚荷兰绒绒布布料 -->
</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-r-10">{{ item.category }}</span>
|
<span class="u-m-l-10 u-m-r-10">{{ item.materialDoorWidth }} cm</span>
<span class="u-m-l-10 u-m-r-10">{{ item.clothWidth }} cm</span>
|
<span class="u-m-l-10">{{ item.materialElement }}</span>
<span class="u-m-l-10">{{ item.component }}</span>
</view>
</view>
</view>
</template>
<script>
export default {
name: "hs-material-thumbnail",
props: {
item: {
type: Object,
default: () => {},
export default {
name: "hs-material-thumbnail",
props: {
item: {
type: Object,
default: () => {},
},
colourApiList: {
type: Array,
default: []
}
},
data() {
return {};
},
},
data() {
return {};
},
methods: {
click() {
this.$emit("click");
methods: {
click() {
this.$emit("click");
},
},
},
};
};
</script>
<style scoped lang="scss">
.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;
.home_con_content_order {
position: relative;
display: flex;
justify-content: center;
padding: 20rpx;
flex: 1;
height: 100%;
background: rgba(17, 21, 30, 0.5);
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);
}
}
}
.width_30 {
width: 30%;
}
.color_DDA973 {
color: #dda973;
}
.width_30 {
width: 30%;
}
.color_6F6F72 {
color: #6f6f72;
}
.color_DDA973 {
color: #dda973;
}
.bd_dashed {
position: relative;
}
.color_6F6F72 {
color: #6f6f72;
}
.bd_dashed:after {
border-width: 1px;
}
.bd_dashed {
position: relative;
}
.bd_dashed:after {
border-width: 1px;
}
.bd_dashed-bottom:after,
.bd_dashed-left:after,
.bd_dashed-right:after,
.bd_dashed-top-bottom:after,
.bd_dashed-top:after,
.bd_dashed:after {
content: " ";
position: absolute;
left: 0;
top: 0;
pointer-events: none;
box-sizing: border-box;
transform-origin: 0 0;
width: 199.8%;
height: 199.7%;
transform: scale(0.5, 0.5);
border: 1px dashed #e4e7ed;
z-index: 2;
}
.bd_dashed-bottom:after,
.bd_dashed-left:after,
.bd_dashed-right:after,
.bd_dashed-top-bottom:after,
.bd_dashed-top:after,
.bd_dashed:after {
content: " ";
position: absolute;
left: 0;
top: 0;
pointer-events: none;
box-sizing: border-box;
transform-origin: 0 0;
width: 199.8%;
height: 199.7%;
transform: scale(0.5, 0.5);
border: 1px dashed #e4e7ed;
z-index: 2;
}
.ov_hiden {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
.ov_hiden {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
\ No newline at end of file
src/pages/brands/detail.vue
View file @ 0e61cd66
......@@ -3,7 +3,7 @@
<!-- <u-navbar title="" :border-bottom="false" :background="background">
</u-navbar> -->
<view>
<u-image height="750rpx" src="@/static/images/brank/deImg.png"></u-image>
<u-image height="750rpx" :src="`${imgUrl}${tabledata.originalImageCode}`"></u-image>
</view>
<view class="u-p-r-30 u-p-l-30">
<!--款式信息 -->
......@@ -11,36 +11,36 @@
<view class="u-border-bottom u-line-88">款式信息</view>
<view class="fabric u-m-t-24">
<text class="textStyle1">产品款号</text>
<text class="textStyle2">AS23124</text>
<text class="textStyle2">{{tabledata.styleCode}}</text>
</view>
<view class="fabric u-m-t-8">
<text class="textStyle1">面料供应商</text>
<text class="textStyle2">AS23124</text>
<text class="textStyle2">{{tabledata.supplierName}}</text>
</view>
</view>
<!-- 面料信息 -->
<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">
<material :item="item"></material>
<material :item="item" :colourApiList="tabledata.colourApiList"></material>
</view>
<!-- 其他颜色 -->
<view class="u-flex">
<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 u-m-r-10" v-for="item,index in tabledata.colourApiList" :key="index">
<image v-if="item.isMain" :src="`${imgUrl}${item.fileCode}`" style="width: 100%; height: 100%"></image>
<view class="image-tip u-line-1">颜色</view>
</view>
<view class="image u-m-r-10">
<!-- <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> -->
</view>
</view>
</view>
......@@ -53,97 +53,144 @@
</template>
<script>
import material from "./components/hs-material-thumbnail.vue";
export default {
components: { material },
data() {
return {
item: {},
};
},
};
import material from "./components/hs-material-thumbnail.vue";
export default {
components: {
material
},
data() {
return {
tabledata:{},
item: {},
id: "",
imgUrl: this.$IMG_URL, // 上传地址
};
},
watch: {
id: {
handler() {
console.log("oid");
this.detail()
}
}
},
created() {
this.detail()
},
onLoad(options) {
this.id = options.id;
},
methods: {
detail() {
let param = {
id: this.id
}
this.$http('mobileBrand.styleDetail', param).then(res => {
let {
code,
data
} = res;
if (code === 200) {
this.tabledata=data
this.item=data.materialInfo
}
});
}
},
};
</script>
<style scoped lang="scss">
$h-color: #af8d66;
$activeColor: #dda973;
$color: rgba(175, 141, 102, 0.1);
$main-color: #fff;
// 款式信息
.textStyle1 {
display: inline-block;
width: 160rpx;
color: rgba(0, 0, 0, 0.4);
}
.textStyle2 {
margin-left: 40rpx;
font-size: 14px;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 500;
color: #333333;
}
// 我要采购布样
.sampling {
position: fixed;
bottom: 0;
width: 750rpx;
height: 100rpx;
background: #ffffff;
box-shadow: 0px -2px 3px 0px rgba(178, 182, 214, 0.1);
.u-btn {
width: 630rpx;
height: 88rpx;
background: rgba(0, 0, 0, 0.8);
border-radius: 44rpx;
color: white;
$h-color: #af8d66;
$activeColor: #dda973;
$color: rgba(175, 141, 102, 0.1);
$main-color: #fff;
// 款式信息
.textStyle1 {
display: inline-block;
width: 160rpx;
color: rgba(0, 0, 0, 0.4);
}
}
.u-line-88 {
line-height: 88rpx;
}
.bg-fff {
position: relative;
top: -10rpx;
background: #fff;
}
.item {
width: 100%;
margin-bottom: 28rpx;
&--round {
border-radius: 16rpx;
border: 1px solid rgba(0, 0, 0, 0.1);
.textStyle2 {
margin-left: 40rpx;
font-size: 14px;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 500;
color: #333333;
}
&-tag {
padding: 6rpx 2px;
background: $color;
text-align: center;
color: $h-color;
display: inline-block;
margin-right: 10rpx;
// 我要采购布样
.sampling {
position: fixed;
bottom: 0;
width: 750rpx;
height: 100rpx;
background: #ffffff;
box-shadow: 0px -2px 3px 0px rgba(178, 182, 214, 0.1);
.u-btn {
width: 630rpx;
height: 88rpx;
background: rgba(0, 0, 0, 0.8);
border-radius: 44rpx;
color: white;
}
}
}
.image {
position: relative;
width: 160rpx;
height: 160rpx;
display: inline-block;
&-tip {
text-align: center;
.u-line-88 {
line-height: 88rpx;
}
.bg-fff {
position: relative;
top: -10rpx;
background: #fff;
}
.item {
width: 100%;
height: 40rpx;
line-height: 40rpx;
background: rgba(255, 255, 255, 0.8);
font-size: 24rpx;
position: absolute;
bottom: 0;
left: 0;
margin-bottom: 28rpx;
&--round {
border-radius: 16rpx;
border: 1px solid rgba(0, 0, 0, 0.1);
}
&-tag {
padding: 6rpx 2px;
background: $color;
text-align: center;
color: $h-color;
display: inline-block;
margin-right: 10rpx;
}
}
.image {
position: relative;
width: 160rpx;
height: 160rpx;
display: inline-block;
&-tip {
text-align: center;
width: 100%;
height: 40rpx;
line-height: 40rpx;
background: rgba(255, 255, 255, 0.8);
font-size: 24rpx;
position: absolute;
bottom: 0;
left: 0;
}
}
.overflow {
overflow-x: auto;
white-space: nowrap;
}
}
.overflow {
overflow-x: auto;
white-space: nowrap;
}
</style>
</style>
\ No newline at end of file
src/pages/brands/everyDay.vue
View file @ 0e61cd66
<!--
* @Author: your name
* @Date: 2022-01-14 11:42:25
* @LastEditTime: 2022-01-14 15:24:14
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /hs-app-project/src/pages/brands/everyDay.vue
-->
<template>
<!-- 每日上新 -->
<u-card full :head-border-bottom="false">
<view slot="body">
<view class="hotFlex">
<hot-style></hot-style>
<hot-style></hot-style>
<hot-style></hot-style>
<hot-style></hot-style>
<hot-style v-if="recordsList.length>0" :recordsList="recordsList"></hot-style>
</view>
</view>
</u-card>
......@@ -19,9 +24,33 @@ export default {
hotStyle,
},
data() {
return {};
return {
recordsList:[]
};
},
created(){
console.log("ces");
this.materialDetail()
},
methods: {
materialDetail() {
let param = {
"current": 1,
"size": 10,
"styleTag": ""
}
this.$http('mobileBrand.dailyNewStylePage', param).then(res => {
let {
code,
data
} = res;
if (code === 200) {
this.recordsList = data.records;
console.log(this.recordsList,"this.recordsList");
}
});
}
},
methods: {},
};
</script>
......
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