1054425342@qq.com
1 month ago
11 changed files with 2166 additions and 1090 deletions
@ -0,0 +1,262 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<BackButton /> |
||||
|
<!-- <headerVue :type="'goods'"></headerVue> --> |
||||
|
<view class="banner-content"> |
||||
|
|
||||
|
<swiper class="top-banner" :circular="true" :interval="6000" :duration="800" |
||||
|
:indicator-dots="false" :autoplay="true" @change="swiperChange" > |
||||
|
<swiper-item v-for="(item, index) in topBanner" :key="index" @click.stop="gotoUrlNew(item)"> |
||||
|
<image class="top-banner" :src="showImg(item.head_img)" mode="aspectFill"></image> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
|
||||
|
<view class="dot-container"> |
||||
|
<view :class="['dot-line',index==swiperIndex?'active':'']" v-for="(item, index) in topBanner" :key="index"></view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
<view class="desc-box"> |
||||
|
<view class="title-sec" style="color: black;"> |
||||
|
关于有感商品 |
||||
|
</view> |
||||
|
<view class=""> |
||||
|
寻常商品，满足你的日常所需；而「有感商品」，则回应你的精神所向。 |
||||
|
</view> |
||||
|
<view class=""> |
||||
|
我们坚信“意义大于产品”。这里的每一件商品都诞生于EPIC SOUL「交响」阅读体的史诗，是精神漫游的实体回响。它的存在，是为了让你在消费中完成一次次深刻的情感连接与自我认同。 |
||||
|
</view> |
||||
|
<view class=""> |
||||
|
在这里，消费的终点不是拥有，而是更深刻的连接与共鸣。欢迎探索，一件件写满故事与想象力的生活信物。 |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="product-content"> |
||||
|
<!-- <image class="head-img" src="https://static.ticket.sz-trip.com/uploads/20250625/e3112c280ef9761af741907a737ef221.png"></image> --> |
||||
|
<view class="title-sec"> |
||||
|
有感商品上新 |
||||
|
</view> |
||||
|
|
||||
|
<scroll-view style="width: 100%;" scroll-x> |
||||
|
<view class="product"> |
||||
|
<view class="item" v-for="(item,i) in list" :key="item.goods.id" @click="goDetailByType(item)"> |
||||
|
<image class="item-img" :src="showImg(item.goods.image)"></image> |
||||
|
<view class="content"> |
||||
|
<view class="title text-overflow">{{item.goods.title}}</view> |
||||
|
<view class="bottom"> |
||||
|
<view class="price">￥{{item.goods.money/100}}</view> |
||||
|
<image src="https://static.ticket.sz-trip.com/epicSoul/readingBody/gwc.png" class="buy-cart"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
|
||||
|
<!-- <image style="margin: 53rpx 0 35rpx;" class="head-img" src="https://static.ticket.sz-trip.com/uploads/20250627/73153098ff5c115e02afb0328ade1e29.png"></image> --> |
||||
|
<view class="title-sec"> |
||||
|
有感商品精选 |
||||
|
</view> |
||||
|
<view class="img-container"> |
||||
|
<image v-for="(type,i) in typeList" :key="i" :src="showImg(type.img)" |
||||
|
@click="gotoPath(`/subPackages/haveFeeling/detailXiang?id=${type.id}`)"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- <CustomTabBar :currentTab="2" /> --> |
||||
|
<MusicControl /> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import headerVue from "@/components/header.vue" |
||||
|
import CustomTabBar from '@/components/CustomTabBar.vue'; |
||||
|
import MusicControl from '@/components/MusicControl.vue'; |
||||
|
import BackButton from "@/components/BackButton.vue"; |
||||
|
export default { |
||||
|
components: {CustomTabBar,headerVue,MusicControl,BackButton}, |
||||
|
data() { |
||||
|
return { |
||||
|
topBanner: [], |
||||
|
list: [], |
||||
|
swiperIndex: 0, |
||||
|
typeList: [], |
||||
|
} |
||||
|
}, |
||||
|
onLoad() { |
||||
|
|
||||
|
}, |
||||
|
onReady() { |
||||
|
this.getProduct() |
||||
|
this.getTypes() |
||||
|
this.getList() |
||||
|
}, |
||||
|
onReachBottom() { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
swiperChange(e) { |
||||
|
this.swiperIndex = e.detail.current |
||||
|
}, |
||||
|
|
||||
|
viewDetail(item) { |
||||
|
if (item.url) { |
||||
|
uni.navigateTo({ |
||||
|
url:"/subPackages/webPage/webPage?url="+encodeURIComponent(item.url) |
||||
|
}) |
||||
|
return |
||||
|
} |
||||
|
uni.navigateTo({ |
||||
|
url:'/subPackages/letter/detail?id='+item.id |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
getProduct () { |
||||
|
this.Post({ |
||||
|
tag_id: 40, |
||||
|
offset: 0, |
||||
|
},'/api/tag/getGoodsByTagId').then(res => { |
||||
|
this.list = res.data; |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
getList() { |
||||
|
// 大轮播 |
||||
|
this.Post({ |
||||
|
type_id: 3, |
||||
|
position: 18, |
||||
|
}, '/api/adv/getAdv').then(res => { |
||||
|
if(res.data) { |
||||
|
this.topBanner = res.data; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 获取分类图片 |
||||
|
getTypes () { |
||||
|
this.Post({ |
||||
|
parent_id: 0, |
||||
|
}, '/api/goods/type').then(res => { |
||||
|
if(res.data) { |
||||
|
this.typeList = res.data; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
|
||||
|
.bg { |
||||
|
min-height: 100vh; |
||||
|
background: #FFFFFF; |
||||
|
padding-bottom: 200rpx; |
||||
|
} |
||||
|
.banner-content{ |
||||
|
width: 100%; |
||||
|
height: 496.4rpx; |
||||
|
position: relative; |
||||
|
.top-banner { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.dot-container{ |
||||
|
position: absolute; |
||||
|
bottom: 43rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 100%; |
||||
|
left: 0; |
||||
|
.dot-line{ |
||||
|
width: 52rpx; |
||||
|
height: 4rpx; |
||||
|
margin: 0 8rpx; |
||||
|
background: RGBA(189, 170, 173, 0.8); |
||||
|
&.active{ |
||||
|
background: RGBA(255, 255, 255, 0.8); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.head-img{ |
||||
|
width: 697.24rpx; |
||||
|
height: 42.57rpx; |
||||
|
margin: 0 auto; |
||||
|
display: block; |
||||
|
} |
||||
|
.product-content{ |
||||
|
padding: 63rpx 26rpx 0; |
||||
|
padding-top: 0; |
||||
|
.product{ |
||||
|
padding: 36rpx 0 0; |
||||
|
padding-top: 0; |
||||
|
display: flex; |
||||
|
flex-wrap: nowrap; |
||||
|
// justify-content: space-between; |
||||
|
.item{ |
||||
|
width: 214.69rpx; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
.item-img{ |
||||
|
width: 214.69rpx; |
||||
|
height: 286.33rpx; |
||||
|
} |
||||
|
.content{ |
||||
|
height: 80rpx; |
||||
|
padding: 0rpx 4rpx; |
||||
|
font-weight: 400; |
||||
|
font-size: 24rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
.bottom{ |
||||
|
display: flex; |
||||
|
padding-top: 13rpx; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.buy-cart{ |
||||
|
width: 28rpx; |
||||
|
height: 24rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.img-container{ |
||||
|
width: 100%; |
||||
|
image{ |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 314rpx; |
||||
|
border-radius: 40rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
} |
||||
|
.line{ |
||||
|
width: 220rpx; |
||||
|
height: 1rpx; |
||||
|
background: #E4E4E4; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
.head-img-yougan{ |
||||
|
width: 183.45rpx; |
||||
|
height: 42.57rpx; |
||||
|
} |
||||
|
.title-sec{ |
||||
|
font-size: 34rpx; |
||||
|
font-weight: 500; |
||||
|
margin: 30rpx 0; |
||||
|
} |
||||
|
.desc-box{ |
||||
|
padding: 0 20rpx; |
||||
|
color: #616161; |
||||
|
margin: 30rpx 0; |
||||
|
font-size: 24rpx; |
||||
|
padding: 0 30rpx; |
||||
|
view{ |
||||
|
margin-bottom: 20rpx; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,823 @@ |
|||||
|
<template> |
||||
|
<view class="bg" id="bg" v-if="info"> |
||||
|
<view class="swipe-box"> |
||||
|
<swiper class="swiper" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000" circular> |
||||
|
<swiper-item v-if="info && info.videourl"> |
||||
|
<video |
||||
|
:src="showImg(info.videourl)" |
||||
|
id="detailVideo" |
||||
|
:poster="showImg(info.image)" |
||||
|
@play="play" |
||||
|
@error="videoErrorCallback" |
||||
|
controls |
||||
|
style="width: 100%;height: 100%;" |
||||
|
object-fit="cover" |
||||
|
></video> |
||||
|
</swiper-item> |
||||
|
<swiper-item v-for="(item, index) in info.list_images.split(',')" :key="item.id"> |
||||
|
<view class="swiper-item"> |
||||
|
<image class="item-img" :src="showImg(item)" mode="aspectFill"></image> |
||||
|
</view> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
<view class="swiper-item-num">{{ info.list_images.split(',').length }}张</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="w-full relative" style="padding: 26rpx 0;top: -52rpx;"> |
||||
|
<view class="price-box "> |
||||
|
<view class="price-zan"> |
||||
|
<view class="price"> |
||||
|
<view class="present-price">{{ info.money / 100 }}</view> |
||||
|
<view class="old-price">￥{{info.price / 100}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="tag no-scrollbar" v-if="info.goods_new_tag"> |
||||
|
<view class="tag-item" v-for="(item, index) in info.goods_new_tag.split(',')" :key="index"> |
||||
|
{{ item }} |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="title">{{ info.title }}</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="sku-box" v-if="sku.length>0"> |
||||
|
<view class="sku-item" v-for="(item,i) in sku" :key="i"> |
||||
|
<image :src="showImg(item.image)"></image> |
||||
|
<view class="sku-content"> |
||||
|
<view class="flex-1">{{item.title}}</view> |
||||
|
<view class="present-price">{{item.money/100}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="notice" v-if="info.reserve_content"> |
||||
|
<view class="title">购买须知</view> |
||||
|
<view class="rich-text" v-html="formateRichText(info.reserve_content)"></view> |
||||
|
</view> |
||||
|
<view class="notice" > |
||||
|
<view class="title">商品须知</view> |
||||
|
<view class="rich-text" v-html="formateRichText(info.special_content)"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<template v-if="!popShow"> |
||||
|
<view class="btn-list" v-if="!paramData.showCart"> |
||||
|
<view class="left-box"> |
||||
|
<!-- <view class="img-box" slot="content"> |
||||
|
<uni-badge class="uni-badge-left-margin" :text="paramData.num" absolute="rightTop" :offset="[5, 5]" size="small" |
||||
|
:custom-style="{background:'#D90F01',color:'#ffffff',border:'1px solid #ffffff'}"> |
||||
|
<image @click.stop="showCartClick" :src="showImg('/uploads/20250513/29fd015f8c779f08e53d1016d3643c58.png')" mode="aspectFill" |
||||
|
style="width: 60rpx;height: 50rpx;"></image> |
||||
|
</uni-badge> |
||||
|
<text class="text">购物车</text> |
||||
|
</view> --> |
||||
|
</view> |
||||
|
<view class="btn-post"> |
||||
|
<view class="left-btn-buy" @click="openPop(true)">加入购物车</view> |
||||
|
<view class="right-btn-buy" @click="openPop(false)">立即购买</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="btn-list" v-else> |
||||
|
<view class="left-box"> |
||||
|
<view class="img-box" slot="content"> |
||||
|
<uni-badge class="uni-badge-left-margin" :text="paramData.num" absolute="rightTop" :offset="[5, 5]" size="small" |
||||
|
:custom-style="{background:'#D90F01',color:'#ffffff',border:'1px solid #ffffff'}"> |
||||
|
<image @click.stop="showCartClick" :src="showImg('/uploads/20250513/29fd015f8c779f08e53d1016d3643c58.png')" mode="aspectFill" |
||||
|
style="width: 60rpx;height: 50rpx;"></image> |
||||
|
</uni-badge> |
||||
|
<text class="text">购物车</text> |
||||
|
</view> |
||||
|
<view class="bottom-price"> |
||||
|
<text style="color: #000000;">总计：</text> |
||||
|
￥ |
||||
|
<view class="bottom-price-yuan">{{paramData.iNum}}</view> |
||||
|
<view>.{{paramData.fNum}}</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
<view class="btn-buy" @click="goCartOrder"> |
||||
|
去结算 |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<cartDataVue ref="cartDataVueRef" :paramData="paramData" @changeParamData="changeParamData" :key="new Date().getTime()"></cartDataVue> |
||||
|
|
||||
|
<uni-popup ref="popup" type="bottom" @change="changPopShow" |
||||
|
:safe-area="false" style="position: relative;z-index: 50;"> |
||||
|
<view class="popup-content" v-if="sku.length>0"> |
||||
|
<view @click="closePopup" style="padding: 31rpx 0 0 639rpx;width: 50rpx;height: 80rpx;"> |
||||
|
<uni-icons type="closeempty" size="24"></uni-icons> |
||||
|
</view> |
||||
|
|
||||
|
<view class="bottom-productImg"> |
||||
|
<img :src="showImg(sku[productIndex].image)" alt=""> |
||||
|
<view class="right-content"> |
||||
|
<view class="bottom-productPrice com-price">{{(sku[productIndex].money||0)/100}}</view> |
||||
|
<view class="bottom-content text-overflow">已选择：{{sku[productIndex].title}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view> |
||||
|
<view class="sp"> |
||||
|
规格 |
||||
|
</view> |
||||
|
<view style="display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;"> |
||||
|
<view style="position:relative;" v-for="(botItem,botIndex) in sku" :key="botIndex"> |
||||
|
<view :class="['botProduct',{'noStore':botItem.store==0},{'botProducts':productIndex==botIndex}]" |
||||
|
@click="changeProduct(botItem,botIndex)"> |
||||
|
{{botItem.title}} |
||||
|
</view> |
||||
|
<view class="noStore-text" v-if="botItem.store==0"> |
||||
|
不可购买 |
||||
|
</view> |
||||
|
<!-- <view class="noStore-text" v-else-if="is_post==1&&botItem.is_post!=1">不可加购</view> --> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="buy-num com-flex-tao"> |
||||
|
数量 |
||||
|
<view class="number-btn"> |
||||
|
<view> |
||||
|
<text @click="delNumber">-</text> |
||||
|
</view> |
||||
|
<view style="width: 96rpx;height: 69rpx;margin: 0 14rpx;">{{ buyNum }}</view> |
||||
|
<view> |
||||
|
<text @click="addNumber">+</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- <view style="height: 100rpx;"></view> --> |
||||
|
<view class="btn-box"> |
||||
|
<view class="buy-btn" @click="openPop(addCartOrOrder)"> |
||||
|
{{addCartOrOrder?'加入购物车':'立即购买'}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</uni-popup> |
||||
|
|
||||
|
<!-- 购物车数量 --> |
||||
|
<!-- <view class="cart-box flex-center"> |
||||
|
<image src="https://static.ticket.sz-trip.com/epicSoul/gowuche.png" mode="widthFix"></image> |
||||
|
</view> --> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import cartDataVue from '../../components/cartData.vue' |
||||
|
export default { |
||||
|
components: {cartDataVue}, |
||||
|
data() { |
||||
|
return { |
||||
|
id: null, |
||||
|
info: null, |
||||
|
sku: [], |
||||
|
productIndex: 0, |
||||
|
|
||||
|
is_post: "1", |
||||
|
|
||||
|
isCollect: false, |
||||
|
showLength: 0, |
||||
|
buyNum: 1, |
||||
|
popShow: false, |
||||
|
paramData: {allPrice: 0,iNum:0, fNum:'00', showCart: false, num: 0}, |
||||
|
addCartOrOrder: null, //true 加入购物车 false 购买 |
||||
|
}; |
||||
|
}, |
||||
|
onShow() { |
||||
|
// 获取购物车数量 |
||||
|
this.Post({ |
||||
|
is_post: 1, |
||||
|
}, '/api/shopping/getShoppingList').then(res => { |
||||
|
console.log(res) |
||||
|
}) |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
this.id = option.id; |
||||
|
this.getInfo(); |
||||
|
this.getSpecificationsByGoodsId(); |
||||
|
}, |
||||
|
methods: { |
||||
|
changPopShow (e) { |
||||
|
this.popShow = e.show |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
getInfo() { |
||||
|
this.Post({ |
||||
|
goods_id: this.id |
||||
|
}, |
||||
|
'/api/goods/getGoodDetail' |
||||
|
).then(res => { |
||||
|
if (res.data.flag == 0) { |
||||
|
setTimeout(() => { |
||||
|
uni.showToast({ |
||||
|
title: '商品不存在或已下架', |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
}, 0) |
||||
|
setTimeout(() => { |
||||
|
this.goBack() |
||||
|
}, 2000) |
||||
|
} |
||||
|
this.info = res.data; |
||||
|
// this.isCollect = this.info.is_collect; |
||||
|
if (this.info.title) { |
||||
|
uni.setNavigationBarTitle({ |
||||
|
title: this.info.title |
||||
|
}) |
||||
|
|
||||
|
this.browse_record({type: 'goods',title: this.info.title}); |
||||
|
} |
||||
|
|
||||
|
}); |
||||
|
}, |
||||
|
getSpecificationsByGoodsId() { |
||||
|
this.Post({ |
||||
|
goods_id: this.id |
||||
|
}, |
||||
|
'/api/goods/getSpecificationsByGoodsId' |
||||
|
).then(res => { |
||||
|
if (res) { |
||||
|
this.sku = res.data || []; |
||||
|
// todo |
||||
|
// this.is_post = "2" |
||||
|
// if (this.sku.length>0 && this.sku.some(v=>v.is_post == 1)) { |
||||
|
// this.is_post = "1" |
||||
|
|
||||
|
// } |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 收藏 |
||||
|
collect() { |
||||
|
this.Post({ |
||||
|
type: 5, |
||||
|
id: this.id |
||||
|
}, |
||||
|
'/api/scenic/collect' |
||||
|
).then(res => { |
||||
|
if (res) { |
||||
|
uni.showToast({ |
||||
|
title: res.msg, |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
this.isCollect = !this.isCollect |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
//数量加减 |
||||
|
addNumber() { |
||||
|
this.buyNum += 1; |
||||
|
}, |
||||
|
delNumber() { |
||||
|
if (this.buyNum <= 1) { |
||||
|
return; |
||||
|
} |
||||
|
this.buyNum -= 1; |
||||
|
}, |
||||
|
closePopup() { |
||||
|
this.$refs.popup.close() |
||||
|
}, |
||||
|
// false 下单 true 加入购物车 |
||||
|
openPop(flag) { |
||||
|
if (!this.sku||this.sku.length<=0) { |
||||
|
uni.showToast({ |
||||
|
title:'暂无可选规格', |
||||
|
icon:'none' |
||||
|
}) |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
if (!this.popShow) { |
||||
|
this.$refs.popup.open() |
||||
|
this.addCartOrOrder = flag |
||||
|
} else { |
||||
|
if (flag) { |
||||
|
this.addToCart() |
||||
|
} else { |
||||
|
this.order() |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
order(item) { |
||||
|
let goods = this.sku[this.productIndex] |
||||
|
goods.buyNum = this.buyNum |
||||
|
|
||||
|
let orderInfo = { |
||||
|
// is_post: goods.is_post || "2", |
||||
|
is_post: 1, |
||||
|
goods: [{goodsInfo: this.info, skuInfo: goods }], |
||||
|
post: 0, |
||||
|
} |
||||
|
|
||||
|
uni.setStorageSync('teChanOrder', JSON.stringify(orderInfo)); //规格 |
||||
|
// uni.setStorageSync('teChanInfo', JSON.stringify(this.info)); //商品 |
||||
|
uni.navigateTo({ |
||||
|
url: '/subPackages/techan/order' |
||||
|
}); |
||||
|
}, |
||||
|
addToCart () { |
||||
|
let goods = this.sku[this.productIndex] |
||||
|
goods.buyNum = this.buyNum |
||||
|
let goodsInfo = {goodsInfo:this.info, skuInfo: goods, isSelected: true} |
||||
|
|
||||
|
this.Post({good_id: this.info.id, specifications_id: goods.id,num: this.buyNum }, |
||||
|
'/api/shopping/addShopping').then(res => { |
||||
|
if (res) { |
||||
|
let selectedData = [] |
||||
|
try { |
||||
|
selectedData = JSON.parse(uni.getStorageSync('cartDataInfo')); |
||||
|
} catch(e) { |
||||
|
selectedData = [] |
||||
|
} |
||||
|
let currentGoods = selectedData.find(v =>v==goods.id) |
||||
|
if (!currentGoods) { |
||||
|
selectedData.push(goods.id) |
||||
|
} |
||||
|
uni.setStorageSync('cartDataInfo', JSON.stringify(selectedData)); |
||||
|
uni.$emit("updateDataByConnect", {msgType:'updateCartDataInfo',data:null}) |
||||
|
this.closePopup() |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
}, |
||||
|
goUser() { |
||||
|
uni.switchTab({ |
||||
|
url: '/pages/index/user' |
||||
|
}) |
||||
|
}, |
||||
|
changeProduct(item,index) { |
||||
|
if (item.store==0) { |
||||
|
uni.showToast({ |
||||
|
title:"库存不足！", |
||||
|
icon:'none' |
||||
|
}) |
||||
|
return |
||||
|
} |
||||
|
this.productIndex = index |
||||
|
}, |
||||
|
|
||||
|
// 购物车 |
||||
|
changeParamData (data) { |
||||
|
for(let key in this.paramData) { |
||||
|
this.paramData[key] = data[key] |
||||
|
} |
||||
|
}, |
||||
|
showCartClick () { |
||||
|
if (this.paramData.showCart) { |
||||
|
this.$refs.cartDataVueRef.closePopup() |
||||
|
} else { |
||||
|
this.$refs.cartDataVueRef.openPop() |
||||
|
} |
||||
|
}, |
||||
|
goCartOrder () { |
||||
|
this.$refs.cartDataVueRef.goCartOrder() |
||||
|
}, |
||||
|
}, |
||||
|
onReachBottom() { |
||||
|
|
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg { |
||||
|
min-height: 100vh; |
||||
|
overflow-x: hidden; |
||||
|
background: #f2f4f7; |
||||
|
padding-bottom: 210rpx; |
||||
|
} |
||||
|
|
||||
|
view { |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.swipe-box { |
||||
|
height: 750rpx; |
||||
|
position: relative; |
||||
|
|
||||
|
.swiper-item-num { |
||||
|
width: 90rpx; |
||||
|
height: 40rpx; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
border-radius: 20rpx; |
||||
|
font-size: 24rpx; |
||||
|
font-family: PingFangSC-Regular, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
text-align: center; |
||||
|
line-height: 40rpx; |
||||
|
position: absolute; |
||||
|
right: 30rpx; |
||||
|
bottom: 50rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.swiper { |
||||
|
height: 750rpx; |
||||
|
position: relative; |
||||
|
|
||||
|
.swiper-item { |
||||
|
width: 100%; |
||||
|
height: 750rpx; |
||||
|
|
||||
|
.item-img { |
||||
|
width: 750rpx; |
||||
|
height: 750rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.price-box { |
||||
|
width: 100%; |
||||
|
background: #ffffff; |
||||
|
border-radius: 20rpx 20rpx 0 0; |
||||
|
padding: 24rpx 30rpx; |
||||
|
|
||||
|
.price-zan { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.price { |
||||
|
display: flex; |
||||
|
align-items: baseline; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tag { |
||||
|
margin:24rpx 0 15rpx 0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex-wrap: nowrap; |
||||
|
overflow-x: auto; |
||||
|
|
||||
|
.tag-item { |
||||
|
margin-right: 10rpx; |
||||
|
padding: 0rpx 15rpx; |
||||
|
flex-shrink: 0; |
||||
|
font-weight: 500; |
||||
|
font-size: 23rpx; |
||||
|
color: #60989E; |
||||
|
height: 37rpx; |
||||
|
line-height: 37rpx; |
||||
|
background: rgba(96, 152, 158, 0.2); |
||||
|
border-radius: 4rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
margin-top: 22rpx; |
||||
|
font-family: PingFang; |
||||
|
font-weight: bold; |
||||
|
font-size: 31rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
} |
||||
|
.present-price { |
||||
|
font-size: 42rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #FC5109; |
||||
|
|
||||
|
&:before { |
||||
|
content: '¥'; |
||||
|
display: inline-block; |
||||
|
font-size: 26rpx; |
||||
|
} |
||||
|
|
||||
|
&:after { |
||||
|
content: '起'; |
||||
|
display: inline-block; |
||||
|
font-size: 24rpx; |
||||
|
font-family: PingFangSC; |
||||
|
color: #B5BCC9; |
||||
|
} |
||||
|
} |
||||
|
.old-price { |
||||
|
font-size: 24rpx; |
||||
|
color: #B5BCC9; |
||||
|
margin-left: 10rpx; |
||||
|
text-decoration: line-through; |
||||
|
} |
||||
|
|
||||
|
.notice { |
||||
|
width: 700rpx; |
||||
|
margin: 25rpx auto 0; |
||||
|
background: #ffffff; |
||||
|
border-radius: 20rpx; |
||||
|
padding: 40rpx 25rpx; |
||||
|
.title{ |
||||
|
font-weight: bold; |
||||
|
font-size: 36rpx; |
||||
|
color: #000000; |
||||
|
margin-bottom: 30rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn-list { |
||||
|
position: fixed; |
||||
|
z-index: 9999; |
||||
|
bottom: 0; |
||||
|
width: 750rpx; |
||||
|
background: #FFFFFF; |
||||
|
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6, 0, 1, 0.1); |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding: 30rpx 25rpx 30rpx; |
||||
|
// padding-bottom: calc(30rpx + env(safe-area-inset-bottom)); |
||||
|
|
||||
|
.left-box { |
||||
|
display: flex; |
||||
|
align-items: flex-start; |
||||
|
|
||||
|
.bottom-price{ |
||||
|
display: flex; |
||||
|
align-items: baseline; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
font-size: 27rpx; |
||||
|
color: #D70000; |
||||
|
padding-top: 20rpx; |
||||
|
.bottom-price-yuan{ |
||||
|
font-size: 40rpx; |
||||
|
} |
||||
|
} |
||||
|
.bottom-detail-icon{ |
||||
|
font-size: 24rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.img-box { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-right: 50rpx; |
||||
|
|
||||
|
image { |
||||
|
width: 48rpx; |
||||
|
height: 48rpx; |
||||
|
} |
||||
|
|
||||
|
.text { |
||||
|
font-weight: 500; |
||||
|
font-size: 22rpx; |
||||
|
color: #4D526C; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn-buy { |
||||
|
width: 240rpx; |
||||
|
height: 78rpx; |
||||
|
background: #74A5AA; |
||||
|
border-radius: 40rpx; |
||||
|
text-align: center; |
||||
|
line-height: 78rpx; |
||||
|
font-size: 32rpx; |
||||
|
font-family: PingFangSC; |
||||
|
font-weight: 500; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.popup-content { |
||||
|
background-color: white; |
||||
|
padding: 0rpx 39rpx 51rpx 39rpx; |
||||
|
height: auto; |
||||
|
border-radius: 20rpx 20rpx 0 0; |
||||
|
|
||||
|
.bottom-productImg { |
||||
|
display: flex; |
||||
|
margin-bottom: 23rpx; |
||||
|
img { |
||||
|
width: 218rpx; |
||||
|
height: 179rpx; |
||||
|
background: #666666; |
||||
|
border-radius: 13rpx; |
||||
|
} |
||||
|
} |
||||
|
.right-content { |
||||
|
margin: 10rpx 0 0 41rpx; |
||||
|
} |
||||
|
.bottom-productPrice { |
||||
|
font-size: 40rpx; |
||||
|
color: #FC524B; |
||||
|
|
||||
|
&:before { |
||||
|
content: "￥"; |
||||
|
font-size: 26rpx; |
||||
|
} |
||||
|
} |
||||
|
.bottom-content { |
||||
|
width: 331rpx; |
||||
|
font-size: 27rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #666666; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.botProduct { |
||||
|
width: 680rpx; |
||||
|
// height: 78rpx; |
||||
|
border-radius: 13rpx; |
||||
|
background-color: #EFEFEF; |
||||
|
font-size: 29rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #333333; |
||||
|
text-align: center; |
||||
|
margin-bottom: 25rpx; |
||||
|
display: inline-block; |
||||
|
position: relative; |
||||
|
padding: 10rpx 40rpx; |
||||
|
} |
||||
|
.noStore{ |
||||
|
background-color: rgba(239, 239, 239, 1); |
||||
|
color: rgba(153, 153, 153, 1); |
||||
|
} |
||||
|
.noStore-text{ |
||||
|
width: 113rpx; |
||||
|
height: 43rpx; |
||||
|
background: #C0C0C0; |
||||
|
border-radius: 7rpx 0rpx 7rpx 0rpx; |
||||
|
text-align: center; |
||||
|
line-height: 43rpx; |
||||
|
position: absolute; |
||||
|
right: -14rpx; |
||||
|
top: -20rpx; |
||||
|
font-size: 23rpx; |
||||
|
font-family: PingFangSC; |
||||
|
font-weight: 400; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.botProducts { |
||||
|
// border: 1rpx solid #00AAFF; |
||||
|
// background-color: rgba(254, 180, 25, 1); |
||||
|
background: #74A5AA; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
.buy-num { |
||||
|
font-size: 29rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #333333; |
||||
|
// border-top: 1rpx solid #CCCCCC; |
||||
|
padding: 39rpx 0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
.number-btn { |
||||
|
display: flex; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.buy-num .number-btn view { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
width: 69rpx; |
||||
|
height: 69rpx; |
||||
|
border: 1rpx solid #CCCCCC; |
||||
|
border-radius: 7rpx; |
||||
|
} |
||||
|
|
||||
|
.buy-num .number-btn>view text { |
||||
|
font-size: 46rpx; |
||||
|
} |
||||
|
|
||||
|
.buy-btn { |
||||
|
width: 670rpx; |
||||
|
height: 78rpx; |
||||
|
text-align: center; |
||||
|
line-height: 78rpx; |
||||
|
background: #74A5AA; |
||||
|
border-radius: 40rpx; |
||||
|
|
||||
|
font-size: 34rpx; |
||||
|
font-family: PingFangSC; |
||||
|
font-weight: 500; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
.btn-box { |
||||
|
width: 750rpx; |
||||
|
height: 151rpx; |
||||
|
background: #FFFFFF; |
||||
|
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6, 0, 1, 0.1); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.sp { |
||||
|
width: 100%; |
||||
|
height: 30rpx; |
||||
|
font-size: 32rpx; |
||||
|
font-family: PingFangSC; |
||||
|
font-weight: 400; |
||||
|
color: #060001; |
||||
|
line-height: 30rpx; |
||||
|
border-top: solid 2rpx #ccc; |
||||
|
margin: 60rpx 0; |
||||
|
padding-top: 30rpx; |
||||
|
} |
||||
|
.btn-post{ |
||||
|
font-weight: 500; |
||||
|
font-size: 32rpx; |
||||
|
color: #60989E; |
||||
|
line-height: 77rpx; |
||||
|
text-align: center; |
||||
|
display: flex; |
||||
|
margin-bottom: env(safe-area-inset-bottom); |
||||
|
|
||||
|
.left-btn-buy{ |
||||
|
width: 186rpx; |
||||
|
height: 77rpx; |
||||
|
color: #60989E; |
||||
|
border-radius: 39rpx 0rpx 0rpx 39rpx; |
||||
|
background: rgba(116, 165, 170, 0.3); |
||||
|
} |
||||
|
.right-btn-buy{ |
||||
|
width: 187rpx; |
||||
|
height: 77rpx; |
||||
|
background: #74A5AA; |
||||
|
border-radius: 0 39rpx 39rpx 0; |
||||
|
color: white; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.sku-box{ |
||||
|
width: 700rpx; |
||||
|
margin: 25rpx auto 0; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 20rpx; |
||||
|
.sku-item{ |
||||
|
// border-radius: 20rpx; |
||||
|
width: 100%; |
||||
|
padding: 14rpx; |
||||
|
display: flex; |
||||
|
border-bottom: 1px solid #D8D8D8; |
||||
|
.sku-content{ |
||||
|
display: flex; |
||||
|
padding-left: 16rpx; |
||||
|
flex: 1; |
||||
|
width: 1rpx; |
||||
|
} |
||||
|
image{ |
||||
|
width: 160rpx; |
||||
|
height: 160rpx; |
||||
|
border-radius: 13rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
.flex-1{ |
||||
|
font-weight: 500; |
||||
|
font-size: 29rpx; |
||||
|
color: #000000; |
||||
|
height: 160rpx; |
||||
|
padding-right: 75rpx; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.present-price{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.present-price::after{ |
||||
|
content: ''; |
||||
|
} |
||||
|
} |
||||
|
.sku-item:last-of-type{ |
||||
|
border: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.cart-box { |
||||
|
width: 100rpx; |
||||
|
height: 100rpx; |
||||
|
background: #f5f5f5; |
||||
|
position: fixed; |
||||
|
bottom: 200rpx; |
||||
|
right: 50rpx; |
||||
|
z-index: 100; |
||||
|
|
||||
|
image { |
||||
|
width: 60rpx; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
File diff suppressed because it is too large
Loading…
Reference in new issue