一个Weex的小小小小小小页面示例

最新推荐文章于 2021-07-21 17:55:02 发布

windfallsheng

最新推荐文章于 2021-07-21 17:55:02 发布

阅读量3.1k

点赞数

分类专栏：前端文章标签： Weex Vue 移动端开发

本文链接：https://blog.csdn.net/Silence1515/article/details/107988223

版权

前端专栏收录该内容

14 篇文章

订阅专栏

使用Weex实现的一个页面效果：

下面列出主要的代码：

index.vue

<template>
    <div>
        <!--<image :src="logo" class="logo" />
        <text class="greeting">The environment is ready!</text>-->
        <common-title title="积分商城"></common-title>
        <points-mall-home></points-mall-home>
    </div>
</template>

<script>
    import CommonTitle from '@/components/CommonTitle'
    import PointsMallHome from '@/views/pointsMall/PointsMallHome'

    export default {
        name: 'App',
        components: {
            PointsMallHome,
            CommonTitle
        },
        data() {
            return {
            }
        },
        created() {
            // console.log(this);
        }
    }
</script>

<style scoped>
    .wrapper {
        justify-content: center;
        align-items: center;
    }

    .logo {
        width: 424px;
        height: 200px;
    }

    .greeting {
        text-align: center;
        margin-top: 70px;
        font-size: 50px;
        color: #41B883;
    }

    .message {
        margin: 30px;
        font-size: 32px;
        color: #727272;
    }
</style>

CommonTitle.vue组件：

<template>

    <div class=" height wrapper">
        <div class="height iconContainer">
<!--            <image v-show="showBackIcon" resize="stretch" class="icon" :src="back"/>-->
        </div>
        <div class="height titleContainer">
            <text class="title">{{ title }}</text>
        </div>

        <!-- <svg class="icon" >
             <path d="M683.2 958.4c-6.4 0-12.8-1.6-17.6-6.4l-414.4-416c-6.4-6.4-9.6-16-9.6-24s3.2-17.6 9.6-24l414.4-416c9.6-9.6 24-9.6 33.6 0 9.6 9.6 9.6 24 0 33.6L294.4 512l406.4 406.4c9.6 9.6 9.6 24 0 33.6-6.4 3.2-12.8 6.4-17.6 6.4z"
                   fill="#3E3A39" p-id="1985"></path>
         </svg>

         <svg style="width:120px; height:120px;" viewBox="0 0 120 120">
             <path fill="#f1c40f"  d="M29.2,31.2V10h61.5L69.6,31.2l21.2,21.2H33.1V110h-3.8V31.2z M33.1,13.8v34.6h48.1L63.8,31.2l17.3-17.3H33.1z" />
         </svg>-->
        <div class=" height iconContainer">
<!--            <image v-show="showForwardIcon" resize="stretch" class="icon" :src="back"/>-->
        </div>

    </div>

</template>

<script>
    import iconBackLift from '@/assets/image/icon-back-left.png'
    import back from '@/assets/image/icon-activity.png'

    const modal = weex.requireModule('modal') || {};
    export default {
        props: {
            title: {
                type: String,
                default: ''
            },
            showBackIcon: {
                type: Boolean,
                default: false
            },
            showForwardIcon: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                // iconBack: iconBackLift,
                // forwardIcon: forwardIcon,
                // back: back
            }
        },
        methods: {

        }
    }
</script>

<style scoped>
    .height {
        height: 100px;
    }

    .wrapper {
        flex-direction: row;
        width: 750px;
        background-color: deepskyblue;
        justify-content:  space-between;
    }

    .title {
        font-size: 37px;
        color: white;
        align-content: center;
    }

    .titleContainer {
        justify-content: center;
        align-items: center;
    }

    .iconContainer {
        width: 90px;
        justify-content: center;
        align-items: center;
    }

    .icon {
        width: 60px;
        height: 60px;
    }
</style>

PointsMallHome.vue 页面暂时模拟假数据

<template>
    <recycle-list class="list" for="(item, index) in listData" switch="type" @loadmore="fetch">
        <cell-slot case="banner">
            <banner :img-urls="item.urls"/>
        </cell-slot>
        <cell-slot case="nevagation">
            <category-nevagation-grid :category-list="item.nevagations"/>
        </cell-slot>
        <cell-slot case="card">
            <card :card-info="item.cardInfo"/>
        </cell-slot>
        <cell-slot case="cardGridNev">
            <card-grid-nevagation :card-nev-list="item.cardNevList"/>
        </cell-slot>
        <cell-slot case="cardCombineNev">
            <card-combine-nevagation :title="item.title" :card-combine-nev-list="item.cardCombineNevList"/>
        </cell-slot>
        <cell-slot case="scrollerNev">
            <scroller-nevagation :title="item.title" :scroller-nev-info-list="item.scrollerNevInfoList"/>
        </cell-slot>
        <cell-slot case="floor">
            <floor :title="item.title" :floor-info-list="item.floorInfoList"/>
        </cell-slot>
    </recycle-list>
</template>

<script>
    import Banner from "@/views/pointsMall/components/Banner";
    import Card from "@/views/pointsMall/components/Card";
    import CategoryNevagationGrid from "@/views/pointsMall/components/CategoryNevagationGrid";
    import CardGridNevagation from "@/views/pointsMall/components/CardGridNevagation";
    import CardCombineNevagation from "@/views/pointsMall/components/CardCombineNevagation";
    import ScrollerNevagation from "@/views/pointsMall/components/ScrollerNevagation";
    import Floor from "@/views/pointsMall/components/Floor";

    const modal = weex.requireModule('modal')

    export default {
        components: {
            Floor,
            Card,
            CardGridNevagation,
            Banner,
            CategoryNevagationGrid,
            CardCombineNevagation,
            ScrollerNevagation,
        },
        data() {
            return {
                listData: listData,
                moreData: moreData
            }
        },
        methods: {
            fetch() {
                // const moreData = loadMoreListData()
                setTimeout(() => {
                    modal.toast({message: '加载完成， moreData=' + this.moreData, duration: 1});
                    const moreData = loadMoreListData();
                    this.listData.push(...moreData)
                    // this.listData.addAll(this.moreData)
                }, 3000)
            }
        }
    }

    function loadMoreListData() {
        modal.toast({message: '正在加载更多数据...', duration: 1});
        return this.moreData;
    }

    const moreData = [{
        type: 'floor',
        title: '爱家生活 + +',
        floorInfoList: [
            {
                img: 'https://gw.alicdn.com/tfscom/i3/48292642/TB29OtIakz_F1JjSZFkXXcCaXXa_!!48292642.jpg_250x250q90s200.jpg',
                desc: '森林果园丰水梨约5斤装',
                points: '260000'
            }, {
                img: 'https://gw.alicdn.com/imgextra/i4/706778912/TB2hvwSXBvBIuJjy1zeXXbGBpXa_!!706778912-0-beehive-scenes.jpg_250x250q90s200.jpg',
                desc: '古井贡洒年份原浆45度5000ml献礼瓶装',
                points: '26667'
            }, {
                img: 'https://gw.alicdn.com/imgextra/i3/706778912/TB2wX.fcxz9F1JjSZFsXXaCGVXa_!!706778912-0-beehive-scenes.jpg_250x250q90s200.jpg',
                desc: '启海缘软糯香生态米 新米包邮',
                points: '20667'
            }, {
                img: 'https://gw.alicdn.com/imgextra/i3/3044653839/TB2a_nAXgsSMeJjSspdXXXZ4pXa_!!3044653839-0-daren.jpg_250x250q90s200.jpg',
                desc: '渔湾绿之禾软糯香生态米2.5kg 5kg 10kg',
                points: '32667'
            }, {
                img: 'https://gw.alicdn.com/imgextra/i1/3044653839/TB2qrPCXiERMeJjSspiXXbZLFXa_!!3044653839-0-daren.jpg_250x250q90s200.jpg',
                desc: '味滋源每日坚果30袋 混合坚果礼盒 包邮',
                points: '79334'
            }
        ]
    }]

    const listData = [
        {
            type: 'banner',
            urls:
                ['https://img.alicdn.com/imgextra/i4/184/TB2LPjVhMLD8KJjSszeXXaGRpXa_!!184-0-luban.jpg_q50.jpg',
                    'https://aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg',
                    'https://aecpm.alicdn.com/simba/img/TB14ab1KpXXXXclXFXXSutbFXXX.jpg_q50.jpg',
                    'https://img.alicdn.com/imgextra/i4/61/TB24IbTh3fH8KJjy1zcXXcTzpXa_!!61-0-yamato.jpg_q50.jpg',
                    'https://gw.alicdn.com/imgextra/i3/161/TB2syUXcJLO8KJjSZPcXXaV0FXa_!!161-0-lubanu.jpg_q50.jpg'
                ]
        }, {
            type: 'nevagation',
            nevagations: [
                {
                    title: '爱享美食',
                    icon: 'https://gw.alicdn.com/tfs/TB1wKS.h8fH8KJjy1XbXXbLdXXa-140-140.png_150x10000.jpg'
                },
                {
                    title: '爱家生活',
                    icon: 'https://gw.alicdn.com/tfs/TB1oM1qaMvD8KJjy0FlXXagBFXa-140-140.png_150x10000.jpg'
                },
                {
                    title: '潮流智能',
                    icon: 'https://gw.alicdn.com/tfs/TB1Oiz0b22H8KJjy0FcXXaDlFXa-140-140.png_150x10000.jpg'
                },
                {
                    title: '服务消费',
                    icon: 'https://gw.alicdn.com/tfs/TB1LhJzQFXXXXabXXXXXXXXXXXX-140-140.png_150x10000.jpg'
                },
                {
                    title: '美丽佳人',
                    icon: 'https://img.alicdn.com/tfs/TB1fRVASpXXXXXdXXXXXXXXXXXX-140-140.png'
                },
                {
                    title: '车品户外',
                    icon: 'https://img.alicdn.com/tfs/TB1_TkdPVXXXXcJXXXXXXXXXXXX-140-140.png'
                },
                {
                    title: '特色扶贫',
                    icon: 'https://img.alicdn.com/tps/TB1goZhPXXXXXXfXpXXXXXXXXXX-118-118.png_170x120Q50s50.jpg'
                },
                {
                    title: '进口尖货',
                    icon: 'https://img.alicdn.com/tps/TB1zUTQPXXXXXaZaXXXXXXXXXXX-118-118.png_170x120Q50s50.jpg'
                }
            ]
        }, {
            type: 'card',
            cardInfo:
                {
                    poster: 'http://gw.alicdn.com/tps/i4/1611893164/TB2t4mtXJqUQKJjSZFIXXcOkFXa_!!0-juitemmedia.jpg_320x320q80s150.jpg',
                    title: '澳洲牛排10份装送刀叉酱料黄油',
                    subtitle1: '送平底锅前3000仅78',
                    subtitle2: '私厨经典 镇店套餐',
                    got: 173,
                    progress: 35,
                    price: {real: 108, sale: 240.00}
                }
        }, {
            type: 'cardGridNev',
            cardNevList: [
                {
                    bgImg: 'https://gw.alicdn.com/imgextra/i2/1904229646/TB2dRg4dgoQMeJjy0FpXXcTxpXa_!!1904229646-2-daren.png_250x250.jpg',
                    title: '3万积分以下',
                    commodityImg: 'https://img.alicdn.com/tfs/TB1sWLoRVXXXXbdXXXXXXXXXXXX-140-140.png'
                }, {
                    bgImg: 'http://gw.alicdn.com/tps/i2/2838892713/TB2ma39aqmgSKJjSsphXXcy1VXa_!!0-juitemmedia.jpg_320x320q80s150.jpg',
                    title: '3-6万积分',
                    commodityImg: 'https://img.alicdn.com/tfs/TB1_TkdPVXXXXcJXXXXXXXXXXXX-140-140.png'
                }, {
                    bgImg: 'http://gw.alicdn.com/tps/i3/902257410/TB2pzypfU3IL1JjSZFMXXajrFXa_!!0-juitemmedia.jpg_320x320q80s150.jpg',
                    title: '6-10万积分',
                    commodityImg: 'https://img.alicdn.com/tfs/TB1fRVASpXXXXXdXXXXXXXXXXXX-140-140.png'
                }, {
                    bgImg: 'https://gw.alicdn.com/tps/i4/0/TB2Mx3Jg4TI8KJjSspiXXbM4FXa_!!0-juitemmedia.jpg_320x320q80s150.jpg',
                    title: '10万积分以上',
                    commodityImg: 'https://img.alicdn.com/tfs/TB1sWLoRVXXXXbdXXXXXXXXXXXX-140-140.png'
                }
            ]
        }, {
            type: 'cardCombineNev',
            title: '行业精选',
            cardCombineNevList: [
                {
                    bgImg: 'https://gw.alicdn.com/imgextra/i2/1904229646/TB2dRg4dgoQMeJjy0FpXXcTxpXa_!!1904229646-2-daren.png_250x250.jpg',
                    title: '九月积分-家居鲸选',
                    subtitle: '金秋九月兑换',
                    commodityImg: 'https://img.alicdn.com/tfs/TB1sWLoRVXXXXbdXXXXXXXXXXXX-140-140.png'
                }, {
                    bgImg: 'http://gw.alicdn.com/tps/i2/2838892713/TB2ma39aqmgSKJjSsphXXcy1VXa_!!0-juitemmedia.jpg_320x320q80s150.jpg',
                    title: '秋冬新风尚',
                    subtitle: '积分兑换',
                    commodityImg: 'https://img.alicdn.com/tfs/TB1_TkdPVXXXXcJXXXXXXXXXXXX-140-140.png'
                }, {
                    bgImg: 'http://gw.alicdn.com/tps/i3/902257410/TB2pzypfU3IL1JjSZFMXXajrFXa_!!0-juitemmedia.jpg_320x320q80s150.jpg',
                    title: '金秋品牌清仓购',
                    subtitle: '积分兑全场',
                    commodityImg: 'https://img.alicdn.com/tfs/TB1fRVASpXXXXXdXXXXXXXXXXXX-140-140.png'
                }, {
                    bgImg: 'https://gw.alicdn.com/tps/i4/0/TB2Mx3Jg4TI8KJjSspiXXbM4FXa_!!0-juitemmedia.jpg_320x320q80s150.jpg',
                    title: '美的大牌来袭',
                    subtitle: '积分兑换带回家',
                    commodityImg: 'https://img.alicdn.com/tfs/TB1sWLoRVXXXXbdXXXXXXXXXXXX-140-140.png'
                }
            ]
        }, {
            type: 'scrollerNev',
            title: '大牌优先',
            scrollerNevInfoList: [
                {
                    img: 'https://gw.alicdn.com/tfscom/i3/48292642/TB29OtIakz_F1JjSZFkXXcCaXXa_!!48292642.jpg_250x250q90s200.jpg',
                    desc: '九月上新 5元包邮'
                }, {
                    img: 'https://gw.alicdn.com/tfscom/i3/462856946/TB2VzQswB4lpuFjy1zjXXcAKpXa_!!462856946.jpg_250x250q90s200.jpg',
                    desc: '嗨购全球'
                }, {
                    img: 'https://gw.alicdn.com/imgextra/i3/706778912/TB2wX.fcxz9F1JjSZFsXXaCGVXa_!!706778912-0-beehive-scenes.jpg_250x250q90s200.jpg',
                    desc: '金秋家电特惠'
                }, {
                    img: 'https://gw.alicdn.com/imgextra/i3/3044653839/TB2a_nAXgsSMeJjSspdXXXZ4pXa_!!3044653839-0-daren.jpg_250x250q90s200.jpg',
                    desc: '九月积分好礼季'
                }, {
                    img: 'https://gw.alicdn.com/imgextra/i1/3044653839/TB2qrPCXiERMeJjSspiXXbZLFXa_!!3044653839-0-daren.jpg_250x250q90s200.jpg',
                    desc: '九月嗨购'
                }, {
                    img: 'https://gw.alicdn.com/imgextra/i1/3044653839/TB2ySjuXgsSMeJjSspeXXa77VXa_!!3044653839-0-beehive-scenes.jpg_250x250q90s200.jpg',
                    desc: '金秋鲸选'
                }, {
                    img: 'https://gw.alicdn.com/imgextra/i4/706778912/TB2hvwSXBvBIuJjy1zeXXbGBpXa_!!706778912-0-beehive-scenes.jpg_250x250q90s200.jpg',
                    desc: '家居鲸选'
                }
            ]
        }, {
            type: 'floor',
            title: '爱享美食',
            floorInfoList: [
                {
                    img: 'https://gw.alicdn.com/tfscom/i3/48292642/TB29OtIakz_F1JjSZFkXXcCaXXa_!!48292642.jpg_250x250q90s200.jpg',
                    desc: '森林果园丰水梨约5斤装',
                    points: '260000'
                }, {
                    img: 'https://gw.alicdn.com/imgextra/i4/706778912/TB2hvwSXBvBIuJjy1zeXXbGBpXa_!!706778912-0-beehive-scenes.jpg_250x250q90s200.jpg',
                    desc: '古井贡洒年份原浆45度5000ml献礼瓶装',
                    points: '26667'
                }, {
                    img: 'https://gw.alicdn.com/imgextra/i3/706778912/TB2wX.fcxz9F1JjSZFsXXaCGVXa_!!706778912-0-beehive-scenes.jpg_250x250q90s200.jpg',
                    desc: '启海缘软糯香生态米 新米包邮',
                    points: '20667'
                }, {
                    img: 'https://gw.alicdn.com/imgextra/i3/3044653839/TB2a_nAXgsSMeJjSspdXXXZ4pXa_!!3044653839-0-daren.jpg_250x250q90s200.jpg',
                    desc: '渔湾绿之禾软糯香生态米2.5kg 5kg 10kg',
                    points: '32667'
                }, {
                    img: 'https://gw.alicdn.com/imgextra/i1/3044653839/TB2qrPCXiERMeJjSspiXXbZLFXa_!!3044653839-0-daren.jpg_250x250q90s200.jpg',
                    desc: '味滋源每日坚果30袋 混合坚果礼盒 包邮',
                    points: '79334'
                }, {
                    img: 'https://gw.alicdn.com/imgextra/i1/3044653839/TB2ySjuXgsSMeJjSspeXXa77VXa_!!3044653839-0-beehive-scenes.jpg_250x250q90s200.jpg',
                    desc: '胡姬花古法小榨花生油一级压榨食用油900ml*2桶',
                    points: '52667'
                }
            ]
        }, {
            type: 'floor',
            title: '爱家生活',
            floorInfoList: [
                {
                    img: 'https://gw.alicdn.com/imgextra/i4/706778912/TB2hvwSXBvBIuJjy1zeXXbGBpXa_!!706778912-0-beehive-scenes.jpg_250x250q90s200.jpg',
                    desc: '古井贡洒年份原浆45度5000ml献礼瓶装',
                    points: '26667'
                },
                {
                    img: 'https://gw.alicdn.com/imgextra/i1/3044653839/TB2qrPCXiERMeJjSspiXXbZLFXa_!!3044653839-0-daren.jpg_250x250q90s200.jpg',
                    desc: '味滋源每日坚果30袋 混合坚果礼盒 包邮',
                    points: '79334'
                }, {
                    img: 'https://gw.alicdn.com/imgextra/i3/3044653839/TB2a_nAXgsSMeJjSspdXXXZ4pXa_!!3044653839-0-daren.jpg_250x250q90s200.jpg',
                    desc: '渔湾绿之禾软糯香生态米2.5kg 5kg 10kg',
                    points: '32667'
                },
                {
                    img: 'https://gw.alicdn.com/imgextra/i3/706778912/TB2wX.fcxz9F1JjSZFsXXaCGVXa_!!706778912-0-beehive-scenes.jpg_250x250q90s200.jpg',
                    desc: '启海缘软糯香生态米 新米包邮',
                    points: '20667'
                }, {
                    img: 'https://gw.alicdn.com/imgextra/i1/3044653839/TB2qrPCXiERMeJjSspiXXbZLFXa_!!3044653839-0-daren.jpg_250x250q90s200.jpg',
                    desc: '味滋源每日坚果30袋 混合坚果礼盒 包邮',
                    points: '79334'
                }
            ]
        }
    ]


</script>

<style scoped>
    .list {
        width: 750px;
        background-color: #F2F2F2;
    }
</style>

页面上相关组件内容：

Banner.vue组件

<template recyclable>

    <div style="justify-content:center">
        <slider class="slider size" auto-play="true">
            <div v-for="(item, index) in imageList" :key="index">
                <image class="card" resize="cover" :src="item.imagePath"></image>
            </div>
            <indicator class="indicator"></indicator>
        </slider>
    </div>

</template>

<script>
    const stream = weex.requireModule('stream');
    const modal = weex.requireModule('modal');
    import api from '@/api/base'
    export default {
        props: {
            imgUrls: {
                type: Array,
                default: []
            },
        },
        data() {
            return {
                posters: [
                    'https://gw.alicdn.com/tfs/TB1TKvQk79WBuNjSspeXXaz5VXa-900-1312.jpg',
                    'https://gw.alicdn.com/tfs/TB1nDsrkYSYBuNjSspfXXcZCpXa-1080-1575.jpg',
                    'https://gw.alicdn.com/tfs/TB1MqHJkVuWBuNjSszbXXcS7FXa-1080-1574.jpg',
                    'https://gw.alicdn.com/tfs/TB1u1gjkY1YBuNjSszhXXcUsFXa-1080-1518.jpg'
                ],
                imageList: [],
                info: 'test',
            }
        },
        created() {
            let _this = this
            api.get('banner/json', null, function (data) {
                JSON.parse(data).data.forEach(item => {
                    _this.imageList.push(item)
                })
            }, null)
        }

    }
