kuangjunhua/TakeOutShop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

地址管理/定位列表/收藏商品列表/常见问题列表页面编写

Browse Source
This commit is contained in:
邝军华 2025-03-16 17:29:37 +08:00
parent 96a9bd9514
commit a0d75475ff
35 changed files with 1915 additions and 839 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
order/assedit/assedit.vue
View File

@ -1,50 +1,59 @@
<template> <template>
<view class="main"> <view class="main">
<view class="cont"> <view class="head" :class="headShow?'head_show':''" :style="{'opacity':headShow?opacity:'1','padding-top':statusBartop+'px'}">
<textarea class="cont_textarea" :disable-default-padding="isIos" placeholder="请填写您的退款理由～"></textarea> <view class="head_cont" :style="{'width': statusHeight+'px','height':statusHeight+'px'}">
<view class="head_back" @click="handleBack()" :style="{'width': statusHeight+'px','height':statusHeight+'px'}">
<image class="head_back_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/newPD/zhBack.png" mode="widthFix"></image>
</view>
<view class="head_title" :style="{'width':pageWidth+'px','height':statusHeight+'px'}">申请售后</view>
</view>
</view> </view>
<view class="cont cont_padding"> <view class="cont_view" :style="{'padding-top':statusBartop+statusHeight+10+'px'}">
<view class="cont_item"> <view class="cont" >
<view class="cont_item_l"> <textarea class="cont_textarea" :disable-default-padding="isIos" placeholder="请填写您的退款理由～"></textarea>
<image class="cont_item_img" src="../../static/ass/money.png" mode="widthFix"></image>
<view class="cont_item_text">退款金额</view>
</view>
<view class="cont_item_r"><input class="cont_item_input" type="digit" placeholder="请输入金额"/><text>元</text></view>
</view> </view>
<view class="cont_border"></view> <view class="cont cont_padding">
<view class="cont_item"> <view class="cont_item">
<view class="cont_item_l"> <view class="cont_item_l">
<image class="cont_item_img" src="../../static/ass/phone.png" mode="widthFix"></image> <image class="cont_item_img" src="../../static/ass/money.png" mode="widthFix"></image>
<view class="cont_item_text">联系方式</view> <view class="cont_item_text">退款金额</view>
</view>
<view class="cont_item_r"><input class="cont_item_input" type="digit" placeholder="请输入金额"/><text>元</text></view>
</view> </view>
<view class="cont_item_r"><input class="cont_item_input" type="number" placeholder="请输入电话号码"/></view> <view class="cont_border"></view>
</view> <view class="cont_item">
<view class="cont_border"></view> <view class="cont_item_l">
<view class="cont_item"> <image class="cont_item_img" src="../../static/ass/phone.png" mode="widthFix"></image>
<view class="cont_item_l"> <view class="cont_item_text">联系方式</view>
<image class="cont_item_img" src="../../static/ass/img.png" mode="widthFix"></image> </view>
<view class="cont_item_text">照片</view> <view class="cont_item_r"><input class="cont_item_input" type="number" placeholder="请输入电话号码"/></view>
</view> </view>
</view> <view class="cont_border"></view>
<view class="cont_shop_text">请将菜品图上传</view> <view class="cont_item">
<view class="cont_shop_edit"> <view class="cont_item_l">
<view class="cont_ul"> <image class="cont_item_img" src="../../static/ass/img.png" mode="widthFix"></image>
<view class="cont_li"> <view class="cont_item_text">照片</view>
<view class="cont_upload_remove"> </view>
<image class="cont_upload_remove_img" src="../../static/eval/closeImg.png" mode="widthFix"></image> </view>
<view class="cont_shop_text">请将菜品图上传</view>
<view class="cont_shop_edit">
<view class="cont_ul">
<view class="cont_li">
<view class="cont_upload_remove">
<image class="cont_upload_remove_img" src="../../static/eval/closeImg.png" mode="widthFix"></image>
</view>
<image class="cont_li_img" src="../../static/Mask.png" mode="widthFix"></image>
</view> </view>
<image class="cont_li_img" src="../../static/Mask.png" mode="widthFix"></image> <view class="cont_li cont_upload">
<image class="cont_upload_img" src="../../static/ass/uploading.png" mode="widthFix"></image>
<view class="cont_upload_text">添加照片</view>
</view>
</view> </view>
<view class="cont_li cont_upload">
<image class="cont_upload_img" src="../../static/ass/uploading.png" mode="widthFix"></image>
<view class="cont_upload_text">添加照片</view>
</view>
</view> </view>
</view> </view>
</view> </view>
<view style="height: 200rpx;"></view> <view style="height: 200rpx;"></view>
<view class="footer"> <view class="footer">
<view class="footer_btn">提交</view> <view class="footer_btn">提交</view>
@ -60,7 +69,12 @@ import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } fr
const counterStore = useCounterStore(); // 使用 Store const counterStore = useCounterStore(); // 使用 Store
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新) //使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore); const {statusHeight,headerHeight,statusBartop,ButtonWidth,ButtonHeight } = storeToRefs(counterStore);
const headShow = ref(false);
const showBack = ref(false);
const pageWidth = ref(0);
const opacity = ref(1);
const timeImg = ref('');
const isIos = ref(false); const isIos = ref(false);
const System = () =>{ const System = () =>{
const phone = wx.getSystemInfoSync(); const phone = wx.getSystemInfoSync();
@ -70,10 +84,51 @@ const System = () =>{
isIos.value = false isIos.value = false
} }
}; };
// 获取页面宽度
const updatePageWidth = () => {
const systemInfo = uni.getSystemInfoSync();
pageWidth.value = systemInfo.windowWidth;
};
const searchWidth = computed(() => {
return pageWidth.value - statusHeight.value - ButtonWidth.value - 35;
});
// 判断是否有上一页
const getPages = () => {
const pages = getCurrentPages();
return pages.length > 1;
};
const handleBack = () => {
if (getPages()) {
// 如果有上一页，返回上一页
uni.navigateBack();
} else {
// 如果没有上一页，返回首页
uni.switchTab({
url: '/pages/index/index',
});
}
};
onLoad((options) => { onLoad((options) => {
System(); System();
//初始化时判断是否显示返回按钮
showBack.value = getPages();
updatePageWidth();
}); });
onShow(() => {}); onShow(() => {});
onPageScroll((e)=>{
const top = e.scrollTop;
// 导航条颜色透明渐变
if (top <= 50) {
headShow.value = false
} else {
if( 50 < top && top <= 200 ){
opacity.value = top / 200
}else{
opacity.value = 1
}
headShow.value = true
}
}),
onReady(()=>{}) onReady(()=>{})
onPullDownRefresh(()=>{}) onPullDownRefresh(()=>{})
onReachBottom(()=>{}) onReachBottom(()=>{})

277
order/assedit/style.scss
View File

@ -2,142 +2,187 @@ page{
background: #f6f6f6; background: #f6f6f6;
} }
.main{ .main{
background: linear-gradient(180deg,#FCEEEF 0%,#f6f6f6 100%); background: url(https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/user_bcg.png) #f6f6f6;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100%;
padding-top: 25rpx; padding-top: 25rpx;
.cont{ .head{
margin: 0rpx 25rpx 25rpx 25rpx; position: fixed;
padding: 30rpx; z-index: 100;
border-radius: 16rpx; width: 100%;
background-color: #FFFFFF; top: 0;
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05); left: 0;
.cont_textarea{ padding-bottom: 10px;
width: 100%; display: flex;
height: 100rpx; align-items: center;
font-size: 28rpx; .head_cont{
color: #333333; position: relative;
} .head_back{
.cont_item{
display: flex;
align-items: center;
justify-content: space-between;
height: 120rpx;
padding: 0 30rpx 0 30rpx;
.cont_item_l{
display: flex; display: flex;
height: 100%;
align-items: center; align-items: center;
.cont_item_img{ margin-left: 10px;
width: 42rpx; position: absolute;
height: 42rpx; z-index: 2;
.head_back_img{
display: block; display: block;
width: 16px;
height: 16px;
margin-left: 7px;
} }
.cont_item_text{ }
color: #000000; .head_title{
font-size: 30rpx; position: absolute;
font-weight: 500; z-index: 1;
margin-left: 20rpx; font-size: 30rpx;
color: '#000000';
display: flex;
align-items: center;
font-weight: 500;
justify-content: center;
}
}
}
.head_show{
background-color: #FFFFFF;
border-bottom: 1rpx solid #f6f6f6;
}
.cont_view{
.cont{
margin: 0rpx 25rpx 25rpx 25rpx;
padding: 30rpx;
border-radius: 16rpx;
background-color: #FFFFFF;
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
.cont_textarea{
width: 100%;
height: 100rpx;
font-size: 28rpx;
color: #333333;
}
.cont_item{
display: flex;
align-items: center;
justify-content: space-between;
height: 120rpx;
padding: 0 30rpx 0 30rpx;
.cont_item_l{
display: flex;
height: 100%; height: 100%;
align-items: center;
.cont_item_img{
width: 42rpx;
height: 42rpx;
display: block;
}
.cont_item_text{
color: #000000;
font-size: 30rpx;
font-weight: 500;
margin-left: 20rpx;
height: 100%;
display: flex;
align-items: center;
}
.cont_item_text::before{
content: '*';
font-size: 26rpx;
color: #FF0000;
margin-right: 5rpx;
}
}
.cont_item_r{
color: #333333;
font-size: 28rpx;
display: flex; display: flex;
align-items: center; align-items: center;
}
.cont_item_text::before{
content: '*';
font-size: 26rpx;
color: #FF0000;
margin-right: 5rpx;
}
}
.cont_item_r{
color: #333333;
font-size: 28rpx;
display: flex;
align-items: center;
height: 100%;
.cont_item_input{
width: 350rpx;
text-align: right;
height: 100%; height: 100%;
.cont_item_input{
width: 350rpx;
text-align: right;
height: 100%;
}
}
.cont_item_r text{
margin-left: 20rpx;
font-weight: 500;
} }
} }
.cont_item_r text{ .cont_border{
margin-left: 20rpx; height: 1rpx;
font-weight: 500; background-color: #D5D5D5;
margin-left: 75rpx;
width: 600rpx;
} }
} .cont_shop_text{
.cont_border{ font-size: 30rpx;
height: 1rpx; color: #999999;
background-color: #D5D5D5; padding:0rpx 30rpx 30rpx 30rpx;
margin-left: 75rpx; }
width: 600rpx; .cont_shop_edit{
} border-radius: 16rpx;
.cont_shop_text{ .cont_ul{
font-size: 30rpx; display: flex;
color: #999999; flex-wrap: wrap;
padding:0rpx 30rpx 30rpx 30rpx; .cont_li{
}
.cont_shop_edit{
border-radius: 16rpx;
.cont_ul{
display: flex;
flex-wrap: wrap;
.cont_li{
width: 192rpx;
height: 192rpx;
background: #FFFFFF;
border-radius: 23rpx;
border: 1px solid #F3F3F3;
margin-left: 30rpx;
margin-bottom: 30rpx;
position: relative;
.cont_upload_remove{
position: absolute;
z-index: 2;
width: 40rpx;
height: 40rpx;
right: -12rpx;
top: -12rpx;
border-radius: 50rpx;
background-color: #FFFFFF;
.cont_upload_remove_img{
width: 40rpx;
height: 40rpx;
border-radius: 50rpx;
}
}
.cont_li_img{
width: 192rpx; width: 192rpx;
height: 192rpx; height: 192rpx;
border-radius: 4rpx; background: #FFFFFF;
display: block; border-radius: 23rpx;
position: absolute; border: 1px solid #F3F3F3;
top: 0; margin-left: 30rpx;
left: 0; margin-bottom: 30rpx;
z-index: 1; position: relative;
.cont_upload_remove{
position: absolute;
z-index: 2;
width: 40rpx;
height: 40rpx;
right: -12rpx;
top: -12rpx;
border-radius: 50rpx;
background-color: #FFFFFF;
.cont_upload_remove_img{
width: 40rpx;
height: 40rpx;
border-radius: 50rpx;
}
}
.cont_li_img{
width: 192rpx;
height: 192rpx;
border-radius: 4rpx;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
} }
.cont_upload{
background-color: #F4F6F8;
.cont_upload_img{
margin: 0 auto;
width: 80rpx;
height: 80rpx;
display: block;
margin-top: 35rpx;
}
.cont_upload_text{
text-align: center;
color: #999999;
font-size: 24rpx;
margin-top: 10rpx;
}
}
} }
.cont_upload{
background-color: #F4F6F8;
.cont_upload_img{
margin: 0 auto;
width: 80rpx;
height: 80rpx;
display: block;
margin-top: 35rpx;
}
.cont_upload_text{
text-align: center;
color: #999999;
font-size: 24rpx;
margin-top: 10rpx;
}
}
} }
} }
.cont_padding{
padding: 0;
}
} }
.cont_padding{
padding: 0;
}
.footer{ .footer{
position: fixed; position: fixed;
left: 0; left: 0;

11
order/orderConfirm/orderConfirm.vue
View File

@ -2,10 +2,10 @@
<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta> <page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
<view class="main"> <view class="main">
<!-- 地址 --> <!-- 地址 -->
<view class="cont"> <view class="cont" @click="onAddress()">
<view class="cont_ul"> <view class="cont_ul">
<view class="cont_l"> <view class="cont_l cont_width">
<view class="cont_text">东方体育中心<text class="cont_default">默认</text></view> <view class="cont_text"><text class="cont_default">默认</text><text class="cont_v">花木街道浦东新区机关事务管理局人民政府-20号楼2306室</text></view>
<view class="cont_user">悟语<text class="cont_tel">15221679766</text></view> <view class="cont_user">悟语<text class="cont_tel">15221679766</text></view>
</view> </view>
<view class="cont_arr"></view> <view class="cont_arr"></view>
@ -240,6 +240,11 @@ const timeFun = (e)=>{
]}] ]}]
timList.value = time; timList.value = time;
} }
const onAddress=()=>{
uni.navigateTo({
url:`/userserve/addressList/addressList`
})
};
onLoad((options) => { onLoad((options) => {
timeFun(); timeFun();
}); });

