From fa6fa0d0f3594744c5dabcc123cd4d236f399c4d Mon Sep 17 00:00:00 2001
From: panqihua <panqihua@melt.icu>
Date: Fri, 27 Jan 2023 02:41:38 +0800
Subject: [PATCH] =?UTF-8?q?1.=E5=8E=82=E5=95=86-=E9=A6=96=E9=A1=B5-?=
 =?UTF-8?q?=E6=94=AF=E4=BB=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/svg/alipay.svg           |   8 +
 src/assets/icons/svg/bank-card.svg        |   8 +
 src/views/manufacturer/components/pay.vue | 293 ++++++++++++++++++++++
 src/views/manufacturer/index.vue          |  46 ++--
 4 files changed, 338 insertions(+), 17 deletions(-)
 create mode 100644 src/assets/icons/svg/alipay.svg
 create mode 100644 src/assets/icons/svg/bank-card.svg
 create mode 100644 src/views/manufacturer/components/pay.vue

diff --git a/src/assets/icons/svg/alipay.svg b/src/assets/icons/svg/alipay.svg
new file mode 100644
index 0000000..d45ae63
--- /dev/null
+++ b/src/assets/icons/svg/alipay.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1674753743037" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3623"
+     width="32" height="32">
+  <path
+    d="M578.656 651.648S512 704.96 487.776 718.944a300.512 300.512 0 0 1-59.104 26.08 247.808 247.808 0 0 1-46.88 10.688c-13.408 1.472-24.512 2.4-33.312 2.848a7.232 7.232 0 0 1-3.136 0.64h-10.08a249.92 249.92 0 0 1-65.088-8.224 164.768 164.768 0 0 1-53.12-24.192 117.856 117.856 0 0 1-35.84-40.256c-8.832-16.16-13.216-34.912-13.216-56.288 0.416-18.432 5.44-35.2 15.04-50.304a133.504 133.504 0 0 1 37.44-38.4 177.536 177.536 0 0 1 50.976-23.904 172.384 172.384 0 0 1 56.288-6.88c18.432 0.832 36.256 3.008 53.44 6.56a485.44 485.44 0 0 1 49.376 12.928c15.712 5.024 30.592 10.464 44.64 16.32 14.08 5.92 27.36 11.552 39.936 17.024a615.04 615.04 0 0 0 32.704 12.576c12.16-15.52 22.4-30.72 30.816-45.6a473.504 473.504 0 0 0 33.344-72c2.944-8.384 4.8-14.24 5.664-17.6h-272.96v-30.208H473.6v-69.76H294.368v-30.208h179.264v-56.64c0-3.744 2.08-6.784 6.272-9.088 4.192-2.304 9.024-3.872 14.464-4.736 6.304-1.248 13.44-1.888 21.376-1.888h48.416v72.32h184.288v30.208H564.16v69.792h146.432l0.096-0.64v0.64h-0.096c-2.944 18.688-7.936 38.4-14.976 59.136a455.52 455.52 0 0 1-26.112 61.632 432.96 432.96 0 0 1-45.6 71.04s144.32 69.088 296.704 93.376C945.888 639.84 960 577.536 960 512c0-247.424-200.576-448-448-448S64 264.576 64 512c0 247.392 200.576 448 448 448 153.472 0 288.896-77.184 369.664-194.848-82.048-17.888-169.216-54.08-303.04-113.504zM224 621.12c-1.696 76.704 85.632 82.4 99.104 82.816 44.544 1.344 80.48-15.36 108.48-31.872 27.968-16.512 73.632-59.2 75.36-60.64 1.664-1.472 3.36-3.04 5.024-4.704-12.224-6.72-24.224-12.864-36-18.528-11.776-5.632-71.68-37.6-124.8-43.04C250.496 534.784 224.512 597.824 224 621.12z"
+    fill="#181818" p-id="3624"></path>
+</svg>
diff --git a/src/assets/icons/svg/bank-card.svg b/src/assets/icons/svg/bank-card.svg
new file mode 100644
index 0000000..f39a18c
--- /dev/null
+++ b/src/assets/icons/svg/bank-card.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1674755486050" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6312"
+     width="32" height="32">
+  <path
+    d="M938.666667 469.333333v384a42.666667 42.666667 0 0 1-42.666667 42.666667H128a42.666667 42.666667 0 0 1-42.666667-42.666667v-384h853.333334z m0-170.666666H85.333333V170.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h768a42.666667 42.666667 0 0 1 42.666667 42.666667v128z"
+    p-id="6313"></path>
+</svg>
diff --git a/src/views/manufacturer/components/pay.vue b/src/views/manufacturer/components/pay.vue
new file mode 100644
index 0000000..93c1aa9
--- /dev/null
+++ b/src/views/manufacturer/components/pay.vue
@@ -0,0 +1,293 @@
+<template>
+  <div class="app-container root">
+    <el-row :gutter="20" type="flex">
+      <el-col :span="4" v-for="(item,index) in vipList" :key="index">
+        <div @click="check('vipList',index)">
+          <el-card class="vip" :class="{active:item.active}">
+            <div>￥{{ item.price }}</div>
+            <div>{{ item.time }}</div>
+          </el-card>
+        </div>
+
+
+      </el-col>
+    </el-row>
+    <div class="tip mt10">审核通过后开始计算时长</div>
+    <div class="title mt10 mb10">优惠选择</div>
+    <el-row type="flex" class="discount-p">
+      <el-col class="discount mt10" v-for="item in 4" :key="item">
+        <div class="top">
+          <div class="left">
+            <div class="mt10">
+              <span class="unit">￥</span>
+              <span class="price">10</span>
+            </div>
+            <div class="use mb10">满300使用</div>
+          </div>
+          <div class="right">
+            <div class="tag mt">新人优惠券</div>
+            <div class="mt20"><span class="discount-coupon">满减券</span> <span class="tag ml10">全场通用券</span></div>
+          </div>
+        </div>
+        <div class="down mt20 mb20">
+          <div>未使用前 永久有效</div>
+        </div>
+      </el-col>
+    </el-row>
+    <div class="title mt10 mb10">支付方式</div>
+    <div>
+      <el-row v-for="(item,index) in payMethod" :key="index" type="flex" class="method">
+        <el-col :span="1">
+          <svg-icon :icon-class="item.icon"/>
+        </el-col>
+
+        <el-col :span="4">{{ item.name }}</el-col>
+        <el-col :span="3" :offset="2">
+          <i class="el-icon-circle-check active" v-if="item.active"></i>
+          <div class="inactive" @click="check('payMethod',index)" v-else></div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="text-center">
+      <el-button @click="$emit('back')">上一步</el-button>
+      <el-button type="primary" @click="open=true">立即支付</el-button>
+    </div>
+
+    <el-dialog title="支付" :visible.sync="open">
+      <template v-if="payMethod.find(item=>item.active).type">
+        <el-row>
+          <el-col :span="8" :offset="3">
+            <div class="bank-title">银行卡转账流程</div>
+            <div class="mt20">第一步：对公汇款账户</div>
+            <div class="mt20">名称：北京的当石科技有限公司</div>
+            <div class="mt20">开户银行：招商银行北京分行三里屯支行</div>
+            <div class="mt20">银行账号：1110 1354 8610 601</div>
+            <div class="mt20">汇款金额：¥296.65</div>
+            <div class="mt20">汇款备注：订单号fcaspi2crho1ds4</div>
+            <div class="mt20 red">请在对公汇款时务必备注订单号</div>
+            <el-button type="primary" class="mt20">一键复制</el-button>
+          </el-col>
+          <el-col :span="12">
+            <div class="mt20">第二步： 升级帐号</div>
+            <div class="mt10">
+              转账完成后请点击页面中的「已完成支付」，我们在收到汇款24小时内会为您自动升级账号（周末、法定假日可能有延时）
+            </div>
+          </el-col>
+        </el-row>
+        <div class="text-center">
+          <el-button type="primary" @click="$emit('success')">已完成支付</el-button>
+        </div>
+      </template>
+      <template v-else>
+        <div class="text-center">￥{{ this.vipList.find(item => item.active).price }}</div>
+        <div class="text-center">
+          <img src="http://www.dummyimage.com/100x100" class="mt20"/>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'pay.vue',
+  data() {
+    return {
+      open: false,
+      vipList: [
+        { price: 300, time: '1年', active: true },
+        { price: 556, time: '2年', active: false },
+        { price: 899, time: '4年', active: false }
+      ],
+      payMethod: [{
+        icon: 'wechat',
+        name: '微信支付',
+        active: true
+      }, {
+        icon: 'alipay',
+        name: '支付宝支付',
+        active: false
+      }, {
+        icon: 'bank-card',
+        name: '招商银行支付',
+        type: 'bank',
+        active: false
+      }]
+    }
+  },
+  methods: {
+    check(key, index) {
+
+      let method = this[key].map(item => {
+        item.active = false
+        return item
+      })
+      method[index].active = true
+
+      this[key].splice(0, this[key].length, ...method)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+$discount-width: 40%;
+$discount-border: 1px dashed rgba(0, 0, 0, 0.5);
+$icon-size: 20px;
+
+.red {
+  color: red;
+}
+
+.bank-title {
+  font-size: 20px;
+}
+
+.root {
+  padding: 0 10%;
+}
+
+.method {
+  font-size: $icon-size;
+
+  div {
+    .active {
+      color: blue;
+      font-size: #{$icon-size + 2px};
+    }
+
+    .inactive {
+      width: $icon-size;
+      height: $icon-size;
+      border: 2px solid rgba(0, 0, 0, 0.5);
+      border-radius: 50%;
+    }
+  }
+
+  div:first-child {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.method:not(:first-child) {
+  .inactive {
+    margin-left: 2px;
+  }
+}
+
+.discount-p {
+  flex-wrap: wrap;
+
+}
+
+.discount:not(:nth-child(3n+1)) {
+  margin-left: 10px;
+}
+
+.discount {
+  flex-basis: calc(100% / 3 - 20px);
+  border-radius: 6px;
+  background-color: rgba(239, 239, 239, 1);
+  text-align: center;
+  border: 1px solid rgba(252, 202, 0, 1);
+
+
+  & > .top {
+    display: flex;
+    border-bottom: $discount-border;
+
+
+    & > .left {
+      flex-basis: $discount-width;
+      border-right: $discount-border;
+
+      & > div {
+        .unit {
+          font-size: 12px;
+          text-align: center;
+          font-family: PingFangSC-regular;
+        }
+
+        .price {
+          font-size: 40px;
+          text-align: center;
+          font-family: SFUIText-regular;
+        }
+      }
+
+      .use {
+        color: rgba(68, 68, 68, 1);
+        font-size: 12px;
+        text-align: center;
+        font-family: PingFangSC-regular;
+      }
+    }
+
+    & > .right {
+      padding-left: 20px;
+
+      & > div {
+        & > .discount-coupon {
+          border-radius: 4px;
+          background-color: rgba(94, 99, 102, 1);
+          color: rgba(255, 255, 255, 1);
+          font-size: 12px;
+          text-align: center;
+          font-family: Microsoft Yahei;
+          padding: 5px;
+        }
+      }
+
+      .tag {
+        color: rgba(68, 68, 68, 1);
+        font-size: 13px;
+        text-align: left;
+        font-family: PingFangSC-regular;
+      }
+
+      .tag.mt {
+        margin-top: 10px;
+      }
+    }
+  }
+
+  & > .down {
+    & > div {
+      color: rgba(68, 68, 68, 1);
+      font-size: 12px;
+      text-align: center;
+      font-family: PingFangSC-regular;
+      width: $discount-width;
+    }
+  }
+}
+
+.tip {
+  color: rgba(108, 108, 108, 1);
+  font-size: 14px;
+  text-align: left;
+  font-family: SourceHanSansSC-regular;
+}
+
+.title {
+  color: rgba(16, 16, 16, 1);
+  font-size: 14px;
+  text-align: left;
+  font-family: SourceHanSansSC-regular;
+}
+
+.vip {
+  color: rgba(16, 16, 16, 1);
+  font-size: 14px;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  padding: 80px 0;
+}
+
+.vip.active {
+  background-color: rgba(22, 132, 252, 0.29);
+}
+</style>
diff --git a/src/views/manufacturer/index.vue b/src/views/manufacturer/index.vue
index a836c81..a121914 100644
--- a/src/views/manufacturer/index.vue
+++ b/src/views/manufacturer/index.vue
@@ -1,20 +1,21 @@
 <template>
   <div class="app-container">
-    <div class="renew-tip">
-      <span class="tip">您的账号还剩4天即将到期，到期后讲影响正常使用，请尽快续费</span>
-      <a href="#" class="renew">立即续费</a>
-    </div>
-    <el-row class="mt" :gutter="20">
-      <el-col :span="18">
-        <el-card>
-          <div class="title">数据汇总</div>
-          <el-row type="flex" class="sum mt" justify="space-between">
-            <el-col :span="5">
-              <div class="value">131344</div>
-              <div class="label">总销售数量</div>
-            </el-col>
-            <el-col :span="5">
-              <div class="value">131344</div>
+    <template v-if="type==='list'">
+      <div class="renew-tip">
+        <span class="tip">您的账号还剩4天即将到期，到期后讲影响正常使用，请尽快续费</span>
+        <a href="#" class="renew" @click="type='pay'">立即续费</a>
+      </div>
+      <el-row class="mt" :gutter="20">
+        <el-col :span="18">
+          <el-card>
+            <div class="title">数据汇总</div>
+            <el-row type="flex" class="sum mt" justify="space-between">
+              <el-col :span="5">
+                <div class="value">131344</div>
+                <div class="label">总销售数量</div>
+              </el-col>
+              <el-col :span="5">
+                <div class="value">131344</div>
               <div class="label">建议零售价销售额</div>
             </el-col>
             <el-col :span="5">
@@ -123,17 +124,28 @@
           </template>
         </el-card>
       </el-col>
-    </el-row>
+      </el-row>
+    </template>
+    <pay @back="type='list'" @success="type='list';$modal.msgSuccess('支付成功')" v-else-if="type==='pay'"/>
   </div>
 </template>
 
 <script>
 import echarts from '@/plugins/echarts'
+import Pay from './components/pay'
 
 export default {
   name: 'index.vue',
+  components: { Pay },
+  data() {
+    return {
+      type: 'list'
+    }
+  },
   mounted() {
-    this.initChart()
+    if (this.type === 'list') {
+      this.initChart()
+    }
   },
   methods: {
     initChart() {