H5-支付方式选择组件化

htmldev/dashboard/src/views/place/list/index.vue

@@ -133,45 +133,8 @@
                 v-for="(str, index) in '，下单后不可退订，不可转让'"
                 :key="'b' + index">{{ str }}</span>
             </p>
-            <!--支付宝、微信环境不显示-->
-            <div class="payment-type">
-              <p :class="{'active': order_pay_type === 2}"
-                 @click="order_pay_type = 2">
-                <img
-                  class="icon"
-                  src="./image/ic_select@2x.png"
-                  alt=""
-                  v-show="order_pay_type === 2">
-                <img
-                  class="alipay"
-                  src="./image/ic_Alipay_sel@2x.png"
-                  alt="" v-show="order_pay_type === 2">
-                <img
-                  class="alipay"
-                  src="./image/ic_Alipay_nor@2x.png"
-                  alt="" v-show="order_pay_type !== 2">
-                <span>支付宝支付</span>
-              </p>
-              <p :class="{'active': order_pay_type === 1}"
-                 @click="order_pay_type = 1">
-                <img
-                  class="icon"
-                  src="./image/ic_select@2x.png"
-                  alt=""
-                  v-show="order_pay_type === 1">
-                <img
-                  class="wechat"
-                  src="./image/ic_WeChat_sel@2x.png"
-                  alt=""
-                  v-show="order_pay_type === 1">
-                <img
-                  class="wechat"
-                  src="./image/ic_WeChat_nor@2x.png"
-                  alt=""
-                  v-show="order_pay_type !== 1">
-                <span>微信支付</span>
-              </p>
-            </div>
+            <!--支付方式选择-->
+            <payment @onChange="handlePayment"/>
           </div>
         </div>
         <div class="af-popup-footer">
@@ -197,6 +160,7 @@
 
 <script>
 import { Tabs, Tab, Icon, Popup, Field, Toast, Button } from 'vant'
+import payment from '../../common/payment'
 import { apiPlaceList, apiPlacePreOrder } from './api'
 import { getCookieValue } from '../../../utils'
 import { platform } from '../../../utils/platform'
@@ -210,7 +174,8 @@ export default {
     'van-icon': Icon,
     'van-popup': Popup,
     'van-field': Field,
-    'van-button': Button
+    'van-button': Button,
+    payment
   },
   data () {
     return {
@@ -262,6 +227,9 @@ export default {
   },
   methods: {
     handleChange () {},
+    handlePayment (val) {
+      this.order_pay_type = val
+    },
     // 获取订座列表
     async fetchPlaceList () {
       const { id } = this.objCurrentBarInfo

htmldev/dashboard/src/views/place/list/style/index.scss

@@ -474,64 +474,7 @@
 }
 
 .payment-type {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   margin-top: 16px;
-
-  p {
-    position: relative;
-    left: 0;
-    top: 0;
-    display: flex;
-    align-items: center;
-    width: 164px;
-    height: 60px;
-    border-radius: 4px;
-    border: 1px solid #F2F2F2;
-    padding-left: 25px;
-
-    &:nth-of-type(2) {
-      margin-left: 7px;
-    }
-
-    &.active {
-      background: linear-gradient(90deg, #000000 0%, #525050 100%);
-      border-radius: 4px;
-
-      span {
-        color: #FFFFFF;
-      }
-    }
-
-    .alipay {
-      width: 28px;
-      height: 28px;
-    }
-
-    span {
-      margin-left: 8px;
-      font-size: 14px;
-      font-family: PingFangSC-Semibold, PingFang SC;
-      font-weight: 600;
-      color: #231916;
-      line-height: 20px;
-    }
-
-    .wechat {
-      width: 26px;
-      height: 25px;
-    }
-
-    .icon {
-      position: absolute;
-      right: 0;
-      top: 0;
-      z-index: 1;
-      width: 20px;
-      height: 19px;
-    }
-  }
 }
 
 .af-popup-footer {