25
order/orderConfirm/style.scss
View File

@ -23,22 +23,25 @@ page{
justify-content: space-between; justify-content: space-between;
.cont_l{ .cont_l{
.cont_text{ .cont_text{
font-size: 32rpx; font-size: 28rpx;
font-weight: 500; font-weight: 500;
color: #000000; color: #000000;
display: flex;
align-items: center;
.cont_default{ .cont_default{
font-size: 20rpx; font-size: 20rpx;
background-color: #FFF4CD; background-color: #FFF4CD;
border-radius: 10rpx; border-radius: 10rpx;
color: #F9D448; color: #F9D448;
margin-left: 10rpx; margin-right: 10rpx;
padding: 2rpx 10rpx 2rpx 10rpx; padding: 2rpx 10rpx 2rpx 10rpx;
vertical-align: middle;
} }
.cont_v{
vertical-align: middle;
}
} }
.cont_user{ .cont_user{
font-size: 26rpx; font-size: 28rpx;
color: #666666; color: #666666;
margin-top: 10rpx; margin-top: 10rpx;
.cont_tel{ .cont_tel{
@ -46,6 +49,9 @@ page{
} }
} }
} }
.cont_width{
width: 550rpx;
}
.cont_arr{ .cont_arr{
position: relative; position: relative;
margin-right: 20rpx; margin-right: 20rpx;
@ -342,16 +348,16 @@ page{
content: '¥'; content: '¥';
font-size: 28rpx; font-size: 28rpx;
margin-right: 5rpx; margin-right: 5rpx;
margin-left: 5rpx; margin-left: 10rpx;
} }
.footer_coupon{ .footer_coupon{
display: inline-block; display: inline-block;
color: #666666; color: #666666;
font-size: 28rpx; font-size: 26rpx;
margin-left: 10rpx; margin-left: 10rpx;
.footer_coupon_price::before{ .footer_coupon_price::before{
content: '¥'; content: '¥';
font-size: 24rpx; font-size: 20rpx;
} }
} }
} }
@ -364,8 +370,9 @@ page{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 32rpx; font-size: 28rpx;
color: #FFFFFF; color: #FFFFFF;
font-weight: 500;
} }
} }
.shop_open{ .shop_open{

7
order/orderList/orderList.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<view class="main"> <view class="main">
<view class="head" :style="{'padding-top':headerHeight+3+'px'}"> <view class="head" :style="{'padding-top':headerHeight+4+'px'}">
<view class="head_top"> <view class="head_top">
<view class="head_back" @click="handleBack()" :style="{'width': statusHeight+'px','height':statusHeight+'px'}"> <view class="head_back" @click="handleBack()" :style="{'width': statusHeight+'px','height':statusHeight+'px'}">
<image class="head_back_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/newPD/zhBack.png" mode="widthFix"></image> <image class="head_back_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/newPD/zhBack.png" mode="widthFix"></image>
</view> </view>
<view class="head_search" :style="{'width':searchWidth+'px'}"> <view class="head_search" :style="{'width':searchWidth+'px','height':statusHeight+4+'px'}">
<image class="head_search_img" src="../../static/search_img.png" mode="widthFix"></image> <image class="head_search_img" src="../../static/search_img.png" mode="widthFix"></image>
<input class="head_search_input" type="text" placeholder="请输入搜索内容" v-model="searchtext"/> <input class="head_search_input" type="text" placeholder="请输入搜索内容" v-model="searchtext"/>
</view> </view>
@ -17,7 +17,7 @@
</view> </view>
</view> </view>
</view> </view>
<view class="order_cont" :style="{'padding-top':94+headerHeight+'px'}"> <view class="order_cont" :style="{'padding-top':statusHeight+headerHeight+65+'px'}">
<view class="order_list" @click="orderDetail()"> <view class="order_list" @click="orderDetail()">
<view class="order_type">已完成</view> <view class="order_type">已完成</view>
<view class="order_time">2025/1/15 17:20 周三</view> <view class="order_time">2025/1/15 17:20 周三</view>
@ -268,6 +268,7 @@ const orderDetail=()=>{
url:`/order/orderDetail/orderDetail` url:`/order/orderDetail/orderDetail`
}) })
}; };
//使用 uni.onLoad 监听页面加载 //使用 uni.onLoad 监听页面加载
onLoad((options) => { onLoad((options) => {
const { type } = options; const { type } = options;

2
order/orderList/style.scss
View File

@ -45,7 +45,7 @@ page{
.head_search_input{ .head_search_input{
width: 500rpx; width: 500rpx;
height: 100%; height: 100%;
font-size: 28rpx; font-size: 27rpx;
display: flex; display: flex;
align-items: center; align-items: center;
} }

29
pages.json
View File

@ -96,6 +96,12 @@
"navigationBarTitleText": "评价", "navigationBarTitleText": "评价",
"navigationBarBackgroundColor": "#FFFFFF" "navigationBarBackgroundColor": "#FFFFFF"
} }
},{
"path": "faqList/faqList",
"style": {
"navigationBarTitleText": "常见问题",
"navigationBarBackgroundColor": "#FFFFFF"
}
}] }]
}, },
{ {
@ -146,7 +152,8 @@
"path": "assedit/assedit", "path": "assedit/assedit",
"style": { "style": {
"navigationBarTitleText": "申请售后", "navigationBarTitleText": "申请售后",
"navigationBarBackgroundColor": "#FCEEEF" "navigationBarBackgroundColor": "#FCEEEF",
"navigationStyle": "custom"
} }
},{ },{
"path": "orderDetail/orderDetail", "path": "orderDetail/orderDetail",
@ -167,7 +174,7 @@
"pages": [{ "pages": [{
"path": "location/location", "path": "location/location",
"style": { "style": {
"navigationBarTitleText": "选择地址", "navigationBarTitleText": "选择收货地址",
"navigationBarBackgroundColor": "#FFFFFF" "navigationBarBackgroundColor": "#FFFFFF"
} }
}, },
@ -177,6 +184,12 @@
"navigationBarTitleText": "地址管理", "navigationBarTitleText": "地址管理",
"navigationBarBackgroundColor": "#FFFFFF" "navigationBarBackgroundColor": "#FFFFFF"
} }
},{
"path": "addressEdit/addressEdit",
"style": {
"navigationBarTitleText": "新增地址",
"navigationBarBackgroundColor": "#FFFFFF"
}
},{ },{
"path": "aiserve/aiserve", "path": "aiserve/aiserve",
"style": { "style": {
@ -184,6 +197,18 @@
"navigationBarBackgroundColor": "#FFFFFF", "navigationBarBackgroundColor": "#FFFFFF",
"navigationStyle": "custom" "navigationStyle": "custom"
} }
},{
"path": "aichitchat/aichitchat",
"style": {
"navigationBarTitleText": "消息详情",
"navigationBarBackgroundColor": "#FFFFFF"
}
},{
"path": "favorite/favorite",
"style": {
"navigationBarTitleText": "商品收藏",
"navigationBarBackgroundColor": "#FFFFFF"
}
},{ },{
"path": "certificate/certificate", "path": "certificate/certificate",
"style": { "style": {

178
pages/cart/cart.vue
View File

@ -2,7 +2,7 @@
<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta> <page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
<view class="main"> <view class="main">
<!-- 头部区域 --> <!-- 头部区域 -->
<view class="head" :style="{'padding-top':headerHeight+'px'}"> <view class="head" :style="{'padding-top':headerHeight+'px'}" @click="location()">
<view class="head_location head_location_active"><text class="location_title">东方体育中心</text></view> <view class="head_location head_location_active"><text class="location_title">东方体育中心</text></view>
<view class="head_ul"> <view class="head_ul">
<view class="head_l"> <view class="head_l">
@ -15,111 +15,114 @@
</view> </view>
</view> </view>
</view> </view>
<view class="cart" :style="{'padding-top':85+headerHeight+'px'}"> <view class="cont">
<view style="height: 10rpx;"></view> <view class="head_fixed" :style="{'height':75+headerHeight+'px'}">下拉刷新...</view>
<uni-swipe-action> <view class="cart">
<uni-swipe-action-item v-for="(item,index) in cartList" :key="index" :right-options="options" @click="removeCart(1,item)"> <view style="height: 10rpx;"></view>
<view class="cart_item" v-if="item.type == 1"> <uni-swipe-action>
<view class="cart_selected" @click="checkedShop(item)"> <uni-swipe-action-item v-for="(item,index) in cartList" :key="index" :right-options="options" @click="removeCart(1,item)">
<view :class="item.isSelected === '1'?'cart_selected_true':'cart_selected_false'"> <view class="cart_item" v-if="item.type == 1">
<image v-if="item.isSelected" src="../../static/selected.png"></image> <view class="cart_selected" @click="checkedShop(item)">
</view> <view :class="item.isSelected === '1'?'cart_selected_true':'cart_selected_false'">
</view>
<view class="cart_shop">
<image class="cart_shop_img" :src="item.imgUrl" mode="widthFix"></image>
</view>
<view class="cart_shop_cont">
<view class="cart_title">{{item.title}}</view>
<view class="cart_desc">{{item.desc}}</view>
<view class="cart_bottom">
<view class="cart_price price">{{item.price}}<text class="market_name prices">59.9</text></view>
<view class="cart_counter" v-if="showEdit" @click="removeCart(1,item)">
<view class="cart_remove">删除</view>
</view>
<view class="cart_counter" v-else>
<view class="cart_counter_btn border_l" @click="editAmount(1,item)">
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
</view>
<view class="cart_counter_center">{{item.amount}}</view>
<view class="cart_counter_btn border_r" @click="editAmount(2,item)">
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
</view>
<view class="cart_items" v-if="item.type == 2">
<view class="cart_t">
<view class="cart_selected">
<view :class="item.isSelected?'cart_selected_true':'cart_selected_false'">
<image v-if="item.isSelected" src="../../static/selected.png"></image> <image v-if="item.isSelected" src="../../static/selected.png"></image>
</view> </view>
</view> </view>
<view class="cart_view_scroll"> <view class="cart_shop">
<view class="cart_scroll"> <image class="cart_shop_img" :src="item.imgUrl" mode="widthFix"></image>
<scroll-view class="cart_scroll_ul" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" scroll-x="true"> </view>
<view class="cart_scroll_li" v-for="(i,index) in item.list"> <view class="cart_shop_cont">
<view class="cart_scroll_img"> <view class="cart_title">{{item.title}}</view>
<image class="cart_scroll_img_url" :src="i.imgUrl" mode="widthFix"></image> <view class="cart_desc">{{item.desc}}</view>
</view>
<view class="cart_scroll_title">{{i.title}}</view>
<view class="cart_scroll_price price">{{i.price}}<text class="market_name prices">59.9</text></view>
</view>
</scroll-view>
</view>
<view class="cart_bottom"> <view class="cart_bottom">
<view class=""></view> <view class="cart_price price">{{item.price}}<text class="market_name prices">59.9</text></view>
<view class="cart_counter" v-if="showEdit" @click="removeCart(1,item)"> <view class="cart_counter" v-if="showEdit" @click="removeCart(1,item)">
<view class="cart_remove">删除</view> <view class="cart_remove">删除</view>
</view> </view>
<view class="cart_counter" v-else> <view class="cart_counter" v-else>
<view class="cart_counter_btn border_l"> <view class="cart_counter_btn border_l" @click="editAmount(1,item)">
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image> <image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
</view> </view>
<view class="cart_counter_center">1</view> <view class="cart_counter_center">{{item.amount}}</view>
<view class="cart_counter_btn border_r"> <view class="cart_counter_btn border_r" @click="editAmount(2,item)">
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image> <image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="cart_items" v-if="item.type == 2">
</view> <view class="cart_t">
</uni-swipe-action-item> <view class="cart_selected">
</uni-swipe-action> <view :class="item.isSelected?'cart_selected_true':'cart_selected_false'">
<!-- 失效商品 --> <image v-if="item.isSelected" src="../../static/selected.png"></image>
<!-- <view class="cart_lose"> </view>
<view class="cart_lose_top"> </view>
<view class="cart_lose_top_l">共5款失效商品</view> <view class="cart_view_scroll">
<view class="cart_lose_top_r">一键清空</view> <view class="cart_scroll">
</view> <scroll-view class="cart_scroll_ul" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" scroll-x="true">
<view class="cart_lose_bottom"> <view class="cart_scroll_li" v-for="(i,index) in item.list">
<view class="cart_lose_img"> <view class="cart_scroll_img">
<view class="cart_lose_bcg"> <image class="cart_scroll_img_url" :src="i.imgUrl" mode="widthFix"></image>
<view class="cart_lose_text">商品已下架</view> </view>
<view class="cart_scroll_title">{{i.title}}</view>
<view class="cart_scroll_price price">{{i.price}}<text class="market_name prices">59.9</text></view>
</view>
</scroll-view>
</view>
<view class="cart_bottom">
<view class=""></view>
<view class="cart_counter" v-if="showEdit" @click="removeCart(1,item)">
<view class="cart_remove">删除</view>
</view>
<view class="cart_counter" v-else>
<view class="cart_counter_btn border_l">
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
</view>
<view class="cart_counter_center">1</view>
<view class="cart_counter_btn border_r">
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
</view>
</view> </view>
<image class="cart_lose_img_url" src="../../static/Mask.png" mode="widthFix"></image> </uni-swipe-action-item>
</uni-swipe-action>
<!-- 失效商品 -->
<!-- <view class="cart_lose">
<view class="cart_lose_top">
<view class="cart_lose_top_l">共5款失效商品</view>
<view class="cart_lose_top_r">一键清空</view>
</view> </view>
<view class="cart_lose_ly"> <view class="cart_lose_bottom">
<view class="cart_lose_title">糖醋排骨</view> <view class="cart_lose_img">
<view class="cart_lose_desc">商品下架了</view> <view class="cart_lose_bcg">
</view> <view class="cart_lose_text">商品已下架</view>
</view> </view>
<view class="cart_lose_bottom"> <image class="cart_lose_img_url" src="../../static/Mask.png" mode="widthFix"></image>
<view class="cart_lose_img"> </view>
<view class="cart_lose_bcg"> <view class="cart_lose_ly">
<view class="cart_lose_text">商品已下架</view> <view class="cart_lose_title">糖醋排骨</view>
<view class="cart_lose_desc">商品下架了</view>
</view> </view>
<image class="cart_lose_img_url" src="../../static/Mask.png" mode="widthFix"></image>
</view> </view>
<view class="cart_lose_ly"> <view class="cart_lose_bottom">
<view class="cart_lose_title">糖醋排骨</view> <view class="cart_lose_img">
<view class="cart_lose_desc">商品下架了</view> <view class="cart_lose_bcg">
<view class="cart_lose_text">商品已下架</view>
</view>
<image class="cart_lose_img_url" src="../../static/Mask.png" mode="widthFix"></image>
</view>
<view class="cart_lose_ly">
<view class="cart_lose_title">糖醋排骨</view>
<view class="cart_lose_desc">商品下架了</view>
</view>
</view> </view>
</view> </view> -->
</view> --> </view>
</view> </view>
<view class="user_title" v-if="!showEdit"> <view class="user_title" v-if="!showEdit">
<text class="user_name">为您推荐</text> <text class="user_name">为您推荐</text>
@ -476,6 +479,11 @@ const removeCart=(type,item)=>{
} }
}) })
}; };
const location=()=>{
uni.navigateTo({
url:`/userserve/location/location`
})
}
//使用 uni.onLoad 监听页面加载 //使用 uni.onLoad 监听页面加载
onLoad((options) => { onLoad((options) => {
cartData(); cartData();

387
pages/cart/style.scss
View File

@ -96,83 +96,27 @@ page{
} }
} }
// 购物车区域 // 购物车区域
.cart{ .cont{
background: linear-gradient(180deg, #FCEEEF 0%, #f6f6f6 100%); .head_fixed{
background-repeat: no-repeat; background-color: #f6f6f6;
.cart_item{ color: #999999;
// margin: 0rpx 20rpx 0rpx 20rpx; font-size: 26rpx;
// border-radius: 25rpx;
// background-color: #ffffff;
// box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
display: flex; display: flex;
justify-content: space-between; align-items: flex-end;
padding: 20rpx 0rpx 20rpx 0rpx; justify-content: center;
.cart_selected{ padding-bottom: 10px;
width: 50rpx;
display: flex;
align-items: center;
justify-content: center;
padding-left: 20rpx;
.cart_selected_false{
width: 35rpx;
height: 35rpx;
border-radius: 50%;
border: 2rpx solid #bfbfbf;
}
.cart_selected_true{
width: 35rpx;
height: 35rpx;
border-radius: 50%;
background-color: #FF0000;
border: 2rpx solid #FF0000;
display: flex;
align-items: center;
justify-content: center;
}
.cart_selected_true image{
width: 25rpx;
height: 25rpx;
display: block;
}
}
.cart_shop{
width: 180rpx;
height: 180rpx;
position: relative;
border-radius: 10rpx;
// border: 1rpx solid #F3F3F3;
overflow: hidden;
.cart_shop_img{
width: 180rpx;
height: 180rpx;
position: absolute;
top: 0;
z-index: 1;
}
}
.cart_shop_cont{
width: 410rpx;
.cart_title{
font-size: 28rpx;
color: #333333;
font-weight: 500;
min-height: 85rpx;
}
.cart_desc{
font-size: 24rpx;
color: #FF2D41;
}
}
} }
.cart_items{ .cart{
// margin: 0rpx 20rpx 20rpx 20rpx; background: linear-gradient(180deg, #FCEEEF 0%, #f6f6f6 100%);
border-radius: 25rpx; background-repeat: no-repeat;
// background-color: #ffffff; .cart_item{
// box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05); // margin: 0rpx 20rpx 0rpx 20rpx;
padding: 20rpx 0rpx 20rpx 0rpx; // border-radius: 25rpx;
.cart_t{ // background-color: #ffffff;
// box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 20rpx 0rpx 20rpx 0rpx;
.cart_selected{ .cart_selected{
width: 50rpx; width: 50rpx;
display: flex; display: flex;
@ -185,140 +129,208 @@ page{
border-radius: 50%; border-radius: 50%;
border: 2rpx solid #bfbfbf; border: 2rpx solid #bfbfbf;
} }
} .cart_selected_true{
.cart_view_scroll{ width: 35rpx;
width: 620rpx; height: 35rpx;
.cart_scroll{ border-radius: 50%;
width: 100%; background-color: #FF0000;
border: 2rpx solid #FF0000;
display: flex; display: flex;
overflow: hidden; align-items: center;
white-space: nowrap; justify-content: center;
.cart_scroll_ul{ }
.cart_scroll_li{ .cart_selected_true image{
width: 180rpx; width: 25rpx;
display: inline-block; height: 25rpx;
margin-right: 20rpx; display: block;
.cart_scroll_img{ }
background: #FFFFFF; }
border-radius: 10rpx; .cart_shop{
// border: 1rpx solid #F3F3F3; width: 180rpx;
height: 180rpx;
position: relative;
border-radius: 10rpx;
// border: 1rpx solid #F3F3F3;
overflow: hidden;
.cart_shop_img{
width: 180rpx;
height: 180rpx;
position: absolute;
top: 0;
z-index: 1;
}
}
.cart_shop_cont{
width: 410rpx;
.cart_title{
font-size: 28rpx;
color: #333333;
font-weight: 500;
min-height: 85rpx;
}
.cart_desc{
font-size: 24rpx;
color: #FF2D41;
}
}
}
.cart_items{
// margin: 0rpx 20rpx 20rpx 20rpx;
border-radius: 25rpx;
// background-color: #ffffff;
// box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
padding: 20rpx 0rpx 20rpx 0rpx;
.cart_t{
display: flex;
justify-content: space-between;
.cart_selected{
width: 50rpx;
display: flex;
align-items: center;
justify-content: center;
padding-left: 20rpx;
.cart_selected_false{
width: 35rpx;
height: 35rpx;
border-radius: 50%;
border: 2rpx solid #bfbfbf;
}
}
.cart_view_scroll{
width: 620rpx;
.cart_scroll{
width: 100%;
display: flex;
overflow: hidden;
white-space: nowrap;
.cart_scroll_ul{
.cart_scroll_li{
width: 180rpx; width: 180rpx;
height: 180rpx; display: inline-block;
overflow: hidden; margin-right: 20rpx;
.cart_scroll_img_url{ .cart_scroll_img{
background: #FFFFFF;
border-radius: 10rpx;
// border: 1rpx solid #F3F3F3;
width: 180rpx; width: 180rpx;
height: 180rpx; height: 180rpx;
display: block; overflow: hidden;
.cart_scroll_img_url{
width: 180rpx;
height: 180rpx;
display: block;
}
}
.cart_scroll_title{
color: #333333;
font-size: 26rpx;
font-weight: 500;
white-space: break-spaces;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
overflow-wrap: break-word;
margin-top: 20rpx;
}
.cart_scroll_price{
font-size: 32rpx;
color: #FF0000;
font-weight: 500;
margin-top: 10rpx;
}
.cart_scroll_market_name{
color: #999999;
font-size: 28rpx;
text-decoration: line-through;
font-weight: 400;
} }
}
.cart_scroll_title{
color: #333333;
font-size: 26rpx;
font-weight: 500;
white-space: break-spaces;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
overflow-wrap: break-word;
margin-top: 20rpx;
}
.cart_scroll_price{
font-size: 32rpx;
color: #FF0000;
font-weight: 500;
margin-top: 10rpx;
}
.cart_scroll_market_name{
color: #999999;
font-size: 28rpx;
text-decoration: line-through;
font-weight: 400;
} }
} }
} }
} }
} }
} }
} .cart_lose{
.cart_lose{ margin: 0rpx 20rpx 20rpx 20rpx;
margin: 0rpx 20rpx 20rpx 20rpx; border-radius: 25rpx;
border-radius: 25rpx; background-color: #fff;
background-color: #fff; padding-bottom: 20rpx;
padding-bottom: 20rpx; box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05); .cart_lose_top{
.cart_lose_top{ display: flex;
display: flex; justify-content: space-between;
justify-content: space-between; align-items: center;
align-items: center; border-bottom: 1rpx solid #f6f6f6;
border-bottom: 1rpx solid #f6f6f6; .cart_lose_top_l{
.cart_lose_top_l{ color: #000000;
color: #000000; font-size: 28rpx;
font-size: 28rpx; padding:25rpx 20rpx 25rpx 20rpx;
padding:25rpx 20rpx 25rpx 20rpx; }
.cart_lose_top_r{
color: #E60703;
font-size: 28rpx;
padding:25rpx 20rpx 25rpx 20rpx;
}
} }
.cart_lose_top_r{ .cart_lose_bottom{
color: #E60703; display: flex;
font-size: 28rpx; align-items: center;
padding:25rpx 20rpx 25rpx 20rpx; padding: 20rpx 20rpx 0rpx 20rpx;
} .cart_lose_img{
} width: 180rpx;
.cart_lose_bottom{ height: 180rpx;
display: flex; position: relative;
align-items: center; border-radius: 4rpx;
padding: 20rpx 20rpx 0rpx 20rpx; overflow: hidden;
.cart_lose_img{ .cart_lose_bcg{
width: 180rpx; width: 100%;
height: 180rpx; height: 100%;
position: relative;
border-radius: 4rpx;
overflow: hidden;
.cart_lose_bcg{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
z-index: 2;
.cart_lose_text{
width: 130rpx;
height: 40rpx;
border-radius: 10rpx;
background: rgba(0,0,0,0.6);
font-size: 23rpx;
color: #FFFFFF;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: absolute;
z-index: 2;
.cart_lose_text{
width: 130rpx;
height: 40rpx;
border-radius: 10rpx;
background: rgba(0,0,0,0.6);
font-size: 23rpx;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
}
}
.cart_lose_img_url{
width: 180rpx;
height: 180rpx;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 1;
} }
} }
.cart_lose_img_url{ .cart_lose_ly{
width: 180rpx; margin-left: 20rpx;
height: 180rpx; .cart_lose_title{
display: block; color: #333;
position: absolute; font-size: 26rpx;
top: 0; font-weight: 500;
left: 0; }
z-index: 1; .cart_lose_desc{
} color: #6CA1D2;
} font-size: 24rpx;
.cart_lose_ly{ }
margin-left: 20rpx;
.cart_lose_title{
color: #333;
font-size: 26rpx;
font-weight: 500;
}
.cart_lose_desc{
color: #6CA1D2;
font-size: 24rpx;
} }
} }
} }
} }
} }
.user_title{ .user_title{
display: flex; display: flex;
align-items: center; align-items: center;
@ -558,7 +570,7 @@ page{
margin-right: 15rpx; margin-right: 15rpx;
} }
.footer_price{ .footer_price{
font-size: 38rpx; font-size: 40rpx;
color: #FF0000; color: #FF0000;
display: inline-block; display: inline-block;
font-weight: 500; font-weight: 500;
@ -572,7 +584,8 @@ page{
} }
.footer_btn{ .footer_btn{
margin-left: 20rpx; margin-left: 20rpx;
font-size: 30rpx; font-size: 28rpx;
font-weight: 500;
color: #FFFFFF; color: #FFFFFF;
display: flex; display: flex;
align-items: center; align-items: center;

217
pages/classify/classify.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<view class="mian"> <view class="mian">
<!-- 头部区域 --> <!-- 头部区域 -->
<view class="head" :style="{'padding-top':headerHeight+3+'px'}"> <view class="head" :style="{'padding-top':headerHeight+4+'px'}">
<view class="head_search" :style="{'width':searchWidth+'px'}"> <view class="head_search" :style="{'width':searchWidth+'px','height':statusHeight+4+'px'}">
<image class="head_search_img" src="../../static/search_img.png" mode="widthFix"></image> <image class="head_search_img" src="../../static/search_img.png" mode="widthFix"></image>
<input class="head_search_input" type="text" placeholder="请输入搜索内容" v-model="searchtext"/> <input class="head_search_input" type="text" placeholder="请输入搜索内容" v-model="searchtext"/>
</view> </view>
@ -57,121 +57,124 @@
</view> </view>
<!-- 商品区域 --> <!-- 商品区域 -->
<view class="shop_view" :style="{'padding-top':92+headerHeight+'px'}"> <view class="cont_view">
<view class="shop_view_ul"> <view class="head_fixed" :style="{'height':statusHeight+headerHeight+48+'px'}">下拉刷新...</view>
<view class="shop_view_li" @click="goDetail()"> <view class="shop_view">
<view class="shop_view_img"> <view class="shop_view_ul">
<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view> <view class="shop_view_li" @click="goDetail()">
<view class="shop_view_img_u"> <view class="shop_view_img">
<image class="shop_view_img_url" src="../../static/Mask.png"></image> <view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
<view class="shop_view_img_u">
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
</view>
</view>
<view class="shop_view_cont">
<view class="shop_view_cont_title">糖醋排骨</view>
<view class="shop_view_cont_desc">乡下土猪</view>
<view class="shop_view_cont_tag">
<view class="shop_view_cont_tag_text">仅剩3份</view>
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
</view>
<view class="shop_view_cont_bottom">
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
<view class="shop_view_cont_cart">
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
</view>
</view>
</view> </view>
</view> </view>
<view class="shop_view_cont"> <view class="shop_view_li" @click="goDetail()">
<view class="shop_view_cont_title">糖醋排骨</view> <view class="shop_view_img">
<view class="shop_view_cont_desc">乡下土猪</view> <view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
<view class="shop_view_cont_tag"> <view class="shop_view_img_u">
<view class="shop_view_cont_tag_text">仅剩3份</view> <image class="shop_view_img_url" src="../../static/Mask.png"></image>
<view class="shop_view_cont_tag_text">劲辣胃浓</view> </view>
</view> </view>
<view class="shop_view_cont_bottom"> <view class="shop_view_cont">
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view> <view class="shop_view_cont_title">糖醋排骨</view>
<view class="shop_view_cont_cart"> <view class="shop_view_cont_desc">乡下土猪</view>
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image> <view class="shop_view_cont_tag">
<view class="shop_view_cont_tag_text">仅剩3份</view>
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
</view>
<view class="shop_view_cont_bottom">
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
<view class="shop_view_cont_cart">
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
<view class="shop_view_li" @click="goDetail()">
<view class="shop_view_img">
<view class="shop_view_tag"><text class="shop_view_tag_text">香甜</text></view>
<view class="shop_view_img_u">
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
</view>
</view>
<view class="shop_view_cont">
<view class="shop_view_cont_title">泡椒田鸡</view>
<view class="shop_view_cont_desc">超大只田鸡</view>
<view class="shop_view_cont_tag">
<view class="shop_view_cont_tag_text">仅剩3份</view>
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
</view>
<view class="shop_view_cont_bottom">
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
<view class="shop_view_cont_cart">
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
</view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="shop_view_li" @click="goDetail()"> <view class="shop_view_ul">
<view class="shop_view_img"> <view class="shop_view_li" @click="goDetail()">
<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view> <view class="shop_view_img">
<view class="shop_view_img_u"> <view class="shop_view_tag"><text class="shop_view_tag_text">热销</text></view>
<image class="shop_view_img_url" src="../../static/Mask.png"></image> <view class="shop_view_img_u">
</view> <image class="shop_view_img_url" src="../../static/Mask.png"></image>
</view>
<view class="shop_view_cont">
<view class="shop_view_cont_title">糖醋排骨</view>
<view class="shop_view_cont_desc">乡下土猪</view>
<view class="shop_view_cont_tag">
<view class="shop_view_cont_tag_text">仅剩3份</view>
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
</view>
<view class="shop_view_cont_bottom">
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
<view class="shop_view_cont_cart">
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
</view> </view>
</view> </view>
</view> <view class="shop_view_cont">
<view class="shop_view_cont_title">泡椒田鸡</view>
<view class="shop_view_cont_desc">超大只田鸡</view>
<view class="shop_view_cont_tag">
<view class="shop_view_cont_tag_text">仅剩3份</view>
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
</view>
<view class="shop_view_cont_bottom">
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
<view class="shop_view_cont_cart">
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
<view class="shop_view_li" @click="goDetail()">
<view class="shop_view_img">
<view class="shop_view_tag"><text class="shop_view_tag_text">新鲜</text></view>
<view class="shop_view_img_u">
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
</view>
</view>
<view class="shop_view_cont">
<view class="shop_view_cont_title">泡椒田鸡</view>
<view class="shop_view_cont_desc">超大只田鸡</view>
<view class="shop_view_cont_tag">
<view class="shop_view_cont_tag_text">仅剩3份</view>
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
</view>
<view class="shop_view_cont_bottom">
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
<view class="shop_view_cont_cart">
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
</view> </view>
<view class="shop_view_li" @click="goDetail()">
<view class="shop_view_img">
<view class="shop_view_tag"><text class="shop_view_tag_text">香甜</text></view>
<view class="shop_view_img_u">
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
</view>
</view>
<view class="shop_view_cont">
<view class="shop_view_cont_title">泡椒田鸡</view>
<view class="shop_view_cont_desc">超大只田鸡</view>
<view class="shop_view_cont_tag">
<view class="shop_view_cont_tag_text">仅剩3份</view>
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
</view>
<view class="shop_view_cont_bottom">
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
<view class="shop_view_cont_cart">
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
</view>
<view class="shop_view_ul">
<view class="shop_view_li" @click="goDetail()">
<view class="shop_view_img">
<view class="shop_view_tag"><text class="shop_view_tag_text">热销</text></view>
<view class="shop_view_img_u">
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
</view>
</view>
<view class="shop_view_cont">
<view class="shop_view_cont_title">泡椒田鸡</view>
<view class="shop_view_cont_desc">超大只田鸡</view>
<view class="shop_view_cont_tag">
<view class="shop_view_cont_tag_text">仅剩3份</view>
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
</view>
<view class="shop_view_cont_bottom">
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
<view class="shop_view_cont_cart">
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
<view class="shop_view_li" @click="goDetail()">
<view class="shop_view_img">
<view class="shop_view_tag"><text class="shop_view_tag_text">新鲜</text></view>
<view class="shop_view_img_u">
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
</view>
</view>
<view class="shop_view_cont">
<view class="shop_view_cont_title">泡椒田鸡</view>
<view class="shop_view_cont_desc">超大只田鸡</view>
<view class="shop_view_cont_tag">
<view class="shop_view_cont_tag_text">仅剩3份</view>
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
</view>
<view class="shop_view_cont_bottom">
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
<view class="shop_view_cont_cart">
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
</view> </view>
</view> </view>
<view style="height: 200rpx;"></view> <view style="height: 200rpx;"></view>

215
pages/classify/style.scss
View File

@ -30,7 +30,7 @@ page{
.head_search_input{ .head_search_input{
width: 500rpx; width: 500rpx;
height: 100%; height: 100%;
font-size: 28rpx; font-size: 27rpx;
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -109,120 +109,131 @@ page{
} }
} }
// 商品区域样式 // 商品区域样式
.shop_view{ .cont_view{
padding: 13rpx 20rpx 0rpx 20rpx; .head_fixed{
display: flex; background-color: #f6f6f6;
justify-content: space-between; color: #999999;
background: linear-gradient(180deg, #FCF0F1 0%, #f6f6f6 50%); font-size: 26rpx;
.shop_view_ul{ display: flex;
width: 346rpx; align-items: flex-end;
.shop_view_li{ justify-content: center;
background-color: #FFFFFF; padding-bottom: 10px;
border-radius: 20rpx; }
width: 100%; .shop_view{
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05); padding: 13rpx 20rpx 0rpx 20rpx;
margin-bottom: 20rpx; display: flex;
.shop_view_li_swiper{ justify-content: space-between;
background: linear-gradient(180deg, #FCF0F1 0%, #f6f6f6 50%);
.shop_view_ul{
width: 346rpx;
.shop_view_li{
background-color: #FFFFFF;
border-radius: 20rpx;
width: 100%; width: 100%;
height: 504rpx; box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
.shop_view_li_swiper_item{ margin-bottom: 20rpx;
.shop_view_li_swiper{
width: 100%; width: 100%;
.shop_view_li_swiper_img_url{ height: 504rpx;
.shop_view_li_swiper_item{
width: 100%; width: 100%;
height: 504rpx; .shop_view_li_swiper_img_url{
display: block; width: 100%;
border-radius: 20rpx; height: 504rpx;
display: block;
border-radius: 20rpx;
}
} }
} }
} .shop_view_img{
.shop_view_img{ width: 100%;
width: 100%; position: relative;
position: relative; height: 320rpx;
height: 320rpx; .shop_view_tag{
.shop_view_tag{ width: 66rpx;
width: 66rpx; height: 42rpx;
height: 42rpx; position: absolute;
position: absolute; z-index: 2;
z-index: 2; right: -15rpx;
right: -15rpx; top: 20rpx;
top: 20rpx; background: url(../../static/tag_img.png);
background: url(../../static/tag_img.png); background-repeat: no-repeat;
background-repeat: no-repeat; background-size: 100% 100%;
background-size: 100% 100%; .shop_view_tag_text{
.shop_view_tag_text{ font-size: 20rpx;
font-size: 20rpx; color: #FFFFFF;
color: #FFFFFF; height: 30rpx;
height: 30rpx; display: flex;
align-items: center;
justify-content: center;
}
}
.shop_view_img_u{
width: 300rpx;
position: absolute;
z-index: 1;
left: 20rpx;
top: 20rpx;
.shop_view_img_url{
width: 100%;
height: 300rpx;
display: block;
}
}
}
.shop_view_cont{
padding: 20rpx;
.shop_view_cont_title{
font-size: 28rpx;
font-weight: 500;
color: #000000;
min-height: 80rpx;
}
.shop_view_cont_desc{
color: #666666;
font-size: 24rpx;
}
.shop_view_cont_tag{
display: flex; display: flex;
align-items: center; flex-wrap: wrap;
justify-content: center; .shop_view_cont_tag_text{
border-radius: 6rpx;
border: 1px solid #FF6868;
padding: 0rpx 10rpx;
border-radius: 10rpx;
color: #ff6868;
font-size: 18rpx;
margin-top: 10rpx;
margin-right: 10rpx;
}
} }
} }
.shop_view_img_u{ .shop_view_cont_bottom{
width: 300rpx;
position: absolute;
z-index: 1;
left: 20rpx;
top: 20rpx;
.shop_view_img_url{
width: 100%;
height: 300rpx;
display: block;
}
}
}
.shop_view_cont{
padding: 20rpx;
.shop_view_cont_title{
font-size: 28rpx;
font-weight: 500;
color: #000000;
min-height: 80rpx;
}
.shop_view_cont_desc{
color: #666666;
font-size: 24rpx;
}
.shop_view_cont_tag{
display: flex;
flex-wrap: wrap;
.shop_view_cont_tag_text{
border-radius: 6rpx;
border: 1px solid #FF6868;
padding: 0rpx 10rpx;
border-radius: 10rpx;
color: #ff6868;
font-size: 18rpx;
margin-top: 10rpx;
margin-right: 10rpx;
}
}
}
.shop_view_cont_bottom{
display: flex;
align-items: center;
justify-content: space-between;
.shop_view_cont_price{
font-size: 32rpx;
color: red;
font-weight: 500;
}
.shop_view_cont_cart{
width: 65rpx;
height: 65rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: space-between;
.shop_view_cont_cart_img{ .shop_view_cont_price{
width: 40rpx; font-size: 32rpx;
height: 40rpx; color: red;
display: block; font-weight: 500;
}
.shop_view_cont_cart{
width: 65rpx;
height: 65rpx;
display: flex;
align-items: center;
justify-content: flex-end;
.shop_view_cont_cart_img{
width: 40rpx;
height: 40rpx;
display: block;
}
} }
} }
} }
} .shop_view_bcg{
.shop_view_bcg{ background-color: inherit;
background-color: inherit; }
} }
} }
} }

46
pages/index/index.vue
View File

@ -1,34 +1,37 @@
<template> <template>
<view class="main"> <view class="main">
<!-- 头部区域 --> <!-- 头部区域 -->
<view class="head" :style="{'padding-top':headerHeight+'px'}"> <view class="head" :style="{'padding-top':headerHeight+'px'}" @click="location()">
<view class="head_location head_location_active"><text class="location_title">东方体育中心</text></view> <view class="head_location head_location_active"><text class="location_title">东方体育中心</text></view>
<view class="head_search"> <view class="head_search" :style="{'height':statusHeight+8+'px'}">
<image class="head_search_img" src="../../static/search_img.png" mode="widthFix"></image> <image class="head_search_img" src="../../static/search_img.png" mode="widthFix"></image>
<input class="head_search_input" type="text" placeholder="请输入搜索内容" v-model="searchtext"/> <input class="head_search_input" type="text" placeholder="请输入搜索内容" v-model="searchtext"/>
<view class="head_search_btn">搜索</view> <view class="head_search_btn">搜索</view>
</view> </view>
</view> </view>
<!-- 推荐区域 --> <!-- 推荐区域 -->
<view class="grid_wrap" :style="{'padding-top':95+headerHeight+'px'}"> <view class="grid_top">
<view class="grid_wrap_l"> <view class="head_fixed" :style="{'height':statusHeight+headerHeight+43+'px'}">下拉刷新...</view>
<image class="grid_wrap_live" src=""></image> <view class="grid_wrap">
<view class="grid_wrap_live_title"><image class="grid_wrap_live_img" src="../../static/index/v.png"></image>直播</view> <view class="grid_wrap_l">
</view> <image class="grid_wrap_live" src=""></image>
<view class="grid_wrap_r"> <view class="grid_wrap_live_title"><image class="grid_wrap_live_img" src="../../static/index/v.png"></image>直播</view>
<view class="grid_wrap_li" @click="goAi()">
<view class="grid_wrap_li_l">
<view class="grid_wrap_li_title"><text>学做菜</text></view>
<view class="grid_wrap_li_desc">简单又快捷</view>
</view>
<image class="grid_wrap_li_r" src="../../static/index/AI.png" mode="widthFix"></image>
</view> </view>
<view class="grid_wrap_li grid_wrap_top" @click="goAssList()"> <view class="grid_wrap_r">
<view class="grid_wrap_li_l"> <view class="grid_wrap_li" @click="goAi()">
<view class="grid_wrap_li_title"><text>极速退款</text></view> <view class="grid_wrap_li_l">
<view class="grid_wrap_li_desc">食材有问题？</view> <view class="grid_wrap_li_title"><text>学做菜</text></view>
<view class="grid_wrap_li_desc">简单又快捷</view>
</view>
<image class="grid_wrap_li_r" src="../../static/index/AI.png" mode="widthFix"></image>
</view>
<view class="grid_wrap_li grid_wrap_top" @click="goAssList()">
<view class="grid_wrap_li_l">
<view class="grid_wrap_li_title"><text>极速退款</text></view>
<view class="grid_wrap_li_desc">食材有问题？</view>
</view>
<image class="grid_wrap_li_r" src="../../static/index/refund_img.png" mode="widthFix"></image>
</view> </view>
<image class="grid_wrap_li_r" src="../../static/index/refund_img.png" mode="widthFix"></image>
</view> </view>
</view> </view>
</view> </view>
@ -342,6 +345,11 @@ const goCarts=()=>{
url:`/pages/cart/cart` url:`/pages/cart/cart`
}) })
} }
const location=()=>{
uni.navigateTo({
url:`/userserve/location/location`
})
}
onLoad((options) => { onLoad((options) => {
}); });

178
pages/index/style.scss
View File

@ -82,7 +82,7 @@ page{
.head_search_input{ .head_search_input{
width: 560rpx; width: 560rpx;
height: 100%; height: 100%;
font-size: 28rpx; font-size: 27rpx;
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -92,6 +92,7 @@ page{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-weight: 500;
} }
.head_search_btn::before{ .head_search_btn::before{
content: ""; content: "";
@ -109,94 +110,106 @@ page{
} }
} }
// 推荐区域样式 // 推荐区域样式
.grid_wrap{ .grid_top{
padding: 20rpx 20rpx 20rpx 20rpx; .head_fixed{
display: flex; background-color: #f6f6f6;
justify-content: space-between; color: #999999;
.grid_wrap_l{ font-size: 26rpx;
width: 338rpx; display: flex;
height: 338rpx; align-items: flex-end;
background-color: #000000; justify-content: center;
border-radius: 20rpx; padding-bottom: 10px;
overflow: hidden; }
position: relative; .grid_wrap{
.grid_wrap_live{ padding: 20rpx 20rpx 20rpx 20rpx;
display: flex;
justify-content: space-between;
.grid_wrap_l{
width: 338rpx; width: 338rpx;
height: 338rpx; height: 338rpx;
position: absolute; background-color: #000000;
top: 0; border-radius: 20rpx;
z-index: 1; overflow: hidden;
} position: relative;
.grid_wrap_live_title{ .grid_wrap_live{
font-size: 30rpx; width: 338rpx;
color: #FFFFFF; height: 338rpx;
display: flex; position: absolute;
z-index: 2; top: 0;
top: 20rpx; z-index: 1;
left: 20rpx; }
font-weight: 500; .grid_wrap_live_title{
position: absolute; font-size: 30rpx;
display: flex; color: #FFFFFF;
align-items: center; display: flex;
.grid_wrap_live_img{ z-index: 2;
width: 28rpx; top: 20rpx;
height: 28rpx; left: 20rpx;
margin-right: 10rpx; font-weight: 500;
display: block; position: absolute;
margin-top: 1rpx; display: flex;
align-items: center;
.grid_wrap_live_img{
width: 28rpx;
height: 28rpx;
margin-right: 10rpx;
display: block;
margin-top: 1rpx;
}
} }
} }
} .grid_wrap_r{
.grid_wrap_r{ width: 355rpx;
width: 355rpx; .grid_wrap_li{
.grid_wrap_li{ padding: 20rpx;
padding: 20rpx; width: 315rpx;
width: 315rpx; height: 119rpx;
height: 119rpx; background: #FFFFFF;
background: #FFFFFF; border-radius: 17rpx 17rpx 17rpx 17rpx;
border-radius: 17rpx 17rpx 17rpx 17rpx; display: flex;
display: flex; justify-content: space-between;
justify-content: space-between; align-items: center;
align-items: center; box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05); .grid_wrap_li_l{
.grid_wrap_li_l{ .grid_wrap_li_title{
.grid_wrap_li_title{ font-size: 30rpx;
font-size: 30rpx; color: #333333;
color: #333333; font-weight: 500;
font-weight: 500; display: flex;
display: flex; align-items: center;
align-items: center; }
.grid_wrap_li_title text{
vertical-align: middle;
display: inline-block;
}
.grid_wrap_li_title::after{
vertical-align: middle;
content: "";
display: inline-block;
width: 24rpx;
height: 24rpx;
margin-left: 10rpx;
background-image: url('../../static/index/arrow.png');
background-size: cover;
}
.grid_wrap_li_desc{
color: #999999;
font-size: 24rpx;
margin-top: 5rpx;
}
} }
.grid_wrap_li_title text{ .grid_wrap_li_r{
vertical-align: middle; width: 140rpx;
display: inline-block; height: 140rpx;
} -webkit-animation: 3s scaleDr ease-in-out infinite;
.grid_wrap_li_title::after{ animation: 3s scaleDr ease-in-out infinite;
vertical-align: middle;
content: "";
display: inline-block;
width: 24rpx;
height: 24rpx;
margin-left: 10rpx;
background-image: url('../../static/index/arrow.png');
background-size: cover;
}
.grid_wrap_li_desc{
color: #999999;
font-size: 24rpx;
margin-top: 5rpx;
} }
} }
.grid_wrap_li_r{ .grid_wrap_top{
width: 140rpx; margin-top: 21rpx;
height: 140rpx;
-webkit-animation: 3s scaleDr ease-in-out infinite;
animation: 3s scaleDr ease-in-out infinite;
} }
} }
.grid_wrap_top{
margin-top: 21rpx;
}
} }
} }
// 滚动区域样式 // 滚动区域样式
@ -477,7 +490,7 @@ page{
.footer_cont_m{ .footer_cont_m{
margin-left: 25rpx; margin-left: 25rpx;
.footer_cont_m_price{ .footer_cont_m_price{
font-size: 38rpx; font-size: 40rpx;
color: #FF0000; color: #FF0000;
font-weight: 500; font-weight: 500;
} }
@ -500,8 +513,9 @@ page{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 30rpx; font-size: 28rpx;
color: #FFFFFF; color: #FFFFFF;
font-weight: 500;
} }
} }

