Commit 917b873f authored by June's avatar June

feat:搜索页面、店铺详情、个人中心、购物车页面

parent 9d80fcc6
...@@ -25,6 +25,10 @@ export default { ...@@ -25,6 +25,10 @@ export default {
// } // }
// }) // })
uni.setEnableDebug({
enableDebug: true
})
}, },
methods: { methods: {
......
...@@ -2,12 +2,11 @@ ...@@ -2,12 +2,11 @@
<view class="empty flex flex-column j-center a-center"> <view class="empty flex flex-column j-center a-center">
<image <image
style="width: 400rpx;" style="width: 400rpx;"
class="mb-4" class="my-4"
v-if="iconSrc"
:src="iconSrc" :src="iconSrc"
mode="widthFix" mode="widthFix"
/> />
<text class="font-28 font-bold">{{text}}</text> <text class="font-28 font-bold text">{{text}}</text>
</view> </view>
</template> </template>
...@@ -26,9 +25,12 @@ export default { ...@@ -26,9 +25,12 @@ export default {
} }
</script> </script>
<style scoped> <style lang="scss" scoped>
.empty { .empty {
width: 100%; width: 100%;
height: 100%; height: 100%;
.text {
color: $desc;
}
} }
</style> </style>
...@@ -11,16 +11,35 @@ ...@@ -11,16 +11,35 @@
:src="goods.cover" :src="goods.cover"
mode="aspectFit" mode="aspectFit"
/> />
<view>{{goods.title}}</view> <view class="font-28 font-bold">{{goods.title}}</view>
</view> </view>
<view v-if="skuDta"> <view class="sku-list font-28">
<view <view
v-for="item in skuDta" v-for="(item, index) in skuData"
:key="item.sku_id" :key="item.sku_id"
> >
<view>{{item.spec_str}}</view> <view class="w-100 flex j-between a-center mb-2">
<view>{{item.price}}</view> <view class="flex-1">{{item.spec_str}}</view>
<view class="step-wrap">
<input-number
:index="index"
@change="numberChange"
/>
</view>
</view>
<view class="w-100 flex j-between a-center">
<view class="flex-1 text-left">{{item.price}}</view>
<view class="flex-1 text-center">{{item.inventory}}</view>
<view class="payCount text-center">0件起购</view>
</view>
</view>
</view>
<view class="flex w-100 a-center flex-column font-28 mt-2">
<view class="as-end">
<text class="btn-theme">M</text>
<text class=" ml-2 price btn-theme">¥9999.44</text>
</view> </view>
</view> </view>
...@@ -35,6 +54,7 @@ ...@@ -35,6 +54,7 @@
<script> <script>
import uniPopup from '@/components/uni-popup/index.vue' import uniPopup from '@/components/uni-popup/index.vue'
import inputNumber from '@/components/inputNumber/index.vue'
import { goodsSku } from '@/apis/goods.js' import { goodsSku } from '@/apis/goods.js'
export default { export default {
...@@ -43,12 +63,13 @@ export default { ...@@ -43,12 +63,13 @@ export default {
data() { data() {
return { return {
goods: null, goods: null,
skuDta: null skuData: null
} }
}, },
components: { components: {
uniPopup uniPopup,
inputNumber
}, },
methods: { methods: {
...@@ -64,7 +85,7 @@ export default { ...@@ -64,7 +85,7 @@ export default {
try{ try{
console.log(params) console.log(params)
this.goods = params.goodsInfo this.goods = params.goodsInfo
this.skuDta = params.skuData this.skuData = params.skuData
this.$refs.goodsPopup.open() this.$refs.goodsPopup.open()
}catch(e){ }catch(e){
console.log(e) console.log(e)
...@@ -72,10 +93,15 @@ export default { ...@@ -72,10 +93,15 @@ export default {
} }
}, },
hide() { hide() {
this.$refs.goodsPopup.close() this.$refs.goodsPopup.close()
this.showSku = false this.showSku = false
this.detail = null this.detail = null
},
numberChange(e) {
console.log(e)
} }
} }
} }
...@@ -89,10 +115,26 @@ export default { ...@@ -89,10 +115,26 @@ export default {
background-color: #fff; background-color: #fff;
.goods-cover { .goods-cover {
width: 120rpx; width: 160rpx;
height: 120rpx; height: 160rpx;
} }
.sku-list {
@include borderBox(30rpx, 20rpx);
border-bottom: 1rpx solid $line;
.step-wrap {
flex: 0 0 224rpx;
width: 224rpx;
height: 64rpx;
}
.payCount {
flex: 0 0 224rpx;
font-size: 20rpx;
color: $desc;
}
}
.btn-wrap { .btn-wrap {
position: absolute; position: absolute;
...@@ -115,5 +157,9 @@ export default { ...@@ -115,5 +157,9 @@ export default {
background-color: $primary; background-color: $primary;
} }
} }
.btn-theme {
color: $primary;
}
} }
</style> </style>
@font-face {
font-family: "iconfont"; /* Project id 2637147 */
src: url("data:application/octet-stream;base64,d09GMgABAAAAAALYAAsAAAAABrwAAAKJAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDBgqBDIEWATYCJAMMCwgABCAFhG0HNxv5BciemjxBBNrAwowJ1TNgRCiCaqzs2d0HIIdogcoDqleAwnFkVIwlIdGYyGi20bnJNc2AOHL4JAfM6TfPbXppxnieXd3YEZzH8+A2N2HXA4v1/1oH0P2fAZfj/y+gQOZZltPamyc9WAkGOtagyEokEO8hXu0gO/GMQL15xby3qxs7QfgdYk6QzJfdHWT1caerCARKEUXBfK1QTV1axD9+pNfpBfAm+n78JUUgSVVmn7RzUWUHz7/xv7MsVjSYPy3N14CnJVQhYxpQiNPuzAkf0cTyUa/xxfJqRUizxp9IYuiq9/zHS0Q1u7YRjGM28SPeExD8mF0hgQyqk9wYYJYxO69Jormp8T5yO3lnqecwJMqjl7dn28cR8OqDZuQviepdj68+itvdvHxaiWrzxH68wtePWE/cfvb+z0egiUvEeC0o3K1fTUTcQNJqQnpmLBgFUHkuIL8A4Ff/45IXgutv8CMRhdWGFPD9v45IQdfVnsET/DYtINIWI0ouTdLO2kA2MHJsQr16VNiBdt/jdV3kWkKtrgxJjSFktYaJwpxGlQbLqFZrDfWm1Kxu0IHyEaUOk9YAodUFkmZfkbV6JQrzC1W6/aFaa/ig3lHEbNlgNPTgCooRw3Zom4K6TJyKa2fBcX07VscsRPPyiN2NqVuPQ5ETyvka7MR0jhnucVViTIEKJQ5YDadhyyLQRYmBZcZpjLnyeV5pehMnEwcItoXCEAazg2ymQDoZ4aQEvZngyufbYaoxFoR2tNSFu2GUm94/JOIIBKJG4yS13MsrbuNUEoZRQAqKcICqYRBmsRCQq3mQAZMxHG1EyiUf79ApVA23vs7xAcViB/bsHClyFPkKkQBDR87IDAAAAAA=")
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-hao:before {
content: "\e616";
}
.icon-jianhao:before {
content: "\e67c";
}
<template> <template>
<view class="wrpper" @click.stop=""> <view class="wrpper flex j-between a-center">
<view class="btn" @click="subtraction">-</view> <view
<input class="input" type="number" :value="value" @input="inputVal" /> class="btn iconfont icon-jianhao flex j-center a-center"
<view class="btn" @click="add">+</view> :class="calVal <= min ? 'disabled' : null"
@click.stop="subtraction"
></view>
<input
class="input"
type="number"
:value="calVal"
@input="inputVal"
/>
<view
class="btn iconfont icon-hao flex j-center a-center"
:class="(max && (calVal >= max)) ? 'disabled' : null"
@click.stop="add"
></view>
</view> </view>
</template> </template>
...@@ -13,7 +26,11 @@ export default { ...@@ -13,7 +26,11 @@ export default {
type: Number, type: Number,
default: 1 default: 1
}, },
value: { max: {
type: Number,
default: 0
},
defaultVal: {
type: Number, type: Number,
default: 1 default: 1
}, },
...@@ -24,7 +41,7 @@ export default { ...@@ -24,7 +41,7 @@ export default {
}, },
data() { data() {
return { return {
calVal: this.value calVal: this.defaultVal
} }
}, },
watch: { watch: {
...@@ -39,19 +56,34 @@ export default { ...@@ -39,19 +56,34 @@ export default {
subtraction() { subtraction() {
const val = this.calVal const val = this.calVal
if(val === this.min) return this.$toast({title: `数量不能小于${this.min}`}) if(val === this.min) return this.$toast({title: `数量不能小于${this.min}`})
this.calVal = val - 1 this.calVal -= 1
}, },
add() { add() {
const val = this.calVal
const max = this.max
if(max && val >= max) {
this.calVal = max
this.$toast({title: '数量不能大于商品库存'})
return
}
this.calVal += 1 this.calVal += 1
}, },
inputVal(e) { inputVal(e) {
this.calVal = e.detail.value const inputVal = ~~e.detail.value
const max = this.max
if(max && inputVal >= max) {
this.calVal = max
this.$toast({title: '数量不能大于商品库存'})
return
}
this.calVal = inputVal
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./iconfont.css";
.wrpper { .wrpper {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -63,12 +95,17 @@ export default { ...@@ -63,12 +95,17 @@ export default {
background-color: #fff; background-color: #fff;
.btn { .btn {
display: inline-block; display: inline-block;
width: 64rpx; width: 34rpx;
height: 64rpx; height: 100%;
border: 1px solid #ccc; }
.disabled {
color: #ccc!important;
} }
.input { .input {
width: 120rpx; width: 120rpx;
height: 100%;
border-radius: 4rpx;
background-color: $mainBg;
} }
} }
</style> </style>
...@@ -75,12 +75,12 @@ export default { ...@@ -75,12 +75,12 @@ export default {
scroll2Top() { scroll2Top() {
this.scrollTop = Math.random() this.scrollTop = Math.random()
} },
// 下拉刷新被中止(不常用) // 下拉刷新被中止(不常用)
// refresherabort() { refresherabort() {
// console.log("下拉刷新被中止") console.log("下拉刷新被中止")
// } }
} }
} }
</script> </script>
......
...@@ -29,6 +29,7 @@ async function successRes(res, options, resolve, reject) { ...@@ -29,6 +29,7 @@ async function successRes(res, options, resolve, reject) {
options.successCb && typeof options.successCb === 'function' && options.successCb() options.successCb && typeof options.successCb === 'function' && options.successCb()
// 处理某些接口返回String类型的数据 // 处理某些接口返回String类型的数据
const data = (res.data && typeof res.data === 'string') ? JSON.parse(res.data) : res.data const data = (res.data && typeof res.data === 'string') ? JSON.parse(res.data) : res.data
if(!data) return Toast({title: '后端没有返回data'})
const status = data.code const status = data.code
switch(status) { switch(status) {
case 10: case 10:
......
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
{ {
"path": "pages/mine/index", "path": "pages/mine/index",
"style": { "style": {
"navigationBarTitleText": "我的" "navigationStyle": "custom"
} }
}, },
{ {
...@@ -104,6 +104,12 @@ ...@@ -104,6 +104,12 @@
"style": { "style": {
"navigationBarTitleText": " " "navigationBarTitleText": " "
} }
},
{
"path": "storeInfo/index",
"style": {
"navigationBarTitleText": "店铺详情"
}
} }
] ]
}], }],
......
<template> <template>
<view class="cart-wrap"> <view class="cart-wrap">
<view v-if="!token"> <view v-if="!token">
<button type="default" @click="handleLogin">登录</button> <empty-view
iconSrc="/static/images/common/icon-empty.png"
text="啥都没有,快去逛逛吧~"
/>
<view class="login-btn" @click="handleLogin">登录</view>
</view> </view>
<view v-else> <view v-else>
<template v-if="cartList.length === 0"> <template v-if="cartList.length === 0">
<empty-view <empty-view
iconSrc="../../static/images/common/icon_nothing.png" iconSrc="/static/images/common/icon-empty.png"
text="购物车为空" text="啥都没有,快去逛逛吧~"
/> />
</template> </template>
...@@ -20,7 +25,10 @@ ...@@ -20,7 +25,10 @@
@click="handleCartItem(index, item)" @click="handleCartItem(index, item)"
> >
<view> <view>
<text>{{item.checked ? '选中' : '未选中'}}</text> <text>{{item.price}}</text> <view
:class="item.checked ? 'cart-seleted' : 'cart-unseleted'"
></view>
<text>{{item.price}}</text>
</view> </view>
<view style="width: 240rpx;height: 64rpx;"> <view style="width: 240rpx;height: 64rpx;">
<input-number <input-number
...@@ -31,9 +39,14 @@ ...@@ -31,9 +39,14 @@
</view> </view>
</view> </view>
</view> </view>
<view class="w-100 cart_info flex j-between a-center">
<text class="font-24">不含运费</text>
<text class="font-28 primary">合计:{{totalPrice}}</text>
<view class="font-28 py-2 px-1 primary">移除</view>
<view class="font-28 confirm-cart">结算</view>
</view>
</template> </template>
<view>总价:{{totalPrice}}</view>
</view> </view>
</view> </view>
</template> </template>
...@@ -46,21 +59,7 @@ export default { ...@@ -46,21 +59,7 @@ export default {
data() { data() {
return { return {
cartList: [ cartList: [
{ 1
checked: true,
counts: 1,
price: 10.00,
},
{
checked: false,
counts: 3,
price: 10.00,
},
{
checked: false,
counts: 2,
price: 1.00,
}
] ]
} }
}, },
...@@ -110,28 +109,50 @@ export default { ...@@ -110,28 +109,50 @@ export default {
.cart-wrap { .cart-wrap {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
margin-bottom: 98rpx;
.login-btn {
width: 520rpx;
height: 72rpx;
margin: 50rpx auto 0;
line-height: 72rpx;
text-align: center;
color: #fff;
font-size: 28rpx;
background-color: $primary;
}
.list-item { .list-item {
position: relative; position: relative;
.count-btn { .cart-unseleted {
width: 48rpx; @include unSelected(28rpx, 28rpx);
height: 48rpx;
line-height: 48rpx;
background-color: #fff;
} }
.btn-grey { .cart-seleted {
background-color: #ccc; @include selected(28rpx, 28rpx);
} }
.count-input { }
width: 72rpx;
height: 48rpx; .cart_info {
line-height: 48rpx; @include borderBox(0, 30rpx);
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
height: 98rpx;
border-top: 1rpx solid $line;
background-color: #fff;
.primary {
color: $primary;
} }
.counts-wrap { .confirm-cart {
position: absolute; width: 180rpx;
right: 0; height: 72rpx;
bottom: 0; line-height: 72rpx;
z-index: 1; text-align: center;
color: #fff;
border-radius: 36rpx;
background-color: $primary;
} }
} }
} }
......
...@@ -172,7 +172,10 @@ export default { ...@@ -172,7 +172,10 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.category-wrap { .category-wrap {
height: 100vh;
box-sizing: border-box;
border-top: 1rpx solid $line; border-top: 1rpx solid $line;
overflow: hidden;
.searchBar-wrap { .searchBar-wrap {
height: 112rpx; height: 112rpx;
background-color: #fff; background-color: #fff;
......
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
</view> </view>
<view class="goods-info mb-2"> <view class="goods-info mb-2">
<view class="price mb-3">¥{{detail.shop_price}}</view> <view class="price mb-3">¥{{detail.is_inquiry === '1' ? '询价' : detail.shop_price_range}}</view>
<view class="font-28 font-bold mb-2">{{detail.goods_name}}</view> <view class="font-28 font-bold mb-2">{{detail.goods_name}}</view>
<view class="counts w-100 flex j-start a-center"> <view class="counts w-100 flex j-start a-center">
<view class="mr-4">现库存:{{inventory}}</view> <view class="mr-4">现库存:{{inventory}}</view>
...@@ -171,11 +171,11 @@ export default { ...@@ -171,11 +171,11 @@ export default {
const detail = this.detail const detail = this.detail
if(!detail) return [] if(!detail) return []
// + 将字符串0 和 1转为数字 // + 将字符串0 和 1转为数字
if(+detail.delivery_open_type & +detail.raising_open_type) { if(+detail.delivery_open_type && +detail.raising_open_type) {
return [{id: 0, title: '物流派送'}, {id: 1, title: '买家自提'}] return [{id: 0, title: '物流派送'}, {id: 1, title: '买家自提'}]
} else if (+detail.delivery_open_type & +detail.raising_open_type) { } else if (+detail.delivery_open_type && +detail.raising_open_type) {
return [{id: 0, title: '物流派送'}] return [{id: 0, title: '物流派送'}]
} else if (+detail.delivery_open_type & +detail.raising_open_type){ } else if (+detail.delivery_open_type && +detail.raising_open_type){
return [{id: 1, title: '买家自提'}] return [{id: 1, title: '买家自提'}]
} else { } else {
return [] return []
...@@ -221,6 +221,7 @@ export default { ...@@ -221,6 +221,7 @@ export default {
const { status, data } = await goodsSku(goods_id) const { status, data } = await goodsSku(goods_id)
if(status) { if(status) {
this.skuData = data this.skuData = data
if(!data) return
this.inventory = data.reduce((prev, cur) => { this.inventory = data.reduce((prev, cur) => {
return prev + (+cur.adsale_inventory) return prev + (+cur.adsale_inventory)
}, 0) }, 0)
...@@ -258,13 +259,15 @@ export default { ...@@ -258,13 +259,15 @@ export default {
// sku弹窗 // sku弹窗
handlePopup() { handlePopup() {
const skuData = this.skuData
const detail = this.detail const detail = this.detail
if(!skuData) return this.$toast({title: '该商品暂无库存'})
const params = { const params = {
goodsInfo: { goodsInfo: {
cover: `${this.baseUrl}/${detail.goods_thumb}`, cover: `${this.baseUrl}/${detail.goods_thumb}`,
title: detail.goods_name title: detail.goods_name
}, },
skuData: this.skuData skuData: skuData
} }
this.$refs.popup.show(params) this.$refs.popup.show(params)
} }
......
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<view class="goods-info flex flex-column j-between"> <view class="goods-info flex flex-column j-between">
<view class="title font-28 my-1">{{item.goods_name}}</view> <view class="title font-28 my-1">{{item.goods_name}}</view>
<view class="flex j-between a-center mt-1 mb-2"> <view class="flex j-between a-center mt-1 mb-2">
<view class="price font-28">{{item.shop_price}}</view> <view class="price font-28">{{ item.is_inquiry === '1' ? '询价' : item.shop_price + '/' + item.goods_unit }}</view>
<image <image
class="cart-btn" class="cart-btn"
src="/static/images/common/icon-cart.png" src="/static/images/common/icon-cart.png"
......
...@@ -135,7 +135,7 @@ ...@@ -135,7 +135,7 @@
<view class="goods-info flex flex-column j-between"> <view class="goods-info flex flex-column j-between">
<view class="title font-28 my-1">{{good.goods_name}}</view> <view class="title font-28 my-1">{{good.goods_name}}</view>
<view class="flex j-between a-center mt-1 mb-2"> <view class="flex j-between a-center mt-1 mb-2">
<view class="price font-28">{{ good.is_inquiry === 1 ? '询价' : good.shop_price + '/' + good.goods_unit }}</view> <view class="price font-28">{{ good.is_inquiry === '1' ? '询价' : good.shop_price + '/' + good.goods_unit }}</view>
<image <image
class="cart-btn" class="cart-btn"
src="/static/images/common/icon-cart.png" src="/static/images/common/icon-cart.png"
......
...@@ -59,7 +59,11 @@ ...@@ -59,7 +59,11 @@
<image class="wx-login_icon mb-4" src="/static/images/common/icon_wx.png" mode="aspectFit" /> <image class="wx-login_icon mb-4" src="/static/images/common/icon_wx.png" mode="aspectFit" />
</label> </label>
<view class="agreement flex j-start a-center"> <view class="agreement flex j-start a-center">
<view class="p-1" @click="handleAgree">{{agree ? '同意' : 'no'}}</view> <view
class="mr-1"
:class="agree ? 'agreement-icon_active' : 'agreement-icon'"
@click="handleAgree"
/>
<text class="mr-1">同意</text> <text class="mr-1">同意</text>
<navigator <navigator
class="agr_text" class="agr_text"
...@@ -94,7 +98,7 @@ export default { ...@@ -94,7 +98,7 @@ export default {
data() { data() {
return { return {
smsDisabled: false, // sms按钮是否禁用 smsDisabled: false, // sms按钮是否禁用
agree: false, // 同意平台协议 agree: true, // 同意平台协议
smsMsg: '获取验证码', smsMsg: '获取验证码',
form: { form: {
lgtype: 2, // 1微信登录 2短信验证码登录 3账号密码登录 lgtype: 2, // 1微信登录 2短信验证码登录 3账号密码登录
...@@ -256,6 +260,12 @@ export default { ...@@ -256,6 +260,12 @@ export default {
.agr_text { .agr_text {
color: $primary; color: $primary;
} }
.agreement-icon {
@include unSelected(28rpx, 28rpx);
}
.agreement-icon_active {
@include selected(28rpx, 28rpx);
}
} }
} }
</style> </style>
<template> <template>
<view class="w-100"> <view class="w-100">
<!-- userInfo --> <!-- userInfo -->
<view class="user-wrap flex j-start a-center w-100" @click="handleAvatar"> <view class="user-wrap w-100" @click="handleAvatar">
<template v-if="token"> <view class="user-inner flex j-start a-center" v-if="token">
<image <image
v-if="userInfo.avatar" v-if="userInfo.avatar"
class="avatar mr-2" class="avatar mr-2"
...@@ -10,64 +10,79 @@ ...@@ -10,64 +10,79 @@
/> />
<open-data v-else class="avatar mr-2" type="userAvatarUrl"></open-data> <open-data v-else class="avatar mr-2" type="userAvatarUrl"></open-data>
<view v-if="userInfo.nickname">{{userInfo.nickname}}</view> <view v-if="userInfo.nickname">{{userInfo.nickname}}</view>
<open-data v-else type="userNickName" lang="zh_CN"></open-data> <open-data v-else type="userNickName" lang="zh_CN"></open-data>
</template> </view>
<template v-else> <view class="user-inner flex j-star a-center" v-else>
<view>登录/注册</view> <image class="avatar mr-2" src="/static/images/common/default-avatar.png" mode="aspectFit"></image>
</template> <view class="font-32">登录/注册</view>
</view>
<image class="bg" src="/static/images/common/bg.png" mode="aspectFit"></image>
</view> </view>
<view class="w-100"> <view class="w-100 order-wrap">
<view class="w-100 flex j-between a-center" @click="nav('order', 0)"> <view class="w-100 flex j-between a-center mb-4" @click="nav('order', 0)">
<view class="font-bold">我的订单</view> <view class="font-bold font-28">我的订单</view>
<view>全部订单</view> <view class="font-24 flex j-end a-center all-text">全部订单 <icon class="right_arrow"></icon></view>
</view> </view>
<view class="flex j-around a-center"> <view class="flex j-around a-center font-24">
<view <view
class="order-menu_item flex flex-column j-center a-center" class="order-menu_item flex flex-column j-center a-center"
@click="nav('order', 1)" @click="nav('order', 1)"
> >
<image class="icon mb-2" src="/static/images/mine/unpay.png" mode="aspectFit"></image>
<view>待付款</view> <view>待付款</view>
<view v-if="false" class="badge"></view>
</view> </view>
<view <view
class="order-menu_item flex flex-column j-center a-center" class="order-menu_item flex flex-column j-center a-center"
@click="nav('order', 2)" @click="nav('order', 2)"
> >
<image class="icon mb-2" src="/static/images/mine/unrecieve.png" mode="aspectFit"></image>
<view>待收货</view> <view>待收货</view>
<view v-if="false" class="badge"></view>
</view> </view>
<view <view
class="order-menu_item flex flex-column j-center a-center" class="order-menu_item flex flex-column j-center a-center"
@click="nav('order', 3)" @click="nav('order', 3)"
> >
<image class="icon mb-2" src="/static/images/mine/recieved.png" mode="aspectFit"></image>
<view>已收货</view> <view>已收货</view>
<view v-if="false" class="badge"></view>
</view> </view>
<view <view
class="order-menu_item flex flex-column j-center a-center" class="order-menu_item flex flex-column j-center a-center"
@click="nav('order', 4)" @click="nav('order', 4)"
> >
<image class="icon mb-2" src="/static/images/mine/unneed.png" mode="aspectFit"></image>
<view>退款售后</view> <view>退款售后</view>
<view v-if="false" class="badge"></view>
</view> </view>
<view <view
class="order-menu_item flex flex-column j-center a-center" class="order-menu_item flex flex-column j-center a-center"
@click="nav('order', 5)" @click="nav('order', 5)"
> >
<image class="icon mb-2" src="/static/images/mine/close.png" mode="aspectFit"></image>
<view>交易关闭</view> <view>交易关闭</view>
<view v-if="false" class="badge"></view>
</view> </view>
</view> </view>
</view> </view>
<!-- 功能与服务 --> <!-- 功能与服务 -->
<view> <view class="server-wrap">
<view class="title font-bold">功能与服务</view> <view class="title font-28 font-bold">功能与服务</view>
<view @click="phoneCall"> <view class="server-item font-28 flex j-between a-center py-2" @click="phoneCall">
联系老板 <text>联系老板</text>
<icon class="right_arrow" />
</view> </view>
<view @click="nav('address')"> <view class="server-item font-28 flex j-between a-center py-2" @click="nav('address')">
地址管理 <text>地址管理</text>
<icon class="right_arrow" />
</view> </view>
<view @click="nav('store')"> <view class="server-item font-28 flex j-between a-center py-2" @click="nav('store')">
店铺信息 <text>店铺信息</text>
<icon class="right_arrow" />
</view> </view>
</view> </view>
</view> </view>
...@@ -112,6 +127,9 @@ export default { ...@@ -112,6 +127,9 @@ export default {
}) })
break; break;
case 'store': case 'store':
uni.navigateTo({
url: '/subPages/storeInfo/index'
})
break; break;
default: default:
break; break;
...@@ -153,12 +171,75 @@ export default { ...@@ -153,12 +171,75 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.user-wrap { .user-wrap {
@include borderBox(20rpx, 20rpx); position: relative;
@include borderBox(0, 30rpx);
height: 454rpx; height: 454rpx;
background-color: red; .user-inner {
.avatar { padding-top: 216rpx;
width: 160rpx; .avatar {
height: 160rpx; width: 140rpx;
height: 140rpx;
}
}
.bg {
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: -1;
width: 100%;
height: 454rpx;
}
}
.order-wrap {
@include borderBox(40rpx, 30rpx);
width: 690rpx;
height: 258rpx;
margin: -80rpx auto 0;
background-color: #fff;
border-radius: 8rpx;
.all-text {
color: $desc;
}
.order-menu_item {
position: relative;
.icon {
width: 44rpx;
height: 42rpx;
}
.badge {
position: absolute;
right: -20rpx;
top: -20rpx;
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
text-align: center;
color: #fff;
font-size: 20rpx;
background-color: $primary;
border-radius: 50%;
}
}
}
.right_arrow {
margin-left: 10rpx;
@include right_arrow(14rpx, 28rpx);
}
.server-wrap {
@include borderBox(20rpx, 20rpx);
width: 690rpx;
margin: 20rpx auto 0;
background-color: #fff;
border-radius: 8rpx;
.server-item {
border-bottom: 1rpx solid $line;
&:last-child {
border-bottom: none;
}
} }
} }
</style> </style>
@font-face {
font-family: "iconfont"; /* Project id 2637147 */
src: url('data:application/octet-stream;base64,d09GMgABAAAAAAKAAAsAAAAABnQAAAI0AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACCfgo4SgE2AiQDDAsIAAQgBYRtB0obuAURFYxLsh8FbuwMKzUP5495tVrkFKXq/zmC59fSefsXLkyuSBIIFBGrKoFCkk6FSyuBXKovADY3Q4MxEYolOV/8L18gKaHzQn77/N87/iOgLJrXspzW2vZ/+s/DwIomUIB7UlFkJZJ5KtM1wEzsW58RaDTHYtlKs3Gn1jP2yjmDcmFn0PDjDB8/qGbk5HI0a0K5dWf5OsYLspfZKF4V348/5kWNTJGEd209tuqIj99bv7elB/UH9qQxD64T4L4MBRJmICd2L9e2SmJKnDTGchMwORd8b6vXv7dmAfFpSUb8dTG3GUxBPeN7a6Ii+N62RwYSKLuNEt1CwJPHIqWb/1u3b95a6sHS3AMsTVUAzA4+D46P7m9b+L/W7OwZq5sVRbX+oCbBUXs2FjCjpoaM4OVJ+ZQu4QgkTlTIMDRGUl2Y6vTtuKNncyuhpudAojLSIKmZQOWiGSg0WYBSzRI0mm7N/iZdLkkib8A0Twmh3XtkWn1A0u4LlYu+otDrH0rtkdBod3Sd2AQwKbhxxSW0ihssX+A1J4qDWpf8C7pnsNI2FtIHyslFGNq+35wxoVyx5ny5UZWAJEcwdB+GkKFIPnDVdlctU9fR1JvaNceqtkLQKm5g+QJec6Ksu9aDz1/QPYOVBaKr/kA5eXwwaPUbqNmWNhG/8sr5ciNVAiQ5AkPTMIQMyvS0A1dt7QcqZdJF7WirrX3eEf/vCDQKf5oiixS5zss2HWzzh5NbkAnT0PS9VQUAAA==');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-sanjiaoxingbeifen1:before {
content: "\e60e";
}
.icon-sanjiaoxing:before {
content: "\e60f";
}
<template> <template>
<view class="w-100"> <view class="w-100">
<!-- searbar --> <!-- searbar -->
<view class="search-bar flex j-between a-center"> <view class="search-bar w-100 flex j-between a-center">
<input <input
class="input" class="input font-28"
type="text" type="text"
v-model="val" v-model="val"
placeholder="搜索商品" placeholder="搜索商品"
...@@ -11,18 +11,22 @@ ...@@ -11,18 +11,22 @@
@confirm="search" @confirm="search"
/> />
<view class="font-28" @click="search">搜索</view> <view class="font-28" @click="search">搜索</view>
<view class="search-icon">icon</view> <image
class="search-icon"
src="/static/images/common/icon-search.png"
mode="aspectFit"
/>
</view> </view>
<!-- history --> <!-- history -->
<view class="history-wrap w-100"> <view class="history-wrap w-100">
<view class="font-32 flex j-between w-100 font-bold py-2"> <view class="font-32 flex j-between w-100 font-bold py-2">
<view>历史记录</view> <view class="title">历史记录</view>
<view @click="clearHistory">del</view> <view class="del-btn" @click="clearHistory">删除</view>
</view> </view>
<view class="w-100 flex j-start a-center flex-wrap"> <view class="w-100 flex j-start a-center flex-wrap">
<view <view
class="history-item px-1 mr-2 mb-2" class="history-item font-28 mr-2"
v-for="(item, index) in list" v-for="(item, index) in list"
:key="index" :key="index"
@click="handleHistory(item)" @click="handleHistory(item)"
...@@ -77,26 +81,37 @@ export default { ...@@ -77,26 +81,37 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.search-bar { .search-bar {
position: relative; position: relative;
@include borderBox(20rpx, 20rpx); @include borderBox(20rpx, 40rpx);
height: 98rpx; margin: 0 auto;
background-color: yellow; background-color: #fff;
.input { .input {
padding-left: 80rpx; width: 534rpx;
width: 640rpx; height: 88rpx;
background-color: #fff; padding-left: 70rpx;
background-color: $mainBg;
} }
.search-icon { .search-icon {
position: absolute; position: absolute;
left: 20rpx; left: 60rpx;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
width: 34rpx;
height: 34rpx;
} }
} }
.history-wrap { .history-wrap {
@include borderBox(20rpx, 20rpx); @include borderBox(20rpx, 20rpx);
.title {
color: $desc;
}
.del-btn {
color: $daner;
}
.history-item { .history-item {
border: 1rpx solid #ccc; padding: 12rpx 20rpx;
border-radius: 8rpx;
background-color: #FFE0D1;
} }
} }
</style> </style>
<template> <template>
<view class="w-100"> <view class="w-100">
<!-- searchBar --> <!-- searchBar -->
<viwe class="search-bar w-100 flex j-between a-center"> <viwe class="search-bar w-100 flex j-center a-center">
<input <input
class="input" class="input font-28 mr-2"
type="text" type="text"
v-model="val" v-model="val"
placeholder="搜索商品" placeholder="搜索商品"
confirm-type="search" confirm-type="search"
@confirm="search" @confirm="search"
/> />
<view @click="nav">icon</view> <image
class="search-icon" src="/static/images/common/icon-search.png"
mode="aspectFit"
/>
<image
class="nav-cart"
src="/static/images/common/icon-cart_gray.png"
mode="aspectFit"
@click="nav"
/>
</viwe> </viwe>
<view class="filter-bar flex j-around a-center font-28 text-center w-100">
<view class="item flex-1">综合</view>
<view class="item flex-1">销量</view>
<view class="item item_active flex-1 flex j-center a-center">
<view>价格</view>
<view class="sanjiao-wrap flex flex-column j-center a-center">
<view class="sanjiao iconfont icon-sanjiaoxing"></view>
<view class="sanjiao iconfont icon-sanjiaoxingbeifen1"></view>
</view>
</view>
</view>
<!-- list --> <!-- list -->
<view class="list w-100"> <view class="list w-100">
<!-- <view class="filter-bar w-100">
<view>综合</view>
<view>销量</view>
<view>价格</view>
</view> -->
<pull-list <pull-list
@tolower="tolower" @tolower="tolower"
@refresh="refresh" @refresh="refresh"
> >
<view <block
v-for="(item, index) in searchList" v-for="(item, index) in searchList"
:key="index" :key="index"
> >
<view <view
class="goods-item"
v-for="good in item" v-for="good in item"
:key="good.goods_id" :key="good.goods_id"
> >
...@@ -42,7 +55,7 @@ ...@@ -42,7 +55,7 @@
mode="widthFix" mode="widthFix"
/> />
</view> </view>
</view> </block>
</pull-list> </pull-list>
</view> </view>
...@@ -80,6 +93,7 @@ export default { ...@@ -80,6 +93,7 @@ export default {
}, },
methods: { methods: {
search(e) {},
nav() { nav() {
uni.switchTab({ uni.switchTab({
url: '/pages/carts/index' url: '/pages/carts/index'
...@@ -113,25 +127,78 @@ export default { ...@@ -113,25 +127,78 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import './common/iconfont.css';
.search-bar { .search-bar {
position: relative; position: relative;
@include borderBox(20rpx, 20rpx); width: 100%;
height: 98rpx; height: 128rpx;
background-color: yellow; background-color: #fff;
.input { .input {
padding-left: 80rpx; width: 534rpx;
width: 640rpx; padding-left: 70rpx;
background-color: #fff; height: 88rpx;
background-color: $mainBg;
} }
.search-icon { .search-icon {
position: absolute; position: absolute;
left: 20rpx; left: 40rpx;
top: 50%; top: 50%;
z-index: 1;
width: 34rpx;
height: 34rpx;
transform: translateY(-50%); transform: translateY(-50%);
} }
.nav-cart {
width: 34rpx;
height: 32rpx;
}
}
.filter-bar {
position: relative;
height: 72rpx;
background-color: #fff;
&::after {
display: inline-block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
content: '';
width: 100%;
height: 1rpx;
background-color: $line;
}
.item {
height: 72rpx;
line-height: 72rpx;
}
.item_active {
color: $primary;
.sanjiao-wrap {
width: 34rpx;
height: 24rpx;
line-height: 10rpx;
.sanjiao {
display: inline-block;
font-size: 12rpx!important;
color: #333;
&:nth-child(1) {
margin-bottom: 8rpx;
}
}
}
}
} }
.list { .list {
height: calc(100vh - 98rpx); height: calc(100vh - 200rpx);
background-color: #fff;
.goods-item {
@include borderBox(20rpx, 20rpx);
border-bottom: 1rpx solid $line;
}
} }
</style> </style>
...@@ -33,4 +33,34 @@ ...@@ -33,4 +33,34 @@
background-position: 0 0; background-position: 0 0;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
}
// 大于号
@mixin right_arrow($w, $h) {
width: $w;
height: $h;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAA4CAMAAADZ7miGAAABHVBMVEUAAAD///////+qqqq/v7+qqqq2trafn5+qqqqdnZ2kpKShoaGZmZmenp6ioqKbm5uenp6ZmZmcnJydnZ2ZmZmbm5uenp6ampqdnZ2bm5udnZ2cnJyZmZmZmZmcnJyampqZmZmampqbm5uampqbm5uampqampqZmZmampqbm5uampqZmZmbm5uZmZmampqZmZmampqZmZmampqampqampqampqZmZmampqZmZmampqampqampqZmZmampqbm5uampqampqampqampqZmZmampqampqampqZmZmZmZmZmZmampqZmZmZmZmampqZmZmZmZmZmZmampqZmZmampqZmZmZmZmampqampqZmZmampqZmZmampqampqZmZmZmZk8t4UTAAAAXnRSTlMAAQIDBAYHCAwNDhMUFRYcHR4fJygpKisvMzQ2N0FDREZRUlNUVmJkZWZoc3V2d3h5e3yIiY2PnKCiq6ytrq6xtLW7vL3AysvO0tbX2Nna4eLj5Orr7O3y8/T4+fz9CnIJpAAAARxJREFUOMuV1VdTAkEQBGCiimAEFRQxK0YQMyhmMSEYCArs//8ZOH089k7V3utXdXW3PdPrS740dn22p2KMydmw/Y8ma8GSYHeN41hV9C/DdepTtD3PdaYh+pPguoCPqk9yXeqIvse4rvdEKxGu24LmYYhrHnoZ5HoCPePoP4cecw1eQ/e5Dj9CN7mOPiOEFa7jHwhhkev0l2grxXWuiRDiXNO/orUJrssI4TXKdQMhPI1w3cHv3oe5HkJLAa6nnlpCuICWuYZucZAWvLHj4LVXzh9UgBUD9kO4C7sen3bwWmSzCPs77jom2oBpo6kN9WAd9pRFOnJeQW15tbXXCsOrmreYa0lp9aYVo1qpXhmvKjW+pVwAB7YLQLs6+q1IemYC6qtsAAAAAElFTkSuQmCC);
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% 100%;
}
// 选中
@mixin selected($w, $h) {
width: $w;
height: $h;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAMAAAAPzWOAAAAAtFBMVEUAAAD/aRz/Zhv/Zxr/dif/aBz/Zxr/Zhv/Zxv/Zxv/Zxr/Zhv/Zxr/Zxv/Zhv/Zhv/Zxr/Zhv/aBz/aBv/Zxz/Zh7/Zh//Zxv/Zhr//////f3/ayL/+vf/9/L/aB3/7uX/8+3/vZ3/n2//lWH/iE3//Pv/8On/1L7/y7H/tI//r4f/m2n/j1f/g0X/28r/z7j/x6v/wqP/sIn/rIP/fj7/2MT/uZb/qHz/pHf/ezr/dTH/6+KOlGpFAAAAGHRSTlMAI/m3BlPx7+zi38/Mq6CYiISAcVw8MlRiNL+jAAACK0lEQVRYw7WY6VaDMBBGA12BAlIp/cCuVrtal9bd938vK4YGOElYovcfAe7JMieZCRGj+Z5tmV1d75qW7fkaqUpz6BjIYTjDZgVF4HbApeMGJRWDBiQ0BqQYjSokGq1oLvo6CtH7TWk3eihFT9KZVhslabdEjktU4JLvuEAlLlQczCIci9KIWqhBK7e2bdSgrWVirIda9NJR10dN+qnB6KiJzgbUQG0ahDKAAgPWEeWuBKjG53r2dWSPQSxxUYmPaXhie3524xjpoArPsSOcsn33J1aG1RzLMGbGmoYniYMK7GfhL3PW5pwkRh3H/RVrNAjRUJ6bMXOk0IgPxmQ7Ha8/ix0vGQd84oFxiOf9A3zuRtSxyjrgERuM39VbPssdDzkHbGKBQZdvuec4FmfHBDksYoIxp9/N9mLHeoI8JumCcXVPvxzfIMvulr55pI40XaIjbXnhW3YRbX8CB51KzpYVz3LNHHxJF3zL6A4J71E61nnDMZFl8pC3vIWUV/AxiYW8ZZ1YFvHzMXFsIMBiwcYsj/Sv2x/LNnEcIMImHqf1bNlhkziOEOIRHxye6J/RKnG8QYwv2ArmYYboHRI00ab0mnFcQ4Ih3h43ZR1wJBv1IWTTK6UlOzK2tB8LSOk0pYfXnI5FjltwjG5G0bjIgeDPDnT11EI9yfnbdEs98VNPQdWTYfW0/B8KBPVSRb1oUi/f1AtJ9ZJWvbhWL/PVLxzUrz7+8xJG/TroG3vvWlo8bKcIAAAAAElFTkSuQmCC);
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% 100%;
}
// 未选中
@mixin unSelected($w, $h) {
width: $w;
height: $h;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAMAAAAPzWOAAAAAXVBMVEUAAADc3Nza2tra2trZ2dna2trb29vs7OzZ2dna2trZ2dna2tra2tra2tra2tra2tra2trb29vb29vd3d3b29v4+PjZ2dn09PTy8vLn5+fj4+Pr6+vg4ODd3d3u7u7gtn+qAAAAFXRSTlMAI/Dht4FTBvn47M/Mq6CYh3FcPDLeKf3yAAABjklEQVRYw6TTCY6DQAxEUbNnX/F3d7Pc/5gjIU0mEwEB+h2gVJbKMi15FOdjdtjtDtnxXDwSWasqLxkfsktZyXL1NQW64Htnpmrmeh86IL3WsswzB9rG6QfXtED+lO+SHPBORzkP5InMq4o9eNNJ5mFfVLM1ThBMZ1mA00yZMqVz+pXrSEuZcIfWdAFr4S6jbhB0oQC3iYxGF2tGU+7Q6wr9yEXlq8eKLqX8k6QEXSmQJvKmOtHqai2n99UVdKarWUfxdswepxs49n8H5QTdJJC/fh9MNzF4vop43cj/VqnBdCODegi54nUzz3XYSIrTzRxpNQy+1QjtMP4LjUZouIhIhtMIjkwkodMoHYk8CBol8JACr1E8hZzpNUrPWY44jeI4SoZpFCOTQ3zIQXZoJHY/rdgBEQAgDAMx/65jIga4A7a233JIuU552PLFZdjK2JcFLFIwRKnIYxHqYhnDvIqNDkMv0WKEnBK3RvArEXSE4RHLByAMVBnQNPBtgORA2gHXAfND4fCqj1/ClDoICj8rGDL0Qy4AAAAASUVORK5CYII=);
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% 100%;
} }
\ No newline at end of file
<template>
<view class="wrap">
<view class="store-info my-2 flex j-star a-center" v-if="storeInfo">
<image
class="logo"
:src="baseUrl + '/' + storeInfo.shop_img"
mode="aspectFit"
/>
<view class="introduct flex-1 flex flex-column j-between a-start">
<view class="font-32">{{storeInfo.shop_name || ''}}</view>
<view class="detail font-24">简介: {{storeInfo.shop_intro || ''}}</view>
</view>
</view>
<view class="store-introduct">
<view class="font-28 font-bold">基本信息</view>
<view class="store-item py-2 font-28">
<text class="hd">公司名称</text>
<text class="flex-1">{{storeInfo.shop_name}}</text>
</view>
<view class="store-item py-2 font-28">
<text class="hd">所在地</text>
<text class="flex-1"></text>
</view>
<view class="store-item py-2 font-28">
<text class="hd">详细地址</text>
<text class="flex-1">{{storeInfo.address}}</text>
</view>
<view class="store-item py-2 font-28">
<text class="hd">联系电话</text>
<text class="flex-1 theme">{{storeInfo.shop_tel}}</text>
</view>
<view class="store-item py-2 font-28">
<text class="hd">营业时间</text>
<text class="flex-1">{{startT + '' + endT}}</text>
</view>
<view class="store-item py-2 font-28">
<text class="hd">创建时间</text>
<text class="flex-1"></text>
</view>
</view>
</view>
</template>
<script>
import { mapState } from 'vuex'
import { baseUrl } from '@/config/index.js'
const weeks = {
1: '周一',
2: '周二',
3: '周三',
4: '周四',
5: '周五',
6: '周六',
7: '周日',
}
export default {
data() {
return {
baseUrl
}
},
computed: {
...mapState({
storeInfo: state => state.user.storeInfo
}),
startT() {
return weeks[this.storeInfo.business_week_start]
},
endT() {
return weeks[this.storeInfo.business_week_end]
}
}
}
</script>
<style lang="scss" scoped>
.store-info {
@include borderBox(20rpx, 40rpx);
width: 690rpx;
height: 220rpx;
margin: 20rpx auto;
background-color: #fff;
border-radius: 8rpx;
.logo {
flex: 0 0 140rpx;
width: 140rpx;
height: 140rpx;
border-radius: 8rpx;
}
.introduct {
height: 140rpx;
.detail {
@include text-ellipsis(3);
}
}
}
.store-introduct {
@include borderBox(20rpx, 20rpx);
width: 690rpx;
margin: 0 auto;
background-color: #fff;
.store-item {
display: flex;
justify-content: space-between;
align-items: center;
text-align: right;
border-bottom: 1rpx solid $line;
&:last-child {
border-bottom: none;
}
.hd {
text-align: left;
flex: 0 0 120rpx;
color: $desc;
}
.theme {
color: $primary;
}
}
}
</style>
...@@ -14,7 +14,10 @@ class LoadMore { ...@@ -14,7 +14,10 @@ class LoadMore {
if(!isFunction(cb)) return { status: false, data: null, msg: '参数类型不正确' } if(!isFunction(cb)) return { status: false, data: null, msg: '参数类型不正确' }
if(this.flat) return { status: false, data: null, msg: '请求中,请勿重复操作' } if(this.flat) return { status: false, data: null, msg: '请求中,请勿重复操作' }
// !!this.totalpage 用于判断是否是初始值0 // !!this.totalpage 用于判断是否是初始值0
if(this.totalPage && (this.page > this.totalPage)) return { status: false, data: null, msg: '没有更多页面了' } if(this.totalPage && (this.page > this.totalPage)) {
Toast({title: '没有更多数据了'})
return { status: false, data: null, msg: '没有更多页面了' }
}
const requestParams = Object.assign(params, { const requestParams = Object.assign(params, {
page: this.page, page: this.page,
pagenum: this.pagenum pagenum: this.pagenum
......
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