|
|
@@ -1,6 +1,41 @@
|
|
|
<template>
|
|
|
<mobile-frame :frameStyle="frameStyle" @toPath="toPath">
|
|
|
- 微店
|
|
|
+ <view class="main">
|
|
|
+ <view class="one">
|
|
|
+ <scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
|
|
|
+ <view class="list-scroll-view">
|
|
|
+ <view class="list" v-for="(item,index) in list" :key="index">
|
|
|
+ <view class="list_1">
|
|
|
+ <view class="l">
|
|
|
+ <image class="image" :src="item.url" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="c">
|
|
|
+ <view class="name">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ <view class="other">
|
|
|
+ <text>宝贝数<text>{{item.market_num}}</text></text>
|
|
|
+ <text>关注数<text>{{item.follow_num}}</text></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="r" @tap="toFolllow(item)">
|
|
|
+ <text class="iconfont icon-yduishoucangshixin-copy" v-if="item.is_follow==true"></text>
|
|
|
+ <text class="iconfont icon-yduishoucangkongxin-copy" v-else></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list_2">
|
|
|
+ <view class="market" v-for="(tag,indexs) in item.market" :key="indexs">
|
|
|
+ <image class="image" :src="tag.url" mode=""></image>
|
|
|
+ <view class="money">
|
|
|
+ ¥{{tag.money}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</mobile-frame>
|
|
|
</template>
|
|
|
|
|
|
@@ -11,19 +46,165 @@
|
|
|
frameStyle: {
|
|
|
useBar: true
|
|
|
},
|
|
|
+ list: [ //
|
|
|
+ {
|
|
|
+ url: require('@/static/test.png'),
|
|
|
+ name: '官方自营店',
|
|
|
+ market_num: 12,
|
|
|
+ follow_num: 12,
|
|
|
+ is_follow: true,
|
|
|
+ market: [ //
|
|
|
+ {
|
|
|
+ url: require('@/static/test.png'),
|
|
|
+ money: 10
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: require('@/static/test.png'),
|
|
|
+ money: 10
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: require('@/static/test.png'),
|
|
|
+ money: 10
|
|
|
+ }
|
|
|
+
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: require('@/static/test.png'),
|
|
|
+ name: '官方自营店',
|
|
|
+ market_num: 12,
|
|
|
+ follow_num: 12,
|
|
|
+ is_follow: false,
|
|
|
+ market: [ //
|
|
|
+ {
|
|
|
+ url: require('@/static/test.png'),
|
|
|
+ money: 10
|
|
|
+ }
|
|
|
+
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
};
|
|
|
},
|
|
|
onShow: function() {},
|
|
|
methods: {
|
|
|
+ // 分页
|
|
|
+ toPage() {
|
|
|
+
|
|
|
+ },
|
|
|
+ // 关注
|
|
|
+ toFolllow(e) {
|
|
|
+ console.log(e);
|
|
|
+ },
|
|
|
toPath(e) {
|
|
|
if (e && e.route) uni.redirectTo({
|
|
|
url: `/${e.route}`
|
|
|
})
|
|
|
- }
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
+ .main {
|
|
|
+ .one {
|
|
|
+ .list {
|
|
|
+ margin: 2vw 2vw 0 2vw;
|
|
|
+ padding: 2vw;
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+
|
|
|
+ .list_1 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ margin: 0 0 1vw 0;
|
|
|
+
|
|
|
+ .l {
|
|
|
+ width: 20vw;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 20vw;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .c {
|
|
|
+ padding: 0 0 0 2vw;
|
|
|
+ width: 60vw;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 0 0 1vw 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .other {
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ text {
|
|
|
+ padding: 0 2vw 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .r {
|
|
|
+ width: 10vw;
|
|
|
+ text-align: right;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_2 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .market {
|
|
|
+ position: relative;
|
|
|
+ margin: 0 2vw 2vw 0;
|
|
|
+ width: 29vw;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 20vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ .money {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ font-size: 10px;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #0000005f;
|
|
|
+ color: #fff;
|
|
|
+ padding: 0.2vw 0;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .market:nth-child(3n) {
|
|
|
+ margin: 0 0 2vw 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-view {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+
|
|
|
+ .list-scroll-view {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