</script>

<style scoped>
    .size {
        width: 750px;
        height: 350px;
    }

    .card {
        width: 700px;
        height: 320px;
        border-radius: 15px;
        margin-bottom: 15px;
        margin-top: 15px;
        margin-left: 25px;
        margin-right: 25px;
        background-color: #FFFFFF;
    }

    .slider {
        position: relative;
    }

    .indicator {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 10px;
        height: 60px;
        /*background-color: rgba(0, 0, 0, 0.3);*/
        itemSize: 10px;
        itemColor: #DDDDDD;
        itemSelectedColor: rgb(0, 180, 255);
    }

</style>

Card.vue组件：

<template recyclable>
    <div class="card">
        <div style="height:60px;padding-left:30px">
            <image class="title" src="//img.alicdn.com/tfs/TB1moeURFXXXXasXXXXXXXXXXXX-390-105.png"></image>
        </div>
        <div class="row" style="padding-bottom:18px">
            <div class="card-side">
                <image class="card-poster" :src="cardInfo.poster"></image>
            </div>
            <div class="card-message">
                <text class="card-title">{{cardInfo.title}}</text>
                <div class="card-line row">
                    <image class="card-icon"
                           src="//ossgw.alicdn.com/img/upload/0a4946e164acd1f81e97ddbc048afcc5/Group13-69-69.png@22w_22h_80Q.png"></image>
                    <text class="card-subtitle">{{cardInfo.subtitle1}}</text>
                </div>
                <div class="card-line row">
                    <image class="card-icon"
                           src="//ossgw.alicdn.com/img/upload/0a4946e164acd1f81e97ddbc048afcc5/Group13-69-69.png@22w_22h_80Q.png"></image>
                    <text class="card-subtitle">{{cardInfo.subtitle2}}</text>
                </div>
                <div class="card-progress row">
                    <div class="card-progress-inner" :style="{ width: cardInfo.progress * 230 / 100 }"></div>
                    <text class="card-got">已抢 {{cardInfo.got}} 件</text>
                    <text class="card-remain">{{cardInfo.progress}} %</text>
                </div>
                <div class="card-info row">
                    <text class="card-price">¥ {{cardInfo.price.real}}</text>
                    <text class="card-sale-price">¥ {{cardInfo.price.sale}}</text>
                    <div class="card-btn">
                        <text class="card-btn-text">马上抢</text>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            itemWidth: {
                type: Number,
                default: 350
            },
            cardInfo: {
                type: Object,
                default: {}
            }
        }
    }
</script>

<style scoped>
    .row {
        flex-direction: row;
    }

    .card {
        width: 710px;
        margin: 20px;
        background-color: #FFFFFF;
        border-radius: 15px;
    }

    .title {
        width: 222px;
        height: 60px;
    }

    .card-side {
        padding: 20px;
    }

    .card-poster {
        width: 230px;
        height: 230px;
        margin-right: 20px;
    }

    .card-title {
        font-size: 26px;
        color: #666666;
        margin-top: 10px;
        padding-bottom: 6px;
    }

    .card-line {
        align-items: center;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .card-icon {
        width: 36px;
        height: 36px;
        margin-right: 8px;
    }

    .card-subtitle {
        font-size: 28px;
        color: #07152a;
    }

    .card-progress {
        flex-direction: row;
        align-items: center;
        width: 230px;
        height: 30px;
        background-color: #FEC1C1;
        border-radius: 20px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .card-progress-inner {
        position: absolute;
        height: 30px;
        left: 0;
        border-radius: 20px;
        background-color: #ff3c32;
    }

    .card-got {
        position: absolute;
        left: 8px;
        line-height: 30px;
        color: #FFFFFF;
        font-size: 22px
    }

    .card-remain {
        position: absolute;
        right: 8px;
        line-height: 30px;
        color: #FFFFFF;
        font-size: 22px;
    }

    .card-info {
        width: 400px;
        flex-direction: row;
        align-items: flex-end;
    }

    .card-price {
        font-size: 52px;
        color: #ff3c32;
        margin-bottom: -10px;
        margin-top: 10px;
        margin-right: 8px;
    }

    .card-sale-price {
        font-size: 28px;
        color: #999999;
        text-decoration: line-through;
    }

    .card-btn {
        position: absolute;
        right: 0;
        bottom: 0;
        background-color: #ff5d62;
        border-radius: 8px;
        width: 125px;
        height: 52px;
        justify-content: center;
    }

    .card-btn-text {
        color: #FFFFFF;
        font-size: 32px;
        text-align: center;
    }
</style>

AppList.vue组件：

<template recyclable>
    <div class="app-cell">
        <div class="app-box"  v-for="(app, a) in apps" :key="a">
            <image class="app-icon" :src="app.icon"></image>
            <text class="app-title">{{app.title}}</text>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['apps']
    }
</script>

<style scoped>
    .app-cell {
        width: 750px;
        flex-direction: row;
        justify-content: space-around;
        background-color: #FFF;
    }
    .app-box {
        width: 180px;
        padding: 15px;
        align-items: center;
    }
    .app-title {
        font-size: 30px;
        text-align: center;
        padding-top: 15px;
        color: #999999;
    }
    .app-icon {
        width: 140px;
        height: 140px;
    }

</style>

CardCombineItem.vue组件：

<template recyclable>
    <div class="width card" :style="radiusStyle">
        <text class="title">{{ cardInfo.title}}</text>
        <text class="subtitle">{{ cardInfo.subtitle}}</text>
        <div class="width wrapper">
            <image class="img" :src="cardInfo.commodityImg"></image>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            index: {
                type: Number,
                default: 0
            },
            cardInfo: {
                type: Object,
                default: {}
            }
        },
        data() {
            return {
                radiusStyleTopLeft: {'border-top-left-radius': '15px'},
                radiusStyleTopRight: {'border-top-right-radius': '15px'},
                radiusStyleBottomLeft: {'border-bottom-left-radius': '15px'},
                radiusStyleBottomRight: {'border-bottom-right-radius': '15px'},
                // radiusStyleTopLeft: {'color': 'red'},
                // // radiusStyleTopRight: {'background-color': '#DDDDDD'},
                // // radiusStyleBottomLeft: {'background-color': 'greenyellow'},
                // // radiusStyleBottomRight: {'background-color': 'darksalmon'},
            }
        },
        computed: {
            radiusStyle() {
                // console.log("index=", index)
                if (this.index === 0) {
                    return this.radiusStyleTopLeft;
                } else if (this.index === 1) {
                    return this.radiusStyleTopRight;
                } else if (this.index === 2) {
                    return this.radiusStyleBottomLeft;
                } else if (this.index === 3) {
                    return this.radiusStyleBottomRight;
                }
            }
        }
    }
</script>

<style scoped>

    .width {
        width: 325px;
    }

    .card {
        flex-direction: column;
        height: 300px;
        margin: 10px;
        background-color: lavenderblush;
    }

    .title {
        margin: 20px;
        font-size: 30px;
        color: #07152a;
    }

    .subtitle {
        margin-left: 20px;
        font-size: 25px;
        color: #999999;
    }

    .wrapper {
        flex-direction: row-reverse;
    }

    .img {
        width: 150px;
        height: 150px;
        margin-top: 15px;
        margin-right: 20px;
    }

</style>

CardCombineNevagation.vue组件：

<template recyclable>
    <div class="wrapper">
        <text class="title">{{ title }}</text>
        <div class="cell">
            <div v-for="(item, index) in cardCombineNevList" :key="index">
                <card-combine-item :index="index" :card-info="item"></card-combine-item>
            </div>
        </div>
    </div>
</template>

<script>
    import CardCombineItem from '@/views/pointsMall/components/CardCombineItem'

    export default {
        components: {CardCombineItem},
        props: {
            column: {
                type: Number,
                default: 2
            },
            title: {
                type: String,
                default: ''
            },
            cardCombineNevList: {
                type: Array,
                default: []
            }
        },
        data() {
            return {
                list: this.cardCombineNevList,
            }
        },
        created() {
            this.list = this.cardCombineNevList
        }
    }
</script>

<style scoped>
    .wrapper {
        width: 710px;
        margin-bottom: 10px;
        margin-top: 10px;
        margin-left: 20px;
        margin-right: 20px;
        padding: 10px;
        border-radius: 15px;
        background-color: #FFF;
    }

    .cell {
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .row {
        flex-direction: row;
    }

    .title {
        font-size: 37px;
        margin-top: 10px;
        margin-left: 15px;
        margin-bottom: 10px;
    }

</style>

CardGridNevagation.vue组件：

<template recyclable>
    <div class="card">
        <div class="cell">
            <div v-for="(item, index) in cardNevList" :key="index">
                <!--<image class="app-icon" :src="app.icon"></image>
                <text class="app-title">{{app.title}}</text>-->
                <card-item :card="item"></card-item>
            </div>
        </div>
    </div>
</template>

<script>
    import CardItem from '@/views/pointsMall/components/CardItem'

    export default {
        components: {CardItem},
        props: {
            column: {
                type: Number,
                default: 2
            },
            cardNevList: {
                type: Array,
                default: []
            }
        }
    }
</script>

<style scoped>
    .card {
        width: 710px;
        margin-bottom: 10px;
        margin-top: 10px;
        margin-left: 20px;
        margin-right: 20px;
        padding: 10px;
        border-radius: 15px;
        background-color: #FFF;
    }

    .cell {
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }

</style>

CardItem.vue组件：

<template recyclable>
    <div class=" width card">
        <text class="title">{{ card.title}}</text>
        <div class="width wrapper">
            <image class="img" :src="card.commodityImg"></image>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            itemWidth: {
                type: Number,
                default: 350
            },
            card: {
                type: Object,
                default: () => {
                }
            }
        }
    }
