rhwy-sj/pages/index/detail.vue

<template>
	<view class="content">
		<u-navbar title="瑞和物业" bgColor="rgba(0,0,0,0)" :autoBack="true" leftIconColor="#fff" :titleStyle="{color: '#fff'}"></u-navbar>
		<u-swiper :list="pageData.images" :autoplay="false" height="772rpx" @change="changeSwiper">
			<view slot="indicator" class="indicator swiper_indicator hflex acenter jcenter">
				<view class="text">图片{{current}}/{{img_total}}</view>
			</view>
		</u-swiper>
		<view class="details">
			<view class="box">
				<view class="hflex acenter jbetween">
					<view class="price" v-if="pageData.pay_type == 1">￥{{pageData.user_price}}<span class="old_price" v-if="pageData.original_price">￥{{pageData.original_price}}</span></view>
					<!-- <image src="@/static/images/share.png" mode="aspectFit" style="width: 28rpx;height: 28rpx;"></image> -->
				</view>
				<view class="name text_hide2">{{pageData.name}}</view>
				<view class="info" v-if="identity == 4">
					<view class="info_text" v-if="item.pay_type == 1">先付款后服务</view>
					<view class="info_text" v-else>先预约后付款</view>
				</view>
				<view class="text" v-if="pageData.status == 'up' && identity == 2">当前库存：{{pageData.community_stocks?pageData.community_stocks:'0'}}</view>
				<view class="hflex acenter" v-if="identity == 4 || identity == 3 || identity == 5">
					<view class="text">总销量 {{pageData.actual_sale}}</view>
					<view class="text" style="margin-left: 84rpx;" v-if="identity == 3">库存：{{ pageData.stock?pageData.stock:'0' }}</view>
				</view>
				<view class="attr hflex acenter jbetween" @click="openSpec(1)">
					<view class="spec_text text_hide"><span style="padding-right: 38rpx;">规格</span>{{pageData.sku[spec_active].name}}</view>
					<u-icon name="arrow-right" color="#272636" size="12"></u-icon>
				</view>
			</view>
			<view class="box" v-if="identity == 4">
				<view class="title">服务内容</view>
				<u-parse :content="pageData.service_content"></u-parse>
			</view>	
			<view class="box hflex acenter jcenter" style="padding: 40rpx;" v-if="identity == 2">
				<view class="vflex salce acenter jcenter" style="border-right: 1px solid #F2F2F2;">
					<view class="text">{{pageData.sale + pageData.actual_sale}}</view>
					<view class="text2">总销量</view>
				</view>
				<view class="vflex salce acenter jcenter">
					<view class="text">{{pageData.community_stock}}</view>
					<view class="text2">本社区销量</view>
				</view>
			</view>
			<view class="box" v-if="identity == 5">
				<view class="title">课程介绍</view>
				<u-parse :content="pageData.service_content"></u-parse>
			</view>
			<view class="box hflex" @click="openCommunity" >
				<view class="text" style="padding-right: 24rpx;">服务社区</view>
				<view class="text">{{pageData.community_info ? pageData.community_info[community_active].name : ''}}</view>
			</view>
			<view class="box hflex acenter jcenter fwrap" style="padding: 40rpx;" v-if="identity == 2">
				<block v-for="(item,index) in pageData.params" :key="index">
					<view class="vflex acenter jcenter params">
						<view class="text">{{item.value}}</view>
						<view class="text2">{{item.name}}</view>
					</view>
				</block>
			</view>
			<view class="box hflex" v-if="identity == 5">
				<image :src="imgUrl + pageData.coach.avatar" mode="aspectFill" class="avatar" v-if="pageData.coach.avatar.indexOf('://') == -1"></image>
				<image :src="pageData.coach.avatar" mode="aspectFill" class="avatar" v-else></image>
				<view class="vflex">
					<view class="title">{{pageData.coach.name}}</view>
					<u-parse :content="pageData.coach.introduction"></u-parse>
				</view>
			</view>
			<view class="box hflex" v-if="identity == 5">
				<view class="text" style="padding-right: 24rpx;">门店地址</view>
				<view class="text">{{pageData.service.address}}</view>
			</view>
			<view class="box">
				<view class="title">商品详情</view>
				<u-parse :content="pageData.content"></u-parse>
			</view>
			
		</view>
		<view class="bottom hflex jend">
			<view class="btn2" @click="editStatus">{{pageData.status == 'up' ? '下架商品' : '上架商品'}}</view>
			<view class="btn1" v-if="identity !== 4 && identity !== 5" @click="openSpec(2)">修改库存</view>
		</view>
		<u-popup :show="spec_show" @close="close" :closeable="true">
			<view class="popu">
				<view class="popu_good hflex acenter">
					<image :src="pageData.image" mode="aspectFill" class="img"></image>
					<view class="vflex">
						<view class="hflex acenter">
							<view class="price">￥{{pageData.sku[spec_active].price}}</view>
							<view class="old_price" v-if="pageData.sku[spec_active].original_price">￥{{pageData.sku[spec_active].original_price}}</view>
						</view>
						<view class="text" v-if="identity !== 4 && identity !== 5">库存：{{pageData.sku[spec_active].stock}}</view>
					</view>
				</view>
				<view class="list">
					<view class="title">规格</view>
					<block v-for="(item,index) in pageData.sku" :key="index">
						<view class="item hflex acenter jbetween" :class="spec_active == index ? 'item_active' : ''" @click="changeSpec(index)">
							<view class="text">{{item.name}}</view>
						</view>
					</block>
				</view>
				<view class="popu_bottom hflex jend" v-if="show_btn">
					<view class="btn" @click="next(1)">下一步</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="community_show" @close="close" :closeable="true">
			<view class="popu">
				<view class="top hflex acenter jcenter">
					<view class="title">服务社区</view>
				</view>
				<view class="list">
					<block v-for="(item,index) in pageData.community_info" :key="index">
						<view class="item hflex acenter jbetween" :class="community_active == index ? 'item_active' : ''" @click="changeCommunity(index)">
							<view class="text">{{item.name}}</view>
							<view class="text2" v-if="item.sale">销量： ￥{{item.sale}}</view>
						</view>
					</block>
				</view>
				<view class="popu_bottom hflex jend" v-if="show_btn">
					<view class="btn" @click="next(2)">下一步</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="stock_show" @close="close" :closeable="true">
			<view class="popu">
				<view class="top hflex acenter jcenter">
					<view class="title">修改库存</view>
				</view>
				<view class="form vflex acenter jcenter">
					<view class="hflex acenter" style="margin-bottom: 50rpx;">
						<view class="label">当前库存</view>
						<u-input v-model="selectAttr.stock" disabled border="none"></u-input>
					</view>
					<view class="hflex acenter">
						<view class="label">补充库存</view>
						<u-input v-model="value" placeholder="请输入库存"></u-input>
					</view>
				</view>
				<view class="popu_btn" @click="editStock">修改库存</view>
			</view>
		</u-popup>
	</view>
