You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
613 lines
12 KiB
613 lines
12 KiB
<template>
|
|
<view class="">
|
|
<!-- 商品主图轮播 -->
|
|
<view class="swiper-box">
|
|
<swiper circular="true" :autoplay="false" style="height: 188px;" @change="swiperChange">
|
|
<swiper-item class="fotct" v-for="(swiper,index) in swiperList" :key="index">
|
|
<image mode="heightFix" :src="swiper" @click="perImage(index,swiperList)"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="indicator">{{currentSwiper+1}}/{{swiperList.length}}</view>
|
|
</view>
|
|
|
|
<!-- 商品信息 -->
|
|
<view class="goods-container ">
|
|
<!-- 商品信息 -->
|
|
<view class="goods-message br bg-white marb10">
|
|
<view class="goods-price">
|
|
<text>¥19.9</text>
|
|
<text class="old">¥26</text>
|
|
</view>
|
|
<view class="goods-title">
|
|
<view class="goods-text">天友利乐核桃花生奶 180ml*20</view>
|
|
<view class="goods-desc">山东好花生</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 选择参数 -->
|
|
<view class="br bg-white parameter width100 " @click="showPopup(1)">
|
|
<view class="color999 " >
|
|
选择
|
|
</view>
|
|
<view class=" " >
|
|
颜色分类
|
|
</view>
|
|
<view class="icon-ymt to-right"></view>
|
|
</view>
|
|
<!-- 保障 -->
|
|
<view class="br bg-white parameter width100 " @click="showPopup(2)">
|
|
<view class="color999 " >
|
|
保障
|
|
</view>
|
|
<view class=" " >
|
|
破损包赔 · 假一赔四 · 退货运费险
|
|
</view>
|
|
<view class="icon-ymt to-right"></view>
|
|
</view>
|
|
|
|
<!--评论-->
|
|
<view class="br bg-white width100 marb10" @click="goComment">
|
|
<view class="parameter">
|
|
<view class="color999 " >
|
|
评论
|
|
</view>
|
|
<view class=" " >
|
|
|
|
</view>
|
|
<view class="icon-ymt to-right"></view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- 详情 -->
|
|
<view class="goods-desc-img br tc marb10 colorccc">
|
|
———— 商品详情 ————
|
|
</view>
|
|
<view style="font-size: 0;">
|
|
<image mode="widthFix" class="width100" v-for="(item,index) in swiperList" :key="key" :src="item"
|
|
@click="perImage(index,swiperList)">
|
|
</image>
|
|
</view>
|
|
<noMore></noMore>
|
|
</view>
|
|
|
|
<!-- 底部购物车 -->
|
|
<view class="uni-container">
|
|
<view class="goods-carts">
|
|
<uniGoodsNav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
|
|
@buttonClick="buttonClick" />
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 选择类别 -->
|
|
<wybPopup ref="popup" type="bottom" width="500" scrollY="true" radius="6" :showCloseIcon="true">
|
|
|
|
<cart-choose :status="1" :dataList="swiperList" @close="close"></cart-choose>
|
|
</wybPopup>
|
|
|
|
<!-- 保障 -->
|
|
<wybPopup ref="popup2" type="bottom" width="500" scrollY="true" radius="6" :showCloseIcon="true">
|
|
|
|
<view class="choose-detail baozhang-detail">
|
|
|
|
<view >
|
|
<view class="baozhangTitle fontwig6 font16 mart10">
|
|
破损包退
|
|
</view>
|
|
<view class="baozhangDescDesc font13 mart10">
|
|
签收72小时之内。发现商品破损或商品变形等，保存有限证件，商家24小时内响应并退款，诚信用户享受极速退款
|
|
</view>
|
|
</view>
|
|
<view >
|
|
<view class="baozhangTitle fontwig6 font16 mart10">
|
|
假一赔四
|
|
</view>
|
|
<view class="baozhangDescDesc font13 mart10">
|
|
正品保障,假一赔四
|
|
</view>
|
|
</view>
|
|
<view >
|
|
<view class="baozhangTitle fontwig6 font16 mart10">
|
|
七天无理由退换
|
|
</view>
|
|
<view class="baozhangDescDesc font13 mart10">
|
|
满足相应条件时，消费者可申请"七天无理由退换货"
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="fcorfff baozhang-btn " @click="closeBaoZhang">
|
|
我知道了
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
</wybPopup>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import noMore from '@/pages/classify/no-more/no-more.vue'
|
|
import wybPopup from '../../../components/wyb-popup/wyb-popup.vue'
|
|
|
|
import cartChoose from '@/pages/classify/cart-choose/cart-choose.vue'
|
|
import uniGoodsNav from '@/components/uni-goods-nav/components/uni-goods-nav/uni-goods-nav.vue'
|
|
|
|
let listData=require("./data.json")
|
|
export default {
|
|
data(){
|
|
return{
|
|
//轮播主图数据
|
|
swiperList: [],
|
|
couponDesc: [],
|
|
//轮播图下标
|
|
currentSwiper: 0,
|
|
|
|
isStar:false,
|
|
|
|
// chooseIndex:0,
|
|
|
|
// chooseNumber:1,
|
|
|
|
//
|
|
options:[{
|
|
icon: 'chat',
|
|
text: '客服',
|
|
}, {
|
|
icon: 'shoucang31',
|
|
text: '收藏',
|
|
}, {
|
|
icon: 'cart',
|
|
text: '购物车',
|
|
info: 2,
|
|
color:"#646566"
|
|
}],
|
|
buttonGroup: [{
|
|
text: '加入购物车',
|
|
backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
|
|
color: '#fff'
|
|
},
|
|
{
|
|
text: '立即购买',
|
|
backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
|
|
color: '#fff'
|
|
}
|
|
],
|
|
isShowCang:false,
|
|
// scIcon:'shoucang31-select'
|
|
// scIcon:'shoucang31'
|
|
|
|
|
|
//
|
|
|
|
|
|
}
|
|
},
|
|
watch: {
|
|
isShowCang: function (n) {
|
|
if(n){
|
|
this.options[1].icon="shoucang31-select"
|
|
}else{
|
|
this.options[1].icon="shoucang31"
|
|
}
|
|
|
|
return
|
|
}
|
|
},
|
|
components:{
|
|
wybPopup,
|
|
cartChoose,
|
|
uniGoodsNav,
|
|
noMore
|
|
},
|
|
onShow(){
|
|
|
|
this.swiperList = listData.images;
|
|
this.couponDesc = listData;
|
|
|
|
// if(this.options[1].shoucang == true){
|
|
|
|
|
|
// }
|
|
|
|
// this.isStar=this.options[1].shoucang
|
|
|
|
|
|
// 判断是否收藏了该物品
|
|
|
|
|
|
// this.isShowCang?
|
|
|
|
|
|
},
|
|
methods:{
|
|
//显示弹出
|
|
showPopup(num) {
|
|
if(num == 1){
|
|
this.$refs.popup.show();
|
|
}else if(num == 2){
|
|
this.$refs.popup2.show();
|
|
}
|
|
|
|
},
|
|
//关闭选择参数
|
|
close(){
|
|
this.$refs.popup.hide();
|
|
},
|
|
//关闭保障--我知道了
|
|
closeBaoZhang(){
|
|
this.$refs.popup2.hide();
|
|
},
|
|
//查看大图
|
|
perImage(index,item) {
|
|
console.log(index,item)
|
|
// uni.previewImage({
|
|
// current: 0, //预览图片的下标
|
|
// urls: [item] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
|
|
// })
|
|
uni.previewImage({
|
|
current: Number(index), //预览图片的下标
|
|
urls: item //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
|
|
})
|
|
},
|
|
//轮播图指示器
|
|
swiperChange(event) {
|
|
this.currentSwiper = event.detail.current;
|
|
},
|
|
//点击去评论页面
|
|
goComment(){
|
|
//要判断评论条数
|
|
|
|
uni.navigateTo({
|
|
url:"../goods-comment/goods-comment?gid="+1598348
|
|
})
|
|
},
|
|
|
|
|
|
// 客服，收藏，购物车图标点击事件
|
|
onClick(e) {
|
|
|
|
|
|
// 客服
|
|
if(e.index == 0){
|
|
console.log("点击客服")
|
|
|
|
return
|
|
|
|
}
|
|
// 收藏
|
|
if(e.index == 1){
|
|
this.isShowCang = !this.isShowCang;
|
|
console.log("点击收藏")
|
|
return
|
|
|
|
}
|
|
// 购物车
|
|
if(e.index == 2){
|
|
console.log("点击去购物车")
|
|
uni.navigateTo({
|
|
url:"/pages/classify/cart/cart"
|
|
})
|
|
return
|
|
|
|
}
|
|
|
|
// uni.showToast({
|
|
// title: `点击${e.content.text}`,
|
|
// icon: 'none'
|
|
// })
|
|
},
|
|
//加入购物车，立即购买按钮点击事件
|
|
buttonClick(e) {
|
|
|
|
this.options[2].info++
|
|
|
|
// 加入购物车
|
|
if(e.index == 0){
|
|
console.log("加入购物车")
|
|
return
|
|
}
|
|
if(e.index == 1){
|
|
console.log("立即购买")
|
|
return
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
// 修改uni-goods-nav默认图标颜色
|
|
|
|
|
|
|
|
// 底部购物车
|
|
.goods-carts {
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
flex-direction: column;
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
/* #ifdef H5 */
|
|
left: var(--window-left);
|
|
right: var(--window-right);
|
|
/* #endif */
|
|
bottom: 0;
|
|
}
|
|
|
|
// 轮播图
|
|
.swiper-box {
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
swiper {
|
|
width: 100%;
|
|
|
|
swiper-item {
|
|
image {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.indicator {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0 25upx;
|
|
height: 40upx;
|
|
border-radius: 40upx;
|
|
font-size: 22upx;
|
|
position: absolute;
|
|
bottom: 20upx;
|
|
right: 20upx;
|
|
color: #fff;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
}
|
|
|
|
|
|
.tc{
|
|
text-align: center;
|
|
}
|
|
|
|
.br{
|
|
border-radius: 10rpx;
|
|
box-sizing: border-box;
|
|
padding: 20rpx;
|
|
}
|
|
.bg-white{
|
|
background-color: #fff;
|
|
}
|
|
|
|
.price-tag{
|
|
font-family:Arial;
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
//商品详情
|
|
.goods-container{
|
|
padding: 20rpx 20rpx 60px;
|
|
background-color:#F6F6F6;
|
|
}
|
|
|
|
.goods-price{
|
|
font-family:Arial;
|
|
font-weight: bold;
|
|
color: red;
|
|
font-size: 28px;
|
|
.old{
|
|
text-decoration: line-through;
|
|
color:#CCCCCC;
|
|
display: inline-block;
|
|
padding-left: 20rpx;
|
|
font-size: 20px;
|
|
}
|
|
|
|
}
|
|
|
|
.goods-title {
|
|
width: 100%;
|
|
padding: 0 10rpx 0 0;
|
|
// height: 140rpx;
|
|
|
|
}
|
|
.goods-title .goods-text {
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
font-size: 30rpx;
|
|
padding: 20rpx 0 10rpx;
|
|
}
|
|
.goods-title .goods-desc {
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
//选择参数
|
|
.parameter {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid #F6F6F6;
|
|
}
|
|
.parameter:last-of-type{
|
|
border-bottom:none
|
|
}
|
|
|
|
//popUp
|
|
.choose-detail {
|
|
position: relative;
|
|
padding: 20rpx;
|
|
//保障
|
|
&.baozhang-detail{
|
|
padding-top: 30px;
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
|
|
.baozhangTitle{
|
|
|
|
}
|
|
.baozhangDescDesc{
|
|
color: #999999;
|
|
}
|
|
.baozhang-btn{
|
|
position: fixed;
|
|
bottom: 20rpx;
|
|
width: calc(100% - 40rpx);
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
border-radius: 30rpx;
|
|
text-align: center;
|
|
background: linear-gradient(to right,#FF8E01,#FD5100);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
//选择
|
|
// .choose-top {
|
|
// display: flex;
|
|
// align-items: center;
|
|
// height: 160rpx;
|
|
// color: red;
|
|
// .choose-img {
|
|
// width: 160rpx;
|
|
// height: 160rpx;
|
|
// border-radius: 20rpx;
|
|
|
|
// }
|
|
// .choose-price {
|
|
|
|
// }
|
|
// .choose-less-price {
|
|
// display: inline-block;
|
|
// height: 40rpx;
|
|
// line-height: 40rpx;
|
|
// padding:4rpx 10rpx;
|
|
// color: white;
|
|
// background-color:#F95100 ;
|
|
// border-radius: 20rpx;
|
|
// }
|
|
// }
|
|
|
|
|
|
// .choose-bottom {
|
|
// .choose-bottom-title{
|
|
|
|
// }
|
|
// .choose-select {
|
|
// .choose-item{
|
|
// display: flex;
|
|
// align-items: center;
|
|
// height: 60rpx;
|
|
// border-radius: 20rpx;
|
|
// overflow: hidden;
|
|
// background-color:#F6F6F6;
|
|
// border:1px solid transparent;
|
|
// width: fit-content;
|
|
// .img{
|
|
// width: 60rpx;
|
|
// height: 60rpx;
|
|
// }
|
|
// }
|
|
// .choose-active{
|
|
// border-color: #F95100;
|
|
// }
|
|
// }
|
|
|
|
// .choose-num{
|
|
// display: flex;
|
|
// height: 60rpx;
|
|
// justify-content: space-between;
|
|
// align-items: center;
|
|
|
|
// .choose-change{
|
|
// width: 240rpx;
|
|
// background-color:#F4F4F4;
|
|
// height: 100%;
|
|
// border-radius: 30rpx;
|
|
// display: flex;
|
|
// .number{
|
|
// // width: 80rpx;
|
|
// height: 60rpx;
|
|
// line-height: 60rpx;
|
|
// text-align: center;
|
|
// color: #333333;
|
|
// font-size: 30rpx;
|
|
// }
|
|
// .width140{
|
|
// width: 120rpx !important;
|
|
// }
|
|
// .wid25{
|
|
// width: 60rpx !important;
|
|
// background-color:#f8f8f8 ;
|
|
// border-radius: 30rpx;
|
|
// }
|
|
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// .choose-cart{
|
|
// position: fixed;
|
|
// bottom: 0;
|
|
// width: calc(100% - 40rpx);
|
|
// padding-bottom: 20rpx;
|
|
// .choose-way{
|
|
// height: 60rpx;
|
|
// width: 100%;
|
|
// border-radius: 30rpx;
|
|
// overflow: hidden;
|
|
// display: flex;
|
|
// align-items: center;
|
|
|
|
|
|
// .way{
|
|
// width: 50%;
|
|
// height: 60rpx;
|
|
// line-height: 60rpx;
|
|
// text-align: center;
|
|
// }
|
|
|
|
// .bgcolor-ri{
|
|
// background-color: #FD5100;
|
|
// }
|
|
// .bgcolor-left{
|
|
// background-color: #FF8E01;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
}
|
|
|
|
|
|
//商品信息图片
|
|
.goods-desc-img{
|
|
|
|
}
|
|
|
|
|
|
</style> |