loser/wineList-MiniApp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
axlrose2333
2023-04-28 18:04:49 +08:00
commit 458639ab75
53 changed files with 36111 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
miniprogram/pages/detail/detail.json Normal file
View File

@@ -0,0 +1,4 @@
{
"usingComponents": {},
"navigationBarTitleText": "我喜欢的鸡尾酒"
}

116
miniprogram/pages/detail/detail.scss Normal file
View File

@@ -0,0 +1,116 @@
/* pages/detail/detail.wxss */
.container{
.c-part{
padding:0 10px;
}
.detail-name{
font-family: 'iconfont';
text-transform: capitalize;
font-size: 35px;
}
.material-part{
.mp-list{
margin-top: 10px;
.mpl-card{
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 0;
border-bottom: 1px solid rgb(231, 231, 231);
.m-name{
font-weight: 900;
}
}
:last-child{
border: none;
}
}
}
.step-part{
.step-box{
.step-card{
align-items: center;
display: flex;
justify-content: flex-start;
padding: 10px 20px;
.step-index{
font-size: 25px;
font-weight: 900;
margin-right: 20px;
font-family: "iconfont";
text-transform: capitalize;
}
.step-desc{
}
}
}
}
.deep-part{
.deep-box{
margin: 10px 0;
}
}
.fixed-part{
position: fixed;
bottom: 10px;
.fixed-part-wrap{
display: flex;
justify-content: space-between;
.fp-item{
image{
width: 23px;
padding: 10px;
// background: red;
border-radius: 50%;
}
}
}
}
.measure-part{
.mp-box{
.mpb-item{
display: flex;
justify-content:space-between;
padding-bottom: 20px;
align-items: center;
.mpb-left{
}
.mpb-right{
.mpb-operation-box{
display: flex;
justify-content: center;
align-items: center;
height: 10px;
.subtraction{
}
.add{
}
.disabled-add{
color: #e4e4e4;
}
.ob-btn{
font-size: 25px;
font-weight: 900;
line-height: 10px;
padding:10px;
}
.person-numer{
input{
width: 20px;
text-align: center;
margin: 0 20px;
}
}
}
}
}
}
}
}
.close-btn{
position: fixed;
bottom: 50px;
right: 20px;
}

193
miniprogram/pages/detail/detail.ts Normal file
View File

@@ -0,0 +1,193 @@
// pages/detail/detail.ts
Page({
/**
* 页面的初始数据
*/
data: {
title:'',
measure_flag:false,
person_number:1,
measure_show_types:[
{
name:'小数'
},
{
name:'分数'
}
],
measure_show_types_index:0,
measure_units:[
{
name:'shot'
},
{
name:'oz'
},
{
name:'ml'
},
{
name:'cl'
}
],
measure_units_index:0,
material_data:[
{
name:'金酒',
unit:'shot',
per_percent:0.5
},
{
name:'绿查特酒',
unit:'shot',
per_percent:0.5
},
{
name:'路萨朵樱桃酒',
unit:'shot',
per_percent:0.5
},
{
name:'青柠汁',
unit:'shot',
per_percent:0.5
}
],
steps:[
{
desc:'奖所有原料和冰块一起加入到摇酒壶中摇匀'
},
{
desc:'可选的酒渍樱桃装饰'
}
],
deep_info:`这款酒起源于一个世纪以前的底特律，但是它的名字典故已经不可考据。
虽然把它翻译成“临别一语”或者“关键一语”会更符合情景，但我比较喜欢“遗言”这个带有古老、复杂、神秘感觉的名字。
The Last Word是一款在现代复活的典型古典鸡尾酒。虽然在最开始推出时也火了几十年，但后来销声匿迹。直到1951年Ted Saucier 编著的《Bottoms Up》中最后一次出现。
2005年，Murray Stenson 在书中发现这款古老的鸡尾酒，并把它加入他工作的酒吧Zigzag Café的菜单中。很快，这款酒就成了该酒吧的招牌。
此外，The Last Word的重新出现吸引了很多鸡尾酒媒体的关注，这是推动这款酒在全球范围内流行的关键因素。很多人都认为，The Last Word的重新出现是一个重大发现，因为虽然这个配方很老，但它仍然具有现代风格：有着明亮的绿色，但完全来自于使用的绿查特酒，而不是人造色素。由四种味道强烈的原料产生的味道是独特而少见的。
综合来看，The Last Word是一款草药风味非常突出的鸡尾酒，其中绿查特酒扮演了很重要的角色。酒厂也很感谢Murray Stenson，因为The Last Word的出现吸引了更多人探索一些失传的鸡尾酒配方，也有人试图用绿茶特酒创作带有古典风格的现代鸡尾酒。不过，这款酒的味道仍然十分强烈，酒精度也不低，不一定适合所有人。
还有一件有趣的事：虽然有点拗口，The Last Word和Last Call（拉单前最后一轮酒）有点像双关语，或者说它的名字本身就适合作为最后一杯酒。虽然这种幽默感值得欣赏，但并不需要每次都喝The Last Word来作为最后一杯酒。`,
top:0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(e) {
console.log(e.tag);
wx.setNavigationBarTitle({
title: e.tag || '详情'
})
this.setData({
title:e.name
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
},
measureShowTypesChange(e:any) {
// console.log(e.detail.value);
this.setData({
measure_show_types_index:Number(e.detail.value)
})
},
openMeasureFunc(){
const _this = this
var query = wx.createSelectorQuery();
query.select("#detail-container").boundingClientRect((rect)=> {
if(!this.data.measure_flag) {
_this.setData({
top:Math.abs(rect.top)
})
}
// console.log(rect)//width等
this.setData({
measure_flag:!this.data.measure_flag
})
wx.pageScrollTo({
scrollTop: _this.data.top,
// scrollTop:230,
duration: 100
})
}).exec();
},
measureUnitsChange(e:any) {
this.setData({
measure_units_index:Number(e.detail.value)
})
},
closeFunc() {
// this.setData({
// measure_flag:!this.data.measure_flag
// })
this.openMeasureFunc()
},
personNumberFunc(params:any) {
const type = params.currentTarget.dataset.type
// console.log(type);
if(type == 1) { // 减
if(this.data.person_number>1) {
this.setData({
person_number:--this.data.person_number
})
}
}
else{ // 加
this.setData({
person_number:++this.data.person_number
})
}
}
})

113
miniprogram/pages/detail/detail.wxml Normal file
View File

@@ -0,0 +1,113 @@
<view class="container" id="detail-container" style="padding: 10px;">
<view class="detail-name c-part" style="text-align: center;">
{{title}}
</view>
<view class="material-part c-part">
<view class="part-title">
<view class="pt-text std-small-text" style="font-weight: 900;margin-right: 10px;">材料</view>
<view class="pt-line"></view>
</view>
<view class="mp-list">
<view class="mpl-card" wx:for="{{material_data}}" wx:key="name" wx:for-item="item">
<view class="m-name std-text">
{{item.name}}
</view>
<view class="m-unit small-text">
{{item.unit}}
</view>
</view>
</view>
</view>
<view class="step-part c-part">
<view class="part-title">
<view class="pt-text std-small-text" style="font-weight: 900;margin-right: 10px;">步骤</view>
<view class="pt-line"></view>
</view>
<view class="step-box">
<view class="step-detail step-card" wx:for="{{steps}}" wx:for-item="item" wx:key="desc" wx:for-index="index">
<view class="step-index">
{{index+1}}
</view>
<view class="step-desc std-small-text">
{{item.desc}}
</view>
</view>
</view>
</view>
<view hidden="{{measure_flag}}" class="deep-part c-part" style="margin-bottom: 80px;">
<view class="part-title">
<view class="pt-text std-small-text" style="font-weight: 900;margin-right: 10px;">深入</view>
<view class="pt-line"></view>
</view>
<view class="deep-box std-small-text">
<rich-text nodes="{{deep_info}}"></rich-text>
</view>
</view>
<view hidden="{{measure_flag}}" class="fixed-part c-part">
<view class="fixed-part-wrap">
<view class="fp-left fp-item">
<image bindtap="openMeasureFunc" style="background: rgb(253, 253, 31);" src="../../assets/ruler.png" mode="widthFix" />
</view>
<view class="fp-right fp-item">
<image style="background: rgb(84, 84, 201);margin-right: 10px;" src="../../assets/share.png" mode="widthFix" />
<image style="background: rgb(219, 78, 78);" src="../../assets/star.png" mode="widthFix" />
</view>
</view>
</view>
<view hidden="{{!measure_flag}}" class="close-btn" bindtap="closeFunc">
<icon color="black" class="icon-box-img" type="cancel" size="30"></icon>
</view>
<view hidden="{{!measure_flag}}" class="measure-part c-part">
<view class="part-title">
<view class="pt-text std-small-text" style="font-weight: 900;margin-right: 10px;">度量实用工具</view>
<view class="pt-line"></view>
</view>
<view class="mp-box">
<view class="mpb-item" style="padding-top: 20px;">
<view class="mpb-left std-small-text">
表示方式
</view>
<view class="mpb-right std-small-text">
<picker bindchange="measureShowTypesChange" range-key="name" value="{{measure_show_types_index}}" range="{{measure_show_types}}">
<view class="picker">
{{measure_show_types[measure_show_types_index].name}}
<view class="picker-icon">
<image src="../../assets/more.png" mode="widthFix"/>
</view>
</view>
</picker>
</view>
</view>
<view class="mpb-item">
<view class="mpb-left std-small-text">
测量单位
</view>
<view class="mpb-right std-small-text">
<picker bindchange="measureUnitsChange" range-key="name" value="{{measure_units_index}}" range="{{measure_units}}">
<view class="picker">
{{measure_units[measure_units_index].name}}
<view class="picker-icon">
<image src="../../assets/more.png" mode="widthFix"/>
</view>
</view>
</picker>
</view>
</view>
<view class="mpb-item">
<view class="mpb-left std-small-text">
份数
</view>
<view class="mpb-right std-small-text">
<view class="mpb-operation-box">
<view wx-if="{{person_number>1}}" bindtap="personNumberFunc" data-type='1' class="subtraction ob-btn">-</view>
<view wx-if="{{person_number == 1}}" class="subtraction ob-btn disabled-add">-</view>
<view class="person-numer">
<input value="{{person_number}}" type="numer"/>
</view>
<view class="add ob-btn" bindtap="personNumberFunc" data-type='2'>+</view>
</view>
</view>
</view>
</view>
</view>
</view>

4
miniprogram/pages/home/home.json Normal file
View File

@@ -0,0 +1,4 @@
{
"usingComponents": {},
"navigationBarTitleText": "我喜欢的鸡尾酒"
}

82
miniprogram/pages/home/home.scss Normal file
View 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
View 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
View 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>

3
miniprogram/pages/index/index.json Normal file
View File

@@ -0,0 +1,3 @@
{
"usingComponents": {}
}

19
miniprogram/pages/index/index.scss Normal file
View File

@@ -0,0 +1,19 @@
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
color: #aaa;
}
.userinfo-avatar {
overflow: hidden;
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.usermotto {
margin-top: 200px;
}

53
miniprogram/pages/index/index.ts Normal file
View File

@@ -0,0 +1,53 @@
// index.ts
// 获取应用实例
const app = getApp<IAppOption>()
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
canIUseGetUserProfile: false,
canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
},
// 事件处理函数
bindViewTap() {
wx.navigateTo({
url: '../logs/logs',
})
},
onLoad() {
// @ts-ignore
if (wx.getUserProfile) {
this.setData({
canIUseGetUserProfile: true
})
this.getUserProfile()
}
},
getUserProfile() {
// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
wx.getUserProfile({
desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res) => {
console.log(res)
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
},
complete:(res) => {
console.log(res);
}
})
},
getUserInfo(e: any) {
// 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
console.log(e)
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})