</script>

<style scoped>

    .width {
        width: 325px;
    }

    .card {
        flex-direction: column;
        height: 170px;
        margin: 10px;
        background-color: cornsilk;
        border-radius: 15px;
    }

    .title {
        margin-top: 20px;
        margin-left: 20px;
        font-size: 30px;
        color: #07152a;
    }

    .wrapper {
        flex-direction: row-reverse;
    }

    .img {
        width: 100px;
        height: 100px;
        margin-right: 20px;
    }

</style>

CategoryNevagationGrid.vue组件：

<template recyclable>

    <div class="app-cell">
        <div v-for="(item, index) in categoryList" :key="index">
            <!--<image class="app-icon" :src="app.icon"></image>
            <text class="app-title">{{app.title}}</text>-->
            <category-nevagation-item :category-info="item"></category-nevagation-item>
        </div>
    </div>

</template>

<script>
    import CategoryNevagationItem from '@/views/pointsMall/components/CategoryNevagationItem'

    export default {
        components:{
            CategoryNevagationItem
        },
        props: {
            categoryList: {
                type: Array,
                default: []
            },
        }
    }
</script>

<style scoped>
    .app-cell {
        width: 750px;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        background-color: #0000;

    }
    .app-box {
        width: 180px;
        padding: 15px;
        align-items: center;
    }
    .app-title {
        font-size: 30px;
        text-align: center;
        padding-top: 15px;
        color: #999999;
    }
    .app-icon {
        width: 100px;
        height: 100px;
    }

</style>

CategoryNevagationItem.vue组件：

<template recyclable>

    <div class="box" @click="goToPage(categoryInfo.title)">
        <image class="icon" :src="categoryInfo.icon"></image>
        <text class="title">{{categoryInfo.title}}</text>
    </div>

</template>

<script>
    const modal = weex.requireModule('modal') || {};

    export default {
        props: {
            categoryInfo: {
                type: Object,
                default: {}
            },
        },
        methods: {
            goToPage(title) {
                modal.toast({
                    message: title,
                    duration: 3
                });
            }
        }
    }
</script>

<style scoped>

    .box {
        width: 180px;
        padding: 15px;
        align-items: center;
    }

    .title {
        font-size: 30px;
        text-align: center;
        padding-top: 15px;
        color: #999999;
    }

    .icon {
        width: 100px;
        height: 100px;
    }

</style>

Floor.vue组件：

<template recyclable>
    <div class="wrapper">
        <div class="title-cell">
            <text class="floor-title">{{ title }}</text>
        </div>
        <div class="row">
            <div v-for="(item, index) in floorInfoList" :key="index">
                <foor-item :floor-info="item"></foor-item>
            </div>
        </div>
    </div>
</template>

<script>

    import FoorItem from '@/views/pointsMall/components/FoorItem'

    export default {
        components: {FoorItem},
        props: {
            column: {
                type: Number,
                default: 2
            },
            title: {
                type: String,
                default: ''
            },
            floorInfoList: {
                type: Array,
                default: []
            }
        }
    }
</script>

<style scoped>

    .wrapper {
        margin-left: 10px;
        margin-right: 10px;
    }

    .title-cell {
        flex-direction: row;
        justify-content: center;
    }

    .floor-title {
        font-size: 37px;
        margin-top: 10px;
        align-self: center;
        margin-bottom: 10px;
        font-weight: bold;
    }

    .row {
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }

</style>

FoorItem.vue组件：

<template recyclable>

    <div class="box card" @click="goToPage(floorInfo.desc)">
        <image class="img" resize="cover" :src="floorInfo.img"></image>
        <div style="height: 90px">
            <text class="textDesc">{{ floorInfo.desc }}</text>
        </div>
        <text class="textPoints">{{floorInfo.points + '积分'}}</text>
    </div>

</template>

<script>
    const modal = weex.requireModule('modal') || {};

    export default {
        props: {
            floorInfo: {
                type: Object,
                default: {}
            }
        },
        /*data() {
            return {
                pointsStr: this.floorInfo.points + '积分',
            }
        },*/
        computed: {
            pointsStr() {
                return this.floorInfo.points + '积分'
            }
        },
        methods: {
            goToPage(desc) {
                modal.toast({
                    message: desc,
                    duration: 3
                });
            }
        }
    }
</script>

