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 @@ ...@@ -2,6 +2,7 @@
node_modules/ node_modules/
unpackage/ unpackage/
dist/ dist/
.hbuilderx/
# local env files # local env files
.env.local .env.local
......
src/config/request/apiList/plm/mobileBrand/index.js
View file @ 1dbd0299
...@@ -11,18 +11,45 @@ import config from "../config/index"; ...@@ -11,18 +11,45 @@ import config from "../config/index";
let className = 'mobileBrand' let className = 'mobileBrand'
let baseUrl = `${config.baseUrl}/${className}` let baseUrl = `${config.baseUrl}/${className}`
export default { export default {
[className]:{ [className]: {
'dailyNewStylePage': { 'dailyNewStylePage': {
url: `${baseUrl}/dailyNewStylePage`, url: `${baseUrl}/dailyNewStylePage`,
method: "post", method: "post",
}, },
//首页
'stylePage': { 'stylePage': {
url: `${baseUrl}/stylePage`, url: `${baseUrl}/stylePage`,
method: "post", method: "post",
}, },
//详情
'styleDetail': { 'styleDetail': {
url: `${baseUrl}/styleDetail`, url: `${baseUrl}/styleDetail`,
method: "get", 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 @@ ...@@ -533,22 +533,5 @@
"navigationBarTitleText": "uni-app", "navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8", "navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#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> <template>
<!-- 品牌商首页 --> <!-- 品牌商首页 -->
<view class="brandsindex"> <view>
<!-- 展示图 --> <view class="brandsindex">
<view id="header" class="back_img"> <!-- 展示图 -->
<u-navbar title="" :border-bottom="false" :background="background"> <view id="header" class="back_img">
<template slot="right"> <u-navbar title="" :border-bottom="false" :background="background">
<!-- 插槽搜索按钮 --> <template slot="right">
<view @click="searchCli" class="u-m-r-24 search"> <!-- 插槽搜索按钮 -->
<image <view @click="searchCli" class="u-m-r-24 search">
class="hs-img" <image
src="../../static/images/home/search@2x.png" class="hs-img"
mode="" src="../../static/images/home/search@2x.png"
></image> 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> </view>
</template> <view slot="body">
</u-navbar> <view class="imgList">
</view> <image
<!-- 每日上新 --> v-for="(item, index) in dailyNewStyleList"
<view class="everyUpdate"> :key="index"
<u-card full :head-border-bottom="false" @head-click="headTab"> :src="`${imgUrl}${item.originalImageCode}`"
<view slot="head"> mode=""
<head-title title="每日上新" subtitle="DAILY NEW"></head-title> ></image>
</view> </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> </view>
</view> </u-card>
</u-card> </view>
</view> <!-- 热门款式 -->
<!-- 热门款式 --> <view class="hotstyle">
<view class="hotstyle"> <u-card full :head-border-bottom="false">
<u-card full :head-border-bottom="false"> <view slot="head">
<view slot="head"> <head-title title="热门款式" subtitle="HOT STYLES"></head-title>
<head-title title="热门款式" subtitle="HOT STYLES"></head-title> </view>
</view> <view slot="body">
<view slot="body"> <view class="hotFlex">
<view class="hotFlex"> <hot-style
<hot-style :recordsList="hotStylePage"
v-if="hotStylePage.records.length > 0" @update="update"
:recordsList="hotStylePage.records" ></hot-style>
></hot-style> </view>
<!-- <hot-style></hot-style>
<hot-style></hot-style>
<hot-style></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>
<!-- 底部占位符 -->
<view class="mask-template"></view>
</view> </view>
</template> </template>
<script> <script>
import headTitle from "./components/header"; //每日更新头部的东西 import headTitle from "./components/header"; //每日更新头部的东西
import hotStyle from "./components/hotStyle"; //热门款式 import hotStyle from "./components/hotStyle"; //热门款式
export default { export default {
components: { components: {
headTitle, headTitle,
hotStyle, hotStyle,
// HsTabBar,
}, },
data() { data() {
return { return {
fabricObj: "", fabricObj: "",
dailyNewStyleList: [], dailyNewStyleList: [], //每日上新的数据
hotStylePage: [], hotStylePage: [], //款式的数据
imgUrl: this.$IMG_URL, // 上传地址 imgUrl: this.$IMG_URL, // 图片前面的url
background: { background: {
backgroundColor: "rgba(245,245,245,0)", backgroundColor: "rgba(245,245,245,0)",
}, },
total: 0, //总页数
current: 1,
size: 10,
loadText: false,
}; };
}, },
created() { created() {
console.log("ces"); // console.log("ces");
this.getList(); // this.getList(1, 10);
}, },
methods: { methods: {
// 搜索按钮 // 搜索按钮
searchCli() { searchCli() {
this.$router.push("/pages/home/search"); this.$router.push("/pages/home/search");
}, },
// 每日更新跳转
headTab() { headTab() {
this.$router.push("pages/brands/everyDay"); this.$router.push("/pages/brands/everyDay");
// this.$router.push("pages/brands/detail"); },
//更新
update() {
this.getList(1, 10);
}, },
getList() { // 款式列表分页查询接口
getList(current, size) {
let param = { let param = {
current: 1, current: current,
size: 10, size: size,
styleTag: "", styleTag: "",
}; };
this.$http("mobileBrand.stylePage", param).then((res) => { this.$http("mobileBrand.stylePage", param).then((res) => {
let { code, data } = res; let { code, data } = res;
if (code === 200) { if (code === 200) {
if (current == 1) {
this.hotStylePage = data.hotStylePage.records;
} else {
this.hotStylePage.push(...data.hotStylePage.records);
}
this.dailyNewStyleList = data.dailyNewStyleList; 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// 上拉加载
.loadStyle {
width: 100%;
height: 60rpx;
line-height: 60rpx;
text-align: center;
}
// 底部占位符 // 底部占位符
.mask-template { .mask-template {
width: 100%; width: 100%;
...@@ -173,9 +202,9 @@ export default { ...@@ -173,9 +202,9 @@ export default {
width: 100%; width: 100%;
.hotFlex { .hotFlex {
display: flex; // display: flex;
flex-wrap: wrap; // flex-wrap: wrap;
justify-content: space-between; // justify-content: space-between;
} }
} }
</style> </style>
src/pages/brands/browse.vue
View file @ 1dbd0299
...@@ -6,13 +6,15 @@ ...@@ -6,13 +6,15 @@
options 右边滑动出现删除的东西 Array options 右边滑动出现删除的东西 Array
--> -->
<view> <view>
<browse-item :isbrowse="true" :list="list"> <browse-item :isbrowse="true" :list="browseList" @update="update">
<!-- 头部插槽 --> <!-- 头部插槽 -->
<template #title> <template v-slot:default="slots">
<text class="browseicon"><u-icon name="clock"></u-icon></text> <u-icon name="clock" class="browseicon"></u-icon>
<text class="browseTime">2021-12-12 13:11</text> <text class="browseTime">{{ slots.title.viewTime }}</text>
</template> </template>
</browse-item> </browse-item>
<view v-if="loadText" class="loadStyle">没有可用的数据了</view>
</view> </view>
</template> </template>
...@@ -22,47 +24,88 @@ export default { ...@@ -22,47 +24,88 @@ export default {
components: { browseItem }, components: { browseItem },
data() { data() {
return { return {
list: [ list: [],
{ total: 0, //总页数
id: 1, current: 1,
title: size: 10,
"wos长安回望绣成堆，山顶千门次第开，一骑红尘妃子笑，无人知是荔枝来", loadText: false,
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"),
},
],
}; };
}, },
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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// 上拉加载
.loadStyle {
width: 100%;
height: 60rpx;
line-height: 60rpx;
text-align: center;
}
//组件头部时间图标 //组件头部时间图标
.browseicon { .browseicon {
width: 32rpx; width: 32rpx;
::v-deep .u-icon { width: 32rpx;
width: 32rpx; height: 32rpx;
height: 32rpx; font-size: 32rpx;
font-size: 32rpx; color: red;
color: red;
}
} }
//组件头部时间 //组件头部时间
.browseTime { .browseTime {
......
src/pages/brands/collection.vue
View file @ 1dbd0299
...@@ -17,27 +17,16 @@ ...@@ -17,27 +17,16 @@
<browse-item <browse-item
:isbrowse="false" :isbrowse="false"
:edit="edit" :edit="edit"
:list="list" :list="collectionList"
:options="options" :options="options"
@update="update"
> >
<!-- 头部插槽 --> <!-- 头部插槽 -->
<template #title> <template v-slot:default="slots">
<!-- 头部title --> <!-- 头部title -->
<text class="flagname">加厚荷兰绒绒布布料</text> <text class="flagname">{{ slots.title.supplierName }}</text>
</template> </template>
</browse-item> </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>
<!-- 底部占位符 --> <!-- 底部占位符 -->
<view :class="{ 'mask-template1': !edit, 'mask-template2': edit }"></view> <view :class="{ 'mask-template1': !edit, 'mask-template2': edit }"></view>
...@@ -50,37 +39,7 @@ export default { ...@@ -50,37 +39,7 @@ export default {
components: { browseItem }, components: { browseItem },
data() { data() {
return { return {
list: [ 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,
},
],
options: [ options: [
{ {
text: "删除", text: "删除",
...@@ -91,12 +50,31 @@ export default { ...@@ -91,12 +50,31 @@ export default {
], ],
// 编辑点击 // 编辑点击
edit: false, 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: { methods: {
//更新
update() {
this.collectionFn();
},
// 编辑 // 编辑
editorClick() { editorClick() {
this.edit = true; this.edit = true;
...@@ -105,21 +83,26 @@ export default { ...@@ -105,21 +83,26 @@ export default {
completeClick() { completeClick() {
this.edit = false; this.edit = false;
}, },
// 弹出垮选中某个复选框时，由checkbox时触发
// checkboxChange(e) { // 我的收藏接口
// // 全选操作 collectionFn() {
// if (e.name == "全选") { this.$http("mobileBrand.myCollect").then((res) => {
// if (!this.allchecked) { let { code, data } = res;
// this.list.map((val) => { if (code === 200) {
// val.checked = true; this.list = data;
// }); this.list = this.list.map((el) => {
// } else { return {
// this.list.map((val) => { ...el,
// val.checked = false; show: false,
// }); checked: false,
// } };
// } });
// }, }
});
},
},
mounted() {
this.collectionFn();
}, },
}; };
</script> </script>
...@@ -184,31 +167,5 @@ export default { ...@@ -184,31 +167,5 @@ export default {
font-family: PingFangSC, PingFangSC-Medium; font-family: PingFangSC, PingFangSC-Medium;
font-weight: 700; 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> </style>
src/pages/brands/components/browseItem.vue
View file @ 1dbd0299
<template> <template>
<!-- 浏览记录组件和收藏 --> <!-- 浏览记录组件和收藏 -->
<view class="browse"> <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 slot="head">
<view> <view>
<!-- 全选框 --> <!-- 全选框 -->
<u-checkbox-group v-if="edit"> <u-icon
<u-checkbox :name="
v-model="allchecked" checkSelect(item) ? 'checkmark-circle-fill' : 'checkmark-circle'
name="全选" "
shape="circle" v-if="edit"
></u-checkbox> class="checkstyle"
</u-checkbox-group> @click="allcheckFn(item)"
<!-- 插槽 --> ></u-icon>
<slot name="title"></slot> <slot v-bind:title="item"></slot>
</view> </view>
</view> </view>
<!-- 主体 --> <!-- 主体 -->
<view slot="body"> <view slot="body">
<u-swipe-action <u-swipe-action
:show="item.show" :show="elData.show"
:index="index" v-for="(elData, indexs) in item.browseChild"
v-for="(item, index) in list" :index="indexs"
:key="item.id" :key="indexs"
@click="click" @click="() => sliderClick(indexs, item.browseChild)"
@open="open" @open="open"
:options="options" :options="options"
> >
<view class="item u-border-bottom"> <view class="item u-border-bottom">
<!-- 多选框 --> <!-- 多选框 -->
<u-checkbox-group v-if="edit"> <u-icon
<u-checkbox :name="
v-model="item.checked" selectedIds.indexOf(elData.id) > -1
name="item.name" ? 'checkmark-circle-fill'
shape="circle" : 'checkmark-circle'
></u-checkbox> "
</u-checkbox-group> v-if="edit"
class="checkstyle"
@click="selectItem(elData)"
></u-icon>
<!-- 照片 --> <!-- 照片 -->
<!-- <image class="imges" :src="item.images" /> -->
<image <image
class="imges" 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在此为必写的，否则可能会出现标题定位错误 --> <!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
<view class="title-wrap"> <view class="title-wrap">
<view class="title">{{ item.title }}</view> <view class="title">{{ elData.styleTag }}</view>
<!-- 款号 --> <!-- 款号 -->
<view class="modelno"> <view class="modelno">
<text class="textStyle1">款号</text> <text class="textStyle1">款号</text>
<text class="textStyle2">AS23124</text> <text class="textStyle2">{{ elData.styleCode }}</text>
<!-- 是否需要爱心 --> <!-- 是否需要爱心 -->
<view v-if="isbrowse"> <view v-if="isbrowse">
<image <image
@click="browerClick(index)" @click="browerClick(elData)"
:src="item.browseImg" src="@/static/images/brank/blackxin.png"
v-if="islove" v-if="!elData.isFavorite"
></image> ></image>
<image <image
@click="browerClick(index)" @click="browerClick(elData)"
src="@/static/images/brank/lightxin.png" src="@/static/images/brank/lightxin.png"
v-else v-else
></image> ></image>
...@@ -67,13 +73,34 @@ ...@@ -67,13 +73,34 @@
<!-- 面料 --> <!-- 面料 -->
<view class="fabric"> <view class="fabric">
<text class="textStyle1">面料</text> <text class="textStyle1">面料</text>
<text class="textStyle2">AS23124</text> <text class="textStyle2">{{ elData.materialName }}</text>
</view> </view>
</view> </view>
</view> </view>
</u-swipe-action> </u-swipe-action>
</view> </view>
</u-card> </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> </view>
</template> </template>
...@@ -96,29 +123,115 @@ export default { ...@@ -96,29 +123,115 @@ export default {
}, },
data() { data() {
return { return {
// 爱心的黑暗显影 islove: false, // 爱心的黑暗显影
islove: false, imgUrl: this.$IMG_URL, // 图片前面的url
//全选 selected: [], // 判断全选单选这些东西的
allchecked: false, // 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: { methods: {
// 爱心点击 //判断全选按钮是否选中
browerClick(i, e) { checkSelect(tree) {
console.log(i, e); let childrenIds = tree.browseChild.map((item) => item.id);
// this.islove = !this.islove; return (
new Set(this.selectedIds.concat(childrenIds)).size ===
this.selected.length
);
}, },
//滑动删除的东西 // 多选
click(index, index1) { allcheckFn(item) {
if (index1 == 0) { //判断全选是否被选中
this.list.splice(index, 1); if (!this.checkSelect(item)) {
this.$u.toast(`删除了第${index}个cell`); 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 { } else {
this.list[index].show = false; let len = this.list.map((el) => {
this.$u.toast(`收藏成功`); 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) { open(index) {
// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制， // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
// 原本为'false'，再次设置为'false'会无效 // 原本为'false'，再次设置为'false'会无效
...@@ -133,6 +246,12 @@ export default { ...@@ -133,6 +246,12 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// 选项
.checkstyle {
font-size: 42rpx;
margin-right: 10rpx;
}
.browse { .browse {
::v-deep .u-card__body { ::v-deep .u-card__body {
padding-top: 29rpx !important; padding-top: 29rpx !important;
...@@ -212,4 +331,30 @@ export default { ...@@ -212,4 +331,30 @@ export default {
::v-deep .u-border-bottom { ::v-deep .u-border-bottom {
padding-left: 0rpx; 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> </style>
src/pages/brands/components/hotStyle.vue
View file @ 1dbd0299
<template> <template>
<view class="hots"> <view class="whole">
<image <view class="hots" v-for="(item, index) in recordsList" :key="index">
@click="tabdetail" <!-- <image
class="indexhot" class="indexhot"
src="@/static/images/brank/mei1.jpg" :src="`${imgUrl}${item.originalImageCode}`"
></image> @click="tabdetail(item)"
<view class="hotborder"> mode="aspectFill"
<view class="hotText1">{{ item.styleTag }}</view> ></image> -->
<view class="hotText2"> <image
<image class="iconhot" src="@/static/images/brank/mei1.jpg"></image> class="indexhot"
<text class="wen">我的文字是dsadasdasddsads</text> :src="item.imags"
<image @click="tabdetail(item)"
class="iconLove" mode="aspectFill"
src="@/static/images/brank/blackxin.png" ></image>
v-if="ImageBool"
@click="tabImage" <view class="hotborder">
></image> <view class="hotText1">{{ item.styleTag }}</view>
<image <view class="hotText2">
class="iconLove" <image
src="@/static/images/brank/lightxin.png" class="iconhot"
v-else :src="`${imgUrl}${item.originalImageCode}`"
@click="tabImage" mode="aspectFill"
></image> ></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> </view>
</view> </view>
...@@ -29,48 +44,69 @@ ...@@ -29,48 +44,69 @@
<script> <script>
export default { export default {
props: {
// 数据
recordsList: {
type: Array,
default: () => [],
},
},
data() { data() {
return { return {
// 爱心切换的bool imgUrl: this.$IMG_URL, // 上传地址
ImageBool: true,
}; };
}, },
created() {
// this.unCollectionFn(1);
},
methods: { methods: {
// 点击切换心心选项 // 点击切换心心选项
tabImage() { tabImage(item) {
this.ImageBool = !this.ImageBool; // console.log(item.isFavorite);
if (this.ImageBool == false) { if (item.isFavorite == true) {
this.$u.toast(`已收藏款式`);
} else {
this.$u.toast(`已取消收藏`); this.$u.toast(`已取消收藏`);
this.unCollectionFn(item.id);
} else {
this.$u.toast(`已收藏款式`);
this.collectionFn(item.id);
} }
}, },
methods: { // 跳转到详情
// 点击切换心心选项 tabdetail(item) {
tabImage() { this.$router.push("/pages/brands/detail?id=" + item.id);
this.ImageBool = !this.ImageBool;
},
// 跳转到详情
tabdetail(item) {
// console.log("KKK");
this.$router.push("/pages/brands/detail?id=" + item.id);
// this.$router.push("pages/brands/everyDay");
},
}, },
} //收藏款式接口
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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.whole { .whole {
display: flex; display: flex;
justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
} }
.hots { .hots {
height: 578rpx; height: 578rpx;
width: 330rpx; width: 330rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
margin-right: 16rpx; // margin-right: 16rpx;
// flex: 1;
.indexhot { .indexhot {
display: block; display: block;
......
src/pages/brands/components/hs-material-thumbnail.vue
View file @ 1dbd0299
...@@ -6,13 +6,18 @@ ...@@ -6,13 +6,18 @@
mode="" mode=""
></image> --> ></image> -->
<!-- <image class="width_100 hs-height-160" :src="`${imgUrl}${fileCode}`"> --> <!-- <image class="width_100 hs-height-160" :src="`${imgUrl}${fileCode}`"> -->
<template v-for="item,index in colourApiList"> <template v-for="(item, index) in colourApiList">
<image
<image :key="index" v-if="item.isMain" class="width_100 hs-height-160" :src="`${imgUrl}${item.fileCode}`" /> :key="index"
v-if="item.isMain"
class="width_100 hs-height-160"
:src="`${imgUrl}${item.fileCode}`"
/>
</template> </template>
<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.materialName }} <span class="color_DDA973 u-line-1"
>{{ item.materialName }}
<!-- 加厚荷兰绒绒布布料 --> <!-- 加厚荷兰绒绒布布料 -->
</span> </span>
</view> </view>
...@@ -28,97 +33,99 @@ ...@@ -28,97 +33,99 @@
</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: () => {},
},
colourApiList: {
type: Array,
default: []
}
}, },
data() { colourApiList: {
return {}; type: Array,
default: () => [],
}, },
methods: { },
click() { data() {
this.$emit("click"); return {
}, imgUrl: this.$IMG_URL, // 上传地址
};
},
methods: {
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%;
} }
.color_DDA973 { .color_DDA973 {
color: #dda973; color: #dda973;
} }
.color_6F6F72 { .color_6F6F72 {
color: #6f6f72; color: #6f6f72;
} }
.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,
.bd_dashed-left:after, .bd_dashed-left:after,
.bd_dashed-right:after, .bd_dashed-right:after,
.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>
\ No newline at end of file
src/pages/brands/detail.vue
View file @ 1dbd0299
...@@ -3,12 +3,15 @@ ...@@ -3,12 +3,15 @@
<u-navbar <u-navbar
title="" title=""
:border-bottom="false" :border-bottom="false"
background="rgba(245,245,245,0)" :background="background"
style="height: 0px" style="height: 0px"
> >
</u-navbar> </u-navbar>
<view> <view>
<u-image height="750rpx" :src="`${imgUrl}${tabledata.originalImageCode}`"></u-image> <u-image
height="750rpx"
:src="`${imgUrl}${tabledata.originalImageCode}`"
></u-image>
</view> </view>
<view class="u-p-r-30 u-p-l-30"> <view class="u-p-r-30 u-p-l-30">
<!--款式信息 --> <!--款式信息 -->
...@@ -16,102 +19,139 @@ ...@@ -16,102 +19,139 @@
<view class="u-border-bottom u-line-88">款式信息</view> <view class="u-border-bottom u-line-88">款式信息</view>
<view class="fabric u-m-t-24"> <view class="fabric u-m-t-24">
<text class="textStyle1">产品款号</text> <text class="textStyle1">产品款号</text>
<text class="textStyle2">{{tabledata.styleCode}}</text> <text class="textStyle2">{{ tabledata.styleCode }}</text>
</view> </view>
<view class="fabric u-m-t-8"> <view class="fabric u-m-t-8">
<text class="textStyle1">面料供应商</text> <text class="textStyle1">面料供应商</text>
<text class="textStyle2">{{tabledata.supplierName}}</text> <text class="textStyle2">{{ tabledata.supplierName }}</text>
</view> </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-border-bottom u-line-88">面料信息</view>
<view class="u-m-t-30 u-m-b-56"> <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>
<!-- 其他颜色 --> <!-- 其他颜色 -->
<view class="u-flex"> <view class="u-flex">
<view class="overflow u-flex-1"> <view class="overflow u-flex-1">
<view>其他颜色</view> <view>其他颜色</view>
<view> <view>
<view class="image u-m-r-10" v-for="item,index in tabledata.colourApiList" :key="index"> <view
<image v-if="item.isMain" :src="`${imgUrl}${item.fileCode}`" style="width: 100%; height: 100%"></image> class="image u-m-r-10"
<view class="image-tip u-line-1">颜色</view> v-for="(item, index) in tabledata.colourApiList"
</view> :key="index"
<view class="image u-m-r-10"> >
<image <image
src="@/static/images/brank/mei1.jpg" v-if="item.isMain"
:src="`${imgUrl}${item.fileCode}`"
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
></image> ></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 class="image-tip u-line-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> </view>
</view> </view>
</view> </view>
</view> </view>
<!-- 这个空的是为了让下面那个不盖住内容 -->
<view class="mask-template"></view>
<view class="sampling">
<u-button @click="samplingFn">我要采购布样</u-button>
</view>
</view> </view>
<!-- 这个空的是为了让下面那个不盖住内容 --> <u-popup v-model="show" mode="center">
<view class="mask-template"></view> <view style="height: 200rpx; width: 366rpx" class="telephone">
<view class="sampling"> <view>面料供应商联系方式</view>
<u-button>我要采购布样</u-button> <text class="tele">{{ smapTelePhone }}</text>
</view> <view class="cacle">
<view @click="cancel" class="cacleStyle">取消</view>
<view @click="call" class="callStyle">拨打</view>
</view>
</view>
</u-popup>
</view> </view>
</template> </template>
<script> <script>
import material from "./components/hs-material-thumbnail.vue"; import material from "./components/hs-material-thumbnail.vue";
export default { export default {
components: { components: {
material 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:{}, created() {
item: {}, this.detail();
id: "", },
imgUrl: this.$IMG_URL, // 上传地址 onLoad(options) {
}; this.id = options.id;
},
methods: {
// 采样按钮
samplingFn() {
this.show = true;
this.supplierFn(this.$route.query.id);
}, },
watch: { // 取消
id: { cancel() {
handler() { this.show = false;
console.log("oid");
this.detail()
}
}
}, },
// 拨打
created() { call() {
this.detail() 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() { supplierFn(item) {
let param = { let param = {
id: this.id 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> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -161,75 +201,88 @@ $main-color: #fff; ...@@ -161,75 +201,88 @@ $main-color: #fff;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
} }
}
// 我要采购布样 .u-line-88 {
.sampling { line-height: 88rpx;
position: fixed; }
bottom: 0;
width: 750rpx;
height: 100rpx;
background: #ffffff;
box-shadow: 0px -2px 3px 0px rgba(178, 182, 214, 0.1);
.u-btn { .bg-fff {
width: 630rpx; position: relative;
height: 88rpx; top: -10rpx;
background: rgba(0, 0, 0, 0.8); background: #fff;
border-radius: 44rpx; }
color: white;
}
}
.u-line-88 { .item {
line-height: 88rpx; width: 100%;
} margin-bottom: 28rpx;
.bg-fff { &--round {
position: relative; border-radius: 16rpx;
top: -10rpx; border: 1px solid rgba(0, 0, 0, 0.1);
background: #fff;
} }
.item { &-tag {
width: 100%; padding: 6rpx 2px;
margin-bottom: 28rpx; background: $color;
text-align: center;
color: $h-color;
display: inline-block;
margin-right: 10rpx;
}
}
&--round { .image {
border-radius: 16rpx; position: relative;
border: 1px solid rgba(0, 0, 0, 0.1); width: 160rpx;
} height: 160rpx;
display: inline-block;
&-tag { &-tip {
padding: 6rpx 2px; text-align: center;
background: $color; width: 100%;
text-align: center; height: 40rpx;
color: $h-color; line-height: 40rpx;
display: inline-block; background: rgba(255, 255, 255, 0.8);
margin-right: 10rpx; font-size: 24rpx;
} position: absolute;
bottom: 0;
left: 0;
} }
}
.image { .overflow {
position: relative; overflow-x: auto;
width: 160rpx; white-space: nowrap;
height: 160rpx; }
display: inline-block;
&-tip { // 弹出拨打号码
text-align: center; .telephone {
width: 100%; display: flex;
height: 40rpx; flex-direction: column;
line-height: 40rpx; justify-content: space-around;
background: rgba(255, 255, 255, 0.8); align-items: center;
font-size: 24rpx; .tele {
position: absolute; display: inline-block;
bottom: 0; width: 100%;
left: 0; text-align: center;
}
} }
.cacle {
.overflow { width: 100%;
overflow-x: auto; display: flex;
white-space: nowrap; 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 @@ ...@@ -8,13 +8,20 @@
--> -->
<template> <template>
<!-- 每日上新 --> <!-- 每日上新 -->
<u-card full :head-border-bottom="false"> <view>
<view slot="body"> <u-card full :head-border-bottom="false">
<view class="hotFlex"> <view slot="body">
<hot-style v-if="recordsList.length>0" :recordsList="recordsList"></hot-style> <view class="hotFlex">
<hot-style
v-if="recordsList.length > 0"
:recordsList="recordsList"
@update="update"
></hot-style>
</view>
</view> </view>
</view> </u-card>
</u-card> <view v-if="loadText" class="loadStyle">没有可用的数据了</view>
</view>
</template> </template>
<script> <script>
...@@ -25,36 +32,63 @@ export default { ...@@ -25,36 +32,63 @@ export default {
}, },
data() { data() {
return { return {
recordsList:[] recordsList: [],
total: 0, //总页数
current: 1,
size: 10,
loadText: false, //判断加载数据完显示什么
}; };
}, },
created(){ created() {
console.log("ces"); // console.log("ces");
this.materialDetail() this.materialDetail(1, 10);
}, },
methods: { methods: {
materialDetail() { //更新
let param = { update() {
"current": 1, this.materialDetail(1, 10);
"size": 10, },
"styleTag": "" // 每日上新接口
} materialDetail(current, size) {
this.$http('mobileBrand.dailyNewStylePage', param).then(res => { let param = {
let { current: current,
code, size: size,
data styleTag: "",
} = res; };
if (code === 200) { this.$http("mobileBrand.dailyNewStylePage", param).then((res) => {
this.recordsList = data.records; let { code, data } = res;
console.log(this.recordsList,"this.recordsList"); 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// 上拉加载
.loadStyle {
width: 100%;
height: 60rpx;
line-height: 60rpx;
text-align: center;
}
::v-deep .u-card__body { ::v-deep .u-card__body {
padding-top: 20rpx !important; padding-top: 20rpx !important;
background-color: #f5f5f5; 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