Skip to content

C
ChengjingPremiumMember
Commit 72060550 authored by 谢卓城's avatar 谢卓城
Browse files
Options

完善:购物车与首页部分逻辑,新增:搜索,结算

parent 1fca1469
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1245 additions and 189 deletions
CJPremiumMember/app.json
View file @ 72060550
......@@ -2,10 +2,12 @@
"pages":[
"pages/Home/index",
"pages/Cart/index",
"pages/Search/index",
"pages/Order/index",
"pages/index/index",
"pages/logs/logs"
],
"entryPagePath": "pages/Cart/index",
"entryPagePath": "pages/Home/index",
"tabBar": {
"list": [{
"pagePath": "pages/Home/index",
......
CJPremiumMember/pages/Cart/index.js
View file @ 72060550
......@@ -5,10 +5,14 @@ Page({
* 页面的初始数据
*/
data: {
goods:[],
goodsList:[],
loading:true,
selectCount:0,
selectGoodsSource:[],
imageUrl:'../../image/640.jpeg',
imageIcon:'../../image/group_portrait.png',
totalPrice:100,
isSelectAll:false,
totalPrice:0,
slideButtons: [{
type: 'warn',
text: '删除',
......@@ -16,76 +20,244 @@ Page({
src: 'icon_del.svg', // icon的路径
}],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let goods = [];
for (let index = 0; index < 20; index++) {
onLoad: function () {
setTimeout(() => {
this.setData({
loading:false
})
this.loadNewData()
}, 2000)
},
loadMoreData() {
let goods = this.data.goodsList;
for (let index = 0; index < 7; index++) {
goods.push({
isSelect:(index % 2),
isSelect:false,
goodsPrice:(199 % 3)+index,
goodsCount:index,
goodsUrl:(index % 2)?'../../image/plus_dark.png':'../../image/640.jpeg',
goodsCount:index+1,
goodsUrl:(index % 2)?'../../image/group_portrait.png':'../../image/640.jpeg',
goodsName:'90分户外休闲中长厚款鹅绒羽绒服' + index,
goodsSpec:'XL;黑色 2' + index
})
}
this.setData({
goods:goods
goodsList:goods
})
wx.stopPullDownRefresh()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
loadNewData() {
this.data.goodsList = []
this.loadMoreData()
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
orderAction(e) {
wx.navigateTo({
url: '../Order/index',
})
// let selectCount = this.data.selectCount
// if (selectCount <= 0) {
// return
// }
// let totalPrice = this.data.totalPrice
// wx.showModal({
// content: '购买'+selectCount+'件商品\n'+'总价为：'+totalPrice+'的商品',
// success: (res) => {
// if (res.confirm) {
// this.showToast("购买成功!!")
// }
// }
// })
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
this.loadNewData()
this.setData({
isSelectAll:false,
selectGoodsSource: [],
totalPrice: 0,
selectCount: 0
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
// this.loadMoreData()
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
delectGoods(index) {
if (index >= this.data.goodsList.length) {
console.log('大于数量', index)
return
}
var goodsList = this.data.goodsList
let goods = goodsList[index]
goodsList.splice(index, 1)
let selectGoodsSource = this.data.selectGoodsSource.filter(item => {
if (item.goodsName != goods.goodsName) {
return item
}
})
var totalPrice = this.data.totalPrice
var selectCount = this.data.selectCount;
if (goods.isSelect) {
totalPrice = totalPrice - (goods.goodsCount * goods.goodsPrice)
selectCount = selectGoodsSource.length
}
var isSelectAll = this.data.isSelectAll
if (selectGoodsSource.length == 0) {
isSelectAll = false
}
this.setData({
isSelectAll:isSelectAll,
goodsList:goodsList,
selectGoodsSource: selectGoodsSource,
totalPrice: totalPrice,
selectCount: selectCount
})
},
slideButtonTap(e) {
console.log('slide button tap', e.detail)
const index = e.currentTarget.dataset.index;
this.delectGoods(index);
},
allSelectAction() {
var isSelectAll = !this.data.isSelectAll
var selectGoodsSource = []
if (!isSelectAll) {
this.data.totalPrice = 0
for (let i = 0; i < this.data.goodsList.length; i++) {
let goods = this.data.goodsList[i]
goods.isSelect = isSelectAll;
}
}else{
var unSelectGoods = this.data.goodsList.filter(goods => goods.isSelect != isSelectAll)
for (let i = 0; i < unSelectGoods.length; i++) {
let goods = unSelectGoods[i]
goods.isSelect = isSelectAll;
this.data.totalPrice = this.data.totalPrice + (goods.goodsPrice * goods.goodsCount)
selectGoodsSource.push(goods)
}
}
let goodsList = this.data.goodsList
let selectCount = selectGoodsSource.length
const totalPrice = this.data.totalPrice
this.setData({
isSelectAll: isSelectAll,
selectGoodsSource: selectGoodsSource,
goodsList: goodsList,
selectCount:selectCount,
totalPrice: totalPrice,
})
},
selectGoodsAction(e) {
const index = e.currentTarget.dataset.index;
const goods = this.data.goodsList[index]
goods.isSelect = !goods.isSelect
var selectGoodsSource = this.data.selectGoodsSource
var totalPrice = this.data.totalPrice
if (goods.isSelect) {
totalPrice = totalPrice + (goods.goodsCount * goods.goodsPrice)
selectGoodsSource.push(goods)
}else{
totalPrice = totalPrice - (goods.goodsCount * goods.goodsPrice)
selectGoodsSource = this.data.selectGoodsSource.filter(item => {
if (item.goodsName != goods.goodsName) {
return item
}
})
}
let goodsList = this.data.goodsList
let isSelectAll = selectGoodsSource.length == goodsList.length
this.setData({
isSelectAll: isSelectAll,
selectGoodsSource: selectGoodsSource,
goodsList: goodsList,
selectCount:selectGoodsSource.length,
totalPrice: totalPrice,
})
},
addBtnTap(e) {
let goodsList = this.data.goodsList
const index = e.currentTarget.dataset.index;
const goods = goodsList[index]
goods.goodsCount += 1
let totalPrice = this.data.totalPrice
totalPrice = totalPrice + goods.goodsPrice
this.setData({
goodsList: goodsList,
totalPrice: totalPrice
})
},
inputAction(e) {
const goodsCount = e.detail.value;
if (goodsCount >= 99) {
wx.showToast({
title: '超出库存数！',
duration: 1500,
complete: ()=>{
console.log('inputAction tap', e)
let goodsList = this.data.goodsList
this.setData({
goodsList:goodsList
})
}
});
return
}
const index = e.currentTarget.dataset.index;
this.data.goodsList[index].goodsCount = goodsCount
this.setData({
goodsList:this.data.goodsList
})
console.log('inputAction tap', e)
},
reduceBtnTap(e) {
let goodsList = this.data.goodsList
const index = e.currentTarget.dataset.index;
const goods = goodsList[index]
const number = goods.goodsCount-1
if (number <= 0) {
// 弹出删除确认
wx.showModal({
content: '确定要删除该商品吗？',
success: (res) => {
if (res.confirm) {
this.delectGoods(index)
}
}
})
return
}
let totalPrice = this.data.totalPrice
totalPrice = totalPrice - goods.goodsPrice
goods.goodsCount = number
this.setData({
goodsList: goodsList,
totalPrice: totalPrice
})
},
showToast(text) {
wx.showToast({
title: text,
duration: 1500
});
}
})
\ No newline at end of file
CJPremiumMember/pages/Cart/index.json
View file @ 72060550
......@@ -3,5 +3,7 @@
"mp-cells": "weui-miniprogram/cells/cells",
"mp-cell": "weui-miniprogram/cell/cell",
"mp-slideview": "weui-miniprogram/slideview/slideview"
}
},
"enablePullDownRefresh": true,
"navigationBarTitleText": "购物车"
}
\ No newline at end of file
CJPremiumMember/pages/Cart/index.skeleton.wxml 0 → 100644
View file @ 72060550
This diff is collapsed.
CJPremiumMember/pages/Cart/index.skeleton.wxss 0 → 100644
View file @ 72060550
/*
此文件为开发者工具生成，生成时间: 2020/12/4 下午4:29:30
在 /Users/purewin/Documents/Company/ChengjingPremiumMember/CJPremiumMember/pages/Cart/index.wxss 中引入样式
```
@import "./index.skeleton.wxss";
```
更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
*/
.sk-transparent {
color: transparent !important;
}
.sk-text-14-5833-165 {
background-image: linear-gradient(transparent 14.5833%, #EEEEEE 0%, #EEEEEE 85.4167%, transparent 0%) !important;
background-size: 100% 36.7058rpx;
position: relative !important;
}
.sk-text {
background-origin: content-box !important;
background-clip: content-box !important;
background-color: transparent !important;
color: transparent !important;
background-repeat: repeat-y !important;
}
.sk-text-14-5834-4 {
background-image: linear-gradient(transparent 14.5834%, #EEEEEE 0%, #EEEEEE 85.4166%, transparent 0%) !important;
background-size: 100% 33.8824rpx;
position: relative !important;
}
.sk-text-14-5834-683 {
background-image: linear-gradient(transparent 14.5834%, #EEEEEE 0%, #EEEEEE 85.4166%, transparent 0%) !important;
background-size: 100% 33.8824rpx;
position: relative !important;
}
.sk-text-25-0000-944 {
background-image: linear-gradient(transparent 25.0000%, #EEEEEE 0%, #EEEEEE 75.0000%, transparent 0%) !important;
background-size: 100% 48.0000rpx;
position: relative !important;
}
.sk-text-25-0000-667 {
background-image: linear-gradient(transparent 25.0000%, #EEEEEE 0%, #EEEEEE 75.0000%, transparent 0%) !important;
background-size: 100% 48.0000rpx;
position: relative !important;
}
.sk-text-14-5833-599 {
background-image: linear-gradient(transparent 14.5833%, #EEEEEE 0%, #EEEEEE 85.4167%, transparent 0%) !important;
background-size: 100% 36.7058rpx;
position: relative !important;
}
.sk-text-14-5834-923 {
background-image: linear-gradient(transparent 14.5834%, #EEEEEE 0%, #EEEEEE 85.4166%, transparent 0%) !important;
background-size: 100% 33.8824rpx;
position: relative !important;
}
.sk-text-14-5834-562 {
background-image: linear-gradient(transparent 14.5834%, #EEEEEE 0%, #EEEEEE 85.4166%, transparent 0%) !important;
background-size: 100% 33.8824rpx;
position: relative !important;
}
.sk-text-25-0000-370 {
background-image: linear-gradient(transparent 25.0000%, #EEEEEE 0%, #EEEEEE 75.0000%, transparent 0%) !important;
background-size: 100% 48.0000rpx;
position: relative !important;
}
.sk-text-25-0000-495 {
background-image: linear-gradient(transparent 25.0000%, #EEEEEE 0%, #EEEEEE 75.0000%, transparent 0%) !important;
background-size: 100% 48.0000rpx;
position: relative !important;
}
.sk-text-14-5833-586 {
background-image: linear-gradient(transparent 14.5833%, #EEEEEE 0%, #EEEEEE 85.4167%, transparent 0%) !important;
background-size: 100% 36.7058rpx;
position: relative !important;
}
.sk-text-14-5834-265 {
background-image: linear-gradient(transparent 14.5834%, #EEEEEE 0%, #EEEEEE 85.4166%, transparent 0%) !important;
background-size: 100% 33.8824rpx;
position: relative !important;
}
.sk-text-14-5834-575 {
background-image: linear-gradient(transparent 14.5834%, #EEEEEE 0%, #EEEEEE 85.4166%, transparent 0%) !important;
background-size: 100% 33.8824rpx;
position: relative !important;
}
.sk-text-25-0000-200 {
background-image: linear-gradient(transparent 25.0000%, #EEEEEE 0%, #EEEEEE 75.0000%, transparent 0%) !important;
background-size: 100% 48.0000rpx;
position: relative !important;
}
.sk-text-25-0000-780 {
background-image: linear-gradient(transparent 25.0000%, #EEEEEE 0%, #EEEEEE 75.0000%, transparent 0%) !important;
background-size: 100% 48.0000rpx;
position: relative !important;
}
.sk-text-14-5833-395 {
background-image: linear-gradient(transparent 14.5833%, #EEEEEE 0%, #EEEEEE 85.4167%, transparent 0%) !important;
background-size: 100% 36.7058rpx;
position: relative !important;
}
.sk-text-14-5834-864 {
background-image: linear-gradient(transparent 14.5834%, #EEEEEE 0%, #EEEEEE 85.4166%, transparent 0%) !important;
background-size: 100% 33.8824rpx;
position: relative !important;
}
.sk-text-14-5834-68 {
background-image: linear-gradient(transparent 14.5834%, #EEEEEE 0%, #EEEEEE 85.4166%, transparent 0%) !important;
background-size: 100% 33.8824rpx;
position: relative !important;
}
.sk-text-25-0000-406 {
background-image: linear-gradient(transparent 25.0000%, #EEEEEE 0%, #EEEEEE 75.0000%, transparent 0%) !important;
background-size: 100% 48.0000rpx;
position: relative !important;
}
.sk-text-25-0000-969 {
background-image: linear-gradient(transparent 25.0000%, #EEEEEE 0%, #EEEEEE 75.0000%, transparent 0%) !important;
background-size: 100% 48.0000rpx;
position: relative !important;
}
.sk-text-14-5833-511 {
background-image: linear-gradient(transparent 14.5833%, #EEEEEE 0%, #EEEEEE 85.4167%, transparent 0%) !important;
background-size: 100% 36.7058rpx;
position: relative !important;
}
.sk-text-14-5834-425 {
background-image: linear-gradient(transparent 14.5834%, #EEEEEE 0%, #EEEEEE 85.4166%, transparent 0%) !important;
background-size: 100% 33.8824rpx;
position: relative !important;
}
.sk-text-14-5834-813 {
background-image: linear-gradient(transparent 14.5834%, #EEEEEE 0%, #EEEEEE 85.4166%, transparent 0%) !important;
background-size: 100% 33.8824rpx;
position: relative !important;
}
.sk-text-25-0000-832 {
background-image: linear-gradient(transparent 25.0000%, #EEEEEE 0%, #EEEEEE 75.0000%, transparent 0%) !important;
background-size: 100% 48.0000rpx;
position: relative !important;
}
.sk-text-25-0000-471 {
background-image: linear-gradient(transparent 25.0000%, #EEEEEE 0%, #EEEEEE 75.0000%, transparent 0%) !important;
background-size: 100% 48.0000rpx;
position: relative !important;
}
.sk-text-14-5833-397 {
background-image: linear-gradient(transparent 14.5833%, #EEEEEE 0%, #EEEEEE 85.4167%, transparent 0%) !important;
background-size: 100% 36.7058rpx;
position: relative !important;
}
.sk-text-14-5834-432 {
background-image: linear-gradient(transparent 14.5834%, #EEEEEE 0%, #EEEEEE 85.4166%, transparent 0%) !important;
background-size: 100% 33.8824rpx;
position: relative !important;
}
.sk-text-14-5834-800 {
background-image: linear-gradient(transparent 14.5834%, #EEEEEE 0%, #EEEEEE 85.4166%, transparent 0%) !important;
background-size: 100% 33.8824rpx;
position: relative !important;
}
.sk-text-25-0000-196 {
background-image: linear-gradient(transparent 25.0000%, #EEEEEE 0%, #EEEEEE 75.0000%, transparent 0%) !important;
background-size: 100% 48.0000rpx;
position: relative !important;
}
.sk-text-25-0000-366 {
background-image: linear-gradient(transparent 25.0000%, #EEEEEE 0%, #EEEEEE 75.0000%, transparent 0%) !important;
background-size: 100% 48.0000rpx;
position: relative !important;
}
.sk-text-18-7500-125 {
background-image: linear-gradient(transparent 18.7500%, #EEEEEE 0%, #EEEEEE 81.2500%, transparent 0%) !important;
background-size: 100% 51.2000rpx;
position: relative !important;
}
.sk-text-36-0000-811 {
background-image: linear-gradient(transparent 36.0000%, #EEEEEE 0%, #EEEEEE 64.0000%, transparent 0%) !important;
background-size: 100% 100.0000rpx;
position: relative !important;
}
.sk-text-34-0000-438 {
background-image: linear-gradient(transparent 34.0000%, #EEEEEE 0%, #EEEEEE 66.0000%, transparent 0%) !important;
background-size: 100% 100.0000rpx;
position: relative !important;
}
.sk-image {
background: #EFEFEF !important;
}
.sk-pseudo::before, .sk-pseudo::after {
background: #EFEFEF !important;
background-image: none !important;
color: transparent !important;
border-color: transparent !important;
}
.sk-pseudo-rect::before, .sk-pseudo-rect::after {
border-radius: 0 !important;
}
.sk-pseudo-circle::before, .sk-pseudo-circle::after {
border-radius: 50% !important;
}
.sk-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: transparent;
}
CJPremiumMember/pages/Cart/index.wxml
View file @ 72060550
<!--pages/Cart/index.wxml-->
<view class="container" hover-class="none" hover-stop-propagation="false">
<mp-cells ext-class="table-view">
<block wx:for="{{goods}}" wx:key="itme" wx:for-item="good">
<mp-slideview show="{{false}}" buttons="{{slideButtons}}" bindbuttontap="slideButtonTap">
<mp-cell hover>
<view class="goods-view">
<image class="goods-select-icon" src="{{good.isSelect?'../../image/check_f.png':'../../image/check_t.png'}}" lazy-load="false" binderror="" bindload=""/>
<image class="goods-icon" src="{{imageIcon}}" mode="aspectFill" lazy-load="false" binderror="" bindload=""/>
<block wx:for="{{goodsList}}" wx:key="index" wx:for-item="goods">
<mp-slideview show="{{false}}" buttons="{{slideButtons}}" bindbuttontap="slideButtonTap" data-index="{{index}}">
<mp-cell>
<view class="goods-container-view">
<view class="goods-view" bindtap="selectGoodsAction" data-index="{{index}}">
<image class="goods-select-icon" src="{{goods.isSelect?'../../image/check_t.png ':'../../image/check_f.png'}}" lazy-load="false"/>
<image class="goods-icon" src="{{goods.goodsUrl}}" mode="aspectFill" lazy-load="false"/>
</view>
<view class="goods-content" hover-class="none" hover-stop-propagation="false">
<text class="goods-name" selectable="false" space="false" decode="false">{{goods.goodsName}}</text>
<text class="goods-spec" selectable="false" space="false" decode="false">{{goods.goodsSpec}}</text>
<text class="goods-price" selectable="false" space="false" decode="false">{{goods.goodsPrice}}</text>
</view>
<view class="buy-num">
<view class="reduce-btn {{goods.goodsCount==0? 'disabled' : ''}}" catchtap="reduceBtnTap" data-index="{{index}}">-</view>
<input type="number" value="{{goods.goodsCount}}" data-index="{{index}}" bindinput="inputAction"/>
<view class="add-btn {{goods.goodsCount==99? 'disabled' : ''}}" catchtap="addBtnTap" data-index="{{index}}">+</view>
</view>
</view>
<view slot="footer">说明文字</view>
</mp-cell>
</mp-slideview>
</block>
</mp-cells>
<view class="shopping-cart-counter-view" hover-class="none" hover-stop-propagation="false">
<view class="all-select-view" hover-class="none" hover-stop-propagation="false">
<image class="select-button" src="../../image/check_f.png" />
<text class="" selectable="false" space="false" decode="false">已选择</text>
<view class="all-select-view" hover-class="none" hover-stop-propagation="false" bindtap="allSelectAction">
<image class="select-button" src="{{isSelectAll?'../../image/check_t.png ':'../../image/check_f.png'}}" />
<text selectable="false" space="false" decode="false">已选择</text>
</view>
<view class="left-price">
<view class="price-view">
<view class="total" hidden="{{noSelect}}">合计：¥ {{totalPrice}}</view>
</view>
<view class="to-pay-btn">
<navigator url="">去结算</navigator>
<view class="to-pay-btn" bindtap="orderAction">
<view >去结算{{selectCount==0?'':'(' + selectCount + ')'}}</view>
</view>
</view>
</view>
\ No newline at end of file
</view>
<import src="index.skeleton.wxml"/>
<template is="skeleton" wx-if="{{loading}}" />
\ No newline at end of file
CJPremiumMember/pages/Cart/index.wxss
View file @ 72060550
/* pages/Cart/index.wxss */
@import "./index.skeleton.wxss";
.container {
/* position: relative; */
}
.cell-view {
/* height: 100px; */
/* height: 100rpx; */
}
.table-view {
padding-bottom: 98rpx;
}
.goods-container-view {
display: flex;
justify-content: flex-start;
}
.goods-container-view .goods-content {
margin-left: 20rpx;
}
.goods-container-view .goods-content text {
display: block;
margin-bottom: 10rpx;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.goods-container-view .goods-content .goods-name {
font-size: 26rpx;
color: rgb(33, 33, 33);
}
.goods-container-view .goods-content .goods-spec {
font-size: 24rpx;
color: rgb(153, 153, 153);
}
.goods-container-view .goods-content .goods-price {
font-size: 24rpx;
color: rgb(40, 40, 40);
}
.goods-view {
display: flex;
align-items: center;
}
.goods-select-view {
height: 100%;
}
.goods-select-icon {
width: 18px;
height: 18px;
width: 36rpx;
height: 36rpx;
}
.goods-icon {
margin-left: 5px;
width: 75px;
height: 75px;
margin-left: 10rpx;
width: 150rpx;
height: 150rpx;
}
.goods-container-view .buy-num {
width: 164rpx;
height: 48rpx;
line-height: 48rpx;
position: absolute;
right: 60rpx;
bottom: 30rpx;
display: flex;
font-size: 24rpx;
text-align: center;
}
.goods-container-view .buy-num .reduce-btn {
width: 48rpx;
height: 100%;
border-left: 1rpx solid #ccc;
border-bottom: 1rpx solid #ccc;
border-top: 1rpx solid #ccc;
border-bottom-left-radius: 6rpx;
border-top-left-radius: 6rpx;
}
.goods-container-view .buy-num .reduce-btn.disabled {
background-color: #f5f5f9;
border-left: 1rpx solid #eee;
border-bottom: 1rpx solid #eee;
border-top: 1rpx solid #eee;
color: #ccc;
}
.goods-container-view .buy-num .add-btn {
width: 48rpx;
height: 100%;
border-right: 1rpx solid #ccc;
border-bottom: 1rpx solid #ccc;
border-top: 1rpx solid #ccc;
border-bottom-right-radius: 6rpx;
border-top-right-radius: 6rpx;
}
.goods-container-view .buy-num .add-btn.disabled {
background-color: #f5f5f9;
border-right: 1rpx solid #eee;
border-bottom: 1rpx solid #eee;
border-top: 1rpx solid #eee;
color: #ccc;
}
.goods-container-view .buy-num input {
width: 68rpx;
height: 48rpx;
min-height: 48rpx;
text-align: center;
font-size: 24rpx;
border: 1rpx solid #ccc;
}
.shopping-cart-counter-view {
background-color: rebeccapurple;
display: flex;
justify-content: space-between;
width: 100%;
......@@ -32,27 +128,32 @@
position: fixed;
bottom: 0;
left: 0;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
border-bottom: 2rpx solid #eee;
border-top: 2rpx solid #eee;
background-color: #fff;
z-index: 999;
}
.shopping-cart-counter-view .all-select-view {
display: flex;
align-items: center;
margin-left: 15px;
width: 200px;
margin-left: 30rpx;
height: 100%;
}
.shopping-cart-counter-view .all-select-view .select-button {
margin-right: 5px;
width: 18px;
height: 18px;
margin-right: 10rpx;
width: 36rpx;
height: 36rpx;
}
.shopping-cart-counter-view .all-select-view text {
margin-right: 10rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.shopping-cart-counter-view .left-price {
.shopping-cart-counter-view .price-view {
display: flex;
width: 510rpx;
justify-content: flex-endsss;
justify-content: flex-end;
line-height: 100rpx;
font-size: 28rpx;
box-sizing: border-box;
......@@ -69,4 +170,5 @@
background-color: #e64340;
font-size: 32rpx;
color: #fff;
margin-top: 2rpx;
}
\ No newline at end of file
CJPremiumMember/pages/Home/index.js
View file @ 72060550
// pages/Home/index.js
const windowHeight = wx.getSystemInfoSync().windowHeight
const windowWidth = wx.getSystemInfoSync().windowWidth
const colorLight = 'rgba(0, 0, 0, .9)'
const colorDark = 'rgba(255, 255, 255, .8)'
// const windowHeight = wx.getSystemInfoSync().windowHeight
// const windowWidth = wx.getSystemInfoSync().windowWidth
// const colorLight = 'rgba(0, 0, 0, .9)'
// const colorDark = 'rgba(255, 255, 255, .8)'
Page({
......@@ -10,16 +10,8 @@ Page({
* 页面的初始数据
*/
data: {
windowHeight: windowHeight,
windowWidth: windowWidth,
inputShowed: false,
inputVal: "",
i: 0,
indicatorDots: true,
vertical: false,
autoplay: false,
interval: 2000,
duration: 500,
loading:true,
imageUrl:'../../image/640.jpeg',
imageIcon:'../../image/group_portrait.png',
bannerList:['../../image/640.jpeg','../../image/640.jpeg'],
......@@ -55,54 +47,13 @@ Page({
// this.setData({
// search: this.search.bind(this)
// })
this.loadNewData()
setTimeout(() => {
this.setData({
loading:false
})
this.loadNewData()
}, 2000)
},
search: function (value) {
return new Promise((resolve, reject) => {
if (this.data.i % 2 === 0) {
setTimeout(() => {
resolve([{text: '搜索结果', value: 1}, {text: '搜索结果2', value: 2}])
}, 200)
} else {
setTimeout(() => {
resolve([])
}, 200)
}
this.setData({
i: this.data.i + 1
})
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
......@@ -144,8 +95,9 @@ Page({
* 用户搜索
*/
selectAction: function (e) {
this.showToastText('搜索成功！！')
console.log('select result', e)
wx.navigateTo({
url: '../Search/index',
})
},
cellAction:function (e) {
this.showToastText('点击了'+e.currentTarget.dataset['index'])
......
CJPremiumMember/pages/Home/index.json
View file @ 72060550
{
"usingComponents": {
"mp-searchbar": "weui-miniprogram/searchbar/searchbar",
"mp-icon": "weui-miniprogram/icon/icon"
},
"enablePullDownRefresh": true
"enablePullDownRefresh": true,
"navigationBarTitleText": "首页"
}
\ No newline at end of file
CJPremiumMember/pages/Home/index.skeleton.wxml 0 → 100644
View file @ 72060550
<!--
此文件为开发者工具生成，生成时间: 2020/12/4 下午4:30:00
使用方法：
在 /Users/purewin/Documents/Company/ChengjingPremiumMember/CJPremiumMember/pages/Home/index.wxml 引入模板
```
<import src="index.skeleton.wxml"/>
<template is="skeleton" wx-if="{{loading}}" />
```
在 /Users/purewin/Documents/Company/ChengjingPremiumMember/CJPremiumMember/pages/Home/index.wxss 中引入样式
```
@import "./index.skeleton.wxss";
```
更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
-->
<template name="skeleton">
<view class="sk-container">
<view class="container">
<view class="search-container">
<view class="search-view">
<view class="search-v">
<image class="search-icon sk-image"></image>
<text class="search-text sk-transparent sk-text-18-7500-200 sk-text"> 搜索商品，发现好物</text>
</view>
</view>
</view>
<view class="swiper-view">
<swiper autoplay="false" class="swiper" duration="1000" indicator-dots="true" interval="5000" current="0">
<swiper-item style="position: absolute; width: 100%; height: 100%; transform: translate(0%, 0px) translateZ(0px);">
<image class="slide-image sk-image" mode="aspectFill"></image>
</swiper-item>
</swiper>
</view>
<view class="classification-view">
<view class="classification-container" hover-class="none" hover-stop-propagation="true">
<view class="itme-view" data-index="居家" hover-class="none" hover-stop-propagation="true">
<image class="itme-icon sk-image" mode="aspectFill"></image>
<text class="itme-text sk-transparent sk-text-18-7500-711 sk-text" style="background-position-x: 50%;">居家</text>
</view>
<view class="itme-view" data-index="鞋包配饰" hover-class="none" hover-stop-propagation="true">
<image class="itme-icon sk-image" mode="aspectFill"></image>
<text class="itme-text sk-transparent sk-text-18-7500-151 sk-text" style="background-position-x: 50%;">鞋包配饰</text>
</view>
<view class="itme-view" data-index="服装" hover-class="none" hover-stop-propagation="true">
<image class="itme-icon sk-image" mode="aspectFill"></image>
<text class="itme-text sk-transparent sk-text-18-7500-858 sk-text" style="background-position-x: 50%;">服装</text>
</view>
<view class="itme-view" data-index="电器" hover-class="none" hover-stop-propagation="true">
<image class="itme-icon sk-image" mode="aspectFill"></image>
<text class="itme-text sk-transparent sk-text-18-7500-198 sk-text" style="background-position-x: 50%;">电器</text>
</view>
<view class="itme-view" data-index="婴童" hover-class="none" hover-stop-propagation="true">
<image class="itme-icon sk-image" mode="aspectFill"></image>
<text class="itme-text sk-transparent sk-text-18-7500-195 sk-text" style="background-position-x: 50%;">婴童</text>
</view>
<view class="itme-view" data-index="饮食" hover-class="none" hover-stop-propagation="true">
<image class="itme-icon sk-image" mode="aspectFill"></image>
<text class="itme-text sk-transparent sk-text-18-7500-715 sk-text" style="background-position-x: 50%;">饮食</text>
</view>
<view class="itme-view" data-index="特色区" hover-class="none" hover-stop-propagation="true">
<image class="itme-icon sk-image" mode="aspectFill"></image>
<text class="itme-text sk-transparent sk-text-18-7500-945 sk-text" style="background-position-x: 50%;">特色区</text>
</view>
<view class="itme-view" data-index="洗护" hover-class="none" hover-stop-propagation="true">
<image class="itme-icon sk-image" mode="aspectFill"></image>
<text class="itme-text sk-transparent sk-text-18-7500-614 sk-text" style="background-position-x: 50%;">洗护</text>
</view>
<view class="itme-view" data-index="餐厨" hover-class="none" hover-stop-propagation="true">
<image class="itme-icon sk-image" mode="aspectFill"></image>
<text class="itme-text sk-transparent sk-text-18-7500-737 sk-text" style="background-position-x: 50%;">餐厨</text>
</view>
<view class="itme-view" data-index="文体" hover-class="none" hover-stop-propagation="true">
<image class="itme-icon sk-image" mode="aspectFill"></image>
<text class="itme-text sk-transparent sk-text-18-7500-998 sk-text" style="background-position-x: 50%;">文体</text>
</view>
</view>
</view>
<view class="recommend-view">
<image class="recommend-image sk-image" mode="aspectFill"></image>
</view>
<view class="activity-view">
<view class="activity-container">
<image class="activity-image sk-image" mode="aspectFill"></image>
<text class="activity-text sk-transparent sk-text-18-7500-465 sk-text" decode="true" selectable="true">新品热销榜</text>
<text class="activity-text sk-transparent sk-text-18-7500-615 sk-text" decode="true" selectable="true" space="false">热销爆款不容错过</text>
</view>
<view class="activity-container">
<image class="activity-image sk-image" mode="aspectFill"></image>
<text class="activity-text sk-transparent sk-text-18-7500-120 sk-text" decode="true" selectable="true">新品热销榜</text>
<text class="activity-text sk-transparent sk-text-18-7500-437 sk-text" decode="true" selectable="true" space="false">热销爆款不容错过</text>
</view>
</view>
</view>
</view>
</template>
\ No newline at end of file
CJPremiumMember/pages/Home/index.skeleton.wxss 0 → 100644
View file @ 72060550
/*
此文件为开发者工具生成，生成时间: 2020/12/4 下午4:30:00
在 /Users/purewin/Documents/Company/ChengjingPremiumMember/CJPremiumMember/pages/Home/index.wxss 中引入样式
```
@import "./index.skeleton.wxss";
```
更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
*/
.sk-transparent {
color: transparent !important;
}
.sk-text-18-7500-200 {
background-image: linear-gradient(transparent 18.7500%, #EEEEEE 0%, #EEEEEE 81.2500%, transparent 0%) !important;
background-size: 100% 38.4000rpx;
position: relative !important;
}
.sk-text {
background-origin: content-box !important;
background-clip: content-box !important;
background-color: transparent !important;
color: transparent !important;
background-repeat: repeat-y !important;
}
.sk-text-18-7500-711 {
background-image: linear-gradient(transparent 18.7500%, #EEEEEE 0%, #EEEEEE 81.2500%, transparent 0%) !important;
background-size: 100% 41.6000rpx;
position: relative !important;
}
.sk-text-18-7500-151 {
background-image: linear-gradient(transparent 18.7500%, #EEEEEE 0%, #EEEEEE 81.2500%, transparent 0%) !important;
background-size: 100% 41.6000rpx;
position: relative !important;
}
.sk-text-18-7500-858 {
background-image: linear-gradient(transparent 18.7500%, #EEEEEE 0%, #EEEEEE 81.2500%, transparent 0%) !important;
background-size: 100% 41.6000rpx;
position: relative !important;
}
.sk-text-18-7500-198 {
background-image: linear-gradient(transparent 18.7500%, #EEEEEE 0%, #EEEEEE 81.2500%, transparent 0%) !important;
background-size: 100% 41.6000rpx;
position: relative !important;
}
.sk-text-18-7500-195 {
background-image: linear-gradient(transparent 18.7500%, #EEEEEE 0%, #EEEEEE 81.2500%, transparent 0%) !important;
background-size: 100% 41.6000rpx;
position: relative !important;
}
.sk-text-18-7500-715 {
background-image: linear-gradient(transparent 18.7500%, #EEEEEE 0%, #EEEEEE 81.2500%, transparent 0%) !important;
background-size: 100% 41.6000rpx;
position: relative !important;
}
.sk-text-18-7500-945 {
background-image: linear-gradient(transparent 18.7500%, #EEEEEE 0%, #EEEEEE 81.2500%, transparent 0%) !important;
background-size: 100% 41.6000rpx;
position: relative !important;
}
.sk-text-18-7500-614 {
background-image: linear-gradient(transparent 18.7500%, #EEEEEE 0%, #EEEEEE 81.2500%, transparent 0%) !important;
background-size: 100% 41.6000rpx;
position: relative !important;
}
.sk-text-18-7500-737 {
background-image: linear-gradient(transparent 18.7500%, #EEEEEE 0%, #EEEEEE 81.2500%, transparent 0%) !important;
background-size: 100% 41.6000rpx;
position: relative !important;
}
.sk-text-18-7500-998 {
background-image: linear-gradient(transparent 18.7500%, #EEEEEE 0%, #EEEEEE 81.2500%, transparent 0%) !important;
background-size: 100% 41.6000rpx;
position: relative !important;
}
.sk-text-18-7500-465 {
background-image: linear-gradient(transparent 18.7500%, #EEEEEE 0%, #EEEEEE 81.2500%, transparent 0%) !important;
background-size: 100% 51.2000rpx;
position: relative !important;
}
.sk-text-18-7500-615 {
background-image: linear-gradient(transparent 18.7500%, #EEEEEE 0%, #EEEEEE 81.2500%, transparent 0%) !important;
background-size: 100% 51.2000rpx;
position: relative !important;
}
.sk-text-18-7500-120 {
background-image: linear-gradient(transparent 18.7500%, #EEEEEE 0%, #EEEEEE 81.2500%, transparent 0%) !important;
background-size: 100% 51.2000rpx;
position: relative !important;
}
.sk-text-18-7500-437 {
background-image: linear-gradient(transparent 18.7500%, #EEEEEE 0%, #EEEEEE 81.2500%, transparent 0%) !important;
background-size: 100% 51.2000rpx;
position: relative !important;
}
.sk-image {
background: #EFEFEF !important;
}
.sk-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: transparent;
}
CJPremiumMember/pages/Home/index.wxml
View file @ 72060550
......@@ -59,4 +59,8 @@
</block>
</view>
<!-- </scroll-view> -->
</view>
\ No newline at end of file
</view>
<import src="index.skeleton.wxml"/>
<template is="skeleton" wx-if="{{loading}}" />
\ No newline at end of file
CJPremiumMember/pages/Home/index.wxss
View file @ 72060550
/* pages/Home/index.wxss */
@import "./index.skeleton.wxss";
.swiper-view {
width: 100%;
height: 170px;
height: 340rpx;
}
.swiper {
height: 100%;
......@@ -12,7 +14,7 @@
}
.search-container {
width: 100%;
height: 44px;
height: 88rpx;
display:flex ;
align-items:center;
justify-content:center ;
......@@ -21,9 +23,9 @@
}
.search-view {
border-radius: 25px;
width: calc(100% - 40px);
height: 30px;
border-radius: 50rpx;
width: calc(100% - 80rpx);
height: 60rpx;
background-color: rgb(243, 243, 243);
}
......@@ -32,29 +34,29 @@
display:flex ;
align-items:center;
justify-content:center;
margin-top: 5px;
margin-top: 10rpx;
}
.search-icon {
width: 16px;
height: 16px;
margin-right: 5px;
width: 32rpx;
height: 32rpx;
margin-right: 10rpx;
}
.search-text {
font-size: 12px;
font-size: 24rpx;
color: rgb(193, 193, 193);
}
.swiper-view {
height: 170px;
height: 340rpx;
background-color: royalblue;
}
.classification-view {
height: 231px;
height: 462rpx;
position: relative;
/* background-color: lawngreen; */
}
......@@ -63,41 +65,41 @@
display: flex;
flex-wrap: wrap;
justify-content: center;
width: calc( 100% - 40px);
height: calc( 100% - 40px);
left: 20px;
top: 30px;
width: calc( 100% - 80rpx);
height: calc( 100% - 80rpx);
left: 40rpx;
top: 60rpx;
}
.itme-view {
margin-right: 7.5px;
margin-left: 7.5px;
width: calc( (100% - 100px) / 5);
height: calc( (100% - 29px) / 2);
margin-right: 15rpx;
margin-left: 15rpx;
width: calc( (100% - 200rpx) / 5);
height: calc( (100% - 58rpx) / 2);
text-align: center;
color: rgb(102, 102,102);
}
.itme-icon {
width: 45px;
height: 45px;
width: 90rpx;
height: 90rpx;
}
.itme-text {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 13px;
font-size: 26rpx;
}
.recommend-view {
height: 104px;
height: 208rpx;
}
.recommend-image {
width: calc(100% - 15px);
width: calc(100% - 30rpx);
height: 100%;
margin-left: 7.5px;
margin-left: 15rpx;
}
.activity-view {
......@@ -105,14 +107,14 @@
flex-wrap: wrap;
justify-content: space-around;
align-content:space-between;
height: 275px;
margin-top: 27px;
height: 550rpx;
margin-top: 54rpx;
width: 100%;
}
.activity-container {
width: calc( (100% - 15px ) / 2);
height: calc( (100% - 5px ) / 2);
width: calc( (100% - 30rpx ) / 2);
height: calc( (100% - 10rpx ) / 2);
background-color: rosybrown;
position: relative;
}
......@@ -124,23 +126,23 @@
.activity-text {
position: relative;
display: block;
margin-left: 15px;
margin-left: 30rpx;
color: rebeccapurple;
}
.title-view {
margin-top: 42px;
margin-top: 84rpx;
border-top: solid;
border-color: rgba(197, 197, 197, 0.2);
}
.title {
margin-left: 19px;
margin-top: 15px;
margin-left: 38rpx;
margin-top: 30rpx;
}
.list-grids {
width: 100%;
margin-top: 16px;
margin-top: 32rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
......@@ -148,23 +150,23 @@
}
.cell-container {
margin-top: 2px;
margin-top: 4rpx;
background-color:white;
width: calc( (100% - 6px) / 2 );
height: 254px;
width: calc( (100% - 12rpx) / 2 );
height: 508rpx;
}
.icon-view {
margin-top: 15px;
margin-left: 15px;
margin-top: 30rpx;
margin-left: 30rpx;
background-color: seagreen;
width: calc( 100% - 30px);
height: 157px;
width: calc( 100% - 60rpx);
height: calc((100vw - 120rpx - 12rpx) / 2);
}
.icon-view-text{
margin-left: 15px;
width: calc( 100% - 30px);
margin-left: 30rpx;
width: calc( 100% - 60rpx);
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
......@@ -174,6 +176,6 @@
}
.price-text {
margin-left: 15px;
margin-left: 30rpx;
color: lightgray;
}
\ No newline at end of file
CJPremiumMember/pages/Order/index.js 0 → 100644
View file @ 72060550
// pages/Order/index.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
CJPremiumMember/pages/Order/index.json 0 → 100644
View file @ 72060550
{
"usingComponents": {},
"navigationBarTitleText": "订单"
}
\ No newline at end of file
CJPremiumMember/pages/Order/index.wxml 0 → 100644
View file @ 72060550
<!--pages/Order/index.wxml-->
<view class="container" hover-class="none" hover-stop-propagation="false">
<view class="search-container" hover-class="none" hover-stop-propagation="false">
<text class="search-text" selectable="false" space="false" decode="false">
待开发...
</text>
</view>
</view>
CJPremiumMember/pages/Order/index.wxss 0 → 100644
View file @ 72060550
/* pages/Order/index.wxss */
.search-container {
width: 100vw;
height: 100vh;
}
.search-container {
text-align: center;
}
\ No newline at end of file
CJPremiumMember/pages/Search/index.js 0 → 100644
View file @ 72060550
// pages/Search/index.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
CJPremiumMember/pages/Search/index.json 0 → 100644
View file @ 72060550
{
"usingComponents": {},
"navigationBarTitleText": "搜索"
}
\ No newline at end of file
CJPremiumMember/pages/Search/index.wxml 0 → 100644
View file @ 72060550
<!--pages/Search/index.wxml-->
<view class="container" hover-class="none" hover-stop-propagation="false">
<view class="search-container" hover-class="none" hover-stop-propagation="false">
<text class="search-text" selectable="false" space="false" decode="false">
待开发...
</text>
</view>
</view>
\ No newline at end of file
CJPremiumMember/pages/Search/index.wxss 0 → 100644
View file @ 72060550
/* pages/Search/index.wxss */
.search-container {
width: 100vw;
height: 100vh;
}
.search-container {
text-align: center;
}
\ No newline at end of file
app.wxss
View file @ 72060550
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 0;
box-sizing: border-box;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment