Skip to content

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

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

parent 1fca1469
Hide whitespace changes
Inline Side-by-side
Showing with 1245 additions and 189 deletions
CJPremiumMember/app.json
View file @ 72060550
...@@ -2,10 +2,12 @@ ...@@ -2,10 +2,12 @@
"pages":[ "pages":[
"pages/Home/index", "pages/Home/index",
"pages/Cart/index", "pages/Cart/index",
"pages/Search/index",
"pages/Order/index",
"pages/index/index", "pages/index/index",
"pages/logs/logs" "pages/logs/logs"
], ],
"entryPagePath": "pages/Cart/index", "entryPagePath": "pages/Home/index",
"tabBar": { "tabBar": {
"list": [{ "list": [{
"pagePath": "pages/Home/index", "pagePath": "pages/Home/index",
......
CJPremiumMember/pages/Cart/index.js
View file @ 72060550
...@@ -5,10 +5,14 @@ Page({ ...@@ -5,10 +5,14 @@ Page({
* 页面的初始数据 * 页面的初始数据
*/ */
data: { data: {
goods:[], goodsList:[],
loading:true,
selectCount:0,
selectGoodsSource:[],
imageUrl:'../../image/640.jpeg', imageUrl:'../../image/640.jpeg',
imageIcon:'../../image/group_portrait.png', imageIcon:'../../image/group_portrait.png',
totalPrice:100, isSelectAll:false,
totalPrice:0,
slideButtons: [{ slideButtons: [{
type: 'warn', type: 'warn',
text: '删除', text: '删除',
...@@ -16,76 +20,244 @@ Page({ ...@@ -16,76 +20,244 @@ Page({
src: 'icon_del.svg', // icon的路径 src: 'icon_del.svg', // icon的路径
}], }],
}, },
/** /**
* 生命周期函数--监听页面加载 * 生命周期函数--监听页面加载
*/ */
onLoad: function (options) { onLoad: function () {
let goods = [];
for (let index = 0; index < 20; index++) { setTimeout(() => {
this.setData({
loading:false
})
this.loadNewData()
}, 2000)
},
loadMoreData() {
let goods = this.data.goodsList;
for (let index = 0; index < 7; index++) {
goods.push({ goods.push({
isSelect:(index % 2), isSelect:false,
goodsPrice:(199 % 3)+index, goodsPrice:(199 % 3)+index,
goodsCount:index, goodsCount:index+1,
goodsUrl:(index % 2)?'../../image/plus_dark.png':'../../image/640.jpeg', goodsUrl:(index % 2)?'../../image/group_portrait.png':'../../image/640.jpeg',
goodsName:'90分户外休闲中长厚款鹅绒羽绒服' + index, goodsName:'90分户外休闲中长厚款鹅绒羽绒服' + index,
goodsSpec:'XL;黑色 2' + index goodsSpec:'XL;黑色 2' + index
}) })
} }
this.setData({ this.setData({
goods:goods goodsList:goods
}) })
wx.stopPullDownRefresh()
}, },
loadNewData() {
/** this.data.goodsList = []
* 生命周期函数--监听页面初次渲染完成 this.loadMoreData()
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
}, },
orderAction(e) {
/** wx.navigateTo({
* 生命周期函数--监听页面卸载 url: '../Order/index',
*/ })
onUnload: function () { // 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 () { onPullDownRefresh: function () {
this.loadNewData()
this.setData({
isSelectAll:false,
selectGoodsSource: [],
totalPrice: 0,
selectCount: 0
})
}, },
/** /**
* 页面上拉触底事件的处理函数 * 页面上拉触底事件的处理函数
*/ */
onReachBottom: function () { onReachBottom: function () {
// this.loadMoreData()
}, },
/** /**
* 用户点击右上角分享 * 用户点击右上角分享
*/ */
onShareAppMessage: function () { 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) { 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 @@ ...@@ -3,5 +3,7 @@
"mp-cells": "weui-miniprogram/cells/cells", "mp-cells": "weui-miniprogram/cells/cells",
"mp-cell": "weui-miniprogram/cell/cell", "mp-cell": "weui-miniprogram/cell/cell",
"mp-slideview": "weui-miniprogram/slideview/slideview" "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
<!--
此文件为开发者工具生成，生成时间: 2020/12/4 下午4:29:30
使用方法：
在 /Users/purewin/Documents/Company/ChengjingPremiumMember/CJPremiumMember/pages/Cart/index.wxml 引入模板
```
<import src="index.skeleton.wxml"/>
<template is="skeleton" wx-if="{{loading}}" />
```
在 /Users/purewin/Documents/Company/ChengjingPremiumMember/CJPremiumMember/pages/Cart/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" hover-class="none" hover-stop-propagation="true">
<view is="miniprogram_npm/weui-miniprogram/cells/cells">
<view class="table-view cells--table-view weui-cells__group cells--weui-cells__group">
<view class="weui-cells cells--weui-cells weui-cells_after-title cells--weui-cells_after-title sk-pseudo sk-pseudo-circle">
<view is="miniprogram_npm/weui-miniprogram/slideview/slideview" data-index="0">
<view class="weui-slideview slideview--weui-slideview weui-movable-view slideview--weui-movable-view" style="width: 100%;height: 100%;">
<view class="weui-slideview__left slideview--weui-slideview__left left slideview--left" style="width:100%;">
<view is="miniprogram_npm/weui-miniprogram/cell/cell">
<view class="weui-cell cell--weui-cell sk-pseudo sk-pseudo-circle" hover-class="true">
<view class="weui-cell__hd cell--weui-cell__hd"></view>
<view class="weui-cell__bd cell--weui-cell__bd">
<view class="goods-container-view">
<view class="goods-view" data-index="0">
<image class="goods-select-icon sk-image" lazy-load="true"></image>
<image class="goods-icon sk-image" lazy-load="true" mode="aspectFill"></image>
</view>
<view class="goods-content" hover-class="none" hover-stop-propagation="true">
<text class="goods-name sk-transparent sk-text-14-5833-165 sk-text" decode="true" selectable="true" space="false">90分户外休闲中长厚款鹅绒羽绒服0</text>
<text class="goods-spec sk-transparent sk-text-14-5834-4 sk-text" decode="true" selectable="true" space="false">XL;黑色 20</text>
<text class="goods-price sk-transparent sk-text-14-5834-683 sk-text" decode="true" selectable="true" space="false">1</text>
</view>
<view class="buy-num">
<view class="reduce-btn sk-transparent sk-text-25-0000-944 sk-text" data-index="0" style="border: none; background-position-x: 50%;">-</view>
<view data-index="0" type="number" value="1" class="sk-image" style="border: none;"></view>
<view class="add-btn sk-transparent sk-text-25-0000-667 sk-text" data-index="0" style="border: none; background-position-x: 50%;">+</view>
</view>
</view>
</view>
<view class="weui-cell__ft cell--weui-cell__ft"></view>
</view>
</view>
</view>
</view>
</view>
<view is="miniprogram_npm/weui-miniprogram/slideview/slideview" data-index="1">
<view class="weui-slideview slideview--weui-slideview weui-movable-view slideview--weui-movable-view" style="width: 100%;height: 100%;">
<view class="weui-slideview__left slideview--weui-slideview__left left slideview--left" style="width:100%;">
<view is="miniprogram_npm/weui-miniprogram/cell/cell">
<view class="weui-cell cell--weui-cell weui-cell_wxss cell--weui-cell_wxss sk-pseudo sk-pseudo-circle" hover-class="true">
<view class="weui-cell__hd cell--weui-cell__hd"></view>
<view class="weui-cell__bd cell--weui-cell__bd">
<view class="goods-container-view">
<view class="goods-view" data-index="1">
<image class="goods-select-icon sk-image" lazy-load="true"></image>
<image class="goods-icon sk-image" lazy-load="true" mode="aspectFill"></image>
</view>
<view class="goods-content" hover-class="none" hover-stop-propagation="true">
<text class="goods-name sk-transparent sk-text-14-5833-599 sk-text" decode="true" selectable="true" space="false">90分户外休闲中长厚款鹅绒羽绒服1</text>
<text class="goods-spec sk-transparent sk-text-14-5834-923 sk-text" decode="true" selectable="true" space="false">XL;黑色 21</text>
<text class="goods-price sk-transparent sk-text-14-5834-562 sk-text" decode="true" selectable="true" space="false">2</text>
</view>
<view class="buy-num">
<view class="reduce-btn sk-transparent sk-text-25-0000-370 sk-text" data-index="1" style="border: none; background-position-x: 50%;">-</view>
<view data-index="1" type="number" value="2" class="sk-image" style="border: none;"></view>
<view class="add-btn sk-transparent sk-text-25-0000-495 sk-text" data-index="1" style="border: none; background-position-x: 50%;">+</view>
</view>
</view>
</view>
<view class="weui-cell__ft cell--weui-cell__ft"></view>
</view>
</view>
</view>
</view>
</view>
<view is="miniprogram_npm/weui-miniprogram/slideview/slideview" data-index="2">
<view class="weui-slideview slideview--weui-slideview weui-movable-view slideview--weui-movable-view" style="width: 100%;height: 100%;">
<view class="weui-slideview__left slideview--weui-slideview__left left slideview--left" style="width:100%;">
<view is="miniprogram_npm/weui-miniprogram/cell/cell">
<view class="weui-cell cell--weui-cell weui-cell_wxss cell--weui-cell_wxss sk-pseudo sk-pseudo-circle" hover-class="true">
<view class="weui-cell__hd cell--weui-cell__hd"></view>
<view class="weui-cell__bd cell--weui-cell__bd">
<view class="goods-container-view">
<view class="goods-view" data-index="2">
<image class="goods-select-icon sk-image" lazy-load="true"></image>
<image class="goods-icon sk-image" lazy-load="true" mode="aspectFill"></image>
</view>
<view class="goods-content" hover-class="none" hover-stop-propagation="true">
<text class="goods-name sk-transparent sk-text-14-5833-586 sk-text" decode="true" selectable="true" space="false">90分户外休闲中长厚款鹅绒羽绒服2</text>
<text class="goods-spec sk-transparent sk-text-14-5834-265 sk-text" decode="true" selectable="true" space="false">XL;黑色 22</text>
<text class="goods-price sk-transparent sk-text-14-5834-575 sk-text" decode="true" selectable="true" space="false">3</text>
</view>
<view class="buy-num">
<view class="reduce-btn sk-transparent sk-text-25-0000-200 sk-text" data-index="2" style="border: none; background-position-x: 50%;">-</view>
<view data-index="2" type="number" value="3" class="sk-image" style="border: none;"></view>
<view class="add-btn sk-transparent sk-text-25-0000-780 sk-text" data-index="2" style="border: none; background-position-x: 50%;">+</view>
</view>
</view>
</view>
<view class="weui-cell__ft cell--weui-cell__ft"></view>
</view>
</view>
</view>
</view>
</view>
<view is="miniprogram_npm/weui-miniprogram/slideview/slideview" data-index="3">
<view class="weui-slideview slideview--weui-slideview weui-movable-view slideview--weui-movable-view" style="width: 100%;height: 100%;">
<view class="weui-slideview__left slideview--weui-slideview__left left slideview--left" style="width:100%;">
<view is="miniprogram_npm/weui-miniprogram/cell/cell">
<view class="weui-cell cell--weui-cell weui-cell_wxss cell--weui-cell_wxss sk-pseudo sk-pseudo-circle" hover-class="true">
<view class="weui-cell__hd cell--weui-cell__hd"></view>
<view class="weui-cell__bd cell--weui-cell__bd">
<view class="goods-container-view">
<view class="goods-view" data-index="3">
<image class="goods-select-icon sk-image" lazy-load="true"></image>
<image class="goods-icon sk-image" lazy-load="true" mode="aspectFill"></image>
</view>
<view class="goods-content" hover-class="none" hover-stop-propagation="true">
<text class="goods-name sk-transparent sk-text-14-5833-395 sk-text" decode="true" selectable="true" space="false">90分户外休闲中长厚款鹅绒羽绒服3</text>
<text class="goods-spec sk-transparent sk-text-14-5834-864 sk-text" decode="true" selectable="true" space="false">XL;黑色 23</text>
<text class="goods-price sk-transparent sk-text-14-5834-68 sk-text" decode="true" selectable="true" space="false">4</text>
</view>
<view class="buy-num">
<view class="reduce-btn sk-transparent sk-text-25-0000-406 sk-text" data-index="3" style="border: none; background-position-x: 50%;">-</view>
<view data-index="3" type="number" value="4" class="sk-image" style="border: none;"></view>
<view class="add-btn sk-transparent sk-text-25-0000-969 sk-text" data-index="3" style="border: none; background-position-x: 50%;">+</view>
</view>
</view>
</view>
<view class="weui-cell__ft cell--weui-cell__ft"></view>
</view>
</view>
</view>
</view>
</view>
<view is="miniprogram_npm/weui-miniprogram/slideview/slideview" data-index="4">
<view class="weui-slideview slideview--weui-slideview weui-movable-view slideview--weui-movable-view" style="width: 100%;height: 100%;">
<view class="weui-slideview__left slideview--weui-slideview__left left slideview--left" style="width:100%;">
<view is="miniprogram_npm/weui-miniprogram/cell/cell">
<view class="weui-cell cell--weui-cell weui-cell_wxss cell--weui-cell_wxss sk-pseudo sk-pseudo-circle" hover-class="true">
<view class="weui-cell__hd cell--weui-cell__hd"></view>
<view class="weui-cell__bd cell--weui-cell__bd">
<view class="goods-container-view">
<view class="goods-view" data-index="4">
<image class="goods-select-icon sk-image" lazy-load="true"></image>
<image class="goods-icon sk-image" lazy-load="true" mode="aspectFill"></image>
</view>
<view class="goods-content" hover-class="none" hover-stop-propagation="true">
<text class="goods-name sk-transparent sk-text-14-5833-511 sk-text" decode="true" selectable="true" space="false">90分户外休闲中长厚款鹅绒羽绒服4</text>
<text class="goods-spec sk-transparent sk-text-14-5834-425 sk-text" decode="true" selectable="true" space="false">XL;黑色 24</text>
<text class="goods-price sk-transparent sk-text-14-5834-813 sk-text" decode="true" selectable="true" space="false">5</text>
</view>
<view class="buy-num">
<view class="reduce-btn sk-transparent sk-text-25-0000-832 sk-text" data-index="4" style="border: none; background-position-x: 50%;">-</view>
<view data-index="4" type="number" value="5" class="sk-image" style="border: none;"></view>
<view class="add-btn sk-transparent sk-text-25-0000-471 sk-text" data-index="4" style="border: none; background-position-x: 50%;">+</view>
</view>
</view>
</view>
<view class="weui-cell__ft cell--weui-cell__ft"></view>
</view>
</view>
</view>
</view>
</view>
<view is="miniprogram_npm/weui-miniprogram/slideview/slideview" data-index="5">
<view class="weui-slideview slideview--weui-slideview weui-movable-view slideview--weui-movable-view" style="width: 100%;height: 100%;">
<view class="weui-slideview__left slideview--weui-slideview__left left slideview--left" style="width:100%;">
<view is="miniprogram_npm/weui-miniprogram/cell/cell">
<view class="weui-cell cell--weui-cell weui-cell_wxss cell--weui-cell_wxss sk-pseudo sk-pseudo-circle" hover-class="true">
<view class="weui-cell__hd cell--weui-cell__hd"></view>
<view class="weui-cell__bd cell--weui-cell__bd">
<view class="goods-container-view">
<view class="goods-view" data-index="5">
<image class="goods-select-icon sk-image" lazy-load="true"></image>
<image class="goods-icon sk-image" lazy-load="true" mode="aspectFill"></image>
</view>
<view class="goods-content" hover-class="none" hover-stop-propagation="true">
<text class="goods-name sk-transparent sk-text-14-5833-397 sk-text" decode="true" selectable="true" space="false">90分户外休闲中长厚款鹅绒羽绒服5</text>
<text class="goods-spec sk-transparent sk-text-14-5834-432 sk-text" decode="true" selectable="true" space="false">XL;黑色 25</text>
<text class="goods-price sk-transparent sk-text-14-5834-800 sk-text" decode="true" selectable="true" space="false">6</text>
</view>
<view class="buy-num">
<view class="reduce-btn sk-transparent sk-text-25-0000-196 sk-text" data-index="5" style="border: none; background-position-x: 50%;">-</view>
<view data-index="5" type="number" value="6" class="sk-image" style="border: none;"></view>
<view class="add-btn sk-transparent sk-text-25-0000-366 sk-text" data-index="5" style="border: none; background-position-x: 50%;">+</view>
</view>
</view>
</view>
<view class="weui-cell__ft cell--weui-cell__ft"></view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="shopping-cart-counter-view" hover-class="none" hover-stop-propagation="true" style="border: none;">
<view class="all-select-view" hover-class="none" hover-stop-propagation="true">
<image class="select-button sk-image"></image>
<text decode="true" selectable="true" space="false" class="sk-transparent sk-text-18-7500-125 sk-text">已选择</text>
</view>
<view class="price-view">
<view class="total sk-transparent sk-text-36-0000-811 sk-text">合计：¥ 0</view>
</view>
<view class="to-pay-btn">
<view class="sk-transparent sk-text-34-0000-438 sk-text" style="background-position-x: 50%;">去结算</view>
</view>
</view>
</view>
</view>
</template>
\ No newline at end of file
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--> <!--pages/Cart/index.wxml-->
<view class="container" hover-class="none" hover-stop-propagation="false"> <view class="container" hover-class="none" hover-stop-propagation="false">
<mp-cells ext-class="table-view"> <mp-cells ext-class="table-view">
<block wx:for="{{goods}}" wx:key="itme" wx:for-item="good"> <block wx:for="{{goodsList}}" wx:key="index" wx:for-item="goods">
<mp-slideview show="{{false}}" buttons="{{slideButtons}}" bindbuttontap="slideButtonTap"> <mp-slideview show="{{false}}" buttons="{{slideButtons}}" bindbuttontap="slideButtonTap" data-index="{{index}}">
<mp-cell hover> <mp-cell>
<view class="goods-view"> <view class="goods-container-view">
<image class="goods-select-icon" src="{{good.isSelect?'../../image/check_f.png':'../../image/check_t.png'}}" lazy-load="false" binderror="" bindload=""/> <view class="goods-view" bindtap="selectGoodsAction" data-index="{{index}}">
<image class="goods-icon" src="{{imageIcon}}" mode="aspectFill" lazy-load="false" binderror="" bindload=""/> <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>
<view slot="footer">说明文字</view>
</mp-cell> </mp-cell>
</mp-slideview> </mp-slideview>
</block> </block>
</mp-cells> </mp-cells>
<view class="shopping-cart-counter-view" hover-class="none" hover-stop-propagation="false"> <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"> <view class="all-select-view" hover-class="none" hover-stop-propagation="false" bindtap="allSelectAction">
<image class="select-button" src="../../image/check_f.png" /> <image class="select-button" src="{{isSelectAll?'../../image/check_t.png ':'../../image/check_f.png'}}" />
<text class="" selectable="false" space="false" decode="false">已选择</text> <text selectable="false" space="false" decode="false">已选择</text>
</view> </view>
<view class="left-price"> <view class="price-view">
<view class="total" hidden="{{noSelect}}">合计：¥ {{totalPrice}}</view> <view class="total" hidden="{{noSelect}}">合计：¥ {{totalPrice}}</view>
</view> </view>
<view class="to-pay-btn"> <view class="to-pay-btn" bindtap="orderAction">
<navigator url="">去结算</navigator> <view >去结算{{selectCount==0?'':'(' + selectCount + ')'}}</view>
</view> </view>
</view> </view>
</view> </view>
\ No newline at end of file
<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 */ /* pages/Cart/index.wxss */
@import "./index.skeleton.wxss";
.container { .container {
/* position: relative; */ /* position: relative; */
} }
.cell-view { .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 { .goods-view {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.goods-select-view {
height: 100%;
}
.goods-select-icon { .goods-select-icon {
width: 18px; width: 36rpx;
height: 18px; height: 36rpx;
} }
.goods-icon { .goods-icon {
margin-left: 5px; margin-left: 10rpx;
width: 75px; width: 150rpx;
height: 75px; 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 { .shopping-cart-counter-view {
background-color: rebeccapurple;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
...@@ -32,27 +128,32 @@ ...@@ -32,27 +128,32 @@
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
border-bottom: 1px solid #eee; border-bottom: 2rpx solid #eee;
border-top: 1px solid #eee; border-top: 2rpx solid #eee;
background-color: #fff; background-color: #fff;
z-index: 999; z-index: 999;
} }
.shopping-cart-counter-view .all-select-view { .shopping-cart-counter-view .all-select-view {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 15px; margin-left: 30rpx;
width: 200px;
height: 100%; height: 100%;
} }
.shopping-cart-counter-view .all-select-view .select-button { .shopping-cart-counter-view .all-select-view .select-button {
margin-right: 5px; margin-right: 10rpx;
width: 18px; width: 36rpx;
height: 18px; 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; display: flex;
width: 510rpx; width: 510rpx;
justify-content: flex-endsss; justify-content: flex-end;
line-height: 100rpx; line-height: 100rpx;
font-size: 28rpx; font-size: 28rpx;
box-sizing: border-box; box-sizing: border-box;
...@@ -69,4 +170,5 @@ ...@@ -69,4 +170,5 @@
background-color: #e64340; background-color: #e64340;
font-size: 32rpx; font-size: 32rpx;
color: #fff; color: #fff;
margin-top: 2rpx;
} }
\ No newline at end of file
CJPremiumMember/pages/Home/index.js
View file @ 72060550
// pages/Home/index.js // pages/Home/index.js
const windowHeight = wx.getSystemInfoSync().windowHeight // const windowHeight = wx.getSystemInfoSync().windowHeight
const windowWidth = wx.getSystemInfoSync().windowWidth // const windowWidth = wx.getSystemInfoSync().windowWidth
const colorLight = 'rgba(0, 0, 0, .9)' // const colorLight = 'rgba(0, 0, 0, .9)'
const colorDark = 'rgba(255, 255, 255, .8)' // const colorDark = 'rgba(255, 255, 255, .8)'
Page({ Page({
...@@ -10,16 +10,8 @@ Page({ ...@@ -10,16 +10,8 @@ Page({
* 页面的初始数据 * 页面的初始数据
*/ */
data: { data: {
windowHeight: windowHeight,
windowWidth: windowWidth,
inputShowed: false,
inputVal: "",
i: 0, i: 0,
indicatorDots: true, loading:true,
vertical: false,
autoplay: false,
interval: 2000,
duration: 500,
imageUrl:'../../image/640.jpeg', imageUrl:'../../image/640.jpeg',
imageIcon:'../../image/group_portrait.png', imageIcon:'../../image/group_portrait.png',
bannerList:['../../image/640.jpeg','../../image/640.jpeg'], bannerList:['../../image/640.jpeg','../../image/640.jpeg'],
...@@ -55,54 +47,13 @@ Page({ ...@@ -55,54 +47,13 @@ Page({
// this.setData({ // this.setData({
// search: this.search.bind(this) // 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({ ...@@ -144,8 +95,9 @@ Page({
* 用户搜索 * 用户搜索
*/ */
selectAction: function (e) { selectAction: function (e) {
this.showToastText('搜索成功！！') wx.navigateTo({
console.log('select result', e) url: '../Search/index',
})
}, },
cellAction:function (e) { cellAction:function (e) {
this.showToastText('点击了'+e.currentTarget.dataset['index']) this.showToastText('点击了'+e.currentTarget.dataset['index'])
......
CJPremiumMember/pages/Home/index.json
View file @ 72060550
{ {
"usingComponents": { "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 @@ ...@@ -59,4 +59,8 @@
</block> </block>
</view> </view>
<!-- </scroll-view> --> <!-- </scroll-view> -->
</view> </view>
\ No newline at end of file
<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 */ /* pages/Home/index.wxss */
@import "./index.skeleton.wxss";
.swiper-view { .swiper-view {
width: 100%; width: 100%;
height: 170px; height: 340rpx;
} }
.swiper { .swiper {
height: 100%; height: 100%;
...@@ -12,7 +14,7 @@ ...@@ -12,7 +14,7 @@
} }
.search-container { .search-container {
width: 100%; width: 100%;
height: 44px; height: 88rpx;
display:flex ; display:flex ;
align-items:center; align-items:center;
justify-content:center ; justify-content:center ;
...@@ -21,9 +23,9 @@ ...@@ -21,9 +23,9 @@
} }
.search-view { .search-view {
border-radius: 25px; border-radius: 50rpx;
width: calc(100% - 40px); width: calc(100% - 80rpx);
height: 30px; height: 60rpx;
background-color: rgb(243, 243, 243); background-color: rgb(243, 243, 243);
} }
...@@ -32,29 +34,29 @@ ...@@ -32,29 +34,29 @@
display:flex ; display:flex ;
align-items:center; align-items:center;
justify-content:center; justify-content:center;
margin-top: 5px; margin-top: 10rpx;
} }
.search-icon { .search-icon {
width: 16px; width: 32rpx;
height: 16px; height: 32rpx;
margin-right: 5px; margin-right: 10rpx;
} }
.search-text { .search-text {
font-size: 12px; font-size: 24rpx;
color: rgb(193, 193, 193); color: rgb(193, 193, 193);
} }
.swiper-view { .swiper-view {
height: 170px; height: 340rpx;
background-color: royalblue; background-color: royalblue;
} }
.classification-view { .classification-view {
height: 231px; height: 462rpx;
position: relative; position: relative;
/* background-color: lawngreen; */ /* background-color: lawngreen; */
} }
...@@ -63,41 +65,41 @@ ...@@ -63,41 +65,41 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
width: calc( 100% - 40px); width: calc( 100% - 80rpx);
height: calc( 100% - 40px); height: calc( 100% - 80rpx);
left: 20px; left: 40rpx;
top: 30px; top: 60rpx;
} }
.itme-view { .itme-view {
margin-right: 7.5px; margin-right: 15rpx;
margin-left: 7.5px; margin-left: 15rpx;
width: calc( (100% - 100px) / 5); width: calc( (100% - 200rpx) / 5);
height: calc( (100% - 29px) / 2); height: calc( (100% - 58rpx) / 2);
text-align: center; text-align: center;
color: rgb(102, 102,102); color: rgb(102, 102,102);
} }
.itme-icon { .itme-icon {
width: 45px; width: 90rpx;
height: 45px; height: 90rpx;
} }
.itme-text { .itme-text {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 13px; font-size: 26rpx;
} }
.recommend-view { .recommend-view {
height: 104px; height: 208rpx;
} }
.recommend-image { .recommend-image {
width: calc(100% - 15px); width: calc(100% - 30rpx);
height: 100%; height: 100%;
margin-left: 7.5px; margin-left: 15rpx;
} }
.activity-view { .activity-view {
...@@ -105,14 +107,14 @@ ...@@ -105,14 +107,14 @@
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; justify-content: space-around;
align-content:space-between; align-content:space-between;
height: 275px; height: 550rpx;
margin-top: 27px; margin-top: 54rpx;
width: 100%; width: 100%;
} }
.activity-container { .activity-container {
width: calc( (100% - 15px ) / 2); width: calc( (100% - 30rpx ) / 2);
height: calc( (100% - 5px ) / 2); height: calc( (100% - 10rpx ) / 2);
background-color: rosybrown; background-color: rosybrown;
position: relative; position: relative;
} }
...@@ -124,23 +126,23 @@ ...@@ -124,23 +126,23 @@
.activity-text { .activity-text {
position: relative; position: relative;
display: block; display: block;
margin-left: 15px; margin-left: 30rpx;
color: rebeccapurple; color: rebeccapurple;
} }
.title-view { .title-view {
margin-top: 42px; margin-top: 84rpx;
border-top: solid; border-top: solid;
border-color: rgba(197, 197, 197, 0.2); border-color: rgba(197, 197, 197, 0.2);
} }
.title { .title {
margin-left: 19px; margin-left: 38rpx;
margin-top: 15px; margin-top: 30rpx;
} }
.list-grids { .list-grids {
width: 100%; width: 100%;
margin-top: 16px; margin-top: 32rpx;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; justify-content: space-around;
...@@ -148,23 +150,23 @@ ...@@ -148,23 +150,23 @@
} }
.cell-container { .cell-container {
margin-top: 2px; margin-top: 4rpx;
background-color:white; background-color:white;
width: calc( (100% - 6px) / 2 ); width: calc( (100% - 12rpx) / 2 );
height: 254px; height: 508rpx;
} }
.icon-view { .icon-view {
margin-top: 15px; margin-top: 30rpx;
margin-left: 15px; margin-left: 30rpx;
background-color: seagreen; background-color: seagreen;
width: calc( 100% - 30px); width: calc( 100% - 60rpx);
height: 157px; height: calc((100vw - 120rpx - 12rpx) / 2);
} }
.icon-view-text{ .icon-view-text{
margin-left: 15px; margin-left: 30rpx;
width: calc( 100% - 30px); width: calc( 100% - 60rpx);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
word-wrap: break-word; word-wrap: break-word;
...@@ -174,6 +176,6 @@ ...@@ -174,6 +176,6 @@
} }
.price-text { .price-text {
margin-left: 15px; margin-left: 30rpx;
color: lightgray; 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**/ /**app.wxss**/
.container { .container {
height: 100%; height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 0; padding: 0;
box-sizing: border-box; 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