23
miniprogram/pages/index/index.wxml Normal file
View File

@@ -0,0 +1,23 @@
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<block wx:if="{{canIUseOpenData}}">
<view class="userinfo-avatar" bindtap="bindViewTap">
<open-data type="userAvatarUrl"></open-data>
</view>
<open-data type="userNickName"></open-data>
</block>
<block wx:elif="{{!hasUserInfo}}">
<button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
<button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<view wx:else> 请使用1.4.4及以上版本基础库 </view>
</block>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>

4
miniprogram/pages/logs/logs.json Normal file
View File

@@ -0,0 +1,4 @@
{
"navigationBarTitleText": "查看启动日志",
"usingComponents": {}
}

19
miniprogram/pages/logs/logs.ts Normal file
View File

@@ -0,0 +1,19 @@
// logs.ts
// const util = require('../../utils/util.js')
import { formatTime } from '../../utils/util'
Page({
data: {
logs: [],
},
onLoad() {
this.setData({
logs: (wx.getStorageSync('logs') || []).map((log: string) => {
return {
date: formatTime(new Date(log)),
timeStamp: log
}
}),
})
},
})

6
miniprogram/pages/logs/logs.wxml Normal file
View File

@@ -0,0 +1,6 @@
<!--logs.wxml-->
<view class="container log-list">
<block wx:for="{{logs}}" wx:key="timeStamp" wx:for-item="log">
<text class="log-item">{{index + 1}}. {{log.date}}</text>
</block>
</view>

