leave-unused/pages/goods/detail.vue

<template>
	<view :class="type==''?'':'pad-x120'" v-if="isLoading">
		<!-- 头部 -->
		<status-nav :ifReturn="true" navBarTitle="商品详情"></status-nav>
		<!-- 提示 -->
		<view class="notice-tips color-orange font26 border-box pad-all20 flex"><image src="/static/icon-notice.png" mode="widthFix"></image>交易前请务必核实对方的身份及信息!</view>
		<!-- 商品详情 -->
		<view class="goods-detail">
			<view class="goods-info background-white pad-zy20 border-box">
				<view class="item font28 flex">
					<view class="title color-8c">商品名称</view>
					<view class="msg">{{goodsDetail.name}}</view>
				</view>
				<view class="item font28 flex">
					<view class="title color-8c">商品分类</view>
					<view class="msg">{{goodsDetail.category_name}}</view>
				</view>
				<view class="item font28 flex">
					<view class="title color-8c">商品原价</view>
					<view class="msg color-8c" style="text-decoration: line-through;">￥{{goodsDetail.original_price!==''?goodsDetail.original_price:'未填写'}}</view>
				</view>
				<view class="item font28 flex">
					<view class="title color-8c">商品售价</view>
					<view class="msg">￥{{goodsDetail.price}}</view>
				</view>
				<view class="item font28 flex">
					<view class="title color-8c">联系方式</view>
					<view class="msg" v-if="showPhone" @tap="this.$toolAll.tools.countCustomer(goodsDetail.phone)">{{goodsDetail.phone}}</view>
					<view class="msg" v-else>
						<view class="see-phone color-ff font24 background-blue radius20 flex" @tap="showPhone=true">查看联系方式</view>
					</view>
				</view>
			</view>
			<view class="goods-content background-white pad-all20 mar-s20 font28 border-box">
				<view class="goods-describe color-8c">{{goodsDetail.msg}}</view>
				<view class="goods-img">
					<image :src="item" mode="widthFix" v-for="(item,index) in goodsImg" :key="index"></image>
				</view>
			</view>
		</view>
		<view class="detail-btns background-white border-box flex" v-if="type=='release'">
			<view class="btn font30 color-ff radius35 flex" :class="goodsDetail.status==0?'background-orange':'background-8c'" @tap="changeStateEv(goodsDetail.id)">
				{{goodsDetail.status==0?'下架':'展示'}}
			</view>
			<view class="btn background-blue font30 color-ff radius35 flex" @tap="editEv(goodsDetail.id)">编辑</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				statusHeight:uni.getSystemInfoSync().statusBarHeight, //状态栏高度
				goodsDetail:{}, //商品详情
				goodsImg:[], //商品图片
				showPhone:false, //显示电话号码
				isLoading:false, //是否加载完成
				type:'', //是否自己发布
				goods_id: 0,// 商品id
			}
		},
		onLoad(op) {
			if(op.type=='release'){
				this.type = op.type;
			}
			if(op.id){
				// 获取商品id
				this.goods_id = op.id;
			}
		},
		onShow() {
			// 查询商品详情
			this.getGoodsDetail(this.goods_id);
		},
		onShareAppMessage(res) {
			let shareObj = {
				title:this.goodsDetail.name,
				path: this.type=='release'?uni.getStorageSync('page-path-options').substring(0,uni.getStorageSync('page-path-options').indexOf("&")):uni.getStorageSync('page-path-options'),
				imageUrl:this.goodsDetail.cover,
			}
			// 返回shareObj
			return shareObj;
		},
		onShareTimeline(res){
			let shareObj = {
				title:this.goodsDetail.name,
				path: this.type=='release'?uni.getStorageSync('page-path-options').substring(0,uni.getStorageSync('page-path-options').indexOf("&")):uni.getStorageSync('page-path-options'),
				imageUrl:this.goodsDetail.cover,
			}
			// 返回shareObj
			return shareObj;
		},
		methods: {
			// 查询商品详情
			getGoodsDetail(id){
				uni.showLoading({
					title:'加载中'
				})
				this.$requst.get('/api/v1/goods/detail',{id:id}).then(res=>{
					if(res.code == 0){
						console.log(res,'闲置商品详情');
						this.goodsDetail = {
							id:res.data.id,
							cover:res.data.cover,
							name:res.data.title,
							category_name:res.data.category_name,
							original_price:res.data.original_price,
							price:res.data.price,
							phone:res.data.phone,
							images:res.data.images,
							msg:res.data.content,
							status:res.data.status
						};
						// 获取图片
						this.goodsImg = this.goodsDetail.images;
					}
					uni.hideLoading();
					this.isLoading = true;
				})
			},
			
			// 编辑
			editEv(id){
				uni.navigateTo({
					url:`/pages/idle/release?id=${id}`,
				})
			},
			
			// 更改显示状态
			changeStateEv(id){
				if(this.flag){
					this.flag =false;
					this.$requst.post('/api/v1/goods/set-status',{id:id,status:this.goodsDetail.status}).then(res=>{
						if(res.code == 0){
							console.log(res,'改变状态');
							if(this.goodsDetail.status==0){
								this.goodsDetail.status = 1;
								this.$toolAll.tools.showToast('已下架');
							}else{
								this.goodsDetail.status = 0;
								this.$toolAll.tools.showToast('已展示');
							}
						}
					})
					setTimeout(()=>{
						this.flag = true;
					},500)
				}
			},
			
			// 删除
			delEv(id){
				this.$requst.post('/api/v1/goods/del',{id:id}).then(res=>{
					if(res.code == 0){
						this.$toolAll.tools.showToast('删除成功');
						setTimeout(()=>{
							uni.navigateTo({
								url:`/pages/goods/goods`,
							})
						},500)
					}
				})
			},
		}
	}
</script>
<style scoped>
	.notice-tips{
		align-items: center;
		background-color: rgba(255,133,0,.2);
		height: 70rpx;
		line-height: 36rpx;
	}
	.notice-tips>image{
		width: 40rpx;
		height: 40rpx;
		margin-right: 8rpx;
		animation: opacity_name 0.8s linear alternate infinite;
	}
	@keyframes opacity_name {
		from {
			opacity: .1;
			transform: scale(.8);
		}
		to {
			opacity: 1;
			transform: scale(1.2);
		}
	}
	.goods-info .item{
		align-items: center;
		height: 90rpx;
		border-bottom: 2rpx solid #f4f5f6;
	}
	.goods-info .item:last-child{
		border: 0;
	}
	.goods-info .title{
		width: 200rpx;
	}
	.goods-info .msg{
		width: calc(100% - 200rpx);
	}
	.see-phone{
		justify-content: center;
		align-items: center;
		width: 90px;
		height: 54rpx;
	}
	.goods-describe{
		line-height: 1.5;
	}
	.goods-img>image{
		width: 100%;
		margin-top: 20rpx;
		border-radius: 10rpx;
	}
	
	/* 删除按钮 */
	.detail-btns{
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 100rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
	}
	.detail-btns .btn{
		justify-content: center;
		align-items: center;
		width: 40%;
		height: 66rpx;
	}
</style>