优化 组件代码
This commit is contained in:
wangsongsole
parent
29610fc82c
commit
67e35ce1b2
|
|
@ -136,7 +136,7 @@
|
|||
<!-- 弹出框 -->
|
||||
|
||||
<!-- 支付弹窗 -->
|
||||
<pay-pop :show="show" :active="active" @setShow="show = false" @payFunction="payFunction" :pay="false" />
|
||||
<pay-pop :show="show" :active="active" @setShow="show = false" @payFunction="payFunction" />
|
||||
|
||||
<!-- 弹出提示 -->
|
||||
<div class="popboxshow" v-if="popboxshow&&popBoxType=='提示'" :class="popboxshow?'active':''">
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
<tab-component :current="2"></tab-component>
|
||||
|
||||
<!-- 支付弹窗 -->
|
||||
<pay-pop :show="show" :active="active" @setShow="show = false" @payFunction="payFunction" :pay="false" />
|
||||
<pay-pop :show="show" :active="active" @setShow="show = false" @payFunction="payFunction" />
|
||||
</div>
|
||||
<script>
|
||||
new Vue({
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ const payPop = {
|
|||
template: `
|
||||
<div class="mask model" @touchmove.prevent @mousewheel.prevent v-if="show">
|
||||
<div class="model-box">
|
||||
<img class="coles" @click='show=false' src="./img/coles.png" alt="">
|
||||
<img class="coles" @click='colesFunction' src="./img/coles.png" alt="">
|
||||
<p class="money"><span class="sign">￥</span>128.00</p>
|
||||
<p class="title">选择支付方式</p>
|
||||
<div class="list">
|
||||
|
|
@ -23,7 +23,7 @@ const payPop = {
|
|||
<img class="icon-select" v-else src="./img/no-active.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<button @click='pay=true' class="pay">确认付款</button>
|
||||
<button @click='payFunction' class="pay">确认付款</button>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
|
@ -38,30 +38,22 @@ const payPop = {
|
|||
active: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
|
||||
/* 是否点击支付 */
|
||||
pay: {
|
||||
type: Object,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
show: function (va) {
|
||||
if (!va) {
|
||||
this._events.setshow[0](va)
|
||||
}
|
||||
methods: {
|
||||
/* 支付 */
|
||||
payFunction() {
|
||||
const us = navigator.userAgent
|
||||
let isSupport = false /* false:支持当前环境 true:不支持当前环境 */
|
||||
if (!!us.match(/DingTalk/gi) && this.active !== 2) isSupport = true
|
||||
if (!!us.match(/weiXin/gi) && this.active !== 1) isSupport = true
|
||||
this._events.payfunction[0](this.active, isSupport)
|
||||
},
|
||||
|
||||
pay: function (va) {
|
||||
if (va) {
|
||||
const us = navigator.userAgent
|
||||
let isSupport = false /* false:支持当前环境 true:不支持当前环境 */
|
||||
if (!!us.match(/DingTalk/gi) && this.active !== 2) isSupport = true
|
||||
if (!!us.match(/weiXin/gi) && this.active !== 1) isSupport = true
|
||||
this._events.payfunction[0](this.active, isSupport)
|
||||
}
|
||||
/* 关闭 */
|
||||
colesFunction() {
|
||||
this._events.setshow[0]()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,40 @@
|
|||
const tabComponent = {
|
||||
template: `
|
||||
<ul class="tabList">
|
||||
<li v-for="item in tabComponent.list" :key="item.id" @click='tabComponent.iconHandler(item)'>
|
||||
<li v-for="item in list" :key="item.id" @click='iconHandler(item)'>
|
||||
<img :src="current===item.id?item.checkedSrc:item.src" alt="">
|
||||
<p>{{item.text}}</p>
|
||||
</li>
|
||||
</ul>`,
|
||||
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
id: 1,
|
||||
src: "./img/home.png",
|
||||
checkedSrc: "./img/checked_home.png",
|
||||
link: "./couponCollection.html",
|
||||
text: "首页"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
src: "./img/order.png",
|
||||
checkedSrc: "./img/checked_order.png",
|
||||
link: "./myOrder.html",
|
||||
text: "订单"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
src: "./img/coupon.png",
|
||||
checkedSrc: "./img/checked_coupon.png",
|
||||
link: "./myCoupon.html",
|
||||
text: "我的券"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
/* tab选中下标 */
|
||||
current: {
|
||||
|
|
@ -14,33 +43,10 @@ const tabComponent = {
|
|||
}
|
||||
},
|
||||
|
||||
/* tab数据列表 */
|
||||
list: [
|
||||
{
|
||||
id: 1,
|
||||
src: "./img/home.png",
|
||||
checkedSrc: "./img/checked_home.png",
|
||||
link: "./couponCollection.html",
|
||||
text: "首页"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
src: "./img/order.png",
|
||||
checkedSrc: "./img/checked_order.png",
|
||||
link: "./myOrder.html",
|
||||
text: "订单"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
src: "./img/coupon.png",
|
||||
checkedSrc: "./img/checked_coupon.png",
|
||||
link: "./myCoupon.html",
|
||||
text: "我的券"
|
||||
methods: {
|
||||
/* 根据不同icon进行跳转 */
|
||||
iconHandler(item) {
|
||||
window.location.replace(item.link)
|
||||
}
|
||||
],
|
||||
|
||||
/* 根据不同icon进行跳转 */
|
||||
iconHandler(item) {
|
||||
window.location.replace(item.link)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue