236 lines
6.4 KiB
Vue
236 lines
6.4 KiB
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> |