miniprogram / shop · 提交

转到一个项目

作者 cuiyuan
提交 020875fed9edb1643f0979b6b5fadf2f92999cda 1 个父辈 dc720b4c

苏杭

内嵌 并排对比
正在显示 15 个修改的文件 包含 566 行增加 和 764 行删除
{
"pages": [
"pages/homeindex/result/result",
"pages/homeindex/search/search",
"pages/index/index",
"pages/homeindex/homeindex",
"pages/kind/kind",
"pages/homeindex/result/result",
"pages/homeindex/search/search",
"pages/mine/mine",
"pages/homeindex/homeindex",
"pages/kind/detail_1/detail_1",
"pages/kind/firm_order2/firm_order2",
"pages/kind/firm_order1/firm_order1",
... ... @@ -22,7 +25,7 @@
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTitleText": "团购商城",
"navigationBarTextStyle": "black"
},
"tabBar": {
... ...
// pages/homeindex/homeindex.js
const app=getApp()
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
url:''
banner: [],
shop_class: [],
middle:'',
shop:[]
},
// 跳转页面
btn_name() {
wx.navigateTo({
url: '/pages/homeindex/search/search',
})
},
get_info() {
let that = this
let url = app.interface.index;
let header = {
'XX-Device-Type': 'wxapp',
'XX-Token': wx.getStorageSync('token')
}
app.post(url, {}, header).then((res) => {
console.log(res)
that.setData({
banner: res.data.banner,
shop_class: res.data.shop_class,
middle: res.data.middle,
shop:res.data.shop
})
}).catch((errMsg) => {})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
url: app.globalData.baseUrl
})
console.log(this.data.url)
onLoad: function(options) {
let that = this
that.get_info()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
onShareAppMessage: function() {
}
})
\ No newline at end of file
... ...
... ... @@ -2,38 +2,38 @@
<!-- <text>pages/homeindex/homeindex.wxml</text> -->
<view class='search'>
<view class='search_inp'>
<input type='text' placeholder='请输入商品名称'></input>
<view class='search_inp' bindtap="btn_name">
<!-- <input type='text' bindtap="btn_name" placeholder='请输入商品名称'></input> -->
请输入商品名称
<image src='../../img/search.png'></image>
</view>
<view class='search_txt'>
<view class='search_txt' bindtap="btn_name">
搜索
</view>
</view>
<view class='banner'>
<swiper indicator-dots="true" indicator-active-color="#fff" style="width:100%;height:100%;">
<swiper-item>
<image style="width: 688px; height: 336px; " mode='widthFix' src='../../img/蒙版组 33@2x.png'></image>
</swiper-item>
<swiper-item>
<image style="width: 688px; height: 336px; " src='../../img/蒙版组 33@2x.png'></image>
<swiper-item wx:for='{{banner}}' wx:key="index">
<image style="width: 688rpx;" mode='widthFix' src='{{item.img}}' />
</swiper-item>
</swiper>
<view class='banner_Mask'></view>
</view>
<view class='commodity'>
<view class='jujia'>
<image src='../../img/jujia@3x.png'></image>
<text>居家用品</text>
<!-- <navigator url=''>
</navigator> -->
<view class='jujia' wx:for='{{shop_class}}' wx:key="index">
<image src='{{item.img}}'></image>
<text>{{item.class_name}}</text>
</view>
<view class='riyong'>
<!-- <view class='riyong'>
<image src='../../img/riyongsahngpin@3x.png'></image>
<text>日用商品</text>
</view>
<view class='shuam'>
<image src='../../img/shuma@3x.png'></image>
<text>数码商品</text>
</view>
</view> -->
<view class='fenlei'>
<image src='../../img/fenlei@3x.png'></image>
<text>全部分类</text>
... ... @@ -54,162 +54,48 @@
<text>赔付保障</text>
</view>
</view>
<image src='../../img/20190311140242.png'></image>
<image src='{{middle}}'></image>
</view>
<view class='container'>
<view class='mid'>
<view class='mid_item'>
<!-- 顶部 -->
<view class='mid_item_top'>
<!-- 左边 -->
<view class='mid_item_top_left'>
<view class='top_left_pic'>
<image src='../../../img/goods_1.png'></image>
</view>
<view class='top_left_text'>
距结束23时59分距结束23时59分
</view>
</view>
<!-- 右边 -->
<view class='mid_item_top_right'>
<!-- 右上 -->
<view class='right_top'>
<view class='right_top_lef'>
纯进口有机菜花
</view>
<view class='right_top_rig'>
产地：智利
</view>
</view>
<!-- 右中1 -->
<view class='right_mid'>
<view class='right_mid_lef'>
<view class='right_mid_lef_color'></view>
</view>
<view class='right_mid_rig'>
42%
</view>
</view>
<!-- 右中2 -->
<view class='right_text'>
已拼300份，目标500份
</view>
<!-- 右下 -->
<view class='right_bottom'>
<!-- 右下左 -->
<view class='right_bottom_lef'>
<span class='RBM'>￥</span>
<span class='number'>52/</span>
<span class='text'>1磅1份1磅1份</span>
</view>
<!-- 右下中 -->
<view class='right_bottom_mid'>
<view class='right_bottom_mid_t'>
40mm-50m
</view>
<view class='right_bottom_mid_b'>
番茄果径番茄果径番茄果径
</view>
</view>
<!-- 右下右 -->
<view class='right_bottom_rig'>
立即参团
</view>
</view>
</view>
<view class='ware_box' wx:for='{{shop}}' wx:key="index">
<view class='ware_top'>
<view class='ware_1'>
<image src='{{item.thumb}}'></image>
<view class='ware_1_time'>
据结束2时22分
</view>
<view class='mid_item_bottom'>
<view class='mid_item_bottom_left'>
经典推荐
</view>
<!-- 竖线 -->
<view class='mid_line'></view>
<!-- 底部文本 -->
<view class='mid_item_bottom_bot'>
智利进口，绿色健康，硕大饱满
<view class='ware_text'>
<view class='ware_2'>
<text class='ware_2Txt1'>{{item.name}}</text>
<text class='ware_2Txt2'>{{item.origin}}</text>
</view>
<view class='ware_3'>
<progress percent="42" show-info color="#B5DE96" border-radius="8" font-size="24rpx" stroke-width="16rpx" />
</view>
<view class='ware_4'>
<text>现有{{item.numb}}份，目标{{item.group}}份</text>
</view>
<view class='mid_item'>
<!-- 顶部 -->
<view class='mid_item_top'>
<!-- 左边 -->
<view class='mid_item_top_left'>
<view class='top_left_pic'>
<image src='../../../img/goods_1.png'></image>
</view>
<view class='text_color'>
距结束2时22分距结束2时22分
</view>
<view class='ware_5'>
<view>
<text class='ware5_t1'>{{item.money_sale}}</text>
<text class='ware5_t2'>{{item.shop_type}}</text>
</view>
<!-- 右边 -->
<view class='mid_item_top_right'>
<!-- 右上 -->
<view class='right_top'>
<view class='right_top_lef'>
纯进口有机菜花
<view class='ware5_box'>
<view class='ware5_t3'>{{item.text_table}}</view>
<view class='ware5_t4'>{{item.text_content}}</view>
</view>
<view class='right_top_rig'>
产地：罗利
<view class='ware_6'>
<view>立即参团</view>
</view>
</view>
<!-- 右中1 -->
<view class='right_mid'>
<view class='right_mid_lef'>
<view class='right_mid_lef_color'></view>
</view>
<view class='right_mid_rig'>
42%
</view>
</view>
<!-- 右中2 -->
<view class='right_text'>
已拼300份，目标500份
</view>
<!-- 右下 -->
<view class='right_bottom'>
<!-- 右下左 -->
<view class='right_bottom_lef'>
<span class='RBM'>￥</span>
<span class='number'>52/</span>
<span class='text'>1磅1份1磅1份</span>
</view>
<!-- 右下中 -->
<view class='right_bottom_mid'>
<view class='right_bottom_mid_t'>
40mm-50m
</view>
<view class='right_bottom_mid_b'>
番茄果径 番茄果径番茄果径
</view>
</view>
<!-- 右下右 -->
<view class='right_bottom_rig'>
立即参团
</view>
</view>
</view>
</view>
<view class='mid_item_bottom'>
<view class='mid_item_bottom_left'>
经典推荐
</view>
<!-- 竖线 -->
<view class='mid_line'></view>
<!-- 底部文本 -->
<view class='mid_item_bottom_bot'>
智利进口，绿色健康，硕大饱满
</view>
<view class='ware_bot'>
<view class='ware_bot_tit'>经典推荐</view>
<view class='ware_bot_txt'>{{item.recommend}}</view>
</view>
</view>
</view>
</view>
\ No newline at end of file
... ...
... ... @@ -28,6 +28,7 @@
.search_inp image{
position: absolute;
left: 32rpx;
top: 17rpx;
width: 32rpx;
height: 32rpx;
}
... ... @@ -121,7 +122,6 @@
margin: 0 auto;
}
.commodity image{
display: flex;
width: 112rpx;
height: 112rpx;
margin: 0 auto;
... ... @@ -145,240 +145,208 @@
display: flex;
flex-flow: column;
}
.mid_item{
margin-top: 16rpx;
.ware_box{
width:688rpx;
/* height:400rpx; */
background:rgba(249,250,252,1);
opacity:1;
border-radius:8rpx;
display: flex;
align-items: center;
flex-flow: column;
box-sizing: border-box;
padding: 52rpx 16rpx 48rpx;
height:400rpx;
margin:32rpx auto;
background:#F9FAFC;
}
.mid_item_top{
.ware_top{
overflow: hidden;
display: flex;
width: 100%;
padding:32rpx 18rpx 0;
}
.mid_item_top_left{
width:208rpx;
.ware_1{
width:312rpx;
height:208rpx;
/* background:rgba(250,250,250,1); */
opacity:1;
display: flex;
flex-flow: column;
}
.top_left_pic{
width: 208rpx;
height: 160rpx;
display: flex;
position: relative;
}
.top_left_pic image{
width: 100%;
height: 100%;
.ware_1 image{
width:100%;
height:100%;
}
.top_left_text{
width: 202rpx;
.ware_1_time{
position: absolute;
bottom:0;
width:208rpx;
height:48rpx;
background:rgba(251,4,4,1);
opacity:0.2;
color: white;
text-align: center;
line-height:48rpx;
font-size:24rpx;
background:#FAC8C8;
font-family:PingFang SC;
font-weight:400;
line-height:48rpx;
color:rgba(255,255,255,1);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mid_item_top_right{
width: 100%;
margin-left: 14rpx;
.ware_text{
margin-left:14rpx;
width:100%;
}
.right_top{
.ware_2{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20rpx;
align-content: center;
}
.right_top_lef{
width: 270rpx;
.ware_2Txt1{
font-size:32rpx;
font-family:PingFang SC;
font-weight:600;
line-height:44rpx;
color:rgba(51,51,51,1);
opacity:1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.right_top_rig{
.ware_2Txt2{
font-size:22rpx;
/* margin-left:98rpx; */
font-family:PingFang SC;
font-weight:400;
line-height:32rpx;
color:rgba(204,204,204,1);
opacity:1;
}
.right_mid{
margin-top: 16rpx;
display: flex;
align-items: center;
}
.right_mid_lef{
width:288rpx;
height:16rpx;
background:rgba(236,236,236,1);
opacity:1;
border-radius:8rpx;
}
.right_mid_lef_color{
width:206rpx;
height:16rpx;
background:rgba(181,222,150,1);
opacity:1;
border-radius:8rpx;
}
.right_mid_rig{
margin-left: 16rpx;
font-size:24rpx;
font-family:PingFang SC;
font-weight:400;
line-height:34rpx;
color:rgba(181,222,150,1);
opacity:1;
.ware_3 progress{
width:370rpx;
color:#B5DE96;
margin-top:24rpx;
}
.right_text{
margin-top: 14rpx;
.ware_4 text,.ware5_t2{
font-size:22rpx;
font-family:PingFang SC;
font-weight:400;
line-height:32rpx;
color:rgba(204,204,204,1);
opacity:1;
}
.right_bottom{
.ware_5{
display: flex;
align-items: center;
display: -webkit-flex;
justify-content: space-between;
}
.RBM{
font-size: 22rpx;
color: #ff0000;
}
.number{
font-size: 30rpx;
color: #ff0000;
}
.text{
font-size:22rpx;
font-family:PingFang SC;
.ware5_t1{
font-size:30rpx;
font-family:DIN 1451 Std Mittelschrift;
font-weight:400;
line-height:32rpx;
color:rgba(204,204,204,1);
opacity:1;
}
.right_bottom_mid{
width: 122rpx;
color:rgba(255,0,0,1);
}
.right_bottom_mid_t{
.ware5_t3{
font-size:22rpx;
font-family:PingFang SC;
font-weight:400;
line-height:30rpx;
color:rgba(51,51,51,1);
opacity:1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.right_bottom_mid_b{
.ware5_t4{
font-size:18rpx;
font-family:PingFang SC;
font-weight:400;
color:rgba(153,153,153,1);
opacity:1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.right_bottom_rig{
.ware_6{
width:144rpx;
height:48rpx;
line-height: 48rpx;
background:rgba(249,150,20,1);
box-shadow:0rpx 2rpx 12rpx rgba(255,145,0,0.16);
opacity:1;
box-shadow:0px 2rpx 12rpx rgba(255,145,0,0.16);
border-radius:24rpx;
text-align: center;
}
.ware_6 view{
font-size:26rpx;
font-family:PingFang SC;
font-weight:400;
text-align: center;
line-height:48rpx;
color:rgba(255,255,255,1);
}
.mid_item_bottom{
margin-top: 32rpx;
width:640rpx;
.ware_bot{
width:670rpx;
height:80rpx;
background:rgba(181,222,150,0.1);
border-radius:16rpx;
margin: auto;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 0 32rpx;
line-height:80rpx;
margin-top:32rpx;
background-color:#F1F7F1;
}
.mid_item_bottom_left{
.ware_bot_tit{
font-size:30rpx;
font-family:汉真广标;
font-weight:400;
font-weight:bold;
margin-left:32rpx;
color:rgba(110,172,61,1);
opacity:1;
}
.mid_line{
margin: 0 36rpx;
width:2rpx;
height:60rpx;
background:rgba(181,222,150,1);
opacity:1;
border-radius:4rpx;
.ware_bot_tit:after{
content:"";
margin:0 38rpx;
border-right:1px solid #B5DE96;
}
.mid_item_bottom_bot{
.ware_bot_txt{
font-size:24rpx;
font-family:PingFang SC;
font-weight:400;
color:rgba(153,153,153,1);
opacity:1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text_color{
width:202rpx;
height:48rpx;
line-height: 48rpx;
text-align: center;
background:rgba(204,204,204,0.7);
/* 规格 */
.spec{
width:100%;
padding:0 32rpx;
line-height:80rpx;
display: flex;
height:80rpx;
margin-top:8rpx;
background:white;
}
.spec_txt{
font-size:32rpx;
font-family:PingFang SC;
font-weight:400;
color:rgba(51,51,51,1);
}
.spec_txt2{
font-size:24rpx;
font-family:PingFang SC;
font-weight:400;
color:rgba(255,255,255,1);
opacity:1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left:108rpx;
color:rgba(153,153,153,1);
}
.right_bottom_lef{
width: 140rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* 商品详情 */
.ware_detail{
width:100%;
margin-top:8rpx;
margin-bottom:96rpx;
padding-bottom:66rpx;
background: white;
}
.ware_detail_tit{
width:688rpx;
margin: auto;
display: flex;
padding:44rpx 0rpx 42rpx;
justify-content:space-around;
border-bottom:2rpx solid #F5F5F5;
}
.ware_detail .ware_active{
color:#6EAC3D;
font-weight:600;
}
.ware_active:after{
content: "";
width:16rpx;
height: 6rpx;
margin: auto;
display: block;
margin-top:6rpx;
border-radius:8rpx;
background:rgba(110,172,61,1);
}
.ware_detail_tit view{
font-size:28rpx;
font-family:PingFang SC;
font-weight:400;
color:rgba(153,153,153,1);
}
.ware_detailC{
width:688rpx;
margin:26rpx auto 0;
}
.ware_detailImg{
width:688rpx;
height:470rpx;
}
.ware_detailImg image{
width:100%;
height:100%;
}
\ No newline at end of file
... ...
// pages/homeindex/search/search.js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
recommend: [],
history: [],
keyword: ''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let that = this
that.get_info()
},
get_info() {
let that = this
// 接口地址
let url = app.interface.history
let header = {
'XX-Device-Type': 'wxapp',
'XX-Token': wx.getStorageSync('token')
}
app.post(url, {},header).then((res) => {
console.log(res)
that.setData({
recommend: res.data.recommend,
history: res.data.history
})
}).catch((errMsg) => {
})
},
// get_info() {
// let that = this
// let url = app.interface.index;
// let header = {
// 'XX-Device-Type': 'wxapp',
// 'XX-Token': wx.getStorageSync('token')
// }
// app.post(url, {}, header).then((res) => {
// console.log(res)
// that.setData({
// banner: res.data.banner,
// shop_class: res.data.shop_class,
// middle: res.data.middle,
// shop: res.data.shop
// })
// }).catch((errMsg) => { })
// },
info(){
let that = this
// 接口地址
let url = app.interface.shopPage
app.post(url, {
page: 1,
keyword: that.data.keyword
}).then((res) => {
console.log(res)
that.setData({
})
}).catch((errMsg) => {
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
... ...
... ... @@ -5,7 +5,7 @@
<input type='text' placeholder='请输入商品名称'></input>
<image src='../../../img/search.png'></image>
</view>
<view class='search_txt'>
<view class='search_txt' bindtap='info'>
搜索
</view>
</view>
... ... @@ -14,29 +14,16 @@
<text>热门搜索</text>
<image src='../../../img/zuire@3x.png'></image>
</view>
<view class='Popular_list'>
<view class='Popular_item'>
有机菜花
</view>
<view class='Popular_item'>
有机菜
</view>
<view class='Popular_item'>
有机菜花
</view>
<view class='Popular_item'>
有机菜花
</view>
<view class='Popular_item'>
有机菜花
<view class='Popular_list' >
<view class='Popular_item' wx:for='{{recommend}}' wx:key>
{{recommend[index]}}
</view>
</view>
<view class='History'>
<view class='History_title'>历史搜索</view>
<view class='History_list'>
<view class='History_item'>有机菜花</view>
<view class='History_item'>有机菜花</view>
<view class='History_item'>有机菜花</view>
<view class='History_item' wx:for='{{history}}' wx:key>{{history[index]}}</view>
</view>
</view>
</view>
\ No newline at end of file
... ...
... ... @@ -4,89 +4,66 @@ const app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
session_key:'',
openid:''
},
start(e) {
let that = this;
console.log(e)
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getLoginFun();
},
// app.globalData.userInfo = e.detail.userInfo
// 获取session_key
getLoginFun() {
let that = this;
wx.login({
success: (res) => {
console.log(res)
success: function (s) {
console.log(s);
wx.switchTab({
url: '../homeindex/homeindex',
let url = 'wxapp/public/getSessionKey';
if (s.code) {
var code = s.code;
var param = {
code: s.code
}
app.post(url, param).then((res) => {
console.log(res);
that.setData({
openid: res.data.openid,
session_key: res.data.session_key
})
// let url = '/api/portal/common/getToken ';
// let params = {
// code: res.code,
// user_nickname: e.detail.userInfo.nickName,
// avatar: e.detail.userInfo.avatarUrl
// // user_nickname: e.detail.userInfo.nickName,
// // avatar: e.detail.userInfo.avatarUrl //分享进入的需要此参数
// }
// app.post(url, params).then((res) => {
// console.log(res)
// wx.setStorageSync('token', res.token);
// wx.navigateTo({
// url: '../mainindex/mainindex',
// })
// }).catch((errMsg) => {
// // console.log(errMsg)
// })
// res.data = {}
}).catch((errMsg) => {
console.log(errMsg);
})
}
}
});
},
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
// 获取用户信息
getUserInfo(e) {
console.log(e);
let url = "wxapp/public/login";
let data = {
openid: this.data.openid,
session_key: this.data.session_key,
encrypted_data: e.detail.encryptedData,
iv: e.detail.iv,
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
app.post(url, data).then((res) => {
console.log(res);
wx.setStorageSync("token", res.data.token);
wx.switchTab({
url: '../homeindex/homeindex',
})
}
}).catch((err) => {
console.log(err);
})
}
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
... ...
<button open-type="getUserInfo" bindgetuserinfo='start' class="begin">启动小程序</button>
<view class='box'>
<view class='cover'>
<image src="../../images/aicon_23@2x.png"></image>
asdlkjhnaisd
<view class='go'>
<button open-type='getUserInfo' bindgetuserinfo="getUserInfo">立即启动</button>
</view>
</view>
</view>
\ No newline at end of file
... ...
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
.cover{
position: relative;
height: 100vh;
overflow:hidden;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
.cover image{
width:100%;
height:100%;
}
.userinfo-nickname {
color: #aaa;
.go{
position: absolute;
bottom:26.41%;
left:0;
right: 0;
margin: auto;
width:400rpx;
height:80rpx;
border-radius:40rpx;
background: #6EAC3D;
/* border:1rpx solid #434343; */
}
.usermotto {
margin-top: 200px;
.go button{
font-size:30rpx;
color:#fff;
text-align: center;
line-height:80rpx;
display: block;
background:none;
}
\ No newline at end of file
... ...
// pages/kind/kind.js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
navbar: [{
name: '居家用品'
},
{
name: '日用商品'
},
{
name: '数码商品'
},
{
name: '富硒生疏'
},
{
name: '野生海鲜'
},
{
name: '有机菜花'
},
],
shop_class:[],
shop:[],
currentTab: 0,
class_id: ''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let that = this
that.get_info()
},
get_info() {
let that = this
// 接口地址
let url = app.interface.shopClass
let header = {
'XX-Device-Type': 'wxapp',
'XX-Token': wx.getStorageSync('token')
}
let params = {
class_id: that.data.class_id
}
app.post(url, params, header).then((res) => {
console.log(res)
that.setData({
shop_class: res.data.shop_class,
shop:res.data.shop
})
}).catch((errMsg) => {
})
},
navbarTap: function (e) {
console.log(88)
console.log(e)
let that = this;
this.setData({
currentTab: e.currentTarget.dataset.idx,
class_id: e.currentTarget.dataset.class_id
})
this.get_info()
},
/**
* 生命周期函数--监听页面初次渲染完成
... ...
... ... @@ -2,159 +2,49 @@
<!-- <text>pages/kind/kind.wxml</text> -->
<view class='container'>
<view class="nav mainindex_nav top">
<view wx:for="{{navbar}}" data-idx="{{index}}" class="nav_item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap" data-categoryid="{{item.id}}">{{item.name}}
<view wx:for="{{shop_class}}" data-idx="{{index}}" class="nav_item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap" data-class_id="{{item.class_id}}">{{item.class_name}}
</view>
</view>
<view class='mid'>
<view class='mid_item'>
<!-- 顶部 -->
<view class='mid_item_top'>
<!-- 左边 -->
<view class='mid_item_top_left'>
<view class='top_left_pic'>
<image src='../../../img/goods_1.png'></image>
<view class='ware_box' wx:for='{{shop}}' wx:key="index">
<view class='ware_top'>
<view class='ware_1' data-categoryid="{{item.shop_id}}">
<image src='{{item.thumb}}'></image>
<view class='ware_1_time'>
据结束2时22分
</view>
<view class='top_left_text'>
距结束23时59分距结束23时59分
</view>
<view class='ware_text'>
<view class='ware_2'>
<text class='ware_2Txt1'>{{item.name}}</text>
<text class='ware_2Txt2'>{{item.origin}}</text>
</view>
<!-- 右边 -->
<view class='mid_item_top_right'>
<!-- 右上 -->
<view class='right_top'>
<view class='right_top_lef'>
纯进口有机菜花
<view class='ware_3'>
<progress percent="42" show-info color="#B5DE96" border-radius="8" font-size="24rpx" stroke-width="16rpx" />
</view>
<view class='right_top_rig'>
产地：智利
<view class='ware_4'>
<text>现有{{item.numb}}份，目标{{item.group}}份</text>
</view>
<view class='ware_5'>
<view>
<text class='ware5_t1'>{{item.money_sale}}</text>
<text class='ware5_t2'>{{item.shop_type}}</text>
</view>
<!-- 右中1 -->
<view class='right_mid'>
<view class='right_mid_lef'>
<view class='right_mid_lef_color'></view>
<view class='ware5_box'>
<view class='ware5_t3'>{{item.text_table}}</view>
<view class='ware5_t4'>{{item.text_content}}</view>
</view>
<view class='right_mid_rig'>
42%
<view class='ware_6'>
<view>立即参团</view>
</view>
</view>
<!-- 右中2 -->
<view class='right_text'>
已拼300份，目标500份
</view>
<!-- 右下 -->
<view class='right_bottom'>
<!-- 右下左 -->
<view class='right_bottom_lef'>
<span class='RBM'>￥</span>
<span class='number'>52/</span>
<span class='text'>1磅1份1磅1份</span>
</view>
<!-- 右下中 -->
<view class='right_bottom_mid'>
<view class='right_bottom_mid_t'>
40mm-50m
</view>
<view class='right_bottom_mid_b'>
番茄果径番茄果径番茄果径
</view>
</view>
<!-- 右下右 -->
<view class='right_bottom_rig'>
立即参团
</view>
</view>
</view>
</view>
<view class='mid_item_bottom'>
<view class='mid_item_bottom_left'>
经典推荐
</view>
<!-- 竖线 -->
<view class='mid_line'></view>
<!-- 底部文本 -->
<view class='mid_item_bottom_bot'>
智利进口，绿色健康，硕大饱满
</view>
</view>
</view>
<view class='mid_item'>
<!-- 顶部 -->
<view class='mid_item_top'>
<!-- 左边 -->
<view class='mid_item_top_left'>
<view class='top_left_pic'>
<image src='../../../img/goods_1.png'></image>
</view>
<view class='text_color'>
距结束2时22分距结束2时22分
</view>
</view>
<!-- 右边 -->
<view class='mid_item_top_right'>
<!-- 右上 -->
<view class='right_top'>
<view class='right_top_lef'>
纯进口有机菜花
</view>
<view class='right_top_rig'>
产地：罗利
</view>
</view>
<!-- 右中1 -->
<view class='right_mid'>
<view class='right_mid_lef'>
<view class='right_mid_lef_color'></view>
</view>
<view class='right_mid_rig'>
42%
</view>
</view>
<!-- 右中2 -->
<view class='right_text'>
已拼300份，目标500份
</view>
<!-- 右下 -->
<view class='right_bottom'>
<!-- 右下左 -->
<view class='right_bottom_lef'>
<span class='RBM'>￥</span>
<span class='number'>52/</span>
<span class='text'>1磅1份1磅1份</span>
</view>
<!-- 右下中 -->
<view class='right_bottom_mid'>
<view class='right_bottom_mid_t'>
40mm-50m
</view>
<view class='right_bottom_mid_b'>
番茄果径 番茄果径番茄果径
</view>
</view>
<!-- 右下右 -->
<view class='right_bottom_rig'>
立即参团
</view>
<view class='ware_bot'>
<view class='ware_bot_tit'>经典推荐</view>
<view class='ware_bot_txt'>{{item.recommend}}</view>
</view>
</view>
</view>
<view class='mid_item_bottom'>
<view class='mid_item_bottom_left'>
经典推荐
</view>
<!-- 竖线 -->
<view class='mid_line'></view>
<!-- 底部文本 -->
<view class='mid_item_bottom_bot'>
智利进口，绿色健康，硕大饱满
</view>
</view>
</view>
</view>
</view>
\ No newline at end of file
... ...
... ... @@ -14,6 +14,9 @@
overflow-x: scroll;
flex-wrap: nowrap
}
::-webkit-scrollbar{
display: none;
}
.nav_item{
/* width: 200rpx; */
padding: 0 38rpx;
... ... @@ -33,7 +36,7 @@
position: absolute;
left: 0;
right: 0;
bottom: -15rpx;
bottom: -20rpx;
margin: 0 auto;
}
.container{
... ... @@ -47,240 +50,208 @@
display: flex;
flex-flow: column;
}
.mid_item{
margin-top: 16rpx;
.ware_box{
width:688rpx;
/* height:400rpx; */
background:rgba(249,250,252,1);
opacity:1;
border-radius:8rpx;
display: flex;
align-items: center;
flex-flow: column;
box-sizing: border-box;
padding: 52rpx 16rpx 48rpx;
height:400rpx;
margin:32rpx auto;
background:#F9FAFC;
}
.mid_item_top{
.ware_top{
overflow: hidden;
display: flex;
width: 100%;
padding:32rpx 18rpx 0;
}
.mid_item_top_left{
width:208rpx;
.ware_1{
width:312rpx;
height:208rpx;
/* background:rgba(250,250,250,1); */
opacity:1;
display: flex;
flex-flow: column;
}
.top_left_pic{
width: 208rpx;
height: 160rpx;
display: flex;
position: relative;
}
.top_left_pic image{
width: 100%;
height: 100%;
.ware_1 image{
width:100%;
height:100%;
}
.top_left_text{
width: 202rpx;
.ware_1_time{
position: absolute;
bottom:0;
width:208rpx;
height:48rpx;
background:rgba(251,4,4,1);
opacity:0.2;
color: white;
text-align: center;
line-height:48rpx;
font-size:24rpx;
background:#FAC8C8;
font-family:PingFang SC;
font-weight:400;
line-height:48rpx;
color:rgba(255,255,255,1);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mid_item_top_right{
width: 100%;
margin-left: 14rpx;
.ware_text{
margin-left:14rpx;
width:100%;
}
.right_top{
.ware_2{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20rpx;
align-content: center;
}
.right_top_lef{
width: 270rpx;
.ware_2Txt1{
font-size:32rpx;
font-family:PingFang SC;
font-weight:600;
line-height:44rpx;
color:rgba(51,51,51,1);
opacity:1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.right_top_rig{
.ware_2Txt2{
font-size:22rpx;
/* margin-left:98rpx; */
font-family:PingFang SC;
font-weight:400;
line-height:32rpx;
color:rgba(204,204,204,1);
opacity:1;
}
.right_mid{
margin-top: 16rpx;
display: flex;
align-items: center;
}
.right_mid_lef{
width:288rpx;
height:16rpx;
background:rgba(236,236,236,1);
opacity:1;
border-radius:8rpx;
}
.right_mid_lef_color{
width:206rpx;
height:16rpx;
background:rgba(181,222,150,1);
opacity:1;
border-radius:8rpx;
.ware_3 progress{
width:370rpx;
color:#B5DE96;
margin-top:24rpx;
}
.right_mid_rig{
margin-left: 16rpx;
font-size:24rpx;
font-family:PingFang SC;
font-weight:400;
line-height:34rpx;
color:rgba(181,222,150,1);
opacity:1;
}
.right_text{
margin-top: 14rpx;
.ware_4 text,.ware5_t2{
font-size:22rpx;
font-family:PingFang SC;
font-weight:400;
line-height:32rpx;
color:rgba(204,204,204,1);
opacity:1;
}
.right_bottom{
.ware_5{
display: flex;
align-items: center;
display: -webkit-flex;
justify-content: space-between;
}
.RBM{
font-size: 22rpx;
color: #ff0000;
}
.number{
font-size: 30rpx;
color: #ff0000;
}
.text{
font-size:22rpx;
font-family:PingFang SC;
.ware5_t1{
font-size:30rpx;
font-family:DIN 1451 Std Mittelschrift;
font-weight:400;
line-height:32rpx;
color:rgba(204,204,204,1);
opacity:1;
}
.right_bottom_mid{
width: 122rpx;
color:rgba(255,0,0,1);
}
.right_bottom_mid_t{
.ware5_t3{
font-size:22rpx;
font-family:PingFang SC;
font-weight:400;
line-height:30rpx;
color:rgba(51,51,51,1);
opacity:1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.right_bottom_mid_b{
.ware5_t4{
font-size:18rpx;
font-family:PingFang SC;
font-weight:400;
color:rgba(153,153,153,1);
opacity:1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.right_bottom_rig{
.ware_6{
width:144rpx;
height:48rpx;
line-height: 48rpx;
background:rgba(249,150,20,1);
box-shadow:0rpx 2rpx 12rpx rgba(255,145,0,0.16);
opacity:1;
box-shadow:0px 2rpx 12rpx rgba(255,145,0,0.16);
border-radius:24rpx;
text-align: center;
}
.ware_6 view{
font-size:26rpx;
font-family:PingFang SC;
font-weight:400;
text-align: center;
line-height:48rpx;
color:rgba(255,255,255,1);
}
.mid_item_bottom{
margin-top: 32rpx;
width:640rpx;
.ware_bot{
width:670rpx;
height:80rpx;
background:rgba(181,222,150,0.1);
border-radius:16rpx;
margin: auto;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 0 32rpx;
line-height:80rpx;
margin-top:32rpx;
background-color:#F1F7F1;
}
.mid_item_bottom_left{
.ware_bot_tit{
font-size:30rpx;
font-family:汉真广标;
font-weight:400;
font-weight:bold;
margin-left:32rpx;
color:rgba(110,172,61,1);
opacity:1;
}
.mid_line{
margin: 0 36rpx;
width:2rpx;
height:60rpx;
background:rgba(181,222,150,1);
opacity:1;
border-radius:4rpx;
.ware_bot_tit:after{
content:"";
margin:0 38rpx;
border-right:1px solid #B5DE96;
}
.mid_item_bottom_bot{
.ware_bot_txt{
font-size:24rpx;
font-family:PingFang SC;
font-weight:400;
color:rgba(153,153,153,1);
opacity:1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text_color{
width:202rpx;
height:48rpx;
line-height: 48rpx;
text-align: center;
background:rgba(204,204,204,0.7);
/* 规格 */
.spec{
width:100%;
padding:0 32rpx;
line-height:80rpx;
display: flex;
height:80rpx;
margin-top:8rpx;
background:white;
}
.spec_txt{
font-size:32rpx;
font-family:PingFang SC;
font-weight:400;
color:rgba(51,51,51,1);
}
.spec_txt2{
font-size:24rpx;
font-family:PingFang SC;
font-weight:400;
color:rgba(255,255,255,1);
opacity:1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left:108rpx;
color:rgba(153,153,153,1);
}
.right_bottom_lef{
width: 140rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* 商品详情 */
.ware_detail{
width:100%;
margin-top:8rpx;
margin-bottom:96rpx;
padding-bottom:66rpx;
background: white;
}
.ware_detail_tit{
width:688rpx;
margin: auto;
display: flex;
padding:44rpx 0rpx 42rpx;
justify-content:space-around;
border-bottom:2rpx solid #F5F5F5;
}
.ware_detail .ware_active{
color:#6EAC3D;
font-weight:600;
}
.ware_active:after{
content: "";
width:16rpx;
height: 6rpx;
margin: auto;
display: block;
margin-top:6rpx;
border-radius:8rpx;
background:rgba(110,172,61,1);
}
.ware_detail_tit view{
font-size:28rpx;
font-family:PingFang SC;
font-weight:400;
color:rgba(153,153,153,1);
}
.ware_detailC{
width:688rpx;
margin:26rpx auto 0;
}
.ware_detailImg{
width:688rpx;
height:470rpx;
}
.ware_detailImg image{
width:100%;
height:100%;
}
\ No newline at end of file
... ...