一个Weex的小小小小小小页面示例
使用Weex实现的一个页面效果：下面列出主要的代码：index.vue<template><div><!--<image :src="logo" class="logo" /><text class="greeting">The environment is ready!</text>--><common-title t
·
使用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 !
感谢所有！
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)