yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

【订单详情】 

1. 接入 sku 的选择
pull/1/MERGE
YunaiV 2023-06-06 22:47:43 +08:00
parent 4e465b7e72
commit c8fdda0bb0
2 changed files with 86 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
components/productWindow/index.vue
View File

@ -1,32 +1,33 @@
<template> <template>
<view> <view>
<view class="product-window" <view class="product-window"
:class="(attr.cartAttr === true ? 'on' : '') + ' ' + (iSbnt?'join':'') + ' ' + (iScart?'joinCart':'')"> :class="(attr.cartAttr === true ? 'on' : '') + ' ' + (iSbnt ? 'join':'') + ' ' + (iScart ? 'joinCart':'')">
<view class="textpic acea-row row-between-wrapper"> <view class="textpic acea-row row-between-wrapper">
<view class="pictrue"> <view class="pictrue">
<image :src="attr.productSelect.image"></image> <image :src="attr.productSelect.picUrl"></image>
</view> </view>
<view class="text"> <view class="text">
<view class="line1"> <view class="line1">
{{ attr.productSelect.storeName }} {{ attr.productSelect.spuName }}
</view> </view>
<view class="money font-color"> <view class="money font-color">
￥<text class="num">{{ attr.productSelect.price }}</text> ￥<text class="num">{{ attr.productSelect.price }}</text>
<text class="stock" v-if='isShow'>库存: {{ attr.productSelect.stock }}</text> <text class="stock" v-if='isShow'>库存: {{ attr.productSelect.stock }}</text>
<text class='stock' v-if="limitNum">限量: {{attr.productSelect.quota}}</text> <text class='stock' v-if="limitNum">限量: {{ attr.productSelect.quota }}</text>
</view> </view>
</view> </view>
<view class="iconfont icon-guanbi" @click="closeAttr"></view> <view class="iconfont icon-guanbi" @click="closeAttr"></view>
</view> </view>
<view class="rollTop"> <view class="rollTop">
<!-- 属性 key + value 列表 -->
<view class="productWinList"> <view class="productWinList">
<view class="item" v-for="(item, indexw) in attr.productAttr" :key="indexw"> <view class="item" v-for="(property, indexw) in attr.properties" :key="indexw">
<view class="title">{{ item.attrName }}</view> <view class="title">{{ property.name }}</view>
<view class="listn acea-row row-middle"> <view class="listn acea-row row-middle">
<view class="itemn" :class="item.index === itemn ? 'on' : ''" <view class="itemn" :class="property.index === value.name ? 'on' : ''"
v-for="(itemn, indexn) in item.attrValues" @click="tapAttr(indexw, indexn)" v-for="(value, indexn) in property.values" @click="clickProperty(indexw, indexn)"
:key="indexn"> :key="indexn">
{{ itemn }} {{ value.name }}
</view> </view>
</view> </view>
</view> </view>
@ -70,17 +71,16 @@
<script> <script>
export default { export default {
props: { props: {
attr: { attr: {
type: Object, type: Object,
default: () => {} default: () => {}
}, },
limitNum: { limitNum: { // TODO 芋艿：是否限流
type: Number, type: Number,
value: 0 value: 0
}, },
isShow: { isShow: { // 是否展示库存
type: Number, type: Number,
value: 0 value: 0
}, },
@ -107,7 +107,6 @@
}, },
/** /**
* 购物车手动输入数量 * 购物车手动输入数量
*
*/ */
bindCode: function(e) { bindCode: function(e) {
this.$emit('iptCartNum', this.attr.productSelect.cart_num); this.$emit('iptCartNum', this.attr.productSelect.cart_num);
@ -121,32 +120,33 @@
CartNumAdd: function() { CartNumAdd: function() {
this.$emit('ChangeCartNum', true); this.$emit('ChangeCartNum', true);
}, },
tapAttr: function(indexw, indexn) { /**
let that = this; * 选中某个规格属性
that.$emit("attrVal", { *
indexw: indexw, * @param indexw properties 的下标
indexn: indexn * @param indexn properties 的下标
}); */
this.$set(this.attr.productAttr[indexw], 'index', this.attr.productAttr[indexw].attrValues[indexn]); clickProperty: function(indexw, indexn) {
let value = that this.$set(this.attr.properties[indexw], 'index', this.attr.properties[indexw].values[indexn].name);
.getCheckedValue() let newSkuKey = this.getCheckedValueNames().join(",");
// .sort() this.$emit("ChangeAttr", newSkuKey);
.join(",");
that.$emit("ChangeAttr", value);
}, },
//获取被选中属性； /**
getCheckedValue: function() { * 获取被选中属性值的数组
let productAttr = this.attr.productAttr; *
let value = []; * @returns {*[]} 例如说，['红色', '大']
for (let i = 0; i < productAttr.length; i++) { */
for (let j = 0; j < productAttr[i].attrValues.length; j++) { getCheckedValueNames: function() {
if (productAttr[i].index === productAttr[i].attrValues[j]) { let properties = this.attr.properties;
value.push(productAttr[i].attrValues[j]); let valueNames = [];
for (let i = 0; i < properties.length; i++) {
for (let j = 0; j < properties[i].values.length; j++) {
if (properties[i].index === properties[i].values[j].name) {
valueNames.push(properties[i].values[j].name);
} }
} }
} }
return value; return valueNames;
} }
} }
} }

