471 lines
11 KiB
Vue
471 lines
11 KiB
Vue
<template>
|
|
<view class="pages">
|
|
<view class="title">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/us3fy7PWk14FUljNypKh" mode=""
|
|
style="width: 52rpx;height: 52rpx;margin-right: 10rpx;vertical-align: bottom;vertical-align: bottom;"
|
|
@click="btnshouye"></image>
|
|
<text style="width: 80%;text-align: center;display: inline-block;">扫码床垫</text>
|
|
<view class="wz" @click="call" style="text-align: right;padding-right: 20rpx;"
|
|
v-if="obj.storeContactMobile == null">
|
|
<image style="width: 48rpx;height: 50rpx;vertical-align: middle;"
|
|
src="https://api.ccttiot.com/smartmeter/img/static/u9bYsfyXGAMwKMFfQAmL" mode=""></image>
|
|
<!-- <text>客服</text> -->
|
|
</view>
|
|
<view class="wz" @click="call"
|
|
style="text-align: right;padding-right: 20rpx;display: flex;align-items: center;" v-else>
|
|
<image style="width: 48rpx;height: 50rpx;vertical-align: middle;"
|
|
src="https://api.ccttiot.com/smartmeter/img/static/u9bYsfyXGAMwKMFfQAmL" mode=""></image>
|
|
<!-- <text>客服</text> -->
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 套餐 -->
|
|
<view class="list">
|
|
<view class="list_item" :class="activeindex == item.suitId ? 'active' : ''" v-for="(item,index) in list" :key="index"
|
|
@click="btnactive(item)">
|
|
<view class="tit">
|
|
<text class="tc" :class="activeindex == item.suitId ? 'active' : ''">{{item.name}}</text> <text class="yh"
|
|
:class="activeindex == item.suitId ? 'actives' : ''">{{item.usePoint}}%用户选择</text>
|
|
</view>
|
|
<view class="bot">
|
|
<view class="price" :class="activeindex == item.suitId ? 'active' : ''">
|
|
￥{{item.price}}
|
|
</view>
|
|
<view class="time" :class="activeindex == item.suitId ? 'active' : ''">
|
|
可使用{{item.value}}小时
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 说明 -->
|
|
<view class="shuom">
|
|
<view class="shuomtit">
|
|
设备规格
|
|
</view>
|
|
<view class="shuomwz">
|
|
尺寸：{{obj.size == undefined ? '--' : obj.size}}
|
|
</view>
|
|
<view class="shuomwz">
|
|
面料：{{obj.fabric == undefined ? '--' : obj.fabric}}
|
|
</view>
|
|
<view class="shuomwz">
|
|
填充物：{{obj.fill == undefined ? '--' : obj.fill}}
|
|
</view>
|
|
<view class="shuomwz">
|
|
所属房间：{{obj.room == undefined ? '--' : obj.room}}
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 支付 -->
|
|
<view class="tongyi">
|
|
<u-checkbox-group>
|
|
<u-checkbox v-model="checked" @change="checkboxChange" active-color="#8883F0 ">我已同意
|
|
</u-checkbox><text>《用户服务协议》</text>
|
|
</u-checkbox-group>
|
|
<view class="zf" @click="btnzhifu" v-if="zhifuflag">
|
|
立即支付
|
|
</view>
|
|
<view class="zf" v-else>
|
|
立即支付
|
|
</view>
|
|
</view>
|
|
<!-- 背景 -->
|
|
<view class="" style="position: fixed;top: 0;left: 0;width: 100%;height: 100vh;z-index: -1;">
|
|
<image style="width: 100%;height: 100vh;"
|
|
src="https://api.ccttiot.com/smartmeter/img/static/uOiCQSDjukktdvbx5oPw" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
// backgroundColor: "#8883f0",
|
|
},
|
|
checked: false,
|
|
zhifuflag: true,
|
|
activeindex: -1,
|
|
id: '',
|
|
list: [],
|
|
obj:{},
|
|
orderno:'',
|
|
payNo:'',
|
|
prices:'',
|
|
sytime:'',
|
|
zfobj:{},
|
|
suitTimeUnit:'',
|
|
suitPrice:'',
|
|
suitGearAmount:'',
|
|
suitGearTime:'',
|
|
suitFeeMode:'',
|
|
suitFeeType:'',
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
if (option.q) {
|
|
function getQueryParam(url, paramName) {
|
|
let regex = new RegExp(`[?&]${paramName}=([^&]*)`);
|
|
let results = regex.exec(url);
|
|
return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null
|
|
}
|
|
this.sceneValue = option.q
|
|
let decodedValue = decodeURIComponent(this.sceneValue);
|
|
this.id = getQueryParam(decodedValue, 's')
|
|
this.$u.get(`/app/user/userInfo`).then(res => {
|
|
if(res.code == 200){
|
|
this.getlist()
|
|
}else if(res.code == 401){
|
|
uni.navigateTo({
|
|
url:'/pages/login/login?id=' + this.id
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
this.id = option.id
|
|
this.$u.get(`/app/user/userInfo`).then(res => {
|
|
if(res.code == 200){
|
|
this.getlist()
|
|
}else if(res.code == 401){
|
|
uni.navigateTo({
|
|
url:'/pages/login/login?id=' + this.id
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
},
|
|
// 分享到好友（会话）
|
|
onShareAppMessage: function() {
|
|
return {
|
|
title: '创亿康',
|
|
path: '/pages/index/index'
|
|
}
|
|
},
|
|
|
|
// 分享到朋友圈
|
|
onShareTimeline: function() {
|
|
return {
|
|
title: '创亿康',
|
|
query: '',
|
|
path: '/pages/index/index'
|
|
}
|
|
},
|
|
methods: {
|
|
// 获取设备套餐列表
|
|
getlist() {
|
|
this.$u.get(`app/device/${this.id}/withSuitList`).then((res) => {
|
|
if (res.code == 200) {
|
|
this.list = res.data.suitList
|
|
this.obj = res.data
|
|
}else if(res.code == 401){
|
|
uni.navigateTo({
|
|
url:'/pages/login/login'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 点击支付
|
|
btnzhifu() {
|
|
if(this.checked == false){
|
|
uni.showToast({
|
|
title: '请勾选用户服务协议 !',
|
|
icon: 'none',
|
|
duration: 1000
|
|
})
|
|
}else if(this.activeindex == -1){
|
|
uni.showToast({
|
|
title: '请选择套餐 !',
|
|
icon: 'none',
|
|
duration: 1000
|
|
})
|
|
}else{
|
|
// 不允许一直点击支付
|
|
this.zhifuflag = false
|
|
let that = this
|
|
let data = {
|
|
deviceNo: that.id,
|
|
suitId: that.zfobj.suitId,
|
|
money: that.zfobj.price,
|
|
suitTime: that.zfobj.value,
|
|
suitTimeUnit:that.suitTimeUnit,
|
|
suitFeeMode:that.suitFeeMode,
|
|
suitFeeType:that.suitFeeType,
|
|
suitGearAmount:that.suitGearAmount,
|
|
suitGearTime:that.suitGearTime,
|
|
suitPrice:that.suitPrice
|
|
}
|
|
that.$u.post('/app/bill/recharge', data).then(res => {
|
|
if(res.code == 200){
|
|
that.orderno = res.data
|
|
let data = {
|
|
billNo:that.orderno,
|
|
channelId:1
|
|
}
|
|
that.$u.get(`app/pay/wx/${that.orderno}`).then(res => {
|
|
if(res.code == 200){
|
|
that.payNo = res.data.payBill.payNo
|
|
uni.requestPayment({
|
|
provider: 'wxpay',
|
|
timeStamp: res.data.payParams.timeStamp,
|
|
nonceStr: res.data.payParams.nonceStr,
|
|
package: res.data.payParams.packageVal,
|
|
signType: res.data.payParams.signType,
|
|
paySign: res.data.payParams.paySign,
|
|
success: (res) => {
|
|
that.zhifuflag = true
|
|
that.$u.put(`/app/bill/${that.payNo}/refreshPayResult`).then(res => {})
|
|
// 支付成功逻辑
|
|
uni.reLaunch({
|
|
// url:'/page_user/mydetail?id=' + that.orderno
|
|
url:'/pages/index/index'
|
|
})
|
|
},
|
|
fail(err) {
|
|
that.zhifuflag = true
|
|
// 支付失败逻辑
|
|
uni.showToast({
|
|
title: '支付失败',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
})
|
|
}else{
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
setTimeout(()=>{
|
|
this.zhifuflag = true
|
|
},2000)
|
|
}
|
|
})
|
|
}else{
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
setTimeout(()=>{
|
|
this.zhifuflag = true
|
|
},2000)
|
|
}
|
|
})
|
|
|
|
}
|
|
},
|
|
|
|
|
|
|
|
btnactive(item) {
|
|
this.activeindex = item.suitId
|
|
this.prices = item.price
|
|
this.sytime = item.value
|
|
this.zfobj = item
|
|
this.suitTimeUnit = item.timeUnit
|
|
this.suitPrice = item.price
|
|
this.suitGearAmount = item.gearAmount
|
|
this.suitGearTime = item.gearTime
|
|
this.suitFeeMode = item.feeMode
|
|
this.suitFeeType = item.feeType
|
|
},
|
|
|
|
btnshouye() {
|
|
uni.reLaunch({
|
|
url: '/pages/index/index'
|
|
})
|
|
},
|
|
checkboxChange(e) {
|
|
this.checked = e.value
|
|
},
|
|
// 联系客服
|
|
call() {
|
|
let phoneNumber = ''
|
|
if (this.obj.storeContactMobile == null) {
|
|
phoneNumber = this.obj.userMobile
|
|
} else {
|
|
phoneNumber = this.obj.storeContactMobile
|
|
}
|
|
uni.makePhoneCall({
|
|
phoneNumber: phoneNumber,
|
|
success: function(res) {
|
|
console.log('拨打电话成功', res)
|
|
},
|
|
fail: function(err) {
|
|
console.error('拨打电话失败', err)
|
|
uni.showToast({
|
|
title: '拨打电话失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.active {
|
|
background-color: #918CFF !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.actives {
|
|
background-color: #fff !important;
|
|
// color: #fff !important;
|
|
}
|
|
|
|
/deep/ .u-title {
|
|
padding-bottom: 15rpx;
|
|
}
|
|
|
|
// /deep/ .u-icon__icon {
|
|
// padding-bottom: 15rpx;
|
|
// }
|
|
|
|
page {
|
|
background-color: #F7FAFE;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.pages {
|
|
width: 750rpx;
|
|
box-sizing: border-box;
|
|
|
|
.shuom {
|
|
width: 650rpx;
|
|
height: 332rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
|
filter: blur(0px);
|
|
margin: auto;
|
|
margin-top: 98rpx;
|
|
border-radius: 20rpx;
|
|
padding-top: 32rpx;
|
|
padding-left: 36rpx;
|
|
box-sizing: border-box;
|
|
|
|
.shuomtit {
|
|
font-weight: 700;
|
|
font-size: 34rpx;
|
|
color: #383838;
|
|
}
|
|
|
|
.shuomwz {
|
|
font-size: 28rpx;
|
|
color: #383838;
|
|
margin-top: 16rpx;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
width: 648rpx;
|
|
margin: auto;
|
|
height: 42vh;
|
|
overflow: scroll;
|
|
|
|
.list_item {
|
|
width: 648rpx;
|
|
height: 192rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
|
filter: blur(0px);
|
|
border-radius: 20rpx;
|
|
margin-top: 30rpx;
|
|
padding-left: 36rpx;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
|
|
.tit {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.tc {
|
|
font-weight: 600;
|
|
font-size: 34rpx;
|
|
color: #3D3D3D;
|
|
padding-top: 26rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.yh {
|
|
width: 213rpx;
|
|
height: 67rpx;
|
|
background: #DCDBFF;
|
|
border-radius: 0 0 0 20rpx;
|
|
font-size: 28rpx;
|
|
color: #918CFF;
|
|
text-align: center;
|
|
line-height: 67rpx;
|
|
}
|
|
}
|
|
|
|
.bot {
|
|
margin-top: 40rpx;
|
|
display: flex;
|
|
|
|
.price {
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: #3D3D3D;
|
|
margin-right: 46rpx;
|
|
}
|
|
|
|
.time {
|
|
font-size: 32rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tongyi {
|
|
width: 590rpx;
|
|
position: fixed;
|
|
bottom: 50rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
text {
|
|
color: #638DFF;
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.zf {
|
|
width: 590rpx;
|
|
height: 84rpx;
|
|
background: #8883F0;
|
|
filter: blur(0px);
|
|
border-radius: 50rpx;
|
|
text-align: center;
|
|
line-height: 84rpx;
|
|
font-size: 36rpx;
|
|
color: #FFFFFF;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
margin-top: 40rpx;
|
|
padding-left: 32rpx;
|
|
font-weight: 600;
|
|
font-size: 40rpx;
|
|
color: #3D3D3D;
|
|
margin-top: 110rpx;
|
|
height: 126rpx;
|
|
|
|
.wz {
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
margin-top: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |