Commit c4bf7823a5c7b8ea54b27b6fe81ae19f01461be4
1 parent
cc324c44
商品分享
Showing
4 changed files
with
246 additions
and
0 deletions
packageA/pages/goods_share/goods_share.js
0 → 100644
| 1 | +// packageA//pages/goods_share/goods_share.js | ||
| 2 | +Page({ | ||
| 3 | + | ||
| 4 | + /** | ||
| 5 | + * 页面的初始数据 | ||
| 6 | + */ | ||
| 7 | + data: { | ||
| 8 | + // 控制价格 | ||
| 9 | + active1: false, | ||
| 10 | + // 控制佣金 | ||
| 11 | + active2: false, | ||
| 12 | + }, | ||
| 13 | + | ||
| 14 | + /** | ||
| 15 | + * 生命周期函数--监听页面加载 | ||
| 16 | + */ | ||
| 17 | + onLoad: function (options) { | ||
| 18 | + | ||
| 19 | + }, | ||
| 20 | + | ||
| 21 | + /** | ||
| 22 | + * 生命周期函数--监听页面初次渲染完成 | ||
| 23 | + */ | ||
| 24 | + onReady: function () { | ||
| 25 | + | ||
| 26 | + }, | ||
| 27 | + | ||
| 28 | + /** | ||
| 29 | + * 生命周期函数--监听页面显示 | ||
| 30 | + */ | ||
| 31 | + onShow: function () { | ||
| 32 | + | ||
| 33 | + }, | ||
| 34 | + | ||
| 35 | + /** | ||
| 36 | + * 生命周期函数--监听页面隐藏 | ||
| 37 | + */ | ||
| 38 | + onHide: function () { | ||
| 39 | + | ||
| 40 | + }, | ||
| 41 | + | ||
| 42 | + /** | ||
| 43 | + * 生命周期函数--监听页面卸载 | ||
| 44 | + */ | ||
| 45 | + onUnload: function () { | ||
| 46 | + | ||
| 47 | + }, | ||
| 48 | + | ||
| 49 | + /** | ||
| 50 | + * 页面相关事件处理函数--监听用户下拉动作 | ||
| 51 | + */ | ||
| 52 | + // onPullDownRefresh: function () { | ||
| 53 | + | ||
| 54 | + // }, | ||
| 55 | + | ||
| 56 | + /** | ||
| 57 | + * 页面上拉触底事件的处理函数 | ||
| 58 | + */ | ||
| 59 | + onReachBottom: function () { | ||
| 60 | + | ||
| 61 | + }, | ||
| 62 | + | ||
| 63 | + /** | ||
| 64 | + * 用户点击右上角分享 | ||
| 65 | + */ | ||
| 66 | + onShareAppMessage: function () { | ||
| 67 | + | ||
| 68 | + }, | ||
| 69 | + | ||
| 70 | + // 点击价格排序 | ||
| 71 | + sort1() { | ||
| 72 | + if(this.data.active2) { | ||
| 73 | + this.setData({ | ||
| 74 | + active2: !this.data.active2 | ||
| 75 | + }); | ||
| 76 | + }; | ||
| 77 | + this.setData({ | ||
| 78 | + active1: !this.data.active1 | ||
| 79 | + }); | ||
| 80 | + | ||
| 81 | + }, | ||
| 82 | + // 点击佣金排序 | ||
| 83 | + sort2() { | ||
| 84 | + if(this.data.active1) { | ||
| 85 | + this.setData({ | ||
| 86 | + active1: !this.data.active1 | ||
| 87 | + }); | ||
| 88 | + }; | ||
| 89 | + this.setData({ | ||
| 90 | + active2: !this.data.active2 | ||
| 91 | + }); | ||
| 92 | + }, | ||
| 93 | +}) | ||
| 0 | \ No newline at end of file | 94 | \ No newline at end of file |
packageA/pages/goods_share/goods_share.json
0 → 100644
packageA/pages/goods_share/goods_share.wxml
0 → 100644
| 1 | +<view class="container"> | ||
| 2 | + <!-- 搜索框 --> | ||
| 3 | + <view class="search-container"> | ||
| 4 | + <view class="input-container"><input class="search" type="text" placeholder="请输入您想查找的商品信息"/></view> | ||
| 5 | + <view class="btn-search">搜索</view> | ||
| 6 | + </view> | ||
| 7 | + <!-- 列表 --> | ||
| 8 | + <view class="list-container"> | ||
| 9 | + <!-- 标题 --> | ||
| 10 | + <view class="title"> | ||
| 11 | + <view class="title-item">销量</view> | ||
| 12 | + <view class="title-item" bindtap="sort1">价格<text class="iconfont {{active1?'icon-shang':'icon-xia'}}"></text></view> | ||
| 13 | + <view class="title-item" bindtap="sort2">佣金<text class="iconfont {{active2?'icon-shang':'icon-xia'}}"></text></view> | ||
| 14 | + <view class="title-item">最新</view> | ||
| 15 | + </view> | ||
| 16 | + <!-- 列表项 --> | ||
| 17 | + <scroll-view | ||
| 18 | + class="list" | ||
| 19 | + scroll-y="true" | ||
| 20 | + scroll-anchoring | ||
| 21 | + refresher-enabled> | ||
| 22 | + <nodata nodataContainer="nodata">暂无数据</nodata> | ||
| 23 | + <view class class="list-item"> | ||
| 24 | + <view class="img-container"></view> | ||
| 25 | + <view class="details"> | ||
| 26 | + <view class="ellipsis-2 fs28 name">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</view> | ||
| 27 | + <view class="red pdt14">￥200.00</view> | ||
| 28 | + <view class="flex jc_sb fs24 pdt14"> | ||
| 29 | + <view class="gray">已售：<text class="red">3</text></view> | ||
| 30 | + <view class="gray">分成金额：<text class="red">￥21</text></view> | ||
| 31 | + </view> | ||
| 32 | + <view class="t-r fs28 pdt14"><view class="btn-share">分享</view></view> | ||
| 33 | + </view> | ||
| 34 | + </view> | ||
| 35 | + <view class="no-more t-c">- 已全部加载 -</view> | ||
| 36 | + </scroll-view> | ||
| 37 | + </view> | ||
| 38 | +</view> |
packageA/pages/goods_share/goods_share.wxss
0 → 100644
| 1 | +/* packageA//pages/goods_share/goods_share.wxss */ | ||
| 2 | +.red { | ||
| 3 | + color: #FE6867; | ||
| 4 | +} | ||
| 5 | +.gray { | ||
| 6 | + color: #7b7b7b; | ||
| 7 | +} | ||
| 8 | +page { | ||
| 9 | + background-color: #f2f2f2; | ||
| 10 | + height: 100%; | ||
| 11 | +} | ||
| 12 | +.container { | ||
| 13 | + background-color: white; | ||
| 14 | + height: 100%; | ||
| 15 | +} | ||
| 16 | +.search-container { | ||
| 17 | + display: flex; | ||
| 18 | + padding: 26rpx 20rpx; | ||
| 19 | + border-bottom: 2rpx solid #f8f8f8; | ||
| 20 | +} | ||
| 21 | +.input-container { | ||
| 22 | + flex: 1; | ||
| 23 | + border-radius: 6rpx 0 0 6rpx; | ||
| 24 | + overflow: hidden; | ||
| 25 | +} | ||
| 26 | +.search { | ||
| 27 | + background-color: #f0f0f0; | ||
| 28 | + padding: 10rpx 20rpx; | ||
| 29 | + font-size: 28rpx; | ||
| 30 | +} | ||
| 31 | +.btn-search { | ||
| 32 | + background-color: #FE6867; | ||
| 33 | + color: white; | ||
| 34 | + padding: 0 30rpx; | ||
| 35 | + display: flex; | ||
| 36 | + align-items: center; | ||
| 37 | + border-radius: 0 6rpx 6rpx 0; | ||
| 38 | +} | ||
| 39 | +.title { | ||
| 40 | + display: flex; | ||
| 41 | + font-size: 30rpx; | ||
| 42 | + border-bottom: 2rpx solid #f8f8f8; | ||
| 43 | +} | ||
| 44 | +.title .iconfont { | ||
| 45 | + color: #ccc; | ||
| 46 | + font-size: 16rpx; | ||
| 47 | + margin-left: 8rpx; | ||
| 48 | +} | ||
| 49 | +.title-item { | ||
| 50 | + width: 25%; | ||
| 51 | + box-sizing: border-box; | ||
| 52 | + text-align: center; | ||
| 53 | + padding: 20rpx; | ||
| 54 | +} | ||
| 55 | +.list-container { | ||
| 56 | + height: calc(100% - 118rpx); | ||
| 57 | +} | ||
| 58 | +.list { | ||
| 59 | + height: calc(100% - 82rpx); | ||
| 60 | + background-color: #f2f2f2; | ||
| 61 | +} | ||
| 62 | +.list-item { | ||
| 63 | + display: flex; | ||
| 64 | + padding: 20rpx; | ||
| 65 | + border-bottom: 2rpx solid #f8f8f8; | ||
| 66 | + background-color: white; | ||
| 67 | +} | ||
| 68 | +.img-container { | ||
| 69 | + background-color: #f0f0f0; | ||
| 70 | + width: 280rpx; | ||
| 71 | + height: 248rpx; | ||
| 72 | + display: flex; | ||
| 73 | + align-items: center; | ||
| 74 | + justify-content: center; | ||
| 75 | +} | ||
| 76 | +.img-container:after { | ||
| 77 | + font-family: iconfont; | ||
| 78 | + content: '\e8c1'; | ||
| 79 | + color: #bbb; | ||
| 80 | + font-size: 80rpx; | ||
| 81 | +} | ||
| 82 | +.details { | ||
| 83 | + flex: 1; | ||
| 84 | + padding-left: 20rpx; | ||
| 85 | +} | ||
| 86 | +.btn-share { | ||
| 87 | + display: inline-block; | ||
| 88 | + background-color: #FE6867; | ||
| 89 | + color: white; | ||
| 90 | + padding: 8rpx 30rpx; | ||
| 91 | + border-radius: 6rpx; | ||
| 92 | +} | ||
| 93 | +.pdt14 { | ||
| 94 | + padding-top: 14rpx; | ||
| 95 | +} | ||
| 96 | + | ||
| 97 | +.no-more { | ||
| 98 | + line-height: 3; | ||
| 99 | + color: #ccc; | ||
| 100 | + background-color: #f2f2f2; | ||
| 101 | +} | ||
| 102 | +.nodata { | ||
| 103 | + text-align: center; | ||
| 104 | + background-color: #f2f2f2; | ||
| 105 | +} | ||
| 106 | + | ||
| 107 | +.name { | ||
| 108 | + height: 76rpx; | ||
| 109 | +} |