127
pages/goods_details/index.vue
View File

@ -299,6 +299,7 @@
import parser from "@/components/jyf-parser/jyf-parser"; import parser from "@/components/jyf-parser/jyf-parser";
import * as ProductSpuApi from '@/api/product/spu.js'; import * as ProductSpuApi from '@/api/product/spu.js';
import * as Util from '@/utils/util.js'; import * as Util from '@/utils/util.js';
import * as ProductUtil from '@/utils/product.js';
// #ifdef MP // #ifdef MP
import { import {
base64src base64src
@ -307,6 +308,7 @@
import { import {
getQrcode getQrcode
} from '@/api/api.js'; } from '@/api/api.js';
import {convertProductPropertyList, convertProductSkuMap} from "../../utils/product";
// #endif // #endif
let app = getApp(); let app = getApp();
export default { export default {
@ -368,7 +370,7 @@
attr: { // productWindow 组件，使用该属性 attr: { // productWindow 组件，使用该属性
cartAttr: false, // TODO 芋艿，还没搞懂 cartAttr: false, // TODO 芋艿，还没搞懂
// ↓↓↓ 属性数组，结构为：id = 属性编号；name = 属性编号的名字；values[].id = 属性值的编号，values[].name = 属性值的名字；index = 选中的属性值的名字 // ↓↓↓ 属性数组，结构为：id = 属性编号；name = 属性编号的名字；values[].id = 属性值的编号，values[].name = 属性值的名字；index = 选中的属性值的名字
productAttr: [], properties: [],
productSelect: {} // 选中的 SKU productSelect: {} // 选中的 SKU
}, },
navActive: 0, navActive: 0,
@ -492,9 +494,6 @@
// }); // });
// #endif // #endif
}); });
},
show() {
}, },
/** /**
* 用户点击右上角分享 * 用户点击右上角分享
@ -640,14 +639,13 @@
}, },
/** /**
* 购物车数量加和数量减 * 购物车数量加和数量减
*
*/ */
ChangeCartNum: function(changeValue) { ChangeCartNum: function(changeValue) {
//changeValue:是否 加|减 //changeValue:是否 加|减
//获取当前变动属性 //获取当前变动属性
let productSelect = this.skuMap[this.attrValue]; let productSelect = this.skuMap[this.attrValue];
//如果没有属性,赋值给商品默认库存 //如果没有属性,赋值给商品默认库存
if (productSelect === undefined && !this.attr.productAttr.length) if (productSelect === undefined && !this.attr.properties.length)
productSelect = this.attr.productSelect; productSelect = this.attr.productSelect;
//无属性值即库存为0；不存在加减； //无属性值即库存为0；不存在加减；
if (productSelect === undefined) return; if (productSelect === undefined) return;
@ -667,29 +665,25 @@
} }
} }
}, },
attrVal(val) {
this.$set(this.attr.productAttr[val.indexw], 'index', this.attr.productAttr[val.indexw].attrValues[val
.indexn]);
},
/** /**
* 属性变动赋值 * 属性变动赋值
* *
* @param newSkuKey 新的 skuKey
*/ */
ChangeAttr: function(res) { ChangeAttr: function(newSkuKey) {
let productSelect = this.skuMap[res]; let productSelect = this.skuMap[newSkuKey];
if (productSelect) { if (productSelect) {
this.$set(this.attr.productSelect, "image", productSelect.image); this.$set(this.attr.productSelect, "id", productSelect.id);
this.$set(this.attr.productSelect, "picUrl", productSelect.picUrl);
this.$set(this.attr.productSelect, "price", productSelect.price); this.$set(this.attr.productSelect, "price", productSelect.price);
this.$set(this.attr.productSelect, "stock", productSelect.stock); this.$set(this.attr.productSelect, "stock", productSelect.stock);
this.$set(this.attr.productSelect, "unique", productSelect.id);
this.$set(this.attr.productSelect, "cart_num", 1); this.$set(this.attr.productSelect, "cart_num", 1);
this.$set(this, "attrValue", res); this.$set(this, "attrValue", newSkuKey);
this.$set(this, "attrTxt", "已选择"); this.$set(this, "attrTxt", "已选择");
} else { } else {
this.$set(this.attr.productSelect, "image", this.productInfo.image); this.$set(this.attr.productSelect, "image", this.spu.image);
this.$set(this.attr.productSelect, "price", this.productInfo.price); this.$set(this.attr.productSelect, "price", this.spu.price);
this.$set(this.attr.productSelect, "stock", 0); this.$set(this.attr.productSelect, "stock", 0);
this.$set(this.attr.productSelect, "unique", this.productInfo.id);
this.$set(this.attr.productSelect, "cart_num", 1); this.$set(this.attr.productSelect, "cart_num", 1);
this.$set(this, "attrValue", ""); this.$set(this, "attrValue", "");
this.$set(this, "attrTxt", "请选择"); this.$set(this, "attrTxt", "请选择");
@ -717,7 +711,6 @@
}, },
/** /**
* 优品推荐 * 优品推荐
*
*/ */
getGoods() { getGoods() {
getProductGood().then(res => { getProductGood().then(res => {
@ -752,31 +745,19 @@
ProductSpuApi.getSpuDetail(that.id).then(res => { ProductSpuApi.getSpuDetail(that.id).then(res => {
let productInfo = res.data; let productInfo = res.data;
let spu = res.data; let spu = res.data;
let skus = res.data.skus;
that.$set(that, 'productInfo', productInfo); that.$set(that, 'productInfo', productInfo);
that.$set(that, 'spu', spu); that.$set(that, 'spu', spu);
that.$set(that, 'userCollect', res.data.userCollect); // TODO 芋艿：需要改造下，异步加载收藏状态 that.$set(that, 'userCollect', res.data.userCollect); // TODO 芋艿：需要改造下，异步加载收藏状态
if (true) { that.$set(that.attr, 'properties', ProductUtil.convertProductPropertyList(skus));
return; that.$set(that, 'skuMap', ProductUtil.convertProductSkuMap(skus));
}
that.$set(that.attr, 'productAttr', res.data.productAttr);
that.$set(that, 'skuMap', res.data.skuMap);
that.$set(that.sharePacket, 'priceName', res.data.priceName); that.$set(that.sharePacket, 'priceName', res.data.priceName);
that.$set(that.sharePacket, 'isState', Math.floor(res.data.priceName) === 0); that.$set(that.sharePacket, 'isState', Math.floor(res.data.priceName) === 0);
that.$set(that, 'activityH5', res.data.activityAllH5 ? res.data.activityAllH5 : []); that.$set(that, 'activityH5', res.data.activityAllH5 ? res.data.activityAllH5 : []);
uni.setNavigationBarTitle({ // 设置标题
title: productInfo.storeName.substring(0, 7) + "..." uni.setNavigationBarTitle({
title: productInfo.name.substring(0, 7) + "..."
}) })
let productAttr = this.attr.productAttr.map(item => {
return {
attrName : item.attrName,
attrValues: item.attrValues.split(','),
id:item.id,
isDel:item.isDel,
productId:item.productId,
type:item.type
}
});
this.$set(this.attr,'productAttr',productAttr);
if (that.isLogin) { if (that.isLogin) {
that.getCartCount(); that.getCartCount();
//#ifdef H5 //#ifdef H5
@ -799,6 +780,7 @@
// #endif // #endif
that.DefaultSelect(); that.DefaultSelect();
}).catch(err => { }).catch(err => {
console.error(err)
if (true) { if (true) {
return; return;
} }
@ -870,56 +852,50 @@
success: function() {}, success: function() {},
}); });
}, },
/** /**
* 默认选中属性 * 查找默认选中的 sku，设置到 attr.productSelect 中
*
*/ */
DefaultSelect: function() { DefaultSelect: function() {
let productAttr = this.attr.productAttr; let properties = this.attr.properties;
let value = []; // 获得选中的属性值的名字，例如说 "黑色,大"，则 skuKey = ["黑色", "大"]
for (let key in this.skuMap) { let skuKey = [];
for (let key in this.skuMap) {
if (this.skuMap[key].stock > 0) { if (this.skuMap[key].stock > 0) {
value = this.attr.productAttr.length ? key.split(",") : []; skuKey = this.attr.properties.length ? key.split(",") : [];
break; break;
} }
} }
for (let i = 0; i < productAttr.length; i++) { // 使用 index 属性表示当前选中的，值为属性值的名字
this.$set(productAttr[i], "index", value[i]); for (let i = 0; i < properties.length; i++) {
this.$set(properties[i], "index", skuKey[i]);
} }
//sort();排序函数:数字-英文-汉字；
let productSelect = this.skuMap[value.join(",")]; // sort();排序函数:数字-英文-汉字；
if (productSelect && productAttr.length) { let productSelect = this.skuMap[skuKey.join(",")];
this.$set( // 情况一：选中 SKU，并且有规格
this.attr.productSelect, if (productSelect && properties.length) {
"storeName", this.$set(this.attr.productSelect, "spuName", this.spu.name);
this.productInfo.storeName this.$set(this.attr.productSelect, "id", productSelect.id);
); this.$set(this.attr.productSelect, "picUrl", productSelect.picUrl);
this.$set(this.attr.productSelect, "image", productSelect.image);
this.$set(this.attr.productSelect, "price", productSelect.price); this.$set(this.attr.productSelect, "price", productSelect.price);
this.$set(this.attr.productSelect, "stock", productSelect.stock); this.$set(this.attr.productSelect, "stock", productSelect.stock);
this.$set(this.attr.productSelect, "unique", productSelect.id);
this.$set(this.attr.productSelect, "cart_num", 1); this.$set(this.attr.productSelect, "cart_num", 1);
this.$set(this, "attrValue", value.join(",")); this.$set(this, "attrValue", skuKey.join(","));
this.$set(this, "attrTxt", "已选择"); this.$set(this, "attrTxt", "已选择");
} else if (!productSelect && productAttr.length) { // 情况二：未选中 SKU，并且有规格
this.$set( } else if (!productSelect && properties.length) {
this.attr.productSelect, this.$set(this.attr.productSelect, "spuName", this.spu.name);
"storeName", this.$set(this.attr.productSelect, "id", productSelect.id);
this.productInfo.storeName this.$set(this.attr.productSelect, "picUrl", productSelect.picUrl);
); this.$set(this.attr.productSelect, "price", productSelect.price);
this.$set(this.attr.productSelect, "image", this.productInfo.image); this.$set(this.attr.productSelect, "stock", 0);
this.$set(this.attr.productSelect, "price", this.productInfo.price);
this.$set(this.attr.productSelect, "stock", 0);
this.$set(this.attr.productSelect, "unique", this.productInfo.id);
this.$set(this.attr.productSelect, "cart_num", 1); this.$set(this.attr.productSelect, "cart_num", 1);
this.$set(this, "attrValue", ""); this.$set(this, "attrValue", "");
this.$set(this, "attrTxt", "请选择"); this.$set(this, "attrTxt", "请选择");
} else if (!productSelect && !productAttr.length) { // TODO 芋艿：啥情况会出现呢？
this.$set( } else if (!productSelect && !properties.length) {
this.attr.productSelect, this.$set(this.attr.productSelect, "storeName", this.productInfo.storeName);
"storeName",
this.productInfo.storeName
);
this.$set(this.attr.productSelect, "image", this.productInfo.image); this.$set(this.attr.productSelect, "image", this.productInfo.image);
this.$set(this.attr.productSelect, "price", this.productInfo.price); this.$set(this.attr.productSelect, "price", this.productInfo.price);
this.$set(this.attr.productSelect, "stock", this.productInfo.stock); this.$set(this.attr.productSelect, "stock", this.productInfo.stock);
@ -935,7 +911,6 @@
}, },
/** /**
* 获取优惠券 * 获取优惠券
*
*/ */
getCouponList(type) { getCouponList(type) {
let that = this, let that = this,
@ -1040,7 +1015,7 @@
return (that.isOpen = true); return (that.isOpen = true);
//如果有属性,没有选择,提示用户选择 //如果有属性,没有选择,提示用户选择
if ( if (
that.attr.productAttr.length && that.attr.properties.length &&
productSelect.stock === 0 && productSelect.stock === 0 &&
that.isOpen === true that.isOpen === true
) )
@ -1052,7 +1027,7 @@
productId: parseFloat(that.id), productId: parseFloat(that.id),
cartNum: parseFloat(that.attr.productSelect.cart_num), cartNum: parseFloat(that.attr.productSelect.cart_num),
isNew: false, isNew: false,
productAttrUnique: that.attr.productSelect !== undefined ? propertiesUnique: that.attr.productSelect !== undefined ?
that.attr.productSelect.unique : that.productInfo.id that.attr.productSelect.unique : that.productInfo.id
}; };
postCartAdd(q).then(function(res) { postCartAdd(q).then(function(res) {