mplace_source/pages/goods/resource.vue

<template>
	<view>
		<!--标题栏-->
		<bar-title bgColor='bg-white'>
			<block slot="content">商品详情</block>
			<block slot="right">
				<text :class="isFavor ? 'cuIcon-favorfill' : 'cuIcon-favor'" @click="favTap"/>
				<text class="cuIcon-forward"/>
			</block>
		</bar-title>
		
		<!--提示-->
		<!-- <view class="bg-grey text-sm text-center padding-tb-xs text-white">真机实拍部分为真机样张，您购买的机型大致符合图中成色效果</view> -->
		
		<!--轮播图-->
		<view class="zaiui-banner-swiper-box">
			<swiper class="screen-swiper" circular autoplay @change="bannerSwiper">
				<swiper-item v-for="(item,index) in info.pic" :key="index">
					<image :src="item" mode="aspectFill"/>
				</swiper-item>
			</swiper>
			<!--页码-->
			<text v-if="info.pic" class="cu-tag bg-grey round sm zaiui-page">{{bannerCur + 1}} / {{info.pic.length}}</text>
		</view>
		
		<!--限时秒杀-->
		<view class="zaiui-limited-seckill-box">
			<view class="zaiui-time-left">
				<text class="text-price text-xxl">{{info.price ? info.price.value : '0'}}</text>
				<view class="text-xs zaiui-cost-price-num price-4">
					<view class="text-through">原价{{info.price ? info.price.original : 0}}</view>
					<!-- <view>剩余{{info.price.num}}件</view> -->
				</view>
			</view>
			<view class="text-right zaiui-time-right">
				<!-- <view>自营限时秒杀</view>
				<view class="text-xs">距结束剩余10时07分50秒</view> -->
			</view>
		</view>
		
		<!--标题-->
		<view class="bg-white zaiui-view-box zaiui-title-view-box">
			<view class="title-view">
				<!-- <text class="cu-tag bg-red radius sm">自营</text> -->
				<text class="text-black text-lg text-bold">{{info.name}}</text>
			</view>
			<!-- <view class="light bg-red radius margin-top-sm zaiui-title-tip-box">
				<view class="text-cut">
					<text class="margin-right-sm">官方自营</text>
					<text class="text-sm">官方自营正品保障新品体验售后无忧</text>
				</view>
				<text class="cuIcon-right icon"/>
			</view> -->
		</view>
		<!--评论-->
		<!-- <view class="margin-top bg-white zaiui-comment-view-box">
			<view class="cu-bar bg-white">
				<view class="action">
					<text class="text-black text-lg">评价（3699）</text>
				</view>
				<view class="action">
					<view class="text-sm">
						<text class="margin-right-xs">好评率</text>
						<text class="text-black text-lg">97%</text>
						<text class="cuIcon-right icon margin-left-xs"/>
					</view>
				</view>
			</view>
			<view class="zaiui-border-view"/>
			<view class="zaiui-view-box">
				<view class="flex flex-wrap text-sm">
					<view class="basis-1">
						<view class="cu-avatar sm round" style="background-image:url(/static/images/avatar/1.jpg)"/>
					</view>
					<view class="basis-9 text-sm">
						<view>仔仔</view>
						<view class="margin-top-xs">X真的是我觉得性价比最高的机器了，大小合适，全面屏操作流畅，灰色也很漂亮，超喜欢</view>
						<view class="text-gray margin-top-sm">iPhone X 64G深空灰色</view>
					</view>
				</view>
			</view>
			<view class="zaiui-border-view"/>
			<view class="zaiui-view-box">
				<view class="flex flex-wrap text-sm">
					<view class="basis-1">
						<view class="cu-avatar sm round" style="background-image:url(/static/images/avatar/2.jpg)"/>
					</view>
					<view class="basis-9 text-sm">
						<view>仔仔</view>
						<view class="margin-top-xs">X真的是我觉得性价比最高的机器了，大小合适，全面屏操作流畅，灰色也很漂亮，超喜欢</view>
						<view class="text-gray margin-top-sm">iPhone X 64G深空灰色</view>
					</view>
				</view>
			</view>
		</view> -->
		
		<!--图片详情-->
		<view class="margin-top zaiui-goods-details-box" v-html="info.content" style="padding:0 26upx">
			<!-- <image src="/static/images/home/goods/goods-1.png" mode="widthFix"/>
			<image src="/static/images/home/goods/goods-2.png" mode="widthFix"/> -->
		</view>
		
		<!--占位底部距离-->
		<view class="cu-tabbar-height"/>
		
		<!--底部操作-->
		<view class="zaiui-footer-fixed">
			<view class="cu-bar bg-white tabbar border shop" style="padding: 0 32upx;">
				<button class="cu-btn bg-red radius shadow-blur" style="flex: 1;" @tap="selectTap('sell')">{{skuInfo.button}}</button>
			</view>
		</view>
		
		<!--弹出框-->
		<view class="cu-modal bottom-modal zaiui-bottom-modal-box" :class="bottomModal?'show':''">
			<view class="cu-dialog bg-white">
				<!--标题-->
				<view class="text-black text-center margin-tb text-lg zaiui-title-bar">
					<text>{{modalTitle}}</text>
					<text class="cuIcon-close close-icon" @tap="hideModal"></text>
				</view>
				
				<!--内容区域-->
				<view class="zaiui-modal-content">
					
					<view class="zaiui-view-box service" >
						<view class="text-view">
							<text class="cuIcon-title text-red"/>
							<text class="text-cut text-black">价格</text>
						</view>
						<view class="text-sm text-list-view">
							<view class="margin-left text-gray">{{skuInfo.text}}</view>
						</view>
						<block v-if="skuInfo.status != 2">
							<view class="text-view">
								<text class="cuIcon-title text-red"/>
								<text class="text-cut text-black">详情</text>
							</view>
							<view class="text-sm text-list-view" v-for="item in skuInfo.value">
								<view class="margin-left text-gray" v-if="!item.file">{{item.content}}</view>
								<view class="margin-left text-cut text-gray" v-else><a :href="item.file" target="_blank">{{item.file}}</a></view>
							</view>
						</block>
					</view>
					
					<!--公共按钮-->
					<view class="zaiui-footer-fixed">
						<view class="flex flex-direction">
							<button class="cu-btn bg-red lg" @click="payResource">确定</button>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import barTitle from '@/components/zaiui-common/basics/bar-title';
	
	import _tool from '@/static/zaiui/util/tools.js';	//工具函数
	export default {
		components: {
			barTitle,
		},
		data() {
			return {
				bannerCur: 0, bannerList: [], bottomModal: false, modalTitle: '', modalType: 'promotion', selectType: '',
				goodsList: [],
				goodsId: '',
				info: {},
				skuInfo: {},
				selectedSku: '',
				cartInfo: {},
				isFavor: false
			}
		},
		onLoad(options) {
			this.goodsId = options.id;
			this.loadInfo()
			this.loadSku()
		},
		onReady() {
			_tool.setBarColor(true);
			uni.pageScrollTo({
			    scrollTop: 0,
			    duration: 0
			});
		},
		computed: {
			curSkuArr() {
				return this.selectedSku.split('_')
			},
			selectedSkuName() {
				let arr = []
				if(!this.skuInfo.sku || !this.curSkuArr.length) {
					return ''
				}
				this.curSkuArr.forEach((item, index) => {
					let o = this.skuInfo.sku.spec[index] || {};
					arr.push(o.name + ':' + (o ? o.value : []).find(v => v.id == item).value)
				})
				return arr.join(',');
			},
			totalCount() {
				if(!this.cartInfo.length) {
					return 0
				}
				
				return this.cartInfo.reduce((prev, curr) => {
					return prev + curr.num
				}, 0)
			}
		},
		methods: {
			favTap() {
				this.reqByuser({
					url: '?l=collect.up', 
					data: {type: 1, type_id: this.goodsId},
					success: res => {
						if(res.data.status == 1) {
							this.isFavor = true;
						}else {
							this.error = res.data.msg
						}
					}
				})
			},
			loadInfo() {
				this.req({
					url: '?l=resource.view', 
					data: {type: 1, type_id: this.goodsId},
					success: res => {
						if(res.data.status == 1) {
							this.info = res.data.data.info;
						}else {
							this.error = res.data.msg
						}
					}
				})
			},
			loadSku() {
				this.reqByuser({
					url: '?l=resource.submit', 
					data: {type: 1, type_id: this.goodsId},
					success: res => {
						if(res.data.status == 1) {
							// console.log(res.data.data)
							this.skuInfo = res.data.data.info;
						}else {
							this.error = res.data.msg
						}
					}
				})
			},
			bannerSwiper(e) {
				this.bannerCur = e.detail.current;
			},
			serviceTap() {
				this.modalTitle = "服务";
				this.modalType = 'service';
				this.showModal();
			},
			promotionTap() {
				this.modalTitle = "促销优惠";
				this.modalType = 'promotion';
				this.showModal();
			},
			selectTap(type) {
				this.selectType = type;
				this.modalTitle = "立即购买";
				this.modalType = 'select';
				this.showModal();
			},
			showModal() {
				this.bottomModal = true;
			},
			hideModal(e) {
				this.bottomModal = false;
				this.modalTitle = "";
				this.modalType = '';
			},
			myCartTap(){
				uni.navigateTo({
					url: '/pages/goods/my_cart'
				});
			},
			loadCartList() {
				this.reqByuser({
					url: '?l=cart.list', 
					data: {},
					success: res => {
						if(res.data.status == 1) {
							// console.log(res.data.data)
							// this.cartInfo = res.data.data.info;
							this.cartInfo = res.data.data.list
						}else {
							this.error = res.data.msg
						}
					}
				})
			},
			payResource() {
				this.reqByuser({
					url: '?l=resource.pay', 
					// method: 'POST',
					data: {
						type: 1,
						type_id: this.goodsId,
						num: 1,
						account: 'wechat',
						env: 3
					},
					success: res => {
						if(res.data.status == 1) {
							location.href = res.data.data.pay.link;
							this.bottomModal = false;
							this.loadSku()
						}else {
							uni.showToast({
								icon: 'error',
								title: '添加失败'
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	/* #ifdef APP-PLUS */
		@import "../../static/colorui/main.css";
		@import "../../static/colorui/icon.css";
		@import "../../static/zaiui/style/app.scss";
	/* #endif */
	@import "../../static/zaiui/style/goods.scss";
</style>