H5-订单可以退款

htmldev/dashboard/src/views/common/payment/index.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="payment-type">
+    <p :class="{'active': order_pay_type === 2}"
+       @click="onChange(2)">
+      <img
+        v-show="order_pay_type === 2"
+        alt=""
+        class="icon"
+        src="./image/ic_select@2x.png">
+      <img
+        v-show="order_pay_type === 2"
+        alt=""
+        class="alipay" src="./image/ic_Alipay_sel@2x.png">
+      <img
+        v-show="order_pay_type !== 2"
+        alt=""
+        class="alipay" src="./image/ic_Alipay_nor@2x.png">
+      <span>支付宝支付</span>
+    </p>
+    <p :class="{'active': order_pay_type === 1}"
+       @click="onChange(1)">
+      <img
+        v-show="order_pay_type === 1"
+        alt=""
+        class="icon"
+        src="./image/ic_select@2x.png">
+      <img
+        v-show="order_pay_type === 1"
+        alt=""
+        class="wechat"
+        src="./image/ic_WeChat_sel@2x.png">
+      <img
+        v-show="order_pay_type !== 1"
+        alt=""
+        class="wechat"
+        src="./image/ic_WeChat_nor@2x.png">
+      <span>微信支付</span>
+    </p>
+  </div>
+</template>
+
+<script>
+import { platform } from '../../../utils/platform'
+
+export default {
+  name: 'index',
+  data () {
+    return {
+      order_pay_type: 2 // 支付方式(1微信2支付宝)
+    }
+  },
+  created () {
+    this.init()
+  },
+  methods: {
+    init () {
+      if (platform.isWeixin) {
+        this.order_pay_type = 1
+      } else if (platform.isAlipay) {
+        this.order_pay_type = 2
+      }
+      this.$emit('onChange', this.order_pay_type)
+    },
+    onChange (val) {
+      this.$emit('onChange', val)
+      this.order_pay_type = val
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.payment-type {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  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;
+    background: #fff;
+
+    &:nth-of-type(2) {
+      margin-left: 7px;
+    }
+
+    &.active {
+      background: linear-gradient(90deg, #000000 0%, #525050 100%);
+
+      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;
+    }
+  }
+}
+</style>

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

@@ -127,7 +127,7 @@
             <p class="explain">
               <span
                 style="color: #D32323;"
-                v-for="(str, index) in '预定到店时间已不足8小时'"
+                v-for="(str, index) in '如预定到店时间不足8小时'"
                 :key="'a' + index">{{ str }}</span>
               <span
                 v-for="(str, index) in '，下单后不可退订，不可转让'"
@@ -245,7 +245,6 @@ export default {
     'objCurrentBarInfo.id': {
       immediate: true,
       handler: function () {
-        console.log(111)
         this.fetchPlaceList()
       }
     }

htmldev/dashboard/src/views/sell/pay/index.vue

@@ -38,12 +38,28 @@
         <p class="label">¥2700</p>
       </li>
     </ul>
+    <payment @onChange="handlePayment"/>
   </div>
 </template>
 
 <script>
+import payment from '../../common/payment'
+
 export default {
-  name: 'index'
+  name: 'index',
+  components: {
+    payment
+  },
+  data () {
+    return {
+      order_pay_type: 2
+    }
+  },
+  methods: {
+    handlePayment (val) {
+      this.order_pay_type = val
+    }
+  }
 }
 </script>