RN(SKU)

Json

export default {
    "skus":[
        {
            "skuId":67567,
            "productId":34710,
            "skuProps":"50271:64701;50272:64703;50273:64706",
            "skuDesc":"颜色:红;大小:S;版本:港版",
            "costPrice":11,
            "basePrice":13,
            "marketPrice":110.1,
            "buyMin":0,
            "buyMax":96,
            "imageUrl":"http://opu0sjv52.bkt.clouddn.com/storeOnlineMana/1524100484887.jpg",
        },
        {
            "skuId":67568,
            "productId":34710,
            "skuProps":"50271:64701;50272:64703;50273:64707",
            "skuDesc":"颜色:红;大小:S;版本:大陆",
            "costPrice":12,
            "basePrice":13.1,
            "marketPrice":110.2,
            "buyMin":0,
            "buyMax":998,
            "imageUrl":"http://opu0sjv52.bkt.clouddn.com/storeOnlineMana/1524100491931.png",
        },
        {
            "skuId":67569,
            "productId":34710,
            "skuProps":"50271:64702;50272:64705;50273:64706",
            "skuDesc":"颜色:黄;大小:L;版本:港版",
            "costPrice":21,
            "basePrice":14,
            "marketPrice":110.3,
            "buyMin":0,
            "buyMax":1000,
            "imageUrl":"http://opu0sjv52.bkt.clouddn.com/storeOnlineMana/1524100607180.png",
        },
        {
            "skuId":67570,
            "productId":34710,
            "skuProps":"50271:64702;50272:64705;50273:64707",
            "skuDesc":"颜色:黄;大小:L;版本:大陆",
            "costPrice":22,
            "basePrice":14.1,
            "marketPrice":110.4,
            "buyMin":0,
            "buyMax":1000,
            "imageUrl":"http://opu0sjv52.bkt.clouddn.com/storeOnlineMana/1524100610797.png",
        },
        {
            "skuId":67571,
            "productId":34710,
            "skuProps":"50271:64702;50272:64704;50273:64706",
            "skuDesc":"颜色:黄;大小:M;版本:港版",
            "costPrice":19,
            "basePrice":13.8,
            "marketPrice":110.5,
            "buyMin":0,
            "buyMax":100,
            "imageUrl":"http://opu0sjv52.bkt.clouddn.com/storeOnlineMana/1524100598795.png",
        },
        {
            "skuId":67572,
            "productId":34710,
            "skuProps":"50271:64702;50272:64704;50273:64707",
            "skuDesc":"颜色:黄;大小:M;版本:大陆",
            "costPrice":20,
            "basePrice":13.9,
            "marketPrice":110.6,
            "buyMin":0,
            "buyMax":97,
            "imageUrl":"http://opu0sjv52.bkt.clouddn.com/storeOnlineMana/1524100602928.png",
        },
        {
            "skuId":67573,
            "productId":34710,
            "skuProps":"50271:64702;50272:64703;50273:64706",
            "skuDesc":"颜色:黄;大小:S;版本:港版",
            "costPrice":17,
            "basePrice":13.6,
            "marketPrice":110.7,
            "buyMin":0,
            "buyMax":98,
            "imageUrl":"http://opu0sjv52.bkt.clouddn.com/storeOnlineMana/1524100584827.png",
        },
        {
            "skuId":67574,
            "productId":34710,
            "skuProps":"50271:64702;50272:64703;50273:64707",
            "skuDesc":"颜色:黄;大小:S;版本:大陆",
            "costPrice":18,
            "basePrice":13.7,
            "marketPrice":110.8,
            "buyMin":0,
            "buyMax":90,
            "imageUrl":"http://opu0sjv52.bkt.clouddn.com/storeOnlineMana/1524100593928.png",
        },
        {
            "skuId":67575,
            "productId":34710,
            "skuProps":"50271:64701;50272:64705;50273:64706",
            "skuDesc":"颜色:红;大小:L;版本:港版",
            "costPrice":15,
            "basePrice":13.4,
            "marketPrice":110.9,
            "buyMin":0,
            "buyMax":100,
            "imageUrl":"http://opu0sjv52.bkt.clouddn.com/storeOnlineMana/1524100569307.png",
        },
        {
            "skuId":67576,
            "productId":34710,
            "skuProps":"50271:64701;50272:64705;50273:64707",
            "skuDesc":"颜色:红;大小:L;版本:大陆",
            "costPrice":16,
            "basePrice":13.5,
            "marketPrice":111,
            "buyMin":0,
            "buyMax":100,
            "imageUrl":"http://opu0sjv52.bkt.clouddn.com/storeOnlineMana/1524100589327.png",
        },
        {
            "skuId":67577,
            "productId":34710,
            "skuProps":"50271:64701;50272:64704;50273:64706",
            "skuDesc":"颜色:红;大小:M;版本:港版",
            "costPrice":13,
            "basePrice":13.2,
            "marketPrice":111.1,
            "buyMin":0,
            "buyMax":100,
            "imageUrl":"http://opu0sjv52.bkt.clouddn.com/storeOnlineMana/1524100499848.png",
        },
        {
            "skuId":67578,
            "productId":34710,
            "skuProps":"50271:64701;50272:64704;50273:64707",
            "skuDesc":"颜色:红;大小:M;版本:大陆",
            "costPrice":14,
            "basePrice":13.3,
            "marketPrice":111.2,
            "buyMin":0,
            "buyMax":1000,
            "imageUrl":"http://opu0sjv52.bkt.clouddn.com/storeOnlineMana/1524100505181.png",
        }
    ],
    "skupros":[
        {
            "proId":50271,
            "proName":"颜色",
            "values":[
                {
                    "proValueId":64701,
                    "proValue":"红"
                },
                {
                    "proValueId":64702,
                    "proValue":"黄",
                }
            ]
        },
        {
            "proId":50272,
            "proName":"大小",
            "values":[
                {
                    "proValueId":64703,
                    "proValue":"S"
                },
                {
                    "proValueId":64704,
                    "proValue":"MMMMMMMMMMMMMMMMMMMMM"
                },
                {
                    "proValueId":64705,
                    "proValue":"L"
                }
            ]
        },
        {
            "proId":50273,
            "proName":"版本",
            "values":[
                {
                    "proValueId":64706,
                    "proValue":"港版"
                },
                {
                    "proValueId":64707,
                    "proValue":"大陆"
                }
            ]
        }
    ]
}

