intelligentGroup/pageTwo/product/detail.vue

<template>
	<view class="content">
		<view v-if="content">
			<view class="info">
				<view class="name">
					<image :src="content.userinfo.avatar" class="mr-10" mode="aspectFill"></image>
					<view class="bold size16 mr-10">{{content.userinfo.name}}</view>
					<text class="post">{{content.userinfo.posname}}</text>
				</view>
				<view class="call" @click="handleCall(user.authlist,content.userinfo.phone)">
					联系方式
				</view>
			</view>
			<!--  -->
			<view class="newsDetail box">
				<view class="title">
					{{content.title}}
				</view>
				<!-- <view v-if="type!=9">
					<text class="redcolor size14 mr-10 bold">会员价:￥{{content.vipprice}}</text>
					<text class="c999 size12">市场价:￥{{content.price}}</text>
				</view> -->
				<view class="c999 size12" v-if="type!=9">
					地址：{{content.province}}{{content.city}}{{content.area}}{{content.address}}
				</view>
				<view class="c999 size12">
					浏览量：{{content.browsecnt}}次
				</view>
				<view class="image" v-if="type!=9" v-for="(ite,ind) in content.pics">
					<image :src="ite.url" mode="widthFix" @click="previewImage(ind)"></image>
				</view>
				<view class="con mt-15">
					{{content.desc}}
				</view>

			</view>
			<!-- 联系人弹框 -->
			<secratary></secratary>
		</view>
		<view class="nolist" v-else>
			<image src="@/static/none.png"></image>
			<text>暂无数据</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				content: null,
				type: 3,
				id: "",
				token:""
			}
		},
		onLoad(options) {
			this.id = options.id
			this.type = options.type
			this.token = uni.getStorageSync('token')
			this.handleDetail(options.id, options.type)
		},
		computed: {
			...mapState(["user"]),
			userInfo() {
				return this.user.name ? this.user : uni.getStorageSync('UserInfo')
			}
		},
		onShareAppMessage() {
			let that = this
			return {
				title: that.content.title,
				path: '/pageTwo/product/detail?id=' + that.id + '&type=' + that.type,
				imageUrl: '',
				success: function(res) {
					console.log("分享到朋友成功")
				},
				fail: function(res) {
					console.log("分享到朋友失败")
				},
			}
		},
		onShareTimeline() {
			let that = this
			return {
				title: that.content.title,
				query: 'id=' + that.id + '&type=' + that.type,
				imageUrl: "",
				success: function(res) {
					console.log("分享到朋友圈成功")
				},
				fail: function(res) {
					console.log("分享到朋友圈失败")
				},
			}
		},
		methods: {
			previewImage(ind) {
				let that = this
				console.log("pics", that.content.pics.map(item => item.url))
				uni.previewImage({
					urls: that.content.pics.map(item => item.url),
					current: ind
				}).catch((e) => {
					console.log(e) //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				});
			},
			// 详情
			handleDetail(id, type) {
				let that = this
				that.$model.getProductDetail({
					id: id,
					type: type
				}).then(res => {
					if (res.code == 0) {
						that.content = res.data
					} else {
						that.$tools.msg(res.message);
					}

				});
			},
			handleCall(authlist, num) {
				let that = this
				console.log("authlist", authlist, that.userInfo)
				if (!that.token) {
					that.$tools.msg("注册/登录后查看更多")
					return
				}
				if (authlist.length) {
					let arr = authlist.findIndex(v => v.code == 'phone:show')
					if (arr == -1) {
						that.$store.commit("changeSecratary", true);
					} else {
						uni.makePhoneCall({
							phoneNumber: num, //仅为示例
							success: () => {
								console.log("拨打电话成功")
								that.$model.getSetClickNumber({
									userId: that.userInfo.id ? that.userInfo.id : 0,
									clickPhone: num,
								}).then(res => {});
							}
						})
					}
				} else {
					that.$store.commit("changeSecratary", true);
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.newsDetail {
		width: calc(100% - 30px);

		.image {
			width: 100%;
			height: auto;
			text-align: center;
			margin-top: 5px;

			image {
				width: 100%;
				height: auto;
			}
		}


	}

	.info {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 5px 10px;
		margin-bottom: 15px;
		border-radius: 10px;

		.name {
			display: flex;
			align-items: center;

			.post {
				color: #fff;
				background: $orange;
				padding: 2px 10px;
				border-radius: 5px;
				font-size: 12px;
			}
		}

		.call {
			height: 35px;
			color: #fff;
			display: flex;
			background: $green;
			padding: 0px 10px;
			border-radius: 5px;
			align-items: center;
		}

		image {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			border: 1px solid #f7f7f7;
		}
	}
</style>