From 53ad1e956838a9b5a21380a6b20e6f4f90f37f7e Mon Sep 17 00:00:00 2001 From: songbingqi <2272578756@qq.com> Date: Tue, 21 Jun 2022 01:23:24 +0800 Subject: [PATCH] 修改 店铺选择 页面 --- menuSubPackage/pages/areaSelect/areaSelect.vue | 163 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------------- pages.json | 2 +- pages/menu/menu.vue | 7 +++++++ pages/mine/mine.vue | 4 ++++ static/imgs/qupinchang.png | Bin 0 -> 1318 bytes 5 files changed, 122 insertions(+), 54 deletions(-) create mode 100644 static/imgs/qupinchang.png diff --git a/menuSubPackage/pages/areaSelect/areaSelect.vue b/menuSubPackage/pages/areaSelect/areaSelect.vue index b220f43..6735f3e 100644 --- a/menuSubPackage/pages/areaSelect/areaSelect.vue +++ b/menuSubPackage/pages/areaSelect/areaSelect.vue @@ -1,17 +1,36 @@ <template> <view ew class="product-list"> + <view class="provice_city"> + <view class="text"> + <text>{{areaName.proviceName}}-</text> + <text v-show="areaName.proviceName!=areaName.cityName">{{areaName.cityName}}-</text> + <text>{{areaName.disName}}</text> + </view> + <view class="icon"> + <image :style="{'height':'100%','width':'100%'}" :src="'../../../static/imgs/jiantouhei.png'" /> + </view> + </view> <div v-for="item in list" :key="item.id" @click="selectedShop(item)" class="shop_item"> <div class="header"> <h3>{{ item.name }}</h3> - <span v-if="item.distance && item.distance!=-1">距离 {{ item.distance }}</span> + <view class="adressBox"> + <view> + <u-icon class="map" name="map" color="#999999" size="14"></u-icon> + </view> + <view class="address">{{ item.address }}</view> + </view> + <view class="timeBox"> + <view> + <u-icon name="clock" color="#999999" size="14"></u-icon> + </view> + <view class="time">{{ item.startTime }} - {{ item.endTime }}</view> + </view> </div> + <view class="line"></view> <div class="dec"> - <div class="address">{{ item.address }}</div> - <a class="xaidan">去下单</a> - </div> - <div class="time"> - <u-icon name="clock" color="#2979ff" size="16"></u-icon> - <div>营业时间:{{ item.startTime }} - {{ item.endTime }}</div> + <view :style="{'height':'34rpx'}" v-show="item.distance && item.distance!=-1"></view> + <view class="goshop"></view> + <view :style="{'height':'34rpx'}" class="distance" v-show="item.distance && item.distance!=-1">距离 {{ item.distance }}</view> </div> </div> </view> @@ -25,11 +44,13 @@ export default { return { show: true, columns: [], - list: [] + list: [], + areaName:{} } }, onShow() { this.list = uni.getStorageSync('shops'); + this.areaName = uni.getStorageSync('areaName') }, methods: { selectedShop(item) { @@ -42,72 +63,108 @@ export default { </script> <style lang="scss" scoped> +.product-list{ + background: #F2F2F2; + height:100vh ; + overflow: auto; +} + +.provice_city{ + height: 62rpx; + background: #FFFFFF; + display: flex; + justify-content: flex-start; + padding: 12rpx 32rpx; + align-items: center; + .text{ + font-size: 26rpx; + font-family: PingFangSC-Semibold, PingFang SC; + font-weight: 600; + color: #000000; + line-height: 36rpx; + } + .icon { + width: 22rpx; + margin-left: 16rpx; + height: 24rpx; + display: flex; + align-items: center; + } +} .shop_item { width: 90%; - height: 264rpx; + min-height: 264rpx; background: #FFFFFF; - border-radius: 10rpx; - border: 2rpx solid #006ECF; - padding: 32rpx; + border: 1px solid #003AE9; + padding: 25rpx 32rpx; box-sizing: border-box; margin: 30rpx auto; + display: flex; + justify-content: flex-start; + align-items: center; .header { - display: flex; - align-items: center; - justify-content: space-between; - + margin-right: 30rpx; h3 { font-size: 28rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; - color: #000000; + color: #333333; } - - span { - font-size: 24rpx; - font-family: PingFangSC-Regular, PingFang SC; - font-weight: 400; - color: #666666; + .adressBox{ + width: 348rpx; + margin-top: 14rpx; + display: flex; + justify-content: flex-start; + .address{ + margin-left: 12rpx; + font-size: 24rpx; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #999999; + } + } + .timeBox{ + margin-top: 11rpx; + display: flex; + align-items: center; + justify-content: flex-start; + .time{ + margin-left: 12rpx; + font-size: 24rpx; + font-family: ArialMT; + color: #999999; + } } } - + .line { + height: 146rpx; + border: 1rpx solid #979797; + } .dec { + margin-left: 43rpx; display: flex; - justify-content: space-between; - margin-top: 22rpx; - - .address { - font-size: 24rpx; - font-family: PingFangSC-Regular, + flex-direction: column; + height: 146rpx; + justify-content: space-around; + view{ + vertical-align: baseline; + } + .goshop { + width: 167rpx; + height: 64rpx; + background: url('@/static/imgs/qupinchang.png') center center no-repeat; } - .xaidan { + .distance { font-size: 24rpx; - font-family: PingFangSC-Medium, PingFang SC; - font-weight: 500; - color: #FFFFFF; - width: 150rpx; - min-width: 150rpx; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #999999; text-align: center; - height: 40rpx; - line-height: 40rpx; - background: #006ECF; - border-radius: 6px; - display: block; - margin-left: 20rpx; + line-height: 50rpx; } - } - - .time { - display: flex; - justify-content: space-between; - align-items: center; - font-size: 20rpx; - font-family: PingFangSC-Regular, PingFang SC; - font-weight: 400; - color: #333333; - margin-top: 30rpx; + } } </style> \ No newline at end of file diff --git a/pages.json b/pages.json index 64b7fe8..572d658 100644 --- a/pages.json +++ b/pages.json @@ -42,7 +42,7 @@ { "path": "pages/areaSelect/areaSelect", "style": { - "navigationBarTitleText": "", + "navigationBarTitleText": "选择门店", "enablePullDownRefresh": false } } diff --git a/pages/menu/menu.vue b/pages/menu/menu.vue index 83e3f75..b933fe6 100644 --- a/pages/menu/menu.vue +++ b/pages/menu/menu.vue @@ -188,10 +188,17 @@ export default { changeHandler() { }, confirm(res) { const { value } = res; + console.log(value) + const areaName = { + proviceName:value[0]&&value[0].name, + cityName:value[1]&&value[1].name, + disName:value[2]&&value[2].name + } const shops = value[2].shops; this.show = false; // console.log(shops); uni.setStorageSync('shops', shops); + uni.setStorageSync('areaName', areaName); uni.navigateTo({ url: '/menuSubPackage/pages/areaSelect/areaSelect' }) }, // 手机号授权登录 diff --git a/pages/mine/mine.vue b/pages/mine/mine.vue index d6963cb..8a0d03e 100644 --- a/pages/mine/mine.vue +++ b/pages/mine/mine.vue @@ -167,6 +167,7 @@ button::after { } .mod11 { + border-radius: 0rpx; box-sizing: border-box; padding: 32rpx; width: 686rpx; @@ -195,6 +196,9 @@ button::after { border-radius: 50%; } } +.mod11::after{ + border-radius: 0rpx; +} .contents { display: flex; diff --git a/static/imgs/qupinchang.png b/static/imgs/qupinchang.png new file mode 100644 index 0000000..4add2eb Binary files /dev/null and b/static/imgs/qupinchang.png differ -- libgit2 0.26.0