Js

import React, {
    Component
} from 'react';
import {
    StyleSheet,
    View,
    Text,
    FlatList,
    InteractionManager,
    Image,
    ScrollView,
    TouchableOpacity,
} from 'react-native';


// import Navigator from './src/APP/Nav';

import Json from './src/APP/Json';


export default class App extends Component {

    constructor(props) {
        super(props)

        this.state = {
            dataSource: [],
            Json: Json,
            skuProps: '',
            proValue:"",
            selectDict:{},
        };
    }

    componentDidMount() {
        // console.ignoredYellowBox = [
        //     'Warning: componentWillUpdate has been renamed',
        //     'Warning: componentWillMount has been renamed',
        //     'Warning: componentWillReceiveProps has been renamed',
        //     'Warning: codePush.SyncStatus'
        //     // 'Warning: isMounted(...) is deprecated',
        // ]
        // console.disableYellowBox = true

        let newArray = []
        for (let i = 0; i < 10; i++) {
            let dict = {
                title: "标题",
                image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603344640367&di=1831eb733035d39e970b0a22110e3b1b&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F70%2F91%2F01300000261284122542917592865.jpg'
            }
            newArray.push(dict)
        }

        InteractionManager.runAfterInteractions(() => {
            //执行耗时的同步任务
            this.setState({dataSource: newArray});
        });


        // 假设已经知道...有颜色....大小.....版本可以选...并且索引是服务器返回的默认值...不会数组越界
        this.chooseIndex([1, 1, 0])

        // let newSku = []
        // for (let i = 0; i < skus.length; i++) {
        //     let dict = skus[i];
        //     if(skuProps == skus[i].skuProps){
        //         console.log(JSON.stringify(skus[i]))
        //     }
        //     newSku.push(dict);
        // }
        // 1865655:2217463;1865656:2217469;
    }

    // 默认选择第几个
    chooseIndex(chooseArrayIndex) {
        let skupros = []
        let skus = []
        let Json = this.state.Json
        if (Json && Json.skupros) {
            skupros = Json.skupros
        }
        if (Json && Json.skus) {
            skus = Json.skus
        }
        //默认选择第一个SKU
        let skuProps = ""  // 比如 1865655:2217467;1865656:2217470
        let newSkupros = [];
        for (let i = 0; i < skupros.length; i++) {
            let dict1 = skupros[i];
            let ChooseIndex = chooseArrayIndex[i];

            if (i != skupros.length) {
                skuProps = skuProps + dict1.proId + ':'
            } else {
                skuProps = skuProps + dict1.proId
            }
            let newValues = []
            for (let j = 0; j < dict1.values.length; j++) {
                let dict2 = dict1.values[j];
                dict2.isChoose = 'unselect'
                if (j == ChooseIndex) {
                    dict2.isChoose = 'select'
                    skuProps = skuProps + dict2.proValueId + ';'
                }
                newValues.push(dict2)
            }
            dict1.values = newValues;

            newSkupros.push(dict1)
        }

        skuProps = skuProps.substring(0, skuProps.length - 1)
        Json.skupros = newSkupros
        this.setState({Json: Json, skuProps: skuProps});
    }


    // 默认选择第几个
    onPress(isChoose,proId, proValueId, sessionIndex, Index) {
        if(isChoose == 'disable'){
            return
        }
        let skuPropsStr = this.state.skuProps;
        let skuPropsArray = skuPropsStr.split(";")
        skuPropsArray[sessionIndex] = proId + ':' + proValueId
        let lastSkuPropsStr = skuPropsArray.join(";")

        let skupros = []
        let skus = []
        let Json = this.state.Json
        if (Json && Json.skupros) {
            skupros = Json.skupros
        }
        if (Json && Json.skus) {
            skus = Json.skus
        }
        let selectDict = {}
        for (let i = 0; i < skus.length; i++) {
            let dict = skus[i];
            if(lastSkuPropsStr == dict.skuProps){
                selectDict = dict;
                // console.log('选中对象')
                // console.log(dict)
                break;
            }
        }


        let newSkupros = [];
        let proValue = this.state.proValue
        for (let i = 0; i < skupros.length; i++) {
            let dict1 = skupros[i];

            let newValues = []
            for (let j = 0; j < dict1.values.length; j++) {
                let dict2 = dict1.values[j];

                if (sessionIndex == i) {
                    if (proValueId == dict2.proValueId) {
                        dict2.isChoose = 'select'
                    }else{
                        dict2.isChoose = 'unselect'
                    }
                }
                newValues.push(dict2)
            }
            dict1.values = newValues;

            newSkupros.push(dict1)
        }
        Json.skupros = newSkupros

        InteractionManager.runAfterInteractions(() => {
            //执行耗时的同步任务
            this.setState({Json: Json,proValue:proValue,selectDict:selectDict});
        });
    }


    // render() {
    //     return (
    //         
    //          item.key = index.toString()}
    //             ListHeaderComponent={this.renderHeader}
    //             renderItem={this.renderItem}
    //             ref={(flatList)=>this.flatList = flatList}
    //             data={this.state.dataSource}
    //             ItemSeparatorComponent={()=> {
    //                 return 
    //             }}
    //         />
    //         
    //     );
    // }


    render() {

        let skupros = []
        let skus = []
        let Json = this.state.Json
        if (Json && Json.skupros) {
            skupros = Json.skupros
        }
        if (Json && Json.skus) {
            skus = Json.skus
        }

        return (
            
                
                    默认选中1,1,0
                    
                        {
                            skupros.map((item1, index1,) => {
                                return (
                                    
                                        {skupros[index1].proName}
                                        {this.renderSKUItem(skupros, index1, skus)}
                                    
                                );
                            })
                        }
                    
                    {JSON.stringify(this.state.selectDict)}
                
            
        );
    }

    //创建里面列表项目
    renderSKUItem(skupros, index1, skus) {
        return (
            
                {skupros[index1].values.map((item, index) => {

                    let backgroundColor = skupros[index1].values[index].isChoose == 1 ? 'rgba(255, 229, 241, 1)' : 'rgba(236, 236, 236, 1)'

                    let color = skupros[index1].values[index].isChoose == 1 ? 'rgba(255, 82, 160, 1)' : 'rgba(51, 51, 51, 0.8)'

                    let isChoose = skupros[index1].values[index].isChoose;
                    let ViewStyle = {}
                    if (isChoose == 'select') {
                        // 选中
                        ViewStyle = styles.select;
                    } else if (isChoose == 'unselect') {
                        // 没选中
                        ViewStyle = styles.unselect;
                    } else {
                        // 不可选择
                        ViewStyle = styles.disable;
                    }
                    let TextStyle = {}
                    if (isChoose == 'select') {
                        // 选中
                        TextStyle = styles.selectText;
                    } else if (isChoose == 'unselect') {
                        // 没选中
                        TextStyle = styles.unselectText;
                    } else {
                        // 不可选择
                        TextStyle = styles.disableText;
                    }


                    return (
                         {
                                this.onPress(isChoose,skupros[index1].proId, skupros[index1].values[index].proValueId, index1, index)
                            }}>
                            
                                {skupros[index1].values[index].proValue}
                            
                        
                    );
                })}
            
        )
    }


    renderHeader = ()=> {
        return (
            
                头部
            
        )
    }


    renderItem = (item)=> {
        let rowData = item.item;
        let Index = rowData.key;
        return (  
                {rowData.title} {Index}
                
            
        )
    }
};


const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    disable: {
        backgroundColor: 'rgba(0,0,0,0.05)'
    },
    unselect: {
        backgroundColor: 'lightgray',
        textDecorationLine: 'line-through'
    },
    select: {
        backgroundColor: 'orange'
    },
    disableText: {
        textDecorationLine: 'line-through'
    },
    unselectText: {},
    selectText: {}
});