jiazhipeng
5 months ago
4 changed files with 3291 additions and 0 deletions
@ -0,0 +1,933 @@ |
|||
<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;top: -52rpx;"> |
|||
<view class="price-box "> |
|||
<view class="price-zan"> |
|||
<view class="price"> |
|||
<view class="present-price">{{ info.money / 100 }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="title text-overflowRows">{{ info.title }}</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> |
|||
<view class="sp-box" @click="openPop"> |
|||
<view class="sp-box-left flex-1"> |
|||
<view class="flex-shrink-0"> |
|||
选择： |
|||
</view> |
|||
<view class="flex-1"> |
|||
{{sku[productIndex].title || '暂无可选规格'}} |
|||
</view> |
|||
</view> |
|||
<uni-icons class="flex-shrink-0" style="height: 36rpx;margin-right: 20rpx;" type="right" size="18"></uni-icons> |
|||
</view> |
|||
|
|||
<view class="pro-title">产品简介</view> |
|||
<view class="notice" > |
|||
<view class="rich-text" v-html="formateRichText(info.special_content)"></view> |
|||
</view> |
|||
|
|||
<!-- <template v-if="id"> |
|||
<userReviewsVue :goodsId="id" ></userReviewsVue> |
|||
<moreGoodsVue :goodsId="id"></moreGoodsVue> |
|||
</template> --> |
|||
</view> |
|||
|
|||
<view class="btn-list" v-if="!paramData.showCart"> |
|||
<view class="left-box"> |
|||
<view class="img-box" slot="content" v-if="is_post==1"> |
|||
<uni-badge class="uni-badge-left-margin" :text="paramData.num" absolute="rightTop" :offset="[5, 5]" size="small" |
|||
:custom-style="{background:'#F7F7F7',color:'#F84A56',border:'1px solid #F84A56'}"> |
|||
<image @click.stop="showCartClick" :src="showImg('/uploads/20241104/88b88bf627a63dd000afe769d1392fb4.png')" mode="aspectFill" |
|||
style="width: 78rpx;height: 78rpx;"></image> |
|||
</uni-badge> |
|||
</view> |
|||
<button id="contact" open-type="contact" bindcontact="handleContact" session-from="sessionFrom"> |
|||
<view class="img-box"> |
|||
<image :src="showImg('/uploads/20241023/c5686c6abd8ff8370ca65e0d129566cf.png')" |
|||
mode="aspectFill"></image> |
|||
<view class="text"> |
|||
客服 |
|||
</view> |
|||
</view> |
|||
</button> |
|||
|
|||
</view> |
|||
<view class="btn-post" v-if="is_post==1"> |
|||
<view class="left-btn-buy" @click="openPop(true)">加入购物车</view> |
|||
<view class="right-btn-buy" @click="openPop(false)">立即购买</view> |
|||
|
|||
</view> |
|||
<view v-else class="btn-buy" @click="openPop(false)"> |
|||
立即购买 |
|||
</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:'#F7F7F7',color:'#F84A56',border:'1px solid #F84A56'}"> |
|||
<image @click.stop="showCartClick" :src="showImg('/uploads/20241104/88b88bf627a63dd000afe769d1392fb4.png')" mode="aspectFill" |
|||
style="width: 78rpx;height: 78rpx;"></image> |
|||
</uni-badge> |
|||
</view> |
|||
<view class="bottom-price"> |
|||
￥ |
|||
<view class="bottom-price-yuan">{{paramData.iNum}}</view> |
|||
<view>.{{paramData.fNum}}</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view class="btn-buy" @click="goCartOrder"> |
|||
提交订单 |
|||
</view> |
|||
</view> |
|||
|
|||
<cartDataVue ref="cartDataVueRef" :paramData="paramData" @changeParamData="changeParamData" :key="new Date().getTime()"></cartDataVue> |
|||
|
|||
<uni-popup ref="popup" type="bottom" @change="changPopShow" 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','text-overflow',{'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="order"> |
|||
下一步 |
|||
</view> |
|||
</view> --> |
|||
</uni-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import userReviewsVue from '../../compoents/userReviews.vue'; |
|||
import moreGoodsVue from '../../compoents/moreGoods.vue' |
|||
import cartDataVue from '../../compoents/cartData.vue' |
|||
export default { |
|||
components: {cartDataVue,userReviewsVue,moreGoodsVue}, |
|||
data() { |
|||
return { |
|||
id: null, |
|||
info: null, |
|||
sku: [], |
|||
productIndex: 0, |
|||
|
|||
is_post: "2", |
|||
|
|||
isCollect: false, |
|||
showLength: 0, |
|||
buyNum: 1, |
|||
popShow: false, |
|||
paramData: {allPrice: 0,iNum:0, fNum:'00', showCart: false, num: 0}, |
|||
}; |
|||
}, |
|||
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; |
|||
|
|||
let param = { |
|||
sku_id: this.info.id, |
|||
sku_name: this.info.title, |
|||
sku_price: this.info.price/100, |
|||
category_id: this.info.type_id, |
|||
category_name:this.info.type_name, |
|||
visitSource: this.getVisitSource() |
|||
} |
|||
|
|||
this.qdTracker('viewProductDetail', param) |
|||
}); |
|||
}, |
|||
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() |
|||
} 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 || "1", |
|||
// is_post: 2, |
|||
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] |
|||
if(goods.is_post!=1) { |
|||
uni.showToast({ |
|||
title: '此规格不支持加入购物车', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
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() |
|||
// this.$refs.cartDataVueRef.openPop() |
|||
} |
|||
}); |
|||
|
|||
}, |
|||
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; |
|||
} |
|||
|
|||
button { |
|||
margin: 0; |
|||
padding: 0; |
|||
outline: none; |
|||
border-radius: 0; |
|||
background-color: transparent; |
|||
line-height: inherit; |
|||
} |
|||
|
|||
button::after { |
|||
border: none; |
|||
} |
|||
|
|||
.swipe-box { |
|||
height: 400rpx; |
|||
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: 400rpx; |
|||
position: relative; |
|||
|
|||
.swiper-item { |
|||
width: 100%; |
|||
height: 400rpx; |
|||
|
|||
.item-img { |
|||
width: 750rpx; |
|||
height: 400rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.common-container{ |
|||
width: 100%; |
|||
padding: 32rpx; |
|||
} |
|||
|
|||
.pro-title{ |
|||
font-weight: bold; |
|||
font-size: 37rpx; |
|||
color: #000000; |
|||
margin: 66rpx 0 19rpx 0; |
|||
} |
|||
|
|||
.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; |
|||
|
|||
.present-price { |
|||
font-size: 42rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #C3282E; |
|||
|
|||
&:before { |
|||
content: '¥'; |
|||
display: inline-block; |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
&:after { |
|||
content: '起'; |
|||
display: inline-block; |
|||
font-size: 24rpx; |
|||
font-family: PingFangSC; |
|||
color: #8D8D8D; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.tag { |
|||
margin:24rpx 0 15rpx 0; |
|||
display: flex; |
|||
align-items: center; |
|||
flex-wrap: nowrap; |
|||
overflow-x: auto; |
|||
|
|||
.tag-item { |
|||
margin-right: 14rpx; |
|||
font-family: PingFangSC; |
|||
padding: 8rpx 16rpx; |
|||
flex-shrink: 0; |
|||
border:1px solid #515150; |
|||
border-radius: 11rpx; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #515150; |
|||
} |
|||
} |
|||
|
|||
.title { |
|||
margin-top: 20rpx; |
|||
font-family: PingFang; |
|||
font-weight: bold; |
|||
font-size: 31rpx; |
|||
color: #000000; |
|||
} |
|||
} |
|||
|
|||
.notice { |
|||
padding: 35rpx; |
|||
width: 100%; |
|||
background: #ffffff; |
|||
border-radius: 20rpx; |
|||
} |
|||
|
|||
.tab { |
|||
width: 750rpx; |
|||
height: 88rpx; |
|||
background: #ffffff; |
|||
box-shadow: 0px 1rpx 0px 0px rgba(227, 229, 232, 1); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 0 32rpx; |
|||
position: fixed; |
|||
top: 0; |
|||
|
|||
.tab-item { |
|||
height: 88rpx; |
|||
position: relative; |
|||
line-height: 88rpx; |
|||
|
|||
.tab-text { |
|||
font-size: 30rpx; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #393b3e; |
|||
} |
|||
|
|||
.act-text { |
|||
font-size: 30rpx; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #000000; |
|||
} |
|||
|
|||
.tab-line { |
|||
width: 60rpx; |
|||
height: 6rpx; |
|||
background: #08c59b; |
|||
border-radius: 3rpx; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 50%; |
|||
transform: translate(-30rpx, 0); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.more { |
|||
width: 100%; |
|||
height: 93rpx; |
|||
line-height: 93rpx; |
|||
text-align: center; |
|||
border-top: solid 1rpx rgba(227, 229, 232, 1); |
|||
font-size: 26rpx; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #4D526C; |
|||
margin-top: 50rpx; |
|||
} |
|||
|
|||
.xzPopup { |
|||
width: 750rpx; |
|||
padding: 33rpx 26rpx 20rpx; |
|||
box-sizing: border-box; |
|||
background-color: #FFFFFF; |
|||
position: relative; |
|||
max-height: 70vh; |
|||
overflow-y: auto; |
|||
|
|||
view { |
|||
padding: 0 20rpx; |
|||
box-sizing: border-box; |
|||
margin-top: 35rpx; |
|||
} |
|||
|
|||
img { |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
position: absolute; |
|||
top: 33rpx; |
|||
right: 27rpx; |
|||
} |
|||
} |
|||
|
|||
.comment { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
box-sizing: border-box; |
|||
width: 710rpx; |
|||
height: 100rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 13rpx; |
|||
margin: 0 auto; |
|||
margin-top: 20rpx; |
|||
padding: 0 20rpx; |
|||
|
|||
.comment-left { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
font-size: 36rpx; |
|||
font-family: PingFangSC; |
|||
font-weight: bold; |
|||
color: #000000; |
|||
} |
|||
} |
|||
|
|||
.btn-list { |
|||
position: fixed; |
|||
z-index: 9999; |
|||
bottom: 0; |
|||
width: 750rpx; |
|||
height: 180rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6, 0, 1, 0.1); |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 30rpx 50rpx 0 50rpx; |
|||
|
|||
.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: #F84A56; |
|||
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: 64rpx; |
|||
|
|||
image { |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
} |
|||
|
|||
.text { |
|||
font-size: 24rpx; |
|||
font-family: PingFangSC; |
|||
font-weight: 400; |
|||
color: #666666; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.btn-buy { |
|||
width: 293rpx; |
|||
height: 78rpx; |
|||
background: #C3282E; |
|||
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; |
|||
} |
|||
|
|||
.bottom-productImg 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: 320rpx; |
|||
// height: 78rpx; |
|||
border-radius: 13rpx; |
|||
background-color: #F5F5F5; |
|||
font-size: 29rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #333333; |
|||
line-height: 78rpx; |
|||
text-align: center; |
|||
margin-bottom: 25rpx; |
|||
display: inline-block; |
|||
position: relative; |
|||
padding: 0 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: #515150; |
|||
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; |
|||
} |
|||
|
|||
.buy-num .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: linear-gradient(90deg, #F84A56, #FF9834); |
|||
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; |
|||
} |
|||
|
|||
.sp-box { |
|||
width: 100%; |
|||
|
|||
background: #fff; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
border-radius: 0 0 12rpx 12rpx; |
|||
padding: 10rpx 0 30rpx; |
|||
|
|||
.sp-box-left { |
|||
display: flex; |
|||
margin-left: 38rpx; |
|||
align-items: center; |
|||
|
|||
:first-child { |
|||
font-family: PingFang; |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
color: #999999; |
|||
} |
|||
|
|||
:last-child { |
|||
width: 403rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
font-size: 31rpx; |
|||
color: #000000; |
|||
} |
|||
} |
|||
|
|||
image { |
|||
width: 16rpx; |
|||
height: 28rpx; |
|||
margin-right: 38rpx; |
|||
} |
|||
} |
|||
|
|||
.btn-post{ |
|||
font-size: 32rpx; |
|||
font-family: PingFangSC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
line-height: 77rpx; |
|||
text-align: center; |
|||
display: flex; |
|||
|
|||
.left-btn-buy{ |
|||
width: 207rpx; |
|||
height: 77rpx; |
|||
color: #C3282E; |
|||
border-radius: 39rpx 0rpx 0rpx 39rpx; |
|||
border: 1px solid #C3282E; |
|||
} |
|||
.right-btn-buy{ |
|||
width: 207rpx; |
|||
height: 77rpx; |
|||
background: #C3282E; |
|||
border-radius: 0rpx 39rpx 39rpx 0rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,253 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view :class="['item-bg',selectItem.id==item.id?'active':'']" v-for="(item,index) in list" :key="index" @click="selectPoint(item)"> |
|||
<view class="item"> |
|||
<view class="item-point-title"> |
|||
<view class="name text-overflow flex-shrink-0">{{item.extract_name}}</view> |
|||
<view class="addressStr"> |
|||
<!-- <view class="flex-shrink-0"></view> --> |
|||
<view class="text-overflowRows">地址：{{item.detail_addr}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="item-point-guide" @click.stop="goMap(item)"> |
|||
<view> |
|||
<image :src="showImg('/uploads/20241104/8ff7aa0225c9e4fb86df1a9cb229c932.png')" mode="aspectFill" class="mapPoint"></image> |
|||
</view> |
|||
<view>去这里</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="no-data" v-if="list.length==0"> |
|||
<image src="https://static.ticket.sz-trip.com/dongtai/images/user/noAddress.png" mode="aspectFill" class="no-address"></image> |
|||
<view class=""> |
|||
暂无自提点地址 |
|||
</view> |
|||
</view> |
|||
<!-- <view class="btn-bottom"> |
|||
<view class="addBox" @click.stop="confirmPoint"> |
|||
确定 |
|||
</view> |
|||
</view> --> |
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
load: false, |
|||
pending: false, |
|||
list: [], |
|||
pickupId: null, |
|||
goodsId: null, |
|||
selectItem: {}, |
|||
}; |
|||
}, |
|||
onLoad(options) { |
|||
this.pickupId = options.pickupId || null |
|||
this.goodsId = options.goodsId |
|||
}, |
|||
onShow(options) { |
|||
this.getList() |
|||
}, |
|||
|
|||
methods: { |
|||
getList() { |
|||
if (this.pending) { |
|||
return |
|||
} |
|||
this.pending = true |
|||
// this.getLocation() |
|||
let param = { |
|||
goods_id: this.goodsId, |
|||
offset: this.list.length, |
|||
limit: 10, |
|||
lon: uni.getStorageSync('location').lon || '', |
|||
lat: uni.getStorageSync('location').lat || '', |
|||
} |
|||
this.Post(param, "/api/extract/getMerchantExtractListByGoodsIdNew").then(res => { |
|||
if (res) { |
|||
this.list = [...this.list, ...res.data]; |
|||
if (res.data.length < 10) { |
|||
this.load = true; |
|||
} |
|||
if (this.pickupId && Array.isArray(this.list)) { |
|||
let selectItem = this.list.find(v=>v.id==this.pickupId) |
|||
if (selectItem) { |
|||
this.selectItem = selectItem |
|||
} |
|||
} |
|||
} |
|||
this.pending = false |
|||
}) |
|||
|
|||
|
|||
}, |
|||
|
|||
selectPoint (item) { |
|||
this.selectItem = item |
|||
// 返回上一个页面并带回selectItem |
|||
uni.$emit("updateDataByConnect", {msgType:'updatePickUpPoint',data:this.selectItem}) |
|||
uni.navigateBack() |
|||
}, |
|||
|
|||
goMap (item) { |
|||
uni.openLocation({ |
|||
latitude: Number(item.lat), |
|||
longitude: Number(item.lon), |
|||
name: item.extract_name, |
|||
address: item.detail_addr, |
|||
success: function () { |
|||
console.log('success'); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
confirmPoint () { |
|||
if(!this.selectItem.id) { |
|||
uni.showToast({icon: "none",title: "请先选择自提点"}) |
|||
return; |
|||
} |
|||
// 返回上一个页面并带回selectItem |
|||
uni.$emit("updateDataByConnect", {msgType:'updatePickUpPoint',data:this.selectItem}) |
|||
uni.navigateBack() |
|||
} |
|||
}, |
|||
|
|||
onReachBottom() { |
|||
setTimeout(() => { |
|||
if (!this.load) { |
|||
this.getList() |
|||
} |
|||
}, 1000); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
view { |
|||
box-sizing: border-box; |
|||
font-family: PingFang SC; |
|||
} |
|||
|
|||
.bg { |
|||
position: relative; |
|||
background: #F7F7F7; |
|||
min-height: 100vh; |
|||
padding-bottom: 170rpx; |
|||
} |
|||
.flex-shrink-0{ |
|||
flex-shrink: 0; |
|||
} |
|||
.item-bg{ |
|||
width: 697rpx; |
|||
height: 160rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 13rpx; |
|||
margin: 0 auto; |
|||
margin-bottom: 28rpx; |
|||
padding: 2rpx; |
|||
} |
|||
|
|||
.item { |
|||
padding: 24rpx; |
|||
padding-right: 0; |
|||
display: flex; |
|||
background: #FFFFFF; |
|||
border-radius: 13rpx; |
|||
width: 100%; |
|||
height: 100%; |
|||
.item-point-title{ |
|||
flex: 1; |
|||
width: 10rpx; |
|||
padding-right: 78rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
.item-point-guide{ |
|||
width:140rpx; |
|||
flex-shrink: 0; |
|||
border-left: 1px solid #D8D8D8; |
|||
color: #515150; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 24rpx; |
|||
} |
|||
.mapPoint{ |
|||
width: 33rpx; |
|||
height: 33rpx; |
|||
} |
|||
} |
|||
.item-bg.active{ |
|||
background: #515150; |
|||
} |
|||
.name { |
|||
display: flex; |
|||
font-size: 31rpx; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
height: 42rpx; |
|||
} |
|||
.addressStr{ |
|||
display: flex; |
|||
font-size: 27rpx; |
|||
color: #999999; |
|||
padding-top: 10rpx; |
|||
} |
|||
|
|||
.no-data { |
|||
width: 100%; |
|||
height: 100vh; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
|
|||
view:nth-child(2) { |
|||
font-size: 30rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #333333; |
|||
margin-top: 25rpx; |
|||
} |
|||
|
|||
image { |
|||
width: 160rpx; |
|||
height: 160rpx; |
|||
} |
|||
|
|||
padding-bottom: 400rpx; |
|||
} |
|||
|
|||
.btn-bottom{ |
|||
position: fixed; |
|||
bottom: 0; |
|||
width: 750rpx; |
|||
height: 150rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6, 0, 1, 0.1); |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 30rpx 50rpx 30rpx 50rpx; |
|||
|
|||
.addBox{ |
|||
margin: 0 auto; |
|||
width: 697rpx; |
|||
height: 80rpx; |
|||
background: linear-gradient(90deg, #F84A56, #FF9834); |
|||
border-radius: 40rpx; |
|||
font-size: 36rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
line-height: 80rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,752 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<span class="iconfont topLeft" @click="goBack"></span> |
|||
<img :src="showImg(headImg)" class="topImg" /> |
|||
<view class="type-container"> |
|||
<view class="send-type-container"> |
|||
<view :class="['type',type1==0?'active':'']" @click.stop="changeType('type1',0)"> |
|||
<image :src="showImg(type1==0?'/uploads/20241023/0d46c6d4ba08c7eb428770d27abf90aa.png':'/uploads/20241104/0da5535494f95dc1bd1b125f2ea14bca.png')"></image> |
|||
自提专区 |
|||
</view> |
|||
<view :class="['type',type1==1?'active':'']" @click.stop="changeType('type1',1)"> |
|||
<image :src="showImg(type1==1?'/uploads/20241023/fbc0d085d012bdad49d865c5aa85f4a9.png':'/uploads/20241104/1cd8c1aaf2d4ded7a3ead6f0396e100d.png')"></image> |
|||
邮寄专区 |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="goods-type-container"> |
|||
<view :class="['type',type2==0?'active':'']" @click.stop="changeType('type2',0)">特产</view> |
|||
<view :class="['type',type2==1?'active':'']" @click.stop="changeType('type2',1)">文创</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="box"> |
|||
<view class="item" v-for="item in list" :key="item.goods.id" @click="viewDetail(item.goods)"> |
|||
<image class="item-img" :src="showImg(item.goods.image)" mode=""></image> |
|||
<view class="content"> |
|||
<view class="title text-overflowRows">{{item.goods.title}}</view> |
|||
<view class="bottom"> |
|||
<view class="price"> |
|||
{{item.goods.money/100}} |
|||
</view> |
|||
<view class="buy" v-show="type1==0"> |
|||
立即购买 |
|||
</view> |
|||
<view class="buy-cart" v-show="type1==1" @click.stop="showOrderCart(item.goods)"> |
|||
<image :src="showImg('/uploads/20241104/0ac7eb782b73e60e3cfc8200b7934a4a.png')"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view style="height: 148rpx;width: 1rpx;" v-if="type1==1"></view> |
|||
<view class="btn-bottom" v-if="type1==1"> |
|||
<cartDataVue ref="cartDataVueRef" :paramData="paramData" @changeParamData="changeParamData" style="width: 100%;height: 100%;"> |
|||
<template class="btn-list" slot="content"> |
|||
|
|||
<view class="left-box"> |
|||
<uni-badge class="uni-badge-left-margin" :text="paramData.num" absolute="rightTop" :offset="[5, 5]" size="small" |
|||
:custom-style="{background:'#F7F7F7',color:'#C3282E',border:'1px solid #C3282E'}"> |
|||
<view class="img-box" @click.stop="showCartClick"> |
|||
<image :src="showImg('/uploads/20241104/88b88bf627a63dd000afe769d1392fb4.png')" mode="aspectFill"></image> |
|||
</view> |
|||
</uni-badge> |
|||
<view class="bottom-price"> |
|||
￥ |
|||
<view class="bottom-price-yuan">{{paramData.iNum}}</view> |
|||
<view>.{{paramData.fNum}}</view> |
|||
</view> |
|||
<view class="bottom-detail-icon" @click.stop="showCartClick"> |
|||
明细 |
|||
<view v-if="!paramData.showCart" style="transform: rotate(-90deg);"><uni-icons color="#000" type="left" size="15"></uni-icons></view> |
|||
<view v-else style="transform: rotate(90deg);"><uni-icons color="#000" type="left" size="15"></uni-icons></view> |
|||
</view> |
|||
|
|||
</view> |
|||
<view class="btn-buy" @click="goCartOrder"> |
|||
提交订单 |
|||
</view> |
|||
|
|||
</template> |
|||
</cartDataVue> |
|||
</view> |
|||
|
|||
|
|||
|
|||
<uni-popup ref="popup" type="bottom" :safe-area="true"> |
|||
<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','text-overflow',{'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="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 class="placeholder-content"> |
|||
<view style="height: 100rpx;"></view> |
|||
<view class="btn-cover"> |
|||
<view class="btn" @click.stop="order">加入购物车</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<!-- <view class="btn-box"> |
|||
<view class="buy-btn" @click="order"> |
|||
下一步 |
|||
</view> |
|||
</view> --> |
|||
</uni-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import cartDataVue from '../../compoents/cartData.vue' |
|||
export default { |
|||
components: {cartDataVue}, |
|||
data() { |
|||
return { |
|||
headImg: null, |
|||
|
|||
type1:0, |
|||
type2:0, |
|||
typeParam: { |
|||
'00':57, // 自提-特产 |
|||
'01':58, // 自提-文创 |
|||
'10':59, // 邮寄-特产 |
|||
'11':60, // 邮寄-文创 |
|||
}, |
|||
|
|||
list:[], |
|||
finished: false, |
|||
|
|||
paramData: {allPrice: 0,iNum:0, fNum:'00', showCart: false, num: 0}, |
|||
|
|||
currentGoods: {}, |
|||
sku: [], |
|||
productIndex: 0, |
|||
buyNum: 1, |
|||
cartDataVueShow: false |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.getHeadImg("techan").then(res => {this.headImg = res}) |
|||
|
|||
}, |
|||
onReady() { |
|||
this.getList() |
|||
}, |
|||
methods: { |
|||
changeType (typeName, value) { |
|||
if (this[typeName]!==value) { |
|||
this[typeName]=value |
|||
|
|||
this.list = [] |
|||
this.getList() |
|||
} |
|||
}, |
|||
|
|||
// 根据产品分类获取产品列表 |
|||
getList(){ |
|||
let typeKey = `${this.type1}${this.type2}` |
|||
let tag_id = this.typeParam[typeKey] |
|||
|
|||
this.Post({ |
|||
tag_id: tag_id, |
|||
offset: this.list.length, |
|||
limit: 10, |
|||
},'/api/tag/getGoodsByTagId').then(res => { |
|||
this.list = [...this.list, ...res.data]; |
|||
if (res.data.length < 10) { |
|||
this.finished = true |
|||
} |
|||
}) |
|||
}, |
|||
viewDetail(item) { |
|||
this.goOtherDetail(item) |
|||
if(!item.link_type) { |
|||
uni.navigateTo({ |
|||
url: '/subPackages/techan/detail?id=' + item.id |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
showCartClick () { |
|||
if (this.paramData.showCart) { |
|||
this.$refs.cartDataVueRef.closePopup() |
|||
} else { |
|||
this.$refs.cartDataVueRef.openPop() |
|||
} |
|||
}, |
|||
changeParamData (data) { |
|||
for(let key in this.paramData) { |
|||
this.paramData[key] = data[key] |
|||
} |
|||
}, |
|||
|
|||
// 购物车相关 |
|||
showOrderCart (item) { |
|||
console.log(item) |
|||
this.sku = [] |
|||
this.productIndex = 0 |
|||
this.buyNum = 1 |
|||
this.currentGoods = JSON.parse(JSON.stringify(item)) |
|||
this.getSpecificationsByGoodsId(item.id) |
|||
}, |
|||
changeProduct(item,index) { |
|||
if (item.store==0) { |
|||
uni.showToast({ |
|||
title:"库存不足！", |
|||
icon:'none' |
|||
}) |
|||
return |
|||
} |
|||
this.productIndex = index |
|||
}, |
|||
getSpecificationsByGoodsId(goods_id) { |
|||
this.Post({goods_id: goods_id},'/api/goods/getSpecificationsByGoodsId' |
|||
).then(res => { |
|||
if (res) { |
|||
this.sku = res.data; |
|||
if (!this.sku||this.sku.length<=0) { |
|||
uni.showToast({ |
|||
title:'暂无可选规格', |
|||
icon:'none' |
|||
}) |
|||
return |
|||
} |
|||
this.openPop() |
|||
} |
|||
}); |
|||
}, |
|||
//数量加减 |
|||
addNumber() { |
|||
this.buyNum += 1; |
|||
}, |
|||
delNumber() { |
|||
if (this.buyNum <= 1) { |
|||
return; |
|||
} |
|||
this.buyNum -= 1; |
|||
}, |
|||
closePopup() { |
|||
this.$refs.popup.close() |
|||
}, |
|||
openPop(){ |
|||
this.$refs.popup.open() |
|||
}, |
|||
order() { |
|||
let goods = this.sku[this.productIndex] |
|||
|
|||
if(goods.is_post!=1) { |
|||
uni.showToast({ |
|||
title: '此规格不支持加入购物车', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
goods.buyNum = this.buyNum |
|||
let goodsInfo = {goodsInfo:this.currentGoods, skuInfo: goods, isSelected: true} |
|||
|
|||
this.Post({good_id: this.currentGoods.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() |
|||
// this.$refs.cartDataVueRef.openPop() |
|||
} |
|||
}); |
|||
|
|||
}, |
|||
goCartOrder () { |
|||
this.$refs.cartDataVueRef.goCartOrder() |
|||
}, |
|||
|
|||
}, |
|||
onReachBottom() { |
|||
setTimeout(() => { |
|||
if (!this.finished) this.getList() |
|||
},1000) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
view { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.bg { |
|||
background:#F7F7F7; |
|||
min-height: 100vh; |
|||
padding-bottom: 26rpx; |
|||
} |
|||
|
|||
.topLeft { |
|||
position: absolute; |
|||
left: 26rpx; |
|||
top: 101rpx; |
|||
font-size: 40rpx; |
|||
z-index: 2; |
|||
color: white; |
|||
background: rgba(0,0,0,0.5); |
|||
border-radius: 50%; |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
text-align: center; |
|||
line-height: 60rpx; |
|||
box-sizing: border-box; |
|||
padding-right: 5rpx; |
|||
} |
|||
|
|||
.topImg { |
|||
width: 750rpx; |
|||
height: 440rpx; |
|||
} |
|||
|
|||
.box { |
|||
margin-top: 26.67rpx; |
|||
// border-radius: 20rpx 20rpx 0rpx 0rpx; |
|||
padding: 0 26.67rpx; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.item { |
|||
margin-bottom: 22rpx; |
|||
width: 335rpx; |
|||
height: 497rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(153,153,153,0.38); |
|||
border-radius: 13rpx; |
|||
} |
|||
|
|||
.item-img { |
|||
width: 100%; |
|||
height: 342rpx; |
|||
background: #87CD93; |
|||
border-radius: 13rpx 13rpx 0rpx 0rpx; |
|||
} |
|||
|
|||
.content { |
|||
height: 145rpx; |
|||
padding: 0 13rpx 13.33rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.title { |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 29rpx; |
|||
color: #000000; |
|||
width: 291rpx; |
|||
} |
|||
|
|||
.bottom { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.price { |
|||
font-size: 34.67rpx; |
|||
font-family: PingFangSC; |
|||
// font-weight: bold; |
|||
color: #C3282E; |
|||
} |
|||
.price::before { |
|||
content: '￥'; |
|||
font-size: 24rpx; |
|||
} |
|||
.price::after { |
|||
content: '起'; |
|||
font-size: 24rpx; |
|||
color: #999999; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.buy { |
|||
width: 140rpx; |
|||
height: 42rpx; |
|||
background: #C3282E; |
|||
border-radius: 21rpx; |
|||
text-align: center; |
|||
line-height: 42rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
.buy-cart{ |
|||
width: 42rpx; |
|||
height: 42rpx; |
|||
image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
.type-container{ |
|||
width: 100%; |
|||
height: 227rpx; |
|||
padding: 40rpx 26rpx 0; |
|||
background: #FFFFFF; |
|||
|
|||
.send-type-container{ |
|||
width: 100%; |
|||
height: 66rpx; |
|||
padding: 4rpx; |
|||
background: #F2F2F2; |
|||
border-radius: 13rpx; |
|||
border: 1px solid #525251; |
|||
|
|||
display: flex; |
|||
.type{ |
|||
flex: 1; |
|||
flex-shrink: 0; |
|||
text-align: center; |
|||
height: 100%; |
|||
border-radius: 13rpx; |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
color: #525251; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
image{ |
|||
width: 25rpx; |
|||
height: 25rpx; |
|||
margin-right: 13rpx; |
|||
} |
|||
} |
|||
.type.active{ |
|||
color: #FFFFFF; |
|||
background: #525251; |
|||
} |
|||
} |
|||
|
|||
.goods-type-container{ |
|||
width: 100%; |
|||
margin-top: 64rpx; |
|||
height: 55rpx; |
|||
display: flex; |
|||
.type { |
|||
flex: 1; |
|||
flex-shrink: 0; |
|||
height: 100%; |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
color: #666666; |
|||
display: flex; |
|||
justify-content: center; |
|||
position: relative; |
|||
} |
|||
.type.active{ |
|||
color: #000000; |
|||
font-weight: bold; |
|||
} |
|||
.type.active::after{ |
|||
content: ''; |
|||
width: 67rpx; |
|||
height: 5rpx; |
|||
background: #525251; |
|||
border-radius: 3rpx; |
|||
position: absolute; |
|||
bottom: 0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.btn-list { |
|||
z-index: 99; |
|||
position: fixed; |
|||
bottom: 0; |
|||
width: 750rpx; |
|||
height: 148rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6, 0, 1, 0.1); |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 0 50rpx; |
|||
|
|||
.left-box { |
|||
display: flex; |
|||
align-items: center; |
|||
.bottom-price{ |
|||
display: flex; |
|||
align-items: baseline; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 27rpx; |
|||
color: #C3282E; |
|||
padding: 0 33rpx; |
|||
.bottom-price-yuan{ |
|||
font-size: 40rpx; |
|||
} |
|||
} |
|||
.bottom-detail-icon{ |
|||
font-size: 24rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.img-box { |
|||
image { |
|||
width: 78rpx; |
|||
height: 78rpx; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
|
|||
.btn-buy { |
|||
width: 254rpx; |
|||
height: 78rpx; |
|||
background: #C3282E; |
|||
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; |
|||
} |
|||
|
|||
.bottom-productImg img { |
|||
width: 218rpx; |
|||
height: 179rpx; |
|||
background: #666666; |
|||
border-radius: 13rpx; |
|||
} |
|||
|
|||
.right-content { |
|||
margin: 10rpx 0 0 41rpx; |
|||
} |
|||
|
|||
.bottom-productPrice { |
|||
font-size: 40rpx; |
|||
color: #C3282E; |
|||
|
|||
&:before { |
|||
content: "￥"; |
|||
font-size: 26rpx; |
|||
} |
|||
} |
|||
|
|||
.bottom-content { |
|||
width: 331rpx; |
|||
font-size: 27rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #666666; |
|||
} |
|||
|
|||
.botProduct { |
|||
width: 320rpx; |
|||
// height: 78rpx; |
|||
border-radius: 13rpx; |
|||
background-color: #F5F5F5; |
|||
font-size: 29rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #333333; |
|||
line-height: 78rpx; |
|||
text-align: center; |
|||
margin-bottom: 25rpx; |
|||
display: inline-block; |
|||
position: relative; |
|||
padding: 0 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: #525251; |
|||
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; |
|||
} |
|||
|
|||
.buy-num .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: linear-gradient(90deg, #C3282E, #FF9834); |
|||
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; |
|||
} |
|||
} |
|||
|
|||
|
|||
.placeholder-content{ |
|||
background: white; |
|||
position: relative; |
|||
.btn-cover{ |
|||
z-index: 200; |
|||
position: fixed; |
|||
bottom: 0; |
|||
width: 750rpx; |
|||
height: 148rpx; |
|||
background: #FFFFFF; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
.btn{ |
|||
width: 670rpx; |
|||
height: 78rpx; |
|||
text-align: center; |
|||
line-height: 78rpx; |
|||
background: #C3282E; |
|||
border-radius: 40rpx; |
|||
|
|||
font-size: 34rpx; |
|||
font-family: PingFangSC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue