商品订单跳转

zhiyangdu
1 parent 3bd8fc9e
Showing 4 changed files with 50 additions and 8 deletions
src/components/receivingGiftsItem/receivingGiftsItem.less
src/components/receivingGiftsItem/receivingGiftsItem.vue
src/main.js
src/pages/myGiftBox/myGiftBox.vue
@@ -124,8 +124,8 @@
                         .img {
                             width: 16px;
                             height: 16px;
-                            background: url("../../../static/img/spot.png") no-repeat
-                                top;
+                            background: url("../../../static/img/spot.png")
+                                no-repeat top;
                             background-size: 100%;
                         }
                         .line_box {
@@ -194,6 +194,28 @@
             color: rgba(51, 51, 51, 1);
             line-height: 40px;
         }
+        .oredr_link_box {
+            display: flex;
+            width: 158px;
+            height: 52px;
+            background: rgba(208, 2, 27, 1);
+            border-radius: 100px 0px 0px 100px;
+            font-size: 26px;
+            font-weight: 500;
+            color: rgba(255, 255, 255, 1);
+            line-height: 52px;
+            position: fixed;
+            right:0;
+            z-index: 1000;
+            div{
+                margin-left: 18px;
+            }
+            .icon{
+                width: 20px;
+                height: 20px;
+                margin: 13px 0;
+            }
+        }
     }
     .noGift {
         height: calc(100vh-364px);
@@ -217,8 +239,8 @@
                 height: 230px;
             }
         }
-        .box2{
-            img{
+        .box2 {
+            img {
                 width: 200px;
                 height: 200px;
                 display: block;
@@ -164,11 +164,21 @@
                 </div>
                 <!-- 显示文字 -->
                 <div class="text_tip" v-else>完成</div>
+                <!-- 商品订单按钮 -->
+                <div
+                    @click="OrderLink"
+                    v-if="index == 0"
+                    class="oredr_link_box"
+                    :style="'top: ' + ($parent.$parent.top.value + 151) + 'px'"
+                >
+                    <div>商品订单</div>
+                    <van-icon class="icon" name="arrow" />
+                </div>
             </div>
         </div>
         <!-- 您还未收到过礼物哦～-->
         <div v-else class="noGift">
-            <div v-if="isData==0" class="box">
+            <div v-if="isData == 0" class="box">
                 <img src="static/img/noGifts.png" />
                 <div class="tip">您还未收到过该礼物哦</div>
             </div>
@@ -186,7 +196,7 @@ export default {
     data() {
         return {};
     },
-    props: ["receivingGiftsInfo","isData"],
+    props: ["receivingGiftsInfo", "isData"],
     created() {},
     methods: {
         // 回赠礼物跳转到商城
@@ -200,6 +210,10 @@ export default {
         // 跳转到用户详情页
         onUserInfo(item) {
             this.$emit("onUserInfo", item);
+        },
+        // 跳转到商品订单
+        OrderLink() {
+            this.$emit("OrderLink");
         }
     }
 };
@@ -6,11 +6,12 @@ import VueHead from &quot;vue-head&quot;;
 import sha1 from "sha1";
 import 'mint-ui/lib/style.css';
 import { Toast, Indicator,InfiniteScroll } from "mint-ui";
-import { Rate, Popup, Lazyload, Search, PullRefresh, Picker, Image, ImagePreview, Tab, Tabs, ActionSheet} from "vant";
+import { Rate, Popup, Lazyload, Search, PullRefresh, Picker, Image, ImagePreview, Tab, Tabs, ActionSheet, Icon} from "vant";
 import App from "./App";
 import IdCard from './common/IdCard';
 import VueBus from 'vue-bus';
-import VueClipboard from 'vue-clipboard2'
+import VueClipboard from 'vue-clipboard2';
+Vue.use(Icon);
 Vue.use(Vuex);
 Vue.use(VueResource);
 Vue.use(VueHead, { separator: " " });
@@ -66,6 +66,7 @@
                     @onUserInfo="onUserInfo"
                     @giftInReturn="giftInReturn"
                     @onReceivingGifts="onReceivingGifts"
+                    @OrderLink="OrderLink"
                     :receivingGiftsInfo="receivingGiftsInfo"
                     :isData="this.receivingGifts.isData"
                 ></receiving-gifts-item>
@@ -558,6 +559,10 @@ export default {
                 this.$parent.gotoDetail(item);
             }
         },
+        // 送礼列表的商品订单跳转
+        OrderLink(){
+            
+        },
         // 送礼商品跳转到详情页
         onGiftGiving(item) {
             // 判断并调用通用跳转