wxd / MShopWeApp

Commit f5370a6bc219d53cb3090691671b6e303526a4fa

Authored by taiyuan
1 parent 368474d9

服务卡项列表和详情页

Inline Side-by-side
Showing 8 changed files with 412 additions and 0 deletions
packageA/pages/cardDetails/cardDetails.js 0 → 100644
  View file @f5370a6
  1 +// pages/i_service/cardDetails/cardDetails.js
  2 +Page({
  3 +
  4 + /**
  5 + * 页面的初始数据
  6 + */
  7 + data: {
  8 +
  9 + },
  10 +
  11 + /**
  12 + * 生命周期函数--监听页面加载
  13 + */
  14 + onLoad: function (options) {
  15 +
  16 + },
  17 +
  18 + /**
  19 + * 生命周期函数--监听页面初次渲染完成
  20 + */
  21 + onReady: function () {
  22 +
  23 + },
  24 +
  25 + /**
  26 + * 生命周期函数--监听页面显示
  27 + */
  28 + onShow: function () {
  29 +
  30 + },
  31 +
  32 + /**
  33 + * 生命周期函数--监听页面隐藏
  34 + */
  35 + onHide: function () {
  36 +
  37 + },
  38 +
  39 + /**
  40 + * 生命周期函数--监听页面卸载
  41 + */
  42 + onUnload: function () {
  43 +
  44 + },
  45 +
  46 + /**
  47 + * 页面相关事件处理函数--监听用户下拉动作
  48 + */
  49 + onPullDownRefresh: function () {
  50 +
  51 + },
  52 +
  53 + /**
  54 + * 页面上拉触底事件的处理函数
  55 + */
  56 + onReachBottom: function () {
  57 +
  58 + },
  59 +
  60 + /**
  61 + * 用户点击右上角分享
  62 + */
  63 + onShareAppMessage: function () {
  64 +
  65 + }
  66 +})
0 67 \ No newline at end of file
... ...
packageA/pages/cardDetails/cardDetails.json 0 → 100644
  View file @f5370a6
  1 +{
  2 + "navigationBarTitleText": "卡项详情",
  3 + "usingComponents": {
  4 +
  5 + }
  6 +}
0 7 \ No newline at end of file
... ...
packageA/pages/cardDetails/cardDetails.wxml 0 → 100644
  View file @f5370a6
  1 +<view class="page">
  2 + <view>
  3 + <image class="image" src=""/>
  4 + </view>
  5 + <view class="bg-white">
  6 + <view class="price pd20 fs30">3000</view>
  7 + <view class="fs28 pdh20"><text class="ellipsis-2 lh1-4">服务卡项名称服务卡项名称服务卡项名称服务卡称服务卡项名称服务卡称服务卡项名称服务卡称服务卡项名称服务卡项名称服务卡项名称服务卡项名称服务卡项名称</text></view>
  8 + <view class="flex jc_sb fs24 pdh20 pdv30 c7b">
  9 + <view>时长：30分钟</view>
  10 + <view>次数：10次</view>
  11 + <view>有效天数：365天</view>
  12 + </view>
  13 + </view>
  14 + <!-- 详情 -->
  15 + <view>
  16 + <view class="t-c pd20 line c7b"><text class="title">详情</text></view>
  17 + <view>
  18 + <images class="image"/>
  19 + </view>
  20 + </view>
  21 +</view>
... ...
packageA/pages/cardDetails/cardDetails.wxss 0 → 100644
  View file @f5370a6
  1 +page,
  2 +.page {
  3 + height: 100%;
  4 +}
  5 +
  6 +page {
  7 + background-color: #f2f2f2;
  8 +}
  9 +
  10 +.image {
  11 + width: 100%;
  12 + display: block;
  13 + background-color: pink;
  14 +}
  15 +
  16 +.price {
  17 + color: #FF6768;
  18 + font-size: 60rpx;
  19 +}
  20 +
  21 +.price::before {
  22 + content: '￥';
  23 + font-size: 40rpx;
  24 +}
  25 +
  26 +.line {
  27 + position: relative;
  28 +}
  29 +
  30 +.line::before {
  31 + content: '';
  32 + position: absolute;
  33 + width: 60%;
  34 + height: 1rpx;
  35 + background-color: #7b7b7b;
  36 + top: 50%;
  37 + left: 50%;
  38 + transform: translate(-50%, -50%);
  39 + z-index: 1;
  40 +}
  41 +
  42 +.title {
  43 + background-color: #f2f2f2;
  44 + padding: 10rpx;
  45 +}