<style scoped>

    .box {
        flex-direction: column;
    }

    .card {
        width: 345px;
        border-radius: 15px;
        background-color: #FFF;
        margin: 10px;
        padding-bottom: 15px;
    }

    .img {
        width: 345px;
        height: 345px;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }

    .textDesc {
        lines: 2;
        line-break: auto;
        color: #666666;
        font-size: 32px;
        margin-top: 15px;
        margin-left: 15px;
        margin-right: 15px;
        text-overflow: ellipsis;
    }

    .textPoints {
        color: #ff3c32;
        font-size: 30px;
        margin-top: 15px;
        /*margin-bottom: 15px;*/
        margin-left: 15px;
    }


</style>

ScrollerNevagation.vue组件：

<template recyclable>

    <div class="card">
        <text class="title">{{ title }}</text>
        <scroller class="scroller" show-scrollbar="false" scroll-direction="horizontal">
            <div v-for="(item, index) in scrollerNevInfoList" :key="index" @click="goToPage(item.desc)">
                <scroller-nevagation-item
                        :item-width="itemWidth" :item-margin="itemMargin"
                        :scroller-nev-info="item"></scroller-nevagation-item>
            </div>
        </scroller>
        <div>
        </div>
    </div>

</template>

<script>
    import ScrollerNevagationItem from '@/views/pointsMall/components/ScrollerNevagationItem'

    const stream = weex.requireModule('stream') || {};
    const modal = weex.requireModule('modal') || {};
    const API = 'https://mmall4.dccnet.com.cn/icbcim/getUserAuthorityInfo.jhtml?userid=A20190619071733231';
    // const API = 'https://kitsu.io/api/edge/anime?filter%5Bstatus%5D=current&sort=-userCount&page%5Blimit%5D=20';

    export default {
        components: {
            ScrollerNevagationItem
        },
        props: {
            title: {
                type: String,
                default: ''
            },
            scrollerNevInfoList: {
                type: Array,
                default: []
            }
        },
        data() {
            return {
                itemWidth: 230,
                itemMargin: 10,
                // scrollerWidth: this.scrollerNevInfoList.length * (this.itemMargin * 2 + this.itemWidth),
                // scrollerStyle: {
                //     'width': this.scrollerWidth + 'px',
                //     'height': (this.itemWidth + this.itemMargin) + 'px'
                // },
                // scrollerStyle: {'width': '690px', 'height': '230px'}
            }
        },
        created() {
            /* stream.fetch({
                 method: 'GET',
                 url: API,
                 type: 'json'
             }, function (ret) {
                 console.log("ret.status=" + ret.status);
                 if (!ret.ok) {
                     console.log("ret.ok=" + ret.ok);
                     modal.toast({
                         message: 'Network Error!',
                         duration: 3
                     });
                 } else {
                     console.log(ret.ok);
                 }
             });*/
        },
        methods: {
            handleItem(msg) {
                console.log("ret.ok=" + msg);
                this.todaySailesCount += 88;
            }
        }
    }
</script>

<style scoped>

    .card {
        width: 710px;
        margin: 20px;
        background-color: #FFFFFF;
        border-radius: 15px;
    }

    .title {
        font-size: 37px;
        margin-top: 20px;
        margin-left: 25px;
        margin-bottom: 20px;
    }

    .scroller {
        width: 690px;
        height: 230px;
        margin-left: 10px;
        margin-right: 10px;
        flex-direction: row;
        margin-bottom: 20px;
    }

</style>

ScrollerNevagationItem.vue组件：

<template recyclable>

    <div style="position: relative">
        <image class="radius image" :style="imgStyle" resize="cover" :src="scrollerNevInfo.img"></image>
        <text class="textDesc" :style="textStyle">{{ scrollerNevInfo.desc }}</text>
    </div>

</template>

<script>

    export default {
        props: {
            scrollerNevInfo: {
                type: Object,
                default: {}
            },
            itemWidth: {
                type: Number,
                default: 230
            },
            itemMargin: {
                type: Number,
                default: 10
            }
        },
        data() {
            return {
                // imgStyle: {
                //     'width': this.itemWidth + 'px',
                //     'height': this.itemWidth + 'px',
                //     'margin-right': this.itemMargin + 'px',
                //     'margin-left': this.itemMargin + 'px'
                // },
                // textStyle: {
                //     'margin-top': (this.itemWidth - 50) + 'px',
                //     'position': 'absolute'
                // },
                imgStyle: {
                    'width': '230px',
                    'height': '230px',
                    'margin-right': '10px',
                    'margin-left': '10px'
                },
                textStyle: {
                    'margin-top': '180px',
                    'position': 'absolute'
                }
            }
        },
        methods: {
            goToPage(desc) {
                modal.toast({
                    message: desc,
                    duration: 3
                });
            }
        },
        computed: {
            // descItem(index) {
            //     // console.log("NevagationInfoList=", this.NevagationInfoList)
            //     /*  let descItemListElement = this.DescList[this.tag];
            //       console.log("descItemListElement=", descItemListElement)*/
            //     return this.nevagationInfoList[index];
            // }
        }
    }
</script>

<style scoped>

    .radius {
        border-radius: 15px;
    }
    .image {
        width: 230px;
        height: 230px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .textDesc {
        color: #FFF;
        font-size: 25px;
        margin-left: 15px;
    }

</style>

由于作者水平有限，语言描述及代码实现中难免有纰漏，望各位看官多提宝贵意见！

Hello , World !

感谢所有！