8
miniprogram/pages/logs/logs.wxss Normal file
View File

@@ -0,0 +1,8 @@
.log-list {
display: flex;
flex-direction: column;
padding: 40rpx;
}
.log-item {
margin: 10rpx;
}

4
miniprogram/pages/search/search.json Normal file
View File

@@ -0,0 +1,4 @@
{
"usingComponents": {},
"navigationBarTitleText": "搜索配方"
}

93
miniprogram/pages/search/search.scss Normal file
View File

@@ -0,0 +1,93 @@
.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{
width: 95% !important;
margin-top: 50px;
.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;
top: 10px;
text-align: right;
box-sizing: border-box;
left: 0;
.search-box{
background-color: rgb(243, 243, 243);
width: 80%;
margin: 0 auto;
display: flex;
align-items: center;
padding: 10px;
border-radius: 5px;
.search-icon{
width: 15px;
}
.search-input{
font-size: 12px;
width: 100%;
text-align: left;
padding-left: 10px;
}
}
}

79
miniprogram/pages/search/search.ts Normal file
View File

@@ -0,0 +1,79 @@
// pages/search/search.ts
Page({
/**
* 页面的初始数据
*/
data: {
list:[
{
name:'the last word',
desc:'橙汁',
tag:'遗言',
id:1
},
{
name:'june bug',
tag:'六月虫',
desc:'青柠汁',
id:2
}
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad() {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})

22
miniprogram/pages/search/search.wxml Normal file
View File

@@ -0,0 +1,22 @@
<view class="container" style="padding: 10px;">
<view class="search-part c-part">
<view class="search-box">
<image class="search-icon" src="../../assets/search.png" mode="widthFix"/>
<input class="search-input" type="text" placeholder="搜索鸡尾酒" />
</view>
</view>
<view class="list-part c-part" wx:if="{{list.length>0}}">
<view class="lp-card" wx:for="{{list}}" 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 wx:else="{{list.length<1}}">
暂无数据
</view>
</view>

4
miniprogram/pages/star/star.json Normal file
View File

@@ -0,0 +1,4 @@
{
"usingComponents": {},
"navigationBarTitleText": "我的收藏"
}

82
miniprogram/pages/star/star.scss Normal file
View 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;
}
}

79
miniprogram/pages/star/star.ts Normal file
View File

@@ -0,0 +1,79 @@
// pages/star/star.ts
Page({
/**
* 页面的初始数据
*/
data: {
list:[
{
name:'the last word',
desc:'橙汁',
tag:'遗言',
id:1
},
{
name:'june bug',
tag:'六月虫',
desc:'青柠汁',
id:2
}
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad() {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})

13
miniprogram/pages/star/star.wxml Normal file
View File

@@ -0,0 +1,13 @@
<view class="container" style="padding: 10px;">
<view class="list-part c-part">
<view class="lp-card" wx:for="{{list}}" 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>