</template>
<!-- 商品详情 -->
<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return{
				community: '',
				pageData: {},
				current: 1,
				img_total: 1,
				spec_show: false,
				stock_show: false,
				spec_active: 0,
				community_active: 0,
				show_btn: false,
				selectAttr: {},
				value: 0,
				identity: 0,
				id: 0,
				imgUrl: $api.config.imgUrl,
				community_show: false
			}
		},
		onLoad(options) {
			that = this
			that.identity = uni.getStorageSync('identity')
			that.community = uni.getStorageSync('community')
			that.id = Number(options.id)
		},
		onShow() {
			that.getData()
		},
		methods: {
			getData() {
				let url = ''
				if(that.identity == 4) {
					url = '/api/merchant_service_goods/get_goods_info'
				} else if(that.identity == 2) {
					url = '/api/merchant.community.goods/get_info'
				} else if(that.identity == 3) {
					url = '/api/merchant.appliance.goods/get_info'
				} else if(that.identity == 5) {
					url = '/api/merchant.sport.goods/get_info'
				} else {
					return
				}
				$api.req({
					url: url,
					data: {
						id: that.id
					}
				}, function(res) {
					if(res.code == 1) {
						that.pageData = res.data
						that.img_total = res.data.images.length
						if(that.identity == 3) {
							$api.req({
								url: '/api/merchant.appliance.goods/get_community',
								data: {
									id: that.pageData.id
								}
							}, function(res) {
								if(res.code == 1) {
									that.$set(that.pageData,'community_info',res.data)
									// that.pageData.community_info = res.data
								}
							})
						}
					}
				})
			},
			// 滑动轮播图
			changeSwiper(e) {
				that.current = e.current + 1
			},
			// 关闭弹窗
			close() {
				that.spec_show = false
				that.stock_show = false
				that.community_show = false
			},
			// 打开规格弹窗
			openSpec(index) {
				if(that.identity == 2) {
					that.spec_show = true
					if(index == 2) {
						that.show_btn = true
					} else {
						that.show_btn = false
					}
				} else if(that.identity == 3) {
					// that.community_show = true
					that.openCommunity()
					if(index == 2) {
						that.show_btn = true
					} else {
						that.show_btn = false
					}
				} else if(that.identity == 5) {
					that.spec_show = true
					if(index == 2) {
						that.show_btn = true
					} else {
						that.show_btn = false
					}
				}
				
			},
			// 打开社区弹窗
			openCommunity() {
				that.community_show = true
				
				 
			},
			changeSpec(index) {
				that.spec_active = index
			},
			changeCommunity(index) {
				that.community_active = index
			},
			next(index) {
				if(index == 1) {
					that.spec_show = false
					that.stock_show = true
					that.selectAttr = that.pageData.sku[that.spec_active]
				} else {
					that.spec_show = true
					that.community_show = false
				}
				
			},
			editStatus() {
				let url = ''
				if(that.identity == 4) {
					url = '/api/merchant_service_goods/update_status'
				} else if(that.identity == 2) {
					url = '/api/merchant.community.goods/up_down'
				} else if(that.identity == 3) {
					url = '/api/merchant.appliance.goods/up_down'
				} else if(that.identity == 5) {
					url = '/api/merchant.sport.goods/up_down'
				} else {
					return
				}
				$api.req({
					url: url,
					data: {
						id: that.id,
						status: that.pageData.status == 'up' ? 'down' : 'up'
					}
				}, function(res) {
					if(res.code == 1) {
						$api.info(res.msg)
						that.getData()
					}
				})
			},
			editStock() {
				let url = ''
				if(that.identity == 2) {
					url = '/api/merchant.community.goods/edit_stock'
				} else if(that.identity == 3) {
					url = '/api/merchant.appliance.goods/edit_stock'
				}
				$api.req({
					url: url,
					data: {
						goods_id: that.pageData.id,
						sku_id: that.pageData.sku[that.spec_active].id,
						stock: that.value
					}
				}, function(res) {
					if(res.code == 1) {
						$api.info(res.msg)
						that.close()
						that.getData()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		background: #F1F2F4;
		.u-swiper {
			position: absolute !important;
			top: 0;
			left: 0;
			width: 100%;
		}
		.u-swiper__indicator {
			bottom: 100rpx !important;
			.swiper_indicator {
				// width: 116rpx;
				height: 52rpx;
				background: #000;
				opacity: 0.3;
				border-radius: 26rpx;
				padding: 0 24rpx;
				.text {
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 28rpx;
					text-align: center;
				}
			}
		}
		.details {
			z-index: 9;
			position: relative;
			width: 100%;
			box-sizing: border-box;
			padding: 690rpx 24rpx 186rpx;
			
			.boxs {
				position: absolute;
				left: 24rpx;
				top: -82rpx;
			}
			.box {
				width: 702rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				margin: 0 0 20rpx;
				box-sizing: border-box;
				padding: 24rpx 28rpx;
				.price {
					font-size: 36rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FF2828;
					line-height: 34rpx;
					.old_price {
						font-size: 24rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #999999;
						line-height: 34rpx;
						text-decoration: line-through;
					}
				}
				.name {
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 44rpx;
					margin: 28rpx 0 14rpx;
				}
				.info {
					padding: 8rpx 0;
					.info_text {
						width: 152rpx;
						font-size: 20rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #999999;
						line-height: 28rpx;
						border-radius: 16rpx;
						border: 2rpx solid #999999;
						padding: 2rpx 0;
						text-align: center;
						box-sizing: border-box;
					}
				}
				.text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 34rpx;
				}
				.attr {
					width: 100%;
					height: 118rpx;
					background: #F5F5F5;
					border-radius: 20rpx;
					box-sizing: border-box;
					padding: 38rpx 20rpx;
					margin: 20rpx 0 0;
					.spec_text {
						width: 80%;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 40rpx;
					}
				}
				.salce {
					width: 50%;
					.text {
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #666666;
						line-height: 40rpx;
						padding-bottom: 22rpx;
					}
					.text2 {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 34rpx;
					}
				}
				.params {
					min-width: 49%;
					flex:1;
					height: 120rpx;
					border: none;
					margin-top: 50rpx;
					.text {
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #666666;
						line-height: 40rpx;
						padding-bottom: 22rpx;
					}
					.text2 {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 34rpx;
					}
				}
				.params:nth-child(2n+2) {
					border-left: 1px solid #F2F2F2;
				}
				.params:nth-child(-n+2) {
					margin-top: 0;
				}
				.title {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 40rpx;
					padding-bottom: 28rpx;
				}
				.avatar {
					width: 140rpx;
					height: 140rpx;
					margin-right: 48rpx;
					border-radius: 50%;
				}
			}
		}
		.bottom {
			z-index: 99;
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 166rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 16rpx 24rpx;
			.btn1 {
				// width: 200rpx;
				height: 68rpx;
				background: #EE8529;
				border-radius: 34rpx;
				padding: 0 52rpx;
				font-size: 20rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 68rpx;
				text-align: center;
				margin-left: 20rpx;
			}
			.btn2 {
				height: 68rpx;
				background: #FFFFFF;
				border-radius: 34rpx;
				border: 2rpx solid #EE8529;
				padding: 0 26rpx;
				font-size: 20rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #EE8529;
				line-height: 68rpx;
			}
		}
		.popu {
			width: 100%;
			background: #FFFFFF;
			.top {
				padding: 24rpx 0;
				border-bottom: 1px solid #FFF5ED;
			}
			.form {
				padding: 86rpx 0 142rpx;
				.label {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 40rpx;
					padding-right: 26rpx;
				}
				.u-input {
					max-width: 400rpx;
					background: #FFF !important;
					border-radius: 20rpx !important;
					padding: 16rpx 28rpx !important;
					border: 1px solid #CCCCCC !important;
				}
			}
			.popu_btn {
				width: 590rpx;
				height: 72rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				border: 2rpx solid #EE8529;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #EE8529;
				line-height: 72rpx;
				text-align: center;
				margin: 0 auto 166rpx;
			}
			.popu_good {
				padding: 82rpx 26rpx 0;
				.img {
					width: 120rpx;
					height: 120rpx;
					margin-right: 26rpx;
				}
				.price {
					font-size: 36rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FF2828;
					line-height: 34rpx;
				}
				.old_price {
					text-decoration: line-through;
					padding-left: 26rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #999999;
					line-height: 34rpx;
				}
				.text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 34rpx;
					padding-top: 16rpx;
				}
			}
			.list {
				padding: 108rpx 28rpx 130rpx;
				width: 100%;
				.title {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 40rpx;
				}
				.item {
					margin: 30rpx 0 0 18rpx;
					width: 592rpx;
					// height: 60rpx;
					background: #F5F5F5;
					border-radius: 20rpx;
					box-sizing: border-box;
					padding: 14rpx 26rpx;
					.text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 34rpx;
					}
					.text2 {
						font-size: 24rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #999999;
						line-height: 34rpx;
					}
				}
				.item_active {
					border: 1px solid #EE8529;
					background: #fff;
				}
			}
			.popu_bottom {
				width: 100%;
				height: 98rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				padding: 16rpx 24rpx;
				margin-bottom: 68rpx;
				border-top: 1px solid #eee;
				.btn {
					width: 200rpx;
					height: 68rpx;
					background: #EE8529;
					border-radius: 34rpx;
					font-size: 20rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 68rpx;			
					text-align: center;
				}
			}
		}
	}
</style>