2
pages/sidedish/sidedish.vue
View File

@ -127,7 +127,7 @@ onShow(() => {
}); });
onPullDownRefresh(()=>{ onPullDownRefresh(()=>{
uni.stopPullDownRefresh();
}) })
onReachBottom(()=>{ onReachBottom(()=>{

58
pages/user/user.vue
View File

@ -187,54 +187,64 @@ const order = ref([
{ {
id:1, id:1,
imgUrl:'../../static/user/staypay.png', imgUrl:'../../static/user/staypay.png',
name:'待支付' name:'待支付',
url:'/order/orderList/orderList?type=1'
}, },
{ {
id:3, id:3,
imgUrl:'../../static/user/staytake.png', imgUrl:'../../static/user/staytake.png',
name:'待收货' name:'待收货',
url:'/order/orderList/orderList?type=3'
}, },
{ {
id:4, id:4,
imgUrl:'../../static/user/evaluate.png', imgUrl:'../../static/user/evaluate.png',
name:'待评价' name:'待评价',
url:'/order/orderevallist/orderevallist?type=0'
}, },
{ {
id:5, id:5,
imgUrl:'../../static/user/refund.png', imgUrl:'../../static/user/refund.png',
name:'退款/售后' name:'退款/售后',
url:'/order/assList/assList?type=0'
}, },
{ {
id:0, id:0,
imgUrl:'../../static/user/order.png', imgUrl:'../../static/user/order.png',
name:'全部订单' name:'全部订单',
url:'/order/orderList/orderList?type=0'
} }
]) ])
const contList = ref([ const contList = ref([
{ {
id:1, id:1,
imgUrl:'../../static/user/service.png', imgUrl:'../../static/user/service.png',
name:'客户服务' name:'客户服务',
url:'/userserve/clientserve/clientserve'
}, },
{ {
id:2, id:2,
imgUrl:'../../static/user/collect.png', imgUrl:'../../static/user/collect.png',
name:'商品收藏' name:'商品收藏',
url:'/userserve/favorite/favorite'
}, },
{ {
id:3, id:3,
imgUrl:'../../static/user/certification.png', imgUrl:'../../static/user/certification.png',
name:'证照资质' name:'证照资质',
url:'/userserve/certificate/certificate'
}, },
{ {
id:4, id:4,
imgUrl:'../../static/user/feedback.png', imgUrl:'../../static/user/feedback.png',
name:'意见反馈' name:'意见反馈',
url:'/userserve/feedback/feedback'
}, },
{ {
id:5, id:5,
imgUrl:'../../static/user/address.png', imgUrl:'../../static/user/address.png',
name:'地址管理' name:'地址管理',
url:'/userserve/addressList/addressList'
} }
]) ])
const goDetail=()=>{ const goDetail=()=>{
@ -248,36 +258,14 @@ const goCoupon=()=>{
}) })
}; };
const goServe=(item,index)=>{ const goServe=(item,index)=>{
let url = ""; const { url } = item;
if(item.id == 2) return false;
if(item.id == 1){
url=`/userserve/clientserve/clientserve`
}else if(item.id == 3){
url=`/userserve/certificate/certificate`
}else if(item.id == 4){
url=`/userserve/feedback/feedback`
}else if(item.id == 5){
url=`/userserve/addressList/addressList`
}
uni.navigateTo({url}) uni.navigateTo({url})
} }
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新) //使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
//const { count,doubleCount } = storeToRefs(counterStore); //const { count,doubleCount } = storeToRefs(counterStore);
const orderList=(item)=>{ const orderList=(item)=>{
if(item.id == 4){ const { url } = item;
uni.navigateTo({ uni.navigateTo({url})
url:`/order/orderevallist/orderevallist?type=0`
})
}else if(item.id != 5){
uni.navigateTo({
url:`/order/orderList/orderList?type=${item.id}`
})
}else{
uni.navigateTo({
url:`/order/assList/assList?type=0`
})
}
} }
onLoad((options) => { onLoad((options) => {

14
shopProDetail/detail/detail.vue
View File

@ -69,14 +69,15 @@
</view> </view>
</view> </view>
<!-- 常见问题 --> <!-- 常见问题 -->
<view class="shop_comment"> <view class="shop_comment" @click="faqList">
<view class="shop_comment_head"> <view class="shop_comment_head">
<view class="shop_comment_head_title">常见问题(2)</view> <view class="shop_comment_head_title">常见问题(2)</view>
<view class="shop_comment_head_arrow">全部</view> <view class="shop_comment_head_arrow">全部</view>
</view> </view>
<view class="shop_ask shop_padding"><text>有的虾头发黑是为什么?</text></view> <view class="faqlist">
<view class="shop_ask shop_padding"><text>如何判定虾是否新鲜?</text></view> <view class="shop_ask shop_padding"><text>有的虾头发黑是为什么?</text></view>
<!-- <view class="shop_answer shop_padding">这里填写回答</view> --> <view class="shop_answer shop_padding"><text>虾头中含有一种叫做酪氨酸酶的酶，当虾死亡后，这种酶会催化虾体内的酪氨酸生成黑色素，导致虾头变黑。这是一种自然现象，通常不影响虾肉的食用安全。</text></view>
</view>
</view> </view>
</view> </view>
<!-- 图文详情 --> <!-- 图文详情 -->
@ -366,6 +367,11 @@ const orderConfirm = ()=>{
url:`/order/orderConfirm/orderConfirm` url:`/order/orderConfirm/orderConfirm`
}) })
} }
const faqList=()=>{
uni.navigateTo({
url:`/shopProDetail/faqList/faqList`
})
}
onLoad((options) => { onLoad((options) => {
//初始化时判断是否显示返回按钮 //初始化时判断是否显示返回按钮
showBack.value = getPages(); showBack.value = getPages();

68
shopProDetail/detail/style.scss
View File

@ -266,41 +266,43 @@ page{
} }
} }
} }
.shop_ask{ .faqlist{
font-size: 26rpx;
color: #333333;
}
.shop_answer{
font-size: 26rpx;
color: #666666;
}
.shop_padding{
padding: 0rpx 20rpx 20rpx 20rpx; padding: 0rpx 20rpx 20rpx 20rpx;
.shop_ask{
font-size: 27rpx;
color: #333333;
font-weight: 500;
}
.shop_answer{
font-size: 26rpx;
color: #666666;
margin-top: 10rpx;
}
.shop_padding text{
vertical-align: middle;
}
.shop_ask::before {
vertical-align: middle;
content: "";
display: inline-block;
width: 30rpx;
height: 30rpx;
background-image: url('../../static/shopdetail/ask.png');
background-size: cover;
margin-right: 10rpx; /* 调整图片与标题的间距 */
}
.shop_answer::before {
content: "";
display: inline-block;
width: 30rpx;
height: 30rpx;
background-image: url('../../static/shopdetail/answer.png');
background-size: cover;
margin-right: 10rpx; /* 调整图片与标题的间距 */
vertical-align: middle;
}
} }
.shop_padding text{
vertical-align: middle;
display: inline-block;
}
.shop_ask::before {
vertical-align: middle;
content: "";
display: inline-block;
width: 30rpx;
height: 30rpx;
background-image: url('../../static/shopdetail/ask.png');
background-size: cover;
margin-right: 10rpx; /* 调整图片与标题的间距 */
}
.shop_answer::before {
content: "";
display: inline-block;
width: 30rpx;
height: 30rpx;
background-image: url('../../static/shopdetail/answer.png');
background-size: cover;
margin-right: 10rpx; /* 调整图片与标题的间距 */
vertical-align: middle;
}
} }
.shop_detail{ .shop_detail{
margin: 20rpx 20rpx 0rpx 20rpx; margin: 20rpx 20rpx 0rpx 20rpx;

35
shopProDetail/faqList/faqList.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<view class="mian">
<view class="faqlist">
<view class="shop_ask shop_padding"><text>有的虾头发黑是为什么?</text></view>
<view class="shop_answer shop_padding"><text>虾头中含有一种叫做酪氨酸酶的酶，当虾死亡后，这种酶会催化虾体内的酪氨酸生成黑色素，导致虾头变黑。这是一种自然现象，通常不影响虾肉的食用安全。</text></view>
</view>
<view class="faqlist">
<view class="shop_ask shop_padding"><text>有的虾头发黑是为什么?</text></view>
<view class="shop_answer shop_padding"><text>虾头中含有一种叫做酪氨酸酶的酶，当虾死亡后，这种酶会催化虾体内的酪氨酸生成黑色素，导致虾头变黑。这是一种自然现象，通常不影响虾肉的食用安全。</text></view>
</view>
</view>
</template>
<script setup>
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
const counterStore = useCounterStore(); // 使用 Store
const { proxy } = getCurrentInstance();
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore);
onLoad((options) => {});
onShow(() => {});
onReady(()=>{})
onPullDownRefresh(()=>{})
onReachBottom(()=>{})
</script>
<style lang="scss">
@import './style.scss';
</style>

43
shopProDetail/faqList/style.scss Normal file
View File

@ -0,0 +1,43 @@
page{
background: #f6f6f6;
}
.mian{
.faqlist{
padding: 20rpx 20rpx 0rpx 20rpx;
.shop_ask{
font-size: 30rpx;
color: #333333;
font-weight: 500;
}
.shop_answer{
font-size: 27rpx;
color: #666666;
margin-top: 10rpx;
}
.shop_padding text{
vertical-align: middle;
}
.shop_ask::before {
vertical-align: middle;
content: "";
display: inline-block;
width: 30rpx;
height: 30rpx;
background-image: url('../../static/shopdetail/ask.png');
background-size: cover;
margin-right: 10rpx; /* 调整图片与标题的间距 */
}
.shop_answer::before {
content: "";
display: inline-block;
width: 30rpx;
height: 30rpx;
background-image: url('../../static/shopdetail/answer.png');
background-size: cover;
margin-right: 10rpx; /* 调整图片与标题的间距 */
vertical-align: middle;
}
}
}

BIN
static/userserve/edit.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
static/userserve/location.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

82
userserve/addressEdit/addressEdit.vue Normal file
View File

@ -0,0 +1,82 @@
<template>
<view class="main">
<view class="adderss_cont">
<view class="adderss_item">
<view class="adderss_name">地址</view>
<view class="adderss_r ">
<view class="adderss_text adderss_arr">
<input class="adderss_input" type="text" placeholder="选择地址"/>
</view>
</view>
</view>
<view class="adderss_item">
<view class="adderss_name">门牌号</view>
<view class="adderss_r ">
<view class="adderss_text">
<input class="adderss_input" type="text" placeholder="例:15栋3层301室"/>
</view>
</view>
</view>
<view class="adderss_item">
<view class="adderss_name">收货人</view>
<view class="adderss_r">
<view class="adderss_text">
<input class="adderss_input" type="text" placeholder="收货人姓名"/>
</view>
<view class="adderss_type">
<view class="adderss_type_item"><view class="adderss_type_select adderss_acty"><image class="adderss_acty_img" src="../../static/selected.png"></image></view>先生</view>
<view class="adderss_type_item adderss_type_left"><view class="adderss_type_select"></view>女生</view>
</view>
</view>
</view>
<view class="adderss_item">
<view class="adderss_name">手机号</view>
<view class="adderss_r">
<view class="adderss_text">
<input class="adderss_input" type="text" placeholder="收货人手机号"/>
</view>
</view>
</view>
</view>
<view class="adderss_cont">
<view class="adderss_default">
<view class="adderss_default_l">
<view class="adderss_default_title">设为默认地址</view>
<view class="adderss_default_desc">每次下单会默认推荐使用该地址</view>
</view>
<view class="adderss_default_switch">
<switch :checked="isDefault == 1 ? true:false" color="#e61817" @change="switchChange" />
</view>
</view>
</view>
<view style="height: 200rpx;"></view>
<view class="footer">
<view class="footer_btn" @click="save">保存地址</view>
</view>
</view>
</template>
<script setup>
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
const counterStore = useCounterStore(); // 使用 Store
const { proxy } = getCurrentInstance();
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore);
const save=()=>{
uni.navigateBack({
delta:1
})
}
onLoad((options) => {});
onShow(() => {});
onReady(()=>{})
onPullDownRefresh(()=>{})
onReachBottom(()=>{})
</script>
<style lang="scss">
@import './style.scss';
</style>

136
userserve/addressEdit/style.scss Normal file
View File

@ -0,0 +1,136 @@
page{
background-color: #f6f6f6;
}
.main{
.adderss_cont{
margin: 20rpx;
padding: 0rpx 25rpx 0rpx 25rpx;
background-color: #FFFFFF;
border-radius: 16rpx;
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
.adderss_item{
// padding: 25rpx 0rpx 25rpx 0rpx;
display: flex;
justify-content: space-between;
border-bottom: 1rpx solid #f6f6f6;
.adderss_name{
font-size: 28rpx;
color: #333333;
font-weight: 500;
height: 95rpx;
display: flex;
align-items: center;
width: 120rpx;
}
.adderss_r{
width: 480rpx;
.adderss_text{
width: 100%;
position: relative;
.adderss_input{
width: 100%;
font-size: 28rpx;
height: 95rpx;
display: flex;
align-items: center;
}
}
.adderss_arr::after{
content: '';
position: absolute;
top: 50%;
// left: 100%;
right: 20rpx;
transform: translate3d(0, -50%, 0) rotate(45deg);
width: 13rpx;
height: 13rpx;
border-top: 3rpx solid #7f7f7f;
border-right: 3rpx solid #7f7f7f;
}
.adderss_type{
display: flex;
.adderss_type_item{
display: flex;
align-items: center;
font-size: 28rpx;
color: #333333;
padding: 20rpx 0rpx;
.adderss_type_select{
width: 35rpx;
height: 35rpx;
border-radius: 50rpx;
border:1px solid #7f7f7f;
margin-right: 10rpx;
}
.adderss_acty{
border:1px solid #FD4955;
display: flex;
align-items: center;
justify-content: center;
background-color: #FD4955;
.adderss_acty_img{
width: 25rpx;
height: 25rpx;
display: block;
}
}
}
.adderss_type_left{
margin-left: 40rpx;
}
}
}
}
.adderss_default{
display: flex;
align-items: center;
justify-content: space-between;
padding: 25rpx 0rpx;
.adderss_default_l{
.adderss_default_title{
font-size: 28rpx;
color: #333333;
font-weight: 500;
}
.adderss_default_desc{
color: #7f7f7f;
font-size: 26rpx;
margin-top: 10rpx;
}
}
.adderss_default_switch{
width: 100rpx;
}
}
}
.footer{
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 160;
background: #FFFFFF;
font-size: 30rpx;
padding-bottom: env(safe-area-inset-bottom);
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20rpx;
padding-left: 20rpx;
padding-right: 20rpx;
border-top: 1rpx solid #efefef;
.footer_btn{
width: 100%;
height: 85rpx;
background-color: #fd3f3f;
border-radius: 50rpx;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
font-size: 28rpx;
}
}
}

