fe / yoho-js-sdk · Commits

Go to a project

Authored by 沈志敏
Commit 11ecdd6cb1afef613c6c3daac3f523946224913a 1 parent de07541b

update readme

Inline Side-by-side
Showing 4 changed files with 127 additions and 29 deletions
... ... @@ -3,19 +3,120 @@
## 封装实现的功能
### 1. 用户相关
1. 获取用户的信息和状态
2. 登录
3. 收藏商品
1. 获取用户的信息和状态
2. 验证登录
3. 收藏商品
### 2. 促销相关
1. 优惠券领取
2. YOHO币领取
1. 优惠券领取
2. YOHO币领取
### 3. 分享相关
1. 分享到微信好友
2. 分享到朋友圈
3. 记录和上报分享信息
1. 分享到微信好友
2. 分享到朋友圈
### 4. 个性化展示
1. 个性化数据页面内元素标记
2. 获取数据绑定到界面
\ No newline at end of file
1. 个性化数据页面内元素标记
2. 获取数据绑定到界面
## 使用说明
1. 本插件jssdk 依赖于jQuery, 所以请先加载 jQuery;
2. 然后加载本插件jssdk；
## 功能说明
1. 获取用户信息和状态：
app： url中的uid 来判断用户是否登录
浏览器：jsonp调用接口来判断用户是否登录
2. 验证登录：auth()
若用户未登录，则会将所以的 `<a class="auth">`标签的`href`属性 替换为 登录url
3. 收藏商品：favout(skn)
收藏传入`skn`所相对应的商品
4. 优惠券领取:
给 <a> 标签加上`yoho-conpon`类名，并加上 `data-token` 属性，值为后台生成的 token。
示例：
```html
<a class="yoho-conpon" href="javascript:;" data-token="29-6ea9ab1baa0efb9e19094440c317e21b">
<h1>领券按钮</h1>
</a>
```
5. 有货币领取：
给 <a> 标签加上`yoho-coin`类名，并加上 `data-token` 属性，值为后台生成的 token。
示例：
```html
<a class="yoho-coin" href="javascript:;" data-token="22e369853df766fa44e1ed0ff613f563bd">
<h1>有货币领取按钮</h1>
</a>
```
6. 分享相关：
如果需要定制分享参数时，通过<input type="hidden">方式自定义
示例：
```html
<input id="shareLink" type="hidden" value="http://feature.yoho.cn/1228/1228MEMBER/index.html">
<input id="shareDesc" type="hidden" value="VIP专场劲爆开启->VIP独享4重福利，超值冬品限时5折，更有专享年终福利券等你抢！">
<input id="shareImg" type="hidden" value="http://feature.yoho.cn/public/shareimg/1228member.png">
<input id="shareTitle" type="hidden" value="【YOHO!BUY有货】12月28日潮集会员日">
```
7. 个性化推荐：
7.1. 定义商品图片显示的宽高
示例：value的值格式: "宽x高"
```html
<input id="imgwh" type="hidden" value="450x500">
```
7.2. 定义商品模版
示例：
```html
<div class="feature-product-info">
<a class="product-detail" href='http://item.yohobuy.com/product/pro_330189_424569/PUMADUPLEXEVOPARTYDiBangXie36146103.html?from=search-s-51184789_1_1&openby:yohobuy={"action":"go.productDetail","params":{"product_id":"330189","from":"search-s-51184789_1_1"}}'>
<div>
<img class="product-detail-img" src="http://img10.static.yhbimg.com/goodsimg/2016/11/21/12/01c6529b3ecdc8c6085a48446f331fae4c.jpg?imageMogr2/thumbnail/450x500/extent/450x500/background/d2hpdGU=/position/center/quality/60">
</div>
<div class="product-detail-text">
<div class="name">
<span class="product-name">双贴袋连帽棉夹克【两色可选】</span>
</div>
<div class="price">
<span class="sale-price">¥589.00</span>
<span class="market-price">¥779.00</span>
</div>
</div>
</a>
<a class="product-brand" href="http://m.yohobuy.com/product/index/brand?shop_id=1540">
<span class="brand-name">Life After Life</span>
<span class="brand-go">进入店铺</span>
</a>
</div>
```
详细说明：
以下class名 需要固定不变，引入的 jssdk 会通过class名 来做动态替换
```
.feature-product-info： 标示一个商品item
.brand-name： 店铺名称（如果不需要显示店铺，可不需要）
a.product-brand： 进入店铺的url （如果不需要显示店铺，可不需要）
a.product-detail： 进入商品详情页 url
.product-detail-img： 商品图片
.product-name： 商品名称
.sale-price： 销售价格
.market-price： 市场价格
```
\ No newline at end of file
... ...
... ... @@ -12,9 +12,9 @@ $(function() {
openapp.init();
user.init().then(uid => {
user.auth(uid); // 权限验证
individuation.init(uid); // 个性化推荐
promotion.init(uid); // 促销
user.auth(); // 权限验证
share.init(); // 分享
utils.init();
});
... ... @@ -22,7 +22,5 @@ $(function() {
export default {
auth: user.auth,
favout: user.favout,
getCoupon: promotion.getCoupon,
getCoin: promotion.getCoin
favout: user.favout
};
\ No newline at end of file
... ...
... ... @@ -171,7 +171,5 @@ export default {
init(uid) {
_initCoin(uid); // 初始化有货币
_initCoupon(uid); // 初始化优惠券
},
getCoin: _getCoin,
getCoupon: _getCoupon
}
};
\ No newline at end of file
... ...
... ... @@ -12,41 +12,42 @@ let _noLoginUrl = function() {
};
export default {
uid: '',
noLoginUrl: _noLoginUrl,
init() {
let uid = 14459668;
//let uid;
let _this = this;
if (!utils.isApp()) {
// 获取当前登录用户信息
return jsonp({
url: '//m.yohobuy.com/passport/login/user?callback=?'
}).then(function(res){
if (res.code === 200) {
uid = res.data;
_this.uid = res.data;
}
return $.Deferred().resolve(uid);
return $.Deferred().resolve(_this.uid);
}, function() {
return $.Deferred().resolve(uid);
return $.Deferred().resolve(_this.uid);
});
} else {
uid = utils.queryString().uid;
return $.Deferred().resolve(uid);
_this.uid = utils.queryString().uid;
return $.Deferred().resolve(_this.uid);
}
},
auth(uid) {
if (!uid) {
auth() {
if (!this.uid) {
let noLoginUrl = _noLoginUrl();
$('a.auth').attr('href', noLoginUrl);
}
},
favout(skn, uid) {
if (!skn || !uid) {
favout(skn) {
if (!skn || !this.uid) {
return;
}
jsonp({
url: `//service.yoho.cn/activity/favorite/addFavorite?productSkn=${skn}&uid=${uid}&callback=?`,
url: `//service.yoho.cn/activity/favorite/addFavorite?productSkn=${skn}&uid=${this.uid}&callback=?`,
}).then(function(res) {
if (res.code === 200) {
utils.showTip({
... ...