tcwm-uniapp-user/running/Cityservice/Cityservice.vue

1276 lines
29 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="help_send" style="padding-bottom: 10upx;">
<view class="part_two">
<view class="service_box" @click="bindadd(4)">
<view class="flex-sub margin-left-sm">
<view class="service_name" style="font-weight: bold;">
服务地址
</view>
</view>
<view class="service_address" v-if="JSON.stringify(citydata) != '{}'">
<view class="service_name">
{{citydata.province}}{{citydata.city}}{{citydata.district}}{{citydata.addressDetail}}
</view>
<view class="service_dd">
{{citydata.userName}}
<text>{{citydata.userPhone}}</text>
</view>
</view>
<view class="text-lg" v-else>请选择地址</view>
<view class="service_icon">
<u-icon name="arrow-right"></u-icon>
</view>
</view>
<u-line color="#E6E6E6" />
<u-form :model="forms" ref="uForm" label-position="left" :label-style="labelstyle">
<u-form-item label="服务时间" right-icon="arrow-right">
<u-input @click="onshowdata" :clearable="clearable" :disabled="true" v-model="forms.data"
input-align="right" placeholder="请确定服务时间" />
</u-form-item>
</u-form>
</view>
<view class="part_four" @click="bindtype()" v-if='title'>
<view class="service_type">服务类型</view>
<view class="service_type text-right">{{citytype}}</view>
<view class="service_you">
<u-icon name="arrow-right"></u-icon>
</view>
</view>
<view class="part_one">
<view class="pay_tit">
<view class="pay_name">服务内容</view>
<view class="pay_set">
<u-input v-model="values" type="textarea" :maxlength="500" :placeholder='placeholder' />
</view>
</view>
</view>
<view class="part_three">
<u-form :model="forms" ref="uForm" label-position="left" :label-style="labelstyle">
<!-- <u-form-item label="自备配件" right-icon="arrow-right">
<u-input @click="onshowm" :clearable="clearable" :disabled="true" v-model="forms.peijian"
input-align="right" />
</u-form-item> -->
<!-- <u-form-item label="保修期" right-icon="arrow-right">
<u-input @click="onshowvalua" v-model="forms.baoxiu" :disabled="true" :clearable="clearable"
input-align="right" />
</u-form-item> -->
<u-form-item label="红包" right-icon="arrow-right">
<u-input @click="onshowmoney" v-model="forms.hongbao" :disabled="true" :clearable="clearable"
input-align="right" placeholder="请选择红包" />
</u-form-item>
<u-form-item label="小费" right-icon="arrow-right">
<u-input v-model="forms.tip" type="number" :clearable="clearable" input-align="right"
@input="onKeyInput()" placeholder="接单更快 购买更加及时" />
</u-form-item>
</u-form>
</view>
<view class="content_sure">
<u-checkbox-group>
<u-checkbox v-model="check" shape="circle" active-color="#FF7F00">同意并接受</u-checkbox>
</u-checkbox-group>
<view style="font-size: 25rpx;margin-left: -10rpx;" @click="binduserxieyi()">
《跑腿代购服务用户协议》
</view>
</view>
<view class="tabbar">
<view class="tabbar_price">支付:
<text v-if="totalprice == ''">¥{{price || 0}}</text>
<text v-else>¥{{totalprice}}</text>
</view>
<view class="tabbar_btn">
<view class="but" @click="bindpay()">提交并支付</view>
</view>
</view>
<!-- 服务类型弹框 -->
<u-select v-model="typeshow" mode="single-column" value-name='id' label-name='serviceName' :list="list" @confirm="typeconfirm"></u-select>
<!-- 取件时间弹框 :range="multiSelector"-->
<u-picker mode="time" v-model="showdata" :default-selector='[0, 0]' cancel-tex="确认" :params="params"
@confirm="confirm"></u-picker>
<!-- 上门配件弹框 -->
<u-select v-model="menshow" mode="single-column" :list="mlist" @confirm="confirms"></u-select>
<!-- 红包弹框 -->
<u-popup v-model="showmoney" mode="bottom" :closeable="true" close-icon="close-circle"
close-icon-pos="top-right" close-icon-color="#8f9298" close-icon-size="50">
<view class="popup_money">
<view class="data_title">红包</view>
<view class="data_select">
<view class="money_box" v-for="(item,index) in hongbao" :key="index"
v-if="Number(item.redPacketType)==0||Number(item.redPacketType)==indentType">
<view class="box_tit">
<view class="money_name">{{item.redPacketTitle}}</view>
<view class="money_price">¥{{item.redPacketAmount}}</view>
</view>
<view class="money_data">有效期至{{item.expirationTime}}</view>
<view class="money_line">
<u-line direction="row" color="#E6E6E6" border-style="dashed" />
</view>
<view class="box_bottom">
<view class="money_use">满{{item.minimumAmount}}元可使用</view>
<view class="money_btn">
<view class="lj_use" @click="bindhongindex(item.redPacketId,item.redPacketAmount)">
立即使用
</view>
</view>
</view>
</view>
</view>
<!-- 暂无红包 -->
<view class="image_box" v-if="hongbao.length==0">
<image src="../../static/images/empty.png" style="width:100%;height: 350rpx;"></image>
<view style="width: 100%;text-align: center;color: #ccc;">暂无红包</view>
</view>
</view>
</u-popup>
<u-popup v-model="showpay" mode="bottom" close-icon="close-circle" close-icon-pos="top-right"
close-icon-color="#8f9298" close-icon-size="50">
<view class="popup_pay">
<view class="bg margin-top padding-lr radius">
<view style="padding: 0 20upx;margin-top: 36rpx;">
<view
style="display: flex;height: 100upx;align-items: center;padding: 20upx 0;justify-content: center;"
v-for="(item,index) in openLists" :key='index'>
<image :src="item.image" style="width: 55upx;height: 55upx;border-radius: 50upx;">
</image>
<view style="font-size: 30upx;margin-left: 20upx;width: 70%;">
{{item.text}}
</view>
<radio-group name="openWay" style="margin-left: 20upx;" @tap='selectWay(item)'>
<label class="tui-radio">
<radio color="#FF7F00" :checked="openWay === item.id ? true : false" />
</label>
</radio-group>
</view>
</view>
</view>
<view class="pay_btns" @click="pay()">确认支付</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
title: true,
openWay: 0,
typeshow: false,
values: '',
placeholder: '请填写服务内容',
list: [
{
value: '1',
label: '全能帮手'
}, {
value: '2',
label: '搬运货取'
}, {
value: '3',
label: '小时工'
}, {
value: '4',
label: '照顾宠物'
}, {
value: '5',
label: '传单派发'
}, {
value: '6',
label: '活动招募'
}, {
value: '7',
label: '异地代办'
}, {
value: '8',
label: '上门做饭'
},
],
menshow: false,
mlist: [{
value: '1',
label: '不需要配件'
}, {
value: '2',
label: '需要配件'
}],
// checked: false,
check: false,
mobile: '',
code: '',
forms: {
data: '立即上门',
baoxiu: '7天',
hongbao: '',
tip: '',
peijian: ''
},
clearable: false,
showdata: false,
showmoney: false,
showpay: false,
value: '',
type: 'text',
border: true,
params: {
// year: true,
// month: true,
day: true,
hour: true,
minute: true,
timestamp: true
},
price: 0,
indentType: '4',
cityPrice: {},
hongbao: [],
citydata: {},
citytype: '',
redPacketId: '',
year: '',
labelstyle: {
whiteSpace: 'nowrap',
fontWeight: 'bold',
textIndent: '20rpx'
},
indentNumber: '',
openLists: [],
totalprice: '',
addressId:''
}
},
onLoad(e) {
// console.log('``````', e)
// this.indentType = e.index
if(e.title) {
this.title = false
this.placeholder = '请填写'+ e.title + '的具体要求等'
uni.setNavigationBarTitle({
  title: e.title
})
}
// 计算基础价格
this.orderjc()
// 获取服务类型
this.getTypeList()
// #ifdef H5
let ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('micromessenger') !== -1) {
this.openLists = [{
image: '../static/icon_weixin.png',
text: '微信',
id: 2
}];
this.openWay = 2;
} else {
this.openLists = [{
image: '../static/zhifubao.png',
text: '支付宝',
id: 1
}];
this.openWay = 1;
}
// #endif
// #ifdef APP-PLUS
this.openLists = [{
image: '../static/zhifubao.png',
text: '支付宝',
id: 1
}, {
image: '../static/icon_weixin.png',
text: '微信',
id: 2
}];
this.openWay = 1;
// #endif
// #ifdef MP-WEIXIN
this.openLists = [{
image: '../static/icon_weixin.png',
text: '微信',
id: 2
}];
this.openWay = 2;
// #endif
},
onShow() {
console.log(this.addressId,'选择的地址id')
this.addressId = this.addressId?this.addressId:uni.getStorageSync('addressId')
if(this.addressId) {
this.getAddress(this.addressId)
}
// this.citydata = uni.getStorageSync('closeAddress').citydata ? uni.getStorageSync('closeAddress').citydata : {}
},
methods: {
getTypeList() {
this.$Request.getT('/app/servicetype/selectServiceTypeList').then(res => {
if (res.code == 0) {
this.list = res.data
}
});
},
// 查询地址
getAddress(e) {
let data = {
addressId: e
}
this.$Request.getT('/app/address/selectAddressById', data).then(res => {
if (res.code == 0) {
this.citydata = res.data
uni.removeStorageSync('addressId')
}
});
},
// 跑腿协议
binduserxieyi() {
uni.navigateTo({
url: '/my/setting/xieyi'
})
},
// 服务类型
typeconfirm(e) {
console.log(e)
this.placeholder = '请填写'+ e[0].label + '的具体要求等'
this.citytype = e[0].label
},
bindtype() {
this.typeshow = true
},
tabs(index) {
this.current = index;
},
// switch打开或者关闭时触发值为true或者false
// 即使不监听此事件this.checked此时也会相应的变成true或者false
change(status) {
// console.log(status);
},
bindtake() {
uni.navigateTo({
url: '/pages/closeaddress/closeaddress'
})
},
bindclose() {
uni.navigateTo({
url: '/pages/takeaddress/takeaddress'
})
},
// 注意返回值为一个数组,单列时取数组的第一个元素即可(只有一个元素)
confirm(e) {
console.log(e.timestamp)
let curDate = new Date();
this.year = curDate.getFullYear();
this.month = curDate.getMonth();
if (parseInt(curDate) >= parseInt(e.timestamp * 1000)) {
uni.showToast({
title: '请选择正确时间',
icon: 'none'
})
} else {
// this.selTime = e.timestamp
this.buyTime = this.year + '-' + this.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + '00'
this.forms.data = e.day + '号' + e.hour + ':' + e.minute
}
},
onshowdata() {
this.showdata = true
},
binddata() {
this.showdata = false
},
// 自行配件
confirms(e) {
// console.log(e)
this.forms.peijian = e[0].label
},
onshowm() {
this.menshow = true
},
bindadd(index) {
// console.log(index)
// uni.navigateTo({
// url: '/pages/closeaddress/closeaddress?index=' + index
// })
uni.navigateTo({
url: '/my/address/index?add=1&addressType=' + index
})
},
// 根据订单信息判断用户可用红包
onshowmoney() {
this.showmoney = true
let data = {
indentType: this.indentType, //订单类型
indentBasicsMoney: this.price
}
this.$Request.postJson('/app/tbindent/findRedPacket', data).then(res => {
// console.log(res)
if (res.code === 0) {
this.hongbao = res.data
// console.log(this.hongbao)
}
});
},
// 判断红包使用id
bindhongindex(id, price) {
// console.log(id)
this.redPacketId = id
this.forms.hongbao = price
this.showmoney = false
let price1 = ( Number(this.price) - Number(this.forms.hongbao) ).toFixed(2)
if(price1<=0) {
price1 = 0.01
}
console.log(price1,'价格')
this.totalprice = (Number(price1) + Number(this.forms.tip)).toFixed(2)
console.log(this.totalprice)
// this.totalprice = (Number(this.price || 0) - Number(this.forms.hongbao || 0) + Number(this.forms.tip || 0)).toFixed(2)
if(this.totalprice<=0) {
this.totalprice = 0.01
}
},
//计算订单基础价格
orderjc() {
let data = {
indentType: this.indentType //订单类型
}
this.$Request.postJson('/app/tbindent/basicsMoney', data).then(res => {
// console.log(res)
if (res.code === 0) {
this.price = res.data.indentBasicsMoney
this.cityPrice = res.data
// console.log(this.cityPrice)
}
});
},
// 价格计算
onKeyInput(e) {
console.log(e)
let price = (Number(this.price) - Number(this.forms.hongbao) ).toFixed(2)
if(price<=0) {
price = 0.01
}
this.totalprice = (Number(price) + Number(this.forms.tip)).toFixed(2)
if(this.totalprice<=0) {
this.totalprice = 0.01
}
},
// 提交订单
bindpay() {
// this.totalprice = (Number(this.price || 0) - Number(this.forms.hongbao || 0) + Number(this.forms.tip || 0)).toFixed(2)
console.log(this.totalprice)
if (JSON.stringify(this.citydata) == '{}') {
uni.showToast({
title: '请填写服务地址',
icon: 'none',
duration: 2000
});
return
}
if (this.citytype == '' && this.title) {
uni.showToast({
title: '请选择服务类型',
icon: 'none',
duration: 2000
});
return
}
if (this.values == '') {
uni.showToast({
title: '请填写服务内容',
icon: 'none',
duration: 2000
});
return
}
// if (this.forms.peijian == '') {
// uni.showToast({
// title: '请选取自备配件',
// icon: 'none',
// duration: 2000
// });
// return
// }
if (this.check == false) {
uni.showToast({
title: '请勾选跑腿协议',
icon: 'none',
duration: 2000
});
return
} else {
let data = {
// deliveryUserPhone: this.citydata.userPhone,
// deliveryUserName: this.citydata.userName,
// deliveryAddress: this.citydata.address,
// deilveryAddressDetail: this.citydata.addressDetail,
// deliveryAddressLatitude: this.citydata.addressLatitude,
// deliveryAddressLongitude: this.citydata.addressLongitude,
userName: this.citydata.userName, //收货人姓名
userPhone: this.citydata.userPhone, //收货人电话
userProvince: this.citydata.province, //收货人 省
userCity: this.citydata.city, //收货人 市
userDistrict: this.citydata.district, //收货人 区
userAddressDetail: this.citydata.addressDetail, //收货人详细地址
userLng: this.citydata.lng,
userLat: this.citydata.lat,
indentType: this.indentType,
serviceType: this.citytype,
serviceDetails: this.values,
sendOutTime: this.forms.data,
tool: this.forms.peijian,
warrantyPeriod: this.forms.baoxiu,
itemCode: "",
remarks: "",
tip: this.forms.tip,
redPacketId: this.redPacketId,
indentBasicsMoney: this.totalprice,
modeOfPayment: "",
errandMoney: this.cityPrice.errandMoney
}
this.$Request.postJson('/app/tbindent/addIndent', data).then(res => {
// console.log(res)
if (res.code == 0) {
this.indentNumber = res.data.indentNumber
// #ifdef MP-WEIXIN
this.openWay= 2
this.pay()
// #endif
// #ifndef MP-WEIXIN
this.showpay = true
// #endif
}
});
}
},
selectWay: function(item) {
this.openWay = item.id;
},
pay() {
// let indentNumber = this.indentNumber
// console.log(data)
if (this.openWay == 0) {
this.$queue.showToast('请选择支付方式!')
return;
}
if (this.openWay == 2) {
// #ifdef MP-WEIXIN
uni.showLoading({
title: '支付中...'
});
// 微信小程序支付
this.$Request.postJson("/app/wxErrPay/wxPayJsApiOrder?indentNumber=" + this.indentNumber).then(res => {
console.log(res, '********')
if (res.code == 0) {
console.log(this.openWay, '支付')
uni.requestPayment({
provider: 'wxpay',
timeStamp: res.data.timestamp,
nonceStr: res.data.noncestr,
package: res.data.package,
signType: res.data.signType,
paySign: res.data.sign,
success: function(suc) {
console.log('success:' + JSON.stringify(suc));
uni.showToast({
title: '支付成功',
icon: 'success'
})
uni.setStorageSync('current', 0)
setTimeout(function() {
uni.switchTab({
url: '/pages/order/index',
})
}, 10)
},
fail: function(err) {
console.log('fail:' + JSON.stringify(err));
uni.showToast({
title: '支付失败',
icon: 'none'
})
uni.switchTab({
url: '/pages/order/index'
})
}
});
}
})
// #endif
// #ifdef H5
let ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('micromessenger') !== -1) { //微信里打开
this.$Request.postJson('/app/wxPay/wxPayMpOrder?indentNumber=' + this.indentNumber)
.then(res => {
console.log(res)
if (res.code == 0) {
console.log()
this.callPay(res.data);
} else {
uni.showToast({
icon: 'none',
title: '支付失败!'
});
}
});
} else { //不是微信打开
this.$Request.postJson('/app/wxPay/wxPayMpOrder?indentNumber=' + this.indentNumber)
.then(
res => {
if (res.code == 0) {
console.log('....11111111.....', res.data)
const div = document.createElement('div')
div.innerHTML = res.data //此处form就是后台返回接收到的数据
console.log('....2.....', res.data)
document.body.appendChild(div)
console.log('....33333.....', document.forms[0])
document.forms[0].submit()
} else {
uni.showToast({
icon: 'none',
title: '支付失败!'
});
}
});
}
// #endif
} else {
// APP支付宝支付
this.$Request.postJson("/app/aliPay/payH5Order?indentNumber=" + this.indentNumber)
.then(
ret => {
console.log(ret)
// const div = document.createElement('div')
// div.innerHTML = ret.data //此处form就是后台返回接收到的数据
// document.body.appendChild(div)
// document.forms[0].submit()
this.isCheckPay(ret.code, 'alipay', ret.data);
});
}
},
callPay: function(response) {
if (typeof WeixinJSBridge === "undefined") {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(response), false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(response));
document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(response));
}
} else {
this.onBridgeReady(response);
}
},
onBridgeReady: function(response) {
let that = this;
if (!response.package) {
return;
}
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": response.appid, //公众号名称,由商户传入
"timeStamp": response.timestamp, //时间戳自1970年以来的秒数
"nonceStr": response.noncestr, //随机串
"package": response.package,
"signType": response.signType, //微信签名方式:
"paySign": response.sign //微信签名
},
function(res) {
console.log(res, '/*-/*-/*-')
if (res.err_msg === "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示:
//res.err_msg将在用户支付成功后返回ok但并不保证它绝对可靠。
uni.showLoading({
title: '支付成功'
});
setTimeout(function() {
uni.hideLoading();
uni.switchTab({
url: '../order/order'
})
}, 1000);
} else {
uni.hideLoading();
}
WeixinJSBridge.log(response.err_msg);
}
);
},
isCheckPay(status, name, order) {
if (status == 0) {
this.setPayment(name, order);
} else {
uni.hideLoading();
uni.showToast({
title: '支付信息有误',
icon: 'none'
});
}
},
setPayment(name, order) {
console.log('*-*-*')
uni.requestPayment({
provider: name,
orderInfo: order, //微信、支付宝订单数据
success: function(res) {
console.log(res)
uni.hideLoading();
uni.showLoading({
title: '支付成功'
});
uni.setStorageSync('current', 0)
setTimeout(function() {
uni.switchTab({
url: '/pages/order/order',
})
}, 10)
},
fail: function(err) {
console.log(err)
uni.hideLoading();
},
complete() {
uni.hideLoading();
}
});
},
}
}
</script>
<style>
body {
background: #F2EDED;
}
/* #ifndef MP-WEIXIN */
page {
background: #F2EDED;
}
/* #endif */
/* 取件时间弹框 */
.popup_data {
height: 600upx;
width: 100%;
position: relative;
}
.data_title {
width: 92%;
margin: 0 auto;
font-size: 34upx;
line-height: 110upx;
font-weight: bold;
letter-spacing: 2upx;
position: relative;
top: 0upx;
z-index: 99991;
}
.data_btn {
position: absolute;
bottom: 30upx;
width: 100%;
z-index: 99992;
}
.btn {
width: 90%;
margin: 0 auto;
height: 45upx;
color: white;
background: #FF7F00;
border-radius: 22upx;
text-align: center;
line-height: 90upx;
letter-spacing: 2upx;
}
.u-close {
position: absolute;
z-index: 999999 !important;
}
.u-picker-body {
height: 355upx !important;
}
/* .u-picker-header {
position: relative !important;
top: 138upx;
z-index: 99992;
} */
/* 物品信息弹框 */
.popup_info {
height: 1140upx;
width: 100%;
position: relative;
}
.data_items {
width: 100%;
}
.item_box {
width: 90%;
margin: 0 auto;
}
.item_btn {
border: 1upx solid #cccccc;
border-radius: 80upx;
width: 200upx;
height: 80upx;
text-align: center;
line-height: 80upx;
font-size: 31rpx;
margin-right: 10upx;
margin-left: 10upx;
margin-bottom: 20upx;
}
.item_btn:active {
background: #ffd9b3;
border: 2upx solid #ff7f00;
}
.item_type {
display: flex;
flex-wrap: wrap;
margin-top: 20upx;
}
/* 物品保价弹框 */
.valua_icon {
width: 90%;
position: absolute;
bottom: 140upx;
left: 42upx;
}
.input {
width: 90%;
margin: 0 auto;
}
.u-input--border {
border-radius: 12rupx;
border: 2upx solid #F2F2F2 !important;
background: #F2F2F2 !important;
}
.input_bg {
width: 90%;
margin: 0 auto;
position: relative;
}
.input_bg image {
width: 100%;
height: 90upx;
}
.input_bg text {
position: absolute;
top: 30upx;
left: 36upx;
color: #FF7F00;
font-size: 31rpx;
}
/* 红包弹框 */
.popup_money {
/* height: 400upx; */
width: 100%;
height: 630rpx;
position: relative;
background: #F2EDED;
padding-bottom: 45rpx;
/* #ifndef MP-WEIXIN */
height: 680rpx;
/* #endif */
}
.uni-scroll-view,
.uni-scroll-view-content {
position: relative;
width: 100%;
height: 100%;
background: #F2EDED;
}
.image_box {
width: 40%;
margin: 0 auto;
margin-bottom: 110rpx;
}
.u-drawer-bottom {
background-color: #FAF7F5 !important;
}
.money_box {
width: 93%;
margin: 0 auto;
background: #ffffff;
border-radius: 16upx;
height: 250upx;
margin-bottom: 20upx;
}
.box_tit {
width: 90%;
margin: 0 auto;
height: 80upx;
display: flex;
}
.money_name {
flex: 1;
display: flex;
justify-content: left;
align-items: center;
font-size: 31rpx;
font-weight: bold;
letter-spacing: 2upx;
}
.money_price {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
font-size: 36upx;
font-weight: bold;
color: red;
}
.money_data {
color: #999999;
font-size: 22upx;
width: 90%;
margin: 0 auto;
margin-top: -10upx;
}
.u-line {
width: 90% !important;
border-bottom-width: 3upx !important;
margin: 0 auto !important;
margin-top: 24upx !important;
margin-bottom: 24upx !important;
}
.box_bottom {
width: 90%;
margin: 0 auto;
display: flex;
height: 40upx;
}
.money_use {
flex: 1;
color: #999999;
font-size: 22upx;
display: flex;
justify-content: left;
align-items: center;
}
.lj_use {
width: 160upx;
border: 1upx solid #FF7F00;
color: #FF7F00;
text-align: center;
line-height: 46upx;
border-radius: 42upx;
font-size: 20upx;
}
.help_send {
width: 100%;
}
.content {
margin-top: -380upx;
position: relative;
z-index: 999;
}
.part_one {
width: 95%;
margin: 0 auto;
height: 225rpx;
background: #ffffff;
border-radius: 20upx;
margin-top: 20upx;
}
.pay_tit {
width: 95%;
margin: 0 auto;
/* height: 200upx; */
position: relative;
}
.pay_name {
font-size: 32rpx;
font-weight: bold;
width: 95%;
margin: 0 auto;
letter-spacing: 2upx;
padding-top: 30upx;
}
.pay_set {
color: #333333;
font-size: 24upx;
width: 95%;
margin: 0 auto;
/* margin-top: 20upx; */
}
.part_two {
width: 95%;
margin: 0 auto;
/* height: 235rpx; */
background: #ffffff;
border-radius: 20upx;
margin-top: 20upx;
}
.u-form {
margin-top: -22rpx;
}
.service_box {
display: flex;
justify-content: space-between;
align-items: center;
width: 94%;
margin: 0 auto;
}
.service_address {
flex: 3;
margin-left: 14upx;
}
.service_name {
width: 100%;
margin-top: 30upx;
margin-bottom: 16upx;
font-size: 32rpx;
}
.service_dd {
font-size: 28rpx;
}
.service_dd text {
margin-left: 20upx;
}
.service_icon {
/* flex: 1; */
display: flex;
justify-content: flex-end;
align-items: center;
color: #CCCCCC;
}
.part_three {
width: 95%;
margin: 0 auto;
/* height: 350rpx; */
background: #ffffff;
border-radius: 20upx;
margin-top: 45rpx;
}
.u-form-item__body {
position: relative !important;
}
.u-form-item--left {
position: absolute !important;
top: 30upx;
left: 15rpx;
font-size: 31upx;
font-weight: bold;
letter-spacing: 2upx;
}
.u-form-item--right__content {
margin-right: 20upx !important;
}
.u-form-item {
line-height: 20upx !important;
}
.u-form-item {
padding: 20rpx 0 !important;
}
.u-input__input {
font-size: 44rupx !important;
}
.u-input__input {
font-size: 31rpx !important;
}
.part_four {
width: 95%;
padding: 20rpx 0rpx;
background: #ffffff;
margin: 0 auto;
border-radius: 20upx;
display: flex;
margin-top: 20upx;
}
.service_type {
flex: 1;
/* display: flex; */
/* justify-content: left; */
/* align-items: center; */
margin-left: 40upx;
font-size: 31rpx;
font-weight: bold;
}
.service_you {
/* flex: 1; */
display: flex;
justify-content: flex-end;
align-items: center;
margin-right: 20upx;
color: #CCCCCC;
}
.content_sure {
display: flex;
align-items: center;
margin-bottom: 160rpx;
margin-left: 15px;
margin-top: 10px;
/* #ifndef MP-WEIXIN */
/* margin-bottom: 200px; */
/* #endif */
}
.u-checkbox__label {
font-size: 28rpx !important;
letter-spacing: 2upx;
color: #888888 !important;
}
.tabbar {
width: 100%;
height: 100upx;
background: #ffffff;
position: fixed;
bottom: 0upx;
left: 0upx;
right: 0upx;
display: flex;
/* #ifndef MP-WEIXIN */
position: fixed;
bottom: 0upx;
left: 0upx;
right: 0upx;
/* #endif */
z-index: 99;
}
.tabbar_price {
flex: 1;
display: flex;
justify-content: left;
align-items: center;
font-size: 31rpx;
font-weight: bold;
margin-left: 40upx;
}
.tabbar_price text {
color: #FF3333;
font-size: 36upx;
font-weight: 500;
}
.tabbar_btn {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.but {
background: #FF7F00;
width: 200rpx;
height: 70rpx;
text-align: center;
line-height: 70rpx;
border-radius: 60rpx;
color: white;
font-size: 24rpx;
}
.actclass {
background-color: #FFD9B3;
}
/* 支付弹框 */
.popup_pay {
width: 100%;
}
.pay_btns {
width: 90%;
margin: 20rpx auto 40rpx;
text-align: center;
background: #FF7F00;
height: 80rpx;
border-radius: 16rpx;
color: #ffffff;
line-height: 80rpx;
}
</style>