property/user_ui/work/components/popup/pay.vue

<template>
	<view>
		<!-- 弹窗 -->
		<view class="bgbox" @click="getClose" v-if="type"></view>
		<view v-if="type=='buy'" class="buybox">
			<view class="buytops">
				<view class="detop flexc mb18">
					<image :src="zfbimg" class="buyimg"></image>
					<view class="tit"><text class="f13">¥</text> 249</view>
					<view class="tbtn">原价¥299</view>
				</view>
				<view class="paybox mb12">
					<view class="buylist flexc" @click="getAddressFn">
						<view class="tit over flex1">安徽省合肥市蜀山区幸福大街88号幸福小区…</view>
						<view class="txt">添加</view>
						<image :src="rimg" class="rimg"></image>
					</view>
				</view>
				<view class="paybox mb12">
					<view class="buylist flexc">
						<view class="tit flex1">数量88号幸福小区…</view>
						<view class="flexc inputs">
							<view @click="_calcValue('minus')">-</view>
							<input  type="number" contenteditable="true"	v-model="inputValue" class="numinp" />
							<view @click="_calcValue('plus')">+</view>
						</view>
					</view>
					<picker range-key='text' :value="syqxidx" :range="sexs"   @change='bindDateChange'>
						<view class="buylist flexc">
							<view class="tit">优惠券</view>
							<view class="flex1 txr f12" :class="iszc?'co025':'coa'">{{iszc?'家政服务满200减50':'选择上门时间'}}</view>
							<image :src="rimg" class="rimg"></image>
						</view>
					</picker>
					
					<picker range-key='text' :value="syqxidx" :range="sexs"   @change='bindDateChange'>
						<view class="buylist flexc">
							<view class="tit">预约时间</view>
							<view class="flex1 txr f12" :class="iszc?'co27':'coa'">{{iszc?'是':'选择上门时间'}}</view>
							<image :src="rimg" class="rimg"></image>
						</view>
					</picker>
					<view class="buylist flexc">
						<view class="tit mr18">订单备注</view>
						<uni-easyinput type="textarea" autoHeight v-model="iszc" :inputBorder='false' placeholder="添加留言，让我们的服务更贴心~" />
						<view class="voice flexc">
							<image :src="voiceimg"></image>
							语音输入
						</view>
					</view>
				</view>
				<view class="paybox">
					<view class="tit tits">支付方式</view>
					<view class="buylist flexc mb14">
						<image :src="zfbimg" class="zfbimg"></image>
						<view class="tit flex1">支付宝支付</view>
						<image :src="chose" class="choseimg" v-if="paystu=='zfb'"></image>
						<image :src="nchose" class="choseimg" v-else></image>
					</view>
					<view class="buylist flexc mb8">
						<image :src="wximg" class="zfbimg"></image>
						<view class="tit flex1">微信支付</view>
						<image :src="chose" class="choseimg" v-if="paystu=='wx'"></image>
						<image :src="nchose" class="choseimg" v-else></image>
					</view>
				</view>
			</view>
			<view class="buybtn">立即支付 ¥249</view>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import { getToken } from '@/utils/auth'
	import {uploadmore} from '@/utils/common.js'
	export default{
		components:{},
		props:{
			type: {
				type: String,
				default () {
					return ''
				}
			},
		},
		data(){
			return{
				baseUrl:config.baseUrl,
				chose:require("@/work/static/chose.png"),
				nchose:require("@/work/static/nchose.png"),
				zfbimg:require("@/work/static/zfb.png"),
				wximg:require("@/work/static/wx.png"),
				rimg:require("@/static/images/rimg.png"),
				voiceimg:require("@/work/static/voice.png"),
				step:1,
				min:1,
				paystu:'zfb',
				syqxidx:'',
				iszc:'2323',
				sexs: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}],
			}
		},
		mounted() {
			this.baseUrl=baseUrl
		},
		watch:{
			
			type(val){
				// this.filelist=[];
				// this.shtext='';
				// this.isty='2';
				// this.phofile=[];
			}
		},
		methods:{
			bindDateChange(e){
				
			},
			getAddressFn(){
				this.$emit('getAddressFn')
			},
			_calcValue(type) {
				// if (this.disabled) {
				// 	return;
				// }
				const scale = this._getDecimalScale();
				let value = this.inputValue * scale;
				let step = this.step * scale;
				if (type === "minus") {
					value -= step;
					if (value < (this.min * scale)) {
						return;
					}
					if (value > (this.max * scale)) {
						value = this.max * scale
					}
				}
				if (type === "plus") {
					value += step;
					if (value > (this.max * scale)) {
						return;
					}
					if (value < (this.min * scale)) {
						value = this.min * scale
					}
				}
				this.inputValue = (value / scale).toFixed(String(scale).length - 1);
			},
			_getDecimalScale() {
				let scale = 1;
				// 浮点型
				if (~~this.step !== this.step) {
					scale = Math.pow(10, String(this.step).split(".")[1].length);
				}
				return scale;
			},
			getClose(){
				this.$emit('getClose')
			},
			
		}
	}
