完成商品分类、商品详情展示

This commit is contained in:
TOP糯米 2023-03-08 11:40:04 +08:00
parent 155713faae
commit 6a891ae24b
5 changed files with 165 additions and 40 deletions

View File

@ -3,10 +3,8 @@
<image class="cover-image" mode="aspectFill" :src="data.icon" @click="clickItem(data.id)"></image> <image class="cover-image" mode="aspectFill" :src="data.icon" @click="clickItem(data.id)"></image>
<view class="item-box" @click="clickItem(data.id)"> <view class="item-box" @click="clickItem(data.id)">
<view class="title limit-line clamp-1">{{ data.name }}</view> <view class="title limit-line clamp-1">{{ data.name }}</view>
<view class="text-box"> <view class="text-box"> 已服务{{ data.times }} </view>
{{ "已服务113256次" }} <view class="price">¥ {{ data.price }}</view>
</view>
<view class="price">¥158元起</view>
</view> </view>
</view> </view>
</template> </template>

View File

@ -25,12 +25,55 @@ export default {
auth: true, auth: true,
} }
}, },
project: {
project: {
url: "/project/applyinfo",
},
projectList: {
url: "/project/alllist",
},
business: {
url: "/project/applyinfob",
},
businessList: {
url: "/project/alllistb",
},
afterMarket: {
url: "/project/applyguarantee"
},
afterMarketList: {
url: "/project/allguaranteelist"
},
distribution: {
config: {
url: "/index/getdistributionmoney"
},
carType: {
url: "/index/getallcar"
},
submit: {
url: "/project/distribution"
},
pay: {
url: "/wxpay/payorderd"
}
}
},
service: { service: {
aftermarket: { aftermarket: {
url: "/index/category2", url: "/index/category2",
}, },
hotCate: {
url: "/index/hotcategory",
},
cate: { cate: {
url: "/index/category1", url: "/index/category1",
}, },
list: {
url: "/index/getcategorybyid"
},
goodsDetail: {
url: "/index/goodsinfobyid",
}
}, },
} }

View File

@ -60,34 +60,65 @@ export default {
x: x - this.$utils.rpx2px(20), x: x - this.$utils.rpx2px(20),
y: y - this.$utils.rpx2px(40), y: y - this.$utils.rpx2px(40),
}; };
this.$request({ //
api: "service.cate", this.loadHot();
}) this.loadCate();
.then((response) => {
response.data.forEach((item) => {
let child = [];
item.child.forEach((v) => {
child.push({
id: v.id,
name: v.name,
icon: v.more,
});
});
this.data.push({
id: item.id,
name: item.name,
icon: item.more,
child: child,
});
});
})
.catch((e) => {});
}, },
onShow() {}, onShow() {},
onReady() {}, onReady() {},
onReachBottom() {}, onReachBottom() {},
onPullDownRefresh() {}, onPullDownRefresh() {},
methods: { methods: {
/**
* 热门推荐
*/
loadHot() {
this.$request({
api: "service.hotCate",
}).then((response) => {
let child = [];
response.data.forEach((item) => {
child.push({
id: item.id,
name: item.name,
icon: item.more,
});
});
this.data.push({
id: 0,
name: "热门推荐",
icon: "",
child: child,
});
});
},
/**
* 分类
*/
loadCate() {
this.$request({
api: "service.cate",
})
.then((response) => {
response.data.forEach((item) => {
let child = [];
item.child.forEach((v) => {
child.push({
id: v.id,
name: v.name,
icon: v.more,
});
});
this.data.push({
id: item.id,
name: item.name,
icon: item.more,
child: child,
});
});
})
.catch((e) => {});
},
clickItem(id) { clickItem(id) {
this.$utils.toPage("/pages/service/list?id=" + id); this.$utils.toPage("/pages/service/list?id=" + id);
}, },

View File

@ -36,7 +36,7 @@
<text class="text">空调安装</text> <text class="text">空调安装</text>
</view> </view>
<view class="text-box"> <view class="text-box">
<text class="text">已服务812121</text> <text class="text">已服务{{ detail.times }}</text>
</view> </view>
<view class="share-icon" @click="share"> <view class="share-icon" @click="share">
<text class="iconfont icon-fenxiang"></text> <text class="iconfont icon-fenxiang"></text>
@ -63,7 +63,7 @@
</swiper> </swiper>
<view class="common-bottom-components" v-if="tabIndex == 0" :style="{ bottom: config.safeAreaInsets.bottom + 'px' }"> <view class="common-bottom-components" v-if="tabIndex == 0" :style="{ bottom: config.safeAreaInsets.bottom + 'px' }">
<view class="price"> <view class="price">
<text class="text">¥306.00</text> <text class="text">¥{{ detail.price }}</text>
</view> </view>
<view class="btn-group"> <view class="btn-group">
<view class="cart"> <view class="cart">
@ -90,15 +90,13 @@ export default {
currentBanner: 1, currentBanner: 1,
bottom: 0, bottom: 0,
pageTitle: "服务详情", pageTitle: "服务详情",
id: 0,
detail: { detail: {
title: "服务标题", title: "",
images: [ times: 0,
require("@/static/temp/cate/5.png"), images: [],
require("@/static/temp/cate/5.png"), content: "",
require("@/static/temp/cate/5.png"), price: 0,
],
content:
"<p>这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容</p>",
}, },
}; };
}, },
@ -110,16 +108,40 @@ export default {
config: (state) => state.system.config, config: (state) => state.system.config,
}), }),
}, },
onLoad() { onLoad(e) {
this.$nextTick(() => { if (e.id) {
this.setTabHeight(); this.id = e.id;
}); } else {
this.$utils.toast("参数错误");
return;
}
this.getDetail();
}, },
onShow() {}, onShow() {},
onReady() {}, onReady() {},
onReachBottom() {}, onReachBottom() {},
onPullDownRefresh() {}, onPullDownRefresh() {},
methods: { methods: {
getDetail() {
this.$request({
api: "service.goodsDetail",
data: {
id: this.id,
},
}).then((response) => {
this.detail = {
title: response.data.goods.post_title,
times: response.data.goods.post_hits,
images: response.data.goods.image,
content: response.data.goods.post_content,
price: response.data.goods.money,
};
this.$nextTick(() => {
this.setTabHeight();
});
});
},
share() { share() {
uni.showToast({ uni.showToast({
title: "分享", title: "分享",

View File

@ -49,12 +49,43 @@ export default {
this.$utils.toast("参数错误"); this.$utils.toast("参数错误");
return; return;
} }
this.loadList();
}, },
onShow() {}, onShow() {},
onReady() {}, onReady() {},
onReachBottom() {}, onReachBottom() {},
onPullDownRefresh() {}, onPullDownRefresh() {},
methods: { methods: {
/**
* 加载列表
*/
loadList() {
this.$request({
api: "service.list",
query: "id=" + this.cateId,
})
.then((response) => {
response.data.forEach((item) => {
let goods = [];
item.goods.forEach((v) => {
goods.push({
id: v.id,
name: v.post_title,
times: v.post_hits,
icon: v.thumbnail,
price: v.money,
});
});
this.data.push({
id: item.id,
name: item.name,
icon: item.more,
child: goods,
});
});
})
.catch((e) => {});
},
createOrder() { createOrder() {
this.$utils.toPage("/pages/order/create"); this.$utils.toPage("/pages/order/create");
}, },