解决设置css背景图片路径问题

zhiyangdu
1 parent 32ad49b7
Showing 4 changed files with 120 additions and 53 deletions
build/utils.js
src/components/receivingGiftsItem/receivingGiftsItem.less
src/pages/myGiftBox/myGiftBox.vue
src/router/index.js
@@ -48,7 +48,7 @@ exports.cssLoaders = function (options) {
       return ExtractTextPlugin.extract({
         use: loaders,
         fallback: 'vue-style-loader',
-        publicPath: '../../'  //解决css背景图路径错位问题
+        publicPath: '../../'  //解决css背景图路径获取不到问题
       })
     } else {
       return ['vue-style-loader'].concat(loaders)
@@ -144,7 +144,7 @@
                     .img {
                         width: 16px;
                         height: 16px;
-                        background: url("/static/img/spot_active.png") no-repeat
+                        background: url("../../../static/img/spot_active.png") no-repeat
                             top;
                         background-size: 100%;
                     }
 <template>
     <div class="my_gift_box">
         <!--tab切换-->
-        <div class="top_box" :style="'padding-top: ' + ($parent.top.value) + 'px'">
-            <img src="static/img/icon_back.png" />
+        <div
+            class="top_box"
+            :style="'padding-top: ' + $parent.top.value + 'px'"
+        >
+            <img @click="$parent.back" src="static/img/icon_back.png" />
             <div class="tabs">
                 <van-tabs @change="onTap" v-model="active">
                     <van-tab title="收礼"></van-tab>
                     <van-tab title="送礼"></van-tab>
                 </van-tabs>
             </div>
-            <div class="desc">规则说明</div>
+            <div class="desc" @click="giftRules">规则说明</div>
         </div>
         <!--内容-->
         <div class="item_box">
-        <div
-            infinite-scroll-immediate-check="true"
-            v-infinite-scroll="getorderGiftList"
-            infinite-scroll-disabled="loading"
-            :infinite-scroll-distance="50"
-        >
-            <!-- 收礼列表 -->
-            <receiving-gifts-item
-                v-show="active != 1 && active == 0"
-                @onUserInfo="onUserInfo"
-                @giftInReturn="giftInReturn"
-                @onReceivingGifts="onReceivingGifts"
-                :receivingGiftsInfo="receivingGiftsInfo"
-            ></receiving-gifts-item>
-            <!-- 送礼列表 -->
-            <giftGivingItem
-                @onGiftGiving="onGiftGiving"
-                 v-show="active != 0 && active == 1"
-                :giftGivingItem="giftGivingItem"
+            <div
+                infinite-scroll-immediate-check="true"
+                v-infinite-scroll="getorderGiftList"
+                infinite-scroll-disabled="loading"
+                :infinite-scroll-distance="50"
             >
-            </giftGivingItem>
-        </div>
+                <!-- 收礼列表 -->
+                <receiving-gifts-item
+                    v-show="active != 1 && active == 0"
+                    @onUserInfo="onUserInfo"
+                    @giftInReturn="giftInReturn"
+                    @onReceivingGifts="onReceivingGifts"
+                    :receivingGiftsInfo="receivingGiftsInfo"
+                ></receiving-gifts-item>
+                <!-- 送礼列表 -->
+                <giftGivingItem
+                    @onGiftGiving="onGiftGiving"
+                    v-show="active != 0 && active == 1"
+                    :giftGivingItem="giftGivingItem"
+                >
+                </giftGivingItem>
+            </div>
         </div>
     </div>
 </template>
@@ -55,6 +58,7 @@ export default {
                 pages: 0 // 分页
             },
             giftGivingItem: null, // 送礼列表页数据
+            giftsRuleUrl:null, // 礼物规则URL
             giftGiving: {
                 loading: false, // 加载
                 pages: 0 // 分页
@@ -70,33 +74,46 @@ export default {
         this.getorderGiftList();
         // 送礼订单列表
         this.getorderGiveGiftList();
-        // 调用im是否显示隐藏
-        this.setGiftBottomVisibleBySwitchTab();
+        // 赠礼规则
+        this.orderGiftContent()
     },
     methods: {
         onTap(active) {
             this.active = active;
+            if (active === 1) {
+                // 调用im是否显示隐藏1显示im聊天弹窗0不显示
+                this.setGiftBottomVisibleBySwitchTab(1);
+            } else {
+                // 调用im是否显示隐藏1显示im聊天弹窗0不显示
+                this.setGiftBottomVisibleBySwitchTab(1);
+            }
         },
-             /**
-             * 显示和隐藏聊天
-             */
-            setGiftBottomVisibleBySwitchTab() {
-
-                // App内
-                if (this.isCNLive.value) {
-
-                    // 调用App，返回按键
-                    if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.setGiftBottomVisibleBySwitchTab) {
-
-                        // App内，iOS销毁WebView
-                        window.webkit.messageHandlers.setGiftBottomVisibleBySwitchTab.postMessage({body: {visible: 1}});
-                    } else if (window.obj && window.obj.setGiftBottomVisibleBySwitchTab) {
-
-                        // App内，Android销毁WebView
-                        window.obj.setGiftBottomVisibleBySwitchTab(1);
-                    }
+        /**
+         * 显示和隐藏聊天
+         */
+        setGiftBottomVisibleBySwitchTab() {
+            // App内
+            if (this.isCNLive.value) {
+                // 调用App，返回按键
+                if (
+                    window.webkit &&
+                    window.webkit.messageHandlers &&
+                    window.webkit.messageHandlers
+                        .setGiftBottomVisibleBySwitchTab
+                ) {
+                    // App内，iOS销毁WebView
+                    window.webkit.messageHandlers.setGiftBottomVisibleBySwitchTab.postMessage(
+                        { body: { visible: 1 } }
+                    );
+                } else if (
+                    window.obj &&
+                    window.obj.setGiftBottomVisibleBySwitchTab
+                ) {
+                    // App内，Android销毁WebView
+                    window.obj.setGiftBottomVisibleBySwitchTab(1);
                 }
-            },
+            }
+        },
         /**
          * 获取收礼礼物列表
          */
@@ -165,7 +182,11 @@ export default {
                 // 临时，设置跳转商品详情参数
                 Object.assign(item, {
                     type: "43",
-                    to:JSON.stringify({"uid":item.user.uid,"username":item.user.username,"img":item.user.img}),
+                    to: JSON.stringify({
+                        uid: item.user.uid,
+                        username: item.user.username,
+                        img: item.user.img
+                    }),
                     shop_type: ""
                 });
                 this.$parent.gotoDetail(item);
@@ -185,28 +206,28 @@ export default {
                 this.$parent.gotoDetail(item);
             }
         },
-         // 收礼商品跳转到详情页
+        // 收礼商品跳转到详情页
         onReceivingGifts(item) {
             // 判断并调用通用跳转
             if (typeof this.$parent.gotoDetail === "function") {
                 // 临时，设置跳转商品详情参数
                 Object.assign(item, {
                     type: "26",
-                    to: "",
+                    to: item.id,
                     shop_type: ""
                 });
                 this.$parent.gotoDetail(item);
             }
         },
-         // 送礼商品跳转到详情页
+        // 送礼商品跳转到详情页
         onGiftGiving(item) {
             // 判断并调用通用跳转
             if (typeof this.$parent.gotoDetail === "function") {
                 // 临时，设置跳转商品详情参数
                 Object.assign(item, {
                     type: "36",
-                    to: "",
+                    to: item.id,
                     shop_type: ""
                 });
@@ -274,6 +295,52 @@ export default {
                 // 获取送礼订单列表失败
                 Toast("获取送礼订单列表失败");
             }
+        },
+        /**
+         * 赠礼规则url
+         */
+        orderGiftContent() {
+            // 加载中提示
+            Indicator.open("加载中...");
+
+            // 赠礼规则url列表接口
+            this.http(
+                "/Api/" + this.getApiVersion().index + "/orderGiftContent",
+                {},
+                this.orderGiftContentCallback,
+                {
+                    method: "post"
+                }
+            );
+        },
+        /**
+         * 赠礼规则url列表接口回调
+         * @param {object} res [服务器返回数据]
+         * @param {object} ext [扩展参数]
+         */
+        orderGiftContentCallback(res, ext){
+             // 加载完成
+            Indicator.close();
+
+            // 返回处理
+            if (res.code == 200) {
+                 // 解构数据
+                let { data: datas } = res;
+                this.giftsRuleUrl = datas.content
+            }
+        },
+        // 送礼规则说明
+        giftRules(){
+            // 判断并调用通用跳转
+            if (typeof this.$parent.gotoDetail === "function") {
+                // 临时，设置跳转商品详情参数
+                Object.assign(item, {
+                    type: "44",
+                    to: this.giftsRuleUrl,
+                    shop_type: ""
+                });
+                this.$parent.gotoDetail(item);
+            }
         }
     }
 };
@@ -128,7 +128,7 @@ const router = new Router({
                 },
                 {
                     // 我的礼盒
-                    path: "/ ",
+                    path: "/myGiftBox",
                     name: "myGiftBox",
                     component: resolve => {
                         require(["@/pages/myGiftBox/myGiftBox"], resolve);