|
|
@@ -1,335 +1,499 @@
|
|
|
<template>
|
|
|
- <uni-popup ref="popup" background-color="#fff" mode="bottom" @change="change">
|
|
|
- <view class="s-box padding-sm">
|
|
|
- <view class="s-img">
|
|
|
- <image mode="aspectFit" class="wh-full"
|
|
|
- :src="caMsg.img[0].url ? caMsg.img[0].url : cardMsg.imgList[0].url"></image>
|
|
|
+ <u-popup ref="popup" :show="show" mode="bottom" @close="close" background-color="#fff" @change="change">
|
|
|
+ <view class="specPop">
|
|
|
+ <view class="s-box padding-sm" v-if="current">
|
|
|
+ <view class="s-img dflex-c">
|
|
|
+ <image v-if="current.img" :src="current.img.url" mode="aspectFit"></image>
|
|
|
+ <u-icon v-else name="photo" size="36"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="g-info">
|
|
|
+ <view class="s-name">{{current.skuName}}</view>
|
|
|
+ <view class="s-price">￥{{current.retailPrice}}</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="g-info">
|
|
|
- <view class="s-name">{{caMsg.skuName ? caMsg.skuName : cardMsg.spuName}}</view>
|
|
|
- <view class="s-price">{{caMsg.retailPrice ? caMsg.retailPrice : cardMsg.minPrice}}</view>
|
|
|
+ <view class="s-box padding-sm" v-else>
|
|
|
+ <view class="s-img dflex-c">
|
|
|
+ <image v-if="supValue.majorImg" :src="supValue.majorImg" mode="aspectFit"></image>
|
|
|
+ <u-icon v-else name="photo" size="36"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="g-info">
|
|
|
+ <view class="s-name">{{supValue.spuName}}</view>
|
|
|
+ <view class="s-price" v-if="supValue.minPrice == supValue.maxPrice">￥{{supValue.maxPrice}}</view>
|
|
|
+ <view class="s-price" v-else>￥{{supValue.minPrice}} ~ ￥{{supValue.maxPrice}}</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <scroll-view style="height: 270px;" scroll-y>
|
|
|
- <view v-for="(item, index) in specs" :key="index">
|
|
|
- <uni-section :title="item.name">
|
|
|
- <view class="spec-box padding-lr-sm">
|
|
|
- <view class="spec-item padding-lr-sm" v-for="(spe, cindex) in item.values"
|
|
|
- :class="{'on-spec': spe.selected}" :key="cindex" @click="selectSpec1(item, spe)">
|
|
|
- {{ spe.label }}
|
|
|
- </view>
|
|
|
+ <uni-section :title="item.name" v-for="item in temp" :key="item.field">
|
|
|
+ <view class="spec-box padding-lr-sm">
|
|
|
+ <view class="spec-item padding-lr-sm" :class="{'on-spec':item.value == specItem}" @click="actSpec(item,specItem)" v-for="(specItem,index) of item.data" :key="index">{{specItem}}</view>
|
|
|
+ </view>
|
|
|
+ </uni-section>
|
|
|
+ <uni-section title="购买数量">
|
|
|
+ <view class="purchase-num padding-lr-sm">
|
|
|
+ <view class="num">
|
|
|
+ <!-- 剩余562件 -->
|
|
|
</view>
|
|
|
- </uni-section>
|
|
|
+ <uni-number-box v-model="vModelValue" :min="1" @change="changeValue" />
|
|
|
+ </view>
|
|
|
+ </uni-section>
|
|
|
+ <view class="btn-box">
|
|
|
+ <view class="btn reset" @click="close">取消</view>
|
|
|
+ <view class="btn confirm" v-if="type==1" @click="payBtn">立即购买</view>
|
|
|
+ <view class="btn confirm" v-else @click="clickAddcart">{{cartData.skuId ? '确定' : '加入购物车'}}</view>
|
|
|
</view>
|
|
|
- </scroll-view>
|
|
|
- <view class="purchase-num padding-lr-sm">
|
|
|
- <uni-section title="购买数量"></uni-section>
|
|
|
- <uni-number-box v-model="vModelValue" :min="1" @change="changeValue()" />
|
|
|
- </view>
|
|
|
- <view class="btn-box">
|
|
|
- <view class="btn reset" @click="toShop">加入购物车</view>
|
|
|
- <view class="btn confirm" @click="toBuy">立即购买</view>
|
|
|
+ <u-loading-page :loading="load"></u-loading-page>
|
|
|
+ <u-toast ref="uToast"></u-toast>
|
|
|
</view>
|
|
|
- <u-toast ref="uToast"></u-toast>
|
|
|
- </uni-popup>
|
|
|
+ </u-popup>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
- name: "specPopup",
|
|
|
- props: {
|
|
|
- cardMsg: {
|
|
|
- type: Object,
|
|
|
- required: true
|
|
|
+ name:"specPopup",
|
|
|
+ props:{
|
|
|
+ noClear:{}
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ dinCarData:{},
|
|
|
+ show:false,
|
|
|
+ load:false,
|
|
|
+ supValue:{}, //spu数据
|
|
|
+ temp:[], //规格列表
|
|
|
+ checkObj:{}, //选中的规格
|
|
|
+ skuData:[], //sku数据
|
|
|
+ current:null, //当前sku数据
|
|
|
+ vModelValue:1,
|
|
|
+ cartList:[], //购物车列表
|
|
|
+ cartData:null, //当前购物车数据
|
|
|
+ dinCarData:{},
|
|
|
+ type:0
|
|
|
}
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- vModelValue: 1,
|
|
|
- specs: [], // 总查询数据
|
|
|
- speL: [],
|
|
|
- intSkuId: [], // 选择唯一的id
|
|
|
- caMsg: [], // 根据id查出来的数据
|
|
|
- isSelected: false,
|
|
|
- isData: null,
|
|
|
- preSele: [],
|
|
|
- itemsL: [],
|
|
|
- toList: [],
|
|
|
- total: 0
|
|
|
+ created() {
|
|
|
+ let carData = uni.getStorageSync('dinCarData');
|
|
|
+ if(carData){
|
|
|
+ try{
|
|
|
+ this.dinCarData = JSON.parse(carData)
|
|
|
+ }catch(e){}
|
|
|
+ }
|
|
|
+ let cartInfo = uni.getStorageSync('cartInfo');
|
|
|
+ if(cartInfo){
|
|
|
+ try{
|
|
|
+ this.cartList = JSON.parse(cartInfo)
|
|
|
+ }catch(e){}
|
|
|
}
|
|
|
},
|
|
|
- methods: {
|
|
|
- changeValue(value) {},
|
|
|
- change(e) {
|
|
|
- if (!e.show) { // 当弹出层关闭时
|
|
|
- // 重置规格选择
|
|
|
- if (this.specs.length > 0 && this.preSele.length < 0) {
|
|
|
- this.specs.forEach(e => {
|
|
|
- e.values.forEach(s => {
|
|
|
- s.selected = false
|
|
|
- })
|
|
|
- })
|
|
|
- //this.vModelValue = 1
|
|
|
+ methods:{
|
|
|
+ payBtn(){
|
|
|
+ if(!this.isCheckFind()){
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ type:'warning',
|
|
|
+ message: '请选择规格！'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(!this.current){
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ type:'warning',
|
|
|
+ message: '该商品没有库存！'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let data = this.getSkuDataObj()
|
|
|
+
|
|
|
+ uni.setStorageSync('selectPay', JSON.stringify([data]))
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/order/submitOrder/submitOrder'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ setType(n){
|
|
|
+ this.type = n
|
|
|
+ },
|
|
|
+ changeValue(){},
|
|
|
+ change(){},
|
|
|
+ getSkuDataObj() {
|
|
|
+ let data = {
|
|
|
+ skuId:this.current.skuId,
|
|
|
+ basePrice:this.current.tagPrice,
|
|
|
+ price:this.current.retailPrice,
|
|
|
+ quantity:this.vModelValue,
|
|
|
+ imgUrl:this.current.img?this.current.img.url:'',
|
|
|
+ skuTitle:this.current.title,
|
|
|
+ spuId:this.current.spuId,
|
|
|
+ skuCode:this.current.skuCode,
|
|
|
+ splitMergeId:this.current.splitMergeId,
|
|
|
+ title:this.current.title,
|
|
|
+ skuName:this.current.skuName,
|
|
|
+ productWeight: this.current.grossWeight,
|
|
|
+ }
|
|
|
+ if(this.current.freightTemplateId){
|
|
|
+ data.freightTemplateId = this.current.freightTemplateId
|
|
|
+ }
|
|
|
+
|
|
|
+ if(this.current.color){
|
|
|
+ data.skuProperties = this.current.color
|
|
|
+ }
|
|
|
+ if(this.current.size){
|
|
|
+ data.skuProperties = data.skuProperties ? data.skuProperties + ';' + this.current.size : this.current.size
|
|
|
+ }
|
|
|
+ if(this.current.extendProps){
|
|
|
+ for(const key in this.current.extendProps){
|
|
|
+ data.skuProperties = data.skuProperties ? data.skuProperties + ';' + this.current.extendProps[key] : this.current.extendProps[key]
|
|
|
}
|
|
|
- this.speL = []
|
|
|
- this.seleBack()
|
|
|
}
|
|
|
+ return data;
|
|
|
},
|
|
|
- async selectSpec1(item, spec) {
|
|
|
- // 首先，取消选择所有其他选项
|
|
|
- item.values.forEach(value => {
|
|
|
- value.selected = false
|
|
|
+ //加入购物车
|
|
|
+ clickAddcart(){
|
|
|
+ if(!this.isCheckFind()){
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ type:'warning',
|
|
|
+ message: '请选择规格！'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(!this.current){
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ type:'warning',
|
|
|
+ message: '该商品没有库存！'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(!this.vModelValue || this.vModelValue == 0){
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ type:'warning',
|
|
|
+ message: '请输入购买数量！'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // let that = this;
|
|
|
+
|
|
|
+ //加个采购商验证功能
|
|
|
+ // if(!this.dinCarData || !this.dinCarData.id){
|
|
|
+ // this.$refs.uToast.show({
|
|
|
+ // type:'warning',
|
|
|
+ // message: '您不是采购商，请前往服务平台注册！'
|
|
|
+ // })
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ let ind = -1;
|
|
|
+ let cartDataInd = -1;
|
|
|
+ this.cartList.forEach((item,index) => {
|
|
|
+ if(item.skuId == this.current.skuId){
|
|
|
+ ind = index
|
|
|
+ }
|
|
|
+ if(this.cartData && item.skuId == this.cartData.skuId){
|
|
|
+ cartDataInd = index
|
|
|
+ }
|
|
|
})
|
|
|
-
|
|
|
- spec.selected = !spec.selected
|
|
|
- const newIds = spec.ids
|
|
|
- if (this.preSele.length > 0) {
|
|
|
- this.speL = this.preSele
|
|
|
+ if(ind >= 0) {
|
|
|
+ if(ind == cartDataInd){
|
|
|
+ this.cartList[ind].quantity = this.vModelValue
|
|
|
+ }else{
|
|
|
+ this.cartList[ind].quantity = this.cartList[ind].quantity + this.vModelValue
|
|
|
+ if(cartDataInd >= 0 ){
|
|
|
+ this.cartList.splice(cartDataInd, 1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ // let skuProperties = '';
|
|
|
+ // for(const key in this.checkObj){
|
|
|
+ // if(!skuProperties){
|
|
|
+ // skuProperties = this.checkObj[key]
|
|
|
+ // }else{
|
|
|
+ // skuProperties = skuProperties + ';' + this.checkObj[key]
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ let data = this.getSkuDataObj()
|
|
|
+ if(cartDataInd >= 0 ){
|
|
|
+ this.cartList.splice(cartDataInd, 1)
|
|
|
+ }
|
|
|
+ this.cartList.push(data)
|
|
|
}
|
|
|
- const filSpeL = this.speL.filter(value => value.ids !== newIds);
|
|
|
-
|
|
|
- filSpeL.push(spec)
|
|
|
-
|
|
|
- this.speL = filSpeL
|
|
|
-
|
|
|
- const seleList = this.speL.filter(item => item.selected == true)
|
|
|
- this.itemsL = seleList.map(item => item.label)
|
|
|
-
|
|
|
- // 计算选中规格项的skuIds数组的交集
|
|
|
- if (seleList.length > 0) {
|
|
|
- let intersection = seleList[0].skuIds
|
|
|
-
|
|
|
- for (let i = 1; i < seleList.length; i++) {
|
|
|
- // 使用filter和includes方法找到交集
|
|
|
- intersection = intersection.filter(skuId => {
|
|
|
- return seleList[i].skuIds.includes(skuId);
|
|
|
+ const stringData = JSON.stringify(this.cartList)
|
|
|
+ uni.setStorageSync('cartInfo',stringData);
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ type:'success',
|
|
|
+ message: '操作成功！'
|
|
|
+ })
|
|
|
+
|
|
|
+ this.$emit('onSuccess')
|
|
|
+ setTimeout(() => {
|
|
|
+ this.close()
|
|
|
+ },500)
|
|
|
+ },
|
|
|
+ //选中规格
|
|
|
+ actSpec(item,v){
|
|
|
+ item.value = v;
|
|
|
+ this.checkObj[item.field] = v;
|
|
|
+ if(this.isCheckFind()){
|
|
|
+ for(const item of this.skuData){
|
|
|
+ let n = true
|
|
|
+ for(const key in this.checkObj){
|
|
|
+ if(key == 'color' || key == 'size'){
|
|
|
+ if(this.checkObj[key] !== item[key]){
|
|
|
+ n = false;
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ if(!item.extendProps || this.checkObj[key] !== item.extendProps[key]){
|
|
|
+ n = false;
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(n){
|
|
|
+ this.current = item
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(this.current){
|
|
|
+ this.$emit('onCheckSpec',{
|
|
|
+ spec:this.checkObj,
|
|
|
+ sku:this.current
|
|
|
})
|
|
|
}
|
|
|
- // 如果交集不为空，取第一个元素作为唯一字符串
|
|
|
- const uniqueString = intersection.length > 0 ? intersection[0] : '';
|
|
|
-
|
|
|
- // 更新组件中的intSkuId
|
|
|
- this.intSkuId = uniqueString;
|
|
|
- } else {
|
|
|
- // 如果没有选中的规格项，返回空字符串
|
|
|
- this.intSkuId = '';
|
|
|
+ }else{
|
|
|
+ this.current = null;
|
|
|
}
|
|
|
-
|
|
|
- this.isSelected = this.specs.every(spec => spec.values.some(value => value.selected))
|
|
|
-
|
|
|
- if (this.isSelected) {
|
|
|
- // 如果所有规格都至少有一个选项被选中
|
|
|
- const res = await this.$request('get', `/item/sku/queryItem/${this.intSkuId}`)
|
|
|
- if (res) {
|
|
|
- this.caMsg = res.data
|
|
|
- this.vModelValue = 1
|
|
|
- console.log('this.caMsg', this.caMsg)
|
|
|
+ },
|
|
|
+ //判断规格是否已选完
|
|
|
+ isCheckFind(){
|
|
|
+ let n = true
|
|
|
+ for(const item of this.temp){
|
|
|
+ if(!this.checkObj[item.field]){
|
|
|
+ n = false
|
|
|
+ break
|
|
|
}
|
|
|
-
|
|
|
- //console.log('所有规格都已选择')
|
|
|
- if (this.isData == true) {
|
|
|
- this.preSele = seleList
|
|
|
+ }
|
|
|
+ return n;
|
|
|
+ },
|
|
|
+ //根据spuId获取sku列表
|
|
|
+ loadSkuList(bo){
|
|
|
+ this.load = true;
|
|
|
+ const that = this;
|
|
|
+ this.$req({
|
|
|
+ url:'/item/sku/queryItem',
|
|
|
+ data:{spuId:this.supValue.spuId},
|
|
|
+ success: res => {
|
|
|
+ that.skuData = res.rows
|
|
|
+ for(const item of that.skuData){
|
|
|
+ if(item.extendProps){
|
|
|
+ try{
|
|
|
+ item.extendProps = JSON.parse(item.extendProps)
|
|
|
+ }catch(e){}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //是否是多规格
|
|
|
+ if(!bo){
|
|
|
+ if(that.skuData[0].color){
|
|
|
+ that.temp.push({
|
|
|
+ name:'颜色',
|
|
|
+ field:'color',
|
|
|
+ data:[that.skuData[0].color],
|
|
|
+ value:''
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if(that.skuData[0].size){
|
|
|
+ that.temp.push({
|
|
|
+ name:'规格',
|
|
|
+ field:'size',
|
|
|
+ data:[that.skuData[0].size],
|
|
|
+ value:''
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //设置默认规格
|
|
|
+ if(!that.current){
|
|
|
+ for(const item of that.temp){
|
|
|
+ that.actSpec(item, item.data[0])
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ fail: err => {
|
|
|
+ let msg = ''
|
|
|
+ if(err && err.msg && err.msg.length < 15){
|
|
|
+ msg = err.msg
|
|
|
+ }else{
|
|
|
+ msg = '系统繁忙'
|
|
|
+ }
|
|
|
+ that.$refs.uToast.show({
|
|
|
+ message: msg
|
|
|
+ })
|
|
|
+ },
|
|
|
+ complete: () => {
|
|
|
+ that.load = false
|
|
|
}
|
|
|
-
|
|
|
- } else {}
|
|
|
+ })
|
|
|
},
|
|
|
- // 返回选中的数据
|
|
|
- seleBack() {
|
|
|
- const itemDetal = {
|
|
|
- id: this.intSkuId,
|
|
|
- item: Array.from(this.itemsL).join(','),
|
|
|
- count: this.vModelValue
|
|
|
+ //重置数据
|
|
|
+ setData(v,cartData){
|
|
|
+ this.cartData = cartData ? cartData : null
|
|
|
+ if(!this.noClear || !this.supValue.spuId){
|
|
|
+ this.checkObj = {}
|
|
|
+ this.current = null
|
|
|
+ this.vModelValue = cartData?cartData.quantity:1
|
|
|
+ this.loadSpu(v)
|
|
|
}
|
|
|
- this.$emit('seChanged', itemDetal);
|
|
|
},
|
|
|
- async open(e) {
|
|
|
- if (e || e != null) {
|
|
|
- this.isData = e
|
|
|
- }
|
|
|
- this.$refs.popup.open('bottom')
|
|
|
-
|
|
|
- const spuId = this.cardMsg.spuId
|
|
|
- const res = await this.$request('get', `/item/sku/queryPropMapping?spuId=${spuId}`)
|
|
|
- this.specs = res.data.filter(item => item.values && item.values.length > 0)
|
|
|
- this.specs.forEach(item => {
|
|
|
- Object.assign(item, {
|
|
|
- values: item.values.map(value => ({
|
|
|
- ...value,
|
|
|
- ids: item.id
|
|
|
- // selected: false
|
|
|
- }))
|
|
|
- })
|
|
|
- if (this.preSele.length <= 0) {
|
|
|
- Object.assign(item, {
|
|
|
- values: item.values.map(value => ({
|
|
|
- ...value,
|
|
|
- selected: false
|
|
|
- }))
|
|
|
- })
|
|
|
- } else {
|
|
|
- Object.assign(item, {
|
|
|
- values: item.values.map(value => ({
|
|
|
- ...value,
|
|
|
- selected: this.preSele.some(prevSpe =>
|
|
|
- prevSpe.label === value.label && prevSpe.ids ===
|
|
|
- value.ids)
|
|
|
- }))
|
|
|
+ loadSku(data){
|
|
|
+ let that = this;
|
|
|
+ this.$req({
|
|
|
+ url:'/item/sku/queryItem/' + data.skuId,
|
|
|
+ success: res => {
|
|
|
+ that.current = res.data
|
|
|
+ let d = null
|
|
|
+ if(that.current.extendProps){
|
|
|
+ try{
|
|
|
+ d = JSON.parse(that.current.extendProps)
|
|
|
+ }catch(e){}
|
|
|
+ }
|
|
|
+ for(const item of that.temp){
|
|
|
+ if(that.current[item.field]){
|
|
|
+ item.value = that.current[item.field]
|
|
|
+ that.checkObj[item.field] = that.current[item.field]
|
|
|
+ }
|
|
|
+ if(d && d[item.field]){
|
|
|
+ item.value = d[item.field]
|
|
|
+ that.checkObj[item.field] = d[item.field]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: err => {
|
|
|
+ let msg = ''
|
|
|
+ if(err && err.msg && err.msg.length < 15){
|
|
|
+ msg = err.msg
|
|
|
+ }else{
|
|
|
+ msg = '系统繁忙'
|
|
|
+ }
|
|
|
+ that.$refs.uToast.show({
|
|
|
+ message: msg
|
|
|
})
|
|
|
+ },
|
|
|
+ complete: () => {
|
|
|
+ // that.load = false
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- toShop() {
|
|
|
- if (this.isSelected == false) {
|
|
|
- uni.showToast({
|
|
|
- title: '还有规格未选择',
|
|
|
- icon: 'error',
|
|
|
- duration: 1000
|
|
|
- });
|
|
|
- } else {
|
|
|
- const e = uni.getStorageSync('carl')
|
|
|
- const userId = uni.getStorageSync('appUserId')
|
|
|
- const count = this.vModelValue
|
|
|
- const params = {
|
|
|
- storeId: e.id,
|
|
|
- storeName: e.name,
|
|
|
- skuId: this.caMsg.skuId,
|
|
|
- basePrice: this.caMsg.retailPrice,
|
|
|
- price: this.caMsg.retailPrice,
|
|
|
- quantity: count,
|
|
|
- extendProps: userId
|
|
|
- }
|
|
|
- this.$request('post', `/front/shoppingCart`, params, true).then(response => {
|
|
|
- // 请求成功
|
|
|
- if (response.code == 200) {
|
|
|
- // 弹出消息
|
|
|
- // uni.showToast({
|
|
|
- // title: '加入购物车成功',
|
|
|
- // icon: 'success',
|
|
|
- // duration: 2000
|
|
|
- // })
|
|
|
- this.$refs.uToast.show({
|
|
|
- type: 'success',
|
|
|
- title: '默认主题',
|
|
|
- message: "加入购物车成功",
|
|
|
- position: 'center'
|
|
|
- })
|
|
|
- this.$emit('addShop');
|
|
|
- } else if (response.code == 500) {
|
|
|
- uni.showToast({
|
|
|
- title: response.msg,
|
|
|
- icon: 'error',
|
|
|
- duration: 2000
|
|
|
- });
|
|
|
+ loadSpu(v){
|
|
|
+ let that = this;
|
|
|
+ this.load = true
|
|
|
+ this.$req({
|
|
|
+ url:'/item/spu/queryProduct/' + v,
|
|
|
+ success: res => {
|
|
|
+ let _data = res.data;
|
|
|
+ that.supValue = _data;
|
|
|
+ if(that.supValue.imgList){
|
|
|
+ for(const imgItem of that.supValue.imgList){
|
|
|
+ if(imgItem.major == '2'){
|
|
|
+ this.supValue.majorImg = imgItem.url
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }).catch(error => {
|
|
|
- // 请求失败
|
|
|
- console.error('请求失败:', error);
|
|
|
- })
|
|
|
- // 关闭弹出层
|
|
|
- this.$refs.popup.close()
|
|
|
- }
|
|
|
+ let valueFun = data => {
|
|
|
+ let n = ''
|
|
|
+ if(cartData){
|
|
|
+ let arr = cartData.skuProperties
|
|
|
+ }
|
|
|
+ return n;
|
|
|
+ }
|
|
|
+ let extendPropsData = {}
|
|
|
+ if(_data.extendProps){
|
|
|
+ that.temp = []
|
|
|
+ try{
|
|
|
+ extendPropsData = JSON.parse(_data.extendProps);
|
|
|
+ for(const key in extendPropsData.template.propValues){
|
|
|
+ let name = ''
|
|
|
+ if(key == 'color'){
|
|
|
+ name = '颜色'
|
|
|
+ }else if(key == 'size'){
|
|
|
+ name = '规格'
|
|
|
+ }else{
|
|
|
+ name = key
|
|
|
+ }
|
|
|
+ that.temp.push({
|
|
|
+ name:name,
|
|
|
+ field:key,
|
|
|
+ data:extendPropsData.template.propValues[key],
|
|
|
+ value:''
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }catch(e){}
|
|
|
+ }
|
|
|
+ that.loadSkuList(extendPropsData.multiple)
|
|
|
+ if(that.cartData){
|
|
|
+ that.loadSku(that.cartData)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: err => {
|
|
|
+ let msg = ''
|
|
|
+ if(err && err.msg && err.msg.length < 15){
|
|
|
+ msg = err.msg
|
|
|
+ }else{
|
|
|
+ msg = '系统繁忙'
|
|
|
+ }
|
|
|
+ that.$refs.uToast.show({
|
|
|
+ message: msg
|
|
|
+ })
|
|
|
+ },
|
|
|
+ complete: () => {
|
|
|
+ that.load = false
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
- totalPrice() {
|
|
|
- const e = uni.getStorageSync('carl')
|
|
|
- const userId = uni.getStorageSync('appUserId')
|
|
|
- const toList = {
|
|
|
- storeId: e.id,
|
|
|
- storeName: e.name,
|
|
|
- skuId: this.caMsg.skuId,
|
|
|
- basePrice: this.caMsg.retailPrice,
|
|
|
- price: this.caMsg.retailPrice,
|
|
|
- quantity: this.vModelValue,
|
|
|
- extendProps: userId,
|
|
|
- imgUrl: this.caMsg.img,
|
|
|
- spuId: this.caMsg.spuId,
|
|
|
- skuName: this.caMsg.skuName,
|
|
|
- skuProperties: this.caMsg.skuProperties,
|
|
|
- skuTitle: this.caMsg.title,
|
|
|
- }
|
|
|
- let total = 0;
|
|
|
- // 如果 selected 属性不存在，直接计算所有商品
|
|
|
- let priceInCents = Math.round(toList.price * 100);
|
|
|
- let quant = toList.quantity;
|
|
|
- total += priceInCents * quant;
|
|
|
-
|
|
|
- this.toList.push(toList)
|
|
|
- // 将总价格转换回浮点数（以元为单位）
|
|
|
- this.total = (total / 100).toFixed(2);
|
|
|
+ close(){
|
|
|
+ this.show = false;
|
|
|
},
|
|
|
- toBuy() {
|
|
|
- this.totalPrice()
|
|
|
- const carlist = {
|
|
|
- carlist: this.toList,
|
|
|
- total: this.total
|
|
|
- }
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/order/submitOrder/submitOrder?data=${encodeURIComponent(JSON.stringify(carlist))}`
|
|
|
- })
|
|
|
- this.toList = []
|
|
|
- console.log('carlist', carlist)
|
|
|
- this.$refs.popup.close()
|
|
|
- // if (carlist.carlist.length <= 0) {
|
|
|
- // // this.$refs.uNotify.show({'请选择'})
|
|
|
- // uni.showToast({
|
|
|
- // title: '请选择',
|
|
|
- // icon: 'error',
|
|
|
- // duration: 2000
|
|
|
- // });
|
|
|
- // } else {
|
|
|
- // uni.navigateTo({
|
|
|
- // url: `/pages/order/submitOrder/submitOrder?data=${encodeURIComponent(JSON.stringify(carlist))}`
|
|
|
- // })
|
|
|
- // this.$refs.popup.close()
|
|
|
- // }
|
|
|
- // uni.navigateTo({
|
|
|
- // url: `/pages/order/submitOrder/submitOrder`
|
|
|
- // })
|
|
|
+ open(){
|
|
|
+ this.show = true;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .btn-box {
|
|
|
+ .specPop{
|
|
|
+ height: 900upx;
|
|
|
+ overflow-y: auto;
|
|
|
+ position: relative;
|
|
|
+ padding-bottom: 150upx;
|
|
|
+ }
|
|
|
+ .btn-box{
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
justify-content: space-around;
|
|
|
align-items: center;
|
|
|
- padding-top: 80upx;
|
|
|
- padding-bottom: 40upx;
|
|
|
-
|
|
|
- .btn {
|
|
|
+ padding-top: 50upx;
|
|
|
+ padding-bottom: 30upx;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background-color: #FFF;
|
|
|
+ z-index: 10;
|
|
|
+ .btn{
|
|
|
width: 45%;
|
|
|
- height: 80upx;
|
|
|
+ height: 70upx;
|
|
|
text-align: center;
|
|
|
- line-height: 80upx;
|
|
|
- border-radius: 40upx;
|
|
|
+ line-height: 70upx;
|
|
|
+ border-radius: 35upx;
|
|
|
}
|
|
|
-
|
|
|
- .reset {
|
|
|
- border: solid 1px #EEE;
|
|
|
+ .reset{
|
|
|
+ border:solid 1px #EEE;
|
|
|
box-sizing: border-box;
|
|
|
- box-sizing: border-box;
|
|
|
- border: solid 1px #FF0000;
|
|
|
- font-size: 14px;
|
|
|
- color: #FF0000;
|
|
|
}
|
|
|
-
|
|
|
- .confirm {
|
|
|
+ .confirm{
|
|
|
background-image: $base-bg-gradient-color;
|
|
|
color: #FFF;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .spec-box {
|
|
|
+ .spec-box{
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
-
|
|
|
- .spec-item {
|
|
|
+ .spec-item{
|
|
|
height: 60upx;
|
|
|
line-height: 60upx;
|
|
|
- border: solid 1px #EEE;
|
|
|
+ border:solid 1px #EEE;
|
|
|
box-sizing: border-box;
|
|
|
text-align: center;
|
|
|
margin-left: 20upx;
|
|
|
@@ -337,49 +501,48 @@
|
|
|
margin-bottom: 20upx;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
-
|
|
|
- .spec-item:first-child {
|
|
|
+ .spec-item:first-child{
|
|
|
margin-left: 0;
|
|
|
}
|
|
|
-
|
|
|
- .on-spec {
|
|
|
+ .on-spec{
|
|
|
background-image: $base-bg-gradient-color;
|
|
|
color: #FFF;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .s-box {
|
|
|
+ .s-box{
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
border-bottom: solid 1px #EEE;
|
|
|
-
|
|
|
- .s-img {
|
|
|
+ .s-img{
|
|
|
width: 140upx;
|
|
|
height: 140upx;
|
|
|
background-color: #EEE;
|
|
|
border-radius: 4px;
|
|
|
+ >image{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- .g-info {
|
|
|
+ .g-info{
|
|
|
padding-left: 20upx;
|
|
|
-
|
|
|
- .s-name {
|
|
|
+ .s-name{
|
|
|
padding-bottom: 4px;
|
|
|
}
|
|
|
-
|
|
|
- .s-price {
|
|
|
+ .s-price{
|
|
|
color: #F00;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .purchase-num {
|
|
|
+ .purchase-num{
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
border-bottom: solid 1px #EEE;
|
|
|
- padding-bottom: 20upx;
|
|
|
+ padding-bottom: 30upx;
|
|
|
+ .num{
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
ymy