510 lines
12 KiB
Vue
510 lines
12 KiB
Vue
<template>
|
||
<view class="whole">
|
||
<view class="swiperBox">
|
||
<swiper class="box" :autoplay="true" :interval="5000" :duration="500" :indicator-dots="false" :circular="true">
|
||
<swiper-item>
|
||
<image class="img" :src="goodsInfo.face_img + '?x-oss-process=image/format,webp'" :webp="true" mode="aspectFill"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
<view class="oneBox">
|
||
<view class="price">
|
||
<view class="font">￥{{((goodsInfo.max_price * 100 - pageInfo.amount * 100) / 100).toFixed(2)}}</view>
|
||
<view class="huaxian">￥{{goodsInfo.max_price}}</view>
|
||
</view>
|
||
|
||
<view class="desc">已享有抵扣优惠，可直接下单</view>
|
||
|
||
<view class="title">{{goodsInfo.title}}</view>
|
||
</view>
|
||
|
||
<!-- 商品规格sku -->
|
||
<view class="sku-list" v-if="goodsInfo.specs_type === 1">
|
||
<view class="title">商品规格</view>
|
||
<view class="sku-list-item" v-for="(item, index) in specsList" :key="item.spec_id">
|
||
<view class="sku-list-item-name">{{item.spec_name }}</view>
|
||
<view class="sku-list-item-tag">
|
||
<view class="tag"
|
||
v-for="(it, i) in item.value"
|
||
:key="it.id"
|
||
@click="!it.show ? chooseSku(it, index, i) : ''"
|
||
:class="choose['v'+ (index + 1) +'_id'] == it.id ? 'choose' : it.show ? 'dis' : '' ">
|
||
<image v-if="it.img" :src="it.img"></image>
|
||
<text>{{it.value}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="twoBox">
|
||
<view class="title">商品详情</view>
|
||
<!-- <view class="desc"><text>{{goodsInfo.description}}</text></view> -->
|
||
<!-- 商品详情 -->
|
||
<view class="edition">
|
||
<div v-for="(item, index) in goodsInfo.text_modules" :key="item.id">
|
||
<div class="edition_box big" v-if="item.type == 1" @click="preViewImg(item.imgs[0])">
|
||
<div v-for="(imgs, index) in item.imgs" :key="index">
|
||
<image :src="imgs + '?x-oss-process=image/format,webp'" :webp="true" mode="widthFix" style="height:100%;width:100%" class="image"></image>
|
||
</div>
|
||
</div>
|
||
<div class="edition_box" v-if="item.type == 2">
|
||
<div class="small_img">
|
||
<div v-for="(list, index1) in item.img" :key="index1" class="imgs" @click="preViewImg(item.img)">
|
||
<image :src="list + '?x-oss-process=image/format,webp'" mode="aspectFill" :webp="true"></image>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="edition_box" v-if="item.type == 3" @click="openVideo(item.video[0])">
|
||
<div class="background">
|
||
<up-icon name="play-right-fill" size="42" color="#fff" />
|
||
</div>
|
||
<image :src="item.video_img" mode="widthFix" style="height:100%;width:100%"></image>
|
||
</div>
|
||
<div class="edition_box text1_box" v-if="item.type == 4">
|
||
<text selectable="true" user-select="true" class="text">{{item.text}}</text>
|
||
</div>
|
||
</div>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="btmbox">
|
||
<view class="addbtn" @click="confirmPay()">立即下单</view>
|
||
</view>
|
||
|
||
<video-dialog :url="videoUrl" :show="showVideo" @close="showVideo = false"></video-dialog>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { ref, reactive, toRefs, watch } from 'vue'
|
||
import { get, post } from '@/api/request.js'
|
||
import { showToast } from '@/components/common.js'
|
||
import videoDialog from '@/components/videoDialog/index.vue'
|
||
import { Style } from '@/utils/list.js'
|
||
|
||
export default {
|
||
components: {
|
||
videoDialog
|
||
},
|
||
setup() {
|
||
const data = reactive({
|
||
pageInfo: {
|
||
amount: 0
|
||
},
|
||
id: 0,
|
||
videoUrl: '',
|
||
showVideo: false,
|
||
specsList: [],
|
||
chooseItem: {
|
||
price: 0
|
||
},
|
||
skuName: [], // 规格名
|
||
choose: {},
|
||
chooseIndex: [],
|
||
images: [],
|
||
sku_skuInfo: [],
|
||
goodsInfo: {
|
||
max_price: 0
|
||
},
|
||
Color: '',
|
||
bgColor: '',
|
||
priceColor: '',
|
||
shop_goods_id: 0
|
||
})
|
||
|
||
async function getPageInfo() {
|
||
uni.showLoading({
|
||
title: '加载中...',
|
||
mask: true
|
||
})
|
||
await get('/api/v1/UserCoupon/' + data.id).then((res) => {
|
||
data.pageInfo = res.data
|
||
data.shop_goods_id = res.data.extend && res.data.extend.id || 0
|
||
uni.hideLoading()
|
||
})
|
||
}
|
||
|
||
const getGoodsInfo = async () => {
|
||
await get(`/api/v1/goods/detail/${data.shop_goods_id}`).then((res) => {
|
||
data.goodsInfo = res.data
|
||
})
|
||
}
|
||
|
||
const getGoodSpec = async () => {
|
||
await get(`/api/v1/goods/spec/${data.shop_goods_id}`).then((res) => {
|
||
data.specsList = res.data.specs || []
|
||
data.sku_skuInfo = res.data.skus
|
||
if(res.data.specs_type === 1) {
|
||
data.chooseItem = res.data.skus[0]
|
||
}
|
||
// 在仅有一个规格的时候设置状态
|
||
if(data.specsList.length == 1) {
|
||
data.specsList[0].value.forEach((req, i) => {
|
||
data.sku_skuInfo.forEach((res, j) => {
|
||
if(req.id == res.v1_id && (res.price == 0 || res.stock <= 0)){
|
||
req.show = true
|
||
}
|
||
})
|
||
})
|
||
}
|
||
data.images = []
|
||
data.specsList[0] && data.specsList[0].value.forEach((it) => {
|
||
if(it.img_800){
|
||
data.images.push(it.img_800)
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
// 规格选择-主要逻辑
|
||
function chooseSku(curObj, index, i_index) {
|
||
data.choose['v' + (index + 1) + '_id'] = data.specsList[index].value[i_index].id
|
||
data.skuName[index] = data.specsList[index].value[i_index].value
|
||
data.chooseIndex.push(index)
|
||
data.chooseIndex = Array.from(new Set(data.chooseIndex))
|
||
if(data.specsList.length - Object.keys(data.choose).length == 1) {
|
||
// 如果只有一个规格类未选中，则去判断未选中的这一项是否可选
|
||
data.specsList.forEach((req, i) => {
|
||
if(data.chooseIndex.indexOf(i) == -1) {
|
||
req.value.forEach((rej, j) => {
|
||
data.sku_skuInfo.forEach((ress, m) => {
|
||
let flag = [rej.id === ress['v'+(i+1)+'_id']]
|
||
for (const key in data.choose) {
|
||
flag.push(ress[key] == data.choose[key])
|
||
}
|
||
if(flag.findIndex(target=>target===false)==-1){
|
||
if(ress.stock <= 0 || ress.price == 0){
|
||
rej.show = true
|
||
} else {
|
||
rej.show = false
|
||
}
|
||
}
|
||
})
|
||
})
|
||
}
|
||
})
|
||
} else if(data.specsList.length == Object.keys(data.choose).length) {
|
||
for (const key in data.choose) {
|
||
let i = parseInt(key.substr(1, 1))
|
||
data.specsList[i-1].value.forEach((req) => {
|
||
data.sku_skuInfo.forEach((ress, m) => {
|
||
let flag = [req.id == ress['v'+i+'_id']]
|
||
for (const k in data.choose) {
|
||
let j = parseInt(k.substr(1, 1))
|
||
if(i != j) {
|
||
flag.push(ress[k] == data.choose[k])
|
||
}
|
||
}
|
||
if(flag.findIndex(target => target === false) ==-1){
|
||
if((ress.stock <= 0 || ress.price == 0)){
|
||
req.show = true
|
||
} else {
|
||
req.show = false
|
||
}
|
||
}
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
function preViewImg(img) {
|
||
uni.previewImage({
|
||
urls: [img],
|
||
current: 1
|
||
})
|
||
}
|
||
|
||
const openVideo = (e) => {
|
||
data.showVideo = true
|
||
data.videoUrl = e
|
||
}
|
||
|
||
function confirmPay() {
|
||
if (data.chooseIndex.length != data.specsList.length && data.goodsInfo.specs_type === 1) {
|
||
showToast('请选择完整规格')
|
||
return false
|
||
}
|
||
toBuyGoods()
|
||
}
|
||
|
||
function toBuyGoods() {
|
||
let goods = [{
|
||
num: 1,
|
||
shop_goods_id: data.chooseItem.shop_goods_id,
|
||
shop_goods_sku_id: data.chooseItem.id,
|
||
shop_group_goods_id: 0
|
||
}]
|
||
uni.setStorageSync('shopGoods', goods)
|
||
wx.showToast({
|
||
title: '加载中...',
|
||
icon: 'loading',
|
||
duration: 1200,
|
||
mask: true,
|
||
success() {
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: '/pages/pay/index?type=0&from=1&coupon_id=' + data.id
|
||
})
|
||
}, 1000)
|
||
}
|
||
})
|
||
}
|
||
|
||
watch(() => data.choose, (newChoose) => {
|
||
// 判断选择规格值是否完整
|
||
if (Object.keys(newChoose).length != data.specsList.length) {
|
||
return
|
||
}
|
||
// 对比选中项
|
||
data.sku_skuInfo.forEach((sku, s_index) => {
|
||
let num = data.chooseItem.num
|
||
if (
|
||
sku.v1_id == newChoose.v1_id &&
|
||
sku.v2_id == newChoose.v2_id &&
|
||
sku.v3_id == newChoose.v3_id &&
|
||
sku.v4_id == newChoose.v4_id
|
||
) {
|
||
data.chooseItem = { ...sku }
|
||
if (num > 0) {
|
||
data.chooseItem.num = num < sku.stock ? num : sku.stock
|
||
} else if (sku.stock > 0) {
|
||
data.chooseItem.num = 1
|
||
} else {
|
||
data.chooseItem.num = 0
|
||
}
|
||
if (sku.pic_url === 'undefined') {
|
||
data.chooseItem.pic_url = props.skuInfo.face_img
|
||
}
|
||
}
|
||
})
|
||
},
|
||
{ deep: true }
|
||
)
|
||
|
||
return {
|
||
...toRefs(data),
|
||
preViewImg,
|
||
confirmPay,
|
||
getPageInfo,
|
||
openVideo,
|
||
toBuyGoods,
|
||
getGoodsInfo,
|
||
getGoodSpec,
|
||
chooseSku
|
||
}
|
||
},
|
||
async onLoad(options) {
|
||
this.id = options.id
|
||
await this.getPageInfo()
|
||
await this.getGoodsInfo()
|
||
await this.getGoodSpec()
|
||
this.Color = uni.getStorageSync('theme_color')
|
||
this.bgColor = Style[uni.getStorageSync('theme_index') * 1].bgColor
|
||
this.priceColor = Style[uni.getStorageSync('theme_index') * 1].priceColor
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.whole{
|
||
padding-bottom: 1px;
|
||
.swiperBox{
|
||
.box{
|
||
width: 100%;
|
||
height: 600rpx;
|
||
.img{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.oneBox{
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
margin-bottom: 20rpx;
|
||
.price{
|
||
display: flex;
|
||
align-items: center;
|
||
.font{
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: v-bind('priceColor');
|
||
}
|
||
.huaxian{
|
||
margin-left: 20rpx;
|
||
color: #676767;
|
||
text-decoration: line-through;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
.desc{
|
||
margin-top: 10rpx;
|
||
font-size: 24rpx;
|
||
color: #9C9C9C;
|
||
}
|
||
.title{
|
||
font-size: 30rpx;
|
||
line-height: 44rpx;
|
||
color: #000;
|
||
font-weight: bold;
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
.twoBox{
|
||
margin: 20rpx 0 100rpx;
|
||
padding: 30rpx 0;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
.title{
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
font-weight: 600;
|
||
margin-bottom: 30rpx;
|
||
padding: 0 30rpx;
|
||
}
|
||
.desc{
|
||
padding: 24rpx 30rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
line-height: 50rpx;
|
||
border-top: 1px solid #e5e5e5;
|
||
}
|
||
}
|
||
.btmbox{
|
||
position: fixed;
|
||
bottom: 0;
|
||
padding: 20rpx 30rpx;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
z-index: 90;
|
||
background: #fff;
|
||
.addbtn{
|
||
width: 100%;
|
||
height: 80rpx;
|
||
color: #fff;
|
||
background: v-bind('Color');
|
||
border-radius: 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
.edition{
|
||
background-color: #fff;
|
||
}
|
||
.edition_box {
|
||
margin: 8rpx 0;
|
||
position: relative;
|
||
&.big{
|
||
margin: 0;
|
||
}
|
||
.image{
|
||
vertical-align: bottom;
|
||
}
|
||
.background {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
image {
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
}
|
||
.img {
|
||
width: 100%;
|
||
}
|
||
.small_img {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start;
|
||
.imgs {
|
||
width: 32.3%;
|
||
height: 200rpx;
|
||
margin: 20rpx 0;
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
.imgs:nth-child(2) {
|
||
margin: 20rpx 10rpx;
|
||
}
|
||
.imgs:nth-child(5) {
|
||
margin: 20rpx 10rpx;
|
||
}
|
||
.imgs:nth-child(8) {
|
||
margin: 20rpx 10rpx;
|
||
}
|
||
}
|
||
.text {
|
||
line-height: 55rpx;
|
||
font-size: 30rpx;
|
||
color: #222;
|
||
}
|
||
}
|
||
.text1_box{
|
||
padding: 20rpx 30rpx;
|
||
}
|
||
.sku-list {
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
margin-top: 20rpx;
|
||
background-color: #fff;
|
||
.title{
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
.sku-list-item {
|
||
margin-bottom: 20rpx;
|
||
.sku-list-item-name {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
}
|
||
.sku-list-item-tag {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
font-size: 26rpx;
|
||
}
|
||
.tag {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #000;
|
||
background-color: #f4f4f4;
|
||
margin-right: 22rpx;
|
||
margin-top: 20rpx;
|
||
padding: 12rpx 20rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 6rpx;
|
||
image {
|
||
width: 35rpx;
|
||
height: 35rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
&.dis{
|
||
opacity: 0.35;
|
||
}
|
||
}
|
||
.choose {
|
||
background-color: v-bind('Color');
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
</style>
|