diff --git a/src/subpackage/mall/components/goods_item.vue b/src/subpackage/mall/components/goods_item.vue
index a0b95ce..c1c74ae 100644
--- a/src/subpackage/mall/components/goods_item.vue
+++ b/src/subpackage/mall/components/goods_item.vue
@@ -1,28 +1,58 @@
-
-
- 克洛斯威羽毛球拍2支装C8正品碳素成人进攻型羽毛成人进攻型羽毛…
- 特价
+
+
+ {{ name || '-' }}
+
+
¥
- 59.9
+ {{ price || '0' }}
- /2支
+
+
- ¥69.9
-
+
+ ¥{{ delPrice || 0 }}
+
@@ -40,6 +60,10 @@ export default {
&+.il-item{
margin-left: 80upx;
}
+ &.il-active{
+ color: $mColor;
+ font-weight: 500;
+ }
}
}
}
diff --git a/src/subpackage/mall/components/index_search_bar.vue b/src/subpackage/mall/components/index_search_bar.vue
index 5d18243..ecf7947 100644
--- a/src/subpackage/mall/components/index_search_bar.vue
+++ b/src/subpackage/mall/components/index_search_bar.vue
@@ -5,7 +5,7 @@
搜索
-
+
88
@@ -14,7 +14,12 @@
diff --git a/src/subpackage/mall/components/number_operate.vue b/src/subpackage/mall/components/number_operate.vue
index ad78fb7..cc2035c 100644
--- a/src/subpackage/mall/components/number_operate.vue
+++ b/src/subpackage/mall/components/number_operate.vue
@@ -1,19 +1,30 @@
-
-
-
+
+
+
diff --git a/src/subpackage/mall/components/specification_modal.vue b/src/subpackage/mall/components/specification_modal.vue
index d99e6cf..b3cce2e 100644
--- a/src/subpackage/mall/components/specification_modal.vue
+++ b/src/subpackage/mall/components/specification_modal.vue
@@ -2,13 +2,13 @@
-
+
- 克洛斯威羽毛球拍2支装C8正品碳素成人进攻型羽毛球克洛斯威羽毛球拍2支装C8正品碳素成人进攻型羽毛球
+ {{ initData.name || '-' }}
- ¥59.9
- /2支
+ ¥{{ initData.price || '0' }}
+
库存：6
@@ -16,17 +16,25 @@
-
- 规格
+
+ {{ e.name || '-' }}
- 比赛专用
+
+ {{ k || '-' }}
+
购买数量
-
+
加入购物车
@@ -37,24 +45,83 @@
import modalBox from "./modal_box.vue";
import lineButton from "./line_button.vue";
import numberOperate from "./number_operate.vue";
+import { routeTo, debounce, showLoad, hideLoad, showModal, showNone, tsRoute, jsonStr } from "@/utils/util.js";
+import { MALL_API } from "../js/api";
+import server from "../js/server";
export default {
components: {
modalBox,
lineButton,
numberOperate
},
+ computed: {
+ goodsSpecArr(){
+ let { initData } = this;
+ return initData?.specArr ?? []
+ }
+ },
data() {
return {
isShow: false,
+ goodsNum: 0,
+ initData: {
+ /**
+ * @param {Number} poster 海报
+ * @param {Number} id 商品id
+ * @param {String} name 商品名称
+ * @param {Number} price 商品价格
+ *
+ */
+ },
+ specArr: [],
+ specSelectedArr: [],
}
},
methods: {
- alert(){
+ specItemClick(e, k){
+ this.specSelectedArr.push({ pid: e?.id, val: k });
+ },
+ getActiveBol(val){
+ let { specSelectedArr } = this;
+ return specSelectedArr.some(item => {
+ let [ id, spec] = val.split('_');
+ return item.pid === id && item.val === spec;
+ });
+ },
+ alert(data){
this.isShow = true;
+ this.initData = data ?? {};
},
hide(){
this.isShow = false;
- }
+ },
+ goodsCartAdd({ brand_id, id = '', nums = 1, spec_arr = [] }){
+ showLoad();
+ return server.post({
+ url: MALL_API.goodsCartAdd,
+ data: { brand_id, id, nums, spec_arr },
+ isDefaultGet: false,
+ })
+ .then(res => {
+ hideLoad();
+ let _data = res?.data || {};
+ if(_data.code === 0){
+ console.log('subpackage mall components specification goodsCartAdd res --->', _data);
+ showNone('加入购物车成功~');
+ return _data?.data;
+ }else{
+ return Promise.reject(_data);
+ }
+ })
+ .catch(err => {
+ hideLoad();
+ showModal({
+ title: '提示',
+ content: err.message || '操作失败！'
+ })
+ console.warn('subpackage mall components specification goodsCartAdd err --->', err);
+ })
+ },
}
}
@@ -72,7 +139,6 @@ export default {
margin-right: 20upx;
width: 172upx;
height: 172upx;
- background: skyblue;
}
.sg-right{
flex-grow: 1;
@@ -133,6 +199,11 @@ export default {
border-radius: 10upx;
background: #F2F2F7;
@include flcw(24upx, 34upx, #333333);
+ &.si-active{
+ color: $mColor !important;
+ background: rgba($color: $mColor, $alpha: .14);
+ border: rgba($color: $mColor, $alpha: .2);
+ }
}
}
}
diff --git a/src/subpackage/mall/js/api.js b/src/subpackage/mall/js/api.js
new file mode 100644
index 0000000..457697a
--- /dev/null
+++ b/src/subpackage/mall/js/api.js
@@ -0,0 +1,8 @@
+import { ORIGIN } from '@/js/api';
+
+export const MALL_API = {
+ homeShow:`${ORIGIN}/shop2/homeShow`, // 首页设置信息
+ goodsCartAdd:`${ORIGIN}/shop2/goodsCartAdd`, //购物车 - 添加商品
+}
+
+export default { ORIGIN, MALL_API };
\ No newline at end of file
diff --git a/src/subpackage/mall/js/server.js b/src/subpackage/mall/js/server.js
new file mode 100644
index 0000000..bb26f41
--- /dev/null
+++ b/src/subpackage/mall/js/server.js
@@ -0,0 +1,10 @@
+import { Server } from '@/js/server';
+
+class Servers extends Server {
+ constructor(props){
+ super(props)
+ }
+}
+
+
+export default new Servers();
\ No newline at end of file
diff --git a/src/subpackage/mall/pages/index.vue b/src/subpackage/mall/pages/index.vue
index d62c01c..5d01319 100644
--- a/src/subpackage/mall/pages/index.vue
+++ b/src/subpackage/mall/pages/index.vue
@@ -1,42 +1,70 @@
-
-
-
- 健身训练
+
+
+
+ {{ e.name || '-' }}
-
-
-
+
+
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
-
+
+
+
+
+
+
+
-
+
+
+
@@ -48,6 +76,9 @@ import indexSearchBar from "../components/index_search_bar.vue";
import indexClassifyBar from "../components/index_classify_bar.vue";
import goodsItem from "../components/goods_item.vue";
import spacificationModal from "../components/specification_modal.vue";
+import { routeTo, debounce, showLoad, hideLoad, showModal, showNone, tsRoute, jsonStr } from "@/utils/util.js";
+import { MALL_API } from "../js/api";
+import server from "../js/server";
export default {
components: {
indexSearchBar,
@@ -55,15 +86,117 @@ export default {
goodsItem,
spacificationModal
},
+ computed: {
+ banner(){
+ return this.indexData?.banner ?? [];
+ },
+ showdata(){
+ return this.indexData?.showdata ?? {};
+ },
+ goodsCate(){
+ return this.indexData?.goodsCate ?? [];
+ },
+ goodsCateClassify(){
+ let { goodsCate } = this;
+ return goodsCate.map(item=> item?.product_cate_name ?? '');
+ },
+ goodsCateList(){
+ let { goodsCate, goodsCateIdx } = this;
+ if(goodsCateIdx < 0)return [];
+ return goodsCate?.[goodsCateIdx]?.cate_goods ?? []
+ }
+ },
data() {
return {
- tImg: 'http://imgcdn.ouxuanzhineng.cn/upload/shopBanner/6b77330084b3732bad96250beeded038.png'
+ brand_id: '',
+ indexData: {},
+ goodsCateIdx: 0,
}
},
+ onLoad(options) {
+ let _bid = options?.brand_id ?? '';
+ this.brand_id = _bid;
+ this.getHomeData({ brand_id: _bid });
+ },
methods: {
- goodsItemAddBtn(){
- this.$refs.spacificationModal.alert();
- }
+ getGridLsFor(key){
+ let { showdata } = this;
+ return showdata?.[key]?.grid_setting ?? [];
+ },
+ bannerClick(info){
+ // 20210823
+ // 首先判断 banner_jump=1/0(是/否) 是否跳转
+ // 再判断跳转类型 banner_jump_type=0/1(小程序/外链)
+ // 跳转的地址 都用 banner_jump_link
+ if(info&&info.banner_jump == 1){
+ if(info.banner_jump_type == 0)return tsRoute(info.banner_jump_link);
+ if(info.banner_jump_type == 1)return routeTo(`/pages/web_view/web_view?link=${jsonStr(info.banner_jump_link)}`,'nT');
+ }
+ },
+ linkClick(info) {
+ // 20210407 取消映射
+ // type 不用 用link_address
+ // link_type: 0->小程序内链/1-> 外链
+ // 先判断link_status 是否跳转页面 再判断link_type 是否是外链
+ // link_type 是 0 的话是小程序页面 以前是拿type 映射 现在改成跟外链一样的字段
+ // 简单的说就是不用映射了 直接判断link_type == 0 就是小程序内链 用 link_address
+ if(info&&info.link_status == 1){
+ if(info.link_type == 0)return tsRoute(info.link_address);
+ if(info.link_type == 1)return routeTo(`/pages/web_view/web_view?link=${jsonStr(info.link_address)}`,'nT');
+ }
+ },
+ goodsItemAddBtn(e){
+ let { brand_id } = this;
+ // 如果商品是多个规格属性的，则出现弹窗给用户选择规格加入购物车，如果是单规格的则直接加入购物车
+ // 根据product_spec_multi字段做判断 等于1则是多规格
+ if(e.product_spec_multi == 1){
+ this.$refs.spacificationModal.alert({
+ poster: e?.product_imgs?.[0] ?? '',
+ name: e?.product_name ?? '',
+ price: e?.product_price ?? '',
+ specArr: e?.product_spec ?? [],
+ });
+ return
+ }
+
+ this.$refs?.spacificationModal?.goodsCartAdd({ brand_id, id: e?.id, });
+
+
+ },
+ // 是否展示模块
+ isShow(val) {
+ let { showdata } = this;
+ let _home_mods = showdata?.home_mods || [];
+ let _isModsArr = _home_mods.filter(item => item.is_show === 1);
+ let _isModsNames = _isModsArr.map(item => item.name);
+ return _isModsNames.includes(val);
+ },
+ getHomeData({ brand_id }){
+ showLoad();
+ return server.post({
+ url: MALL_API.homeShow,
+ data: { brand_id },
+ isDefaultGet: false,
+ })
+ .then(res => {
+ hideLoad();
+ let _data = res?.data || {};
+ if(_data.code === 0){
+ console.log('subpackage mall pages index getHomeData res --->', _data);
+ return this.indexData = _data?.data ?? {};
+ }else{
+ return Promise.reject(_data);
+ }
+ })
+ .catch(err => {
+ hideLoad();
+ showModal({
+ title: '提示',
+ content: err.message || '加载失败！'
+ })
+ console.warn('subpackage mall pages index getHomeData err --->', err);
+ })
+ },
}
}
@@ -119,7 +252,6 @@ export default {
height: 88upx;
border-radius: 50%;
overflow: hidden;
- background: skyblue;
}
.mi-txt{
margin-top: 12upx;
@@ -155,7 +287,6 @@ export default {
flex-shrink: 0;
width: 340upx;
height: 236upx;
- background: skyblue;
}
}
.mi-classify-list{
diff --git a/src/utils/util.js b/src/utils/util.js
index dd58f9d..c7fb4f3 100644
--- a/src/utils/util.js
+++ b/src/utils/util.js
@@ -50,6 +50,21 @@ export const routeTo = (url,type) => {
}
}
+export const tsRoute = url => {
+ uni.navigateTo({
+ url,
+ fail: event =>{
+ console.warn(url, 'util nt 跳转失败---->', event);
+ uni.switchTab({
+ url,
+ fail: ele=>{
+ console.warn(url, 'util st 跳转失败---->', ele);
+ }
+ })
+ }
+ })
+}
+
export function showNone(txt,duration=1500){
uni.hideToast();
uni.hideLoading();