init
This commit is contained in:
4
miniprogram/pages/home/home.json
Normal file
4
miniprogram/pages/home/home.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "我喜欢的鸡尾酒"
|
||||
}
|
||||
82
miniprogram/pages/home/home.scss
Normal file
82
miniprogram/pages/home/home.scss
Normal file
@@ -0,0 +1,82 @@
|
||||
/* pages/home/home.wxss */
|
||||
.operation-part{
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.btn{
|
||||
border: 1px solid red;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
margin: 0 5px;
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
}
|
||||
.star-btn{
|
||||
border: 1px solid rgb(192, 21, 21);
|
||||
color: rgb(192, 21, 21);
|
||||
}
|
||||
.question-btn{
|
||||
padding:0 10px;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
border: 1px solid rgb(21, 144, 192);
|
||||
color: rgb(21, 144, 192);
|
||||
image{
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.introduce-part {
|
||||
text-align: center;
|
||||
.title{
|
||||
font-family: 'iconfont';
|
||||
text-transform: capitalize;
|
||||
font-size: 35px;
|
||||
}
|
||||
.desc{
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.list-part{
|
||||
.lp-card{
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
.lpc-name-box{
|
||||
width:70%;
|
||||
.lpc-name{
|
||||
width: 100%;
|
||||
font-family: 'iconfont';
|
||||
text-transform: capitalize;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.lpc-tag{
|
||||
white-space: nowrap;
|
||||
width:30%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
.desc-part{
|
||||
font-size: 12px;
|
||||
}
|
||||
.search-part{
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
text-align: right;
|
||||
padding-right: 20px;
|
||||
box-sizing: border-box;
|
||||
.search-btn{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
padding: 10px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 1px 1px #a9a9a9;
|
||||
}
|
||||
}
|
||||
119
miniprogram/pages/home/home.ts
Normal file
119
miniprogram/pages/home/home.ts
Normal file
@@ -0,0 +1,119 @@
|
||||
// pages/home/home.ts
|
||||
const api = require("../../api/index")
|
||||
Page({
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
introduce:`在家制作鸡尾酒是一种生活方式`,
|
||||
list:[
|
||||
{
|
||||
name:'the last word',
|
||||
desc:'橙汁',
|
||||
tag:'遗言',
|
||||
id:1
|
||||
},
|
||||
{
|
||||
name:'june bug',
|
||||
tag:'六月虫',
|
||||
desc:'青柠汁',
|
||||
id:2
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad() {
|
||||
this.getList()
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
console.log(1111);
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
|
||||
},
|
||||
// 我喜欢的鸡尾酒
|
||||
toStarFunc() {
|
||||
wx.navigateTo({
|
||||
url: '../star/star',
|
||||
})
|
||||
},
|
||||
// 搜索配方
|
||||
toSearchFunc() {
|
||||
wx.navigateTo({
|
||||
url: '../search/search',
|
||||
})
|
||||
},
|
||||
toDetailFunc(data:any) {
|
||||
console.log(data);
|
||||
const item = data.currentTarget.dataset.item
|
||||
wx.navigateTo({
|
||||
url: '../detail/detail?name='+item.name+'&tag='+item.tag,
|
||||
})
|
||||
},
|
||||
async getList() {//获取列表
|
||||
const res = await api.getWineList({
|
||||
current:1,
|
||||
size:10
|
||||
})
|
||||
console.log(res);
|
||||
if(res.code === 200) {
|
||||
// if(res.data.materials.length>0) {
|
||||
for(let item1 of res.data) {
|
||||
item1.materials_str = ''
|
||||
if(item1.materials.length>0) {
|
||||
item1.materials.forEach((item:any,i:number) => {
|
||||
item1.materials_str += item.name+','
|
||||
});
|
||||
}
|
||||
console.log(item1.materials_str)
|
||||
}
|
||||
// }
|
||||
}
|
||||
},
|
||||
})
|
||||
28
miniprogram/pages/home/home.wxml
Normal file
28
miniprogram/pages/home/home.wxml
Normal file
@@ -0,0 +1,28 @@
|
||||
<view class="container" style="padding: 10px;">
|
||||
<view class="introduce-part c-part">
|
||||
<view class="title">Make My Drink</view>
|
||||
<view class="desc">
|
||||
{{introduce}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="operation-part c-part">
|
||||
<view class="star-btn btn" bindtap="toStarFunc" style="width: 50%;"> 我喜欢的鸡尾酒</view>
|
||||
<view class="question-btn btn">
|
||||
<image src="../../assets/question.png" mode="widthFix"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-part c-part">
|
||||
<view class="lp-card" wx:for="{{list}}" bindtap="toDetailFunc" data-item="{{item}}" wx:for-item="item" wx:key="id">
|
||||
<view class="lpc-name-box">
|
||||
<view class="lpc-name text-ellipsis-1" style="margin-bottom: 5px;"> {{item.name}}</view>
|
||||
<view class="small-text text-ellipsis-1"> {{item.desc}}</view>
|
||||
</view>
|
||||
<view class="lpc-tag std-small-text text-ellipsis-1">
|
||||
{{item.tag}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="search-part">
|
||||
<image bindtap="toSearchFunc" class="search-btn" src="../../assets/search.png" mode="widthFix"/>
|
||||
</view>
|
||||
</view>
|
||||
Reference in New Issue
Block a user