XiaoMo/JMApp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

0000

Browse Source
This commit is contained in:
XiaoMo
2025-04-05 23:47:00 +08:00
commit 8001f8eaeb
215 changed files with 14655 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
pages/mall/activeWindow/activeWindow.js Normal file
View File

@@ -0,0 +1,7 @@
Component({
properties: {
hotsale: Boolean
},
data: {},
methods: {}
});

4
pages/mall/activeWindow/activeWindow.json Normal file
View File

@@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

50
pages/mall/activeWindow/activeWindow.wxml Normal file
View File

@@ -0,0 +1,50 @@
<view>
<view class="alert-active" wx:if="{{hotsale}}">
<view class="inner">
<view class="hotsale-popup">
<image class="bg" mode="widthFix" src="/img/hotsale-bg.png"></image>
<view class="countdowns"> 距结束剩余 <view class="countdown">
<view class="time-item">82</view>
<view class="separator">天</view>
<view class="time-item">06</view>
<view class="separator">:</view>
<view class="time-item">17</view>
<view class="separator">:</view>
<view class="time-item">44</view>
<view class="separator"></view>
</view>
</view>
<view class="content">
<navigator class="hotsale-goods" url="/pages/goodsDetails/goodsDetails?id=795">
<view class="hd">
<view class="image-box __100">
<image mode="widthFix" src="http://q990.img.aiyichuan.com/urm_huodong/20200527/1590563222690.jpg?imageView2/1/w/400/h/400"></image>
</view>
</view>
<view class="bd">
<view class="_top">
<view>
<view class="title __small" style="-webkit-line-clamp: 2; height: 2.6em;">【蓬江】地道粤菜！138元起购「顺颐居酒家」3-4人套餐！盐焗鹅+生鱼捞起+生炒糯米饭.......</view>
</view>
</view>
<view class="_btm">
<view class="price">
<view class="now-price __normal">
<view class="symbol">¥</view>
<view class="buck">138</view>
<view class="qi"></view>
</view>
</view>
<view class="likes">5586人喜欢</view>
</view>
</view>
</navigator>
</view>
<navigator class="btn" url="/pages/goodsDetails/goodsDetails?id=795">立即抢购</navigator>
<view class="closebtn">
<view class="iconfont icon-close2">×</view>
</view>
</view>
</view>
</view>
</view>

250
pages/mall/activeWindow/activeWindow.wxss Normal file
View File