</script>

<style lang="scss" scoped>
.buybox /deep/ .uni-easyinput{min-height: 36rpx;}
.buybox /deep/ .uni-easyinput__content-textarea{min-height:36rpx;font-size: 24rpx;margin: 0;}
.buybox /deep/ .uni-easyinput__placeholder-class{font-size: 24rpx;color: #AAAAAA;}
.buybox{position: fixed;left: 0;right: 0;bottom: 0;z-index: 10;min-height: calc(100vh - 476rpx);background: #F3F3F0;border-radius: 20rpx 20rpx 0 0;box-sizing: border-box;max-height: calc(100vh - 200rpx);overflow: hidden;display: flex;flex-direction: column;
	.buytops{padding: 36rpx 18rpx 60rpx;flex: 1;overflow: auto;
		.detop{padding:0 12rpx; 
			.buyimg{width: 90rpx;height: 90rpx;margin-right: 34rpx;flex: 0 0 auto;}
			.tit{font-weight: bold;font-size: 40rpx;color: #0256FD;margin-right: 30rpx;word-break: break-all;}
			.tbtn{background: #FF9E00;font-weight: 500;font-size:24rpx;padding: 6rpx 12rpx;flex: 0 0 auto;color: #FFFFFF;border-radius: 10rpx;min-height: 46rpx;box-sizing: border-box;}
		}
		.paybox{background: #FFFFFF;border-radius: 10rpx;padding: 8rpx 0;}
		.tit{font-weight: bold;font-size: 26rpx;color: #272727;}
		.tits{padding: 28rpx 36rpx 10rpx;}
		.buylist{padding: 16rpx 36rpx;min-height: 80rpx;
			
			.txt{font-weight: 500;font-size: 24rpx;color: #AAAAAA;flex: 0 0 auto;margin-left:16rpx;}
			.rimg{width: 16rpx;height: 24rpx;flex: 0 0 auto;margin-left:16rpx;}
		}
		.inputs{border-radius: 10rpx;border: 2rpx solid #DADADA;flex: 0 1 auto;
			view{font-size: 26rpx;font-weight: bold;color: #272727;width: 46rpx;flex: 0 0 auto;flex: 0 0 auto;display: flex;align-items: center;justify-content: center;}
			input{font-size: 26rpx;font-weight: bold;color: #272727;width: 78rpx;flex: 0 1 auto;border: 2rpx solid #DADADA;border-top: none;border-bottom: none;height: 54rpx;box-sizing: border-box;padding: 0 4rpx;box-sizing: border-box;text-align: center;}
		}
		.zfbimg{width: 58rpx;height: 58rpx;margin-right: 20rpx;flex: 0 0 auto;}
		.choseimg{width: 30rpx;height: 30rpx;margin-left: 30rpx;flex: 0 0 auto;}
	}
	.voice{font-weight: 500;font-size: 24rpx;color: #45CB99;border-left: 2rpx solid #DADADA;padding-left: 12rpx;margin-left: 12rpx;flex: 0 0 auto;
		image{width: 24rpx;height: 24rpx;margin-right: 8rpx;}
	}
	.buybtn{height: 100rpx;display: flex;align-items: center;justify-content: center;font-weight: bold;font-size: 30rpx;color: #FFFFFF;background: #0156FE;}
}
</style>