Commit 87ca01dfca6636564222f366040fa5312e8a90de

Authored by 后端研发-倪永富
1 parent a3e88280

优惠券列表

packageA/pages/quan/quan.js 0 → 100644
  1 +// packageA//pages/goods_share/goods_share.js
  2 +Page({
  3 +
  4 + /**
  5 + * 页面的初始数据
  6 + */
  7 + data: {
  8 + // tab
  9 + tab: ['秒杀','拼单','促销','专享礼包'],
  10 + currentIndex: 0,
  11 + //促销页tab
  12 + tab2: ['免费发放'],
  13 + currentIndex2: 0,
  14 + //秒杀和拼单底部tab
  15 + currentIndex3: 0,
  16 + // 控制价格
  17 + active1: false,
  18 + // 控制佣金
  19 + active2: false,
  20 + //popup
  21 + hiddenPopup: true,
  22 + },
  23 +
  24 + /**
  25 + * 生命周期函数--监听页面加载
  26 + */
  27 + onLoad: function (options) {
  28 +
  29 + },
  30 +
  31 + /**
  32 + * 生命周期函数--监听页面初次渲染完成
  33 + */
  34 + onReady: function () {
  35 +
  36 + },
  37 +
  38 + /**
  39 + * 生命周期函数--监听页面显示
  40 + */
  41 + onShow: function () {
  42 +
  43 + },
  44 +
  45 + /**
  46 + * 生命周期函数--监听页面隐藏
  47 + */
  48 + onHide: function () {
  49 +
  50 + },
  51 +
  52 + /**
  53 + * 生命周期函数--监听页面卸载
  54 + */
  55 + onUnload: function () {
  56 +
  57 + },
  58 +
  59 + /**
  60 + * 页面相关事件处理函数--监听用户下拉动作
  61 + */
  62 + // onPullDownRefresh: function () {
  63 +
  64 + // },
  65 +
  66 + /**
  67 + * 页面上拉触底事件的处理函数
  68 + */
  69 + onReachBottom: function () {
  70 +
  71 + },
  72 +
  73 + /**
  74 + * 用户点击右上角分享
  75 + */
  76 + onShareAppMessage: function () {
  77 +
  78 + },
  79 +
  80 + // 点击价格排序
  81 + sort1() {
  82 + if(this.data.active2) {
  83 + this.setData({
  84 + active2: !this.data.active2
  85 + });
  86 + };
  87 + this.setData({
  88 + active1: !this.data.active1
  89 + });
  90 +
  91 + },
  92 + // 点击佣金排序
  93 + sort2() {
  94 + if(this.data.active1) {
  95 + this.setData({
  96 + active1: !this.data.active1
  97 + });
  98 + };
  99 + this.setData({
  100 + active2: !this.data.active2
  101 + });
  102 + },
  103 + // 点击tab
  104 + clickTab(e) {
  105 + this.setData({
  106 + currentIndex: e.target.dataset.index,
  107 + });
  108 + },
  109 + // 点击促销页tab
  110 + clickTab2(e) {
  111 + this.setData({
  112 + currentIndex2: e.target.dataset.index,
  113 + });
  114 + },
  115 + // 点击秒杀和拼单底部tab
  116 + clickTab3(e) {
  117 + this.setData({
  118 + currentIndex3: e.target.dataset.index,
  119 + });
  120 + },
  121 + // 关闭弹出层
  122 + closePopup() {
  123 + this.setData({
  124 + hiddenPopup: true
  125 + });
  126 + },
  127 + // 显示弹出层
  128 + showPopup() {
  129 + this.setData({
  130 + hiddenPopup: false
  131 + });
  132 + },
  133 + clickShare() {
  134 + this.setData({
  135 + hiddenPopup: false
  136 + });
  137 + },
  138 + select(e) {
  139 + var index = e.target.dataset.index;
  140 + this.setData({
  141 + hiddenPopup: true
  142 + });
  143 + },
  144 +})
0 \ No newline at end of file 145 \ No newline at end of file
packageA/pages/quan/quan.json 0 → 100644
  1 +{
  2 + "usingComponents": {
  3 + "nodata": "/components/nodata/nodata"
  4 + },
  5 + "navigationBarTitleText": "优惠券列表",
  6 + "enablePullDownRefresh": false
  7 +}
0 \ No newline at end of file 8 \ No newline at end of file
packageA/pages/quan/quan.wxml 0 → 100644
  1 +<view class="container">
  2 + <!-- 列表 -->
  3 + <!-- <view class="list-container"> -->
  4 + <!-- 标题 -->
  5 + <view class="subTab-title flex">
  6 + <block wx:for="{{tab2}}">
  7 + <view class="subTab-titleItem {{currentIndex2 == index ? 'active':''}}" data-index="{{index}}" bindtap="clickTab2">{{item}}</view>
  8 + </block>
  9 + </view>
  10 + <!-- 列表项 -->
  11 + <scroll-view
  12 + class="list"
  13 + scroll-y="true"
  14 + scroll-anchoring
  15 + refresher-enabled>
  16 +
  17 + <!-- 暂无数据 -->
  18 + <nodata nodataContainer="nodata">暂无数据</nodata>
  19 +
  20 + <block>
  21 + <view class="coupons bg-red">
  22 + <view class="flex">
  23 + <view>
  24 + <view class="coupon-hd ellipsis-2 fs36">全场通用券</view>
  25 + <view class="deadline fs28 pdt10">限时使用:2012-12-31 至 2013-12-31</view>
  26 + </view>
  27 + <view class="price">¥<text class="fs80">25</text></view>
  28 + </view>
  29 + <view class="flex ai-center jc_sb pdt20">
  30 + <view class="coupon-ft ellipsis-2 fs28">全场任意产品通用</view>
  31 + <view class="btn-share" bindtap="clickShare">分享</view>
  32 + </view>
  33 + </view>
  34 +
  35 + </block>
  36 +
  37 + <view class="no-more t-c">- 已全部加载 -</view>
  38 + </scroll-view>
  39 + <!-- </view> -->
  40 + <view class="popup-container" hidden="{{hiddenPopup}}">
  41 + <view class="popup" bindtap="select">
  42 + <view class="popup-item bdr-b" hover-class="active" data-index="0">
  43 + <image src="../../images/wx2.png" class="popup-img"></image>微信
  44 + </view>
  45 + <view class="popup-item" hover-class="active" data-index="1">
  46 + <image src="../../images/qywx.png" class="popup-img h70"></image>企业微信
  47 + </view>
  48 + </view>
  49 + </view>
  50 +</view>
  51 +
