Skip to content

G
groupPurchase-miniapp
Commit dadb792e authored by 刘玉宏's avatar 刘玉宏
Browse files
Options

Merge branch 'master' of http://gitlab.platform.xinhuaapp.com/pengjiani/groupPurchase-miniapp

parents 9009778b 5e87a55c
Hide whitespace changes
Inline Side-by-side
Showing with 789 additions and 209 deletions
src/api/packageDetail.js
View file @ dadb792e
......@@ -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({
......
src/pages.json
View file @ dadb792e
......@@ -10,7 +10,7 @@
"path": "pages/index/loading",
"style": {
"navigationBarTitleText": "加载",
"navigationStyle":"custom",
"navigationStyle":"custom"
}
},
{
......@@ -256,4 +256,4 @@
"globalStyle": {
"navigationStyle": "custom"
}
}
\ No newline at end of file
}
src/pages/assistingAgriculture/detail/detail.vue
View file @ dadb792e
......@@ -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;
......
src/pages/assistingAgriculture/index/building.vue
View file @ dadb792e
......@@ -27,15 +27,28 @@
src="/static/assistingAgriculture/assets/culture.png"
style="width: 366rpx; height: 362rpx"
/>
<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 class="right-img">
<img
class="delicacy"
src="/static/assistingAgriculture/assets/delicacy.png"
style="height: 176rpx; margin-left: 8rpx"
/>
<img
@tap="toPresale"
class="fresh"
src="/static/assistingAgriculture/assets/fresh.png"
style="height: 176rpx; margin-left: 8rpx"
/>
</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>
<!-- 好货热卖-->
......@@ -50,24 +63,15 @@
color="#ABAAAA"
style="position: relative; float: right; top: -42rpx"
></wd-icon>
<img
@tap="toDetail"
class="rice"
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 class="hot-img" v-for="(item, index) in hotImgList" :key="index">
<img class="rice" @tap="toDetail" :src="item.img" style="width: 670rpx; height: 236rpx" />
</view>
</view>
<!-- tabs-->
<scroll-view class="tabs" show-scrollbar="false" scroll-x :scroll-with-animation="true">
<text
@tap="choice(index, item.categoryId)"
v-for="(item, index) in tabsList"
@tap="choice(index, item)"
v-for="(item, index) in detailList"
:key="index"
class="text"
:class="light === index ? 'light' : ''"
......@@ -82,10 +86,15 @@
src="/static/assistingAgriculture/assets/fruit4.png"
style="width: 670rpx; height: 236rpx"
/>
<view class="sort-list">
<view class="sort-img" v-for="(item, index) in detailList" :key="index">
<img @tap="toDetail" :src="item.img" style="width: 330rpx; height: 330rpx" />
<view class="detail-title">{{ item.text }}</view>
<view class="whh" style="display: flex">
<view
class="sort-img"
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">
<text class="price">￥{{ item.price }}</text>
</view>
......@@ -115,13 +124,16 @@ import Search from '../../../components/assistingAgriculture/index/Search.vue';
import {
getGoodSaleProdList,
getPlatformProdList,
getStrictSelection,
} from '../../../api/assistingAgriculture/building';
import { onMounted } from 'vue';
import { useRoute } from 'vue-router';
const current = ref(0);
const rightList = ref([]);
const light = ref(0);
const hotImgList = ref([]);
const testData = ref([]);
let sortData;
// 轮播图
const swiperList = ref([
'../../../static/assistingAgriculture/assets/village.png',
......@@ -129,19 +141,8 @@ const swiperList = ref([
'../../../static/assistingAgriculture/assets/village.png',
]);
// 分类列表数据
const detailList = ref([
{ img: '/static/assistingAgriculture/assets/fruit.png', price: '2555', text: '这是草莓这是草莓' },
{
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 detailList = ref([]);
const whh = ref({});
const params = {
current: 1,
size: 10,
......@@ -152,35 +153,49 @@ const params1 = {
size: 10,
categoryId: router.query.categoryId,
};
const filteredProdList = ref([]);
onMounted(async () => {
getStrictSelectionList();
getGoodSaleProd();
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 = () => {
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 = () => {
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({
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) {
console.log(e);
}
......@@ -344,7 +359,6 @@ page {
line-height: 28rpx;
letter-spacing: 0em;
margin-left: 48rpx;
margin-top: -20rpx;
color: #3d3d3d;
width: 190rpx;
white-space: nowrap;
......@@ -373,7 +387,7 @@ page {
text-align: center;
line-height: 24rpx;
margin-left: 240rpx;
margin-top: -15px;
margin-top: -36rpx;
display: block;
}
.cart-floating {
......@@ -423,4 +437,10 @@ page {
height: 100%;
background-color: lightgreen;
}
img.rice {
border-radius: 16rpx 16rpx 16rpx 16rpx;
margin-left: 20rpx;
margin-top: -40rpx;
padding-bottom: 40rpx;
}
</style>
src/pages/assistingAgriculture/index/index.vue
View file @ dadb792e
......@@ -32,12 +32,17 @@
</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 class="page-title">{{ item.categoryName }}</view>
<img :src="item.img" class="main-img" />
<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" />
<view class="detail-title">{{ item.prodName }}</view>
<view class="jiage-page">
......@@ -89,7 +94,6 @@ onMounted(async () => {
getList();
getPresaleCategoryList();
getPresale();
platformProdList();
});
// 获取筑农专区分类;
const getList = () => {
......
src/pages/assistingAgriculture/index/presale.vue
View file @ dadb792e
......@@ -22,9 +22,14 @@
</view>
<view class="sort">
<view style="display: flex; flex-direction: row">
<view class="borderClass" @tap="toPresale" v-for="(item, index) in sortList" :key="index">
<img :src="item.img" style="width: 48rpx; height: 48rpx" />
<view class="sort-text">{{ item.text }}</view>
<view
class="borderClass"
@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>
......@@ -38,14 +43,14 @@
class="text"
:class="light === index ? 'light' : ''"
>
{{ item.text }}
{{ item.categoryName }}
</text>
</scroll-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 sortDataList" :key="index" @tap="toDetail">
<img class="buy-list" :src="item.img" style="width: 670rpx; height: 670rpx" />
<view>
<text class="retail-price">零售价：￥{{ item.price }}/盒</text>
<text class="retail-price">零售价：￥{{ item.oriPrice }}/盒</text>
<text class="presale-price">预售价：￥{{ item.price }}/盒</text>
</view>
<view>
......@@ -57,8 +62,8 @@
width: 284rpx;
height: 128rpx;
float: right;
margin-top: -98rpx;
margin-right: 30rpx;
margin-top: -80rpx;
margin-right: 16rpx;
"
/>
</view>
......@@ -66,9 +71,9 @@
</view>
<view class="waterfall">
<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">
<image :src="good.image" mode="widthFix"></image>
<image :src="good.img" mode="widthFix"></image>
<image
class="presale-img"
src="/static/assistingAgriculture/presale/presale.png"
......@@ -90,35 +95,7 @@
</view>
<!-- 介绍部分 -->
<view class="introduce-section">
<text class="title">{{ good.name }}</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>
<text class="title">{{ good.prodName }}</text>
<view class="tags-box">
<text class="good-detail">{{ good.detail }}</text>
<text class="introduction">{{ good.introduction }}</text>
......@@ -149,35 +126,18 @@ import {
categoryPresaleList,
getPresaleList,
getPresaleProdList,
getStrictSelection,
} from '../../../api/assistingAgriculture/building';
const swiperList = ref([]);
const current = ref(0);
// 轮播图数据
let lunboData;
let sortData;
const light = ref(0);
const sortList = ref([
{ img: '/static/assistingAgriculture/presale/bacImg.png', price: '25', text: '应季好物' },
{ img: '/static/assistingAgriculture/presale/img2.png', price: '25', text: '猪肉蛋禽' },
{ img: '/static/assistingAgriculture/presale/img3.png', price: '25', text: '米面粮油' },
{ 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 sortList = ref([]);
const tabsData = ref([]);
const buyList = ref([]);
const sortDataList = ref([]);
const shopList = ref([
{ img: '/static/assistingAgriculture/presale/img7.png', price: '29.9', text: '应季好物' },
{ img: '/static/assistingAgriculture/presale/img7.png', price: '29.9', text: '应季好物' },
......@@ -244,6 +204,8 @@ onMounted(async () => {
getPresale();
getPresaleProd();
presaleSortList();
chooseTab('3287');
choice(0, '3292');
});
// 预售板块轮播图
const getPresale = () => {
......@@ -260,17 +222,41 @@ const getPresale = () => {
};
// 筑农预售分类
const presaleSortList = () => {
categoryPresaleList({ level: 1 }).then((res) => {
console.log(res, 111);
tabsList.value = res.data;
categoryPresaleList().then((res) => {
res.data.forEach((item) => {
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 = () => {
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) => {
sortDataList.value = tabsData.value[index];
light.value = index;
};
// 左侧数据列表
const LeftList = ref([]);
// 右侧数据列表
......@@ -295,9 +281,6 @@ function handleClick(e) {
function onChange(e) {
console.log(e);
}
const choice = (index) => {
light.value = index;
};
function toCart() {
// TODO: 跳转到筑农严选
xma.navigateTo({
......@@ -310,6 +293,9 @@ function toDetail() {
url: '/pages/assistingAgriculture/detail/detail',
});
}
function toTab(item) {
console.log(item, 222);
}
</script>
<style lang="scss" scoped>
......@@ -433,7 +419,6 @@ page {
color: #b3b3b3;
}
.presale-price {
left: 20rpx;
display: block;
margin-left: 60rpx;
font-size: 30rpx;
......@@ -446,23 +431,20 @@ page {
display: flex;
flex-direction: row;
width: 710rpx;
justify-content: center;
overflow: hidden;
margin-top: 10rpx;
margin-left: 30rpx;
}
.wt-list {
width: 360rpx;
display: flex;
flex-direction: column;
margin-right: 10rpx;
flex-direction: row;
}
.wt-item {
border-radius: 8px 8px 8px 8px;
margin-bottom: 15rpx;
background-color: #ffffff;
margin-left: 10rpx;
}
.item-img image {
......@@ -474,7 +456,7 @@ page {
background: #ffffff;
padding: 20rpx 30rpx;
border-radius: 0 0 08px 8px;
margin-top: -20rpx;
margin-top: -80rpx;
height: 110rpx;
}
......@@ -483,6 +465,7 @@ page {
color: #303133;
height: 50rpx;
line-height: 50rpx;
margin-left: -20rpx;
}
.introduce-section .tags-box {
......@@ -490,14 +473,15 @@ page {
align-items: center;
height: 30rpx;
font-size: 24rpx;
margin-left: -20rpx;
color: #909399;
}
.good-price {
position: relative;
margin-top: 70rpx;
margin-left: -200rpx;
color: #fa5151;
font-size: 28rpx;
margin-left: -20rpx;
}
.preview-img {
margin-left: 100rpx;
......
src/pages/assistingAgriculture/order/components/stepBar/index.vue 0 → 100644
View file @ dadb792e
<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>
src/pages/assistingAgriculture/order/detail.vue
View file @ dadb792e
<template>
<view class="container">
<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="info">
<view class="top">
......@@ -27,13 +31,27 @@
<text class="title">待取件</text>
<text class="text">06-25 17:37</text>
</view>
<text class="detail">详细信息 ></text>
<text class="detail" @tap="openPop()">详细信息 ></text>
</view>
<view class="infobox">
<text class="addr">贵阳市市政公园菜鸟驿站店</text>
<view class="row">
<text class="text">取件码</text>
<text class="code">2-7-4109</text>
<view class="detailbox">
<text class="text">
【贵阳市】您的快递已签收。如有疑问请联系业务员：
18275185576，代理点电话：18275185576，投诉电
话：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>
......@@ -79,7 +97,7 @@
<text class="num">x1</text>
</view>
</view>
<view class="product-item">
<view class="product-item" v-if="showMore">
<view class="left">
<image src="/static/ticket/logo.png" class="img" mode="aspectFill"></image>
<view class="infobox">
......@@ -96,7 +114,7 @@
</view>
</view>
</view>
<view class="totalbox">
<view class="totalbox totalbox-line" v-if="showMore">
<view class="total-item">
<text>商品总价：</text>
<text>￥98.70</text>
......@@ -119,7 +137,7 @@
</view>
</view>
</view>
<view class="totalbox">
<view class="totalbox" v-if="showMore">
<text class="title">订单信息</text>
<view class="total-item">
<text>订单号：</text>
......@@ -138,13 +156,40 @@
<text>微信</text>
</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 style="height: 170rpx"></view>
</view>
<view class="footer">
<view class="btn">查看物流</view>
<view class="btn">申请售后</view>
<view class="btn err">确认收货</view>
</view>
</view>
<stepBar ref="stepBarRef"></stepBar>
</template>
<script setup>
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>
<style lang="scss" scoped>
......@@ -152,6 +197,10 @@ page {
background: #f3f3f3;
}
::v-deep uni-web-view.uni-webview--fullscreen {
position: relative;
}
.container {
width: 375 * 2rpx;
margin: 0 auto;
......@@ -160,6 +209,7 @@ page {
position: relative;
top: -20rpx;
border-radius: 20rpx 20rpx 0 0;
z-index: 10;
.info {
background-color: #fff;
......@@ -305,37 +355,68 @@ page {
}
}
.infobox {
.detailbox {
display: flex;
flex-direction: column;
background-color: #f7f8fa;
border-radius: 12rpx;
padding: 20rpx 0 34rpx 50rpx;
gap: 28rpx;
margin-bottom: 54rpx;
gap: 22rpx;
.addr {
.text {
font-family: PingFang SC;
font-weight: bold;
font-size: 28rpx;
color: #333333;
font-size: 24rpx;
color: #999999;
line-height: 28rpx;
}
.row {
.infobox {
display: flex;
align-items: center;
flex-direction: column;
background-color: #f7f8fa;
border-radius: 12rpx;
padding: 20rpx 0 34rpx 50rpx;
gap: 28rpx;
color: #333333;
margin-bottom: 54rpx;
.text {
.addr {
font-family: PingFang SC;
font-weight: bold;
font-size: 28rpx;
color: #333333;
}
.code {
font-family: PingFang SC;
font-weight: bold;
font-size: 52rpx;
.row {
display: flex;
align-items: center;
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 {
flex-direction: column;
gap: 28rpx;
margin-top: 40rpx;
padding: 0 30rpx;
border-bottom: 1rpx solid #ededed;
padding: 0 30rpx 30rpx;
.title {
font-family:
......@@ -525,10 +605,55 @@ page {
}
}
.totalbox:last-child {
border-bottom: none;
.totalbox-line {
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>
src/pages/index/loading.vue
View file @ dadb792e
......@@ -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' });
});
......
src/pages/ticket/detail.vue
View file @ dadb792e
......@@ -13,8 +13,9 @@
<wd-rate
custom-class="icon-statr"
v-model="shopDetail.grade"
size="13px"
space="1px"
size="26rpx"
space="2rpx"
readonly
active-color="#f12929"
/>
<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