addStore.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  1. <template>
  2. <view class="content-add">
  3. <view class="add-body">
  4. <view class="form-data">
  5. <view class="flex flex_column data-item">
  6. <text>名称</text>
  7. <view class="list-item-right flex_1 flex justify_between">
  8. <u-input class="flex_1" :custom-style="inputClass" v-model="form.contactName" placeholder="请输入店铺名称" placeholder-style="color:'#bbb';font-size:18px"/>
  9. </view>
  10. </view>
  11. <view class="flex flex_column data-item last">
  12. <view class="flex align_center">
  13. <view style="color:#666E75">电话</view>
  14. <u-image src="/static/billing_icon.png" width="24" height="24" style="margin:0 0 10rpx 10rpx;"></u-image>
  15. </view>
  16. <view class="list-item-right flex_1 flex justify_between">
  17. <u-input class="flex_1" :custom-style="inputClass" v-model="form.contactPhone" placeholder="请输入联系电话" placeholder-style="color:'#bbb';font-size:18px"/>
  18. </view>
  19. </view>
  20. </view>
  21. <view class="form-data">
  22. <view class="flex flex_column data-item">
  23. <text>地址</text>
  24. <view class="list-item-right flex_1 flex justify_between">
  25. <u-input class="flex_1" :custom-style="inputClass" v-model="form.contactAddress" @click="selectAddress" :disabled="true" placeholder="请选择通信地址" placeholder-style="color:'#bbb';font-size:18px"/>
  26. <u-icon class="back-img" name="arrow-right" color="#9DA8B5" @click="selectAddress"></u-icon>
  27. </view>
  28. </view>
  29. <view class="flex flex_column data-item last">
  30. <text>详细地址</text>
  31. <view class="list-item-right flex_1 flex justify_between">
  32. <u-input class="flex_1" :custom-style="inputClass" v-model="form.detailAddress" placeholder="请输入详细地址" placeholder-style="color:'#bbb';font-size:18px"/>
  33. </view>
  34. </view>
  35. </view>
  36. <view class="form-data">
  37. <view class="headerImgTitle"> 门头照片 <text style="color: #bbbbbb;">(仅可上传1张,10MB以内)</text></view>
  38. <view class="info-main">
  39. <view class="camera-btn" v-if="photograph.length<1">
  40. <view @click="goPhotograph" class="photograph-camera">
  41. <u-icon name="camera" color="#bfbfbf" size="60" ></u-icon>
  42. </view>
  43. </view>
  44. <view v-show="photograph.length" v-for="(item,index) in photograph" :key="index" class="photograph-con">
  45. <u-icon name="close-circle-fill" color="#fa3534" size="50" class="close-circle-icon" @click="cancelPhotograph(index)"></u-icon>
  46. <u-image width="100%" height="100%" :src="item" @click="previewPictures(item)"></u-image>
  47. </view>
  48. </view>
  49. </view>
  50. </view>
  51. <view class="footer" @click="submit">
  52. <view class="submit-btn flex justify_center align_center">保存</view>
  53. </view>
  54. </view>
  55. </template>
  56. <script>
  57. import {saveImgToAliOss} from '@/libs/tools.js'
  58. export default{
  59. data(){
  60. return{
  61. photograph: [],
  62. imageHeader:'', // 图片路径
  63. form:{
  64. contactName:'', // 名称
  65. contactPhone:'', // 手机号码
  66. contactAddress:"", // 通信地址
  67. detailAddress:'' // 详细地址
  68. },
  69. itemId:'',// 店铺id
  70. pageInfo:{}, // 页面数据
  71. }
  72. },
  73. onLoad(option) {
  74. if(option.id){
  75. console.log(option,option.id)
  76. uni.setNavigationBarTitle({
  77. title: '修改店铺'
  78. });
  79. this.itemId=option.id
  80. this.getDetailInfo()
  81. }
  82. },
  83. methods:{
  84. // 获取详情信息
  85. getDetailInfo(){
  86. getDetailInfo({id:this.itemId}).then(res=>{
  87. if(res.status==200){
  88. this.pageInfo=res.data
  89. }else{
  90. uni.showToast({
  91. title: res.message,
  92. icon:'none',
  93. })
  94. }
  95. })
  96. },
  97. // 选择通信地址
  98. selectAddress(){
  99. wx.chooseLocation({
  100. success:(res)=>{
  101. if(res){
  102. this.getArea(res.address)
  103. console.log(res,'------------------地址信息',this.getArea(res.address))
  104. this.form.contactAddress=res.address
  105. this.form.lat=res.latitude
  106. this.form.lng=res.longitude
  107. }
  108. }
  109. })
  110. },
  111. // 拍照或从相册选图片
  112. goPhotograph() {
  113. uni.chooseImage({
  114. count: 1, //默认9
  115. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  116. sourceType: ['album','camera'], //从相册选择
  117. success: (res) =>{
  118. if(res.tempFiles[0].size>10485760){
  119. uni.showToast({
  120. title: '图片过大无法上传!',
  121. icon: 'none'
  122. })
  123. return
  124. }
  125. uni.showLoading({
  126. title:'正在保存图片...',
  127. mask: true
  128. })
  129. saveImgToAliOss(res.tempFilePaths[0],(ret)=>{
  130. this.photograph.push(ret.data)
  131. uni.hideLoading()
  132. })
  133. }
  134. });
  135. },
  136. // 预览图片
  137. previewPictures(item) {
  138. const photograph = [item];
  139. uni.previewImage({
  140. urls: photograph,
  141. });
  142. },
  143. // 删除图片
  144. cancelPhotograph(index) {
  145. setTimeout(() => {
  146. this.photograph.splice(index)
  147. }, 500);
  148. },
  149. // 保存
  150. submit(){
  151. const testVal=/^1[34578]\d{9}$/
  152. if (!testVal.test(this.form.contactPhone)) {
  153. uni.showToast({
  154. title: '请输入正确的联系电话',
  155. icon: 'none'
  156. })
  157. return false
  158. }
  159. }
  160. }
  161. }
  162. </script>
  163. <style lang="less">
  164. .content-add{
  165. width: 100%;
  166. height: 100vh;
  167. background-color: #f5f5f5;
  168. display: flex;
  169. flex-direction: column;
  170. .add-body{
  171. width: 100%;
  172. padding: 20upx 30upx;
  173. flex: 1;
  174. overflow-y: scroll;
  175. .form-data{
  176. width: 100%;
  177. background-color: #fff;
  178. border-radius: 24upx;
  179. margin-bottom: 20upx;
  180. .data-item{
  181. margin: 0 32upx;
  182. padding: 36upx 0;
  183. border-bottom: 1px solid #e5e5e5;
  184. }
  185. .data-item>text:first-child{
  186. color:#666E75;
  187. }
  188. .last{
  189. border-bottom:none;
  190. }
  191. .headerImgTitle{
  192. padding-top:36upx;
  193. margin: 0 32upx;
  194. color:#666E75;
  195. }
  196. .info-main {
  197. margin:0 32upx;
  198. padding: 10upx 0 36upx;
  199. border-radius: 12upx;
  200. background-color: #fff;
  201. display: flex;
  202. .location-icon {
  203. padding-left: 10upx;
  204. vertical-align: sub;
  205. }
  206. .photograph-camera {
  207. border: 2upx dashed #bfbfbf;
  208. border-radius: 12upx;
  209. width: 140upx;
  210. height: 140upx;
  211. display: flex;
  212. align-items: center;
  213. justify-content: center;
  214. }
  215. .camera-btn{
  216. display: flex;
  217. flex-direction: column;
  218. align-items: center;
  219. color: #999999;
  220. font-size: 24upx;
  221. }
  222. .photograph-con {
  223. margin: 0 20upx;
  224. width: 140upx;
  225. height: 140upx;
  226. text-align: center;
  227. position: relative;
  228. .photograph-icon {
  229. display: inline-block;
  230. padding-top: 48upx;
  231. }
  232. .close-circle-icon {
  233. background-color: #fff;
  234. border-radius: 50%;
  235. position: absolute;
  236. right: -23upx;
  237. top: -23upx;
  238. z-index: 9;
  239. }
  240. }
  241. }
  242. }
  243. }
  244. .footer{
  245. width: 100%;
  246. padding: 14upx 32upx 32upx;
  247. background-color: #fff;
  248. color: #fff;
  249. font-weight: 500;
  250. .submit-btn{
  251. height: 84upx;
  252. background: #1995FF;
  253. opacity: 1;
  254. border-radius: 16upx;
  255. }
  256. }
  257. }
  258. </style>