1119 lines
28 KiB
Vue
1119 lines
28 KiB
Vue
<template>
|
|
<!-- 选规格弹窗 -->
|
|
<view>
|
|
<up-popup :show="showSku" mode="bottom" :round="10" @close="close" :zIndex="202">
|
|
<view class="sku" :class="isTabbar ? 'sku-bottom' : ''">
|
|
<view class="sku-top" :class="fontSize == 'small' ? '' : 'large'">
|
|
<image class="img" :src="viewPicUrl" @click="openPreView(viewPicUrl)" :style="{width: imgWidth + 'rpx', height: imgWidth + 'rpx'}" mode="aspectFill" />
|
|
<view class="sku-top-info">
|
|
<view class="tit" v-if="imgWidth == 200">{{skuInfo.title}}</view>
|
|
|
|
<view class="pricebox">
|
|
<!-- 会员下普通价格 -->
|
|
<view class="text1" v-if="vipOn && chooseItem.vip_price > 0 && (is_vip || (!is_vip && vip_price_show))">
|
|
<text class="icon1">￥</text>
|
|
<text>{{chooseItem.price}}</text>
|
|
</view>
|
|
|
|
<view>
|
|
<!-- 显示会员价 -->
|
|
<view v-if="vipOn && chooseItem.vip_price > 0 && (is_vip || (!is_vip && vip_price_show))" class="vip">
|
|
<!-- <text><text class="icon1">￥</text>{{chooseItem.vip_price}}</text>
|
|
<text class="vip-tag" v-if="vipOn && chooseItem.vip_price > 0 && vip_price_show">会员价</text> -->
|
|
<view class="vip-tag"><text class="txt">会员价 ￥</text>{{chooseItem.vip_price}}</view>
|
|
</view>
|
|
|
|
<!-- 显示普通价格 -->
|
|
<view v-else class="vip">
|
|
<text class="icon1">￥</text>
|
|
<text>{{chooseItem.price}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="text" v-if="show_stock === 1 || show1">剩余{{ chooseItem.stock > 0 ? chooseItem.stock : 0 }}件</view>
|
|
<view class="sel" v-if="!skus_1 || skuName">已选：{{skuName}}</view>
|
|
<view class="sel" v-if="skus_1 && !skuName">已选：{{name}}</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<scroll-view class="good_box" :class="fontSize == 'small' ? '' : 'large'" scroll-y="true" enhanced="true" @scroll="skuScroll">
|
|
<div class="sku_box" style="margin-bottom: 30rpx;">
|
|
<view class="sku-list">
|
|
<view class="sku-list-item" v-for="(item, index) in specsList" :key="item.spec_id">
|
|
<view class="sku-list-item-name">
|
|
{{item.spec_name}}
|
|
</view>
|
|
<view class="sku-list-item-tag">
|
|
<view class="tag" v-for="(i, i_index) in item.value" :key="i.id"
|
|
@click="!i.show?chooseSku(i, index, i_index) :''"
|
|
:class="choose['v'+ (index+1) +'_id'] === i.id || skus_1? 'choose' : i.show?'box':'' ">
|
|
<image :src="i.img" v-if="i.img" class="tag_img"></image>
|
|
<text>{{i.value}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="sku-num">
|
|
<view style="font-size: 28rpx;display: flex;align-items: center;">
|
|
<text>购买数量</text>
|
|
<text v-if="show_stock === 1 || show1">（最多{{ chooseItem.stock > 0 ? chooseItem.stock : 0 }}件）</text>
|
|
<view v-if="skuInfo.limit_type==2" class="box_red">限购{{skuInfo.limit}}件</view>
|
|
<view v-if="skuInfo.limit_type==1" class="box_red">{{skuInfo.start_sale_num}}件起购</view>
|
|
</view>
|
|
<up-number-box
|
|
:disabled="show"
|
|
v-model="chooseItem.num"
|
|
disabledInput
|
|
:min="skuInfo.limit_type == 1 ? parseInt(skuInfo.start_sale_num) : skuInfo.limit_type === 0 ? 1 : 1 "
|
|
:max="skuInfo.limit_type == 2 ? parseInt(skuInfo.limit) : skuInfo.limit_type === 0 ? (chooseItem.stock > 0 ? chooseItem.stock : 0) : 0"
|
|
:longPress="false"
|
|
@change="changeNum"
|
|
@overlimit="plusBtn(skuInfo.limit_type == 1 ? 0 : skuInfo.limit_type == 2 ? 1 : 2 ,(chooseItem.num || num1), skuInfo.limit)" />
|
|
</view>
|
|
<view class="sku-buy" v-if="sales > 0">
|
|
<view class="img" v-for="img in skuInfo.avatars" :key="img">
|
|
<image :src="img" class="sku-buy-img"></image>
|
|
</view>
|
|
<view class="text">已有<text class="num">{{sales}}</text>个社群好友购买</view>
|
|
</view>
|
|
</div>
|
|
|
|
<view class="edition" v-if="textModule.length != 0 && showDetail">
|
|
<view v-for="(item, index) in textModule" :key="index">
|
|
<!-- 大图 -->
|
|
<view v-if="item.type == 1" class="edition_box" @click="preViewImg(item.imgs[0])">
|
|
<view v-for="(imgs, i) in item.imgs" :key="i">
|
|
<image :src="imgs + '?x-oss-process=image/format,webp'" :lazy-load="true" :webp="true" mode="widthFix" style="height:100%;width:100%"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 小图 -->
|
|
<view class="edition_box" v-if="item.type == 2">
|
|
<view class="small_img">
|
|
<view v-for="(list, index1) in item.img" :key="index1" class="imgs" @click="getTextimg(item.img, list)">
|
|
<image :src="list + '?x-oss-process=image/format,webp'" :webp="true" class="image" :lazy-load="true"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 视频 -->
|
|
<view class="edition_box" v-if="item.type == 3">
|
|
<video :src="item.video[0]" height="100%" width="250" class="video_box" style="display: block;margin: 0 auto;"></video>
|
|
</view>
|
|
|
|
<!-- 文字 -->
|
|
<view class="edition_box text1_box" v-if="item.type == 4">
|
|
<text selectable="true" user-select="true" class="text">{{item.text}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-else-if="viewPicList.length != 0 && showDetail" class="imgbox">
|
|
<image v-for="img in viewPicList" :key="img" :src="img" class="img" mode="widthFix" :lazy-load="true"></image>
|
|
</view>
|
|
<view v-if="viewPicList.length === 0 && showDetail && mainImg.length !== 0" class="imgbox">
|
|
<image v-for="img in mainImg" :key="img" :src="img" class="img" mode="widthFix" :lazy-load="true"></image>
|
|
</view>
|
|
<view class="block" v-if="isTabbar"></view>
|
|
</scroll-view>
|
|
|
|
<view class="sku-btn2" v-if="soldStatus == 2" @click="arrivalNotice()">
|
|
<view class="btn" v-if="!remind_stock">到货提醒</view>
|
|
<view class="btn dis" v-else>取消到货提醒</view>
|
|
</view>
|
|
<template v-else>
|
|
<view class="sku-btn2" v-if="type == 1" @click="(chooseItem.stock > 0 && canBuy) ? addBtn(3) : ''">
|
|
<view class="btn" :class="(chooseItem.stock <= 0 || !canBuy) ? 'dis' : ''">
|
|
加入购物车
|
|
</view>
|
|
</view>
|
|
<view class="sku-btn2" v-else-if="type == 2" @click="(chooseItem.stock > 0 && canBuy) ? addBtn(4) : ''">
|
|
<view class="btn" :class="(chooseItem.stock <= 0 || !canBuy) ? 'dis' : ''">
|
|
加入购物车
|
|
</view>
|
|
</view>
|
|
<view class="sku-btn" v-else>
|
|
<view class="btn1" :class="canBuy ? '' : 'dis'" @click="canBuy ? addBtn(1) : ''">加入购物车</view>
|
|
<view class="btn2" :class="canBuy ? '' : 'dis'" @click="canBuy ? addBtn(2) : ''">立即购买</view>
|
|
</view>
|
|
</template>
|
|
|
|
</view>
|
|
</up-popup>
|
|
|
|
<preview-img :show="showPreview" :list="specsList" :current="imgIndex" @close="changeSku"></preview-img>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, reactive, toRefs, watch } from 'vue'
|
|
import { showToast, goodsItem, getUserPhone, toMiniProgram } from '../common.js'
|
|
import { get, post } from '@/api/request.js'
|
|
import { Style } from '@/utils/list.js'
|
|
import previewImg from '@/components/sku/previewImg.vue'
|
|
|
|
export default {
|
|
components: { previewImg },
|
|
options: {
|
|
styleIsolation: 'shared'
|
|
},
|
|
props: {
|
|
showSku: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
fenxiang: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
skus_1: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
isTabbar: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
type: {
|
|
type: Number
|
|
},
|
|
show_stock: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
skuInfo: {
|
|
type: Object
|
|
},
|
|
sku: {
|
|
type: Object
|
|
},
|
|
show1: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
showDetail: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
groupId: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
source: {
|
|
type: String
|
|
},
|
|
canBuy: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
sourceId: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
sourceType: {
|
|
type: String,
|
|
default: 'normal'
|
|
},
|
|
remindStock: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
soldStatus: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
remindTmplId: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
shortStatus: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
sales: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
},
|
|
setup(props, context) {
|
|
const data = reactive({
|
|
sku_skuInfo: '',
|
|
name: '',
|
|
specsList: [], // 重组规格数组
|
|
chooseItem: {}, // 选中规格
|
|
choose: {}, // 选中规格值id
|
|
skuName: '', // 规格名
|
|
vipOn: uni.getStorageSync('vip_on') === 1,
|
|
vip_price_show: uni.getStorageSync('vip_price_show'),
|
|
img: '', //图片选择显示
|
|
viewPicUrl: '',
|
|
pic_url_800: '',
|
|
show: true,
|
|
chooseIndex: [],
|
|
firstWatch: true,
|
|
viewPicList: [],
|
|
imgWidth: 200,
|
|
textModule: [],
|
|
textType: 1,
|
|
mainImg: [],
|
|
is_vip: uni.getStorageSync('is_vip'),
|
|
groupId: '',
|
|
limit_type: 0,
|
|
limit: 0,
|
|
totalNum: 0,
|
|
is_authorized: uni.getStorageSync('is_authorized'),
|
|
firstLoad: true,
|
|
Color: uni.getStorageSync('theme_color'),
|
|
priceColor: Style[uni.getStorageSync('theme_index') * 1].priceColor,
|
|
cartColor: Style[uni.getStorageSync('theme_index') * 1].cartColor,
|
|
bgColor: Style[uni.getStorageSync('theme_index') * 1].bgColor,
|
|
sourceId: 0,
|
|
sourceType: '',
|
|
isSale: uni.getStorageSync('role') == 1,
|
|
canClick: true,
|
|
remind_stock: false,
|
|
showPreview: false,
|
|
imgIndex: 0,
|
|
fontSize: 'small',
|
|
is_cart: false
|
|
})
|
|
|
|
let list = reactive({
|
|
num: 0,
|
|
shop_goods_id: 0,
|
|
shop_goods_sku_id: 0,
|
|
shop_group_goods_id: 0,
|
|
num1: 1
|
|
})
|
|
let item = reactive({
|
|
shop_goods_id: 0,
|
|
shop_goods_sku_id: 0,
|
|
num: 0
|
|
})
|
|
// 选规格
|
|
let name = []
|
|
var cart = false
|
|
|
|
function chooseSku(e, index, i_index) {
|
|
data.firstWatch = false
|
|
data.show = false
|
|
if (e.img) {
|
|
data.img = e.img_800 || e.img
|
|
data.chooseItem.pic_url = e.img
|
|
data.chooseItem.pic_url_800 = e.img_800
|
|
data.viewPicUrl = e.img
|
|
data.pic_url_800 = e.img_800
|
|
}
|
|
data.choose['v' + (index + 1) + '_id'] = data.specsList[index].value[i_index].id
|
|
name[index] = data.specsList[index].value[i_index].value
|
|
data.chooseIndex.push(index)
|
|
data.chooseIndex = Array.from(new Set(data.chooseIndex))
|
|
data.skuName = name.join('-')
|
|
if(index == 0) {
|
|
data.imgIndex = i_index
|
|
}
|
|
}
|
|
|
|
watch(props, (newProps) => {
|
|
data.groupId = newProps.groupId
|
|
data.sourceId = newProps.sourceId
|
|
data.sourceType = newProps.sourceType
|
|
data.remind_stock = newProps.remindStock
|
|
data.fontSize = uni.getStorageSync('font') || 'small'
|
|
if(!newProps.showSku) {
|
|
data.firstLoad = true
|
|
}
|
|
if (data.firstWatch) {
|
|
data.viewPicList = []
|
|
data.viewPicUrl = newProps.skuInfo.face_img
|
|
data.mainImg = newProps.skuInfo.gallery || []
|
|
data.limit_type = newProps.skuInfo.limit_type
|
|
data.limit = newProps.skuInfo.limit
|
|
|
|
if(newProps.skuInfo && newProps.skuInfo.specs) {
|
|
newProps.skuInfo.specs[0].value.forEach((it) => {
|
|
if(it.img_800){
|
|
data.viewPicList.push(it.img_800)
|
|
}
|
|
})
|
|
}
|
|
data.textModule = newProps.skuInfo.text_modules || []
|
|
data.textType = newProps.skuInfo.text_type
|
|
if (newProps.skuInfo) {
|
|
data.specsList = newProps.skuInfo.specs
|
|
if (newProps.sku) {
|
|
data.is_cart = true
|
|
data.chooseItem.id = ''
|
|
let item = newProps.sku
|
|
data.chooseItem.num = item.num
|
|
data.viewPicUrl = item.pic_url_800 || item.pic_url || newProps.skuInfo.face_img
|
|
name = []
|
|
for (let j = 1; j <= 4; j++) {
|
|
if (item['v' + j + '_id']) {
|
|
data.choose['v' + j + '_id'] = item['v' + j + '_id']
|
|
name.push(item['v' + j])
|
|
}
|
|
}
|
|
let idx = data.viewPicList.indexOf(data.viewPicUrl)
|
|
data.imgIndex = idx > 0 ? idx : 0
|
|
data.skuName = name.join('-')
|
|
// data.chooseItem = newProps.sku
|
|
} else if (!data.chooseItem.id && newProps.showSku) {
|
|
data.chooseItem = JSON.parse(JSON.stringify(newProps.skuInfo.skus[0]))
|
|
data.chooseItem.stock = newProps.skuInfo.stock
|
|
}
|
|
if (newProps.skuInfo.skus) {
|
|
if (newProps.skuInfo.skus.length === 1) {
|
|
data.show = false
|
|
}
|
|
if(props.soldStatus == 2 || props.shortStatus == 0) {
|
|
newProps.skuInfo.skus.forEach((ress) => {
|
|
ress.stock = 0
|
|
})
|
|
}
|
|
if (newProps.skuInfo.specs.length === 1) {
|
|
var sku = []
|
|
newProps.skuInfo.skus.forEach((ress) => {
|
|
if (ress.stock <= 0 || ress.price == 0) {
|
|
sku.push(ress.v1_id)
|
|
}
|
|
})
|
|
data.specsList.forEach((res, index) => {
|
|
res.value.forEach((res1) => {
|
|
if (sku.includes(res1.id)) {
|
|
res1.show = true
|
|
} else {
|
|
res1.show = false
|
|
}
|
|
})
|
|
})
|
|
}
|
|
data.sku_skuInfo = newProps.skuInfo.skus
|
|
list.num1 =
|
|
newProps.skuInfo.limit_type == 1 ?
|
|
parseInt(newProps.skuInfo.start_sale_num) :
|
|
newProps.skuInfo.limit_type == 0 ?
|
|
1 :
|
|
1
|
|
|
|
data.name = newProps.skuInfo.skus[0].v1
|
|
list.shop_group_goods_id = newProps.skuInfo.shop_group_goods_id
|
|
list.shop_goods_id = newProps.skuInfo.skus[0].shop_goods_id
|
|
list.shop_goods_sku_id = newProps.skuInfo.skus[0].id
|
|
|
|
if (data.specsList.length == Object.keys(data.choose).length) {
|
|
for (const key in data.choose) {
|
|
let i = parseInt(key.substr(1, 1))
|
|
data.specsList[i - 1].value.forEach((req) => {
|
|
data.sku_skuInfo.forEach((ress, m) => {
|
|
let flag = [req.id == ress['v' + i + '_id']]
|
|
for (const k in data.choose) {
|
|
let j = parseInt(k.substr(1, 1))
|
|
if (i != j) {
|
|
flag.push(ress[k] == data.choose[k])
|
|
}
|
|
}
|
|
if (flag.findIndex(target => target === false) == -1) {
|
|
if ((ress.stock <= 0 || ress.price == 0)) {
|
|
req.show = true
|
|
} else {
|
|
req.show = false
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
if(props.soldStatus == 2 || props.shortStatus == 0) {
|
|
data.chooseItem.stock = 0
|
|
}
|
|
}
|
|
if(data.groupId && data.firstLoad && newProps.showSku) {
|
|
data.firstLoad = false
|
|
getGroupCartInfo()
|
|
}
|
|
}
|
|
})
|
|
watch(
|
|
() => data.choose,
|
|
(newChoose) => {
|
|
if (data.specsList.length - Object.keys(data.choose).length == 1) {
|
|
|
|
// 如果只有一个规格类未选中，则去判断未选中的这一项是否可选
|
|
data.specsList.forEach((req, i) => {
|
|
if (data.chooseIndex.indexOf(i) == -1) {
|
|
req.value.forEach((rej, j) => {
|
|
data.sku_skuInfo.forEach((ress, m) => {
|
|
let flag = [rej.id === ress['v' + (i + 1) + '_id']]
|
|
for (const key in data.choose) {
|
|
flag.push(ress[key] == data.choose[key])
|
|
}
|
|
if (flag.findIndex(target => target === false) == -1) {
|
|
if (ress.stock <= 0 || ress.price == 0) {
|
|
rej.show = true
|
|
} else {
|
|
rej.show = false
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
})
|
|
} else if (data.specsList.length == Object.keys(data.choose).length) {
|
|
for (const key in data.choose) {
|
|
let i = parseInt(key.substr(1, 1))
|
|
data.specsList[i - 1].value.forEach((req) => {
|
|
data.sku_skuInfo.forEach((ress, m) => {
|
|
let flag = [req.id == ress['v' + i + '_id']]
|
|
for (const k in data.choose) {
|
|
let j = parseInt(k.substr(1, 1))
|
|
if (i != j) {
|
|
flag.push(ress[k] == data.choose[k])
|
|
}
|
|
}
|
|
if (flag.findIndex(target => target === false) == -1) {
|
|
if ((ress.stock <= 0 || ress.price == 0)) {
|
|
req.show = true
|
|
} else {
|
|
req.show = false
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
if (newChoose) {
|
|
data.show = false
|
|
}
|
|
if (JSON.stringify(newChoose) == '{}') {
|
|
data.show = true
|
|
}
|
|
// 判断选择规格值是否完整
|
|
for (let i = data.specsList.length; i >= 1; i--) {
|
|
if (!newChoose['v' + i + '_id']) {
|
|
return
|
|
}
|
|
}
|
|
// 对比选中项
|
|
let list = props.skuInfo.skus
|
|
list.forEach((sku, s_index) => {
|
|
let num = data.chooseItem.num
|
|
if (
|
|
sku.v1_id === newChoose.v1_id &&
|
|
sku.v2_id === newChoose.v2_id &&
|
|
sku.v3_id === newChoose.v3_id &&
|
|
sku.v4_id === newChoose.v4_id
|
|
) {
|
|
data.chooseItem = {
|
|
...sku
|
|
}
|
|
if (num > 0) {
|
|
data.chooseItem.num = num < sku.stock ? num : (sku.stock > 0 ? sku.stock : 0)
|
|
} else if (sku.stock > 0) {
|
|
data.chooseItem.num =
|
|
props.skuInfo.limit_type == 0 ?
|
|
1 :
|
|
props.skuInfo.limit_type == 1 ?
|
|
parseInt(props.skuInfo.start_sale_num) :
|
|
1
|
|
} else {
|
|
data.chooseItem.num = 0
|
|
}
|
|
if (sku.pic_url === 'undefined') {
|
|
data.chooseItem.pic_url = props.skuInfo.face_img
|
|
}
|
|
}
|
|
})
|
|
|
|
item.shop_goods_id = data.chooseItem.shop_goods_id
|
|
item.shop_goods_sku_id = data.chooseItem.id
|
|
|
|
}, {
|
|
deep: true
|
|
}
|
|
)
|
|
|
|
const hanleClick = () => {
|
|
context.emit('buttomShow', true)
|
|
}
|
|
// 商品数量
|
|
function changeNum(e) {
|
|
console.log(data.totalNum, e)
|
|
if(data.limit_type === 2 && e.value > data.limit) {
|
|
showToast('本团商品限购' + data.limit + '件')
|
|
return
|
|
}
|
|
data.chooseItem.num = e.value
|
|
item.num = e.value
|
|
}
|
|
// 达到最大库存
|
|
function plusBtn(number, index, e) {
|
|
// number 0 起购, 1 限购, 2 不限购
|
|
// index 数量
|
|
// e limit
|
|
|
|
if (data.chooseItem.num === data.chooseItem.stock) {
|
|
showToast('库存不足')
|
|
}
|
|
if (number == 0 && !data.show) {
|
|
showToast('该商品不能低于起购件数')
|
|
} else if (number == 1 && !data.show) {
|
|
if (index == e) {
|
|
showToast('已达到商品限购件数')
|
|
} else if (index > e) {
|
|
showToast('已达到商品限购件数')
|
|
} else if (index != e) {
|
|
showToast('该商品不能低于1件')
|
|
}
|
|
} else if (number == 2 && !data.show) {
|
|
showToast('该商品不能低于1件')
|
|
}
|
|
}
|
|
|
|
function addBtn(type) {
|
|
let arr1 = name.filter((d) => d)
|
|
if (!props.skus_1) {
|
|
if (!name[0]) {
|
|
showToast('请选择完整规格')
|
|
return
|
|
}
|
|
if (arr1.length < data.specsList.length) {
|
|
showToast('请选择完整规格')
|
|
return
|
|
} else if (!data.chooseItem.num || data.chooseItem.num === 0) {
|
|
showToast('请添加商品数量')
|
|
return
|
|
}
|
|
}
|
|
if (type === 1) {
|
|
addToCart()
|
|
} else if (type === 2) {
|
|
toPay()
|
|
} else if (type === 3) {
|
|
changeChoose()
|
|
} else {
|
|
// toPay()
|
|
addToCart()
|
|
}
|
|
}
|
|
// 加入购物车
|
|
function addToCart() {
|
|
if (props.skus_1) {
|
|
post('/api/v1/carts', {
|
|
shop_goods_id: list.shop_goods_id,
|
|
shop_goods_sku_id: list.shop_goods_sku_id,
|
|
num: data.chooseItem.num || list.num1,
|
|
shop_group_goods_id: list.shop_group_goods_id,
|
|
source_id: data.sourceId,
|
|
source_type: data.sourceType
|
|
}).then((res) => {
|
|
showToast('已加入购物车')
|
|
data.show = true
|
|
getNum()
|
|
context.emit('getnum')
|
|
close()
|
|
}).catch((error) => {
|
|
showToast(error)
|
|
})
|
|
} else {
|
|
post('/api/v1/carts', {
|
|
shop_goods_id: data.chooseItem.shop_goods_id,
|
|
shop_goods_sku_id: data.chooseItem.id,
|
|
num: data.chooseItem.num,
|
|
shop_group_goods_id: props.skuInfo.shop_group_goods_id,
|
|
source_id: data.sourceId,
|
|
source_type: data.sourceType
|
|
}).then((res) => {
|
|
showToast('已加入购物车')
|
|
data.show = true
|
|
getNum()
|
|
context.emit('getnum')
|
|
close()
|
|
}).catch((error) => {
|
|
showToast(error)
|
|
})
|
|
}
|
|
}
|
|
// 立即购买
|
|
function toPay() {
|
|
const goods = [{
|
|
shop_goods_id: data.chooseItem.shop_goods_id,
|
|
shop_goods_sku_id: data.chooseItem.id,
|
|
num: data.chooseItem.num || list.num1,
|
|
shop_group_goods_id: props.skuInfo.shop_group_goods_id,
|
|
source_id: data.sourceId,
|
|
source_type: data.sourceType
|
|
}]
|
|
uni.setStorageSync('shopGoods', goods)
|
|
uni.navigateTo({
|
|
url: '/pages/pay/index?type=0&source=' + props.source
|
|
})
|
|
}
|
|
|
|
// 完成按钮
|
|
function changeChoose() {
|
|
let item1 = {
|
|
shop_goods_id: data.chooseItem.shop_goods_id,
|
|
shop_goods_sku_id: data.chooseItem.id,
|
|
num: data.chooseItem.num,
|
|
shop_group_goods_id: props.skuInfo.shop_group_goods_id,
|
|
source_id: data.sourceId,
|
|
source_type: data.sourceType
|
|
}
|
|
if (props.sku && props.sku.cart_id) {
|
|
item1.id = props.sku.cart_id
|
|
context.emit('changeChoose', item1)
|
|
close()
|
|
} else {
|
|
addToCart()
|
|
}
|
|
}
|
|
|
|
function close(e) {
|
|
data.img = ''
|
|
data.choose = {} // 选中规格值id
|
|
data.chooseItem = {}
|
|
data.skuName = ''
|
|
data.name = ''
|
|
name = []
|
|
data.viewPicUrl = ''
|
|
data.pic_url_800 = ''
|
|
data.show = true
|
|
list.num1 = 1
|
|
data.chooseItem.num = 1
|
|
data.chooseIndex = []
|
|
data.imgIndex = 0
|
|
data.firstWatch = true
|
|
context.emit('close', data.skuName)
|
|
}
|
|
const {
|
|
getNum,
|
|
showBtn
|
|
} = goodsItem()
|
|
|
|
const preventD = () => {
|
|
return
|
|
}
|
|
|
|
// 预览图片
|
|
const preViewImg = (url) => {
|
|
let img_preview_suffix = uni.getStorageSync('img_preview_suffix') || ''
|
|
let imurl = url + img_preview_suffix
|
|
if(url.indexOf('.gif') >= 0 || url.indexOf('.GIF') >= 0) {
|
|
imurl = url
|
|
}
|
|
uni.previewImage({
|
|
urls: [imurl],
|
|
current: 0
|
|
})
|
|
}
|
|
|
|
const openPreView = (url) => {
|
|
if(data.viewPicList.length == data.specsList[0].value.length) {
|
|
if(data.is_cart) {
|
|
uni.previewImage({
|
|
urls: data.viewPicList,
|
|
current: data.imgIndex
|
|
})
|
|
} else {
|
|
data.showPreview = true
|
|
}
|
|
} else {
|
|
preViewImg(url)
|
|
}
|
|
}
|
|
|
|
function skuScroll(e) {
|
|
if(e.detail.scrollTop > 200){
|
|
data.imgWidth = 120
|
|
} else {
|
|
data.imgWidth = 200
|
|
}
|
|
}
|
|
|
|
// 获取limit信息
|
|
function getGroupCartInfo() {
|
|
get('/api/v1/carts', { shop_group_goods_id: data.groupId }).then((res2) => {
|
|
data.totalNum = res2.num
|
|
})
|
|
}
|
|
|
|
// 授权手机号码
|
|
async function getPhoneNumber(e) {
|
|
if(e.detail.errMsg == 'getPhoneNumber:ok') {
|
|
await getUserPhone(e.detail).then((res) => {
|
|
data.is_authorized = 1
|
|
})
|
|
}
|
|
}
|
|
|
|
async function arrivalNotice() {
|
|
// 取消提醒
|
|
if(data.remind_stock) {
|
|
post(`/api/v1/goods/remind/cancel/${data.groupId}`, {type: 1}).then((res) => {
|
|
data.remind_stock = false
|
|
uni.showToast({
|
|
title: '已取消到货提醒',
|
|
icon: 'none'
|
|
})
|
|
context.emit('remind', false)
|
|
})
|
|
} else {
|
|
toMiniProgram('pages/groups/index?id=' + data.groupId)
|
|
}
|
|
}
|
|
|
|
function changeSku(index) {
|
|
data.imgIndex = index
|
|
if(!data.specsList[0].value[data.imgIndex].show) {
|
|
chooseSku(data.specsList[0].value[data.imgIndex], 0, data.imgIndex)
|
|
}
|
|
data.showPreview = false
|
|
}
|
|
|
|
return {
|
|
toMiniProgram,
|
|
...toRefs(data),
|
|
...toRefs(list),
|
|
item,
|
|
hanleClick,
|
|
chooseSku,
|
|
plusBtn,
|
|
changeNum,
|
|
addBtn,
|
|
addToCart,
|
|
toPay,
|
|
changeChoose,
|
|
close,
|
|
getNum,
|
|
showBtn,
|
|
preventD,
|
|
preViewImg,
|
|
openPreView,
|
|
skuScroll,
|
|
getGroupCartInfo,
|
|
getPhoneNumber,
|
|
arrivalNotice,
|
|
changeSku
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.box {
|
|
opacity: 0.35;
|
|
}
|
|
.box_red {
|
|
padding: 5rpx 10rpx;
|
|
box-sizing: border-box;
|
|
font-size: 25rpx;
|
|
display: inline-block;
|
|
color: #656565;
|
|
}
|
|
.dis {
|
|
opacity: 0.7;
|
|
color: #eee !important;
|
|
}
|
|
|
|
.sku-bottom {
|
|
margin-bottom: 110rpx;
|
|
}
|
|
|
|
.sku {
|
|
height: 70vh;
|
|
position: relative;
|
|
overflow: hidden;
|
|
&-top {
|
|
display: flex;
|
|
padding: 30rpx;
|
|
border-bottom: 1rpx solid #eee;
|
|
.img {
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
background: #bbbbbb;
|
|
border-radius: 8rpx;
|
|
margin-right: 30rpx;
|
|
transition: all 0.3s;
|
|
}
|
|
.icon {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
}
|
|
&-info {
|
|
display: flex;
|
|
width: calc(100% - 250rpx);
|
|
flex-direction: column;
|
|
.tit{
|
|
width: calc(100% - 50rpx);
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.text {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
margin-top: 20rpx;
|
|
display: block;
|
|
}
|
|
.price {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
.tag {
|
|
margin-left: 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.sel{
|
|
margin-top: 20rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
&.smallfont{
|
|
.tit{
|
|
display: none;
|
|
}
|
|
.price {
|
|
font-size: 28rpx;
|
|
}
|
|
.text{
|
|
display: none;
|
|
}
|
|
.sel{
|
|
font-size: 24rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-list {
|
|
padding: 10rpx 30rpx 30rpx;
|
|
border-bottom: 1rpx solid #eee;
|
|
position: relative;
|
|
&-item {
|
|
&-name {
|
|
font-size: 26rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
&-tag {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
font-size: 24rpx;
|
|
}
|
|
.tag {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #000;
|
|
background-color: #f4f4f4;
|
|
margin-right: 22rpx;
|
|
margin-top: 20rpx;
|
|
padding: 10rpx 18rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 6rpx;
|
|
.tag_img {
|
|
width: 35rpx;
|
|
height: 35rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
}
|
|
.choose {
|
|
background-color: v-bind('bgColor');
|
|
color: v-bind('Color');
|
|
border-radius: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-num {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.sku-buy {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 30rpx;
|
|
border-top: 1rpx solid #eee;
|
|
border-bottom: 1rpx solid #eee;
|
|
.img {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
margin-left: -10rpx;
|
|
border: 4rpx solid #fff;
|
|
box-sizing: border-box;
|
|
.sku-buy-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
margin-left: 20rpx;
|
|
font-size: 28rpx;
|
|
.num {
|
|
color: v-bind('Color');
|
|
}
|
|
}
|
|
}
|
|
|
|
&-btn {
|
|
display: flex;
|
|
.btn1 {
|
|
border-radius: 44rpx 0rpx 0rpx 0rpx;
|
|
background: v-bind('cartColor');
|
|
}
|
|
.btn2 {
|
|
border-radius: 0rpx 44rpx 0rpx 0rpx;
|
|
background: v-bind('Color');
|
|
}
|
|
}
|
|
|
|
.btn1,
|
|
.btn2,
|
|
.btn {
|
|
width: 50%;
|
|
height: 104rpx;
|
|
color: #fff;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
line-height: 104rpx;
|
|
}
|
|
|
|
.sku-btn2, .sku-btn {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 2;
|
|
background-color: #fff;
|
|
.btn {
|
|
background: v-bind('Color');
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
.edition{
|
|
padding: 50rpx 0;
|
|
border-top: 1rpx solid #eee;
|
|
}
|
|
.edition_box {
|
|
margin: 8rpx 0;
|
|
position: relative;
|
|
padding: 0 20rpx;
|
|
|
|
.img {
|
|
width: 100%;
|
|
}
|
|
|
|
.small_img {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
.imgs {
|
|
width: 32.3%;
|
|
height: 200rpx;
|
|
margin: 20rpx 0;
|
|
|
|
.image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.imgs:nth-child(2) {
|
|
margin: 20rpx 10rpx;
|
|
}
|
|
|
|
.imgs:nth-child(5) {
|
|
margin: 20rpx 10rpx;
|
|
}
|
|
|
|
.imgs:nth-child(8) {
|
|
margin: 20rpx 10rpx;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
line-height: 55rpx;
|
|
font-size: 30rpx;
|
|
color: #222;
|
|
}
|
|
}
|
|
.imgbox{
|
|
.img{
|
|
width: 100%;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
.good_box{
|
|
height: calc(70vh - 360rpx);
|
|
}
|
|
.block{
|
|
width: 100%;
|
|
height: 100rpx;
|
|
}
|
|
.vip-tag {
|
|
font-size: 32rpx;
|
|
color: #fbe6c3;
|
|
background: #353648;
|
|
border-radius: 20rpx 0 0 0;
|
|
padding: 8rpx 10rpx;
|
|
line-height: 1;
|
|
.txt{
|
|
font-size: 22rpx;
|
|
}
|
|
}
|
|
.pricebox{
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
.text1 {
|
|
font-size: 32rpx;
|
|
color: v-bind('priceColor');
|
|
margin-right: 10rpx;
|
|
font-weight: 600;
|
|
}
|
|
.icon1 {
|
|
font-size: 24rpx;
|
|
font-weight: normal;
|
|
}
|
|
.vip {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 34rpx;
|
|
color: v-bind('priceColor');
|
|
}
|
|
}
|
|
.sku-top.large{
|
|
.pricebox{
|
|
.text1{font-size: 40rpx;}
|
|
.icon1{font-size: 30rpx;}
|
|
.vip{font-size: 46rpx;}
|
|
}
|
|
.sku-top-info{
|
|
.tit{
|
|
font-size: 40rpx;
|
|
}
|
|
}
|
|
.text{font-size: 32rpx;}
|
|
.sel{font-size: 36rpx;}
|
|
}
|
|
.good_box.large{
|
|
.sku-list-item-name{font-size: 36rpx;}
|
|
.sku-list-item-tag{font-size: 32rpx;}
|
|
.edition_box{
|
|
.text{font-size: 36rpx;}
|
|
}
|
|
}
|
|
</style>
|