美文网首页
RN(SKU)

RN(SKU)

作者: 苹果雪梨渣 | 来源:发表于2020-10-23 15:24 被阅读0次
    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 (
    //         <View style={{flex:1}}>
    //         <FlatList
    //             keyExtractor={(item, index) => item.key = index.toString()}
    //             ListHeaderComponent={this.renderHeader}
    //             renderItem={this.renderItem}
    //             ref={(flatList)=>this.flatList = flatList}
    //             data={this.state.dataSource}
    //             ItemSeparatorComponent={()=> {
    //                 return <View style={{height:10,width:'100%',backgroundColor:'lightgray'}}/>
    //             }}
    //         />
    //         </View>
    //     );
    // }


    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 (
            <View style={{flex: 1, marginTop: 44}}>
                <ScrollView>
                    <Text>默认选中1,1,0</Text>
                    <View>
                        {
                            skupros.map((item1, index1,) => {
                                return (
                                    <View key={index1}>
                                        <Text style={{
                                            fontSize: 17,
                                            height: 50,
                                            marginLeft: 12,
                                            marginTop: 10,
                                        }}>{skupros[index1].proName}</Text>
                                        {this.renderSKUItem(skupros, index1, skus)}
                                    </View>
                                );
                            })
                        }
                    </View>
                    <Text>{JSON.stringify(this.state.selectDict)}</Text>
                </ScrollView>
            </View>
        );
    }

    //创建里面列表项目
    renderSKUItem(skupros, index1, skus) {
        return (
            <View style={{flexDirection: 'row', flex: 1, flexWrap: 'wrap'}}>
                {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 (
                        <TouchableOpacity
                            key={index}
                            onPress={()=> {
                                this.onPress(isChoose,skupros[index1].proId, skupros[index1].values[index].proValueId, index1, index)
                            }}>
                            <View style={[{
                                marginLeft: 10,
                                marginRight: 10,
                                marginBottom: 15,
                                paddingHorizontal: 20,
                                paddingVertical: 7,
                                flexDirection: 'row',
                                borderRadius: 3,
                                backgroundColor: backgroundColor,
                            }, ViewStyle]}>
                                <Text style={[{
                                    color: color,
                                    fontSize: 12
                                }, TextStyle]}>{skupros[index1].values[index].proValue}</Text>
                            </View>
                        </TouchableOpacity>
                    );
                })}
            </View>
        )
    }


    renderHeader = ()=> {
        return (
            <View style={{
                paddingTop: 44,
                height: 100,
                backgroundColor: 'red',
                justifyContent: 'center',
                alignItems: 'center'
            }}>
                <Text>头部</Text>
            </View>
        )
    }


    renderItem = (item)=> {
        let rowData = item.item;
        let Index = rowData.key;
        return (  <View style={{
                backgroundColor: 'white',
                height: 100,
                justifyContent: 'space-between',
                paddingHorizontal: 10,
                flexDirection: 'row',
                alignItems: 'center'
            }}>
                <Text>{rowData.title} {Index}</Text>
                <Image style={{height: 70, width: 70}} source={{uri: rowData.image}}/>
            </View>
        )
    }
};


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: {}
});

    相关文章

      网友评论

          本文标题：RN(SKU)

          本文链接：https://www.haomeiwen.com/subject/twmvmktx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|RN(SKU)|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！