Compare commits
18 Commits
huipay-h5
...
feature/sc
Author | SHA1 | Date |
---|---|---|
|
fa13deaf06 | 1 year ago |
|
21f8def0bb | 1 year ago |
|
c6215013a5 | 1 year ago |
|
40b141b041 | 1 year ago |
|
ae0fa499c6 | 2 years ago |
|
e0d29a0ac0 | 2 years ago |
|
1817c25a2f | 2 years ago |
|
437a6b283f | 2 years ago |
|
d95fe3d2f5 | 2 years ago |
|
3bd7221bd4 | 2 years ago |
|
ce47d55a1f | 2 years ago |
|
2481bf1438 | 2 years ago |
|
458edcfccd | 2 years ago |
|
094c46e762 | 2 years ago |
|
89a7fa337c | 2 years ago |
|
d464e32946 | 2 years ago |
|
432f7667f5 | 2 years ago |
|
c3839f37ef | 2 years ago |
@ -0,0 +1,66 @@ |
||||
<template> |
||||
<view> |
||||
<!-- 菜单功能 --> |
||||
<view class="backcor6 all-container pd-main" > |
||||
<view class="funcss" v-for="(item,index) in funcList" :key="index" @click="jumpdesfun(item)"> |
||||
<image :src="item.img" mode="widthFix" class="funicon"></image> |
||||
<view class="width100 font14 mart5">{{item.title}}</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data(){ |
||||
return{ |
||||
funcList:[ |
||||
{ |
||||
title: '申请分期', |
||||
url: './applyPeriod', |
||||
img: '/static/img/home4.png' |
||||
}, |
||||
{ |
||||
title: '贴息列表', |
||||
url: './feePaidList', |
||||
img: '/static/img/home4.png' |
||||
} |
||||
|
||||
], |
||||
merNo:'' |
||||
} |
||||
}, |
||||
onLoad(option){ |
||||
this.merNo = option.merNo; |
||||
}, |
||||
methods:{ |
||||
/** |
||||
* 跳转功能 |
||||
*/ |
||||
jumpdesfun(item) { |
||||
uni.navigateTo({ |
||||
url: item.url+"?merNo="+this.merNo |
||||
}) |
||||
|
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
// 菜单 |
||||
.funcss { |
||||
width: 33%; |
||||
height: 100px; |
||||
border-right: 1px solid #e8e8e8; |
||||
border-bottom: 1px solid #e8e8e8; |
||||
background-color: #FFFFFF; |
||||
text-align: center; |
||||
display: inline-block; |
||||
|
||||
.funicon { |
||||
width: 35px; |
||||
padding-top: 15px; |
||||
} |
||||
} |
||||
</style> |
@ -0,0 +1,620 @@ |
||||
<template> |
||||
<view> |
||||
<!-- tabs栏 --> |
||||
<view class=" mart10 marb20 alijus" v-if="showItem"> |
||||
<view class="font16 fcor333 paddtop5 paddbotm5 margle20 marRight20" |
||||
v-for="(item,index) in listData" @click="switchid(index)" |
||||
:class="[showItem.platformType == item.platformType ? 'fcor089 borbtom fontwig6' : ' borb ']" |
||||
:key="index"> |
||||
{{item.platformTypeName}} |
||||
</view> |
||||
</view> |
||||
<template v-if="showItem&&showItem.platformPeriod"> |
||||
<view class="marb20 fotct pd-main font15" :class="{'fcorred':showItem.platformPeriod.status==3,'green':showItem.platformPeriod.status==1,'yellow':showItem.platformPeriod.status==2}" > |
||||
{{showItem.platformPeriod | filterStatus}} |
||||
</view> |
||||
</template> |
||||
<view class="width100 line1"></view> |
||||
|
||||
|
||||
<view class="form-gorup backcorfff font15" style="padding-bottom: 60px;" v-if="showItem"> |
||||
|
||||
<!-- 开通银联分期 --> |
||||
<view class="dis-flex pd-main bor-botm1 flex-sp"> |
||||
<view class=" fontwig6 flex-s0">开通银联分期: |
||||
</view> |
||||
<switch disabled :checked="periodData.openUnionpay" @change="switch1Change" /> |
||||
</view> |
||||
|
||||
<!-- 注册资本 --> |
||||
<view class="dis-flex pd-main bor-botm1 flex-sp"> |
||||
<view class=" fontwig6 flex-s0">注册资本: |
||||
</view> |
||||
<input type="text" class=" flex-1 fotrt" v-model.trim="periodData.authCapital" placeholder-class="corf6 font15 fotrt" |
||||
placeholder="请输入注册资本"> |
||||
</view> |
||||
|
||||
<!-- 银联贴息方式,可多选 --> |
||||
<view class=" pd-main bor-botm1 "> |
||||
<view class=" fontwig6 marb10 ">银联贴息方式(可多选): |
||||
</view> |
||||
<!-- <checkbox-group @change="checkBoxChange"> |
||||
<view class="dis-flex flex-sp flex-wrap"> |
||||
<label v-for="(item,index) in unionpayFeePaidList" class=" marb5"> |
||||
<checkbox :value="item.id+''" :checked="item.isSelect" :disabled="!isShowMethodToUpdate" />{{item.name}} |
||||
</label> |
||||
</view> |
||||
</checkbox-group> --> |
||||
|
||||
<radio-group @change="checkBoxChange"> |
||||
<view class="dis-flex flex-sp flex-wrap "> |
||||
<label v-for="(item,index) in unionpayFeePaidList" class="marb5"> |
||||
<radio :value="item.id+''" :checked="item.isSelect" />{{item.name}} |
||||
</label> |
||||
</view> |
||||
</radio-group> |
||||
|
||||
</view> |
||||
<!-- 银联分期费率 --> |
||||
<view class=" pd-main bor-botm1 "> |
||||
<view class=" fontwig6 marb10 ">银联分期费率(1类银行):<text class="fn">范围(0~1)最多保留3位小数</text> |
||||
</view> |
||||
<view class="dis-flex flex-center marb10" v-for="(item,index) in periodData.unionpayRate1" :key="index"> |
||||
<view class="paddtright10">{{item.periodNum}}期</view> |
||||
<input class="rate" type="digit" v-model.trim="item.rate" :disabled="!isShowMethodToUpdate" placeholder-class="corf6 font15" |
||||
placeholder="请输入费率"> |
||||
<!-- <view v-else class="corf6 font15 rate">{{item.rate}}</view> --> |
||||
</view> |
||||
</view> |
||||
<view class=" pd-main bor-botm1 "> |
||||
<view class=" fontwig6 marb10 ">银联分期费率(2类银行):<text class="fn ">范围(0~1)最多保留3位小数</text> |
||||
</view> |
||||
<view class="dis-flex flex-center marb10" v-for="(item,index) in periodData.unionpayRate2" :key="index"> |
||||
<view class=" paddtright10">{{item.periodNum}}期</view> |
||||
|
||||
<input class="rate" type="digit" v-model.trim="item.rate" :disabled="!isShowMethodToUpdate" placeholder-class="corf6 font15" |
||||
placeholder="请输入费率"> |
||||
<!-- <view v-else class="corf6 font15 rate">{{item.rate}}</view> --> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 协议图片 --> |
||||
<view class=" pd-main bor-botm1 "> |
||||
<view class="dis-flex"> |
||||
<view class=" fontwig6 marb10 ">协议照片:</view> |
||||
<!-- <view class="flex-1"> |
||||
<view class="dis-flex flex-center"><image class="iconw40 height40p marRight10" mode="aspectFill" v-for="(item,index) in imgExampleValue" :key="index" :src="imgUrl+item" @click="previewImage(index,imgExampleValue)"></image></view> |
||||
<view class="corf6 font13 fotct">(示例照片)</view> |
||||
</view> --> |
||||
</view> |
||||
|
||||
<view class="imageUploadContainer flex-1"> |
||||
<view class="imageUploadList"> |
||||
<view class="imageItem" v-for="(item,index) in imgValue" :key="index"> |
||||
<image :src="imgUrl+item" mode="aspectFill" @click="previewImage(index,imgValue)" |
||||
:data-index="index"></image> |
||||
<view v-if="isShowMethodToUpdate" class="imageDel" @click="deleteImage(item)">x</view> |
||||
</view> |
||||
<view v-if="isShowMethodToUpdate" class="imageUpload" @click="upload">+</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<view class="footer-btn" v-if="isShowMethodToUpdate" > |
||||
<button class="backcor89 fcorfff" @click="apply">保存</button> |
||||
</view> |
||||
</view> |
||||
|
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
getDictionaryByCodeType, |
||||
apply, |
||||
getMerPlatformPeriodDetail, |
||||
|
||||
updateFeePaid, |
||||
} from '@/Utils/Api.js'; |
||||
|
||||
let app = getApp(); |
||||
export default { |
||||
data() { |
||||
return { |
||||
reqUrl: app.globalData.url, //请求地址 |
||||
imgUrl: app.globalData.imgUrl, //图片访问地址 |
||||
merNo: '', //商户号 |
||||
platformPeriodIndex: 0,//平台类型下标 |
||||
listData:[], |
||||
showItem:null, |
||||
|
||||
periodData: { |
||||
merNo: '', //商户号 |
||||
platformPeriodType: '', //平台类型 1:零零购 |
||||
openUnionpay: true, //开通银联分期 true:是 false:否 |
||||
unionpayFeePaid: '', // 银联贴息方式 ‘1,2,3’ |
||||
unionpayRate1: [], //银联分期费率(1类银行) |
||||
unionpayRate2: [], //银联分期费率(2类银行) |
||||
agreementPics: '', // 协议照片(多张) |
||||
authCapital:'',//注册资本 |
||||
}, |
||||
periodNumList:[],//分期数列表 |
||||
|
||||
|
||||
unionpayFeePaidList: [ //支持多选 |
||||
{ |
||||
id: 1, |
||||
name: '商户贴息', |
||||
isSelect: false |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: '用户贴息', |
||||
isSelect: false |
||||
}, |
||||
{ |
||||
id: 3, |
||||
name: '商户用户各一半', |
||||
isSelect: false |
||||
}, |
||||
], |
||||
imgValue: [], //协议照片 |
||||
imgExampleValue: ["/merchant/62/1694595101306.jpeg", "/merchant/62/1694595101306.jpeg"], //协议示例照片 |
||||
|
||||
} |
||||
}, |
||||
onLoad(option) { |
||||
this.merNo = option.merNo; |
||||
this.periodData.merNo = option.merNo; |
||||
|
||||
this.getDictionaryByCodeType(); //查询分期树 |
||||
|
||||
}, |
||||
computed:{ |
||||
/* 是否展示提供修改的按钮 */ |
||||
isShowMethodToUpdate(){ |
||||
if(this.showItem){ |
||||
return !this.showItem.platformPeriod||(this.showItem.platformPeriod&&this.showItem.platformPeriod.status==3) |
||||
}else{ |
||||
return false |
||||
} |
||||
|
||||
}, |
||||
}, |
||||
filters:{ |
||||
/* 状态 0:不可用 1:正常 2: 审核中 3:审核驳回 */ |
||||
filterStatus(type){ |
||||
switch (type.status) { |
||||
case 1: |
||||
return '正常'; |
||||
case 2: |
||||
return '审核中'; |
||||
case 3: |
||||
return '审核驳回:'+type.suggestionReject; |
||||
default: |
||||
return '未知'; |
||||
} |
||||
}, |
||||
|
||||
}, |
||||
methods: { |
||||
/* 平台类型change切换 */ |
||||
switchid(index) { |
||||
this.platformPeriodIndex = index; |
||||
this.showItem = this.listData[this.platformPeriodIndex]; |
||||
this.periodData.platformPeriodType = this.showItem.platformType; |
||||
|
||||
if(this.showItem.platformPeriod){ |
||||
this.periodData.openUnionpay = this.showItem.platformPeriod.openUnionpay; |
||||
this.periodData.unionpayFeePaid = this.showItem.platformPeriod.unionpayFeePaid; |
||||
this.periodData.unionpayRate1 =this.handleUnionpayRate(this.showItem.unionpayRate1); |
||||
this.periodData.unionpayRate2 = this.handleUnionpayRate(this.showItem.unionpayRate2); |
||||
this.periodData.agreementPics = this.showItem.platformPeriod.agreementPics; |
||||
this.periodData.authCapital = this.showItem.platformPeriod.authCapital; |
||||
this.imgValue =this.periodData.agreementPics.split(','); |
||||
}else{ |
||||
this.periodData.openUnionpay = true; |
||||
this.periodData.unionpayFeePaid = ""; |
||||
this.periodData.unionpayRate1 = this.handleUnionpayRate(this.periodNumList); |
||||
this.periodData.unionpayRate2 =this.handleUnionpayRate(this.periodNumList); |
||||
this.periodData.agreementPics = ""; |
||||
this.periodData.authCapital =""; |
||||
this.imgValue =[]; |
||||
} |
||||
|
||||
|
||||
|
||||
this.unionpayFeePaidList.forEach(item => { |
||||
item.isSelect = false; |
||||
if(this.periodData.unionpayFeePaid==item.id){ |
||||
item.isSelect = true; |
||||
} |
||||
}) |
||||
|
||||
}, |
||||
handleUnionpayRate(arr){ |
||||
let result = arr.map((item)=>{ |
||||
let rate = item.rate===''? '' : item.rate ; |
||||
return {"periodNum": item.periodNum,"rate":rate}; |
||||
}) |
||||
return result |
||||
}, |
||||
/* 开通银联分期切换 */ |
||||
switch1Change(e) { |
||||
this.periodData.openUnionpay = e.detail.value; |
||||
|
||||
}, |
||||
|
||||
/* 贴息方式change */ |
||||
checkBoxChange(e) { |
||||
|
||||
console.log(e.detail.value) |
||||
|
||||
this.periodData.unionpayFeePaid = e.detail.value; |
||||
|
||||
// let selectArr = e.detail.value; |
||||
// this.periodData.unionpayFeePaid = selectArr.join(','); |
||||
}, |
||||
/* 点击申请分期 */ |
||||
apply() { |
||||
if (!this.isVertify()) return; |
||||
|
||||
uni.showLoading({ |
||||
title: '加载中', |
||||
mask: true |
||||
}) |
||||
apply(this.periodData).then(res => { |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000') { |
||||
uni.showToast({ |
||||
title: res.return_data, |
||||
duration: 2000, |
||||
icon: 'none' |
||||
}) |
||||
this.getMerPlatformPeriodDetail(false) |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
duration: 2000, |
||||
icon: 'none' |
||||
}) |
||||
} |
||||
}) |
||||
|
||||
|
||||
}, |
||||
isVertify() { |
||||
if (this.periodData.platformPeriodType === '') { |
||||
uni.showToast({ |
||||
title: '请选择平台类型', |
||||
icon: 'none' |
||||
}) |
||||
return false |
||||
} |
||||
if (this.periodData.unionpayFeePaid === '') { |
||||
uni.showToast({ |
||||
title: '请选择银联贴息方式', |
||||
icon: 'none' |
||||
}) |
||||
return false |
||||
} |
||||
|
||||
if(this.periodData.authCapital == ''){ |
||||
uni.showToast({ |
||||
title: '请输入注册资本', |
||||
icon: 'none' |
||||
}) |
||||
return false |
||||
} |
||||
|
||||
|
||||
|
||||
// var reg = /^(([0-9]|[1][0-9])([.][0-9]{1,2})|([0-9]|1[0-9]|20))$/; |
||||
/* 0-1:最多保留三位小数 */ |
||||
let reg = /^((0+(\.\d{0,3})?)|1(\.0{0,3})?)$/; |
||||
|
||||
let unionpayRate1Bool = this.periodData.unionpayRate1.every((item) => { |
||||
if (!reg.test(item.rate)) { |
||||
item.rate = '' |
||||
} |
||||
return reg.test(item.rate) |
||||
}) |
||||
let unionpayRate2Bool = this.periodData.unionpayRate2.every((item) => { |
||||
|
||||
if (!reg.test(item.rate)) { |
||||
item.rate = '' |
||||
} |
||||
|
||||
return reg.test(item.rate) |
||||
}) |
||||
if (!unionpayRate1Bool) { |
||||
uni.showToast({ |
||||
title: '银联分期费率(1类银行)费率未填写完整', |
||||
icon: 'none' |
||||
}) |
||||
return false |
||||
} |
||||
if (!unionpayRate2Bool) { |
||||
uni.showToast({ |
||||
title: '银联分期费率(2类银行)费率未填写完整', |
||||
icon: 'none' |
||||
}) |
||||
return false |
||||
} |
||||
|
||||
if (this.imgValue.length == 0) { |
||||
uni.showToast({ |
||||
title: '请上传协议照片', |
||||
icon: 'none' |
||||
}) |
||||
return false |
||||
} else { |
||||
this.periodData.agreementPics = this.imgValue.join(","); |
||||
} |
||||
|
||||
return true; |
||||
}, |
||||
|
||||
/* 查询分期详情 */ |
||||
getMerPlatformPeriodDetail(bool=true) { |
||||
let params = { |
||||
merNo: this.merNo |
||||
} |
||||
if(bool){ |
||||
uni.showLoading({ |
||||
title: '加载中', |
||||
mask: true |
||||
}) |
||||
} |
||||
|
||||
|
||||
getMerPlatformPeriodDetail(params).then(res => { |
||||
if(bool){ |
||||
uni.hideLoading(); |
||||
} |
||||
|
||||
if (res.return_code == '000000') { |
||||
|
||||
this.listData = res.return_data; |
||||
if(this.listData.length>0){ |
||||
this.switchid(this.platformPeriodIndex); |
||||
} |
||||
|
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
duration: 2000, |
||||
icon: 'none' |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
|
||||
/* 查询分期数 */ |
||||
getDictionaryByCodeType() { |
||||
let params = { |
||||
codeType: 'PERIOD_NUMBER' |
||||
} |
||||
getDictionaryByCodeType(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
res.return_data.sort((item1, item2) => { |
||||
return item1.codeValue - item2.codeValue |
||||
}) |
||||
//分期列表 |
||||
this.periodNumList = res.return_data.map(item=>{ |
||||
return {"periodNum": item.codeValue,"rate": ""}; |
||||
}); |
||||
|
||||
this.getMerPlatformPeriodDetail(); //查询分期详情 |
||||
|
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
duration: 2000, |
||||
icon: 'none' |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
|
||||
//上传图片 |
||||
upload() { |
||||
let that = this; |
||||
uni.chooseImage({ |
||||
count: 1, |
||||
sizeType: ['compressed'], //可以指定是原图还是压缩图,默认二者都有 |
||||
sourceType: ['camera', 'album'], |
||||
success: function(res) { |
||||
const tempFilePaths = res.tempFilePaths; |
||||
that.uploadFile(tempFilePaths[0]); |
||||
}, |
||||
error: function(e) { |
||||
console.log(e); |
||||
} |
||||
}); |
||||
}, |
||||
//上传 |
||||
uploadFile(imgURL) { |
||||
const that = this; |
||||
uni.showLoading({ |
||||
title: "加载中...", |
||||
mask: true, |
||||
}) |
||||
uni.uploadFile({ |
||||
url: that.reqUrl + '/fileUpload/uploadfile', |
||||
filePath: imgURL, |
||||
header: { |
||||
"Authorization": app.globalData.token |
||||
}, |
||||
name: 'files', |
||||
success: function(uploadFileRes) { |
||||
uni.hideLoading() |
||||
that.getImgSignedUrl(JSON.parse(uploadFileRes.data).return_data[0]); |
||||
}, |
||||
fail: function(err) { |
||||
uni.hideLoading() |
||||
uni.showToast({ |
||||
title: err, |
||||
icon: 'none' |
||||
}) |
||||
} |
||||
}); |
||||
}, |
||||
//查看临时图片路径 |
||||
getImgSignedUrl(item1) { |
||||
this.imgValue.push(item1); |
||||
}, |
||||
// 删除图片 |
||||
deleteImage(data) { |
||||
let arr = this.imgValue.filter((item) => item != data); |
||||
this.imgValue = arr; |
||||
}, |
||||
// 预览 |
||||
previewImage(index,list) { |
||||
let arr = list.map(item=>{ |
||||
return this.imgUrl+item |
||||
}) |
||||
uni.previewImage({ |
||||
current: index, |
||||
indicator: "number", |
||||
loop: "true", |
||||
urls:arr |
||||
}) |
||||
}, |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
|
||||
.yellow{ |
||||
color:#f3a73f; |
||||
} |
||||
.green{ |
||||
color: #18bc37; |
||||
} |
||||
|
||||
.borbtom { |
||||
border-bottom: 3px solid #089bf5; |
||||
} |
||||
|
||||
.borb { |
||||
border-bottom: 3px solid transparent; |
||||
} |
||||
|
||||
i { |
||||
border: solid #000000; |
||||
border-width: 0 2px 2px 0; |
||||
display: inline-block; |
||||
padding: 4px; |
||||
margin-left: 10px; |
||||
vertical-align: 3px; |
||||
} |
||||
|
||||
.fn { |
||||
font-weight: normal; |
||||
font-size: 12px; |
||||
color: #3c3c3c; |
||||
} |
||||
|
||||
.down { |
||||
-webkit-transform: rotate(45deg); |
||||
} |
||||
|
||||
/* 表单 */ |
||||
.form-gorup { |
||||
padding: 20rpx; |
||||
margin-bottom: 20rpx; |
||||
border-radius: 20rpx; |
||||
|
||||
.rate { |
||||
height: 20px; |
||||
line-height: 20px; |
||||
border-radius: 10px; |
||||
border: 1px solid #089bf5; |
||||
padding: 5px 5px; |
||||
width:50%; |
||||
} |
||||
|
||||
} |
||||
|
||||
.flex-wrap { |
||||
flex-wrap: wrap; |
||||
} |
||||
|
||||
/* 底部按钮 */ |
||||
.footer-btn { |
||||
position: fixed; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
z-index: 99; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
button { |
||||
margin: 0 20px; |
||||
border-radius: 25px; |
||||
flex: 1; |
||||
height: 50px; |
||||
line-height: 50px; |
||||
} |
||||
} |
||||
|
||||
|
||||
/* 上传图片 */ |
||||
/* 图片 */ |
||||
.imageUploadContainer { |
||||
padding: 10upx 5upx; |
||||
margin: 10upx 5upx; |
||||
} |
||||
|
||||
|
||||
.imageUploadList { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
} |
||||
|
||||
.imageItem, |
||||
.imageUpload { |
||||
width: 200upx; |
||||
height: 200upx; |
||||
margin: 30upx 15upx 30upx; |
||||
} |
||||
|
||||
.imageDel { |
||||
position: relative; |
||||
left: 180upx; |
||||
bottom: 225upx; |
||||
background-color: rgba(0, 0, 0, 0.5); |
||||
width: 36upx; |
||||
text-align: center; |
||||
line-height: 35upx; |
||||
border-radius: 17upx; |
||||
color: white; |
||||
font-size: 30upx; |
||||
padding-bottom: 2upx; |
||||
} |
||||
|
||||
.imageItem image { |
||||
width: 200upx; |
||||
height: 200upx; |
||||
border-radius: 8upx; |
||||
} |
||||
|
||||
.imageUpload { |
||||
line-height: 200upx; |
||||
text-align: center; |
||||
font-size: 150upx; |
||||
color: #D9D9D9; |
||||
border: 1px solid #D9D9D9; |
||||
border-radius: 8upx; |
||||
} |
||||
</style> |
@ -0,0 +1,267 @@ |
||||
<template> |
||||
<view> |
||||
<!-- tabs栏 --> |
||||
<view class=" mart10 marb20 alijus"> |
||||
<view class="font16 fcor333 paddtop5 paddbotm5 margle20 marRight20" v-for="(item,index) in feePaidList" |
||||
@click="switchid(index)" :class="[showPaidItem.platformType == item.platformType ? 'fcor089 borbtom fontwig6' : ' borb ']" |
||||
:key="index"> |
||||
{{item.platformTypeName}} |
||||
</view> |
||||
</view> |
||||
<view class="width100 line1"></view> |
||||
|
||||
<view class="mart20 marb20"> |
||||
<view class="dis-flex height40 bor-botm1 backcor6"> |
||||
<view class="flex-1 fotct fontwig6">支付方式</view> |
||||
<view class="flex-1 fotct fontwig6">贴息方式</view> |
||||
<view class="flex-1 fotct fontwig6">操作</view> |
||||
</view> |
||||
|
||||
<view class="dis-flex bor-botm1 paddtop10 paddbotm10 " v-for="(item,index) in showPaidItem.payTypeList" |
||||
:key="index"> |
||||
|
||||
<view class="flex-1 fotct text1"> |
||||
{{item.payTypeName}} |
||||
</view> |
||||
<view class="flex-1 fotct "> |
||||
{{item.feePaidList | filterStatus}} |
||||
</view> |
||||
<view class="flex-1 fotct fcor089" > |
||||
<view v-if="showPaidItem.platformPeriod" @click.stop="openPupup(item)">编辑</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</view> |
||||
|
||||
|
||||
<!-- 编辑桌台 --> |
||||
<uni-popup ref="popupUpdateFeePaid" type="center"> |
||||
<view style="width: 80vw;" class="backcorfff border-10r pd-main font16" v-if="updatePaidDetail"> |
||||
<view class="dis-flex mart20 marb10 paddbotm10 bor-botm1"> |
||||
<view class=" marRight10 fontwig6 padleft15 paddtright10">平台类型: |
||||
</view> |
||||
<view class=" flex-1 "> |
||||
{{showPaidItem.platformTypeName}} |
||||
</view> |
||||
</view> |
||||
<view class="dis-flex mart20 marb10 paddbotm10 bor-botm1"> |
||||
<view class=" marRight10 fontwig6 padleft15 paddtright10">支付方式: |
||||
</view> |
||||
<view class=" flex-1 "> |
||||
{{updatePaidDetail.payTypeName}} |
||||
</view> |
||||
</view> |
||||
<view class=" mart20 marb10 paddbotm10 bor-botm1"> |
||||
<view class=" marRight10 fontwig6 padleft15 paddtright10 marb10">贴息方式: |
||||
</view> |
||||
<radio-group @change="radioChange"> |
||||
<view class="dis-flex flex-sp flex-wrap "> |
||||
<label v-for="(item,index) in updatePaidDetail.feePaidList" class="marb5"> |
||||
<radio :value="item.feePaid+''" :checked="item.currentSettle" />{{item.feePaid | filterFeePaid}} |
||||
</label> |
||||
</view> |
||||
</radio-group> |
||||
</view> |
||||
<button class="btnw50 " @click.stop="updateFeePaid()">保存</button> |
||||
</view> |
||||
</uni-popup> |
||||
|
||||
|
||||
|
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
getFeePaidList, |
||||
updateFeePaid, |
||||
} from '@/Utils/Api.js'; |
||||
export default { |
||||
data() { |
||||
return { |
||||
merNo: '', //商户号 |
||||
platformPeriodIndex: 0, |
||||
feePaidList: [], //数据列表 |
||||
feeList:[ |
||||
{ |
||||
id: 1, |
||||
name: '商户贴息', |
||||
|
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: '用户贴息', |
||||
|
||||
}, |
||||
{ |
||||
id: 3, |
||||
name: '商户用户各一半', |
||||
}, |
||||
], |
||||
updatePaidDetail: null, |
||||
updateParams: { |
||||
merNo: '', //商户号 |
||||
platformPeriodType: '', //平台类型 1:零零购 |
||||
payType: '', //支付方式 1: 银联分期 2:花呗分期 |
||||
feePaid: '', //贴息方式 1:商户贴息 2:用户贴息 3:商户用户各一半 |
||||
} |
||||
|
||||
} |
||||
}, |
||||
|
||||
computed: { |
||||
showPaidItem() { |
||||
if (this.feePaidList.length > 0) { |
||||
return this.feePaidList[this.platformPeriodIndex] |
||||
} else { |
||||
return [] |
||||
} |
||||
} |
||||
}, |
||||
filters: { |
||||
/* 1:商户贴息 2:用户贴息 3:商户用户各一半 */ |
||||
filterStatus(typeArr) { |
||||
if (typeArr.length == 0 || !typeArr) { |
||||
return '暂无' |
||||
} else { |
||||
let strArr = typeArr.filter(item => item.currentSettle); |
||||
switch (strArr[0].feePaid) { |
||||
case 1: |
||||
return '商户贴息'; |
||||
case 2: |
||||
return '用户贴息'; |
||||
case 3: |
||||
return '商户用户各一半'; |
||||
default: |
||||
return '未知'; |
||||
} |
||||
} |
||||
}, |
||||
filterFeePaid(type) { |
||||
switch (type) { |
||||
case 1: |
||||
return '商户贴息'; |
||||
case 2: |
||||
return '用户贴息'; |
||||
case 3: |
||||
return '商户用户各一半'; |
||||
default: |
||||
return '未知'; |
||||
} |
||||
} |
||||
}, |
||||
|
||||
onLoad(option) { |
||||
this.merNo = option.merNo; |
||||
this.updateParams.merNo = this.merNo; |
||||
this.getFeePaidList(); //查询贴息列表 |
||||
}, |
||||
methods: { |
||||
/*查询贴息列表 */ |
||||
getFeePaidList(bool=true) { |
||||
let params = { |
||||
merNo: this.merNo |
||||
} |
||||
if(bool){ |
||||
uni.showLoading({ |
||||
title: "加载中", |
||||
mask: true |
||||
}) |
||||
} |
||||
|
||||
getFeePaidList(params).then(res => { |
||||
if(bool){ |
||||
uni.hideLoading(); |
||||
} |
||||
|
||||
if (res.return_code == '000000') { |
||||
this.feePaidList = res.return_data; |
||||
if (this.feePaidList.length > 0) { |
||||
this.switchid(this.platformPeriodIndex) |
||||
} |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
duration: 2000, |
||||
icon: 'none' |
||||
}) |
||||
} |
||||
}) |
||||
|
||||
}, |
||||
/* 平台类型change切换 */ |
||||
switchid(index) { |
||||
this.platformPeriodIndex = index; |
||||
}, |
||||
openPupup(item) { |
||||
this.updatePaidDetail = item; |
||||
this.updateParams.platformPeriodType = this.showPaidItem.platformType; |
||||
this.updateParams.payType = item.payType; |
||||
this.updateParams.feePaid = item.feePaidList.filter(item => item.currentSettle)[0].feePaid; |
||||
|
||||
this.$refs.popupUpdateFeePaid.open('center'); |
||||
}, |
||||
//点击保存按钮 |
||||
updateFeePaid() { |
||||
if(this.updateParams.feePaid==''){ |
||||
uni.showToast({ |
||||
title:'请选择贴息方式', |
||||
icon:'none' |
||||
}) |
||||
return |
||||
} |
||||
uni.showLoading({ |
||||
title: "加载中", |
||||
mask: true |
||||
}) |
||||
updateFeePaid(this.updateParams).then(res=>{ |
||||
uni.hideLoading() |
||||
|
||||
this.$refs.popupUpdateFeePaid.close(); |
||||
|
||||
if (res.return_code == '000000') { |
||||
uni.showToast({ |
||||
title: res.return_data, |
||||
duration: 2000, |
||||
icon: 'none' |
||||
}) |
||||
|
||||
this.getFeePaidList(false); |
||||
|
||||
|
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
duration: 2000, |
||||
icon: 'none' |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
/* 贴息方式change */ |
||||
radioChange(e) { |
||||
this.updateParams.feePaid = e.detail.value |
||||
}, |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.borbtom { |
||||
border-bottom: 3px solid #089bf5; |
||||
} |
||||
|
||||
.borb { |
||||
border-bottom: 3px solid transparent; |
||||
} |
||||
|
||||
.border-10r { |
||||
border-radius: 10px; |
||||
} |
||||
|
||||
.flex-wrap{ |
||||
flex-wrap: wrap; |
||||
} |
||||
</style> |
@ -0,0 +1,371 @@ |
||||
<template> |
||||
<view class="all-container pd-main backcor6 font15"> |
||||
<view class=" width100 mart10"> |
||||
<button class="btns icon tianjia" @click.stop="clickToAdd()">新增</button> |
||||
</view> |
||||
<view class="mart20 backcorfff"> |
||||
<view class="dis-flex height40 bor-botm1"> |
||||
<view class="flex-1 fotct fontwig6 ">名称</view> |
||||
<!-- <view class="flex-1 fotct fontwig6">排序<text class="icon xia font14 "></text></view> --> |
||||
<view class="flex-1 fotct fontwig6">操作</view> |
||||
</view> |
||||
|
||||
<view class="dis-flex bor-botm1 paddtop10 paddbotm10 " @click="getCategory(item)" v-for="(item,index) in categoryList" :key="index"> |
||||
<view class="flex-1 fotct text1"> |
||||
{{item.name}} |
||||
</view> |
||||
<view class="flex-1 fotct dis-flex"> |
||||
<view class="marglerig fcorred" @click.stop="toDeleteCategory(item)"><text |
||||
class="icon shanchu font14 fcorred"></text>删除</view> |
||||
<view class="marglerig fcor41c" @click.stop="clickToAdd(item)"><text |
||||
class="icon bianji font14 fcor41c"></text>编辑</view> |
||||
<next-bubble-menu class="flex-1" :d-width="150" :dataList="item.status |filterDataList" |
||||
bingEleId="moreType" @change="getItem($event,item)"> |
||||
<view class="marglerig font15 " id="moreType">更多<text class="icon xia font14"></text></view> |
||||
</next-bubble-menu> |
||||
</view> |
||||
</view> |
||||
|
||||
|
||||
</view> |
||||
<!-- 弹窗编辑分类 --> |
||||
<uni-popup ref="inputDialog" type="dialog"> |
||||
<uni-popup-dialog ref="inputClose" mode="input" title="输入分类名称" :before-close="true" :value="categoryName" placeholder="请输入分类名称" |
||||
@confirm="dialogInputConfirm" @close="close"></uni-popup-dialog> |
||||
</uni-popup> |
||||
<wybPopup ref="popup" @hide="hide()" zIndex="999" type="bottom" height="500" width="500" :scrollY="true" |
||||
radius="6" :showCloseIcon="true"> |
||||
<view class="pop-contain pd-main"> |
||||
<view class="pop-title fontwig6"><text>详情</text></view> |
||||
<view class="dis-flex flex-wrap" v-if="categoryDetail"> |
||||
<view class="width100 dis-flex bor-botm1"> |
||||
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">分类名称</view> |
||||
<view class="flex-1 fotct ">{{categoryDetail.name}}</view> |
||||
</view> |
||||
<view class="width100 dis-flex bor-botm1"> |
||||
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">创建时间</view> |
||||
<view class="flex-1 fotct ">{{categoryDetail.createTime | timeFormat}}</view> |
||||
</view> |
||||
</view> |
||||
|
||||
|
||||
</view> |
||||
</wybPopup> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
editCategory, |
||||
getALLCategory, |
||||
delCategory, |
||||
sortUp, |
||||
sortDown, |
||||
getCategory |
||||
} from '@/Utils/groupBuying.js'; |
||||
import wybPopup from '@/components/wyb-popup/wyb-popup.vue'; |
||||
import nextBubleMenu from "@/components/next-bubble-menu/next-bubble-menu.vue"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
storeId: '', //门店id |
||||
categoryName: '', |
||||
categoryId: '', |
||||
categoryList: [], |
||||
categoryDetail: null, //分类详情 |
||||
} |
||||
}, |
||||
components: { |
||||
wybPopup, |
||||
nextBubleMenu |
||||
}, |
||||
filters: { |
||||
filterDataList(type) { |
||||
let arr; |
||||
arr = [{ |
||||
id: 1, |
||||
text: '详情', |
||||
}, { |
||||
id: 2, |
||||
text: '上移', |
||||
}, { |
||||
id: 3, |
||||
text: '下移', |
||||
}]; |
||||
|
||||
return arr |
||||
} |
||||
}, |
||||
onLoad(options) { |
||||
this.storeId = options.storeId; |
||||
}, |
||||
onShow() { |
||||
this.getALLCategory(true); //查询所有的分类列表 |
||||
}, |
||||
methods: { |
||||
clickToAdd(item) { |
||||
this.formatCategory() |
||||
|
||||
if (item) { |
||||
this.categoryId = item.id; |
||||
this.categoryName = item.name; |
||||
} |
||||
|
||||
this.$refs.inputDialog.open() |
||||
}, |
||||
/* 确定修改,编辑分类 */ |
||||
dialogInputConfirm(e) { |
||||
this.categoryName = e; |
||||
this.editCategory() |
||||
console.log(this.categoryName) |
||||
}, |
||||
/* 点击取消按钮触发 */ |
||||
close() { |
||||
this.formatCategory(); |
||||
this.$refs.inputDialog.close(); |
||||
}, |
||||
formatCategory() { |
||||
this.categoryName = ''; |
||||
this.categoryId = ''; |
||||
}, |
||||
/* 得到点击更多的 菜单选项 ,1:详情 2:上移 3:下移*/ |
||||
getItem(data, item) { |
||||
|
||||
if (data.id == 1) { //详情 |
||||
|
||||
this.getCategory(item); //查询分类详情 |
||||
} else if (data.id == 2) { //上移 |
||||
this.sortUp(item.id) |
||||
} else if (data.id == 3) { //下移 |
||||
this.sortDown(item.id) |
||||
} |
||||
console.log(data, item) |
||||
}, |
||||
/* 查询分类详情 */ |
||||
getCategory(item) { |
||||
uni.showLoading({ |
||||
title: '加载中' |
||||
}) |
||||
let params = { |
||||
id: item.id |
||||
} |
||||
getCategory(params).then(res => { |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000') { |
||||
this.categoryDetail = res.return_data; |
||||
this.$refs.popup.show(); |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
}).catch(() => { |
||||
uni.hideLoading(); |
||||
}) |
||||
|
||||
}, |
||||
hide() { |
||||
this.categoryDetail = null; |
||||
}, |
||||
/* 删除分类 */ |
||||
toDeleteCategory(item) { |
||||
let _this = this; |
||||
uni.showModal({ |
||||
title: '提示', |
||||
content: `确定删除‘${item.name}’这个分类吗?`, |
||||
success: function(res) { |
||||
if (res.confirm) { |
||||
let params = { |
||||
id: item.id |
||||
} |
||||
uni.showLoading({ |
||||
title: '删除中' |
||||
}) |
||||
delCategory(params).then(res => { |
||||
|
||||
uni.hideLoading(); |
||||
|
||||
let title; |
||||
if (res.return_code == '000000') { |
||||
title = res.return_data; |
||||
_this.getALLCategory(); |
||||
} else { |
||||
title = res.return_msg; |
||||
} |
||||
uni.showToast({ |
||||
title: title, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
}).catch(()=>{ |
||||
uni.hideLoading(); |
||||
}) |
||||
} else if (res.cancel) { |
||||
|
||||
// console.log('用户点击取消'); |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
/* 编辑,新增分类 */ |
||||
editCategory() { |
||||
|
||||
if(this.categoryName ==''){ |
||||
uni.showToast({ |
||||
title: "请输入分类名称", |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
return |
||||
} |
||||
|
||||
uni.showLoading({ |
||||
title: '加载中' |
||||
}) |
||||
let params = { |
||||
storeId: this.storeId, |
||||
name: this.categoryName, |
||||
} |
||||
if (this.categoryId) { |
||||
params.id = this.categoryId; |
||||
} |
||||
|
||||
editCategory(params).then(res => { |
||||
uni.hideLoading(); |
||||
this.formatCategory(); |
||||
this.$refs.inputDialog.close(); |
||||
if (res.return_code == '000000') { |
||||
this.getALLCategory(); |
||||
uni.showToast({ |
||||
title: res.return_data, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
}).catch(()=>{ |
||||
this.$refs.inputDialog.close(); |
||||
}) |
||||
|
||||
}, |
||||
/* 获取分类列表 */ |
||||
getALLCategory(flag) { |
||||
|
||||
if (flag) { |
||||
uni.showLoading({ |
||||
title: '加载中' |
||||
}) |
||||
} |
||||
|
||||
let params = { |
||||
storeId: this.storeId |
||||
} |
||||
getALLCategory(params).then(res => { |
||||
if (flag) { |
||||
uni.hideLoading() |
||||
} |
||||
if (res.return_code == '000000') { |
||||
this.categoryList = res.return_data; |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
/* 上移 */ |
||||
sortUp(id) { |
||||
let params = { |
||||
id: id |
||||
} |
||||
sortUp(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
this.getALLCategory() |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
/* 下移 */ |
||||
sortDown(id) { |
||||
let params = { |
||||
id: id |
||||
} |
||||
sortDown(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
this.getALLCategory() |
||||
|
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.btns { |
||||
width: 21%; |
||||
height: 35px; |
||||
line-height: 35px; |
||||
background-color: #0083f5; |
||||
color: #FFFFFF; |
||||
font-weight: bold; |
||||
font-size: 12px; |
||||
padding: 0px; |
||||
margin: 0 0 0 auto; |
||||
} |
||||
|
||||
/* 弹窗 */ |
||||
.pop-contain { |
||||
text-align: center; |
||||
padding-top: 50px; |
||||
background-color: #ffffff; |
||||
|
||||
.pop-title { |
||||
text-align: center; |
||||
height: 50px; |
||||
line-height: 50px; |
||||
font-size: 18px; |
||||
position: fixed; |
||||
z-index: 10; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
background: #ffffff; |
||||
|
||||
} |
||||
} |
||||
|
||||
.flex-wrap { |
||||
flex-wrap: wrap; |
||||
} |
||||
|
||||
.titleWidth { |
||||
min-width: 80px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.minheight40 { |
||||
padding: 15px 0; |
||||
} |
||||
</style> |
@ -1,22 +1,265 @@ |
||||
<template> |
||||
<view> |
||||
========={{key}}======== |
||||
</view> |
||||
<view class="all-container backcor9 pd-main font15"> |
||||
<view v-if="detailData"> |
||||
<view class="border-8r backcorfff marb10 pd-main border-box " > |
||||
<view class="bgLight border-8r paddbotm15 fcorfff"> |
||||
<view class="pd10 "> |
||||
<view class="font22 fontwig6 fontspec">{{detailData.name}}</view> |
||||
<view class=" dis-flex margle font18 mart10 "> |
||||
<view class=" dis-flex fontspec">现价:¥<view class="font18 fontwig6 ">{{detailData.price}}</view> |
||||
</view> |
||||
<view class="corf6 dis-flex fontspec margle text-lt font13" v-if="detailData.originalPrice">原价:¥<view>{{detailData.originalPrice}}</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class=" width100 circle pr"> |
||||
<view class="border-dash width100"></view> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class=" paddtop10"> |
||||
<view class="dis-flex marb5" > |
||||
<view class="flex-s0 fcor333 paddtright10 fontwig6">限制</view> |
||||
<view class="dis-flex flex-1"> |
||||
{{detailData.astrict}} |
||||
</view> |
||||
</view> |
||||
<view class="dis-flex marb5" > |
||||
<view class="flex-s0 fcor333 paddtright10 fontwig6">须知</view> |
||||
<view class="dis-flex flex-1"> |
||||
<text>{{detailData.serviceTime}}</text> |
||||
<text class="icon-ymt to-right font13 fontColor "></text> |
||||
</view> |
||||
</view> |
||||
<!-- <view class="dis-flex marb5" > |
||||
<view class="flex-s0 fcor333 paddtright10 fontwig6">保障</view> |
||||
<view class="dis-flex flex-1"> |
||||
<text>随时退</text> |
||||
</view> |
||||
</view> --> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class=" font16 fontwig6 paddtop10 paddbotm10 "> |
||||
团购 |
||||
</view> |
||||
<view class="border-8r backcorfff marb10 font14 pd-main border-box " v-if="detailData.groupDetails"> |
||||
<view :class=" 'paddbotm5 '+(index<detailData.groupDetails.length-1?'border-b-666':'') " |
||||
v-for="(item,index) in detailData.groupDetails" :key="index"> |
||||
<view class="dis-flex paddtop5 "> |
||||
<view class="dot bgb2"></view> |
||||
<view class="fontwig6"> |
||||
{{item.name}} |
||||
</view> |
||||
</view> |
||||
<view class=" dis-flex flex-sp " v-for="(item2,index2) in item.list" :key="item2.id"> |
||||
<view class="flex-1 fc333 paddleft10 dis-flex "> |
||||
<view class="dot bg33"></view> |
||||
<view class="dis-flex flex-1 flex-sp"> |
||||
<view>{{item2.productName}}</view> |
||||
<view>({{item2.count}}份)</view> |
||||
</view> |
||||
</view> |
||||
<!-- <view class="flex-s0 paddleft10"> |
||||
¥{{item2.price}} |
||||
</view> --> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class=" font16 fontwig6 paddtop10 paddbotm10 "> |
||||
购买须知 |
||||
</view> |
||||
<view class="border-8r backcorfff marb10 font14 pd-main border-box "> |
||||
<view class=" paddbotm5 border-b-666 "> |
||||
<view class=" paddtop5 fontwig6">有效期</view> |
||||
<view class=" dis-flex paddleft10"> |
||||
<view class="dot bgb2"></view> |
||||
<view> |
||||
{{detailData.validity.replace(',','至') || ''}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class=" paddbotm5 border-b-666 "> |
||||
<view class=" paddtop5 fontwig6">使用时间</view> |
||||
<view class=" dis-flex paddleft10"> |
||||
<view class="dot bgb2"></view> |
||||
<view> |
||||
{{detailData.serviceTime || ''}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class=" paddbotm5 " v-if="detailData.storeGroupServeRule"> |
||||
<view class=" paddtop5 fontwig6">使用规则</view> |
||||
<view class=" dis-flex paddleft10"> |
||||
<view class="dot bgb2"></view> |
||||
<view> |
||||
{{detailData.storeGroupServeRule.content || ''}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="btn92 mart10 marb10" @click="comfirmVerify()"> |
||||
立即核销 |
||||
</view> |
||||
</view> |
||||
|
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data(){ |
||||
return{ |
||||
key:'', |
||||
import {getGroupContentByCode,gorOrderNotify} from '@/Utils/groupBuying.js'; |
||||
|
||||
const app = getApp(); |
||||
export default { |
||||
data(){ |
||||
return{ |
||||
groupCode:'', |
||||
detailData:null,//详情信息 |
||||
imgUrl: app.globalData.imgUrl, //图片访问地址 |
||||
instructionList:[],//使用须知 |
||||
|
||||
} |
||||
}, |
||||
onLoad(option){ |
||||
if(option.orderKey){ |
||||
this.groupCode = option.orderKey; |
||||
this.getGroupContentByCode();//查询信息 |
||||
} |
||||
|
||||
}, |
||||
methods:{ |
||||
getGroupContentByCode(){ |
||||
let params={ |
||||
groupCode:this.groupCode |
||||
} |
||||
uni.showLoading({ |
||||
title:"加载中...", |
||||
mask:true, |
||||
}) |
||||
getGroupContentByCode(params).then(res=>{ |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000') { |
||||
this.detailData = res.return_data; |
||||
|
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
/* 立即核销 */ |
||||
comfirmVerify(){ |
||||
uni.showLoading({ |
||||
title:"核销中...", |
||||
mask:true, |
||||
}) |
||||
let params={ |
||||
groupCode:this.groupCode, |
||||
storeId:app.globalData.userInfo.store.id |
||||
} |
||||
gorOrderNotify(params).then(res=>{ |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000') { |
||||
uni.showToast({ |
||||
title:res.return_data, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
// setTimeout(()=>{ |
||||
// uni.navigateBack(); |
||||
// },1000) |
||||
|
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
} |
||||
}, |
||||
onLoad(option){ |
||||
this.key = option.orderKey; |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
<style lang="scss" scoped> |
||||
.pr { |
||||
position: relative; |
||||
} |
||||
|
||||
.border-box{ |
||||
box-sizing: border-box; |
||||
} |
||||
.text-lt{ |
||||
text-decoration: line-through; |
||||
} |
||||
/* ======== */ |
||||
|
||||
.bgLight { |
||||
background-color: #089bf5; |
||||
} |
||||
|
||||
.pd10 { |
||||
padding: 10px; |
||||
} |
||||
|
||||
.border-dash { |
||||
border-bottom: 1px dashed #f6f6f6; |
||||
position: absolute; |
||||
top: 9px; |
||||
} |
||||
|
||||
.circle { |
||||
height:40px; |
||||
&::before { |
||||
content: ""; |
||||
width: 20px; |
||||
height: 20px; |
||||
background-color: #ffffff; |
||||
position: absolute; |
||||
left: -10px; |
||||
top: 0px; |
||||
display: block; |
||||
z-index: 99; |
||||
border-radius: 50%; |
||||
} |
||||
|
||||
&::after { |
||||
content: ""; |
||||
display: block; |
||||
width: 20px; |
||||
height: 20px; |
||||
background-color: #ffffff; |
||||
position: absolute; |
||||
right: -10px; |
||||
top: 0px; |
||||
z-index: 99; |
||||
border-radius: 50%; |
||||
|
||||
} |
||||
} |
||||
|
||||
//end |
||||
|
||||
//content |
||||
.dot { |
||||
width: 5px; |
||||
height: 5px; |
||||
border-radius: 50%; |
||||
flex-shrink: 0; |
||||
margin-right: 8px; |
||||
|
||||
&.bgb2 { |
||||
background-color: #b2b2b2; |
||||
} |
||||
|
||||
&.bg33 { |
||||
background-color: #333333; |
||||
} |
||||
} |
||||
</style> |
@ -0,0 +1,436 @@ |
||||
<template> |
||||
<view> |
||||
|
||||
<view class="headsearch width94 mart15 paddtop5 paddbotm10 fotct"> |
||||
|
||||
<view class="mart10 width90 alijusstart"> |
||||
<view class="fcorfff font14 margleri10 width60 fotlt">开始时间 :</view> |
||||
<picker mode="date" :value="startdate" :start="startDate" :end="endDate" @change="bindDateChange"> |
||||
<view class="datetim fcorfff">{{startdate}}<i class="down"></i></view> |
||||
</picker> |
||||
</view> |
||||
<view class="mart10 width90 alijusstart"> |
||||
<view class="fcorfff font14 margleri10 width60 fotlt">结束时间 :</view> |
||||
<picker mode="date" :value="enddate" :start="startDate" :end="endDate" @change="bindDateChange1"> |
||||
<view class="datetim fcorfff">{{enddate}}<i class="down"></i></view> |
||||
</picker> |
||||
</view> |
||||
|
||||
<view class="mart15 width90 alijusstart" v-if="userInfo.secUser.objectType == 2"> |
||||
<view class="fcorfff font14 margleri10 width25 fotlt">业务员 :</view> |
||||
<picker mode="selector" class="width75" :range="salesmanList" range-key="name" |
||||
@change="bindDateChange4"> |
||||
<view class="fcorfff fotrt font14" v-if="salesmanname">{{salesmanname}}<i class="down"></i></view> |
||||
<view class="fcorfff fotrt font14" v-else>请选择<i class="down"></i></view> |
||||
</picker> |
||||
</view> |
||||
|
||||
<view class="mart15 width90 alijusstart" |
||||
v-if="userInfo.secUser.objectType == 2 || userInfo.secUser.objectType == 3"> |
||||
<view class="fcorfff font14 margleri10 width25 fotlt">商户 :</view> |
||||
<picker mode="selector" class="width75" :range="merList" range-key="merName" @change="bindDateChange2"> |
||||
<view class="fcorfff fotrt font14" v-if="merName">{{merName}}<i class="down"></i></view> |
||||
<view class="fcorfff fotrt font14" v-else>请选择<i class="down"></i></view> |
||||
</picker> |
||||
</view> |
||||
|
||||
<view class="mart15 width90 alijusstart" |
||||
v-if="userInfo.secUser.objectType == 2 || userInfo.secUser.objectType == 3 || userInfo.secUser.objectType == 4"> |
||||
<view class="fcorfff font14 margleri10 width25 fotlt">门店 :</view> |
||||
<picker mode="selector" class="width75" :range="storeListByMer" range-key="name" |
||||
@change="bindDateChange3"> |
||||
<view class="fcorfff fotrt font14" v-if="storename">{{storename}}<i class="down"></i></view> |
||||
<view class="fcorfff fotrt font14" v-else>请选择<i class="down"></i></view> |
||||
</picker> |
||||
</view> |
||||
|
||||
<view class="input-box"> |
||||
<view class="icon search"></view> |
||||
<input placeholder="请输入订单编号" v-model="orderNo" placeholder-style="color:#c0c0c0;" @input="toSearch()" /> |
||||
</view> |
||||
</view> |
||||
|
||||
|
||||
<view class="width100 height90 backcorfff marb5 mart15" style="border-radius: 22px 0 22px 0;"> |
||||
<view class="width100 fotct height40p alijus font20 fcor333"> |
||||
<view class="width50"> |
||||
{{totalPrice}} 元 |
||||
</view> |
||||
<view class="width50 "> |
||||
{{totalNum}} 笔 |
||||
</view> |
||||
<!-- <view style="width: 1px;" class="height80 backcor6"></view> --> |
||||
</view> |
||||
<view class="width100 fotct height40p alijus font14 fcor333"> |
||||
<view class="width50 "> |
||||
交易金额 |
||||
</view> |
||||
<view class="width50"> |
||||
交易笔数 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view v-if="notesList == ''" class="mart60 fotct font14 fcor666"> |
||||
<image mode="widthFix" style="width: 70vw;" src="/static/img/noorder.png"></image> |
||||
</view> |
||||
<view class="width100 backcorfff" v-for="(item,index) in notesList" :key="index" |
||||
@click="jumpOderdetails(item.outTradeNo)"> |
||||
<view class="width94 paddtop10 paddbotm10 alijusstart bor-botm1"> |
||||
<view class="width15"> |
||||
<image src="/static/img/wechat.png" mode="widthFix" class="iconw40" |
||||
v-if="item.payMode == 'WECHAT'"></image> |
||||
<image src="/static/img/alipay.png" mode="widthFix" class="iconw40" |
||||
v-if="item.payMode == 'ALIPAY'"></image> |
||||
</view> |
||||
|
||||
<view class="width85"> |
||||
<view class="font15 fcor666 width100">{{item.outTradeNo}}</view> |
||||
<view class="alijusstart font14 fcor999"> |
||||
<view class="width50 text1">扫一扫</view> |
||||
<view class="width50 fotrt">{{statusList[item.status]}}</view> |
||||
</view> |
||||
<view class="alijusstart font14 paddtop5 fcor999"> |
||||
<view class="width15 text1" v-if="userInfo.secUser.objectType == 2">{{item.salesmanName}}</view> |
||||
<view class="width85 text1" v-if="userInfo.secUser.objectType != 2">{{item.storeName}}</view> |
||||
<view class="width85 fotrt" v-if="userInfo.secUser.objectType == 2">{{item.storeName}}</view> |
||||
</view> |
||||
<view class="alijusstart font14 paddtop5 fcor999"> |
||||
<view class="width70">{{item.createTime | timeFormat('yyyy-mm-dd hh:mm:ss')}} |
||||
</view> |
||||
<view class="width30 fotrt">¥ {{item.tradeAmount}}</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
|
||||
<!-- <view @click="scanCode()"> |
||||
扫码核销 |
||||
</view> --> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
getTradeOrderList, |
||||
getMerList, |
||||
getStoreListByMer, |
||||
querySalesmanList |
||||
} from '@/Utils/Api.js'; |
||||
let app = getApp(); |
||||
export default { |
||||
data() { |
||||
const currentDate = this.getDate({ |
||||
format: true |
||||
}) |
||||
return { |
||||
startdate: currentDate, |
||||
enddate: currentDate, |
||||
notesList: [], |
||||
statusList: { |
||||
1: "待支付", |
||||
2: "支付中", |
||||
3: "支付成功", |
||||
4: "支付失败", |
||||
5: "已取消", |
||||
6: "已退款" |
||||
}, |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
isNoMoreData: false, //是否加载中 |
||||
orderNo: '', //订单编号 |
||||
totalPrice: 0, //总价格 |
||||
totalNum: 0, //总笔数 |
||||
userInfo: app.globalData.userInfo, //登录信息 |
||||
merList: [], // 商户列表 |
||||
merno: '', //商户编号 |
||||
merName: '', //商户名称 |
||||
storeListByMer: [], //门店列表 |
||||
storeno: '', //门店编号 |
||||
storename: '', //门店名称, |
||||
salesmanList: [], //业务员列表 |
||||
salesmanid: '', //业务员id |
||||
salesmanname: '', //业务员名称 |
||||
} |
||||
}, |
||||
computed: { |
||||
startDate() { |
||||
return this.getDate('start'); |
||||
}, |
||||
endDate() { |
||||
return this.getDate('end'); |
||||
} |
||||
}, |
||||
onLoad() { |
||||
//代理商 |
||||
if (this.userInfo.secUser.objectType == 2) { |
||||
this.querySalesmanList(); |
||||
} |
||||
//业务员 |
||||
if (this.userInfo.secUser.objectType == 3) { |
||||
this.getMerList(this.userInfo.salesman.id); |
||||
} |
||||
//商户 |
||||
if (this.userInfo.secUser.objectType == 4) { |
||||
this.getStoreListByMer(this.userInfo.mer.id); |
||||
} |
||||
this.getTradeOrderList(); |
||||
}, |
||||
onReachBottom() { |
||||
this.getTradeOrderList(); |
||||
}, |
||||
|
||||
methods: { |
||||
scanCode(){ |
||||
// wx.scanQRCode({ |
||||
// needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果, |
||||
// scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有 |
||||
// success: function (res) { |
||||
// var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果 |
||||
// } |
||||
// }); |
||||
}, |
||||
//代理商查询业务员 |
||||
querySalesmanList() { |
||||
let datas = { |
||||
pageNum: 1, |
||||
pageSize: 9999, |
||||
agentId: this.userInfo.agent.id |
||||
} |
||||
querySalesmanList(datas).then(res => { |
||||
if (res.return_code == '000000' && res.return_data.list != '') { |
||||
this.salesmanList = res.return_data.list; |
||||
// this.salesmanid = res.return_data.list[0].id; |
||||
// this.getStoreListByMer(res.return_data.list[0].id); |
||||
// this.salesmanname = res.return_data.list[0].name; |
||||
} |
||||
}) |
||||
}, |
||||
//业务员查询商户 |
||||
getMerList(item) { |
||||
let datas = { |
||||
pageNum: 1, |
||||
pageSize: 9999, |
||||
merStatus:1, |
||||
salesmanId: item |
||||
} |
||||
getMerList(datas).then(res => { |
||||
if (res.return_code == '000000' && res.return_data.list != '') { |
||||
this.merList = res.return_data.list; |
||||
// this.merno = res.return_data.list[0].id; |
||||
// this.getStoreListByMer(res.return_data.list[0].id); |
||||
// this.merName = res.return_data.list[0].merName; |
||||
} |
||||
}) |
||||
}, |
||||
//商户查询门店 |
||||
getStoreListByMer(item) { |
||||
let datas = { |
||||
pageNum: 1, |
||||
pageSize: 9999, |
||||
merId: item |
||||
} |
||||
getStoreListByMer(datas).then(res => { |
||||
if (res.return_code == '000000' && res.return_data.list != '') { |
||||
this.storeListByMer = res.return_data.list; |
||||
// this.storeno = res.return_data.list[0].id; |
||||
// this.storename = res.return_data.list[0].name; |
||||
} |
||||
}) |
||||
}, |
||||
//时间修改 |
||||
getDate(type) { |
||||
const date = new Date(); |
||||
let year = date.getFullYear(); |
||||
let month = date.getMonth() + 1; |
||||
let day = date.getDate(); |
||||
|
||||
if (type === 'start') { |
||||
year = year - 60; |
||||
} else if (type === 'end') { |
||||
year = year + 2; |
||||
} |
||||
month = month > 9 ? month : '0' + month;; |
||||
day = day > 9 ? day : '0' + day; |
||||
return `${year}-${month}-${day}`; |
||||
}, |
||||
//选择时间 |
||||
bindDateChange(e) { |
||||
this.startdate = e.target.value; |
||||
this.pageNum = 1; |
||||
this.notesList = []; |
||||
this.isNoMoreData = false; |
||||
this.getTradeOrderList(); |
||||
}, |
||||
bindDateChange1(e) { |
||||
this.enddate = e.target.value; |
||||
this.pageNum = 1; |
||||
this.notesList = []; |
||||
this.isNoMoreData = false; |
||||
this.getTradeOrderList(); |
||||
}, |
||||
//业务员 |
||||
bindDateChange4(e) { |
||||
this.salesmanid = this.salesmanList[e.target.value].id; |
||||
this.salesmanname = this.salesmanList[e.target.value].name; |
||||
this.getMerList(this.salesmanList[e.target.value].id); |
||||
this.pageNum = 1; |
||||
this.notesList = []; |
||||
this.isNoMoreData = false; |
||||
this.getTradeOrderList(); |
||||
}, |
||||
//商户 |
||||
bindDateChange2(e) { |
||||
this.merno = this.merList[e.target.value].id; |
||||
this.merName = this.merList[e.target.value].merName; |
||||
this.getStoreListByMer(this.merList[e.target.value].id); |
||||
this.pageNum = 1; |
||||
this.notesList = []; |
||||
this.isNoMoreData = false; |
||||
this.getTradeOrderList(); |
||||
}, |
||||
//门店 |
||||
bindDateChange3(e) { |
||||
this.storeno = this.storeListByMer[e.target.value].id; |
||||
this.storename = this.storeListByMer[e.target.value].name; |
||||
this.pageNum = 1; |
||||
this.notesList = []; |
||||
this.isNoMoreData = false; |
||||
this.getTradeOrderList(); |
||||
}, |
||||
|
||||
toSearch() { |
||||
this.pageNum = 1; |
||||
this.notesList = []; |
||||
this.isNoMoreData = false; |
||||
this.getTradeOrderList(); |
||||
}, |
||||
//查询列表 |
||||
getTradeOrderList() { |
||||
uni.showLoading({ |
||||
title: '加载中...' |
||||
}) |
||||
if (this.isNoMoreData) { |
||||
uni.hideLoading() |
||||
return false; |
||||
} |
||||
let a = new Date(this.startdate).getTime(); |
||||
let b = new Date(this.enddate).getTime(); |
||||
let startTime = a - 28800000; |
||||
let endTime = b + 57599000; |
||||
let pagenum = this.pageNum; |
||||
let datas = { |
||||
status: 3, |
||||
payTimeS: startTime, |
||||
payTimeE: endTime, |
||||
outTradeNo: this.orderNo, |
||||
pageNum: pagenum, |
||||
salesmanId:this.salesmanid, |
||||
merId: this.merno, |
||||
storeId: this.storeno, |
||||
pageSize: this.pageSize |
||||
} |
||||
getTradeOrderList(datas).then(res => { |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000' && res.return_data.pageInfo.list) { |
||||
this.totalPrice = res.return_data.totalPrice; |
||||
this.totalNum = res.return_data.totalNum; |
||||
this.isNoMoreData = res.return_data.pageInfo.list.length == this.pageSize ? false : true; |
||||
this.notesList = this.notesList.concat(res.return_data.pageInfo.list); |
||||
if (res.return_data.pageInfo.total == (this.pageNum * this.pageSize)) { |
||||
this.isNoMoreData = true; |
||||
} |
||||
this.pageNum = res.return_data.pageInfo.list.length == this.pageSize ? ++pagenum : pagenum; |
||||
} else { |
||||
this.notesList = []; |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
duration: 2000, |
||||
icon: 'none' |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
//跳转详情 |
||||
jumpOderdetails(item) { |
||||
uni.navigateTo({ |
||||
url: '/pages/index/order-list-details/order-list-details?orderid=' + item |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
page { |
||||
background-color: #f8f9f9; |
||||
} |
||||
|
||||
.input-box { |
||||
width: 90%; |
||||
margin-left: 5%; |
||||
margin-top: 15px; |
||||
margin-bottom: 15px; |
||||
height: 70rpx; |
||||
background-color: #f5f5f5; |
||||
border-radius: 10rpx; |
||||
position: relative; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.icon { |
||||
display: flex; |
||||
align-items: center; |
||||
position: absolute; |
||||
top: 2px; |
||||
left: 5px; |
||||
width: 60upx; |
||||
height: 60upx; |
||||
font-size: 34upx; |
||||
color: #c0c0c0; |
||||
} |
||||
|
||||
input { |
||||
padding-left: 50upx; |
||||
height: 28upx; |
||||
font-size: 28upx; |
||||
width: 100%; |
||||
} |
||||
} |
||||
|
||||
i { |
||||
border: solid #ffffff; |
||||
border-width: 0 2px 2px 0; |
||||
display: inline-block; |
||||
padding: 4px; |
||||
margin-left: 10px; |
||||
vertical-align: 3px; |
||||
} |
||||
|
||||
.down { |
||||
-webkit-transform: rotate(45deg); |
||||
} |
||||
|
||||
.font306adb { |
||||
color: #306adb; |
||||
} |
||||
|
||||
.stus { |
||||
float: right; |
||||
margin-right: 20px; |
||||
} |
||||
|
||||
.headsearch { |
||||
border-radius: 8px; |
||||
background-color: #4c7fe6; |
||||
} |
||||
|
||||
.datetim { |
||||
width: 130px; |
||||
height: 30px; |
||||
line-height: 30px; |
||||
text-align: right; |
||||
border-radius: 15px; |
||||
} |
||||
</style> |
@ -0,0 +1,251 @@ |
||||
<template> |
||||
<view class="all-container pd-main font15"> |
||||
<view class="mart20 backcorfff" v-if="orderDetail"> |
||||
<!-- <view class="dis-flex flex-wrap" > |
||||
<view class="width100 dis-flex bor-botm1"> |
||||
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">用餐桌名</view> |
||||
<view class="flex-1 fotct ">{{orderDetail.order.tableName}}</view> |
||||
</view> |
||||
<view class="width100 dis-flex bor-botm1"> |
||||
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">用餐人数</view> |
||||
<view class="flex-1 fotct ">{{orderDetail.order.peopleNum}}</view> |
||||
</view> |
||||
</view> --> |
||||
<view class="mart20 backcorfff"> |
||||
<view class="dis-flex height40 bor-botm1 backcor6"> |
||||
<view class="flex-1 fotct fontwig6 " ></view> |
||||
<view class="flex-1 fotct fontwig6">名称</view> |
||||
<view class="flex-1 fotct fontwig6">单价</view> |
||||
<view class="flex-1 fotct fontwig6">数量</view> |
||||
<view class="flex-1 fotct fontwig6">操作</view> |
||||
</view> |
||||
|
||||
<view class="dis-flex bor-botm1 paddtop5 paddbotm5 fon15" v-for="(item,index) in orderDetail.product" @click="cilckToShowDetail(item)" :key="index"> |
||||
<view class="flex-1 fotct"> |
||||
<image :src="imgUrl+item.productImg" mode="aspectFit" class="width100 height60 verc"></image> |
||||
</view> |
||||
<view class="flex-1 fotct text1">{{item.productName}}</view> |
||||
<view class="flex-1 fotct">{{item.productPrice}}</view> |
||||
<view class="flex-1 fotct ">{{item.productNum}}</view> |
||||
|
||||
<view class="flex-1 fotct fcor41c " @click.stop="clickToEdit(item)"><text class="icon bianji font15 fcor41c"></text>编辑</view> |
||||
</view> |
||||
</view> |
||||
<view class="width100 fotrt">共计:¥<text class="font20 fontwig6">{{orderDetail.order.orderAmount}}</text></view> |
||||
|
||||
</view> |
||||
|
||||
<!-- 添加菜品按钮 --> |
||||
<!-- <view class="btn-fix"> |
||||
<button class="btn" @click="addProduct">添加菜品</button> |
||||
</view> --> |
||||
|
||||
|
||||
<!-- 编辑订单 --> |
||||
<uni-popup ref="inputDialog" type="dialog"> |
||||
<uni-popup-dialog mode="input" title="输入菜品数量" :before-close="true" :value="productNum" |
||||
placeholder="请输入菜品数量" @confirm="dialogInputConfirm" @close="close"></uni-popup-dialog> |
||||
</uni-popup> |
||||
|
||||
|
||||
<uni-popup ref="popupDetail" type="bottom" background-color="#ffffff"> |
||||
<view style="height: 80vh;overflow-y: auto;" class="backcorfff border-10r-lr pd-main font16"> |
||||
<view class="pop-contain pd-main"> |
||||
|
||||
<view class="dis-flex height40 bor-botm1"> |
||||
<view class="flex-1 fotct fontwig6 " ></view> |
||||
<view class="flex-1 fotct fontwig6">名称</view> |
||||
<view class="flex-1 fotct fontwig6">价格</view> |
||||
<view class="flex-1 fotct fontwig6">分类</view> |
||||
<!-- <view class="flex-1 fotct fontwig6">售卖数量</view> --> |
||||
<view class="flex-1 fotct fontwig6">操作</view> |
||||
</view> |
||||
|
||||
<view class="dis-flex bor-botm1 paddtop5 paddbotm5 fon15" v-for="(item,index) in productList" @click="cilckToShowDetail(item)" :key="index"> |
||||
<view class="flex-1 fotct"> |
||||
<image :src="imgUrl+item.img" @click.stop="previewImage(imgUrl+item.img)" mode="aspectFit" class="width100 height60 verc"></image> |
||||
</view> |
||||
<view class="flex-1 fotct text1">{{item.name}}</view> |
||||
<view class="flex-1 fotct">{{item.price}}</view> |
||||
<view class="flex-1 fotct text1">{{item.productCategoryName}}</view> |
||||
<!-- <view class="flex-1 fotct">{{item.saleCount}}</view> --> |
||||
<view class="flex-1 fotct fcor41c " @click.stop="clickToEdit(item)"><text class="icon bianji font15 fcor41c"></text>编辑</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</uni-popup> |
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import {getStoreProductByList,queryCurrentOrder,operateOrderProduct |
||||
} from '@/Utils/groupBuying.js'; |
||||
const app = getApp(); |
||||
export default { |
||||
data(){ |
||||
return{ |
||||
imgUrl: app.globalData.imgUrl, //图片访问地址 |
||||
storeId:'',//门店id |
||||
serialNumber:'',//桌台编号 |
||||
productList:[],//产品列表 |
||||
orderDetail:null, |
||||
productNum:'',//菜品数量 |
||||
productId:'', |
||||
} |
||||
}, |
||||
|
||||
onLoad(options) { |
||||
this.storeId = options.storeId; |
||||
this.serialNumber = options.serialNumber; |
||||
this.getStoreProductByList(); |
||||
this.queryCurrentOrder(); |
||||
}, |
||||
methods:{ |
||||
|
||||
/* 添加菜品 */ |
||||
addProduct(){ |
||||
this.$refs.popupDetail.open('bottom') |
||||
|
||||
|
||||
}, |
||||
|
||||
/* 编辑订单 */ |
||||
clickToEdit(item){ |
||||
this.productNum = item.productNum; |
||||
this.productId = item.productId; |
||||
this.$refs.inputDialog.open() |
||||
}, |
||||
dialogInputConfirm(e) { |
||||
let reg = /^[0-9]+$/; |
||||
if (!reg.test(e)) { |
||||
uni.showToast({ |
||||
title: '请输入正确的数字哦!', |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
return |
||||
} |
||||
this.productNum = e; |
||||
|
||||
let params={ |
||||
"orderNo": this.orderDetail.order.orderNo, |
||||
"productArray": [{ |
||||
"productId": this.productId, |
||||
"number": this.productNum |
||||
}] |
||||
} |
||||
|
||||
this.operateOrderProduct(params); |
||||
}, |
||||
operateOrderProduct(params){ |
||||
uni.showLoading({ |
||||
title: '加载中' |
||||
}) |
||||
operateOrderProduct(params).then(res=>{ |
||||
uni.hideLoading(); |
||||
this.$refs.inputDialog.close(); |
||||
if (res.return_code == '000000') { |
||||
this.productNum = ''; |
||||
this.productId =''; |
||||
this.queryCurrentOrder(); |
||||
uni.showToast({ |
||||
title: res.return_data, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
}).catch(() => { |
||||
this.$refs.inputDialog.close(); |
||||
}) |
||||
}, |
||||
close() { |
||||
this.productNum = ''; |
||||
this.productId =''; |
||||
this.$refs.inputDialog.close(); |
||||
}, |
||||
|
||||
// 查询桌台当前订单 |
||||
queryCurrentOrder(){ |
||||
let params={ |
||||
serialNumber:this.serialNumber |
||||
} |
||||
uni.showLoading({ |
||||
title:"加载中", |
||||
mask:true, |
||||
}) |
||||
queryCurrentOrder(params).then(res=>{ |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000') { |
||||
this.orderDetail = res.return_data; |
||||
}else{ |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
}) |
||||
|
||||
}, |
||||
|
||||
/* 获取菜单列表 */ |
||||
getStoreProductByList(){ |
||||
let params={ |
||||
storeId:this.storeId, |
||||
} |
||||
uni.showLoading({ |
||||
title:"加载中", |
||||
mask:true, |
||||
}) |
||||
getStoreProductByList(params).then(res=>{ |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000') { |
||||
this.productList = res.return_data; |
||||
}else{ |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.flex-wrap{ |
||||
flex-wrap: wrap; |
||||
} |
||||
.titleWidth{ |
||||
width: 120px; |
||||
text-align: center; |
||||
} |
||||
.minheight40{ |
||||
padding: 15px 0; |
||||
} |
||||
|
||||
/* 底部按钮 */ |
||||
.btn-fix{ |
||||
position: fixed; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
.btn{ |
||||
height: 50px; |
||||
line-height: 50px; |
||||
width: 100%; |
||||
color: white; |
||||
background-color: #089bf5; |
||||
border-radius: 6px; |
||||
} |
||||
} |
||||
</style> |
@ -0,0 +1,221 @@ |
||||
<template> |
||||
<view class="all-container pd-main backcor6 font15"> |
||||
<view class="mart20 backcorfff marb20"> |
||||
<view class="dis-flex height40 bor-botm1"> |
||||
<view class="flex-1 fotct fontwig6 ">桌台名称</view> |
||||
<view class="flex-1 fotct fontwig6">订单金额</view> |
||||
<view class="flex-1 fotct fontwig6">状态</view> |
||||
<view class="flex-1 fotct fontwig6">操作</view> |
||||
</view> |
||||
|
||||
<view class="dis-flex bor-botm1 paddtop10 paddbotm10 font14" @click="openOrderDetail(item)" |
||||
v-for="(item,index) in orderList" :key="index"> |
||||
<view class="flex-1 fotct text1"> |
||||
{{item.tableName}} |
||||
</view> |
||||
<view class="flex-1 fotct text1"> |
||||
{{item.orderAmount}} |
||||
</view> |
||||
<view class="flex-1 fotct text1" :class="{'fcorred':item.status==1}"> |
||||
{{item.status | filterStatus}} |
||||
</view> |
||||
<view class="flex-1 fotct text1 dis-flex fcor41c" style="justify-content: space-around;"> |
||||
<text>详情</text> |
||||
<text class="margle" @click.stop="goEditTableOrder(item)" v-if="item.status==1">编辑</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 查看详情 --> |
||||
<uni-popup ref="popupDetail" type="bottom" background-color="#ffffff"> |
||||
<view style="height: 70vh;overflow-y: auto;" class="backcorfff border-10r-lr pd-main font16"> |
||||
<view class="pop-contain pd-main"> |
||||
<view class="pop-title fontwig6"><text>详情</text></view> |
||||
<view class="" v-if="orderDetail"> |
||||
<view class="width100 dis-flex bor-botm1 "> |
||||
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">桌台编号</view> |
||||
<view class="flex-1 fotct ">{{orderDetail.tableNumber}}</view> |
||||
</view> |
||||
<view class="width100 dis-flex bor-botm1 "> |
||||
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">桌台名称</view> |
||||
<view class="flex-1 fotct ">{{orderDetail.tableName}}</view> |
||||
</view> |
||||
<view class="width100 dis-flex bor-botm1 "> |
||||
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">桌台状态</view> |
||||
<view class="flex-1 fotct " :class="{'fcorred':orderDetail.status==1}">{{orderDetail.status | filterStatus}}</view> |
||||
</view> |
||||
<view class="width100 dis-flex bor-botm1 "> |
||||
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">用餐人数</view> |
||||
<view class="flex-1 fotct ">{{orderDetail.peopleNum}}人</view> |
||||
</view> |
||||
<view class="width100 dis-flex bor-botm1 "> |
||||
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">订单金额</view> |
||||
<view class="flex-1 fotct ">{{orderDetail.orderAmount}}元</view> |
||||
</view> |
||||
<view class="width100 dis-flex bor-botm1 "> |
||||
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">创建时间</view> |
||||
<view class="flex-1 fotct ">{{orderDetail.createTime | timeFormat}}</view> |
||||
</view> |
||||
<view class="width100 dis-flex bor-botm1 "> |
||||
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">订单编号 </view> |
||||
<view class="flex-1 fotct wb">{{orderDetail.orderNo}}</view> |
||||
</view> |
||||
<view class="width100 dis-flex bor-botm1 " v-if="orderDetail.status==2"> |
||||
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">支付单号 </view> |
||||
<view class="flex-1 fotct wb" >{{orderDetail.payOrderNo}}</view> |
||||
</view> |
||||
|
||||
</view> |
||||
|
||||
|
||||
</view> |
||||
</view> |
||||
</uni-popup> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import {queryOrderList,queryOrderDetail} from '@/Utils/groupBuying.js' |
||||
export default { |
||||
data(){ |
||||
return{ |
||||
storeId:'',//门店id |
||||
pageNum: 1, |
||||
pageSize: 30, |
||||
isNoMoreData: false, //是否加载中 |
||||
totalNum:0, |
||||
orderList:[], |
||||
orderDetail:null, |
||||
} |
||||
}, |
||||
onLoad(options) { |
||||
this.storeId = options.storeId; |
||||
|
||||
}, |
||||
onShow(){ |
||||
this.formatOrderList(); |
||||
}, |
||||
onReachBottom() { |
||||
this.queryOrderList(); |
||||
}, |
||||
filters:{ |
||||
filterStatus(type){ |
||||
switch (type) { |
||||
case 0: |
||||
return '不可用'; |
||||
case 1: |
||||
return '未结账'; |
||||
case 2: |
||||
return '已结账'; |
||||
default: |
||||
return '未知'; |
||||
} |
||||
}, |
||||
}, |
||||
methods:{ |
||||
/* 查询订单列表 */ |
||||
queryOrderList(){ |
||||
if (this.isNoMoreData) { |
||||
return false; |
||||
} |
||||
|
||||
uni.showLoading({ |
||||
title: '加载中...' |
||||
}) |
||||
let params={ |
||||
storeId:this.storeId, |
||||
pageNum:this.pageNum, |
||||
pageSize:this.pageSize, |
||||
} |
||||
queryOrderList(params).then(res=>{ |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000' ) { |
||||
this.totalNum = res.return_data.total; |
||||
this.isNoMoreData = res.return_data.isLastPage; |
||||
this.orderList = this.orderList.concat(res.return_data.list); |
||||
if(!this.isNoMoreData){ |
||||
this.pageNum+=1 |
||||
} |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
duration: 2000, |
||||
icon: 'none' |
||||
}) |
||||
} |
||||
}) |
||||
|
||||
}, |
||||
formatOrderList(){ |
||||
this.pageNum=1; |
||||
this.isNoMoreData=false; |
||||
this.orderList=[]; |
||||
this.queryOrderList(); |
||||
}, |
||||
goEditTableOrder(item){ |
||||
uni.navigateTo({ |
||||
url:`./editTableOrder?storeId=${item.storeId}&serialNumber=${item.serialNumber}` |
||||
}) |
||||
}, |
||||
/* 查询订单详情 */ |
||||
openOrderDetail(item){ |
||||
this.orderDetail=null; |
||||
let params={ |
||||
orderNo:item.orderNo |
||||
} |
||||
uni.showLoading({ |
||||
mask:true |
||||
}) |
||||
queryOrderDetail(params).then(res=>{ |
||||
uni.hideLoading() |
||||
if (res.return_code == '000000') { |
||||
this.orderDetail=res.return_data.order; |
||||
this.$refs.popupDetail.open('bottom'); |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
|
||||
|
||||
/* 详情弹窗 */ |
||||
.pop-contain { |
||||
text-align: center; |
||||
padding-top: 50px; |
||||
background-color: #ffffff; |
||||
|
||||
.pop-title { |
||||
text-align: center; |
||||
height: 50px; |
||||
line-height: 50px; |
||||
font-size: 18px; |
||||
position: fixed; |
||||
z-index: 10; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
background: #ffffff; |
||||
|
||||
} |
||||
.titleWidth { |
||||
min-width: 80px; |
||||
text-align: center; |
||||
} |
||||
.minheight40 { |
||||
padding: 15px 0; |
||||
} |
||||
|
||||
.wb{ |
||||
word-break: break-all; |
||||
} |
||||
} |
||||
</style> |
@ -0,0 +1,599 @@ |
||||
<template> |
||||
<view class="all-container pd-main backcor6 font15"> |
||||
<view class=" width100 mart10"> |
||||
<button class="btns icon tianjia" @click.stop="clickToAdd()">生成桌台</button> |
||||
</view> |
||||
|
||||
<view class="mart20 backcorfff marb20"> |
||||
<view class="backcor6 paddbotm5 font13 fcor089">(长按二维码图片可保存至手机相册)</view> |
||||
<view class="dis-flex height40 bor-botm1"> |
||||
<view class="flex-1 fotct fontwig6 ">二维码</view> |
||||
<view class="flex-1 fotct fontwig6">桌号</view> |
||||
<view class="flex-1 fotct fontwig6">桌名</view> |
||||
<view class="flex-1 fotct fontwig6">状态</view> |
||||
<view class="flex-1 fotct fontwig6">操作</view> |
||||
</view> |
||||
|
||||
<view class="dis-flex bor-botm1 paddtop10 paddbotm10 " @click="openTableDetail(item)" |
||||
v-for="(item,index) in tableList" :key="index"> |
||||
|
||||
<view class="flex-1 fotct" @click.stop> |
||||
<image :src="item.qrCodeImgUrl" mode="aspectFit" class="width100 height60 verc"></image> |
||||
</view> |
||||
<view class="flex-1 fotct text1"> |
||||
{{item.tableNumber}} |
||||
</view> |
||||
<view class="flex-1 fotct text1"> |
||||
{{item.tableName}} |
||||
</view> |
||||
<view class="flex-1 fotct text1" :class="{'fcorred':item.status==2}"> |
||||
{{item.status | filterStatus}} |
||||
</view> |
||||
<next-bubble-menu class="flex-1" :d-width="150" :dataList="item.status |filterDataList" |
||||
bingEleId="moreType" @change="getItem($event,item)"> |
||||
<view class="marglerig font15 fotct" id="moreType">更多<text class="icon xia font14"></text></view> |
||||
</next-bubble-menu> |
||||
<!-- <view class="flex-1 fotct dis-flex flex-center"> |
||||
|
||||
<view class="marglerig fcorred font13" @click.stop="toDeleteTable(item)"><text |
||||
class="icon shanchu font14 fcorred"></text>删除</view> |
||||
<view class="marglerig fcor41c font13" @click.stop="editTable(item)"><text |
||||
class="icon bianji font14 fcor41c"></text>编辑</view> |
||||
|
||||
</view> --> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 开台 --> |
||||
<uni-popup ref="openTableDialog" type="dialog"> |
||||
<uni-popup-dialog mode="input" :title="openTableName" :before-close="true" :value="peopleNum" |
||||
placeholder="请输入就餐人数" @confirm="dialogOpenTableConfirm" @close="closeOpenTable"></uni-popup-dialog> |
||||
</uni-popup> |
||||
|
||||
<!-- 编辑桌台 --> |
||||
<uni-popup ref="popupEditTable" type="center"> |
||||
<view style="width: 80vw;" class="backcorfff border-10r pd-main font16"> |
||||
<view class="dis-flex mart20 marb10 paddbotm10 bor-botm1"> |
||||
<view class=" marRight10 fontwig6 padleft15 paddtright10">桌台编号: |
||||
</view> |
||||
<input type="number" name="name" v-model.trim="tableEditData.tableNumber" placeholder-class="corf6" |
||||
class=" flex-1 " placeholder="请输入桌台编号"> |
||||
</view> |
||||
<view class="dis-flex mart20 marb10 paddbotm10 bor-botm1"> |
||||
<view class=" marRight10 fontwig6 padleft15 paddtright10">桌台名称: |
||||
</view> |
||||
<input type="text" name="name" v-model.trim="tableEditData.tableName" placeholder-class="corf6" |
||||
class=" flex-1 " placeholder="请输入桌台名称"> |
||||
</view> |
||||
<button class="btnw50 " @click.stop="saveEditTable()">保存</button> |
||||
</view> |
||||
</uni-popup> |
||||
<!-- 生成桌台弹窗 --> |
||||
<uni-popup ref="inputDialog" type="dialog"> |
||||
<uni-popup-dialog mode="input" title="输入生产数量" :before-close="true" :value="generateNum" |
||||
placeholder="请输入生产数量" @confirm="dialogInputConfirm" @close="close"></uni-popup-dialog> |
||||
</uni-popup> |
||||
|
||||
<!-- 查看详情 --> |
||||
<uni-popup ref="popupDetail" type="bottom" background-color="#ffffff"> |
||||
<view style="height: 60vh;overflow-y: auto;" class="backcorfff border-10r-lr pd-main font16"> |
||||
<view class="pop-contain pd-main"> |
||||
<view class="pop-title fontwig6"><text>详情</text></view> |
||||
<view class="" v-if="tableDetail"> |
||||
<view class="width100 dis-flex bor-botm1 "> |
||||
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">门店名称</view> |
||||
<view class="flex-1 fotct ">{{tableDetail.storeName}}</view> |
||||
</view> |
||||
<view class="width100 dis-flex bor-botm1 "> |
||||
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">桌台编号</view> |
||||
<view class="flex-1 fotct ">{{tableDetail.tableNumber}}</view> |
||||
</view> |
||||
<view class="width100 dis-flex bor-botm1 "> |
||||
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">桌台名称</view> |
||||
<view class="flex-1 fotct ">{{tableDetail.tableName}}</view> |
||||
</view> |
||||
<view class="width100 dis-flex bor-botm1 "> |
||||
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">桌台状态</view> |
||||
<view class="flex-1 fotct ">{{tableDetail.status | filterStatus}}</view> |
||||
</view> |
||||
<view class="width100 dis-flex bor-botm1 "> |
||||
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">创建时间</view> |
||||
<view class="flex-1 fotct ">{{tableDetail.createTime | timeFormat}}</view> |
||||
</view> |
||||
<view class="width100 dis-flex "> |
||||
<view class=" fotct fontwig6 backcor6 titleWidth minheight80">二维码</view> |
||||
<view class="flex-1 fotct "> |
||||
<image :src="tableDetail.qrCodeImgUrl" |
||||
@click.stop="previewImage(tableDetail.qrCodeImgUrl)" mode="aspectFit" |
||||
class="width100 height60 verc"></image> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
|
||||
</view> |
||||
</view> |
||||
</uni-popup> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
generateTable, |
||||
getTableList, |
||||
editTable, |
||||
delTable, |
||||
getTable, |
||||
startTable, |
||||
endTable |
||||
|
||||
} from '@/Utils/groupBuying.js'; |
||||
|
||||
import nextBubleMenu from "@/components/next-bubble-menu/next-bubble-menu.vue"; |
||||
export default { |
||||
|
||||
data() { |
||||
return { |
||||
storeId: '', //门店id |
||||
generateNum: '', //生产数量 |
||||
tableList: [], //列表 |
||||
pageNum: 1, |
||||
pageSize: 99999, |
||||
tableEditData: { |
||||
serialNumber: '', //桌台唯一编号 |
||||
tableNumber: '', //桌台编号 |
||||
tableName: '', //桌台名称 |
||||
}, |
||||
tableDetail: null, //详情 |
||||
|
||||
/* 开台 */ |
||||
openTableName:'',//开台桌名 |
||||
peopleNum:'',//就餐人数 |
||||
serialNumber:'',//桌号 |
||||
} |
||||
}, |
||||
onLoad(options) { |
||||
this.storeId = options.storeId; |
||||
this.getTableList(true); |
||||
}, |
||||
components: { |
||||
nextBubleMenu |
||||
}, |
||||
filters: { |
||||
/* type:桌台状态 0:不可用 1:未开台 2:已开台 */ |
||||
/* 1:编辑,2:开台,3:关台,4:删除, */ |
||||
filterDataList(type) { |
||||
switch (type) { |
||||
case 0: |
||||
return [{ |
||||
id: 1, |
||||
text: '编辑', |
||||
}, { |
||||
id: 4, |
||||
text: '删除', |
||||
}, ]; |
||||
case 1: |
||||
return [{ |
||||
id: 1, |
||||
text: '编辑', |
||||
}, { |
||||
id: 2, |
||||
text: '开台', |
||||
}, { |
||||
id: 4, |
||||
text: '删除', |
||||
}, ]; |
||||
case 2: |
||||
return [{ |
||||
id: 1, |
||||
text: '编辑', |
||||
}, { |
||||
id: 3, |
||||
text: '关台', |
||||
}, { |
||||
id: 4, |
||||
text: '删除', |
||||
} ]; |
||||
default: |
||||
return [{ |
||||
id: 1, |
||||
text: '编辑', |
||||
}, { |
||||
id: 4, |
||||
text: '删除', |
||||
}, ]; |
||||
} |
||||
|
||||
}, |
||||
filterStatus(type){ |
||||
switch (type) { |
||||
case 0: |
||||
return '不可用'; |
||||
case 1: |
||||
return '未开台'; |
||||
case 2: |
||||
return '已开台'; |
||||
default: |
||||
return '未知'; |
||||
} |
||||
}, |
||||
}, |
||||
methods: { |
||||
/* 更多操作的回调函数 */ |
||||
getItem(data, item) { |
||||
if (data.id == 1) { //编辑 |
||||
this.editTable(item) |
||||
} else if (data.id == 2) { |
||||
//开台 |
||||
this.serialNumber = item.serialNumber; |
||||
this.openTableName = item.tableName; |
||||
this.peopleNum = ''; //重置就餐人数 |
||||
this.$refs.openTableDialog.open(); |
||||
|
||||
}else if (data.id == 3) { //关台 |
||||
this.endTableMethod(item) |
||||
}else if (data.id == 4) { //删除 |
||||
this.toDeleteTable(item) |
||||
} |
||||
console.log(data, item) |
||||
}, |
||||
|
||||
/* 开台 -确认 pupup-回调 */ |
||||
dialogOpenTableConfirm(e){ |
||||
let reg = /^\+?[1-9][0-9]*$/; |
||||
if (!reg.test(e)) { |
||||
uni.showToast({ |
||||
title: '请输入大于0的数字哦!', |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
return |
||||
} |
||||
this.peopleNum = e; |
||||
this.startTableMethod() |
||||
}, |
||||
/* 开台 -取消 pupup-回调 */ |
||||
closeOpenTable(){ |
||||
this.$refs.openTableDialog.close(); |
||||
}, |
||||
//开台 |
||||
startTableMethod(){ |
||||
uni.showLoading({ |
||||
title: '加载中' |
||||
}) |
||||
let params={ |
||||
serialNumber:this.serialNumber, |
||||
peopleNum:this.peopleNum |
||||
} |
||||
console.log(params,"params") |
||||
startTable(params).then(res=>{ |
||||
uni.hideLoading(); |
||||
this.$refs.openTableDialog.close(); |
||||
if (res.return_code == '000000') { |
||||
this.getTableList(); |
||||
uni.showToast({ |
||||
title: res.return_data, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
}).catch(() => { |
||||
uni.hideLoading(); |
||||
this.$refs.openTableDialog.close(); |
||||
}) |
||||
}, |
||||
|
||||
/* 关台 */ |
||||
endTableMethod(item){ |
||||
let _this = this; |
||||
uni.showModal({ |
||||
title: '提示', |
||||
content: `确定把‘${item.tableName}’关台吗?`, |
||||
success: function(res) { |
||||
if (res.confirm) { |
||||
let params = { |
||||
serialNumber: item.serialNumber |
||||
} |
||||
uni.showLoading({ |
||||
title: '加载中' |
||||
}) |
||||
endTable(params).then(res => { |
||||
uni.hideLoading(); |
||||
let title; |
||||
if (res.return_code == '000000') { |
||||
title = res.return_data; |
||||
_this.getTableList(); |
||||
} else { |
||||
title = res.return_msg; |
||||
} |
||||
uni.showToast({ |
||||
title: title, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
}).catch(() => { |
||||
uni.hideLoading(); |
||||
}) |
||||
} else if (res.cancel) { |
||||
|
||||
// console.log('用户点击取消'); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
}, |
||||
|
||||
/* 生成桌台 */ |
||||
clickToAdd() { |
||||
this.generateNum = ''; |
||||
this.$refs.inputDialog.open() |
||||
}, |
||||
dialogInputConfirm(e) { |
||||
let reg = /^\+?[1-9][0-9]*$/; |
||||
if (!reg.test(e)) { |
||||
uni.showToast({ |
||||
title: '请输入大于0的数字哦!', |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
return |
||||
} |
||||
this.generateNum = e; |
||||
this.generateTable(); |
||||
}, |
||||
/* 生成桌台 */ |
||||
generateTable() { |
||||
uni.showLoading({ |
||||
title: '加载中' |
||||
}) |
||||
let params = { |
||||
"storeId": this.storeId, |
||||
"generateNum": this.generateNum |
||||
} |
||||
generateTable(params).then(res => { |
||||
uni.hideLoading(); |
||||
this.$refs.inputDialog.close(); |
||||
if (res.return_code == '000000') { |
||||
this.generateNum = ''; |
||||
this.getTableList(); |
||||
uni.showToast({ |
||||
title: res.return_data, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
}).catch(() => { |
||||
this.$refs.inputDialog.close(); |
||||
}) |
||||
}, |
||||
close() { |
||||
this.generateNum = ''; |
||||
this.$refs.inputDialog.close(); |
||||
}, |
||||
/* 查询桌台列表 */ |
||||
getTableList(flag) { |
||||
if (flag) { |
||||
uni.showLoading({ |
||||
title: '加载中' |
||||
}) |
||||
} |
||||
let params = { |
||||
storeId: this.storeId, |
||||
pageNum: this.pageNum, |
||||
pageSize: this.pageSize, |
||||
|
||||
} |
||||
getTableList(params).then(res => { |
||||
if (flag) { |
||||
uni.hideLoading() |
||||
} |
||||
if (res.return_code == '000000') { |
||||
this.tableList = res.return_data.list; |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
/* 点击打开详情 */ |
||||
openTableDetail(item) { |
||||
this.tableDetail = null; |
||||
this.getTableDetail(item, (res) => { |
||||
this.tableDetail = res.return_data; |
||||
this.$refs.popupDetail.open('bottom'); |
||||
}) |
||||
}, |
||||
/* 查询桌台详情 */ |
||||
getTableDetail(item, callback) { |
||||
let params = { |
||||
serialNumber: item.serialNumber |
||||
} |
||||
getTable(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
callback(res); |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
/* 删除桌台 */ |
||||
toDeleteTable(item) { |
||||
|
||||
let _this = this; |
||||
uni.showModal({ |
||||
title: '提示', |
||||
content: `确定删除‘${item.tableName}’吗?`, |
||||
success: function(res) { |
||||
if (res.confirm) { |
||||
let params = { |
||||
serialNumber: item.serialNumber |
||||
} |
||||
uni.showLoading({ |
||||
title: '删除中' |
||||
}) |
||||
delTable(params).then(res => { |
||||
uni.hideLoading(); |
||||
let title; |
||||
if (res.return_code == '000000') { |
||||
title = res.return_data; |
||||
_this.getTableList(); |
||||
} else { |
||||
title = res.return_msg; |
||||
} |
||||
uni.showToast({ |
||||
title: title, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
}).catch(() => { |
||||
uni.hideLoading(); |
||||
}) |
||||
} else if (res.cancel) { |
||||
|
||||
// console.log('用户点击取消'); |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
/* 点击编辑桌台 */ |
||||
editTable(item) { |
||||
this.formatTableEditData(); |
||||
this.getTableDetail(item, (res) => { |
||||
this.tableEditData.serialNumber = res.return_data.serialNumber; //桌台唯一编号 |
||||
this.tableEditData.tableNumber = res.return_data.tableNumber; //桌台编号 |
||||
this.tableEditData.tableName = res.return_data.tableName; //桌台名称 |
||||
this.$refs.popupEditTable.open('center'); |
||||
}) |
||||
}, |
||||
formatTableEditData() { |
||||
this.tableEditData.serialNumber = ''; //桌台唯一编号 |
||||
this.tableEditData.tableNumber = ''; //桌台编号 |
||||
this.tableEditData.tableName = ''; //桌台名称 |
||||
}, |
||||
//保存编辑桌台信息 |
||||
saveEditTable() { |
||||
|
||||
if (!this.tableEditData.tableNumber || !this.tableEditData.tableName) { |
||||
uni.showToast({ |
||||
title: '请填写完整哦!', |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
return |
||||
} |
||||
|
||||
|
||||
uni.showLoading({ |
||||
title: '保存中...' |
||||
}) |
||||
editTable(this.tableEditData).then(res => { |
||||
uni.hideLoading(); |
||||
this.$refs.popupEditTable.close(); |
||||
this.formatTableEditData(); |
||||
if (res.return_code == '000000') { |
||||
this.getTableList(); |
||||
uni.showToast({ |
||||
title: res.return_data, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
}).catch(() => { |
||||
uni.hideLoading(); |
||||
}) |
||||
}, |
||||
|
||||
// 预览 |
||||
previewImage(img) { |
||||
uni.previewImage({ |
||||
current: 0, |
||||
indicator: "number", |
||||
loop: "true", |
||||
urls: [img] |
||||
}) |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.btns { |
||||
width: 21%; |
||||
height: 35px; |
||||
line-height: 35px; |
||||
background-color: #0083f5; |
||||
color: #FFFFFF; |
||||
font-weight: bold; |
||||
font-size: 12px; |
||||
padding: 0px; |
||||
margin: 0 0 0 auto; |
||||
} |
||||
|
||||
.border-10r { |
||||
border-radius: 10px; |
||||
} |
||||
|
||||
.border-10r-lr { |
||||
border-radius: 10px 10px 0 0; |
||||
} |
||||
|
||||
/* 详情弹窗 */ |
||||
.pop-contain { |
||||
text-align: center; |
||||
padding-top: 50px; |
||||
background-color: #ffffff; |
||||
|
||||
.pop-title { |
||||
text-align: center; |
||||
height: 50px; |
||||
line-height: 50px; |
||||
font-size: 18px; |
||||
position: fixed; |
||||
z-index: 10; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
background: #ffffff; |
||||
|
||||
} |
||||
|
||||
.titleWidth { |
||||
min-width: 80px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.minheight40 { |
||||
padding: 15px 0; |
||||
} |
||||
|
||||
.minheight80 { |
||||
min-height: 80px; |
||||
line-height: 80px; |
||||
} |
||||
} |
||||
</style> |
@ -0,0 +1,70 @@ |
||||
## 1.8.4(2023-11-15) |
||||
- 新增 uni-popup 支持uni-app-x 注意暂时仅支持 `maskClick` `@open` `@close` |
||||
## 1.8.3(2023-04-17) |
||||
- 修复 uni-popup 重复打开时的 bug |
||||
## 1.8.2(2023-02-02) |
||||
- uni-popup-dialog 组件新增 inputType 属性 |
||||
## 1.8.1(2022-12-01) |
||||
- 修复 nvue 下 v-show 报错 |
||||
## 1.8.0(2022-11-29) |
||||
- 优化 主题样式 |
||||
## 1.7.9(2022-04-02) |
||||
- 修复 弹出层内部无法滚动的bug |
||||
## 1.7.8(2022-03-28) |
||||
- 修复 小程序中高度错误的bug |
||||
## 1.7.7(2022-03-17) |
||||
- 修复 快速调用open出现问题的Bug |
||||
## 1.7.6(2022-02-14) |
||||
- 修复 safeArea 属性不能设置为false的bug |
||||
## 1.7.5(2022-01-19) |
||||
- 修复 isMaskClick 失效的bug |
||||
## 1.7.4(2022-01-19) |
||||
- 新增 cancelText \ confirmText 属性 ,可自定义文本 |
||||
- 新增 maskBackgroundColor 属性 ,可以修改蒙版颜色 |
||||
- 优化 maskClick属性 更新为 isMaskClick ,解决微信小程序警告的问题 |
||||
## 1.7.3(2022-01-13) |
||||
- 修复 设置 safeArea 属性不生效的bug |
||||
## 1.7.2(2021-11-26) |
||||
- 优化 组件示例 |
||||
## 1.7.1(2021-11-26) |
||||
- 修复 vuedoc 文字错误 |
||||
## 1.7.0(2021-11-19) |
||||
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) |
||||
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-popup](https://uniapp.dcloud.io/component/uniui/uni-popup) |
||||
## 1.6.2(2021-08-24) |
||||
- 新增 支持国际化 |
||||
## 1.6.1(2021-07-30) |
||||
- 优化 vue3下事件警告的问题 |
||||
## 1.6.0(2021-07-13) |
||||
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) |
||||
## 1.5.0(2021-06-23) |
||||
- 新增 mask-click 遮罩层点击事件 |
||||
## 1.4.5(2021-06-22) |
||||
- 修复 nvue 平台中间弹出后,点击内容,再点击遮罩无法关闭的Bug |
||||
## 1.4.4(2021-06-18) |
||||
- 修复 H5平台中间弹出后,点击内容,再点击遮罩无法关闭的Bug |
||||
## 1.4.3(2021-06-08) |
||||
- 修复 错误的 watch 字段 |
||||
- 修复 safeArea 属性不生效的问题 |
||||
- 修复 点击内容,再点击遮罩无法关闭的Bug |
||||
## 1.4.2(2021-05-12) |
||||
- 新增 组件示例地址 |
||||
## 1.4.1(2021-04-29) |
||||
- 修复 组件内放置 input 、textarea 组件,无法聚焦的问题 |
||||
## 1.4.0 (2021-04-29) |
||||
- 新增 type 属性的 left\right 值,支持左右弹出 |
||||
- 新增 open(String:type) 方法参数 ,可以省略 type 属性 ,直接传入类型打开指定弹窗 |
||||
- 新增 backgroundColor 属性,可定义主窗口背景色,默认不显示背景色 |
||||
- 新增 safeArea 属性,是否适配底部安全区 |
||||
- 修复 App\h5\微信小程序底部安全区占位不对的Bug |
||||
- 修复 App 端弹出等待的Bug |
||||
- 优化 提升低配设备性能,优化动画卡顿问题 |
||||
- 优化 更简单的组件自定义方式 |
||||
## 1.2.9(2021-02-05) |
||||
- 优化 组件引用关系,通过uni_modules引用组件 |
||||
## 1.2.8(2021-02-05) |
||||
- 调整为uni_modules目录规范 |
||||
## 1.2.7(2021-02-05) |
||||
- 调整为uni_modules目录规范 |
||||
- 新增 支持 PC 端 |
||||
- 新增 uni-popup-message 、uni-popup-dialog扩展组件支持 PC 端 |
@ -0,0 +1,45 @@ |
||||
// #ifdef H5
|
||||
export default { |
||||
name: 'Keypress', |
||||
props: { |
||||
disable: { |
||||
type: Boolean, |
||||
default: false |
||||
} |
||||
}, |
||||
mounted () { |
||||
const keyNames = { |
||||
esc: ['Esc', 'Escape'], |
||||
tab: 'Tab', |
||||
enter: 'Enter', |
||||
space: [' ', 'Spacebar'], |
||||
up: ['Up', 'ArrowUp'], |
||||
left: ['Left', 'ArrowLeft'], |
||||
right: ['Right', 'ArrowRight'], |
||||
down: ['Down', 'ArrowDown'], |
||||
delete: ['Backspace', 'Delete', 'Del'] |
||||
} |
||||
const listener = ($event) => { |
||||
if (this.disable) { |
||||
return |
||||
} |
||||
const keyName = Object.keys(keyNames).find(key => { |
||||
const keyName = $event.key |
||||
const value = keyNames[key] |
||||
return value === keyName || (Array.isArray(value) && value.includes(keyName)) |
||||
}) |
||||
if (keyName) { |
||||
// 避免和其他按键事件冲突
|
||||
setTimeout(() => { |
||||
this.$emit(keyName, {}) |
||||
}, 0) |
||||
} |
||||
} |
||||
document.addEventListener('keyup', listener) |
||||
this.$once('hook:beforeDestroy', () => { |
||||
document.removeEventListener('keyup', listener) |
||||
}) |
||||
}, |
||||
render: () => {} |
||||
} |
||||
// #endif
|
@ -0,0 +1,275 @@ |
||||
<template> |
||||
<view class="uni-popup-dialog"> |
||||
<view class="uni-dialog-title"> |
||||
<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{titleText}}</text> |
||||
</view> |
||||
<view v-if="mode === 'base'" class="uni-dialog-content"> |
||||
<slot> |
||||
<text class="uni-dialog-content-text">{{content}}</text> |
||||
</slot> |
||||
</view> |
||||
<view v-else class="uni-dialog-content"> |
||||
<slot> |
||||
<input class="uni-dialog-input" v-model="val" :type="inputType" :placeholder="placeholderText" :focus="focus" > |
||||
</slot> |
||||
</view> |
||||
<view class="uni-dialog-button-group"> |
||||
<view class="uni-dialog-button" @click="closeDialog"> |
||||
<text class="uni-dialog-button-text">{{closeText}}</text> |
||||
</view> |
||||
<view class="uni-dialog-button uni-border-left" @click="onOk"> |
||||
<text class="uni-dialog-button-text uni-button-color">{{okText}}</text> |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import popup from '../uni-popup/popup.js' |
||||
import { |
||||
initVueI18n |
||||
} from '@dcloudio/uni-i18n' |
||||
import messages from '../uni-popup/i18n/index.js' |
||||
const { t } = initVueI18n(messages) |
||||
/** |
||||
* PopUp 弹出层-对话框样式 |
||||
* @description 弹出层-对话框样式 |
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329 |
||||
* @property {String} value input 模式下的默认值 |
||||
* @property {String} placeholder input 模式下输入提示 |
||||
* @property {String} type = [success|warning|info|error] 主题样式 |
||||
* @value success 成功 |
||||
* @value warning 提示 |
||||
* @value info 消息 |
||||
* @value error 错误 |
||||
* @property {String} mode = [base|input] 模式、 |
||||
* @value base 基础对话框 |
||||
* @value input 可输入对话框 |
||||
* @property {String} content 对话框内容 |
||||
* @property {Boolean} beforeClose 是否拦截取消事件 |
||||
* @event {Function} confirm 点击确认按钮触发 |
||||
* @event {Function} close 点击取消按钮触发 |
||||
*/ |
||||
|
||||
export default { |
||||
name: "uniPopupDialog", |
||||
mixins: [popup], |
||||
emits:['confirm','close'], |
||||
props: { |
||||
inputType:{ |
||||
type: String, |
||||
default: 'text' |
||||
}, |
||||
value: { |
||||
type: [String, Number], |
||||
default: '' |
||||
}, |
||||
placeholder: { |
||||
type: [String, Number], |
||||
default: '' |
||||
}, |
||||
type: { |
||||
type: String, |
||||
default: 'error' |
||||
}, |
||||
mode: { |
||||
type: String, |
||||
default: 'base' |
||||
}, |
||||
title: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
content: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
beforeClose: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
cancelText:{ |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
confirmText:{ |
||||
type: String, |
||||
default: '' |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
dialogType: 'error', |
||||
focus: false, |
||||
val: "" |
||||
} |
||||
}, |
||||
computed: { |
||||
okText() { |
||||
return this.confirmText || t("uni-popup.ok") |
||||
}, |
||||
closeText() { |
||||
return this.cancelText || t("uni-popup.cancel") |
||||
}, |
||||
placeholderText() { |
||||
return this.placeholder || t("uni-popup.placeholder") |
||||
}, |
||||
titleText() { |
||||
return this.title || t("uni-popup.title") |
||||
} |
||||
}, |
||||
watch: { |
||||
type(val) { |
||||
this.dialogType = val |
||||
}, |
||||
mode(val) { |
||||
if (val === 'input') { |
||||
this.dialogType = 'info' |
||||
} |
||||
}, |
||||
value(val) { |
||||
this.val = val |
||||
} |
||||
}, |
||||
created() { |
||||
// 对话框遮罩不可点击 |
||||
this.popup.disableMask() |
||||
// this.popup.closeMask() |
||||
if (this.mode === 'input') { |
||||
this.dialogType = 'info' |
||||
this.val = this.value |
||||
} else { |
||||
this.dialogType = this.type |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.focus = true |
||||
}, |
||||
methods: { |
||||
/** |
||||
* 点击确认按钮 |
||||
*/ |
||||
onOk() { |
||||
if (this.mode === 'input'){ |
||||
this.$emit('confirm', this.val) |
||||
}else{ |
||||
this.$emit('confirm') |
||||
} |
||||
if(this.beforeClose) return |
||||
this.popup.close() |
||||
}, |
||||
/** |
||||
* 点击取消按钮 |
||||
*/ |
||||
closeDialog() { |
||||
this.$emit('close') |
||||
if(this.beforeClose) return |
||||
this.popup.close() |
||||
}, |
||||
close(){ |
||||
this.popup.close() |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" > |
||||
.uni-popup-dialog { |
||||
width: 300px; |
||||
border-radius: 11px; |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.uni-dialog-title { |
||||
/* #ifndef APP-NVUE */ |
||||
display: flex; |
||||
/* #endif */ |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
padding-top: 25px; |
||||
} |
||||
|
||||
.uni-dialog-title-text { |
||||
font-size: 16px; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.uni-dialog-content { |
||||
/* #ifndef APP-NVUE */ |
||||
display: flex; |
||||
/* #endif */ |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
align-items: center; |
||||
padding: 20px; |
||||
} |
||||
|
||||
.uni-dialog-content-text { |
||||
font-size: 14px; |
||||
color: #6C6C6C; |
||||
} |
||||
|
||||
.uni-dialog-button-group { |
||||
/* #ifndef APP-NVUE */ |
||||
display: flex; |
||||
/* #endif */ |
||||
flex-direction: row; |
||||
border-top-color: #f5f5f5; |
||||
border-top-style: solid; |
||||
border-top-width: 1px; |
||||
} |
||||
|
||||
.uni-dialog-button { |
||||
/* #ifndef APP-NVUE */ |
||||
display: flex; |
||||
/* #endif */ |
||||
|
||||
flex: 1; |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
align-items: center; |
||||
height: 45px; |
||||
} |
||||
|
||||
.uni-border-left { |
||||
border-left-color: #f0f0f0; |
||||
border-left-style: solid; |
||||
border-left-width: 1px; |
||||
} |
||||
|
||||
.uni-dialog-button-text { |
||||
font-size: 16px; |
||||
color: #333; |
||||
} |
||||
|
||||
.uni-button-color { |
||||
color: #007aff; |
||||
} |
||||
|
||||
.uni-dialog-input { |
||||
flex: 1; |
||||
font-size: 14px; |
||||
border: 1px #eee solid; |
||||
height: 40px; |
||||
padding: 0 10px; |
||||
border-radius: 5px; |
||||
color: #555; |
||||
} |
||||
|
||||
.uni-popup__success { |
||||
color: #4cd964; |
||||
} |
||||
|
||||
.uni-popup__warn { |
||||
color: #f0ad4e; |
||||
} |
||||
|
||||
.uni-popup__error { |
||||
color: #dd524d; |
||||
} |
||||
|
||||
.uni-popup__info { |
||||
color: #909399; |
||||
} |
||||
</style> |
@ -0,0 +1,143 @@ |
||||
<template> |
||||
<view class="uni-popup-message"> |
||||
<view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+type"> |
||||
<slot> |
||||
<text class="uni-popup-message-text" :class="'uni-popup__'+type+'-text'">{{message}}</text> |
||||
</slot> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import popup from '../uni-popup/popup.js' |
||||
/** |
||||
* PopUp 弹出层-消息提示 |
||||
* @description 弹出层-消息提示 |
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329 |
||||
* @property {String} type = [success|warning|info|error] 主题样式 |
||||
* @value success 成功 |
||||
* @value warning 提示 |
||||
* @value info 消息 |
||||
* @value error 错误 |
||||
* @property {String} message 消息提示文字 |
||||
* @property {String} duration 显示时间,设置为 0 则不会自动关闭 |
||||
*/ |
||||
|
||||
export default { |
||||
name: 'uniPopupMessage', |
||||
mixins:[popup], |
||||
props: { |
||||
/** |
||||
* 主题 success/warning/info/error 默认 success |
||||
*/ |
||||
type: { |
||||
type: String, |
||||
default: 'success' |
||||
}, |
||||
/** |
||||
* 消息文字 |
||||
*/ |
||||
message: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
/** |
||||
* 显示时间,设置为 0 则不会自动关闭 |
||||
*/ |
||||
duration: { |
||||
type: Number, |
||||
default: 3000 |
||||
}, |
||||
maskShow:{ |
||||
type:Boolean, |
||||
default:false |
||||
} |
||||
}, |
||||
data() { |
||||
return {} |
||||
}, |
||||
created() { |
||||
this.popup.maskShow = this.maskShow |
||||
this.popup.messageChild = this |
||||
}, |
||||
methods: { |
||||
timerClose(){ |
||||
if(this.duration === 0) return |
||||
clearTimeout(this.timer) |
||||
this.timer = setTimeout(()=>{ |
||||
this.popup.close() |
||||
},this.duration) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
<style lang="scss" > |
||||
.uni-popup-message { |
||||
/* #ifndef APP-NVUE */ |
||||
display: flex; |
||||
/* #endif */ |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
} |
||||
|
||||
.uni-popup-message__box { |
||||
background-color: #e1f3d8; |
||||
padding: 10px 15px; |
||||
border-color: #eee; |
||||
border-style: solid; |
||||
border-width: 1px; |
||||
flex: 1; |
||||
} |
||||
|
||||
@media screen and (min-width: 500px) { |
||||
.fixforpc-width { |
||||
margin-top: 20px; |
||||
border-radius: 4px; |
||||
flex: none; |
||||
min-width: 380px; |
||||
/* #ifndef APP-NVUE */ |
||||
max-width: 50%; |
||||
/* #endif */ |
||||
/* #ifdef APP-NVUE */ |
||||
max-width: 500px; |
||||
/* #endif */ |
||||
} |
||||
} |
||||
|
||||
.uni-popup-message-text { |
||||
font-size: 14px; |
||||
padding: 0; |
||||
} |
||||
|
||||
.uni-popup__success { |
||||
background-color: #e1f3d8; |
||||
} |
||||
|
||||
.uni-popup__success-text { |
||||
color: #67C23A; |
||||
} |
||||
|
||||
.uni-popup__warn { |
||||
background-color: #faecd8; |
||||
} |
||||
|
||||
.uni-popup__warn-text { |
||||
color: #E6A23C; |
||||
} |
||||
|
||||
.uni-popup__error { |
||||
background-color: #fde2e2; |
||||
} |
||||
|
||||
.uni-popup__error-text { |
||||
color: #F56C6C; |
||||
} |
||||
|
||||
.uni-popup__info { |
||||
background-color: #F2F6FC; |
||||
} |
||||
|
||||
.uni-popup__info-text { |
||||
color: #909399; |
||||
} |
||||
</style> |
@ -0,0 +1,187 @@ |
||||
<template> |
||||
<view class="uni-popup-share"> |
||||
<view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view> |
||||
<view class="uni-share-content"> |
||||
<view class="uni-share-content-box"> |
||||
<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)"> |
||||
<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image> |
||||
<text class="uni-share-text">{{item.text}}</text> |
||||
</view> |
||||
|
||||
</view> |
||||
</view> |
||||
<view class="uni-share-button-box"> |
||||
<button class="uni-share-button" @click="close">{{cancelText}}</button> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import popup from '../uni-popup/popup.js' |
||||
import { |
||||
initVueI18n |
||||
} from '@dcloudio/uni-i18n' |
||||
import messages from '../uni-popup/i18n/index.js' |
||||
const { t } = initVueI18n(messages) |
||||
export default { |
||||
name: 'UniPopupShare', |
||||
mixins:[popup], |
||||
emits:['select'], |
||||
props: { |
||||
title: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
beforeClose: { |
||||
type: Boolean, |
||||
default: false |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
bottomData: [{ |
||||
text: '微信', |
||||
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png', |
||||
name: 'wx' |
||||
}, |
||||
{ |
||||
text: '支付宝', |
||||
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png', |
||||
name: 'wx' |
||||
}, |
||||
{ |
||||
text: 'QQ', |
||||
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png', |
||||
name: 'qq' |
||||
}, |
||||
{ |
||||
text: '新浪', |
||||
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png', |
||||
name: 'sina' |
||||
}, |
||||
// { |
||||
// text: '百度', |
||||
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png', |
||||
// name: 'copy' |
||||
// }, |
||||
// { |
||||
// text: '其他', |
||||
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png', |
||||
// name: 'more' |
||||
// } |
||||
] |
||||
} |
||||
}, |
||||
created() {}, |
||||
computed: { |
||||
cancelText() { |
||||
return t("uni-popup.cancel") |
||||
}, |
||||
shareTitleText() { |
||||
return this.title || t("uni-popup.shareTitle") |
||||
} |
||||
}, |
||||
methods: { |
||||
/** |
||||
* 选择内容 |
||||
*/ |
||||
select(item, index) { |
||||
this.$emit('select', { |
||||
item, |
||||
index |
||||
}) |
||||
this.close() |
||||
|
||||
}, |
||||
/** |
||||
* 关闭窗口 |
||||
*/ |
||||
close() { |
||||
if(this.beforeClose) return |
||||
this.popup.close() |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
<style lang="scss" > |
||||
.uni-popup-share { |
||||
background-color: #fff; |
||||
border-top-left-radius: 11px; |
||||
border-top-right-radius: 11px; |
||||
} |
||||
.uni-share-title { |
||||
/* #ifndef APP-NVUE */ |
||||
display: flex; |
||||
/* #endif */ |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: center; |
||||
height: 40px; |
||||
} |
||||
.uni-share-title-text { |
||||
font-size: 14px; |
||||
color: #666; |
||||
} |
||||
.uni-share-content { |
||||
/* #ifndef APP-NVUE */ |
||||
display: flex; |
||||
/* #endif */ |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
padding-top: 10px; |
||||
} |
||||
|
||||
.uni-share-content-box { |
||||
/* #ifndef APP-NVUE */ |
||||
display: flex; |
||||
/* #endif */ |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
width: 360px; |
||||
} |
||||
|
||||
.uni-share-content-item { |
||||
width: 90px; |
||||
/* #ifndef APP-NVUE */ |
||||
display: flex; |
||||
/* #endif */ |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
padding: 10px 0; |
||||
align-items: center; |
||||
} |
||||
|
||||
.uni-share-content-item:active { |
||||
background-color: #f5f5f5; |
||||
} |
||||
|
||||
.uni-share-image { |
||||
width: 30px; |
||||
height: 30px; |
||||
} |
||||
|
||||
.uni-share-text { |
||||
margin-top: 10px; |
||||
font-size: 14px; |
||||
color: #3B4144; |
||||
} |
||||
|
||||
.uni-share-button-box { |
||||
/* #ifndef APP-NVUE */ |
||||
display: flex; |
||||
/* #endif */ |
||||
flex-direction: row; |
||||
padding: 10px 15px; |
||||
} |
||||
|
||||
.uni-share-button { |
||||
flex: 1; |
||||
border-radius: 50px; |
||||
color: #666; |
||||
font-size: 16px; |
||||
} |
||||
|
||||
.uni-share-button::after { |
||||
border-radius: 50px; |
||||
} |
||||
</style> |
@ -0,0 +1,7 @@ |
||||
{ |
||||
"uni-popup.cancel": "cancel", |
||||
"uni-popup.ok": "ok", |
||||
"uni-popup.placeholder": "pleace enter", |
||||
"uni-popup.title": "Hint", |
||||
"uni-popup.shareTitle": "Share to" |
||||
} |
@ -0,0 +1,8 @@ |
||||
import en from './en.json' |
||||
import zhHans from './zh-Hans.json' |
||||
import zhHant from './zh-Hant.json' |
||||
export default { |
||||
en, |
||||
'zh-Hans': zhHans, |
||||
'zh-Hant': zhHant |
||||
} |
@ -0,0 +1,7 @@ |
||||
{ |
||||
"uni-popup.cancel": "取消", |
||||
"uni-popup.ok": "确定", |
||||
"uni-popup.placeholder": "请输入", |
||||
"uni-popup.title": "提示", |
||||
"uni-popup.shareTitle": "分享到" |
||||
} |
@ -0,0 +1,7 @@ |
||||
{ |
||||
"uni-popup.cancel": "取消", |
||||
"uni-popup.ok": "確定", |
||||
"uni-popup.placeholder": "請輸入", |
||||
"uni-popup.title": "提示", |
||||
"uni-popup.shareTitle": "分享到" |
||||
} |
@ -0,0 +1,45 @@ |
||||
// #ifdef H5
|
||||
export default { |
||||
name: 'Keypress', |
||||
props: { |
||||
disable: { |
||||
type: Boolean, |
||||
default: false |
||||
} |
||||
}, |
||||
mounted () { |
||||
const keyNames = { |
||||
esc: ['Esc', 'Escape'], |
||||
tab: 'Tab', |
||||
enter: 'Enter', |
||||
space: [' ', 'Spacebar'], |
||||
up: ['Up', 'ArrowUp'], |
||||
left: ['Left', 'ArrowLeft'], |
||||
right: ['Right', 'ArrowRight'], |
||||
down: ['Down', 'ArrowDown'], |
||||
delete: ['Backspace', 'Delete', 'Del'] |
||||
} |
||||
const listener = ($event) => { |
||||
if (this.disable) { |
||||
return |
||||
} |
||||
const keyName = Object.keys(keyNames).find(key => { |
||||
const keyName = $event.key |
||||
const value = keyNames[key] |
||||
return value === keyName || (Array.isArray(value) && value.includes(keyName)) |
||||
}) |
||||
if (keyName) { |
||||
// 避免和其他按键事件冲突
|
||||
setTimeout(() => { |
||||
this.$emit(keyName, {}) |
||||
}, 0) |
||||
} |
||||
} |
||||
document.addEventListener('keyup', listener) |
||||
// this.$once('hook:beforeDestroy', () => {
|
||||
// document.removeEventListener('keyup', listener)
|
||||
// })
|
||||
}, |
||||
render: () => {} |
||||
} |
||||
// #endif
|
@ -0,0 +1,26 @@ |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
|
||||
} |
||||
}, |
||||
created(){ |
||||
this.popup = this.getParent() |
||||
}, |
||||
methods:{ |
||||
/** |
||||
* 获取父元素实例 |
||||
*/ |
||||
getParent(name = 'uniPopup') { |
||||
let parent = this.$parent; |
||||
let parentName = parent.$options.name; |
||||
while (parentName !== name) { |
||||
parent = parent.$parent; |
||||
if (!parent) return false |
||||
parentName = parent.$options.name; |
||||
} |
||||
return parent; |
||||
}, |
||||
} |
||||
} |
@ -0,0 +1,90 @@ |
||||
<template> |
||||
<view class="popup-root" v-if="isOpen" v-show="isShow" @click="clickMask"> |
||||
<view @click.stop> |
||||
<slot></slot> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
type CloseCallBack = ()=> void; |
||||
let closeCallBack:CloseCallBack = () :void => {}; |
||||
export default { |
||||
emits:["close","clickMask"], |
||||
data() { |
||||
return { |
||||
isShow:false, |
||||
isOpen:false |
||||
} |
||||
}, |
||||
props: { |
||||
maskClick: { |
||||
type: Boolean, |
||||
default: true |
||||
}, |
||||
}, |
||||
watch: { |
||||
// 设置show = true 时,如果没有 open 需要设置为 open |
||||
isShow:{ |
||||
handler(isShow) { |
||||
// console.log("isShow",isShow) |
||||
if(isShow && this.isOpen == false){ |
||||
this.isOpen = true |
||||
} |
||||
}, |
||||
immediate:true |
||||
}, |
||||
// 设置isOpen = true 时,如果没有 isShow 需要设置为 isShow |
||||
isOpen:{ |
||||
handler(isOpen) { |
||||
// console.log("isOpen",isOpen) |
||||
if(isOpen && this.isShow == false){ |
||||
this.isShow = true |
||||
} |
||||
}, |
||||
immediate:true |
||||
} |
||||
}, |
||||
methods:{ |
||||
open(){ |
||||
// ...funs : CloseCallBack[] |
||||
// if(funs.length > 0){ |
||||
// closeCallBack = funs[0] |
||||
// } |
||||
this.isOpen = true; |
||||
}, |
||||
clickMask(){ |
||||
if(this.maskClick == true){ |
||||
this.$emit('clickMask') |
||||
this.close() |
||||
} |
||||
}, |
||||
close(): void{ |
||||
this.isOpen = false; |
||||
this.$emit('close') |
||||
closeCallBack() |
||||
}, |
||||
hiden(){ |
||||
this.isShow = false |
||||
}, |
||||
show(){ |
||||
this.isShow = true |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
.popup-root { |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
width: 750rpx; |
||||
height: 100%; |
||||
flex: 1; |
||||
background-color: rgba(0, 0, 0, 0.3); |
||||
justify-content: center; |
||||
align-items: center; |
||||
z-index: 99; |
||||
} |
||||
</style> |
@ -0,0 +1,473 @@ |
||||
<template> |
||||
<view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']"> |
||||
<view @touchstart="touchstart"> |
||||
<uni-transition key="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass" |
||||
:duration="duration" :show="showTrans" @click="onTap" /> |
||||
<uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration" |
||||
:show="showTrans" @click="onTap"> |
||||
<view class="uni-popup__wrapper" :style="{ backgroundColor: bg }" :class="[popupstyle]" @click="clear"> |
||||
<slot /> |
||||
</view> |
||||
</uni-transition> |
||||
</view> |
||||
<!-- #ifdef H5 --> |
||||
<keypress v-if="maskShow" @esc="onTap" /> |
||||
<!-- #endif --> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
// #ifdef H5 |
||||
import keypress from './keypress.js' |
||||
// #endif |
||||
|
||||
/** |
||||
* PopUp 弹出层 |
||||
* @description 弹出层组件,为了解决遮罩弹层的问题 |
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329 |
||||
* @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式 |
||||
* @value top 顶部弹出 |
||||
* @value center 中间弹出 |
||||
* @value bottom 底部弹出 |
||||
* @value left 左侧弹出 |
||||
* @value right 右侧弹出 |
||||
* @value message 消息提示 |
||||
* @value dialog 对话框 |
||||
* @value share 底部分享示例 |
||||
* @property {Boolean} animation = [true|false] 是否开启动画 |
||||
* @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃) |
||||
* @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗 |
||||
* @property {String} backgroundColor 主窗口背景色 |
||||
* @property {String} maskBackgroundColor 蒙版颜色 |
||||
* @property {Boolean} safeArea 是否适配底部安全区 |
||||
* @event {Function} change 打开关闭弹窗触发,e={show: false} |
||||
* @event {Function} maskClick 点击遮罩触发 |
||||
*/ |
||||
|
||||
export default { |
||||
name: 'uniPopup', |
||||
components: { |
||||
// #ifdef H5 |
||||
keypress |
||||
// #endif |
||||
}, |
||||
emits: ['change', 'maskClick'], |
||||
props: { |
||||
// 开启动画 |
||||
animation: { |
||||
type: Boolean, |
||||
default: true |
||||
}, |
||||
// 弹出层类型,可选值,top: 顶部弹出层;bottom:底部弹出层;center:全屏弹出层 |
||||
// message: 消息提示 ; dialog : 对话框 |
||||
type: { |
||||
type: String, |
||||
default: 'center' |
||||
}, |
||||
// maskClick |
||||
isMaskClick: { |
||||
type: Boolean, |
||||
default: null |
||||
}, |
||||
// TODO 2 个版本后废弃属性 ,使用 isMaskClick |
||||
maskClick: { |
||||
type: Boolean, |
||||
default: null |
||||
}, |
||||
backgroundColor: { |
||||
type: String, |
||||
default: 'none' |
||||
}, |
||||
safeArea: { |
||||
type: Boolean, |
||||
default: true |
||||
}, |
||||
maskBackgroundColor: { |
||||
type: String, |
||||
default: 'rgba(0, 0, 0, 0.4)' |
||||
}, |
||||
}, |
||||
|
||||
watch: { |
||||
/** |
||||
* 监听type类型 |
||||
*/ |
||||
type: { |
||||
handler: function(type) { |
||||
if (!this.config[type]) return |
||||
this[this.config[type]](true) |
||||
}, |
||||
immediate: true |
||||
}, |
||||
isDesktop: { |
||||
handler: function(newVal) { |
||||
if (!this.config[newVal]) return |
||||
this[this.config[this.type]](true) |
||||
}, |
||||
immediate: true |
||||
}, |
||||
/** |
||||
* 监听遮罩是否可点击 |
||||
* @param {Object} val |
||||
*/ |
||||
maskClick: { |
||||
handler: function(val) { |
||||
this.mkclick = val |
||||
}, |
||||
immediate: true |
||||
}, |
||||
isMaskClick: { |
||||
handler: function(val) { |
||||
this.mkclick = val |
||||
}, |
||||
immediate: true |
||||
}, |
||||
// H5 下禁止底部滚动 |
||||
showPopup(show) { |
||||
// #ifdef H5 |
||||
// fix by mehaotian 处理 h5 滚动穿透的问题 |
||||
document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible' |
||||
// #endif |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
duration: 300, |
||||
ani: [], |
||||
showPopup: false, |
||||
showTrans: false, |
||||
popupWidth: 0, |
||||
popupHeight: 0, |
||||
config: { |
||||
top: 'top', |
||||
bottom: 'bottom', |
||||
center: 'center', |
||||
left: 'left', |
||||
right: 'right', |
||||
message: 'top', |
||||
dialog: 'center', |
||||
share: 'bottom' |
||||
}, |
||||
maskClass: { |
||||
position: 'fixed', |
||||
bottom: 0, |
||||
top: 0, |
||||
left: 0, |
||||
right: 0, |
||||
backgroundColor: 'rgba(0, 0, 0, 0.4)' |
||||
}, |
||||
transClass: { |
||||
position: 'fixed', |
||||
left: 0, |
||||
right: 0 |
||||
}, |
||||
maskShow: true, |
||||
mkclick: true, |
||||
popupstyle: 'top' |
||||
} |
||||
}, |
||||
computed: { |
||||
isDesktop() { |
||||
return this.popupWidth >= 500 && this.popupHeight >= 500 |
||||
}, |
||||
bg() { |
||||
if (this.backgroundColor === '' || this.backgroundColor === 'none') { |
||||
return 'transparent' |
||||
} |
||||
return this.backgroundColor |
||||
} |
||||
}, |
||||
mounted() { |
||||
const fixSize = () => { |
||||
const { |
||||
windowWidth, |
||||
windowHeight, |
||||
windowTop, |
||||
safeArea, |
||||
screenHeight, |
||||
safeAreaInsets |
||||
} = uni.getSystemInfoSync() |
||||
this.popupWidth = windowWidth |
||||
this.popupHeight = windowHeight + (windowTop || 0) |
||||
// TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异,需要框架修复 |
||||
if (safeArea && this.safeArea) { |
||||
// #ifdef MP-WEIXIN |
||||
this.safeAreaInsets = screenHeight - safeArea.bottom |
||||
// #endif |
||||
// #ifndef MP-WEIXIN |
||||
this.safeAreaInsets = safeAreaInsets.bottom |
||||
// #endif |
||||
} else { |
||||
this.safeAreaInsets = 0 |
||||
} |
||||
} |
||||
fixSize() |
||||
// #ifdef H5 |
||||
// window.addEventListener('resize', fixSize) |
||||
// this.$once('hook:beforeDestroy', () => { |
||||
// window.removeEventListener('resize', fixSize) |
||||
// }) |
||||
// #endif |
||||
}, |
||||
// #ifndef VUE3 |
||||
// TODO vue2 |
||||
destroyed() { |
||||
this.setH5Visible() |
||||
}, |
||||
// #endif |
||||
// #ifdef VUE3 |
||||
// TODO vue3 |
||||
unmounted() { |
||||
this.setH5Visible() |
||||
}, |
||||
// #endif |
||||
created() { |
||||
// this.mkclick = this.isMaskClick || this.maskClick |
||||
if (this.isMaskClick === null && this.maskClick === null) { |
||||
this.mkclick = true |
||||
} else { |
||||
this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick |
||||
} |
||||
if (this.animation) { |
||||
this.duration = 300 |
||||
} else { |
||||
this.duration = 0 |
||||
} |
||||
// TODO 处理 message 组件生命周期异常的问题 |
||||
this.messageChild = null |
||||
// TODO 解决头条冒泡的问题 |
||||
this.clearPropagation = false |
||||
this.maskClass.backgroundColor = this.maskBackgroundColor |
||||
}, |
||||
methods: { |
||||
setH5Visible() { |
||||
// #ifdef H5 |
||||
// fix by mehaotian 处理 h5 滚动穿透的问题 |
||||
document.getElementsByTagName('body')[0].style.overflow = 'visible' |
||||
// #endif |
||||
}, |
||||
/** |
||||
* 公用方法,不显示遮罩层 |
||||
*/ |
||||
closeMask() { |
||||
this.maskShow = false |
||||
}, |
||||
/** |
||||
* 公用方法,遮罩层禁止点击 |
||||
*/ |
||||
disableMask() { |
||||
this.mkclick = false |
||||
}, |
||||
// TODO nvue 取消冒泡 |
||||
clear(e) { |
||||
// #ifndef APP-NVUE |
||||
e.stopPropagation() |
||||
// #endif |
||||
this.clearPropagation = true |
||||
}, |
||||
|
||||
open(direction) { |
||||
// fix by mehaotian 处理快速打开关闭的情况 |
||||
if (this.showPopup) { |
||||
return |
||||
} |
||||
let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share'] |
||||
if (!(direction && innerType.indexOf(direction) !== -1)) { |
||||
direction = this.type |
||||
} |
||||
if (!this.config[direction]) { |
||||
console.error('缺少类型:', direction) |
||||
return |
||||
} |
||||
this[this.config[direction]]() |
||||
this.$emit('change', { |
||||
show: true, |
||||
type: direction |
||||
}) |
||||
}, |
||||
close(type) { |
||||
this.showTrans = false |
||||
this.$emit('change', { |
||||
show: false, |
||||
type: this.type |
||||
}) |
||||
clearTimeout(this.timer) |
||||
// // 自定义关闭事件 |
||||
// this.customOpen && this.customClose() |
||||
this.timer = setTimeout(() => { |
||||
this.showPopup = false |
||||
}, 300) |
||||
}, |
||||
// TODO 处理冒泡事件,头条的冒泡事件有问题 ,先这样兼容 |
||||
touchstart() { |
||||
this.clearPropagation = false |
||||
}, |
||||
|
||||
onTap() { |
||||
if (this.clearPropagation) { |
||||
// fix by mehaotian 兼容 nvue |
||||
this.clearPropagation = false |
||||
return |
||||
} |
||||
this.$emit('maskClick') |
||||
if (!this.mkclick) return |
||||
this.close() |
||||
}, |
||||
/** |
||||
* 顶部弹出样式处理 |
||||
*/ |
||||
top(type) { |
||||
this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top' |
||||
this.ani = ['slide-top'] |
||||
this.transClass = { |
||||
position: 'fixed', |
||||
left: 0, |
||||
right: 0, |
||||
backgroundColor: this.bg |
||||
} |
||||
// TODO 兼容 type 属性 ,后续会废弃 |
||||
if (type) return |
||||
this.showPopup = true |
||||
this.showTrans = true |
||||
this.$nextTick(() => { |
||||
if (this.messageChild && this.type === 'message') { |
||||
this.messageChild.timerClose() |
||||
} |
||||
}) |
||||
}, |
||||
/** |
||||
* 底部弹出样式处理 |
||||
*/ |
||||
bottom(type) { |
||||
this.popupstyle = 'bottom' |
||||
this.ani = ['slide-bottom'] |
||||
this.transClass = { |
||||
position: 'fixed', |
||||
left: 0, |
||||
right: 0, |
||||
bottom: 0, |
||||
paddingBottom: this.safeAreaInsets + 'px', |
||||
backgroundColor: this.bg |
||||
} |
||||
// TODO 兼容 type 属性 ,后续会废弃 |
||||
if (type) return |
||||
this.showPopup = true |
||||
this.showTrans = true |
||||
}, |
||||
/** |
||||
* 中间弹出样式处理 |
||||
*/ |
||||
center(type) { |
||||
this.popupstyle = 'center' |
||||
this.ani = ['zoom-out', 'fade'] |
||||
this.transClass = { |
||||
position: 'fixed', |
||||
/* #ifndef APP-NVUE */ |
||||
display: 'flex', |
||||
flexDirection: 'column', |
||||
/* #endif */ |
||||
bottom: 0, |
||||
left: 0, |
||||
right: 0, |
||||
top: 0, |
||||
justifyContent: 'center', |
||||
alignItems: 'center' |
||||
} |
||||
// TODO 兼容 type 属性 ,后续会废弃 |
||||
if (type) return |
||||
this.showPopup = true |
||||
this.showTrans = true |
||||
}, |
||||
left(type) { |
||||
this.popupstyle = 'left' |
||||
this.ani = ['slide-left'] |
||||
this.transClass = { |
||||
position: 'fixed', |
||||
left: 0, |
||||
bottom: 0, |
||||
top: 0, |
||||
backgroundColor: this.bg, |
||||
/* #ifndef APP-NVUE */ |
||||
display: 'flex', |
||||
flexDirection: 'column' |
||||
/* #endif */ |
||||
} |
||||
// TODO 兼容 type 属性 ,后续会废弃 |
||||
if (type) return |
||||
this.showPopup = true |
||||
this.showTrans = true |
||||
}, |
||||
right(type) { |
||||
this.popupstyle = 'right' |
||||
this.ani = ['slide-right'] |
||||
this.transClass = { |
||||
position: 'fixed', |
||||
bottom: 0, |
||||
right: 0, |
||||
top: 0, |
||||
backgroundColor: this.bg, |
||||
/* #ifndef APP-NVUE */ |
||||
display: 'flex', |
||||
flexDirection: 'column' |
||||
/* #endif */ |
||||
} |
||||
// TODO 兼容 type 属性 ,后续会废弃 |
||||
if (type) return |
||||
this.showPopup = true |
||||
this.showTrans = true |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
<style lang="scss"> |
||||
.uni-popup { |
||||
position: fixed; |
||||
/* #ifndef APP-NVUE */ |
||||
z-index: 99; |
||||
|
||||
/* #endif */ |
||||
&.top, |
||||
&.left, |
||||
&.right { |
||||
/* #ifdef H5 */ |
||||
top: var(--window-top); |
||||
/* #endif */ |
||||
/* #ifndef H5 */ |
||||
top: 0; |
||||
/* #endif */ |
||||
} |
||||
|
||||
.uni-popup__wrapper { |
||||
/* #ifndef APP-NVUE */ |
||||
display: block; |
||||
/* #endif */ |
||||
position: relative; |
||||
|
||||
/* iphonex 等安全区设置,底部安全区适配 */ |
||||
/* #ifndef APP-NVUE */ |
||||
// padding-bottom: constant(safe-area-inset-bottom); |
||||
// padding-bottom: env(safe-area-inset-bottom); |
||||
/* #endif */ |
||||
&.left, |
||||
&.right { |
||||
/* #ifdef H5 */ |
||||
padding-top: var(--window-top); |
||||
/* #endif */ |
||||
/* #ifndef H5 */ |
||||
padding-top: 0; |
||||
/* #endif */ |
||||
flex: 1; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.fixforpc-z-index { |
||||
/* #ifndef APP-NVUE */ |
||||
z-index: 999; |
||||
/* #endif */ |
||||
} |
||||
|
||||
.fixforpc-top { |
||||
top: 0; |
||||
} |
||||
</style> |
@ -0,0 +1,87 @@ |
||||
{ |
||||
"id": "uni-popup", |
||||
"displayName": "uni-popup 弹出层", |
||||
"version": "1.8.4", |
||||
"description": " Popup 组件,提供常用的弹层", |
||||
"keywords": [ |
||||
"uni-ui", |
||||
"弹出层", |
||||
"弹窗", |
||||
"popup", |
||||
"弹框" |
||||
], |
||||
"repository": "https://github.com/dcloudio/uni-ui", |
||||
"engines": { |
||||
"HBuilderX": "" |
||||
}, |
||||
"directories": { |
||||
"example": "../../temps/example_temps" |
||||
}, |
||||
"dcloudext": { |
||||
"sale": { |
||||
"regular": { |
||||
"price": "0.00" |
||||
}, |
||||
"sourcecode": { |
||||
"price": "0.00" |
||||
} |
||||
}, |
||||
"contact": { |
||||
"qq": "" |
||||
}, |
||||
"declaration": { |
||||
"ads": "无", |
||||
"data": "无", |
||||
"permissions": "无" |
||||
}, |
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", |
||||
"type": "component-vue" |
||||
}, |
||||
"uni_modules": { |
||||
"dependencies": [ |
||||
"uni-scss", |
||||
"uni-transition" |
||||
], |
||||
"encrypt": [], |
||||
"platforms": { |
||||
"cloud": { |
||||
"tcb": "y", |
||||
"aliyun": "y" |
||||
}, |
||||
"client": { |
||||
"App": { |
||||
"app-vue": "y", |
||||
"app-nvue": "y" |
||||
}, |
||||
"H5-mobile": { |
||||
"Safari": "y", |
||||
"Android Browser": "y", |
||||
"微信浏览器(Android)": "y", |
||||
"QQ浏览器(Android)": "y" |
||||
}, |
||||
"H5-pc": { |
||||
"Chrome": "y", |
||||
"IE": "y", |
||||
"Edge": "y", |
||||
"Firefox": "y", |
||||
"Safari": "y" |
||||
}, |
||||
"小程序": { |
||||
"微信": "y", |
||||
"阿里": "y", |
||||
"百度": "y", |
||||
"字节跳动": "y", |
||||
"QQ": "y" |
||||
}, |
||||
"快应用": { |
||||
"华为": "u", |
||||
"联盟": "u" |
||||
}, |
||||
"Vue": { |
||||
"vue2": "y", |
||||
"vue3": "y" |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
@ -0,0 +1,17 @@ |
||||
|
||||
|
||||
## Popup 弹出层 |
||||
> **组件名:uni-popup** |
||||
> 代码块: `uPopup` |
||||
> 关联组件:`uni-transition` |
||||
|
||||
|
||||
弹出层组件,在应用中弹出一个消息提示窗口、提示框等 |
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-popup) |
||||
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839 |
||||
|
||||
|
||||
|
||||
|
||||
|
@ -0,0 +1,22 @@ |
||||
## 1.3.2(2023-05-04) |
||||
- 修复 NVUE 平台报错的问题 |
||||
## 1.3.1(2021-11-23) |
||||
- 修复 init 方法初始化问题 |
||||
## 1.3.0(2021-11-19) |
||||
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) |
||||
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-transition](https://uniapp.dcloud.io/component/uniui/uni-transition) |
||||
## 1.2.1(2021-09-27) |
||||
- 修复 init 方法不生效的 Bug |
||||
## 1.2.0(2021-07-30) |
||||
- 组件兼容 vue3,如何创建 vue3 项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) |
||||
## 1.1.1(2021-05-12) |
||||
- 新增 示例地址 |
||||
- 修复 示例项目缺少组件的 Bug |
||||
## 1.1.0(2021-04-22) |
||||
- 新增 通过方法自定义动画 |
||||
- 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式 |
||||
- 优化 动画触发逻辑,使动画更流畅 |
||||
- 优化 支持单独的动画类型 |
||||
- 优化 文档示例 |
||||
## 1.0.2(2021-02-05) |
||||
- 调整为 uni_modules 目录规范 |
@ -0,0 +1,131 @@ |
||||
// const defaultOption = {
|
||||
// duration: 300,
|
||||
// timingFunction: 'linear',
|
||||
// delay: 0,
|
||||
// transformOrigin: '50% 50% 0'
|
||||
// }
|
||||
// #ifdef APP-NVUE
|
||||
const nvueAnimation = uni.requireNativePlugin('animation') |
||||
// #endif
|
||||
class MPAnimation { |
||||
constructor(options, _this) { |
||||
this.options = options |
||||
// 在iOS10+QQ小程序平台下,传给原生的对象一定是个普通对象而不是Proxy对象,否则会报parameter should be Object instead of ProxyObject的错误
|
||||
this.animation = uni.createAnimation({ |
||||
...options |
||||
}) |
||||
this.currentStepAnimates = {} |
||||
this.next = 0 |
||||
this.$ = _this |
||||
|
||||
} |
||||
|
||||
_nvuePushAnimates(type, args) { |
||||
let aniObj = this.currentStepAnimates[this.next] |
||||
let styles = {} |
||||
if (!aniObj) { |
||||
styles = { |
||||
styles: {}, |
||||
config: {} |
||||
} |
||||
} else { |
||||
styles = aniObj |
||||
} |
||||
if (animateTypes1.includes(type)) { |
||||
if (!styles.styles.transform) { |
||||
styles.styles.transform = '' |
||||
} |
||||
let unit = '' |
||||
if(type === 'rotate'){ |
||||
unit = 'deg' |
||||
} |
||||
styles.styles.transform += `${type}(${args+unit}) ` |
||||
} else { |
||||
styles.styles[type] = `${args}` |
||||
} |
||||
this.currentStepAnimates[this.next] = styles |
||||
} |
||||
_animateRun(styles = {}, config = {}) { |
||||
let ref = this.$.$refs['ani'].ref |
||||
if (!ref) return |
||||
return new Promise((resolve, reject) => { |
||||
nvueAnimation.transition(ref, { |
||||
styles, |
||||
...config |
||||
}, res => { |
||||
resolve() |
||||
}) |
||||
}) |
||||
} |
||||
|
||||
_nvueNextAnimate(animates, step = 0, fn) { |
||||
let obj = animates[step] |
||||
if (obj) { |
||||
let { |
||||
styles, |
||||
config |
||||
} = obj |
||||
this._animateRun(styles, config).then(() => { |
||||
step += 1 |
||||
this._nvueNextAnimate(animates, step, fn) |
||||
}) |
||||
} else { |
||||
this.currentStepAnimates = {} |
||||
typeof fn === 'function' && fn() |
||||
this.isEnd = true |
||||
} |
||||
} |
||||
|
||||
step(config = {}) { |
||||
// #ifndef APP-NVUE
|
||||
this.animation.step(config) |
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config) |
||||
this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin |
||||
this.next++ |
||||
// #endif
|
||||
return this |
||||
} |
||||
|
||||
run(fn) { |
||||
// #ifndef APP-NVUE
|
||||
this.$.animationData = this.animation.export() |
||||
this.$.timer = setTimeout(() => { |
||||
typeof fn === 'function' && fn() |
||||
}, this.$.durationTime) |
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.isEnd = false |
||||
let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref |
||||
if(!ref) return |
||||
this._nvueNextAnimate(this.currentStepAnimates, 0, fn) |
||||
this.next = 0 |
||||
// #endif
|
||||
} |
||||
} |
||||
|
||||
|
||||
const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d', |
||||
'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY', |
||||
'translateZ' |
||||
] |
||||
const animateTypes2 = ['opacity', 'backgroundColor'] |
||||
const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom'] |
||||
animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => { |
||||
MPAnimation.prototype[type] = function(...args) { |
||||
// #ifndef APP-NVUE
|
||||
this.animation[type](...args) |
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this._nvuePushAnimates(type, args) |
||||
// #endif
|
||||
return this |
||||
} |
||||
}) |
||||
|
||||
export function createAnimation(option, _this) { |
||||
if(!_this) return |
||||
clearTimeout(_this.timer) |
||||
return new MPAnimation(option, _this) |
||||
} |
@ -0,0 +1,286 @@ |
||||
<template> |
||||
<!-- #ifndef APP-NVUE --> |
||||
<view v-show="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view> |
||||
<!-- #endif --> |
||||
<!-- #ifdef APP-NVUE --> |
||||
<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view> |
||||
<!-- #endif --> |
||||
</template> |
||||
|
||||
<script> |
||||
import { createAnimation } from './createAnimation' |
||||
|
||||
/** |
||||
* Transition 过渡动画 |
||||
* @description 简单过渡动画组件 |
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=985 |
||||
* @property {Boolean} show = [false|true] 控制组件显示或隐藏 |
||||
* @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型 |
||||
* @value fade 渐隐渐出过渡 |
||||
* @value slide-top 由上至下过渡 |
||||
* @value slide-right 由右至左过渡 |
||||
* @value slide-bottom 由下至上过渡 |
||||
* @value slide-left 由左至右过渡 |
||||
* @value zoom-in 由小到大过渡 |
||||
* @value zoom-out 由大到小过渡 |
||||
* @property {Number} duration 过渡动画持续时间 |
||||
* @property {Object} styles 组件样式,同 css 样式,注意带’-‘连接符的属性需要使用小驼峰写法如:`backgroundColor:red` |
||||
*/ |
||||
export default { |
||||
name: 'uniTransition', |
||||
emits:['click','change'], |
||||
props: { |
||||
show: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
modeClass: { |
||||
type: [Array, String], |
||||
default() { |
||||
return 'fade' |
||||
} |
||||
}, |
||||
duration: { |
||||
type: Number, |
||||
default: 300 |
||||
}, |
||||
styles: { |
||||
type: Object, |
||||
default() { |
||||
return {} |
||||
} |
||||
}, |
||||
customClass:{ |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
onceRender:{ |
||||
type:Boolean, |
||||
default:false |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
isShow: false, |
||||
transform: '', |
||||
opacity: 1, |
||||
animationData: {}, |
||||
durationTime: 300, |
||||
config: {} |
||||
} |
||||
}, |
||||
watch: { |
||||
show: { |
||||
handler(newVal) { |
||||
if (newVal) { |
||||
this.open() |
||||
} else { |
||||
// 避免上来就执行 close,导致动画错乱 |
||||
if (this.isShow) { |
||||
this.close() |
||||
} |
||||
} |
||||
}, |
||||
immediate: true |
||||
} |
||||
}, |
||||
computed: { |
||||
// 生成样式数据 |
||||
stylesObject() { |
||||
let styles = { |
||||
...this.styles, |
||||
'transition-duration': this.duration / 1000 + 's' |
||||
} |
||||
let transform = '' |
||||
for (let i in styles) { |
||||
let line = this.toLine(i) |
||||
transform += line + ':' + styles[i] + ';' |
||||
} |
||||
return transform |
||||
}, |
||||
// 初始化动画条件 |
||||
transformStyles() { |
||||
return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject |
||||
} |
||||
}, |
||||
created() { |
||||
// 动画默认配置 |
||||
this.config = { |
||||
duration: this.duration, |
||||
timingFunction: 'ease', |
||||
transformOrigin: '50% 50%', |
||||
delay: 0 |
||||
} |
||||
this.durationTime = this.duration |
||||
}, |
||||
methods: { |
||||
/** |
||||
* ref 触发 初始化动画 |
||||
*/ |
||||
init(obj = {}) { |
||||
if (obj.duration) { |
||||
this.durationTime = obj.duration |
||||
} |
||||
this.animation = createAnimation(Object.assign(this.config, obj),this) |
||||
}, |
||||
/** |
||||
* 点击组件触发回调 |
||||
*/ |
||||
onClick() { |
||||
this.$emit('click', { |
||||
detail: this.isShow |
||||
}) |
||||
}, |
||||
/** |
||||
* ref 触发 动画分组 |
||||
* @param {Object} obj |
||||
*/ |
||||
step(obj, config = {}) { |
||||
if (!this.animation) return |
||||
for (let i in obj) { |
||||
try { |
||||
if(typeof obj[i] === 'object'){ |
||||
this.animation[i](...obj[i]) |
||||
}else{ |
||||
this.animation[i](obj[i]) |
||||
} |
||||
} catch (e) { |
||||
console.error(`方法 ${i} 不存在`) |
||||
} |
||||
} |
||||
this.animation.step(config) |
||||
return this |
||||
}, |
||||
/** |
||||
* ref 触发 执行动画 |
||||
*/ |
||||
run(fn) { |
||||
if (!this.animation) return |
||||
this.animation.run(fn) |
||||
}, |
||||
// 开始过度动画 |
||||
open() { |
||||
clearTimeout(this.timer) |
||||
this.transform = '' |
||||
this.isShow = true |
||||
let { opacity, transform } = this.styleInit(false) |
||||
if (typeof opacity !== 'undefined') { |
||||
this.opacity = opacity |
||||
} |
||||
this.transform = transform |
||||
// 确保动态样式已经生效后,执行动画,如果不加 nextTick ,会导致 wx 动画执行异常 |
||||
this.$nextTick(() => { |
||||
// TODO 定时器保证动画完全执行,目前有些问题,后面会取消定时器 |
||||
this.timer = setTimeout(() => { |
||||
this.animation = createAnimation(this.config, this) |
||||
this.tranfromInit(false).step() |
||||
this.animation.run() |
||||
this.$emit('change', { |
||||
detail: this.isShow |
||||
}) |
||||
}, 20) |
||||
}) |
||||
}, |
||||
// 关闭过度动画 |
||||
close(type) { |
||||
if (!this.animation) return |
||||
this.tranfromInit(true) |
||||
.step() |
||||
.run(() => { |
||||
this.isShow = false |
||||
this.animationData = null |
||||
this.animation = null |
||||
let { opacity, transform } = this.styleInit(false) |
||||
this.opacity = opacity || 1 |
||||
this.transform = transform |
||||
this.$emit('change', { |
||||
detail: this.isShow |
||||
}) |
||||
}) |
||||
}, |
||||
// 处理动画开始前的默认样式 |
||||
styleInit(type) { |
||||
let styles = { |
||||
transform: '' |
||||
} |
||||
let buildStyle = (type, mode) => { |
||||
if (mode === 'fade') { |
||||
styles.opacity = this.animationType(type)[mode] |
||||
} else { |
||||
styles.transform += this.animationType(type)[mode] + ' ' |
||||
} |
||||
} |
||||
if (typeof this.modeClass === 'string') { |
||||
buildStyle(type, this.modeClass) |
||||
} else { |
||||
this.modeClass.forEach(mode => { |
||||
buildStyle(type, mode) |
||||
}) |
||||
} |
||||
return styles |
||||
}, |
||||
// 处理内置组合动画 |
||||
tranfromInit(type) { |
||||
let buildTranfrom = (type, mode) => { |
||||
let aniNum = null |
||||
if (mode === 'fade') { |
||||
aniNum = type ? 0 : 1 |
||||
} else { |
||||
aniNum = type ? '-100%' : '0' |
||||
if (mode === 'zoom-in') { |
||||
aniNum = type ? 0.8 : 1 |
||||
} |
||||
if (mode === 'zoom-out') { |
||||
aniNum = type ? 1.2 : 1 |
||||
} |
||||
if (mode === 'slide-right') { |
||||
aniNum = type ? '100%' : '0' |
||||
} |
||||
if (mode === 'slide-bottom') { |
||||
aniNum = type ? '100%' : '0' |
||||
} |
||||
} |
||||
this.animation[this.animationMode()[mode]](aniNum) |
||||
} |
||||
if (typeof this.modeClass === 'string') { |
||||
buildTranfrom(type, this.modeClass) |
||||
} else { |
||||
this.modeClass.forEach(mode => { |
||||
buildTranfrom(type, mode) |
||||
}) |
||||
} |
||||
|
||||
return this.animation |
||||
}, |
||||
animationType(type) { |
||||
return { |
||||
fade: type ? 1 : 0, |
||||
'slide-top': `translateY(${type ? '0' : '-100%'})`, |
||||
'slide-right': `translateX(${type ? '0' : '100%'})`, |
||||
'slide-bottom': `translateY(${type ? '0' : '100%'})`, |
||||
'slide-left': `translateX(${type ? '0' : '-100%'})`, |
||||
'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`, |
||||
'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})` |
||||
} |
||||
}, |
||||
// 内置动画类型与实际动画对应字典 |
||||
animationMode() { |
||||
return { |
||||
fade: 'opacity', |
||||
'slide-top': 'translateY', |
||||
'slide-right': 'translateX', |
||||
'slide-bottom': 'translateY', |
||||
'slide-left': 'translateX', |
||||
'zoom-in': 'scale', |
||||
'zoom-out': 'scale' |
||||
} |
||||
}, |
||||
// 驼峰转中横线 |
||||
toLine(name) { |
||||
return name.replace(/([A-Z])/g, '-$1').toLowerCase() |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style></style> |
@ -0,0 +1,84 @@ |
||||
{ |
||||
"id": "uni-transition", |
||||
"displayName": "uni-transition 过渡动画", |
||||
"version": "1.3.2", |
||||
"description": "元素的简单过渡动画", |
||||
"keywords": [ |
||||
"uni-ui", |
||||
"uniui", |
||||
"动画", |
||||
"过渡", |
||||
"过渡动画" |
||||
], |
||||
"repository": "https://github.com/dcloudio/uni-ui", |
||||
"engines": { |
||||
"HBuilderX": "" |
||||
}, |
||||
"directories": { |
||||
"example": "../../temps/example_temps" |
||||
}, |
||||
"dcloudext": { |
||||
"sale": { |
||||
"regular": { |
||||
"price": "0.00" |
||||
}, |
||||
"sourcecode": { |
||||
"price": "0.00" |
||||
} |
||||
}, |
||||
"contact": { |
||||
"qq": "" |
||||
}, |
||||
"declaration": { |
||||
"ads": "无", |
||||
"data": "无", |
||||
"permissions": "无" |
||||
}, |
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", |
||||
"type": "component-vue" |
||||
}, |
||||
"uni_modules": { |
||||
"dependencies": ["uni-scss"], |
||||
"encrypt": [], |
||||
"platforms": { |
||||
"cloud": { |
||||
"tcb": "y", |
||||
"aliyun": "y" |
||||
}, |
||||
"client": { |
||||
"App": { |
||||
"app-vue": "y", |
||||
"app-nvue": "y" |
||||
}, |
||||
"H5-mobile": { |
||||
"Safari": "y", |
||||
"Android Browser": "y", |
||||
"微信浏览器(Android)": "y", |
||||
"QQ浏览器(Android)": "y" |
||||
}, |
||||
"H5-pc": { |
||||
"Chrome": "y", |
||||
"IE": "y", |
||||
"Edge": "y", |
||||
"Firefox": "y", |
||||
"Safari": "y" |
||||
}, |
||||
"小程序": { |
||||
"微信": "y", |
||||
"阿里": "y", |
||||
"百度": "y", |
||||
"字节跳动": "y", |
||||
"QQ": "y" |
||||
}, |
||||
"快应用": { |
||||
"华为": "u", |
||||
"联盟": "u" |
||||
}, |
||||
"Vue": { |
||||
"vue2": "y", |
||||
"vue3": "y" |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
@ -0,0 +1,11 @@ |
||||
|
||||
|
||||
## Transition 过渡动画 |
||||
> **组件名:uni-transition** |
||||
> 代码块: `uTransition` |
||||
|
||||
|
||||
元素过渡动画 |
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-transition) |
||||
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839 |
Loading…
Reference in new issue