购买

src/main/pc-space/src/components/PageHeader.vue

@@ -153,6 +153,7 @@ export default {
             }
         },
         getActive() {
+            this.activeName = '';
             let menus = [...this.menus];
             menus.forEach(item => {
                 let _route = this.parsePath(item.value);
@@ -169,6 +170,10 @@ export default {
         },
         change(info) {
             if (info.paneName !== 'wait') {
+                window.scrollTo({
+                    top: 0,
+                    behavior: 'smooth'
+                });
                 this.$router.push(info.paneName);
             } else {
                 this.wait();
@@ -292,6 +297,9 @@ export default {
     height: 90px;
     background: #0f1111;
     width: 100%;
+    position: sticky;
+    top: 0;
+    z-index: 20;
 
     .header {
         display: flex;

src/main/pc-space/src/main.js

@@ -11,6 +11,7 @@ import SingleUpload from '@/components/SingleUpload';
 import './styles/font.less';
 import './styles/app.less';
 import eventBus from './eventBus';
+import VueClipboard from 'vue-clipboard2';
 
 Vue.prototype.$colors = {
     prim: '#FF7F1F',
@@ -21,6 +22,7 @@ Vue.use(http);
 Vue.mixin(common);
 Vue.component('single-upload', SingleUpload);
 Vue.prototype.$EventBus = eventBus;
+Vue.use(VueClipboard);
 
 Vue.config.productionTip = false;
 

src/main/pc-space/src/mixins/common.js

@@ -104,5 +104,6 @@ export default {
         wait() {
             this.$message.warning('敬请期待');
         }
+        
     }
 };

src/main/pc-space/src/router/index.js

@@ -13,7 +13,7 @@ import eventBus from '../eventBus';
 const routes = [
     {
         path: '/',
-        redirect: 'mylikes'
+        redirect: 'home'
     },
     {
         path: '/',

src/main/pc-space/src/views/CollectionDetail.vue

@@ -358,7 +358,7 @@ export default {
                 display: flex;
                 .text1 {
                     text-align: center;
-                    margin-left: 16px;
+                    margin-left: 26px;
                     cursor: pointer;
                     display: inline-flex;
                     align-items: center;

src/main/pc-space/src/views/Submit.vue

@@ -1,17 +1,17 @@
 <template>
     <el-dialog center title="支付订单" :visible.sync="show" width="680px">
-        <div class="page">
+        <div class="page" v-loading="loading">
             <div class="info">
                 <div class="price">
                     <span class="text1">应付金额</span>
                     <img src="../assets/icon_jiage.png" alt="" />
-                    <span class="text2">105.00</span>
+                    <span class="text2">{{ orderInfo.price }}</span>
                 </div>
                 <div class="flex1"></div>
                 <div class="order">
                     <span class="text1">订单编号</span>
-                    <span class="text2">2019052035464</span>
-                    <el-button type="info" size="mini" plain>复制</el-button>
+                    <span class="text2">{{ orderInfo.id }}</span>
+                    <el-button type="info" @click="copy" size="mini" plain>复制</el-button>
                 </div>
             </div>
 
@@ -28,7 +28,21 @@
                     </div>
                 </div>
             </div>
+
+            <div class="tips">
+                <div class="text1">购买须知</div>
+                <div class="text2">
+                    1.数字盲盒按照随机概率进行抽取<br />
+                    2.数字盲盒及其数字内容为虚拟商品<span style="color: #ff4f50">支付完成后，不可退换</span><br />
+                    3.数字盲盒及其数字内容仅作为消费娱乐（或其他约定场景）使用<br />
+                    4.切勿当成投资和投机品进行盲目消费
+                </div>
+            </div>
         </div>
+
+        <span slot="footer" class="dialog-footer">
+            <el-button type="primary" class="pay" @click="submit">立即支付</el-button>
+        </span>
     </el-dialog>
 </template>
 
@@ -48,6 +62,11 @@ export default {
                     icon: require('../assets/weixin.png'),
                     name: '微信',
                     type: 'WEIXIN'
+                },
+                {
+                    icon: require('../assets/dcep.png'),
+                    name: 'DCEP支付',
+                    type: 'DCEP'
                 }
             ],
             loading: true,
@@ -55,16 +74,18 @@ export default {
         };
     },
     methods: {
-        submit() {},
+        submit() {
+            if (this.payMethods === 'DCEP') {
+                this.wait();
+            }
+        },
         init(info) {
             this.checkLogin()
                 .then(() => {
                     this.show = true;
                     this.loading = true;
-                    return this.$http.post('/order/create?collectionId=' + info.id + '&qty=1');
-                })
-                .then(res => {
-                    return this.$http.post('/order/get/' + res.id);
+                    return this.$http.get('/order/get/' + 2368);
+                    // return this.$http.post('/order/create?collectionId=' + info.id + '&qty=1');
                 })
                 .then(res => {
                     this.orderInfo = res;
@@ -75,6 +96,16 @@ export default {
                         this.$message.warning(e.error);
                     }
                 });
+        },
+        copy() {
+            this.$copyText(this.orderInfo.id).then(
+                e => {
+                    this.$message.success('复制成功');
+                },
+                e => {
+                    this.$message.warning('复制失败');
+                }
+            );
         }
     }
 };
@@ -126,16 +157,20 @@ export default {
         }
     }
 }
+/deep/.el-loading-mask {
+    background-color: #ffffffee;
+}
 
 /deep/.el-radio {
     .flex();
     display: inline-flex;
     flex-direction: row-reverse;
     justify-content: space-between;
-    min-width: 192px;
+    width: 190px;
     height: 42px;
     color: #939599;
     padding: 0;
+    box-sizing: border-box;
     .el-radio__label {
         .flex();
         img {
@@ -185,7 +220,7 @@ export default {
     }
 }
 .payMethods {
-    padding-top: 30px;
+    padding: 30px 0;
     .title {
         font-size: 16px;
         color: #000000;
@@ -193,4 +228,31 @@ export default {
         padding-bottom: 20px;
     }
 }
+/deep/.el-radio.is-bordered + .el-radio.is-bordered {
+    margin-left: 0;
+}
+
+.tips {
+    padding-top: 20px;
+    .text1 {
+        font-size: 16px;
+        color: #939599;
+        line-height: 24px;
+    }
+    .text2 {
+        font-size: 14px;
+        color: #939599;
+        line-height: 28px;
+        margin-top: 10px;
+    }
+}
+.pay {
+    background-image: linear-gradient(135deg, @prim, @warn);
+    border-width: 0;
+    width: 200px;
+    color: #000;
+    &:hover {
+        background-image: linear-gradient(135deg, darken(@prim, 20), darken(@warn, 20));
+    }
+}
 </style>