1012 lines
28 KiB
Vue
1012 lines
28 KiB
Vue
<template>
|
||
<view class="pages-store">
|
||
<fixed :zIndex="99">
|
||
<view class="shop-store-info b-1px-b" v-if="storeInfo.id">
|
||
<uni-nav-bar :fixed="false" :shadow="false" :statusBar="true" color="#fff" backgroundColor="none"
|
||
leftIcon="icon-left" title="店铺">
|
||
</uni-nav-bar>
|
||
<image mode="aspectFill" lazy-load class="common-bg abs"
|
||
:style="{height: `${configInfo.navBarHeight + 104}px`}" src="https://lbqny.migugu.com/admin/farm/bg-cash.png">
|
||
</image>
|
||
<view class="common-top-img"></view>
|
||
<view class="store-info rel fill-base">
|
||
<view class="info-box abs">
|
||
<view @tap.stop="$util.goUrl({url:`/shop/pages/choose-store`})"
|
||
class="farm-item rel fill-base ml-md mr-md pd-lg box-shadow radius-24">
|
||
<view class="more-btn abs flex-center">
|
||
<view class="flex-y-baseline" :style="{color:primaryColor}">
|
||
<view>切换店铺</view>
|
||
<i class="iconfont icon-qiehuan"></i>
|
||
</view>
|
||
</view>
|
||
<view class="flex-warp">
|
||
<image mode="aspectFill" lazy-load class="cover box-shadow radius-24"
|
||
:src="storeInfo.cover">
|
||
</image>
|
||
<view class="flex-1 ml-lg">
|
||
<view class="max-title f-title c-title mt-sm mb-sm ellipsis">
|
||
{{storeInfo.title}}
|
||
</view>
|
||
<view class="store-desc f-caption c-caption ellipsis-2">
|
||
<text decode="emsp" style="word-break:break-all;">{{storeInfo.desc}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="pd-md">
|
||
<search @input="toSearch" type="input" textAlign="left" placeholder="搜索商品名称" :padding="0"
|
||
:radius="35">
|
||
</search>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</fixed>
|
||
<scroll-view scroll-y="true" :scroll-into-view="changeCate" :scroll-with-animation="true" class="cate-list fix"
|
||
:style="{top:`${shopHeight}px`}" v-if="cateList.length > 0">
|
||
<block v-for="(item,index) in cateList" :key="index">
|
||
<view @tap.stop="tabChange($event,index)" data-key="changeCate" data-type="cate" :data-id="item.id"
|
||
:id="['changeCate' + index]" class="cate-item flex-center f-desc text-center"
|
||
:class="[{'cur': cateInd == index},{'c-desc':cateInd!=index}]"
|
||
:style="{color:cateInd==index?primaryColor:''}">
|
||
{{item.title}}
|
||
</view>
|
||
</block>
|
||
<view class="space-pay pt-md pb-md" v-if="shopCarList.car_count > 0">
|
||
<view class="pay-item"></view>
|
||
</view>
|
||
</scroll-view>
|
||
<view :style="{height:`${shopHeight}px`}" v-if="storeInfo.id"></view>
|
||
<view class="goods-list rel" :style="{minHeight:`${shopHeight}px`}" v-if="cateList.length > 0">
|
||
<view @tap.stop="getGoodsSpec(index)" class="item-child flex-center ml-md mr-lg pt-lg pb-lg"
|
||
:class="[{'b-1px-t':index!=0}]" v-for="(item,index) in list.data" :key="index">
|
||
<view @tap.stop="goDetail(index)" class="rel">
|
||
<image mode="aspectFill" lazy-load class="goods-img radius-16" :src="item.cover"></image>
|
||
<view class="sell-out-info flex-center abs radius-16" v-if="item.all_stock < 1">
|
||
<image mode="aspectFill" lazy-load class="sell-out-img"
|
||
:src="`/static/image/shop/sell_out.png`"></image>
|
||
</view>
|
||
</view>
|
||
<view class="flex-1 ml-md">
|
||
<view class="goods-max f-title c-title text-bold ellipsis">{{item.goods_name}}</view>
|
||
<view class="goods-max f-caption c-caption ellipsis" style="height: 36rpx;">库存：{{item.all_stock}}
|
||
</view>
|
||
<view class="flex-between mt-sm">
|
||
<view class="f-caption c-caption">
|
||
<view class="flex-y-baseline c-warning">¥<view class="f-title text-bold">
|
||
{{item.show_price}}
|
||
</view>
|
||
<view class="f-caption c-caption text-delete ml-sm">¥{{item.show_init_price}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="add-remove-item" v-if="item.all_stock>0">
|
||
<i class="iconfont icon-add-circle" :style="{color:primaryColor}"></i>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<block v-if="cateList.length > 0">
|
||
<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading"
|
||
v-if="loading">
|
||
</load-more>
|
||
<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
|
||
</block>
|
||
</view>
|
||
<block v-if="shopCarList.car_count > 0">
|
||
<view class="space-pay pt-md pb-md">
|
||
<view class="pay-item"></view>
|
||
</view>
|
||
<view class="store-pay-info pt-md pb-md fill-base fix">
|
||
<view @tap.stop="$refs.show_car_item.open()" class="flex-between pay-info ml-lg mr-lg fill-base">
|
||
<view class="car-img-info rel pr-md">
|
||
<image mode="aspectFill" lazy-load class="car-img abs" :src="`/static/image/shop/cart.png`">
|
||
</image>
|
||
<view class="car-num flex-center fill-warning c-base f-icontext abs"
|
||
:style="{width: shopCarList.car_count<10 ? '30rpx' : '50rpx'}">{{shopCarList.car_count}}
|
||
</view>
|
||
</view>
|
||
<view class="flex-y-baseline flex-1 ml-sm f-paragraph c-title" style="line-height: 35rpx;">
|
||
合计：
|
||
<view class="f-title c-warning text-bold">
|
||
¥{{shopCarList.car_price}}
|
||
</view>
|
||
</view>
|
||
<view @tap.stop="goOrder" class="store-pay-btn flex-center f-title c-base"
|
||
:style="{background:primaryColor,opacity: shopCarList.car_price*1 < storeInfo.min_price*1-0.01 ? 0.5 : 1}">
|
||
去结算</view>
|
||
</view>
|
||
<view class="space-safe"></view>
|
||
</view>
|
||
</block>
|
||
|
||
|
||
<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1&&cateList.length == 0">
|
||
</abnor>
|
||
|
||
<!-- 选择规格 -->
|
||
<uni-popup ref="show_spe_item" type="bottom">
|
||
<view @touchmove.stop.prevent class="popup-choose-spe f-paragraph c-desc fill-base radius-top-34">
|
||
<i @tap.stop="$refs.show_spe_item.close()" class="iconfont icon-close c-title abs"></i>
|
||
<view class="space-lg"></view>
|
||
<view class="flex-center pd-lg">
|
||
<image mode="aspectFill" class="avatar radius-16" :src="speImg || detail.cover"></image>
|
||
<view class="flex-1 ml-lg f-desc c-warning">
|
||
<view :class="[{'flex-y-baseline':currentSpecs.integral_atv.price*1==0}]"
|
||
v-if="currentSpecs.id && (currentSpecs.kill_atv.id || currentSpecs.integral_atv.id)">
|
||
<view class="flex-y-center c-warning" v-if="currentSpecs.kill_atv.id">
|
||
秒杀价<view class="flex-y-baseline ml-sm">¥<view class="f-lg-title">
|
||
{{currentSpecs.kill_atv.price}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="f-title c-warning" v-else>
|
||
{{currentSpecs.integral_atv.price*1>0?`${currentSpecs.integral_atv.integral}积分+${currentSpecs.integral_atv.price}元`:`${currentSpecs.integral_atv.integral}积分`}}
|
||
</view>
|
||
<view class="f-caption c-caption"
|
||
:class="[{'ml-sm text-delete':currentSpecs.integral_atv.price*1==0}]">
|
||
商城价 ¥{{currentSpecs.price}}
|
||
</view>
|
||
</view>
|
||
<view class="flex-y-baseline" v-else>
|
||
¥<view class="f-lg-title">{{currentSpecs.id ?currentSpecs.price:detail.show_price}}</view>
|
||
<view class="c-caption text-delete ml-sm">
|
||
¥{{currentSpecs.id ?currentSpecs.original_price:detail.show_init_price}} </view>
|
||
</view>
|
||
<view class="f-caption c-title mt-sm">库存：{{currentSpecs.id ? currentSpecs.stock : 0}}</view>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y class="spe-list">
|
||
<view class="pd-lg" :class="[{'b-1px-t':index!=0}]" v-for="(item,index) in detail.spe_text"
|
||
:key="index">
|
||
<view class="f-desc c-title text-bold">{{item.title}}</view>
|
||
<view class="flex-warp">
|
||
<view @tap.stop="skuClick(aitem, index, aindex)"
|
||
class="spe-item flex-center f-icontext c-title mt-md mb-sm mr-lg"
|
||
:style="{borderColor:!aitem.is_show ? '#999' : subIndex[index] == aindex?primaryColor:'',background:!aitem.is_show ? '#999' : subIndex[index] == aindex?'#EFEFFF':'',color:!aitem.is_show ? '#fff' :subIndex[index] == aindex?primaryColor:''}"
|
||
v-for="(aitem,aindex) in item.cate" :key="aindex">
|
||
<image mode="aspectFill" class="spe-img mr-sm radius-4" :src="aitem.image"
|
||
v-if="aitem.is_img === 1 && aitem.image"></image>
|
||
<view style="max-width: 510rpx;">{{aitem.title}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="flex-between pd-lg b-1px-t" style="height: 130rpx;">
|
||
<view class="f-desc c-title">购买数量</view>
|
||
<view class="add-remove-item flex-center" v-if="carIsHave.isHave">
|
||
<i @tap.stop="changeNum(-1)" class="iconfont icon-remove-circle c-caption"></i>
|
||
<view class="number flex-center f-desc pl-sm pr-sm">{{currentNum || 0}}</view>
|
||
<i @tap.stop="changeNum(1)" class="iconfont icon-add-circle" :style="{color:primaryColor}"></i>
|
||
</view>
|
||
<view @tap="toAddCar" class="add-car-btn flex-y-center c-base pl-lg pr-lg radius-16"
|
||
:style="{background:primaryColor}" v-else><i class="iconfont icon-tianjia mr-sm"></i> 加入购物车
|
||
</view>
|
||
</view>
|
||
<view class="space-safe"></view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<!-- 购物车 -->
|
||
<uni-popup ref="show_car_item" type="bottom">
|
||
<view class="popup-show-car fill-base">
|
||
<view class="flex-between b-1px-b pd-lg">
|
||
<view></view>
|
||
<view @tap.stop="toDelCar" class="flex-y-baseline f-paragraph c-caption"><i
|
||
class="iconfont icon-del mr-sm"></i>清空购物车</view>
|
||
</view>
|
||
<scroll-view scroll-y @touchmove.stop.prevent class="car-info">
|
||
<view class="item-child mb-md ml-sm mr-sm pt-lg pl-lg pr-lg fill-base radius-24"
|
||
:class="[{'mt-md':index==0}]" v-for="(item,index) in shopCarList.list" :key="index">
|
||
<view class="flex-y-center mb-lg">
|
||
<i class="iconfont icon-dianpu mr-sm"></i>
|
||
<view class="f-title c-title text-bold ellipsis">{{item.farmer_info.title}}</view>
|
||
<!-- <i class="iconfont icon-right"></i> -->
|
||
</view>
|
||
<view @tap.stop="toUpdateStatus(index,aindex)" class="flex-warp pb-lg b-1px-b"
|
||
:class="[{'pt-lg':aindex!=0}]" v-for="(aitem,aindex) in item.goods_list" :key="aindex">
|
||
<i class="iconfont flex-y-center mr-md"
|
||
:class="[{'icon-xuanze':!aitem.status},{'icon-xuanze-fill':aitem.status}]"
|
||
:style="{color:aitem.status?primaryColor:''}"></i>
|
||
<image mode="aspectFill" lazy-load class="goods-img radius-16" :src="aitem.cover">
|
||
</image>
|
||
<view class="flex-1 ml-md">
|
||
<view class="goods-title f-title c-title text-bold ellipsis">
|
||
{{aitem.goods_name}}
|
||
</view>
|
||
<view class="flex-between mt-sm">
|
||
<view class="goods-spe pl-sm pr-sm f-caption c-paragraph ellipsis radius-4">
|
||
{{aitem.spe_name}}
|
||
</view>
|
||
<view class="flex-1"></view>
|
||
</view>
|
||
<view class="f-desc c-warning mt-sm" v-if="aitem.integral_id">
|
||
{{aitem.i_price*1>0?`${aitem.integral}积分+${aitem.i_price}元`:`${aitem.integral}积分`}}
|
||
</view>
|
||
<view class="flex-between" :class="[{'mt-md':!aitem.integral_id}]">
|
||
<view class="flex-y-baseline f-caption c-warning">
|
||
<view class="f-caption c-caption mr-sm" v-if="aitem.integral_id">商城价</view>
|
||
¥<view class="f-title text-bold"> {{aitem.price}} </view>
|
||
</view>
|
||
<view class="flex-warp">
|
||
<view class="add-remove-item flex-center">
|
||
<i @tap.stop="toUpdateCar(aitem.farmer_id,aitem.id,aitem.spe_id,-1)"
|
||
class="iconfont icon-remove-circle c-caption"></i>
|
||
<view class="number flex-center f-desc pl-sm pr-sm">{{aitem.goods_num}}
|
||
</view>
|
||
<i @tap.stop="toUpdateCar(aitem.farmer_id,aitem.goods_id,aitem.spe_id,1)"
|
||
class="iconfont icon-add-circle" :style="{color:primaryColor}"></i>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view @tap.stop="goOrder" class="store-pay-info pt-md pb-md fill-base">
|
||
<view class="flex-between pay-info ml-lg mr-lg fill-base">
|
||
<view class="car-img-info rel pr-md">
|
||
<image mode="aspectFill" lazy-load class="car-img abs" :src="`/static/image/shop/cart.png`">
|
||
</image>
|
||
<view class="car-num flex-center fill-warning c-base f-icontext abs"
|
||
:style="{width: shopCarList.car_count<10 ? '30rpx' : '50rpx'}">{{shopCarList.car_count}}
|
||
</view>
|
||
</view>
|
||
<view class="flex-y-baseline flex-1 ml-sm f-paragraph c-title" style="line-height: 35rpx;">
|
||
合计：
|
||
<view class="f-title c-warning text-bold">
|
||
¥{{shopCarList.car_price}}
|
||
</view>
|
||
</view>
|
||
<view class="store-pay-btn flex-center f-title c-base"
|
||
:style="{background:primaryColor,opacity: shopCarList.car_price*1 < storeInfo.min_price*1-0.01 ? 0.5 : 1}">
|
||
去结算</view>
|
||
</view>
|
||
<view class="space-safe"></view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapState,
|
||
mapActions,
|
||
mapMutations
|
||
} from "vuex"
|
||
export default {
|
||
components: {},
|
||
data() {
|
||
return {
|
||
options: {},
|
||
storeInfo: {},
|
||
cateList: [],
|
||
cateInd: 0,
|
||
cateId: 0,
|
||
changeCate: 'changeCate0',
|
||
shopHeight: 0,
|
||
param: {
|
||
page: 1,
|
||
cate_id: 0
|
||
},
|
||
list: {
|
||
data: []
|
||
},
|
||
loading: true,
|
||
current: 0,
|
||
goodsInd: 0,
|
||
detail: {},
|
||
speImg: '',
|
||
shopItemInfo: {}, //存放要和选中的值进行匹配的数据
|
||
selectArr: [], //存放被选中的值
|
||
subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
|
||
currentSpecs: {}, //存放最后选中的商品
|
||
currentNum: 1, //选中数量
|
||
totalPrice: 0,
|
||
carIsHave: {
|
||
id: 0,
|
||
isHave: false,
|
||
},
|
||
lockTap: false
|
||
}
|
||
},
|
||
computed: mapState({
|
||
primaryColor: state => state.config.configInfo.primaryColor,
|
||
subColor: state => state.config.configInfo.subColor,
|
||
configInfo: state => state.config.configInfo,
|
||
userInfo: state => state.user.userInfo,
|
||
shopCarList: state => state.order.shopCarList,
|
||
}),
|
||
async onLoad(options) {
|
||
this.$util.showLoading()
|
||
this.options = options
|
||
await this.initIndex()
|
||
},
|
||
onPullDownRefresh() {
|
||
// #ifndef APP-PLUS
|
||
uni.showNavigationBarLoading()
|
||
// #endif
|
||
this.initRefresh()
|
||
uni.stopPullDownRefresh()
|
||
},
|
||
onReachBottom() {
|
||
if (this.list.current_page >= this.list.last_page || this.loading) return
|
||
this.param.page = this.param.page + 1
|
||
this.loading = true
|
||
this.getList()
|
||
},
|
||
methods: {
|
||
...mapActions(['getConfigInfo', 'updateCommonOptions', 'getShopCarList']),
|
||
...mapMutations(['updateUserItem']),
|
||
async initIndex() {
|
||
this.$refs.show_spe_item.close()
|
||
this.$refs.show_car_item.close()
|
||
await Promise.all([this.getCateList(), this.getShopCarList()])
|
||
setTimeout(() => {
|
||
this.toSetResHeight()
|
||
}, 200)
|
||
},
|
||
initRefresh() {
|
||
this.param.page = 1
|
||
this.initIndex()
|
||
},
|
||
async getCateList() {
|
||
let {
|
||
id: store_id
|
||
} = this.options
|
||
let {
|
||
cate_id,
|
||
store_info
|
||
} = await this.$api.shop.goodsIndex({
|
||
store_id
|
||
})
|
||
this.storeInfo = store_info
|
||
this.cateList = cate_id
|
||
if (cate_id.length == 0) {
|
||
this.$util.hideAll()
|
||
this.loading = false
|
||
return
|
||
}
|
||
let {
|
||
cateId,
|
||
} = this
|
||
let cateInd = cate_id.findIndex(item => {
|
||
return item.id == cateId
|
||
})
|
||
cateInd = cateInd == -1 ? 0 : cateInd
|
||
this.cateInd = cateInd
|
||
this.cateId = cate_id[cateInd].id
|
||
this.getList()
|
||
},
|
||
toSearch(val) {
|
||
this.loading = true
|
||
this.param.page = 1
|
||
this.param.goods_name = val
|
||
this.getList()
|
||
},
|
||
async getList() {
|
||
let {
|
||
list: oldList,
|
||
cateId: cate_id,
|
||
} = this
|
||
let {
|
||
id: store_id
|
||
} = this.options
|
||
let param = Object.assign({}, this.param, {
|
||
store_id,
|
||
cate_id,
|
||
})
|
||
let newList = await this.$api.shop.goodsList(param)
|
||
if (this.param.page == 1) {
|
||
this.list = newList
|
||
} else {
|
||
newList.data = oldList.data.concat(newList.data)
|
||
this.list = newList
|
||
}
|
||
this.loading = false
|
||
this.$util.hideAll()
|
||
},
|
||
async toSetResHeight() {
|
||
const query = uni.createSelectorQuery();
|
||
query.select('.shop-store-info').boundingClientRect(data => {
|
||
this.shopHeight = data.height
|
||
}).exec();
|
||
},
|
||
tabChange(e, index) {
|
||
let {
|
||
id,
|
||
type,
|
||
key
|
||
} = this.$util.getDataSet(e)
|
||
this[`${type}Ind`] = index
|
||
this[key] = `${key}${index}`
|
||
this[`${type}Id`] = id
|
||
if (type == 'cate') {
|
||
uni.pageScrollTo({
|
||
scrollTop: 0
|
||
})
|
||
this.cateId = id
|
||
}
|
||
this.param.page = 1
|
||
this.getList()
|
||
},
|
||
async getCarInfo(isCar = 2) {
|
||
await this.getShopCarList()
|
||
setTimeout(() => {
|
||
if (isCar == 1 && this.shopCarList.list.length < 1) {
|
||
this.$refs.show_car_item.close()
|
||
}
|
||
this.checkCarIsHave()
|
||
}, 500)
|
||
},
|
||
// 商品详情
|
||
async getGoodsSpec(index) {
|
||
this.current = 0
|
||
this.goodsInd = index
|
||
let {
|
||
id
|
||
} = this.list.data[index]
|
||
let data = await this.$api.shop.goodsInfo({
|
||
id
|
||
});
|
||
data.spe_price.map(item => {
|
||
item.is_show = true
|
||
})
|
||
data.spe_text.map(item => {
|
||
if (item.cate.length < 1) return
|
||
this.selectArr.push('');
|
||
this.subIndex.push(-1);
|
||
});
|
||
this.detail = data
|
||
this.speImg = ''
|
||
this.shopItemInfo = {}
|
||
this.selectArr = []
|
||
this.subIndex = []
|
||
this.currentSpecs = {}
|
||
this.checkItem(); //计算sku里面规格形成路径
|
||
this.checkInpath(-1); //传-1是为了不跳过循环
|
||
|
||
if (this.shopItemInfo.length < 1) return
|
||
let curr_spe = this.shopItemInfo[Object.keys(this.shopItemInfo)[0]]
|
||
if (!curr_spe) {
|
||
this.$util.hideAll()
|
||
return
|
||
}
|
||
this.currentSpecs = curr_spe
|
||
this.selectArr = curr_spe.spe_array_text
|
||
this.detail.spe_text.forEach((bitem, bindex) => {
|
||
if (bitem.cate.length < 1) return
|
||
bitem.cate.forEach((citem, cindex) => {
|
||
curr_spe.spe_array_text.forEach((ditem, dindex) => {
|
||
if (ditem == citem.id) {
|
||
if (citem.is_img == 1) {
|
||
this.speImg = citem.image
|
||
}
|
||
this.subIndex[dindex] = cindex
|
||
this.checkInpath(bindex)
|
||
}
|
||
})
|
||
})
|
||
})
|
||
this.$util.hideAll()
|
||
await this.checkCarIsHave()
|
||
this.$refs.show_spe_item.open()
|
||
},
|
||
skuClick(citem, index, cindex) {
|
||
if (!citem.is_show) return
|
||
let isCheck = this.selectArr[index] != citem.id
|
||
this.$set(this.selectArr, index, isCheck ? citem.id : '')
|
||
this.$set(this.subIndex, index, isCheck ? cindex : '-1')
|
||
if (citem.is_img == 1) {
|
||
this.speImg = isCheck ? citem.image : ''
|
||
}
|
||
this.checkInpath(index);
|
||
this.countBuy()
|
||
},
|
||
//循环所有属性判断哪些属性可选（当前选中的兄弟节点和已选中属性不需要循环 ）
|
||
checkInpath(clickIndex) {
|
||
for (let i = 0, len = this.detail.spe_text.length; i < len; i++) {
|
||
if (i == clickIndex) {
|
||
continue;
|
||
}
|
||
let len2 = this.detail.spe_text[i].cate.length;
|
||
for (let j = 0; j < len2; j++) {
|
||
if (this.subIndex[i] != -1 && j == this.subIndex[i]) {
|
||
continue;
|
||
}
|
||
let choosed_copy = [...this.selectArr];
|
||
this.$set(choosed_copy, i, this.detail.spe_text[i].cate[j].id);
|
||
let choosed_copy2 = choosed_copy.filter(item => item !== '' && typeof item !==
|
||
'undefined');
|
||
if (this.shopItemInfo.hasOwnProperty(choosed_copy2)) {
|
||
this.$set(this.detail.spe_text[i].cate[j], 'is_show', true);
|
||
} else {
|
||
this.$set(this.detail.spe_text[i].cate[j], 'is_show', false);
|
||
}
|
||
}
|
||
}
|
||
},
|
||
//计算可选路径
|
||
checkItem() {
|
||
let arrList = []
|
||
this.detail.spe_price.forEach(item => {
|
||
if (!item.is_show) return
|
||
if (item.stock < 1) return
|
||
arrList.push(item)
|
||
})
|
||
let result = arrList.reduce(
|
||
(arrs, items) => {
|
||
return arrs.concat(
|
||
items.spe_array_text.reduce(
|
||
(arr, item) => {
|
||
return arr.concat(
|
||
arr.map(item2 => {
|
||
//利用对象属性的唯一性实现二维数组去重
|
||
if (!this.shopItemInfo.hasOwnProperty([...item2,
|
||
item
|
||
])) {
|
||
this.shopItemInfo[[...item2, item]] = items;
|
||
}
|
||
return [...item2, item];
|
||
})
|
||
);
|
||
},
|
||
[
|
||
[]
|
||
]
|
||
)
|
||
);
|
||
},
|
||
[
|
||
[]
|
||
]
|
||
);
|
||
},
|
||
async countBuy() {
|
||
//如果全部选完
|
||
let isCheckAllSpec = this.selectArr.every(item => item != '')
|
||
this.currentSpecs = isCheckAllSpec ? this.shopItemInfo[this.selectArr] : {}
|
||
this.currentNum = 0
|
||
if (this.currentSpecs.stock >= 1) {
|
||
this.currentNum = 1
|
||
}
|
||
let {
|
||
id = 0, price
|
||
} = this.currentSpecs
|
||
this.totalPrice = id ? (price * this.currentNum).toFixed(2) : 0
|
||
await this.checkCarIsHave()
|
||
},
|
||
async checkCarIsHave() {
|
||
let isHave = false
|
||
let {
|
||
id = 0,
|
||
goods_id = 0,
|
||
cart_id = 0
|
||
} = this.currentSpecs
|
||
let {
|
||
id: store_id
|
||
} = this.options
|
||
let {
|
||
currentNum = 0
|
||
} = this
|
||
this.shopCarList.list.map(item => {
|
||
if (item.farmer_id == store_id) {
|
||
item.goods_list.map(aitem => {
|
||
if (aitem.goods_id == goods_id && aitem.spe_id == id) {
|
||
isHave = true
|
||
currentNum = aitem.goods_num
|
||
cart_id = aitem.id
|
||
}
|
||
})
|
||
}
|
||
})
|
||
let carIsHave = {
|
||
id: cart_id,
|
||
isHave,
|
||
}
|
||
console.log(carIsHave, "========carIsHave")
|
||
this.$set(this, 'carIsHave', carIsHave)
|
||
this.$set(this, 'currentNum', currentNum)
|
||
},
|
||
// 加/减数量
|
||
async changeNum(mol) {
|
||
let {
|
||
id: spe_id,
|
||
stock
|
||
} = this.currentSpecs;
|
||
if (!spe_id) {
|
||
this.$util.showToast({
|
||
title: '请选择规格'
|
||
})
|
||
return
|
||
}
|
||
let {
|
||
id: goods_id,
|
||
store
|
||
} = this.detail
|
||
let store_id = store[0]
|
||
let id = mol > 0 ? goods_id : this.carIsHave.id
|
||
await this.toUpdateCar(store_id, id, spe_id, mol, 2)
|
||
},
|
||
// 添加购物车
|
||
async toAddCar() {
|
||
let {
|
||
id: goods_id,
|
||
store
|
||
} = this.detail
|
||
let store_id = store[0]
|
||
let {
|
||
id: spe_id
|
||
} = this.currentSpecs
|
||
await this.toUpdateCar(store_id, goods_id, spe_id, 1, 2)
|
||
},
|
||
// 修改购物车数量
|
||
// id 增加数量时传商品goods_id
|
||
async toUpdateCar(store_id, id, spe_id, goods_num, isCar = 1) {
|
||
let methodModel = goods_num > 0 ? 'addCar' : 'delCar'
|
||
let param = goods_num > 0 ? {
|
||
store_id,
|
||
goods_id: id,
|
||
spe_id,
|
||
goods_num,
|
||
} : {
|
||
id,
|
||
goods_num: 1
|
||
}
|
||
if (this.lockTap) return;
|
||
this.lockTap = true;
|
||
try {
|
||
await this.$api.shop[methodModel](param)
|
||
this.lockTap = false
|
||
await this.getCarInfo(isCar)
|
||
} catch (e) {
|
||
this.lockTap = false
|
||
}
|
||
},
|
||
// 修改购物车数据选择状态
|
||
async toUpdateStatus(index, aindex) {
|
||
let {
|
||
id,
|
||
status
|
||
} = this.shopCarList.list[index].goods_list[aindex]
|
||
let param = {
|
||
id: [id],
|
||
status: status == 1 ? 0 : 1
|
||
}
|
||
if (this.lockTap) return;
|
||
this.lockTap = true;
|
||
try {
|
||
await this.$api.shop.carUpdate(param)
|
||
this.lockTap = false
|
||
await this.getShopCarList()
|
||
} catch (e) {
|
||
this.lockTap = false
|
||
}
|
||
},
|
||
// 清空购物车
|
||
async toDelCar() {
|
||
await this.$api.shop.delSomeCar()
|
||
this.$util.showToast({
|
||
title: `清空成功`
|
||
})
|
||
this.$refs.show_car_item.close()
|
||
await this.getCarInfo()
|
||
},
|
||
// 商品详情
|
||
goDetail(index) {
|
||
let {
|
||
id
|
||
} = this.list.data[index]
|
||
let url = `/shop/pages/detail?id=${id}`
|
||
this.$util.goUrl({
|
||
url
|
||
})
|
||
},
|
||
// 去结算
|
||
goOrder() {
|
||
let {
|
||
car_count
|
||
} = this.shopCarList
|
||
if (car_count < 1) {
|
||
this.$util.showToast({
|
||
title: `请选择商品`
|
||
})
|
||
return
|
||
}
|
||
this.$refs.show_car_item.close()
|
||
this.$util.goUrl({
|
||
url: `/shop/pages/order`
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #ffffff
|
||
}
|
||
|
||
.pages-store {
|
||
width: 100%;
|
||
height: 100vh;
|
||
|
||
.shop-store-info {
|
||
width: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 1;
|
||
|
||
.store-img {
|
||
height: 160rpx;
|
||
}
|
||
|
||
.store-info {
|
||
height: 186rpx;
|
||
|
||
.info-box {
|
||
top: -144rpx;
|
||
width: 100%;
|
||
|
||
.farm-item {
|
||
height: 220rpx;
|
||
|
||
.cover {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
}
|
||
|
||
.icon-dingwei,
|
||
.icon-right {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.max-title {
|
||
max-width: 460rpx;
|
||
}
|
||
|
||
.more-btn {
|
||
top: 0;
|
||
right: 0;
|
||
width: 122rpx;
|
||
height: 46rpx;
|
||
font-size: 20rpx;
|
||
background: rgba(112, 152, 64, 0.1);
|
||
border-radius: 0 25rpx 0 15rpx;
|
||
|
||
.iconfont {
|
||
font-size: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.cate-list {
|
||
width: 164rpx;
|
||
z-index: 1;
|
||
overflow-y: auto;
|
||
bottom: 0;
|
||
background: #F5F5F5;
|
||
|
||
.cate-item {
|
||
line-height: 1.3;
|
||
padding: 30rpx 10rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.cur {
|
||
background: #fff
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
.goods-list {
|
||
width: 586rpx;
|
||
margin-left: 164rpx;
|
||
z-index: 2;
|
||
overflow: hidden;
|
||
|
||
.goods-cate-scroll {
|
||
white-space: nowrap;
|
||
width: 586rpx;
|
||
height: 80rpx;
|
||
left: 164rpx;
|
||
right: 0rpx;
|
||
z-index: 3;
|
||
|
||
.item-child {
|
||
padding: 0 30rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
display: inline-block;
|
||
}
|
||
|
||
.purchase-item {
|
||
width: 40rpx;
|
||
height: 4rpx;
|
||
bottom: 0;
|
||
left: 50%;
|
||
margin-left: -20rpx;
|
||
}
|
||
}
|
||
|
||
.item-child {
|
||
.goods-img {
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
border: 1px solid rgba(238, 238, 238, 0.79);
|
||
}
|
||
|
||
.goods-max {
|
||
max-width: 332rpx;
|
||
}
|
||
|
||
.sell-out-info {
|
||
top: 1rpx;
|
||
left: 1rpx;
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
|
||
.sell-out-img {
|
||
width: 84rpx;
|
||
height: 23rpx;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
|
||
.express-self-btn {
|
||
width: 110rpx;
|
||
height: 36rpx;
|
||
font-size: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.add-car-btn {
|
||
height: 70rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
|
||
.space-pay {
|
||
.pay-item {
|
||
height: 94rpx;
|
||
margin-bottom: calc(5px + env(safe-area-inset-bottom) / 2);
|
||
}
|
||
}
|
||
|
||
.store-pay-info {
|
||
bottom: 0rpx;
|
||
z-index: 8;
|
||
|
||
.pay-info {
|
||
width: 686rpx;
|
||
height: 94rpx;
|
||
border-radius: 47rpx;
|
||
background: #fff;
|
||
box-shadow: 0px 4px 26px -10px rgba(0, 0, 0, 0.23);
|
||
|
||
.car-img-info {
|
||
width: 108rpx;
|
||
height: 94rpx;
|
||
|
||
.car-img {
|
||
width: 108rpx;
|
||
height: 108rpx;
|
||
left: 0;
|
||
bottom: 0;
|
||
}
|
||
|
||
.car-num {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
line-height: 30rpx;
|
||
border-radius: 15rpx;
|
||
right: 10rpx;
|
||
top: -18rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.store-pay-btn {
|
||
width: 210rpx;
|
||
height: 94rpx;
|
||
border-radius: 0 47rpx 47rpx 0;
|
||
}
|
||
}
|
||
|
||
|
||
.popup-choose-spe {
|
||
width: 100%;
|
||
|
||
.icon-close {
|
||
font-size: 50rpx;
|
||
top: 32rpx;
|
||
right: 32rpx;
|
||
}
|
||
|
||
.cover {
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
}
|
||
|
||
.spe-list {
|
||
max-height: 55vh;
|
||
overflow: auto;
|
||
|
||
.spe-item {
|
||
min-width: 98rpx;
|
||
min-height: 38rpx;
|
||
padding: 10rpx 15rpx;
|
||
background: #F6F6F6;
|
||
border-radius: 12rpx;
|
||
border: 1rpx solid #F6F6F6;
|
||
|
||
.spe-img {
|
||
width: 42rpx;
|
||
height: 42rpx;
|
||
}
|
||
}
|
||
|
||
.spe-item.cur {
|
||
background: #EFEFFF;
|
||
border: 1rpx solid #393A81;
|
||
}
|
||
}
|
||
|
||
.confirm-btn {
|
||
width: 500rpx;
|
||
height: 88rpx;
|
||
}
|
||
}
|
||
|
||
.popup-show-car {
|
||
border-radius: 15rpx 15rpx 0 0;
|
||
z-index: 8;
|
||
|
||
.car-info {
|
||
max-height: 65vh;
|
||
background: #EEEEEE;
|
||
|
||
.item-child {
|
||
|
||
.icon-xuanze,
|
||
.icon-xuanze-fill {
|
||
height: 172rpx;
|
||
}
|
||
|
||
.goods-img {
|
||
width: 172rpx;
|
||
height: 172rpx;
|
||
}
|
||
|
||
.goods-title {
|
||
max-width: 420rpx;
|
||
}
|
||
|
||
.goods-spe {
|
||
height: 44rpx;
|
||
line-height: 44rpx;
|
||
background: #F7F7F7;
|
||
max-width: 420rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.space-car {
|
||
height: 30rpx;
|
||
height: calc(30rpx + env(safe-area-inset-bottom) / 2);
|
||
padding-bottom: calc(5px + env(safe-area-inset-bottom) / 2);
|
||
}
|
||
}
|
||
}
|
||
</style>
|