39
userserve/addressList/addressList.vue
View File

@ -1,6 +1,35 @@
<template> <template>
<view class="main"> <view class="main">
<view class="location_cont location_padding">
<view class="location_list flex" @click="addressBack">
<view class="location_l">
<view class="location_address">
<text class="location_default">默认</text>
<text class="location_address_text">汤臣一品-20号楼2306室</text>
</view>
<view class="location_user"><text class="location_user_name">悟语先生</text><text class="location_user_tel">15221678099</text></view>
</view>
<view class="location_r" @click="revamp()">
<image class="location_img" src="../../static/userserve/edit.png"></image>
</view>
</view>
<view class="location_list flex" @click="addressBack">
<view class="location_l">
<view class="location_address">
<text class="location_address_text">花木街道浦东新区机关事务管理局人民政府-20号楼2306室</text>
</view>
<view class="location_user"><text class="location_user_name">悟语先生</text><text class="location_user_tel">15221678099</text></view>
</view>
<view class="location_r" @click="revamp()">
<image class="location_img" src="../../static/userserve/edit.png"></image>
</view>
</view>
</view>
<view style="height: 200rpx;"></view>
<view class="footer">
<view class="footer_btn" @click="addressEdit">新增地址</view>
</view>
</view> </view>
</template> </template>
@ -13,6 +42,16 @@ const counterStore = useCounterStore(); // 使用 Store
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新) //使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore); const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore);
const addressEdit=()=>{
uni.navigateTo({
url:`/userserve/addressEdit/addressEdit`
})
};
const revamp=()=>{
uni.navigateTo({
url:`/userserve/addressEdit/addressEdit`
})
}
onLoad((options) => {}); onLoad((options) => {});
onShow(() => {}); onShow(() => {});
onReady(()=>{}) onReady(()=>{})

