123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392 |
- import React, { Component } from 'react'
- import {
- StyleSheet,
- View,
- Image,
- StatusBar,
- Dimensions,
- PixelRatio,
- TouchableOpacity,
- Text,
- FlatList,
- ScrollView,
- TextInput,
- } from 'react-native'
- import { connect } from 'react-redux'
- import { createAction } from '../../../utils'
- import Input from '../../../components/input'
- const { width, height } = Dimensions.get('window')
- @connect(({ optional }) => ({ ...optional }))
- class OptFlatList extends Component {
- constructor(props) {
- super(props)
- this.state = { touchColor: '', refresh: true,findValue:'' }
- }
- _optionalRow(item, index) {
- let valuesname = []
- if (item.typeCode !== '04') {
- item.colorGroups.content.forEach((data, key) => {
- valuesname.push(
- <TouchableOpacity
- disabled={false}
- key={data.id}
- activeOpacity={1}
- style={{
- // height: 30,
- paddingHorizontal: 16,
- paddingVertical: 6,
- borderRadius: 100,
- borderColor: data.isChecked ? '#E14C46' : '#DDD',
- borderWidth: 1,
- justifyContent: 'center',
- alignItems: 'center',
- marginRight: 15,
- }}
- onPress={() => {
- this.props.dispatch(
- createAction('optional/getColorByGroups')({
- id : item.goodsId,
- groupId : data.id,
- colourCode : ""
- })
- )
- item.colorGroups.content.forEach(touchData => {
- touchData.isChecked = false
- })
- item.isChoose = data
- data.isChecked = true
- this.setState({
- touchColor: {
- "id" : data.id,
- "name" : data.name,
- }
- })
- }}
- >
- <Text
- style={{
- color: data.isChecked ? '#E14C46' : '#333',
- fontSize: 12,
- lineHeight: 17,
- }}
- numberOfLines={1}
- >
- {data.name}
- </Text>
- </TouchableOpacity>
- )
- })
- return (
- <View>
- <Text
- style={{
- color: '#999',
- fontSize: 14,
- marginTop: 15,
- lineHeight: 20,
- letterSpacing: 0.17,
- }}
- >
- {item.name+"分组"}
- </Text>
- <ScrollView
- scrollEnabled={true}
- removeClippedSubviews={true}
- showsHorizontalScrollIndicator={false}
- automaticallyAdjustContentInsets={false}
- pagingEnabled={true}
- locked={true}
- horizontal={true}
- style={{ flexDirection: 'row', marginTop: 8, overflow: 'hidden' }}
- >
- {valuesname}
- </ScrollView>
- </View>
- )
- } else {
- valuesname = (
- <View
- style={{
- flex: 1,
- borderBottomColor: '#DDD',
- marginLeft: 10,
- marginBottom: 1,
- marginRight: 10,
- borderBottomWidth: 1 / PixelRatio.get(),
- }}
- >
- <TextInput
- style={{
- flex: 1,
- padding: 0,
- fontSize: 12,
- lineHeight: 20,
- letterSpacing: 0.38,
- color: '#333',
- marginTop: 4,
- }}
- autoCapitalize="none"
- autoCorrect={false}
- underlineColorAndroid={'transparent'}
- clearButtonMode="while-editing"
- onChangeText={text => {
- item.item[0].attrValCode = text
- item.item[0].attrValId = text
- item.item[0].attrValName = text
- item.isChoose = item.item[0]
- }}
- defaultValue={item.item[0].attrValName}
- onBlur={() => {
- this.setState({ refresh: !this.state.refresh })
- }}
- // value={item.item}
- multiline={false}
- placeholder={'请输入'}
- placeholderTextColor={'#CCC'}
- />
- </View>
- )
- return (
- <View
- style={{
- flexDirection: 'row',
- paddingVertical: 7,
- marginTop: 5,
- }}
- >
- <Text
- style={{
- color: '#999',
- fontSize: 14,
- lineHeight: 20,
- letterSpacing: 0.17,
- alignSelf: 'center',
- }}
- >
- {item.name}
- </Text>
- {valuesname}
- </View>
- )
- }
- }
- //颜色卡片列表
- _colorList( item, index,colorData) {
- return(
- <View>
- <TouchableOpacity
- disabled={false}
- key={item.attrValId}
- activeOpacity={1}
- style={{
- paddingHorizontal: 16,
- paddingVertical: 6,
- borderRadius: 100,
- borderColor: item.isChecked ? '#E14C46' : '#DDD',
- borderWidth: 1,
- justifyContent: 'center',
- alignItems: 'center',
- marginRight: 15,
- width: 160,
- marginTop : 5
- }}
- onPress={() => {
- colorData.forEach(touchData => {
- touchData.isChecked = false
- })
- item.isChecked = true
- const touchColor = {};
- touchColor.children = item;
- this.props.dispatch(
- createAction('optional/getPriceByColorId')({
- organizationId : this.props.optionData[0].saleOrgId,
- customerId : CUSTOMERINFO.id,
- goodsId : this.props.optionData[0].goodsId,
- orderTypeId : '01',
- paletteId : item.attrValId,
- shopId : ''
- })
- ).finally(() => {
- if(this.props.goodsPriceByColor && this.props.goodsPriceByColor.length) {
- touchColor.goodsPriceByColor = this.props.goodsPriceByColor;
- this.props.chooseColor(touchColor);
- }
- })
- }}
- >
- <Text
- style={{
- color: item.isChecked ? '#E14C46' : '#333',
- fontSize: 12,
- lineHeight: 17,
- }}
- numberOfLines={1}
- >
- {item.attrValName}
- </Text>
- </TouchableOpacity>
- </View>
- )
- }
- //根据色卡号查询调色
- getColorByCode(colorCode) {
- const { optionData } = this.props
- console.log('getColorByCode==========>',colorCode)
- this.props.dispatch(
- createAction('optional/getColorByGroups')({
- id : optionData[0].goodsId,
- groupId : "",
- colourCode : colorCode?colorCode.toUpperCase():''
- })
- )
- }
- render() {
- console.log(this.props)
- const { optionData, chooseOpt,colorData } = this.props
- if (this.props.havaOpt) {
- const optChoose = []
- optionData.newGoodsAttrVals.sort(
- (a, b) => a.isOptionalAttr - b.isOptionalAttr
- )
- optionData.goodsAttrVals.forEach(data => {
- if (data.isOptionalAttr) {
- if (data.isChecked) {
- optChoose.push(data.attrValName)
- } else if (data.productAttrTypeCode == '04')
- optChoose.push(data.attrValName)
- }
- })
- return (
- <View
- style={{
- marginBottom: 10,
- paddingBottom: 20,
- paddingTop: 10,
- borderBottomColor: '#EEE',
- borderBottomWidth: 1 / PixelRatio.get(),
- }}
- >
- <View style={{ flexDirection: 'row', alignItems: 'center' }}>
- <Text style={styles.titleText}>子件:</Text>
- <Text style={styles.contentText}>
- {optionData.childGoodsName || optionData.goodsDisplayName}
- </Text>
- </View>
- <View
- style={{
- flexDirection: 'row',
- marginTop: 10,
- marginBottom: 10,
- alignItems: 'center',
- }}
- >
- <Text style={styles.titleText}>已选:</Text>
- <Text style={styles.contentText}>{optChoose.join(' | ')}</Text>
- </View>
- <FlatList
- keyExtractor={(item, index) => index}
- data={optionData.newGoodsAttrVals}
- extraData={{ ...this.props, ...this.state }}
- // columnWrapperStyle={{ flexWrap: "wrap" }}
- // numColumns={2}
- renderItem={({ item, key }) => this._optionalRow(item, key)}
- />
- </View>
- )
- } else {
- // optionData.sort((a, b) => a.isOptionalAttr - b.isOptionalAttr)
- return (
- <View>
- {/* <FlatList
- keyExtractor={(item, index) => index}
- data={optionData}
- extraData={{ ...this.props, ...this.state }}
- // columnWrapperStyle={{ flexWrap: "wrap" }}
- // numColumns={2}
- renderItem={({ item, key }) => this._optionalRow(item, key)}
- /> */}
- <Input
- // autoFocus={true}
- style={{
- // // fontSize: 12,
- // // lineHeight: 20,
- // // letterSpacing: 0.38,
- // // color: '#333',
- // // marginTop: 4,
- // // height: 32,
- // // borderRadius: 2,
- // // paddingLeft: 5,
- // height: 32,
- // // width: width - 50,
- // borderRadius: width / 2,
- // // alignSelf: 'center',
- // paddingLeft: 14,
- height: 28,
- width: width - 50,
- marginTop: 20,
- borderRadius: width / 2,
- alignSelf: 'center',
- paddingLeft: 14,
- }}
- textStyle={{
- paddingLeft: 10,
- height: 28,
- fontSize: 11,
- padding: 0,
- }}
- iconSize={14}
- //blurOnSubmit={true}
- multiline={false}
- textInputBacg={'#F5F5F5'}
- iconColor={'#CCC'}
- placeholderTextColor={'#CCC'}
- placeholderSize={8}
- placeholder = {'请输入颜色编码'}
- onchangeFn={e => {
- // onSubmitEditing={e => {
- this.getColorByCode(e)
- }}
- />
- <Text
- style={{
- color: '#999',
- fontSize: 14,
- marginTop: 15,
- lineHeight: 20,
- letterSpacing: 0.17,
- }}
- >
- 调色选项
- </Text>
- <FlatList
- keyExtractor={(item, index) => index}
- style={{height:280}}
- data={colorData&&colorData.length&&colorData[0].goodsAttrVals}
- renderItem={({ item, key}) => this._colorList(item, key,colorData[0].goodsAttrVals)}
- numColumns= {2}
- />
- </View>
- )
- }
- }
- }
- const styles = StyleSheet.create({
- titleText: {
- fontSize: 14,
- lineHeight: 20,
- color: '#999',
- },
- contentText: {
- flex: 1,
- fontSize: 13,
- lineHeight: 18,
- color: '#333',
- },
- })
- export default OptFlatList
|