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