@@ -0,0 +1,250 @@
.alert-active {
background: rgba(0,0,0,.5);
height: 100vh;
left: 0;
position: fixed;
top: 0;
width: 100vw;
}
.alert-active .inner {
height: 74.667vw;
left: 50%;
margin: 0 auto;
position: fixed;
top: 50%;
transform: translate(-50%,-50%);
width: 82.4vw;
}
.content-inner {
position: relative;
}
.bg {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.hotsale-popup {
height: 74.667vw;
margin: 0 auto;
position: relative;
width: 82.4vw;
}
.hotsale-popup .bg {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.hotsale-popup .countdowns {
color: #2a2a2a;
font-family: DIN;
font-size: 3.2vw;
left: 0;
line-height: 4.267vw;
position: absolute;
text-align: center;
top: 18.667vw;
width: 100%;
}
.countdown {
display: inline-block;
}
.hotsale-popup .countdowns .time-item {
background-color: #cc5335;
border-radius: .533vw;
box-sizing: border-box;
color: #fff;
display: inline;
font-family: DIN;
font-size: 3.2vw;
height: 8.533vw;
line-height: 4.267vw;
margin-left: .533vw;
margin-right: .533vw;
min-width: 8.533vw;
padding: 0 .533vw;
}
.separator {
display: inline-block;
}
.hotsale-popup .content {
top: 27.2vw;
width: 74.667vw;
}
.hotsale-popup .btn,.hotsale-popup .content {
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
}
.hotsale-popup .btn {
bottom: 0;
color: #c8484c;
font-size: 4vw;
height: 12vw;
line-height: 12vw;
text-align: center;
width: 54.133vw;
}
.hotsale-goods {
background-color: #fff;
border: .533vw solid #c8484c;
border-radius: 2.133vw;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
padding: 2.667vw;
}
.hotsale-goods .hd {
-webkit-box-flex: 21.333vw;
border-radius: 1.067vw;
flex: 21.333vw 0 0;
margin: 0 2.667vw 0 0;
overflow: hidden;
width: 21.333vw;
}
.image-box,.image-box.__100 {
background-color: #ebebeb;
height: 0;
overflow: hidden;
position: relative;
}
.image-box.__100 {
padding-top: 100%;
}
.image-box image {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.hotsale-goods .bd {
-ms-flex-pack: justify;
-webkit-box-flex: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex: 1;
flex-direction: column;
margin: -.533vw 0 -.8vw;
}
.hotsale-goods .bd,.hotsale-goods .bd ._btm {
-webkit-box-pack: justify;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
}
.hotsale-goods .bd,.hotsale-goods .bd ._btm {
-ms-flex-pack: justify;
}
.title {
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
color: #222;
display: -webkit-box;
font-size: 3.733vw;
height: 2.6em;
line-height: 1.4em;
margin: 0 0 .2em;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
.hotsale-goods .bd ._btm {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.buck,.symbol {
display: inline-block;
}
.likes {
color: #969696;
font-size: 3.2vw;
}
.hotsale-goods .tag {
border-radius: .533vw;
display: inline-block;
font-size: 3.2vw;
line-height: 4.8vw;
padding: 0 1.333vw;
vertical-align: top;
}
.hotsale-goods .tip {
color: #969696;
display: inline-block;
font-size: 3.2vw;
}
.hotsale-goods .price {
color: #eb5252;
display: inline-block;
font-size: 3.2vw;
}
.now-price.__normal .buck {
display: inline-block;
font-size: 4.8vw;
}
.now-price .symbol {
display: inline-block;
margin: 0 .267vw 0 0;
}
.hotsale-popup .closebtn {
border: .4vw solid #f8f8f8;
border-radius: 50%;
color: #fff;
font-size: 4vw;
height: 8vw;
left: 50%;
line-height: 8vw;
margin: 5.333vw 0 0;
position: absolute;
text-align: center;
top: 100%;
transform: translateX(-50%);
width: 8vw;
}
.icon-close2 {
align-content: center;
align-items: center;
display: flex;
font-size: 7vw;
justify-content: center;
line-height: 7vw;
}

8
pages/mall/goodsList/goodsList.js Normal file
View File

@@ -0,0 +1,8 @@
Component({
properties: {
list: Array,
isdistance: Boolean
},
data: {},
methods: {}
});

4
pages/mall/goodsList/goodsList.json Normal file
View File

@@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

40
pages/mall/goodsList/goodsList.wxml Normal file
View File

@@ -0,0 +1,40 @@
<view>
<view class="match-wrap">
<view class="goods-match">
<navigator class="item" hoverClass="hover" url="/pages/goodsDetails/goodsDetails?id={{item.id}}" wx:for="{{list}}" wx:key="index">
<view class="hd">
<view class="image-box __100">
<image lazyLoad="true" src="{{item.image}}"></image>
</view>
<view class="issaled" wx:if="{{item.stock==0}}">
<image src="/img/issaled.png"></image>
</view>
</view>
<view class="bd">
<view class="{{isdistance?'isdistance bd_name':'bd_name'}} ">{{item.name}}</view>
<view class="bd_shop" wx:if="{{isdistance}}">
<view>{{item.companyname}}</view>
<view>{{item.distance}}km</view>
</view>
<view class="_btm">
<view class="_btm_lt">
<view class="bd_price">
<view class="now-price __normal">
<view class="symbol">¥</view>
<view class="buck">{{item.price_buck}}.</view>
<view class="cent">{{item.price_cent}}</view>
<view></view>
</view>
<view class="old" wx:if="{{item.marketprice}}">¥{{item.marketprice}}</view>
</view>
</view>
<view class="_btm_rt">
<view class="bd_btn" wx:if="{{item.stock>0}}">立即抢购</view>
<view class="bd_btn issele" wx:if="{{item.stock==0}}">已售罄</view>
</view>
</view>
</view>
</navigator>
</view>
</view>
</view>

218
pages/mall/goodsList/goodsList.wxss Normal file
View File

@@ -0,0 +1,218 @@
.match-wrap {
border-top: 2.667vw solid #f8f8f8;
}
.goods-match {
background-color: #fff;
border-radius: 2.133vw;
display: block;
padding: 12vw 3.6vw 3.6vw;
position: relative;
}
.goods-match .til {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #06a2b3;
border-radius: .533vw 2.933vw 2.933vw .533vw;
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
font-size: 3.2vw;
height: 5.867vw;
left: -.267vw;
padding-left: 1.467vw;
position: absolute;
top: 2.667vw;
width: 33.333vw;
}
.goods-match .til view {
margin-right: 1.333vw;
}
.goods-match .item {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin-bottom: 1rem;
}
.goods-match .hd {
-webkit-box-flex: 25.333vw;
border-radius: 1.6vw;
flex: 25.333vw 0 0;
height: 25.333vw;
overflow: hidden;
position: relative;
width: 25.333vw;
}
.image-box.__100 {
padding-top: 100%;
}
.image-box {
background-color: #ebebeb;
height: 0;
overflow: hidden;
position: relative;
}
.image-box image {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.goods-match .bd {
-webkit-box-flex: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
padding: 0 0 0 2.667vw;
}
.goods-match .bd_name {
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
color: #2a2a2a;
display: -webkit-box;
font-size: 3.733vw;
height: 16vw;
line-height: 5.333vw;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
.goods-match .bd_name.isdistance {
-webkit-line-clamp: 2;
height: 11vw;
}
.goods-match .bd ._btm {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.goods-match .bd ._btm_lt {
-webkit-box-flex: 1;
flex: 1;
}
.goods-match .bd_price {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.now-price {
color: #eb5252;
font-family: DIN;
font-size: 3.2vw;
line-height: 1.75em;
}
.goods-match .bd_price .old {
color: #9b9b9b;
font-family: DIN;
font-size: 3.2vw;
margin-left: 1.333vw;
text-decoration: line-through;
}
.goods-match .bd_btn {
background-color: #06a2b3;
border-radius: 3.333vw;
color: #fff;
font-size: 3.2vw;
height: 6.667vw;
line-height: 6.667vw;
padding: 0 3.6vw;
text-align: center;
}
.now-price .symbol {
display: inline;
margin: 0 .267vw 0 0;
}
.now-price.__normal .buck {
display: inline;
font-size: 4.8vw;
}
.cent {
display: inline;
}
.hot {
display: inline-block;
height: 13px;
margin-right: 4px;
width: 13px;
}
.goods-match .issele {
background: #9b9b9b;
}
.issaled {
align-items: center;
background: rgba(0,0,0,.4);
border-radius: 5px;
display: flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.issaled image {
height: 120rpx;
width: 120rpx;
}
.hover {
background: transparent;
}
.bd_shop {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
color: #9b9b9b;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
font-size: 3.2vw;
justify-content: space-between;
line-height: 4.533vw;
margin: 0 0 1.6vw;
}

235
pages/mall/mall.js Normal file
View File

@@ -0,0 +1,235 @@
var e = require("../../@babel/runtime/helpers/interopRequireDefault"), t = require("../../@babel/runtime/helpers/toConsumableArray"), a = e(require("../../@babel/runtime/regenerator")), n = require("../../@babel/runtime/helpers/slicedToArray"), o = require("../../@babel/runtime/helpers/asyncToGenerator"), r = (getApp(),
require("../../utils/login.js"));
Page({
data: {
showLoding: !0,
hotsale: !1,
banner: [],
customerService: [],
recommendedList: [],
lists: [],
share: {},
user: {},
tab: "new",
tabList: [ {
type: "new",
name: "最新开抢"
}, {
type: "hot",
name: "热门"
}, {
type: "shortrange",
name: "离我最近"
} ],
point: {},
loading: !1,
count: 0,
limit: 0,
page: 1
},
onLoad: function(e) {
this.pageStart();
},
onShow: function() {},
onPullDownRefresh: function() {
this.setData({
lists: [],
page: 1,
loading: !1
}), this.pageStart(), wx.stopPullDownRefresh();
},
onReachBottom: function() {
if (this.data.loading) return !1;
this.getgoodsList();
},
onShareAppMessage: function() {},
pageStart: function() {
this.getData(), this.getgoodsList();
},
getData: function() {
var e = this;
return o(a.default.mark(function t() {
var o, s;
return a.default.wrap(function(t) {
for (;;) switch (t.prev = t.next) {
case 0:
return e, t.prev = 1, t.next = 4, r.request(r.baseUrl + "shop/home", {}, !0);
case 4:
o = t.sent, (s = o.data).recommendedList.forEach(function(e) {
var t = e.price.split("."), a = n(t, 2);
e.price_buck = a[0], e.price_cent = a[1];
}), e.setData({
showLoding: !1,
banner: s.banner,
customerService: s.customerService,
recommendedList: s.recommendedList,
share: s.share,
user: s.user,
tabList: s.tab
}), t.next = 14;
break;
case 10:
t.prev = 10, t.t0 = t.catch(1), console.log(t.t0), e.setData({
showLoding: !1
});
case 14:
case "end":
return t.stop();
}
}, t, null, [ [ 1, 10 ] ]);
}))();
},
getgoodsList: function(e) {
var s = this;
return o(a.default.mark(function e() {
var o, i, c, u;
return a.default.wrap(function(e) {
for (;;) switch (e.prev = e.next) {
case 0:
if (o = s, !s.data.loading && 0 != s.data.page) {
e.next = 3;
break;
}
return e.abrupt("return", !1);
case 3:
return s.setData({
loading: !0
}), e.prev = 4, e.next = 7, r.request(r.baseUrl + "shop/home/shopList", {
type: s.data.tab,
point: {
lng: s.longitude,
lat: s.latitude
},
page: s.data.page
}, !0);
case 7:
i = e.sent, (c = i.data).data.forEach(function(e) {
var t = e.price.split("."), a = n(t, 2);
e.price_buck = a[0], e.price_cent = a[1];
}), u = c.data.length < c.limit ? 0 : s.data.page + 1, s.setData({
loading: !1,
lists: [].concat(t(s.data.lists), t(c.data)),
count: c.count,
page: u,
limit: c.limit
}), e.next = 18;
break;
case 14:
e.prev = 14, e.t0 = e.catch(4), console.log(e.t0), o.setData({
loading: !1
});
case 18:
case "end":
return e.stop();
}
}, e, null, [ [ 4, 14 ] ]);
}))();
},
latitude: null,
longitude: null,
changeTab: function(e) {
var t = this;
return o(a.default.mark(function n() {
var o, r;
return a.default.wrap(function(a) {
for (;;) switch (a.prev = a.next) {
case 0:
if (o = e.currentTarget.dataset.tab, t, "shortrange" != o) {
a.next = 20;
break;
}
return a.prev = 3, a.next = 6, t.getlocation();
case 6:
if (r = a.sent, console.log("result:", r), !r) {
a.next = 14;
break;
}
t.latitude = r.latitude, t.longitude = r.longitude, t.setData({
tab: o
}), a.next = 15;
break;
case 14:
return a.abrupt("return", !1);
case 15:
a.next = 20;
break;
case 17:
a.prev = 17, a.t0 = a.catch(3), console.log(a.t0);
case 20:
t.setData({
tab: o,
lists: [],
page: 1,
loading: !1
}), t.getgoodsList();
case 22:
case "end":
return a.stop();
}
}, n, null, [ [ 3, 17 ] ]);
}))();
},
getlocation: function() {
var e = this;
return new Promise(function(t, a) {
wx.getLocation({
type: "wgs84",
success: function(e) {
e.latitude, e.longitude;
t(e);
},
fail: function(a) {
wx.showModal({
title: "用户未授权",
content: "请开启相关权限,以便更好使用小程序哦！",
showCancel: !0,
success: function(a) {
a.confirm ? wx.openSetting({
success: function(a) {
console.log("authSetting", a), a.authSetting ? wx.chooseLocation({
success: function(a) {
e.setData({
receiver_address: a.name
}), "" == a.name ? wx.showToast({
title: "未选择位置",
icon: "none",
duration: 2e3
}) : (console.log("res ok ", a), t(a));
},
fail: function(a) {
e.showLocationFail(), t(!1);
}
}) : (e.showLocationFail(), t(!1));
}
}) : a.cancel;
},
fail: function(a) {
e.showLocationFail(), t(!1);
}
});
}
});
});
},
showLocationFail: function() {
wx.showToast({
title: "位置失败",
icon: "none",
duration: 1e3
});
}
});

12
pages/mall/mall.json Normal file
View File

@@ -0,0 +1,12 @@
{
"navigationBarTitleText": "聚美汽服",
"navigationBarBackgroundColor": "#06acb3",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": true,
"usingComponents": {
"active-window": "./activeWindow/activeWindow",
"popular-recommendation": "./popularRecommendation/popularRecommendation",
"goods-list": "./goodsList/goodsList",
"page-loding": "../../template/pageLoding/pageLoding"
}
}

48
pages/mall/mall.wxml Normal file
View File

@@ -0,0 +1,48 @@
<view class="mall-container">
<page-loding wx:if="{{showLoding}}"></page-loding>
<active-window hotsale="{{hotsale}}"></active-window>
<view class="search">
<navigator class="hd-search" url="/pages/goodsSearch/goodsSearch">
<image src="/img/search.png"></image> 搜索好物</navigator>
</view>
<view class="page-header">
<view class="user-info">
<navigator class="not-login" hoverClass="hover" url="/pages/login/login" wx:if="{{user.uid==0}}">
<image class="avatar"></image>点击登录 </navigator>
<view class="is-login" wx:if="{{user.uid>0}}">
<navigator class="l" hoverClass="hover" url="/pages/user/user">
<image class="avatar" src="{{user.avatar}}"></image>{{user.nickname||user.username}} </navigator>
<navigator class="r" hoverClass="hover" url="/pages/orderList/orderList?tab=all">
<view class="num">{{user.ordernum}}</view>
<view>订单</view>
</navigator>
</view>
</view>
</view>
<view class="module-wrap" wx:if="{{banner.length>0}}">
<view class="ad-wrap">
<view class="list">
<swiper>
<swiper-item wx:for="{{banner}}" wx:key="index">
<view class="item">
<navigator class="inner" url="/{{item.link}}">
<image src="{{item.image}}"></image>
</navigator>
</view>
</swiper-item>
</swiper>
</view>
</view>
</view>
<popular-recommendation list="{{recommendedList}}" wx:if="{{recommendedList.length>0}}"></popular-recommendation>
<view class="module-wrap">
<view class="recommend-tabs">
<view class="item {{tab==item.type?'active':''}}" wx:for="{{tabList}}" wx:key="index">
<view bindtap="changeTab" data-tab="{{item.type}}" style="position: relative;">{{item.name}}</view>
</view>
</view>
<goods-list isdistance="{{tab=='shortrange'?true:false}}" list="{{lists}}"></goods-list>
<view class="loading" wx:if="{{loading}}">正在加载...</view>
<view class="van-list__finished-text" wx:if="{{page==0&&!loading}}">没有更多了</view>
</view>
</view>

198
pages/mall/mall.wxss Normal file
View File

@@ -0,0 +1,198 @@
.mall-container {
position: relative;
}
.page-header {
background: #06acb3;
}
.search {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-box-align: center;
-ms-flex-align: center;
background: #06acb3;
box-sizing: border-box;
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
left: 0;
padding: 2.667vw 4vw;
position: sticky;
top: 0;
width: 100%;
z-index: 3;
}
.hd-search,.search {
align-items: center;
}
.hd-search {
-webkit-box-flex: 1;
background-color: #fff;
border-radius: 8vw;
color: #787878;
display: inline-flex;
flex: 1;
font-size: 3.2vw;
height: 8vw;
justify-content: center;
line-height: 8vw;
padding: 0 4vw;
text-align: center;
}
.hd-search image {
height: 32rpx;
margin: 0 1.333vw 0 0;
width: 32rpx;
}
.user-info {
box-sizing: border-box;
color: #fff;
padding: 4vw;
width: 100vw;
}
.user-info .not-login {
align-items: center;
box-sizing: border-box;
color: #fff;
display: flex;
font-size: 15px;
width: 100%;
}
.user-info .avatar {
border: 1px solid #fff;
border-radius: 50%;
flex: 0 0 40px;
height: 40px;
margin-right: 8px;
width: 40px;
}
.user-info .is-login {
display: flex;
justify-content: space-between;
width: 100%;
}
.user-info .is-login .l {
align-items: center;
display: inline-flex;
flex: 1;
justify-content: flex-start;
padding-right: 20px;
}
.user-info .is-login .r {
align-items: flex-end;
display: inline-flex;
flex-direction: column;
font-size: 10px;
justify-content: flex-end;
}
.user-info .is-login .r .num {
font-family: Impact,Haettenschweiler,Arial Narrow Bold,sans-serif;
font-size: 18px;
font-weight: 400;
margin-bottom: 2px;
}
.module-wrap {
border-color: #f4f4f4;
margin: 0 0 2.667vw;
padding: 5.333vw 0 0;
}
.ad-wrap {
margin: -1.333vw 0 -2.667vw;
padding: 0 4vw;
}
.ad-wrap .list1 .item:not(:last-child) {
margin: 0 0 2.667vw;
}
.ad-wrap .inner {
border-radius: .533vw;
display: block;
overflow: hidden;
position: relative;
}
.ad-wrap .inner image {
display: block;
height: 43.49vw;
width: 100%;
}
.recommend-tabs {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
background-color: #fff;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
height: 12.8vw;
justify-content: space-between;
left: 0;
padding: 2.667vw 4vw;
position: sticky;
top: 13.333vw;
z-index: 2;
}
.recommend-tabs .item {
color: #4a4a4a;
font-size: 4vw;
line-height: 6.133vw;
padding: 0 2.667vw;
position: relative;
transition: all .3s;
}
.recommend-tabs .item.active {
color: #2a2a2a;
font-size: 5.333vw;
font-weight: 500;
line-height: 7.467vw;
}
.recommend-tabs .item.active:before {
background: -webkit-gradient(linear,left top,left bottom,from(#efefef),to(#f8864a));
background: linear-gradient(180deg,#efefef,#f8864a);
border-radius: 1.067vw;
bottom: 1.067vw;
content: "";
height: 1.067vw;
left: 2.667vw;
position: absolute;
right: 2.667vw;
z-index: -1;
}
.loading,.van-list__error-text,.van-list__finished-text,.van-list__loading,.van-pull-refresh__head {
background: #fafafa;
color: #969799;
font-size: 14px;
line-height: 50px;
text-align: center;
}
swiper {
height: 43.49vw;
width: 100%;
}

7
pages/mall/popularRecommendation/popularRecommendation.js Normal file
View File

@@ -0,0 +1,7 @@
Component({
properties: {
list: Array
},
data: {},
methods: {}
});

4
pages/mall/popularRecommendation/popularRecommendation.json Normal file
View File

@@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

53
pages/mall/popularRecommendation/popularRecommendation.wxml Normal file
View File

@@ -0,0 +1,53 @@
<view class="module-wrap">
<view class="m-title">
<view class="hd">
<view class="hd_name">爆款推荐</view>
</view>
<view class="bd"></view>
<view class="fd"></view>
</view>
<view class="big-list">
<view class="item" wx:for="{{list}}" wx:key="index">
<navigator class="big-item" hoverClass="hover" url="/pages/goodsDetails/goodsDetails?id={{item.id}}">
<view class="hd">
<view class="image-box __56">
<image lazy="loaded" src="{{item.image}}"></image>
</view>
<view class="issaled" wx:if="{{item.stock==0}}">
<image src="/img/issaled.png"></image>
</view>
<view class="hd_sale">已售 {{item.num_buy}}</view>
</view>
<view class="bd">
<view style="overflow: hidden;">
<view class="title __normal" style="-webkit-line-clamp: 2;">{{item.name}}</view>
</view>
<view class="__flex">
<view class="bd_price">
<view class="now-price __large">
<view class="symbol">¥</view>
<view class="buck">{{item.price_buck}}.</view>
<view class="cent">{{item.price_cent}}</view>
<view class="qi"></view>
</view>
<view class="old-price" style="margin: 0px 0px 0px 8px;" wx:if="{{item.marketprice}}">¥{{item.marketprice}}</view>
<view style="margin: 0px 0px 0px 10px;" wx:if="{{item.discount}}">
<view class="list-discount">
<view class="hd">
<view class="tri"></view>
</view>
<view class="bd">
<view class="num">{{item.discount}}</view>折 </view>
</view>
</view>
</view>
<view>
<button class="button __large" wx:if="{{item.stock>0}}">立即购买</button>
<button class="button __large issele" wx:if="{{item.stock==0}}">已售罄</button>
</view>
</view>
</view>
</navigator>
</view>
</view>
</view>

306
pages/mall/popularRecommendation/popularRecommendation.wxss Normal file
View File

@@ -0,0 +1,306 @@
.module-wrap {
border-color: #f4f4f4;
margin: 0 0 2.667vw;
padding: 5.333vw 0 0;
}
.m-title {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
color: #2a2a2a;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
font-size: 3.2vw;
line-height: 1;
padding: 0 4vw 5.333vw;
}
.m-title .hd_name {
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
display: -webkit-box;
font-size: 5.333vw;
font-weight: 500;
height: 1.2em;
line-height: 1.2em;
margin: -.1em 0;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
.m-title .bd {
-webkit-box-flex: 1;
flex: 1;
padding: 0 2.667vw;
}
.m-title .fd {
-ms-flex-negative: 0;
flex-shrink: 0;
}
.m-title .fd_more {
color: #aaa;
margin: -2.667vw 0;
padding: 2.667vw 0;
}
.big-list {
padding: 0 4vw;
}
.big-list .item:not(:last-child) {
margin: 0 0 4.8vw;
}
.big-item {
display: block;
}
.big-item .hd {
border-radius: 1.333vw;
overflow: hidden;
position: relative;
}
.image-box.__56 {
padding-top: 56.25%;
}
.image-box {
background-color: #ebebeb;
height: 0;
overflow: hidden;
position: relative;
}
.image-box image {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.big-item .hd_sale {
background-color: rgba(0,0,0,.5);
border-radius: 0 3.2vw 0 0;
bottom: 0;
color: #fff;
font-size: 3.2vw;
height: 5.867vw;
left: 0;
line-height: 5.867vw;
padding: 0 2.133vw;
position: absolute;
}
.big-item .bd {
padding: 2.133vw 0 0;
}
.big-item .bd_shop {
color: #9b9b9b;
font-size: 3.2vw;
line-height: 4.533vw;
margin: 0 0 1.6vw;
}
.title.__normal {
font-size: 4vw;
}
.title {
-webkit-box-orient: vertical;
color: #222;
display: -webkit-box;
line-height: 1.4em;
margin: 0 0 .2em;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
.big-item .bd .__flex,.big-item .bd_shop {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
}
.big-item .bd .__flex {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
line-height: 1;
margin: .8vw 0 0;
}
.vip-price-wrap {
height: 3.467vw;
}
.vip-price {
align-items: center;
background-color: #d7bc9f;
border-radius: 3.467vw;
color: #3d342d;
display: flex;
font-size: 2.667vw;
height: inherit;
line-height: 3.467vw;
overflow: hidden;
vertical-align: top;
}
.vip-price .hd {
background-color: #40322f;
border-radius: 0;
color: #d7bc9f;
display: inline-block;
padding: 0 .8vw;
}
.vip-price .bd {
display: inline-block;
padding: 0 1.867vw;
}
.big-item .bd_price {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.now-price.__large {
display: inline;
font-size: 3.467vw;
}
.now-price {
color: #eb5252;
font-family: DIN;
font-size: 3.2vw;
line-height: 1.75em;
}
.now-price>view {
display: inline;
}
.now-price.__large .buck {
font-size: 5.333vw;
}
.old-price {
color: #9b9b9b;
display: inline;
font-family: DIN;
font-size: 3.2vw;
text-decoration: line-through;
}
.list-discount {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
font-size: 2.667vw;
height: 4.267vw;
line-height: 4.267vw;
overflow: hidden;
}
.list-discount .hd {
border-radius: 0;
height: 4.267vw;
width: 2.4vw;
}
.list-discount .tri {
background-color: #06acb3;
height: 4.267vw;
transform: translateY(50%) rotate(-45deg);
transform-origin: 0 0;
width: 4.267vw;
}
.list-discount .bd {
background-color: #06acb3;
border-radius: 0 .533vw .533vw 0;
color: #fff;
padding: 0 .533vw 0 0;
position: relative;
}
.list-discount .num {
display: inline;
font-family: DIN;
font-size: 2.933vw;
}
.button.__large {
height: 7.467vw;
min-width: 18.667vw;
}
.button {
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
background-color: #06acb3;
border-radius: 6.667vw;
box-sizing: border-box;
color: #fff;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
font-size: 3.2vw;
padding: 0 1.6vw;
text-align: center;
}
.button,.issaled {
align-items: center;
justify-content: center;
}
.issaled {
background: rgba(0,0,0,.4);
border-radius: 5px;
display: flex;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.issaled image {
height: 120px;
width: 120px;
}
.issele {
background: #9b9b9b;
}
.hover {
background: transparent;
}