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 @@
node_modules/
unpackage/
dist/
.hbuilderx/
# local env files
.env.local
......
src/config/request/apiList/plm/mobileBrand/index.js
View file @ 1dbd0299
......@@ -11,18 +11,45 @@ import config from "../config/index";
let className = 'mobileBrand'
let baseUrl = `${config.baseUrl}/${className}`
export default {
[className]:{
[className]: {
'dailyNewStylePage': {
url: `${baseUrl}/dailyNewStylePage`,
method: "post",
},
//首页
'stylePage': {
url: `${baseUrl}/stylePage`,
method: "post",
},
//详情
'styleDetail': {
url: `${baseUrl}/styleDetail`,
method: "get",
},
// 收藏
'styleCollect': {
url: `${baseUrl}/styleCollect`,
method: "get"
},
// 取消
'cancelCollect': {
url: `${baseUrl}/cancelCollect`,
method: "post"
},
// 浏览记录
'historyViewPage': {
url: `${baseUrl}/historyViewPage`,
method: "post"
},
//我的收藏
'myCollect': {
url: `${baseUrl}/myCollect`,
method: "get"
},
// 面料商联系方式
'supplierInfo': {
url: `${baseUrl}/supplierInfo`,
method: "get"
},
}
}
\ No newline at end of file
src/manifest.json
View file @ 1dbd0299
{
"name" : "一料多款",
"appid" : "__UNI__41D6880",
"description" : "一料多款",
"versionName" : "1.1.0",
"versionCode" : "110",
"transformPx" : false,
"app-plus" : {
"compatible" : {
"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" : ""
"name": "一料多款",
"appid": "__UNI__41D6880",
"description": "一料多款",
"versionName": "1.1.0",
"versionCode": "110",
"transformPx": false,
"app-plus": {
"compatible": {
"ignoreVersion": true
},
/* SDK配置 */
"quickapp" : {},
/* 快应用特有相关 */
"mp-weixin" : {
/* 微信小程序特有相关 */
"appid" : "",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true
// true表示忽略版本检查提示框，HBuilderX1.9.0及以上版本支持
/* 5+App特有相关 */
"usingComponents": true,
"splashscreen": {
"alwaysShowBeforeRender": true,
"waiting": true,
"autoclose": true,
"delay": 0
},
"mp-alipay" : {
"usingComponents" : true
"safearea": {
//APP底部安全区域
"background": "#fff",
"bottom": {
"offset": "auto"
}
},
"mp-baidu" : {
"usingComponents" : true
"compilerVersion": 3,
"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" : {
"usingComponents" : true
"nvueLaunchMode": ""
},
/* SDK配置 */
"quickapp": {},
/* 快应用特有相关 */
"mp-weixin": {
/* 微信小程序特有相关 */
"appid": "",
"setting": {
"urlCheck": false
},
"h5" : {
"template" : "../public/index.html",
"router" : {
"mode" : "hash",
"base" : ""
},
"optimization" : {
"treeShaking" : {
"enable" : true
}
},
"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.132/",
// "target" : "http://octopus-dev.textile-saas.huansi.net/dev-api/",
"changeOrigin" : true,
"pathRewrite" : {
"^/dev" : ""
}
}
}
"usingComponents": true
},
"mp-alipay": {
"usingComponents": true
},
"mp-baidu": {
"usingComponents": true
},
"mp-toutiao": {
"usingComponents": true
},
"mp-qq": {
"usingComponents": true
},
"h5": {
"template": "../public/index.html",
"router": {
"mode": "hash",
"base": ""
},
"optimization": {
"treeShaking": {
"enable": true
}
},
"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 @@
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#969799",
"selectedColor": "#000",
"borderStyle": "white",
"list": [
{
"text": "首页",
"pagePath": "pages/brands/brands",
"iconPath": "static/images/home/home.png"
},
{
"text": "收藏",
"pagePath": "pages/brands/collection",
"iconPath": "static/images/home/message.png"
}
]
}
}
src/pages/brands/brands.vue
View file @ 1dbd0299
<template>
<!-- 品牌商首页 -->
<view class="brandsindex">
<!-- 展示图 -->
<view id="header" class="back_img">
<u-navbar title="" :border-bottom="false" :background="background">
<template slot="right">
<!-- 插槽搜索按钮 -->
<view @click="searchCli" class="u-m-r-24 search">
<image
class="hs-img"
src="../../static/images/home/search@2x.png"
mode=""
></image>
<view>
<view class="brandsindex">
<!-- 展示图 -->
<view id="header" class="back_img">
<u-navbar title="" :border-bottom="false" :background="background">
<template slot="right">
<!-- 插槽搜索按钮 -->
<view @click="searchCli" class="u-m-r-24 search">
<image
class="hs-img"
src="../../static/images/home/search@2x.png"
mode=""
></image>
</view>
</template>
</u-navbar>
</view>
<!-- 每日上新 -->
<view class="everyUpdate">
<u-card full :head-border-bottom="false" @head-click="headTab">
<view slot="head">
<head-title title="每日上新" subtitle="DAILY NEW"></head-title>
</view>
</template>
</u-navbar>
</view>
<!-- 每日上新 -->
<view class="everyUpdate">
<u-card full :head-border-bottom="false" @head-click="headTab">
<view slot="head">
<head-title title="每日上新" subtitle="DAILY NEW"></head-title>
</view>
<view slot="body">
<view class="imgList">
<image
v-for="(item, index) in dailyNewStyleList"
:key="index"
:src="`${imgUrl}${item.originalImageCode}`"
mode=""
></image>
<!--
<image src="../../static/images/brank/mei1.jpg" mode=""></image>
<image src="../../static/images/brank/mei1.jpg" mode=""></image>
<image src="../../static/images/brank/mei1.jpg" mode=""></image>
<image src="../../static/images/brank/mei1.jpg" mode=""></image>
<image src="../../static/images/brank/mei1.jpg" mode=""></image>
<image src="../../static/images/brank/mei1.jpg" mode=""></image>
<image src="../../static/images/brank/mei1.jpg" mode=""></image> -->
<view slot="body">
<view class="imgList">
<image
v-for="(item, index) in dailyNewStyleList"
:key="index"
:src="`${imgUrl}${item.originalImageCode}`"
mode=""
></image>
</view>
</view>
</view>
</u-card>
</view>
<!-- 热门款式 -->
<view class="hotstyle">
<u-card full :head-border-bottom="false">
<view slot="head">
<head-title title="热门款式" subtitle="HOT STYLES"></head-title>
</view>
<view slot="body">
<view class="hotFlex">
<hot-style
v-if="hotStylePage.records.length > 0"
:recordsList="hotStylePage.records"
></hot-style>
<!-- <hot-style></hot-style>
<hot-style></hot-style>
<hot-style></hot-style> -->
</u-card>
</view>
<!-- 热门款式 -->
<view class="hotstyle">
<u-card full :head-border-bottom="false">
<view slot="head">
<head-title title="热门款式" subtitle="HOT STYLES"></head-title>
</view>
<view slot="body">
<view class="hotFlex">
<hot-style
:recordsList="hotStylePage"
@update="update"
></hot-style>
</view>
</view>
</view>
</u-card>
</u-card>
</view>
<view v-if="loadText" class="loadStyle">没有可用的数据了</view>
<!-- 导航条 -->
<hs-tab-bar></hs-tab-bar>
<!-- 底部占位符 -->
<view class="mask-template"></view>
</view>
<!-- 底部占位符 -->
<view class="mask-template"></view>
</view>
</template>
<script>
import headTitle from "./components/header"; //每日更新头部的东西
import hotStyle from "./components/hotStyle"; //热门款式
export default {
components: {
headTitle,
hotStyle,
// HsTabBar,
},
data() {
return {
fabricObj: "",
dailyNewStyleList: [],
hotStylePage: [],
imgUrl: this.$IMG_URL, // 上传地址
dailyNewStyleList: [], //每日上新的数据
hotStylePage: [], //款式的数据
imgUrl: this.$IMG_URL, // 图片前面的url
background: {
backgroundColor: "rgba(245,245,245,0)",
},
total: 0, //总页数
current: 1,
size: 10,
loadText: false,
};
},
created() {
console.log("ces");
this.getList();
// console.log("ces");
// this.getList(1, 10);
},
methods: {
// 搜索按钮
searchCli() {
this.$router.push("/pages/home/search");
},
// 每日更新跳转
headTab() {
this.$router.push("pages/brands/everyDay");
// this.$router.push("pages/brands/detail");
this.$router.push("/pages/brands/everyDay");
},
//更新
update() {
this.getList(1, 10);
},
getList() {
// 款式列表分页查询接口
getList(current, size) {
let param = {
current: 1,
size: 10,
current: current,
size: size,
styleTag: "",
};
this.$http("mobileBrand.stylePage", param).then((res) => {
let { code, data } = res;
if (code === 200) {
if (current == 1) {
this.hotStylePage = data.hotStylePage.records;
} else {
this.hotStylePage.push(...data.hotStylePage.records);
}
this.dailyNewStyleList = data.dailyNewStyleList;
this.hotStylePage = data.hotStylePage;
this.total = data.hotStylePage.total;
}
});
},
},
//上拉加载
onReachBottom() {
console.log("触发了");
//判断当前页是否到达总页数
if (this.current >= this.total) {
this.loadText = true;
} else {
this.current++;
(this.size = 5), this.getList(this.current, this.size);
}
},
};
</script>
<style lang="scss" scoped>
// 上拉加载
.loadStyle {
width: 100%;
height: 60rpx;
line-height: 60rpx;
text-align: center;
}
// 底部占位符
.mask-template {
width: 100%;
......@@ -173,9 +202,9 @@ export default {
width: 100%;
.hotFlex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
// display: flex;
// flex-wrap: wrap;
// justify-content: space-between;
}
}
</style>
src/pages/brands/browse.vue
View file @ 1dbd0299
......@@ -6,13 +6,15 @@
options 右边滑动出现删除的东西 Array
-->
<view>
<browse-item :isbrowse="true" :list="list">
<browse-item :isbrowse="true" :list="browseList" @update="update">
<!-- 头部插槽 -->
<template #title>
<text class="browseicon"><u-icon name="clock"></u-icon></text>
<text class="browseTime">2021-12-12 13:11</text>
<template v-slot:default="slots">
<u-icon name="clock" class="browseicon"></u-icon>
<text class="browseTime">{{ slots.title.viewTime }}</text>
</template>
</browse-item>
<view v-if="loadText" class="loadStyle">没有可用的数据了</view>
</view>
</template>
......@@ -22,47 +24,88 @@ export default {
components: { browseItem },
data() {
return {
list: [
{
id: 1,
title:
"wos长安回望绣成堆，山顶千门次第开，一骑红尘妃子笑，无人知是荔枝来",
images: require("../../static/images/brank/thumb.png"),
show: false,
browseImg: require("../../static/images/brank/blackxin.png"),
},
{
id: 2,
title:
"新丰绿树起黄埃，数骑渔阳探使回，霓裳一曲千峰上，舞破中原始下来",
images: require("../../static/images/brank/thumb.png"),
show: false,
browseImg: require("../../static/images/brank/blackxin.png"),
},
{
id: 3,
title: "登临送目，正故国晚秋，天气初肃。千里澄江似练，翠峰如簇",
images: require("../../static/images/brank/thumb.png"),
show: false,
browseImg: require("../../static/images/brank/blackxin.png"),
},
],
list: [],
total: 0, //总页数
current: 1,
size: 10,
loadText: false,
};
},
methods: {},
computed: {
browseList() {
let dataInfo = {};
this.list.forEach((item, index) => {
let { viewTime } = item;
if (!dataInfo[viewTime]) {
dataInfo[viewTime] = {
viewTime,
browseChild: [],
};
}
dataInfo[viewTime].browseChild.push(item);
});
return Object.values(dataInfo);
},
},
methods: {
//更新
update() {
this.browseFn(1, 10);
},
// 浏览记录接口
browseFn(current, size) {
let param = {
current: current,
size: size,
};
this.$http("mobileBrand.historyViewPage", param).then((res) => {
let { code, data } = res;
if (code === 200) {
this.list = data.records;
}
if (code === 200) {
if (current == 1) {
this.list = data.records;
} else {
this.list.push(...data.records);
}
this.total = data.hotStylePage.total;
}
});
},
},
mounted() {
this.browseFn(1, 10);
},
//上拉加载
onReachBottom() {
console.log("触发了");
//判断当前页是否到达总页数
if (this.current >= this.total) {
this.loadText = true;
} else {
this.current++;
(this.size = 5), this.browseFn(this.current, this.size);
}
},
};
</script>
<style lang="scss" scoped>
// 上拉加载
.loadStyle {
width: 100%;
height: 60rpx;
line-height: 60rpx;
text-align: center;
}
//组件头部时间图标
.browseicon {
width: 32rpx;
::v-deep .u-icon {
width: 32rpx;
height: 32rpx;
font-size: 32rpx;
color: red;
}
width: 32rpx;
height: 32rpx;
font-size: 32rpx;
color: red;
}
//组件头部时间
.browseTime {
......
src/pages/brands/collection.vue
View file @ 1dbd0299
......@@ -17,27 +17,16 @@
<browse-item
:isbrowse="false"
:edit="edit"
:list="list"
:list="collectionList"
:options="options"
@update="update"
>
<!-- 头部插槽 -->
<template #title>
<template v-slot:default="slots">
<!-- 头部title -->
<text class="flagname">加厚荷兰绒绒布布料</text>
<text class="flagname">{{ slots.title.supplierName }}</text>
</template>
</browse-item>
<!-- 弹出框 -->
<view class="posi" v-show="edit">
<view class="pop-up">
<u-checkbox-group class="checkStyle">
<u-checkbox v-model="playCheckout" name="全选" shape="circle"
>全选</u-checkbox
>
</u-checkbox-group>
<u-button size="mini" class="bttn">取消收藏</u-button>
</view>
</view>
</view>
<!-- 底部占位符 -->
<view :class="{ 'mask-template1': !edit, 'mask-template2': edit }"></view>
......@@ -50,37 +39,7 @@ export default {
components: { browseItem },
data() {
return {
list: [
{
id: 1,
title:
"wos长安回望绣成堆，山顶千门次第开，一骑红尘妃子笑，无人知是荔枝来",
images: require("@/static/images/brank/thumb.png"),
show: false, //这个传过去判断滑出删除其他的要不要关闭的
browseImg: require("@/static/images/brank/blackxin.png"),
name: "apple",
checked: false,
},
{
id: 2,
title:
"新丰绿树起黄埃，数骑渔阳探使回，霓裳一曲千峰上，舞破中原始下来",
images: require("@/static/images/brank/thumb.png"),
show: false,
browseImg: require("@/static/images/brank/blackxin.png"),
name: "banner",
checked: false,
},
{
id: 3,
title: "登临送目，正故国晚秋，天气初肃。千里澄江似练，翠峰如簇",
images: require("@/static/images/brank/thumb.png"),
show: false,
browseImg: require("@/static/images/brank/blackxin.png"),
name: "orange",
checked: false,
},
],
list: [],
options: [
{
text: "删除",
......@@ -91,12 +50,31 @@ export default {
],
// 编辑点击
edit: false,
// 弹出全选
playCheckout: false,
};
},
computed: {},
computed: {
//计算
collectionList() {
let dataInfo = {};
this.list.forEach((item, index) => {
let { supplierName } = item;
if (!dataInfo[supplierName]) {
dataInfo[supplierName] = {
supplierName,
browseChild: [],
};
}
dataInfo[supplierName].browseChild.push(item);
});
return Object.values(dataInfo);
},
},
methods: {
//更新
update() {
this.collectionFn();
},
// 编辑
editorClick() {
this.edit = true;
......@@ -105,21 +83,26 @@ export default {
completeClick() {
this.edit = false;
},
// 弹出垮选中某个复选框时，由checkbox时触发
// checkboxChange(e) {
// // 全选操作
// if (e.name == "全选") {
// if (!this.allchecked) {
// this.list.map((val) => {
// val.checked = true;
// });
// } else {
// this.list.map((val) => {
// val.checked = false;
// });
// }
// }
// },
// 我的收藏接口
collectionFn() {
this.$http("mobileBrand.myCollect").then((res) => {
let { code, data } = res;
if (code === 200) {
this.list = data;
this.list = this.list.map((el) => {
return {
...el,
show: false,
checked: false,
};
});
}
});
},
},
mounted() {
this.collectionFn();
},
};
</script>
......@@ -184,31 +167,5 @@ export default {
font-family: PingFangSC, PingFangSC-Medium;
font-weight: 700;
}
// 底部弹出的位置
.posi {
position: fixed;
bottom: 100rpx;
height: 100rpx;
width: 100%;
background-color: white;
.pop-up {
position: relative;
height: 100%;
.checkStyle {
position: absolute;
left: 59rpx;
top: 50%;
transform: translateY(-50%);
}
.bttn {
width: 160rpx;
height: 64rpx;
position: absolute;
right: 30rpx;
top: 50%;
transform: translateY(-50%);
}
}
}
}
</style>
src/pages/brands/components/browseItem.vue
View file @ 1dbd0299
<template>
<!-- 浏览记录组件和收藏 -->
<view class="browse">
<u-card :head-border-bottom="false">
<u-card
:head-border-bottom="false"
v-for="(item, index) in list"
:key="index"
>
<!-- 头部 -->
<view slot="head">
<view>
<!-- 全选框 -->
<u-checkbox-group v-if="edit">
<u-checkbox
v-model="allchecked"
name="全选"
shape="circle"
></u-checkbox>
</u-checkbox-group>
<!-- 插槽 -->
<slot name="title"></slot>
<u-icon
:name="
checkSelect(item) ? 'checkmark-circle-fill' : 'checkmark-circle'
"
v-if="edit"
class="checkstyle"
@click="allcheckFn(item)"
></u-icon>
<slot v-bind:title="item"></slot>
</view>
</view>
<!-- 主体 -->
<view slot="body">
<u-swipe-action
:show="item.show"
:index="index"
v-for="(item, index) in list"
:key="item.id"
@click="click"
:show="elData.show"
v-for="(elData, indexs) in item.browseChild"
:index="indexs"
:key="indexs"
@click="() => sliderClick(indexs, item.browseChild)"
@open="open"
:options="options"
>
<view class="item u-border-bottom">
<!-- 多选框 -->
<u-checkbox-group v-if="edit">
<u-checkbox
v-model="item.checked"
name="item.name"
shape="circle"
></u-checkbox>
</u-checkbox-group>
<u-icon
:name="
selectedIds.indexOf(elData.id) > -1
? 'checkmark-circle-fill'
: 'checkmark-circle'
"
v-if="edit"
class="checkstyle"
@click="selectItem(elData)"
></u-icon>
<!-- 照片 -->
<!-- <image class="imges" :src="item.images" /> -->
<image
class="imges"
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F09%2F3a%2Fbc%2F093abce7b31f4c8ffdbf345375ff4abb.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644931622&t=9c5aebc238749b4bc123b4663bc89cb1"
:src="`${imgUrl}${elData.originalImageCode}`"
/>
<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
<view class="title-wrap">
<view class="title">{{ item.title }}</view>
<view class="title">{{ elData.styleTag }}</view>
<!-- 款号 -->
<view class="modelno">
<text class="textStyle1">款号</text>
<text class="textStyle2">AS23124</text>
<text class="textStyle2">{{ elData.styleCode }}</text>
<!-- 是否需要爱心 -->
<view v-if="isbrowse">
<image
@click="browerClick(index)"
:src="item.browseImg"
v-if="islove"
@click="browerClick(elData)"
src="@/static/images/brank/blackxin.png"
v-if="!elData.isFavorite"
></image>
<image
@click="browerClick(index)"
@click="browerClick(elData)"
src="@/static/images/brank/lightxin.png"
v-else
></image>
......@@ -67,13 +73,34 @@
<!-- 面料 -->
<view class="fabric">
<text class="textStyle1">面料</text>
<text class="textStyle2">AS23124</text>
<text class="textStyle2">{{ elData.materialName }}</text>
</view>
</view>
</view>
</u-swipe-action>
</view>
</u-card>
<!-- 弹出框 -->
<view class="posi" v-show="edit">
<view class="pop-up">
<!-- <u-checkbox-group class="checkStyle">
<u-checkbox v-model="playCheckout" name="全选" shape="circle"
>全选</u-checkbox
>
</u-checkbox-group> -->
<u-icon
:name="playCheckout ? 'checkmark-circle-fill' : 'checkmark-circle'"
class="checkstyles"
size="42"
@click="outsideChecked"
></u-icon>
<u-button size="mini" class="bttn" @click="cancelCollection"
>取消收藏</u-button
>
</view>
</view>
</view>
</template>
......@@ -96,29 +123,115 @@ export default {
},
data() {
return {
// 爱心的黑暗显影
islove: false,
//全选
allchecked: false,
islove: false, // 爱心的黑暗显影
imgUrl: this.$IMG_URL, // 图片前面的url
selected: [], // 判断全选单选这些东西的
// playCheckout: false, // 弹出全选
};
},
computed: {
selectedIds() {
return this.selected.map((item) => item.id);
},
//监听外部全选值
playCheckout() {
let len = this.list.map((el) => {
return el.browseChild;
});
if (this.selected.length == len.flat().length) {
return true;
}
},
},
methods: {
// 爱心点击
browerClick(i, e) {
console.log(i, e);
// this.islove = !this.islove;
//判断全选按钮是否选中
checkSelect(tree) {
let childrenIds = tree.browseChild.map((item) => item.id);
return (
new Set(this.selectedIds.concat(childrenIds)).size ===
this.selected.length
);
},
//滑动删除的东西
click(index, index1) {
if (index1 == 0) {
this.list.splice(index, 1);
this.$u.toast(`删除了第${index}个cell`);
// 多选
allcheckFn(item) {
//判断全选是否被选中
if (!this.checkSelect(item)) {
this.selected = this.selected.concat(
item.browseChild.filter(
($item) => this.selectedIds.indexOf($item.id) === -1
)
);
} else {
let removeData = item.browseChild.map((item) => item.id);
// this.selected = this.selected.concat(
// item.children.filter(($item) => this.selectedIds.indexOf($item.id) === -1)
// );
this.selected = this.selected.filter(
(item) => removeData.indexOf(item.id) === -1
);
}
},
// 单选
selectItem(item) {
let index = this.selectedIds.indexOf(item.id);
if (index > -1) {
this.selected.splice(index, 1);
} else {
this.selected.push(item);
}
},
// 取消收藏按钮
cancelCollection() {
let idItem = this.selected.map((el) => {
return el.id;
});
this.unCollectionFn(...idItem);
},
// 外部全选按钮
outsideChecked() {
if (this.playCheckout == true) {
this.selected = [];
} else {
this.list[index].show = false;
this.$u.toast(`收藏成功`);
let len = this.list.map((el) => {
return el.browseChild;
});
this.selected = len.flat();
}
},
//收藏款式接口
collectionFn(item) {
this.$http("mobileBrand.styleCollect", { id: item }).then((res) => {
if (res.code == 200) {
this.$emit("update");
}
});
},
//取消款式接口
unCollectionFn(item) {
let param = [item];
this.$http("mobileBrand.cancelCollect", param).then((res) => {
if (res.code == 200) {
this.$emit("update");
}
});
},
// 爱心点击
browerClick(item) {
if (item.isFavorite == true) {
this.$u.toast(`已取消收藏`);
this.unCollectionFn(item.id);
} else {
this.$u.toast(`已收藏款式`);
this.collectionFn(item.id);
}
},
//滑动删除的东西
sliderClick(indexs, item) {
let itemId = item[indexs].id;
this.unCollectionFn(itemId);
},
// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
// 没做目前没用
open(index) {
// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
// 原本为'false'，再次设置为'false'会无效
......@@ -133,6 +246,12 @@ export default {
</script>
<style lang="scss" scoped>
// 选项
.checkstyle {
font-size: 42rpx;
margin-right: 10rpx;
}
.browse {
::v-deep .u-card__body {
padding-top: 29rpx !important;
......@@ -212,4 +331,30 @@ export default {
::v-deep .u-border-bottom {
padding-left: 0rpx;
}
.posi {
position: fixed;
bottom: 100rpx;
height: 100rpx;
width: 100%;
background-color: white;
.pop-up {
position: relative;
height: 100%;
.checkstyles {
position: absolute;
left: 59rpx;
top: 50%;
transform: translateY(-50%);
}
.bttn {
width: 160rpx;
height: 64rpx;
position: absolute;
right: 30rpx;
top: 50%;
transform: translateY(-50%);
}
}
}
</style>
src/pages/brands/components/hotStyle.vue
View file @ 1dbd0299
<template>
<view class="hots">
<image
@click="tabdetail"
class="indexhot"
src="@/static/images/brank/mei1.jpg"
></image>
<view class="hotborder">
<view class="hotText1">{{ item.styleTag }}</view>
<view class="hotText2">
<image class="iconhot" src="@/static/images/brank/mei1.jpg"></image>
<text class="wen">我的文字是dsadasdasddsads</text>
<image
class="iconLove"
src="@/static/images/brank/blackxin.png"
v-if="ImageBool"
@click="tabImage"
></image>
<image
class="iconLove"
src="@/static/images/brank/lightxin.png"
v-else
@click="tabImage"
></image>
<view class="whole">
<view class="hots" v-for="(item, index) in recordsList" :key="index">
<!-- <image
class="indexhot"
:src="`${imgUrl}${item.originalImageCode}`"
@click="tabdetail(item)"
mode="aspectFill"
></image> -->
<image
class="indexhot"
:src="item.imags"
@click="tabdetail(item)"
mode="aspectFill"
></image>
<view class="hotborder">
<view class="hotText1">{{ item.styleTag }}</view>
<view class="hotText2">
<image
class="iconhot"
:src="`${imgUrl}${item.originalImageCode}`"
mode="aspectFill"
></image>
<text class="wen">{{ item.materialName }}</text>
<image
class="iconLove"
src="@/static/images/brank/blackxin.png"
v-if="!item.isFavorite"
@click="tabImage(item)"
>
</image>
<image
class="iconLove"
src="@/static/images/brank/lightxin.png"
v-else
@click="tabImage(item)"
></image>
</view>
</view>
</view>
</view>
......@@ -29,48 +44,69 @@
<script>
export default {
props: {
// 数据
recordsList: {
type: Array,
default: () => [],
},
},
data() {
return {
// 爱心切换的bool
ImageBool: true,
imgUrl: this.$IMG_URL, // 上传地址
};
},
created() {
// this.unCollectionFn(1);
},
methods: {
// 点击切换心心选项
tabImage() {
this.ImageBool = !this.ImageBool;
if (this.ImageBool == false) {
this.$u.toast(`已收藏款式`);
} else {
tabImage(item) {
// console.log(item.isFavorite);
if (item.isFavorite == true) {
this.$u.toast(`已取消收藏`);
this.unCollectionFn(item.id);
} else {
this.$u.toast(`已收藏款式`);
this.collectionFn(item.id);
}
},
methods: {
// 点击切换心心选项
tabImage() {
this.ImageBool = !this.ImageBool;
},
// 跳转到详情
tabdetail(item) {
// console.log("KKK");
this.$router.push("/pages/brands/detail?id=" + item.id);
// this.$router.push("pages/brands/everyDay");
},
// 跳转到详情
tabdetail(item) {
this.$router.push("/pages/brands/detail?id=" + item.id);
},
}
//收藏款式接口
collectionFn(item) {
this.$http("mobileBrand.styleCollect", { id: item }).then((res) => {
if (res.code == 200) {
this.$emit("update");
}
});
},
//取消款式接口
unCollectionFn(item) {
let param = [item];
this.$http("mobileBrand.cancelCollect", param).then((res) => {
if (res.code == 200) {
this.$emit("update");
}
});
},
},
};
</script>
<style lang="scss" scoped>
.whole {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.hots {
height: 578rpx;
width: 330rpx;
margin-bottom: 20rpx;
margin-right: 16rpx;
// flex: 1;
// margin-right: 16rpx;
.indexhot {
display: block;
......
src/pages/brands/components/hs-material-thumbnail.vue
View file @ 1dbd0299
......@@ -6,13 +6,18 @@
mode=""
></image> -->
<!-- <image class="width_100 hs-height-160" :src="`${imgUrl}${fileCode}`"> -->
<template v-for="item,index in colourApiList">
<image :key="index" v-if="item.isMain" class="width_100 hs-height-160" :src="`${imgUrl}${item.fileCode}`" />
<template v-for="(item, index) in colourApiList">
<image
:key="index"
v-if="item.isMain"
class="width_100 hs-height-160"
:src="`${imgUrl}${item.fileCode}`"
/>
</template>
<view class="order_tit">
<view class="u-flex justify-between u-font-32">
<span class="color_DDA973 u-line-1">{{ item.materialName }}
<span class="color_DDA973 u-line-1"
>{{ item.materialName }}
<!-- 加厚荷兰绒绒布布料 -->
</span>
</view>
......@@ -28,97 +33,99 @@
</template>
<script>
export default {
name: "hs-material-thumbnail",
props: {
item: {
type: Object,
default: () => {},
},
colourApiList: {
type: Array,
default: []
}
export default {
name: "hs-material-thumbnail",
props: {
item: {
type: Object,
default: () => {},
},
data() {
return {};
colourApiList: {
type: Array,
default: () => [],
},
methods: {
click() {
this.$emit("click");
},
},
data() {
return {
imgUrl: this.$IMG_URL, // 上传地址
};
},
methods: {
click() {
this.$emit("click");
},
};
},
};
</script>
<style scoped lang="scss">
.home_con_content_order {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
height: 160rpx;
border-radius: 8rpx;
overflow: hidden;
width: 100%;
.home_con_content_order {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
height: 160rpx;
border-radius: 8rpx;
overflow: hidden;
width: 100%;
.order_tit {
position: absolute;
width: 75%;
right: 0;
flex-direction: column;
display: flex;
justify-content: center;
padding: 20rpx;
flex: 1;
height: 100%;
// background: rgba(17, 21, 30, 0.5);
}
.order_tit {
position: absolute;
width: 75%;
right: 0;
flex-direction: column;
display: flex;
justify-content: center;
padding: 20rpx;
flex: 1;
height: 100%;
// background: rgba(17, 21, 30, 0.5);
}
}
.width_30 {
width: 30%;
}
.width_30 {
width: 30%;
}
.color_DDA973 {
color: #dda973;
}
.color_DDA973 {
color: #dda973;
}
.color_6F6F72 {
color: #6f6f72;
}
.color_6F6F72 {
color: #6f6f72;
}
.bd_dashed {
position: relative;
}
.bd_dashed {
position: relative;
}
.bd_dashed:after {
border-width: 1px;
}
.bd_dashed:after {
border-width: 1px;
}
.bd_dashed-bottom:after,
.bd_dashed-left:after,
.bd_dashed-right:after,
.bd_dashed-top-bottom:after,
.bd_dashed-top:after,
.bd_dashed:after {
content: " ";
position: absolute;
left: 0;
top: 0;
pointer-events: none;
box-sizing: border-box;
transform-origin: 0 0;
width: 199.8%;
height: 199.7%;
transform: scale(0.5, 0.5);
border: 1px dashed #e4e7ed;
z-index: 2;
}
.bd_dashed-bottom:after,
.bd_dashed-left:after,
.bd_dashed-right:after,
.bd_dashed-top-bottom:after,
.bd_dashed-top:after,
.bd_dashed:after {
content: " ";
position: absolute;
left: 0;
top: 0;
pointer-events: none;
box-sizing: border-box;
transform-origin: 0 0;
width: 199.8%;
height: 199.7%;
transform: scale(0.5, 0.5);
border: 1px dashed #e4e7ed;
z-index: 2;
}
.ov_hiden {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
\ No newline at end of file
.ov_hiden {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
src/pages/brands/detail.vue
View file @ 1dbd0299
......@@ -3,12 +3,15 @@
<u-navbar
title=""
:border-bottom="false"
background="rgba(245,245,245,0)"
:background="background"
style="height: 0px"
>
</u-navbar>
<view>
<u-image height="750rpx" :src="`${imgUrl}${tabledata.originalImageCode}`"></u-image>
<u-image
height="750rpx"
:src="`${imgUrl}${tabledata.originalImageCode}`"
></u-image>
</view>
<view class="u-p-r-30 u-p-l-30">
<!--款式信息 -->
......@@ -16,102 +19,139 @@
<view class="u-border-bottom u-line-88">款式信息</view>
<view class="fabric u-m-t-24">
<text class="textStyle1">产品款号</text>
<text class="textStyle2">{{tabledata.styleCode}}</text>
<text class="textStyle2">{{ tabledata.styleCode }}</text>
</view>
<view class="fabric u-m-t-8">
<text class="textStyle1">面料供应商</text>
<text class="textStyle2">{{tabledata.supplierName}}</text>
<text class="textStyle2">{{ tabledata.supplierName }}</text>
</view>
</view>
<!-- 面料信息 -->
<view class="bg-fff u-p-r-30 u-p-b-30 u-p-l-30 item">
<view class="u-border-bottom u-line-88">面料信息</view>
<view class="u-m-t-30 u-m-b-56">
<material :item="item" :colourApiList="tabledata.colourApiList"></material>
<material
:item="item"
:colourApiList="tabledata.colourApiList"
></material>
</view>
<!-- 其他颜色 -->
<view class="u-flex">
<view class="overflow u-flex-1">
<view>其他颜色</view>
<view>
<view class="image u-m-r-10" v-for="item,index in tabledata.colourApiList" :key="index">
<image v-if="item.isMain" :src="`${imgUrl}${item.fileCode}`" style="width: 100%; height: 100%"></image>
<view class="image-tip u-line-1">颜色</view>
</view>
<view class="image u-m-r-10">
<view
class="image u-m-r-10"
v-for="(item, index) in tabledata.colourApiList"
:key="index"
>
<image
src="@/static/images/brank/mei1.jpg"
v-if="item.isMain"
:src="`${imgUrl}${item.fileCode}`"
style="width: 100%; height: 100%"
></image>
<!-- <view class="image u-m-r-10">
<image src="" style="width: 100%; height: 100%"></image>
<view class="image-tip u-line-1">颜色</view>
</view>
<view class="image u-m-r-10">
<image src="" style="width: 100%; height: 100%"></image>
<view class="image-tip u-line-1">颜色</view>
</view> -->
</view>
</view>
</view>
</view>
<!-- 这个空的是为了让下面那个不盖住内容 -->
<view class="mask-template"></view>
<view class="sampling">
<u-button @click="samplingFn">我要采购布样</u-button>
</view>
</view>
<!-- 这个空的是为了让下面那个不盖住内容 -->
<view class="mask-template"></view>
<view class="sampling">
<u-button>我要采购布样</u-button>
</view>
<u-popup v-model="show" mode="center">
<view style="height: 200rpx; width: 366rpx" class="telephone">
<view>面料供应商联系方式</view>
<text class="tele">{{ smapTelePhone }}</text>
<view class="cacle">
<view @click="cancel" class="cacleStyle">取消</view>
<view @click="call" class="callStyle">拨打</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import material from "./components/hs-material-thumbnail.vue";
export default {
components: {
material
import material from "./components/hs-material-thumbnail.vue";
export default {
components: {
material,
},
data() {
return {
show: false,
background: {
backgroundColor: "rgba(245,245,245,0)",
}, //颜色透明
tabledata: {},
item: {},
id: "",
imgUrl: this.$IMG_URL, // 上传地址
smapTelePhone: "", //联系人电话
};
},
watch: {
id: {
handler() {
this.detail();
},
},
data() {
return {
tabledata:{},
item: {},
id: "",
imgUrl: this.$IMG_URL, // 上传地址
};
},
created() {
this.detail();
},
onLoad(options) {
this.id = options.id;
},
methods: {
// 采样按钮
samplingFn() {
this.show = true;
this.supplierFn(this.$route.query.id);
},
watch: {
id: {
handler() {
console.log("oid");
this.detail()
}
}
// 取消
cancel() {
this.show = false;
},
created() {
this.detail()
// 拨打
call() {
uni.makePhoneCall({
phoneNumber: this.smapTelePhone,
});
},
onLoad(options) {
this.id = options.id;
// 详情接口
detail() {
let param = {
id: this.id,
};
this.$http("mobileBrand.styleDetail", param).then((res) => {
let { code, data } = res;
if (code === 200) {
this.tabledata = data;
this.item = data.materialInfo;
}
});
},
methods: {
detail() {
let param = {
id: this.id
// 面料商联系方式接口
supplierFn(item) {
let param = {
id: item,
};
this.$http("mobileBrand.supplierInfo", param).then((res) => {
let { code, data } = res;
if (code === 200) {
this.smapTelePhone = data.phoneNumber;
}
this.$http('mobileBrand.styleDetail', param).then(res => {
let {
code,
data
} = res;
if (code === 200) {
this.tabledata=data
this.item=data.materialInfo
}
});
}
});
},
};
},
};
</script>
<style scoped lang="scss">
......@@ -161,75 +201,88 @@ $main-color: #fff;
font-weight: 500;
color: #333333;
}
}
// 我要采购布样
.sampling {
position: fixed;
bottom: 0;
width: 750rpx;
height: 100rpx;
background: #ffffff;
box-shadow: 0px -2px 3px 0px rgba(178, 182, 214, 0.1);
.u-line-88 {
line-height: 88rpx;
}
.u-btn {
width: 630rpx;
height: 88rpx;
background: rgba(0, 0, 0, 0.8);
border-radius: 44rpx;
color: white;
}
}
.bg-fff {
position: relative;
top: -10rpx;
background: #fff;
}
.u-line-88 {
line-height: 88rpx;
}
.item {
width: 100%;
margin-bottom: 28rpx;
.bg-fff {
position: relative;
top: -10rpx;
background: #fff;
&--round {
border-radius: 16rpx;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.item {
width: 100%;
margin-bottom: 28rpx;
&-tag {
padding: 6rpx 2px;
background: $color;
text-align: center;
color: $h-color;
display: inline-block;
margin-right: 10rpx;
}
}
&--round {
border-radius: 16rpx;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.image {
position: relative;
width: 160rpx;
height: 160rpx;
display: inline-block;
&-tag {
padding: 6rpx 2px;
background: $color;
text-align: center;
color: $h-color;
display: inline-block;
margin-right: 10rpx;
}
&-tip {
text-align: center;
width: 100%;
height: 40rpx;
line-height: 40rpx;
background: rgba(255, 255, 255, 0.8);
font-size: 24rpx;
position: absolute;
bottom: 0;
left: 0;
}
}
.image {
position: relative;
width: 160rpx;
height: 160rpx;
display: inline-block;
.overflow {
overflow-x: auto;
white-space: nowrap;
}
&-tip {
text-align: center;
width: 100%;
height: 40rpx;
line-height: 40rpx;
background: rgba(255, 255, 255, 0.8);
font-size: 24rpx;
position: absolute;
bottom: 0;
left: 0;
}
// 弹出拨打号码
.telephone {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
.tele {
display: inline-block;
width: 100%;
text-align: center;
}
.overflow {
overflow-x: auto;
white-space: nowrap;
.cacle {
width: 100%;
display: flex;
justify-content: space-around;
.cacleStyle {
&:hover {
color: #3144be;
cursor: pointer;
}
}
.callStyle {
&:hover {
color: #3144be;
cursor: pointer;
}
}
}
</style>
\ No newline at end of file
}
</style>
src/pages/brands/everyDay.vue
View file @ 1dbd0299
......@@ -8,13 +8,20 @@
-->
<template>
<!-- 每日上新 -->
<u-card full :head-border-bottom="false">
<view slot="body">
<view class="hotFlex">
<hot-style v-if="recordsList.length>0" :recordsList="recordsList"></hot-style>
<view>
<u-card full :head-border-bottom="false">
<view slot="body">
<view class="hotFlex">
<hot-style
v-if="recordsList.length > 0"
:recordsList="recordsList"
@update="update"
></hot-style>
</view>
</view>
</view>
</u-card>
</u-card>
<view v-if="loadText" class="loadStyle">没有可用的数据了</view>
</view>
</template>
<script>
......@@ -25,36 +32,63 @@ export default {
},
data() {
return {
recordsList:[]
recordsList: [],
total: 0, //总页数
current: 1,
size: 10,
loadText: false, //判断加载数据完显示什么
};
},
created(){
console.log("ces");
this.materialDetail()
},
created() {
// console.log("ces");
this.materialDetail(1, 10);
},
methods: {
materialDetail() {
let param = {
"current": 1,
"size": 10,
"styleTag": ""
}
this.$http('mobileBrand.dailyNewStylePage', param).then(res => {
let {
code,
data
} = res;
if (code === 200) {
this.recordsList = data.records;
console.log(this.recordsList,"this.recordsList");
//更新
update() {
this.materialDetail(1, 10);
},
// 每日上新接口
materialDetail(current, size) {
let param = {
current: current,
size: size,
styleTag: "",
};
this.$http("mobileBrand.dailyNewStylePage", param).then((res) => {
let { code, data } = res;
if (code === 200) {
if (current == 1) {
this.recordsList = data.recordspush;
} else {
this.recordsList.push(...data.records);
}
});
}
this.total = data.total;
}
});
},
},
//上拉加载
onReachBottom() {
//判断当前页是否到达总页数
if (this.current >= this.total) {
this.loadText = true;
} else {
this.current++;
(this.size = 5), this.materialDetail(this.current, this.size);
}
},
};
</script>
<style lang="scss" scoped>
// 上拉加载
.loadStyle {
width: 100%;
height: 60rpx;
line-height: 60rpx;
text-align: center;
}
::v-deep .u-card__body {
padding-top: 20rpx !important;
background-color: #f5f5f5;
......
src/pages/material/createMaterial.vue
View file @ 1dbd0299
......@@ -2,47 +2,64 @@
<view>
<!--导航栏 navbar-->
<view id="header">
<u-navbar :title="title"
:border-bottom="false"
:background="{backgroundColor: 'whitesmoke'}">
<u-navbar
:title="title"
:border-bottom="false"
:background="{ backgroundColor: 'whitesmoke' }"
>
</u-navbar>
</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">
<!-- <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 :style="{
'--src': `url(${$IMG_URL}${detail.originalImageCode})`,
'--transform': `rotate(${angle}deg)`
<image
:style="{
'--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 v-if="!isEdit">
<view class="u-absolute prev"
@click="routerPush(true)"
v-if="!isFirst">上一款</view>
<view class="u-absolute next"
@click="routerPush(false)"
v-if="!isLast">下一款</view>
<view
class="u-absolute prev"
@click="routerPush(true)"
v-if="!isFirst"
>上一款</view
>
<view
class="u-absolute next"
@click="routerPush(false)"
v-if="!isLast"
>下一款</view
>
</view>
<view :class="[ !isEdit ? 'hide':'active']"
class="u-absolute step u-p-r-30 u-p-l-30">
<view
: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">
<text class="width_100">{{angle}}°</text>
<text class="width_100">{{ angle }}°</text>
<view class="u-relative u-flex-1">
<view class="line" id="line">
<view class="line-center"></view>
<view class="line-step" id="line-step"
:style="{
left:
(offset.x - lineOffset.left) / lineWidth * 100
+ '%'
}"
@touchmove="touchMove"
@touchend="touchEnd"
@touchstart="touchStart"
<view
class="line-step"
id="line-step"
:style="{
left:
((offset.x - lineOffset.left) / lineWidth) * 100 + '%',
}"
@touchmove="touchMove"
@touchend="touchEnd"
@touchstart="touchStart"
/>
</view>
</view>
......@@ -58,52 +75,64 @@
可调整部位
</view>
<view class="overflow u-p-b-24">
<view class="button inline-block"
:class="[
activePartIndex === index ? 'active':'',
filterPartActive(part) ? 'changed' : '',
]"
@click="partClick(index)"
v-for="(part,index) in parts">
{{
part.isMainBodyPart === 1 ? '主身' : `部位${index}`
}}
<view
class="button inline-block"
:class="[
activePartIndex === index ? 'active' : '',
filterPartActive(part) ? 'changed' : '',
]"
@click="partClick(index)"
v-for="(part, index) in parts"
>
{{ part.isMainBodyPart === 1 ? "主身" : `部位${index}` }}
</view>
</view>
<view v-if="isEdit">
<view class="u-p-b-20" >
<u-search placeholder="请输入面料名称" v-model="keyword"
border-color="#e1e1e1" height="76"
bg-color="#fff" :show-action="false"></u-search>
<view class="u-p-b-20">
<u-search
placeholder="请输入面料名称"
v-model="keyword"
border-color="#e1e1e1"
height="76"
bg-color="#fff"
:show-action="false"
></u-search>
</view>
<view class="overflow u-p-b-30 u-border-bottom">
<view class="image u-m-r-10 "
@click="triggerSelectedMaterial(color)"
:class="[selectedMaterial.id === color.id ? 'active':'']"
v-for="color in MaterialList">
<image src="" style="width: 100%;height: 100%"></image>
<view
class="image u-m-r-10"
@click="triggerSelectedMaterial(color)"
:class="[selectedMaterial.id === color.id ? 'active' : '']"
v-for="color in MaterialList"
>
<image src="" style="width: 100%; height: 100%"></image>
<view class="image-tip u-line-1">{{ color.materialName }}</view>
</view>
</view>
<view class="overflow"
v-if="selectedMaterialItemColors.length > 0">
<u-image :src="`${$IMG_URL}${item.color}`"
width="80rpx" height="80rpx"
:class="[activeColor.id === item.id ? 'active':'']"
shape="circle"
@click="setActiveColor(item)"
:key="item.id"
v-for="(item) in selectedMaterialItemColors"
class="u-m-r-20 inline-block color-item"
<view class="overflow" v-if="selectedMaterialItemColors.length > 0">
<u-image
:src="`${$IMG_URL}${item.color}`"
width="80rpx"
height="80rpx"
:class="[activeColor.id === item.id ? 'active' : '']"
shape="circle"
@click="setActiveColor(item)"
:key="item.id"
v-for="item in selectedMaterialItemColors"
class="u-m-r-20 inline-block color-item"
></u-image>
</view>
<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
@click="setMaterialItem"
class="button inline-block button-default">确定</view>
class="button inline-block button-plain button-plain-default"
@click="cancelMaterialItem"
>取消</view
>
<view
@click="setMaterialItem"
class="button inline-block button-default"
>确定</view
>
</view>
</view>
</view>
......@@ -117,21 +146,34 @@
<view class="">主图颜色</view>
<view>
<view v-if="isEditMode">
<view class="image u-m-r-10"
:class="[
activeMainPartBodyColorId === color.mdmMaterialColourId ? 'active' : ''
]"
@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 u-m-r-10"
:class="[
activeMainPartBodyColorId === color.mdmMaterialColourId
? 'active'
: '',
]"
@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>
</view>
<view v-if="!isEditMode">
<view class="image u-m-r-10"
v-for="color in mainPartBodyColor">
<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 class="image u-m-r-10" v-for="color in mainPartBodyColor">
<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>
......@@ -143,21 +185,39 @@
</view>
<view>
<view v-if="isEditMode">
<view class="image u-m-r-10"
:class="[
mainPartOtherColor.map((item) => item.mdmMaterialColourId).indexOf(color.mdmMaterialColourId) > -1 ? 'active' : ''
]"
@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
class="image u-m-r-10"
:class="[
mainPartOtherColor
.map((item) => item.mdmMaterialColourId)
.indexOf(color.mdmMaterialColourId) > -1
? 'active'
: '',
]"
@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 v-if="!isEditMode">
<view class="image u-m-r-10"
v-for="color in mainPartOtherColor">
<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
class="image u-m-r-10"
v-for="color in mainPartOtherColor"
>
<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>
......@@ -168,13 +228,18 @@
<view id="footer" class="footer">
<view class="footer-btn">
<view class="button button-default button-plain button-plain--default"
@click="submit"
v-if="isEditMode">
<view
class="button button-default button-plain button-plain--default"
@click="submit"
v-if="isEditMode"
>
加入待上架
</view>
<view class="button button-plain button-plain--default"
v-if="!isEditMode" @click="cancel">
<view
class="button button-plain button-plain--default"
v-if="!isEditMode"
@click="cancel"
>
取消上架
</view>
</view>
......@@ -193,14 +258,10 @@ import material from "./mixins/material";
export default {
name: "createMaterial",
mixins:[dom,step,material],
data(){
mixins: [dom, step, material],
data() {
return {
keyword: '',
keyword: "",
isEdit: false,
......@@ -220,101 +281,107 @@ export default {
selectedMaterialItemColor: {},
activeColor: {},
styleLibraryMaterialDTOList: [],
// 过滤数据
filteredMaterialColorList: [],
// activePart: {},
materialId: '',
materialId: "",
activePartIndex: -1,
submitData: []
}
submitData: [],
};
},
computed:{
computed: {
// 部位
parts(){
return (this.detail.styleLibraryPictureVOList || []).sort((a,b) =>{
return a.isMainBodyPart - b.isMainBodyPart < -1
})
parts() {
return (this.detail.styleLibraryPictureVOList || []).sort((a, b) => {
return a.isMainBodyPart - b.isMainBodyPart < -1;
});
},
selectedMaterialItemColors(){
let key = (this.selectedMaterialItem.materialColourVOList || []).map((item) => item.colourId);
return this.colors.filter((item) => key.indexOf(item.id) > -1)
.map(item => {
return {
...item,
mdmMaterialColourId: item.id,
materialId: this.selectedMaterialItem.id
}
})
selectedMaterialItemColors() {
let key = (this.selectedMaterialItem.materialColourVOList || []).map(
(item) => item.colourId
);
return this.colors
.filter((item) => key.indexOf(item.id) > -1)
.map((item) => {
return {
...item,
mdmMaterialColourId: item.id,
materialId: this.selectedMaterialItem.id,
};
});
},
index(){
return this.list.findIndex(item => item.id === this.detail.id);
index() {
return this.list.findIndex((item) => item.id === this.detail.id);
},
isLast(){
return this.index === this.list.length - 1
isLast() {
return this.index === this.list.length - 1;
},
isFirst(){
return this.index === 0
isFirst() {
return this.index === 0;
},
isEditMode(){
return this.detail.putawayStatus === 1
isEditMode() {
return this.detail.putawayStatus === 1;
},
// 默认的物料颜色可选
defaultColorList(){
let key = (this.materialDetail.materialColourVOList || []).map((item) => item.colourId);
return this.colors.filter((item) => key.indexOf(item.id) > -1)
.map((item) =>{
return {
...item,
materialId: this.materialId
}
})
defaultColorList() {
let key = (this.materialDetail.materialColourVOList || []).map(
(item) => item.colourId
);
return this.colors
.filter((item) => key.indexOf(item.id) > -1)
.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 {
...item,
colour: item.colourName || item.colour,
mdmMaterialColourId: item.colourId || item.mdmMaterialColourId
}
})
}else{
mdmMaterialColourId: item.colourId || item.mdmMaterialColourId,
};
});
} else {
return this.defaultColorList.map((item) => {
return {
...item,
mdmMaterialColourId: item.id
}
})
mdmMaterialColourId: item.id,
};
});
}
},
//
mainPart(){
return this.submitData.filter((item) => item.isMainBodyPart === 1 && !item.isDeleted)
mainPart() {
return this.submitData.filter(
(item) => item.isMainBodyPart === 1 && !item.isDeleted
);
},
// 主图颜色 选中的颜色
mainPartBodyColor(){
mainPartBodyColor() {
return this.mainPart.filter((item) => item.type === 1);
},
// 主图颜色 其他选中的颜色
mainPartOtherColor(){
mainPartOtherColor() {
return this.mainPart.filter((item) => item.type !== 1);
},
// 主图颜色 其他选中的颜色
activeMainPartBodyColorId(){
return this.mainPartBodyColor[0]?.mdmMaterialColourId
}
activeMainPartBodyColorId() {
return this.mainPartBodyColor[0]?.mdmMaterialColourId;
},
},
created() {
let {id,materialId} = this.$Route.query;
let { id, materialId } = this.$Route.query;
this.materialId = materialId;
this.getItem(id);
this.getList();
......@@ -324,39 +391,40 @@ export default {
this.getMaterialItem(materialId);
this.getMaterialList();
},
methods:{
filterPartActive(part){
let data = this.submitData.filter((item) =>
!item.isDeleted &&
part.id === item.styleLibraryPictureId
methods: {
filterPartActive(part) {
let data = this.submitData.filter(
(item) => !item.isDeleted && part.id === item.styleLibraryPictureId
);
return data.length > 0;
},
ontherPartTrigger(color,colors){
ontherPartTrigger(color, colors) {
let $data = this.submitData;
let activePart = this.parts[this.activePartIndex];
let index = $data.findIndex((item) =>
item.styleLibraryPictureId === activePart.id
let index = $data.findIndex(
(item) => item.styleLibraryPictureId === activePart.id
);
if(index > -1){
if (index > -1) {
let item = $data[index];
if(item.id){
this.$set($data,index,{
if (item.id) {
this.$set($data, index, {
...item,
isDeleted: !$data[index]['isDeleted']
})
}else{
$data.splice(index,1);
isDeleted: !$data[index]["isDeleted"],
});
} else {
$data.splice(index, 1);
}
}
$data.push({
materialColoursList: colors,
isMainBodyPart: 0,type: 0, isDeleted: false,
isMainBodyPart: 0,
type: 0,
isDeleted: false,
mdmMaterialId: color.materialId,
mdmMaterialColourId: color.mdmMaterialColourId,
styleLibraryPictureId: activePart.id,
styleLibrayId: activePart.styleLibrayId,
})
});
// if()
// $data.push({
// materialColoursList: colors,
......@@ -368,275 +436,272 @@ export default {
// })
},
//
setMaterialItem(){
if(this.activePartIndex === 0){
setMaterialItem() {
if (this.activePartIndex === 0) {
this.materialDetail = this.selectedMaterialItem;
this.colorSelect(this.activeColor,this.selectedMaterialItemColors);
}else{
this.ontherPartTrigger(this.activeColor,this.selectedMaterialItemColors);
this.colorSelect(this.activeColor, this.selectedMaterialItemColors);
} else {
this.ontherPartTrigger(
this.activeColor,
this.selectedMaterialItemColors
);
}
this.activeColor = {}
this.activeColor = {};
this.isEdit = false;
},
cancelMaterialItem(){
cancelMaterialItem() {
this.isEdit = false;
},
setActiveColor(color){
setActiveColor(color) {
this.activeColor = {
...color,
materialId: this.selectedMaterialItem.id,
mdmMaterialColourId: color.id
mdmMaterialColourId: color.id,
};
},
pageReload(){
pageReload() {
this.$Router.replace({
path: 'pages/material/createMaterial',
query: this.$Route.query
})
path: "pages/material/createMaterial",
query: this.$Route.query,
});
},
// 加入待上架
submit(){
submit() {
let data = {
styleLibraryMaterialDTOList: this.submitData,
styleOrderId: this.detail.styleOrderId,
styleLibraryId: this.detail.id,
}
this.$http("stylelibraryorder.addToShelves",data)
.then(res =>{
let {
code, msg
} = res;
if(code === 200){
styleLibraryId: this.detail.id,
};
this.$http("stylelibraryorder.addToShelves", data).then((res) => {
let { code, msg } = res;
if (code === 200) {
this.pageReload();
}else{
} else {
this.$refs.uToast.show({
title: msg
})
title: msg,
});
}
})
});
},
// 取消上架
cancel(){
this.$http("stylelibraryorder.unlisted", { id: this.detail.styleOrderId})
.then(res => {
let {
code,msg
} = res;
if(code === 200){
this.pageReload();
}else{
this.$refs.uToast.show({
title: msg
})
}
})
cancel() {
this.$http("stylelibraryorder.unlisted", {
id: this.detail.styleOrderId,
}).then((res) => {
let { code, msg } = res;
if (code === 200) {
this.pageReload();
} else {
this.$refs.uToast.show({
title: msg,
});
}
});
},
// 主体颜色选择
// 判断是否已有主体选择
// 清除其他可选
colorSelect(color,colors){
colorSelect(color, colors) {
let $data = this.submitData;
let index = $data.findIndex((item) =>
let index = $data.findIndex(
(item) =>
item.mdmMaterialColourId === color.mdmMaterialColourId &&
item.type === 1 &&
item.isMainBodyPart === 1
);
if(this.activeMainPartBodyColorId){
let index = $data.findIndex((item) =>
if (this.activeMainPartBodyColorId) {
let index = $data.findIndex(
(item) =>
item.mdmMaterialColourId === this.activeMainPartBodyColorId &&
item.type === 1 &&
item.isMainBodyPart === 1
);
let item = $data[index];
if(item.id){
this.$set($data,index,{
if (item.id) {
this.$set($data, index, {
...$data[index],
isDeleted: !$data[index]['isDeleted']
})
}else{
$data.splice(index,1)
isDeleted: !$data[index]["isDeleted"],
});
} else {
$data.splice(index, 1);
}
}
// 清除数据
if(index > -1){
if (index > -1) {
let item = $data[index];
if(item.id){
this.$set($data,index,{
if (item.id) {
this.$set($data, index, {
...$data[index],
isDeleted: !$data[index]['isDeleted']
})
}else{
$data.splice(index,1)
isDeleted: !$data[index]["isDeleted"],
});
} else {
$data.splice(index, 1);
}
}else{
} else {
$data.push({
materialColoursList: colors,
isMainBodyPart: 1,type: 1, isDeleted: false,
isMainBodyPart: 1,
type: 1,
isDeleted: false,
mdmMaterialId: color.materialId,
mdmMaterialColourId: color.mdmMaterialColourId,
styleLibraryPictureId: this.parts[0].id,
styleLibrayId: this.parts[0].styleLibrayId,
})
});
}
this.clearColor(color)
this.clearColor(color);
},
clearColor(color){
clearColor(color) {
let $data = this.submitData;
let index = $data.findIndex((item) =>
let index = $data.findIndex(
(item) =>
item.mdmMaterialColourId === color.mdmMaterialColourId &&
item.type === 2 &&
item.isMainBodyPart === 1
);
if(index > -1){
if (index > -1) {
let item = $data[index];
if(item.id){
this.$set($data,index,{
if (item.id) {
this.$set($data, index, {
...item,
isDeleted: !$data[index]['isDeleted']
})
}else{
$data.splice(index,1);
isDeleted: !$data[index]["isDeleted"],
});
} else {
$data.splice(index, 1);
}
}
},
colorSelects(color,colors){
if(color.mdmMaterialColourId === this.activeMainPartBodyColorId) return;
colorSelects(color, colors) {
if (color.mdmMaterialColourId === this.activeMainPartBodyColorId) return;
let $data = this.submitData;
let index = $data.findIndex((item) =>
let index = $data.findIndex(
(item) =>
item.mdmMaterialColourId === color.mdmMaterialColourId &&
item.type === 0
);
// 清除数据
if(index > -1){
if (index > -1) {
let item = $data[index];
if(item.id){
this.$set($data,index,{
if (item.id) {
this.$set($data, index, {
...$data[index],
isDeleted: true
})
}else{
$data.splice(index,1)
isDeleted: true,
});
} else {
$data.splice(index, 1);
}
}else{
} else {
$data.push({
materialColoursList: colors,
isMainBodyPart: 1,type: 0, isDeleted: false,
isMainBodyPart: 1,
type: 0,
isDeleted: false,
mdmMaterialId: color.materialId,
mdmMaterialColourId: color.mdmMaterialColourId,
styleLibraryPictureId: this.parts[0].id,
styleLibrayId: this.parts[0].styleLibrayId
})
styleLibrayId: this.parts[0].styleLibrayId,
});
}
},
triggerSelectedMaterial(item){
triggerSelectedMaterial(item) {
this.selectedMaterial = item;
this.getMaterialItem(item.id,(data) =>{
this.getMaterialItem(item.id, (data) => {
this.selectedMaterialItem = data;
})
});
},
// 上一款 下一款
routerPush(isNext){
routerPush(isNext) {
this.$Router.push({
path: '/pages/material/createMaterial',
query:{
path: "/pages/material/createMaterial",
query: {
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 = []){
this.loadStatus = 'loading';
this.$http('stylelibraryorder.page', {
getList(materialTagIdList = []) {
this.loadStatus = "loading";
this.$http("stylelibraryorder.page", {
styleTag: this.keyword,
status: 0,
materialTagIdList,
size: 999,
current: 1,
}).then(res => {
}).then((res) => {
let { code, data } = res;
if (code === 200) {
if(Object.keys(data).length > 0){
if (Object.keys(data).length > 0) {
this.list = data.records;
}else{
this.list = []
} else {
this.list = [];
}
}
});
},
getItem(id){
this.$http("stylelibraryorder.details", id)
.then(res =>{
let {
code, data
} = res;
if(code === 200){
// 过滤出数据
this.detail = data;
let parts = (data.styleLibraryPictureVOList || [])
.sort((a,b) =>{
return a.isMainBodyPart - b.isMainBodyPart < -1
});
let selectedList = parts.reduce((res,item) =>{
let selectItem = item['styleLibraryMaterialVOList'].map(($i) => {
return {
...$i,
isMainBodyPart: item.isMainBodyPart,
materialColoursList: item.materialInfo.materialColoursList
}
});
return res.concat(selectItem)
},[])
this.submitData = selectedList;
// console.log(selectedList)
}
})
getItem(id) {
this.$http("stylelibraryorder.details", id).then((res) => {
let { code, data } = res;
if (code === 200) {
// 过滤出数据
this.detail = data;
let parts = (data.styleLibraryPictureVOList || []).sort((a, b) => {
return a.isMainBodyPart - b.isMainBodyPart < -1;
});
let selectedList = parts.reduce((res, item) => {
let selectItem = item["styleLibraryMaterialVOList"].map(($i) => {
return {
...$i,
isMainBodyPart: item.isMainBodyPart,
materialColoursList: item.materialInfo.materialColoursList,
};
});
return res.concat(selectItem);
}, []);
this.submitData = selectedList;
// console.log(selectedList)
}
});
},
// 获取颜色
getColors(){
this.$http("colour.selectColour", {color: ''})
.then(res =>{
let {
code, data
} = res;
if(code === 200){
this.colors = data;
}
})
getColors() {
this.$http("colour.selectColour", { color: "" }).then((res) => {
let { code, data } = res;
if (code === 200) {
this.colors = data;
}
});
},
// 可调整部位点击时间
partClick(index){
if(!this.isEditMode) return;
if(this.activePartIndex !== index){
partClick(index) {
if (!this.isEditMode) return;
if (this.activePartIndex !== index) {
this.activeColor = {};
this.selectedMaterial = {}
this.selectedMaterial = {};
}
this.activePartIndex = index;
this.isEdit = true;
},
}
}
},
};
</script>
<style scoped lang="scss">
.color-item{
&.active{
border:1px solid #DDA973;
.color-item {
&.active {
border: 1px solid #dda973;
}
}
.height-750rpx{
.height-750rpx {
height: 750rpx;
}
.view{
.view {
position: relative;
&:after{
&:after {
content: "";
position: absolute;
width: 100%;
......@@ -652,44 +717,52 @@ export default {
}
}
.bg-fff{ background: #fff}
.width_100{ width: 100rpx}
.inline-block{
.bg-fff {
background: #fff;
}
.width_100 {
width: 100rpx;
}
.inline-block {
display: inline-block;
margin-right: 10rpx;
}
.step{
width: 100%; height: 60rpx;
.step {
width: 100%;
height: 60rpx;
bottom: 16rpx;
left: 0;
color: #fff;
&.active{
&.active {
opacity: 100%;
}
&.hide{
&.hide {
opacity: 0%;
}
&-main{
background: rgba(0,0,0,0.20);
&-main {
background: rgba(0, 0, 0, 0.2);
}
}
.line{
.line {
height: 6rpx;
width: 100%;
background: #fff;
position: relative;
&-center{
&-center {
border-radius: 50%;
height: 16rpx; width: 16rpx;
height: 16rpx;
width: 16rpx;
position: absolute;
left: 50%; top: 50%;
left: 50%;
top: 50%;
margin-right: -8rpx;
margin-top: -8rpx;
background: #fff;
}
&-step{
&-step {
border-radius: 50%;
height: 40rpx; width: 40rpx;
height: 40rpx;
width: 40rpx;
position: absolute;
top: 50%;
margin-top: -20rpx;
......@@ -698,80 +771,84 @@ export default {
}
}
.prev,.next{
width: 144rpx; height: 88rpx; line-height: 88rpx;
color: #D5AA7A; text-align: center;
.prev,
.next {
width: 144rpx;
height: 88rpx;
line-height: 88rpx;
color: #d5aa7a;
text-align: center;
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;
}
.prev{
.prev {
border-top-right-radius: 100rpx;
border-bottom-right-radius: 100rpx;
left: 0;
}
.next{
.next {
border-top-left-radius: 100rpx;
border-bottom-left-radius: 100rpx;
right: 0;
}
.title{
&-tip{
.title {
&-tip {
width: 8rpx;
height: 32rpx;
background: #af8d66;
border-radius: 6rpx;
}
}
.image{
.image {
position: relative;
width: 160rpx;
height: 160rpx;
display: inline-block;
border-radius: 8rpx;
&-tip{
&-tip {
text-align: center;
width: 100%;
height: 40rpx;line-height: 40rpx;
background: rgba(255,255,255,0.80);
height: 40rpx;
line-height: 40rpx;
background: rgba(255, 255, 255, 0.8);
font-size: 24rpx;
position: absolute;
bottom: 0;
left: 0;
}
&.active{
border: 1px solid #DDA973;
&.active {
border: 1px solid #dda973;
}
}
.button{
.button {
border: 1px solid #333;
border-radius: 44rpx;
width: 160rpx;
height: 64rpx;
line-height: 64rpx;
text-align: center;
&-plain{
&--default{
&-plain {
&--default {
color: #333;
}
}
&-default{
&-default {
background: #333;
color: #fff;
}
&.active{
color: #AF8D66;
border: 1px solid #DDA973;
&.active {
color: #af8d66;
border: 1px solid #dda973;
}
&.changed{
color: #AF8D66;
&.changed {
color: #af8d66;
}
}
.body{
.body {
position: absolute;
background: rgba(239,239,239,0.61);
background: rgba(239, 239, 239, 0.61);
width: 100%;
height: auto;
left: 0;
......@@ -780,7 +857,7 @@ export default {
top: 0;
overflow-y: auto;
}
.overflow{
.overflow {
overflow-x: auto;
white-space: nowrap;
}
......@@ -791,12 +868,12 @@ export default {
z-index: 998;
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: env(safe-area-inset-bottom);
.footer-btn{
.footer-btn {
padding: 20rpx 60rpx;
.button{
.button {
border: 1px solid #333;
border-radius: 44rpx;
width: 100%;
......@@ -804,7 +881,7 @@ export default {
line-height: 88rpx;
text-align: center;
font-size: 34rpx;
&-default{
&-default {
background: #333;
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