packageA/pages/quan/quan.wxss 0 → 100644
  1 +/* packageA//pages/goods_share/goods_share.wxss */
  2 +.red {
  3 + color: #FE6867;
  4 +}
  5 +.gray {
  6 + color: #7b7b7b;
  7 +}
  8 +.w25 {
  9 + width: 25%;
  10 +}
  11 +.w50 {
  12 + width: 50%;
  13 +}
  14 +.w164 {
  15 + width: 164rpx;
  16 +}
  17 +.bold {
  18 + font-weight: bold;
  19 +}
  20 +page {
  21 + background-color: #f2f2f2;
  22 + height: 100%;
  23 +}
  24 +.container {
  25 + /* background-color: white; */
  26 + height: 100%;
  27 +}
  28 +.search-container {
  29 + display: flex;
  30 + padding: 26rpx 20rpx;
  31 + border-bottom: 2rpx solid #f8f8f8;
  32 +}
  33 +.input-container {
  34 + flex: 1;
  35 + border-radius: 6rpx 0 0 6rpx;
  36 + overflow: hidden;
  37 +}
  38 +.search {
  39 + background-color: #f0f0f0;
  40 + padding: 10rpx 20rpx;
  41 + font-size: 28rpx;
  42 +}
  43 +.btn-search {
  44 + background-color: #FE6867;
  45 + color: white;
  46 + padding: 0 30rpx;
  47 + display: flex;
  48 + align-items: center;
  49 + border-radius: 0 6rpx 6rpx 0;
  50 +}
  51 +.title {
  52 + display: flex;
  53 + font-size: 30rpx;
  54 + border-bottom: 2rpx solid #f8f8f8;
  55 +}
  56 +.title .iconfont {
  57 + color: #ccc;
  58 + font-size: 16rpx;
  59 + margin-left: 8rpx;
  60 +}
  61 +.title-item {
  62 + width: 25%;
  63 + box-sizing: border-box;
  64 + text-align: center;
  65 + padding: 20rpx;
  66 + position: relative;
  67 +}
  68 +.title-item.active {
  69 + color: #FE6867;
  70 + font-weight: bold;
  71 +}
  72 +.title-item.active:after {
  73 + content:'';
  74 + position: absolute;
  75 + width: 50%;
  76 + height: 4rpx;
  77 + background-color: #FE6867;
  78 + left: 0;
  79 + right: 0;
  80 + bottom: 0;
  81 + margin: 0 auto;
  82 +}
  83 +.list-container {
  84 + /* height: 100%; */
  85 +}
  86 +.list {
  87 + box-sizing: border-box;
  88 + height: calc(100% - 78rpx);
  89 + background-color: #f2f2f2;
  90 + padding: 20rpx 20rpx 0 20rpx;
  91 + /* padding-bottom: 102rpx; */
  92 +}
  93 +.list.active1 {
  94 + height: calc(100% - 82rpx - 78rpx);
  95 + padding-bottom: 0;
  96 +}
  97 +.list.active2 {
  98 + padding-bottom: 0;
  99 +}
  100 +.list-item {
  101 + display: flex;
  102 + padding: 20rpx;
  103 + border-bottom: 2rpx solid #f8f8f8;
  104 + background-color: white;
  105 +}
  106 +.img-container {
  107 + background-color: #f0f0f0;
  108 + width: 280rpx;
  109 + height: 248rpx;
  110 + display: flex;
  111 + align-items: center;
  112 + justify-content: center;
  113 + position: relative;
  114 +}
  115 +.img-container:after {
  116 + font-family: iconfont;
  117 + content: '\e8c1';
  118 + color: #bbb;
  119 + font-size: 80rpx;
  120 +}
  121 +
  122 +
  123 +.img-container.live:before {
  124 + content: '\e664';
  125 +}
  126 +.img-container.coming:before {
  127 + content: '\e608';
  128 +}
  129 +.img-container.playback:before {
  130 + content: '\e603';
  131 +}
  132 +.img-container.live:before,
  133 +.img-container.coming:before,
  134 +.img-container.playback:before {
  135 + font-family: iconfont;
  136 + background-color: #FE6867;
  137 + color: white;
  138 + width: 50rpx;
  139 + height: 50rpx;
  140 + line-height: 50rpx;
  141 + text-align: center;
  142 + border-radius: 50%;
  143 + position: absolute;
  144 + left: 10rpx;
  145 + top: 10rpx;
  146 +}
  147 +.details {
  148 + flex: 1;
  149 + padding-left: 20rpx;
  150 +}
  151 +.btn-share {
  152 + box-sizing: border-box;
  153 + display: inline-block;
  154 + background-color: #FE6867;
  155 + color: white;
  156 + padding: 8rpx 30rpx;
  157 + border-radius: 6rpx;
  158 + text-align: center;
  159 +}
  160 +.pdt10 {
  161 + padding-top: 10rpx;
  162 +}
  163 +.pdt14 {
  164 + padding-top: 14rpx;
  165 +}
  166 +.pdtb6 {
  167 + padding-top: 6rpx;
  168 + padding-bottom: 6rpx;
  169 +}
  170 +.pdtb8 {
  171 + padding-top: 8rpx;
  172 + padding-bottom: 8rpx;
  173 +}
  174 +.pdl20 {
  175 + padding-left: 104rpx;
  176 +}
  177 +
  178 +
  179 +.no-more {
  180 + line-height: 3;
  181 + color: #ccc;
  182 + /* background-color: #f2f2f2; */
  183 +}
  184 +.nodata {
  185 + text-align: center;
  186 + background-color: #f2f2f2;
  187 +}
  188 +.progress-container {
  189 + width: 55%;
  190 + padding-right: 10rpx;
  191 + position: relative;
  192 + text-align: center;
  193 +}
  194 +.retail {
  195 + color: #7b7b7b;
  196 + text-decoration: line-through;
  197 + font-size: 22rpx;
  198 + padding-left: 20rpx;
  199 +}
  200 +.name {
  201 + height: 76rpx;
  202 + overflow: hidden;
  203 +}
  204 +
  205 +.percent {
  206 + position: absolute;
  207 + top: 0;
  208 + bottom: 0;
  209 + left: 0;
  210 + right: 0;
  211 + margin: auto;
  212 + color: white;
  213 +}
  214 +.tabbar {
  215 + position: fixed;
  216 + width: 100%;
  217 + bottom: 0;
  218 + background-color: white;
  219 +}
  220 +.tabbar:after {
  221 + position: absolute;
  222 + content: '';
  223 + width: 2rpx;
  224 + height: 50%;
  225 + top: 0;
  226 + bottom: 0;
  227 + left: 0;
  228 + right: 0;
  229 + margin: auto;
  230 + background-color: #f0f0f0;
  231 +}
  232 +.tabbar-item {
  233 + width: 50%;
  234 + text-align: center;
  235 + padding-top: 30rpx;
  236 + padding-bottom: 30rpx;
  237 +}
  238 +.tabbar-item .iconfont {
  239 + margin-right: 10rpx;
  240 +}
  241 +.tabbar-item.active {
  242 + color: #FE6867;
  243 +}
  244 +
  245 +
  246 +.group-type,
  247 +.group-num {
  248 + position: relative;
  249 + font-size: 22rpx;
  250 +}
  251 +.group-type:before,
  252 +.group-num:before {
  253 + font-family: iconfont;
  254 +}
  255 +.group-type:before {
  256 + content: '\e66a';
  257 + color: white;
  258 + background-color: #FE6867;
  259 + position: absolute;
  260 + left: 0;
  261 + top: 0;
  262 + bottom: 0;
  263 + padding-left: 6rpx;
  264 + padding-right: 10rpx;
  265 + line-height: 30rpx;
  266 +}
  267 +.group-num:before {
  268 + padding-right: 6rpx;
  269 +}
  270 +.group-num:before {
  271 + content: '\e694';
  272 + position: relative;
  273 +}
  274 +.group-num {
  275 + color: white;
  276 + background-color: #FE6867;
  277 + border-radius: 34rpx;
  278 + padding-left: 10rpx;
  279 + padding-right: 10rpx;
  280 + margin-right: 14rpx;
  281 +}
  282 +.group-type {
  283 + color: #FE6867;
  284 + border: 2rpx solid #FE6867;
  285 + padding-left: 42rpx;
  286 + padding-right: 4rpx;
  287 + border-radius: 6rpx;
  288 +}
  289 +
  290 +.badge {
  291 + color: white;
  292 + padding: 0 20rpx;
  293 + border-radius: 6rpx;
  294 + background-color: #FE6867;
  295 + margin-right: 10rpx;
  296 +}
  297 +
  298 +.subTab-title {
  299 + text-align: center;
  300 + justify-content: center;
  301 + align-items: center;
  302 + font-size: 28rpx;
  303 +}
  304 +.subTab-list {
  305 + padding: 20rpx;
  306 +}
  307 +.subTab-titleItem {
  308 + box-sizing: border-box;
  309 + width: calc(100% / 3);
  310 + padding: 20rpx 40rpx;
  311 + background-color: white;
  312 + border-right: 2rpx solid #f8f8f8;
  313 + flex: 1;
  314 +}
  315 +.subTab-titleItem:last-child {
  316 + border-right: none;
  317 +}
  318 +.subTab-titleItem.active {
  319 + background-color: #FE6867;
  320 + color: white;
  321 +}
  322 +.subTab-item {
  323 + padding: 20rpx;
  324 + border-bottom: 2rpx solid #f8f8f8;
  325 + background-color: white;
  326 + border-radius: 8rpx;
  327 + box-shadow: 0 8px 12px #e7e9eb;
  328 +}
  329 +.subTab-item ~ .subTab-item {
  330 + margin-top: 20rpx;
  331 +}
  332 +.pdv10 {
  333 + padding-top: 10rpx;
  334 + padding-bottom: 10rpx;
  335 +}
  336 +.pdv20 {
  337 + padding-top: 20rpx;
  338 + padding-bottom: 20rpx;
  339 +}
  340 +.pdb10 {
  341 + padding-bottom: 10rpx;
  342 +}
  343 +.pdb20 {
  344 + padding-bottom: 20rpx;
  345 +}
  346 +.bdr-b {
  347 + border-bottom: 2rpx solid #f8f8f8;
  348 +}
  349 +.dash-b {
  350 + border-bottom: 2rpx dashed #ddd;
  351 +}
  352 +.btn-container {
  353 + display: flex;
  354 + align-items: flex-end;
  355 + font-size: 26rpx;
  356 +}
  357 +
  358 +
  359 +/* .popup-container {
  360 + content:'';
  361 + position: fixed;
  362 + top: 0;
  363 + bottom: 0;
  364 + left: 0;
  365 + right: 0;
  366 + z-index: 3;
  367 + background-color: rgba(0,0,0,.6);
  368 + display: flex;
  369 + align-items: center;
  370 + justify-content: center;
  371 +}
  372 +.popup {
  373 + width: 90%;
  374 +}
  375 +.popup-content {
  376 + box-sizing: border-box;
  377 + width: 100%;
  378 + background-color: white;
  379 + padding: 0 20rpx;
  380 + border-radius: 10rpx;
  381 + max-height: 1038rpx;
  382 +}
  383 +.icon-close {
  384 + font-size: 60rpx;
  385 + color: white;
  386 +}
  387 +.popup-btn {
  388 + padding-top: 30rpx;
  389 +}
  390 +
  391 +.popup-title {
  392 + /* font-size: 28rpx; */
  393 + /* font-weight: bold;
  394 + padding: 20rpx 0;
  395 +}
  396 +.popup-title2 { */
  397 + /* padding: 10rpx 0; */
  398 + /* padding-bottom: 8rpx;
  399 +}
  400 +.popup-title3 {
  401 + padding-left: 34rpx;
  402 + font-size: 30rpx;
  403 +}
  404 +.popup-list {
  405 + max-height: 602rpx;
  406 + overflow-y: auto;
  407 +}
  408 +
  409 +
  410 +radio .wx-radio-input {
  411 + width: 28rpx;
  412 + height: 28rpx;
  413 +}
  414 +
  415 +
  416 +radio .wx-radio-input.wx-radio-input-checked {
  417 + background-color: #FE6867;
  418 + border-color: #FE6867;
  419 +}
  420 +radio .wx-radio-input.wx-radio-input-checked::before{
  421 + color: white;
  422 +}
  423 +
  424 +.popup-content.active {
  425 + max-height: 982rpx;
  426 + overflow: auto;
  427 +} */
  428 +
  429 +
  430 +
  431 +.coupons {
  432 + color: white;
  433 + position: relative;
  434 + padding: 28rpx 24rpx 28rpx 46rpx;
  435 +}
  436 +.coupons.bg-red {
  437 + background: #F2F2F2 radial-gradient(circle at 0px 50%, transparent 10px, #FF6768 0) top;
  438 +}
  439 +
  440 +
  441 +
  442 +
  443 +.coupons ~ .coupons {
  444 + margin-top: 20rpx;
  445 +}
  446 +
  447 +.coupon-hd {
  448 + word-break: break-all;
  449 + line-height: 1.4;
  450 +}
  451 +.coupon-md {
  452 + font-size: 26rpx;
  453 + position: relative;
  454 + padding-right: 200rpx;
  455 +}
  456 +.coupon-ft {
  457 + line-height: 1.4;
  458 +}
  459 +.price {
  460 + position: absolute;
  461 + right: 24rpx;
  462 +}
  463 +
  464 +.coupons .btn-share {
  465 + flex-shrink: 0;
  466 + border-radius: 30rpx;
  467 + padding: 8rpx 40rpx;
  468 + background-color: red;
  469 +}
  470 +
  471 +
  472 +.popup-container {
  473 + position: fixed;
  474 + left: 0;
  475 + top: 0;
  476 + width: 100%;
  477 + height: 100%;
  478 + background-color: rgba(0,0,0,.5);
  479 +}
  480 +.popup {
  481 + background-color: white;
  482 + border-radius: 16rpx;
  483 + position: absolute;
  484 + top: 50%;
  485 + left: 50%;
  486 + transform: translate(-50%, -50%);
  487 + width: 500rpx;
  488 + overflow: hidden;
  489 +}
  490 +.popup-img {
  491 + display: block;
  492 + width: 80rpx;
  493 + height: 80rpx;
  494 + margin-right: 20rpx;
  495 + flex-shrink: 0;
  496 +}
  497 +.popup-item {
  498 + display: flex;
  499 + align-items: center;
  500 + padding: 20rpx 90rpx;
  501 +}
  502 +.h70 {
  503 + height: 70rpx;
  504 +}
  505 +
  506 +.active {
  507 + background-color: #f2f2f2;
  508 +}
  509 +
  510 +
  511 +
  512 +