领取色卡
This commit is contained in:
parent
e13a1cebcc
commit
e043292f5d
@ -206,6 +206,24 @@ export default {
|
|||||||
'index',
|
'index',
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
root: 'pages/colorCard',
|
||||||
|
pages: [
|
||||||
|
'index',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
root: 'pages/getColorCard',
|
||||||
|
pages: [
|
||||||
|
'index',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
root: 'pages/colorCardOrder',
|
||||||
|
pages: [
|
||||||
|
'index',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
],
|
],
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,7 +5,7 @@ export const BASE_URL = CURRENT_BASE_URL
|
|||||||
// export const BASE_URL = `http://192.168.0.89:40001/lymarket`
|
// export const BASE_URL = `http://192.168.0.89:40001/lymarket`
|
||||||
// export const BASE_URL = `http://192.168.1.165:40001/lymarket` // 王霞
|
// export const BASE_URL = `http://192.168.1.165:40001/lymarket` // 王霞
|
||||||
// export const BASE_URL = 'https://test.zzfzyc.com/lymarket' // 测试环境
|
// export const BASE_URL = 'https://test.zzfzyc.com/lymarket' // 测试环境
|
||||||
// export const BASE_URL = 'https://pre.zzfzyc.com/lymarket' // 预发布
|
export const BASE_URL = 'https://pre.zzfzyc.com/lymarket' // 预发布
|
||||||
// export const BASE_URL = `http://192.168.1.9:40001/lymarket` // 发
|
// export const BASE_URL = `http://192.168.1.9:40001/lymarket` // 发
|
||||||
// export const BASE_URL = `http://192.168.1.9:50005/lymarket` // 发
|
// export const BASE_URL = `http://192.168.1.9:50005/lymarket` // 发
|
||||||
// export const BASE_URL = `http://192.168.1.30:50001/lymarket` // 发
|
// export const BASE_URL = `http://192.168.1.30:50001/lymarket` // 发
|
||||||
@ -30,6 +30,7 @@ export const COLLECTION_EMPTY_IMAGE = `${IMG_CND_Prefix}/mall/collection_empty.p
|
|||||||
// 在线支付图片baseUrl
|
// 在线支付图片baseUrl
|
||||||
export const CAP_HTML_TO_IMAGE_BASE_URL = CURRENT_CAP_HTML_TO_IMAGE_BASE_URL
|
export const CAP_HTML_TO_IMAGE_BASE_URL = CURRENT_CAP_HTML_TO_IMAGE_BASE_URL
|
||||||
// export const CAP_HTML_TO_IMAGE_BASE_URL = 'http://192.168.1.127:8081'
|
// export const CAP_HTML_TO_IMAGE_BASE_URL = 'http://192.168.1.127:8081'
|
||||||
|
|
||||||
// 获取CND资源
|
// 获取CND资源
|
||||||
export const getCDNSource = (suffix: string) => {
|
export const getCDNSource = (suffix: string) => {
|
||||||
return IMG_CND_Prefix + suffix
|
return IMG_CND_Prefix + suffix
|
||||||
|
|||||||
@ -1,20 +1,20 @@
|
|||||||
.mainBox {
|
.mainBox {
|
||||||
height: calc(100vh - 200px);
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
.pic {
|
.pic {
|
||||||
width: 522px;
|
width: 522px;
|
||||||
height: 322px;
|
height: 322px;
|
||||||
// opacity: 0.3;
|
// opacity: 0.3;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
color: $color_font_two;
|
color: $color_font_two;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
17
src/components/selectAddress/index.tsx
Normal file
17
src/components/selectAddress/index.tsx
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import { View } from '@tarojs/components'
|
||||||
|
import { useState } from 'react'
|
||||||
|
import AddressList from '../AddressList'
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
import Popup from '@/components/popup'
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
const [showAddressList, setShowAddressList] = useState(false)
|
||||||
|
return <Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
|
||||||
|
<View className={styles.order_address_list}>
|
||||||
|
<View className={styles.order_address_title}>请选择收货地址</View>
|
||||||
|
<View className={styles.addressList_con}>
|
||||||
|
<AddressList />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Popup>
|
||||||
|
}
|
||||||
78
src/pages/colorCard/components/productItem/index.module.scss
Normal file
78
src/pages/colorCard/components/productItem/index.module.scss
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
.list_item {
|
||||||
|
padding: 0 24px;
|
||||||
|
margin-top: 20px;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16px;
|
||||||
|
.item_header {
|
||||||
|
height: 82px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
color: #000000ff;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 500;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
text {
|
||||||
|
&:nth-child(2) {
|
||||||
|
color: #0d7cffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_con {
|
||||||
|
display: flex;
|
||||||
|
padding: 24px 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
.image {
|
||||||
|
width: 134px;
|
||||||
|
height: 134px;
|
||||||
|
}
|
||||||
|
.item_con_desc {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 28px;
|
||||||
|
.item_con_name {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-left: 24px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.item_con_count {
|
||||||
|
text-align: right;
|
||||||
|
color: rgba(0, 0, 0, 0.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.card_info {
|
||||||
|
font-size: 24px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 16px;
|
||||||
|
color: rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
.express {
|
||||||
|
color: #f64861ff;
|
||||||
|
font-size: 28px;
|
||||||
|
text-align: right;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
.btns {
|
||||||
|
padding: 16px 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
text {
|
||||||
|
display: inline-block;
|
||||||
|
width: 195px;
|
||||||
|
height: 72px;
|
||||||
|
border-radius: 40px;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||||
|
text-align: center;
|
||||||
|
line-height: 72px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
32
src/pages/colorCard/components/productItem/index.tsx
Normal file
32
src/pages/colorCard/components/productItem/index.tsx
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import { Text, View } from '@tarojs/components'
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
import LabAndImg from '@/components/LabAndImg'
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
return <View className={styles.list_item}>
|
||||||
|
<View className={styles.item_header}>
|
||||||
|
<Text>单号:XS-LY-2208220092</Text>
|
||||||
|
<Text>申请中</Text>
|
||||||
|
</View>
|
||||||
|
<View className={styles.item_con}>
|
||||||
|
<View className={styles.image}>
|
||||||
|
<LabAndImg value={{}} showStatus={false} />
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View className={styles.item_con_desc}>
|
||||||
|
<View className={styles.item_con_name}>
|
||||||
|
<Text>9265# 26S全棉双卫衣</Text>
|
||||||
|
<Text>物流</Text>
|
||||||
|
</View>
|
||||||
|
<Text className={styles.item_con_count}>x1本</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
</View>
|
||||||
|
<View className={styles.card_info}>
|
||||||
|
<Text>色卡信息:</Text>
|
||||||
|
<Text>3 种色卡,共 3 本</Text>
|
||||||
|
</View>
|
||||||
|
<View className={styles.express}>快递到付</View>
|
||||||
|
<View className={styles.btns}><Text>取消订单</Text></View>
|
||||||
|
</View>
|
||||||
|
}
|
||||||
4
src/pages/colorCard/index.config.ts
Normal file
4
src/pages/colorCard/index.config.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
export default {
|
||||||
|
navigationBarTitleText: '色卡剪样',
|
||||||
|
enableShareAppMessage: true,
|
||||||
|
}
|
||||||
73
src/pages/colorCard/index.module.scss
Normal file
73
src/pages/colorCard/index.module.scss
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
.main {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f7f7f7ff;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.btn_list {
|
||||||
|
height: 116px;
|
||||||
|
background: #ffffff;
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 24px;
|
||||||
|
.btn_item {
|
||||||
|
width: 224px;
|
||||||
|
height: 68px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 68px;
|
||||||
|
font-size: 28px;
|
||||||
|
border-radius: 68px;
|
||||||
|
background-color: #e9e9e9ff;
|
||||||
|
color: rgba(0, 0, 0, 0.6);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.select_ed {
|
||||||
|
background-color: #337fff1a;
|
||||||
|
border: 1px solid #337fffff;
|
||||||
|
color: #337fffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.con {
|
||||||
|
height: calc(100vh - 376px);
|
||||||
|
display: flex;
|
||||||
|
.kong_image {
|
||||||
|
width: 410px;
|
||||||
|
height: 268px;
|
||||||
|
text-align: center;
|
||||||
|
image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin-bottom: 37px;
|
||||||
|
}
|
||||||
|
text {
|
||||||
|
font-size: 28px;
|
||||||
|
color: rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.con_list {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.get_card_btn {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 16px 24px 66px 24px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0px -5px 20px -8px rgba(0, 0, 0, 0.06);
|
||||||
|
text {
|
||||||
|
display: inline-block;
|
||||||
|
width: 702px;
|
||||||
|
height: 80px;
|
||||||
|
background: #4581ff;
|
||||||
|
border-radius: 40px;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 80px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
62
src/pages/colorCard/index.tsx
Normal file
62
src/pages/colorCard/index.tsx
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
import { Image, Text, View } from '@tarojs/components'
|
||||||
|
import Taro from '@tarojs/taro'
|
||||||
|
import { useRef, useState } from 'react'
|
||||||
|
import classNames from 'classnames'
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
import ProductItem from './components/productItem'
|
||||||
|
import SelectList from '@/components/selectList'
|
||||||
|
import kong from '@/styles/image/kong.png'
|
||||||
|
import LabAndImg from '@/components/LabAndImg'
|
||||||
|
import InfiniteScroll from '@/components/infiniteScroll'
|
||||||
|
import { goLink } from '@/common/common'
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
const [selectIndex, setSelectIndex] = useState(1)
|
||||||
|
const selectList = [
|
||||||
|
{ value: 1, label: '色卡记录' },
|
||||||
|
{ value: 2, label: '剪样记录' },
|
||||||
|
]
|
||||||
|
|
||||||
|
const [statusIndex, setStatusIndex] = useState(1)
|
||||||
|
const selectStatus = [
|
||||||
|
{ value: 1, label: '全部记录' },
|
||||||
|
{ value: 2, label: '申请中' },
|
||||||
|
{ value: 3, label: '已完成' },
|
||||||
|
]
|
||||||
|
|
||||||
|
const changeStatus = (index: number) => {
|
||||||
|
setStatusIndex(index)
|
||||||
|
}
|
||||||
|
return <View className={styles.main}>
|
||||||
|
<SelectList list={selectList} defaultIndex={selectIndex} onSelect={index => setSelectIndex(index)} />
|
||||||
|
<View className={styles.btn_list}>
|
||||||
|
{selectStatus.map(item => <View key={item.value} onClick={() => changeStatus(item.value)} className={classNames(styles.btn_item, statusIndex === item.value && styles.select_ed)}>{item.label}</View>)}
|
||||||
|
</View>
|
||||||
|
<View className={styles.con}>
|
||||||
|
{false && <View className={styles.kong_image}>
|
||||||
|
<Image src={kong}></Image>
|
||||||
|
<Text>还没有领取过色卡</Text>
|
||||||
|
</View>}
|
||||||
|
<View className={styles.con_list}>
|
||||||
|
<InfiniteScroll
|
||||||
|
statusMore={2}
|
||||||
|
refresherEnabled
|
||||||
|
// selfonScrollToLower={getScrolltolower}
|
||||||
|
// refresherTriggered={refresherTriggeredStatus}
|
||||||
|
// selfOnRefresherRefresh={getRefresherRefresh}
|
||||||
|
>
|
||||||
|
{new Array(10).fill('').map((item) => {
|
||||||
|
return (
|
||||||
|
<View key={item.id} className={styles.order_item_con}>
|
||||||
|
<ProductItem />
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</InfiniteScroll>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View className={styles.get_card_btn} onClick={() => goLink('/pages/getColorCard/index')}>
|
||||||
|
<Text>领取色卡</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
}
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
.address_con {
|
||||||
|
display: flex;
|
||||||
|
padding: 32px;
|
||||||
|
background-color: #ffffffff;
|
||||||
|
border-radius: 16px;
|
||||||
|
.message {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 24px;
|
||||||
|
.info_address {
|
||||||
|
font-size: 28px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
padding-bottom: 16px;
|
||||||
|
.address_name {
|
||||||
|
color: rgba(0, 0, 0, 0.8);
|
||||||
|
width: 461px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.info_phone {
|
||||||
|
display: flex;
|
||||||
|
padding-top: 32px;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 28px;
|
||||||
|
color: rgba(0, 0, 0, 0.8);
|
||||||
|
text {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
&:nth-child(2) {
|
||||||
|
color: #337fffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
44
src/pages/colorCardOrder/components/address/index.tsx
Normal file
44
src/pages/colorCardOrder/components/address/index.tsx
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
import { Text, View } from '@tarojs/components'
|
||||||
|
import { useState } from 'react'
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
import IconFont from '@/components/iconfont/iconfont'
|
||||||
|
import AddressList from '@/components/AddressList'
|
||||||
|
import Popup from '@/components/popup'
|
||||||
|
|
||||||
|
interface Param {
|
||||||
|
address_title: string
|
||||||
|
address_name: string
|
||||||
|
address_phone: string
|
||||||
|
address_mode: string
|
||||||
|
}
|
||||||
|
export default (props: Param) => {
|
||||||
|
const {
|
||||||
|
address_title = '广东省佛山市禅城区南庄镇吉利大道872巷备份',
|
||||||
|
address_name = '谭先生',
|
||||||
|
address_phone = '13334726540',
|
||||||
|
address_mode = '物流',
|
||||||
|
} = props
|
||||||
|
|
||||||
|
const [showList, setShowList] = useState(true)
|
||||||
|
return <View className={styles.address_con}>
|
||||||
|
<IconFont name="icon-dizhiguanli" size={50} />
|
||||||
|
<View className={styles.message}>
|
||||||
|
<View className={styles.info_address}>
|
||||||
|
<View className={styles.address_name}>{address_title}</View>
|
||||||
|
<IconFont name="icon-rukou" color="#979797FF" />
|
||||||
|
</View>
|
||||||
|
<View className={styles.info_phone}>
|
||||||
|
<Text>{address_name + address_phone}</Text>
|
||||||
|
<Text>{address_mode}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<Popup show={showList} showTitle={false} onClose={() => setShowList(false)}>
|
||||||
|
<View className={styles.order_address_list}>
|
||||||
|
<View className={styles.order_address_title}>请选择收货地址</View>
|
||||||
|
<View className={styles.addressList_con}>
|
||||||
|
<AddressList />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Popup>
|
||||||
|
</View>
|
||||||
|
}
|
||||||
@ -0,0 +1,51 @@
|
|||||||
|
.card_con {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 0 24px;
|
||||||
|
margin-top: 24px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 16px;
|
||||||
|
.card_header {
|
||||||
|
height: 82px;
|
||||||
|
font-size: 28px;
|
||||||
|
color: rgba(0, 0, 0, 0.8);
|
||||||
|
font-weight: 500;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
line-height: 82px;
|
||||||
|
}
|
||||||
|
.card_list {
|
||||||
|
.card_item {
|
||||||
|
height: 140px;
|
||||||
|
display: flex;
|
||||||
|
padding-top: 24px;
|
||||||
|
color: rgba(0, 0, 0, 0.8);
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 108px;
|
||||||
|
height: 108px;
|
||||||
|
}
|
||||||
|
.name_count {
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 42px;
|
||||||
|
flex: 1;
|
||||||
|
font-size: 28px;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
.btns {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
.count_btn {
|
||||||
|
margin-top: 27px;
|
||||||
|
width: 170px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.express_btn {
|
||||||
|
font-size: 28px;
|
||||||
|
color: #f64861;
|
||||||
|
width: 100%;
|
||||||
|
text-align: right;
|
||||||
|
padding: 32px 0 24px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
49
src/pages/colorCardOrder/components/productCard/index.tsx
Normal file
49
src/pages/colorCardOrder/components/productCard/index.tsx
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
import { Text, View } from '@tarojs/components'
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
import Counter from '@/components/counter'
|
||||||
|
import LabAndImg from '@/components/LabAndImg'
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
return <View className={styles.card_con}>
|
||||||
|
<View className={styles.card_header}>色卡信息</View>
|
||||||
|
<View className={styles.card_list}>
|
||||||
|
<View className={styles.card_item}>
|
||||||
|
<View className={styles.img}><LabAndImg value={{}} /></View>
|
||||||
|
<View className={styles.name_count}>
|
||||||
|
<Text>秋季平纹卫衣(食毛)系列</Text>
|
||||||
|
<View className={styles.btns}>
|
||||||
|
<View className={styles.count_btn}>
|
||||||
|
<Counter
|
||||||
|
minNum={1}
|
||||||
|
maxNum={2}
|
||||||
|
defaultNum={1}
|
||||||
|
unit="米"
|
||||||
|
returnZero
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View className={styles.card_item}>
|
||||||
|
<View className={styles.img}><LabAndImg value={{}} /></View>
|
||||||
|
<View className={styles.name_count}>
|
||||||
|
<Text>秋季平纹卫衣(食毛)系列</Text>
|
||||||
|
<View className={styles.btns}>
|
||||||
|
<View className={styles.count_btn}>
|
||||||
|
<Counter
|
||||||
|
minNum={1}
|
||||||
|
maxNum={2}
|
||||||
|
defaultNum={1}
|
||||||
|
unit="米"
|
||||||
|
returnZero
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View className={styles.express_btn}>快递到付</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
}
|
||||||
25
src/pages/colorCardOrder/components/remark/index.module.scss
Normal file
25
src/pages/colorCardOrder/components/remark/index.module.scss
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
.remarks {
|
||||||
|
height: 165px;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 16px;
|
||||||
|
margin-top: 24px;
|
||||||
|
padding: 0 32px;
|
||||||
|
font-size: 28px;
|
||||||
|
.remarks_header {
|
||||||
|
display: flex;
|
||||||
|
height: 80px;
|
||||||
|
line-height: 80px;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
text {
|
||||||
|
&:nth-child(2) {
|
||||||
|
color: rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.remarks_message {
|
||||||
|
height: 82px;
|
||||||
|
line-height: 82px;
|
||||||
|
color: rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
14
src/pages/colorCardOrder/components/remark/index.tsx
Normal file
14
src/pages/colorCardOrder/components/remark/index.tsx
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { Text, View } from '@tarojs/components'
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
return <View className={styles.remarks}>
|
||||||
|
<View className={styles.remarks_header}>
|
||||||
|
<Text>备注信息</Text>
|
||||||
|
<Text>填写/修改备注</Text>
|
||||||
|
</View>
|
||||||
|
<View className={styles.remarks_message}>
|
||||||
|
<Text>尚未备注信息</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
}
|
||||||
4
src/pages/colorCardOrder/index.config.ts
Normal file
4
src/pages/colorCardOrder/index.config.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
export default {
|
||||||
|
navigationBarTitleText: '领取色卡',
|
||||||
|
enableShareAppMessage: true,
|
||||||
|
}
|
||||||
50
src/pages/colorCardOrder/index.module.scss
Normal file
50
src/pages/colorCardOrder/index.module.scss
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
.main {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f7f7f7ff;
|
||||||
|
padding: 24px;
|
||||||
|
.add_card_btn {
|
||||||
|
height: 82px;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 1px solid #337fff;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 82px;
|
||||||
|
color: #337fff;
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order_btn {
|
||||||
|
position: fixed;
|
||||||
|
height: 162px;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0px -5px 20px -8px rgba(0, 0, 0, 0.06);
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
padding: 0 24px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.btn_con {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
text {
|
||||||
|
font-size: 24px;
|
||||||
|
color: rgba(0, 0, 0, 0.4);
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
width: 293px;
|
||||||
|
height: 80px;
|
||||||
|
background: #4581ff;
|
||||||
|
border-radius: 40px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 80px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
20
src/pages/colorCardOrder/index.tsx
Normal file
20
src/pages/colorCardOrder/index.tsx
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import { Text, View } from '@tarojs/components'
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
import Address from './components/address'
|
||||||
|
import ProductCard from './components/productCard'
|
||||||
|
import Remark from './components/remark'
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
return <View className={styles.main}>
|
||||||
|
<Address />
|
||||||
|
<View className={styles.add_card_btn}>添加色卡</View>
|
||||||
|
<ProductCard />
|
||||||
|
<Remark />
|
||||||
|
<View className={styles.order_btn}>
|
||||||
|
<View className={styles.btn_con}>
|
||||||
|
<Text>当前共 1 种色卡, 共 3 本</Text>
|
||||||
|
<View className={styles.btn}>提交订单</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
}
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
.get_card_item {
|
||||||
|
padding: 24px 16px;
|
||||||
|
display: flex;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
.image {
|
||||||
|
width: 144px;
|
||||||
|
height: 144px;
|
||||||
|
}
|
||||||
|
.card_info {
|
||||||
|
margin-left: 24px;
|
||||||
|
flex: 1;
|
||||||
|
.card_info_name {
|
||||||
|
font-size: 28px;
|
||||||
|
color: rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
.card_info_label {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 85px);
|
||||||
|
grid-gap: 10px 10px;
|
||||||
|
margin-top: 10px;
|
||||||
|
text {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #4581ff;
|
||||||
|
width: 85px;
|
||||||
|
height: 34px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 34px;
|
||||||
|
background-color: rgba(69, 129, 255, 0.15);
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.checkBox {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
29
src/pages/getColorCard/components/productItem/index.tsx
Normal file
29
src/pages/getColorCard/components/productItem/index.tsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import { Text, View } from '@tarojs/components'
|
||||||
|
import { useState } from 'react'
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
import LabAndImg from '@/components/LabAndImg'
|
||||||
|
import Checkbox from '@/components/checkbox'
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
const [checkStatus, setCheckStatus] = useState(false)
|
||||||
|
const changeSelect = () => {
|
||||||
|
setCheckStatus(!checkStatus)
|
||||||
|
}
|
||||||
|
return <View className={styles.get_card_item} onClick={changeSelect}>
|
||||||
|
<View className={styles.image}>
|
||||||
|
<LabAndImg value={{}} />
|
||||||
|
</View>
|
||||||
|
<View className={styles.card_info}>
|
||||||
|
<View className={styles.card_info_name}>冬季平纹卫衣(食毛)系列</View>
|
||||||
|
<View className={styles.card_info_label}>
|
||||||
|
<Text>0042</Text>
|
||||||
|
<Text>0042</Text>
|
||||||
|
<Text>0042</Text>
|
||||||
|
<Text>0042</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View className={styles.checkBox}>
|
||||||
|
<Checkbox status={checkStatus} onSelect={() => setCheckStatus(true)} onClose={() => setCheckStatus(false)} />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
}
|
||||||
4
src/pages/getColorCard/index.config.ts
Normal file
4
src/pages/getColorCard/index.config.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
export default {
|
||||||
|
navigationBarTitleText: '添加色卡',
|
||||||
|
enableShareAppMessage: true,
|
||||||
|
}
|
||||||
49
src/pages/getColorCard/index.module.scss
Normal file
49
src/pages/getColorCard/index.module.scss
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
.main {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f7f7f7ff;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.search {
|
||||||
|
width: 100%;
|
||||||
|
height: 96px;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 16px 24px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
.btn_reset {
|
||||||
|
display: flex;
|
||||||
|
width: 100px;
|
||||||
|
font-size: 28px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
color: rgba(0, 0, 0, 0.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.get_card_con {
|
||||||
|
background-color: #fff;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: calc(100vh - 260px);
|
||||||
|
.get_card_list {
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.get_card_btn {
|
||||||
|
height: 161px;
|
||||||
|
background: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 0px -5px 20px -8px rgba(0, 0, 0, 0.06);
|
||||||
|
text {
|
||||||
|
width: 702px;
|
||||||
|
height: 80px;
|
||||||
|
background: #4581ff;
|
||||||
|
border-radius: 40px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 80px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
40
src/pages/getColorCard/index.tsx
Normal file
40
src/pages/getColorCard/index.tsx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import { Image, Text, View } from '@tarojs/components'
|
||||||
|
import { useRef, useState } from 'react'
|
||||||
|
import classNames from 'classnames'
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
import ProductItem from './components/productItem'
|
||||||
|
import InfiniteScroll from '@/components/infiniteScroll'
|
||||||
|
import Search from '@/components/search'
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
const [search, setSearch] = useState<string>()
|
||||||
|
const getSearch = (con) => {
|
||||||
|
setSearch(con)
|
||||||
|
}
|
||||||
|
const onReset = () => {
|
||||||
|
setSearch('')
|
||||||
|
}
|
||||||
|
return <View className={styles.main}>
|
||||||
|
<View className={styles.search}>
|
||||||
|
<Search defaultValue={search} placeholder="请输入搜索面料/色卡" changeOnSearch={getSearch} />
|
||||||
|
<View className={styles.btn_reset} onClick={onReset}>取消</View>
|
||||||
|
</View>
|
||||||
|
<View className={styles.get_card_con}>
|
||||||
|
<InfiniteScroll
|
||||||
|
statusMore={2}
|
||||||
|
refresherEnabled
|
||||||
|
>
|
||||||
|
{new Array(10).fill('').map((item) => {
|
||||||
|
return (
|
||||||
|
<View className={styles.get_card_list} key={item.id}>
|
||||||
|
<ProductItem />
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</InfiniteScroll>
|
||||||
|
</View>
|
||||||
|
<View className={styles.get_card_btn} >
|
||||||
|
<Text>确认</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
}
|
||||||
@ -59,7 +59,8 @@ export default () => {
|
|||||||
|
|
||||||
const menuList = [
|
const menuList = [
|
||||||
{ label: '地址管理', icon: 'icon-dizhiguanli', callback: () => goLink('/pages/addressManager/index') },
|
{ label: '地址管理', icon: 'icon-dizhiguanli', callback: () => goLink('/pages/addressManager/index') },
|
||||||
// { label: '码单管理', icon: 'icon-mdgl', icon_status: 'local', callback: () => goLink('/pages/codeList/index') },
|
{ label: '码单管理', icon: 'icon-mdgl', icon_status: 'local', callback: () => goLink('/pages/codeList/index') },
|
||||||
|
{ label: '色卡剪样', icon: 'icon-yanseduibi', callback: () => goLink('/pages/colorCard/index') },
|
||||||
{ label: '颜色对比', icon: 'icon-yanseduibi', callback: () => goLink('/pages/sampleComparison/index') },
|
{ label: '颜色对比', icon: 'icon-yanseduibi', callback: () => goLink('/pages/sampleComparison/index') },
|
||||||
{ label: '我的客服', icon: 'icon-wodekefu', text: '7x24小时服务', callback: () => (set_customer_service_show(true)) },
|
{ label: '我的客服', icon: 'icon-wodekefu', text: '7x24小时服务', callback: () => (set_customer_service_show(true)) },
|
||||||
]
|
]
|
||||||
|
|||||||
BIN
src/styles/image/kong.png
Normal file
BIN
src/styles/image/kong.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Loading…
x
Reference in New Issue
Block a user