dev
This commit is contained in:
@@ -0,0 +1,66 @@
|
||||
|
||||
.collection_con{
|
||||
padding: 20px;
|
||||
.title_item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
.title{
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
width: 60px;
|
||||
}
|
||||
.select{
|
||||
flex:1;
|
||||
height: 60px;
|
||||
border: 2px solid #e6e6e6;
|
||||
border-radius: 10px;
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
font-size: 26px;
|
||||
color: $color_font_two;
|
||||
.input{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.desc_item{
|
||||
display: flex;
|
||||
.title{
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
width: 60px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.desc{
|
||||
margin-left: 20px;
|
||||
flex:1;
|
||||
}
|
||||
}
|
||||
.btns_con{
|
||||
width: 100%;
|
||||
bottom:0;
|
||||
box-sizing: border-box;
|
||||
margin-top: 50px;
|
||||
.btns_two{
|
||||
display: flex;
|
||||
height: 82px;
|
||||
font-size: $font_size_big;
|
||||
border-radius: 40px;
|
||||
margin-bottom: 20px;
|
||||
.verify_btn{
|
||||
flex:1;
|
||||
border-radius: 40px;
|
||||
background: #007aff;
|
||||
text-align: center;
|
||||
line-height: 82px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import Popup from "@/components/popup";
|
||||
import { Input, ScrollView, Text, View } from "@tarojs/components";
|
||||
import { memo, useCallback, useMemo, useRef } from "react";
|
||||
import classnames from "classnames";
|
||||
import styles from './index.module.scss'
|
||||
import TextareaEnhance from "@/components/textareaEnhance";
|
||||
import { CreateFavoriteApi } from "@/api/favorite";
|
||||
import { alert } from "@/common/common";
|
||||
|
||||
//原因选择
|
||||
type ReasonInfoParam = {
|
||||
show?: boolean, //显示
|
||||
onClose?: () => void, //关闭
|
||||
}
|
||||
export default memo(({show = false, onClose}: ReasonInfoParam) => {
|
||||
|
||||
|
||||
const submitData = useRef({
|
||||
"name": '',
|
||||
"remark": ''
|
||||
})
|
||||
|
||||
const getOtherReason = useCallback((val) => {
|
||||
submitData.current.remark = val
|
||||
}, [])
|
||||
|
||||
const changeInput = useCallback((val) => {
|
||||
submitData.current.remark = val.detail.value
|
||||
}, [])
|
||||
|
||||
//创建
|
||||
const {fetchData} = CreateFavoriteApi()
|
||||
const onSubmit = async () => {
|
||||
if(submitData.current.name) return alert.error('请输入收藏夹名称')
|
||||
let res = await fetchData(submitData.current)
|
||||
}
|
||||
return (
|
||||
<Popup show={show} title="新建收藏夹" onClose={onClose} >
|
||||
<View className={styles.collection_con}>
|
||||
<View className={styles.title_item}>
|
||||
<View className={styles.title}>名称</View>
|
||||
<View className={styles.select}>
|
||||
<Input placeholder="请输入文件夹名称" className={styles.input} onInput={changeInput}/>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.desc_item}>
|
||||
<View className={styles.title}>简介</View>
|
||||
<View className={styles.desc}>
|
||||
<TextareaEnhance onChange={getOtherReason} placeholder="请输入简介"/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className={styles.btns_con}>
|
||||
<View className={styles.btns_two}>
|
||||
<View className={styles.verify_btn } onClick={() => onSubmit()}>确认</View>
|
||||
</View >
|
||||
</View>
|
||||
</View>
|
||||
</Popup>
|
||||
)
|
||||
})
|
||||
@@ -0,0 +1,47 @@
|
||||
|
||||
.collection_main {
|
||||
padding: 0 20px;
|
||||
min-height: 100%;
|
||||
background-color: #F8F8F8;
|
||||
.class_list{
|
||||
margin-top: 30px;
|
||||
.class_item{
|
||||
margin: 20px 0;
|
||||
}
|
||||
.class_title{
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
.title{
|
||||
flex: 1;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
font-size: 28px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.fg{
|
||||
padding: 0 10px;
|
||||
}
|
||||
.num, .fg{
|
||||
color: #707070;
|
||||
font-weight: normal;
|
||||
}
|
||||
.miconfont_left{
|
||||
font-size: 30px;
|
||||
color: #707070;
|
||||
}
|
||||
.miconfont_open{
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.miconfont_close {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.more{font-size: 26px;}
|
||||
|
||||
}
|
||||
.class_con{
|
||||
overflow: hidden;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -1,12 +1,72 @@
|
||||
import { FavoriteListApi } from "@/api/favorite";
|
||||
import Product from "@/components/product";
|
||||
import Search from "@/components/search"
|
||||
import { View } from "@tarojs/components"
|
||||
import { Text, View } from "@tarojs/components"
|
||||
import classnames from "classnames";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import CreatePopup from "./components/createPopup";
|
||||
import styles from './index.module.scss'
|
||||
export default () => {
|
||||
const changeOpenCon = (item) => {
|
||||
item.openStatus = !item.openStatus
|
||||
setList((e) => [...e])
|
||||
}
|
||||
|
||||
//获取列表
|
||||
const [list, setList] = useState([])
|
||||
const {fetchData: fetchDataList} = FavoriteListApi()
|
||||
const getFavoriteList = async () => {
|
||||
let res = await fetchDataList()
|
||||
console.log('res::', res)
|
||||
}
|
||||
useEffect(() => {
|
||||
getFavoriteList()
|
||||
let res:any = []
|
||||
new Array(10).fill('').map(item => {
|
||||
res.push(
|
||||
{
|
||||
"create_time": "string",
|
||||
"create_user_name": "string",
|
||||
"creator_id": 0,
|
||||
"id": 0,
|
||||
"name": `${item}- 收藏夹`,
|
||||
"product_color_list": [
|
||||
{
|
||||
"product_code": "string",
|
||||
"product_id": 0,
|
||||
"product_name": "string"
|
||||
}
|
||||
],
|
||||
"remark": "string",
|
||||
"update_time": "string",
|
||||
"update_user_name": "string",
|
||||
"updater_id": 0
|
||||
}
|
||||
)
|
||||
})
|
||||
console.log('res33::', res)
|
||||
setList(res)
|
||||
}, [])
|
||||
|
||||
|
||||
return (
|
||||
<View className={styles.main}>
|
||||
<View className={styles.collection_main}>
|
||||
<View className={styles.search}>
|
||||
<Search style={{width: '100%'}} debounceTime={300} changeOnSearch={(e) => console.log(e)} placeholder="请输入面料关键词" placeIcon="out" showBtn={true} />
|
||||
</View>
|
||||
<View className={styles.class_list}>
|
||||
{list?.map((item:any) => <View className={styles.class_item}>
|
||||
<View className={styles.class_title} onClick={() => changeOpenCon(item)}>
|
||||
<Text className={classnames(styles.miconfont_left, 'iconfont icon-a-moreback', item.openStatus?styles.miconfont_open:styles.miconfont_close)}></Text>
|
||||
<View className={styles.title}>默认收藏夹<Text className={styles.fg}>·</Text><Text className={styles.num}>11</Text></View>
|
||||
<View className={styles.more}>更多</View>
|
||||
</View>
|
||||
<View className={styles.class_con} style={item.openStatus?{maxHeight: 10*260 + 'rpx'}:{maxHeight: 0}} >
|
||||
<Product productList={new Array(10).fill('')}/>
|
||||
</View>
|
||||
</View>)}
|
||||
</View>
|
||||
<CreatePopup show={true}/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user