89
userserve/addressList/style.scss
View File

@ -2,5 +2,92 @@ page{
background-color: #f6f6f6; background-color: #f6f6f6;
} }
.main{ .main{
.location_cont{
margin: 20rpx 20rpx 0rpx 20rpx;
padding: 30rpx;
background-color: #FFFFFF;
border-radius: 16rpx;
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
.location_list{
padding-top: 30rpx;
padding-bottom: 30rpx;
border-bottom: 1rpx solid #f6f6f6;
.location_l{
.location_address{
.location_default{
font-size: 20rpx;
background-color: #fff4cd;
border-radius: 10rpx;
color: #f9d448;
margin-right: 10rpx;
padding: 2rpx 10rpx;
vertical-align: middle;
}
.location_address_text{
font-size: 28rpx;
font-weight: 500;
color: #333333;
vertical-align: middle;
}
}
.location_user{
font-size: 27rpx;
color: #7f7f7f;
margin-top: 10rpx;
.location_user_name{}
.location_user_tel{
margin-left: 20rpx;
}
}
}
.location_r{
width: 100rpx;
height: 100rpx;
display: flex;
align-items: center;
justify-content:flex-end;
.location_img{
width: 32rpx;
height: 32rpx;
}
}
}
}
.flex{
display: flex;
align-items: center;
justify-content: space-between;
}
.location_padding{
padding: 0rpx 30rpx 0rpx 30rpx;
}
.footer{
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 160;
background: #FFFFFF;
font-size: 30rpx;
padding-bottom: env(safe-area-inset-bottom);
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20rpx;
padding-left: 20rpx;
padding-right: 20rpx;
border-top: 1rpx solid #efefef;
.footer_btn{
width: 100%;
height: 85rpx;
background-color: #fd3f3f;
border-radius: 50rpx;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
font-size: 28rpx;
}
}
} }

31
userserve/aichitchat/aichitchat.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<view class="main">
<view class="footer">
<input class="footer_input" type="text" placeholder="请在此输入你的问题"/>
<view class="footer_btn">发送</view>
</view>
</view>
</template>
<script setup>
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
const counterStore = useCounterStore(); // 使用 Store
const { proxy } = getCurrentInstance();
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,statusBartop,ButtonWidth,ButtonHeight } = storeToRefs(counterStore);
onLoad((options) => {
});
onShow(() => {});
onReady(()=>{})
onPullDownRefresh(()=>{})
onReachBottom(()=>{})
</script>
<style lang="scss">
@import './style.scss';
</style>

45
userserve/aichitchat/style.scss Normal file
View File

@ -0,0 +1,45 @@
page{
background-color: #f6f6f6;
}
.main{
width: 100%;
height: 100vh;
overflow-x: auto;
.footer{
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 160;
background: #FFFFFF;
font-size: 30rpx;
padding-bottom: env(safe-area-inset-bottom);
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20rpx;
padding-left: 20rpx;
padding-right: 20rpx;
border-top: 1rpx solid #efefef;
.footer_input{
width: 72%;
height: 68rpx;
background: #F7F7F7;
border-radius: 43rpx;
font-size: 28rpx;
padding-left: 20rpx;
padding-right: 20rpx;
}
.footer_btn{
width: 20%;
height: 64rpx;
background: #FF0000;
border-radius: 33rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #FFFFFF;
}
}
}

12
userserve/aiserve/aiserve.vue
View File