0 46 \ No newline at end of file
... ...
packageA/pages/cardList/cardList.js 0 → 100644
  View file @f5370a6
  1 +// pages/i_service/cardList/cardList.js
  2 +const app = getApp();
  3 +let self = null;
  4 +
  5 +Page({
  6 +
  7 + /**
  8 + * 页面的初始数据
  9 + */
  10 + data: {
  11 + list: null,
  12 + isLoading: false, // 检测是否已经发送请求,防止重复发送请求
  13 + noMore: false, // 检测是否有更多数据,true为没有更多数据,false为还有数据
  14 + pageNum: 1, // 当前页数
  15 +
  16 + currentQuery: {
  17 + store_id: app.globalData.setting.stoid,
  18 + },
  19 + },
  20 +
  21 + /**
  22 + * 生命周期函数--监听页面加载
  23 + */
  24 + onLoad: function (options) {
  25 + self = this;//保存全局指针
  26 + app.isLogin().then(function(data) {//进入页面前已经授权登录成功
  27 + self.setData({
  28 + userInfo: data,
  29 + });
  30 + });
  31 + },
  32 +
  33 + /**
  34 + * 生命周期函数--监听页面初次渲染完成
  35 + */
  36 + onReady: function () {
  37 +
  38 + },
  39 +
  40 + /**
  41 + * 生命周期函数--监听页面显示
  42 + */
  43 + onShow: function () {
  44 + let url = '/api/weshop/serviceCard/page';
  45 + let currentQuery = this.data.currentQuery;
  46 + if(app.globalData.userInfo) {
  47 + if(!this.data.isLogin) {
  48 + this.setData({
  49 + userInfo: app.globalData.userInfo,
  50 + imghost: app.globalData.setting.imghost,
  51 + isLogin: true,
  52 + });
  53 +
  54 + this.getData(true, url, currentQuery);
  55 + };
  56 + };
  57 + },
  58 +
  59 + /**
  60 + * 生命周期函数--监听页面隐藏
  61 + */
  62 + onHide: function () {
  63 +
  64 + },
  65 +
  66 + /**
  67 + * 生命周期函数--监听页面卸载
  68 + */
  69 + onUnload: function () {
  70 +
  71 + },
  72 +
  73 + /**
  74 + * 页面相关事件处理函数--监听用户下拉动作
  75 + */
  76 + onPullDownRefresh: function () {
  77 +
  78 + },
  79 +
  80 + /**
  81 + * 页面上拉触底事件的处理函数
  82 + */
  83 + onReachBottom: function () {
  84 +
  85 + },
  86 +
  87 + /**
  88 + * 用户点击右上角分享
  89 + */
  90 + onShareAppMessage: function () {
  91 +
  92 + },
  93 +
  94 + /**
  95 + * promiseGet请求数据
  96 + */
  97 + getData: function(isInit, url, data) {
  98 + return new Promise(function(resolve, reject) {
  99 +
  100 + app.request.promiseGet(url, {
  101 + data: data,
  102 + isShowLoading: true,
  103 + })
  104 + .then(function(res) {
  105 + // console.log('1121', res.data.code);
  106 + if(res.data.code == 0) {
  107 +
  108 + self.setData({
  109 + isLoading: false
  110 + });
  111 +
  112 + if(isInit) {// 第一次加载
  113 + self.setData({
  114 + list: res.data.data
  115 + });
  116 + } else {
  117 + self.setData({
  118 + 'list.pageData': self.data.list.pageData.concat(res.data.data.pageData)
  119 + });
  120 + };
  121 +
  122 + if((res.data.data.pageData.length == 0) || (res.data.data.pageSize * res.data.data.page >= res.data.data.total)) {
  123 + self.setData({
  124 + noMore: true
  125 + });
  126 + };
  127 +
  128 + } else {
  129 + self.setData({
  130 + 'list.pageData': []
  131 + });
  132 + };
  133 + resolve();
  134 + })
  135 + .catch(function(err) {
  136 + console.log('出错拉！！！！',err);
  137 + self.setData({
  138 + 'list.pageData': []
  139 + });
  140 + });
  141 +
  142 + });
  143 +
  144 + },
  145 +
  146 +
  147 + /**
  148 + * 上拉加载数据
  149 + */
  150 + scrollToLower(url, requestData, callback) {
  151 + // 数据总量
  152 + let total = this.data.list.total;
  153 + // 单页最大数据量
  154 + let pageSize = this.data.list.pageSize;
  155 + // 如果数据总量不为0且小于或等于单页最大数据量，说明数据已全部加载，显示‘没有更多了’
  156 + if((total != 0)&&(total <= pageSize)) {
  157 + this.setData({
  158 + noMore: true
  159 + });
  160 + };
  161 +
  162 + if(!this.data.isLoading && !this.data.noMore) {
  163 + this.setData({
  164 + isLoading: true,
  165 + pageNum: this.data.pageNum + 1
  166 + });
  167 + requestData.page = this.data.pageNum;
  168 +
  169 + this.getData(false, url, requestData)
  170 + .then(function() {
  171 + callback();
  172 + });
  173 + };
  174 + },
  175 +})
