myTest383
5 months ago
43 changed files with 2393 additions and 1853 deletions
@ -1,46 +1,46 @@ |
|||
.tab-bar { |
|||
pointer-events: auto; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
height: 50px; |
|||
/* background: #F69448; */ |
|||
display: flex; |
|||
padding-top: 5px; |
|||
padding-bottom: 5px; |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/bom_navigation.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
/* padding-bottom: env(safe-area-inset-bottom); */ |
|||
pointer-events: auto; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
height: 50px; |
|||
/* background: #F69448; */ |
|||
display: flex; |
|||
padding-top: 5px; |
|||
padding-bottom: 5px; |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/bom_navigation_new.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
/* padding-bottom: env(safe-area-inset-bottom); */ |
|||
} |
|||
|
|||
|
|||
.tab-bar-border { |
|||
background-color: rgba(246, 148, 72, 0.3); |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 100%; |
|||
height: 1px; |
|||
transform: scaleY(0.5); |
|||
background-color: rgba(246, 148, 72, 0.3); |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 100%; |
|||
height: 1px; |
|||
transform: scaleY(0.5); |
|||
} |
|||
|
|||
|
|||
.tab-bar-item { |
|||
flex: 1; |
|||
text-align: center; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
flex: 1; |
|||
text-align: center; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
|
|||
.tab-bar-item cover-image { |
|||
width: 27px; |
|||
height: 27px; |
|||
width: 27px; |
|||
height: 27px; |
|||
} |
|||
|
|||
|
|||
.tab-bar-item cover-view { |
|||
margin-top: 3px; |
|||
font-size: 10px; |
|||
margin-top: 3px; |
|||
font-size: 10px; |
|||
} |
|||
@ -0,0 +1,424 @@ |
|||
<template> |
|||
<view style="width: 100%;height: 100%;background: #60CA2C;display: flex;flex-direction: column;"> |
|||
|
|||
<NavBar ref="nav" navTitle="预约提货" :showIcon="true" :supportChange="false"> |
|||
</NavBar> |
|||
|
|||
<loading-state ref="pageView" @request="request"> |
|||
|
|||
<!-- <view style="background: #FFA35A;width: 100%;height: 100%;"> --> |
|||
|
|||
|
|||
<view style="display: flex;flex-direction: column;background: #F2F2F2; width: 100%; |
|||
border-radius: 25px;height: 100vh; padding: 10px;box-sizing: border-box;"> |
|||
|
|||
<view style="display: flex;flex-direction: column;background: #fff; |
|||
border-radius: 15px;padding: 15px 10px;"> |
|||
|
|||
<view v-if="info.storeSid!=''" |
|||
style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;"> |
|||
|
|||
<text |
|||
style="font-size: 16px;color: #000; font-weight: 600;font-family: sans-serif;">{{info.storeName}}</text> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;" @click="address()"> |
|||
<text style="font-size: 12px;color: #FF9900;">切换</text> |
|||
<image src="../../static/right_icon.png" style="width: 15px;height: 15px;margin-left: 5px;"> |
|||
</image> |
|||
</view> |
|||
</view> |
|||
|
|||
<view v-if="info.storeSid==''" |
|||
style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;"> |
|||
|
|||
<text |
|||
style="font-size: 16px;color: #000; font-weight: 600;font-family: sans-serif;">暂无提货点信息</text> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;" @click="address()"> |
|||
<text style="font-size: 12px;color: #FF9900;">去完善</text> |
|||
<image src="../../static/right_icon.png" style="width: 15px;height: 15px;margin-left: 5px;"> |
|||
</image> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view v-if="info.storeSid!=''" |
|||
style="display: flex;flex-direction: row;align-items: center;margin-top: 15px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/date.png" style="width:20px;height: 20px;"> |
|||
</image> |
|||
<text |
|||
style="margin-left: 5px;flex: 1;color: #666;font-size: 14px;">{{info.businessHours}}</text> |
|||
|
|||
</view> |
|||
|
|||
<view v-if="info.storeSid!=''" |
|||
style="display: flex;flex-direction: row;align-items: center;margin-top: 15px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/location.png" |
|||
style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text style="margin-left: 5px;flex: 1; color: #666;font-size: 14px;">{{info.address}}</text> |
|||
|
|||
</view> |
|||
|
|||
|
|||
<!-- <view style="display: flex;flex-direction: row;align-items: center;"> |
|||
|
|||
<text |
|||
style="font-size: 14px;color: #000; font-weight: 600;font-family: sans-serif; ">配送地址</text> |
|||
|
|||
<textarea bindblur="bindTextAreaBlur" :value="info.userAddress" @input="onKeyInput2" |
|||
style=" margin-left: 15px;border-bottom: 1px solid #ccc; padding-bottom: 5px; flex: 1;" |
|||
auto-height placeholder="请输入详细配送地址精确到门牌号" /> |
|||
</view> |
|||
--> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;align-items: center;justify-content: center;margin-top: 16px;"> |
|||
<text |
|||
style="font-size: 14px;color: #000; font-weight: 600;font-family: sans-serif; flex: 1;">提货时间</text> |
|||
|
|||
<uni-datetime-picker type="date" v-model="info.reserveDate" :start="info.start" |
|||
:clearIcon="false" :border="false" :disabledDate="disabledDate" /> |
|||
<image src="../../static/right_icon.png" style="width: 15px;height: 15px;margin-left: 5px;"> |
|||
</image> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
<view style="margin-top: 10px;display: flex;flex-direction: row;background: #fff;align-items: center; |
|||
border-radius: 15px;padding: 15px 10px;justify-content: space-between;"> |
|||
|
|||
<text style="font-size: 14px;color: #000; font-weight: 600;font-family: sans-serif;">联系人</text> |
|||
|
|||
<view v-if="info.name!=''" style="display: flex;flex-direction: row;align-items: center;" |
|||
@click="changePer()"> |
|||
|
|||
<text |
|||
style="font-size: 14px;color: #000; font-weight: 600;font-family: sans-serif;">{{info.name}}</text> |
|||
<text style="font-size: 12px;color: #999; margin-left: 8px;">{{info.phone}}</text> |
|||
|
|||
<image src="../../static/right_icon.png" style="width: 15px;height: 15px;margin-left: 5px;"> |
|||
</image> |
|||
</view> |
|||
|
|||
<view v-if="info.name==''" style="display: flex;flex-direction: row;align-items: center;" |
|||
@click="changePer()"> |
|||
|
|||
<text style="font-size: 12px;color: #999; margin-left: 8px;">去完善</text> |
|||
|
|||
<image src="../../static/right_icon.png" style="width: 15px;height: 15px;margin-left: 5px;"> |
|||
</image> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
|
|||
<view |
|||
style="margin-top: 10px;display: flex;flex-direction: column;background: #fff;border-radius: 15px;padding: 10px;"> |
|||
|
|||
<text style="font-size: 15px; color: #000; font-weight: 600;font-family: sans-serif;">提货列表</text> |
|||
|
|||
<scroll-view scroll-y="true" style="max-height:calc(100vh - 400px); width: 100%; box-sizing: border-box; margin-top: 10px;; |
|||
" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll"> |
|||
|
|||
<view style="width: 100%; display: flex;flex-direction: column; margin-top: 10px;"> |
|||
<view v-for="(item,index) in pickingUpGoods" |
|||
style="display: flex;flex-direction: column;justify-content: center;width: 100%; margin-top: 15px; "> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;width: 100%; "> |
|||
|
|||
<image :src="item.iconUrl" @click="itemClick(item.goodsSid)" |
|||
style="width: 90px;height: 90px; border-radius: 10px; " mode="aspectFill"> |
|||
</image> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: column;flex: 1; padding-bottom: 15px; margin-left: 10px;" |
|||
:style="{'border-bottom':(index == pickingUpGoods.length-1 ? 'none' : '1px #EFEFEF solid')}"> |
|||
|
|||
<text style="font-size: 13px;color: #000;" |
|||
@click="itemClick(item.goodsSid)">{{item.name}}</text> |
|||
|
|||
<!-- <text |
|||
style="font-size: 10px;color: #999;margin-top: 5px;">{{item.remark}}</text> --> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;"> |
|||
<text style="border: 1px #EE752F solid; border-radius: 5px; padding: 0px 8px; |
|||
font-size: 10px;color: #EE752F; ">{{item.weight}}{{item.specificationUnit}}/{{item.unitName}}</text> |
|||
|
|||
<text v-show="item.remarks!=''" style="margin-left: 10px; border: 1px #EE752F solid; border-radius: 5px; padding: 0px 8px; |
|||
font-size: 10px;color: #EE752F;">{{item.remarks}}</text> |
|||
<text |
|||
style="border: 1px #EE752F solid; background: #FF9900; color: #fff; font-size: 10px;border-radius: 5px; padding: 0px 8px;" |
|||
v-if="item.type=='0'">百姓菜!</text> |
|||
<text |
|||
style="border: 1px #3AA15F solid; background: #40C772; color: #fff; font-size: 10px;border-radius: 5px; padding: 0px 8px;" |
|||
v-if="item.type=='1'">精品菜!</text> |
|||
<text |
|||
style="border: 1px #1D60C7 solid; background: #2489F7; color: #fff; font-size: 10px;border-radius: 5px; padding: 0px 8px;" |
|||
v-if="item.type=='2'">企业菜!</text> |
|||
|
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between; margin-top: 15px; |
|||
margin-right: 15px;"> |
|||
|
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;"> |
|||
<text style="font-size: 12px;color: #FF5006;">存量：</text> |
|||
<text |
|||
style="font-size: 14px;color: #FF5006;">{{item.goodsNumber}}</text> |
|||
</view> |
|||
|
|||
|
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;"> |
|||
|
|||
<image src="../../static/jian_icon.png" mode="aspectFill" |
|||
style="width: 20px;height: 20px;" @click.stop="jian(item)"> |
|||
</image> |
|||
|
|||
<text |
|||
style="font-size: 14px;margin-left: 8px;margin-right: 8px;">{{item.count}}</text> |
|||
<image src="../../static/jia_icon.png" mode="aspectFill" |
|||
style="width: 20px;height: 20px;" @click.stop="jia(item)"> |
|||
</image> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</scroll-view> |
|||
|
|||
</view> |
|||
|
|||
<view |
|||
style=" position: fixed;bottom: 0; width: 100%; box-sizing: border-box; padding-left: 10vw;padding-right: 10vw;display: flex;flex-direction: row; justify-content: center;align-items: center;"> |
|||
<text style=" background: #60CA2C;color: #fff;margin-bottom: 20px; border-radius: 20px; |
|||
padding-top: 10px;padding-bottom: 10px;padding-left: 25vw;padding-right: 25vw; text-align: center;" |
|||
@click="congirmExtract()">确认提货</text> |
|||
</view> |
|||
|
|||
</view> |
|||
<!-- </view> --> |
|||
</loading-state> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
affiliation: "", |
|||
delivery: "", |
|||
info: { |
|||
|
|||
}, |
|||
pickingUpGoods: [], |
|||
disabledDate: [ |
|||
// '2023-12-16' |
|||
], |
|||
btnDisabled: false |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
|
|||
uni.$on("address", (e) => { |
|||
// 相当与下拉刷新 |
|||
this.info.storeSid = e.sid; |
|||
this.info.storeName = e.name; |
|||
this.info.businessHours = e.businessHours; |
|||
this.info.address = e.address; |
|||
}) |
|||
|
|||
uni.$on("changePer", (e) => { |
|||
// 相当与下拉刷新 |
|||
this.info.name = e.name; |
|||
this.info.phone = e.phone; |
|||
}) |
|||
|
|||
|
|||
this.pickingUpGoods = JSON.parse(decodeURIComponent(options.pickingUpGoods)) |
|||
this.affiliation = options.affiliation |
|||
this.delivery = options.delivery |
|||
|
|||
console.log(">>>>>", options); |
|||
console.log(">>>>>", this.pickingUpGoods); |
|||
console.log(">>>>>", this.affiliation); |
|||
console.log(">>>>>", this.delivery); |
|||
|
|||
this.request() |
|||
this.getSun() |
|||
|
|||
}, |
|||
onUnload() { |
|||
uni.$off('address'); |
|||
uni.$off('changePer'); |
|||
}, |
|||
methods: { |
|||
onKeyInput2(val) { |
|||
this.info.userAddress = val.detail.value |
|||
}, |
|||
itemClick(goodsSid) { |
|||
uni.navigateTo({ |
|||
url: '/pages/good/goodsDetail?sid=' + goodsSid |
|||
}) |
|||
}, |
|||
getSun() { |
|||
let _this = this |
|||
_this.$api.getExtractSaturAndSun().then((resp) => { |
|||
|
|||
_this.disabledDate = resp |
|||
|
|||
}).catch(e => { |
|||
|
|||
}) |
|||
}, |
|||
address() { |
|||
uni.navigateTo({ |
|||
url: '/pages/SelectAddressActivity' |
|||
}) |
|||
}, |
|||
changePer() { |
|||
uni.navigateTo({ |
|||
url: '/pages/good/changePersonnel?name=' + this.info.name + "&phone=" + this.info.phone |
|||
}) |
|||
}, |
|||
// 获取数据 |
|||
request() { |
|||
let _this = this |
|||
var params = { |
|||
customerSid: getApp().globalData.sid, |
|||
delivery: _this.delivery |
|||
} |
|||
|
|||
console.log(">>>>>", params); |
|||
_this.$api.getStoreBySid(params).then((resp) => { |
|||
_this.info = resp |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(2) |
|||
}) |
|||
|
|||
}).catch(e => { |
|||
console.log(e); |
|||
}) |
|||
}, |
|||
|
|||
jian(item) { |
|||
console.log("item》》》》", item) |
|||
const that = this |
|||
if (Number(item.count) == 1) { |
|||
|
|||
wx.showModal({ |
|||
content: '确定不要了吗', |
|||
cancelText: "再想想", |
|||
confirmText: "删除", |
|||
confirmColor: "#FF9900", |
|||
success(res) { |
|||
if (res.confirm) { |
|||
console.log('用户点击确定') |
|||
item.count = 0 |
|||
const index = that.pickingUpGoods.findIndex((info) => info.goodsSid === item |
|||
.goodsSid) |
|||
console.log("index》》》》", index) |
|||
that.pickingUpGoods.splice(index, 1) |
|||
} else if (res.cancel) { |
|||
|
|||
} |
|||
} |
|||
}) |
|||
|
|||
} else { |
|||
if (Number(item.count) > 0) { |
|||
item.count = Number(item.count) - 1 |
|||
} |
|||
|
|||
} |
|||
}, |
|||
jia(item) { |
|||
if (item.count < item.goodsNumber) |
|||
item.count = Number(item.count) + 1 |
|||
}, |
|||
congirmExtract() { |
|||
let _this = this |
|||
|
|||
if (this.btnDisabled) { |
|||
this.shortToast('请勿重复点击') |
|||
return |
|||
} |
|||
|
|||
this.btnDisabled = true |
|||
|
|||
if (_this.info.storeSid == '') { |
|||
this.shortToast('请完善提货点信息') |
|||
return |
|||
} |
|||
|
|||
|
|||
if (_this.info.reserveDate == '') { |
|||
this.shortToast('请选择日期') |
|||
this.btnDisabled = false |
|||
return |
|||
} |
|||
|
|||
if (this.info.name == "" || this.info.phone == '') { |
|||
this.shortToast('请完善联系人信息') |
|||
this.btnDisabled = false |
|||
return |
|||
} |
|||
|
|||
let list = [] |
|||
|
|||
for (var i = 0; i < this.pickingUpGoods.length; i++) { |
|||
var item = this.pickingUpGoods[i] |
|||
if (item.count > 0) |
|||
list.push({ |
|||
goodsSid: item.goodsSid, |
|||
select: item.count, |
|||
}) |
|||
} |
|||
// console.log("ddd", list); |
|||
|
|||
if (list.length == 0) { |
|||
this.shortToast('请添加商品') |
|||
this.btnDisabled = false |
|||
return |
|||
} |
|||
|
|||
var params = { |
|||
customerSid: getApp().globalData.sid, |
|||
affiliation: _this.affiliation, |
|||
reserveDate: _this.info.reserveDate, |
|||
storeSid: _this.info.storeSid, |
|||
userAddress: '', |
|||
userName: _this.info.name, |
|||
userPhone: _this.info.phone, |
|||
goodsVos: list |
|||
} |
|||
console.log("pppp", params); |
|||
|
|||
_this.$api.submissionExtract2(params).then((resp) => { |
|||
uni.navigateBack() |
|||
_this.btnDisabled = false |
|||
}).catch(e => { |
|||
console.log(e); |
|||
_this.btnDisabled = false |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -1,252 +1,254 @@ |
|||
<template> |
|||
<view style="height: 100%;display: flex;flex-direction: column;align-items: center;"> |
|||
<view |
|||
style="display: flex;flex-direction: column;align-items: center;overflow-y: scroll;flex:1;padding-top: 60rpx;"> |
|||
<view style="color: #666;margin-left: 20rpx;margin-right: 20rpx;text-align: center;font-size: 24rpx;"> |
|||
{{convertSecondsToHMS(page.countdown)}} |
|||
</view> |
|||
<view> |
|||
<text style="color: black;font-size: 35rpx;font-weight: bold;">￥</text> |
|||
<text style="color: black;font-size: 70rpx;font-weight: bold;">{{data.price}}</text> |
|||
</view> |
|||
<view style="color: #666;margin-left: 20rpx;margin-right: 20rpx;text-align: center;font-size: 24rpx;"> |
|||
{{data.goods}} |
|||
</view> |
|||
|
|||
<view style="background: #ffffff;margin-top: 100rpx;border-radius: 20rpx;width: calc(100vw - 40rpx);"> |
|||
<radio-group @change="radioChange"> |
|||
<label |
|||
style="width: 100%;height: 120rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;" |
|||
v-for="(item, index) in page.real" :key="index"> |
|||
<view style="width: 100%;height: 120rpx;display: flex;flex-direction: row;align-items: center;"> |
|||
<image :src="item.image" style="width: 55rpx;height: 55rpx;margin-left: 25rpx;"></image> |
|||
<text style="flex: 1;font-size: 30rpx;margin-left: 6rpx;">{{item.pay}}</text> |
|||
<radio style="transform:scale(0.8);margin-right: 25rpx;" :checked="index==0" |
|||
:value="index+''" :activeBackgroundColor="item.btnColor" /> |
|||
</view> |
|||
<view v-if="index != page.real.length-1" |
|||
style="width: 93%;height: 1px;background-color: #f1f2f3;"></view> |
|||
</label> |
|||
</radio-group> |
|||
</view> |
|||
</view> |
|||
<view class="btn" :style="{'background': page.real[page.selected].btnColor}" @click="createOrder"> |
|||
{{page.submitText}} |
|||
</view> |
|||
</view> |
|||
<view style="height: 100%;display: flex;flex-direction: column;align-items: center;"> |
|||
<view |
|||
style="display: flex;flex-direction: column;align-items: center;overflow-y: scroll;flex:1;padding-top: 60rpx;"> |
|||
<view style="color: #666;margin-left: 20rpx;margin-right: 20rpx;text-align: center;font-size: 24rpx;"> |
|||
{{convertSecondsToHMS(page.countdown)}} |
|||
</view> |
|||
<view> |
|||
<text style="color: black;font-size: 35rpx;font-weight: bold;">￥</text> |
|||
<text style="color: black;font-size: 70rpx;font-weight: bold;">{{data.price}}</text> |
|||
</view> |
|||
<view style="color: #666;margin-left: 20rpx;margin-right: 20rpx;text-align: center;font-size: 24rpx;"> |
|||
{{data.goods}} |
|||
</view> |
|||
|
|||
<view style="background: #ffffff;margin-top: 100rpx;border-radius: 20rpx;width: calc(100vw - 40rpx);"> |
|||
<radio-group @change="radioChange"> |
|||
<label |
|||
style="width: 100%;height: 120rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;" |
|||
v-for="(item, index) in page.real" :key="index"> |
|||
<view style="width: 100%;height: 120rpx;display: flex;flex-direction: row;align-items: center;"> |
|||
<image :src="item.image" style="width: 55rpx;height: 55rpx;margin-left: 25rpx;"></image> |
|||
<text style="flex: 1;font-size: 30rpx;margin-left: 6rpx;">{{item.pay}}</text> |
|||
<radio style="transform:scale(0.8);margin-right: 25rpx;" :checked="index==0" |
|||
:value="index+''" :activeBackgroundColor="item.btnColor" /> |
|||
</view> |
|||
<view v-if="index != page.real.length-1" |
|||
style="width: 93%;height: 1px;background-color: #f1f2f3;"></view> |
|||
</label> |
|||
</radio-group> |
|||
</view> |
|||
</view> |
|||
<view class="btn" :style="{'background': page.real[page.selected].btnColor}" @click="createOrder"> |
|||
{{page.submitText}} |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
http |
|||
} from '../../utils/pay_http.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: { |
|||
// 本插件提供的支付方式 |
|||
supports: [{ |
|||
payType: 'wxpay', |
|||
pay: '微信', |
|||
image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAADcUlEQVR4nO2ZfVLaUBDAdyFCAGekJyg9Qb2BMBX/lZ4APEHxBOIJSk+gnqD0X6EFT6A9QfUExZkCAUK2u1iYNF98+CiR8ptR92Xy8X4vm7cvEWFD2IqEjf9DJN3UMwMTihyunZgGV+2ccQ8++Iqk6vGPFkCZw9AQAah28v1TDl14iqQa8apF8IHD0BFB+NQ57LsG2CUi6dQ36QeHoSWu4RtnmrlEknW9QkBnHIaYyGkv36tyMOVFiiDgeTdvVMDGVmSdbEUWAx+QoIVR/rHgHmxwXcoCQQaQCgSwx5uWYsUieBMFqPzKGy2Yg2QjWSCyygB0wM2FWIkIn+AxAliYV8DJH6EqC73m5lwoF+EU+h7bSWTbuXabm0uTbqbTg2GvRQhvuTkTpSKqJCaITN80anxnDrgZiDIRPugxpiUyqiSEVEMvElGZAPa5GYg6EYy+7x52axw+C7kLw5FxbFlQ4VucAUYWhdaMBasSEUmp7lF/n8OlEYGBaXBnx3cgzZukI19iGpZlMZi81i8JqcibPVEiwmPmWrAJ0rlZqSYr68EIzoioBFPwgaftkn3We5rJRp859ESJiNcSetxBk24BoydeKbdb17MWQpFsAnzhR/5ddXZIkEHpm72fHHqCKkR6+b7rGCFZj9cI4DjCb3E7WuJc7o4IjADOOIWyYINPME0j8CFRjxP/8WSlIk+dpiaHY3inNvHgcmjDnUZ+rE1ESF7H77yKGh/gm0Z+rFwkriVeSdpw6CL1VS9ZFl1wOAUJr2I7UAlKIyfyzAW9bisRmVVD+FmRlNrjPW84jSrzpJETrwGxo0aER7h7ZJTABxnNIUTTnVznjptLwYNxSwEVXomIEJRez8U5aXihTAQRL7uHxgmHShnXj6HB9YgyEIAyEWHWs7IMyYZ+Qbai6YdaEa4TGMHTzjvjEhQwr4SgVGRCJIInz5FJNVP7ZJoXFPBwO1mJyKxZzA+Z3WQBCTT+EJHmTXOzGhHbSWXVyt9KjvmkrZ0o3DiL4O43/WBk4T6SlSUA3nc57NecwNf8m0VFooA5TdPvBmZP0mPpzi3CSkRkKiYLspxjGfhHrERkHWxFwsbGiHD1cn03cInI/B70LhAGvL4buESEjfhn6IQwyvhJCL4iwlOaYQGB0txcGwTYjmtUc6aTnUCRl8RWJGxsjMhvudpkUV3iI98AAAAASUVORK5CYII=', |
|||
btnColor: '#FE9039' |
|||
}], |
|||
// 可使用的方式，主要是对App,h5可进行定义，微信小程序定时时无效(因为仅支持微信支付) |
|||
use: [0], |
|||
real: [], |
|||
selected: 0, |
|||
countdown: 0, |
|||
submitText: '确认支付', |
|||
cancleText: '订单已取消' |
|||
}, |
|||
data: { |
|||
price: '价格', |
|||
goods: '商品名称', |
|||
remainder: 60000, |
|||
// 生成待支付订单时后台返回的,具体地址是啥，参数是啥由后台提供 |
|||
// 唯一支付方式固定为type参数 |
|||
pay_url: { |
|||
url: '底梦哲提供，王鹏飞进行组装成绝对地址返回', |
|||
// 底梦哲提接口传参要求，王鹏飞进行组装 |
|||
params: { |
|||
// 此参数由本工具进行返回，后台不需要传 |
|||
type: '支付方式，由本框架提供', |
|||
// ...更多参数 |
|||
} |
|||
}, |
|||
// 由前端去设置，查看订单的详情地址 |
|||
return_url: '订单详情的地址' |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
wxPay(order, o) { |
|||
|
|||
wx.requestPayment({ |
|||
appId: order.appid, |
|||
timeStamp: order.timeStamp, //创建订单时间戳 |
|||
nonceStr: order.nonceStr, |
|||
package: order.package, // 订单包 |
|||
signType: order.signType, // 加密方式统一'MD5' |
|||
paySign: order.sign, // 后台支付签名返回 |
|||
success(res) { |
|||
// 数据源转换成字符 |
|||
let data = JSON.stringify(o) |
|||
// 转码传输 |
|||
let value = encodeURIComponent(data) |
|||
uni.redirectTo({ |
|||
url: '/uni_modules/common-pay/pages/success/success?data=' + |
|||
value |
|||
}) |
|||
}, |
|||
fail(res) { |
|||
try { |
|||
if (err.errMsg != 'requestPayment:fail cancel') { |
|||
uni.showToast({ |
|||
icon: 'error', |
|||
title: '支付失败' |
|||
}) |
|||
} |
|||
} catch (e) { |
|||
//TODO handle the exception |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
convertSecondsToHMS(seconds) { |
|||
var hours = Math.floor(seconds / (60 * 60)); // 计算小时 |
|||
seconds %= (60 * 60); // 取余得到不足1小时的秒数 |
|||
|
|||
var minutes = Math.floor(seconds / 60); // 计算分钟 |
|||
seconds %= 60; // 取余得到不足1分钟的秒数 |
|||
|
|||
let result = '支付剩余时间 ' |
|||
if (hours > 0) { |
|||
result += (hours < 10 ? '0' + hours : hours) + ":" + (minutes < 10 ? '0' + minutes : minutes) + ":" + ( |
|||
seconds < 10 ? '0' + seconds : seconds) |
|||
} else { |
|||
// 不显示小时，直接显示 分钟：秒 |
|||
if (minutes > 0) { |
|||
result += (minutes < 10 ? '0' + minutes : minutes) + ":" + (seconds < 10 ? '0' + seconds : seconds) |
|||
} else { |
|||
result += "00:" + (seconds < 10 ? '0' + seconds : seconds) |
|||
} |
|||
} |
|||
|
|||
return result |
|||
}, |
|||
startCountdown() { |
|||
setInterval(() => { |
|||
if (this.page.countdown > 0) { |
|||
this.page.countdown--; |
|||
} else { |
|||
// 秒杀倒计时结束的操作，例如弹出提示或触发秒杀请求 |
|||
this.page.submitText = this.page.cancleText |
|||
} |
|||
}, 1000); |
|||
}, |
|||
radioChange: function(evt) { |
|||
this.page.selected = parseInt(evt.detail.value) |
|||
}, |
|||
createOrder() { |
|||
|
|||
if (this.page.cancleText === this.page.submitText) { |
|||
uni.showToast({ |
|||
icon: 'error', |
|||
title: this.page.cancleText |
|||
}) |
|||
return |
|||
} |
|||
|
|||
// 额外组装type |
|||
let payType = this.page.real[this.page.selected].payType |
|||
this.data.pay_url.params.type = payType |
|||
|
|||
let o = this.data |
|||
o.color = this.page.real[this.page.selected].btnColor |
|||
o.pay = this.page.real[this.page.selected].pay |
|||
|
|||
http({ |
|||
url: this.data.pay_url.url, |
|||
data: this.data.pay_url.params |
|||
}).then((res) => { |
|||
if ('wxpay' === payType) { |
|||
this.wxPay(res.data, o) |
|||
} |
|||
}).catch((err) => { |
|||
console.log('fail', JSON.stringify(err)); |
|||
}); |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
|
|||
try { |
|||
// 跳转携带数据 |
|||
this.data = JSON.parse(options.data) |
|||
} catch (e) { |
|||
this.data = JSON.parse(decodeURIComponent(options.data)) |
|||
} |
|||
|
|||
this.page.countdown = this.data.remainder; |
|||
if (this.page.countdown <= 0) { |
|||
this.page.submitText = this.page.cancleText |
|||
} else { |
|||
// 开始倒计时 |
|||
this.startCountdown(); |
|||
} |
|||
|
|||
// ToDo h5，app下生效 |
|||
// 将来支持配置 |
|||
// #ifdef APP || H5 |
|||
|
|||
// #endif |
|||
// 微信下生效 |
|||
// #ifdef MP-WEIXIN |
|||
// 微信不支持配置 |
|||
this.page.use = [0] |
|||
// #endif |
|||
|
|||
for (var i = 0; i < this.page.use.length; i++) { |
|||
this.page.real.push(this.page.supports[this.page.use[i]]) |
|||
} |
|||
|
|||
if (this.page.real.length < 1) { |
|||
uni.showModal({ |
|||
content: '未正确配置支付方式', |
|||
showCancel: false, |
|||
success: function(res) { |
|||
if (res.confirm) { |
|||
uni.navigateBack() |
|||
} |
|||
} |
|||
}); |
|||
return |
|||
} |
|||
|
|||
// if (this.page.real.length == 1) { |
|||
// // 仅有一个选择时直接调用支付接口 |
|||
// this.createOrder() |
|||
// } |
|||
} |
|||
} |
|||
import { |
|||
http |
|||
} from '../../utils/pay_http.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: { |
|||
// 本插件提供的支付方式 |
|||
supports: [{ |
|||
payType: 'wxpay', |
|||
pay: '微信', |
|||
image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAADcUlEQVR4nO2ZfVLaUBDAdyFCAGekJyg9Qb2BMBX/lZ4APEHxBOIJSk+gnqD0X6EFT6A9QfUExZkCAUK2u1iYNF98+CiR8ptR92Xy8X4vm7cvEWFD2IqEjf9DJN3UMwMTihyunZgGV+2ccQ8++Iqk6vGPFkCZw9AQAah28v1TDl14iqQa8apF8IHD0BFB+NQ57LsG2CUi6dQ36QeHoSWu4RtnmrlEknW9QkBnHIaYyGkv36tyMOVFiiDgeTdvVMDGVmSdbEUWAx+QoIVR/rHgHmxwXcoCQQaQCgSwx5uWYsUieBMFqPzKGy2Yg2QjWSCyygB0wM2FWIkIn+AxAliYV8DJH6EqC73m5lwoF+EU+h7bSWTbuXabm0uTbqbTg2GvRQhvuTkTpSKqJCaITN80anxnDrgZiDIRPugxpiUyqiSEVEMvElGZAPa5GYg6EYy+7x52axw+C7kLw5FxbFlQ4VucAUYWhdaMBasSEUmp7lF/n8OlEYGBaXBnx3cgzZukI19iGpZlMZi81i8JqcibPVEiwmPmWrAJ0rlZqSYr68EIzoioBFPwgaftkn3We5rJRp859ESJiNcSetxBk24BoydeKbdb17MWQpFsAnzhR/5ddXZIkEHpm72fHHqCKkR6+b7rGCFZj9cI4DjCb3E7WuJc7o4IjADOOIWyYINPME0j8CFRjxP/8WSlIk+dpiaHY3inNvHgcmjDnUZ+rE1ESF7H77yKGh/gm0Z+rFwkriVeSdpw6CL1VS9ZFl1wOAUJr2I7UAlKIyfyzAW9bisRmVVD+FmRlNrjPW84jSrzpJETrwGxo0aER7h7ZJTABxnNIUTTnVznjptLwYNxSwEVXomIEJRez8U5aXihTAQRL7uHxgmHShnXj6HB9YgyEIAyEWHWs7IMyYZ+Qbai6YdaEa4TGMHTzjvjEhQwr4SgVGRCJIInz5FJNVP7ZJoXFPBwO1mJyKxZzA+Z3WQBCTT+EJHmTXOzGhHbSWXVyt9KjvmkrZ0o3DiL4O43/WBk4T6SlSUA3nc57NecwNf8m0VFooA5TdPvBmZP0mPpzi3CSkRkKiYLspxjGfhHrERkHWxFwsbGiHD1cn03cInI/B70LhAGvL4buESEjfhn6IQwyvhJCL4iwlOaYQGB0txcGwTYjmtUc6aTnUCRl8RWJGxsjMhvudpkUV3iI98AAAAASUVORK5CYII=', |
|||
btnColor: '#60CA2C' |
|||
}], |
|||
// 可使用的方式，主要是对App,h5可进行定义，微信小程序定时时无效(因为仅支持微信支付) |
|||
use: [0], |
|||
real: [], |
|||
selected: 0, |
|||
countdown: 0, |
|||
submitText: '确认支付', |
|||
cancleText: '订单已取消' |
|||
}, |
|||
data: { |
|||
price: '价格', |
|||
goods: '商品名称', |
|||
remainder: 60000, |
|||
// 生成待支付订单时后台返回的,具体地址是啥，参数是啥由后台提供 |
|||
// 唯一支付方式固定为type参数 |
|||
pay_url: { |
|||
url: '底梦哲提供，王鹏飞进行组装成绝对地址返回', |
|||
// 底梦哲提接口传参要求，王鹏飞进行组装 |
|||
params: { |
|||
// 此参数由本工具进行返回，后台不需要传 |
|||
type: '支付方式，由本框架提供', |
|||
// ...更多参数 |
|||
} |
|||
}, |
|||
// 由前端去设置，查看订单的详情地址 |
|||
return_url: '订单详情的地址' |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
wxPay(order, o) { |
|||
|
|||
wx.requestPayment({ |
|||
appId: order.appid, |
|||
timeStamp: order.timeStamp, //创建订单时间戳 |
|||
nonceStr: order.nonceStr, |
|||
package: order.package, // 订单包 |
|||
signType: order.signType, // 加密方式统一'MD5' |
|||
paySign: order.sign, // 后台支付签名返回 |
|||
success(res) { |
|||
// 数据源转换成字符 |
|||
let data = JSON.stringify(o) |
|||
// 转码传输 |
|||
let value = encodeURIComponent(data) |
|||
uni.redirectTo({ |
|||
url: '/uni_modules/common-pay/pages/success/success?data=' + |
|||
value |
|||
}) |
|||
}, |
|||
fail(res) { |
|||
try { |
|||
if (err.errMsg != 'requestPayment:fail cancel') { |
|||
uni.showToast({ |
|||
icon: 'error', |
|||
title: '支付失败' |
|||
}) |
|||
} |
|||
} catch (e) { |
|||
//TODO handle the exception |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
convertSecondsToHMS(seconds) { |
|||
var hours = Math.floor(seconds / (60 * 60)); // 计算小时 |
|||
seconds %= (60 * 60); // 取余得到不足1小时的秒数 |
|||
|
|||
var minutes = Math.floor(seconds / 60); // 计算分钟 |
|||
seconds %= 60; // 取余得到不足1分钟的秒数 |
|||
|
|||
let result = '支付剩余时间 ' |
|||
if (hours > 0) { |
|||
result += (hours < 10 ? '0' + hours : hours) + ":" + (minutes < 10 ? '0' + minutes : minutes) + |
|||
":" + ( |
|||
seconds < 10 ? '0' + seconds : seconds) |
|||
} else { |
|||
// 不显示小时，直接显示 分钟：秒 |
|||
if (minutes > 0) { |
|||
result += (minutes < 10 ? '0' + minutes : minutes) + ":" + (seconds < 10 ? '0' + seconds : |
|||
seconds) |
|||
} else { |
|||
result += "00:" + (seconds < 10 ? '0' + seconds : seconds) |
|||
} |
|||
} |
|||
|
|||
return result |
|||
}, |
|||
startCountdown() { |
|||
setInterval(() => { |
|||
if (this.page.countdown > 0) { |
|||
this.page.countdown--; |
|||
} else { |
|||
// 秒杀倒计时结束的操作，例如弹出提示或触发秒杀请求 |
|||
this.page.submitText = this.page.cancleText |
|||
} |
|||
}, 1000); |
|||
}, |
|||
radioChange: function(evt) { |
|||
this.page.selected = parseInt(evt.detail.value) |
|||
}, |
|||
createOrder() { |
|||
|
|||
if (this.page.cancleText === this.page.submitText) { |
|||
uni.showToast({ |
|||
icon: 'error', |
|||
title: this.page.cancleText |
|||
}) |
|||
return |
|||
} |
|||
|
|||
// 额外组装type |
|||
let payType = this.page.real[this.page.selected].payType |
|||
this.data.pay_url.params.type = payType |
|||
|
|||
let o = this.data |
|||
o.color = this.page.real[this.page.selected].btnColor |
|||
o.pay = this.page.real[this.page.selected].pay |
|||
|
|||
http({ |
|||
url: this.data.pay_url.url, |
|||
data: this.data.pay_url.params |
|||
}).then((res) => { |
|||
if ('wxpay' === payType) { |
|||
this.wxPay(res.data, o) |
|||
} |
|||
}).catch((err) => { |
|||
console.log('fail', JSON.stringify(err)); |
|||
}); |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
|
|||
try { |
|||
// 跳转携带数据 |
|||
this.data = JSON.parse(options.data) |
|||
} catch (e) { |
|||
this.data = JSON.parse(decodeURIComponent(options.data)) |
|||
} |
|||
|
|||
this.page.countdown = this.data.remainder; |
|||
if (this.page.countdown <= 0) { |
|||
this.page.submitText = this.page.cancleText |
|||
} else { |
|||
// 开始倒计时 |
|||
this.startCountdown(); |
|||
} |
|||
|
|||
// ToDo h5，app下生效 |
|||
// 将来支持配置 |
|||
// #ifdef APP || H5 |
|||
|
|||
// #endif |
|||
// 微信下生效 |
|||
// #ifdef MP-WEIXIN |
|||
// 微信不支持配置 |
|||
this.page.use = [0] |
|||
// #endif |
|||
|
|||
for (var i = 0; i < this.page.use.length; i++) { |
|||
this.page.real.push(this.page.supports[this.page.use[i]]) |
|||
} |
|||
|
|||
if (this.page.real.length < 1) { |
|||
uni.showModal({ |
|||
content: '未正确配置支付方式', |
|||
showCancel: false, |
|||
success: function(res) { |
|||
if (res.confirm) { |
|||
uni.navigateBack() |
|||
} |
|||
} |
|||
}); |
|||
return |
|||
} |
|||
|
|||
// if (this.page.real.length == 1) { |
|||
// // 仅有一个选择时直接调用支付接口 |
|||
// this.createOrder() |
|||
// } |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
uni-page-body, |
|||
page { |
|||
background-color: #f1f3f5; |
|||
height: 100%; |
|||
} |
|||
|
|||
.btn { |
|||
width: calc(100% - 40rpx); |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
border-radius: 50rpx; |
|||
margin-bottom: 30rpx; |
|||
margin-top: 30rpx; |
|||
color: #fff; |
|||
} |
|||
uni-page-body, |
|||
page { |
|||
background-color: #f1f3f5; |
|||
height: 100%; |
|||
} |
|||
|
|||
.btn { |
|||
width: calc(100% - 40rpx); |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
border-radius: 50rpx; |
|||
margin-bottom: 30rpx; |
|||
margin-top: 30rpx; |
|||
color: #fff; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue