yurong/pageOne/indexs/detail.vue

]<template>
	<view>
		<view class="w100 h-684">
			<swiper :interval="3000" :duration="1000" circular autoplay class="w100 h-684">
				<swiper-item class="w100 h100 rows rowsc" v-for="(item,index) in images" :key="index">
					<image class="w100 h-684" :src="$tools.oss(item)" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="w100 p-all-20 bgff rows rowsl">
			<view class="rows rowsm col fw-b">
				<text class="fs-28">￥</text>
				<text class="fs-48">{{detail.price||0}}</text>
			</view>
			<view class="two_overflow mt-20 fs-32 col333 fw-b">
				{{detail.name||''}}
			</view>
			<text class="fs-24 col666 mt-14">销量：{{detail.sales||0}}</text>
		</view>
		<!-- <view class="w100 rows rowsc mt-20">
			<view class="w100 bgff br-20 p-all-30">
				<view class="w100 rows rowsb rowsm">
					<text class="fs-30 fw-b col333">商品评价(10)</text>
					<text class="fs-24 col888" @click="$tools.goNext('/pageOne/indexs/allEvaluate')">查看全部>></text>
				</view>
				<view class="w100 rows rowsm rowsb mt-30">
					<view class="rows rowsm">
						<image class="w-80 h-80 br-100 mr-24" src="/static/other/3.png" mode="aspectFill"></image>
						<text class="fs-28 col333 mr-24">陈喜喜</text>
					</view>
					<uni-rate :touchable="false" :value="5" @change="onChange" :readonly="true" size="20" activeColor="#FF9A00"/>
				</view>
				<view class="w100 mt-15 fs-26 col333">
					版型好，不掉色，摸起来很舒服，没有色差，上身效果好
					尺码准，质量很好，值得购买。
				</view>
				<view class="rows mt-10 rowsw">
					<image class="w-216 h-216 br-10 mb-10 mr-10" src="/static/other/3.png" mode="aspectFill" v-for="(item,index) in 2" :key="index"></image>
				</view>
			</view>
		</view> -->
		<view class="w100 mt-20 bgff">
			<view class="w100 h-88 rows rowsc rowsm">
				<text class="fw-b fs-30 col333 d-block h-80 rows rowsm pl-30 pr-30">商品详情</text>
			</view>
			<uParse :html="detail.content" :imageProp="imageProp"/>
		</view>
		<view class="w100 h-190"></view>
		<view class="w100 rows bgff fixed h-150 pt-22 pl-20 pr-20" style="bottom: 0;">
			<view class="rows rowsa w-220">
				<button class="rows rowsl rowsm" open-type="share" style="background-color: transparent;padding: 0;margin: 0;">
					<image class="w-40 h-40" src="/static/images/hg.png" mode=""></image>
					<text class="fs-24 col333" style="margin-top: -5rpx;">分享</text>
				</button>
				<view class="rows rowsl rowsm" @click="goshop">
					<image class="w-40 h-40" src="/static/images/yt.png" mode=""></image>
					<text class="fs-24 col333 mt-10">购物车</text>
				</view>
				<view class="rows rowsl rowsm" @click="like">
					<image class="w-40 h-40" :src="detail.like==0?'/static/images/01qer.png':'/static/images/01qsdfgd.png'" mode=""></image>
					<text class="fs-24 col333 mt-10">{{detail.like==0?'收藏':'已收藏'}}</text>
				</view>
			</view>
			<view class="rows w100 rowse">
				<view class="w-240 h-76 br-100 rows rowsc rowsm" @click="open" style="border-radius: 40rpx 0 0 40rpx;border: 2rpx solid #E73232;">
					<text class="col fs-28">加入购物车</text>
				</view>
				<view class="w-240 h-76 br-100 bg rows rowsc rowsm" @click="open" style="border-radius: 0 40rpx 40rpx 0;">
					<text class="colfff fs-28">立即购买</text>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" :is-mask-click="true" :safe-area="false">
			<view class="w100 p-all-24 bgff" style="border-radius: 20rpx 20rpx 0 0;">
				<view class="w100 rows">
					<image class="w-156 h-156 br-16 mr-20" :src="$tools.oss(detail.image)" mode="aspectFill"></image>
					<view class="w100 h-156 rows rowsl rowsb">
						<text class="fs-30 fw-b">{{detail.name||''}}</text>
						<view class="rows rowsm">
							<text class="fs-22 fw-b" style="color: #CF2D22;">￥{{detail.spec[select].price||0}}</text>
						</view>
					</view>
				</view>
				<view class="w100 rows rowsc mt-30">
					<view class="w-710 rows rowsl pl-20 pr-20">
						<text class="fs-28 fw-b col333">规格</text>
						<view class="w100 rows rowsw">
							<view class="rows rowsc rowsm br-100 pr-20 pl-20 h-60 mr-20 mt-20" :class="select==index?'plus':'plus1'"
							v-for="(item,index) in detail.spec" :key="index" @click="onSel(index)">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<view class="w100 rows rowsc mt-30">
					<view class="w-710 h-52 rows rowsm pl-20 pr-20 rowsb">
						<text class="fs-28 fw-b col333">数量</text>
						<lxc-count-style @handleCount='handleCount($event)' :min="min" :value="nums"></lxc-count-style>
					</view>
				</view>
				<view class="rows rowsa mt-50">
					<view class="w-320 h-80 rows rowsm rowsc br-100 fs-30 col" style="border: 2rpx solid #E73232;"
					@click="addshopcat">
						加入购物车
					</view>
					<view class="w-320 h-88 rows rowsm rowsc br-100 colfff fs-30 bg" @click="goConfirm">
						立即购买
					</view>
				</view>
				<view class="w100 h-50"></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uParse from '@/uview-ui/components/u-parse/u-parse.vue'
	export default {
		components: {uParse},
		data() {
			return {
				min:1,
				nums:1,
				ids:'',
				detail:{},
				imageProp:'',
				images:[],
				select:0,
			}
		},
		onLoad(e) {
			this.ids = e.id
			this.shopDetails()
		},
		onShow() {},
		onShareAppMessage(res) {
			return {
				title:this.detail.name,
				imageUrl:this.$tools.oss(this.detail.image),
				path: `/pageOne/indexs/detail?id=${this.ids}`,
			}
		},
		methods: {
			onSel(index){
				this.select = index
			},
			goConfirm(){
				this.$refs.popup.close()
				this.$tools.goNext(`/pageOne/indexs/confirm?id=${this.ids}&num=${this.nums}&img=${this.detail.image}&name=${this.detail.name}
				&price=${this.detail.spec[this.select].price}&skuName=${this.detail.spec[this.select].name}&skuId=${this.detail.spec[this.select].id}`)
			},
			open(){
				this.$refs['popup'].open()
			},
			handleCount(e){
				this.nums = e
			},
			shopDetails(){
				this.$tools.axiosFromToken("POST","shop/shopDetails",{id:this.ids}).then(res => {
					this.detail = res.data
					this.images = res.data.images
				})
			},
			// 添加购物车
			addshopcat(){
				this.$tools.axiosFromToken("POST","shop/addCar",{
					shop_id:this.ids,
					num:this.nums,
					spec_id:this.detail.spec[this.select].id
				}).then(res => {
					this.$tools.showtt(res.msg)
					if(res.code != 1) return
					this.$refs.popup.close()
				})
			},
			goshop(){
				this.$tools.goSwitchTab('/pages/tabbar/shop')
			},
			like(){
				this.$tools.axiosFromToken("POST","shop/like",{
					id:this.detail.id
				}).then(res => {
					this.$tools.showtt(res.msg)
					if(res.code!=1) return
					this.shopDetails()
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F7F8FA;
	}
	.plus{
		background-color: #E73232;
		color: #fff;
	}
	.plus1{
		background-color: #F4F4F4;
	}
	button::after{
		border: none;
	}
</style>