Skip to content

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

品牌商移动端基本完成

parent e1b9231b
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
{ {
"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及以上版本支持
/* 5+App特有相关 */
"usingComponents" : true,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
"safearea" : {
//APP底部安全区域
"background" : "#fff",
"bottom" : {
"offset" : "auto"
}
},
"compilerVersion" : 3,
"nvueCompiler" : "uni-app",
"modules" : {
"Maps" : {},
"OAuth" : {},
"Payment" : {},
"Share" : {},
"VideoPlayer" : {},
"Geolocation" : {}
},
/* 模块配置 */
"distribute" : {
/* 应用发布信息 */
"android" : {
/* android打包配置 */
"permissions" : [
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
],
"abiFilters" : [ "armeabi-v7a", "arm64-v8a", "x86" ],
"autoSdkPermissions" : true
},
"ios" : {
"capabilities" : {
"entitlements" : {
"com.apple.developer.associated-domains" : [ "applinks:m.*****.top" ]
}
},
"privacyDescription" : {
"NSLocationAlwaysAndWhenInUseUsageDescription" : "需要同意获取您的位置信息才能展示附近信息",
"NSLocationAlwaysUsageDescription" : "需要同意获取您的位置信息才能展示附近信息",
"NSLocationWhenInUseUsageDescription" : "需要同意获取您的位置信息才能展示附近信息",
"NSPhotoLibraryAddUsageDescription" : "需要同意访问您的相册才能保存图片",
"NSPhotoLibraryUsageDescription" : "需要同意访问您的相册才能选取图片",
"NSCameraUsageDescription" : "需要同意访问您的摄像头才能拍摄照片",
"NSUserTrackingUsageDescription" : "请放心,开启权限不会获取您在其他站点的隐私信息,该权限仅用于标识设备并保障服务安全与提升浏览体验"
}
},
/* ios打包配置 */
"sdkConfigs" : {
"geolocation" : {},
"ad" : {}
}
},
"nvueLaunchMode" : ""
}, },
/* SDK配置 */ // true表示忽略版本检查提示框，HBuilderX1.9.0及以上版本支持
"quickapp" : {}, /* 5+App特有相关 */
/* 快应用特有相关 */ "usingComponents": true,
"mp-weixin" : { "splashscreen": {
/* 微信小程序特有相关 */ "alwaysShowBeforeRender": true,
"appid" : "", "waiting": true,
"setting" : { "autoclose": true,
"urlCheck" : false "delay": 0
},
"usingComponents" : true
}, },
"mp-alipay" : { "safearea": {
"usingComponents" : true //APP底部安全区域
"background": "#fff",
"bottom": {
"offset": "auto"
}
}, },
"mp-baidu" : { "compilerVersion": 3,
"usingComponents" : true "nvueCompiler": "uni-app",
"modules": {
"Maps": {},
"OAuth": {},
"Payment": {},
"Share": {},
"VideoPlayer": {},
"Geolocation": {}
}, },
"mp-toutiao" : { /* 模块配置 */
"usingComponents" : true "distribute": {
/* 应用发布信息 */
"android": {
/* android打包配置 */
"permissions": [
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
],
"abiFilters": ["armeabi-v7a", "arm64-v8a", "x86"],
"autoSdkPermissions": true
},
"ios": {
"capabilities": {
"entitlements": {
"com.apple.developer.associated-domains": ["applinks:m.*****.top"]
}
},
"privacyDescription": {
"NSLocationAlwaysAndWhenInUseUsageDescription": "需要同意获取您的位置信息才能展示附近信息",
"NSLocationAlwaysUsageDescription": "需要同意获取您的位置信息才能展示附近信息",
"NSLocationWhenInUseUsageDescription": "需要同意获取您的位置信息才能展示附近信息",
"NSPhotoLibraryAddUsageDescription": "需要同意访问您的相册才能保存图片",
"NSPhotoLibraryUsageDescription": "需要同意访问您的相册才能选取图片",
"NSCameraUsageDescription": "需要同意访问您的摄像头才能拍摄照片",
"NSUserTrackingUsageDescription": "请放心,开启权限不会获取您在其他站点的隐私信息,该权限仅用于标识设备并保障服务安全与提升浏览体验"
}
},
/* ios打包配置 */
"sdkConfigs": {
"geolocation": {},
"ad": {}
}
}, },
"mp-qq" : { "nvueLaunchMode": ""
"usingComponents" : true },
/* SDK配置 */
"quickapp": {},
/* 快应用特有相关 */
"mp-weixin": {
/* 微信小程序特有相关 */
"appid": "",
"setting": {
"urlCheck": false
}, },
"h5" : { "usingComponents": true
"template" : "../public/index.html", },
"router" : { "mp-alipay": {
"mode" : "hash", "usingComponents": true
"base" : "" },
}, "mp-baidu": {
"optimization" : { "usingComponents": true
"treeShaking" : { },
"enable" : true "mp-toutiao": {
} "usingComponents": true
}, },
"title" : "商城", "mp-qq": {
"devServer" : { "usingComponents": true
"https" : false, },
"port" : "", "h5": {
"proxy" : { "template": "../public/index.html",
"/dev" : { "router": {
// "target" : "http://47.96.138.212:8321", "mode": "hash",
// "target" : "http://10.10.10.242/", "base": ""
// "target" : "http://10.10.10.31/", },
"target" : "http://10.10.10.118/", "optimization": {
// "target" : "http://10.10.10.132/", "treeShaking": {
// "target" : "http://octopus-dev.textile-saas.huansi.net/dev-api/", "enable": true
"changeOrigin" : true, }
"pathRewrite" : { },
"^/dev" : "" "title": "商城",
} "devServer": {
} "https": false,
} "port": "",
"proxy": {
"/dev": {
//"target" : "http://47.96.138.212:8321",
//"target" : "http://10.10.10.242/",
//"target" : "http://10.10.10.31/",
// "target": "http://10.10.10.118/",
// "target": "http://10.10.10.108/",
//"target" : "http://10.10.10.132/",
"target": "http://octopus-dev.textile-saas.huansi.net/dev-api/",
"changeOrigin": true,
"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 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
...@@ -2,47 +2,64 @@ ...@@ -2,47 +2,64 @@
<view> <view>
<!--导航栏 navbar--> <!--导航栏 navbar-->
<view id="header"> <view id="header">
<u-navbar :title="title" <u-navbar
:border-bottom="false" :title="title"
:background="{backgroundColor: 'whitesmoke'}"> :border-bottom="false"
:background="{ backgroundColor: 'whitesmoke' }"
>
</u-navbar> </u-navbar>
</view> </view>
<view class="body " :style="{ bottom: footerHeight + 'px', top: headerHeight+ 'px'}"> <view
class="body"
:style="{ bottom: footerHeight + 'px', top: headerHeight + 'px' }"
>
<view class="u-relative"> <view class="u-relative">
<!-- <u-image height="750rpx" :src="`${$IMG_URL}${detail.originalImageCode}`"></u-image>--> <!-- <u-image height="750rpx" :src="`${$IMG_URL}${detail.originalImageCode}`"></u-image>-->
<view > <view>
<!-- <image :src="`${$IMG_URL}${detail.originalImageCode}`" mode="heightFix" class="height-750rpx"></image>--> <!-- <image :src="`${$IMG_URL}${detail.originalImageCode}`" mode="heightFix" class="height-750rpx"></image>-->
<image :style="{ <image
'--src': `url(${$IMG_URL}${detail.originalImageCode})`, :style="{
'--transform': `rotate(${angle}deg)` '--src': `url(${$IMG_URL}${detail.originalImageCode})`,
'--transform': `rotate(${angle}deg)`,
}" }"
src="./img.png" mode="heightFix" class="height-750rpx view"></image> src=""
mode="heightFix"
class="height-750rpx view"
></image>
</view> </view>
<view v-if="!isEdit"> <view v-if="!isEdit">
<view class="u-absolute prev" <view
@click="routerPush(true)" class="u-absolute prev"
v-if="!isFirst">上一款</view> @click="routerPush(true)"
<view class="u-absolute next" v-if="!isFirst"
@click="routerPush(false)" >上一款</view
v-if="!isLast">下一款</view> >
<view
class="u-absolute next"
@click="routerPush(false)"
v-if="!isLast"
>下一款</view
>
</view> </view>
<view :class="[ !isEdit ? 'hide':'active']" <view
class="u-absolute step u-p-r-30 u-p-l-30"> :class="[!isEdit ? 'hide' : 'active']"
class="u-absolute step u-p-r-30 u-p-l-30"
>
<view class="step-main u-p-r-20 u-p-l-20 u-flex"> <view class="step-main u-p-r-20 u-p-l-20 u-flex">
<text class="width_100">{{angle}}°</text> <text class="width_100">{{ angle }}°</text>
<view class="u-relative u-flex-1"> <view class="u-relative u-flex-1">
<view class="line" id="line"> <view class="line" id="line">
<view class="line-center"></view> <view class="line-center"></view>
<view class="line-step" id="line-step" <view
:style="{ class="line-step"
left: id="line-step"
(offset.x - lineOffset.left) / lineWidth * 100 :style="{
+ '%' left:
}" ((offset.x - lineOffset.left) / lineWidth) * 100 + '%',
@touchmove="touchMove" }"
@touchend="touchEnd" @touchmove="touchMove"
@touchstart="touchStart" @touchend="touchEnd"
@touchstart="touchStart"
/> />
</view> </view>
</view> </view>
...@@ -58,52 +75,64 @@ ...@@ -58,52 +75,64 @@
可调整部位 可调整部位
</view> </view>
<view class="overflow u-p-b-24"> <view class="overflow u-p-b-24">
<view class="button inline-block" <view
:class="[ class="button inline-block"
activePartIndex === index ? 'active':'', :class="[
filterPartActive(part) ? 'changed' : '', activePartIndex === index ? 'active' : '',
]" filterPartActive(part) ? 'changed' : '',
@click="partClick(index)" ]"
v-for="(part,index) in parts"> @click="partClick(index)"
{{ v-for="(part, index) in parts"
part.isMainBodyPart === 1 ? '主身' : `部位${index}` >
}} {{ part.isMainBodyPart === 1 ? "主身" : `部位${index}` }}
</view> </view>
</view> </view>
<view v-if="isEdit"> <view v-if="isEdit">
<view class="u-p-b-20" > <view class="u-p-b-20">
<u-search placeholder="请输入面料名称" v-model="keyword" <u-search
border-color="#e1e1e1" height="76" placeholder="请输入面料名称"
bg-color="#fff" :show-action="false"></u-search> v-model="keyword"
border-color="#e1e1e1"
height="76"
bg-color="#fff"
:show-action="false"
></u-search>
</view> </view>
<view class="overflow u-p-b-30 u-border-bottom"> <view class="overflow u-p-b-30 u-border-bottom">
<view class="image u-m-r-10 " <view
@click="triggerSelectedMaterial(color)" class="image u-m-r-10"
:class="[selectedMaterial.id === color.id ? 'active':'']" @click="triggerSelectedMaterial(color)"
v-for="color in MaterialList"> :class="[selectedMaterial.id === color.id ? 'active' : '']"
<image src="" style="width: 100%;height: 100%"></image> v-for="color in MaterialList"
>
<image src="" style="width: 100%; height: 100%"></image>
<view class="image-tip u-line-1">{{ color.materialName }}</view> <view class="image-tip u-line-1">{{ color.materialName }}</view>
</view> </view>
</view> </view>
<view class="overflow" <view class="overflow" v-if="selectedMaterialItemColors.length > 0">
v-if="selectedMaterialItemColors.length > 0"> <u-image
<u-image :src="`${$IMG_URL}${item.color}`" :src="`${$IMG_URL}${item.color}`"
width="80rpx" height="80rpx" width="80rpx"
:class="[activeColor.id === item.id ? 'active':'']" height="80rpx"
shape="circle" :class="[activeColor.id === item.id ? 'active' : '']"
@click="setActiveColor(item)" shape="circle"
:key="item.id" @click="setActiveColor(item)"
v-for="(item) in selectedMaterialItemColors" :key="item.id"
class="u-m-r-20 inline-block color-item" v-for="item in selectedMaterialItemColors"
class="u-m-r-20 inline-block color-item"
></u-image> ></u-image>
</view> </view>
<view class="u-p-t-30 u-p-b-20 text-right"> <view class="u-p-t-30 u-p-b-20 text-right">
<view class="button inline-block button-plain button-plain-default"
@click="cancelMaterialItem"
>取消</view>
<view <view
@click="setMaterialItem" class="button inline-block button-plain button-plain-default"
class="button inline-block button-default">确定</view> @click="cancelMaterialItem"
>取消</view
>
<view
@click="setMaterialItem"
class="button inline-block button-default"
>确定</view
>
</view> </view>
</view> </view>
</view> </view>
...@@ -117,21 +146,34 @@ ...@@ -117,21 +146,34 @@
<view class="">主图颜色</view> <view class="">主图颜色</view>
<view> <view>
<view v-if="isEditMode"> <view v-if="isEditMode">
<view class="image u-m-r-10" <view
:class="[ class="image u-m-r-10"
activeMainPartBodyColorId === color.mdmMaterialColourId ? 'active' : '' :class="[
]" activeMainPartBodyColorId === color.mdmMaterialColourId
@click="colorSelect(color,selectColorList)" ? 'active'
v-for="color in selectColorList"> : '',
<image :src="`${$IMG_URL}${color.fileCode}`" style="width: 100%;height: 100%" mode="aspectFit"></image> ]"
@click="colorSelect(color, selectColorList)"
v-for="color in selectColorList"
>
<image
:src="`${$IMG_URL}${color.fileCode}`"
style="width: 100%; height: 100%"
mode="aspectFit"
></image>
<view class="image-tip u-line-1">{{ color.colour }}</view> <view class="image-tip u-line-1">{{ color.colour }}</view>
</view> </view>
</view> </view>
<view v-if="!isEditMode"> <view v-if="!isEditMode">
<view class="image u-m-r-10" <view class="image u-m-r-10" v-for="color in mainPartBodyColor">
v-for="color in mainPartBodyColor"> <image
<image :src="`${$IMG_URL}${color.fileCode}`" style="width: 100%;height: 100%" mode="aspectFit"></image> :src="`${$IMG_URL}${color.fileCode}`"
<view class="image-tip u-line-1">{{ color.colourApi.describes}}</view> style="width: 100%; height: 100%"
mode="aspectFit"
></image>
<view class="image-tip u-line-1">{{
color.colourApi.describes
}}</view>
</view> </view>
</view> </view>
</view> </view>
...@@ -143,21 +185,39 @@ ...@@ -143,21 +185,39 @@
</view> </view>
<view> <view>
<view v-if="isEditMode"> <view v-if="isEditMode">
<view class="image u-m-r-10" <view
:class="[ class="image u-m-r-10"
mainPartOtherColor.map((item) => item.mdmMaterialColourId).indexOf(color.mdmMaterialColourId) > -1 ? 'active' : '' :class="[
]" mainPartOtherColor
@click="colorSelects(color,selectColorList)" .map((item) => item.mdmMaterialColourId)
v-for="color in selectColorList"> .indexOf(color.mdmMaterialColourId) > -1
<image :src="`${$IMG_URL}${color.fileCode}`" style="width: 100%;height: 100%" mode="aspectFit"></image> ? 'active'
<view class="image-tip u-line-1">{{ color.colour}}</view> : '',
]"
@click="colorSelects(color, selectColorList)"
v-for="color in selectColorList"
>
<image
:src="`${$IMG_URL}${color.fileCode}`"
style="width: 100%; height: 100%"
mode="aspectFit"
></image>
<view class="image-tip u-line-1">{{ color.colour }}</view>
</view> </view>
</view> </view>
<view v-if="!isEditMode"> <view v-if="!isEditMode">
<view class="image u-m-r-10" <view
v-for="color in mainPartOtherColor"> class="image u-m-r-10"
<image :src="`${$IMG_URL}${color.fileCode}`" style="width: 100%;height: 100%" mode="aspectFit"></image> v-for="color in mainPartOtherColor"
<view class="image-tip u-line-1">{{ color.colourApi.describes}}</view> >
<image
:src="`${$IMG_URL}${color.fileCode}`"
style="width: 100%; height: 100%"
mode="aspectFit"
></image>
<view class="image-tip u-line-1">{{
color.colourApi.describes
}}</view>
</view> </view>
</view> </view>
</view> </view>
...@@ -168,13 +228,18 @@ ...@@ -168,13 +228,18 @@
<view id="footer" class="footer"> <view id="footer" class="footer">
<view class="footer-btn"> <view class="footer-btn">
<view class="button button-default button-plain button-plain--default" <view
@click="submit" class="button button-default button-plain button-plain--default"
v-if="isEditMode"> @click="submit"
v-if="isEditMode"
>
加入待上架 加入待上架
</view> </view>
<view class="button button-plain button-plain--default" <view
v-if="!isEditMode" @click="cancel"> class="button button-plain button-plain--default"
v-if="!isEditMode"
@click="cancel"
>
取消上架 取消上架
</view> </view>
</view> </view>
...@@ -193,14 +258,10 @@ import material from "./mixins/material"; ...@@ -193,14 +258,10 @@ import material from "./mixins/material";
export default { export default {
name: "createMaterial", name: "createMaterial",
mixins:[dom,step,material], mixins: [dom, step, material],
data(){ data() {
return { return {
keyword: "",
keyword: '',
isEdit: false, isEdit: false,
...@@ -220,101 +281,107 @@ export default { ...@@ -220,101 +281,107 @@ export default {
selectedMaterialItemColor: {}, selectedMaterialItemColor: {},
activeColor: {}, activeColor: {},
styleLibraryMaterialDTOList: [], styleLibraryMaterialDTOList: [],
// 过滤数据 // 过滤数据
filteredMaterialColorList: [], filteredMaterialColorList: [],
// activePart: {}, // activePart: {},
materialId: '', materialId: "",
activePartIndex: -1, activePartIndex: -1,
submitData: [] submitData: [],
} };
}, },
computed:{ computed: {
// 部位 // 部位
parts(){ parts() {
return (this.detail.styleLibraryPictureVOList || []).sort((a,b) =>{ return (this.detail.styleLibraryPictureVOList || []).sort((a, b) => {
return a.isMainBodyPart - b.isMainBodyPart < -1 return a.isMainBodyPart - b.isMainBodyPart < -1;
}) });
}, },
selectedMaterialItemColors(){ selectedMaterialItemColors() {
let key = (this.selectedMaterialItem.materialColourVOList || []).map((item) => item.colourId); let key = (this.selectedMaterialItem.materialColourVOList || []).map(
return this.colors.filter((item) => key.indexOf(item.id) > -1) (item) => item.colourId
.map(item => { );
return { return this.colors
...item, .filter((item) => key.indexOf(item.id) > -1)
mdmMaterialColourId: item.id, .map((item) => {
materialId: this.selectedMaterialItem.id return {
} ...item,
}) mdmMaterialColourId: item.id,
materialId: this.selectedMaterialItem.id,
};
});
}, },
index(){ index() {
return this.list.findIndex(item => item.id === this.detail.id); return this.list.findIndex((item) => item.id === this.detail.id);
}, },
isLast(){ isLast() {
return this.index === this.list.length - 1 return this.index === this.list.length - 1;
}, },
isFirst(){ isFirst() {
return this.index === 0 return this.index === 0;
}, },
isEditMode(){ isEditMode() {
return this.detail.putawayStatus === 1 return this.detail.putawayStatus === 1;
}, },
// 默认的物料颜色可选 // 默认的物料颜色可选
defaultColorList(){ defaultColorList() {
let key = (this.materialDetail.materialColourVOList || []).map((item) => item.colourId); let key = (this.materialDetail.materialColourVOList || []).map(
return this.colors.filter((item) => key.indexOf(item.id) > -1) (item) => item.colourId
.map((item) =>{ );
return { return this.colors
...item, .filter((item) => key.indexOf(item.id) > -1)
materialId: this.materialId .map((item) => {
} return {
}) ...item,
materialId: this.materialId,
};
});
}, },
// 可选颜色过滤 // 可选颜色过滤
selectColorList(){ selectColorList() {
// 如果部位是主体 且 存在信息则回填老的数据 // 如果部位是主体 且 存在信息则回填老的数据
if(this.mainPart.length !== 0){ if (this.mainPart.length !== 0) {
return this.mainPart[0].materialColoursList.map((item) => { return this.mainPart[0].materialColoursList.map((item) => {
return { return {
...item, ...item,
colour: item.colourName || item.colour, colour: item.colourName || item.colour,
mdmMaterialColourId: item.colourId || item.mdmMaterialColourId mdmMaterialColourId: item.colourId || item.mdmMaterialColourId,
} };
}) });
}else{ } else {
return this.defaultColorList.map((item) => { return this.defaultColorList.map((item) => {
return { return {
...item, ...item,
mdmMaterialColourId: item.id mdmMaterialColourId: item.id,
} };
}) });
} }
}, },
// //
mainPart(){ mainPart() {
return this.submitData.filter((item) => item.isMainBodyPart === 1 && !item.isDeleted) return this.submitData.filter(
(item) => item.isMainBodyPart === 1 && !item.isDeleted
);
}, },
// 主图颜色 选中的颜色 // 主图颜色 选中的颜色
mainPartBodyColor(){ mainPartBodyColor() {
return this.mainPart.filter((item) => item.type === 1); return this.mainPart.filter((item) => item.type === 1);
}, },
// 主图颜色 其他选中的颜色 // 主图颜色 其他选中的颜色
mainPartOtherColor(){ mainPartOtherColor() {
return this.mainPart.filter((item) => item.type !== 1); return this.mainPart.filter((item) => item.type !== 1);
}, },
// 主图颜色 其他选中的颜色 // 主图颜色 其他选中的颜色
activeMainPartBodyColorId(){ activeMainPartBodyColorId() {
return this.mainPartBodyColor[0]?.mdmMaterialColourId return this.mainPartBodyColor[0]?.mdmMaterialColourId;
} },
}, },
created() { created() {
let {id,materialId} = this.$Route.query; let { id, materialId } = this.$Route.query;
this.materialId = materialId; this.materialId = materialId;
this.getItem(id); this.getItem(id);
this.getList(); this.getList();
...@@ -324,39 +391,40 @@ export default { ...@@ -324,39 +391,40 @@ export default {
this.getMaterialItem(materialId); this.getMaterialItem(materialId);
this.getMaterialList(); this.getMaterialList();
}, },
methods:{ methods: {
filterPartActive(part){ filterPartActive(part) {
let data = this.submitData.filter((item) => let data = this.submitData.filter(
!item.isDeleted && (item) => !item.isDeleted && part.id === item.styleLibraryPictureId
part.id === item.styleLibraryPictureId
); );
return data.length > 0; return data.length > 0;
}, },
ontherPartTrigger(color,colors){ ontherPartTrigger(color, colors) {
let $data = this.submitData; let $data = this.submitData;
let activePart = this.parts[this.activePartIndex]; let activePart = this.parts[this.activePartIndex];
let index = $data.findIndex((item) => let index = $data.findIndex(
item.styleLibraryPictureId === activePart.id (item) => item.styleLibraryPictureId === activePart.id
); );
if(index > -1){ if (index > -1) {
let item = $data[index]; let item = $data[index];
if(item.id){ if (item.id) {
this.$set($data,index,{ this.$set($data, index, {
...item, ...item,
isDeleted: !$data[index]['isDeleted'] isDeleted: !$data[index]["isDeleted"],
}) });
}else{ } else {
$data.splice(index,1); $data.splice(index, 1);
} }
} }
$data.push({ $data.push({
materialColoursList: colors, materialColoursList: colors,
isMainBodyPart: 0,type: 0, isDeleted: false, isMainBodyPart: 0,
type: 0,
isDeleted: false,
mdmMaterialId: color.materialId, mdmMaterialId: color.materialId,
mdmMaterialColourId: color.mdmMaterialColourId, mdmMaterialColourId: color.mdmMaterialColourId,
styleLibraryPictureId: activePart.id, styleLibraryPictureId: activePart.id,
styleLibrayId: activePart.styleLibrayId, styleLibrayId: activePart.styleLibrayId,
}) });
// if() // if()
// $data.push({ // $data.push({
// materialColoursList: colors, // materialColoursList: colors,
...@@ -368,275 +436,272 @@ export default { ...@@ -368,275 +436,272 @@ export default {
// }) // })
}, },
// //
setMaterialItem(){ setMaterialItem() {
if(this.activePartIndex === 0){ if (this.activePartIndex === 0) {
this.materialDetail = this.selectedMaterialItem; this.materialDetail = this.selectedMaterialItem;
this.colorSelect(this.activeColor,this.selectedMaterialItemColors); this.colorSelect(this.activeColor, this.selectedMaterialItemColors);
}else{ } else {
this.ontherPartTrigger(this.activeColor,this.selectedMaterialItemColors); this.ontherPartTrigger(
this.activeColor,
this.selectedMaterialItemColors
);
} }
this.activeColor = {} this.activeColor = {};
this.isEdit = false; this.isEdit = false;
}, },
cancelMaterialItem(){ cancelMaterialItem() {
this.isEdit = false; this.isEdit = false;
}, },
setActiveColor(color){ setActiveColor(color) {
this.activeColor = { this.activeColor = {
...color, ...color,
materialId: this.selectedMaterialItem.id, materialId: this.selectedMaterialItem.id,
mdmMaterialColourId: color.id mdmMaterialColourId: color.id,
}; };
}, },
pageReload(){ pageReload() {
this.$Router.replace({ this.$Router.replace({
path: 'pages/material/createMaterial', path: "pages/material/createMaterial",
query: this.$Route.query query: this.$Route.query,
}) });
}, },
// 加入待上架 // 加入待上架
submit(){ submit() {
let data = { let data = {
styleLibraryMaterialDTOList: this.submitData, styleLibraryMaterialDTOList: this.submitData,
styleOrderId: this.detail.styleOrderId, styleOrderId: this.detail.styleOrderId,
styleLibraryId: this.detail.id, styleLibraryId: this.detail.id,
} };
this.$http("stylelibraryorder.addToShelves",data) this.$http("stylelibraryorder.addToShelves", data).then((res) => {
.then(res =>{ let { code, msg } = res;
let { if (code === 200) {
code, msg
} = res;
if(code === 200){
this.pageReload(); this.pageReload();
}else{ } else {
this.$refs.uToast.show({ this.$refs.uToast.show({
title: msg title: msg,
}) });
} }
}) });
}, },
// 取消上架 // 取消上架
cancel(){ cancel() {
this.$http("stylelibraryorder.unlisted", { id: this.detail.styleOrderId}) this.$http("stylelibraryorder.unlisted", {
.then(res => { id: this.detail.styleOrderId,
let { }).then((res) => {
code,msg let { code, msg } = res;
} = res; if (code === 200) {
if(code === 200){ this.pageReload();
this.pageReload(); } else {
}else{ this.$refs.uToast.show({
this.$refs.uToast.show({ title: msg,
title: msg });
}) }
} });
})
}, },
// 主体颜色选择 // 主体颜色选择
// 判断是否已有主体选择 // 判断是否已有主体选择
// 清除其他可选 // 清除其他可选
colorSelect(color,colors){ colorSelect(color, colors) {
let $data = this.submitData; let $data = this.submitData;
let index = $data.findIndex((item) => let index = $data.findIndex(
(item) =>
item.mdmMaterialColourId === color.mdmMaterialColourId && item.mdmMaterialColourId === color.mdmMaterialColourId &&
item.type === 1 && item.type === 1 &&
item.isMainBodyPart === 1 item.isMainBodyPart === 1
); );
if(this.activeMainPartBodyColorId){ if (this.activeMainPartBodyColorId) {
let index = $data.findIndex((item) => let index = $data.findIndex(
(item) =>
item.mdmMaterialColourId === this.activeMainPartBodyColorId && item.mdmMaterialColourId === this.activeMainPartBodyColorId &&
item.type === 1 && item.type === 1 &&
item.isMainBodyPart === 1 item.isMainBodyPart === 1
); );
let item = $data[index]; let item = $data[index];
if(item.id){ if (item.id) {
this.$set($data,index,{ this.$set($data, index, {
...$data[index], ...$data[index],
isDeleted: !$data[index]['isDeleted'] isDeleted: !$data[index]["isDeleted"],
}) });
}else{ } else {
$data.splice(index,1) $data.splice(index, 1);
} }
} }
// 清除数据 // 清除数据
if(index > -1){ if (index > -1) {
let item = $data[index]; let item = $data[index];
if(item.id){ if (item.id) {
this.$set($data,index,{ this.$set($data, index, {
...$data[index], ...$data[index],
isDeleted: !$data[index]['isDeleted'] isDeleted: !$data[index]["isDeleted"],
}) });
}else{ } else {
$data.splice(index,1) $data.splice(index, 1);
} }
}else{ } else {
$data.push({ $data.push({
materialColoursList: colors, materialColoursList: colors,
isMainBodyPart: 1,type: 1, isDeleted: false, isMainBodyPart: 1,
type: 1,
isDeleted: false,
mdmMaterialId: color.materialId, mdmMaterialId: color.materialId,
mdmMaterialColourId: color.mdmMaterialColourId, mdmMaterialColourId: color.mdmMaterialColourId,
styleLibraryPictureId: this.parts[0].id, styleLibraryPictureId: this.parts[0].id,
styleLibrayId: this.parts[0].styleLibrayId, styleLibrayId: this.parts[0].styleLibrayId,
}) });
} }
this.clearColor(color) this.clearColor(color);
}, },
clearColor(color){ clearColor(color) {
let $data = this.submitData; let $data = this.submitData;
let index = $data.findIndex((item) => let index = $data.findIndex(
(item) =>
item.mdmMaterialColourId === color.mdmMaterialColourId && item.mdmMaterialColourId === color.mdmMaterialColourId &&
item.type === 2 && item.type === 2 &&
item.isMainBodyPart === 1 item.isMainBodyPart === 1
); );
if(index > -1){ if (index > -1) {
let item = $data[index]; let item = $data[index];
if(item.id){ if (item.id) {
this.$set($data,index,{ this.$set($data, index, {
...item, ...item,
isDeleted: !$data[index]['isDeleted'] isDeleted: !$data[index]["isDeleted"],
}) });
}else{ } else {
$data.splice(index,1); $data.splice(index, 1);
} }
} }
}, },
colorSelects(color,colors){ colorSelects(color, colors) {
if(color.mdmMaterialColourId === this.activeMainPartBodyColorId) return; if (color.mdmMaterialColourId === this.activeMainPartBodyColorId) return;
let $data = this.submitData; let $data = this.submitData;
let index = $data.findIndex((item) => let index = $data.findIndex(
(item) =>
item.mdmMaterialColourId === color.mdmMaterialColourId && item.mdmMaterialColourId === color.mdmMaterialColourId &&
item.type === 0 item.type === 0
); );
// 清除数据 // 清除数据
if(index > -1){ if (index > -1) {
let item = $data[index]; let item = $data[index];
if(item.id){ if (item.id) {
this.$set($data,index,{ this.$set($data, index, {
...$data[index], ...$data[index],
isDeleted: true isDeleted: true,
}) });
}else{ } else {
$data.splice(index,1) $data.splice(index, 1);
} }
}else{ } else {
$data.push({ $data.push({
materialColoursList: colors, materialColoursList: colors,
isMainBodyPart: 1,type: 0, isDeleted: false, isMainBodyPart: 1,
type: 0,
isDeleted: false,
mdmMaterialId: color.materialId, mdmMaterialId: color.materialId,
mdmMaterialColourId: color.mdmMaterialColourId, mdmMaterialColourId: color.mdmMaterialColourId,
styleLibraryPictureId: this.parts[0].id, styleLibraryPictureId: this.parts[0].id,
styleLibrayId: this.parts[0].styleLibrayId styleLibrayId: this.parts[0].styleLibrayId,
}) });
} }
}, },
triggerSelectedMaterial(item){ triggerSelectedMaterial(item) {
this.selectedMaterial = item; this.selectedMaterial = item;
this.getMaterialItem(item.id,(data) =>{ this.getMaterialItem(item.id, (data) => {
this.selectedMaterialItem = data; this.selectedMaterialItem = data;
}) });
}, },
// 上一款 下一款 // 上一款 下一款
routerPush(isNext){ routerPush(isNext) {
this.$Router.push({ this.$Router.push({
path: '/pages/material/createMaterial', path: "/pages/material/createMaterial",
query:{ query: {
materialId: this.materialId, materialId: this.materialId,
id: this.list[isNext ? this.index + 1 : this.index -1].id id: this.list[isNext ? this.index + 1 : this.index - 1].id,
} },
}) });
}, },
// 款式列表 // 款式列表
getList(materialTagIdList = []){ getList(materialTagIdList = []) {
this.loadStatus = 'loading'; this.loadStatus = "loading";
this.$http('stylelibraryorder.page', { this.$http("stylelibraryorder.page", {
styleTag: this.keyword, styleTag: this.keyword,
status: 0, status: 0,
materialTagIdList, materialTagIdList,
size: 999, size: 999,
current: 1, current: 1,
}).then(res => { }).then((res) => {
let { code, data } = res; let { code, data } = res;
if (code === 200) { if (code === 200) {
if(Object.keys(data).length > 0){ if (Object.keys(data).length > 0) {
this.list = data.records; this.list = data.records;
}else{ } else {
this.list = [] this.list = [];
} }
} }
}); });
}, },
getItem(id){ getItem(id) {
this.$http("stylelibraryorder.details", id) this.$http("stylelibraryorder.details", id).then((res) => {
.then(res =>{ let { code, data } = res;
let { if (code === 200) {
code, data // 过滤出数据
} = res;
if(code === 200){ this.detail = data;
let parts = (data.styleLibraryPictureVOList || []).sort((a, b) => {
// 过滤出数据 return a.isMainBodyPart - b.isMainBodyPart < -1;
});
this.detail = data; let selectedList = parts.reduce((res, item) => {
let parts = (data.styleLibraryPictureVOList || []) let selectItem = item["styleLibraryMaterialVOList"].map(($i) => {
.sort((a,b) =>{ return {
return a.isMainBodyPart - b.isMainBodyPart < -1 ...$i,
}); isMainBodyPart: item.isMainBodyPart,
let selectedList = parts.reduce((res,item) =>{ materialColoursList: item.materialInfo.materialColoursList,
let selectItem = item['styleLibraryMaterialVOList'].map(($i) => { };
return { });
...$i, return res.concat(selectItem);
isMainBodyPart: item.isMainBodyPart, }, []);
materialColoursList: item.materialInfo.materialColoursList this.submitData = selectedList;
} // console.log(selectedList)
}); }
return res.concat(selectItem) });
},[])
this.submitData = selectedList;
// console.log(selectedList)
}
})
}, },
// 获取颜色 // 获取颜色
getColors(){ getColors() {
this.$http("colour.selectColour", {color: ''}) this.$http("colour.selectColour", { color: "" }).then((res) => {
.then(res =>{ let { code, data } = res;
let { if (code === 200) {
code, data this.colors = data;
} = res; }
if(code === 200){ });
this.colors = data;
}
})
}, },
// 可调整部位点击时间 // 可调整部位点击时间
partClick(index){ partClick(index) {
if(!this.isEditMode) return; if (!this.isEditMode) return;
if(this.activePartIndex !== index){ if (this.activePartIndex !== index) {
this.activeColor = {}; this.activeColor = {};
this.selectedMaterial = {} this.selectedMaterial = {};
} }
this.activePartIndex = index; this.activePartIndex = index;
this.isEdit = true; this.isEdit = true;
}, },
},
};
}
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.color-item{ .color-item {
&.active{ &.active {
border:1px solid #DDA973; border: 1px solid #dda973;
} }
} }
.height-750rpx{ .height-750rpx {
height: 750rpx; height: 750rpx;
} }
.view{ .view {
position: relative; position: relative;
&:after{ &:after {
content: ""; content: "";
position: absolute; position: absolute;
width: 100%; width: 100%;
...@@ -652,44 +717,52 @@ export default { ...@@ -652,44 +717,52 @@ export default {
} }
} }
.bg-fff{ background: #fff} .bg-fff {
.width_100{ width: 100rpx} background: #fff;
.inline-block{ }
.width_100 {
width: 100rpx;
}
.inline-block {
display: inline-block; display: inline-block;
margin-right: 10rpx; margin-right: 10rpx;
} }
.step{ .step {
width: 100%; height: 60rpx; width: 100%;
height: 60rpx;
bottom: 16rpx; bottom: 16rpx;
left: 0; left: 0;
color: #fff; color: #fff;
&.active{ &.active {
opacity: 100%; opacity: 100%;
} }
&.hide{ &.hide {
opacity: 0%; opacity: 0%;
} }
&-main{ &-main {
background: rgba(0,0,0,0.20); background: rgba(0, 0, 0, 0.2);
} }
} }
.line{ .line {
height: 6rpx; height: 6rpx;
width: 100%; width: 100%;
background: #fff; background: #fff;
position: relative; position: relative;
&-center{ &-center {
border-radius: 50%; border-radius: 50%;
height: 16rpx; width: 16rpx; height: 16rpx;
width: 16rpx;
position: absolute; position: absolute;
left: 50%; top: 50%; left: 50%;
top: 50%;
margin-right: -8rpx; margin-right: -8rpx;
margin-top: -8rpx; margin-top: -8rpx;
background: #fff; background: #fff;
} }
&-step{ &-step {
border-radius: 50%; border-radius: 50%;
height: 40rpx; width: 40rpx; height: 40rpx;
width: 40rpx;
position: absolute; position: absolute;
top: 50%; top: 50%;
margin-top: -20rpx; margin-top: -20rpx;
...@@ -698,80 +771,84 @@ export default { ...@@ -698,80 +771,84 @@ export default {
} }
} }
.prev,
.prev,.next{ .next {
width: 144rpx; height: 88rpx; line-height: 88rpx; width: 144rpx;
color: #D5AA7A; text-align: center; height: 88rpx;
line-height: 88rpx;
color: #d5aa7a;
text-align: center;
font-size: 28rpx; font-size: 28rpx;
box-shadow: 0px 2rpx 8rpx 0px rgba(0,0,0,0.10); box-shadow: 0px 2rpx 8rpx 0px rgba(0, 0, 0, 0.1);
bottom: 60rpx; bottom: 60rpx;
} }
.prev{ .prev {
border-top-right-radius: 100rpx; border-top-right-radius: 100rpx;
border-bottom-right-radius: 100rpx; border-bottom-right-radius: 100rpx;
left: 0; left: 0;
} }
.next{ .next {
border-top-left-radius: 100rpx; border-top-left-radius: 100rpx;
border-bottom-left-radius: 100rpx; border-bottom-left-radius: 100rpx;
right: 0; right: 0;
} }
.title{ .title {
&-tip{ &-tip {
width: 8rpx; width: 8rpx;
height: 32rpx; height: 32rpx;
background: #af8d66; background: #af8d66;
border-radius: 6rpx; border-radius: 6rpx;
} }
} }
.image{ .image {
position: relative; position: relative;
width: 160rpx; width: 160rpx;
height: 160rpx; height: 160rpx;
display: inline-block; display: inline-block;
border-radius: 8rpx; border-radius: 8rpx;
&-tip{ &-tip {
text-align: center; text-align: center;
width: 100%; width: 100%;
height: 40rpx;line-height: 40rpx; height: 40rpx;
background: rgba(255,255,255,0.80); line-height: 40rpx;
background: rgba(255, 255, 255, 0.8);
font-size: 24rpx; font-size: 24rpx;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
&.active{ &.active {
border: 1px solid #DDA973; border: 1px solid #dda973;
} }
} }
.button{ .button {
border: 1px solid #333; border: 1px solid #333;
border-radius: 44rpx; border-radius: 44rpx;
width: 160rpx; width: 160rpx;
height: 64rpx; height: 64rpx;
line-height: 64rpx; line-height: 64rpx;
text-align: center; text-align: center;
&-plain{ &-plain {
&--default{ &--default {
color: #333; color: #333;
} }
} }
&-default{ &-default {
background: #333; background: #333;
color: #fff; color: #fff;
} }
&.active{ &.active {
color: #AF8D66; color: #af8d66;
border: 1px solid #DDA973; border: 1px solid #dda973;
} }
&.changed{ &.changed {
color: #AF8D66; color: #af8d66;
} }
} }
.body{ .body {
position: absolute; position: absolute;
background: rgba(239,239,239,0.61); background: rgba(239, 239, 239, 0.61);
width: 100%; width: 100%;
height: auto; height: auto;
left: 0; left: 0;
...@@ -780,7 +857,7 @@ export default { ...@@ -780,7 +857,7 @@ export default {
top: 0; top: 0;
overflow-y: auto; overflow-y: auto;
} }
.overflow{ .overflow {
overflow-x: auto; overflow-x: auto;
white-space: nowrap; white-space: nowrap;
} }
...@@ -791,12 +868,12 @@ export default { ...@@ -791,12 +868,12 @@ export default {
z-index: 998; z-index: 998;
background: #fff; background: #fff;
box-shadow: 0px -4rpx 6rpx 0px rgba(178,182,214,0.10); box-shadow: 0px -4rpx 6rpx 0px rgba(178, 182, 214, 0.1);
padding-bottom: constant(safe-area-inset-bottom); padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
.footer-btn{ .footer-btn {
padding: 20rpx 60rpx; padding: 20rpx 60rpx;
.button{ .button {
border: 1px solid #333; border: 1px solid #333;
border-radius: 44rpx; border-radius: 44rpx;
width: 100%; width: 100%;
...@@ -804,7 +881,7 @@ export default { ...@@ -804,7 +881,7 @@ export default {
line-height: 88rpx; line-height: 88rpx;
text-align: center; text-align: center;
font-size: 34rpx; font-size: 34rpx;
&-default{ &-default {
background: #333; background: #333;
color: #fff; color: #fff;
} }
......
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