@ -12,7 +12,7 @@
<view class="content_greetings"> <view class="content_greetings">
<view class="content_greetings_l"> <view class="content_greetings_l">
<image class="content_greetings_img" :src="timeImg" mode="widthFix"></image> <image class="content_greetings_img" :src="timeImg" mode="widthFix"></image>
<view class="content_greetings_btn"> <view class="content_greetings_btn" @click="onChat()">
<image class="content_greetings_btnimg" src="../../static/userserve/Chatting.png"></image> <image class="content_greetings_btnimg" src="../../static/userserve/Chatting.png"></image>
<text class="content_greetings_text">开始聊天</text> <text class="content_greetings_text">开始聊天</text>
</view> </view>
@ -30,8 +30,6 @@
<image class="content_hot_danmu_liimg" src="../../static/userserve/197.png" mode="widthFix"></image> <image class="content_hot_danmu_liimg" src="../../static/userserve/197.png" mode="widthFix"></image>
<text class="content_hot_danmu_li_text">{{item.text}}</text> <text class="content_hot_danmu_li_text">{{item.text}}</text>
</view> </view>
</view> </view>
</view> </view>
<view class="content_list"> <view class="content_list">
@ -62,11 +60,8 @@
<view class="content_list_desc">甜口红烧肉是一道经典的中式家常菜，特点是色泽红亮、肥而不腻、甜咸适中</view> <view class="content_list_desc">甜口红烧肉是一道经典的中式家常菜，特点是色泽红亮、肥而不腻、甜咸适中</view>
</view> </view>
</view> </view>
</view> </view>
<view style="height: 200px;"></view> <view style="height: 200px;"></view>
</view> </view>
</template> </template>
@ -211,6 +206,11 @@ const sendDanmu =()=> {
// 添加到弹幕列表 // 添加到弹幕列表
danmuList.value = (danmu); danmuList.value = (danmu);
} }
const onChat=()=>{
uni.navigateTo({
url:`/userserve/aichitchat/aichitchat`
})
}
onLoad((options) => { onLoad((options) => {
//初始化时判断是否显示返回按钮 //初始化时判断是否显示返回按钮
showBack.value = getPages(); showBack.value = getPages();

2
userserve/aiserve/style.scss
View File

@ -79,7 +79,7 @@ page{
margin-right: 10rpx; margin-right: 10rpx;
} }
.content_greetings_text{ .content_greetings_text{
font-size: 30rpx; font-size: 26rpx;
color: #FFFFFF; color: #FFFFFF;
} }
} }

6
userserve/clientserve/clientserve.vue
View File

@ -89,7 +89,7 @@
<image class="footer_telimg" src="../../static/userserve/tel.png"></image> <image class="footer_telimg" src="../../static/userserve/tel.png"></image>
<view class="footer_tel_text">热线电话</view> <view class="footer_tel_text">热线电话</view>
</view> </view>
<view class="footer_btn">在线客服<text class="footer_btn_text">（07:00-23:00</text></view> <button open-type="contact" bindcontact="handleContact" session-from="sessionFrom" class="footer_btn">在线客服<text class="footer_btn_text">（07:00-23:00)</text></button>
</view> </view>
</view> </view>
</template> </template>
@ -136,6 +136,10 @@ const detail=()=>{
url:`/userserve/clientservedetail/clientservedetail` url:`/userserve/clientservedetail/clientservedetail`
}) })
}; };
const handleContact=()=>{
console.log(e.detail.path)
console.log(e.detail.query)
};
onLoad((options) => { onLoad((options) => {
//初始化时判断是否显示返回按钮 //初始化时判断是否显示返回按钮
showBack.value = getPages(); showBack.value = getPages();

8
userserve/clientserve/style.scss
View File

@ -127,8 +127,9 @@ page{
} }
.content_x{ .content_x{
color: #000000; color: #000000;
font-size: 30rpx; font-size: 28rpx;
margin-top: 27rpx; margin-top: 27rpx;
font-weight: 500;
} }
.class_scroll{ .class_scroll{
white-space: nowrap; white-space: nowrap;
@ -227,7 +228,7 @@ page{
color: #666666; color: #666666;
font-size: 20rpx; font-size: 20rpx;
text-align: center; text-align: center;
margin-top: 10rpx; margin-top: 5rpx;
} }
} }
.footer_btn{ .footer_btn{
@ -240,9 +241,10 @@ page{
color: #FD3F3F; color: #FD3F3F;
font-size: 28rpx; font-size: 28rpx;
font-weight: 500; font-weight: 500;
background-color: #FFFFFF;
.footer_btn_text{ .footer_btn_text{
color: #999999; color: #999999;
font-size: 20rpx; font-size: 24rpx;
} }
} }
} }

81
userserve/favorite/favorite.vue Normal file
View File

@ -0,0 +1,81 @@
<template>
<view class="main">
<view class="list">
<view class="list_l">
<image class="list_img" src="../../static/Mask.png" mode="widthFix"></image>
</view>
<view class="list_r">
<view class="list_title">糖醋排骨</view>
<view class="list_tag">
<view class="list_li">半小时送达</view>
<view class="list_li">劲辣胃浓</view>
</view>
<view class="list_bottom">
<view class="list_price price">43.9<text class="market_name prices">59.9</text></view>
<view class="list_shop_cart">
<image class="list_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
<view class="list">
<view class="list_l">
<image class="list_img" src="../../static/Mask.png" mode="widthFix"></image>
</view>
<view class="list_r">
<view class="list_title">糖醋排骨</view>
<view class="list_tag">
<view class="list_li">半小时送达</view>
<view class="list_li">劲辣胃浓</view>
</view>
<view class="list_bottom">
<view class="list_price price">43.9<text class="market_name prices">59.9</text></view>
<view class="list_shop_cart">
<image class="list_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
<view class="list">
<view class="list_l">
<image class="list_img" src="../../static/Mask.png" mode="widthFix"></image>
</view>
<view class="list_r">
<view class="list_title">糖醋排骨</view>
<view class="list_tag">
<view class="list_li">半小时送达</view>
<view class="list_li">劲辣胃浓</view>
</view>
<view class="list_bottom">
<view class="list_price price">43.9<text class="market_name prices">59.9</text></view>
<view class="list_shop_cart">
<image class="list_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
const counterStore = useCounterStore(); // 使用 Store
const { proxy } = getCurrentInstance();
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,statusBartop,ButtonWidth,ButtonHeight } = storeToRefs(counterStore);
onLoad((options) => {
});
onShow(() => {});
onReady(()=>{})
onPullDownRefresh(()=>{})
onReachBottom(()=>{})
</script>
<style lang="scss">
@import './style.scss';
</style>

91
userserve/favorite/style.scss Normal file
View File

@ -0,0 +1,91 @@
page{
background-color: #f6f6f6;
}
.main{
.list{
margin: 20rpx 20rpx 0rpx 20rpx;
padding: 20rpx;
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 16rpx;
.list_l{
width:150rpx;
height:150rpx;
position: relative;
.list_img{
width:150rpx;
height:150rpx;
position: absolute;
z-index: 1;
top: 0;
border-radius: 10rpx;
}
}
.list_r{
width: 480rpx;
.list_title{
font-size: 28rpx;
color: #000000;
font-weight: 500;
}
.list_tag{
display: flex;
flex-wrap: wrap;
.list_li{
border-radius: 6rpx 6rpx 6rpx 6rpx;
border: 1px solid #FF6868;
padding: 0rpx 10rpx 0rpx 10rpx;
border-radius: 10rpx;
color: #FF6868;
font-size: 18rpx;
margin-top: 10rpx;
margin-right: 10rpx;
}
}
.list_bottom{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 12rpx;
.list_price{
font-size: 32rpx;
color: #FF0000;
font-weight: 500;
}
.list_shop_cart{
width: 65rpx;
height: 65rpx;
display: flex;
align-items: center;
justify-content: flex-end;
.list_cart_img{
width: 50rpx;
height: 50rpx;
}
}
}
}
}
.price::before {
content: '¥';
font-size: 24rpx;
margin-right: 5rpx;
}
.prices::before {
content: '¥';
font-size: 20rpx;
margin-right: 5rpx;
margin-left: 5rpx;
}
.market_name{
color: #999999;
font-size: 23rpx;
text-decoration: line-through;
margin-left: 5rpx;
font-weight: 400;
}
}

70
userserve/location/location.vue
View File

@ -1,6 +1,56 @@
<template> <template>
<view class="main"> <view class="main">
<view class="location">
<view class="location_title">当前定位</view>
</view>
<view class="location_cont flex">
<view class="location_name" @click="addressBack">财富海景花园</view>
<view class="location_btn" @click="refresh"><image class="location_img" src="../../static/userserve/location.png" mode="widthFix"></image>重新定位</view>
</view>
<view class="location">
<view class="location_title">我的地址</view>
<view class="location_button" @click="addressList">管理</view>
</view>
<view class="location_cont location_padding">
<view class="location_list flex" @click="addressBack">
<view class="location_l">
<view class="location_address">
<text class="location_default">默认</text>
<text class="location_address_text">汤臣一品-20号楼2306室</text>
</view>
<view class="location_user"><text class="location_user_name">悟语先生</text><text class="location_user_tel">15221678099</text></view>
</view>
<view class="location_r location_acty">
<image class="location_acty_img" src="../../static/selected.png"></image>
</view>
</view>
<view class="location_list flex" @click="addressBack">
<view class="location_l">
<view class="location_address">
<text class="location_address_text">花木街道浦东新区机关事务管理局人民政府-20号楼2306室</text>
</view>
<view class="location_user"><text class="location_user_name">悟语先生</text><text class="location_user_tel">15221678099</text></view>
</view>
<!-- <view class="location_r"></view> -->
</view>
</view>
<view class="location">
<view class="location_title">附近地址</view>
</view>
<view class="location_cont location_padding">
<view class="location_item" @click="addressBack">浦茗荟(陆家嘴店)</view>
<view class="location_item" @click="addressBack">汇豪天下-7号楼</view>
<view class="location_item" @click="addressBack">臻邦游泳健身中心(财富海景店</view>
<view class="location_item" @click="addressBack">优涵游泳俱乐部·YHSC(财富海景店)</view>
<view class="location_item" @click="addressBack">财富海景花园-6号楼</view>
</view>
<view style="height: 200rpx;"></view>
<view class="footer">
<view class="footer_btn" @click="addressEdit">新增地址</view>
</view>
</view> </view>
</template> </template>
@ -13,6 +63,24 @@ const counterStore = useCounterStore(); // 使用 Store
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新) //使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore); const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore);
const addressList=()=>{
uni.navigateTo({
url:`/userserve/addressList/addressList`
})
};
const addressBack=()=>{
uni.navigateBack({
delta:1
})
};
const refresh=()=>{
console.log('刷新定位');
};
const addressEdit=()=>{
uni.navigateTo({
url:`/userserve/addressEdit/addressEdit`
})
};
onLoad((options) => {}); onLoad((options) => {});
onShow(() => {}); onShow(() => {});
onReady(()=>{}) onReady(()=>{})

143
userserve/location/style.scss
View File

@ -2,5 +2,146 @@ page{
background-color: #f6f6f6; background-color: #f6f6f6;
} }
.main{ .main{
.location{
display: flex;
align-items: center;
justify-content: space-between;
margin: 0rpx 20rpx 0rpx 20rpx;
padding: 10rpx 0rpx 0rpx 0rpx;
.location_title{
font-size: 28rpx;
color: #7f7f7f;
padding: 20rpx 30rpx 20rpx 30rpx;
}
.location_button{
font-size: 28rpx;
color: #FD4955;
font-weight: 500;
padding: 20rpx 30rpx 20rpx 30rpx;
}
}
.location_cont{
margin: 0rpx 30rpx 0rpx 30rpx;
padding: 30rpx;
background-color: #FFFFFF;
border-radius: 16rpx;
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
.location_name{
font-size: 28rpx;
font-weight: 500;
color: #333333;
width: 450rpx;
}
.location_btn{
color: #FD4955;
font-size: 28rpx;
font-weight: 500;
display: flex;
align-items: center;
.location_img{
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
}
}
.location_list{
padding-top: 30rpx;
padding-bottom: 30rpx;
border-bottom: 1rpx solid #f6f6f6;
.location_l{
.location_address{
.location_default{
font-size: 20rpx;
background-color: #fff4cd;
border-radius: 10rpx;
color: #f9d448;
margin-right: 10rpx;
padding: 2rpx 10rpx;
vertical-align: middle;
}
.location_address_text{
font-size: 28rpx;
font-weight: 500;
color: #333333;
vertical-align: middle;
}
}
.location_user{
font-size: 27rpx;
color: #7f7f7f;
margin-top: 10rpx;
.location_user_name{}
.location_user_tel{
margin-left: 20rpx;
}
}
}
.location_r{
width: 35rpx;
height: 35rpx;
border-radius: 50rpx;
border:1px solid #7f7f7f;
}
.location_acty{
border:1px solid #FD4955;
background-color: #FD4955;
display: flex;
align-items: center;
justify-content: center;
.location_acty_img{
width: 25rpx;
height: 25rpx;
display: block;
}
}
}
.location_item{
font-size: 28rpx;
font-weight: 500;
color: #333333;
padding: 30rpx 0 30rpx 0;
border-bottom: 1rpx solid #f6f6f6;
}
}
.flex{
display: flex;
align-items: center;
justify-content: space-between;
}
.location_pad{
padding: 0rpx 30rpx 30rpx 30rpx;
}
.location_padding{
padding: 0rpx 30rpx 0rpx 30rpx;
}
.footer{
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 160;
background: #FFFFFF;
font-size: 30rpx;
padding-bottom: env(safe-area-inset-bottom);
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20rpx;
padding-left: 20rpx;
padding-right: 20rpx;
border-top: 1rpx solid #efefef;
.footer_btn{
width: 100%;
height: 85rpx;
background-color: #fd3f3f;
border-radius: 50rpx;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
font-size: 28rpx;
}
}
} }