地址管理/定位列表/收藏商品列表/常见问题列表页面编写
This commit is contained in:
邝军华
parent
96a9bd9514
commit
a0d75475ff
@ -1,50 +1,59 @@
|
||||
<template>
|
||||
<view class="main">
|
||||
<view class="cont">
|
||||
<textarea class="cont_textarea" :disable-default-padding="isIos" placeholder="请填写您的退款理由～"></textarea>
|
||||
<view class="head" :class="headShow?'head_show':''" :style="{'opacity':headShow?opacity:'1','padding-top':statusBartop+'px'}">
|
||||
<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 class="cont cont_padding">
|
||||
<view class="cont_item">
|
||||
<view class="cont_item_l">
|
||||
<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 class="cont_view" :style="{'padding-top':statusBartop+statusHeight+10+'px'}">
|
||||
<view class="cont" >
|
||||
<textarea class="cont_textarea" :disable-default-padding="isIos" placeholder="请填写您的退款理由～"></textarea>
|
||||
</view>
|
||||
<view class="cont_border"></view>
|
||||
<view class="cont_item">
|
||||
<view class="cont_item_l">
|
||||
<image class="cont_item_img" src="../../static/ass/phone.png" mode="widthFix"></image>
|
||||
<view class="cont_item_text">联系方式</view>
|
||||
<view class="cont cont_padding">
|
||||
<view class="cont_item">
|
||||
<view class="cont_item_l">
|
||||
<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 class="cont_item_r"><input class="cont_item_input" type="number" placeholder="请输入电话号码"/></view>
|
||||
</view>
|
||||
<view class="cont_border"></view>
|
||||
<view class="cont_item">
|
||||
<view class="cont_item_l">
|
||||
<image class="cont_item_img" src="../../static/ass/img.png" mode="widthFix"></image>
|
||||
<view class="cont_item_text">照片</view>
|
||||
<view class="cont_border"></view>
|
||||
<view class="cont_item">
|
||||
<view class="cont_item_l">
|
||||
<image class="cont_item_img" src="../../static/ass/phone.png" mode="widthFix"></image>
|
||||
<view class="cont_item_text">联系方式</view>
|
||||
</view>
|
||||
<view class="cont_item_r"><input class="cont_item_input" type="number" placeholder="请输入电话号码"/></view>
|
||||
</view>
|
||||
</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 class="cont_border"></view>
|
||||
<view class="cont_item">
|
||||
<view class="cont_item_l">
|
||||
<image class="cont_item_img" src="../../static/ass/img.png" mode="widthFix"></image>
|
||||
<view class="cont_item_text">照片</view>
|
||||
</view>
|
||||
</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>
|
||||
<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 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 style="height: 200rpx;"></view>
|
||||
<view class="footer">
|
||||
<view class="footer_btn">提交</view>
|
||||
@ -60,7 +69,12 @@ import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } fr
|
||||
const counterStore = useCounterStore(); // 使用 Store
|
||||
const { proxy } = getCurrentInstance();
|
||||
//使用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 System = () =>{
|
||||
const phone = wx.getSystemInfoSync();
|
||||
@ -70,10 +84,51 @@ const System = () =>{
|
||||
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) => {
|
||||
System();
|
||||
//初始化时判断是否显示返回按钮
|
||||
showBack.value = getPages();
|
||||
updatePageWidth();
|
||||
});
|
||||
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(()=>{})
|
||||
onPullDownRefresh(()=>{})
|
||||
onReachBottom(()=>{})
|
||||
|
||||
@ -2,142 +2,187 @@ page{
|
||||
background: #f6f6f6;
|
||||
}
|
||||
.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-size: 100%;
|
||||
padding-top: 25rpx;
|
||||
.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{
|
||||
.head{
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.head_cont{
|
||||
position: relative;
|
||||
.head_back{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
.cont_item_img{
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
margin-left: 10px;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
.head_back_img{
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
.cont_item_text{
|
||||
color: #000000;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.head_title{
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
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%;
|
||||
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;
|
||||
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%;
|
||||
.cont_item_input{
|
||||
width: 350rpx;
|
||||
text-align: right;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.cont_item_r text{
|
||||
margin-left: 20rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.cont_item_r text{
|
||||
margin-left: 20rpx;
|
||||
font-weight: 500;
|
||||
.cont_border{
|
||||
height: 1rpx;
|
||||
background-color: #D5D5D5;
|
||||
margin-left: 75rpx;
|
||||
width: 600rpx;
|
||||
}
|
||||
}
|
||||
.cont_border{
|
||||
height: 1rpx;
|
||||
background-color: #D5D5D5;
|
||||
margin-left: 75rpx;
|
||||
width: 600rpx;
|
||||
}
|
||||
.cont_shop_text{
|
||||
font-size: 30rpx;
|
||||
color: #999999;
|
||||
padding:0rpx 30rpx 30rpx 30rpx;
|
||||
}
|
||||
.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{
|
||||
.cont_shop_text{
|
||||
font-size: 30rpx;
|
||||
color: #999999;
|
||||
padding:0rpx 30rpx 30rpx 30rpx;
|
||||
}
|
||||
.cont_shop_edit{
|
||||
border-radius: 16rpx;
|
||||
.cont_ul{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.cont_li{
|
||||
width: 192rpx;
|
||||
height: 192rpx;
|
||||
border-radius: 4rpx;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
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;
|
||||
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{
|
||||
position: fixed;
|
||||
left: 0;
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
|
||||
<view class="main">
|
||||
<!-- 地址 -->
|
||||
<view class="cont">
|
||||
<view class="cont" @click="onAddress()">
|
||||
<view class="cont_ul">
|
||||
<view class="cont_l">
|
||||
<view class="cont_text">东方体育中心<text class="cont_default">默认</text></view>
|
||||
<view class="cont_l cont_width">
|
||||
<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>
|
||||
<view class="cont_arr"></view>
|
||||
@ -240,6 +240,11 @@ const timeFun = (e)=>{
|
||||
]}]
|
||||
timList.value = time;
|
||||
}
|
||||
const onAddress=()=>{
|
||||
uni.navigateTo({
|
||||
url:`/userserve/addressList/addressList`
|
||||
})
|
||||
};
|
||||
onLoad((options) => {
|
||||
timeFun();
|
||||
});
|
||||
|
||||
@ -23,22 +23,25 @@ page{
|
||||
justify-content: space-between;
|
||||
.cont_l{
|
||||
.cont_text{
|
||||
font-size: 32rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.cont_default{
|
||||
font-size: 20rpx;
|
||||
background-color: #FFF4CD;
|
||||
border-radius: 10rpx;
|
||||
color: #F9D448;
|
||||
margin-left: 10rpx;
|
||||
margin-right: 10rpx;
|
||||
padding: 2rpx 10rpx 2rpx 10rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.cont_v{
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
}
|
||||
.cont_user{
|
||||
font-size: 26rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
margin-top: 10rpx;
|
||||
.cont_tel{
|
||||
@ -46,6 +49,9 @@ page{
|
||||
}
|
||||
}
|
||||
}
|
||||
.cont_width{
|
||||
width: 550rpx;
|
||||
}
|
||||
.cont_arr{
|
||||
position: relative;
|
||||
margin-right: 20rpx;
|
||||
@ -342,16 +348,16 @@ page{
|
||||
content: '¥';
|
||||
font-size: 28rpx;
|
||||
margin-right: 5rpx;
|
||||
margin-left: 5rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
.footer_coupon{
|
||||
display: inline-block;
|
||||
color: #666666;
|
||||
font-size: 28rpx;
|
||||
font-size: 26rpx;
|
||||
margin-left: 10rpx;
|
||||
.footer_coupon_price::before{
|
||||
content: '¥';
|
||||
font-size: 24rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -364,8 +370,9 @@ page{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.shop_open{
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<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_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_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>
|
||||
<input class="head_search_input" type="text" placeholder="请输入搜索内容" v-model="searchtext"/>
|
||||
</view>
|
||||
@ -17,7 +17,7 @@
|
||||
</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_type">已完成</view>
|
||||
<view class="order_time">2025/1/15 17:20 周三</view>
|
||||
@ -268,6 +268,7 @@ const orderDetail=()=>{
|
||||
url:`/order/orderDetail/orderDetail`
|
||||
})
|
||||
};
|
||||
|
||||
//使用 uni.onLoad 监听页面加载
|
||||
onLoad((options) => {
|
||||
const { type } = options;
|
||||
|
||||
@ -45,7 +45,7 @@ page{
|
||||
.head_search_input{
|
||||
width: 500rpx;
|
||||
height: 100%;
|
||||
font-size: 28rpx;
|
||||
font-size: 27rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
29
pages.json
29
pages.json
@ -96,6 +96,12 @@
|
||||
"navigationBarTitleText": "评价",
|
||||
"navigationBarBackgroundColor": "#FFFFFF"
|
||||
}
|
||||
},{
|
||||
"path": "faqList/faqList",
|
||||
"style": {
|
||||
"navigationBarTitleText": "常见问题",
|
||||
"navigationBarBackgroundColor": "#FFFFFF"
|
||||
}
|
||||
}]
|
||||
},
|
||||
{
|
||||
@ -146,7 +152,8 @@
|
||||
"path": "assedit/assedit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "申请售后",
|
||||
"navigationBarBackgroundColor": "#FCEEEF"
|
||||
"navigationBarBackgroundColor": "#FCEEEF",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},{
|
||||
"path": "orderDetail/orderDetail",
|
||||
@ -167,7 +174,7 @@
|
||||
"pages": [{
|
||||
"path": "location/location",
|
||||
"style": {
|
||||
"navigationBarTitleText": "选择地址",
|
||||
"navigationBarTitleText": "选择收货地址",
|
||||
"navigationBarBackgroundColor": "#FFFFFF"
|
||||
}
|
||||
},
|
||||
@ -177,6 +184,12 @@
|
||||
"navigationBarTitleText": "地址管理",
|
||||
"navigationBarBackgroundColor": "#FFFFFF"
|
||||
}
|
||||
},{
|
||||
"path": "addressEdit/addressEdit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "新增地址",
|
||||
"navigationBarBackgroundColor": "#FFFFFF"
|
||||
}
|
||||
},{
|
||||
"path": "aiserve/aiserve",
|
||||
"style": {
|
||||
@ -184,6 +197,18 @@
|
||||
"navigationBarBackgroundColor": "#FFFFFF",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},{
|
||||
"path": "aichitchat/aichitchat",
|
||||
"style": {
|
||||
"navigationBarTitleText": "消息详情",
|
||||
"navigationBarBackgroundColor": "#FFFFFF"
|
||||
}
|
||||
},{
|
||||
"path": "favorite/favorite",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品收藏",
|
||||
"navigationBarBackgroundColor": "#FFFFFF"
|
||||
}
|
||||
},{
|
||||
"path": "certificate/certificate",
|
||||
"style": {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
|
||||
<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_ul">
|
||||
<view class="head_l">
|
||||
@ -15,111 +15,114 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cart" :style="{'padding-top':85+headerHeight+'px'}">
|
||||
<view style="height: 10rpx;"></view>
|
||||
<uni-swipe-action>
|
||||
<uni-swipe-action-item v-for="(item,index) in cartList" :key="index" :right-options="options" @click="removeCart(1,item)">
|
||||
<view class="cart_item" v-if="item.type == 1">
|
||||
<view class="cart_selected" @click="checkedShop(item)">
|
||||
<view :class="item.isSelected === '1'?'cart_selected_true':'cart_selected_false'">
|
||||
<image v-if="item.isSelected" src="../../static/selected.png"></image>
|
||||
</view>
|
||||
</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'">
|
||||
<view class="cont">
|
||||
<view class="head_fixed" :style="{'height':75+headerHeight+'px'}">下拉刷新...</view>
|
||||
<view class="cart">
|
||||
<view style="height: 10rpx;"></view>
|
||||
<uni-swipe-action>
|
||||
<uni-swipe-action-item v-for="(item,index) in cartList" :key="index" :right-options="options" @click="removeCart(1,item)">
|
||||
<view class="cart_item" v-if="item.type == 1">
|
||||
<view class="cart_selected" @click="checkedShop(item)">
|
||||
<view :class="item.isSelected === '1'?'cart_selected_true':'cart_selected_false'">
|
||||
<image v-if="item.isSelected" src="../../static/selected.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cart_view_scroll">
|
||||
<view class="cart_scroll">
|
||||
<scroll-view class="cart_scroll_ul" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" scroll-x="true">
|
||||
<view class="cart_scroll_li" v-for="(i,index) in item.list">
|
||||
<view class="cart_scroll_img">
|
||||
<image class="cart_scroll_img_url" :src="i.imgUrl" mode="widthFix"></image>
|
||||
</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_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=""></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_remove">删除</view>
|
||||
</view>
|
||||
<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>
|
||||
</view>
|
||||
<view class="cart_counter_center">1</view>
|
||||
<view class="cart_counter_btn border_r">
|
||||
<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>
|
||||
</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 class="cart_lose_bottom">
|
||||
<view class="cart_lose_img">
|
||||
<view class="cart_lose_bcg">
|
||||
<view class="cart_lose_text">商品已下架</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>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cart_view_scroll">
|
||||
<view class="cart_scroll">
|
||||
<scroll-view class="cart_scroll_ul" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" scroll-x="true">
|
||||
<view class="cart_scroll_li" v-for="(i,index) in item.list">
|
||||
<view class="cart_scroll_img">
|
||||
<image class="cart_scroll_img_url" :src="i.imgUrl" mode="widthFix"></image>
|
||||
</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>
|
||||
<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 class="cart_lose_ly">
|
||||
<view class="cart_lose_title">糖醋排骨</view>
|
||||
<view class="cart_lose_desc">商品下架了</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cart_lose_bottom">
|
||||
<view class="cart_lose_img">
|
||||
<view class="cart_lose_bcg">
|
||||
<view class="cart_lose_text">商品已下架</view>
|
||||
<view class="cart_lose_bottom">
|
||||
<view class="cart_lose_img">
|
||||
<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>
|
||||
<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 class="cart_lose_bottom">
|
||||
<view class="cart_lose_img">
|
||||
<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 class="user_title" v-if="!showEdit">
|
||||
<text class="user_name">为您推荐</text>
|
||||
@ -476,6 +479,11 @@ const removeCart=(type,item)=>{
|
||||
}
|
||||
})
|
||||
};
|
||||
const location=()=>{
|
||||
uni.navigateTo({
|
||||
url:`/userserve/location/location`
|
||||
})
|
||||
}
|
||||
//使用 uni.onLoad 监听页面加载
|
||||
onLoad((options) => {
|
||||
cartData();
|
||||
|
||||
@ -96,83 +96,27 @@ page{
|
||||
}
|
||||
}
|
||||
// 购物车区域
|
||||
.cart{
|
||||
background: linear-gradient(180deg, #FCEEEF 0%, #f6f6f6 100%);
|
||||
background-repeat: no-repeat;
|
||||
.cart_item{
|
||||
// margin: 0rpx 20rpx 0rpx 20rpx;
|
||||
// border-radius: 25rpx;
|
||||
// background-color: #ffffff;
|
||||
// box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
|
||||
.cont{
|
||||
.head_fixed{
|
||||
background-color: #f6f6f6;
|
||||
color: #999999;
|
||||
font-size: 26rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 0rpx 20rpx 0rpx;
|
||||
.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_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;
|
||||
}
|
||||
}
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.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{
|
||||
.cart{
|
||||
background: linear-gradient(180deg, #FCEEEF 0%, #f6f6f6 100%);
|
||||
background-repeat: no-repeat;
|
||||
.cart_item{
|
||||
// margin: 0rpx 20rpx 0rpx 20rpx;
|
||||
// border-radius: 25rpx;
|
||||
// background-color: #ffffff;
|
||||
// box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 0rpx 20rpx 0rpx;
|
||||
.cart_selected{
|
||||
width: 50rpx;
|
||||
display: flex;
|
||||
@ -185,140 +129,208 @@ page{
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #bfbfbf;
|
||||
}
|
||||
}
|
||||
.cart_view_scroll{
|
||||
width: 620rpx;
|
||||
.cart_scroll{
|
||||
width: 100%;
|
||||
.cart_selected_true{
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #FF0000;
|
||||
border: 2rpx solid #FF0000;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
.cart_scroll_ul{
|
||||
.cart_scroll_li{
|
||||
width: 180rpx;
|
||||
display: inline-block;
|
||||
margin-right: 20rpx;
|
||||
.cart_scroll_img{
|
||||
background: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
// border: 1rpx solid #F3F3F3;
|
||||
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{
|
||||
// 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;
|
||||
height: 180rpx;
|
||||
overflow: hidden;
|
||||
.cart_scroll_img_url{
|
||||
display: inline-block;
|
||||
margin-right: 20rpx;
|
||||
.cart_scroll_img{
|
||||
background: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
// border: 1rpx solid #F3F3F3;
|
||||
width: 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{
|
||||
margin: 0rpx 20rpx 20rpx 20rpx;
|
||||
border-radius: 25rpx;
|
||||
background-color: #fff;
|
||||
padding-bottom: 20rpx;
|
||||
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
|
||||
.cart_lose_top{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1rpx solid #f6f6f6;
|
||||
.cart_lose_top_l{
|
||||
color: #000000;
|
||||
font-size: 28rpx;
|
||||
padding:25rpx 20rpx 25rpx 20rpx;
|
||||
.cart_lose{
|
||||
margin: 0rpx 20rpx 20rpx 20rpx;
|
||||
border-radius: 25rpx;
|
||||
background-color: #fff;
|
||||
padding-bottom: 20rpx;
|
||||
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
|
||||
.cart_lose_top{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1rpx solid #f6f6f6;
|
||||
.cart_lose_top_l{
|
||||
color: #000000;
|
||||
font-size: 28rpx;
|
||||
padding:25rpx 20rpx 25rpx 20rpx;
|
||||
}
|
||||
.cart_lose_top_r{
|
||||
color: #E60703;
|
||||
font-size: 28rpx;
|
||||
padding:25rpx 20rpx 25rpx 20rpx;
|
||||
}
|
||||
}
|
||||
.cart_lose_top_r{
|
||||
color: #E60703;
|
||||
font-size: 28rpx;
|
||||
padding:25rpx 20rpx 25rpx 20rpx;
|
||||
}
|
||||
}
|
||||
.cart_lose_bottom{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 20rpx 0rpx 20rpx;
|
||||
.cart_lose_img{
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
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;
|
||||
.cart_lose_bottom{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 20rpx 0rpx 20rpx;
|
||||
.cart_lose_img{
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
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;
|
||||
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{
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
.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{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -558,7 +570,7 @@ page{
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
.footer_price{
|
||||
font-size: 38rpx;
|
||||
font-size: 40rpx;
|
||||
color: #FF0000;
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
@ -572,7 +584,8 @@ page{
|
||||
}
|
||||
.footer_btn{
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<view class="mian">
|
||||
<!-- 头部区域 -->
|
||||
<view class="head" :style="{'padding-top':headerHeight+3+'px'}">
|
||||
<view class="head_search" :style="{'width':searchWidth+'px'}">
|
||||
<view class="head" :style="{'padding-top':headerHeight+4+'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>
|
||||
<input class="head_search_input" type="text" placeholder="请输入搜索内容" v-model="searchtext"/>
|
||||
</view>
|
||||
@ -57,121 +57,124 @@
|
||||
</view>
|
||||
|
||||
<!-- 商品区域 -->
|
||||
<view class="shop_view" :style="{'padding-top':92+headerHeight+'px'}">
|
||||
<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 class="cont_view">
|
||||
<view class="head_fixed" :style="{'height':statusHeight+headerHeight+48+'px'}">下拉刷新...</view>
|
||||
<view class="shop_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_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_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_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 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 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_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 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>
|
||||
<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 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 style="height: 200rpx;"></view>
|
||||
|
||||
@ -30,7 +30,7 @@ page{
|
||||
.head_search_input{
|
||||
width: 500rpx;
|
||||
height: 100%;
|
||||
font-size: 28rpx;
|
||||
font-size: 27rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@ -109,120 +109,131 @@ page{
|
||||
}
|
||||
}
|
||||
// 商品区域样式
|
||||
.shop_view{
|
||||
padding: 13rpx 20rpx 0rpx 20rpx;
|
||||
display: flex;
|
||||
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%;
|
||||
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
|
||||
margin-bottom: 20rpx;
|
||||
.shop_view_li_swiper{
|
||||
.cont_view{
|
||||
.head_fixed{
|
||||
background-color: #f6f6f6;
|
||||
color: #999999;
|
||||
font-size: 26rpx;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.shop_view{
|
||||
padding: 13rpx 20rpx 0rpx 20rpx;
|
||||
display: flex;
|
||||
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%;
|
||||
height: 504rpx;
|
||||
.shop_view_li_swiper_item{
|
||||
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
|
||||
margin-bottom: 20rpx;
|
||||
.shop_view_li_swiper{
|
||||
width: 100%;
|
||||
.shop_view_li_swiper_img_url{
|
||||
height: 504rpx;
|
||||
.shop_view_li_swiper_item{
|
||||
width: 100%;
|
||||
height: 504rpx;
|
||||
display: block;
|
||||
border-radius: 20rpx;
|
||||
.shop_view_li_swiper_img_url{
|
||||
width: 100%;
|
||||
height: 504rpx;
|
||||
display: block;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.shop_view_img{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 320rpx;
|
||||
.shop_view_tag{
|
||||
width: 66rpx;
|
||||
height: 42rpx;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
right: -15rpx;
|
||||
top: 20rpx;
|
||||
background: url(../../static/tag_img.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.shop_view_tag_text{
|
||||
font-size: 20rpx;
|
||||
color: #FFFFFF;
|
||||
height: 30rpx;
|
||||
.shop_view_img{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 320rpx;
|
||||
.shop_view_tag{
|
||||
width: 66rpx;
|
||||
height: 42rpx;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
right: -15rpx;
|
||||
top: 20rpx;
|
||||
background: url(../../static/tag_img.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.shop_view_tag_text{
|
||||
font-size: 20rpx;
|
||||
color: #FFFFFF;
|
||||
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;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
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_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;
|
||||
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;
|
||||
.shop_view_cont_bottom{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
.shop_view_cont_cart_img{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
display: block;
|
||||
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;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
.shop_view_cont_cart_img{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.shop_view_bcg{
|
||||
background-color: inherit;
|
||||
.shop_view_bcg{
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,34 +1,37 @@
|
||||
<template>
|
||||
<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_search">
|
||||
<view class="head_search" :style="{'height':statusHeight+8+'px'}">
|
||||
<image class="head_search_img" src="../../static/search_img.png" mode="widthFix"></image>
|
||||
<input class="head_search_input" type="text" placeholder="请输入搜索内容" v-model="searchtext"/>
|
||||
<view class="head_search_btn">搜索</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 推荐区域 -->
|
||||
<view class="grid_wrap" :style="{'padding-top':95+headerHeight+'px'}">
|
||||
<view class="grid_wrap_l">
|
||||
<image class="grid_wrap_live" src=""></image>
|
||||
<view class="grid_wrap_live_title"><image class="grid_wrap_live_img" src="../../static/index/v.png"></image>直播</view>
|
||||
</view>
|
||||
<view class="grid_wrap_r">
|
||||
<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 class="grid_top">
|
||||
<view class="head_fixed" :style="{'height':statusHeight+headerHeight+43+'px'}">下拉刷新...</view>
|
||||
<view class="grid_wrap">
|
||||
<view class="grid_wrap_l">
|
||||
<image class="grid_wrap_live" src=""></image>
|
||||
<view class="grid_wrap_live_title"><image class="grid_wrap_live_img" src="../../static/index/v.png"></image>直播</view>
|
||||
</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 class="grid_wrap_r">
|
||||
<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 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>
|
||||
<image class="grid_wrap_li_r" src="../../static/index/refund_img.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -342,6 +345,11 @@ const goCarts=()=>{
|
||||
url:`/pages/cart/cart`
|
||||
})
|
||||
}
|
||||
const location=()=>{
|
||||
uni.navigateTo({
|
||||
url:`/userserve/location/location`
|
||||
})
|
||||
}
|
||||
onLoad((options) => {
|
||||
|
||||
});
|
||||
|
||||
@ -82,7 +82,7 @@ page{
|
||||
.head_search_input{
|
||||
width: 560rpx;
|
||||
height: 100%;
|
||||
font-size: 28rpx;
|
||||
font-size: 27rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@ -92,6 +92,7 @@ page{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
.head_search_btn::before{
|
||||
content: "";
|
||||
@ -109,94 +110,106 @@ page{
|
||||
}
|
||||
}
|
||||
// 推荐区域样式
|
||||
.grid_wrap{
|
||||
padding: 20rpx 20rpx 20rpx 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.grid_wrap_l{
|
||||
width: 338rpx;
|
||||
height: 338rpx;
|
||||
background-color: #000000;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.grid_wrap_live{
|
||||
.grid_top{
|
||||
.head_fixed{
|
||||
background-color: #f6f6f6;
|
||||
color: #999999;
|
||||
font-size: 26rpx;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.grid_wrap{
|
||||
padding: 20rpx 20rpx 20rpx 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.grid_wrap_l{
|
||||
width: 338rpx;
|
||||
height: 338rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.grid_wrap_live_title{
|
||||
font-size: 30rpx;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
z-index: 2;
|
||||
top: 20rpx;
|
||||
left: 20rpx;
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.grid_wrap_live_img{
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-right: 10rpx;
|
||||
display: block;
|
||||
margin-top: 1rpx;
|
||||
background-color: #000000;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.grid_wrap_live{
|
||||
width: 338rpx;
|
||||
height: 338rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.grid_wrap_live_title{
|
||||
font-size: 30rpx;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
z-index: 2;
|
||||
top: 20rpx;
|
||||
left: 20rpx;
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.grid_wrap_live_img{
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-right: 10rpx;
|
||||
display: block;
|
||||
margin-top: 1rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.grid_wrap_r{
|
||||
width: 355rpx;
|
||||
.grid_wrap_li{
|
||||
padding: 20rpx;
|
||||
width: 315rpx;
|
||||
height: 119rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
|
||||
.grid_wrap_li_l{
|
||||
.grid_wrap_li_title{
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.grid_wrap_r{
|
||||
width: 355rpx;
|
||||
.grid_wrap_li{
|
||||
padding: 20rpx;
|
||||
width: 315rpx;
|
||||
height: 119rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
|
||||
.grid_wrap_li_l{
|
||||
.grid_wrap_li_title{
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
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{
|
||||
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_r{
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
-webkit-animation: 3s scaleDr ease-in-out infinite;
|
||||
animation: 3s scaleDr ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
.grid_wrap_li_r{
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
-webkit-animation: 3s scaleDr ease-in-out infinite;
|
||||
animation: 3s scaleDr ease-in-out infinite;
|
||||
.grid_wrap_top{
|
||||
margin-top: 21rpx;
|
||||
}
|
||||
}
|
||||
.grid_wrap_top{
|
||||
margin-top: 21rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 滚动区域样式
|
||||
@ -477,7 +490,7 @@ page{
|
||||
.footer_cont_m{
|
||||
margin-left: 25rpx;
|
||||
.footer_cont_m_price{
|
||||
font-size: 38rpx;
|
||||
font-size: 40rpx;
|
||||
color: #FF0000;
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -500,8 +513,9 @@ page{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 30rpx;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -127,7 +127,7 @@ onShow(() => {
|
||||
|
||||
});
|
||||
onPullDownRefresh(()=>{
|
||||
|
||||
uni.stopPullDownRefresh();
|
||||
})
|
||||
onReachBottom(()=>{
|
||||
|
||||
|
||||
@ -187,54 +187,64 @@ const order = ref([
|
||||
{
|
||||
id:1,
|
||||
imgUrl:'../../static/user/staypay.png',
|
||||
name:'待支付'
|
||||
name:'待支付',
|
||||
url:'/order/orderList/orderList?type=1'
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
imgUrl:'../../static/user/staytake.png',
|
||||
name:'待收货'
|
||||
name:'待收货',
|
||||
url:'/order/orderList/orderList?type=3'
|
||||
},
|
||||
{
|
||||
id:4,
|
||||
imgUrl:'../../static/user/evaluate.png',
|
||||
name:'待评价'
|
||||
name:'待评价',
|
||||
url:'/order/orderevallist/orderevallist?type=0'
|
||||
},
|
||||
{
|
||||
id:5,
|
||||
imgUrl:'../../static/user/refund.png',
|
||||
name:'退款/售后'
|
||||
name:'退款/售后',
|
||||
url:'/order/assList/assList?type=0'
|
||||
},
|
||||
{
|
||||
id:0,
|
||||
imgUrl:'../../static/user/order.png',
|
||||
name:'全部订单'
|
||||
name:'全部订单',
|
||||
url:'/order/orderList/orderList?type=0'
|
||||
}
|
||||
])
|
||||
const contList = ref([
|
||||
{
|
||||
id:1,
|
||||
imgUrl:'../../static/user/service.png',
|
||||
name:'客户服务'
|
||||
name:'客户服务',
|
||||
url:'/userserve/clientserve/clientserve'
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
imgUrl:'../../static/user/collect.png',
|
||||
name:'商品收藏'
|
||||
name:'商品收藏',
|
||||
url:'/userserve/favorite/favorite'
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
imgUrl:'../../static/user/certification.png',
|
||||
name:'证照资质'
|
||||
name:'证照资质',
|
||||
url:'/userserve/certificate/certificate'
|
||||
},
|
||||
{
|
||||
id:4,
|
||||
imgUrl:'../../static/user/feedback.png',
|
||||
name:'意见反馈'
|
||||
name:'意见反馈',
|
||||
url:'/userserve/feedback/feedback'
|
||||
},
|
||||
{
|
||||
id:5,
|
||||
imgUrl:'../../static/user/address.png',
|
||||
name:'地址管理'
|
||||
name:'地址管理',
|
||||
url:'/userserve/addressList/addressList'
|
||||
}
|
||||
])
|
||||
const goDetail=()=>{
|
||||
@ -248,36 +258,14 @@ const goCoupon=()=>{
|
||||
})
|
||||
};
|
||||
const goServe=(item,index)=>{
|
||||
let url = "";
|
||||
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`
|
||||
}
|
||||
const { url } = item;
|
||||
uni.navigateTo({url})
|
||||
}
|
||||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||||
//const { count,doubleCount } = storeToRefs(counterStore);
|
||||
const orderList=(item)=>{
|
||||
if(item.id == 4){
|
||||
uni.navigateTo({
|
||||
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`
|
||||
})
|
||||
}
|
||||
|
||||
const { url } = item;
|
||||
uni.navigateTo({url})
|
||||
}
|
||||
onLoad((options) => {
|
||||
|
||||
|
||||
@ -69,14 +69,15 @@
|
||||
</view>
|
||||
</view>
|
||||
<!-- 常见问题 -->
|
||||
<view class="shop_comment">
|
||||
<view class="shop_comment" @click="faqList">
|
||||
<view class="shop_comment_head">
|
||||
<view class="shop_comment_head_title">常见问题(2)</view>
|
||||
<view class="shop_comment_head_arrow">全部</view>
|
||||
</view>
|
||||
<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="faqlist">
|
||||
<view class="shop_ask shop_padding"><text>有的虾头发黑是为什么?</text></view>
|
||||
<view class="shop_answer shop_padding"><text>虾头中含有一种叫做酪氨酸酶的酶，当虾死亡后，这种酶会催化虾体内的酪氨酸生成黑色素，导致虾头变黑。这是一种自然现象，通常不影响虾肉的食用安全。</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 图文详情 -->
|
||||
@ -366,6 +367,11 @@ const orderConfirm = ()=>{
|
||||
url:`/order/orderConfirm/orderConfirm`
|
||||
})
|
||||
}
|
||||
const faqList=()=>{
|
||||
uni.navigateTo({
|
||||
url:`/shopProDetail/faqList/faqList`
|
||||
})
|
||||
}
|
||||
onLoad((options) => {
|
||||
//初始化时判断是否显示返回按钮
|
||||
showBack.value = getPages();
|
||||
|
||||
@ -266,41 +266,43 @@ page{
|
||||
}
|
||||
}
|
||||
}
|
||||
.shop_ask{
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.shop_answer{
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
}
|
||||
.shop_padding{
|
||||
.faqlist{
|
||||
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{
|
||||
margin: 20rpx 20rpx 0rpx 20rpx;
|
||||
|
||||
35
shopProDetail/faqList/faqList.vue
Normal file
35
shopProDetail/faqList/faqList.vue
Normal 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
43
shopProDetail/faqList/style.scss
Normal 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
BIN
static/userserve/edit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
static/userserve/location.png
Normal file
BIN
static/userserve/location.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
82
userserve/addressEdit/addressEdit.vue
Normal file
82
userserve/addressEdit/addressEdit.vue
Normal 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
136
userserve/addressEdit/style.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,35 @@
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
@ -13,6 +42,16 @@ const counterStore = useCounterStore(); // 使用 Store
|
||||
const { proxy } = getCurrentInstance();
|
||||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||||
const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore);
|
||||
const addressEdit=()=>{
|
||||
uni.navigateTo({
|
||||
url:`/userserve/addressEdit/addressEdit`
|
||||
})
|
||||
};
|
||||
const revamp=()=>{
|
||||
uni.navigateTo({
|
||||
url:`/userserve/addressEdit/addressEdit`
|
||||
})
|
||||
}
|
||||
onLoad((options) => {});
|
||||
onShow(() => {});
|
||||
onReady(()=>{})
|
||||
|
||||
@ -2,5 +2,92 @@ page{
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
.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
31
userserve/aichitchat/aichitchat.vue
Normal 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
45
userserve/aichitchat/style.scss
Normal 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,7 +12,7 @@
|
||||
<view class="content_greetings">
|
||||
<view class="content_greetings_l">
|
||||
<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>
|
||||
<text class="content_greetings_text">开始聊天</text>
|
||||
</view>
|
||||
@ -30,8 +30,6 @@
|
||||
<image class="content_hot_danmu_liimg" src="../../static/userserve/197.png" mode="widthFix"></image>
|
||||
<text class="content_hot_danmu_li_text">{{item.text}}</text>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_list">
|
||||
@ -62,11 +60,8 @@
|
||||
<view class="content_list_desc">甜口红烧肉是一道经典的中式家常菜，特点是色泽红亮、肥而不腻、甜咸适中</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
<view style="height: 200px;"></view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -211,6 +206,11 @@ const sendDanmu =()=> {
|
||||
// 添加到弹幕列表
|
||||
danmuList.value = (danmu);
|
||||
}
|
||||
const onChat=()=>{
|
||||
uni.navigateTo({
|
||||
url:`/userserve/aichitchat/aichitchat`
|
||||
})
|
||||
}
|
||||
onLoad((options) => {
|
||||
//初始化时判断是否显示返回按钮
|
||||
showBack.value = getPages();
|
||||
|
||||
@ -79,7 +79,7 @@ page{
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.content_greetings_text{
|
||||
font-size: 30rpx;
|
||||
font-size: 26rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
@ -89,7 +89,7 @@
|
||||
<image class="footer_telimg" src="../../static/userserve/tel.png"></image>
|
||||
<view class="footer_tel_text">热线电话</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>
|
||||
</template>
|
||||
@ -136,6 +136,10 @@ const detail=()=>{
|
||||
url:`/userserve/clientservedetail/clientservedetail`
|
||||
})
|
||||
};
|
||||
const handleContact=()=>{
|
||||
console.log(e.detail.path)
|
||||
console.log(e.detail.query)
|
||||
};
|
||||
onLoad((options) => {
|
||||
//初始化时判断是否显示返回按钮
|
||||
showBack.value = getPages();
|
||||
|
||||
@ -127,8 +127,9 @@ page{
|
||||
}
|
||||
.content_x{
|
||||
color: #000000;
|
||||
font-size: 30rpx;
|
||||
font-size: 28rpx;
|
||||
margin-top: 27rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
.class_scroll{
|
||||
white-space: nowrap;
|
||||
@ -227,7 +228,7 @@ page{
|
||||
color: #666666;
|
||||
font-size: 20rpx;
|
||||
text-align: center;
|
||||
margin-top: 10rpx;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
}
|
||||
.footer_btn{
|
||||
@ -240,9 +241,10 @@ page{
|
||||
color: #FD3F3F;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
background-color: #FFFFFF;
|
||||
.footer_btn_text{
|
||||
color: #999999;
|
||||
font-size: 20rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
81
userserve/favorite/favorite.vue
Normal file
81
userserve/favorite/favorite.vue
Normal 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
91
userserve/favorite/style.scss
Normal 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;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,6 +1,56 @@
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
@ -13,6 +63,24 @@ const counterStore = useCounterStore(); // 使用 Store
|
||||
const { proxy } = getCurrentInstance();
|
||||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||||
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) => {});
|
||||
onShow(() => {});
|
||||
onReady(()=>{})
|
||||
|
||||
@ -2,5 +2,146 @@ page{
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user