mobile / tt-yoho-app · Commits

Go to a project

Authored by 肖亚东
Commit 654462523e442a1d697bf216802a87507c7c3692 1 parent 4215936b

品类子页面商品列表 — review by 黄敬囿

Inline Side-by-side
Showing 42 changed files with 3665 additions and 45 deletions
... ... @@ -4,7 +4,8 @@
"pages/category/category",
"pages/shopCart/shopCart",
"pages/userCenter/userCenter",
"pages/productList/index"
"pages/productList/index",
"pages/goodsList/goodsList"
],
"window":{
... ...
... ... @@ -3,7 +3,7 @@ import wx from '../utils/tt';
export default {
get() {
let udid = wx.getStorageSync('udid');
let udid = tt.getStorageSync('udid');
if (udid) {
return udid;
... ... @@ -11,7 +11,7 @@ export default {
udid = uuid().replace(/-/g, '');
wx.setStorageSync('udid', udid);
tt.setStorageSync('udid', udid);
return udid;
}
... ...
// pages/goodsList/FilterComponent.js
// import { postFormId } from '../../libs/formIdCollectRequest.js'
Component({
/**
* 组件的属性列表
*/
properties: {
isResetFilter: {
type: Boolean,
value: false,
observer: 'resetFilter'
}
},
/**
* 组件的初始数据
*/
data: {
tabs: [
{
key: 'default',
name: '默认',
isIndicator: true, //是否有图片
isRadio: false, //是否是单选
selected: true,
icon: '../../images/default_normal@2x.png',
ascIcon: '../../images/default_highlight@2x.png',
descIcon: '../../images/default_highlight@2x.png',
},
{
key: 'new',
name: '新品',
asc: 's_t_desc',
isIndicator: false,
isRadio: true,
selected: false,
icon: '',
ascIcon: '',
descIcon: '',
},
{
key: 'popular',
name: '人气',
asc: 'h_v_desc',
isIndicator: false,
isRadio: true,
selected: false,
icon: '',
ascIcon: '',
descIcon: '',
},
{
key: 'price',
name: '价格',
defaults: 'asc',
asc: 's_p_asc',
desc: 's_p_desc',
isIndicator: true,
isRadio: false,
isAsc: true,
selected: false,
icon: '../../images/arrow_normal@2x.png',
ascIcon: '../../images/arrow_up@2x.png',
descIcon: '../../images/arrow_down@2x.png',
},
// {
// key: 'discount',
// name: '折扣',
// defaults: 'desc',
// asc: 'p_d_desc',
// desc: 'p_d_asc',
// isIndicator: true,
// isRadio: false,
// isAsc: false,
// selected: false,
// icon: './images/arrow_normal@2x.png',
// ascIcon: './images/arrow_up@2x.png',
// descIcon: './images/arrow_down@2x.png',
// },
{
key: 'filter',
name: '筛选',
selected: true,
isIndicator: true,
icon: '../../images/sx-ic-h@2x.png',
ascIcon: '../../images/sx-ic-h@2x.png',
descIcon: '../../images/sx-ic-h@2x.png',
}
],
defaultSheet: [
{
name: '默认',
order: '',
selected: true
},
{
name: '折扣从高到低',
order: 'p_d_desc',
selected: false
},
{
name: '折扣从低到高',
order: 'p_d_asc',
selected: false
}
],
originTabs:[],
selectIndex: 0,
isShowDefaultSheet: false,
selectSheetIndex: 0,
},
ready: function() {
var tabs = this.data.tabs;
var originTabs = [];
tabs&&tabs.map((item, index)=>{
originTabs.push({...item});
});
this.setData({
originTabs
});
},
/**
* 组件的方法列表
*/
methods: {
tabDidClick(e) {
var item = e.currentTarget.dataset.item;
var index = e.currentTarget.dataset.index;
var tabs = this.data.tabs;
var selectIndex = this.data.selectIndex;
var currentItem = tabs[selectIndex];
//进入筛选页面 TODO
if (item.key === 'filter'){
this.triggerEvent('jumpToFilterPage');
return;
}
if (selectIndex == index) { //点击同一个tab
if (currentItem.isRadio) { //单选
this.setData({
isShowDefaultSheet: false
})
return;
}else { //多选
if(index === 0){//展开默认的下拉菜单
var isShowDefaultSheet = this.properties.isShowDefaultSheet;
if (!isShowDefaultSheet) {
this.triggerEvent('defaultTabTap', { isShowDefaultSheet});
}
this.setData({
isShowDefaultSheet: !isShowDefaultSheet
})
}else {
currentItem.isAsc = !currentItem.isAsc;
tabs.splice(index,1,currentItem);
this.setData({
isShowDefaultSheet: false,
tabs,
order: currentItem.isAsc ? currentItem.asc : currentItem.desc
});
this.updateProductList();
}
}
}else { //切换选项
currentItem.selected = false;
item.selected = true;
tabs.splice(index, 1, item);
tabs.splice(selectIndex, 1, currentItem);
var order = this.data.order;
if (item.isRadio) {
order = item.asc;
}else {
order = item.isAsc ? item.asc : item.desc
}
this.setData({
isShowDefaultSheet: false,
tabs,
selectIndex: index,
order
});
this.updateProductList();
}
},
defaultSheetSelected (e){
var item = e.currentTarget.dataset.item;
var index = e.currentTarget.dataset.index;
var defaultSheet = this.data.defaultSheet;
var selectSheetIndex = this.data.selectSheetIndex;
if(index == selectSheetIndex) {
this.setData({
isShowDefaultSheet: false
})
return;
}
var tabs = this.data.tabs;
var defaultItem = tabs[0];
if(index != 0) {
defaultItem.name = '折扣';
}else {
defaultItem.name = '默认';
}
var currentSheetItem = defaultSheet[selectSheetIndex];
currentSheetItem.selected = false;
item.selected = true;
defaultSheet.splice(index, 1, item);
this.setData({
isShowDefaultSheet: false,
tabs,
defaultSheet,
order: item.order,
selectSheetIndex: index
});
this.updateProductList();
},
hiddenDefaultSheet() {
this.setData({
isShowDefaultSheet: false
})
},
updateProductList() {
var order = this.data.order;
var event = {
order
}
this.triggerEvent('updateProductList', event);
},
resetFilter(newValue, oldValue) {
if (newValue != oldValue) {
let originTabs = this.data.originTabs;
var tabs = [];
originTabs&&originTabs.map((item, index) => {
tabs.push({...item});
})
this.setData({
tabs,
selectIndex: 0,
isShowDefaultSheet: false,
selectSheetIndex: 0,
});
}
},
touchMove() {
this.setData({
isShowDefaultSheet: false
})
},
//上报formid
formSubmit: function (e) {
// console.log('####formID:', e.detail.formId)
// let formId = e.detail.formId;
// postFormId(formId,"4")
},
}
})
... ...
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
... ...
<!--pages/goodsList/FilterComponent.wxml-->
<form bindsubmit="formSubmit" report-submit='true'>
<view class="container" catchtouchmove="touchMove">
<view class="tabsContainer">
<block wx:for="{{tabs}}" wx:key="filterTabs">
<view class="itemContainer" style='width: {{750/tabs.length}}rpx;' data-item="{{item}}" data-index="{{index}}" bindtap="tabDidClick">
<text style="color: {{item.selected ? '#444444' : '#b0b0b0'}}; font-size: 14px">{{item.name}}</text>
<view wx:if="{{item.isIndicator}}">
<image class="item-icon" src="{{item.selected ? (item.isAsc ? item.ascIcon : item.descIcon) : item.icon}}"></image>
</view>
<button formType="submit" style='width: {{750/tabs.length}}rpx;left:{{(750/tabs.length)*index}}rpx;' class="itemContainerButton"></button>
</view>
<view class="itemLine"></view>
</block>
</view>
<view class="defaultSheet" style="display:{{isShowDefaultSheet ? 'block' : 'none'}}">
<view class="defaultSheetContainer">
<view class="separator-top"></view>
<block wx:for="{{defaultSheet}}" wx:key="filterSheet">
<view class="sheetItem" data-item="{{item}}" data-index="{{index}}" bindtap="defaultSheetSelected">
<text style=" color :{{item.selected ? '#444444' : '#b0b0b0'}}; font-size: 14px; margin-left: 5%">{{item.name}}</text>
<image class="sheetIcon" style="display: {{item.selected ? 'block' : 'none'}}" src="../../images/default_new_select@2x.png"></image>
</view>
<view class="separator"></view>
</block>
</view>
<view class="maskView" bindtap="hiddenDefaultSheet"></view>
</view>
</view>
</form>
\ No newline at end of file
... ...
/* pages/goodsList/FilterComponent.wxss */
.container {
width: 100%;
height: 90rpx;
display: flex;
flex-direction: column;
justify-content: center;
border-top: 1rpx #e5e5e5 solid;
border-bottom: 1rpx #e5e5e5 solid;
}
.tabsContainer {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
.itemContainer {
display: flex;
flex-direction: row;
height: 100%;
justify-content: center;
align-items: center;
}
.itemLine {
width: 2rpx;
height: 44rpx;
background-color: #e5e5e5;
}
.item-icon {
width: 20rpx;
height: 28rpx;
margin-left: 4rpx;
}
.defaultSheet {
position: absolute;
top: 91rpx;
width: 100%;
background-color: transparent;
}
.defaultSheetContainer {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
background-color: white;
}
.sheetItem {
height: 88rpx;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.sheetText {
margin-left: 5%;
font-size: 28rpx;
color: #b0b0b0;
}
.sheetText-highlight {
margin-left: 5%;
font-size: 28rpx;
color: #444444;
}
.sheetIcon {
width: 32rpx;
height: 22rpx;
margin-right: 20rpx;
}
.separator-top {
width: 100%;
background-color: #e5e5e5;
height: 2rpx;
}
.separator {
margin-left: 5%;
width: 95%;
background-color: #e5e5e5;
height: 2rpx;
}
.maskView {
width: 100%;
height: 2000rpx;
background-color: rgba(0, 0, 0, 0.5);
}
.itemContainerButton{
background-color: red;
height: 90rpx;
opacity: 0;
position: absolute;
top: 0rpx;
}
\ No newline at end of file
... ...
... ... @@ -9,9 +9,6 @@ Component({
},
methods: {
switchChannel: function(event) {
console.log('====================================');
console.log(event);
console.log('====================================');
this.triggerEvent('switchChannel', event);
},
}
... ...
... ... @@ -9,8 +9,8 @@ Component({
},
methods: {
jumpByRule() {
this.triggerEvent('jumpByRule');
jumpByRule: function(event) {
this.triggerEvent('jumpByRule', event);
}
}
})
\ No newline at end of file
... ...
... ... @@ -9,8 +9,8 @@ Component({
},
methods: {
jumpByRule() {
this.triggerEvent('jumpByRule');
jumpByRule: function(event) {
this.triggerEvent('jumpByRule', event);
}
}
})
\ No newline at end of file
... ...
... ... @@ -8,8 +8,8 @@ Component({
},
methods: {
groupItemTapped() {
this.triggerEvent('jumpByRule');
groupItemTapped: function(event) {
this.triggerEvent('jumpByRule', event);
}
}
})
\ No newline at end of file
... ...
... ... @@ -8,8 +8,8 @@ Component({
},
methods: {
groupItemTapped() {
this.triggerEvent('jumpByRule');
groupItemTapped: function(event) {
this.triggerEvent('jumpByRule', event);
}
}
})
\ No newline at end of file
... ...
... ... @@ -25,8 +25,8 @@ Component({
}
},
methods: {
jumpByRule() {
this.triggerEvent('jumpByRule');
jumpByRule: function(event) {
this.triggerEvent('jumpByRule', event);
}
}
})
\ No newline at end of file
... ...
... ... @@ -8,8 +8,8 @@ Component({
},
methods: {
jumpByRule() {
this.triggerEvent('jumpByRule');
jumpByRule: function(event) {
this.triggerEvent('jumpByRule', event);
}
}
})
\ No newline at end of file
... ...
... ... @@ -13,7 +13,7 @@
margin-top: 54rpx;
}
.product-cell-name {
font-family: PingFang-SC-Medium;
font-family: PingFang SC Medium;
font-size: 20rpx;
color: #444444;
letter-spacing: 0;
... ... @@ -27,14 +27,14 @@
margin-top: 24rpx;
}
.product-cell-sale-price {
font-family: SanFranciscoText-Medium;
font-family: SanFranciscoText Medium;
font-size: 26rpx;
color: #444444;
letter-spacing: 0;
margin-right: 14rpx;
}
.product-cell-sale-price-red {
font-family: SanFranciscoText-Medium;
font-family: SanFranciscoText Medium;
font-size: 26rpx;
color: #D0021B;
letter-spacing: 0;
... ... @@ -43,7 +43,7 @@
.product-cell-market-price {
font-family: SanFranciscoText-Regular;
font-family: SanFranciscoText Regular;
font-size: 26rpx;
color: #B0B0B0;
letter-spacing: 0;
... ...
... ... @@ -4,13 +4,13 @@ export default {
payment_code: '45',
domains: {
// production
// api: 'https://api.yoho.cn',
api: 'https://api.yoho.cn',
// gray
// api: 'http://apigray.yoho.cn',
// test
api: 'http://api-test3.dev.yohocorp.com',
// api: 'http://api-test3.dev.yohocorp.com',
yasApi: 'https://analysis.yohobuy.com/yas_mobile',
app_report_host: 'https://app.yoho.cn/collect/v3',
... ...
... ... @@ -205,7 +205,7 @@ Page({
//拼接url
let queryString = "?gender=" + gender + "&sort=" + sort + "&title=" + categoryName +
"&categoryId=" + parentCategoryId + "&subCategoryId=" + categoryId;
wx.navigateTo({
tt.navigateTo({
url: '../goodsList/goodsList' + queryString
});
}
... ... @@ -241,7 +241,7 @@ Page({
// L2_CATE_ID:c2id
// }
// logEvent(YB_CATEGORY_FL,param);
wx.navigateTo({
tt.navigateTo({
url: '../goodsList/goodsList' + queryString
});
... ... @@ -275,9 +275,10 @@ Page({
//拼接url
let queryString = "?gender=" + gender + "&sort=" + sort + "&title=" + categoryName +
"&categoryId=" + parentCategoryId + "&subCategoryId=" + categoryId + "&firstProductSkn=" + firstProductSkn;
wx.navigateTo({
url: '../goodsList/goodsList' + queryString
});
tt.navigateTo({
url: 'pages/goodsList/goodsList' + queryString
});
},
/**
... ... @@ -313,7 +314,7 @@ Page({
//拼接url
let queryString = "?gender=" + gender + "&sort=" + sort + "&title=" + categoryName + "&categoryId=" + categoryId + "&subCategoryId=";
wx.navigateTo({
tt.navigateTo({
url: '../goodsList/goodsList' + queryString
});
... ... @@ -323,7 +324,7 @@ Page({
* 点击品牌列表页
**/
onBrandItemSelected: function (event) {
wx.navigateTo({
tt.navigateTo({
url: '../classify/brands' + '?currentChannelId=' + this.data.currentChannelId
});
},
... ... @@ -345,11 +346,11 @@ Page({
// }
// logEvent(YB_CATEGORY_FL, param);
if (data && data.shop_id) {
wx.navigateTo({
tt.navigateTo({
url: '../goodsList/brandStore?shopId=' + data.shop_id + '&shopName=' + data.brand_name
});
} else {
wx.navigateTo({
tt.navigateTo({
url: '../goodsList/brand?brandId=' + data.id + '&brandName=' + data.brand_name
});
}
... ...
import api from '../../common/api.js';
import { parseBrandListData } from '../../utils/productListUtil';
import { shouldDiscardTap } from '../../utils/util';
import queryString from '../../vendors/query-string';
const { Actionsheet, extend } = require('../../vendors/zanui/index');
import { getQRCodeSource } from '../../utils/miniQRCodeRoute.js'
// import { jumpByUrl } from '../../libs/urlRoute';
// import {
// logEvent,
// YB_PAGE_OPEN_L,
// YB_SHARE_RESULT_L
// } from '../../libs/analytics.js'
//获取应用实例
let app = getApp();
const screenHeight = app.globalData.systemInfo.screenHeight;
const windowWidth = app.globalData.systemInfo.windowWidth;
const windowHeight = app.globalData.systemInfo.windowHeight;
let PV_ID = new Date().getTime() + '';
Page(extend({}, Actionsheet,{
data:{
lastTapTimeStamp: 0,
screenHeight,
windowHeight,
from_page_name: '',
from_page_param: '',
current_page_name: 'goodsList',
current_page_param: '',
title: '',
page_param: {},
origin_param: {},
list: {
isLoading: false,
error: null,
data: null,
pageSize: 60,
currentPage: 0,
pageCount: 0,
total: 0,
endReached: false,
},
isShowIndicator: false,
scrollTop: 0,
filterStorageKey: '',
isUnionShare: false,
msort: '',
misort: '',
sort: '',
isShowSnapshoot: false,
snapshootShareData: {},
actionsheet: {
componentId: 'shareActionSheet',
show: false,
closeOnClickOverlay: true,
isNewShareStyle: true,
cancelText: '取消',
actions: []
},
},
onLoad:function(options){
if (options && options.scene && options.scene.length == 32) {
let code = options.scene;
getQRCodeSource(code).then(json => {
if (json) {
this.loadElement(json);
}
})
.catch(error => {
});
}else {
this.loadElement(options);
}
},
onReady:function(){
// 生命周期函数--监听页面初次渲染完成
tt.setNavigationBarTitle({
title: this.data.title,
});
},
onShow:function(){
// 生命周期函数--监听页面显示
},
onHide:function(){
// 生命周期函数--监听页面隐藏
},
onUnload:function(){
// 生命周期函数--监听页面卸载
var key = this.data.filterStorageKey;
tt.removeStorage({
key: key,
success: function(res) {
},
})
},
onPullDownRefresh: function() {
// 页面相关事件处理函数--监听用户下拉动作
// let params = {
// PAGE_NAME: this.data.current_page_name,
// PAGE_PARAM: this.data.current_page_param,
// FROM_PAGE_NAME: this.data.from_page_name,
// FROM_PAGE_PARAM: this.data.from_page_param,
// PV_ID: PV_ID,
// };
// logEvent(YB_PAGE_OPEN_L, params);
},
loadMore: function() {
// 页面上拉触底事件的处理函数
this.fetchListData();
},
loadElement(options){
// 生命周期函数--监听页面加载
// console.log('before',options)
if(options.gender){
options.gender = decodeURIComponent(options.gender);
}
if(options.title){
options.title = decodeURIComponent(options.title);
}
let title = options.title;
let page_param = options;
let from_page_name = options.page_name ? options.page_name : '';
let from_page_param = options.page_param ? options.page_param : '';
let current_page_param = options.categoryId ? options.categoryId:'';
let cagetoryID = options.categoryId ? options.categoryId : options.msort + options.misort;
let filterStorageKey = 'category_storageKey_' + cagetoryID
let isUnionShare = app.globalData.user_union_type ? true : false;//user_union_type 有值 需要显示 联盟share按钮
let msort = options.msort ? options.msort : '';
let misort = options.misort ? options.misort : '';
let sort = options.sort ? options.sort : '';
//解析渠道号
let unionType = options.union_type ? options.union_type : '';
if (unionType) {
app.updateUnionType(unionType);
}
// console.log(options)
// console.log('goodsList')
if (page_param.sort) {
delete page_param["misort"];
delete page_param["msort"];
}
this.setData({
title,
page_param,
origin_param: { ...options },
from_page_name,
from_page_param,
current_page_param,
filterStorageKey,
isUnionShare,
msort,
misort,
sort,
});
var pages = getCurrentPages()
var currentPage = pages[pages.length - 1]
var url = currentPage.route
// let params = {
// PAGE_NAME: this.data.current_page_name,
// PAGE_PARAM: this.data.current_page_param,
// FROM_PAGE_NAME: this.data.from_page_name,
// FROM_PAGE_PARAM: this.data.from_page_param,
// PV_ID: PV_ID,
// PAGE_PATH: url
// };
// logEvent(YB_PAGE_OPEN_L, params);
this.fetchListData();
tt.setNavigationBarTitle({
title: this.data.title,
});
this.setShareSettingDatafunction();
},
setShareSettingDatafunction(){
if (app.globalData.user_union_type) {//user_union_type_imageUrl
let actionsheet = this.data.actionsheet;
let actionsheetParam = [
{
name: '分享给朋友',
className: 'action-class',
loading: false,
openType: 'share',
image_src: '../../images/share_union_wechat@2x.png'
},
{
// name: '生成卡片并分享',
name: '生成海报分享',
className: 'action-class',
loading: false,
image_src: '../../images/share_union_wxpeng@2x.png'
}
];
actionsheet.unionUserImageUrl = app.globalData.user_union_type_imageUrl
actionsheet.actions = actionsheetParam;
this.setData({
actionsheet,
})
this.setUnionShareSnapData();
}
},
//设置生成快照的数据
setUnionShareSnapData:function(){
let params = queryString.stringify(this.data.page_param, { encode: false });
let shareInfo = app.globalData.shareInfo;
let user_union_type = app.globalData.user_union_type ? app.globalData.user_union_type : '';
let title = shareInfo ? shareInfo.title : '';
let misort = this.data.misort ? this.data.misort : '';
let msort = this.data.msort ? this.data.msort : '';
var default_image = '';
let page_param = this.data.page_param;
page_param['union_type'] = user_union_type;
// console.log('zjj',shareInfo)
let union_qrCode = API_HOST + '/wechat/miniapp/img-check.jpg?param=' + encodeURIComponent(JSON.stringify(page_param)) + '&miniQrType=6';
var shareData = {
title: title,
goodListName: this.data.title,
content: shareInfo ? shareInfo.content : '',
default_image: shareInfo ? shareInfo.bigImage : '',
union_qrCode,
msort: msort,
misort: misort,
page_name: this.data.current_page_name,
sharePath: '/pages/goodsList/goodsList?union_type=' + app.globalData.user_union_type + "&" + params,
sort: this.data.sort,
categoryID: this.data.current_page_param,
}
this.setData({
snapshootShareData:shareData
})
},
onShareAppMessage: function (res) {
let param = {
FROM: res.from,
SHARE_RESUIL: 0,
TITLE: '创建推广',
DESC: this.data.snapshootShareData.content,
PATH: this.data.snapshootShareData.sharePath,
SHARE_TYPE: 1,
}
return {
title: this.data.title ? this.data.title : this.data.snapshootShareData.title ? this.data.snapshootShareData.title:param.TITLE, // 分享标题
imageUrl: this.data.snapshootShareData.default_image,
desc: this.data.snapshootShareData.content, // 分享描述
path: this.data.snapshootShareData.sharePath, // 分享路径
success: function (res) {
// param.SHARE_RESUIL = 1
// logEvent(YB_SHARE_RESULT_L, param);
},
fail: function (res) {
// param.SHARE_RESUIL = 2
// logEvent(YB_SHARE_RESULT_L, param);
}
}
},
//品牌商品列表
fetchListData: function() {
if (this.data.list.isLoading || this.data.list.endReached) {
return;
}
let page = this.data.list.currentPage + 1;
let param = {
method: 'app.search.category',
page,
limit: this.data.list.pageSize
}
Object.assign(param, this.data.page_param);
let list = Object.assign(this.data.list, {isLoading: true,});
this.setData({list});
api.get({data:param})
.then(json => {
if (!json || !json.code || json.code != 200) {
let list = Object.assign(this.data.list, {isLoading: false, error: {code: json.code, message: json.message}});
this.setData({list});
return;
}
json = json.data;
let currentPage = json && json.page ? json.page : 1;
let pageCount = json && json.page_total ? json.page_total : 0;
let total = json && json.total ? json.total : 0;
let endReached = currentPage == pageCount;
let data = json.product_list;
data = parseBrandListData(data);
if (currentPage > 1) {
let oldList = this.data.list.data;
data = [...oldList, ...data];
}
let newList = {
isLoading: false,
data,
currentPage,
pageCount,
total,
endReached,
};
let list = Object.assign(this.data.list, newList);
this.setData({list});
})
.catch(error => {
let list = Object.assign(this.data.list, {isLoading: false, error,});
this.setData({list});
});
},
//点击筛选
updateProductList: function(event) {
var order = event.detail.order;
var param = {
order
}
this.updateProductListWithFilterParam(param);
},
jumpToFilterPage: function() {
let params = Object.assign({method: 'app.search.category.filter'},this.data.origin_param);
let storageKey = this.data.filterStorageKey;
let paramString = JSON.stringify(params);
tt.navigateTo({
url: './ProductListFilterPage?storageKey=' + storageKey + '&params=' + paramString
})
},
updateProductListWithFilterParam: function(param) {
let page_param = this.data.page_param;
page_param = Object.assign(page_param, param);
let newList = Object.assign(this.data.list, { currentPage: 0, pageCount: 0, total: 0, endReached: false, });
this.setData({
page_param,
list: newList
});
this.fetchListData();
},
onScroll: function(e) {
var { scrollTop } = e.detail;
var isShow = scrollTop > windowHeight * 2 ? true : false;
if (isShow != this.data.isShowIndicator) {
this.setData({
isShowIndicator: isShow
});
}
},
backToTop: function () {
this.setData({
scrollTop: 0
})
},
hiddenSheet: function () {
this.setData({
isShowSnapshoot: false
})
},
handleZanActionsheetCancel({ componentId }) {
this.setData({
'actionsheet.show': false
})
},
handlerJumpToUnionUrl() {
// this.setData({
// 'actionsheet.show': false
// })
// jumpByUrl("https://activity.yoho.cn/feature/2213.html?title=说明详情&openby:yohobuy={\"action\":\"go.h5\",\"params\":{\"title\":\"说明详情\",\"url\":\"https://activity.yoho.cn/feature/2213.html\"}}", this.data.current_page_name)
},
// 当行动按钮中有一个被点击时触发
// index 代表被点击按钮在传入参数 actions 中的位置
handleZanActionsheetClick({ componentId, index }) {
this.setData({
'actionsheet.show': false
})
if (index === 1) {
this.setData({
isShowSnapshoot: true
})
}
},
//进入创建联盟分享页面
unionShare: function() {
this.setData({
'actionsheet.show': true
})
// let params = queryString.stringify(this.data.page_param, { encode: false });
// let shareInfo = app.globalData.shareInfo;
// let user_union_type = app.globalData.user_union_type ? app.globalData.user_union_type : '';
// let title = shareInfo ? shareInfo.title : '';
// let misort = this.data.misort ? this.data.misort : '';
// let msort = this.data.msort ? this.data.msort : '';
// var default_image = '';
// let page_param = this.data.page_param;
// page_param['union_type'] = user_union_type;
// let union_qrCode = API_HOST + '/wechat/miniapp/img-check.jpg?param=' + encodeURIComponent(JSON.stringify(page_param)) + '&miniQrType=6';
// var shareData = {
// title: title,
// goodListName: this.data.title,
// content: shareInfo ? shareInfo.content : '',
// default_image: shareInfo ? shareInfo.bigImage : '',
// union_qrCode,
// msort: msort,
// misort: misort,
// page_name: this.data.current_page_name,
// sharePath: '/pages/goodsList/goodsList?union_type=' + app.globalData.user_union_type + "&" + params,
// sort: this.data.sort,
// categoryID: this.data.current_page_param,
// }
// var timestamp = Date.parse(new Date());
// try {
// tt.setStorageSync(timestamp + '', shareData);
// } catch (e) {
// }
// tt.navigateTo({
// url: '../../page/subPackage/pages/unionShare/unionShare?timestamp=' + timestamp + '&page_name=' + this.data.current_page_name + '&page_param=' + this.data.current_page_param,
// })
}
}))
\ No newline at end of file
... ...
{
"navigationBarTitleText": " ",
"usingComponents": {
"filterComponent": "../../components/filterComponent/filterComponent",
"productCell": "../../components/productList/productCell"
}
}
\ No newline at end of file
... ...
<scroll-view scroll-y style="height: {{screenHeight - 50}}px;" bindscrolltolower="loadMore" bindscroll="onScroll" scroll-top="{{scrollTop}}" enable-back-to-top="true">
<view class="fixedFilter">
<filterComponent id='filterComponent' bind:updateProductList="updateProductList" bind:jumpToFilterPage="jumpToFilterPage"></filterComponent>
</view>
<block tt:if="{{list.data&&list.data.length == 0}}">
<view class='noContentClass'>
<image class='nosearch-ic' src="../search/images/nosearch-ic@3x.png"></image>
<view class='noContent'>未找到符合条件的商品</view>
</view>
</block>
<view class="productListContainer">
<block tt:for="{{list.data}}" tt:key="{{index}}">
<productCell item="{{item}}" page-name="{{current_page_name}}"></productCell>
</block>
</view>
<view class="loadMore" tt:if="{{list.data.length > 0 && list.isLoading && !list.endReached}}">
<text class="loadText">加载中...</text>
</view>
<view class="loadMore" tt:if="{{list.endReached}}">
<text class="loadText">没有更多了</text>
</view>
<loading tt:if="{{list.currentPage == 0 && list.isLoading}}">加载中</loading>
</scroll-view>
<!-- <quickNavigation id="quickNavigation" isShowIndicator="{{isShowIndicator}}" isUnionShare="{{isUnionShare}}" bind:unionShare="unionShare" bind:backToTop="backToTop"></quickNavigation>
<template is="zan-actionsheet" data="{{...actionsheet}}" />
<snapshootShare id="snapshootShare" isShow="{{isShowSnapshoot}}" sourceType="list_union" shareData="{{snapshootShareData}}" bind:hiddenSheet="hiddenSheet"></snapshootShare> -->
... ...
.productListContainer {
/*position: absolute;*/
/*top: 90rpx;*/
margin-top: 90rpx;
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: white;
}
.fixedFilter {
position: fixed;
top: -1rpx;
left: 0rx;
height: 90rpx;
width: 100%;
background-color: white;
z-index: 999;
border-bottom: 1rpx #e5e5e5 solid;
}
.loadMore {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 88rpx;
}
.loadText {
margin-left: 10;
color: #b1b1b1;
text-align: center;
font-size: 28rpx;
}
.noContentClass{
display: flex;
flex-direction: column;
align-items: center;
width:100%;
margin-top: 158rpx;
}
.noContentClass .nosearch-ic {
width:204rpx;
height:204rpx;
margin-top:200rpx
}
.noContentClass .noContent{
font-size:24rpx;
text-align:center;
margin-top:21rpx;
color: #444444;
}
... ...
... ... @@ -322,7 +322,7 @@ Page({
this.fetchNewHomeData();
wx.setStorage({
tt.setStorage({
key: CHANNEL,
data: this.data.selectedChannel,
})
... ... @@ -345,7 +345,7 @@ Page({
//回到顶部
backToTop: function () {
wx.pageScrollTo({
tt.pageScrollTo({
scrollTop: 0,
})
},
... ... @@ -357,7 +357,7 @@ Page({
// 清除storage
removeStorage: function(key) {
try {
wx.removeStorageSync(key);
tt.removeStorageSync(key);
} catch (e) {
// console.log(e);
}
... ... @@ -369,7 +369,7 @@ Page({
// 设置storage
setStorage: function(key, value) {
try {
wx.setStorageSync(key, value);
tt.setStorageSync(key, value);
} catch (e) {
// console.error(e);
}
... ...
... ... @@ -92,8 +92,8 @@
<block tt:if="{{item.title}}">
<template is='tipTitle' data="{{desc:item.title}}"/>
</block>
<home-brand data="{{data:item.list,title:item.title,f_id:item.template_id,f_index:index,f_name:item.template_name}}" bindjumpByRule="jumpByRuleEvent"></home-brand>
<view tt:if="{{!item.title}}" style='width:100%;height:16rpx;background-color:white'/><!--兼容空白 后期需优化调整-->
<home-brand data="{{data:item.list,title:item.title,f_id:item.template_id,f_index:index,f_name:item.template_name}}"></home-brand>
<view tt:if="{{!item.title}}" bindjumpByRule="jumpByRuleEvent" style='width:100%;height:16rpx;background-color:white'/><!--兼容空白 后期需优化调整-->
</block>
<!--拼团购商品列表-->
... ...
... ... @@ -86,7 +86,6 @@
left: 0;
height: 96rpx;
width: 100%;
/* background-color: #444444; */
display: flex;
flex-direction: row;
align-items: center;
... ...
import Promise from '../vendors/es6-promise';
import api from '../common/api.js';
import config from '../config';
function getQRCodeSource(code) {
return new Promise(function (resolve, reject) {
let param = {
params: {
md5Param: code,
miniapp_type: config.mini_app_type
},
url: config.domains.api +'/wechat/miniapp/getMiniAppRealParam'
}
api.get(param)
.then(data => {
if (data.code == 200) {
if(data.data){
resolve(JSON.parse(data.data));
}
}else {
reject(null);
}
})
.catch(error => {
reject(error);
});
})
}
export {
getQRCodeSource,
}
\ No newline at end of file
... ...
... ... @@ -88,6 +88,73 @@ function parseProductListData(data, listImageWidth, listImageHeight) {
return newData;
}
function parseBrandListData(data, listImageWidth, listImageHeight) {
let newData = [];
let imageWidth = listImageWidth ? listImageWidth : listImageWidthDefault;
let imageHeight = listImageHeight ? listImageHeight : listImageHeightDefault;
data && data.map((item, index) => {
let salePrice = 0; // 售卖价
let originPrice = 0; // 原价
let salePriceStr = ''; // 拼接的售卖价
let originPriceStr = ''; // 拼接的原价
let showOriginPrice = true; // 是否显示原价
let salePriceFixed2 = '';
let originPriceFixed2 = '';
let isGlobalProduct = item.is_global && item.is_global == 'Y'; // 是否全球购商品
if (isGlobalProduct) {
salePrice = parseFloat(item.final_price);
originPrice = parseFloat(item.orign_price);
salePriceStr = item.formart_final_price;
originPriceStr = item.formart_orign_price;
} else {
salePrice = parseFloat(item.sales_price);
originPrice = parseFloat(item.market_price);
salePriceStr = '¥' + salePrice.toFixed(2);
originPriceStr = '¥' + originPrice.toFixed(2);
salePriceFixed2 = salePrice.toFixed(2);
originPriceFixed2 = originPrice.toFixed(2);
}
if (!originPrice || (salePrice == originPrice)) {
showOriginPrice = false;
}
item.showOriginPrice = showOriginPrice;
item.salePriceStr = salePriceStr;
item.originPriceStr = originPriceStr;
item.salePriceFixed2 = salePriceFixed2;
item.originPriceFixed2 = originPriceFixed2;
let default_images = item.default_images.replace(/{width}/g, imageWidth*2).replace(/{height}/g, imageHeight*2).replace('{mode}',2);
let shop_id = item.shop_id;
let shop_name = item.shop_name;
let newItem = {
product_skn: item.product_skn,
default_images,
product_name: item.product_name,
showOriginPrice,
shop_id,
shop_name,
salePriceStr,
originPriceStr,
originPriceFixed2,
salePriceFixed2,
is_shop_cart_add: item.is_shop_cart_add,//是否应该展示右侧的加入购物车按钮 默认不展示
};
newData.push(newItem);
});
return newData;
}
function cancelFilterSelectState(filters, exceptKey) {
let newFilters = {};
for (let itemKey in filters) {
... ... @@ -106,5 +173,6 @@ function cancelFilterSelectState(filters, exceptKey) {
module.exports = {
parseProductListData,
parseBrandListData,
cancelFilterSelectState,
}
... ...
... ... @@ -46,7 +46,7 @@ function formatNumber(n) {
}
function getDeviceInfo(wx) {
let res = wx.getSystemInfoSync(),
let res = tt.getSystemInfoSync(),
windowWidth;
windowWidth = res.windowWidth;
... ... @@ -323,12 +323,12 @@ function getYHStorageSync(key,fromPage) {
// console.log(key)
// console.log(fromPage)
try {
let res = wx.getStorageSync(key);
let res = tt.getStorageSync(key);
// console.log(res);
// console.log('-------------------------')
return res;
} catch (e) {
wx.reportAnalytics('get_storage_error', {
tt.reportAnalytics('get_storage_error', {
key: key,
error: e.message,
error_code: e.code,
... ... @@ -346,7 +346,7 @@ fromPage: 来源页面名称
**/
function setStorageSync(key,value, fromPage) {
try {
wx.setStorageSync(key, value);
tt.setStorageSync(key, value);
return true;
} catch (e) {
return false;
... ... @@ -359,7 +359,7 @@ fromPage: 来源页面名称
**/
function removeStorageSync(key, fromPage) {
try {
wx.removeStorageSync(key);
tt.removeStorageSync(key);
return true;
} catch (e) {
return false;
... ...
const { extractComponentId } = require('../common/helper');
module.exports = {
_handleZanActionsheetMaskClick({ currentTarget = {} }) {
const dataset = currentTarget.dataset || {};
const { componentId, closeOnClickOverlay } = dataset;
// 判断是否在点击背景时需要关闭弹层
if (!closeOnClickOverlay) {
return;
}
resolveCancelClick.call(this, { componentId });
},
_handleZanActionsheetCancelBtnClick(e) {
const componentId = extractComponentId(e);
resolveCancelClick.call(this, { componentId });
},
_handleZanActionsheetBtnClick({ currentTarget = {} }) {
const dataset = currentTarget.dataset || {};
const { componentId, index } = dataset;
if (this.handleZanActionsheetClick) {
this.handleZanActionsheetClick({ componentId, index });
} else {
console.warn('页面缺少 handleZanActionsheetClick 回调函数');
}
},
_handlerJumpByUrl(e){
if(this.handlerJumpToUnionUrl){
this.handlerJumpToUnionUrl();
}else{
console.warn('页面缺少 handlerJumpToUnionUrl 回调函数');
}
}
};
function resolveCancelClick({ componentId }) {
console.info('[zan:actionsheet:cancel]');
if (this.handleZanActionsheetCancel) {
this.handleZanActionsheetCancel({ componentId });
} else {
console.warn('页面缺少 handleZanActionsheetCancel 回调函数');
}
}
... ...
<template name="zan-actionsheet">
<view class="zan-actionsheet {{ show ? 'zan-actionsheet--show' : '' }}">
<view
class="zan-actionsheet__mask"
catchtap="_handleZanActionsheetMaskClick"
data-close-on-click-overlay="{{ closeOnClickOverlay }}"
data-component-id="{{ componentId }}"></view>
<view class="zan-actionsheet__container">
<!-- 实际按钮显示 -->
<button
wx:if = "{{!isNewShareStyle}}"
wx:for="{{ actions }}"
wx:for-index="index"
wx:for-item="item"
wx:key="{{ index }}-{{ item.name }}"
catchtap="_handleZanActionsheetBtnClick"
data-component-id="{{ componentId }}"
data-index="{{ index }}"
open-type="{{ item.openType }}"
class="zan-btn zan-actionsheet__btn {{ item.loading ? 'zan-btn--loading' : '' }} {{ item.className }}"
>
<text>{{ item.name }}</text>
<text
wx:if="{{ item.subname }}"
class="zan-actionsheet__subname">{{ item.subname }}</text>
</button>
<!--图标分享按钮-->
<view wx:if='{{isNewShareStyle}}' class='share_new_container'>
<!--联盟用户 资源位-->
<view class='share_union_soruce_img_container'>
<image src="{{unionUserImageUrl? unionUserImageUrl:'http://img13.static.yhbimg.com/article/2018/07/05/11/0204b2cb17aebf4ca33557392bb29e0807.jpg'}}" catchtap='_handlerJumpByUrl' class='share_union_soruce_img'></image>
</view>
<!--分享的图标及文字容器-->
<view class='share-icon-container'>
<block wx:for='{{actions}}'
wx:key="{{ index }}-{{ item.name }}"
wx:for-index="index"
wx:for-item="item">
<view class='share-icon-text-container'>
<view class='share-image-button'>
<image src='{{item.image_src}}' style='width:100%;height:100%;'></image>
<!--使用button是为了使用 open-type属性-->
<button class='share-btn'
catchtap="_handleZanActionsheetBtnClick"
data-component-id="{{ componentId }}"
data-index="{{ index }}"
open-type="{{ item.openType }}"></button>
</view>
<view class='share-explain-text'>{{item.name}}</view>
</view>
</block>
</view>
<!-- 分割线 -->
<view class='divide-line'></view>
</view>
<!-- 关闭按钮 -->
<view
wx:if="{{ cancelText }}"
class="zan-actionsheet__footer"
>
<button
class="zan-btn zan-actionsheet__btn"
catchtap="_handleZanActionsheetCancelBtnClick"
data-component-id="{{ componentId }}"
>{{ cancelText }}</button>
</view>
</view>
</view>
</template>
... ...
.zan-actionsheet{background-color:#f8f8f8}.zan-actionsheet__mask{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10010;background:rgba(0,0,0,.7);display:none}.zan-actionsheet__container{position:fixed;left:0;right:0;bottom:0;background:#f8f8f8;transform:translate3d(0,50%,0);transform-origin:center;transition:all .2s ease;z-index:10011;opacity:0;visibility:hidden}.zan-actionsheet__btn.zan-btn{height:54px;line-height:54px;margin-bottom:0;}.zan-actionsheet__btn.zan-btn::after{border-width:0;border-bottom-width:1px}.zan-actionsheet__btn.zan-btn:last-child::after{border-bottom-width:0}.zan-actionsheet__subname{margin-left:2px;font-size:12px;color:#666}.zan-actionsheet__footer{margin-top:0px}.zan-actionsheet__btn.zan-btn--loading .zan-actionsheet__subname{color:transparent}.zan-actionsheet--show .zan-actionsheet__container{opacity:1;transform:translate3d(0,0,0);visibility:visible}.zan-actionsheet--show .zan-actionsheet__mask{display:block}
.share_new_container{
padding-left: 70rpx;
padding-right: 70rpx;
display: flex;
flex-direction: column;
background-color: white;
align-items: center
}
.share_union_soruce_img_container{
margin-top: 50rpx;
width: 100%;
height: 180rpx;
z-index: 20000;
}
.share_union_soruce_img{
width:100%;
height:100%;
border-radius: 8rpx
}
.share-icon-container{
margin-top: 50rpx;
flex-direction: row;
display: flex;
width:100%;
height: wrap;
text-align: center;
}
.share-icon-text-container{
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
z-index: 20000;
}
.share-explain-text{
margin-top: 22rpx;
margin-bottom: 4rpx;
font-size: 24rpx;
font-family: PingFang-SC-Regular;
color: #444444;
}
.share-image-button{
width: 90rpx;
height: 90rpx;
position: relative;
}
.share-btn{
background-color: transparent;
width:120rpx;
height:120rpx;
top:-100rpx;
left: -18rpx;
/* border: 1rpx solid yellowgreen */
}
.divide-line{
width:646rpx;
height:1rpx;
background-color:#cccccc;
margin-top:40rpx
}
.share-btn::after{border: none}
\ No newline at end of file
... ...
// 从事件对象中解析得到 componentId
// 需要在元素上声明 data-component-id
function extractComponentId(event = {}) {
const { dataset: { componentId } } = event.currentTarget || {};
return componentId;
}
/*
注：默认合并所有生命周期函数
配置合并指定的生命周期 or 忽略指定字段
const extend = extendCreator({
life: ['onLoad', 'onPullDownRefresh'],
exclude: ['binder']
});
Page(extend({}, {
onLoad() {},
...
}));
*/
const LIFE_CYCLE = ['onLoad', 'onReady', 'onShow', 'onHide', 'onUnload', 'onPullDownRefresh', 'onReachBottom', 'onShareAppMessage', 'onPageScroll'];
const extendCreator = (config = {}) => {
const {
life = LIFE_CYCLE,
exclude = []
} = config;
const excludeList = exclude.concat(LIFE_CYCLE.map(getFuncArrayName));
if (!Array.isArray(life) || !Array.isArray(exclude)) throw new Error('Invalid Extend Config');
let lifeCycleList = life.filter(item => LIFE_CYCLE.indexOf(item) >= 0);
return function extend(target, ...objList) {
objList.forEach((source) => {
if (source) {
let keys = Object.keys(source);
keys.forEach((key) => {
let value = source[key];
if (excludeList.indexOf(key) >= 0) return;
if (lifeCycleList.indexOf(key) >= 0 && typeof value === 'function') {
let funcArrayName = getFuncArrayName(key);
if (!target[funcArrayName]) {
target[funcArrayName] = [];
if (target[key]) {
target[funcArrayName].push(target[key]);
}
target[key] = function (...rest) {
target[funcArrayName].forEach(func => func.apply(this, rest));
};
}
if (source[funcArrayName]) {
// 经过生命周期合并的组件直接整合函数列表
target[funcArrayName].push(...source[funcArrayName]);
} else {
// 添加生命周期函数进入函数列表
target[funcArrayName].push(value);
}
} else {
target[key] = value;
}
});
}
});
return target;
};
};
const getFuncArrayName = name => `__$${name}`;
module.exports = {
extractComponentId,
extend: Object.assign,
extendCreator
};
... ...
exports.Actionsheet = require('./actionsheet/index');
exports.Toast = require('./toast/index');
const { extend } = require('./common/helper');
exports.extend = extend;
... ...
.zan-actionsheet {
background-color: #f8f8f8;
}
.zan-actionsheet__mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10010;
background: rgba(0, 0, 0, 0.7);
display: none;
}
.zan-actionsheet__container {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: #f8f8f8;
transform: translate3d(0, 50%, 0);
transform-origin: center;
transition: all 0.2s ease;
z-index: 10010;
opacity: 0;
visibility: hidden;
}
.zan-actionsheet__btn.zan-btn {
height: 50px;
line-height: 50px;
margin-bottom: 0;
}
.zan-actionsheet__btn.zan-btn::after {
border-width: 0;
border-bottom-width: 1px;
}
.zan-actionsheet__btn.zan-btn:last-child::after {
border-bottom-width: 0;
}
.zan-actionsheet__subname {
margin-left: 2px;
font-size: 12px;
color: #666;
}
.zan-actionsheet__footer {
margin-top: 10px;
}
.zan-actionsheet__btn.zan-btn--loading .zan-actionsheet__subname {
color: transparent;
}
.zan-actionsheet--show .zan-actionsheet__container {
opacity: 1;
transform: translate3d(0, 0, 0);
visibility: visible;
}
.zan-actionsheet--show .zan-actionsheet__mask {
display: block;
}
.zan-badge {
position: relative;
}
.zan-badge__count {
position: absolute;
top: -16px;
right: 0;
height: 1.6em;
min-width: 1.6em;
line-height: 1.6;
padding: 0 0.4em;
font-size: 20px;
border-radius: 0.8em;
background: #f44;
color: #fff;
text-align: center;
white-space: nowrap;
transform: translateX(50%) scale(0.5);
transform-origin: center;
z-index: 10010;
box-shadow: 0 0 0 2px #fff;
box-sizing: border-box;
}
.zan-btn {
position: relative;
color: #333;
background-color: #fff;
margin-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
border-radius: 2px;
font-size: 16px;
line-height: 45px;
height: 45px;
box-sizing: border-box;
text-decoration: none;
text-align: center;
vertical-align: middle;
}
.zan-btn::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: 0 0;
pointer-events: none;
box-sizing: border-box;
border: 0 solid #e5e5e5;
border-width: 1px;
border-radius: 4px;
}
.zan-btns {
margin: 15px;
}
.zan-btn--primary {
color: #fff;
background-color: #4b0;
}
.zan-btn--primary::after {
border-color: #0a0;
}
.zan-btn--warn {
color: #fff;
background-color: #f85;
}
.zan-btn--warn::after {
border-color: #f85;
}
.zan-btn--danger {
color: #fff;
background-color: #f44;
}
.zan-btn--danger::after {
border-color: #e33;
}
.zan-btn--small {
display: inline-block;
height: 30px;
line-height: 30px;
font-size: 12px;
margin-right: 5px;
margin-bottom: 0;
}
.zan-btn--mini {
display: inline-block;
line-height: 21px;
height: 22px;
font-size: 10px;
margin-right: 5px;
margin-bottom: 0;
padding-left: 5px;
padding-right: 5px;
}
.zan-btn--large {
border-radius: 0;
margin-bottom: 0;
border: none;
line-height: 50px;
height: 50px;
}
.zan-btn--plain.zan-btn {
background-color: transparent;
}
.zan-btn--plain.zan-btn--primary {
color: #06bf04;
}
.zan-btn--plain.zan-btn--warn {
color: #f60;
}
.zan-btn--plain.zan-btn--danger {
color: #f44;
}
.button-hover {
opacity: 0.9;
}
.zan-btn--loading {
color: transparent;
opacity: 1;
}
.zan-btn--loading::before {
position: absolute;
left: 50%;
top: 50%;
content: ' ';
width: 16px;
height: 16px;
margin-left: -8px;
margin-top: -8px;
border: 3px solid #e5e5e5;
border-color: #666 #e5e5e5 #e5e5e5 #e5e5e5;
border-radius: 8px;
box-sizing: border-box;
animation: btn-spin 0.6s linear;
animation-iteration-count: infinite;
}
.zan-btn--danger.zan-btn--loading::before,
.zan-btn--primary.zan-btn--loading::before,
.zan-btn--warn.zan-btn--loading::before {
border-color: #fff rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
}
@keyframes btn-spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.zan-btn.zan-btn--disabled {
color: #999 !important;
background: #f8f8f8 !important;
border-color: #e5e5e5 !important;
cursor: not-allowed !important;
opacity: 1 !important;
}
.zan-btn.zan-btn--disabled::after {
border-color: #e5e5e5 !important;
}
.zan-btn--last-child, .zan-btn:last-child {
margin-bottom: 0;
margin-right: 0;
}
.zan-capsule {
display: inline-block;
font-size: 12px;
vertical-align: middle;
line-height: 19px;
transform: scale(0.83);
}
.zan-capsule__left, .zan-capsule__right {
display: inline-block;
line-height: 17px;
height: 19px;
vertical-align: middle;
box-sizing: border-box;
}
.zan-capsule__left {
padding: 0 2px;
color: #fff;
background: #999;
border-radius: 2px 0 0 2px;
border: 1rpx solid #999;
}
.zan-capsule__right {
padding: 0 5px;
color: #999;
border-radius: 0 2px 2px 0;
border: 1rpx solid #999;
}
.zan-capsule--danger .zan-capsule__left {
color: #fff;
background: #f24544;
border-color: #f24544;
}
.zan-capsule--danger .zan-capsule__right {
color: #f24544;
border-color: #f24544;
}
.zan-card {
margin-left: 0;
width: auto;
padding: 5px 15px;
overflow: hidden;
position: relative;
font-size: 14px;
}
.zan-card__thumb {
width: 90px;
height: 90px;
float: left;
position: relative;
margin-left: auto;
margin-right: auto;
overflow: hidden;
background-size: cover;
}
.zan-card__img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
.zan-card__detail {
margin-left: 100px;
width: auto;
position: relative;
}
.zan-card__detail-row {
overflow: hidden;
line-height: 20px;
min-height: 20px;
margin-bottom: 3px;
}
.zan-card__right-col {
float: right;
}
.zan-card__left-col {
margin-right: 80px;
}
.zan-cell {
position: relative;
padding: 12px 15px;
display: flex;
align-items: center;
line-height: 1.4;
font-size: 14px;
}
.zan-cell::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: 0 0;
pointer-events: none;
box-sizing: border-box;
border: 0 solid #e5e5e5;
border-bottom-width: 1px;
left: 15px;
right: 0;
}
.zan-cell__icon {
margin-right: 5px;
}
.zan-cell__bd {
flex: 1;
}
.zan-cell__text {
line-height: 24px;
font-size: 14px;
}
.zan-cell__desc {
line-height: 1.2;
font-size: 12px;
color: #666;
}
.zan-cell__ft {
position: relative;
text-align: right;
color: #666;
}
.zan-cell__no-pading {
padding: 0;
}
.zan-cell__no-pading .zan-cell__bd_padding {
padding: 12px 0 12px 15px;
}
.zan-cell__no-pading .zan-cell__bd_padding .zan-form__input {
height: 26px;
}
.zan-cell__no-pading .zan-cell__ft_padding {
padding: 12px 15px 12px 0;
}
.zan-cell--last-child::after, .zan-cell:last-child::after {
display: none;
}
.zan-cell--access .zan-cell__ft {
padding-right: 13px;
}
.zan-cell--access .zan-cell__ft::after {
position: absolute;
top: 50%;
right: 2px;
content: " ";
display: inline-block;
height: 6px;
width: 6px;
border-width: 2px 2px 0 0;
border-color: #c8c8c8;
border-style: solid;
transform: translateY(-50%) matrix(0.71, 0.71, -.71, 0.71, 0, 0);
}
.zan-cell--switch {
padding-top: 6px;
padding-bottom: 6px;
}
.zan-col {
float: left;
box-sizing: border-box;
width: 0;
}
.zan-col-1 {
width: 4.16667%;
}
.zan-col-offset-1 {
margin-left: 4.16667%;
}
.zan-col-2 {
width: 8.33333%;
}
.zan-col-offset-2 {
margin-left: 8.33333%;
}
.zan-col-3 {
width: 12.5%;
}
.zan-col-offset-3 {
margin-left: 12.5%;
}
.zan-col-4 {
width: 16.66667%;
}
.zan-col-offset-4 {
margin-left: 16.66667%;
}
.zan-col-5 {
width: 20.83333%;
}
.zan-col-offset-5 {
margin-left: 20.83333%;
}
.zan-col-6 {
width: 25%;
}
.zan-col-offset-6 {
margin-left: 25%;
}
.zan-col-7 {
width: 29.16667%;
}
.zan-col-offset-7 {
margin-left: 29.16667%;
}
.zan-col-8 {
width: 33.33333%;
}
.zan-col-offset-8 {
margin-left: 33.33333%;
}
.zan-col-9 {
width: 37.5%;
}
.zan-col-offset-9 {
margin-left: 37.5%;
}
.zan-col-10 {
width: 41.66667%;
}
.zan-col-offset-10 {
margin-left: 41.66667%;
}
.zan-col-11 {
width: 45.83333%;
}
.zan-col-offset-11 {
margin-left: 45.83333%;
}
.zan-col-12 {
width: 50%;
}
.zan-col-offset-12 {
margin-left: 50%;
}
.zan-col-13 {
width: 54.16667%;
}
.zan-col-offset-13 {
margin-left: 54.16667%;
}
.zan-col-14 {
width: 58.33333%;
}
.zan-col-offset-14 {
margin-left: 58.33333%;
}
.zan-col-15 {
width: 62.5%;
}
.zan-col-offset-15 {
margin-left: 62.5%;
}
.zan-col-16 {
width: 66.66667%;
}
.zan-col-offset-16 {
margin-left: 66.66667%;
}
.zan-col-17 {
width: 70.83333%;
}
.zan-col-offset-17 {
margin-left: 70.83333%;
}
.zan-col-18 {
width: 75%;
}
.zan-col-offset-18 {
margin-left: 75%;
}
.zan-col-19 {
width: 79.16667%;
}
.zan-col-offset-19 {
margin-left: 79.16667%;
}
.zan-col-20 {
width: 83.33333%;
}
.zan-col-offset-20 {
margin-left: 83.33333%;
}
.zan-col-21 {
width: 87.5%;
}
.zan-col-offset-21 {
margin-left: 87.5%;
}
.zan-col-22 {
width: 91.66667%;
}
.zan-col-offset-22 {
margin-left: 91.66667%;
}
.zan-col-23 {
width: 95.83333%;
}
.zan-col-offset-23 {
margin-left: 95.83333%;
}
.zan-col-24 {
width: 100%;
}
.zan-col-offset-24 {
margin-left: 100%;
}
.zan-c-red {
color: #f44 !important;
}
.zan-c-gray {
color: #c9c9c9 !important;
}
.zan-c-gray-dark {
color: #999 !important;
}
.zan-c-gray-darker {
color: #666 !important;
}
.zan-c-black {
color: #333 !important;
}
.zan-c-blue {
color: #38f !important;
}
.zan-c-green {
color: #06bf04 !important;
}
.zan-dialog--container {
position: fixed;
top: 45%;
left: 50%;
width: 80%;
height: 0;
font-size: 16px;
overflow: hidden;
transition: all 0.2s linear;
border-radius: 4px;
background-color: #fff;
transform: translate3d(-50%, -50%, 0);
color: #333;
opacity: 0;
}
.zan-dialog--mask {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
transition: 0.3s;
display: none;
}
.zan-dialog__header {
padding: 15px 0 0;
text-align: center;
}
.zan-dialog__content {
position: relative;
padding: 15px 20px;
line-height: 1.5;
min-height: 40px;
}
.zan-dialog__content::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: 0 0;
pointer-events: none;
box-sizing: border-box;
border: 0 solid #e5e5e5;
border-bottom-width: 1px;
}
.zan-dialog__content--title {
color: #999;
font-size: 14px;
}
.zan-dialog__footer {
overflow: hidden;
}
.zan-dialog__button {
line-height: 50px;
height: 50px;
padding: 0 5px;
border-radius: 0;
margin-bottom: 0;
}
.zan-dialog__button::after {
border-width: 0;
border-radius: 0;
}
.zan-dialog--show .zan-dialog--container {
opacity: 1;
height: auto;
}
.zan-dialog--show .zan-dialog--mask {
display: block;
}
.zan-dialog__footer--horizon {
display: flex;
}
.zan-dialog__footer--horizon .zan-dialog__button {
flex: 1;
}
.zan-dialog__footer--horizon .zan-dialog__button::after {
border-right-width: 1px;
}
.zan-dialog__footer--horizon .zan-dialog__button:last-child::after {
border-right-width: 0;
}
.zan-dialog__footer--vertical .zan-dialog__button {
flex: 1;
}
.zan-dialog__footer--vertical .zan-dialog__button::after {
border-bottom-width: 1px;
}
.zan-dialog__footer--vertical .zan-dialog__button:last-child::after {
border-bottom-width: 0;
}
.zan-field {
padding: 7px 15px;
color: #333;
}
.zan-field--wrapped {
margin: 0 15px;
background-color: #fff;
}
.zan-field--wrapped::after {
left: 0;
border-width: 1px;
border-radius: 4px;
}
.zan-field--wrapped+.zan-field--wrapped {
margin-top: 10px;
}
.zan-field--error {
color: #f40;
}
.zan-field--wrapped.zan-field--error::after {
border-color: #f40;
}
.zan-field__title {
color: #333;
min-width: 65px;
padding-right: 10px;
}
.zan-field__input {
flex: 1;
line-height: 1.6;
padding: 4px 0;
min-height: 22px;
height: auto;
font-size: 14px;
}
.zan-field__placeholder {
font-size: 14px;
}
.zan-field__input--right {
text-align: right;
}
.zan-pull-left {
float: left;
}
.zan-pull-right {
float: right;
}
.zan-center {
text-align: center;
}
.zan-right {
text-align: right;
}
.zan-text-deleted {
text-decoration: line-through;
}
.zan-font-8 {
font-size: 8px;
}
.zan-font-10 {
font-size: 10px;
}
.zan-font-12 {
font-size: 12px;
}
.zan-font-14 {
font-size: 14px;
}
.zan-font-16 {
font-size: 16px;
}
.zan-font-18 {
font-size: 18px;
}
.zan-font-20 {
font-size: 20px;
}
.zan-font-22 {
font-size: 22px;
}
.zan-font-24 {
font-size: 22px;
}
.zan-font-30 {
font-size: 30px;
}
.zan-font-bold {
font-weight: 700;
}
.zan-arrow {
position: absolute;
right: 15px;
top: 50%;
display: inline-block;
height: 6px;
width: 6px;
border-width: 2px 2px 0 0;
border-color: #c8c8c8;
border-style: solid;
transform: translateY(-50%) matrix(0.71, 0.71, -.71, 0.71, 0, 0);
}
.zan-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
}
.zan-ellipsis--l2 {
max-height: 40px;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.zan-ellipsis--l3 {
max-height: 60px;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.zan-clearfix {
zoom: 1;
}
.zan-clearfix::after {
content: '';
display: table;
clear: both;
}
.zan-hairline, .zan-hairline--bottom, .zan-hairline--left, .zan-hairline--right,
.zan-hairline--surround, .zan-hairline--top, .zan-hairline--top-bottom {
position: relative;
}
.zan-hairline--bottom::after, .zan-hairline--left::after,
.zan-hairline--right::after, .zan-hairline--surround::after,
.zan-hairline--top-bottom::after, .zan-hairline--top::after,
.zan-hairline::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: 0 0;
pointer-events: none;
box-sizing: border-box;
border: 0 solid #e5e5e5;
}
.zan-hairline--top::after {
border-top-width: 1px;
}
.zan-hairline--left::after {
border-left-width: 1px;
}
.zan-hairline--right::after {
border-right-width: 1px;
}
.zan-hairline--bottom::after {
border-bottom-width: 1px;
}
.zan-hairline--top-bottom::after {
border-width: 1px 0;
}
.zan-hairline--surround::after {
border-width: 1px;
}
@font-face {
font-family: zanui-weapp-icon;
src: url(https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-4381aded05.eot);
src: url(https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-4381aded05.eot?#iefix) format('embedded-opentype'),
url(https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-4381aded05.woff2) format('woff2'),
url(https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-4381aded05.woff) format('woff'),
url(https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-4381aded05.ttf) format('truetype');
}
.zan-icon {
display: inline-block;
}
.zan-icon::before {
font-family: zanui-weapp-icon !important;
font-style: normal;
font-weight: 400;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
text-align: center;
font-variant: normal;
text-transform: none;
line-height: 1em;
-webkit-font-smoothing: antialiased;
}
.zan-icon-qr-invalid:before {
content: '\e800';
}
.zan-icon-qr:before {
content: '\e801';
}
.zan-icon-exchange:before {
content: '\e802';
}
.zan-icon-close:before {
content: '\e803';
}
.zan-icon-location:before {
content: '\e804';
}
.zan-icon-upgrade:before {
content: '\e805';
}
.zan-icon-check:before {
content: '\e806';
}
.zan-icon-checked:before {
content: '\e807';
}
.zan-icon-like-o:before {
content: '\e808';
}
.zan-icon-like:before {
content: '\e809';
}
.zan-icon-chat:before {
content: '\e80a';
}
.zan-icon-shop:before {
content: '\e80b';
}
.zan-icon-photograph:before {
content: '\e80c';
}
.zan-icon-add:before {
content: '\e80d';
}
.zan-icon-add2:before {
content: '\e80e';
}
.zan-icon-photo:before {
content: '\e80f';
}
.zan-icon-logistics:before {
content: '\e810';
}
.zan-icon-edit:before {
content: '\e811';
}
.zan-icon-passed:before {
content: '\e812';
}
.zan-icon-cart:before {
content: '\e813';
}
.zan-icon-shopping-cart:before {
content: '\e814';
}
.zan-icon-arrow:before {
content: '\e815';
}
.zan-icon-gift:before {
content: '\e816';
}
.zan-icon-search:before {
content: '\e817';
}
.zan-icon-clear:before {
content: '\e818';
}
.zan-icon-success:before {
content: '\e819';
}
.zan-icon-fail:before {
content: '\e81a';
}
.zan-icon-contact:before {
content: '\e81b';
}
.zan-icon-wechat:before {
content: '\e81c';
}
.zan-icon-alipay:before {
content: '\e81d';
}
.zan-icon-password-view:before {
content: '\e81e';
}
.zan-icon-password-not-view:before {
content: '\e81f';
}
.zan-icon-wap-nav:before {
content: '\e820';
}
.zan-icon-wap-home:before {
content: '\e821';
}
.zan-icon-ecard-pay:before {
content: '\e822';
}
.zan-icon-balance-pay:before {
content: '\e823';
}
.zan-icon-peer-pay:before {
content: '\e824';
}
.zan-icon-credit-pay:before {
content: '\e825';
}
.zan-icon-debit-pay:before {
content: '\e826';
}
.zan-icon-other-pay:before {
content: '\e827';
}
.zan-icon-browsing-history:before {
content: '\e828';
}
.zan-icon-goods-collect:before {
content: '\e829';
}
.zan-icon-shop-collect:before {
content: '\e82a';
}
.zan-icon-receive-gift:before {
content: '\e82b';
}
.zan-icon-send-gift:before {
content: '\e82c';
}
.zan-icon-setting:before {
content: '\e82d';
}
.zan-icon-points:before {
content: '\e82e';
}
.zan-icon-coupon:before {
content: '\e82f';
}
.zan-icon-free-postage:before {
content: '\e830';
}
.zan-icon-discount:before {
content: '\e831';
}
.zan-icon-birthday-privilege:before {
content: '\e832';
}
.zan-icon-member-day-privilege:before {
content: '\e833';
}
.zan-icon-balance-details:before {
content: '\e834';
}
.zan-icon-cash-back-record:before {
content: '\e835';
}
.zan-icon-points-mall:before {
content: '\e836';
}
.zan-icon-exchange-record:before {
content: '\e837';
}
.zan-icon-pending-payment:before {
content: '\e838';
}
.zan-icon-pending-orders:before {
content: '\e839';
}
.zan-icon-pending-deliver:before {
content: '\e83a';
}
.zan-icon-pending-evaluate:before {
content: '\e83b';
}
.zan-icon-gift-card-pay:before {
content: '\e83c';
}
.zan-icon-cash-on-deliver:before {
content: '\e83d';
}
.zan-icon-underway:before {
content: '\e83e';
}
.zan-icon-point-gift:before {
content: '\e83f';
}
.zan-icon-after-sale:before {
content: '\e840';
}
.zan-icon-edit-data:before {
content: '\e841';
}
.zan-icon-question:before {
content: '\e842';
}
.zan-icon-delete:before {
content: '\e843';
}
.zan-icon-records:before {
content: '\e844';
}
.zan-icon-description:before {
content: '\e845';
}
.zan-icon-card:before {
content: '\e846';
}
.zan-icon-gift-card:before {
content: '\e847';
}
.zan-icon-clock:before {
content: '\e848';
}
.zan-icon-gold-coin:before {
content: '\e849';
}
.zan-icon-completed:before {
content: '\e84a';
}
.zan-icon-value-card:before {
content: '\e84b';
}
.zan-icon-certificate:before {
content: '\e84c';
}
.zan-icon-tosend:before {
content: '\e84d';
}
.zan-icon-sign:before {
content: '\e84e';
}
.zan-icon-home:before {
content: '\e84f';
}
.zan-icon-phone:before {
content: '\e850';
}
.zan-icon-add-o:before {
content: '\e851';
}
.zan-icon-play:before {
content: '\e852';
}
.zan-icon-pause:before {
content: '\e853';
}
.zan-icon-stop:before {
content: '\e854';
}
.zan-icon-hot:before {
content: '\e855';
}
.zan-icon-new:before {
content: '\e856';
}
.zan-icon-new-arrival:before {
content: '\e857';
}
.zan-icon-hot-sale:before {
content: '\e858';
}
.zan-loadmore {
position: relative;
width: 65%;
margin: 21px auto;
line-height: 20px;
font-size: 14px;
text-align: center;
vertical-align: middle;
}
.zan-loading {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
animation: weuiLoading 1s steps(12, end) infinite;
background: transparent url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iciIgd2lkdGg9JzEyMHB4JyBoZWlnaHQ9JzEyMHB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjRTlFOUU5JwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzk4OTY5NycKICAgICAgICAgIHRyYW5zZm9ybT0ncm90YXRlKDMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4KICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyM5Qjk5OUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjQTNBMUEyJwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoOTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNBQkE5QUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxMjAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCMkIyQjInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCQUI4QjknCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxODAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDMkMwQzEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyMTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDQkNCQ0InCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEMkQyRDInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEQURBREEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNFMkUyRTInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0Pgo8L3N2Zz4=) no-repeat;
-webkit-background-size: 100%;
background-size: 100%;
}
.zan-loadmore .zan-loading {
margin-right: 4px;
}
.zan-loadmore__tips {
display: inline-block;
vertical-align: middle;
height: 20px;
line-height: 20px;
}
.zan-loadmore--nodata, .zan-loadmore--nomore {
color: #999;
}
.zan-loadmore--nodata::after, .zan-loadmore--nomore::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: 0 0;
pointer-events: none;
box-sizing: border-box;
border: 0 solid #e5e5e5;
border-top-width: 1px;
}
.zan-loadmore--nodata {
margin-top: 120px;
}
.zan-loadmore--nodata .zan-loadmore__tips {
position: relative;
top: -11px;
background: #f9f9f9;
padding: 0 6px;
z-index: 10001;
}
.zan-loadmore--nomore .zan-loadmore__tips {
position: relative;
top: -11px;
background: #f9f9f9;
padding: 0 6px;
z-index: 10001;
}
.zan-loadmore__dot {
position: absolute;
left: 50%;
top: 10px;
margin-left: -2px;
margin-top: -2px;
content: " ";
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #e5e5e5;
display: inline-block;
vertical-align: middle;
}
.zan-noticebar {
color: #f60;
padding: 9px 10px;
font-size: 12px;
line-height: 1.5;
background-color: #fff7cc;
}
.zan-panel {
position: relative;
background: #fff;
margin-top: 10px;
overflow: hidden;
}
.zan-panel::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: 0 0;
pointer-events: none;
box-sizing: border-box;
border: 0 solid #e5e5e5;
border-top-width: 1px;
border-bottom-width: 1px;
}
.zan-panel-title {
font-size: 14px;
line-height: 1;
color: #999;
padding: 20px 15px 0 15px;
}
.zan-panel--without-margin-top {
margin-top: 0;
}
.zan-panel--without-border::after {
border: 0 none;
}
.zan-popup {
visibility: hidden;
}
.zan-popup--show {
visibility: visible;
}
.zan-popup__mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10010;
background: rgba(0, 0, 0, 0.7);
display: none;
}
.zan-popup__container {
position: fixed;
left: 50%;
top: 50%;
background: #fff;
transform: translate3d(-50%, -50%, 0);
transform-origin: center;
transition: all 0.4s ease;
z-index: 10011;
opacity: 0;
}
.zan-popup--show .zan-popup__container {
opacity: 1;
}
.zan-popup--show .zan-popup__mask {
display: block;
}
.zan-popup--left .zan-popup__container {
left: 0;
top: auto;
transform: translate3d(-100%, 0, 0);
}
.zan-popup--show.zan-popup--left .zan-popup__container {
transform: translate3d(0, 0, 0);
}
.zan-popup--right .zan-popup__container {
right: 0;
top: auto;
left: auto;
transform: translate3d(100%, 0, 0);
}
.zan-popup--show.zan-popup--right .zan-popup__container {
transform: translate3d(0, 0, 0);
}
.zan-popup--bottom .zan-popup__container {
top: auto;
left: auto;
bottom: 0;
transform: translate3d(0, 100%, 0);
}
.zan-popup--show.zan-popup--bottom .zan-popup__container {
transform: translate3d(0, 0, 0);
}
.zan-popup--top .zan-popup__container {
top: 0;
left: auto;
transform: translate3d(0, -100%, 0);
}
.zan-popup--show.zan-popup--top .zan-popup__container {
transform: translate3d(0, 0, 0);
}
.zan-row:after {
content: "";
display: table;
clear: both;
}
.zan-select__list .zan-select__radio {
display: none;
}
.zan-stepper {
color: #666;
}
.zan-stepper view {
display: inline-block;
line-height: 20px;
padding: 5px 0;
text-align: center;
min-width: 40px;
box-sizing: border-box;
vertical-align: middle;
font-size: 12px;
border: 1rpx solid #999;
}
.zan-stepper .zan-stepper__minus {
border-right: none;
border-radius: 2px 0 0 2px;
}
.zan-stepper .zan-stepper__text {
border: 1rpx solid #999;
display: inline-block;
text-align: center;
vertical-align: middle;
height: 30px;
width: 40px;
min-height: auto;
font-size: 12px;
line-height: 30px;
}
.zan-stepper .zan-stepper__plus {
border-left: none;
border-radius: 0 2px 2px 0;
}
.zan-stepper .zan-stepper--disabled {
background: #f8f8f8;
color: #bbb;
border-color: #e8e8e8;
}
.zan-stepper--small view {
min-width: 36px;
line-height: 18px;
}
.zan-stepper--small .zan-stepper__text {
width: 36px;
line-height: 28px;
height: 28px;
}
.zan-steps--steps.zan-steps--5 .zan-steps__step {
width: 25%;
}
.zan-steps--steps.zan-steps--4 .zan-steps__step {
width: 33%;
}
.zan-steps--steps.zan-steps--3 .zan-steps__step {
width: 50%;
}
.zan-steps--steps .zan-steps__step {
position: relative;
float: left;
padding-bottom: 25px;
color: #b1b1b1;
}
.zan-steps--steps .zan-steps__title {
transform: translateX(-50%);
font-size: 10px;
text-align: center;
}
.zan-steps--steps .zan-steps__icons {
position: absolute;
top: 30px;
left: -10px;
padding: 0 8px;
background-color: #fff;
z-index: 10010;
}
.zan-steps--steps .zan-steps__circle {
display: block;
position: relative;
width: 5px;
height: 5px;
background-color: #e5e5e5;
border-radius: 50%;
}
.zan-steps--steps .zan-steps__line {
position: absolute;
left: 0;
top: 32px;
width: 100%;
height: 1px;
background-color: #e5e5e5;
}
.zan-steps--steps .zan-steps__step--done {
color: #333;
}
.zan-steps--steps .zan-steps__step--done .zan-steps__line {
background-color: #06bf04;
}
.zan-steps--steps .zan-steps__step--done .zan-steps__circle {
width: 5px;
height: 5px;
background-color: #09bb07;
}
.zan-steps--steps .zan-steps__step--cur .zan-steps__icons {
top: 25px;
left: -14px;
}
.zan-steps--steps .zan-steps__step--cur .zan-steps__circle {
width: 13px;
height: 13px;
background-image: url(https://b.yzcdn.cn/v2/image/wap/success_small@2x.png);
background-size: 13px 13px;
}
.zan-steps--steps .zan-steps__step--cur .zan-steps__line {
background-color: #e5e5e5;
}
.zan-steps--steps .zan-steps__step--first-child .zan-steps__title {
margin-left: 0;
transform: none;
text-align: left;
}
.zan-steps--steps .zan-steps__step--first-child .zan-steps__icons {
left: -7px;
}
.zan-steps--steps .zan-steps__step--last-child {
position: absolute;
right: 0;
top: 0;
text-align: right;
}
.zan-steps--steps .zan-steps__step--last-child .zan-steps__title {
transform: none;
text-align: right;
}
.zan-steps--steps .zan-steps__step--last-child .zan-steps__icons {
left: auto;
right: -6px;
}
.zan-steps--steps .zan-steps__step--last-child .zan-steps__line {
display: none;
}
.zan-steps--steps .zan-steps__step--db-title {
min-height: 29px;
}
.zan-steps--steps .zan-steps__step--db-title .zan-steps__line {
top: 45px;
}
.zan-steps--steps .zan-steps__step--db-title .zan-steps__icons {
top: 43px;
}
.zan-steps--steps .zan-steps__step--db-title.zan-steps__step--cur .zan-steps__icons {
top: 39px;
}
.zan-steps--vsteps {
color: #999;
font-size: 14px;
}
.zan-steps--vsteps .zan-steps__step {
position: relative;
padding: 15px 0;
}
.zan-steps--vsteps .zan-steps__step--done {
color: #4b0;
}
.zan-steps--vsteps .zan-steps__line {
position: absolute;
top: 0;
bottom: 0;
left: 7px;
width: 1px;
background-color: #e5e5e5;
}
.zan-steps--vsteps .zan-steps__title {
display: inline-block;
line-height: 20px;
padding-left: 27px;
}
.zan-steps--vsteps .zan-steps__title--desc {
padding-left: 3px;
}
.zan-steps--vsteps .zan-steps__icons {
position: absolute;
left: 7px;
top: 50%;
transform: translate(-50%, -50%);
z-index: 10002;
padding: 3px 0;
background-color: #fff;
}
.zan-steps--vsteps .zan-steps__circle {
width: 5px;
height: 5px;
background-color: #cacaca;
border-radius: 10px;
}
.zan-steps--vsteps .zan-steps__step--done .zan-steps__circle {
width: 5px;
height: 5px;
background-color: #09bb07;
}
.zan-steps--vsteps .zan-steps__step--cur .zan-steps__circle {
width: 13px;
height: 13px;
background: transparent url(https://b.yzcdn.cn/v2/image/wap/success_small@2x.png);
background-size: 13px 13px;
border-radius: 0;
}
.zan-steps--vsteps .zan-steps__icon--active {
width: 13px;
height: 13px;
}
.zan-steps--vsteps .zan-steps__step--first-child .zan-steps__title::before {
content: '';
position: absolute;
top: 0;
bottom: 50%;
left: 7px;
width: 1px;
background-color: #fff;
z-index: 10001;
}
.zan-steps--vsteps .zan-steps__step--last-child .zan-steps__title::after {
content: '';
position: absolute;
top: 50%;
bottom: 0;
left: 7px;
width: 1px;
background-color: #fff;
z-index: 10001;
}
.zan-steps {
position: relative;
}
.zan-switch {
position: relative;
display: inline-block;
width: 52px;
height: 32px;
vertical-align: middle;
box-sizing: border-box;
border-radius: 16px;
background: #44db5e;
border: 1px solid #44db5e;
}
.zan-switch__circle {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
display: inline-block;
background: #fff;
border-radius: 15px;
box-sizing: border-box;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1),
0 3px 1px 0 rgba(0, 0, 0, 0.05),
0 2px 2px 0 rgba(0, 0, 0, 0.1),
0 3px 3px 0 rgba(0, 0, 0, 0.05);
transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
z-index: 10002;
}
.zan-switch__bg {
position: absolute;
top: -1px;
left: -1px;
width: 52px;
height: 32px;
background: #fff;
border-radius: 26px;
display: inline-block;
border: 1px solid #e5e5e5;
box-sizing: border-box;
transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
transform: scale(0);
transform-origin: 36px 16px;
}
.zan-switch--on .zan-switch__circle {
transform: translateX(20px);
}
.zan-switch--off .zan-switch__bg {
transform: scale(1);
}
.zan-swtich--disabled {
opacity: 0.4;
}
.zan-switch__loading {
position: absolute;
left: 7px;
top: 7px;
width: 16px;
height: 16px;
background: url(https://img.yzcdn.cn/public_files/2017/02/24/9acec77d91106cd15b8107c4633d9155.png) no-repeat;
background-size: 16px 16px;
animation: zan-switch-loading 0.8s infinite linear;
}
@keyframes zan-switch-loading {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
.zan-tab {
height: 45px;
}
.zan-tab__bd {
width: 750rpx;
display: flex;
flex-direction: row;
border-bottom: 1rpx solid #e5e5e5;
background: #fff;
}
.zan-tab__bd--fixed {
position: fixed;
top: 0;
z-index: 10002;
}
.zan-tab__item {
flex: 1;
display: inline-block;
padding: 0 10px;
line-height: 0;
box-sizing: border-box;
overflow: hidden;
text-align: center;
}
.zan-tab__title {
display: inline-block;
max-width: 100%;
height: 44px;
line-height: 44px;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
word-break: keep-all;
font-size: 14px;
color: #666;
}
.zan-tab__item--selected .zan-tab__title {
color: #f44;
border-bottom: 2px solid #f44;
}
.zan-tab__bd--scroll {
display: block;
white-space: nowrap;
}
.zan-tab__bd--scroll .zan-tab__item {
min-width: 80px;
}
.zan-tag {
display: inline-block;
position: relative;
box-sizing: border-box;
line-height: 16px;
padding: 0 5px;
border-radius: 2px;
font-size: 11px;
background: #c9c9c9;
text-align: center;
color: #fff;
}
.zan-tag::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: 0 0;
pointer-events: none;
box-sizing: border-box;
border: 0 solid #e5e5e5;
border-width: 1px;
border-radius: 4px;
}
.zan-tag--plain {
color: #c9c9c9;
background: #fff;
}
.zan-tag--primary {
color: #fff;
background-color: #4b0;
}
.zan-tag--primary::after {
border-color: #4b0;
}
.zan-tag--primary.zan-tag--plain {
color: #4b0;
background: #fff;
}
.zan-tag--danger {
color: #fff;
background: #f44;
}
.zan-tag--danger::after {
border-color: #f44;
}
.zan-tag--danger.zan-tag--plain {
color: #f44;
background: #fff;
}
.zan-tag--warn {
color: #fff;
background: #f85;
}
.zan-tag--warn::after {
border-color: #f85;
}
.zan-tag--warn.zan-tag--plain {
color: #f85;
background: #fff;
}
.zan-tag--disabled {
color: #999 !important;
background: #e5e5e5;
}
.zan-tag--disabled::after {
border-color: #ccc;
}
.zan-toast {
position: fixed;
top: 35%;
left: 20%;
transform: translateZ(0) translateY(-100%);
background: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 14px;
width: 60%;
line-height: 1.5em;
margin: 0 auto;
box-sizing: border-box;
padding: 10px;
text-align: left;
border-radius: 4px;
z-index: 10100;
}
.zan-toptips {
display: block;
position: fixed;
-webkit-transform: translateZ(0) translateY(-100%);
width: 100%;
min-height: 32px;
top: 0;
line-height: 2.3;
font-size: 14px;
text-align: center;
color: #fff;
background-color: #e64340;
z-index: 10110;
transition: all 0.4s ease;
}
.zan-toptips--show {
-webkit-transform: translateZ(0) translateY(0);
}
... ...
module.exports = {
showZanToast(title, timeout) {
const options = formatParameter(title, timeout);
// 清除上一轮的计时器
const { timer = 0 } = this.data.zanToast || {};
clearTimeout(timer);
// 弹层设置~
const zanToast = {
show: true,
icon: options.icon,
image: options.image,
title: options.title,
success:options.success
};
// console.log('zantoast',zanToast);
this.setData({
zanToast
});
// 传入的显示时长小于0，就认为需要一直显示
if (timeout < 0) {
return;
}
// 下一轮计时器
const nextTimer = setTimeout(() => {
zanToast.success();
this.clearZanToast();
}, timeout || 3000);
this.setData({
'zanToast.timer': nextTimer
});
},
// 清除所有 toast
clearZanToast() {
const { timer = 0 } = this.data.zanToast || {};
clearTimeout(timer);
this.setData({
'zanToast.show': false
});
},
// 快捷方法，显示 loading
showZanLoading(title) {
const options = formatParameter(title);
this.showZanToast({
...options,
icon: 'loading'
});
}
};
function formatParameter(title, timeout = 0) {
// 如果传入的 title 是对象，那么认为所有的配置属性都在这个对象中了
if (typeof title === 'object') {
return title;
}
return {
title,
timeout
};
}
... ...
<template name="zan-toast">
<view
class="zan-toast {{ !zanToast.title ? 'zan-toast--notitle' : '' }}"
wx:if="{{ zanToast.show }}"
bindtap="clearZanToast"
>
<!-- icon 展示 -->
<block
wx:if="{{ zanToast.icon || zanToast.image }}"
>
<view
wx:if="{{ zanToast.image }}"
class="zan-toast__icon zan-toast__icon-image"
style="background-image: url({{ zanToast.image }});"
></view>
<view
wx:elif="{{ zanToast.icon === 'loading' }}"
class="zan-toast__icon zan-toast__icon-loading"
>
<view class="zan-loading"></view>
</view>
<view
wx:else
class="zan-toast__icon zan-icon zan-icon-{{ zanToast.icon }}"
></view>
</block>
<!-- 文案展示 -->
<view wx:if="{{ zanToast.title }}">{{ zanToast.title }}</view>
</view>
</template>
... ...
.zan-toast {
position: fixed;
top: 35%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 14px;
line-height: 1.5em;
margin: 0 auto;
box-sizing: border-box;
padding: 10px 18px;
text-align: center;
border-radius: 4px;
z-index: 100;
}
.zan-toast--notitle {
padding: 18px;
}
.zan-toast__icon {
width: 40px;
height: 40px;
line-height: 40px;
margin: 0 auto;
padding: 12px 15px;
font-size: 38px;
text-align: center;
}
.zan-toast__icon-loading {
line-height: 0;
}
.zan-toast__icon-loading .zan-loading {
width: 40px;
height: 40px;
}
.zan-toast__icon-image {
background-size: 40px;
background-position: center;
background-repeat: no-repeat;
}
... ...