Skip to content

vk-unicloud-router
vk-unicloud-router

vk-uni / vk-unicloud-router
10 个月 前同步成功

通知 0
Star 0
Fork 0
vk-unicloud-router
vk-unicloud-router

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 a23ab7fb 编写于 作者: VK1688's avatar VK1688
浏览文件
操作

1.3.8 全网最强商品SKU选择器组件

上级 ca8bec29
展开全部 隐藏空白更改
内联 并排
Showing with 530 addition and 536 deletion
README.md
浏览文件 @ a23ab7fb
此差异已折叠。
README/1.3.8.md 0 → 100644
浏览文件 @ a23ab7fb
### uniCloud 云函数路由研究群:22466457 如有问题或建议可以在群内讨论。
##### gitee公共仓库地址：https://gitee.com/vk-uni/vk-uni-cloud-router.git
### 更新内容
#### 1、【新增】电商商品SKU选择器组件（打造uni插件市场功能最全的SKU选择器组件）
#### [点击查看『商品SKU选择器组件』文档](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/%E6%96%B0%20-%20%E5%95%86%E5%93%81SKU%E9%80%89%E6%8B%A9%E5%99%A8%E7%BB%84%E4%BB%B6?sort_id=2912199)
#### 2、【优化】文档优化，详细文档地址（持续优化中）[点击查看插件文档](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/%E5%AF%B9%E5%BC%80%E5%8F%91%E8%80%85%E7%9A%84%E4%BB%B7%E5%80%BC?sort_id=2912162)
![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-vk-cloud-router-test/23023100-ffae-11ea-b997-9918a5dda011.png)
### 你也可以在评论区发布留言交流心得。
\ No newline at end of file
cloudfunctions-aliyun/common/config/index.js
浏览文件 @ a23ab7fb
......@@ -50,26 +50,16 @@ module.exports = {
"service": {
// 邮箱发送服务
"email": {
// qq邮箱参数配置
// "qq": {
// "host": "smtp.qq.com",
// "port": 465,
// "secure": true,
// "auth": {
// "user": "你的邮箱@qq.com",
// "pass": "邮箱授权码"
// }
// },
// qq邮箱参数配置
"qq": {
"host": "smtp.qq.com",
"port": 465,
"secure": true,
"auth": {
"user": "2435536373@qq.com",
"pass": "pbdpbfdibcxjdhjh"
"user": "你的邮箱@qq.com",
"pass": "邮箱授权码"
}
}
},
},
// 短信服务
"sms": {
......
cloudfunctions-aliyun/router/service/test/pub/findGoodsInfo.js 0 → 100644
浏览文件 @ a23ab7fb
module.exports = {
/**
* 此函数名称
* @url test/pub/findGoodsInfo 前端调用的url参数地址
* @description 此函数描述
* @params {Object} data 请求参数
* @params {String} uniIdToken 用户token
* @params {String} userInfo 当前登录用户信息(同理,是可信任的)(只有kh函数才带此参数)
* @params {Object} util 公共工具包
* @params {Object} originalParam 原始请求参数(包含了原始event和context)
* data 请求参数 说明
* @params {String} uid 当前登录用户id,若用户已登录且token有效,则data中会带uid参数
* (此参数是后端过滤器通过token获取并添加到data中的,是可信任的)(只有kh函数才带此参数)
* res 返回参数说明
* @params {Number} code 错误码，0表示成功
* @params {String} msg 详细信息
*/
main: async (event) => {
let { data = {}, userInfo, util, originalParam } = event;
let { uniID, config, pubFun, vk , db, _ } = util;
let { uid } = data;
let res = { code : 0, msg : '' };
// 业务逻辑开始-----------------------------------------------------------
// 可写与数据库的交互逻辑等等
let { goods_id } = data;
/**
* 这里本来是需要从数据库中获取的,这里简化一下,直接返回数据了
* 正常业务中,是需要连表查询的,分别是订单表和SKU表 双表连接查询出最终返回给前端的数据
*/
let goodsDB = [
{
"_id":"001",
"name": "iphone11",
"goods_thumb":"https://img14.360buyimg.com/n0/jfs/t1/59022/28/10293/141808/5d78088fEf6e7862d/68836f52ffaaad96.jpg",
"sku_list": [
{
"_id": "001",
"goods_id": "001",
"goods_name": "iphone11",
"image": "https://img14.360buyimg.com/n0/jfs/t1/79668/22/9987/159271/5d780915Ebf9bf3f4/6a1b2703a9ed8737.jpg",
"price": 19800,
"sku_name": "红色,128G,公开版",
"sku_name_arr": ["红色", "128G", "公开版"],
"stock": 100
},
{
"_id": "002",
"goods_id": "001",
"goods_name": "iphone11",
"image": "https://img14.360buyimg.com/n0/jfs/t1/52252/35/10516/124064/5d7808e0E46202391/7100f3733a1c1f00.jpg",
"price": 9800,
"sku_name": "白色,256G,公开版",
"sku_name_arr": ["白色", "256G","公开版"],
"stock": 100
},
{
"_id": "003",
"goods_id": "001",
"goods_name": "iphone11",
"image": "https://img14.360buyimg.com/n0/jfs/t1/79668/22/9987/159271/5d780915Ebf9bf3f4/6a1b2703a9ed8737.jpg",
"price": 19800,
"sku_name": "红色,256G,公开版",
"sku_name_arr": ["红色","256G","公开版"],
"stock": 100
}
],
"spec_list": [
{
"list": [
{
"name": "红色"
},
{
"name": "黑色"
},
{
"name": "白色"
}
],
"name": "颜色"
},
{
"list": [
{
"name": "128G"
},
{
"name": "256G"
}
],
"name": "内存"
},
{
"list": [
{
"name": "公开版"
},
{
"name": "非公开版"
}
],
"name": "版本"
}
]
},
{
"_id":"002",
"name": "迪奥香水",
"goods_thumb":"https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
"sku_list": [
{
"_id": "004",
"goods_id": "002",
"goods_name": "迪奥香水",
"image": "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
"price": 19800,
"sku_name": "50ml/瓶",
"sku_name_arr": ["50ml/瓶"],
"stock": 100
},
{
"_id": "005",
"goods_id": "002",
"goods_name": "迪奥香水",
"image": "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
"price": 9800,
"sku_name": "70ml/瓶",
"sku_name_arr": ["70ml/瓶"],
"stock": 100
}
],
"spec_list": [
{
"list": [
{
"name": "20ml/瓶"
},
{
"name": "50ml/瓶"
},
{
"name": "70ml/瓶"
}
],
"name": "规格"
}
]
},
{
"_id":"003",
"name": "迪奥香水",
"goods_thumb":"https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
"sku_list": [
{
"_id": "006",
"goods_id": "003",
"goods_name": "迪奥香水",
"image": "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
"price": 19800,
"sku_name": "默认",
"sku_name_arr": ["默认"],
"stock": 100
}
],
"spec_list": [
{
"list": [
{
"name": "默认"
}
],
"name": "默认"
}
]
},
{
"_id":"004",
"name": "迪奥香水",
"goods_thumb":"https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
"sku_list": [
{
"_id": "006",
"goods_id": "003",
"goods_name": "迪奥香水",
"image": "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
"price": 19800,
"sku_name": "默认",
"sku_name_arr": ["默认"],
"stock": 0
}
],
"spec_list": [
{
"list": [
{
"name": "默认"
}
],
"name": "默认"
}
]
}
];
res.goodsInfo = vk.pubfn.getListItem(goodsDB, "_id",goods_id);
// 业务逻辑结束-----------------------------------------------------------
return res;
}
}
\ No newline at end of file
main.js
浏览文件 @ a23ab7fb
......@@ -9,10 +9,12 @@ Vue.use(vk);
// 自定义云函数路由配置
Vue.prototype.vk.callFunctionUtil.setConfig({
// 云函数路由（主函数url化地址）
functionPath:"https://xxxxx.bspapp.com/http/router",
// 云函数路由（开发测试函数url化地址）
testFunctionPath:"https://xxxxx.bspapp.com/http/router-test",
functionNameToUrl:{
// 云函数路由（主函数url化地址）
"router":"https://bbdf976b-a6a6-42b2-9429-db232ee80f13.bspapp.com/http/router",
// 云函数路由（开发测试函数url化地址）
"router-test":"https://bbdf976b-a6a6-42b2-9429-db232ee80f13.bspapp.com/http/router-test"
}
});
// 自定义token拦截器
......
package-lock.json
浏览文件 @ a23ab7fb
......@@ -10,17 +10,17 @@
"integrity": "sha512-s2B2hN7Q5c/XbZya5ZIi5wPJikvgfcGsXkv/s91jr3pmrsAJD6bmJqunHPX6nTYjbivYa7H/xCEnG9qn+DPaHQ=="
},
"vk-unicloud-dynamic-components": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vk-unicloud-dynamic-components/-/vk-unicloud-dynamic-components-1.1.2.tgz",
"integrity": "sha512-FO4T2ESIJALmGYs6cuoWd+e25yCTtu+D2D50GknSgdN7WawPP7yyaWit6B/blHiT3j2Ay7vztXNqS4bUUu3sow=="
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/vk-unicloud-dynamic-components/-/vk-unicloud-dynamic-components-1.1.3.tgz",
"integrity": "sha512-BEnbq+CETn7Gfxyf3fOubjIqvAiofSOKw8gqmkh1wvCkDJ3y3C1/Uj8m5hUfUyyjAXNsLcOD4ycdFe2nrs7Z3A=="
},
"vk-unicloud-page": {
"version": "1.7.2",
"resolved": "https://registry.npmjs.org/vk-unicloud-page/-/vk-unicloud-page-1.7.2.tgz",
"integrity": "sha512-mzLuTiFH0KEcY3sNvBGk2QjNRwi7bu2GL4zTkFf7+ypCg8XcP2JyOgiiaYeRXlUAEQD7pYhySXiv/Tcli8VguA==",
"version": "1.7.3",
"resolved": "https://registry.npmjs.org/vk-unicloud-page/-/vk-unicloud-page-1.7.3.tgz",
"integrity": "sha512-CEvpOgZkzR0EykzWLIZ9mFSOteQ6/bsXLfZXPOZoWTEBtH9PtLLzyZJUMmHCF1YLPIt4OovJU3jqg4utTShq1g==",
"requires": {
"uview-ui": "~1.7.3",
"vk-unicloud-dynamic-components": "~1.1.2"
"vk-unicloud-dynamic-components": "~1.1.3"
}
}
}
......
package.json
浏览文件 @ a23ab7fb
......@@ -4,7 +4,7 @@
"description": "【开箱即用】vk-uniCloud-router - 云函数路由模式 - uniCloud开发框架 - 已集成uni-id",
"main": "main.js",
"dependencies": {
"vk-unicloud-page": "^1.7.2"
"vk-unicloud-page": "^1.7.3"
},
"devDependencies": {},
"scripts": {
......
pages.json
浏览文件 @ a23ab7fb
......@@ -86,7 +86,7 @@
{
"path": "components-dynamic/vk-u-goods-sku-popup/vk-u-goods-sku-popup",
"style": {
"navigationBarTitleText": "动态数据组件 - 商品SKU选择器"
"navigationBarTitleText": "商品SKU选择器组件"
}
},
{
......
pages_template/components-dynamic/index/index.vue
浏览文件 @ a23ab7fb
......@@ -49,6 +49,11 @@
path: '../vk-u-grid-button/vk-u-grid-button',
icon: 'grid',
title: 'vk-u-grid-button 图文导航',
},
{
path: '../vk-u-goods-sku-popup/vk-u-goods-sku-popup',
icon: 'swipeAction',
title: 'vk-u-goods-sku-popup 商品SKU组件',
}
]
}
......
pages_template/components-dynamic/vk-u-goods-sku-popup/vk-u-goods-sku-popup.vue
浏览文件 @ a23ab7fb
<template>
<view class="u-demo">
即将上线，敬请期待！
<u-button @click="sku_key = true">打开SKU组件</u-button>
<vk-u-goods-sku-popup
v-model="sku_key"
border-radius="20"
:custom-action="findGoodsInfo"
:mode="form.skuMode"
:buy-now-text="form.buyNowText"
:buy-now-color = "form.buyNowColor"
:buy-now-background-color="form.buyNowBackgroundColor"
:add-cart-text="form.addCartText"
:add-cart-color = "form.addCartColor"
:add-cart-background-color="form.addCartBackgroundColor"
:no-stock-text="form.noStockText"
:min-buy-num="form.minBuyNum"
:max-buy-num="form.maxBuyNum"
:step-buy-num="form.stepBuyNum"
:show-close="form.showClose"
:mask-close-able="form.maskCloseAble"
:price-color="form.priceColor"
@open="openSkuPopup"
@close="closeSkuPopup"
@add-cart="addCart"
@buy-now="buyNow"
></vk-u-goods-sku-popup>
<view class="u-config-wrap">
<view class="u-config-title u-border-bottom">
参数配置
</view>
<view class="u-config-item">
<view class="u-item-title">更换商品</view>
<u-subsection vibrateShort :list="['商品1', '商品2', '商品3', '商品4']" @change="goodsChange"></u-subsection>
<view style="padding-top: 40rpx;color: #767676;">
<view>商品1：多组多规格商品</view>
<view>商品2：单组多规格商品</view>
<view>商品3：单组单规格商品</view>
<view>商品4：暂无库存商品</view>
</view>
</view>
<view class="u-config-item">
<view class="u-item-title">模式</view>
<u-subsection vibrateShort :list="['都显示', '只显示购物车', '只显示立即购买']" @change="skuModeChange"></u-subsection>
</view>
<u-form :model="form" ref="uForm" label-width ="300">
<u-form-item label="立即购买文字">
<view style="width: 30rpx;height: 30rpx;"></view>
<u-input v-model="form.buyNowText" />
</u-form-item>
<u-form-item label="立即购买文字颜色">
<view :style="'background-color: '+form.buyNowColor+';'" style="width: 30rpx;height: 30rpx;"></view>
<u-input v-model="form.buyNowColor"/>
</u-form-item>
<u-form-item label="立即购买按钮背景色">
<view :style="'background-color: '+form.buyNowBackgroundColor+';'" style="width: 30rpx;height: 30rpx;"></view>
<u-input v-model="form.buyNowBackgroundColor" />
</u-form-item>
<u-form-item label="加入购物车文字">
<view style="width: 30rpx;height: 30rpx;"></view>
<u-input v-model="form.addCartText" />
</u-form-item>
<u-form-item label="加入购物车文字颜色">
<view :style="'background-color: '+form.addCartColor+';'" style="width: 30rpx;height: 30rpx;"></view>
<u-input v-model="form.addCartColor"/>
</u-form-item>
<u-form-item label="加入购物车按钮背景色">
<view :style="'background-color: '+form.addCartBackgroundColor+';'" style="width: 30rpx;height: 30rpx;"></view>
<u-input v-model="form.addCartBackgroundColor" />
</u-form-item>
<u-form-item label="无库存时按钮文字">
<u-input v-model="form.noStockText" />
</u-form-item>
<u-form-item label="价格的字体颜色">
<view :style="'background-color: '+form.priceColor+';'" style="width: 30rpx;height: 30rpx;"></view>
<u-input v-model="form.priceColor" />
</u-form-item>
<u-form-item label="最小购买数量">
<vk-u-number-box
v-model="form.minBuyNum" :min="1" :max="10000" :step="1" :positive-integer="true">
</vk-u-number-box>
</u-form-item>
<u-form-item label="最大购买数量">
<vk-u-number-box
v-model="form.maxBuyNum" :min="1" :max="10000" :step="1" :positive-integer="true">
</vk-u-number-box>
</u-form-item>
<u-form-item label="步进器步长">
<vk-u-number-box
v-model="form.stepBuyNum" :min="1" :max="10000" :step="1" :positive-integer="true">
</vk-u-number-box>
</u-form-item>
</u-form>
<view class="u-config-item">
<view class="u-item-title">是否显示关闭按钮</view>
<u-subsection vibrateShort :list="['显示', '隐藏']" @change="showCloseChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">点击遮罩关闭组件</view>
<u-subsection vibrateShort :list="['是', '否']" @change="maskCloseAbleChange"></u-subsection>
</view>
</view>
</view>
</template>
......@@ -11,7 +109,24 @@
export default {
data() {
return {
// 后台接口请求获得的数据
goods_id:"001",
// sku组件开关
sku_key:false,
form:{
skuMode:1, // 模式 1:都显示 2:只显示购物车 3:只显示立即购买 默认 1
buyNowText:"立即购买",
buyNowColor:"#ffffff",
buyNowBackgroundColor:"#fe560a",
addCartText:"加入购物车",
addCartColor:"#ffffff",
addCartBackgroundColor:"#ff9402",
noStockText:"该商品已抢完",
minBuyNum:1,
maxBuyNum:10000,
stepBuyNum:1,
priceColor:"#fe560a"
}
}
},
// 监听 - 页面每次【加载时】执行(如：前进)
......@@ -22,7 +137,94 @@
that.init(options);
},
methods: {
// 初始化
init(options = {}){
},
// sku组件 开始-----------------------------------------------------------
openSkuPopup(){
console.log("监听 - 打开sku组件");
},
closeSkuPopup(){
console.log("监听 - 关闭sku组件");
},
// 加入购物车前的判断
addCartFn(obj){
let { selectShop } = obj;
// 模拟添加到购物车,请替换成你自己的添加到购物车逻辑
let res = {};
let name = selectShop.goods_name;
if(selectShop.sku_name != "默认"){
name += "-"+selectShop.sku_name;
}
res.msg = `${name} 已添加到购物车`;
if(typeof obj.success == "function") obj.success(res);
},
// 加入购物车按钮
addCart(selectShop){
console.log("监听 - 加入购物车");
that.addCartFn({
selectShop : selectShop,
success : function(res){
// 实际业务时,请替换自己的加入购物车逻辑
vk.toast(res.msg,"none");
}
});
},
// 立即购买
buyNow(selectShop){
console.log("监听 - 立即购买");
that.addCartFn({
selectShop : selectShop,
success : function(res){
// 实际业务时,请替换自己的立即购买逻辑
vk.toast("立即购买");
}
});
},
//
/**
* 获取商品信息
* 这里可以看到每次打开SKU都会去重新请求商品信息,为的是每次打开SKU组件可以实时看到剩余库存
*/
findGoodsInfo(){
return new Promise(function (resolve, reject) {
vk.callFunction({
url: 'test/pub/findGoodsInfo',
title:'请求中...',
data:{
goods_id : that.goods_id
},
success(data) {
resolve(data.goodsInfo);
}
});
});
},
// 参数配置开始 -----------------------------------------------------------
goodsChange(index){
let list = ["001","002","003","004"];
that.goods_id = list[index];
that.sku_key = true;
},
showCloseChange(index){
let list = [true,false];
that.form.showClose = list[index];
that.sku_key = true;
},
maskCloseAbleChange(index){
let list = [true,false];
that.form.maskCloseAble = list[index];
that.sku_key = true;
},
skuModeChange(index){
let list = [1,2,3];
that.form.skuMode = list[index];
that.sku_key = true;
}
// 参数配置结束 -----------------------------------------------------------
}
}
</script>
......
pages_template/uni-id/index/index.vue
浏览文件 @ a23ab7fb
......@@ -24,8 +24,8 @@
<button type="default" @tap="pageTo('../../components-dynamic/index/index')">动态数据组件</button>
<view style="margin-bottom: 20rpx;">插件版本1.3.3 新增 登录/注册/找回密码/页面模板</view>
<button type="default" @tap="pageTo('../login/index/index')">登录注册找回密码页面模板</button>
<!-- <view style="margin-bottom: 20rpx;">插件版本1.3.8 新增 商品SKU选择器组件</view>
<button type="default" @tap="pageTo('../../components-dynamic/index/index')">商品SKU选择器组件</button> -->
<view style="margin-bottom: 20rpx;">插件版本1.3.8 新增 商品SKU选择器组件</view>
<button type="default" @tap="pageTo('../../components-dynamic/vk-u-goods-sku-popup/vk-u-goods-sku-popup')">商品SKU选择器组件</button>
</view>
</template>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或