Files
jjx-wap/pages/goods/detail.vue
T
2026-10-08 18:34:09 +08:00

406 lines
12 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template> <!-- 现货详情 -->
<view class="wrap">
<!-- 吸顶 -->
<u-sticky offset-top="0" customNavHeight="0">
<!-- 顶部 -->
<uiheader></uiheader>
</u-sticky>
<!-- 内容 -->
<view class="layout layout-detail" v-if="product">
<view class="company flex m-top-20" v-if="product.user">
<view class="logo">
<image class="full" v-if="product.user.businessCard && product.user.businessCard.logo"
:src="product.user.businessCard.logo" mode="aspectFit"></image>
</view>
<view class="info flex-1 p-left-20">
<view class="name flex justify-start align-center">
<view class="name-text">
{{ product.user.accountType === 2 ? product.user.company.companyName : product.user.person.personName }}
</view>
<!-- 认证图标 -->
<!-- <view class="name-icon m-left-20">-->
<!-- <image class="full" src="/static/img/idente.png" mode=""></image>-->
<!-- </view>-->
</view>
<view class="zhu" v-if="product.user.accountType === 2">
主营业务:{{
(product.user.company.mainSpotCategory && product.user.company.mainSpotCategory.length > 0) ? product.user.company.mainSpotCategory.join() : ''
}}
</view>
<view class="flex justify-between items-center">
<view class="zhu">
{{ product._add_time_str }} 发布
</view>
<view class="ml-20">
<u-button size="mini" plain type="primary" @click="$jump(`/pages/yellow/detail?id=${product.user._id}`)">
查看主页
</u-button>
</view>
</view>
</view>
</view>
<view class="card-title m-top-30">现货详情</view>
<view class="detail m-top-20">
<view class="detail-title">{{ product.name }}</view>
<view class="detail-text">库存 :{{ parseInt(product.stock) }}吨</view>
<view class="detail-text">供货地:{{
product.address.province.name + "-" + product.address.city.name + "-" + product.address.area.name
}}
</view>
</view>
<view class="card-body">
<view class="card-title m-top-30">报价有效期</view>
<view class="detail-text">截止: {{
dayjs(product.answerEndTime).format('YYYY-MM-DD HH:mm:ss')
}}
</view>
</view>
<view class="card-title m-top-30">产品规格单价</view>
<view class="m-top-20">
<file-type v-for="(item, index) in product.files" :key="index" :item="item"/>
</view>
<view class="card-title m-top-30">产品现场图片</view>
<view class="m-top-20">
<file-type v-for="(item, index) in product.images" :key="index" :item="item"/>
</view>
<view class="card-title m-top-30">已收到的合作申请</view>
<view class="table-box m-top-30">
<!-- <view class="thead">-->
<!-- <view class="tr">-->
<!-- <view class="th">企业</view>-->
<!-- <view class="th">申请人</view>-->
<!-- <view class="th">联系方式</view>-->
<!-- <view class="th">合作留言</view>-->
<!-- <view class="th">申请时间</view>-->
<!-- </view>-->
<!-- </view>-->
<!-- <view class="tbody">-->
<!-- <view class="flex" v-for="(item, index) in product.cooperateList" :key="index">-->
<!-- <view class="w-25p td-n">{{-->
<!-- item.user.accountType === 2 ? item.user.company.companyName.replace(/^(.)(.).*(.)(.)(.)(.)$/, "$1$2***$3$4$5$6") : item.user.person.personName.replace(/^(.)(.).*(.)(.)(.)(.)$/, "$1$2***$3$4$5$6")-->
<!-- }}-->
<!-- </view>-->
<!-- <view class="w-25p td-n">{{ item.name }}</view>-->
<!-- <view class="w-25p td-n">-->
<!-- <text class="u-line-2">{{ item.mobile }}</text>-->
<!-- </view>-->
<!-- <view class="w-25p td-n u-line-2">{{ item.remark }}</view>-->
<!-- <view class="w-25p td-n">{{ item._add_time_str }}</view>-->
<!-- </view>-->
<!-- </view>-->
<view class="flex justify-start items-start flex-col mb-25 border rounded p-20 "
style="border-style: dashed" v-for="(item, index) in product.cooperateList" :key="index">
<p class="mb-10" v-if="item.user.accountType === 2">企业: {{
item.user.accountType === 2 ? item.user.company.companyName.replace(/^(.)(.).*(.)(.)(.)(.)$/, "$1$2***$3$4$5$6") : item.user.person.personName.replace(/^(.)(.).*(.)(.)(.)(.)$/, "$1$2***$3$4$5$6")
}}</p>
<p class="mb-10">申请人: {{ item.name }}</p>
<!-- <p class="mb-10">联系方式: {{ item.mobile }}</p>-->
<p class="mb-10">联系方式: ********</p>
<p class="mb-10">合作留言: {{ item.remark }}</p>
<view class="mb-10 flex justify-start " v-if="product.isMine">
<text>附件:</text>
<file-type v-for="(file, fileIndex) in item.files" class="mx-15" :item="file" :key="fileIndex"/>
</view>
<p class="mb-10">申请时间: {{ item._add_time_str }}</p>
</view>
</view>
</view>
<!-- 底部 -->
<view class="fiexd-bottom flex justify-between align-center bg-white">
<u-icon name="integral" color="#A92924" size="26"></u-icon>
<view class="text red flex-1 m-left-20">{{ product.cooperateList.length }}家已经申请合作</view>
<view class="apply-btn" @click="toCooperate" v-if="userInfo._id !== product.userId">申请合作</view>
</view>
<!-- 弹出窗 -->
</view>
</template>
<script>
import uiheader from '@/components/index/header'
import FileType from "@/components/file-type/file-type.vue";
import dayjs from "dayjs";
export default {
components: {
FileType,
uiheader,
},
data() {
return {
isPopup: false,
product: null,
allChildCate: [],
userInfo: null
};
},
methods: {
dayjs,
getCategoryTreeData(id) {
vk.callFunction({
url: 'client/spot/category/pub/getTree',
title: '请求中...',
data: {},
success: (data) => {
this.allChildCate = []
data.rows.forEach(item => {
item.children.forEach(child => {
this.allChildCate.push(child)
})
})
this.getInfo(id)
}
});
},
applyLink() {
uni.$u.route('/pages/goods/apply', {
id: 0,
});
},
getInfo(_id) {
vk.callFunction({
url: 'client/spot/goods/pub/getDetail',
title: '请求中...',
data: {
_id,
},
success: (data) => {
this.product = data.data
this.product.user.company.mainSpotCategory = []
if (this.product.user.company && this.product.user.company.mainSpotCategoryIds) {
this.allChildCate.forEach(child => {
if (this.product.user.company.mainSpotCategoryIds.includes(child._id)) {
this.product.user.company.mainSpotCategory.push(child.name)
}
})
}
}
});
},
async toCooperate() {
const {userInfo, accountNum} = await vk.callFunction({
url: 'user/kh/getMyUserInfo'
})
if (!userInfo.fadadaConfirm || [-1, 2].includes(userInfo.authStatus)) {
uni.showModal({
title: '提示',
content: '您尚未认证, 是否前往认证?',
success: res => {
if (res.confirm) {
uni.setStorageSync('user_tab', 0)
uni.switchTab({url: '/pages/user/user'})
}
}
})
} else if (vk.pubfn.isNull(userInfo.businessCard)) {
uni.showModal({
title: '提示',
content: '请完善名片信息',
success: res => {
if (res.confirm) {
uni.setStorageSync('user_tab', 1)
uni.switchTab({url: '/pages/user/user'})
}
}
})
} else if (accountNum === 0) {
uni.showModal({
title: '提示',
content: '请先到个人中心添加收款账户',
success: res => {
if (res.confirm) {
uni.setStorageSync('user_tab', 7)
uni.switchTab({url: '/pages/user/user'})
}
}
})
} else {
vk.navigateTo({url: `/pages/goods/apply?id=${this.product._id}&userId=${this.product.userId}`});
}
},
},
onLoad({id}) {
this.userInfo = vk.getStorageSync('uni_id_user_info')
this.getCategoryTreeData(id)
}
}
</script>
<style lang="scss">
page {
padding-bottom: 150rpx;
background: #ffffff;
}
.card-title {
position: relative;
padding-left: 20rpx;
font-size: 28rpx;
font-weight: 600;
line-height: 48rpx;
color: #A92924;
&:before {
position: absolute;
left: 0;
top: 50%;
z-index: 9;
margin-top: -14rpx;
content: '';
width: 6rpx;
height: 28rpx;
background: #A92924;
}
.more {
font-size: 24rpx;
font-weight: normal;
color: #999999;
}
}
.layout-detail {
padding: 20rpx 30rpx;
}
.company {
padding-bottom: 40rpx;
border-bottom: 1px solid #f2f2f2;
.logo {
width: 120rpx;
height: 120rpx;
}
.name-text {
//max-width: 380rpx;
font-size: 30rpx;
font-weight: 600;
line-height: 40rpx;
color: #333333;
}
.name-icon {
width: 80rpx;
height: 32rpx;
}
.zhu {
margin-top: 10rpx;
font-size: 24rpx;
line-height: 32rpx;
color: #999999;
}
}
.detail-title {
font-size: 26rpx;
font-weight: 600;
line-height: 40rpx;
color: #101010;
}
.detail-text {
margin-top: 10rpx;
font-size: 24rpx;
line-height: 40rpx;
color: #999999;
}
.fiexd-bottom {
position: fixed;
left: 0;
bottom: 0;
z-index: 99;
width: 100%;
height: 130rpx;
padding: 0 30rpx;
box-sizing: border-box;
border-top: 1px solid #f2f2f2;
.text {
font-size: 26rpx;
line-height: 40rpx;
}
.apply-btn {
width: 220rpx;
height: 70rpx;
font-size: 26rpx;
line-height: 70rpx;
text-align: center;
color: #ffffff;
background: #A92924;
}
}
.table-box {
font-size: 24rpx;
line-height: 28rpx;
text-align: center;
}
.tr {
display: flex;
justify-content: space-between;
align-items: center;
}
.th {
color: #666 !important;
background: #FFF8F2;
}
.th, .td {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 76rpx;
color: #999;
overflow: hidden;
box-sizing: border-box;
border-left: 1px solid #f2f2f2;
border-right: 1px solid #f2f2f2;
border-bottom: 1px solid #f2f2f2;
}
.td-n {
//height: 70rpx;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid #f2f2f2;
border-bottom: 1px solid #f2f2f2;
background: #ffffff;
}
.td-3 {
width: 33.33%;
}
.popup-box {
padding: 20rpx 20rpx;
}
.popup-title {
padding: 18rpx 0;
border-bottom: 1px solid #A92924;
.title {
font-size: 24rpx;
line-height: 40rpx;
color: #A92924;
}
.close {
width: 80rpx;
height: 40rpx;
font-size: 22rpx;
line-height: 40rpx;
text-align: center;
color: #ffffff;
background: #A92924;
}
}
</style>