hly
/
fission-star-applet-250304
generated from hly/uniapp-shop-templates
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

feat: 首页、个人分享、视频分享、群分享、文章分享;

pull/1/head
Fox-33 1 year ago
parent
86c838f77e
commit
8fabbc2c01
30 changed files with 1032 additions and 866 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +6
    -0
      api/model/index.js
  2. +10
    -0
      common.scss
  3. +5
    -19
      components/base/tabbar.vue
  4. +3
    -2
      manifest.json
  5. +19
    -16
      pages.json
  6. +0
    -260
      pages/index/cart.vue
  7. +0
    -191
      pages/index/category.vue
  8. +2
    -2
      pages/index/center.vue
  9. +49
    -374
      pages/index/index.vue
  10. +1
    -1
      pages/index/record.vue
  11. +44
    -0
      pages_order/components/formInput.vue
  12. +40
    -0
      pages_order/components/formNumberBox.vue
  13. +56
    -0
      pages_order/components/formTextarea.vue
  14. +66
    -0
      pages_order/components/formUpload.vue
  15. +186
    -0
      pages_order/record/articleSharing.vue
  16. +160
    -0
      pages_order/record/groupSharing.vue
  17. +0
    -0
      pages_order/record/orderDetail.vue
  18. +153
    -0
      pages_order/record/personalSharing.vue
  19. +0
    -0
      pages_order/record/refundsOrExchange.vue
  20. +190
    -0
      pages_order/record/videoSharing.vue
  21. +38
    -0
      pages_order/styles/pageForm.scss
  22. BIN
      static/image/tabbar/cart-a.png
  23. BIN
      static/image/tabbar/cart.png
  24. BIN
      static/image/tabbar/category-a.png
  25. BIN
      static/image/tabbar/category.png
  26. BIN
      static/image/tabbar/center-a.png
  27. BIN
      static/image/tabbar/center.png
  28. BIN
      static/image/tabbar/home-a.png
  29. BIN
      static/image/tabbar/home.png
  30. +4
    -1
      uni.scss

+ 6
- 0
api/model/index.js View File

@ -1,6 +1,12 @@
// 首页相关接口 // 首页相关接口
const api = { const api = {
submitPersonalSharing: {
url: '/index_common/updateCartNum',
method: 'POST',
auth: true,
debounce: 300,
},
} }
export default api export default api

+ 10
- 0
common.scss View File

@ -37,4 +37,14 @@
margin: 0; margin: 0;
width: 0; width: 0;
height: 0; height: 0;
}
.flex {
display: flex;
align-items: center;
justify-content: center;
}
.flex-column {
flex-direction: column;
} }

+ 5
- 19
components/base/tabbar.vue View File

@ -6,7 +6,7 @@
<view class="tabbar-icon"> <view class="tabbar-icon">
<image :src="select == item.key ? <image :src="select == item.key ?
item.selectedIconPath : item.selectedIconPath :
item.iconPath" class="tabbar-icon-image" mode="aspectFill"></image>
item.iconPath" class="tabbar-icon-image" mode="aspectFit"></image>
</view> </view>
<view class="tabbar-title"> <view class="tabbar-title">
{{ item.title }} {{ item.title }}
@ -35,27 +35,13 @@
"title": "首页", "title": "首页",
key: 'home', key: 'home',
}, },
{
"selectedIconPath": "/static/image/tabbar/category-a.png",
"iconPath": "/static/image/tabbar/category.png",
"pagePath": "/pages/index/category",
"title": "商品列表",
key: 'category',
},
{ {
"selectedIconPath": "/static/image/tabbar/order-a.png", "selectedIconPath": "/static/image/tabbar/order-a.png",
"iconPath": "/static/image/tabbar/order.png", "iconPath": "/static/image/tabbar/order.png",
"pagePath": "/pages/index/order",
"title": "订单",
"pagePath": "/pages/index/record",
"title": "分享记录",
key: 'order', key: 'order',
}, },
{
"selectedIconPath": "/static/image/tabbar/cart-a.png",
"iconPath": "/static/image/tabbar/cart.png",
"pagePath": "/pages/index/cart",
"title": "购物车",
key: 'cart',
},
{ {
"selectedIconPath": "/static/image/tabbar/center-a.png", "selectedIconPath": "/static/image/tabbar/center-a.png",
"iconPath": "/static/image/tabbar/center.png", "iconPath": "/static/image/tabbar/center.png",
@ -97,7 +83,7 @@
z-index: 999999; z-index: 999999;
bottom: 0; bottom: 0;
left: 0; left: 0;
color: #BCBCBC;
color: #CCCCCC;
.tabbar-item { .tabbar-item {
flex: 1; flex: 1;
@ -127,7 +113,7 @@
} }
.tabbar-active { .tabbar-active {
color: $uni-color !important;
color: #262626 !important;
} }
} }
} }

+ 3
- 2
manifest.json View File

@ -52,9 +52,10 @@
"quickapp" : {}, "quickapp" : {},
/* 小程序特有相关 */ /* 小程序特有相关 */
"mp-weixin" : { "mp-weixin" : {
"appid" : "wxe7ae8cbe1673834c",
"appid" : "wx77ba4c7131677a74",
"setting" : { "setting" : {
"urlCheck" : false
"urlCheck" : false,
"minified" : true
}, },
"usingComponents" : true, "usingComponents" : true,
"permission" : { "permission" : {


+ 19
- 16
pages.json View File

@ -6,13 +6,7 @@
} }
}, },
{ {
"path": "pages/index/order",
"style": {
"navigationBarTitleText": ""
}
},
{
"path": "pages/index/category",
"path": "pages/index/record",
"style": { "style": {
"navigationBarTitleText": "" "navigationBarTitleText": ""
} }
@ -22,12 +16,6 @@
"style": { "style": {
"navigationBarTitleText": "" "navigationBarTitleText": ""
} }
},
{
"path": "pages/index/cart",
"style": {
"navigationBarTitleText": ""
}
} }
], ],
"preloadRule": { "preloadRule": {
@ -38,8 +26,23 @@
}, },
"subPackages": [{ "subPackages": [{
"root": "pages_order", "root": "pages_order",
"pages": [{
"path": "order/orderDetail"
"pages": [
{
"path": "record/personalSharing"
},
{
"path": "record/videoSharing"
},
{
"path": "record/groupSharing"
},
{
"path": "record/articleSharing"
},
{
"path": "record/orderDetail"
}, },
{ {
"path": "mine/purse" "path": "mine/purse"
@ -54,7 +57,7 @@
"path": "product/productDetail" "path": "product/productDetail"
}, },
{ {
"path": "order/refundsOrExchange"
"path": "record/refundsOrExchange"
}, },
{ {
"path": "auth/wxLogin" "path": "auth/wxLogin"


+ 0
- 260
pages/index/cart.vue View File

@ -1,260 +0,0 @@
<template>
<view class="page">
<navbar/>
<view class="user">
<uv-checkbox-group
shape="circle"
v-model="checkboxValue">
<uv-swipe-action>
<view
v-for="(item, index) in list"
:key="index">
<view style="margin-top: 20rpx;"></view>
<uv-swipe-action-item
:options="options">
<view class="item">
<view class="checkbox">
<uv-checkbox
:name="item.id"
activeColor="#FA5A0A"
size="40rpx"
icon-size="35rpx"
></uv-checkbox>
</view>
<image
class="image"
src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg"
mode=""></image>
<view class="info">
<view class="title">
<view class="">
{{ item.title }}
</view>
<view class="">
<uv-number-box v-model="item.num"
@change="valChange"></uv-number-box>
</view>
</view>
<view class="unit">
规格：{{ item.unit }}
<uv-icon name="arrow-down"></uv-icon>
</view>
<view class="price">
￥<text>{{ item.price }}</text>元
</view>
</view>
</view>
</uv-swipe-action-item>
</view>
</uv-swipe-action>
</uv-checkbox-group>
<view class="action">
<view class="icon">
<image src="/static/image/cart/1.png" mode=""></image>
<view class="num">
{{ checkboxValue.length }}
</view>
</view>
<view class="price">
<view class="count">
合计
<view class="">
￥<text>{{ totalPrice }}</text>
</view>
</view>
<view class="text">
共{{ checkboxValue.length }}件，已享受更低优惠
</view>
</view>
<view class="btn">
去结算
</view>
</view>
</view>
<tabber select="cart" />
</view>
</template>
<script>
import tabber from '@/components/base/tabbar.vue'
export default {
components: {
tabber,
},
data() {
return {
value : 0,
checkboxValue : [],
options: [
{
text: '删除',
style: {
backgroundColor: '#FA5A0A'
}
},
],
list : [
{
id : 1,
title : '桌布租赁',
num : 1,
price : 299,
unit : '120*40*75【桌子尺寸】',
},
{
id : 2,
title : '桌布租赁',
num : 1,
price : 299,
unit : '120*40*75【桌子尺寸】',
},
],
}
},
computed: {
totalPrice(){
if (!this.checkboxValue.length) {
return 0
}
let price = 0
this.list.forEach(n => {
if(this.checkboxValue.includes(n.id)){
price += n.price * n.num
}
})
return price
},
},
methods: {
valChange(){
},
}
}
</script>
<style scoped lang="scss">
.page {
padding-bottom: 200rpx;
/deep/ .uv-swipe-action{
width: 100%;
}
}
.user {
.item{
background-color: #fff;
display: flex;
padding: 30rpx;
.checkbox{
display: flex;
justify-content: center;
align-items: center;
}
.image{
width: 200rpx;
height: 200rpx;
border-radius: 20rpx;
}
.info{
flex: 1;
.title{
display: flex;
padding: 10rpx 20rpx;
justify-content: space-between;
}
.unit{
font-size: 24rpx;
padding: 10rpx 20rpx;
color: #717171;
display: flex;
align-items: center;
}
.price{
color: $uni-color;
font-size: 28rpx;
padding: 10rpx 20rpx;
text{
font-size: 36rpx;
font-weight: 900;
}
}
}
}
.action{
width: 700rpx;
position: fixed;
bottom: 220rpx;
left: 25rpx;
background-color: #fff;
height: 100rpx;
border-radius: 50rpx;
box-shadow: 0 0 6rpx 6rpx #00000010;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
z-index: 999;
.icon{
position: relative;
width: 80rpx;
height: 80rpx;
margin: 0 20rpx;
image{
width: 80rpx;
height: 80rpx;
}
.num{
position: absolute;
right: 10rpx;
top: 0rpx;
background-color: $uni-color;
color: #fff;
font-size: 18rpx;
border-radius: 50%;
height: 30rpx;
width: 30rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
.price{
.count{
display: flex;
font-size: 26rpx;
align-items: center;
view{
color: $uni-color;
margin-left: 10rpx;
text{
font-size: 32rpx;
font-weight: 900;
}
}
}
.text{
font-size: 20rpx;
color: #717171;
}
}
.btn{
margin-left: auto;
background-color: $uni-color;
height: 100%;
padding: 0 50rpx;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
}
}
</style>

+ 0
- 191
pages/index/category.vue View File

@ -1,191 +0,0 @@
<template>
<view class="page">
<navbar/>
<view class="category">
<uv-vtabs
:chain="chain"
:list="category"
height="1000px"
:barItemBadgeStyle="{right:'20px',top:'12px'}"
@change="change">
<uv-vtabs-item>
<view class="category-title">
租赁
</view>
<view class="list">
<view class="item" v-for="(item,index) in list" :key="index"
@click="$utils.navigateTo('/pages_order/product/productDetail?id=123')">
<view class="item-image">
<image
:src="item.image"
mode="aspectFill"></image>
</view>
<view class="item-unit">
<text class="text">{{item.unit}}</text>
</view>
</view>
</view>
</uv-vtabs-item>
</uv-vtabs>
</view>
<tabber select="category" />
</view>
</template>
<script>
import tabber from '@/components/base/tabbar.vue'
export default {
components: {
tabber,
},
data() {
return {
category: [
{
name : '桌布'
},
{
name : '桌布'
},
{
name : '桌布'
},
],
list : [
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
],
chain: false,
value: 0
}
},
computed: {
list2() {
const _list = this.list[this.value]?.childrens;
return _list ? _list : [];
}
},
onReady() {
},
methods: {
change(index) {
console.log('选项改变：', index)
this.value = index;
}
}
}
</script>
<style scoped lang="scss">
.page{
/deep/ .uv-vtabs{
height: calc(100vh - 360rpx) !important;
}
/deep/ .uv-vtabs__bar{
height: calc(100vh - 360rpx) !important;
}
/deep/ .uv-vtabs__content{
height: calc(100vh - 360rpx) !important;
}
}
.category {
font-size: 30rpx;
color: #333;
.category-title{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 120rpx;
&::before,
&::after {
position: absolute;
top: 50%;
content: '';
width: 10%;
border-top: 2rpx solid black;
}
&::before {
left: 25%;
}
&::after {
right: 25%;
}
}
.list{
display: flex;
flex-wrap: wrap;
margin: 0 auto;
width: 490rpx;
.item {
padding: 10rpx 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 20rpx;
.item-image {
width: 120rpx;
height: 120rpx;
image{
height: 100%;
width: 100%;
border-radius: 50%;
}
}
.item-unit {
font-size: 24rpx;
margin-top: 15rpx;
color: #555;
}
}
.gap {
padding: 0 30rpx;
}
}
}
</style>

+ 2
- 2
pages/index/center.vue View File

@ -82,12 +82,12 @@
<text class="grid-text">订单管理</text> <text class="grid-text">订单管理</text>
</uv-grid-item> </uv-grid-item>
<uv-grid-item @click="$utils.navigateTo('/pages_order/order/refundsOrExchange?index='+0)">
<uv-grid-item @click="$utils.navigateTo('/pages_order/record/refundsOrExchange?index='+0)">
<image class="image" src="/static/image/center/5.png" mode=""></image> <image class="image" src="/static/image/center/5.png" mode=""></image>
<text class="grid-text">换货</text> <text class="grid-text">换货</text>
</uv-grid-item> </uv-grid-item>
<uv-grid-item @click="$utils.navigateTo('/pages_order/order/refundsOrExchange?index='+1)">
<uv-grid-item @click="$utils.navigateTo('/pages_order/record/refundsOrExchange?index='+1)">
<image class="image" src="/static/image/center/7.png" mode=""></image> <image class="image" src="/static/image/center/7.png" mode=""></image>
<text class="grid-text">退货</text> <text class="grid-text">退货</text>
</uv-grid-item> </uv-grid-item>


+ 49
- 374
pages/index/index.vue View File

@ -1,411 +1,86 @@
<template> <template>
<view class="page"> <view class="page">
<navbar/>
<view class="search">
<view @click="showSelectArea" class="left-area">
<image src="@/static/image/home/address-icon.png"></image>
<view class="area">{{ area }}</view>
<image src="@/static/image/home/arrow-icon.png" mode="aspectFit"></image>
<view class="parting-line">|</view>
</view>
<view class="center-area">
<image
style="margin-right: 20rpx;"
src="@/static/image/home/search-icon.png"></image>
<input v-model="queryParams.title"
placeholder="桌布租赁" />
</view>
<!-- <view class="right-area">
<view @click="searchAddress" class="search-button">
搜索
</view>
</view> -->
<navbar title="首页" bgColor="#001137" color="#FFFFFF" />
<view class="btns">
<button
v-for="item in list"
:key="item.title"
class="btn"
plain
@click="$utils.navigateTo(item.path)"
>
{{ item.title }}
</button>
</view> </view>
<view class="swipe">
<uv-swiper
:list="bannerList"
indicator
height="320rpx"
keyName="url"></uv-swiper>
</view>
<!-- 水洗店 -->
<view class="userShop"
v-if="userShop">
<view class="list">
<view class="item"
v-for="(item, index) in 4"
:key="index">
<view class="">
<view class="">
我的客户
</view>
<view class="num">
{{ 30 }}
</view>
</view>
<view class="">
<image :src="`/static/image/home/${index}.png`" mode=""></image>
</view>
</view>
</view>
</view>
<!-- 酒店 -->
<view class="user"
v-else>
<uv-notice-bar
fontSize="28rpx"
:text="text"></uv-notice-bar>
<view class="shop">
<image
class="image"
src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg"
mode=""></image>
<view class="shopInfo">
<view class="title">
HOUS水洗店
</view>
<view class="tags">
<view class="tag">
桌布水洗
</view>
<view class="tag">
桌布租赁
</view>
</view>
<view class="time">
9:00-18:00
</view>
<view class="address">
长沙市天心区桂花坪街道231号
</view>
</view>
<view class="btns">
<view class="btn"
@click="$utils.navigateTo('/pages_order/auth/wxUserInfo')">
我要水洗
</view>
</view>
<view class="tips">
关联门店：主信门店
</view>
</view>
<view class="productList">
<productList/>
</view>
</view>
<!-- <selectArea ref="selectArea" @close="closeAreaPro" @select="selectArea"></selectArea> -->
<PrivacyAgreementPoup/>
<tabber select="home"/> <tabber select="home"/>
</view> </view>
</template> </template>
<script> <script>
import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue'
import Position from '@/utils/position.js'
import tabber from '@/components/base/tabbar.vue' import tabber from '@/components/base/tabbar.vue'
import productList from '@/components/user/productList.vue'
import { mapGetters } from 'vuex'
// import selectArea from '../../components/selectArea.vue';
export default { export default {
components : { components : {
tabber, tabber,
productList,
PrivacyAgreementPoup,
}, },
data() { data() {
return { return {
area: '长沙',
text : '长沙市刘师傅在服务过程中客户投诉“服务过程中有不文明的行为”.....',
queryParams: {
pageNo: 1,
pageSize: 10,
title: ''
},
bannerList: [
list: [
{
title: '个人分享',
path: '/pages_order/record/personalSharing'
},
{ {
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
},
title: '视频分享',
path: '/pages_order/record/videoSharing'
},
{ {
url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
},
title: '群分享',
path: '/pages_order/record/groupSharing'
},
{ {
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
title: '文章分享',
path: '/pages_order/record/articleSharing'
}, },
],
productList: [],
]
} }
}, },
computed : {
...mapGetters(['userShop']),
},
methods: {
//显示选择地区
showSelectArea() {
// this.$refs.selectArea.open()
},
//搜索地址
searchAddress() {
Position.getLocation(res => {
Position.selectAddress(res.longitude, res.latitude, success => {
let address = this.extractProvinceAndCity(success)
this.queryParams.title = address.city
})
})
},
//提取用户选择的地址信息(省市县信息)
extractProvinceAndCity(res) { //提取用户选择的地址信息(省市)
if (!res.address && res.name) { //用户直接选择城市的逻辑
return {
province: '',
city: res.name
};
}
if (res.address) { //用户选择了详细地址，要从详细地址中提取出省市县信息
// 使用正则表达式匹配省市县
const regex = /(?<province>[\u4e00-\u9fa5]+?省)(?<city>[\u4e00-\u9fa5]+?(?:市|自治州|盟|地区))/;
const match = res.address.match(regex);
if (match) { // 如果匹配成功，则返回省和市的信息
return {
province: match.groups.province,
city: match.groups.city
};
}
}
return { //用户没选择地址就点了确定按钮
province: '',
city: ''
}
},
}
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.search {
height: 82rpx;
width: 710rpx;
background: #FFFFFF;
margin: 20rpx auto;
border-radius: 41rpx;
box-sizing: border-box;
padding: 0 15rpx;
display: flex;
align-items: center;
// justify-content: space-between;
.left-area,
.center-area {
display: flex;
align-items: center;
}
.left-area {
max-width: 160rpx;
image {
flex-shrink: 0;
width: 26rpx;
height: 26rpx;
}
.area {
font-size: 24rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
/* 限制显示两行 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
color: #292929;
}
.parting-line {
flex-shrink: 0;
font-size: 26rpx;
color: #ccc;
margin: 0rpx 5rpx;
}
}
.center-area {
display: flex;
flex-wrap: nowrap;
align-items: center;
width: calc(100% - 290rpx);
margin-left: 30rpx;
image {
width: 26rpx;
height: 26rpx;
}
.van-field {
background-color: transparent;
box-sizing: border-box;
height: 82rpx;
line-height: 82rpx;
width: calc(100% - 30rpx);
padding: 0rpx 10rpx 0rpx 0rpx;
input {
height: 82rpx;
font-size: 60rpx;
}
}
}
.right-area {
.search-button {
background: #60BDA2;
height: 60rpx;
width: 130rpx;
font-size: 26rpx;
border-radius: 35rpx;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.swipe{
overflow: hidden;
border-radius: 20rpx;
margin: 20rpx;
}
.page{ .page{
& /deep/ .uv-icon__icon{ & /deep/ .uv-icon__icon{
font-size: 30rpx !important; font-size: 30rpx !important;
} }
position: relative;
// 水洗店
.userShop{
.list{
display: flex;
flex-wrap: wrap;
.item{
display: flex;
justify-content: center;
align-items: center;
width: 330rpx;
margin: 20rpx;
padding: 30rpx 0;
color: #FFFFFF;
line-height: 50rpx;
border-radius: 20rpx;
font-size: 28rpx;
.num{
font-size: 38rpx;
font-weight: 900;
}
image{
width: 110rpx;
height: 110rpx;
margin-left: 20rpx;
}
&:nth-child(1){
background: #F07A77;
}
&:nth-child(2){
background: #F48B4E;
}
&:nth-child(3){
background: #6487E1;
}
&:nth-child(4){
background: #61B7E6;
}
}
}
height: 100vh;
background-color: $uni-bg-color-highlight;
.btns {
display: grid;
grid-column-gap: 34rpx;
grid-row-gap: 34rpx;
grid-template-columns: repeat(2, 1fr);
position: absolute;
bottom: 466rpx;
width: 100%;
padding: 0 58rpx;
box-sizing: border-box;
} }
// 酒店
.user{
padding: 20rpx;
.shop{
position: relative;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
margin-top: 20rpx;
border-radius: 20rpx;
padding: 20rpx;
overflow: hidden;
.image{
width: 180rpx;
height: 180rpx;
margin-right: 20rpx;
border-radius: 20rpx;
}
.shopInfo{
font-size: 22rpx;
.title{
font-size: 30rpx;
}
.tags{
display: flex;
.tag{
padding: 4rpx 6rpx;
border: 1rpx solid #FFAC6E;
color: #FFAC6E;
margin-right: 10rpx;
margin-top: 10rpx;
font-size: 18rpx;
}
}
.time{
margin-top: 10rpx;
display: flex;
}
.address{
margin-top: 10rpx;
display: flex;
}
}
.btns{
margin-left: auto;
display: flex;
align-items: center;
justify-content: center;
.btn{
background-color: $uni-color;
color: #fff;
box-shadow: 0 0 5rpx 5rpx #FFAC6E;
padding: 10rpx 20rpx;
flex-shrink: 0;
border-radius: 35rpx;
}
}
.tips{
position: absolute;
top: 0;
right: 0;
font-size: 24rpx;
color: #FFAC6E;
background-color: #FEF5EE;
padding: 10rpx 20rpx;
border-radius: 10rpx;
}
}
.btn {
color: $uni-text-color-highlight;
border-color: #04D6A3;
width: 100%;
padding: 55rpx 0;
} }
} }


pages/index/order.vue → pages/index/record.vue View File

@ -167,7 +167,7 @@
//跳转订单详情页面 //跳转订单详情页面
toOrderDetail(id) { toOrderDetail(id) {
uni.navigateTo({ uni.navigateTo({
url: '/pages_order/order/orderDetail?id=' + id
url: '/pages_order/record/orderDetail?id=' + id
}) })
}, },
getOrderList(){ getOrderList(){

+ 44
- 0
pages_order/components/formInput.vue View File

@ -0,0 +1,44 @@
<template>
<uv-input
:value="value"
@input="$emit('input', value)"
:placeholder="placeholder"
:placeholderStyle="{
color: '#999999',
fontSize: '28rpx',
}"
:customStyle="{
backgroundColor: '#F3F3F3',
width,
height: '60rpx',
padding: '16rpx 20rpx',
boxSizing: 'border-box',
fontSize: '28rpx',
borderRadius: '30rpx',
border: 'none',
}"
></uv-input>
</template>
<script>
export default {
props: {
value: {
default: null
},
placeholder: {
type: String,
default: '请输入'
},
width: {
type: String,
default: 'auto',
}
},
data() {
return {
}
},
}
</script>

+ 40
- 0
pages_order/components/formNumberBox.vue View File

@ -0,0 +1,40 @@
<template>
<view class="number-box">
<uv-number-box
:value="value"
@input="$emit('input', value)"
:min="1"
integer
button-size="60rpx"
bgColor="#F3F3F3"
color="#000000"
></uv-number-box>
</view>
</template>
<script>
export default {
props: {
value: {
default: null
},
min: {
type: Number,
default: 1,
}
},
data() {
return {
}
},
}
</script>
<style scoped lang="scss">
.number-box {
background-color: #F3F3F3;
border-radius: 30rpx;
overflow: hidden;
}
</style>

+ 56
- 0
pages_order/components/formTextarea.vue View File

@ -0,0 +1,56 @@
<template>
<uv-textarea
:value="value"
@input="$emit('input', value)"
:placeholder="placeholder"
:count="count"
:maxlength="maxlength"
height="187rpx"
border="none"
:customStyle="{
backgroundColor: '#F4F6F8',
borderRadius: '12rpx',
}"
:placeholderStyle="{
color: '#999999',
fontSize: '28rpx',
}"
:countStyle="{
backgroundColor: 'transparent',
color: '#999999',
fontSize: '28rpx',
}"
></uv-textarea>
</template>
<script>
export default {
props: {
value: {
default: null
},
placeholder: {
type: String,
default: '请输入'
},
count: {
type: Boolean,
default: true,
},
maxlength: {
type: Number,
default: 200,
}
},
data() {
return {
}
},
methods: {
},
}
</script>
<style scoped lang="scss">
</style>

+ 66
- 0
pages_order/components/formUpload.vue View File

@ -0,0 +1,66 @@
<template>
<view>
<uv-upload
:fileList="fileList"
:multiple="multiple"
:maxCount="maxCount"
:width="width"
:height="height"
@afterRead="afterRead"
@delete="deleteFile"
>
<slot :value="value"></slot>
</uv-upload>
</view>
</template>
<script>
export default {
props: {
value: {
default: null
},
multiple: {
type: Boolean,
default: false,
},
maxCount: {
type: Number,
default: 1,
},
width: {
type: Number | String,
default: null,
},
height: {
type: Number | String,
default: null,
},
},
data() {
return {
fileList: [],
}
},
methods: {
deleteFile(){
this.fileList = []
this.$emit('input', null)
},
afterRead(e){
let self = this
e.file.forEach(file => {
self.$Oss.ossUpload(file.url).then(url => {
self.fileList = [url]
self.$emit('input', url)
})
})
},
},
}
</script>
<style scoped lang="scss">
</style>

+ 186
- 0
pages_order/record/articleSharing.vue View File

@ -0,0 +1,186 @@
<template>
<view class="page">
<navbar title="文章分享" leftClick @leftClick="$utils.navigateBack" />
<view class="content">
<uv-form
ref="form"
:model="form"
:rules="rules"
labelPosition="left"
labelWidth="300rpx"
:labelStyle="{
color: '#1B1B1B',
fontSize: '32rpx',
fontWeight: 'bold',
}"
>
<view class="form-item">
<uv-form-item label="用户ID" prop="id">
<view class="form-item-content">
<template v-if="form.id">
<text>{{ form.id }}</text>
<view style="margin-left: 20rpx;">
<button class="btn-simple" plain @click="$utils.copyText(form.id)">
<uv-icon name="file-text" color="#05D9A2" size="28rpx"></uv-icon>
</button>
</view>
</template>
</view>
</uv-form-item>
</view>
<view class="form-item">
<uv-form-item label="选择封面图" prop="imageUrl">
<view class="form-item-content">
<formUpload v-model="form.imageUrl">
<template v-slot="{ value }">
<view class="flex" style="min-width: 116rpx; height: 45rpx;">
<image
:src="value"
mode="aspectFill"
style="width: 68rpx; height: 68rpx;"
radius="14rpx"
/>
<uv-icon style="margin-left: 20rpx" name="arrow-right" color="#000000" size="28rpx"></uv-icon>
</view>
</template>
</formUpload>
</view>
</uv-form-item>
</view>
<view class="form-item">
<uv-form-item label="标题" labelWidth="84rpx" prop="title">
<view class="form-item-content">
<formInput v-model="form.title" placeholder="请输入你的文章标题" width="584rpx"></formInput>
</view>
</uv-form-item>
</view>
<view class="form-item">
<uv-form-item label="设置转发次数（次）" prop="times">
<view class="form-item-content">
<formNumberBox v-model="form.times" ></formNumberBox>
</view>
</uv-form-item>
</view>
<view class="form-item">
<uv-form-item label="选择二维码" prop="qrCode">
<view class="form-item-content">
<formUpload v-model="form.qrCode">
<template v-slot="{ value }">
<view class="flex" style="min-width: 93rpx; height: 45rpx;">
<image
:src="value"
mode="aspectFill"
style="width: 45rpx; height: 45rpx;"
radius="14rpx"
/>
<uv-icon style="margin-left: 20rpx" name="arrow-right" color="#000000" size="28rpx"></uv-icon>
</view>
</template>
</formUpload>
</view>
</uv-form-item>
</view>
<view class="form-item">
<uv-form-item label="文章内容" prop="description" labelPosition="top">
<view style="margin-top: 32rpx;">
<editor id="editor" class="editor"
@ready="onEditorReady"
></editor>
<button @click="insertImage" class="btn-insert-image">
<uv-icon name="plus" color="#707070" size="48rpx"></uv-icon>
</button>
</view>
</uv-form-item>
</view>
</uv-form>
</view>
<button class="button-submit" @click="onSubmit">
提交审核
</button>
</view>
</template>
<script>
import formInput from '../components/formInput.vue'
import formNumberBox from '../components/formNumberBox.vue'
import formUpload from '../components/formUpload.vue'
import formTextarea from '../components/formTextarea.vue'
export default {
components: {
formInput,
formNumberBox,
formUpload,
formTextarea,
},
data() {
return {
form: {
id: null,
imageUrl: null,
title: null,
times: 10,
qrCode: null,
description: null,
},
rules: {
// todo
},
editorCtx: null,
}
},
methods: {
onEditorReady() {
uni.createSelectorQuery().select('#editor').context((res) => {
this.editorCtx = res.context
}).exec()
},
insertImage() {
uni.chooseImage({
count: 1,
success: (res) => {
this.editorCtx.insertImage({
src: res.tempFilePaths[0],
alt: '图像',
})
}
})
},
onSubmit() {
// todo
const params = { ...this.form }
this.$api('submitPersonalSharing', params)
},
}
}
</script>
<style scoped lang="scss">
@import '../styles/pageForm.scss';
.editor {
height: 411rpx;
}
.btn-simple {
width: auto;
height: auto;
border: none;
box-shadow: none;
padding: 0;
}
.button-submit {
margin: 0;
position: fixed;
bottom: 138rpx;
left: 20rpx;
width: calc(100% - 40rpx);
height: 90rpx;
}
</style>

+ 160
- 0
pages_order/record/groupSharing.vue View File

@ -0,0 +1,160 @@
<template>
<view class="page">
<navbar title="群分享" leftClick @leftClick="$utils.navigateBack" />
<view class="content">
<uv-form
ref="form"
:model="form"
:rules="rules"
labelPosition="left"
labelWidth="300rpx"
:labelStyle="{
color: '#1B1B1B',
fontSize: '32rpx',
fontWeight: 'bold',
}"
>
<view class="form-item">
<uv-form-item label="用户ID" prop="id">
<view class="form-item-content">
<template v-if="form.id">
<text>{{ form.id }}</text>
<view style="margin-left: 20rpx;">
<button class="btn-simple" plain @click="$utils.copyText(form.id)">
<uv-icon name="file-text" color="#05D9A2" size="28rpx"></uv-icon>
</button>
</view>
</template>
</view>
</uv-form-item>
</view>
<view class="form-item">
<uv-form-item label="群名称" labelWidth="105rpx" prop="groupName">
<view class="form-item-content">
<formInput v-model="form.groupName" placeholder="请输入你的群名称" width="540rpx"></formInput>
</view>
</uv-form-item>
</view>
<view class="form-item">
<uv-form-item label="选择群封面图" prop="imageUrl">
<view class="form-item-content">
<formUpload v-model="form.imageUrl">
<template v-slot="{ value }">
<view class="flex" style="min-width: 116rpx; height: 45rpx;">
<image
:src="value"
mode="aspectFill"
style="width: 68rpx; height: 68rpx;"
radius="14rpx"
/>
<uv-icon style="margin-left: 20rpx" name="arrow-right" color="#000000" size="28rpx"></uv-icon>
</view>
</template>
</formUpload>
</view>
</uv-form-item>
</view>
<view class="form-item">
<uv-form-item label="群人数（人）" prop="peopleNumber">
<view class="form-item-content">
<formNumberBox v-model="form.peopleNumber" :min="3" ></formNumberBox>
</view>
</uv-form-item>
</view>
<view class="form-item">
<uv-form-item label="设置转发次数（次）" prop="times">
<view class="form-item-content">
<formNumberBox v-model="form.times" ></formNumberBox>
</view>
</uv-form-item>
</view>
<view class="form-item">
<uv-form-item label="选择二维码" prop="qrCode">
<view class="form-item-content">
<formUpload v-model="form.qrCode">
<template v-slot="{ value }">
<view class="flex" style="min-width: 93rpx; height: 45rpx;">
<image
:src="value"
mode="aspectFill"
style="width: 45rpx; height: 45rpx;"
radius="14rpx"
/>
<uv-icon style="margin-left: 20rpx" name="arrow-right" color="#000000" size="28rpx"></uv-icon>
</view>
</template>
</formUpload>
</view>
</uv-form-item>
</view>
</uv-form>
</view>
<button class="button-submit" @click="onSubmit">
提交审核
</button>
</view>
</template>
<script>
import formInput from '../components/formInput.vue'
import formNumberBox from '../components/formNumberBox.vue'
import formUpload from '../components/formUpload.vue'
import formTextarea from '../components/formTextarea.vue'
export default {
components: {
formInput,
formNumberBox,
formUpload,
formTextarea,
},
data() {
return {
form: {
id: null,
groupName: null,
imageUrl: null,
peopleNumber: 200,
times: 10,
qrCode: null,
},
rules: {
// todo
},
}
},
methods: {
onSubmit() {
// todo
const params = { ...this.form }
this.$api('submitPersonalSharing', params)
},
}
}
</script>
<style scoped lang="scss">
@import '../styles/pageForm.scss';
.btn-simple {
width: auto;
height: auto;
border: none;
box-shadow: none;
padding: 0;
}
.button-submit {
margin: 0;
position: fixed;
bottom: 138rpx;
left: 20rpx;
width: calc(100% - 40rpx);
height: 90rpx;
}
</style>

pages_order/order/orderDetail.vue → pages_order/record/orderDetail.vue View File


+ 153
- 0
pages_order/record/personalSharing.vue View File

@ -0,0 +1,153 @@
<template>
<view class="page">
<navbar title="个人分享" leftClick @leftClick="$utils.navigateBack" />
<view class="content">
<uv-form
ref="form"
:model="form"
:rules="rules"
labelPosition="left"
labelWidth="300rpx"
:labelStyle="{
color: '#1B1B1B',
fontSize: '32rpx',
fontWeight: 'bold',
}"
>
<view class="form-item">
<uv-form-item label="用户ID" prop="id">
<view class="form-item-content">
<template v-if="form.id">
<text>{{ form.id }}</text>
<view style="margin-left: 20rpx;">
<button class="btn-simple" plain @click="$utils.copyText(form.id)">
<uv-icon name="file-text" color="#05D9A2" size="28rpx"></uv-icon>
</button>
</view>
</template>
</view>
</uv-form-item>
</view>
<view class="form-item">
<uv-form-item label="选择封面图" prop="imageUrl">
<view class="form-item-content">
<formUpload v-model="form.imageUrl">
<template v-slot="{ value }">
<view class="flex" style="min-width: 116rpx; height: 45rpx;">
<image
:src="value"
mode="aspectFill"
style="width: 68rpx; height: 68rpx;"
radius="14rpx"
/>
<uv-icon style="margin-left: 20rpx" name="arrow-right" color="#000000" size="28rpx"></uv-icon>
</view>
</template>
</formUpload>
</view>
</uv-form-item>
</view>
<view class="form-item">
<uv-form-item label="设置转发次数（次）" prop="times">
<view class="form-item-content">
<formNumberBox v-model="form.times" ></formNumberBox>
</view>
</uv-form-item>
</view>
<view class="form-item">
<uv-form-item label="选择二维码" prop="qrCode">
<view class="form-item-content">
<formUpload v-model="form.qrCode">
<template v-slot="{ value }">
<view class="flex" style="min-width: 93rpx; height: 45rpx;">
<image
:src="value"
mode="aspectFill"
style="width: 45rpx; height: 45rpx;"
radius="14rpx"
/>
<uv-icon style="margin-left: 20rpx" name="arrow-right" color="#000000" size="28rpx"></uv-icon>
</view>
</template>
</formUpload>
</view>
</uv-form-item>
</view>
<view class="form-item">
<uv-form-item label="文案描述" prop="description" labelPosition="top">
<view style="margin-top: 32rpx;">
<formTextarea
v-model="form.description"
placeholder="请输入你的文案"
></formTextarea>
</view>
</uv-form-item>
</view>
</uv-form>
</view>
<button class="button-submit" @click="onSubmit">
提交审核
</button>
</view>
</template>
<script>
import formNumberBox from '../components/formNumberBox.vue'
import formUpload from '../components/formUpload.vue'
import formTextarea from '../components/formTextarea.vue'
export default {
components: {
formNumberBox,
formUpload,
formTextarea,
},
data() {
return {
form: {
id: null,
imageUrl: null,
times: 10,
qrCode: null,
description: null,
},
rules: {
// todo
},
}
},
methods: {
onSubmit() {
// todo
const params = { ...this.form }
this.$api('submitPersonalSharing', params)
},
}
}
</script>
<style scoped lang="scss">
@import '../styles/pageForm.scss';
.btn-simple {
width: auto;
height: auto;
border: none;
box-shadow: none;
padding: 0;
}
.button-submit {
margin: 0;
position: fixed;
bottom: 138rpx;
left: 20rpx;
width: calc(100% - 40rpx);
height: 90rpx;
}
</style>

pages_order/order/refundsOrExchange.vue → pages_order/record/refundsOrExchange.vue View File


+ 190
- 0
pages_order/record/videoSharing.vue View File

@ -0,0 +1,190 @@
<template>
<view class="page">
<navbar title="视频分享" leftClick @leftClick="$utils.navigateBack" />
<view class="content">
<uv-form
ref="form"
:model="form"
:rules="rules"
labelPosition="left"
labelWidth="340rpx"
:labelStyle="{
color: '#1B1B1B',
fontSize: '32rpx',
fontWeight: 'bold',
}"
>
<view class="flex upload__view">
<view class="upload upload-cover">
<uv-form-item labelWidth="0" prop="coverImageUrl">
<formUpload v-model="form.coverImageUrl">
<template v-slot="{ value }">
<!-- todo: 默认 -->
<image
:src="value"
mode="aspectFill"
style="width: 344rpx; height: 344rpx;"
radius="14rpx"
/>
</template>
</formUpload>
<view class="upload-cover-text flex">设置封面</view>
</uv-form-item>
</view>
<view class="upload upload-video">
<uv-form-item labelWidth="0" prop="videoUrl">
<formUpload v-model="form.videoUrl">
<template v-slot="{ value }">
<image v-if="value"
:src="form.videoUrl"
mode="aspectFill"
style="width: 344rpx; height: 344rpx;"
radius="14rpx"
/>
<view v-else class="flex flex-column" style="width: 344rpx; height: 344rpx;">
<uv-icon name="camera" color="#000000" size="129rpx"></uv-icon>
<text class="upload-video-text">上传视频</text>
</view>
</template>
</formUpload>
</uv-form-item>
</view>
</view>
<view class="form-item">
<uv-form-item label="标题" labelWidth="84rpx" prop="title">
<view class="form-item-content">
<formInput v-model="form.title" placeholder="请输入你的视频名称" width="584rpx"></formInput>
</view>
</uv-form-item>
</view>
<view class="form-item">
<uv-form-item label="设置广告弹出时间（s）" prop="mins">
<view class="form-item-content">
<formNumberBox v-model="form.mins" ></formNumberBox>
</view>
</uv-form-item>
</view>
<view class="form-item">
<uv-form-item label="设置转发次数（次）" prop="times">
<view class="form-item-content">
<formNumberBox v-model="form.times" ></formNumberBox>
</view>
</uv-form-item>
</view>
<view class="form-item">
<uv-form-item label="选择二维码" prop="qrCode">
<view class="form-item-content">
<formUpload v-model="form.qrCode">
<template v-slot="{ value }">
<view class="flex" style="min-width: 93rpx; height: 45rpx;">
<image
:src="value"
mode="aspectFill"
style="width: 45rpx; height: 45rpx;"
radius="14rpx"
/>
<uv-icon style="margin-left: 20rpx" name="arrow-right" color="#000000" size="28rpx"></uv-icon>
</view>
</template>
</formUpload>
</view>
</uv-form-item>
</view>
<view class="form-item">
<uv-form-item label="视频描述" prop="description" labelPosition="top">
<view style="margin-top: 32rpx;">
<formTextarea
v-model="form.description"
placeholder="请描述你的视频"
></formTextarea>
</view>
</uv-form-item>
</view>
</uv-form>
</view>
<button class="button-submit" @click="onSubmit">
提交审核
</button>
</view>
</template>
<script>
import formUpload from '../components/formUpload.vue'
import formInput from '../components/formInput.vue'
import formNumberBox from '../components/formNumberBox.vue'
import formTextarea from '../components/formTextarea.vue'
export default {
components: {
formUpload,
formInput,
formNumberBox,
formTextarea,
},
data() {
return {
form: {
title: null,
coverImageUrl: null,
videoUrl: null,
mins: 2,
times: 10,
qrCode: null,
description: null,
},
rules: {
// todo
},
}
},
methods: {
onSubmit() {
// todo
const params = { ...this.form }
this.$api('submitPersonalSharing', params)
},
}
}
</script>
<style scoped lang="scss">
@import '../styles/pageForm.scss';
.upload__view {
justify-content: space-between;
margin-bottom: 20rpx;
}
.upload {
background-color: $uni-fg-color;
border-radius: 12rpx;
overflow: hidden;
}
.upload-video {
&-text {
color: #1B1B1B;
font-size: 32rpx;
}
}
.upload-cover {
position: relative;
&-text {
position: absolute;
bottom: 0;
width: 100%;
background-color: rgba($color: #000000, $alpha: 0.6);
color: #FFFFFF;
padding: 21rpx 0;
}
}
</style>

+ 38
- 0
pages_order/styles/pageForm.scss View File

@ -0,0 +1,38 @@
.page {
background-color: $uni-bg-color;
}
.content {
padding: 20rpx;
}
.form {
&-item {
background-color: #FFFFFF !important;
border-radius: 14rpx;
padding: 0 20rpx;
& + & {
margin-top: 20rpx;
}
&-content {
min-height: 62rpx;
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 28rpx;;
color: #999999;
}
}
}
.button-submit {
width: calc(100% - 40rpx);
height: 90rpx;
margin: 20rpx;
background-color: $uni-bg-color-highlight;
color: $uni-text-color-highlight;
font-size: 36rpx;
border-radius: 45rpx;
}

BIN
static/image/tabbar/cart-a.png View File

Before After
Width: 40  |  Height: 40  |  Size: 958 B

BIN
static/image/tabbar/cart.png View File

Before After
Width: 40  |  Height: 40  |  Size: 953 B

BIN
static/image/tabbar/category-a.png View File

Before After
Width: 40  |  Height: 40  |  Size: 1.1 KiB

BIN
static/image/tabbar/category.png View File

Before After
Width: 40  |  Height: 40  |  Size: 1.2 KiB

BIN
static/image/tabbar/center-a.png View File

Before After
Width: 40  |  Height: 40  |  Size: 915 B Width: 30  |  Height: 38  |  Size: 864 B

BIN
static/image/tabbar/center.png View File

Before After
Width: 40  |  Height: 40  |  Size: 937 B Width: 30  |  Height: 38  |  Size: 1.1 KiB

BIN
static/image/tabbar/home-a.png View File

Before After
Width: 47  |  Height: 43  |  Size: 2.2 KiB Width: 34  |  Height: 35  |  Size: 744 B

BIN
static/image/tabbar/home.png View File

Before After
Width: 47  |  Height: 43  |  Size: 2.2 KiB Width: 34  |  Height: 35  |  Size: 929 B

+ 4
- 1
uni.scss View File

@ -26,12 +26,15 @@ $uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息 $uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080; $uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0; $uni-text-color-disable:#c0c0c0;
$uni-text-color-highlight:#05D9A2;
/* 背景颜色 */ /* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-fg-color:#ffffff;
$uni-bg-color:#F4F6F8;
$uni-bg-color-grey:#f8f8f8; $uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色 $uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色 $uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
$uni-bg-color-highlight:#001137;
/* 边框颜色 */ /* 边框颜色 */
$uni-border-color:#c8c7cc; $uni-border-color:#c8c7cc;


Write Preview
Loading…
Cancel
Save