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 Show 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
{ {
"name" : "一料多款", "name": "一料多款",
"appid" : "__UNI__41D6880", "appid": "__UNI__41D6880",
"description" : "一料多款", "description": "一料多款",
"versionName" : "1.1.0", "versionName": "1.1.0",
"versionCode" : "110", "versionCode": "110",
"transformPx" : false, "transformPx": false,
"app-plus" : { "app-plus": {
"compatible" : { "compatible": {
"ignoreVersion" : true "ignoreVersion": true
}, },
// true表示忽略版本检查提示框，HBuilderX1.9.0及以上版本支持 // true表示忽略版本检查提示框，HBuilderX1.9.0及以上版本支持
/* 5+App特有相关 */ /* 5+App特有相关 */
"usingComponents" : true, "usingComponents": true,
"splashscreen" : { "splashscreen": {
"alwaysShowBeforeRender" : true, "alwaysShowBeforeRender": true,
"waiting" : true, "waiting": true,
"autoclose" : true, "autoclose": true,
"delay" : 0 "delay": 0
}, },
"safearea" : { "safearea": {
//APP底部安全区域 //APP底部安全区域
"background" : "#fff", "background": "#fff",
"bottom" : { "bottom": {
"offset" : "auto" "offset": "auto"
} }
}, },
"compilerVersion" : 3, "compilerVersion": 3,
"nvueCompiler" : "uni-app", "nvueCompiler": "uni-app",
"modules" : { "modules": {
"Maps" : {}, "Maps": {},
"OAuth" : {}, "OAuth": {},
"Payment" : {}, "Payment": {},
"Share" : {}, "Share": {},
"VideoPlayer" : {}, "VideoPlayer": {},
"Geolocation" : {} "Geolocation": {}
}, },
/* 模块配置 */ /* 模块配置 */
"distribute" : { "distribute": {
/* 应用发布信息 */ /* 应用发布信息 */
"android" : { "android": {
/* android打包配置 */ /* android打包配置 */
"permissions" : [ "permissions": [
"<uses-feature android:name=\"android.hardware.camera\"/>", "<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>", "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>", "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
...@@ -64,86 +64,86 @@ ...@@ -64,86 +64,86 @@
"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>", "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>" "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
], ],
"abiFilters" : [ "armeabi-v7a", "arm64-v8a", "x86" ], "abiFilters": ["armeabi-v7a", "arm64-v8a", "x86"],
"autoSdkPermissions" : true "autoSdkPermissions": true
}, },
"ios" : { "ios": {
"capabilities" : { "capabilities": {
"entitlements" : { "entitlements": {
"com.apple.developer.associated-domains" : [ "applinks:m.*****.top" ] "com.apple.developer.associated-domains": ["applinks:m.*****.top"]
} }
}, },
"privacyDescription" : { "privacyDescription": {
"NSLocationAlwaysAndWhenInUseUsageDescription" : "需要同意获取您的位置信息才能展示附近信息", "NSLocationAlwaysAndWhenInUseUsageDescription": "需要同意获取您的位置信息才能展示附近信息",
"NSLocationAlwaysUsageDescription" : "需要同意获取您的位置信息才能展示附近信息", "NSLocationAlwaysUsageDescription": "需要同意获取您的位置信息才能展示附近信息",
"NSLocationWhenInUseUsageDescription" : "需要同意获取您的位置信息才能展示附近信息", "NSLocationWhenInUseUsageDescription": "需要同意获取您的位置信息才能展示附近信息",
"NSPhotoLibraryAddUsageDescription" : "需要同意访问您的相册才能保存图片", "NSPhotoLibraryAddUsageDescription": "需要同意访问您的相册才能保存图片",
"NSPhotoLibraryUsageDescription" : "需要同意访问您的相册才能选取图片", "NSPhotoLibraryUsageDescription": "需要同意访问您的相册才能选取图片",
"NSCameraUsageDescription" : "需要同意访问您的摄像头才能拍摄照片", "NSCameraUsageDescription": "需要同意访问您的摄像头才能拍摄照片",
"NSUserTrackingUsageDescription" : "请放心,开启权限不会获取您在其他站点的隐私信息,该权限仅用于标识设备并保障服务安全与提升浏览体验" "NSUserTrackingUsageDescription": "请放心,开启权限不会获取您在其他站点的隐私信息,该权限仅用于标识设备并保障服务安全与提升浏览体验"
} }
}, },
/* ios打包配置 */ /* ios打包配置 */
"sdkConfigs" : { "sdkConfigs": {
"geolocation" : {}, "geolocation": {},
"ad" : {} "ad": {}
} }
}, },
"nvueLaunchMode" : "" "nvueLaunchMode": ""
}, },
/* SDK配置 */ /* SDK配置 */
"quickapp" : {}, "quickapp": {},
/* 快应用特有相关 */ /* 快应用特有相关 */
"mp-weixin" : { "mp-weixin": {
/* 微信小程序特有相关 */ /* 微信小程序特有相关 */
"appid" : "", "appid": "",
"setting" : { "setting": {
"urlCheck" : false "urlCheck": false
}, },
"usingComponents" : true "usingComponents": true
}, },
"mp-alipay" : { "mp-alipay": {
"usingComponents" : true "usingComponents": true
}, },
"mp-baidu" : { "mp-baidu": {
"usingComponents" : true "usingComponents": true
}, },
"mp-toutiao" : { "mp-toutiao": {
"usingComponents" : true "usingComponents": true
}, },
"mp-qq" : { "mp-qq": {
"usingComponents" : true "usingComponents": true
}, },
"h5" : { "h5": {
"template" : "../public/index.html", "template": "../public/index.html",
"router" : { "router": {
"mode" : "hash", "mode": "hash",
"base" : "" "base": ""
}, },
"optimization" : { "optimization": {
"treeShaking" : { "treeShaking": {
"enable" : true "enable": true
} }
}, },
"title" : "商城", "title": "商城",
"devServer" : { "devServer": {
"https" : false, "https": false,
"port" : "", "port": "",
"proxy" : { "proxy": {
"/dev" : { "/dev": {
// "target" : "http://47.96.138.212:8321", //"target" : "http://47.96.138.212:8321",
// "target" : "http://10.10.10.242/", //"target" : "http://10.10.10.242/",
// "target" : "http://10.10.10.31/", //"target" : "http://10.10.10.31/",
"target" : "http://10.10.10.118/", // "target": "http://10.10.10.118/",
// "target" : "http://10.10.10.132/", // "target": "http://10.10.10.108/",
// "target" : "http://octopus-dev.textile-saas.huansi.net/dev-api/", //"target" : "http://10.10.10.132/",
"changeOrigin" : true, "target": "http://octopus-dev.textile-saas.huansi.net/dev-api/",
"pathRewrite" : { "changeOrigin": true,
"^/dev" : "" "pathRewrite": {
"^/dev": ""
} }
} }
} }
} }
} }
} }
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>
<view class="brandsindex"> <view class="brandsindex">
<!-- 展示图 --> <!-- 展示图 -->
<view id="header" class="back_img"> <view id="header" class="back_img">
...@@ -30,14 +31,6 @@ ...@@ -30,14 +31,6 @@
:src="`${imgUrl}${item.originalImageCode}`" :src="`${imgUrl}${item.originalImageCode}`"
mode="" mode=""
></image> ></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> </view>
</u-card> </u-card>
...@@ -51,72 +44,108 @@ ...@@ -51,72 +44,108 @@
<view slot="body"> <view slot="body">
<view class="hotFlex"> <view class="hotFlex">
<hot-style <hot-style
v-if="hotStylePage.records.length > 0" :recordsList="hotStylePage"
:recordsList="hotStylePage.records" @update="update"
></hot-style> ></hot-style>
<!-- <hot-style></hot-style>
<hot-style></hot-style>
<hot-style></hot-style> -->
</view> </view>
</view> </view>
</u-card> </u-card>
</view> </view>
<view v-if="loadText" class="loadStyle">没有可用的数据了</view>
<!-- 导航条 -->
<hs-tab-bar></hs-tab-bar>
<!-- 底部占位符 --> <!-- 底部占位符 -->
<view class="mask-template"></view> <view class="mask-template"></view>
</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");
}, },
getList() { //更新
update() {
this.getList(1, 10);
},
// 款式列表分页查询接口
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"),
}, },
{ computed: {
id: 2, browseList() {
title: let dataInfo = {};
"新丰绿树起黄埃，数骑渔阳探使回，霓裳一曲千峰上，舞破中原始下来", this.list.forEach((item, index) => {
images: require("../../static/images/brank/thumb.png"), let { viewTime } = item;
show: false, if (!dataInfo[viewTime]) {
browseImg: require("../../static/images/brank/blackxin.png"), dataInfo[viewTime] = {
viewTime,
browseChild: [],
};
}
dataInfo[viewTime].browseChild.push(item);
});
return Object.values(dataInfo);
}, },
{
id: 3,
title: "登临送目，正故国晚秋，天气初肃。千里澄江似练，翠峰如簇",
images: require("../../static/images/brank/thumb.png"),
show: false,
browseImg: require("../../static/images/brank/blackxin.png"),
}, },
], 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);
}
}, },
methods: {},
}; };
</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 { } else {
this.list[index].show = false; this.selected.push(item);
this.$u.toast(`收藏成功`);
} }
}, },
// 取消收藏按钮
cancelCollection() {
let idItem = this.selected.map((el) => {
return el.id;
});
this.unCollectionFn(...idItem);
},
// 外部全选按钮
outsideChecked() {
if (this.playCheckout == true) {
this.selected = [];
} else {
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) { 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">
<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 <image
@click="tabdetail"
class="indexhot" class="indexhot"
src="@/static/images/brank/mei1.jpg" :src="item.imags"
@click="tabdetail(item)"
mode="aspectFill"
></image> ></image>
<view class="hotborder"> <view class="hotborder">
<view class="hotText1">{{ item.styleTag }}</view> <view class="hotText1">{{ item.styleTag }}</view>
<view class="hotText2"> <view class="hotText2">
<image class="iconhot" src="@/static/images/brank/mei1.jpg"></image> <image
<text class="wen">我的文字是dsadasdasddsads</text> class="iconhot"
:src="`${imgUrl}${item.originalImageCode}`"
mode="aspectFill"
></image>
<text class="wen">{{ item.materialName }}</text>
<image <image
class="iconLove" class="iconLove"
src="@/static/images/brank/blackxin.png" src="@/static/images/brank/blackxin.png"
v-if="ImageBool" v-if="!item.isFavorite"
@click="tabImage" @click="tabImage(item)"
></image> >
</image>
<image <image
class="iconLove" class="iconLove"
src="@/static/images/brank/lightxin.png" src="@/static/images/brank/lightxin.png"
v-else v-else
@click="tabImage" @click="tabImage(item)"
></image> ></image>
</view> </view>
</view> </view>
</view> </view>
</view>
</template> </template>
<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: {
// 点击切换心心选项
tabImage() {
this.ImageBool = !this.ImageBool;
},
// 跳转到详情 // 跳转到详情
tabdetail(item) { tabdetail(item) {
// console.log("KKK");
this.$router.push("/pages/brands/detail?id=" + item.id); 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,7 +33,7 @@ ...@@ -28,7 +33,7 @@
</template> </template>
<script> <script>
export default { export default {
name: "hs-material-thumbnail", name: "hs-material-thumbnail",
props: { props: {
item: { item: {
...@@ -37,22 +42,24 @@ ...@@ -37,22 +42,24 @@
}, },
colourApiList: { colourApiList: {
type: Array, type: Array,
default: [] default: () => [],
} },
}, },
data() { data() {
return {}; return {
imgUrl: this.$IMG_URL, // 上传地址
};
}, },
methods: { methods: {
click() { click() {
this.$emit("click"); this.$emit("click");
}, },
}, },
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.home_con_content_order { .home_con_content_order {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -74,34 +81,34 @@ ...@@ -74,34 +81,34 @@
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;
...@@ -114,11 +121,11 @@ ...@@ -114,11 +121,11 @@
transform: scale(0.5, 0.5); transform: scale(0.5, 0.5);
border: 1px dashed #e4e7ed; border: 1px dashed #e4e7ed;
z-index: 2; z-index: 2;
} }
.ov_hiden { .ov_hiden {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
</style> </style>
src/pages/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,41 +19,38 @@ ...@@ -16,41 +19,38 @@
<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>
<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>
</view> </view>
</view> </view>
...@@ -59,59 +59,99 @@ ...@@ -59,59 +59,99 @@
<!-- 这个空的是为了让下面那个不盖住内容 --> <!-- 这个空的是为了让下面那个不盖住内容 -->
<view class="mask-template"></view> <view class="mask-template"></view>
<view class="sampling"> <view class="sampling">
<u-button>我要采购布样</u-button> <u-button @click="samplingFn">我要采购布样</u-button>
</view> </view>
</view> </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> </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() { data() {
return { return {
tabledata:{}, show: false,
background: {
backgroundColor: "rgba(245,245,245,0)",
}, //颜色透明
tabledata: {},
item: {}, item: {},
id: "", id: "",
imgUrl: this.$IMG_URL, // 上传地址 imgUrl: this.$IMG_URL, // 上传地址
smapTelePhone: "", //联系人电话
}; };
}, },
watch: { watch: {
id: { id: {
handler() { handler() {
console.log("oid"); this.detail();
this.detail() },
} },
}
}, },
created() { created() {
this.detail() this.detail();
}, },
onLoad(options) { onLoad(options) {
this.id = options.id; this.id = options.id;
}, },
methods: { methods: {
// 采样按钮
samplingFn() {
this.show = true;
this.supplierFn(this.$route.query.id);
},
// 取消
cancel() {
this.show = false;
},
// 拨打
call() {
uni.makePhoneCall({
phoneNumber: this.smapTelePhone,
});
},
// 详情接口
detail() { detail() {
let param = { let param = {
id: this.id id: this.id,
} };
this.$http('mobileBrand.styleDetail', param).then(res => { this.$http("mobileBrand.styleDetail", param).then((res) => {
let { let { code, data } = res;
code,
data
} = res;
if (code === 200) { if (code === 200) {
this.tabledata=data this.tabledata = data;
this.item=data.materialInfo this.item = data.materialInfo;
} }
}); });
}
}, },
// 面料商联系方式接口
supplierFn(item) {
let param = {
id: item,
}; };
this.$http("mobileBrand.supplierInfo", param).then((res) => {
let { code, data } = res;
if (code === 200) {
this.smapTelePhone = data.phoneNumber;
}
});
},
},
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -161,36 +201,19 @@ $main-color: #fff; ...@@ -161,36 +201,19 @@ $main-color: #fff;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
} }
}
// 我要采购布样 .u-line-88 {
.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;
}
}
.u-line-88 {
line-height: 88rpx; line-height: 88rpx;
} }
.bg-fff { .bg-fff {
position: relative; position: relative;
top: -10rpx; top: -10rpx;
background: #fff; background: #fff;
} }
.item { .item {
width: 100%; width: 100%;
margin-bottom: 28rpx; margin-bottom: 28rpx;
...@@ -207,9 +230,9 @@ $main-color: #fff; ...@@ -207,9 +230,9 @@ $main-color: #fff;
display: inline-block; display: inline-block;
margin-right: 10rpx; margin-right: 10rpx;
} }
} }
.image { .image {
position: relative; position: relative;
width: 160rpx; width: 160rpx;
height: 160rpx; height: 160rpx;
...@@ -226,10 +249,40 @@ $main-color: #fff; ...@@ -226,10 +249,40 @@ $main-color: #fff;
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
} }
.overflow { .overflow {
overflow-x: auto; overflow-x: auto;
white-space: nowrap; white-space: nowrap;
}
// 弹出拨打号码
.telephone {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
.tele {
display: inline-block;
width: 100%;
text-align: center;
} }
.cacle {
width: 100%;
display: flex;
justify-content: space-around;
.cacleStyle {
&:hover {
color: #3144be;
cursor: pointer;
}
}
.callStyle {
&:hover {
color: #3144be;
cursor: pointer;
}
}
}
}
</style> </style>
src/pages/brands/everyDay.vue
View file @ 1dbd0299
...@@ -8,13 +8,20 @@ ...@@ -8,13 +8,20 @@
--> -->
<template> <template>
<!-- 每日上新 --> <!-- 每日上新 -->
<view>
<u-card full :head-border-bottom="false"> <u-card full :head-border-bottom="false">
<view slot="body"> <view slot="body">
<view class="hotFlex"> <view class="hotFlex">
<hot-style v-if="recordsList.length>0" :recordsList="recordsList"></hot-style> <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() { //更新
update() {
this.materialDetail(1, 10);
},
// 每日上新接口
materialDetail(current, size) {
let param = { let param = {
"current": 1, current: current,
"size": 10, size: size,
"styleTag": "" styleTag: "",
} };
this.$http('mobileBrand.dailyNewStylePage', param).then(res => { this.$http("mobileBrand.dailyNewStylePage", param).then((res) => {
let { let { code, data } = res;
code,
data
} = res;
if (code === 200) { if (code === 200) {
this.recordsList = data.records; if (current == 1) {
console.log(this.recordsList,"this.recordsList"); 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