0 176 \ No newline at end of file
... ...
packageA/pages/cardList/cardList.json 0 → 100644
  View file @f5370a6
  1 +{
  2 + "navigationBarTitleText": "卡项列表",
  3 + "usingComponents": {
  4 + "nodata": "/components/nodata/nodata"
  5 + }
  6 +}
0 7 \ No newline at end of file
... ...
packageA/pages/cardList/cardList.wxml 0 → 100644
  View file @f5370a6
  1 +<view class="page">
  2 + <swiper class="swiper" autoplay indicator-dots circular easing-function="easeOutCubic">
  3 + <swiper-item>123</swiper-item>
  4 + <swiper-item>234</swiper-item>
  5 + <swiper-item>345</swiper-item>
  6 + </swiper>
  7 +
  8 + <scroll-view class="scroll-view" scroll-y>
  9 + <view class="bg-white">
  10 + <view class="flex pd20" wx:for="{{list.pageData}}">
  11 + <view>
  12 + <image class="image" src="{{imghost + item.imgUrl}}"/>
  13 + </view>
  14 + <view class="flex fdc space-bt f1 pdl20">
  15 + <view>
  16 + <view class="pdv20 fs28"><text class="ellipsis-2">{{item.serviceName}}</text></view>
  17 + <view class="fs24 c7b">有效天数：{{item.validDays}}</view>
  18 + </view>
  19 + <view class="flex space-bt ali-c">
  20 + <view class="price">{{item.money}}</view>
  21 + <view class="btn-details">卡项详情</view>
  22 + </view>
  23 + </view>
  24 + </view>
  25 +
  26 + <nodata class="t-c"></nodata>
  27 + </view>
  28 + <!-- <nodata class="t-c" wx:if="{{list.pageData.length == 0 && list.pageData}}"></nodata> -->
  29 + <view class="noMore">- 已经到底了 -</view>
  30 + </scroll-view>
  31 +</view>
... ...
packageA/pages/cardList/cardList.wxss 0 → 100644
  View file @f5370a6
  1 +/* pages/i_service/cardList/cardList.wxss */
  2 +page,
  3 +.page {
  4 + height: 100%;
  5 +}
  6 +
  7 +page {
  8 + background-color: #f2f2f2;
  9 +}
  10 +
  11 +.scroll-view {
  12 + height: calc(100% - 300rpx);
  13 +}
  14 +
  15 +.swiper {
  16 + background-color: white;
  17 +}
  18 +
  19 +.image {
  20 + display: block;
  21 + width: 240rpx;
  22 + height: 240rpx;
  23 + background-color: pink;
  24 +}
  25 +
  26 +.price {
  27 + color: #FF6768;
  28 + font-size: 28rpx;
  29 +}
  30 +
  31 +.price::before {
  32 + content: '￥';
  33 + font-size: 24rpx;
  34 +}
  35 +
  36 +.btn-details {
  37 + color: white;
  38 + font-size: 24rpx;
  39 + border-radius: 6rpx;
  40 + background-color: #FF6768;
  41 + padding: 20rpx;
  42 +}
  43 +
  44 +.scroll-view {
  45 + /* height: calc(100% - 300rpx); */
  46 +}
  47 +
  48 +.noMore {
  49 + padding: 20rpx;
  50 + color: #bbb;
  51 + text-align: center;
  52 + font-size: 26rpx;
  53 + background-color: transparent !important;
  54 +}
  55 +
  56 +.space-bt {
  57 + justify-content: space-between;
  58 +}
  59 +
  60 +.ali-c {
  61 + align-items: center;
  62 +}
0 63 \ No newline at end of file
... ...