207 lines
7.0 KiB
Vue
207 lines
7.0 KiB
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>
|