世行扶贫增加返回和分享按钮

zhiyangdu
1 parent 44ab88e9
Showing 4 changed files with 280 additions and 212 deletions
src/main.js
src/pages/common/common.vue
src/pages/mall/mall.vue
static/img/icon_share.png
@@ -50,7 +50,7 @@ import &#39;url-search-params-polyfill&#39;;
 Vue.config.productionTip = false;
  
 // 部署模式设置（开发模式："dev"，测试模式："test"，生产模式："prod"）
-Vue.prototype.mode = "dev";
+Vue.prototype.mode = "prod";
  
 // 微信JS-SDK对象
 Vue.prototype.jweixin = {
@@ -60,7 +60,8 @@
                 /* 上传图片参数开始 结束 */
                 isBackBox: {		// 判断是否显示backBox组件
 					value: true
-				}
+                },
+                isBack: false // 判断是否显示头部的返回和分享组件
             }
         },
         components: {
@@ -68,7 +69,13 @@
             showModal
         },
         created() {
-
+            // 通过URL中的参数，判断打开目标，如果有target=inside，title组件隐藏
+            if (this.$route.query.isBack && this.$route.query.isBack.toLowerCase() == "true") {
+                // 设置后退按钮组
+                this.$set(this, "isBack", true);
+            }else {
+                this.$set(this, "isBack", false);
+            }
             // 判断是否有target=inside参数，有的话，不显示backBox组件
 			if (this.$route.query.target && this.$route.query.target.toLowerCase() == "inside") {
 				this.$set(this.isBackBox, "value", false);
 <template>
     <div class="mall-box">
-
         <!-- 下拉刷新 -->
         <!-- <van-pull-refresh v-model="isLoading" pulling-text="下拉刷新..." loosing-text="释放刷新" loading-text="加载中..." success-text="刷新成功" @refresh="onRefresh"> -->
-
-            <!--轮播-->
-            <swiper v-if="banner"
-                :swipers="banner"
-                :options="{
-                    showIndicators: true
-                }">
-            </swiper>
-
-            <!--导航-->
-            <horiz-list class="components-box" v-if="navs && navs.length" @jump="jump"
-                :lists="navs"
-                com="4">
-            </horiz-list>
-
-            <!-- 遍历ads，输出列表数据 -->
-            <div class="ads-box">
-                <div class="ads" v-for="(item, index) in ads" :key="index">
-
-                    <!--优惠专区-->
-                    <discountZone v-if="item.style == '1'" @more="toDetail" @toDetail="toDetail"
-                        :discountZoneInfo="item">
-                    </discountZone>
-
-                    <!--天天特惠-->
-                    <preferential v-if="item.style == '2'" @more="toDetail" @toDetail="toDetail"
-                        :preferentialInfo="item">
-                    </preferential>
-
-                    <!--视听专区-->
-                    <videoArea v-if="item.style == '13'" @more="toDetail" @toDetail="toDetail"
-                        :videoAreaInfo="item">
-                    </videoArea>
-
-                    <!-- style_7组件 -->
-                    <style-7 v-if="item.style == '7'" @more="toDetail" @bannerJump="toDetail" @jump=jump @addCart=addCart
-                        :styles="item">
-                    </style-7>
-                </div>
-                <tabBox v-if="tabbar" :tabbar="tabbar" :tabbarBackgroud="tabbarBackgroud"></tabBox>
+        <!-- nav -->
+          <!-- nav -->
+        <back-box v-if="$parent.isBack && $parent.isCNLive.value" class="back-box" :style="'padding-top: ' + $parent.top.value + 'px'"  @back="back"
+                :backs="backs">
+        </back-box>
+        <!--轮播-->
+        <swiper
+            v-if="banner"
+            :swipers="banner"
+            :options="{
+                showIndicators: true
+            }"
+        >
+        </swiper>
+
+        <!--导航-->
+        <horiz-list
+            class="components-box"
+            v-if="navs && navs.length"
+            @jump="jump"
+            :lists="navs"
+            com="4"
+        >
+        </horiz-list>
+
+        <!-- 遍历ads，输出列表数据 -->
+        <div class="ads-box">
+            <div class="ads" v-for="(item, index) in ads" :key="index">
+                <!--优惠专区-->
+                <discountZone
+                    v-if="item.style == '1'"
+                    @more="toDetail"
+                    @toDetail="toDetail"
+                    :discountZoneInfo="item"
+                >
+                </discountZone>
+
+                <!--天天特惠-->
+                <preferential
+                    v-if="item.style == '2'"
+                    @more="toDetail"
+                    @toDetail="toDetail"
+                    :preferentialInfo="item"
+                >
+                </preferential>
+
+                <!--视听专区-->
+                <videoArea
+                    v-if="item.style == '13'"
+                    @more="toDetail"
+                    @toDetail="toDetail"
+                    :videoAreaInfo="item"
+                >
+                </videoArea>
+
+                <!-- style_7组件 -->
+                <style-7
+                    v-if="item.style == '7'"
+                    @more="toDetail"
+                    @bannerJump="toDetail"
+                    @jump="jump"
+                    @addCart="addCart"
+                    :styles="item"
+                >
+                </style-7>
             </div>
