front/pages/source/info.vue

<template>
	<view v-if="fetch && fetch.info" @click="Dever.close()">
		<use-tabbar :tabbar="false"></use-tabbar>
		<view class="swiper-area w-full">
			<swiper class="h-full pos-r" indicator-dots circular="true" duration="400">
				<swiper-item v-for="(item, index) in fetch.info.pic" :key="index">
					<view class="wh-full" @click="viewPic(item, index)">
						<image :src="item" class="wh-full loaded" lazy-load="true" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>



		<!-- 商品数据区 -->
		<view class="goods-area use-area margin-lr-sm user-bg-main padding">

			<view v-if="fetch.info.price > 0">
				<view class="padding-right dflex" v-if="fetch.info.promotion_tag && fetch.info.promotion_tag.name">
					<view class="use-tag pos-top bg-base">
						{{ fetch.info.promotion_tag.name }}
					</view>
				</view>

				<view class="dflex-b">
					<view class="dflex-c" style="display: flex; align-items: center;">
						<text class="price fs-big">{{ fetch.info.price_text}}</text>
						<text class="m-price" v-if="fetch.info.m_price > 0">{{ fetch.info.m_price_text }}</text>

						<u-popover v-if="fetch.info.promotion_text" position="top" width="200px">
							<view style="margin-left:5px;display: inline-block;">
								<u-icon name="question-circle"></u-icon>
							</view>

							<template v-slot:content>
								<view style="color: white;">
									<u-parse :content="fetch.info.promotion_text"></u-parse>
								</view>

							</template>
						</u-popover>
					</view>
					<view class="dflex ft-dark" v-if="fetch.info.show_sell == 1">
						<view class="padding-right-xs">销量：</view>
						<text>{{ fetch.info.num_sell }}</text>
					</view>
				</view>
				<view class="margin-top padding-right dflex">
					<text class="title fs-30 fwbd clamp-2">{{ fetch.info.name }}</text>
				</view>

				<view class="margin-top-sm padding-right dflex-b"
					v-if="fetch.info.rebate && fetch.info.rebate.buy && fetch.info.rebate.buy.desc">
					<view class="dflex-c">
						<view class="dflex padding-16 border-radius-sm bg-drak rebate-line">
							<text class="icon icon-jifen">🎁</text>
							<text class="fs-xs label">{{ fetch.info.rebate.buy.name }}：</text>
							<text class="fs-xs score value">{{ fetch.info.rebate.buy.desc }}</text>
						</view>
					</view>
				</view>

				<view class="padding-right dflex-b"
					v-if="fetch.info.rebate && fetch.info.rebate.share && fetch.info.rebate.share.desc">
					<view class="dflex-c">
						<view class="dflex padding-16 border-radius-sm bg-drak rebate-line">
							<text class="icon icon-yongjin">💰</text>
							<text class="fs-xs label">{{ fetch.info.rebate.share.name }}：</text>
							<text class="fs-xs score value">{{ fetch.info.rebate.share.desc }}</text>
						</view>
					</view>
					<!--
					<view class="dflex">
						<view class="border-radius-lg bg-drak dflex-c use-hover">
							<view class="dflex-c wh-full">
								<view class="iconfont iconfenxiang"></view>
							</view>
						</view>
					</view>-->
				</view>

			</view>

			<view v-else>
				<view class="padding-right dflex">
					<text class="title fs-30 fwbd clamp-2">{{ fetch.info.name }}</text>
				</view>
				<view class="margin-top dflex-b">
					<text v-if="fetch.info.info" class="price-desc">{{ fetch.info.info }}</text>
					<text v-else class="price free-tag">免费</text>
					<text class="m-price" v-if="fetch.info.m_price > 0">{{ fetch.info.m_price_text }}</text>
				</view>


			</view>
		</view>

		<view class="show-area use-area padding-tb-sm"
			v-if="fetch && ((fetch.sku && fetch.spec && fetch.spec.length > 0) || (fetch.info.price > 0 && fetch.coupon && fetch.coupon.length > 0) || (fetch.help && fetch.help.length > 0))">
			<view class="show-sku-area">
				<view class="dflex-b padding-tb-16 use-hover" @click="open('sku')"
					v-if="fetch && fetch.sku && fetch.spec && fetch.spec.length > 0">
					<view class="dflex">
						<view class="ft-dark">已选</view>
						<text>{{fetch.info.sku_name}}</text>
					</view>
					<view class="dflex-c">
						<view class="iconfont iconjiantou-01 fs-sm ft-dark"></view>
					</view>
				</view>
				<u-popup :show="show.sku" @close="close('sku')" round="25">
					<view class="bg-main padding border-radius-top30 safe-area-inset-bottom"
						style="min-height: 66vh; max-height: 80vh;" v-if="fetch && fetch.sku">
						<!-- 商品信息 -->
						<view class="dflex margin-top-xs">
							<image class="" style="width: 48px; height: 48px;"
								:src="fetch.sku.pic ? fetch.sku.pic : fetch.info.pic[0]"
								@click="viewSkuPic" />
							<view class="margin-left-sm">
								<view class="dflex" style="align-items: flex-end;">
									<view class="price fs-big">{{ fetch.sku.price_text}}</view>
									<text class="m-price"
										v-if="fetch.sku.m_price > 0">{{ fetch.sku.m_price_text }}</text>
								</view>
								<view class="use-tags margin-0 margin-top-sm">
									<view
										v-if="fetch.sku.rebate && fetch.sku.rebate.buy && fetch.sku.rebate.buy.desc">
										返{{fetch.sku.rebate.buy.desc}}</view>
									<view
										v-if="fetch.sku.rebate && fetch.sku.rebate.share && fetch.sku.rebate.share.desc">
										赚{{fetch.sku.rebate.share.desc}}</view>
									<!--
									<view v-if="fetch.sku.unum > 0">赠{{ fetch.sku.unum}}次</view>-->
								</view>
							</view>
						</view>

						<!-- 滚动属性选择区域 -->
						<scroll-view scroll-y="true" class="overflow-auto" style="max-height: 50vh;">
							<view v-for="(item, index) in fetch.spec" :key="index">
								<view class="margin-tb-sm">
									<text class="fwbd">{{item.name}} ({{item.value.length}})</text>
								</view>
								<view class="dflex dflex-wrap-w">
									<view class="dflex margin-right-sm margin-bottom-sm use-hover"
										v-for="(v, k) in item.value" :key="k"
										:class="v.selected ? 'tag-base' : 'tag-gray'" @click.stop="sku(index, k)">
										<view>{{v.value}}</view>
									</view>
								</view>
							</view>
						</scroll-view>

						<!-- 购买数量 -->
						<view class="padding-tb-sm margin-top dflex-b pos-r">
							<view class="dflex pos-r" style="top: 4px;">
								<view>购买数量</view>
								<text v-if="fetch.sku.stock.num > 0" class="margin-left-sm ft-dark fs-xs"
									style="width: auto">库存{{fetch.sku.stock.num}}件</text>
							</view>
							<u-number-box :integer="true" :step="1" :min="1"
								:max="fetch.sku.stock.num >= 0 ? fetch.sku.stock.num : 9999" v-model="num"
								@change="operNumber"></u-number-box>
						</view>

						<!-- 底部按钮占位 -->
						<view class="w-full" style="height: 76px;"></view>

						<!-- 操作按钮 -->
						<view class="pos-a pos-b-full padding safe-area-inset-bottom-plus dflex-c">
							<view class="flex1 btn-container dflex-b border-radius-big margin-top">
								<!--
							<view class="dflex-c padding-tb-sm flex1 bg-warn use-hover">
								<text>加入购物车</text>
							</view>
							-->
								<view class="dflex-c padding-tb-sm flex1 bg-base use-hover"
									v-if="fetch.sku.stock.num > 0 || fetch.sku.stock.num < 0"
									@click="buy(fetch.sku)">
									<text>立即购买</text>
								</view>
								<view class="dflex-c padding-tb-sm flex1 bg-base use-hover bg-disabled" v-else>已售磐
								</view>
							</view>
						</view>
					</view>
				</u-popup>
			</view>

			<view class="show-coupon-area" v-if="fetch.info.price > 0 && fetch.coupon && fetch.coupon.length > 0">
				<view class="dflex-b padding-tb-16 use-hover" @click="open('coupon')">
					<view class="dflex">
						<view class="ft-dark">优惠</view>
						<text>领取优惠券</text>
					</view>
					<view class="dflex-c">
						<view class="bg-base padding-lr-xs border-radius-lg fs-xxs margin-right-xs">去领取</view>
						<view class="iconfont iconjiantou-01 fs-sm ft-dark"></view>
					</view>
				</view>

				<u-popup :show="show.coupon" @close="close('coupon')" round="25">
					<!-- 优惠券区 -->
					<scroll-view class="popup-area coupon-area border-radius-top30 padding bg-drak"
						v-if="fetch && fetch.coupon && fetch.coupon.length > 0" scroll-y="true">
						<view class="coupon-item bg-main pos-r fs-xs" v-for="(item, index) in fetch.coupon"
							:key="index">
							<view class="content pos-r padding dflex-b">
								<view class="">
									<view class="margin-bottom-xs fs">{{ item.name }}</view>
									<view class="ft-dark">{{item.date_name}}</view>
								</view>
								<view class="tar">
									<view class="margin-bottom-xs price" v-if="item.type == 4">{{ item.value }}个
									</view>
									<view class="margin-bottom-xs price" v-if="item.type == 3">{{ item.value }}折
									</view>
									<view class="margin-bottom-xs price" v-else>{{ item.value }}</view>
									<view class="ft-dark">{{ item.title }}</view>
								</view>

								<view class="circle l"></view>
								<view class="circle r"></view>
							</view>
							<view class="dflex-b">
								<text class="ft-dark padding-lr">{{ item.type_name }}</text>
								<text class="submit dflex-c border-radius-big padding-lr animated-all bg-base"
									@click="getCoupon(item.id)">立即领取</text>
							</view>
						</view>
					</scroll-view>
					<view v-else class="popup-area coupon-area border-radius-top30 padding bg-drak dflex-c">暂无优惠券</view>
				</u-popup>
			</view>

			<!-- 服务 -->
			<view class="show-help-area" v-if="fetch.help && fetch.help.length > 0">
				<view class="dflex-b padding-tb-16 use-hover" v-for="(item, index) in fetch.help" :key="index"
					@click="open('help', index)">
					<view class="dflex">
						<view class="ft-dark">{{item.name}}</view>
						<view v-for="(v, k) in item.list" :key="k">
							<text class="dot margin-right-xs" v-if="k > 0"></text>
							<text class="margin-right-xs">{{v.name}}</text>
						</view>
					</view>
					<view class="dflex-c">
						<view class="iconfont iconjiantou-01 fs-sm ft-dark"></view>
					</view>
				</view>
				<u-popup :show="show.help" @close="close('help')" round="25">
					<view v-for="(item, index) in fetch.help" :key="index" v-if="show.help_content[index]"
						class="bg-main border-radius-top30 safe-area-inset-bottom">

						<view class="tac fwbd w-full padding-lr padding-tb-xl fs-34">{{item.name}}</view>
						<scroll-view scroll-y="true" class="popup-area padding-lr-lg padding-bottom">
							<view v-for="(v, k) in item.list" :key="k" class="margin-right-sm dflex dflex-s">
								<view class="iconfont iconyiwancheng- fwbd fs ft-base margin-right-xs line-height-0"
									style="display: none;"></view>
								<view>
									<view class="fs-30 fwbd line-height-0">{{ v.name }}</view>
									<view class="margin-top margin-bottom-sm ft-dark-3">{{ v.info }}</view>
								</view>
							</view>
						</scroll-view>
						<view class="padding w-full margin-top dflex-c border-radius-big" @click="close('help')">
							<view class="border-radius-big" style="width: 60vw;">
								<view class="padding-tb-sm dflex-c bg-base">确认</view>
							</view>
						</view>
					</view>
				</u-popup>
			</view>
		</view>

		<!-- 评价区 -->
		<view class="use-area evaluate-area margin-lr-sm" v-if="fetch.review && fetch.review.length > 0">
			<view class="dflex-b use-hover">
				<view class="dflex fwbd">评价（{{ fetch.review_total }})</view>
				<view class="dflex-c">
					<text class="margin-right-xs ft-dark"
						@click="Dever.location('source/review?id=' + fetch.info.id)">查看全部</text>
					<text class="iconfont iconjiantou-01 fs-sm ft-dark"></text>
				</view>
			</view>

			<view v-for="(item, index) in fetch.review" :key="index" class="margin-top border-line">
				<view class="dflex-b">
					<view class="dflex">
						<image class="headimg border-radius-c" :src="item.user.avatar" mode="aspectFill"
							@click="Dever.pic.preview([item.user.avatar], item.user.avatar)"></image>
						<view class="right-area flex1 padding-left-sm">
							<view class="margin-right">
								<view class="fwbd">{{ item.user.name }}</view>
								<view class="use-rate dflex line-height-1">
									<view v-for="i in 5" :key="i" class="pos-r margin-left-sm"
										:style="{ marginLeft: '0px' }">
										<text class="iconfont"
											:class="i <= item.rate ? 'iconshoucang- ft-base fs' : 'iconshoucang-01 ft-dark fs'"></text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<text class="time ft-dark fs-xs">{{ item.cdate_str }}</text>
				</view>

				<view class="content-area margin-top-xs">
					<view class="ft-main margin-top-xs margin-bottom-sm clamp-2">
						{{ item.content || '此用户没有填写评价' }}
					</view>

					<view class="dflex dflex-wrap-w" v-if="item.pic && item.pic.length > 0">
						<view v-for="(img, i) in item.pic" :key="i" class="dflex-c image-area border-radius">
							<image :src="img" mode="aspectFill" style="height: 166px;"
								@click="Dever.pic.preview([item.pic], img)" />
						</view>
					</view>

					<view class="padding-bottom-sm">
						<text class="fs-xxs ft-dark">{{ item.style }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="detail-area use-area margin-lr-sm bg-main" v-if="fetch.tab && fetch.tab.length > 0">
			<view class="flex-center">
				<u-tabs :list="fetch.tab" @click="setTab"></u-tabs>
			</view>
			<view class="detail-area" v-if="tab.id > 0">
				<view class="list-item" v-for="(item, index) in fetch.list" :key="index">
					<view v-if="item.name" @click="goContentInfo(item)">
						<view class="item-header">
							<text class="name">{{ item.name }}</text>
							<view class="icons">
								<u-icon v-if="item.look == 2" name="lock" size="18" color="#ff9800"></u-icon>
								<u-icon v-if="item.look >= 3" name="integral" size="18" color="#4caf50"></u-icon>
							</view>
						</view>
						<text class="desc">{{ item.info }}</text>
					</view>
					<view class="detail-area" v-else>
						<u-parse :content="item.info"></u-parse>
					</view>
				</view>
				<view class="view-more" @click="goContent(tab.id)" v-if="tab.more == 1">
					查看更多 >
				</view>
			</view>

			<view class="detail-area" v-else>
				<u-parse :content="fetch.info.content"></u-parse>
			</view>

		</view>


		<!-- 详情区 -->
		<!--
		<view class="detail-area use-area margin-lr-sm bg-main" v-if="fetch.info.content">
			<view class="d-header padding dflex-c"><text>图文详情</text></view>
			<u-parse :content="fetch.info.content"></u-parse>
		</view>-->

		<!-- 操作区 -->
		<view id="view-more" class="oper-area pos-f dflex-b w-full padding-lr-sm" style="justify-content: left;">
			<!--
			<view class="btn-area dflex dflex-flow-c"
				@click="Dever.location('source/home?id=' + fetch.info.channel_id)">
				<text class="iconfont iconshouye-1"></text>
				<text>首页</text>
			</view>-->

			<!--
		<button class="btn no-border dflex" open-type="contact">
			<view class="btn-area dflex-c dflex-flow-c">
				<u-icon
				  name="kefu-ermai"
				  size="25"
				></u-icon>
				<text>客服</text>
			</view>
		</button>
		-->

			<view class="btn-area dflex dflex-flow-c" :class="{ active: fetch.collect }" @click="setCollect">
				<u-icon v-if="fetch.collect" name="star-fill" size="25" color="#ff6a6c"></u-icon>
				<u-icon v-else name="star" size="25"></u-icon>
				<text>收藏</text>
			</view>

			<view class="btn-area dflex dflex-flow-c" @click="shareOpen">
				<u-icon name="share" size="25"></u-icon>
				<text>分享</text>
			</view>

			<!--
			<view class="btn-area dflex dflex-flow-c" v-if="fetch.content"
				@click="Dever.location('source/content?id=' + fetch.info.id)">
				<u-icon name="list-dot" size="25"></u-icon>
				<text>{{fetch.info.content_name}}</text>
			</view>

			<view class="btn-area dflex dflex-flow-c" v-if="fetch.tool"
				@click="Dever.location('source/tool?id=' + fetch.info.id)">
				<u-icon name="grid" size="25"></u-icon>
				<text>{{fetch.info.func_name}}</text>
			</view>-->

			<view class="flex1 btn-container dflex-b border-radius-big"
				v-if="fetch.info.show_submit == 1 && fetch.sku && fetch.spec && fetch.spec.length >= 0">
				<!--<view class="tac padding-tb-sm flex1 bg-warn" v-if="fetch.info.stock > 0 || fetch.info.stock < 0" @click="tocart()">加入购物车
			</view>
			-->
				<view class="tac padding-tb-sm flex1 bg-base"
					v-if="fetch.info.stock.num > 0 || fetch.info.stock.num < 0" @click="pay()">立即下单
				</view>
				<view class="tac padding-tb-sm flex1 bg-disabled" v-else>已售磐</view>
			</view>
			<view class="flex1 btn-container dflex-b border-radius-big" v-else>
				<view class="tac padding-tb-sm flex1 bg-disabled">载入中</view>
			</view>
		</view>

		<use-totop ref="usetop"></use-totop>
		<u-modal ref="posterModal" :show="poster.show" :title="poster.title" :closeOnClickOverlay="true"
			@close="closePoster" @confirm="closePoster">
			<view class="slot-content">
				<u-poster @success="success" :palette="poster.value" :width="poster.width"></u-poster>
				<view class="flex1 poster-btn-container dflex-b">
					<view class="btn btn-warn" @click="save()">保存相册</view>
					<button open-type="share" class="btn btn-base" @click="share()">分享好友</button>
				</view>
			</view>
		</u-modal>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				num: 1,
				fetch: {
					collect: false,
				},
				// 弹窗展示
				show: {
					sku: false,
					coupon: false,
					help: false,
					help_content: [],
				},
				poster: {
					show: false,
					title: '分享好友',
					width: 255,
					value: {},
					file: '',
				},
				tab: {
					id: -1,
					name: '详情'
				},
			};
		},
		watch: {
			'poster.show'(val) {
				if (val) {
					this.$nextTick(() => {
						// 获取 modal 内容宽度
						const query = uni.createSelectorQuery().in(this);
						query.select('.slot-content').boundingClientRect(rect => {
							if (rect) {
								this.poster.width = rect.width; // 设置给 u-poster
							}
						}).exec();
					});
				}
			}
		},
		onPageScroll(e) {
			this.$refs.usetop.change(e.scrollTop);
		},
		onLoad(options) {
			let title = '资源详情';
			if (options) {
				this.id = options.id;
				if (options.title) {
					title = options.title;
				}
			}
			uni.setNavigationBarTitle({
				title: title
			})
			//#ifdef MP-WEIXIN
			wx.hideShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
			//#endif
			this.load();
		},
		onPullDownRefresh() {
			this.load();
		},
		// 小程序分享
		onShareAppMessage(res) {
			if (res.from === 'button' && this.fetch && this.fetch.path) {
				return {
					title: this.fetch.info.name,
					path: this.fetch.path,
					imageUrl: this.fetch.info.pic[0],
				}
			}
			return null
		},
		methods: {
			load() {
				this.loadData();
				this.loadSpec();
				this.loadCoupon();
			},
			loadData() {
				this.DeverApi.get(this, 'source.info', {
					id: this.id
				}, res => {
					uni.setNavigationBarTitle({
						title: res.info.name
					});
					if (res.tab.length > 0) {
						this.setTab(res.tab[0]);
					}
				}, err => {
					this.Dever.goHome()
				});
			},
			loadSpec() {
				this.DeverApi.get(this, 'source.spec', {
					id: this.id
				});
				this.loadSku('', 0);
			},
			loadSku(spec, sku_id) {
				this.DeverApi.get(this, 'source.sku', {
					id: this.id,
					spec: spec,
					sku_id: sku_id,
				});
			},
			loadContent(channel_id) {
				this.DeverApi.get(this, 'source.contentList', {
					id: this.id,
					cid: channel_id,
				});
			},
			loadCoupon() {
				this.DeverApi.get(this, 'coupon.getList', {
					source_id: this.id
				});
			},
			getCoupon(id) {
				this.DeverApi.post('coupon.receive', {
					id: id
				}, r => {
					this.Dever.success(r, () => {
						this.close('coupon');
					});
				});
			},
			setTab(e) {
				this.tab = e
				if (this.tab.id > 0) {
					this.loadContent(this.tab.id);
				}
				uni.pageScrollTo({
					selector: '#view-more',
					duration: 300
				})
			},
			goContent(channel_id) {
				this.Dever.location('source/content?id=' + this.fetch.info.id + '&cid=' + channel_id)
			},
			pay() {
				if (this.fetch && this.fetch.sku && this.fetch.spec && this.fetch.spec.length > 0) {
					this.open('sku');
				} else {
					this.buy(this.fetch.sku);
				}
			},
			open(key, index) {
				this.show[key] = true;
				if (index >= 0) {
					this.show[key + '_content'] = []
					this.show[key + '_content'][index] = true;
				}
			},
			close(key) {
				this.show[key] = false;
				if (key == 'help') {
					this.show[key + '_content'] = []
				}
			},
			operNumber(e) {
				this.num = e.value;
			},
			sku(spec, value) {
				console.info(spec)
				var key = this.fetch.sku.key.split(',');
				this.fetch.spec[spec].value.forEach((v, k) => {
					if (value == k) {
						v.selected = true;
						key[spec] = v.id;
					} else {
						v.selected = false;
					}
				})
				key = key.join(',');
				this.loadSku(key, this.fetch.sku.id);
			},
			viewPic(pic, index) {
				this.Dever.pic.preview(this.fetch.info.pic, pic);
			},
			viewSkuPic() {
				var value = this.fetch.info.pic[0]
				if (this.fetch.sku.pic) {
					value = this.fetch.sku.pic;
					this.Dever.pic.preview([value], value);
				} else {
					this.Dever.pic.preview([value], value);
				}
			},
			buy(sku) {
				if (!this.DeverApi.getToken()) {
					this.Dever.confirm('您需要登录才能继续操作', () => {
						this.Dever.goLogin();
					})
					return;
				}
				var detail = [{
					id: this.fetch.info.id,
					sku_id: sku.id,
					num: this.num
				}]
				this.Dever.data('detail', {
					type: 'source',
					type_id: this.fetch.info.cate_id,
					detail: detail,
					jump: 'order/info',
				});
				this.Dever.location('order/create');
			},
			setCollect() {
				this.fetch.collect = !this.fetch.collect;
				if (this.fetch.collect) {
					var url = 'collect.up';
				} else {
					var url = 'collect.cancel';
				}
				this.DeverApi.post(url, {
					type: 1,
					type_id: this.id
				});
			},
			
			save() {
				if (this.Dever.env == 2) {
					const link = document.createElement('a')
					link.href = this.file
					link.download = 'share.png'
					link.click()
					uni.showToast({
						title: '已保存到相册',
						icon: 'none'
					})
				} else if (this.Dever.env == 3) {
					uni.showToast({
						title: '请长按保存到相册',
						icon: 'none'
					})
				} else {
					uni.saveImageToPhotosAlbum({
						filePath: this.file,
						success: () => {
							uni.showToast({
								title: '已保存到相册',
								icon: 'success'
							})
						},
						fail: (err) => {
							console.error('保存失败：', err)
							// 可能是没有权限
							uni.showModal({
								title: '提示',
								content: '请开启相册权限后重试',
								showCancel: false
							})
						}
					})
				}
			},

			goContentInfo(item) {
				if (item.look == 2) {
					// 购买规格
					this.Dever.confirm(item.buy, () => {
						this.buyContent(item)
					});
				} else if (item.look >= 3) {
					this.Dever.confirm(item.score, () => {
						this.DeverApi.post('source.contentBuy', {
							id: item.id
						}, r => {
							this.Dever.success('付费成功', () => {
								this.Dever.location('source/content_info?id=' + item.id +
									'&title=' + item.name)
							})
						});
					});
				} else {
					this.Dever.location('source/content_info?id=' + item.id + '&title=' + item.name)
				}
			},

			buyContent(item) {
				if (!this.DeverApi.getToken()) {
					this.Dever.confirm('您需要登录才能继续操作', () => {
						this.Dever.goLogin();
					})
					return;
				}
				var detail = [{
					id: item.info_id,
					sku_id: item.sku_id,
					num: 1
				}]
				this.Dever.data('detail', {
					type: 'source',
					type_id: item.cate_id,
					detail: detail,
					jump: 'source/content_info?id=' + item.id + '&title=' + item.name,
				});
				this.Dever.location('order/create');
			},
			success(file) {
				this.poster.file = file;
			},
			closePoster() {
				this.poster.show = false;
			},
			share() {
				//this.closePoster();
			},
			shareOpen() {
				this.DeverApi.get(this, 'user.code', {
					type: this.id
				}, res => {
					this.poster.show = true;
					this.poster.value = {
						"width": "375px",
						"height": "500px",
						"background": "#ff6a6c",
						"background": "#fff",
						"views": [{
								"type": "rect",
								"style": {
									"width": "356px",
									"height": "473px",
									"top": "11px",
									"left": "8px",
									"background": "#fff",
									"borderRadius": "10px",
									"zindex": 1,
									"color": "#fff"
								}
							},
							{
								"type": "text",
								"text": this.fetch.info.price ? this.fetch.info.price_text : '',
								"style": {
									"width": "180px",
									"height": "31px",
									"top": "359px",
									"left": "25px",
									"background": "transparent",
									"borderColor": "transparent",
									"zindex": 10,
									"color": "#ff6a6c",
									"fontSize": "28px",
									"fontFamily": "Arial"
								}
							},
							{
								"type": "text",
								"text": this.fetch.info.price ? '' : this.fetch.info.info,
								"style": {
									"width": "252px",
									"height": "20px",
									"top": "437px",
									"left": "26px",
									"background": "transparent",
									"borderColor": "transparent",
									"zindex": 11,
									"color": "#333",
									"fontSize": "16px",
									"lineHeight": 1.16,
									"maxLines": "2",
									"fontFamily": "Arial"
								}
							},
							{
								"type": "image",
								"url": this.fetch.info.pic[0],
								"style": {
									"width": "321px",
									"height": "321px",
									"top": "30px",
									"left": "25px",
									"borderColor": "transparent",
									"borderRadius": "10px",
									"zindex": 10,
									"mode": "scaleToFill"
								}
							},
							{
								"type": "text",
								"text": this.fetch.info.name,
								"style": {
									"width": "252px",
									"height": "59px",
									"top": "404px",
									"left": "24px",
									"background": "transparent",
									"borderColor": "transparent",
									"zindex": 11,
									"color": "#000000",
									"fontSize": "18px",
									"lineHeight": 1.5,
									"maxLines": 2,
									"fontFamily": "Arial"
								}
							}
						]
					}

					if (this.Dever.env == 5) {
						this.poster.value.views.push({
							"type": "image",
							"url": res.qrcode,
							"style": {
								"width": "58px",
								"height": "58px",
								"top": "404px",
								"left": "286px",
								"background": "#ffffff",
								"color": "#000000",
								"zindex": 100
							}
						});
					} else {
						this.poster.value.views.push({
							"type": "qrcode",
							"content": res.link,
							"style": {
								"width": "58px",
								"height": "58px",
								"top": "404px",
								"left": "286px",
								"background": "#ffffff",
								"color": "#000000",
								"zindex": 100
							}
						});
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-bottom: 120rpx;
	}

	contact-button {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50px;
		height: 50px;
	}

	.score {
		margin-right: 10rpx;
	}

	.fixed-top {
		bottom: 230rpx;
	}

	/* 轮播区 */
	.swiper-area {
		position: relative;
		height: 720rpx;
		top: 0;
	}

	/* #ifndef MP */
	.swiper-area {}

	/* #endif */

	/* #ifdef APP-PLUS */
	.swiper-area {
		margin-top: 0;
	}

	/* #endif */

	/* 商品数据区 */
	.goods-area {
		.price-box {
			display: flex;
			align-items: baseline;
		}

		.title {
			color: $font-color-dark;
			height: 46rpx;
			line-height: 46rpx;
		}
	}


	.show-area {
		padding: 28rpx;

		.dflex .ft-dark {
			width: 88rpx;
		}

		.dot {
			width: 6rpx;
			height: 6rpx;
			border-radius: 50%;
			background: #bbb;
			display: inline-block;
			position: relative;
			top: -8rpx;
		}
	}

	.share-area {
		.vertical-line {
			right: 50%;
			height: 40%;
		}
	}

	/* 评价 */
	.evaluate-area {
		padding: 28rpx;

		.headimg {
			flex-shrink: 0;
			width: 80rpx;
			height: 80rpx;
		}

		.right-area {
			image {
				margin-right: 10rpx;
				margin-bottom: 10rpx;
				height: 200rpx;
				width: 30%;
			}
		}
	}

	/* 详情区 */
	.detail-area {
		padding-top: 4rpx;
		padding-left: 14rpx;
		padding-right: 14rpx;

		.d-header {
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			position: relative;

			text {
				padding: 0 20rpx;
				background: #fff;
				position: relative;
				z-index: 1;
			}

			&:after {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%);
				width: 300rpx;
				height: 0;
				content: '';
				border-bottom: 1px solid #ccc;
			}
		}

		/* 产品详情 */
		.pro-detail {
			width: 100%;
			overflow: hidden;
			-webkit-touch-callout: none;

			img {
				width: 100%;
				max-width: 100%;
				overflow: hidden;
			}
		}
	}

	/* 操作区 */
	.oper-area {
		left: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0.95);
		box-shadow: 0 0 20rpx 0 #f0f0f0;
		height: 100rpx;
		z-index: 95;

		.btn-area {
			font-size: $font-sm;
			color: $font-color-base;
			width: 96rpx;

			.iconfont {
				font-size: 40rpx;
				line-height: 48rpx;
			}
		}
	}

	.rebate-info {
		margin-top: 8rpx;
		font-size: 24rpx;
		color: #555;
	}

	.rebate-line {
		display: flex;
		align-items: center;
		margin-bottom: 4rpx;
	}

	.rebate-line .icon {
		margin-right: 6rpx;
	}

	.rebate-line .label {
		color: #999;
		margin-right: 4rpx;
	}

	.rebate-line .value {
		color: #e64340;
		font-weight: bold;
	}

	.free-tag {
		color: #4caf50;
		/* 绿色 */
		background-color: #e6f5ea;
		padding: 4rpx 10rpx;
		border-radius: 6rpx;
		font-size: 24rpx;
	}

	.use-tag {
		border-top-left-radius: 5px;
		border-bottom-right-radius: 5px;
		line-height: 1;
		padding: 4px 6px;
		font-size: 11px;
	}

	.price-desc {
		font-size: 24rpx;
		color: #666;
		font-weight: normal;
	}

	.poster-btn-container {
		margin-top: 20rpx;
		gap: 20rpx;
		/* 按钮之间留点间距 */
	}

	.btn {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		border-radius: 50rpx;
		/* 圆角胶囊效果 */
		font-size: 28rpx;
		font-weight: 600;
		color: #fff;
		box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.15);
		/* 阴影增强层次感 */
		transition: all 0.3s;
	}

	/* 悬停/点击时稍微缩小，增加交互感 */
	.btn:active {
		transform: scale(0.96);
		opacity: 0.9;
	}

	.btn-warn {
		background: linear-gradient(135deg, #ff7b47 0%, #ff4e50 100%);
	}

	.btn-base {
		background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
	}

	.flex-center {
		display: flex;
		justify-content: center;
	}

	.item-header .u-icon {
		margin-right: 10rpx;
	}

	.detail-area {
		padding: 16rpx;
	}

	.list-item {
		background: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12rpx;
	}

	.name {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.icons {
		display: flex;
		gap: 12rpx;
	}

	.desc {
		margin-top: 10rpx;
		font-size: 26rpx;
		color: #666;
		word-break: break-word;
		white-space: normal;
		line-height: 1.6;
	}

	.view-more {
		text-align: center;
		font-size: 28rpx;
		color: #409EFF;
		/* 蓝色 */
		padding: 20rpx 0;
	}
</style>