yixiang/pageB/order-confirm.vue

<template>
	<view class="order-confirm">
		<view class="box address hflex acenter jbetween" @click="show_address = true">
			<image src="./static/address.png" mode="aspectFill"></image>
			<view class="address-text" v-if="JSON.stringify(address) == '{}'">收货地址</view>
			<view class="address-box vflex" v-else>
				<text>{{address.province}}{{address.city}}{{address.area}}{{address.address}}</text>
				<text>{{address.name}} {{address.mobile}}</text>
			</view>
			<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
		</view>
		<view class="box good">
			<view class="title">商品</view>
			<view class="hflex good-detail">
				<image :src="detail.image" mode="aspectFill"></image>
				<view class="vflex center jbetween">
					<view class="name text_hide2">{{detail.name}}</view>
					<view class="spec">{{detail.spec}}</view>
				</view>
				<view class="right vflex aend">
					<view class="price">{{detail.price}}积分</view>
					<view class="num">X{{num}}</view>
				</view>
			</view>
			<view class="cell hflex acenter jbetween">
				<view class="label">优惠券</view>
				<view class="hflex acenter" @click="show_youhui = true">
					<view class="value">{{youhui_active == -1 ? '不使用' : youhui_list[youhui_active].tiaojian}}</view>
					<image src="static/down.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="cell hflex acenter jbetween" @click="show_vip = true">
				<view class="label">会员等级优惠</view>
				<view class="hflex acenter">
					<view class="value">{{vip_active == -1 ? '不使用' : '使用'}}</view>
					<image src="static/down.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="hflex acenter jbetween cell">
				<view class="label">运费</view>
				<view class="value">包邮</view>
			</view>
			<view class="hflex acenter jbetween cell">
				<view class="label">订单总积分</view>
				<view class="value">{{detail.total}}</view>
			</view>
			<view class="hflex acenter jbetween cell">
				<view class="label">优惠积分</view>
				<view class="value">{{detail.youhui}}</view>
			</view>
			<view class="hflex acenter jbetween cell">
				<view class="label">实付积分</view>
				<view class="value">{{total}}</view>
			</view>
			<view class="hflex acenter jbetween cell">
				<view class="label">备注信息</view>
				<u-input v-model="remarks" border="none" inputAlign="right" placeholder="选填"></u-input>
			</view>
		</view>
		<view style="height: 166rpx; "></view>
		<view class="bottom hflex acenter jend">
			<view class="money">总计<span class="money-text">{{total}}积分</span></view>
			<view class="btn" @click="submit">提交订单</view>
		</view>
		<u-popup :show="show_address" @close="toclose" mode="bottom" :round="13">
			<addressBox :list="address_list" @close="toclose" @select="selectAddress"></addressBox>
		</u-popup>
		<u-popup :show="show_youhui" @close="toclose" mode="bottom" :round="13">
			<youhui :index="youhui_active" :list="youhui_list" @close="toclose" @select="selectyouhui"></youhui>
		</u-popup>
		<u-popup :show="show_vip" @close="toclose" mode="bottom" :round="13">
			<youhui :index="vip_active" type="vip" :list="vip_list" @close="toclose" @select="selectvip"></youhui>
		</u-popup>
		<u-popup :show="show_submit" @close="toclose" mode="center" :round="10">
			<view class="popu1 vflex acenter">
				<image src="static/success.png" mode="aspectFill"></image>
				<view class="success">提交成功</view>
				<view class="success-text">请前往添加客服微信</view>
				<view class="hflex acenter btns">
					<view class="btn1" @click="tosubmit">稍后添加</view>
					<view class="btn2" @click="show_wx = true">添加客服</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="show_wx" @close="tosubmit" mode="center" :round="10">
			<kefu-wx :wxcode="wxcode" @submit="tosubmit"></kefu-wx>
		</u-popup>
	</view>
</template>

<script>
	import addressBox from './components/addressbox.vue'
	import youhui from './components/youhui.vue'
	import kefuWx from './components/kefu-wx.vue'
	import $api from '@/static/js/api.js'
	export default {
		components: {
			addressBox,
			youhui,
			kefuWx
		},
		data() {
			return {
				address_list: [],
				address: {},
				show_address: false,
				detail: {},
				youhui_list: [],
				show_youhui: false,
				show_vip: false,
				youhui_active: -1,
				vip_list: [],
				vip_active: -1,
				remarks: '',
				show_submit: false,
				show_wx: false,
				wxcode: 'https://dummyimage.com/750x750/e3e3e3/fff',
				num: 0,
				total: 0,
			}
		},
		onLoad(options) {
			this.detail = JSON.parse(options.good)
			console.log(this.detail)
			this.num = options.num
			console.log(this.num);
			this.getlist()
			// this.getdata()
		},
		methods: {
			
			tosubmit() {
				this.toclose()
				uni.redirectTo({
					url: '/pageB/order-detail'
				})
			},
			submit() {
				var _this = this
				if(JSON.stringify(this.address) == '{}') {
					$api.info('请先选择收货地址')
					return
				}
				uni.showModal({
					title: '',
					content: '是否提交订单',
					success: function (res) {
						if (res.confirm) {
							_this.show_submit = true
						}
					}
				});
			},
			selectyouhui(e) {
				this.youhui_active = e
				this.toclose()
			}, 
			selectvip(e) {
				this.vip_active = e
				this.toclose()
			}, 
			getdata() {
				
			},
			selectAddress(e) {
				this.address = this.address_list[e]
				this.toclose()
			},
			toclose() {
				this.show_address = false
				this.show_vip = false
				this.show_youhui = false
				this.show_submit = false
				this.show_wx = false
			},
			getlist() {
				var _this = this
				$api.req({
					url: 'address',
					method: 'GET',
					data: {
						is_page: 0
					}
				}, function(res) {
					if(res.code == 10000) {
						_this.address_list = res.data
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.order-confirm::v-deep {
		background: #F4F4F4;
		padding: 20rpx 24rpx;
		box-sizing: border-box;
		min-height: 100vh;
		
		.popu1 {
			width: 510rpx;
			padding: 46rpx 0;
			.top {
				width: 100%;
				.top-title {
					font-size: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					color: #000000;
					text-align: center;
					padding-left: 100rpx;
				}
				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
			.center {
				image {
					width: 310rpx;
					height: 310rpx;
				}
				text {
					font-size: 22rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, .42);
				}
			}
			image {
				width: 78rpx;
				height: 78rpx;
				margin: 12rpx 36rpx;
			}
			.success {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
			.success-text {
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, .6);
				padding: 8rpx 0 42rpx;
			}
			.btns {
				.btn1 {
					width: 204rpx;
					height: 72rpx;
					background: #E7E7E7;
					border-radius: 40rpx;
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 72rpx;
					text-align: center;
				}
				.btn2 {
					width: 204rpx;
					height: 72rpx;
					background: #00B0B0;
					border-radius: 40rpx;
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 72rpx;
					text-align: center;
					margin: 0 0 0 26rpx;
				}
			}
		}
		.bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			height: 166rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 12rpx 28rpx 68rpx;
			.money {
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #222222;
				.money-text {
					font-size: 40rpx;
					font-family: SFPro, SFPro;
					font-weight: 500;
					color: #FF4954;
					padding: 0 20rpx 0 12rpx;
				}
			}
			.btn {
				width: 232rpx;
				height: 86rpx;
				background: #00B0B0;
				border-radius: 44rpx;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 86rpx;
				text-align: center;
			}
		}
		.box {
			background: #FFFFFF;
			border-radius: 16rpx;
			margin: 0 0 20rpx;
			padding: 28rpx 20rpx 0;
			.cell {
				padding: 0 0 36rpx;
				.label {
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #222222;
				}
				.value {
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
				image {
					width: 28rpx;
					height: 28rpx;
					margin: 0 0 0 16rpx;
				}
			}
		}
		.good {
			padding: 24rpx 20rpx;
			box-sizing: border-box;
			.title {
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #222222;
				padding: 0 0 26rpx;
			}
			.good-detail {
				padding: 0 0 40rpx;
				.right {
					.price {
						font-size: 28rpx;
						font-family: SFPro, SFPro;
						font-weight: 500;
						color: #FF4954;
					}
					.num {
						font-size: 24rpx;
						font-family: SFPro, SFPro;
						font-weight: 400;
						color: #999999;
						padding: 18rpx 0 0;
					}
				}
				image {
					width: 160rpx;
					height: 160rpx;
					margin: 0 20rpx 0 0;
				}
				.center {
					width: 330rpx;
					.name {
						font-size: 28rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #222222;
					}
					.spec {
						max-width: max-content;
						background: #F3F3F3;
						border-radius: 6rpx;
						font-size: 20rpx;
						font-family: SFPro, SFPro;
						font-weight: 400;
						color: #222222;
						padding: 6rpx 18rpx;
						margin: 16rpx 0 0;
					}
				}
			}
		}
		.address {
			padding: 28rpx;
			width: 100%;
			box-sizing: border-box;
			image {
				width: 32rpx;
				height: 32rpx;
				margin: 0 16rpx 0 0;
			}
			.address-box {
				width: 550rpx;
				text:first-child {
					font-size: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					color: #222222;
				}
				text:last-child {
					font-size: 24rpx;
					font-family: JDZhengHT, JDZhengHT;
					font-weight: 300;
					color: #666666;
					padding: 10rpx 0 0 ;
				}
			}
			.address-text {
				width: 550rpx;
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}
	}
</style>