Skip to content

J
jd-vx-app
Commit 0a81ec2b authored by 程新智's avatar 程新智 👽
Browse files
Options

init

parent ec033e42
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 3030 additions and 160 deletions
App.vue
View file @ 0a81ec2b
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
<style lang='scss'> <style lang='scss'>
@import 'common/css/iconfont.css'; @import 'common/css/iconfont.css';
@import "common/uview-ui/index.scss"; @import "common/uview-ui/index.scss";
@import "./static/public.css";
/*每个页面公共css */ /*每个页面公共css */
.content { .content {
width: 100%; width: 100%;
......
common/wxcomponents/custom-tarbar/custom-tarbar.vue
View file @ 0a81ec2b
<template> <template>
<view class="tarbar"> <view class="tarbar">
<view <view class=".tarbar-list" :style="{
class=".tarbar-list"
:style="{ background: tabBar.backgroundColor,
background: tabBar.backgroundColor,
color: tabBar.color, color: tabBar.color,
'border-top': tabBar.position == 'bottom' ? '1rpx solid ' + tabBar.borderStyle : 0,
'border-bottom': tabBar.position == 'top' ? '1rpx solid ' + tabBar.borderStyle : 0 'border-top': tabBar.position == 'bottom' ? '0rpx solid ' + tabBar.borderStyle : 0,
}"
> 'border-bottom': tabBar.position == 'top' ? '1rpx solid ' + tabBar.borderStyle : 0
<view class="tarbar-list-ul">
<view class="tarbar-list-li" :class="index == 2 ? 'tarbar-list-li-center' : ''" v-for="(item, index) in tabBar.list" :key="index" @click.top="setSelected(index)"> }">
<block v-if="index != 2"> <view class="tarbar-list-ul">
<view class="tarbar-list-li-icon"><image :src="selected == index ? item.selectedIconPath : item.iconPath" mode=""></image></view> <view class="tarbar-list-li" :class="index == 2 ? 'tarbar-list-li-center' : ''" v-for="(item, index) in tabBar.list" :key="index" @click.top="setSelected(index)">
<view class="tarbar-list-li-name">{{ item.text }}</view> <block v-if="index != 2">
</block> <view class="tarbar-list-li-icon">
<block v-else> <image :src="selected == index ? item.selectedIconPath : item.iconPath" mode=""></image>
<view class="tarbar-list-li-icon"><image :src="item.selectedIconPath" mode=""></image></view> </view>
</block> <view class="tarbar-list-li-name">{{ item.text }}</view>
</view> </block>
</view> <block v-else>
</view> <view class="tarbar-list-li-icon">
<block v-if="isShowMask"><release-popup @close-mask="closeMask"></release-popup></block> <image :src="item.selectedIconPath" mode=""></image>
</view> </view>
</block>
</view>
</view>
</view>
<block v-if="isShowMask">
<release-popup @close-mask="closeMask"></release-popup>
</block>
</view>
</template> </template>
<script> <script>
import releasePopup from './release-popup.vue'; import releasePopup from './release-popup.vue';
export default { export default {
components: { components: {
'release-popup': releasePopup 'release-popup': releasePopup
}, },
props: ['selected'], props: ['selected'],
data() { data() {
return { return {
tabBar: { tabBar: {
color: '#ccc', color: '#ccc',
selectedColor: '#E84351', selectedColor: '#E84351',
borderStyle: '#ccc', borderStyle: '#ccc',
backgroundColor: '#fff', backgroundColor: '#fff',
position: 'bottom', position: 'bottom',
list: [ list: [{
{ pagePath: '/pages/index/index',
pagePath: '/pages/index/index', iconPath: '/static/tarbar/index22.png',
iconPath: '/static/tarbar/home1.png', selectedIconPath: '/static/tarbar/index5.png',
selectedIconPath: '/static/tarbar/home2.png', text: '首页'
text: '首页' },
}, {
{ pagePath: '/pages/move-car/index',
pagePath: '/pages/move-car/index', iconPath: '/static/tarbar/index17.png',
iconPath: '/static/tarbar/foodie1.png', selectedIconPath: '/static/tarbar/index24.png',
selectedIconPath: '/static/tarbar/foodie2.png', text: '我要挪车'
text: '我要挪车' },
}, {
{ pagePath: '/pages/releaseBtn/releaseBtn',
pagePath: '/pages/releaseBtn/releaseBtn', iconPath: '',
iconPath: '', selectedIconPath: '/static/tarbar/index31.png'
selectedIconPath: '/static/tarbar/release.png' },
}, {
{ pagePath: '/pages/shop/index',
pagePath: '/pages/shop/index', iconPath: '/static/tarbar/index2.png',
iconPath: '/static/tarbar/discover1.png', selectedIconPath: '/static/tarbar/index21.png',
selectedIconPath: '/static/tarbar/discover2.png', text: '精选商城'
text: '精选商城' },
}, {
{ pagePath: '/pages/personal/index',
pagePath: '/pages/personal/index', iconPath: '/static/tarbar/index11.png',
iconPath: '/static/tarbar/personal1.png', selectedIconPath: '/static/tarbar/index23.png',
selectedIconPath: '/static/tarbar/personal2.png', text: '我的'
text: '我的' }
} ]
] },
}, oldSelected: 0, // 记录之前访问的索引; 值为2的时候显示遮罩
oldSelected: 0, // 记录之前访问的索引; 值为2的时候显示遮罩 isShowMask: false
isShowMask: false };
}; },
}, onLoad() {},
onLoad() {}, methods: {
methods: { setSelected(index) {
setSelected(index) { console.log(index);
console.log(index); if (index != 2) {
if (index != 2) { uni.switchTab({
uni.switchTab({ url: this.tabBar.list[index].pagePath
url: this.tabBar.list[index].pagePath });
}); } else {
} else { //扫码
this.isShowMask = true; // 允许从相机和相册扫码
} uni.scanCode({
this.$forceUpdate(); success: function (res) {
}, console.log('条码类型：' + res.scanType);
closeMask() { console.log('条码内容：' + res.result);
this.isShowMask = false; }
} });
} }
this.$forceUpdate();
},
closeMask() {
this.isShowMask = false;
}
}
}; };
</script> </script>
<style lang='scss'> <style lang="scss">
.tarbar { .tarbar {
width: 100%; width: 100%;
z-index: 9999; z-index: 9999;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
} }
.tarbar-list { .tarbar-list {
width: 100%; width: 100%;
height: 120upx; height: 120upx;
background: #4d586f; background: #4d586f;
position: fixed; position: fixed;
left: 0; left: 0;
bottom: 0; bottom: 0;
} }
.tarbar-list-ul { .tarbar-list-ul {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 20upx 50upx; padding: 20upx 50upx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
box-sizing: border-box; box-sizing: border-box;
} }
.tarbar-list-li { .tarbar-list-li {
width: 100upx; width: 100upx;
height: 80upx; height: 80upx;
} }
.tarbar-list-li-icon { .tarbar-list-li-icon {
width: 50upx; width: 46rpx;
height: 50upx; height: 46rpx;
margin: 0 auto; margin: 0 auto;
} }
.tarbar-list-li-icon image { .tarbar-list-li-icon image {
width: 50upx; width: 46rpx;
height: 50upx; height: 46rpx;
} }
.tarbar-list-li-name { .tarbar-list-li-name {
width: 100%; width: 100%;
text-align: center; text-align: center;
line-height: 30upx; line-height: 30upx;
font-size: 20upx; font-size: 20upx;
height: 30upx; height: 30upx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
margin-top: 10rpx;
} }
.tarbar-list-li-center { .tarbar-list-li-center {
width: 100upx; width: 100upx;
position: absolute;
top: -40rpx;
left: 0;
right: 0;
text-align: center;
margin: 0 auto;
} }
.tarbar-list-li-center .tarbar-list-li-icon, .tarbar-list-li-center .tarbar-list-li-icon,
.tarbar-list-li-center .tarbar-list-li-icon image { .tarbar-list-li-center .tarbar-list-li-icon image {
width: 90upx; width: 94upx;
height: 60upx; height: 94upx;
} }
</style> </style>
pages.json
View file @ 0a81ec2b
...@@ -130,11 +130,101 @@ ...@@ -130,11 +130,101 @@
"navigationBarTitleText": "商品详情" "navigationBarTitleText": "商品详情"
} }
}, },
{
"path": "pages/shop/search",
"style": {
"navigationBarTitleText": "搜索商品"
}
},
{
"path": "pages/shop/pay",
"style": {
"navigationBarTitleText": "支付"
}
},
{
"path": "pages/shop/payOk",
"style": {
"navigationBarTitleText": "支付成功"
}
},
{ {
"path": "pages/personal/index", "path": "pages/personal/index",
"style": { "style": {
"navigationBarTitleText": "我的" "app-plus": {
"titleNView": false
}
}
},
{
"path": "pages/personal/myAddress",
"style": {
"navigationBarTitleText": "我的地址"
}
},
{
"path": "pages/personal/addAddress",
"style": {
"navigationBarTitleText": "新增地址"
}
},
{
"path": "pages/personal/editAddress",
"style": {
"navigationBarTitleText": "编辑地址"
}
},
{
"path": "pages/personal/myOrder",
"style": {
"navigationBarTitleText": "我的订单"
}
}
,
{
"path": "pages/personal/orderDetail",
"style": {
"navigationBarTitleText": "订单详情"
}
}
,
{
"path": "pages/personal/carTime",
"style": {
"navigationBarTitleText": "查看物流"
}
}
,
{
"path": "pages/personal/pull",
"style": {
"navigationBarTitleText": "申请退款"
}
},
{
"path": "pages/personal/userInfo",
"style": {
"navigationBarTitleText": "编辑资料"
}
}, {
"path": "pages/personal/help",
"style": {
"navigationBarTitleText": "使用帮助"
}
},
{
"path": "pages/personal/ask",
"style": {
"navigationBarTitleText": "问题反馈"
}
},{
"path": "pages/personal/asking",
"style": {
"navigationBarTitleText": "常见问题"
} }
} }
], ],
"globalStyle": { "globalStyle": {
...@@ -151,14 +241,14 @@ ...@@ -151,14 +241,14 @@
"list": [ "list": [
{ {
"pagePath": "pages/index/index", "pagePath": "pages/index/index",
"iconPath": "static/tarbar/home1.png", "iconPath": "static/tarbar/index22.png",
"selectedIconPath": "static/tarbar/home2.png", "selectedIconPath": "static/tarbar/index5.png",
"text": "首页" "text": "首页"
}, },
{ {
"pagePath": "pages/move-car/index", "pagePath": "pages/move-car/index",
"iconPath": "static/tarbar/foodie1.png", "iconPath": "static/tarbar/index17.png",
"selectedIconPath": "static/tarbar/foodie2.png", "selectedIconPath": "static/tarbar/index24.png",
"text": "我要挪车" "text": "我要挪车"
}, },
/* /*
...@@ -170,14 +260,14 @@ ...@@ -170,14 +260,14 @@
*/ */
{ {
"pagePath": "pages/shop/index", "pagePath": "pages/shop/index",
"iconPath": "static/tarbar/discover1.png", "iconPath": "static/tarbar/index22.png",
"selectedIconPath": "static/tarbar/discover2.png", "selectedIconPath": "static/tarbar/index17.png",
"text": "精选商城" "text": "精选商城"
}, },
{ {
"pagePath": "pages/personal/index", "pagePath": "pages/personal/index",
"iconPath": "static/tarbar/personal1.png", "iconPath": "static/tarbar/index11.png",
"selectedIconPath": "static/tarbar/personal2.png", "selectedIconPath": "static/tarbar/index23.png",
"text": "我的" "text": "我的"
} }
] ]
......
pages/form2Moban.vue 0 → 100644
View file @ 0a81ec2b
<!--
* @Author: euzhi
* @Description: 领取优惠卷
-->
<template>
<div class="getPrice">
<u-gap bgColor="transparent" height="20"></u-gap>
<div class="car_info">
<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1" labelWidth="100">
<u-form-item label="收货人:" prop="userInfo.name" borderBottom ref="item1">
<u--input v-model="model1.userInfo.name" placeholder="请填写收货人姓名" border="none"></u--input>
</u-form-item>
<u-form-item label="手机号码:" prop="userInfo.name" borderBottom ref="item1">
<u--input v-model="model1.userInfo.name" placeholder="请填写收货人手机号码" border="none"></u--input>
</u-form-item>
<u-form-item label="楼号门牌:" prop="userInfo.name" ref="item1">
<u--input v-model="model1.userInfo.name" placeholder="例如 2栋3单元101室" border="none"></u--input>
</u-form-item>
</u--form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
carNumber: "",
model1: {
userInfo: {
name: "",
sex: "",
},
},
rules: {
"userInfo.name": {
type: "string",
required: true,
message: "请填写姓品牌",
trigger: ["blur", "change"],
},
},
};
},
methods: {
},
};
</script>
<style lang="scss" scoped>
.getPrice {
width: 100%;
height: 100%;
.car_info {
padding:20rpx 40rpx;
background: #fff;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 20rpx;
}
}
</style>
pages/personal/addAddress.vue 0 → 100644
View file @ 0a81ec2b
<!--
* @Author: euzhi
* @Description: 新增地址
-->
<template>
<div class="addAddress">
<u-gap bgColor="transparent" height="20"></u-gap>
<div class="car_info">
<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1" labelWidth="100">
<u-form-item label="收货人:" prop="userInfo.name" borderBottom ref="item1">
<u--input v-model="model1.userInfo.name" placeholder="请填写收货人姓名" border="none"></u--input>
</u-form-item>
<u-form-item label="手机号码:" prop="userInfo.name" borderBottom ref="item1">
<u--input v-model="model1.userInfo.name" placeholder="请填写收货人手机号码" border="none"></u--input>
</u-form-item>
<u-form-item label="收货地址:" prop="userInfo.name" borderBottom ref="item1">
<u--input v-model="model1.userInfo.name" disabled placeholder="点击选择收货地址" border="none"></u--input>
</u-form-item>
<u-form-item label="楼号门牌:" prop="userInfo.name" borderBottom ref="item1">
<u--input v-model="model1.userInfo.name" placeholder="例如 2栋3单元101室" border="none"></u--input>
</u-form-item>
<u-form-item label="设置默认地址:" prop="userInfo.name" ref="item1">
<u-switch class="del__address" v-model="model1.value" activeColor="#5ac725" @change="change"></u-switch>
</u-form-item>
</u--form>
</div>
<div class="add__tips">为保证您的商品准确送达，请填写正确的地址！</div>
<div class="love__btn" @click="add">
<image src="../../static/move-car/love-car5.png"> 新增地址
</div>
</div>
</template>
<script>
export default {
data() {
return {
carNumber: "",
model1: {
userInfo: {
name: "",
sex: "",
},
value: true
},
rules: {
"userInfo.name": {
type: "string",
required: true,
message: "请填写姓品牌",
trigger: ["blur", "change"],
},
},
};
},
methods: {
},
};
</script>
<style lang="scss" scoped>
.addAddress {
.love__btn {
height: 76rpx;
background: url('@/static/move-car/love-car4.png') no-repeat;
background-size: contain;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 76rpx;
text-align: center;
width: 670rpx;
margin: 0 auto;
margin-top: 40rpx;
image {
width: 30rpx;
height: 30rpx;
margin-right: 20rpx;
}
}
.add__tips {
padding-left: 40rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #E1251B;
line-height: 42px;
}
width: 100%;
height: 100%;
.car_info {
padding: 20rpx 40rpx;
background: #fff;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 20rpx;
/deep/ .u-form-item__body__right__content__slot {
justify-content: flex-end;
}
}
}
</style>
pages/personal/ask.vue 0 → 100644
View file @ 0a81ec2b
<!--
* @Author: euzhi
* @Description: 申请退款
-->
<template>
<div class="pull">
<div class="view__content">
<div class="view__title">
问题/意见描述
</div>
<div class="why">
<u--textarea maxlength='500' count v-model="value1" placeholder="请填写10字以上的问题描述，以便我们更好地帮 您解决问题"></u--textarea>
</div>
</div>
<div class="view__content">
<div class="view__title">
联系方式
</div>
<div class="why">
<u--textarea height='20' v-model="value2" placeholder="请填写您的手机号或邮箱，便于我们联系 您解决问题"></u--textarea>
</div>
</div>
<div class="view__btn view__no__bind">
提交
</div>
</div>
</template>
<script>
export default {
data() {
return {
value1: '',
value2:"",
};
},
methods: {
},
}
</script>
<style lang="scss" scoped>
.pull {
padding: 40rpx 40rpx;
.why {
.u-textarea {
background: #f6f6f6;
border: none;
border-radius: 12rpx;
}
}
.view__content {
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
border-radius: 20rpx;
padding: 30rpx;
margin-bottom: 30rpx;
.view__title {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
margin-bottom: 19rpx;
}
}
.view__btn {
width: 670rpx;
height: 76rpx;
text-align: center;
line-height: 76rpx;
margin: 0 auto;
font-size: 32rpx;
}
.view__no__bind {
background: url('../../static/move-car/move-car-view2.png') no-repeat;
margin-bottom: 30rpx;
background-size: contain;
color: rgba(255, 255, 255, 1);
margin-top: 60rpx;
}
.view__back {
background: url('../../static/move-car/move-car-view1.png') no-repeat;
background-size: contain;
color: rgba(153, 153, 153, 1);
}
}
</style>
pages/personal/asking.vue 0 → 100644
View file @ 0a81ec2b
<!--
* @Author: euzhi
* @Description: 常见问题
-->
<template>
<div class="asking">
<div class="title__ask">
【如何获取客户？获取客户的渠道有哪些？】
</div>
<div class="content__ask">
通过QQ、微信等及时聊天工具添加好友；
通过及时聊天工具加群，在群中添加好友；
通过行业资讯、撮合交易等网页搜索客户联系方式；
通过深度服务微小客户，由客户推荐客户；
通过QQ、微信群发器，推送好运虎广告，吸引客户；
好运虎推送的文章，定期推广，提高公司知名度，吸
引客户；
通过市场客户密集区域，搜集客户名片及需求；
通过行业协会、商会或市场展会等形式搜集客户名录；
通过参加行业群的集体活动，接洽客户。
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
}
</script>
<style lang="scss" scoped>
.asking {
padding: 40rpx;
.title__ask {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
line-height: 42rpx;
margin-bottom: 20rpx;
}
.content__ask {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
line-height: 50rpx;
}
}
</style>
pages/personal/carTime.vue 0 → 100644
View file @ 0a81ec2b
<!--
* @Author: euzhi
* @Description: 查看物流
-->
<template>
<div class="carTime">
<div class="time__content">
<div class="time__top">
<div>
<image src="../../static/shop/item.jpg" />
</div>
<div>
<div>
运输中
</div>
<div>
物流单号:3543859111977240
</div>
<div class="time__btn btn__one" @click="viewCar">
<span>复制</span>
</div>
</div>
</div>
<div class="get__car">
<div class="car__img">
<image src="../../static/my/git.png" alt="" />
</div>
<div class="one__text">
【收货地址】北京市朝阳区梨园小区2收货地址北京市朝阳区梨园小区2
</div>
</div>
<div class="time__list">
<div class="item">
<div class="item__img">
<image src="../../static/my/car-time1.png" alt="" />
</div>
<div class="one__text item__title">
到达广东深圳公司，快件将很快进行派送
<div class="time">2020-06-01 12:00:00 </div>
</div>
</div>
</div>
<div class="time__list">
<div class="item">
<div class="item__img">
<image src="../../static/my/car-time2.png" alt="" />
</div>
<div class="one__text item__title active__title">
到达广东深圳公司，快件将很快进行派送
<div class="time">2020-06-01 12:00:00 </div>
</div>
</div>
</div>
<div class="time__list">
<div class="item">
<div class="item__img">
<image src="../../static/my/car-time1.png" alt="" />
</div>
<div class="one__text item__title">
在分拨中心广东深圳公司进行卸车扫描
<div class="time">2020-06-01 12:00:00 </div>
</div>
</div>
</div>
<div class="time__list">
<div class="item">
<div class="item__img">
<image src="../../static/my/car-time1.png" alt="" />
</div>
<div class="one__text item__title">
在北京市进行下级地点扫描
<div class="time">2020-06-01 12:00:00 </div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
}
</script>
<style lang="scss" scoped>
.carTime {
padding: 40rpx 0;
.time__content {
padding: 40rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 20rpx;
.time__list {
margin-bottom: 40rpx;
.item {
display: flex;
align-items: center;
margin: 20rpx 0;
.item__img {
width: 64rpx;
height: 64rpx;
margin-right: 30rpx;
image {
width: 64rpx;
height: 64rpx;
}
}
.item__title {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
>div {
font-size: 22rpx;
font-family: DIN;
font-weight: 500;
color: #999999;
}
}
.active__title {
color: #333;
}
}
}
.time__top {
display: flex;
align-items: center;
position: relative;
padding-bottom: 40rpx;
border-bottom: 1rpx solid rgba(0, 0, 0, .1);
>div:nth-of-type(1) {
image {
width: 110rpx;
height: 110rpx;
border-radius: 10rpx;
}
}
>div:nth-of-type(2) {
margin-left: 30rpx;
>div:nth-of-type(1) {
font-size: 34rpx;
font-family: PingFang SC;
font-weight: bold;
color: #00AD42;
}
>div:nth-of-type(2) {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
}
>div:nth-of-type(3) {
position: absolute;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
border: 1rpx solid #999999;
padding: 2rpx 5rpx;
display: inline-block;
right: 0rpx;
bottom: 60rpx;
}
}
}
.get__car {
display: flex;
align-items: center;
margin: 20rpx 0;
border-bottom: 1rpx solid rgba(0, 0, 0, .1);
padding-bottom: 20rpx;
.car__img {
width: 64rpx;
height: 64rpx;
margin-right: 30rpx;
image {
width: 64rpx;
height: 64rpx;
}
}
>div:nth-of-type(2) {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
}
}
}
}
</style>
pages/personal/editAddress.vue 0 → 100644
View file @ 0a81ec2b
<!--
* @Author: euzhi
* @Description: 编辑地址
-->
<template>
<div class="editAddress">
<u-gap bgColor="transparent" height="20"></u-gap>
<div class="car_info">
<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1" labelWidth="100">
<u-form-item label="收货人:" prop="userInfo.name" borderBottom ref="item1">
<u--input v-model="model1.userInfo.name" placeholder="请填写收货人姓名" border="none"></u--input>
</u-form-item>
<u-form-item label="手机号码:" prop="userInfo.name" borderBottom ref="item1">
<u--input v-model="model1.userInfo.name" placeholder="请填写收货人手机号码" border="none"></u--input>
</u-form-item>
<u-form-item label="收货地址:" prop="userInfo.name" borderBottom ref="item1">
<u--input v-model="model1.userInfo.name" disabled placeholder="点击选择收货地址" border="none"></u--input>
</u-form-item>
<u-form-item label="楼号门牌:" prop="userInfo.name" borderBottom ref="item1">
<u--input v-model="model1.userInfo.name" placeholder="例如 2栋3单元101室" border="none"></u--input>
</u-form-item>
<u-form-item label="设置默认地址:" prop="userInfo.name" ref="item1">
<u-switch class="del__address" v-model="model1.value" activeColor="#5ac725" @change="change"></u-switch>
</u-form-item>
</u--form>
</div>
<div class="add__tips">为保证您的商品准确送达，请填写正确的地址！</div>
<div class="love__btn" @click="add">
<image src="../../static/move-car/love-car5.png"> 新增地址
</div>
<div class="view__btn view__back" @click="del">
删除该地址
</div>
</div>
</template>
<script>
export default {
data() {
return {
carNumber: "",
model1: {
userInfo: {
name: "",
sex: "",
},
value: true
},
rules: {
"userInfo.name": {
type: "string",
required: true,
message: "请填写姓品牌",
trigger: ["blur", "change"],
},
},
};
},
methods: {
del(){
uni.showModal({
title: '提示',
content: '确定删除该地址吗？',
success: (res) => {
if (res.confirm) {
//提示删除成功
uni.showToast({
title: '删除成功',
icon: 'success',
duration: 2000
});
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
}
},
};
</script>
<style lang="scss" scoped>
.editAddress {
.love__btn {
height: 76rpx;
background: url('@/static/move-car/love-car4.png') no-repeat;
background-size: contain;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 76rpx;
text-align: center;
width: 670rpx;
margin: 0 auto;
margin-top: 40rpx;
margin-bottom: 30rpx;
image {
width: 30rpx;
height: 30rpx;
margin-right: 20rpx;
}
}
.view__btn {
width: 670rpx;
height: 76rpx;
text-align: center;
line-height: 76rpx;
margin: 0 auto;
font-size: 32rpx;
}
.view__back {
background: url('../../static/move-car/move-car-view1.png') no-repeat;
background-size: contain;
color: rgba(153, 153, 153, 1);
}
.add__tips {
padding-left: 40rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #E1251B;
line-height: 42px;
}
width: 100%;
height: 100%;
.car_info {
padding: 20rpx 40rpx;
background: #fff;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 20rpx;
/deep/ .u-form-item__body__right__content__slot {
justify-content: flex-end;
}
}
}
</style>
pages/personal/help.vue 0 → 100644
View file @ 0a81ec2b
<!--
* @Author: euzhi
* @Description: 帮助使用
-->
<template>
<div class="hlep">
<image src="../../static/my/help.png" />
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.hlep{
padding:40rpx 0;
height: 1092rpx;
image{
height: 100%;
width: 750rpx;
}
}
</style>
\ No newline at end of file
pages/personal/index.vue
View file @ 0a81ec2b
This diff is collapsed.
pages/personal/myAddress.vue 0 → 100644
View file @ 0a81ec2b
<!--
* @Author: euzhi
* @Description: 我的地址
-->
<template>
<div class="myAddress">
<div class="address__content">
<div class="ress__item" v-for="(vo,inx) in 4" :key="inx">
<div class="item__top">
<span>李洁洁</span>
<span>15633233233</span>
<span>默认</span>
</div>
<div class="item__two">
<span>北京市朝阳区李家董镇太阳宫社区大 唐公寓2号楼3单元303</span>
<span @click="edit">
<image src="../../static/my/my-address1.png" />
</span>
</div>
</div>
</div>
<div class="love__btn" @click="add">
<image src="../../static/move-car/love-car5.png"> 新增地址
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
add() {
uni.navigateTo({
url: '/pages/personal/addAddress'
});
},
edit() {
uni.navigateTo({
url: '/pages/personal/editAddress'
});
}
},
}
</script>
<style lang="scss" scoped>
.myAddress {
padding: 40rpx;
.love__btn {
height: 76rpx;
background: url('@/static/move-car/love-car4.png') no-repeat;
background-size: contain;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 76rpx;
text-align: center;
image {
width: 30rpx;
height: 30rpx;
margin-right: 20rpx;
}
}
.address__content {
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 20rpx;
padding: 10rpx 30rpx;
margin-bottom: 40rpx;
.ress__item {
border-bottom: 1px solid rgba(0, 0, 0, .1);
padding: 30rpx 0;
.item__top {
margin-bottom: 20rpx;
display: flex;
align-items: center;
>span:nth-of-type(1) {
font-size: 36rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
}
>span:nth-of-type(2) {
font-size: 32rpx;
font-family: DIN;
font-weight: 500;
color: #666666;
padding: 0 28rpx;
}
>span:nth-of-type(3) {
width: 66rpx;
height: 32rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: bold;
color: #F88D28;
line-height: 32rpx;
text-align: center;
background: url('../../static/my/my-address2.png') no-repeat;
background-size: contain;
}
}
.item__two {
display: flex;
justify-content: space-between;
>span:nth-of-type(1) {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
}
>span:nth-of-type(2) {
image {
width: 28rpx;
height: 30rpx;
}
}
}
}
.ress__item:nth-last-of-type(1) {
border-bottom: none;
}
}
}
</style>
pages/personal/myOrder.vue 0 → 100644
View file @ 0a81ec2b
This diff is collapsed.
pages/personal/orderDetail.vue 0 → 100644
View file @ 0a81ec2b
<!--
* @Author: euzhi
* @Description: 订单详情
-->
<template>
<div class="orderDetail">
<div class="order__car">
<div>
<image src="../../static/my/car.png" />
</div>
<div>
<div>
运输中
</div>
<div>
到达【北京邮区邮件处理中心】
</div>
<div class="order__btn btn__one" @click="viewCar">
<span>查看物流</span>
</div>
</div>
</div>
<div class="address">
<div class="address__left">
<div class="right__title">
北京市朝阳区李家董镇太阳宫社区大唐公寓 2号楼3单元303
</div>
<div class="right__phone">
<span>默认</span> <span>我是收货人</span><span>19963353323</span>
</div>
</div>
</div>
<div class="pay__item">
<div class="item">
<div class="item__top">
<div class="top__img">
<img src="" alt="" srcset="">
</div>
<div class="top__right">
<div class="right__one one__text">
<span>强力清洗剂 大容量 标</span>
<span>￥25.5</span>
</div>
<div class="right__two">
<span>强力清洗剂 大容量 标120 ml*3瓶装</span>
<span>×4</span>
</div>
</div>
</div>
<div class="item__bottom">
<div class="bottom__item">
<div>订单编号::</div>
<div>3543859111977240</div>
</div>
<div class="bottom__item">
<div>付款时间:</div>
<div>2022-01-20 12:12:03</div>
</div>
<div class="bottom__item">
<div>商品总价:</div>
<div>￥48.00</div>
</div>
<div class="bottom__item">
<div>实付款:</div>
<div class="bottom__price">￥48.00</div>
</div>
</div>
<div class="order__btn">
<span>申请退款</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
viewCar() {
uni.navigateTo({
url: '/pages/personal/carTime'
})
}
},
}
</script>
<style lang="scss" scoped>
.orderDetail {
padding: 40rpx 0rpx;
.order__car {
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 20rpx;
display: flex;
align-items: center;
padding: 40rpx;
margin-bottom: 30rpx;
position: relative;
.btn__one{
position: absolute;
bottom: 50%;
right: 40rpx;
}
>div:nth-of-type(1) {
image {
width: 100rpx;
height: 100rpx;
background: #D2FFE3;
border-radius: 50%;
}
margin-right: 30rpx;
}
>div:nth-of-type(2) {
>div:nth-of-type(1) {
font-size: 34rpx;
font-family: PingFang SC;
font-weight: bold;
color: #00AD42;
}
>div:nth-of-type(2) {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
}
}
}
.address {
background: #ffffff;
display: flex;
align-items: center;
padding: 30rpx 40rpx;
margin-bottom: 30rpx;
.address__left {
.right__title {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
line-height: 48rpx;
margin-bottom: 20rpx;
}
.right__phone {
display: flex;
align-items: center;
span:nth-of-type(1) {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: bold;
color: #F88D28;
padding: 2rpx 4rpx;
border: 1rpx solid #F88D28;
}
span:nth-of-type(2) {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
padding: 0 14rpx;
}
span:nth-of-type(3) {
font-size: 28rpx;
font-family: DIN;
font-weight: 500;
color: #666666;
}
}
}
.address__right {
image {
width: 14rpx;
height: 24rpx;
}
}
}
.order__btn {
text-align: right;
margin-top: 30rpx;
span {
width: 180rpx;
height: 56rpx;
display: inline-block;
background: #FFFFFF;
border: 1rpx solid #DDDDDD;
border-radius: 28rpx;
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
line-height: 56rpx;
text-align: center;
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
}
.btn__two {
color: #F1251B;
border: 1rpx solid #F1251B;
margin-left: 20rpx;
}
}
.pay__item {
padding: 30rpx 40rpx;
.item {
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
border-radius: 20rpx;
padding: 30rpx;
.item__top {
display: flex;
align-items: center;
justify-content: space-between;
.top__img {
width: 120rpx;
height: 120rpx;
background: #F88D28;
border-radius: 8rpx;
}
.top__right {
.right__one {
display: flex;
align-items: center;
justify-content: space-between;
>span:nth-of-type(1) {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
width: 320rpx;
padding-right: 70rpx;
}
>span:nth-of-type(2) {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #F1251B;
}
}
.right__two {
display: flex;
align-items: center;
justify-content: space-between;
>span:nth-of-type(1) {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
width: 320rpx;
}
>span:nth-of-type(2) {
font-size: 26rpx;
font-family: DIN;
font-weight: 500;
color: #999999;
}
}
}
}
.item__bottom {
margin-top: 30rpx;
.bottom__item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30rpx;
>div:nth-of-type(1) {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
}
>div:nth-of-type(2) {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
}
.bottom__price {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #F1251B !important;
}
}
}
}
}
}
</style>
pages/personal/pull.vue 0 → 100644
View file @ 0a81ec2b
<!--
* @Author: euzhi
* @Description: 申请退款
-->
<template>
<div class="pull">
<div class="view__content">
<div class="view__item" v-for="(vo,inx) in items" :key="inx">
<div class="view__title">
{{vo.title}}
</div>
<div class="view__value">
{{vo.value}}
</div>
</div>
<div class="why">
<u--textarea v-model="value1" placeholder="地址输入错误，需重新拍下。地址输入错误，需重新拍下。地址输入错误，需重新拍下。" ></u--textarea>
</div>
<div class="view__btn view__no__bind">
提交申请
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
value1:'',
items: [{
title: "退款金额:",
value: "￥48.00"
},
{
title: "退款原因:",
value: ""
},
]
};
},
methods: {
},
}
</script>
<style lang="scss" scoped>
.pull {
padding: 40rpx 0rpx;
.why{
padding: 5rpx 40rpx;
.u-textarea{
background: #f6f6f6;
border:none;
}
}
.view__content {
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
border-radius: 20rpx;
padding-bottom: 60rpx;
.view__item {
padding: 34rpx 0rpx;
margin: 0 40rpx;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1rpx solid rgba(0, 0, 0, .1);
.view__title {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
}
.view__value {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #F1251B;
}
}
.view__item:nth-last-child(1) {
border-bottom: none !important;
}
}
.view__btn {
width: 670rpx;
height: 76rpx;
text-align: center;
line-height: 76rpx;
margin: 0 auto;
font-size: 32rpx;
}
.view__no__bind {
background: url('../../static/move-car/move-car-view2.png') no-repeat;
margin-bottom: 30rpx;
background-size: contain;
color: rgba(255, 255, 255, 1);
margin-top: 60rpx;
}
.view__back {
background: url('../../static/move-car/move-car-view1.png') no-repeat;
background-size: contain;
color: rgba(153, 153, 153, 1);
}
}
</style>
pages/personal/userInfo.vue 0 → 100644
View file @ 0a81ec2b
<!--
* @Author: euzhi
* @Description: 描述
-->
<template>
<div class="userInfo">
<div class="info__cover" @click="select">
<span class="cover__name">头像</span>
<div class="cover">
<image src="../../static/my/my2.png" />
<span>
<image src="../../static/my/my6.png" /></span>
</div>
</div>
<view class="info__content">
<active-form :formDate.sync="formData"></active-form>
</view>
</div>
</template>
<script>
export default {
data() {
return {
formData: [{
id: "kjjns", //id必须唯一 可以是数字
placeholder: "请填写",
label: "手机号", // 提示输入名
type: "text", //类型
rules: {
name: "realName", //字段名 即提交给后端的字段
value: "12563996933",
verify: false, //是否开启校验
errMess: "姓名未填写", //校验不通过的错误提示
},
},
{
id: "kjjns", //id必须唯一 可以是数字
placeholder: "请填写",
label: "昵称", // 提示输入名
type: "text", //类型
rules: {
name: "realName2", //字段名 即提交给后端的字段
value: "",
verify: false, //是否开启校验
errMess: "姓名未填写", //校验不通过的错误提示
},
},
{
id: "kjjns", //id必须唯一 可以是数字
placeholder: "请选择",
label: "性别", // 提示输入名
type: "text", //类型
rules: {
name: "realName3", //字段名 即提交给后端的字段
value: "",
verify: false, //是否开启校验
errMess: "姓名未填写", //校验不通过的错误提示
},
},
{
id: "kjjns", //id必须唯一 可以是数字
placeholder: "请选择",
label: "生日", // 提示输入名
type: "text", //类型
rules: {
name: "realName4", //字段名 即提交给后端的字段
value: "",
verify: false, //是否开启校验
errMess: "姓名未填写", //校验不通过的错误提示
},
},
],
}
},
methods: {
select() {
uni.chooseImage({
count: 6, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //从相册选择
success: function (res) {
console.log(JSON.stringify(res.tempFilePaths));
}
});
}
},
}
</script>
<style lang="scss" scoped>
.userInfo {
padding: 40rpx;
.info__cover {
height: 140rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30rpx;
.cover__name {
font-size: 32fpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
}
.cover {
display: flex;
align-items: center;
image {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}
span {
margin-left: 10rpx;
image {
width: 11rpx;
height: 18rpx;
}
}
}
}
.info__content {
margin-top: 30rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
border-radius: 20rpx;
}
}
</style>
pages/shop/detail.vue
View file @ 0a81ec2b
...@@ -14,7 +14,15 @@ ...@@ -14,7 +14,15 @@
</div> </div>
</div> </div>
<div class="shop__title__2">规格 <span>儿童数学思维训练游戏(套装共5册)</span></div> <div class="shop__title__2">规格 <span>儿童数学思维训练游戏(套装共5册)</span></div>
<div class="shop__content">
<div class="content__title">
商品详情
</div>
何秋光老师是“儿童数学思维训练”课程的创始人，既有儿童数学思维教育理论知识，又有丰富教学实践经验，本书集作者三十余年儿童数学教学、十余年儿童数学思维训练教学实践与理论研究的成果，是目前国内比较完整、系统和科学的对儿童进行数学思维训练与开发的丛书。本书于2012年首次出版，六年间加印十多次，市场认可度较好。之前五本图书分两次出版，体例有所不同，这次再版修订了之前体例不统一的问题，优化了部分题目的设计，重新编写了专家提示”的内容，对每一种类型题目的解题方法和对孩子的引导方法都做了更加详细的介绍。
</div>
</div> </div>
<div class="shop__btn view__no__bind" @click="pay">立即购买</div>
<u-gap bgColor="transparent" height="80"></u-gap>
</div> </div>
</template> </template>
...@@ -29,6 +37,13 @@ export default { ...@@ -29,6 +37,13 @@ export default {
], ],
} }
}, },
methods: {
pay(){
uni.navigateTo({
url: '/pages/shop/pay'
})
}
},
} }
</script> </script>
...@@ -95,6 +110,7 @@ export default { ...@@ -95,6 +110,7 @@ export default {
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
margin: 30rpx 0; margin: 30rpx 0;
span { span {
font-size: 30rpx; font-size: 30rpx;
font-family: PingFang SC; font-family: PingFang SC;
...@@ -103,5 +119,47 @@ export default { ...@@ -103,5 +119,47 @@ export default {
padding-left: 30rpx; padding-left: 30rpx;
} }
} }
.shop__content {
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28prx 1rpx rgba(232, 232, 232, 0.2);
border-radius: 20rpx;
padding: 40rpx 30rpx;
.content__title {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
text-align: center;
margin-bottom: 30rpx;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 42rpx;
}
}
.shop__btn {
width: 670rpx;
height: 76rpx;
text-align: center;
line-height: 76rpx;
margin: 0 auto;
font-size: 32rpx;
}
.view__no__bind {
background: url('../../static/move-car/move-car-view2.png') no-repeat;
margin-bottom: 30rpx;
background-size: contain;
color: rgba(255, 255, 255, 1);
position: fixed;
bottom: 60rpx;
left: 0;
right: 0;
margin: 0 auto;
}
} }
</style> </style>
pages/shop/index.vue
View file @ 0a81ec2b
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<view> <view>
<custom-tarbar :selected="3"></custom-tarbar> <custom-tarbar :selected="3"></custom-tarbar>
<view class="shop"> <view class="shop">
<div class="my__search"> <div class="my__search" @click='goSearch'>
<u-search placeholder="搜搜你最想知道的" :showAction='false' bgColor='#ffffff' v-model="keyword"></u-search> <u-search placeholder="搜搜你最想知道的" :showAction='false' bgColor='#ffffff' v-model="keyword"></u-search>
</div> </div>
<div class="shop__swiper"> <div class="shop__swiper">
...@@ -60,34 +60,43 @@ export default { ...@@ -60,34 +60,43 @@ export default {
], ],
} }
}, },
methods: { methods: {
goDetail() { goSearch() {
uni.navigateTo({ console.log('---');
url: '/pages/shop/detail' uni.navigateTo({
}) url: '/pages/shop/search'
} })
}, },
goDetail() {
uni.navigateTo({
url: '/pages/shop/detail'
})
}
},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.shop { .shop {
height: 100%; height: 100%;
.shop__list__one { .shop__list__one {
padding: 0 30rpx; padding: 0 30rpx;
background: #f9f9f9; background: #f9f9f9;
.list__one__items { .list__one__items {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
.one__item { .one__item {
width: 320rpx; width: 320rpx;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2); box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
border-radius: 20rpx; border-radius: 20rpx;
margin-bottom: 30rpx; margin-bottom: 30rpx;
.one__item__img { .one__item__img {
width: 320rpx; width: 320rpx;
height: 320rpx; height: 320rpx;
...@@ -97,7 +106,7 @@ export default { ...@@ -97,7 +106,7 @@ export default {
image { image {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 20rpx; border-radius: 20rpx;
} }
} }
...@@ -106,8 +115,8 @@ export default { ...@@ -106,8 +115,8 @@ export default {
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
margin: 20rpx 0; margin: 20rpx 0;
text-indent: 20rpx; text-indent: 20rpx;
} }
.one__item__price { .one__item__price {
...@@ -116,8 +125,9 @@ export default { ...@@ -116,8 +125,9 @@ export default {
font-weight: 500; font-weight: 500;
color: #E1251B; color: #E1251B;
line-height: 42rpx; line-height: 42rpx;
text-indent: 20rpx; text-indent: 20rpx;
padding-bottom: 20rpx; padding-bottom: 20rpx;
span { span {
font-size: 20rpx; font-size: 20rpx;
font-family: PingFang SC; font-family: PingFang SC;
......
pages/shop/pay.vue 0 → 100644
View file @ 0a81ec2b
<!--
* @Author: euzhi
* @Description: 支付
-->
<template>
<div class="pay">
<div class="address">
<div class="address__left">
<div class="right__title">
北京市朝阳区李家董镇太阳宫社区大唐公寓 2号楼3单元303
</div>
<div class="right__phone">
<span>默认</span> <span>我是收货人</span><span>19963353323</span>
</div>
</div>
<div class="address__right">
<image src="../../static/index/right.png" />
</div>
<u-gap bgColor="transparent" height="15"></u-gap>
</div>
<div class="pay__item">
<div class="item">
<div class="item__top">
<div class="top__img">
<img src="" alt="" srcset="">
</div>
<div class="top__right">
<div class="right__one one__text">
<span>强力清洗剂 大容量 标</span>
<span>￥25.5</span>
</div>
<div class="right__two">
<span>强力清洗剂 大容量 标120 ml*3瓶装</span>
<span>×4</span>
</div>
</div>
</div>
<div class="item__bottom">
<div class="bottom__item">
<div>商品总价:</div>
<div>￥48.00</div>
</div>
<u-gap bgColor="transparent" height="15"></u-gap>
<div class="bottom__item">
<div>总金额:</div>
<div class="bottom__price">￥48.00</div>
</div>
</div>
</div>
</div>
<div class="price__bottom">
<div class="price">
<div class="price__num">
共<span>1</span>件
</div>
<div class="price__all">
合计<span>￥48.00</span>
</div>
</div>
<div class="price__next" @click="pay">
立即支付
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
pay() {
uni.navigateTo({
url: '/pages/shop/payOk'
})
}
},
}
</script>
<style lang="scss" scoped>
.pay {
padding-top: 40rpx;
.price__bottom {
width: 100%;
height: 156rpx;
background: #FFFFFF;
box-shadow: 0rpx 8rpx 19rpx 2rpx rgba(215, 215, 215, 0.21);
border-radius: 20rpx 20rpx 0rpx 0rpx;
position: fixed;
bottom: 0;
padding: 32rpx 40rpx;
box-sizing: border-box;
clear: both;
.price {
display: flex;
align-items: center;
justify-content: space-between;
.price__num {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
span {
font-size: 32rpx;
font-family: DIN;
font-weight: 500;
color: #333333;
}
}
.price__all {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
padding-right: 250rpx;
span {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #E1251B;
}
}
}
.price__next {
width: 240rpx;
height: 98rpx;
background: url('@/static/index/border-btn.png') no-repeat;
background-size: contain;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
opacity: 0.96;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 0;
top: -10rpx;
}
}
.address {
background: #ffffff;
display: flex;
align-items: center;
padding: 30rpx 40rpx;
margin-bottom: 30rpx;
.address__left {
.right__title {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
line-height: 48rpx;
margin-bottom: 20rpx;
}
.right__phone {
display: flex;
align-items: center;
span:nth-of-type(1) {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: bold;
color: #F88D28;
padding: 2rpx 4rpx;
border: 1rpx solid #F88D28;
}
span:nth-of-type(2) {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
padding: 0 14rpx;
}
span:nth-of-type(3) {
font-size: 28rpx;
font-family: DIN;
font-weight: 500;
color: #666666;
}
}
}
.address__right {
image {
width: 14rpx;
height: 24rpx;
}
}
}
.pay__item {
padding: 30rpx 40rpx;
.item {
background: #FFFFFF;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
border-radius: 20rpx;
padding: 30rpx;
.item__top {
display: flex;
align-items: center;
justify-content: space-between;
.top__img {
width: 120rpx;
height: 120rpx;
background: #F88D28;
border-radius: 8rpx;
}
.top__right {
.right__one {
display: flex;
align-items: center;
justify-content: space-between;
>span:nth-of-type(1) {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
width: 320rpx;
padding-right: 70rpx;
}
>span:nth-of-type(2) {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #F1251B;
}
}
.right__two {
display: flex;
align-items: center;
justify-content: space-between;
>span:nth-of-type(1) {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
width: 320rpx;
}
>span:nth-of-type(2) {
font-size: 26rpx;
font-family: DIN;
font-weight: 500;
color: #999999;
}
}
}
}
.item__bottom {
margin-top: 30rpx;
.bottom__item {
display: flex;
align-items: center;
justify-content: space-between;
>div:nth-of-type(1) {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
}
>div:nth-of-type(2) {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
}
.bottom__price {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #F1251B !important;
}
}
}
}
}
}
</style>
pages/shop/payOk.vue 0 → 100644
View file @ 0a81ec2b
<!--
* @Author: euzhi
* @Description: 描述
-->
<template>
<div class="payOk">
<div class="ok__icon">
<image src="../../static/shop/pay-ok1.png" />
</div>
<div class="ok__msg">支付成功</div>
<div class="ok__tips">挪车码预计今天发货，请耐心等待</div>
<div class="ok__btn">
<div>查看订单</div>
<div>返回首页</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
}
</script>
<style lang="scss" scoped>
.payOk {
text-align: center;
padding-top: 80rpx;
.ok__icon {
text-align: center;
image {
width: 144rpx;
height: 144rpx;
}
margin-bottom: 30rpx;
}
.ok__msg {
font-size: 38rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
margin-bottom: 20rpx;
}
.ok__tips {
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
}
.ok__btn {
padding: 0 40rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 80rpx;
>div {
width: 320rpx;
height: 76rpx;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 76rpx;
text-align: center;
}
>div:nth-of-type(1) {
background: url('../../static/shop/pay-ok3.png') no-repeat;
background-size: contain;
}
>div:nth-of-type(2) {
background: url('../../static/shop/pay-ok2.png') no-repeat;
background-size: contain;
color: #999999;
}
}
}
</style>
pages/shop/search.vue 0 → 100644
View file @ 0a81ec2b
<!--
* @Author: euzhi
* @Description: 搜索商品
-->
<template>
<div class="myMoveCar">
<div class="my__search">
<u-search placeholder="请输入商品" :showAction='false' bgColor='#ffffff' v-model="keyword"></u-search>
</div>
<div class="list">
<div class="list__item" v-for="(vo,inx) in items" :key="inx">
<div class="list__img">
<!-- <image :src="vo.img" /> -->
</div>
<div class="list__money">
<div class="money__title">
<text>{{vo.title}}</text>
</div>
<div class="code__tips">
<text>{{vo.tip}}</text>
</div>
<div class="money__num">
<text class="num__one">¥{{vo.price2}}</text>
<text class="num__two">¥{{vo.price2}}</text>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
keyword: '临时挪车牌',
items: [{
title: '临时停车牌-经典样式',
tip: '静电贴材质 7.1cm*8.9cm',
price: '0.00',
price2: '19.99',
img: require('@/static/index/get-car-code1.png')
},
{
title: '临时停车牌-经典样式',
tip: '静电贴材质 7.1cm*8.9cm',
price: '0.00',
price2: '19.99',
img: require('@/static/index/get-car-code1.png')
},
{
title: '临时停车牌-经典样式',
tip: '静电贴材质 7.1cm*8.9cm',
price: '0.00',
price2: '19.99',
img: require('@/static/index/get-car-code1.png')
}
]
};
},
methods: {
goView() {
uni.navigateTo({
url: '/pages/move-car/moveCarDetail'
})
}
},
}
</script>
<style lang="scss" scoped>
.myMoveCar {
padding: 40rpx 30rpx;
.list {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
padding-top: 30rpx;
.list__item {
padding: 28rpx;
box-sizing: border-box;
width: 620rpx;
height: 220rpx;
background: #ffffff;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 20rpx;
display: flex;
align-items: center;
position: relative;
margin-bottom: 20rpx;
.list__img {
width: 160rpx;
height: 160rpx;
background: #3699ff;
border-radius: 10rpx;
position: absolute;
left: -50rpx;
border-radius: 20rpx;
}
.list__money {
margin: 0 20rpx;
margin-left: 100rpx;
.money__title {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
line-height: 42rpx;
.code__tips {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
line-height: 42rpx;
}
}
.money__num {
.num__one {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #e1251b;
line-height: 42rpx;
margin-right: 20rpx;
}
.num__two {
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
line-height: 42rpx;
}
}
}
.list__add {
position: absolute;
right: 30rpx;
bottom: 30rpx;
width: 44rpx;
height: 44rpx;
image {
width: 44rpx;
height: 44rpx;
}
}
}
}
}
</style>
static/.DS_Store
View file @ 0a81ec2b
No preview for this file type
static/public.css 0 → 100644
View file @ 0a81ec2b
.one__text{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment