Authored by 邱骏

Merge branch 'develop' of http://git.yoho.cn/fe/yoho-limited-sell-miniapp into develop

[*.js]
indent_size = 2
\ No newline at end of file
... ...
registry=http://npm.yohops.com
package-lock=false
\ No newline at end of file
... ...
import wx from './utils/wx';
import udid from './common/udid';
import event from './common/event';
import {verify} from './common/api';
import {
verify
} from './common/api';
import Promise from './vendors/es6-promise';
import { wechatAuthLogin, verifySessionKey } from './common/login';
import {MD5} from './vendors/crypto';
import {
wechatAuthLogin,
verifySessionKey
} from './common/login';
import {
MD5
} from './vendors/crypto';
import config from './common/config';
import Yas from './common/yas';
import './router/index'; // 新增的router
import {stringify} from './vendors/query-stringify';
import {
stringify
} from './vendors/query-stringify';
let yas;
... ... @@ -20,14 +29,27 @@ App({
sessionKey: '',
thirdSession: '',
udid: '',
unionType: ''
unionType: '',
systemInfo: {}
},
reportData: {
awakeReported: false
},
onLaunch: function(options) {
this.globalData.udid = udid.get(); // 生成 UDID
verify.gen(); // 此处返回是是 Promise,需要调用接口的业务,最好在 then 里边执行
let sysInfo = wx.getSystemInfoSync();
if (!sysInfo.screenHeight) {
sysInfo.screenHeight = sysInfo.windowHeight;
}
if (!sysInfo.screenWidth) {
sysInfo.screenWidth = sysInfo.windowWidth;
}
this.globalData.systemInfo = sysInfo;
this.globalData.unionType = options.query.union_type || options.scene;
let timestamp = new Date().getTime() + '';
... ... @@ -84,7 +106,9 @@ App({
path = `${path}?${stringify(options.query)}`;
}
yas.report('YB_AWAKE_MP', { PAGE_PATH: path }); // 唤起事件,即每次启动后获取到原始的推广路径时上报该事件,以对推广渠道数据进行监测;
yas.report('YB_AWAKE_MP', {
PAGE_PATH: path
}); // 唤起事件,即每次启动后获取到原始的推广路径时上报该事件,以对推广渠道数据进行监测;
this.reportData.awakeReported = true;
}
... ... @@ -204,7 +228,7 @@ App({
if (res.code === 10004) { // 微信号未绑定手机号
// 自动登录未绑定静默处理、不强制绑定
}
}).catch(() => { });
}).catch(() => {});
}
return verifySessionKey().then(ves => {
... ... @@ -246,5 +270,8 @@ App({
},
getPvid() {
return MD5(`${new Date().getTime()}${udid.get()}`).toString();
},
getSystemInfo() {
return this.globalData.systemInfo;
}
});
});
\ No newline at end of file
... ...
... ... @@ -2,7 +2,8 @@
"pages": [
"pages/index/index",
"pages/account/chooseArea",
"pages/account/bindMobile"
"pages/account/bindMobile",
"pages/product/detail/detail"
],
"window": {
"backgroundTextStyle": "dark",
... ...
import wx from '../utils/wx';
import config from './config';
import udid from './udid';
import {HmacSHA256, MD5} from '../vendors/crypto';
import {stringify} from '../vendors/query-stringify';
import {
HmacSHA256,
MD5
} from '../vendors/crypto';
import {
stringify
} from '../vendors/query-stringify';
export const verify = {
verifyMethod: 'resources.simple.pice',
... ... @@ -173,4 +178,4 @@ const api = {
}
};
export default api;
export default api;
\ No newline at end of file
... ...
... ... @@ -27,4 +27,4 @@ const config = {
business_line: 'miniappOffshop' // 业务线
};
export default config;
export default config;
\ No newline at end of file
... ...
import wx from '../../../utils/wx';
import {
tapToLogin
} from '../../../common/login';
import formatImage from '../../../utils/formatImage';
import listModel from '../../../models/product/list';
import detailModel from '../../../models/product/detail';
import config from '../../../common/config';
import Yas from '../../../common/yas';
import {
getGoodInfo,
getGoodSize
} from '../../../utils/productDetail';
import Picker from './picker/picker';
import {
Actionsheet
} from '../../../vendors/zanui/index';
let app = getApp();
let router = global.router;
let {
windowHeight
} = app.getSystemInfo();
let yas;
Page(Object.assign({
data: {
shopId: 0,
productSkn: 0,
productName: '',
marketPrice: '',
salesPrice: '',
productImages: [],
storage_sum: 0,
buyImmediate: false,
loadingForPayment: false,
selectedSKU: 0,
colorSelected: false,
productSupportServiceList: [],
productDesc: [],
productPhrare: [],
productSizeTitle: [],
productSizeContent: [],
productMeasurementImage: [],
productWashTipsBoList: [],
productMaterialList: [],
productIntroImageList: [],
pickerData: {
view: {
isShow: false,
isSoldOutSoon: false,
goodsList: [],
sizeList: [],
image: '',
goodPrice: '',
price: '',
buyNumber: 1,
minusButtonEnable: false,
plusButtonEnable: true,
buyButtonEnable: true,
buy_limit_number: 0,
bundle_count: 0
},
sourceType: 'goodsDetail'
},
showSnapshootShare: false,
snapshootShareData: {},
actionSheet: {
componentId: 'shareActionSheet',
show: false,
closeOnClickOverlay: true,
cancelText: '取消',
actions: [{
name: '分享给朋友',
className: 'action-class',
loading: false,
openType: 'share'
}]
},
shopRecList: [],
preferList: [],
showMenu: false,
showBackTop: false,
showBottomTipView: false,
productOnlyProvideByYohoAPP: false,
productOnlyProvideByYohoStore: false,
productNotForSale: false,
},
onLoad: function(options) {
let productSkn = options.productSkn ? options.productSkn : '';
if (!productSkn) {
productSkn = options.product_skn ? options.product_skn : '';
}
this.setData({
productSkn
});
this.productInfo();
setTimeout(() => {
this.supportService();
this.productIntro();
this.preferList();
}, 500);
yas = new Yas(app);
yas.pageOpenReport();
},
onPageScroll: function({
scrollTop
}) {
const showMenu = scrollTop > 50;
const show = scrollTop > windowHeight * 2;
if (show !== this.data.showBackTop) {
this.setData({
showBackTop: show
});
}
if (showMenu !== this.data.showMenu) {
this.setData({
showMenu: showMenu
});
}
},
backTop: function() {
wx.pageScrollTo({
scrollTop: 0
});
},
onShareAppMessage: function(res) {
let params = {
FROM: res.from,
SHARE_RESUIL: 0,
TITLE: this.data.productName,
DESC: '我在红人小店发现一个不错的商品赶快来看看吧!',
PATH: `/pages/product/detail/detail?productSkn=${this.data.productSkn}`,
};
// 用户点击右上角分享
return {
title: params.TITLE, // 分享标题
desc: params.DESC, // 分享描述
path: params.PATH, // 分享路径
success: function() {
params.SHARE_RESUIL = 1;
yas.report('YB_SHARE_RESULT_L', params);
},
fail: function() {
params.SHARE_RESUIL = 2;
yas.report('YB_SHARE_RESULT_L', params);
}
};
},
share: function() {
this.setData({
'actionSheet.show': true
});
},
handleZanActionsheetCancel() {
this.setData({
'actionSheet.show': false
});
},
// 当行动按钮中有一个被点击时触发
// index 代表被点击按钮在传入参数 actions 中的位置
handleZanActionsheetClick({
index
}) {
this.setData({
'actionSheet.show': false
});
if (index === 1) {
this.setData({
showSnapshootShare: true
});
}
},
hideSnap: function() {
this.setData({
showSnapshootShare: false
});
},
shopRecList: function(shopId) {
listModel.productList({
page: 1,
limit: 20,
shop_id: shopId
}).then(res => {
if (res.code === 200) {
const keyAdapter = {
skn: 'product_skn',
salesPrice: 'sales_price',
marketPrice: 'market_price',
productName: 'product_name',
defaultImages: 'default_images'
};
let list = [];
(res.data.product_list || []).forEach(product => {
let item = {};
Object.keys(keyAdapter).forEach(key => {
item[key] = product[keyAdapter[key]];
});
list.push(item);
});
this.setData({
shopRecList: list
});
}
});
},
preferList: function() {
listModel.productList({
page: 1,
limit: 20
}).then(res => {
if (res.code === 200) {
const keyAdapter = {
skn: 'product_skn',
salesPrice: 'sales_price',
marketPrice: 'market_price',
productName: 'product_name',
defaultImages: 'default_images'
};
let list = [];
(res.data.product_list || []).forEach(product => {
let item = {};
Object.keys(keyAdapter).forEach(key => {
item[key] = product[keyAdapter[key]];
});
list.push(item);
});
this.setData({
preferList: list
});
}
});
},
productInfo: function() {
detailModel.productInfo(this.data.productSkn)
.then(res => {
if (res.code === 200) {
let ImgUrls = [];
let color_length = 0;
if (res.data.goods_list) {
color_length = res.data.goods_list.length;
}
res.data.goods_list.map((item, index) => {
let images = item.images_list;
ImgUrls = [...ImgUrls, ...images];
if (index === 0 && color_length === 1) {
item.selected = true;
this.data.colorSelected = true;
this.data.selectedProductId = item.goods_id;
}
});
let isSoldOutSoon = false;
let tags = res.data.tags;
if (tags) {
isSoldOutSoon = tags.includes('is_soon_sold_out');
}
// pickerData
let pickData = this.data.pickerData;
pickData.view.goodsList = res.data.goods_list;
pickData.view.isSoldOutSoon = isSoldOutSoon;
// 默认显示第一种颜色的尺码
pickData.view.sizeList = res.data.goods_list.length ? res.data.goods_list[0].size_list : [];
let plusButtonEnable = false;
let minusButtonEnable = false;
// 根据库存设置该尺码是否可以选择
let size_length = 0;
if (pickData.view.sizeList) {
size_length = pickData.view.sizeList.length;
}
pickData.view.sizeList && pickData.view.sizeList.map((item, index) => {
item.enable = item.storage_number > 0;
if (index === 0 && size_length === 1 && this.data.colorSelected) {
// 当颜色被选中 并且只有一个size 时 才会自动 做选中尺码操作
pickData.view.buyButtonEnable = item.enable;
if (item.enable) {
item.selected = true;
plusButtonEnable = item.storage_number > 1;
this.setData({
selectedSKU: item.product_sku,
storageNumber: item.storage_number
});
}
}
});
pickData.view.plusButtonEnable = plusButtonEnable;
pickData.view.minusButtonEnable = minusButtonEnable;
pickData.view.image = formatImage.image(ImgUrls.length > 0 ? ImgUrls[0].image_url : '', 168, 232);
pickData.view.price = res.data.format_market_price;
pickData.view.goodPrice = res.data.format_sales_price;
let default_image = formatImage.image(ImgUrls.length > 0 ? ImgUrls[0].image_url : '', 750, 1000);
let product_qrCode = config.domains.api + '/wechat/miniapp/img-check.jpg?param=' + res.data.product_skn; // eslint-disable-line
let snapData = {
product_name: res.data.product_name,
product_price: '¥' + res.data.sales_price,
default_image,
product_qrCode,
product_skn: this.data.productSkn
};
this.setData({
productName: res.data.product_name,
marketPrice: res.data.format_market_price,
salesPrice: res.data.format_sales_price,
productImages: ImgUrls,
pickerData: pickData,
storage_sum: res.data.storage_sum,
snapshootShareData: snapData,
shopId: res.data.shop_id,
// 暂时没用
// brand_id: res.data.brand_id,
// isLimitBuy:res.data.isLimitBuy,
// is_deposit_advance:res.data.is_deposit_advance,
// is_secKill:res.data.is_secKill,
// is_advance:res.data.is_advance,
// sales_phrase: res.data.sales_phrase,
// expect_arrival_time: res.data.expect_arrival_time || '',
// isInstalment:res.data.isInstalment,
// product_id: res.data.product_id,
// vipPrice : res.data.vip || '',
// is_supplyed: res.data.is_supplyed,
// bundle_type: res.data.bundle_type,
// store_show_status: res.data.store_show_status,
// attribute: res.data.attribute,
productOnlyProvideByYohoAPP: res.data.is_secKill === 'Y' || res.data.is_advance === 'Y' || res.data.attribute === 3 || res.data.attribute === 4 || res.data.isLimitBuy || res.data.is_deposit_advance === 'Y', // eslint-disable-line
productOnlyProvideByYohoStore: res.data.store_show_status === 3 || res.data.store_show_status === 4, // eslint-disable-line
productNotForSale: res.data.attribute === 2,
showBottomTipView: true
});
this.shopRecList(res.data.shop_id);
}
});
},
supportService: function() {
let params = {
product_skn: this.data.productSkn,
coupon_limit_status: 0
};
detailModel.supportService(params)
.then(res => {
this.setData({
productSupportServiceList: res.data
});
});
},
productIntro: function() {
let params = {
productskn: this.data.productSkn
};
detailModel.productIntro(params)
.then(data => {
let infoList = data.productDescBo;
let productPhrare = data.productDescBo.phrase;
let size = data.sizeInfoBo;
size = getGoodSize(size);
infoList = getGoodInfo(infoList);
this.setData({
productDesc: infoList,
productPhrare,
productSizeTitle: size.titleList,
productSizeContent: size.sizeList,
productMeasurementImage: data.sizeImage,
productWashTipsBoList: data.washTipsBoList,
productMaterialList: data.productMaterialList,
productIntroImageList: data.productIntroBo.imageList
});
});
},
buyImmediate: function() {
if (this.data.productOnlyProvideByYohoAPP || this.data.productOnlyProvideByYohoStore || this.data.productNotForSale) { // eslint-disable-line
return wx.showToast({
title: '该商品暂时不支持当前小程序购买,请到Yoho!Buy有货查看',
icon: 'none',
duration: 2000
});
}
if (this.data.storage_sum === 0) {
return;
}
this.setData({
buyImmediate: true
});
if (app.getUid()) {
Picker.pickerShow(this);
} else {
tapToLogin();
}
},
hidePicker: function(e) {
if (e.target.id === 'picker-bg') {
Picker.pickerHide(this);
}
},
chooseColor: function(event) {
let pickData = this.data.pickerData;
// 先遍历将所有颜色、尺码置为未选中状态
pickData.view.goodsList && pickData.view.goodsList.map(item => {
item.selected = false;
item.size_list.map(subItem => {
subItem.selected = false;
subItem.enable = subItem.storage_number > 0;
});
});
// 将当前颜色置为选中状态
let tempItem = event.target.dataset.key;
// 遍历颜色尺码,根据库存切换显示状态
tempItem && tempItem.size_list && tempItem.size_list.map(item => {
item.enable = item.storage_number > 0;
});
tempItem.selected = true;
this.data.selectedProductId = tempItem.goods_id;
// 设置标志位,表示已经选择颜色
let colorSelected = true;
// 重置库存、当前选中sku的值
pickData.storageNumber = 0;
pickData.selectedSKU = 0;
this.data.selectedSKU = 0;
pickData.view.goodsList[Number(event.target.id)] = tempItem;
pickData.view.sizeList = tempItem.size_list;
pickData.view.minusButtonEnable = false;
// 将购买数量设为初始状态
pickData.view.buyNumber = 1;
this.setData({
colorSelected,
pickerData: pickData
});
},
chooseSize: function(event) {
let pickData = this.data.pickerData;
// 现遍历将所有尺码置为未选中状态
pickData.view.sizeList && pickData.view.sizeList.map(item => {
item.selected = false;
});
// 将当前尺码置为选中状态
let tempItem = event.currentTarget.dataset.key;
tempItem.selected = true;
pickData.view.sizeList[parseInt(event.currentTarget.id)] = tempItem;
// 设置数量加减按钮启用状态
pickData.view.plusButtonEnable = (!pickData.view.buy_limit_number || pickData.view.buy_limit_number > 1) && tempItem.storage_number > 1; // eslint-disable-line
pickData.view.minusButtonEnable = false;
pickData.view.buyButtonEnable = true;
if (pickData.view.bundle_count === 0) {
pickData.view.buyNumber = 1;
}
if (tempItem.storage_number <= 0) {
wx.showToast({
title: '该尺码已经售罄',
icon: 'none',
duration: 2000
});
pickData.view.buyButtonEnable = false;
}
this.setData({
pickerData: pickData,
selectedSKU: tempItem.storage_number > 0 ? tempItem.product_sku : 0,
storageNumber: tempItem.storage_number
});
},
bindMinus: function() {
let pickerData = this.data.pickerData;
let buyNumber = parseInt(pickerData.view.buyNumber);
if (pickerData.view.bundle_count > 0) {
if (buyNumber > pickerData.view.bundle_count) {
pickerData.view.minusButtonEnable = true;
} else {
this.minReachedLimitAction(pickerData.view.bundle_count);
pickerData.view.minusButtonEnable = false;
return;
}
}
if (buyNumber > 1) {
buyNumber = buyNumber - 1;
}
pickerData.view.buyNumber = buyNumber;
if (buyNumber === 1) {
pickerData.view.minusButtonEnable = false;
} else {
pickerData.view.minusButtonEnable = true;
}
if (pickerData.view.buy_limit_number !== 0 && buyNumber < pickerData.view.buy_limit_number) {
pickerData.view.plusButtonEnable = true;
}
if (buyNumber < this.data.storageNumber) {
pickerData.view.plusButtonEnable = true;
}
this.setData({
pickerData
});
},
// 增加购买数量
bindPlus: function() {
if (!this.data.colorSelected) {
return wx.showToast({
title: '请选择颜色',
icon: 'none',
duration: 1000
});
}
if (!this.data.selectedSKU) {
return wx.showToast({
title: '请选择尺码',
icon: 'none',
duration: 1000
});
}
let pickerData = this.data.pickerData;
let buyNumber = pickerData.view.buyNumber;
if (pickerData.view.buy_limit_number !== 0 && buyNumber >= pickerData.view.buy_limit_number) {
return this.plusReachedLimitAction(pickerData.view.buy_limit_number);
}
if (buyNumber >= this.data.storageNumber) {
return this.plusReachedMaxAction();
}
if (pickerData.view.buy_limit_number !== 0 && buyNumber < pickerData.view.buy_limit_number) {
pickerData.view.plusButtonEnable = true;
}
if (buyNumber < this.data.storageNumber) {
pickerData.view.plusButtonEnable = true;
buyNumber = parseInt(buyNumber) + 1;
}
if (buyNumber >= this.data.storageNumber) {
pickerData.view.plusButtonEnable = false;
}
if (buyNumber > 1) {
pickerData.view.minusButtonEnable = true;
}
pickerData.view.buyNumber = buyNumber;
this.setData({
pickerData
});
},
plusReachedMaxAction: function() {
return wx.showToast({
title: '对不起,没有更多库存了',
icon: 'none',
duration: 1000
});
},
plusReachedLimitAction: function(n) {
return wx.showToast({
title: '限购' + n + '件',
icon: 'none',
duration: 1000
});
},
minReachedLimitAction: function(n) {
return wx.showToast({
title: n + '件起售',
icon: 'none',
duration: 1000
});
},
goPayment: function(e) {
if (!this.data.colorSelected) {
return wx.showToast({
title: '请选择颜色',
icon: 'none',
duration: 1000
});
}
if (!this.data.selectedSKU) {
return wx.showToast({
title: '请选择尺码',
icon: 'none',
duration: 1000
});
}
this._dataReport();
if (this.data.buyImmediate) {
this.payNow(e);
}
},
payNow: function() {
router.go('cartEnsure', {
productSku: this.data.selectedSKU,
buyNumber: this.data.pickerData.view.buyNumber
});
},
_dataReport: function() {
yas.report('YB_GDS_DT_BILL', {
PRD_SKN: this.data.productSkn,
RPD_SKU: this.data.selectedSKU,
PRD_ID: this.data.selectedProductId
});
}
}, Actionsheet));
\ No newline at end of file
... ...
{
"navigationBarTitleText": "商品详情",
"usingComponents": {
"product-banner": "/components/product/detail/banner",
"product-list": "/components/product/list",
"view-title": "/components/layout/view-title/view-title",
"copyright": "/components/layout/copyright/copyright",
"quick-navigation": "/components/layout/quick-navigation/quick-navigation"
}
}
... ...
<import src="./picker/picker.wxml"/>
<wxs src="../../../wxs/helper.wxs" module="helper"/>
<import src="../../../vendors/zanui/actionsheet/index.wxml"/>
<view class="detail-container">
<view class='topContainer'>
<product-banner image-list="{{productImages}}" product-name="{{productName}}"></product-banner>
</view>
<view class="price-seperator"></view>
<view class="goodPrice">
<text class="realPrice">{{salesPrice != '0' ? salesPrice : marketPrice}}</text>
<text class="price" wx:if="{{salesPrice != '0'}}">{{marketPrice}}</text>
<view class="goodShare">
<image class="shareIcon" src="../../../static/images/share-ic-dark@2x.png" bindtap="share"></image>
<button bindtap="share" class="shareButton"></button>
</view>
</view>
<view class="gap"></view>
<!-- 支持的服务 -->
<view class="supportService"
style="display: {{productSupportServiceList.length>0?'block':'none'}} ;flex-direction: row; display: flex;">
<view class="supportService-item" wx:for="{{productSupportServiceList}}" wx:key="supportService">
<text wx:if="{{item.flag == 1}}" class="iconfont icon-duihao-fill"></text>
<text wx:else class="iconfont icon-warn-fill unsupport-icon"></text>
<text class="support-service-title">{{item.title}}</text>
</view>
</view>
<view class="gap"></view>
<view class="goodsInfo" style="display:{{productDesc.length>0?'block':'none'}}">
<view class="module-title">
<text class="text">商品信息 <text class="sub-text">DESCRIPTION</text></text>
</view>
<view class="table">
<view class="tr" wx:for="{{productDesc.length/2}}" wx:key="unique">
<view class="td">{{productDesc[index*2]}}</view>
<view class="td">{{productDesc[index*2+1]}}</view>
</view>
</view>
<view wx:if="{{productPhrare}}" class="goodsInfoPhrare">
<text class="lightGrayFont">{{productPhrare}}</text>
</view>
</view>
<view class="goodsInfo" style="display:{{productSizeContent.length>0?'block':'none'}}">
<view class="module-title">
<text class="text">尺码信息 <text class="sub-text">INFORMATION</text></text>
</view>
<scroll-view class="table">
<view class="tr">
<view class="td" wx:for="{{productSizeTitle}}" wx:key="unique">{{item}}</view>
</view>
<view class="tr" wx:for="{{productSizeContent}}" wx:key="unique">
<view class="td" wx:for="{{productSizeContent[index]}}" wx:key="unique">{{item}}</view>
</view>
</scroll-view>
</view>
<view class="goodsInfo" style="display:{{productMeasurementImage?'block':'none'}}">
<view class="module-title">
<text class="text">测量信息 <text class="sub-text">DESCRIPTION</text></text>
</view>
<image src="{{productMeasurementImage}}" mode="widthFix"></image>
</view>
<view class="goodsInfo" style="display:{{productMaterialList[0].remark?'block':'none'}}">
<view class="module-title">
<text class="text">商品材质 <text class="sub-text">DESCRIPTION</text></text>
</view>
<view class="goodsInfoDescription">
<text class="lightGrayFont">{{productMaterialList[0].remark}}</text>
</view>
<view class="goodsTexture" wx:for="{{productWashTipsBoList}}" wx:key="unique">
<view class="texture">
<image class="img" src= "{{item.img}}" mode="widthFix"/>
<view class="desc">
<text class="lightGrayFont">{{item.caption}}</text>
</view>
</view>
</view>
</view>
<view class="goodsInfo img" style="display:{{productIntroImageList.length>0?'block':'none'}}">
<view class="module-title">
<text class="text">商品详情 <text class="sub-text">DESCRIPTION</text></text>
</view>
<view wx:for="{{productIntroImageList}}" wx:key="introImage" style="text-align:center">
<image class="intro-image" src="{{item}}" mode="widthFix"></image>
</view>
</view>
<block wx:if="{{shopRecList.length}}">
<view class="gap"></view>
<view class='titleContainer'>
<view class='titleLine'></view>
<view class='titleDesc'> 店铺推荐商品</view>
</view>
<view class="product-list shop-rec">
<product-list list="{{shopRecList}}"></product-list>
</view>
</block>
<block wx:if="{{preferList.length}}">
<view class="gap"></view>
<view class='titleContainer'>
<view class='titleLine'></view>
<view class='titleDesc'> 你可能喜欢</view>
</view>
<view class="product-list prefer">
<product-list list="{{preferList}}"></product-list>
</view>
</block>
<copyright></copyright>
</view>
<block wx:if="{{storage_sum==0}}">
<view class='bottom-tip-view' wx:if="{{showBottomTipView}}" style="display:{{storage_sum===0?'flex':'none'}}">
<text class="bottom-tip-view-title" style="display:{{is_supplyed?'flex':'none'}}">此商品已售罄,请等待后续备货!</text>
<text class="bottom-tip-view-title" style="display:{{is_supplyed?'none':'flex'}}">已售罄</text>
</view>
</block>
<block wx:else>
<view
class="bottom-action {{(productOnlyProvideByYohoAPP || productOnlyProvideByYohoStore || productNotForSale) ? 'disabled' : ''}}" >
<view
class="buy-btn"
bindtap="buyImmediate">立即购买
</view>
</view>
</block>
<quick-navigation show-menu="{{showMenu}}" show-back-top="{{showBackTop}}" show="{{true}}"
bindbacktop="backTop" margin-bottom="{{150}}"></quick-navigation>
<template is="Picker" data="{{pickerData, loadingForPayment}}"/>
<template is="zan-actionsheet" data="{{...actionSheet}}"/>
... ...
@import "./picker/picker.wxss";
.detail-container {
padding-bottom: 100rpx;
}
.topContainer{
}
.swiper-box{
width:100%;
height:800rpx;
}
.swiper-box .slide-image{
width:100%;
height:100%;
display: inline-block;
overflow: hidden;
}
.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal{
margin-bottom: 110rpx;
padding-left: 15rpx;
padding-right: 10rpx;
padding-top: 5rpx;
padding-bottom: 5rpx;
border-radius: 40rpx;
background-color: rgba(0,0,0,0.2);
}
.swiper-box .wx-swiper-dot{
width:10rpx;
display: inline-flex;
height: 10rpx;
margin-left: -5rpx;
justify-content:space-between;
}
.goodTitle{
/* width: 100%; */
position: absolute;
bottom: 0rpx;
right: 0rpx;
left: 0rpx;
background: rgba(0,0,0,0.8);
align-items: center;
padding: 15rpx 30rpx;
min-height: 50rpx;
}
.goodTitle .title{
font-size: 28rpx;
color: white;
}
.advanceTitleView{
display: flex;
margin: 15rpx;
width: 100%;
height: 45rpx;
align-items: center;
}
.advanceTitleView .advanceTitle{
font-size: 28rpx;
color: #000000;
text-align: left;
padding-left: 15rpx;
white-space: nowrap;
text-overflow:ellipsis;
overflow: hidden;
}
.advanceTimeView{
margin: 15rpx;
display: flex;
width: 100%;
height: 65rpx;
align-items: center;
}
.advanceTimeView .advanceTime{
font-size: 28rpx;
color: #000000;
text-align: left;
padding-left: 15rpx;
}
.goodPrice{
margin: 15rpx;
/* width: 96%; */
height: 70rpx;
display: flex;
flex-direction:row;
}
.goodPrice .realPrice{
font-family: PingFang-SC-Medium;
letter-spacing: -0.44rpx;
color: #d0021b;
line-height: 70rpx;
text-align: left;
padding-left: 15rpx;
font-size: 32rpx;
font-weight: bold;
}
.goodPrice .price{
margin-left: 0rpx;
color: #b0b0b0;
padding-left: 20rpx;
text-decoration: line-through;
font-size: 24rpx;
line-height: 70rpx;
padding-top: 3rpx;
}
.normalPrice{
padding-left: 15rpx;
}
.goodShare{
flex:4;
line-height: 70rpx;
text-align: right;
/* margin-right: 20rpx; */
/* background-color: blue; */
display: flex;
flex-direction:row;
justify-content: flex-end;
}
.shareIcon{
padding-top: 15rpx;
width:42rpx;
height:42rpx;
margin-right: 20rpx;
}
.shareButton{
background-color: red;
margin-right: 35rpx;
width: 100rpx;
height: 100rpx;
opacity: 0;
position: absolute;
top: 830rpx;
}
.vip-price-item{
display: flex;
flex-direction: row;
flex: 1;
padding-left: 15rpx;
}
.vip-price-image{
width: 50rpx;
height: 30rpx;
align-items: center;
}
.vip-price-title{
color: #b0b0b0;
padding-left: 20rpx;
font-size: 28rpx;
align-items: center;
}
.promotion{
vertical-align: center;
padding-left: 30rpx;
display: flex;
align-items: center;
}
.promotion-item{
vertical-align: center;
display: flex;
flex-direction: row;
padding-right: 20rpx;
height: 100%;
flex-wrap: wrap;
width: 100%;
}
.promotion-title{
color: #444444;
font-size: 14px;
padding-left: 10rpx;
padding-right: 10rpx;
width: 80rpx;
align-items: center;
}
.promotion-item-left{
padding-left:10rpx;
padding-right:10rpx;
color: #ff575c;
font-size: 25rpx;
height: 32rpx;
vertical-align: center;
margin-bottom: 15rpx;
align-items: center;
}
.promotion-item-border{
height: 14px;
border-radius: 5rpx;
border: solid 2rpx #ff575c;
width: 45px;
display: flex;
justify-content: center;
align-items: center;
}
.promotion-title-item{
color: #ff575c;
font-size: 9px;
line-height: 12px;
vertical-align: center;
align-items: center;
justify-content: center;
}
.promotion-item-seperator{
height:1rpx;
transform: scaleY(0.5);
background:#e0e0e0;
/* margin-top: 20rpx; */
width:100%;
padding-left:20rpx;
}
.promotion-detail{
flex-direction: row;
display: flex;
padding-top: 20rpx;
/* padding-bottom: 20rpx; */
/* margin: 20rpx 0 20rpx 0; */
}
.promotion-tips-title{
color: #b0b0b0;
font-size: 25rpx;
vertical-align: center;
display: flex;
flex-direction: row;
padding-right: 20rpx;
height: 100%;
flex-wrap: wrap;
width: 100%;
}
.promotion-detail-title{
color: #444444;
font-size: 12px;
padding-left: 10rpx;
padding-right: 15rpx;
}
.promotion-detail-date{
color: #b0b0b0;
font-size: 9px;
padding-bottom: 20rpx;
margin-left: 10rpx;
}
.promotion-seperator{
/* margin: 20rpx; */
margin-top: 20rpx;
margin-bottom: 20rpx;
padding-left: 100rpx;
height:10rpx;
background:rgb(238, 238, 238);
}
.support-service-image{
width: 30rpx;
height: 30rpx;
}
.supportService{
flex-wrap: wrap;
height: 44px;
}
.supportService-item{
display: flex;
align-items: center;
flex-direction: row;
}
.supportService-item .iconfont {
color: #fb686e;
font-size: 32rpx;
margin-left: 60rpx;
margin-right: 2rpx;
}
.supportService-item .iconfont:first-child {
margin-left: 30rpx;
}
.supportService-item .unsupport-icon {
color: #b0b0b0;
}
.support-service-title{
color: #444444;
font-size: 12px;
padding-left: 5px;
}
.support-service-arrow{
width: 20rpx;
height: 12rpx;
margin-right: 20rpx;
}
.goodsInfo{
margin: 0 30rpx;
}
.title{
/* padding: 20rpx 0rpx; */
font-size: 30rpx;
font-weight: bold;
color: #444444;
}
.phoneBtnTitle{
font-size: 30rpx;
font-weight: bold;
color: white;
}
.subtitle{
padding: 10rpx;
font-size: 25rpx;
color: #444444;
}
.tipView{
width:100%;
height:30rpx;
background:rgb(238, 238, 238);
text-align: center;
justify-content: center;
}
.tipText{
line-height: 100rpx;
font-size: 25rpx;
color: lightgrey;
}
.seperator {
width:100%;
height:1rpx;
transform: scaleY(0.5);
background:#E0E0E0;
margin: 15rpx 0 15rpx 0;
}
.price-seperator {
width:100%;
height:1rpx;
background:#E0E0E0;
transform: scaleY(0.5);
}
.gap{
width:100%;
height:20rpx;
background:#f0f0f0;
}
.service-image{
margin: 20rpx;
}
.table {
border:1px solid #fff;
border-right: 0;
border-bottom: 0;
width: 100%;
background-color: #f0f0f0;
}
.tr {
width: 100%;
display: flex;
justify-content: space-between;
}
.tr .td,.th {
padding: 10px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
text-align: left;
font-size: 25rpx;
width:100%
}
.th{
display: flex;
font-weight: 400;
background-color: #f0f0f0;
justify-content: space-between;
}
.goodsInfoDescription{
padding:0 20rpx 20rpx
}
.goodsInfoPhrare {
background-color: #f0f0f0;
padding-top: 10rpx;
padding-bottom: 10rpx;
padding-left: 10rpx;
padding-right: 10rpx;
}
.goodsTexture {
display: inline-block;
}
.goodsTexture .texture{
white-space: wrap;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 20rpx 20rpx 20rpx;
}
.goodsTexture .texture .img{
width: 50rpx;
height: 50rpx;
}
.goodsTexture .texture .desc{
width: 100rpx;
}
.largeGrayFont{
font-size: 34rpx;
color: #444444
}
.lightGrayFont{
font-size: 24rpx;
color: #444444
}
.button{
position: fixed;
width: 100%;
height: 100rpx;
bottom: 0;
background: #d0021b;
}
.bottom-tip-view{
display: flex;
position: fixed;
flex-direction:row;
width: 100%;
height: 100rpx;
bottom: 0;
background-color: #afafaf;
justify-content: center;
align-items: center;
}
.bottom-tip-view-title{
display: flex;
color: #fff;
font-size: 28rpx;
}
.bottom{
display: flex;
position: fixed;
flex-direction:row;
width: 100%;
height: 100rpx;
bottom: 0;
background-color: #ffffff;
border-top: solid 1rpx rgb(242, 242, 242);
}
.shoppint-like-icon{
position: relative;
width: 44rpx;
background-color: #ffffff;
vertical-align: center;
justify-content: center;
text-align: center;
padding-right: 28rpx
}
.shoppint-cart-icon{
position: relative;
width: 160rpx;
background-color: #ffffff;
vertical-align: center;
justify-content: center;
text-align: center;
}
.shoppint-cart-icon-image{
position: absolute;
width: 50rpx;
height: 30rpx;
align-items: center;
z-index: 10;
margin-top: 30rpx;
margin-left: -30rpx;
}
.badge {
position: absolute;
z-index: 9999;
right: 15px;
width: 15px;
height: 15px;
line-height: 15px;
background: #d0021b;
color: #fff;
border-radius: 50%;
text-align: center;
font-size: 8px;
margin-top: 15rpx;
}
.not-for-sale{
flex: 1;
vertical-align: center;
justify-content: center;
text-align: center;
}
.bottom-title{
color: white;
font-size: 34rpx;
width: 100%;
text-align: center;
height: 100rpx;
bottom: 0;
line-height: 100rpx;
}
.button .title{
position: absolute;
color: white;
font-size: 34rpx;
line-height: 50rpx;
width: 100%;
text-align: center;
height: 50rpx;
bottom: 0;
}
.evaluateTitle {
font-family: PingFang-SC-Regular;
font-size: 28rpx;
color: #444444;
}
.cellLine {
height: 1rpx;
transform: scaleY(0.5);
background-color: #e0e0e0;
}
.evaluateLis-item-view {
padding: 20rpx 30rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex: 1
}
.evaluateLis-item-head {
display: flex;
flex-direction: row;
align-items: center;
flex: 1
}
.evaluateLis-item-ico {
width: 60rpx;
height: 60rpx;
border-radius:50%
}
.evaluateLis-item-name {
font-family: PingFang-SC-Medium;
font-size: 28rpx;
color: #444444;
letter-spacing: -0.34px;
margin-left: 20rpx
}
.evaluateLis-item-level {
width: 58rpx;
height: 38rpx;
margin-left: 10rpx
}
.evaluateLis-item-head-right {
display: flex;
flex-direction: row;
align-items: center;
}
.evaluateLis-item-start {
width: 26rpx;
height: 26rpx;
margin-right: 4rpx;
}
.evaluateLis-item-size{
font-family: PingFang-SC-Semibold;
font-size: 24rpx;
color: #444444;
letter-spacing: -0.29px;
margin-left: 6rpx;
}
.evaluateLis-item-content-view{
margin: 0rpx 30rpx;
display: flex;
align-items: center;
}
.evaluateLis-item-content{
font-family: PingFang-SC-Regular;
font-size: 28rpx;
color: #444444;
letter-spacing: -0.34px;
line-height: 44rpx;
}
.evaluateLis-item-img-view{
margin:0rpx 30rpx;
display: flex;
align-items: center;
}
.evaluateLis-item-img{
width: 164rpx;
height: 164rpx;
margin-top: 20rpx;
}
.evaluateLis-item-time-view{
margin: 26rpx 30rpx 0rpx;
display: flex;
align-items: center;
}
.evaluateLis-item-time{
font-family: PingFang-SC-Regular;
font-size: 24rpx;
color: #B0B0B0;
letter-spacing: -0.29px;
margin-right:10rpx;
}
.evaluateLis-more-view {
padding: 40rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center
}
.evaluateLis-more {
display: flex;
flex-direction: row;
align-items: center;
background: #F0F0F0;
border-radius: 31px;
padding: 10rpx 30rpx
}
.evaluateLis-title-more {
font-family: PingFang-SC-Regular;
font-size: 28rpx;
color: #444444;
}
.evaluateLis-arrow-more {
width: 16rpx;
height: 26rpx;
margin-left: 4rpx
}
.shopRecommond {
margin: 30rpx 0rpx 60rpx 0rpx;
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: white;
}
.blackVerticalLine {
background: #444444;
width: 3px;
height: 15px;
margin-left: 36rpx;
margin-right: 20rpx;
}
.blackLineTitleContainer {
display: flex;
flex-direction: row;
height: 22px;
margin-top: 11px;
align-items: center;
}
.blackLineRightTitle {
font-size: 16px;
color: #444444;
font-weight: bold;
line-height: 20rpx;
}
.blackLineSeperator {
width:100%;
height:1rpx;
background: #E0E0E0;
margin-top: 11px;
transform: scaleY(0.5);
}
.bottom-action {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100rpx;
background-color: #d0021b;
text-align: center;
}
.bottom-action.disabled {
background-color: #E0E0E0;
}
.bottom-action .buy-btn {
font-family: PingFang-SC-Regular;
font-size: 32rpx;
color: #FFFFFF;
letter-spacing: -0.39rpx;
line-height: 100rpx;
}
.module-title {
height: 100rpx;
line-height: 100rpx;
text-align: center;
}
.module-title .text {
position: relative;
font-family: PingFang-SC-Medium;
font-size: 28rpx;
color: #444444;
letter-spacing: -0.33rpx;
}
.module-title .text:before {
position: absolute;
display: inline-block;
top: 19rpx;
left: -140rpx;
content: '';
height: 2rpx;
width: 100rpx;
background-color: #444;
}
.module-title .text:after {
position: absolute;
display: inline-block;
top: 19rpx;
right: -140rpx;
content: '';
height: 2rpx;
width: 100rpx;
background-color: #444;
}
.module-title .sub-text {
font-family: PingFang-SC-Medium;
font-size: 18rpx;
color: #000000;
letter-spacing: -0.33px;
line-height: 20rpx;
}
.titleContainer{
background-color: white;
border-bottom: 0.5rpx solid #e0e0e0;
display: flex;
flex-direction: row;
height: 80rpx;
align-items:center;
}
.titleLine{
width: 4rpx;
height: 30rpx;
background-color: #444444;
margin-left: 30rpx;
}
.titleDesc{
flex: 1;
text-align: left;
font-family: PingFang SC;
font-size: 30rpx;
margin-left: 16rpx;
color: #222;
}
.intro-image {
width: 690rpx;
margin-bottom: 30rpx;
}
.goodsInfo.img {
font-size: 0;
}
.product-list.shop-rec {
padding-bottom: 60rpx;
}
.product-list.prefer {
padding-bottom: 60rpx;
}
... ...
function init(ctx) {
let data = {};
let view = ctx.data.pickerData.view;
data.sourceType = ctx.data.pickerData.sourceType;
data.view = view;
ctx.setData({
pickerData: data
});
}
function pickerShow(ctx) {
let data = ctx.data.pickerData;
data.view.isShow = !data.view.isShow;
ctx.setData({
pickerData: data
});
}
function pickerHide(ctx) {
let data = ctx.data.pickerData;
data.view.isShow = false;
ctx.setData({
pickerData: data
});
}
module.exports = {
init: init,
pickerShow: pickerShow,
pickerHide: pickerHide
};
... ...
<template name="Picker">
<view class="picker-bg" id="picker-bg" catchtap="hidePicker" disable-scroll='true' catchtouchmove="catchtouchmove"
style="display:{{pickerData.view.isShow ? 'block':'none'}}">
<view class="picker-view">
<view class="pickerGoodsInfo">
<image class="img" src="{{pickerData.view.image}}">
</image>
<image class="placeholder"></image>
<view class="goodPrice">
<text class="realPrice">
{{pickerData.view.goodPrice==='0'?pickerData.view.price:pickerData.view.goodPrice}}
</text>
<text class="price" style="display:{{pickerData.view.goodPrice==='0'?'none':''}}">
{{pickerData.view.price}}
</text>
</view>
</view>
<view class="seperatorLine"></view>
<scroll-view scroll-y="true" style="height: 450rpx;">
<view class="goodsColor">
<text class="title">颜色</text>
<view class="list">
<block wx:for="{{pickerData.view.goodsList}}" wx:key="unique">
<view id="{{index}}" class="{{item.selected?'selectedItem':'normalItem'}}"
bindtap="chooseColor"
data-key="{{item}}">{{item.factory_goods_name}}
</view>
</block>
</view>
</view>
<view class="seperatorLine"></view>
<view class="goodsSize">
<text class="title">尺码</text>
<view class="list">
<block wx:for="{{pickerData.view.sizeList}}" wx:key="unique">
<view id="{{index}}"
class="{{ item.enable?(item.selected?'selectedItem':'normalItem'):'disableItem'}}"
bindtap="chooseSize" data-key="{{item}}">{{item.size_name}}
</view>
</block>
</view>
</view>
<view class="seperatorLine"></view>
<view wx:if='{{!pickerData.view.should_hidden_number_view}}' class="goodsCount">
<text class="title">数量</text>
<view class="stepper">
<view bindtap="bindMinus" class='reduceNumberBtn'>
<image class='reduceImage'
src='{{pickerData.view.minusButtonEnable ? "../../../static/images/jian_h@2x.png" : "../../../static/images/jian_disable@2x.png"}}'></image>
</view>
<view class='buyNumberText'>
{{pickerData.view.buyNumber}}
</view>
<view bindtap="bindPlus" class='addNumberBtn'>
<image class='addImage'
src='{{pickerData.view.plusButtonEnable ? "../../../static/images/and_normal@2x.png" : "../../../static/images/and_h@2x.png"}}'></image>
</view>
</view>
<view wx:if="{{pickerData.view.isSoldOutSoon}}" class='soldSoonOut'>
即将售罄
</view>
<view wx:if="{{pickerData.view.buy_limit_number}}" class='soldSoonOut'>
限购{{pickerData.view.buy_limit_number}}件
</view>
<view wx:if="{{pickerData.view.bundle_count}}" class='soldSoonOut'>
{{pickerData.view.bundle_count}}件起售
</view>
</view>
</scroll-view>
<view wx:if="{{pickerData.sourceType == 'goodsDetail' && pickerData.view.buyButtonEnable}}"
class="{{pickerData.view.buyButtonEnable?'buyButton':'buyButtonDisable'}}" bindtap="goPayment"
data-type='{{pickerData}}'>
<text class="title">确定</text>
</view>
<view wx:if="{{pickerData.sourceType == 'goodsDetail' && !pickerData.view.buyButtonEnable}}"
class="{{pickerData.view.buyButtonEnable?'buyButton':'buyButtonDisable'}}" data-type='{{pickerData}}'>
<text class="title">已售罄</text>
</view>
</view>
</view>
</template>
... ...
.picker-bg{
position: fixed;
z-index: 999;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
margin: 0;
border-top: 1px #eee solid;
background-color: rgba(0, 0, 0, 0.2);
}
.picker-bg .picker-view{
position: fixed;
z-index: 9999;
width:100%;
height: 800rpx;
left:0;
bottom: 0;
background-color: white;
}
.picker-view .pickerGoodsInfo{
display: flex;
margin-bottom: 50rpx;
}
.picker-view .pickerGoodsInfo .img{
position: absolute;
top: -30rpx;
margin-left: 30rpx;
width: 164rpx;
height: 228rpx;
border:1rpx solid #e0e0e0;
border-radius: 5rpx;
/*background-color: red;*/
}
.picker-view .pickerGoodsInfo .placeholder{
margin-left: 30rpx;
width: 164rpx;
height: 180rpx;
}
.picker-view .pickerGoodsInfo .goodPrice{
display: flex;
width: 500 rpx;
margin-left: 20rpx;
margin-top: 20rpx;
height: 70rpx;
}
.picker-view .pickerGoodsInfo .goodPrice .realPrice{
padding-left: 25rpx;
color: #d0021b;
line-height: 70rpx;
font-size: 28rpx;
}
.picker-view .pickerGoodsInfo .goodPrice .price{
padding-left: 15rpx;
color: #b0b0b0;
text-decoration: line-through;
line-height: 70rpx;
font-size: 28rpx;
}
.picker-view .goodsColor{
margin:30rpx;
display: flex;
flex-direction: row;
}
.picker-view .goodsColor .title{
font-size: 28rpx;
color: #444444;
text-align: left;
padding: 20rpx 0;
width: 60rpx;
font-weight: bold;
white-space: nowrap;
}
.picker-view .goodsColor .list{
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding-left: 10rpx;
}
.normalItem{
font-size: 28rpx;
text-align: center;
border: 1px solid #444;
margin: 5px;
padding: 5px;
border-radius: 3px;
min-width: 40rpx;
}
.disableItem{
font-size: 28rpx;
text-align: center;
border: 1px solid #e0e0e0;
margin: 5px;
padding: 5px;
border-radius: 3px;
color: #e0e0e0;
min-width: 40rpx;
}
.selectedItem{
font-size: 28rpx;
text-align: center;
border: 1px solid #d0021b;
margin: 5px;
padding: 5px;
border-radius: 3px;
color: white;
background-color: #d0021b;
min-width: 40rpx;
}
.picker-view .goodsSize{
margin: 30rpx;
display: flex;
flex-direction: row;
}
.picker-view .goodsSize .title{
font-size: 28rpx;
color: #444444;
text-align: left;
width: 60rpx;
padding: 20rpx 0;
font-weight: bold;
white-space: nowrap;
}
.picker-view .goodsSize .list{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-left: 10rpx;
flex: 90%;
}
.picker-view .goodsSize .list .item{
font-size: 28rpx;
text-align: center;
border: 1px solid #444;
margin: 5px;
padding: 5px;
border-radius: 3px;
}
.picker-view .goodsCount{
display: flex;
margin: 30rpx;
flex-direction: row;
flex-wrap: wrap;
float: left;
align-items: center;
}
.picker-view .goodsCount .title{
font-size: 28rpx;
color: #444444;
text-align: left;
padding: 20rpx 0;
font-weight: bold;
width: 60rpx;
}
.stepper {
border: 2rpx solid #e0e0e0;
border-radius: 6rpx;
width: 240rpx;
height: 60rpx;
margin-left: 20rpx;
justify-content: space-between;
display: flex;
align-items: center;
flex-direction: row;
}
.buyButton{
position: absolute;
width: 100%;
height: 100rpx;
bottom: 0;
background: #d0021b;
justify-content: space-around;
}
.buyButton .title{
position: absolute;
color: white;
font-size: 34rpx;
line-height: 50rpx;
width: 100%;
text-align: center;
height: 70rpx;
bottom: 0;
}
.buyButtonDisable{
position: absolute;
width: 100%;
height: 100rpx;
bottom: 0;
background: #b0b0b0;
justify-content: space-around;
}
.buyButtonDisable .title{
position: absolute;
color: white;
font-size: 34rpx;
line-height: 50rpx;
width: 100%;
text-align: center;
height: 70rpx;
bottom: 0;
}
.seperatorLine {
/*position: absolute;*/
display: flex;
width:100%;
/*margin: 30rpx;*/
height:1rpx;
background:#e0e0e0;
}
.reduceNumberBtn {
width: 70rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
border-right: solid 2rpx #e0e0e0;
}
.addNumberBtn {
width: 70rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
border-left: solid 2rpx #e0e0e0;
}
.buyNumberText{
font-family: PingFang-SC;
font-size: 28rpx;
text-align: center;
color: #444444;
width: 94rpx;
}
.reduceImage {
width: 24rpx;
height: 4rpx;
}
.addImage {
width: 24rpx;
height: 24rpx;
}
.soldSoonOut {
font-size: 28rpx;
color: #d0021b;
margin-left: 20rpx;
}
... ...
... ... @@ -33,13 +33,19 @@
"list": []
},
"miniprogram": {
"current": 0,
"current": 1,
"list": [
{
"id": 0,
"name": "首页入口",
"pathName": "pages/index/index",
"query": "from=开发调试"
},
{
"id": 1,
"name": "情详页",
"pathName": "pages/product/detail/detail",
"query": ""
}
]
}
... ...
... ... @@ -60,7 +60,6 @@ global.router = {
}
// 跳转类型
let jumpFn = jump[type] || rule.type || jump.navigateTo;
return jumpFn(rule.path, qs);
... ...
import wx from '../utils/wx';
import {stringify} from '../vendors/query-stringify';
import {
stringify
} from '../vendors/query-stringify';
const appData = {
yohostore: {
... ...
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 回调函数');
}
}
};
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: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="{{ 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:10;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:11;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}
\ 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');
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:10;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:11;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 .4em;font-size:20px;border-radius:.8em;background:#f44;color:#fff;text-align:center;white-space:nowrap;transform:translateX(50%) scale(.5);transform-origin:center;z-index:10;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(.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:.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 .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,.1) rgba(0,0,0,.1) rgba(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(.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(.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(.71,.71,-.71,.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 .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,.6);transition:.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(.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(.71,.71,-.71,.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(.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(.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:1}.zan-loadmore--nomore .zan-loadmore__tips{position:relative;top:-11px;background:#f9f9f9;padding:0 6px;z-index:1}.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(.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:10;background:rgba(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 .4s ease;z-index:11;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:10}.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:2;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:1}.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:1}.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,.1),0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05);transition:transform .35s cubic-bezier(.45,1,.4,1);z-index:2}.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 .35s cubic-bezier(.45,1,.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:.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 .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:2}.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(.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,.7);color:#fff;font-size:14px;width:60%;line-height:1.5em;margin:0 auto;box-sizing:border-box;padding:10px;text-align:center;border-radius:4px;z-index:100}.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:110;transition:all .4s ease}.zan-toptips--show{-webkit-transform:translateZ(0) translateY(0)}
\ No newline at end of file
... ...