shop_uniapp/bundle_b/pages/mall_news/detail.vue

<template>
	<view class="main">
		<view class="top">
			<view>
				<view class="goods-name bold lg">{{item.title}}</view>
				<view class="goods-name m-t-10">{{item.desc}}</view>
				<view v-if="item.files != ''">
					<view v-if="item.type == 0">
						<scroll-view style="white-space: nowrap;" :scroll-x="true">
							<view class="flex">
								<u-image @click="preview(i)" class="thumb" v-for="(v, i) in item.files" :key="i" width="240rpx" height="240rpx" :border-radius="10" :src="v.src"></u-image>
							</view>
						</scroll-view>
					</view>
					<view v-if="item.type == 1">
						<video :src="item.files[0].src" class="thumb-video"></video>
					</view>
				</view>
				<view class="shop m-t-20" v-if="item.shop">
					<view class="bold">推荐商品</view>
					<router-link :to="{path: '/pages/goods_details/goods_details', query: {id: item.shop_id}}" class="flex">
						<view class="flex">
							<u-image @click="preview(v.src, i)" class="thumb" width="200rpx" height="200rpx" :border-radius="10" :src="item.shop.image"></u-image>
							<view>
								<view>{{item.shop.name}}</view>
								<view class="flex">
									<price-format :price="item.shop.min_price" :color="colorConfig.primary" :subscript-size="26" :first-size="38" :second-size="26"/>
									<subsidy-txt class="m-l-10" :txt="item.subsidy_txt"></subsidy-txt>
								</view>
							</view>
						</view>
					</router-link>
				</view>
				
				<view class="m-t-40" v-if="item.content">
					<view class="bold text-center m-b-20">
						<u-divider color="#000">
							<view class="bold">快讯详情</view>
						</u-divider>
					</view>
					<view>
						<u-parse :html="item.content" :lazy-load="true" :show-with-animation="true"></u-parse>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMallNewsDetail
	} from '@/api/store';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				id: 0,
				item: [],
				top: [],
				type: '',
				price_type: 0
			};
		},
		onLoad() {
			this.id = this.$Route.query.id;
			this.mall_type = this.$Route.query.mall_type;
			this.getDetail()
		},
		methods: {
			preview(i) {
				let f = this.item.files.map((v) => {
					return v.src
				})
				
				uni.previewImage({
					current: i,
					urls: f
				});
			},
			
			async getDetail() {
				const {code, data, msg} = await getMallNewsDetail({id: this.id, mall_type: this.mall_type});
				if (code == 1) {
					this.item = data
				}
			}
		}
	};
</script>
<style lang="scss">
	page {
		background-color: #fff;
		height: 100%;
	}
	
	.main {
		.top > view, 
		.list > view {
			background-color: #fff;
			padding: 20rpx;
			margin-bottom: 20rpx;
		}
		
		.thumb {
			margin-right: 20rpx;
			margin-top: 20rpx;
		}
		
		.thumb-video {
			width: 100%;
			margin-top: 20rpx;
		}
	}
</style>