通过淘宝API接口获取SKU标题、SKUID、SKU价格、总库存以及各SKU库存

本帖只展示部分代码及接口 需了解更多或开发系统请移步注册测试:
http://console.open.onebound.cn/console/?i=lucy

在这里插入图片描述
Result Object:

{
“item”: {
“apiStack”: [
{
“name”: “esi”,
“value”: “{“global”:{“data”:{“priceSectionData”:{“price”:{“priceText”:“24.9-38.9”,“priceTitle”:”\u65b0\u5e74\u4fc3\u9500",“newLine”:“false”,“priceType”:“origin_price”},“priceType”:“line_price”,“extraPrice”:{“priceMoney”:“2580”,“priceText”:“25.8”,“priceTitle”:“\u4ef7\u683c”,“priceColor”:“#999999”,“lineThrough”:“true”,“priceTail”:“\u8d77”,“newLine”:“false”,“priceType”:“line_price”},“promotion”:{“entranceTip”:“\u9886\u5238”,“items”:[{“textColor”:“#FD5F20”,“content”:“\u6dd8\u91d1\u5e01\u53ef\u62b50.49\u5143\u8d77”,“type”:“default”,“couponType”:“Taojinbi”,“bgImage”:“https:\/\/gw.alicdn.com\/tfs\/TB1.dqZSgHqK1RjSZJnXXbNLpXa-40-40.png”,“scontent”:“\u6dd8\u91d1\u5e01\u53ef\u62b50.49\u5143\u8d77”,“sbgImage”:“https:\/\/gw.alicdn.com\/tfs\/TB12R2Oerj1gK0jSZFuXXcrHpXa-302-80.png”},{“textColor”:“#FD5F20”,“content”:“\u5e97\u94fa\u5238\u6ee139\u51cf2”,“type”:“default”,“couponType”:“ShopCoupon”,“bgImage”:“https:\/\/gw.alicdn.com\/tfs\/TB1.dqZSgHqK1RjSZJnXXbNLpXa-40-40.png”,“startTime”:“2022-01-18 00:00:00”,“endTime”:“2022-03-17 23:59:59”,“scontent”:“\u6ee139\u51cf2”,“sbgImage”:“https:\/\/gw.alicdn.com\/tfs\/TB1k50Yj4D1gK0jSZFsXXbldVXa-280-40.png”,“stitle”:“\u5e97\u94fa\u5238”}],“entranceUrl”:“https:\/\/market.m.taobao.com\/app\/detail-project\/detail-pages\/pages\/quan2020?wh_weex=true”,“promotionStyle”:“false”}},“skuCore”:{“sku2info”:{“0”:{“price”:{“priceMoney”:“2490”,“priceText”:“24.9-38.9”,“type”:“1”},“quantity”:“16450”,“moreQuantity”:“false”},“3144644292458”:{“price”:{“priceMoney”:“2490”,“priceText”:“24.9”,“type”:“1”},“quantity”:“3388”,“moreQuantity”:“false”,“logisticsTime”:“\u4ed8\u6b3e\u540e25\u5929\u5185\u53d1\u8d27”},“3166598625985”:{“price”:{“priceMoney”:“3890”,“priceText”:“38.9”,“type”:“1”},“quantity”:“9387”,“moreQuantity”:“false”,“logisticsTime”:“\u4ed8\u6b3e\u540e25\u5929\u5185\u53d1\u8d27”},“3166598625984”:{“price”:{“priceMoney”:“3890”,“priceText”:“38.9”,“type”:“1”},“quantity”:“3675”,“moreQuantity”:“false”,“logisticsTime”:“\u4ed8\u6b3e\u540e25\u5929\u5185\u53d1\u8d27”}},“skuItem”:{“location”:“\u6c5f\u82cf\u82cf\u5dde”,“extraProm”:[{“text”:“\u6dd8\u91d1\u5e01\u53ef\u62b50.49\u5143\u8d77”}]},“abSwitch”:{“enableShowPic”:“true”,“enableShowProtection”:“true”},“atmosphere”:[]},“tradeConsumerProtection”:{“tradeConsumerService”:{“service”:{“items”:[{“title”:“\u4ed8\u6b3e\u540e25\u5929\u5185\u53d1\u8d27”},{“icon”:“\/\/gw.alicdn.com\/tfs\/TB1O4sFQpXXXXb3apXXXXXXXXXX-200-200.png”,“title”:“8\u5929\u9000\u8d27”,“desc”:“8\u5929\u9000\u8d27\uff0c\u9000\u8d27\u90ae\u8d39\u4e70\u5bb6\u627f\u62c5”},{“icon”:“\/\/gw.alicdn.com\/tfs\/TB1O4sFQpXXXXb3apXXXXXXXXXX-200-200.png”,“title”:“1\u6b21\u7834\u635f\u8865\u5bc4”,“desc”:“\u5546\u54c1\u5728\u8fd0\u8f93\u9014\u4e2d\u51fa\u73b0\u7834\u635f\u7684\uff0c\u6d88\u8d39\u8005\u53ef\u5411\u5356\u5bb6\u63d0\u51fa\u8865\u5bc4\u7533\u8bf7\uff0c\u53ef\u8865\u5bc41\u6b21\uff0c\u8865\u5bc4\u90ae\u8d39\u7531\u4e70\u5bb6\u627f\u62c5”},{“icon”:“\/\/gw.alicdn.com\/tfs\/TB1O4sFQpXXXXb3apXXXXXXXXXX-200-200.png”,“title”:“\u516c\u76ca\u5b9d\u8d1d”,“desc”:“\u8d2d\u4e70\u8be5\u5546\u54c1\uff0c\u6bcf\u7b14\u6210\u4ea4\u90fd\u4f1a\u6709\u76f8\u5e94\u91d1\u989d\u6350\u8d60\u7ed9\u516c\u76ca\u3002\u611f\u8c22\u60a8\u7684\u652f\u6301\uff0c\u613f\u516c\u76ca\u7684\u5feb\u4e50\u4f34\u968f\u60a8\u6bcf\u4e00\u5929\u3002”}],“icon”:“”,“title”:“\u57fa\u7840\u670d\u52a1”},“nonService”:{“items”:[{“icon”:“\/\/gw.alicdn.com\/tfs\/TB1O4sFQpXXXXb3apXXXXXXXXXX-200-200.png”,“title”:“\u8682\u8681\u82b1\u5457”},{“icon”:“\/\/gw.alicdn.com\/tfs\/TB1O4sFQpXXXXb3apXXXXXXXXXX-200-200.png”,“title”:“\u96c6\u5206\u5b9d”},{“icon”:“\/\/gw.alicdn.com\/tfs\/TB1O4sFQpXXXXb3apXXXXXXXXXX-200-200.png”,“title”:“\u652f\u4ed8\u5b9d\u652f\u4ed8”}],“title”:“\u5176\u4ed6”}},“passValue”:“all”,“url”:“https:\/\/h5.m.taobao.com\/app\/detailsubpage\/consumer\/index.js”,“type”:“0”},“vertical”:{“interactionBar”:{“kapContain”:{“suffix”:“\u70b9\u8d5e”,“count”:“0”,“likeList”:“https:\/\/pages.tmall.com\/wow\/malldetail\/act\/detail-likelist?wh_biz=tm&wh_weex=true&itemId=520813250866”,“dashangRecommendInfo”:{“clickUrl”:“https:\/\/market.m.taobao.com\/app\/mtb\/ytq\/pages\/item-detail-young-tag?wh_weex=true”,“tmallBangdanItemTag”:“1712770”,“hasRecommendIcon”:“https:\/\/img.alicdn.com\/imgextra\/i2\/O1CN01gSAZ4R1HBnqrbCoiP_!!6000000000720-2-tps-63-63.png”,“taobaoBiguangItemTag”:“2088066”,“recommendIcon”:“https:\/\/img.alicdn.com\/imgextra\/i3\/O1CN01nQpy011dxovD9xGs8_!!6000000003803-2-tps-63-63.png”,“interactBarShare”:{“leftIcon”:“https:\/\/gw.alicdn.com\/tfs\/TB1kSgxKQY2gK0jSZFgXXc5OFXa-36-42.png?getAvatar=avatar”,“tipIcon”:“https:\/\/img.alicdn.com\/tfs\/TB1Hyggakcx_u4jSZFlXXXnUFXa-192-46.png?getAvatar=avatar”,“tipText2”:" “},“shopHotSell”:{“grayPercentage”:“0”,“secGrayPercentage”:“1000”}},“kaplist”:[{“selected”:“false”,“icon”:“https:\/\/gw.alicdn.com\/tfs\/TB1rGtkvpzqK1RjSZFvXXcB7VXa-90-90.png?getAvatar=avatar”,“selectIcon”:“https:\/\/gw.alicdn.com\/tfs\/TB193NrvAzoK1RjSZFlXXai4VXa-90-90.png?getAvatar=avatar”,“listIcon”:“https:\/\/gw.alicdn.com\/tfs\/TB1eHavyAvoK1RjSZFDXXXY3pXa-90-90.png”,“title”:”\u8d5e",“key”:“thumbUp”},{“selected”:“false”,“icon”:“https:\/\/gw.alicdn.com\/tfs\/TB10dFlvCzqK1RjSZFHXXb3CpXa-90-90.png?getAvatar=avatar”,“selectIcon”:“https:\/\/gw.alicdn.com\/tfs\/TB1H8FkvwTqK1RjSZPhXXXfOFXa-90-90.png?getAvatar=avatar”,“listIcon”:“https:\/\/gw.alicdn.com\/tfs\/TB1H8FkvwTqK1RjSZPhXXXfOFXa-90-90.png?getAvatar=avatar”,“title”:“\u4e70\u4e70\u4e70”,“key”:“buy”},{“selected”:“false”,“icon”:“https:\/\/gw.alicdn.com\/tfs\/TB1pct8xmzqK1RjSZPxXXc4tVXa-90-90.png?getAvatar=avatar”,“selectIcon”:“https:\/\/gw.alicdn.com\/tfs\/TB1kTewxhnaK1RjSZFBXXcW7VXa-90-90.png?getAvatar=avatar”,“listIcon”:“https:\/\/gw.alicdn.com\/tfs\/TB1pct8xmzqK1RjSZPxXXc4tVXa-90-90.png?getAvatar=avatar”,“title”:“\u79cd\u4e2a\u8349”,“key”:“longFor”},{“selected”:“false”,“icon”:“https:\/\/gw.alicdn.com\/tfs\/TB10kVkvCzqK1RjSZFjXXblCFXa-90-90.png?getAvatar=avatar”,“selectIcon”:“https:\/\/gw.alicdn.com\/tfs\/TB12pJnvAvoK1RjSZFNXXcxMVXa-90-90.png?getAvatar=avatar”,“listIcon”:“https:\/\/gw.alicdn.com\/tfs\/TB12pJnvAvoK1RjSZFNXXcxMVXa-90-90.png?getAvatar=avatar”,“title”:“\u9707\u60ca\u4e86”,“key”:“shock”}]},“bubbles”:[{“title”:“\u5e2e\u6211\u9009”,“icon”:“https:\/\/gw.alicdn.com\/tfs\/TB1NL9dvMDqK1RjSZSyXXaxEVXa-90-90.png?getAvatar=avatar”,“action”:“https:\/\/market.m.taobao.com\/app\/bwx\/bwx\/pages\/create?wh_weex=true&itemId=520813250866&itemPic=i4\/2596264565\/O1CN01mbmuAB1jaogMUWhv8_!!2596264565.jpg”}]},“askAll”:{“askText”:“\u53ef\u4ee5\u5e26\u4e0a\u706b\u8f66\u5417\uff1f”,“askIcon”:“https:\/\/img.alicdn.com\/tps\/TB1tVU6PpXXXXXFaXXXXXXXXXXX-102-60.png”,“answerText”:“\u6ca1\u5e26\u8fc7 \u5e94\u8be5\u6ca1\u95ee\u9898”,“answerIcon”:“https:\/\/img.alicdn.com\/tps\/TB1Z7c2LXXXXXXmaXXXXXXXXXXX-132-42.png”,“linkUrl”:“https:\/\/web.m.taobao.com\/app\/mtb\/ask-everyone\/list?pha=true&disableNav=YES&refId=520813250866”,“title”:“\u95ee\u5927\u5bb6(5)”,“questNum”:“5”,“showNum”:“2”,“modelList”:[{“askText”:“\u53ef\u4ee5\u5e26\u4e0a\u706b\u8f66\u5417\uff1f”,“answerCountText”:“3\u4e2a\u56de\u7b54”,“firstAnswer”:“\u6ca1\u5e26\u8fc7 \u5e94\u8be5\u6ca1\u95ee\u9898”},{“askText”:“\u4f1a\u6536\u6389\u7684”,“answerCountText”:“2\u4e2a\u56de\u7b54”,“firstAnswer”:“\u5c0f\u5200\u4e0d\u9519”}],“model4XList”:[{“askText”:“\u53ef\u4ee5\u5e26\u4e0a\u706b\u8f66\u5417\uff1f”,“answerCountText”:“3\u4e2a\u56de\u7b54”,“askIcon”:“\/\/gw.alicdn.com\/tfs\/TB1lneilZLJ8KJjy0FnXXcFDpXa-36-36.png”,“askTextColor”:“#162B36”},{“askText”:“\u4f1a\u6536\u6389\u7684”,“answerCountText”:“2\u4e2a\u56de\u7b54”,“askIcon”:“\/\/gw.alicdn.com\/tfs\/TB1lneilZLJ8KJjy0FnXXcFDpXa-36-36.png”,“askTextColor”:“#162B36”}]},“shopEntrance”:{“url”:“https:\/\/market.m.taobao.com\/app\/detail-project\/detail-pages\/pages\/enter-shop2020?wh_weex=true&url=%2F%2Fshop.m.taobao.com%2Fshop%2Fshop_index.htm%3Fuser_id%3D2596264565%26item_id%3D520813250866%26shop_navi%3Dallitems&buyerId=2213122908775&itemId=520813250866&shopId=127203758&sellerId=2596264565&iconUrl=https%3A%2F%2Fimg.alicdn.com%2Fimgextra%2Fi4%2FO1CN015NPkKZ1J48RxnWRwr_%21%216000000000974-2-tps-264-132.png&isCustomUrl=false&hadClose=false”,“text”:“\u5e97\u94fa\u53cc\u5341\u4e00”}},“componentsVO”:{“askAllVO”:{“events”:{“itemClick”:[{“type”:“openUrl”,“fields”:{“url”:“KaTeX parse error: Can't use function '\"' in math mode at position 26: …askAll.linkUrl}\̲"̲}},{\"type\":\"…{vertical.askAll.model4XList}”}},“bottomBarVO”:{“events”:{“rightClick”:[{“type”:“addToCart”},{“type”:“userTrack”,“fields”:{“page”:“Page_Detail”,“eventId”:“2101”,“arg1”:“Page_Detail_Button-AddToCart”,“args”:{“spm”:“a2141.7631564.addtocart”}}}],“rightClick1”:[{“type”:“buyNow”},{“type”:“userTrack”,“fields”:{“page”:“

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
因为demo太大请移步github: https://github.com/shabake/GHAlibabaSpecificationSelectionDemoFeatures初始化确定按钮颜色置灰,不可点击。当 spu 颜色数量大于1个时,显示颜色导航,底部列表可以滚动,反之隐藏,布局自适应。如果有颜色导航,输入或点击 + - 按钮,颜色导航对应的颜色数字同步变化,如果数量大于99显示99+;如果数量小于1不显示。点击> < 底部列表和颜色导航同步滚动。输入或点击 + - 按钮,当按 +到最大库存 + 置灰;当按 - 到0 - 置灰。点击输入框。键盘弹出,规格选择器 上移;点击完成,键盘收回,规格选择器 回到原位。点击颜色导航条的颜色标签,高亮被点击颜色标签并滚动到屏幕中心,底部列表滑动到对应位置,同时切换 sku 图片。当输入或者点击数量大于1,确定按钮可点击,颜色高亮。当库存不足的时候,输入框下显示库存不足标签。输入框不可输入 0 ,. 。列表行自适应高度,布局中心对齐。点击背景遮罩或者 x ,收回弹窗。动态输入监听,同步显示,根据输入判定确定状态。数据模型重新组装。适配IPhoneX及以上系列。使用demo 数据是从接口获取,需要连接wifi或蜂窝网络。数据结构 (点击箭头展开/收起)GHSpecificationSelectionTitleModel 颜色导航器模型 GHSpecificationSelectionModel sku 模型 GHSpecificationSelectionImageModel 图片模型初始化对象 GHAlibabaSpecificationSelection继承 GHPopView ,GHPopView 已经封装好弹出/收回动画,外部无需重复处理。- (void)show;- (void)dismiss传入数据/*** 数据源* @param skuList 装skuModel数组* @param colors 颜色数组 非必传,如果为空,不显示颜色导航* @param sectePrice 价格区间字典*/[self.alibabaSpecificationSelection setSkuList:specifications colors:colors sectePrice:sectePrice];​取出用户选择_alibabaSpecificationSelection.getDataBlock = ^(NSArray * _Nonnull dataArray) {NSMutableString *string = [NSMutableString string];for (NSDictionary *dict in dataArray) {[string appendFormat:@"颜色:%@ 数量:%@ id:%@",dict[@"color"],dict[@"skuNum"],dict[@"skuId"]];}KAlert(@"用户选择的数据", string);};重置数据在这个方法内部清除所有count。底部scrollview 滚动到初始化状态。底部确定按钮初始化状态。scrollTitles初始化。- (void) resetData;与我联系[email protected]
好的,下面是一个简单的多SKU案例,使用Vue框架实现: 首先,我们需要定义一个商品对象,包含多个SKU选项以及价格等信息: ```javascript { id: 1, name: '商品名称', skuList: [ { id: 101, name: '颜色', options: [ { id: 10101, name: '红色' }, { id: 10102, name: '蓝色' }, { id: 10103, name: '绿色' } ] }, { id: 102, name: '尺码', options: [ { id: 10201, name: 'S' }, { id: 10202, name: 'M' }, { id: 10203, name: 'L' }, { id: 10204, name: 'XL' } ] } ], skuData: [ { skuId: '10101-10201', price: 100, stock: 10 }, { skuId: '10101-10202', price: 105, stock: 5 }, { skuId: '10101-10203', price: 110, stock: 3 }, { skuId: '10101-10204', price: 120, stock: 0 }, { skuId: '10102-10201', price: 95, stock: 8 }, { skuId: '10102-10202', price: 100, stock: 2 }, { skuId: '10102-10203', price: 105, stock: 0 }, { skuId: '10102-10204', price: 115, stock: 6 }, { skuId: '10103-10201', price: 90, stock: 4 }, { skuId: '10103-10202', price: 95, stock: 0 }, { skuId: '10103-10203', price: 100, stock: 6 }, { skuId: '10103-10204', price: 110, stock: 3 } ] } ``` 然后,我们可以在Vue组件中使用v-for指令循环渲染SKU选项: ```html <template> <div> <h2>{{ product.name }}</h2> <ul> <li v-for="sku in product.skuList" :key="sku.id"> {{ sku.name }}: <select v-model="selected[sku.id]"> <option v-for="option in sku.options" :key="option.id" :value="option.id"> {{ option.name }} </option> </select> </li> </ul> <p>价格:{{ price }}</p> <p>库存:{{ stock }}</p> </div> </template> ``` 在组件的data选项中,我们定义了一个selected对象,用于保存用户选择的SKU选项。在计算属性中,我们根据用户选择的SKU选项计算出对应的价格库存: ```javascript export default { data () { return { product: { // 商品对象 }, selected: { // 用户选择的SKU选项 } } }, computed: { // 计算属性 skuId () { // 根据用户选择的SKU选项计算出对应的skuId const ids = [] for (const sku of this.product.skuList) { ids.push(this.selected[sku.id]) } return ids.join('-') }, price () { // 根据skuId获取对应的价格 const sku = this.product.skuData.find(sku => sku.skuId === this.skuId) return sku ? sku.price : 0 }, stock () { // 根据skuId获取对应的库存 const sku = this.product.skuData.find(sku => sku.skuId === this.skuId) return sku ? sku.stock : 0 } } } ``` 最后,我们可以在模板中显示计算属性的值,实现SKU的选择和价格库存的实时更新: ```html <p>价格:{{ price }}</p> <p>库存:{{ stock }}</p> ``` 完整代码如下: ```html <template> <div> <h2>{{ product.name }}</h2> <ul> <li v-for="sku in product.skuList" :key="sku.id"> {{ sku.name }}: <select v-model="selected[sku.id]"> <option v-for="option in sku.options" :key="option.id" :value="option.id"> {{ option.name }} </option> </select> </li> </ul> <p>价格:{{ price }}</p> <p>库存:{{ stock }}</p> </div> </template> <script> export default { data () { return { product: { id: 1, name: '商品名称', skuList: [ { id: 101, name: '颜色', options: [ { id: 10101, name: '红色' }, { id: 10102, name: '蓝色' }, { id: 10103, name: '绿色' } ] }, { id: 102, name: '尺码', options: [ { id: 10201, name: 'S' }, { id: 10202, name: 'M' }, { id: 10203, name: 'L' }, { id: 10204, name: 'XL' } ] } ], skuData: [ { skuId: '10101-10201', price: 100, stock: 10 }, { skuId: '10101-10202', price: 105, stock: 5 }, { skuId: '10101-10203', price: 110, stock: 3 }, { skuId: '10101-10204', price: 120, stock: 0 }, { skuId: '10102-10201', price: 95, stock: 8 }, { skuId: '10102-10202', price: 100, stock: 2 }, { skuId: '10102-10203', price: 105, stock: 0 }, { skuId: '10102-10204', price: 115, stock: 6 }, { skuId: '10103-10201', price: 90, stock: 4 }, { skuId: '10103-10202', price: 95, stock: 0 }, { skuId: '10103-10203', price: 100, stock: 6 }, { skuId: '10103-10204', price: 110, stock: 3 } ] }, selected: {} } }, computed: { skuId () { const ids = [] for (const sku of this.product.skuList) { ids.push(this.selected[sku.id]) } return ids.join('-') }, price () { const sku = this.product.skuData.find(sku => sku.skuId === this.skuId) return sku ? sku.price : 0 }, stock () { const sku = this.product.skuData.find(sku => sku.skuId === this.skuId) return sku ? sku.stock : 0 } } } </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值