初始化
This commit is contained in:
魏啾
637
pages/mall/mallInfos.vue
Normal file
637
pages/mall/mallInfos.vue
Normal file
@@ -0,0 +1,637 @@
|
||||
<template>
|
||||
<view class="content" :style="[theme]">
|
||||
<image class="contentimage" :src="lsitform.img" mode="aspectFill"></image>
|
||||
<view class="contentbox">
|
||||
<view class="contentbox_one">
|
||||
{{lsitform.name}}
|
||||
</view>
|
||||
<view class="contentbox_tow">
|
||||
<text>¥</text>{{lsitform.price}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentboxtow">
|
||||
<view class="onecontentterewone flex-start">
|
||||
<view class="onecontenttereone_one">
|
||||
产品介绍
|
||||
</view>
|
||||
</view>
|
||||
<view class="introduction_yow" v-html="list.details">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view :style="{height:height}">
|
||||
|
||||
</view>
|
||||
<view class="fixedview flex-between">
|
||||
<view class="fixedview_letr flex-start">
|
||||
<view class="fixedview_letr_item flex-colum" @click="eeInfoindex">
|
||||
<image src="@/static/mall/s.png" mode="aspectFill"></image>
|
||||
<text>首页</text>
|
||||
</view>
|
||||
<view class="fixedview_letr_item flex-colum" @click="makePhoneCall">
|
||||
<image src="@/static/mall/k.png" mode="aspectFill"></image>
|
||||
<text>客服</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixedview_tow flex-between">
|
||||
<view class="fixedview_towone" @click="overlayshowsboxs(1)">
|
||||
加入购物车
|
||||
</view>
|
||||
<view class="fixedview_towtow" @click="overlayshowsboxs(2)">
|
||||
立即购买
|
||||
</view>
|
||||
<!-- <view class="fixedview_towtow" style="background: #ccc;">
|
||||
立即购买
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<u-overlay :show="overlayshow">
|
||||
<view class="warp" :style="[theme]">
|
||||
<view class="rect" @tap.stop>
|
||||
<view class="onerect flex-start" :style="[theme]">
|
||||
<image class="onecontentone_image" :src="lsitform.img" mode="aspectFill"></image>
|
||||
<view class="nonecontentone_view flex-colum-start">
|
||||
<text class="nonecontentone_view_one">{{lsitform.name}}</text>
|
||||
<text class="nonecontentone_view_otow">¥{{lsitform.price}}</text>
|
||||
</view>
|
||||
<view class="onerecticon" @click="overlayshow = false">
|
||||
<u-icon @click="overlayshow = false" name="close-circle-fill" color="#000000"
|
||||
size="24"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towrect" v-for="(item,n) in list.spec" :key="item.id">
|
||||
<view class="towrect_one">
|
||||
{{item.spec_name}}
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<view class="towrect_tow" v-for="(item1,index1) in item.spec_options" :key="index1"
|
||||
@click="overlayshowsbox(item1,index1,n,item)">
|
||||
<!-- <view
|
||||
:class="[item1.isShow?'towrect_towtext':'towrect_towtexts',subIndex[index] == index1?'productActive':'noneActive']"> -->
|
||||
<view
|
||||
:class="[n == 1 && item1.isShow ?'noneActive':'',subIndex[n] == index1?'towrect_towtext':'towrect_towtexts']">
|
||||
|
||||
{{item1.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="thererect flex-between">
|
||||
<view class="thererect_one">
|
||||
购买数量
|
||||
</view>
|
||||
<view class="thererect_tow">
|
||||
<u-number-box v-model="numberbox" :min="1" button-size="24" color="#ffffff"
|
||||
:bgColor="theme.cartpieces" iconStyle="color: #fff" integer></u-number-box>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="fuorrect flex-between">
|
||||
<view class="fuorrect_one">
|
||||
合计
|
||||
</view>
|
||||
<view class="fuorrect_tow">
|
||||
¥{{list.price}}
|
||||
</view>
|
||||
</view> -->
|
||||
<view v-if="!itemuptodate" class="fvirect flex-center" @click="requestSubscribeMessage">
|
||||
确定
|
||||
</view>
|
||||
<view v-else class="fvirect flex-center" style="background:rgb(249, 249, 249);color: #333;">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-overlay>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bottombbar from '@/components/bottombbar.vue'
|
||||
export default {
|
||||
components: {
|
||||
bottombbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
goods_id: '',
|
||||
overlayshow: false,
|
||||
towrecttowclass: 0,
|
||||
numberbox: 1,
|
||||
list: {},
|
||||
height: '',
|
||||
lsitform: {},
|
||||
specid: [],
|
||||
itemuptodate: false,
|
||||
selectArr: [], //存放被选中的值
|
||||
shopItemInfo: {}, //存放要和选中的值进行匹配的数据
|
||||
subIndex: [], //是否选中 因为不确定是多规格还是单规格，所以这里定义数组来判断
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
onLoad(e) {
|
||||
this.goods_id = e.id
|
||||
this.shoppingindexgoodsgoodsdetail()
|
||||
},
|
||||
onShow() {},
|
||||
mounted() {
|
||||
//#ifdef MP-WEIXIN || H5
|
||||
var query = uni.createSelectorQuery().in(this).select('.fixedview')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.height = (ele.height) + "px";
|
||||
that = null;
|
||||
}
|
||||
})
|
||||
}).exec();
|
||||
//#endif
|
||||
//#ifdef MP-ALIPAY
|
||||
my.createSelectorQuery().selectAll('.fixedview').boundingClientRect().exec(ele => {
|
||||
var nodeData = ele[0]
|
||||
var that = this;
|
||||
that.height = (nodeData.height) + "px";
|
||||
that = null;
|
||||
})
|
||||
//#endif
|
||||
},
|
||||
methods: {
|
||||
makePhoneCall() {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: this.list.mobile //打电话
|
||||
});
|
||||
},
|
||||
overlayshowsboxs(e) {
|
||||
this.cartshping = e
|
||||
this.overlayshow = true
|
||||
},
|
||||
async overlayshowsbox(item1, index1, index, item) {
|
||||
if (item1.isShow && index == 1) {
|
||||
uni.showToast({
|
||||
title: '库存不足',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.specid[index] != item1.id) {
|
||||
this.specid[index] = item1.id //规格id
|
||||
} else {
|
||||
this.specid[index] = '' //规格id
|
||||
}
|
||||
|
||||
if (this.selectArr[index] != item1.name) {
|
||||
this.selectArr[index] = item1.name;
|
||||
this.subIndex[index] = index1;
|
||||
} else {
|
||||
this.selectArr[index] = '';
|
||||
this.subIndex[index] = -1; //去掉选中的颜色
|
||||
}
|
||||
let res = await this.api.shoppinggoodsproductspec({
|
||||
spec: this.selectArr[0],
|
||||
goods_id: this.goods_id,
|
||||
})
|
||||
if (res) {
|
||||
this.shopItemInfo = res
|
||||
console.log(this.shopItemInfo[this.subIndex[index]])
|
||||
if (this.subIndex[index] != -1) {
|
||||
this.lsitform = this.shopItemInfo[this.subIndex[index]]
|
||||
this.lsitform.name = this.shopItemInfo[this.subIndex[index]].title_name
|
||||
}
|
||||
}
|
||||
this.checkItem();
|
||||
},
|
||||
checkItem() {
|
||||
var option = this.list.spec;
|
||||
var result = []; //定义数组储存被选中的值
|
||||
for (var i in option) {
|
||||
result[i] = this.selectArr[i] ? this.selectArr[i] : '';
|
||||
}
|
||||
for (var i in option) {
|
||||
var last = result[i]; //把选中的值存放到字符串last去
|
||||
for (var k in option[i].spec_options) {
|
||||
result[i] = option[i].spec_options[k].name; //赋值，存在直接覆盖，不存在往里面添加name值
|
||||
option[i].spec_options[k].isShow = this.isMay(k); //在数据里面添加字段isShow来判断是否可以选择
|
||||
}
|
||||
result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时被覆盖
|
||||
}
|
||||
// if (this.shopItemInfo[result]) {
|
||||
// console.log(this.shopItemInfo[result])
|
||||
// // this.stock = this.shopItemInfo[result].stock || ''
|
||||
// }
|
||||
try {
|
||||
this.itemuptodate = this.list.spec[1].spec_options[this.subIndex[1]].isShow //最新的
|
||||
console.log(this.itemuptodate)
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
this.$forceUpdate(); //重绘
|
||||
},
|
||||
isMay(result) {
|
||||
let res = ''
|
||||
try {
|
||||
res = this.shopItemInfo[result].stock == 0 ? true : false
|
||||
} catch (e) {
|
||||
res = false
|
||||
}
|
||||
return res; //匹配选中的数据的库存，若不为空返回true反之返回false
|
||||
},
|
||||
async requestSubscribeMessage() {
|
||||
if (this.itemuptodate) {
|
||||
uni.showToast({
|
||||
title: '暂无库存',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.selectArr[0] == '' || this.selectArr[1] == '' || this.selectArr.length == 0) {
|
||||
uni.showToast({
|
||||
title: '请选择合法规格',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
console.log(this.specid, this.selectArr)
|
||||
if (this.cartshping == 1) {
|
||||
this.$u.debounce(this.shoppingindexgoodindexsaddcar(), 200);
|
||||
} else {
|
||||
uni.pro.navigateTo('mall/confirm', {
|
||||
type: 2, // 1购物车 2商品详情页
|
||||
goods_id: this.goods_id, //商品ID 商品详情页来源时必填
|
||||
car_id: '', //购物车ID 1,2 购物车来源时必填
|
||||
number: this.numberbox, //商品详情页来源时必填
|
||||
spec: this.selectArr.toString(), //规格 商品详情页来源时必填
|
||||
address_id: '', //地址ID 可以为空（为空时返回默认地址）
|
||||
})
|
||||
}
|
||||
},
|
||||
async shoppingindexgoodindexsaddcar() {
|
||||
let res = await this.api.shoppingindexgoodindexsaddcar({
|
||||
number: this.numberbox,
|
||||
goods_id: this.goods_id,
|
||||
spec: this.selectArr.toString(), //规格 商品详情页来源时必填
|
||||
})
|
||||
if (res == 1) {
|
||||
this.overlayshow = false
|
||||
console.log(res)
|
||||
uni.showToast({
|
||||
title: '添加购物车成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
eeInfoindex() { //去首页
|
||||
uni.pro.navigateTo('mall/index')
|
||||
},
|
||||
async shoppingindexgoodsgoodsdetail() {
|
||||
let res = await this.api.shoppingindexgoodsgoodsdetail({
|
||||
goods_id: this.goods_id
|
||||
})
|
||||
this.list = res
|
||||
this.lsitform = res.spec[0]
|
||||
this.lsitform.name = res.spec[0].title
|
||||
this.lsitform.img = res.host_img
|
||||
this.checkItem()
|
||||
this.list.details = res.details.replace(/\<img/g, '<img style="max-width:100%;height:auto" ');
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
|
||||
.fixedview {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.fixedview_letr {
|
||||
.fixedview_letr_item:nth-child(1) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fixedview_letr_item {
|
||||
margin-left: 32rpx;
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-top: 8rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_one {
|
||||
.fixedview_oneone {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fixedview_onetow {
|
||||
font-size: 44rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #F45C4C;
|
||||
font-weight: bold;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_tow {
|
||||
flex: auto;
|
||||
padding-left: 24rpx;
|
||||
|
||||
.fixedview_towone {
|
||||
width: 50%;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: var(--cart-text-color);
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
text-align: center;
|
||||
border-radius: 50rpx 0 0 50rpx;
|
||||
background: var(--cart-background-color);
|
||||
}
|
||||
|
||||
.fixedview_towtow {
|
||||
width: 50%;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: var(--cart-text-color);
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
text-align: center;
|
||||
border-radius: 0 50rpx 50rpx 0;
|
||||
background: var(--cartbuy-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.warp {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
.rect {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 60rpx 60rpx 0px 0px;
|
||||
padding: 48rpx 32rpx 32rpx 32rpx;
|
||||
|
||||
.onerect {
|
||||
position: relative;
|
||||
padding-bottom: 34rpx;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
|
||||
image {
|
||||
width: 124rpx;
|
||||
height: 124rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.nonecontentone_view {
|
||||
|
||||
margin-left: 16rpx;
|
||||
|
||||
.nonecontentone_view_one {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.nonecontentone_view_otow {
|
||||
margin-top: 10rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.onerecticon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.towrect {
|
||||
padding-bottom: 34rpx;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
padding-top: 34rpx;
|
||||
|
||||
.towrect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.towrect_tow {
|
||||
margin-top: 16rpx;
|
||||
margin-left: 10rpx;
|
||||
|
||||
.noneActive {
|
||||
background-color: #ccc;
|
||||
opacity: 0.4;
|
||||
color: #000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.towrect_towtext {
|
||||
width: 100%;
|
||||
background: var(--specbackground-color);
|
||||
border-radius: 8rpx;
|
||||
border: 1rpx solid var(--bg-color-button);
|
||||
padding: 8rpx 26rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: var(--spec-text-color);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.towrect_towtexts {
|
||||
width: 100%;
|
||||
background: #F7F7F7;
|
||||
border-radius: 8rpx;
|
||||
padding: 8rpx 26rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.thererect {
|
||||
padding: 34rpx 0;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
border-top: 1rpx solid #F7F7F7;
|
||||
|
||||
.thererect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.thererect_tow {}
|
||||
}
|
||||
|
||||
.fuorrect {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.fuorrect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.fuorrect_tow {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.fvirect {
|
||||
margin-top: 200rpx;
|
||||
padding: 16rpx;
|
||||
text-align: center;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 40rpx;
|
||||
font-size: 36rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.contentimage {
|
||||
width: 100%;
|
||||
height: 528rpx;
|
||||
}
|
||||
|
||||
.contentbox {
|
||||
padding: 28rpx 32rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
|
||||
.contentbox_one {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.contentbox_tow {
|
||||
margin-top: 12rpx;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
font-size: 34rpx;
|
||||
font-family: SourceHanSansCN-Bold-,
|
||||
SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #FC5F69;
|
||||
}
|
||||
}
|
||||
|
||||
.contentboxtow {
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
padding: 28rpx 32rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.onecontentterewone::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4rpx;
|
||||
height: 24rpx;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.onecontentterewone {
|
||||
.onecontenttereone_one {
|
||||
margin-left: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
|
||||
text {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.introduction_yow {
|
||||
margin-top: 18rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1A1A1A;
|
||||
width: 100%;
|
||||
|
||||
/deep/ [alt] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ p {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user