+            <tabBox
+                v-if="tabbar"
+                :tabbar="tabbar"
+                :tabbarBackgroud="tabbarBackgroud"
+            ></tabBox>
+        </div>
         <!-- </van-pull-refresh> -->
     </div>
 </template>
  
 <script>
-
-    // 引入组件
-    import { Toast, Indicator } from "mint-ui";
-    import swiper from "@/components/swiper/swiper";
-    import swiperItem from "@/components/swiperItem/swiperItem";
-    import discountZone from "@/components/discountZone/discountZone";
-    import preferential from "@/components/preferential/preferential";
-    import videoArea from "@/components/videoArea/videoArea";
-    import style7 from "@/components/style_7/style_7";
-    import horizList from "@/components/horizList/horizList";
-    import tabBox from "@/components/tabBox/tabBox";
-    export default {
-        name: 'mall',
-        data() {
-            return {
-                title: "",              // 标题
-                isLoading: false,       // 下拉刷新控制
-                banner:null,            // banner
-                navs: null,             // 导航
-                ads: null,               // 列表
-                tabbar:null,              // tabbar嵌套组件
-                tabbarBackgroud:null      // 整体tabbar背景
+// 引入组件
+import { Toast, Indicator } from "mint-ui";
+import swiper from "@/components/swiper/swiper";
+import swiperItem from "@/components/swiperItem/swiperItem";
+import discountZone from "@/components/discountZone/discountZone";
+import preferential from "@/components/preferential/preferential";
+import videoArea from "@/components/videoArea/videoArea";
+import style7 from "@/components/style_7/style_7";
+import horizList from "@/components/horizList/horizList";
+import tabBox from "@/components/tabBox/tabBox";
+import backBox from "@/components/backBox/backBox";
+export default {
+    name: "mall",
+    data() {
+        return {
+            title: "", // 标题
+            isLoading: false, // 下拉刷新控制
+            banner: null, // banner
+            navs: null, // 导航
+            ads: null, // 列表
+            tabbar: null, // tabbar嵌套组件
+            tabbarBackgroud: null, // 整体tabbar背景
+            backs: null // 后退按钮组
+        };
+    },
+    components: {
+        swiper,
+        swiperItem,
+        discountZone,
+        preferential,
+        videoArea,
+        style7,
+        horizList,
+        tabBox,
+        backBox
+    },
+    created() {
+        // 获取优选库精选活动
+        this.activityAd();
+        // // 判断是否在App内
+        // 设置后退按钮组
+            this.$set(this, "backs", {
+                title: ""
+            });
+
+            // 判断是否在App内
+            if (this.$parent.isCNLive.value) {
+                // 添加后退按钮组“后退”和“分享”按钮
+                Object.assign(this.backs, {
+                    funcs: {
+                        back: {
+                            icon: "static/img/icon_back.png"
+                        },
+                        funcArray: [
+                            {
+                                icon: "static/img/icon_share.png",
+                                func: this.toShare
+                            }
+                        ]
+                    }
+                });
+            }
+    },
+    methods: {
+        // 下拉刷新
+        // onRefresh() {
+
+        //     // 下拉刷新中
+        //     this.$set(this, "isLoading", true);
+
+        //     // 获取优选库精选活动
+        //     this.activityAd();
+        // },
+        /**
+         * 后退
+         */
+        back() {
+            // 判断是否有后退函数
+            if (typeof this.$parent.back === "function") {
+                // 调用后退
+                this.$parent.back();
+            } else {
+                // 后退
+                window.history.go(-1);
             }
         },
-        components:{
-            swiper,
-            swiperItem,
-            discountZone,
-            preferential,
-            videoArea,
-            style7,
-            horizList,
-            tabBox
-        },
-        created() {
-
-            // 获取优选库精选活动
-            this.activityAd();
+        /**
+         * 获取优选库精选活动
+         */
+        activityAd() {
+            // 加载中提示
+            Indicator.open("加载中...");
+
+            // 获取证书请求接口
+            this.http(
+                "/Api/" + this.getApiVersion().index + "/activityAd",
+                {
+                    id: this.$route.query.id
+                },
+                this.activityAdCallback,
+                {
+                    method: "post"
+                }
+            );
         },
-        methods: {
-
-            // 下拉刷新
-            // onRefresh() {
-
-            //     // 下拉刷新中
-            //     this.$set(this, "isLoading", true);
-
-            //     // 获取优选库精选活动
-            //     this.activityAd();
-            // },
-
-            /**
-             * 获取优选库精选活动
-             */
-            activityAd() {
-                // 加载中提示
-                Indicator.open("加载中...");
-
-                // 获取证书请求接口
-                this.http("/Api/" + this.getApiVersion().index + "/activityAd", {
-                        id: this.$route.query.id
-                    }, this.activityAdCallback, {
-                        method: "post"
-                    }
-                );
-            },
  
-            /**
-             * 获取优选库精选活动回调
-             * @param {object} res [服务器返回数据]
-             * @param {object} ext [扩展参数]
-             */
-            activityAdCallback(res, ext) {
+        /**
+         * 获取优选库精选活动回调
+         * @param {object} res [服务器返回数据]
+         * @param {object} ext [扩展参数]
+         */
+        activityAdCallback(res, ext) {
+            // 加载完成
+            Indicator.close();
  
-                // 加载完成
-                Indicator.close();
+            // 下拉刷新结束
+            this.$set(this, "isLoading", false);
  
-                // 下拉刷新结束
-                this.$set(this, "isLoading", false);
+            // 返回处理
+            if (res.code == 200) {
+                // 解构数据
+                let { data: datas } = res;
  
-                // 返回处理
-                if (res.code == 200) {
+                /* 获取优选库精选活动数据 开始 */
  
-                    // 解构数据
-                    let { data: datas } = res;
+                // 设置标题
+                this.$set(this, "title", datas.title);
  
-                    /* 获取优选库精选活动数据 开始 */
-
-                    // 设置标题
-                    this.$set(this, "title", datas.title);
-
-                    // 设置banner数据
-                    if (datas.banner && datas.banner.length) {
-                        this.$set(this, "banner", datas.banner);
-                    }
-
-                    // 设置navs数据
-                    if (datas.navs && datas.navs.length) {
-                        this.$set(this, "navs", datas.navs);
-                    }
-
-                    // 设置ads数据
-                    if (datas.ads && datas.ads.length) {
-                        this.$set(this, "ads", datas.ads);
-                    }
-                    // 设置tabbar数据
-                    if (datas.tabbar && datas.tabbar.length) {
-                        this.$set(this, "tabbar", datas.tabbar);
-                    }
-                    // 设置tabbarBackgroud数据
-                    if (datas.color && datas.color.length) {
-                        this.$set(this, "tabbarBackgroud", datas.color);
-                    }
-                    /* 获取优选库精选活动数据 结束 */
-
-                } else if (res.code == 400) {
-
-                    // 获取优选库精选活动失败
-                    Toast(res.message);
-                } else {
-
-                    // 获取优选库精选活动失败
-                    Toast("获取优选库精选活动失败");
+                // 设置banner数据
+                if (datas.banner && datas.banner.length) {
+                    this.$set(this, "banner", datas.banner);
                 }
-            },
-
-            /**
-             * 调用通用跳转
-             * @param {object} item [通用跳转对象]
-             */
-            toDetail(item) {
-
-                // 判断是否有通用跳转函数
-                if (typeof this.$parent.gotoDetail === "function") {
  
-                    // 调用通用跳转
-                    this.$parent.gotoDetail(item);
+                // 设置navs数据
+                if (datas.navs && datas.navs.length) {
+                    this.$set(this, "navs", datas.navs);
                 }
-            },
-
-            /**
-             * style7跳转
-             * @param {object} item [数据对象]
-             */
-            jump(item) {
-
-                // 判断并调用通用跳转
-                if (typeof this.$parent.gotoDetail === "function") {
-
-                    // 构造跳转详情页参数
-                    let options = {
-                        type: "2",
-                        to: item.id,
-                        shop_type: item.shop_type
-                    }
  
-                    this.$parent.gotoDetail(options);
+                // 设置ads数据
+                if (datas.ads && datas.ads.length) {
+                    this.$set(this, "ads", datas.ads);
                 }
-            },
-
-            /**
-             * 加入购物车
-             * @param {object} item [数据对象]
-             */
-            addCart(item) {
+                // 设置tabbar数据
+                if (datas.tabbar && datas.tabbar.length) {
+                    this.$set(this, "tabbar", datas.tabbar);
+                }
+                // 设置tabbarBackgroud数据
+                if (datas.color && datas.color.length) {
+                    this.$set(this, "tabbarBackgroud", datas.color);
+                }
+                /* 获取优选库精选活动数据 结束 */
+            } else if (res.code == 400) {
+                // 获取优选库精选活动失败
+                Toast(res.message);
+            } else {
+                // 获取优选库精选活动失败
+                Toast("获取优选库精选活动失败");
+            }
+        },
  
-                // 通用跳转
-                this.jump(item);
+        /**
+         * 调用通用跳转
+         * @param {object} item [通用跳转对象]
+         */
+        toDetail(item) {
+            // 判断是否有通用跳转函数
+            if (typeof this.$parent.gotoDetail === "function") {
+                // 调用通用跳转
+                this.$parent.gotoDetail(item);
             }
         },
-        head: {
-            title () {
-                return {
-                    inner: this.title
-                }
+
+        /**
+         * style7跳转
+         * @param {object} item [数据对象]
+         */
+        jump(item) {
+            // 判断并调用通用跳转
+            if (typeof this.$parent.gotoDetail === "function") {
+                // 构造跳转详情页参数
+                let options = {
+                    type: "2",
+                    to: item.id,
+                    shop_type: item.shop_type
+                };
+
+                this.$parent.gotoDetail(options);
             }
         },
-        watch: {
-
-            // 设置页面标题
-            title(newVal) {
-                if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
-                    this.$iFrame.insertIFrame(newVal);
-                } else {
-                    this.$emit("updateHead");
-                }
+
+        /**
+         * 加入购物车
+         * @param {object} item [数据对象]
+         */
+        addCart(item) {
+            // 通用跳转
+            this.jump(item);
+        }
+    },
+    head: {
+        title() {
+            return {
+                inner: this.title
+            };
+        }
+    },
+    watch: {
+        // 设置页面标题
+        title(newVal) {
+            if (
+                this.$store.state.browser.toLowerCase() == "qq" &&
+                this.$store.state.deviceType.toLowerCase() == "iphone"
+            ) {
+                this.$iFrame.insertIFrame(newVal);
+            } else {
+                this.$emit("updateHead");
             }
         }
     }
+};
 </script>
  
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style rel="stylesheet/less" lang="less" scoped>
-    @import "mall";
+@import "mall";
 </style>