Skip to content

T
taobao-mini-template
Commit 31696633 authored by mqf_0707's avatar mqf_0707
Browse files
Options

Merge branch 'c_client_taro-pack' of... 

Merge branch 'c_client_taro-pack' of http://gitlab2.dui88.com/qinhaitao/taobao-mini-template into c_client_taro-pack
parents 54254699 4864b784
Hide whitespace changes
Inline Side-by-side
Showing with 142 additions and 62 deletions
c_client/src/components/_tb_comps/ScrollXView/ScrollXView.jsx
View file @ 31696633
...@@ -15,7 +15,8 @@ function ScrollXView(props) { ...@@ -15,7 +15,8 @@ function ScrollXView(props) {
isShowPrizeName=true, isShowPrizeName=true,
prizeInCenterNum=2, prizeInCenterNum=2,
marginRight=26, marginRight=26,
backgroundColor='#E7E7EF' backgroundColor='#E7E7EF',
backgroundImage=''
} = props } = props
const showPrize = classnames(styles['show-pize-box'],{ const showPrize = classnames(styles['show-pize-box'],{
...@@ -28,7 +29,7 @@ function ScrollXView(props) { ...@@ -28,7 +29,7 @@ function ScrollXView(props) {
<ScrollView scrollX className={styles['scroll-x-box']}> <ScrollView scrollX className={styles['scroll-x-box']}>
{<View className={showPrize}> {<View className={showPrize}>
{ {
prizeList.map((itm,i) => { prizeList.length > 0 && prizeList.map((itm,i) => {
return( return(
<View <View
key={'prize'+i} key={'prize'+i}
...@@ -36,6 +37,7 @@ function ScrollXView(props) { ...@@ -36,6 +37,7 @@ function ScrollXView(props) {
style={{ style={{
width:`${containerWidth/100}rem`, width:`${containerWidth/100}rem`,
height:`${containerHeight/100}rem`, height:`${containerHeight/100}rem`,
backgroundImage:`${backgroundImage}`,
backgroundColor:backgroundColor, backgroundColor:backgroundColor,
marginRight:`${((prizeList.length > prizeInCenterNum) &&(prizeList.length - 1) !== i) ? `${marginRight/100}rem` : ''}` marginRight:`${((prizeList.length > prizeInCenterNum) &&(prizeList.length - 1) !== i) ? `${marginRight/100}rem` : ''}`
}} }}
...@@ -62,7 +64,6 @@ function ScrollXView(props) { ...@@ -62,7 +64,6 @@ function ScrollXView(props) {
className={styles['pirze__item-name']} className={styles['pirze__item-name']}
style={{ style={{
height:`${60/100}rem`, height:`${60/100}rem`,
// lineHeight:`${60/100}rem`,
fontSize:`${24/100}rem` fontSize:`${24/100}rem`
}} }}
>{itm.name}</View> >{itm.name}</View>
......
c_client/src/components/_tb_comps/ScrollXView/ScrollXView.md
View file @ 31696633
...@@ -12,7 +12,8 @@ ...@@ -12,7 +12,8 @@
| isShowPrizeName | Boolean | 是否展示奖品名称 | true | true:展示 false:不展示 | | isShowPrizeName | Boolean | 是否展示奖品名称 | true | true:展示 false:不展示 |
| prizeInCenterNum | Number | 奖品少于n个时居中展示 | n=2 | 多于n个,可滑动查看 | | prizeInCenterNum | Number | 奖品少于n个时居中展示 | n=2 | 多于n个,可滑动查看 |
| marginRight | Number | 奖品容器之间间距 | 26 | px | | marginRight | Number | 奖品容器之间间距 | 26 | px |
| backgroundColor | Number | 奖品容器背景颜色 | #E7E7EF | / | | backgroundColor | String | 奖品容器背景颜色 | #E7E7EF | / |
| backgroundImage | String | 奖品容器背景图 | '' | 默认为空 |
+ prizeList数组格式 + prizeList数组格式
```json ```json
...@@ -29,7 +30,7 @@ ...@@ -29,7 +30,7 @@
+ 使用 + 使用
```jsx ```jsx
import ScrollXView from '@/components/_tb_comps/ScrollXView/ScrollXView' import ScrollXView from '@/components/_tb_comps/ScrollXView/ScrollXView'
// 组件不一定在该目录下,举例说明一下 // 组件不一定在该目录下,仅做举例引入
const SCROLLXVIEW_CONFIG = { //不传走默认配置 const SCROLLXVIEW_CONFIG = { //不传走默认配置
prizeList: [], prizeList: [],
...@@ -40,7 +41,8 @@ ...@@ -40,7 +41,8 @@
isShowPrizeName:true, isShowPrizeName:true,
prizeInCenterNum:2, prizeInCenterNum:2,
marginRight:26, marginRight:26,
backgroundColor:'#E7E7EF' backgroundColor:'#E7E7EF',
backgroundImage:''
} }
export const Index = () => { export const Index = () => {
......
c_client/src/components/_tb_comps/ScrollXView/ScrollXView.module.less
View file @ 31696633
...@@ -23,6 +23,8 @@ ...@@ -23,6 +23,8 @@
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
.image-property(cover, center center);
} }
// .show-pirze__item:last-child { // .show-pirze__item:last-child {
// margin-right: 26px; // margin-right: 26px;
......
c_client/src/components/_tb_comps/SwiperView/SwiperView.jsx
View file @ 31696633
...@@ -24,7 +24,12 @@ const SwiperView = (props) => { ...@@ -24,7 +24,12 @@ const SwiperView = (props) => {
vertical=false, vertical=false,
duration=1000, duration=1000,
interval=1500, interval=1500,
disableTouch=false disableTouch=false,
swiperGroup={width:300,height:400},
swiperContent={width:300,height:400},
imgContent={width:200,height:200},
textContent={width:300,height:60},
showLeftRightBtn=true
} = props; } = props;
const [currentIndex, setCurrentIndex] = useState(0); const [currentIndex, setCurrentIndex] = useState(0);
...@@ -57,6 +62,7 @@ const SwiperView = (props) => { ...@@ -57,6 +62,7 @@ const SwiperView = (props) => {
return ( return (
<View className="scroll_container"> <View className="scroll_container">
{/* <View className='left_btn' >&lt;&lt;</View> */}
<Swiper <Swiper
className="swiper_group" className="swiper_group"
current={currentIndex} current={currentIndex}
...@@ -68,12 +74,21 @@ const SwiperView = (props) => { ...@@ -68,12 +74,21 @@ const SwiperView = (props) => {
duration={duration} duration={duration}
interval={interval} interval={interval}
disableTouch={disableTouch} disableTouch={disableTouch}
style={{
width:`${swiperGroup.width/100}rem`,
height:`${swiperGroup.height/100}rem`
}}
> >
{swiperList.length && {swiperList.length &&
swiperList.map((item, i) => ( swiperList.map((item, i) => (
<SwiperItem> <SwiperItem>
<View <View
className={`scroll_item ${i === currentIndex && isSpecial ? "current_item" : ""} ${useCustomAni(i)}`} className={`scroll_item ${i === currentIndex && isSpecial ? "current_item" : ""} ${useCustomAni(i)}`}
style={{
width:`${swiperContent.width/100}rem`,
height:`${swiperContent.height/100}rem`
}}
onTap={()=>getCurrentDetail(item)}
> >
{/* {i === currentIndex && ( {/* {i === currentIndex && (
<Image <Image
...@@ -86,8 +101,8 @@ const SwiperView = (props) => { ...@@ -86,8 +101,8 @@ const SwiperView = (props) => {
<Image <Image
className="img" className="img"
style={{ style={{
width:`${400/100}rem`, width:`${imgContent.width/100}rem`,
height:`${240/100}rem` height:`${imgContent.height/100}rem`
}} }}
src={item.image}></Image> src={item.image}></Image>
{ {
...@@ -95,24 +110,21 @@ const SwiperView = (props) => { ...@@ -95,24 +110,21 @@ const SwiperView = (props) => {
<View <View
className='text_content' className='text_content'
style={{ style={{
width:'100%', width:`${textContent.width/100}rem`,
height:`${160/100}rem` height:`${textContent.height/100}rem`,
padding:`${0/100}rem ${16/100}rem`
}} }}
> >
<View className='text' >{item.content}</View> <View className='text' >{item.content}</View>
</View> </View>
} }
{
item?.hasBtn &&
<View className='item_btn' >
<View className='right_btn' onTap={()=>getCurrentDetail(item)}>按钮{i}</View>
</View>
}
</View> </View>
</View> </View>
</SwiperItem> </SwiperItem>
))} ))}
</Swiper> </Swiper>
{/* <View className='right_btn' >&gt;&gt;</View> */}
</View> </View>
); );
}; };
......
c_client/src/components/_tb_comps/SwiperView/SwiperView.less
View file @ 31696633
.scroll_container{ .scroll_container{
width: 450px; width: 450px;
margin: 300px auto 0; margin: 0 auto;
overflow: hidden; overflow: hidden;
.swiper_group { .swiper_group {
margin: 0 auto; margin: 0 auto;
width: 450px; overflow: hidden;
overflow: visible;
position: relative; position: relative;
swiper-item { swiper-item {
width: 450px; width: 300px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.scroll_item { .scroll_item {
width: 400px; width: 300px;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
border-radius: 20px; border-radius: 20px;
...@@ -31,9 +30,9 @@ ...@@ -31,9 +30,9 @@
} }
.item_img_content { .item_img_content {
width: 100%; width: 100%;
// padding: 20px;
.img { .img {
margin: 20px auto 0; margin: 20px auto 10px;
display: block;
border-radius: 20px; border-radius: 20px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top center; background-position: top center;
...@@ -41,33 +40,10 @@ ...@@ -41,33 +40,10 @@
.text_content{ .text_content{
margin: 0 auto; margin: 0 auto;
box-sizing: border-box; box-sizing: border-box;
padding: 16px;
display: flex;
justify-content: center;
align-items: center;
.text{ .text{
color: #232323; color: #232323;
text-align: center; text-align: center;
font-size: 24px; font-size: 24px;
padding: 16px;
}
}
.item_btn{
width: 100%;
.right_btn{
// background-image: url('https://yun.duiba.com.cn/spark/assets/33bc06a1be4bf250345e24900bc5719992328d4e.png');
// .image-property(cover, center center);
width: 200px;
height: 65px;
margin: 0 auto;
border-radius: 40px;
border: 2px solid rgb(79, 172, 118) ;
text-align: center;
line-height: 65px;
font-size: 26px;
// animation: scales 2s infinite;
} }
} }
} }
...@@ -77,9 +53,6 @@ ...@@ -77,9 +53,6 @@
.text_content{ .text_content{
.text{} .text{}
} }
.item_btn{
.right_btn{}
}
} }
} }
......
c_client/src/components/_tb_comps/SwiperView/SwiperView.md
View file @ 31696633
...@@ -10,7 +10,10 @@ ...@@ -10,7 +10,10 @@
| duration | Number | 滑动动画时长| 1000 |/| | duration | Number | 滑动动画时长| 1000 |/|
| interval | Number | 自动切换时间间隔| 1500 |/| | interval | Number | 自动切换时间间隔| 1500 |/|
| easingFunction|String | 缓动动画类型| linear |'default','linear' 'easeInCubic' 'easeOutCubic' 'easeInOutCubic'| | easingFunction|String | 缓动动画类型| linear |'default','linear' 'easeInCubic' 'easeOutCubic' 'easeInOutCubic'|
| swiperGroup | Object | 整个swiper的宽高 |{width:300,height:400}|/|
| swiperContent | Object | 单个swiperItem的宽高 |{width:300,height:400}|/|
| imgContent | Object | 图片宽高 |{width:200,height:200}|/|
| textContent | Object | 文本宽高 |{width:300,height:60}|/|
#### swiperList数据 #### swiperList数据
```json ```json
...@@ -18,7 +21,6 @@ ...@@ -18,7 +21,6 @@
{ {
"image":"",//图片链接,图片宽高需要在less中修改 "image":"",//图片链接,图片宽高需要在less中修改
"content":"",//图片描述 "content":"",//图片描述
"hasBtn":"",//注入数据(是否有按钮)
// 或者手动修改组件中的字段名称 ... // 或者手动修改组件中的字段名称 ...
}, },
// ... // ...
...@@ -38,7 +40,11 @@ const swiperConfig = { //不传走默认配置 ...@@ -38,7 +40,11 @@ const swiperConfig = { //不传走默认配置
vertical:false, vertical:false,
duration:1000, duration:1000,
interval:1500, interval:1500,
disableTouch:false disableTouch:false,
swiperGroup:{width:300,height:400},
swiperContent:{width:300,height:400},
imgContent:{width:200,height:200},
textContent:{width:300,height:60}
} }
export const Index = () => { export const Index = () => {
......
c_client/src/const.js
View file @ 31696633
...@@ -34,4 +34,73 @@ export const CLOUD_OBJ = { ...@@ -34,4 +34,73 @@ export const CLOUD_OBJ = {
'1':'cloud://0BD38A1B739CCF6A552396F3FE2D5A09/开始-音效.mp3', '1':'cloud://0BD38A1B739CCF6A552396F3FE2D5A09/开始-音效.mp3',
'2':'cloud://93FBC274B6B43CE37B0A70DF8C1AFA52/答题-音效.mp3', '2':'cloud://93FBC274B6B43CE37B0A70DF8C1AFA52/答题-音效.mp3',
'3':'cloud://B8F0BA22BBA74F8FEA261E1CC9D55355/欢呼声.mp3' '3':'cloud://B8F0BA22BBA74F8FEA261E1CC9D55355/欢呼声.mp3'
}
/* 测试数据mock */
export const prizeList = [
{
image:
"https://yun.duiba.com.cn/spark/assets/240121a7e7e10a66ad0cfa99a8b3ba9631fc7855.png",
name:'商品描述商品描述商品描述商品描述商品描述1',
content:'商品描述商品描述商品描述商品描述商品描述1',
hasBtn:true
},
{
image:
"https://yun.duiba.com.cn/spark/assets/f9160b053f525455503ea58ae6b43bacea400362.png",
name:'商品描述商品描述商品描述商品描述商品描述2',
content:'商品描述商品描述商品描述商品描述商品描述2'
},
{
image:
"https://yun.duiba.com.cn/spark/assets/28b868b5da81ebd28a4eb14291a8ac287937221c.png",
name:'商品描述商品描述商品描述商品描述商品描述3',
content:'商品描述商品描述商品描述商品描述商品描述3'
},
{
image:
"https://yun.duiba.com.cn/spark/assets/3c305fb907bbebb85ad392cb959fbe62200c407f.png",
name:'商品描述商品描述商品描述商品描述商品描述4',
content:'商品描述商品描述商品描述商品描述商品描述4'
},
{
image:
"https://yun.duiba.com.cn/spark/assets/28b868b5da81ebd28a4eb14291a8ac287937221c.png",
name:'商品描述商品描述商品描述商品描述商品描述5',
content:'商品描述商品描述商品描述商品描述商品描述5'
},
{
image:
"https://yun.duiba.com.cn/spark/assets/3c305fb907bbebb85ad392cb959fbe62200c407f.png",
name:'商品描述商品描述商品描述商品描述商品描述6',
content:'商品描述商品描述商品描述商品描述商品描述6'
},
{
image:
"https://yun.duiba.com.cn/spark/assets/554a90eee5a31ae7628950907974bdee2da8c01e.png",
name:'商品描述商品描述商品描述商品描述商品描述7',
content:'商品描述商品描述商品描述商品描述商品描述7'
},
{
image:
"https://yun.duiba.com.cn/spark/assets/554a90eee5a31ae7628950907974bdee2da8c01e.png",
name:'商品描述商品描述商品描述商品描述商品描述8',
content:'商品描述商品描述商品描述商品描述商品描述8'
}
];
/*
浏览页倒计时标识
DEFAULT: 默认为空，不展示
PICTURE: loading进度条显示倒计时
NUMBER: 数字倒计时(15s)
*/
export const BROWSE_COUNTDOWN_OBJ = {
PICTURE:'PICTURE',
NUMBER:"NUMBER",
DEFAULT:""
} }
\ No newline at end of file
c_client/src/pages/index/index.jsx
View file @ 31696633
...@@ -53,14 +53,29 @@ const rotateConfig = { ...@@ -53,14 +53,29 @@ const rotateConfig = {
const SCROLLXVIEW_CONFIG = { const SCROLLXVIEW_CONFIG = {
prizeList: [], prizeList: [],
containerWidth : 300, containerWidth : 200,
containerHeight : 300, containerHeight : 200,
imgWidth:200, imgWidth:120,
imgHeight:200, imgHeight:120,
isShowPrizeName:true, isShowPrizeName:true,
prizeInCenterNum:2, prizeInCenterNum:3,
marginRight:26, marginRight:26,
backgroundColor:'#E7E7EF' backgroundColor:'#E7E7EF',
backgroundImage:''
}
const swiper_config = {
easingFunction:`linear`,
circular:true,
autoplay:true,
vertical:false,
duration:1000,
interval:1500,
disableTouch:false,
swiperGroup:{width:300,height:400},
swiperContent:{width:300,height:400},
imgContent:{width:200,height:200},
textContent:{width:300,height:60}
} }
function Index() { function Index() {
...@@ -196,11 +211,11 @@ function Index() { ...@@ -196,11 +211,11 @@ function Index() {
{/* <ScrollXView {...SCROLLXVIEW_CONFIG} prizeList={prizeList} /> */} {/* <ScrollXView {...SCROLLXVIEW_CONFIG} prizeList={prizeList} /> */}
{/* swiper左右滑动 */} {/* swiper左右滑动 */}
{/* <SwiperView swiperList={prizeList} /> */} {/* <SwiperView {...swiper_config} swiperList={prizeList} /> */}
{/* 大转盘 */} {/* 大转盘 */}
{/* <View className={styles['rotate']} <View className={styles['rotate']}
style={{ style={{
width:`${600/100}rem`, width:`${600/100}rem`,
height:`${600/100}rem`, height:`${600/100}rem`,
...@@ -210,7 +225,7 @@ function Index() { ...@@ -210,7 +225,7 @@ function Index() {
alignItems:'center' alignItems:'center'
}} > }} >
<RotateWheel {...rotateConfig} callback={()=>{}} /> <RotateWheel {...rotateConfig} callback={()=>{}} />
</View> */} </View>
<View className='view' onTap={playCurrentAudio}>play audio</View> <View className='view' onTap={playCurrentAudio}>play audio</View>
......
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