微信小程序礼物挑选商家货物列表样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<view class="{{load ? 'load': ''}}">
  <view class="loading-placeholder">
    <image src="./icon/placeholder.png"></image>
  </view>
</view>

<scroll-view style="height:100%;" class="container {{load ? 'container-show': ''}}" scroll-y="{{scrollY}}">
    <view class="sku">
      <image src="{{sku.images[0].url}}" style="width:150rpx;height:150rpx;"></image>
      <view class="sku-info">
        <text class="sku-title">{{sku.title}}</text>
        <text class="sku-from">{{sku.brand}}</text>
      </view>
    </view>
    <text class="buy-method-tips">您可以通过以下方式购买</text>
    <view class="buy-area">
      <block wx:for="{{sku.sales}}" wx:key="price" wx:for-item="sale">
        <view class="buy-item">
          <view class="item-header">
            <text>{{sale.mart}}</text>
            <image src="{{sale.url}}" style="width:{{ 28 * sale.ratio }}rpx;height:28rpx;"></image>
          </view>
          <view class="item-info">
            <view class="info-area">
              <view class="info">
                <text class="key">价格：</text>
                <text class="value price">{{sale.price}}</text>
              </view>
              <view class="info">
                <text class="key">说明：</text>
                <text class="value">{{sale.intro}}</text>
              </view>
            </view>
            <text class="buy-button" bindtap="buy" data-url="{{sale.link_m_cps || sale.link_pc_cps || sale.link_m_raw || sale.link_pc_raw}}">购买 ></text>
          </view>
        </view>
      </block>
    </view>
    <view class="copy-container" wx:if="{{show}}">
      <view class="copy-box">
        <text class="copy-box-title">点击链接并复制，在浏览器下打开</text>
        <textarea auto-height maxlength="0" value="{{url || ''}}"/>
        <view class="copy-box-confirm" bindtap="confirm">确定</view>
      </view>
    </view>
    <text class="buy-price-tips">价格仅供参考，实际价格以卖家为准</text>
</scroll-view>

二、wxss样式文件代码如下：

/**load之前的占位图样式**/
.container{
  z-index: -1;
  opacity: 0;
  background-color: transparent;
  transition: all .2s ease-in;
}

.loading-placeholder {
  width: 100%;
  height: 100%;
  position: fixed;
}

.loading-placeholder image{
  width: 100%;
  height: 100%;
}

.container-show {
  z-index: 1;
  opacity: 1;
}

.load{
  width: 0;
  height: 0;
  z-index: -2;
}

.load .loading-placeholder{
  width: 0;
  height: 0;
}
/**load之前的占位图样式 end**/

.sku{
  background-color: #fff;
  line-height: 1.71;
  font-size: 28rpx;
  color: #535353;
  padding: 24rpx;
  display: -webkit-flex;
  display: flex;
}

.sku-info{
  -webkit-flex: 1;
          flex: 1;
  margin: -9rpx 0 0 24rpx;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
}

.sku-title{
  -webkit-flex: 1;
          flex: 1;
}

.sku-from{
  color: #8e8e93;
  font-size: 24rpx;
  line-height: 1;
}

/* 购买区 */
.buy-method-tips{
  display: block;
  font-size: 28rpx;
  line-height: 1;
  color: #616368;
  margin: 48rpx 0 0 24rpx;
}

.buy-item{
  margin-top: 24rpx;
}

.buy-price-tips{
  display: block;
  text-align: center;
  color: #8e8e93;
  font-size: 24rpx;
  line-height: 1;
  margin: 24rpx 0;
}

.buy-item{
  padding: 24rpx;
  background-color: #fff;
}

.item-header{
  line-height: 1;
  font-size: 28rpx;
  color: #616368;
  border-bottom: 1px solid #e9e9e9;
  padding-bottom: 24rpx;
}

.item-header text{
  margin-right: 24rpx;
}

.item-info {
  color: #8e8e93;
  font-size: 22rpx;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items :center;
          align-items :center;
  margin-top: 20rpx;
}

.price{
  color:#e60012;
}

.info-area{
  -webkit-flex: 1;
          flex: 1;
  margin-top: 24rpx 24rpx 0 0;
}

.info{
  margin-bottom: 12rpx;
  display: -webkit-flex;
  display: flex;
}


.buy-button{
  display: block;
  width: 100rpx;
  height: 54rpx;
  line-height: 54rpx;
  opacity: 0.5;
  border-radius: 6rpx;
  background-color: #e60012;
  color: #fff;
  text-align: center;
}

.value{
  -webkit-flex: 1;
          flex: 1;
}

.copy-container{
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: fixed;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  background-color: rgba(1,1,1, .7);
  color: #999;
  display: -webkit-flex;
  display: flex;
  /*transition: all .2s ease-in;*/
  /*display: none;*/
  /*opacity: 0;*/
  /*visibility: hidden;*/
}
.copy-box{
  background-color: rgb(250,250,252);
  text-align: center;
  padding:30rpx;
}

.copy-box-title{
  line-height: 1;
  color:#333;
  font-size: 34rpx;
}

.copy-box textarea{
  /*position: absolute;*/
  padding:30rpx 0;
}

.copy-box-confirm{
  padding-top: 40rpx;
  color: rgb(61,198, 60);
  line-height: 1;
  border-top: 1px rgb(213,213,214) solid;
}

三、js页面代码如下：

import common from '../../common/app'
import API from '../../common/API'
import { fetch } from '../../utils/utils'
const page = {
  data:{
    scrollY: true
  },
  onLoad(options) {
    console.log('sku onload...');
    this.setData({ load: false })
    wx.showToast({ title: '玩命加载中',icon: 'loading',duration: 10000 })
    const url = `${API.getFullSku.url}/${options.sid || 1668}.html`
    // const url = `${API.getFullSku.url}/${options.sid}.html`
    // SKU售卖链接各个常见电商的log
    fetch(url).then(result => {
      const {errMsg, statusCode, data} = result
      if(errMsg === 'request:ok' && statusCode == 200){
        console.log(`${url}接口成功：`, result);
        const sku = data.data[0]
        let png = 'default.png'
        let ratio = 2.416
        sku.sales = sku.sales.map(sale => {
          const link = sale.link_m_cps || sale.link_pc_cps || sale.link_m_raw || sale.link_pc_raw
          if(/tmall|天猫/.test(sale.mart) || link.indexOf('tmall.com') !== -1 ){
            png = 'tmall.png'
            ratio = 7.138
          }else if (link.indexOf('taobao.com') !== -1 ) {
            png = 'tb.png'
          }else if (link.indexOf('jd.com') !== -1 ) {
            png = 'jd.png'
            ratio = 2.722
          }else if(link.indexOf('amazon.cn') !== -1 ){
            png = 'amazoncn.png'
            ratio = 2.25
          }else if (link.indexOf('amazon.jp') !== -1 ) {
            png = 'amazonjp.png'
            ratio = 4
          }else if (link.indexOf('shopbop.com') !== -1 ) {
            png = 'shopbop.png'
            ratio = 6.25
          }else if (link.indexOf('rakuten.com') !== -1 ) {
            png = 'rakuten.png'
            ratio = 2
          }else if (link.indexOf('amazon.') !== -1 ) {
            png = 'amazon.png'
            ratio = 3.194
          }
          sale.url = `http://c.diaox2.com/cms/diaodiao/mart2/${png}`
          sale.ratio = ratio
          return sale
        })
        this.setData({sku})
      }else{
        console.log(`${url}接口失败：`, result);
      }
      wx.hideToast()
      this.setData({load: true})
    }).catch(result => {
      console.log(`${url}接口错误：`, result)
      wx.hideToast()
      this.setData({load: true})
    })
  }
  ,buy(event){
    const url = event.target.dataset.url
    if(url){
      this.setData({url, show: true, scrollY: false})
      // wx.showModal({
      //   title: '长按复制，在浏览器下打开',
      //   content: url,
      //   showCancel: false
      // })
    }
  }
  ,confirm(){
    this.setData({show: false,scrollY: true})
  }
}
Object.assign(page, common)
Page(page)

模板简介：该模板名称为【微信小程序礼物挑选商家货物列表样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。