工作记录小程序请求统一封装 存储记录推荐

这段代码主要展示了在小程序中如何管理网络请求,包括统一的请求方法,处理不同类型的响应,如未授权、服务器错误等。同时,还包括用户登录状态检测,获取和更新用户信息,以及购物车商品数量的获取。此外,还有错误处理和全局变量的使用。
摘要由CSDN通过智能技术生成
var config = require("config.js");

//统一的网络请求方法
function request(params, isGetTonken) {
  // 全局变量
  var globalData = getApp().globalData;
  // 如果正在进行登陆,就将非登陆请求放在队列中等待登陆完毕后进行调用
  // if (!isGetTonken && globalData.isLanding) {
  //   globalData.requestQueue.push(params);
  //   return;
  // }
  wx.request({
    url: config.domain + params.url, //接口请求地址
    data: params.data,
    header: {
      // 'content-type': params.method == "GET" ? 'application/x-www-form-urlencoded' : 'application/json;charset=utf-8',
      'Authorization': params.login ? undefined : wx.getStorageSync('token')
    },
    method: params.method == undefined ? "POST" : params.method,
    dataType: 'json',
    responseType: params.responseType == undefined ? 'text' : params.responseType,
    success: function(res) {
			const responseData = res.data

      // 00000 请求成功
      if (responseData.code === '00000') {
        if (params.callBack) {
          params.callBack(responseData.data);
        }
        return
      }

      // A00004 未授权
      if (responseData.code === 'A00004') {
        wx.navigateTo({
          url: '/pages/login/login',
        })
				return
      }

      // A00005 服务器出了点小差
      if (responseData.code === 'A00005') {
        console.error('============== 请求异常 ==============')
        console.log('接口: ', params.url)
        console.log('异常信息: ', responseData)
        console.error('============== 请求异常 ==============')
        if (params.errCallBack) {
          params.errCallBack(responseData)
          return
        }
        wx.showToast({
          title: '服务器出了点小差~',
          icon: 'none'
        })
      }

      // A00001 用于直接显示提示用户的错误,内容由输入内容决定
      if (responseData.code === 'A00001') {
        if (params.errCallBack) {
          params.errCallBack(responseData)
          return
        }
        wx.showToast({
          title: responseData.msg || 'Error',
          icon: 'none'
        })
        return
      }

      // 其他异常
      if (responseData.code !== '00000') {
        // console.log('params', params)
      	wx.hideLoading();
        if (params.errCallBack) {
          params.errCallBack(responseData)
        } else {
          console.log(`接口: ${params.url}`)
          console.log(`返回信息: `, res)
        }
      }
      if (!globalData.isLanding) {
        wx.hideLoading();
      }
    },
    fail: function(err) {
      wx.hideLoading();
      wx.showToast({
        title: "服务器出了点小差",
        icon: "none"
      });
    }
  })
}

//通过code获取token,并保存到缓存
var getToken = function() {
  wx.login({
    success: res => {
      // 发送 res.code 到后台换取 openId, sessionKey, unionId
      request({
        login: true,
        url: '/login?grant_type=mini_app',
        data: {
          principal: res.code
        },
        callBack: result => {
          // 没有获取到用户昵称,说明服务器没有保存用户的昵称,也就是用户授权的信息并没有传到服务器
          if (!result.nickName) {
            updateUserInfo();
          }
          if (result.userStutas == 0) {
            wx.showModal({
              showCancel: false,
              title: '提示',
              content: '您已被禁用,不能购买,请联系客服'
            })
            wx.setStorageSync('token', '');
          } else {
            wx.setStorageSync('token', 'bearer' + result.access_token); //把token存入缓存,请求接口数据时要用
          }
          var globalData = getApp().globalData;
          globalData.isLanding = false;
          while (globalData.requestQueue.length) {
            request(globalData.requestQueue.pop());
          }
        }
      }, true)

    }
  })
}

// 更新用户头像昵称
function updateUserInfo() {
  wx.getUserInfo({
    success: (res) => {
      var userInfo = JSON.parse(res.rawData)
      request({
        url: "/p/user/setUserInfo",
        method: "PUT",
        data: {
          avatarUrl: userInfo.avatarUrl,
          nickName: userInfo.nickName
        }
      });
    }
  })
}

//获取购物车商品数量
function getCartCount() {
  var params = {
    url: "/p/shopCart/prodCount",
    method: "GET",
    data: {},
    callBack: function(res) {
      if (res > 0) {
        wx.setTabBarBadge({
          index: 2,
          text: res + "",
        })
        var app = getApp();
        app.globalData.totalCartCount = res;
      } else {
        wx.removeTabBarBadge({
          index: 2
        })
        var app = getApp();
        app.globalData.totalCartCount = 0;
      }
    }
  };
  request(params);
}


exports.getToken = getToken;
exports.request = request;
exports.getCartCount = getCartCount;
exports.updateUserInfo = updateUserInfo;

config.js
//可改动页面

var domain = "http://192.168.1.17:8086"; //统一接口域名,测试环境

exports.domain = domain;



请求使用

var http = require("../../utils/http.js");

/**
   * 计算购物车总额
   */
  calTotalPrice: function () {
    var shopCartItemDiscounts = this.data.shopCartItemDiscounts;
    var shopCartIds = [];
    for (var i = 0; i < shopCartItemDiscounts.length; i++) {
      var cItems = shopCartItemDiscounts[i].shopCartItems;
      for (var j = 0; j < cItems.length; j++) {
        if (cItems[j].checked) {
          shopCartIds.push(cItems[j].basketId);
        }
      }
    }

    var ths = this;
    wx.showLoading();
    var params = {
      url: "/p/shopCart/totalPay",
      method: "POST",
      data: shopCartIds,
      callBack: function (res) {
        ths.setData({
          finalMoney: res.finalMoney,
          totalMoney: res.totalMoney,
          subtractMoney: res.subtractMoney
        });
        wx.hideLoading();
      }
    };
    http.request(params);

  },


index.wxml
<!--index.wxml-->
<view class="container">
  <view class='bg-sear'>
    <view class="scrolltop">
      <view class='section' bindtap='toSearchPage'>
        <image src='../../images/icon/search.png' class='search-img'></image>
        <text class='placeholder'>搜索</text>
      </view>
    </view>
  </view>

  <view class='content'>
    <!-- swiper -->
    <swiper autoplay="{{autoplay}}" indicator-color="{{indicatorColor}}" interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{indicatorActiveColor}} " circular='true' class='pic-swiper' indicator-dots previous-margin='20rpx' next-margin='20rpx'>
      <block wx:for='{{indexImgs}}' wx:key='imgUrl'>
        <swiper-item class="banner-item">
          <view class='img-box'>
            <image src='{{item.imgUrl}}' data-prodid='{{item.relation}}' bindtap='toProdPage' class='banner'></image>
          </view>
        </swiper-item>
      </block>
    </swiper>
    <!-- end swiper -->

    <view class='cat-item'>
      <view class='item' bindtap='toClassifyPage' data-sts="1">
        <image src='../../images/icon/newProd.png'></image>
        <text>新品推荐</text>
      </view>
      <view class='item' bindtap='toLimitedTimeOffer' data-sts="2">
        <image src='../../images/icon/timePrice.png'></image>
        <text>限时特惠</text>
      </view>
      <view class='item' bindtap='toClassifyPage' data-sts="3">
        <image src='../../images/icon/neweveryday.png'></image>
        <text>每日疯抢</text>
      </view>
      <view class='item' bindtap='toCouponCenter'>
        <image src='../../images/icon/newprods.png'></image>
        <text>领优惠券</text>
      </view>
    </view>

    <!-- 消息播放 -->
    <view class='message-play' bindtap='onNewsPage'>
      <image src='../../images/icon/horn.png' class='hornpng'></image>
      <swiper vertical='true' autoplay='true' duration='1000' class='swiper-cont'>
        <block wx:for='{{news}}' wx:key='id'>
          <swiper-item class="items">{{item.title}}</swiper-item>
        </block>
      </swiper>
      <text class='arrow'></text>
    </view>

  </view>

  <block wx:for="{{taglist}}" wx:key="id">
    <!-- 每日上新 -->
    <view class='up-to-date' wx:if="{{item.style==2}}">
      <view class='title'>
        <text>{{item.title}}</text>
        <view class='more-prod-cont' bindtap='toClassifyPage' data-sts="0" data-id="{{item.id}}" data-title="{{item.title}}">
          <text class='more'>查看更多</text>
          <!-- <text class='arrow'></text> -->
        </view>
      </view>
      <view class='item-cont'>
        <block wx:for="{{item.prods}}" wx:for-item="prod" wx:key="prodId">
          <view class='prod-item' bindtap='toProdPage' data-prodid="{{prod.prodId}}">
            <view>
              <view class='imagecont'>
                <image src='{{prod.pic}}' class='prodimg'></image>
              </view>
              <view class='prod-text'>{{prod.prodName}}</view>
              <view class='price'>
                <text class='symbol'>¥</text>
                <text class='big-num'>{{wxs.parsePrice(prod.price)[0]}}</text>
                <text class='small-num'>.{{wxs.parsePrice(prod.price)[1]}}</text>
              </view>
            </view>
          </view>
        </block>

      </view>
    </view>

    <!-- 商城热卖 -->
    <view class='hot-sale' wx:if="{{item.style==1}}">
      <view class='title'>
        <text>{{item.title}}</text>
        <view class='more-prod-cont' bindtap='toClassifyPage' data-sts="0" data-id="{{item.id}}" data-title="{{item.title}}">
          <text class='more'>更多</text>
          <text class='arrow'></text>
        </view>
      </view>
      <view class='hotsale-item-cont'>
        <block wx:for="{{item.prods}}" wx:for-item="prod" wx:key="prodId">
          <view class='prod-items' bindtap='toProdPage' data-prodid="{{prod.prodId}}">
            <view class='hot-imagecont'>
              <image src='{{prod.pic}}' class='hotsaleimg'></image>
            </view>
            <view class='hot-text'>
              <view class='hotprod-text'>{{prod.prodName}}</view>
              <view class='prod-info'>{{prod.brief}}</view>
              <view class='prod-text-info'>
                <view class='price'>
                  <text class='symbol'>¥</text>
                  <text class='big-num'>{{wxs.parsePrice(prod.price)[0]}}</text>
                  <text class='small-num'>.{{wxs.parsePrice(prod.price)[1]}}</text>
                </view>
                <!-- <view class='singal-price'>
                  <text>¥</text>
                  <text>{{prod.oriPrice}}</text>
                </view> -->
                <image src='../../images/tabbar/basket-sel.png' class='basket-img'></image>
              </view>
            </view>
          </view>
        </block>
      </view>
    </view>

    <!-- 更多宝贝 -->
    <view class='more-prod' wx:if="{{item.style==0}}">
      <view class='title'>{{item.title}}</view>
      <view class='prod-show'>
        <block wx:for="{{item.prods}}" wx:for-item="prod" wx:key="prodId">
          <view class='show-item' bindtap='toProdPage' data-prodid="{{prod.prodId}}">
            <view class='more-prod-pic'>
              <image src='{{prod.pic}}' class='more-pic'></image>
            </view>
            <view class='prod-text-right'>
              <view class='prod-text more'>{{prod.prodName}}</view>
              <view class='prod-info'>{{prod.brief}}</view>
              <view class='b-cart'>
                <view class='price'>
                  <text class='symbol'>¥</text>
                  <text class='big-num'>{{wxs.parsePrice(prod.price)[0]}}</text>
                  <text class='small-num'>.{{wxs.parsePrice(prod.price)[1]}}</text>
                </view>
                <!-- <view class='go-to-buy'>立即购买</view> -->
                <image src='../../images/tabbar/basket-sel.png' class='basket-img' data-prodid="{{prod.prodId}}" catchtap="addToCart"></image>
              </view>
            </view>
          </view>
        </block>
      </view>
    </view>
  </block>
</view>
<wxs module="wxs" src="../../wxs/number.wxs" />

index.js
//index.js
//获取应用实例
var http = require("../../utils/http.js");
var config = require("../../utils/config.js");
const app = getApp()

Page({
  data: {
    indicatorDots: true,
    indicatorColor: '#d1e5fb',
    indicatorActiveColor: '#1b7dec',
    autoplay: true,
    interval: 2000,
    duration: 1000,
    indexImgs: [],
    seq: 0,
    news: [],
    taglist: [],
    sts: 0,
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function() {
    this.getAllData();
  },

  // 页面滚动到指定位置指定元素固定在顶部
  onPageScroll: function(e) { //监听页面滚动
    this.setData({
      scrollTop: e.scrollTop
    })
  },

  toProdPage: function(e) {
    var prodid = e.currentTarget.dataset.prodid;
    if (prodid) {
      wx.navigateTo({
        url: '/pages/prod/prod?prodid=' + prodid,
      })
    }
  },

  toCouponCenter: function() {
    wx.showToast({
      icon:"none",
      title: '该功能未开源'
    })
  },

  // 跳转搜索页
  toSearchPage: function() {
    wx.navigateTo({
      url: '/pages/search-page/search-page',
    })
  },

  //跳转商品活动页面
  toClassifyPage: function(e) {
    var url = '/pages/prod-classify/prod-classify?sts=' + e.currentTarget.dataset.sts;
    var id = e.currentTarget.dataset.id;
    var title = e.currentTarget.dataset.title;
    if (id) {
      url += "&tagid=" + id + "&title=" + title;
    }
    wx.navigateTo({
      url: url
    })
  },

  //跳转限时特惠页面
  toLimitedTimeOffer: function(e) {
    wx.showToast({
      icon:"none",
      title: '该功能未开源'
    })
  },

  //跳转公告列表页面
  onNewsPage: function() {
    wx.navigateTo({
      url: '/pages/recent-news/recent-news',
    })
  },

  onShow: function() {
  },
  getAllData() {
    http.getCartCount(); //重新计算购物车总数量
    this.getIndexImgs();
    this.getNoticeList();
    this.getTag();
  },
  //加载轮播图
  getIndexImgs() {
    //加载轮播图
    var params = {
      url: "/indexImgs",
      method: "GET",
      data: {},
      callBack: (res) => {
        this.setData({
          indexImgs: res,
          seq: res
        });
      }
    };
    http.request(params);
  },
  getNoticeList() {
    // 加载公告
    var params = {
      url: "/shop/notice/topNoticeList",
      method: "GET",
      data: {},
      callBack: (res) => {
        this.setData({
          news: res,
        });
      }
    };
    http.request(params);
  },

  /**
   * 加入购物车
   */
   addToCart(e) {
    const prodId = e.currentTarget.dataset.prodid
    const ths = this
    wx.showLoading();
    var params = {
      url: "/prod/prodInfo",
      method: "GET",
      data: {
        prodId
      },
      callBack: (res) => {
        var params = {
          url: "/p/shopCart/changeItem",
          method: "POST",
          data: {
            basketId: 0,
            count: 1,
            prodId: res.prodId,
            shopId: res.shopId,
            skuId: res.skuList[0].skuId
          },
          callBack: function(res) {
            ths.setData({
              totalCartNum: ths.data.totalCartNum + ths.data.prodNum
            });
            wx.hideLoading();
            http.getCartCount(); //重新计算购物车总数量
            wx.showToast({
              title: "加入购物车成功",
              icon: "none"
            })
          }
        };
        http.request(params);
      }
    };
    http.request(params);
  },


  // 加载商品标题分组列表
  getTag() {
    var params = {
      url: "/prod/tag/prodTagList",
      method: "GET",
      data: {},
      callBack: (res) => {
        this.setData({
          taglist: res,
        });
        for (var i = 0; i < res.length; i++) {
          this.getTagProd(res[i].id, i);
        }
      }
    };
    http.request(params);
  },

  getTagProd(id, index) {
    var param = {
      url: "/prod/prodListByTagId",
      method: "GET",
      data: {
        tagId: id,
        size: 6
      },
      callBack: (res) => {
        var taglist = this.data.taglist;
        taglist[index].prods = res.records

        this.setData({
          taglist: taglist,
        });
      }
    };
    http.request(param);
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  // onPullDownRefresh: function () {
  //     wx.request({
  //       url: '',
  //       data: {},
  //       method: 'GET',
  //       success: function (res) { },
  //       fail: function (res) { },
  //       complete: function (res) {
  //         wx.stopPullDownRefresh();
  //       }
  //     })
  // },

  onPullDownRefresh: function() {

    // wx.showNavigationBarLoading() //在标题栏中显示加载

    //模拟加载
    var ths = this;
    setTimeout(function() {

      ths.getAllData();

      // wx.hideNavigationBarLoading() //完成停止加载

      wx.stopPullDownRefresh() //停止下拉刷新

    }, 100);

  },

  /**
   * 跳转至商品详情
   */
  showProdInfo: function(e) {
    let relation = e.currentTarget.dataset.relation;
    if (relation) {
      wx.navigateTo({
        url: 'pages/prod/prod',
      })
    }
  }
})

index.wxss
/**index.wxss**/

page {
  background: #f7f7f7;
  height: auto;
}

/* 轮播图及搜索框 */

swiper {
  width: 100%;
  height: 350rpx;
  overflow: hidden;
}

swiper.pic-swiper {
  margin-top: 75rpx;
  padding: 10rpx 0;
  background: #fff;
  height: 422rpx;
}

swiper-item {
  font-size: 26rpx;
  font-weight: bold;
}

swiper.pic-swiper .img-box {
  font-size: 0;
}

.wx-swiper-dots {
  margin-bottom: 15rpx;
}

.banner-item {
  box-sizing: border-box;
}

swiper.pic-swiper .banner {
  position: absolute;
  width: 690rpx;
  margin: 0 10rpx;
  height: 402rpx;
  border-radius: 8rpx;
  display: inline-block;
  box-shadow: 0 4px 10px 0 rgba(83, 83, 83, 0.288);
}

.container .bg-sear {
  position: fixed;
  z-index: 999;
  width: 100%;
  line-height: 56rpx;
  background: #fff;
  padding-bottom: 20rpx;
  text-align: center;
  top: 0;
}

.bg-sear .section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60rpx;
  background: #fff;
  z-index: 1;
  border-radius: 50rpx;
  width: 92%;
  margin: auto;
  left: 4%;
  background: #f7f7f7;
}

.bg-sear .section .placeholder {
  display: block;
  font-size: 24rpx;
  color: #999;
}

.bg-sear .section .search-img {
  width: 32rpx;
  height: 32rpx;
  margin-right: 10rpx;
}

/* 分类栏目 */

.content {
  background: #fff;
}

.cat-item {
  display: flex;
  justify-content: space-between;
  background: #fff;
  padding-top: 20rpx;
  padding-bottom: 30rpx;
}

.cat-item .item {
  text-align: center;
  width: 25%;
  display: flex;
  flex-direction: column;
  margin: auto;
  align-items: center;
}

.cat-item .item image {
  width: 75rpx;
  height: 75rpx;
}

.cat-item .item text {
  font-size: 26rpx;
  margin-top: 20rpx;
}

/* 消息播放 */

.message-play {
  position: relative;
  height: 90rpx;
  background: #fff;
  margin: auto;
  padding: 0 60rpx 0 100rpx;
  box-sizing: border-box;
  box-shadow: 0 16rpx 32rpx 0 rgba(7, 17, 27, 0.05);
  border: 2rpx solid #fafafa;
}

.message-play .hornpng {
  width: 77rpx;
  height: 36rpx;
  position: absolute;
  left: 20rpx;
  top: 27rpx;
  margin-right: 8rpx;
}

.message-play .swiper-cont {
  height: 90rpx;
  line-height: 90rpx;
}

.message-play .swiper-cont .items {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-align: left;
}

.arrow {
  width: 15rpx;
  height: 15rpx;
  border-top: 3rpx solid #686868;
  border-right: 3rpx solid #686868;
  transform: rotate(45deg);
  position: absolute;
  right: 30rpx;
  top: 34rpx;
}

/* 每日上新 */

.title {
  position: relative;
  height: 64rpx;
  line-height: 64rpx;
  font-size: 32rpx;
  padding:40rpx 0 10rpx 30rpx;
  color:#333;
  background: #fff;
}

.up-to-date .title{
  color: #fff;
  background: none;
}

.title .more-prod-cont {
  color: #999;
  display: inline-block;
  text-align: right;
}

.up-to-date .title .more-prod-cont .more {
  position:absolute;
right:30rpx;
top:48rpx;
color:#fff;
font-size:24rpx;
background:#65addf;
border-radius:30rpx;
padding:0 30rpx;
height:44rpx;
line-height:44rpx;

}

.title .more-prod-cont .more{
   position:absolute;
  right:30rpx;
  top:48rpx;
  color:#666;
  font-size:24rpx;
  padding:0 20rpx;
  height:44rpx;
  line-height:44rpx;
}

.title .more-prod-cont .arrow {
  top:58rpx;
  right: 30rpx;
  border-top: 2rpx solid #666;
  border-right: 2rpx solid #666;
}

.up-to-date {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAABxCAYAAACkwXoWAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAZBJREFUeJzt1DEBwCAAwLAxYfhEGXJABkcTBb065trnAwj6XwcAvGKAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGRdKykDj9OUNYkAAAAASUVORK5CYII=");
  background-position: top;
  background-size: 100% 332rpx;
  background-repeat: no-repeat;
  background-color: #fff;
}

.up-to-date .item-cont {
  margin: auto;
  height: auto;
  width: calc(100% - 40rpx);
  padding:0 20rpx;
  display: flex;
  flex-wrap:wrap;
  justify-content: space-around;
  /* padding: 10rpx 0 0 0; */
}

.hotsale-item-cont {
  padding-bottom: 20rpx;
  background: #fff;
}

.up-to-date .item-cont::before {
  clear: both;
  height: 0;
  overflow: hidden;
}

.up-to-date .item-cont .prod-item {
  border-radius: 10rpx;
  width: 220rpx;
  background: #fff;
  display: inline-block;
  margin-bottom:20rpx;
  box-shadow: 0rpx 6rpx 8rpx rgba(58,134,185,0.2);
}

.up-to-date .item-cont .prod-item .imagecont {
  width: 100%;
  font-size: 0;
}

.up-to-date .item-cont .prod-item .imagecont .prodimg {
  width: 220rpx;
  height: 220rpx;
  vertical-align: middle;
  border-top-left-radius: 10rpx;
  border-top-right-radius: 10rpx;
  font-size:0;

}

.up-to-date .item-cont .prod-item .prod-text {
  font-size: 28rpx;
  overflow: hidden;
  margin: 10rpx 0;
  height: 68rpx;
  display: -webkit-box;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #000;
  padding: 0 10rpx;
}

.up-to-date .item-cont .prod-item .prod-price {
  font-size: 25rpx;
  color: #eb2444;
  font-family: Arial;
  padding: 0 10rpx;
}

.more.prod-price {
  position: absolute;
  bottom: 20rpx;
}

/* 商城热卖 */

.hot-sale {
  /* margin: 15rpx 0; */
}

.hot-sale .prod-items {
  width: 345rpx;
  display: inline-block;
  background: #fff;
  padding-bottom: 20rpx;
  box-sizing: border-box;
  /* border: 2rpx solid #e1e1e1; */
  box-shadow: 0rpx 6rpx 8rpx rgba(58,134,185,0.2);
}

.hot-sale .prod-items:nth-child(2n-1) {
  margin: 20rpx 10rpx 10rpx 20rpx;
}

.hot-sale .prod-items:nth-child(2n) {
  margin: 20rpx 20rpx 10rpx 10rpx;
}

.prod-items .hot-imagecont .hotsaleimg {
  width: 341rpx;
  height: 341rpx;
}

.prod-items .hot-text .hotprod-text {
  font-size: 28rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prod-items .hot-imagecont {
  font-size: 0;
  text-align: center;
}

.prod-items .hot-text {
  margin-top: 20rpx;
  padding: 0 10rpx;
}

.prod-items .hot-text .prod-info, .more-prod .prod-text-right .prod-info {
  font-size: 22rpx;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prod-items .hot-text .prod-text-info {
  position: relative;
  height: 70rpx;
  line-height: 70rpx;
  font-family: Arial;
}

.prod-items .hot-text .prod-text-info .hotprod-price {
  display: inline;
  font-size: 26rpx;
  color: #eb2444;
}

.prod-items .hot-text .prod-text-info .basket-img {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  right: 0;
  bottom: 7rpx;
  /* border: 2rpx solid #eb2444;
  border-radius: 50%; */
  padding: 8rpx;
}

.singal-price {
  display: inline;
  font-size: 20rpx;
  text-decoration: line-through;
  color: #777;
  margin-left: 15rpx;
}

/* 更多宝贝 */

.more-prod {
  background: #fff;
}


.more-prod .prod-show .show-item .more-prod-pic {
  width: 250rpx;
  height: 250rpx;
}

.more-prod .prod-show .show-item {
  position: relative;
  display: flex;
  padding: 20rpx;
  justify-content: start;
  border-top: 2rpx solid #f4f4f4;
}

.more-prod .prod-show .show-item .more-prod-pic .more-pic {
  max-width: 100%;
  max-height: 100%;
}

.more-prod .prod-show .show-item .prod-text-right {
  margin-left: 30rpx;
  width: 72%;
  padding-bottom: 10rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.more-prod .prod-show .show-item .prod-text-right .go-to-buy {
  font-size: 26rpx;
  background: #fff2f5;
  color: #eb2444;
  border-radius: 50rpx;
  text-align: center;
  padding: 12rpx 20rpx;
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
}

.more-prod .prod-show .show-item .prod-text-right .prod-text.more {
  margin: 0;
  font-size: 28rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
  display: -webkit-box;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.more-prod .prod-show .show-item .prod-text-right .more.prod-price {
  font-size: 28rpx;
  font-family: arial;
}

.b-cart {
  margin-top: 30rpx;
}

.b-cart .basket-img {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  right: 46rpx;
  /* border: 2rpx solid #eb2444;
  border-radius: 50%; */
  padding: 8rpx;
}


index.json
{
  "backgroundTextStyle": "dark",
  "navigationBarTextStyle": "black",
  "enablePullDownRefresh": true,
  "navigationBarTitleText": "mall4j"
}

存储  记录历史搜素

 /**

     * 搜索提交

     */

  toSearchProdPage: function () {

      if (this.data.prodName.trim()) {

      // 记录最近搜索

        let recentSearch = wx.getStorageSync('recentSearch') || [];

        recentSearch = recentSearch.filter(item => item !== this.data.prodName)

        recentSearch.unshift(this.data.prodName);

        if (recentSearch.length>10){

          recentSearch.pop();

        }

        wx.setStorageSync('recentSearch', recentSearch);

      // 跳转到商品列表页

      wx.navigateTo({

        url: '/pages/search-prod-show/search-prod-show?prodName=' + this.data.prodName,

      })

    }

  },

    /**

     * 清空搜索历史

     */

    clearSearch: function () {

    wx.removeStorageSync('recentSearch');

    this.getRecentSearch();

  },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值