feat: 🎨 新增专题功能
学习很差啦
parent
34448b8a23
commit
fc8123c194
17
api/home.js
17
api/home.js
|
|
@ -1,6 +1,21 @@
|
|||
import { http, Method } from "@/utils/request.js";
|
||||
|
||||
|
||||
export function toSpecial(data) {
|
||||
return http.request({
|
||||
url: `/other/pageData/getSpecial`,
|
||||
method: Method.GET,
|
||||
data
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 专题内容
|
||||
*/
|
||||
export function getSpecial(id) {
|
||||
return http.request({
|
||||
url: `/other/pageData/get/${id}`,
|
||||
method: Method.GET,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取广告图
|
||||
|
|
|
|||
|
|
@ -79,6 +79,12 @@
|
|||
"style": {
|
||||
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/tabbar/special/special",
|
||||
"style": {
|
||||
"navigationBarTitleText": "专题"
|
||||
}
|
||||
}
|
||||
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,118 +1,208 @@
|
|||
/** 配置楼层模块的跳转 */
|
||||
export function modelNavigateTo(item) {
|
||||
let val = item.url || item;
|
||||
console.log(item);
|
||||
// return;
|
||||
switch (val.___type || item.type) {
|
||||
case "goods":
|
||||
uni.navigateTo({
|
||||
url: "/pages/product/goods?id=" + val.id + "&goodsId=" + val.goodsId,
|
||||
});
|
||||
break;
|
||||
case "category":
|
||||
if (val.id) {
|
||||
let val = item.url || item;
|
||||
//链接跳转到专题
|
||||
|
||||
if (val && val.id && val.pageType == "special") {
|
||||
uni.navigateTo({
|
||||
url: `/pages/tabbar/special/special?id=${val.id}`,
|
||||
});
|
||||
}
|
||||
switch (val.___type || val.type) {
|
||||
case "goods":
|
||||
uni.navigateTo({
|
||||
url: "/pages/product/goods?id=" + val.id + "&goodsId=" + val.goodsId,
|
||||
});
|
||||
break;
|
||||
case "category":
|
||||
if (val.id) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/navigation/search/searchPage?category=${val.id}`,
|
||||
});
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: `/pages/navigation/search/searchPage`,
|
||||
});
|
||||
}
|
||||
break;
|
||||
case "shops":
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/shopPage?id=${val.id}`,
|
||||
});
|
||||
break;
|
||||
// 活动
|
||||
case "marketing":
|
||||
uni.navigateTo({
|
||||
url: "/pages/product/goods?id=" + val.id + "goodsId=" + val.goodsId,
|
||||
});
|
||||
break;
|
||||
case "pages":
|
||||
uni.navigateTo({
|
||||
url: val.___path + "?id=" + val.id + "&title=" + val.title,
|
||||
});
|
||||
break;
|
||||
case "other":
|
||||
switch (val.title || item.title) {
|
||||
case "首页":
|
||||
uni.switchTab({
|
||||
url: `/pages/tabbar/home/index`,
|
||||
});
|
||||
break;
|
||||
case "购物车":
|
||||
uni.switchTab({
|
||||
url: `/pages/tabbar/cart/cartList`,
|
||||
});
|
||||
return;
|
||||
case "个人中心":
|
||||
uni.switchTab({
|
||||
url: `/pages/tabbar/user/my`,
|
||||
});
|
||||
break;
|
||||
case "收藏商品":
|
||||
uni.navigateTo({
|
||||
url: `/pages/mine/myCollect`,
|
||||
});
|
||||
break;
|
||||
case "我的订单":
|
||||
uni.navigateTo({
|
||||
url: `/pages/order/myOrder?status=0`,
|
||||
});
|
||||
break;
|
||||
case "领券中心":
|
||||
uni.navigateTo({
|
||||
url: `/pages/cart/coupon/couponCenter`,
|
||||
});
|
||||
break;
|
||||
case "签到":
|
||||
uni.navigateTo({
|
||||
url: `/pages/mine/signIn`,
|
||||
});
|
||||
break;
|
||||
case "秒杀频道":
|
||||
uni.navigateTo({
|
||||
url: `/pages/promotion/seckill`,
|
||||
});
|
||||
break;
|
||||
case "拼团频道":
|
||||
uni.navigateTo({
|
||||
url: `/pages/promotion/joinGroup`,
|
||||
});
|
||||
break;
|
||||
case "小程序直播":
|
||||
uni.navigateTo({
|
||||
url: `/pages/promotion/lives`,
|
||||
});
|
||||
break;
|
||||
case "砍价":
|
||||
uni.navigateTo({
|
||||
url: `/pages/promotion/bargain/list`,
|
||||
});
|
||||
break;
|
||||
case "积分商城":
|
||||
uni.navigateTo({
|
||||
url: `/pages/promotion/point/pointList`,
|
||||
});
|
||||
break;
|
||||
case "店铺列表":
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/shopList`,
|
||||
});
|
||||
break;
|
||||
default:
|
||||
// #ifdef H5
|
||||
window.location.href = val.url || item.link;
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
plus.runtime.openURL(val.url || item.link) //不需要拼接\
|
||||
// #endif
|
||||
break;
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
import config from "@/config/config";
|
||||
|
||||
async function scan() {
|
||||
// #ifdef APP-PLUS
|
||||
let isIos = plus.os.name == "iOS";
|
||||
// 判断是否是Ios
|
||||
if (isIos) {
|
||||
const iosFirstCamera = uni.getStorageSync("iosFirstCamera"); //是不是第一次开启相机
|
||||
if (iosFirstCamera !== "false") {
|
||||
uni.setStorageSync("iosFirstCamera", "false"); //设为false就代表不是第一次开启相机
|
||||
seacnCode();
|
||||
} else {
|
||||
if (permision.judgeIosPermission("camera")) {
|
||||
seacnCode();
|
||||
} else {
|
||||
// 没有权限提醒是否去申请权限
|
||||
tipsGetSettings();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
/**
|
||||
* TODO 安卓 权限已经授权了，调用api总是显示用户已永久拒绝申请。人傻了
|
||||
* TODO 如果xdm有更好的办法请在 https://gitee.com/beijing_hongye_huicheng/lilishop/issues 提下谢谢
|
||||
*/
|
||||
seacnCode();
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
seacnCode();
|
||||
// #endif
|
||||
}
|
||||
/**
|
||||
* 提示获取权限
|
||||
*/
|
||||
function tipsGetSettings() {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "您已经关闭相机权限,去设置",
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
if (isIos) {
|
||||
plus.runtime.openURL("app-settings:");
|
||||
} else {
|
||||
permision.gotoAppPermissionSetting();
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function seacnCode() {
|
||||
uni.scanCode({
|
||||
success: function (res) {
|
||||
let path = encodeURIComponent(res.result);
|
||||
|
||||
// WX_CODE 为小程序码
|
||||
if (res.scanType == "WX_CODE") {
|
||||
console.log(res);
|
||||
uni.navigateTo({
|
||||
url: `/pages/navigation/search/searchPage?category=${val.id}`,
|
||||
url: `/${res.path}`,
|
||||
});
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: `/pages/navigation/search/searchPage`,
|
||||
config.scanAuthNavigation.forEach((src) => {
|
||||
if (res.result.indexOf(src) != -1) {
|
||||
uni.navigateTo({
|
||||
url: `/${res.result.substring(src.length)}`,
|
||||
});
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/tabbar/home/web-view?src=" + path,
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
}
|
||||
break;
|
||||
case "shops":
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/shopPage?id=${val.id}`,
|
||||
});
|
||||
break;
|
||||
// 活动
|
||||
case "marketing":
|
||||
uni.navigateTo({
|
||||
url: "/pages/product/goods?id=" + val.id + "goodsId=" + val.goodsId,
|
||||
});
|
||||
break;
|
||||
case "pages":
|
||||
uni.navigateTo({
|
||||
url: val.___path + "?id=" + val.id + "&title=" + val.title,
|
||||
});
|
||||
break;
|
||||
case "other":
|
||||
switch (val.title || item.title) {
|
||||
case "首页":
|
||||
uni.switchTab({
|
||||
url: `/pages/tabbar/home/index`,
|
||||
});
|
||||
break;
|
||||
case "购物车":
|
||||
uni.switchTab({
|
||||
url: `/pages/tabbar/cart/cartList`,
|
||||
});
|
||||
return;
|
||||
case "个人中心":
|
||||
uni.switchTab({
|
||||
url: `/pages/tabbar/user/my`,
|
||||
});
|
||||
break;
|
||||
case "收藏商品":
|
||||
uni.navigateTo({
|
||||
url: `/pages/mine/myCollect`,
|
||||
});
|
||||
break;
|
||||
case "我的订单":
|
||||
uni.navigateTo({
|
||||
url: `/pages/order/myOrder?status=0`,
|
||||
});
|
||||
break;
|
||||
case "领券中心":
|
||||
uni.navigateTo({
|
||||
url: `/pages/cart/coupon/couponCenter`,
|
||||
});
|
||||
break;
|
||||
case "签到":
|
||||
uni.navigateTo({
|
||||
url: `/pages/mine/signIn`,
|
||||
});
|
||||
break;
|
||||
case "秒杀频道":
|
||||
uni.navigateTo({
|
||||
url: `/pages/promotion/seckill`,
|
||||
});
|
||||
break;
|
||||
case "拼团频道":
|
||||
uni.navigateTo({
|
||||
url: `/pages/promotion/joinGroup`,
|
||||
});
|
||||
break;
|
||||
case "小程序直播":
|
||||
uni.navigateTo({
|
||||
url: `/pages/promotion/lives`,
|
||||
});
|
||||
break;
|
||||
case "砍价":
|
||||
uni.navigateTo({
|
||||
url: `/pages/promotion/bargain/list`,
|
||||
});
|
||||
break;
|
||||
case "积分商城":
|
||||
uni.navigateTo({
|
||||
url: `/pages/promotion/point/pointList`,
|
||||
});
|
||||
break;
|
||||
case "店铺列表":
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/shopList`,
|
||||
});
|
||||
break;
|
||||
default:
|
||||
// #ifdef H5
|
||||
window.location.href = val.url || item.link;
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
plus.runtime.openURL(val.url || item.link) //不需要拼接\
|
||||
// #endif
|
||||
break;
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,247 @@
|
|||
<template>
|
||||
<div class="wrapper">
|
||||
<!-- uni 中不能使用 vue component 所以用if判断每个组件 -->
|
||||
<div v-for="(item, index) in pageData.list" :key="index">
|
||||
<!-- 搜索栏，如果在楼层装修顶部则会自动浮动，否则不浮动 -->
|
||||
<div class="navbar" v-if="item.type == 'search'">
|
||||
<search style="width: 100%" :res="item.options" />
|
||||
<!-- #ifndef H5 -->
|
||||
<!-- 扫码功能 不兼容h5 详情文档: https://uniapp.dcloud.io/api/system/barcode?id=scancode -->
|
||||
<div slot="right" class="navbar-right">
|
||||
<u-icon name="scan" @click="scan()" color="#666" size="50"></u-icon>
|
||||
</div>
|
||||
<!-- #endif -->
|
||||
</div>
|
||||
<carousel v-if="item.type == 'carousel'" :res="item.options" />
|
||||
<titleLayout v-if="item.type == 'title'" :res="item.options" />
|
||||
<leftOneRightTwo
|
||||
v-if="item.type == 'leftOneRightTwo'"
|
||||
:res="item.options"
|
||||
/>
|
||||
<leftTwoRightOne
|
||||
v-if="item.type == 'leftTwoRightOne'"
|
||||
:res="item.options"
|
||||
/>
|
||||
<topOneBottomTwo
|
||||
v-if="item.type == 'topOneBottomTwo'"
|
||||
:res="item.options"
|
||||
/>
|
||||
<topTwoBottomOne
|
||||
v-if="item.type == 'topTwoBottomOne'"
|
||||
:res="item.options"
|
||||
/>
|
||||
<flexThree v-if="item.type == 'flexThree'" :res="item.options" />
|
||||
<flexFive v-if="item.type == 'flexFive'" :res="item.options" />
|
||||
<flexFour v-if="item.type == 'flexFour'" :res="item.options" />
|
||||
<flexTwo v-if="item.type == 'flexTwo'" :res="item.options" />
|
||||
<textPicture v-if="item.type == 'textPicture'" :res="item.options" />
|
||||
<menuLayout v-if="item.type == 'menu'" :res="item.options" />
|
||||
<flexOne v-if="item.type == 'flexOne'" :res="item.options" />
|
||||
<goods v-if="item.type == 'goods'" :res="item.options" />
|
||||
<group v-if="item.type == 'group'" :res="item.options" />
|
||||
<notice v-if="item.type == 'notice'" :res="item.options" />
|
||||
<promotions v-if="item.type == 'promotionDetail'" :res="item.options" />
|
||||
<!-- <joinGroup v-if="item.type == 'joinGroup'" :res="item.options" /> -->
|
||||
<!-- <integral v-if="item.type == 'integral'" :res="item.options" /> -->
|
||||
<!-- <spike v-if="item.type == 'spike'" :res="item.options" /> -->
|
||||
</div>
|
||||
<u-no-network></u-no-network>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 引用组件
|
||||
import tpl_banner from "@/pages/tabbar/home/template/tpl_banner"; //导航栏模块
|
||||
import tpl_title from "@/pages/tabbar/home/template/tpl_title"; //标题栏模块
|
||||
import tpl_left_one_right_two from "@/pages/tabbar/home/template/tpl_left_one_right_two"; //左一右二模块
|
||||
import tpl_left_two_right_one from "@/pages/tabbar/home/template/tpl_left_two_right_one"; //左二右一模块
|
||||
import tpl_top_one_bottom_two from "@/pages/tabbar/home/template/tpl_top_one_bottom_two"; //上一下二模块
|
||||
import tpl_top_two_bottom_one from "@/pages/tabbar/home/template/tpl_top_two_bottom_one"; //上二下一模块
|
||||
import tpl_flex_one from "@/pages/tabbar/home/template/tpl_flex_one"; //单行图片模块
|
||||
import tpl_flex_two from "@/pages/tabbar/home/template/tpl_flex_two"; //两张横图模块
|
||||
import tpl_flex_three from "@/pages/tabbar/home/template/tpl_flex_three"; //三列单行图片模块
|
||||
import tpl_flex_five from "@/pages/tabbar/home/template/tpl_flex_five"; //五列单行图片模块
|
||||
import tpl_flex_four from "@/pages/tabbar/home/template/tpl_flex_four"; //四列单行图片模块
|
||||
import tpl_text_picture from "@/pages/tabbar/home/template/tpl_text_picture"; //文字图片模板
|
||||
import tpl_menu from "@/pages/tabbar/home/template/tpl_menu"; //五列菜单模块
|
||||
import tpl_search from "@/pages/tabbar/home/template/tpl_search"; //搜索栏
|
||||
import tpl_group from "@/pages/tabbar/home/template/tpl_group"; //
|
||||
import tpl_goods from "@/pages/tabbar/home/template/tpl_goods"; //商品分类以及分类中的商品
|
||||
// 结束引用组件
|
||||
import { toSpecial, getSpecial } from "@/api/home"; //获取楼层装修接口
|
||||
import permision from "@/js_sdk/wa-permission/permission.js"; //权限工具类
|
||||
import config from "@/config/config";
|
||||
import tpl_notice from "@/pages/tabbar/home/template/tpl_notice"; //标题栏模块
|
||||
import tpl_promotions from "@/pages/tabbar/home/template/tpl_promotions_detail"; //标题栏模块
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: "",
|
||||
config,
|
||||
pageData: "", //楼层页面数据
|
||||
bodyParam: "",
|
||||
isIos: ""
|
||||
};
|
||||
},
|
||||
components: {
|
||||
carousel: tpl_banner,
|
||||
titleLayout: tpl_title,
|
||||
leftOneRightTwo: tpl_left_one_right_two,
|
||||
leftTwoRightOne: tpl_left_two_right_one,
|
||||
topOneBottomTwo: tpl_top_one_bottom_two,
|
||||
topTwoBottomOne: tpl_top_two_bottom_one,
|
||||
flexThree: tpl_flex_three,
|
||||
flexFive: tpl_flex_five,
|
||||
flexFour: tpl_flex_four,
|
||||
flexTwo: tpl_flex_two,
|
||||
textPicture: tpl_text_picture,
|
||||
menuLayout: tpl_menu,
|
||||
search: tpl_search,
|
||||
flexOne: tpl_flex_one,
|
||||
goods: tpl_goods,
|
||||
group: tpl_group,
|
||||
notice: tpl_notice,
|
||||
promotions: tpl_promotions
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.init();
|
||||
// #ifdef MP-WEIXIN
|
||||
// 小程序默认分享
|
||||
uni.showShareMenu({ withShareTicket: true });
|
||||
// #endif
|
||||
},
|
||||
onLoad(val) {
|
||||
this.id = val.id;
|
||||
this.bodyParam = val.body;
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 实例化首页数据楼层
|
||||
*/
|
||||
init() {
|
||||
this.pageData = "";
|
||||
console.log(this.bodyParam);
|
||||
if (this.bodyParam) {
|
||||
toSpecial({body: this.bodyParam}).then(res => {
|
||||
if (res.data.success) {
|
||||
this.pageData = JSON.parse(res.data.result.pageData);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
getSpecial(this.id).then(res => {
|
||||
if (res.data.success) {
|
||||
this.pageData = JSON.parse(res.data.result.pageData);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* TODO 扫码功能后续还会后续增加
|
||||
* 应该实现的功能目前计划有：
|
||||
* 扫描商品跳转商品页面
|
||||
* 扫描活动跳转活动页面
|
||||
* 扫描二维码登录
|
||||
* 扫描其他站信息 弹出提示，返回首页。
|
||||
*/
|
||||
seacnCode() {
|
||||
uni.scanCode({
|
||||
success: function(res) {
|
||||
let path = encodeURIComponent(res.result);
|
||||
|
||||
// WX_CODE 为小程序码
|
||||
if (res.scanType == "WX_CODE") {
|
||||
console.log(res);
|
||||
uni.navigateTo({
|
||||
url: `/${res.path}`
|
||||
});
|
||||
} else {
|
||||
config.scanAuthNavigation.forEach(src => {
|
||||
if (res.result.indexOf(src) != -1) {
|
||||
uni.navigateTo({
|
||||
url: `/${res.result.substring(src.length)}`
|
||||
});
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/tabbar/home/web-view?src=" + path
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 提示获取权限
|
||||
*/
|
||||
tipsGetSettings() {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "您已经关闭相机权限,去设置",
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
if (this.isIos) {
|
||||
plus.runtime.openURL("app-settings:");
|
||||
} else {
|
||||
permision.gotoAppPermissionSetting();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 唤醒客户端扫码
|
||||
* 没权限去申请权限，有权限获取扫码功能
|
||||
*/
|
||||
async scan() {
|
||||
// #ifdef APP-PLUS
|
||||
this.isIos = plus.os.name == "iOS";
|
||||
// 判断是否是Ios
|
||||
if (this.isIos) {
|
||||
const iosFirstCamera = uni.getStorageSync("iosFirstCamera"); //是不是第一次开启相机
|
||||
if (iosFirstCamera !== "false") {
|
||||
uni.setStorageSync("iosFirstCamera", "false"); //设为false就代表不是第一次开启相机
|
||||
this.seacnCode();
|
||||
} else {
|
||||
if (permision.judgeIosPermission("camera")) {
|
||||
this.seacnCode();
|
||||
} else {
|
||||
// 没有权限提醒是否去申请权限
|
||||
this.tipsGetSettings();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
/**
|
||||
* TODO 安卓 权限已经授权了，调用api总是显示用户已永久拒绝申请。人傻了
|
||||
* TODO 如果xdm有更好的办法请在 https://gitee.com/beijing_hongye_huicheng/lilishop/issues 提下谢谢
|
||||
*/
|
||||
this.seacnCode();
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
this.seacnCode();
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.navbar-right {
|
||||
padding: 0 16rpx 0 0;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue