leave-unused/pages/goods/detail.vue

<template>
	<view class="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}}</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">
			<view class="btn background-orange font30 color-ff radius35 flex" @tap="delEv(goodsDetail.id)">删除</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, //是否记载完成
			}
		},
		onShow() {
			// 查询商品列表
			this.getGoodsDetail();
		},
		onShareAppMessage(res) {
			let shareObj = {
				title:'老农极鲜',
				path: uni.getStorageSync('page-path-options')+'?invite_code='+uni.getStorageSync('invite_code'),
				imageUrl:'/static/img/shear-index.jpg',
			}
			// 返回shareObj
			return shareObj;
		},
		onShareTimeline(res){
			let shareObj = {
				title:'老农极鲜',
				query: '?invite_code='+uni.getStorageSync('invite_code'),
				path: uni.getStorageSync('page-path-options')+'?invite_code='+uni.getStorageSync('invite_code'),
				imageUrl:'/static/img/shear-index.jpg',
			}
			// 返回shareObj
			return shareObj;
		},
		methods: {
			// 查询商品详情
			getGoodsDetail(){
				this.goodsDetail = {
					name:'儿童自行车',
					category_id:3,
					category_name:'儿童玩具',
					original_price:'120.00',
					price:'30.00',
					phone:'18683958573',
					imgSrc:'/static/index-01.png,/static/index-02.png,/static/index-03.png',
					msg:'九成新儿童自行车，现在小孩到了，已经用不到了，有需要的可以联系哟！'
				}
				// 获取图片
				this.goodsImg = this.goodsDetail.imgSrc.split(',');
				
				this.isLoading = true;
			},
			
			// 编辑
			editEv(id){
				uni.navigateTo({
					url:`/pages/release/release?id=3`,
				})
			},
			
			// 删除
			delEv(){
				uni.navigateTo({
					url:`/pages/goods/goods`,
				})
			},
		}
	}
</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>