Commit 10bd6f5a authored by 石建新(贵阳日报)'s avatar 石建新(贵阳日报)
parents 3dbc02a8 07fcc92b
import { request } from '../utils/request';
export function groupBuyList() {
return request({
url: '/sgyrdd/category/groupBuyList',
method: 'GET',
});
}
// 新增收货地址
export async function addAddress() {
return request({
url: '/sgyrdd/useraddr/add',
method: 'GET',
});
}
// 修改收货地址
export async function updateAddress() {
return request({
url: '/sgyrdd/useraddr/update',
method: 'GET',
});
}
// 删除收货地址
export async function deleteAddress(addrId) {
return request({
url: `/sgyrdd/useraddr/delete/${addrId}`,
method: 'GET',
});
}
// 查询收货地址列表
export async function getAddressList() {
return request({
url: '/sgyrdd/useraddr/list',
method: 'GET',
});
}
...@@ -7,7 +7,22 @@ export function getProdDetail(data) { ...@@ -7,7 +7,22 @@ export function getProdDetail(data) {
method: 'GET', 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) { export function getCollect(data) {
return request({ return request({
......
...@@ -16,3 +16,4 @@ export function applyShop(data) { ...@@ -16,3 +16,4 @@ export function applyShop(data) {
data, data,
}); });
} }
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
"path": "pages/index/loading", "path": "pages/index/loading",
"style": { "style": {
"navigationBarTitleText": "加载", "navigationBarTitleText": "加载",
"navigationStyle":"custom", "navigationStyle":"custom"
} }
}, },
{ {
...@@ -256,4 +256,4 @@ ...@@ -256,4 +256,4 @@
"globalStyle": { "globalStyle": {
"navigationStyle": "custom" "navigationStyle": "custom"
} }
} }
\ No newline at end of file
<template> <template>
<view class="container"> <view class="container">
<template v-if="newAddressFlag"> <Header :title="newAddressFlag ? '新增收货地址' : '编辑收货地址'"></Header>
<Header title="新增收货地址"></Header>
</template>
<template v-else>
<Header title="编辑收货地址"></Header>
</template>
<view class="content"> <view class="content">
<wd-form ref="form" :model="model" id="form"> <wd-form ref="form" :model="model" id="form">
<wd-cell-group border> <wd-cell-group>
<wd-input <wd-input
label="联系人" label="联系人"
label-width="80px" label-width="80px"
prop="name" prop="receiver"
v-model="model.name" v-model="model.receiver"
placeholder="请输入联系人姓名" placeholder="请输入联系人姓名"
:rules="[{ required: false, validator: fieldNotEmpty, message: '姓名不能为空' }]" :rules="[{ required: false, validator: fieldNotEmpty, message: '姓名不能为空' }]"
/> />
<wd-input <wd-input
label="手机号" label="手机号"
label-width="80px" label-width="80px"
prop="phone" prop="mobile"
v-model="model.phone" v-model="model.mobile"
placeholder="请输入联系人手机号" placeholder="请输入联系人手机号"
:rules="[{ required: false, pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }]" :rules="[{ required: false, pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }]"
/> />
<wd-input <wd-input
label="详细地址" label="详细地址"
label-width="80px" label-width="80px"
prop="detailAddress" prop="addr"
v-model="model.detailAddress" v-model="model.addr"
placeholder="请输入详细地址" placeholder="请输入详细地址"
:rules="[{ required: false, validator: fieldNotEmpty, message: '详细地址不能为空' }]" :rules="[{ required: false, validator: fieldNotEmpty, message: '详细地址不能为空' }]"
/> />
...@@ -46,11 +42,11 @@ ...@@ -46,11 +42,11 @@
</view> </view>
</wd-cell> </wd-cell>
</wd-checkbox-group> </wd-checkbox-group>
<wd-checkbox-group v-model="model.isDefaultAddress" size="large"> <wd-checkbox-group v-model="model.commonAddr" size="large">
<wd-cell title="设置为默认地址" center clickable @click="setDefaultAddress"> <wd-cell title="设置为默认地址" center clickable @tap="setDefaultAddress">
<view> <view>
<wd-checkbox <wd-checkbox
model-value="1" modelValuee="1"
ref="checkBoxAdress" ref="checkBoxAdress"
checked-color="#fa5151" checked-color="#fa5151"
custom-style="margin-right:-18rpx" custom-style="margin-right:-18rpx"
...@@ -61,7 +57,7 @@ ...@@ -61,7 +57,7 @@
</wd-cell-group> </wd-cell-group>
<view class="footer"> <view class="footer">
<wd-button type="error" block class="addBtn" @click="handleSubmit">保存</wd-button> <wd-button type="error" block class="addBtn" @tap="handleSubmit">保存</wd-button>
</view> </view>
</wd-form> </wd-form>
</view> </view>
...@@ -70,8 +66,9 @@ ...@@ -70,8 +66,9 @@
<script setup> <script setup>
import Header from '@/pages/order/components/Header/index.vue'; import Header from '@/pages/order/components/Header/index.vue';
import { addAddress, updateAddress, deleteAddress } from '@/api/address';
const fileDomain = import.meta.env.VITE_APP_IMG_URL; const fileDomain = import.meta.env.VITE_APP_IMG_URL;
const newAddressFlag = ref(false); const newAddressFlag = ref(false);
const form = ref(); const form = ref();
const checkBoxAdress = ref(); const checkBoxAdress = ref();
...@@ -92,9 +89,9 @@ onLoad((options) => { ...@@ -92,9 +89,9 @@ onLoad((options) => {
isDefaultAddress: [], isDefaultAddress: [],
}); });
} else { } else {
model.value.name = '这是名字'; model.value.name = '';
model.value.phone = '13655844265'; model.value.phone = '';
model.value.detailAddress = '贵州省贵阳市南明区'; model.value.detailAddress = '';
model.value.isDefaultAddress = ['1']; model.value.isDefaultAddress = ['1'];
} }
}); });
...@@ -111,6 +108,10 @@ function fieldNotEmpty(val) { ...@@ -111,6 +108,10 @@ function fieldNotEmpty(val) {
return false; return false;
} }
} }
const submit = async () => {
const res = await addAddress(model.value);
console.log(res);
};
function handleSubmit() { function handleSubmit() {
form.value form.value
.validate() .validate()
...@@ -146,15 +147,19 @@ page { ...@@ -146,15 +147,19 @@ page {
font-family: Source Han Sans; font-family: Source Han Sans;
font-variation-settings: 'opsz' auto; font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on; font-feature-settings: 'kern' on;
.content { .content {
padding-top: 88rpx; padding-top: 88rpx;
#form { #form {
width: 710rpx; width: 710rpx;
margin: 20rpx auto; margin: 20rpx auto;
} }
.wd-input__label.is-required::after { .wd-input__label.is-required::after {
display: none !important; display: none !important;
} }
.addBtn { .addBtn {
width: 630rpx; width: 630rpx;
height: 72rpx; height: 72rpx;
...@@ -171,10 +176,12 @@ page { ...@@ -171,10 +176,12 @@ page {
display: flex; display: flex;
width: 100%; width: 100%;
align-items: center; align-items: center;
.area_l { .area_l {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.area_lt { .area_lt {
font-size: 24rpx; font-size: 24rpx;
font-weight: 500; font-weight: 500;
...@@ -183,6 +190,7 @@ page { ...@@ -183,6 +190,7 @@ page {
text-align: left; text-align: left;
margin-bottom: 10rpx; margin-bottom: 10rpx;
} }
.area_lb { .area_lb {
font-size: 24rpx; font-size: 24rpx;
font-weight: normal; font-weight: normal;
...@@ -191,6 +199,7 @@ page { ...@@ -191,6 +199,7 @@ page {
text-align: left; text-align: left;
} }
} }
.area_r { .area_r {
width: 40rpx; width: 40rpx;
} }
......
...@@ -7,41 +7,21 @@ ...@@ -7,41 +7,21 @@
<img src="@/static/address/address.png" /> <img src="@/static/address/address.png" />
<wd-button type="error" block class="addBtn" @tap="addNewAddress">新增地址</wd-button> <wd-button type="error" block class="addBtn" @tap="addNewAddress">新增地址</wd-button>
</view> </view>
<view class="full_list" v-else> <view class="full_list" v-else>
<view class="additem"> <view class="additem" v-for="(item, index) in addressList" :key="index">
<view class="additem_l">
<view class="address">这是地址这是地址这是地址这是地址这是地 址这是地址这是地址</view>
<view class="info">
<view class="name">这是姓名</view>
<view class="phone">123456789258</view>
</view>
<view class="address_status">
<view v-if="mainAddFlag" class="box active">
<wd-icon name="check-circle-filled" size="12px"></wd-icon>
<view class="txt">默认</view>
</view>
<view v-else class="box">
<wd-icon name="circle1" size="12px"></wd-icon>
<view class="txt">默认</view>
</view>
</view>
</view>
<view class="additem_r">
<wd-icon name="edit-outline" size="14px" @tap="editAddress"></wd-icon>
</view>
</view>
<view class="additem">
<view class="additem_l"> <view class="additem_l">
<view class="address">这是地址这是地址这是地址这是地址这是地 址这是地址这是地址</view> <view class="address">{{ item.addr }}</view>
<view class="info"> <view class="info">
<view class="name">这是姓名</view> <view class="name">{{ item.receiver }}</view>
<view class="phone">123456789258</view> <view class="phone">{{ item.mobile }}</view>
</view> </view>
<view class="address_status"> <view class="address_status">
<view v-if="mainAddFlag" class="box active"> <view v-if="item.commonAddr === 1" class="box active">
<wd-icon name="check-circle-filled" size="12px"></wd-icon> <wd-icon name="check-circle-filled" size="12px"></wd-icon>
<view class="txt">默认</view> <view class="txt">默认</view>
</view> </view>
<view v-else class="box"> <view v-else class="box">
<wd-icon name="circle1" size="12px"></wd-icon> <wd-icon name="circle1" size="12px"></wd-icon>
<view class="txt">默认</view> <view class="txt">默认</view>
...@@ -52,6 +32,7 @@ ...@@ -52,6 +32,7 @@
<wd-icon name="edit-outline" size="14px" @tap="editAddress"></wd-icon> <wd-icon name="edit-outline" size="14px" @tap="editAddress"></wd-icon>
</view> </view>
</view> </view>
<wd-button type="error" block class="addBtn" @tap="addNewAddress">新增地址</wd-button> <wd-button type="error" block class="addBtn" @tap="addNewAddress">新增地址</wd-button>
</view> </view>
</view> </view>
...@@ -60,9 +41,23 @@ ...@@ -60,9 +41,23 @@
<script setup> <script setup>
import Header from '@/pages/order/components/Header/index.vue'; import Header from '@/pages/order/components/Header/index.vue';
const fileDomain = import.meta.env.VITE_APP_IMG_URL;
import { getAddressList, deleteAddress } from '@/api/address';
const isAdressEmpty = ref(false); const isAdressEmpty = ref(false);
const mainAddFlag = ref(false); const mainAddFlag = ref(false);
const addressList = ref([]);
const getAddressListData = async () => {
const { data: res } = await getAddressList();
console.log(res);
if (res) {
addressList.value = res;
res.length === 0 ? (isAdressEmpty.value = true) : (isAdressEmpty.value = false);
}
};
getAddressListData();
const addNewAddress = () => { const addNewAddress = () => {
xma.navigateTo({ url: '/pages/address/addressEdit?new=true' }); xma.navigateTo({ url: '/pages/address/addressEdit?new=true' });
...@@ -97,6 +92,7 @@ page { ...@@ -97,6 +92,7 @@ page {
.full_list { .full_list {
margin-top: 20rpx; margin-top: 20rpx;
.additem { .additem {
width: 710rpx; width: 710rpx;
padding: 20rpx; padding: 20rpx;
...@@ -109,17 +105,20 @@ page { ...@@ -109,17 +105,20 @@ page {
font-family: Source Han Sans; font-family: Source Han Sans;
font-variation-settings: 'opsz' auto; font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on; font-feature-settings: 'kern' on;
.additem_l { .additem_l {
width: 600rpx; width: 600rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.additem_r { .additem_r {
flex: 1; flex: 1;
padding-top: 30rpx; padding-top: 30rpx;
box-sizing: border-box; box-sizing: border-box;
text-align: right; text-align: right;
} }
.address { .address {
font-size: 24rpx; font-size: 24rpx;
font-weight: 500; font-weight: 500;
...@@ -136,6 +135,7 @@ page { ...@@ -136,6 +135,7 @@ page {
color: #abaaaa; color: #abaaaa;
display: flex; display: flex;
margin-bottom: 30rpx; margin-bottom: 30rpx;
.phone { .phone {
margin-left: 10rpx; margin-left: 10rpx;
} }
...@@ -146,11 +146,13 @@ page { ...@@ -146,11 +146,13 @@ page {
display: flex; display: flex;
font-size: 18rpx; font-size: 18rpx;
align-items: center; align-items: center;
.txt { .txt {
margin-left: 5rpx; margin-left: 5rpx;
color: #abaaaa; color: #abaaaa;
} }
} }
.box.active { .box.active {
color: #fa5151; color: #fa5151;
} }
...@@ -172,12 +174,13 @@ page { ...@@ -172,12 +174,13 @@ page {
.empty_list { .empty_list {
margin-top: 20rpx; margin-top: 20rpx;
img { img {
width: 566rpx; width: 566rpx;
height: 566rpx; height: 566rpx;
margin: 40rpx auto 60rpx; margin: 40rpx auto 60rpx;
display: block; display: block;
border: 1px dashed rgb(182, 182, 182); // border: 1px dashed rgb(182, 182, 182);
} }
.addBtn { .addBtn {
......
...@@ -13,51 +13,42 @@ ...@@ -13,51 +13,42 @@
</view> </view>
<!-- 图片--> <!-- 图片-->
<view class="nav"> <view class="nav">
<img <wd-swiper
class="main-img" :list="dataDetails.prod.imgs"
src="/static/assistingAgriculture/detail/img2.png" autoplay
style="width: 750rpx; height: 668rpx" :indicator="{ type: 'fraction' }"
/> indicatorPosition="bottom-right"
<view class="pre-icon"> @click="handleClick"
<img @change="onChange"
class="left-icon" height="512rpx"
src="/static/assistingAgriculture/detail/img4.png" ></wd-swiper>
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>
</view> </view>
<!--详情--> <!--详情-->
<view class="detail"> <view class="detail">
<view class="detail-title">筑农散养虫子土鸡(未下蛋小母鸡)1.5kg</view> <view class="detail-title">{{ dataDetails.prod.prodName }}</view>
<view class="detail-int"> <view class="detail-int">
这是商品简介这是商品简介这是商品简介这是商品简介这是商品 简介这是商品简介这是商品简介 {{ dataDetails.prodPresale.memo }}
</view> </view>
<view> <!-- <view>
<img class="share-img" src="/static/assistingAgriculture/detail/share.png" /> <img class="share-img" src="/static/assistingAgriculture/detail/share.png" />
<text class="share-text" @click="share">分享</text> <text class="share-text" @click="share">分享</text>
</view> </view> -->
</view> </view>
<view class="evaluate"> <view class="evaluate">
<view class="evaluate-num"> <view class="evaluate-num">
<text class="env">评价(0</text> <text class="env">评价({{ commentData.count }}</text>
<text class="num">好评率(100%)</text> <text class="num">好评率({{ commentData.high }} %)</text>
<wd-icon name="arrow-right" size="32rpx" style="margin-top: 2rpx"></wd-icon> <wd-icon name="arrow-right" size="32rpx" style="margin-top: 2rpx"></wd-icon>
</view> </view>
</view> </view>
<!-- 详情图--> <!-- 详情图-->
<view class="detail-info"> <view class="detail-info">
<text class="info-title">详情</text> <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>
<!-- 底部--> <!-- 底部-->
<view class="detail-bottom"> <view class="detail-bottom">
...@@ -70,13 +61,13 @@ ...@@ -70,13 +61,13 @@
/> />
<view class="sort-text">店铺</view> <view class="sort-text">店铺</view>
</view> </view>
<view class="borderClass"> <!-- <view class="borderClass">
<img <img
src="/static/assistingAgriculture/detail/img8.png" src="/static/assistingAgriculture/detail/img8.png"
style="width: 40rpx; height: 40rpx" style="width: 40rpx; height: 40rpx"
/> />
<view class="sort-text">客服</view> <view class="sort-text">客服</view>
</view> </view> -->
<view class="borderClass" @tap="toCart"> <view class="borderClass" @tap="toCart">
<wd-badge modelValue="4"> <wd-badge modelValue="4">
<img <img
...@@ -95,7 +86,9 @@ ...@@ -95,7 +86,9 @@
<!-- </view>--> <!-- </view>-->
<!-- </view>--> <!-- </view>-->
<view class="btn"> <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> <wd-button type="error" size="small" @tap="toSettle">立即购买</wd-button>
</view> </view>
</view> </view>
...@@ -107,19 +100,86 @@ ...@@ -107,19 +100,86 @@
import Search from '../../../components/assistingAgriculture/index/Search.vue'; import Search from '../../../components/assistingAgriculture/index/Search.vue';
import { ref } from 'vue'; import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app'; 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([ const swiperList = ref([
'../../static/assistingAgriculture/detail/img2.png', '../../static/assistingAgriculture/detail/img2.png',
'../../static/assistingAgriculture/detail/img2.png', '../../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([ const storeList = ref([
{ img: '/static/assistingAgriculture/detail/img7.png', text: '店铺' }, { img: '/static/assistingAgriculture/detail/img7.png', text: '店铺' },
{ img: '/static/assistingAgriculture/detail/img8.png', text: '客服' }, { img: '/static/assistingAgriculture/detail/img8.png', text: '客服' },
{ img: '/static/assistingAgriculture/detail/img6.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(() => { onShow(() => {
uni.pageScrollTo({ uni.pageScrollTo({
...@@ -322,6 +382,13 @@ page { ...@@ -322,6 +382,13 @@ page {
z-index: 9; z-index: 9;
top: -8rpx; top: -8rpx;
padding-bottom: 120rpx; padding-bottom: 120rpx;
.content {
.desc {
img {
width: 100%;
}
}
}
} }
.info-title { .info-title {
width: 64rpx; width: 64rpx;
......
...@@ -27,15 +27,28 @@ ...@@ -27,15 +27,28 @@
src="/static/assistingAgriculture/assets/culture.png" src="/static/assistingAgriculture/assets/culture.png"
style="width: 366rpx; height: 362rpx" style="width: 366rpx; height: 362rpx"
/> />
<view> <view class="right-img">
<view v-for="(item, index) in rightList" :key="index" @click="toPresale(item.categoryId)"> <img
<img class="delicacy"
class="right-sort" src="/static/assistingAgriculture/assets/delicacy.png"
:src="item.icon" style="height: 176rpx; margin-left: 8rpx"
style="width: 336rpx; height: 176rpx; margin-left: 8rpx" />
/> <img
</view> @tap="toPresale"
class="fresh"
src="/static/assistingAgriculture/assets/fresh.png"
style="height: 176rpx; margin-left: 8rpx"
/>
</view> </view>
<!-- <view>-->
<!-- <view v-for="(item, index) in rightList" :key="index" @click="toPresale(item.categoryId)">-->
<!-- <img-->
<!-- class="right-sort"-->
<!-- :src="item.icon"-->
<!-- style="width: 336rpx; height: 176rpx; margin-left: 8rpx"-->
<!-- />-->
<!-- </view>-->
<!-- </view>-->
</view> </view>
</view> </view>
<!-- 好货热卖--> <!-- 好货热卖-->
...@@ -50,24 +63,15 @@ ...@@ -50,24 +63,15 @@
color="#ABAAAA" color="#ABAAAA"
style="position: relative; float: right; top: -42rpx" style="position: relative; float: right; top: -42rpx"
></wd-icon> ></wd-icon>
<img <view class="hot-img" v-for="(item, index) in hotImgList" :key="index">
@tap="toDetail" <img class="rice" @tap="toDetail" :src="item.img" style="width: 670rpx; height: 236rpx" />
class="rice" </view>
src="/static/assistingAgriculture/assets/rice.png"
style="width: 670rpx; height: 236rpx"
/>
<img
@tap="toDetail"
class="potato"
src="/static/assistingAgriculture/assets/potato.png"
style="width: 650rpx; height: 236rpx; margin-left: 20rpx; margin-top: -20rpx"
/>
</view> </view>
<!-- tabs--> <!-- tabs-->
<scroll-view class="tabs" show-scrollbar="false" scroll-x :scroll-with-animation="true"> <scroll-view class="tabs" show-scrollbar="false" scroll-x :scroll-with-animation="true">
<text <text
@tap="choice(index, item.categoryId)" @tap="choice(index, item)"
v-for="(item, index) in tabsList" v-for="(item, index) in detailList"
:key="index" :key="index"
class="text" class="text"
:class="light === index ? 'light' : ''" :class="light === index ? 'light' : ''"
...@@ -82,10 +86,15 @@ ...@@ -82,10 +86,15 @@
src="/static/assistingAgriculture/assets/fruit4.png" src="/static/assistingAgriculture/assets/fruit4.png"
style="width: 670rpx; height: 236rpx" style="width: 670rpx; height: 236rpx"
/> />
<view class="sort-list"> <view class="whh" style="display: flex">
<view class="sort-img" v-for="(item, index) in detailList" :key="index"> <view
<img @tap="toDetail" :src="item.img" style="width: 330rpx; height: 330rpx" /> class="sort-img"
<view class="detail-title">{{ item.text }}</view> v-for="(item, index) in testData"
:key="index"
style="margin-left: 20rpx"
>
<img @tap="toDetail" :src="item.imgUrl" style="width: 330rpx; height: 330rpx" />
<view class="detail-title">{{ whh }}</view>
<view class="price-page"> <view class="price-page">
<text class="price">{{ item.price }}</text> <text class="price">{{ item.price }}</text>
</view> </view>
...@@ -115,13 +124,16 @@ import Search from '../../../components/assistingAgriculture/index/Search.vue'; ...@@ -115,13 +124,16 @@ import Search from '../../../components/assistingAgriculture/index/Search.vue';
import { import {
getGoodSaleProdList, getGoodSaleProdList,
getPlatformProdList, getPlatformProdList,
getStrictSelection,
} from '../../../api/assistingAgriculture/building'; } from '../../../api/assistingAgriculture/building';
import { onMounted } from 'vue'; import { onMounted } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
const current = ref(0); const current = ref(0);
const rightList = ref([]); const rightList = ref([]);
const light = ref(0); const light = ref(0);
const hotImgList = ref([]);
const testData = ref([]);
let sortData;
// 轮播图 // 轮播图
const swiperList = ref([ const swiperList = ref([
'../../../static/assistingAgriculture/assets/village.png', '../../../static/assistingAgriculture/assets/village.png',
...@@ -129,19 +141,8 @@ const swiperList = ref([ ...@@ -129,19 +141,8 @@ const swiperList = ref([
'../../../static/assistingAgriculture/assets/village.png', '../../../static/assistingAgriculture/assets/village.png',
]); ]);
// 分类列表数据 // 分类列表数据
const detailList = ref([ const detailList = ref([]);
{ img: '/static/assistingAgriculture/assets/fruit.png', price: '2555', text: '这是草莓这是草莓' }, const whh = ref({});
{
img: '/static/assistingAgriculture/assets/fruit1.png',
price: '2555',
text: '这是草莓这是草莓',
},
{ img: '/static/assistingAgriculture/assets/fruit2.png', price: '2555', text: '麻辣鱼豆腐' },
{ img: '/static/assistingAgriculture/assets/fruit3.png', price: '2555', text: '麻辣鱼豆腐' },
]);
const choice = (index) => {
light.value = index;
};
const params = { const params = {
current: 1, current: 1,
size: 10, size: 10,
...@@ -152,35 +153,49 @@ const params1 = { ...@@ -152,35 +153,49 @@ const params1 = {
size: 10, size: 10,
categoryId: router.query.categoryId, categoryId: router.query.categoryId,
}; };
const filteredProdList = ref([]);
onMounted(async () => { onMounted(async () => {
getStrictSelectionList();
getGoodSaleProd(); getGoodSaleProd();
platformProdList(); platformProdList();
}); });
// 筑农严选分类
const getStrictSelectionList = () => {
getStrictSelection().then((res) => {
res.data.forEach((item) => {
item.icon = import.meta.env.VITE_APP_IMG_URL + item.pic;
});
rightList.value = res.data.splice(0, 2);
});
};
// 好货热卖 // 好货热卖
const getGoodSaleProd = () => { const getGoodSaleProd = () => {
getGoodSaleProdList(params).then((res) => {}); getGoodSaleProdList(params).then((res) => {
res.data.records.forEach((item) => {
item.img = import.meta.env.VITE_APP_IMG_URL + item.pic;
});
hotImgList.value = res.data.records.slice(0, 2);
});
}; };
// 筑农严选首页-分类查询商品列表 // 筑农严选首页-分类查询商品列表
const platformProdList = () => { const platformProdList = () => {
getPlatformProdList(params1).then((res) => {}); getPlatformProdList({ categoryId: router.query.categoryId }).then((res) => {
detailList.value = res.data;
choice(0, '3272');
});
};
const choice = (index, item) => {
testData.value = detailList.value[index].prodList;
testData.value.forEach((item) => {
item.imgUrl = import.meta.env.VITE_APP_IMG_URL + item.pic;
whh.value = getSlashValue(item.content);
console.log(whh.value, 333);
});
light.value = index;
}; };
// 跳转预售 // 跳转预售
const toPresale = (id) => { const toPresale = () => {
xma.navigateTo({ xma.navigateTo({
url: `/pages/assistingAgriculture/index/presale?categoryId=${id}`, url: `/pages/assistingAgriculture/index/presale?categoryId=3273`,
}); });
}; };
// 处理content
function getSlashValue(url) {
const a = url.substr(url.indexOf('>', url.indexOf('>') - 1) + 1);
return a.substr(0, a.indexOf('<'));
}
function handleClick(e) { function handleClick(e) {
console.log(e); console.log(e);
} }
...@@ -344,7 +359,6 @@ page { ...@@ -344,7 +359,6 @@ page {
line-height: 28rpx; line-height: 28rpx;
letter-spacing: 0em; letter-spacing: 0em;
margin-left: 48rpx; margin-left: 48rpx;
margin-top: -20rpx;
color: #3d3d3d; color: #3d3d3d;
width: 190rpx; width: 190rpx;
white-space: nowrap; white-space: nowrap;
...@@ -373,7 +387,7 @@ page { ...@@ -373,7 +387,7 @@ page {
text-align: center; text-align: center;
line-height: 24rpx; line-height: 24rpx;
margin-left: 240rpx; margin-left: 240rpx;
margin-top: -15px; margin-top: -36rpx;
display: block; display: block;
} }
.cart-floating { .cart-floating {
...@@ -423,4 +437,10 @@ page { ...@@ -423,4 +437,10 @@ page {
height: 100%; height: 100%;
background-color: lightgreen; background-color: lightgreen;
} }
img.rice {
border-radius: 16rpx 16rpx 16rpx 16rpx;
margin-left: 20rpx;
margin-top: -40rpx;
padding-bottom: 40rpx;
}
</style> </style>
...@@ -32,12 +32,17 @@ ...@@ -32,12 +32,17 @@
</view> </view>
</view> </view>
</view> </view>
<view class="product-page" v-for="(item, index) in list" :key="index"> <view class="product-page" v-for="(item, index) in list" :key="index" @click="toDetail">
<view> <view>
<view class="page-title">{{ item.categoryName }}</view> <view class="page-title">{{ item.categoryName }}</view>
<img :src="item.img" class="main-img" /> <img :src="item.img" class="main-img" />
<view style="display: flex; flex-direction: row"> <view style="display: flex; flex-direction: row">
<view class="detail-border" v-for="(item, index) in item.commodityList" :key="index"> <view
class="detail-border"
v-for="(item, index) in item.commodityList"
:key="index"
@click="toDetail"
>
<img :src="item.commodityImg" style="width: 216rpx; height: 176rpx" /> <img :src="item.commodityImg" style="width: 216rpx; height: 176rpx" />
<view class="detail-title">{{ item.prodName }}</view> <view class="detail-title">{{ item.prodName }}</view>
<view class="jiage-page"> <view class="jiage-page">
...@@ -89,7 +94,6 @@ onMounted(async () => { ...@@ -89,7 +94,6 @@ onMounted(async () => {
getList(); getList();
getPresaleCategoryList(); getPresaleCategoryList();
getPresale(); getPresale();
platformProdList();
}); });
// 获取筑农专区分类; // 获取筑农专区分类;
const getList = () => { const getList = () => {
......
...@@ -22,9 +22,14 @@ ...@@ -22,9 +22,14 @@
</view> </view>
<view class="sort"> <view class="sort">
<view style="display: flex; flex-direction: row"> <view style="display: flex; flex-direction: row">
<view class="borderClass" @tap="toPresale" v-for="(item, index) in sortList" :key="index"> <view
<img :src="item.img" style="width: 48rpx; height: 48rpx" /> class="borderClass"
<view class="sort-text">{{ item.text }}</view> @tap="chooseTab(item.categoryId)"
v-for="(item, index) in sortList"
:key="index"
>
<img :src="item.imgUrl" style="width: 48rpx; height: 48rpx" />
<view class="sort-text">{{ item.categoryName }}</view>
</view> </view>
</view> </view>
</view> </view>
...@@ -38,14 +43,14 @@ ...@@ -38,14 +43,14 @@
class="text" class="text"
:class="light === index ? 'light' : ''" :class="light === index ? 'light' : ''"
> >
{{ item.text }} {{ item.categoryName }}
</text> </text>
</scroll-view> </scroll-view>
</view> </view>
<view class="tab-list" v-for="(item, index) in buyList" :key="index" @tap="toDetail"> <view class="tab-list" v-for="(item, index) in buyList" :key="index" @tap="toDetail">
<img class="buy-list" :src="item.img" style="width: 670rpx; height: 670rpx" /> <img class="buy-list" :src="item.img" style="width: 670rpx; height: 670rpx" />
<view> <view>
<text class="retail-price">零售价:¥{{ item.price }}/盒</text> <text class="retail-price">零售价:¥{{ item.oriPrice }}/盒</text>
<text class="presale-price">预售价:¥{{ item.price }}/盒</text> <text class="presale-price">预售价:¥{{ item.price }}/盒</text>
</view> </view>
<view> <view>
...@@ -57,8 +62,8 @@ ...@@ -57,8 +62,8 @@
width: 284rpx; width: 284rpx;
height: 128rpx; height: 128rpx;
float: right; float: right;
margin-top: -98rpx; margin-top: -80rpx;
margin-right: 30rpx; margin-right: 16rpx;
" "
/> />
</view> </view>
...@@ -66,9 +71,9 @@ ...@@ -66,9 +71,9 @@
</view> </view>
<view class="waterfall"> <view class="waterfall">
<view class="wt-left wt-list"> <view class="wt-left wt-list">
<view class="wt-item" v-for="(good, index) in LeftList" :key="index" @tap="toDetail"> <view class="wt-item" v-for="(good, index) in buyList" :key="index" @tap="toDetail">
<view class="item-img"> <view class="item-img">
<image :src="good.image" mode="widthFix"></image> <image :src="good.img" mode="widthFix" style="border-radius: 16rpx"></image>
<image <image
class="presale-img" class="presale-img"
src="/static/assistingAgriculture/presale/presale.png" src="/static/assistingAgriculture/presale/presale.png"
...@@ -90,39 +95,12 @@ ...@@ -90,39 +95,12 @@
</view> </view>
<!-- 介绍部分 --> <!-- 介绍部分 -->
<view class="introduce-section"> <view class="introduce-section">
<text class="title">{{ good.name }}</text> <text class="title">{{ good.prodName }}</text>
<view class="tags-box">
<text class="good-detail">{{ good.detail }}</text>
<text class="introduction">{{ good.introduction }}</text>
<text class="good-price">{{ good.price }}</text>
</view>
</view>
</view>
</view>
<view class="vt-right wt-list">
<view class="wt-item" v-for="(good, index) in RightList" :key="index" @tap="toDetail">
<view class="item-img">
<image :src="good.image" mode="widthFix"></image>
<image
class="presale-img"
src="/static/assistingAgriculture/presale/presale.png"
style="width: 132rpx; height: 64rpx; z-index: 10; top: -70rpx"
/>
<image
class="preview-img"
src="/static/assistingAgriculture/presale/preview.png"
style="width: 264rpx; height: 40rpx; z-index: 9; top: -66rpx"
/>
<text class="pre-text">预计9月15日发货</text>
</view>
<!-- 介绍部分 -->
<view class="introduce-section">
<text class="title">{{ good.name }}</text>
<view class="tags-box"> <view class="tags-box">
<text class="good-detail">{{ good.detail }}</text> <text class="good-detail">{{ good.detail }}</text>
<text class="introduction">{{ good.introduction }}</text> <text class="introduction">{{ good.introduction }}</text>
<text class="good-price">{{ good.price }}</text> <text class="good-price">{{ good.price }}</text>
<img class="add" src="/static/assistingAgriculture/presale/add.png" />
</view> </view>
</view> </view>
</view> </view>
...@@ -149,35 +127,18 @@ import { ...@@ -149,35 +127,18 @@ import {
categoryPresaleList, categoryPresaleList,
getPresaleList, getPresaleList,
getPresaleProdList, getPresaleProdList,
getStrictSelection,
} from '../../../api/assistingAgriculture/building'; } from '../../../api/assistingAgriculture/building';
const swiperList = ref([]); const swiperList = ref([]);
const current = ref(0); const current = ref(0);
// 轮播图数据 // 轮播图数据
let lunboData; let lunboData;
let sortData;
const light = ref(0); const light = ref(0);
const sortList = ref([ const sortList = ref([]);
{ img: '/static/assistingAgriculture/presale/bacImg.png', price: '25', text: '应季好物' }, const tabsData = ref([]);
{ img: '/static/assistingAgriculture/presale/img2.png', price: '25', text: '猪肉蛋禽' }, const buyList = ref([]);
{ img: '/static/assistingAgriculture/presale/img3.png', price: '25', text: '米面粮油' }, const sortDataList = ref([]);
{ img: '/static/assistingAgriculture/presale/img4.png', price: '25', text: '预选蔬菜' },
{ img: '/static/assistingAgriculture/presale/img5.png', price: '25', text: '心选水果' },
]);
const tabsData = ref([
{ img: '/static/assistingAgriculture/assets/mainPicture.png', text: '全部' },
{ img: '/static/assistingAgriculture/assets/presale.png', text: '分类1' },
{ img: '/static/assistingAgriculture/assets/presale.png', text: '分类2' },
{ img: '/static/assistingAgriculture/assets/presale.png', text: '分类3' },
{ img: '/static/assistingAgriculture/assets/presale.png', text: '分类4' },
{ img: '/static/assistingAgriculture/assets/presale.png', text: '分类5' },
{ img: '/static/assistingAgriculture/assets/presale.png', text: '分类6' },
{ img: '/static/assistingAgriculture/assets/presale.png', text: '分类7' },
{ img: '/static/assistingAgriculture/assets/presale.png', text: '分类8' },
]);
const buyList = ref([
{ img: '/static/assistingAgriculture/presale/buy.png', price: '29.9', text: '应季好物' },
{ img: '/static/assistingAgriculture/presale/buy.png', price: '29.9', text: '猪肉蛋禽' },
{ img: '/static/assistingAgriculture/presale/buy.png', price: '29.9', text: '米面粮油' },
]);
const shopList = ref([ const shopList = ref([
{ img: '/static/assistingAgriculture/presale/img7.png', price: '29.9', text: '应季好物' }, { img: '/static/assistingAgriculture/presale/img7.png', price: '29.9', text: '应季好物' },
{ img: '/static/assistingAgriculture/presale/img7.png', price: '29.9', text: '应季好物' }, { img: '/static/assistingAgriculture/presale/img7.png', price: '29.9', text: '应季好物' },
...@@ -244,6 +205,7 @@ onMounted(async () => { ...@@ -244,6 +205,7 @@ onMounted(async () => {
getPresale(); getPresale();
getPresaleProd(); getPresaleProd();
presaleSortList(); presaleSortList();
chooseTab('3287');
}); });
// 预售板块轮播图 // 预售板块轮播图
const getPresale = () => { const getPresale = () => {
...@@ -260,16 +222,49 @@ const getPresale = () => { ...@@ -260,16 +222,49 @@ const getPresale = () => {
}; };
// 筑农预售分类 // 筑农预售分类
const presaleSortList = () => { const presaleSortList = () => {
categoryPresaleList({ level: 1 }).then((res) => { categoryPresaleList().then((res) => {
console.log(res, 111); res.data.forEach((item) => {
tabsList.value = res.data; item.imgUrl = import.meta.env.VITE_APP_IMG_URL + item.pic;
});
sortData = res.data;
sortList.value = res.data.map((item) => {
return item.imgUrl;
});
console.log(res.data, 111);
sortList.value = res.data;
}); });
}; };
const chooseTab = (index) => {
getStrictSelection({ parentId: index }).then((res) => {
res.data.forEach((item, index) => {
item.imgUrl = import.meta.env.VITE_APP_IMG_URL + item.pic;
});
tabsData.value = res.data;
});
};
// 筑农首页-分类查询商品列表 // 筑农首页-分类查询商品列表
const getPresaleProd = () => { const getPresaleProd = () => {
getPresaleProdList(params).then((res) => { getPresaleProdList(params).then((res) => {
console.log(res, 222); res.data.records.forEach((item) => {
item.img = import.meta.env.VITE_APP_IMG_URL + item.pic;
});
buyList.value = res.data.records;
});
};
// 二级分类点击事件
const choice = (index, categoryId) => {
getPresaleProdList({ current: 1, size: 10, categoryId }).then((res) => {
res.data.records.forEach((item) => {
item.img = import.meta.env.VITE_APP_IMG_URL + item.pic;
});
buyList.value = res.data.records;
if (index === 0) {
chooseTab('3287');
choice(0, '3273');
}
}); });
light.value = index;
}; };
// 左侧数据列表 // 左侧数据列表
const LeftList = ref([]); const LeftList = ref([]);
...@@ -295,9 +290,6 @@ function handleClick(e) { ...@@ -295,9 +290,6 @@ function handleClick(e) {
function onChange(e) { function onChange(e) {
console.log(e); console.log(e);
} }
const choice = (index) => {
light.value = index;
};
function toCart() { function toCart() {
// TODO: 跳转到筑农严选 // TODO: 跳转到筑农严选
xma.navigateTo({ xma.navigateTo({
...@@ -310,6 +302,9 @@ function toDetail() { ...@@ -310,6 +302,9 @@ function toDetail() {
url: '/pages/assistingAgriculture/detail/detail', url: '/pages/assistingAgriculture/detail/detail',
}); });
} }
function toTab(item) {
console.log(item, 222);
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -433,7 +428,6 @@ page { ...@@ -433,7 +428,6 @@ page {
color: #b3b3b3; color: #b3b3b3;
} }
.presale-price { .presale-price {
left: 20rpx;
display: block; display: block;
margin-left: 60rpx; margin-left: 60rpx;
font-size: 30rpx; font-size: 30rpx;
...@@ -446,23 +440,20 @@ page { ...@@ -446,23 +440,20 @@ page {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 710rpx; width: 710rpx;
justify-content: center;
overflow: hidden;
margin-top: 10rpx; margin-top: 10rpx;
margin-left: 30rpx;
} }
.wt-list { .wt-list {
width: 360rpx; width: 360rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: row;
margin-right: 10rpx;
} }
.wt-item { .wt-item {
border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px;
margin-bottom: 15rpx; margin-bottom: 15rpx;
background-color: #ffffff; background-color: #ffffff;
margin-left: 10rpx;
} }
.item-img image { .item-img image {
...@@ -474,7 +465,7 @@ page { ...@@ -474,7 +465,7 @@ page {
background: #ffffff; background: #ffffff;
padding: 20rpx 30rpx; padding: 20rpx 30rpx;
border-radius: 0 0 08px 8px; border-radius: 0 0 08px 8px;
margin-top: -20rpx; margin-top: -80rpx;
height: 110rpx; height: 110rpx;
} }
...@@ -483,6 +474,7 @@ page { ...@@ -483,6 +474,7 @@ page {
color: #303133; color: #303133;
height: 50rpx; height: 50rpx;
line-height: 50rpx; line-height: 50rpx;
margin-left: -20rpx;
} }
.introduce-section .tags-box { .introduce-section .tags-box {
...@@ -490,14 +482,15 @@ page { ...@@ -490,14 +482,15 @@ page {
align-items: center; align-items: center;
height: 30rpx; height: 30rpx;
font-size: 24rpx; font-size: 24rpx;
margin-left: -20rpx;
color: #909399; color: #909399;
} }
.good-price { .good-price {
position: relative; position: relative;
margin-top: 70rpx; margin-top: 70rpx;
margin-left: -200rpx;
color: #fa5151; color: #fa5151;
font-size: 28rpx; font-size: 28rpx;
margin-left: -20rpx;
} }
.preview-img { .preview-img {
margin-left: 100rpx; margin-left: 100rpx;
...@@ -546,4 +539,9 @@ page { ...@@ -546,4 +539,9 @@ page {
width: 56rpx; width: 56rpx;
height: 56rpx; height: 56rpx;
} }
img.add {
position: relative;
left: 200rpx;
top: 30rpx;
}
</style> </style>
<template>
<wd-popup
v-model="show"
position="bottom"
:safe-area-inset-bottom="true"
custom-style="border-radius: 16rpx 16rpx 0 0; height: 80vh"
@close="show = false"
lockScroll
>
<view class="content">
<view class="header">
<view class="rowbox">
<view class="title">快递详情</view>
<wd-icon name="close" size="10" color="#333" @tap="close"></wd-icon>
</view>
<view class="top">
<view class="left">
<image class="logo" src="/static/ticket/logo.png" mode="aspectFill"></image>
<text>中通快递78810259271088</text>
</view>
<view class="right">
<text>复制</text>
<text></text>
<text>打电话</text>
</view>
</view>
</view>
</view>
<view class="steps">
<wd-steps :active="1" vertical>
<wd-step>
<template #icon>
<view class="dot-red"></view>
</template>
<template #title>
<view class="titlebox">
<text class="title red-title">待取件</text>
<text class="time red">06-25 17:37</text>
</view>
</template>
<template #description>
<view class="desc">您购买的包裹已暂存至贵阳市市政公园菜鸟驿站, 请凭取件码取件。</view>
</template>
</wd-step>
<wd-step>
<template #icon>
<view class="dot"></view>
</template>
<template #title>
<view class="titlebox">
<text class="title">派送中</text>
<text class="time">06-25 09:05</text>
</view>
</template>
<template #description>
<rich-text class="desc1" :nodes="detail"></rich-text>
</template>
</wd-step>
<wd-step>
<template #icon>
<view class="dot"></view>
</template>
<template #title>
<view class="titlebox">
<text class="title">运输中</text>
<text class="time">06-25 05:15</text>
</view>
</template>
<template #description>
<text class="desc2">【贵阳市】快件已到达 贵阳小河二部</text>
</template>
</wd-step>
<wd-step>
<template #icon>
<view class="dot"></view>
</template>
<template #title>
<view class="titlebox">
<text class="time">06-20 01:25</text>
</view>
</template>
<template #description>
<text class="desc2">【黔南布依族苗族自治州】快件已发往 贵阳小河二部</text>
</template>
</wd-step>
<wd-step>
<template #icon>
<view class="dot"></view>
</template>
<template #title>
<view class="titlebox" @tap="close">
<text class="time">收起更多物流</text>
<wd-icon name="chevron-up" size="28rpx" color="#999"></wd-icon>
</view>
</template>
</wd-step>
</wd-steps>
</view>
<view class="bottom">
<view class="b-icon"></view>
<view class="right">
<text class="title">送至 贵阳市市政公园正门菜鸟驿站</text>
<view class="rowbox">
<text class="text1">李先生 +86-187****4253</text>
<text class="text">隐藏保护中</text>
</view>
</view>
</view>
</wd-popup>
</template>
<script setup>
const show = ref(false);
// 正则表达式匹配电话号码
const phoneRegex = /\b(\d{3,4}-\d{7,8}|\d{11})\b/g;
const highlightedText = (val) => {
return val.replace(phoneRegex, '<span class="highlight">$1</span>');
};
const detail = ref(
'【贵阳市】贵阳小河二部的业务员【文凯凯, 18784286692】正在为您派件(95720为中通快递员外呼专属号码,请放心接听,如有问题可联系网点:0851-83876676,投诉电话:0851-83876678)',
);
const open = () => {
detail.value = highlightedText(detail.value);
show.value = true;
};
const close = () => {
show.value = false;
};
defineExpose({
open,
close,
});
</script>
<style lang="scss" scoped>
.content {
display: flex;
flex-direction: column;
.header {
display: flex;
flex-direction: column;
border-bottom: 1px solid #ededed;
padding: 20rpx 30rpx 33rpx;
gap: 26rpx;
.rowbox {
display: flex;
align-items: center;
justify-content: space-between;
.title {
font-size: 32rpx;
font-weight: bold;
color: #333;
text-align: center;
width: 100%;
}
}
.top {
display: flex;
justify-content: space-between;
align-items: center;
.left {
display: flex;
align-items: center;
gap: 16rpx;
.logo {
width: 36rpx;
height: 36rpx;
border-radius: 50%;
}
text {
font-family: PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #333333;
}
}
.right {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 16rpx;
text {
font-family: PingFang SC;
font-weight: 500;
font-size: 24rpx;
color: #333333;
}
}
}
}
}
.steps {
padding: 28rpx 30rpx;
&:deep(.wd-step__icon.is-icon) {
display: flex;
align-items: center;
justify-content: center;
width: 30rpx;
height: 30rpx;
top: 8rpx;
}
&:deep(.wd-step.is-vertical .wd-step__line) {
top: 16rpx;
}
.dot {
width: 30rpx;
height: 27rpx;
border-radius: 50%;
border: 2rpx solid #c9c9c9;
}
.dot-red {
background-color: #f12a2a;
width: 30rpx;
height: 30rpx;
border-radius: 50%;
}
.titlebox {
display: flex;
flex-direction: row;
align-items: center;
gap: 33rpx;
text {
font-family:
PingFang SC,
PingFang SC;
font-size: 28rpx;
color: #999999;
}
.title {
font-size: 32rpx;
}
.red-title {
color: #ff0909;
font-weight: bold;
}
.red {
color: #ff0909;
}
}
.desc {
font-family:
PingFang SC,
PingFang SC;
font-size: 28rpx;
color: #333333;
line-height: 34rpx;
}
.desc1 {
font-family:
PingFang SC,
PingFang SC;
font-size: 24rpx;
color: #999999;
}
.desc2 {
font-family:
PingFang SC,
PingFang SC;
font-size: 28rpx;
color: #999999;
}
.highlight {
color: #ff0909;
}
}
.bottom {
display: flex;
gap: 18rpx;
padding: 0rpx 30rpx 33rpx;
.b-icon {
font-family:
PingFang SC,
PingFang SC;
font-size: 24rpx;
color: #ff0909;
border: 1rpx solid #ff0909;
border-radius: 50%;
width: 34rpx;
height: 34rpx;
text-align: center;
}
.right {
width: 100%;
display: flex;
flex-direction: column;
gap: 6rpx;
.title {
font-family:
PingFang SC,
PingFang SC;
font-weight: bold;
font-size: 32rpx;
color: #333333;
}
.rowbox {
display: flex;
justify-content: space-between;
align-items: center;
.textbox {
display: flex;
flex-direction: row;
gap: 30rpx;
align-items: center;
}
.title {
font-family: PingFang SC;
font-weight: bold;
font-size: 32rpx;
color: #ff0909;
}
.text {
font-family: PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #ff0909;
}
.detail {
font-family: PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #ff0909;
}
.text1 {
font-family: PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #333333;
}
}
}
}
</style>
<template> <template>
<view class="container"> <view class="container">
<Header title="商品详情页"></Header> <Header title="商品详情页"></Header>
<view style="height: 600rpx; background-color: aquamarine"></view> <web-view
style="height: 600rpx"
src="https://api.kuaidi100.com/tools/map/59d4a57b7964ebd6fc1d831847cb61c9_106.714305,26.568055_6"
></web-view>
<!-- <view style="height: 600rpx; background-color: aquamarine"></view> -->
<view class="content"> <view class="content">
<view class="info"> <view class="info">
<view class="top"> <view class="top">
...@@ -27,13 +31,27 @@ ...@@ -27,13 +31,27 @@
<text class="title">待取件</text> <text class="title">待取件</text>
<text class="text">06-25 17:37</text> <text class="text">06-25 17:37</text>
</view> </view>
<text class="detail">详细信息 ></text> <text class="detail" @tap="openPop()">详细信息 ></text>
</view> </view>
<view class="infobox"> <view class="detailbox">
<text class="addr">贵阳市市政公园菜鸟驿站店</text> <text class="text">
<view class="row"> 【贵阳市】您的快递已签收。如有疑问请联系业务员:
<text class="text">取件码</text> 18275185576,代理点电话:18275185576,投诉电
<text class="code">2-7-4109</text> 话:0851-88628778。感谢使用中通快递,期待再次 为您服务!
</text>
<!-- <view class="infobox">
<text class="addr">请问本次收件是否遇到问题?</text>
<view class="row">
<view class="btn">有问题,去解决</view>
<view class="btn">去评价</view>
</view>
</view> -->
<view class="infobox">
<text class="addr">贵阳市市政公园菜鸟驿站店</text>
<view class="column">
<text class="text">取件码</text>
<text class="code">2-7-4109</text>
</view>
</view> </view>
</view> </view>
</view> </view>
...@@ -79,7 +97,7 @@ ...@@ -79,7 +97,7 @@
<text class="num">x1</text> <text class="num">x1</text>
</view> </view>
</view> </view>
<view class="product-item"> <view class="product-item" v-if="showMore">
<view class="left"> <view class="left">
<image src="/static/ticket/logo.png" class="img" mode="aspectFill"></image> <image src="/static/ticket/logo.png" class="img" mode="aspectFill"></image>
<view class="infobox"> <view class="infobox">
...@@ -96,7 +114,7 @@ ...@@ -96,7 +114,7 @@
</view> </view>
</view> </view>
</view> </view>
<view class="totalbox"> <view class="totalbox totalbox-line" v-if="showMore">
<view class="total-item"> <view class="total-item">
<text>商品总价:</text> <text>商品总价:</text>
<text>¥98.70</text> <text>¥98.70</text>
...@@ -119,7 +137,7 @@ ...@@ -119,7 +137,7 @@
</view> </view>
</view> </view>
</view> </view>
<view class="totalbox"> <view class="totalbox" v-if="showMore">
<text class="title">订单信息</text> <text class="title">订单信息</text>
<view class="total-item"> <view class="total-item">
<text>订单号:</text> <text>订单号:</text>
...@@ -138,13 +156,40 @@ ...@@ -138,13 +156,40 @@
<text>微信</text> <text>微信</text>
</view> </view>
</view> </view>
<view class="more" @tap="changeShowMore">
<text v-if="showMore">收起订单信息</text>
<text v-else>查看全部订单信息</text>
<wd-icon
:name="showMore ? 'chevron-up' : 'chevron-down'"
size="30rpx"
color="#999"
></wd-icon>
</view>
</view> </view>
<view style="height: 170rpx"></view>
</view>
<view class="footer">
<view class="btn">查看物流</view>
<view class="btn">申请售后</view>
<view class="btn err">确认收货</view>
</view> </view>
</view> </view>
<stepBar ref="stepBarRef"></stepBar>
</template> </template>
<script setup> <script setup>
import Header from '@/pages/order/components/Header/index.vue'; import Header from '@/pages/order/components/Header/index.vue';
import stepBar from '@/pages/assistingAgriculture/order/components/stepBar/index.vue';
const showMore = ref(false);
const changeShowMore = () => {
showMore.value = !showMore.value;
};
const stepBarRef = ref(null);
const openPop = () => {
stepBarRef.value.open();
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -152,6 +197,10 @@ page { ...@@ -152,6 +197,10 @@ page {
background: #f3f3f3; background: #f3f3f3;
} }
::v-deep uni-web-view.uni-webview--fullscreen {
position: relative;
}
.container { .container {
width: 375 * 2rpx; width: 375 * 2rpx;
margin: 0 auto; margin: 0 auto;
...@@ -160,6 +209,7 @@ page { ...@@ -160,6 +209,7 @@ page {
position: relative; position: relative;
top: -20rpx; top: -20rpx;
border-radius: 20rpx 20rpx 0 0; border-radius: 20rpx 20rpx 0 0;
z-index: 10;
.info { .info {
background-color: #fff; background-color: #fff;
...@@ -305,37 +355,68 @@ page { ...@@ -305,37 +355,68 @@ page {
} }
} }
.infobox { .detailbox {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #f7f8fa; gap: 22rpx;
border-radius: 12rpx;
padding: 20rpx 0 34rpx 50rpx;
gap: 28rpx;
margin-bottom: 54rpx;
.addr { .text {
font-family: PingFang SC; font-family: PingFang SC;
font-weight: bold; font-size: 24rpx;
font-size: 28rpx; color: #999999;
color: #333333; line-height: 28rpx;
} }
.row { .infobox {
display: flex; display: flex;
align-items: center; flex-direction: column;
background-color: #f7f8fa;
border-radius: 12rpx;
padding: 20rpx 0 34rpx 50rpx;
gap: 28rpx; gap: 28rpx;
color: #333333; margin-bottom: 54rpx;
.text { .addr {
font-family: PingFang SC; font-family: PingFang SC;
font-weight: bold;
font-size: 28rpx; font-size: 28rpx;
color: #333333;
} }
.code { .row {
font-family: PingFang SC; display: flex;
font-weight: bold; align-items: center;
font-size: 52rpx; gap: 16rpx;
.btn {
font-family:
PingFang SC,
PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #333333;
border: 1rpx solid #d2d2d2;
border-radius: 32rpx;
padding: 12rpx 32rpx;
}
}
.column {
display: flex;
align-items: center;
gap: 28rpx;
color: #333333;
.text {
font-family: PingFang SC;
font-size: 28rpx;
}
.code {
font-family: PingFang SC;
font-weight: bold;
font-size: 52rpx;
}
} }
} }
} }
...@@ -465,8 +546,7 @@ page { ...@@ -465,8 +546,7 @@ page {
flex-direction: column; flex-direction: column;
gap: 28rpx; gap: 28rpx;
margin-top: 40rpx; margin-top: 40rpx;
padding: 0 30rpx; padding: 0 30rpx 30rpx;
border-bottom: 1rpx solid #ededed;
.title { .title {
font-family: font-family:
...@@ -525,10 +605,55 @@ page { ...@@ -525,10 +605,55 @@ page {
} }
} }
.totalbox:last-child { .totalbox-line {
border-bottom: none; border-bottom: 1rpx solid #ededed;
}
.more {
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
text {
font-family:
PingFang SC,
PingFang SC;
font-size: 26rpx;
color: #999999;
}
} }
} }
} }
.footer {
position: fixed;
bottom: 0;
background-color: #fff;
width: 100%;
z-index: 10;
display: flex;
justify-content: flex-end;
gap: 16rpx;
padding: 18rpx 28rpx 88rpx;
box-sizing: border-box;
.btn {
font-family:
PingFang SC,
PingFang SC;
font-size: 28rpx;
color: #333333;
border-radius: 32rpx;
border: 1rpx solid #cccccc;
padding: 12rpx 24rpx;
}
.err {
color: #ff0909;
border-radius: 32rpx;
border: 1rpx solid #ff0909;
}
}
} }
</style> </style>
...@@ -10,8 +10,8 @@ import { getTokenUser } from '../../api/index'; ...@@ -10,8 +10,8 @@ import { getTokenUser } from '../../api/index';
import { getToken } from '../../utils/auth'; import { getToken } from '../../utils/auth';
onMounted(async () => { onMounted(async () => {
// await signIn(); await signIn();
if (!getToken()) await signIn2(); // if (!getToken()) await signIn2();
xma.reLaunch({ url: '/pages/index/index' }); xma.reLaunch({ url: '/pages/index/index' });
}); });
......
...@@ -9,29 +9,52 @@ ...@@ -9,29 +9,52 @@
<view class="item01" prop="merchantServices"> <view class="item01" prop="merchantServices">
<text class="label">评分</text> <text class="label">评分</text>
<!-- 评分 --> <!-- 评分 -->
<wd-rate v-model="formdata.merchantServices" active-color="#ff0000" size="50rpx" space="10px" <wd-rate
@change="handlemerchant" /> v-model="formdata.merchantServices"
active-color="#ff0000"
size="50rpx"
space="10px"
@change="handlemerchant"
/>
</view> </view>
<view class="item02"> <view class="item02">
<text>{{ merList[formdata.merchantServices] }}</text> <text>{{ merList[formdata.merchantServices] }}</text>
</view> </view>
</view> </view>
<!-- 内容描述 --> <!-- 内容描述 -->
<view prop="evaluation"> <view class="item03">
<wd-textarea v-model="formdata.evaluation" placeholder="亲,分享您的看法,给其他人一个参考哦!" /> <wd-textarea
prop="evaluation"
type="textarea"
v-model="formdata.evaluation"
placeholder="亲,分享您的看法,给其他人一个参考哦!"
clearable
/>
</view> </view>
<wd-cell title-width="0px"></wd-cell>
<text class="textarea">上传图片/视频</text> <text class="textarea">上传图片/视频</text>
<!-- 图片上传 --> <!-- 图片上传 -->
<view class="wdUpload" prop="images"> <view class="wdUpload" prop="images">
<wd-upload multiple :action="action" @change="handleFile" :file-list="formdata.images" <wd-upload
:before-remove="beforeRemove" :header="headers"></wd-upload> multiple
:action="action"
@change="handleFile"
:file-list="formdata.images"
:before-remove="beforeRemove"
:header="headers"
></wd-upload>
</view> </view>
<!-- 匿名评价 --> <!-- 匿名评价 -->
<wd-cell title="匿名评价" prop="isAnonymous" class="itemSwichval"> <wd-cell title="匿名评价" prop="isAnonymous" class="itemSwichval">
<wd-switch size="48rpx" active-color="#EC1B1B" v-model="formdata.isAnonymous" active-value="1" <wd-switch
inactive-value="0" /> size="48rpx"
active-color="#EC1B1B"
v-model="formdata.isAnonymous"
active-value="1"
inactive-value="0"
/>
</wd-cell> </wd-cell>
</wd-cell-group> </wd-cell-group>
</wd-form> </wd-form>
...@@ -70,7 +93,7 @@ onLoad((options) => { ...@@ -70,7 +93,7 @@ onLoad((options) => {
const formdata = reactive<{ const formdata = reactive<{
orderNumber: string; orderNumber: string;
evaluation: string; evaluation: null | string;
images: string[]; images: string[];
isAnonymous: number; isAnonymous: number;
descriptionMatches: number; descriptionMatches: number;
...@@ -88,33 +111,59 @@ const formdata = reactive<{ ...@@ -88,33 +111,59 @@ const formdata = reactive<{
* 表单验证规则 * 表单验证规则
*/ */
const rules = { const rules = {
// images: [ images: [
// { {
// required: true, required: true,
// message: '请上传图片1', validator: (value: any) => {
// validator: (value: any) => { if (value.length) {
// if (value.length) { return true;
// console.log('上传成功'); } else {
// } else { xma.showToast({
// console.log('请上传图片'); title: '最少上传一张图片',
// } icon: 'none',
// }, duration: 2000,
// }, });
// ], return false;
evaluation: [{ required: true, message: '请填写评价内容' }], }
// merchantServices: [ },
// { },
// required: true, ],
// message: '请选择商家服务评分', evaluation: [
// validator: (value: any) => { {
// if (value >= 1 && value <= 5) { required: true,
// console.log('评分成功'); message: '请填你的看法',
// } else { validator: (value: string) => {
// console.log('请选择评分'); console.log('看法', value);
// } if (value && value.length) {
// }, return true;
// }, } else {
// ], xma.showToast({
title: '请填你的看法',
icon: 'none',
duration: 2000,
});
return false;
}
},
},
],
merchantServices: [
{
required: true,
validator: (value: any) => {
if (value >= 1 && value <= 5) {
return true;
} else {
xma.showToast({
title: '请选服务评分',
icon: 'none',
duration: 2000,
});
return false;
}
},
},
],
}; };
/** /**
...@@ -180,19 +229,11 @@ const hdSubmit = async () => { ...@@ -180,19 +229,11 @@ const hdSubmit = async () => {
}; };
const handleSubmit = async () => { const handleSubmit = async () => {
form.value form.value.validate().then(({ valid, errors }) => {
.validate() if (valid) {
.then(({ valid, errors }) => { hdSubmit();
console.log('valid', errors); }
if (valid) { });
// uToast.info({ msg: '校验通过' });
console.log('校验通过');
hdSubmit();
}
})
.catch((error: any) => {
console.log(error, 'error');
});
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
class="pubList" class="pubList"
v-for="item in list" v-for="item in list"
:key="item.shopId" :key="item.shopId"
@click="item.shopStatus != [1, 2, 3] ? shopGto(item.shopId) : ''" @click="item.shopStatus != [1, 2, 3] ? shopGto(item) : ''"
> >
<!-- 列表头部 --> <!-- 列表头部 -->
<view class="titlecon"> <view class="titlecon">
...@@ -42,6 +42,7 @@ ...@@ -42,6 +42,7 @@
</view> </view>
</view> </view>
<view class="shbox" v-if="list.length > 0">审核被拒可点击修改重新提交</view> <view class="shbox" v-if="list.length > 0">审核被拒可点击修改重新提交</view>
<wd-status-tip image="content" tip="暂无内容" v-else />
</view> </view>
<view class="butCon"><button class="butXz" @click="shopGto()">申请入驻</button></view> <view class="butCon"><button class="butXz" @click="shopGto()">申请入驻</button></view>
</view> </view>
...@@ -70,8 +71,12 @@ const getList = async () => { ...@@ -70,8 +71,12 @@ const getList = async () => {
} }
}; };
const shopGto = (item) => { const shopGto = (item) => {
xma.redirectTo({ xma.navigateTo({
url: `/pages/storeEntry/detail${item ? `?id=${item}` : ''}`, url: `/pages/storeEntry/detail${item ? `?content=0` : ''}`,
success: function (res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', { data: item });
},
}); });
}; };
getList(); getList();
......
...@@ -13,8 +13,9 @@ ...@@ -13,8 +13,9 @@
<wd-rate <wd-rate
custom-class="icon-statr" custom-class="icon-statr"
v-model="shopDetail.grade" v-model="shopDetail.grade"
size="13px" size="26rpx"
space="1px" space="2rpx"
readonly
active-color="#f12929" active-color="#f12929"
/> />
<text class="rate">{{ shopDetail.grade }}</text> <text class="rate">{{ shopDetail.grade }}</text>
......
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