Merge branch 'master' of http://git.izouma.com/xiongzhu/9th

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

@@ -1,75 +1,101 @@
 <template>
-    <el-dialog center title="支付订单" :visible.sync="show" width="680px">
-        <div class="page" v-loading="loading">
-            <div class="coupon" @click="choose(list2)">
-                <div class="coupon-top">
-                    <div class="text1">{{ list2.name }}</div>
-                    <div class="text2">
-                        <span>兑换券编码</span>
-                        <span>{{ list2.id }}</span>
+    <div>
+        <el-dialog center title="支付订单" :visible.sync="show" width="680px">
+            <div class="page" v-loading="loading">
+                <div>选择兑换券</div>
+                <div class="coupon" @click="choose(list2)">
+                    <div class="coupon-top">
+                        <div class="text1">{{ list2.name }}</div>
+                        <div class="text2">
+                            <span>兑换券编码</span>
+                            <span>{{ list2.id }}</span>
+                        </div>
+                    </div>
+                    <div class="coupon-bottom">
+                        <span>有效期至:{{ list2.expiration }}</span>
+                        <span v-if="!list2.limited">规定商品可用</span>
                     </div>
-                </div>
-                <div class="coupon-bottom">
-                    <span>有效期至:{{ list2.expiration }}</span>
-                    <span v-if="!list2.limited">规定商品可用</span>
-                </div>
 
-                <img v-if="chooseId === list2.id" class="icon" src="../assets/icon_gouxuan_pre.png" alt="" />
-                <img v-else class="icon" src="../assets/icon_gouxuan_huise.png" alt="" />
-                <el-empty v-if="empty" description="暂无兑换券哦~" />
-            </div>
-            <div @click="$router.push('/my')">查看更多</div>
-            <div class="info">
-                <div class="price">
-                    <span class="text1">应付金额</span>
-                    <img src="../assets/icon_jiage.png" alt="" />
-                    <span class="text2">{{ money }}</span>
-                    <span class="text3">(含gas费¥{{ gas }})</span>
+                    <img v-if="chooseId === list2.id" class="icon" src="../assets/icon_gouxuan_pre.png" alt="" />
+                    <img v-else class="icon" src="../assets/icon_gouxuan_huise.png" alt="" />
+                    <el-empty v-if="empty" description="暂无兑换券哦~" />
                 </div>
-                <div class="flex1"></div>
-                <!-- <div class="order">
+                <div @click="all">查看更多</div>
+                <div class="info">
+                    <div class="price">
+                        <span class="text1">应付金额</span>
+                        <img src="../assets/icon_jiage.png" alt="" />
+                        <span class="text2">{{ money }}</span>
+                        <span class="text3">(含gas费¥{{ gas }})</span>
+                    </div>
+                    <div class="flex1"></div>
+                    <!-- <div class="order">
                     <span class="text1">订单编号</span>
                     <span class="text2">{{ orderInfo.id }}</span>
                     <el-button type="info" @click="copy" size="mini" plain>复制</el-button>
                 </div> -->
-            </div>
+                </div>
 
-            <div class="payMethods">
-                <div class="title">选择支付方式</div>
-                <div class="pay-list">
-                    <div class="pay-info">
-                        <el-radio-group v-model="payMethods">
-                            <el-radio v-for="item in payList" border :label="item.type" :key="item.type">
-                                <img :src="item.icon" alt="" />
-                                <span> {{ item.name }}</span>
-                            </el-radio>
-                        </el-radio-group>
+                <div class="payMethods">
+                    <div class="title">选择支付方式</div>
+                    <div class="pay-list">
+                        <div class="pay-info">
+                            <el-radio-group v-model="payMethods">
+                                <el-radio v-for="item in payList" border :label="item.type" :key="item.type">
+                                    <img :src="item.icon" alt="" />
+                                    <span> {{ item.name }}</span>
+                                </el-radio>
+                            </el-radio-group>
+                        </div>
+                    </div>
+                    <div v-if="status == 'NOT_PAID'">
+                        <div class="qrcode">
+                            <vue-qrcode :value="payUrl" :options="{ width: 140, margin: 1 }" class="code"></vue-qrcode>
+                        </div>
+                        <div class="qrcode-text">二维码有效时常为5分钟，请尽快支付</div>
+                        <!-- <div class="qrcode-text">手机微信扫描二维码下单</div> -->
                     </div>
                 </div>
-                <div v-if="status == 'NOT_PAID'">
-                    <div class="qrcode">
-                        <vue-qrcode :value="payUrl" :options="{ width: 140, margin: 1 }" class="code"></vue-qrcode>
+
+                <div class="tips">
+                    <div class="text1">购买须知</div>
+                    <div class="text2">
+                        1.数字盲盒按照随机概率进行抽取<br />
+                        2.数字盲盒及其数字内容为虚拟商品<span style="color: #ff4f50">支付完成后，不可退换</span><br />
+                        3.数字盲盒及其数字内容仅作为消费娱乐（或其他约定场景）使用<br />
+                        4.切勿当成投资和投机品进行盲目消费
                     </div>
-                    <div class="qrcode-text">二维码有效时常为5分钟，请尽快支付</div>
-                    <!-- <div class="qrcode-text">手机微信扫描二维码下单</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.切勿当成投资和投机品进行盲目消费
+            <span slot="footer" class="dialog-footer">
+                <el-button type="primary" class="pay" @click="submit">确认</el-button>
+            </span>
+        </el-dialog>
+        <el-dialog center title="兑换券" :visible.sync="show2" width="680px">
+            <div class="page">
+                <div v-for="(item, index) in list3" :key="index" @click="IdFn(item)">
+                    <div class="coupon" @click="choose">
+                        <div class="coupon-top">
+                            <div class="text1">{{ item.name }}</div>
+                            <div class="text2">
+                                <span>兑换券编码</span>
+                                <span>{{ item.id }}</span>
+                            </div>
+                        </div>
+                        <div class="coupon-bottom">
+                            <span>有效期至:{{ item.expiration }}</span>
+                            <span v-if="!item.limited">规定商品可用</span>
+                        </div>
+
+                        <!-- <img v-if="chooseId === item.id" class="icon" src="../assets/icon_gouxuan_pre.png" alt="" />
+                <img v-else class="icon" src="../assets/icon_gouxuan_huise.png" alt="" /> -->
+                        <el-empty v-if="empty" description="暂无兑换券哦~" />
+                    </div>
                 </div>
             </div>
-        </div>
-
-        <span slot="footer" class="dialog-footer">
-            <el-button type="primary" class="pay" @click="submit">确认</el-button>
-        </span>
-    </el-dialog>
+        </el-dialog>
+    </div>
 </template>
 
 <script>
@@ -83,9 +109,11 @@ export default {
     data() {
         return {
             show: false,
+            show2: false,
             url: '/userCoupon/all',
             payMethods: 'WEIXIN',
             list2: [],
+            list3: [],
             payList: [
                 {
                     icon: require('../assets/weixin.png'),
@@ -143,6 +171,15 @@ export default {
         this.getData();
     },
     methods: {
+        IdFn(e) {
+            console.log(e);
+            this.list2 = e;
+            this.show2 = false;
+        },
+        all() {
+            console.log(111);
+            this.show2 = true;
+        },
         beforeData() {
             return {
                 query: {
@@ -152,9 +189,11 @@ export default {
         },
         setList(list) {
             this.list2 = list[0];
+            this.list3 = list;
             console.log(this.list2);
         },
         choose(info) {
+            console.log(info);
             this.chooseId = info.id;
             this.$store.commit('setCouponInfo', info);
         },