增加商品首页和详情页面
This commit is contained in:
parent
4e216409ae
commit
e1cb6ce247
@ -27,7 +27,8 @@ export default class extends wepy.app {
|
|||||||
pages: [
|
pages: [
|
||||||
'pages/index',
|
'pages/index',
|
||||||
'pages/product',
|
'pages/product',
|
||||||
'pages/buyvip'
|
'pages/buyvip',
|
||||||
|
'pages/detail'
|
||||||
],
|
],
|
||||||
window: {
|
window: {
|
||||||
backgroundTextStyle: 'light',
|
backgroundTextStyle: 'light',
|
||||||
|
107
src/components/zan-loadmore.wpy
Normal file
107
src/components/zan-loadmore.wpy
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
<style lang="less">
|
||||||
|
.zan-loadmore {
|
||||||
|
position: relative;
|
||||||
|
width: 65%;
|
||||||
|
margin: 21px auto;
|
||||||
|
line-height: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zan-loading {
|
||||||
|
width:20px;
|
||||||
|
height:20px;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
animation: weuiLoading 1s steps(12, end) infinite;
|
||||||
|
background: transparent url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iciIgd2lkdGg9JzEyMHB4JyBoZWlnaHQ9JzEyMHB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjRTlFOUU5JwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzk4OTY5NycKICAgICAgICAgIHRyYW5zZm9ybT0ncm90YXRlKDMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4KICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyM5Qjk5OUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjQTNBMUEyJwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoOTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNBQkE5QUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxMjAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCMkIyQjInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCQUI4QjknCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxODAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDMkMwQzEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyMTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDQkNCQ0InCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEMkQyRDInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEQURBREEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNFMkUyRTInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0Pgo8L3N2Zz4=) no-repeat;
|
||||||
|
-webkit-background-size: 100%;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zan-loadmore .zan-loading {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zan-loadmore__tips {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zan-loadmore--nodata,
|
||||||
|
.zan-loadmore--nomore {
|
||||||
|
border-top: 1rpx solid #e5e5e5;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zan-loadmore--nodata {
|
||||||
|
margin-top: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zan-loadmore--nodata .zan-loadmore__tips {
|
||||||
|
position: relative;
|
||||||
|
top: -11px;
|
||||||
|
background: #f9f9f9;
|
||||||
|
padding: 0 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zan-loadmore--nomore .zan-loadmore__tips {
|
||||||
|
position: relative;
|
||||||
|
top: -11px;
|
||||||
|
background: #f9f9f9;
|
||||||
|
padding: 0 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zan-loadmore__dot {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 10px;
|
||||||
|
margin-left: -2px;
|
||||||
|
margin-top: -2px;
|
||||||
|
content: " ";
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #E5E5E5;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<block wx:if="{{nomore}}">
|
||||||
|
<view class="zan-loadmore zan-loadmore--nomore">
|
||||||
|
<view class="zan-loadmore__tips">{{ nomore_str || '无更多数据' }}</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
|
||||||
|
<block wx:elif="{{nodata}}">
|
||||||
|
<view class="zan-loadmore zan-loadmore--nodata">
|
||||||
|
<view class="zan-loadmore__tips">{{ nodata_str || '暂无数据' }}</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
|
||||||
|
<block wx:elif="{{loading}}">
|
||||||
|
<view class="zan-loadmore">
|
||||||
|
<view class="zan-loading"></view>
|
||||||
|
<view class="zan-loadmore__tips">加载中...</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import wepy from 'wepy'
|
||||||
|
|
||||||
|
export default class zanLoadmore extends wepy.component {
|
||||||
|
props = {
|
||||||
|
loading: Boolean,
|
||||||
|
nodata: {type: Boolean, default: false},
|
||||||
|
nomore: {type: Boolean, default: false},
|
||||||
|
nodata_str: String,
|
||||||
|
nomore_str: String
|
||||||
|
}
|
||||||
|
methods = {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
104
src/pages/detail.wpy
Normal file
104
src/pages/detail.wpy
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
<style lang="less">
|
||||||
|
.top-image {
|
||||||
|
text-align:center;
|
||||||
|
width: 720rpx;
|
||||||
|
}
|
||||||
|
.top-image .item_img{
|
||||||
|
height:390rpx;
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
}
|
||||||
|
.product-info {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.product-info .info{
|
||||||
|
padding:10rpx 20rpx;
|
||||||
|
color:#666;
|
||||||
|
font-size:26rpx;
|
||||||
|
line-height:35rpx;
|
||||||
|
display:flex;
|
||||||
|
align-items:center;
|
||||||
|
}
|
||||||
|
.content-image {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view class="top-image">
|
||||||
|
<image class="item_img" src="{{item.main_img}}" mode="aspectFit"></image>
|
||||||
|
</view>
|
||||||
|
<view class="product-info">
|
||||||
|
<view class="info">
|
||||||
|
<view>品名:</view><view>{{item.name}} </view>
|
||||||
|
</view>
|
||||||
|
<view class="info">
|
||||||
|
<view>规格:</view><view>{{item.size}} </view>
|
||||||
|
</view>
|
||||||
|
<view class="info">
|
||||||
|
<view>状态:</view><view>尚未开启抢购 </view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<repeat for="{{item.images}}" item="img" >
|
||||||
|
<image class="content-image" src="{{img}}" mode="widthFix"></image>
|
||||||
|
</repeat>
|
||||||
|
</view>
|
||||||
|
<gameBottomBar :config.sync="bottomActionCfg" @bottomMainTap.user="bottomMainTap"
|
||||||
|
@bottomSecondTap.user="bottomSecondTap"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import wepy from 'wepy'
|
||||||
|
import zanLoadmore from '../components/zan-loadmore';
|
||||||
|
import gameBottomBar from '../components/game-bottom-bar';
|
||||||
|
|
||||||
|
export default class Detail extends wepy.page {
|
||||||
|
config = {
|
||||||
|
navigationBarTitleText: '商品详情'
|
||||||
|
};
|
||||||
|
components = {
|
||||||
|
zanLoadmore: zanLoadmore,
|
||||||
|
gameBottomBar: gameBottomBar
|
||||||
|
};
|
||||||
|
|
||||||
|
mixins = [];
|
||||||
|
|
||||||
|
data = {
|
||||||
|
bottomActionCfg: {
|
||||||
|
hide: false,
|
||||||
|
mainBtnIconClass: 'icon-cart',
|
||||||
|
mainBtnTitle: '购买',
|
||||||
|
secondBtnIconClass: 'icon-forbid',
|
||||||
|
secondBtnTitle: '取消'
|
||||||
|
},
|
||||||
|
item: {}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
methods = {
|
||||||
|
bottomMainTap(e) {
|
||||||
|
console.log('bottomMainTap');
|
||||||
|
wepy.showToast({
|
||||||
|
title: '活动尚未开始',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
})
|
||||||
|
},
|
||||||
|
bottomSecondTap(e) {
|
||||||
|
console.log('bottomSecondTap');
|
||||||
|
wepy.navigateBack({
|
||||||
|
})
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
events = {
|
||||||
|
};
|
||||||
|
|
||||||
|
onLoad(params) {
|
||||||
|
this.item = JSON.parse(params.item);
|
||||||
|
wepy.setNavigationBarTitle({
|
||||||
|
title: this.item.name
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
@ -1,38 +1,107 @@
|
|||||||
<style lang="less">
|
<style lang="less">
|
||||||
|
.product-list {
|
||||||
|
width: 750rpx;
|
||||||
|
background: #f7f7f7;
|
||||||
|
}
|
||||||
|
.product-list .item {
|
||||||
|
background:#fff;
|
||||||
|
padding:15rpx;
|
||||||
|
margin-bottom:15rpx;
|
||||||
|
}
|
||||||
|
.product-list .item_img {
|
||||||
|
height:390rpx;
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
}
|
||||||
|
.product-list .info{
|
||||||
|
padding:5rpx;
|
||||||
|
color:#666;
|
||||||
|
font-size:26rpx;
|
||||||
|
line-height:35rpx;
|
||||||
|
display:flex;
|
||||||
|
align-items:center;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
|
<view class="product-list">
|
||||||
|
<repeat for="{{records}}" item="item" >
|
||||||
|
<view class="item" @tap="gameTap({{item._id}})" >
|
||||||
|
<image class="item_img" src="{{item.main_img}}" mode="aspectFit"></image>
|
||||||
|
<view class="info">
|
||||||
|
<view>品名:</view><view>{{item.name}} </view>
|
||||||
|
</view>
|
||||||
|
<view class="info">
|
||||||
|
<view>规格:</view><view>{{item.size}} </view>
|
||||||
|
</view>
|
||||||
|
<view class="info">
|
||||||
|
<view>状态:</view><view>尚未开启抢购 </view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</repeat>
|
||||||
|
</view>
|
||||||
|
<zanLoadmore :loading.sync="loading" :nodata.sync="noData" :nomore.sync="noMore" nomore_str="更多活动敬请期待"></zanLoadmore>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import wepy from 'wepy'
|
import wepy from 'wepy'
|
||||||
|
import http from '../utils/http';
|
||||||
|
import zanLoadmore from '../components/zan-loadmore';
|
||||||
|
|
||||||
export default class Index extends wepy.page {
|
export default class Index extends wepy.page {
|
||||||
config = {
|
config = {
|
||||||
navigationBarTitleText: 'index'
|
navigationBarTitleText: '活动列表'
|
||||||
};
|
};
|
||||||
components = {
|
components = {
|
||||||
|
zanLoadmore: zanLoadmore
|
||||||
};
|
};
|
||||||
|
|
||||||
mixins = [];
|
mixins = [];
|
||||||
|
|
||||||
data = {
|
data = {
|
||||||
|
loading: false,
|
||||||
|
noData: false,
|
||||||
|
noMore: true,
|
||||||
|
records: []
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
methods = {
|
methods = {
|
||||||
|
gameTap(id) {
|
||||||
|
let item;
|
||||||
|
for(let record of this.records) {
|
||||||
|
if (record._id === id) {
|
||||||
|
item = record;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (item) {
|
||||||
|
let paramStr = JSON.stringify(item);
|
||||||
|
wepy.navigateTo({
|
||||||
|
url: '/pages/detail?item=' + paramStr
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
events = {
|
events = {
|
||||||
};
|
};
|
||||||
|
|
||||||
onLoad() {
|
onLoad() {
|
||||||
|
this.queryRecords();
|
||||||
|
}
|
||||||
|
async queryRecords() {
|
||||||
|
let self = this;
|
||||||
|
try {
|
||||||
|
let res = await http.post('/api/weapp/gift_list', {});
|
||||||
|
this.records = res.records;
|
||||||
|
this.$apply();
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user