deming/pageB/triedDress/index.vue

<template>
	<view class="tried">
		<view class="user-info">
			<view>
				<label for="name">试穿人:</label>
				<input type="text" id="name" placeholder="" v-model="name" />
			</view>
			<view>
				<label for="phone">手机号:</label>
				<input type="text" id="phone" placeholder="" maxlength="11" v-model="phone" />
			</view>
			<view class="area" @click="show=true">
				<label for="address">省市区:</label>
				<input type="text" id="address" placeholder="" v-model="address" disabled />
				<view>
					<image src="/static/image/mine/24.png"></image>
					<text>定位</text>
				</view>
			</view>
			<view>
				<label for="area">详细地址:</label>
				<input type="text" id="area" placeholder="" v-model="area" />
			</view>
			<view>
				<label for="time">预约时间:</label>
				<input type="text" id="time" placeholder="" v-model="time" />
			</view>
		</view>
		<view class="goods-container">
			<view class="store">
				<image :src="store.store_avatar"></image>
				<text>{{ store.store_name }}</text>
			</view>
			<view class="goods">
				<image :src="goodsInfo.goods_image"></image>
				<view class="right">
					<view class="name u-line-2">{{ goodsInfo.goods_name }}</view>
					<u-number-box v-model="number" bg-color="#FFFFFF" :min="1" :input-width="38" :input-height="38" color="#FF780F"></u-number-box>
				</view>
			</view>
		</view>
		<view class="edit-btn" @click="confirmBtn">确认试穿</view>
		<u-select v-model="show" 
				mode="mutil-column-auto" 
				:list="areaList" 
				value-name="area_id" 
				label-name="area_name" 
				child-name="_child" 
				@confirm="setArea">
		</u-select>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
export default {
	data() {
		return {
			show: false,
			areaList: [],
			checked: false, // 是否设为默认地址
			name: '',
			phone: '',
			address: '', // 选择地址
			area: '', // 详细地址
			time: '',
			number: 1, // 商品数量
			area_id: '', // 地区id 省
			city_id: '', // 城市id
			goodsInfo: {},
			store: {},
		}
	},
	mounted() {
		this.getAreaData();
	},
	onLoad(option) {
		this.ordinaryDetails(option.id);
	},
	methods: {
		verification() {
			if(this.$u.test.isEmpty(this.name)) {
				this.$u.toast('姓名不可为空');
				return false;
			}
			if(this.$u.test.isEmpty(this.phone)) {
				this.$u.toast('手机号不可为空');
				return false;
			}
			if(!this.$u.test.mobile(this.phone)) {
				this.$u.toast('请填写正确的新手机号');
				return false;
			}
			if(this.$u.test.isEmpty(this.address)) {
				this.$u.toast('地址不可为空');
				return false;
			}
			if(this.$u.test.isEmpty(this.area)) {
				this.$u.toast('详细地址不可为空');
				return false;
			}
			return true;
		},
		confirmBtn() {
			if(!this.verification) return false;
			this.$u.api.saveGoodsTry({
				member_name: this.name,
				member_mobile: this.phone,
				area_info: this.address,
				address_detail: this.area,
				goods_id: this.goodsInfo.goods_id,
				num: this.number,
				store_id: this.store.store_id,
			}).then((res)=>{
				this.$u.toast(res.message);
				if (res.errCode == 0) {
					// this.$u.route({ type: 'navigateBack' });
				}
			})
		},
		getAreaData() {
			this.$u.api.getArea().then((res)=>{
				if (res.errCode == 0) {
					this.areaList = res.data;
				}
			})
		},
		setArea(area) {
			// console.log(area);
			this.area_id = area[0].value;
			this.city_id = area[1].value;
			let temp = '';
			area.forEach(e => {
				temp += e.label + ' ';
			});
			this.address = temp;
		},
		ordinaryDetails(id) {
			this.$u.api.getGoodsDetails({ id: id }).then((res)=>{
				if (res.errCode == 0) {
					this.goodsInfo = res.data.goods;
					this.store = res.data.store;
				}
			})
		},
	}
};
</script>
<style lang="scss" scoped>
.tried {
	.user-info {
		border-top: 1rpx solid rgba(235,235,235,1);
		> view {
			display: flex;
			align-items: center;
			height: 98rpx;
			padding: 30rpx;
			border-bottom: 2rpx solid rgba(235,235,235,1);
			font-size: 30rpx;
			> label {
				width: 150rpx;
				margin-right: 20rpx;
			}
			> input {
				flex: 1;
				outline: none;
			}
		}
		.area {
			padding: 0 30rpx;
			display: flex;
			> input {
				padding: 30rpx 0;
				flex: 1;
			}
			> view {
				margin-left: 30rpx;
				width: 50rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 22rpx;
				color: rgba(255,120,15,1);
				> image {
					width: 26rpx;
					height: 32rpx;
					margin-bottom: 10rpx;
				}
			}
		}
	}
	.goods-container {
		padding: 30rpx;
		.store {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			> image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 16rpx;
				background-color: antiquewhite;
			}
			> text {
				font-size: 28rpx;
				color: rgba(51,51,51,1);
			}
		}
		.goods {
			display: flex;
			> image {
				width: 180rpx;
				height: 160rpx;
				border-radius: 10rpx;
				margin-right: 30rpx;
				background-color: aquamarine;
			}
			.right {
				flex: 1;
				.name {
					font-size: 30rpx;
					color: rgba(51,51,51,1);
					line-height: 44rpx;
					margin-bottom: 30rpx;
				}
				/deep/ .u-numberbox {
					border: 1rpx solid rgba(217,215,215,1);
					.u-icon-minus, .u-icon-plus {
						width: 38rpx;
						.u-icon {
							.u-icon__icon {
								font-size: 11rpx;
							}
						}
					}
					.u-number-input {
						margin: 0;
						border: 1rpx solid rgba(229,229,229,1) {
							top: 0;
							bottom: 0;
						};
					}
				}
			}
		}
	}
	.edit-btn {
		margin: 122rpx auto 0;
		width: 690rpx;
		height: 98rpx;
		background: rgba(255,119,15,1);
		border-radius: 49rpx;
		font-size: 36rpx;
		color:rgba(255,255,255,1);
		line-height: 98rpx;
		text-align: center;
	}
}
</style>