Skip to content

H
hs-app-project
Commit 1dbd0299 authored by Zheng Shang Jun's avatar Zheng Shang Jun
Browse files
Options

品牌商移动端基本完成

parent e1b9231b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1435 additions and 1043 deletions
.gitignore
View file @ 1dbd0299
......@@ -2,6 +2,7 @@
node_modules/
unpackage/
dist/
.hbuilderx/
# local env files
.env.local
......
src/config/request/apiList/plm/mobileBrand/index.js
View file @ 1dbd0299
......@@ -11,18 +11,45 @@ import config from "../config/index";
let className = 'mobileBrand'
let baseUrl = `${config.baseUrl}/${className}`
export default {
[className]:{
[className]: {
'dailyNewStylePage': {
url: `${baseUrl}/dailyNewStylePage`,
method: "post",
},
//首页
'stylePage': {
url: `${baseUrl}/stylePage`,
method: "post",
},
//详情
'styleDetail': {
url: `${baseUrl}/styleDetail`,
method: "get",
},
// 收藏
'styleCollect': {
url: `${baseUrl}/styleCollect`,
method: "get"
},
// 取消
'cancelCollect': {
url: `${baseUrl}/cancelCollect`,
method: "post"
},
// 浏览记录
'historyViewPage': {
url: `${baseUrl}/historyViewPage`,
method: "post"
},
//我的收藏
'myCollect': {
url: `${baseUrl}/myCollect`,
method: "get"
},
// 面料商联系方式
'supplierInfo': {
url: `${baseUrl}/supplierInfo`,
method: "get"
},
}
}
\ No newline at end of file
src/manifest.json
View file @ 1dbd0299
This diff is collapsed.
src/pages.json
View file @ 1dbd0299
......@@ -533,22 +533,5 @@
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#969799",
"selectedColor": "#000",
"borderStyle": "white",
"list": [
{
"text": "首页",
"pagePath": "pages/brands/brands",
"iconPath": "static/images/home/home.png"
},
{
"text": "收藏",
"pagePath": "pages/brands/collection",
"iconPath": "static/images/home/message.png"
}
]
}
}
src/pages/brands/brands.vue
View file @ 1dbd0299
<template>
<!-- 品牌商首页 -->
<view class="brandsindex">
<!-- 展示图 -->
<view id="header" class="back_img">
<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 class="brandsindex">
<!-- 展示图 -->
<view id="header" class="back_img">
<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>
</template>
</u-navbar>
</view>
<!-- 每日上新 -->
<view class="everyUpdate">
<u-card full :head-border-bottom="false" @head-click="headTab">
<view slot="head">
<head-title title="每日上新" subtitle="DAILY NEW"></head-title>
</view>
</template>
</u-navbar>
</view>
<!-- 每日上新 -->
<view class="everyUpdate">
<u-card full :head-border-bottom="false" @head-click="headTab">
<view slot="head">
<head-title title="每日上新" subtitle="DAILY NEW"></head-title>
</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> -->
<view slot="body">
<view class="imgList">
<image
v-for="(item, index) in dailyNewStyleList"
:key="index"
:src="`${imgUrl}${item.originalImageCode}`"
mode=""
></image>
</view>
</view>
</view>
</u-card>
</view>
<!-- 热门款式 -->
<view class="hotstyle">
<u-card full :head-border-bottom="false">
<view slot="head">
<head-title title="热门款式" subtitle="HOT STYLES"></head-title>
</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> -->
</u-card>
</view>
<!-- 热门款式 -->
<view class="hotstyle">
<u-card full :head-border-bottom="false">
<view slot="head">
<head-title title="热门款式" subtitle="HOT STYLES"></head-title>
</view>
<view slot="body">
<view class="hotFlex">
<hot-style
:recordsList="hotStylePage"
@update="update"
></hot-style>
</view>
</view>
</view>
</u-card>
</u-card>
</view>
<view v-if="loadText" class="loadStyle">没有可用的数据了</view>
<!-- 导航条 -->
<hs-tab-bar></hs-tab-bar>
<!-- 底部占位符 -->
<view class="mask-template"></view>
</view>
<!-- 底部占位符 -->
<view class="mask-template"></view>
</view>
</template>
<script>
import headTitle from "./components/header"; //每日更新头部的东西
import hotStyle from "./components/hotStyle"; //热门款式
export default {
components: {
headTitle,
hotStyle,
// HsTabBar,
},
data() {
return {
fabricObj: "",
dailyNewStyleList: [],
hotStylePage: [],
imgUrl: this.$IMG_URL, // 上传地址
dailyNewStyleList: [], //每日上新的数据
hotStylePage: [], //款式的数据
imgUrl: this.$IMG_URL, // 图片前面的url
background: {
backgroundColor: "rgba(245,245,245,0)",
},
total: 0, //总页数
current: 1,
size: 10,
loadText: false,
};
},
created() {
console.log("ces");
this.getList();
// console.log("ces");
// this.getList(1, 10);
},
methods: {
// 搜索按钮
searchCli() {
this.$router.push("/pages/home/search");
},
// 每日更新跳转
headTab() {
this.$router.push("pages/brands/everyDay");
// this.$router.push("pages/brands/detail");
this.$router.push("/pages/brands/everyDay");
},
//更新
update() {
this.getList(1, 10);
},
getList() {
// 款式列表分页查询接口
getList(current, size) {
let param = {
current: 1,
size: 10,
current: current,
size: size,
styleTag: "",
};
this.$http("mobileBrand.stylePage", param).then((res) => {
let { code, data } = res;
if (code === 200) {
if (current == 1) {
this.hotStylePage = data.hotStylePage.records;
} else {
this.hotStylePage.push(...data.hotStylePage.records);
}
this.dailyNewStyleList = data.dailyNewStyleList;
this.hotStylePage = data.hotStylePage;
this.total = data.hotStylePage.total;
}
});
},
},
//上拉加载
onReachBottom() {
console.log("触发了");
//判断当前页是否到达总页数
if (this.current >= this.total) {
this.loadText = true;
} else {
this.current++;
(this.size = 5), this.getList(this.current, this.size);
}
},
};
</script>
<style lang="scss" scoped>
// 上拉加载
.loadStyle {
width: 100%;
height: 60rpx;
line-height: 60rpx;
text-align: center;
}
// 底部占位符
.mask-template {
width: 100%;
......@@ -173,9 +202,9 @@ export default {
width: 100%;
.hotFlex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
// display: flex;
// flex-wrap: wrap;
// justify-content: space-between;
}
}
</style>
src/pages/brands/browse.vue
View file @ 1dbd0299
......@@ -6,13 +6,15 @@
options 右边滑动出现删除的东西 Array
-->
<view>
<browse-item :isbrowse="true" :list="list">
<browse-item :isbrowse="true" :list="browseList" @update="update">
<!-- 头部插槽 -->
<template #title>
<text class="browseicon"><u-icon name="clock"></u-icon></text>
<text class="browseTime">2021-12-12 13:11</text>
<template v-slot:default="slots">
<u-icon name="clock" class="browseicon"></u-icon>
<text class="browseTime">{{ slots.title.viewTime }}</text>
</template>
</browse-item>
<view v-if="loadText" class="loadStyle">没有可用的数据了</view>
</view>
</template>
......@@ -22,47 +24,88 @@ export default {
components: { browseItem },
data() {
return {
list: [
{
id: 1,
title:
"wos长安回望绣成堆，山顶千门次第开，一骑红尘妃子笑，无人知是荔枝来",
images: require("../../static/images/brank/thumb.png"),
show: false,
browseImg: require("../../static/images/brank/blackxin.png"),
},
{
id: 2,
title:
"新丰绿树起黄埃，数骑渔阳探使回，霓裳一曲千峰上，舞破中原始下来",
images: require("../../static/images/brank/thumb.png"),
show: false,
browseImg: require("../../static/images/brank/blackxin.png"),
},
{
id: 3,
title: "登临送目，正故国晚秋，天气初肃。千里澄江似练，翠峰如簇",
images: require("../../static/images/brank/thumb.png"),
show: false,
browseImg: require("../../static/images/brank/blackxin.png"),
},
],
list: [],
total: 0, //总页数
current: 1,
size: 10,
loadText: false,
};
},
methods: {},
computed: {
browseList() {
let dataInfo = {};
this.list.forEach((item, index) => {
let { viewTime } = item;
if (!dataInfo[viewTime]) {
dataInfo[viewTime] = {
viewTime,
browseChild: [],
};
}
dataInfo[viewTime].browseChild.push(item);
});
return Object.values(dataInfo);
},
},
methods: {
//更新
update() {
this.browseFn(1, 10);
},
// 浏览记录接口
browseFn(current, size) {
let param = {
current: current,
size: size,
};
this.$http("mobileBrand.historyViewPage", param).then((res) => {
let { code, data } = res;
if (code === 200) {
this.list = data.records;
}
if (code === 200) {
if (current == 1) {
this.list = data.records;
} else {
this.list.push(...data.records);
}
this.total = data.hotStylePage.total;
}
});
},
},
mounted() {
this.browseFn(1, 10);
},
//上拉加载
onReachBottom() {
console.log("触发了");
//判断当前页是否到达总页数
if (this.current >= this.total) {
this.loadText = true;
} else {
this.current++;
(this.size = 5), this.browseFn(this.current, this.size);
}
},
};
</script>
<style lang="scss" scoped>
// 上拉加载
.loadStyle {
width: 100%;
height: 60rpx;
line-height: 60rpx;
text-align: center;
}
//组件头部时间图标
.browseicon {
width: 32rpx;
::v-deep .u-icon {
width: 32rpx;
height: 32rpx;
font-size: 32rpx;
color: red;
}
width: 32rpx;
height: 32rpx;
font-size: 32rpx;
color: red;
}
//组件头部时间
.browseTime {
......
src/pages/brands/collection.vue
View file @ 1dbd0299
......@@ -17,27 +17,16 @@
<browse-item
:isbrowse="false"
:edit="edit"
:list="list"
:list="collectionList"
:options="options"
@update="update"
>
<!-- 头部插槽 -->
<template #title>
<template v-slot:default="slots">
<!-- 头部title -->
<text class="flagname">加厚荷兰绒绒布布料</text>
<text class="flagname">{{ slots.title.supplierName }}</text>
</template>
</browse-item>
<!-- 弹出框 -->
<view class="posi" v-show="edit">
<view class="pop-up">
<u-checkbox-group class="checkStyle">
<u-checkbox v-model="playCheckout" name="全选" shape="circle"
>全选</u-checkbox
>
</u-checkbox-group>
<u-button size="mini" class="bttn">取消收藏</u-button>
</view>
</view>
</view>
<!-- 底部占位符 -->
<view :class="{ 'mask-template1': !edit, 'mask-template2': edit }"></view>
......@@ -50,37 +39,7 @@ export default {
components: { browseItem },
data() {
return {
list: [
{
id: 1,
title:
"wos长安回望绣成堆，山顶千门次第开，一骑红尘妃子笑，无人知是荔枝来",
images: require("@/static/images/brank/thumb.png"),
show: false, //这个传过去判断滑出删除其他的要不要关闭的
browseImg: require("@/static/images/brank/blackxin.png"),
name: "apple",
checked: false,
},
{
id: 2,
title:
"新丰绿树起黄埃，数骑渔阳探使回，霓裳一曲千峰上，舞破中原始下来",
images: require("@/static/images/brank/thumb.png"),
show: false,
browseImg: require("@/static/images/brank/blackxin.png"),
name: "banner",
checked: false,
},
{
id: 3,
title: "登临送目，正故国晚秋，天气初肃。千里澄江似练，翠峰如簇",
images: require("@/static/images/brank/thumb.png"),
show: false,
browseImg: require("@/static/images/brank/blackxin.png"),
name: "orange",
checked: false,
},
],
list: [],
options: [
{
text: "删除",
......@@ -91,12 +50,31 @@ export default {
],
// 编辑点击
edit: false,
// 弹出全选
playCheckout: false,
};
},
computed: {},
computed: {
//计算
collectionList() {
let dataInfo = {};
this.list.forEach((item, index) => {
let { supplierName } = item;
if (!dataInfo[supplierName]) {
dataInfo[supplierName] = {
supplierName,
browseChild: [],
};
}
dataInfo[supplierName].browseChild.push(item);
});
return Object.values(dataInfo);
},
},
methods: {
//更新
update() {
this.collectionFn();
},
// 编辑
editorClick() {
this.edit = true;
......@@ -105,21 +83,26 @@ export default {
completeClick() {
this.edit = false;
},
// 弹出垮选中某个复选框时，由checkbox时触发
// checkboxChange(e) {
// // 全选操作
// if (e.name == "全选") {
// if (!this.allchecked) {
// this.list.map((val) => {
// val.checked = true;
// });
// } else {
// this.list.map((val) => {
// val.checked = false;
// });
// }
// }
// },
// 我的收藏接口
collectionFn() {
this.$http("mobileBrand.myCollect").then((res) => {
let { code, data } = res;
if (code === 200) {
this.list = data;
this.list = this.list.map((el) => {
return {
...el,
show: false,
checked: false,
};
});
}
});
},
},
mounted() {
this.collectionFn();
},
};
</script>
......@@ -184,31 +167,5 @@ export default {
font-family: PingFangSC, PingFangSC-Medium;
font-weight: 700;
}
// 底部弹出的位置
.posi {
position: fixed;
bottom: 100rpx;
height: 100rpx;
width: 100%;
background-color: white;
.pop-up {
position: relative;
height: 100%;
.checkStyle {
position: absolute;
left: 59rpx;
top: 50%;
transform: translateY(-50%);
}
.bttn {
width: 160rpx;
height: 64rpx;
position: absolute;
right: 30rpx;
top: 50%;
transform: translateY(-50%);
}
}
}
}
</style>
src/pages/brands/components/browseItem.vue
View file @ 1dbd0299
<template>
<!-- 浏览记录组件和收藏 -->
<view class="browse">
<u-card :head-border-bottom="false">
<u-card
:head-border-bottom="false"
v-for="(item, index) in list"
:key="index"
>
<!-- 头部 -->
<view slot="head">
<view>
<!-- 全选框 -->
<u-checkbox-group v-if="edit">
<u-checkbox
v-model="allchecked"
name="全选"
shape="circle"
></u-checkbox>
</u-checkbox-group>
<!-- 插槽 -->
<slot name="title"></slot>
<u-icon
:name="
checkSelect(item) ? 'checkmark-circle-fill' : 'checkmark-circle'
"
v-if="edit"
class="checkstyle"
@click="allcheckFn(item)"
></u-icon>
<slot v-bind:title="item"></slot>
</view>
</view>
<!-- 主体 -->
<view slot="body">
<u-swipe-action
:show="item.show"
:index="index"
v-for="(item, index) in list"
:key="item.id"
@click="click"
:show="elData.show"
v-for="(elData, indexs) in item.browseChild"
:index="indexs"
:key="indexs"
@click="() => sliderClick(indexs, item.browseChild)"
@open="open"
:options="options"
>
<view class="item u-border-bottom">
<!-- 多选框 -->
<u-checkbox-group v-if="edit">
<u-checkbox
v-model="item.checked"
name="item.name"
shape="circle"
></u-checkbox>
</u-checkbox-group>
<u-icon
:name="
selectedIds.indexOf(elData.id) > -1
? 'checkmark-circle-fill'
: 'checkmark-circle'
"
v-if="edit"
class="checkstyle"
@click="selectItem(elData)"
></u-icon>
<!-- 照片 -->
<!-- <image class="imges" :src="item.images" /> -->
<image
class="imges"
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F09%2F3a%2Fbc%2F093abce7b31f4c8ffdbf345375ff4abb.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644931622&t=9c5aebc238749b4bc123b4663bc89cb1"
:src="`${imgUrl}${elData.originalImageCode}`"
/>
<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
<view class="title-wrap">
<view class="title">{{ item.title }}</view>
<view class="title">{{ elData.styleTag }}</view>
<!-- 款号 -->
<view class="modelno">
<text class="textStyle1">款号</text>
<text class="textStyle2">AS23124</text>
<text class="textStyle2">{{ elData.styleCode }}</text>
<!-- 是否需要爱心 -->
<view v-if="isbrowse">
<image
@click="browerClick(index)"
:src="item.browseImg"
v-if="islove"
@click="browerClick(elData)"
src="@/static/images/brank/blackxin.png"
v-if="!elData.isFavorite"
></image>
<image
@click="browerClick(index)"
@click="browerClick(elData)"
src="@/static/images/brank/lightxin.png"
v-else
></image>
......@@ -67,13 +73,34 @@
<!-- 面料 -->
<view class="fabric">
<text class="textStyle1">面料</text>
<text class="textStyle2">AS23124</text>
<text class="textStyle2">{{ elData.materialName }}</text>
</view>
</view>
</view>
</u-swipe-action>
</view>
</u-card>
<!-- 弹出框 -->
<view class="posi" v-show="edit">
<view class="pop-up">
<!-- <u-checkbox-group class="checkStyle">
<u-checkbox v-model="playCheckout" name="全选" shape="circle"
>全选</u-checkbox
>
</u-checkbox-group> -->
<u-icon
:name="playCheckout ? 'checkmark-circle-fill' : 'checkmark-circle'"
class="checkstyles"
size="42"
@click="outsideChecked"
></u-icon>
<u-button size="mini" class="bttn" @click="cancelCollection"
>取消收藏</u-button
>
</view>
</view>
</view>
</template>
......@@ -96,29 +123,115 @@ export default {
},
data() {
return {
// 爱心的黑暗显影
islove: false,
//全选
allchecked: false,
islove: false, // 爱心的黑暗显影
imgUrl: this.$IMG_URL, // 图片前面的url
selected: [], // 判断全选单选这些东西的
// playCheckout: false, // 弹出全选
};
},
computed: {
selectedIds() {
return this.selected.map((item) => item.id);
},
//监听外部全选值
playCheckout() {
let len = this.list.map((el) => {
return el.browseChild;
});
if (this.selected.length == len.flat().length) {
return true;
}
},
},
methods: {
// 爱心点击
browerClick(i, e) {
console.log(i, e);
// this.islove = !this.islove;
//判断全选按钮是否选中
checkSelect(tree) {
let childrenIds = tree.browseChild.map((item) => item.id);
return (
new Set(this.selectedIds.concat(childrenIds)).size ===
this.selected.length
);
},
//滑动删除的东西
click(index, index1) {
if (index1 == 0) {
this.list.splice(index, 1);
this.$u.toast(`删除了第${index}个cell`);
// 多选
allcheckFn(item) {
//判断全选是否被选中
if (!this.checkSelect(item)) {
this.selected = this.selected.concat(
item.browseChild.filter(
($item) => this.selectedIds.indexOf($item.id) === -1
)
);
} else {
let removeData = item.browseChild.map((item) => item.id);
// this.selected = this.selected.concat(
// item.children.filter(($item) => this.selectedIds.indexOf($item.id) === -1)
// );
this.selected = this.selected.filter(
(item) => removeData.indexOf(item.id) === -1
);
}
},
// 单选
selectItem(item) {
let index = this.selectedIds.indexOf(item.id);
if (index > -1) {
this.selected.splice(index, 1);
} else {
this.selected.push(item);
}
},
// 取消收藏按钮
cancelCollection() {
let idItem = this.selected.map((el) => {
return el.id;
});
this.unCollectionFn(...idItem);
},
// 外部全选按钮
outsideChecked() {
if (this.playCheckout == true) {
this.selected = [];
} else {
this.list[index].show = false;
this.$u.toast(`收藏成功`);
let len = this.list.map((el) => {
return el.browseChild;
});
this.selected = len.flat();
}
},
//收藏款式接口
collectionFn(item) {
this.$http("mobileBrand.styleCollect", { id: item }).then((res) => {
if (res.code == 200) {
this.$emit("update");
}
});
},
//取消款式接口
unCollectionFn(item) {
let param = [item];
this.$http("mobileBrand.cancelCollect", param).then((res) => {
if (res.code == 200) {
this.$emit("update");
}
});
},
// 爱心点击
browerClick(item) {
if (item.isFavorite == true) {
this.$u.toast(`已取消收藏`);
this.unCollectionFn(item.id);
} else {
this.$u.toast(`已收藏款式`);
this.collectionFn(item.id);
}
},
//滑动删除的东西
sliderClick(indexs, item) {
let itemId = item[indexs].id;
this.unCollectionFn(itemId);
},
// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
// 没做目前没用
open(index) {
// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
// 原本为'false'，再次设置为'false'会无效
......@@ -133,6 +246,12 @@ export default {
</script>
<style lang="scss" scoped>
// 选项
.checkstyle {
font-size: 42rpx;
margin-right: 10rpx;
}
.browse {
::v-deep .u-card__body {
padding-top: 29rpx !important;
......@@ -212,4 +331,30 @@ export default {
::v-deep .u-border-bottom {
padding-left: 0rpx;
}
.posi {
position: fixed;
bottom: 100rpx;
height: 100rpx;
width: 100%;
background-color: white;
.pop-up {
position: relative;
height: 100%;
.checkstyles {
position: absolute;
left: 59rpx;
top: 50%;
transform: translateY(-50%);
}
.bttn {
width: 160rpx;
height: 64rpx;
position: absolute;
right: 30rpx;
top: 50%;
transform: translateY(-50%);
}
}
}
</style>
src/pages/brands/components/hotStyle.vue
View file @ 1dbd0299
<template>
<view class="hots">
<image
@click="tabdetail"
class="indexhot"
src="@/static/images/brank/mei1.jpg"
></image>
<view class="hotborder">
<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>
<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
class="indexhot"
:src="item.imags"
@click="tabdetail(item)"
mode="aspectFill"
></image>
<view class="hotborder">
<view class="hotText1">{{ item.styleTag }}</view>
<view class="hotText2">
<image
class="iconhot"
:src="`${imgUrl}${item.originalImageCode}`"
mode="aspectFill"
></image>
<text class="wen">{{ item.materialName }}</text>
<image
class="iconLove"
src="@/static/images/brank/blackxin.png"
v-if="!item.isFavorite"
@click="tabImage(item)"
>
</image>
<image
class="iconLove"
src="@/static/images/brank/lightxin.png"
v-else
@click="tabImage(item)"
></image>
</view>
</view>
</view>
</view>
......@@ -29,48 +44,69 @@
<script>
export default {
props: {
// 数据
recordsList: {
type: Array,
default: () => [],
},
},
data() {
return {
// 爱心切换的bool
ImageBool: true,
imgUrl: this.$IMG_URL, // 上传地址
};
},
created() {
// this.unCollectionFn(1);
},
methods: {
// 点击切换心心选项
tabImage() {
this.ImageBool = !this.ImageBool;
if (this.ImageBool == false) {
this.$u.toast(`已收藏款式`);
} else {
tabImage(item) {
// console.log(item.isFavorite);
if (item.isFavorite == true) {
this.$u.toast(`已取消收藏`);
this.unCollectionFn(item.id);
} else {
this.$u.toast(`已收藏款式`);
this.collectionFn(item.id);
}
},
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");
},
// 跳转到详情
tabdetail(item) {
this.$router.push("/pages/brands/detail?id=" + item.id);
},
}
//收藏款式接口
collectionFn(item) {
this.$http("mobileBrand.styleCollect", { id: item }).then((res) => {
if (res.code == 200) {
this.$emit("update");
}
});
},
//取消款式接口
unCollectionFn(item) {
let param = [item];
this.$http("mobileBrand.cancelCollect", param).then((res) => {
if (res.code == 200) {
this.$emit("update");
}
});
},
},
};
</script>
<style lang="scss" scoped>
.whole {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.hots {
height: 578rpx;
width: 330rpx;
margin-bottom: 20rpx;
margin-right: 16rpx;
// flex: 1;
// margin-right: 16rpx;
.indexhot {
display: block;
......
src/pages/brands/components/hs-material-thumbnail.vue
View file @ 1dbd0299
......@@ -6,13 +6,18 @@
mode=""
></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 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 class="color_DDA973 u-line-1"
>{{ item.materialName }}
<!-- 加厚荷兰绒绒布布料 -->
</span>
</view>
......@@ -28,97 +33,99 @@
</template>
<script>
export default {
name: "hs-material-thumbnail",
props: {
item: {
type: Object,
default: () => {},
},
colourApiList: {
type: Array,
default: []
}
export default {
name: "hs-material-thumbnail",
props: {
item: {
type: Object,
default: () => {},
},
data() {
return {};
colourApiList: {
type: Array,
default: () => [],
},
methods: {
click() {
this.$emit("click");
},
},
data() {
return {
imgUrl: this.$IMG_URL, // 上传地址
};
},
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%;
.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);
}
.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%;
}
.width_30 {
width: 30%;
}
.color_DDA973 {
color: #dda973;
}
.color_DDA973 {
color: #dda973;
}
.color_6F6F72 {
color: #6f6f72;
}
.color_6F6F72 {
color: #6f6f72;
}
.bd_dashed {
position: relative;
}
.bd_dashed {
position: relative;
}
.bd_dashed:after {
border-width: 1px;
}
.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>
\ No newline at end of file
.ov_hiden {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
src/pages/brands/detail.vue
View file @ 1dbd0299
......@@ -3,12 +3,15 @@
<u-navbar
title=""
:border-bottom="false"
background="rgba(245,245,245,0)"
:background="background"
style="height: 0px"
>
</u-navbar>
<view>
<u-image height="750rpx" :src="`${imgUrl}${tabledata.originalImageCode}`"></u-image>
<u-image
height="750rpx"
:src="`${imgUrl}${tabledata.originalImageCode}`"
></u-image>
</view>
<view class="u-p-r-30 u-p-l-30">
<!--款式信息 -->
......@@ -16,102 +19,139 @@
<view class="u-border-bottom u-line-88">款式信息</view>
<view class="fabric u-m-t-24">
<text class="textStyle1">产品款号</text>
<text class="textStyle2">{{tabledata.styleCode}}</text>
<text class="textStyle2">{{ tabledata.styleCode }}</text>
</view>
<view class="fabric u-m-t-8">
<text class="textStyle1">面料供应商</text>
<text class="textStyle2">{{tabledata.supplierName}}</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" :colourApiList="tabledata.colourApiList"></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" 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"
v-for="(item, index) in tabledata.colourApiList"
:key="index"
>
<image
src="@/static/images/brank/mei1.jpg"
v-if="item.isMain"
:src="`${imgUrl}${item.fileCode}`"
style="width: 100%; height: 100%"
></image>
<!-- <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>
<!-- 这个空的是为了让下面那个不盖住内容 -->
<view class="mask-template"></view>
<view class="sampling">
<u-button @click="samplingFn">我要采购布样</u-button>
</view>
</view>
<!-- 这个空的是为了让下面那个不盖住内容 -->
<view class="mask-template"></view>
<view class="sampling">
<u-button>我要采购布样</u-button>
</view>
<u-popup v-model="show" mode="center">
<view style="height: 200rpx; width: 366rpx" class="telephone">
<view>面料供应商联系方式</view>
<text class="tele">{{ smapTelePhone }}</text>
<view class="cacle">
<view @click="cancel" class="cacleStyle">取消</view>
<view @click="call" class="callStyle">拨打</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import material from "./components/hs-material-thumbnail.vue";
export default {
components: {
material
import material from "./components/hs-material-thumbnail.vue";
export default {
components: {
material,
},
data() {
return {
show: false,
background: {
backgroundColor: "rgba(245,245,245,0)",
}, //颜色透明
tabledata: {},
item: {},
id: "",
imgUrl: this.$IMG_URL, // 上传地址
smapTelePhone: "", //联系人电话
};
},
watch: {
id: {
handler() {
this.detail();
},
},
data() {
return {
tabledata:{},
item: {},
id: "",
imgUrl: this.$IMG_URL, // 上传地址
};
},
created() {
this.detail();
},
onLoad(options) {
this.id = options.id;
},
methods: {
// 采样按钮
samplingFn() {
this.show = true;
this.supplierFn(this.$route.query.id);
},
watch: {
id: {
handler() {
console.log("oid");
this.detail()
}
}
// 取消
cancel() {
this.show = false;
},
created() {
this.detail()
// 拨打
call() {
uni.makePhoneCall({
phoneNumber: this.smapTelePhone,
});
},
onLoad(options) {
this.id = options.id;
// 详情接口
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;
}
});
},
methods: {
detail() {
let param = {
id: this.id
// 面料商联系方式接口
supplierFn(item) {
let param = {
id: item,
};
this.$http("mobileBrand.supplierInfo", param).then((res) => {
let { code, data } = res;
if (code === 200) {
this.smapTelePhone = data.phoneNumber;
}
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">
......@@ -161,75 +201,88 @@ $main-color: #fff;
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-line-88 {
line-height: 88rpx;
}
.u-btn {
width: 630rpx;
height: 88rpx;
background: rgba(0, 0, 0, 0.8);
border-radius: 44rpx;
color: white;
}
}
.bg-fff {
position: relative;
top: -10rpx;
background: #fff;
}
.u-line-88 {
line-height: 88rpx;
}
.item {
width: 100%;
margin-bottom: 28rpx;
.bg-fff {
position: relative;
top: -10rpx;
background: #fff;
&--round {
border-radius: 16rpx;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.item {
width: 100%;
margin-bottom: 28rpx;
&-tag {
padding: 6rpx 2px;
background: $color;
text-align: center;
color: $h-color;
display: inline-block;
margin-right: 10rpx;
}
}
&--round {
border-radius: 16rpx;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.image {
position: relative;
width: 160rpx;
height: 160rpx;
display: inline-block;
&-tag {
padding: 6rpx 2px;
background: $color;
text-align: center;
color: $h-color;
display: inline-block;
margin-right: 10rpx;
}
&-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;
}
}
.image {
position: relative;
width: 160rpx;
height: 160rpx;
display: inline-block;
.overflow {
overflow-x: auto;
white-space: nowrap;
}
&-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;
}
// 弹出拨打号码
.telephone {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
.tele {
display: inline-block;
width: 100%;
text-align: center;
}
.overflow {
overflow-x: auto;
white-space: nowrap;
.cacle {
width: 100%;
display: flex;
justify-content: space-around;
.cacleStyle {
&:hover {
color: #3144be;
cursor: pointer;
}
}
.callStyle {
&:hover {
color: #3144be;
cursor: pointer;
}
}
}
</style>
\ No newline at end of file
}
</style>
src/pages/brands/everyDay.vue
View file @ 1dbd0299
......@@ -8,13 +8,20 @@
-->
<template>
<!-- 每日上新 -->
<u-card full :head-border-bottom="false">
<view slot="body">
<view class="hotFlex">
<hot-style v-if="recordsList.length>0" :recordsList="recordsList"></hot-style>
<view>
<u-card full :head-border-bottom="false">
<view slot="body">
<view class="hotFlex">
<hot-style
v-if="recordsList.length > 0"
:recordsList="recordsList"
@update="update"
></hot-style>
</view>
</view>
</view>
</u-card>
</u-card>
<view v-if="loadText" class="loadStyle">没有可用的数据了</view>
</view>
</template>
<script>
......@@ -25,36 +32,63 @@ export default {
},
data() {
return {
recordsList:[]
recordsList: [],
total: 0, //总页数
current: 1,
size: 10,
loadText: false, //判断加载数据完显示什么
};
},
created(){
console.log("ces");
this.materialDetail()
},
created() {
// console.log("ces");
this.materialDetail(1, 10);
},
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");
//更新
update() {
this.materialDetail(1, 10);
},
// 每日上新接口
materialDetail(current, size) {
let param = {
current: current,
size: size,
styleTag: "",
};
this.$http("mobileBrand.dailyNewStylePage", param).then((res) => {
let { code, data } = res;
if (code === 200) {
if (current == 1) {
this.recordsList = data.recordspush;
} else {
this.recordsList.push(...data.records);
}
});
}
this.total = data.total;
}
});
},
},
//上拉加载
onReachBottom() {
//判断当前页是否到达总页数
if (this.current >= this.total) {
this.loadText = true;
} else {
this.current++;
(this.size = 5), this.materialDetail(this.current, this.size);
}
},
};
</script>
<style lang="scss" scoped>
// 上拉加载
.loadStyle {
width: 100%;
height: 60rpx;
line-height: 60rpx;
text-align: center;
}
::v-deep .u-card__body {
padding-top: 20rpx !important;
background-color: #f5f5f5;
......
src/pages/material/createMaterial.vue
View file @ 1dbd0299
This diff is collapsed.
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