商品详情

parent 3f9e4b46
......@@ -7,7 +7,22 @@ export function getProdDetail(data) {
method: 'GET',
});
}
// 商品详情评论数量和好评率
export function getEvalNumber(data) {
return request({
url: `/sgyrdd/evaluation/getEvalNumber`,
method: 'GET',
data,
});
}
// 加入购物车
export function addOrder(data) {
return request({
url: `/sgyrdd/sgyBasket/add`,
method: 'POST',
data,
});
}
// 套餐详情
export function getCollect(data) {
return request({
......
......@@ -10,7 +10,7 @@
"path": "pages/index/loading",
"style": {
"navigationBarTitleText": "加载",
"navigationStyle":"custom",
"navigationStyle":"custom"
}
},
{
......
......@@ -13,51 +13,42 @@
</view>
<!-- 图片-->
<view class="nav">
<img
class="main-img"
src="/static/assistingAgriculture/detail/img2.png"
style="width: 750rpx; height: 668rpx"
/>
<view class="pre-icon">
<img
class="left-icon"
src="/static/assistingAgriculture/detail/img4.png"
style="width: 248rpx; height: 100rpx; position: relative"
/>
<img
class="right-icon"
src="/static/assistingAgriculture/detail/img3.png"
style="width: 546rpx; height: 62rpx"
/>
</view>
<view class="pre-text">
<text class="left-text">预售</text>
<text class="right-text">预计9月15日发货</text>
</view>
<wd-swiper
:list="dataDetails.prod.imgs"
autoplay
:indicator="{ type: 'fraction' }"
indicatorPosition="bottom-right"
@click="handleClick"
@change="onChange"
height="512rpx"
></wd-swiper>
</view>
<!--详情-->
<view class="detail">
<view class="detail-title">筑农散养虫子土鸡(未下蛋小母鸡)1.5kg</view>
<view class="detail-title">{{ dataDetails.prod.prodName }}</view>
<view class="detail-int">
这是商品简介这是商品简介这是商品简介这是商品简介这是商品 简介这是商品简介这是商品简介
{{ dataDetails.prodPresale.memo }}
</view>
<view>
<!-- <view>
<img class="share-img" src="/static/assistingAgriculture/detail/share.png" />
<text class="share-text" @click="share">分享</text>
</view>
</view> -->
</view>
<view class="evaluate">
<view class="evaluate-num">
<text class="env">评价(0</text>
<text class="num">好评率(100%)</text>
<text class="env">评价({{ commentData.count }}</text>
<text class="num">好评率({{ commentData.high }} %)</text>
<wd-icon name="arrow-right" size="32rpx" style="margin-top: 2rpx"></wd-icon>
</view>
</view>
<!-- 详情图-->
<view class="detail-info">
<text class="info-title">详情</text>
<img class="info-img" src="/static/assistingAgriculture/detail/detail-img.png" />
<img class="info-img" src="/static/assistingAgriculture/detail/detail-img.png" />
<!-- <img class="info-img" src="/static/assistingAgriculture/detail/detail-img.png" />
<img class="info-img" src="/static/assistingAgriculture/detail/detail-img.png" /> -->
<view class="content">
<rich-text class="desc" :nodes="dataDetails.prod.content"></rich-text>
</view>
</view>
<!-- 底部-->
<view class="detail-bottom">
......@@ -70,13 +61,13 @@
/>
<view class="sort-text">店铺</view>
</view>
<view class="borderClass">
<!-- <view class="borderClass">
<img
src="/static/assistingAgriculture/detail/img8.png"
style="width: 40rpx; height: 40rpx"
/>
<view class="sort-text">客服</view>
</view>
</view> -->
<view class="borderClass" @tap="toCart">
<wd-badge modelValue="4">
<img
......@@ -95,7 +86,9 @@
<!-- </view>-->
<!-- </view>-->
<view class="btn">
<wd-button type="warning" size="small" style="margin-right: 10rpx">加入购物车</wd-button>
<wd-button @tap="addOrderFn" type="warning" size="small" style="margin-right: 10rpx">
加入购物车
</wd-button>
<wd-button type="error" size="small" @tap="toSettle">立即购买</wd-button>
</view>
</view>
......@@ -107,19 +100,86 @@
import Search from '../../../components/assistingAgriculture/index/Search.vue';
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import {
getProdDetail,
getEvalNumber,
addOrder,
getCollect,
getCouponShopList,
receiveCoupon,
} from '@/api/packageDetail';
const imgUrl = import.meta.env.VITE_APP_IMG_URL;
// 图片
const swiperList = ref([
'../../static/assistingAgriculture/detail/img2.png',
'../../static/assistingAgriculture/detail/img2.png',
'../../static/assistingAgriculture/detail/img2.png',
]);
const swiperList2 = ref([
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg',
]);
// 底部
const storeList = ref([
{ img: '/static/assistingAgriculture/detail/img7.png', text: '店铺' },
{ img: '/static/assistingAgriculture/detail/img8.png', text: '客服' },
{ img: '/static/assistingAgriculture/detail/img6.png', text: '购物车' },
]);
let prodId;
const dataDetails = ref({});
const commentData = ref({});
onLoad((options) => {
prodId = '43834';
getProdDetailFn();
getEvalNumberFn();
});
function handleClick(e) {
console.log(e);
}
function onChange(e) {
console.log(e);
}
// 获取商品详情
const getProdDetailFn = () => {
getProdDetail(prodId).then((res) => {
res.data.data.prod.imgs = res.data.data.prod.imgs
.split(',')
.map((item) => {
if (item !== '') {
item = imgUrl + item;
}
return item;
})
.filter((item) => {
return item !== '';
});
dataDetails.value = res.data.data;
console.log('打印', dataDetails.value);
});
};
// 获取商品评价数量
const getEvalNumberFn = () => {
getEvalNumber({ prodId }).then((res) => {
console.log('评价数量', res);
commentData.value = res.data;
});
};
// 加入购物车
const addOrderFn = () => {
const orderParams = {
shopId: dataDetails.value.prod.prodId,
prodId: dataDetails.value.prodParameters.prodId,
skuId: dataDetails.value.skus[0].skuId,
shopType: 3,
basketCount: 1,
};
addOrder(orderParams).then((res) => {
console.log('加入购物车', res);
});
};
// 进入页面回到顶部
onShow(() => {
uni.pageScrollTo({
......@@ -322,6 +382,13 @@ page {
z-index: 9;
top: -8rpx;
padding-bottom: 120rpx;
.content {
.desc {
img {
width: 100%;
}
}
}
}
.info-title {
width: 64rpx;
......
......@@ -10,8 +10,8 @@ import { getTokenUser } from '../../api/index';
import { getToken } from '../../utils/auth';
onMounted(async () => {
// await signIn();
if (!getToken()) await signIn2();
await signIn();
// if (!getToken()) await signIn2();
xma.reLaunch({ url: '/pages/index/index' });
});
......
......@@ -9,8 +9,13 @@
<view class="item01" prop="merchantServices">
<text class="label">评分</text>
<!-- 评分 -->
<wd-rate v-model="formdata.merchantServices" active-color="#ff0000" size="50rpx" space="10px"
@change="handlemerchant" />
<wd-rate
v-model="formdata.merchantServices"
active-color="#ff0000"
size="50rpx"
space="10px"
@change="handlemerchant"
/>
</view>
<view class="item02">
<text>{{ merList[formdata.merchantServices] }}</text>
......@@ -18,20 +23,34 @@
</view>
<!-- 内容描述 -->
<view prop="evaluation">
<wd-textarea v-model="formdata.evaluation" placeholder="亲,分享您的看法,给其他人一个参考哦!" />
<wd-textarea
v-model="formdata.evaluation"
placeholder="亲,分享您的看法,给其他人一个参考哦!"
/>
</view>
<wd-cell title-width="0px"></wd-cell>
<text class="textarea">上传图片/视频</text>
<!-- 图片上传 -->
<view class="wdUpload" prop="images">
<wd-upload multiple :action="action" @change="handleFile" :file-list="formdata.images"
:before-remove="beforeRemove" :header="headers"></wd-upload>
<wd-upload
multiple
:action="action"
@change="handleFile"
:file-list="formdata.images"
:before-remove="beforeRemove"
:header="headers"
></wd-upload>
</view>
<!-- 匿名评价 -->
<wd-cell title="匿名评价" prop="isAnonymous" class="itemSwichval">
<wd-switch size="48rpx" active-color="#EC1B1B" v-model="formdata.isAnonymous" active-value="1"
inactive-value="0" />
<wd-switch
size="48rpx"
active-color="#EC1B1B"
v-model="formdata.isAnonymous"
active-value="1"
inactive-value="0"
/>
</wd-cell>
</wd-cell-group>
</wd-form>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment