积分商城 添加地址
This commit is contained in:
魏啾
5
App.vue
5
App.vue
@@ -1,9 +1,10 @@
|
||||
<script>
|
||||
import useStorage from '@/utils/useStroage.js';
|
||||
export default {
|
||||
onLaunch: function() {
|
||||
// console.log('App Launch');
|
||||
useStorage.set('menuInfo', uni.getMenuButtonBoundingClientRect());
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.cache.set('menuInfo', uni.getMenuButtonBoundingClientRect());
|
||||
// #endif
|
||||
},
|
||||
onShow: function() {
|
||||
// console.log('App Show');
|
||||
|
||||
137
components/pick-regions/pick-regions.vue
Normal file
137
components/pick-regions/pick-regions.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<picker mode="multiSelector"
|
||||
:value="multiIndex"
|
||||
:range="multiArray"
|
||||
@change="handleValueChange"
|
||||
@columnchange="handleColumnChange">
|
||||
<slot></slot>
|
||||
</picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const CHINA_REGIONS = require('./regions.json')
|
||||
export default {
|
||||
props:{
|
||||
defaultRegions:{
|
||||
type:Array,
|
||||
default(){
|
||||
return []
|
||||
}
|
||||
},
|
||||
defaultRegionCode:{
|
||||
type:String
|
||||
},
|
||||
defaultRegion:[String,Array]
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cityArr:CHINA_REGIONS[0].childs,
|
||||
districtArr:CHINA_REGIONS[0].childs[0].childs,
|
||||
multiIndex: [0, 0, 0],
|
||||
isInitMultiArray:true,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
defaultRegion:{
|
||||
handler(region,oldRegion){
|
||||
if(Array.isArray(region)){
|
||||
// 避免传的是字面量的时候重复触发
|
||||
oldRegion = oldRegion || []
|
||||
if(region.join('')!==oldRegion.join('')){
|
||||
this.handleDefaultRegion(region)
|
||||
}
|
||||
}else if(region&®ion.length == 6){
|
||||
this.handleDefaultRegion(region)
|
||||
}else{
|
||||
console.warn('defaultRegion非有效格式')
|
||||
}
|
||||
},
|
||||
immediate:true,
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
multiArray(){
|
||||
return this.pickedArr.map(arr=>arr.map(item=>item.name))
|
||||
},
|
||||
pickedArr(){
|
||||
// 进行初始化
|
||||
if(this.isInitMultiArray){
|
||||
return [
|
||||
CHINA_REGIONS,
|
||||
CHINA_REGIONS[0].childs,
|
||||
CHINA_REGIONS[0].childs[0].childs
|
||||
]
|
||||
}
|
||||
return [CHINA_REGIONS,this.cityArr,this.districtArr];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleColumnChange(e){
|
||||
// console.log(e);
|
||||
this.isInitMultiArray = false;
|
||||
const that = this;
|
||||
let col = e.detail.column;
|
||||
let row = e.detail.value;
|
||||
that.multiIndex[col] = row;
|
||||
try{
|
||||
switch(col){
|
||||
case 0:
|
||||
if(CHINA_REGIONS[that.multiIndex[0]].childs.length==0){
|
||||
that.cityArr = that.districtArr = [CHINA_REGIONS[that.multiIndex[0]]]
|
||||
break;
|
||||
}
|
||||
that.cityArr = CHINA_REGIONS[that.multiIndex[0]].childs
|
||||
that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs
|
||||
break;
|
||||
case 1:
|
||||
that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs
|
||||
break;
|
||||
case 2:
|
||||
break;
|
||||
}
|
||||
}catch(e){
|
||||
// console.log(e);
|
||||
that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[0].childs
|
||||
}
|
||||
|
||||
},
|
||||
handleValueChange(e){
|
||||
// 结构赋值
|
||||
let [index0,index1,index2] = e.detail.value;
|
||||
let [arr0,arr1,arr2] = this.pickedArr;
|
||||
let address = [arr0[index0],arr1[index1],arr2[index2]];
|
||||
// console.log(address);
|
||||
this.$emit('getRegion',address)
|
||||
},
|
||||
handleDefaultRegion(region){
|
||||
const isCode = !Array.isArray(region)
|
||||
this.isInitMultiArray = false;
|
||||
let children = CHINA_REGIONS
|
||||
for(let i=0;i<3;i++){
|
||||
for(let j=0;j<children.length;j++){
|
||||
let condition = isCode?children[j].code==region.slice(0,(i+1)*2):children[j].name.includes(region[i]);
|
||||
if(condition){
|
||||
// 匹配成功进行赋值
|
||||
// console.log(i,j,children.length-1);
|
||||
children = children[j].childs;
|
||||
if(i==0){
|
||||
this.cityArr = children
|
||||
}else if(i==1){
|
||||
this.districtArr = children
|
||||
}
|
||||
this.$set(this.multiIndex,i,j)
|
||||
// console.log(this.multiIndex);
|
||||
break;
|
||||
}else{
|
||||
// 首次匹配失败就用默认的初始化
|
||||
// console.log(i,j,children.length-1);
|
||||
if(i==0 && j==(children.length-1)){
|
||||
this.isInitMultiArray = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
1
components/pick-regions/regions.json
Normal file
1
components/pick-regions/regions.json
Normal file
File diff suppressed because one or more lines are too long
@@ -10,6 +10,7 @@ const baseUrlwws = 'wss://cashier.sxczgkj.cn/cashierService' // 线上
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
const baseUrl = debug ? proxyApi : 'http://192.168.2.161:9889/cashierService/' // 线上
|
||||
const baseUrlwws = debug ? proxyApi : 'http://192.168.2.161:9889/cashierService/' // 线上
|
||||
// #endif
|
||||
// import VConsole from "./vConsole.js"
|
||||
// if (debug) {
|
||||
|
||||
46
pages.json
46
pages.json
@@ -72,11 +72,55 @@
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的优惠卷"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/shop/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "积分商城",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/shop/detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "积分明细",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/shop/shopinfo",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品详情",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/address/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "地址列表",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/address/edit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "添加地址",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/shop/confirm",
|
||||
"style": {
|
||||
"navigationBarTitleText": "确认订单",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "银收客",
|
||||
"navigationBarTitleText": "美味抢先点",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"backgroundColor": "#F2F2F2"
|
||||
},
|
||||
|
||||
@@ -11,9 +11,11 @@
|
||||
<view style="width: 36px; height: 36px;border-radius: 10rpx;">
|
||||
<button open-type="chooseAvatar" @chooseavatar='onChooseAvatar'
|
||||
style="padding: 0;margin: 0; width: 36px; height: 36px;border-radius: 10rpx;">
|
||||
<image style="width: 36px; height: 36px;" v-if="userInfo.avatar" :src="userInfo.avatar" mode="aspectFill">
|
||||
<image style="width: 36px; height: 36px;" v-if="userInfo.avatar" :src="userInfo.avatar"
|
||||
mode="aspectFill">
|
||||
</image>
|
||||
<image style="width: 36px; height: 36px;" v-else src="@/static/avatar.png" mode="aspectFill">
|
||||
<image style="width: 36px; height: 36px;" v-else src="@/static/avatar.png"
|
||||
mode="aspectFill">
|
||||
</image>
|
||||
</button>
|
||||
</view>
|
||||
@@ -68,7 +70,7 @@
|
||||
footerBanners: [require('@/static/footer_banner1.png')],
|
||||
shopUser: {},
|
||||
userInfo: {},
|
||||
shopInfo:{}
|
||||
shopInfo: {}
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
@@ -83,7 +85,7 @@
|
||||
onShow() {
|
||||
if (uni.cache.get('token')) {
|
||||
this.loginwxuserInfo()
|
||||
}else{
|
||||
} else {
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
@@ -105,6 +107,7 @@
|
||||
}
|
||||
},
|
||||
scanCodehandle() {
|
||||
// #ifndef H5
|
||||
uni.scanCode({
|
||||
success: (res) => {
|
||||
let tableCode = this.getQueryString(decodeURIComponent(res.result), 'code')
|
||||
@@ -113,8 +116,17 @@
|
||||
tableCode: tableCode,
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log(err)
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
uni.pro.navigateTo('order_food/order_food', {
|
||||
tableCode: '3000103958',
|
||||
})
|
||||
// #endif
|
||||
|
||||
},
|
||||
memberindex() {
|
||||
@@ -128,7 +140,7 @@
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
|
||||
// / 更换头像
|
||||
onChooseAvatar(e) {
|
||||
uni.showLoading({
|
||||
|
||||
@@ -80,30 +80,6 @@
|
||||
console.log(err)
|
||||
}
|
||||
});
|
||||
|
||||
// uni.pro.navigateTo('pay_code/pay_code', {
|
||||
// nickName:userInfo.nickName,
|
||||
// nickName:userInfo.nickName
|
||||
// })
|
||||
// uni.getUserInfo({
|
||||
// provider: 'weixin',
|
||||
// success: async (infoRes) => {
|
||||
// console.log(infoRes, 81);
|
||||
// // let res = await this.api.userwxlogin({
|
||||
// // code: uni.cache.get('weixincode'), //临时登录凭证
|
||||
// // rawData: '', // 用户非敏感信息
|
||||
// // rawData: '' // 签名
|
||||
// // })
|
||||
// // if (res) {
|
||||
// // console.log(res, 88)
|
||||
// // }
|
||||
// },
|
||||
// fail: (err) => {
|
||||
// console.log(err)
|
||||
// }
|
||||
// });
|
||||
|
||||
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="towcontentitem">
|
||||
<image class="towcontentitemimage" src="@/static/recharges.png" mode="widthFix"></image>
|
||||
<!-- <image class="towcontentitemimage" src="@/static/recharges.png" mode="widthFix"></image> -->
|
||||
<view class="towcontentitemone flex-start">
|
||||
<image class="towcontentitemoneimage" :src="userInfo.avatar" mode="aspectFill"></image>
|
||||
<view class="towcontentitemonetext flex-colum-start">
|
||||
|
||||
@@ -225,7 +225,12 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// #ifndef MP-WEIXIN
|
||||
menuInfo: uni.getSystemInfo(),
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
menuInfo: uni.getMenuButtonBoundingClientRect(),
|
||||
// #endif
|
||||
paddingBtmSize: 6,
|
||||
tabHeadHeight: 50,
|
||||
isFixed: false,
|
||||
@@ -264,8 +269,6 @@
|
||||
},
|
||||
onLoad(e) {
|
||||
uni.$on('message', this.getMessage)
|
||||
// this.tableCode = e.tableCode
|
||||
// this.scanCodehandle(e.tableCode)
|
||||
if (e.q) {
|
||||
this.scanCodehandle(e.q)
|
||||
} else {
|
||||
|
||||
321
pages/user/address/edit.vue
Normal file
321
pages/user/address/edit.vue
Normal file
@@ -0,0 +1,321 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="content_box">
|
||||
<view class="content_box_item flex-start">
|
||||
<view class="content_box_item_one">
|
||||
联系人
|
||||
</view>
|
||||
<view class="content_box_item_tow">
|
||||
<input type="text" v-model="form.name" placeholder="请填写收货人姓名" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_box_item flex-start">
|
||||
<view class="content_box_item_one">
|
||||
联系电话
|
||||
</view>
|
||||
<view class="content_box_item_tow">
|
||||
<input type="number" v-model="form.mobile" maxlength="11"
|
||||
placeholder="请填写收货人手机号码" />
|
||||
</view>
|
||||
</view>
|
||||
<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
|
||||
<view class="content_box_item flex-start">
|
||||
<view class="content_box_item_one">
|
||||
所在地区
|
||||
</view>
|
||||
<view class="content_box_item_tow flex-start">
|
||||
<input type="text" v-model="regionName" disabled="disabled" placeholder="省市区、乡镇等" />
|
||||
<!-- <image class="content_box_itemimage" @click="chooseLocation" src="@/static/address.png" mode="aspectFill">
|
||||
</image> -->
|
||||
</view>
|
||||
</view>
|
||||
</pick-regions>
|
||||
<!-- <view class="content_box_item flex-start">
|
||||
<view class="content_box_item_one">
|
||||
所在街道
|
||||
</view>
|
||||
<view class="content_box_item_tow">
|
||||
<input type="text" v-model="form.name" placeholder="填写街道" />
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="content_box_item flex-start">
|
||||
<view class="content_box_item_one">
|
||||
详细地址
|
||||
</view>
|
||||
<view class="content_box_item_tow">
|
||||
<input type="text" v-model="form.address" placeholder="请填写详细地址" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_box_tow flex-between">
|
||||
<view class="content_box_tow_one">
|
||||
设为默认地址
|
||||
</view>
|
||||
<u-switch v-model="showis_default" size="20" @change="change"></u-switch>
|
||||
</view>
|
||||
<view class="positionfixed flex-center" @click="usereditaddress">
|
||||
保存
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import pickRegions from '@/components/pick-regions/pick-regions.vue'
|
||||
export default {
|
||||
components: {
|
||||
pickRegions
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
region: [],
|
||||
showis_default: true,
|
||||
defaultRegionCode: '610112', //默认未央区
|
||||
height: '',
|
||||
form: {
|
||||
regionName: '',
|
||||
type: ''
|
||||
},
|
||||
valueswitch: false
|
||||
};
|
||||
},
|
||||
async onLoad(e) {
|
||||
this.form.id = e.id
|
||||
if (e.type == 1) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '添加地址'
|
||||
})
|
||||
} else {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '修改地址'
|
||||
})
|
||||
let res = await this.api.usereaddressshow({
|
||||
id: this.form.id
|
||||
})
|
||||
console.log(res)
|
||||
if (res) {
|
||||
this.form = res
|
||||
if (res.is_default == 1) {
|
||||
this.showis_default = true
|
||||
} else {
|
||||
this.showis_default = false
|
||||
}
|
||||
}
|
||||
}
|
||||
this.form.type = e.type
|
||||
},
|
||||
onShow() {},
|
||||
watch: {},
|
||||
computed: {
|
||||
regionName() {
|
||||
// 转为字符串
|
||||
let res = null
|
||||
if (this.region.length == 0) {
|
||||
res = this.form.province + this.form.city + this.form.area
|
||||
} else {
|
||||
res = this.region.map(item => item.name).join(' ')
|
||||
}
|
||||
return res
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
this.showis_default = e
|
||||
console.log('change', e);
|
||||
},
|
||||
async usereditaddress() {
|
||||
if (this.form.name == null || this.form.name == '') {
|
||||
uni.showToast({
|
||||
title: '请输入姓名',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.mobile == null || this.form.mobile == '') {
|
||||
uni.showToast({
|
||||
title: '请输入电话号码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.province == null || this.form.province == '') {
|
||||
uni.showToast({
|
||||
title: '请选择省，市，区',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.address == null || this.form.address == '') {
|
||||
uni.showToast({
|
||||
title: '请输入详细地址',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
let res = await this.api.usereditaddress({
|
||||
id: this.form.id, //地址ID
|
||||
province: this.form.province, //省
|
||||
city: this.form.city, //市
|
||||
area: this.form.area, //区
|
||||
address: this.form.address, //详细地址
|
||||
name: this.form.name, //姓名
|
||||
mobile: this.form.mobile, //电话
|
||||
lng: this.form.lng, //经度
|
||||
is_default: this.showis_default == true ? 1 : '', //1 默认
|
||||
lat: this.form.lat, //维度
|
||||
type: this.form.type //1 添加 2修改
|
||||
})
|
||||
console.log(res)
|
||||
if (res == 1) {
|
||||
uni.showToast({
|
||||
title: this.form.type == 1 ? '添加成功' : '修改成功',
|
||||
icon: 'none'
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1000);
|
||||
}
|
||||
},
|
||||
handleGetRegion(region) {
|
||||
console.log(111, region)
|
||||
this.region = region
|
||||
this.form.province = region[0].name
|
||||
this.form.city = region[1].name
|
||||
this.form.area = region[2].name
|
||||
|
||||
},
|
||||
chooseLocation() {
|
||||
uni.chooseAddress({
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
this.form.address = res.address
|
||||
this.form.lat = res.latitude
|
||||
this.form.lng = res.longitude
|
||||
this.lnglat = res.latitude + '-' + res.longitude
|
||||
console.log('位置名称：' + res.name);
|
||||
console.log('详细地址：' + res.address);
|
||||
console.log('纬度：' + res.latitude);
|
||||
console.log('经度：' + res.longitude);
|
||||
},
|
||||
fail: (e) => {
|
||||
console.log(e)
|
||||
// uni.getSetting({
|
||||
// success: function(res) {
|
||||
// var statu = res.authSetting;
|
||||
// console.log(statu);
|
||||
// if (!statu['scope.userLocation']) {
|
||||
// console.log(123);
|
||||
// uni.showModal({
|
||||
// title: '是否授权当前位置',
|
||||
// content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
|
||||
// success(tip) {
|
||||
// if (tip.confirm) {
|
||||
// uni.authorize({
|
||||
// scope: 'scope.userLocation',
|
||||
// success:()=> {
|
||||
// this.chooseLocation()
|
||||
// }
|
||||
// })
|
||||
// } else {
|
||||
// uni.showToast({
|
||||
// title: '授权失败',
|
||||
// icon: 'none',
|
||||
// duration: 1000
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
}
|
||||
})
|
||||
},
|
||||
edit(e) {
|
||||
uni.pro.navigateTo('my/address/edit', e.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 30rpx;
|
||||
|
||||
.content_box {
|
||||
padding-left: 40rpx;
|
||||
background: #FFF;
|
||||
|
||||
.content_box_item {
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
border-bottom: 1rpx solid #F6F6F6;
|
||||
|
||||
.content_box_item_one {
|
||||
width: 112rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.content_box_item_tow {
|
||||
flex: auto;
|
||||
padding-left: 80rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #CCCCCC;
|
||||
|
||||
input {
|
||||
flex: auto;
|
||||
height: 100%;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
}
|
||||
|
||||
.content_box_itemimage {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content_box_tow {
|
||||
margin-top: 24rpx;
|
||||
padding: 34rpx 44rpx;
|
||||
background: #FFF;
|
||||
|
||||
.content_box_tow_one {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.positionfixed {
|
||||
position: fixed;
|
||||
background: #f6f6f6;
|
||||
width: 90%;
|
||||
bottom: 50rpx;
|
||||
left: 5%;
|
||||
padding: 24rpx 34rpx;
|
||||
text-align: center;
|
||||
background:#f0cb66;
|
||||
border-radius: 46rpx;
|
||||
font-size: 30rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
244
pages/user/address/index.vue
Normal file
244
pages/user/address/index.vue
Normal file
@@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<view class="content" >
|
||||
<view class="contentitem" v-for="(item,index) in list" :key="index" @click.stop="order_fn(item)">
|
||||
<view class="contentitemone flex-start">
|
||||
<view class="contentitemone_textone">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="contentitemone_textyow">
|
||||
{{item.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentitemtow ">
|
||||
{{item.province}}{{item.area}}{{item.city}}{{item.address}}
|
||||
</view>
|
||||
<view class="contentitemthere flex-between">
|
||||
<view class="contentitemthereone flex-start" @click.stop="edit(item)">
|
||||
<u-icon v-if="item.is_default == 1" style="margin-right: 10rpx;" name="checkmark-circle-fill"
|
||||
color="##9397c1" size="18"></u-icon>
|
||||
<view v-else class="contentitemthereonecircle">
|
||||
|
||||
</view>
|
||||
默认地址
|
||||
</view>
|
||||
<view class="contentitemtheretow flex-start">
|
||||
<text @click.stop="edit(item)">编辑</text>
|
||||
<text style="margin-left: 60rpx;" @click.stop="clickdelete(item)">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="positionfixed flex-center" @click="add">
|
||||
<u-icon name="plus" color="#FFF" size="24"></u-icon>
|
||||
<view style="margin-left: 20rpx;">添加地址</view>
|
||||
</view>
|
||||
<view v-if="list.length==0 && is_end == true" class="flex-colum">
|
||||
<image style="margin-top: 100rpx;" :src="bgnothave" mode="aspectFill">
|
||||
</image>
|
||||
</view>
|
||||
<u-loadmore :status="form.status" />
|
||||
<view :style="{height:height}"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgnothave: uni.getStorageSync('bgnothave'),
|
||||
height: '',
|
||||
is_order: 0,
|
||||
list: [],
|
||||
is_end: false,
|
||||
form: {
|
||||
page: 1,
|
||||
status: 'loadmore',
|
||||
},
|
||||
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
this.is_order = e.order
|
||||
},
|
||||
onReachBottom() {
|
||||
this.usermyaddresslist()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
var query = uni.createSelectorQuery().in(this).select('.positionfixed')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.height = ele.height + 50 + "px";
|
||||
that = null;
|
||||
}
|
||||
})
|
||||
}).exec();
|
||||
},
|
||||
onShow() {
|
||||
// this.inif()
|
||||
},
|
||||
methods: {
|
||||
async usermyaddresslist() {
|
||||
let res = await this.api.usermyaddresslist({
|
||||
page: this.form.page
|
||||
})
|
||||
if (res.length == 0) {
|
||||
this.is_end = true
|
||||
this.form.status = 'nomore'
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
this.list = [...this.list, ...res];
|
||||
if (res.length == 10) {
|
||||
this.form.status = 'loading';
|
||||
} else {
|
||||
this.is_end = true;
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
order_fn(item) {
|
||||
if (this.is_order == 1) {
|
||||
uni.$emit('update', JSON.stringify(item));
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
add() {
|
||||
uni.pro.navigateTo('my/address/edit', {
|
||||
type: 1
|
||||
})
|
||||
},
|
||||
edit(e) {
|
||||
uni.pro.navigateTo('my/address/edit', {
|
||||
type: 2,
|
||||
id: e.id
|
||||
})
|
||||
},
|
||||
inif() {
|
||||
this.list = []
|
||||
this.is_end = false,
|
||||
this.form = {
|
||||
page: 1,
|
||||
status: 'loadmore',
|
||||
},
|
||||
this.usermyaddresslist()
|
||||
},
|
||||
async clickdelete(e) {
|
||||
var this_ = this
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认删除该地址吗？',
|
||||
async success(data) {
|
||||
if (data.confirm) {
|
||||
let res = await this_.api.useredeleteaddress({
|
||||
id: e.id
|
||||
})
|
||||
if (res) {
|
||||
this_.inif()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 30rpx;
|
||||
|
||||
.positionfixed {
|
||||
position: fixed;
|
||||
background: #f6f6f6;
|
||||
width: 80%;
|
||||
bottom: 50rpx;
|
||||
left: 10%;
|
||||
padding: 24rpx 34rpx;
|
||||
text-align: center;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 46rpx;
|
||||
font-size: 30rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.contentitem {
|
||||
padding: 32rpx 40rpx;
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
border-radius: 18rpx;
|
||||
|
||||
.contentitemone {
|
||||
.contentitemone_textone {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.contentitemone_textyow {
|
||||
margin-left: 40rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.contentitemtow {
|
||||
margin-top: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.contentitemtow::after {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
margin: 32rpx 0 20rpx 0;
|
||||
width: 100%;
|
||||
height: 1rpx;
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
||||
.contentitemthere {
|
||||
.contentitemthereone {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #5C685D;
|
||||
}
|
||||
|
||||
.contentitemthereonecircle {
|
||||
margin-right: 10rpx;
|
||||
border-radius: 50%;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
border: 2rpx solid #666666;
|
||||
}
|
||||
|
||||
.contentitemtheretow {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
692
pages/user/shop/confirm.vue
Normal file
692
pages/user/shop/confirm.vue
Normal file
@@ -0,0 +1,692 @@
|
||||
<template>
|
||||
<view class="content" :style="[theme]">
|
||||
<view class="onecontent">
|
||||
<view class="onecontentone flex-start">
|
||||
<view class="onecontent_one">
|
||||
商品信息
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontenttow flex-start">
|
||||
<view class="onecontenttowitem flex-between" v-for="(item,index) in elist.goods" :key="index">
|
||||
<view class="onecontenttowitem_one flex-start">
|
||||
<image class="onecontenttowitemimage" :src="item.img" mode="aspectFill"></image>
|
||||
<view class="onecontenttowitem_onebox flex-colum-start">
|
||||
<view class="onecontenttowitem_onebox_one">
|
||||
{{item.title || '无'}}
|
||||
</view>
|
||||
<view class="onecontenttowitem_onebox_tow">
|
||||
{{item.spec || '无'}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontenttowitem_tow flex-colum-end">
|
||||
<view class="onecontenttowitem_towstext_one">
|
||||
{{item.price || '无'}}
|
||||
</view>
|
||||
<view class="onecontenttowitem_towstetx_tow">
|
||||
×{{item.number || '无'}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontent" style="margin-top: 32rpx;">
|
||||
<view class="onecontentone flex-between">
|
||||
<view class="onecontent_one">
|
||||
确认地址
|
||||
</view>
|
||||
<u-icon name="arrow-right" color="#000" size="14"></u-icon>
|
||||
</view>
|
||||
<view class="onecontentaddress flex-colum-start" v-if="elist.address" @click="clickaddress">
|
||||
<view class="onecontentaddressone" v-if="formlist.type == 3">
|
||||
{{elist.address.address}}
|
||||
</view>
|
||||
<view class="onecontentaddressone" v-else>
|
||||
{{elist.address.province}}-{{elist.address.city}}-{{elist.address.area}}-{{elist.address.address}}
|
||||
</view>
|
||||
<view class="onecontentaddresstow">
|
||||
{{elist.address.name}}<text style="margin-left: 10rpx;">{{elist.address.mobile}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontentaddress" v-else>
|
||||
<view class="onecontentaddressone" @click="clickaddress">
|
||||
去添加地址
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontent">
|
||||
<!-- <view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
商品金额
|
||||
</view>
|
||||
<view class="therecontenttow_tow">
|
||||
{{elist.number}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
优惠券
|
||||
</view>
|
||||
<view class="therecontenttow_tow">
|
||||
暂无可用
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
运费
|
||||
</view>
|
||||
<view class="therecontenttow_tow">
|
||||
￥{{elist.freight}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
合计
|
||||
</view>
|
||||
<view class="therecontenttow_tow" style="color:#FC5F69;">
|
||||
￥{{elist.price.total_price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="fivecontent">
|
||||
<view class="fivecontentitem flex-between">
|
||||
<view class="fivecontentitem_one">
|
||||
手机号码
|
||||
</view>
|
||||
<view class="fivecontentitem_tow">
|
||||
{{mobile}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontentitem flex-between">
|
||||
<view class="fivecontentitem_one">
|
||||
姓名
|
||||
</view>
|
||||
<view class="fivecontentitem_tow">
|
||||
张雪
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="sixcontent">
|
||||
<view class="sixcontentone flex-between">
|
||||
<view class="sixcontent_one">
|
||||
支付方式
|
||||
</view>
|
||||
</view>
|
||||
<view class="sixcontenttow">
|
||||
<view class="sixcontenttowitem flex-between" @click="clickselect(1)">
|
||||
<view class="sixcontenttowitemone flex-start">
|
||||
<image src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/wx.png" mode="aspectFill"></image>
|
||||
<text class="sixcontenttowitemonetext">微信支付</text>
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<u-icon v-if="pay_type == 1" name="checkmark-circle-fill" color="#333333" size="18"></u-icon>
|
||||
<u-icon v-else name="checkmark-circle-fill" color="#999999" size="18"></u-icon>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="sixcontenttowitem flex-between" @click="clickselect(2)">
|
||||
<view class="sixcontenttowitemone flex-start">
|
||||
|
||||
<image src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/ye.png" mode="aspectFill"></image>
|
||||
<text class="sixcontenttowitemonetext">余额支付</text>
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<u-icon v-if="pay_type == 2" name="checkmark-circle-fill" color="#333333" size="18"></u-icon>
|
||||
<u-icon v-else name="checkmark-circle-fill" color="#999999" size="18"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="fourcontent">
|
||||
<view class="fourcontentone flex-start">
|
||||
<view class="fourcontent_one">
|
||||
须知：
|
||||
</view>
|
||||
</view>
|
||||
<view class="fourcontenttow flex-colum-start">
|
||||
|
||||
</view>
|
||||
</view> -->
|
||||
<view :style="{height:height}">
|
||||
|
||||
</view>
|
||||
<view class="fixedview flex-between">
|
||||
<view class="fixedview_one flex-start">
|
||||
<view class="fixedview_oneone">
|
||||
实付金额：
|
||||
</view>
|
||||
<view class="fixedview_onetow">
|
||||
<text>¥</text>{{elist.price.price}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixedview_tow" @tap="$u.debounce(showpopupclick,1000)">
|
||||
立即付款
|
||||
</view>
|
||||
</view>
|
||||
<u-popup :show="showpopup" @close="closepopup" @open="openpopup" mode="center" :round="10">
|
||||
<view class="u-popupflex-colum flex-colum">
|
||||
<view class="u-popupflex-columview">
|
||||
请输入支付密码
|
||||
</view>
|
||||
<u-code-input v-model="ucodeinputvalue" :maxlength="6" dot @finish="finish"></u-code-input>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showpopup: false,
|
||||
ucodeinputvalue: '',
|
||||
height: '',
|
||||
order_id: '',
|
||||
elist: {
|
||||
address: {
|
||||
|
||||
},
|
||||
price: {
|
||||
total_price: '',
|
||||
id: ''
|
||||
}
|
||||
},
|
||||
mobile: uni.cache.get('loginuser').userinfo.mobile,
|
||||
formlist: {
|
||||
goods_id: ''
|
||||
},
|
||||
pay_type: 1
|
||||
}
|
||||
},
|
||||
async onLoad(e) {
|
||||
// this.elist = JSON.parse(optionItem)
|
||||
this.formlist = e
|
||||
this.formlist.spec = decodeURIComponent(e.spec)
|
||||
let res = await this.api.shoppingindexgoodindexoforders({
|
||||
type: this.formlist.type, // 1购物车 2商品详情页
|
||||
goods_id: this.formlist.goods_id, //商品ID 商品详情页来源时必填
|
||||
car_id: this.formlist.car_id, //购物车ID 1,2 购物车来源时必填
|
||||
number: this.formlist.number, //数量 商品详情页来源时必填
|
||||
spec: this.formlist.spec, //规格 商品详情页来源时必填
|
||||
address_id: this.formlist.address_id, //地址ID 可以为空（为空时返回默认地址）
|
||||
order_id:this.formlist.order_id,
|
||||
})
|
||||
if (res) {
|
||||
this.elist = res
|
||||
this.elist.goods[0].spec = this.formlist.spec
|
||||
if (this.elist.address) {
|
||||
this.elist.address.mobile = res.address.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clickaddress() {
|
||||
uni.pro.navigateTo("user/address/index", {
|
||||
order: 1
|
||||
});
|
||||
uni.$once('update', data => {
|
||||
this.elist.address = JSON.parse(data)
|
||||
if (this.elist.address) {
|
||||
this.elist.address.mobile = this.elist.address.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
|
||||
}
|
||||
this.$forceUpdate();
|
||||
})
|
||||
},
|
||||
openpopup() {
|
||||
console.log('open');
|
||||
},
|
||||
closepopup() {
|
||||
this.showpopup = false
|
||||
},
|
||||
|
||||
finish(e) {
|
||||
this.reservationmakenowsub()
|
||||
},
|
||||
showpopupclick() {
|
||||
if(this.elist.address == null || this.elist.address == undefined){
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '收货地址不能为空'
|
||||
})
|
||||
return false
|
||||
}
|
||||
if (this.pay_type == 1) {
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
this.reservationmakenowsub()
|
||||
return false;
|
||||
} else {
|
||||
if (this.pay_type == 2) {
|
||||
if (this.elist.is_vip_password == 0) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您目前没有设置密码，请先设置支付密码',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/setup/repairpassword'
|
||||
});
|
||||
} else if (res.cancel) {}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.showpopup = true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async reservationmakenowsub() {
|
||||
var datareslane = await this.api.shoppingindexgoodindexsuborder({
|
||||
type: this.formlist.type,
|
||||
goods_id: this.formlist.goods_id, //商品ID 商品详情页来源时必填
|
||||
car_id: this.formlist.car_id, //购物车ID 1,2 购物车来源时必填
|
||||
number: this.formlist.number, //数量 商品详情页来源时必填
|
||||
spec: this.formlist.spec, //规格 商品详情页来源时必填
|
||||
address_id: this.formlist.address_id, //地址ID 可以为空（为空时返回默认地址）
|
||||
pay_type: this.pay_type ,//1微信 2余额卡
|
||||
order_id:this.formlist.order_id
|
||||
})
|
||||
console.log(datareslane, 280)
|
||||
if (datareslane.data) {
|
||||
let res = await this.api.shoppingindexgoodindexgetpayparams({
|
||||
order_id: datareslane.data.order_id,
|
||||
sec_password: this.ucodeinputvalue //安全密码 余额卡支付时有效
|
||||
}) //判断是否支付成功
|
||||
this.ucodeinputvalue = ''
|
||||
console.log(res, 287)
|
||||
if (res.data.pay_status == 0) {
|
||||
this.showpopup = false
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.data.pay_data.payAppId, // 微信支付商户号
|
||||
timeStamp: res.data.pay_data.payTimeStamp, // 时间戳（单位：秒）
|
||||
nonceStr: res.data.pay_data.paynonceStr, // 随机字符串
|
||||
package: res.data.pay_data.payPackage, // 固定值
|
||||
signType: res.data.pay_data.paySignType, //固定值
|
||||
paySign: res.data.pay_data.paySign, //签名
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
uni.redirectTo({
|
||||
url: "/pages/mall/order/ordersuccess?id=" + datareslane.data.order_id,
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
setTimeout(res => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败'
|
||||
})
|
||||
uni.hideLoading()
|
||||
}, 2000)
|
||||
uni.redirectTo({
|
||||
url: "/pages/mall/order/index?e=" +0,
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: "/pages/mall/order/ordersuccess?id=" + datareslane.data.order_id,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.message || res.msg,
|
||||
icon: "none",
|
||||
success() {
|
||||
setTimeout(res => {
|
||||
// if (options.toast) {
|
||||
uni.hideLoading()
|
||||
// }
|
||||
}, 2000)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
clickselect(b) {
|
||||
this.pay_type = b
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
//#ifdef MP-WEIXIN || H5
|
||||
var query = uni.createSelectorQuery().in(this).select('.fixedview')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.height = (ele.height) + "px";
|
||||
that = null;
|
||||
}
|
||||
})
|
||||
}).exec();
|
||||
//#endif
|
||||
//#ifdef MP-ALIPAY
|
||||
my.createSelectorQuery().selectAll('.fixedview').boundingClientRect().exec(ele => {
|
||||
var nodeData = ele[0]
|
||||
var that = this;
|
||||
that.height = (nodeData.height) + "px";
|
||||
that = null;
|
||||
})
|
||||
//#endif
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.onecontentone {
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.onecontent_one {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontent_tow {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-left: 32rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.onecontentaddress {
|
||||
.onecontentaddressone {
|
||||
margin-top: 24rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontentaddresstow {
|
||||
margin-top: 24rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.onecontenttow {
|
||||
width: 100%;
|
||||
|
||||
.onecontenttowitem {
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
|
||||
.onecontenttowitem_one {
|
||||
.onecontenttowitemimage {
|
||||
width: 124rpx;
|
||||
height: 124rpx;
|
||||
}
|
||||
|
||||
.onecontenttowitem_onebox {
|
||||
margin-left: 24rpx;
|
||||
|
||||
.onecontenttowitem_onebox_one {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.onecontenttowitem_onebox_tow {
|
||||
margin-top: 32rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onecontenttowitem_tow {
|
||||
.onecontenttowitem_towstext_one {
|
||||
font-size: 32rpx;
|
||||
font-family: Roboto-Medium, Roboto;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontenttowitem_towstetx_tow {
|
||||
margin-top: 32rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: DIN Alternate-Bold, DIN Alternate;
|
||||
font-weight: bold;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.fivecontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.fivecontentitem:nth-child(2) {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.fivecontentitem {
|
||||
padding: 18rpx 0;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.fivecontentitem_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fivecontentitem_tow {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.therecontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.therecontenttow:nth-child(1) {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.therecontenttow {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.therecontenttow_one {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.therecontenttow_tow {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sixcontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
margin-top: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.sixcontentone {
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.sixcontent_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.sixcontenttow {
|
||||
.sixcontenttowitem {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.sixcontenttowitemone {
|
||||
image {
|
||||
margin-left: 24rpx;
|
||||
width: 31.37rpx;
|
||||
height: 27.34rpx;
|
||||
}
|
||||
|
||||
.sixcontenttowitemonetext {
|
||||
margin-left: 14rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fourcontent {
|
||||
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
margin-top: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.fourcontentone {
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.fourcontent_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.fourcontenttow {
|
||||
margin-top: 16rpx;
|
||||
width: 100%;
|
||||
|
||||
/deep/ img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-popupflex-colum {
|
||||
padding: 80rpx 40rpx;
|
||||
border-radius: 50rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.u-popupflex-columview {
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.fixedview_one {
|
||||
.fixedview_oneone {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fixedview_onetow {
|
||||
font-size: 44rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #F45C4C;
|
||||
font-weight: bold;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_tow {
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 34rpx;
|
||||
padding: 10rpx 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
332
pages/user/shop/detail.vue
Normal file
332
pages/user/shop/detail.vue
Normal file
@@ -0,0 +1,332 @@
|
||||
<template>
|
||||
<view id="wrapper">
|
||||
<view class="nav-wrap" :class="{ 'is-fixed': isFixed }"
|
||||
:style="{ paddingTop: `${menuInfo.top}px`, paddingBottom: `${paddingBtmSize}px` }">
|
||||
<view class="content" :style="{ height: `${menuInfo.height}px`, paddingLeft: `${paddingBtmSize}px` }">
|
||||
<view class="left-btn">
|
||||
<view class="btn" :style="{ width: `${menuInfo.height}px`, height: `${menuInfo.height}px` }"
|
||||
@click="navClickHandle(1)">
|
||||
<u-icon name="arrow-left" :color="isFixed ? '#333' : '#fff'" size="38"></u-icon>
|
||||
</view>
|
||||
<view class="left-btntitle"
|
||||
:style="{ height: `${menuInfo.height}px`,lineHeight:`${menuInfo.height}px`}">
|
||||
积分商城
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop-cover">
|
||||
<image class="img" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/shopindexnav.png" mode="widthFix">
|
||||
</image>
|
||||
<view class="shop-coverone" :style="{ paddingTop: `${menuInfo.top + menuInfo.height + 25}px`}">
|
||||
<view class="shop-coveronebox flex-center">
|
||||
<view style="margin-right: 10rpx;">
|
||||
当前积分
|
||||
</view>
|
||||
<u-icon name="error-circle" color="#fff" size="32"></u-icon>
|
||||
</view>
|
||||
<view class="shop-coveroneboxnuber">
|
||||
5830
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop_content">
|
||||
<view class="shop_contenttitle">积分明细</view>
|
||||
<!-- <view class="shop_contenbox flex-start">
|
||||
<view class="shop_contenboxitem" :class="index == 0?'shop_contenboxitems':''"
|
||||
v-for="(item,index) in shopcontenboxlsit" :key="index">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="shop_contenlist">
|
||||
<view class="shop_contenlistabsolute">
|
||||
<view class="flex-start">
|
||||
<text class="flex-starttext">收入</text>
|
||||
/
|
||||
<text>支出</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop_contenlistitem flex-between" v-for="(item,index) in 6" :key="index">
|
||||
<view class="shop_contenlistitemone flex-colum-start">
|
||||
<view>交易积分-线下收款</view>
|
||||
<view>2023-01-11 17:33:09</view>
|
||||
</view>
|
||||
<view class="shop_contenlistitemtow">+0.02</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash';
|
||||
import navbar from '@/uni_modules/uview-ui/libs/config/props/navbar';
|
||||
import webSocketUtils from '@/common/js/websocket.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
menuInfo: uni.getMenuButtonBoundingClientRect(),
|
||||
paddingBtmSize: 6,
|
||||
isFixed: false,
|
||||
active: 0,
|
||||
titleTopNums: [],
|
||||
shopcontenboxlsit: [{
|
||||
name: '全部'
|
||||
|
||||
},
|
||||
{
|
||||
name: '交易积分'
|
||||
|
||||
}, {
|
||||
name: '活动积分'
|
||||
|
||||
}, {
|
||||
name: '任务积分'
|
||||
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
onPageScroll(e) {
|
||||
if (e.scrollTop >= (this.menuInfo.top + this.menuInfo.height + this.paddingBtmSize) / 2) {
|
||||
this.isFixed = true;
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#000000',
|
||||
backgroundColor: '#ffffff'
|
||||
});
|
||||
} else {
|
||||
this.isFixed = false;
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff',
|
||||
backgroundColor: '#000000'
|
||||
});
|
||||
}
|
||||
this.countScrollTitle(e.scrollTop);
|
||||
},
|
||||
onLoad(e) {
|
||||
|
||||
},
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 导航栏点击
|
||||
navClickHandle(t) {
|
||||
switch (t) {
|
||||
case 1:
|
||||
// 返回
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
countScrollTitle: _.throttle(function(top) {
|
||||
if (this.titleTopNums.length > 1) {
|
||||
for (let i = 0; i <= this.titleTopNums.length - 1; i++) {
|
||||
if (top >= this.titleTopNums[i] && top < this.titleTopNums[i + 1]) {
|
||||
this.titleTopNumIndex = i;
|
||||
}
|
||||
}
|
||||
if (top >= this.titleTopNums[this.titleTopNums.length - 1]) {
|
||||
this.titleTopNumIndex = this.titleTopNums.length - 1;
|
||||
}
|
||||
}
|
||||
}, 100),
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$bg: #fafafa;
|
||||
$tabLeft: 200upx;
|
||||
$itemH: 100upx;
|
||||
$cartH: 90upx;
|
||||
|
||||
.nav-wrap {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 97;
|
||||
|
||||
&.is-fixed {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
|
||||
.left-btn {
|
||||
display: flex;
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: $paddingSize;
|
||||
}
|
||||
}
|
||||
|
||||
.left-btntitle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
text-align: center;
|
||||
font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shop-cover {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
// &::after {
|
||||
// content: '';
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// z-index: 2;
|
||||
// background-color: rgba(0, 0, 0, 0.3);
|
||||
// }
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.shop-coverone {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0rpx 32rpx;
|
||||
z-index: 2;
|
||||
|
||||
.shop-coveronebox {
|
||||
padding: 6rpx 10rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 58rpx 58rpx 58rpx 58rpx;
|
||||
font-family: PingFangSC-Semibold, PingFangSC-Semibold;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.shop-coveroneboxnuber {
|
||||
margin-top: 32rpx;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 74rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shop_content {
|
||||
background: #FFFFFF;
|
||||
border-radius: 26rpx 26rpx 0rpx 0rpx;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
top: -92rpx;
|
||||
|
||||
.shop_contenttitle {
|
||||
padding: 16rpx 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN-Medium;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.shop_contenbox {
|
||||
padding: 0 60rpx;
|
||||
|
||||
.shop_contenboxitem:nth-child(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.shop_contenboxitem {
|
||||
margin-left: 24rpx;
|
||||
padding: 6rpx 10rpx;
|
||||
background: #F9F9F9;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.shop_contenboxitems {
|
||||
background: #F1CB66;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.shop_contenlist {
|
||||
position: relative;
|
||||
margin-top: 32rpx;
|
||||
background: #fff;
|
||||
|
||||
.shop_contenlistabsolute {
|
||||
position: absolute;
|
||||
top: -32rpx;
|
||||
right: 32rpx;
|
||||
|
||||
.flex-start {
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
|
||||
.flex-starttext {
|
||||
color: #FF981E;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shop_contenlistitem {
|
||||
padding: 32rpx 44rpx;
|
||||
border-bottom: 2rpx solid #E5E5E5;
|
||||
|
||||
.shop_contenlistitemone {
|
||||
view:nth-child(1) {
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
view:nth-child(2) {
|
||||
margin-top: 16rpx;
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.shop_contenlistitemtow {
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN-Medium;
|
||||
font-weight: normal;
|
||||
font-size: 32rpx;
|
||||
color: #FF981E;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
400
pages/user/shop/index.vue
Normal file
400
pages/user/shop/index.vue
Normal file
@@ -0,0 +1,400 @@
|
||||
<template>
|
||||
<view id="wrapper">
|
||||
<view class="nav-wrap" :class="{ 'is-fixed': isFixed }"
|
||||
:style="{ paddingTop: `${menuInfo.top}px`, paddingBottom: `${paddingBtmSize}px` }">
|
||||
<view class="content" :style="{ height: `${menuInfo.height}px`, paddingLeft: `${paddingBtmSize}px` }">
|
||||
<view class="left-btn">
|
||||
<view class="btn" :style="{ width: `${menuInfo.height}px`, height: `${menuInfo.height}px` }"
|
||||
@click="navClickHandle(1)">
|
||||
<u-icon name="arrow-left" :color="isFixed ? '#333' : '#fff'" size="38"></u-icon>
|
||||
</view>
|
||||
<view class="left-btntitle"
|
||||
:style="{ height: `${menuInfo.height}px`,lineHeight:`${menuInfo.height}px`}">
|
||||
积分商城
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop-cover">
|
||||
<image class="img" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/shopindexnav.png" mode="widthFix">
|
||||
</image>
|
||||
<view class="shop-coverone" :style="{ paddingTop: `${menuInfo.top + menuInfo.height + 25}px`}">
|
||||
<view class="shop-coveronebox flex-start">
|
||||
<image src="@/static/shop/weitu.png" mode="aspectFill"></image>
|
||||
<view style="margin-left: 10rpx;">
|
||||
当前积分
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop-coveroneboxnuber">
|
||||
5830
|
||||
</view>
|
||||
<navigator url="/pages/user/shop/detail" hover-class="navigator-hover"
|
||||
class="shop-coveroneboxdetail flex-start">
|
||||
<view style="margin-right: 20rpx;">
|
||||
积分明细
|
||||
</view>
|
||||
<u-icon name="arrow-right" color="#666666" size="28"></u-icon>
|
||||
</navigator>
|
||||
<view class="shop-coveroneinput flex-start">
|
||||
<u-search shape="round" searchIconSize='32rpx' height='100%' bgColor='#fff' placeholder="请输入商品"
|
||||
:animation="true" :clearabled="true" v-model="keyword"></u-search>
|
||||
<view class="shop-coveroneinputsouso">
|
||||
搜索
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop_content">
|
||||
<view class="shop_contenttitle">
|
||||
<view class="shop_contenttitleitem" :class="index == 1?'shop_contenttitleitems':''"
|
||||
v-for="(item,index) in shopcontenboxlsit" :key="index">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop_contentlist flex-between">
|
||||
<view class="shop_contentlistitem flex-colum-start" @click="clickshopinfo(item)" v-for="(item,index) in 4" :key="index">
|
||||
<image class="shop_contentlistitemimage" src="@/static/avatar.png" mode="aspectFill"></image>
|
||||
<view class="shop_contentlistitemone">
|
||||
澳洲高级洗发水
|
||||
</view>
|
||||
<view class="shop_contentlistitemtow flex-start">
|
||||
<image src="@/static/shop/weitu.png" mode="aspectFill"></image>
|
||||
<view>
|
||||
30积分
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop_contentlistitemthere flex-between">
|
||||
<view>
|
||||
市场价¥100.00
|
||||
</view>
|
||||
<view>
|
||||
已兑换0390件
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash';
|
||||
import navbar from '@/uni_modules/uview-ui/libs/config/props/navbar';
|
||||
import webSocketUtils from '@/common/js/websocket.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
keyword: '',
|
||||
menuInfo: uni.getMenuButtonBoundingClientRect(),
|
||||
paddingBtmSize: 6,
|
||||
isFixed: false,
|
||||
active: 0,
|
||||
titleTopNums: [],
|
||||
shopcontenboxlsit: [{
|
||||
name: '全部'
|
||||
},
|
||||
{
|
||||
name: '交易积分'
|
||||
}, {
|
||||
name: '活动积分'
|
||||
|
||||
}, {
|
||||
name: '任务积分'
|
||||
|
||||
}, {
|
||||
name: '任务积分'
|
||||
|
||||
}, {
|
||||
name: '任务积分'
|
||||
|
||||
}, {
|
||||
name: '任务积分'
|
||||
|
||||
}, {
|
||||
name: '任务积分'
|
||||
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
onPageScroll(e) {
|
||||
if (e.scrollTop >= (this.menuInfo.top + this.menuInfo.height + this.paddingBtmSize) / 2) {
|
||||
this.isFixed = true;
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#000000',
|
||||
backgroundColor: '#ffffff'
|
||||
});
|
||||
} else {
|
||||
this.isFixed = false;
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff',
|
||||
backgroundColor: '#000000'
|
||||
});
|
||||
}
|
||||
this.countScrollTitle(e.scrollTop);
|
||||
},
|
||||
onLoad(e) {
|
||||
|
||||
},
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
clickshopinfo(item){
|
||||
uni.pro.navigateTo('user/shop/shopinfo',{
|
||||
item:item
|
||||
})
|
||||
},
|
||||
// 导航栏点击
|
||||
navClickHandle(t) {
|
||||
switch (t) {
|
||||
case 1:
|
||||
// 返回
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
countScrollTitle: _.throttle(function(top) {
|
||||
if (this.titleTopNums.length > 1) {
|
||||
for (let i = 0; i <= this.titleTopNums.length - 1; i++) {
|
||||
if (top >= this.titleTopNums[i] && top < this.titleTopNums[i + 1]) {
|
||||
this.titleTopNumIndex = i;
|
||||
}
|
||||
}
|
||||
if (top >= this.titleTopNums[this.titleTopNums.length - 1]) {
|
||||
this.titleTopNumIndex = this.titleTopNums.length - 1;
|
||||
}
|
||||
}
|
||||
}, 100),
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$bg: #fafafa;
|
||||
$tabLeft: 200upx;
|
||||
$itemH: 100upx;
|
||||
$cartH: 90upx;
|
||||
page{
|
||||
background: #fff;
|
||||
}
|
||||
.nav-wrap {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 97;
|
||||
|
||||
&.is-fixed {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
|
||||
.left-btn {
|
||||
display: flex;
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: $paddingSize;
|
||||
}
|
||||
}
|
||||
|
||||
.left-btntitle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
text-align: center;
|
||||
font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shop-cover {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
// &::after {
|
||||
// content: '';
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// z-index: 2;
|
||||
// background-color: rgba(0, 0, 0, 0.3);
|
||||
// }
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.shop-coverone {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0rpx 32rpx;
|
||||
z-index: 2;
|
||||
|
||||
.shop-coveronebox {
|
||||
font-family: PingFangSC-Semibold, PingFangSC-Semibold;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
|
||||
image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.shop-coveroneboxnuber {
|
||||
margin-top: 8rpx;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: bold;
|
||||
font-size: 74rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.shop-coveroneboxdetail {
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.shop-coveroneinput {
|
||||
margin-top: 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 38rpx 38rpx 38rpx 38rpx;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
|
||||
.shop-coveroneinputsouso {
|
||||
border-left: 2rpx solid #E8E8E8;
|
||||
height: 100%;
|
||||
padding: 4rpx 28rpx;
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
line-height: 60 rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shop_content {
|
||||
position: relative;
|
||||
top: 0rpx;
|
||||
margin-top: -24rpx;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 32rpx 32rpx 0rpx 0rpx;
|
||||
padding: 0 28rpx 28rpx 28rpx;
|
||||
|
||||
.shop_contenttitle {
|
||||
width: 100%;
|
||||
padding-top: 32rpx;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
overflow-x: scroll;
|
||||
white-space: nowrap;
|
||||
|
||||
.shop_contenttitleitem:nth-child(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.shop_contenttitleitem {
|
||||
margin-left: 18rpx;
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
font-size: 32rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.shop_contenttitleitems {
|
||||
color: #FF981E;
|
||||
}
|
||||
}
|
||||
|
||||
.shop_contentlist {
|
||||
.shop_contentlistitem {
|
||||
margin-top: 32rpx;
|
||||
width: 48%;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
|
||||
.shop_contentlistitemimage {
|
||||
width: 100%;
|
||||
height: 296rpx;
|
||||
border-radius: 18rpx 18rpx 0 0;
|
||||
}
|
||||
|
||||
.shop_contentlistitemone {
|
||||
padding: 16rpx 16rpx 0 16rpx;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.shop_contentlistitemtow{
|
||||
padding: 16rpx 16rpx 0 16rpx;
|
||||
image{
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
view{
|
||||
margin-left: 6rpx;
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN-Medium;
|
||||
font-weight: normal;
|
||||
font-size: 24rpx;
|
||||
color: #FF981E;
|
||||
}
|
||||
}
|
||||
.shop_contentlistitemthere{
|
||||
padding: 16rpx;
|
||||
width: 100%;
|
||||
view:nth-child(1){
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
font-size: 20rpx;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-decoration-line: line-through;
|
||||
text-transform: none;
|
||||
}
|
||||
view:nth-child(2){
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
font-size: 20rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
559
pages/user/shop/shopinfo.vue
Normal file
559
pages/user/shop/shopinfo.vue
Normal file
@@ -0,0 +1,559 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<image class="contentimage" src="@/static/ewm.png" mode="aspectFill"></image>
|
||||
<view class="contentbox">
|
||||
<view class="contentbox_one">
|
||||
111
|
||||
</view>
|
||||
<view class="contentbox_tow flex-start">
|
||||
<image src="@/static/shop/weitu.png" mode="aspectFill"></image>
|
||||
<view style="margin-left: 10rpx;">
|
||||
当前积分
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentboxtow">
|
||||
<view class="onecontentterewone flex-start">
|
||||
<view class="onecontenttereone_one">
|
||||
商品详情
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="introduction_yow" v-html="list.details">
|
||||
|
||||
</view> -->
|
||||
</view>
|
||||
<view :style="{height:height}">
|
||||
|
||||
</view>
|
||||
<view class="fixedview flex-between">
|
||||
<view class="fixedview_letr flex-start">
|
||||
<view class="fixedview_letr_item flex-colum" @click="eeInfoindex">
|
||||
<image src="@/static/shop/s.png" mode="aspectFill"></image>
|
||||
<text>首页</text>
|
||||
</view>
|
||||
<view class="fixedview_letr_item flex-colum" @click="makePhoneCall">
|
||||
<image src="@/static/shop/k.png" mode="aspectFill"></image>
|
||||
<text>客服</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixedview_tow flex-between">
|
||||
<view class="fixedview_towtow" @click="overlayshowsboxs(2)">
|
||||
立即购买
|
||||
</view>
|
||||
<!-- <view class="fixedview_towtow" style="background: #ccc;">
|
||||
立即购买
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<u-overlay :show="overlayshow">
|
||||
<view class="warp">
|
||||
<view class="rect" @tap.stop>
|
||||
<view class="onerect flex-start">
|
||||
<image class="onecontentone_image" src="@/static/shop/k.png" mode="aspectFill"></image>
|
||||
<view class="nonecontentone_view flex-colum-start">
|
||||
<text class="nonecontentone_view_one">贝尔纳干红葡萄酒</text>
|
||||
<view class="nonecontentone_view_otow flex-start">
|
||||
<image src="@/static/shop/weitu.png" mode="aspectFill"></image>
|
||||
<view style="margin-left: 10rpx;">
|
||||
当前积分
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onerecticon" @click="overlayshow = false">
|
||||
<u-icon @click="overlayshow = false" name="close-circle-fill" color="#000000"
|
||||
size="32"></u-icon>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="towrect" v-for="(item,n) in list.spec" :key="item.id">
|
||||
<view class="towrect_one">
|
||||
{{item.spec_name}}
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<view class="towrect_tow" v-for="(item1,index1) in item.spec_options" :key="index1"
|
||||
@click="overlayshowsbox(item1,index1)">
|
||||
<view
|
||||
:class="[item1.isShow?'noneActive':'',towrecttowclass == index1?'towrect_towtext':'towrect_towtexts']">
|
||||
{{item1.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="thererect flex-between">
|
||||
<view class="thererect_one">
|
||||
购买数量
|
||||
</view>
|
||||
<view class="thererect_tow">
|
||||
<u-number-box v-model="numberbox" :min="1" button-size="24" color="#ffffff"
|
||||
:bgColor="theme.cartpieces" iconStyle="color: #fff" integer></u-number-box>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fuorrect flex-between">
|
||||
<view class="fuorrect_one">
|
||||
合计
|
||||
</view>
|
||||
<view class="fuorrect_tow">
|
||||
¥100
|
||||
</view>
|
||||
</view>
|
||||
<view class="fvirect flex-center" @click="requestSubscribeMessage">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-overlay>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
goods_id: '',
|
||||
overlayshow: false,
|
||||
towrecttowclass: 0,
|
||||
numberbox: 1,
|
||||
list: {},
|
||||
height: '',
|
||||
lsitform: {},
|
||||
selectArr: [], //存放被选中的值
|
||||
shopItemInfo: {}, //存放要和选中的值进行匹配的数据
|
||||
subIndex: [], //是否选中 因为不确定是多规格还是单规格，所以这里定义数组来判断
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
onLoad(e) {
|
||||
this.goods_id = e.id
|
||||
},
|
||||
onShow() {},
|
||||
mounted() {
|
||||
//#ifdef MP-WEIXIN || H5
|
||||
var query = uni.createSelectorQuery().in(this).select('.fixedview')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.height = (ele.height) + "px";
|
||||
that = null;
|
||||
}
|
||||
})
|
||||
}).exec();
|
||||
//#endif
|
||||
//#ifdef MP-ALIPAY
|
||||
my.createSelectorQuery().selectAll('.fixedview').boundingClientRect().exec(ele => {
|
||||
var nodeData = ele[0]
|
||||
var that = this;
|
||||
that.height = (nodeData.height) + "px";
|
||||
that = null;
|
||||
})
|
||||
//#endif
|
||||
},
|
||||
methods: {
|
||||
makePhoneCall() {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: this.list.mobile //打电话
|
||||
});
|
||||
},
|
||||
overlayshowsboxs(e) {
|
||||
this.cartshping = e
|
||||
this.overlayshow = true
|
||||
},
|
||||
async overlayshowsbox(item1, index1) {
|
||||
this.towrecttowclass = index1
|
||||
this.lsitform = item1
|
||||
this.lsitform.title_name = item1.title_name
|
||||
// this.lsitform.name = item1.name
|
||||
console.log(this.lsitform)
|
||||
},
|
||||
async requestSubscribeMessage() {
|
||||
// if (this.lsitform.id == '' || this.lsitform.id == null) {
|
||||
// uni.showToast({
|
||||
// title: '请选择合法规格',
|
||||
// icon: 'none'
|
||||
// });
|
||||
// return false;
|
||||
// }
|
||||
// if (this.cartshping == 1) {
|
||||
// this.$u.debounce(this.shoppingindexgoodindexsaddcar(), 200);
|
||||
// } else {
|
||||
uni.pro.navigateTo('user/shop/confirm', {
|
||||
type: 2, // 1购物车 2商品详情页
|
||||
goods_id: this.goods_id, //商品ID 商品详情页来源时必填
|
||||
car_id: '', //购物车ID 1,2 购物车来源时必填
|
||||
number: this.numberbox, //商品详情页来源时必填
|
||||
spec: this.lsitform.name, //规格 商品详情页来源时必填
|
||||
address_id: '', //地址ID 可以为空（为空时返回默认地址）
|
||||
})
|
||||
// }
|
||||
},
|
||||
async shoppingindexgoodindexsaddcar() {
|
||||
let res = await this.api.shoppingindexgoodindexsaddcar({
|
||||
number: this.numberbox,
|
||||
goods_id: this.goods_id,
|
||||
spec: this.lsitform.name,
|
||||
})
|
||||
if (res == 1) {
|
||||
this.overlayshow = false
|
||||
console.log(res)
|
||||
uni.showToast({
|
||||
title: '添加购物车成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
eeInfoindex() { //去首页
|
||||
uni.pro.navigateTo('user/shop/index')
|
||||
},
|
||||
async shoppingindexgoodsgoodsdetail() {
|
||||
let res = await this.api.shoppingindexgoodsgoodsdetail({
|
||||
goods_id: this.goods_id
|
||||
})
|
||||
this.list = res
|
||||
this.lsitform = res.spec[0]
|
||||
this.lsitform.title_name = res.spec[0].title
|
||||
this.lsitform.img = res.host_img
|
||||
this.list.details = res.details.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig,
|
||||
'style="max-width:100%;height:auto;"') // 替换style
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
|
||||
.fixedview {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.fixedview_letr {
|
||||
.fixedview_letr_item:nth-child(1) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fixedview_letr_item {
|
||||
margin-left: 32rpx;
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-top: 8rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_one {
|
||||
.fixedview_oneone {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fixedview_onetow {
|
||||
font-size: 44rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #F45C4C;
|
||||
font-weight: bold;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_tow {
|
||||
flex: auto;
|
||||
padding-left: 24rpx;
|
||||
|
||||
.fixedview_towone {
|
||||
// width: 50%;
|
||||
// font-size: 28rpx;
|
||||
// font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
// font-weight: bold;
|
||||
// color: var(--cart-text-color);
|
||||
// height: 72rpx;
|
||||
// line-height: 72rpx;
|
||||
// text-align: center;
|
||||
// border-radius: 50rpx 0 0 50rpx;
|
||||
// background: var(--cart-background-color);
|
||||
}
|
||||
|
||||
.fixedview_towtow {
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
text-align: center;
|
||||
border-radius: 50rpx;
|
||||
background: #F1CB66;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.warp {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
.rect {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 60rpx 60rpx 0px 0px;
|
||||
padding: 48rpx 32rpx 32rpx 32rpx;
|
||||
|
||||
.onerect {
|
||||
position: relative;
|
||||
padding-bottom: 34rpx;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
|
||||
image {
|
||||
width: 124rpx;
|
||||
height: 124rpx;
|
||||
}
|
||||
|
||||
.nonecontentone_view {
|
||||
|
||||
margin-left: 16rpx;
|
||||
|
||||
.nonecontentone_view_one {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.nonecontentone_view_otow {
|
||||
margin-top: 10rpx;
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN-Medium;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #FF981E;
|
||||
|
||||
image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onerecticon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.towrect {
|
||||
padding-bottom: 34rpx;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
padding-top: 34rpx;
|
||||
|
||||
.towrect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.towrect_tow {
|
||||
margin-top: 16rpx;
|
||||
margin-left: 10rpx;
|
||||
|
||||
.noneActive {
|
||||
background-color: #ccc;
|
||||
opacity: 0.4;
|
||||
color: #000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.towrect_towtext {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
border: 1rpx solid #4F5066;
|
||||
padding: 8rpx 26rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #4F5066;
|
||||
}
|
||||
|
||||
|
||||
.towrect_towtexts {
|
||||
width: 100%;
|
||||
background: #F7F7F7;
|
||||
border-radius: 8rpx;
|
||||
padding: 8rpx 26rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #4F5066;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.thererect {
|
||||
padding: 34rpx 0;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
border-top: 1rpx solid #F7F7F7;
|
||||
|
||||
.thererect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.thererect_tow {}
|
||||
}
|
||||
|
||||
.fuorrect {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.fuorrect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.fuorrect_tow {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.fvirect {
|
||||
margin-top: 200rpx;
|
||||
padding: 16rpx;
|
||||
text-align: center;
|
||||
background: #F1CB66;
|
||||
border-radius: 40rpx;
|
||||
font-size: 36rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.contentimage {
|
||||
width: 100%;
|
||||
height: 528rpx;
|
||||
}
|
||||
|
||||
.contentbox {
|
||||
padding: 28rpx 32rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
|
||||
.contentbox_one {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.contentbox_tow {
|
||||
margin-top: 12rpx;
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN-Medium;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #FF981E;
|
||||
|
||||
image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentboxtow {
|
||||
margin-top: 14rpx;
|
||||
width: 100%;
|
||||
padding: 28rpx 32rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.onecontentterewone::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4rpx;
|
||||
height: 24rpx;
|
||||
background: #febc46;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.onecontentterewone {
|
||||
.onecontenttereone_one {
|
||||
margin-left: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
|
||||
text {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.introduction_yow {
|
||||
margin-top: 18rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1A1A1A;
|
||||
width: 100%;
|
||||
|
||||
/deep/ [alt] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ p {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -30,19 +30,19 @@
|
||||
</view>
|
||||
<view class="order-menu">
|
||||
<view class="item" @click="orderHandle(2)">
|
||||
<image class="icon" src="@/static/user_icon1.png" mode="aspectFit"></image>
|
||||
<image class="icon" src="@/static/user/user_icon1.png" mode="aspectFit"></image>
|
||||
<text class="t">待付款</text>
|
||||
</view>
|
||||
<view class="item" @click="orderHandle(3)">
|
||||
<image class="icon" src="@/static/user_icon2.png" mode="aspectFit"></image>
|
||||
<image class="icon" src="@/static/user/user_icon2.png" mode="aspectFit"></image>
|
||||
<text class="t">待发货</text>
|
||||
</view>
|
||||
<view class="item" @click="orderHandle(4)">
|
||||
<image class="icon" src="@/static/user_icon3.png" mode="aspectFit"></image>
|
||||
<image class="icon" src="@/static/user/user_icon3.png" mode="aspectFit"></image>
|
||||
<text class="t">已完成</text>
|
||||
</view>
|
||||
<view class="item" @click="orderHandle(5)">
|
||||
<image class="icon" src="@/static/user_icon4.png" mode="aspectFit"></image>
|
||||
<image class="icon" src="@/static/user/user_icon4.png" mode="aspectFit"></image>
|
||||
<text class="t">退款</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
BIN
static/shop/k.png
Normal file
BIN
static/shop/k.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 683 B |
BIN
static/shop/s.png
Normal file
BIN
static/shop/s.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 570 B |
BIN
static/shop/weitu.png
Normal file
BIN
static/shop/weitu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 650 B |
|
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 6.5 KiB |
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 8.4 KiB |
|
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 6.8 KiB |
|
Before Width: | Height: | Size: 7.0 KiB After Width: | Height: | Size: 7.0 KiB |
|
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 6.5 KiB |
|
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Reference in New Issue
Block a user