Commit 1aa33f27 authored by 谢卓城's avatar 谢卓城

完善:1.添加gulp工作流. 2.样式全部采用sass. 3.网络请求封装

parent 9d822793
No preview for this file type
module.exports = {
root: true,
env: {
browser: true,
es6: true,
node: true,
},
plugins: [
"prettier"
],
extends: [
"prettier",
"prettier/standard"
],
parser: "babel-eslint",
parserOptions: {
ecmaVersion: 6,
sourceType: "module"
},
rules: {
"prettier/prettier":"error",
"no-console": 0,
},
globals: {
getApp: false,
Page: false,
wx: false,
App: false,
getCurrentPages: false,
Component: false
}
}
\ No newline at end of file
# Windows
[Dd]esktop.ini
Thumbs.db
$RECYCLE.BIN/
dist
# macOS
.vscode
.DS_Store
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
dist
# Node.js
node_modules/
/**app.wxss**/
.container {
padding: 0;
margin: 0;
box-sizing: border-box;
}
Component({
properties: {
showDelect:Boolean,
flexList:Array,
title: String // 简化的定义方式
},
data: {
},
  methods: {
    // 这里是一个自定义方法
   tagAction(e) {
var eventOption = { content: e.currentTarget.dataset.text} // 触发事件的选项
this.triggerEvent('tagClick', eventOption)
    },
delectAction() {
this.triggerEvent('delectClick')
}
  }
})
\ No newline at end of file
/* Common/TagView/index.wxss */
.tag-container {
padding-left: 40rpx;
}
.tag-view {
padding: 10rpx 0;
display: flex;
justify-content: space-between;
align-content: center;
width: 100%;
border-bottom: 2rpx solid rgba(240, 241, 242, 1);
}
.tag-view text {
color: rgb(193, 193, 193);
}
.tag-view image {
width: 40rpx;
height: 44rpx;
margin-right: 40rpx;
}
.flex-container {
padding-right: 40rpx;
}
.flex-view {
display: inline-block;
margin: 20rpx 20rpx 0 0;
padding: 5rpx 10rpx;
color: rgb(176, 185, 194);
border: 2rpx solid rgb(240, 241, 242);
}
.flex-view .flex-container {
background-color: rebeccapurple;
padding-right: 40rpx;
}
\ No newline at end of file
<!--
此文件为开发者工具生成,生成时间: 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" user-select="true" space="false">90分户外休闲中长厚款鹅绒羽绒服0</text>
<text class="goods-spec sk-transparent sk-text-14-5834-4 sk-text" decode="true" user-select="true" space="false">XL;黑色 20</text>
<text class="goods-price sk-transparent sk-text-14-5834-683 sk-text" decode="true" user-select="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" user-select="true" space="false">90分户外休闲中长厚款鹅绒羽绒服1</text>
<text class="goods-spec sk-transparent sk-text-14-5834-923 sk-text" decode="true" user-select="true" space="false">XL;黑色 21</text>
<text class="goods-price sk-transparent sk-text-14-5834-562 sk-text" decode="true" user-select="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" user-select="true" space="false">90分户外休闲中长厚款鹅绒羽绒服2</text>
<text class="goods-spec sk-transparent sk-text-14-5834-265 sk-text" decode="true" user-select="true" space="false">XL;黑色 22</text>
<text class="goods-price sk-transparent sk-text-14-5834-575 sk-text" decode="true" user-select="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" user-select="true" space="false">90分户外休闲中长厚款鹅绒羽绒服3</text>
<text class="goods-spec sk-transparent sk-text-14-5834-864 sk-text" decode="true" user-select="true" space="false">XL;黑色 23</text>
<text class="goods-price sk-transparent sk-text-14-5834-68 sk-text" decode="true" user-select="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" user-select="true" space="false">90分户外休闲中长厚款鹅绒羽绒服4</text>
<text class="goods-spec sk-transparent sk-text-14-5834-425 sk-text" decode="true" user-select="true" space="false">XL;黑色 24</text>
<text class="goods-price sk-transparent sk-text-14-5834-813 sk-text" decode="true" user-select="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" user-select="true" space="false">90分户外休闲中长厚款鹅绒羽绒服5</text>
<text class="goods-spec sk-transparent sk-text-14-5834-432 sk-text" decode="true" user-select="true" space="false">XL;黑色 25</text>
<text class="goods-price sk-transparent sk-text-14-5834-800 sk-text" decode="true" user-select="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" user-select="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
/*
此文件为开发者工具生成,生成时间: 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;
}
/* pages/Cart/index.wxss */
@import "./index.skeleton.wxss";
.container {
/* position: relative; */
}
.cell-view {
/* 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: 36rpx;
height: 36rpx;
}
.goods-icon {
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 {
display: flex;
justify-content: space-between;
width: 100%;
height: 100rpx;
position: fixed;
bottom: 0;
left: 0;
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: 30rpx;
height: 100%;
}
.shopping-cart-counter-view .all-select-view .select-button {
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 .price-view {
display: flex;
width: 510rpx;
justify-content: flex-end;
line-height: 100rpx;
font-size: 28rpx;
box-sizing: border-box;
}
.shopping-cart-counter-view .total {
color: #e64340;
padding-right: 30rpx;
}
.shopping-cart-counter-view .to-pay-btn {
width: 240rpx;
text-align: center;
line-height: 100rpx;
background-color: #e64340;
font-size: 32rpx;
color: #fff;
margin-top: 2rpx;
}
\ No newline at end of file
// 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)'
Page({
/**
* 页面的初始数据
*/
data: {
i: 0,
loading:true,
imageUrl:'../../image/640.jpeg',
imageIcon:'../../image/group_portrait.png',
bannerList:['../../image/640.jpeg','../../image/640.jpeg'],
classifications:["居家","鞋包配饰","服装", "电器","婴童","饮食", "特色区","洗护","餐厨","文体"],
activityList:[{
icon: '../../image/640.jpeg',
text: "新品热销榜",
subText: "热销爆款不容错过",
id: 1
},{
icon: '../../image/640.jpeg',
text: "新品热销榜",
subText: "热销爆款不容错过",
id: 2
},{
icon: '../../image/640.jpeg',
text: "新品热销榜",
subText: "热销爆款不容错过",
id: 3
},{
icon: '../../image/640.jpeg',
text: "新品热销榜",
subText: "热销爆款不容错过",
id: 4
},],
iconList:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// this.setData({
// search: this.search.bind(this)
// })
setTimeout(() => {
this.setData({
loading:false
})
this.loadNewData()
}, 2000)
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
loadNewData: function() {
this.data.iconList = []
this.loadMoreData()
},
loadMoreData: function() {
let list = this.data.iconList;
for (let index = 0; index < 20; index++) {
list.push({
icon: (index % 2)?'../../image/plus_dark.png':'../../image/640.jpeg',
text: "琴岛智能除螨电热毯 安全定时 智能控温" + index,
price: (171 + index)
})
}
this.setData({
iconList: list,
});
},
/**
* 用户搜索
*/
selectAction: function (e) {
wx.navigateTo({
url: '../Search/index',
})
},
cellAction:function (e) {
this.showToastText('点击了'+e.currentTarget.dataset['index'])
console.log('cellAction result', e.currentTarget.dataset['index'])
},
classificationAction: function(e) {
this.showToastText('点击了'+e.currentTarget.dataset['index'])
console.log('classificationAction result', e.currentTarget.dataset['index'])
},
onPullDownRefresh: function(e) {
this.loadNewData()
console.log('onPullDownRefresh result', this.data.iconList)
},
onReachBottom: function(e) {
this.loadMoreData()
console.log('onReachBottom result',this.data.iconList)
},
showToastText: function(text) {
wx.showToast({
title: text,
icon: 'success',
duration: 2000
})
}
})
\ No newline at end of file
<!--
此文件为开发者工具生成,生成时间: 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" user-select="true">新品热销榜</text>
<text class="activity-text sk-transparent sk-text-18-7500-615 sk-text" decode="true" user-select="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" user-select="true">新品热销榜</text>
<text class="activity-text sk-transparent sk-text-18-7500-437 sk-text" decode="true" user-select="true" space="false">热销爆款不容错过</text>
</view>
</view>
</view>
</view>
</template>
\ No newline at end of file
/*
此文件为开发者工具生成,生成时间: 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;
}
/* pages/Home/index.wxss */
@import "./index.skeleton.wxss";
.swiper-view {
width: 100%;
height: 340rpx;
}
.swiper {
height: 100%;
}
.slide-image {
width: 100%;
}
.search-container {
width: 100%;
height: 88rpx;
display:flex ;
align-items:center;
justify-content:center ;
/* background-color: rebeccapurple; */
background-color: rgba(240, 241, 242, 0.5);
}
.search-view {
border-radius: 50rpx;
width: calc(100% - 80rpx);
height: 60rpx;
background-color: rgb(243, 243, 243);
}
.search-v {
display:flex ;
align-items:center;
justify-content:center;
margin-top: 10rpx;
}
.search-icon {
width: 32rpx;
height: 32rpx;
margin-right: 10rpx;
}
.search-text {
font-size: 24rpx;
color: rgb(193, 193, 193);
}
.swiper-view {
height: 340rpx;
background-color: royalblue;
}
.classification-view {
height: 462rpx;
position: relative;
/* background-color: lawngreen; */
}
.classification-container {
position: absolute;
display: flex;
flex-wrap: wrap;
justify-content: center;
width: calc( 100% - 80rpx);
height: calc( 100% - 80rpx);
left: 40rpx;
top: 60rpx;
}
.itme-view {
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: 90rpx;
height: 90rpx;
}
.itme-text {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 26rpx;
}
.recommend-view {
height: 208rpx;
}
.recommend-image {
width: calc(100% - 30rpx);
height: 100%;
margin-left: 15rpx;
}
.activity-view {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-content:space-between;
height: 550rpx;
margin-top: 54rpx;
width: 100%;
}
.activity-container {
width: calc( (100% - 30rpx ) / 2);
height: calc( (100% - 10rpx ) / 2);
background-color: rosybrown;
position: relative;
}
.activity-image {
width: 100%;
height: 100%;
position: absolute;
}
.activity-text {
position: relative;
display: block;
margin-left: 30rpx;
color: rebeccapurple;
}
.title-view {
margin-top: 84rpx;
border-top: solid;
border-color: rgba(197, 197, 197, 0.2);
}
.title {
margin-left: 38rpx;
margin-top: 30rpx;
}
.list-grids {
width: 100%;
margin-top: 32rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
background-color: rgba(197, 197, 197, 0.2);
}
.cell-container {
margin-top: 4rpx;
background-color:white;
width: calc( (100% - 12rpx) / 2 );
height: 508rpx;
}
.icon-view {
margin-top: 30rpx;
margin-left: 30rpx;
background-color: seagreen;
width: calc( 100% - 60rpx);
height: calc((100vw - 120rpx - 12rpx) / 2);
}
.icon-view-text{
margin-left: 30rpx;
width: calc( 100% - 60rpx);
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.price-text {
margin-left: 30rpx;
color: lightgray;
}
\ No newline at end of file
// 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
/* pages/Order/index.wxss */
.search-container {
width: 100vw;
height: 100vh;
}
.search-container {
text-align: center;
}
\ No newline at end of file
// pages/Search/index.js
Page({
/**
* 页面的初始数据
*/
data: {
searchText:'',
isSearch:false,
goodsList:[{"icon":"../../image/group_portrait.png","title":"休闲中长厚款90分户外休闲中长厚款鹅绒羽绒服","type":"精选","originalPrice":34,"price":45},
{"icon":"../../image/group_portrait.png","title":"休闲中长厚款90分户外休闲中长厚款鹅绒羽绒服","type":"精选","originalPrice":45,"price":45},{"icon":"../../image/group_portrait.png","title":"休闲中长厚款90分户外休闲中长厚款鹅绒羽绒服","type":"精选","originalPrice":34,"price":45}],
historys:['手机','电','电脑','电视','哗哗哈哈','昌','双双','是','要','有','大厦'],
hotList:['手fffff','电sss','电ccc脑','电f视','哗哗ffff哈哈','昌','双双','是','要','有','大厦']
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
bindinput(e) {
console.log(this.data.searchText)
this.setData({
searchText:e.detail.value,
isSearch:false
})
},
bindconfirm(e) {
this.setData({
searchText:e.detail.value
})
},
searchAction() {
if (this.data.searchText.length == 0) {
return
}
let goodsList = [{"icon":"../../image/group_portrait.png","title":"休闲中长厚款90分户外休闲中长厚款鹅绒羽绒服"+this.data.searchText,"type":"精选","originalPrice":45,"price":45},
{"icon":"../../image/group_portrait.png","title":"休闲中长厚款90分户外休闲"+this.data.searchText,"type":"精选","originalPrice":45,"price":333},{"icon":"../../image/group_portrait.png","title":"休闲中长厚款90分户外休闲中长厚款鹅绒羽绒服"+this.data.searchText,"type":"精选","originalPrice":45,"price":45},{"icon":"../../image/group_portrait.png","title":"休闲中长厚款90分户外休闲中长厚款鹅绒羽绒服"+this.data.searchText,"type":"精选","originalPrice":45,"price":45}]
var list = this.data.historys
if (this.data.searchText.length > 0) {
list.push(this.data.searchText)
}
this.setData({
isSearch:true,
goodsList:goodsList,
historys:list
})
console.log(this.data.searchText)
},
tagAction(e) {
console.log(e.detail.content)
},
delectAction(e) {
this.setData({
historys:[]
})
}
})
\ No newline at end of file
/* pages/Search/index.wxss */
.search-container {
padding: 32rpx;
background: #fff;
display: flex;
align-items: center;
justify-content: space-between;
}
.search-container .search {
position: relative;
width: calc( 100% - 150rpx);
height: 66rpx;
}
.search-container .search input {
width: 100%;
height: 100%;
border-radius: 30rpx;
padding-left:60rpx;
background-color: rgba(240, 241, 242, 0.5);
}
.search-container .search image {
width: 30rpx;
height: 30rpx;
position: absolute;
top: 19rpx;
left: 19rpx;
z-index: 9999;
}
.search-container .show-type.disabled{
color: rgb(193, 193, 193);
}
.search-container .show-type{
color: rgb(1, 1, 1);
}
.tag-view {
margin-top: 50rpx;
}
.goodsList-view {
display: flex;
flex-wrap: wrap;
}
.goods-view {
width: calc( 100% / 2);
/* height: calc( 100vw / 2 + ); */
}
.goods-icon {
width: calc( 100% - 60rpx);
height: calc( (100vw - 120rpx) / 2);
margin-left: 30rpx;
}
.goods-text-view {
width: calc (100% -60rpx);
margin-left: 30rpx;
}
.goods-text-view .goods-type {
padding: 5rpx;
color: red;
border: 2rpx solid red;
margin-right: 10rpx;
}
.goods-price-view {
margin-left: 30rpx;
margin-bottom: 55rpx;
}
.goods-price-view .goods-original-price {
text-decoration: line-through;
text-decoration-color: rgb(193, 193, 193);
color: rgb(193, 193, 193);
}
\ No newline at end of file
// pages/index/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
<!--pages/index/index.wxml-->
<text>pages/index/index.wxml</text>
/* pages/index/index.wxss */
\ No newline at end of file
// pages/logs/logs.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
{
"usingComponents": {}
}
\ No newline at end of file
<!--pages/logs/logs.wxml-->
<text>pages/logs/logs.wxml</text>
/* pages/logs/logs.wxss */
\ No newline at end of file
const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
const formatNumber = n => {
n = n.toString()
return n[1] ? n : '0' + n
}
module.exports = {
formatTime: formatTime
}
const gulp = require("gulp");
const sass = require("gulp-sass");
const rename = require("gulp-rename");
const imagemin = require("gulp-imagemin");
const del = require("del");
const replace = require("gulp-replace");
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const plumber = require("gulp-plumber");
const tap = require("gulp-tap");
const path = require("path");
const notify = require("gulp-notify");
const yargs = require("yargs");
const srcPath = "./src/**";
const distPath = "./dist/";
//存放variable和mixin的sass文件在被引用时直接导入,不引入dist目录中
const DIRECTIMPORT = ["/scss/", "/font/"];
const onError = function(err) {
notify.onError({
title: "Gulp",
subtitle: "Failure!",
message: "Error: <%= error.message %>",
sound: "Beep"
})(err);
this.emit("end");
};
const wxmlFiles = [`${srcPath}/*.wxml`];
const sassFiles = [`${srcPath}/*.{scss, wxss}`];
const jsFiles = [`${srcPath}/*.js`, `!${srcPath}/env/*.js`];
const jsonFiles = [`${srcPath}/*.json`];
const imageFiles = [
`${srcPath}/images/*.{png,jpeg,jpg,gif,ico}`,
`${srcPath}/images/**/*.{png,jpeg,jpg,gif,ico}`
];
/* 清除dist目录 */
gulp.task("clean", done => {
del.sync(["dist/**"]);
done();
});
const wxml = () => {
return gulp
.src(wxmlFiles, { since: gulp.lastRun(wxml) })
.pipe(gulp.dest(distPath));
};
gulp.task(wxml);
const js = () => {
return gulp
.src(jsFiles, { since: gulp.lastRun(js) })
.pipe(gulp.dest(distPath));
};
gulp.task(js);
const envJs = env => {
return () => {
return gulp
.src(`./src/env/${env}.js`)
.pipe(rename("env.js"))
.pipe(gulp.dest(distPath));
};
};
gulp.task(envJs);
gulp.task("devEnv", envJs("dev"));
gulp.task("testEnv", envJs("tes"));
gulp.task("prodEnv", envJs("prod"));
const json = () => {
return gulp
.src(jsonFiles, { since: gulp.lastRun(json) })
.pipe(gulp.dest(distPath));
};
gulp.task(json);
const wxss = () => {
return gulp
.src([...sassFiles, ...DIRECTIMPORT.map(item => `!${srcPath}/${item}/*`)], {
since: gulp.lastRun(wxss)
})
.pipe(plumber({ errorHandler: onError }))
.pipe(
tap(file => {
const filePath = path.dirname(file.path);
//console.log("filepath", filePath);
file.contents = Buffer.from(
String(file.contents).replace(
/@import\s+['|"](.+)['|"];/g,
($1, $2) => {
// console.log("$1", $1);
// console.log("$2", $2);
return DIRECTIMPORT.some(item => {
return $2.indexOf(item) > -1;
})
? $1
: `/** ${$1} **/`;
}
)
);
})
)
.pipe(sass())
.pipe(postcss([autoprefixer(["iOS >= 8", "Android >= 4.1"])]))
.pipe(
replace(/(\/\*\*\s{0,})(@.+)(\s{0,}\*\*\/)/g, ($1, $2, $3) => {
//console.log("$1", $1);
//console.log("$2", $2);
//console.log("$3", $3);
return $3.replace(/\.scss/g, ".wxss");
})
)
.pipe(rename({ extname: ".wxss" }))
.pipe(gulp.dest(distPath));
};
gulp.task(wxss);
const img = () => {
return gulp
.src(imageFiles, { since: gulp.lastRun(img) })
.pipe(imagemin())
.pipe(gulp.dest(distPath));
};
gulp.task(img);
const newfile = done => {
yargs
.example("gulp new -p mypage", "创建mypage的page目录")
.example("gulp new -c mycomponent", "创建mycomponent的component目录")
.example(
"gulp new -s srcfile -p mypage",
"以srcfile为模版创建mypage的page目录"
)
.option({
s: {
alias: "src",
describe: "模板",
type: "string",
default: "template"
},
p: {
alias: "page",
describe: "page名称",
type: "string"
},
c: {
alias: "component",
describe: "component名称",
type: "string"
},
t: {
alias: "template",
describe: "template名称",
type: "string"
}
})
.fail(msg => {
done();
console.error("创建失败");
console.log(msg);
console.log("help");
yargs.parse(["--msg"]);
})
.help("msg");
const args = yargs.argv;
const source = args.s;
const filePaths = {
p: "pages",
c: "components"
};
let name,
type,
hasParam = false;
for (let key in filePaths) {
if (args[key]) {
hasParam = true;
name = args[key];
type = filePaths[key];
}
}
if (!hasParam) {
done();
yargs.parse(["--msg"]);
}
const defaultPath =
source === "template"
? `src/${source}/${type}/*`
: `src/${type}/${source}/*`;
return gulp.src(defaultPath).pipe(gulp.dest(`src/${type}/${name}/`));
};
gulp.task("new", newfile);
gulp.task("watch", done => {
const watchSassFiles = [
...sassFiles,
...DIRECTIMPORT.map(item => `!${srcPath}/${item}/**/*`)
];
gulp.watch(watchSassFiles, wxss);
gulp.watch(jsFiles, js);
gulp.watch(jsonFiles, json);
gulp.watch(imageFiles, img);
gulp.watch(wxmlFiles, wxml);
done();
});
gulp.task(
"build",
gulp.series(
"clean",
gulp.parallel("wxml", "js", "json", "wxss", "img", "prodEnv")
)
);
gulp.task(
"dev",
gulp.series(
"clean",
gulp.parallel("wxml", "js", "json", "wxss", "img", "devEnv"),
"watch"
)
);
gulp.task(
"test",
gulp.series(
"clean",
gulp.parallel("wxml", "js", "json", "wxss", "img", "testEnv")
)
);
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"name": "chengjingpremiummember",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git@git.changein.cn:xzc168520/ChengjingPremiumMember.git"
},
"author": "nemo",
"license": "ISC",
"devDependencies": {
"gulp": "^4.0.2",
"gulp-clean": "^0.4.0",
"gulp-rename": "^2.0.0",
"gulp-replace": "^1.0.0",
"gulp-sass": "^4.1.0",
"gulp-tap": "^2.0.0"
},
"dependencies": {
"autoprefixer": "^9.7.3",
"babel-eslint": "^8.2.1",
"del": "^5.1.0",
"eslint": "^4.18.2",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-prettier": "^2.3.1",
"fs": "0.0.1-security",
"gulp": "^4.0.2",
"gulp-imagemin": "^6.2.0",
"gulp-notify": "^3.2.0",
"gulp-plumber": "^1.2.1",
"gulp-postcss": "^8.0.0",
"gulp-rename": "^1.4.0",
"gulp-replace": "^1.0.0",
"gulp-sass": "^4.0.2",
"gulp-tap": "^2.0.0",
"path": "^0.12.7",
"prettier": "^1.8.2",
"yargs": "^15.3.1"
}
}
//app.js
App({
onLaunch: function () {
onLaunch: function() {
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
var logs = wx.getStorageSync("logs") || [];
logs.unshift(Date.now());
wx.setStorageSync("logs", logs);
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
});
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
if (res.authSetting["scope.userInfo"]) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
this.globalData.userInfo = res.userInfo;
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
this.userInfoReadyCallback(res);
}
}
})
});
}
}
})
});
},
globalData: {
userInfo: null
}
})
\ No newline at end of file
});
......@@ -3,9 +3,7 @@
"pages/Home/index",
"pages/Cart/index",
"pages/Search/index",
"pages/Order/index",
"pages/index/index",
"pages/logs/logs"
"pages/Order/index"
],
"entryPagePath": "pages/Home/index",
"tabBar": {
......
/**app.wxss**/
.container {
@import './scss/variables.scss';
@import './styles/common.scss';
.container{
width: 100%;
height: 100%;
padding: 0;
box-sizing: border-box;
......
Component({
properties: {
showDelect: Boolean,
flexList: Array,
title: String // 简化的定义方式
},
externalClasses: ["super-class"],
data: {},
methods: {
// 这里是一个自定义方法
tagAction(e) {
var eventOption = { content: e.currentTarget.dataset.text }; // 触发事件的选项
this.triggerEvent("tagClick", eventOption);
},
delectAction() {
this.triggerEvent("delectClick");
}
}
});
.tag-container {
padding-left: 40rpx;
.tag-view {
padding: 10rpx 0;
border-bottom: 2rpx solid rgba(240, 241, 242, 1);
text {
color: rgb(193, 193, 193);
}
image {
width: 40rpx;
height: 44rpx;
margin-right: 40rpx;
}
}
.flex-container {
padding-right: 40rpx;
.flex-view {
display: inline-block;
margin: 20rpx 20rpx 0 0;
padding: 5rpx 10rpx;
color: rgb(176, 185, 194);
border: 2rpx solid rgb(240, 241, 242);
.flex-container {
background-color: rebeccapurple;
padding-right: 40rpx;
}
}
}
}
<!--Common/TagView/index.wxml-->
<view class="tag-container" hover-class="none" hover-stop-propagation="false" wx:if="{{flexList.length > 0}}">
<view class="tag-view">
<view class="tag-view super-class">
<text selectable="false" space="false" decode="false">{{title}}</text>
<image src="../../image/delete.png" lazy-load="false" wx:if="{{showDelect}}" bind:tap="delectAction"/>
<image src="../../images/delete.png" lazy-load="false" wx:if="{{showDelect}}" bind:tap="delectAction"/>
</view>
<view class="flex-container">
<scroll-view scroll-y="true" style="height: 250rpx; width:100%;">
......
/*
* @Descripttion: 开发环境
*/
const API_URL = {
host: "http://xxdev.xxx.com",
r: "https://xxr.xxx.com"
};
module.exports = API_URL;
/*
* @Descripttion: 生产环境
*/
const API_URL = {
host: "http://xxprod.xxx.com",
r: "https://xxr.xxx.com"
};
module.exports = API_URL;
/*
* @Descripttion: 测试环境
*/
const API_URL = {
host: "http://xxtest.xxx.com",
r: "https://xxr.xxx.com"
};
module.exports = API_URL;
// pages/Cart/index.js
Page({
/**
* 页面的初始数据
*/
data: {
goodsList:[],
loading:true,
selectCount:0,
selectGoodsSource:[],
imageUrl:'../../image/640.jpeg',
imageIcon:'../../image/group_portrait.png',
isSelectAll:false,
totalPrice:0,
slideButtons: [{
type: 'warn',
text: '删除',
extClass: 'test',
src: 'icon_del.svg', // icon的路径
}],
goodsList: [],
loading: true,
selectCount: 0,
selectGoodsSource: [],
imageUrl: "../../images/640.jpeg",
imageIcon: "../../images/group_portrait.png",
isSelectAll: false,
totalPrice: 0,
slideButtons: [
{
type: "warn",
text: "删除",
extClass: "test",
src: "icon_del.svg" // icon的路径
}
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function () {
onLoad: function() {
setTimeout(() => {
this.setData({
loading:false
})
this.loadNewData()
}, 2000)
loading: false
});
this.loadNewData();
}, 2000);
},
loadMoreData() {
let goods = this.data.goodsList;
for (let index = 0; index < 7; index++) {
goods.push({
isSelect:false,
goodsPrice:(199 % 3)+index,
goodsCount:index+1,
goodsUrl:(index % 2)?'../../image/group_portrait.png':'../../image/640.jpeg',
goodsName:'90分户外休闲中长厚款鹅绒羽绒服' + index,
goodsSpec:'XL;黑色 2' + index
})
isSelect: false,
goodsPrice: (199 % 3) + index,
goodsCount: index + 1,
goodsUrl:
index % 2
? "../../images/group_portrait.png "
: "../../images/640.jpeg",
goodsName: "90分户外休闲中长厚款鹅绒羽绒服" + index,
goodsSpec: "XL;黑色 2" + index
});
}
this.setData({
goodsList:goods
})
wx.stopPullDownRefresh()
goodsList: goods
});
wx.stopPullDownRefresh();
},
loadNewData() {
this.data.goodsList = []
this.loadMoreData()
this.data.goodsList = [];
this.loadMoreData();
},
orderAction(e) {
wx.navigateTo({
url: '../Order/index',
})
url: "../Order/index"
});
// let selectCount = this.data.selectCount
// if (selectCount <= 0) {
// return
......@@ -75,186 +77,181 @@ Page({
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
this.loadNewData()
onPullDownRefresh: function() {
this.loadNewData();
this.setData({
isSelectAll:false,
isSelectAll: false,
selectGoodsSource: [],
totalPrice: 0,
selectCount: 0
})
});
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
onReachBottom: function() {
// this.loadMoreData()
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
delectGoods(index) {
if (index >= this.data.goodsList.length) {
console.log('大于数量', index)
return
console.log("大于数量", index);
return;
}
var goodsList = this.data.goodsList
let goods = goodsList[index]
var goodsList = this.data.goodsList;
let goods = goodsList[index];
goodsList.splice(index, 1)
goodsList.splice(index, 1);
let selectGoodsSource = this.data.selectGoodsSource.filter(item => {
if (item.goodsName != goods.goodsName) {
return item
return item;
}
})
});
var totalPrice = this.data.totalPrice
var totalPrice = this.data.totalPrice;
var selectCount = this.data.selectCount;
if (goods.isSelect) {
totalPrice = totalPrice - (goods.goodsCount * goods.goodsPrice)
selectCount = selectGoodsSource.length
totalPrice = totalPrice - goods.goodsCount * goods.goodsPrice;
selectCount = selectGoodsSource.length;
}
var isSelectAll = this.data.isSelectAll
var isSelectAll = this.data.isSelectAll;
if (selectGoodsSource.length == 0) {
isSelectAll = false
isSelectAll = false;
}
this.setData({
isSelectAll:isSelectAll,
goodsList:goodsList,
isSelectAll: isSelectAll,
goodsList: goodsList,
selectGoodsSource: selectGoodsSource,
totalPrice: totalPrice,
selectCount: selectCount
})
});
},
slideButtonTap(e) {
const index = e.currentTarget.dataset.index;
this.delectGoods(index);
},
allSelectAction() {
var isSelectAll = !this.data.isSelectAll
var selectGoodsSource = []
var isSelectAll = !this.data.isSelectAll;
var selectGoodsSource = [];
if (!isSelectAll) {
this.data.totalPrice = 0
this.data.totalPrice = 0;
for (let i = 0; i < this.data.goodsList.length; i++) {
let goods = this.data.goodsList[i]
let goods = this.data.goodsList[i];
goods.isSelect = isSelectAll;
}
}else{
var unSelectGoods = this.data.goodsList.filter(goods => 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]
let goods = unSelectGoods[i];
goods.isSelect = isSelectAll;
this.data.totalPrice = this.data.totalPrice + (goods.goodsPrice * goods.goodsCount)
selectGoodsSource.push(goods)
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
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,
})
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
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)
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
return item;
}
})
});
}
let goodsList = this.data.goodsList
let isSelectAll = selectGoodsSource.length == goodsList.length
let goodsList = this.data.goodsList;
let isSelectAll = selectGoodsSource.length == goodsList.length;
this.setData({
isSelectAll: isSelectAll,
selectGoodsSource: selectGoodsSource,
goodsList: goodsList,
selectCount:selectGoodsSource.length,
totalPrice: totalPrice,
})
selectCount: selectGoodsSource.length,
totalPrice: totalPrice
});
},
addBtnTap(e) {
let goodsList = this.data.goodsList
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
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: '超出库存数!',
title: "超出库存数!",
duration: 1500,
complete: ()=>{
console.log('inputAction tap', e)
let goodsList = this.data.goodsList
complete: () => {
let goodsList = this.data.goodsList;
this.setData({
goodsList:goodsList
})
goodsList: goodsList
});
}
});
return
return;
}
const index = e.currentTarget.dataset.index;
this.data.goodsList[index].goodsCount = goodsCount
this.data.goodsList[index].goodsCount = goodsCount;
this.setData({
goodsList:this.data.goodsList
})
console.log('inputAction tap', e)
goodsList: this.data.goodsList
});
},
reduceBtnTap(e) {
let goodsList = this.data.goodsList
let goodsList = this.data.goodsList;
const index = e.currentTarget.dataset.index;
const goods = goodsList[index]
const number = goods.goodsCount-1
const goods = goodsList[index];
const number = goods.goodsCount - 1;
if (number <= 0) {
// 弹出删除确认
wx.showModal({
content: '确定要删除该商品吗?',
success: (res) => {
content: "确定要删除该商品吗?",
success: res => {
if (res.confirm) {
this.delectGoods(index)
this.delectGoods(index);
}
}
})
return
});
return;
}
let totalPrice = this.data.totalPrice
let totalPrice = this.data.totalPrice;
if (goods.isSelect) {
totalPrice = totalPrice - goods.goodsPrice
totalPrice = totalPrice - goods.goodsPrice;
}
goods.goodsCount = number
goods.goodsCount = number;
this.setData({
goodsList: goodsList,
totalPrice: totalPrice
})
});
},
showToast(text) {
wx.showToast({
......@@ -262,4 +259,4 @@ Page({
duration: 1500
});
}
})
\ No newline at end of file
});
.container {
.table-view {
padding-bottom: 98rpx;
.goods-container-view {
display: flex;
justify-content: flex-start;
.goods-content {
margin-left: 20rpx;
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-name {
font-size: 26rpx;
color: rgb(33, 33, 33);
}
.goods-spec {
font-size: 24rpx;
color: rgb(153, 153, 153);
}
.goods-price {
font-size: 24rpx;
color: rgb(40, 40, 40);
}
}
.buy-num {
width: 164rpx;
height: 48rpx;
line-height: 48rpx;
position: absolute;
right: 60rpx;
bottom: 30rpx;
display: flex;
font-size: 24rpx;
text-align: center;
.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;
}
.reduce-btn.disabled {
background-color: #f5f5f9;
border-left: 1rpx solid #eee;
border-bottom: 1rpx solid #eee;
border-top: 1rpx solid #eee;
color: #ccc;
}
.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;
}
.add-btn.disabled {
background-color: #f5f5f9;
border-right: 1rpx solid #eee;
border-bottom: 1rpx solid #eee;
border-top: 1rpx solid #eee;
color: #ccc;
}
input {
width: 68rpx;
height: 48rpx;
min-height: 48rpx;
text-align: center;
font-size: 24rpx;
border: 1rpx solid #ccc;
}
}
}
}
.goods-view {
display: flex;
align-items: center;
.goods-select-icon {
width: 36rpx;
height: 36rpx;
}
.goods-icon {
margin-left: 10rpx;
width: 150rpx;
height: 150rpx;
}
}
.shopping-cart-counter-view {
display: flex;
justify-content: space-between;
width: 100%;
height: 100rpx;
position: fixed;
bottom: 0;
left: 0;
border-bottom: 2rpx solid #eee;
border-top: 2rpx solid #eee;
background-color: #fff;
z-index: 999;
.all-select-view {
display: flex;
align-items: center;
margin-left: 30rpx;
height: 100%;
.select-button {
margin-right: 10rpx;
width: 36rpx;
height: 36rpx;
}
text {
margin-right: 10rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.price-view {
display: flex;
width: 510rpx;
justify-content: flex-end;
line-height: 100rpx;
font-size: 28rpx;
box-sizing: border-box;
}
.total {
color: #e64340;
padding-right: 30rpx;
}
.to-pay-btn {
width: 240rpx;
text-align: center;
line-height: 100rpx;
background-color: #e64340;
font-size: 32rpx;
color: #fff;
margin-top: 2rpx;
}
}
}
\ No newline at end of file
......@@ -6,7 +6,7 @@
<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-select-icon" src="{{goods.isSelect?'../../images/check_t.png ':'../../images/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">
......@@ -26,7 +26,7 @@
</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" bindtap="allSelectAction">
<image class="select-button" src="{{isSelectAll?'../../image/check_t.png ':'../../image/check_f.png'}}" />
<image class="select-button" src="{{isSelectAll?'../../images/check_t.png ':'../../images/check_f.png'}}" />
<text user-select="false" space="false" decode="false">已选择</text>
</view>
<view class="price-view">
......@@ -37,6 +37,3 @@
</view>
</view>
</view>
<import src="index.skeleton.wxml"/>
<template is="skeleton" wx-if="{{loading}}" />
\ No newline at end of file
Page({
/**
* 页面的初始数据
*/
data: {
i: 0,
loading: true,
imageUrl: "../../images/640.jpeg",
imageIcon: "../../images/group_portrait.png",
bannerList: ["../../images/640.jpeg", "../../images/640.jpeg"],
classifications: [
"居家",
"鞋包配饰",
"服装",
"电器",
"婴童",
"饮食",
"特色区",
"洗护",
"餐厨",
"文体"
],
activityList: [
{
icon: "../../images/640.jpeg",
text: "新品热销榜",
subText: "热销爆款不容错过",
id: 1
},
{
icon: "../../images/640.jpeg",
text: "新品热销榜",
subText: "热销爆款不容错过",
id: 2
},
{
icon: "../../images/640.jpeg",
text: "新品热销榜",
subText: "热销爆款不容错过",
id: 3
},
{
icon: "../../images/640.jpeg",
text: "新品热销榜",
subText: "热销爆款不容错过",
id: 4
}
],
iconList: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
// this.setData({
// search: this.search.bind(this)
// })
setTimeout(() => {
this.setData({
loading: false
});
this.loadNewData();
}, 2000);
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {},
loadNewData: function() {
this.data.iconList = [];
this.loadMoreData();
},
loadMoreData: function() {
let list = this.data.iconList;
for (let index = 0; index < 20; index++) {
list.push({
icon:
index % 2 ? "../../images/plus_dark.png" : "../../images/640.jpeg",
text: "琴岛智能除螨电热毯 安全定时 智能控温" + index,
price: 171 + index
});
}
this.setData({
iconList: list
});
},
/**
* 用户搜索
*/
selectAction: function(e) {
wx.navigateTo({
url: "../Search/index"
});
},
cellAction: function(e) {
this.showToastText("点击了" + e.currentTarget.dataset["index"]);
console.log("cellAction result", e.currentTarget.dataset["index"]);
},
classificationAction: function(e) {
this.showToastText("点击了" + e.currentTarget.dataset["index"]);
console.log(
"classificationAction result",
e.currentTarget.dataset["index"]
);
},
onPullDownRefresh: function(e) {
this.loadNewData();
console.log("onPullDownRefresh result", this.data.iconList);
},
onReachBottom: function(e) {
this.loadMoreData();
console.log("onReachBottom result", this.data.iconList);
},
showToastText: function(text) {
wx.showToast({
title: text,
icon: "success",
duration: 2000
});
}
});
.container {
.swiper-view {
width: 100%;
height: 340rpx;
background-color: royalblue;
.swiper {
height: 100%;
}
.slide-image {
width: 100%;
}
}
.search-container {
width: 100%;
height: 88rpx;
display:flex ;
align-items:center;
justify-content:center ;
/* background-color: rebeccapurple; */
background-color: rgba(240, 241, 242, 0.5);
.search-view {
border-radius: 50rpx;
width: calc(100% - 80rpx);
height: 60rpx;
background-color: rgb(243, 243, 243);
.search-v {
display:flex ;
align-items:center;
justify-content:center;
margin-top: 10rpx;
}
image {
width: 32rpx;
height: 32rpx;
margin-right: 10rpx;
}
text {
font-size: 24rpx;
color: rgb(193, 193, 193);
}
}
}
.classification-view {
height: 462rpx;
position: relative;
/* background-color: lawngreen; */
.classification-container {
position: absolute;
display: flex;
flex-wrap: wrap;
justify-content: center;
width: calc( 100% - 80rpx);
height: calc( 100% - 80rpx);
left: 40rpx;
top: 60rpx;
}
.itme-view {
margin-right: 15rpx;
margin-left: 15rpx;
width: calc( (100% - 200rpx) / 5);
height: calc( (100% - 58rpx) / 2);
text-align: center;
color: rgb(102, 102,102);
image {
width: 90rpx;
height: 90rpx;
}
text {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 26rpx;
}
}
}
.recommend-view {
height: 208rpx;
image {
width: calc(100% - 30rpx);
height: 100%;
margin-left: 15rpx;
}
}
.activity-view {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-content:space-between;
height: 550rpx;
margin-top: 54rpx;
width: 100%;
.activity-container {
width: calc( (100% - 30rpx ) / 2);
height: calc( (100% - 10rpx ) / 2);
background-color: rosybrown;
position: relative;
}
image {
width: 100%;
height: 100%;
position: absolute;
}
text {
position: relative;
display: block;
margin-left: 30rpx;
color: rebeccapurple;
}
}
.title-view {
margin-top: 84rpx;
border-top: solid;
border-color: rgba(197, 197, 197, 0.2);
text {
margin-left: 38rpx;
margin-top: 30rpx;
}
}
.list-grids {
width: 100%;
margin-top: 32rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
background-color: rgba(197, 197, 197, 0.2);
.cell-container {
margin-top: 4rpx;
background-color:white;
width: calc( (100% - 12rpx) / 2 );
height: 508rpx;
.icon-view {
margin-top: 30rpx;
margin-left: 30rpx;
background-color: seagreen;
width: calc( 100% - 60rpx);
height: calc((100vw - 120rpx - 12rpx) / 2);
}
.icon-view-text{
margin-left: 30rpx;
width: calc( 100% - 60rpx);
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.price-text {
margin-left: 30rpx;
color: lightgray;
}
}
}
}
\ No newline at end of file
......@@ -6,8 +6,8 @@
<view class='search-container' bindtap="selectAction">
<view class='search-view'>
<view class='search-v'>
<image src='../../image/search.png' class="search-icon"></image>
<text class="search-text"> 搜索商品,发现好物</text>
<image src='../../images/search.png'></image>
<text> 搜索商品,发现好物</text>
</view>
</view>
</view>
......@@ -24,26 +24,26 @@
<view class="classification-container" hover-class="none" hover-stop-propagation="false">
<block wx:for="{{classifications}}" wx:key="itme" wx:for-item="text">
<view class="itme-view" hover-class="none" hover-stop-propagation="false" bindtap="classificationAction" data-index="{{text}}">
<image class="itme-icon" src="../../image/group_portrait.png" mode="aspectFill" />
<text class="itme-text">{{text}}</text>
<image src="../../images/group_portrait.png" mode="aspectFill" />
<text>{{text}}</text>
</view>
</block>
</view>
</view>
<view class="recommend-view">
<image class="recommend-image" src="{{imageUrl}}" mode="aspectFill"/>
<image src="{{imageUrl}}" mode="aspectFill"/>
</view>
<view class="activity-view">
<block wx:for="{{activityList}}" wx:key="itme" wx:for-item="obj">
<view class="activity-container">
<image class="activity-image" src="{{imageUrl}}" mode="aspectFill"/>
<text class="activity-text" user-select="false" decode="false">{{obj.text}}</text>
<text class="activity-text" user-select="false" space="false" decode="false">{{obj.subText}}</text>
<image src="{{obj.icon}}" mode="aspectFill"/>
<text user-select="false" decode="false">{{obj.text}}</text>
<text user-select="false" space="false" decode="false">{{obj.subText}}</text>
</view>
</block>
</view>
<view class="title-view">
<text class="title">每日精选</text>
<text>每日精选</text>
</view>
<view class="list-grids">
<block wx:for="{{iconList}}" wx:key="itme" wx:for-item="obj">
......@@ -60,7 +60,3 @@
</view>
<!-- </scroll-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
// pages/Order/index.js
Page({
/**
* 页面的初始数据
*/
data: {},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {}
});
.container {
.search-container {
width: 100vw;
height: 100vh;
}
.search-container {
text-align: center;
}
}
\ No newline at end of file
// pages/Search/index.js
Page({
/**
* 页面的初始数据
*/
data: {
searchText: "",
isSearch: false,
goodsList: [
{
icon: "../../images/group_portrait.png",
title: "休闲中长厚款90分户外休闲中长厚款鹅绒羽绒服",
type: "精选",
originalPrice: 34,
price: 45
},
{
icon: "../../images/group_portrait.png",
title: "休闲中长厚款90分户外休闲中长厚款鹅绒羽绒服",
type: "精选",
originalPrice: 45,
price: 45
},
{
icon: "../../images/group_portrait.png",
title: "休闲中长厚款90分户外休闲中长厚款鹅绒羽绒服",
type: "精选",
originalPrice: 34,
price: 45
}
],
historys: [
"手机",
"电",
"电脑",
"电视",
"哗哗哈哈",
"昌",
"双双",
"是",
"要",
"有",
"大厦"
],
hotList: [
"手fffff",
"电sss",
"电ccc脑",
"电f视",
"哗哗ffff哈哈",
"昌",
"双双",
"是",
"要",
"有",
"大厦"
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {},
bindinput(e) {
console.log(this.data.searchText);
this.setData({
searchText: e.detail.value,
isSearch: false
});
},
bindconfirm(e) {
this.setData({
searchText: e.detail.value
});
},
searchAction() {
if (this.data.searchText.length == 0) {
return;
}
let goodsList = [
{
icon: "../../images/group_portrait.png",
title:
"休闲中长厚款90分户外休闲中长厚款鹅绒羽绒服" + this.data.searchText,
type: "精选",
originalPrice: 45,
price: 45
},
{
icon: "../../images/group_portrait.png",
title: "休闲中长厚款90分户外休闲" + this.data.searchText,
type: "精选",
originalPrice: 45,
price: 333
},
{
icon: "../../images/group_portrait.png",
title:
"休闲中长厚款90分户外休闲中长厚款鹅绒羽绒服" + this.data.searchText,
type: "精选",
originalPrice: 45,
price: 45
},
{
icon: "../../images/group_portrait.png",
title:
"休闲中长厚款90分户外休闲中长厚款鹅绒羽绒服" + this.data.searchText,
type: "精选",
originalPrice: 45,
price: 45
}
];
var list = this.data.historys;
if (this.data.searchText.length > 0) {
list.push(this.data.searchText);
}
this.setData({
isSearch: true,
goodsList: goodsList,
historys: list
});
console.log(this.data.searchText);
},
tagAction(e) {
console.log(e.detail.content);
},
delectAction(e) {
this.setData({
historys: []
});
}
});
.container {
.search-container {
padding: 32rpx;
background: #fff;
display: flex;
align-items: center;
justify-content: space-between;
.search {
position: relative;
width: calc( 100% - 150rpx);
height: 66rpx;
input {
width: 100%;
height: 100%;
border-radius: 30rpx;
padding-left:60rpx;
background-color: rgba(240, 241, 242, 0.5);
}
image {
width: 30rpx;
height: 30rpx;
position: absolute;
top: 19rpx;
left: 19rpx;
z-index: 9999;
}
}
.show-type.disabled{
color: rgb(193, 193, 193);
}
.show-type{
color: rgb(1, 1, 1);
}
}
.tag-view {
margin-top: 50rpx;
}
.goodsList-view {
display: flex;
flex-wrap: wrap;
.goods-view {
width: calc( 100% / 2);
/* height: calc( 100vw / 2 + ); */
.goods-icon {
width: calc( 100% - 60rpx);
height: calc( (100vw - 120rpx) / 2);
margin-left: 30rpx;
}
.goods-text-view {
width: calc (100% -60rpx);
margin-left: 30rpx;
.goods-type {
padding: 5rpx;
color: red;
border: 2rpx solid red;
margin-right: 10rpx;
}
}
.goods-price-view {
margin-left: 30rpx;
margin-bottom: 55rpx;
.goods-original-price {
text-decoration: line-through;
text-decoration-color: rgb(193, 193, 193);
color: rgb(193, 193, 193);
}
}
}
}
}
\ No newline at end of file
......@@ -4,13 +4,13 @@
<view class="search-container" hover-class="none" hover-stop-propagation="false">
<view class="search">
<input type="text" placeholder="请输入商品名称" value="{{searchText}}" bindinput="bindinput" bindconfirm="bindconfirm" bindfocus="bindfocus"></input>
<image src="../../image/search.png" bindtap="search"></image>
<image src="../../images/search.png" bindtap="search"></image>
</view>
<text class="show-type {{searchText.length == 0?'disabled':''}}" space="false" decode="false" bindtap="searchAction">搜索</text>
</view>
<view class="tag-view" hover-class="none" hover-stop-propagation="false" wx:if="{{!isSearch}}">
<TagView title="历史搜索" showDelect="{{true}}" flexList="{{historys}}" bind:tagClick="tagAction" bind:delectClick="delectAction"/>
<TagView title="热门搜索" showDelect="{{false}}" flexList="{{hotList}}" bind:tagClick="tagAction"/>
<TagView super-class="display-flex flex-j-between flex-a-center" title="历史搜索" showDelect="{{true}}" flexList="{{historys}}" bind:tagClick="tagAction" bind:delectClick="delectAction"/>
<TagView super-class="display-flex flex-j-between flex-a-center" title="热门搜索" showDelect="{{false}}" flexList="{{hotList}}" bind:tagClick="tagAction"/>
</view>
<view class="goodsList-view" hover-class="none" hover-stop-propagation="false" wx:else>
<view class="goods-view" hover-class="none" hover-stop-propagation="false" wx:for="{{goodsList}}" wx:key="index" wx:for-item="obj">
......
{
"description": "项目配置文件",
"miniprogramRoot": "CJPremiumMember/",
"packOptions": {
"ignore": []
},
......
// copy changein -> common/scss/style
@import '../scss/variables.scss';
.flex-1 {
flex: 1;
};
.flex-center{
display: flex;
align-items: center;
justify-content: center;
}
// text overflow
.text-ellipsis {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// flex
.display-flex {
display: flex;
}
.flex-column {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
\ No newline at end of file
// copy changein -> common/scss/_variables
$base-font-size: 26rpx;
$font-sizes: (
xxs: 0.6923,
// 18rpx
xs: 0.7692,
// 20rpx
ssm: 0.8462,
// 22rpx
sm: 0.9230,
// 24rpx
md: 1,
// 26rpx
lg: 1.0769,
// 28rpx
xl: 1.1538,
// 30rpx
);
// spacing
// 0-5: 0
// .mt-1 => margin top .pb-2
$spacing-types: (
m: margin,
p: padding,
);
$spacing-directions: (
t: top,
r: right,
b: bottom,
l: left,
);
@each $sizeKey, $size in $font-sizes {
.fs-#{$sizeKey} {
font-size: $size * $base-font-size;
}
}
// text align
@each $var in (left, center, right) {
.text-#{$var} {
text-align: $var !important;
}
}
$flex-justify-content: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
);
$flex-align-items: (
start: flex-start,
end: flex-end,
center: center,
stretch: stretch,
);
@each $key, $value in $flex-justify-content {
.flex-j-#{$key} {
justify-content: $value;
}
}
@each $key, $value in $flex-align-items {
.flex-a-#{$key} {
align-items: $value;
}
}
\ No newline at end of file
@import '../scss/style.scss';
$colors: (
"theme-color": #8FBC8F,
);
$tc: map-get($colors, "theme-color");
@mixin width($value: 100%) {
width: $value;
}
@mixin height($value: 100%) {
height: $value;
}
// width, height
.w-100 {
@include width();
}
.h-100 {
@include height();
}
/**
* 除继承样式外, app.wxss 中的样式、组件所在页面的的样式对自定义组件无效。
* 参考文档:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
* 采用 externalClasses 的方式 在组件.wxml需要的view的class加super-class,可以是多个
* 使用 <Component super-class="<#type#>" />
*/
Component({
properties: {
showDelect: Boolean,
flexList: Array,
title: String // 简化的定义方式
},
externalClasses: ["super-class"],
data: {
content: "content"
},
methods: {
// 这里是一个自定义方法
tagAction(e) {
var eventOption = { content: e.currentTarget.dataset.text }; // 触发事件的选项
this.triggerEvent("tagClick", eventOption);
}
}
});
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
.container {
width: 100vw;
.text {
color: red;
}
}
\ No newline at end of file
<!--template/components/index.wxml-->
<view class="container" hover-class="none" hover-stop-propagation="false">
<text class="flex-item super-class" selectable="false" space="false" decode="false" bindtap="tagAction" data-text="{{content}}">{{content}}</text>
</view>
// pages/index.js
Page({
/**
* 页面的初始数据
*/
data: {
content: "index"
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
console.log("onLoad");
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
console.log("onShareAppMessage");
}
});
{
"usingComponents": {}
}
\ No newline at end of file
.container {
width: 100vw;
.text {
color: red;
}
}
\ No newline at end of file
<view class='container'>
<text class="text">{{content}}</text>
</view>
\ No newline at end of file
......@@ -9,12 +9,12 @@
"tabBarBorderStyle": "black",
"tabBarBackgroundColor": "#F7F7F7",
"iconPathComponent": "image/icon_component.png",
"selectedIconPathComponent": "image/icon_component_HL.png",
"iconPathAPI": "image/icon_API.png",
"selectedIconPathAPI": "image/icon_API_HL.png",
"iconPathCloud": "image/icon_cloud.png",
"selectedIconPathCloud": "image/icon_cloud_HL.png",
"iconPathComponent": "images/icon_component.png",
"selectedIconPathComponent": "images/icon_component_HL.png",
"iconPathAPI": "images/icon_API.png",
"selectedIconPathAPI": "images/icon_API_HL.png",
"iconPathCloud": "images/icon_cloud.png",
"selectedIconPathCloud": "images/icon_cloud_HL.png",
"backgroundTextStyle": "dark"
},
......@@ -28,12 +28,12 @@
"tabBarBorderStyle": "white",
"tabBarBackgroundColor": "#1F1F1F",
"iconPathComponent": "image/icon_component_dark.png",
"selectedIconPathComponent": "image/icon_component_HL.png",
"iconPathAPI": "image/icon_API_dark.png",
"selectedIconPathAPI": "image/icon_API_HL.png",
"iconPathCloud": "image/icon_cloud_dark.png",
"selectedIconPathCloud": "image/icon_cloud_HL.png",
"iconPathComponent": "images/icon_component_dark.png",
"selectedIconPathComponent": "images/icon_component_HL.png",
"iconPathAPI": "images/icon_API_dark.png",
"selectedIconPathAPI": "images/icon_API_HL.png",
"iconPathCloud": "images/icon_cloud_dark.png",
"selectedIconPathCloud": "images/icon_cloud_HL.png",
"backgroundTextStyle": "light"
}
......
export function beforeFn(fn, inject) {
return (...args) => {
try {
inject(...args);
fn.call(this, ...args);
} catch (error) {
console.warn(error);
fn.call(this, ...args);
}
};
}
export function afterFn(fn, inject) {
return (...args) => {
try {
fn.call(this, ...args);
inject(...args);
} catch (error) {
console.warn(error);
fn.call(this, ...args);
}
};
}
import ExpireCache from './ExpireCache';
export default class Buffer extends ExpireCache {
static cacheMap = new Map();
}
export default class CacheItem {
/**
* 缓存item
* @param {Any} data 缓存数据
* @param {Number} timeout 缓存时长,计算缓存过期时间,单位-秒
* @param {Any} cacheLabel 缓存标记,对比标记极端缓存是否过期
*/
constructor(data, timeout, cacheLabel = null) {
this.data = data;
this.cacheLabel = cacheLabel;
this.expireTime = timeout ? new Date().getTime() + timeout * 1000 : null;
}
}
import CacheItem from './CacheItem';
export default class ExpireCache extends CacheItem {
constructor(data, timeout, cacheLabel) {
super(data, timeout, cacheLabel);
}
// 定义静态数据map来作为缓存池
static cacheMap = new Map();
// 数据是否过期
static isExpire(name, curCacheLabel) {
const data = this.cacheMap.get(name);
// 没有数据 一定过期
if (!data) return true;
// 获取系统当前时间戳
const { expireTime, cacheLabel } = data;
const currentTime = new Date().getTime();
// 缓存含过期时间&&已过期
const timeExpire = expireTime && currentTime > expireTime;
// 缓存含过期标记&&标记已变化
const labelExpire = curCacheLabel && cacheLabel && curCacheLabel !== cacheLabel;
if (timeExpire || labelExpire) {
this.cacheMap.delete(name);
return true;
}
// 不过期
return false;
}
// 当前data在 cache 中是否过期 - 判断时间&标记
static has(name, cacheLabel) {
return !this.isExpire(name, cacheLabel);
}
// 删除
static delete(name) {
return this.cacheMap.delete(name);
}
/**
* 获取,如有过期标记需要传入过期标记或者先用has判断
* @param {Any} name 缓存名称
* @param {Any} cacheLabel 缓存标记
*/
static get(name, cacheLabel) {
return this.has(name, cacheLabel) ? this.cacheMap.get(name).data : null;
}
// 存储
static set(name, data, timeout, cacheLabel) {
const itemCache = new ExpireCache(data, timeout, cacheLabel);
// 缓存
this.cacheMap.set(name, itemCache);
}
}
import ExpireCache from './ExpireCache';
import StorageMap from './StorageMap';
export default class Storage extends ExpireCache {
static cacheMap = new StorageMap();
static getCacheName(name) {
return `${INJECTION_FROM_WEBPACK.serverType}iyourcar_cache_${name}`;
}
}
export default class StorageMap {
static getCacheName(name) {
// INJECTION_FROM_WEBPACK.serverType用户区分当前环境
return `${"INJECTION_FROM_WEBPACK.serverType"}iyourcar_cache_${name}`;
}
get(name) {
let storageData = null;
try {
storageData = wx.getStorageSync(name);
} catch (e) {}
return storageData;
}
set(name, data) {
wx.setStorage({
key: name,
data,
});
}
delete(name) {
wx.removeStorageSync(name);
}
}
export const storageMap = new StorageMap();
# 基于 wx.request 封装的类 axios 请求
## Introduction
- wx.request 的配置、axios 的调用方式
## feature
- 支持 wx.request 所有配置项
- 支持 axios 调用方式
- 支持 自定义 baseUrl
- 支持 自定义响应状态码对应 resolve 或 reject 状态
- 支持 对响应(resolve/reject)分别做统一的额外处理
- 支持 转换请求数据和响应数据
- 支持 请求缓存(内存或本地缓存),可设置缓存标记、过期时间
## use
### app.js @onLaunch
```javascript
axios.creat({
header: {
content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
},
baseUrl: 'https://api.baseurl.com',
...
});
```
### page.js
```javascript
axios
.post("/url", { id: 123 })
.then((res) => {
console.log(response);
})
.catch((err) => {
console.log(err);
});
```
## API
```javascript
axios(config) - 默认get
axios(url[, config]) - 默认get
axios.get(url[, config])
axios.post(url[, data[, config]])
axios.cache(url[, data[, config]]) - 缓存请求(内存)
axios.cache.storage(url[, data[, config]]) - 缓存请求(内存 & local storage
axios.creat(config) - 初始化定制配置,覆盖默认配置
```
## config
默认配置项说明
```javascript
export default {
// 请求接口地址
url: undefined,
// 请求的参数
data: {},
// 请求的 header
header: "application/json",
// 超时时间,单位为毫秒
timeout: undefined,
// HTTP 请求方法
method: "GET",
// 返回的数据格式
dataType: "json",
// 响应的数据类型
responseType: "text",
// 开启 http2
enableHttp2: false,
// 开启 quic
enableQuic: false,
// 开启 cache
enableCache: false,
/** 以上为wx.request的可配置项,参考 https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html */
/** 以下为wx.request没有的新增配置项 */
// {String} baseURL` 将自动加在 `url` 前面,可以通过设置一个 `baseURL` 便于传递相对 URL
baseUrl: "",
// {Function} (同axios的validateStatus)定义对于给定的HTTP 响应状态码是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`),promise 将被 resolve; 否则,promise 将被 reject
validateStatus: undefined,
// {Function} 请求参数包裹(类似axios的transformRequest),通过它可统一补充请求参数需要的额外信息(appInfo/pageInfo/场景值...),需return data
transformRequest: undefined,
// {Function} resolve状态下响应数据包裹(类似axios的transformResponse),通过它可统一处理响应数据,需return res
transformResponse: undefined,
// {Function} resolve状态包裹,通过它可做接口resolve状态的统一处理
resolveWrap: undefined,
// {Function} reject状态包裹,通过它可做接口reject状态的统一处理
rejectWrap: undefined,
// {Boolean} _config.useCache 是否开启缓存
useCache: false,
// {String} _config.cacheName 缓存唯一key值,默认使用url&data生成
cacheName: undefined,
// {Boolean} _config.cacheStorage 是否开启本地缓存
cacheStorage: false,
// {Any} _config.cacheLabel 缓存标志,请求前会对比该标志是否变化来决定是否使用缓存,可用useCache替代
cacheLabel: undefined,
// {Number} _config.cacheExpireTime 缓存时长,计算缓存过期时间,单位-秒
cacheExpireTime: undefined,
};
```
/**
* Axios.js
*/
/* eslint-disable no-underscore-dangle */
import wxRequest from './wxRequest';
import defaults from './defaults';
import { combineUrl, mergeConfig } from './util';
import Buffer from '../utils/cache/Buffer';
import Storage from '../utils/cache/Storage';
import StorageMap from '../utils/cache/StorageMap';
class Axios {
constructor(config = defaults) {
this.defaultConfig = config;
}
/**
* 初始化用户配置,会覆盖默认配置
* @param {Object} _config 配置
*/
creat(_config = {}) {
this.defaultConfig = mergeConfig(this.defaultConfig, _config);
}
axios($1 = {}, $2 = {}) {
let config = $1;
// 兼容axios(url[, config])方式
if (typeof $1 === 'string') {
config = $2;
config.url = $1;
}
return this.request(config);
}
get(url, _config = {}) {
const config = {
..._config,
url,
method: 'GET',
};
return this.request(config);
}
post(url, data = {}, _config = {}) {
const config = {
..._config,
url,
data,
method: 'POST',
};
return this.request(config);
}
/**
* 请求缓存api,缓存于内存中
*/
cache(url, data = {}, _config = {}) {
const config = {
..._config,
url,
data,
method: 'POST',
};
return this._cache(config);
}
/**
* 请求缓存api,缓存于本地缓存中
*/
storage(url, data = {}, _config = {}) {
const config = {
..._config,
url,
data,
method: 'POST',
cacheStorage: true,
};
return this._cache(config);
}
/**
* 请求缓存
* @param {Object} _config 配置
* @param {Boolean} _config.useCache 是否开启缓存
* @param {String} _config.cacheName 缓存唯一key值,默认使用url&data生成
* @param {Boolean} _config.cacheStorage 是否开启本地缓存
* @param {Any} _config.cacheLabel 缓存标志,请求前会对比该标志是否变化来决定是否使用缓存,可用useCache替代
* @param {Number} _config.cacheExpireTime 缓存时长,计算缓存过期时间,单位-秒
*/
_cache(_config) {
const {
url = '',
data = {},
useCache = true,
cacheName: _cacheName,
cacheStorage,
cacheLabel,
cacheExpireTime,
} = _config;
const computedCacheName = _cacheName || `${url}#${JSON.stringify(data)}`;
const cacheName = StorageMap.getCacheName(computedCacheName);
// return buffer
if (useCache && Buffer.has(cacheName, cacheLabel)) {
return Buffer.get(cacheName);
}
// return storage
if (useCache && cacheStorage) {
if (Storage.has(cacheName, cacheLabel)) {
const data = Storage.get(cacheName);
// storage => buffer
Buffer.set(
cacheName,
Promise.resolve(data),
cacheExpireTime,
cacheLabel
);
return Promise.resolve(data);
}
}
const curPromise = new Promise((resolve, reject) => {
const handleFunc = (res) => {
// do storage
if (useCache && cacheStorage) {
Storage.set(cacheName, res, cacheExpireTime, cacheLabel);
}
return res;
};
this._request(_config)
.then((res) => {
resolve(handleFunc(res));
})
.catch(reject);
});
// do buffer
Buffer.set(cacheName, curPromise, cacheExpireTime, cacheLabel);
return curPromise;
}
request(_config) {
// config支持缓存
if (_config.useCache) return this._cache(_config);
return this._request(_config);
}
_request(_config = {}) {
let config = mergeConfig(this.defaultConfig, _config);
const { baseUrl, url, header, data = {}, transformRequest } = config;
const computedConfig = {
header: {
'content-type': 'application/x-www-form-urlencoded; charset=UTF-8',
ycFrom: 'yc-component',
...header,
},
...(baseUrl && {
url: combineUrl(url, baseUrl),
}),
...(transformRequest &&
typeof transformRequest === 'function' && {
data: transformRequest(data),
}),
};
config = mergeConfig(config, computedConfig);
// console.log('iyourcar-component-axios__request-config :', config);
return wxRequest(config);
}
}
export default Axios;
/**
* 基于wx.request封装的类axios请求
* wx.request 的配置、axios的调用方式
* @config 配置参数说明 --> ./defaults.js
* @api axios(config) - 默认get
* @api axios(url[, config]) - 默认get
* @api axios.get(url[, config])
* @api axios.post(url[, data[, config]])
* @api axios.cache(url[, data[, config]]) - 缓存请求(内存)
* @api axios.cache.storage(url[, data[, config]]) - 缓存请求(内存 & local storage)
* @api axios.creat(config) - 初始化定制配置,覆盖默认配置
* @use @app.js-onLaunch:axios.creat(config); @page.js: axios.post(url[, data[, config]]);
* @reference http://www.axios-js.com/zh-cn/docs/
*/
import Axios from './axios.class.js';
const axiosInstance = new Axios();
const { axios } = axiosInstance;
axios.creat = axiosInstance.creat.bind(axiosInstance);
axios.get = axiosInstance.get.bind(axiosInstance);
axios.post = axiosInstance.post.bind(axiosInstance);
axios.cache = axiosInstance.cache.bind(axiosInstance);
axios.cache.storage = axiosInstance.storage.bind(axiosInstance);
export default axios;
/** config - axios默认配置项 */
const API_URL = require("../../env.js");
export default {
// 请求接口地址
url: undefined,
// 请求的参数
data: {},
// 请求的 header
header: "application/json",
// 超时时间,单位为毫秒
timeout: undefined,
// HTTP 请求方法
method: "GET",
// 返回的数据格式
dataType: "json",
// 响应的数据类型
responseType: "text",
// 开启 http2
enableHttp2: false,
// 开启 quic
enableQuic: false,
// 开启 cache
enableCache: false,
/** 以上为wx.request的可配置项,参考 https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html */
/** 以下为wx.request没有的新增配置项 */
// {String} baseURL` 将自动加在 `url` 前面,可以通过设置一个 `baseURL` 便于传递相对 URL
baseUrl: API_URL,
// {Function} (同axios的validateStatus)定义对于给定的HTTP 响应状态码是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`),promise 将被 resolve; 否则,promise 将被 reject
validateStatus: undefined,
// {Function} 请求参数包裹(类似axios的transformRequest),通过它可统一补充请求参数需要的额外信息(appInfo/pageInfo/场景值...),需return data
transformRequest: undefined,
// {Function} resolve状态下响应数据包裹(类似axios的transformResponse),通过它可统一处理响应数据,需return res
transformResponse: undefined,
// {Function} resolve状态包裹,通过它可做接口resolve状态的统一处理
resolveWrap: undefined,
// {Function} reject状态包裹,通过它可做接口reject状态的统一处理
rejectWrap: undefined,
// {Boolean} _config.useCache 是否开启缓存
useCache: false,
// {String} _config.cacheName 缓存唯一key值,默认使用url&data生成
cacheName: undefined,
// {Boolean} _config.cacheStorage 是否开启本地缓存
cacheStorage: false,
// {Any} _config.cacheLabel 缓存标志,请求前会对比该标志是否变化来决定是否使用缓存,可用useCache替代
cacheLabel: undefined,
// {Number} _config.cacheExpireTime 缓存时长,计算缓存过期时间,单位-秒
cacheExpireTime: undefined
};
let scene = '';
export function getPageInfo() {
const postData = {};
try {
if (!scene) {
scene = wx.getLaunchOptionsSync().scene || '';
}
postData.scene = scene;
} catch (error) {
//
}
const pageList = getCurrentPages();
if (pageList.length) {
const currentPage = pageList[pageList.length - 1];
const defaultOptions = JSON.stringify({ default: true });
postData.currentPage = currentPage.__route__;
const optionNameList = ['op', 'options', 'option'];
postData.currentOptions = defaultOptions;
optionNameList.forEach((i) => {
const option = currentPage.data[i] || currentPage[i];
if (option) {
postData.currentOptions = JSON.stringify(option);
}
});
if (pageList.length > 1 && pageList[pageList.length - 2]) {
const previousPage = pageList[pageList.length - 2];
postData.previousPage = previousPage.__route__;
postData.previousOptions = defaultOptions;
optionNameList.forEach((i) => {
const option = previousPage.data[i] || previousPage[i];
if (option) {
postData.previousOptions = JSON.stringify(option);
}
});
}
}
return postData;
}
export function mergeConfig(config0 = {}, config1 = {}) {
return {
...config0,
...config1,
};
}
export function combineUrl(url, host) {
return `${host.replace(/\/$/, '')}/${url.replace(/^\//, '')}`;
}
export function ifReqSuccess(res) {
return /^2/.test(res.statusCode.toString()) && res.data.errcode === 0;
}
export function ifReqNeedAuth(res) {
return res.data.errcode === 100 || res.data.errcode === 101;
}
export function handleError(res) {
if (res && res.data && res.data.msg) {
wx.showToast({
title: res.data.msg,
icon: 'none',
});
}
}
export default function wxRequest(config) {
return new Promise((resolve, reject) => {
wx.request({
...config,
success(res) {
const {
resolveWrap,
rejectWrap,
transformResponse,
validateStatus,
} = config;
if ((validateStatus && validateStatus(res)) || ifSuccess(res)) {
// eslint-disable-next-line no-underscore-dangle
const _resolve = resolveWrap ? resolveWrap(res) : res;
return resolve(transformResponse ? transformResponse(_resolve) : _resolve);
}
return reject(rejectWrap ? rejectWrap(res) : res);
},
fail(res) {
const { rejectWrap } = config;
reject(rejectWrap ? rejectWrap(res) : res);
},
});
});
}
function ifSuccess(res) {
return /^2/.test(res.statusCode.toString()) && res.data.errcode === 0;
}
const formatTime = date => {
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const hour = date.getHours();
const minute = date.getMinutes();
const second = date.getSeconds();
return (
[year, month, day].map(formatNumber).join("/") +
" " +
[hour, minute, second].map(formatNumber).join(":")
);
};
const formatNumber = n => {
n = n.toString();
return n[1] ? n : "0" + n;
};
module.exports = {
formatTime: formatTime
};
This source diff could not be displayed because it is too large. You can view the blob instead.
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